le-kit 0.2.1 → 0.2.3

package/dist/collection/components/le-navigation/le-navigation.js

@@ -7,6 +7,9 @@ import { classnames, generateId } from "../../utils/utils";
  * - Supports hierarchical items via `children`.
  * - Supports persisted expansion via `open` on items.
  *
+ * @slot hamburger-trigger - Custom trigger contents for the hamburger button
+ * @slot more-trigger - Custom trigger contents for the "More" button
+ *
  * @cmsEditable true
  * @cmsCategory Navigation
  */
@@ -32,6 +35,15 @@ export class LeNavigation {
      * - hamburger: turns the whole nav into a hamburger popover
      */
     overflowMode = 'more';
+    /**
+     * Minimum number of visible top-level items required to use the "More" overflow.
+     * If fewer would be visible, the navigation falls back to hamburger.
+     */
+    minVisibleItemsForMore = 2;
+    /**
+     * Alignment of the hamburger trigger within the row.
+     */
+    hamburgerAlign = 'start';
     /**
      * Active url for automatic selection.
      */
@@ -67,14 +79,30 @@ export class LeNavigation {
     openState = {};
     overflowIds = [];
     hamburgerActive = false;
+    fallbackHamburger = false;
     submenuQueries = {};
     navContainerEl;
     measureEl;
     measureMoreEl;
     topItemEls = new Map();
     popoverRefs = new Map();
+    moreTriggerEl;
+    hamburgerPopoverEl;
+    morePopoverEl;
     resizeObserver;
     instanceId = generateId('le-nav');
+    partFromOptionPart(base, part) {
+        const raw = (part ?? '').trim();
+        if (!raw)
+            return base;
+        const tokens = raw
+            .split(/\s+/)
+            .map(t => t.replace(/[^a-zA-Z0-9_-]/g, ''))
+            .filter(Boolean);
+        if (tokens.length === 0)
+            return base;
+        return [base, ...tokens.map(t => `${base}-${t}`)].join(' ');
+    }
     handleLayoutInputsChange() {
         this.scheduleOverflowRecalc();
     }
@@ -229,10 +257,12 @@ export class LeNavigation {
     computeOverflow() {
         // Only applies to horizontal, non-wrapping navs.
         if (this.orientation !== 'horizontal' || this.wrap) {
-            if (this.overflowIds.length)
+            if (!this.overflowIds || this.overflowIds.length)
                 this.overflowIds = [];
             if (this.hamburgerActive)
                 this.hamburgerActive = false;
+            if (this.fallbackHamburger)
+                this.fallbackHamburger = false;
             return;
         }
         const container = this.navContainerEl;
@@ -247,12 +277,34 @@ export class LeNavigation {
             if (shouldHamburger !== this.hamburgerActive) {
                 this.hamburgerActive = shouldHamburger;
             }
-            if (this.overflowIds.length)
+            if (!this.overflowIds || this.overflowIds.length)
                 this.overflowIds = [];
+            if (this.fallbackHamburger)
+                this.fallbackHamburger = false;
             return;
         }
         // overflowMode === 'more'
-        this.computeOverflowMoreByWrap(availableWidth);
+        if (this.hamburgerActive)
+            this.hamburgerActive = false;
+        const computedOverflow = this.computeOverflowMoreByWrap(availableWidth);
+        if (!computedOverflow)
+            return;
+        // Fallback to hamburger when "More" would leave too few items visible
+        // or when the trigger itself cannot fit the row.
+        const visibleCount = this.parsedItems.length - computedOverflow.length;
+        const moreWidth = this.moreTriggerEl?.getBoundingClientRect().width ?? 0;
+        const minVisible = Math.max(0, Number(this.minVisibleItemsForMore) || 0);
+        const shouldFallback = (computedOverflow.length > 0 && visibleCount < minVisible) ||
+            (moreWidth > 0 && moreWidth > availableWidth);
+        if (shouldFallback !== this.fallbackHamburger) {
+            this.fallbackHamburger = shouldFallback;
+        }
+        const nextOverflow = shouldFallback ? [] : computedOverflow;
+        const same = nextOverflow.length === this.overflowIds?.length &&
+            nextOverflow.every((v, i) => v === this.overflowIds[i]);
+        if (!same) {
+            this.overflowIds = nextOverflow;
+        }
     }
     computeOverflowMoreByWrap(availableWidth) {
         const container = this.navContainerEl;
@@ -260,9 +312,17 @@ export class LeNavigation {
         const measureMore = this.measureMoreEl;
         const items = this.parsedItems;
         if (!container || !measure)
-            return;
+            return null;
         // Ensure measurement container matches visible container width.
         measure.style.width = `${availableWidth}px`;
+        // Keep the measured "More" width aligned with the real trigger width (supports slotted content).
+        const realMoreWidth = this.moreTriggerEl?.getBoundingClientRect().width;
+        if (measureMore && realMoreWidth && realMoreWidth > 0) {
+            const btn = measureMore.querySelector('button');
+            if (btn) {
+                btn.style.width = `${realMoreWidth}px`;
+            }
+        }
         const allIds = this.getTopLevelIds(items);
         const itemEls = allIds
             .map(id => measure.querySelector(`[data-nav-id="${CSS.escape(id)}"]`))
@@ -275,10 +335,7 @@ export class LeNavigation {
             measureMore.style.display = 'none';
         }
         if (itemEls.length === 0) {
-            if (!this.overflowIds || this.overflowIds.length) {
-                this.overflowIds = [];
-            }
-            return;
+            return [];
         }
         const firstRowTop = Math.min(...itemEls.map(el => el.offsetTop));
         const overflowSet = new Set();
@@ -291,10 +348,7 @@ export class LeNavigation {
                 overflowSet.add(id);
         });
         if (overflowSet.size === 0) {
-            if (!this.overflowIds || this.overflowIds.length) {
-                this.overflowIds = [];
-            }
-            return;
+            return [];
         }
         // Pass 2: show "More" and iteratively move items into overflow until "More" fits on row 1.
         if (measureMore) {
@@ -325,11 +379,7 @@ export class LeNavigation {
             overflowSet.add(lastId);
         }
         const overflowIds = allIds.filter(id => overflowSet.has(id));
-        const same = overflowIds.length === this.overflowIds.length &&
-            overflowIds.every((v, i) => v === this.overflowIds[i]);
-        if (!same) {
-            this.overflowIds = overflowIds;
-        }
+        return overflowIds;
     }
     renderHorizontalMeasureItem(item, index) {
         const id = this.getItemId(item, String(index));
@@ -342,9 +392,9 @@ export class LeNavigation {
         if (!hasChildren) {
             return (h("div", { class: "h-item", ref: setRef, "data-nav-id": id }, h("span", { class: "h-link" }, item.iconStart && (h("span", { class: "nav-icon", "aria-hidden": "true" }, item.iconStart)), h("span", { class: "h-label" }, item.label), item.iconEnd && (h("span", { class: "nav-icon nav-icon-end", "aria-hidden": "true" }, item.iconEnd)))));
         }
-        return (h("div", { class: "h-item", ref: setRef, "data-nav-id": id }, h("span", { class: "h-trigger" }, h("span", { class: "h-link" }, item.iconStart && (h("span", { class: "nav-icon", "aria-hidden": "true" }, item.iconStart)), h("span", { class: "h-label" }, item.label)), h("span", { class: "h-submenu-toggle", "aria-hidden": "true" }, h("span", { class: "nav-chevron" }, "\u25BC")))));
+        return (h("div", { class: "h-item", ref: setRef, "data-nav-id": id }, h("span", { class: "h-trigger" }, h("span", { class: "h-link" }, item.iconStart && (h("span", { class: "nav-icon", "aria-hidden": "true" }, item.iconStart)), h("span", { class: "h-label" }, item.label)), h("span", { class: "h-submenu-toggle", "aria-hidden": "true" }, h("le-icon", { name: "chevron-down" })))));
     }
-    renderVerticalList(items, { depth, pathPrefix, autoOpenIds, searchable, searchQuery, searchPlaceholder, emptyText, submenuId, }) {
+    renderVerticalList(items, { depth, pathPrefix, autoOpenIds, searchable, searchQuery, searchPlaceholder, emptyText, submenuId, closePopover, }) {
         const query = searchQuery ?? '';
         const openFromSearch = autoOpenIds ?? new Set();
         const filtered = query ? this.filterTree(items, query, pathPrefix, openFromSearch) : items;
@@ -359,21 +409,28 @@ export class LeNavigation {
             const attrs = TagType === 'a'
                 ? { href: item.href, role: 'treeitem' }
                 : { type: 'button', role: 'treeitem' };
+            const itemPart = this.partFromOptionPart('item', item.part);
             return (h("li", { class: classnames('nav-node', {
                     'disabled': item.disabled,
                     'selected': item.selected || (this.activeUrl && item.href === this.activeUrl),
                     open,
                     'has-children': hasChildren,
-                }), key: id, role: "none" }, h("div", { class: "nav-row", style: { paddingLeft } }, hasChildren ? (h("button", { type: "button", class: "nav-toggle", "aria-label": open ? 'Collapse' : 'Expand', "aria-expanded": open ? 'true' : 'false', onClick: (e) => this.handleToggle(e, item, id), disabled: item.disabled }, h("le-icon", { name: "chevron-down", class: "nav-chevron", "aria-hidden": "true" }))) : (h("span", { class: "nav-toggle-spacer", "aria-hidden": "true" })), h(TagType, { class: "nav-item", ...attrs, "aria-disabled": item.disabled ? 'true' : undefined, onClick: (e) => {
+                }), key: id, role: "none" }, h("div", { class: "nav-row", style: { paddingLeft } }, hasChildren ? (h("button", { type: "button", class: "nav-toggle", "aria-label": open ? 'Collapse' : 'Expand', "aria-expanded": open ? 'true' : 'false', onClick: (e) => this.handleToggle(e, item, id), disabled: item.disabled }, h("le-icon", { name: "chevron-down", class: "nav-chevron", "aria-hidden": "true" }))) : (h("span", { class: "nav-toggle-spacer", "aria-hidden": "true" })), h(TagType, { class: "nav-item", part: itemPart, ...attrs, "aria-disabled": item.disabled ? 'true' : undefined, onClick: (e) => {
                     // For buttons, also toggle if this is a purely structural node.
                     this.handleItemSelect(e, item, id);
                     if (!item.href && hasChildren && !item.disabled) {
                         this.handleToggle(e, item, id);
+                        return;
+                    }
+                    if (!item.disabled && closePopover) {
+                        closePopover();
                     }
                 } }, item.iconStart && (h("span", { class: "nav-icon", "aria-hidden": "true" }, item.iconStart)), h("span", { class: "nav-text" }, h("span", { class: "nav-label" }, item.label), item.description && (h("span", { class: "nav-description" }, item.description))), item.iconEnd && (h("span", { class: "nav-icon nav-icon-end", "aria-hidden": "true" }, item.iconEnd)))), hasChildren && (h("le-collapse", { class: "nav-children", closed: !open, noFading: true, role: "group" }, this.renderVerticalList(children, {
                 depth: depth + 1,
                 pathPrefix: path,
                 autoOpenIds: openFromSearch,
+                submenuId,
+                closePopover,
             })))));
         })))));
     }
@@ -386,25 +443,28 @@ export class LeNavigation {
             const attrs = TagType === 'a'
                 ? { href: item.href, role: 'menuitem' }
                 : { type: 'button', role: 'menuitem' };
+            const itemPart = this.partFromOptionPart('item', item.part);
             return (h("div", { class: "h-item" }, h(TagType, { class: classnames('h-link', {
                     disabled: item.disabled,
                     selected: item.selected || (this.activeUrl && item.href === this.activeUrl),
-                }), ...attrs, "aria-disabled": item.disabled ? 'true' : undefined, onClick: (e) => this.handleItemSelect(e, item, id) }, item.iconStart && (h("span", { class: "nav-icon", "aria-hidden": "true" }, item.iconStart)), h("span", { class: "h-label" }, item.label), item.iconEnd && (h("span", { class: "nav-icon nav-icon-end", "aria-hidden": "true" }, item.iconEnd)))));
+                }), part: itemPart, ...attrs, "aria-disabled": item.disabled ? 'true' : undefined, onClick: (e) => this.handleItemSelect(e, item, id) }, item.iconStart && (h("span", { class: "nav-icon", "aria-hidden": "true" }, item.iconStart)), h("span", { class: "h-label" }, item.label), item.iconEnd && (h("span", { class: "nav-icon nav-icon-end", "aria-hidden": "true" }, item.iconEnd)))));
         }
         const submenuId = id;
+        const itemPart = this.partFromOptionPart('item', item.part);
         return (h("div", { class: "h-item" }, h("le-popover", { ref: el => {
                 if (el)
                     this.popoverRefs.set(submenuId, el);
             }, mode: "default", showClose: false, closeOnClickOutside: true, closeOnEscape: true, position: "bottom", align: "start", minWidth: "240px" }, h("div", { slot: "trigger", class: classnames('h-trigger', {
                 disabled: item.disabled,
                 selected: item.selected || (this.activeUrl && item.href === this.activeUrl),
-            }), role: "menuitem", "aria-disabled": item.disabled ? 'true' : undefined, onClick: (e) => {
+            }), part: itemPart, role: "menuitem", "aria-disabled": item.disabled ? 'true' : undefined, onClick: (e) => {
                 // Don’t let le-popover auto-toggle from its internal wrapper.
                 e.stopPropagation();
                 if (item.disabled)
                     return;
                 if (item.href) {
                     this.handleItemSelect(e, item, id);
+                    this.popoverRefs.get(submenuId)?.hide();
                 }
                 else {
                     this.popoverRefs.get(submenuId)?.toggle();
@@ -412,18 +472,12 @@ export class LeNavigation {
             } }, item.href ? (h("a", { class: "h-link", href: item.href, onClick: (e) => {
                 e.stopPropagation();
                 this.handleItemSelect(e, item, id);
-            } }, item.iconStart && (h("span", { class: "nav-icon", "aria-hidden": "true" }, item.iconStart)), h("span", { class: "h-label" }, item.label))) : (h("button", { type: "button", class: "h-link", onClick: (e) => {
+            } }, item.iconStart && (h("span", { class: "nav-icon", "aria-hidden": "true" }, item.iconStart)), h("span", { class: "h-label" }, item.label), h("span", { class: "nav-chevron", "aria-hidden": "true" }, h("le-icon", { name: "chevron-down" })))) : (h("button", { type: "button", class: "h-link", onClick: (e) => {
                 e.stopPropagation();
                 if (item.disabled)
                     return;
                 this.popoverRefs.get(submenuId)?.toggle();
-            } }, item.iconStart && (h("span", { class: "nav-icon", "aria-hidden": "true" }, item.iconStart)), h("span", { class: "h-label" }, item.label))), h("button", { type: "button", class: "h-submenu-toggle", "aria-label": "Open submenu", onClick: (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                if (item.disabled)
-                    return;
-                this.popoverRefs.get(submenuId)?.toggle();
-            } }, h("span", { class: "nav-chevron", "aria-hidden": "true" }, h("le-icon", { name: "chevron-down" })))), h("div", { class: "popover-menu" }, this.renderVerticalList(children, {
+            } }, item.iconStart && (h("span", { class: "nav-icon", "aria-hidden": "true" }, item.iconStart)), h("span", { class: "h-label" }, item.label), h("span", { class: "nav-chevron", "aria-hidden": "true" }, h("le-icon", { name: "chevron-down" }))))), h("div", { class: "popover-menu" }, this.renderVerticalList(children, {
             depth: 0,
             pathPrefix: String(index),
             searchable: this.submenuSearchable,
@@ -431,6 +485,7 @@ export class LeNavigation {
             searchPlaceholder: this.searchPlaceholder,
             emptyText: this.emptyText,
             submenuId,
+            closePopover: () => this.popoverRefs.get(submenuId)?.hide(),
         })))));
     }
     renderHorizontal() {
@@ -443,24 +498,35 @@ export class LeNavigation {
                 overflowItems.push(item);
             }
         });
-        // Hamburger mode: show a single trigger if anything overflows.
-        if (!this.wrap && this.overflowMode === 'hamburger' && this.hamburgerActive) {
+        const showHamburger = !this.wrap &&
+            ((this.overflowMode === 'hamburger' && this.hamburgerActive) ||
+                (this.overflowMode === 'more' && this.fallbackHamburger));
+        // Hamburger mode: show a single trigger if anything overflows (or when forced for "more").
+        if (showHamburger) {
             return (h("div", { class: "nav-horizontal-shell" }, h("div", { class: "nav-horizontal-measure", "aria-hidden": "true", ref: el => {
                     this.measureEl = el;
                 } }, items.map((item, index) => this.renderHorizontalMeasureItem(item, index)), h("div", { class: "h-item", ref: el => {
                     this.measureMoreEl = el;
-                } }, h("button", { type: "button", class: "overflow-trigger" }, "More"))), h("div", { class: "nav-horizontal", ref: el => {
+                } }, h("button", { type: "button", class: "overflow-trigger" }, "More"))), h("div", { class: classnames('nav-horizontal', {
+                    'hamburger-align-end': this.hamburgerAlign === 'end',
+                }), ref: el => {
                     this.navContainerEl = el;
                     this.setupResizeObserver();
                     this.observeContainer(this.navContainerEl);
-                } }, h("le-popover", { mode: "default", showClose: false, closeOnClickOutside: true, closeOnEscape: true, position: "bottom", align: "end", minWidth: "260px" }, h("button", { slot: "trigger", type: "button", class: "overflow-trigger", "aria-label": "Open menu" }, "\u2630"), h("div", { class: "popover-menu" }, this.renderVerticalList(items, { depth: 0, pathPrefix: '' }))))));
+                } }, h("le-popover", { ref: el => {
+                    this.hamburgerPopoverEl = el;
+                }, mode: "default", showClose: false, closeOnClickOutside: true, closeOnEscape: true, position: "bottom", align: "end", minWidth: "260px" }, h("button", { slot: "trigger", type: "button", class: "overflow-trigger", part: "hamburger-trigger", "aria-label": "Open menu" }, h("slot", { name: "hamburger-trigger" }, h("le-icon", { name: "hamburger" }))), h("div", { class: "popover-menu" }, this.renderVerticalList(items, {
+                depth: 0,
+                pathPrefix: '',
+                closePopover: () => this.hamburgerPopoverEl?.hide(),
+            }))))));
         }
         const showMore = !this.wrap && this.overflowMode === 'more' && overflowItems.length > 0;
         return (h("div", { class: "nav-horizontal-shell", role: "menubar" }, h("div", { class: "nav-horizontal-measure", "aria-hidden": "true", ref: el => {
                 this.measureEl = el;
             } }, items.map((item, index) => this.renderHorizontalMeasureItem(item, index)), h("div", { class: "h-item", ref: el => {
                 this.measureMoreEl = el;
-            } }, h("button", { type: "button", class: "overflow-trigger" }, "More"))), h("div", { class: classnames('nav-horizontal', {
+            } }, h("button", { type: "button", class: "overflow-trigger" }, h("le-icon", { name: "ellipsis-horizontal" })))), h("div", { class: classnames('nav-horizontal', {
                 wrap: this.wrap,
                 nowrap: !this.wrap,
             }), ref: el => {
@@ -476,7 +542,16 @@ export class LeNavigation {
         }), h("div", { class: classnames('more-trigger-wrap', {
                 'is-visible': showMore,
                 'is-measure': !showMore,
-            }) }, h("le-popover", { mode: "default", position: "bottom", align: "end", minWidth: "260px", showClose: false }, h("button", { slot: "trigger", type: "button", class: "overflow-trigger", "aria-label": "More" }, "More"), h("div", { class: "popover-menu" }, this.renderVerticalList(overflowItems, { depth: 0, pathPrefix: '' })))))));
+            }) }, h("le-popover", { ref: el => {
+                this.morePopoverEl = el;
+            }, mode: "default", position: "bottom", align: "end", minWidth: "260px", showClose: false }, h("button", { slot: "trigger", type: "button", class: "overflow-trigger", part: "more-trigger", "aria-label": "More", ref: el => {
+                if (el)
+                    this.moreTriggerEl = el;
+            } }, h("slot", { name: "more-trigger" }, h("le-icon", { name: "ellipsis-horizontal" }))), h("div", { class: "popover-menu" }, this.renderVerticalList(overflowItems, {
+            depth: 0,
+            pathPrefix: '',
+            closePopover: () => this.morePopoverEl?.hide(),
+        })))))));
     }
     render() {
         const items = this.parsedItems;
@@ -592,6 +667,46 @@ export class LeNavigation {
                 "attribute": "overflow-mode",
                 "defaultValue": "'more'"
             },
+            "minVisibleItemsForMore": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum number of visible top-level items required to use the \"More\" overflow.\nIf fewer would be visible, the navigation falls back to hamburger."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-visible-items-for-more",
+                "defaultValue": "2"
+            },
+            "hamburgerAlign": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'end'",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alignment of the hamburger trigger within the row."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "hamburger-align",
+                "defaultValue": "'start'"
+            },
             "activeUrl": {
                 "type": "string",
                 "mutable": false,
@@ -700,6 +815,7 @@ export class LeNavigation {
             "openState": {},
             "overflowIds": {},
             "hamburgerActive": {},
+            "fallbackHamburger": {},
             "submenuQueries": {}
         };
     }