@travelopia/web-components 0.0.9 → 0.1.0

package/README.md

@@ -7,10 +7,14 @@ Accessible web components for the modern web.
 <table width="100%">
 	<tr>
 		<td align="left" width="70%">
-        <p>Built by the super talented team at <strong><a href="https://www.travelopia.com/work-with-us/">Travelopia</a></strong>.</p>
+        	<p>Built by the super talented team at <strong><a href="https://www.travelopia.com/work-with-us/">Travelopia</a></strong>.</p>
 		</td>
 		<td align="center" width="30%">
 			<img src="https://www.travelopia.com/wp-content/themes/travelopia/assets/svg/logo-travelopia-circle.svg" width="50" />
 		</td>
 	</tr>
 </table>
+
+### Installation
+
+`npm i @travelopia/web-components`

package/dist/declarations.d.ts

@@ -1,15 +1,138 @@
 /**
- * TP Modal Close.
+ * TP Slider.
  */
-export class TPModalCloseElement extends HTMLElement {
+export class TPSliderElement extends HTMLElement {
+    /**
+     * Properties.
+     */
+    protected touchStartX: number;
+    /**
+     * Constructor.
+     */
+    constructor();
+    /**
+     * Get observed attributes.
+     *
+     * @return {Array} List of observed attributes.
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Attribute changed callback.
+     *
+     * @param {string} name     Attribute name.
+     * @param {string} oldValue Old value.
+     * @param {string} newValue New value.
+     */
+    attributeChangedCallback(name?: string, oldValue?: string, newValue?: string): void;
+    /**
+     * Get current slide index.
+     *
+     * @return {number} Current slide index.
+     */
+    get currentSlideIndex(): number;
+    /**
+     * Set current slide index.
+     *
+     * @param {number} index Slide index.
+     */
+    set currentSlideIndex(index: number);
+    /**
+     * Get total number of slides.
+     *
+     * @return {number} Total slides.
+     */
+    getTotalSlides(): number;
+    /**
+     * Navigate to the next slide.
+     */
+    next(): void;
+    /**
+     * Navigate to the previous slide.
+     */
+    previous(): void;
+    /**
+     * Get current slide index.
+     *
+     * @return {number} Current slide index.
+     */
+    getCurrentSlide(): number;
+    /**
+     * Set the current slide index.
+     *
+     * @param {number} index Slide index.
+     */
+    setCurrentSlide(index: number): void;
+    /**
+     * Slide to the current slide.
+     *
+     * @protected
+     */
+    protected slide(): void;
+    /**
+     * Update stuff when any attribute has changed.
+     * Example: Update subcomponents.
+     */
+    update(): void;
+    /**
+     * Update the height of the slider based on current slide.
+     */
+    updateHeight(): void;
+    /**
+     * Resize the slider when the window is resized.
+     *
+     * @protected
+     */
+    protected handleResize(): void;
+    /**
+     * Detect touch start event, and store the starting location.
+     *
+     * @param {Event} e Touch event.
+     *
+     * @protected
+     */
+    protected handleTouchStart(e: TouchEvent): void;
+    /**
+     * Detect touch end event, and check if it was a left or right swipe.
+     *
+     * @param {Event} e Touch event.
+     *
+     * @protected
+     */
+    protected handleTouchEnd(e: TouchEvent): void;
+}
+
+/**
+ * TP Slider Nav Item.
+ */
+export class TPSliderNavItemElement extends HTMLElement {
     /**
      * Connected callback.
      */
     connectedCallback(): void;
     /**
-     * Close the modal.
+     * Handle when the button is clicked.
      */
-    closeModal(): void;
+    handleClick(): void;
+    /**
+     * Get index of this item inside the navigation.
+     *
+     * @return {number} Index.
+     */
+    getIndex(): number;
+}
+
+/**
+ * TP Slider Arrow.
+ */
+export class TPSliderArrowElement extends HTMLElement {
+    /**
+     * Connected callback.
+     */
+    connectedCallback(): void;
+    /**
+     * Handle when the button is clicked.
+     */
+    handleClick(): void;
 }
 
 /**
@@ -40,3 +163,67 @@ export class TPModalElement extends HTMLElement {
     handleClick(e: Event): void;
 }
 
+/**
+ * TP Modal Close.
+ */
+export class TPModalCloseElement extends HTMLElement {
+    /**
+     * Connected callback.
+     */
+    connectedCallback(): void;
+    /**
+     * Close the modal.
+     */
+    closeModal(): void;
+}
+
+/**
+ * TP Slider Slides.
+ */
+export class TPSliderSlidesElement extends HTMLElement {
+}
+
+/**
+ * TP Slider Slide.
+ */
+export class TPSliderSlideElement extends HTMLElement {
+}
+
+/**
+ * TP Slider Nav.
+ */
+export class TPSliderNavElement extends HTMLElement {
+}
+
+/**
+ * TP Slider Count.
+ */
+export class TPSliderCountElement extends HTMLElement {
+    /**
+     * Get observed attributes.
+     *
+     * @return {Array} Observed attributes.
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Get format.
+     *
+     * @return {string} Format.
+     */
+    get format(): string;
+    /**
+     * Set format.
+     *
+     * @param {string} format Format.
+     */
+    set format(format: string);
+    /**
+     * Attribute changed callback.
+     */
+    attributeChangedCallback(): void;
+    /**
+     * Update component.
+     */
+    update(): void;
+}
+

package/dist/slider/index.js

@@ -0,0 +1,2 @@
+(()=>{"use strict";class t extends HTMLElement{constructor(){super(),this.touchStartX=0,this.getAttribute("current-slide")||this.setAttribute("current-slide","1"),this.slide(),this.setAttribute("initialized","yes"),window.addEventListener("resize",this.handleResize.bind(this)),this.addEventListener("touchstart",this.handleTouchStart.bind(this)),this.addEventListener("touchend",this.handleTouchEnd.bind(this))}static get observedAttributes(){return["current-slide","flexible-height","infinite"]}attributeChangedCallback(t="",e="",i=""){"current-slide"===t&&e!==i&&(this.slide(),this.dispatchEvent(new CustomEvent("slide-complete",{bubbles:!0}))),this.update()}get currentSlideIndex(){var t;return parseInt(null!==(t=this.getAttribute("current-slide"))&&void 0!==t?t:"1")}set currentSlideIndex(t){this.setCurrentSlide(t)}getTotalSlides(){const t=this.querySelectorAll("tp-slider-slide");return t?t.length:0}next(){const t=this.getTotalSlides();this.currentSlideIndex>=t?"yes"===this.getAttribute("infinite")&&this.setCurrentSlide(1):this.setCurrentSlide(this.currentSlideIndex+1)}previous(){this.currentSlideIndex<=1?"yes"===this.getAttribute("infinite")&&this.setCurrentSlide(this.getTotalSlides()):this.setCurrentSlide(this.currentSlideIndex-1)}getCurrentSlide(){return this.currentSlideIndex}setCurrentSlide(t){t>this.getTotalSlides()||t<=0||(this.dispatchEvent(new CustomEvent("slide-set",{bubbles:!0})),this.setAttribute("current-slide",t.toString()))}slide(){if("yes"===this.getAttribute("disabled"))return;const t=this.querySelector("tp-slider-slides"),e=this.querySelectorAll("tp-slider-slide");t&&e&&(this.updateHeight(),t.style.left=`-${this.offsetWidth*(this.currentSlideIndex-1)}px`)}update(){const t=this.querySelectorAll("tp-slider-nav-item"),e=this.querySelector("tp-slider-count"),i=this.querySelector('tp-slider-arrow[direction="previous"]'),s=this.querySelector('tp-slider-arrow[direction="next"]'),r=this.querySelectorAll("tp-slider-slide");null==r||r.forEach(((t,e)=>{this.currentSlideIndex-1===e?t.setAttribute("active","yes"):t.removeAttribute("active")})),t&&t.forEach(((t,e)=>{this.currentSlideIndex-1===e?t.setAttribute("current","yes"):t.removeAttribute("current")})),e&&(e.setAttribute("current",this.getCurrentSlide().toString()),e.setAttribute("total",this.getTotalSlides().toString())),"yes"!==this.getAttribute("infinite")?(this.getCurrentSlide()===this.getTotalSlides()?null==s||s.setAttribute("disabled","yes"):null==s||s.removeAttribute("disabled"),1===this.getCurrentSlide()?null==i||i.setAttribute("disabled","yes"):null==i||i.removeAttribute("disabled")):(null==s||s.removeAttribute("disabled"),null==i||i.removeAttribute("disabled"))}updateHeight(){const t=this.querySelector("tp-slider-slides");if(!t)return;if("yes"!==this.getAttribute("flexible-height"))return void t.style.removeProperty("height");const e=this.querySelectorAll("tp-slider-slide");if(!e)return;const i=e[this.currentSlideIndex-1].scrollHeight;t.style.height=`${i}px`}handleResize(){this.setAttribute("resizing","yes"),this.slide();const t=this;setTimeout((function(){t.removeAttribute("resizing")}),10)}handleTouchStart(t){"yes"===this.getAttribute("swipe")&&(this.touchStartX=t.touches[0].clientX)}handleTouchEnd(t){if("yes"!==this.getAttribute("swipe"))return;const e=t.changedTouches[0].clientX-this.touchStartX;e>0?this.previous():e<0&&this.next()}}class e extends HTMLElement{}class i extends HTMLElement{}class s extends HTMLElement{connectedCallback(){var t;null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.handleClick.bind(this))}handleClick(){if("yes"===this.getAttribute("disabled"))return;const t=this.closest("tp-slider");t&&("previous"===this.getAttribute("direction")?t.previous():"next"===this.getAttribute("direction")&&t.next())}}class r extends HTMLElement{}class l extends HTMLElement{connectedCallback(){var t;null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.handleClick.bind(this))}handleClick(){const t=this.closest("tp-slider");t&&t.setCurrentSlide(this.getIndex())}getIndex(){var t,e;if(this.getAttribute("index"))return parseInt(null!==(t=this.getAttribute("index"))&&void 0!==t?t:"0");const i=this.closest("tp-slider-nav");return Array.from(null!==(e=null==i?void 0:i.children)&&void 0!==e?e:[]).indexOf(this)+1}}class n extends HTMLElement{static get observedAttributes(){return["current","total","format"]}get format(){var t;return null!==(t=this.getAttribute("format"))&&void 0!==t?t:"$current / $total"}set format(t){this.setAttribute("format",t)}attributeChangedCallback(){this.update()}update(){var t,e;this.innerHTML=this.format.replace("$current",null!==(t=this.getAttribute("current"))&&void 0!==t?t:"").replace("$total",null!==(e=this.getAttribute("total"))&&void 0!==e?e:"")}}customElements.define("tp-slider",t),customElements.define("tp-slider-slides",e),customElements.define("tp-slider-slide",i),customElements.define("tp-slider-arrow",s),customElements.define("tp-slider-nav",r),customElements.define("tp-slider-nav-item",l),customElements.define("tp-slider-count",n)})();
+//# sourceMappingURL=index.js.map

package/dist/slider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dist/slider/index.js","mappings":"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","sources":["webpack://@travelopia/web-components/./src/slider/tp-slider.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-slides.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-slide.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-arrow.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-nav.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-nav-item.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-count.ts","webpack://@travelopia/web-components/./src/slider/index.ts"],"sourcesContent":["/**\n * Internal dependencies.\n */\nimport { TPSliderSlidesElement } from './tp-slider-slides';\nimport { TPSliderSlideElement } from './tp-slider-slide';\nimport { TPSliderCountElement } from './tp-slider-count';\nimport { TPSliderNavItemElement } from './tp-slider-nav-item';\nimport { TPSliderArrowElement } from './tp-slider-arrow';\n\n/**\n * TP Slider.\n */\nexport class TPSliderElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected touchStartX: number = 0;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\n\t\t// Set current slide.\n\t\tif ( ! this.getAttribute( 'current-slide' ) ) {\n\t\t\tthis.setAttribute( 'current-slide', '1' );\n\t\t}\n\n\t\t// Initialize slider.\n\t\tthis.slide();\n\t\tthis.setAttribute( 'initialized', 'yes' );\n\n\t\t// Event listeners.\n\t\twindow.addEventListener( 'resize', this.handleResize.bind( this ) );\n\t\tthis.addEventListener( 'touchstart', this.handleTouchStart.bind( this ) );\n\t\tthis.addEventListener( 'touchend', this.handleTouchEnd.bind( this ) );\n\t}\n\n\t/**\n\t * Get observed attributes.\n\t *\n\t * @return {Array} List of observed attributes.\n\t */\n\tstatic get observedAttributes(): string[] {\n\t\treturn [ 'current-slide', 'flexible-height', 'infinite' ];\n\t}\n\n\t/**\n\t * Attribute changed callback.\n\t *\n\t * @param {string} name     Attribute name.\n\t * @param {string} oldValue Old value.\n\t * @param {string} newValue New value.\n\t */\n\tattributeChangedCallback( name: string = '', oldValue: string = '', newValue: string = '' ): void {\n\t\tif ( 'current-slide' === name && oldValue !== newValue ) {\n\t\t\tthis.slide();\n\t\t\tthis.dispatchEvent( new CustomEvent( 'slide-complete', { bubbles: true } ) );\n\t\t}\n\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Get current slide index.\n\t *\n\t * @return {number} Current slide index.\n\t */\n\tget currentSlideIndex(): number {\n\t\treturn parseInt( this.getAttribute( 'current-slide' ) ?? '1' );\n\t}\n\n\t/**\n\t * Set current slide index.\n\t *\n\t * @param {number} index Slide index.\n\t */\n\tset currentSlideIndex( index: number ) {\n\t\tthis.setCurrentSlide( index );\n\t}\n\n\t/**\n\t * Get total number of slides.\n\t *\n\t * @return {number} Total slides.\n\t */\n\tgetTotalSlides(): number {\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null = this.querySelectorAll( 'tp-slider-slide' );\n\t\tif ( slides ) {\n\t\t\treturn slides.length;\n\t\t}\n\n\t\treturn 0;\n\t}\n\n\t/**\n\t * Navigate to the next slide.\n\t */\n\tnext(): void {\n\t\tconst totalSlides: number = this.getTotalSlides();\n\n\t\tif ( this.currentSlideIndex >= totalSlides ) {\n\t\t\tif ( 'yes' === this.getAttribute( 'infinite' ) ) {\n\t\t\t\tthis.setCurrentSlide( 1 );\n\t\t\t}\n\n\t\t\treturn;\n\t\t}\n\n\t\tthis.setCurrentSlide( this.currentSlideIndex + 1 );\n\t}\n\n\t/**\n\t * Navigate to the previous slide.\n\t */\n\tprevious(): void {\n\t\tif ( this.currentSlideIndex <= 1 ) {\n\t\t\tif ( 'yes' === this.getAttribute( 'infinite' ) ) {\n\t\t\t\tthis.setCurrentSlide( this.getTotalSlides() );\n\t\t\t}\n\n\t\t\treturn;\n\t\t}\n\n\t\tthis.setCurrentSlide( this.currentSlideIndex - 1 );\n\t}\n\n\t/**\n\t * Get current slide index.\n\t *\n\t * @return {number} Current slide index.\n\t */\n\tgetCurrentSlide(): number {\n\t\treturn this.currentSlideIndex;\n\t}\n\n\t/**\n\t * Set the current slide index.\n\t *\n\t * @param {number} index Slide index.\n\t */\n\tsetCurrentSlide( index: number ): void {\n\t\tif ( index > this.getTotalSlides() || index <= 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.dispatchEvent( new CustomEvent( 'slide-set', { bubbles: true } ) );\n\t\tthis.setAttribute( 'current-slide', index.toString() );\n\t}\n\n\t/**\n\t * Slide to the current slide.\n\t *\n\t * @protected\n\t */\n\tprotected slide(): void {\n\t\t// Check if slider is disabled.\n\t\tif ( 'yes' === this.getAttribute( 'disabled' ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Get slides.\n\t\tconst slidesContainer: TPSliderSlidesElement | null = this.querySelector( 'tp-slider-slides' );\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null = this.querySelectorAll( 'tp-slider-slide' );\n\t\tif ( ! slidesContainer || ! slides ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// First, update the height.\n\t\tthis.updateHeight();\n\n\t\t// Now lets slide!\n\t\tslidesContainer.style.left = `-${ this.offsetWidth * ( this.currentSlideIndex - 1 ) }px`;\n\t}\n\n\t/**\n\t * Update stuff when any attribute has changed.\n\t * Example: Update subcomponents.\n\t */\n\tupdate(): void {\n\t\t// Get subcomponents.\n\t\tconst sliderNavItems: NodeListOf<TPSliderNavItemElement> | null = this.querySelectorAll( 'tp-slider-nav-item' );\n\t\tconst sliderCount: TPSliderCountElement | null = this.querySelector( 'tp-slider-count' );\n\t\tconst leftArrow: TPSliderArrowElement | null = this.querySelector( 'tp-slider-arrow[direction=\"previous\"]' );\n\t\tconst rightArrow: TPSliderArrowElement | null = this.querySelector( 'tp-slider-arrow[direction=\"next\"]' );\n\n\t\t// Set active slide.\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null = this.querySelectorAll( 'tp-slider-slide' );\n\t\tslides?.forEach( ( slide: TPSliderSlideElement, index: number ): void => {\n\t\t\tif ( this.currentSlideIndex - 1 === index ) {\n\t\t\t\tslide.setAttribute( 'active', 'yes' );\n\t\t\t} else {\n\t\t\t\tslide.removeAttribute( 'active' );\n\t\t\t}\n\t\t} );\n\n\t\t// Set current slider nav item.\n\t\tif ( sliderNavItems ) {\n\t\t\tsliderNavItems.forEach( ( navItem: TPSliderNavItemElement, index: number ): void => {\n\t\t\t\tif ( this.currentSlideIndex - 1 === index ) {\n\t\t\t\t\tnavItem.setAttribute( 'current', 'yes' );\n\t\t\t\t} else {\n\t\t\t\t\tnavItem.removeAttribute( 'current' );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\t// Update slider count.\n\t\tif ( sliderCount ) {\n\t\t\tsliderCount.setAttribute( 'current', this.getCurrentSlide().toString() );\n\t\t\tsliderCount.setAttribute( 'total', this.getTotalSlides().toString() );\n\t\t}\n\n\t\t// Enable / disable arrows.\n\t\tif ( 'yes' !== this.getAttribute( 'infinite' ) ) {\n\t\t\tif ( this.getCurrentSlide() === this.getTotalSlides() ) {\n\t\t\t\trightArrow?.setAttribute( 'disabled', 'yes' );\n\t\t\t} else {\n\t\t\t\trightArrow?.removeAttribute( 'disabled' );\n\t\t\t}\n\n\t\t\tif ( 1 === this.getCurrentSlide() ) {\n\t\t\t\tleftArrow?.setAttribute( 'disabled', 'yes' );\n\t\t\t} else {\n\t\t\t\tleftArrow?.removeAttribute( 'disabled' );\n\t\t\t}\n\t\t} else {\n\t\t\trightArrow?.removeAttribute( 'disabled' );\n\t\t\tleftArrow?.removeAttribute( 'disabled' );\n\t\t}\n\t}\n\n\t/**\n\t * Update the height of the slider based on current slide.\n\t */\n\tupdateHeight(): void {\n\t\t// Get slides container to resize.\n\t\tconst slidesContainer: TPSliderSlidesElement | null = this.querySelector( 'tp-slider-slides' );\n\t\tif ( ! slidesContainer ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Bail early if we don't want it to be flexible height.\n\t\tif ( 'yes' !== this.getAttribute( 'flexible-height' ) ) {\n\t\t\t// Remove height property for good measure!\n\t\t\tslidesContainer.style.removeProperty( 'height' );\n\t\t\treturn;\n\t\t}\n\n\t\t// Get slides.\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null = this.querySelectorAll( 'tp-slider-slide' );\n\t\tif ( ! slides ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Set the height of the container to be the height of the current slide.\n\t\tconst height: number = slides[ this.currentSlideIndex - 1 ].scrollHeight;\n\t\tslidesContainer.style.height = `${ height }px`;\n\t}\n\n\t/**\n\t * Resize the slider when the window is resized.\n\t *\n\t * @protected\n\t */\n\tprotected handleResize(): void {\n\t\t// First, lets flag this component as resizing.\n\t\tthis.setAttribute( 'resizing', 'yes' );\n\n\t\t// Run the slide (so height can be resized).\n\t\tthis.slide();\n\n\t\t// Done, let's remove the flag.\n\t\t// We need to do this on a timeout to avoid a race condition with transitions.\n\t\tconst _this = this;\n\t\tsetTimeout( function() {\n\t\t\t_this.removeAttribute( 'resizing' );\n\t\t}, 10 );\n\t}\n\n\t/**\n\t * Detect touch start event, and store the starting location.\n\t *\n\t * @param {Event} e Touch event.\n\t *\n\t * @protected\n\t */\n\tprotected handleTouchStart( e: TouchEvent ): void {\n\t\tif ( 'yes' === this.getAttribute( 'swipe' ) ) {\n\t\t\tthis.touchStartX = e.touches[ 0 ].clientX;\n\t\t}\n\t}\n\n\t/**\n\t * Detect touch end event, and check if it was a left or right swipe.\n\t *\n\t * @param {Event} e Touch event.\n\t *\n\t * @protected\n\t */\n\tprotected handleTouchEnd( e: TouchEvent ): void {\n\t\tif ( 'yes' !== this.getAttribute( 'swipe' ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst touchEndX: number = e.changedTouches[ 0 ].clientX;\n\t\tconst swipeDistance: number = touchEndX - this.touchStartX;\n\n\t\tif ( swipeDistance > 0 ) {\n\t\t\tthis.previous();\n\t\t} else if ( swipeDistance < 0 ) {\n\t\t\tthis.next();\n\t\t}\n\t}\n}\n","/**\n * TP Slider Slides.\n */\nexport class TPSliderSlidesElement extends HTMLElement {\n}\n","/**\n * TP Slider Slide.\n */\nexport class TPSliderSlideElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPSliderElement } from './tp-slider';\n\n/**\n * TP Slider Arrow.\n */\nexport class TPSliderArrowElement extends HTMLElement {\n\t/**\n\t * Connected callback.\n\t */\n\tconnectedCallback(): void {\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.handleClick.bind( this ) );\n\t}\n\n\t/**\n\t * Handle when the button is clicked.\n\t */\n\thandleClick(): void {\n\t\tif ( 'yes' === this.getAttribute( 'disabled' ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst slider: TPSliderElement | null = this.closest( 'tp-slider' );\n\t\tif ( ! slider ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( 'previous' === this.getAttribute( 'direction' ) ) {\n\t\t\tslider.previous();\n\t\t} else if ( 'next' === this.getAttribute( 'direction' ) ) {\n\t\t\tslider.next();\n\t\t}\n\t}\n}\n","/**\n * TP Slider Nav.\n */\nexport class TPSliderNavElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPSliderElement } from './tp-slider';\nimport { TPSliderNavElement } from './tp-slider-nav';\n\n/**\n * TP Slider Nav Item.\n */\nexport class TPSliderNavItemElement extends HTMLElement {\n\t/**\n\t * Connected callback.\n\t */\n\tconnectedCallback(): void {\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.handleClick.bind( this ) );\n\t}\n\n\t/**\n\t * Handle when the button is clicked.\n\t */\n\thandleClick(): void {\n\t\tconst slider: TPSliderElement | null = this.closest( 'tp-slider' );\n\t\tif ( ! slider ) {\n\t\t\treturn;\n\t\t}\n\n\t\tslider.setCurrentSlide( this.getIndex() );\n\t}\n\n\t/**\n\t * Get index of this item inside the navigation.\n\t *\n\t * @return {number} Index.\n\t */\n\tgetIndex(): number {\n\t\tif ( this.getAttribute( 'index' ) ) {\n\t\t\treturn parseInt( this.getAttribute( 'index' ) ?? '0' );\n\t\t}\n\n\t\tconst slideNav: TPSliderNavElement | null = this.closest( 'tp-slider-nav' );\n\t\treturn Array.from( slideNav?.children ?? [] ).indexOf( this ) + 1;\n\t}\n}\n","/**\n * TP Slider Count.\n */\nexport class TPSliderCountElement extends HTMLElement {\n\t/**\n\t * Get observed attributes.\n\t *\n\t * @return {Array} Observed attributes.\n\t */\n\tstatic get observedAttributes(): string[] {\n\t\treturn [ 'current', 'total', 'format' ];\n\t}\n\n\t/**\n\t * Get format.\n\t *\n\t * @return {string} Format.\n\t */\n\tget format(): string {\n\t\treturn this.getAttribute( 'format' ) ?? '$current / $total';\n\t}\n\n\t/**\n\t * Set format.\n\t *\n\t * @param {string} format Format.\n\t */\n\tset format( format: string ) {\n\t\tthis.setAttribute( 'format', format );\n\t}\n\n\t/**\n\t * Attribute changed callback.\n\t */\n\tattributeChangedCallback(): void {\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Update component.\n\t */\n\tupdate(): void {\n\t\tthis.innerHTML =\n\t\t\tthis.format\n\t\t\t\t.replace( '$current', this.getAttribute( 'current' ) ?? '' )\n\t\t\t\t.replace( '$total', this.getAttribute( 'total' ) ?? '' );\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPSliderElement } from './tp-slider';\nimport { TPSliderSlidesElement } from './tp-slider-slides';\nimport { TPSliderSlideElement } from './tp-slider-slide';\nimport { TPSliderArrowElement } from './tp-slider-arrow';\nimport { TPSliderNavElement } from './tp-slider-nav';\nimport { TPSliderNavItemElement } from './tp-slider-nav-item';\nimport { TPSliderCountElement } from './tp-slider-count';\n\n/**\n * Register Components.\n */\ncustomElements.define( 'tp-slider', TPSliderElement );\ncustomElements.define( 'tp-slider-slides', TPSliderSlidesElement );\ncustomElements.define( 'tp-slider-slide', TPSliderSlideElement );\ncustomElements.define( 'tp-slider-arrow', TPSliderArrowElement );\ncustomElements.define( 'tp-slider-nav', TPSliderNavElement );\ncustomElements.define( 'tp-slider-nav-item', TPSliderNavItemElement );\ncustomElements.define( 'tp-slider-count', TPSliderCountElement );\n"],"names":["TPSliderElement","HTMLElement","constructor","super","touchStartX","this","getAttribute","setAttribute","slide","window","addEventListener","handleResize","bind","handleTouchStart","handleTouchEnd","observedAttributes","attributeChangedCallback","name","oldValue","newValue","dispatchEvent","CustomEvent","bubbles","update","currentSlideIndex","parseInt","index","setCurrentSlide","getTotalSlides","slides","querySelectorAll","length","next","totalSlides","previous","getCurrentSlide","toString","slidesContainer","querySelector","updateHeight","style","left","offsetWidth","sliderNavItems","sliderCount","leftArrow","rightArrow","forEach","removeAttribute","navItem","removeProperty","height","scrollHeight","_this","setTimeout","e","touches","clientX","swipeDistance","changedTouches","TPSliderSlidesElement","TPSliderSlideElement","TPSliderArrowElement","connectedCallback","handleClick","slider","closest","TPSliderNavElement","TPSliderNavItemElement","getIndex","slideNav","Array","from","children","indexOf","TPSliderCountElement","format","innerHTML","replace","customElements","define"],"sourceRoot":""}

package/dist/slider/style.css

@@ -0,0 +1 @@
+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:.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}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@travelopia/web-components",
-  "version": "0.0.9",
+  "version": "0.1.0",
   "description": "Accessible web components for the modern web",
   "files": [
     "dist"