@travelopia/web-components 0.9.6 → 0.9.7

package/README.md

@@ -10,7 +10,7 @@ Accessible web components for the modern web.
         	<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" />
+			<img src="https://www.travelopia.com/wp-content/themes/travelopia/src/assets/svg/logo-travelopia-circle.svg" width="50" />
 		</td>
 	</tr>
 </table>

package/dist/accordion/index.js

@@ -1,2 +1,2 @@
-(()=>{"use strict";class e extends HTMLElement{static get observedAttributes(){return["collapse-all","expand-all"]}attributeChangedCallback(e="",t="",s=""){t!==s&&(this.update(),"yes"!==s||"collapse-all"!==e&&"expand-all"!==e||this.dispatchEvent(new CustomEvent(e,{bubbles:!0})))}update(){const e=this.querySelectorAll("tp-accordion-item");if(!e)return;let t="";"yes"===this.getAttribute("expand-all")?t="expand-all":"yes"===this.getAttribute("collapse-all")&&(t="collapse-all"),""!==t&&e.forEach((e=>{"expand-all"===t?e.setAttribute("open","yes"):"collapse-all"===t&&e.removeAttribute("open")}))}}class t extends HTMLElement{}class s extends HTMLElement{constructor(){var e;super(),null===(e=this.querySelector("button"))||void 0===e||e.addEventListener("click",this.toggle.bind(this))}toggle(){const e=this.closest("tp-accordion-item");e&&("yes"!==e.getAttribute("open")?e.setAttribute("open","yes"):e.removeAttribute("open"))}}class l extends HTMLElement{constructor(){var e;super(),null===(e=this.querySelector("button"))||void 0===e||e.addEventListener("click",(()=>this.collapseAll()))}collapseAll(){const e=this.closest("tp-accordion");e&&(e.removeAttribute("expand-all"),e.setAttribute("collapse-all","yes"))}}class o extends HTMLElement{constructor(){var e;super(),null===(e=this.querySelector("button"))||void 0===e||e.addEventListener("click",this.expandAll.bind(this))}expandAll(){const e=this.closest("tp-accordion");e&&(e.setAttribute("expand-all","yes"),e.removeAttribute("collapse-all"))}}class n extends HTMLElement{constructor(){super(),"yes"===this.getAttribute("open-by-default")&&this.setAttribute("open","yes")}static get observedAttributes(){return["open"]}attributeChangedCallback(e,t,s){t!==s&&"open"===e&&("yes"===s?this.open():this.close(),this.removeAttribute("open-by-default"))}open(){const e=this.querySelector("tp-accordion-content");e&&(this.dispatchEvent(new CustomEvent("before-open",{bubbles:!0})),((e,t=300,s=()=>{})=>{e.style.height=`${e.scrollHeight}px`,setTimeout((()=>{e.style.height="auto",s&&s()}),t)})(e,600),this.dispatchEvent(new CustomEvent("open",{bubbles:!0})))}close(){const e=this.querySelector("tp-accordion-content");e&&(this.dispatchEvent(new CustomEvent("before-close",{bubbles:!0})),((e,t=300,s=()=>{})=>{e.style.height=`${e.scrollHeight}px`,e.offsetHeight,e.style.height="0px",setTimeout((()=>{e.style.height="0px",s&&s()}),t)})(e,600),this.dispatchEvent(new CustomEvent("close",{bubbles:!0})))}}customElements.define("tp-accordion",e),customElements.define("tp-accordion-content",t),customElements.define("tp-accordion-handle",s),customElements.define("tp-accordion-collapse-all",l),customElements.define("tp-accordion-expand-all",o),customElements.define("tp-accordion-item",n)})();
+(()=>{"use strict";class t extends HTMLElement{static get observedAttributes(){return["collapse-all","expand-all"]}attributeChangedCallback(t="",e="",s=""){e!==s&&(this.update(),"yes"!==s||"collapse-all"!==t&&"expand-all"!==t||this.dispatchEvent(new CustomEvent(t,{bubbles:!0})))}update(){const t=this.querySelectorAll("tp-accordion-item");if(!t)return;let e="";"yes"===this.getAttribute("expand-all")?e="expand-all":"yes"===this.getAttribute("collapse-all")&&(e="collapse-all"),""!==e&&t.forEach((t=>{"expand-all"===e?t.setAttribute("open","yes"):"collapse-all"===e&&t.removeAttribute("open")}))}}class e extends HTMLElement{}class s extends HTMLElement{constructor(){var t;super(),null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.toggle.bind(this))}toggle(){const t=this.closest("tp-accordion-item");t&&("yes"!==t.getAttribute("open")?t.setAttribute("open","yes"):t.removeAttribute("open"))}}class o extends HTMLElement{constructor(){var t;super(),null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",(()=>this.collapseAll()))}collapseAll(){const t=this.closest("tp-accordion");t&&(t.removeAttribute("expand-all"),t.setAttribute("collapse-all","yes"))}}class n extends HTMLElement{constructor(){var t;super(),null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.expandAll.bind(this))}expandAll(){const t=this.closest("tp-accordion");t&&(t.setAttribute("expand-all","yes"),t.removeAttribute("collapse-all"))}}class i extends HTMLElement{constructor(){super(),"yes"===this.getAttribute("open-by-default")&&this.setAttribute("open","yes"),this.setupAriaControls(),this.updateAriaState("yes"===this.getAttribute("open")),this.setupBeforeMatchListener()}setupBeforeMatchListener(){const t=this.querySelector("tp-accordion-content");t&&t.addEventListener("beforematch",(()=>{this.setAttribute("open","yes")}))}setupAriaControls(){if(!this.isAriaEnabled())return;const t=this.querySelector("tp-accordion-handle button"),e=this.querySelector("tp-accordion-content");t&&e&&(e.id||(e.id=`tp-accordion-content-${Math.random().toString(36).substring(2,9)}`),t.hasAttribute("aria-controls")||t.setAttribute("aria-controls",e.id))}isAriaEnabled(){const t=this.closest("tp-accordion");return"no"!==(null==t?void 0:t.getAttribute("aria"))}updateAriaState(t){if(!this.isAriaEnabled())return;const e=this.querySelector("tp-accordion-handle button"),s=this.querySelector("tp-accordion-content");e&&e.setAttribute("aria-expanded",t?"true":"false"),s&&(t?s.removeAttribute("hidden"):s.setAttribute("hidden","until-found"))}static get observedAttributes(){return["open"]}attributeChangedCallback(t,e,s){e!==s&&"open"===t&&("yes"===s?this.open():this.close(),this.removeAttribute("open-by-default"))}open(){const t=this.querySelector("tp-accordion-content");t&&(this.dispatchEvent(new CustomEvent("before-open",{bubbles:!0})),this.updateAriaState(!0),((t,e=300,s=()=>{})=>{t.style.height=`${t.scrollHeight}px`,setTimeout((()=>{t.style.height="auto",s&&s()}),e)})(t,600),this.dispatchEvent(new CustomEvent("open",{bubbles:!0})))}close(){const t=this.querySelector("tp-accordion-content");t&&(this.dispatchEvent(new CustomEvent("before-close",{bubbles:!0})),this.updateAriaState(!1),((t,e=300,s=()=>{})=>{t.style.height=`${t.scrollHeight}px`,t.offsetHeight,t.style.height="0px",setTimeout((()=>{t.style.height="0px",s&&s()}),e)})(t,600),this.dispatchEvent(new CustomEvent("close",{bubbles:!0})))}}customElements.define("tp-accordion",t),customElements.define("tp-accordion-content",e),customElements.define("tp-accordion-handle",s),customElements.define("tp-accordion-collapse-all",o),customElements.define("tp-accordion-expand-all",n),customElements.define("tp-accordion-item",i)})();
 //# sourceMappingURL=index.js.map

package/dist/accordion/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"dist/accordion/index.js","mappings":"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","sources":["webpack://@travelopia/web-components/./src/accordion/tp-accordion.ts","webpack://@travelopia/web-components/./src/accordion/tp-accordion-content.ts","webpack://@travelopia/web-components/./src/accordion/tp-accordion-handle.ts","webpack://@travelopia/web-components/./src/accordion/tp-accordion-collapse-all.ts","webpack://@travelopia/web-components/./src/accordion/tp-accordion-expand-all.ts","webpack://@travelopia/web-components/./src/accordion/tp-accordion-item.ts","webpack://@travelopia/web-components/./src/utility.ts","webpack://@travelopia/web-components/./src/accordion/index.ts"],"sourcesContent":["/**\n * Internal dependencies.\n */\nimport { TPAccordionItemElement } from './tp-accordion-item';\n\n/**\n * TP Accordion.\n */\nexport class TPAccordionElement extends HTMLElement {\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\t// Attributes observed in the TPAccordionItemElement web-component.\n\t\treturn [ 'collapse-all', 'expand-all' ];\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\t// To check if observed attributes are changed.\n\n\t\t//Early return if no change in attributes.\n\t\tif ( oldValue === newValue ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Update initially according to the value present in expand-all or collapse all.\n\t\tthis.update();\n\n\t\t// If attribute value is changed then open and close according to the name of event.\n\t\tif ( 'yes' === newValue && ( 'collapse-all' === name || 'expand-all' === name ) ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( name, { bubbles: true } ) );\n\t\t}\n\t}\n\n\t/**\n\t * Update.\n\t */\n\tupdate(): void {\n\t\t// Get accordion items.\n\t\tconst accordionItems: NodeListOf<TPAccordionItemElement> = this.querySelectorAll( 'tp-accordion-item' );\n\n\t\t//Early return if accordion items are not present.\n\t\tif ( ! accordionItems ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Initialize action variable.\n\t\tlet action: string = '';\n\n\t\t// Determine action.\n\t\tif ( 'yes' === this.getAttribute( 'expand-all' ) ) {\n\t\t\taction = 'expand-all';\n\t\t} else if ( 'yes' === this.getAttribute( 'collapse-all' ) ) {\n\t\t\taction = 'collapse-all';\n\t\t}\n\n\t\t// Check if we have an action.\n\t\tif ( '' === action ) {\n\t\t\t// Return if action is not present.\n\t\t\treturn;\n\t\t}\n\n\t\t// Expand or collapse accordion items.\n\t\taccordionItems.forEach( ( accordionItem: TPAccordionItemElement ): void => {\n\t\t\t// Conditionally expand or collapse each item.\n\t\t\tif ( 'expand-all' === action ) {\n\t\t\t\taccordionItem.setAttribute( 'open', 'yes' );\n\t\t\t} else if ( 'collapse-all' === action ) {\n\t\t\t\taccordionItem.removeAttribute( 'open' );\n\t\t\t}\n\t\t} );\n\t}\n}\n","/**\n * TP Accordion Content.\n */\nexport class TPAccordionContentElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPAccordionItemElement } from './tp-accordion-item';\n\n/**\n * TP Accordion Handle.\n */\nexport class TPAccordionHandleElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.toggle.bind( this ) );\n\t}\n\n\t/**\n\t * Toggle accordion.\n\t */\n\ttoggle(): void {\n\t\t// Variables.\n\t\tconst accordionItem: TPAccordionItemElement | null = this.closest( 'tp-accordion-item' );\n\n\t\t// Terminates if accordion item is not present.\n\t\tif ( ! accordionItem ) {\n\t\t\t//Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// If accordion item is open.\n\t\tif ( 'yes' !== accordionItem.getAttribute( 'open' ) ) {\n\t\t\taccordionItem.setAttribute( 'open', 'yes' );\n\t\t} else {\n\t\t\taccordionItem.removeAttribute( 'open' );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPAccordionElement } from './tp-accordion';\n\n/**\n * TP Accordion Collapse All.\n */\nexport class TPAccordionCollapseAllElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', () => this.collapseAll() );\n\t}\n\n\t/**\n\t * Collapse All.\n\t */\n\tcollapseAll(): void {\n\t\t// Get accordion element.\n\t\tconst accordion: TPAccordionElement | null = this.closest( 'tp-accordion' );\n\n\t\t// Terminates the function if accordion is not available.\n\t\tif ( ! accordion ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Set attributes for expand-all and collapse-all.\n\t\taccordion.removeAttribute( 'expand-all' );\n\t\taccordion.setAttribute( 'collapse-all', 'yes' );\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPAccordionElement } from './tp-accordion';\n\n/**\n * TP Accordion Expand All.\n */\nexport class TPAccordionExpandAllElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.expandAll.bind( this ) );\n\t}\n\n\t/**\n\t * Expand all.\n\t */\n\texpandAll() {\n\t\t// Get accordion.\n\t\tconst accordion: TPAccordionElement | null = this.closest( 'tp-accordion' );\n\n\t\t// Terminates if accordion is not present.\n\t\tif ( ! accordion ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Set attributes for expand-all and collapse-all.\n\t\taccordion.setAttribute( 'expand-all', 'yes' );\n\t\taccordion.removeAttribute( 'collapse-all' );\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPAccordionContentElement } from './tp-accordion-content';\nimport { slideElementDown, slideElementUp } from '../utility';\n\n/**\n * TP Accordion Item.\n */\nexport class TPAccordionItemElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Check if by default accordion item is open.\n\t\tif ( 'yes' === this.getAttribute( 'open-by-default' ) ) {\n\t\t\tthis.setAttribute( 'open', 'yes' );\n\t\t}\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\t// Attributes observed in the TPAccordionItemElement web-component.\n\t\treturn [ 'open' ];\n\t}\n\n\t/**\n\t * Attributes callback.\n\t *\n\t * Fired on attribute change.\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\t// To check if observed attributes are changed.\n\n\t\t//Early return if no change in attributes.\n\t\tif ( oldValue === newValue || 'open' !== name ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Conditionally open or close based on changed value.\n\t\tif ( 'yes' === newValue ) {\n\t\t\tthis.open();\n\t\t} else {\n\t\t\tthis.close();\n\t\t}\n\n\t\t// Removing default value.\n\t\tthis.removeAttribute( 'open-by-default' );\n\t}\n\n\t/**\n\t * Open accordion item.\n\t */\n\topen(): void {\n\t\t// Initializing variables.\n\t\tconst content: TPAccordionContentElement | null = this.querySelector( 'tp-accordion-content' );\n\n\t\t// Open the accordion.\n\t\tif ( content ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'before-open', { bubbles: true } ) );\n\t\t\tslideElementDown( content, 600 );\n\t\t\tthis.dispatchEvent( new CustomEvent( 'open', { bubbles: true } ) );\n\t\t}\n\t}\n\n\t/**\n\t * Close accordion item.\n\t */\n\tclose(): void {\n\t\t// Initializing variables.\n\t\tconst content: TPAccordionContentElement | null = this.querySelector( 'tp-accordion-content' );\n\n\t\t// Close the accordion.\n\t\tif ( content ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'before-close', { bubbles: true } ) );\n\t\t\tslideElementUp( content, 600 );\n\t\t\tthis.dispatchEvent( new CustomEvent( 'close', { bubbles: true } ) );\n\t\t}\n\t}\n}\n","/**\n * Utility functions.\n */\n\n/**\n * Slide element down.\n *\n * @param {HTMLElement|null} element  Target element.\n * @param {number}           duration Animation duration.\n * @param {Function}         callback Callback function.\n */\nexport const slideElementDown = ( element: HTMLElement, duration: number = 300, callback: Function = () => {} ) => { // eslint-disable-line\n\t// Get element height.\n\telement.style.height = `${ element.scrollHeight }px`;\n\n\t// Set timeout.\n\tsetTimeout( () => {\n\t\t// Set element's height.\n\t\telement.style.height = 'auto';\n\n\t\t// If callback is available, call the function.\n\t\tif ( callback ) {\n\t\t\tcallback();\n\t\t}\n\t}, duration );\n};\n\n/**\n * Slide element up.\n *\n * @param {HTMLElement|null} element  Target element.\n * @param {number}           duration Animation duration.\n * @param {Function}         callback Callback function.\n */\nexport const slideElementUp = ( element: HTMLElement, duration: number = 300, callback: Function = () => {} ) => { // eslint-disable-line\n\t// Get element height.\n\telement.style.height = `${ element.scrollHeight }px`;\n\telement.offsetHeight; // eslint-disable-line\n\telement.style.height = '0px';\n\n\t// Set timeout.\n\tsetTimeout( () => {\n\t\t// Set element's height.\n\t\telement.style.height = '0px';\n\n\t\t// If callback is available, call the function.\n\t\tif ( callback ) {\n\t\t\tcallback();\n\t\t}\n\t}, duration );\n};\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPAccordionElement } from './tp-accordion';\nimport { TPAccordionContentElement } from './tp-accordion-content';\nimport { TPAccordionHandleElement } from './tp-accordion-handle';\nimport { TPAccordionCollapseAllElement } from './tp-accordion-collapse-all';\nimport { TPAccordionExpandAllElement } from './tp-accordion-expand-all';\nimport { TPAccordionItemElement } from './tp-accordion-item';\n\n/**\n * Initialize.\n */\ncustomElements.define( 'tp-accordion', TPAccordionElement );\ncustomElements.define( 'tp-accordion-content', TPAccordionContentElement );\ncustomElements.define( 'tp-accordion-handle', TPAccordionHandleElement );\ncustomElements.define( 'tp-accordion-collapse-all', TPAccordionCollapseAllElement );\ncustomElements.define( 'tp-accordion-expand-all', TPAccordionExpandAllElement );\ncustomElements.define( 'tp-accordion-item', TPAccordionItemElement );\n"],"names":["TPAccordionElement","HTMLElement","observedAttributes","attributeChangedCallback","name","oldValue","newValue","this","update","dispatchEvent","CustomEvent","bubbles","accordionItems","querySelectorAll","action","getAttribute","forEach","accordionItem","setAttribute","removeAttribute","TPAccordionContentElement","TPAccordionHandleElement","constructor","super","querySelector","addEventListener","toggle","bind","closest","TPAccordionCollapseAllElement","collapseAll","accordion","TPAccordionExpandAllElement","expandAll","TPAccordionItemElement","open","close","content","element","duration","callback","style","height","scrollHeight","setTimeout","slideElementDown","offsetHeight","slideElementUp","customElements","define"],"sourceRoot":""}
+{"version":3,"file":"dist/accordion/index.js","mappings":"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","sources":["webpack://@travelopia/web-components/./src/accordion/tp-accordion.ts","webpack://@travelopia/web-components/./src/accordion/tp-accordion-content.ts","webpack://@travelopia/web-components/./src/accordion/tp-accordion-handle.ts","webpack://@travelopia/web-components/./src/accordion/tp-accordion-collapse-all.ts","webpack://@travelopia/web-components/./src/accordion/tp-accordion-expand-all.ts","webpack://@travelopia/web-components/./src/accordion/tp-accordion-item.ts","webpack://@travelopia/web-components/./src/utility.ts","webpack://@travelopia/web-components/./src/accordion/index.ts"],"sourcesContent":["/**\n * Internal dependencies.\n */\nimport { TPAccordionItemElement } from './tp-accordion-item';\n\n/**\n * TP Accordion.\n */\nexport class TPAccordionElement extends HTMLElement {\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\t// Attributes observed in the TPAccordionItemElement web-component.\n\t\treturn [ 'collapse-all', 'expand-all' ];\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\t// To check if observed attributes are changed.\n\n\t\t//Early return if no change in attributes.\n\t\tif ( oldValue === newValue ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Update initially according to the value present in expand-all or collapse all.\n\t\tthis.update();\n\n\t\t// If attribute value is changed then open and close according to the name of event.\n\t\tif ( 'yes' === newValue && ( 'collapse-all' === name || 'expand-all' === name ) ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( name, { bubbles: true } ) );\n\t\t}\n\t}\n\n\t/**\n\t * Update.\n\t */\n\tupdate(): void {\n\t\t// Get accordion items.\n\t\tconst accordionItems: NodeListOf<TPAccordionItemElement> = this.querySelectorAll( 'tp-accordion-item' );\n\n\t\t//Early return if accordion items are not present.\n\t\tif ( ! accordionItems ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Initialize action variable.\n\t\tlet action: string = '';\n\n\t\t// Determine action.\n\t\tif ( 'yes' === this.getAttribute( 'expand-all' ) ) {\n\t\t\taction = 'expand-all';\n\t\t} else if ( 'yes' === this.getAttribute( 'collapse-all' ) ) {\n\t\t\taction = 'collapse-all';\n\t\t}\n\n\t\t// Check if we have an action.\n\t\tif ( '' === action ) {\n\t\t\t// Return if action is not present.\n\t\t\treturn;\n\t\t}\n\n\t\t// Expand or collapse accordion items.\n\t\taccordionItems.forEach( ( accordionItem: TPAccordionItemElement ): void => {\n\t\t\t// Conditionally expand or collapse each item.\n\t\t\tif ( 'expand-all' === action ) {\n\t\t\t\taccordionItem.setAttribute( 'open', 'yes' );\n\t\t\t} else if ( 'collapse-all' === action ) {\n\t\t\t\taccordionItem.removeAttribute( 'open' );\n\t\t\t}\n\t\t} );\n\t}\n}\n","/**\n * TP Accordion Content.\n */\nexport class TPAccordionContentElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPAccordionItemElement } from './tp-accordion-item';\n\n/**\n * TP Accordion Handle.\n */\nexport class TPAccordionHandleElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.toggle.bind( this ) );\n\t}\n\n\t/**\n\t * Toggle accordion.\n\t */\n\ttoggle(): void {\n\t\t// Variables.\n\t\tconst accordionItem: TPAccordionItemElement | null = this.closest( 'tp-accordion-item' );\n\n\t\t// Terminates if accordion item is not present.\n\t\tif ( ! accordionItem ) {\n\t\t\t//Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// If accordion item is open.\n\t\tif ( 'yes' !== accordionItem.getAttribute( 'open' ) ) {\n\t\t\taccordionItem.setAttribute( 'open', 'yes' );\n\t\t} else {\n\t\t\taccordionItem.removeAttribute( 'open' );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPAccordionElement } from './tp-accordion';\n\n/**\n * TP Accordion Collapse All.\n */\nexport class TPAccordionCollapseAllElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', () => this.collapseAll() );\n\t}\n\n\t/**\n\t * Collapse All.\n\t */\n\tcollapseAll(): void {\n\t\t// Get accordion element.\n\t\tconst accordion: TPAccordionElement | null = this.closest( 'tp-accordion' );\n\n\t\t// Terminates the function if accordion is not available.\n\t\tif ( ! accordion ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Set attributes for expand-all and collapse-all.\n\t\taccordion.removeAttribute( 'expand-all' );\n\t\taccordion.setAttribute( 'collapse-all', 'yes' );\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPAccordionElement } from './tp-accordion';\n\n/**\n * TP Accordion Expand All.\n */\nexport class TPAccordionExpandAllElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.expandAll.bind( this ) );\n\t}\n\n\t/**\n\t * Expand all.\n\t */\n\texpandAll() {\n\t\t// Get accordion.\n\t\tconst accordion: TPAccordionElement | null = this.closest( 'tp-accordion' );\n\n\t\t// Terminates if accordion is not present.\n\t\tif ( ! accordion ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Set attributes for expand-all and collapse-all.\n\t\taccordion.setAttribute( 'expand-all', 'yes' );\n\t\taccordion.removeAttribute( 'collapse-all' );\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPAccordionContentElement } from './tp-accordion-content';\nimport { TPAccordionElement } from './tp-accordion';\nimport { slideElementDown, slideElementUp } from '../utility';\n\n/**\n * TP Accordion Item.\n */\nexport class TPAccordionItemElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Check if by default accordion item is open.\n\t\tif ( 'yes' === this.getAttribute( 'open-by-default' ) ) {\n\t\t\tthis.setAttribute( 'open', 'yes' );\n\t\t}\n\n\t\t// ARIA stuff.\n\t\tthis.setupAriaControls();\n\t\tthis.updateAriaState( 'yes' === this.getAttribute( 'open' ) );\n\t\tthis.setupBeforeMatchListener();\n\t}\n\n\t/**\n\t * Set up beforematch event listener for find-in-page support.\n\t */\n\tprivate setupBeforeMatchListener(): void {\n\t\t// Get content element.\n\t\tconst content: TPAccordionContentElement | null = this.querySelector( 'tp-accordion-content' );\n\n\t\t// Bail if no content.\n\t\tif ( ! content ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// When browser finds content via find-in-page, open this accordion item.\n\t\tcontent.addEventListener( 'beforematch', () => {\n\t\t\t// Open the accordion item.\n\t\t\tthis.setAttribute( 'open', 'yes' );\n\t\t} );\n\t}\n\n\t/**\n\t * Set up aria-controls linkage between button and content.\n\t */\n\tprivate setupAriaControls(): void {\n\t\t// Check if aria management is enabled.\n\t\tif ( ! this.isAriaEnabled() ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get button and content elements.\n\t\tconst button = this.querySelector( 'tp-accordion-handle button' );\n\t\tconst content: TPAccordionContentElement | null = this.querySelector( 'tp-accordion-content' );\n\n\t\t// Bail if no button or content.\n\t\tif ( ! button || ! content ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Generate ID for content if not present.\n\t\tif ( ! content.id ) {\n\t\t\tcontent.id = `tp-accordion-content-${ Math.random().toString( 36 ).substring( 2, 9 ) }`;\n\t\t}\n\n\t\t// Set aria-controls on button if not present.\n\t\tif ( ! button.hasAttribute( 'aria-controls' ) ) {\n\t\t\tbutton.setAttribute( 'aria-controls', content.id );\n\t\t}\n\t}\n\n\t/**\n\t * Check if ARIA management is enabled.\n\t *\n\t * @return {boolean} Whether ARIA management is enabled.\n\t */\n\tprivate isAriaEnabled(): boolean {\n\t\t// Get parent accordion.\n\t\tconst accordion: TPAccordionElement | null = this.closest( 'tp-accordion' );\n\n\t\t// Return whether aria management is enabled.\n\t\treturn 'no' !== accordion?.getAttribute( 'aria' );\n\t}\n\n\t/**\n\t * Update ARIA state for handle button and content.\n\t *\n\t * @param {boolean} isOpen Whether the accordion item is open.\n\t */\n\tprivate updateAriaState( isOpen: boolean ): void {\n\t\t// Check if aria management is enabled.\n\t\tif ( ! this.isAriaEnabled() ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get button and content elements.\n\t\tconst button = this.querySelector( 'tp-accordion-handle button' );\n\t\tconst content: TPAccordionContentElement | null = this.querySelector( 'tp-accordion-content' );\n\n\t\t// Update button aria-expanded.\n\t\tif ( button ) {\n\t\t\tbutton.setAttribute( 'aria-expanded', isOpen ? 'true' : 'false' );\n\t\t}\n\n\t\t// Bail if no content.\n\t\tif ( ! content ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Set or remove hidden attribute.\n\t\tif ( isOpen ) {\n\t\t\tcontent.removeAttribute( 'hidden' );\n\t\t} else {\n\t\t\tcontent.setAttribute( 'hidden', 'until-found' );\n\t\t}\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\t// Attributes observed in the TPAccordionItemElement web-component.\n\t\treturn [ 'open' ];\n\t}\n\n\t/**\n\t * Attributes callback.\n\t *\n\t * Fired on attribute change.\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\t// To check if observed attributes are changed.\n\n\t\t// Early return if no change in attributes.\n\t\tif ( oldValue === newValue || 'open' !== name ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Conditionally open or close based on changed value.\n\t\tif ( 'yes' === newValue ) {\n\t\t\tthis.open();\n\t\t} else {\n\t\t\tthis.close();\n\t\t}\n\n\t\t// Removing default value.\n\t\tthis.removeAttribute( 'open-by-default' );\n\t}\n\n\t/**\n\t * Open accordion item.\n\t */\n\topen(): void {\n\t\t// Initializing variables.\n\t\tconst content: TPAccordionContentElement | null = this.querySelector( 'tp-accordion-content' );\n\n\t\t// Open the accordion.\n\t\tif ( content ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'before-open', { bubbles: true } ) );\n\t\t\tthis.updateAriaState( true );\n\t\t\tslideElementDown( content, 600 );\n\t\t\tthis.dispatchEvent( new CustomEvent( 'open', { bubbles: true } ) );\n\t\t}\n\t}\n\n\t/**\n\t * Close accordion item.\n\t */\n\tclose(): void {\n\t\t// Initializing variables.\n\t\tconst content: TPAccordionContentElement | null = this.querySelector( 'tp-accordion-content' );\n\n\t\t// Close the accordion.\n\t\tif ( content ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'before-close', { bubbles: true } ) );\n\t\t\tthis.updateAriaState( false );\n\t\t\tslideElementUp( content, 600 );\n\t\t\tthis.dispatchEvent( new CustomEvent( 'close', { bubbles: true } ) );\n\t\t}\n\t}\n}\n","/**\n * Utility functions.\n */\n\n/**\n * Slide element down.\n *\n * @param {HTMLElement|null} element  Target element.\n * @param {number}           duration Animation duration.\n * @param {Function}         callback Callback function.\n */\nexport const slideElementDown = ( element: HTMLElement, duration: number = 300, callback: Function = () => {} ) => { // eslint-disable-line\n\t// Get element height.\n\telement.style.height = `${ element.scrollHeight }px`;\n\n\t// Set timeout.\n\tsetTimeout( () => {\n\t\t// Set element's height.\n\t\telement.style.height = 'auto';\n\n\t\t// If callback is available, call the function.\n\t\tif ( callback ) {\n\t\t\tcallback();\n\t\t}\n\t}, duration );\n};\n\n/**\n * Slide element up.\n *\n * @param {HTMLElement|null} element  Target element.\n * @param {number}           duration Animation duration.\n * @param {Function}         callback Callback function.\n */\nexport const slideElementUp = ( element: HTMLElement, duration: number = 300, callback: Function = () => {} ) => { // eslint-disable-line\n\t// Get element height.\n\telement.style.height = `${ element.scrollHeight }px`;\n\telement.offsetHeight; // eslint-disable-line\n\telement.style.height = '0px';\n\n\t// Set timeout.\n\tsetTimeout( () => {\n\t\t// Set element's height.\n\t\telement.style.height = '0px';\n\n\t\t// If callback is available, call the function.\n\t\tif ( callback ) {\n\t\t\tcallback();\n\t\t}\n\t}, duration );\n};\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPAccordionElement } from './tp-accordion';\nimport { TPAccordionContentElement } from './tp-accordion-content';\nimport { TPAccordionHandleElement } from './tp-accordion-handle';\nimport { TPAccordionCollapseAllElement } from './tp-accordion-collapse-all';\nimport { TPAccordionExpandAllElement } from './tp-accordion-expand-all';\nimport { TPAccordionItemElement } from './tp-accordion-item';\n\n/**\n * Initialize.\n */\ncustomElements.define( 'tp-accordion', TPAccordionElement );\ncustomElements.define( 'tp-accordion-content', TPAccordionContentElement );\ncustomElements.define( 'tp-accordion-handle', TPAccordionHandleElement );\ncustomElements.define( 'tp-accordion-collapse-all', TPAccordionCollapseAllElement );\ncustomElements.define( 'tp-accordion-expand-all', TPAccordionExpandAllElement );\ncustomElements.define( 'tp-accordion-item', TPAccordionItemElement );\n"],"names":["TPAccordionElement","HTMLElement","observedAttributes","attributeChangedCallback","name","oldValue","newValue","this","update","dispatchEvent","CustomEvent","bubbles","accordionItems","querySelectorAll","action","getAttribute","forEach","accordionItem","setAttribute","removeAttribute","TPAccordionContentElement","TPAccordionHandleElement","constructor","super","querySelector","addEventListener","toggle","bind","closest","TPAccordionCollapseAllElement","collapseAll","accordion","TPAccordionExpandAllElement","expandAll","TPAccordionItemElement","setupAriaControls","updateAriaState","setupBeforeMatchListener","content","isAriaEnabled","button","id","Math","random","toString","substring","hasAttribute","isOpen","open","close","element","duration","callback","style","height","scrollHeight","setTimeout","slideElementDown","offsetHeight","slideElementUp","customElements","define"],"sourceRoot":""}

package/dist/declarations.d.ts

@@ -54,6 +54,26 @@ export class TPAccordionItemElement extends HTMLElement {
      * Constructor.
      */
     constructor();
+    /**
+     * Set up beforematch event listener for find-in-page support.
+     */
+    private setupBeforeMatchListener;
+    /**
+     * Set up aria-controls linkage between button and content.
+     */
+    private setupAriaControls;
+    /**
+     * Check if ARIA management is enabled.
+     *
+     * @return {boolean} Whether ARIA management is enabled.
+     */
+    private isAriaEnabled;
+    /**
+     * Update ARIA state for handle button and content.
+     *
+     * @param {boolean} isOpen Whether the accordion item is open.
+     */
+    private updateAriaState;
     /**
      * Get observed attributes.
      *
@@ -534,6 +554,18 @@ export class TPModalCloseElement extends HTMLElement {
  * TP Modal.
  */
 export class TPModalElement extends HTMLElement {
+    /**
+     * Previously focused element before modal opened.
+     */
+    private previouslyFocusedElement;
+    /**
+     * Elements that were made inert when modal opened.
+     */
+    private inertedElements;
+    /**
+     * Bound event handlers for cleanup.
+     */
+    private readonly boundHandleKeyDown;
     /**
      * Constructor.
      */
@@ -546,6 +578,29 @@ export class TPModalElement extends HTMLElement {
      * Close the modal.
      */
     close(): void;
+    /**
+     * Set initial focus when modal opens.
+     * Looks for [autofocus] element, otherwise focuses the modal container.
+     */
+    private setInitialFocus;
+    /**
+     * Set or remove inert and aria-hidden on all siblings.
+     *
+     * @param {boolean} inert Whether to make siblings inert.
+     */
+    private setSiblingsInert;
+    /**
+     * Handle keydown events for Escape and focus trap.
+     *
+     * @param {KeyboardEvent} e Keyboard event.
+     */
+    private handleKeyDown;
+    /**
+     * Trap focus within the modal.
+     *
+     * @param {KeyboardEvent} e Keyboard event.
+     */
+    private trapFocus;
     /**
      * Handle when the component is clicked.
      *
@@ -975,6 +1030,20 @@ export class TPSliderNavItemElement extends HTMLElement {
      * 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;
     /**
      * Handle when the button is clicked.
      */
@@ -1056,6 +1125,12 @@ export class TPSliderElement extends HTMLElement {
      * Constructor.
      */
     constructor();
+    /**
+     * Handle keydown events for arrow key navigation.
+     *
+     * @param {KeyboardEvent} e Keyboard event.
+     */
+    protected handleKeyDown(e: KeyboardEvent): void;
     /**
      * Connected callback.
      */

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),this.addEventListener("click",this.handleClick.bind(this))}open(){this.dispatchEvent(new CustomEvent("before-open",{bubbles:!0})),this.setAttribute("open","yes"),this.dispatchEvent(new CustomEvent("open",{bubbles:!0}))}close(){this.dispatchEvent(new CustomEvent("before-close",{bubbles:!0})),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{constructor(){super();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(),this.previouslyFocusedElement=null,this.inertedElements=[],this.hasAttribute("tabindex")||this.setAttribute("tabindex","-1"),this.boundHandleKeyDown=this.handleKeyDown.bind(this),null===(e=document.querySelector("body"))||void 0===e||e.appendChild(this),this.addEventListener("click",this.handleClick.bind(this))}open(){this.previouslyFocusedElement=this.ownerDocument.activeElement,this.dispatchEvent(new CustomEvent("before-open",{bubbles:!0})),this.setAttribute("open","yes"),this.setSiblingsInert(!0),document.addEventListener("keydown",this.boundHandleKeyDown),"no"!==this.getAttribute("manage-focus")&&this.setInitialFocus(),this.dispatchEvent(new CustomEvent("open",{bubbles:!0}))}close(){document.removeEventListener("keydown",this.boundHandleKeyDown),this.dispatchEvent(new CustomEvent("before-close",{bubbles:!0})),this.removeAttribute("open"),this.setSiblingsInert(!1),"no"!==this.getAttribute("manage-focus")&&this.previouslyFocusedElement&&(this.previouslyFocusedElement.focus(),this.previouslyFocusedElement=null),this.dispatchEvent(new CustomEvent("close",{bubbles:!0}))}setInitialFocus(){const e=this.querySelector("[autofocus]");e?e.focus():this.focus()}setSiblingsInert(e){const t=document.body.children;if(e){this.inertedElements=[];for(let e=0;e<t.length;e++){const s=t[e];s!==this&&"SCRIPT"!==s.tagName&&"STYLE"!==s.tagName&&(s.setAttribute("inert",""),s.setAttribute("aria-hidden","true"),this.inertedElements.push(s))}}else{for(const e of this.inertedElements)e.removeAttribute("inert"),e.removeAttribute("aria-hidden");this.inertedElements=[]}}handleKeyDown(e){if("Escape"===e.key)return e.preventDefault(),void this.close();"Tab"===e.key&&"no"!==this.getAttribute("focus-trap")&&this.trapFocus(e)}trapFocus(e){const t=this.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])');if(0===t.length)return void e.preventDefault();const s=t[0],n=t[t.length-1],i=this.ownerDocument.activeElement;if(e.shiftKey&&i===s)return e.preventDefault(),void n.focus();e.shiftKey||i!==n||(e.preventDefault(),s.focus())}handleClick(e){e.target===this&&"yes"===this.getAttribute("overlay-click-close")&&(e.preventDefault(),e.stopPropagation(),this.close())}}class t extends HTMLElement{constructor(){super();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,MAECC,QAGgC,QAAhC,EAAAC,SAASC,cAAe,eAAQ,SAAEC,YAAaC,MAG/CA,KAAKC,iBAAkB,QAASD,KAAKE,YAAYC,KAAMH,MACxD,CAKA,IAAAI,GAECJ,KAAKK,cAAe,IAAIC,YAAa,cAAe,CAAEC,SAAS,KAC/DP,KAAKQ,aAAc,OAAQ,OAC3BR,KAAKK,cAAe,IAAIC,YAAa,OAAQ,CAAEC,SAAS,IACzD,CAKA,KAAAE,GAECT,KAAKK,cAAe,IAAIC,YAAa,eAAgB,CAAEC,SAAS,KAChEP,KAAKU,gBAAiB,QACtBV,KAAKK,cAAe,IAAIC,YAAa,QAAS,CAAEC,SAAS,IAC1D,CAOA,WAAAL,CAAaS,GAEPA,EAAEC,SAAWZ,MAAQ,QAAUA,KAAKa,aAAc,yBACtDF,EAAEG,iBACFH,EAAEI,kBACFf,KAAKS,QAEP,EC1CM,MAAMO,UAA4BtB,YAIxC,WAAAC,GAECC,QAGA,MAAMqB,EAAmCjB,KAAKF,cAAe,UAC7DmB,SAAAA,EAAQhB,iBAAkB,QAASD,KAAKkB,WAAWf,KAAMH,MAC1D,CAKA,UAAAkB,GAEC,MAAMC,EAA+BnB,KAAKoB,QAAS,YACnDD,SAAAA,EAAOV,OACR,ECdDY,eAAeC,OAAQ,WAAY7B,GACnC4B,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\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Move modal as a direct descendent of body to avoid z-index issues.\n\t\tdocument.querySelector( 'body' )?.appendChild( this );\n\n\t\t// Event listeners.\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\t// Dispatch events and set attribute.\n\t\tthis.dispatchEvent( new CustomEvent( 'before-open', { bubbles: true } ) );\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\t// Dispatch events and remove attribute.\n\t\tthis.dispatchEvent( new CustomEvent( 'before-close', { bubbles: true } ) );\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\t// Close on overlay click.\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 * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Add event listener.\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\t// Get modal and apply close method.\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","addEventListener","handleClick","bind","open","dispatchEvent","CustomEvent","bubbles","setAttribute","close","removeAttribute","e","target","getAttribute","preventDefault","stopPropagation","TPModalCloseElement","button","closeModal","modal","closest","customElements","define"],"sourceRoot":""}
+{"version":3,"file":"dist/modal/index.js","mappings":"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","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 * Focusable elements selector.\n */\nconst FOCUSABLE_ELEMENTS = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * TP Modal.\n */\nexport class TPModalElement extends HTMLElement {\n\t/**\n\t * Previously focused element before modal opened.\n\t */\n\tprivate previouslyFocusedElement: HTMLElement | null = null;\n\n\t/**\n\t * Elements that were made inert when modal opened.\n\t */\n\tprivate inertedElements: Element[] = [];\n\n\t/**\n\t * Bound event handlers for cleanup.\n\t */\n\tprivate readonly boundHandleKeyDown: ( e: KeyboardEvent ) => void;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Make modal programmatically focusable for focus management.\n\t\tif ( ! this.hasAttribute( 'tabindex' ) ) {\n\t\t\tthis.setAttribute( 'tabindex', '-1' );\n\t\t}\n\n\t\t// Bind event handlers.\n\t\tthis.boundHandleKeyDown = this.handleKeyDown.bind( this );\n\n\t\t// Move modal as a direct descendent of body to avoid z-index issues.\n\t\tdocument.querySelector( 'body' )?.appendChild( this );\n\n\t\t// Event listeners.\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\t// Save the currently focused element to restore later.\n\t\tthis.previouslyFocusedElement = this.ownerDocument.activeElement as HTMLElement;\n\n\t\t// Dispatch before-open event and set open attribute.\n\t\tthis.dispatchEvent( new CustomEvent( 'before-open', { bubbles: true } ) );\n\t\tthis.setAttribute( 'open', 'yes' );\n\n\t\t// Make all siblings inert to trap focus and hide from AT.\n\t\tthis.setSiblingsInert( true );\n\n\t\t// Add keyboard event listener for Escape and focus trap.\n\t\tdocument.addEventListener( 'keydown', this.boundHandleKeyDown );\n\n\t\t// Move focus into the modal (enabled by default, disable with manage-focus=\"no\").\n\t\tif ( 'no' !== this.getAttribute( 'manage-focus' ) ) {\n\t\t\tthis.setInitialFocus();\n\t\t}\n\n\t\t// Dispatch open event.\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\t// Remove keyboard event listener.\n\t\tdocument.removeEventListener( 'keydown', this.boundHandleKeyDown );\n\n\t\t// Dispatch before-close event and remove open attribute.\n\t\tthis.dispatchEvent( new CustomEvent( 'before-close', { bubbles: true } ) );\n\t\tthis.removeAttribute( 'open' );\n\n\t\t// Restore siblings from inert state.\n\t\tthis.setSiblingsInert( false );\n\n\t\t// Restore focus to the previously focused element (if manage-focus is enabled).\n\t\tif ( 'no' !== this.getAttribute( 'manage-focus' ) && this.previouslyFocusedElement ) {\n\t\t\tthis.previouslyFocusedElement.focus();\n\t\t\tthis.previouslyFocusedElement = null;\n\t\t}\n\n\t\t// Dispatch close event.\n\t\tthis.dispatchEvent( new CustomEvent( 'close', { bubbles: true } ) );\n\t}\n\n\t/**\n\t * Set initial focus when modal opens.\n\t * Looks for [autofocus] element, otherwise focuses the modal container.\n\t */\n\tprivate setInitialFocus(): void {\n\t\t// Look for an element with autofocus attribute.\n\t\tconst autofocusElement = this.querySelector<HTMLElement>( '[autofocus]' );\n\n\t\t// Do we have an autofocus element?\n\t\tif ( autofocusElement ) {\n\t\t\tautofocusElement.focus();\n\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Otherwise, focus the modal container itself.\n\t\tthis.focus();\n\t}\n\n\t/**\n\t * Set or remove inert and aria-hidden on all siblings.\n\t *\n\t * @param {boolean} inert Whether to make siblings inert.\n\t */\n\tprivate setSiblingsInert( inert: boolean ): void {\n\t\t// Get all body children except this modal.\n\t\tconst bodyChildren = document.body.children;\n\n\t\t// Should we make them inert?\n\t\tif ( inert ) {\n\t\t\t// Clear any previously stored elements.\n\t\t\tthis.inertedElements = [];\n\n\t\t\t// Loop through body children and set inert.\n\t\t\tfor ( let i = 0; i < bodyChildren.length; i++ ) {\n\t\t\t\tconst element = bodyChildren[ i ];\n\n\t\t\t\t// Skip this modal and script/style elements.\n\t\t\t\tif ( element === this || 'SCRIPT' === element.tagName || 'STYLE' === element.tagName ) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\t// Set inert and aria-hidden, store reference for cleanup.\n\t\t\t\telement.setAttribute( 'inert', '' );\n\t\t\t\telement.setAttribute( 'aria-hidden', 'true' );\n\t\t\t\tthis.inertedElements.push( element );\n\t\t\t}\n\t\t} else {\n\t\t\t// Remove inert and aria-hidden from previously inerted elements.\n\t\t\tfor ( const element of this.inertedElements ) {\n\t\t\t\telement.removeAttribute( 'inert' );\n\t\t\t\telement.removeAttribute( 'aria-hidden' );\n\t\t\t}\n\n\t\t\t// Clear stored elements.\n\t\t\tthis.inertedElements = [];\n\t\t}\n\t}\n\n\t/**\n\t * Handle keydown events for Escape and focus trap.\n\t *\n\t * @param {KeyboardEvent} e Keyboard event.\n\t */\n\tprivate handleKeyDown( e: KeyboardEvent ): void {\n\t\t// Close on Escape.\n\t\tif ( 'Escape' === e.key ) {\n\t\t\te.preventDefault();\n\t\t\tthis.close();\n\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Handle focus trap on Tab (enabled by default, disable with focus-trap=\"no\").\n\t\tif ( 'Tab' === e.key && 'no' !== this.getAttribute( 'focus-trap' ) ) {\n\t\t\tthis.trapFocus( e );\n\t\t}\n\t}\n\n\t/**\n\t * Trap focus within the modal.\n\t *\n\t * @param {KeyboardEvent} e Keyboard event.\n\t */\n\tprivate trapFocus( e: KeyboardEvent ): void {\n\t\t// Get all focusable elements within the modal.\n\t\tconst focusableElements = this.querySelectorAll<HTMLElement>( FOCUSABLE_ELEMENTS );\n\n\t\t// Do we have focusable elements?\n\t\tif ( 0 === focusableElements.length ) {\n\t\t\te.preventDefault();\n\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get first, last, and currently focused elements.\n\t\tconst firstElement = focusableElements[ 0 ];\n\t\tconst lastElement = focusableElements[ focusableElements.length - 1 ];\n\t\tconst activeElement = this.ownerDocument.activeElement;\n\n\t\t// Shift+Tab on first element: move to last.\n\t\tif ( e.shiftKey && activeElement === firstElement ) {\n\t\t\te.preventDefault();\n\t\t\tlastElement.focus();\n\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Tab on last element: move to first.\n\t\tif ( ! e.shiftKey && activeElement === lastElement ) {\n\t\t\te.preventDefault();\n\t\t\tfirstElement.focus();\n\t\t}\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\t// Close on overlay click.\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 * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Add event listener.\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\t// Get modal and apply close method.\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","previouslyFocusedElement","inertedElements","this","hasAttribute","setAttribute","boundHandleKeyDown","handleKeyDown","bind","document","querySelector","appendChild","addEventListener","handleClick","open","ownerDocument","activeElement","dispatchEvent","CustomEvent","bubbles","setSiblingsInert","getAttribute","setInitialFocus","close","removeEventListener","removeAttribute","focus","autofocusElement","inert","bodyChildren","body","children","i","length","element","tagName","push","e","key","preventDefault","trapFocus","focusableElements","querySelectorAll","firstElement","lastElement","shiftKey","target","stopPropagation","TPModalCloseElement","button","closeModal","modal","closest","customElements","define"],"sourceRoot":""}

package/dist/slider/index.js

@@ -1,2 +1,2 @@
-(()=>{"use strict";class t extends HTMLElement{constructor(){var t;super(),this.touchStartX=0,this.touchStartY=0,this.swipeThreshold=200,this.allowedResponsiveKeys=["flexible-height","infinite","swipe","behaviour","auto-slide-interval","per-view","step","responsive"],this.getAttribute("current-slide")||this.setAttribute("current-slide","1"),this.swipeThreshold=Number(null!==(t=null==this?void 0:this.getAttribute("swipe-threshold"))&&void 0!==t?t:"200"),this.slide(),this.autoSlide(),this.setAttribute("initialized","yes");const e=this.getAttribute("responsive")||"";this.responsiveSettings=e?JSON.parse(e):[],"ResizeObserver"in window||(window.addEventListener("resize",this.handleResize.bind(this)),document.fonts.ready.then((()=>this.handleResize()))),this.addEventListener("touchstart",this.handleTouchStart.bind(this),{passive:!0}),this.addEventListener("touchend",this.handleTouchEnd.bind(this))}connectedCallback(){this.update()}static get observedAttributes(){return["current-slide","flexible-height","infinite","swipe","per-view","step"]}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)}get step(){var t;return parseInt(null!==(t=this.getAttribute("step"))&&void 0!==t?t:"1")}set step(t){this.setAttribute("step",t.toString())}get perView(){var t;return parseInt(null!==(t=this.getAttribute("per-view"))&&void 0!==t?t:"1")}set perView(t){this.setAttribute("per-view",t.toString())}getTotalSlides(){const t=this.getSlideElements();return t?t.length:0}getSlideElements(){const t=this.querySelector("tp-slider-slides");return null==t?void 0:t.querySelectorAll(":scope > tp-slider-slide")}next(){const t=this.getTotalSlides();if(this.currentSlideIndex>=t-this.perView+1)return void("yes"===this.getAttribute("infinite")&&this.setCurrentSlide(1));const e=Math.min(this.currentSlideIndex+this.step,t-this.perView+1);e>t-this.perView+1||this.setCurrentSlide(e)}previous(){if(this.currentSlideIndex<=1)return void("yes"===this.getAttribute("infinite")&&this.setCurrentSlide(this.getTotalSlides()-this.perView+1));const t=this.getTotalSlides(),e=Math.ceil(t/this.step);let i=0;if(t/this.step!==Math.round(t/this.step)){let s;s=this.currentSlideIndex+this.step-1>=t?e:Math.ceil(this.currentSlideIndex/this.step),i=s===e?this.currentSlideIndex-this.step+1:this.currentSlideIndex-this.step}else i=this.currentSlideIndex-this.step;i>1?this.setCurrentSlide(i):this.setCurrentSlide(1)}getCurrentSlide(){return this.currentSlideIndex}setCurrentSlide(t){t>this.getTotalSlides()||t<=0||(this.dispatchEvent(new CustomEvent("slide-set",{bubbles:!0,detail:{slideIndex:t}})),this.setAttribute("current-slide",t.toString()))}slide(){if("yes"===this.getAttribute("disabled"))return;const t=this.querySelector("tp-slider-slides"),e=this.getSlideElements();t&&e&&(setTimeout((()=>this.updateHeight()),0),"fade"!==(this.getAttribute("behaviour")||"")&&e[this.currentSlideIndex-1]&&(t.style.left=`-${e[this.currentSlideIndex-1].offsetLeft}px`))}getArrow(t){const e=this.querySelectorAll(t),i=this;let s=this.querySelector(t);return e.forEach((t=>{i===t.closest("tp-slider")&&(s=t)})),s}update(){return t=this,e=void 0,s=function*(){const t=this.querySelector("tp-slider-nav"),e=this.querySelectorAll("tp-slider-count"),i=this.getArrow('tp-slider-arrow[direction="previous"]'),s=this.getArrow('tp-slider-arrow[direction="next"]');yield customElements.whenDefined("tp-slider-nav"),yield customElements.whenDefined("tp-slider-nav-item"),yield customElements.whenDefined("tp-slider-count"),yield customElements.whenDefined("tp-slider-arrow");const r=this.getTotalSlides(),n=Math.ceil(r/this.step),l=this.getSlideElements();l&&l.forEach(((t,e)=>{this.currentSlideIndex-1===e?t.setAttribute("active","yes"):t.removeAttribute("active")})),null==t||t.updateNavItems();const d=this.querySelectorAll("tp-slider-nav-item");d&&d.forEach(((t,e,i)=>{var s;t.removeAttribute("current"),Math.round((this.currentSlideIndex-1)/this.step)===e?t.setAttribute("current","yes"):e===n-1&&this.currentSlideIndex+this.step-1>=r&&(t.setAttribute("current","yes"),null===(s=i[e-1])||void 0===s||s.removeAttribute("current"))})),e&&(this.setAttribute("total",this.getTotalSlides().toString()),e.forEach((t=>{"function"==typeof t.update&&t.update()}))),"yes"!==this.getAttribute("infinite")?(this.getCurrentSlide()===this.getTotalSlides()-this.perView+1?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"))},new((i=void 0)||(i=Promise))((function(r,n){function l(t){try{h(s.next(t))}catch(t){n(t)}}function d(t){try{h(s.throw(t))}catch(t){n(t)}}function h(t){var e;t.done?r(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(l,d)}h((s=s.apply(t,e||[])).next())}));var t,e,i,s}updateHeight(){const t=this.querySelector("tp-slider-slides");if(!t)return;if("yes"!==this.getAttribute("flexible-height")&&"fade"!==this.getAttribute("behaviour"))return void t.style.removeProperty("height");const e=this.getSlideElements();if(e)if("yes"===this.getAttribute("flexible-height"))if(this.perView>1){const i=this.currentSlideIndex-1,s=i+this.perView;let r=0;for(let t=i;t<s;t++)e[t].scrollHeight>r&&(r=e[t].scrollHeight);t.style.height=`${r}px`}else{const i=e[this.currentSlideIndex-1].scrollHeight;t.style.height=`${i}px`}else{let i=0;e.forEach((t=>{t.scrollHeight>i&&(i=t.scrollHeight)})),t.style.height=`${i}px`}}handleResize(){setTimeout((()=>{this.updateAttributesResponsively()}),0),this.getAttribute("resizing")||(this.setAttribute("resizing","yes"),this.slide(),this.removeAttribute("resizing"))}updateAttributesResponsively(){this.responsiveSettings.length&&(this.allowedResponsiveKeys.forEach((t=>{this.removeAttribute(t)})),this.responsiveSettings.every((t=>{if(window.matchMedia(t.media).matches){for(const e in t)"media"!==e&&this.allowedResponsiveKeys.includes(e)&&this.setAttribute(e,t[e]);return!1}return!0})))}handleTouchStart(t){"yes"===this.getAttribute("swipe")&&(this.touchStartX=t.touches[0].clientX,this.touchStartY=t.touches[0].clientY)}handleTouchEnd(t){if("yes"!==this.getAttribute("swipe"))return;const e=t.changedTouches[0].clientX,i=t.changedTouches[0].clientY,s=e-this.touchStartX,r=i-this.touchStartY;Math.abs(s)>Math.abs(r)&&(s>0?s<this.swipeThreshold&&this.previous():s<0&&s>-this.swipeThreshold&&this.next())}autoSlide(){const t=this.getAttribute("auto-slide-interval");if(!t)return;const e=parseInt(t);e<=0||setTimeout((()=>{this.next(),this.autoSlide(),this.dispatchEvent(new CustomEvent("auto-slide-complete"))}),e)}}class e extends HTMLElement{}class i extends HTMLElement{constructor(){super(),"ResizeObserver"in window&&new ResizeObserver(this.handleHeightChange.bind(this)).observe(this)}handleHeightChange(){const t=this.closest("tp-slider");t&&setTimeout((()=>{t.handleResize()}),0)}}class s extends HTMLElement{}class r extends HTMLElement{constructor(){var t;super(),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 n extends HTMLElement{constructor(){super(),this.template=null,this.slider=null,this.template=this.querySelector("template"),this.slider=this.closest("tp-slider")}updateNavItems(){var t,e,i;if(!this.template||!this.slider)return;const s=null===(t=this.slider)||void 0===t?void 0:t.getTotalSlides(),r=Math.ceil((s-(null===(e=this.slider)||void 0===e?void 0:e.perView))/(null===(i=this.slider)||void 0===i?void 0:i.step))+1;this.innerHTML="";for(let t=1;t<=r;t++){const e=this.template.content.cloneNode(!0),i=document.createElement("div");i.appendChild(e),this.innerHTML+=i.innerHTML.replace("$index",t.toString())}}}class l extends HTMLElement{constructor(){var t;super(),this.slider=this.closest("tp-slider"),null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.handleClick.bind(this))}handleClick(){this.slider&&this.slider.setCurrentSlide(this.getIndex())}getIndex(){var t,e,i,s,r,n,l,d;if(this.getAttribute("index"))return parseInt(null!==(t=this.getAttribute("index"))&&void 0!==t?t:"0");const h=this.closest("tp-slider-nav"),u=null!==(i=null===(e=this.slider)||void 0===e?void 0:e.step)&&void 0!==i?i:1,o=null!==(r=null===(s=this.slider)||void 0===s?void 0:s.perView)&&void 0!==r?r:1,c=(null!==(l=null===(n=this.slider)||void 0===n?void 0:n.getTotalSlides())&&void 0!==l?l:1)-o+1,a=Array.from(null!==(d=null==h?void 0:h.children)&&void 0!==d?d:[]).indexOf(this)*u+1;return Math.min(c,a)}}class d extends HTMLElement{static get observedAttributes(){return["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;const e=this.closest("tp-slider");if(!e)return;const i=Math.min(e.currentSlideIndex-1+e.perView,e.getTotalSlides()),s=null!==(t=e.getAttribute("total"))&&void 0!==t?t:"";this.innerHTML=this.format.replace("$current",i.toString()).replace("$total",s||""),this.setAttribute("current",i.toString()),this.setAttribute("total",s||"")}}customElements.define("tp-slider-nav",n),customElements.define("tp-slider",t),customElements.define("tp-slider-count",d),customElements.define("tp-slider-track",e),customElements.define("tp-slider-slides",i),customElements.define("tp-slider-slide",s),customElements.define("tp-slider-arrow",r),customElements.define("tp-slider-nav-item",l)})();
+(()=>{"use strict";class t extends HTMLElement{constructor(){var t;super(),this.touchStartX=0,this.touchStartY=0,this.swipeThreshold=200,this.allowedResponsiveKeys=["flexible-height","infinite","swipe","behaviour","auto-slide-interval","per-view","step","responsive"],this.getAttribute("current-slide")||this.setAttribute("current-slide","1"),this.swipeThreshold=Number(null!==(t=null==this?void 0:this.getAttribute("swipe-threshold"))&&void 0!==t?t:"200"),this.slide(),this.autoSlide(),this.setAttribute("initialized","yes");const e=this.getAttribute("responsive")||"";this.responsiveSettings=e?JSON.parse(e):[],"ResizeObserver"in window||(window.addEventListener("resize",this.handleResize.bind(this)),document.fonts.ready.then((()=>this.handleResize()))),this.addEventListener("touchstart",this.handleTouchStart.bind(this),{passive:!0}),this.addEventListener("touchend",this.handleTouchEnd.bind(this)),this.addEventListener("keydown",this.handleKeyDown.bind(this))}handleKeyDown(t){"yes"===this.getAttribute("arrow-navigation")&&("ArrowLeft"!==t.key&&"ArrowRight"!==t.key||(t.preventDefault(),"ArrowLeft"===t.key?this.previous():"ArrowRight"===t.key&&this.next()))}connectedCallback(){this.update()}static get observedAttributes(){return["current-slide","flexible-height","infinite","swipe","per-view","step"]}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)}get step(){var t;return parseInt(null!==(t=this.getAttribute("step"))&&void 0!==t?t:"1")}set step(t){this.setAttribute("step",t.toString())}get perView(){var t;return parseInt(null!==(t=this.getAttribute("per-view"))&&void 0!==t?t:"1")}set perView(t){this.setAttribute("per-view",t.toString())}getTotalSlides(){const t=this.getSlideElements();return t?t.length:0}getSlideElements(){const t=this.querySelector("tp-slider-slides");return null==t?void 0:t.querySelectorAll(":scope > tp-slider-slide")}next(){const t=this.getTotalSlides();if(this.currentSlideIndex>=t-this.perView+1)return void("yes"===this.getAttribute("infinite")&&this.setCurrentSlide(1));const e=Math.min(this.currentSlideIndex+this.step,t-this.perView+1);e>t-this.perView+1||this.setCurrentSlide(e)}previous(){if(this.currentSlideIndex<=1)return void("yes"===this.getAttribute("infinite")&&this.setCurrentSlide(this.getTotalSlides()-this.perView+1));const t=this.getTotalSlides(),e=Math.ceil(t/this.step);let i=0;if(t/this.step!==Math.round(t/this.step)){let s;s=this.currentSlideIndex+this.step-1>=t?e:Math.ceil(this.currentSlideIndex/this.step),i=s===e?this.currentSlideIndex-this.step+1:this.currentSlideIndex-this.step}else i=this.currentSlideIndex-this.step;i>1?this.setCurrentSlide(i):this.setCurrentSlide(1)}getCurrentSlide(){return this.currentSlideIndex}setCurrentSlide(t){t>this.getTotalSlides()||t<=0||(this.dispatchEvent(new CustomEvent("slide-set",{bubbles:!0,detail:{slideIndex:t}})),this.setAttribute("current-slide",t.toString()))}slide(){if("yes"===this.getAttribute("disabled"))return;const t=this.querySelector("tp-slider-slides"),e=this.getSlideElements();t&&e&&(setTimeout((()=>this.updateHeight()),0),"fade"!==(this.getAttribute("behaviour")||"")&&e[this.currentSlideIndex-1]&&(t.style.left=`-${e[this.currentSlideIndex-1].offsetLeft}px`))}getArrow(t){const e=this.querySelectorAll(t),i=this;let s=this.querySelector(t);return e.forEach((t=>{i===t.closest("tp-slider")&&(s=t)})),s}update(){return t=this,e=void 0,s=function*(){const t=this.querySelector("tp-slider-nav"),e=this.querySelectorAll("tp-slider-count"),i=this.getArrow('tp-slider-arrow[direction="previous"]'),s=this.getArrow('tp-slider-arrow[direction="next"]');yield customElements.whenDefined("tp-slider-nav"),yield customElements.whenDefined("tp-slider-nav-item"),yield customElements.whenDefined("tp-slider-count"),yield customElements.whenDefined("tp-slider-arrow");const r=this.getTotalSlides(),n=Math.ceil(r/this.step),l=this.getSlideElements();if(l){const t="no"!==this.getAttribute("aria"),e=this.currentSlideIndex-1,i=e+this.perView-1;l.forEach(((s,r)=>{this.currentSlideIndex-1===r?s.setAttribute("active","yes"):s.removeAttribute("active"),t&&(r>=e&&r<=i?(s.removeAttribute("aria-hidden"),s.removeAttribute("inert")):(s.setAttribute("aria-hidden","true"),s.setAttribute("inert","")))}))}null==t||t.updateNavItems();const d=this.querySelectorAll("tp-slider-nav-item");d&&d.forEach(((t,e,i)=>{var s;t.removeAttribute("current"),Math.round((this.currentSlideIndex-1)/this.step)===e?t.setAttribute("current","yes"):e===n-1&&this.currentSlideIndex+this.step-1>=r&&(t.setAttribute("current","yes"),null===(s=i[e-1])||void 0===s||s.removeAttribute("current"))})),e&&(this.setAttribute("total",this.getTotalSlides().toString()),e.forEach((t=>{"function"==typeof t.update&&t.update()}))),"yes"!==this.getAttribute("infinite")?(this.getCurrentSlide()===this.getTotalSlides()-this.perView+1?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"))},new((i=void 0)||(i=Promise))((function(r,n){function l(t){try{h(s.next(t))}catch(t){n(t)}}function d(t){try{h(s.throw(t))}catch(t){n(t)}}function h(t){var e;t.done?r(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(l,d)}h((s=s.apply(t,e||[])).next())}));var t,e,i,s}updateHeight(){const t=this.querySelector("tp-slider-slides");if(!t)return;if("yes"!==this.getAttribute("flexible-height")&&"fade"!==this.getAttribute("behaviour"))return void t.style.removeProperty("height");const e=this.getSlideElements();if(e)if("yes"===this.getAttribute("flexible-height"))if(this.perView>1){const i=this.currentSlideIndex-1,s=i+this.perView;let r=0;for(let t=i;t<s;t++)e[t].scrollHeight>r&&(r=e[t].scrollHeight);t.style.height=`${r}px`}else{const i=e[this.currentSlideIndex-1].scrollHeight;t.style.height=`${i}px`}else{let i=0;e.forEach((t=>{t.scrollHeight>i&&(i=t.scrollHeight)})),t.style.height=`${i}px`}}handleResize(){setTimeout((()=>{this.updateAttributesResponsively()}),0),this.getAttribute("resizing")||(this.setAttribute("resizing","yes"),this.slide(),this.removeAttribute("resizing"))}updateAttributesResponsively(){this.responsiveSettings.length&&(this.allowedResponsiveKeys.forEach((t=>{this.removeAttribute(t)})),this.responsiveSettings.every((t=>{if(window.matchMedia(t.media).matches){for(const e in t)"media"!==e&&this.allowedResponsiveKeys.includes(e)&&this.setAttribute(e,t[e]);return!1}return!0})))}handleTouchStart(t){"yes"===this.getAttribute("swipe")&&(this.touchStartX=t.touches[0].clientX,this.touchStartY=t.touches[0].clientY)}handleTouchEnd(t){if("yes"!==this.getAttribute("swipe"))return;const e=t.changedTouches[0].clientX,i=t.changedTouches[0].clientY,s=e-this.touchStartX,r=i-this.touchStartY;Math.abs(s)>Math.abs(r)&&(s>0?s<this.swipeThreshold&&this.previous():s<0&&s>-this.swipeThreshold&&this.next())}autoSlide(){const t=this.getAttribute("auto-slide-interval");if(!t)return;const e=parseInt(t);e<=0||setTimeout((()=>{this.next(),this.autoSlide(),this.dispatchEvent(new CustomEvent("auto-slide-complete"))}),e)}}class e extends HTMLElement{}class i extends HTMLElement{constructor(){super(),"ResizeObserver"in window&&new ResizeObserver(this.handleHeightChange.bind(this)).observe(this)}handleHeightChange(){const t=this.closest("tp-slider");t&&setTimeout((()=>{t.handleResize()}),0)}}class s extends HTMLElement{}class r extends HTMLElement{constructor(){var t;super(),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 n extends HTMLElement{constructor(){super(),this.template=null,this.slider=null,this.template=this.querySelector("template"),this.slider=this.closest("tp-slider")}updateNavItems(){var t,e,i;if(!this.template||!this.slider)return;const s=null===(t=this.slider)||void 0===t?void 0:t.getTotalSlides(),r=Math.ceil((s-(null===(e=this.slider)||void 0===e?void 0:e.perView))/(null===(i=this.slider)||void 0===i?void 0:i.step))+1;this.innerHTML="";for(let t=1;t<=r;t++){const e=this.template.content.cloneNode(!0),i=document.createElement("div");i.appendChild(e),this.innerHTML+=i.innerHTML.replace("$index",t.toString())}}}class l extends HTMLElement{constructor(){var t;super(),this.slider=this.closest("tp-slider"),null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.handleClick.bind(this))}static get observedAttributes(){return["current"]}attributeChangedCallback(t,e,i){var s;if("current"===t&&"no"!==(null===(s=this.slider)||void 0===s?void 0:s.getAttribute("aria"))){const t=this.querySelector("button");t&&("yes"===i?t.setAttribute("aria-current","true"):t.removeAttribute("aria-current"))}}handleClick(){this.slider&&this.slider.setCurrentSlide(this.getIndex())}getIndex(){var t,e,i,s,r,n,l,d;if(this.getAttribute("index"))return parseInt(null!==(t=this.getAttribute("index"))&&void 0!==t?t:"0");const h=this.closest("tp-slider-nav"),u=null!==(i=null===(e=this.slider)||void 0===e?void 0:e.step)&&void 0!==i?i:1,o=null!==(r=null===(s=this.slider)||void 0===s?void 0:s.perView)&&void 0!==r?r:1,a=(null!==(l=null===(n=this.slider)||void 0===n?void 0:n.getTotalSlides())&&void 0!==l?l:1)-o+1,c=Array.from(null!==(d=null==h?void 0:h.children)&&void 0!==d?d:[]).indexOf(this)*u+1;return Math.min(a,c)}}class d extends HTMLElement{static get observedAttributes(){return["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;const e=this.closest("tp-slider");if(!e)return;const i=Math.min(e.currentSlideIndex-1+e.perView,e.getTotalSlides()),s=null!==(t=e.getAttribute("total"))&&void 0!==t?t:"";this.innerHTML=this.format.replace("$current",i.toString()).replace("$total",s||""),this.setAttribute("current",i.toString()),this.setAttribute("total",s||"")}}customElements.define("tp-slider-nav",n),customElements.define("tp-slider",t),customElements.define("tp-slider-count",d),customElements.define("tp-slider-track",e),customElements.define("tp-slider-slides",i),customElements.define("tp-slider-slide",s),customElements.define("tp-slider-arrow",r),customElements.define("tp-slider-nav-item",l)})();
 //# sourceMappingURL=index.js.map

package/dist/slider/index.js.map

@@ -1 +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-track.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 { TPSliderNavElement } from './tp-slider-nav';\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\tprotected touchStartY: number = 0;\n\tprotected swipeThreshold: number = 200;\n\tprotected responsiveSettings: { [ key: string ]: any };\n\tprotected allowedResponsiveKeys: string[] = [\n\t\t'flexible-height',\n\t\t'infinite',\n\t\t'swipe',\n\t\t'behaviour',\n\t\t'auto-slide-interval',\n\t\t'per-view',\n\t\t'step',\n\t\t'responsive',\n\t];\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\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// Threshold Setting.\n\t\tthis.swipeThreshold = Number( this?.getAttribute( 'swipe-threshold' ) ?? '200' );\n\n\t\t// Initialize slider.\n\t\tthis.slide();\n\t\tthis.autoSlide();\n\t\tthis.setAttribute( 'initialized', 'yes' );\n\n\t\t// Responsive Settings.\n\t\tconst responsiveSettingsJSON: string = this.getAttribute( 'responsive' ) || '';\n\t\tthis.responsiveSettings = responsiveSettingsJSON ? JSON.parse( responsiveSettingsJSON ) : [];\n\n\t\t// Event listeners.\n\t\tif ( ! ( 'ResizeObserver' in window ) ) {\n\t\t\t/**\n\t\t\t * We set the resize observer in `tp-slider-slides`\n\t\t\t * because These are just fallbacks for browsers that don't support ResizeObserver.\n\t\t\t */\n\n\t\t\t// @ts-ignore\n\t\t\twindow.addEventListener( 'resize', this.handleResize.bind( this ) );\n\t\t\tdocument.fonts.ready.then( () => this.handleResize() );\n\t\t}\n\n\t\t// Touch listeners.\n\t\tthis.addEventListener( 'touchstart', this.handleTouchStart.bind( this ), { passive: true } );\n\t\tthis.addEventListener( 'touchend', this.handleTouchEnd.bind( this ) );\n\t}\n\n\t/**\n\t * Connected callback.\n\t */\n\tconnectedCallback() {\n\t\t/**\n\t\t * Update on initial render.\n\t\t *\n\t\t * This is so that the disabled values of the navigation arrows\n\t\t * can be set because attributeChangedCallback does not get fired when\n\t\t * no attributes are passed to the slider.\n\t\t */\n\t\tthis.update();\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\t// Observed attributes.\n\t\treturn [ 'current-slide', 'flexible-height', 'infinite', 'swipe', 'per-view', 'step' ];\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\t// Keep an eye on current slide.\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\t// Update the component after the attribute change.\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\t// To get the current slide index.\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\t// Set the current slide index.\n\t\tthis.setCurrentSlide( index );\n\t}\n\n\t/**\n\t * Get current step.\n\t *\n\t * @return {number} Current step.\n\t */\n\tget step(): number {\n\t\t// To get the current step.\n\t\treturn parseInt( this.getAttribute( 'step' ) ?? '1' );\n\t}\n\n\t/**\n\t * Set current step.\n\t *\n\t * @param {number} step Step.\n\t */\n\tset step( step: number ) {\n\t\t// Set the current step.\n\t\tthis.setAttribute( 'step', step.toString() );\n\t}\n\n\t/**\n\t * Get per view.\n\t *\n\t * @return {number} Current step.\n\t */\n\tget perView(): number {\n\t\t// To get number of slides per view.\n\t\treturn parseInt( this.getAttribute( 'per-view' ) ?? '1' );\n\t}\n\n\t/**\n\t * Set per view.\n\t *\n\t * @param {number} perView Per view.\n\t */\n\tset perView( perView: number ) {\n\t\t// Set the number of slides per view.\n\t\tthis.setAttribute( 'per-view', perView.toString() );\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\t// To get the total number of slides.\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = this.getSlideElements();\n\n\t\t// Check if slides are available.\n\t\tif ( slides ) {\n\t\t\t// Tell the total number of slides.\n\t\t\treturn slides.length;\n\t\t}\n\n\t\t// Else return 0.\n\t\treturn 0;\n\t}\n\n\t/**\n\t * Get Slide Elements.\n\t */\n\tgetSlideElements() {\n\t\t// Get slides.\n\t\tconst slidesElement: TPSliderSlidesElement | null = this.querySelector( 'tp-slider-slides' );\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = slidesElement?.querySelectorAll( ':scope > tp-slider-slide' );\n\n\t\t// Return array of slides.\n\t\treturn slides;\n\t}\n\n\t/**\n\t * Navigate to the next slide.\n\t */\n\tnext(): void {\n\t\t// Initialize total slides variable.\n\t\tconst totalSlides: number = this.getTotalSlides();\n\n\t\t// Check if we are at the last slide considering per view attribute.\n\t\tif ( this.currentSlideIndex >= totalSlides - this.perView + 1 ) {\n\t\t\t// Check if we are in infinite mode.\n\t\t\tif ( 'yes' === this.getAttribute( 'infinite' ) ) {\n\t\t\t\t// Yes, we are, and go back to first slide.\n\t\t\t\tthis.setCurrentSlide( 1 );\n\t\t\t}\n\n\t\t\t// Terminate.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get next slide index by adding minimum of step or remaining number of slides.\n\t\tconst nextSlideIndex: number = Math.min( this.currentSlideIndex + this.step, totalSlides - this.perView + 1 );\n\n\t\t// Check if the next slide step is not taking it beyond the last slide.\n\t\tif ( nextSlideIndex > ( totalSlides - this.perView + 1 ) ) {\n\t\t\t// Yes, it is.\n\t\t\treturn;\n\t\t}\n\n\t\t// Everything is good, go to next slide.\n\t\tthis.setCurrentSlide( nextSlideIndex );\n\t}\n\n\t/**\n\t * Navigate to the previous slide.\n\t */\n\tprevious(): void {\n\t\t// Check if we are at the first slide.\n\t\tif ( this.currentSlideIndex <= 1 ) {\n\t\t\t// Check if we are in infinite mode.\n\t\t\tif ( 'yes' === this.getAttribute( 'infinite' ) ) {\n\t\t\t\tthis.setCurrentSlide( this.getTotalSlides() - this.perView + 1 );\n\t\t\t}\n\n\t\t\t// Terminate.\n\t\t\treturn;\n\t\t}\n\n\t\t// Initialize total slides variable.\n\t\tconst totalSlides: number = this.getTotalSlides();\n\n\t\t// Total Possible groups.\n\t\tconst totalPossibleGroups: number = Math.ceil( totalSlides / this.step );\n\n\t\t// Initialize previous slide number.\n\t\tlet previousSlideNumber: number = 0;\n\n\t\t// Checking if total slides are not divisible by step.\n\t\tif ( totalSlides / this.step !== Math.round( totalSlides / this.step ) ) {\n\t\t\t// Initialize current group.\n\t\t\tlet currentGroup: number;\n\n\t\t\t// Check if we are in the last group or in any other.\n\t\t\tif ( this.currentSlideIndex + this.step - 1 >= totalSlides ) {\n\t\t\t\tcurrentGroup = totalPossibleGroups;\n\t\t\t} else {\n\t\t\t\tcurrentGroup = Math.ceil( this.currentSlideIndex / this.step );\n\t\t\t}\n\n\t\t\t// Update previous slide number based on which group we are in.\n\t\t\tif ( currentGroup === totalPossibleGroups ) {\n\t\t\t\tpreviousSlideNumber = this.currentSlideIndex - this.step + 1;\n\t\t\t} else {\n\t\t\t\tpreviousSlideNumber = this.currentSlideIndex - this.step;\n\t\t\t}\n\t\t} else {\n\t\t\t// Check if we are in the last group.\n\t\t\tpreviousSlideNumber = this.currentSlideIndex - this.step;\n\t\t}\n\n\t\t// Check if the previous slide step is not taking it beyond the first slide.\n\t\tif ( previousSlideNumber > 1 ) {\n\t\t\tthis.setCurrentSlide( previousSlideNumber );\n\t\t} else {\n\t\t\tthis.setCurrentSlide( 1 );\n\t\t}\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\t// Get current slide index.\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\t// Check if slide index is valid.\n\t\tif ( index > this.getTotalSlides() || index <= 0 ) {\n\t\t\t// Stop! It's not valid.\n\t\t\treturn;\n\t\t}\n\n\t\t// dispatch slide-set event.\n\t\tthis.dispatchEvent( new CustomEvent( 'slide-set', {\n\t\t\tbubbles: true,\n\t\t\tdetail: {\n\t\t\t\tslideIndex: index,\n\t\t\t},\n\t\t} ) );\n\n\t\t// Set current slide index.\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\t// Yes, it is. So stop.\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 | undefined = this.getSlideElements();\n\n\t\t// Check if we have slide container and slides.\n\t\tif ( ! slidesContainer || ! slides ) {\n\t\t\t// No, we don't. Either one of them or both are missing. So stop.\n\t\t\treturn;\n\t\t}\n\n\t\t// First, update the height.\n\n\t\t// Yield to main thread to fix a bug in Safari 16.\n\t\tsetTimeout( () => this.updateHeight(), 0 );\n\n\t\t// Now lets slide!\n\t\tconst behaviour: string = this.getAttribute( 'behaviour' ) || '';\n\n\t\t// Check if behaviour is set to fade and slide on the current slide index is present in the slides array.\n\t\tif ( 'fade' !== behaviour && slides[ this.currentSlideIndex - 1 ] ) {\n\t\t\t// Yes, it is. So slide to the current slide.\n\t\t\tslidesContainer.style.left = `-${ slides[ this.currentSlideIndex - 1 ].offsetLeft }px`;\n\t\t}\n\t}\n\n\t/**\n\t * Get the arrow element by selector.\n\t *\n\t * In case of nested sliders, it difficult to find the correct arrow\n\t * because arrows can be placed anywhere.\n\t * This function checks if the parent tp-slider belongs to this component,\n\t * then return that arrow element, using 'this'.\n\t *\n\t * @param {string} selector Selector.\n\t */\n\tgetArrow( selector: string ) {\n\t\t// Get all arrows.\n\t\tconst arrows: NodeListOf<TPSliderArrowElement> | null = this.querySelectorAll( selector );\n\t\tconst parentSliderElement: TPSliderElement = this;\n\t\tlet theArrow: TPSliderArrowElement | null = this.querySelector( selector );\n\n\t\t// Loop through all the arrows including the one's inside nested slider.\n\t\tarrows.forEach( ( arrow ) => {\n\t\t\t/**\n\t\t\t * If the closest tp-slider is the same as the parentSliderElement, that means we have found\n\t\t\t * the correct arrow.\n\t\t\t */\n\t\t\tif ( parentSliderElement === arrow.closest( 'tp-slider' ) ) {\n\t\t\t\ttheArrow = arrow;\n\t\t\t}\n\t\t} );\n\n\t\t// Return arrow.\n\t\treturn theArrow;\n\t}\n\n\t/**\n\t * Update stuff when any attribute has changed.\n\t * Example: Update sub-components.\n\t */\n\tasync update(): Promise<void> {\n\t\t// Get sub-components.\n\t\tconst sliderNav: TPSliderNavElement | null = this.querySelector( 'tp-slider-nav' );\n\t\tconst sliderCounts: NodeListOf<TPSliderCountElement> | null = this.querySelectorAll( 'tp-slider-count' );\n\t\tconst leftArrow: TPSliderArrowElement | null = this.getArrow( 'tp-slider-arrow[direction=\"previous\"]' );\n\t\tconst rightArrow: TPSliderArrowElement | null = this.getArrow( 'tp-slider-arrow[direction=\"next\"]' );\n\n\t\t// Wait for initialization - done to avoid updateNavItems undefined error.\n\t\tawait customElements.whenDefined( 'tp-slider-nav' );\n\t\tawait customElements.whenDefined( 'tp-slider-nav-item' );\n\t\tawait customElements.whenDefined( 'tp-slider-count' );\n\t\tawait customElements.whenDefined( 'tp-slider-arrow' );\n\n\t\t// Total slides variable and Total possible group.\n\t\tconst totalSlides: number = this.getTotalSlides();\n\t\tconst totalPossibleGroups: number = Math.ceil( totalSlides / this.step );\n\n\t\t// Set active slide.\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = this.getSlideElements();\n\n\t\t// Check if slides are available.\n\t\tif ( slides ) {\n\t\t\tslides.forEach( ( slide: TPSliderSlideElement, index: number ): void => {\n\t\t\t\t// Update active attribute.\n\t\t\t\tif ( this.currentSlideIndex - 1 === index ) {\n\t\t\t\t\tslide.setAttribute( 'active', 'yes' );\n\t\t\t\t} else {\n\t\t\t\t\tslide.removeAttribute( 'active' );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\t// First, set the template for the slider nav.\n\t\tsliderNav?.updateNavItems();\n\n\t\t// Once the template has been set, query the slider nav items.\n\t\tconst sliderNavItems: NodeListOf<TPSliderNavItemElement> | null = this.querySelectorAll( 'tp-slider-nav-item' );\n\n\t\t// Set current slider nav item.\n\t\tif ( sliderNavItems ) {\n\t\t\t// Add current attribute.\n\t\t\tsliderNavItems.forEach( ( navItem: TPSliderNavItemElement, index: number, allItems: NodeListOf<TPSliderNavItemElement> ): void => {\n\t\t\t\t// Remove current attribute.\n\t\t\t\tnavItem.removeAttribute( 'current' );\n\n\t\t\t\t// Get Round of Index.\n\t\t\t\tconst groupIndex = Math.round( ( this.currentSlideIndex - 1 ) / this.step );\n\n\t\t\t\t// Check if index and groups are equal to update active dot.\n\t\t\t\tif ( groupIndex === index ) {\n\t\t\t\t\tnavItem.setAttribute( 'current', 'yes' );\n\t\t\t\t} else if ( ( index === totalPossibleGroups - 1 && this.currentSlideIndex + this.step - 1 >= totalSlides ) ) {\n\t\t\t\t\tnavItem.setAttribute( 'current', 'yes' );\n\n\t\t\t\t\t// Remove current index from last 2nd item.\n\t\t\t\t\tallItems[ index - 1 ]?.removeAttribute( 'current' );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\t// Update slider count.\n\t\tif ( sliderCounts ) {\n\t\t\t// Set total attribute.\n\t\t\tthis.setAttribute( 'total', this.getTotalSlides().toString() );\n\n\t\t\t// Update slider counts.\n\t\t\tsliderCounts.forEach( ( slideCount: TPSliderCountElement ) => {\n\t\t\t\t// Check if the slideCount.update is a function.\n\t\t\t\tif ( 'function' === typeof slideCount.update ) {\n\t\t\t\t\t// Update slide count.\n\t\t\t\t\tslideCount.update();\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\t// Enable / disable arrows.\n\t\tif ( 'yes' !== this.getAttribute( 'infinite' ) ) {\n\t\t\t// For the last slide.\n\t\t\tif ( this.getCurrentSlide() === this.getTotalSlides() - this.perView + 1 ) {\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\t// For the first slide.\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\n\t\t// Check if slides container is available.\n\t\tif ( ! slidesContainer ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Bail early if we don't want it to be flexible height - as long as it doesn't fade.\n\t\tif ( 'yes' !== this.getAttribute( 'flexible-height' ) && 'fade' !== this.getAttribute( 'behaviour' ) ) {\n\t\t\t// Remove height property for good measure!\n\t\t\tslidesContainer.style.removeProperty( 'height' );\n\n\t\t\t// Bail early.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get slides.\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = this.getSlideElements();\n\n\t\t// Check if slides are available.\n\t\tif ( ! slides ) {\n\t\t\t// No slides to resize.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if we have a flexible height.\n\t\tif ( 'yes' === this.getAttribute( 'flexible-height' ) ) {\n\t\t\t// Check if per-view is greater than 1.\n\t\t\tif ( this.perView > 1 ) {\n\t\t\t\tconst currentIndex: number = this.currentSlideIndex - 1;\n\t\t\t\tconst slidesOnCurrentView: number = currentIndex + this.perView;\n\t\t\t\tlet maxHeight: number = 0;\n\n\t\t\t\t// Traverse all slides in the current view and add their height to the array.\n\t\t\t\tfor ( let i: number = currentIndex; i < slidesOnCurrentView; i++ ) {\n\t\t\t\t\t// Check if the slide exists.\n\t\t\t\t\tif ( slides[ i ].scrollHeight > maxHeight ) {\n\t\t\t\t\t\tmaxHeight = slides[ i ].scrollHeight;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Set the height of the container to be the max height of the slides in the current view.\n\t\t\t\tslidesContainer.style.height = `${ maxHeight }px`;\n\t\t\t} else {\n\t\t\t\t// Set the height of the container to be the height of the current slide.\n\t\t\t\tconst height: number = slides[ this.currentSlideIndex - 1 ].scrollHeight;\n\t\t\t\tslidesContainer.style.height = `${ height }px`;\n\t\t\t}\n\t\t} else {\n\t\t\t// Set the height of the container to be the height of the tallest slide.\n\t\t\tlet height: number = 0;\n\n\t\t\t// Traverse all slides and add their height to the array.\n\t\t\tslides.forEach( ( slide: TPSliderSlideElement ): void => {\n\t\t\t\t// Set the height of the container to be the height of the tallest slide.\n\t\t\t\tif ( slide.scrollHeight > height ) {\n\t\t\t\t\theight = slide.scrollHeight;\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\t// Set the height of the container to be the height of the tallest slide.\n\t\t\tslidesContainer.style.height = `${ height }px`;\n\t\t}\n\t}\n\n\t/**\n\t * Resize the slider when the window is resized.\n\t *\n\t * @protected\n\t */\n\thandleResize(): void {\n\t\t// Update responsive settings. We are using setTimeout for INP( Interaction for Next Paint ).\n\t\tsetTimeout( () => {\n\t\t\t// Update attributes responsive settings.\n\t\t\tthis.updateAttributesResponsively();\n\t\t}, 0 );\n\n\t\t// Check if we're already resizing.\n\t\tif ( this.getAttribute( 'resizing' ) ) {\n\t\t\t// Yes we are, early return.\n\t\t\treturn;\n\t\t}\n\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\tthis.removeAttribute( 'resizing' );\n\t}\n\n\t/**\n\t * Update attributes responsive settings.\n\t */\n\tupdateAttributesResponsively(): void {\n\t\t// Check if responsiveSettings exist.\n\t\tif ( ! this.responsiveSettings.length ) {\n\t\t\t// Early Return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Step 2: First remove all the allowed responsive keys.\n\t\tthis.allowedResponsiveKeys.forEach( ( key: string ) => {\n\t\t\t// Remove.\n\t\t\tthis.removeAttribute( key );\n\t\t} );\n\n\t\t// Step 3: Loop through responsiveSettings and check if the media query is matched.\n\t\tthis.responsiveSettings.every( ( settings: { [ key: string ]: any } ) => {\n\t\t\t// Check if media query is matched.\n\t\t\tif ( window.matchMedia( settings.media ).matches ) {\n\t\t\t\t// If yes, loop through the settings at this media breakpoint.\n\t\t\t\tfor ( const settingKey in settings ) {\n\t\t\t\t\t// Check if the setting key is not media.\n\t\t\t\t\tif ( 'media' !== settingKey && this.allowedResponsiveKeys.includes( settingKey ) ) {\n\t\t\t\t\t\t// Set those keys as attributes.\n\t\t\t\t\t\tthis.setAttribute( settingKey, settings[ settingKey ] );\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Return false to break out of the loop.\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\t// Return true so that the loop continues, if it does not break above.\n\t\t\treturn true;\n\t\t} );\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\t// initialize touch start coordinates\n\t\tif ( 'yes' === this.getAttribute( 'swipe' ) ) {\n\t\t\tthis.touchStartX = e.touches[ 0 ].clientX;\n\t\t\tthis.touchStartY = e.touches[ 0 ].clientY;\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\t// Early return if swipe is not enabled.\n\t\tif ( 'yes' !== this.getAttribute( 'swipe' ) ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Calculate the horizontal and vertical distance moved.\n\t\tconst touchEndX: number = e.changedTouches[ 0 ].clientX;\n\t\tconst touchEndY: number = e.changedTouches[ 0 ].clientY;\n\t\tconst swipeDistanceX: number = touchEndX - this.touchStartX;\n\t\tconst swipeDistanceY: number = touchEndY - this.touchStartY;\n\n\t\t// Determine if the swipe is predominantly horizontal or vertical.\n\t\tconst isHorizontalSwipe: boolean = Math.abs( swipeDistanceX ) > Math.abs( swipeDistanceY );\n\n\t\t// If it's not horizontal swipe, return\n\t\tif ( ! isHorizontalSwipe ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if it's a right or left swipe.\n\t\tif ( swipeDistanceX > 0 ) {\n\t\t\t// Right-Swipe: Check if horizontal swipe distance is less than the threshold.\n\t\t\tif ( swipeDistanceX < this.swipeThreshold ) {\n\t\t\t\tthis.previous();\n\t\t\t}\n\t\t} else if ( swipeDistanceX < 0 ) {\n\t\t\t// Left-Swipe: Check if horizontal swipe distance is less than the threshold.\n\t\t\tif ( swipeDistanceX > -this.swipeThreshold ) {\n\t\t\t\tthis.next();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Auto slide.\n\t */\n\tprotected autoSlide(): void {\n\t\t// Auto Slide.\n\t\tconst autoSlideInterval: string | null = this.getAttribute( 'auto-slide-interval' );\n\n\t\t// Check if we have an auto slider interval.\n\t\tif ( ! autoSlideInterval ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check for a valid interval.\n\t\tconst interval: number = parseInt( autoSlideInterval );\n\n\t\t// Check if interval is valid.\n\t\tif ( interval <= 0 ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Run this on a timeout, rather than interval, so the interval can be controlled after the component is initialized.\n\t\tsetTimeout( (): void => {\n\t\t\t// Run the next slide.\n\t\t\tthis.next();\n\t\t\tthis.autoSlide();\n\t\t\tthis.dispatchEvent( new CustomEvent( 'auto-slide-complete' ) );\n\t\t}, interval );\n\t}\n}\n","/**\n * TP Slider Track.\n */\nexport class TPSliderTrackElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPSliderElement } from './tp-slider';\n\n/**\n * TP Slider Slides.\n */\nexport class TPSliderSlidesElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Resize observer.\n\t\tif ( 'ResizeObserver' in window ) {\n\t\t\tnew ResizeObserver( this.handleHeightChange.bind( this ) ).observe( this );\n\t\t}\n\t}\n\n\t/**\n\t * Handle slide height change.\n\t */\n\tprotected handleHeightChange(): void {\n\t\t// Get the parent tp-slider element.\n\t\tconst slider: TPSliderElement | null = this.closest( 'tp-slider' );\n\n\t\t// Bail if not found.\n\t\tif ( ! slider ) {\n\t\t\t// Bail early if not found.\n\t\t\treturn;\n\t\t}\n\n\t\t/**\n\t\t * Yield to main thread to avoid observation errors.\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#observation_errors\n\t\t */\n\t\tsetTimeout( (): void => {\n\t\t\t// Handle resize.\n\t\t\tslider.handleResize();\n\t\t}, 0 );\n\t}\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 * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Get the button and add event listener.\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\t// If disabled, do nothing.\n\t\tif ( 'yes' === this.getAttribute( 'disabled' ) ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get the slider.\n\t\tconst slider: TPSliderElement | null = this.closest( 'tp-slider' );\n\n\t\t// If no slider, early return.\n\t\tif ( ! slider ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Initiate slider according to the direction of the button clicked.\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 * Internal dependencies.\n */\nimport { TPSliderElement } from './tp-slider';\n\n/**\n * TP Slider Nav.\n */\nexport class TPSliderNavElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected template: HTMLTemplateElement | null = null;\n\tprotected slider: TPSliderElement | null = null;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Get elements.\n\t\tthis.template = this.querySelector( 'template' );\n\t\tthis.slider = this.closest( 'tp-slider' );\n\t}\n\n\t/**\n\t * Update nav items based on template.\n\t */\n\tpublic updateNavItems(): void {\n\t\t// Bail if no template.\n\t\tif ( ! this.template || ! this.slider ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Total slides.\n\t\tconst totalSlides: number = this.slider?.getTotalSlides();\n\n\t\t// Initialise the total number of navigation items.\n\t\tconst totalNavItems: number = Math.ceil( ( totalSlides - this.slider?.perView ) / this.slider?.step ) + 1;\n\n\t\t// Clear the navigation.\n\t\tthis.innerHTML = '';\n\n\t\t// Append the navigation items.\n\t\tfor ( let i = 1; i <= totalNavItems; i++ ) {\n\t\t\t// Clone the template.\n\t\t\tconst navItem: Node = this.template.content.cloneNode( true );\n\t\t\tconst div: HTMLDivElement = document.createElement( 'div' );\n\t\t\tdiv.appendChild( navItem );\n\n\t\t\t// Append the navigation item.\n\t\t\tthis.innerHTML += div.innerHTML.replace( '$index', i.toString() );\n\t\t}\n\t}\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 * Properties.\n\t */\n\tprotected slider : TPSliderElement | null;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\t\tthis.slider = this.closest( 'tp-slider' );\n\n\t\t// Get the nav-item button.\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\t// Check if slider exists.\n\t\tif ( ! this.slider ) {\n\t\t\t// No its not! Terminate.\n\t\t\treturn;\n\t\t}\n\n\t\t// Set current slide.\n\t\tthis.slider.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\t// Check if we have an index.\n\t\tif ( this.getAttribute( 'index' ) ) {\n\t\t\t// Yes, return it.\n\t\t\treturn parseInt( this.getAttribute( 'index' ) ?? '0' );\n\t\t}\n\n\t\t// Initialize variables.\n\t\tconst slideNav: TPSliderNavElement | null = this.closest( 'tp-slider-nav' );\n\t\tconst step = this.slider?.step ?? 1;\n\t\tconst perView = this.slider?.perView ?? 1;\n\t\tconst totalSlides = this.slider?.getTotalSlides() ?? 1;\n\t\tconst index = Array.from( slideNav?.children ?? [] ).indexOf( this );\n\n\t\t// Find posible position of the slide.\n\t\tconst lastItem = ( totalSlides - perView ) + 1;\n\t\tconst targetSlide = ( index * step ) + 1;\n\n\t\t// Get the new slide number.\n\t\tconst currentSlideIndex = Math.min( lastItem, targetSlide );\n\n\t\t// return the index.\n\t\treturn currentSlideIndex;\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPSliderElement } from './tp-slider';\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\t// Attributes observed by this component.\n\t\treturn [ '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\t// Get the 'format' attribute value.\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\t// Set the 'format' attribute value.\n\t\tthis.setAttribute( 'format', format );\n\t}\n\n\t/**\n\t * Attribute changed callback.\n\t */\n\tattributeChangedCallback(): void {\n\t\t// On change of format attribute, update the component.\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Update component.\n\t */\n\tupdate(): void {\n\t\t// Get slider.\n\t\tconst slider: TPSliderElement | null = this.closest( 'tp-slider' );\n\n\t\t// Check if slider exists.\n\t\tif ( ! slider ) {\n\t\t\t// No its not! Terminate.\n\t\t\treturn;\n\t\t}\n\n\t\t// Initializing current variable including per view. Along with initializing total variable.\n\t\tconst current: number = Math.min( slider.currentSlideIndex - 1 + slider.perView, slider.getTotalSlides() );\n\t\tconst total: string = slider.getAttribute( 'total' ) ?? '';\n\n\t\t// Updating variables in format attribute.\n\t\tthis.innerHTML =\n\t\t\tthis.format\n\t\t\t\t.replace( '$current', current.toString() )\n\t\t\t\t.replace( '$total', total || '' );\n\n\t\t// Updating current and total attributes.\n\t\tthis.setAttribute( 'current', current.toString() );\n\t\tthis.setAttribute( 'total', total || '' );\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPSliderElement } from './tp-slider';\nimport { TPSliderTrackElement } from './tp-slider-track';\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-nav', TPSliderNavElement );\ncustomElements.define( 'tp-slider', TPSliderElement );\ncustomElements.define( 'tp-slider-count', TPSliderCountElement );\ncustomElements.define( 'tp-slider-track', TPSliderTrackElement );\ncustomElements.define( 'tp-slider-slides', TPSliderSlidesElement );\ncustomElements.define( 'tp-slider-slide', TPSliderSlideElement );\ncustomElements.define( 'tp-slider-arrow', TPSliderArrowElement );\ncustomElements.define( 'tp-slider-nav-item', TPSliderNavItemElement );\n"],"names":["TPSliderElement","HTMLElement","constructor","super","touchStartX","touchStartY","swipeThreshold","allowedResponsiveKeys","this","getAttribute","setAttribute","Number","slide","autoSlide","responsiveSettingsJSON","responsiveSettings","JSON","parse","window","addEventListener","handleResize","bind","document","fonts","ready","then","handleTouchStart","passive","handleTouchEnd","connectedCallback","update","observedAttributes","attributeChangedCallback","name","oldValue","newValue","dispatchEvent","CustomEvent","bubbles","currentSlideIndex","parseInt","index","setCurrentSlide","step","toString","perView","getTotalSlides","slides","getSlideElements","length","slidesElement","querySelector","querySelectorAll","next","totalSlides","nextSlideIndex","Math","min","previous","totalPossibleGroups","ceil","previousSlideNumber","round","currentGroup","getCurrentSlide","detail","slideIndex","slidesContainer","setTimeout","updateHeight","style","left","offsetLeft","getArrow","selector","arrows","parentSliderElement","theArrow","forEach","arrow","closest","sliderNav","sliderCounts","leftArrow","rightArrow","customElements","whenDefined","removeAttribute","updateNavItems","sliderNavItems","navItem","allItems","slideCount","removeProperty","currentIndex","slidesOnCurrentView","maxHeight","i","scrollHeight","height","updateAttributesResponsively","key","every","settings","matchMedia","media","matches","settingKey","includes","e","touches","clientX","clientY","touchEndX","changedTouches","touchEndY","swipeDistanceX","swipeDistanceY","abs","autoSlideInterval","interval","TPSliderTrackElement","TPSliderSlidesElement","ResizeObserver","handleHeightChange","observe","slider","TPSliderSlideElement","TPSliderArrowElement","handleClick","TPSliderNavElement","template","totalNavItems","innerHTML","content","cloneNode","div","createElement","appendChild","replace","TPSliderNavItemElement","getIndex","slideNav","lastItem","targetSlide","Array","from","children","indexOf","TPSliderCountElement","format","current","total","define"],"sourceRoot":""}
+{"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-track.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 { TPSliderNavElement } from './tp-slider-nav';\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\tprotected touchStartY: number = 0;\n\tprotected swipeThreshold: number = 200;\n\tprotected responsiveSettings: { [ key: string ]: any };\n\tprotected allowedResponsiveKeys: string[] = [\n\t\t'flexible-height',\n\t\t'infinite',\n\t\t'swipe',\n\t\t'behaviour',\n\t\t'auto-slide-interval',\n\t\t'per-view',\n\t\t'step',\n\t\t'responsive',\n\t];\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\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// Threshold Setting.\n\t\tthis.swipeThreshold = Number( this?.getAttribute( 'swipe-threshold' ) ?? '200' );\n\n\t\t// Initialize slider.\n\t\tthis.slide();\n\t\tthis.autoSlide();\n\t\tthis.setAttribute( 'initialized', 'yes' );\n\n\t\t// Responsive Settings.\n\t\tconst responsiveSettingsJSON: string = this.getAttribute( 'responsive' ) || '';\n\t\tthis.responsiveSettings = responsiveSettingsJSON ? JSON.parse( responsiveSettingsJSON ) : [];\n\n\t\t// Event listeners.\n\t\tif ( ! ( 'ResizeObserver' in window ) ) {\n\t\t\t/**\n\t\t\t * We set the resize observer in `tp-slider-slides`\n\t\t\t * because These are just fallbacks for browsers that don't support ResizeObserver.\n\t\t\t */\n\n\t\t\t// @ts-ignore\n\t\t\twindow.addEventListener( 'resize', this.handleResize.bind( this ) );\n\t\t\tdocument.fonts.ready.then( () => this.handleResize() );\n\t\t}\n\n\t\t// Touch listeners.\n\t\tthis.addEventListener( 'touchstart', this.handleTouchStart.bind( this ), { passive: true } );\n\t\tthis.addEventListener( 'touchend', this.handleTouchEnd.bind( this ) );\n\n\t\t// Keyboard listener for arrow key navigation.\n\t\tthis.addEventListener( 'keydown', this.handleKeyDown.bind( this ) );\n\t}\n\n\t/**\n\t * Handle keydown events for arrow key navigation.\n\t *\n\t * @param {KeyboardEvent} e Keyboard event.\n\t */\n\tprotected handleKeyDown( e: KeyboardEvent ): void {\n\t\t// Only handle if arrow-navigation is enabled (disabled by default).\n\t\tif ( 'yes' !== this.getAttribute( 'arrow-navigation' ) ) {\n\t\t\t// Bail early.\n\t\t\treturn;\n\t\t}\n\n\t\t// Only handle arrow keys.\n\t\tif ( 'ArrowLeft' !== e.key && 'ArrowRight' !== e.key ) {\n\t\t\t// Bail early.\n\t\t\treturn;\n\t\t}\n\n\t\t// Prevent default scrolling behavior.\n\t\te.preventDefault();\n\n\t\t// Navigate based on arrow direction.\n\t\tif ( 'ArrowLeft' === e.key ) {\n\t\t\tthis.previous();\n\t\t} else if ( 'ArrowRight' === e.key ) {\n\t\t\tthis.next();\n\t\t}\n\t}\n\n\t/**\n\t * Connected callback.\n\t */\n\tconnectedCallback() {\n\t\t/**\n\t\t * Update on initial render.\n\t\t *\n\t\t * This is so that the disabled values of the navigation arrows\n\t\t * can be set because attributeChangedCallback does not get fired when\n\t\t * no attributes are passed to the slider.\n\t\t */\n\t\tthis.update();\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\t// Observed attributes.\n\t\treturn [ 'current-slide', 'flexible-height', 'infinite', 'swipe', 'per-view', 'step' ];\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\t// Keep an eye on current slide.\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\t// Update the component after the attribute change.\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\t// To get the current slide index.\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\t// Set the current slide index.\n\t\tthis.setCurrentSlide( index );\n\t}\n\n\t/**\n\t * Get current step.\n\t *\n\t * @return {number} Current step.\n\t */\n\tget step(): number {\n\t\t// To get the current step.\n\t\treturn parseInt( this.getAttribute( 'step' ) ?? '1' );\n\t}\n\n\t/**\n\t * Set current step.\n\t *\n\t * @param {number} step Step.\n\t */\n\tset step( step: number ) {\n\t\t// Set the current step.\n\t\tthis.setAttribute( 'step', step.toString() );\n\t}\n\n\t/**\n\t * Get per view.\n\t *\n\t * @return {number} Current step.\n\t */\n\tget perView(): number {\n\t\t// To get number of slides per view.\n\t\treturn parseInt( this.getAttribute( 'per-view' ) ?? '1' );\n\t}\n\n\t/**\n\t * Set per view.\n\t *\n\t * @param {number} perView Per view.\n\t */\n\tset perView( perView: number ) {\n\t\t// Set the number of slides per view.\n\t\tthis.setAttribute( 'per-view', perView.toString() );\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\t// To get the total number of slides.\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = this.getSlideElements();\n\n\t\t// Check if slides are available.\n\t\tif ( slides ) {\n\t\t\t// Tell the total number of slides.\n\t\t\treturn slides.length;\n\t\t}\n\n\t\t// Else return 0.\n\t\treturn 0;\n\t}\n\n\t/**\n\t * Get Slide Elements.\n\t */\n\tgetSlideElements() {\n\t\t// Get slides.\n\t\tconst slidesElement: TPSliderSlidesElement | null = this.querySelector( 'tp-slider-slides' );\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = slidesElement?.querySelectorAll( ':scope > tp-slider-slide' );\n\n\t\t// Return array of slides.\n\t\treturn slides;\n\t}\n\n\t/**\n\t * Navigate to the next slide.\n\t */\n\tnext(): void {\n\t\t// Initialize total slides variable.\n\t\tconst totalSlides: number = this.getTotalSlides();\n\n\t\t// Check if we are at the last slide considering per view attribute.\n\t\tif ( this.currentSlideIndex >= totalSlides - this.perView + 1 ) {\n\t\t\t// Check if we are in infinite mode.\n\t\t\tif ( 'yes' === this.getAttribute( 'infinite' ) ) {\n\t\t\t\t// Yes, we are, and go back to first slide.\n\t\t\t\tthis.setCurrentSlide( 1 );\n\t\t\t}\n\n\t\t\t// Terminate.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get next slide index by adding minimum of step or remaining number of slides.\n\t\tconst nextSlideIndex: number = Math.min( this.currentSlideIndex + this.step, totalSlides - this.perView + 1 );\n\n\t\t// Check if the next slide step is not taking it beyond the last slide.\n\t\tif ( nextSlideIndex > ( totalSlides - this.perView + 1 ) ) {\n\t\t\t// Yes, it is.\n\t\t\treturn;\n\t\t}\n\n\t\t// Everything is good, go to next slide.\n\t\tthis.setCurrentSlide( nextSlideIndex );\n\t}\n\n\t/**\n\t * Navigate to the previous slide.\n\t */\n\tprevious(): void {\n\t\t// Check if we are at the first slide.\n\t\tif ( this.currentSlideIndex <= 1 ) {\n\t\t\t// Check if we are in infinite mode.\n\t\t\tif ( 'yes' === this.getAttribute( 'infinite' ) ) {\n\t\t\t\tthis.setCurrentSlide( this.getTotalSlides() - this.perView + 1 );\n\t\t\t}\n\n\t\t\t// Terminate.\n\t\t\treturn;\n\t\t}\n\n\t\t// Initialize total slides variable.\n\t\tconst totalSlides: number = this.getTotalSlides();\n\n\t\t// Total Possible groups.\n\t\tconst totalPossibleGroups: number = Math.ceil( totalSlides / this.step );\n\n\t\t// Initialize previous slide number.\n\t\tlet previousSlideNumber: number = 0;\n\n\t\t// Checking if total slides are not divisible by step.\n\t\tif ( totalSlides / this.step !== Math.round( totalSlides / this.step ) ) {\n\t\t\t// Initialize current group.\n\t\t\tlet currentGroup: number;\n\n\t\t\t// Check if we are in the last group or in any other.\n\t\t\tif ( this.currentSlideIndex + this.step - 1 >= totalSlides ) {\n\t\t\t\tcurrentGroup = totalPossibleGroups;\n\t\t\t} else {\n\t\t\t\tcurrentGroup = Math.ceil( this.currentSlideIndex / this.step );\n\t\t\t}\n\n\t\t\t// Update previous slide number based on which group we are in.\n\t\t\tif ( currentGroup === totalPossibleGroups ) {\n\t\t\t\tpreviousSlideNumber = this.currentSlideIndex - this.step + 1;\n\t\t\t} else {\n\t\t\t\tpreviousSlideNumber = this.currentSlideIndex - this.step;\n\t\t\t}\n\t\t} else {\n\t\t\t// Check if we are in the last group.\n\t\t\tpreviousSlideNumber = this.currentSlideIndex - this.step;\n\t\t}\n\n\t\t// Check if the previous slide step is not taking it beyond the first slide.\n\t\tif ( previousSlideNumber > 1 ) {\n\t\t\tthis.setCurrentSlide( previousSlideNumber );\n\t\t} else {\n\t\t\tthis.setCurrentSlide( 1 );\n\t\t}\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\t// Get current slide index.\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\t// Check if slide index is valid.\n\t\tif ( index > this.getTotalSlides() || index <= 0 ) {\n\t\t\t// Stop! It's not valid.\n\t\t\treturn;\n\t\t}\n\n\t\t// dispatch slide-set event.\n\t\tthis.dispatchEvent( new CustomEvent( 'slide-set', {\n\t\t\tbubbles: true,\n\t\t\tdetail: {\n\t\t\t\tslideIndex: index,\n\t\t\t},\n\t\t} ) );\n\n\t\t// Set current slide index.\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\t// Yes, it is. So stop.\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 | undefined = this.getSlideElements();\n\n\t\t// Check if we have slide container and slides.\n\t\tif ( ! slidesContainer || ! slides ) {\n\t\t\t// No, we don't. Either one of them or both are missing. So stop.\n\t\t\treturn;\n\t\t}\n\n\t\t// First, update the height.\n\n\t\t// Yield to main thread to fix a bug in Safari 16.\n\t\tsetTimeout( () => this.updateHeight(), 0 );\n\n\t\t// Now lets slide!\n\t\tconst behaviour: string = this.getAttribute( 'behaviour' ) || '';\n\n\t\t// Check if behaviour is set to fade and slide on the current slide index is present in the slides array.\n\t\tif ( 'fade' !== behaviour && slides[ this.currentSlideIndex - 1 ] ) {\n\t\t\t// Yes, it is. So slide to the current slide.\n\t\t\tslidesContainer.style.left = `-${ slides[ this.currentSlideIndex - 1 ].offsetLeft }px`;\n\t\t}\n\t}\n\n\t/**\n\t * Get the arrow element by selector.\n\t *\n\t * In case of nested sliders, it difficult to find the correct arrow\n\t * because arrows can be placed anywhere.\n\t * This function checks if the parent tp-slider belongs to this component,\n\t * then return that arrow element, using 'this'.\n\t *\n\t * @param {string} selector Selector.\n\t */\n\tgetArrow( selector: string ) {\n\t\t// Get all arrows.\n\t\tconst arrows: NodeListOf<TPSliderArrowElement> | null = this.querySelectorAll( selector );\n\t\tconst parentSliderElement: TPSliderElement = this;\n\t\tlet theArrow: TPSliderArrowElement | null = this.querySelector( selector );\n\n\t\t// Loop through all the arrows including the one's inside nested slider.\n\t\tarrows.forEach( ( arrow ) => {\n\t\t\t/**\n\t\t\t * If the closest tp-slider is the same as the parentSliderElement, that means we have found\n\t\t\t * the correct arrow.\n\t\t\t */\n\t\t\tif ( parentSliderElement === arrow.closest( 'tp-slider' ) ) {\n\t\t\t\ttheArrow = arrow;\n\t\t\t}\n\t\t} );\n\n\t\t// Return arrow.\n\t\treturn theArrow;\n\t}\n\n\t/**\n\t * Update stuff when any attribute has changed.\n\t * Example: Update sub-components.\n\t */\n\tasync update(): Promise<void> {\n\t\t// Get sub-components.\n\t\tconst sliderNav: TPSliderNavElement | null = this.querySelector( 'tp-slider-nav' );\n\t\tconst sliderCounts: NodeListOf<TPSliderCountElement> | null = this.querySelectorAll( 'tp-slider-count' );\n\t\tconst leftArrow: TPSliderArrowElement | null = this.getArrow( 'tp-slider-arrow[direction=\"previous\"]' );\n\t\tconst rightArrow: TPSliderArrowElement | null = this.getArrow( 'tp-slider-arrow[direction=\"next\"]' );\n\n\t\t// Wait for initialization - done to avoid updateNavItems undefined error.\n\t\tawait customElements.whenDefined( 'tp-slider-nav' );\n\t\tawait customElements.whenDefined( 'tp-slider-nav-item' );\n\t\tawait customElements.whenDefined( 'tp-slider-count' );\n\t\tawait customElements.whenDefined( 'tp-slider-arrow' );\n\n\t\t// Total slides variable and Total possible group.\n\t\tconst totalSlides: number = this.getTotalSlides();\n\t\tconst totalPossibleGroups: number = Math.ceil( totalSlides / this.step );\n\n\t\t// Set active slide.\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = this.getSlideElements();\n\n\t\t// Check if slides are available.\n\t\tif ( slides ) {\n\t\t\t// Check if aria management is enabled (default: yes).\n\t\t\tconst manageAria = 'no' !== this.getAttribute( 'aria' );\n\n\t\t\t// Calculate visible slide range (0-indexed).\n\t\t\tconst firstVisibleIndex = this.currentSlideIndex - 1;\n\t\t\tconst lastVisibleIndex = firstVisibleIndex + this.perView - 1;\n\n\t\t\t// Traverse slides.\n\t\t\tslides.forEach( ( slide: TPSliderSlideElement, index: number ): void => {\n\t\t\t\t// Update active attribute.\n\t\t\t\tif ( this.currentSlideIndex - 1 === index ) {\n\t\t\t\t\tslide.setAttribute( 'active', 'yes' );\n\t\t\t\t} else {\n\t\t\t\t\tslide.removeAttribute( 'active' );\n\t\t\t\t}\n\n\t\t\t\t// Update aria-hidden and inert for non-visible slides.\n\t\t\t\tif ( manageAria ) {\n\t\t\t\t\t// Check index.\n\t\t\t\t\tif ( index >= firstVisibleIndex && index <= lastVisibleIndex ) {\n\t\t\t\t\t\tslide.removeAttribute( 'aria-hidden' );\n\t\t\t\t\t\tslide.removeAttribute( 'inert' );\n\t\t\t\t\t} else {\n\t\t\t\t\t\tslide.setAttribute( 'aria-hidden', 'true' );\n\t\t\t\t\t\tslide.setAttribute( 'inert', '' );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\t// First, set the template for the slider nav.\n\t\tsliderNav?.updateNavItems();\n\n\t\t// Once the template has been set, query the slider nav items.\n\t\tconst sliderNavItems: NodeListOf<TPSliderNavItemElement> | null = this.querySelectorAll( 'tp-slider-nav-item' );\n\n\t\t// Set current slider nav item.\n\t\tif ( sliderNavItems ) {\n\t\t\t// Add current attribute.\n\t\t\tsliderNavItems.forEach( ( navItem: TPSliderNavItemElement, index: number, allItems: NodeListOf<TPSliderNavItemElement> ): void => {\n\t\t\t\t// Remove current attribute.\n\t\t\t\tnavItem.removeAttribute( 'current' );\n\n\t\t\t\t// Get Round of Index.\n\t\t\t\tconst groupIndex = Math.round( ( this.currentSlideIndex - 1 ) / this.step );\n\n\t\t\t\t// Check if index and groups are equal to update active dot.\n\t\t\t\tif ( groupIndex === index ) {\n\t\t\t\t\tnavItem.setAttribute( 'current', 'yes' );\n\t\t\t\t} else if ( ( index === totalPossibleGroups - 1 && this.currentSlideIndex + this.step - 1 >= totalSlides ) ) {\n\t\t\t\t\tnavItem.setAttribute( 'current', 'yes' );\n\n\t\t\t\t\t// Remove current index from last 2nd item.\n\t\t\t\t\tallItems[ index - 1 ]?.removeAttribute( 'current' );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\t// Update slider count.\n\t\tif ( sliderCounts ) {\n\t\t\t// Set total attribute.\n\t\t\tthis.setAttribute( 'total', this.getTotalSlides().toString() );\n\n\t\t\t// Update slider counts.\n\t\t\tsliderCounts.forEach( ( slideCount: TPSliderCountElement ) => {\n\t\t\t\t// Check if the slideCount.update is a function.\n\t\t\t\tif ( 'function' === typeof slideCount.update ) {\n\t\t\t\t\t// Update slide count.\n\t\t\t\t\tslideCount.update();\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\t// Enable / disable arrows.\n\t\tif ( 'yes' !== this.getAttribute( 'infinite' ) ) {\n\t\t\t// For the last slide.\n\t\t\tif ( this.getCurrentSlide() === this.getTotalSlides() - this.perView + 1 ) {\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\t// For the first slide.\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\n\t\t// Check if slides container is available.\n\t\tif ( ! slidesContainer ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Bail early if we don't want it to be flexible height - as long as it doesn't fade.\n\t\tif ( 'yes' !== this.getAttribute( 'flexible-height' ) && 'fade' !== this.getAttribute( 'behaviour' ) ) {\n\t\t\t// Remove height property for good measure!\n\t\t\tslidesContainer.style.removeProperty( 'height' );\n\n\t\t\t// Bail early.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get slides.\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = this.getSlideElements();\n\n\t\t// Check if slides are available.\n\t\tif ( ! slides ) {\n\t\t\t// No slides to resize.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if we have a flexible height.\n\t\tif ( 'yes' === this.getAttribute( 'flexible-height' ) ) {\n\t\t\t// Check if per-view is greater than 1.\n\t\t\tif ( this.perView > 1 ) {\n\t\t\t\tconst currentIndex: number = this.currentSlideIndex - 1;\n\t\t\t\tconst slidesOnCurrentView: number = currentIndex + this.perView;\n\t\t\t\tlet maxHeight: number = 0;\n\n\t\t\t\t// Traverse all slides in the current view and add their height to the array.\n\t\t\t\tfor ( let i: number = currentIndex; i < slidesOnCurrentView; i++ ) {\n\t\t\t\t\t// Check if the slide exists.\n\t\t\t\t\tif ( slides[ i ].scrollHeight > maxHeight ) {\n\t\t\t\t\t\tmaxHeight = slides[ i ].scrollHeight;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Set the height of the container to be the max height of the slides in the current view.\n\t\t\t\tslidesContainer.style.height = `${ maxHeight }px`;\n\t\t\t} else {\n\t\t\t\t// Set the height of the container to be the height of the current slide.\n\t\t\t\tconst height: number = slides[ this.currentSlideIndex - 1 ].scrollHeight;\n\t\t\t\tslidesContainer.style.height = `${ height }px`;\n\t\t\t}\n\t\t} else {\n\t\t\t// Set the height of the container to be the height of the tallest slide.\n\t\t\tlet height: number = 0;\n\n\t\t\t// Traverse all slides and add their height to the array.\n\t\t\tslides.forEach( ( slide: TPSliderSlideElement ): void => {\n\t\t\t\t// Set the height of the container to be the height of the tallest slide.\n\t\t\t\tif ( slide.scrollHeight > height ) {\n\t\t\t\t\theight = slide.scrollHeight;\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\t// Set the height of the container to be the height of the tallest slide.\n\t\t\tslidesContainer.style.height = `${ height }px`;\n\t\t}\n\t}\n\n\t/**\n\t * Resize the slider when the window is resized.\n\t *\n\t * @protected\n\t */\n\thandleResize(): void {\n\t\t// Update responsive settings. We are using setTimeout for INP( Interaction for Next Paint ).\n\t\tsetTimeout( () => {\n\t\t\t// Update attributes responsive settings.\n\t\t\tthis.updateAttributesResponsively();\n\t\t}, 0 );\n\n\t\t// Check if we're already resizing.\n\t\tif ( this.getAttribute( 'resizing' ) ) {\n\t\t\t// Yes we are, early return.\n\t\t\treturn;\n\t\t}\n\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\tthis.removeAttribute( 'resizing' );\n\t}\n\n\t/**\n\t * Update attributes responsive settings.\n\t */\n\tupdateAttributesResponsively(): void {\n\t\t// Check if responsiveSettings exist.\n\t\tif ( ! this.responsiveSettings.length ) {\n\t\t\t// Early Return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Step 2: First remove all the allowed responsive keys.\n\t\tthis.allowedResponsiveKeys.forEach( ( key: string ) => {\n\t\t\t// Remove.\n\t\t\tthis.removeAttribute( key );\n\t\t} );\n\n\t\t// Step 3: Loop through responsiveSettings and check if the media query is matched.\n\t\tthis.responsiveSettings.every( ( settings: { [ key: string ]: any } ) => {\n\t\t\t// Check if media query is matched.\n\t\t\tif ( window.matchMedia( settings.media ).matches ) {\n\t\t\t\t// If yes, loop through the settings at this media breakpoint.\n\t\t\t\tfor ( const settingKey in settings ) {\n\t\t\t\t\t// Check if the setting key is not media.\n\t\t\t\t\tif ( 'media' !== settingKey && this.allowedResponsiveKeys.includes( settingKey ) ) {\n\t\t\t\t\t\t// Set those keys as attributes.\n\t\t\t\t\t\tthis.setAttribute( settingKey, settings[ settingKey ] );\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Return false to break out of the loop.\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\t// Return true so that the loop continues, if it does not break above.\n\t\t\treturn true;\n\t\t} );\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\t// initialize touch start coordinates\n\t\tif ( 'yes' === this.getAttribute( 'swipe' ) ) {\n\t\t\tthis.touchStartX = e.touches[ 0 ].clientX;\n\t\t\tthis.touchStartY = e.touches[ 0 ].clientY;\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\t// Early return if swipe is not enabled.\n\t\tif ( 'yes' !== this.getAttribute( 'swipe' ) ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Calculate the horizontal and vertical distance moved.\n\t\tconst touchEndX: number = e.changedTouches[ 0 ].clientX;\n\t\tconst touchEndY: number = e.changedTouches[ 0 ].clientY;\n\t\tconst swipeDistanceX: number = touchEndX - this.touchStartX;\n\t\tconst swipeDistanceY: number = touchEndY - this.touchStartY;\n\n\t\t// Determine if the swipe is predominantly horizontal or vertical.\n\t\tconst isHorizontalSwipe: boolean = Math.abs( swipeDistanceX ) > Math.abs( swipeDistanceY );\n\n\t\t// If it's not horizontal swipe, return\n\t\tif ( ! isHorizontalSwipe ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if it's a right or left swipe.\n\t\tif ( swipeDistanceX > 0 ) {\n\t\t\t// Right-Swipe: Check if horizontal swipe distance is less than the threshold.\n\t\t\tif ( swipeDistanceX < this.swipeThreshold ) {\n\t\t\t\tthis.previous();\n\t\t\t}\n\t\t} else if ( swipeDistanceX < 0 ) {\n\t\t\t// Left-Swipe: Check if horizontal swipe distance is less than the threshold.\n\t\t\tif ( swipeDistanceX > -this.swipeThreshold ) {\n\t\t\t\tthis.next();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Auto slide.\n\t */\n\tprotected autoSlide(): void {\n\t\t// Auto Slide.\n\t\tconst autoSlideInterval: string | null = this.getAttribute( 'auto-slide-interval' );\n\n\t\t// Check if we have an auto slider interval.\n\t\tif ( ! autoSlideInterval ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check for a valid interval.\n\t\tconst interval: number = parseInt( autoSlideInterval );\n\n\t\t// Check if interval is valid.\n\t\tif ( interval <= 0 ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Run this on a timeout, rather than interval, so the interval can be controlled after the component is initialized.\n\t\tsetTimeout( (): void => {\n\t\t\t// Run the next slide.\n\t\t\tthis.next();\n\t\t\tthis.autoSlide();\n\t\t\tthis.dispatchEvent( new CustomEvent( 'auto-slide-complete' ) );\n\t\t}, interval );\n\t}\n}\n","/**\n * TP Slider Track.\n */\nexport class TPSliderTrackElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPSliderElement } from './tp-slider';\n\n/**\n * TP Slider Slides.\n */\nexport class TPSliderSlidesElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Resize observer.\n\t\tif ( 'ResizeObserver' in window ) {\n\t\t\tnew ResizeObserver( this.handleHeightChange.bind( this ) ).observe( this );\n\t\t}\n\t}\n\n\t/**\n\t * Handle slide height change.\n\t */\n\tprotected handleHeightChange(): void {\n\t\t// Get the parent tp-slider element.\n\t\tconst slider: TPSliderElement | null = this.closest( 'tp-slider' );\n\n\t\t// Bail if not found.\n\t\tif ( ! slider ) {\n\t\t\t// Bail early if not found.\n\t\t\treturn;\n\t\t}\n\n\t\t/**\n\t\t * Yield to main thread to avoid observation errors.\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#observation_errors\n\t\t */\n\t\tsetTimeout( (): void => {\n\t\t\t// Handle resize.\n\t\t\tslider.handleResize();\n\t\t}, 0 );\n\t}\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 * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Get the button and add event listener.\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\t// If disabled, do nothing.\n\t\tif ( 'yes' === this.getAttribute( 'disabled' ) ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get the slider.\n\t\tconst slider: TPSliderElement | null = this.closest( 'tp-slider' );\n\n\t\t// If no slider, early return.\n\t\tif ( ! slider ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Initiate slider according to the direction of the button clicked.\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 * Internal dependencies.\n */\nimport { TPSliderElement } from './tp-slider';\n\n/**\n * TP Slider Nav.\n */\nexport class TPSliderNavElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected template: HTMLTemplateElement | null = null;\n\tprotected slider: TPSliderElement | null = null;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Get elements.\n\t\tthis.template = this.querySelector( 'template' );\n\t\tthis.slider = this.closest( 'tp-slider' );\n\t}\n\n\t/**\n\t * Update nav items based on template.\n\t */\n\tpublic updateNavItems(): void {\n\t\t// Bail if no template.\n\t\tif ( ! this.template || ! this.slider ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Total slides.\n\t\tconst totalSlides: number = this.slider?.getTotalSlides();\n\n\t\t// Initialise the total number of navigation items.\n\t\tconst totalNavItems: number = Math.ceil( ( totalSlides - this.slider?.perView ) / this.slider?.step ) + 1;\n\n\t\t// Clear the navigation.\n\t\tthis.innerHTML = '';\n\n\t\t// Append the navigation items.\n\t\tfor ( let i = 1; i <= totalNavItems; i++ ) {\n\t\t\t// Clone the template.\n\t\t\tconst navItem: Node = this.template.content.cloneNode( true );\n\t\t\tconst div: HTMLDivElement = document.createElement( 'div' );\n\t\t\tdiv.appendChild( navItem );\n\n\t\t\t// Append the navigation item.\n\t\t\tthis.innerHTML += div.innerHTML.replace( '$index', i.toString() );\n\t\t}\n\t}\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 * Properties.\n\t */\n\tprotected slider : TPSliderElement | null;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\t\tthis.slider = this.closest( 'tp-slider' );\n\n\t\t// Get the nav-item button.\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.handleClick.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\t// Get observed attributes.\n\t\treturn [ 'current' ];\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\t// Update aria-current on the button when current attribute changes.\n\t\tif ( 'current' === name && 'no' !== this.slider?.getAttribute( 'aria' ) ) {\n\t\t\tconst button = this.querySelector( 'button' );\n\n\t\t\t// Check if button exists.\n\t\t\tif ( button ) {\n\t\t\t\t// Check value.\n\t\t\t\tif ( 'yes' === newValue ) {\n\t\t\t\t\tbutton.setAttribute( 'aria-current', 'true' );\n\t\t\t\t} else {\n\t\t\t\t\tbutton.removeAttribute( 'aria-current' );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Handle when the button is clicked.\n\t */\n\thandleClick(): void {\n\t\t// Check if slider exists.\n\t\tif ( ! this.slider ) {\n\t\t\t// No its not! Terminate.\n\t\t\treturn;\n\t\t}\n\n\t\t// Set current slide.\n\t\tthis.slider.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\t// Check if we have an index.\n\t\tif ( this.getAttribute( 'index' ) ) {\n\t\t\t// Yes, return it.\n\t\t\treturn parseInt( this.getAttribute( 'index' ) ?? '0' );\n\t\t}\n\n\t\t// Initialize variables.\n\t\tconst slideNav: TPSliderNavElement | null = this.closest( 'tp-slider-nav' );\n\t\tconst step = this.slider?.step ?? 1;\n\t\tconst perView = this.slider?.perView ?? 1;\n\t\tconst totalSlides = this.slider?.getTotalSlides() ?? 1;\n\t\tconst index = Array.from( slideNav?.children ?? [] ).indexOf( this );\n\n\t\t// Find posible position of the slide.\n\t\tconst lastItem = ( totalSlides - perView ) + 1;\n\t\tconst targetSlide = ( index * step ) + 1;\n\n\t\t// Get the new slide number.\n\t\tconst currentSlideIndex = Math.min( lastItem, targetSlide );\n\n\t\t// return the index.\n\t\treturn currentSlideIndex;\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPSliderElement } from './tp-slider';\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\t// Attributes observed by this component.\n\t\treturn [ '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\t// Get the 'format' attribute value.\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\t// Set the 'format' attribute value.\n\t\tthis.setAttribute( 'format', format );\n\t}\n\n\t/**\n\t * Attribute changed callback.\n\t */\n\tattributeChangedCallback(): void {\n\t\t// On change of format attribute, update the component.\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Update component.\n\t */\n\tupdate(): void {\n\t\t// Get slider.\n\t\tconst slider: TPSliderElement | null = this.closest( 'tp-slider' );\n\n\t\t// Check if slider exists.\n\t\tif ( ! slider ) {\n\t\t\t// No its not! Terminate.\n\t\t\treturn;\n\t\t}\n\n\t\t// Initializing current variable including per view. Along with initializing total variable.\n\t\tconst current: number = Math.min( slider.currentSlideIndex - 1 + slider.perView, slider.getTotalSlides() );\n\t\tconst total: string = slider.getAttribute( 'total' ) ?? '';\n\n\t\t// Updating variables in format attribute.\n\t\tthis.innerHTML =\n\t\t\tthis.format\n\t\t\t\t.replace( '$current', current.toString() )\n\t\t\t\t.replace( '$total', total || '' );\n\n\t\t// Updating current and total attributes.\n\t\tthis.setAttribute( 'current', current.toString() );\n\t\tthis.setAttribute( 'total', total || '' );\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPSliderElement } from './tp-slider';\nimport { TPSliderTrackElement } from './tp-slider-track';\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-nav', TPSliderNavElement );\ncustomElements.define( 'tp-slider', TPSliderElement );\ncustomElements.define( 'tp-slider-count', TPSliderCountElement );\ncustomElements.define( 'tp-slider-track', TPSliderTrackElement );\ncustomElements.define( 'tp-slider-slides', TPSliderSlidesElement );\ncustomElements.define( 'tp-slider-slide', TPSliderSlideElement );\ncustomElements.define( 'tp-slider-arrow', TPSliderArrowElement );\ncustomElements.define( 'tp-slider-nav-item', TPSliderNavItemElement );\n"],"names":["TPSliderElement","HTMLElement","constructor","super","touchStartX","touchStartY","swipeThreshold","allowedResponsiveKeys","this","getAttribute","setAttribute","Number","slide","autoSlide","responsiveSettingsJSON","responsiveSettings","JSON","parse","window","addEventListener","handleResize","bind","document","fonts","ready","then","handleTouchStart","passive","handleTouchEnd","handleKeyDown","e","key","preventDefault","previous","next","connectedCallback","update","observedAttributes","attributeChangedCallback","name","oldValue","newValue","dispatchEvent","CustomEvent","bubbles","currentSlideIndex","parseInt","index","setCurrentSlide","step","toString","perView","getTotalSlides","slides","getSlideElements","length","slidesElement","querySelector","querySelectorAll","totalSlides","nextSlideIndex","Math","min","totalPossibleGroups","ceil","previousSlideNumber","round","currentGroup","getCurrentSlide","detail","slideIndex","slidesContainer","setTimeout","updateHeight","style","left","offsetLeft","getArrow","selector","arrows","parentSliderElement","theArrow","forEach","arrow","closest","sliderNav","sliderCounts","leftArrow","rightArrow","customElements","whenDefined","manageAria","firstVisibleIndex","lastVisibleIndex","removeAttribute","updateNavItems","sliderNavItems","navItem","allItems","slideCount","removeProperty","currentIndex","slidesOnCurrentView","maxHeight","i","scrollHeight","height","updateAttributesResponsively","every","settings","matchMedia","media","matches","settingKey","includes","touches","clientX","clientY","touchEndX","changedTouches","touchEndY","swipeDistanceX","swipeDistanceY","abs","autoSlideInterval","interval","TPSliderTrackElement","TPSliderSlidesElement","ResizeObserver","handleHeightChange","observe","slider","TPSliderSlideElement","TPSliderArrowElement","handleClick","TPSliderNavElement","template","totalNavItems","innerHTML","content","cloneNode","div","createElement","appendChild","replace","TPSliderNavItemElement","_oldValue","button","getIndex","slideNav","lastItem","targetSlide","Array","from","children","indexOf","TPSliderCountElement","format","current","total","define"],"sourceRoot":""}

package/package.json

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