@raintonic/formaui 0.4.0 → 0.9.2

package/fesm2022/raintonic-formaui-components-sidebar-nav-menu.mjs

@@ -0,0 +1,525 @@
+import * as i0 from '@angular/core';
+import { input, output, signal, effect, Component, Injectable, inject, ChangeDetectorRef, model, computed, ChangeDetectionStrategy } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { FuiIconComponent } from '@raintonic/formaui/components/icon';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FuiIntlBase } from '@raintonic/formaui/core';
+import { FuiInputDirective } from '@raintonic/formaui/components/input';
+import { FuiFormFieldComponent, FuiPrefixDirective } from '@raintonic/formaui/components/form-field';
+
+/**
+ * Recursive submenu component for rendering nested menu items.
+ *
+ * Used internally by FuiSidebarNavMenuComponent. Renders a flat list
+ * of items and recurses via <sidebar-nav-submenu> in the template
+ * when an item has children.
+ *
+ * Keyboard navigation follows WAI-ARIA menu patterns:
+ * - ArrowDown / ArrowUp: navigate between siblings
+ * - ArrowRight: expand submenu
+ * - ArrowLeft: collapse submenu / move focus to parent
+ * - Enter / Space: activate item
+ * - Home / End: first / last item
+ */
+class SidebarNavSubmenuComponent {
+    /** Menu items to render (IDs already assigned by parent) */
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Accessible label for this submenu group */
+    submenuLabel = input('', ...(ngDevMode ? [{ debugName: "submenuLabel" }] : /* istanbul ignore next */ []));
+    /** Whether this is the root level (applies root-level styles) */
+    isRoot = input(false, ...(ngDevMode ? [{ debugName: "isRoot" }] : /* istanbul ignore next */ []));
+    /** Nesting depth (0 = root). Used to compute aria-level on section headers. */
+    depth = input(0, ...(ngDevMode ? [{ debugName: "depth" }] : /* istanbul ignore next */ []));
+    /** Emitted when any clickable item is activated */
+    itemClick = output();
+    // Track expanded state per item id (Set of string IDs)
+    _expanded = signal(new Set(), ...(ngDevMode ? [{ debugName: "_expanded" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Initialize expanded states from item data.
+        // When the items input changes (new reference), manual user toggle state is
+        // intentionally reset — auto-expansion from item.expanded takes priority.
+        // Every `expanded: true` in the data is honoured (filtering and URL-based
+        // auto-expansion may mark several branches at once); the accordion rule
+        // only applies to user interaction (see toggleExpand / ArrowRight).
+        effect(() => {
+            const expanded = new Set();
+            const walk = (list) => {
+                for (const it of list) {
+                    if (it.expanded && it.items?.length) {
+                        expanded.add(it.id);
+                    }
+                    if (it.items)
+                        walk(it.items);
+                }
+            };
+            walk(this.items());
+            this._expanded.set(expanded);
+        });
+    }
+    // ─── Public helpers (used in template) ───────────────────
+    /** @internal Whether the item has child submenu items */
+    hasChildren(item) {
+        return !!(item.items && item.items.length > 0);
+    }
+    /** @internal Whether the item's submenu is currently expanded */
+    isExpanded(item) {
+        if (!this.hasChildren(item))
+            return false;
+        return this._expanded().has(item.id);
+    }
+    /** @internal Toggle submenu open/closed */
+    toggleExpand(event, item) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (item.disabled)
+            return;
+        const wasExpanded = this._expanded().has(item.id);
+        this._expanded.update((s) => {
+            const next = new Set(s);
+            const id = item.id;
+            if (wasExpanded) {
+                // Collapse this item
+                next.delete(id);
+            }
+            else {
+                // Expand this item
+                if (this.isRoot()) {
+                    // Accordion: close any other root items first
+                    next.clear();
+                }
+                next.add(id);
+            }
+            return next;
+        });
+        if (item.command) {
+            item.command(event);
+        }
+        this.itemClick.emit(item);
+    }
+    /** @internal Handle click on a leaf (non-parent) item */
+    onLeafClick(event, item) {
+        if (item.disabled) {
+            event.preventDefault();
+            return;
+        }
+        if (item.command) {
+            item.command(event);
+        }
+        this.itemClick.emit(item);
+    }
+    /** @internal Keyboard event handler */
+    onKeydown(event, item) {
+        if (item.disabled)
+            return;
+        const itemEl = event.currentTarget;
+        if (!itemEl)
+            return;
+        const listEl = itemEl.closest('ul');
+        if (!listEl)
+            return;
+        // Collect all enabled items at this level
+        const items = Array.from(listEl.querySelectorAll(':scope > li > .sidebar-nav-menu__item'));
+        const currentIndex = items.indexOf(itemEl);
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this._focusItemAt(items, currentIndex + 1, 1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this._focusItemAt(items, currentIndex - 1, -1);
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                if (this.hasChildren(item) && !this.isExpanded(item)) {
+                    this._expanded.update((s) => {
+                        const next = new Set(s);
+                        if (this.isRoot()) {
+                            // Accordion: close any other root items
+                            next.clear();
+                        }
+                        next.add(item.id);
+                        return next;
+                    });
+                }
+                break;
+            case 'ArrowLeft':
+                if (this.hasChildren(item) && this.isExpanded(item)) {
+                    event.preventDefault();
+                    this._expanded.update((s) => {
+                        const next = new Set(s);
+                        next.delete(item.id);
+                        return next;
+                    });
+                }
+                if (this._hasParentSubmenu(itemEl)) {
+                    event.preventDefault();
+                    this._focusParent(itemEl);
+                }
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (this.hasChildren(item)) {
+                    this.toggleExpand(event, item);
+                }
+                else {
+                    itemEl.click();
+                }
+                break;
+            case 'Home':
+                event.preventDefault();
+                this._focusItemAt(items, 0, 1);
+                break;
+            case 'End':
+                event.preventDefault();
+                this._focusItemAt(items, items.length - 1, -1);
+                break;
+        }
+    }
+    // ─── Private helpers ─────────────────────────────────────
+    _focusItemAt(items, start, step) {
+        let i = start;
+        while (i >= 0 && i < items.length) {
+            if (!items[i].classList.contains('sidebar-nav-menu__item--disabled')) {
+                items[i].focus();
+                return;
+            }
+            i += step;
+        }
+    }
+    _hasParentSubmenu(itemEl) {
+        return !!itemEl.closest('fui-sidebar-nav-submenu')?.parentElement?.closest('li');
+    }
+    _focusParent(itemEl) {
+        const parentSubmenu = itemEl.closest('fui-sidebar-nav-submenu')?.parentElement?.closest('li');
+        if (parentSubmenu) {
+            const parentTrigger = parentSubmenu.querySelector('.sidebar-nav-menu__item--parent');
+            parentTrigger?.focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SidebarNavSubmenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SidebarNavSubmenuComponent, isStandalone: true, selector: "fui-sidebar-nav-submenu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, submenuLabel: { classPropertyName: "submenuLabel", publicName: "submenuLabel", isSignal: true, isRequired: false, transformFunction: null }, isRoot: { classPropertyName: "isRoot", publicName: "isRoot", isSignal: true, isRequired: false, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<ul\r\n  class=\"sidebar-nav-submenu\"\r\n  role=\"group\"\r\n  [class.sidebar-nav-submenu--root]=\"isRoot()\"\r\n  [attr.aria-label]=\"submenuLabel()\"\r\n>\r\n  @for (item of items(); track item.id; let idx = $index) {\r\n    @if (item.visible !== false) {\r\n      @if (item.separator) {\r\n        <li class=\"sidebar-nav-menu__separator\" role=\"separator\"></li>\r\n      } @else if (item.sectionHeader) {\r\n        <li class=\"sidebar-nav-menu__section-header\" role=\"heading\" [attr.aria-level]=\"depth() + 2\">\r\n          <span class=\"sidebar-nav-menu__section-header-label\">{{ item.label }}</span>\r\n        </li>\r\n      } @else {\r\n        <li\r\n          class=\"sidebar-nav-menu__item-wrapper\"\r\n          role=\"none\"\r\n          [class.sidebar-nav-menu__item-wrapper--root]=\"isRoot()\"\r\n          [class.sidebar-nav-menu__item-wrapper--expanded]=\"hasChildren(item) && isExpanded(item)\"\r\n        >\r\n          @if (hasChildren(item)) {\r\n            <!-- Parent item with submenu -->\r\n            <button\r\n              class=\"sidebar-nav-menu__item sidebar-nav-menu__item--parent\"\r\n              type=\"button\"\r\n              [class.sidebar-nav-menu__item--disabled]=\"item.disabled\"\r\n              [class.sidebar-nav-menu__item--expanded]=\"isExpanded(item)\"\r\n              [id]=\"item.id + '_trigger'\"\r\n              [attr.aria-haspopup]=\"true\"\r\n              [attr.aria-expanded]=\"isExpanded(item)\"\r\n              [disabled]=\"item.disabled\"\r\n              (click)=\"toggleExpand($event, item)\"\r\n              (keydown)=\"onKeydown($event, item)\"\r\n            >\r\n              <span class=\"sidebar-nav-menu__item-content\">\r\n                @if (item.icon) {\r\n                  <fui-icon\r\n                    class=\"sidebar-nav-menu__item-icon\"\r\n                    [name]=\"item.icon\"\r\n                    size=\"md\"\r\n                    aria-hidden=\"true\"\r\n                  ></fui-icon>\r\n                }\r\n                <span class=\"sidebar-nav-menu__item-label\">{{ item.label }}</span>\r\n              </span>\r\n              <fui-icon\r\n                class=\"sidebar-nav-menu__item-chevron\"\r\n                name=\"caret-right\"\r\n                [class.sidebar-nav-menu__item-chevron--expanded]=\"isExpanded(item)\"\r\n                size=\"sm\"\r\n                aria-hidden=\"true\"\r\n              ></fui-icon>\r\n            </button>\r\n\r\n            <!-- Submenu content with left border -->\r\n            @if (isExpanded(item)) {\r\n              <div\r\n                class=\"sidebar-nav-submenu__inline\"\r\n                animate.enter=\"sidebar-nav-submenu__inline--enter\"\r\n                animate.leave=\"sidebar-nav-submenu__inline--leave\"\r\n              >\r\n                <div class=\"sidebar-nav-submenu__border\"></div>\r\n                <fui-sidebar-nav-submenu\r\n                  [items]=\"item.items!\"\r\n                  [submenuLabel]=\"item.label || ''\"\r\n                  [isRoot]=\"false\"\r\n                  [depth]=\"depth() + 1\"\r\n                  (itemClick)=\"itemClick.emit($event)\"\r\n                />\r\n              </div>\r\n            }\r\n          } @else {\r\n            <!-- Leaf item -->\r\n            @if (item.routerLink) {\r\n              <a\r\n                class=\"sidebar-nav-menu__item\"\r\n                routerLinkActive=\"sidebar-nav-menu__item--active\"\r\n                [class.sidebar-nav-menu__item--disabled]=\"item.disabled\"\r\n                [attr.tabindex]=\"item.disabled ? '-1' : '0'\"\r\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n                [routerLink]=\"item.routerLink\"\r\n                [queryParams]=\"item.queryParams || undefined\"\r\n                [fragment]=\"item.fragment || undefined\"\r\n                [target]=\"item.target\"\r\n                [title]=\"item.title\"\r\n                (click)=\"onLeafClick($event, item)\"\r\n                (keydown)=\"onKeydown($event, item)\"\r\n              >\r\n                <span class=\"sidebar-nav-menu__item-content\">\r\n                  @if (item.icon) {\r\n                    <fui-icon\r\n                      class=\"sidebar-nav-menu__item-icon\"\r\n                      [name]=\"item.icon\"\r\n                      size=\"md\"\r\n                      aria-hidden=\"true\"\r\n                    ></fui-icon>\r\n                  }\r\n                  <span class=\"sidebar-nav-menu__item-label\">{{ item.label }}</span>\r\n                </span>\r\n              </a>\r\n            } @else {\r\n              <button\r\n                class=\"sidebar-nav-menu__item\"\r\n                type=\"button\"\r\n                [class.sidebar-nav-menu__item--disabled]=\"item.disabled\"\r\n                [attr.tabindex]=\"item.disabled ? '-1' : '0'\"\r\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n                [title]=\"item.title\"\r\n                [disabled]=\"item.disabled\"\r\n                (click)=\"onLeafClick($event, item)\"\r\n                (keydown)=\"onKeydown($event, item)\"\r\n              >\r\n                <span class=\"sidebar-nav-menu__item-content\">\r\n                  @if (item.icon) {\r\n                    <fui-icon\r\n                      class=\"sidebar-nav-menu__item-icon\"\r\n                      [name]=\"item.icon\"\r\n                      size=\"md\"\r\n                      aria-hidden=\"true\"\r\n                    ></fui-icon>\r\n                  }\r\n                  <span class=\"sidebar-nav-menu__item-label\">{{ item.label }}</span>\r\n                </span>\r\n              </button>\r\n            }\r\n          }\r\n        </li>\r\n      }\r\n    }\r\n  }\r\n</ul>\r\n", styles: ["@charset \"UTF-8\";@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}:host{--fui-snm-bg: var(--fui-bg-subtle);--fui-snm-item-color: var(--fui-text-secondary);--fui-snm-item-bg-hover: var(--fui-bg-muted);--fui-snm-item-bg-active: var(--fui-primary-10);--fui-snm-item-color-disabled: var(--fui-neutral-60);--fui-snm-separator-color: var(--fui-neutral-40);--fui-snm-section-header-color: var(--fui-neutral-60);--fui-snm-submenu-border-color: var(--fui-neutral-40);--fui-snm-item-radius: var(--fui-radius-sm);--fui-snm-item-gap: var(--fui-spacing-1);--fui-snm-item-padding-y: var(--fui-spacing-3);--fui-snm-item-padding-x: var(--fui-spacing-4);--fui-snm-submenu-indent: var(--fui-spacing-7);--fui-snm-section-header-padding-y: var(--fui-spacing-4);--fui-snm-section-header-padding-x: var(--fui-spacing-4);--fui-snm-submenu-border-width: 1px;--fui-snm-font-family: var(--fui-font-sans);--fui-snm-font-size: var(--fui-text-sm);--fui-snm-font-weight: var(--fui-weight-regular);--fui-snm-font-weight-parent: var(--fui-weight-regular);--fui-snm-section-header-font-size: var(--fui-text-xs);--fui-snm-section-header-font-weight: var(--fui-weight-regular);--fui-snm-section-header-letter-spacing: .04em;--fui-snm-icon-color: var(--fui-text-secondary);--fui-snm-transition-duration: var(--fui-duration-fast);--fui-snm-transition-easing: var(--fui-ease-out);display:flex;flex-direction:column;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;background-color:var(--fui-snm-bg);box-sizing:border-box}.fui-sidebar-nav-menu__header{flex-shrink:0}.fui-sidebar-nav-menu__body{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--fui-spacing-4);padding-right:var(--fui-spacing-0)}.fui-sidebar-nav-menu__footer{flex-shrink:0}.sidebar-nav-submenu{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;gap:var(--fui-spacing-1);padding-left:var(--fui-spacing-2)}.sidebar-nav-submenu--root{padding-right:var(--fui-spacing-4)}.sidebar-nav-menu__section-header{list-style:none;padding:var(--fui-snm-section-header-padding-y) var(--fui-snm-section-header-padding-x)}.sidebar-nav-menu__section-header-label{display:block;font-family:var(--fui-snm-font-family);font-size:var(--fui-snm-section-header-font-size);font-weight:var(--fui-snm-section-header-font-weight);letter-spacing:var(--fui-snm-section-header-letter-spacing);text-transform:uppercase;color:var(--fui-snm-section-header-color);-webkit-user-select:none;user-select:none}.sidebar-nav-menu__item-wrapper{display:flex;flex-direction:column;position:relative}.sidebar-nav-menu__item-wrapper--root>.sidebar-nav-menu__item{font-size:var(--fui-text-base);color:var(--fui-text-primary)}.sidebar-nav-menu__item-wrapper--root>.sidebar-nav-menu__item .sidebar-nav-menu__item-icon{--fui-icon-size: var(--fui-icon-lg)}.sidebar-nav-menu__item{display:flex;align-items:center;justify-content:space-between;gap:var(--fui-snm-item-gap);padding:var(--fui-snm-item-padding-y) var(--fui-snm-item-padding-x);cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;color:var(--fui-snm-item-color);background:transparent;border:none;border-radius:var(--fui-snm-item-radius);font-family:var(--fui-snm-font-family);font-size:var(--fui-snm-font-size);font-weight:var(--fui-snm-font-weight);text-align:left;width:100%;box-sizing:border-box;outline:none;transition-property:background-color;transition-duration:var(--fui-snm-transition-duration);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.sidebar-nav-menu__item:hover:not(.sidebar-nav-menu__item--disabled){background-color:var(--fui-snm-item-bg-hover)}.sidebar-nav-menu__item:focus-visible{outline:var(--fui-state-focus-ring-width) solid var(--fui-primary-50);outline-offset:-2px}.sidebar-nav-menu__item--disabled{color:var(--fui-snm-item-color-disabled);opacity:.5;pointer-events:none;cursor:default}.sidebar-nav-menu__item--parent{font-weight:var(--fui-snm-font-weight-parent)}.sidebar-nav-menu__item[href]{color:var(--fui-snm-item-color);text-decoration:none}.sidebar-nav-menu__item--active{background-color:var(--fui-snm-item-bg-active)}.sidebar-nav-menu__item-content{display:flex;align-items:center;gap:var(--fui-spacing-3);min-width:0;flex:1}.sidebar-nav-menu__item-icon{flex-shrink:0;color:var(--fui-snm-icon-color);display:inline-flex;align-items:center;justify-content:center}.sidebar-nav-menu__item-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-nav-menu__item-chevron{flex-shrink:0;color:var(--fui-snm-item-color);display:inline-flex;align-items:center;justify-content:center;transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.sidebar-nav-menu__item-chevron--expanded{transform:rotate(90deg)}.sidebar-nav-menu__separator{height:1px;background-color:var(--fui-snm-separator-color);list-style:none}.sidebar-nav-submenu__inline{position:relative;display:flex;flex-direction:row;overflow:hidden;will-change:transform,opacity}.sidebar-nav-submenu__inline .sidebar-nav-submenu{flex:1;padding-left:var(--fui-snm-submenu-indent);padding-top:var(--fui-spacing-1)}.sidebar-nav-submenu__inline--enter{animation:sidebar-nav-submenu-enter var(--fui-duration-moderate) var(--fui-ease-out) both}.sidebar-nav-submenu__inline--leave{animation:sidebar-nav-submenu-leave var(--fui-duration-fast) var(--fui-ease-out) both}@keyframes sidebar-nav-submenu-enter{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes sidebar-nav-submenu-leave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}.sidebar-nav-submenu__border{position:relative;flex-shrink:0;width:0;margin-left:calc(var(--fui-snm-submenu-indent) - var(--fui-snm-submenu-border-width));border-bottom:var(--fui-border-width-sm) solid var(--fui-snm-submenu-border-color)}.sidebar-nav-submenu__border:before{content:\"\";position:absolute;top:0;bottom:var(--fui-spacing-2);left:0;width:1px;background-color:var(--fui-snm-submenu-border-color);border-radius:var(--fui-radius-xs)}@media(prefers-reduced-motion:reduce){.sidebar-nav-menu__item,.sidebar-nav-menu__item-chevron,.sidebar-nav-submenu__inline--enter,.sidebar-nav-submenu__inline--leave{transition:none;animation:none!important}}\n"], dependencies: [{ kind: "component", type: SidebarNavSubmenuComponent, selector: "fui-sidebar-nav-submenu", inputs: ["items", "submenuLabel", "isRoot", "depth"], outputs: ["itemClick"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SidebarNavSubmenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-sidebar-nav-submenu', standalone: true, imports: [RouterLink, RouterLinkActive, FuiIconComponent], template: "<ul\r\n  class=\"sidebar-nav-submenu\"\r\n  role=\"group\"\r\n  [class.sidebar-nav-submenu--root]=\"isRoot()\"\r\n  [attr.aria-label]=\"submenuLabel()\"\r\n>\r\n  @for (item of items(); track item.id; let idx = $index) {\r\n    @if (item.visible !== false) {\r\n      @if (item.separator) {\r\n        <li class=\"sidebar-nav-menu__separator\" role=\"separator\"></li>\r\n      } @else if (item.sectionHeader) {\r\n        <li class=\"sidebar-nav-menu__section-header\" role=\"heading\" [attr.aria-level]=\"depth() + 2\">\r\n          <span class=\"sidebar-nav-menu__section-header-label\">{{ item.label }}</span>\r\n        </li>\r\n      } @else {\r\n        <li\r\n          class=\"sidebar-nav-menu__item-wrapper\"\r\n          role=\"none\"\r\n          [class.sidebar-nav-menu__item-wrapper--root]=\"isRoot()\"\r\n          [class.sidebar-nav-menu__item-wrapper--expanded]=\"hasChildren(item) && isExpanded(item)\"\r\n        >\r\n          @if (hasChildren(item)) {\r\n            <!-- Parent item with submenu -->\r\n            <button\r\n              class=\"sidebar-nav-menu__item sidebar-nav-menu__item--parent\"\r\n              type=\"button\"\r\n              [class.sidebar-nav-menu__item--disabled]=\"item.disabled\"\r\n              [class.sidebar-nav-menu__item--expanded]=\"isExpanded(item)\"\r\n              [id]=\"item.id + '_trigger'\"\r\n              [attr.aria-haspopup]=\"true\"\r\n              [attr.aria-expanded]=\"isExpanded(item)\"\r\n              [disabled]=\"item.disabled\"\r\n              (click)=\"toggleExpand($event, item)\"\r\n              (keydown)=\"onKeydown($event, item)\"\r\n            >\r\n              <span class=\"sidebar-nav-menu__item-content\">\r\n                @if (item.icon) {\r\n                  <fui-icon\r\n                    class=\"sidebar-nav-menu__item-icon\"\r\n                    [name]=\"item.icon\"\r\n                    size=\"md\"\r\n                    aria-hidden=\"true\"\r\n                  ></fui-icon>\r\n                }\r\n                <span class=\"sidebar-nav-menu__item-label\">{{ item.label }}</span>\r\n              </span>\r\n              <fui-icon\r\n                class=\"sidebar-nav-menu__item-chevron\"\r\n                name=\"caret-right\"\r\n                [class.sidebar-nav-menu__item-chevron--expanded]=\"isExpanded(item)\"\r\n                size=\"sm\"\r\n                aria-hidden=\"true\"\r\n              ></fui-icon>\r\n            </button>\r\n\r\n            <!-- Submenu content with left border -->\r\n            @if (isExpanded(item)) {\r\n              <div\r\n                class=\"sidebar-nav-submenu__inline\"\r\n                animate.enter=\"sidebar-nav-submenu__inline--enter\"\r\n                animate.leave=\"sidebar-nav-submenu__inline--leave\"\r\n              >\r\n                <div class=\"sidebar-nav-submenu__border\"></div>\r\n                <fui-sidebar-nav-submenu\r\n                  [items]=\"item.items!\"\r\n                  [submenuLabel]=\"item.label || ''\"\r\n                  [isRoot]=\"false\"\r\n                  [depth]=\"depth() + 1\"\r\n                  (itemClick)=\"itemClick.emit($event)\"\r\n                />\r\n              </div>\r\n            }\r\n          } @else {\r\n            <!-- Leaf item -->\r\n            @if (item.routerLink) {\r\n              <a\r\n                class=\"sidebar-nav-menu__item\"\r\n                routerLinkActive=\"sidebar-nav-menu__item--active\"\r\n                [class.sidebar-nav-menu__item--disabled]=\"item.disabled\"\r\n                [attr.tabindex]=\"item.disabled ? '-1' : '0'\"\r\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n                [routerLink]=\"item.routerLink\"\r\n                [queryParams]=\"item.queryParams || undefined\"\r\n                [fragment]=\"item.fragment || undefined\"\r\n                [target]=\"item.target\"\r\n                [title]=\"item.title\"\r\n                (click)=\"onLeafClick($event, item)\"\r\n                (keydown)=\"onKeydown($event, item)\"\r\n              >\r\n                <span class=\"sidebar-nav-menu__item-content\">\r\n                  @if (item.icon) {\r\n                    <fui-icon\r\n                      class=\"sidebar-nav-menu__item-icon\"\r\n                      [name]=\"item.icon\"\r\n                      size=\"md\"\r\n                      aria-hidden=\"true\"\r\n                    ></fui-icon>\r\n                  }\r\n                  <span class=\"sidebar-nav-menu__item-label\">{{ item.label }}</span>\r\n                </span>\r\n              </a>\r\n            } @else {\r\n              <button\r\n                class=\"sidebar-nav-menu__item\"\r\n                type=\"button\"\r\n                [class.sidebar-nav-menu__item--disabled]=\"item.disabled\"\r\n                [attr.tabindex]=\"item.disabled ? '-1' : '0'\"\r\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n                [title]=\"item.title\"\r\n                [disabled]=\"item.disabled\"\r\n                (click)=\"onLeafClick($event, item)\"\r\n                (keydown)=\"onKeydown($event, item)\"\r\n              >\r\n                <span class=\"sidebar-nav-menu__item-content\">\r\n                  @if (item.icon) {\r\n                    <fui-icon\r\n                      class=\"sidebar-nav-menu__item-icon\"\r\n                      [name]=\"item.icon\"\r\n                      size=\"md\"\r\n                      aria-hidden=\"true\"\r\n                    ></fui-icon>\r\n                  }\r\n                  <span class=\"sidebar-nav-menu__item-label\">{{ item.label }}</span>\r\n                </span>\r\n              </button>\r\n            }\r\n          }\r\n        </li>\r\n      }\r\n    }\r\n  }\r\n</ul>\r\n", styles: ["@charset \"UTF-8\";@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}:host{--fui-snm-bg: var(--fui-bg-subtle);--fui-snm-item-color: var(--fui-text-secondary);--fui-snm-item-bg-hover: var(--fui-bg-muted);--fui-snm-item-bg-active: var(--fui-primary-10);--fui-snm-item-color-disabled: var(--fui-neutral-60);--fui-snm-separator-color: var(--fui-neutral-40);--fui-snm-section-header-color: var(--fui-neutral-60);--fui-snm-submenu-border-color: var(--fui-neutral-40);--fui-snm-item-radius: var(--fui-radius-sm);--fui-snm-item-gap: var(--fui-spacing-1);--fui-snm-item-padding-y: var(--fui-spacing-3);--fui-snm-item-padding-x: var(--fui-spacing-4);--fui-snm-submenu-indent: var(--fui-spacing-7);--fui-snm-section-header-padding-y: var(--fui-spacing-4);--fui-snm-section-header-padding-x: var(--fui-spacing-4);--fui-snm-submenu-border-width: 1px;--fui-snm-font-family: var(--fui-font-sans);--fui-snm-font-size: var(--fui-text-sm);--fui-snm-font-weight: var(--fui-weight-regular);--fui-snm-font-weight-parent: var(--fui-weight-regular);--fui-snm-section-header-font-size: var(--fui-text-xs);--fui-snm-section-header-font-weight: var(--fui-weight-regular);--fui-snm-section-header-letter-spacing: .04em;--fui-snm-icon-color: var(--fui-text-secondary);--fui-snm-transition-duration: var(--fui-duration-fast);--fui-snm-transition-easing: var(--fui-ease-out);display:flex;flex-direction:column;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;background-color:var(--fui-snm-bg);box-sizing:border-box}.fui-sidebar-nav-menu__header{flex-shrink:0}.fui-sidebar-nav-menu__body{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--fui-spacing-4);padding-right:var(--fui-spacing-0)}.fui-sidebar-nav-menu__footer{flex-shrink:0}.sidebar-nav-submenu{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;gap:var(--fui-spacing-1);padding-left:var(--fui-spacing-2)}.sidebar-nav-submenu--root{padding-right:var(--fui-spacing-4)}.sidebar-nav-menu__section-header{list-style:none;padding:var(--fui-snm-section-header-padding-y) var(--fui-snm-section-header-padding-x)}.sidebar-nav-menu__section-header-label{display:block;font-family:var(--fui-snm-font-family);font-size:var(--fui-snm-section-header-font-size);font-weight:var(--fui-snm-section-header-font-weight);letter-spacing:var(--fui-snm-section-header-letter-spacing);text-transform:uppercase;color:var(--fui-snm-section-header-color);-webkit-user-select:none;user-select:none}.sidebar-nav-menu__item-wrapper{display:flex;flex-direction:column;position:relative}.sidebar-nav-menu__item-wrapper--root>.sidebar-nav-menu__item{font-size:var(--fui-text-base);color:var(--fui-text-primary)}.sidebar-nav-menu__item-wrapper--root>.sidebar-nav-menu__item .sidebar-nav-menu__item-icon{--fui-icon-size: var(--fui-icon-lg)}.sidebar-nav-menu__item{display:flex;align-items:center;justify-content:space-between;gap:var(--fui-snm-item-gap);padding:var(--fui-snm-item-padding-y) var(--fui-snm-item-padding-x);cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;color:var(--fui-snm-item-color);background:transparent;border:none;border-radius:var(--fui-snm-item-radius);font-family:var(--fui-snm-font-family);font-size:var(--fui-snm-font-size);font-weight:var(--fui-snm-font-weight);text-align:left;width:100%;box-sizing:border-box;outline:none;transition-property:background-color;transition-duration:var(--fui-snm-transition-duration);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.sidebar-nav-menu__item:hover:not(.sidebar-nav-menu__item--disabled){background-color:var(--fui-snm-item-bg-hover)}.sidebar-nav-menu__item:focus-visible{outline:var(--fui-state-focus-ring-width) solid var(--fui-primary-50);outline-offset:-2px}.sidebar-nav-menu__item--disabled{color:var(--fui-snm-item-color-disabled);opacity:.5;pointer-events:none;cursor:default}.sidebar-nav-menu__item--parent{font-weight:var(--fui-snm-font-weight-parent)}.sidebar-nav-menu__item[href]{color:var(--fui-snm-item-color);text-decoration:none}.sidebar-nav-menu__item--active{background-color:var(--fui-snm-item-bg-active)}.sidebar-nav-menu__item-content{display:flex;align-items:center;gap:var(--fui-spacing-3);min-width:0;flex:1}.sidebar-nav-menu__item-icon{flex-shrink:0;color:var(--fui-snm-icon-color);display:inline-flex;align-items:center;justify-content:center}.sidebar-nav-menu__item-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-nav-menu__item-chevron{flex-shrink:0;color:var(--fui-snm-item-color);display:inline-flex;align-items:center;justify-content:center;transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.sidebar-nav-menu__item-chevron--expanded{transform:rotate(90deg)}.sidebar-nav-menu__separator{height:1px;background-color:var(--fui-snm-separator-color);list-style:none}.sidebar-nav-submenu__inline{position:relative;display:flex;flex-direction:row;overflow:hidden;will-change:transform,opacity}.sidebar-nav-submenu__inline .sidebar-nav-submenu{flex:1;padding-left:var(--fui-snm-submenu-indent);padding-top:var(--fui-spacing-1)}.sidebar-nav-submenu__inline--enter{animation:sidebar-nav-submenu-enter var(--fui-duration-moderate) var(--fui-ease-out) both}.sidebar-nav-submenu__inline--leave{animation:sidebar-nav-submenu-leave var(--fui-duration-fast) var(--fui-ease-out) both}@keyframes sidebar-nav-submenu-enter{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes sidebar-nav-submenu-leave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}.sidebar-nav-submenu__border{position:relative;flex-shrink:0;width:0;margin-left:calc(var(--fui-snm-submenu-indent) - var(--fui-snm-submenu-border-width));border-bottom:var(--fui-border-width-sm) solid var(--fui-snm-submenu-border-color)}.sidebar-nav-submenu__border:before{content:\"\";position:absolute;top:0;bottom:var(--fui-spacing-2);left:0;width:1px;background-color:var(--fui-snm-submenu-border-color);border-radius:var(--fui-radius-xs)}@media(prefers-reduced-motion:reduce){.sidebar-nav-menu__item,.sidebar-nav-menu__item-chevron,.sidebar-nav-submenu__inline--enter,.sidebar-nav-submenu__inline--leave{transition:none;animation:none!important}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], submenuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submenuLabel", required: false }] }], isRoot: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRoot", required: false }] }], depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+
+class FuiSidebarNavSearchIntl extends FuiIntlBase {
+    /** Placeholder text for the search input. */
+    searchPlaceholder = 'Cerca';
+    /** aria-label for the search input. */
+    searchInputAriaLabel = 'Filtra';
+    /** aria-label for the clear-search button. */
+    clearSearchAriaLabel = 'Pulisci';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSidebarNavSearchIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSidebarNavSearchIntl, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSidebarNavSearchIntl, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * # FuiSidebarNavSearchComponent
+ *
+ * A standalone search input component designed to be placed inside the sidebar
+ * navigation menu. Emits the current filter string so the parent component can
+ * reactively filter menu items.
+ *
+ * ## Features
+ * - Search input with magnifying-glass icon
+ * - Clear button that appears when a query is entered
+ * - Configurable placeholder text (falls back to `FuiSidebarNavSearchIntl` default)
+ * - Two-way binding via `filterString` model
+ * - Aria labels via `FuiSidebarNavSearchIntl` (overridable via DI)
+ *
+ * ## Usage
+ *
+ * ```html
+ * <fui-sidebar-nav-search
+ *   [(filterString)]="myFilter"
+ *   placeholder="Search…"
+ * />
+ * ```
+ */
+class FuiSidebarNavSearchComponent {
+    intl = inject(FuiSidebarNavSearchIntl);
+    _cdr = inject(ChangeDetectorRef);
+    constructor() {
+        this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => {
+            this._cdr.markForCheck();
+        });
+    }
+    /**
+     * The current filter string. Two-way bindable.
+     */
+    filterString = model('', ...(ngDevMode ? [{ debugName: "filterString" }] : /* istanbul ignore next */ []));
+    /**
+     * Placeholder text for the search input.
+     * Falls back to the Intl default when not set.
+     */
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Resolved placeholder: input override -> Intl default. */
+    resolvedPlaceholder = computed(() => this.placeholder() ?? this.intl.searchPlaceholder, ...(ngDevMode ? [{ debugName: "resolvedPlaceholder" }] : /* istanbul ignore next */ []));
+    /** Resolved search-input aria-label: Intl default. */
+    resolvedSearchInputAriaLabel = computed(() => this.intl.searchInputAriaLabel, ...(ngDevMode ? [{ debugName: "resolvedSearchInputAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Resolved clear-button aria-label: Intl default. */
+    resolvedClearSearchAriaLabel = computed(() => this.intl.clearSearchAriaLabel, ...(ngDevMode ? [{ debugName: "resolvedClearSearchAriaLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSidebarNavSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: FuiSidebarNavSearchComponent, isStandalone: true, selector: "fui-sidebar-nav-search", inputs: { filterString: { classPropertyName: "filterString", publicName: "filterString", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterString: "filterStringChange" }, ngImport: i0, template: `
+    <fui-form-field>
+      <fui-icon fuiPrefix name="magnifying-glass" color="var(--fui-text-disabled)" size="sm"></fui-icon>
+      <input
+        fuiInput
+        #searchInput
+        class="fui-sidebar-nav-search__input"
+        type="search"
+        [placeholder]="resolvedPlaceholder()"
+        [value]="filterString()"
+        (input)="filterString.set(searchInput.value)"
+        [attr.aria-label]="resolvedSearchInputAriaLabel()"
+      />
+    </fui-form-field>
+  `, isInline: true, styles: [":host{display:block;flex-shrink:0;padding:var(--fui-spacing-4) var(--fui-spacing-6);padding-bottom:0;--fui-bg-subtle: var(--fui-bg-default)}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "directive", type: FuiInputDirective, selector: "input[fuiInput], textarea[fuiInput], select[fuiInput]", inputs: ["type", "placeholder", "readonly", "maxlength", "minlength", "pattern", "errorStateMatcher", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: FuiFormFieldComponent, selector: "fui-form-field", inputs: ["appearance", "hideRequiredMarker", "hideSubscript"] }, { kind: "directive", type: FuiPrefixDirective, selector: "[fuiPrefix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSidebarNavSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-sidebar-nav-search', standalone: true, imports: [FuiIconComponent, FuiInputDirective, FuiFormFieldComponent, FuiPrefixDirective], template: `
+    <fui-form-field>
+      <fui-icon fuiPrefix name="magnifying-glass" color="var(--fui-text-disabled)" size="sm"></fui-icon>
+      <input
+        fuiInput
+        #searchInput
+        class="fui-sidebar-nav-search__input"
+        type="search"
+        [placeholder]="resolvedPlaceholder()"
+        [value]="filterString()"
+        (input)="filterString.set(searchInput.value)"
+        [attr.aria-label]="resolvedSearchInputAriaLabel()"
+      />
+    </fui-form-field>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;flex-shrink:0;padding:var(--fui-spacing-4) var(--fui-spacing-6);padding-bottom:0;--fui-bg-subtle: var(--fui-bg-default)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { filterString: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterString", required: false }] }, { type: i0.Output, args: ["filterStringChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
+
+/**
+ * # FuiSidebarNavMenuComponent
+ *
+ * A standalone sidebar navigation menu component with recursive,
+ * multi-level submenus. Inspired by PrimeNG's TieredMenu model
+ * with a minimal, structural approach.
+ *
+ * ## Features
+ * - Unlimited nesting depth via recursive submenu template
+ * - Inline expand/collapse submenus
+ * - Built-in search input with clear button
+ * - Routing integration via `routerLink` with automatic active detection
+ * - Keyboard navigation (Arrow keys, Enter/Space, Home/End)
+ * - Full ARIA support (`role="navigation"`, `aria-expanded`, `aria-haspopup`)
+ *
+ * ## Usage
+ *
+ * ```html
+ * <fui-sidebar-nav-menu
+ *   [items]="menuItems"
+ *   [(filterString)]="myFilter"
+ *   (itemClick)="onMenuItemClick($event)"
+ * />
+ * ```
+ *
+ * ```typescript
+ * import { FuiSidebarNavMenuComponent, MenuItem } from '@raintonic/formaui/components/sidebar-nav-menu';
+ *
+ * @Component({
+ *   standalone: true,
+ *   imports: [FuiSidebarNavMenuComponent],
+ *   template: `...`,
+ * })
+ * export class MyLayout {
+ *   menuItems: MenuItem[] = [
+ *     { label: 'Dashboard', icon: 'house', routerLink: '/dashboard' },
+ *     {
+ *       label: 'Products',
+ *       icon: 'package',
+ *       items: [
+ *         { label: 'List', routerLink: '/products' },
+ *         { label: 'Categories', routerLink: '/categories' },
+ *       ],
+ *     },
+ *     { separator: true },
+ *     { label: 'Logout', command: () => this.logout() },
+ *   ];
+ *
+ *   onMenuItemClick(item: MenuItem): void {
+ *     console.log('Menu item:', item.label);
+ *   }
+ * }
+ * ```
+ */
+class FuiSidebarNavMenuComponent {
+    /**
+     * Array of menu items to render.
+     */
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible label for the navigation region.
+     * @default 'Sidebar menu'
+     */
+    ariaLabel = input('Sidebar menu', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional filter string. When set, the menu displays only items whose label
+     * contains the filter text (case-insensitive, substring match). Parent items
+     * with matching descendants remain visible so the filtered child can be reached.
+     * Separators and section headers are hidden during filtering.
+     *
+     * This is a two-way bindable model signal — set it programmatically or wire it
+     * to the built-in search component.
+     */
+    filterString = model('', ...(ngDevMode ? [{ debugName: "filterString" }] : /* istanbul ignore next */ []));
+    /**
+     * Emitted when any clickable menu item is activated.
+     */
+    itemClick = output();
+    /**
+     * Pure derivation that assigns unique IDs without mutating consumer data.
+     * Each item is shallow-copied; the tree is walked recursively.
+     */
+    _readyItems = computed(() => {
+        let counter = 0;
+        const assignIds = (list) => list.map((it) => {
+            const copy = { ...it, id: it.id ?? `fui-mi-${++counter}` };
+            if (copy.items)
+                copy.items = assignIds(copy.items);
+            return copy;
+        });
+        return assignIds(this.items());
+    }, ...(ngDevMode ? [{ debugName: "_readyItems" }] : /* istanbul ignore next */ []));
+    /**
+     * Filtered items based on `filterString`. When the filter is non-empty,
+     * items are kept if their label matches (case-insensitive substring) or
+     * if any descendant matches. Separators and section headers are hidden
+     * during filtering.
+     */
+    _filteredItems = computed(() => {
+        const filter = this.filterString().trim().toLowerCase();
+        const items = this._readyItems();
+        if (!filter)
+            return items;
+        const filterTree = (list) => list
+            .filter((it) => !it.separator && !it.sectionHeader)
+            .filter((item) => {
+            const childrenMatch = item.items?.length ? filterTree(item.items).length > 0 : false;
+            return !!item.label?.toLowerCase().includes(filter) || childrenMatch;
+        })
+            .map((item) => {
+            const filteredChildren = item.items?.length ? filterTree(item.items) : undefined;
+            return filteredChildren?.length ? { ...item, expanded: true, items: filteredChildren } : item;
+        });
+        return filterTree(items);
+    }, ...(ngDevMode ? [{ debugName: "_filteredItems" }] : /* istanbul ignore next */ []));
+    /** @internal Pass-through handler from submenu */
+    _onItemClick(item) {
+        this.itemClick.emit(item);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSidebarNavMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: FuiSidebarNavMenuComponent, isStandalone: true, selector: "fui-sidebar-nav-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, filterString: { classPropertyName: "filterString", publicName: "filterString", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterString: "filterStringChange", itemClick: "itemClick" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()" }, classAttribute: "fui-sidebar-nav-menu" }, ngImport: i0, template: "<div class=\"fui-sidebar-nav-menu__header\">\r\n  <ng-content select=\"[fuiSidebarNavHeader]\"></ng-content>\r\n</div>\r\n\r\n<fui-sidebar-nav-search [(filterString)]=\"filterString\" />\r\n\r\n<div class=\"fui-sidebar-nav-menu__body\">\r\n  <fui-sidebar-nav-submenu\r\n    [items]=\"_filteredItems()\"\r\n    [submenuLabel]=\"ariaLabel()\"\r\n    [isRoot]=\"true\"\r\n    (itemClick)=\"_onItemClick($event)\"\r\n  />\r\n</div>\r\n\r\n<div class=\"fui-sidebar-nav-menu__footer\">\r\n  <ng-content select=\"[fuiSidebarNavFooter]\"></ng-content>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}:host{--fui-snm-bg: var(--fui-bg-subtle);--fui-snm-item-color: var(--fui-text-secondary);--fui-snm-item-bg-hover: var(--fui-bg-muted);--fui-snm-item-bg-active: var(--fui-primary-10);--fui-snm-item-color-disabled: var(--fui-neutral-60);--fui-snm-separator-color: var(--fui-neutral-40);--fui-snm-section-header-color: var(--fui-neutral-60);--fui-snm-submenu-border-color: var(--fui-neutral-40);--fui-snm-item-radius: var(--fui-radius-sm);--fui-snm-item-gap: var(--fui-spacing-1);--fui-snm-item-padding-y: var(--fui-spacing-3);--fui-snm-item-padding-x: var(--fui-spacing-4);--fui-snm-submenu-indent: var(--fui-spacing-7);--fui-snm-section-header-padding-y: var(--fui-spacing-4);--fui-snm-section-header-padding-x: var(--fui-spacing-4);--fui-snm-submenu-border-width: 1px;--fui-snm-font-family: var(--fui-font-sans);--fui-snm-font-size: var(--fui-text-sm);--fui-snm-font-weight: var(--fui-weight-regular);--fui-snm-font-weight-parent: var(--fui-weight-regular);--fui-snm-section-header-font-size: var(--fui-text-xs);--fui-snm-section-header-font-weight: var(--fui-weight-regular);--fui-snm-section-header-letter-spacing: .04em;--fui-snm-icon-color: var(--fui-text-secondary);--fui-snm-transition-duration: var(--fui-duration-fast);--fui-snm-transition-easing: var(--fui-ease-out);display:flex;flex-direction:column;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;background-color:var(--fui-snm-bg);box-sizing:border-box}.fui-sidebar-nav-menu__header{flex-shrink:0}.fui-sidebar-nav-menu__body{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--fui-spacing-4);padding-right:var(--fui-spacing-0)}.fui-sidebar-nav-menu__footer{flex-shrink:0}.sidebar-nav-submenu{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;gap:var(--fui-spacing-1);padding-left:var(--fui-spacing-2)}.sidebar-nav-submenu--root{padding-right:var(--fui-spacing-4)}.sidebar-nav-menu__section-header{list-style:none;padding:var(--fui-snm-section-header-padding-y) var(--fui-snm-section-header-padding-x)}.sidebar-nav-menu__section-header-label{display:block;font-family:var(--fui-snm-font-family);font-size:var(--fui-snm-section-header-font-size);font-weight:var(--fui-snm-section-header-font-weight);letter-spacing:var(--fui-snm-section-header-letter-spacing);text-transform:uppercase;color:var(--fui-snm-section-header-color);-webkit-user-select:none;user-select:none}.sidebar-nav-menu__item-wrapper{display:flex;flex-direction:column;position:relative}.sidebar-nav-menu__item-wrapper--root>.sidebar-nav-menu__item{font-size:var(--fui-text-base);color:var(--fui-text-primary)}.sidebar-nav-menu__item-wrapper--root>.sidebar-nav-menu__item .sidebar-nav-menu__item-icon{--fui-icon-size: var(--fui-icon-lg)}.sidebar-nav-menu__item{display:flex;align-items:center;justify-content:space-between;gap:var(--fui-snm-item-gap);padding:var(--fui-snm-item-padding-y) var(--fui-snm-item-padding-x);cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;color:var(--fui-snm-item-color);background:transparent;border:none;border-radius:var(--fui-snm-item-radius);font-family:var(--fui-snm-font-family);font-size:var(--fui-snm-font-size);font-weight:var(--fui-snm-font-weight);text-align:left;width:100%;box-sizing:border-box;outline:none;transition-property:background-color;transition-duration:var(--fui-snm-transition-duration);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.sidebar-nav-menu__item:hover:not(.sidebar-nav-menu__item--disabled){background-color:var(--fui-snm-item-bg-hover)}.sidebar-nav-menu__item:focus-visible{outline:var(--fui-state-focus-ring-width) solid var(--fui-primary-50);outline-offset:-2px}.sidebar-nav-menu__item--disabled{color:var(--fui-snm-item-color-disabled);opacity:.5;pointer-events:none;cursor:default}.sidebar-nav-menu__item--parent{font-weight:var(--fui-snm-font-weight-parent)}.sidebar-nav-menu__item[href]{color:var(--fui-snm-item-color);text-decoration:none}.sidebar-nav-menu__item--active{background-color:var(--fui-snm-item-bg-active)}.sidebar-nav-menu__item-content{display:flex;align-items:center;gap:var(--fui-spacing-3);min-width:0;flex:1}.sidebar-nav-menu__item-icon{flex-shrink:0;color:var(--fui-snm-icon-color);display:inline-flex;align-items:center;justify-content:center}.sidebar-nav-menu__item-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-nav-menu__item-chevron{flex-shrink:0;color:var(--fui-snm-item-color);display:inline-flex;align-items:center;justify-content:center;transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.sidebar-nav-menu__item-chevron--expanded{transform:rotate(90deg)}.sidebar-nav-menu__separator{height:1px;background-color:var(--fui-snm-separator-color);list-style:none}.sidebar-nav-submenu__inline{position:relative;display:flex;flex-direction:row;overflow:hidden;will-change:transform,opacity}.sidebar-nav-submenu__inline .sidebar-nav-submenu{flex:1;padding-left:var(--fui-snm-submenu-indent);padding-top:var(--fui-spacing-1)}.sidebar-nav-submenu__inline--enter{animation:sidebar-nav-submenu-enter var(--fui-duration-moderate) var(--fui-ease-out) both}.sidebar-nav-submenu__inline--leave{animation:sidebar-nav-submenu-leave var(--fui-duration-fast) var(--fui-ease-out) both}@keyframes sidebar-nav-submenu-enter{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes sidebar-nav-submenu-leave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}.sidebar-nav-submenu__border{position:relative;flex-shrink:0;width:0;margin-left:calc(var(--fui-snm-submenu-indent) - var(--fui-snm-submenu-border-width));border-bottom:var(--fui-border-width-sm) solid var(--fui-snm-submenu-border-color)}.sidebar-nav-submenu__border:before{content:\"\";position:absolute;top:0;bottom:var(--fui-spacing-2);left:0;width:1px;background-color:var(--fui-snm-submenu-border-color);border-radius:var(--fui-radius-xs)}@media(prefers-reduced-motion:reduce){.sidebar-nav-menu__item,.sidebar-nav-menu__item-chevron,.sidebar-nav-submenu__inline--enter,.sidebar-nav-submenu__inline--leave{transition:none;animation:none!important}}\n"], dependencies: [{ kind: "component", type: SidebarNavSubmenuComponent, selector: "fui-sidebar-nav-submenu", inputs: ["items", "submenuLabel", "isRoot", "depth"], outputs: ["itemClick"] }, { kind: "component", type: FuiSidebarNavSearchComponent, selector: "fui-sidebar-nav-search", inputs: ["filterString", "placeholder"], outputs: ["filterStringChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSidebarNavMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-sidebar-nav-menu', standalone: true, imports: [SidebarNavSubmenuComponent, FuiSidebarNavSearchComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        role: 'navigation',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        class: 'fui-sidebar-nav-menu',
+                    }, template: "<div class=\"fui-sidebar-nav-menu__header\">\r\n  <ng-content select=\"[fuiSidebarNavHeader]\"></ng-content>\r\n</div>\r\n\r\n<fui-sidebar-nav-search [(filterString)]=\"filterString\" />\r\n\r\n<div class=\"fui-sidebar-nav-menu__body\">\r\n  <fui-sidebar-nav-submenu\r\n    [items]=\"_filteredItems()\"\r\n    [submenuLabel]=\"ariaLabel()\"\r\n    [isRoot]=\"true\"\r\n    (itemClick)=\"_onItemClick($event)\"\r\n  />\r\n</div>\r\n\r\n<div class=\"fui-sidebar-nav-menu__footer\">\r\n  <ng-content select=\"[fuiSidebarNavFooter]\"></ng-content>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}:host{--fui-snm-bg: var(--fui-bg-subtle);--fui-snm-item-color: var(--fui-text-secondary);--fui-snm-item-bg-hover: var(--fui-bg-muted);--fui-snm-item-bg-active: var(--fui-primary-10);--fui-snm-item-color-disabled: var(--fui-neutral-60);--fui-snm-separator-color: var(--fui-neutral-40);--fui-snm-section-header-color: var(--fui-neutral-60);--fui-snm-submenu-border-color: var(--fui-neutral-40);--fui-snm-item-radius: var(--fui-radius-sm);--fui-snm-item-gap: var(--fui-spacing-1);--fui-snm-item-padding-y: var(--fui-spacing-3);--fui-snm-item-padding-x: var(--fui-spacing-4);--fui-snm-submenu-indent: var(--fui-spacing-7);--fui-snm-section-header-padding-y: var(--fui-spacing-4);--fui-snm-section-header-padding-x: var(--fui-spacing-4);--fui-snm-submenu-border-width: 1px;--fui-snm-font-family: var(--fui-font-sans);--fui-snm-font-size: var(--fui-text-sm);--fui-snm-font-weight: var(--fui-weight-regular);--fui-snm-font-weight-parent: var(--fui-weight-regular);--fui-snm-section-header-font-size: var(--fui-text-xs);--fui-snm-section-header-font-weight: var(--fui-weight-regular);--fui-snm-section-header-letter-spacing: .04em;--fui-snm-icon-color: var(--fui-text-secondary);--fui-snm-transition-duration: var(--fui-duration-fast);--fui-snm-transition-easing: var(--fui-ease-out);display:flex;flex-direction:column;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;background-color:var(--fui-snm-bg);box-sizing:border-box}.fui-sidebar-nav-menu__header{flex-shrink:0}.fui-sidebar-nav-menu__body{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--fui-spacing-4);padding-right:var(--fui-spacing-0)}.fui-sidebar-nav-menu__footer{flex-shrink:0}.sidebar-nav-submenu{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;gap:var(--fui-spacing-1);padding-left:var(--fui-spacing-2)}.sidebar-nav-submenu--root{padding-right:var(--fui-spacing-4)}.sidebar-nav-menu__section-header{list-style:none;padding:var(--fui-snm-section-header-padding-y) var(--fui-snm-section-header-padding-x)}.sidebar-nav-menu__section-header-label{display:block;font-family:var(--fui-snm-font-family);font-size:var(--fui-snm-section-header-font-size);font-weight:var(--fui-snm-section-header-font-weight);letter-spacing:var(--fui-snm-section-header-letter-spacing);text-transform:uppercase;color:var(--fui-snm-section-header-color);-webkit-user-select:none;user-select:none}.sidebar-nav-menu__item-wrapper{display:flex;flex-direction:column;position:relative}.sidebar-nav-menu__item-wrapper--root>.sidebar-nav-menu__item{font-size:var(--fui-text-base);color:var(--fui-text-primary)}.sidebar-nav-menu__item-wrapper--root>.sidebar-nav-menu__item .sidebar-nav-menu__item-icon{--fui-icon-size: var(--fui-icon-lg)}.sidebar-nav-menu__item{display:flex;align-items:center;justify-content:space-between;gap:var(--fui-snm-item-gap);padding:var(--fui-snm-item-padding-y) var(--fui-snm-item-padding-x);cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;color:var(--fui-snm-item-color);background:transparent;border:none;border-radius:var(--fui-snm-item-radius);font-family:var(--fui-snm-font-family);font-size:var(--fui-snm-font-size);font-weight:var(--fui-snm-font-weight);text-align:left;width:100%;box-sizing:border-box;outline:none;transition-property:background-color;transition-duration:var(--fui-snm-transition-duration);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.sidebar-nav-menu__item:hover:not(.sidebar-nav-menu__item--disabled){background-color:var(--fui-snm-item-bg-hover)}.sidebar-nav-menu__item:focus-visible{outline:var(--fui-state-focus-ring-width) solid var(--fui-primary-50);outline-offset:-2px}.sidebar-nav-menu__item--disabled{color:var(--fui-snm-item-color-disabled);opacity:.5;pointer-events:none;cursor:default}.sidebar-nav-menu__item--parent{font-weight:var(--fui-snm-font-weight-parent)}.sidebar-nav-menu__item[href]{color:var(--fui-snm-item-color);text-decoration:none}.sidebar-nav-menu__item--active{background-color:var(--fui-snm-item-bg-active)}.sidebar-nav-menu__item-content{display:flex;align-items:center;gap:var(--fui-spacing-3);min-width:0;flex:1}.sidebar-nav-menu__item-icon{flex-shrink:0;color:var(--fui-snm-icon-color);display:inline-flex;align-items:center;justify-content:center}.sidebar-nav-menu__item-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-nav-menu__item-chevron{flex-shrink:0;color:var(--fui-snm-item-color);display:inline-flex;align-items:center;justify-content:center;transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.sidebar-nav-menu__item-chevron--expanded{transform:rotate(90deg)}.sidebar-nav-menu__separator{height:1px;background-color:var(--fui-snm-separator-color);list-style:none}.sidebar-nav-submenu__inline{position:relative;display:flex;flex-direction:row;overflow:hidden;will-change:transform,opacity}.sidebar-nav-submenu__inline .sidebar-nav-submenu{flex:1;padding-left:var(--fui-snm-submenu-indent);padding-top:var(--fui-spacing-1)}.sidebar-nav-submenu__inline--enter{animation:sidebar-nav-submenu-enter var(--fui-duration-moderate) var(--fui-ease-out) both}.sidebar-nav-submenu__inline--leave{animation:sidebar-nav-submenu-leave var(--fui-duration-fast) var(--fui-ease-out) both}@keyframes sidebar-nav-submenu-enter{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes sidebar-nav-submenu-leave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}.sidebar-nav-submenu__border{position:relative;flex-shrink:0;width:0;margin-left:calc(var(--fui-snm-submenu-indent) - var(--fui-snm-submenu-border-width));border-bottom:var(--fui-border-width-sm) solid var(--fui-snm-submenu-border-color)}.sidebar-nav-submenu__border:before{content:\"\";position:absolute;top:0;bottom:var(--fui-spacing-2);left:0;width:1px;background-color:var(--fui-snm-submenu-border-color);border-radius:var(--fui-radius-xs)}@media(prefers-reduced-motion:reduce){.sidebar-nav-menu__item,.sidebar-nav-menu__item-chevron,.sidebar-nav-submenu__inline--enter,.sidebar-nav-submenu__inline--leave{transition:none;animation:none!important}}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], filterString: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterString", required: false }] }, { type: i0.Output, args: ["filterStringChange"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+
+/**
+ * Walk a menu item tree and set `expanded: true` on every parent whose
+ * descendant chain contains a `routerLink` that matches the current URL.
+ *
+ * The function is **immutable** — it clones items only when it needs to mutate
+ * them, returning the same reference for untouched subtrees.
+ *
+ * ## Usage
+ *
+ * ```typescript
+ * import { expandMenuItems } from '@raintonic/formaui/components/sidebar-nav-menu';
+ *
+ * const items = expandMenuItems(myMenuItems, '/products/categories');
+ * ```
+ *
+ * @param items - Menu item tree
+ * @param currentUrl - The current URL path (e.g. `'/products/categories'`)
+ * @returns A new tree with `expanded` set on matching parent items
+ */
+function expandMenuItems(items, currentUrl) {
+    const result = [];
+    for (const item of items) {
+        // Separators and section headers are never expandable — pass through unchanged
+        if (item.separator || item.sectionHeader) {
+            result.push(item);
+            continue;
+        }
+        const hasChildMatch = item.items && containsActiveDescendant(item.items, currentUrl);
+        if (hasChildMatch) {
+            // Clone the item, set expanded, and recurse into children
+            result.push({
+                ...item,
+                expanded: true,
+                items: expandMenuItems(item.items, currentUrl),
+            });
+        }
+        else if (item.expanded) {
+            // No descendants match — reset expanded to false so the consumer's initial
+            // state doesn't leak through
+            result.push({ ...item, expanded: false });
+        }
+        else {
+            result.push(item);
+        }
+    }
+    return result;
+}
+/**
+ * Returns `true` if any item in the list has a `routerLink` matching
+ * `currentUrl`, or if any descendant of an item matches (recursive).
+ */
+function containsActiveDescendant(items, currentUrl) {
+    return items.some((item) => {
+        if (matchesUrl(item.routerLink, currentUrl))
+            return true;
+        if (item.items && containsActiveDescendant(item.items, currentUrl))
+            return true;
+        return false;
+    });
+}
+/**
+ * Normalise and compare a `routerLink` value against the current URL string.
+ */
+function matchesUrl(routerLink, currentUrl) {
+    if (!routerLink)
+        return false;
+    if (typeof routerLink === 'string') {
+        return normalise(routerLink) === normalise(currentUrl);
+    }
+    // routerLink as array — join segments to form the path
+    const segments = routerLink.map(String).filter(Boolean);
+    return segments.length > 0 && normalise(segments.join('/')) === normalise(currentUrl);
+}
+/**
+ * Strip query string, fragment, and leading/trailing slashes for comparison.
+ * `Router.url` includes query params and fragment (e.g. `/products?page=2#top`),
+ * which must not prevent the path from matching a plain `routerLink`.
+ */
+function normalise(p) {
+    const pathOnly = p.split(/[?#]/)[0];
+    return pathOnly.replace(/^\/+|\/+$/g, '');
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FuiSidebarNavMenuComponent, FuiSidebarNavSearchComponent, SidebarNavSubmenuComponent, expandMenuItems };
+//# sourceMappingURL=raintonic-formaui-components-sidebar-nav-menu.mjs.map