wj-elements 0.4.5 → 0.4.6

package/dist/wje-toolbar.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 Toolbar ]\n*/\n\n:host {\n    width: 100%;\n    height: var(--wje-toolbar-height);\n}\n\n.native-toolbar {\n    background-color: var(--wje-toolbar-background);\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    justify-content: flex-start;\n    border-bottom: 1px solid var(--wje-toolbar-border-color);\n    padding-inline: var(--wje-toolbar-padding-inline);\n    padding-block: var(--wje-toolbar-padding-block);\n    box-shadow: var(--wje-toolbar-shadow);\n}\n\n::slotted {\n    grid-column: span 4;\n}\n\n::slotted([slot='start']) {\n    margin-right: auto;\n}\n\n:host([sticky]) {\n    position: sticky;\n    top: var(--wje-toolbar-top);\n    z-index: 99;\n}\n";
+const styles = "/*\n[ WJ Toolbar ]\n*/\n\n:host {\n    width: 100%;\n    height: var(--wje-toolbar-height);\n}\n\n.native-toolbar {\n    background-color: var(--wje-toolbar-background);\n    display: flex;\n    align-items: center;\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    border-bottom: 1px solid var(--wje-toolbar-border-color);\n    padding-inline: var(--wje-toolbar-padding-inline);\n    padding-block: var(--wje-toolbar-padding-block);\n    box-shadow: var(--wje-toolbar-shadow);\n    gap: var(--wje-toolbar-action-gap);\n    overflow: hidden;\n}\n\n::slotted {\n    grid-column: span 4;\n}\n\n::slotted([slot='start']) {\n    min-width: 0;\n    margin-right: auto;\n}\n\n::slotted([slot='end']) {\n    flex: 0 0 auto;\n}\n\n:host([sticky]) {\n    position: sticky;\n    top: var(--wje-toolbar-top);\n    z-index: 99;\n}\n";
 class Toolbar extends WJElement {
   /**
    * Creates an instance of Toolbar.
@@ -14,6 +14,8 @@ class Toolbar extends WJElement {
      * @type {string}
      */
     __publicField(this, "className", "Toolbar");
+    this._breadcrumbState = /* @__PURE__ */ new WeakMap();
+    this._responsiveFrame = null;
   }
   /**
    * Returns the CSS stylesheet for the component.
@@ -54,8 +56,41 @@ class Toolbar extends WJElement {
     native.appendChild(start);
     native.appendChild(end);
     fragment.appendChild(native);
+    this.native = native;
+    this.startSlot = start;
+    this.endSlot = end;
     return fragment;
   }
+  /**
+   * Initializes responsive layout observers.
+   */
+  afterDraw() {
+    var _a, _b;
+    this.onSlotChange = () => {
+      this._breadcrumbState = /* @__PURE__ */ new WeakMap();
+      this.scheduleResponsiveLayout();
+    };
+    (_a = this.startSlot) == null ? void 0 : _a.addEventListener("slotchange", this.onSlotChange);
+    (_b = this.endSlot) == null ? void 0 : _b.addEventListener("slotchange", this.onSlotChange);
+    if (typeof ResizeObserver === "function") {
+      this._resizeObserver = new ResizeObserver(() => this.scheduleResponsiveLayout());
+      this._resizeObserver.observe(this.native || this);
+    }
+    this.scheduleResponsiveLayout();
+  }
+  /**
+   * Cleans up responsive layout observers.
+   */
+  afterDisconnect() {
+    var _a, _b, _c;
+    (_a = this.startSlot) == null ? void 0 : _a.removeEventListener("slotchange", this.onSlotChange);
+    (_b = this.endSlot) == null ? void 0 : _b.removeEventListener("slotchange", this.onSlotChange);
+    (_c = this._resizeObserver) == null ? void 0 : _c.disconnect();
+    if (this._responsiveFrame) {
+      cancelAnimationFrame(this._responsiveFrame);
+      this._responsiveFrame = null;
+    }
+  }
   /**
    * Sync ARIA attributes on host.
    */
@@ -69,6 +104,229 @@ class Toolbar extends WJElement {
       this.setAriaState({ label });
     }
   }
+  /**
+   * Schedules responsive layout recalculation.
+   */
+  scheduleResponsiveLayout() {
+    if (this._responsiveFrame) return;
+    this._responsiveFrame = requestAnimationFrame(() => {
+      this._responsiveFrame = null;
+      this.updateResponsiveLayout();
+    });
+  }
+  /**
+   * Updates slotted breadcrumbs and actions to fit the toolbar width.
+   * @returns {Promise<void>}
+   */
+  async updateResponsiveLayout() {
+    var _a;
+    const action = this.getToolbarAction();
+    const breadcrumbs = this.getBreadcrumbs();
+    const isSelfManagedAction = this.isSelfManagedAction(action);
+    const isSelfManagedBreadcrumbs = this.isSelfManagedBreadcrumbs(breadcrumbs, action);
+    if (!this.native || !action && !breadcrumbs) return;
+    const toolbarWidth = this.native.getBoundingClientRect().width;
+    if (!toolbarWidth) return;
+    const actionMetrics = action && !isSelfManagedAction ? (_a = action.measureActionMetrics) == null ? void 0 : _a.call(action) : null;
+    const breadcrumbMetrics = breadcrumbs && !isSelfManagedBreadcrumbs ? await this.measureBreadcrumbs(breadcrumbs) : null;
+    let visibleActions = (actionMetrics == null ? void 0 : actionMetrics.count) || 0;
+    let compactBreadcrumbs = false;
+    if (actionMetrics && breadcrumbMetrics) {
+      for (let count = actionMetrics.count; count >= 0; count--) {
+        const actionWidth = actionMetrics.getWidthForCount(count);
+        const availableBreadcrumbWidth = toolbarWidth - actionWidth;
+        if (breadcrumbMetrics.fullWidth <= availableBreadcrumbWidth) {
+          visibleActions = count;
+          compactBreadcrumbs = false;
+          break;
+        }
+        if (breadcrumbMetrics.compactWidth <= availableBreadcrumbWidth) {
+          visibleActions = count;
+          compactBreadcrumbs = true;
+          break;
+        }
+        if (count === 0) {
+          visibleActions = 0;
+          compactBreadcrumbs = true;
+        }
+      }
+    } else if (actionMetrics) {
+      visibleActions = this.getVisibleActionsForWidth(actionMetrics, toolbarWidth);
+    } else if (breadcrumbMetrics) {
+      compactBreadcrumbs = breadcrumbMetrics.fullWidth > toolbarWidth;
+    }
+    if (isSelfManagedAction) {
+      this.clearVisibleActions(action);
+    } else {
+      this.setVisibleActions(action, visibleActions);
+    }
+    if (!isSelfManagedBreadcrumbs) {
+      this.setBreadcrumbCompactState(breadcrumbs, compactBreadcrumbs);
+    }
+  }
+  /**
+   * Measures breadcrumbs in their full state.
+   * @param {HTMLElement} breadcrumbs Breadcrumbs component.
+   * @returns {Promise<{count: number, fullWidth: number, compactWidth: number}>}
+   */
+  async measureBreadcrumbs(breadcrumbs) {
+    var _a;
+    const items = ((_a = breadcrumbs.getBreadcrumbs) == null ? void 0 : _a.call(breadcrumbs)) || [];
+    const count = items.length;
+    if (count === 0) {
+      return { count: 0, fullWidth: 0, compactWidth: 0 };
+    }
+    const cachedState = this.ensureBreadcrumbState(breadcrumbs, count);
+    if (cachedState.count === count && cachedState.fullWidth) {
+      return {
+        count,
+        fullWidth: cachedState.fullWidth,
+        compactWidth: cachedState.compactWidth
+      };
+    }
+    this.setBreadcrumbMaxItems(breadcrumbs, count);
+    await breadcrumbs.updateComplete;
+    await this.nextFrame();
+    const itemWidths = items.map((item) => item.getBoundingClientRect().width);
+    const fullWidth = itemWidths.reduce((sum, width) => sum + width, 0);
+    const state = this.ensureBreadcrumbState(breadcrumbs, count);
+    const before = Math.max(1, breadcrumbs.itemsBeforeCollapse || 1);
+    const after = Math.max(1, breadcrumbs.itemsAfterCollapse || 1);
+    const visibleBefore = itemWidths.slice(0, before).reduce((sum, width) => sum + width, 0);
+    const visibleAfter = itemWidths.slice(Math.max(count - after, before)).reduce((sum, width) => sum + width, 0);
+    const compactWidth = count > state.compactMaxItems ? visibleBefore + visibleAfter + 48 : fullWidth;
+    state.count = count;
+    state.fullWidth = fullWidth;
+    state.compactWidth = compactWidth;
+    return { count, fullWidth, compactWidth };
+  }
+  /**
+   * Stores original breadcrumb settings used as responsive compact target.
+   * @param {HTMLElement} breadcrumbs Breadcrumbs component.
+   * @param {number} count Number of breadcrumb elements currently in the trail.
+   * @returns {{compactMaxItems: number}}
+   */
+  ensureBreadcrumbState(breadcrumbs, count) {
+    if (!this._breadcrumbState.has(breadcrumbs)) {
+      const attr = breadcrumbs.getAttribute("max-items");
+      const parsed = attr === null ? NaN : Number(attr);
+      const compactMaxItems = Number.isFinite(parsed) && parsed > 0 ? parsed : Math.min(3, count);
+      this._breadcrumbState.set(breadcrumbs, {
+        compactMaxItems: Math.max(1, Math.min(compactMaxItems, count))
+      });
+    }
+    return this._breadcrumbState.get(breadcrumbs);
+  }
+  /**
+   * Applies the compact or full breadcrumb state.
+   * @param {HTMLElement|null} breadcrumbs Breadcrumbs component.
+   * @param {boolean} compact Whether compact mode should be used.
+   */
+  setBreadcrumbCompactState(breadcrumbs, compact) {
+    var _a;
+    if (!breadcrumbs) return;
+    const count = ((_a = breadcrumbs.getBreadcrumbs) == null ? void 0 : _a.call(breadcrumbs).length) || 0;
+    const state = this.ensureBreadcrumbState(breadcrumbs, count);
+    const nextMaxItems = compact ? state.compactMaxItems : count;
+    this.setBreadcrumbMaxItems(breadcrumbs, nextMaxItems);
+  }
+  /**
+   * Sets breadcrumb max-items only when it changed.
+   * @param {HTMLElement} breadcrumbs Breadcrumbs component.
+   * @param {number} value The max item count.
+   */
+  setBreadcrumbMaxItems(breadcrumbs, value) {
+    var _a, _b;
+    if (!breadcrumbs || !value) return;
+    if (+breadcrumbs.getAttribute("max-items") === value) {
+      (_a = breadcrumbs.updateCollapse) == null ? void 0 : _a.call(breadcrumbs);
+      return;
+    }
+    breadcrumbs.setAttribute("max-items", value);
+    (_b = breadcrumbs.updateCollapse) == null ? void 0 : _b.call(breadcrumbs);
+  }
+  /**
+   * Finds how many actions fit into the available width.
+   * @param {object} actionMetrics Measured action metrics.
+   * @param {number} width Available width.
+   * @returns {number}
+   */
+  getVisibleActionsForWidth(actionMetrics, width) {
+    for (let count = actionMetrics.count; count >= 0; count--) {
+      if (actionMetrics.getWidthForCount(count) <= width) return count;
+    }
+    return 0;
+  }
+  /**
+   * Applies visible action count.
+   * @param {HTMLElement|null} action Toolbar action component.
+   * @param {number} count Visible action count.
+   */
+  setVisibleActions(action, count) {
+    var _a;
+    if (!action) return;
+    if (+action.getAttribute("visible-items") === count) {
+      return;
+    }
+    action.setAttribute("visible-items", count);
+    (_a = action.applyOverflow) == null ? void 0 : _a.call(action);
+  }
+  /**
+   * Clears toolbar-managed visible action state when actions manage themselves.
+   * @param {HTMLElement|null} action Toolbar action component.
+   */
+  clearVisibleActions(action) {
+    var _a;
+    if (!((_a = action == null ? void 0 : action.hasAttribute) == null ? void 0 : _a.call(action, "visible-items"))) return;
+    action.removeAttribute("visible-items");
+  }
+  /**
+   * Returns the slotted toolbar action.
+   * @returns {HTMLElement|null}
+   */
+  getToolbarAction() {
+    var _a, _b;
+    return ((_b = (_a = this.endSlot) == null ? void 0 : _a.assignedElements) == null ? void 0 : _b.call(_a).find((el) => {
+      var _a2;
+      return ((_a2 = el.tagName) == null ? void 0 : _a2.toLowerCase()) === "wje-toolbar-action";
+    })) || null;
+  }
+  /**
+   * Returns the slotted breadcrumbs.
+   * @returns {HTMLElement|null}
+   */
+  getBreadcrumbs() {
+    var _a, _b;
+    return ((_b = (_a = this.startSlot) == null ? void 0 : _a.assignedElements) == null ? void 0 : _b.call(_a).find((el) => {
+      var _a2;
+      return ((_a2 = el.tagName) == null ? void 0 : _a2.toLowerCase()) === "wje-breadcrumbs";
+    })) || null;
+  }
+  /**
+   * Returns whether toolbar actions are managed by their own breakpoint logic.
+   * @param {HTMLElement|null} action Toolbar action component.
+   * @returns {boolean}
+   */
+  isSelfManagedAction(action) {
+    var _a;
+    return !!((_a = action == null ? void 0 : action.getAttribute) == null ? void 0 : _a.call(action, "breakpoint"));
+  }
+  /**
+   * Returns whether breadcrumb collapse is managed by its own breakpoint logic.
+   * @param {HTMLElement|null} breadcrumbs Breadcrumbs component.
+   * @returns {boolean}
+   */
+  isSelfManagedBreadcrumbs(breadcrumbs, action) {
+    var _a, _b;
+    return !!(breadcrumbs == null ? void 0 : breadcrumbs.getAttribute("breakpoint")) || ((_a = breadcrumbs == null ? void 0 : breadcrumbs.hasAttribute) == null ? void 0 : _a.call(breadcrumbs, "max-items")) && !!((_b = action == null ? void 0 : action.getExistingDropdown) == null ? void 0 : _b.call(action));
+  }
+  /**
+   * Waits for one animation frame.
+   * @returns {Promise<void>}
+   */
+  nextFrame() {
+    return new Promise((resolve) => requestAnimationFrame(resolve));
+  }
 }
 Toolbar.define("wje-toolbar", Toolbar);
 export {

package/dist/wje-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-toolbar.js","sources":["../packages/wje-toolbar/toolbar.element.js","../packages/wje-toolbar/toolbar.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Toolbar` is a custom web component that represents a toolbar.\n * @summary This element represents a toolbar.\n * @documentation https://elements.webjet.sk/components/toolbar\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native toolbar wrapper.\n * @slot start - The start slot for the toolbar.\n * @slot end - The end slot for the toolbar.\n * @cssproperty [--wje-toolbar-background=var(--wje-background)] - Specifies the background color of the toolbar. Accepts any valid CSS color value, such as `hex`, `rgb`, or `CSS variable`.\n * @cssproperty [--wje-toolbar-height=auto] - Defines the height of the toolbar. If set to `auto`, the height adjusts based on the content.\n * @cssproperty [--wje-toolbar-min-height=70px] - Sets the minimum height of the toolbar. Ensures the toolbar maintains a consistent minimum size.\n * @cssproperty [--wje-toolbar-padding-top=1rem] - Specifies the padding at the top of the toolbar. Accepts any valid CSS length unit.\n * @cssproperty [--wje-toolbar-padding-bottom=1rem] - Specifies the padding at the bottom of the toolbar. Helps create spacing between the content and the bottom edge.\n * @cssproperty [--wje-toolbar-padding-inline=1.5rem] - Defines the horizontal padding (left and right) of the toolbar. Creates consistent spacing on both sides.\n * @cssproperty [--wje-toolbar-border-color=var(--wje-border-color)] - Sets the color of the toolbar's border. Accepts any valid CSS color value.\n * @cssproperty [--wje-toolbar-top=0] - Specifies the vertical position of the toolbar relative to its container. Useful for fixed or sticky toolbars.\n * @tag wje-toolbar\n */\n\nexport default class Toolbar extends WJElement {\n    /**\n     * Creates an instance of Toolbar.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Toolbar';\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 [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    /**\n     * Draws the component for the toolbar.\n     * @returns {object} Document fragment\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-toolbar');\n\n        let start = document.createElement('slot');\n        start.setAttribute('name', 'start');\n\n        let end = document.createElement('slot');\n        end.setAttribute('name', 'end');\n\n        native.appendChild(start);\n        native.appendChild(end);\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        if (!this.hasAttribute('role')) {\n            this.setAriaState({ role: 'toolbar' });\n        }\n\n        const ariaLabel = this.getAttribute('aria-label');\n        const label = this.getAttribute('label');\n        if (!ariaLabel && label) {\n            this.setAriaState({ label });\n        }\n    }\n}\n","import Toolbar from './toolbar.element.js';\n\nexport default Toolbar;\n\nToolbar.define('wje-toolbar', Toolbar);\n"],"names":[],"mappings":";;;;;AAuBe,MAAM,gBAAgB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI3C,cAAc;AACV,UAAK;AAOT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,SAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,gBAAgB;AAErC,QAAI,QAAQ,SAAS,cAAc,MAAM;AACzC,UAAM,aAAa,QAAQ,OAAO;AAElC,QAAI,MAAM,SAAS,cAAc,MAAM;AACvC,QAAI,aAAa,QAAQ,KAAK;AAE9B,WAAO,YAAY,KAAK;AACxB,WAAO,YAAY,GAAG;AACtB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AACP,QAAI,CAAC,KAAK,aAAa,MAAM,GAAG;AAC5B,WAAK,aAAa,EAAE,MAAM,UAAS,CAAE;AAAA,IACzC;AAEA,UAAM,YAAY,KAAK,aAAa,YAAY;AAChD,UAAM,QAAQ,KAAK,aAAa,OAAO;AACvC,QAAI,CAAC,aAAa,OAAO;AACrB,WAAK,aAAa,EAAE,OAAO;AAAA,IAC/B;AAAA,EACJ;AACJ;ACjGA,QAAQ,OAAO,eAAe,OAAO;"}
+{"version":3,"file":"wje-toolbar.js","sources":["../packages/wje-toolbar/toolbar.element.js","../packages/wje-toolbar/toolbar.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Toolbar` is a custom web component that represents a toolbar.\n * @summary This element represents a toolbar.\n * @documentation https://elements.webjet.sk/components/toolbar\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native toolbar wrapper.\n * @slot start - The start slot for the toolbar.\n * @slot end - The end slot for the toolbar.\n * @cssproperty [--wje-toolbar-background=var(--wje-background)] - Specifies the background color of the toolbar. Accepts any valid CSS color value, such as `hex`, `rgb`, or `CSS variable`.\n * @cssproperty [--wje-toolbar-height=auto] - Defines the height of the toolbar. If set to `auto`, the height adjusts based on the content.\n * @cssproperty [--wje-toolbar-min-height=70px] - Sets the minimum height of the toolbar. Ensures the toolbar maintains a consistent minimum size.\n * @cssproperty [--wje-toolbar-padding-top=1rem] - Specifies the padding at the top of the toolbar. Accepts any valid CSS length unit.\n * @cssproperty [--wje-toolbar-padding-bottom=1rem] - Specifies the padding at the bottom of the toolbar. Helps create spacing between the content and the bottom edge.\n * @cssproperty [--wje-toolbar-padding-inline=1.5rem] - Defines the horizontal padding (left and right) of the toolbar. Creates consistent spacing on both sides.\n * @cssproperty [--wje-toolbar-border-color=var(--wje-border-color)] - Sets the color of the toolbar's border. Accepts any valid CSS color value.\n * @cssproperty [--wje-toolbar-top=0] - Specifies the vertical position of the toolbar relative to its container. Useful for fixed or sticky toolbars.\n * @tag wje-toolbar\n */\n\nexport default class Toolbar extends WJElement {\n    /**\n     * Creates an instance of Toolbar.\n     */\n    constructor() {\n        super();\n        this._breadcrumbState = new WeakMap();\n        this._responsiveFrame = null;\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Toolbar';\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 [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    /**\n     * Draws the component for the toolbar.\n     * @returns {object} Document fragment\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-toolbar');\n\n        let start = document.createElement('slot');\n        start.setAttribute('name', 'start');\n\n        let end = document.createElement('slot');\n        end.setAttribute('name', 'end');\n\n        native.appendChild(start);\n        native.appendChild(end);\n        fragment.appendChild(native);\n\n        this.native = native;\n        this.startSlot = start;\n        this.endSlot = end;\n\n        return fragment;\n    }\n\n    /**\n     * Initializes responsive layout observers.\n     */\n    afterDraw() {\n        this.onSlotChange = () => {\n            this._breadcrumbState = new WeakMap();\n            this.scheduleResponsiveLayout();\n        };\n        this.startSlot?.addEventListener('slotchange', this.onSlotChange);\n        this.endSlot?.addEventListener('slotchange', this.onSlotChange);\n\n        if (typeof ResizeObserver === 'function') {\n            this._resizeObserver = new ResizeObserver(() => this.scheduleResponsiveLayout());\n            this._resizeObserver.observe(this.native || this);\n        }\n\n        this.scheduleResponsiveLayout();\n    }\n\n    /**\n     * Cleans up responsive layout observers.\n     */\n    afterDisconnect() {\n        this.startSlot?.removeEventListener('slotchange', this.onSlotChange);\n        this.endSlot?.removeEventListener('slotchange', this.onSlotChange);\n        this._resizeObserver?.disconnect();\n\n        if (this._responsiveFrame) {\n            cancelAnimationFrame(this._responsiveFrame);\n            this._responsiveFrame = null;\n        }\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        if (!this.hasAttribute('role')) {\n            this.setAriaState({ role: 'toolbar' });\n        }\n\n        const ariaLabel = this.getAttribute('aria-label');\n        const label = this.getAttribute('label');\n        if (!ariaLabel && label) {\n            this.setAriaState({ label });\n        }\n    }\n\n    /**\n     * Schedules responsive layout recalculation.\n     */\n    scheduleResponsiveLayout() {\n        if (this._responsiveFrame) return;\n\n        this._responsiveFrame = requestAnimationFrame(() => {\n            this._responsiveFrame = null;\n            this.updateResponsiveLayout();\n        });\n    }\n\n    /**\n     * Updates slotted breadcrumbs and actions to fit the toolbar width.\n     * @returns {Promise<void>}\n     */\n    async updateResponsiveLayout() {\n        const action = this.getToolbarAction();\n        const breadcrumbs = this.getBreadcrumbs();\n        const isSelfManagedAction = this.isSelfManagedAction(action);\n        const isSelfManagedBreadcrumbs = this.isSelfManagedBreadcrumbs(breadcrumbs, action);\n\n        if (!this.native || (!action && !breadcrumbs)) return;\n\n        const toolbarWidth = this.native.getBoundingClientRect().width;\n        if (!toolbarWidth) return;\n\n        const actionMetrics = action && !isSelfManagedAction ? action.measureActionMetrics?.() : null;\n        const breadcrumbMetrics =\n            breadcrumbs && !isSelfManagedBreadcrumbs\n                ? await this.measureBreadcrumbs(breadcrumbs)\n                : null;\n\n        let visibleActions = actionMetrics?.count || 0;\n        let compactBreadcrumbs = false;\n\n        if (actionMetrics && breadcrumbMetrics) {\n            for (let count = actionMetrics.count; count >= 0; count--) {\n                const actionWidth = actionMetrics.getWidthForCount(count);\n                const availableBreadcrumbWidth = toolbarWidth - actionWidth;\n\n                if (breadcrumbMetrics.fullWidth <= availableBreadcrumbWidth) {\n                    visibleActions = count;\n                    compactBreadcrumbs = false;\n                    break;\n                }\n\n                if (breadcrumbMetrics.compactWidth <= availableBreadcrumbWidth) {\n                    visibleActions = count;\n                    compactBreadcrumbs = true;\n                    break;\n                }\n\n                if (count === 0) {\n                    visibleActions = 0;\n                    compactBreadcrumbs = true;\n                }\n            }\n        } else if (actionMetrics) {\n            visibleActions = this.getVisibleActionsForWidth(actionMetrics, toolbarWidth);\n        } else if (breadcrumbMetrics) {\n            compactBreadcrumbs = breadcrumbMetrics.fullWidth > toolbarWidth;\n        }\n\n        if (isSelfManagedAction) {\n            this.clearVisibleActions(action);\n        } else {\n            this.setVisibleActions(action, visibleActions);\n        }\n\n        if (!isSelfManagedBreadcrumbs) {\n            this.setBreadcrumbCompactState(breadcrumbs, compactBreadcrumbs);\n        }\n    }\n\n    /**\n     * Measures breadcrumbs in their full state.\n     * @param {HTMLElement} breadcrumbs Breadcrumbs component.\n     * @returns {Promise<{count: number, fullWidth: number, compactWidth: number}>}\n     */\n    async measureBreadcrumbs(breadcrumbs) {\n        const items = breadcrumbs.getBreadcrumbs?.() || [];\n        const count = items.length;\n\n        if (count === 0) {\n            return { count: 0, fullWidth: 0, compactWidth: 0 };\n        }\n\n        const cachedState = this.ensureBreadcrumbState(breadcrumbs, count);\n        if (cachedState.count === count && cachedState.fullWidth) {\n            return {\n                count,\n                fullWidth: cachedState.fullWidth,\n                compactWidth: cachedState.compactWidth,\n            };\n        }\n\n        this.setBreadcrumbMaxItems(breadcrumbs, count);\n\n        await breadcrumbs.updateComplete;\n        await this.nextFrame();\n\n        const itemWidths = items.map((item) => item.getBoundingClientRect().width);\n        const fullWidth = itemWidths.reduce((sum, width) => sum + width, 0);\n        const state = this.ensureBreadcrumbState(breadcrumbs, count);\n        const before = Math.max(1, breadcrumbs.itemsBeforeCollapse || 1);\n        const after = Math.max(1, breadcrumbs.itemsAfterCollapse || 1);\n        const visibleBefore = itemWidths.slice(0, before).reduce((sum, width) => sum + width, 0);\n        const visibleAfter = itemWidths.slice(Math.max(count - after, before)).reduce((sum, width) => sum + width, 0);\n        const compactWidth = count > state.compactMaxItems\n            ? visibleBefore + visibleAfter + 48\n            : fullWidth;\n\n        state.count = count;\n        state.fullWidth = fullWidth;\n        state.compactWidth = compactWidth;\n\n        return { count, fullWidth, compactWidth };\n    }\n\n    /**\n     * Stores original breadcrumb settings used as responsive compact target.\n     * @param {HTMLElement} breadcrumbs Breadcrumbs component.\n     * @param {number} count Number of breadcrumb elements currently in the trail.\n     * @returns {{compactMaxItems: number}}\n     */\n    ensureBreadcrumbState(breadcrumbs, count) {\n        if (!this._breadcrumbState.has(breadcrumbs)) {\n            const attr = breadcrumbs.getAttribute('max-items');\n            const parsed = attr === null ? NaN : Number(attr);\n            const compactMaxItems = Number.isFinite(parsed) && parsed > 0 ? parsed : Math.min(3, count);\n\n            this._breadcrumbState.set(breadcrumbs, {\n                compactMaxItems: Math.max(1, Math.min(compactMaxItems, count)),\n            });\n        }\n\n        return this._breadcrumbState.get(breadcrumbs);\n    }\n\n    /**\n     * Applies the compact or full breadcrumb state.\n     * @param {HTMLElement|null} breadcrumbs Breadcrumbs component.\n     * @param {boolean} compact Whether compact mode should be used.\n     */\n    setBreadcrumbCompactState(breadcrumbs, compact) {\n        if (!breadcrumbs) return;\n\n        const count = breadcrumbs.getBreadcrumbs?.().length || 0;\n        const state = this.ensureBreadcrumbState(breadcrumbs, count);\n        const nextMaxItems = compact ? state.compactMaxItems : count;\n\n        this.setBreadcrumbMaxItems(breadcrumbs, nextMaxItems);\n    }\n\n    /**\n     * Sets breadcrumb max-items only when it changed.\n     * @param {HTMLElement} breadcrumbs Breadcrumbs component.\n     * @param {number} value The max item count.\n     */\n    setBreadcrumbMaxItems(breadcrumbs, value) {\n        if (!breadcrumbs || !value) return;\n\n        if (+breadcrumbs.getAttribute('max-items') === value) {\n            breadcrumbs.updateCollapse?.();\n            return;\n        }\n\n        breadcrumbs.setAttribute('max-items', value);\n        breadcrumbs.updateCollapse?.();\n    }\n\n    /**\n     * Finds how many actions fit into the available width.\n     * @param {object} actionMetrics Measured action metrics.\n     * @param {number} width Available width.\n     * @returns {number}\n     */\n    getVisibleActionsForWidth(actionMetrics, width) {\n        for (let count = actionMetrics.count; count >= 0; count--) {\n            if (actionMetrics.getWidthForCount(count) <= width) return count;\n        }\n\n        return 0;\n    }\n\n    /**\n     * Applies visible action count.\n     * @param {HTMLElement|null} action Toolbar action component.\n     * @param {number} count Visible action count.\n     */\n    setVisibleActions(action, count) {\n        if (!action) return;\n\n        if (+action.getAttribute('visible-items') === count) {\n            return;\n        }\n\n        action.setAttribute('visible-items', count);\n        action.applyOverflow?.();\n    }\n\n    /**\n     * Clears toolbar-managed visible action state when actions manage themselves.\n     * @param {HTMLElement|null} action Toolbar action component.\n     */\n    clearVisibleActions(action) {\n        if (!action?.hasAttribute?.('visible-items')) return;\n\n        action.removeAttribute('visible-items');\n    }\n\n    /**\n     * Returns the slotted toolbar action.\n     * @returns {HTMLElement|null}\n     */\n    getToolbarAction() {\n        return this.endSlot?.assignedElements?.().find((el) => el.tagName?.toLowerCase() === 'wje-toolbar-action') || null;\n    }\n\n    /**\n     * Returns the slotted breadcrumbs.\n     * @returns {HTMLElement|null}\n     */\n    getBreadcrumbs() {\n        return this.startSlot?.assignedElements?.().find((el) => el.tagName?.toLowerCase() === 'wje-breadcrumbs') || null;\n    }\n\n    /**\n     * Returns whether toolbar actions are managed by their own breakpoint logic.\n     * @param {HTMLElement|null} action Toolbar action component.\n     * @returns {boolean}\n     */\n    isSelfManagedAction(action) {\n        return !!action?.getAttribute?.('breakpoint');\n    }\n\n    /**\n     * Returns whether breadcrumb collapse is managed by its own breakpoint logic.\n     * @param {HTMLElement|null} breadcrumbs Breadcrumbs component.\n     * @returns {boolean}\n     */\n    isSelfManagedBreadcrumbs(breadcrumbs, action) {\n        return (\n            !!breadcrumbs?.getAttribute('breakpoint') ||\n            (breadcrumbs?.hasAttribute?.('max-items') && !!action?.getExistingDropdown?.())\n        );\n    }\n\n    /**\n     * Waits for one animation frame.\n     * @returns {Promise<void>}\n     */\n    nextFrame() {\n        return new Promise((resolve) => requestAnimationFrame(resolve));\n    }\n}\n","import Toolbar from './toolbar.element.js';\n\nexport default Toolbar;\n\nToolbar.define('wje-toolbar', Toolbar);\n"],"names":["_a"],"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.5",
+  "version": "0.4.6",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",