@travelopia/web-components 0.9.10 → 0.9.12

package/dist/lightbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"dist/lightbox/index.js","mappings":"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","sources":["webpack://@travelopia/web-components/./src/lightbox/tp-lightbox.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-content.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-close.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-previous.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-next.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-count.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-trigger.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-nav.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-nav-item.ts","webpack://@travelopia/web-components/./src/lightbox/index.ts"],"sourcesContent":["/**\n * Internal dependencies.\n */\nimport { TPLightboxContentElement } from './tp-lightbox-content';\nimport { TPLightboxPreviousElement } from './tp-lightbox-previous';\nimport { TPLightboxNextElement } from './tp-lightbox-next';\nimport { TPLightboxTriggerElement } from './tp-lightbox-trigger';\nimport { TPLightboxCountElement } from './tp-lightbox-count';\nimport { TPLightboxNavItemElement } from './tp-lightbox-nav-item';\n\n/**\n * TP Lightbox.\n */\nexport class TPLightboxElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected currentTemplate: HTMLTemplateElement | null = null;\n\tprotected currentGroup: string = '';\n\tprotected allGroups: NodeListOf<TPLightboxTriggerElement> | null = null;\n\tprotected touchStartX: number = 0;\n\tprotected touchStartY: number = 0;\n\tprotected swipeThreshold: number = 200;\n\tprotected dialogElement: HTMLDialogElement | null;\n\tprotected lightboxNavItems: NodeListOf<TPLightboxNavItemElement> | null;\n\tprotected previouslyFocusedElement: HTMLElement | null = null;\n\tprotected readonly boundHandleKeyDown: ( e: KeyboardEvent ) => void;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Bind event handlers.\n\t\tthis.boundHandleKeyDown = this.handleKeyDown.bind( this );\n\n\t\t// Initialize\n\t\tthis.dialogElement = this.querySelector( 'dialog' );\n\t\tthis.lightboxNavItems = this.querySelectorAll( 'tp-lightbox-nav-item' );\n\n\t\t// Event listeners.\n\t\tthis.dialogElement?.addEventListener( 'click', this.handleDialogClick.bind( this ) );\n\t\tthis.dialogElement?.addEventListener( 'touchstart', this.handleTouchStart.bind( this ) );\n\t\tthis.dialogElement?.addEventListener( 'touchend', this.handleTouchEnd.bind( this ) );\n\t}\n\n\t/**\n\t * Get observed attributes.\n\t *\n\t * @return {Array} List of observed attributes.\n\t */\n\tstatic get observedAttributes(): string[] {\n\t\t// Attributes to observe.\n\t\treturn [ 'open', 'index', 'total', 'close-on-overlay-click', 'loading' ];\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// Prevent redundant updates.\n\t\tif ( oldValue === newValue ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Trigger change event.\n\t\tthis.dispatchEvent( new CustomEvent( 'change' ) );\n\n\t\t// Trigger current index target if index has changed.\n\t\tif ( 'index' === name ) {\n\t\t\tthis.triggerCurrentIndexTarget();\n\t\t}\n\n\t\t// Trigger navigation update if open or index has changed.\n\t\tif ( 'open' === name || 'index' === name ) {\n\t\t\tthis.updateNavCurrentItem();\n\t\t}\n\t}\n\n\t/**\n\t * Check if ARIA management is enabled.\n\t *\n\t * @return {boolean} Whether ARIA is enabled.\n\t */\n\tisAriaEnabled(): boolean {\n\t\t// Return whether ARIA management is enabled (default: yes).\n\t\treturn 'no' !== this.getAttribute( 'aria' );\n\t}\n\n\t/**\n\t * Get template.\n\t */\n\tget template(): HTMLTemplateElement | null {\n\t\t// Return current template.\n\t\treturn this.currentTemplate;\n\t}\n\n\t/**\n\t * Set template.\n\t *\n\t * @param {HTMLTemplateElement} template The template.\n\t */\n\tset template( template: HTMLTemplateElement | null ) {\n\t\t// Set the template.\n\t\tthis.currentTemplate = template;\n\t\tthis.dispatchEvent( new CustomEvent( 'template-set' ) );\n\n\t\t// Get lightbox content element.\n\t\tconst content: TPLightboxContentElement | null = this.querySelector( 'tp-lightbox-content' );\n\n\t\t// Check if we have a content.\n\t\tif ( ! content ) {\n\t\t\t// No we don't. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if we have a template.\n\t\tif ( this.currentTemplate ) {\n\t\t\t/**\n\t\t\t * We do, update content with template's content.\n\t\t\t * We do this rather than a string to avoid script injection.\n\t\t\t */\n\t\t\tconst templateContent: Node = this.currentTemplate.content.cloneNode( true );\n\t\t\tcontent.replaceChildren( templateContent );\n\t\t\tthis.dispatchEvent( new CustomEvent( 'content-change' ) );\n\n\t\t\t// Prepare image loading.\n\t\t\tsetTimeout( (): void => {\n\t\t\t\t// We do, prepare image loading.\n\t\t\t\tthis.prepareImageLoading();\n\t\t\t\tthis.prepareNavigation();\n\t\t\t}, 0 );\n\t\t} else {\n\t\t\t// We don't, set content as empty.\n\t\t\tcontent.innerHTML = '';\n\t\t}\n\t}\n\n\t/**\n\t * Get current group.\n\t */\n\tget group(): string {\n\t\t// Return current group.\n\t\treturn this.currentGroup;\n\t}\n\n\t/**\n\t * Set current group.\n\t *\n\t * @param {string} group Group name.\n\t */\n\tset group( group: string ) {\n\t\t// Set current group.\n\t\tthis.currentGroup = group;\n\t}\n\n\t/**\n\t * Get current index.\n\t */\n\tget currentIndex(): number {\n\t\t// Return current index.\n\t\treturn parseInt( this.getAttribute( 'index' ) ?? '1' );\n\t}\n\n\t/**\n\t * Set current index.\n\t *\n\t * @param {number} index Current index.\n\t */\n\tset currentIndex( index: number ) {\n\t\t// Set current index.\n\t\tif ( index < 1 ) {\n\t\t\tindex = 1;\n\t\t}\n\n\t\t// Setting this attributes triggers a re-trigger.\n\t\tthis.setAttribute( 'index', index.toString() );\n\n\t\t// dispatch slide-set event.\n\t\tthis.dispatchEvent( new CustomEvent( 'slide-set', {\n\t\t\tdetail: {\n\t\t\t\tslideIndex: index,\n\t\t\t},\n\t\t} ) );\n\t}\n\n\t/**\n\t * Trigger the target that matches the current index within current group.\n\t */\n\ttriggerCurrentIndexTarget(): void {\n\t\t// Get all groups and check if current index exists within group.\n\t\tconst allGroups: NodeListOf<TPLightboxTriggerElement> | null = this.getAllGroups();\n\n\t\t// Bail early if we don't have groups.\n\t\tif ( ! allGroups || ! allGroups[ this.currentIndex - 1 ] ) {\n\t\t\t// No we don't. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Trigger element within group.\n\t\tallGroups[ this.currentIndex - 1 ].trigger();\n\t}\n\n\t/**\n\t * Open lightbox.\n\t */\n\topen(): void {\n\t\t// Get the dialog element.\n\t\tconst dialog: HTMLDialogElement | null = this.querySelector( 'dialog' );\n\n\t\t// Check if dialog exists or is already open.\n\t\tif ( ! dialog || dialog.open ) {\n\t\t\t// Yes it is, Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Save the currently focused element to restore later (if manage-focus is enabled).\n\t\tif ( 'no' !== this.getAttribute( 'manage-focus' ) ) {\n\t\t\tthis.previouslyFocusedElement = this.ownerDocument.activeElement as HTMLElement;\n\t\t}\n\n\t\t// First, take this opportunity to update all groups (if it wasn't set from the trigger).\n\t\tif ( '' !== this.group && ! this.allGroups ) {\n\t\t\tthis.updateAllGroups();\n\t\t}\n\n\t\t// Now, show the modal.\n\t\tdialog.showModal();\n\t\tthis.setAttribute( 'open', 'yes' );\n\n\t\t// Add keyboard event listener for arrow navigation.\n\t\tdocument.addEventListener( 'keydown', this.boundHandleKeyDown );\n\n\t\t// Move focus into the lightbox (if manage-focus is enabled).\n\t\tif ( 'no' !== this.getAttribute( 'manage-focus' ) ) {\n\t\t\tthis.setInitialFocus();\n\t\t}\n\t}\n\n\t/**\n\t * Close lightbox.\n\t */\n\tclose(): void {\n\t\t// Remove keyboard event listener.\n\t\tdocument.removeEventListener( 'keydown', this.boundHandleKeyDown );\n\n\t\t// Find and close the dialog.\n\t\tconst dialog: HTMLDialogElement | null = this.querySelector( 'dialog' );\n\t\tdialog?.close();\n\t\tthis.removeAttribute( 'open' );\n\n\t\t// Restore focus to the previously focused element (if manage-focus is enabled).\n\t\tif ( 'no' !== this.getAttribute( 'manage-focus' ) && this.previouslyFocusedElement ) {\n\t\t\tthis.previouslyFocusedElement.focus();\n\t\t\tthis.previouslyFocusedElement = null;\n\t\t}\n\n\t\t// Clear groups from memory.\n\t\tthis.allGroups = null;\n\t}\n\n\t/**\n\t * Navigate previous.\n\t */\n\tprevious(): void {\n\t\t// Check if we even have a group.\n\t\tif ( '' === this.group ) {\n\t\t\t// No we don't. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if we have elements within group.\n\t\tconst allGroups: NodeListOf<TPLightboxTriggerElement> | null = this.getAllGroups();\n\n\t\t// Bail early if we don't have groups.\n\t\tif ( ! allGroups ) {\n\t\t\t// No we don't. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Decrement the current index.\n\t\tif ( this.currentIndex > 1 ) {\n\t\t\tthis.currentIndex--;\n\t\t}\n\t}\n\n\t/**\n\t * Navigate next.\n\t */\n\tnext(): void {\n\t\t// Check if we even have a group.\n\t\tif ( '' === this.group ) {\n\t\t\t// No we don't. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if we have elements within group.\n\t\tconst allGroups: NodeListOf<TPLightboxTriggerElement> | null = this.getAllGroups();\n\n\t\t// Bail early if we don't have groups.\n\t\tif ( ! allGroups ) {\n\t\t\t// No we don't. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Increment the current index.\n\t\tif ( this.currentIndex < allGroups.length ) {\n\t\t\tthis.currentIndex++;\n\t\t}\n\t}\n\n\t/**\n\t * Update all groups and save it to memory.\n\t *\n\t * @param {NodeList} allGroups All groups.\n\t */\n\tupdateAllGroups( allGroups: NodeListOf<TPLightboxTriggerElement> | null = null ): void {\n\t\t// Update all groups.\n\t\tif ( allGroups && allGroups.length ) {\n\t\t\tthis.allGroups = allGroups;\n\t\t\tthis.setAttribute( 'total', this.allGroups.length.toString() );\n\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get all groups.\n\t\tthis.allGroups = document.querySelectorAll( `tp-lightbox-trigger[group=\"${ this.group }\"]` );\n\n\t\t// Update total.\n\t\tif ( ! this.allGroups.length ) {\n\t\t\tthis.allGroups = null;\n\t\t} else {\n\t\t\tthis.setAttribute( 'total', this.allGroups.length.toString() );\n\t\t}\n\t}\n\n\t/**\n\t * Get all groups from memory.\n\t */\n\tgetAllGroups(): NodeListOf<TPLightboxTriggerElement> | null {\n\t\t// Return all groups.\n\t\treturn this.allGroups;\n\t}\n\n\t/**\n\t * Prepare navigation.\n\t */\n\tprepareNavigation(): void {\n\t\t// Update counter.\n\t\tconst count: TPLightboxCountElement | null = this.querySelector( 'tp-lightbox-count' );\n\t\tcount?.update();\n\n\t\t// Get previous and next elements.\n\t\tconst previous: TPLightboxPreviousElement | null = this.querySelector( 'tp-lightbox-previous' );\n\t\tconst next: TPLightboxNextElement | null = this.querySelector( 'tp-lightbox-next' );\n\n\t\t// Bail early if we don't have either.\n\t\tif ( ! previous && ! next ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get buttons inside prev/next for ARIA.\n\t\tconst previousButton: HTMLButtonElement | null = previous?.querySelector( 'button' ) ?? null;\n\t\tconst nextButton: HTMLButtonElement | null = next?.querySelector( 'button' ) ?? null;\n\t\tconst ariaEnabled: boolean = this.isAriaEnabled();\n\n\t\t// Check if we have a group.\n\t\tif ( '' === this.group ) {\n\t\t\tprevious?.setAttribute( 'disabled', 'yes' );\n\t\t\tnext?.setAttribute( 'disabled', 'yes' );\n\n\t\t\t// Set aria-disabled on buttons.\n\t\t\tif ( ariaEnabled ) {\n\t\t\t\tpreviousButton?.setAttribute( 'aria-disabled', 'true' );\n\t\t\t\tnextButton?.setAttribute( 'aria-disabled', 'true' );\n\t\t\t}\n\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if we have elements within the group.\n\t\tconst allGroups: NodeListOf<TPLightboxTriggerElement> | null = this.getAllGroups();\n\n\t\t// Disable if we don't have any.\n\t\tif ( ! allGroups ) {\n\t\t\tprevious?.setAttribute( 'disabled', 'yes' );\n\t\t\tnext?.setAttribute( 'disabled', 'yes' );\n\n\t\t\t// Set aria-disabled on buttons.\n\t\t\tif ( ariaEnabled ) {\n\t\t\t\tpreviousButton?.setAttribute( 'aria-disabled', 'true' );\n\t\t\t\tnextButton?.setAttribute( 'aria-disabled', 'true' );\n\t\t\t}\n\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Enable / disable previous navigation.\n\t\tif ( this.currentIndex <= 1 ) {\n\t\t\tprevious?.setAttribute( 'disabled', 'yes' );\n\n\t\t\t// Set aria-disabled on previous button.\n\t\t\tif ( ariaEnabled ) {\n\t\t\t\tpreviousButton?.setAttribute( 'aria-disabled', 'true' );\n\t\t\t}\n\t\t} else {\n\t\t\tprevious?.removeAttribute( 'disabled' );\n\n\t\t\t// Remove aria-disabled from previous button.\n\t\t\tif ( ariaEnabled ) {\n\t\t\t\tpreviousButton?.removeAttribute( 'aria-disabled' );\n\t\t\t}\n\t\t}\n\n\t\t// Enable / disable next navigation.\n\t\tif ( this.currentIndex < allGroups.length ) {\n\t\t\tnext?.removeAttribute( 'disabled' );\n\n\t\t\t// Remove aria-disabled from next button.\n\t\t\tif ( ariaEnabled ) {\n\t\t\t\t// Next is at the end, disable it.\n\t\t\t\tnextButton?.removeAttribute( 'aria-disabled' );\n\t\t\t}\n\t\t} else {\n\t\t\tnext?.setAttribute( 'disabled', 'yes' );\n\n\t\t\t// Set aria-disabled on next button.\n\t\t\tif ( ariaEnabled ) {\n\t\t\t\tnextButton?.setAttribute( 'aria-disabled', 'true' );\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Prepare image loading.\n\t */\n\tprepareImageLoading(): void {\n\t\t// Get lightbox content element.\n\t\tconst content: TPLightboxContentElement | null = this.querySelector( 'tp-lightbox-content' );\n\n\t\t// Bail early if we don't have content.\n\t\tif ( ! content ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Bail if there are no images within current content.\n\t\tconst images: NodeListOf<HTMLImageElement> = content.querySelectorAll( 'img' );\n\n\t\t// Exit early if there are no images.\n\t\tif ( ! images.length ) {\n\t\t\tthis.removeAttribute( 'loading' );\n\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Start off by setting the state as loading.\n\t\tthis.setAttribute( 'loading', 'yes' );\n\n\t\t// Prepare increment variables.\n\t\tlet counter: number = 0;\n\t\tconst totalImages: number = images.length;\n\n\t\t/**\n\t\t * Increment counter.\n\t\t */\n\t\tconst incrementLoadingCounter = (): void => {\n\t\t\t// Increment\n\t\t\tcounter++;\n\n\t\t\t// Remove loading attribute once all images have loaded.\n\t\t\tif ( counter === totalImages ) {\n\t\t\t\tthis.removeAttribute( 'loading' );\n\t\t\t}\n\t\t};\n\n\t\t// Check if images have loaded, else add an event listener.\n\t\timages.forEach( ( image: HTMLImageElement ): void => {\n\t\t\t// Check if image has loaded.\n\t\t\tif ( image.complete ) {\n\t\t\t\tincrementLoadingCounter();\n\t\t\t} else {\n\t\t\t\timage.addEventListener( 'load', incrementLoadingCounter, { once: true } );\n\t\t\t}\n\t\t} );\n\t}\n\n\t/**\n\t * Handle when the dialog is clicked.\n\t *\n\t * @param {Event} e Click event.\n\t */\n\thandleDialogClick( e: MouseEvent ): void {\n\t\t// Close on overlay click.\n\t\tif (\n\t\t\t'yes' === this.getAttribute( 'close-on-overlay-click' ) &&\n\t\t\tthis.querySelector( 'dialog' ) === e.target\n\t\t) {\n\t\t\tthis.close();\n\t\t}\n\t}\n\n\t/**\n\t * Handles the touch start event.\n\t *\n\t * @param { TouchEvent } evt The touch event.\n\t */\n\thandleTouchStart( evt: TouchEvent ): void {\n\t\t// Check if we should allow swiping?\n\t\tif ( 'yes' !== this.getAttribute( 'swipe' ) ) {\n\t\t\t// Nope.\n\t\t\treturn;\n\t\t}\n\n\t\t// Set the start points.\n\t\tthis.touchStartX = evt.touches[ 0 ].clientX;\n\t\tthis.touchStartY = evt.touches[ 0 ].clientY;\n\t}\n\n\t/**\n\t * Handles the touch end event.\n\t *\n\t * @param { TouchEvent } evt The touch event.\n\t */\n\thandleTouchEnd( evt: TouchEvent ): void {\n\t\t// Check if we should allow swiping?\n\t\tif ( 'yes' !== this.getAttribute( 'swipe' ) ) {\n\t\t\t// Nope.\n\t\t\treturn;\n\t\t}\n\n\t\t// Calculate the distances.\n\t\tconst touchEndX: number = evt.changedTouches[ 0 ].clientX;\n\t\tconst touchEndY: number = evt.changedTouches[ 0 ].clientY;\n\t\tconst swipeDistanceX: number = touchEndX - this.touchStartX;\n\t\tconst swipeDistanceY: number = touchEndY - this.touchStartY;\n\n\t\t// Is this horizontal swipe?\n\t\tconst isHorizontalSwipe = Math.abs( swipeDistanceX ) > Math.abs( swipeDistanceY );\n\n\t\t// Check if this was a horizontal swipe?\n\t\tif ( ! isHorizontalSwipe ) {\n\t\t\t// Bail.\n\t\t\treturn;\n\t\t}\n\n\t\t// Swipe settings\n\t\tthis.swipeThreshold = Number( this.getAttribute( 'swipe-threshold' ) ?? '200' );\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 * Update current item in navigation.\n\t */\n\tupdateNavCurrentItem(): void {\n\t\t// Bail if we don't have nav items.\n\t\tif ( ! this.lightboxNavItems ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if ARIA management is enabled.\n\t\tconst ariaEnabled = this.isAriaEnabled();\n\n\t\t// Update current item.\n\t\tthis.lightboxNavItems.forEach( ( navItem: TPLightboxNavItemElement, index: number ): void => {\n\t\t\t// Get the button inside the nav item.\n\t\t\tconst button: HTMLButtonElement | null = navItem.querySelector( 'button' );\n\n\t\t\t// Update current attribute.\n\t\t\tif ( this.currentIndex - 1 === index ) {\n\t\t\t\tnavItem.setAttribute( 'current', 'yes' );\n\n\t\t\t\t// Set aria-current on the button (if ARIA is enabled).\n\t\t\t\tif ( ariaEnabled && button ) {\n\t\t\t\t\tbutton.setAttribute( 'aria-current', 'true' );\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tnavItem.removeAttribute( 'current' );\n\n\t\t\t\t// Remove aria-current from the button (if ARIA is enabled).\n\t\t\t\tif ( ariaEnabled && button ) {\n\t\t\t\t\tbutton.removeAttribute( 'aria-current' );\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t}\n\n\t/**\n\t * Set initial focus when lightbox opens.\n\t * Looks for [autofocus] element, otherwise focuses the dialog.\n\t */\n\tprivate setInitialFocus(): void {\n\t\t// Look for an element with autofocus attribute.\n\t\tconst autofocusElement = this.querySelector<HTMLElement>( '[autofocus]' );\n\n\t\t// Do we have an autofocus element?\n\t\tif ( autofocusElement ) {\n\t\t\tautofocusElement.focus();\n\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Otherwise, focus the dialog itself.\n\t\tthis.dialogElement?.focus();\n\t}\n\n\t/**\n\t * Handle keydown events for arrow navigation.\n\t *\n\t * @param {KeyboardEvent} e Keyboard event.\n\t */\n\tprivate handleKeyDown( e: KeyboardEvent ): void {\n\t\t// Check if arrow navigation is enabled (disabled by default).\n\t\tif ( 'yes' !== this.getAttribute( 'arrow-navigation' ) ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Navigate on arrow keys.\n\t\tif ( 'ArrowLeft' === e.key ) {\n\t\t\te.preventDefault();\n\t\t\tthis.previous();\n\t\t} else if ( 'ArrowRight' === e.key ) {\n\t\t\te.preventDefault();\n\t\t\tthis.next();\n\t\t}\n\t}\n}\n","/**\n * TP Lightbox Content.\n */\nexport class TPLightboxContentElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPLightboxElement } from './tp-lightbox';\n\n/**\n * TP Lightbox Close.\n */\nexport class TPLightboxCloseElement 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.querySelector( 'button' )?.addEventListener( 'click', this.close.bind( this ) );\n\t}\n\n\t/**\n\t * Close the lightbox.\n\t */\n\tclose(): void {\n\t\t// Get lightbox.\n\t\tconst lightbox: TPLightboxElement | null = this.closest( 'tp-lightbox' );\n\n\t\t// Check if we have a lightbox.\n\t\tif ( lightbox ) {\n\t\t\tsetTimeout( (): void => {\n\t\t\t\t// Close the lightbox.\n\t\t\t\tlightbox.close();\n\t\t\t}, 0 );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPLightboxElement } from './tp-lightbox';\n\n/**\n * TP Lightbox Close.\n */\nexport class TPLightboxPreviousElement 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.querySelector( 'button' )?.addEventListener( 'click', this.previous.bind( this ) );\n\t}\n\n\t/**\n\t * Navigate previous.\n\t */\n\tprevious(): void {\n\t\t// Check if we are disabled.\n\t\tif ( 'yes' === this.getAttribute( 'disabled' ) ) {\n\t\t\t// No we don't. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get lightbox.\n\t\tconst lightbox: TPLightboxElement | null = this.closest( 'tp-lightbox' );\n\n\t\t// Check if we have a lightbox.\n\t\tif ( lightbox ) {\n\t\t\tsetTimeout( (): void => {\n\t\t\t\t// Previous.\n\t\t\t\tlightbox.previous();\n\t\t\t}, 0 );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPLightboxElement } from './tp-lightbox';\n\n/**\n * TP Lightbox Close.\n */\nexport class TPLightboxNextElement 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.querySelector( 'button' )?.addEventListener( 'click', this.next.bind( this ) );\n\t}\n\n\t/**\n\t * Navigate next.\n\t */\n\tnext(): void {\n\t\t// Check if next is disabled.\n\t\tif ( 'yes' === this.getAttribute( 'disabled' ) ) {\n\t\t\t// Yes it is. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get lightbox.\n\t\tconst lightbox: TPLightboxElement | null = this.closest( 'tp-lightbox' );\n\n\t\t// Check if we have a lightbox.\n\t\tif ( lightbox ) {\n\t\t\tsetTimeout( (): void => {\n\t\t\t\t// Initiate next.\n\t\t\t\tlightbox.next();\n\t\t\t}, 0 );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPLightboxElement } from './tp-lightbox';\n\n/**\n * TP Slider Count.\n */\nexport class TPLightboxCountElement 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 to observe.\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 format.\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 lightbox.\n\t\tconst lightbox: TPLightboxElement | null = this.closest( 'tp-lightbox' );\n\n\t\t// Check if we have a lightbox.\n\t\tif ( ! lightbox ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get current and total.\n\t\tconst current: string = lightbox.currentIndex.toString();\n\t\tconst total: string = lightbox.getAttribute( 'total' ) ?? '';\n\n\t\t// Update variables in format attribute (using textContent for XSS protection).\n\t\tthis.textContent =\n\t\t\tthis.format\n\t\t\t\t.replace( '$current', current )\n\t\t\t\t.replace( '$total', total );\n\n\t\t// Update current and total attributes.\n\t\tthis.setAttribute( 'current', current );\n\t\tthis.setAttribute( 'total', total );\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPLightboxElement } from './tp-lightbox';\n\n/**\n * TP Lightbox Trigger.\n */\nexport class TPLightboxTriggerElement 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.querySelector( 'button' )?.addEventListener( 'click', this.trigger.bind( this ) );\n\t}\n\n\t/**\n\t * Trigger the lightbox.\n\t */\n\ttrigger(): void {\n\t\t// Get lightbox ID and template.\n\t\tconst lightboxId: string | null = this.getAttribute( 'lightbox' );\n\t\tconst template: HTMLTemplateElement | null = this.querySelector( 'template' );\n\n\t\t// We can't proceed without them.\n\t\tif ( ! lightboxId || ! template ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get the lightbox.\n\t\tconst lightbox: TPLightboxElement | null = document.querySelector( `#${ lightboxId.toString() }` );\n\n\t\t// Check to see if we have a lightbox.\n\t\tif ( ! lightbox ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check to see if we have a group.\n\t\tconst group: string = this.getAttribute( 'group' ) ?? '';\n\n\t\t// Yield to main thread.\n\t\tsetTimeout( (): void => {\n\t\t\t// Prepare lightbox.\n\t\t\tlightbox.template = template;\n\t\t\tlightbox.group = group;\n\n\t\t\t// Set index and group if we have them.\n\t\t\tif ( '' !== group ) {\n\t\t\t\tconst allGroups: NodeListOf<TPLightboxTriggerElement> = document.querySelectorAll( `tp-lightbox-trigger[group=\"${ group }\"]` );\n\n\t\t\t\t// Update all groups.\n\t\t\t\tif ( allGroups.length ) {\n\t\t\t\t\t/**\n\t\t\t\t\t * We do this when we're opening a lightbox, or navigating.\n\t\t\t\t\t * This allows consumers to inject elements at any point.\n\t\t\t\t\t */\n\t\t\t\t\tlightbox.updateAllGroups( allGroups );\n\n\t\t\t\t\t// Get current trigger's index within the group.\n\t\t\t\t\tallGroups.forEach( ( triggerElement: TPLightboxTriggerElement, index: number ): void => {\n\t\t\t\t\t\t// Update current index.\n\t\t\t\t\t\tif ( this === triggerElement ) {\n\t\t\t\t\t\t\tlightbox.currentIndex = index + 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// All done, lets open the lightbox.\n\t\t\tlightbox.open();\n\t\t}, 0 );\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPLightboxElement } from './tp-lightbox';\n\n/**\n * TP Lightbox Nav.\n */\nexport class TPLightboxNavElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected template: HTMLTemplateElement | null = null;\n\tprotected lightbox : TPLightboxElement | null;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Initialize properties.\n\t\tthis.template = this.querySelector( 'template' );\n\t\tthis.lightbox = this.closest( 'tp-lightbox' );\n\n\t\t// Add event listener.\n\t\tthis.lightbox?.addEventListener( 'template-set', this.setTemplate.bind( this ) );\n\t}\n\n\t/**\n\t * Set the template.\n\t */\n\tsetTemplate(): void {\n\t\t// Bail if no template.\n\t\tif ( ! this.template ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Total slides.\n\t\tconst totalSlides = Number( this.lightbox?.getAttribute( 'total' ) ?? 0 );\n\n\t\t// Clear the navigation.\n\t\tthis.innerHTML = '';\n\n\t\t// Append the navigation items.\n\t\tfor ( let i = 0; i < totalSlides; i++ ) {\n\t\t\t// Clone the template.\n\t\t\tconst navItem = this.template.content.cloneNode( true );\n\n\t\t\t// Append the clone.\n\t\t\tthis.appendChild( navItem );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPLightboxElement } from './tp-lightbox';\nimport { TPLightboxNavElement } from './tp-lightbox-nav';\n\n/**\n * TP Lightbox Nav Item.\n */\nexport class TPLightboxNavItemElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected lightbox : TPLightboxElement | null;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\t\tthis.lightbox = this.closest( 'tp-lightbox' );\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 lightbox exists.\n\t\tif ( ! this.lightbox ) {\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.lightbox.currentIndex = Number( this.getIndex() ) ?? 1;\n\n\t\t// Update navigation current item.\n\t\tthis.lightbox.updateNavCurrentItem();\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// Bail if no lightbox.\n\t\tif ( ! this.lightbox ) {\n\t\t\t// Exit.\n\t\t\treturn 0;\n\t\t}\n\n\t\t// No, find it in the navigation.\n\t\tconst lightboxNav: TPLightboxNavElement | null = this.closest( 'tp-lightbox-nav' );\n\n\t\t// Return index of this element considering the step value.\n\t\treturn ( Array.from( lightboxNav?.children ?? [] ).indexOf( this ) ) + 1;\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPLightboxElement } from './tp-lightbox';\nimport { TPLightboxContentElement } from './tp-lightbox-content';\nimport { TPLightboxCloseElement } from './tp-lightbox-close';\nimport { TPLightboxPreviousElement } from './tp-lightbox-previous';\nimport { TPLightboxNextElement } from './tp-lightbox-next';\nimport { TPLightboxCountElement } from './tp-lightbox-count';\nimport { TPLightboxTriggerElement } from './tp-lightbox-trigger';\nimport { TPLightboxNavElement } from './tp-lightbox-nav';\nimport { TPLightboxNavItemElement } from './tp-lightbox-nav-item';\n\n/**\n * Register Components.\n */\ncustomElements.define( 'tp-lightbox', TPLightboxElement );\ncustomElements.define( 'tp-lightbox-content', TPLightboxContentElement );\ncustomElements.define( 'tp-lightbox-close', TPLightboxCloseElement );\ncustomElements.define( 'tp-lightbox-previous', TPLightboxPreviousElement );\ncustomElements.define( 'tp-lightbox-next', TPLightboxNextElement );\ncustomElements.define( 'tp-lightbox-count', TPLightboxCountElement );\ncustomElements.define( 'tp-lightbox-trigger', TPLightboxTriggerElement );\ncustomElements.define( 'tp-lightbox-nav', TPLightboxNavElement );\ncustomElements.define( 'tp-lightbox-nav-item', TPLightboxNavItemElement );\n"],"names":["TPLightboxElement","HTMLElement","constructor","super","currentTemplate","currentGroup","allGroups","touchStartX","touchStartY","swipeThreshold","previouslyFocusedElement","this","boundHandleKeyDown","handleKeyDown","bind","dialogElement","querySelector","lightboxNavItems","querySelectorAll","addEventListener","handleDialogClick","handleTouchStart","handleTouchEnd","observedAttributes","attributeChangedCallback","name","oldValue","newValue","dispatchEvent","CustomEvent","triggerCurrentIndexTarget","updateNavCurrentItem","isAriaEnabled","getAttribute","template","content","templateContent","cloneNode","replaceChildren","setTimeout","prepareImageLoading","prepareNavigation","innerHTML","group","currentIndex","parseInt","index","setAttribute","toString","detail","slideIndex","getAllGroups","trigger","open","dialog","ownerDocument","activeElement","updateAllGroups","showModal","document","setInitialFocus","close","removeEventListener","removeAttribute","focus","previous","next","length","count","update","previousButton","nextButton","ariaEnabled","images","counter","totalImages","incrementLoadingCounter","forEach","image","complete","once","e","target","evt","touches","clientX","clientY","touchEndX","changedTouches","touchEndY","swipeDistanceX","swipeDistanceY","Math","abs","Number","navItem","button","autofocusElement","key","preventDefault","TPLightboxContentElement","TPLightboxCloseElement","lightbox","closest","TPLightboxPreviousElement","TPLightboxNextElement","TPLightboxCountElement","format","current","total","textContent","replace","TPLightboxTriggerElement","lightboxId","triggerElement","TPLightboxNavElement","setTemplate","totalSlides","i","appendChild","TPLightboxNavItemElement","handleClick","getIndex","lightboxNav","Array","from","children","indexOf","customElements","define"],"sourceRoot":""}
+{"version":3,"file":"dist/lightbox/index.js","mappings":"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","sources":["webpack://@travelopia/web-components/./src/lightbox/tp-lightbox.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-content.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-close.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-previous.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-next.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-count.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-trigger.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-nav.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-nav-item.ts","webpack://@travelopia/web-components/./src/lightbox/index.ts"],"sourcesContent":["/**\n * Internal dependencies.\n */\nimport { TPLightboxContentElement } from './tp-lightbox-content';\nimport { TPLightboxPreviousElement } from './tp-lightbox-previous';\nimport { TPLightboxNextElement } from './tp-lightbox-next';\nimport { TPLightboxTriggerElement } from './tp-lightbox-trigger';\nimport { TPLightboxCountElement } from './tp-lightbox-count';\nimport { TPLightboxNavItemElement } from './tp-lightbox-nav-item';\n\n/**\n * TP Lightbox.\n */\nexport class TPLightboxElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected currentTemplate: HTMLTemplateElement | null = null;\n\tprotected currentGroup: string = '';\n\tprotected allGroups: NodeListOf<TPLightboxTriggerElement> | null = null;\n\tprotected touchStartX: number = 0;\n\tprotected touchStartY: number = 0;\n\tprotected swipeThreshold: number = 200;\n\tprotected dialogElement: HTMLDialogElement | null;\n\tprotected lightboxNavItems: NodeListOf<TPLightboxNavItemElement> | null;\n\tprotected previouslyFocusedElement: HTMLElement | null = null;\n\tprotected readonly boundHandleKeyDown: ( e: KeyboardEvent ) => void;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Bind event handlers.\n\t\tthis.boundHandleKeyDown = this.handleKeyDown.bind( this );\n\n\t\t// Initialize\n\t\tthis.dialogElement = this.querySelector( 'dialog' );\n\t\tthis.lightboxNavItems = this.querySelectorAll( 'tp-lightbox-nav-item' );\n\n\t\t// Event listeners.\n\t\tthis.dialogElement?.addEventListener( 'click', this.handleDialogClick.bind( this ) );\n\t\tthis.dialogElement?.addEventListener( 'touchstart', this.handleTouchStart.bind( this ) );\n\t\tthis.dialogElement?.addEventListener( 'touchend', this.handleTouchEnd.bind( this ) );\n\t\tthis.dialogElement?.addEventListener( 'close', this.handleDialogClose.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 to observe.\n\t\treturn [ 'open', 'index', 'total', 'close-on-overlay-click', 'loading' ];\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// Prevent redundant updates.\n\t\tif ( oldValue === newValue ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Trigger change event.\n\t\tthis.dispatchEvent( new CustomEvent( 'change' ) );\n\n\t\t// Trigger current index target if index has changed.\n\t\tif ( 'index' === name ) {\n\t\t\tthis.triggerCurrentIndexTarget();\n\t\t}\n\n\t\t// Trigger navigation update if open or index has changed.\n\t\tif ( 'open' === name || 'index' === name ) {\n\t\t\tthis.updateNavCurrentItem();\n\t\t}\n\t}\n\n\t/**\n\t * Check if ARIA management is enabled.\n\t *\n\t * @return {boolean} Whether ARIA is enabled.\n\t */\n\tisAriaEnabled(): boolean {\n\t\t// Return whether ARIA management is enabled (default: yes).\n\t\treturn 'no' !== this.getAttribute( 'aria' );\n\t}\n\n\t/**\n\t * Get template.\n\t */\n\tget template(): HTMLTemplateElement | null {\n\t\t// Return current template.\n\t\treturn this.currentTemplate;\n\t}\n\n\t/**\n\t * Set template.\n\t *\n\t * @param {HTMLTemplateElement} template The template.\n\t */\n\tset template( template: HTMLTemplateElement | null ) {\n\t\t// Set the template.\n\t\tthis.currentTemplate = template;\n\t\tthis.dispatchEvent( new CustomEvent( 'template-set' ) );\n\n\t\t// Get lightbox content element.\n\t\tconst content: TPLightboxContentElement | null = this.querySelector( 'tp-lightbox-content' );\n\n\t\t// Check if we have a content.\n\t\tif ( ! content ) {\n\t\t\t// No we don't. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if we have a template.\n\t\tif ( this.currentTemplate ) {\n\t\t\t/**\n\t\t\t * We do, update content with template's content.\n\t\t\t * We do this rather than a string to avoid script injection.\n\t\t\t */\n\t\t\tconst templateContent: Node = this.currentTemplate.content.cloneNode( true );\n\t\t\tcontent.replaceChildren( templateContent );\n\t\t\tthis.dispatchEvent( new CustomEvent( 'content-change' ) );\n\n\t\t\t// Prepare image loading.\n\t\t\tsetTimeout( (): void => {\n\t\t\t\t// We do, prepare image loading.\n\t\t\t\tthis.prepareImageLoading();\n\t\t\t\tthis.prepareNavigation();\n\t\t\t}, 0 );\n\t\t} else {\n\t\t\t// We don't, set content as empty.\n\t\t\tcontent.innerHTML = '';\n\t\t}\n\t}\n\n\t/**\n\t * Get current group.\n\t */\n\tget group(): string {\n\t\t// Return current group.\n\t\treturn this.currentGroup;\n\t}\n\n\t/**\n\t * Set current group.\n\t *\n\t * @param {string} group Group name.\n\t */\n\tset group( group: string ) {\n\t\t// Set current group.\n\t\tthis.currentGroup = group;\n\t}\n\n\t/**\n\t * Get current index.\n\t */\n\tget currentIndex(): number {\n\t\t// Return current index.\n\t\treturn parseInt( this.getAttribute( 'index' ) ?? '1' );\n\t}\n\n\t/**\n\t * Set current index.\n\t *\n\t * @param {number} index Current index.\n\t */\n\tset currentIndex( index: number ) {\n\t\t// Set current index.\n\t\tif ( index < 1 ) {\n\t\t\tindex = 1;\n\t\t}\n\n\t\t// Setting this attributes triggers a re-trigger.\n\t\tthis.setAttribute( 'index', index.toString() );\n\n\t\t// dispatch slide-set event.\n\t\tthis.dispatchEvent( new CustomEvent( 'slide-set', {\n\t\t\tdetail: {\n\t\t\t\tslideIndex: index,\n\t\t\t},\n\t\t} ) );\n\t}\n\n\t/**\n\t * Trigger the target that matches the current index within current group.\n\t */\n\ttriggerCurrentIndexTarget(): void {\n\t\t// Get all groups and check if current index exists within group.\n\t\tconst allGroups: NodeListOf<TPLightboxTriggerElement> | null = this.getAllGroups();\n\n\t\t// Bail early if we don't have groups.\n\t\tif ( ! allGroups || ! allGroups[ this.currentIndex - 1 ] ) {\n\t\t\t// No we don't. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Trigger element within group.\n\t\tallGroups[ this.currentIndex - 1 ].trigger();\n\t}\n\n\t/**\n\t * Open lightbox.\n\t */\n\topen(): void {\n\t\t// Get the dialog element.\n\t\tconst dialog: HTMLDialogElement | null = this.querySelector( 'dialog' );\n\n\t\t// Check if dialog exists or is already open.\n\t\tif ( ! dialog || dialog.open ) {\n\t\t\t// Yes it is, Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Save the currently focused element to restore later (if manage-focus is enabled).\n\t\tif ( 'no' !== this.getAttribute( 'manage-focus' ) ) {\n\t\t\tthis.previouslyFocusedElement = this.ownerDocument.activeElement as HTMLElement;\n\t\t}\n\n\t\t// First, take this opportunity to update all groups (if it wasn't set from the trigger).\n\t\tif ( '' !== this.group && ! this.allGroups ) {\n\t\t\tthis.updateAllGroups();\n\t\t}\n\n\t\t// Now, show the modal.\n\t\tdialog.showModal();\n\t\tthis.setAttribute( 'open', 'yes' );\n\n\t\t// Add keyboard event listener for arrow navigation.\n\t\tdocument.addEventListener( 'keydown', this.boundHandleKeyDown );\n\n\t\t// Move focus into the lightbox (if manage-focus is enabled).\n\t\tif ( 'no' !== this.getAttribute( 'manage-focus' ) ) {\n\t\t\tthis.setInitialFocus();\n\t\t}\n\t}\n\n\t/**\n\t * Close lightbox.\n\t */\n\tclose(): void {\n\t\t// Remove keyboard event listener.\n\t\tdocument.removeEventListener( 'keydown', this.boundHandleKeyDown );\n\n\t\t// Find and close the dialog.\n\t\tconst dialog: HTMLDialogElement | null = this.querySelector( 'dialog' );\n\t\tdialog?.close();\n\t\tthis.removeAttribute( 'open' );\n\n\t\t// Restore focus to the previously focused element (if manage-focus is enabled).\n\t\tif ( 'no' !== this.getAttribute( 'manage-focus' ) && this.previouslyFocusedElement ) {\n\t\t\tthis.previouslyFocusedElement.focus();\n\t\t\tthis.previouslyFocusedElement = null;\n\t\t}\n\n\t\t// Clear groups from memory.\n\t\tthis.allGroups = null;\n\t}\n\n\t/**\n\t * Navigate previous.\n\t */\n\tprevious(): void {\n\t\t// Check if we even have a group.\n\t\tif ( '' === this.group ) {\n\t\t\t// No we don't. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if we have elements within group.\n\t\tconst allGroups: NodeListOf<TPLightboxTriggerElement> | null = this.getAllGroups();\n\n\t\t// Bail early if we don't have groups.\n\t\tif ( ! allGroups ) {\n\t\t\t// No we don't. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Decrement the current index.\n\t\tif ( this.currentIndex > 1 ) {\n\t\t\tthis.currentIndex--;\n\t\t}\n\t}\n\n\t/**\n\t * Navigate next.\n\t */\n\tnext(): void {\n\t\t// Check if we even have a group.\n\t\tif ( '' === this.group ) {\n\t\t\t// No we don't. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if we have elements within group.\n\t\tconst allGroups: NodeListOf<TPLightboxTriggerElement> | null = this.getAllGroups();\n\n\t\t// Bail early if we don't have groups.\n\t\tif ( ! allGroups ) {\n\t\t\t// No we don't. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Increment the current index.\n\t\tif ( this.currentIndex < allGroups.length ) {\n\t\t\tthis.currentIndex++;\n\t\t}\n\t}\n\n\t/**\n\t * Update all groups and save it to memory.\n\t *\n\t * @param {NodeList} allGroups All groups.\n\t */\n\tupdateAllGroups( allGroups: NodeListOf<TPLightboxTriggerElement> | null = null ): void {\n\t\t// Update all groups.\n\t\tif ( allGroups && allGroups.length ) {\n\t\t\tthis.allGroups = allGroups;\n\t\t\tthis.setAttribute( 'total', this.allGroups.length.toString() );\n\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get all groups.\n\t\tthis.allGroups = document.querySelectorAll( `tp-lightbox-trigger[group=\"${ this.group }\"]` );\n\n\t\t// Update total.\n\t\tif ( ! this.allGroups.length ) {\n\t\t\tthis.allGroups = null;\n\t\t} else {\n\t\t\tthis.setAttribute( 'total', this.allGroups.length.toString() );\n\t\t}\n\t}\n\n\t/**\n\t * Get all groups from memory.\n\t */\n\tgetAllGroups(): NodeListOf<TPLightboxTriggerElement> | null {\n\t\t// Return all groups.\n\t\treturn this.allGroups;\n\t}\n\n\t/**\n\t * Prepare navigation.\n\t */\n\tprepareNavigation(): void {\n\t\t// Update all counters.\n\t\tconst counts: NodeListOf<TPLightboxCountElement> = this.querySelectorAll( 'tp-lightbox-count' );\n\t\tcounts.forEach( ( count: TPLightboxCountElement ): void => count.update() );\n\n\t\t// Get previous and next elements.\n\t\tconst previous: TPLightboxPreviousElement | null = this.querySelector( 'tp-lightbox-previous' );\n\t\tconst next: TPLightboxNextElement | null = this.querySelector( 'tp-lightbox-next' );\n\n\t\t// Bail early if we don't have either.\n\t\tif ( ! previous && ! next ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get buttons inside prev/next for ARIA.\n\t\tconst previousButton: HTMLButtonElement | null = previous?.querySelector( 'button' ) ?? null;\n\t\tconst nextButton: HTMLButtonElement | null = next?.querySelector( 'button' ) ?? null;\n\t\tconst ariaEnabled: boolean = this.isAriaEnabled();\n\n\t\t// Check if we have a group.\n\t\tif ( '' === this.group ) {\n\t\t\tprevious?.setAttribute( 'disabled', 'yes' );\n\t\t\tnext?.setAttribute( 'disabled', 'yes' );\n\n\t\t\t// Set aria-disabled on buttons.\n\t\t\tif ( ariaEnabled ) {\n\t\t\t\tpreviousButton?.setAttribute( 'aria-disabled', 'true' );\n\t\t\t\tnextButton?.setAttribute( 'aria-disabled', 'true' );\n\t\t\t}\n\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if we have elements within the group.\n\t\tconst allGroups: NodeListOf<TPLightboxTriggerElement> | null = this.getAllGroups();\n\n\t\t// Disable if we don't have any.\n\t\tif ( ! allGroups ) {\n\t\t\tprevious?.setAttribute( 'disabled', 'yes' );\n\t\t\tnext?.setAttribute( 'disabled', 'yes' );\n\n\t\t\t// Set aria-disabled on buttons.\n\t\t\tif ( ariaEnabled ) {\n\t\t\t\tpreviousButton?.setAttribute( 'aria-disabled', 'true' );\n\t\t\t\tnextButton?.setAttribute( 'aria-disabled', 'true' );\n\t\t\t}\n\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Enable / disable previous navigation.\n\t\tif ( this.currentIndex <= 1 ) {\n\t\t\tprevious?.setAttribute( 'disabled', 'yes' );\n\n\t\t\t// Set aria-disabled on previous button.\n\t\t\tif ( ariaEnabled ) {\n\t\t\t\tpreviousButton?.setAttribute( 'aria-disabled', 'true' );\n\t\t\t}\n\t\t} else {\n\t\t\tprevious?.removeAttribute( 'disabled' );\n\n\t\t\t// Remove aria-disabled from previous button.\n\t\t\tif ( ariaEnabled ) {\n\t\t\t\tpreviousButton?.removeAttribute( 'aria-disabled' );\n\t\t\t}\n\t\t}\n\n\t\t// Enable / disable next navigation.\n\t\tif ( this.currentIndex < allGroups.length ) {\n\t\t\tnext?.removeAttribute( 'disabled' );\n\n\t\t\t// Remove aria-disabled from next button.\n\t\t\tif ( ariaEnabled ) {\n\t\t\t\t// Next is at the end, disable it.\n\t\t\t\tnextButton?.removeAttribute( 'aria-disabled' );\n\t\t\t}\n\t\t} else {\n\t\t\tnext?.setAttribute( 'disabled', 'yes' );\n\n\t\t\t// Set aria-disabled on next button.\n\t\t\tif ( ariaEnabled ) {\n\t\t\t\tnextButton?.setAttribute( 'aria-disabled', 'true' );\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Prepare image loading.\n\t */\n\tprepareImageLoading(): void {\n\t\t// Get lightbox content element.\n\t\tconst content: TPLightboxContentElement | null = this.querySelector( 'tp-lightbox-content' );\n\n\t\t// Bail early if we don't have content.\n\t\tif ( ! content ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Bail if there are no images within current content.\n\t\tconst images: NodeListOf<HTMLImageElement> = content.querySelectorAll( 'img' );\n\n\t\t// Exit early if there are no images.\n\t\tif ( ! images.length ) {\n\t\t\tthis.removeAttribute( 'loading' );\n\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Start off by setting the state as loading.\n\t\tthis.setAttribute( 'loading', 'yes' );\n\n\t\t// Prepare increment variables.\n\t\tlet counter: number = 0;\n\t\tconst totalImages: number = images.length;\n\n\t\t/**\n\t\t * Increment counter.\n\t\t */\n\t\tconst incrementLoadingCounter = (): void => {\n\t\t\t// Increment\n\t\t\tcounter++;\n\n\t\t\t// Remove loading attribute once all images have loaded.\n\t\t\tif ( counter === totalImages ) {\n\t\t\t\tthis.removeAttribute( 'loading' );\n\t\t\t}\n\t\t};\n\n\t\t// Check if images have loaded, else add an event listener.\n\t\timages.forEach( ( image: HTMLImageElement ): void => {\n\t\t\t// Check if image has loaded.\n\t\t\tif ( image.complete ) {\n\t\t\t\tincrementLoadingCounter();\n\t\t\t} else {\n\t\t\t\timage.addEventListener( 'load', incrementLoadingCounter, { once: true } );\n\t\t\t}\n\t\t} );\n\t}\n\n\t/**\n\t * Handle when the dialog is clicked.\n\t *\n\t * @param {Event} e Click event.\n\t */\n\thandleDialogClick( e: MouseEvent ): void {\n\t\t// Close on overlay click.\n\t\tif (\n\t\t\t'yes' === this.getAttribute( 'close-on-overlay-click' ) &&\n\t\t\tthis.querySelector( 'dialog' ) === e.target\n\t\t) {\n\t\t\tthis.close();\n\t\t}\n\t}\n\n\t/**\n\t * Handle when the dialog is closed (e.g., via Escape key).\n\t * Syncs lightbox state with native dialog close behavior.\n\t */\n\thandleDialogClose(): void {\n\t\t// Only sync if the lightbox thinks it's still open.\n\t\tif ( this.hasAttribute( 'open' ) ) {\n\t\t\tthis.close();\n\t\t}\n\t}\n\n\t/**\n\t * Handles the touch start event.\n\t *\n\t * @param { TouchEvent } evt The touch event.\n\t */\n\thandleTouchStart( evt: TouchEvent ): void {\n\t\t// Check if we should allow swiping?\n\t\tif ( 'yes' !== this.getAttribute( 'swipe' ) ) {\n\t\t\t// Nope.\n\t\t\treturn;\n\t\t}\n\n\t\t// Set the start points.\n\t\tthis.touchStartX = evt.touches[ 0 ].clientX;\n\t\tthis.touchStartY = evt.touches[ 0 ].clientY;\n\t}\n\n\t/**\n\t * Handles the touch end event.\n\t *\n\t * @param { TouchEvent } evt The touch event.\n\t */\n\thandleTouchEnd( evt: TouchEvent ): void {\n\t\t// Check if we should allow swiping?\n\t\tif ( 'yes' !== this.getAttribute( 'swipe' ) ) {\n\t\t\t// Nope.\n\t\t\treturn;\n\t\t}\n\n\t\t// Calculate the distances.\n\t\tconst touchEndX: number = evt.changedTouches[ 0 ].clientX;\n\t\tconst touchEndY: number = evt.changedTouches[ 0 ].clientY;\n\t\tconst swipeDistanceX: number = touchEndX - this.touchStartX;\n\t\tconst swipeDistanceY: number = touchEndY - this.touchStartY;\n\n\t\t// Is this horizontal swipe?\n\t\tconst isHorizontalSwipe = Math.abs( swipeDistanceX ) > Math.abs( swipeDistanceY );\n\n\t\t// Check if this was a horizontal swipe?\n\t\tif ( ! isHorizontalSwipe ) {\n\t\t\t// Bail.\n\t\t\treturn;\n\t\t}\n\n\t\t// Swipe settings\n\t\tthis.swipeThreshold = Number( this.getAttribute( 'swipe-threshold' ) ?? '200' );\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 * Update current item in navigation.\n\t */\n\tupdateNavCurrentItem(): void {\n\t\t// Bail if we don't have nav items.\n\t\tif ( ! this.lightboxNavItems ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if ARIA management is enabled.\n\t\tconst ariaEnabled = this.isAriaEnabled();\n\n\t\t// Update current item.\n\t\tthis.lightboxNavItems.forEach( ( navItem: TPLightboxNavItemElement, index: number ): void => {\n\t\t\t// Get the button inside the nav item.\n\t\t\tconst button: HTMLButtonElement | null = navItem.querySelector( 'button' );\n\n\t\t\t// Update current attribute.\n\t\t\tif ( this.currentIndex - 1 === index ) {\n\t\t\t\tnavItem.setAttribute( 'current', 'yes' );\n\n\t\t\t\t// Set aria-current on the button (if ARIA is enabled).\n\t\t\t\tif ( ariaEnabled && button ) {\n\t\t\t\t\tbutton.setAttribute( 'aria-current', 'true' );\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tnavItem.removeAttribute( 'current' );\n\n\t\t\t\t// Remove aria-current from the button (if ARIA is enabled).\n\t\t\t\tif ( ariaEnabled && button ) {\n\t\t\t\t\tbutton.removeAttribute( 'aria-current' );\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t}\n\n\t/**\n\t * Set initial focus when lightbox opens.\n\t * Looks for [autofocus] element, otherwise focuses the dialog.\n\t */\n\tprivate setInitialFocus(): void {\n\t\t// Look for an element with autofocus attribute.\n\t\tconst autofocusElement = this.querySelector<HTMLElement>( '[autofocus]' );\n\n\t\t// Do we have an autofocus element?\n\t\tif ( autofocusElement ) {\n\t\t\tautofocusElement.focus();\n\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Otherwise, focus the dialog itself.\n\t\tthis.dialogElement?.focus();\n\t}\n\n\t/**\n\t * Handle keydown events for arrow navigation.\n\t *\n\t * @param {KeyboardEvent} e Keyboard event.\n\t */\n\tprivate handleKeyDown( e: KeyboardEvent ): void {\n\t\t// Check if arrow navigation is enabled (disabled by default).\n\t\tif ( 'yes' !== this.getAttribute( 'arrow-navigation' ) ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Navigate on arrow keys.\n\t\tif ( 'ArrowLeft' === e.key ) {\n\t\t\te.preventDefault();\n\t\t\tthis.previous();\n\t\t} else if ( 'ArrowRight' === e.key ) {\n\t\t\te.preventDefault();\n\t\t\tthis.next();\n\t\t}\n\t}\n}\n","/**\n * TP Lightbox Content.\n */\nexport class TPLightboxContentElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPLightboxElement } from './tp-lightbox';\n\n/**\n * TP Lightbox Close.\n */\nexport class TPLightboxCloseElement 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.querySelector( 'button' )?.addEventListener( 'click', this.close.bind( this ) );\n\t}\n\n\t/**\n\t * Close the lightbox.\n\t */\n\tclose(): void {\n\t\t// Get lightbox.\n\t\tconst lightbox: TPLightboxElement | null = this.closest( 'tp-lightbox' );\n\n\t\t// Check if we have a lightbox.\n\t\tif ( lightbox ) {\n\t\t\tsetTimeout( (): void => {\n\t\t\t\t// Close the lightbox.\n\t\t\t\tlightbox.close();\n\t\t\t}, 0 );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPLightboxElement } from './tp-lightbox';\n\n/**\n * TP Lightbox Close.\n */\nexport class TPLightboxPreviousElement 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.querySelector( 'button' )?.addEventListener( 'click', this.previous.bind( this ) );\n\t}\n\n\t/**\n\t * Navigate previous.\n\t */\n\tprevious(): void {\n\t\t// Check if we are disabled.\n\t\tif ( 'yes' === this.getAttribute( 'disabled' ) ) {\n\t\t\t// No we don't. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get lightbox.\n\t\tconst lightbox: TPLightboxElement | null = this.closest( 'tp-lightbox' );\n\n\t\t// Check if we have a lightbox.\n\t\tif ( lightbox ) {\n\t\t\tsetTimeout( (): void => {\n\t\t\t\t// Previous.\n\t\t\t\tlightbox.previous();\n\t\t\t}, 0 );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPLightboxElement } from './tp-lightbox';\n\n/**\n * TP Lightbox Close.\n */\nexport class TPLightboxNextElement 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.querySelector( 'button' )?.addEventListener( 'click', this.next.bind( this ) );\n\t}\n\n\t/**\n\t * Navigate next.\n\t */\n\tnext(): void {\n\t\t// Check if next is disabled.\n\t\tif ( 'yes' === this.getAttribute( 'disabled' ) ) {\n\t\t\t// Yes it is. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get lightbox.\n\t\tconst lightbox: TPLightboxElement | null = this.closest( 'tp-lightbox' );\n\n\t\t// Check if we have a lightbox.\n\t\tif ( lightbox ) {\n\t\t\tsetTimeout( (): void => {\n\t\t\t\t// Initiate next.\n\t\t\t\tlightbox.next();\n\t\t\t}, 0 );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPLightboxElement } from './tp-lightbox';\n\n/**\n * TP Slider Count.\n */\nexport class TPLightboxCountElement 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 to observe.\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 format.\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 lightbox.\n\t\tconst lightbox: TPLightboxElement | null = this.closest( 'tp-lightbox' );\n\n\t\t// Check if we have a lightbox.\n\t\tif ( ! lightbox ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get current and total.\n\t\tconst current: string = lightbox.currentIndex.toString();\n\t\tconst total: string = lightbox.getAttribute( 'total' ) ?? '';\n\n\t\t// Update variables in format attribute (using textContent for XSS protection).\n\t\tthis.textContent =\n\t\t\tthis.format\n\t\t\t\t.replace( '$current', current )\n\t\t\t\t.replace( '$total', total );\n\n\t\t// Update current and total attributes.\n\t\tthis.setAttribute( 'current', current );\n\t\tthis.setAttribute( 'total', total );\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPLightboxElement } from './tp-lightbox';\n\n/**\n * TP Lightbox Trigger.\n */\nexport class TPLightboxTriggerElement 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.querySelector( 'button' )?.addEventListener( 'click', this.trigger.bind( this ) );\n\t}\n\n\t/**\n\t * Trigger the lightbox.\n\t */\n\ttrigger(): void {\n\t\t// Get lightbox ID and template.\n\t\tconst lightboxId: string | null = this.getAttribute( 'lightbox' );\n\t\tconst template: HTMLTemplateElement | null = this.querySelector( 'template' );\n\n\t\t// We can't proceed without them.\n\t\tif ( ! lightboxId || ! template ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get the lightbox.\n\t\tconst lightbox: TPLightboxElement | null = document.querySelector( `#${ lightboxId.toString() }` );\n\n\t\t// Check to see if we have a lightbox.\n\t\tif ( ! lightbox ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check to see if we have a group.\n\t\tconst group: string = this.getAttribute( 'group' ) ?? '';\n\n\t\t// Yield to main thread.\n\t\tsetTimeout( (): void => {\n\t\t\t// Prepare lightbox.\n\t\t\tlightbox.template = template;\n\t\t\tlightbox.group = group;\n\n\t\t\t// Set index and group if we have them.\n\t\t\tif ( '' !== group ) {\n\t\t\t\tconst allGroups: NodeListOf<TPLightboxTriggerElement> = document.querySelectorAll( `tp-lightbox-trigger[group=\"${ group }\"]` );\n\n\t\t\t\t// Update all groups.\n\t\t\t\tif ( allGroups.length ) {\n\t\t\t\t\t/**\n\t\t\t\t\t * We do this when we're opening a lightbox, or navigating.\n\t\t\t\t\t * This allows consumers to inject elements at any point.\n\t\t\t\t\t */\n\t\t\t\t\tlightbox.updateAllGroups( allGroups );\n\n\t\t\t\t\t// Get current trigger's index within the group.\n\t\t\t\t\tallGroups.forEach( ( triggerElement: TPLightboxTriggerElement, index: number ): void => {\n\t\t\t\t\t\t// Update current index.\n\t\t\t\t\t\tif ( this === triggerElement ) {\n\t\t\t\t\t\t\tlightbox.currentIndex = index + 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// All done, lets open the lightbox.\n\t\t\tlightbox.open();\n\t\t}, 0 );\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPLightboxElement } from './tp-lightbox';\n\n/**\n * TP Lightbox Nav.\n */\nexport class TPLightboxNavElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected template: HTMLTemplateElement | null = null;\n\tprotected lightbox : TPLightboxElement | null;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Initialize properties.\n\t\tthis.template = this.querySelector( 'template' );\n\t\tthis.lightbox = this.closest( 'tp-lightbox' );\n\n\t\t// Add event listener.\n\t\tthis.lightbox?.addEventListener( 'template-set', this.setTemplate.bind( this ) );\n\t}\n\n\t/**\n\t * Set the template.\n\t */\n\tsetTemplate(): void {\n\t\t// Bail if no template.\n\t\tif ( ! this.template ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Total slides.\n\t\tconst totalSlides = Number( this.lightbox?.getAttribute( 'total' ) ?? 0 );\n\n\t\t// Clear the navigation.\n\t\tthis.innerHTML = '';\n\n\t\t// Append the navigation items.\n\t\tfor ( let i = 0; i < totalSlides; i++ ) {\n\t\t\t// Clone the template.\n\t\t\tconst navItem = this.template.content.cloneNode( true );\n\n\t\t\t// Append the clone.\n\t\t\tthis.appendChild( navItem );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPLightboxElement } from './tp-lightbox';\nimport { TPLightboxNavElement } from './tp-lightbox-nav';\n\n/**\n * TP Lightbox Nav Item.\n */\nexport class TPLightboxNavItemElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected lightbox : TPLightboxElement | null;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\t\tthis.lightbox = this.closest( 'tp-lightbox' );\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 lightbox exists.\n\t\tif ( ! this.lightbox ) {\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.lightbox.currentIndex = Number( this.getIndex() ) ?? 1;\n\n\t\t// Update navigation current item.\n\t\tthis.lightbox.updateNavCurrentItem();\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// Bail if no lightbox.\n\t\tif ( ! this.lightbox ) {\n\t\t\t// Exit.\n\t\t\treturn 0;\n\t\t}\n\n\t\t// No, find it in the navigation.\n\t\tconst lightboxNav: TPLightboxNavElement | null = this.closest( 'tp-lightbox-nav' );\n\n\t\t// Return index of this element considering the step value.\n\t\treturn ( Array.from( lightboxNav?.children ?? [] ).indexOf( this ) ) + 1;\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPLightboxElement } from './tp-lightbox';\nimport { TPLightboxContentElement } from './tp-lightbox-content';\nimport { TPLightboxCloseElement } from './tp-lightbox-close';\nimport { TPLightboxPreviousElement } from './tp-lightbox-previous';\nimport { TPLightboxNextElement } from './tp-lightbox-next';\nimport { TPLightboxCountElement } from './tp-lightbox-count';\nimport { TPLightboxTriggerElement } from './tp-lightbox-trigger';\nimport { TPLightboxNavElement } from './tp-lightbox-nav';\nimport { TPLightboxNavItemElement } from './tp-lightbox-nav-item';\n\n/**\n * Register Components.\n */\ncustomElements.define( 'tp-lightbox', TPLightboxElement );\ncustomElements.define( 'tp-lightbox-content', TPLightboxContentElement );\ncustomElements.define( 'tp-lightbox-close', TPLightboxCloseElement );\ncustomElements.define( 'tp-lightbox-previous', TPLightboxPreviousElement );\ncustomElements.define( 'tp-lightbox-next', TPLightboxNextElement );\ncustomElements.define( 'tp-lightbox-count', TPLightboxCountElement );\ncustomElements.define( 'tp-lightbox-trigger', TPLightboxTriggerElement );\ncustomElements.define( 'tp-lightbox-nav', TPLightboxNavElement );\ncustomElements.define( 'tp-lightbox-nav-item', TPLightboxNavItemElement );\n"],"names":["TPLightboxElement","HTMLElement","constructor","super","currentTemplate","currentGroup","allGroups","touchStartX","touchStartY","swipeThreshold","previouslyFocusedElement","this","boundHandleKeyDown","handleKeyDown","bind","dialogElement","querySelector","lightboxNavItems","querySelectorAll","addEventListener","handleDialogClick","handleTouchStart","handleTouchEnd","handleDialogClose","observedAttributes","attributeChangedCallback","name","oldValue","newValue","dispatchEvent","CustomEvent","triggerCurrentIndexTarget","updateNavCurrentItem","isAriaEnabled","getAttribute","template","content","templateContent","cloneNode","replaceChildren","setTimeout","prepareImageLoading","prepareNavigation","innerHTML","group","currentIndex","parseInt","index","setAttribute","toString","detail","slideIndex","getAllGroups","trigger","open","dialog","ownerDocument","activeElement","updateAllGroups","showModal","document","setInitialFocus","close","removeEventListener","removeAttribute","focus","previous","next","length","forEach","count","update","previousButton","nextButton","ariaEnabled","images","counter","totalImages","incrementLoadingCounter","image","complete","once","e","target","hasAttribute","evt","touches","clientX","clientY","touchEndX","changedTouches","touchEndY","swipeDistanceX","swipeDistanceY","Math","abs","Number","navItem","button","autofocusElement","key","preventDefault","TPLightboxContentElement","TPLightboxCloseElement","lightbox","closest","TPLightboxPreviousElement","TPLightboxNextElement","TPLightboxCountElement","format","current","total","textContent","replace","TPLightboxTriggerElement","lightboxId","triggerElement","TPLightboxNavElement","setTemplate","totalSlides","i","appendChild","TPLightboxNavItemElement","handleClick","getIndex","lightboxNav","Array","from","children","indexOf","customElements","define"],"ignoreList":[],"sourceRoot":""}

package/dist/modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"dist/modal/index.js","mappings":"mBAQO,MAAMA,UAAuBC,YAmBnC,WAAAC,G,MAECC,QAjBO,KAAAC,yBAA+C,KAK/C,KAAAC,gBAA6B,GAe7BC,KAAKC,aAAc,aACzBD,KAAKE,aAAc,WAAY,MAIhCF,KAAKG,mBAAqBH,KAAKI,cAAcC,KAAML,MAGnB,QAAhC,EAAAM,SAASC,cAAe,eAAQ,SAAEC,YAAaR,MAG/CA,KAAKS,iBAAkB,QAAST,KAAKU,YAAYL,KAAML,MACxD,CAKA,IAAAW,GAECX,KAAKF,yBAA2BE,KAAKY,cAAcC,cAGnDb,KAAKc,cAAe,IAAIC,YAAa,cAAe,CAAEC,SAAS,KAC/DhB,KAAKE,aAAc,OAAQ,OAG3BF,KAAKiB,kBAAkB,GAGvBX,SAASG,iBAAkB,UAAWT,KAAKG,oBAGtC,OAASH,KAAKkB,aAAc,iBAChClB,KAAKmB,kBAINnB,KAAKc,cAAe,IAAIC,YAAa,OAAQ,CAAEC,SAAS,IACzD,CAKA,KAAAI,GAECd,SAASe,oBAAqB,UAAWrB,KAAKG,oBAG9CH,KAAKc,cAAe,IAAIC,YAAa,eAAgB,CAAEC,SAAS,KAChEhB,KAAKsB,gBAAiB,QAGtBtB,KAAKiB,kBAAkB,GAGlB,OAASjB,KAAKkB,aAAc,iBAAoBlB,KAAKF,2BACzDE,KAAKF,yBAAyByB,QAC9BvB,KAAKF,yBAA2B,MAIjCE,KAAKc,cAAe,IAAIC,YAAa,QAAS,CAAEC,SAAS,IAC1D,CAMQ,eAAAG,GAEP,MAAMK,EAAmBxB,KAAKO,cAA4B,eAGrDiB,EACJA,EAAiBD,QAOlBvB,KAAKuB,OACN,CAOQ,gBAAAN,CAAkBQ,GAEzB,MAAMC,EAAepB,SAASqB,KAAKC,SAGnC,GAAKH,EAAQ,CAEZzB,KAAKD,gBAAkB,GAGvB,IAAM,IAAI8B,EAAI,EAAGA,EAAIH,EAAaI,OAAQD,IAAM,CAC/C,MAAME,EAAUL,EAAcG,GAGzBE,IAAY/B,MAAQ,WAAa+B,EAAQC,SAAW,UAAYD,EAAQC,UAK7ED,EAAQ7B,aAAc,QAAS,IAC/B6B,EAAQ7B,aAAc,cAAe,QACrCF,KAAKD,gBAAgBkC,KAAMF,G,MAEtB,CAEN,IAAM,MAAMA,KAAW/B,KAAKD,gBAC3BgC,EAAQT,gBAAiB,SACzBS,EAAQT,gBAAiB,eAI1BtB,KAAKD,gBAAkB,E,CAEzB,CAOQ,aAAAK,CAAe8B,GAEtB,GAAK,WAAaA,EAAEC,IAKnB,OAJAD,EAAEE,sBACFpC,KAAKoB,QAOD,QAAUc,EAAEC,KAAO,OAASnC,KAAKkB,aAAc,eACnDlB,KAAKqC,UAAWH,EAElB,CAOQ,SAAAG,CAAWH,GAElB,MAAMI,EAAoBtC,KAAKuC,iBArLN,6IAwLzB,GAAK,IAAMD,EAAkBR,OAI5B,YAHAI,EAAEE,iBAOH,MAAMI,EAAeF,EAAmB,GAClCG,EAAcH,EAAmBA,EAAkBR,OAAS,GAC5DjB,EAAgBb,KAAKY,cAAcC,cAGzC,GAAKqB,EAAEQ,UAAY7B,IAAkB2B,EAKpC,OAJAN,EAAEE,sBACFK,EAAYlB,QAONW,EAAEQ,UAAY7B,IAAkB4B,IACtCP,EAAEE,iBACFI,EAAajB,QAEf,CAOA,WAAAb,CAAawB,GAEPA,EAAES,SAAW3C,MAAQ,QAAUA,KAAKkB,aAAc,yBACtDgB,EAAEE,iBACFF,EAAEU,kBACF5C,KAAKoB,QAEP,EC3NM,MAAMyB,UAA4BlD,YAIxC,WAAAC,GAECC,QAGA,MAAMiD,EAAmC9C,KAAKO,cAAe,UAC7DuC,SAAAA,EAAQrC,iBAAkB,QAAST,KAAK+C,WAAW1C,KAAML,MAC1D,CAKA,UAAA+C,GAEC,MAAMC,EAA+BhD,KAAKiD,QAAS,YACnDD,SAAAA,EAAO5B,OACR,ECdD8B,eAAeC,OAAQ,WAAYzD,GACnCwD,eAAeC,OAAQ,iBAAkBN,E","sources":["webpack://@travelopia/web-components/./src/modal/tp-modal.ts","webpack://@travelopia/web-components/./src/modal/tp-modal-close.ts","webpack://@travelopia/web-components/./src/modal/index.ts"],"sourcesContent":["/**\n * Focusable elements selector.\n */\nconst FOCUSABLE_ELEMENTS = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * TP Modal.\n */\nexport class TPModalElement extends HTMLElement {\n\t/**\n\t * Previously focused element before modal opened.\n\t */\n\tprivate previouslyFocusedElement: HTMLElement | null = null;\n\n\t/**\n\t * Elements that were made inert when modal opened.\n\t */\n\tprivate inertedElements: Element[] = [];\n\n\t/**\n\t * Bound event handlers for cleanup.\n\t */\n\tprivate readonly boundHandleKeyDown: ( e: KeyboardEvent ) => void;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Make modal programmatically focusable for focus management.\n\t\tif ( ! this.hasAttribute( 'tabindex' ) ) {\n\t\t\tthis.setAttribute( 'tabindex', '-1' );\n\t\t}\n\n\t\t// Bind event handlers.\n\t\tthis.boundHandleKeyDown = this.handleKeyDown.bind( this );\n\n\t\t// Move modal as a direct descendent of body to avoid z-index issues.\n\t\tdocument.querySelector( 'body' )?.appendChild( this );\n\n\t\t// Event listeners.\n\t\tthis.addEventListener( 'click', this.handleClick.bind( this ) );\n\t}\n\n\t/**\n\t * Open the modal.\n\t */\n\topen(): void {\n\t\t// Save the currently focused element to restore later.\n\t\tthis.previouslyFocusedElement = this.ownerDocument.activeElement as HTMLElement;\n\n\t\t// Dispatch before-open event and set open attribute.\n\t\tthis.dispatchEvent( new CustomEvent( 'before-open', { bubbles: true } ) );\n\t\tthis.setAttribute( 'open', 'yes' );\n\n\t\t// Make all siblings inert to trap focus and hide from AT.\n\t\tthis.setSiblingsInert( true );\n\n\t\t// Add keyboard event listener for Escape and focus trap.\n\t\tdocument.addEventListener( 'keydown', this.boundHandleKeyDown );\n\n\t\t// Move focus into the modal (enabled by default, disable with manage-focus=\"no\").\n\t\tif ( 'no' !== this.getAttribute( 'manage-focus' ) ) {\n\t\t\tthis.setInitialFocus();\n\t\t}\n\n\t\t// Dispatch open event.\n\t\tthis.dispatchEvent( new CustomEvent( 'open', { bubbles: true } ) );\n\t}\n\n\t/**\n\t * Close the modal.\n\t */\n\tclose(): void {\n\t\t// Remove keyboard event listener.\n\t\tdocument.removeEventListener( 'keydown', this.boundHandleKeyDown );\n\n\t\t// Dispatch before-close event and remove open attribute.\n\t\tthis.dispatchEvent( new CustomEvent( 'before-close', { bubbles: true } ) );\n\t\tthis.removeAttribute( 'open' );\n\n\t\t// Restore siblings from inert state.\n\t\tthis.setSiblingsInert( false );\n\n\t\t// Restore focus to the previously focused element (if manage-focus is enabled).\n\t\tif ( 'no' !== this.getAttribute( 'manage-focus' ) && this.previouslyFocusedElement ) {\n\t\t\tthis.previouslyFocusedElement.focus();\n\t\t\tthis.previouslyFocusedElement = null;\n\t\t}\n\n\t\t// Dispatch close event.\n\t\tthis.dispatchEvent( new CustomEvent( 'close', { bubbles: true } ) );\n\t}\n\n\t/**\n\t * Set initial focus when modal opens.\n\t * Looks for [autofocus] element, otherwise focuses the modal container.\n\t */\n\tprivate setInitialFocus(): void {\n\t\t// Look for an element with autofocus attribute.\n\t\tconst autofocusElement = this.querySelector<HTMLElement>( '[autofocus]' );\n\n\t\t// Do we have an autofocus element?\n\t\tif ( autofocusElement ) {\n\t\t\tautofocusElement.focus();\n\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Otherwise, focus the modal container itself.\n\t\tthis.focus();\n\t}\n\n\t/**\n\t * Set or remove inert and aria-hidden on all siblings.\n\t *\n\t * @param {boolean} inert Whether to make siblings inert.\n\t */\n\tprivate setSiblingsInert( inert: boolean ): void {\n\t\t// Get all body children except this modal.\n\t\tconst bodyChildren = document.body.children;\n\n\t\t// Should we make them inert?\n\t\tif ( inert ) {\n\t\t\t// Clear any previously stored elements.\n\t\t\tthis.inertedElements = [];\n\n\t\t\t// Loop through body children and set inert.\n\t\t\tfor ( let i = 0; i < bodyChildren.length; i++ ) {\n\t\t\t\tconst element = bodyChildren[ i ];\n\n\t\t\t\t// Skip this modal and script/style elements.\n\t\t\t\tif ( element === this || 'SCRIPT' === element.tagName || 'STYLE' === element.tagName ) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\t// Set inert and aria-hidden, store reference for cleanup.\n\t\t\t\telement.setAttribute( 'inert', '' );\n\t\t\t\telement.setAttribute( 'aria-hidden', 'true' );\n\t\t\t\tthis.inertedElements.push( element );\n\t\t\t}\n\t\t} else {\n\t\t\t// Remove inert and aria-hidden from previously inerted elements.\n\t\t\tfor ( const element of this.inertedElements ) {\n\t\t\t\telement.removeAttribute( 'inert' );\n\t\t\t\telement.removeAttribute( 'aria-hidden' );\n\t\t\t}\n\n\t\t\t// Clear stored elements.\n\t\t\tthis.inertedElements = [];\n\t\t}\n\t}\n\n\t/**\n\t * Handle keydown events for Escape and focus trap.\n\t *\n\t * @param {KeyboardEvent} e Keyboard event.\n\t */\n\tprivate handleKeyDown( e: KeyboardEvent ): void {\n\t\t// Close on Escape.\n\t\tif ( 'Escape' === e.key ) {\n\t\t\te.preventDefault();\n\t\t\tthis.close();\n\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Handle focus trap on Tab (enabled by default, disable with focus-trap=\"no\").\n\t\tif ( 'Tab' === e.key && 'no' !== this.getAttribute( 'focus-trap' ) ) {\n\t\t\tthis.trapFocus( e );\n\t\t}\n\t}\n\n\t/**\n\t * Trap focus within the modal.\n\t *\n\t * @param {KeyboardEvent} e Keyboard event.\n\t */\n\tprivate trapFocus( e: KeyboardEvent ): void {\n\t\t// Get all focusable elements within the modal.\n\t\tconst focusableElements = this.querySelectorAll<HTMLElement>( FOCUSABLE_ELEMENTS );\n\n\t\t// Do we have focusable elements?\n\t\tif ( 0 === focusableElements.length ) {\n\t\t\te.preventDefault();\n\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get first, last, and currently focused elements.\n\t\tconst firstElement = focusableElements[ 0 ];\n\t\tconst lastElement = focusableElements[ focusableElements.length - 1 ];\n\t\tconst activeElement = this.ownerDocument.activeElement;\n\n\t\t// Shift+Tab on first element: move to last.\n\t\tif ( e.shiftKey && activeElement === firstElement ) {\n\t\t\te.preventDefault();\n\t\t\tlastElement.focus();\n\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Tab on last element: move to first.\n\t\tif ( ! e.shiftKey && activeElement === lastElement ) {\n\t\t\te.preventDefault();\n\t\t\tfirstElement.focus();\n\t\t}\n\t}\n\n\t/**\n\t * Handle when the component is clicked.\n\t *\n\t * @param {Event} e Event.\n\t */\n\thandleClick( e: Event ): void {\n\t\t// Close on overlay click.\n\t\tif ( e.target === this && 'yes' === this.getAttribute( 'overlay-click-close' ) ) {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t\tthis.close();\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPModalElement } from './tp-modal';\n\n/**\n * TP Modal Close.\n */\nexport class TPModalCloseElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Add event listener.\n\t\tconst button: HTMLButtonElement | null = this.querySelector( 'button' );\n\t\tbutton?.addEventListener( 'click', this.closeModal.bind( this ) );\n\t}\n\n\t/**\n\t * Close the modal.\n\t */\n\tcloseModal(): void {\n\t\t// Get modal and apply close method.\n\t\tconst modal: TPModalElement | null = this.closest( 'tp-modal' );\n\t\tmodal?.close();\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPModalElement } from './tp-modal';\nimport { TPModalCloseElement } from './tp-modal-close';\n\n/**\n * Register Components.\n */\ncustomElements.define( 'tp-modal', TPModalElement );\ncustomElements.define( 'tp-modal-close', TPModalCloseElement );\n"],"names":["TPModalElement","HTMLElement","constructor","super","previouslyFocusedElement","inertedElements","this","hasAttribute","setAttribute","boundHandleKeyDown","handleKeyDown","bind","document","querySelector","appendChild","addEventListener","handleClick","open","ownerDocument","activeElement","dispatchEvent","CustomEvent","bubbles","setSiblingsInert","getAttribute","setInitialFocus","close","removeEventListener","removeAttribute","focus","autofocusElement","inert","bodyChildren","body","children","i","length","element","tagName","push","e","key","preventDefault","trapFocus","focusableElements","querySelectorAll","firstElement","lastElement","shiftKey","target","stopPropagation","TPModalCloseElement","button","closeModal","modal","closest","customElements","define"],"sourceRoot":""}
+{"version":3,"file":"dist/modal/index.js","mappings":"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","sources":["webpack://@travelopia/web-components/./src/modal/tp-modal.ts","webpack://@travelopia/web-components/./src/modal/tp-modal-close.ts","webpack://@travelopia/web-components/./src/modal/index.ts"],"sourcesContent":["/**\n * Focusable elements selector.\n */\nconst FOCUSABLE_ELEMENTS = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * TP Modal.\n */\nexport class TPModalElement extends HTMLElement {\n\t/**\n\t * Previously focused element before modal opened.\n\t */\n\tprivate previouslyFocusedElement: HTMLElement | null = null;\n\n\t/**\n\t * Elements that were made inert when modal opened.\n\t */\n\tprivate inertedElements: Element[] = [];\n\n\t/**\n\t * Bound event handlers for cleanup.\n\t */\n\tprivate readonly boundHandleKeyDown: ( e: KeyboardEvent ) => void;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Make modal programmatically focusable for focus management.\n\t\tif ( ! this.hasAttribute( 'tabindex' ) ) {\n\t\t\tthis.setAttribute( 'tabindex', '-1' );\n\t\t}\n\n\t\t// Bind event handlers.\n\t\tthis.boundHandleKeyDown = this.handleKeyDown.bind( this );\n\n\t\t// Move modal as a direct descendent of body to avoid z-index issues.\n\t\tdocument.querySelector( 'body' )?.appendChild( this );\n\n\t\t// Event listeners.\n\t\tthis.addEventListener( 'click', this.handleClick.bind( this ) );\n\t}\n\n\t/**\n\t * Open the modal.\n\t */\n\topen(): void {\n\t\t// Save the currently focused element to restore later.\n\t\tthis.previouslyFocusedElement = this.ownerDocument.activeElement as HTMLElement;\n\n\t\t// Dispatch before-open event and set open attribute.\n\t\tthis.dispatchEvent( new CustomEvent( 'before-open', { bubbles: true } ) );\n\t\tthis.setAttribute( 'open', 'yes' );\n\n\t\t// Make all siblings inert to trap focus and hide from AT.\n\t\tthis.setSiblingsInert( true );\n\n\t\t// Add keyboard event listener for Escape and focus trap.\n\t\tdocument.addEventListener( 'keydown', this.boundHandleKeyDown );\n\n\t\t// Move focus into the modal (enabled by default, disable with manage-focus=\"no\").\n\t\tif ( 'no' !== this.getAttribute( 'manage-focus' ) ) {\n\t\t\tthis.setInitialFocus();\n\t\t}\n\n\t\t// Dispatch open event.\n\t\tthis.dispatchEvent( new CustomEvent( 'open', { bubbles: true } ) );\n\t}\n\n\t/**\n\t * Close the modal.\n\t */\n\tclose(): void {\n\t\t// Remove keyboard event listener.\n\t\tdocument.removeEventListener( 'keydown', this.boundHandleKeyDown );\n\n\t\t// Dispatch before-close event and remove open attribute.\n\t\tthis.dispatchEvent( new CustomEvent( 'before-close', { bubbles: true } ) );\n\t\tthis.removeAttribute( 'open' );\n\n\t\t// Restore siblings from inert state.\n\t\tthis.setSiblingsInert( false );\n\n\t\t// Restore focus to the previously focused element (if manage-focus is enabled).\n\t\tif ( 'no' !== this.getAttribute( 'manage-focus' ) && this.previouslyFocusedElement ) {\n\t\t\tthis.previouslyFocusedElement.focus();\n\t\t\tthis.previouslyFocusedElement = null;\n\t\t}\n\n\t\t// Dispatch close event.\n\t\tthis.dispatchEvent( new CustomEvent( 'close', { bubbles: true } ) );\n\t}\n\n\t/**\n\t * Set initial focus when modal opens.\n\t * Looks for [autofocus] element, otherwise focuses the modal container.\n\t */\n\tprivate setInitialFocus(): void {\n\t\t// Look for an element with autofocus attribute.\n\t\tconst autofocusElement = this.querySelector<HTMLElement>( '[autofocus]' );\n\n\t\t// Do we have an autofocus element?\n\t\tif ( autofocusElement ) {\n\t\t\tautofocusElement.focus();\n\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Otherwise, focus the modal container itself.\n\t\tthis.focus();\n\t}\n\n\t/**\n\t * Set or remove inert and aria-hidden on all siblings.\n\t *\n\t * @param {boolean} inert Whether to make siblings inert.\n\t */\n\tprivate setSiblingsInert( inert: boolean ): void {\n\t\t// Get all body children except this modal.\n\t\tconst bodyChildren = document.body.children;\n\n\t\t// Should we make them inert?\n\t\tif ( inert ) {\n\t\t\t// Clear any previously stored elements.\n\t\t\tthis.inertedElements = [];\n\n\t\t\t// Loop through body children and set inert.\n\t\t\tfor ( let i = 0; i < bodyChildren.length; i++ ) {\n\t\t\t\tconst element = bodyChildren[ i ];\n\n\t\t\t\t// Skip this modal and script/style elements.\n\t\t\t\tif ( element === this || 'SCRIPT' === element.tagName || 'STYLE' === element.tagName ) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\t// Set inert and aria-hidden, store reference for cleanup.\n\t\t\t\telement.setAttribute( 'inert', '' );\n\t\t\t\telement.setAttribute( 'aria-hidden', 'true' );\n\t\t\t\tthis.inertedElements.push( element );\n\t\t\t}\n\t\t} else {\n\t\t\t// Remove inert and aria-hidden from previously inerted elements.\n\t\t\tfor ( const element of this.inertedElements ) {\n\t\t\t\telement.removeAttribute( 'inert' );\n\t\t\t\telement.removeAttribute( 'aria-hidden' );\n\t\t\t}\n\n\t\t\t// Clear stored elements.\n\t\t\tthis.inertedElements = [];\n\t\t}\n\t}\n\n\t/**\n\t * Handle keydown events for Escape and focus trap.\n\t *\n\t * @param {KeyboardEvent} e Keyboard event.\n\t */\n\tprivate handleKeyDown( e: KeyboardEvent ): void {\n\t\t// Close on Escape.\n\t\tif ( 'Escape' === e.key ) {\n\t\t\te.preventDefault();\n\t\t\tthis.close();\n\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Handle focus trap on Tab (enabled by default, disable with focus-trap=\"no\").\n\t\tif ( 'Tab' === e.key && 'no' !== this.getAttribute( 'focus-trap' ) ) {\n\t\t\tthis.trapFocus( e );\n\t\t}\n\t}\n\n\t/**\n\t * Trap focus within the modal.\n\t *\n\t * @param {KeyboardEvent} e Keyboard event.\n\t */\n\tprivate trapFocus( e: KeyboardEvent ): void {\n\t\t// Get all focusable elements within the modal.\n\t\tconst focusableElements = this.querySelectorAll<HTMLElement>( FOCUSABLE_ELEMENTS );\n\n\t\t// Do we have focusable elements?\n\t\tif ( 0 === focusableElements.length ) {\n\t\t\te.preventDefault();\n\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get first, last, and currently focused elements.\n\t\tconst firstElement = focusableElements[ 0 ];\n\t\tconst lastElement = focusableElements[ focusableElements.length - 1 ];\n\t\tconst activeElement = this.ownerDocument.activeElement;\n\n\t\t// Shift+Tab on first element: move to last.\n\t\tif ( e.shiftKey && activeElement === firstElement ) {\n\t\t\te.preventDefault();\n\t\t\tlastElement.focus();\n\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Tab on last element: move to first.\n\t\tif ( ! e.shiftKey && activeElement === lastElement ) {\n\t\t\te.preventDefault();\n\t\t\tfirstElement.focus();\n\t\t}\n\t}\n\n\t/**\n\t * Handle when the component is clicked.\n\t *\n\t * @param {Event} e Event.\n\t */\n\thandleClick( e: Event ): void {\n\t\t// Close on overlay click.\n\t\tif ( e.target === this && 'yes' === this.getAttribute( 'overlay-click-close' ) ) {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t\tthis.close();\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPModalElement } from './tp-modal';\n\n/**\n * TP Modal Close.\n */\nexport class TPModalCloseElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Add event listener.\n\t\tconst button: HTMLButtonElement | null = this.querySelector( 'button' );\n\t\tbutton?.addEventListener( 'click', this.closeModal.bind( this ) );\n\t}\n\n\t/**\n\t * Close the modal.\n\t */\n\tcloseModal(): void {\n\t\t// Get modal and apply close method.\n\t\tconst modal: TPModalElement | null = this.closest( 'tp-modal' );\n\t\tmodal?.close();\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPModalElement } from './tp-modal';\nimport { TPModalCloseElement } from './tp-modal-close';\n\n/**\n * Register Components.\n */\ncustomElements.define( 'tp-modal', TPModalElement );\ncustomElements.define( 'tp-modal-close', TPModalCloseElement );\n"],"names":["TPModalElement","HTMLElement","constructor","super","previouslyFocusedElement","inertedElements","this","hasAttribute","setAttribute","boundHandleKeyDown","handleKeyDown","bind","document","querySelector","appendChild","addEventListener","handleClick","open","ownerDocument","activeElement","dispatchEvent","CustomEvent","bubbles","setSiblingsInert","getAttribute","setInitialFocus","close","removeEventListener","removeAttribute","focus","autofocusElement","inert","bodyChildren","body","children","i","length","element","tagName","push","e","key","preventDefault","trapFocus","focusableElements","querySelectorAll","firstElement","lastElement","shiftKey","target","stopPropagation","TPModalCloseElement","button","closeModal","modal","closest","customElements","define"],"ignoreList":[],"sourceRoot":""}

package/dist/multi-select/index.js

@@ -1,2 +1,2 @@
-(()=>{"use strict";class t extends HTMLElement{constructor(){super(),this.currentlyHighlightedOption=-1,this.keyboardEventListener=this.handleKeyboardInputs.bind(this),document.addEventListener("click",this.handleDocumentClick.bind(this)),this.addEventListener("change",this.update.bind(this)),this.addEventListener("focusout",this.handleFocusOut.bind(this));const t=this.querySelector("tp-multi-select-options");t&&new MutationObserver(this.initialize.bind(this)).observe(t,{childList:!0,subtree:!0}),this.initialize()}static get observedAttributes(){return["open","aria"]}isAriaEnabled(){return"no"!==this.getAttribute("aria")}attributeChangedCallback(t="",e="",i=""){e!==i&&"open"===t&&("yes"===i?(document.addEventListener("keydown",this.keyboardEventListener),this.updateAriaExpanded(!0),this.highlightNextOption(),this.dispatchEvent(new CustomEvent("open",{bubbles:!0}))):(this.unHighlightAllOptions(),document.removeEventListener("keydown",this.keyboardEventListener),this.updateAriaExpanded(!1),this.dispatchEvent(new CustomEvent("close",{bubbles:!0}))))}set value(t){if(!t||!Array.isArray(t))return;const e=this.querySelectorAll("tp-multi-select-option");null==e||e.forEach((e=>{var i;t.includes(null!==(i=e.getAttribute("value"))&&void 0!==i?i:"")?e.setAttribute("selected","yes"):e.removeAttribute("selected")})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0}))}get value(){const t=[],e=this.querySelectorAll("select option[selected]");return null==e||e.forEach((e=>{const i=e.getAttribute("value");i&&t.push(i)})),t}updateFormFieldValue(){const t=this.querySelectorAll("tp-multi-select-option"),e=this.querySelector("select");if(!t||!e)return;const i=Array.from(e.options);t.forEach((t=>{var s,l;const n=null!==(s=t.getAttribute("value"))&&void 0!==s?s:"";if(n){const s=i.find((t=>t.value===n));if("yes"===t.getAttribute("selected"))if(s)s.setAttribute("selected","selected");else{const i=document.createElement("option");i.setAttribute("value",null!==(l=t.getAttribute("value"))&&void 0!==l?l:""),i.setAttribute("selected","selected"),null==e||e.append(i)}else null==s||s.remove()}})),e.dispatchEvent(new Event("change"))}update(){this.updateFormFieldValue();const t=this.value;0!==t.length?this.setAttribute("selected","yes"):this.removeAttribute("selected");const e=this.querySelector("tp-multi-select-status");e&&(t.length>0?e.setAttribute("total",t.length.toString()):e.removeAttribute("total"))}handleDocumentClick(t){this===t.target||this.contains(t.target)||this.removeAttribute("open")}initialize(){var t;let e=this.querySelector("select");if(e)e.innerHTML="";else{e=document.createElement("select"),e.setAttribute("name",null!==(t=this.getAttribute("name"))&&void 0!==t?t:"");const i=this.getAttribute("form");i&&e.setAttribute("form",i),"no"!==this.getAttribute("multiple")&&e.setAttribute("multiple","multiple"),this.append(e)}this.update()}select(t=""){if("no"===this.getAttribute("multiple")&&(this.unSelectAll(),""===t))return void("yes"===this.getAttribute("close-on-select")&&this.removeAttribute("open"));const e=this.querySelectorAll(`tp-multi-select-option[value="${t}"]`);null==e||e.forEach((t=>{"yes"!==t.getAttribute("disabled")&&t.setAttribute("selected","yes")}));const i=this.querySelector("tp-multi-select-search");null==i||i.clear(),null==i||i.focus(),"yes"===this.getAttribute("close-on-select")&&this.removeAttribute("open"),this.update()}selectAll(){const t=this.querySelectorAll("tp-multi-select-option");null==t||t.forEach((t=>{"yes"!==t.getAttribute("disabled")&&t.setAttribute("selected","yes")})),this.update()}unSelect(t=""){const e=this.querySelectorAll(`tp-multi-select-option[value="${t}"]`);null==e||e.forEach((t=>{t.removeAttribute("selected")})),this.update()}unSelectAll(){const t=this.querySelectorAll("tp-multi-select-option");null==t||t.forEach((t=>{t.removeAttribute("selected")})),this.update()}handleKeyboardInputs(t){switch(t.key){case"ArrowDown":t.preventDefault(),this.highlightNextOption();break;case"ArrowUp":t.preventDefault(),this.highlightPreviousOption();break;case"Enter":this.toggleHighlightedOption();break;case"Escape":this.unHighlightAllOptions(),this.removeAttribute("open")}}highlightNextOption(){const t=this.querySelectorAll('tp-multi-select-option:not([hidden="yes"])');if(!t)return void(this.currentlyHighlightedOption=-1);let e=this.currentlyHighlightedOption+1;for(;e<t.length&&"yes"===t[e].getAttribute("disabled");)e++;e!==t.length&&(-1!==this.currentlyHighlightedOption&&t[this.currentlyHighlightedOption].removeAttribute("highlighted"),t[e].setAttribute("highlighted","yes"),t[e].scrollIntoView({behavior:"smooth",block:"nearest"}),this.updateAriaActiveDescendant(t[e].id||null),this.currentlyHighlightedOption=e)}highlightPreviousOption(){const t=this.querySelectorAll('tp-multi-select-option:not([hidden="yes"])');if(!t)return void(this.currentlyHighlightedOption=-1);let e=this.currentlyHighlightedOption-1;for(;e>=0&&"yes"===t[e].getAttribute("disabled");)e--;e<0||(0!==this.currentlyHighlightedOption&&t[this.currentlyHighlightedOption].removeAttribute("highlighted"),t[e].setAttribute("highlighted","yes"),t[e].scrollIntoView({behavior:"smooth",block:"nearest"}),this.updateAriaActiveDescendant(t[e].id||null),this.currentlyHighlightedOption=e)}toggleHighlightedOption(){const t=this.querySelector('tp-multi-select-option[highlighted="yes"]');null==t||t.toggle(null)}unHighlightAllOptions(){this.currentlyHighlightedOption=-1;const t=this.querySelectorAll("tp-multi-select-option");t&&t.forEach((t=>{t.removeAttribute("highlighted")})),this.updateAriaActiveDescendant(null)}getComboboxElement(){return this.querySelector("tp-multi-select-search input")||this.querySelector("tp-multi-select-field")}updateAriaExpanded(t){if(!this.isAriaEnabled())return;const e=this.getComboboxElement();e&&e.setAttribute("aria-expanded",t?"true":"false")}updateAriaActiveDescendant(t){if(!this.isAriaEnabled())return;const e=this.getComboboxElement();e&&(t?e.setAttribute("aria-activedescendant",t):e.removeAttribute("aria-activedescendant"))}handleFocusOut(t){t.relatedTarget&&this.contains(t.relatedTarget)||this.removeAttribute("open")}}class e extends HTMLElement{constructor(){super(),this.addEventListener("click",this.toggleOpen.bind(this)),this.addEventListener("keydown",this.handleKeydown.bind(this))}handleKeydown(t){const e=this.closest("tp-multi-select");e&&("Enter"!==t.key&&" "!==t.key&&"ArrowDown"!==t.key||"yes"!==e.getAttribute("open")&&(t.preventDefault(),t.stopPropagation(),e.setAttribute("open","yes")))}connectedCallback(){this.setupAriaAttributes(),this.setupLabelClick()}setupLabelClick(){const t=this.getAttribute("aria-labelledby");if(!t)return;const e=document.getElementById(t);e&&e.addEventListener("click",(()=>{this.focus()}))}setupAriaAttributes(){const t=this.closest("tp-multi-select");if(!(null==t?void 0:t.isAriaEnabled()))return;if(t.querySelector("tp-multi-select-search input"))return;const e=t.querySelector("tp-multi-select-options");this.setAttribute("role","combobox"),this.setAttribute("aria-haspopup","listbox"),this.setAttribute("aria-expanded","false"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),e&&this.setAttribute("aria-controls",e.id)}toggleOpen(){const t=this.closest("tp-multi-select");t&&("yes"===t.getAttribute("open")?t.removeAttribute("open"):t.setAttribute("open","yes"))}}class i extends HTMLElement{}class s extends HTMLElement{static get observedAttributes(){return["total","format"]}attributeChangedCallback(t="",e="",i=""){e!==i&&this.update()}update(){var t,e,i,s;const l=null!==(t=this.getAttribute("format"))&&void 0!==t?t:"$total Selected";let n=l.replace("$total",null!==(e=this.getAttribute("total"))&&void 0!==e?e:"");if(l.includes("$value")){const t=this.closest("tp-multi-select");if(t){const e=null!==(i=t.value)&&void 0!==i?i:[];let l="";if(e.length>0){const i=t.querySelector(`tp-multi-select-option[value="${e[0]}"]`);i&&(l=null!==(s=i.getAttribute("label"))&&void 0!==s?s:"")}n=n.replace("$value",l)}}this.innerHTML=n}}let l=0;class n extends HTMLElement{connectedCallback(){this.setupAriaAttributes()}setupAriaAttributes(){const t=this.closest("tp-multi-select");(null==t?void 0:t.isAriaEnabled())&&(this.id||(this.id="tp-multi-select-listbox-"+ ++l),this.setAttribute("role","listbox"),"no"!==t.getAttribute("multiple")&&this.setAttribute("aria-multiselectable","true"))}}let r=0;class u extends HTMLElement{constructor(){super(),this.addEventListener("click",this.toggle.bind(this))}static get observedAttributes(){return["selected"]}connectedCallback(){this.setupAriaAttributes()}attributeChangedCallback(t="",e="",i=""){e!==i&&"selected"===t&&this.updateAriaState()}setupAriaAttributes(){const t=this.closest("tp-multi-select");(null==t?void 0:t.isAriaEnabled())&&(this.id||(this.id="tp-multi-select-option-"+ ++r),this.setAttribute("role","option"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","-1"),this.updateAriaState())}updateAriaState(){const t=this.closest("tp-multi-select");if(!(null==t?void 0:t.isAriaEnabled()))return;const e="yes"===this.getAttribute("selected");this.setAttribute("aria-selected",e?"true":"false")}toggle(t){var e;null==t||t.preventDefault(),null==t||t.stopPropagation();const i=this.closest("tp-multi-select"),s=null!==(e=this.getAttribute("value"))&&void 0!==e?e:"";"yes"!==this.getAttribute("selected")?(null==i||i.select(s),null==i||i.dispatchEvent(new CustomEvent("select",{bubbles:!0,detail:{value:s}}))):(null==i||i.unSelect(s),null==i||i.dispatchEvent(new CustomEvent("unselect",{bubbles:!0,detail:{value:s}}))),null==i||i.dispatchEvent(new CustomEvent("change",{bubbles:!0}))}}class o extends HTMLElement{constructor(){var t;super();const e=this.querySelector("input");null==e||e.addEventListener("keydown",this.handleKeyboardInputs.bind(this)),null==e||e.addEventListener("keyup",this.handleSearchChange.bind(this)),null==e||e.addEventListener("input",this.handleSearchChange.bind(this)),this.addEventListener("click",this.handleClick.bind(this)),null===(t=this.closest("tp-multi-select"))||void 0===t||t.addEventListener("open",this.focus.bind(this))}connectedCallback(){this.setupAriaAttributes()}setupAriaAttributes(){const t=this.closest("tp-multi-select");if(!(null==t?void 0:t.isAriaEnabled()))return;const e=this.querySelector("input");if(!e)return;const i=t.querySelector("tp-multi-select-options");e.setAttribute("role","combobox"),e.setAttribute("aria-haspopup","listbox"),e.setAttribute("aria-expanded","false"),e.setAttribute("aria-autocomplete","list"),(null==i?void 0:i.id)&&e.setAttribute("aria-controls",i.id)}handleKeyboardInputs(t){const e=this.closest("tp-multi-select"),i=this.querySelector("input");if(e&&i)switch(t.key){case"Enter":t.preventDefault();break;case"ArrowDown":"yes"!==e.getAttribute("open")&&(t.stopPropagation(),e.setAttribute("open","yes"));break;case"Backspace":if(0===i.value.length){const t=e.querySelector("tp-multi-select-pill:last-of-type");t&&t.removePill()}}}handleSearchChange(){var t;const e=this.closest("tp-multi-select"),i=this.querySelector("input"),s=null===(t=this.closest("tp-multi-select"))||void 0===t?void 0:t.querySelectorAll("tp-multi-select-option");if(!e||!i||!s)return;let l=0;s.forEach((t=>{var e;(null===(e=t.getAttribute("label"))||void 0===e?void 0:e.toLowerCase().match(new RegExp(`.*${i.value.toLowerCase().replace(/\s/g,".*")}.*`)))?(t.removeAttribute("hidden"),l++):t.setAttribute("hidden","yes")})),""===i.value?i.removeAttribute("style"):(i.style.width=`${i.value.length+2}ch`,e.setAttribute("open","yes")),e.setAttribute("visible-options",l.toString())}handleClick(t){var e;t.preventDefault(),t.stopPropagation(),this.dispatchEvent(new CustomEvent("multi-select-opened")),document.dispatchEvent(new Event("click")),null===(e=this.closest("tp-multi-select"))||void 0===e||e.setAttribute("open","yes")}clear(){const t=this.querySelector("input");t&&(t.value="",t.dispatchEvent(new Event("change")))}focus(){var t;this.handleSearchChange(),null===(t=this.querySelector("input"))||void 0===t||t.focus()}}class c extends HTMLElement{constructor(){var t,e;super(),this.defaultRole=null,this.defaultAriaLive=null,null===(e=null===(t=this.closest("tp-multi-select"))||void 0===t?void 0:t.querySelector("tp-multi-select-search input"))||void 0===e||e.addEventListener("input",this.update.bind(this))}connectedCallback(){this.defaultRole=this.getAttribute("role"),this.defaultAriaLive=this.getAttribute("aria-live"),this.update()}update(){var t,e;const i=this.closest("tp-multi-select");if(!i)return;const s=i.querySelectorAll('tp-multi-select-option:not([hidden="yes"])').length,l=null!==(t=this.getAttribute("format"))&&void 0!==t?t:"$count results",n=null!==(e=this.getAttribute("no-results-format"))&&void 0!==e?e:"No results found",r=this.getAttribute("no-results-role"),u=this.getAttribute("no-results-aria-live");0===s?(this.textContent=n,r&&this.setAttribute("role",r),u&&this.setAttribute("aria-live",u)):(this.textContent=l.replace("$count",s.toString()),this.defaultRole?this.setAttribute("role",this.defaultRole):this.removeAttribute("role"),this.defaultAriaLive?this.setAttribute("aria-live",this.defaultAriaLive):this.removeAttribute("aria-live"))}}class a extends HTMLElement{constructor(){var t;super(),null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.handleButtonClick.bind(this))}handleButtonClick(t){null==t||t.preventDefault(),null==t||t.stopPropagation(),this.removePill()}removePill(){var t;const e=this.closest("tp-multi-select");e&&this.getAttribute("value")&&(e.unSelect(null!==(t=this.getAttribute("value"))&&void 0!==t?t:""),e.dispatchEvent(new CustomEvent("unselect",{bubbles:!0})),e.dispatchEvent(new CustomEvent("change",{bubbles:!0})))}}class h extends HTMLElement{constructor(){var t,e,i;super(),null===(t=this.closest("tp-multi-select"))||void 0===t||t.addEventListener("change",this.update.bind(this)),null===(i=null===(e=this.closest("tp-multi-select"))||void 0===e?void 0:e.querySelector("select"))||void 0===i||i.addEventListener("change",(()=>this.update())),this.update()}update(){var t;const e=this.closest("tp-multi-select");if(!e)return;const i=this.querySelectorAll("tp-multi-select-pill"),s=null!==(t=[...new Set(e.value)])&&void 0!==t?t:[],l=[];i.forEach((t=>{var e;const i=null!==(e=t.getAttribute("value"))&&void 0!==e?e:"";""!==i&&(l.push(i),s.includes(i)||t.remove())})),s.filter((t=>!l.includes(t))).forEach((t=>{var i;if(""===t)return;const s=e.querySelector(`tp-multi-select-option[value="${t}"]`);s&&this.appendChild(this.createPill(t,null!==(i=s.getAttribute("label"))&&void 0!==i?i:""))}))}createPill(t,e){const i=document.createElement("tp-multi-select-pill");i.setAttribute("value",t);const s=document.createElement("span");s.textContent=e;const l=document.createElement("button");l.setAttribute("type","button");const n=this.getAttribute("remove-format");return l.textContent=n?n.replace("$label",e):"x",l.addEventListener("click",(()=>{i.removePill()})),l.addEventListener("keydown",(t=>{"Enter"!==t.key&&" "!==t.key||t.stopPropagation()})),i.appendChild(s),i.appendChild(l),i}}let d=0;class p extends HTMLElement{constructor(){var t;super(),null===(t=this.closest("tp-multi-select"))||void 0===t||t.addEventListener("change",this.handleValueChanged.bind(this)),this.addEventListener("click",this.toggleSelectAll.bind(this))}connectedCallback(){this.setupAriaAttributes()}setupAriaAttributes(){const t=this.closest("tp-multi-select");(null==t?void 0:t.isAriaEnabled())&&(this.id||(this.id="tp-multi-select-all-"+ ++d),this.setAttribute("role","option"),this.updateAriaState())}updateAriaState(){const t=this.closest("tp-multi-select");if(!(null==t?void 0:t.isAriaEnabled()))return;const e="yes"===this.getAttribute("selected");this.setAttribute("aria-selected",e?"true":"false")}handleValueChanged(){var t,e;const i=this.closest("tp-multi-select"),s=null==i?void 0:i.querySelectorAll("tp-multi-select-option");i&&s&&(Array.from(s).filter((t=>"yes"!==t.getAttribute("disabled"))).length===i.value.length?(this.setAttribute("selected","yes"),this.innerHTML=null!==(t=this.getAttribute("unselect-text"))&&void 0!==t?t:""):(this.removeAttribute("selected"),this.innerHTML=null!==(e=this.getAttribute("select-text"))&&void 0!==e?e:""),this.updateAriaState())}toggleSelectAll(){const t=this.closest("tp-multi-select");t&&("yes"!==this.getAttribute("selected")?(t.selectAll(),t.dispatchEvent(new CustomEvent("select-all",{bubbles:!0}))):(t.unSelectAll(),t.dispatchEvent(new CustomEvent("unselect-all",{bubbles:!0}))),t.dispatchEvent(new CustomEvent("change",{bubbles:!0})))}}customElements.define("tp-multi-select",t),customElements.define("tp-multi-select-field",e),customElements.define("tp-multi-select-placeholder",i),customElements.define("tp-multi-select-status",s),customElements.define("tp-multi-select-options",n),customElements.define("tp-multi-select-option",u),customElements.define("tp-multi-select-search",o),customElements.define("tp-multi-select-search-status",c),customElements.define("tp-multi-select-pill",a),customElements.define("tp-multi-select-pills",h),customElements.define("tp-multi-select-select-all",p)})();
+(()=>{"use strict";class t extends HTMLElement{constructor(){super(),this.currentlyHighlightedOption=-1,this.keyboardEventListener=this.handleKeyboardInputs.bind(this),document.addEventListener("click",this.handleDocumentClick.bind(this)),this.addEventListener("change",this.update.bind(this)),this.addEventListener("focusout",this.handleFocusOut.bind(this));const t=this.querySelector("tp-multi-select-options");t&&new MutationObserver(this.initialize.bind(this)).observe(t,{childList:!0,subtree:!0}),this.initialize()}static get observedAttributes(){return["open","aria"]}isAriaEnabled(){return"no"!==this.getAttribute("aria")}attributeChangedCallback(t="",e="",i=""){e!==i&&"open"===t&&("yes"===i?(document.addEventListener("keydown",this.keyboardEventListener),this.updateAriaExpanded(!0),this.highlightNextOption(),this.dispatchEvent(new CustomEvent("open",{bubbles:!0}))):(this.unHighlightAllOptions(),document.removeEventListener("keydown",this.keyboardEventListener),this.updateAriaExpanded(!1),this.dispatchEvent(new CustomEvent("close",{bubbles:!0}))))}set value(t){if(!t||!Array.isArray(t))return;const e=this.querySelectorAll("tp-multi-select-option");null==e||e.forEach(e=>{var i;t.includes(null!==(i=e.getAttribute("value"))&&void 0!==i?i:"")?e.setAttribute("selected","yes"):e.removeAttribute("selected")}),this.dispatchEvent(new CustomEvent("change",{bubbles:!0}))}get value(){const t=[],e=this.querySelectorAll("select option[selected]");return null==e||e.forEach(e=>{const i=e.getAttribute("value");i&&t.push(i)}),t}updateFormFieldValue(){const t=this.querySelectorAll("tp-multi-select-option"),e=this.querySelector("select");if(!t||!e)return;const i=Array.from(e.options);t.forEach(t=>{var s,l;const n=null!==(s=t.getAttribute("value"))&&void 0!==s?s:"";if(n){const s=i.find(t=>t.value===n);if("yes"===t.getAttribute("selected"))if(s)s.setAttribute("selected","selected");else{const i=document.createElement("option");i.setAttribute("value",null!==(l=t.getAttribute("value"))&&void 0!==l?l:""),i.setAttribute("selected","selected"),null==e||e.append(i)}else null==s||s.remove()}}),e.dispatchEvent(new Event("change"))}update(){this.updateFormFieldValue();const t=this.value;0!==t.length?this.setAttribute("selected","yes"):this.removeAttribute("selected");const e=this.querySelector("tp-multi-select-status");e&&(t.length>0?e.setAttribute("total",t.length.toString()):e.removeAttribute("total"))}handleDocumentClick(t){this===t.target||this.contains(t.target)||this.removeAttribute("open")}initialize(){var t;let e=this.querySelector("select");if(e)e.innerHTML="";else{e=document.createElement("select"),e.setAttribute("name",null!==(t=this.getAttribute("name"))&&void 0!==t?t:"");const i=this.getAttribute("form");i&&e.setAttribute("form",i),"no"!==this.getAttribute("multiple")&&e.setAttribute("multiple","multiple"),this.append(e)}this.update()}select(t=""){if("no"===this.getAttribute("multiple")&&(this.unSelectAll(),""===t))return void("yes"===this.getAttribute("close-on-select")&&this.removeAttribute("open"));const e=this.querySelectorAll(`tp-multi-select-option[value="${t}"]`);null==e||e.forEach(t=>{"yes"!==t.getAttribute("disabled")&&t.setAttribute("selected","yes")});const i=this.querySelector("tp-multi-select-search");null==i||i.clear(),null==i||i.focus(),"yes"===this.getAttribute("close-on-select")&&this.removeAttribute("open"),this.update()}selectAll(){const t=this.querySelectorAll("tp-multi-select-option");null==t||t.forEach(t=>{"yes"!==t.getAttribute("disabled")&&t.setAttribute("selected","yes")}),this.update()}unSelect(t=""){const e=this.querySelectorAll(`tp-multi-select-option[value="${t}"]`);null==e||e.forEach(t=>{t.removeAttribute("selected")}),this.update()}unSelectAll(){const t=this.querySelectorAll("tp-multi-select-option");null==t||t.forEach(t=>{t.removeAttribute("selected")}),this.update()}handleKeyboardInputs(t){switch(t.key){case"ArrowDown":t.preventDefault(),this.highlightNextOption();break;case"ArrowUp":t.preventDefault(),this.highlightPreviousOption();break;case"Enter":this.toggleHighlightedOption();break;case"Escape":this.unHighlightAllOptions(),this.removeAttribute("open")}}highlightNextOption(){const t=this.querySelectorAll('tp-multi-select-option:not([hidden="yes"])');if(!t)return void(this.currentlyHighlightedOption=-1);let e=this.currentlyHighlightedOption+1;for(;e<t.length&&"yes"===t[e].getAttribute("disabled");)e++;e!==t.length&&(-1!==this.currentlyHighlightedOption&&t[this.currentlyHighlightedOption].removeAttribute("highlighted"),t[e].setAttribute("highlighted","yes"),t[e].scrollIntoView({behavior:"smooth",block:"nearest"}),this.updateAriaActiveDescendant(t[e].id||null),this.currentlyHighlightedOption=e)}highlightPreviousOption(){const t=this.querySelectorAll('tp-multi-select-option:not([hidden="yes"])');if(!t)return void(this.currentlyHighlightedOption=-1);let e=this.currentlyHighlightedOption-1;for(;e>=0&&"yes"===t[e].getAttribute("disabled");)e--;e<0||(0!==this.currentlyHighlightedOption&&t[this.currentlyHighlightedOption].removeAttribute("highlighted"),t[e].setAttribute("highlighted","yes"),t[e].scrollIntoView({behavior:"smooth",block:"nearest"}),this.updateAriaActiveDescendant(t[e].id||null),this.currentlyHighlightedOption=e)}toggleHighlightedOption(){const t=this.querySelector('tp-multi-select-option[highlighted="yes"]');null==t||t.toggle(null)}unHighlightAllOptions(){this.currentlyHighlightedOption=-1;const t=this.querySelectorAll("tp-multi-select-option");t&&t.forEach(t=>{t.removeAttribute("highlighted")}),this.updateAriaActiveDescendant(null)}getComboboxElement(){return this.querySelector("tp-multi-select-search input")||this.querySelector("tp-multi-select-field")}updateAriaExpanded(t){if(!this.isAriaEnabled())return;const e=this.getComboboxElement();e&&e.setAttribute("aria-expanded",t?"true":"false")}updateAriaActiveDescendant(t){if(!this.isAriaEnabled())return;const e=this.getComboboxElement();e&&(t?e.setAttribute("aria-activedescendant",t):e.removeAttribute("aria-activedescendant"))}handleFocusOut(t){t.relatedTarget&&this.contains(t.relatedTarget)||this.removeAttribute("open")}}class e extends HTMLElement{constructor(){super(),this.addEventListener("click",this.toggleOpen.bind(this)),this.addEventListener("keydown",this.handleKeydown.bind(this))}handleKeydown(t){const e=this.closest("tp-multi-select");e&&("Enter"!==t.key&&" "!==t.key&&"ArrowDown"!==t.key||"yes"!==e.getAttribute("open")&&(t.preventDefault(),t.stopPropagation(),e.setAttribute("open","yes")))}connectedCallback(){this.setupAriaAttributes(),this.setupLabelClick()}setupLabelClick(){const t=this.getAttribute("aria-labelledby");if(!t)return;const e=document.getElementById(t);e&&e.addEventListener("click",()=>{this.focus()})}setupAriaAttributes(){const t=this.closest("tp-multi-select");if(!(null==t?void 0:t.isAriaEnabled()))return;if(t.querySelector("tp-multi-select-search input"))return;const e=t.querySelector("tp-multi-select-options");this.setAttribute("role","combobox"),this.setAttribute("aria-haspopup","listbox"),this.setAttribute("aria-expanded","false"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),e&&this.setAttribute("aria-controls",e.id)}toggleOpen(){const t=this.closest("tp-multi-select");t&&("yes"===t.getAttribute("open")?t.removeAttribute("open"):t.setAttribute("open","yes"))}}class i extends HTMLElement{}class s extends HTMLElement{static get observedAttributes(){return["total","format"]}attributeChangedCallback(t="",e="",i=""){e!==i&&this.update()}update(){var t,e,i,s;const l=null!==(t=this.getAttribute("format"))&&void 0!==t?t:"$total Selected";let n=l.replace("$total",null!==(e=this.getAttribute("total"))&&void 0!==e?e:"");if(l.includes("$value")){const t=this.closest("tp-multi-select");if(t){const e=null!==(i=t.value)&&void 0!==i?i:[];let l="";if(e.length>0){const i=t.querySelector(`tp-multi-select-option[value="${e[0]}"]`);i&&(l=null!==(s=i.getAttribute("label"))&&void 0!==s?s:"")}n=n.replace("$value",l)}}this.innerHTML=n}}let l=0;class n extends HTMLElement{connectedCallback(){this.setupAriaAttributes()}setupAriaAttributes(){const t=this.closest("tp-multi-select");(null==t?void 0:t.isAriaEnabled())&&(this.id||(this.id="tp-multi-select-listbox-"+ ++l),this.setAttribute("role","listbox"),"no"!==t.getAttribute("multiple")&&this.setAttribute("aria-multiselectable","true"))}}let r=0;class u extends HTMLElement{constructor(){super(),this.addEventListener("click",this.toggle.bind(this))}static get observedAttributes(){return["selected"]}connectedCallback(){this.setupAriaAttributes()}attributeChangedCallback(t="",e="",i=""){e!==i&&"selected"===t&&this.updateAriaState()}setupAriaAttributes(){const t=this.closest("tp-multi-select");(null==t?void 0:t.isAriaEnabled())&&(this.id||(this.id="tp-multi-select-option-"+ ++r),this.setAttribute("role","option"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","-1"),this.updateAriaState())}updateAriaState(){const t=this.closest("tp-multi-select");if(!(null==t?void 0:t.isAriaEnabled()))return;const e="yes"===this.getAttribute("selected");this.setAttribute("aria-selected",e?"true":"false")}toggle(t){var e;null==t||t.preventDefault(),null==t||t.stopPropagation();const i=this.closest("tp-multi-select"),s=null!==(e=this.getAttribute("value"))&&void 0!==e?e:"";"yes"!==this.getAttribute("selected")?(null==i||i.select(s),null==i||i.dispatchEvent(new CustomEvent("select",{bubbles:!0,detail:{value:s}}))):(null==i||i.unSelect(s),null==i||i.dispatchEvent(new CustomEvent("unselect",{bubbles:!0,detail:{value:s}}))),null==i||i.dispatchEvent(new CustomEvent("change",{bubbles:!0}))}}class o extends HTMLElement{constructor(){var t;super();const e=this.querySelector("input");null==e||e.addEventListener("keydown",this.handleKeyboardInputs.bind(this)),null==e||e.addEventListener("keyup",this.handleSearchChange.bind(this)),null==e||e.addEventListener("input",this.handleSearchChange.bind(this)),this.addEventListener("click",this.handleClick.bind(this)),null===(t=this.closest("tp-multi-select"))||void 0===t||t.addEventListener("open",this.focus.bind(this))}connectedCallback(){this.setupAriaAttributes()}setupAriaAttributes(){const t=this.closest("tp-multi-select");if(!(null==t?void 0:t.isAriaEnabled()))return;const e=this.querySelector("input");if(!e)return;const i=t.querySelector("tp-multi-select-options");e.setAttribute("role","combobox"),e.setAttribute("aria-haspopup","listbox"),e.setAttribute("aria-expanded","false"),e.setAttribute("aria-autocomplete","list"),(null==i?void 0:i.id)&&e.setAttribute("aria-controls",i.id)}handleKeyboardInputs(t){const e=this.closest("tp-multi-select"),i=this.querySelector("input");if(e&&i)switch(t.key){case"Enter":t.preventDefault();break;case"ArrowDown":"yes"!==e.getAttribute("open")&&(t.stopPropagation(),e.setAttribute("open","yes"));break;case"Backspace":if(0===i.value.length){const t=e.querySelector("tp-multi-select-pill:last-of-type");t&&t.removePill()}}}handleSearchChange(){var t;const e=this.closest("tp-multi-select"),i=this.querySelector("input"),s=null===(t=this.closest("tp-multi-select"))||void 0===t?void 0:t.querySelectorAll("tp-multi-select-option");if(!e||!i||!s)return;let l=0;s.forEach(t=>{var e;(null===(e=t.getAttribute("label"))||void 0===e?void 0:e.toLowerCase().match(new RegExp(`.*${i.value.toLowerCase().replace(/\s/g,".*")}.*`)))?(t.removeAttribute("hidden"),l++):t.setAttribute("hidden","yes")}),""===i.value?i.removeAttribute("style"):(i.style.width=`${i.value.length+2}ch`,e.setAttribute("open","yes")),e.setAttribute("visible-options",l.toString())}handleClick(t){var e;t.preventDefault(),t.stopPropagation(),this.dispatchEvent(new CustomEvent("multi-select-opened")),document.dispatchEvent(new Event("click")),null===(e=this.closest("tp-multi-select"))||void 0===e||e.setAttribute("open","yes")}clear(){const t=this.querySelector("input");t&&(t.value="",t.dispatchEvent(new Event("change")))}focus(){var t;this.handleSearchChange(),null===(t=this.querySelector("input"))||void 0===t||t.focus()}}class c extends HTMLElement{constructor(){var t,e;super(),this.defaultRole=null,this.defaultAriaLive=null,null===(e=null===(t=this.closest("tp-multi-select"))||void 0===t?void 0:t.querySelector("tp-multi-select-search input"))||void 0===e||e.addEventListener("input",this.update.bind(this))}connectedCallback(){this.defaultRole=this.getAttribute("role"),this.defaultAriaLive=this.getAttribute("aria-live"),this.update()}update(){var t,e;const i=this.closest("tp-multi-select");if(!i)return;const s=i.querySelectorAll('tp-multi-select-option:not([hidden="yes"])').length,l=null!==(t=this.getAttribute("format"))&&void 0!==t?t:"$count results",n=null!==(e=this.getAttribute("no-results-format"))&&void 0!==e?e:"No results found",r=this.getAttribute("no-results-role"),u=this.getAttribute("no-results-aria-live");0===s?(this.textContent=n,r&&this.setAttribute("role",r),u&&this.setAttribute("aria-live",u)):(this.textContent=l.replace("$count",s.toString()),this.defaultRole?this.setAttribute("role",this.defaultRole):this.removeAttribute("role"),this.defaultAriaLive?this.setAttribute("aria-live",this.defaultAriaLive):this.removeAttribute("aria-live"))}}class a extends HTMLElement{constructor(){var t;super(),null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.handleButtonClick.bind(this))}handleButtonClick(t){null==t||t.preventDefault(),null==t||t.stopPropagation(),this.removePill()}removePill(){var t;const e=this.closest("tp-multi-select");e&&this.getAttribute("value")&&(e.unSelect(null!==(t=this.getAttribute("value"))&&void 0!==t?t:""),e.dispatchEvent(new CustomEvent("unselect",{bubbles:!0})),e.dispatchEvent(new CustomEvent("change",{bubbles:!0})))}}class h extends HTMLElement{constructor(){var t,e,i;super(),null===(t=this.closest("tp-multi-select"))||void 0===t||t.addEventListener("change",this.update.bind(this)),null===(i=null===(e=this.closest("tp-multi-select"))||void 0===e?void 0:e.querySelector("select"))||void 0===i||i.addEventListener("change",()=>this.update()),this.update()}update(){const t=this.closest("tp-multi-select");if(!t)return;const e=this.querySelectorAll("tp-multi-select-pill"),i=[...new Set(t.value)],s=[];e.forEach(t=>{var e;const l=null!==(e=t.getAttribute("value"))&&void 0!==e?e:"";""!==l&&(s.push(l),i.includes(l)||t.remove())}),i.filter(t=>!s.includes(t)).forEach(e=>{var i;if(""===e)return;const s=t.querySelector(`tp-multi-select-option[value="${e}"]`);s&&this.appendChild(this.createPill(e,null!==(i=s.getAttribute("label"))&&void 0!==i?i:""))})}createPill(t,e){const i=document.createElement("tp-multi-select-pill");i.setAttribute("value",t);const s=document.createElement("span");s.textContent=e;const l=document.createElement("button");l.setAttribute("type","button");const n=this.getAttribute("remove-format");return l.textContent=n?n.replace("$label",e):"x",l.addEventListener("click",()=>{i.removePill()}),l.addEventListener("keydown",t=>{"Enter"!==t.key&&" "!==t.key||t.stopPropagation()}),i.appendChild(s),i.appendChild(l),i}}let d=0;class p extends HTMLElement{constructor(){var t;super(),null===(t=this.closest("tp-multi-select"))||void 0===t||t.addEventListener("change",this.handleValueChanged.bind(this)),this.addEventListener("click",this.toggleSelectAll.bind(this))}connectedCallback(){this.setupAriaAttributes()}setupAriaAttributes(){const t=this.closest("tp-multi-select");(null==t?void 0:t.isAriaEnabled())&&(this.id||(this.id="tp-multi-select-all-"+ ++d),this.setAttribute("role","option"),this.updateAriaState())}updateAriaState(){const t=this.closest("tp-multi-select");if(!(null==t?void 0:t.isAriaEnabled()))return;const e="yes"===this.getAttribute("selected");this.setAttribute("aria-selected",e?"true":"false")}handleValueChanged(){var t,e;const i=this.closest("tp-multi-select"),s=null==i?void 0:i.querySelectorAll("tp-multi-select-option");i&&s&&(Array.from(s).filter(t=>"yes"!==t.getAttribute("disabled")).length===i.value.length?(this.setAttribute("selected","yes"),this.innerHTML=null!==(t=this.getAttribute("unselect-text"))&&void 0!==t?t:""):(this.removeAttribute("selected"),this.innerHTML=null!==(e=this.getAttribute("select-text"))&&void 0!==e?e:""),this.updateAriaState())}toggleSelectAll(){const t=this.closest("tp-multi-select");t&&("yes"!==this.getAttribute("selected")?(t.selectAll(),t.dispatchEvent(new CustomEvent("select-all",{bubbles:!0}))):(t.unSelectAll(),t.dispatchEvent(new CustomEvent("unselect-all",{bubbles:!0}))),t.dispatchEvent(new CustomEvent("change",{bubbles:!0})))}}customElements.define("tp-multi-select",t),customElements.define("tp-multi-select-field",e),customElements.define("tp-multi-select-placeholder",i),customElements.define("tp-multi-select-status",s),customElements.define("tp-multi-select-options",n),customElements.define("tp-multi-select-option",u),customElements.define("tp-multi-select-search",o),customElements.define("tp-multi-select-search-status",c),customElements.define("tp-multi-select-pill",a),customElements.define("tp-multi-select-pills",h),customElements.define("tp-multi-select-select-all",p)})();
 //# sourceMappingURL=index.js.map