@acorex/components 20.1.25 → 20.1.26

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

@@ -109,7 +109,7 @@ class AXSideMenuComponent extends NXComponent {
         return [`ax-look-${this.look()}`, `ax-location-${this.location()}`];
     }
     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-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", "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 }); }
+    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.8", ngImport: i0, type: AXSideMenuComponent, decorators: [{
             type: Component,
@@ -120,7 +120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", 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      [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-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']