wj-elements 0.4.6 → 0.4.7

package/dist/packages/wje-toolbar-action/toolbar-action.element.d.ts

@@ -33,6 +33,7 @@ export default class ToolbarAction extends WJElement {
     _managedHiddenActions: WeakSet<WeakKey>;
     _isCollapsedByBreakpoint: any;
     _managedOverflowNodes: WeakSet<WeakKey>;
+    _overflowRetryFrame: any;
     /**
      * Sets the collapse breakpoint token or value.
      * @param {string} value Breakpoint token or CSS size.
@@ -80,9 +81,9 @@ export default class ToolbarAction extends WJElement {
     handleResize: () => void;
     /**
      * Returns the actions for the toolbar action.
-     * @returns {Array} An array of wje-button elements
+     * @returns {Array<HTMLElement>} Managed toolbar actions.
      */
-    getActions(): any[];
+    getActions(): Array<HTMLElement>;
     /**
      * Returns direct children assigned to the default slot.
      * @returns {Array<HTMLElement>}

package/dist/wje-toolbar-action.js

@@ -17,6 +17,7 @@ const _ToolbarAction = class _ToolbarAction extends WJElement {
     this._managedHiddenActions = /* @__PURE__ */ new WeakSet();
     this._isCollapsedByBreakpoint = null;
     this._managedOverflowNodes = /* @__PURE__ */ new WeakSet();
+    this._overflowRetryFrame = null;
   }
   /**
    * Returns the CSS stylesheet for the component.
@@ -142,16 +143,20 @@ const _ToolbarAction = class _ToolbarAction extends WJElement {
     (_a = this.defaultSlot) == null ? void 0 : _a.removeEventListener("slotchange", this.onSlotChange);
     window.removeEventListener("resize", this.handleResize);
     this._isCollapsedByBreakpoint = null;
+    if (this._overflowRetryFrame) {
+      cancelAnimationFrame(this._overflowRetryFrame);
+      this._overflowRetryFrame = null;
+    }
   }
   /**
    * Returns the actions for the toolbar action.
-   * @returns {Array} An array of wje-button elements
+   * @returns {Array<HTMLElement>} Managed toolbar actions.
    */
   getActions() {
     return this.getAssignedElements().filter(
       (element) => {
         var _a;
-        return ((_a = element.tagName) == null ? void 0 : _a.toLowerCase()) === "wje-button" && element.getAttribute("slot") !== "trigger";
+        return element.getAttribute("slot") !== "trigger" && (((_a = element.tagName) == null ? void 0 : _a.toLowerCase()) === "wje-button" || element.hasAttribute("data-toolbar-action"));
       }
     );
   }
@@ -271,8 +276,19 @@ const _ToolbarAction = class _ToolbarAction extends WJElement {
     const overflowActions = actions.slice(visibleLimit);
     const existingDropdown = this.getExistingDropdown();
     const overflowMenu = this.getOverflowMenu();
+    if (this._overflowRetryFrame) {
+      cancelAnimationFrame(this._overflowRetryFrame);
+      this._overflowRetryFrame = null;
+    }
     this.restoreManagedActions(actions);
     this.restoreManagedOverflowContent();
+    if (existingDropdown && overflowActions.length > 0 && !overflowMenu) {
+      this._overflowRetryFrame = requestAnimationFrame(() => {
+        this._overflowRetryFrame = null;
+        this.applyOverflow();
+      });
+      return;
+    }
     if (!existingDropdown) {
       (_a = this.moreMenu) == null ? void 0 : _a.replaceChildren();
     }

package/dist/wje-toolbar-action.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-toolbar-action.js","sources":["../packages/wje-toolbar-action/toolbar-action.element.js","../packages/wje-toolbar-action/toolbar-action.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `ToolbarAction` is a custom web component that represents a toolbar action.\n * @summary This element represents a toolbar action.\n * @documentation https://elements.webjet.sk/components/toolbar-action\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native toolbar action wrapper.\n * @slot - The default slot for the toolbar action.\n * @tag wje-toolbar-action\n */\nexport default class ToolbarAction extends WJElement {\n    static BREAKPOINTS = {\n        sm: 576,\n        md: 768,\n        lg: 992,\n        xl: 1200,\n        '2xl': 1450,\n        xxl: 1450,\n    };\n\n    /**\n     * Creates an instance of ToolbarAction.\n     */\n    constructor() {\n        super();\n        this._managedHiddenActions = new WeakSet();\n        this._isCollapsedByBreakpoint = null;\n        this._managedOverflowNodes = new WeakSet();\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'ToolbarAction';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of observed attributes.\n     * @static\n     * @returns {Array} An empty array\n     */\n    static get observedAttributes() {\n        return ['breakpoint', 'max-items', 'visible-items'];\n    }\n\n    /**\n     * Sets the collapse breakpoint token or value.\n     * @param {string} value Breakpoint token or CSS size.\n     */\n    set breakpoint(value) {\n        if (value) this.setAttribute('breakpoint', value);\n        else this.removeAttribute('breakpoint');\n    }\n\n    /**\n     * Gets the collapse breakpoint token or value.\n     * @returns {string}\n     */\n    get breakpoint() {\n        return this.getAttribute('breakpoint') || '';\n    }\n\n    /**\n     * Sets the maximum number of visible actions.\n     * @param {number|string} value The maximum number of visible actions.\n     */\n    set maxItems(value) {\n        this.setAttribute('max-items', value || 0);\n    }\n\n    /**\n     * Gets the maximum number of visible actions.\n     * @returns {number}\n     */\n    get maxItems() {\n        return +this.getAttribute('max-items') || 0;\n    }\n\n    /**\n     * Sets the responsive visible action count.\n     * @param {number|string} value The visible action count.\n     */\n    set visibleItems(value) {\n        if (value === null || value === undefined || value === '') {\n            this.removeAttribute('visible-items');\n            return;\n        }\n\n        this.setAttribute('visible-items', value);\n    }\n\n    /**\n     * Gets the responsive visible action count.\n     * @returns {number|null}\n     */\n    get visibleItems() {\n        if (!this.hasAttribute('visible-items')) return null;\n        const value = +this.getAttribute('visible-items');\n        return Number.isFinite(value) ? value : null;\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 toolbar action.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let slot = document.createElement('slot');\n\n        let element = document.createElement('div');\n        element.setAttribute('part', 'native');\n        element.classList.add('native-toolbar-action');\n\n        let dropdown = document.createElement('wje-dropdown');\n        dropdown.setAttribute('placement', 'bottom-end');\n        dropdown.setAttribute('collapsible', '');\n        dropdown.classList.add('toolbar-action-more');\n        dropdown.hidden = true;\n\n        let trigger = document.createElement('wje-button');\n        trigger.setAttribute('slot', 'trigger');\n        trigger.setAttribute('fill', 'link');\n        trigger.setAttribute('aria-label', 'Show more actions');\n        trigger.innerHTML = '<wje-icon name=\"dots\"></wje-icon>';\n\n        let menu = document.createElement('wje-menu');\n        menu.setAttribute('variant', 'context');\n\n        dropdown.append(trigger, menu);\n\n        element.appendChild(slot);\n        element.appendChild(dropdown);\n\n        fragment.appendChild(element);\n\n        this.defaultSlot = slot;\n        this.native = element;\n        this.moreDropdown = dropdown;\n        this.moreMenu = menu;\n\n        return fragment;\n    }\n\n    /**\n     * Applies the current visible action limit after the component is drawn.\n     */\n    afterDraw() {\n        this.onSlotChange = () => this.applyOverflow();\n        this.defaultSlot?.addEventListener('slotchange', this.onSlotChange);\n        this.handleResize = () => this.handleBreakpointResize();\n\n        if (this.getBreakpointWidth()) {\n            window.addEventListener('resize', this.handleResize);\n        }\n\n        this.applyOverflow();\n    }\n\n    /**\n     * Removes listeners after disconnect.\n     */\n    afterDisconnect() {\n        this.defaultSlot?.removeEventListener('slotchange', this.onSlotChange);\n        window.removeEventListener('resize', this.handleResize);\n        this._isCollapsedByBreakpoint = null;\n    }\n\n    /**\n     * Returns the actions for the toolbar action.\n     * @returns {Array} An array of wje-button elements\n     */\n    getActions() {\n        return this.getAssignedElements().filter(\n            (element) => element.tagName?.toLowerCase() === 'wje-button' && element.getAttribute('slot') !== 'trigger'\n        );\n    }\n\n    /**\n     * Returns direct children assigned to the default slot.\n     * @returns {Array<HTMLElement>}\n     */\n    getAssignedElements() {\n        return this.defaultSlot?.assignedElements?.() || Array.from(this.children);\n    }\n\n    /**\n     * Returns an existing top-level dropdown if present.\n     * @returns {HTMLElement|null}\n     */\n    getExistingDropdown() {\n        return this.getAssignedElements().find((element) => element.tagName?.toLowerCase() === 'wje-dropdown') || null;\n    }\n\n    /**\n     * Returns the dropdown that should receive overflow items.\n     * @returns {HTMLElement}\n     */\n    getOverflowDropdown() {\n        return this.getExistingDropdown() || this.moreDropdown;\n    }\n\n    /**\n     * Returns the menu used for overflow items.\n     * @returns {HTMLElement|null}\n     */\n    getOverflowMenu() {\n        const existingDropdown = this.getExistingDropdown();\n\n        if (existingDropdown) {\n            return (\n                Array.from(existingDropdown.children).find((element) => element.tagName?.toLowerCase() === 'wje-menu') ||\n                null\n            );\n        }\n\n        return this.moreMenu;\n    }\n\n    /**\n     * Gets the number of actions that should stay visible.\n     * @returns {number}\n     */\n    getVisibleLimit() {\n        const actions = this.getActions();\n\n        if (this.isCollapsedByBreakpoint()) {\n            return 0;\n        }\n\n        const maxItems = this.maxItems > 0 ? this.maxItems : actions.length;\n        const visibleItems = this.visibleItems;\n        const limit = visibleItems === null ? maxItems : Math.min(visibleItems, maxItems);\n\n        return Math.max(0, Math.min(limit, actions.length));\n    }\n\n    /**\n     * Returns whether the toolbar action should collapse based on the configured breakpoint.\n     * @returns {boolean}\n     */\n    shouldCollapseByBreakpoint() {\n        const breakpointWidth = this.getBreakpointWidth();\n\n        if (!breakpointWidth) return false;\n\n        return window.innerWidth < breakpointWidth;\n    }\n\n    /**\n     * Returns the cached breakpoint collapse state.\n     * @returns {boolean}\n     */\n    isCollapsedByBreakpoint() {\n        if (!this.getBreakpointWidth()) {\n            this._isCollapsedByBreakpoint = false;\n            return false;\n        }\n\n        const nextState = this.shouldCollapseByBreakpoint();\n        this._isCollapsedByBreakpoint = nextState;\n\n        return nextState;\n    }\n\n    /**\n     * Reacts to viewport resize only when the breakpoint mode actually changes.\n     * @returns {void}\n     */\n    handleBreakpointResize() {\n        if (!this.getBreakpointWidth()) return;\n\n        const nextState = this.shouldCollapseByBreakpoint();\n\n        if (this._isCollapsedByBreakpoint === nextState) return;\n\n        this._isCollapsedByBreakpoint = nextState;\n        this.applyOverflow();\n    }\n\n    /**\n     * Resolves the configured breakpoint to a pixel width.\n     * @returns {number|null}\n     */\n    getBreakpointWidth() {\n        if (!this.breakpoint) return null;\n\n        const token = this.breakpoint.trim().toLowerCase();\n        const cssValue = getComputedStyle(this).getPropertyValue(`--wje-toolbar-action-breakpoint-${token}`).trim();\n        const namedBreakpoint = ToolbarAction.BREAKPOINTS[token];\n\n        if (cssValue) {\n            const cssNumber = parseFloat(cssValue);\n            if (Number.isFinite(cssNumber)) return cssNumber;\n        }\n\n        if (Number.isFinite(namedBreakpoint)) {\n            return namedBreakpoint;\n        }\n\n        const directNumber = parseFloat(token);\n        return Number.isFinite(directNumber) ? directNumber : null;\n    }\n\n    /**\n     * Updates visible actions and the overflow dropdown.\n     * @returns {void}\n     */\n    applyOverflow() {\n        const actions = this.getActions();\n        const visibleLimit = this.getVisibleLimit();\n        const overflowActions = actions.slice(visibleLimit);\n        const existingDropdown = this.getExistingDropdown();\n        const overflowMenu = this.getOverflowMenu();\n\n        this.restoreManagedActions(actions);\n        this.restoreManagedOverflowContent();\n\n        if (!existingDropdown) {\n            this.moreMenu?.replaceChildren();\n        }\n\n        overflowActions.forEach((action) => {\n            action.hidden = true;\n            action.style.display = 'none';\n            this._managedHiddenActions.add(action);\n        });\n\n        if (overflowMenu && existingDropdown && overflowActions.length > 0 && overflowMenu.children.length > 0) {\n            overflowMenu.append(this.createOverflowDivider());\n        }\n\n        overflowActions.forEach((action) => {\n            overflowMenu?.append(this.createMenuItem(action));\n        });\n\n        if (!existingDropdown && this.moreDropdown) {\n            this.moreDropdown.hidden = overflowActions.length === 0;\n        } else if (existingDropdown && this.moreDropdown) {\n            this.moreDropdown.hidden = true;\n        }\n    }\n\n    /**\n     * Restores buttons hidden by this component.\n     * @param {Array<HTMLElement>} actions Toolbar buttons.\n     */\n    restoreManagedActions(actions = this.getActions()) {\n        actions.forEach((action) => {\n            if (this._managedHiddenActions.has(action)) {\n                action.hidden = false;\n                action.style.removeProperty('display');\n                this._managedHiddenActions.delete(action);\n            }\n        });\n    }\n\n    /**\n     * Removes overflow menu nodes that were previously injected by this component.\n     */\n    restoreManagedOverflowContent() {\n        const dropdown = this.getExistingDropdown();\n\n        if (!dropdown) return;\n\n        const menu = this.getOverflowMenu();\n        if (!menu) return;\n\n        Array.from(menu.children).forEach((child) => {\n            if (this._managedOverflowNodes.has(child)) {\n                child.remove();\n                this._managedOverflowNodes.delete(child);\n            }\n        });\n    }\n\n    /**\n     * Creates a dropdown menu proxy for an overflowed button.\n     * @param {HTMLElement} action The original action button.\n     * @returns {HTMLElement}\n     */\n    createMenuItem(action) {\n        let menuItem = document.createElement('wje-menu-item');\n        menuItem.innerHTML = action.innerHTML;\n\n        if (action.hasAttribute('disabled') || action.getAttribute('aria-disabled') === 'true') {\n            menuItem.setAttribute('disabled', '');\n        }\n\n        menuItem.addEventListener('wje-menu-item:click', (e) => this.handleMenuItemClick(e, action));\n        menuItem.addEventListener('click', (e) => this.handleMenuItemClick(e, action));\n        this._managedOverflowNodes.add(menuItem);\n\n        return menuItem;\n    }\n\n    /**\n     * Creates a divider separating existing dropdown actions from responsive overflow actions.\n     * @returns {HTMLElement}\n     */\n    createOverflowDivider() {\n        const divider = document.createElement('wje-divider');\n        this._managedOverflowNodes.add(divider);\n        return divider;\n    }\n\n    /**\n     * Forwards menu item activation to the original button.\n     * @param {Event} e The menu event.\n     * @param {HTMLElement} action The original action button.\n     */\n    handleMenuItemClick(e, action) {\n        e.preventDefault?.();\n        e.stopPropagation();\n\n        if (!action || action.hasAttribute('disabled') || action.getAttribute('aria-disabled') === 'true') return;\n\n        action.click();\n    }\n\n    /**\n     * Measures action widths while preserving current overflow state.\n     * @returns {{count: number, widths: number[], gap: number, moreWidth: number, getWidthForCount: Function}}\n     */\n    measureActionMetrics() {\n        const actions = this.getActions();\n        const hasExistingDropdown = !!this.getExistingDropdown();\n\n        this.restoreManagedActions(actions);\n\n        const widths = actions.map((action) => action.getBoundingClientRect().width);\n        const style = this.native ? getComputedStyle(this.native) : null;\n        const gap = style ? parseFloat(style.columnGap || style.gap || '0') || 0 : 0;\n        const moreWidth = this.measureMoreWidth();\n\n        this.applyOverflow();\n\n        return {\n            count: actions.length,\n            widths,\n            gap,\n            moreWidth,\n            getWidthForCount: (visibleCount) => {\n                const count = Math.max(0, Math.min(visibleCount, actions.length));\n                const overflowCount = actions.length - count;\n                const visibleWidth = widths.slice(0, count).reduce((sum, width) => sum + width, 0);\n                const visibleGaps = Math.max(count - 1, 0) * gap;\n                const usesDropdown = hasExistingDropdown || overflowCount > 0;\n                const moreGap = count > 0 && usesDropdown ? gap : 0;\n\n                return visibleWidth + visibleGaps + (usesDropdown ? moreWidth + moreGap : 0);\n            },\n        };\n    }\n\n    /**\n     * Measures the overflow dropdown trigger.\n     * @returns {number}\n     */\n    measureMoreWidth() {\n        const dropdown = this.getOverflowDropdown();\n        if (!dropdown) return 48;\n\n        const isInternalDropdown = dropdown === this.moreDropdown;\n        const wasHidden = dropdown.hidden;\n        const previousVisibility = dropdown.style.visibility;\n\n        if (isInternalDropdown && wasHidden) {\n            dropdown.hidden = false;\n            dropdown.style.visibility = 'hidden';\n        }\n\n        const width = dropdown.getBoundingClientRect().width || 48;\n\n        if (isInternalDropdown && wasHidden) {\n            dropdown.hidden = true;\n            dropdown.style.visibility = previousVisibility;\n        }\n\n        if (dropdown === this.moreDropdown && this.getExistingDropdown()) {\n            this.moreDropdown.hidden = true;\n        }\n\n        return width;\n    }\n}\n","import ToolbarAction from './toolbar-action.element.js';\n\nexport default ToolbarAction;\n\nToolbarAction.define('wje-toolbar-action', ToolbarAction);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-toolbar-action.js","sources":["../packages/wje-toolbar-action/toolbar-action.element.js","../packages/wje-toolbar-action/toolbar-action.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `ToolbarAction` is a custom web component that represents a toolbar action.\n * @summary This element represents a toolbar action.\n * @documentation https://elements.webjet.sk/components/toolbar-action\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native toolbar action wrapper.\n * @slot - The default slot for the toolbar action.\n * @tag wje-toolbar-action\n */\nexport default class ToolbarAction extends WJElement {\n    static BREAKPOINTS = {\n        sm: 576,\n        md: 768,\n        lg: 992,\n        xl: 1200,\n        '2xl': 1450,\n        xxl: 1450,\n    };\n\n    /**\n     * Creates an instance of ToolbarAction.\n     */\n    constructor() {\n        super();\n        this._managedHiddenActions = new WeakSet();\n        this._isCollapsedByBreakpoint = null;\n        this._managedOverflowNodes = new WeakSet();\n        this._overflowRetryFrame = null;\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'ToolbarAction';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of observed attributes.\n     * @static\n     * @returns {Array} An empty array\n     */\n    static get observedAttributes() {\n        return ['breakpoint', 'max-items', 'visible-items'];\n    }\n\n    /**\n     * Sets the collapse breakpoint token or value.\n     * @param {string} value Breakpoint token or CSS size.\n     */\n    set breakpoint(value) {\n        if (value) this.setAttribute('breakpoint', value);\n        else this.removeAttribute('breakpoint');\n    }\n\n    /**\n     * Gets the collapse breakpoint token or value.\n     * @returns {string}\n     */\n    get breakpoint() {\n        return this.getAttribute('breakpoint') || '';\n    }\n\n    /**\n     * Sets the maximum number of visible actions.\n     * @param {number|string} value The maximum number of visible actions.\n     */\n    set maxItems(value) {\n        this.setAttribute('max-items', value || 0);\n    }\n\n    /**\n     * Gets the maximum number of visible actions.\n     * @returns {number}\n     */\n    get maxItems() {\n        return +this.getAttribute('max-items') || 0;\n    }\n\n    /**\n     * Sets the responsive visible action count.\n     * @param {number|string} value The visible action count.\n     */\n    set visibleItems(value) {\n        if (value === null || value === undefined || value === '') {\n            this.removeAttribute('visible-items');\n            return;\n        }\n\n        this.setAttribute('visible-items', value);\n    }\n\n    /**\n     * Gets the responsive visible action count.\n     * @returns {number|null}\n     */\n    get visibleItems() {\n        if (!this.hasAttribute('visible-items')) return null;\n        const value = +this.getAttribute('visible-items');\n        return Number.isFinite(value) ? value : null;\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 toolbar action.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let slot = document.createElement('slot');\n\n        let element = document.createElement('div');\n        element.setAttribute('part', 'native');\n        element.classList.add('native-toolbar-action');\n\n        let dropdown = document.createElement('wje-dropdown');\n        dropdown.setAttribute('placement', 'bottom-end');\n        dropdown.setAttribute('collapsible', '');\n        dropdown.classList.add('toolbar-action-more');\n        dropdown.hidden = true;\n\n        let trigger = document.createElement('wje-button');\n        trigger.setAttribute('slot', 'trigger');\n        trigger.setAttribute('fill', 'link');\n        trigger.setAttribute('aria-label', 'Show more actions');\n        trigger.innerHTML = '<wje-icon name=\"dots\"></wje-icon>';\n\n        let menu = document.createElement('wje-menu');\n        menu.setAttribute('variant', 'context');\n\n        dropdown.append(trigger, menu);\n\n        element.appendChild(slot);\n        element.appendChild(dropdown);\n\n        fragment.appendChild(element);\n\n        this.defaultSlot = slot;\n        this.native = element;\n        this.moreDropdown = dropdown;\n        this.moreMenu = menu;\n\n        return fragment;\n    }\n\n    /**\n     * Applies the current visible action limit after the component is drawn.\n     */\n    afterDraw() {\n        this.onSlotChange = () => this.applyOverflow();\n        this.defaultSlot?.addEventListener('slotchange', this.onSlotChange);\n        this.handleResize = () => this.handleBreakpointResize();\n\n        if (this.getBreakpointWidth()) {\n            window.addEventListener('resize', this.handleResize);\n        }\n\n        this.applyOverflow();\n    }\n\n    /**\n     * Removes listeners after disconnect.\n     */\n    afterDisconnect() {\n        this.defaultSlot?.removeEventListener('slotchange', this.onSlotChange);\n        window.removeEventListener('resize', this.handleResize);\n        this._isCollapsedByBreakpoint = null;\n\n        if (this._overflowRetryFrame) {\n            cancelAnimationFrame(this._overflowRetryFrame);\n            this._overflowRetryFrame = null;\n        }\n    }\n\n    /**\n     * Returns the actions for the toolbar action.\n     * @returns {Array<HTMLElement>} Managed toolbar actions.\n     */\n    getActions() {\n        return this.getAssignedElements().filter(\n            (element) =>\n                element.getAttribute('slot') !== 'trigger' &&\n                (element.tagName?.toLowerCase() === 'wje-button' || element.hasAttribute('data-toolbar-action'))\n        );\n    }\n\n    /**\n     * Returns direct children assigned to the default slot.\n     * @returns {Array<HTMLElement>}\n     */\n    getAssignedElements() {\n        return this.defaultSlot?.assignedElements?.() || Array.from(this.children);\n    }\n\n    /**\n     * Returns an existing top-level dropdown if present.\n     * @returns {HTMLElement|null}\n     */\n    getExistingDropdown() {\n        return this.getAssignedElements().find((element) => element.tagName?.toLowerCase() === 'wje-dropdown') || null;\n    }\n\n    /**\n     * Returns the dropdown that should receive overflow items.\n     * @returns {HTMLElement}\n     */\n    getOverflowDropdown() {\n        return this.getExistingDropdown() || this.moreDropdown;\n    }\n\n    /**\n     * Returns the menu used for overflow items.\n     * @returns {HTMLElement|null}\n     */\n    getOverflowMenu() {\n        const existingDropdown = this.getExistingDropdown();\n\n        if (existingDropdown) {\n            return (\n                Array.from(existingDropdown.children).find((element) => element.tagName?.toLowerCase() === 'wje-menu') ||\n                null\n            );\n        }\n\n        return this.moreMenu;\n    }\n\n    /**\n     * Gets the number of actions that should stay visible.\n     * @returns {number}\n     */\n    getVisibleLimit() {\n        const actions = this.getActions();\n\n        if (this.isCollapsedByBreakpoint()) {\n            return 0;\n        }\n\n        const maxItems = this.maxItems > 0 ? this.maxItems : actions.length;\n        const visibleItems = this.visibleItems;\n        const limit = visibleItems === null ? maxItems : Math.min(visibleItems, maxItems);\n\n        return Math.max(0, Math.min(limit, actions.length));\n    }\n\n    /**\n     * Returns whether the toolbar action should collapse based on the configured breakpoint.\n     * @returns {boolean}\n     */\n    shouldCollapseByBreakpoint() {\n        const breakpointWidth = this.getBreakpointWidth();\n\n        if (!breakpointWidth) return false;\n\n        return window.innerWidth < breakpointWidth;\n    }\n\n    /**\n     * Returns the cached breakpoint collapse state.\n     * @returns {boolean}\n     */\n    isCollapsedByBreakpoint() {\n        if (!this.getBreakpointWidth()) {\n            this._isCollapsedByBreakpoint = false;\n            return false;\n        }\n\n        const nextState = this.shouldCollapseByBreakpoint();\n        this._isCollapsedByBreakpoint = nextState;\n\n        return nextState;\n    }\n\n    /**\n     * Reacts to viewport resize only when the breakpoint mode actually changes.\n     * @returns {void}\n     */\n    handleBreakpointResize() {\n        if (!this.getBreakpointWidth()) return;\n\n        const nextState = this.shouldCollapseByBreakpoint();\n\n        if (this._isCollapsedByBreakpoint === nextState) return;\n\n        this._isCollapsedByBreakpoint = nextState;\n        this.applyOverflow();\n    }\n\n    /**\n     * Resolves the configured breakpoint to a pixel width.\n     * @returns {number|null}\n     */\n    getBreakpointWidth() {\n        if (!this.breakpoint) return null;\n\n        const token = this.breakpoint.trim().toLowerCase();\n        const cssValue = getComputedStyle(this).getPropertyValue(`--wje-toolbar-action-breakpoint-${token}`).trim();\n        const namedBreakpoint = ToolbarAction.BREAKPOINTS[token];\n\n        if (cssValue) {\n            const cssNumber = parseFloat(cssValue);\n            if (Number.isFinite(cssNumber)) return cssNumber;\n        }\n\n        if (Number.isFinite(namedBreakpoint)) {\n            return namedBreakpoint;\n        }\n\n        const directNumber = parseFloat(token);\n        return Number.isFinite(directNumber) ? directNumber : null;\n    }\n\n    /**\n     * Updates visible actions and the overflow dropdown.\n     * @returns {void}\n     */\n    applyOverflow() {\n        const actions = this.getActions();\n        const visibleLimit = this.getVisibleLimit();\n        const overflowActions = actions.slice(visibleLimit);\n        const existingDropdown = this.getExistingDropdown();\n        const overflowMenu = this.getOverflowMenu();\n\n        if (this._overflowRetryFrame) {\n            cancelAnimationFrame(this._overflowRetryFrame);\n            this._overflowRetryFrame = null;\n        }\n\n        this.restoreManagedActions(actions);\n        this.restoreManagedOverflowContent();\n\n        if (existingDropdown && overflowActions.length > 0 && !overflowMenu) {\n            this._overflowRetryFrame = requestAnimationFrame(() => {\n                this._overflowRetryFrame = null;\n                this.applyOverflow();\n            });\n\n            return;\n        }\n\n        if (!existingDropdown) {\n            this.moreMenu?.replaceChildren();\n        }\n\n        overflowActions.forEach((action) => {\n            action.hidden = true;\n            action.style.display = 'none';\n            this._managedHiddenActions.add(action);\n        });\n\n        if (overflowMenu && existingDropdown && overflowActions.length > 0 && overflowMenu.children.length > 0) {\n            overflowMenu.append(this.createOverflowDivider());\n        }\n\n        overflowActions.forEach((action) => {\n            overflowMenu?.append(this.createMenuItem(action));\n        });\n\n        if (!existingDropdown && this.moreDropdown) {\n            this.moreDropdown.hidden = overflowActions.length === 0;\n        } else if (existingDropdown && this.moreDropdown) {\n            this.moreDropdown.hidden = true;\n        }\n    }\n\n    /**\n     * Restores buttons hidden by this component.\n     * @param {Array<HTMLElement>} actions Toolbar buttons.\n     */\n    restoreManagedActions(actions = this.getActions()) {\n        actions.forEach((action) => {\n            if (this._managedHiddenActions.has(action)) {\n                action.hidden = false;\n                action.style.removeProperty('display');\n                this._managedHiddenActions.delete(action);\n            }\n        });\n    }\n\n    /**\n     * Removes overflow menu nodes that were previously injected by this component.\n     */\n    restoreManagedOverflowContent() {\n        const dropdown = this.getExistingDropdown();\n\n        if (!dropdown) return;\n\n        const menu = this.getOverflowMenu();\n        if (!menu) return;\n\n        Array.from(menu.children).forEach((child) => {\n            if (this._managedOverflowNodes.has(child)) {\n                child.remove();\n                this._managedOverflowNodes.delete(child);\n            }\n        });\n    }\n\n    /**\n     * Creates a dropdown menu proxy for an overflowed button.\n     * @param {HTMLElement} action The original action button.\n     * @returns {HTMLElement}\n     */\n    createMenuItem(action) {\n        let menuItem = document.createElement('wje-menu-item');\n        menuItem.innerHTML = action.innerHTML;\n\n        if (action.hasAttribute('disabled') || action.getAttribute('aria-disabled') === 'true') {\n            menuItem.setAttribute('disabled', '');\n        }\n\n        menuItem.addEventListener('wje-menu-item:click', (e) => this.handleMenuItemClick(e, action));\n        menuItem.addEventListener('click', (e) => this.handleMenuItemClick(e, action));\n        this._managedOverflowNodes.add(menuItem);\n\n        return menuItem;\n    }\n\n    /**\n     * Creates a divider separating existing dropdown actions from responsive overflow actions.\n     * @returns {HTMLElement}\n     */\n    createOverflowDivider() {\n        const divider = document.createElement('wje-divider');\n        this._managedOverflowNodes.add(divider);\n        return divider;\n    }\n\n    /**\n     * Forwards menu item activation to the original button.\n     * @param {Event} e The menu event.\n     * @param {HTMLElement} action The original action button.\n     */\n    handleMenuItemClick(e, action) {\n        e.preventDefault?.();\n        e.stopPropagation();\n\n        if (!action || action.hasAttribute('disabled') || action.getAttribute('aria-disabled') === 'true') return;\n\n        action.click();\n    }\n\n    /**\n     * Measures action widths while preserving current overflow state.\n     * @returns {{count: number, widths: number[], gap: number, moreWidth: number, getWidthForCount: Function}}\n     */\n    measureActionMetrics() {\n        const actions = this.getActions();\n        const hasExistingDropdown = !!this.getExistingDropdown();\n\n        this.restoreManagedActions(actions);\n\n        const widths = actions.map((action) => action.getBoundingClientRect().width);\n        const style = this.native ? getComputedStyle(this.native) : null;\n        const gap = style ? parseFloat(style.columnGap || style.gap || '0') || 0 : 0;\n        const moreWidth = this.measureMoreWidth();\n\n        this.applyOverflow();\n\n        return {\n            count: actions.length,\n            widths,\n            gap,\n            moreWidth,\n            getWidthForCount: (visibleCount) => {\n                const count = Math.max(0, Math.min(visibleCount, actions.length));\n                const overflowCount = actions.length - count;\n                const visibleWidth = widths.slice(0, count).reduce((sum, width) => sum + width, 0);\n                const visibleGaps = Math.max(count - 1, 0) * gap;\n                const usesDropdown = hasExistingDropdown || overflowCount > 0;\n                const moreGap = count > 0 && usesDropdown ? gap : 0;\n\n                return visibleWidth + visibleGaps + (usesDropdown ? moreWidth + moreGap : 0);\n            },\n        };\n    }\n\n    /**\n     * Measures the overflow dropdown trigger.\n     * @returns {number}\n     */\n    measureMoreWidth() {\n        const dropdown = this.getOverflowDropdown();\n        if (!dropdown) return 48;\n\n        const isInternalDropdown = dropdown === this.moreDropdown;\n        const wasHidden = dropdown.hidden;\n        const previousVisibility = dropdown.style.visibility;\n\n        if (isInternalDropdown && wasHidden) {\n            dropdown.hidden = false;\n            dropdown.style.visibility = 'hidden';\n        }\n\n        const width = dropdown.getBoundingClientRect().width || 48;\n\n        if (isInternalDropdown && wasHidden) {\n            dropdown.hidden = true;\n            dropdown.style.visibility = previousVisibility;\n        }\n\n        if (dropdown === this.moreDropdown && this.getExistingDropdown()) {\n            this.moreDropdown.hidden = true;\n        }\n\n        return width;\n    }\n}\n","import ToolbarAction from './toolbar-action.element.js';\n\nexport default ToolbarAction;\n\nToolbarAction.define('wje-toolbar-action', ToolbarAction);\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.6",
+  "version": "0.4.7",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",