@acorex/components 21.0.2-next.36 → 21.0.2-next.37

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

@@ -31,48 +31,48 @@ class AXSideMenuItemClickEvent extends AXClickEvent {
 class AXSideMenuItemComponent extends MXInteractiveComponent {
     constructor() {
         super(...arguments);
-        this.text = model('', ...(ngDevMode ? [{ debugName: "text" }] : []));
-        this.active = model(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
-        this.isLoading = model(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-        this.isCollapsed = model(true, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
+        this.text = model('', ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        this.active = model(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+        this.isLoading = model(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+        this.isCollapsed = model(true, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
         this.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" }] : []));
-        this.routerLinkActiveOptions = input({ exact: false }, ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : []));
-        this.target = input('_self', ...(ngDevMode ? [{ debugName: "target" }] : []));
+        this.toggleOnClick = input(true, ...(ngDevMode ? [{ debugName: "toggleOnClick" }] : /* istanbul ignore next */ []));
+        this.href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : /* istanbul ignore next */ []));
+        this.routerLink = input(...(ngDevMode ? [undefined, { debugName: "routerLink" }] : /* istanbul ignore next */ []));
+        this.routerLinkActive = input('ax-state-active', ...(ngDevMode ? [{ debugName: "routerLinkActive" }] : /* istanbul ignore next */ []));
+        this.routerLinkActiveOptions = input({ exact: false }, ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : /* istanbul ignore next */ []));
+        this.target = input('_self', ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
         this.menuItemTrigger = viewChild.required('menuItemTrigger');
-        this.hasChild = signal(false, ...(ngDevMode ? [{ debugName: "hasChild" }] : []));
-        this.isCompactMode = computed(() => this.menuMode() === 'compact', ...(ngDevMode ? [{ debugName: "isCompactMode" }] : []));
+        this.hasChild = signal(false, ...(ngDevMode ? [{ debugName: "hasChild" }] : /* istanbul ignore next */ []));
+        this.isCompactMode = computed(() => this.menuMode() === 'compact', ...(ngDevMode ? [{ debugName: "isCompactMode" }] : /* istanbul ignore next */ []));
         /** Top-level rail entry in compact mode (opens the flyout context menu). */
         this.isFirstLevel = computed(() => {
             if (!this.isCompactMode()) {
                 return false;
             }
             return !this.hostElement.parentElement?.closest('.ax-side-children-content');
-        }, ...(ngDevMode ? [{ debugName: "isFirstLevel" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "isFirstLevel" }] : /* istanbul ignore next */ []));
         /** Tooltip text for first-level items in compact mode only. */
         this.tooltipContent = computed(() => {
             if (!this.isFirstLevel())
                 return null;
             return this.text().trim() || this.contentLabel().trim() || null;
-        }, ...(ngDevMode ? [{ debugName: "tooltipContent" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "tooltipContent" }] : /* istanbul ignore next */ []));
         this.elem = inject((ElementRef));
         this.platformId = inject(PLATFORM_ID);
         this.destroyRef = inject(DestroyRef);
-        this.menuMode = signal('full', ...(ngDevMode ? [{ debugName: "menuMode" }] : []));
-        this.contentLabel = signal('', ...(ngDevMode ? [{ debugName: "contentLabel" }] : []));
+        this.menuMode = signal('full', ...(ngDevMode ? [{ debugName: "menuMode" }] : /* istanbul ignore next */ []));
+        this.contentLabel = signal('', ...(ngDevMode ? [{ debugName: "contentLabel" }] : /* istanbul ignore next */ []));
         this.childObserver = null;
         this.childRefreshScheduled = false;
-        this.childItems = contentChildren(AXSideMenuItemComponent, ...(ngDevMode ? [{ debugName: "childItems", descendants: true }] : [{ descendants: true }]));
-        this.childrenSlot = viewChild('childrenSlot', ...(ngDevMode ? [{ debugName: "childrenSlot" }] : []));
-        this.childrenContextMenu = viewChild('childrenContextMenu', ...(ngDevMode ? [{ debugName: "childrenContextMenu" }] : []));
+        this.childItems = contentChildren(AXSideMenuItemComponent, { ...(ngDevMode ? { debugName: "childItems" } : /* istanbul ignore next */ {}), descendants: true });
+        this.childrenSlot = viewChild('childrenSlot', ...(ngDevMode ? [{ debugName: "childrenSlot" }] : /* istanbul ignore next */ []));
+        this.childrenContextMenu = viewChild('childrenContextMenu', ...(ngDevMode ? [{ debugName: "childrenContextMenu" }] : /* istanbul ignore next */ []));
         this.#childCheckEffect = effect(() => {
             if (this.childItems().length) {
                 this.updateHasChild();
             }
-        }, ...(ngDevMode ? [{ debugName: "#childCheckEffect" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "#childCheckEffect" }] : /* istanbul ignore next */ []));
         this.#initChildren = afterNextRender(() => {
             if (!isPlatformBrowser(this.platformId)) {
                 return;
@@ -104,7 +104,7 @@ class AXSideMenuItemComponent extends MXInteractiveComponent {
                 this.closeSiblingCompactMenus();
                 this.openCompactContextMenu(menu);
             }
-        }, ...(ngDevMode ? [{ debugName: "#contextMenuSync" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "#contextMenuSync" }] : /* istanbul ignore next */ []));
     }
     get hostElement() {
         return this.elem.nativeElement;
@@ -365,10 +365,10 @@ class AXSideMenuItemComponent extends MXInteractiveComponent {
             this.contentLabel.set(label);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSideMenuItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.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 }, 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      [routerLinkActive]=\"routerLinkActive()\"\n      [routerLinkActiveOptions]=\"routerLinkActiveOptions()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </a>\n  } @else if (href()) {\n    <a\n      #menuItemTrigger\n      [axRipple]\n      [href]=\"href()\"\n      [target]=\"target()\"\n      class=\"ax-side-item\"\n      [class.ax-state-active]=\"active()\"\n      (click)=\"handleClickEvent($event)\"\n      [class.ax-state-disabled]=\"disabled\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </a>\n  } @else {\n    <div\n      #menuItemTrigger\n      [axRipple]\n      class=\"ax-side-item\"\n      [class.ax-state-active]=\"active()\"\n      (click)=\"handleClickEvent($event)\"\n      [class.ax-state-disabled]=\"disabled\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </div>\n  }\n\n  <div\n    class=\"ax-side-children\"\n    [class.ax-collapsed]=\"(!isCompactMode() && isCollapsed()) || (isCompactMode() && isFirstLevel())\"\n    [class.ax-empty]=\"!hasChild() && !isLoading()\"\n  >\n    @if (isLoading()) {\n      <p>{{ '@acorex:common.status.loading' | translate | async }}</p>\n    }\n    <div #childrenSlot class=\"ax-side-children-content\" [hidden]=\"isLoading()\">\n      <ng-content select=\"ax-side-menu-item, ng-container, [ngTemplateOutlet]\"></ng-content>\n    </div>\n  </div>\n\n  @if (isCompactMode() && hasChild()) {\n    <ax-context-menu\n      #childrenContextMenu\n      class=\"ax-side-menu-children-context-menu\"\n      [openOn]=\"'hover'\"\n      [closeOn]=\"'leave'\"\n      [closeOnRouteChange]=\"true\"\n      (onItemClick)=\"handleContextMenuItemClick($event)\"\n      (onClose)=\"handleContextMenuClosed()\"\n    />\n  }\n\n  <ng-content select=\"ax-divider\"></ng-content>\n  <ng-template #menuItemContent>\n    <div class=\"ax-start-side\">\n      <ng-content select=\"ax-prefix\"></ng-content>\n      <div class=\"ax-inside-text\">\n        @if (text()) {\n          <span>{{ text() }}</span>\n        }\n        <ng-content></ng-content>\n      </div>\n    </div>\n    <div class=\"ax-end-side\">\n      <ng-content select=\"ax-suffix\"></ng-content>\n      @if (hasChild() && !isLoading() && toggleOnClick() && !isFirstLevel()) {\n        <span class=\"ax-icon ax-icon-chevron-right arrow-icon\" [class.arrow-icon-expand]=\"!isCollapsed()\"> </span>\n      }\n      @if (isLoading()) {\n        <ax-loading></ax-loading>\n      }\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i1.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSideMenuItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXSideMenuItemComponent, isStandalone: true, selector: "ax-side-menu-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, toggleOnClick: { classPropertyName: "toggleOnClick", publicName: "toggleOnClick", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActive: { classPropertyName: "routerLinkActive", publicName: "routerLinkActive", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { text: "textChange", active: "activeChange", isLoading: "isLoadingChange", isCollapsed: "isCollapsedChange", onClick: "onClick" }, providers: [{ provide: AXComponent, useExisting: AXSideMenuItemComponent }], queries: [{ propertyName: "childItems", predicate: AXSideMenuItemComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "menuItemTrigger", first: true, predicate: ["menuItemTrigger"], descendants: true, isSignal: true }, { propertyName: "childrenSlot", first: true, predicate: ["childrenSlot"], descendants: true, isSignal: true }, { propertyName: "childrenContextMenu", first: true, predicate: ["childrenContextMenu"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [axTooltip]=\"tooltipContent()\" axTooltipPlacement=\"end\" class=\"ax-side-menu-wrapper\">\n  @if (!isCompactMode()) {\n    <ng-content select=\"ax-title\"></ng-content>\n  }\n  @if (routerLink()) {\n    <a\n      #menuItemTrigger\n      [axRipple]\n      [target]=\"target()\"\n      class=\"ax-side-item\"\n      [routerLink]=\"routerLink()\"\n      (click)=\"handleClickEvent($event)\"\n      [class.ax-state-disabled]=\"disabled\"\n      [routerLinkActive]=\"routerLinkActive()\"\n      [routerLinkActiveOptions]=\"routerLinkActiveOptions()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </a>\n  } @else if (href()) {\n    <a\n      #menuItemTrigger\n      [axRipple]\n      [href]=\"href()\"\n      [target]=\"target()\"\n      class=\"ax-side-item\"\n      [class.ax-state-active]=\"active()\"\n      (click)=\"handleClickEvent($event)\"\n      [class.ax-state-disabled]=\"disabled\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </a>\n  } @else {\n    <div\n      #menuItemTrigger\n      [axRipple]\n      class=\"ax-side-item\"\n      [class.ax-state-active]=\"active()\"\n      (click)=\"handleClickEvent($event)\"\n      [class.ax-state-disabled]=\"disabled\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </div>\n  }\n\n  <div\n    class=\"ax-side-children\"\n    [class.ax-collapsed]=\"(!isCompactMode() && isCollapsed()) || (isCompactMode() && isFirstLevel())\"\n    [class.ax-empty]=\"!hasChild() && !isLoading()\"\n  >\n    @if (isLoading()) {\n      <p>{{ '@acorex:common.status.loading' | translate | async }}</p>\n    }\n    <div #childrenSlot class=\"ax-side-children-content\" [hidden]=\"isLoading()\">\n      <ng-content select=\"ax-side-menu-item, ng-container, [ngTemplateOutlet]\"></ng-content>\n    </div>\n  </div>\n\n  @if (isCompactMode() && hasChild()) {\n    <ax-context-menu\n      #childrenContextMenu\n      class=\"ax-side-menu-children-context-menu\"\n      [openOn]=\"'hover'\"\n      [closeOn]=\"'leave'\"\n      [closeOnRouteChange]=\"true\"\n      (onItemClick)=\"handleContextMenuItemClick($event)\"\n      (onClose)=\"handleContextMenuClosed()\"\n    />\n  }\n\n  <ng-content select=\"ax-divider\"></ng-content>\n  <ng-template #menuItemContent>\n    <div class=\"ax-start-side\">\n      <ng-content select=\"ax-prefix\"></ng-content>\n      <div class=\"ax-inside-text\">\n        @if (text()) {\n          <span>{{ text() }}</span>\n        }\n        <ng-content></ng-content>\n      </div>\n    </div>\n    <div class=\"ax-end-side\">\n      <ng-content select=\"ax-suffix\"></ng-content>\n      @if (hasChild() && !isLoading() && toggleOnClick() && !isFirstLevel()) {\n        <span class=\"ax-icon ax-icon-chevron-right arrow-icon\" [class.arrow-icon-expand]=\"!isCollapsed()\"> </span>\n      }\n      @if (isLoading()) {\n        <ax-loading></ax-loading>\n      }\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i1.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSideMenuItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSideMenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-side-menu-item', inputs: ['disabled'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         AXRippleDirective,
@@ -381,7 +381,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", 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      [routerLinkActive]=\"routerLinkActive()\"\n      [routerLinkActiveOptions]=\"routerLinkActiveOptions()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </a>\n  } @else if (href()) {\n    <a\n      #menuItemTrigger\n      [axRipple]\n      [href]=\"href()\"\n      [target]=\"target()\"\n      class=\"ax-side-item\"\n      [class.ax-state-active]=\"active()\"\n      (click)=\"handleClickEvent($event)\"\n      [class.ax-state-disabled]=\"disabled\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </a>\n  } @else {\n    <div\n      #menuItemTrigger\n      [axRipple]\n      class=\"ax-side-item\"\n      [class.ax-state-active]=\"active()\"\n      (click)=\"handleClickEvent($event)\"\n      [class.ax-state-disabled]=\"disabled\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </div>\n  }\n\n  <div\n    class=\"ax-side-children\"\n    [class.ax-collapsed]=\"(!isCompactMode() && isCollapsed()) || (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 }] }] } });
 
 /**
  * @category
@@ -390,10 +390,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
 class AXSideMenuComponent extends NXComponent {
     constructor() {
         super(...arguments);
-        this.items = model(...(ngDevMode ? [undefined, { debugName: "items" }] : []));
-        this.look = input('pills', ...(ngDevMode ? [{ debugName: "look" }] : []));
-        this.location = input('start', ...(ngDevMode ? [{ debugName: "location" }] : []));
-        this.mode = input('full', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+        this.items = model(...(ngDevMode ? [undefined, { debugName: "items" }] : /* istanbul ignore next */ []));
+        this.look = input('pills', ...(ngDevMode ? [{ debugName: "look" }] : /* istanbul ignore next */ []));
+        this.location = input('start', ...(ngDevMode ? [{ debugName: "location" }] : /* istanbul ignore next */ []));
+        this.mode = input('full', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
         this.elementRef = inject(ElementRef);
         /**
          * All `ax-side-menu-item` instances discovered by walking the host DOM.
@@ -406,7 +406,7 @@ class AXSideMenuComponent extends NXComponent {
          * structural directives, and recursive `ngTemplateOutlet`-based templates
          * uniformly.
          */
-        this._items = signal([], ...(ngDevMode ? [{ debugName: "_items" }] : []));
+        this._items = signal([], ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
         /** Read-only signal exposing every discovered `ax-side-menu-item` instance. */
         this.children = this._items.asReadonly();
         this.platformId = inject(PLATFORM_ID);
@@ -431,7 +431,7 @@ class AXSideMenuComponent extends NXComponent {
         this.#syncItemMode = effect(() => {
             const mode = this.mode();
             this._items().forEach((item) => item.syncMenuMode(mode));
-        }, ...(ngDevMode ? [{ debugName: "#syncItemMode" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "#syncItemMode" }] : /* istanbul ignore next */ []));
     }
     #init;
     /** Push full/compact mode to every menu item whenever mode changes. */
@@ -510,13 +510,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: "20.3.3", ngImport: i0, type: AXSideMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXSideMenuComponent, isStandalone: true, selector: "ax-side-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, location: { classPropertyName: "location", publicName: "location", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSideMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXSideMenuComponent, isStandalone: true, selector: "ax-side-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, location: { classPropertyName: "location", publicName: "location", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
             { 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: [":root{--ax-comp-side-menu-indicator-size: 2px}ax-side-menu{display:flex;width:100%;flex-direction:column;gap:.5rem;color:inherit;font-size:.875rem;line-height:1.25rem;-webkit-user-select:none;user-select:none}ax-side-menu>ax-title{display:block;margin-block:.5rem;padding:.25rem .75rem;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:.5}ax-side-menu ax-side-menu-item ax-title{display:block;margin-block:.5rem;margin-top:.5rem;padding-inline:.75rem;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-divider{display:block;width:100%;height:1px;margin-block:.25rem;background-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-side-menu ax-side-menu-item .ax-side-item{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem 1rem;font-size:inherit;font-weight:500}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled .ax-ripple{opacity:0}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-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;transition-property:rotate;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}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-primary-surface))}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:rgba(var(--ax-sys-color-on-surface),.3)!important}ax-side-menu ax-side-menu-item .ax-side-children{display:grid;grid-template-rows:1fr;padding-inline-start:1.25rem;opacity:1;transition-property:grid-template-rows,opacity;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu ax-side-menu-item .ax-side-children.ax-collapsed{grid-template-rows:0fr;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:first-child{padding-top:.5rem}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child ax-title{margin-top:1rem}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item .ax-side-item{font-weight:400}ax-side-menu ax-side-menu-item .ax-side-children-content{display:flex;flex-direction:column;gap:.5rem}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item{border-radius:var(--ax-sys-border-radius)}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-surface));background-color:rgba(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-disabled){color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(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, 2px) / 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, 2px) / 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{position:absolute;height:100%;background-color:rgba(var(--ax-sys-color-border-lightest-surface));content:\"\";transition-property:width;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}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-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-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.ax-state-active: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-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-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.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-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled):before{position:absolute;width:var(--ax-comp-side-menu-indicator-size, 2px);height:100%;background-color:rgba(var(--ax-comp-side-menu-indicator-active-color, var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface))));content:\"\"}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-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-disabled){background-color:rgba(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:.5rem 1rem;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-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-disabled){background-color:rgba(var(--ax-sys-color-surface),.1)}ax-side-menu.ax-look-default .ax-side-children{position:relative;gap:.25rem;padding-inline-start:2.25rem}ax-side-menu.ax-look-default .ax-side-children:before{position:absolute;width:1px;height:100%;margin-inline-start:1.5rem;background-color:rgba(var(--ax-sys-color-border-light-surface));content:\"\"}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item .ax-side-item{padding:.25rem .5rem}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item:first-child{padding-top:0}ax-side-menu.ax-mode-compact{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}ax-side-menu.ax-mode-compact ::-webkit-scrollbar{width:4px;height:4px}ax-side-menu.ax-mode-compact ::-webkit-scrollbar-track{background:transparent}ax-side-menu.ax-mode-compact ::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}ax-side-menu.ax-mode-compact .ax-side-menu-wrapper{display:flex;flex-direction:column;align-items:center;width:fit-content}ax-side-menu.ax-mode-compact .ax-side-children{display:none}ax-side-menu.ax-mode-compact .ax-inside-text{display:none}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item:hover:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-surface));background-color:rgba(var(--ax-sys-color-darker-surface, var(--ax-sys-color-surface)))}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-active:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-side-menu.ax-mode-compact ax-side-menu-item{position:relative;padding:.125rem!important;display:flex;justify-content:center;width:100%}ax-side-menu.ax-mode-compact ax-side-menu-item ax-icon{font-size:1.4rem}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-item{width:fit-content;gap:0;padding:.5rem}ax-side-menu.ax-mode-compact ax-badge{position:absolute;top:5px;right:5px}[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon:before{scale:-1 1}[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}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXSideMenuItemComponent, selector: "ax-side-menu-item", inputs: ["disabled", "text", "active", "isLoading", "isCollapsed", "toggleOnClick", "href", "routerLink", "routerLinkActive", "routerLinkActiveOptions", "target"], outputs: ["textChange", "activeChange", "isLoadingChange", "isCollapsedChange", "onClick"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-side-menu-item,ax-title,ng-container,[ngTemplateOutlet]\"></ng-content>\n\n@for (node of items(); track node) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n<ng-template #Recursion let-item>\n  @if (item.title) {\n    <ax-title>{{ item.title }}</ax-title>\n  }\n  @if (item.routerLink) {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [target]=\"item.target\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [routerLink]=\"item.routerLink\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n      [routerLinkActive]=\"item.routerLinkActive\"\n      [routerLinkActiveOptions]=\"item.routerLinkActiveOptions\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  } @else if (item.href) {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [href]=\"item.href\"\n      [target]=\"item.target\"\n      [active]=\"item.active\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  } @else {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [active]=\"item.active\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  }\n\n  <ng-template #sideMenuItemContent>\n    <ax-prefix>\n      @if (item.icon) {\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      }\n    </ax-prefix>\n    @if (item.data) {\n      <ax-text>{{ item.data }}</ax-text>\n    }\n    @if (item.suffixText || item.suffix?.text) {\n      <ax-suffix>\n        <ax-text>{{ item.suffixText ?? item.suffix?.text }}</ax-text>\n      </ax-suffix>\n    }\n    @for (child of item.items; track child) {\n      <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    }\n  </ng-template>\n</ng-template>\n", styles: [":root{--ax-comp-side-menu-indicator-size:2px}ax-side-menu{width:100%;color:inherit;-webkit-user-select:none;user-select:none;flex-direction:column;gap:.5rem;font-size:.875rem;line-height:1.25rem;display:flex}ax-side-menu>ax-title{text-transform:uppercase;opacity:.5;margin-block:.5rem;padding:.25rem .75rem;font-size:.75rem;font-weight:500;line-height:1rem;display:block}ax-side-menu ax-side-menu-item ax-title{text-transform:uppercase;opacity:.5;margin-block:.5rem;padding-inline:.75rem;margin-top:.5rem;padding-bottom:.25rem;font-size:.75rem;font-weight:500;line-height:1rem;display:block}ax-side-menu ax-side-menu-item ax-divider{background-color:rgba(var(--ax-sys-color-border-lightest-surface));width:100%;height:1px;margin-block:.25rem;display:block}ax-side-menu ax-side-menu-item .ax-side-item{cursor:pointer;font-size:inherit;justify-content:space-between;align-items:center;gap:.75rem;padding:.5rem 1rem;font-weight:500;display:flex;position:relative}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled .ax-ripple{opacity:0}:is(ax-side-menu ax-side-menu-item .ax-side-item:hover,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active):not(:is(ax-side-menu ax-side-menu-item .ax-side-item:hover,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active).ax-state-disabled) ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-sys-color-on-primary-surface))}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side,ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{align-items:center;gap:.5rem;display:flex}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{transition-property:rotate;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);display:block}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{rotate:90deg}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-sys-color-on-primary-surface))}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:rgba(var(--ax-sys-color-on-surface),.3)!important}ax-side-menu ax-side-menu-item .ax-side-children{opacity:1;transition-property:grid-template-rows,opacity;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);grid-template-rows:1fr;padding-inline-start:1.25rem;display:grid}ax-side-menu ax-side-menu-item .ax-side-children.ax-collapsed{opacity:0;grid-template-rows:0fr}ax-side-menu ax-side-menu-item .ax-side-children.ax-empty{display:none}ax-side-menu ax-side-menu-item .ax-side-children .ax-side-children-content{overflow:hidden}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child{padding-top:.5rem}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child ax-title{margin-top:1rem}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item .ax-side-item{font-weight:400}ax-side-menu ax-side-menu-item .ax-side-children-content{flex-direction:column;gap:.5rem;display:flex}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item{border-radius:var(--ax-sys-border-radius)}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-surface));background-color:rgba(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-disabled){color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color{gap:0}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-ripple{display:none}:is(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color).ax-location-start .ax-side-children,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color).ax-location-start .ax-side-item):before{width:calc(var(--ax-comp-side-menu-indicator-size,2px) / 2);inset-inline-start:0}:is(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color).ax-location-end .ax-side-children,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color).ax-location-end .ax-side-item):before{width:calc(var(--ax-comp-side-menu-indicator-size,2px) / 2);inset-inline-end:0}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) ax-side-menu-item,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-children,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item{position:relative}:is(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) ax-side-menu-item,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-children,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item):before{background-color:rgba(var(--ax-sys-color-border-lightest-surface));content:\"\";height:100%;transition-property:width;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);position:absolute}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item:hover:not(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item.ax-state-disabled),:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item.ax-state-active:not(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-primary-surface))}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item.ax-state-active:not(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item.ax-state-disabled):before{width:var(--ax-comp-side-menu-indicator-size,2px);background-color:rgba(var(--ax-comp-side-menu-indicator-active-color,var(--ax-comp-side-menu-bg-color,var(--ax-sys-color-primary-surface))));content:\"\";height:100%;position:absolute}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-children{gap:0}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-children ax-side-menu-item:first-child{padding-top:0}ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface),.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-disabled){background-color:rgba(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{border-radius:var(--ax-sys-border-radius);padding:.5rem 1rem}ax-side-menu.ax-look-default .ax-side-item:hover:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-surface),.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-disabled){background-color:rgba(var(--ax-sys-color-surface),.1)}ax-side-menu.ax-look-default .ax-side-children{gap:.25rem;padding-inline-start:2.25rem;position:relative}ax-side-menu.ax-look-default .ax-side-children:before{background-color:rgba(var(--ax-sys-color-border-light-surface));content:\"\";width:1px;height:100%;margin-inline-start:1.5rem;position:absolute}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item .ax-side-item{padding:.25rem .5rem}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item:first-child{padding-top:0}ax-side-menu.ax-mode-compact{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}ax-side-menu.ax-mode-compact ::-webkit-scrollbar{width:4px;height:4px}ax-side-menu.ax-mode-compact ::-webkit-scrollbar-track{background:0 0}ax-side-menu.ax-mode-compact ::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}ax-side-menu.ax-mode-compact .ax-side-menu-wrapper{flex-direction:column;align-items:center;width:fit-content;display:flex}ax-side-menu.ax-mode-compact .ax-side-children,ax-side-menu.ax-mode-compact .ax-inside-text{display:none}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item:hover:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-surface));background-color:rgba(var(--ax-sys-color-darker-surface,var(--ax-sys-color-surface)))}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-active:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-side-menu.ax-mode-compact ax-side-menu-item{justify-content:center;width:100%;display:flex;position:relative;padding:.125rem!important}ax-side-menu.ax-mode-compact ax-side-menu-item ax-icon{font-size:1.4rem}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-item{gap:0;width:fit-content;padding:.5rem}ax-side-menu.ax-mode-compact ax-badge{position:absolute;top:5px;right:5px}[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon:before{scale:-1 1}[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}\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.3.3", ngImport: i0, type: AXSideMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSideMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-side-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         NgTemplateOutlet,
@@ -528,8 +528,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                     ], providers: [
                         { provide: AXComponent, useExisting: AXSideMenuComponent },
                         { provide: AXSideMenuBase, useExisting: AXSideMenuComponent },
-                    ], template: "<ng-content select=\"ax-side-menu-item,ax-title,ng-container,[ngTemplateOutlet]\"></ng-content>\n\n@for (node of items(); track node) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n<ng-template #Recursion let-item>\n  @if (item.title) {\n    <ax-title>{{ item.title }}</ax-title>\n  }\n  @if (item.routerLink) {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [target]=\"item.target\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [routerLink]=\"item.routerLink\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n      [routerLinkActive]=\"item.routerLinkActive\"\n      [routerLinkActiveOptions]=\"item.routerLinkActiveOptions\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  } @else if (item.href) {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [href]=\"item.href\"\n      [target]=\"item.target\"\n      [active]=\"item.active\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  } @else {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [active]=\"item.active\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  }\n\n  <ng-template #sideMenuItemContent>\n    <ax-prefix>\n      @if (item.icon) {\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      }\n    </ax-prefix>\n    @if (item.data) {\n      <ax-text>{{ item.data }}</ax-text>\n    }\n    @if (item.suffixText || 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: [":root{--ax-comp-side-menu-indicator-size: 2px}ax-side-menu{display:flex;width:100%;flex-direction:column;gap:.5rem;color:inherit;font-size:.875rem;line-height:1.25rem;-webkit-user-select:none;user-select:none}ax-side-menu>ax-title{display:block;margin-block:.5rem;padding:.25rem .75rem;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:.5}ax-side-menu ax-side-menu-item ax-title{display:block;margin-block:.5rem;margin-top:.5rem;padding-inline:.75rem;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-divider{display:block;width:100%;height:1px;margin-block:.25rem;background-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-side-menu ax-side-menu-item .ax-side-item{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem 1rem;font-size:inherit;font-weight:500}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled .ax-ripple{opacity:0}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-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;transition-property:rotate;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}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-primary-surface))}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:rgba(var(--ax-sys-color-on-surface),.3)!important}ax-side-menu ax-side-menu-item .ax-side-children{display:grid;grid-template-rows:1fr;padding-inline-start:1.25rem;opacity:1;transition-property:grid-template-rows,opacity;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu ax-side-menu-item .ax-side-children.ax-collapsed{grid-template-rows:0fr;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:first-child{padding-top:.5rem}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child ax-title{margin-top:1rem}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item .ax-side-item{font-weight:400}ax-side-menu ax-side-menu-item .ax-side-children-content{display:flex;flex-direction:column;gap:.5rem}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item{border-radius:var(--ax-sys-border-radius)}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-surface));background-color:rgba(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-disabled){color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(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, 2px) / 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, 2px) / 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{position:absolute;height:100%;background-color:rgba(var(--ax-sys-color-border-lightest-surface));content:\"\";transition-property:width;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}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-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-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.ax-state-active: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-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-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.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-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled):before{position:absolute;width:var(--ax-comp-side-menu-indicator-size, 2px);height:100%;background-color:rgba(var(--ax-comp-side-menu-indicator-active-color, var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface))));content:\"\"}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-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-disabled){background-color:rgba(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:.5rem 1rem;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-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-disabled){background-color:rgba(var(--ax-sys-color-surface),.1)}ax-side-menu.ax-look-default .ax-side-children{position:relative;gap:.25rem;padding-inline-start:2.25rem}ax-side-menu.ax-look-default .ax-side-children:before{position:absolute;width:1px;height:100%;margin-inline-start:1.5rem;background-color:rgba(var(--ax-sys-color-border-light-surface));content:\"\"}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item .ax-side-item{padding:.25rem .5rem}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item:first-child{padding-top:0}ax-side-menu.ax-mode-compact{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}ax-side-menu.ax-mode-compact ::-webkit-scrollbar{width:4px;height:4px}ax-side-menu.ax-mode-compact ::-webkit-scrollbar-track{background:transparent}ax-side-menu.ax-mode-compact ::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}ax-side-menu.ax-mode-compact .ax-side-menu-wrapper{display:flex;flex-direction:column;align-items:center;width:fit-content}ax-side-menu.ax-mode-compact .ax-side-children{display:none}ax-side-menu.ax-mode-compact .ax-inside-text{display:none}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item:hover:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-surface));background-color:rgba(var(--ax-sys-color-darker-surface, var(--ax-sys-color-surface)))}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-active:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-side-menu.ax-mode-compact ax-side-menu-item{position:relative;padding:.125rem!important;display:flex;justify-content:center;width:100%}ax-side-menu.ax-mode-compact ax-side-menu-item ax-icon{font-size:1.4rem}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-item{width:fit-content;gap:0;padding:.5rem}ax-side-menu.ax-mode-compact ax-badge{position:absolute;top:5px;right:5px}[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon:before{scale:-1 1}[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}\n"] }]
-        }], propDecorators: { __hostClass: [{
+                    ], 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: [":root{--ax-comp-side-menu-indicator-size:2px}ax-side-menu{width:100%;color:inherit;-webkit-user-select:none;user-select:none;flex-direction:column;gap:.5rem;font-size:.875rem;line-height:1.25rem;display:flex}ax-side-menu>ax-title{text-transform:uppercase;opacity:.5;margin-block:.5rem;padding:.25rem .75rem;font-size:.75rem;font-weight:500;line-height:1rem;display:block}ax-side-menu ax-side-menu-item ax-title{text-transform:uppercase;opacity:.5;margin-block:.5rem;padding-inline:.75rem;margin-top:.5rem;padding-bottom:.25rem;font-size:.75rem;font-weight:500;line-height:1rem;display:block}ax-side-menu ax-side-menu-item ax-divider{background-color:rgba(var(--ax-sys-color-border-lightest-surface));width:100%;height:1px;margin-block:.25rem;display:block}ax-side-menu ax-side-menu-item .ax-side-item{cursor:pointer;font-size:inherit;justify-content:space-between;align-items:center;gap:.75rem;padding:.5rem 1rem;font-weight:500;display:flex;position:relative}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled .ax-ripple{opacity:0}:is(ax-side-menu ax-side-menu-item .ax-side-item:hover,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active):not(:is(ax-side-menu ax-side-menu-item .ax-side-item:hover,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active).ax-state-disabled) ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-sys-color-on-primary-surface))}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side,ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{align-items:center;gap:.5rem;display:flex}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{transition-property:rotate;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);display:block}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{rotate:90deg}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-sys-color-on-primary-surface))}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:rgba(var(--ax-sys-color-on-surface),.3)!important}ax-side-menu ax-side-menu-item .ax-side-children{opacity:1;transition-property:grid-template-rows,opacity;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);grid-template-rows:1fr;padding-inline-start:1.25rem;display:grid}ax-side-menu ax-side-menu-item .ax-side-children.ax-collapsed{opacity:0;grid-template-rows:0fr}ax-side-menu ax-side-menu-item .ax-side-children.ax-empty{display:none}ax-side-menu ax-side-menu-item .ax-side-children .ax-side-children-content{overflow:hidden}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child{padding-top:.5rem}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child ax-title{margin-top:1rem}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item .ax-side-item{font-weight:400}ax-side-menu ax-side-menu-item .ax-side-children-content{flex-direction:column;gap:.5rem;display:flex}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item{border-radius:var(--ax-sys-border-radius)}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-surface));background-color:rgba(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-disabled){color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color{gap:0}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-ripple{display:none}:is(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color).ax-location-start .ax-side-children,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color).ax-location-start .ax-side-item):before{width:calc(var(--ax-comp-side-menu-indicator-size,2px) / 2);inset-inline-start:0}:is(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color).ax-location-end .ax-side-children,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color).ax-location-end .ax-side-item):before{width:calc(var(--ax-comp-side-menu-indicator-size,2px) / 2);inset-inline-end:0}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) ax-side-menu-item,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-children,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item{position:relative}:is(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) ax-side-menu-item,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-children,:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item):before{background-color:rgba(var(--ax-sys-color-border-lightest-surface));content:\"\";height:100%;transition-property:width;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);position:absolute}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item:hover:not(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item.ax-state-disabled),:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item.ax-state-active:not(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-primary-surface))}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item.ax-state-active:not(:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item.ax-state-disabled):before{width:var(--ax-comp-side-menu-indicator-size,2px);background-color:rgba(var(--ax-comp-side-menu-indicator-active-color,var(--ax-comp-side-menu-bg-color,var(--ax-sys-color-primary-surface))));content:\"\";height:100%;position:absolute}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-children{gap:0}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-children ax-side-menu-item:first-child{padding-top:0}ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface),.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-disabled){background-color:rgba(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{border-radius:var(--ax-sys-border-radius);padding:.5rem 1rem}ax-side-menu.ax-look-default .ax-side-item:hover:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-surface),.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-disabled){background-color:rgba(var(--ax-sys-color-surface),.1)}ax-side-menu.ax-look-default .ax-side-children{gap:.25rem;padding-inline-start:2.25rem;position:relative}ax-side-menu.ax-look-default .ax-side-children:before{background-color:rgba(var(--ax-sys-color-border-light-surface));content:\"\";width:1px;height:100%;margin-inline-start:1.5rem;position:absolute}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item .ax-side-item{padding:.25rem .5rem}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item:first-child{padding-top:0}ax-side-menu.ax-mode-compact{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}ax-side-menu.ax-mode-compact ::-webkit-scrollbar{width:4px;height:4px}ax-side-menu.ax-mode-compact ::-webkit-scrollbar-track{background:0 0}ax-side-menu.ax-mode-compact ::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}ax-side-menu.ax-mode-compact .ax-side-menu-wrapper{flex-direction:column;align-items:center;width:fit-content;display:flex}ax-side-menu.ax-mode-compact .ax-side-children,ax-side-menu.ax-mode-compact .ax-inside-text{display:none}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item:hover:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-surface));background-color:rgba(var(--ax-sys-color-darker-surface,var(--ax-sys-color-surface)))}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-active:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-side-menu.ax-mode-compact ax-side-menu-item{justify-content:center;width:100%;display:flex;position:relative;padding:.125rem!important}ax-side-menu.ax-mode-compact ax-side-menu-item ax-icon{font-size:1.4rem}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-item{gap:0;width:fit-content;padding:.5rem}ax-side-menu.ax-mode-compact ax-badge{position:absolute;top:5px;right:5px}[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon:before{scale:-1 1}[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}\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']
             }] } });
@@ -640,10 +640,10 @@ class AXOutlineSideMenuDirective {
         });
         return rootItems;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXOutlineSideMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: AXOutlineSideMenuDirective, isStandalone: true, selector: "[axOutlineSideMenu]", providers: [AXUnsubscriber], exportAs: ["axOutlineSideMenu"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXOutlineSideMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: AXOutlineSideMenuDirective, isStandalone: true, selector: "[axOutlineSideMenu]", providers: [AXUnsubscriber], exportAs: ["axOutlineSideMenu"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXOutlineSideMenuDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXOutlineSideMenuDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axOutlineSideMenu]',
@@ -664,8 +664,8 @@ const MODULES = [
     AXDecoratorModule,
 ];
 class AXSideMenuModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSideMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AXSideMenuModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSideMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: AXSideMenuModule, imports: [CommonModule,
             AXCommonModule,
             AXRippleDirective,
             AXLoadingModule,
@@ -673,13 +673,13 @@ class AXSideMenuModule {
             RouterLink,
             RouterLinkActive,
             AXDecoratorModule, AXSideMenuComponent, AXSideMenuItemComponent, AXOutlineSideMenuDirective], exports: [AXSideMenuComponent, AXSideMenuItemComponent, AXOutlineSideMenuDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSideMenuModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSideMenuModule, imports: [CommonModule,
             AXCommonModule,
             AXLoadingModule,
             AXTranslationModule,
             AXDecoratorModule, AXSideMenuComponent, AXSideMenuItemComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSideMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSideMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],