@travelopia/web-components 0.6.9 → 0.7.0

package/dist/multi-select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"dist/multi-select/index.js","mappings":"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","sources":["webpack://@travelopia/web-components/./src/multi-select/tp-multi-select.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-field.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-placeholder.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-status.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-options.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-option.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-search.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-pill.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-pills.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-select-all.ts","webpack://@travelopia/web-components/./src/multi-select/index.ts"],"sourcesContent":["/**\n * Internal dependencies.\n */\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\nimport { TPMultiSelectStatusElement } from './tp-multi-select-status';\nimport { TPMultiSelectOptionsElement } from './tp-multi-select-options';\nimport { TPMultiSelectSearchElement } from './tp-multi-select-search';\n\n/**\n * TP Multi Select.\n */\nexport class TPMultiSelectElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tcurrentlyHighlightedOption: number = -1;\n\tprotected keyboardEventListener: EventListener;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\n\t\t// Events.\n\t\tthis.keyboardEventListener = this.handleKeyboardInputs.bind( this ) as EventListener;\n\t\tdocument.addEventListener( 'click', this.handleDocumentClick.bind( this ) );\n\t\tthis.addEventListener( 'change', this.update.bind( this ) );\n\n\t\t// Listen for dynamic changes to the option values.\n\t\tconst options: TPMultiSelectOptionsElement | null = this.querySelector( 'tp-multi-select-options' );\n\t\tif ( options ) {\n\t\t\tconst mutationObserver: MutationObserver = new MutationObserver( this.initialize.bind( this ) );\n\t\t\tmutationObserver.observe( options, { childList: true, subtree: true } );\n\t\t}\n\n\t\t// Initialize component.\n\t\tthis.initialize();\n\t}\n\n\t/**\n\t * Get observed attributes.\n\t *\n\t * @return {Array} List of observed attributes.\n\t */\n\tstatic get observedAttributes(): string[] {\n\t\treturn [ 'open' ];\n\t}\n\n\t/**\n\t * Attribute changed callback.\n\t *\n\t * @param {string} name     Attribute name.\n\t * @param {string} oldValue Old value.\n\t * @param {string} newValue New value.\n\t */\n\tattributeChangedCallback( name: string = '', oldValue: string = '', newValue: string = '' ): void {\n\t\tif ( oldValue === newValue ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( 'open' === name ) {\n\t\t\tif ( 'yes' === newValue ) {\n\t\t\t\tdocument.addEventListener( 'keydown', this.keyboardEventListener );\n\t\t\t\tthis.dispatchEvent( new CustomEvent( 'open', { bubbles: true } ) );\n\t\t\t} else {\n\t\t\t\tthis.unHighlightAllOptions();\n\t\t\t\tdocument.removeEventListener( 'keydown', this.keyboardEventListener );\n\t\t\t\tthis.dispatchEvent( new CustomEvent( 'close', { bubbles: true } ) );\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Set the value of this component.\n\t *\n\t * @param {Array} value Value.\n\t */\n\tset value( value: string[] ) {\n\t\tif ( ! value || ! Array.isArray( value ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst styledOptions: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( 'tp-multi-select-option' );\n\t\tstyledOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\tif ( value.includes( option.getAttribute( 'value' ) ?? '' ) ) {\n\t\t\t\toption.setAttribute( 'selected', 'yes' );\n\t\t\t} else {\n\t\t\t\toption.removeAttribute( 'selected' );\n\t\t\t}\n\t\t} );\n\n\t\tthis.dispatchEvent( new CustomEvent( 'change', { bubbles: true } ) );\n\t}\n\n\t/**\n\t * Get the value of this component.\n\t *\n\t * @return {Array} Value of this component.\n\t */\n\tget value(): string[] {\n\t\tconst value: string[] = [];\n\n\t\tconst selectedOptions: NodeListOf<HTMLOptionElement> | null = this.querySelectorAll( 'select option[selected]' );\n\t\tselectedOptions?.forEach( ( option: HTMLOptionElement ) => {\n\t\t\tconst optionValue = option.getAttribute( 'value' );\n\t\t\tif ( optionValue ) {\n\t\t\t\tvalue.push( optionValue );\n\t\t\t}\n\t\t} );\n\t\treturn value;\n\t}\n\n\t/**\n\t * Update the value of the select field.\n\t */\n\tprotected updateFormFieldValue(): void {\n\t\t// Get options.\n\t\tconst styledSelectedOptions: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( `tp-multi-select-option` );\n\t\tconst selectField: HTMLSelectElement | null = this.querySelector( 'select' );\n\n\t\tif ( ! styledSelectedOptions || ! selectField ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst selectOptions: HTMLOptionElement[] = Array.from( selectField.options );\n\n\t\t// Traverse options.\n\t\tstyledSelectedOptions.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\tconst optionValue = option.getAttribute( 'value' ) ?? '';\n\t\t\tif ( optionValue ) {\n\t\t\t\tconst matchingSelectOption: HTMLOptionElement | undefined = selectOptions.find( ( selectOption ) => selectOption.value === optionValue );\n\n\t\t\t\tif ( 'yes' === option.getAttribute( 'selected' ) ) {\n\t\t\t\t\tif ( matchingSelectOption ) {\n\t\t\t\t\t\tmatchingSelectOption.setAttribute( 'selected', 'selected' );\n\t\t\t\t\t} else {\n\t\t\t\t\t\tconst newOption: HTMLOptionElement = document.createElement( 'option' );\n\t\t\t\t\t\tnewOption.setAttribute( 'value', option.getAttribute( 'value' ) ?? '' );\n\t\t\t\t\t\tnewOption.setAttribute( 'selected', 'selected' );\n\t\t\t\t\t\tselectField?.append( newOption );\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tmatchingSelectOption?.remove();\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\n\t\t// Dispatch events.\n\t\tselectField.dispatchEvent( new Event( 'change' ) );\n\t}\n\n\t/**\n\t * Update component and sub-components.\n\t */\n\tupdate(): void {\n\t\t// First, update field value.\n\t\tthis.updateFormFieldValue();\n\n\t\t// Get value.\n\t\tconst value: string[] = this.value;\n\n\t\t// Toggle selected attribute.\n\t\tif ( 0 !== value.length ) {\n\t\t\tthis.setAttribute( 'selected', 'yes' );\n\t\t} else {\n\t\t\tthis.removeAttribute( 'selected' );\n\t\t}\n\n\t\t// Update status.\n\t\tconst status: TPMultiSelectStatusElement | null = this.querySelector( 'tp-multi-select-status' );\n\t\tif ( status ) {\n\t\t\tif ( value.length > 0 ) {\n\t\t\t\tstatus.setAttribute( 'total', value.length.toString() );\n\t\t\t} else {\n\t\t\t\tstatus.removeAttribute( 'total' );\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Handle clicking the document.\n\t *\n\t * @param {Event} e Event.\n\t */\n\tprotected handleDocumentClick( e: Event ): void {\n\t\tif ( this !== e.target && ! this.contains( e.target as Node ) ) {\n\t\t\tthis.removeAttribute( 'open' );\n\t\t}\n\t}\n\n\t/**\n\t * Initialize component.\n\t */\n\tinitialize(): void {\n\t\t// Create select element (if it doesn't already exist).\n\t\tlet selectElement: HTMLSelectElement | null = this.querySelector( 'select' );\n\t\tif ( ! selectElement ) {\n\t\t\tselectElement = document.createElement( 'select' );\n\t\t\tselectElement.setAttribute( 'name', this.getAttribute( 'name' ) ?? '' );\n\n\t\t\tconst formReference = this.getAttribute( 'form' );\n\n\t\t\tif ( formReference ) {\n\t\t\t\tselectElement.setAttribute( 'form', formReference );\n\t\t\t}\n\n\t\t\tif ( 'no' !== this.getAttribute( 'multiple' ) ) {\n\t\t\t\tselectElement.setAttribute( 'multiple', 'multiple' );\n\t\t\t}\n\n\t\t\tthis.append( selectElement );\n\t\t} else {\n\t\t\tselectElement.innerHTML = '';\n\t\t}\n\n\t\t// Update components for selected options.\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Select a value.\n\t *\n\t * @param {string} value Value to select.\n\t */\n\tselect( value: string = '' ): void {\n\t\t// Stuff for single-select.\n\t\tif ( 'no' === this.getAttribute( 'multiple' ) ) {\n\t\t\t// First, unselect everything.\n\t\t\tthis.unSelectAll();\n\n\t\t\t// If the value is blank, don't do anything else.\n\t\t\tif ( '' === value ) {\n\t\t\t\tif ( 'yes' === this.getAttribute( 'close-on-select' ) ) {\n\t\t\t\t\tthis.removeAttribute( 'open' );\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\n\t\t// Select all options.\n\t\tconst styledSelectedOptions: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( `tp-multi-select-option[value=\"${ value }\"]` );\n\t\tstyledSelectedOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\tif ( 'yes' !== option.getAttribute( 'disabled' ) ) {\n\t\t\t\toption.setAttribute( 'selected', 'yes' );\n\t\t\t}\n\t\t} );\n\n\t\t// Search stuff.\n\t\tconst search: TPMultiSelectSearchElement | null = this.querySelector( 'tp-multi-select-search' );\n\t\tsearch?.clear();\n\t\tsearch?.focus();\n\n\t\t// Close the field, if applicable.\n\t\tif ( 'yes' === this.getAttribute( 'close-on-select' ) ) {\n\t\t\tthis.removeAttribute( 'open' );\n\t\t}\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Select all values.\n\t */\n\tselectAll(): void {\n\t\tconst styledOptions: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( 'tp-multi-select-option' );\n\t\tstyledOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\tif ( 'yes' !== option.getAttribute( 'disabled' ) ) {\n\t\t\t\toption.setAttribute( 'selected', 'yes' );\n\t\t\t}\n\t\t} );\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Un-select a value.\n\t *\n\t * @param {string} value Value to unselect.\n\t */\n\tunSelect( value: string = '' ): void {\n\t\tconst styledSelectedOptions: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( `tp-multi-select-option[value=\"${ value }\"]` );\n\t\tstyledSelectedOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\toption.removeAttribute( 'selected' );\n\t\t} );\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Un-select all values.\n\t */\n\tunSelectAll(): void {\n\t\tconst styledSelectedOptions: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( 'tp-multi-select-option' );\n\t\tstyledSelectedOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\toption.removeAttribute( 'selected' );\n\t\t} );\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Handle keyboard inputs.\n\t *\n\t * @param {Event} e Keyboard event.\n\t */\n\thandleKeyboardInputs( e: KeyboardEvent ): void {\n\t\tswitch ( e.key ) {\n\t\t\tcase 'ArrowDown':\n\t\t\t\te.preventDefault();\n\t\t\t\tthis.highlightNextOption();\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowUp':\n\t\t\t\te.preventDefault();\n\t\t\t\tthis.highlightPreviousOption();\n\t\t\t\tbreak;\n\t\t\tcase 'Enter':\n\t\t\t\tthis.toggleHighlightedOption();\n\t\t\t\tbreak;\n\t\t\tcase 'Escape':\n\t\t\t\tthis.unHighlightAllOptions();\n\t\t\t\tthis.removeAttribute( 'open' );\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\t/**\n\t * Highlight the next option.\n\t */\n\thighlightNextOption(): void {\n\t\t// Get options.\n\t\tconst options: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( 'tp-multi-select-option:not([hidden=\"yes\"])' );\n\t\tif ( ! options ) {\n\t\t\tthis.currentlyHighlightedOption = -1;\n\t\t\treturn;\n\t\t}\n\n\t\t// Find the next option to be highlighted. Assume next option is the favorable option.\n\t\tlet nextToBeHighlighted = this.currentlyHighlightedOption + 1;\n\n\t\t// Keep iterating to skip over disabled options until we find a suitable option.\n\t\twhile ( nextToBeHighlighted < options.length && options[ nextToBeHighlighted ].getAttribute( 'disabled' ) === 'yes' ) {\n\t\t\tnextToBeHighlighted++;\n\t\t}\n\n\t\t// If there are no more options to highlight, exit. Here, the last highlighted option keeps highlighted.\n\t\tif ( nextToBeHighlighted === options.length ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Remove highlight from the current option, if any.\n\t\tif ( this.currentlyHighlightedOption !== -1 ) {\n\t\t\toptions[ this.currentlyHighlightedOption ].removeAttribute( 'highlighted' );\n\t\t}\n\n\t\t// Highlight the found option.\n\t\toptions[ nextToBeHighlighted ].setAttribute( 'highlighted', 'yes' );\n\n\t\t// Scroll the highlighted option into view with smooth behavior.\n\t\toptions[ nextToBeHighlighted ].scrollIntoView( { behavior: 'smooth', block: 'nearest' } );\n\n\t\t// Update the currentlyHighlightedOption for the next iteration.\n\t\tthis.currentlyHighlightedOption = nextToBeHighlighted;\n\t}\n\n\t/**\n\t * Highlight previous option.\n\t */\n\thighlightPreviousOption(): void {\n\t\t// Get options.\n\t\tconst options: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( 'tp-multi-select-option:not([hidden=\"yes\"])' );\n\t\tif ( ! options ) {\n\t\t\tthis.currentlyHighlightedOption = -1;\n\t\t\treturn;\n\t\t}\n\n\t\t// Find the previous option to be highlighted. Assume previous option is the favorable option.\n\t\tlet previousToBeHighlighted = this.currentlyHighlightedOption - 1;\n\n\t\t// Keep iterating to skip over disabled options until we find a suitable option.\n\t\twhile ( previousToBeHighlighted >= 0 && options[ previousToBeHighlighted ].getAttribute( 'disabled' ) === 'yes' ) {\n\t\t\tpreviousToBeHighlighted--;\n\t\t}\n\n\t\t// If there are no more options to highlight, exit.\n\t\tif ( previousToBeHighlighted < 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Remove highlight from the current option, if any.\n\t\tif ( this.currentlyHighlightedOption !== 0 ) {\n\t\t\toptions[ this.currentlyHighlightedOption ].removeAttribute( 'highlighted' );\n\t\t}\n\n\t\t// Highlight the found option.\n\t\toptions[ previousToBeHighlighted ].setAttribute( 'highlighted', 'yes' );\n\n\t\t// Scroll the highlighted option into view with smooth behavior.\n\t\toptions[ previousToBeHighlighted ].scrollIntoView( { behavior: 'smooth', block: 'nearest' } );\n\n\t\t// Update the currentlyHighlightedOption for the next iteration.\n\t\tthis.currentlyHighlightedOption = previousToBeHighlighted;\n\t}\n\n\t/**\n\t * Toggle highlighted option.\n\t */\n\ttoggleHighlightedOption(): void {\n\t\tconst option: TPMultiSelectOptionElement | null = this.querySelector( `tp-multi-select-option[highlighted=\"yes\"]` );\n\t\toption?.toggle( null );\n\t}\n\n\t/**\n\t * Un-highlight all options.\n\t */\n\tunHighlightAllOptions(): void {\n\t\tthis.currentlyHighlightedOption = -1;\n\n\t\tconst options: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( 'tp-multi-select-option' );\n\t\tif ( options ) {\n\t\t\toptions.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\t\toption.removeAttribute( 'highlighted' );\n\t\t\t} );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\n\n/**\n * TP Multi Select Field.\n */\nexport class TPMultiSelectFieldElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener( 'click', this.toggleOpen.bind( this ) );\n\t}\n\n\t/**\n\t * Toggle opening this component.\n\t */\n\ttoggleOpen(): void {\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\t\tif ( ! multiSelect ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( 'yes' === multiSelect.getAttribute( 'open' ) ) {\n\t\t\tmultiSelect.removeAttribute( 'open' );\n\t\t} else {\n\t\t\tmultiSelect.setAttribute( 'open', 'yes' );\n\t\t}\n\t}\n}\n","/**\n * TP Multi Select Placeholder.\n */\nexport class TPMultiSelectPlaceholderElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\n\n/**\n * TP Multi Select Status.\n */\nexport class TPMultiSelectStatusElement 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\treturn [ 'total', 'format' ];\n\t}\n\n\t/**\n\t * Attribute changed callback.\n\t *\n\t * @param {string} _name    Attribute name.\n\t * @param {string} oldValue Old value.\n\t * @param {string} newValue New value.\n\t */\n\tattributeChangedCallback( _name: string = '', oldValue: string = '', newValue: string = '' ): void {\n\t\tif ( oldValue !== newValue ) {\n\t\t\tthis.update();\n\t\t}\n\t}\n\n\t/**\n\t * Update this component.\n\t */\n\tupdate(): void {\n\t\tconst format: string = this.getAttribute( 'format' ) ?? '$total Selected';\n\t\tlet html: string = format.replace( '$total', this.getAttribute( 'total' ) ?? '' );\n\n\t\tif ( format.includes( '$value' ) ) {\n\t\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\t\t\tif ( multiSelect ) {\n\t\t\t\tconst value: string[] = multiSelect.value ?? [];\n\t\t\t\tlet replace: string = '';\n\n\t\t\t\tif ( value.length > 0 ) {\n\t\t\t\t\tconst option: TPMultiSelectOptionElement | null = multiSelect.querySelector( `tp-multi-select-option[value=\"${ value[ 0 ] }\"]` );\n\t\t\t\t\tif ( option ) {\n\t\t\t\t\t\treplace = option.getAttribute( 'label' ) ?? '';\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\thtml = html.replace( '$value', replace );\n\t\t\t}\n\t\t}\n\n\t\tthis.innerHTML = html;\n\t}\n}\n","/**\n * TP Multi Select Options.\n */\nexport class TPMultiSelectOptionsElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\n\n/**\n * TP Multi Select Option.\n */\nexport class TPMultiSelectOptionElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener( 'click', this.toggle.bind( this ) );\n\t}\n\n\t/**\n\t * Select / un-select this option.\n\t *\n\t * @param {Event} e Click event.\n\t */\n\ttoggle( e: Event | null ): void {\n\t\te?.preventDefault();\n\t\te?.stopPropagation();\n\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\t\tconst value: string = this.getAttribute( 'value' ) ?? '';\n\n\t\tif ( 'yes' !== this.getAttribute( 'selected' ) ) {\n\t\t\tmultiSelect?.select( value );\n\t\t\tmultiSelect?.dispatchEvent( new CustomEvent( 'select', {\n\t\t\t\tbubbles: true,\n\t\t\t\tdetail: { value },\n\t\t\t} ) );\n\t\t} else {\n\t\t\tmultiSelect?.unSelect( value );\n\t\t\tmultiSelect?.dispatchEvent( new CustomEvent( 'unselect', {\n\t\t\t\tbubbles: true,\n\t\t\t\tdetail: { value },\n\t\t\t} ) );\n\t\t}\n\t\tmultiSelect?.dispatchEvent( new CustomEvent( 'change', { bubbles: true } ) );\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\nimport { TPMultiSelectPillElement } from './tp-multi-select-pill';\n\n/**\n * TP Multi Select Search.\n */\nexport class TPMultiSelectSearchElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\n\t\tconst input: HTMLInputElement | null = this.querySelector( 'input' );\n\t\tif ( ! input ) {\n\t\t\treturn;\n\t\t}\n\n\t\tinput.addEventListener( 'keydown', this.handleKeyboardInputs.bind( this ) );\n\t\tinput.addEventListener( 'keyup', this.handleSearchChange.bind( this ) );\n\t\tinput.addEventListener( 'input', this.handleSearchChange.bind( this ) );\n\t\tthis.addEventListener( 'click', this.handleClick.bind( this ) );\n\t\tthis.closest( 'tp-multi-select' )?.addEventListener( 'open', this.focus.bind( this ) );\n\t}\n\n\t/**\n\t * Handle keyboard inputs.\n\t *\n\t * @param {Event} e Keyboard event.\n\t */\n\thandleKeyboardInputs( e: KeyboardEvent ): void {\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\t\tconst search: HTMLInputElement | null = this.querySelector( 'input' );\n\t\tif ( ! multiSelect || ! search ) {\n\t\t\treturn;\n\t\t}\n\n\t\tswitch ( e.key ) {\n\t\t\tcase 'Enter':\n\t\t\t\te.preventDefault(); // Prevent inadvertent form submits.\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\n\t\t\t\tmultiSelect.setAttribute( 'open', 'yes' );\n\t\t\t\tbreak;\n\t\t\tcase 'Backspace':\n\t\t\t\tif ( 0 === search.value.length ) {\n\t\t\t\t\tconst pill: TPMultiSelectPillElement | null = multiSelect.querySelector( 'tp-multi-select-pill:last-of-type' );\n\t\t\t\t\tif ( pill ) {\n\t\t\t\t\t\tpill.removePill();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\t/**\n\t * Handle search field value changed.\n\t */\n\tprotected handleSearchChange(): void {\n\t\t// Get search field and options.\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\t\tconst search: HTMLInputElement | null = this.querySelector( 'input' );\n\t\tconst options: NodeListOf<TPMultiSelectOptionElement> | undefined = this.closest( 'tp-multi-select' )?.querySelectorAll( 'tp-multi-select-option' );\n\t\tif ( ! multiSelect || ! search || ! options ) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet matchedOptionCount = 0;\n\t\t// Hide and show options based on search.\n\t\toptions.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\tif ( option.getAttribute( 'label' )?.toLowerCase().match( new RegExp( `.*${ search.value.toLowerCase().replace( /\\s/g, '.*' ) }.*` ) ) ) {\n\t\t\t\toption.removeAttribute( 'hidden' );\n\t\t\t\tmatchedOptionCount++;\n\t\t\t} else {\n\t\t\t\toption.setAttribute( 'hidden', 'yes' );\n\t\t\t}\n\t\t} );\n\n\t\t// Resize input width.\n\t\tif ( '' === search.value ) {\n\t\t\tsearch.removeAttribute( 'style' );\n\t\t} else {\n\t\t\tsearch.style.width = `${ search.value.length + 2 }ch`;\n\t\t\tmultiSelect.setAttribute( 'open', 'yes' );\n\t\t}\n\n\t\tmultiSelect.setAttribute( 'visible-options', matchedOptionCount.toString() );\n\t}\n\n\t/**\n\t * Handle click.\n\t *\n\t * @param {Event} e Click event.\n\t */\n\tprotected handleClick( e: Event ): void {\n\t\t// First, prevent propagation to avoid document.click set on `tp-multi-select`.\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\n\t\t// Now send the event so other stuff can work as per normal, and another event for good measure.\n\t\tthis.dispatchEvent( new CustomEvent( 'multi-select-opened' ) );\n\t\tdocument.dispatchEvent( new Event( 'click' ) );\n\n\t\t// Open multi select.\n\t\tthis.closest( 'tp-multi-select' )?.setAttribute( 'open', 'yes' );\n\t}\n\n\t/**\n\t * Clear the search field.\n\t */\n\tclear(): void {\n\t\tconst search: HTMLInputElement | null = this.querySelector( 'input' );\n\t\tif ( search ) {\n\t\t\tsearch.value = '';\n\t\t\tsearch.dispatchEvent( new Event( 'change' ) );\n\t\t}\n\t}\n\n\t/**\n\t * Set focus on the search field.\n\t */\n\tfocus(): void {\n\t\t// When it's focused, use search change to ensure the results are refreshed.\n\t\tthis.handleSearchChange();\n\n\t\t// Focus on input.\n\t\tthis.querySelector( 'input' )?.focus();\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\n\n/**\n * TP Multi Select Pill.\n */\nexport class TPMultiSelectPillElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.handleButtonClick.bind( this ) );\n\t}\n\n\t/**\n\t * Handle button click.\n\t *\n\t * @param {Event} e Click event.\n\t */\n\thandleButtonClick( e: Event | null ): void {\n\t\te?.preventDefault();\n\t\te?.stopPropagation();\n\t\tthis.removePill();\n\t}\n\n\t/**\n\t * Remove this pill.\n\t */\n\tremovePill(): void {\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\t\tif ( multiSelect && this.getAttribute( 'value' ) ) {\n\t\t\tmultiSelect.unSelect( this.getAttribute( 'value' ) ?? '' );\n\t\t\tmultiSelect.dispatchEvent( new CustomEvent( 'unselect', { bubbles: true } ) );\n\t\t\tmultiSelect.dispatchEvent( new CustomEvent( 'change', { bubbles: true } ) );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\nimport { TPMultiSelectPillElement } from './tp-multi-select-pill';\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\n\n/**\n * TP Multi Select Pills.\n */\nexport class TPMultiSelectPillsElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\n\t\t// Events.\n\t\tthis.closest( 'tp-multi-select' )?.addEventListener( 'change', this.update.bind( this ) );\n\t\tthis.closest( 'tp-multi-select' )?.querySelector( 'select' )?.addEventListener( 'change', ( () => this.update() ) as EventListener );\n\n\t\t// Update.\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Update this component.\n\t */\n\tupdate(): void {\n\t\t// Get multi-select.\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\t\tif ( ! multiSelect ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Determine pills.\n\t\tconst pills: NodeListOf<TPMultiSelectPillElement> | null = this.querySelectorAll( 'tp-multi-select-pill' );\n\t\tconst values: string[] = multiSelect.value ?? [];\n\t\tconst pillValues: string[] = [];\n\n\t\t// Remove pills that shouldn't exist.\n\t\tpills.forEach( ( pill: TPMultiSelectPillElement ): void => {\n\t\t\tconst pillValue: string = pill.getAttribute( 'value' ) ?? '';\n\n\t\t\tif ( '' === pillValue ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tpillValues.push( pillValue );\n\n\t\t\tif ( ! values.includes( pillValue ) ) {\n\t\t\t\tpill.remove();\n\t\t\t}\n\t\t} );\n\n\t\t// Create new pills.\n\t\tconst pillsToCreate: string[] = values.filter( ( value: string ) => ! pillValues.includes( value ) );\n\t\tpillsToCreate.forEach( ( pillValue: string ): void => {\n\t\t\tif ( '' === pillValue ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst multiSelectOption: TPMultiSelectOptionElement | null = multiSelect.querySelector( `tp-multi-select-option[value=\"${ pillValue }\"]` );\n\t\t\tif ( ! multiSelectOption ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tthis.appendChild( this.createPill( pillValue, multiSelectOption.getAttribute( 'label' ) ?? '' ) );\n\t\t} );\n\t}\n\n\t/**\n\t * Create a new pill.\n\t *\n\t * @param {string} value Pill value.\n\t * @param {string} label Pill label.\n\t *\n\t * @return {TPMultiSelectPillElement} New pill.\n\t */\n\tcreatePill( value: string, label: string ): TPMultiSelectPillElement {\n\t\tconst newPill = document.createElement( 'tp-multi-select-pill' ) as TPMultiSelectPillElement;\n\t\tnewPill.setAttribute( 'value', value );\n\n\t\tconst pillLabel: HTMLElement = document.createElement( 'span' );\n\t\tpillLabel.textContent = label;\n\n\t\tconst pillCloseButton: HTMLElement = document.createElement( 'button' );\n\t\tpillCloseButton.setAttribute( 'type', 'button' );\n\t\tpillCloseButton.textContent = 'x';\n\t\tpillCloseButton.addEventListener( 'click', () => {\n\t\t\tnewPill.removePill();\n\t\t} );\n\n\t\tnewPill.appendChild( pillLabel );\n\t\tnewPill.appendChild( pillCloseButton );\n\n\t\treturn newPill;\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\n\n/**\n * TP Multi Select Select All.\n */\nexport class TPMultiSelectSelectAllElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis.closest( 'tp-multi-select' )?.addEventListener( 'change', this.handleValueChanged.bind( this ) );\n\t\tthis.addEventListener( 'click', this.toggleSelectAll.bind( this ) );\n\t}\n\n\t/**\n\t * Handle value changed.\n\t */\n\thandleValueChanged(): void {\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\t\tconst options: NodeListOf<TPMultiSelectOptionElement> | null | undefined = multiSelect?.querySelectorAll( 'tp-multi-select-option' );\n\t\tif ( ! multiSelect || ! options ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( Array.from( options ).filter( ( optionNode ) => optionNode.getAttribute( 'disabled' ) !== 'yes' ).length === multiSelect.value.length ) {\n\t\t\tthis.setAttribute( 'selected', 'yes' );\n\t\t\tthis.innerHTML = this.getAttribute( 'unselect-text' ) ?? '';\n\t\t} else {\n\t\t\tthis.removeAttribute( 'selected' );\n\t\t\tthis.innerHTML = this.getAttribute( 'select-text' ) ?? '';\n\t\t}\n\t}\n\n\t/**\n\t * Toggle select all.\n\t */\n\ttoggleSelectAll(): void {\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\t\tif ( ! multiSelect ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( 'yes' !== this.getAttribute( 'selected' ) ) {\n\t\t\tmultiSelect.selectAll();\n\t\t\tmultiSelect.dispatchEvent( new CustomEvent( 'select-all', { bubbles: true } ) );\n\t\t} else {\n\t\t\tmultiSelect.unSelectAll();\n\t\t\tmultiSelect.dispatchEvent( new CustomEvent( 'unselect-all', { bubbles: true } ) );\n\t\t}\n\t\tmultiSelect.dispatchEvent( new CustomEvent( 'change', { bubbles: true } ) );\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\nimport { TPMultiSelectFieldElement } from './tp-multi-select-field';\nimport { TPMultiSelectPlaceholderElement } from './tp-multi-select-placeholder';\nimport { TPMultiSelectStatusElement } from './tp-multi-select-status';\nimport { TPMultiSelectOptionsElement } from './tp-multi-select-options';\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\nimport { TPMultiSelectSearchElement } from './tp-multi-select-search';\nimport { TPMultiSelectPillElement } from './tp-multi-select-pill';\nimport { TPMultiSelectPillsElement } from './tp-multi-select-pills';\nimport { TPMultiSelectSelectAllElement } from './tp-multi-select-select-all';\n\n/**\n * Register Components.\n */\ncustomElements.define( 'tp-multi-select', TPMultiSelectElement );\ncustomElements.define( 'tp-multi-select-field', TPMultiSelectFieldElement );\ncustomElements.define( 'tp-multi-select-placeholder', TPMultiSelectPlaceholderElement );\ncustomElements.define( 'tp-multi-select-status', TPMultiSelectStatusElement );\ncustomElements.define( 'tp-multi-select-options', TPMultiSelectOptionsElement );\ncustomElements.define( 'tp-multi-select-option', TPMultiSelectOptionElement );\ncustomElements.define( 'tp-multi-select-search', TPMultiSelectSearchElement );\ncustomElements.define( 'tp-multi-select-pill', TPMultiSelectPillElement );\ncustomElements.define( 'tp-multi-select-pills', TPMultiSelectPillsElement );\ncustomElements.define( 'tp-multi-select-select-all', TPMultiSelectSelectAllElement );\n"],"names":["TPMultiSelectElement","HTMLElement","constructor","super","currentlyHighlightedOption","this","keyboardEventListener","handleKeyboardInputs","bind","document","addEventListener","handleDocumentClick","update","options","querySelector","MutationObserver","initialize","observe","childList","subtree","observedAttributes","attributeChangedCallback","name","oldValue","newValue","dispatchEvent","CustomEvent","bubbles","unHighlightAllOptions","removeEventListener","value","Array","isArray","styledOptions","querySelectorAll","forEach","option","includes","getAttribute","setAttribute","removeAttribute","selectedOptions","optionValue","push","updateFormFieldValue","styledSelectedOptions","selectField","selectOptions","from","matchingSelectOption","find","selectOption","newOption","createElement","append","remove","Event","length","status","toString","e","target","contains","selectElement","innerHTML","formReference","select","unSelectAll","search","clear","focus","selectAll","unSelect","key","preventDefault","highlightNextOption","highlightPreviousOption","toggleHighlightedOption","nextToBeHighlighted","scrollIntoView","behavior","block","previousToBeHighlighted","toggle","TPMultiSelectFieldElement","toggleOpen","multiSelect","closest","TPMultiSelectPlaceholderElement","TPMultiSelectStatusElement","_name","format","html","replace","TPMultiSelectOptionsElement","TPMultiSelectOptionElement","stopPropagation","detail","TPMultiSelectSearchElement","input","handleSearchChange","handleClick","pill","removePill","matchedOptionCount","toLowerCase","match","RegExp","style","width","TPMultiSelectPillElement","handleButtonClick","TPMultiSelectPillsElement","pills","values","pillValues","pillValue","filter","multiSelectOption","appendChild","createPill","label","newPill","pillLabel","textContent","pillCloseButton","TPMultiSelectSelectAllElement","handleValueChanged","toggleSelectAll","optionNode","customElements","define"],"sourceRoot":""}
+{"version":3,"file":"dist/multi-select/index.js","mappings":"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","sources":["webpack://@travelopia/web-components/./src/multi-select/tp-multi-select.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-field.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-placeholder.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-status.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-options.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-option.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-search.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-pill.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-pills.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-select-all.ts","webpack://@travelopia/web-components/./src/multi-select/index.ts"],"sourcesContent":["/**\n * Internal dependencies.\n */\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\nimport { TPMultiSelectStatusElement } from './tp-multi-select-status';\nimport { TPMultiSelectOptionsElement } from './tp-multi-select-options';\nimport { TPMultiSelectSearchElement } from './tp-multi-select-search';\n\n/**\n * TP Multi Select.\n */\nexport class TPMultiSelectElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tcurrentlyHighlightedOption: number = -1;\n\tprotected keyboardEventListener: EventListener;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Events.\n\t\tthis.keyboardEventListener = this.handleKeyboardInputs.bind( this ) as EventListener;\n\t\tdocument.addEventListener( 'click', this.handleDocumentClick.bind( this ) );\n\t\tthis.addEventListener( 'change', this.update.bind( this ) );\n\n\t\t// Get options.\n\t\tconst options: TPMultiSelectOptionsElement | null = this.querySelector( 'tp-multi-select-options' );\n\n\t\t// Listen for dynamic changes to the option values.\n\t\tif ( options ) {\n\t\t\tconst mutationObserver: MutationObserver = new MutationObserver( this.initialize.bind( this ) );\n\t\t\tmutationObserver.observe( options, { childList: true, subtree: true } );\n\t\t}\n\n\t\t// Initialize component.\n\t\tthis.initialize();\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 to observe.\n\t\treturn [ 'open' ];\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// If no changes.\n\t\tif ( oldValue === newValue ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Changed attribute name is 'open'.\n\t\tif ( 'open' === name ) {\n\t\t\t// If new value is 'yes' then open the dropdown.\n\t\t\tif ( 'yes' === newValue ) {\n\t\t\t\tdocument.addEventListener( 'keydown', this.keyboardEventListener );\n\t\t\t\tthis.dispatchEvent( new CustomEvent( 'open', { bubbles: true } ) );\n\t\t\t} else {\n\t\t\t\tthis.unHighlightAllOptions();\n\t\t\t\tdocument.removeEventListener( 'keydown', this.keyboardEventListener );\n\t\t\t\tthis.dispatchEvent( new CustomEvent( 'close', { bubbles: true } ) );\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Set the value of this component.\n\t *\n\t * @param {Array} value Value.\n\t */\n\tset value( value: string[] ) {\n\t\t// Bail if value is not an array.\n\t\tif ( ! value || ! Array.isArray( value ) ) {\n\t\t\t// Bail early.\n\t\t\treturn;\n\t\t}\n\n\t\t// Set the value of the select field.\n\t\tconst styledOptions: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( 'tp-multi-select-option' );\n\t\tstyledOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\t// Check if the value is in the array.\n\t\t\tif ( value.includes( option.getAttribute( 'value' ) ?? '' ) ) {\n\t\t\t\toption.setAttribute( 'selected', 'yes' );\n\t\t\t} else {\n\t\t\t\toption.removeAttribute( 'selected' );\n\t\t\t}\n\t\t} );\n\n\t\t// Dispatch change event.\n\t\tthis.dispatchEvent( new CustomEvent( 'change', { bubbles: true } ) );\n\t}\n\n\t/**\n\t * Get the value of this component.\n\t *\n\t * @return {Array} Value of this component.\n\t */\n\tget value(): string[] {\n\t\t// Get the value of the select field.\n\t\tconst value: string[] = [];\n\n\t\t// Get selected options.\n\t\tconst selectedOptions: NodeListOf<HTMLOptionElement> | null = this.querySelectorAll( 'select option[selected]' );\n\t\tselectedOptions?.forEach( ( option: HTMLOptionElement ) => {\n\t\t\t// Get option value.\n\t\t\tconst optionValue = option.getAttribute( 'value' );\n\n\t\t\t// Add value to array.\n\t\t\tif ( optionValue ) {\n\t\t\t\tvalue.push( optionValue );\n\t\t\t}\n\t\t} );\n\n\t\t// Return value.\n\t\treturn value;\n\t}\n\n\t/**\n\t * Update the value of the select field.\n\t */\n\tprotected updateFormFieldValue(): void {\n\t\t// Get options.\n\t\tconst styledSelectedOptions: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( `tp-multi-select-option` );\n\t\tconst selectField: HTMLSelectElement | null = this.querySelector( 'select' );\n\n\t\t// Bail if there's no styled selected options or select field.\n\t\tif ( ! styledSelectedOptions || ! selectField ) {\n\t\t\t// Bail.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get selected options.\n\t\tconst selectOptions: HTMLOptionElement[] = Array.from( selectField.options );\n\n\t\t// Traverse options.\n\t\tstyledSelectedOptions.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\t// Get option value.\n\t\t\tconst optionValue = option.getAttribute( 'value' ) ?? '';\n\n\t\t\t// If option value is present.\n\t\t\tif ( optionValue ) {\n\t\t\t\tconst matchingSelectOption: HTMLOptionElement | undefined = selectOptions.find( ( selectOption ) => selectOption.value === optionValue );\n\n\t\t\t\t// Update select field.\n\t\t\t\tif ( 'yes' === option.getAttribute( 'selected' ) ) {\n\t\t\t\t\t// Update select field.\n\t\t\t\t\tif ( matchingSelectOption ) {\n\t\t\t\t\t\tmatchingSelectOption.setAttribute( 'selected', 'selected' );\n\t\t\t\t\t} else {\n\t\t\t\t\t\tconst newOption: HTMLOptionElement = document.createElement( 'option' );\n\t\t\t\t\t\tnewOption.setAttribute( 'value', option.getAttribute( 'value' ) ?? '' );\n\t\t\t\t\t\tnewOption.setAttribute( 'selected', 'selected' );\n\t\t\t\t\t\tselectField?.append( newOption );\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tmatchingSelectOption?.remove();\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\n\t\t// Dispatch events.\n\t\tselectField.dispatchEvent( new Event( 'change' ) );\n\t}\n\n\t/**\n\t * Update component and sub-components.\n\t */\n\tupdate(): void {\n\t\t// First, update field value.\n\t\tthis.updateFormFieldValue();\n\n\t\t// Get value.\n\t\tconst value: string[] = this.value;\n\n\t\t// Toggle selected attribute.\n\t\tif ( 0 !== value.length ) {\n\t\t\tthis.setAttribute( 'selected', 'yes' );\n\t\t} else {\n\t\t\tthis.removeAttribute( 'selected' );\n\t\t}\n\n\t\t// Get status.\n\t\tconst status: TPMultiSelectStatusElement | null = this.querySelector( 'tp-multi-select-status' );\n\n\t\t// Update status.\n\t\tif ( status ) {\n\t\t\t// Update status.\n\t\t\tif ( value.length > 0 ) {\n\t\t\t\tstatus.setAttribute( 'total', value.length.toString() );\n\t\t\t} else {\n\t\t\t\tstatus.removeAttribute( 'total' );\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Handle clicking the document.\n\t *\n\t * @param {Event} e Event.\n\t */\n\tprotected handleDocumentClick( e: Event ): void {\n\t\t// Close on click outside.\n\t\tif ( this !== e.target && ! this.contains( e.target as Node ) ) {\n\t\t\tthis.removeAttribute( 'open' );\n\t\t}\n\t}\n\n\t/**\n\t * Initialize component.\n\t */\n\tinitialize(): void {\n\t\t// Get select element.\n\t\tlet selectElement: HTMLSelectElement | null = this.querySelector( 'select' );\n\n\t\t// Create select element (if it doesn't already exist).\n\t\tif ( ! selectElement ) {\n\t\t\tselectElement = document.createElement( 'select' );\n\t\t\tselectElement.setAttribute( 'name', this.getAttribute( 'name' ) ?? '' );\n\n\t\t\t// Get form reference.\n\t\t\tconst formReference = this.getAttribute( 'form' );\n\n\t\t\t// Add form reference.\n\t\t\tif ( formReference ) {\n\t\t\t\tselectElement.setAttribute( 'form', formReference );\n\t\t\t}\n\n\t\t\t// Set multiple.\n\t\t\tif ( 'no' !== this.getAttribute( 'multiple' ) ) {\n\t\t\t\tselectElement.setAttribute( 'multiple', 'multiple' );\n\t\t\t}\n\n\t\t\t// Append.\n\t\t\tthis.append( selectElement );\n\t\t} else {\n\t\t\tselectElement.innerHTML = '';\n\t\t}\n\n\t\t// Update components for selected options.\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Select a value.\n\t *\n\t * @param {string} value Value to select.\n\t */\n\tselect( value: string = '' ): void {\n\t\t// Stuff for single-select.\n\t\tif ( 'no' === this.getAttribute( 'multiple' ) ) {\n\t\t\t// First, unselect everything.\n\t\t\tthis.unSelectAll();\n\n\t\t\t// If the value is blank, don't do anything else.\n\t\t\tif ( '' === value ) {\n\t\t\t\t// Close the field, if applicable.\n\t\t\t\tif ( 'yes' === this.getAttribute( 'close-on-select' ) ) {\n\t\t\t\t\tthis.removeAttribute( 'open' );\n\t\t\t\t}\n\n\t\t\t\t// Exit.\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\n\t\t// Select all options.\n\t\tconst styledSelectedOptions: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( `tp-multi-select-option[value=\"${ value }\"]` );\n\t\tstyledSelectedOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\t// Update select field.\n\t\t\tif ( 'yes' !== option.getAttribute( 'disabled' ) ) {\n\t\t\t\toption.setAttribute( 'selected', 'yes' );\n\t\t\t}\n\t\t} );\n\n\t\t// Search stuff.\n\t\tconst search: TPMultiSelectSearchElement | null = this.querySelector( 'tp-multi-select-search' );\n\t\tsearch?.clear();\n\t\tsearch?.focus();\n\n\t\t// Close the field, if applicable.\n\t\tif ( 'yes' === this.getAttribute( 'close-on-select' ) ) {\n\t\t\tthis.removeAttribute( 'open' );\n\t\t}\n\n\t\t// Update component.\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Select all values.\n\t */\n\tselectAll(): void {\n\t\t// Get all options.\n\t\tconst styledOptions: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( 'tp-multi-select-option' );\n\t\tstyledOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\t// Update select field.\n\t\t\tif ( 'yes' !== option.getAttribute( 'disabled' ) ) {\n\t\t\t\toption.setAttribute( 'selected', 'yes' );\n\t\t\t}\n\t\t} );\n\n\t\t// Update component.\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Un-select a value.\n\t *\n\t * @param {string} value Value to unselect.\n\t */\n\tunSelect( value: string = '' ): void {\n\t\t// Get all options with the specified value.\n\t\tconst styledSelectedOptions: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( `tp-multi-select-option[value=\"${ value }\"]` );\n\t\tstyledSelectedOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\t// Remove selected attribute.\n\t\t\toption.removeAttribute( 'selected' );\n\t\t} );\n\n\t\t// update component.\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Un-select all values.\n\t */\n\tunSelectAll(): void {\n\t\t// Get all options.\n\t\tconst styledSelectedOptions: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( 'tp-multi-select-option' );\n\t\tstyledSelectedOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\t// Remove selected attribute.\n\t\t\toption.removeAttribute( 'selected' );\n\t\t} );\n\n\t\t// Update component.\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Handle keyboard inputs.\n\t *\n\t * @param {Event} e Keyboard event.\n\t */\n\thandleKeyboardInputs( e: KeyboardEvent ): void {\n\t\t// Keyboard events.\n\t\tswitch ( e.key ) {\n\t\t\tcase 'ArrowDown':\n\t\t\t\te.preventDefault();\n\t\t\t\tthis.highlightNextOption();\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowUp':\n\t\t\t\te.preventDefault();\n\t\t\t\tthis.highlightPreviousOption();\n\t\t\t\tbreak;\n\t\t\tcase 'Enter':\n\t\t\t\tthis.toggleHighlightedOption();\n\t\t\t\tbreak;\n\t\t\tcase 'Escape':\n\t\t\t\tthis.unHighlightAllOptions();\n\t\t\t\tthis.removeAttribute( 'open' );\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\t/**\n\t * Highlight the next option.\n\t */\n\thighlightNextOption(): void {\n\t\t// Get options.\n\t\tconst options: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( 'tp-multi-select-option:not([hidden=\"yes\"])' );\n\n\t\t// Bail early if there are no  options. Set the currently highlighted option to -1 (no more options to highlight).\n\t\tif ( ! options ) {\n\t\t\tthis.currentlyHighlightedOption = -1;\n\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Find the next option to be highlighted. Assume next option is the favorable option.\n\t\tlet nextToBeHighlighted = this.currentlyHighlightedOption + 1;\n\n\t\t// Keep iterating to skip over disabled options until we find a suitable option.\n\t\twhile ( nextToBeHighlighted < options.length && options[ nextToBeHighlighted ].getAttribute( 'disabled' ) === 'yes' ) {\n\t\t\tnextToBeHighlighted++;\n\t\t}\n\n\t\t// If there are no more options to highlight, exit. Here, the last highlighted option keeps highlighted.\n\t\tif ( nextToBeHighlighted === options.length ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Remove highlight from the current option, if any.\n\t\tif ( this.currentlyHighlightedOption !== -1 ) {\n\t\t\toptions[ this.currentlyHighlightedOption ].removeAttribute( 'highlighted' );\n\t\t}\n\n\t\t// Highlight the found option.\n\t\toptions[ nextToBeHighlighted ].setAttribute( 'highlighted', 'yes' );\n\n\t\t// Scroll the highlighted option into view with smooth behavior.\n\t\toptions[ nextToBeHighlighted ].scrollIntoView( { behavior: 'smooth', block: 'nearest' } );\n\n\t\t// Update the currentlyHighlightedOption for the next iteration.\n\t\tthis.currentlyHighlightedOption = nextToBeHighlighted;\n\t}\n\n\t/**\n\t * Highlight previous option.\n\t */\n\thighlightPreviousOption(): void {\n\t\t// Get options.\n\t\tconst options: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( 'tp-multi-select-option:not([hidden=\"yes\"])' );\n\n\t\t// Bail early if there are no  options. Set the currently highlighted option to -1 (no more options to highlight).\n\t\tif ( ! options ) {\n\t\t\tthis.currentlyHighlightedOption = -1;\n\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Find the previous option to be highlighted. Assume previous option is the favorable option.\n\t\tlet previousToBeHighlighted = this.currentlyHighlightedOption - 1;\n\n\t\t// Keep iterating to skip over disabled options until we find a suitable option.\n\t\twhile ( previousToBeHighlighted >= 0 && options[ previousToBeHighlighted ].getAttribute( 'disabled' ) === 'yes' ) {\n\t\t\tpreviousToBeHighlighted--;\n\t\t}\n\n\t\t// If there are no more options to highlight, exit.\n\t\tif ( previousToBeHighlighted < 0 ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Remove highlight from the current option, if any.\n\t\tif ( this.currentlyHighlightedOption !== 0 ) {\n\t\t\toptions[ this.currentlyHighlightedOption ].removeAttribute( 'highlighted' );\n\t\t}\n\n\t\t// Highlight the found option.\n\t\toptions[ previousToBeHighlighted ].setAttribute( 'highlighted', 'yes' );\n\n\t\t// Scroll the highlighted option into view with smooth behavior.\n\t\toptions[ previousToBeHighlighted ].scrollIntoView( { behavior: 'smooth', block: 'nearest' } );\n\n\t\t// Update the currentlyHighlightedOption for the next iteration.\n\t\tthis.currentlyHighlightedOption = previousToBeHighlighted;\n\t}\n\n\t/**\n\t * Toggle highlighted option.\n\t */\n\ttoggleHighlightedOption(): void {\n\t\t// Get option and if it exists set it to null.\n\t\tconst option: TPMultiSelectOptionElement | null = this.querySelector( `tp-multi-select-option[highlighted=\"yes\"]` );\n\t\toption?.toggle( null );\n\t}\n\n\t/**\n\t * Un-highlight all options.\n\t */\n\tunHighlightAllOptions(): void {\n\t\t// Reset the currentlyHighlightedOption.\n\t\tthis.currentlyHighlightedOption = -1;\n\n\t\t// Get options.\n\t\tconst options: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( 'tp-multi-select-option' );\n\n\t\t// If there are options, un-highlight them.\n\t\tif ( options ) {\n\t\t\toptions.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\t\t// Remove highlighted attribute.\n\t\t\t\toption.removeAttribute( 'highlighted' );\n\t\t\t} );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\n\n/**\n * TP Multi Select Field.\n */\nexport class TPMultiSelectFieldElement 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\tthis.addEventListener( 'click', this.toggleOpen.bind( this ) );\n\t}\n\n\t/**\n\t * Toggle opening this component.\n\t */\n\ttoggleOpen(): void {\n\t\t// Get multi-select.\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\n\t\t// Bail early if we don't have a multi-select.\n\t\tif ( ! multiSelect ) {\n\t\t\t// Bail early.\n\t\t\treturn;\n\t\t}\n\n\t\t// Toggle open.\n\t\tif ( 'yes' === multiSelect.getAttribute( 'open' ) ) {\n\t\t\tmultiSelect.removeAttribute( 'open' );\n\t\t} else {\n\t\t\tmultiSelect.setAttribute( 'open', 'yes' );\n\t\t}\n\t}\n}\n","/**\n * TP Multi Select Placeholder.\n */\nexport class TPMultiSelectPlaceholderElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\n\n/**\n * TP Multi Select Status.\n */\nexport class TPMultiSelectStatusElement 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 to observe.\n\t\treturn [ 'total', 'format' ];\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 component.\n\t\tif ( oldValue !== newValue ) {\n\t\t\tthis.update();\n\t\t}\n\t}\n\n\t/**\n\t * Update this component.\n\t */\n\tupdate(): void {\n\t\t// Get format attribute.\n\t\tconst format: string = this.getAttribute( 'format' ) ?? '$total Selected';\n\t\tlet html: string = format.replace( '$total', this.getAttribute( 'total' ) ?? '' );\n\n\t\t// Format string includes $value.\n\t\tif ( format.includes( '$value' ) ) {\n\t\t\t// Get multi-select.\n\t\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\n\t\t\t// Check if multi-select exists.\n\t\t\tif ( multiSelect ) {\n\t\t\t\t// Get value if present or create an empty array.\n\t\t\t\tconst value: string[] = multiSelect.value ?? [];\n\t\t\t\tlet replace: string = '';\n\n\t\t\t\t// Check if value array is not empty.\n\t\t\t\tif ( value.length > 0 ) {\n\t\t\t\t\t// Get first value.\n\t\t\t\t\tconst option: TPMultiSelectOptionElement | null = multiSelect.querySelector( `tp-multi-select-option[value=\"${ value[ 0 ] }\"]` );\n\n\t\t\t\t\t// Check if option exists.\n\t\t\t\t\tif ( option ) {\n\t\t\t\t\t\treplace = option.getAttribute( 'label' ) ?? '';\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Replace $value.\n\t\t\t\thtml = html.replace( '$value', replace );\n\t\t\t}\n\t\t}\n\n\t\t// Set inner HTML.\n\t\tthis.innerHTML = html;\n\t}\n}\n","/**\n * TP Multi Select Options.\n */\nexport class TPMultiSelectOptionsElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\n\n/**\n * TP Multi Select Option.\n */\nexport class TPMultiSelectOptionElement 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 to toggle the selected state.\n\t\tthis.addEventListener( 'click', this.toggle.bind( this ) );\n\t}\n\n\t/**\n\t * Select / un-select this option.\n\t *\n\t * @param {Event} e Click event.\n\t */\n\ttoggle( e: Event | null ): void {\n\t\t// Prevent default behavior and stop propagation.\n\t\te?.preventDefault();\n\t\te?.stopPropagation();\n\n\t\t// Get multi-select element and value of option.\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\t\tconst value: string = this.getAttribute( 'value' ) ?? '';\n\n\t\t// Toggle selected state. Dispatch custom events accordingly.\n\t\tif ( 'yes' !== this.getAttribute( 'selected' ) ) {\n\t\t\tmultiSelect?.select( value );\n\t\t\tmultiSelect?.dispatchEvent( new CustomEvent( 'select', {\n\t\t\t\tbubbles: true,\n\t\t\t\tdetail: { value },\n\t\t\t} ) );\n\t\t} else {\n\t\t\tmultiSelect?.unSelect( value );\n\t\t\tmultiSelect?.dispatchEvent( new CustomEvent( 'unselect', {\n\t\t\t\tbubbles: true,\n\t\t\t\tdetail: { value },\n\t\t\t} ) );\n\t\t}\n\n\t\t// Dispatch change event.\n\t\tmultiSelect?.dispatchEvent( new CustomEvent( 'change', { bubbles: true } ) );\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\nimport { TPMultiSelectPillElement } from './tp-multi-select-pill';\n\n/**\n * TP Multi Select Search.\n */\nexport class TPMultiSelectSearchElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// get input.\n\t\tconst input: HTMLInputElement | null = this.querySelector( 'input' );\n\n\t\t// Check if input exists.\n\t\tif ( ! input ) {\n\t\t\t// No, its not. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Add event listeners.\n\t\tinput.addEventListener( 'keydown', this.handleKeyboardInputs.bind( this ) );\n\t\tinput.addEventListener( 'keyup', this.handleSearchChange.bind( this ) );\n\t\tinput.addEventListener( 'input', this.handleSearchChange.bind( this ) );\n\t\tthis.addEventListener( 'click', this.handleClick.bind( this ) );\n\t\tthis.closest( 'tp-multi-select' )?.addEventListener( 'open', this.focus.bind( this ) );\n\t}\n\n\t/**\n\t * Handle keyboard inputs.\n\t *\n\t * @param {Event} e Keyboard event.\n\t */\n\thandleKeyboardInputs( e: KeyboardEvent ): void {\n\t\t// Get multi select and search field.\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\t\tconst search: HTMLInputElement | null = this.querySelector( 'input' );\n\n\t\t// Check if multi select and search field exists.\n\t\tif ( ! multiSelect || ! search ) {\n\t\t\t// Bail early.\n\t\t\treturn;\n\t\t}\n\n\t\t// Handle keyboard inputs.\n\t\tswitch ( e.key ) {\n\t\t\tcase 'Enter':\n\t\t\t\te.preventDefault(); // Prevent inadvertent form submits.\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\n\t\t\t\tmultiSelect.setAttribute( 'open', 'yes' );\n\t\t\t\tbreak;\n\t\t\tcase 'Backspace': // Remove last pill if search is empty.\n\t\t\t\tif ( 0 === search.value.length ) {\n\t\t\t\t\tconst pill: TPMultiSelectPillElement | null = multiSelect.querySelector( 'tp-multi-select-pill:last-of-type' );\n\n\t\t\t\t\t// Check if pill exists, remove it.\n\t\t\t\t\tif ( pill ) {\n\t\t\t\t\t\tpill.removePill();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\t/**\n\t * Handle search field value changed.\n\t */\n\tprotected handleSearchChange(): void {\n\t\t// Get search field and options.\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\t\tconst search: HTMLInputElement | null = this.querySelector( 'input' );\n\t\tconst options: NodeListOf<TPMultiSelectOptionElement> | undefined = this.closest( 'tp-multi-select' )?.querySelectorAll( 'tp-multi-select-option' );\n\n\t\t// Check if multi select, search, and options field exists.\n\t\tif ( ! multiSelect || ! search || ! options ) {\n\t\t\t// Bail early.\n\t\t\treturn;\n\t\t}\n\n\t\t// Initialize matched option count.\n\t\tlet matchedOptionCount = 0;\n\t\toptions.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\t// Hide and show options based on search.\n\t\t\tif ( option.getAttribute( 'label' )?.toLowerCase().match( new RegExp( `.*${ search.value.toLowerCase().replace( /\\s/g, '.*' ) }.*` ) ) ) {\n\t\t\t\toption.removeAttribute( 'hidden' );\n\t\t\t\tmatchedOptionCount++;\n\t\t\t} else {\n\t\t\t\toption.setAttribute( 'hidden', 'yes' );\n\t\t\t}\n\t\t} );\n\n\t\t// Resize input width.\n\t\tif ( '' === search.value ) {\n\t\t\tsearch.removeAttribute( 'style' );\n\t\t} else {\n\t\t\tsearch.style.width = `${ search.value.length + 2 }ch`;\n\t\t\tmultiSelect.setAttribute( 'open', 'yes' );\n\t\t}\n\n\t\t// Show matched option count.\n\t\tmultiSelect.setAttribute( 'visible-options', matchedOptionCount.toString() );\n\t}\n\n\t/**\n\t * Handle click.\n\t *\n\t * @param {Event} e Click event.\n\t */\n\tprotected handleClick( e: Event ): void {\n\t\t// First, prevent propagation to avoid document.click set on `tp-multi-select`.\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\n\t\t// Now send the event so other stuff can work as per normal, and another event for good measure.\n\t\tthis.dispatchEvent( new CustomEvent( 'multi-select-opened' ) );\n\t\tdocument.dispatchEvent( new Event( 'click' ) );\n\n\t\t// Open multi select.\n\t\tthis.closest( 'tp-multi-select' )?.setAttribute( 'open', 'yes' );\n\t}\n\n\t/**\n\t * Clear the search field.\n\t */\n\tclear(): void {\n\t\t// Clear search field.\n\t\tconst search: HTMLInputElement | null = this.querySelector( 'input' );\n\n\t\t// Check if search field exists.\n\t\tif ( search ) {\n\t\t\t// Set value to empty string and dispatch change event.\n\t\t\tsearch.value = '';\n\t\t\tsearch.dispatchEvent( new Event( 'change' ) );\n\t\t}\n\t}\n\n\t/**\n\t * Set focus on the search field.\n\t */\n\tfocus(): void {\n\t\t// When it's focused, use search change to ensure the results are refreshed.\n\t\tthis.handleSearchChange();\n\n\t\t// Focus on input.\n\t\tthis.querySelector( 'input' )?.focus();\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\n\n/**\n * TP Multi Select Pill.\n */\nexport class TPMultiSelectPillElement 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\tthis.querySelector( 'button' )?.addEventListener( 'click', this.handleButtonClick.bind( this ) );\n\t}\n\n\t/**\n\t * Handle button click.\n\t *\n\t * @param {Event} e Click event.\n\t */\n\thandleButtonClick( e: Event | null ): void {\n\t\t// Prevent default behavior and stop propagation.\n\t\te?.preventDefault();\n\t\te?.stopPropagation();\n\n\t\t// Remove pill.\n\t\tthis.removePill();\n\t}\n\n\t/**\n\t * Remove this pill.\n\t */\n\tremovePill(): void {\n\t\t// Get multi-select.\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\n\t\t// Unselect value.\n\t\tif ( multiSelect && this.getAttribute( 'value' ) ) {\n\t\t\tmultiSelect.unSelect( this.getAttribute( 'value' ) ?? '' );\n\t\t\tmultiSelect.dispatchEvent( new CustomEvent( 'unselect', { bubbles: true } ) );\n\t\t\tmultiSelect.dispatchEvent( new CustomEvent( 'change', { bubbles: true } ) );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\nimport { TPMultiSelectPillElement } from './tp-multi-select-pill';\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\n\n/**\n * TP Multi Select Pills.\n */\nexport class TPMultiSelectPillsElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Events.\n\t\tthis.closest( 'tp-multi-select' )?.addEventListener( 'change', this.update.bind( this ) );\n\t\tthis.closest( 'tp-multi-select' )?.querySelector( 'select' )?.addEventListener( 'change', ( () => this.update() ) as EventListener );\n\n\t\t// Update.\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Update this component.\n\t */\n\tupdate(): void {\n\t\t// Get multi-select.\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\n\t\t// Bail if there's no multi-select.\n\t\tif ( ! multiSelect ) {\n\t\t\t// Bail early.\n\t\t\treturn;\n\t\t}\n\n\t\t// Determine pills.\n\t\tconst pills: NodeListOf<TPMultiSelectPillElement> | null = this.querySelectorAll( 'tp-multi-select-pill' );\n\t\tconst values: string[] = multiSelect.value ?? [];\n\t\tconst pillValues: string[] = [];\n\n\t\t// Remove pills that shouldn't exist.\n\t\tpills.forEach( ( pill: TPMultiSelectPillElement ): void => {\n\t\t\t// Get pill value.\n\t\t\tconst pillValue: string = pill.getAttribute( 'value' ) ?? '';\n\n\t\t\t// Early return if pill value is empty string.\n\t\t\tif ( '' === pillValue ) {\n\t\t\t\t// Early return.\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Add pill value to the array.\n\t\t\tpillValues.push( pillValue );\n\n\t\t\t// Remove pill if it doesn't exist in the values.\n\t\t\tif ( ! values.includes( pillValue ) ) {\n\t\t\t\tpill.remove();\n\t\t\t}\n\t\t} );\n\n\t\t// Create new pills.\n\t\tconst pillsToCreate: string[] = values.filter( ( value: string ) => ! pillValues.includes( value ) );\n\n\t\t// Create pills.\n\t\tpillsToCreate.forEach( ( pillValue: string ): void => {\n\t\t\t// Early return if pill value is empty string.\n\t\t\tif ( '' === pillValue ) {\n\t\t\t\t// Early return.\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Get multi-select option.\n\t\t\tconst multiSelectOption: TPMultiSelectOptionElement | null = multiSelect.querySelector( `tp-multi-select-option[value=\"${ pillValue }\"]` );\n\n\t\t\t// Bail early if there's no multi-select option.\n\t\t\tif ( ! multiSelectOption ) {\n\t\t\t\t// Early return.\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Add pill.\n\t\t\tthis.appendChild( this.createPill( pillValue, multiSelectOption.getAttribute( 'label' ) ?? '' ) );\n\t\t} );\n\t}\n\n\t/**\n\t * Create a new pill.\n\t *\n\t * @param {string} value Pill value.\n\t * @param {string} label Pill label.\n\t *\n\t * @return {TPMultiSelectPillElement} New pill.\n\t */\n\tcreatePill( value: string, label: string ): TPMultiSelectPillElement {\n\t\t// Create pill and set value attribute.\n\t\tconst newPill = document.createElement( 'tp-multi-select-pill' ) as TPMultiSelectPillElement;\n\t\tnewPill.setAttribute( 'value', value );\n\n\t\t// Create pill label.\n\t\tconst pillLabel: HTMLElement = document.createElement( 'span' );\n\t\tpillLabel.textContent = label;\n\n\t\t// Create pill close button.\n\t\tconst pillCloseButton: HTMLElement = document.createElement( 'button' );\n\t\tpillCloseButton.setAttribute( 'type', 'button' );\n\t\tpillCloseButton.textContent = 'x';\n\n\t\t// Add event listener.\n\t\tpillCloseButton.addEventListener( 'click', () => {\n\t\t\t// On click, run removePill method.\n\t\t\tnewPill.removePill();\n\t\t} );\n\n\t\t// Append label and close button to pill.\n\t\tnewPill.appendChild( pillLabel );\n\t\tnewPill.appendChild( pillCloseButton );\n\n\t\t// Return newPill element.\n\t\treturn newPill;\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\n\n/**\n * TP Multi Select Select All.\n */\nexport class TPMultiSelectSelectAllElement 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 listeners.\n\t\tthis.closest( 'tp-multi-select' )?.addEventListener( 'change', this.handleValueChanged.bind( this ) );\n\t\tthis.addEventListener( 'click', this.toggleSelectAll.bind( this ) );\n\t}\n\n\t/**\n\t * Handle value changed.\n\t */\n\thandleValueChanged(): void {\n\t\t// Get multi select and options.\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\t\tconst options: NodeListOf<TPMultiSelectOptionElement> | null | undefined = multiSelect?.querySelectorAll( 'tp-multi-select-option' );\n\n\t\t// Check if multi select and options exists.\n\t\tif ( ! multiSelect || ! options ) {\n\t\t\t// Bail early.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if all options are selected.\n\t\tif ( Array.from( options ).filter( ( optionNode ) => optionNode.getAttribute( 'disabled' ) !== 'yes' ).length === multiSelect.value.length ) {\n\t\t\tthis.setAttribute( 'selected', 'yes' );\n\t\t\tthis.innerHTML = this.getAttribute( 'unselect-text' ) ?? '';\n\t\t} else {\n\t\t\tthis.removeAttribute( 'selected' );\n\t\t\tthis.innerHTML = this.getAttribute( 'select-text' ) ?? '';\n\t\t}\n\t}\n\n\t/**\n\t * Toggle select all.\n\t */\n\ttoggleSelectAll(): void {\n\t\t// Get multi select.\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\n\t\t// Check if multi select exists.\n\t\tif ( ! multiSelect ) {\n\t\t\t// Bail early.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if select all is yes. Apply selectAll and unselectAll methods accordingly.\n\t\tif ( 'yes' !== this.getAttribute( 'selected' ) ) {\n\t\t\tmultiSelect.selectAll();\n\t\t\tmultiSelect.dispatchEvent( new CustomEvent( 'select-all', { bubbles: true } ) );\n\t\t} else {\n\t\t\tmultiSelect.unSelectAll();\n\t\t\tmultiSelect.dispatchEvent( new CustomEvent( 'unselect-all', { bubbles: true } ) );\n\t\t}\n\n\t\t// Dispatch change event.\n\t\tmultiSelect.dispatchEvent( new CustomEvent( 'change', { bubbles: true } ) );\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\nimport { TPMultiSelectFieldElement } from './tp-multi-select-field';\nimport { TPMultiSelectPlaceholderElement } from './tp-multi-select-placeholder';\nimport { TPMultiSelectStatusElement } from './tp-multi-select-status';\nimport { TPMultiSelectOptionsElement } from './tp-multi-select-options';\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\nimport { TPMultiSelectSearchElement } from './tp-multi-select-search';\nimport { TPMultiSelectPillElement } from './tp-multi-select-pill';\nimport { TPMultiSelectPillsElement } from './tp-multi-select-pills';\nimport { TPMultiSelectSelectAllElement } from './tp-multi-select-select-all';\n\n/**\n * Register Components.\n */\ncustomElements.define( 'tp-multi-select', TPMultiSelectElement );\ncustomElements.define( 'tp-multi-select-field', TPMultiSelectFieldElement );\ncustomElements.define( 'tp-multi-select-placeholder', TPMultiSelectPlaceholderElement );\ncustomElements.define( 'tp-multi-select-status', TPMultiSelectStatusElement );\ncustomElements.define( 'tp-multi-select-options', TPMultiSelectOptionsElement );\ncustomElements.define( 'tp-multi-select-option', TPMultiSelectOptionElement );\ncustomElements.define( 'tp-multi-select-search', TPMultiSelectSearchElement );\ncustomElements.define( 'tp-multi-select-pill', TPMultiSelectPillElement );\ncustomElements.define( 'tp-multi-select-pills', TPMultiSelectPillsElement );\ncustomElements.define( 'tp-multi-select-select-all', TPMultiSelectSelectAllElement );\n"],"names":["TPMultiSelectElement","HTMLElement","constructor","super","currentlyHighlightedOption","this","keyboardEventListener","handleKeyboardInputs","bind","document","addEventListener","handleDocumentClick","update","options","querySelector","MutationObserver","initialize","observe","childList","subtree","observedAttributes","attributeChangedCallback","name","oldValue","newValue","dispatchEvent","CustomEvent","bubbles","unHighlightAllOptions","removeEventListener","value","Array","isArray","styledOptions","querySelectorAll","forEach","option","includes","getAttribute","setAttribute","removeAttribute","selectedOptions","optionValue","push","updateFormFieldValue","styledSelectedOptions","selectField","selectOptions","from","matchingSelectOption","find","selectOption","newOption","createElement","append","remove","Event","length","status","toString","e","target","contains","selectElement","innerHTML","formReference","select","unSelectAll","search","clear","focus","selectAll","unSelect","key","preventDefault","highlightNextOption","highlightPreviousOption","toggleHighlightedOption","nextToBeHighlighted","scrollIntoView","behavior","block","previousToBeHighlighted","toggle","TPMultiSelectFieldElement","toggleOpen","multiSelect","closest","TPMultiSelectPlaceholderElement","TPMultiSelectStatusElement","_name","format","html","replace","TPMultiSelectOptionsElement","TPMultiSelectOptionElement","stopPropagation","detail","TPMultiSelectSearchElement","input","handleSearchChange","handleClick","pill","removePill","matchedOptionCount","toLowerCase","match","RegExp","style","width","TPMultiSelectPillElement","handleButtonClick","TPMultiSelectPillsElement","pills","values","pillValues","pillValue","filter","multiSelectOption","appendChild","createPill","label","newPill","pillLabel","textContent","pillCloseButton","TPMultiSelectSelectAllElement","handleValueChanged","toggleSelectAll","optionNode","customElements","define"],"sourceRoot":""}

package/dist/number-spinner/index.js

@@ -0,0 +1,2 @@
+(()=>{"use strict";class t extends HTMLElement{}class e extends HTMLElement{constructor(){var t;super(),null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.increment.bind(this))}increment(){const t=this.closest("tp-number-spinner");null==t||t.increment()}}class n extends HTMLElement{constructor(){var t;super(),null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.decrement.bind(this))}decrement(){const t=this.closest("tp-number-spinner");null==t||t.decrement()}}class s extends HTMLElement{get min(){const t=this.getAttribute("min");return t?parseInt(t):null}set min(t){this.setAttribute("min",t.toString())}get max(){const t=this.getAttribute("max");return t?parseInt(t):null}set max(t){this.setAttribute("max",t.toString())}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 value(){var t,e;return parseInt(null!==(e=null===(t=this.querySelector("tp-number-spinner-input input"))||void 0===t?void 0:t.getAttribute("value"))&&void 0!==e?e:"0")}set value(t){var e;null===(e=this.querySelector("tp-number-spinner-input input"))||void 0===e||e.setAttribute("value",t.toString())}increment(){const t=this.value,e=this.max,n=t+this.step;e&&n>e||(this.value=n)}decrement(){const t=this.value,e=this.min,n=t-this.step;e&&n<e||(this.value=n)}}customElements.define("tp-number-spinner-input",t),customElements.define("tp-number-spinner-increment",e),customElements.define("tp-number-spinner-decrement",n),customElements.define("tp-number-spinner",s)})();
+//# sourceMappingURL=index.js.map

package/dist/number-spinner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dist/number-spinner/index.js","mappings":"mBAGO,MAAMA,UAA6BC,aCKnC,MAAMC,UAAiCD,YAI7C,WAAAE,G,MAECC,QAG8B,QAA9B,EAAAC,KAAKC,cAAe,iBAAU,SAAEC,iBAAkB,QAASF,KAAKG,UAAUC,KAAMJ,MACjF,CAKA,SAAAG,GAEC,MAAME,EAAwCL,KAAKM,QAAS,qBAC5DD,SAAAA,EAAeF,WAChB,ECnBM,MAAMI,UAAiCX,YAI7C,WAAAE,G,MAECC,QAG8B,QAA9B,EAAAC,KAAKC,cAAe,iBAAU,SAAEC,iBAAkB,QAASF,KAAKQ,UAAUJ,KAAMJ,MACjF,CAKA,SAAAQ,GAEC,MAAMH,EAAwCL,KAAKM,QAAS,qBAC5DD,SAAAA,EAAeG,WAChB,ECxBM,MAAMC,UAAwBb,YAMpC,OAAIc,GAEH,MAAMA,EAAqBV,KAAKW,aAAc,OAG9C,OAAKD,EAEGE,SAAUF,GAIX,IACR,CAOA,OAAIA,CAAKA,GAERV,KAAKa,aAAc,MAAOH,EAAII,WAC/B,CAOA,OAAIC,GAEH,MAAMA,EAAqBf,KAAKW,aAAc,OAG9C,OAAKI,EAEGH,SAAUG,GAIX,IACR,CAOA,OAAIA,CAAKA,GAERf,KAAKa,aAAc,MAAOE,EAAID,WAC/B,CAOA,QAAIE,G,MAEH,OAAOJ,SAAqC,QAA3B,EAAAZ,KAAKW,aAAc,eAAQ,QAAI,IACjD,CAOA,QAAIK,CAAMA,GAEThB,KAAKa,aAAc,OAAQG,EAAKF,WACjC,CAOA,SAAIG,G,QAEH,OAAOL,SAAwF,QAA9E,EAAqD,QAArD,EAAAZ,KAAKC,cAAe,wCAAiC,eAAEU,aAAc,gBAAS,QAAI,IACpG,CAOA,SAAIM,CAAOA,G,MAE2C,QAArD,EAAAjB,KAAKC,cAAe,wCAAiC,SAAEY,aAAc,QAASI,EAAMH,WACrF,CAKA,SAAAX,GAEC,MAAMe,EAAuBlB,KAAKiB,MAC5BF,EAAqBf,KAAKe,IAC1BI,EAAmBD,EAAelB,KAAKgB,KAGxCD,GAAOI,EAAWJ,IAMvBf,KAAKiB,MAAQE,EACd,CAKA,SAAAX,GAEC,MAAMU,EAAuBlB,KAAKiB,MAC5BP,EAAqBV,KAAKU,IAC1BS,EAAmBD,EAAelB,KAAKgB,KAGxCN,GAAOS,EAAWT,IAMvBV,KAAKiB,MAAQE,EACd,EC1HDC,eAAeC,OAAQ,0BAA2B1B,GAClDyB,eAAeC,OAAQ,8BAA+BxB,GACtDuB,eAAeC,OAAQ,8BAA+Bd,GACtDa,eAAeC,OAAQ,oBAAqBZ,E","sources":["webpack://@travelopia/web-components/./src/number-spinner/tp-number-spinner-input.ts","webpack://@travelopia/web-components/./src/number-spinner/tp-number-spinner-increment.ts","webpack://@travelopia/web-components/./src/number-spinner/tp-number-spinner-decrement.ts","webpack://@travelopia/web-components/./src/number-spinner/tp-number-spinner.ts","webpack://@travelopia/web-components/./src/number-spinner/index.ts"],"sourcesContent":["/**\n * TP Number Spinner Input.\n */\nexport class TPNumberSpinnerInput extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPNumberSpinner } from './tp-number-spinner';\n\n/**\n * TP Number Spinner Increment Element.\n */\nexport class TPNumberSpinnerIncrement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Attach click event for increment.\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.increment.bind( this ) );\n\t}\n\n\t/**\n\t * Increment the value.\n\t */\n\tincrement(): void {\n\t\t// Run function on parent.\n\t\tconst numberSpinner: TPNumberSpinner | null = this.closest( 'tp-number-spinner' );\n\t\tnumberSpinner?.increment();\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPNumberSpinner } from './tp-number-spinner';\n\n/**\n * TP Number Spinner Decrement Element.\n */\nexport class TPNumberSpinnerDecrement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Attach click event for decrement.\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.decrement.bind( this ) );\n\t}\n\n\t/**\n\t * Decrement the value.\n\t */\n\tdecrement(): void {\n\t\t// Run function on parent.\n\t\tconst numberSpinner: TPNumberSpinner | null = this.closest( 'tp-number-spinner' );\n\t\tnumberSpinner?.decrement();\n\t}\n}\n","/**\n * TP Number Spinner Element.\n */\nexport class TPNumberSpinner extends HTMLElement {\n\t/**\n\t * Get minimum value.\n\t *\n\t * @return {number|null} The minimum value.\n\t */\n\tget min(): number | null {\n\t\t// Get minimum attribute.\n\t\tconst min: string | null = this.getAttribute( 'min' );\n\n\t\t// Check if we have an attribute.\n\t\tif ( min ) {\n\t\t\t// Yep, return its value.\n\t\t\treturn parseInt( min );\n\t\t}\n\n\t\t// Nope, return null.\n\t\treturn null;\n\t}\n\n\t/**\n\t * Set minimum value.\n\t *\n\t * @param {number} min Minimum value.\n\t */\n\tset min( min: number ) {\n\t\t// Set attribute.\n\t\tthis.setAttribute( 'min', min.toString() );\n\t}\n\n\t/**\n\t * Get maximum value.\n\t *\n\t * @return {number|null} The maximum value.\n\t */\n\tget max(): number | null {\n\t\t// Get maximum attribute.\n\t\tconst max: string | null = this.getAttribute( 'max' );\n\n\t\t// Check if we have an attribute.\n\t\tif ( max ) {\n\t\t\t// Yep, return its value.\n\t\t\treturn parseInt( max );\n\t\t}\n\n\t\t// Nope, return null.\n\t\treturn null;\n\t}\n\n\t/**\n\t * Set maximum value.\n\t *\n\t * @param {number} max Maximum value.\n\t */\n\tset max( max: number ) {\n\t\t// Set attribute.\n\t\tthis.setAttribute( 'max', max.toString() );\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// Get step from attribute.\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 Current step.\n\t */\n\tset step( step: number ) {\n\t\t// Set attribute.\n\t\tthis.setAttribute( 'step', step.toString() );\n\t}\n\n\t/**\n\t * Get value.\n\t *\n\t * @return {number} The value.\n\t */\n\tget value(): number {\n\t\t// Get value from input.\n\t\treturn parseInt( this.querySelector( 'tp-number-spinner-input input' )?.getAttribute( 'value' ) ?? '0' );\n\t}\n\n\t/**\n\t * Set current value.\n\t *\n\t * @param {number} value Current value.\n\t */\n\tset value( value: number ) {\n\t\t// Set input's value.\n\t\tthis.querySelector( 'tp-number-spinner-input input' )?.setAttribute( 'value', value.toString() );\n\t}\n\n\t/**\n\t * Increment.\n\t */\n\tincrement(): void {\n\t\t// Calculate new value.\n\t\tconst currentValue: number = this.value;\n\t\tconst max: number | null = this.max;\n\t\tconst newValue: number = currentValue + this.step;\n\n\t\t// Check if new value is greater than the maximum.\n\t\tif ( max && newValue > max ) {\n\t\t\t// Yes, that's not allowed.\n\t\t\treturn;\n\t\t}\n\n\t\t// No, set its value.\n\t\tthis.value = newValue;\n\t}\n\n\t/**\n\t * Decrement.\n\t */\n\tdecrement(): void {\n\t\t// Calculate new value.\n\t\tconst currentValue: number = this.value;\n\t\tconst min: number | null = this.min;\n\t\tconst newValue: number = currentValue - this.step;\n\n\t\t// Check if new value is less than the minumum.\n\t\tif ( min && newValue < min ) {\n\t\t\t// Yes, that's not allowed.\n\t\t\treturn;\n\t\t}\n\n\t\t// No, set its value.\n\t\tthis.value = newValue;\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPNumberSpinnerInput } from './tp-number-spinner-input';\nimport { TPNumberSpinnerIncrement } from './tp-number-spinner-increment';\nimport { TPNumberSpinnerDecrement } from './tp-number-spinner-decrement';\nimport { TPNumberSpinner } from './tp-number-spinner';\n\n/**\n * Register Components.\n */\ncustomElements.define( 'tp-number-spinner-input', TPNumberSpinnerInput );\ncustomElements.define( 'tp-number-spinner-increment', TPNumberSpinnerIncrement );\ncustomElements.define( 'tp-number-spinner-decrement', TPNumberSpinnerDecrement );\ncustomElements.define( 'tp-number-spinner', TPNumberSpinner );\n"],"names":["TPNumberSpinnerInput","HTMLElement","TPNumberSpinnerIncrement","constructor","super","this","querySelector","addEventListener","increment","bind","numberSpinner","closest","TPNumberSpinnerDecrement","decrement","TPNumberSpinner","min","getAttribute","parseInt","setAttribute","toString","max","step","value","currentValue","newValue","customElements","define"],"sourceRoot":""}

package/dist/number-spinner/style.css

@@ -0,0 +1 @@
+tp-number-spinner{display:contents}

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)return void("yes"===this.getAttribute("infinite")&&this.setCurrentSlide(1));const e=this.currentSlideIndex+this.step;e>t||this.setCurrentSlide(e)}previous(){if(this.currentSlideIndex<=1)return void("yes"===this.getAttribute("infinite")&&this.setCurrentSlide(this.getTotalSlides()));const t=this.currentSlideIndex-this.step;t>1?this.setCurrentSlide(t):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&&(this.updateHeight(),"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(){const t=this.querySelectorAll("tp-slider-nav-item"),e=this.querySelectorAll("tp-slider-count"),i=this.getArrow('tp-slider-arrow[direction="previous"]'),s=this.getArrow('tp-slider-arrow[direction="next"]'),r=this.getSlideElements();r&&r.forEach(((t,e)=>{this.currentSlideIndex-1===e?t.setAttribute("active","yes"):t.removeAttribute("active")})),t&&t.forEach(((t,e)=>{this.currentSlideIndex-1===e?t.setAttribute("current","yes"):t.removeAttribute("current")})),e&&(this.setAttribute("total",this.getTotalSlides().toString()),e.forEach((t=>{"function"==typeof t.update&&t.update()}))),"yes"!==this.getAttribute("infinite")?(this.getCurrentSlide()===this.getTotalSlides()?null==s||s.setAttribute("disabled","yes"):null==s||s.removeAttribute("disabled"),1===this.getCurrentSlide()?null==i||i.setAttribute("disabled","yes"):null==i||i.removeAttribute("disabled")):(null==s||s.removeAttribute("disabled"),null==i||i.removeAttribute("disabled"))}updateHeight(){const t=this.querySelector("tp-slider-slides");if(!t)return;if("yes"!==this.getAttribute("flexible-height")&&"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{}class s 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 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{}class l extends HTMLElement{constructor(){var t;super(),null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.handleClick.bind(this))}handleClick(){const t=this.closest("tp-slider");t&&t.setCurrentSlide(this.getIndex())}getIndex(){var t,e;if(this.getAttribute("index"))return parseInt(null!==(t=this.getAttribute("index"))&&void 0!==t?t:"0");const i=this.closest("tp-slider-nav");return Array.from(null!==(e=null==i?void 0:i.children)&&void 0!==e?e:[]).indexOf(this)+1}}class 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=e.currentSlideIndex-1+e.step,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-count",d),customElements.define("tp-slider",t),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",n),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))}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=this.currentSlideIndex+Math.min(this.step,t-this.currentSlideIndex-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.currentSlideIndex-this.step;t>1?this.setCurrentSlide(t):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&&(this.updateHeight(),"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(){const t=this.querySelectorAll("tp-slider-nav-item"),e=this.querySelectorAll("tp-slider-count"),i=this.getArrow('tp-slider-arrow[direction="previous"]'),s=this.getArrow('tp-slider-arrow[direction="next"]'),r=this.getSlideElements();r&&r.forEach(((t,e)=>{this.currentSlideIndex-1===e?t.setAttribute("active","yes"):t.removeAttribute("active")})),t&&t.forEach(((t,e)=>{Math.ceil(this.currentSlideIndex/this.step)-1===e?t.setAttribute("current","yes"):t.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"))}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{}class s 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 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{}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;if(this.getAttribute("index"))return parseInt(null!==(t=this.getAttribute("index"))&&void 0!==t?t:"0");const s=this.closest("tp-slider-nav"),r=null===(e=this.slider)||void 0===e?void 0:e.step;return Array.from(null!==(i=null==s?void 0:s.children)&&void 0!==i?i:[]).indexOf(this)*(null!=r?r:1)+1}}class h 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.step,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-count",h),customElements.define("tp-slider",t),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",n),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 { 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\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// We set the resize observer in `tp-slider-slide`\n\t\t\t// These are just fallbacks for browsers that don't support ResizeObserver.\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\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\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\tif ( 'current-slide' === name && oldValue !== newValue ) {\n\t\t\tthis.slide();\n\t\t\tthis.dispatchEvent( new CustomEvent( 'slide-complete', { bubbles: true } ) );\n\t\t}\n\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Get current slide index.\n\t *\n\t * @return {number} Current slide index.\n\t */\n\tget currentSlideIndex(): number {\n\t\treturn parseInt( this.getAttribute( 'current-slide' ) ?? '1' );\n\t}\n\n\t/**\n\t * Set current slide index.\n\t *\n\t * @param {number} index Slide index.\n\t */\n\tset currentSlideIndex( index: number ) {\n\t\tthis.setCurrentSlide( index );\n\t}\n\n\t/**\n\t * Get current step.\n\t *\n\t * @return {number} Current step.\n\t */\n\tget step(): number {\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\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\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\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\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = this.getSlideElements();\n\n\t\tif ( slides ) {\n\t\t\treturn slides.length;\n\t\t}\n\n\t\treturn 0;\n\t}\n\n\t/**\n\t * Get Slide Elements.\n\t */\n\tgetSlideElements() {\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\treturn slides;\n\t}\n\n\t/**\n\t * Navigate to the next slide.\n\t */\n\tnext(): void {\n\t\tconst totalSlides: number = this.getTotalSlides();\n\n\t\tif ( this.currentSlideIndex >= totalSlides ) {\n\t\t\tif ( 'yes' === this.getAttribute( 'infinite' ) ) {\n\t\t\t\tthis.setCurrentSlide( 1 );\n\t\t\t}\n\n\t\t\treturn;\n\t\t}\n\n\t\tconst nextSlideIndex: number = this.currentSlideIndex + this.step;\n\n\t\t// Check if the next slide step is not taking it beyond the last slide.\n\t\tif ( nextSlideIndex > totalSlides ) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.setCurrentSlide( nextSlideIndex );\n\t}\n\n\t/**\n\t * Navigate to the previous slide.\n\t */\n\tprevious(): void {\n\t\tif ( this.currentSlideIndex <= 1 ) {\n\t\t\tif ( 'yes' === this.getAttribute( 'infinite' ) ) {\n\t\t\t\tthis.setCurrentSlide( this.getTotalSlides() );\n\t\t\t}\n\n\t\t\treturn;\n\t\t}\n\n\t\tconst previousSlideNumber: number = this.currentSlideIndex - this.step;\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\treturn this.currentSlideIndex;\n\t}\n\n\t/**\n\t * Set the current slide index.\n\t *\n\t * @param {number} index Slide index.\n\t */\n\tsetCurrentSlide( index: number ): void {\n\t\tif ( index > this.getTotalSlides() || index <= 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.dispatchEvent( new CustomEvent( 'slide-set', {\n\t\t\tbubbles: true,\n\t\t\tdetail: {\n\t\t\t\tslideIndex: index,\n\t\t\t},\n\t\t} ) );\n\t\tthis.setAttribute( 'current-slide', index.toString() );\n\t}\n\n\t/**\n\t * Slide to the current slide.\n\t *\n\t * @protected\n\t */\n\tprotected slide(): void {\n\t\t// Check if slider is disabled.\n\t\tif ( 'yes' === this.getAttribute( 'disabled' ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Get slides.\n\t\tconst slidesContainer: TPSliderSlidesElement | null = this.querySelector( 'tp-slider-slides' );\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = this.getSlideElements();\n\t\tif ( ! slidesContainer || ! slides ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// First, update the height.\n\t\tthis.updateHeight();\n\n\t\t// Now lets slide!\n\t\tconst behaviour: string = this.getAttribute( 'behaviour' ) || '';\n\t\tif ( 'fade' !== behaviour && slides[ this.currentSlideIndex - 1 ] ) {\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 subcomponents.\n\t */\n\tupdate(): void {\n\t\t// Get subcomponents.\n\t\tconst sliderNavItems: NodeListOf<TPSliderNavItemElement> | null = this.querySelectorAll( 'tp-slider-nav-item' );\n\t\tconst 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// 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\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// Set current slider nav item.\n\t\tif ( sliderNavItems ) {\n\t\t\tsliderNavItems.forEach( ( navItem: TPSliderNavItemElement, index: number ): void => {\n\t\t\t\tif ( this.currentSlideIndex - 1 === index ) {\n\t\t\t\t\tnavItem.setAttribute( 'current', 'yes' );\n\t\t\t\t} else {\n\t\t\t\t\tnavItem.removeAttribute( 'current' );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\t// Update slider count.\n\t\tif ( 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\tif ( this.getCurrentSlide() === this.getTotalSlides() ) {\n\t\t\t\trightArrow?.setAttribute( 'disabled', 'yes' );\n\t\t\t} else {\n\t\t\t\trightArrow?.removeAttribute( 'disabled' );\n\t\t\t}\n\n\t\t\tif ( 1 === this.getCurrentSlide() ) {\n\t\t\t\tleftArrow?.setAttribute( 'disabled', 'yes' );\n\t\t\t} else {\n\t\t\t\tleftArrow?.removeAttribute( 'disabled' );\n\t\t\t}\n\t\t} else {\n\t\t\trightArrow?.removeAttribute( 'disabled' );\n\t\t\tleftArrow?.removeAttribute( 'disabled' );\n\t\t}\n\t}\n\n\t/**\n\t * Update the height of the slider based on current slide.\n\t */\n\tupdateHeight(): void {\n\t\t// Get slides container to resize.\n\t\tconst slidesContainer: TPSliderSlidesElement | null = this.querySelector( 'tp-slider-slides' );\n\t\tif ( ! slidesContainer ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Bail early if we don't want it to be flexible height - 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\t\t\treturn;\n\t\t}\n\n\t\t// Get slides.\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = this.getSlideElements();\n\t\tif ( ! slides ) {\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\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\t\t\tslides.forEach( ( slide: TPSliderSlideElement ): void => {\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\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\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\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\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\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\tif ( 'yes' !== this.getAttribute( 'swipe' ) ) {\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\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\treturn;\n\t\t}\n\n\t\t// Check for a valid interval.\n\t\tconst interval: number = parseInt( autoSlideInterval );\n\t\tif ( interval <= 0 ) {\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\n\t\t// the component is initialised.\n\t\tsetTimeout( (): void => {\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 * TP Slider Slides.\n */\nexport class TPSliderSlidesElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPSliderElement } from './tp-slider';\n\n/**\n * TP Slider Slide.\n */\nexport class TPSliderSlideElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\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\tconst slider: TPSliderElement | null = this.closest( 'tp-slider' );\n\t\tif ( ! slider ) {\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\tslider.handleResize();\n\t\t}, 0 );\n\t}\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\tsuper();\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.handleClick.bind( this ) );\n\t}\n\n\t/**\n\t * Handle when the button is clicked.\n\t */\n\thandleClick(): void {\n\t\tif ( 'yes' === this.getAttribute( 'disabled' ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst slider: TPSliderElement | null = this.closest( 'tp-slider' );\n\t\tif ( ! slider ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( 'previous' === this.getAttribute( 'direction' ) ) {\n\t\t\tslider.previous();\n\t\t} else if ( 'next' === this.getAttribute( 'direction' ) ) {\n\t\t\tslider.next();\n\t\t}\n\t}\n}\n","/**\n * TP Slider Nav.\n */\nexport class TPSliderNavElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPSliderElement } from './tp-slider';\nimport { TPSliderNavElement } from './tp-slider-nav';\n\n/**\n * TP Slider Nav Item.\n */\nexport class TPSliderNavItemElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.handleClick.bind( this ) );\n\t}\n\n\t/**\n\t * Handle when the button is clicked.\n\t */\n\thandleClick(): void {\n\t\tconst slider: TPSliderElement | null = this.closest( 'tp-slider' );\n\t\tif ( ! slider ) {\n\t\t\treturn;\n\t\t}\n\n\t\tslider.setCurrentSlide( this.getIndex() );\n\t}\n\n\t/**\n\t * Get index of this item inside the navigation.\n\t *\n\t * @return {number} Index.\n\t */\n\tgetIndex(): number {\n\t\tif ( this.getAttribute( 'index' ) ) {\n\t\t\treturn parseInt( this.getAttribute( 'index' ) ?? '0' );\n\t\t}\n\n\t\tconst slideNav: TPSliderNavElement | null = this.closest( 'tp-slider-nav' );\n\t\treturn Array.from( slideNav?.children ?? [] ).indexOf( this ) + 1;\n\t}\n}\n","/**\n * 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\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\treturn this.getAttribute( 'format' ) ?? '$current / $total';\n\t}\n\n\t/**\n\t * Set format.\n\t *\n\t * @param {string} format Format.\n\t */\n\tset format( format: string ) {\n\t\tthis.setAttribute( 'format', format );\n\t}\n\n\t/**\n\t * Attribute changed callback.\n\t */\n\tattributeChangedCallback(): void {\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Update component.\n\t */\n\tupdate(): void {\n\t\tconst slider: TPSliderElement | null = this.closest( 'tp-slider' );\n\t\tif ( ! slider ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst current: number = slider.currentSlideIndex - 1 + slider.step;\n\t\tconst total: string = slider.getAttribute( 'total' ) ?? '';\n\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\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-count', TPSliderCountElement );\ncustomElements.define( 'tp-slider', TPSliderElement );\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', TPSliderNavElement );\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","previous","previousSlideNumber","getCurrentSlide","detail","slideIndex","slidesContainer","updateHeight","style","left","offsetLeft","getArrow","selector","arrows","parentSliderElement","theArrow","forEach","arrow","closest","sliderNavItems","sliderCounts","leftArrow","rightArrow","removeAttribute","navItem","slideCount","removeProperty","currentIndex","slidesOnCurrentView","maxHeight","i","scrollHeight","height","setTimeout","updateAttributesResponsively","key","every","settings","matchMedia","media","matches","settingKey","includes","e","touches","clientX","clientY","touchEndX","changedTouches","touchEndY","swipeDistanceX","swipeDistanceY","Math","abs","autoSlideInterval","interval","TPSliderTrackElement","TPSliderSlidesElement","TPSliderSlideElement","ResizeObserver","handleHeightChange","observe","slider","TPSliderArrowElement","handleClick","TPSliderNavElement","TPSliderNavItemElement","getIndex","slideNav","Array","from","children","indexOf","TPSliderCountElement","format","current","total","innerHTML","replace","customElements","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 { 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-slide`\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 = this.currentSlideIndex + Math.min( this.step, totalSlides - this.currentSlideIndex - 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// Get previous slide index.\n\t\tconst previousSlideNumber: number = this.currentSlideIndex - this.step;\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\t\tthis.updateHeight();\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\tupdate(): void {\n\t\t// Get sub-components.\n\t\tconst sliderNavItems: NodeListOf<TPSliderNavItemElement> | null = this.querySelectorAll( 'tp-slider-nav-item' );\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// 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// Set current slider nav item.\n\t\tif ( sliderNavItems ) {\n\t\t\tsliderNavItems.forEach( ( navItem: TPSliderNavItemElement, index: number ): void => {\n\t\t\t\t// Update current attribute after considering step.\n\t\t\t\tif ( Math.ceil( this.currentSlideIndex / this.step ) - 1 === index ) {\n\t\t\t\t\tnavItem.setAttribute( 'current', 'yes' );\n\t\t\t\t} else {\n\t\t\t\t\tnavItem.removeAttribute( 'current' );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\t// Update slider count.\n\t\tif ( 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 * TP Slider Slides.\n */\nexport class TPSliderSlidesElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPSliderElement } from './tp-slider';\n\n/**\n * TP Slider Slide.\n */\nexport class TPSliderSlideElement 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 * 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 * TP Slider Nav.\n */\nexport class TPSliderNavElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPSliderElement } from './tp-slider';\nimport { TPSliderNavElement } from './tp-slider-nav';\n\n/**\n * TP Slider Nav Item.\n */\nexport class TPSliderNavItemElement extends HTMLElement {\n\t/**\n\t * 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// No, find it in the navigation.\n\t\tconst slideNav: TPSliderNavElement | null = this.closest( 'tp-slider-nav' );\n\t\tconst step = this.slider?.step;\n\n\t\t// Return index of this element considering the step value.\n\t\treturn ( Array.from( slideNav?.children ?? [] ).indexOf( this ) * ( step ?? 1 ) ) + 1;\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 step. Along with initializing total variable.\n\t\tconst current: number = Math.min( slider.currentSlideIndex - 1 + slider.step, 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-count', TPSliderCountElement );\ncustomElements.define( 'tp-slider', TPSliderElement );\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', TPSliderNavElement );\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","previousSlideNumber","getCurrentSlide","detail","slideIndex","slidesContainer","updateHeight","style","left","offsetLeft","getArrow","selector","arrows","parentSliderElement","theArrow","forEach","arrow","closest","sliderNavItems","sliderCounts","leftArrow","rightArrow","removeAttribute","navItem","ceil","slideCount","removeProperty","currentIndex","slidesOnCurrentView","maxHeight","i","scrollHeight","height","setTimeout","updateAttributesResponsively","key","every","settings","matchMedia","media","matches","settingKey","includes","e","touches","clientX","clientY","touchEndX","changedTouches","touchEndY","swipeDistanceX","swipeDistanceY","abs","autoSlideInterval","interval","TPSliderTrackElement","TPSliderSlidesElement","TPSliderSlideElement","ResizeObserver","handleHeightChange","observe","slider","TPSliderArrowElement","handleClick","TPSliderNavElement","TPSliderNavItemElement","getIndex","slideNav","Array","from","children","indexOf","TPSliderCountElement","format","current","total","innerHTML","replace","customElements","define"],"sourceRoot":""}

package/dist/tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"dist/tabs/index.js","mappings":"mBAQO,MAAMA,UAA6BC,YAIzC,WAAAC,GACCC,QAEA,MAAMC,EAAiCC,KAAKC,cAAe,KAC3DF,SAAAA,EAAMG,iBAAkB,QAASF,KAAKG,gBAAgBC,KAAMJ,MAC7D,CASU,eAAAG,CAAiBE,G,MAC1B,MAAMC,EAA6BN,KAAKO,QAAS,WAC3CR,EAAiCC,KAAKC,cAAe,KACrDO,EAA6C,QAA5B,EAAAT,aAAI,EAAJA,EAAMU,aAAc,eAAQ,QAAI,GAEhDH,GAAUP,GAAQ,KAAOS,IAI3B,QAAUF,EAAKG,aAAc,eACjCJ,EAAEK,iBAGHJ,EAAKK,aAAc,cAAeH,EAAOI,QAAS,IAAK,KACxD,CASA,YAAAC,CAAcC,EAAqB,IAClC,MAAMf,EAAiCC,KAAKC,cAAe,KAC3D,MAAO,IAAKa,OAAkBf,aAAI,EAAJA,EAAMU,aAAc,QACnD,ECjDM,MAAMM,UAAyBnB,aCA/B,MAAMoB,UAAyBpB,aCO/B,MAAMqB,UAAsBrB,YAIlC,WAAAC,GACCC,QAEAE,KAAKkB,uBACLC,OAAOjB,iBAAkB,aAAcF,KAAKkB,qBAAqBd,KAAMJ,MACxE,CAOA,6BAAWoB,GACV,MAAO,CAAE,cAAe,aAAc,WACvC,CASA,wBAAAC,CAA0BC,EAAe,GAAIC,EAAmB,GAAIC,EAAmB,IACjFD,IAAaC,IAIlBxB,KAAKyB,SAEA,gBAAkBH,GACtBtB,KAAK0B,cAAe,IAAIC,YAAa,SAAU,CAAEC,SAAS,KAE5D,CAKA,MAAAH,G,MAEC,MAAMX,EAAuD,QAAlC,EAAAd,KAAKS,aAAc,sBAAe,QAAI,GAGjE,IAAOT,KAAKC,cAAe,mBAAoBa,OAC9C,OAID,MAAMe,EAAmB7B,KAAK8B,oBAAqBhB,GAG7CiB,EAA6C/B,KAAKgC,iBAAkB,oBACrED,GACJA,EAASE,SAAWC,IACdA,EAAQrB,aAAcC,IAAkBe,GAAoBK,EAAQrB,aAAcgB,GACtFK,EAAQvB,aAAc,SAAU,OAEhCuB,EAAQC,gBAAiB,S,IAM5B,MAAM7B,EAAqCN,KAAKgC,iBAAkB,eAC7D1B,GACJA,EAAK2B,SAAWG,IACVtB,IAAesB,EAAI3B,aAAc,OAAYoB,GAAoBA,IAAqBO,EAAI3B,aAAc,MAC5G2B,EAAIzB,aAAc,OAAQ,OAE1ByB,EAAID,gBAAiB,O,GAIzB,CAKA,oBAAAjB,GACM,QAAUlB,KAAKS,aAAc,eAKlCT,KAAKqC,eACN,CAOA,aAAAA,CAAeC,EAAgB,IACzB,KAAOA,GACXtC,KAAKW,aAAc,cAAe2B,GAInC,MAAMC,EAAkBpB,OAAOqB,SAASC,KACxC,GAAK,KAAOF,EAAU,CACrB,MAAMG,EAAwC1C,KAAKC,cAAe,WAAYsC,OACxEzB,EAAa4B,aAAW,EAAXA,EAAanC,QAAS,WACzCO,SAAAA,EAAYH,aAAc,cAAe4B,EAAQ3B,QAAS,IAAK,I,CAEjE,CASA,mBAAAkB,CAAqBhB,EAAqB,IACzC,GAAK,KAAOA,EACX,MAAO,GAGR,MAAM6B,EAAoB3C,KAAKC,cAAe,mBAAoBa,OAC5D8B,EAA0BD,aAAiB,EAAjBA,EAAmB1C,cAAe,WAC5D4B,EAAmBe,aAAuB,EAAvBA,EAAyBnC,aAAc,eAEhE,OAAOoB,QAAAA,EAAoB,EAC5B,ECxHDgB,eAAeC,OAAQ,mBAAoBnD,GAC3CkD,eAAeC,OAAQ,cAAe/B,GACtC8B,eAAeC,OAAQ,cAAe9B,GACtC6B,eAAeC,OAAQ,UAAW7B,E","sources":["webpack://@travelopia/web-components/./src/tabs/tp-tabs-nav-item.ts","webpack://@travelopia/web-components/./src/tabs/tp-tabs-nav.ts","webpack://@travelopia/web-components/./src/tabs/tp-tabs-tab.ts","webpack://@travelopia/web-components/./src/tabs/tp-tabs.ts","webpack://@travelopia/web-components/./src/tabs/index.ts"],"sourcesContent":["/**\n * Internal dependencies.\n */\nimport { TPTabsElement } from './tp-tabs';\n\n/**\n * TP Tabs Nav Item Element.\n */\nexport class TPTabsNavItemElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\n\t\tconst link: HTMLAnchorElement | null = this.querySelector( 'a' );\n\t\tlink?.addEventListener( 'click', this.handleLinkClick.bind( this ) );\n\t}\n\n\t/**\n\t * Handle link click.\n\t *\n\t * @param {Event} e Click event.\n\t *\n\t * @protected\n\t */\n\tprotected handleLinkClick( e: Event ): void {\n\t\tconst tabs: TPTabsElement | null = this.closest( 'tp-tabs' );\n\t\tconst link: HTMLAnchorElement | null = this.querySelector( 'a' );\n\t\tconst anchor: string = link?.getAttribute( 'href' ) ?? '';\n\n\t\tif ( ! tabs || ! link || '' === anchor ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( 'yes' !== tabs.getAttribute( 'update-url' ) ) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\ttabs.setAttribute( 'current-tab', anchor.replace( '#', '' ) );\n\t}\n\n\t/**\n\t * Check if this component contains the link to the current tab.\n\t *\n\t * @param {string} currentTab Current tab ID.\n\t *\n\t * @return {boolean} Whether it is the current tab or not.\n\t */\n\tisCurrentTab( currentTab: string = '' ): boolean {\n\t\tconst link: HTMLAnchorElement | null = this.querySelector( 'a' );\n\t\treturn `#${ currentTab }` === link?.getAttribute( 'href' );\n\t}\n}\n","/**\n * TP Tabs Nav Element.\n */\nexport class TPTabsNavElement extends HTMLElement {\n}\n","/**\n * TP Tabs Tab Element.\n */\nexport class TPTabsTabElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\n\nimport { TPTabsNavItemElement } from './tp-tabs-nav-item';\nimport { TPTabsTabElement } from './tp-tabs-tab';\n\n/**\n * TP Tabs.\n */\nexport class TPTabsElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis.updateTabFromUrlHash();\n\t\twindow.addEventListener( 'hashchange', this.updateTabFromUrlHash.bind( this ) );\n\t}\n\n\t/**\n\t * Get observed attributes.\n\t *\n\t * @return {Array} List of observed attributes.\n\t */\n\tstatic get observedAttributes(): string[] {\n\t\treturn [ 'current-tab', 'update-url', 'overflow' ];\n\t}\n\n\t/**\n\t * Attribute changed callback.\n\t *\n\t * @param {string} name     Attribute name.\n\t * @param {string} oldValue Old value.\n\t * @param {string} newValue New value.\n\t */\n\tattributeChangedCallback( name: string = '', oldValue: string = '', newValue: string = '' ): void {\n\t\tif ( oldValue === newValue ) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.update();\n\n\t\tif ( 'current-tab' === name ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'change', { bubbles: true } ) );\n\t\t}\n\t}\n\n\t/**\n\t * Update this component.\n\t */\n\tupdate(): void {\n\t\t// Get current tab.\n\t\tconst currentTab: string = this.getAttribute( 'current-tab' ) ?? '';\n\n\t\t// Check if current tab exists.\n\t\tif ( ! this.querySelector( `tp-tabs-tab[id=\"${ currentTab }\"]` ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Get current nested tab if has.\n\t\tconst currentNestedTab = this.getCurrentNestedTab( currentTab );\n\n\t\t// Update nav items.\n\t\tconst navItems: NodeListOf<TPTabsNavItemElement> = this.querySelectorAll( 'tp-tabs-nav-item' );\n\t\tif ( navItems ) {\n\t\t\tnavItems.forEach( ( navItem: TPTabsNavItemElement ): void => {\n\t\t\t\tif ( navItem.isCurrentTab( currentTab ) || ( currentNestedTab && navItem.isCurrentTab( currentNestedTab ) ) ) {\n\t\t\t\t\tnavItem.setAttribute( 'active', 'yes' );\n\t\t\t\t} else {\n\t\t\t\t\tnavItem.removeAttribute( 'active' );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\t// Update tabs.\n\t\tconst tabs: NodeListOf<TPTabsTabElement> = this.querySelectorAll( 'tp-tabs-tab' );\n\t\tif ( tabs ) {\n\t\t\ttabs.forEach( ( tab: TPTabsTabElement ): void => {\n\t\t\t\tif ( currentTab === tab.getAttribute( 'id' ) || ( currentNestedTab && currentNestedTab === tab.getAttribute( 'id' ) ) ) {\n\t\t\t\t\ttab.setAttribute( 'open', 'yes' );\n\t\t\t\t} else {\n\t\t\t\t\ttab.removeAttribute( 'open' );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t}\n\n\t/**\n\t * Update tab from URL hash.\n\t */\n\tupdateTabFromUrlHash(): void {\n\t\tif ( 'yes' !== this.getAttribute( 'update-url' ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Set current assiociated tab.\n\t\tthis.setCurrentTab();\n\t}\n\n\t/**\n\t * Set current tab.\n\t *\n\t * @param {string} tabId Tab ID.\n\t */\n\tsetCurrentTab( tabId: string = '' ): void {\n\t\tif ( '' !== tabId ) {\n\t\t\tthis.setAttribute( 'current-tab', tabId );\n\t\t}\n\n\t\t// Set current tab based on current url hash.\n\t\tconst urlHash: string = window.location.hash;\n\t\tif ( '' !== urlHash ) {\n\t\t\tconst currentLink: HTMLAnchorElement | null = this.querySelector( `a[href=\"${ urlHash }\"]` );\n\t\t\tconst currentTab = currentLink?.closest( 'tp-tabs' );\n\t\t\tcurrentTab?.setAttribute( 'current-tab', urlHash.replace( '#', '' ) );\n\t\t}\n\t}\n\n\t/**\n\t * Get current nested tab.\n\t *\n\t * @param {string} currentTab Tab ID.\n\t *\n\t * @return {string} If has Nested current tab or empty.\n\t */\n\tgetCurrentNestedTab( currentTab: string = '' ): string {\n\t\tif ( '' === currentTab ) {\n\t\t\treturn '';\n\t\t}\n\n\t\tconst currentTabElement = this.querySelector( `tp-tabs-tab[id=\"${ currentTab }\"]` );\n\t\tconst currentNestedTabElement = currentTabElement?.querySelector( 'tp-tabs' );\n\t\tconst currentNestedTab = currentNestedTabElement?.getAttribute( 'current-tab' );\n\n\t\treturn currentNestedTab ?? '';\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPTabsNavItemElement } from './tp-tabs-nav-item';\nimport { TPTabsNavElement } from './tp-tabs-nav';\nimport { TPTabsTabElement } from './tp-tabs-tab';\nimport { TPTabsElement } from './tp-tabs';\n\n/**\n * Register Components.\n */\n\ncustomElements.define( 'tp-tabs-nav-item', TPTabsNavItemElement );\ncustomElements.define( 'tp-tabs-nav', TPTabsNavElement );\ncustomElements.define( 'tp-tabs-tab', TPTabsTabElement );\ncustomElements.define( 'tp-tabs', TPTabsElement );\n"],"names":["TPTabsNavItemElement","HTMLElement","constructor","super","link","this","querySelector","addEventListener","handleLinkClick","bind","e","tabs","closest","anchor","getAttribute","preventDefault","setAttribute","replace","isCurrentTab","currentTab","TPTabsNavElement","TPTabsTabElement","TPTabsElement","updateTabFromUrlHash","window","observedAttributes","attributeChangedCallback","name","oldValue","newValue","update","dispatchEvent","CustomEvent","bubbles","currentNestedTab","getCurrentNestedTab","navItems","querySelectorAll","forEach","navItem","removeAttribute","tab","setCurrentTab","tabId","urlHash","location","hash","currentLink","currentTabElement","currentNestedTabElement","customElements","define"],"sourceRoot":""}
+{"version":3,"file":"dist/tabs/index.js","mappings":"mBAQO,MAAMA,UAA6BC,YAIzC,WAAAC,GAECC,QAGA,MAAMC,EAAiCC,KAAKC,cAAe,KAC3DF,SAAAA,EAAMG,iBAAkB,QAASF,KAAKG,gBAAgBC,KAAMJ,MAC7D,CASU,eAAAG,CAAiBE,G,MAE1B,MAAMC,EAA6BN,KAAKO,QAAS,WAC3CR,EAAiCC,KAAKC,cAAe,KACrDO,EAA6C,QAA5B,EAAAT,aAAI,EAAJA,EAAMU,aAAc,eAAQ,QAAI,GAGhDH,GAAUP,GAAQ,KAAOS,IAM3B,QAAUF,EAAKG,aAAc,eACjCJ,EAAEK,iBAIHJ,EAAKK,aAAc,cAAeH,EAAOI,QAAS,IAAK,KACxD,CASA,YAAAC,CAAcC,EAAqB,IAElC,MAAMf,EAAiCC,KAAKC,cAAe,KAG3D,MAAO,IAAKa,OAAkBf,aAAI,EAAJA,EAAMU,aAAc,QACnD,EC3DM,MAAMM,UAAyBnB,aCA/B,MAAMoB,UAAyBpB,aCM/B,MAAMqB,UAAsBrB,YAIlC,WAAAC,GAECC,QAGAE,KAAKkB,uBAGLC,OAAOjB,iBAAkB,aAAcF,KAAKkB,qBAAqBd,KAAMJ,MACxE,CAOA,6BAAWoB,GAEV,MAAO,CAAE,cAAe,aAAc,WACvC,CASA,wBAAAC,CAA0BC,EAAe,GAAIC,EAAmB,GAAIC,EAAmB,IAEjFD,IAAaC,IAMlBxB,KAAKyB,SAGA,gBAAkBH,GACtBtB,KAAK0B,cAAe,IAAIC,YAAa,SAAU,CAAEC,SAAS,KAE5D,CAKA,MAAAH,G,MAEC,MAAMX,EAAuD,QAAlC,EAAAd,KAAKS,aAAc,sBAAe,QAAI,GAGjE,IAAOT,KAAKC,cAAe,mBAAoBa,OAE9C,OAID,MAAMe,EAAmB7B,KAAK8B,oBAAqBhB,GAG7CiB,EAA6C/B,KAAKgC,iBAAkB,oBAGrED,GACJA,EAASE,SAAWC,IAEdA,EAAQrB,aAAcC,IAAkBe,GAAoBK,EAAQrB,aAAcgB,GACtFK,EAAQvB,aAAc,SAAU,OAEhCuB,EAAQC,gBAAiB,S,IAM5B,MAAM7B,EAAqCN,KAAKgC,iBAAkB,eAG7D1B,GACJA,EAAK2B,SAAWG,IAEVtB,IAAesB,EAAI3B,aAAc,OAAYoB,GAAoBA,IAAqBO,EAAI3B,aAAc,MAC5G2B,EAAIzB,aAAc,OAAQ,OAE1ByB,EAAID,gBAAiB,O,GAIzB,CAKA,oBAAAjB,GAEM,QAAUlB,KAAKS,aAAc,eAMlCT,KAAKqC,eACN,CAOA,aAAAA,CAAeC,EAAgB,IAEzB,KAAOA,GACXtC,KAAKW,aAAc,cAAe2B,GAInC,MAAMC,EAAkBpB,OAAOqB,SAASC,KAGxC,GAAK,KAAOF,EAAU,CACrB,MAAMG,EAAwC1C,KAAKC,cAAe,WAAYsC,OACxEzB,EAAa4B,aAAW,EAAXA,EAAanC,QAAS,WACzCO,SAAAA,EAAYH,aAAc,cAAe4B,EAAQ3B,QAAS,IAAK,I,CAEjE,CASA,mBAAAkB,CAAqBhB,EAAqB,IAEzC,GAAK,KAAOA,EAEX,MAAO,GAIR,MAAM6B,EAAoB3C,KAAKC,cAAe,mBAAoBa,OAG5D8B,EAA0BD,aAAiB,EAAjBA,EAAmB1C,cAAe,WAG5D4B,EAAmBe,aAAuB,EAAvBA,EAAyBnC,aAAc,eAGhE,OAAOoB,QAAAA,EAAoB,EAC5B,ECnJDgB,eAAeC,OAAQ,mBAAoBnD,GAC3CkD,eAAeC,OAAQ,cAAe/B,GACtC8B,eAAeC,OAAQ,cAAe9B,GACtC6B,eAAeC,OAAQ,UAAW7B,E","sources":["webpack://@travelopia/web-components/./src/tabs/tp-tabs-nav-item.ts","webpack://@travelopia/web-components/./src/tabs/tp-tabs-nav.ts","webpack://@travelopia/web-components/./src/tabs/tp-tabs-tab.ts","webpack://@travelopia/web-components/./src/tabs/tp-tabs.ts","webpack://@travelopia/web-components/./src/tabs/index.ts"],"sourcesContent":["/**\n * Internal dependencies.\n */\nimport { TPTabsElement } from './tp-tabs';\n\n/**\n * TP Tabs Nav Item Element.\n */\nexport class TPTabsNavItemElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Constructor function.\n\t\tsuper();\n\n\t\t// Find the anchor element within this component and add a click event listener.\n\t\tconst link: HTMLAnchorElement | null = this.querySelector( 'a' );\n\t\tlink?.addEventListener( 'click', this.handleLinkClick.bind( this ) );\n\t}\n\n\t/**\n\t * Handle link click.\n\t *\n\t * @param {Event} e Click event.\n\t *\n\t * @protected\n\t */\n\tprotected handleLinkClick( e: Event ): void {\n\t\t// Find the closest tp-tabs element and the anchor element within this component.\n\t\tconst tabs: TPTabsElement | null = this.closest( 'tp-tabs' );\n\t\tconst link: HTMLAnchorElement | null = this.querySelector( 'a' );\n\t\tconst anchor: string = link?.getAttribute( 'href' ) ?? '';\n\n\t\t// If the tabs component, link, or anchor is missing, do nothing.\n\t\tif ( ! tabs || ! link || '' === anchor ) {\n\t\t\t// Exit if the tabs component or the link is not found.\n\t\t\treturn;\n\t\t}\n\n\t\t// If the 'update-url' attribute is not set to 'yes', prevent the default link behavior.\n\t\tif ( 'yes' !== tabs.getAttribute( 'update-url' ) ) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\t// Update the 'current-tab' attribute on the tabs component with the anchor's ID.\n\t\ttabs.setAttribute( 'current-tab', anchor.replace( '#', '' ) );\n\t}\n\n\t/**\n\t * Check if this component contains the link to the current tab.\n\t *\n\t * @param {string} currentTab Current tab ID.\n\t *\n\t * @return {boolean} Whether it is the current tab or not.\n\t */\n\tisCurrentTab( currentTab: string = '' ): boolean {\n\t\t// Find the anchor element within this component.\n\t\tconst link: HTMLAnchorElement | null = this.querySelector( 'a' );\n\n\t\t// Return true if the anchor's href matches the current tab ID.\n\t\treturn `#${ currentTab }` === link?.getAttribute( 'href' );\n\t}\n}\n","/**\n * TP Tabs Nav Element.\n */\nexport class TPTabsNavElement extends HTMLElement {\n}\n","/**\n * TP Tabs Tab Element.\n */\nexport class TPTabsTabElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPTabsNavItemElement } from './tp-tabs-nav-item';\nimport { TPTabsTabElement } from './tp-tabs-tab';\n\n/**\n * TP Tabs.\n */\nexport class TPTabsElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Update the current tab based on the URL hash.\n\t\tthis.updateTabFromUrlHash();\n\n\t\t// Listen for hash changes in the URL and update the tab accordingly.\n\t\twindow.addEventListener( 'hashchange', this.updateTabFromUrlHash.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// Attributes observed in the TPTabsElement web-component.\n\t\treturn [ 'current-tab', 'update-url', 'overflow' ];\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// If the attribute value hasn't changed, do nothing.\n\t\tif ( oldValue === newValue ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Update the component whenever an observed attribute changes.\n\t\tthis.update();\n\n\t\t// If the 'current-tab' attribute has changed, dispatch a 'change' event.\n\t\tif ( 'current-tab' === name ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'change', { bubbles: true } ) );\n\t\t}\n\t}\n\n\t/**\n\t * Update this component.\n\t */\n\tupdate(): void {\n\t\t// Get current tab.\n\t\tconst currentTab: string = this.getAttribute( 'current-tab' ) ?? '';\n\n\t\t// Check if current tab exists.\n\t\tif ( ! this.querySelector( `tp-tabs-tab[id=\"${ currentTab }\"]` ) ) {\n\t\t\t// Exit if no matching tab is found.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get current nested tab if has.\n\t\tconst currentNestedTab = this.getCurrentNestedTab( currentTab );\n\n\t\t// Update nav items.\n\t\tconst navItems: NodeListOf<TPTabsNavItemElement> = this.querySelectorAll( 'tp-tabs-nav-item' );\n\n\t\t// Update the navigation items based on the current tab.\n\t\tif ( navItems ) {\n\t\t\tnavItems.forEach( ( navItem: TPTabsNavItemElement ): void => {\n\t\t\t\t// If the nav item corresponds to the current tab or nested tab, set it as active.\n\t\t\t\tif ( navItem.isCurrentTab( currentTab ) || ( currentNestedTab && navItem.isCurrentTab( currentNestedTab ) ) ) {\n\t\t\t\t\tnavItem.setAttribute( 'active', 'yes' );\n\t\t\t\t} else {\n\t\t\t\t\tnavItem.removeAttribute( 'active' );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\t// Update tabs.\n\t\tconst tabs: NodeListOf<TPTabsTabElement> = this.querySelectorAll( 'tp-tabs-tab' );\n\n\t\t// Update the tab panels based on the current tab.\n\t\tif ( tabs ) {\n\t\t\ttabs.forEach( ( tab: TPTabsTabElement ): void => {\n\t\t\t\t// If the tab corresponds to the current tab or nested tab, open it.\n\t\t\t\tif ( currentTab === tab.getAttribute( 'id' ) || ( currentNestedTab && currentNestedTab === tab.getAttribute( 'id' ) ) ) {\n\t\t\t\t\ttab.setAttribute( 'open', 'yes' );\n\t\t\t\t} else {\n\t\t\t\t\ttab.removeAttribute( 'open' );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t}\n\n\t/**\n\t * Update tab from URL hash.\n\t */\n\tupdateTabFromUrlHash(): void {\n\t\t// If 'update-url' attribute is not set to 'yes', do nothing.\n\t\tif ( 'yes' !== this.getAttribute( 'update-url' ) ) {\n\t\t\t// Exit if the 'update-url' attribute is not enabled.\n\t\t\treturn;\n\t\t}\n\n\t\t// Set current associated tab.\n\t\tthis.setCurrentTab();\n\t}\n\n\t/**\n\t * Set current tab.\n\t *\n\t * @param {string} tabId Tab ID.\n\t */\n\tsetCurrentTab( tabId: string = '' ): void {\n\t\t// If a tab ID is provided, set it as the current tab.\n\t\tif ( '' !== tabId ) {\n\t\t\tthis.setAttribute( 'current-tab', tabId );\n\t\t}\n\n\t\t// Set current tab based on current url hash.\n\t\tconst urlHash: string = window.location.hash;\n\n\t\t// Find the link that matches the URL hash.\n\t\tif ( '' !== urlHash ) {\n\t\t\tconst currentLink: HTMLAnchorElement | null = this.querySelector( `a[href=\"${ urlHash }\"]` );\n\t\t\tconst currentTab = currentLink?.closest( 'tp-tabs' );\n\t\t\tcurrentTab?.setAttribute( 'current-tab', urlHash.replace( '#', '' ) );\n\t\t}\n\t}\n\n\t/**\n\t * Get current nested tab.\n\t *\n\t * @param {string} currentTab Tab ID.\n\t *\n\t * @return {string} If has Nested current tab or empty.\n\t */\n\tgetCurrentNestedTab( currentTab: string = '' ): string {\n\t\t// If no current tab is provided, return an empty string.\n\t\tif ( '' === currentTab ) {\n\t\t\t// Exit if no current tab is provided.\n\t\t\treturn '';\n\t\t}\n\n\t\t// Find the element corresponding to the current tab ID.\n\t\tconst currentTabElement = this.querySelector( `tp-tabs-tab[id=\"${ currentTab }\"]` );\n\n\t\t// Find the nested tp-tabs element within the current tab.\n\t\tconst currentNestedTabElement = currentTabElement?.querySelector( 'tp-tabs' );\n\n\t\t// Get the ID of the current nested tab, if any.\n\t\tconst currentNestedTab = currentNestedTabElement?.getAttribute( 'current-tab' );\n\n\t\t// Return the nested tab ID, or an empty string if none exists.\n\t\treturn currentNestedTab ?? '';\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPTabsNavItemElement } from './tp-tabs-nav-item';\nimport { TPTabsNavElement } from './tp-tabs-nav';\nimport { TPTabsTabElement } from './tp-tabs-tab';\nimport { TPTabsElement } from './tp-tabs';\n\n/**\n * Register Components.\n */\n\n// Register components.\ncustomElements.define( 'tp-tabs-nav-item', TPTabsNavItemElement );\ncustomElements.define( 'tp-tabs-nav', TPTabsNavElement );\ncustomElements.define( 'tp-tabs-tab', TPTabsTabElement );\ncustomElements.define( 'tp-tabs', TPTabsElement );\n"],"names":["TPTabsNavItemElement","HTMLElement","constructor","super","link","this","querySelector","addEventListener","handleLinkClick","bind","e","tabs","closest","anchor","getAttribute","preventDefault","setAttribute","replace","isCurrentTab","currentTab","TPTabsNavElement","TPTabsTabElement","TPTabsElement","updateTabFromUrlHash","window","observedAttributes","attributeChangedCallback","name","oldValue","newValue","update","dispatchEvent","CustomEvent","bubbles","currentNestedTab","getCurrentNestedTab","navItems","querySelectorAll","forEach","navItem","removeAttribute","tab","setCurrentTab","tabId","urlHash","location","hash","currentLink","currentTabElement","currentNestedTabElement","customElements","define"],"sourceRoot":""}