@acorex/components 21.1.0-next.2 → 22.0.0-next.1

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

@@ -7,7 +7,7 @@ import { AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation'
 import { AXHtmlUtil, AXUnsubscriber } from '@acorex/core/utils';
 import { isPlatformBrowser, NgTemplateOutlet, AsyncPipe, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { model, output, input, viewChild, signal, computed, inject, ElementRef, PLATFORM_ID, DestroyRef, contentChildren, effect, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component, HostBinding, Directive, NgModule } from '@angular/core';
+import { model, output, input, viewChild, signal, computed, inject, ElementRef, PLATFORM_ID, DestroyRef, contentChildren, effect, afterNextRender, ViewEncapsulation, 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';
@@ -31,54 +31,75 @@ class AXSideMenuItemClickEvent extends AXClickEvent {
 class AXSideMenuItemComponent extends MXInteractiveComponent {
     constructor() {
         super(...arguments);
-        this.text = model('', ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
-        this.active = model(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
-        this.isLoading = model(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
-        this.isCollapsed = model(true, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
+        this.text = model('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        this.active = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+        this.isLoading = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+        this.isCollapsed = model(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
         this.onClick = output();
-        this.toggleOnClick = input(true, ...(ngDevMode ? [{ debugName: "toggleOnClick" }] : /* istanbul ignore next */ []));
-        this.href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : /* istanbul ignore next */ []));
-        this.routerLink = input(...(ngDevMode ? [undefined, { debugName: "routerLink" }] : /* istanbul ignore next */ []));
-        this.routerLinkActive = input('ax-state-active', ...(ngDevMode ? [{ debugName: "routerLinkActive" }] : /* istanbul ignore next */ []));
-        this.routerLinkActiveOptions = input({ exact: false }, ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : /* istanbul ignore next */ []));
-        this.target = input('_self', ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
-        this.menuItemTrigger = viewChild.required('menuItemTrigger');
-        this.hasChild = signal(false, ...(ngDevMode ? [{ debugName: "hasChild" }] : /* istanbul ignore next */ []));
-        this.isCompactMode = computed(() => this.menuMode() === 'compact', ...(ngDevMode ? [{ debugName: "isCompactMode" }] : /* istanbul ignore next */ []));
+        this.toggleOnClick = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "toggleOnClick" }] : /* istanbul ignore next */ []));
+        this.href = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "href" }] : /* istanbul ignore next */ []));
+        this.routerLink = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "routerLink" }] : /* istanbul ignore next */ []));
+        this.routerLinkActive = input('ax-state-active', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "routerLinkActive" }] : /* istanbul ignore next */ []));
+        this.routerLinkActiveOptions = input({ exact: false }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : /* istanbul ignore next */ []));
+        this.target = input('_self', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
+        this.menuItemTrigger = viewChild.required('menuItemTrigger', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuItemTrigger" }] : /* istanbul ignore next */ []));
+        this.hasChild = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasChild" }] : /* istanbul ignore next */ []));
+        this.isCompactMode = computed(() => this.menuMode() === 'compact', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isCompactMode" }] : /* istanbul ignore next */ []));
         /** Top-level rail entry in compact mode (opens the flyout context menu). */
         this.isFirstLevel = computed(() => {
             if (!this.isCompactMode()) {
                 return false;
             }
             return !this.hostElement.parentElement?.closest('.ax-side-children-content');
-        }, ...(ngDevMode ? [{ debugName: "isFirstLevel" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isFirstLevel" }] : /* istanbul ignore next */ []));
         /** Tooltip text for first-level items in compact mode only. */
         this.tooltipContent = computed(() => {
             if (!this.isFirstLevel())
                 return null;
             return this.text().trim() || this.contentLabel().trim() || null;
-        }, ...(ngDevMode ? [{ debugName: "tooltipContent" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tooltipContent" }] : /* istanbul ignore next */ []));
         /** Accessible label for icon-only compact root items. */
         this.compactAriaLabel = computed(() => {
             if (!this.isFirstLevel())
                 return null;
             return this.text().trim() || this.contentLabel().trim() || null;
-        }, ...(ngDevMode ? [{ debugName: "compactAriaLabel" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "compactAriaLabel" }] : /* istanbul ignore next */ []));
         this.elem = inject((ElementRef));
         this.platformId = inject(PLATFORM_ID);
         this.destroyRef = inject(DestroyRef);
-        this.menuMode = signal('full', ...(ngDevMode ? [{ debugName: "menuMode" }] : /* istanbul ignore next */ []));
-        this.contentLabel = signal('', ...(ngDevMode ? [{ debugName: "contentLabel" }] : /* istanbul ignore next */ []));
+        this.menuMode = signal('full', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuMode" }] : /* istanbul ignore next */ []));
+        this.contentLabel = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentLabel" }] : /* istanbul ignore next */ []));
         this.childObserver = null;
         this.childRefreshScheduled = false;
         this.childItems = contentChildren(AXSideMenuItemComponent, { ...(ngDevMode ? { debugName: "childItems" } : /* istanbul ignore next */ {}), descendants: true });
-        this.childrenSlot = viewChild('childrenSlot', ...(ngDevMode ? [{ debugName: "childrenSlot" }] : /* istanbul ignore next */ []));
-        this.childrenContextMenu = viewChild('childrenContextMenu', ...(ngDevMode ? [{ debugName: "childrenContextMenu" }] : /* istanbul ignore next */ []));
+        this.childrenSlot = viewChild('childrenSlot', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "childrenSlot" }] : /* istanbul ignore next */ []));
+        this.childrenContextMenu = viewChild('childrenContextMenu', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "childrenContextMenu" }] : /* istanbul ignore next */ []));
         this.#childCheckEffect = effect(() => {
             if (this.childItems().length) {
                 this.updateHasChild();
             }
-        }, ...(ngDevMode ? [{ debugName: "#childCheckEffect" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#childCheckEffect" }] : /* istanbul ignore next */ []));
         this.#initChildren = afterNextRender(() => {
             if (!isPlatformBrowser(this.platformId)) {
                 return;
@@ -110,7 +131,8 @@ class AXSideMenuItemComponent extends MXInteractiveComponent {
                 this.closeSiblingCompactMenus();
                 this.openCompactContextMenu(menu);
             }
-        }, ...(ngDevMode ? [{ debugName: "#contextMenuSync" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#contextMenuSync" }] : /* istanbul ignore next */ []));
     }
     get hostElement() {
         return this.elem.nativeElement;
@@ -374,12 +396,12 @@ class AXSideMenuItemComponent extends MXInteractiveComponent {
             this.contentLabel.set(label);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSideMenuItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 }, 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: "menuItemTrigger", first: true, predicate: ["menuItemTrigger"], descendants: true, isSignal: true }, { propertyName: "childrenSlot", first: true, predicate: ["childrenSlot"], descendants: true, isSignal: true }, { propertyName: "childrenContextMenu", first: true, predicate: ["childrenContextMenu"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [axTooltip]=\"tooltipContent()\" axTooltipPlacement=\"end\" class=\"ax-side-menu-wrapper\">\n  @if (!isCompactMode()) {\n    <ng-content select=\"ax-title\"></ng-content>\n  }\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      [attr.aria-disabled]=\"disabled || null\"\n      [attr.aria-expanded]=\"hasChild() ? !isCollapsed() : null\"\n      [attr.aria-label]=\"compactAriaLabel()\"\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      [attr.aria-current]=\"active() ? 'page' : null\"\n      [attr.aria-disabled]=\"disabled || null\"\n      [attr.aria-expanded]=\"hasChild() ? !isCollapsed() : null\"\n      [attr.aria-label]=\"compactAriaLabel()\"\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      role=\"button\"\n      tabindex=\"0\"\n      [class.ax-state-active]=\"active()\"\n      [attr.aria-current]=\"active() ? 'page' : null\"\n      [attr.aria-disabled]=\"disabled || null\"\n      [attr.aria-expanded]=\"hasChild() ? !isCollapsed() : null\"\n      [attr.aria-label]=\"compactAriaLabel()\"\n      (click)=\"handleClickEvent($event)\"\n      (keydown.enter)=\"handleClickEvent($event)\"\n      (keydown.space)=\"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()) || (isCompactMode() && isFirstLevel())\"\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  @if (isCompactMode() && hasChild()) {\n    <ax-context-menu\n      #childrenContextMenu\n      class=\"ax-side-menu-children-context-menu\"\n      [openOn]=\"'hover'\"\n      [closeOn]=\"'leave'\"\n      [closeOnRouteChange]=\"true\"\n      (onItemClick)=\"handleContextMenuItemClick($event)\"\n      (onClose)=\"handleContextMenuClosed()\"\n    />\n  }\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      <div class=\"ax-inside-text\">\n        @if (text()) {\n          <span>{{ text() }}</span>\n        }\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: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXSideMenuItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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 }, 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: "menuItemTrigger", first: true, predicate: ["menuItemTrigger"], descendants: true, isSignal: true }, { propertyName: "childrenSlot", first: true, predicate: ["childrenSlot"], descendants: true, isSignal: true }, { propertyName: "childrenContextMenu", first: true, predicate: ["childrenContextMenu"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [axTooltip]=\"tooltipContent()\" axTooltipPlacement=\"end\" class=\"ax-side-menu-wrapper\">\n  @if (!isCompactMode()) {\n    <ng-content select=\"ax-title\"></ng-content>\n  }\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      [attr.aria-disabled]=\"disabled || null\"\n      [attr.aria-expanded]=\"hasChild() ? !isCollapsed() : null\"\n      [attr.aria-label]=\"compactAriaLabel()\"\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      [attr.aria-current]=\"active() ? 'page' : null\"\n      [attr.aria-disabled]=\"disabled || null\"\n      [attr.aria-expanded]=\"hasChild() ? !isCollapsed() : null\"\n      [attr.aria-label]=\"compactAriaLabel()\"\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      role=\"button\"\n      tabindex=\"0\"\n      [class.ax-state-active]=\"active()\"\n      [attr.aria-current]=\"active() ? 'page' : null\"\n      [attr.aria-disabled]=\"disabled || null\"\n      [attr.aria-expanded]=\"hasChild() ? !isCollapsed() : null\"\n      [attr.aria-label]=\"compactAriaLabel()\"\n      (click)=\"handleClickEvent($event)\"\n      (keydown.enter)=\"handleClickEvent($event)\"\n      (keydown.space)=\"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()) || (isCompactMode() && isFirstLevel())\"\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  @if (isCompactMode() && hasChild()) {\n    <ax-context-menu\n      #childrenContextMenu\n      class=\"ax-side-menu-children-context-menu\"\n      [openOn]=\"'hover'\"\n      [closeOn]=\"'leave'\"\n      [closeOnRouteChange]=\"true\"\n      (onItemClick)=\"handleContextMenuItemClick($event)\"\n      (onClose)=\"handleContextMenuClosed()\"\n    />\n  }\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      <div class=\"ax-inside-text\">\n        @if (text()) {\n          <span>{{ text() }}</span>\n        }\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", "browserUrl", "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: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSideMenuItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXSideMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-side-menu-item', inputs: ['disabled'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+            args: [{ selector: 'ax-side-menu-item', inputs: ['disabled'], encapsulation: ViewEncapsulation.None, imports: [
                         AXRippleDirective,
                         RouterLink,
                         RouterLinkActive,
@@ -399,10 +421,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class AXSideMenuComponent extends NXComponent {
     constructor() {
         super(...arguments);
-        this.items = model(...(ngDevMode ? [undefined, { debugName: "items" }] : /* istanbul ignore next */ []));
-        this.look = input('default', ...(ngDevMode ? [{ debugName: "look" }] : /* istanbul ignore next */ []));
-        this.location = input('start', ...(ngDevMode ? [{ debugName: "location" }] : /* istanbul ignore next */ []));
-        this.mode = input('full', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        this.items = model(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "items" }] : /* istanbul ignore next */ []));
+        this.look = input('default', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "look" }] : /* istanbul ignore next */ []));
+        this.location = input('start', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "location" }] : /* istanbul ignore next */ []));
+        this.mode = input('full', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
         this.elementRef = inject(ElementRef);
         /**
          * All `ax-side-menu-item` instances discovered by walking the host DOM.
@@ -415,7 +441,8 @@ class AXSideMenuComponent extends NXComponent {
          * structural directives, and recursive `ngTemplateOutlet`-based templates
          * uniformly.
          */
-        this._items = signal([], ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
+        this._items = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
         /** Read-only signal exposing every discovered `ax-side-menu-item` instance. */
         this.children = this._items.asReadonly();
         this.platformId = inject(PLATFORM_ID);
@@ -440,7 +467,8 @@ class AXSideMenuComponent extends NXComponent {
         this.#syncItemMode = effect(() => {
             const mode = this.mode();
             this._items().forEach((item) => item.syncMenuMode(mode));
-        }, ...(ngDevMode ? [{ debugName: "#syncItemMode" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#syncItemMode" }] : /* istanbul ignore next */ []));
     }
     #init;
     /** Push full/compact mode to every menu item whenever mode changes. */
@@ -519,15 +547,15 @@ class AXSideMenuComponent extends NXComponent {
     get __hostClass() {
         return [`ax-look-${this.look()}`, `ax-location-${this.location()}`, `ax-mode-${this.mode()}`];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSideMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXSideMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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 || item.suffix?.text) {\n      <ax-suffix>\n        <ax-text>{{ item.suffixText ?? item.suffix?.text }}</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;@layer components{ax-side-menu{display:flex;width:100%;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);color:inherit;-webkit-user-select:none;user-select:none}ax-side-menu>ax-title{display:block;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);text-transform:uppercase;opacity:70%}ax-side-menu>ax-title:first-child{margin-top:calc(var(--spacing, .25rem) * 0)}ax-side-menu ax-side-menu-item ax-divider{height:1px;width:100%;background-color:color-mix(in srgb,#000 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item ax-divider{background-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}ax-side-menu ax-side-menu-item ax-divider:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in srgb,#fff 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item ax-divider:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,var(--color-white, #fff) 10%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item{position:relative;box-sizing:border-box;display:flex;height:calc(var(--spacing, .25rem) * 10);max-height:calc(var(--spacing, .25rem) * 10);min-height:calc(var(--spacing, .25rem) * 10);cursor:pointer;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 0);--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);transition-property:background-color,color,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));--tw-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function);--tw-outline-style: none;outline-style:none;font-size:inherit}ax-side-menu ax-side-menu-item .ax-side-item:hover{background-color:color-mix(in srgb,#000 10%,transparent);background-color:rgba(var(--ax-comp-side-menu-hover-bg-color));color:rgba(var(--ax-comp-side-menu-hover-text-color))}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item:hover{background-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item:hover:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in srgb,#fff 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item:hover:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,var(--color-white, #fff) 10%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{pointer-events:none;cursor:not-allowed;opacity:50%}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled .ax-ripple{opacity:0%}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled){background-color:rgba(var( --ax-comp-side-menu-active-bg-color, var(--ax-sys-color-primary-lightest-surface) ));color:rgba(var( --ax-comp-side-menu-active-text-color, var(--ax-sys-color-on-primary-lightest-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{display:flex;min-width:calc(var(--spacing, .25rem) * 0);align-items:center}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side{flex:auto;gap:calc(var(--spacing, .25rem) * 3)}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{flex-shrink:0;gap:calc(var(--spacing, .25rem) * 2)}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{display:flex;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 4);align-items:center;justify-content:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));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));--tw-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function);line-height:initial}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 ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-sys-color-on-surface))}ax-side-menu ax-side-menu-item .ax-side-item ax-prefix{display:inline-flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);background-color:transparent;transition-property:background-color;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-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu ax-side-menu-item .ax-side-item ax-prefix ax-icon,ax-side-menu ax-side-menu-item .ax-side-item ax-prefix i,ax-side-menu ax-side-menu-item .ax-side-item ax-prefix svg{display:inline-flex;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 4);align-items:center;justify-content:center;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: 1;line-height:1;color:currentcolor}ax-side-menu ax-side-menu-item .ax-side-item ax-prefix svg{fill:currentcolor}ax-side-menu ax-side-menu-item .ax-side-item .ax-inside-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:color-mix(in srgb,#000 30%,transparent)}@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,var(--color-black, #000) 30%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in srgb,#fff 30%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,var(--color-white, #fff) 30%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-children{margin-inline-start:calc(var(--spacing, .25rem) * 6);display:grid;grid-template-rows:repeat(1,minmax(0,1fr));opacity:100%;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));--tw-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu ax-side-menu-item .ax-side-children.ax-collapsed{grid-template-rows:0;opacity:0%}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 .ax-side-item{height:calc(var(--spacing, .25rem) * 9);max-height:calc(var(--spacing, .25rem) * 9);min-height:calc(var(--spacing, .25rem) * 9);font-size:.8125rem;--tw-leading: 1.125rem;line-height:1.125rem;--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 ax-side-menu-item:first-child{padding-top:calc(var(--spacing, .25rem) * 1)}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-content{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1)}ax-side-menu.ax-look-with-line .ax-side-children{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:color-mix(in srgb,#000 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu.ax-look-with-line .ax-side-children{border-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}ax-side-menu.ax-look-with-line .ax-side-children:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:color-mix(in srgb,#fff 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu.ax-look-with-line .ax-side-children:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:color-mix(in oklab,var(--color-white, #fff) 10%,transparent)}}ax-side-menu.ax-look-with-line .ax-side-children .ax-side-children-content{margin-inline-start:calc(var(--spacing, .25rem) * 2)}ax-side-menu.ax-mode-compact{align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-side-menu.ax-mode-compact .ax-side-menu-wrapper{display:flex;width:calc(var(--spacing, .25rem) * 14);flex-direction:column;align-items:center}ax-side-menu.ax-mode-compact .ax-side-children{display:none}ax-side-menu.ax-mode-compact .ax-inside-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-item:hover:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-darker-surface,var(--ax-sys-color-surface)));color:rgba(var(--ax-sys-color-on-surface));background-color:rgba(var(--ax-comp-side-menu-hover-bg-color));color:rgba(var(--ax-comp-side-menu-hover-text-color))}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-item.ax-state-active:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper .ax-side-item.ax-state-disabled){background-color:rgba(var( --ax-comp-side-menu-active-bg-color, var(--ax-sys-color-primary-surface) ));color:rgba(var( --ax-comp-side-menu-active-text-color, 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-default) .ax-side-item:before,:is(ax-side-menu.ax-mode-compact.ax-look-with-line,ax-side-menu.ax-mode-compact.ax-look-default) .ax-side-children:before{display:none}ax-side-menu.ax-mode-compact ax-side-menu-item{position:relative;display:flex;width:calc(var(--spacing, .25rem) * 14);justify-content:center;padding:calc(var(--spacing, .25rem) * 0)!important}ax-side-menu.ax-mode-compact ax-side-menu-item ax-icon{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ))}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-item{width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);max-width:calc(var(--spacing, .25rem) * 10);min-width:calc(var(--spacing, .25rem) * 10);justify-content:center;gap:calc(var(--spacing, .25rem) * 0);padding-inline:calc(var(--spacing, .25rem) * 0)}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-start-side{flex:none;justify-content:center;gap:calc(var(--spacing, .25rem) * 0)}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-end-side{display:none}ax-side-menu.ax-mode-compact ax-badge{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:calc(var(--spacing, .25rem) * 1)}[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)}[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{rotate:-90deg}ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu:not(.ax-state-open){display:none}ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu .ax-side-item:before,ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu .ax-menu-item:before,ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu [class*=indicator]{display:none!important}@media(prefers-reduced-motion:reduce){ax-side-menu ax-side-menu-item .ax-side-item,ax-side-menu ax-side-menu-item .ax-side-children,ax-side-menu ax-side-menu-item .ax-end-side .arrow-icon{transition-property:none}}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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;}@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-leading: initial;--tw-duration: initial;--tw-ease: initial;--tw-border-style: solid;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1}}}\n/*! tailwindcss v4.1.16 | 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", "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 || item.suffix?.text) {\n      <ax-suffix>\n        <ax-text>{{ item.suffixText ?? item.suffix?.text }}</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;@layer components{ax-side-menu{display:flex;width:100%;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);color:inherit;-webkit-user-select:none;user-select:none}ax-side-menu>ax-title{margin-block:calc(var(--spacing, .25rem) * 4);display:block;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);text-transform:uppercase;opacity:70%}ax-side-menu>ax-title:first-child{margin-top:calc(var(--spacing, .25rem) * 0)}ax-side-menu ax-side-menu-item ax-divider{height:1px;width:100%;background-color:color-mix(in srgb,#000 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item ax-divider{background-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}ax-side-menu ax-side-menu-item ax-divider:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in srgb,#fff 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item ax-divider:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,var(--color-white, #fff) 10%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item{position:relative;box-sizing:border-box;display:flex;height:calc(var(--spacing, .25rem) * 10);max-height:calc(var(--spacing, .25rem) * 10);min-height:calc(var(--spacing, .25rem) * 10);cursor:pointer;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 0);--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);transition-property:background-color,color,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));--tw-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function);--tw-outline-style: none;outline-style:none;font-size:inherit}ax-side-menu ax-side-menu-item .ax-side-item:hover{background-color:color-mix(in srgb,#000 10%,transparent);background-color:rgba(var(--ax-comp-side-menu-hover-bg-color));color:rgba(var(--ax-comp-side-menu-hover-text-color))}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item:hover{background-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item:hover:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in srgb,#fff 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item:hover:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,var(--color-white, #fff) 10%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{pointer-events:none;cursor:not-allowed;opacity:50%}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled .ax-ripple{opacity:0%}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled){background-color:rgba(var( --ax-comp-side-menu-active-bg-color, var(--ax-sys-color-primary-lightest-surface) ));color:rgba(var( --ax-comp-side-menu-active-text-color, var(--ax-sys-color-on-primary-lightest-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{display:flex;min-width:calc(var(--spacing, .25rem) * 0);align-items:center}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side{flex:auto;gap:calc(var(--spacing, .25rem) * 3)}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{flex-shrink:0;gap:calc(var(--spacing, .25rem) * 2)}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{display:flex;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 4);align-items:center;justify-content:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));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));--tw-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function);line-height:initial}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 ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-sys-color-on-surface))}ax-side-menu ax-side-menu-item .ax-side-item ax-prefix{display:inline-flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);background-color:transparent;transition-property:background-color;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-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu ax-side-menu-item .ax-side-item ax-prefix ax-icon,ax-side-menu ax-side-menu-item .ax-side-item ax-prefix i,ax-side-menu ax-side-menu-item .ax-side-item ax-prefix svg{display:inline-flex;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 4);align-items:center;justify-content:center;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: 1;line-height:1;color:currentcolor}ax-side-menu ax-side-menu-item .ax-side-item ax-prefix svg{fill:currentcolor}ax-side-menu ax-side-menu-item .ax-side-item .ax-inside-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:color-mix(in srgb,#000 30%,transparent)}@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,var(--color-black, #000) 30%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in srgb,#fff 30%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,var(--color-white, #fff) 30%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-children{margin-inline-start:calc(var(--spacing, .25rem) * 6);display:grid;grid-template-rows:repeat(1,minmax(0,1fr));opacity:100%;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));--tw-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu ax-side-menu-item .ax-side-children.ax-collapsed{grid-template-rows:0;opacity:0%}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 .ax-side-item{height:calc(var(--spacing, .25rem) * 9);max-height:calc(var(--spacing, .25rem) * 9);min-height:calc(var(--spacing, .25rem) * 9);--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 ax-side-menu-item:first-child{padding-top:calc(var(--spacing, .25rem) * 1)}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-content{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1)}ax-side-menu.ax-look-with-line .ax-side-children{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:color-mix(in srgb,#000 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu.ax-look-with-line .ax-side-children{border-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}ax-side-menu.ax-look-with-line .ax-side-children:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:color-mix(in srgb,#fff 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu.ax-look-with-line .ax-side-children:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:color-mix(in oklab,var(--color-white, #fff) 10%,transparent)}}ax-side-menu.ax-look-with-line .ax-side-children .ax-side-children-content{margin-inline-start:calc(var(--spacing, .25rem) * 2)}ax-side-menu.ax-mode-compact{align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-side-menu.ax-mode-compact .ax-side-menu-wrapper{display:flex;width:calc(var(--spacing, .25rem) * 14);flex-direction:column;align-items:center}ax-side-menu.ax-mode-compact .ax-side-children{display:none}ax-side-menu.ax-mode-compact .ax-inside-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-item:hover:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-darker-surface,var(--ax-sys-color-surface)));color:rgba(var(--ax-sys-color-on-surface));background-color:rgba(var(--ax-comp-side-menu-hover-bg-color));color:rgba(var(--ax-comp-side-menu-hover-text-color))}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-item.ax-state-active:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper .ax-side-item.ax-state-disabled){background-color:rgba(var( --ax-comp-side-menu-active-bg-color, var(--ax-sys-color-primary-surface) ));color:rgba(var( --ax-comp-side-menu-active-text-color, 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-default) .ax-side-item:before,:is(ax-side-menu.ax-mode-compact.ax-look-with-line,ax-side-menu.ax-mode-compact.ax-look-default) .ax-side-children:before{display:none}ax-side-menu.ax-mode-compact ax-side-menu-item{position:relative;display:flex;width:calc(var(--spacing, .25rem) * 14);justify-content:center;padding:calc(var(--spacing, .25rem) * 0)!important}ax-side-menu.ax-mode-compact ax-side-menu-item ax-icon{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ))}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-item{width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);max-width:calc(var(--spacing, .25rem) * 10);min-width:calc(var(--spacing, .25rem) * 10);justify-content:center;gap:calc(var(--spacing, .25rem) * 0);padding-inline:calc(var(--spacing, .25rem) * 0)}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-start-side{flex:none;justify-content:center;gap:calc(var(--spacing, .25rem) * 0)}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-end-side{display:none}ax-side-menu.ax-mode-compact ax-badge{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:calc(var(--spacing, .25rem) * 1)}[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)}[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{rotate:-90deg}ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu:not(.ax-state-open){display:none}ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu .ax-side-item:before,ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu .ax-menu-item:before,ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu [class*=indicator]{display:none!important}@media(prefers-reduced-motion:reduce){ax-side-menu ax-side-menu-item .ax-side-item,ax-side-menu ax-side-menu-item .ax-side-children,ax-side-menu ax-side-menu-item .ax-end-side .arrow-icon{transition-property:none}}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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;}@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-leading: initial;--tw-duration: initial;--tw-ease: initial;--tw-border-style: solid;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1}}}\n/*! tailwindcss v4.1.16 | 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", "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", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSideMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXSideMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-side-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+            args: [{ selector: 'ax-side-menu', encapsulation: ViewEncapsulation.None, imports: [
                         NgTemplateOutlet,
                         AXDecoratorGenericComponent,
                         AXSideMenuItemComponent,
@@ -537,7 +565,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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 || item.suffix?.text) {\n      <ax-suffix>\n        <ax-text>{{ item.suffixText ?? item.suffix?.text }}</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;@layer components{ax-side-menu{display:flex;width:100%;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);color:inherit;-webkit-user-select:none;user-select:none}ax-side-menu>ax-title{display:block;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);text-transform:uppercase;opacity:70%}ax-side-menu>ax-title:first-child{margin-top:calc(var(--spacing, .25rem) * 0)}ax-side-menu ax-side-menu-item ax-divider{height:1px;width:100%;background-color:color-mix(in srgb,#000 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item ax-divider{background-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}ax-side-menu ax-side-menu-item ax-divider:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in srgb,#fff 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item ax-divider:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,var(--color-white, #fff) 10%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item{position:relative;box-sizing:border-box;display:flex;height:calc(var(--spacing, .25rem) * 10);max-height:calc(var(--spacing, .25rem) * 10);min-height:calc(var(--spacing, .25rem) * 10);cursor:pointer;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 0);--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);transition-property:background-color,color,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));--tw-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function);--tw-outline-style: none;outline-style:none;font-size:inherit}ax-side-menu ax-side-menu-item .ax-side-item:hover{background-color:color-mix(in srgb,#000 10%,transparent);background-color:rgba(var(--ax-comp-side-menu-hover-bg-color));color:rgba(var(--ax-comp-side-menu-hover-text-color))}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item:hover{background-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item:hover:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in srgb,#fff 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item:hover:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,var(--color-white, #fff) 10%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{pointer-events:none;cursor:not-allowed;opacity:50%}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled .ax-ripple{opacity:0%}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled){background-color:rgba(var( --ax-comp-side-menu-active-bg-color, var(--ax-sys-color-primary-lightest-surface) ));color:rgba(var( --ax-comp-side-menu-active-text-color, var(--ax-sys-color-on-primary-lightest-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{display:flex;min-width:calc(var(--spacing, .25rem) * 0);align-items:center}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side{flex:auto;gap:calc(var(--spacing, .25rem) * 3)}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{flex-shrink:0;gap:calc(var(--spacing, .25rem) * 2)}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{display:flex;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 4);align-items:center;justify-content:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));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));--tw-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function);line-height:initial}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 ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-sys-color-on-surface))}ax-side-menu ax-side-menu-item .ax-side-item ax-prefix{display:inline-flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);background-color:transparent;transition-property:background-color;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-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu ax-side-menu-item .ax-side-item ax-prefix ax-icon,ax-side-menu ax-side-menu-item .ax-side-item ax-prefix i,ax-side-menu ax-side-menu-item .ax-side-item ax-prefix svg{display:inline-flex;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 4);align-items:center;justify-content:center;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: 1;line-height:1;color:currentcolor}ax-side-menu ax-side-menu-item .ax-side-item ax-prefix svg{fill:currentcolor}ax-side-menu ax-side-menu-item .ax-side-item .ax-inside-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:color-mix(in srgb,#000 30%,transparent)}@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,var(--color-black, #000) 30%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in srgb,#fff 30%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,var(--color-white, #fff) 30%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-children{margin-inline-start:calc(var(--spacing, .25rem) * 6);display:grid;grid-template-rows:repeat(1,minmax(0,1fr));opacity:100%;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));--tw-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu ax-side-menu-item .ax-side-children.ax-collapsed{grid-template-rows:0;opacity:0%}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 .ax-side-item{height:calc(var(--spacing, .25rem) * 9);max-height:calc(var(--spacing, .25rem) * 9);min-height:calc(var(--spacing, .25rem) * 9);font-size:.8125rem;--tw-leading: 1.125rem;line-height:1.125rem;--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 ax-side-menu-item:first-child{padding-top:calc(var(--spacing, .25rem) * 1)}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-content{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1)}ax-side-menu.ax-look-with-line .ax-side-children{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:color-mix(in srgb,#000 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu.ax-look-with-line .ax-side-children{border-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}ax-side-menu.ax-look-with-line .ax-side-children:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:color-mix(in srgb,#fff 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu.ax-look-with-line .ax-side-children:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:color-mix(in oklab,var(--color-white, #fff) 10%,transparent)}}ax-side-menu.ax-look-with-line .ax-side-children .ax-side-children-content{margin-inline-start:calc(var(--spacing, .25rem) * 2)}ax-side-menu.ax-mode-compact{align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-side-menu.ax-mode-compact .ax-side-menu-wrapper{display:flex;width:calc(var(--spacing, .25rem) * 14);flex-direction:column;align-items:center}ax-side-menu.ax-mode-compact .ax-side-children{display:none}ax-side-menu.ax-mode-compact .ax-inside-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-item:hover:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-darker-surface,var(--ax-sys-color-surface)));color:rgba(var(--ax-sys-color-on-surface));background-color:rgba(var(--ax-comp-side-menu-hover-bg-color));color:rgba(var(--ax-comp-side-menu-hover-text-color))}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-item.ax-state-active:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper .ax-side-item.ax-state-disabled){background-color:rgba(var( --ax-comp-side-menu-active-bg-color, var(--ax-sys-color-primary-surface) ));color:rgba(var( --ax-comp-side-menu-active-text-color, 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-default) .ax-side-item:before,:is(ax-side-menu.ax-mode-compact.ax-look-with-line,ax-side-menu.ax-mode-compact.ax-look-default) .ax-side-children:before{display:none}ax-side-menu.ax-mode-compact ax-side-menu-item{position:relative;display:flex;width:calc(var(--spacing, .25rem) * 14);justify-content:center;padding:calc(var(--spacing, .25rem) * 0)!important}ax-side-menu.ax-mode-compact ax-side-menu-item ax-icon{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ))}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-item{width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);max-width:calc(var(--spacing, .25rem) * 10);min-width:calc(var(--spacing, .25rem) * 10);justify-content:center;gap:calc(var(--spacing, .25rem) * 0);padding-inline:calc(var(--spacing, .25rem) * 0)}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-start-side{flex:none;justify-content:center;gap:calc(var(--spacing, .25rem) * 0)}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-end-side{display:none}ax-side-menu.ax-mode-compact ax-badge{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:calc(var(--spacing, .25rem) * 1)}[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)}[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{rotate:-90deg}ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu:not(.ax-state-open){display:none}ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu .ax-side-item:before,ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu .ax-menu-item:before,ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu [class*=indicator]{display:none!important}@media(prefers-reduced-motion:reduce){ax-side-menu ax-side-menu-item .ax-side-item,ax-side-menu ax-side-menu-item .ax-side-children,ax-side-menu ax-side-menu-item .ax-end-side .arrow-icon{transition-property:none}}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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;}@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-leading: initial;--tw-duration: initial;--tw-ease: initial;--tw-border-style: solid;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1}}}\n/*! tailwindcss v4.1.16 | 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 || item.suffix?.text) {\n      <ax-suffix>\n        <ax-text>{{ item.suffixText ?? item.suffix?.text }}</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;@layer components{ax-side-menu{display:flex;width:100%;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);color:inherit;-webkit-user-select:none;user-select:none}ax-side-menu>ax-title{margin-block:calc(var(--spacing, .25rem) * 4);display:block;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);text-transform:uppercase;opacity:70%}ax-side-menu>ax-title:first-child{margin-top:calc(var(--spacing, .25rem) * 0)}ax-side-menu ax-side-menu-item ax-divider{height:1px;width:100%;background-color:color-mix(in srgb,#000 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item ax-divider{background-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}ax-side-menu ax-side-menu-item ax-divider:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in srgb,#fff 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item ax-divider:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,var(--color-white, #fff) 10%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item{position:relative;box-sizing:border-box;display:flex;height:calc(var(--spacing, .25rem) * 10);max-height:calc(var(--spacing, .25rem) * 10);min-height:calc(var(--spacing, .25rem) * 10);cursor:pointer;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 0);--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);transition-property:background-color,color,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));--tw-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function);--tw-outline-style: none;outline-style:none;font-size:inherit}ax-side-menu ax-side-menu-item .ax-side-item:hover{background-color:color-mix(in srgb,#000 10%,transparent);background-color:rgba(var(--ax-comp-side-menu-hover-bg-color));color:rgba(var(--ax-comp-side-menu-hover-text-color))}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item:hover{background-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item:hover:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in srgb,#fff 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item:hover:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,var(--color-white, #fff) 10%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{pointer-events:none;cursor:not-allowed;opacity:50%}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled .ax-ripple{opacity:0%}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled){background-color:rgba(var( --ax-comp-side-menu-active-bg-color, var(--ax-sys-color-primary-lightest-surface) ));color:rgba(var( --ax-comp-side-menu-active-text-color, var(--ax-sys-color-on-primary-lightest-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{display:flex;min-width:calc(var(--spacing, .25rem) * 0);align-items:center}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side{flex:auto;gap:calc(var(--spacing, .25rem) * 3)}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{flex-shrink:0;gap:calc(var(--spacing, .25rem) * 2)}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{display:flex;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 4);align-items:center;justify-content:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));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));--tw-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function);line-height:initial}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 ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-sys-color-on-surface))}ax-side-menu ax-side-menu-item .ax-side-item ax-prefix{display:inline-flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);background-color:transparent;transition-property:background-color;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-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu ax-side-menu-item .ax-side-item ax-prefix ax-icon,ax-side-menu ax-side-menu-item .ax-side-item ax-prefix i,ax-side-menu ax-side-menu-item .ax-side-item ax-prefix svg{display:inline-flex;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 4);align-items:center;justify-content:center;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: 1;line-height:1;color:currentcolor}ax-side-menu ax-side-menu-item .ax-side-item ax-prefix svg{fill:currentcolor}ax-side-menu ax-side-menu-item .ax-side-item .ax-inside-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:color-mix(in srgb,#000 30%,transparent)}@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,var(--color-black, #000) 30%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in srgb,#fff 30%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,var(--color-white, #fff) 30%,transparent)}}ax-side-menu ax-side-menu-item .ax-side-children{margin-inline-start:calc(var(--spacing, .25rem) * 6);display:grid;grid-template-rows:repeat(1,minmax(0,1fr));opacity:100%;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));--tw-duration: var(--ax-sys-transition-duration);transition-duration:var(--ax-sys-transition-duration);--tw-ease: var(--ax-sys-transition-timing-function);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu ax-side-menu-item .ax-side-children.ax-collapsed{grid-template-rows:0;opacity:0%}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 .ax-side-item{height:calc(var(--spacing, .25rem) * 9);max-height:calc(var(--spacing, .25rem) * 9);min-height:calc(var(--spacing, .25rem) * 9);--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 ax-side-menu-item:first-child{padding-top:calc(var(--spacing, .25rem) * 1)}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-content{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1)}ax-side-menu.ax-look-with-line .ax-side-children{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:color-mix(in srgb,#000 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu.ax-look-with-line .ax-side-children{border-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}ax-side-menu.ax-look-with-line .ax-side-children:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:color-mix(in srgb,#fff 10%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-side-menu.ax-look-with-line .ax-side-children:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:color-mix(in oklab,var(--color-white, #fff) 10%,transparent)}}ax-side-menu.ax-look-with-line .ax-side-children .ax-side-children-content{margin-inline-start:calc(var(--spacing, .25rem) * 2)}ax-side-menu.ax-mode-compact{align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-side-menu.ax-mode-compact .ax-side-menu-wrapper{display:flex;width:calc(var(--spacing, .25rem) * 14);flex-direction:column;align-items:center}ax-side-menu.ax-mode-compact .ax-side-children{display:none}ax-side-menu.ax-mode-compact .ax-inside-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-item:hover:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-darker-surface,var(--ax-sys-color-surface)));color:rgba(var(--ax-sys-color-on-surface));background-color:rgba(var(--ax-comp-side-menu-hover-bg-color));color:rgba(var(--ax-comp-side-menu-hover-text-color))}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-item.ax-state-active:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper .ax-side-item.ax-state-disabled){background-color:rgba(var( --ax-comp-side-menu-active-bg-color, var(--ax-sys-color-primary-surface) ));color:rgba(var( --ax-comp-side-menu-active-text-color, 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-default) .ax-side-item:before,:is(ax-side-menu.ax-mode-compact.ax-look-with-line,ax-side-menu.ax-mode-compact.ax-look-default) .ax-side-children:before{display:none}ax-side-menu.ax-mode-compact ax-side-menu-item{position:relative;display:flex;width:calc(var(--spacing, .25rem) * 14);justify-content:center;padding:calc(var(--spacing, .25rem) * 0)!important}ax-side-menu.ax-mode-compact ax-side-menu-item ax-icon{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ))}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-item{width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);max-width:calc(var(--spacing, .25rem) * 10);min-width:calc(var(--spacing, .25rem) * 10);justify-content:center;gap:calc(var(--spacing, .25rem) * 0);padding-inline:calc(var(--spacing, .25rem) * 0)}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-start-side{flex:none;justify-content:center;gap:calc(var(--spacing, .25rem) * 0)}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-end-side{display:none}ax-side-menu.ax-mode-compact ax-badge{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:calc(var(--spacing, .25rem) * 1)}[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)}[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{rotate:-90deg}ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu:not(.ax-state-open){display:none}ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu .ax-side-item:before,ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu .ax-menu-item:before,ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu [class*=indicator]{display:none!important}@media(prefers-reduced-motion:reduce){ax-side-menu ax-side-menu-item .ax-side-item,ax-side-menu ax-side-menu-item .ax-side-children,ax-side-menu ax-side-menu-item .ax-end-side .arrow-icon{transition-property:none}}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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;}@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-leading: initial;--tw-duration: initial;--tw-ease: initial;--tw-border-style: solid;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1}}}\n/*! tailwindcss v4.1.16 | 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']
@@ -649,10 +677,10 @@ class AXOutlineSideMenuDirective {
         });
         return rootItems;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXOutlineSideMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: AXOutlineSideMenuDirective, isStandalone: true, selector: "[axOutlineSideMenu]", providers: [AXUnsubscriber], exportAs: ["axOutlineSideMenu"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXOutlineSideMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: AXOutlineSideMenuDirective, isStandalone: true, selector: "[axOutlineSideMenu]", providers: [AXUnsubscriber], exportAs: ["axOutlineSideMenu"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXOutlineSideMenuDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXOutlineSideMenuDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axOutlineSideMenu]',
@@ -673,8 +701,8 @@ const MODULES = [
     AXDecoratorModule,
 ];
 class AXSideMenuModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSideMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: AXSideMenuModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXSideMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXSideMenuModule, imports: [CommonModule,
             AXCommonModule,
             AXRippleDirective,
             AXLoadingModule,
@@ -682,13 +710,13 @@ class AXSideMenuModule {
             RouterLink,
             RouterLinkActive,
             AXDecoratorModule, AXSideMenuComponent, AXSideMenuItemComponent, AXOutlineSideMenuDirective], exports: [AXSideMenuComponent, AXSideMenuItemComponent, AXOutlineSideMenuDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSideMenuModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXSideMenuModule, imports: [CommonModule,
             AXCommonModule,
             AXLoadingModule,
             AXTranslationModule,
             AXDecoratorModule, AXSideMenuComponent, AXSideMenuItemComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSideMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXSideMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],