@acorex/components 20.2.0-next.2 → 20.2.0-next.20

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

@@ -9,6 +9,7 @@ import { RouterLink, RouterLinkActive, Router } from '@angular/router';
 import { AXDecoratorGenericComponent, AXDecoratorIconComponent, AXDecoratorModule } from '@acorex/components/decorators';
 import { AXOutlineContainerDirective } from '@acorex/cdk/outline';
 import { AXUnsubscriber } from '@acorex/core/utils';
+import { isEqual } from 'lodash-es';
 import { map, distinctUntilChanged } from 'rxjs';
 
 class AXSideMenuItemClickEvent extends AXClickEvent {
@@ -26,6 +27,7 @@ class AXSideMenuItemComponent extends MXInteractiveComponent {
         this.isLoading = model(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
         this.isCollapsed = model(true, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
         this.onClick = output();
+        this.toggleOnClick = input(true, ...(ngDevMode ? [{ debugName: "toggleOnClick" }] : []));
         this.href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : []));
         this.routerLink = input(...(ngDevMode ? [undefined, { debugName: "routerLink" }] : []));
         this.routerLinkActive = input('ax-state-active', ...(ngDevMode ? [{ debugName: "routerLinkActive" }] : []));
@@ -46,7 +48,7 @@ class AXSideMenuItemComponent extends MXInteractiveComponent {
             handled: false,
         };
         this.onClick.emit(event);
-        if (!event.handled) {
+        if (!event.handled && this.toggleOnClick()) {
             this.toggle();
         }
         e.stopPropagation();
@@ -60,8 +62,8 @@ class AXSideMenuItemComponent extends MXInteractiveComponent {
     close() {
         this.isCollapsed.set(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXSideMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXSideMenuItemComponent, isStandalone: true, selector: "ax-side-menu-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActive: { classPropertyName: "routerLinkActive", publicName: "routerLinkActive", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { text: "textChange", active: "activeChange", isLoading: "isLoadingChange", isCollapsed: "isCollapsedChange", onClick: "onClick" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [{ provide: AXComponent, useExisting: AXSideMenuItemComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-title\"></ng-content>\n@if (routerLink()) {\n  <a\n    [axRipple]\n    [target]=\"target()\"\n    class=\"ax-side-item\"\n    [routerLink]=\"routerLink()\"\n    (click)=\"_handleClickEvent($event)\"\n    [class.ax-state-disabled]=\"disabled\"\n    [routerLinkActive]=\"routerLinkActive()\"\n    [routerLinkActiveOptions]=\"routerLinkActiveOptions()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n  </a>\n} @else if (href()) {\n  <a\n    [axRipple]\n    [href]=\"href()\"\n    [target]=\"target()\"\n    class=\"ax-side-item\"\n    [class.ax-state-active]=\"active()\"\n    (click)=\"_handleClickEvent($event)\"\n    [class.ax-state-disabled]=\"disabled\"\n  >\n    <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n  </a>\n} @else {\n  <div\n    [axRipple]\n    class=\"ax-side-item\"\n    [class.ax-state-active]=\"active()\"\n    (click)=\"_handleClickEvent($event)\"\n    [class.ax-state-disabled]=\"disabled\"\n  >\n    <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n  </div>\n}\n\n<div class=\"ax-side-children\" [@collapse]=\"isCollapsed()\">\n  @if (isLoading()) {\n    <p>{{ '@acorex:common.status.loading' | translate | async }}</p>\n  } @else {\n    <ng-content select=\"ax-side-menu-item, ng-container\"></ng-content>\n  }\n</div>\n\n<ng-content select=\"ax-divider\"></ng-content>\n<ng-template #menuItemContent>\n  <div class=\"ax-start-side\">\n    <ng-content select=\"ax-prefix\"></ng-content>\n    @if (text()) {\n      <span>{{ text() }}</span>\n    }\n    <ng-content select=\"ax-text\"></ng-content>\n    <ng-content></ng-content>\n  </div>\n  <div class=\"ax-end-side\">\n    <ng-content select=\"ax-suffix\"></ng-content>\n    @if (hasChild() && !isLoading()) {\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", dependencies: [{ kind: "directive", type: AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXSideMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.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" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [{ provide: AXComponent, useExisting: AXSideMenuItemComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-title\"></ng-content>\n@if (routerLink()) {\n  <a\n    [axRipple]\n    [target]=\"target()\"\n    class=\"ax-side-item\"\n    [routerLink]=\"routerLink()\"\n    (click)=\"_handleClickEvent($event)\"\n    [class.ax-state-disabled]=\"disabled\"\n    [routerLinkActive]=\"routerLinkActive()\"\n    [routerLinkActiveOptions]=\"routerLinkActiveOptions()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n  </a>\n} @else if (href()) {\n  <a\n    [axRipple]\n    [href]=\"href()\"\n    [target]=\"target()\"\n    class=\"ax-side-item\"\n    [class.ax-state-active]=\"active()\"\n    (click)=\"_handleClickEvent($event)\"\n    [class.ax-state-disabled]=\"disabled\"\n  >\n    <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n  </a>\n} @else {\n  <div\n    [axRipple]\n    class=\"ax-side-item\"\n    [class.ax-state-active]=\"active()\"\n    (click)=\"_handleClickEvent($event)\"\n    [class.ax-state-disabled]=\"disabled\"\n  >\n    <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n  </div>\n}\n\n<div class=\"ax-side-children\" [@collapse]=\"isCollapsed()\">\n  @if (isLoading()) {\n    <p>{{ '@acorex:common.status.loading' | translate | async }}</p>\n  } @else {\n    <ng-content select=\"ax-side-menu-item, ng-container\"></ng-content>\n  }\n</div>\n\n<ng-content select=\"ax-divider\"></ng-content>\n<ng-template #menuItemContent>\n  <div class=\"ax-start-side\">\n    <ng-content select=\"ax-prefix\"></ng-content>\n    @if (text()) {\n      <span>{{ text() }}</span>\n    }\n    <ng-content select=\"ax-text\"></ng-content>\n    <ng-content></ng-content>\n  </div>\n  <div class=\"ax-end-side\">\n    <ng-content select=\"ax-suffix\"></ng-content>\n    @if (hasChild() && !isLoading() && toggleOnClick()) {\n      <span class=\"ax-icon ax-icon-chevron-right arrow-icon\" [class.arrow-icon-expand]=\"!isCollapsed()\"> </span>\n    }\n    @if (isLoading()) {\n      <ax-loading></ax-loading>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], animations: [
             trigger('collapse', [
                 state('false', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),
                 state('true', style({ height: '0', visibility: 'hidden' })),
@@ -70,7 +72,7 @@ class AXSideMenuItemComponent extends MXInteractiveComponent {
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXSideMenuItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXSideMenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-side-menu-item', inputs: ['disabled'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, animations: [
                         trigger('collapse', [
@@ -87,7 +89,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                         AXLoadingComponent,
                         AsyncPipe,
                         AXTranslatorPipe,
-                    ], providers: [{ provide: AXComponent, useExisting: AXSideMenuItemComponent }], template: "<ng-content select=\"ax-title\"></ng-content>\n@if (routerLink()) {\n  <a\n    [axRipple]\n    [target]=\"target()\"\n    class=\"ax-side-item\"\n    [routerLink]=\"routerLink()\"\n    (click)=\"_handleClickEvent($event)\"\n    [class.ax-state-disabled]=\"disabled\"\n    [routerLinkActive]=\"routerLinkActive()\"\n    [routerLinkActiveOptions]=\"routerLinkActiveOptions()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n  </a>\n} @else if (href()) {\n  <a\n    [axRipple]\n    [href]=\"href()\"\n    [target]=\"target()\"\n    class=\"ax-side-item\"\n    [class.ax-state-active]=\"active()\"\n    (click)=\"_handleClickEvent($event)\"\n    [class.ax-state-disabled]=\"disabled\"\n  >\n    <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n  </a>\n} @else {\n  <div\n    [axRipple]\n    class=\"ax-side-item\"\n    [class.ax-state-active]=\"active()\"\n    (click)=\"_handleClickEvent($event)\"\n    [class.ax-state-disabled]=\"disabled\"\n  >\n    <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n  </div>\n}\n\n<div class=\"ax-side-children\" [@collapse]=\"isCollapsed()\">\n  @if (isLoading()) {\n    <p>{{ '@acorex:common.status.loading' | translate | async }}</p>\n  } @else {\n    <ng-content select=\"ax-side-menu-item, ng-container\"></ng-content>\n  }\n</div>\n\n<ng-content select=\"ax-divider\"></ng-content>\n<ng-template #menuItemContent>\n  <div class=\"ax-start-side\">\n    <ng-content select=\"ax-prefix\"></ng-content>\n    @if (text()) {\n      <span>{{ text() }}</span>\n    }\n    <ng-content select=\"ax-text\"></ng-content>\n    <ng-content></ng-content>\n  </div>\n  <div class=\"ax-end-side\">\n    <ng-content select=\"ax-suffix\"></ng-content>\n    @if (hasChild() && !isLoading()) {\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" }]
+                    ], providers: [{ provide: AXComponent, useExisting: AXSideMenuItemComponent }], template: "<ng-content select=\"ax-title\"></ng-content>\n@if (routerLink()) {\n  <a\n    [axRipple]\n    [target]=\"target()\"\n    class=\"ax-side-item\"\n    [routerLink]=\"routerLink()\"\n    (click)=\"_handleClickEvent($event)\"\n    [class.ax-state-disabled]=\"disabled\"\n    [routerLinkActive]=\"routerLinkActive()\"\n    [routerLinkActiveOptions]=\"routerLinkActiveOptions()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n  </a>\n} @else if (href()) {\n  <a\n    [axRipple]\n    [href]=\"href()\"\n    [target]=\"target()\"\n    class=\"ax-side-item\"\n    [class.ax-state-active]=\"active()\"\n    (click)=\"_handleClickEvent($event)\"\n    [class.ax-state-disabled]=\"disabled\"\n  >\n    <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n  </a>\n} @else {\n  <div\n    [axRipple]\n    class=\"ax-side-item\"\n    [class.ax-state-active]=\"active()\"\n    (click)=\"_handleClickEvent($event)\"\n    [class.ax-state-disabled]=\"disabled\"\n  >\n    <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n  </div>\n}\n\n<div class=\"ax-side-children\" [@collapse]=\"isCollapsed()\">\n  @if (isLoading()) {\n    <p>{{ '@acorex:common.status.loading' | translate | async }}</p>\n  } @else {\n    <ng-content select=\"ax-side-menu-item, ng-container\"></ng-content>\n  }\n</div>\n\n<ng-content select=\"ax-divider\"></ng-content>\n<ng-template #menuItemContent>\n  <div class=\"ax-start-side\">\n    <ng-content select=\"ax-prefix\"></ng-content>\n    @if (text()) {\n      <span>{{ text() }}</span>\n    }\n    <ng-content select=\"ax-text\"></ng-content>\n    <ng-content></ng-content>\n  </div>\n  <div class=\"ax-end-side\">\n    <ng-content select=\"ax-suffix\"></ng-content>\n    @if (hasChild() && !isLoading() && toggleOnClick()) {\n      <span class=\"ax-icon ax-icon-chevron-right arrow-icon\" [class.arrow-icon-expand]=\"!isCollapsed()\"> </span>\n    }\n    @if (isLoading()) {\n      <ax-loading></ax-loading>\n    }\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -106,10 +108,10 @@ class AXSideMenuComponent extends NXComponent {
     get __hostClass() {
         return [`ax-look-${this.look()}`, `ax-location-${this.location()}`];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXSideMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXSideMenuComponent, isStandalone: true, selector: "ax-side-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, location: { classPropertyName: "location", publicName: "location", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXSideMenuComponent }], viewQueries: [{ propertyName: "children", predicate: AXSideMenuItemComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-side-menu-item,ax-title,ng-container,ng-content\"></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      [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    >\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    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  }\n\n  <ng-template #sideMenuItemContent>\n    <ax-prefix>\n      @if (item.icon) {\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      }\n    </ax-prefix>\n    @if (item.data) {\n      <ax-text>{{ item.data }}</ax-text>\n    }\n    @if (item.suffixText) {\n      <ax-suffix>\n        <ax-text>{{ item.suffixText }}</ax-text>\n      </ax-suffix>\n    }\n    @for (child of item.items; track child) {\n      <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    }\n  </ng-template>\n</ng-template>\n", styles: ["ax-side-menu{--ax-comp-side-menu-indicator-size: 2px}ax-side-menu{width:100%;display:flex;color:inherit;-webkit-user-select:none;user-select:none;flex-direction:column;gap:var(--ax-comp-side-menu-gap, .5rem);font-size:var(--ax-comp-side-menu-font-size, .875rem);line-height:var(--ax-comp-side-menu-line-height, 1.25rem)}ax-side-menu>ax-title{margin-block:.5rem;display:block;padding-inline-start:.75rem;padding-inline-end:.75rem;padding-top:.25rem;padding-bottom:.25rem;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:.5}ax-side-menu ax-side-menu-item ax-title{margin-block:.5rem;margin-top:.5rem;display:block;padding-inline-start:.75rem;padding-inline-end:.75rem;padding-top:.25rem;padding-bottom:.25rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:var(--ax-comp-side-menu-title-opacity, .5);font-size:var(--ax-comp-side-menu-title-font-size, .75rem)}ax-side-menu ax-side-menu-item ax-divider{width:100%;display:block;height:var(--ax-comp-side-menu-divider-height, 1px);margin-top:var(--ax-comp-side-menu-divider-margin-y, .25rem);margin-bottom:var(--ax-comp-side-menu-divider-margin-y, .25rem);background-color:rgba(var(--ax-comp-side-menu-divider-bg-color, var(--ax-sys-color-border-lightest-surface)))}ax-side-menu ax-side-menu-item .ax-side-item{padding-inline:var(--ax-comp-side-menu-item-padding-x, 1rem);padding-block:var(--ax-comp-side-menu-item-padding-y, .5rem);font-size:inherit;position:relative;display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:.75rem;overflow:hidden;font-weight:500}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{cursor:not-allowed;opacity:var(--ax-comp-side-menu-item-disabled-opacity, .5)}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:hover:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled) ax-loading ax-loading-spinner span,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled) ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-comp-side-menu-text-color, var(--ax-sys-color-on-primary-surface)))}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side,ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{display:flex;align-items:center}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side{gap:.5rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{gap:.5rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{display:block}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{transform: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-comp-side-menu-text-color, var(--ax-sys-color-on-primary-surface)))}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:rgba(var(--ax-comp-side-menu-ripple-color, var(--ax-sys-color-on-surface)),.3)!important}ax-side-menu ax-side-menu-item .ax-side-children{overflow:hidden;padding-inline-start:1.25rem;display:flex;flex-direction:column;gap:var(--ax-comp-side-menu-children-gap, .5rem)}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child{padding-top:var(--ax-comp-side-menu-children-gap, .5rem)}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child ax-title{margin-top:1em}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item .ax-side-item{font-weight:400}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item{border-radius:var(--ax-comp-side-menu-pills-border-radius, var(--ax-sys-border-radius))}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover.ax-state-disabled){color:rgba(var(--ax-comp-side-menu-hover-text-color, var(--ax-sys-color-on-surface)));background-color:rgba(var(--ax-comp-side-menu-hover-bg-color, var(--ax-sys-color-surface)))}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled){color:rgba(var(--ax-comp-side-menu-active-text-color, var(--ax-sys-color-on-primary-surface)));background-color:rgba(var(--ax-comp-side-menu-active-bg-color, var(--ax-sys-color-primary-surface)))}ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color{gap:0}ax-side-menu.ax-look-with-line .ax-ripple,ax-side-menu.ax-look-with-line-color .ax-ripple{display:none}ax-side-menu.ax-look-with-line.ax-location-start .ax-side-children:before,ax-side-menu.ax-look-with-line.ax-location-start .ax-side-item:before,ax-side-menu.ax-look-with-line-color.ax-location-start .ax-side-children:before,ax-side-menu.ax-look-with-line-color.ax-location-start .ax-side-item:before{inset-inline-start:0;width:calc(var(--ax-comp-side-menu-indicator-size) / 2)}ax-side-menu.ax-look-with-line.ax-location-end .ax-side-children:before,ax-side-menu.ax-look-with-line.ax-location-end .ax-side-item:before,ax-side-menu.ax-look-with-line-color.ax-location-end .ax-side-children:before,ax-side-menu.ax-look-with-line-color.ax-location-end .ax-side-item:before{inset-inline-end:0;width:calc(var(--ax-comp-side-menu-indicator-size) / 2)}ax-side-menu.ax-look-with-line ax-side-menu-item,ax-side-menu.ax-look-with-line .ax-side-children,ax-side-menu.ax-look-with-line .ax-side-item,ax-side-menu.ax-look-with-line-color ax-side-menu-item,ax-side-menu.ax-look-with-line-color .ax-side-children,ax-side-menu.ax-look-with-line-color .ax-side-item{position:relative}ax-side-menu.ax-look-with-line ax-side-menu-item:before,ax-side-menu.ax-look-with-line .ax-side-children:before,ax-side-menu.ax-look-with-line .ax-side-item:before,ax-side-menu.ax-look-with-line-color ax-side-menu-item:before,ax-side-menu.ax-look-with-line-color .ax-side-children:before,ax-side-menu.ax-look-with-line-color .ax-side-item:before{content:\"\";height:100%;position:absolute;background-color:rgba(var(--ax-comp-side-menu-indicator-color, var(--ax-sys-color-border-lightest-surface)));transition-timing-function:var(--ax-sys-transition-timing-function);transition-duration:var(--ax-sys-transition-duration);transition-property:width}ax-side-menu.ax-look-with-line .ax-side-item:hover:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled),ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){color:rgba(var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface)))}ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled),ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled){color:rgba(var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface)))}ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled):before,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled):before{content:\"\";height:100%;position:absolute;width:var(--ax-comp-side-menu-indicator-size);background-color:rgba(var(--ax-comp-side-menu-indicator-active-color, var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface))))}ax-side-menu.ax-look-with-line .ax-side-children,ax-side-menu.ax-look-with-line-color .ax-side-children{gap:0}ax-side-menu.ax-look-with-line .ax-side-children ax-side-menu-item:first-child,ax-side-menu.ax-look-with-line-color .ax-side-children ax-side-menu-item:first-child{padding-top:0}ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface)),.05)}ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled){background-color:rgba(var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface)),.1)}html[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon:before{-moz-transform:scale(-1,1);-webkit-transform:scale(-1,1);-o-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scaleX(-1)}html[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{transform:rotate(-90deg)!important}\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", "href", "routerLink", "routerLinkActive", "routerLinkActiveOptions", "target"], outputs: ["textChange", "activeChange", "isLoadingChange", "isCollapsedChange", "onClick"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXSideMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.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 } }, outputs: { items: "itemsChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXSideMenuComponent }], viewQueries: [{ propertyName: "children", predicate: AXSideMenuItemComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-side-menu-item,ax-title,ng-container,ng-content\"></ng-content>\n\n@for (node of items(); track node) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n<ng-template #Recursion let-item>\n  @if (item.title) {\n    <ax-title>{{ item.title }}</ax-title>\n  }\n  @if (item.routerLink) {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [target]=\"item.target\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [routerLink]=\"item.routerLink\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n      [routerLinkActive]=\"item.routerLinkActive\"\n      [routerLinkActiveOptions]=\"item.routerLinkActiveOptions\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  } @else if (item.href) {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [href]=\"item.href\"\n      [target]=\"item.target\"\n      [active]=\"item.active\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  } @else {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [active]=\"item.active\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  }\n\n  <ng-template #sideMenuItemContent>\n    <ax-prefix>\n      @if (item.icon) {\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      }\n    </ax-prefix>\n    @if (item.data) {\n      <ax-text>{{ item.data }}</ax-text>\n    }\n    @if (item.suffixText) {\n      <ax-suffix>\n        <ax-text>{{ item.suffixText }}</ax-text>\n      </ax-suffix>\n    }\n    @for (child of item.items; track child) {\n      <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    }\n  </ng-template>\n</ng-template>\n", styles: ["ax-side-menu{--ax-comp-side-menu-indicator-size: 2px}ax-side-menu{width:100%;display:flex;color:inherit;-webkit-user-select:none;user-select:none;flex-direction:column;gap:var(--ax-comp-side-menu-gap, .5rem);font-size:var(--ax-comp-side-menu-font-size, .875rem);line-height:var(--ax-comp-side-menu-line-height, 1.25rem)}ax-side-menu>ax-title{margin-block:.5rem;display:block;padding-inline-start:.75rem;padding-inline-end:.75rem;padding-top:.25rem;padding-bottom:.25rem;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:.5}ax-side-menu ax-side-menu-item ax-title{margin-block:.5rem;margin-top:.5rem;display:block;padding-inline-start:.75rem;padding-inline-end:.75rem;padding-top:.25rem;padding-bottom:.25rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:var(--ax-comp-side-menu-title-opacity, .5);font-size:var(--ax-comp-side-menu-title-font-size, .75rem)}ax-side-menu ax-side-menu-item ax-divider{width:100%;display:block;height:var(--ax-comp-side-menu-divider-height, 1px);margin-top:var(--ax-comp-side-menu-divider-margin-y, .25rem);margin-bottom:var(--ax-comp-side-menu-divider-margin-y, .25rem);background-color:rgba(var(--ax-comp-side-menu-divider-bg-color, var(--ax-sys-color-border-lightest-surface)))}ax-side-menu ax-side-menu-item .ax-side-item{padding-inline:var(--ax-comp-side-menu-item-padding-x, 1rem);padding-block:var(--ax-comp-side-menu-item-padding-y, .5rem);font-size:inherit;position:relative;display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:.75rem;font-weight:500}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{cursor:not-allowed;opacity:var(--ax-comp-side-menu-item-disabled-opacity, .5)}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:hover:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled) ax-loading ax-loading-spinner span,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled) ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-comp-side-menu-text-color, var(--ax-sys-color-on-primary-surface)))}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side,ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{display:flex;align-items:center}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side{gap:.5rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{gap:.5rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{display:block}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{transform: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-comp-side-menu-text-color, var(--ax-sys-color-on-primary-surface)))}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:rgba(var(--ax-comp-side-menu-ripple-color, var(--ax-sys-color-on-surface)),.3)!important}ax-side-menu ax-side-menu-item .ax-side-children{overflow:hidden;padding-inline-start:1.25rem;display:flex;flex-direction:column;gap:var(--ax-comp-side-menu-children-gap, .5rem)}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child{padding-top:var(--ax-comp-side-menu-children-gap, .5rem)}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child ax-title{margin-top:1em}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item .ax-side-item{font-weight:400}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item{border-radius:var(--ax-comp-side-menu-pills-border-radius, var(--ax-sys-border-radius))}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover.ax-state-disabled){color:rgba(var(--ax-comp-side-menu-hover-text-color, var(--ax-sys-color-on-surface)));background-color:rgba(var(--ax-comp-side-menu-hover-bg-color, var(--ax-sys-color-surface)))}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled){color:rgba(var(--ax-comp-side-menu-active-text-color, var(--ax-sys-color-on-primary-surface)));background-color:rgba(var(--ax-comp-side-menu-active-bg-color, var(--ax-sys-color-primary-surface)))}ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color{gap:0}ax-side-menu.ax-look-with-line .ax-ripple,ax-side-menu.ax-look-with-line-color .ax-ripple{display:none}ax-side-menu.ax-look-with-line.ax-location-start .ax-side-children:before,ax-side-menu.ax-look-with-line.ax-location-start .ax-side-item:before,ax-side-menu.ax-look-with-line-color.ax-location-start .ax-side-children:before,ax-side-menu.ax-look-with-line-color.ax-location-start .ax-side-item:before{inset-inline-start:0;width:calc(var(--ax-comp-side-menu-indicator-size) / 2)}ax-side-menu.ax-look-with-line.ax-location-end .ax-side-children:before,ax-side-menu.ax-look-with-line.ax-location-end .ax-side-item:before,ax-side-menu.ax-look-with-line-color.ax-location-end .ax-side-children:before,ax-side-menu.ax-look-with-line-color.ax-location-end .ax-side-item:before{inset-inline-end:0;width:calc(var(--ax-comp-side-menu-indicator-size) / 2)}ax-side-menu.ax-look-with-line ax-side-menu-item,ax-side-menu.ax-look-with-line .ax-side-children,ax-side-menu.ax-look-with-line .ax-side-item,ax-side-menu.ax-look-with-line-color ax-side-menu-item,ax-side-menu.ax-look-with-line-color .ax-side-children,ax-side-menu.ax-look-with-line-color .ax-side-item{position:relative}ax-side-menu.ax-look-with-line ax-side-menu-item:before,ax-side-menu.ax-look-with-line .ax-side-children:before,ax-side-menu.ax-look-with-line .ax-side-item:before,ax-side-menu.ax-look-with-line-color ax-side-menu-item:before,ax-side-menu.ax-look-with-line-color .ax-side-children:before,ax-side-menu.ax-look-with-line-color .ax-side-item:before{content:\"\";height:100%;position:absolute;background-color:rgba(var(--ax-comp-side-menu-indicator-color, var(--ax-sys-color-border-lightest-surface)));transition-timing-function:var(--ax-sys-transition-timing-function);transition-duration:var(--ax-sys-transition-duration);transition-property:width}ax-side-menu.ax-look-with-line .ax-side-item:hover:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled),ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){color:rgba(var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface)))}ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled),ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled){color:rgba(var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface)))}ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled):before,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled):before{content:\"\";height:100%;position:absolute;width:var(--ax-comp-side-menu-indicator-size);background-color:rgba(var(--ax-comp-side-menu-indicator-active-color, var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface))))}ax-side-menu.ax-look-with-line .ax-side-children,ax-side-menu.ax-look-with-line-color .ax-side-children{gap:0}ax-side-menu.ax-look-with-line .ax-side-children ax-side-menu-item:first-child,ax-side-menu.ax-look-with-line-color .ax-side-children ax-side-menu-item:first-child{padding-top:0}ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface)),.05)}ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled){background-color:rgba(var(--ax-comp-side-menu-active-bg-color, var(--ax-sys-color-primary-surface)),.1)}ax-side-menu.ax-look-default{gap:.25rem}ax-side-menu.ax-look-default ax-icon{opacity:.6}ax-side-menu.ax-look-default .ax-side-item{padding-inline:1rem;padding-block:.5rem;border-radius:var(--ax-sys-border-radius)}ax-side-menu.ax-look-default .ax-side-item:hover:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-surface)),.5)}ax-side-menu.ax-look-default .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-active.ax-state-disabled){background-color:rgba(var(--ax-comp-side-menu-active-bg-color, var(--ax-sys-color-primary-surface)),.1)}ax-side-menu.ax-look-default .ax-side-children{gap:.25rem;position:relative;padding-inline-start:2.25rem}ax-side-menu.ax-look-default .ax-side-children:before{width:1px;content:\"\";height:100%;position:absolute;margin-inline-start:-.75rem;background-color:rgba(var(--ax-comp-side-menu-indicator-color, var(--ax-sys-color-border-light-surface)))}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item .ax-side-item{padding-block:.25rem;padding-inline:.5rem}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item:first-child{padding-top:0}html[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon:before{-moz-transform:scale(-1,1);-webkit-transform:scale(-1,1);-o-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scaleX(-1)}html[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{transform:rotate(-90deg)!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXSideMenuItemComponent, selector: "ax-side-menu-item", inputs: ["disabled", "text", "active", "isLoading", "isCollapsed", "toggleOnClick", "href", "routerLink", "routerLinkActive", "routerLinkActiveOptions", "target"], outputs: ["textChange", "activeChange", "isLoadingChange", "isCollapsedChange", "onClick"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXSideMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXSideMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-side-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         NgTemplateOutlet,
@@ -118,7 +120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                         RouterLink,
                         RouterLinkActive,
                         AXDecoratorIconComponent,
-                    ], providers: [{ provide: AXComponent, useExisting: AXSideMenuComponent }], template: "<ng-content select=\"ax-side-menu-item,ax-title,ng-container,ng-content\"></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      [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    >\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    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  }\n\n  <ng-template #sideMenuItemContent>\n    <ax-prefix>\n      @if (item.icon) {\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      }\n    </ax-prefix>\n    @if (item.data) {\n      <ax-text>{{ item.data }}</ax-text>\n    }\n    @if (item.suffixText) {\n      <ax-suffix>\n        <ax-text>{{ item.suffixText }}</ax-text>\n      </ax-suffix>\n    }\n    @for (child of item.items; track child) {\n      <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    }\n  </ng-template>\n</ng-template>\n", styles: ["ax-side-menu{--ax-comp-side-menu-indicator-size: 2px}ax-side-menu{width:100%;display:flex;color:inherit;-webkit-user-select:none;user-select:none;flex-direction:column;gap:var(--ax-comp-side-menu-gap, .5rem);font-size:var(--ax-comp-side-menu-font-size, .875rem);line-height:var(--ax-comp-side-menu-line-height, 1.25rem)}ax-side-menu>ax-title{margin-block:.5rem;display:block;padding-inline-start:.75rem;padding-inline-end:.75rem;padding-top:.25rem;padding-bottom:.25rem;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:.5}ax-side-menu ax-side-menu-item ax-title{margin-block:.5rem;margin-top:.5rem;display:block;padding-inline-start:.75rem;padding-inline-end:.75rem;padding-top:.25rem;padding-bottom:.25rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:var(--ax-comp-side-menu-title-opacity, .5);font-size:var(--ax-comp-side-menu-title-font-size, .75rem)}ax-side-menu ax-side-menu-item ax-divider{width:100%;display:block;height:var(--ax-comp-side-menu-divider-height, 1px);margin-top:var(--ax-comp-side-menu-divider-margin-y, .25rem);margin-bottom:var(--ax-comp-side-menu-divider-margin-y, .25rem);background-color:rgba(var(--ax-comp-side-menu-divider-bg-color, var(--ax-sys-color-border-lightest-surface)))}ax-side-menu ax-side-menu-item .ax-side-item{padding-inline:var(--ax-comp-side-menu-item-padding-x, 1rem);padding-block:var(--ax-comp-side-menu-item-padding-y, .5rem);font-size:inherit;position:relative;display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:.75rem;overflow:hidden;font-weight:500}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{cursor:not-allowed;opacity:var(--ax-comp-side-menu-item-disabled-opacity, .5)}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:hover:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled) ax-loading ax-loading-spinner span,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled) ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-comp-side-menu-text-color, var(--ax-sys-color-on-primary-surface)))}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side,ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{display:flex;align-items:center}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side{gap:.5rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{gap:.5rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{display:block}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{transform: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-comp-side-menu-text-color, var(--ax-sys-color-on-primary-surface)))}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:rgba(var(--ax-comp-side-menu-ripple-color, var(--ax-sys-color-on-surface)),.3)!important}ax-side-menu ax-side-menu-item .ax-side-children{overflow:hidden;padding-inline-start:1.25rem;display:flex;flex-direction:column;gap:var(--ax-comp-side-menu-children-gap, .5rem)}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child{padding-top:var(--ax-comp-side-menu-children-gap, .5rem)}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child ax-title{margin-top:1em}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item .ax-side-item{font-weight:400}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item{border-radius:var(--ax-comp-side-menu-pills-border-radius, var(--ax-sys-border-radius))}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover.ax-state-disabled){color:rgba(var(--ax-comp-side-menu-hover-text-color, var(--ax-sys-color-on-surface)));background-color:rgba(var(--ax-comp-side-menu-hover-bg-color, var(--ax-sys-color-surface)))}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled){color:rgba(var(--ax-comp-side-menu-active-text-color, var(--ax-sys-color-on-primary-surface)));background-color:rgba(var(--ax-comp-side-menu-active-bg-color, var(--ax-sys-color-primary-surface)))}ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color{gap:0}ax-side-menu.ax-look-with-line .ax-ripple,ax-side-menu.ax-look-with-line-color .ax-ripple{display:none}ax-side-menu.ax-look-with-line.ax-location-start .ax-side-children:before,ax-side-menu.ax-look-with-line.ax-location-start .ax-side-item:before,ax-side-menu.ax-look-with-line-color.ax-location-start .ax-side-children:before,ax-side-menu.ax-look-with-line-color.ax-location-start .ax-side-item:before{inset-inline-start:0;width:calc(var(--ax-comp-side-menu-indicator-size) / 2)}ax-side-menu.ax-look-with-line.ax-location-end .ax-side-children:before,ax-side-menu.ax-look-with-line.ax-location-end .ax-side-item:before,ax-side-menu.ax-look-with-line-color.ax-location-end .ax-side-children:before,ax-side-menu.ax-look-with-line-color.ax-location-end .ax-side-item:before{inset-inline-end:0;width:calc(var(--ax-comp-side-menu-indicator-size) / 2)}ax-side-menu.ax-look-with-line ax-side-menu-item,ax-side-menu.ax-look-with-line .ax-side-children,ax-side-menu.ax-look-with-line .ax-side-item,ax-side-menu.ax-look-with-line-color ax-side-menu-item,ax-side-menu.ax-look-with-line-color .ax-side-children,ax-side-menu.ax-look-with-line-color .ax-side-item{position:relative}ax-side-menu.ax-look-with-line ax-side-menu-item:before,ax-side-menu.ax-look-with-line .ax-side-children:before,ax-side-menu.ax-look-with-line .ax-side-item:before,ax-side-menu.ax-look-with-line-color ax-side-menu-item:before,ax-side-menu.ax-look-with-line-color .ax-side-children:before,ax-side-menu.ax-look-with-line-color .ax-side-item:before{content:\"\";height:100%;position:absolute;background-color:rgba(var(--ax-comp-side-menu-indicator-color, var(--ax-sys-color-border-lightest-surface)));transition-timing-function:var(--ax-sys-transition-timing-function);transition-duration:var(--ax-sys-transition-duration);transition-property:width}ax-side-menu.ax-look-with-line .ax-side-item:hover:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled),ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){color:rgba(var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface)))}ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled),ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled){color:rgba(var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface)))}ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled):before,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled):before{content:\"\";height:100%;position:absolute;width:var(--ax-comp-side-menu-indicator-size);background-color:rgba(var(--ax-comp-side-menu-indicator-active-color, var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface))))}ax-side-menu.ax-look-with-line .ax-side-children,ax-side-menu.ax-look-with-line-color .ax-side-children{gap:0}ax-side-menu.ax-look-with-line .ax-side-children ax-side-menu-item:first-child,ax-side-menu.ax-look-with-line-color .ax-side-children ax-side-menu-item:first-child{padding-top:0}ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface)),.05)}ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled){background-color:rgba(var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface)),.1)}html[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon:before{-moz-transform:scale(-1,1);-webkit-transform:scale(-1,1);-o-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scaleX(-1)}html[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{transform:rotate(-90deg)!important}\n"] }]
+                    ], providers: [{ provide: AXComponent, useExisting: AXSideMenuComponent }], template: "<ng-content select=\"ax-side-menu-item,ax-title,ng-container,ng-content\"></ng-content>\n\n@for (node of items(); track node) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n<ng-template #Recursion let-item>\n  @if (item.title) {\n    <ax-title>{{ item.title }}</ax-title>\n  }\n  @if (item.routerLink) {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [target]=\"item.target\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [routerLink]=\"item.routerLink\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n      [routerLinkActive]=\"item.routerLinkActive\"\n      [routerLinkActiveOptions]=\"item.routerLinkActiveOptions\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  } @else if (item.href) {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [href]=\"item.href\"\n      [target]=\"item.target\"\n      [active]=\"item.active\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  } @else {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [active]=\"item.active\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  }\n\n  <ng-template #sideMenuItemContent>\n    <ax-prefix>\n      @if (item.icon) {\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      }\n    </ax-prefix>\n    @if (item.data) {\n      <ax-text>{{ item.data }}</ax-text>\n    }\n    @if (item.suffixText) {\n      <ax-suffix>\n        <ax-text>{{ item.suffixText }}</ax-text>\n      </ax-suffix>\n    }\n    @for (child of item.items; track child) {\n      <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    }\n  </ng-template>\n</ng-template>\n", styles: ["ax-side-menu{--ax-comp-side-menu-indicator-size: 2px}ax-side-menu{width:100%;display:flex;color:inherit;-webkit-user-select:none;user-select:none;flex-direction:column;gap:var(--ax-comp-side-menu-gap, .5rem);font-size:var(--ax-comp-side-menu-font-size, .875rem);line-height:var(--ax-comp-side-menu-line-height, 1.25rem)}ax-side-menu>ax-title{margin-block:.5rem;display:block;padding-inline-start:.75rem;padding-inline-end:.75rem;padding-top:.25rem;padding-bottom:.25rem;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:.5}ax-side-menu ax-side-menu-item ax-title{margin-block:.5rem;margin-top:.5rem;display:block;padding-inline-start:.75rem;padding-inline-end:.75rem;padding-top:.25rem;padding-bottom:.25rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:var(--ax-comp-side-menu-title-opacity, .5);font-size:var(--ax-comp-side-menu-title-font-size, .75rem)}ax-side-menu ax-side-menu-item ax-divider{width:100%;display:block;height:var(--ax-comp-side-menu-divider-height, 1px);margin-top:var(--ax-comp-side-menu-divider-margin-y, .25rem);margin-bottom:var(--ax-comp-side-menu-divider-margin-y, .25rem);background-color:rgba(var(--ax-comp-side-menu-divider-bg-color, var(--ax-sys-color-border-lightest-surface)))}ax-side-menu ax-side-menu-item .ax-side-item{padding-inline:var(--ax-comp-side-menu-item-padding-x, 1rem);padding-block:var(--ax-comp-side-menu-item-padding-y, .5rem);font-size:inherit;position:relative;display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:.75rem;font-weight:500}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{cursor:not-allowed;opacity:var(--ax-comp-side-menu-item-disabled-opacity, .5)}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:hover:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled) ax-loading ax-loading-spinner span,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled) ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-comp-side-menu-text-color, var(--ax-sys-color-on-primary-surface)))}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side,ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{display:flex;align-items:center}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side{gap:.5rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{gap:.5rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{display:block}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{transform: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-comp-side-menu-text-color, var(--ax-sys-color-on-primary-surface)))}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:rgba(var(--ax-comp-side-menu-ripple-color, var(--ax-sys-color-on-surface)),.3)!important}ax-side-menu ax-side-menu-item .ax-side-children{overflow:hidden;padding-inline-start:1.25rem;display:flex;flex-direction:column;gap:var(--ax-comp-side-menu-children-gap, .5rem)}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child{padding-top:var(--ax-comp-side-menu-children-gap, .5rem)}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child ax-title{margin-top:1em}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item .ax-side-item{font-weight:400}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item{border-radius:var(--ax-comp-side-menu-pills-border-radius, var(--ax-sys-border-radius))}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover.ax-state-disabled){color:rgba(var(--ax-comp-side-menu-hover-text-color, var(--ax-sys-color-on-surface)));background-color:rgba(var(--ax-comp-side-menu-hover-bg-color, var(--ax-sys-color-surface)))}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled){color:rgba(var(--ax-comp-side-menu-active-text-color, var(--ax-sys-color-on-primary-surface)));background-color:rgba(var(--ax-comp-side-menu-active-bg-color, var(--ax-sys-color-primary-surface)))}ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color{gap:0}ax-side-menu.ax-look-with-line .ax-ripple,ax-side-menu.ax-look-with-line-color .ax-ripple{display:none}ax-side-menu.ax-look-with-line.ax-location-start .ax-side-children:before,ax-side-menu.ax-look-with-line.ax-location-start .ax-side-item:before,ax-side-menu.ax-look-with-line-color.ax-location-start .ax-side-children:before,ax-side-menu.ax-look-with-line-color.ax-location-start .ax-side-item:before{inset-inline-start:0;width:calc(var(--ax-comp-side-menu-indicator-size) / 2)}ax-side-menu.ax-look-with-line.ax-location-end .ax-side-children:before,ax-side-menu.ax-look-with-line.ax-location-end .ax-side-item:before,ax-side-menu.ax-look-with-line-color.ax-location-end .ax-side-children:before,ax-side-menu.ax-look-with-line-color.ax-location-end .ax-side-item:before{inset-inline-end:0;width:calc(var(--ax-comp-side-menu-indicator-size) / 2)}ax-side-menu.ax-look-with-line ax-side-menu-item,ax-side-menu.ax-look-with-line .ax-side-children,ax-side-menu.ax-look-with-line .ax-side-item,ax-side-menu.ax-look-with-line-color ax-side-menu-item,ax-side-menu.ax-look-with-line-color .ax-side-children,ax-side-menu.ax-look-with-line-color .ax-side-item{position:relative}ax-side-menu.ax-look-with-line ax-side-menu-item:before,ax-side-menu.ax-look-with-line .ax-side-children:before,ax-side-menu.ax-look-with-line .ax-side-item:before,ax-side-menu.ax-look-with-line-color ax-side-menu-item:before,ax-side-menu.ax-look-with-line-color .ax-side-children:before,ax-side-menu.ax-look-with-line-color .ax-side-item:before{content:\"\";height:100%;position:absolute;background-color:rgba(var(--ax-comp-side-menu-indicator-color, var(--ax-sys-color-border-lightest-surface)));transition-timing-function:var(--ax-sys-transition-timing-function);transition-duration:var(--ax-sys-transition-duration);transition-property:width}ax-side-menu.ax-look-with-line .ax-side-item:hover:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled),ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){color:rgba(var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface)))}ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled),ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled){color:rgba(var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface)))}ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled):before,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled):before{content:\"\";height:100%;position:absolute;width:var(--ax-comp-side-menu-indicator-size);background-color:rgba(var(--ax-comp-side-menu-indicator-active-color, var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface))))}ax-side-menu.ax-look-with-line .ax-side-children,ax-side-menu.ax-look-with-line-color .ax-side-children{gap:0}ax-side-menu.ax-look-with-line .ax-side-children ax-side-menu-item:first-child,ax-side-menu.ax-look-with-line-color .ax-side-children ax-side-menu-item:first-child{padding-top:0}ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface)),.05)}ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled){background-color:rgba(var(--ax-comp-side-menu-active-bg-color, var(--ax-sys-color-primary-surface)),.1)}ax-side-menu.ax-look-default{gap:.25rem}ax-side-menu.ax-look-default ax-icon{opacity:.6}ax-side-menu.ax-look-default .ax-side-item{padding-inline:1rem;padding-block:.5rem;border-radius:var(--ax-sys-border-radius)}ax-side-menu.ax-look-default .ax-side-item:hover:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-surface)),.5)}ax-side-menu.ax-look-default .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-active.ax-state-disabled){background-color:rgba(var(--ax-comp-side-menu-active-bg-color, var(--ax-sys-color-primary-surface)),.1)}ax-side-menu.ax-look-default .ax-side-children{gap:.25rem;position:relative;padding-inline-start:2.25rem}ax-side-menu.ax-look-default .ax-side-children:before{width:1px;content:\"\";height:100%;position:absolute;margin-inline-start:-.75rem;background-color:rgba(var(--ax-comp-side-menu-indicator-color, var(--ax-sys-color-border-light-surface)))}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item .ax-side-item{padding-block:.25rem;padding-inline:.5rem}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item:first-child{padding-top:0}html[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon:before{-moz-transform:scale(-1,1);-webkit-transform:scale(-1,1);-o-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scaleX(-1)}html[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{transform:rotate(-90deg)!important}\n"] }]
         }], propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -127,47 +129,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
 class AXOutlineSideMenuDirective {
     constructor() {
         this.router = inject(Router);
+        this.unsubscriber = inject(AXUnsubscriber);
         this.sideMenu = inject(AXSideMenuComponent);
         this.container = inject(AXOutlineContainerDirective);
-        this.unsubscriber = inject(AXUnsubscriber);
         this.#anr = afterNextRender(() => {
             this.container.outlineItems$
                 .pipe(this.unsubscriber.takeUntilDestroy, map((items) => {
-                if (!items)
+                if (!items || items.length === 0)
                     return [];
-                return items.map((item) => ({
-                    target: '_self',
-                    active: item.active,
-                    text: this.textReplace(item),
-                    href: `${this.router.url.split('#')[0]}#${item.el.id}`,
-                }));
-            }), distinctUntilChanged((prev, curr) => {
-                if (prev.length !== curr.length)
-                    return false;
-                return prev.every((p, i) => p.active === curr[i].active && p.text === curr[i].text && p.href === curr[i].href);
-            }))
+                return this.buildNestedMenuItems(items);
+            }), distinctUntilChanged(isEqual))
                 .subscribe((menuItems) => {
                 this.updateSideMenu(menuItems);
             });
         });
     }
     #anr;
-    updateSideMenu(menuItems) {
-        const prevMenuItems = this.sideMenu.children().map((item) => ({
-            target: item.target(),
-            active: item.active(),
-            text: item.text(),
-            href: item.href(),
-        }));
-        if (!prevMenuItems ||
-            prevMenuItems.length !== menuItems.length ||
-            prevMenuItems.every((p, i) => p.active === menuItems[i].active)) {
-            this.sideMenu.items.set(menuItems);
+    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);
             return;
         }
-        const activeIndex = menuItems.findIndex((item) => item.active === true);
-        this.sideMenu.children().forEach((item) => item.active.set(false));
-        this.sideMenu.children()[activeIndex].active.set(true);
+        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()) {
+            return;
+        }
+        currentActiveComponent?.active.set(false);
+        if (newActiveItem) {
+            const componentToActivate = currentComponents.find((c) => c.href() === newActiveItem.href);
+            componentToActivate?.active.set(true);
+        }
+    }
+    /**
+     * 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) => {
+            let signature = item.href || '';
+            if (item.items && item.items.length > 0) {
+                signature += `(${this.getStructuralSignature(item.items)})`;
+            }
+            return signature;
+        })
+            .join(',');
+    }
+    flattenMenuItems(items) {
+        return items.reduce((acc, item) => {
+            acc.push(item);
+            if (item.items) {
+                acc.push(...this.flattenMenuItems(item.items));
+            }
+            return acc;
+        }, []);
     }
     textReplace(item) {
         const text = item.el.textContent;
@@ -177,10 +198,44 @@ class AXOutlineSideMenuDirective {
         }
         return text?.trim() || '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXOutlineSideMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: AXOutlineSideMenuDirective, isStandalone: true, selector: "[axOutlineSideMenu]", providers: [AXUnsubscriber], exportAs: ["axOutlineSideMenu"], ngImport: i0 }); }
+    buildNestedMenuItems(items) {
+        const menuItemsMap = new Map();
+        const rootItems = [];
+        items.forEach((item) => {
+            const menuItem = {
+                items: [],
+                target: '_self',
+                active: item.active,
+                toggleOnClick: false,
+                text: this.textReplace(item),
+                href: `${this.router.url.split('#')[0]}#${item.id}`,
+            };
+            menuItemsMap.set(item.id, menuItem);
+        });
+        items.forEach((item) => {
+            const menuItem = menuItemsMap.get(item.id);
+            if (!menuItem)
+                return;
+            if (item.parentId) {
+                const parentMenuItem = menuItemsMap.get(item.parentId);
+                if (parentMenuItem) {
+                    parentMenuItem.items?.push(menuItem);
+                }
+                else {
+                    console.warn(`Outline item with id "${item.id}" has a parentId "${item.parentId}" that does not exist.`);
+                    rootItems.push(menuItem);
+                }
+            }
+            else {
+                rootItems.push(menuItem);
+            }
+        });
+        return rootItems;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXOutlineSideMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.8", type: AXOutlineSideMenuDirective, isStandalone: true, selector: "[axOutlineSideMenu]", providers: [AXUnsubscriber], exportAs: ["axOutlineSideMenu"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXOutlineSideMenuDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXOutlineSideMenuDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axOutlineSideMenu]',
@@ -201,8 +256,8 @@ const MODULES = [
     AXDecoratorModule,
 ];
 class AXSideMenuModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXSideMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: AXSideMenuModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXSideMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.8", ngImport: i0, type: AXSideMenuModule, imports: [CommonModule,
             AXCommonModule,
             AXRippleDirective,
             AXLoadingModule,
@@ -210,13 +265,13 @@ class AXSideMenuModule {
             RouterLink,
             RouterLinkActive,
             AXDecoratorModule, AXSideMenuComponent, AXSideMenuItemComponent, AXOutlineSideMenuDirective], exports: [AXSideMenuComponent, AXSideMenuItemComponent, AXOutlineSideMenuDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXSideMenuModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXSideMenuModule, imports: [CommonModule,
             AXCommonModule,
             AXLoadingModule,
             AXTranslationModule,
             AXDecoratorModule, AXSideMenuComponent, AXSideMenuItemComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXSideMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXSideMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],