@travelopia/web-components 0.9.9 → 0.9.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/tabs/index.js +1 -1
- package/dist/tabs/index.js.map +1 -1
- package/package.json +1 -1
package/dist/tabs/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(()=>{"use strict";class t extends HTMLElement{constructor(){super();const t=this.getTrigger();null==t||t.addEventListener("click",this.handleTriggerClick.bind(this)),this.setupAriaAttributes()}getTrigger(){return this.querySelector("button")||this.querySelector("a")}static get observedAttributes(){return["active"]}attributeChangedCallback(t,e,r){e!==r&&"active"===t&&this.updateAriaState("yes"===r)}isAriaEnabled(){var t;const e=this.closest("tp-tabs");return null===(t=null==e?void 0:e.isAriaEnabled())||void 0===t||t}setupAriaAttributes(){if(!this.isAriaEnabled())return;const t=this.getTrigger();if(!t)return;t.id||(t.id=`tp-tab-${Math.random().toString(36).substring(2,9)}`);const e=this.getPanelId();e&&!t.hasAttribute("aria-controls")&&t.setAttribute("aria-controls",e);const r="yes"===this.getAttribute("active");this.updateAriaState(r)}getPanelId(){var t,e;const r=this.getTrigger();return r?r instanceof HTMLAnchorElement?null!==(e=null===(t=r.getAttribute("href"))||void 0===t?void 0:t.replace("#",""))&&void 0!==e?e:"":r.getAttribute("aria-controls")||r.getAttribute("data-controls")||"":""}updateAriaState(t){if(!this.isAriaEnabled())return;const e=this.getTrigger();e&&(e.setAttribute("aria-selected",t?"true":"false"),e.setAttribute("tabindex",t?"0":"-1"))}handleTriggerClick(t){const e=this.closest("tp-tabs"),r=this.getTrigger(),i=this.getPanelId();e
|
|
1
|
+
(()=>{"use strict";class t extends HTMLElement{constructor(){super();const t=this.getTrigger();null==t||t.addEventListener("click",this.handleTriggerClick.bind(this)),this.setupAriaAttributes()}getTrigger(){return this.querySelector("button")||this.querySelector("a")}static get observedAttributes(){return["active"]}attributeChangedCallback(t,e,r){e!==r&&"active"===t&&this.updateAriaState("yes"===r)}isAriaEnabled(){var t;const e=this.closest("tp-tabs");return null===(t=null==e?void 0:e.isAriaEnabled())||void 0===t||t}setupAriaAttributes(){if(!this.isAriaEnabled())return;const t=this.getTrigger();if(!t)return;t.id||(t.id=`tp-tab-${Math.random().toString(36).substring(2,9)}`);const e=this.getPanelId();e&&!t.hasAttribute("aria-controls")&&t.setAttribute("aria-controls",e);const r="yes"===this.getAttribute("active");this.updateAriaState(r)}getPanelId(){var t,e;const r=this.getTrigger();return r?r instanceof HTMLAnchorElement?null!==(e=null===(t=r.getAttribute("href"))||void 0===t?void 0:t.replace("#",""))&&void 0!==e?e:"":r.getAttribute("aria-controls")||r.getAttribute("data-controls")||"":""}updateAriaState(t){if(!this.isAriaEnabled())return;const e=this.getTrigger();e&&(e.setAttribute("aria-selected",t?"true":"false"),e.setAttribute("tabindex",t?"0":"-1"))}handleTriggerClick(t){const e=this.closest("tp-tabs"),r=this.getTrigger(),i=this.getPanelId();if(!e||!r||""===i)return;r instanceof HTMLAnchorElement&&"yes"!==e.getAttribute("update-url")&&t.preventDefault();const s=document.getElementById(i);if(s){const t=s.closest("tp-tabs");if(t&&t!==e){t.setAttribute("current-tab",i);const r=t.closest("tp-tabs-tab");return void(r&&r.id&&(e.getAttribute("current-tab")===r.id?e.update():e.setAttribute("current-tab",r.id)))}}e.setAttribute("current-tab",i)}isCurrentTab(t=""){return t===this.getPanelId()}}class e extends HTMLElement{constructor(){super(),this.addEventListener("keydown",this.handleKeyDown.bind(this))}isAriaEnabled(){var t;const e=this.closest("tp-tabs");return null===(t=null==e?void 0:e.isAriaEnabled())||void 0===t||t}getTabTriggers(){const t=this.querySelectorAll("tp-tabs-nav-item"),e=[];return t.forEach((t=>{const r=t.querySelector("button")||t.querySelector("a");r&&e.push(r)})),e}handleKeyDown(t){if(!this.isAriaEnabled())return;const e=this.getTabTriggers();if(0===e.length)return;const r=e.findIndex((t=>t===this.ownerDocument.activeElement));if(-1===r)return;let i=r;switch(t.key){case"ArrowLeft":i=0===r?e.length-1:r-1;break;case"ArrowRight":i=r===e.length-1?0:r+1;break;case"Home":i=0;break;case"End":i=e.length-1;break;default:return}t.preventDefault();const s=e[i];s.click(),s.focus()}}class r extends HTMLElement{constructor(){super(),this.setupAriaAttributes()}static get observedAttributes(){return["open"]}attributeChangedCallback(t,e,r){e!==r&&"open"===t&&this.updateAriaState("yes"===r)}isAriaEnabled(){var t;const e=this.closest("tp-tabs");return null===(t=null==e?void 0:e.isAriaEnabled())||void 0===t||t}setupAriaAttributes(){if(!this.isAriaEnabled())return;const t=this.getAttribute("id");if(t){const e=this.closest("tp-tabs"),r=null==e?void 0:e.querySelector(`a[href="#${t}"]`);(null==r?void 0:r.id)&&!this.hasAttribute("aria-labelledby")&&this.setAttribute("aria-labelledby",r.id)}const e="yes"===this.getAttribute("open");this.updateAriaState(e)}updateAriaState(t){this.isAriaEnabled()&&(t?(this.removeAttribute("aria-hidden"),this.removeAttribute("inert"),this.setAttribute("tabindex","0")):(this.setAttribute("aria-hidden","true"),this.setAttribute("inert",""),this.removeAttribute("tabindex")))}}class i extends HTMLElement{constructor(){super(),this.updateTabFromUrlHash(),window.addEventListener("hashchange",this.updateTabFromUrlHash.bind(this))}static get observedAttributes(){return["current-tab","update-url","overflow","aria"]}isAriaEnabled(){return"no"!==this.getAttribute("aria")}attributeChangedCallback(t="",e="",r=""){e!==r&&(this.update(),"current-tab"===t&&this.dispatchEvent(new CustomEvent("change",{bubbles:!0})))}update(){setTimeout((()=>{var t;const e=null!==(t=this.getAttribute("current-tab"))&&void 0!==t?t:"";if(!this.querySelector(`tp-tabs-tab[id="${e}"]`))return;const r=this.getCurrentNestedTab(e),i=this.querySelectorAll("tp-tabs-nav-item");i&&i.forEach((t=>{t.isCurrentTab(e)||r&&t.isCurrentTab(r)?t.setAttribute("active","yes"):t.removeAttribute("active")}));const s=this.querySelectorAll("tp-tabs-tab");s&&s.forEach((t=>{e===t.getAttribute("id")||r&&r===t.getAttribute("id")?t.setAttribute("open","yes"):t.removeAttribute("open")}))}),0)}updateTabFromUrlHash(){"yes"===this.getAttribute("update-url")&&this.setCurrentTab()}setCurrentTab(t=""){""!==t&&this.setAttribute("current-tab",t);const e=window.location.hash;if(""!==e){const t=this.querySelector(`a[href="${e}"]`),r=null==t?void 0:t.closest("tp-tabs");null==r||r.setAttribute("current-tab",e.replace("#",""))}}getCurrentNestedTab(t=""){if(""===t)return"";const e=this.querySelector(`tp-tabs-tab[id="${t}"]`),r=null==e?void 0:e.querySelector("tp-tabs"),i=null==r?void 0:r.getAttribute("current-tab");return null!=i?i:""}}customElements.define("tp-tabs",i),customElements.define("tp-tabs-nav",e),customElements.define("tp-tabs-nav-item",t),customElements.define("tp-tabs-tab",r)})();
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/tabs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dist/tabs/index.js","mappings":"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","sources":["webpack://@travelopia/web-components/./src/tabs/tp-tabs-nav-item.ts","webpack://@travelopia/web-components/./src/tabs/tp-tabs-nav.ts","webpack://@travelopia/web-components/./src/tabs/tp-tabs-tab.ts","webpack://@travelopia/web-components/./src/tabs/tp-tabs.ts","webpack://@travelopia/web-components/./src/tabs/index.ts"],"sourcesContent":["/**\n * Internal dependencies.\n */\nimport { TPTabsElement } from './tp-tabs';\n\n/**\n * TP Tabs Nav Item Element.\n */\nexport class TPTabsNavItemElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Constructor function.\n\t\tsuper();\n\n\t\t// Get the trigger element (button or anchor).\n\t\tconst trigger = this.getTrigger();\n\n\t\t// Add click event listener to the trigger.\n\t\ttrigger?.addEventListener( 'click', this.handleTriggerClick.bind( this ) );\n\n\t\t// Set up ARIA attributes.\n\t\tthis.setupAriaAttributes();\n\t}\n\n\t/**\n\t * Get the trigger element (button or anchor).\n\t *\n\t * @return {HTMLButtonElement | HTMLAnchorElement | null} The trigger element.\n\t */\n\tgetTrigger(): HTMLButtonElement | HTMLAnchorElement | null {\n\t\t// Look for button first, then anchor.\n\t\treturn this.querySelector( 'button' ) || this.querySelector( 'a' );\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// Observe the active attribute to update ARIA state.\n\t\treturn [ 'active' ];\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// Early return if no change.\n\t\tif ( oldValue === newValue ) {\n\t\t\t// No change.\n\t\t\treturn;\n\t\t}\n\n\t\t// Update ARIA state when active attribute changes.\n\t\tif ( 'active' === name ) {\n\t\t\tthis.updateAriaState( 'yes' === newValue );\n\t\t}\n\t}\n\n\t/**\n\t * Check if ARIA management is enabled.\n\t *\n\t * @return {boolean} Whether ARIA management is enabled.\n\t */\n\tprivate isAriaEnabled(): boolean {\n\t\t// Get parent tabs component.\n\t\tconst tabs: TPTabsElement | null = this.closest( 'tp-tabs' );\n\n\t\t// Return whether aria management is enabled.\n\t\treturn tabs?.isAriaEnabled() ?? true;\n\t}\n\n\t/**\n\t * Set up ARIA attributes on the trigger element.\n\t */\n\tprivate setupAriaAttributes(): void {\n\t\t// Check if aria management is enabled.\n\t\tif ( ! this.isAriaEnabled() ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get the trigger element.\n\t\tconst trigger = this.getTrigger();\n\n\t\t// Bail if no trigger.\n\t\tif ( ! trigger ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Generate ID for the trigger if not present.\n\t\tif ( ! trigger.id ) {\n\t\t\ttrigger.id = `tp-tab-${ Math.random().toString( 36 ).substring( 2, 9 ) }`;\n\t\t}\n\n\t\t// Get the panel ID from href (anchor) or aria-controls (button).\n\t\tconst panelId = this.getPanelId();\n\n\t\t// Set aria-controls if we have a panel ID and it's not already set.\n\t\tif ( panelId && ! trigger.hasAttribute( 'aria-controls' ) ) {\n\t\t\ttrigger.setAttribute( 'aria-controls', panelId );\n\t\t}\n\n\t\t// Set initial ARIA state.\n\t\tconst isActive = 'yes' === this.getAttribute( 'active' );\n\t\tthis.updateAriaState( isActive );\n\t}\n\n\t/**\n\t * Get the panel ID that this nav item controls.\n\t *\n\t * @return {string} The panel ID.\n\t */\n\tgetPanelId(): string {\n\t\t// Get the trigger.\n\t\tconst trigger = this.getTrigger();\n\n\t\t// Bail if no trigger.\n\t\tif ( ! trigger ) {\n\t\t\t// Bail.\n\t\t\treturn '';\n\t\t}\n\n\t\t// Check if trigger is a link.\n\t\tif ( trigger instanceof HTMLAnchorElement ) {\n\t\t\t// For anchors, get from href. For buttons, get from aria-controls or data-controls.\n\t\t\treturn trigger.getAttribute( 'href' )?.replace( '#', '' ) ?? '';\n\t\t}\n\n\t\t// For buttons, check aria-controls or data-controls.\n\t\treturn trigger.getAttribute( 'aria-controls' ) || trigger.getAttribute( 'data-controls' ) || '';\n\t}\n\n\t/**\n\t * Update ARIA state on the trigger element.\n\t *\n\t * @param {boolean} isActive Whether this tab is active.\n\t */\n\tprivate updateAriaState( isActive: boolean ): void {\n\t\t// Check if aria management is enabled.\n\t\tif ( ! this.isAriaEnabled() ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get the trigger element.\n\t\tconst trigger = this.getTrigger();\n\n\t\t// Bail if no trigger.\n\t\tif ( ! trigger ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Update aria-selected.\n\t\ttrigger.setAttribute( 'aria-selected', isActive ? 'true' : 'false' );\n\n\t\t// Update tabindex for roving tabindex pattern.\n\t\ttrigger.setAttribute( 'tabindex', isActive ? '0' : '-1' );\n\t}\n\n\t/**\n\t * Handle trigger click.\n\t *\n\t * @param {Event} e Click event.\n\t *\n\t * @protected\n\t */\n\tprotected handleTriggerClick( e: Event ): void {\n\t\t// Find the closest tp-tabs element.\n\t\tconst tabs: TPTabsElement | null = this.closest( 'tp-tabs' );\n\t\tconst trigger = this.getTrigger();\n\t\tconst panelId = this.getPanelId();\n\n\t\t// If the tabs component, trigger, or panel ID is missing, do nothing.\n\t\tif ( ! tabs || ! trigger || '' === panelId ) {\n\t\t\t// Exit if required elements are not found.\n\t\t\treturn;\n\t\t}\n\n\t\t// For anchors, prevent default if update-url is not enabled.\n\t\tif ( trigger instanceof HTMLAnchorElement && 'yes' !== tabs.getAttribute( 'update-url' ) ) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\t// Update the 'current-tab' attribute on the tabs component.\n\t\ttabs.setAttribute( 'current-tab', panelId );\n\t}\n\n\t/**\n\t * Check if this component contains the trigger for the current tab.\n\t *\n\t * @param {string} currentTab Current tab ID.\n\t *\n\t * @return {boolean} Whether it is the current tab or not.\n\t */\n\tisCurrentTab( currentTab: string = '' ): boolean {\n\t\t// Return true if this nav item's panel ID matches the current tab.\n\t\treturn currentTab === this.getPanelId();\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPTabsElement } from './tp-tabs';\n\n/**\n * TP Tabs Nav Element.\n */\nexport class TPTabsNavElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Add keyboard event listener for arrow key navigation.\n\t\tthis.addEventListener( 'keydown', this.handleKeyDown.bind( this ) );\n\t}\n\n\t/**\n\t * Check if ARIA management is enabled.\n\t *\n\t * @return {boolean} Whether ARIA management is enabled.\n\t */\n\tprivate isAriaEnabled(): boolean {\n\t\t// Get parent tabs component.\n\t\tconst tabs: TPTabsElement | null = this.closest( 'tp-tabs' );\n\n\t\t// Return whether aria management is enabled.\n\t\treturn tabs?.isAriaEnabled() ?? true;\n\t}\n\n\t/**\n\t * Get all tab trigger elements (buttons or anchors).\n\t *\n\t * @return {Array<HTMLButtonElement | HTMLAnchorElement>} Array of trigger elements.\n\t */\n\tprivate getTabTriggers(): Array<HTMLButtonElement | HTMLAnchorElement> {\n\t\t// Get all nav items and collect their triggers.\n\t\tconst navItems = this.querySelectorAll( 'tp-tabs-nav-item' );\n\t\tconst triggers: Array<HTMLButtonElement | HTMLAnchorElement> = [];\n\n\t\t// Iterate over nav items to find triggers.\n\t\tnavItems.forEach( ( navItem ) => {\n\t\t\t// Look for button first, then anchor.\n\t\t\tconst trigger = navItem.querySelector( 'button' ) || navItem.querySelector( 'a' );\n\n\t\t\t// Add trigger to array if found.\n\t\t\tif ( trigger ) {\n\t\t\t\ttriggers.push( trigger );\n\t\t\t}\n\t\t} );\n\n\t\t// Return all triggers.\n\t\treturn triggers;\n\t}\n\n\t/**\n\t * Handle keydown events for keyboard navigation.\n\t *\n\t * @param {KeyboardEvent} e Keyboard event.\n\t */\n\tprivate handleKeyDown( e: KeyboardEvent ): void {\n\t\t// Only handle if aria management is enabled.\n\t\tif ( ! this.isAriaEnabled() ) {\n\t\t\t// Bail early.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get all tab triggers.\n\t\tconst triggers = this.getTabTriggers();\n\n\t\t// Bail if no triggers.\n\t\tif ( triggers.length === 0 ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Find current focused trigger index using ownerDocument.\n\t\tconst currentIndex = triggers.findIndex( ( trigger ) => trigger === this.ownerDocument.activeElement );\n\n\t\t// Only handle if focus is on a trigger.\n\t\tif ( currentIndex === -1 ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get new index.\n\t\tlet newIndex = currentIndex;\n\n\t\t// Handle arrow keys, Home, and End.\n\t\tswitch ( e.key ) {\n\t\t\t// Move to previous tab, wrap to end if at start.\n\t\t\tcase 'ArrowLeft':\n\t\t\t\tnewIndex = currentIndex === 0 ? triggers.length - 1 : currentIndex - 1;\n\t\t\t\tbreak;\n\n\t\t\t// Move to next tab, wrap to start if at end.\n\t\t\tcase 'ArrowRight':\n\t\t\t\tnewIndex = currentIndex === triggers.length - 1 ? 0 : currentIndex + 1;\n\t\t\t\tbreak;\n\n\t\t\t// Move to first tab.\n\t\t\tcase 'Home':\n\t\t\t\tnewIndex = 0;\n\t\t\t\tbreak;\n\n\t\t\t// Move to last tab.\n\t\t\tcase 'End':\n\t\t\t\tnewIndex = triggers.length - 1;\n\t\t\t\tbreak;\n\n\t\t\t// Not a navigation key, bail.\n\t\t\tdefault:\n\n\t\t\t\t// Not a navigation key, bail.\n\t\t\t\treturn;\n\t\t}\n\n\t\t// Prevent default browser behavior.\n\t\te.preventDefault();\n\n\t\t// Activate the new tab first (updates tabindex), then focus.\n\t\tconst newTrigger = triggers[ newIndex ];\n\t\tnewTrigger.click();\n\t\tnewTrigger.focus();\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPTabsElement } from './tp-tabs';\n\n/**\n * TP Tabs Tab Element.\n */\nexport class TPTabsTabElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Set up ARIA attributes.\n\t\tthis.setupAriaAttributes();\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// Observe the open attribute to update ARIA state.\n\t\treturn [ 'open' ];\n\t}\n\n\t/**\n\t * Attribute changed callback.\n\t *\n\t * @param {string} name Attribute name.\n\t * @param {string} oldValue Old value.\n\t * @param {string} newValue New value.\n\t */\n\tattributeChangedCallback( name: string, oldValue: string, newValue: string ): void {\n\t\t// Early return if no change.\n\t\tif ( oldValue === newValue ) {\n\t\t\t// No change.\n\t\t\treturn;\n\t\t}\n\n\t\t// Update ARIA state when open attribute changes.\n\t\tif ( 'open' === name ) {\n\t\t\tthis.updateAriaState( 'yes' === newValue );\n\t\t}\n\t}\n\n\t/**\n\t * Check if ARIA management is enabled.\n\t *\n\t * @return {boolean} Whether ARIA management is enabled.\n\t */\n\tprivate isAriaEnabled(): boolean {\n\t\t// Get parent tabs component.\n\t\tconst tabs: TPTabsElement | null = this.closest( 'tp-tabs' );\n\n\t\t// Return whether aria management is enabled.\n\t\treturn tabs?.isAriaEnabled() ?? true;\n\t}\n\n\t/**\n\t * Set up ARIA attributes on this tab panel.\n\t */\n\tprivate setupAriaAttributes(): void {\n\t\t// Check if aria management is enabled.\n\t\tif ( ! this.isAriaEnabled() ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get the panel ID.\n\t\tconst panelId = this.getAttribute( 'id' );\n\n\t\t// Find the corresponding tab trigger by matching href.\n\t\tif ( panelId ) {\n\t\t\tconst tabs: TPTabsElement | null = this.closest( 'tp-tabs' );\n\t\t\tconst trigger = tabs?.querySelector( `a[href=\"#${ panelId }\"]` );\n\n\t\t\t// Set aria-labelledby if trigger has an ID.\n\t\t\tif ( trigger?.id && ! this.hasAttribute( 'aria-labelledby' ) ) {\n\t\t\t\tthis.setAttribute( 'aria-labelledby', trigger.id );\n\t\t\t}\n\t\t}\n\n\t\t// Set initial ARIA state.\n\t\tconst isOpen = 'yes' === this.getAttribute( 'open' );\n\t\tthis.updateAriaState( isOpen );\n\t}\n\n\t/**\n\t * Update ARIA state on this tab panel.\n\t *\n\t * @param {boolean} isOpen Whether this panel is open.\n\t */\n\tprivate updateAriaState( isOpen: boolean ): void {\n\t\t// Check if aria management is enabled.\n\t\tif ( ! this.isAriaEnabled() ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Update aria-hidden, inert, and tabindex based on open state.\n\t\tif ( isOpen ) {\n\t\t\tthis.removeAttribute( 'aria-hidden' );\n\t\t\tthis.removeAttribute( 'inert' );\n\t\t\tthis.setAttribute( 'tabindex', '0' );\n\t\t} else {\n\t\t\tthis.setAttribute( 'aria-hidden', 'true' );\n\t\t\tthis.setAttribute( 'inert', '' );\n\t\t\tthis.removeAttribute( 'tabindex' );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPTabsNavItemElement } from './tp-tabs-nav-item';\nimport { TPTabsTabElement } from './tp-tabs-tab';\n\n/**\n * TP Tabs.\n */\nexport class TPTabsElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Update the current tab based on the URL hash.\n\t\tthis.updateTabFromUrlHash();\n\n\t\t// Listen for hash changes in the URL and update the tab accordingly.\n\t\twindow.addEventListener( 'hashchange', this.updateTabFromUrlHash.bind( this ) );\n\t}\n\n\t/**\n\t * Get observed attributes.\n\t *\n\t * @return {Array} List of observed attributes.\n\t */\n\tstatic get observedAttributes(): string[] {\n\t\t// Attributes observed in the TPTabsElement web-component.\n\t\treturn [ 'current-tab', 'update-url', 'overflow', 'aria' ];\n\t}\n\n\t/**\n\t * Check if ARIA management is enabled.\n\t *\n\t * @return {boolean} Whether ARIA management is enabled.\n\t */\n\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 * Attribute changed callback.\n\t *\n\t * @param {string} name Attribute name.\n\t * @param {string} oldValue Old value.\n\t * @param {string} newValue New value.\n\t */\n\tattributeChangedCallback( name: string = '', oldValue: string = '', newValue: string = '' ): void {\n\t\t// If the attribute value hasn't changed, do nothing.\n\t\tif ( oldValue === newValue ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Update the component whenever an observed attribute changes.\n\t\tthis.update();\n\n\t\t// If the 'current-tab' attribute has changed, dispatch a 'change' event.\n\t\tif ( 'current-tab' === name ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'change', { bubbles: true } ) );\n\t\t}\n\t}\n\n\t/**\n\t * Update this component.\n\t */\n\tupdate(): void {\n\t\t// Get current tab.\n\t\tconst currentTab: string = this.getAttribute( 'current-tab' ) ?? '';\n\n\t\t// Check if current tab exists.\n\t\tif ( ! this.querySelector( `tp-tabs-tab[id=\"${ currentTab }\"]` ) ) {\n\t\t\t// Exit if no matching tab is found.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get current nested tab if has.\n\t\tconst currentNestedTab = this.getCurrentNestedTab( currentTab );\n\n\t\t// Update nav items.\n\t\tconst navItems: NodeListOf<TPTabsNavItemElement> = this.querySelectorAll( 'tp-tabs-nav-item' );\n\n\t\t// Update the navigation items based on the current tab.\n\t\tif ( navItems ) {\n\t\t\tnavItems.forEach( ( navItem: TPTabsNavItemElement ): void => {\n\t\t\t\t// If the nav item corresponds to the current tab or nested tab, set it as active.\n\t\t\t\tif ( navItem.isCurrentTab( currentTab ) || ( currentNestedTab && navItem.isCurrentTab( currentNestedTab ) ) ) {\n\t\t\t\t\tnavItem.setAttribute( 'active', 'yes' );\n\t\t\t\t} else {\n\t\t\t\t\tnavItem.removeAttribute( 'active' );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\t// Update tabs.\n\t\tconst tabs: NodeListOf<TPTabsTabElement> = this.querySelectorAll( 'tp-tabs-tab' );\n\n\t\t// Update the tab panels based on the current tab.\n\t\tif ( tabs ) {\n\t\t\ttabs.forEach( ( tab: TPTabsTabElement ): void => {\n\t\t\t\t// If the tab corresponds to the current tab or nested tab, open it.\n\t\t\t\tif ( currentTab === tab.getAttribute( 'id' ) || ( currentNestedTab && currentNestedTab === tab.getAttribute( 'id' ) ) ) {\n\t\t\t\t\ttab.setAttribute( 'open', 'yes' );\n\t\t\t\t} else {\n\t\t\t\t\ttab.removeAttribute( 'open' );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t}\n\n\t/**\n\t * Update tab from URL hash.\n\t */\n\tupdateTabFromUrlHash(): void {\n\t\t// If 'update-url' attribute is not set to 'yes', do nothing.\n\t\tif ( 'yes' !== this.getAttribute( 'update-url' ) ) {\n\t\t\t// Exit if the 'update-url' attribute is not enabled.\n\t\t\treturn;\n\t\t}\n\n\t\t// Set current associated tab.\n\t\tthis.setCurrentTab();\n\t}\n\n\t/**\n\t * Set current tab.\n\t *\n\t * @param {string} tabId Tab ID.\n\t */\n\tsetCurrentTab( tabId: string = '' ): void {\n\t\t// If a tab ID is provided, set it as the current tab.\n\t\tif ( '' !== tabId ) {\n\t\t\tthis.setAttribute( 'current-tab', tabId );\n\t\t}\n\n\t\t// Set current tab based on current url hash.\n\t\tconst urlHash: string = window.location.hash;\n\n\t\t// Find the link that matches the URL hash.\n\t\tif ( '' !== urlHash ) {\n\t\t\tconst currentLink: HTMLAnchorElement | null = this.querySelector( `a[href=\"${ urlHash }\"]` );\n\t\t\tconst currentTab = currentLink?.closest( 'tp-tabs' );\n\t\t\tcurrentTab?.setAttribute( 'current-tab', urlHash.replace( '#', '' ) );\n\t\t}\n\t}\n\n\t/**\n\t * Get current nested tab.\n\t *\n\t * @param {string} currentTab Tab ID.\n\t *\n\t * @return {string} If has Nested current tab or empty.\n\t */\n\tgetCurrentNestedTab( currentTab: string = '' ): string {\n\t\t// If no current tab is provided, return an empty string.\n\t\tif ( '' === currentTab ) {\n\t\t\t// Exit if no current tab is provided.\n\t\t\treturn '';\n\t\t}\n\n\t\t// Find the element corresponding to the current tab ID.\n\t\tconst currentTabElement = this.querySelector( `tp-tabs-tab[id=\"${ currentTab }\"]` );\n\n\t\t// Find the nested tp-tabs element within the current tab.\n\t\tconst currentNestedTabElement = currentTabElement?.querySelector( 'tp-tabs' );\n\n\t\t// Get the ID of the current nested tab, if any.\n\t\tconst currentNestedTab = currentNestedTabElement?.getAttribute( 'current-tab' );\n\n\t\t// Return the nested tab ID, or an empty string if none exists.\n\t\treturn currentNestedTab ?? '';\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPTabsNavItemElement } from './tp-tabs-nav-item';\nimport { TPTabsNavElement } from './tp-tabs-nav';\nimport { TPTabsTabElement } from './tp-tabs-tab';\nimport { TPTabsElement } from './tp-tabs';\n\n/**\n * Register Components.\n */\n\n// Register parent first so children can find it during their constructor.\ncustomElements.define( 'tp-tabs', TPTabsElement );\ncustomElements.define( 'tp-tabs-nav', TPTabsNavElement );\ncustomElements.define( 'tp-tabs-nav-item', TPTabsNavItemElement );\ncustomElements.define( 'tp-tabs-tab', TPTabsTabElement );\n"],"names":["TPTabsNavItemElement","HTMLElement","constructor","super","trigger","this","getTrigger","addEventListener","handleTriggerClick","bind","setupAriaAttributes","querySelector","observedAttributes","attributeChangedCallback","name","oldValue","newValue","updateAriaState","isAriaEnabled","tabs","closest","id","Math","random","toString","substring","panelId","getPanelId","hasAttribute","setAttribute","isActive","getAttribute","HTMLAnchorElement","replace","e","preventDefault","isCurrentTab","currentTab","TPTabsNavElement","handleKeyDown","getTabTriggers","navItems","querySelectorAll","triggers","forEach","navItem","push","length","currentIndex","findIndex","ownerDocument","activeElement","newIndex","key","newTrigger","click","focus","TPTabsTabElement","isOpen","removeAttribute","TPTabsElement","updateTabFromUrlHash","window","update","dispatchEvent","CustomEvent","bubbles","currentNestedTab","getCurrentNestedTab","tab","setCurrentTab","tabId","urlHash","location","hash","currentLink","currentTabElement","currentNestedTabElement","customElements","define"],"sourceRoot":""}
|
|
1
|
+
{"version":3,"file":"dist/tabs/index.js","mappings":"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","sources":["webpack://@travelopia/web-components/./src/tabs/tp-tabs-nav-item.ts","webpack://@travelopia/web-components/./src/tabs/tp-tabs-nav.ts","webpack://@travelopia/web-components/./src/tabs/tp-tabs-tab.ts","webpack://@travelopia/web-components/./src/tabs/tp-tabs.ts","webpack://@travelopia/web-components/./src/tabs/index.ts"],"sourcesContent":["/**\n * Internal dependencies.\n */\nimport { TPTabsElement } from './tp-tabs';\n\n/**\n * TP Tabs Nav Item Element.\n */\nexport class TPTabsNavItemElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Constructor function.\n\t\tsuper();\n\n\t\t// Get the trigger element (button or anchor).\n\t\tconst trigger = this.getTrigger();\n\n\t\t// Add click event listener to the trigger.\n\t\ttrigger?.addEventListener( 'click', this.handleTriggerClick.bind( this ) );\n\n\t\t// Set up ARIA attributes.\n\t\tthis.setupAriaAttributes();\n\t}\n\n\t/**\n\t * Get the trigger element (button or anchor).\n\t *\n\t * @return {HTMLButtonElement | HTMLAnchorElement | null} The trigger element.\n\t */\n\tgetTrigger(): HTMLButtonElement | HTMLAnchorElement | null {\n\t\t// Look for button first, then anchor.\n\t\treturn this.querySelector( 'button' ) || this.querySelector( 'a' );\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// Observe the active attribute to update ARIA state.\n\t\treturn [ 'active' ];\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// Early return if no change.\n\t\tif ( oldValue === newValue ) {\n\t\t\t// No change.\n\t\t\treturn;\n\t\t}\n\n\t\t// Update ARIA state when active attribute changes.\n\t\tif ( 'active' === name ) {\n\t\t\tthis.updateAriaState( 'yes' === newValue );\n\t\t}\n\t}\n\n\t/**\n\t * Check if ARIA management is enabled.\n\t *\n\t * @return {boolean} Whether ARIA management is enabled.\n\t */\n\tprivate isAriaEnabled(): boolean {\n\t\t// Get parent tabs component.\n\t\tconst tabs: TPTabsElement | null = this.closest( 'tp-tabs' );\n\n\t\t// Return whether aria management is enabled.\n\t\treturn tabs?.isAriaEnabled() ?? true;\n\t}\n\n\t/**\n\t * Set up ARIA attributes on the trigger element.\n\t */\n\tprivate setupAriaAttributes(): void {\n\t\t// Check if aria management is enabled.\n\t\tif ( ! this.isAriaEnabled() ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get the trigger element.\n\t\tconst trigger = this.getTrigger();\n\n\t\t// Bail if no trigger.\n\t\tif ( ! trigger ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Generate ID for the trigger if not present.\n\t\tif ( ! trigger.id ) {\n\t\t\ttrigger.id = `tp-tab-${ Math.random().toString( 36 ).substring( 2, 9 ) }`;\n\t\t}\n\n\t\t// Get the panel ID from href (anchor) or aria-controls (button).\n\t\tconst panelId = this.getPanelId();\n\n\t\t// Set aria-controls if we have a panel ID and it's not already set.\n\t\tif ( panelId && ! trigger.hasAttribute( 'aria-controls' ) ) {\n\t\t\ttrigger.setAttribute( 'aria-controls', panelId );\n\t\t}\n\n\t\t// Set initial ARIA state.\n\t\tconst isActive = 'yes' === this.getAttribute( 'active' );\n\t\tthis.updateAriaState( isActive );\n\t}\n\n\t/**\n\t * Get the panel ID that this nav item controls.\n\t *\n\t * @return {string} The panel ID.\n\t */\n\tgetPanelId(): string {\n\t\t// Get the trigger.\n\t\tconst trigger = this.getTrigger();\n\n\t\t// Bail if no trigger.\n\t\tif ( ! trigger ) {\n\t\t\t// Bail.\n\t\t\treturn '';\n\t\t}\n\n\t\t// Check if trigger is a link.\n\t\tif ( trigger instanceof HTMLAnchorElement ) {\n\t\t\t// For anchors, get from href. For buttons, get from aria-controls or data-controls.\n\t\t\treturn trigger.getAttribute( 'href' )?.replace( '#', '' ) ?? '';\n\t\t}\n\n\t\t// For buttons, check aria-controls or data-controls.\n\t\treturn trigger.getAttribute( 'aria-controls' ) || trigger.getAttribute( 'data-controls' ) || '';\n\t}\n\n\t/**\n\t * Update ARIA state on the trigger element.\n\t *\n\t * @param {boolean} isActive Whether this tab is active.\n\t */\n\tprivate updateAriaState( isActive: boolean ): void {\n\t\t// Check if aria management is enabled.\n\t\tif ( ! this.isAriaEnabled() ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get the trigger element.\n\t\tconst trigger = this.getTrigger();\n\n\t\t// Bail if no trigger.\n\t\tif ( ! trigger ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Update aria-selected.\n\t\ttrigger.setAttribute( 'aria-selected', isActive ? 'true' : 'false' );\n\n\t\t// Update tabindex for roving tabindex pattern.\n\t\ttrigger.setAttribute( 'tabindex', isActive ? '0' : '-1' );\n\t}\n\n\t/**\n\t * Handle trigger click.\n\t *\n\t * @param {Event} e Click event.\n\t *\n\t * @protected\n\t */\n\tprotected handleTriggerClick( e: Event ): void {\n\t\t// Find the closest tp-tabs element.\n\t\tconst tabs: TPTabsElement | null = this.closest( 'tp-tabs' );\n\t\tconst trigger = this.getTrigger();\n\t\tconst panelId = this.getPanelId();\n\n\t\t// If the tabs component, trigger, or panel ID is missing, do nothing.\n\t\tif ( ! tabs || ! trigger || '' === panelId ) {\n\t\t\t// Exit if required elements are not found.\n\t\t\treturn;\n\t\t}\n\n\t\t// For anchors, prevent default if update-url is not enabled.\n\t\tif ( trigger instanceof HTMLAnchorElement && 'yes' !== tabs.getAttribute( 'update-url' ) ) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\t// Find the target panel.\n\t\tconst targetPanel: HTMLElement | null = document.getElementById( panelId );\n\n\t\t// Check if the target panel belongs to a nested tp-tabs.\n\t\tif ( targetPanel ) {\n\t\t\tconst panelTabs: TPTabsElement | null = targetPanel.closest( 'tp-tabs' );\n\n\t\t\t// If the panel belongs to a different (nested) tp-tabs, update that instead.\n\t\t\tif ( panelTabs && panelTabs !== tabs ) {\n\t\t\t\t// Update the nested tp-tabs.\n\t\t\t\tpanelTabs.setAttribute( 'current-tab', panelId );\n\n\t\t\t\t// Also ensure the parent tab containing the nested tp-tabs is open.\n\t\t\t\tconst parentTab = panelTabs.closest( 'tp-tabs-tab' );\n\n\t\t\t\t// Check if found a parent tab.\n\t\t\t\tif ( parentTab && parentTab.id ) {\n\t\t\t\t\t// Check if parent's current-tab is already the same value.\n\t\t\t\t\tif ( tabs.getAttribute( 'current-tab' ) === parentTab.id ) {\n\t\t\t\t\t\t// Force update since setAttribute won't trigger attributeChangedCallback.\n\t\t\t\t\t\ttabs.update();\n\t\t\t\t\t} else {\n\t\t\t\t\t\ttabs.setAttribute( 'current-tab', parentTab.id );\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Exit early since we've handled the nested case.\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\n\t\t// Update the 'current-tab' attribute on the tabs component.\n\t\ttabs.setAttribute( 'current-tab', panelId );\n\t}\n\n\t/**\n\t * Check if this component contains the trigger for the current tab.\n\t *\n\t * @param {string} currentTab Current tab ID.\n\t *\n\t * @return {boolean} Whether it is the current tab or not.\n\t */\n\tisCurrentTab( currentTab: string = '' ): boolean {\n\t\t// Return true if this nav item's panel ID matches the current tab.\n\t\treturn currentTab === this.getPanelId();\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPTabsElement } from './tp-tabs';\n\n/**\n * TP Tabs Nav Element.\n */\nexport class TPTabsNavElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Add keyboard event listener for arrow key navigation.\n\t\tthis.addEventListener( 'keydown', this.handleKeyDown.bind( this ) );\n\t}\n\n\t/**\n\t * Check if ARIA management is enabled.\n\t *\n\t * @return {boolean} Whether ARIA management is enabled.\n\t */\n\tprivate isAriaEnabled(): boolean {\n\t\t// Get parent tabs component.\n\t\tconst tabs: TPTabsElement | null = this.closest( 'tp-tabs' );\n\n\t\t// Return whether aria management is enabled.\n\t\treturn tabs?.isAriaEnabled() ?? true;\n\t}\n\n\t/**\n\t * Get all tab trigger elements (buttons or anchors).\n\t *\n\t * @return {Array<HTMLButtonElement | HTMLAnchorElement>} Array of trigger elements.\n\t */\n\tprivate getTabTriggers(): Array<HTMLButtonElement | HTMLAnchorElement> {\n\t\t// Get all nav items and collect their triggers.\n\t\tconst navItems = this.querySelectorAll( 'tp-tabs-nav-item' );\n\t\tconst triggers: Array<HTMLButtonElement | HTMLAnchorElement> = [];\n\n\t\t// Iterate over nav items to find triggers.\n\t\tnavItems.forEach( ( navItem ) => {\n\t\t\t// Look for button first, then anchor.\n\t\t\tconst trigger = navItem.querySelector( 'button' ) || navItem.querySelector( 'a' );\n\n\t\t\t// Add trigger to array if found.\n\t\t\tif ( trigger ) {\n\t\t\t\ttriggers.push( trigger );\n\t\t\t}\n\t\t} );\n\n\t\t// Return all triggers.\n\t\treturn triggers;\n\t}\n\n\t/**\n\t * Handle keydown events for keyboard navigation.\n\t *\n\t * @param {KeyboardEvent} e Keyboard event.\n\t */\n\tprivate handleKeyDown( e: KeyboardEvent ): void {\n\t\t// Only handle if aria management is enabled.\n\t\tif ( ! this.isAriaEnabled() ) {\n\t\t\t// Bail early.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get all tab triggers.\n\t\tconst triggers = this.getTabTriggers();\n\n\t\t// Bail if no triggers.\n\t\tif ( triggers.length === 0 ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Find current focused trigger index using ownerDocument.\n\t\tconst currentIndex = triggers.findIndex( ( trigger ) => trigger === this.ownerDocument.activeElement );\n\n\t\t// Only handle if focus is on a trigger.\n\t\tif ( currentIndex === -1 ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get new index.\n\t\tlet newIndex = currentIndex;\n\n\t\t// Handle arrow keys, Home, and End.\n\t\tswitch ( e.key ) {\n\t\t\t// Move to previous tab, wrap to end if at start.\n\t\t\tcase 'ArrowLeft':\n\t\t\t\tnewIndex = currentIndex === 0 ? triggers.length - 1 : currentIndex - 1;\n\t\t\t\tbreak;\n\n\t\t\t// Move to next tab, wrap to start if at end.\n\t\t\tcase 'ArrowRight':\n\t\t\t\tnewIndex = currentIndex === triggers.length - 1 ? 0 : currentIndex + 1;\n\t\t\t\tbreak;\n\n\t\t\t// Move to first tab.\n\t\t\tcase 'Home':\n\t\t\t\tnewIndex = 0;\n\t\t\t\tbreak;\n\n\t\t\t// Move to last tab.\n\t\t\tcase 'End':\n\t\t\t\tnewIndex = triggers.length - 1;\n\t\t\t\tbreak;\n\n\t\t\t// Not a navigation key, bail.\n\t\t\tdefault:\n\n\t\t\t\t// Not a navigation key, bail.\n\t\t\t\treturn;\n\t\t}\n\n\t\t// Prevent default browser behavior.\n\t\te.preventDefault();\n\n\t\t// Activate the new tab first (updates tabindex), then focus.\n\t\tconst newTrigger = triggers[ newIndex ];\n\t\tnewTrigger.click();\n\t\tnewTrigger.focus();\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPTabsElement } from './tp-tabs';\n\n/**\n * TP Tabs Tab Element.\n */\nexport class TPTabsTabElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Set up ARIA attributes.\n\t\tthis.setupAriaAttributes();\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// Observe the open attribute to update ARIA state.\n\t\treturn [ 'open' ];\n\t}\n\n\t/**\n\t * Attribute changed callback.\n\t *\n\t * @param {string} name Attribute name.\n\t * @param {string} oldValue Old value.\n\t * @param {string} newValue New value.\n\t */\n\tattributeChangedCallback( name: string, oldValue: string, newValue: string ): void {\n\t\t// Early return if no change.\n\t\tif ( oldValue === newValue ) {\n\t\t\t// No change.\n\t\t\treturn;\n\t\t}\n\n\t\t// Update ARIA state when open attribute changes.\n\t\tif ( 'open' === name ) {\n\t\t\tthis.updateAriaState( 'yes' === newValue );\n\t\t}\n\t}\n\n\t/**\n\t * Check if ARIA management is enabled.\n\t *\n\t * @return {boolean} Whether ARIA management is enabled.\n\t */\n\tprivate isAriaEnabled(): boolean {\n\t\t// Get parent tabs component.\n\t\tconst tabs: TPTabsElement | null = this.closest( 'tp-tabs' );\n\n\t\t// Return whether aria management is enabled.\n\t\treturn tabs?.isAriaEnabled() ?? true;\n\t}\n\n\t/**\n\t * Set up ARIA attributes on this tab panel.\n\t */\n\tprivate setupAriaAttributes(): void {\n\t\t// Check if aria management is enabled.\n\t\tif ( ! this.isAriaEnabled() ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get the panel ID.\n\t\tconst panelId = this.getAttribute( 'id' );\n\n\t\t// Find the corresponding tab trigger by matching href.\n\t\tif ( panelId ) {\n\t\t\tconst tabs: TPTabsElement | null = this.closest( 'tp-tabs' );\n\t\t\tconst trigger = tabs?.querySelector( `a[href=\"#${ panelId }\"]` );\n\n\t\t\t// Set aria-labelledby if trigger has an ID.\n\t\t\tif ( trigger?.id && ! this.hasAttribute( 'aria-labelledby' ) ) {\n\t\t\t\tthis.setAttribute( 'aria-labelledby', trigger.id );\n\t\t\t}\n\t\t}\n\n\t\t// Set initial ARIA state.\n\t\tconst isOpen = 'yes' === this.getAttribute( 'open' );\n\t\tthis.updateAriaState( isOpen );\n\t}\n\n\t/**\n\t * Update ARIA state on this tab panel.\n\t *\n\t * @param {boolean} isOpen Whether this panel is open.\n\t */\n\tprivate updateAriaState( isOpen: boolean ): void {\n\t\t// Check if aria management is enabled.\n\t\tif ( ! this.isAriaEnabled() ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Update aria-hidden, inert, and tabindex based on open state.\n\t\tif ( isOpen ) {\n\t\t\tthis.removeAttribute( 'aria-hidden' );\n\t\t\tthis.removeAttribute( 'inert' );\n\t\t\tthis.setAttribute( 'tabindex', '0' );\n\t\t} else {\n\t\t\tthis.setAttribute( 'aria-hidden', 'true' );\n\t\t\tthis.setAttribute( 'inert', '' );\n\t\t\tthis.removeAttribute( 'tabindex' );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPTabsNavItemElement } from './tp-tabs-nav-item';\nimport { TPTabsTabElement } from './tp-tabs-tab';\n\n/**\n * TP Tabs.\n */\nexport class TPTabsElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Update the current tab based on the URL hash.\n\t\tthis.updateTabFromUrlHash();\n\n\t\t// Listen for hash changes in the URL and update the tab accordingly.\n\t\twindow.addEventListener( 'hashchange', this.updateTabFromUrlHash.bind( this ) );\n\t}\n\n\t/**\n\t * Get observed attributes.\n\t *\n\t * @return {Array} List of observed attributes.\n\t */\n\tstatic get observedAttributes(): string[] {\n\t\t// Attributes observed in the TPTabsElement web-component.\n\t\treturn [ 'current-tab', 'update-url', 'overflow', 'aria' ];\n\t}\n\n\t/**\n\t * Check if ARIA management is enabled.\n\t *\n\t * @return {boolean} Whether ARIA management is enabled.\n\t */\n\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 * Attribute changed callback.\n\t *\n\t * @param {string} name Attribute name.\n\t * @param {string} oldValue Old value.\n\t * @param {string} newValue New value.\n\t */\n\tattributeChangedCallback( name: string = '', oldValue: string = '', newValue: string = '' ): void {\n\t\t// If the attribute value hasn't changed, do nothing.\n\t\tif ( oldValue === newValue ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Update the component whenever an observed attribute changes.\n\t\tthis.update();\n\n\t\t// If the 'current-tab' attribute has changed, dispatch a 'change' event.\n\t\tif ( 'current-tab' === name ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'change', { bubbles: true } ) );\n\t\t}\n\t}\n\n\t/**\n\t * Update this component.\n\t */\n\tupdate(): void {\n\t\t// Wrap inside setTimeout to avoid high INP.\n\t\tsetTimeout( () => {\n\t\t\t// Get current tab.\n\t\t\tconst currentTab: string = this.getAttribute( 'current-tab' ) ?? '';\n\n\t\t\t// Check if current tab exists.\n\t\t\tif ( ! this.querySelector( `tp-tabs-tab[id=\"${ currentTab }\"]` ) ) {\n\t\t\t\t// Exit if no matching tab is found.\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Get current nested tab if has.\n\t\t\tconst currentNestedTab = this.getCurrentNestedTab( currentTab );\n\n\t\t\t// Update nav items.\n\t\t\tconst navItems: NodeListOf<TPTabsNavItemElement> = this.querySelectorAll( 'tp-tabs-nav-item' );\n\n\t\t\t// Update the navigation items based on the current tab.\n\t\t\tif ( navItems ) {\n\t\t\t\tnavItems.forEach( ( navItem: TPTabsNavItemElement ): void => {\n\t\t\t\t\t// If the nav item corresponds to the current tab or nested tab, set it as active.\n\t\t\t\t\tif ( navItem.isCurrentTab( currentTab ) || ( currentNestedTab && navItem.isCurrentTab( currentNestedTab ) ) ) {\n\t\t\t\t\t\tnavItem.setAttribute( 'active', 'yes' );\n\t\t\t\t\t} else {\n\t\t\t\t\t\tnavItem.removeAttribute( 'active' );\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t}\n\n\t\t\t// Update tabs.\n\t\t\tconst tabs: NodeListOf<TPTabsTabElement> = this.querySelectorAll( 'tp-tabs-tab' );\n\n\t\t\t// Update the tab panels based on the current tab.\n\t\t\tif ( tabs ) {\n\t\t\t\ttabs.forEach( ( tab: TPTabsTabElement ): void => {\n\t\t\t\t\t// If the tab corresponds to the current tab or nested tab, open it.\n\t\t\t\t\tif ( currentTab === tab.getAttribute( 'id' ) || ( currentNestedTab && currentNestedTab === tab.getAttribute( 'id' ) ) ) {\n\t\t\t\t\t\ttab.setAttribute( 'open', 'yes' );\n\t\t\t\t\t} else {\n\t\t\t\t\t\ttab.removeAttribute( 'open' );\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t}\n\t\t}, 0 );\n\t}\n\n\t/**\n\t * Update tab from URL hash.\n\t */\n\tupdateTabFromUrlHash(): void {\n\t\t// If 'update-url' attribute is not set to 'yes', do nothing.\n\t\tif ( 'yes' !== this.getAttribute( 'update-url' ) ) {\n\t\t\t// Exit if the 'update-url' attribute is not enabled.\n\t\t\treturn;\n\t\t}\n\n\t\t// Set current associated tab.\n\t\tthis.setCurrentTab();\n\t}\n\n\t/**\n\t * Set current tab.\n\t *\n\t * @param {string} tabId Tab ID.\n\t */\n\tsetCurrentTab( tabId: string = '' ): void {\n\t\t// If a tab ID is provided, set it as the current tab.\n\t\tif ( '' !== tabId ) {\n\t\t\tthis.setAttribute( 'current-tab', tabId );\n\t\t}\n\n\t\t// Set current tab based on current url hash.\n\t\tconst urlHash: string = window.location.hash;\n\n\t\t// Find the link that matches the URL hash.\n\t\tif ( '' !== urlHash ) {\n\t\t\tconst currentLink: HTMLAnchorElement | null = this.querySelector( `a[href=\"${ urlHash }\"]` );\n\t\t\tconst currentTab = currentLink?.closest( 'tp-tabs' );\n\t\t\tcurrentTab?.setAttribute( 'current-tab', urlHash.replace( '#', '' ) );\n\t\t}\n\t}\n\n\t/**\n\t * Get current nested tab.\n\t *\n\t * @param {string} currentTab Tab ID.\n\t *\n\t * @return {string} If has Nested current tab or empty.\n\t */\n\tgetCurrentNestedTab( currentTab: string = '' ): string {\n\t\t// If no current tab is provided, return an empty string.\n\t\tif ( '' === currentTab ) {\n\t\t\t// Exit if no current tab is provided.\n\t\t\treturn '';\n\t\t}\n\n\t\t// Find the element corresponding to the current tab ID.\n\t\tconst currentTabElement = this.querySelector( `tp-tabs-tab[id=\"${ currentTab }\"]` );\n\n\t\t// Find the nested tp-tabs element within the current tab.\n\t\tconst currentNestedTabElement = currentTabElement?.querySelector( 'tp-tabs' );\n\n\t\t// Get the ID of the current nested tab, if any.\n\t\tconst currentNestedTab = currentNestedTabElement?.getAttribute( 'current-tab' );\n\n\t\t// Return the nested tab ID, or an empty string if none exists.\n\t\treturn currentNestedTab ?? '';\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPTabsNavItemElement } from './tp-tabs-nav-item';\nimport { TPTabsNavElement } from './tp-tabs-nav';\nimport { TPTabsTabElement } from './tp-tabs-tab';\nimport { TPTabsElement } from './tp-tabs';\n\n/**\n * Register Components.\n */\n\n// Register parent first so children can find it during their constructor.\ncustomElements.define( 'tp-tabs', TPTabsElement );\ncustomElements.define( 'tp-tabs-nav', TPTabsNavElement );\ncustomElements.define( 'tp-tabs-nav-item', TPTabsNavItemElement );\ncustomElements.define( 'tp-tabs-tab', TPTabsTabElement );\n"],"names":["TPTabsNavItemElement","HTMLElement","constructor","super","trigger","this","getTrigger","addEventListener","handleTriggerClick","bind","setupAriaAttributes","querySelector","observedAttributes","attributeChangedCallback","name","oldValue","newValue","updateAriaState","isAriaEnabled","tabs","closest","id","Math","random","toString","substring","panelId","getPanelId","hasAttribute","setAttribute","isActive","getAttribute","HTMLAnchorElement","replace","e","preventDefault","targetPanel","document","getElementById","panelTabs","parentTab","update","isCurrentTab","currentTab","TPTabsNavElement","handleKeyDown","getTabTriggers","navItems","querySelectorAll","triggers","forEach","navItem","push","length","currentIndex","findIndex","ownerDocument","activeElement","newIndex","key","newTrigger","click","focus","TPTabsTabElement","isOpen","removeAttribute","TPTabsElement","updateTabFromUrlHash","window","dispatchEvent","CustomEvent","bubbles","setTimeout","currentNestedTab","getCurrentNestedTab","tab","setCurrentTab","tabId","urlHash","location","hash","currentLink","currentTabElement","currentNestedTabElement","customElements","define"],"sourceRoot":""}
|