wj-elements 0.7.6 → 0.8.0

package/dist/wje-tab-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-tab-group.js","sources":["../packages/wje-tab-group/tab-group.element.js","../packages/wje-tab-group/tab-group.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `TabGroup` is a custom web component that represents a group of tabs.\n * @summary This element represents a group of tabs.\n * @documentation https://elements.webjet.sk/components/tab-group\n * @status stable\n * @augments WJElement\n * @param {string} type The type of the tab group. Can be either 'panel' or 'route'.\n * @slot - The default slot for the tab group.\n * @slot nav - Slot for the navigation of the tab group.\n * @cssproperty [--wje-tab-group-padding=1rem] - Specifies the padding inside the tab group. This property defines the space between the content of the tab group and its outer boundary. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`, `%`).\n * @tag wje-tab-group\n */\n\nexport default class TabGroup extends WJElement {\n    static _instanceId = 0;\n\n    /**\n     * Creates an instance of TabGroup.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this._instanceId = ++TabGroup._instanceId;\n        this._lastNavWidth = null;\n        this._initialized = false;\n        this._moreWidth = 0;\n    }\n\n    /**\n     * Sets the value for the 'variant' attribute of the element.\n     * @param {string} value The value to set for the 'variant' attribute.\n     */\n    set variant(value) {\n        this.setAttribute('variant', value);\n        this.setAriaState({\n            orientation: (value === 'start' || value === 'end') ? 'vertical' : 'horizontal',\n        });\n    }\n\n    /**\n     * Gets the value of the 'variant' attribute.\n     * If the attribute is not set, it defaults to 'top'.\n     * @returns {string} The value of the 'variant' attribute or the default value 'top' if not set.\n     */\n    get variant() {\n        return this.getAttribute('variant') || 'top';\n    }\n\n    /**\n     * Sets the 'type' attribute of the element to the specified value.\n     * @param {string} value The value to set for the 'type' attribute.\n     */\n    set type(value) {\n        this.setAttribute('type', value);\n    }\n\n    /**\n     * Retrieves the `type` attribute of the element.\n     * If the `type` attribute is not set, it defaults to `'panel'`.\n     * @returns {string} The value of the `type` attribute or the default value `'panel'`.\n     */\n    get type() {\n        return this.getAttribute('type') || 'panel';\n    }\n\n    className = 'TabGroup';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n\n        this.setAriaState({\n            role: 'tablist',\n            orientation: (this.variant === 'start' || this.variant === 'end') ? 'vertical' : 'horizontal',\n        });\n    }\n\n    /**\n     * Sets up the event listeners before the component is drawn.\n     * This method is called before the component is drawn.\n     * It is used to set up event listeners.\n     */\n    beforeDraw() {\n        let activeTabName = location.hash.replace('#', '');\n\n        // skontrolujeme ci sa nachadza v paneloch\n        if (this.getPanelAllName().includes(activeTabName)) {\n            window.addEventListener('load', (e) => {\n                this.setActiveTab(activeTabName);\n            });\n        }\n    }\n\n    /**\n     * Creates and returns a document fragment containing a structured layout for a tab group.\n     * The tab group layout includes a `header` section with navigational elements,\n     * a `section` element for tab panels, and slots for customization such as additional navigation items,\n     * dropdowns, and more.\n     * The structure comprises:\n     * - A `div` container with relevant styling and part attributes.\n     * - A `header` for tabs, including a slot for navigation (`nav`) and additional tabs in a dropdown (`moreDropdown`).\n     * - A `section` for tab panels with a customizable `slot`.\n     * This function also initializes the `nav` and `moreDropdown` properties for external use.\n     * @returns {DocumentFragment} The completed document fragment containing the tab group layout.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-tab-group');\n\n        let header = document.createElement('header');\n        header.setAttribute('part', 'tabs');\n        header.classList.add('scroll-snap-x');\n\n        let nav = document.createElement('nav');\n        nav.setAttribute('part', 'nav');\n\n        let section = document.createElement('section');\n        section.setAttribute('part', 'panels');\n\n        let slot = document.createElement('slot');\n\n        let slotNav = document.createElement('slot');\n        slotNav.setAttribute('name', 'nav');\n\n        // More dropdown\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', 'dots');\n\n        let button = document.createElement('wje-button');\n        button.setAttribute('slot', 'trigger');\n        button.setAttribute('fill', 'link');\n\n        let menu = document.createElement('wje-menu');\n        menu.setAttribute('variant', 'context');\n\n        let slotMore = document.createElement('slot');\n        slotMore.setAttribute('name', 'more');\n\n        let moreDropdown = document.createElement('wje-dropdown');\n        moreDropdown.setAttribute('placement', 'bottom-end');\n        moreDropdown.setAttribute('collapsible', '');\n        moreDropdown.classList.add('more-tabs');\n\n        // APPEND\n        button.append(icon);\n\n        menu.append(slotMore);\n\n        moreDropdown.append(button);\n        moreDropdown.append(menu);\n\n        header.append(nav);\n\n        nav.append(slotNav);\n\n        if(this.variant === 'top' || this.variant === 'bottom') {\n            nav.append(moreDropdown);\n        }\n\n        section.append(slot);\n\n        native.append(header);\n        native.append(section);\n\n        fragment.append(native);\n\n        this.nav = nav;\n        this.moreDropdown = moreDropdown;\n\n        return fragment;\n    }\n\n    /**\n     * Executes necessary initializations and attaches event listeners after a drawing operation.\n     * Handles active tab selection, 'wje-tab:change' event binding, and window resize event for overflow checking.\n     * @returns {void} Does not return a value.\n     */\n    afterDraw() {\n        let activeTab = this.getActiveTab();\n        let activeTabName = activeTab ? activeTab[0][this.type] : this.getTabAll()[0][this.type];\n\n        this.setActiveTab(activeTabName);\n\n        this.addEventListener('wje-tab:change', (e) => {\n            if (e.detail.context.hasAttribute('disabled')) return;\n            this.setActiveTab(e.detail.context.panel);\n        });\n\n        if (this.variant === 'top' || this.variant === 'bottom') {\n            this.initTabMetrics();\n\n            this._resizeObserver = new ResizeObserver(entries => {\n                const width = entries[0].contentRect.width;\n\n                if (width !== this._lastNavWidth) {\n                    this._lastNavWidth = width;\n                    this.checkOverflow();\n                }\n            });\n\n            this._resizeObserver.observe(this);\n        }\n    }\n\n    /**\n     * Removes the 'active' class from all panel and tab elements.\n     * @returns {void} This method does not return a value.\n     */\n    removeActiveTab() {\n        this.getPanelAll().forEach((el) => {\n            el.classList.remove('active');\n        });\n\n        this.getTabAll().forEach((el) => {\n            el.classList.remove('active');\n        });\n    }\n\n    /**\n     * Sets the active tab and panel.\n     * @param {string} tab The name of the tab to set as active.\n     */\n    setActiveTab(tab) {\n        this.removeActiveTab();\n\n        const el = this.querySelector(`[${this.type}=\"${tab}\"]`)\n        el?.classList.add('active');\n\n        if(this.type === 'panel')\n            this.querySelector(`[name=\"${tab}\"]`)?.classList.add('active');\n\n        if(el)\n            this.dropdownActive(el);\n\n        this.syncAria();\n    }\n\n    /**\n     * Returns the currently active tab.\n     * @returns {Element|null} The active tab, or null if no tab is active.\n     */\n    getActiveTab() {\n        let activeTabs = Array.from(this.querySelectorAll('wje-tab.active'));\n        return activeTabs.length > 0 ? activeTabs : null;\n    }\n\n    /**\n     * Returns all tabs.\n     * @returns {Array<Element>} An array of all tabs.\n     */\n    getTabAll() {\n        return this.context.querySelector('[name=\"nav\"]').assignedElements();\n    }\n\n    /**\n     * Returns all tabs, including those moved to \"more\".\n     * @returns {Array<Element>} An array of all tabs.\n     */\n    getAllTabs() {\n        return Array.from(this.querySelectorAll('wje-tab'));\n    }\n\n    /**\n     * Returns all panels.\n     * @returns {Array<Element>} An array of all panels.\n     */\n    getPanelAll() {\n        return Array.from(this.querySelectorAll('wje-tab-panel'));\n    }\n\n    /**\n     * Returns the names of all tabs.\n     * @returns {Array<string>} An array of all tab names.\n     */\n    getPanelAllName() {\n        return this.getPanelAll().map((el) => el.getAttribute('name'));\n    }\n\n    /**\n     * Toggles the visibility of the \"more\" dropdown based on the presence of tabs in the \"more\" slot.\n     * @returns {void} Does not return a value.\n     */\n    toggleMoreVisibility() {\n        const hasTabsInMore = !!this.querySelector('wje-tab[slot=\"more\"]');\n        const nextHidden = !hasTabsInMore;\n\n        if (this.moreDropdown.hidden !== nextHidden) {\n            this.moreDropdown.hidden = nextHidden;\n        }\n    }\n\n    /**\n     * Initializes metrics for tabs within the component. Assigns each tab to the navigation slot\n     * and calculates their dimensions for further operations.\n     * @returns {void} Does not return any value.\n     */\n    initTabMetrics() {\n        requestAnimationFrame(() => {\n            this._tabMetrics = this.measureTabMetrics();\n            this.measureMoreWidth();\n            this._initialized = true;\n            this.checkOverflow(); // prvý výpočet\n            this._lastNavWidth = this.nav.getBoundingClientRect().width;\n        });\n    }\n\n    /**\n     * Measures current tab widths while all tabs are temporarily placed into the main nav slot.\n     * @returns {Array<{el: Element, width: number}>}\n     */\n    measureTabMetrics() {\n        const tabs = Array.from(this.querySelectorAll('wje-tab'));\n\n        tabs.forEach(tab => tab.setAttribute('slot', 'nav'));\n\n        return tabs.map(tab => ({\n            el: tab,\n            width: tab.getBoundingClientRect().width\n        }));\n    }\n\n    /**\n     * Stores the measured width of the more dropdown trigger when available.\n     * @returns {void}\n     */\n    measureMoreWidth() {\n        const wasHidden = this.moreDropdown.hidden;\n        const previousVisibility = this.moreDropdown.style.visibility;\n\n        if (wasHidden) {\n            this.moreDropdown.hidden = false;\n            this.moreDropdown.style.visibility = 'hidden';\n        }\n\n        const width = this.moreDropdown.getBoundingClientRect().width || 0;\n\n        if (wasHidden) {\n            this.moreDropdown.hidden = true;\n            this.moreDropdown.style.visibility = previousVisibility;\n        }\n\n        if (width > 0) {\n            this._moreWidth = width;\n        }\n    }\n\n    /**\n     * Checks if the tabs within a navigation bar overflow the available space.\n     * Moves overflowing tabs into a dropdown menu and updates their state accordingly.\n     * @returns {void} This method does not return a value.\n     */\n    checkOverflow() {\n        if (!this._initialized) return;\n\n        this._tabMetrics = this.measureTabMetrics();\n        this.measureMoreWidth();\n\n        const navWidth = this.nav.getBoundingClientRect().width;\n        const moreWidth = this._moreWidth || 48;\n        const totalWidth = this._tabMetrics.reduce((sum, { width }) => sum + width, 0);\n\n        if (totalWidth <= navWidth) {\n            this._tabMetrics.forEach(({ el }) => el.setAttribute('slot', 'nav'));\n            this.toggleMoreVisibility();\n            this.dropdownActive(this.getActiveTab()?.[0]);\n            return;\n        }\n\n        let used = 0;\n        let overflowStarted = false;\n        const availableWidth = Math.max(navWidth - moreWidth, 0);\n\n        for (const { el, width } of this._tabMetrics) {\n            used += width;\n\n            const shouldOverflow = used > availableWidth;\n\n            el.setAttribute('slot', shouldOverflow || overflowStarted ? 'more' : 'nav');\n            overflowStarted ||= shouldOverflow;\n        }\n\n        this.toggleMoreVisibility();\n        this.dropdownActive(this.getActiveTab()?.[0]);\n    }\n\n    /**\n     * Toggles the \"dropdown-active\" class on the element based on its \"active\" status\n     * and the value of its \"slot\" attribute.\n     * @param {HTMLElement} el The HTML element to evaluate and apply the toggle logic.\n     * @returns {void} This method does not return any value.\n     */\n    dropdownActive(el) {\n        if (!el) {\n            this.moreDropdown.classList.remove('dropdown-active');\n            return;\n        }\n\n        if(el.classList.contains('active')) {\n            if(el.getAttribute('slot') === 'more')\n                this.moreDropdown.classList.add('dropdown-active');\n            else\n                this.moreDropdown.classList.remove('dropdown-active');\n        }\n    }\n\n    /**\n     * Syncs ARIA attributes on tabs and panels.\n     */\n    syncAria() {\n        const tabs = this.getAllTabs();\n        const panels = this.getPanelAll();\n        const panelByName = new Map(panels.map((p) => [p.getAttribute('name'), p]));\n        const groupId = this.id || `wje-tab-group-${this._instanceId}`;\n\n        this.setAriaState({\n            orientation: (this.variant === 'start' || this.variant === 'end') ? 'vertical' : 'horizontal',\n        });\n\n        tabs.forEach((tab, index) => {\n            const tabName = tab.getAttribute(this.type) || tab.panel || tab.route || String(index);\n            const isActive = tab.classList.contains('active');\n            const isDisabled = tab.hasAttribute('disabled');\n\n            if (!tab.id) tab.id = `wje-tab-${tabName}`;\n\n            let controlsId = '';\n            if (this.type === 'panel') {\n                const panel = panelByName.get(tabName);\n                if (panel) {\n                    if (!panel.id) panel.id = `wje-tab-panel-${tabName}`;\n                    controlsId = panel.id;\n                    panel.setAriaState({\n                        role: 'tabpanel',\n                        labelledBy: tab.id,\n                    });\n                }\n            }\n\n            tab.setAriaState({\n                role: 'tab',\n                selected: isActive,\n                disabled: isDisabled,\n                controls: controlsId || '',\n            });\n\n            if (typeof tab.setRovingTabIndex === 'function') {\n                tab.setRovingTabIndex(isActive ? 0 : -1);\n            }\n        });\n    }\n\n    disconnectedCallback() {\n        super.disconnectedCallback?.();\n        this._resizeObserver?.disconnect();\n    }\n}\n","import TabGroup from './tab-group.element.js';\n\nexport default TabGroup;\n\nTabGroup.define('wje-tab-group', TabGroup);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-tab-group.js","sources":["../packages/wje-tab-group/tab-group.element.js","../packages/wje-tab-group/tab-group.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `TabGroup` is a custom web component that represents a group of tabs.\n * @summary This element represents a group of tabs.\n * @documentation https://elements.webjet.sk/components/tab-group\n * @status stable\n * @augments WJElement\n * @param {string} type The type of the tab group. Can be either 'panel' or 'route'.\n * @slot - The default slot for the tab group.\n * @slot nav - Slot for the navigation of the tab group.\n * @cssproperty [--wje-tab-group-padding=1rem] - Specifies the padding inside the tab group. This property defines the space between the content of the tab group and its outer boundary. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`, `%`).\n * @tag wje-tab-group\n */\n\nexport default class TabGroup extends WJElement {\n    static _instanceId = 0;\n\n    /**\n     * Creates an instance of TabGroup.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this._instanceId = ++TabGroup._instanceId;\n        this._lastNavWidth = null;\n        this._initialized = false;\n        this._moreWidth = 0;\n    }\n\n    /**\n     * Sets the value for the 'variant' attribute of the element.\n     * @param {string} value The value to set for the 'variant' attribute.\n     */\n    set variant(value) {\n        this.setAttribute('variant', value);\n        this.setAriaState({\n            orientation: (value === 'start' || value === 'end') ? 'vertical' : 'horizontal',\n        });\n    }\n\n    /**\n     * Gets the value of the 'variant' attribute.\n     * If the attribute is not set, it defaults to 'top'.\n     * @returns {string} The value of the 'variant' attribute or the default value 'top' if not set.\n     */\n    get variant() {\n        return this.getAttribute('variant') || 'top';\n    }\n\n    /**\n     * Sets the 'type' attribute of the element to the specified value.\n     * @param {string} value The value to set for the 'type' attribute.\n     */\n    set type(value) {\n        this.setAttribute('type', value);\n    }\n\n    /**\n     * Retrieves the `type` attribute of the element.\n     * If the `type` attribute is not set, it defaults to `'panel'`.\n     * @returns {string} The value of the `type` attribute or the default value `'panel'`.\n     */\n    get type() {\n        return this.getAttribute('type') || 'panel';\n    }\n\n    className = 'TabGroup';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n\n        this.setAriaState({\n            role: 'tablist',\n            orientation: (this.variant === 'start' || this.variant === 'end') ? 'vertical' : 'horizontal',\n        });\n    }\n\n    /**\n     * Sets up the event listeners before the component is drawn.\n     * This method is called before the component is drawn.\n     * It is used to set up event listeners.\n     */\n    beforeDraw() {\n        let activeTabName = location.hash.replace('#', '');\n\n        // skontrolujeme ci sa nachadza v paneloch\n        if (this.getPanelAllName().includes(activeTabName)) {\n            window.addEventListener('load', (e) => {\n                this.setActiveTab(activeTabName);\n            });\n        }\n    }\n\n    /**\n     * Creates and returns a document fragment containing a structured layout for a tab group.\n     * The tab group layout includes a `header` section with navigational elements,\n     * a `section` element for tab panels, and slots for customization such as additional navigation items,\n     * dropdowns, and more.\n     * The structure comprises:\n     * - A `div` container with relevant styling and part attributes.\n     * - A `header` for tabs, including a slot for navigation (`nav`) and additional tabs in a dropdown (`moreDropdown`).\n     * - A `section` for tab panels with a customizable `slot`.\n     * This function also initializes the `nav` and `moreDropdown` properties for external use.\n     * @returns {DocumentFragment} The completed document fragment containing the tab group layout.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-tab-group');\n\n        let header = document.createElement('header');\n        header.setAttribute('part', 'tabs');\n        header.classList.add('scroll-snap-x');\n\n        let nav = document.createElement('nav');\n        nav.setAttribute('part', 'nav');\n\n        let section = document.createElement('section');\n        section.setAttribute('part', 'panels');\n\n        let slot = document.createElement('slot');\n\n        let slotNav = document.createElement('slot');\n        slotNav.setAttribute('name', 'nav');\n\n        // More dropdown\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', 'dots');\n\n        let button = document.createElement('wje-button');\n        button.setAttribute('slot', 'trigger');\n        button.setAttribute('fill', 'link');\n\n        let menu = document.createElement('wje-menu');\n        menu.setAttribute('variant', 'context');\n\n        let slotMore = document.createElement('slot');\n        slotMore.setAttribute('name', 'more');\n\n        let moreDropdown = document.createElement('wje-dropdown');\n        moreDropdown.setAttribute('placement', 'bottom-end');\n        moreDropdown.setAttribute('collapsible', '');\n        moreDropdown.classList.add('more-tabs');\n\n        // APPEND\n        button.append(icon);\n\n        menu.append(slotMore);\n\n        moreDropdown.append(button);\n        moreDropdown.append(menu);\n\n        header.append(nav);\n\n        nav.append(slotNav);\n\n        if(this.variant === 'top' || this.variant === 'bottom') {\n            nav.append(moreDropdown);\n        }\n\n        section.append(slot);\n\n        native.append(header);\n        native.append(section);\n\n        fragment.append(native);\n\n        this.nav = nav;\n        this.moreDropdown = moreDropdown;\n\n        return fragment;\n    }\n\n    /**\n     * Executes necessary initializations and attaches event listeners after a drawing operation.\n     * Handles active tab selection, 'wje-tab:change' event binding, and window resize event for overflow checking.\n     * @returns {void} Does not return a value.\n     */\n    afterDraw() {\n        let activeTab = this.getActiveTab();\n        let activeTabName = activeTab ? activeTab[0][this.type] : this.getTabAll()[0][this.type];\n\n        this.setActiveTab(activeTabName);\n\n        this.addEventListener('wje-tab:change', (e) => {\n            if (e.detail.context.hasAttribute('disabled')) return;\n            this.setActiveTab(e.detail.context.panel);\n        });\n\n        if (this.variant === 'top' || this.variant === 'bottom') {\n            this.initTabMetrics();\n\n            this._resizeObserver = new ResizeObserver(entries => {\n                const width = entries[0].contentRect.width;\n\n                if (width !== this._lastNavWidth) {\n                    this._lastNavWidth = width;\n                    this.checkOverflow();\n                }\n            });\n\n            this._resizeObserver.observe(this);\n        }\n    }\n\n    /**\n     * Removes the 'active' class from all panel and tab elements.\n     * @returns {void} This method does not return a value.\n     */\n    removeActiveTab() {\n        this.getPanelAll().forEach((el) => {\n            el.classList.remove('active');\n        });\n\n        this.getTabAll().forEach((el) => {\n            el.classList.remove('active');\n        });\n    }\n\n    /**\n     * Sets the active tab and panel.\n     * @param {string} tab The name of the tab to set as active.\n     */\n    setActiveTab(tab) {\n        this.removeActiveTab();\n\n        const el = this.querySelector(`[${this.type}=\"${tab}\"]`)\n        el?.classList.add('active');\n\n        if(this.type === 'panel')\n            this.querySelector(`[name=\"${tab}\"]`)?.classList.add('active');\n\n        if(el)\n            this.dropdownActive(el);\n\n        this.syncAria();\n    }\n\n    /**\n     * Returns the currently active tab.\n     * @returns {Element|null} The active tab, or null if no tab is active.\n     */\n    getActiveTab() {\n        let activeTabs = Array.from(this.querySelectorAll('wje-tab.active'));\n        return activeTabs.length > 0 ? activeTabs : null;\n    }\n\n    /**\n     * Returns all tabs.\n     * @returns {Array<Element>} An array of all tabs.\n     */\n    getTabAll() {\n        return this.context.querySelector('[name=\"nav\"]').assignedElements();\n    }\n\n    /**\n     * Returns all tabs, including those moved to \"more\".\n     * @returns {Array<Element>} An array of all tabs.\n     */\n    getAllTabs() {\n        return Array.from(this.querySelectorAll('wje-tab'));\n    }\n\n    /**\n     * Returns all panels.\n     * @returns {Array<Element>} An array of all panels.\n     */\n    getPanelAll() {\n        return Array.from(this.querySelectorAll('wje-tab-panel'));\n    }\n\n    /**\n     * Returns the names of all tabs.\n     * @returns {Array<string>} An array of all tab names.\n     */\n    getPanelAllName() {\n        return this.getPanelAll().map((el) => el.getAttribute('name'));\n    }\n\n    /**\n     * Toggles the visibility of the \"more\" dropdown based on the presence of tabs in the \"more\" slot.\n     * @returns {void} Does not return a value.\n     */\n    toggleMoreVisibility() {\n        const hasTabsInMore = !!this.querySelector('wje-tab[slot=\"more\"]');\n        const nextHidden = !hasTabsInMore;\n\n        if (this.moreDropdown.hidden !== nextHidden) {\n            this.moreDropdown.hidden = nextHidden;\n        }\n    }\n\n    /**\n     * Initializes metrics for tabs within the component. Assigns each tab to the navigation slot\n     * and calculates their dimensions for further operations.\n     * @returns {void} Does not return any value.\n     */\n    initTabMetrics() {\n        requestAnimationFrame(() => {\n            this._tabMetrics = this.measureTabMetrics();\n            this.measureMoreWidth();\n            this._initialized = true;\n            this.checkOverflow(); // prvý výpočet\n            this._lastNavWidth = this.nav.getBoundingClientRect().width;\n        });\n    }\n\n    /**\n     * Measures current tab widths while all tabs are temporarily placed into the main nav slot.\n     * @returns {Array<{el: Element, width: number}>}\n     */\n    measureTabMetrics() {\n        const tabs = Array.from(this.querySelectorAll('wje-tab'));\n\n        tabs.forEach(tab => tab.setAttribute('slot', 'nav'));\n\n        return tabs.map(tab => ({\n            el: tab,\n            width: tab.getBoundingClientRect().width\n        }));\n    }\n\n    /**\n     * Stores the measured width of the more dropdown trigger when available.\n     * @returns {void}\n     */\n    measureMoreWidth() {\n        const wasHidden = this.moreDropdown.hidden;\n        const previousVisibility = this.moreDropdown.style.visibility;\n\n        if (wasHidden) {\n            this.moreDropdown.hidden = false;\n            this.moreDropdown.style.visibility = 'hidden';\n        }\n\n        const width = this.moreDropdown.getBoundingClientRect().width || 0;\n\n        if (wasHidden) {\n            this.moreDropdown.hidden = true;\n            this.moreDropdown.style.visibility = previousVisibility;\n        }\n\n        if (width > 0) {\n            this._moreWidth = width;\n        }\n    }\n\n    /**\n     * Checks if the tabs within a navigation bar overflow the available space.\n     * Moves overflowing tabs into a dropdown menu and updates their state accordingly.\n     * @returns {void} This method does not return a value.\n     */\n    checkOverflow() {\n        if (!this._initialized) return;\n\n        this._tabMetrics = this.measureTabMetrics();\n        this.measureMoreWidth();\n\n        const navWidth = this.nav.getBoundingClientRect().width;\n        const moreWidth = this._moreWidth || 48;\n        const totalWidth = this._tabMetrics.reduce((sum, { width }) => sum + width, 0);\n\n        if (totalWidth <= navWidth) {\n            this._tabMetrics.forEach(({ el }) => el.setAttribute('slot', 'nav'));\n            this.toggleMoreVisibility();\n            this.dropdownActive(this.getActiveTab()?.[0]);\n            return;\n        }\n\n        let used = 0;\n        let overflowStarted = false;\n        const availableWidth = Math.max(navWidth - moreWidth, 0);\n\n        for (const { el, width } of this._tabMetrics) {\n            used += width;\n\n            const shouldOverflow = used > availableWidth;\n\n            el.setAttribute('slot', shouldOverflow || overflowStarted ? 'more' : 'nav');\n            overflowStarted ||= shouldOverflow;\n        }\n\n        this.toggleMoreVisibility();\n        this.dropdownActive(this.getActiveTab()?.[0]);\n    }\n\n    /**\n     * Toggles the \"dropdown-active\" class on the element based on its \"active\" status\n     * and the value of its \"slot\" attribute.\n     * @param {HTMLElement} el The HTML element to evaluate and apply the toggle logic.\n     * @returns {void} This method does not return any value.\n     */\n    dropdownActive(el) {\n        if (!el) {\n            this.moreDropdown.classList.remove('dropdown-active');\n            return;\n        }\n\n        if(el.classList.contains('active')) {\n            if(el.getAttribute('slot') === 'more')\n                this.moreDropdown.classList.add('dropdown-active');\n            else\n                this.moreDropdown.classList.remove('dropdown-active');\n        }\n    }\n\n    /**\n     * Syncs ARIA attributes on tabs and panels.\n     */\n    syncAria() {\n        const tabs = this.getAllTabs();\n        const panels = this.getPanelAll();\n        const panelByName = new Map(panels.map((p) => [p.getAttribute('name'), p]));\n        const groupId = this.id || `wje-tab-group-${this._instanceId}`;\n\n        this.setAriaState({\n            orientation: (this.variant === 'start' || this.variant === 'end') ? 'vertical' : 'horizontal',\n        });\n\n        tabs.forEach((tab, index) => {\n            const tabName = tab.getAttribute(this.type) || tab.panel || tab.route || String(index);\n            const isActive = tab.classList.contains('active');\n            const isDisabled = tab.hasAttribute('disabled');\n\n            if (!tab.id) tab.id = `wje-tab-${tabName}`;\n\n            let controlsId = '';\n            if (this.type === 'panel') {\n                const panel = panelByName.get(tabName);\n                if (panel) {\n                    if (!panel.id) panel.id = `wje-tab-panel-${tabName}`;\n                    controlsId = panel.id;\n                    panel.setAriaState({\n                        role: 'tabpanel',\n                        labelledBy: tab.id,\n                    });\n                }\n            }\n\n            tab.setAriaState({\n                role: 'tab',\n                selected: isActive,\n                disabled: isDisabled,\n                controls: controlsId || '',\n            });\n\n            if (typeof tab.setRovingTabIndex === 'function') {\n                tab.setRovingTabIndex(isActive ? 0 : -1);\n            }\n        });\n    }\n\n    disconnectedCallback() {\n        super.disconnectedCallback?.();\n        this._resizeObserver?.disconnect();\n    }\n}\n","import TabGroup from './tab-group.element.js';\n\nexport default TabGroup;\n\nTabGroup.define('wje-tab-group', TabGroup);\n"],"names":["TabGroup","WJElement","super","className","this","_instanceId","_lastNavWidth","_initialized","_moreWidth","value","setAttribute","setAriaState","orientation","getAttribute","type","setupAttributes","isShadowRoot","role","variant","beforeDraw","activeTabName","location","hash","replace","getPanelAllName","includes","window","addEventListener","e","setActiveTab","draw","fragment","document","createDocumentFragment","native","createElement","classList","add","header","nav","section","slot","slotNav","icon","button","menu","slotMore","moreDropdown","append","activeTab","getActiveTab","getTabAll","detail","context","hasAttribute","panel","initTabMetrics","_resizeObserver","ResizeObserver","entries","width","contentRect","checkOverflow","observe","getPanelAll","forEach","el","remove","tab","removeActiveTab","querySelector","dropdownActive","syncAria","activeTabs","Array","from","querySelectorAll","length","assignedElements","getAllTabs","map","toggleMoreVisibility","nextHidden","hidden","requestAnimationFrame","_tabMetrics","measureTabMetrics","measureMoreWidth","getBoundingClientRect","tabs","wasHidden","previousVisibility","style","visibility","navWidth","moreWidth","reduce","sum","used","overflowStarted","availableWidth","Math","max","shouldOverflow","contains","panels","panelByName","Map","p","id","index","tabName","route","String","isActive","isDisabled","controlsId","get","labelledBy","selected","disabled","controls","setRovingTabIndex","disconnectedCallback","disconnect","static","define"],"mappings":"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"}

package/dist/wje-tab-panel.js

@@ -1,46 +1,25 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Tab Panel ]\n*/\n\n:host {\n    display: none;\n    flex-wrap: wrap;\n    align-items: center;\n    padding: 1rem;\n}\n\n:host(.active) {\n    display: block;\n}\n";
-class TabPanel extends WJElement {
-  /**
-   * Creates an instance of TabPanel.
-   */
+import e from "./wje-element.js";
+class t extends e {
   constructor() {
     super();
-    /**
-     * The class name for the component.
-     */
     __publicField(this, "className", "TabPanel");
   }
-  /**
-   * Returns the CSS styles for the component.
-   * @static
-   * @returns {CSSStyleSheet}
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ":host{display:none;flex-wrap:wrap;align-items:center;padding:1rem}:host(.active){display:block}";
   }
-  /**
-   * Sets up the attributes for the component.
-   */
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  /**
-   * Draws the component for the tab panel.
-   * @returns {DocumentFragment}
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("slot");
-    fragment.appendChild(element);
-    return fragment;
+    let e2 = document.createDocumentFragment(), t2 = document.createElement("slot");
+    return e2.appendChild(t2), e2;
   }
 }
-TabPanel.define("wje-tab-panel", TabPanel);
+t.define("wje-tab-panel", t);
 export {
-  TabPanel as default
+  t as default
 };
 //# sourceMappingURL=wje-tab-panel.js.map

package/dist/wje-tab-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-tab-panel.js","sources":["../packages/wje-tab-panel/tab-panel.element.js","../packages/wje-tab-panel/tab-panel.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `TabPanel` is a custom web component that represents a tab panel.\n * @summary This element represents a tab panel.\n * @documentation https://elements.webjet.sk/components/tab-panel\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the tab panel.\n * @tag wje-tab-panel\n */\nexport default class TabPanel extends WJElement {\n    /**\n     * Creates an instance of TabPanel.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component.\n     */\n    className = 'TabPanel';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the tab panel.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n}\n","import TabPanel from './tab-panel.element.js';\n\nexport default TabPanel;\n\nTabPanel.define('wje-tab-panel', TabPanel);\n"],"names":[],"mappings":";;;;;AAYe,MAAM,iBAAiB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI5C,cAAc;AACV,UAAK;AAMT;AAAA;AAAA;AAAA,qCAAY;AAAA,EALZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACX;AACJ;AClDA,SAAS,OAAO,iBAAiB,QAAQ;"}
+{"version":3,"file":"wje-tab-panel.js","sources":["../packages/wje-tab-panel/tab-panel.element.js","../packages/wje-tab-panel/tab-panel.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `TabPanel` is a custom web component that represents a tab panel.\n * @summary This element represents a tab panel.\n * @documentation https://elements.webjet.sk/components/tab-panel\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the tab panel.\n * @tag wje-tab-panel\n */\nexport default class TabPanel extends WJElement {\n    /**\n     * Creates an instance of TabPanel.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component.\n     */\n    className = 'TabPanel';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the tab panel.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n}\n","import TabPanel from './tab-panel.element.js';\n\nexport default TabPanel;\n\nTabPanel.define('wje-tab-panel', TabPanel);\n"],"names":["TabPanel","WJElement","constructor","super","className","setupAttributes","this","isShadowRoot","fragment","document","createDocumentFragment","element","createElement","appendChild","define"],"mappings":";;;;AAYe,MAAMA,UAAiBC;EAIlC,cAAAC;AACIC;AAMJC,qCAAY;AAAA,EALZ;AAAA,EAYA,WAAA;AACI;EACJ;AAAA,EAKA,kBAAAC;AACIC,SAAKC,eAAe;AAAA,EACxB;AAAA,EAMA;AACI,QAAIC,KAAWC,SAASC,uBAAAA,GAEpBC,KAAUF,SAASG,cAAc,MAAA;AAIrC,WAFAJ,GAASK,YAAYF,EAAAA,GAEdH;AAAAA,EACX;;ACjDJR,EAASc,OAAO,iBAAiBd,CAAAA;"}

package/dist/wje-tab.js

@@ -1,236 +1,59 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement from "./wje-element.js";
-import { b as bindRouterLinks } from "./router-links-wjqCnncc.js";
-import { event } from "./event.js";
-const styles = `/*
-[ WJ Tab ]
-*/
-
-:host(:not([slot="more"])) {
-    display: block;
-    position: relative;
-    .native-tab {
-        display: flex;
-        align-items: center;
-        white-space: nowrap;
-        font-family: var(--wje-tab-font-family);
-        font-size: var(--wje-tab-font-size);
-        letter-spacing: var(--wje-tab-letter-spacing);
-        text-transform: var(--wje-tab-text-transfrom);
-        font-weight: var(--wje-tab-font-weight);
-        text-decoration: none;
-        padding-inline: var(--wje-tab-padding-inline);
-        padding-top: var(--wje-tab-padding-top);
-        padding-bottom: var(--wje-tab-padding-bottom);
-        border-radius: var(--wje-tab-border-radius);
-        color: var(--wje-color);
-        line-height: var(--wje-tab-line-height);
-        & > svg {
-            inline-size: 1.5em;
-            pointer-events: none;
-        }
-
-        &:hover {
-            background: var(--wje-tab-color-hover);
-            &:after {
-                display: block;
-            }
-        }
-
-        &:after {
-            content: ' ';
-            display: none;
-            block-size: 0.15rem;
-            writing-mode: var(--wje-tab-writing-mode);
-            background: var(--wje-tab-color-active);
-            position: absolute;
-            bottom: var(--wje-tab-bottom);
-            left: var(--wje-tab-start);
-            right: var(--wje-tab-end);
-            top: var(--wje-tab-top);
-        }
-    }
-}
-
-:host([slot="more"]) {
-    --wje-menu-item-safe-triangle-cursor-x: 0;
-    --wje-menu-item-safe-triangle-cursor-y: 0;
-    --wje-menu-item-safe-triangle-submenu-start-x: 0;
-    --wje-menu-item-safe-triangle-submenu-start-y: 0;
-    --wje-menu-item-safe-triangle-submenu-end-x: 0;
-    --wje-menu-item-safe-triangle-submenu-end-y: 0;
-
-    display: block;
-    .native-tab {
-        background: var(--wje-menu-item-background);
-        position: relative;
-        display: block;
-        flex-wrap: nowrap;
-        align-items: center;
-        justify-content: center;
-        color: var(--wje-menu-item-color);
-        padding-top: var(--wje-menu-item-padding-top);
-        padding-bottom: var(--wje-menu-item-padding-bottom);
-        padding-inline: var(--wje-spacing-large);
-        transition: var(--wje-transition-fast) fill;
-        user-select: none;
-        white-space: nowrap;
-        cursor: pointer;
-        text-decoration: none;
-
-        &:hover {
-            color: var(--wje-menu-item-color-hover);
-            background: var(--wje-menu-item-background-hover);
-        }
-
-        &:focus {
-            color: var(--wje-menu-item-color-focus);
-            background: var(--wje-menu-item-background-focus);
-        }
-
-        &:active {
-            color: var(--wje-menu-item-color-active);
-            background: var(--wje-menu-item-background-active);
-        }
-    }
-}
-
-:host([disabled]) a {
-    opacity: 0.5;
-    cursor: not-allowed;
-    background: inherit;
-    &:after {
-        display: none;
-    }
-}
-
-:host(:not([slot="more"]).active) a:after {
-    display: block;
-}
-`;
-class Tab extends WJElement {
-  /**
-   * Creates an instance of Tab.
-   */
+import t from "./wje-element.js";
+import { b as e } from "./router-links-CNsJ-elb.js";
+import { event as a } from "./event.js";
+class o extends t {
   constructor() {
     super();
-    /**
-     * The class name for the component.
-     */
     __publicField(this, "className", "Tab");
-    this.last = false;
-    this._hasPanel = false;
+    this.last = false, this._hasPanel = false;
   }
-  /**
-   * Sets the panel attribute to the specified value.
-   * @param {string} value The value to set for the panel attribute.
-   */
-  set panel(value) {
-    this.setAttribute("panel", value);
+  set panel(t2) {
+    this.setAttribute("panel", t2);
   }
-  /**
-   * Retrieves the value of the 'panel' attribute of the element.
-   * @returns {string|null} Returns the 'panel' attribute value if it exists; otherwise, returns null.
-   */
   get panel() {
     return this.getAttribute("panel") || null;
   }
-  /**
-   * Sets the value of the 'route' attribute for the current object.
-   * @param {string} value The new value to set for the 'route' attribute.
-   */
-  set route(value) {
-    this.setAttribute("route", value);
+  set route(t2) {
+    this.setAttribute("route", t2);
   }
-  /**
-   * Retrieves the value of the 'route' attribute.
-   * If the 'route' attribute is not set, it returns null.
-   * @returns {string|null} The value of the 'route' attribute or null if not set.
-   */
   get route() {
     return this.getAttribute("route") || null;
   }
-  /**
-   * Returns the CSS styles for the component.
-   * @static
-   * @returns {CSSStyleSheet}
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ':host(:not([slot="more"])){display:block;position:relative}:host(:not([slot="more"])) .native-tab{display:flex;align-items:center;white-space:nowrap;font-family:var(--wje-tab-font-family);font-size:var(--wje-tab-font-size);letter-spacing:var(--wje-tab-letter-spacing);text-transform:var(--wje-tab-text-transfrom);font-weight:var(--wje-tab-font-weight);text-decoration:none;padding-inline:var(--wje-tab-padding-inline);padding-top:var(--wje-tab-padding-top);padding-bottom:var(--wje-tab-padding-bottom);border-radius:var(--wje-tab-border-radius);color:var(--wje-color);line-height:var(--wje-tab-line-height)}:host(:not([slot="more"])) .native-tab>svg{inline-size:1.5em;pointer-events:none}:host(:not([slot="more"])) .native-tab:hover{background:var(--wje-tab-color-hover)}:host(:not([slot="more"])) .native-tab:hover:after{display:block}:host(:not([slot="more"])) .native-tab:after{content:" ";display:none;block-size:.15rem;writing-mode:var(--wje-tab-writing-mode);background:var(--wje-tab-color-active);position:absolute;bottom:var(--wje-tab-bottom);left:var(--wje-tab-start);right:var(--wje-tab-end);top:var(--wje-tab-top)}:host([slot="more"]){--wje-menu-item-safe-triangle-cursor-x: 0;--wje-menu-item-safe-triangle-cursor-y: 0;--wje-menu-item-safe-triangle-submenu-start-x: 0;--wje-menu-item-safe-triangle-submenu-start-y: 0;--wje-menu-item-safe-triangle-submenu-end-x: 0;--wje-menu-item-safe-triangle-submenu-end-y: 0;display:block}:host([slot="more"]) .native-tab{background:var(--wje-menu-item-background);position:relative;display:block;flex-wrap:nowrap;align-items:center;justify-content:center;color:var(--wje-menu-item-color);padding-top:var(--wje-menu-item-padding-top);padding-bottom:var(--wje-menu-item-padding-bottom);padding-inline:var(--wje-spacing-large);transition:var(--wje-transition-fast) fill;-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;text-decoration:none}:host([slot="more"]) .native-tab:hover{color:var(--wje-menu-item-color-hover);background:var(--wje-menu-item-background-hover)}:host([slot="more"]) .native-tab:focus{color:var(--wje-menu-item-color-focus);background:var(--wje-menu-item-background-focus)}:host([slot="more"]) .native-tab:active{color:var(--wje-menu-item-color-active);background:var(--wje-menu-item-background-active)}:host([disabled]) a{opacity:.5;cursor:not-allowed;background:inherit}:host([disabled]) a:after{display:none}:host(:not([slot="more"]).active) a:after{display:block}';
   }
-  /**
-   * Sets up the attributes for the component.
-   */
   setupAttributes() {
-    this.isShadowRoot = "open";
-    this.setAttribute("active-class", "active");
-    this.setAriaState({
-      role: "tab",
-      selected: false,
-      disabled: this.hasAttribute("disabled")
-    });
+    this.isShadowRoot = "open", this.setAttribute("active-class", "active"), this.setAriaState({ role: "tab", selected: false, disabled: this.hasAttribute("disabled") });
   }
-  /**
-   * Draws the component for the tab.
-   * @returns {DocumentFragment}
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let slot = document.createElement("slot");
-    let href = this.panel || this.route || "#";
-    let a = document.createElement("a");
-    a.setAttribute("href", (this.panel ? "#" : "") + href);
-    a.setAttribute("part", "native");
-    a.classList.add("native-tab");
-    a.appendChild(slot);
-    fragment.appendChild(a);
-    this.slotEl = slot;
-    return fragment;
+    let t2 = document.createDocumentFragment(), e2 = document.createElement("slot"), a2 = this.panel || this.route || "#", o2 = document.createElement("a");
+    return o2.setAttribute("href", (this.panel ? "#" : "") + a2), o2.setAttribute("part", "native"), o2.classList.add("native-tab"), o2.appendChild(e2), t2.appendChild(o2), this.slotEl = e2, t2;
   }
-  /**
-   * Sets up event listeners after the component is rendered.
-   * // @fires wje-tab:change - Dispatched when the component is clicked, indicating a tab change.
-   */
   afterDraw() {
     var _a;
-    this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });
-    event.addListener(this, "click", "wje-tab:change");
-    this.syncAriaLabel();
-    (_a = this.slotEl) == null ? void 0 : _a.addEventListener("slotchange", () => this.syncAriaLabel());
+    this.unbindRouterLinks = e(this.parentElement, { selector: false }), a.addListener(this, "click", "wje-tab:change"), this.syncAriaLabel(), (_a = this.slotEl) == null ? void 0 : _a.addEventListener("slotchange", () => this.syncAriaLabel());
   }
-  /**
-   * Sync aria-label on host based on slotted text when not provided.
-   */
   syncAriaLabel() {
     var _a;
     if (this.hasAttribute("aria-label") || this.hasAttribute("aria-labelledby")) return;
-    const text = (((_a = this.slotEl) == null ? void 0 : _a.assignedNodes({ flatten: true })) || []).map((node) => node.textContent || "").join("").trim();
-    if (text) {
-      this.setAttribute("aria-label", text);
-    }
+    const t2 = (((_a = this.slotEl) == null ? void 0 : _a.assignedNodes({ flatten: true })) || []).map((t3) => t3.textContent || "").join("").trim();
+    t2 && this.setAttribute("aria-label", t2);
   }
-  /**
-   * Sets the roving tabindex on the internal focusable anchor.
-   * @param {number} value
-   */
-  setRovingTabIndex(value) {
+  setRovingTabIndex(t2) {
     var _a;
-    const anchor = (_a = this.context) == null ? void 0 : _a.querySelector("a");
-    if (!anchor) return;
-    anchor.setAttribute("tabindex", String(value));
+    const e2 = (_a = this.context) == null ? void 0 : _a.querySelector("a");
+    e2 && e2.setAttribute("tabindex", String(t2));
   }
-  /**
-   * Cleans up before the component is disconnected.
-   */
   beforeDisconnect() {
     var _a;
     (_a = this.unbindRouterLinks) == null ? void 0 : _a.call(this);
   }
 }
-Tab.define("wje-tab", Tab);
+o.define("wje-tab", o);
 export {
-  Tab as default
+  o as default
 };
 //# sourceMappingURL=wje-tab.js.map

package/dist/wje-tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-tab.js","sources":["../packages/wje-tab/tab.element.js","../packages/wje-tab/tab.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Tab` is a custom web component that represents a tab.\n * @summary This element represents a tab.\n * @documentation https://elements.webjet.sk/components/tab\n * @status stable\n * @augments {WJElement}\n * @param {string} panel The name of the tab panel. This is used to identify the corresponding tab panel.\n * @param {string} route The route to navigate to when the tab is clicked.\n * @cssproperty [--wje-tab-text-transform=uppercase] - The text transformation for the tab (e.g., uppercase, lowercase).\n * @cssproperty [--wje-tab-font-weight=500] - The font weight of the tab text.\n * @cssproperty [--wje-tab-letter-spacing=0.06em] - The letter spacing of the tab text.\n * @cssproperty [--wje-tab-padding-inline=1rem] - The horizontal padding of the tab.\n * @cssproperty [--wje-tab-padding-top=.75rem] - The top padding of the tab text.\n * @cssproperty [--wje-tab-padding-bottom=.75rem] - The bottom padding of the tab text.\n * @cssproperty [--wje-tab-color-active=var(--wje-color-primary-11)] - The text color of the active tab.\n * @cssproperty [--wje-tab-color-hover=var(--wje-color-primary-1)] - The text color of the tab when hovered.\n * //@fires wje-tab:change - Dispatched when the tab is changed.\n * @tag wje-tab\n */\nexport default class Tab extends WJElement {\n    /**\n     * Creates an instance of Tab.\n     */\n    constructor() {\n        super();\n\n        /**\n         * Indicates whether this is the last tab.\n         * @type {boolean}\n         */\n        this.last = false;\n        this._hasPanel = false;\n    }\n\n    /**\n     * Sets the panel attribute to the specified value.\n     * @param {string} value The value to set for the panel attribute.\n     */\n    set panel(value) {\n        this.setAttribute('panel', value);\n    }\n\n    /**\n     * Retrieves the value of the 'panel' attribute of the element.\n     * @returns {string|null} Returns the 'panel' attribute value if it exists; otherwise, returns null.\n     */\n    get panel() {\n        return this.getAttribute('panel') || null;\n    }\n\n    /**\n     * Sets the value of the 'route' attribute for the current object.\n     * @param {string} value The new value to set for the 'route' attribute.\n     */\n    set route(value) {\n        this.setAttribute('route', value);\n    }\n\n    /**\n     * Retrieves the value of the 'route' attribute.\n     * If the 'route' attribute is not set, it returns null.\n     * @returns {string|null} The value of the 'route' attribute or null if not set.\n     */\n    get route() {\n        return this.getAttribute('route') || null;\n    }\n\n    /**\n     * The class name for the component.\n     */\n    className = 'Tab';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAttribute('active-class', 'active');\n\n        this.setAriaState({\n            role: 'tab',\n            selected: false,\n            disabled: this.hasAttribute('disabled'),\n        });\n    }\n\n    /**\n     * Draws the component for the tab.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let slot = document.createElement('slot');\n\n        let href = this.panel || this.route || \"#\";\n\n        let a = document.createElement('a');\n        a.setAttribute('href', (this.panel ? \"#\" : \"\") + href);\n        a.setAttribute('part', 'native');\n        a.classList.add('native-tab');\n        a.appendChild(slot);\n\n        fragment.appendChild(a);\n\n        this.slotEl = slot;\n\n        return fragment;\n    }\n\n    /**\n     * Sets up event listeners after the component is rendered.\n     * // @fires wje-tab:change - Dispatched when the component is clicked, indicating a tab change.\n     */\n    afterDraw() {\n        this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });\n        event.addListener(this, 'click', 'wje-tab:change');\n        this.syncAriaLabel();\n        this.slotEl?.addEventListener('slotchange', () => this.syncAriaLabel());\n    }\n\n    /**\n     * Sync aria-label on host based on slotted text when not provided.\n     */\n    syncAriaLabel() {\n        if (this.hasAttribute('aria-label') || this.hasAttribute('aria-labelledby')) return;\n        const text = (this.slotEl?.assignedNodes({ flatten: true }) || [])\n            .map((node) => node.textContent || '')\n            .join('')\n            .trim();\n        if (text) {\n            this.setAttribute('aria-label', text);\n        }\n    }\n\n    /**\n     * Sets the roving tabindex on the internal focusable anchor.\n     * @param {number} value\n     */\n    setRovingTabIndex(value) {\n        const anchor = this.context?.querySelector('a');\n        if (!anchor) return;\n        anchor.setAttribute('tabindex', String(value));\n    }\n\n    /**\n     * Cleans up before the component is disconnected.\n     */\n    beforeDisconnect() {\n        this.unbindRouterLinks?.();\n    }\n}\n","import Tab from './tab.element.js';\n\nexport default Tab;\n\nTab.define('wje-tab', Tab);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBe,MAAM,YAAY,UAAU;AAAA;AAAA;AAAA;AAAA,EAIvC,cAAc;AACV,UAAK;AA8CT;AAAA;AAAA;AAAA,qCAAY;AAxCR,SAAK,OAAO;AACZ,SAAK,YAAY;AAAA,EACrB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO,KAAK;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO,KAAK;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,aAAa,gBAAgB,QAAQ;AAE1C,SAAK,aAAa;AAAA,MACd,MAAM;AAAA,MACN,UAAU;AAAA,MACV,UAAU,KAAK,aAAa,UAAU;AAAA,IAClD,CAAS;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,OAAO,KAAK,SAAS,KAAK,SAAS;AAEvC,QAAI,IAAI,SAAS,cAAc,GAAG;AAClC,MAAE,aAAa,SAAS,KAAK,QAAQ,MAAM,MAAM,IAAI;AACrD,MAAE,aAAa,QAAQ,QAAQ;AAC/B,MAAE,UAAU,IAAI,YAAY;AAC5B,MAAE,YAAY,IAAI;AAElB,aAAS,YAAY,CAAC;AAEtB,SAAK,SAAS;AAEd,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,YAAY;;AACR,SAAK,oBAAoB,gBAAgB,KAAK,eAAe,EAAE,UAAU,OAAO;AAChF,UAAM,YAAY,MAAM,SAAS,gBAAgB;AACjD,SAAK,cAAa;AAClB,eAAK,WAAL,mBAAa,iBAAiB,cAAc,MAAM,KAAK;EAC3D;AAAA;AAAA;AAAA;AAAA,EAKA,gBAAgB;;AACZ,QAAI,KAAK,aAAa,YAAY,KAAK,KAAK,aAAa,iBAAiB,EAAG;AAC7E,UAAM,UAAQ,UAAK,WAAL,mBAAa,cAAc,EAAE,SAAS,KAAI,OAAO,CAAA,GAC1D,IAAI,CAAC,SAAS,KAAK,eAAe,EAAE,EACpC,KAAK,EAAE,EACP,KAAI;AACT,QAAI,MAAM;AACN,WAAK,aAAa,cAAc,IAAI;AAAA,IACxC;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,kBAAkB,OAAO;;AACrB,UAAM,UAAS,UAAK,YAAL,mBAAc,cAAc;AAC3C,QAAI,CAAC,OAAQ;AACb,WAAO,aAAa,YAAY,OAAO,KAAK,CAAC;AAAA,EACjD;AAAA;AAAA;AAAA;AAAA,EAKA,mBAAmB;;AACf,eAAK,sBAAL;AAAA,EACJ;AACJ;AChKA,IAAI,OAAO,WAAW,GAAG;"}
+{"version":3,"file":"wje-tab.js","sources":["../packages/wje-tab/tab.element.js","../packages/wje-tab/tab.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Tab` is a custom web component that represents a tab.\n * @summary This element represents a tab.\n * @documentation https://elements.webjet.sk/components/tab\n * @status stable\n * @augments {WJElement}\n * @param {string} panel The name of the tab panel. This is used to identify the corresponding tab panel.\n * @param {string} route The route to navigate to when the tab is clicked.\n * @cssproperty [--wje-tab-text-transform=uppercase] - The text transformation for the tab (e.g., uppercase, lowercase).\n * @cssproperty [--wje-tab-font-weight=500] - The font weight of the tab text.\n * @cssproperty [--wje-tab-letter-spacing=0.06em] - The letter spacing of the tab text.\n * @cssproperty [--wje-tab-padding-inline=1rem] - The horizontal padding of the tab.\n * @cssproperty [--wje-tab-padding-top=.75rem] - The top padding of the tab text.\n * @cssproperty [--wje-tab-padding-bottom=.75rem] - The bottom padding of the tab text.\n * @cssproperty [--wje-tab-color-active=var(--wje-color-primary-11)] - The text color of the active tab.\n * @cssproperty [--wje-tab-color-hover=var(--wje-color-primary-1)] - The text color of the tab when hovered.\n * //@fires wje-tab:change - Dispatched when the tab is changed.\n * @tag wje-tab\n */\nexport default class Tab extends WJElement {\n    /**\n     * Creates an instance of Tab.\n     */\n    constructor() {\n        super();\n\n        /**\n         * Indicates whether this is the last tab.\n         * @type {boolean}\n         */\n        this.last = false;\n        this._hasPanel = false;\n    }\n\n    /**\n     * Sets the panel attribute to the specified value.\n     * @param {string} value The value to set for the panel attribute.\n     */\n    set panel(value) {\n        this.setAttribute('panel', value);\n    }\n\n    /**\n     * Retrieves the value of the 'panel' attribute of the element.\n     * @returns {string|null} Returns the 'panel' attribute value if it exists; otherwise, returns null.\n     */\n    get panel() {\n        return this.getAttribute('panel') || null;\n    }\n\n    /**\n     * Sets the value of the 'route' attribute for the current object.\n     * @param {string} value The new value to set for the 'route' attribute.\n     */\n    set route(value) {\n        this.setAttribute('route', value);\n    }\n\n    /**\n     * Retrieves the value of the 'route' attribute.\n     * If the 'route' attribute is not set, it returns null.\n     * @returns {string|null} The value of the 'route' attribute or null if not set.\n     */\n    get route() {\n        return this.getAttribute('route') || null;\n    }\n\n    /**\n     * The class name for the component.\n     */\n    className = 'Tab';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAttribute('active-class', 'active');\n\n        this.setAriaState({\n            role: 'tab',\n            selected: false,\n            disabled: this.hasAttribute('disabled'),\n        });\n    }\n\n    /**\n     * Draws the component for the tab.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let slot = document.createElement('slot');\n\n        let href = this.panel || this.route || \"#\";\n\n        let a = document.createElement('a');\n        a.setAttribute('href', (this.panel ? \"#\" : \"\") + href);\n        a.setAttribute('part', 'native');\n        a.classList.add('native-tab');\n        a.appendChild(slot);\n\n        fragment.appendChild(a);\n\n        this.slotEl = slot;\n\n        return fragment;\n    }\n\n    /**\n     * Sets up event listeners after the component is rendered.\n     * // @fires wje-tab:change - Dispatched when the component is clicked, indicating a tab change.\n     */\n    afterDraw() {\n        this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });\n        event.addListener(this, 'click', 'wje-tab:change');\n        this.syncAriaLabel();\n        this.slotEl?.addEventListener('slotchange', () => this.syncAriaLabel());\n    }\n\n    /**\n     * Sync aria-label on host based on slotted text when not provided.\n     */\n    syncAriaLabel() {\n        if (this.hasAttribute('aria-label') || this.hasAttribute('aria-labelledby')) return;\n        const text = (this.slotEl?.assignedNodes({ flatten: true }) || [])\n            .map((node) => node.textContent || '')\n            .join('')\n            .trim();\n        if (text) {\n            this.setAttribute('aria-label', text);\n        }\n    }\n\n    /**\n     * Sets the roving tabindex on the internal focusable anchor.\n     * @param {number} value\n     */\n    setRovingTabIndex(value) {\n        const anchor = this.context?.querySelector('a');\n        if (!anchor) return;\n        anchor.setAttribute('tabindex', String(value));\n    }\n\n    /**\n     * Cleans up before the component is disconnected.\n     */\n    beforeDisconnect() {\n        this.unbindRouterLinks?.();\n    }\n}\n","import Tab from './tab.element.js';\n\nexport default Tab;\n\nTab.define('wje-tab', Tab);\n"],"names":["Tab","WJElement","constructor","super","className","this","last","_hasPanel","value","setAttribute","getAttribute","route","cssStyleSheet","setupAttributes","isShadowRoot","setAriaState","role","selected","disabled","hasAttribute","draw","fragment","document","createDocumentFragment","slot","createElement","href","panel","a","classList","add","appendChild","slotEl","afterDraw","unbindRouterLinks","bindRouterLinks","parentElement","selector","event","addListener","syncAriaLabel","addEventListener","text","assignedNodes","flatten","map","node","textContent","join","trim","anchor","context","querySelector","String","beforeDisconnect","define"],"mappings":";;;;;;AAuBe,MAAMA,UAAYC,EAAAA;AAAAA,EAI7B,cAAAC;AACIC,UAAAA;AA8CJC,qCAAY;AAxCRC,SAAKC,OAAAA,OACLD,KAAKE,YAAAA;AAAAA,EACT;AAAA,EAMA,IAAA,MAAUC,IAAAA;AACNH,SAAKI,aAAa,SAASD;EAC/B;AAAA,EAMA,IAAA;AACI,WAAOH,KAAKK,aAAa,OAAA,KAAY;AAAA,EACzC;AAAA,EAMA,IAAA,MAAUF,IAAAA;AACNH,SAAKI,aAAa,SAASD,EAAAA;AAAAA,EAC/B;AAAA,EAOA,IAAA,QAAIG;AACA,WAAON,KAAKK,aAAa,OAAA,KAAY;AAAA,EACzC;AAAA,EAYA,WAAA,gBAAWE;AACP;EACJ;AAAA,EAKA,kBAAAC;AACIR,SAAKS,eAAe,QACpBT,KAAKI,aAAa,gBAAgB,QAAA,GAElCJ,KAAKU,aAAa,EACdC,MAAM,OACNC,UAAAA,OACAC,UAAUb,KAAKc,aAAa,UAAA,EAAA,CAAA;AAAA,EAEpC;AAAA,EAMA,OAAAC;AACI,QAAIC,KAAWC,SAASC,0BAEpBC,KAAOF,SAASG,cAAc,MAAA,GAE9BC,KAAOrB,KAAKsB,SAAStB,KAAKM,SAAS,KAEnCiB,KAAIN,SAASG,cAAc;AAU/B,WATAG,GAAEnB,aAAa,SAASJ,KAAKsB,QAAQ,MAAM,MAAMD,EAAAA,GACjDE,GAAEnB,aAAa,QAAQ,WACvBmB,GAAEC,UAAUC,IAAI,YAAA,GAChBF,GAAEG,YAAYP,KAEdH,GAASU,YAAYH,KAErBvB,KAAK2B,SAASR,IAEPH;AAAAA,EACX;AAAA,EAMA,YAAAY;;AACI5B,SAAK6B,oBAAoBC,EAAgB9B,KAAK+B,eAAe,EAAEC,UAAAA,MAAU,CAAA,GACzEC,EAAMC,YAAYlC,MAAM,SAAS,gBAAA,GACjCA,KAAKmC,cAAAA,IACLnC,UAAK2B,WAAL3B,mBAAaoC,iBAAiB,cAAc,MAAMpC,KAAKmC,cAAAA;AAAAA,EAC3D;AAAA,EAKA,gBAAAA;;AACI,QAAInC,KAAKc,aAAa,YAAA,KAAiBd,KAAKc,aAAa,iBAAA,EAAoB;AAC7E,UAAMuB,QAAQrC,UAAK2B,WAAL3B,mBAAasC,cAAc,EAAEC,SAAAA,KAAS,OAAW,CAAA,GAC1DC,IAAKC,CAAAA,OAASA,GAAKC,eAAe,EAAA,EAClCC,KAAK,IACLC,KAAAA;AACDP,IAAAA,MACArC,KAAKI,aAAa,cAAciC,EAAAA;AAAAA,EAExC;AAAA,EAMA,kBAAkBlC;;AACd,UAAM0C,MAAS7C,UAAK8C,YAAL9C,mBAAc+C,cAAc;AACtCF,IAAAA,MACLA,GAAOzC,aAAa,YAAY4C,OAAO7C,EAAAA,CAAAA;AAAAA,EAC3C;AAAA,EAKA,mBAAA8C;;AACIjD,eAAK6B,sBAAL7B;AAAAA,EACJ;AAAA;AC/JJL,EAAIuD,OAAO,WAAWvD,CAAAA;"}