@travelopia/web-components 0.0.8 → 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

@@ -0,0 +1,229 @@
+/**
+ * TP Slider.
+ */
+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;
+    /**
+     * Handle when the button is clicked.
+     */
+    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;
+}
+
+/**
+ * TP Modal.
+ */
+export class TPModalElement extends HTMLElement {
+    /**
+     * Constructor.
+     */
+    constructor();
+    /**
+     * Connected callback.
+     */
+    connectedCallback(): void;
+    /**
+     * Open the modal.
+     */
+    open(): void;
+    /**
+     * Close the modal.
+     */
+    close(): void;
+    /**
+     * Handle when the component is clicked.
+     *
+     * @param {Event} e Event.
+     */
+    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/modal/index.js

@@ -1,2 +1,2 @@
-(()=>{"use strict";class e extends HTMLElement{constructor(){var e;super(),null===(e=document.querySelector("body"))||void 0===e||e.appendChild(this)}connectedCallback(){this.addEventListener("click",this.handleClick.bind(this))}open(){this.setAttribute("open","yes")}close(){this.removeAttribute("open")}handleClick(e){e.target===this&&"yes"===this.getAttribute("overlay-click-close")&&(e.preventDefault(),e.stopPropagation(),this.close())}}class t extends HTMLElement{connectedCallback(){const e=this.querySelector("button");null==e||e.addEventListener("click",this.closeModal.bind(this))}closeModal(){const e=this.closest("tp-modal");null==e||e.close()}}customElements.define("tp-modal",e),customElements.define("tp-modal-close",t)})();
+(()=>{"use strict";class e extends HTMLElement{constructor(){var e;super(),null===(e=document.querySelector("body"))||void 0===e||e.appendChild(this)}connectedCallback(){this.addEventListener("click",this.handleClick.bind(this))}open(){this.setAttribute("open","yes"),this.dispatchEvent(new CustomEvent("open",{bubbles:!0}))}close(){this.removeAttribute("open"),this.dispatchEvent(new CustomEvent("close",{bubbles:!0}))}handleClick(e){e.target===this&&"yes"===this.getAttribute("overlay-click-close")&&(e.preventDefault(),e.stopPropagation(),this.close())}}class t extends HTMLElement{connectedCallback(){const e=this.querySelector("button");null==e||e.addEventListener("click",this.closeModal.bind(this))}closeModal(){const e=this.closest("tp-modal");null==e||e.close()}}customElements.define("tp-modal",e),customElements.define("tp-modal-close",t)})();
 //# sourceMappingURL=index.js.map

package/dist/modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"dist/modal/index.js","mappings":"mBAGO,MAAMA,UAAuBC,YAInC,WAAAC,G,MACCC,QACgC,QAAhC,EAAAC,SAASC,cAAe,eAAQ,SAAEC,YAAaC,KAChD,CAKA,iBAAAC,GACCD,KAAKE,iBAAkB,QAASF,KAAKG,YAAYC,KAAMJ,MACxD,CAKA,IAAAK,GACCL,KAAKM,aAAc,OAAQ,MAC5B,CAKA,KAAAC,GACCP,KAAKQ,gBAAiB,OACvB,CAOA,WAAAL,CAAaM,GACPA,EAAEC,SAAWV,MAAQ,QAAUA,KAAKW,aAAc,yBACtDF,EAAEG,iBACFH,EAAEI,kBACFb,KAAKO,QAEP,ECpCM,MAAMO,UAA4BpB,YAIxC,iBAAAO,GACC,MAAMc,EAAmCf,KAAKF,cAAe,UAC7DiB,SAAAA,EAAQb,iBAAkB,QAASF,KAAKgB,WAAWZ,KAAMJ,MAC1D,CAKA,UAAAgB,GACC,MAAMC,EAA+BjB,KAAKkB,QAAS,YACnDD,SAAAA,EAAOV,OACR,ECTDY,eAAeC,OAAQ,WAAY3B,GACnC0B,eAAeC,OAAQ,iBAAkBN,E","sources":["webpack://@travelopia/web-components/./src/modal/tp-modal.ts","webpack://@travelopia/web-components/./src/modal/tp-modal-close.ts","webpack://@travelopia/web-components/./src/modal/index.ts"],"sourcesContent":["/**\n * TP Modal.\n */\nexport class TPModalElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\t\tdocument.querySelector( 'body' )?.appendChild( this );\n\t}\n\n\t/**\n\t * Connected callback.\n\t */\n\tconnectedCallback(): void {\n\t\tthis.addEventListener( 'click', this.handleClick.bind( this ) );\n\t}\n\n\t/**\n\t * Open the modal.\n\t */\n\topen(): void {\n\t\tthis.setAttribute( 'open', 'yes' );\n\t}\n\n\t/**\n\t * Close the modal.\n\t */\n\tclose(): void {\n\t\tthis.removeAttribute( 'open' );\n\t}\n\n\t/**\n\t * Handle when the component is clicked.\n\t *\n\t * @param {Event} e Event.\n\t */\n\thandleClick( e: Event ): void {\n\t\tif ( e.target === this && 'yes' === this.getAttribute( 'overlay-click-close' ) ) {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t\tthis.close();\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPModalElement } from './tp-modal';\n\n/**\n * TP Modal Close.\n */\nexport class TPModalCloseElement extends HTMLElement {\n\t/**\n\t * Connected callback.\n\t */\n\tconnectedCallback(): void {\n\t\tconst button: HTMLButtonElement | null = this.querySelector( 'button' );\n\t\tbutton?.addEventListener( 'click', this.closeModal.bind( this ) );\n\t}\n\n\t/**\n\t * Close the modal.\n\t */\n\tcloseModal(): void {\n\t\tconst modal: TPModalElement | null = this.closest( 'tp-modal' );\n\t\tmodal?.close();\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPModalElement } from './tp-modal';\nimport { TPModalCloseElement } from './tp-modal-close';\n\n/**\n * Register Components.\n */\ncustomElements.define( 'tp-modal', TPModalElement );\ncustomElements.define( 'tp-modal-close', TPModalCloseElement );\n"],"names":["TPModalElement","HTMLElement","constructor","super","document","querySelector","appendChild","this","connectedCallback","addEventListener","handleClick","bind","open","setAttribute","close","removeAttribute","e","target","getAttribute","preventDefault","stopPropagation","TPModalCloseElement","button","closeModal","modal","closest","customElements","define"],"sourceRoot":""}
+{"version":3,"file":"dist/modal/index.js","mappings":"mBAGO,MAAMA,UAAuBC,YAInC,WAAAC,G,MACCC,QACgC,QAAhC,EAAAC,SAASC,cAAe,eAAQ,SAAEC,YAAaC,KAChD,CAKA,iBAAAC,GACCD,KAAKE,iBAAkB,QAASF,KAAKG,YAAYC,KAAMJ,MACxD,CAKA,IAAAK,GACCL,KAAKM,aAAc,OAAQ,OAC3BN,KAAKO,cAAe,IAAIC,YAAa,OAAQ,CAAEC,SAAS,IACzD,CAKA,KAAAC,GACCV,KAAKW,gBAAiB,QACtBX,KAAKO,cAAe,IAAIC,YAAa,QAAS,CAAEC,SAAS,IAC1D,CAOA,WAAAN,CAAaS,GACPA,EAAEC,SAAWb,MAAQ,QAAUA,KAAKc,aAAc,yBACtDF,EAAEG,iBACFH,EAAEI,kBACFhB,KAAKU,QAEP,ECtCM,MAAMO,UAA4BvB,YAIxC,iBAAAO,GACC,MAAMiB,EAAmClB,KAAKF,cAAe,UAC7DoB,SAAAA,EAAQhB,iBAAkB,QAASF,KAAKmB,WAAWf,KAAMJ,MAC1D,CAKA,UAAAmB,GACC,MAAMC,EAA+BpB,KAAKqB,QAAS,YACnDD,SAAAA,EAAOV,OACR,ECTDY,eAAeC,OAAQ,WAAY9B,GACnC6B,eAAeC,OAAQ,iBAAkBN,E","sources":["webpack://@travelopia/web-components/./src/modal/tp-modal.ts","webpack://@travelopia/web-components/./src/modal/tp-modal-close.ts","webpack://@travelopia/web-components/./src/modal/index.ts"],"sourcesContent":["/**\n * TP Modal.\n */\nexport class TPModalElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\t\tdocument.querySelector( 'body' )?.appendChild( this );\n\t}\n\n\t/**\n\t * Connected callback.\n\t */\n\tconnectedCallback(): void {\n\t\tthis.addEventListener( 'click', this.handleClick.bind( this ) );\n\t}\n\n\t/**\n\t * Open the modal.\n\t */\n\topen(): void {\n\t\tthis.setAttribute( 'open', 'yes' );\n\t\tthis.dispatchEvent( new CustomEvent( 'open', { bubbles: true } ) );\n\t}\n\n\t/**\n\t * Close the modal.\n\t */\n\tclose(): void {\n\t\tthis.removeAttribute( 'open' );\n\t\tthis.dispatchEvent( new CustomEvent( 'close', { bubbles: true } ) );\n\t}\n\n\t/**\n\t * Handle when the component is clicked.\n\t *\n\t * @param {Event} e Event.\n\t */\n\thandleClick( e: Event ): void {\n\t\tif ( e.target === this && 'yes' === this.getAttribute( 'overlay-click-close' ) ) {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t\tthis.close();\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPModalElement } from './tp-modal';\n\n/**\n * TP Modal Close.\n */\nexport class TPModalCloseElement extends HTMLElement {\n\t/**\n\t * Connected callback.\n\t */\n\tconnectedCallback(): void {\n\t\tconst button: HTMLButtonElement | null = this.querySelector( 'button' );\n\t\tbutton?.addEventListener( 'click', this.closeModal.bind( this ) );\n\t}\n\n\t/**\n\t * Close the modal.\n\t */\n\tcloseModal(): void {\n\t\tconst modal: TPModalElement | null = this.closest( 'tp-modal' );\n\t\tmodal?.close();\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPModalElement } from './tp-modal';\nimport { TPModalCloseElement } from './tp-modal-close';\n\n/**\n * Register Components.\n */\ncustomElements.define( 'tp-modal', TPModalElement );\ncustomElements.define( 'tp-modal-close', TPModalCloseElement );\n"],"names":["TPModalElement","HTMLElement","constructor","super","document","querySelector","appendChild","this","connectedCallback","addEventListener","handleClick","bind","open","setAttribute","dispatchEvent","CustomEvent","bubbles","close","removeAttribute","e","target","getAttribute","preventDefault","stopPropagation","TPModalCloseElement","button","closeModal","modal","closest","customElements","define"],"sourceRoot":""}

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,7 +1,10 @@
 {
   "name": "@travelopia/web-components",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "description": "Accessible web components for the modern web",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "webpack --config ./webpack.config.js --mode production --env=production",
     "dev": "webpack --config ./webpack.config.js --mode production --env=development --watch",
@@ -24,17 +27,11 @@
     "postcss-loader": "^7.3.3",
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2",
-    "terser-webpack-plugin": "^5.3.9",
     "ts-loader": "^9.5.0",
     "typescript": "^5.2.2",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",
     "webpack-notifier": "^1.15.0"
   },
-  "exports": {
-    "./*": "./dist/*",
-    "./definitions.d.ts": "./definitions.d.ts",
-    "./package.json": "./package.json"
-  },
-  "types": "./definitions.d.ts"
+  "types": "./dist/declarations.d.ts"
 }

package/definitions.d.ts

@@ -1,8 +0,0 @@
-export interface TPModalElement extends HTMLElement {
-	open: Function;
-	close: Function;
-}
-
-export interface TPModalCloseElement extends HTMLElement {
-	closeModal: Function;
-}

package/src/modal/README.md

@@ -1,35 +0,0 @@
-# Modal
-
-<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>
-		</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>
-
-## Sample Usage
-
-This is a super minimal modal that is designed to be highly extendable.
-
-Example:
-
-```html
-<tp-modal overlay-click-close="yes">
-	<tp-modal-close>
-		<button>Close</button> <-- There must be a button inside inside this component.
-	</tp-modal-close>
-	<tp-modal-content>
-		<p>Any modal content here.</p>
-	</tp-modal-content>
-</tp-modal>
-```
-
-## Attributes
-
-| Attribute            | Required | Values | Notes                                        |
-|----------------------|----------|--------|----------------------------------------------|
-| overlay-click-close  | No       | `yes`  | Closes the modal when the overlay is clicked |

package/src/modal/index.html

@@ -1,35 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
-	<meta http-equiv="X-UA-Compatible" content="ie=edge">
-	<title>Web Component: Modal</title>
-
-	<link rel="stylesheet" href="../../dist/modal/style.css" media="all">
-	<script type="module" src="../../dist/modal/index.js"></script>
-</head>
-<body>
-	<main>
-		<button id="open-modal">Open Modal</button>
-		<tp-modal id="my-modal" overlay-click-close="yes">
-			<tp-modal-close>
-				<button>Close</button>
-			</tp-modal-close>
-			<tp-modal-content>
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-			</tp-modal-content>
-		</tp-modal>
-	</main>
-
-	<script>
-		const button = document.getElementById( 'open-modal' );
-		const modal = document.getElementById( 'my-modal' );
-
-		button.addEventListener( 'click', () => modal.open() );
-	</script>
-</body>
-</html>

package/src/modal/index.ts

@@ -1,16 +0,0 @@
-/**
- * Styles.
- */
-import './style.scss';
-
-/**
- * Components.
- */
-import { TPModalElement } from './tp-modal';
-import { TPModalCloseElement } from './tp-modal-close';
-
-/**
- * Register Components.
- */
-customElements.define( 'tp-modal', TPModalElement );
-customElements.define( 'tp-modal-close', TPModalCloseElement );

package/src/modal/style.scss

@@ -1,34 +0,0 @@
-tp-modal {
-	display: none;
-	background-color: rgba(#000, 0.5);
-	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;
-
-	&[open] {
-		display: flex;
-	}
-
-	&-close {
-		position: absolute;
-		top: 20px;
-		right: 20px;
-	}
-
-	&-content {
-		display: block;
-		min-width: 0;
-		margin: auto;
-		padding: 20px;
-		background-color: #fff;
-		max-width: 80ch;
-	}
-}

package/src/modal/tp-modal-close.ts

@@ -1,25 +0,0 @@
-/**
- * Internal dependencies.
- */
-import { TPModalElement } from './tp-modal';
-
-/**
- * TP Modal Close.
- */
-export class TPModalCloseElement extends HTMLElement {
-	/**
-	 * Connected callback.
-	 */
-	connectedCallback(): void {
-		const button: HTMLButtonElement | null = this.querySelector( 'button' );
-		button?.addEventListener( 'click', this.closeModal.bind( this ) );
-	}
-
-	/**
-	 * Close the modal.
-	 */
-	closeModal(): void {
-		const modal: TPModalElement | null = this.closest( 'tp-modal' );
-		modal?.close();
-	}
-}

package/src/modal/tp-modal.ts

@@ -1,46 +0,0 @@
-/**
- * TP Modal.
- */
-export class TPModalElement extends HTMLElement {
-	/**
-	 * Constructor.
-	 */
-	constructor() {
-		super();
-		document.querySelector( 'body' )?.appendChild( this );
-	}
-
-	/**
-	 * Connected callback.
-	 */
-	connectedCallback(): void {
-		this.addEventListener( 'click', this.handleClick.bind( this ) );
-	}
-
-	/**
-	 * Open the modal.
-	 */
-	open(): void {
-		this.setAttribute( 'open', 'yes' );
-	}
-
-	/**
-	 * Close the modal.
-	 */
-	close(): void {
-		this.removeAttribute( 'open' );
-	}
-
-	/**
-	 * Handle when the component is clicked.
-	 *
-	 * @param {Event} e Event.
-	 */
-	handleClick( e: Event ): void {
-		if ( e.target === this && 'yes' === this.getAttribute( 'overlay-click-close' ) ) {
-			e.preventDefault();
-			e.stopPropagation();
-			this.close();
-		}
-	}
-}