@acorex/components 21.0.2-next.19 → 21.0.2-next.20

package/fesm2022/acorex-components-side-menu.mjs

@@ -1,12 +1,12 @@
 import { AXClickEvent, MXInteractiveComponent, AXRippleDirective, AXComponent, NXComponent, AXCommonModule } from '@acorex/cdk/common';
 import { AXLoadingComponent, AXLoadingModule } from '@acorex/components/loading';
+import { AXPopoverComponent } from '@acorex/components/popover';
 import * as i1 from '@acorex/components/tooltip';
 import { AXTooltipModule } from '@acorex/components/tooltip';
 import { AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
-import { AXZIndexService } from '@acorex/core/z-index';
-import { isPlatformBrowser, NgTemplateOutlet, AsyncPipe, CommonModule } from '@angular/common';
+import { DOCUMENT, isPlatformBrowser, NgTemplateOutlet, AsyncPipe, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { model, output, signal, input, inject, ElementRef, Renderer2, PLATFORM_ID, DestroyRef, contentChildren, viewChild, effect, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component, DOCUMENT, HostBinding, Directive, NgModule } from '@angular/core';
+import { model, output, signal, input, inject, ElementRef, PLATFORM_ID, DestroyRef, viewChild, computed, contentChildren, effect, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component, HostBinding, Directive, NgModule } from '@angular/core';
 import { RouterLink, RouterLinkActive, Router } from '@angular/router';
 import { AXDecoratorGenericComponent, AXDecoratorIconComponent, AXDecoratorModule } from '@acorex/components/decorators';
 import { AXOutlineContainerDirective } from '@acorex/cdk/outline';
@@ -39,26 +39,39 @@ class AXSideMenuItemComponent extends MXInteractiveComponent {
         this.tooltipStatus = signal(false, ...(ngDevMode ? [{ debugName: "tooltipStatus" }] : []));
         this.tooltipText = input('', ...(ngDevMode ? [{ debugName: "tooltipText" }] : []));
         this.elem = inject(ElementRef);
-        this.renderer = inject(Renderer2);
+        this.document = inject(DOCUMENT);
         this.platformId = inject(PLATFORM_ID);
-        this.zIndexService = inject(AXZIndexService);
-        /**
-         * Parent `<ax-side-menu>` resolved via Angular DI. For items projected
-         * directly this works; for items inside `ngTemplateOutlet` embedded views
-         * Angular resolves DI from the template's declaration site (which is NOT
-         * inside an `<ax-side-menu>`), so this is `null`. In that case we fall back
-         * to a DOM-walked reference stored in `parentMenuFromDom`.
-         */
-        this.parentMenu = inject(AXSideMenuBase, { optional: true });
-        /**
-         * Fallback parent reference resolved by walking up the DOM and reading the
-         * `__axContext__` property that `MXBaseComponent.ngOnInit` attaches to
-         * each host element. Populated on first render in the browser.
-         */
-        this.parentMenuFromDom = signal(null, ...(ngDevMode ? [{ debugName: "parentMenuFromDom" }] : []));
         this.destroyRef = inject(DestroyRef);
-        this.zToken = null;
         this.childObserver = null;
+        this.childrenPopover = viewChild('childrenPopover', ...(ngDevMode ? [{ debugName: "childrenPopover" }] : []));
+        this.menuItemTrigger = viewChild.required('menuItemTrigger');
+        /** Synced from the parent `ax-side-menu` (source of truth for full vs compact). */
+        this.menuMode = signal('full', ...(ngDevMode ? [{ debugName: "menuMode" }] : []));
+        /** True when this item should use compact flyout popovers (rail or inside a flyout). */
+        this.isCompactMode = computed(() => {
+            if (this.menuMode() === 'compact') {
+                return true;
+            }
+            if (!isPlatformBrowser(this.platformId)) {
+                return false;
+            }
+            const host = this.elem.nativeElement;
+            if (host.closest('.ax-side-menu-popover')) {
+                return !!this.document.querySelector('ax-side-menu.ax-mode-compact');
+            }
+            return !!host.closest('ax-side-menu.ax-mode-compact');
+        }, ...(ngDevMode ? [{ debugName: "isCompactMode" }] : []));
+        /** Top-level rail button in compact mode (icon only, opens flyout). */
+        this.isFirstLevel = computed(() => {
+            if (!this.isCompactMode()) {
+                return false;
+            }
+            const host = this.elem.nativeElement;
+            if (host.closest('.ax-side-menu-popover')) {
+                return false;
+            }
+            return !host.parentElement?.closest('.ax-side-children-content');
+        }, ...(ngDevMode ? [{ debugName: "isFirstLevel" }] : []));
         this.toggleOnClick = input(true, ...(ngDevMode ? [{ debugName: "toggleOnClick" }] : []));
         this.href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : []));
         this.routerLink = input(...(ngDevMode ? [undefined, { debugName: "routerLink" }] : []));
@@ -66,7 +79,8 @@ class AXSideMenuItemComponent extends MXInteractiveComponent {
         this.routerLinkActiveOptions = input({ exact: false }, ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : []));
         this.target = input('_self', ...(ngDevMode ? [{ debugName: "target" }] : []));
         this.childItems = contentChildren(AXSideMenuItemComponent, { ...(ngDevMode ? { debugName: "childItems" } : {}), descendants: true });
-        this.childrenContainer = viewChild('childrenContainer', ...(ngDevMode ? [{ debugName: "childrenContainer" }] : []));
+        this.childrenSlot = viewChild('childrenSlot', ...(ngDevMode ? [{ debugName: "childrenSlot" }] : []));
+        this.popoverSlot = viewChild('popoverSlot', ...(ngDevMode ? [{ debugName: "popoverSlot" }] : []));
         this.hasChild = signal(false, ...(ngDevMode ? [{ debugName: "hasChild" }] : []));
         this.#childCheckEffect = effect(() => {
             if (this.childItems().length)
@@ -84,44 +98,47 @@ class AXSideMenuItemComponent extends MXInteractiveComponent {
         this.#initChildren = afterNextRender(() => {
             if (!isPlatformBrowser(this.platformId))
                 return;
-            this.resolveParentMenuFromDom();
             this.reparentOrphanedChildren();
             this.checkForChildren();
             this.childObserver = new MutationObserver(() => {
                 this.reparentOrphanedChildren();
                 this.checkForChildren();
-                // Reparenting can move this element under a different parent menu,
-                // so re-check on every mutation as well.
-                if (!this.parentMenu)
-                    this.resolveParentMenuFromDom();
             });
             this.childObserver.observe(this.elem.nativeElement, { childList: true, subtree: true });
             this.destroyRef.onDestroy(() => this.childObserver?.disconnect());
         });
-        // In compact mode the children flyout is absolutely positioned, so it needs a
-        // dynamic z-index from the shared service so the most recently opened submenu
-        // always sits on top of any sibling/nested flyout.
-        this.#zIndexEffect = effect(() => {
-            const isOpen = !this.isCollapsed();
-            // Prefer the DI-resolved parent; fall back to the DOM-walked one for
-            // items rendered inside `ngTemplateOutlet` embedded views.
-            const parent = this.parentMenu ?? this.parentMenuFromDom();
-            const isCompact = parent?.mode() === 'compact';
-            const container = this.childrenContainer()?.nativeElement;
-            if (!isPlatformBrowser(this.platformId) || !container)
+        // In compact mode submenus open in an overlay popover; keep collapse state in sync.
+        this.#popoverSync = effect(() => {
+            const compact = this.isCompactMode();
+            this.isCollapsed();
+            this.hasChild();
+            const popover = this.childrenPopover();
+            if (!popover || !isPlatformBrowser(this.platformId)) {
                 return;
-            if (isCompact && isOpen) {
-                this.zToken = this.zToken ? this.zIndexService.bringToFront(this.zToken) : this.zIndexService.acquire();
-                this.renderer.setStyle(container, 'z-index', String(this.zToken.zIndex));
             }
-            else {
-                if (this.zToken) {
-                    this.zIndexService.release(this.zToken);
-                    this.zToken = null;
+            if (!compact) {
+                this.relocateChildren(false);
+                if (popover.isOpen) {
+                    popover.close();
                 }
-                this.renderer.removeStyle(container, 'z-index');
+                return;
             }
-        }, ...(ngDevMode ? [{ debugName: "#zIndexEffect" }] : []));
+            this.syncCompactPopover();
+        }, ...(ngDevMode ? [{ debugName: "#popoverSync" }] : []));
+    }
+    /** Called by `ax-side-menu` so items always know the current display mode. */
+    syncMenuMode(mode) {
+        if (this.menuMode() === mode) {
+            return;
+        }
+        this.menuMode.set(mode);
+        if (mode === 'full') {
+            this.relocateChildren(false);
+            this.childrenPopover()?.close();
+        }
+        else {
+            this.isCollapsed.set(true);
+        }
     }
     #childCheckEffect;
     /**
@@ -140,17 +157,12 @@ class AXSideMenuItemComponent extends MXInteractiveComponent {
      * rendered inside `ngTemplateOutlet` embedded views cannot inject the
      * `AXSideMenuBase` token (DI scope is the template's declaration site).
      */
-    resolveParentMenuFromDom() {
-        if (this.parentMenu)
-            return;
+    resolveMenuHostElement() {
         const host = this.elem.nativeElement;
-        const menuEl = host.parentElement?.closest('ax-side-menu');
-        if (!menuEl)
-            return;
-        const instance = menuEl.__axContext__;
-        if (instance && typeof instance.mode === 'function') {
-            this.parentMenuFromDom.set(instance);
-        }
+        return (host.closest('ax-side-menu') ??
+            (host.closest('.ax-side-menu-popover')
+                ? this.document.querySelector('ax-side-menu.ax-mode-compact')
+                : null));
     }
     /**
      * Moves any `<ax-side-menu-item>` that belongs to this item (its nearest
@@ -159,18 +171,16 @@ class AXSideMenuItemComponent extends MXInteractiveComponent {
      * step a content-projection edge case in Angular 21+ leaves recursive items
      * stranded inside `.ax-inside-text` (the catch-all `<ng-content>` slot) and
      * the submenu cannot expand.
-     *
-     * IMPORTANT: We resolve our own container via the `childrenContainer`
-     * view-child (NOT `host.querySelector('.ax-side-children-content')`),
-     * because `querySelector` is depth-first and would otherwise return the
-     * deepest *nested* item's container first.
      */
+    getActiveChildrenSlot() {
+        if (this.isCompactMode()) {
+            return this.popoverSlot()?.nativeElement ?? this.childrenSlot()?.nativeElement;
+        }
+        return this.childrenSlot()?.nativeElement;
+    }
     reparentOrphanedChildren() {
         const host = this.elem.nativeElement;
-        const childrenWrapper = this.childrenContainer()?.nativeElement;
-        if (!childrenWrapper)
-            return;
-        const container = childrenWrapper.querySelector(':scope > .ax-side-children-content');
+        const container = this.getActiveChildrenSlot();
         if (!container)
             return;
         // Only look at this host's *direct* descendants in projection terms:
@@ -194,49 +204,91 @@ class AXSideMenuItemComponent extends MXInteractiveComponent {
             }
         }
     }
-    // In compact mode the children flyout is absolutely positioned, so it needs a
-    // dynamic z-index from the shared service so the most recently opened submenu
-    // always sits on top of any sibling/nested flyout.
-    #zIndexEffect;
-    ngOnDestroy() {
-        if (this.zToken) {
-            this.zIndexService.release(this.zToken);
-            this.zToken = null;
+    // In compact mode submenus open in an overlay popover; keep collapse state in sync.
+    #popoverSync;
+    syncCompactPopover() {
+        if (!isPlatformBrowser(this.platformId) || !this.isCompactMode() || !this.hasChild())
+            return;
+        const popover = this.childrenPopover();
+        if (!popover || popover.disabled)
+            return;
+        if (this.isCollapsed()) {
+            popover.close();
+        }
+        else {
+            if (this.isFirstLevel()) {
+                this.closeSiblingCompactPopovers();
+            }
+            this.relocateChildren(true);
+            void popover.open().then(() => popover.bringToFront());
         }
     }
-    checkForChildren() {
-        const host = this.elem.nativeElement;
-        const childrenWrapper = this.childrenContainer()?.nativeElement;
-        // Resolve OUR own content container via the view-child instead of
-        // `host.querySelector` (which is depth-first and would otherwise return
-        // a nested item's container).
-        const contentEl = childrenWrapper?.querySelector(':scope > .ax-side-children-content') ?? null;
-        if (contentEl) {
-            // `contentChildren` does not see items rendered inside `ngTemplateOutlet`
-            // embedded views, so we also scan the DOM for nested items to support
-            // recursive menu templates (Angular 21+).
-            const domChildren = contentEl.querySelectorAll('ax-side-menu-item');
-            // Items might still be stranded in `.ax-inside-text` before reparenting
-            // happens: count any descendant ax-side-menu-item whose nearest
-            // ax-side-menu-item ancestor is THIS host.
-            let strandedCount = 0;
-            const all = host.querySelectorAll('ax-side-menu-item');
-            all.forEach((el) => {
-                if (el === host)
-                    return;
-                if (contentEl.contains(el))
-                    return; // already in our container
-                const nearestParent = el.parentElement?.closest('ax-side-menu-item');
-                if (nearestParent === host)
-                    strandedCount++;
-            });
-            const hasChildren = this.childItems().length > 0 || domChildren.length > 0 || strandedCount > 0;
-            this.hasChild.set(hasChildren);
+    /** Closes other top-level compact flyouts when a rail item is opened. */
+    closeSiblingCompactPopovers() {
+        const menuEl = this.resolveMenuHostElement();
+        if (!menuEl)
+            return;
+        menuEl.querySelectorAll(':scope > ax-side-menu-item').forEach((el) => {
+            const instance = el.__axContext__;
+            if (!(instance instanceof AXSideMenuItemComponent) || instance === this) {
+                return;
+            }
+            instance.isCollapsed.set(true);
+            const siblingPopover = instance.childrenPopover();
+            if (siblingPopover?.isOpen) {
+                siblingPopover.close();
+            }
+        });
+    }
+    /**
+     * Moves projected submenu nodes into the popover panel when opening in compact mode.
+     * They are not moved back to the inline slot on close (that caused a full-mode flash below the rail).
+     */
+    relocateChildren(toPopover) {
+        const source = this.childrenSlot()?.nativeElement;
+        const target = this.popoverSlot()?.nativeElement;
+        if (!source || !target) {
+            return;
         }
-        else {
-            this.hasChild.set(this.childItems().length > 0);
+        if (this.isCompactMode() && !toPopover) {
+            return;
+        }
+        const from = toPopover ? source : target;
+        const to = toPopover ? target : source;
+        while (from.firstChild) {
+            to.appendChild(from.firstChild);
+        }
+    }
+    _handlePopoverClosed() {
+        if (!this.isCollapsed()) {
+            this.isCollapsed.set(true);
         }
     }
+    checkForChildren() {
+        const host = this.elem.nativeElement;
+        const inlineSlot = this.childrenSlot()?.nativeElement ?? null;
+        const flyoutSlot = this.popoverSlot()?.nativeElement ?? null;
+        const inlineCount = inlineSlot?.querySelectorAll('ax-side-menu-item').length ?? 0;
+        const flyoutCount = flyoutSlot?.querySelectorAll('ax-side-menu-item').length ?? 0;
+        const contentEl = inlineSlot ?? flyoutSlot;
+        this.hasChild.set(this.hasNestedMenuItems(host, contentEl, inlineCount + flyoutCount));
+    }
+    hasNestedMenuItems(host, contentEl, domChildCount) {
+        const inlineSlot = this.childrenSlot()?.nativeElement ?? null;
+        const flyoutSlot = this.popoverSlot()?.nativeElement ?? null;
+        let strandedCount = 0;
+        const all = host.querySelectorAll('ax-side-menu-item');
+        all.forEach((el) => {
+            if (el === host)
+                return;
+            if (inlineSlot?.contains(el) || flyoutSlot?.contains(el))
+                return;
+            const nearestParent = el.parentElement?.closest('ax-side-menu-item');
+            if (nearestParent === host)
+                strandedCount++;
+        });
+        return this.childItems().length > 0 || domChildCount > 0 || strandedCount > 0;
+    }
     _handleClickEvent(e) {
         if (this.disabled || this.isLoading())
             return;
@@ -247,12 +299,19 @@ class AXSideMenuItemComponent extends MXInteractiveComponent {
             handled: false,
         };
         this.onClick.emit(event);
-        if (!event.handled && this.toggleOnClick()) {
+        if (!event.handled && this.toggleOnClick() && (this.hasChild() || !this.isCompactMode())) {
             this.toggle();
         }
         e.stopPropagation();
     }
     toggle() {
+        if (this.isCompactMode()) {
+            if (!this.hasChild())
+                return;
+            this.isCollapsed.update((prev) => !prev);
+            this.syncCompactPopover();
+            return;
+        }
         this.isCollapsed.update((prev) => !prev);
     }
     open() {
@@ -262,11 +321,11 @@ class AXSideMenuItemComponent extends MXInteractiveComponent {
         this.isCollapsed.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXSideMenuItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXSideMenuItemComponent, isStandalone: true, selector: "ax-side-menu-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, toggleOnClick: { classPropertyName: "toggleOnClick", publicName: "toggleOnClick", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActive: { classPropertyName: "routerLinkActive", publicName: "routerLinkActive", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { text: "textChange", active: "activeChange", isLoading: "isLoadingChange", isCollapsed: "isCollapsedChange", onClick: "onClick" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [{ provide: AXComponent, useExisting: AXSideMenuItemComponent }], queries: [{ propertyName: "childItems", predicate: AXSideMenuItemComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "childrenContainer", first: true, predicate: ["childrenContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [axTooltip]=\"tooltipStatus() ? tooltipText() : null\">\n  <ng-content select=\"ax-title\"></ng-content>\n  @if (routerLink()) {\n    <a\n      [axRipple]\n      [target]=\"target()\"\n      class=\"ax-side-item\"\n      [routerLink]=\"routerLink()\"\n      (click)=\"_handleClickEvent($event)\"\n      [class.ax-state-disabled]=\"disabled\"\n      [routerLinkActive]=\"routerLinkActive()\"\n      [routerLinkActiveOptions]=\"routerLinkActiveOptions()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </a>\n  } @else if (href()) {\n    <a\n      [axRipple]\n      [href]=\"href()\"\n      [target]=\"target()\"\n      class=\"ax-side-item\"\n      [class.ax-state-active]=\"active()\"\n      (click)=\"_handleClickEvent($event)\"\n      [class.ax-state-disabled]=\"disabled\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </a>\n  } @else {\n    <div\n      [axRipple]\n      class=\"ax-side-item\"\n      [class.ax-state-active]=\"active()\"\n      (click)=\"_handleClickEvent($event)\"\n      [class.ax-state-disabled]=\"disabled\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </div>\n  }\n\n  <div\n    #childrenContainer\n    class=\"ax-side-children\"\n    [class.ax-collapsed]=\"isCollapsed()\"\n    [class.ax-empty]=\"!hasChild() && !isLoading()\"\n  >\n    @if (isLoading()) {\n      <p>{{ '@acorex:common.status.loading' | translate | async }}</p>\n    }\n    <div class=\"ax-side-children-content\" [hidden]=\"isLoading()\">\n      <ng-content select=\"ax-side-menu-item, ng-container, [ngTemplateOutlet]\"></ng-content>\n    </div>\n  </div>\n\n  <ng-content select=\"ax-divider\"></ng-content>\n  <ng-template #menuItemContent>\n    <div class=\"ax-start-side\">\n      <ng-content select=\"ax-prefix\"></ng-content>\n      @if (text()) {\n        <span>{{ text() }}</span>\n      }\n      <ng-content select=\"ax-text\"></ng-content>\n      <div class=\"ax-inside-text\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n    <div class=\"ax-end-side\">\n      <ng-content select=\"ax-suffix\"></ng-content>\n      @if (hasChild() && !isLoading() && toggleOnClick()) {\n        <span class=\"ax-icon ax-icon-chevron-right arrow-icon\" [class.arrow-icon-expand]=\"!isCollapsed()\"> </span>\n      }\n      @if (isLoading()) {\n        <ax-loading></ax-loading>\n      }\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }, { 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i1.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXSideMenuItemComponent, isStandalone: true, selector: "ax-side-menu-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, toggleOnClick: { classPropertyName: "toggleOnClick", publicName: "toggleOnClick", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActive: { classPropertyName: "routerLinkActive", publicName: "routerLinkActive", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { text: "textChange", active: "activeChange", isLoading: "isLoadingChange", isCollapsed: "isCollapsedChange", onClick: "onClick" }, providers: [{ provide: AXComponent, useExisting: AXSideMenuItemComponent }], queries: [{ propertyName: "childItems", predicate: AXSideMenuItemComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "childrenPopover", first: true, predicate: ["childrenPopover"], descendants: true, isSignal: true }, { propertyName: "menuItemTrigger", first: true, predicate: ["menuItemTrigger"], descendants: true, isSignal: true }, { propertyName: "childrenSlot", first: true, predicate: ["childrenSlot"], descendants: true, isSignal: true }, { propertyName: "popoverSlot", first: true, predicate: ["popoverSlot"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [axTooltip]=\"tooltipStatus() ? tooltipText() : null\">\n  <ng-content select=\"ax-title\"></ng-content>\n  @if (routerLink()) {\n    <a\n      #menuItemTrigger\n      [axRipple]\n      [target]=\"target()\"\n      class=\"ax-side-item\"\n      [routerLink]=\"routerLink()\"\n      (click)=\"_handleClickEvent($event)\"\n      [class.ax-state-disabled]=\"disabled\"\n      [routerLinkActive]=\"routerLinkActive()\"\n      [routerLinkActiveOptions]=\"routerLinkActiveOptions()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </a>\n  } @else if (href()) {\n    <a\n      #menuItemTrigger\n      [axRipple]\n      [href]=\"href()\"\n      [target]=\"target()\"\n      class=\"ax-side-item\"\n      [class.ax-state-active]=\"active()\"\n      (click)=\"_handleClickEvent($event)\"\n      [class.ax-state-disabled]=\"disabled\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </a>\n  } @else {\n    <div\n      #menuItemTrigger\n      [axRipple]\n      class=\"ax-side-item\"\n      [class.ax-state-active]=\"active()\"\n      (click)=\"_handleClickEvent($event)\"\n      [class.ax-state-disabled]=\"disabled\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </div>\n  }\n\n  <div\n    class=\"ax-side-children\"\n    [class.ax-collapsed]=\"!isCompactMode() && isCollapsed()\"\n    [class.ax-empty]=\"!hasChild() && !isLoading()\"\n  >\n    @if (isLoading()) {\n      <p>{{ '@acorex:common.status.loading' | translate | async }}</p>\n    }\n    <div #childrenSlot class=\"ax-side-children-content\" [hidden]=\"isLoading()\">\n      <ng-content select=\"ax-side-menu-item, ng-container, [ngTemplateOutlet]\"></ng-content>\n    </div>\n  </div>\n\n  <ax-popover\n    #childrenPopover\n    class=\"ax-side-menu-children-popover\"\n    [target]=\"menuItemTrigger().nativeElement\"\n    [openOn]=\"'manual'\"\n    [closeOn]=\"'clickOut'\"\n    [placement]=\"'end-top'\"\n    [offsetX]=\"8\"\n    [disabled]=\"!isCompactMode() || disabled || isLoading()\"\n    panelClass=\"ax-side-menu-popover\"\n    (onClosed)=\"_handlePopoverClosed()\"\n  >\n    <div #popoverSlot class=\"ax-side-children-content\"></div>\n  </ax-popover>\n\n  <ng-content select=\"ax-divider\"></ng-content>\n  <ng-template #menuItemContent>\n    <div class=\"ax-start-side\">\n      <ng-content select=\"ax-prefix\"></ng-content>\n      @if (text()) {\n        <span>{{ text() }}</span>\n      }\n      <div class=\"ax-inside-text\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n    <div class=\"ax-end-side\">\n      <ng-content select=\"ax-suffix\"></ng-content>\n      @if (hasChild() && !isLoading() && toggleOnClick() && !isFirstLevel()) {\n        <span class=\"ax-icon ax-icon-chevron-right arrow-icon\" [class.arrow-icon-expand]=\"!isCollapsed()\"> </span>\n      }\n      @if (isLoading()) {\n        <ax-loading></ax-loading>\n      }\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }, { 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i1.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXSideMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-side-menu-item', inputs: ['disabled'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { ngSkipHydration: 'true' }, imports: [
+            args: [{ selector: 'ax-side-menu-item', inputs: ['disabled'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         AXRippleDirective,
                         RouterLink,
                         RouterLinkActive,
@@ -275,8 +334,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         AsyncPipe,
                         AXTranslatorPipe,
                         AXTooltipModule,
-                    ], providers: [{ provide: AXComponent, useExisting: AXSideMenuItemComponent }], template: "<div [axTooltip]=\"tooltipStatus() ? tooltipText() : null\">\n  <ng-content select=\"ax-title\"></ng-content>\n  @if (routerLink()) {\n    <a\n      [axRipple]\n      [target]=\"target()\"\n      class=\"ax-side-item\"\n      [routerLink]=\"routerLink()\"\n      (click)=\"_handleClickEvent($event)\"\n      [class.ax-state-disabled]=\"disabled\"\n      [routerLinkActive]=\"routerLinkActive()\"\n      [routerLinkActiveOptions]=\"routerLinkActiveOptions()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </a>\n  } @else if (href()) {\n    <a\n      [axRipple]\n      [href]=\"href()\"\n      [target]=\"target()\"\n      class=\"ax-side-item\"\n      [class.ax-state-active]=\"active()\"\n      (click)=\"_handleClickEvent($event)\"\n      [class.ax-state-disabled]=\"disabled\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </a>\n  } @else {\n    <div\n      [axRipple]\n      class=\"ax-side-item\"\n      [class.ax-state-active]=\"active()\"\n      (click)=\"_handleClickEvent($event)\"\n      [class.ax-state-disabled]=\"disabled\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </div>\n  }\n\n  <div\n    #childrenContainer\n    class=\"ax-side-children\"\n    [class.ax-collapsed]=\"isCollapsed()\"\n    [class.ax-empty]=\"!hasChild() && !isLoading()\"\n  >\n    @if (isLoading()) {\n      <p>{{ '@acorex:common.status.loading' | translate | async }}</p>\n    }\n    <div class=\"ax-side-children-content\" [hidden]=\"isLoading()\">\n      <ng-content select=\"ax-side-menu-item, ng-container, [ngTemplateOutlet]\"></ng-content>\n    </div>\n  </div>\n\n  <ng-content select=\"ax-divider\"></ng-content>\n  <ng-template #menuItemContent>\n    <div class=\"ax-start-side\">\n      <ng-content select=\"ax-prefix\"></ng-content>\n      @if (text()) {\n        <span>{{ text() }}</span>\n      }\n      <ng-content select=\"ax-text\"></ng-content>\n      <div class=\"ax-inside-text\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n    <div class=\"ax-end-side\">\n      <ng-content select=\"ax-suffix\"></ng-content>\n      @if (hasChild() && !isLoading() && toggleOnClick()) {\n        <span class=\"ax-icon ax-icon-chevron-right arrow-icon\" [class.arrow-icon-expand]=\"!isCollapsed()\"> </span>\n      }\n      @if (isLoading()) {\n        <ax-loading></ax-loading>\n      }\n    </div>\n  </ng-template>\n</div>\n" }]
-        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }, { type: i0.Output, args: ["textChange"] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }, { type: i0.Output, args: ["isLoadingChange"] }], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }], onClick: [{ type: i0.Output, args: ["onClick"] }], tooltipText: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipText", required: false }] }], toggleOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleOnClick", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], routerLinkActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActive", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], childItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AXSideMenuItemComponent), { ...{ descendants: true }, isSignal: true }] }], childrenContainer: [{ type: i0.ViewChild, args: ['childrenContainer', { isSignal: true }] }] } });
+                        AXPopoverComponent,
+                    ], providers: [{ provide: AXComponent, useExisting: AXSideMenuItemComponent }], template: "<div [axTooltip]=\"tooltipStatus() ? tooltipText() : null\">\n  <ng-content select=\"ax-title\"></ng-content>\n  @if (routerLink()) {\n    <a\n      #menuItemTrigger\n      [axRipple]\n      [target]=\"target()\"\n      class=\"ax-side-item\"\n      [routerLink]=\"routerLink()\"\n      (click)=\"_handleClickEvent($event)\"\n      [class.ax-state-disabled]=\"disabled\"\n      [routerLinkActive]=\"routerLinkActive()\"\n      [routerLinkActiveOptions]=\"routerLinkActiveOptions()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </a>\n  } @else if (href()) {\n    <a\n      #menuItemTrigger\n      [axRipple]\n      [href]=\"href()\"\n      [target]=\"target()\"\n      class=\"ax-side-item\"\n      [class.ax-state-active]=\"active()\"\n      (click)=\"_handleClickEvent($event)\"\n      [class.ax-state-disabled]=\"disabled\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </a>\n  } @else {\n    <div\n      #menuItemTrigger\n      [axRipple]\n      class=\"ax-side-item\"\n      [class.ax-state-active]=\"active()\"\n      (click)=\"_handleClickEvent($event)\"\n      [class.ax-state-disabled]=\"disabled\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </div>\n  }\n\n  <div\n    class=\"ax-side-children\"\n    [class.ax-collapsed]=\"!isCompactMode() && isCollapsed()\"\n    [class.ax-empty]=\"!hasChild() && !isLoading()\"\n  >\n    @if (isLoading()) {\n      <p>{{ '@acorex:common.status.loading' | translate | async }}</p>\n    }\n    <div #childrenSlot class=\"ax-side-children-content\" [hidden]=\"isLoading()\">\n      <ng-content select=\"ax-side-menu-item, ng-container, [ngTemplateOutlet]\"></ng-content>\n    </div>\n  </div>\n\n  <ax-popover\n    #childrenPopover\n    class=\"ax-side-menu-children-popover\"\n    [target]=\"menuItemTrigger().nativeElement\"\n    [openOn]=\"'manual'\"\n    [closeOn]=\"'clickOut'\"\n    [placement]=\"'end-top'\"\n    [offsetX]=\"8\"\n    [disabled]=\"!isCompactMode() || disabled || isLoading()\"\n    panelClass=\"ax-side-menu-popover\"\n    (onClosed)=\"_handlePopoverClosed()\"\n  >\n    <div #popoverSlot class=\"ax-side-children-content\"></div>\n  </ax-popover>\n\n  <ng-content select=\"ax-divider\"></ng-content>\n  <ng-template #menuItemContent>\n    <div class=\"ax-start-side\">\n      <ng-content select=\"ax-prefix\"></ng-content>\n      @if (text()) {\n        <span>{{ text() }}</span>\n      }\n      <div class=\"ax-inside-text\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n    <div class=\"ax-end-side\">\n      <ng-content select=\"ax-suffix\"></ng-content>\n      @if (hasChild() && !isLoading() && toggleOnClick() && !isFirstLevel()) {\n        <span class=\"ax-icon ax-icon-chevron-right arrow-icon\" [class.arrow-icon-expand]=\"!isCollapsed()\"> </span>\n      }\n      @if (isLoading()) {\n        <ax-loading></ax-loading>\n      }\n    </div>\n  </ng-template>\n</div>\n" }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }, { type: i0.Output, args: ["textChange"] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }, { type: i0.Output, args: ["isLoadingChange"] }], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }], onClick: [{ type: i0.Output, args: ["onClick"] }], tooltipText: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipText", required: false }] }], childrenPopover: [{ type: i0.ViewChild, args: ['childrenPopover', { isSignal: true }] }], menuItemTrigger: [{ type: i0.ViewChild, args: ['menuItemTrigger', { isSignal: true }] }], toggleOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleOnClick", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], routerLinkActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActive", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], childItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AXSideMenuItemComponent), { ...{ descendants: true }, isSignal: true }] }], childrenSlot: [{ type: i0.ViewChild, args: ['childrenSlot', { isSignal: true }] }], popoverSlot: [{ type: i0.ViewChild, args: ['popoverSlot', { isSignal: true }] }] } });
 
 /**
  * @category
@@ -290,7 +350,6 @@ class AXSideMenuComponent extends NXComponent {
         this.location = input('start', ...(ngDevMode ? [{ debugName: "location" }] : []));
         this.mode = input('full', ...(ngDevMode ? [{ debugName: "mode" }] : []));
         this.elementRef = inject(ElementRef);
-        this.firstLevelItems = signal([], ...(ngDevMode ? [{ debugName: "firstLevelItems" }] : []));
         /**
          * All `ax-side-menu-item` instances discovered by walking the host DOM.
          *
@@ -305,9 +364,7 @@ class AXSideMenuComponent extends NXComponent {
         this._items = signal([], ...(ngDevMode ? [{ debugName: "_items" }] : []));
         /** Read-only signal exposing every discovered `ax-side-menu-item` instance. */
         this.children = this._items.asReadonly();
-        this.document = inject(DOCUMENT);
         this.platformId = inject(PLATFORM_ID);
-        this.renderer = inject(Renderer2);
         this.destroyRef = inject(DestroyRef);
         this.hostElement = this.elementRef.nativeElement;
         this.#init = afterNextRender(() => {
@@ -318,48 +375,23 @@ class AXSideMenuComponent extends NXComponent {
             observer.observe(this.elementRef.nativeElement, { childList: true, subtree: true });
             this.destroyRef.onDestroy(() => observer.disconnect());
         });
-        this.#eff = effect(() => {
-            if (this.mode() === 'compact') {
-                this.firstLevelItems().forEach((item) => {
-                    item.tooltipStatus.set(true);
-                });
-            }
-            else {
-                this.firstLevelItems().forEach((item) => {
-                    item.tooltipStatus.set(false);
-                });
-            }
-        }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
-        this.#eff2 = effect(() => {
+        this.#syncTooltips = effect(() => {
             const isCompact = this.mode() === 'compact';
             this._items().forEach((item) => {
                 const isFirstLevel = !item.getHostElement().parentElement?.closest('.ax-side-children-content');
                 item.tooltipStatus.set(isCompact && isFirstLevel);
             });
-        }, ...(ngDevMode ? [{ debugName: "#eff2" }] : []));
-        // In compact mode, first-level items render their submenu as an absolutely positioned
-        // flyout. Close any open first-level item when the user clicks anywhere outside the menu.
-        this.#outsideClickEff = effect((onCleanup) => {
-            if (!isPlatformBrowser(this.platformId))
-                return;
-            if (this.mode() !== 'compact')
-                return;
-            const host = this.elementRef.nativeElement;
-            const unlisten = this.renderer.listen(this.document, 'click', (event) => {
-                const target = event.target;
-                if (!target || host.contains(target))
-                    return;
-                this.closeFirstLevelItems();
-            });
-            onCleanup(() => unlisten());
-        }, ...(ngDevMode ? [{ debugName: "#outsideClickEff" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "#syncTooltips" }] : []));
+        /** Push full/compact mode to every menu item whenever mode changes. */
+        this.#syncItemMode = effect(() => {
+            const mode = this.mode();
+            this._items().forEach((item) => item.syncMenuMode(mode));
+        }, ...(ngDevMode ? [{ debugName: "#syncItemMode" }] : []));
     }
     #init;
-    #eff;
-    #eff2;
-    // In compact mode, first-level items render their submenu as an absolutely positioned
-    // flyout. Close any open first-level item when the user clicks anywhere outside the menu.
-    #outsideClickEff;
+    #syncTooltips;
+    /** Push full/compact mode to every menu item whenever mode changes. */
+    #syncItemMode;
     /**
      * Walks the host DOM to discover every nested `ax-side-menu-item`, looks up
      * the component instance through the `__axContext__` property that
@@ -386,29 +418,15 @@ class AXSideMenuComponent extends NXComponent {
         }
         this.addFirstLevelClass();
     }
-    closeFirstLevelItems() {
-        this._items().forEach((item) => {
-            const isFirstLevel = !item.getHostElement().parentElement?.closest('.ax-side-children-content');
-            if (isFirstLevel && !item.isCollapsed()) {
-                item.isCollapsed.set(true);
-            }
-        });
-    }
     addFirstLevelClass() {
         const allChildren = this._items();
-        if (!allChildren.length) {
-            this.firstLevelItems.set([]);
-            return;
-        }
         allChildren.forEach((item) => item.getHostElement().querySelector('.ax-side-item')?.classList.remove('first-level'));
-        const filter = allChildren.filter((item) => {
+        allChildren
+            .filter((item) => {
             const itemElement = item.getHostElement();
             return this.hostElement.contains(itemElement) && !itemElement.parentElement?.closest('.ax-side-children-content');
-        });
-        this.firstLevelItems.set(filter);
-        filter.forEach((item) => {
-            item.getHostElement().querySelector('.ax-side-item')?.classList.add('first-level');
-        });
+        })
+            .forEach((item) => item.getHostElement().querySelector('.ax-side-item')?.classList.add('first-level'));
     }
     /** @ignore */
     get __hostClass() {
@@ -418,7 +436,7 @@ class AXSideMenuComponent extends NXComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXSideMenuComponent, isStandalone: true, selector: "ax-side-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, location: { classPropertyName: "location", publicName: "location", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
             { provide: AXComponent, useExisting: AXSideMenuComponent },
             { provide: AXSideMenuBase, useExisting: AXSideMenuComponent },
-        ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-side-menu-item,ax-title,ng-container,[ngTemplateOutlet]\"></ng-content>\n\n@for (node of items(); track node) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n<ng-template #Recursion let-item>\n  @if (item.title) {\n    <ax-title>{{ item.title }}</ax-title>\n  }\n  @if (item.routerLink) {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [target]=\"item.target\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [routerLink]=\"item.routerLink\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n      [routerLinkActive]=\"item.routerLinkActive\"\n      [routerLinkActiveOptions]=\"item.routerLinkActiveOptions\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  } @else if (item.href) {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [href]=\"item.href\"\n      [target]=\"item.target\"\n      [active]=\"item.active\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  } @else {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [active]=\"item.active\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  }\n\n  <ng-template #sideMenuItemContent>\n    <ax-prefix>\n      @if (item.icon) {\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      }\n    </ax-prefix>\n    @if (item.data) {\n      <ax-text>{{ item.data }}</ax-text>\n    }\n    @if (item.suffixText) {\n      <ax-suffix>\n        <ax-text>{{ item.suffixText }}</ax-text>\n      </ax-suffix>\n    }\n    @for (child of item.items; track child) {\n      <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    }\n  </ng-template>\n</ng-template>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight:initial;--tw-content:\"\";--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer base{:root{--ax-comp-side-menu-indicator-size:2px}}@layer components{ax-side-menu{gap:calc(var(--spacing,.25rem) * 2);width:100%;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:inherit;-webkit-user-select:none;user-select:none;flex-direction:column;display:flex}ax-side-menu>ax-title{margin-block:calc(var(--spacing,.25rem) * 2);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);text-transform:uppercase;opacity:.5;display:block}ax-side-menu ax-side-menu-item ax-title{margin-block:calc(var(--spacing,.25rem) * 2);margin-top:calc(var(--spacing,.25rem) * 2);padding-inline:calc(var(--spacing,.25rem) * 3);padding-bottom:calc(var(--spacing,.25rem) * 1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);text-transform:uppercase;opacity:.5;display:block}ax-side-menu ax-side-menu-item ax-divider{margin-block:calc(var(--spacing,.25rem) * 1);background-color:rgba(var(--ax-sys-color-border-lightest-surface));width:100%;height:1px;display:block}ax-side-menu ax-side-menu-item .ax-side-item{cursor:pointer;justify-content:space-between;align-items:center;gap:calc(var(--spacing,.25rem) * 3);padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 2);font-size:inherit;--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);display:flex;position:relative}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled .ax-ripple{opacity:0}:is(ax-side-menu ax-side-menu-item .ax-side-item:hover,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active):not(:is(ax-side-menu ax-side-menu-item .ax-side-item:hover,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active).ax-state-disabled) ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-sys-color-on-primary-surface))}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side,ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{transition-property:rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));display:block}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{rotate:90deg}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand:where(:dir(rtl),[dir=rtl],[dir=rtl] *),ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand-first-level{rotate:-90deg}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand-first-level:where(:dir(rtl),[dir=rtl],[dir=rtl] *){rotate:90deg}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-sys-color-on-primary-surface))}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:rgba(var(--ax-sys-color-on-surface))!important}@supports (color:color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 30%,transparent)!important}}ax-side-menu ax-side-menu-item .ax-side-children{opacity:1;transition-property:grid-template-rows,opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));grid-template-rows:1fr;padding-inline-start:calc(var(--spacing,.25rem) * 5);display:grid}ax-side-menu ax-side-menu-item .ax-side-children.ax-collapsed{opacity:0;grid-template-rows:0fr}ax-side-menu ax-side-menu-item .ax-side-children.ax-empty{display:none}ax-side-menu ax-side-menu-item .ax-side-children .ax-side-children-content{overflow:hidden}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child{padding-top:var(--ax-comp-side-menu-children-gap,.5rem);padding-top:calc(var(--spacing,.25rem) * 2)}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child ax-title{margin-top:calc(var(--spacing,.25rem) * 4)}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item .ax-side-item{--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400)}ax-side-menu ax-side-menu-item .ax-side-children-content{gap:calc(var(--spacing,.25rem) * 2);flex-direction:column;display:flex}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item{border-radius:var(--ax-sys-border-radius)}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover.ax-state-d isabled){background-color:rgba(var(--ax-sys-color-surface));color:rgba(var(--ax-sys-color-on-surface))}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-on-primary-surface))}ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color{gap:calc(var(--spacing,.25rem) * 0)}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-ripple{display:none}:is(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color).ax-location-start .ax-side-children,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color).ax-location-start .ax-side-item):before{width:calc(var(--ax-comp-side-menu-indicator-size) / 2);inset-inline-start:calc(var(--spacing,.25rem) * 0)}:is(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color).ax-location-end .ax-side-children,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color).ax-location-end .ax-side-item):before{width:calc(var(--ax-comp-side-menu-indicator-size) / 2);inset-inline-end:calc(var(--spacing,.25rem) * 0)}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) ax-side-menu-item,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-children,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item{position:relative}:is(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) ax-side-menu-item,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-children,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item):before{background-color:rgba(var(--ax-sys-color-border-lightest-surface));height:100%;transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-content:\"\";content:var(--tw-content);position:absolute}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item:hover:not(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item.ax-state-disabled),:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item.ax-state-active:not(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item.ax-state-active.ax-state-disabled){color:rgba(var(--ax-sys-color-primary-surface))}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item.ax-state-active:not(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item.ax-state-active.ax-state-disabled):before{height:100%;width:var(--ax-comp-side-menu-indicator-size);background-color:rgba(var(--ax-comp-side-menu-indicator-active-color,var(--ax-comp-side-menu-bg-color,var(--ax-sys-color-primary-surface))));--tw-content:\"\";content:var(--tw-content);position:absolute}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-children ax-side-menu-item:first-child{padding-top:calc(var(--spacing,.25rem) * 0)}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-children{gap:calc(var(--spacing,.25rem) * 0)}ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}ax-side-menu.ax-look-default{gap:calc(var(--spacing,.25rem) * 1)}ax-side-menu.ax-look-default ax-icon{opacity:.6}ax-side-menu.ax-look-default .ax-side-item{border-radius:var(--ax-sys-border-radius);padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 2)}ax-side-menu.ax-look-default .ax-side-item:hover:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-surface))}@supports (color:color-mix(in lab,red,red)){ax-side-menu.ax-look-default .ax-side-item:hover:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-disabled){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-surface)) 50%,transparent)}}ax-side-menu.ax-look-default .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-active.ax-state-disabled){background-color:rgba(var(--ax-sys-color-surface))}@supports (color:color-mix(in lab,red,red)){ax-side-menu.ax-look-default .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-active.ax-state-disabled){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-surface)) 10%,transparent)}}ax-side-menu.ax-look-default .ax-side-children{gap:calc(var(--spacing,.25rem) * 1);padding-inline-start:calc(var(--spacing,.25rem) * 9);position:relative}ax-side-menu.ax-look-default .ax-side-children:before{background-color:rgba(var(--ax-sys-color-border-light-surface));--tw-content:\"\";content:var(--tw-content);width:1px;height:100%;margin-inline-start:calc(var(--spacing,.25rem) * 6);position:absolute}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item .ax-side-item{padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1)}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item:first-child{padding-top:calc(var(--spacing,.25rem) * 0)}ax-side-menu.ax-mode-compact{width:fit-content!important}ax-side-menu.ax-mode-compact.ax-look-pills ax-side-menu-item .ax-side-item:hover:not(ax-side-menu.ax-mode-compact.ax-look-pills ax-side-menu-item .ax-side-item:hover.ax-state-disabled){background-color:rgba(var(--ax-sys-color-darker-surface));color:rgba(var(--ax-sys-color-on-surface))}ax-side-menu.ax-mode-compact.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu.ax-mode-compact.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-on-primary-surface))}:is(ax-side-menu.ax-mode-compact.ax-look-with-line,ax-side-menu.ax-mode-compact.ax-look-with-line-color) ax-side-menu-item .ax-side-children:before{display:none}ax-side-menu.ax-mode-compact ax-side-menu-item{position:relative;padding:calc(var(--spacing,.25rem) * .5)!important}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-children{top:calc(var(--spacing,.25rem) * 0);border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing,.25rem) * 1);position:absolute;left:calc(100% + .5rem);right:auto}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-children:where(:dir(rtl),[dir=rtl],[dir=rtl] *){left:auto;right:calc(100% + .5rem)}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-children .ax-side-children-content{overflow:visible}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-children ax-side-menu-item .ax-side-item{white-space:nowrap}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{rotate:90deg}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand,ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand:where(:dir(rtl),[dir=rtl],[dir=rtl] *){rotate:0deg}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-item.first-level .ax-end-side,ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-item.first-level .ax-inside-text:not(.ax-badge-text){display:none!important}[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon:before{--tw-scale-x: -100% ;scale:var(--tw-scale-x) var(--tw-scale-y)}}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}@property --tw-scale-x{syntax:\"*\";inherits:false;initial-value:1}@property --tw-scale-y{syntax:\"*\";inherits:false;initial-value:1}@property --tw-scale-z{syntax:\"*\";inherits:false;initial-value:1}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXSideMenuItemComponent, selector: "ax-side-menu-item", inputs: ["disabled", "text", "active", "isLoading", "isCollapsed", "tooltipText", "toggleOnClick", "href", "routerLink", "routerLinkActive", "routerLinkActiveOptions", "target"], outputs: ["textChange", "activeChange", "isLoadingChange", "isCollapsedChange", "onClick"] }, { 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: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-side-menu-item,ax-title,ng-container,[ngTemplateOutlet]\"></ng-content>\n\n@for (node of items(); track node) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n<ng-template #Recursion let-item>\n  @if (item.title) {\n    <ax-title>{{ item.title }}</ax-title>\n  }\n  @if (item.routerLink) {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [target]=\"item.target\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [routerLink]=\"item.routerLink\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n      [routerLinkActive]=\"item.routerLinkActive\"\n      [routerLinkActiveOptions]=\"item.routerLinkActiveOptions\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  } @else if (item.href) {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [href]=\"item.href\"\n      [target]=\"item.target\"\n      [active]=\"item.active\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  } @else {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [active]=\"item.active\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  }\n\n  <ng-template #sideMenuItemContent>\n    <ax-prefix>\n      @if (item.icon) {\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      }\n    </ax-prefix>\n    @if (item.data) {\n      <ax-text>{{ item.data }}</ax-text>\n    }\n    @if (item.suffixText) {\n      <ax-suffix>\n        <ax-text>{{ item.suffixText }}</ax-text>\n      </ax-suffix>\n    }\n    @for (child of item.items; track child) {\n      <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    }\n  </ng-template>\n</ng-template>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight:initial;--tw-content:\"\";--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer base{:root{--ax-comp-side-menu-indicator-size:2px}}@layer components{ax-side-menu{gap:calc(var(--spacing,.25rem) * 2);width:100%;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:inherit;-webkit-user-select:none;user-select:none;flex-direction:column;display:flex}ax-side-menu>ax-title{margin-block:calc(var(--spacing,.25rem) * 2);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);text-transform:uppercase;opacity:.5;display:block}ax-side-menu ax-side-menu-item ax-title{margin-block:calc(var(--spacing,.25rem) * 2);margin-top:calc(var(--spacing,.25rem) * 2);padding-inline:calc(var(--spacing,.25rem) * 3);padding-bottom:calc(var(--spacing,.25rem) * 1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);text-transform:uppercase;opacity:.5;display:block}ax-side-menu ax-side-menu-item ax-divider{margin-block:calc(var(--spacing,.25rem) * 1);background-color:rgba(var(--ax-sys-color-border-lightest-surface));width:100%;height:1px;display:block}ax-side-menu ax-side-menu-item .ax-side-item{cursor:pointer;justify-content:space-between;align-items:center;gap:calc(var(--spacing,.25rem) * 3);padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 2);font-size:inherit;--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);display:flex;position:relative}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled .ax-ripple{opacity:0}:is(ax-side-menu ax-side-menu-item .ax-side-item:hover,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active):not(:is(ax-side-menu ax-side-menu-item .ax-side-item:hover,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active).ax-state-disabled) ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-sys-color-on-primary-surface))}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side,ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{transition-property:rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));display:block}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{rotate:90deg}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand:where(:dir(rtl),[dir=rtl],[dir=rtl] *){rotate:-90deg}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-sys-color-on-primary-surface))}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:rgba(var(--ax-sys-color-on-surface))!important}@supports (color:color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 30%,transparent)!important}}ax-side-menu ax-side-menu-item .ax-side-children{opacity:1;transition-property:grid-template-rows,opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));grid-template-rows:1fr;padding-inline-start:calc(var(--spacing,.25rem) * 5);display:grid}ax-side-menu ax-side-menu-item .ax-side-children.ax-collapsed{opacity:0;grid-template-rows:0fr}ax-side-menu ax-side-menu-item .ax-side-children.ax-empty{display:none}ax-side-menu ax-side-menu-item .ax-side-children .ax-side-children-content{overflow:hidden}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child{padding-top:var(--ax-comp-side-menu-children-gap,.5rem);padding-top:calc(var(--spacing,.25rem) * 2)}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child ax-title{margin-top:calc(var(--spacing,.25rem) * 4)}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item .ax-side-item{--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400)}ax-side-menu ax-side-menu-item .ax-side-children-content{gap:calc(var(--spacing,.25rem) * 2);flex-direction:column;display:flex}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item{border-radius:var(--ax-sys-border-radius)}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover.ax-state-d isabled){background-color:rgba(var(--ax-sys-color-surface));color:rgba(var(--ax-sys-color-on-surface))}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-on-primary-surface))}ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color{gap:calc(var(--spacing,.25rem) * 0)}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-ripple{display:none}:is(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color).ax-location-start .ax-side-children,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color).ax-location-start .ax-side-item):before{width:calc(var(--ax-comp-side-menu-indicator-size) / 2);inset-inline-start:calc(var(--spacing,.25rem) * 0)}:is(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color).ax-location-end .ax-side-children,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color).ax-location-end .ax-side-item):before{width:calc(var(--ax-comp-side-menu-indicator-size) / 2);inset-inline-end:calc(var(--spacing,.25rem) * 0)}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) ax-side-menu-item,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-children,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item{position:relative}:is(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) ax-side-menu-item,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-children,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item):before{background-color:rgba(var(--ax-sys-color-border-lightest-surface));height:100%;transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-content:\"\";content:var(--tw-content);position:absolute}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item:hover:not(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item.ax-state-disabled),:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item.ax-state-active:not(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item.ax-state-active.ax-state-disabled){color:rgba(var(--ax-sys-color-primary-surface))}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item.ax-state-active:not(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item.ax-state-active.ax-state-disabled):before{height:100%;width:var(--ax-comp-side-menu-indicator-size);background-color:rgba(var(--ax-comp-side-menu-indicator-active-color,var(--ax-comp-side-menu-bg-color,var(--ax-sys-color-primary-surface))));--tw-content:\"\";content:var(--tw-content);position:absolute}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-children ax-side-menu-item:first-child{padding-top:calc(var(--spacing,.25rem) * 0)}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-children{gap:calc(var(--spacing,.25rem) * 0)}ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}ax-side-menu.ax-look-default{gap:calc(var(--spacing,.25rem) * 1)}ax-side-menu.ax-look-default ax-icon{opacity:.6}ax-side-menu.ax-look-default .ax-side-item{border-radius:var(--ax-sys-border-radius);padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 2)}ax-side-menu.ax-look-default .ax-side-item:hover:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-surface))}@supports (color:color-mix(in lab,red,red)){ax-side-menu.ax-look-default .ax-side-item:hover:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-disabled){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-surface)) 50%,transparent)}}ax-side-menu.ax-look-default .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-active.ax-state-disabled){background-color:rgba(var(--ax-sys-color-surface))}@supports (color:color-mix(in lab,red,red)){ax-side-menu.ax-look-default .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-active.ax-state-disabled){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-surface)) 10%,transparent)}}ax-side-menu.ax-look-default .ax-side-children{gap:calc(var(--spacing,.25rem) * 1);padding-inline-start:calc(var(--spacing,.25rem) * 9);position:relative}ax-side-menu.ax-look-default .ax-side-children:before{background-color:rgba(var(--ax-sys-color-border-light-surface));--tw-content:\"\";content:var(--tw-content);width:1px;height:100%;margin-inline-start:calc(var(--spacing,.25rem) * 6);position:absolute}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item .ax-side-item{padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1)}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item:first-child{padding-top:calc(var(--spacing,.25rem) * 0)}ax-side-menu.ax-mode-compact{width:fit-content!important}ax-side-menu.ax-mode-compact .ax-inside-text{display:none}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item:hover:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-darker-surface));color:rgba(var(--ax-sys-color-on-surface))}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-active:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-on-primary-surface))}ax-side-menu.ax-mode-compact ax-side-menu-item{position:relative;padding:calc(var(--spacing,.25rem) * .5)!important}[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon:before{--tw-scale-x: -100% ;scale:var(--tw-scale-x) var(--tw-scale-y)}.ax-side-menu-popover{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:inherit;-webkit-user-select:none;user-select:none}.ax-side-menu-popover .ax-side-children-content{min-width:calc(var(--spacing,.25rem) * 40);gap:calc(var(--spacing,.25rem) * 1);border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex;overflow:visible}.ax-side-menu-popover ax-side-menu-item{width:100%;padding:calc(var(--spacing,.25rem) * 0);display:block;position:relative}.ax-side-menu-popover ax-side-menu-item .ax-side-children.ax-empty,.ax-side-menu-popover ax-side-menu-item>ax-popover.ax-side-menu-children-popover>.ax-side-menu-popover-host{display:none}.ax-side-menu-popover ax-side-menu-item .ax-side-item{cursor:pointer;justify-content:space-between;align-items:center;gap:calc(var(--spacing,.25rem) * 3);border-radius:var(--ax-sys-border-radius);width:100%;padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2);--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);white-space:nowrap;display:flex;position:relative}.ax-side-menu-popover ax-side-menu-item .ax-side-item .ax-start-side,.ax-side-menu-popover ax-side-menu-item .ax-side-item .ax-end-side{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}.ax-side-menu-popover ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{transition-property:rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));display:block;rotate:90deg}.ax-side-menu-popover ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand,.ax-side-menu-popover ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand:where(:dir(rtl),[dir=rtl],[dir=rtl] *){rotate:0deg}.ax-side-menu-popover .ax-side-menu-popover-host.ax-look-pills ax-side-menu-item .ax-side-item:hover:not(.ax-side-menu-popover .ax-side-menu-popover-host.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-darker-surface));color:rgba(var(--ax-sys-color-on-surface))}.ax-side-menu-popover .ax-side-menu-popover-host.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active:not(.ax-side-menu-popover .ax-side-menu-popover-host.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-on-primary-surface))}}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}@property --tw-scale-x{syntax:\"*\";inherits:false;initial-value:1}@property --tw-scale-y{syntax:\"*\";inherits:false;initial-value:1}@property --tw-scale-z{syntax:\"*\";inherits:false;initial-value:1}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXSideMenuItemComponent, selector: "ax-side-menu-item", inputs: ["disabled", "text", "active", "isLoading", "isCollapsed", "tooltipText", "toggleOnClick", "href", "routerLink", "routerLinkActive", "routerLinkActiveOptions", "target"], outputs: ["textChange", "activeChange", "isLoadingChange", "isCollapsedChange", "onClick"] }, { 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: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXSideMenuComponent, decorators: [{
             type: Component,
@@ -432,7 +450,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                     ], providers: [
                         { provide: AXComponent, useExisting: AXSideMenuComponent },
                         { provide: AXSideMenuBase, useExisting: AXSideMenuComponent },
-                    ], template: "<ng-content select=\"ax-side-menu-item,ax-title,ng-container,[ngTemplateOutlet]\"></ng-content>\n\n@for (node of items(); track node) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n<ng-template #Recursion let-item>\n  @if (item.title) {\n    <ax-title>{{ item.title }}</ax-title>\n  }\n  @if (item.routerLink) {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [target]=\"item.target\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [routerLink]=\"item.routerLink\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n      [routerLinkActive]=\"item.routerLinkActive\"\n      [routerLinkActiveOptions]=\"item.routerLinkActiveOptions\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  } @else if (item.href) {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [href]=\"item.href\"\n      [target]=\"item.target\"\n      [active]=\"item.active\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  } @else {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [active]=\"item.active\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  }\n\n  <ng-template #sideMenuItemContent>\n    <ax-prefix>\n      @if (item.icon) {\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      }\n    </ax-prefix>\n    @if (item.data) {\n      <ax-text>{{ item.data }}</ax-text>\n    }\n    @if (item.suffixText) {\n      <ax-suffix>\n        <ax-text>{{ item.suffixText }}</ax-text>\n      </ax-suffix>\n    }\n    @for (child of item.items; track child) {\n      <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    }\n  </ng-template>\n</ng-template>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight:initial;--tw-content:\"\";--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer base{:root{--ax-comp-side-menu-indicator-size:2px}}@layer components{ax-side-menu{gap:calc(var(--spacing,.25rem) * 2);width:100%;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:inherit;-webkit-user-select:none;user-select:none;flex-direction:column;display:flex}ax-side-menu>ax-title{margin-block:calc(var(--spacing,.25rem) * 2);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);text-transform:uppercase;opacity:.5;display:block}ax-side-menu ax-side-menu-item ax-title{margin-block:calc(var(--spacing,.25rem) * 2);margin-top:calc(var(--spacing,.25rem) * 2);padding-inline:calc(var(--spacing,.25rem) * 3);padding-bottom:calc(var(--spacing,.25rem) * 1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);text-transform:uppercase;opacity:.5;display:block}ax-side-menu ax-side-menu-item ax-divider{margin-block:calc(var(--spacing,.25rem) * 1);background-color:rgba(var(--ax-sys-color-border-lightest-surface));width:100%;height:1px;display:block}ax-side-menu ax-side-menu-item .ax-side-item{cursor:pointer;justify-content:space-between;align-items:center;gap:calc(var(--spacing,.25rem) * 3);padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 2);font-size:inherit;--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);display:flex;position:relative}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled .ax-ripple{opacity:0}:is(ax-side-menu ax-side-menu-item .ax-side-item:hover,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active):not(:is(ax-side-menu ax-side-menu-item .ax-side-item:hover,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active).ax-state-disabled) ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-sys-color-on-primary-surface))}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side,ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{transition-property:rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));display:block}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{rotate:90deg}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand:where(:dir(rtl),[dir=rtl],[dir=rtl] *),ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand-first-level{rotate:-90deg}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand-first-level:where(:dir(rtl),[dir=rtl],[dir=rtl] *){rotate:90deg}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-sys-color-on-primary-surface))}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:rgba(var(--ax-sys-color-on-surface))!important}@supports (color:color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 30%,transparent)!important}}ax-side-menu ax-side-menu-item .ax-side-children{opacity:1;transition-property:grid-template-rows,opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));grid-template-rows:1fr;padding-inline-start:calc(var(--spacing,.25rem) * 5);display:grid}ax-side-menu ax-side-menu-item .ax-side-children.ax-collapsed{opacity:0;grid-template-rows:0fr}ax-side-menu ax-side-menu-item .ax-side-children.ax-empty{display:none}ax-side-menu ax-side-menu-item .ax-side-children .ax-side-children-content{overflow:hidden}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child{padding-top:var(--ax-comp-side-menu-children-gap,.5rem);padding-top:calc(var(--spacing,.25rem) * 2)}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child ax-title{margin-top:calc(var(--spacing,.25rem) * 4)}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item .ax-side-item{--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400)}ax-side-menu ax-side-menu-item .ax-side-children-content{gap:calc(var(--spacing,.25rem) * 2);flex-direction:column;display:flex}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item{border-radius:var(--ax-sys-border-radius)}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover.ax-state-d isabled){background-color:rgba(var(--ax-sys-color-surface));color:rgba(var(--ax-sys-color-on-surface))}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-on-primary-surface))}ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color{gap:calc(var(--spacing,.25rem) * 0)}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-ripple{display:none}:is(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color).ax-location-start .ax-side-children,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color).ax-location-start .ax-side-item):before{width:calc(var(--ax-comp-side-menu-indicator-size) / 2);inset-inline-start:calc(var(--spacing,.25rem) * 0)}:is(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color).ax-location-end .ax-side-children,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color).ax-location-end .ax-side-item):before{width:calc(var(--ax-comp-side-menu-indicator-size) / 2);inset-inline-end:calc(var(--spacing,.25rem) * 0)}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) ax-side-menu-item,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-children,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item{position:relative}:is(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) ax-side-menu-item,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-children,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item):before{background-color:rgba(var(--ax-sys-color-border-lightest-surface));height:100%;transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-content:\"\";content:var(--tw-content);position:absolute}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item:hover:not(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item.ax-state-disabled),:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item.ax-state-active:not(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item.ax-state-active.ax-state-disabled){color:rgba(var(--ax-sys-color-primary-surface))}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item.ax-state-active:not(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item.ax-state-active.ax-state-disabled):before{height:100%;width:var(--ax-comp-side-menu-indicator-size);background-color:rgba(var(--ax-comp-side-menu-indicator-active-color,var(--ax-comp-side-menu-bg-color,var(--ax-sys-color-primary-surface))));--tw-content:\"\";content:var(--tw-content);position:absolute}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-children ax-side-menu-item:first-child{padding-top:calc(var(--spacing,.25rem) * 0)}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-children{gap:calc(var(--spacing,.25rem) * 0)}ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}ax-side-menu.ax-look-default{gap:calc(var(--spacing,.25rem) * 1)}ax-side-menu.ax-look-default ax-icon{opacity:.6}ax-side-menu.ax-look-default .ax-side-item{border-radius:var(--ax-sys-border-radius);padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 2)}ax-side-menu.ax-look-default .ax-side-item:hover:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-surface))}@supports (color:color-mix(in lab,red,red)){ax-side-menu.ax-look-default .ax-side-item:hover:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-disabled){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-surface)) 50%,transparent)}}ax-side-menu.ax-look-default .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-active.ax-state-disabled){background-color:rgba(var(--ax-sys-color-surface))}@supports (color:color-mix(in lab,red,red)){ax-side-menu.ax-look-default .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-active.ax-state-disabled){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-surface)) 10%,transparent)}}ax-side-menu.ax-look-default .ax-side-children{gap:calc(var(--spacing,.25rem) * 1);padding-inline-start:calc(var(--spacing,.25rem) * 9);position:relative}ax-side-menu.ax-look-default .ax-side-children:before{background-color:rgba(var(--ax-sys-color-border-light-surface));--tw-content:\"\";content:var(--tw-content);width:1px;height:100%;margin-inline-start:calc(var(--spacing,.25rem) * 6);position:absolute}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item .ax-side-item{padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1)}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item:first-child{padding-top:calc(var(--spacing,.25rem) * 0)}ax-side-menu.ax-mode-compact{width:fit-content!important}ax-side-menu.ax-mode-compact.ax-look-pills ax-side-menu-item .ax-side-item:hover:not(ax-side-menu.ax-mode-compact.ax-look-pills ax-side-menu-item .ax-side-item:hover.ax-state-disabled){background-color:rgba(var(--ax-sys-color-darker-surface));color:rgba(var(--ax-sys-color-on-surface))}ax-side-menu.ax-mode-compact.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu.ax-mode-compact.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-on-primary-surface))}:is(ax-side-menu.ax-mode-compact.ax-look-with-line,ax-side-menu.ax-mode-compact.ax-look-with-line-color) ax-side-menu-item .ax-side-children:before{display:none}ax-side-menu.ax-mode-compact ax-side-menu-item{position:relative;padding:calc(var(--spacing,.25rem) * .5)!important}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-children{top:calc(var(--spacing,.25rem) * 0);border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing,.25rem) * 1);position:absolute;left:calc(100% + .5rem);right:auto}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-children:where(:dir(rtl),[dir=rtl],[dir=rtl] *){left:auto;right:calc(100% + .5rem)}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-children .ax-side-children-content{overflow:visible}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-children ax-side-menu-item .ax-side-item{white-space:nowrap}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{rotate:90deg}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand,ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand:where(:dir(rtl),[dir=rtl],[dir=rtl] *){rotate:0deg}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-item.first-level .ax-end-side,ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-item.first-level .ax-inside-text:not(.ax-badge-text){display:none!important}[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon:before{--tw-scale-x: -100% ;scale:var(--tw-scale-x) var(--tw-scale-y)}}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}@property --tw-scale-x{syntax:\"*\";inherits:false;initial-value:1}@property --tw-scale-y{syntax:\"*\";inherits:false;initial-value:1}@property --tw-scale-z{syntax:\"*\";inherits:false;initial-value:1}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "<ng-content select=\"ax-side-menu-item,ax-title,ng-container,[ngTemplateOutlet]\"></ng-content>\n\n@for (node of items(); track node) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n<ng-template #Recursion let-item>\n  @if (item.title) {\n    <ax-title>{{ item.title }}</ax-title>\n  }\n  @if (item.routerLink) {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [target]=\"item.target\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [routerLink]=\"item.routerLink\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n      [routerLinkActive]=\"item.routerLinkActive\"\n      [routerLinkActiveOptions]=\"item.routerLinkActiveOptions\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  } @else if (item.href) {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [href]=\"item.href\"\n      [target]=\"item.target\"\n      [active]=\"item.active\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  } @else {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [active]=\"item.active\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  }\n\n  <ng-template #sideMenuItemContent>\n    <ax-prefix>\n      @if (item.icon) {\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      }\n    </ax-prefix>\n    @if (item.data) {\n      <ax-text>{{ item.data }}</ax-text>\n    }\n    @if (item.suffixText) {\n      <ax-suffix>\n        <ax-text>{{ item.suffixText }}</ax-text>\n      </ax-suffix>\n    }\n    @for (child of item.items; track child) {\n      <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    }\n  </ng-template>\n</ng-template>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight:initial;--tw-content:\"\";--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer base{:root{--ax-comp-side-menu-indicator-size:2px}}@layer components{ax-side-menu{gap:calc(var(--spacing,.25rem) * 2);width:100%;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:inherit;-webkit-user-select:none;user-select:none;flex-direction:column;display:flex}ax-side-menu>ax-title{margin-block:calc(var(--spacing,.25rem) * 2);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);text-transform:uppercase;opacity:.5;display:block}ax-side-menu ax-side-menu-item ax-title{margin-block:calc(var(--spacing,.25rem) * 2);margin-top:calc(var(--spacing,.25rem) * 2);padding-inline:calc(var(--spacing,.25rem) * 3);padding-bottom:calc(var(--spacing,.25rem) * 1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);text-transform:uppercase;opacity:.5;display:block}ax-side-menu ax-side-menu-item ax-divider{margin-block:calc(var(--spacing,.25rem) * 1);background-color:rgba(var(--ax-sys-color-border-lightest-surface));width:100%;height:1px;display:block}ax-side-menu ax-side-menu-item .ax-side-item{cursor:pointer;justify-content:space-between;align-items:center;gap:calc(var(--spacing,.25rem) * 3);padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 2);font-size:inherit;--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);display:flex;position:relative}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled .ax-ripple{opacity:0}:is(ax-side-menu ax-side-menu-item .ax-side-item:hover,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active):not(:is(ax-side-menu ax-side-menu-item .ax-side-item:hover,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active).ax-state-disabled) ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-sys-color-on-primary-surface))}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side,ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{transition-property:rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));display:block}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{rotate:90deg}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand:where(:dir(rtl),[dir=rtl],[dir=rtl] *){rotate:-90deg}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-sys-color-on-primary-surface))}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:rgba(var(--ax-sys-color-on-surface))!important}@supports (color:color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 30%,transparent)!important}}ax-side-menu ax-side-menu-item .ax-side-children{opacity:1;transition-property:grid-template-rows,opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));grid-template-rows:1fr;padding-inline-start:calc(var(--spacing,.25rem) * 5);display:grid}ax-side-menu ax-side-menu-item .ax-side-children.ax-collapsed{opacity:0;grid-template-rows:0fr}ax-side-menu ax-side-menu-item .ax-side-children.ax-empty{display:none}ax-side-menu ax-side-menu-item .ax-side-children .ax-side-children-content{overflow:hidden}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child{padding-top:var(--ax-comp-side-menu-children-gap,.5rem);padding-top:calc(var(--spacing,.25rem) * 2)}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child ax-title{margin-top:calc(var(--spacing,.25rem) * 4)}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item .ax-side-item{--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400)}ax-side-menu ax-side-menu-item .ax-side-children-content{gap:calc(var(--spacing,.25rem) * 2);flex-direction:column;display:flex}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item{border-radius:var(--ax-sys-border-radius)}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover.ax-state-d isabled){background-color:rgba(var(--ax-sys-color-surface));color:rgba(var(--ax-sys-color-on-surface))}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-on-primary-surface))}ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color{gap:calc(var(--spacing,.25rem) * 0)}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-ripple{display:none}:is(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color).ax-location-start .ax-side-children,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color).ax-location-start .ax-side-item):before{width:calc(var(--ax-comp-side-menu-indicator-size) / 2);inset-inline-start:calc(var(--spacing,.25rem) * 0)}:is(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color).ax-location-end .ax-side-children,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color).ax-location-end .ax-side-item):before{width:calc(var(--ax-comp-side-menu-indicator-size) / 2);inset-inline-end:calc(var(--spacing,.25rem) * 0)}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) ax-side-menu-item,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-children,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item{position:relative}:is(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) ax-side-menu-item,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-children,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item):before{background-color:rgba(var(--ax-sys-color-border-lightest-surface));height:100%;transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-content:\"\";content:var(--tw-content);position:absolute}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item:hover:not(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item.ax-state-disabled),:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item.ax-state-active:not(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item.ax-state-active.ax-state-disabled){color:rgba(var(--ax-sys-color-primary-surface))}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item.ax-state-active:not(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item.ax-state-active.ax-state-disabled):before{height:100%;width:var(--ax-comp-side-menu-indicator-size);background-color:rgba(var(--ax-comp-side-menu-indicator-active-color,var(--ax-comp-side-menu-bg-color,var(--ax-sys-color-primary-surface))));--tw-content:\"\";content:var(--tw-content);position:absolute}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-children ax-side-menu-item:first-child{padding-top:calc(var(--spacing,.25rem) * 0)}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-children{gap:calc(var(--spacing,.25rem) * 0)}ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}ax-side-menu.ax-look-default{gap:calc(var(--spacing,.25rem) * 1)}ax-side-menu.ax-look-default ax-icon{opacity:.6}ax-side-menu.ax-look-default .ax-side-item{border-radius:var(--ax-sys-border-radius);padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 2)}ax-side-menu.ax-look-default .ax-side-item:hover:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-surface))}@supports (color:color-mix(in lab,red,red)){ax-side-menu.ax-look-default .ax-side-item:hover:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-disabled){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-surface)) 50%,transparent)}}ax-side-menu.ax-look-default .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-active.ax-state-disabled){background-color:rgba(var(--ax-sys-color-surface))}@supports (color:color-mix(in lab,red,red)){ax-side-menu.ax-look-default .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-active.ax-state-disabled){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-surface)) 10%,transparent)}}ax-side-menu.ax-look-default .ax-side-children{gap:calc(var(--spacing,.25rem) * 1);padding-inline-start:calc(var(--spacing,.25rem) * 9);position:relative}ax-side-menu.ax-look-default .ax-side-children:before{background-color:rgba(var(--ax-sys-color-border-light-surface));--tw-content:\"\";content:var(--tw-content);width:1px;height:100%;margin-inline-start:calc(var(--spacing,.25rem) * 6);position:absolute}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item .ax-side-item{padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1)}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item:first-child{padding-top:calc(var(--spacing,.25rem) * 0)}ax-side-menu.ax-mode-compact{width:fit-content!important}ax-side-menu.ax-mode-compact .ax-inside-text{display:none}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item:hover:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-darker-surface));color:rgba(var(--ax-sys-color-on-surface))}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-active:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-on-primary-surface))}ax-side-menu.ax-mode-compact ax-side-menu-item{position:relative;padding:calc(var(--spacing,.25rem) * .5)!important}[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon:before{--tw-scale-x: -100% ;scale:var(--tw-scale-x) var(--tw-scale-y)}.ax-side-menu-popover{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:inherit;-webkit-user-select:none;user-select:none}.ax-side-menu-popover .ax-side-children-content{min-width:calc(var(--spacing,.25rem) * 40);gap:calc(var(--spacing,.25rem) * 1);border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex;overflow:visible}.ax-side-menu-popover ax-side-menu-item{width:100%;padding:calc(var(--spacing,.25rem) * 0);display:block;position:relative}.ax-side-menu-popover ax-side-menu-item .ax-side-children.ax-empty,.ax-side-menu-popover ax-side-menu-item>ax-popover.ax-side-menu-children-popover>.ax-side-menu-popover-host{display:none}.ax-side-menu-popover ax-side-menu-item .ax-side-item{cursor:pointer;justify-content:space-between;align-items:center;gap:calc(var(--spacing,.25rem) * 3);border-radius:var(--ax-sys-border-radius);width:100%;padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2);--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);white-space:nowrap;display:flex;position:relative}.ax-side-menu-popover ax-side-menu-item .ax-side-item .ax-start-side,.ax-side-menu-popover ax-side-menu-item .ax-side-item .ax-end-side{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}.ax-side-menu-popover ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{transition-property:rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));display:block;rotate:90deg}.ax-side-menu-popover ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand,.ax-side-menu-popover ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand:where(:dir(rtl),[dir=rtl],[dir=rtl] *){rotate:0deg}.ax-side-menu-popover .ax-side-menu-popover-host.ax-look-pills ax-side-menu-item .ax-side-item:hover:not(.ax-side-menu-popover .ax-side-menu-popover-host.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-darker-surface));color:rgba(var(--ax-sys-color-on-surface))}.ax-side-menu-popover .ax-side-menu-popover-host.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active:not(.ax-side-menu-popover .ax-side-menu-popover-host.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-on-primary-surface))}}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}@property --tw-scale-x{syntax:\"*\";inherits:false;initial-value:1}@property --tw-scale-y{syntax:\"*\";inherits:false;initial-value:1}@property --tw-scale-z{syntax:\"*\";inherits:false;initial-value:1}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], location: [{ type: i0.Input, args: [{ isSignal: true, alias: "location", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']