diff --git a/src/accordion/style.css b/src/accordion/style.css new file mode 100644 index 0000000..b1ad653 --- /dev/null +++ b/src/accordion/style.css @@ -0,0 +1,29 @@ +tp-accordion { + display: block; +} + +tp-accordion-expand-all, +tp-accordion-collapse-all { + display: inline-block; +} + +tp-accordion-item { + display: block; +} + +tp-accordion-handle { + display: block; +} + +tp-accordion-content { + display: block; + height: 0; + overflow: hidden; + transition-property: height; + transition-duration: 0.6s; + transition-timing-function: ease; +} +tp-accordion-item[open-by-default=yes] tp-accordion-content { + display: block; + height: auto; +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/src/accordion/style.css.map b/src/accordion/style.css.map new file mode 100644 index 0000000..9857cbb --- /dev/null +++ b/src/accordion/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACC,cAAA;ACCD;;ADEA;;EAEC,qBAAA;ACCD;;ADEA;EACC,cAAA;ACCD;;ADEA;EACC,cAAA;ACCD;;ADEA;EACC,cAAA;EACA,SAAA;EACA,gBAAA;EACA,2BAAA;EACA,yBAAA;EACA,gCAAA;ACCD;ADCC;EACC,cAAA;EACA,YAAA;ACCF","file":"style.css"} \ No newline at end of file diff --git a/src/form/style.css b/src/form/style.css new file mode 100644 index 0000000..ffeba9b --- /dev/null +++ b/src/form/style.css @@ -0,0 +1 @@ +/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/src/form/style.css.map b/src/form/style.css.map new file mode 100644 index 0000000..8d75751 --- /dev/null +++ b/src/form/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":[],"names":[],"mappings":"","file":"style.css"} \ No newline at end of file diff --git a/src/lightbox/style.css b/src/lightbox/style.css new file mode 100644 index 0000000..64a7b38 --- /dev/null +++ b/src/lightbox/style.css @@ -0,0 +1,37 @@ +:root:has(tp-lightbox dialog[open]) { + overflow: clip; +} + +@keyframes show-tp-lightbox { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +tp-lightbox dialog { + border: 0; + padding: 0; +} +tp-lightbox dialog[open] { + animation-name: show-tp-lightbox; + animation-duration: 0.5s; + animation-timing-function: ease-in-out; +} +tp-lightbox dialog::backdrop { + background: rgba(0, 0, 0, 0.6); +} + +tp-lightbox-content { + display: block; + position: relative; +} + +tp-lightbox[loading] tp-lightbox-content::after { + position: absolute; + content: "Loading..."; + z-index: 5; + top: 50px; + left: 50px; +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/src/lightbox/style.css.map b/src/lightbox/style.css.map new file mode 100644 index 0000000..9c31609 --- /dev/null +++ b/src/lightbox/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AACA;EACC,cAAA;ACAD;;ADGA;EACC;IACC,UAAA;ECAA;EDED;IACC,UAAA;ECAA;AACF;ADKC;EACC,SAAA;EACA,UAAA;ACHF;ADKE;EACC,gCAAA;EACA,wBAAA;EACA,sCAAA;ACHH;ADME;EACC,8BAAA;ACJH;;ADSA;EACC,cAAA;EACA,kBAAA;ACND;;ADSA;EACC,kBAAA;EACA,qBAAA;EACA,UAAA;EACA,SAAA;EACA,UAAA;ACND","file":"style.css"} \ No newline at end of file diff --git a/src/modal/style.css b/src/modal/style.css new file mode 100644 index 0000000..2a06f81 --- /dev/null +++ b/src/modal/style.css @@ -0,0 +1,32 @@ +tp-modal { + display: none; + background-color: rgba(0, 0, 0, 0.5); + -webkit-backdrop-filter: blur(2px); + backdrop-filter: blur(2px); + position: fixed; + height: 100%; + width: 100%; + left: 0; + top: 0; + z-index: 99; + max-width: 100%; + overflow-y: auto; + padding: 20px; + box-sizing: border-box; +} +tp-modal[open] { + display: flex; +} +tp-modal-close { + position: absolute; + top: 20px; + right: 20px; +} +tp-modal-content { + display: block; + min-width: 0; + margin: auto; + padding: 20px; + background-color: #fff; + max-width: 80ch; +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/src/modal/style.css.map b/src/modal/style.css.map new file mode 100644 index 0000000..bb61f45 --- /dev/null +++ b/src/modal/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACC,aAAA;EACA,oCAAA;EACA,kCAAA;UAAA,0BAAA;EACA,eAAA;EACA,YAAA;EACA,WAAA;EACA,OAAA;EACA,MAAA;EACA,WAAA;EACA,eAAA;EACA,gBAAA;EACA,aAAA;EACA,sBAAA;ACCD;ADCC;EACC,aAAA;ACCF;ADEC;EACC,kBAAA;EACA,SAAA;EACA,WAAA;ACAF;ADGC;EACC,cAAA;EACA,YAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;EACA,eAAA;ACDF","file":"style.css"} \ No newline at end of file diff --git a/src/multi-select/style.css b/src/multi-select/style.css new file mode 100644 index 0000000..1551425 --- /dev/null +++ b/src/multi-select/style.css @@ -0,0 +1,72 @@ +tp-multi-select { + display: block; + position: relative; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} +tp-multi-select select { + visibility: hidden; + position: absolute; +} + +tp-multi-select-field { + display: flex; + flex-wrap: wrap; +} + +tp-multi-select-options { + display: none; + position: absolute; + top: 100%; + left: 0; + right: 0; + background-color: #fff; + z-index: 2; +} +tp-multi-select[open=yes] tp-multi-select-options { + display: block; +} + +tp-multi-select-option { + display: block; +} +tp-multi-select-option[hidden=yes] { + display: none; +} +tp-multi-select-option[disabled=yes] { + opacity: 0.5; + cursor: not-allowed; +} +tp-multi-select-option[disabled=yes]:active { + pointer-events: none; +} + +tp-multi-select-placeholder { + display: block; +} +tp-multi-select[selected=yes] tp-multi-select-placeholder { + display: none; +} + +tp-multi-select-status { + display: none; +} +tp-multi-select[selected=yes] tp-multi-select-status { + display: block; +} + +tp-multi-select-search input { + box-sizing: border-box; + border: 0; + outline: none; + min-width: 3ch; +} + +tp-multi-select-pills { + display: inline-block; +} + +tp-multi-select-select-all { + display: block; +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/src/multi-select/style.css.map b/src/multi-select/style.css.map new file mode 100644 index 0000000..1ed7091 --- /dev/null +++ b/src/multi-select/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACC,cAAA;EACA,kBAAA;EACA,yBAAA;KAAA,sBAAA;UAAA,iBAAA;ACCD;ADCC;EACC,kBAAA;EACA,kBAAA;ACCF;;ADGA;EACC,aAAA;EACA,eAAA;ACAD;;ADGA;EACC,aAAA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;EACA,sBAAA;EACA,UAAA;ACAD;ADEC;EACC,cAAA;ACAF;;ADIA;EACC,cAAA;ACDD;ADGC;EACC,aAAA;ACDF;ADIC;EACC,YAAA;EACA,mBAAA;ACFF;ADIE;EACC,oBAAA;ACFH;;ADOA;EACC,cAAA;ACJD;ADMC;EACC,aAAA;ACJF;;ADQA;EACC,aAAA;ACLD;ADOC;EACC,cAAA;ACLF;;ADWC;EACC,sBAAA;EACA,SAAA;EACA,aAAA;EACA,cAAA;ACRF;;ADYA;EACC,qBAAA;ACTD;;ADYA;EACC,cAAA;ACTD","file":"style.css"} \ No newline at end of file diff --git a/src/number-spinner/style.css b/src/number-spinner/style.css new file mode 100644 index 0000000..347ef67 --- /dev/null +++ b/src/number-spinner/style.css @@ -0,0 +1,3 @@ +tp-number-spinner { + display: contents; +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/src/number-spinner/style.css.map b/src/number-spinner/style.css.map new file mode 100644 index 0000000..e368fa2 --- /dev/null +++ b/src/number-spinner/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACC,iBAAA;ACCD","file":"style.css"} \ No newline at end of file diff --git a/src/slider/style.css b/src/slider/style.css new file mode 100644 index 0000000..983d3c3 --- /dev/null +++ b/src/slider/style.css @@ -0,0 +1,62 @@ +tp-slider { + display: block; +} + +tp-slider-track { + display: block; + overflow-y: visible; + overflow-x: clip; + position: relative; +} + +tp-slider-slides { + position: relative; + display: flex; + align-items: flex-start; +} +tp-slider:not([resizing=yes]) tp-slider-slides { + transition-duration: 0.6s; + transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); +} + +tp-slider-slide { + flex: 0 0 100%; + scroll-snap-align: start; +} +tp-slider[flexible-height=yes]:not([initialized]) tp-slider-slide:not(:first-child) { + display: none; +} + +tp-slider-nav { + display: flex; + gap: 10px; +} + +tp-slider[behaviour=fade] { + /** + * We are using first of type and direct child here + * so that if there is a nested slider it does not affect + * the styles for the inner slider and is only applied to the + * parent. + */ +} +tp-slider[behaviour=fade] tp-slider-slides:first-of-type { + display: block; +} +tp-slider[behaviour=fade] tp-slider-slides:first-of-type > tp-slider-slide { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: auto; + transition-property: opacity, visibility; + transition-duration: 0.6s; + transition-timing-function: ease; + visibility: hidden; + opacity: 0; +} +tp-slider[behaviour=fade] tp-slider-slides:first-of-type > tp-slider-slide[active=yes] { + visibility: visible; + opacity: 1; + z-index: 1; +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/src/slider/style.css.map b/src/slider/style.css.map new file mode 100644 index 0000000..1859db6 --- /dev/null +++ b/src/slider/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACC,cAAA;ACCD;;ADEA;EACC,cAAA;EACA,mBAAA;EACA,gBAAA;EACA,kBAAA;ACCD;;ADEA;EACC,kBAAA;EACA,aAAA;EACA,uBAAA;ACCD;ADCC;EACC,yBAAA;EACA,0DAAA;ACCF;;ADGA;EACC,cAAA;EACA,wBAAA;ACAD;ADEC;EACC,aAAA;ACAF;;ADIA;EACC,aAAA;EACA,SAAA;ACDD;;ADKA;EAEC;;;;;IAAA;ACED;ADIC;EACC,cAAA;ACFF;ADIE;EACC,kBAAA;EACA,OAAA;EACA,MAAA;EACA,WAAA;EACA,YAAA;EACA,wCAAA;EACA,yBAAA;EACA,gCAAA;EACA,kBAAA;EACA,UAAA;ACFH;ADKE;EACC,mBAAA;EACA,UAAA;EACA,UAAA;ACHH","file":"style.css"} \ No newline at end of file diff --git a/src/slider/tp-slider.ts b/src/slider/tp-slider.ts index b1b476a..284978f 100644 --- a/src/slider/tp-slider.ts +++ b/src/slider/tp-slider.ts @@ -616,17 +616,13 @@ export class TPSliderElement extends HTMLElement { return; } - // Check if it's a right or left swipe. - if ( swipeDistanceX > 0 ) { - // Right-Swipe: Check if horizontal swipe distance is less than the threshold. - if ( swipeDistanceX < this.swipeThreshold ) { - this.previous(); - } - } else if ( swipeDistanceX < 0 ) { - // Left-Swipe: Check if horizontal swipe distance is less than the threshold. - if ( swipeDistanceX > -this.swipeThreshold ) { - this.next(); - } + // Check if the swipe distance is positive (right swipe) and exceeds the threshold. + if ( swipeDistanceX > 0 && swipeDistanceX > this.swipeThreshold ) { + // Trigger the "previous" action for a right swipe that meets the threshold. + this.previous(); + } else if ( swipeDistanceX < 0 && Math.abs( swipeDistanceX ) > this.swipeThreshold ) { + // Trigger the "next" action for a left swipe that meets the threshold. + this.next(); } } diff --git a/src/tabs/style.css b/src/tabs/style.css new file mode 100644 index 0000000..5ca039c --- /dev/null +++ b/src/tabs/style.css @@ -0,0 +1,6 @@ +tp-tabs-tab { + display: none; +} +tp-tabs-tab[open=yes] { + display: block; +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/src/tabs/style.css.map b/src/tabs/style.css.map new file mode 100644 index 0000000..d60af93 --- /dev/null +++ b/src/tabs/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACC,aAAA;ACCD;ADCC;EACC,cAAA;ACCF","file":"style.css"} \ No newline at end of file diff --git a/src/toggle-attribute/style.css b/src/toggle-attribute/style.css new file mode 100644 index 0000000..c9c1843 --- /dev/null +++ b/src/toggle-attribute/style.css @@ -0,0 +1,3 @@ +tp-toggle-attribute { + display: contents; +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/src/toggle-attribute/style.css.map b/src/toggle-attribute/style.css.map new file mode 100644 index 0000000..e368fa2 --- /dev/null +++ b/src/toggle-attribute/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACC,iBAAA;ACCD","file":"style.css"} \ No newline at end of file