npm - @acorex/components - Versions diffs - 21.0.3-next.37 → 21.0.3-next.39 - Mend

@acorex/components 21.0.3-next.37 → 21.0.3-next.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (189) hide show

package/fesm2022/acorex-components-selection-list.mjs CHANGED Viewed

@@ -136,7 +136,7 @@ class AXSelectionListComponent extends MXSelectionValueComponent {
                 provide: AX_SELECTION_DATA_TOKEN,
                 useClass: MXSelectionBridgeService,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<ul class=\"ax-{{ direction() }}\">\n  @for (item of items; let i = $index; track i) {\n    <li [class.ax-state-selected]=\"isItemSelected(item)\" [class.ax-state-disabled]=\"item.disabled\">\n      <label [class.ax-hide-control]=\"!showControl\">\n        @if (multiple) {\n          <input\n            [id]=\"id + '-' + i\"\n            class=\"ax-checkbox\"\n            type=\"checkbox\"\n            (change)=\"_handleOnItemValueChange(item, $event)\"\n            [checked]=\"isItemSelected(item)\"\n            [disabled]=\"disabled || item[disabledField] || readonly\"\n          />\n        } @else {\n          <input\n            [id]=\"id + '-' + i\"\n            class=\"ax-radio\"\n            type=\"radio\"\n            [attr.name]=\"id\"\n            (change)=\"_handleOnItemValueChange(item, $event)\"\n            [checked]=\"isItemSelected(item)\"\n            [disabled]=\"disabled || item[disabledField] || readonly\"\n          />\n        }\n\n        @if (customTemplate()) {\n          <div>\n            <ng-container\n              [ngTemplateOutlet]=\"customTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\"\n            >\n            </ng-container>\n          </div>\n        } @else {\n          <div>\n            {{ getDisplayText(item) | translate | async }}\n            @if (item[hintField]) {\n              <p class=\"ax-hint-text\">\n                {{ item[hintField] | translate | async }}\n              </p>\n            }\n          </div>\n        }\n      </label>\n    </li>\n  }\n</ul>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-leading:initial}}}@layer components{ax-selection-list ul li label>div{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:rgba(var(--ax-sys-color-on-lightest-surface));margin-inline-start:calc(var(--spacing,.25rem) * 3)}ax-selection-list ul li label>div .ax-hint-text{margin-top:var(--spacing,.25rem);--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);color:rgba(var(--ax-sys-color-on-lightest-surface))}:is(ax-selection-list.ax-look-divided ul.ax-vertical,ax-selection-list.ax-look-divided ul.ax-horizontal) li:last-child label{--tw-border-style:none;border-style:none}ax-selection-list.ax-look-divided ul.ax-vertical>li label{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-bottom:calc(var(--spacing,.25rem) * 3)}ax-selection-list.ax-look-divided ul.ax-horizontal>li label{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-selection-list.ax-look-card ul{gap:calc(var(--spacing,.25rem) * 3)}:is(ax-selection-list.ax-look-card ul.ax-vertical,ax-selection-list.ax-look-card ul.ax-horizontal)>li label{border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-selection-list.ax-look-card ul.ax-vertical,ax-selection-list.ax-look-card ul.ax-horizontal)>li.ax-state-selected label{border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}:is(ax-selection-list.ax-look-card ul.ax-vertical,ax-selection-list.ax-look-card ul.ax-horizontal)>li.ax-state-selected label:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color:color-mix(in lab,red,red)){:is(ax-selection-list.ax-look-card ul.ax-vertical,ax-selection-list.ax-look-card ul.ax-horizontal)>li.ax-state-selected label:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 25%,transparent)}}ax-selection-list.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-selection-list ul{flex-wrap:wrap;display:flex}ax-selection-list ul.ax-vertical{flex-direction:column}ax-selection-list ul.ax-horizontal{flex-direction:row}ax-selection-list ul li{cursor:pointer;-webkit-user-select:none;user-select:none}ax-selection-list ul li label{cursor:pointer;padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2);align-items:flex-start;display:flex}ax-selection-list ul li label.ax-hide-control .ax-checkbox,ax-selection-list ul li label.ax-hide-control .ax-radio{display:none}ax-selection-list ul li label.ax-hide-control>div{margin-inline-start:0}ax-selection-list ul li label .ax-checkbox,ax-selection-list ul li label .ax-radio{margin-top:var(--spacing,.25rem)}ax-selection-list ul li label>div{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:1;--tw-font-weight:var(--font-weight-medium,500);line-height:1;font-weight:var(--font-weight-medium,500);color:rgba(var(--ax-sys-color-on-lightest-surface));margin-inline-start:calc(var(--spacing,.25rem) * 3)}ax-selection-list ul li label>div .ax-hint-text{margin-top:var(--spacing,.25rem);--tw-leading:1;--tw-font-weight:var(--font-weight-normal,400);line-height:1;font-weight:var(--font-weight-normal,400);color:rgba(var(--ax-sys-color-on-lightest-surface))}@supports (color:color-mix(in lab,red,red)){ax-selection-list ul li label>div .ax-hint-text{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-lightest-surface)) 75%,transparent)}}ax-selection-list ul li.ax-state-disabled{opacity:.5}ax-selection-list ul li.ax-state-disabled *{cursor:not-allowed}ax-selection-list.ax-state-error{color:rgba(var(--ax-sys-color-danger-surface))}ax-selection-list.ax-state-error .ax-checkbox-checkmark,ax-selection-list.ax-state-error .ax-radio-checkmark{border-color:rgba(var(--ax-sys-color-danger-surface))}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-leading{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<ul class=\"ax-{{ direction() }}\">\n  @for (item of items; let i = $index; track i) {\n    <li [class.ax-state-selected]=\"isItemSelected(item)\" [class.ax-state-disabled]=\"item.disabled\">\n      <label [class.ax-hide-control]=\"!showControl\">\n        @if (multiple) {\n          <input\n            [id]=\"id + '-' + i\"\n            class=\"ax-checkbox\"\n            type=\"checkbox\"\n            (change)=\"_handleOnItemValueChange(item, $event)\"\n            [checked]=\"isItemSelected(item)\"\n            [disabled]=\"disabled || item[disabledField] || readonly\"\n          />\n        } @else {\n          <input\n            [id]=\"id + '-' + i\"\n            class=\"ax-radio\"\n            type=\"radio\"\n            [attr.name]=\"id\"\n            (change)=\"_handleOnItemValueChange(item, $event)\"\n            [checked]=\"isItemSelected(item)\"\n            [disabled]=\"disabled || item[disabledField] || readonly\"\n          />\n        }\n\n        @if (customTemplate()) {\n          <div>\n            <ng-container\n              [ngTemplateOutlet]=\"customTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\"\n            >\n            </ng-container>\n          </div>\n        } @else {\n          <div>\n            {{ getDisplayText(item) | translate | async }}\n            @if (item[hintField]) {\n              <p class=\"ax-hint-text\">\n                {{ item[hintField] | translate | async }}\n              </p>\n            }\n          </div>\n        }\n      </label>\n    </li>\n  }\n</ul>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: ["@layer properties;@layer components{:is(ax-selection-list.ax-look-divided ul.ax-vertical,ax-selection-list.ax-look-divided ul.ax-horizontal) li:last-child label{--tw-border-style: none;border-style:none}ax-selection-list.ax-look-divided ul.ax-vertical>li label{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-bottom:calc(var(--spacing, .25rem) * 3)}ax-selection-list.ax-look-divided ul.ax-horizontal>li label{border-inline-end-style:var(--tw-border-style);border-inline-end-width:2px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-selection-list.ax-look-card ul{gap:calc(var(--spacing, .25rem) * 3)}:is(ax-selection-list.ax-look-card ul.ax-vertical,ax-selection-list.ax-look-card ul.ax-horizontal)>li label{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-selection-list.ax-look-card ul.ax-vertical,ax-selection-list.ax-look-card ul.ax-horizontal)>li.ax-state-selected label{border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}:is(ax-selection-list.ax-look-card ul.ax-vertical,ax-selection-list.ax-look-card ul.ax-horizontal)>li.ax-state-selected label:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(ax-selection-list.ax-look-card ul.ax-vertical,ax-selection-list.ax-look-card ul.ax-horizontal)>li.ax-state-selected label:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 25%,transparent)}}ax-selection-list.ax-state-disabled{cursor:not-allowed;opacity:50%}ax-selection-list ul{display:flex;flex-wrap:wrap}ax-selection-list ul.ax-vertical{flex-direction:column}ax-selection-list ul.ax-horizontal{flex-direction:row}ax-selection-list ul li{cursor:pointer;-webkit-user-select:none;user-select:none}ax-selection-list ul li label{display:flex;cursor:pointer;align-items:flex-start;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}ax-selection-list ul li label.ax-hide-control .ax-checkbox,ax-selection-list ul li label.ax-hide-control .ax-radio{display:none}ax-selection-list ul li label.ax-hide-control>div{margin-inline-start:calc(var(--spacing, .25rem) * 0)}ax-selection-list ul li label .ax-checkbox,ax-selection-list ul li label .ax-radio{margin-top:calc(var(--spacing, .25rem) * 1)}ax-selection-list ul li label>div{margin-inline-start:calc(var(--spacing, .25rem) * 3);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-lightest-surface))}ax-selection-list ul li label>div .ax-hint-text{margin-top:calc(var(--spacing, .25rem) * 1);--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);color:rgba(var(--ax-sys-color-on-lightest-surface))}@supports (color: color-mix(in lab,red,red)){ax-selection-list ul li label>div .ax-hint-text{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-lightest-surface)) 75%,transparent)}}ax-selection-list ul li.ax-state-disabled{opacity:50%}ax-selection-list ul li.ax-state-disabled *{cursor:not-allowed}ax-selection-list.ax-state-error{color:rgba(var(--ax-sys-color-danger-surface))}ax-selection-list.ax-state-error .ax-checkbox-checkmark,ax-selection-list.ax-state-error .ax-radio-checkmark{border-color:rgba(var(--ax-sys-color-danger-surface))}:is(ax-selection-list.ax-look-divided ul.ax-vertical,ax-selection-list.ax-look-divided ul.ax-horizontal) li:last-child label{--tw-border-style: none;border-style:none}ax-selection-list.ax-look-divided ul.ax-vertical>li label{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-bottom:calc(var(--spacing, .25rem) * 3)}ax-selection-list.ax-look-divided ul.ax-horizontal>li label{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-selection-list.ax-look-card ul{gap:calc(var(--spacing, .25rem) * 3)}:is(ax-selection-list.ax-look-card ul.ax-vertical,ax-selection-list.ax-look-card ul.ax-horizontal)>li label{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-selection-list.ax-look-card ul.ax-vertical,ax-selection-list.ax-look-card ul.ax-horizontal)>li.ax-state-selected label{border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}:is(ax-selection-list.ax-look-card ul.ax-vertical,ax-selection-list.ax-look-card ul.ax-horizontal)>li.ax-state-selected label:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(ax-selection-list.ax-look-card ul.ax-vertical,ax-selection-list.ax-look-card ul.ax-horizontal)>li.ax-state-selected label:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 25%,transparent)}}ax-selection-list.ax-state-disabled{cursor:not-allowed;opacity:50%}ax-selection-list ul{display:flex;flex-wrap:wrap}ax-selection-list ul.ax-vertical{flex-direction:column}ax-selection-list ul.ax-horizontal{flex-direction:row}ax-selection-list ul li{cursor:pointer;-webkit-user-select:none;user-select:none}ax-selection-list ul li label{display:flex;cursor:pointer;align-items:flex-start;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}ax-selection-list ul li label.ax-hide-control .ax-checkbox,ax-selection-list ul li label.ax-hide-control .ax-radio{display:none}ax-selection-list ul li label.ax-hide-control>div{margin-inline-start:calc(var(--spacing, .25rem) * 0)}ax-selection-list ul li label .ax-checkbox,ax-selection-list ul li label .ax-radio{margin-top:calc(var(--spacing, .25rem) * 1)}ax-selection-list ul li label>div{margin-inline-start:calc(var(--spacing, .25rem) * 3);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-lightest-surface))}ax-selection-list ul li label>div .ax-hint-text{margin-top:calc(var(--spacing, .25rem) * 1);--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);color:rgba(var(--ax-sys-color-on-lightest-surface))}@supports (color: color-mix(in lab,red,red)){ax-selection-list ul li label>div .ax-hint-text{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-lightest-surface)) 75%,transparent)}}ax-selection-list ul li.ax-state-disabled{opacity:50%}ax-selection-list ul li.ax-state-disabled *{cursor:not-allowed}ax-selection-list.ax-state-error{color:rgba(var(--ax-sys-color-danger-surface))}ax-selection-list.ax-state-error .ax-checkbox-checkmark,ax-selection-list.ax-state-error .ax-radio-checkmark{border-color:rgba(var(--ax-sys-color-danger-surface))}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSelectionListComponent, decorators: [{
             type: Component,
@@ -166,7 +166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             provide: AX_SELECTION_DATA_TOKEN,
                             useClass: MXSelectionBridgeService,
                         },
-                    ], imports: [NgTemplateOutlet, AsyncPipe, AXTranslationModule], template: "<ul class=\"ax-{{ direction() }}\">\n  @for (item of items; let i = $index; track i) {\n    <li [class.ax-state-selected]=\"isItemSelected(item)\" [class.ax-state-disabled]=\"item.disabled\">\n      <label [class.ax-hide-control]=\"!showControl\">\n        @if (multiple) {\n          <input\n            [id]=\"id + '-' + i\"\n            class=\"ax-checkbox\"\n            type=\"checkbox\"\n            (change)=\"_handleOnItemValueChange(item, $event)\"\n            [checked]=\"isItemSelected(item)\"\n            [disabled]=\"disabled || item[disabledField] || readonly\"\n          />\n        } @else {\n          <input\n            [id]=\"id + '-' + i\"\n            class=\"ax-radio\"\n            type=\"radio\"\n            [attr.name]=\"id\"\n            (change)=\"_handleOnItemValueChange(item, $event)\"\n            [checked]=\"isItemSelected(item)\"\n            [disabled]=\"disabled || item[disabledField] || readonly\"\n          />\n        }\n\n        @if (customTemplate()) {\n          <div>\n            <ng-container\n              [ngTemplateOutlet]=\"customTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\"\n            >\n            </ng-container>\n          </div>\n        } @else {\n          <div>\n            {{ getDisplayText(item) | translate | async }}\n            @if (item[hintField]) {\n              <p class=\"ax-hint-text\">\n                {{ item[hintField] | translate | async }}\n              </p>\n            }\n          </div>\n        }\n      </label>\n    </li>\n  }\n</ul>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-leading:initial}}}@layer components{ax-selection-list ul li label>div{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:rgba(var(--ax-sys-color-on-lightest-surface));margin-inline-start:calc(var(--spacing,.25rem) * 3)}ax-selection-list ul li label>div .ax-hint-text{margin-top:var(--spacing,.25rem);--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);color:rgba(var(--ax-sys-color-on-lightest-surface))}:is(ax-selection-list.ax-look-divided ul.ax-vertical,ax-selection-list.ax-look-divided ul.ax-horizontal) li:last-child label{--tw-border-style:none;border-style:none}ax-selection-list.ax-look-divided ul.ax-vertical>li label{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-bottom:calc(var(--spacing,.25rem) * 3)}ax-selection-list.ax-look-divided ul.ax-horizontal>li label{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-selection-list.ax-look-card ul{gap:calc(var(--spacing,.25rem) * 3)}:is(ax-selection-list.ax-look-card ul.ax-vertical,ax-selection-list.ax-look-card ul.ax-horizontal)>li label{border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-selection-list.ax-look-card ul.ax-vertical,ax-selection-list.ax-look-card ul.ax-horizontal)>li.ax-state-selected label{border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}:is(ax-selection-list.ax-look-card ul.ax-vertical,ax-selection-list.ax-look-card ul.ax-horizontal)>li.ax-state-selected label:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color:color-mix(in lab,red,red)){:is(ax-selection-list.ax-look-card ul.ax-vertical,ax-selection-list.ax-look-card ul.ax-horizontal)>li.ax-state-selected label:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 25%,transparent)}}ax-selection-list.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-selection-list ul{flex-wrap:wrap;display:flex}ax-selection-list ul.ax-vertical{flex-direction:column}ax-selection-list ul.ax-horizontal{flex-direction:row}ax-selection-list ul li{cursor:pointer;-webkit-user-select:none;user-select:none}ax-selection-list ul li label{cursor:pointer;padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2);align-items:flex-start;display:flex}ax-selection-list ul li label.ax-hide-control .ax-checkbox,ax-selection-list ul li label.ax-hide-control .ax-radio{display:none}ax-selection-list ul li label.ax-hide-control>div{margin-inline-start:0}ax-selection-list ul li label .ax-checkbox,ax-selection-list ul li label .ax-radio{margin-top:var(--spacing,.25rem)}ax-selection-list ul li label>div{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:1;--tw-font-weight:var(--font-weight-medium,500);line-height:1;font-weight:var(--font-weight-medium,500);color:rgba(var(--ax-sys-color-on-lightest-surface));margin-inline-start:calc(var(--spacing,.25rem) * 3)}ax-selection-list ul li label>div .ax-hint-text{margin-top:var(--spacing,.25rem);--tw-leading:1;--tw-font-weight:var(--font-weight-normal,400);line-height:1;font-weight:var(--font-weight-normal,400);color:rgba(var(--ax-sys-color-on-lightest-surface))}@supports (color:color-mix(in lab,red,red)){ax-selection-list ul li label>div .ax-hint-text{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-lightest-surface)) 75%,transparent)}}ax-selection-list ul li.ax-state-disabled{opacity:.5}ax-selection-list ul li.ax-state-disabled *{cursor:not-allowed}ax-selection-list.ax-state-error{color:rgba(var(--ax-sys-color-danger-surface))}ax-selection-list.ax-state-error .ax-checkbox-checkmark,ax-selection-list.ax-state-error .ax-radio-checkmark{border-color:rgba(var(--ax-sys-color-danger-surface))}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-leading{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], imports: [NgTemplateOutlet, AsyncPipe, AXTranslationModule], template: "<ul class=\"ax-{{ direction() }}\">\n  @for (item of items; let i = $index; track i) {\n    <li [class.ax-state-selected]=\"isItemSelected(item)\" [class.ax-state-disabled]=\"item.disabled\">\n      <label [class.ax-hide-control]=\"!showControl\">\n        @if (multiple) {\n          <input\n            [id]=\"id + '-' + i\"\n            class=\"ax-checkbox\"\n            type=\"checkbox\"\n            (change)=\"_handleOnItemValueChange(item, $event)\"\n            [checked]=\"isItemSelected(item)\"\n            [disabled]=\"disabled || item[disabledField] || readonly\"\n          />\n        } @else {\n          <input\n            [id]=\"id + '-' + i\"\n            class=\"ax-radio\"\n            type=\"radio\"\n            [attr.name]=\"id\"\n            (change)=\"_handleOnItemValueChange(item, $event)\"\n            [checked]=\"isItemSelected(item)\"\n            [disabled]=\"disabled || item[disabledField] || readonly\"\n          />\n        }\n\n        @if (customTemplate()) {\n          <div>\n            <ng-container\n              [ngTemplateOutlet]=\"customTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\"\n            >\n            </ng-container>\n          </div>\n        } @else {\n          <div>\n            {{ getDisplayText(item) | translate | async }}\n            @if (item[hintField]) {\n              <p class=\"ax-hint-text\">\n                {{ item[hintField] | translate | async }}\n              </p>\n            }\n          </div>\n        }\n      </label>\n    </li>\n  }\n</ul>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: ["@layer properties;@layer components{:is(ax-selection-list.ax-look-divided ul.ax-vertical,ax-selection-list.ax-look-divided ul.ax-horizontal) li:last-child label{--tw-border-style: none;border-style:none}ax-selection-list.ax-look-divided ul.ax-vertical>li label{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-bottom:calc(var(--spacing, .25rem) * 3)}ax-selection-list.ax-look-divided ul.ax-horizontal>li label{border-inline-end-style:var(--tw-border-style);border-inline-end-width:2px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-selection-list.ax-look-card ul{gap:calc(var(--spacing, .25rem) * 3)}:is(ax-selection-list.ax-look-card ul.ax-vertical,ax-selection-list.ax-look-card ul.ax-horizontal)>li label{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-selection-list.ax-look-card ul.ax-vertical,ax-selection-list.ax-look-card ul.ax-horizontal)>li.ax-state-selected label{border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}:is(ax-selection-list.ax-look-card ul.ax-vertical,ax-selection-list.ax-look-card ul.ax-horizontal)>li.ax-state-selected label:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(ax-selection-list.ax-look-card ul.ax-vertical,ax-selection-list.ax-look-card ul.ax-horizontal)>li.ax-state-selected label:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 25%,transparent)}}ax-selection-list.ax-state-disabled{cursor:not-allowed;opacity:50%}ax-selection-list ul{display:flex;flex-wrap:wrap}ax-selection-list ul.ax-vertical{flex-direction:column}ax-selection-list ul.ax-horizontal{flex-direction:row}ax-selection-list ul li{cursor:pointer;-webkit-user-select:none;user-select:none}ax-selection-list ul li label{display:flex;cursor:pointer;align-items:flex-start;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}ax-selection-list ul li label.ax-hide-control .ax-checkbox,ax-selection-list ul li label.ax-hide-control .ax-radio{display:none}ax-selection-list ul li label.ax-hide-control>div{margin-inline-start:calc(var(--spacing, .25rem) * 0)}ax-selection-list ul li label .ax-checkbox,ax-selection-list ul li label .ax-radio{margin-top:calc(var(--spacing, .25rem) * 1)}ax-selection-list ul li label>div{margin-inline-start:calc(var(--spacing, .25rem) * 3);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-lightest-surface))}ax-selection-list ul li label>div .ax-hint-text{margin-top:calc(var(--spacing, .25rem) * 1);--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);color:rgba(var(--ax-sys-color-on-lightest-surface))}@supports (color: color-mix(in lab,red,red)){ax-selection-list ul li label>div .ax-hint-text{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-lightest-surface)) 75%,transparent)}}ax-selection-list ul li.ax-state-disabled{opacity:50%}ax-selection-list ul li.ax-state-disabled *{cursor:not-allowed}ax-selection-list.ax-state-error{color:rgba(var(--ax-sys-color-danger-surface))}ax-selection-list.ax-state-error .ax-checkbox-checkmark,ax-selection-list.ax-state-error .ax-radio-checkmark{border-color:rgba(var(--ax-sys-color-danger-surface))}:is(ax-selection-list.ax-look-divided ul.ax-vertical,ax-selection-list.ax-look-divided ul.ax-horizontal) li:last-child label{--tw-border-style: none;border-style:none}ax-selection-list.ax-look-divided ul.ax-vertical>li label{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-bottom:calc(var(--spacing, .25rem) * 3)}ax-selection-list.ax-look-divided ul.ax-horizontal>li label{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-selection-list.ax-look-card ul{gap:calc(var(--spacing, .25rem) * 3)}:is(ax-selection-list.ax-look-card ul.ax-vertical,ax-selection-list.ax-look-card ul.ax-horizontal)>li label{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-selection-list.ax-look-card ul.ax-vertical,ax-selection-list.ax-look-card ul.ax-horizontal)>li.ax-state-selected label{border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}:is(ax-selection-list.ax-look-card ul.ax-vertical,ax-selection-list.ax-look-card ul.ax-horizontal)>li.ax-state-selected label:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(ax-selection-list.ax-look-card ul.ax-vertical,ax-selection-list.ax-look-card ul.ax-horizontal)>li.ax-state-selected label:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 25%,transparent)}}ax-selection-list.ax-state-disabled{cursor:not-allowed;opacity:50%}ax-selection-list ul{display:flex;flex-wrap:wrap}ax-selection-list ul.ax-vertical{flex-direction:column}ax-selection-list ul.ax-horizontal{flex-direction:row}ax-selection-list ul li{cursor:pointer;-webkit-user-select:none;user-select:none}ax-selection-list ul li label{display:flex;cursor:pointer;align-items:flex-start;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}ax-selection-list ul li label.ax-hide-control .ax-checkbox,ax-selection-list ul li label.ax-hide-control .ax-radio{display:none}ax-selection-list ul li label.ax-hide-control>div{margin-inline-start:calc(var(--spacing, .25rem) * 0)}ax-selection-list ul li label .ax-checkbox,ax-selection-list ul li label .ax-radio{margin-top:calc(var(--spacing, .25rem) * 1)}ax-selection-list ul li label>div{margin-inline-start:calc(var(--spacing, .25rem) * 3);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-lightest-surface))}ax-selection-list ul li label>div .ax-hint-text{margin-top:calc(var(--spacing, .25rem) * 1);--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);color:rgba(var(--ax-sys-color-on-lightest-surface))}@supports (color: color-mix(in lab,red,red)){ax-selection-list ul li label>div .ax-hint-text{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-lightest-surface)) 75%,transparent)}}ax-selection-list ul li.ax-state-disabled{opacity:50%}ax-selection-list ul li.ax-state-disabled *{cursor:not-allowed}ax-selection-list.ax-state-error{color:rgba(var(--ax-sys-color-danger-surface))}ax-selection-list.ax-state-error .ax-checkbox-checkmark,ax-selection-list.ax-state-error .ax-radio-checkmark{border-color:rgba(var(--ax-sys-color-danger-surface))}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], customTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTemplate", required: false }] }], showControl: [{
                 type: Input
             }], items: [{

package/fesm2022/acorex-components-selection-list.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"acorex-components-selection-list.mjs","sources":["../../../../packages/components/selection-list/src/lib/selection-list.component.ts","../../../../packages/components/selection-list/src/lib/selection-list.component.html","../../../../packages/components/selection-list/src/lib/selection-list.module.ts","../../../../packages/components/selection-list/src/acorex-components-selection-list.ts"],"sourcesContent":["import {\n AXComponent,\n AXDirection,\n AXFocusableComponent,\n AXValuableComponent,\n AX_SELECTION_DATA_TOKEN,\n MXSelectionBridgeService,\n MXSelectionValueComponent,\n} from '@acorex/cdk/common';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { AsyncPipe, NgTemplateOutlet } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n HostBinding,\n Input,\n TemplateRef,\n ViewEncapsulation,\n forwardRef,\n input,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport type AXSelectionListLook = 'solid' \| 'divided' \| 'card';\n\n/*\n The Button is a component which detects user interaction and triggers a corresponding event\n \n @category Components\n /\n@Component({\n selector: 'ax-selection-list',\n templateUrl: './selection-list.component.html',\n styleUrls: ['./selection-list.component.compiled.css'],\n inputs: [\n 'id',\n 'name',\n 'disabled',\n 'readonly',\n 'tabIndex',\n 'size',\n 'value',\n 'valueField',\n 'textField',\n 'disabledField',\n 'readonlyField',\n 'multiple',\n ],\n outputs: ['onValueChanged', 'onBlur', 'onFocus'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n { provide: AXComponent, useExisting: AXSelectionListComponent },\n { provide: AXFocusableComponent, useExisting: AXSelectionListComponent },\n { provide: AXValuableComponent, useExisting: AXSelectionListComponent },\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => AXSelectionListComponent),\n multi: true,\n },\n {\n provide: AX_SELECTION_DATA_TOKEN,\n useClass: MXSelectionBridgeService,\n },\n ],\n imports: [NgTemplateOutlet, AsyncPipe, AXTranslationModule],\n})\n\n//TODO: on parent click (card style) -> checkbox or radio change value\nexport class AXSelectionListComponent extends MXSelectionValueComponent {\n /\n sets the direction of the component.\n * @param {AXDirection} value\n /\n direction = input<AXDirection>('horizontal');\n\n /\n The custom template used for rendering content.\n \n @param {TemplateRef<unknown>} customTemplate\n /\n customTemplate = input<TemplateRef<unknown>>();\n\n /* @ignore /\n private _showControl = true;\n\n /\n @param {void}\n * Gets the current state of the control visibility.\n /\n @Input()\n public get showControl(): boolean {\n return this._showControl;\n }\n\n /\n @param {boolean} v\n * Sets the visibility state of the control.\n /\n public set showControl(v: boolean) {\n this.setOption({\n name: 'showControl',\n value: v,\n });\n }\n\n /* @ignore /\n private _items: any[] = [];\n\n /\n Gets the list of items.\n * @param {void}\n /\n @Input()\n public get items(): any[] {\n return this._items;\n }\n\n /\n Sets the list of items.\n \n @param {any[]} v\n /\n public set items(v: any[]) {\n this.softClearSelectionCache();\n this.setOption({\n name: 'items',\n value: v,\n });\n }\n\n /* @ignore /\n private _hintField = 'hint';\n\n /\n Gets the field used for displaying hints.\n /\n public get hintField(): string {\n return this._hintField;\n }\n\n /\n Sets the field used for displaying hints.\n \n @param {string} v\n /\n public set hintField(v: string) {\n this.setOption({\n name: 'hintField',\n value: v,\n });\n }\n\n /\n Retrieves an item from the list by its key.\n \n @param {unknown} key - The key to search for.\n /\n getItemByKey(key: unknown): unknown {\n return this.items.find((c) => c == this.value \|\| c[this.valueField] == key);\n }\n\n /\n Defines the visual appearance of the selection list.\n \n @defaultValue 'solid'\n /\n @Input() look: AXSelectionListLook = 'solid';\n\n /* @ignore /\n protected _handleOnItemValueChange(item: any, e: Event) {\n if (this.readonly \|\| this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n } else {\n (e.target as any).checked ? this.selectItems(item) : this.unselectItems(item);\n }\n }\n\n /* @ignore /\n @HostBinding('class')\n private get __hostClass(): string[] {\n return [\n `ax-look-${this.look}`,\n `${this.disabled ? 'ax-state-disabled' : ''}`,\n `${this.readonly ? 'ax-state-readonly' : ''}`,\n ];\n }\n}\n","<ul class=\"ax-{{ direction() }}\">\n @for (item of items; let i = $index; track i) {\n <li [class.ax-state-selected]=\"isItemSelected(item)\" [class.ax-state-disabled]=\"item.disabled\">\n <label [class.ax-hide-control]=\"!showControl\">\n @if (multiple) {\n <input\n [id]=\"id + '-' + i\"\n class=\"ax-checkbox\"\n type=\"checkbox\"\n (change)=\"_handleOnItemValueChange(item, $event)\"\n [checked]=\"isItemSelected(item)\"\n [disabled]=\"disabled \|\| item[disabledField] \|\| readonly\"\n />\n } @else {\n <input\n [id]=\"id + '-' + i\"\n class=\"ax-radio\"\n type=\"radio\"\n [attr.name]=\"id\"\n (change)=\"_handleOnItemValueChange(item, $event)\"\n [checked]=\"isItemSelected(item)\"\n [disabled]=\"disabled \|\| item[disabledField] \|\| readonly\"\n />\n }\n\n @if (customTemplate()) {\n <div>\n <ng-container\n [ngTemplateOutlet]=\"customTemplate()\"\n [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\"\n >\n </ng-container>\n </div>\n } @else {\n <div>\n {{ getDisplayText(item) \| translate \| async }}\n @if (item[hintField]) {\n <p class=\"ax-hint-text\">\n {{ item[hintField] \| translate \| async }}\n </p>\n }\n </div>\n }\n </label>\n </li>\n }\n</ul>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AXSelectionListComponent } from './selection-list.component';\n\nimport { AXCheckBoxModule } from '@acorex/components/check-box';\nimport { AXFormModule } from '@acorex/components/form';\nimport { AXLabelModule } from '@acorex/components/label';\nimport { AXRadioModule } from '@acorex/components/radio';\n\n@NgModule({\n imports: [\n CommonModule,\n FormsModule,\n AXCheckBoxModule,\n AXRadioModule,\n AXLabelModule,\n AXFormModule,\n AXSelectionListComponent,\n ],\n exports: [AXSelectionListComponent],\n providers: [],\n})\nexport class AXSelectionListModule { }\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"acorex-components-selection-list.mjs","sources":["../../../../packages/components/selection-list/src/lib/selection-list.component.ts","../../../../packages/components/selection-list/src/lib/selection-list.component.html","../../../../packages/components/selection-list/src/lib/selection-list.module.ts","../../../../packages/components/selection-list/src/acorex-components-selection-list.ts"],"sourcesContent":["import {\n AXComponent,\n AXDirection,\n AXFocusableComponent,\n AXValuableComponent,\n AX_SELECTION_DATA_TOKEN,\n MXSelectionBridgeService,\n MXSelectionValueComponent,\n} from '@acorex/cdk/common';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { AsyncPipe, NgTemplateOutlet } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n HostBinding,\n Input,\n TemplateRef,\n ViewEncapsulation,\n forwardRef,\n input,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport type AXSelectionListLook = 'solid' \| 'divided' \| 'card';\n\n/*\n The Button is a component which detects user interaction and triggers a corresponding event\n \n @category Components\n /\n@Component({\n selector: 'ax-selection-list',\n templateUrl: './selection-list.component.html',\n styleUrls: ['./selection-list.component.css'],\n inputs: [\n 'id',\n 'name',\n 'disabled',\n 'readonly',\n 'tabIndex',\n 'size',\n 'value',\n 'valueField',\n 'textField',\n 'disabledField',\n 'readonlyField',\n 'multiple',\n ],\n outputs: ['onValueChanged', 'onBlur', 'onFocus'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n { provide: AXComponent, useExisting: AXSelectionListComponent },\n { provide: AXFocusableComponent, useExisting: AXSelectionListComponent },\n { provide: AXValuableComponent, useExisting: AXSelectionListComponent },\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => AXSelectionListComponent),\n multi: true,\n },\n {\n provide: AX_SELECTION_DATA_TOKEN,\n useClass: MXSelectionBridgeService,\n },\n ],\n imports: [NgTemplateOutlet, AsyncPipe, AXTranslationModule],\n})\n\n//TODO: on parent click (card style) -> checkbox or radio change value\nexport class AXSelectionListComponent extends MXSelectionValueComponent {\n /\n sets the direction of the component.\n * @param {AXDirection} value\n /\n direction = input<AXDirection>('horizontal');\n\n /\n The custom template used for rendering content.\n \n @param {TemplateRef<unknown>} customTemplate\n /\n customTemplate = input<TemplateRef<unknown>>();\n\n /* @ignore /\n private _showControl = true;\n\n /\n @param {void}\n * Gets the current state of the control visibility.\n /\n @Input()\n public get showControl(): boolean {\n return this._showControl;\n }\n\n /\n @param {boolean} v\n * Sets the visibility state of the control.\n /\n public set showControl(v: boolean) {\n this.setOption({\n name: 'showControl',\n value: v,\n });\n }\n\n /* @ignore /\n private _items: any[] = [];\n\n /\n Gets the list of items.\n * @param {void}\n /\n @Input()\n public get items(): any[] {\n return this._items;\n }\n\n /\n Sets the list of items.\n \n @param {any[]} v\n /\n public set items(v: any[]) {\n this.softClearSelectionCache();\n this.setOption({\n name: 'items',\n value: v,\n });\n }\n\n /* @ignore /\n private _hintField = 'hint';\n\n /\n Gets the field used for displaying hints.\n /\n public get hintField(): string {\n return this._hintField;\n }\n\n /\n Sets the field used for displaying hints.\n \n @param {string} v\n /\n public set hintField(v: string) {\n this.setOption({\n name: 'hintField',\n value: v,\n });\n }\n\n /\n Retrieves an item from the list by its key.\n \n @param {unknown} key - The key to search for.\n /\n getItemByKey(key: unknown): unknown {\n return this.items.find((c) => c == this.value \|\| c[this.valueField] == key);\n }\n\n /\n Defines the visual appearance of the selection list.\n \n @defaultValue 'solid'\n /\n @Input() look: AXSelectionListLook = 'solid';\n\n /* @ignore /\n protected _handleOnItemValueChange(item: any, e: Event) {\n if (this.readonly \|\| this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n } else {\n (e.target as any).checked ? this.selectItems(item) : this.unselectItems(item);\n }\n }\n\n /* @ignore /\n @HostBinding('class')\n private get __hostClass(): string[] {\n return [\n `ax-look-${this.look}`,\n `${this.disabled ? 'ax-state-disabled' : ''}`,\n `${this.readonly ? 'ax-state-readonly' : ''}`,\n ];\n }\n}\n","<ul class=\"ax-{{ direction() }}\">\n @for (item of items; let i = $index; track i) {\n <li [class.ax-state-selected]=\"isItemSelected(item)\" [class.ax-state-disabled]=\"item.disabled\">\n <label [class.ax-hide-control]=\"!showControl\">\n @if (multiple) {\n <input\n [id]=\"id + '-' + i\"\n class=\"ax-checkbox\"\n type=\"checkbox\"\n (change)=\"_handleOnItemValueChange(item, $event)\"\n [checked]=\"isItemSelected(item)\"\n [disabled]=\"disabled \|\| item[disabledField] \|\| readonly\"\n />\n } @else {\n <input\n [id]=\"id + '-' + i\"\n class=\"ax-radio\"\n type=\"radio\"\n [attr.name]=\"id\"\n (change)=\"_handleOnItemValueChange(item, $event)\"\n [checked]=\"isItemSelected(item)\"\n [disabled]=\"disabled \|\| item[disabledField] \|\| readonly\"\n />\n }\n\n @if (customTemplate()) {\n <div>\n <ng-container\n [ngTemplateOutlet]=\"customTemplate()\"\n [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\"\n >\n </ng-container>\n </div>\n } @else {\n <div>\n {{ getDisplayText(item) \| translate \| async }}\n @if (item[hintField]) {\n <p class=\"ax-hint-text\">\n {{ item[hintField] \| translate \| async }}\n </p>\n }\n </div>\n }\n </label>\n </li>\n }\n</ul>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AXSelectionListComponent } from './selection-list.component';\n\nimport { AXCheckBoxModule } from '@acorex/components/check-box';\nimport { AXFormModule } from '@acorex/components/form';\nimport { AXLabelModule } from '@acorex/components/label';\nimport { AXRadioModule } from '@acorex/components/radio';\n\n@NgModule({\n imports: [\n CommonModule,\n FormsModule,\n AXCheckBoxModule,\n AXRadioModule,\n AXLabelModule,\n AXFormModule,\n AXSelectionListComponent,\n ],\n exports: [AXSelectionListComponent],\n providers: [],\n})\nexport class AXSelectionListModule { }\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

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

@@ -58,6 +58,12 @@ class AXSideMenuItemComponent extends MXInteractiveComponent {
                 return null;
             return this.text().trim() || this.contentLabel().trim() || null;
         }, ...(ngDevMode ? [{ debugName: "tooltipContent" }] : /* istanbul ignore next */ []));
+        /** Accessible label for icon-only compact root items. */
+        this.compactAriaLabel = computed(() => {
+            if (!this.isFirstLevel())
+                return null;
+            return this.text().trim() || this.contentLabel().trim() || null;
+        }, ...(ngDevMode ? [{ debugName: "compactAriaLabel" }] : /* istanbul ignore next */ []));
         this.elem = inject((ElementRef));
         this.platformId = inject(PLATFORM_ID);
         this.destroyRef = inject(DestroyRef);
@@ -174,6 +180,9 @@ class AXSideMenuItemComponent extends MXInteractiveComponent {
     handleClickEvent(e) {
         if (this.disabled || this.isLoading())
             return;
+        if (e instanceof KeyboardEvent && (e.key === ' ' || e.key === 'Spacebar')) {
+            e.preventDefault();
+        }
         const event = {
             component: this,
             htmlElement: this.getHostElement(),
@@ -366,7 +375,7 @@ class AXSideMenuItemComponent extends MXInteractiveComponent {
         }
     }
     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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXSideMenuItemComponent, isStandalone: true, selector: "ax-side-menu-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, toggleOnClick: { classPropertyName: "toggleOnClick", publicName: "toggleOnClick", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActive: { classPropertyName: "routerLinkActive", publicName: "routerLinkActive", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { text: "textChange", active: "activeChange", isLoading: "isLoadingChange", isCollapsed: "isCollapsedChange", onClick: "onClick" }, providers: [{ provide: AXComponent, useExisting: AXSideMenuItemComponent }], queries: [{ propertyName: "childItems", predicate: AXSideMenuItemComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "menuItemTrigger", first: true, predicate: ["menuItemTrigger"], descendants: true, isSignal: true }, { propertyName: "childrenSlot", first: true, predicate: ["childrenSlot"], descendants: true, isSignal: true }, { propertyName: "childrenContextMenu", first: true, predicate: ["childrenContextMenu"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [axTooltip]=\"tooltipContent()\" axTooltipPlacement=\"end\" class=\"ax-side-menu-wrapper\">\n  @if (!isCompactMode()) {\n    <ng-content select=\"ax-title\"></ng-content>\n  }\n  @if (routerLink()) {\n    <a\n      #menuItemTrigger\n      [axRipple]\n      [target]=\"target()\"\n      class=\"ax-side-item\"\n      [routerLink]=\"routerLink()\"\n      (click)=\"handleClickEvent($event)\"\n      [class.ax-state-disabled]=\"disabled\"\n      [attr.aria-disabled]=\"disabled || null\"\n      [attr.aria-expanded]=\"hasChild() ? !isCollapsed() : null\"\n      [attr.aria-label]=\"compactAriaLabel()\"\n      [routerLinkActive]=\"routerLinkActive()\"\n      [routerLinkActiveOptions]=\"routerLinkActiveOptions()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </a>\n  } @else if (href()) {\n    <a\n      #menuItemTrigger\n      [axRipple]\n      [href]=\"href()\"\n      [target]=\"target()\"\n      class=\"ax-side-item\"\n      [class.ax-state-active]=\"active()\"\n      [attr.aria-current]=\"active() ? 'page' : null\"\n      [attr.aria-disabled]=\"disabled || null\"\n      [attr.aria-expanded]=\"hasChild() ? !isCollapsed() : null\"\n      [attr.aria-label]=\"compactAriaLabel()\"\n      (click)=\"handleClickEvent($event)\"\n      [class.ax-state-disabled]=\"disabled\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </a>\n  } @else {\n    <div\n      #menuItemTrigger\n      [axRipple]\n      class=\"ax-side-item\"\n      role=\"button\"\n      tabindex=\"0\"\n      [class.ax-state-active]=\"active()\"\n      [attr.aria-current]=\"active() ? 'page' : null\"\n      [attr.aria-disabled]=\"disabled || null\"\n      [attr.aria-expanded]=\"hasChild() ? !isCollapsed() : null\"\n      [attr.aria-label]=\"compactAriaLabel()\"\n      (click)=\"handleClickEvent($event)\"\n      (keydown.enter)=\"handleClickEvent($event)\"\n      (keydown.space)=\"handleClickEvent($event)\"\n      [class.ax-state-disabled]=\"disabled\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </div>\n  }\n\n  <div\n    class=\"ax-side-children\"\n    [class.ax-collapsed]=\"(!isCompactMode() && isCollapsed()) || (isCompactMode() && isFirstLevel())\"\n    [class.ax-empty]=\"!hasChild() && !isLoading()\"\n  >\n    @if (isLoading()) {\n      <p>{{ '@acorex:common.status.loading' | translate | async }}</p>\n    }\n    <div #childrenSlot class=\"ax-side-children-content\" [hidden]=\"isLoading()\">\n      <ng-content select=\"ax-side-menu-item, ng-container, [ngTemplateOutlet]\"></ng-content>\n    </div>\n  </div>\n\n  @if (isCompactMode() && hasChild()) {\n    <ax-context-menu\n      #childrenContextMenu\n      class=\"ax-side-menu-children-context-menu\"\n      [openOn]=\"'hover'\"\n      [closeOn]=\"'leave'\"\n      [closeOnRouteChange]=\"true\"\n      (onItemClick)=\"handleContextMenuItemClick($event)\"\n      (onClose)=\"handleContextMenuClosed()\"\n    />\n  }\n\n  <ng-content select=\"ax-divider\"></ng-content>\n  <ng-template #menuItemContent>\n    <div class=\"ax-start-side\">\n      <ng-content select=\"ax-prefix\"></ng-content>\n      <div class=\"ax-inside-text\">\n        @if (text()) {\n          <span>{{ text() }}</span>\n        }\n        <ng-content></ng-content>\n      </div>\n    </div>\n    <div class=\"ax-end-side\">\n      <ng-content select=\"ax-suffix\"></ng-content>\n      @if (hasChild() && !isLoading() && toggleOnClick() && !isFirstLevel()) {\n        <span class=\"ax-icon ax-icon-chevron-right arrow-icon\" [class.arrow-icon-expand]=\"!isCollapsed()\"> </span>\n      }\n      @if (isLoading()) {\n        <ax-loading></ax-loading>\n      }\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i1.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSideMenuItemComponent, decorators: [{
             type: Component,
@@ -380,7 +389,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         AXTranslatorPipe,
                         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" }]
+                    ], providers: [{ provide: AXComponent, useExisting: AXSideMenuItemComponent }], template: "<div [axTooltip]=\"tooltipContent()\" axTooltipPlacement=\"end\" class=\"ax-side-menu-wrapper\">\n  @if (!isCompactMode()) {\n    <ng-content select=\"ax-title\"></ng-content>\n  }\n  @if (routerLink()) {\n    <a\n      #menuItemTrigger\n      [axRipple]\n      [target]=\"target()\"\n      class=\"ax-side-item\"\n      [routerLink]=\"routerLink()\"\n      (click)=\"handleClickEvent($event)\"\n      [class.ax-state-disabled]=\"disabled\"\n      [attr.aria-disabled]=\"disabled || null\"\n      [attr.aria-expanded]=\"hasChild() ? !isCollapsed() : null\"\n      [attr.aria-label]=\"compactAriaLabel()\"\n      [routerLinkActive]=\"routerLinkActive()\"\n      [routerLinkActiveOptions]=\"routerLinkActiveOptions()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </a>\n  } @else if (href()) {\n    <a\n      #menuItemTrigger\n      [axRipple]\n      [href]=\"href()\"\n      [target]=\"target()\"\n      class=\"ax-side-item\"\n      [class.ax-state-active]=\"active()\"\n      [attr.aria-current]=\"active() ? 'page' : null\"\n      [attr.aria-disabled]=\"disabled || null\"\n      [attr.aria-expanded]=\"hasChild() ? !isCollapsed() : null\"\n      [attr.aria-label]=\"compactAriaLabel()\"\n      (click)=\"handleClickEvent($event)\"\n      [class.ax-state-disabled]=\"disabled\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </a>\n  } @else {\n    <div\n      #menuItemTrigger\n      [axRipple]\n      class=\"ax-side-item\"\n      role=\"button\"\n      tabindex=\"0\"\n      [class.ax-state-active]=\"active()\"\n      [attr.aria-current]=\"active() ? 'page' : null\"\n      [attr.aria-disabled]=\"disabled || null\"\n      [attr.aria-expanded]=\"hasChild() ? !isCollapsed() : null\"\n      [attr.aria-label]=\"compactAriaLabel()\"\n      (click)=\"handleClickEvent($event)\"\n      (keydown.enter)=\"handleClickEvent($event)\"\n      (keydown.space)=\"handleClickEvent($event)\"\n      [class.ax-state-disabled]=\"disabled\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </div>\n  }\n\n  <div\n    class=\"ax-side-children\"\n    [class.ax-collapsed]=\"(!isCompactMode() && isCollapsed()) || (isCompactMode() && isFirstLevel())\"\n    [class.ax-empty]=\"!hasChild() && !isLoading()\"\n  >\n    @if (isLoading()) {\n      <p>{{ '@acorex:common.status.loading' | translate | async }}</p>\n    }\n    <div #childrenSlot class=\"ax-side-children-content\" [hidden]=\"isLoading()\">\n      <ng-content select=\"ax-side-menu-item, ng-container, [ngTemplateOutlet]\"></ng-content>\n    </div>\n  </div>\n\n  @if (isCompactMode() && hasChild()) {\n    <ax-context-menu\n      #childrenContextMenu\n      class=\"ax-side-menu-children-context-menu\"\n      [openOn]=\"'hover'\"\n      [closeOn]=\"'leave'\"\n      [closeOnRouteChange]=\"true\"\n      (onItemClick)=\"handleContextMenuItemClick($event)\"\n      (onClose)=\"handleContextMenuClosed()\"\n    />\n  }\n\n  <ng-content select=\"ax-divider\"></ng-content>\n  <ng-template #menuItemContent>\n    <div class=\"ax-start-side\">\n      <ng-content select=\"ax-prefix\"></ng-content>\n      <div class=\"ax-inside-text\">\n        @if (text()) {\n          <span>{{ text() }}</span>\n        }\n        <ng-content></ng-content>\n      </div>\n    </div>\n    <div class=\"ax-end-side\">\n      <ng-content select=\"ax-suffix\"></ng-content>\n      @if (hasChild() && !isLoading() && toggleOnClick() && !isFirstLevel()) {\n        <span class=\"ax-icon ax-icon-chevron-right arrow-icon\" [class.arrow-icon-expand]=\"!isCollapsed()\"> </span>\n      }\n      @if (isLoading()) {\n        <ax-loading></ax-loading>\n      }\n    </div>\n  </ng-template>\n</div>\n" }]
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }, { type: i0.Output, args: ["textChange"] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }, { type: i0.Output, args: ["isLoadingChange"] }], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }], onClick: [{ type: i0.Output, args: ["onClick"] }], toggleOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleOnClick", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], routerLinkActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActive", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], menuItemTrigger: [{ type: i0.ViewChild, args: ['menuItemTrigger', { isSignal: true }] }], childItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AXSideMenuItemComponent), { ...{ descendants: true }, isSignal: true }] }], childrenSlot: [{ type: i0.ViewChild, args: ['childrenSlot', { isSignal: true }] }], childrenContextMenu: [{ type: i0.ViewChild, args: ['childrenContextMenu', { isSignal: true }] }] } });
 /**
@@ -514,7 +523,7 @@ class AXSideMenuComponent extends NXComponent {
     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{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 }); }
+        ], 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-comp-side-menu-item-height: var(--ax-comp-sidebar-item-height, 2.5rem);--ax-comp-side-menu-child-item-height: var(--ax-comp-sidebar-child-item-height, 2.25rem);--ax-comp-side-menu-item-radius: var(--ax-comp-sidebar-item-radius, var(--ax-sys-border-radius, .5rem));--ax-comp-side-menu-icon-container-size: var(--ax-comp-sidebar-icon-container-size, 1.5rem);--ax-comp-side-menu-icon-size: var(--ax-comp-sidebar-icon-size, 1rem);--ax-comp-side-menu-icon-radius: var(--ax-comp-sidebar-icon-radius, .375rem);--ax-comp-side-menu-child-indent: var(--ax-comp-sidebar-child-indent, 2rem);--ax-comp-side-menu-compact-item-width: 3.5rem;--ax-comp-side-menu-root-gap: .25rem}ax-side-menu{display:flex;width:100%;flex-direction:column;gap:var(--ax-comp-side-menu-root-gap);color:inherit;font-size:.875rem;line-height:1.25rem;font-weight:400;-webkit-user-select:none;user-select:none}ax-side-menu>ax-title{display:block;margin-block-start:1rem;margin-block-end:.25rem;padding-inline:.75rem;font-size:.6875rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:.5}ax-side-menu>ax-title:first-child{margin-block-start:0}ax-side-menu ax-side-menu-item ax-title{display:block;margin-block-start:1rem;margin-block-end:.25rem;padding-inline:.75rem;font-size:.6875rem;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;box-sizing:border-box;height:var(--ax-comp-side-menu-item-height);min-height:var(--ax-comp-side-menu-item-height);max-height:var(--ax-comp-side-menu-item-height);cursor:pointer;align-items:center;justify-content:space-between;gap:.75rem;padding-block:0;padding-inline:.75rem;font-size:inherit;font-weight:400;border-radius:var(--ax-comp-side-menu-item-radius);outline:none;transition-property:background-color,color,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-item:focus-visible{box-shadow:0 0 0 2px rgba(var(--ax-sys-color-primary-surface))}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{cursor:not-allowed;opacity:.5;pointer-events:none}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled .ax-ripple{opacity:0}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled){font-weight:500}: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{display:flex;align-items:center;min-width:0}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side{flex:1 1 auto;gap:.75rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{flex-shrink:0;gap:.5rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{display:block;width:1rem;height:1rem;font-size:1rem;line-height:1;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-surface))}ax-side-menu ax-side-menu-item .ax-side-item ax-prefix{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--ax-comp-side-menu-icon-container-size);height:var(--ax-comp-side-menu-icon-container-size);border-radius:var(--ax-comp-side-menu-icon-radius);background-color:transparent;transition-property:background-color;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-prefix ax-icon,ax-side-menu ax-side-menu-item .ax-side-item ax-prefix i,ax-side-menu ax-side-menu-item .ax-side-item ax-prefix svg{display:inline-flex;align-items:center;justify-content:center;width:var(--ax-comp-side-menu-icon-size);height:var(--ax-comp-side-menu-icon-size);font-size:var(--ax-comp-side-menu-icon-size);line-height:1;color:currentColor}ax-side-menu ax-side-menu-item .ax-side-item ax-prefix svg{fill:currentColor}ax-side-menu ax-side-menu-item .ax-side-item .ax-inside-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-side-menu ax-side-menu-item .ax-side-item ax-badge{min-width:1.25rem;min-height:1.25rem}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:var(--ax-comp-side-menu-child-indent);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 .ax-side-item{height:var(--ax-comp-side-menu-child-item-height);min-height:var(--ax-comp-side-menu-child-item-height);max-height:var(--ax-comp-side-menu-child-item-height);font-size:.8125rem;line-height:1.125rem;font-weight:400}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child{padding-top:.25rem}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-content{display:flex;flex-direction:column;gap:var(--ax-comp-side-menu-root-gap)}ax-side-menu ax-side-menu-item:has(>.ax-side-menu-wrapper>.ax-side-children:not(.ax-collapsed):not(.ax-empty))>.ax-side-menu-wrapper>.ax-side-item{background-color:rgba(var(--ax-sys-color-lighter-surface, var(--ax-sys-color-surface)),.6)}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item{border-radius:var(--ax-comp-side-menu-item-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-comp-side-menu-hover-bg-color, var(--ax-sys-color-lighter-surface, var(--ax-sys-color-surface))))}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) ax-prefix{background-color:rgba(var(--ax-sys-color-surface),.5)}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-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-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) ax-prefix{background-color:rgba(var(--ax-sys-color-on-primary-surface),.12)}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{inset-inline-start:0;width:calc(var(--ax-comp-side-menu-indicator-size, 2px) / 2)}: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{inset-inline-end:0;width:calc(var(--ax-comp-side-menu-indicator-size, 2px) / 2)}: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{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)}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item{border-radius:0}: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){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){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{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:\"\"}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-children{gap:0;padding-inline-start:var(--ax-comp-side-menu-child-indent)}: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:var(--ax-comp-side-menu-root-gap)}ax-side-menu.ax-look-default ax-icon{opacity:.6}ax-side-menu.ax-look-default .ax-side-item{border-radius:var(--ax-comp-side-menu-item-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:var(--ax-comp-side-menu-root-gap);padding-inline-start:var(--ax-comp-side-menu-child-indent)}ax-side-menu.ax-look-default .ax-side-children:before{position:absolute;inset-inline-start:calc(var(--ax-comp-side-menu-icon-container-size) / 2);width:1px;height:100%;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-inline:.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{align-items:center;gap:var(--ax-comp-side-menu-root-gap)}ax-side-menu.ax-mode-compact .ax-side-menu-wrapper{display:flex;flex-direction:column;align-items:center;width:var(--ax-comp-side-menu-compact-item-width)}ax-side-menu.ax-mode-compact .ax-side-children{display:none}ax-side-menu.ax-mode-compact .ax-inside-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-item:hover:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper .ax-side-item.ax-state-disabled){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-menu-wrapper>.ax-side-item.ax-state-active:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}:is(ax-side-menu.ax-mode-compact.ax-look-with-line,ax-side-menu.ax-mode-compact.ax-look-with-line-color,ax-side-menu.ax-mode-compact.ax-look-default) .ax-side-item:before,:is(ax-side-menu.ax-mode-compact.ax-look-with-line,ax-side-menu.ax-mode-compact.ax-look-with-line-color,ax-side-menu.ax-mode-compact.ax-look-default) .ax-side-children:before{display:none}ax-side-menu.ax-mode-compact ax-side-menu-item{position:relative;display:flex;justify-content:center;width:var(--ax-comp-side-menu-compact-item-width);padding:0!important}ax-side-menu.ax-mode-compact ax-side-menu-item ax-icon{font-size:var(--ax-comp-side-menu-icon-size)}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-item{justify-content:center;width:var(--ax-comp-side-menu-compact-item-width);min-width:var(--ax-comp-side-menu-compact-item-width);max-width:var(--ax-comp-side-menu-compact-item-width);height:var(--ax-comp-side-menu-item-height);gap:0;padding-inline:0}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-start-side{flex:0 0 auto;justify-content:center;gap:0}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-end-side{display:none}ax-side-menu.ax-mode-compact ax-badge{position:absolute;inset-block-start:.25rem;inset-inline-end:.25rem}[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{--ax-comp-side-menu-indicator-size: 0px}ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu:not(.ax-state-open){display:none}ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu .ax-side-item:before,ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu .ax-menu-item:before,ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu [class*=indicator]{display:none!important}@media(prefers-reduced-motion:reduce){ax-side-menu ax-side-menu-item .ax-side-item,ax-side-menu ax-side-menu-item .ax-side-children,ax-side-menu ax-side-menu-item .ax-end-side .arrow-icon{transition: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: "21.2.9", ngImport: i0, type: AXSideMenuComponent, decorators: [{
             type: Component,
@@ -528,7 +537,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     ], providers: [
                         { provide: AXComponent, useExisting: AXSideMenuComponent },
                         { provide: AXSideMenuBase, useExisting: AXSideMenuComponent },
-                    ], template: "<ng-content select=\"ax-side-menu-item,ax-title,ng-container,[ngTemplateOutlet]\"></ng-content>\n\n@for (node of items(); track node) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n<ng-template #Recursion let-item>\n  @if (item.title) {\n    <ax-title>{{ item.title }}</ax-title>\n  }\n  @if (item.routerLink) {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [target]=\"item.target\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [routerLink]=\"item.routerLink\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n      [routerLinkActive]=\"item.routerLinkActive\"\n      [routerLinkActiveOptions]=\"item.routerLinkActiveOptions\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  } @else if (item.href) {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [href]=\"item.href\"\n      [target]=\"item.target\"\n      [active]=\"item.active\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  } @else {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [active]=\"item.active\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  }\n\n  <ng-template #sideMenuItemContent>\n    <ax-prefix>\n      @if (item.icon) {\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      }\n    </ax-prefix>\n    @if (item.data) {\n      <ax-text>{{ item.data }}</ax-text>\n    }\n    @if (item.suffixText || item.suffix?.text) {\n      <ax-suffix>\n        <ax-text>{{ item.suffixText ?? item.suffix?.text }}</ax-text>\n      </ax-suffix>\n    }\n    @for (child of item.items; track child) {\n      <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    }\n  </ng-template>\n</ng-template>\n", styles: [":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"] }]
+                    ], 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-comp-side-menu-item-height: var(--ax-comp-sidebar-item-height, 2.5rem);--ax-comp-side-menu-child-item-height: var(--ax-comp-sidebar-child-item-height, 2.25rem);--ax-comp-side-menu-item-radius: var(--ax-comp-sidebar-item-radius, var(--ax-sys-border-radius, .5rem));--ax-comp-side-menu-icon-container-size: var(--ax-comp-sidebar-icon-container-size, 1.5rem);--ax-comp-side-menu-icon-size: var(--ax-comp-sidebar-icon-size, 1rem);--ax-comp-side-menu-icon-radius: var(--ax-comp-sidebar-icon-radius, .375rem);--ax-comp-side-menu-child-indent: var(--ax-comp-sidebar-child-indent, 2rem);--ax-comp-side-menu-compact-item-width: 3.5rem;--ax-comp-side-menu-root-gap: .25rem}ax-side-menu{display:flex;width:100%;flex-direction:column;gap:var(--ax-comp-side-menu-root-gap);color:inherit;font-size:.875rem;line-height:1.25rem;font-weight:400;-webkit-user-select:none;user-select:none}ax-side-menu>ax-title{display:block;margin-block-start:1rem;margin-block-end:.25rem;padding-inline:.75rem;font-size:.6875rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:.5}ax-side-menu>ax-title:first-child{margin-block-start:0}ax-side-menu ax-side-menu-item ax-title{display:block;margin-block-start:1rem;margin-block-end:.25rem;padding-inline:.75rem;font-size:.6875rem;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;box-sizing:border-box;height:var(--ax-comp-side-menu-item-height);min-height:var(--ax-comp-side-menu-item-height);max-height:var(--ax-comp-side-menu-item-height);cursor:pointer;align-items:center;justify-content:space-between;gap:.75rem;padding-block:0;padding-inline:.75rem;font-size:inherit;font-weight:400;border-radius:var(--ax-comp-side-menu-item-radius);outline:none;transition-property:background-color,color,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-item:focus-visible{box-shadow:0 0 0 2px rgba(var(--ax-sys-color-primary-surface))}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{cursor:not-allowed;opacity:.5;pointer-events:none}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled .ax-ripple{opacity:0}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled){font-weight:500}: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{display:flex;align-items:center;min-width:0}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side{flex:1 1 auto;gap:.75rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{flex-shrink:0;gap:.5rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{display:block;width:1rem;height:1rem;font-size:1rem;line-height:1;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-surface))}ax-side-menu ax-side-menu-item .ax-side-item ax-prefix{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--ax-comp-side-menu-icon-container-size);height:var(--ax-comp-side-menu-icon-container-size);border-radius:var(--ax-comp-side-menu-icon-radius);background-color:transparent;transition-property:background-color;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-prefix ax-icon,ax-side-menu ax-side-menu-item .ax-side-item ax-prefix i,ax-side-menu ax-side-menu-item .ax-side-item ax-prefix svg{display:inline-flex;align-items:center;justify-content:center;width:var(--ax-comp-side-menu-icon-size);height:var(--ax-comp-side-menu-icon-size);font-size:var(--ax-comp-side-menu-icon-size);line-height:1;color:currentColor}ax-side-menu ax-side-menu-item .ax-side-item ax-prefix svg{fill:currentColor}ax-side-menu ax-side-menu-item .ax-side-item .ax-inside-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-side-menu ax-side-menu-item .ax-side-item ax-badge{min-width:1.25rem;min-height:1.25rem}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:var(--ax-comp-side-menu-child-indent);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 .ax-side-item{height:var(--ax-comp-side-menu-child-item-height);min-height:var(--ax-comp-side-menu-child-item-height);max-height:var(--ax-comp-side-menu-child-item-height);font-size:.8125rem;line-height:1.125rem;font-weight:400}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child{padding-top:.25rem}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-content{display:flex;flex-direction:column;gap:var(--ax-comp-side-menu-root-gap)}ax-side-menu ax-side-menu-item:has(>.ax-side-menu-wrapper>.ax-side-children:not(.ax-collapsed):not(.ax-empty))>.ax-side-menu-wrapper>.ax-side-item{background-color:rgba(var(--ax-sys-color-lighter-surface, var(--ax-sys-color-surface)),.6)}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item{border-radius:var(--ax-comp-side-menu-item-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-comp-side-menu-hover-bg-color, var(--ax-sys-color-lighter-surface, var(--ax-sys-color-surface))))}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) ax-prefix{background-color:rgba(var(--ax-sys-color-surface),.5)}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-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-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) ax-prefix{background-color:rgba(var(--ax-sys-color-on-primary-surface),.12)}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{inset-inline-start:0;width:calc(var(--ax-comp-side-menu-indicator-size, 2px) / 2)}: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{inset-inline-end:0;width:calc(var(--ax-comp-side-menu-indicator-size, 2px) / 2)}: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{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)}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-item{border-radius:0}: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){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){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{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:\"\"}:is(ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color) .ax-side-children{gap:0;padding-inline-start:var(--ax-comp-side-menu-child-indent)}: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:var(--ax-comp-side-menu-root-gap)}ax-side-menu.ax-look-default ax-icon{opacity:.6}ax-side-menu.ax-look-default .ax-side-item{border-radius:var(--ax-comp-side-menu-item-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:var(--ax-comp-side-menu-root-gap);padding-inline-start:var(--ax-comp-side-menu-child-indent)}ax-side-menu.ax-look-default .ax-side-children:before{position:absolute;inset-inline-start:calc(var(--ax-comp-side-menu-icon-container-size) / 2);width:1px;height:100%;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-inline:.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{align-items:center;gap:var(--ax-comp-side-menu-root-gap)}ax-side-menu.ax-mode-compact .ax-side-menu-wrapper{display:flex;flex-direction:column;align-items:center;width:var(--ax-comp-side-menu-compact-item-width)}ax-side-menu.ax-mode-compact .ax-side-children{display:none}ax-side-menu.ax-mode-compact .ax-inside-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-item:hover:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper .ax-side-item.ax-state-disabled){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-menu-wrapper>.ax-side-item.ax-state-active:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-menu-wrapper .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}:is(ax-side-menu.ax-mode-compact.ax-look-with-line,ax-side-menu.ax-mode-compact.ax-look-with-line-color,ax-side-menu.ax-mode-compact.ax-look-default) .ax-side-item:before,:is(ax-side-menu.ax-mode-compact.ax-look-with-line,ax-side-menu.ax-mode-compact.ax-look-with-line-color,ax-side-menu.ax-mode-compact.ax-look-default) .ax-side-children:before{display:none}ax-side-menu.ax-mode-compact ax-side-menu-item{position:relative;display:flex;justify-content:center;width:var(--ax-comp-side-menu-compact-item-width);padding:0!important}ax-side-menu.ax-mode-compact ax-side-menu-item ax-icon{font-size:var(--ax-comp-side-menu-icon-size)}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-item{justify-content:center;width:var(--ax-comp-side-menu-compact-item-width);min-width:var(--ax-comp-side-menu-compact-item-width);max-width:var(--ax-comp-side-menu-compact-item-width);height:var(--ax-comp-side-menu-item-height);gap:0;padding-inline:0}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-start-side{flex:0 0 auto;justify-content:center;gap:0}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-end-side{display:none}ax-side-menu.ax-mode-compact ax-badge{position:absolute;inset-block-start:.25rem;inset-inline-end:.25rem}[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{--ax-comp-side-menu-indicator-size: 0px}ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu:not(.ax-state-open){display:none}ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu .ax-side-item:before,ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu .ax-menu-item:before,ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu [class*=indicator]{display:none!important}@media(prefers-reduced-motion:reduce){ax-side-menu ax-side-menu-item .ax-side-item,ax-side-menu ax-side-menu-item .ax-side-children,ax-side-menu ax-side-menu-item .ax-end-side .arrow-icon{transition: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']