@acorex/components 22.1.0-next.31 → 22.1.0-next.33

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

@@ -7,12 +7,11 @@ 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, Component, HostBinding, Directive, NgModule } from '@angular/core';
+import { model, input, output, 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';
-import { isEqual } from 'lodash-es';
-import { map, distinctUntilChanged } from 'rxjs';
+import { fromEvent, map, distinctUntilChanged } from 'rxjs';
 
 /**
  * DI token for the parent `ax-side-menu`. Child `ax-side-menu-item`s inject this
@@ -33,7 +32,7 @@ class AXSideMenuItemComponent extends MXInteractiveComponent {
         super(...arguments);
         this.text = model('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
-        this.active = model(false, /* @ts-ignore */
+        this.active = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
         this.isLoading = model(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
@@ -396,10 +395,10 @@ class AXSideMenuItemComponent extends MXInteractiveComponent {
             this.contentLabel.set(label);
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXSideMenuItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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", 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: "22.0.8", ngImport: i0, type: AXSideMenuItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXSideMenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-side-menu-item', inputs: ['disabled'], encapsulation: ViewEncapsulation.None, imports: [
                         AXRippleDirective,
@@ -412,7 +411,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXTooltipModule,
                         AXContextMenuComponent,
                     ], providers: [{ provide: AXComponent, useExisting: AXSideMenuItemComponent }], 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" }]
-        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }, { type: i0.Output, args: ["textChange"] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }, { type: i0.Output, args: ["isLoadingChange"] }], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }], onClick: [{ type: i0.Output, args: ["onClick"] }], toggleOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleOnClick", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], routerLinkActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActive", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], menuItemTrigger: [{ type: i0.ViewChild, args: ['menuItemTrigger', { isSignal: true }] }], childItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AXSideMenuItemComponent), { ...{ descendants: true }, isSignal: true }] }], childrenSlot: [{ type: i0.ViewChild, args: ['childrenSlot', { isSignal: true }] }], childrenContextMenu: [{ type: i0.ViewChild, args: ['childrenContextMenu', { isSignal: true }] }] } });
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }, { type: i0.Output, args: ["textChange"] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }, { type: i0.Output, args: ["isLoadingChange"] }], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }], onClick: [{ type: i0.Output, args: ["onClick"] }], toggleOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleOnClick", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], routerLinkActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActive", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], menuItemTrigger: [{ type: i0.ViewChild, args: ['menuItemTrigger', { isSignal: true }] }], childItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AXSideMenuItemComponent), { ...{ descendants: true }, isSignal: true }] }], childrenSlot: [{ type: i0.ViewChild, args: ['childrenSlot', { isSignal: true }] }], childrenContextMenu: [{ type: i0.ViewChild, args: ['childrenContextMenu', { isSignal: true }] }] } });
 
 /**
  * @category
@@ -547,13 +546,13 @@ 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: "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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXSideMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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{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 }); }
+        ], 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.href ?? node.text ?? $index) {\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.href ?? child.text ?? $index) {\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", "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: "22.0.8", ngImport: i0, type: AXSideMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXSideMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-side-menu', encapsulation: ViewEncapsulation.None, imports: [
                         NgTemplateOutlet,
@@ -565,7 +564,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", 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{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"] }]
+                    ], template: "<ng-content select=\"ax-side-menu-item,ax-title,ng-container,[ngTemplateOutlet]\"></ng-content>\n\n@for (node of items(); track node.href ?? node.text ?? $index) {\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.href ?? child.text ?? $index) {\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']
@@ -574,47 +573,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 class AXOutlineSideMenuDirective {
     constructor() {
         this.router = inject(Router);
+        this.host = inject((ElementRef));
         this.unsubscriber = inject(AXUnsubscriber);
         this.sideMenu = inject(AXSideMenuComponent);
         this.container = inject(AXOutlineContainerDirective);
         this.#anr = afterNextRender(() => {
+            fromEvent(this.host.nativeElement, 'click', { capture: true })
+                .pipe(this.unsubscriber.takeUntilDestroy)
+                .subscribe((event) => this.handleSideMenuLinkClick(event));
             this.container.outlineItems$
                 .pipe(this.unsubscriber.takeUntilDestroy, map((items) => {
                 if (!items || items.length === 0)
                     return [];
                 return this.buildNestedMenuItems(items);
-            }), distinctUntilChanged(isEqual))
+            }), distinctUntilChanged((previous, next) => this.getStructuralSignature(previous) === this.getStructuralSignature(next) &&
+                this.getActiveSignature(previous) === this.getActiveSignature(next)))
                 .subscribe((menuItems) => {
-                this.updateSideMenu(menuItems);
+                this.sideMenu.items.set(this.cloneMenuTree(menuItems));
             });
         });
     }
     #anr;
-    updateSideMenu(newMenuItems) {
-        const currentMenuItems = this.sideMenu.items();
-        const newSignature = this.getStructuralSignature(newMenuItems);
-        const currentSignature = this.getStructuralSignature(currentMenuItems || []);
-        if (newSignature !== currentSignature) {
-            this.sideMenu.items.set(newMenuItems);
+    handleSideMenuLinkClick(event) {
+        const target = event.target;
+        if (!(target instanceof Element)) {
             return;
         }
-        const currentComponents = this.sideMenu.children();
-        const newActiveItem = this.flattenMenuItems(newMenuItems).find((item) => item.active);
-        const currentActiveComponent = currentComponents.find((c) => c.active());
-        if (newActiveItem?.href === currentActiveComponent?.href()) {
+        const anchor = target.closest('a[href]');
+        if (!anchor || !this.host.nativeElement.contains(anchor)) {
             return;
         }
-        currentActiveComponent?.active.set(false);
-        if (newActiveItem) {
-            const componentToActivate = currentComponents.find((c) => c.href() === newActiveItem.href);
-            componentToActivate?.active.set(true);
+        const href = anchor.getAttribute('href');
+        if (!href?.includes('#')) {
+            return;
+        }
+        const id = decodeURIComponent(href.split('#')[1] ?? '');
+        if (!id || !this.container.outlineItems$.value.some((item) => item.id === id)) {
+            return;
         }
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        this.container.scrollToItem(id);
+    }
+    cloneMenuTree(items) {
+        return items.map((item) => ({
+            ...item,
+            active: !!item.active,
+            items: item.items?.length ? this.cloneMenuTree(item.items) : [],
+        }));
+    }
+    getActiveSignature(items) {
+        return this.flattenMenuItems(items)
+            .map((item) => `${item.href ?? ''}:${item.active ? '1' : '0'}`)
+            .join('|');
     }
-    /**
-     * Creates a string signature that represents the tree structure of the menu.
-     * Example: "href1(href1.1,href1.2),href2,href3"
-     * This will be different for a flat list vs. a nested list.
-     */
     getStructuralSignature(items) {
         return items
             .map((item) => {
@@ -646,6 +658,7 @@ class AXOutlineSideMenuDirective {
     buildNestedMenuItems(items) {
         const menuItemsMap = new Map();
         const rootItems = [];
+        const baseUrl = this.router.url.split('#')[0];
         items.forEach((item) => {
             const menuItem = {
                 items: [],
@@ -653,7 +666,7 @@ class AXOutlineSideMenuDirective {
                 active: item.active,
                 toggleOnClick: false,
                 text: this.textReplace(item),
-                href: `${this.router.url.split('#')[0]}#${item.id}`,
+                href: `${baseUrl}#${item.id}`,
             };
             menuItemsMap.set(item.id, menuItem);
         });
@@ -677,10 +690,10 @@ class AXOutlineSideMenuDirective {
         });
         return rootItems;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXOutlineSideMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: AXOutlineSideMenuDirective, isStandalone: true, selector: "[axOutlineSideMenu]", providers: [AXUnsubscriber], exportAs: ["axOutlineSideMenu"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXOutlineSideMenuDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXOutlineSideMenuDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axOutlineSideMenu]',
@@ -701,8 +714,8 @@ const MODULES = [
     AXDecoratorModule,
 ];
 class AXSideMenuModule {
-    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,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXSideMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: AXSideMenuModule, imports: [CommonModule,
             AXCommonModule,
             AXRippleDirective,
             AXLoadingModule,
@@ -710,13 +723,13 @@ class AXSideMenuModule {
             RouterLink,
             RouterLinkActive,
             AXDecoratorModule, AXSideMenuComponent, AXSideMenuItemComponent, AXOutlineSideMenuDirective], exports: [AXSideMenuComponent, AXSideMenuItemComponent, AXOutlineSideMenuDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXSideMenuModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXSideMenuModule, imports: [CommonModule,
             AXCommonModule,
             AXLoadingModule,
             AXTranslationModule,
             AXDecoratorModule, AXSideMenuComponent, AXSideMenuItemComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXSideMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXSideMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],