wj-elements 0.4.4 → 0.4.5

package/dist/packages/wje-tab-group/tab-group.element.d.ts

@@ -22,6 +22,7 @@ export default class TabGroup extends WJElement {
     _instanceId: number;
     _lastNavWidth: any;
     _initialized: boolean;
+    _moreWidth: number;
     /**
      * Sets the value for the 'variant' attribute of the element.
      * @param {string} value The value to set for the 'variant' attribute.
@@ -122,6 +123,19 @@ export default class TabGroup extends WJElement {
         el: Element;
         width: number;
     }[];
+    /**
+     * Measures current tab widths while all tabs are temporarily placed into the main nav slot.
+     * @returns {Array<{el: Element, width: number}>}
+     */
+    measureTabMetrics(): Array<{
+        el: Element;
+        width: number;
+    }>;
+    /**
+     * Stores the measured width of the more dropdown trigger when available.
+     * @returns {void}
+     */
+    measureMoreWidth(): void;
     /**
      * Checks if the tabs within a navigation bar overflow the available space.
      * Moves overflowing tabs into a dropdown menu and updates their state accordingly.

package/dist/wje-tab-group.js

@@ -2,7 +2,7 @@ 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 Group ]\n*/\n\n:host {\n    --wje-tab-top: 0;\n    --wje-tab-start: 0;\n    --wje-tab-end: 0;\n    --wje-tab-bottom: 0;\n    display: block;\n    width: 100%;\n}\n.native-tab-group {\n    display: flex;\n    flex-direction: column;\n\n    overflow: hidden;\n    position: relative;\n}\n\n.native-tab-group > header {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    min-width: 0;\n    box-sizing: border-box;\n\n    & > nav {\n        display: flex;\n        align-items: center;\n        width: 100%;\n        min-width: 0;\n        box-sizing: border-box;\n        overflow: hidden;\n    }\n}\n\n.native-tab-group > section {\n    width: 100%;\n\n    & > article {\n        scroll-snap-align: start;\n        overflow-y: auto;\n        overscroll-behavior-y: contain;\n    }\n}\n\n/*TOP*/\n:host([variant='top']) {\n    --wje-tab-top: auto !important;\n    --wje-tab-writing-mode: horizontal-tb;\n    .native-tab-group {\n        flex-direction: column;\n    }\n    nav {\n        border-bottom: var(--wje-tab-group-nav-border);\n    }\n}\n\n/*START*/\n:host([variant='start']) {\n    --wje-tab-start: auto !important;\n    --wje-tab-writing-mode: vertical-rl;\n    .native-tab-group {\n        flex-direction: row;\n    }\n    nav {\n        flex-direction: column;\n        border-right: var(--wje-tab-group-nav-border);\n    }\n}\n\n/*END*/\n:host([variant='end']) {\n    --wje-tab-writing-mode: vertical-rl;\n    .native-tab-group {\n        flex-direction: row-reverse;\n    }\n    nav {\n        flex-direction: column;\n        border-left: var(--wje-tab-group-nav-border);\n    }\n}\n\n/*BOTTOM*/\n:host([variant='bottom']) {\n    --wje-tab-bottom: auto !important;\n    --wje-tab-writing-mode: horizontal-tb;\n    .native-tab-group {\n        flex-direction: column-reverse;\n    }\n    nav {\n        border-top: var(--wje-tab-group-nav-border);\n    }\n}\n\n.dropdown-active {\n    wje-button{\n        &::part(native) {\n            color: var(--wje-color-primary-8);\n        }\n    }\n}\n\n.more-tabs {\n    flex: 0 0 auto;\n}\n";
+const styles = "/*\n[ WJ Tab Group ]\n*/\n\n:host {\n    --wje-tab-top: 0;\n    --wje-tab-start: 0;\n    --wje-tab-end: 0;\n    --wje-tab-bottom: 0;\n    width: 100%;\n}\n.native-tab-group {\n    display: flex;\n    flex-direction: column;\n\n    overflow: hidden;\n    position: relative;\n}\n\n.native-tab-group > header {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    min-width: 0;\n    box-sizing: border-box;\n\n    & > nav {\n        display: flex;\n        align-items: center;\n        width: 100%;\n        min-width: 0;\n        box-sizing: border-box;\n        overflow: hidden;\n    }\n}\n\n.native-tab-group > section {\n    width: 100%;\n\n    & > article {\n        scroll-snap-align: start;\n        overflow-y: auto;\n        overscroll-behavior-y: contain;\n    }\n}\n\n/*TOP*/\n:host([variant='top']) {\n    --wje-tab-top: auto !important;\n    --wje-tab-writing-mode: horizontal-tb;\n    .native-tab-group {\n        flex-direction: column;\n    }\n    nav {\n        border-bottom: var(--wje-tab-group-nav-border);\n    }\n}\n\n/*START*/\n:host([variant='start']) {\n    --wje-tab-start: auto !important;\n    --wje-tab-writing-mode: vertical-rl;\n    .native-tab-group {\n        flex-direction: row;\n    }\n    nav {\n        flex-direction: column;\n        border-right: var(--wje-tab-group-nav-border);\n    }\n}\n\n/*END*/\n:host([variant='end']) {\n    --wje-tab-writing-mode: vertical-rl;\n    .native-tab-group {\n        flex-direction: row-reverse;\n    }\n    nav {\n        flex-direction: column;\n        border-left: var(--wje-tab-group-nav-border);\n    }\n}\n\n/*BOTTOM*/\n:host([variant='bottom']) {\n    --wje-tab-bottom: auto !important;\n    --wje-tab-writing-mode: horizontal-tb;\n    .native-tab-group {\n        flex-direction: column-reverse;\n    }\n    nav {\n        border-top: var(--wje-tab-group-nav-border);\n    }\n}\n\n.dropdown-active {\n    wje-button{\n        &::part(native) {\n            color: var(--wje-color-primary-8);\n        }\n    }\n}\n\n.more-tabs {\n    flex: 0 0 auto;\n}\n";
 const _TabGroup = class _TabGroup extends WJElement {
   /**
    * Creates an instance of TabGroup.
@@ -14,6 +14,7 @@ const _TabGroup = class _TabGroup extends WJElement {
     this._instanceId = ++_TabGroup._instanceId;
     this._lastNavWidth = null;
     this._initialized = false;
+    this._moreWidth = 0;
   }
   /**
    * Sets the value for the 'variant' attribute of the element.
@@ -241,31 +242,63 @@ const _TabGroup = class _TabGroup extends WJElement {
    * @returns {void} Does not return any value.
    */
   initTabMetrics() {
-    const tabs = Array.from(this.querySelectorAll("wje-tab"));
-    tabs.forEach((tab) => tab.setAttribute("slot", "nav"));
     requestAnimationFrame(() => {
-      this._tabMetrics = tabs.map((tab) => ({
-        el: tab,
-        width: tab.getBoundingClientRect().width
-      }));
+      this._tabMetrics = this.measureTabMetrics();
+      this.measureMoreWidth();
       this._initialized = true;
       this.checkOverflow();
       this._lastNavWidth = this.nav.getBoundingClientRect().width;
     });
   }
+  /**
+   * Measures current tab widths while all tabs are temporarily placed into the main nav slot.
+   * @returns {Array<{el: Element, width: number}>}
+   */
+  measureTabMetrics() {
+    const tabs = Array.from(this.querySelectorAll("wje-tab"));
+    tabs.forEach((tab) => tab.setAttribute("slot", "nav"));
+    return tabs.map((tab) => ({
+      el: tab,
+      width: tab.getBoundingClientRect().width
+    }));
+  }
+  /**
+   * Stores the measured width of the more dropdown trigger when available.
+   * @returns {void}
+   */
+  measureMoreWidth() {
+    const wasHidden = this.moreDropdown.hidden;
+    const previousVisibility = this.moreDropdown.style.visibility;
+    if (wasHidden) {
+      this.moreDropdown.hidden = false;
+      this.moreDropdown.style.visibility = "hidden";
+    }
+    const width = this.moreDropdown.getBoundingClientRect().width || 0;
+    if (wasHidden) {
+      this.moreDropdown.hidden = true;
+      this.moreDropdown.style.visibility = previousVisibility;
+    }
+    if (width > 0) {
+      this._moreWidth = width;
+    }
+  }
   /**
    * Checks if the tabs within a navigation bar overflow the available space.
    * Moves overflowing tabs into a dropdown menu and updates their state accordingly.
    * @returns {void} This method does not return a value.
    */
   checkOverflow() {
+    var _a, _b;
     if (!this._initialized) return;
+    this._tabMetrics = this.measureTabMetrics();
+    this.measureMoreWidth();
     const navWidth = this.nav.getBoundingClientRect().width;
-    const moreWidth = this.moreDropdown.offsetWidth || 48;
+    const moreWidth = this._moreWidth || 48;
     const totalWidth = this._tabMetrics.reduce((sum, { width }) => sum + width, 0);
     if (totalWidth <= navWidth) {
       this._tabMetrics.forEach(({ el }) => el.setAttribute("slot", "nav"));
       this.toggleMoreVisibility();
+      this.dropdownActive((_a = this.getActiveTab()) == null ? void 0 : _a[0]);
       return;
     }
     let used = 0;
@@ -278,6 +311,7 @@ const _TabGroup = class _TabGroup extends WJElement {
       overflowStarted || (overflowStarted = shouldOverflow);
     }
     this.toggleMoreVisibility();
+    this.dropdownActive((_b = this.getActiveTab()) == null ? void 0 : _b[0]);
   }
   /**
    * Toggles the "dropdown-active" class on the element based on its "active" status
@@ -286,6 +320,10 @@ const _TabGroup = class _TabGroup extends WJElement {
    * @returns {void} This method does not return any value.
    */
   dropdownActive(el) {
+    if (!el) {
+      this.moreDropdown.classList.remove("dropdown-active");
+      return;
+    }
     if (el.classList.contains("active")) {
       if (el.getAttribute("slot") === "more")
         this.moreDropdown.classList.add("dropdown-active");

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    }\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        const tabs = Array.from(this.querySelectorAll('wje-tab'));\n\n        // všetko do nav – LEN RAZ\n        tabs.forEach(tab => tab.setAttribute('slot', 'nav'));\n\n        requestAnimationFrame(() => {\n            this._tabMetrics = tabs.map(tab => ({\n                el: tab,\n                width: tab.getBoundingClientRect().width\n            }));\n\n            this._initialized = true;\n            this.checkOverflow(); // prvý výpočet\n            this._lastNavWidth = this.nav.getBoundingClientRect().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        const navWidth = this.nav.getBoundingClientRect().width;\n        const moreWidth = this.moreDropdown.offsetWidth || 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            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    }\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.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":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",