@acorex/components 19.11.0-next.1 → 19.11.0-next.2

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

@@ -1,10 +1,10 @@
 import { AXClickEvent, MXInteractiveComponent, AXRippleDirective, NXComponent, AXCommonModule } from '@acorex/components/common';
 import { AXLoadingComponent, AXLoadingModule } from '@acorex/components/loading';
 import { AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
-import { trigger, state, style, AUTO_STYLE, transition, animate } from '@angular/animations';
+import { trigger, state, transition, style, AUTO_STYLE, animate } from '@angular/animations';
 import { NgTemplateOutlet, AsyncPipe, NgFor, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { model, output, input, signal, afterNextRender, Component, ChangeDetectionStrategy, ViewEncapsulation, viewChildren, HostBinding, inject, Directive, NgModule } from '@angular/core';
+import { model, output, input, signal, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component, viewChildren, HostBinding, inject, Directive, NgModule } from '@angular/core';
 import { RouterLink, RouterLinkActive, Router } from '@angular/router';
 import { AXDecoratorGenericComponent, AXDecoratorIconComponent, AXDecoratorModule } from '@acorex/components/decorators';
 import { AXOutlineContainerDirective } from '@acorex/cdk/outline';
@@ -60,8 +60,8 @@ class AXSideMenuItemComponent extends MXInteractiveComponent {
     close() {
         this.isCollapsed.set(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXSideMenuItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: AXSideMenuItemComponent, isStandalone: true, selector: "ax-side-menu-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActive: { classPropertyName: "routerLinkActive", publicName: "routerLinkActive", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { text: "textChange", active: "activeChange", isLoading: "isLoadingChange", isCollapsed: "isCollapsedChange", onClick: "onClick" }, host: { attributes: { "ngSkipHydration": "true" } }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-title\"></ng-content>\n@if (routerLink()) {\n  <a\n    [axRipple]\n    [target]=\"target()\"\n    class=\"ax-side-item\"\n    [routerLink]=\"routerLink()\"\n    (click)=\"_handleClickEvent($event)\"\n    [class.ax-state-disabled]=\"disabled\"\n    [routerLinkActive]=\"routerLinkActive()\"\n    [routerLinkActiveOptions]=\"routerLinkActiveOptions()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n  </a>\n} @else if (href()) {\n  <a\n    [axRipple]\n    [href]=\"href()\"\n    [target]=\"target()\"\n    class=\"ax-side-item\"\n    [class.ax-state-active]=\"active()\"\n    (click)=\"_handleClickEvent($event)\"\n    [class.ax-state-disabled]=\"disabled\"\n  >\n    <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n  </a>\n} @else {\n  <div\n    [axRipple]\n    class=\"ax-side-item\"\n    [class.ax-state-active]=\"active()\"\n    (click)=\"_handleClickEvent($event)\"\n    [class.ax-state-disabled]=\"disabled\"\n  >\n    <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n  </div>\n}\n\n<div class=\"ax-side-children\" [@collapse]=\"isCollapsed()\">\n  @if (isLoading()) {\n    <p>{{ 'loading' | translate | async }}</p>\n  } @else {\n    <ng-content select=\"ax-side-menu-item, ng-container\"></ng-content>\n  }\n</div>\n\n<ng-content select=\"ax-divider\"></ng-content>\n<ng-template #menuItemContent>\n  <div class=\"ax-start-side\">\n    <ng-content select=\"ax-prefix\"></ng-content>\n    @if (text()) {\n      <span>{{ text() }}</span>\n    }\n    <ng-content></ng-content>\n  </div>\n  <div class=\"ax-end-side\">\n    <ng-content select=\"ax-suffix\"></ng-content>\n    @if (hasChild() && !isLoading()) {\n      <span class=\"ax-icon ax-icon-chevron-right arrow-icon\" [class.arrow-icon-expand]=\"!isCollapsed()\">\n      </span>\n    }\n    @if (isLoading()) {\n      <ax-loading></ax-loading>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXSideMenuItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: AXSideMenuItemComponent, isStandalone: true, selector: "ax-side-menu-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActive: { classPropertyName: "routerLinkActive", publicName: "routerLinkActive", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { text: "textChange", active: "activeChange", isLoading: "isLoadingChange", isCollapsed: "isCollapsedChange", onClick: "onClick" }, host: { attributes: { "ngSkipHydration": "true" } }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-title\"></ng-content>\n@if (routerLink()) {\n  <a\n    [axRipple]\n    [target]=\"target()\"\n    class=\"ax-side-item\"\n    [routerLink]=\"routerLink()\"\n    (click)=\"_handleClickEvent($event)\"\n    [class.ax-state-disabled]=\"disabled\"\n    [routerLinkActive]=\"routerLinkActive()\"\n    [routerLinkActiveOptions]=\"routerLinkActiveOptions()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n  </a>\n} @else if (href()) {\n  <a\n    [axRipple]\n    [href]=\"href()\"\n    [target]=\"target()\"\n    class=\"ax-side-item\"\n    [class.ax-state-active]=\"active()\"\n    (click)=\"_handleClickEvent($event)\"\n    [class.ax-state-disabled]=\"disabled\"\n  >\n    <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n  </a>\n} @else {\n  <div\n    [axRipple]\n    class=\"ax-side-item\"\n    [class.ax-state-active]=\"active()\"\n    (click)=\"_handleClickEvent($event)\"\n    [class.ax-state-disabled]=\"disabled\"\n  >\n    <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n  </div>\n}\n\n<div class=\"ax-side-children\" [@collapse]=\"isCollapsed()\">\n  @if (isLoading()) {\n    <p>{{ 'loading' | translate | async }}</p>\n  } @else {\n    <ng-content select=\"ax-side-menu-item, ng-container\"></ng-content>\n  }\n</div>\n\n<ng-content select=\"ax-divider\"></ng-content>\n<ng-template #menuItemContent>\n  <div class=\"ax-start-side\">\n    <ng-content select=\"ax-prefix\"></ng-content>\n    @if (text()) {\n      <span>{{ text() }}</span>\n    }\n    <ng-content></ng-content>\n  </div>\n  <div class=\"ax-end-side\">\n    <ng-content select=\"ax-suffix\"></ng-content>\n    @if (hasChild() && !isLoading()) {\n      <span class=\"ax-icon ax-icon-chevron-right arrow-icon\" [class.arrow-icon-expand]=\"!isCollapsed()\">\n      </span>\n    }\n    @if (isLoading()) {\n      <ax-loading></ax-loading>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], animations: [
             trigger('collapse', [
                 state('false', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),
                 state('true', style({ height: '0', visibility: 'hidden' })),
@@ -70,7 +70,7 @@ class AXSideMenuItemComponent extends MXInteractiveComponent {
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXSideMenuItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXSideMenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-side-menu-item', inputs: ['disabled'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, animations: [
                         trigger('collapse', [
@@ -98,10 +98,10 @@ class AXSideMenuComponent extends NXComponent {
     get __hostClass() {
         return [`ax-look-${this.look()}`, `ax-location-${this.location()}`];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXSideMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: AXSideMenuComponent, isStandalone: true, selector: "ax-side-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, location: { classPropertyName: "location", publicName: "location", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange" }, host: { properties: { "class": "this.__hostClass" } }, viewQueries: [{ propertyName: "children", predicate: AXSideMenuItemComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-side-menu-item,ax-title,ng-container,ng-content\"></ng-content>\n\n<ng-container\n  *ngFor=\"let node of items()\"\n  [ngTemplateOutlet]=\"Recursion\"\n  [ngTemplateOutletContext]=\"{ $implicit: node }\"\n>\n</ng-container>\n<ng-template #Recursion let-item>\n  @if (item.title) {\n    <ax-title>{{ item.title }}</ax-title>\n  }\n  @if (item.routerLink) {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [target]=\"item.target\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [routerLink]=\"item.routerLink\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [routerLinkActive]=\"item.routerLinkActive\"\n      [routerLinkActiveOptions]=\"item.routerLinkActiveOptions\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  } @else if (item.href) {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [href]=\"item.href\"\n      [target]=\"item.target\"\n      [active]=\"item.active\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [isCollapsed]=\"item.isCollapsed\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  } @else {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [active]=\"item.active\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [isCollapsed]=\"item.isCollapsed\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  }\n\n  <ng-template #sideMenuItemContent>\n    <ax-prefix>\n      @if (item.icon) {\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      }\n    </ax-prefix>\n    @if (item.data) {\n      <ax-text>{{ item.data }}</ax-text>\n    }\n    @if (item.suffixText) {\n      <ax-suffix>\n        <ax-text>{{ item.suffixText }}</ax-text>\n      </ax-suffix>\n    }\n    <ng-container\n      *ngFor=\"let child of item.items\"\n      [ngTemplateOutlet]=\"Recursion\"\n      [ngTemplateOutletContext]=\"{ $implicit: child }\"\n    ></ng-container>\n  </ng-template>\n</ng-template>\n", styles: ["ax-side-menu{--ax-comp-side-menu-indicator-size: 2px}ax-side-menu{width:100%;display:flex;color:inherit;-webkit-user-select:none;user-select:none;flex-direction:column;gap:var(--ax-comp-side-menu-gap, .5rem);font-size:var(--ax-comp-side-menu-font-size, .875rem);line-height:var(--ax-comp-side-menu-line-height, 1.25rem)}ax-side-menu>ax-title{margin-block:.5rem;display:block;padding-inline-start:.75rem;padding-inline-end:.75rem;padding-top:.25rem;padding-bottom:.25rem;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:.5}ax-side-menu ax-side-menu-item ax-title{margin-block:.5rem;margin-top:.5rem;display:block;padding-inline-start:.75rem;padding-inline-end:.75rem;padding-top:.25rem;padding-bottom:.25rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:var(--ax-comp-side-menu-title-opacity, .5);font-size:var(--ax-comp-side-menu-title-font-size, .75rem)}ax-side-menu ax-side-menu-item ax-divider{width:100%;display:block;height:var(--ax-comp-side-menu-divider-height, 1px);margin-top:var(--ax-comp-side-menu-divider-margin-y, .25rem);margin-bottom:var(--ax-comp-side-menu-divider-margin-y, .25rem);background-color:rgba(var(--ax-comp-side-menu-divider-bg-color, var(--ax-sys-color-border-lightest-surface)))}ax-side-menu ax-side-menu-item .ax-side-item{padding-inline:var(--ax-comp-side-menu-item-padding-x, 1rem);padding-block:var(--ax-comp-side-menu-item-padding-y, .5rem);font-size:inherit;position:relative;display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:.75rem;overflow:hidden;font-weight:500}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{cursor:not-allowed;opacity:var(--ax-comp-side-menu-item-disabled-opacity, .5)}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled .ax-ripple{opacity:0}ax-side-menu ax-side-menu-item .ax-side-item:hover:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled) ax-loading ax-loading-spinner span,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled) ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-comp-side-menu-text-color, var(--ax-sys-color-on-primary-surface)))}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side,ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{display:flex;align-items:center}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side{gap:.5rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{gap:.5rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{display:block}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{transform:rotate(90deg)}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-comp-side-menu-text-color, var(--ax-sys-color-on-primary-surface)))}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:rgba(var(--ax-comp-side-menu-ripple-color, var(--ax-sys-color-on-surface)),.3)!important}ax-side-menu ax-side-menu-item .ax-side-children{overflow:hidden;padding-inline-start:1.25rem;display:flex;flex-direction:column;gap:var(--ax-comp-side-menu-children-gap, .5rem)}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child{padding-top:var(--ax-comp-side-menu-children-gap, .5rem)}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child ax-title{margin-top:1em}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item .ax-side-item{font-weight:400}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item{border-radius:var(--ax-comp-side-menu-pills-border-radius, var(--ax-sys-border-radius))}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover.ax-state-disabled){color:rgba(var(--ax-comp-side-menu-hover-text-color, var(--ax-sys-color-on-surface)));background-color:rgba(var(--ax-comp-side-menu-hover-bg-color, var(--ax-sys-color-surface)))}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled){color:rgba(var(--ax-comp-side-menu-active-text-color, var(--ax-sys-color-on-primary-surface)));background-color:rgba(var(--ax-comp-side-menu-active-bg-color, var(--ax-sys-color-primary-surface)))}ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color{gap:0}ax-side-menu.ax-look-with-line .ax-ripple,ax-side-menu.ax-look-with-line-color .ax-ripple{display:none}ax-side-menu.ax-look-with-line.ax-location-start .ax-side-children:before,ax-side-menu.ax-look-with-line.ax-location-start .ax-side-item:before,ax-side-menu.ax-look-with-line-color.ax-location-start .ax-side-children:before,ax-side-menu.ax-look-with-line-color.ax-location-start .ax-side-item:before{inset-inline-start:0;width:calc(var(--ax-comp-side-menu-indicator-size) / 2)}ax-side-menu.ax-look-with-line.ax-location-end .ax-side-children:before,ax-side-menu.ax-look-with-line.ax-location-end .ax-side-item:before,ax-side-menu.ax-look-with-line-color.ax-location-end .ax-side-children:before,ax-side-menu.ax-look-with-line-color.ax-location-end .ax-side-item:before{inset-inline-end:0;width:calc(var(--ax-comp-side-menu-indicator-size) / 2)}ax-side-menu.ax-look-with-line ax-side-menu-item,ax-side-menu.ax-look-with-line .ax-side-children,ax-side-menu.ax-look-with-line .ax-side-item,ax-side-menu.ax-look-with-line-color ax-side-menu-item,ax-side-menu.ax-look-with-line-color .ax-side-children,ax-side-menu.ax-look-with-line-color .ax-side-item{position:relative}ax-side-menu.ax-look-with-line ax-side-menu-item:before,ax-side-menu.ax-look-with-line .ax-side-children:before,ax-side-menu.ax-look-with-line .ax-side-item:before,ax-side-menu.ax-look-with-line-color ax-side-menu-item:before,ax-side-menu.ax-look-with-line-color .ax-side-children:before,ax-side-menu.ax-look-with-line-color .ax-side-item:before{content:\"\";height:100%;position:absolute;background-color:rgba(var(--ax-comp-side-menu-indicator-color, var(--ax-sys-color-border-lightest-surface)));transition-timing-function:var(--ax-sys-transition-timing-function);transition-duration:var(--ax-sys-transition-duration);transition-property:width}ax-side-menu.ax-look-with-line .ax-side-item:hover:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled),ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){color:rgba(var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface)))}ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled),ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled){color:rgba(var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface)))}ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled):before,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled):before{content:\"\";height:100%;position:absolute;width:var(--ax-comp-side-menu-indicator-size);background-color:rgba(var(--ax-comp-side-menu-indicator-active-color, var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface))))}ax-side-menu.ax-look-with-line .ax-side-children,ax-side-menu.ax-look-with-line-color .ax-side-children{gap:0}ax-side-menu.ax-look-with-line .ax-side-children ax-side-menu-item:first-child,ax-side-menu.ax-look-with-line-color .ax-side-children ax-side-menu-item:first-child{padding-top:0}ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface)),.05)}ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled){background-color:rgba(var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface)),.1)}html[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon:before{-moz-transform:scale(-1,1);-webkit-transform:scale(-1,1);-o-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scaleX(-1)}html[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{transform:rotate(-90deg)!important}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXSideMenuItemComponent, selector: "ax-side-menu-item", inputs: ["disabled", "text", "active", "isLoading", "isCollapsed", "href", "routerLink", "routerLinkActive", "routerLinkActiveOptions", "target"], outputs: ["textChange", "activeChange", "isLoadingChange", "isCollapsedChange", "onClick"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXSideMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: AXSideMenuComponent, isStandalone: true, selector: "ax-side-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, location: { classPropertyName: "location", publicName: "location", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange" }, host: { properties: { "class": "this.__hostClass" } }, viewQueries: [{ propertyName: "children", predicate: AXSideMenuItemComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-side-menu-item,ax-title,ng-container,ng-content\"></ng-content>\n\n<ng-container\n  *ngFor=\"let node of items()\"\n  [ngTemplateOutlet]=\"Recursion\"\n  [ngTemplateOutletContext]=\"{ $implicit: node }\"\n>\n</ng-container>\n<ng-template #Recursion let-item>\n  @if (item.title) {\n    <ax-title>{{ item.title }}</ax-title>\n  }\n  @if (item.routerLink) {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [target]=\"item.target\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [routerLink]=\"item.routerLink\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [routerLinkActive]=\"item.routerLinkActive\"\n      [routerLinkActiveOptions]=\"item.routerLinkActiveOptions\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  } @else if (item.href) {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [href]=\"item.href\"\n      [target]=\"item.target\"\n      [active]=\"item.active\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [isCollapsed]=\"item.isCollapsed\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  } @else {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [active]=\"item.active\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [isCollapsed]=\"item.isCollapsed\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  }\n\n  <ng-template #sideMenuItemContent>\n    <ax-prefix>\n      @if (item.icon) {\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      }\n    </ax-prefix>\n    @if (item.data) {\n      <ax-text>{{ item.data }}</ax-text>\n    }\n    @if (item.suffixText) {\n      <ax-suffix>\n        <ax-text>{{ item.suffixText }}</ax-text>\n      </ax-suffix>\n    }\n    <ng-container\n      *ngFor=\"let child of item.items\"\n      [ngTemplateOutlet]=\"Recursion\"\n      [ngTemplateOutletContext]=\"{ $implicit: child }\"\n    ></ng-container>\n  </ng-template>\n</ng-template>\n", styles: ["ax-side-menu{--ax-comp-side-menu-indicator-size: 2px}ax-side-menu{width:100%;display:flex;color:inherit;-webkit-user-select:none;user-select:none;flex-direction:column;gap:var(--ax-comp-side-menu-gap, .5rem);font-size:var(--ax-comp-side-menu-font-size, .875rem);line-height:var(--ax-comp-side-menu-line-height, 1.25rem)}ax-side-menu>ax-title{margin-block:.5rem;display:block;padding-inline-start:.75rem;padding-inline-end:.75rem;padding-top:.25rem;padding-bottom:.25rem;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:.5}ax-side-menu ax-side-menu-item ax-title{margin-block:.5rem;margin-top:.5rem;display:block;padding-inline-start:.75rem;padding-inline-end:.75rem;padding-top:.25rem;padding-bottom:.25rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:var(--ax-comp-side-menu-title-opacity, .5);font-size:var(--ax-comp-side-menu-title-font-size, .75rem)}ax-side-menu ax-side-menu-item ax-divider{width:100%;display:block;height:var(--ax-comp-side-menu-divider-height, 1px);margin-top:var(--ax-comp-side-menu-divider-margin-y, .25rem);margin-bottom:var(--ax-comp-side-menu-divider-margin-y, .25rem);background-color:rgba(var(--ax-comp-side-menu-divider-bg-color, var(--ax-sys-color-border-lightest-surface)))}ax-side-menu ax-side-menu-item .ax-side-item{padding-inline:var(--ax-comp-side-menu-item-padding-x, 1rem);padding-block:var(--ax-comp-side-menu-item-padding-y, .5rem);font-size:inherit;position:relative;display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:.75rem;overflow:hidden;font-weight:500}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{cursor:not-allowed;opacity:var(--ax-comp-side-menu-item-disabled-opacity, .5)}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled .ax-ripple{opacity:0}ax-side-menu ax-side-menu-item .ax-side-item:hover:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled) ax-loading ax-loading-spinner span,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled) ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-comp-side-menu-text-color, var(--ax-sys-color-on-primary-surface)))}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side,ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{display:flex;align-items:center}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side{gap:.5rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{gap:.5rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{display:block}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{transform:rotate(90deg)}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-comp-side-menu-text-color, var(--ax-sys-color-on-primary-surface)))}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:rgba(var(--ax-comp-side-menu-ripple-color, var(--ax-sys-color-on-surface)),.3)!important}ax-side-menu ax-side-menu-item .ax-side-children{overflow:hidden;padding-inline-start:1.25rem;display:flex;flex-direction:column;gap:var(--ax-comp-side-menu-children-gap, .5rem)}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child{padding-top:var(--ax-comp-side-menu-children-gap, .5rem)}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child ax-title{margin-top:1em}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item .ax-side-item{font-weight:400}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item{border-radius:var(--ax-comp-side-menu-pills-border-radius, var(--ax-sys-border-radius))}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover.ax-state-disabled){color:rgba(var(--ax-comp-side-menu-hover-text-color, var(--ax-sys-color-on-surface)));background-color:rgba(var(--ax-comp-side-menu-hover-bg-color, var(--ax-sys-color-surface)))}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled){color:rgba(var(--ax-comp-side-menu-active-text-color, var(--ax-sys-color-on-primary-surface)));background-color:rgba(var(--ax-comp-side-menu-active-bg-color, var(--ax-sys-color-primary-surface)))}ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color{gap:0}ax-side-menu.ax-look-with-line .ax-ripple,ax-side-menu.ax-look-with-line-color .ax-ripple{display:none}ax-side-menu.ax-look-with-line.ax-location-start .ax-side-children:before,ax-side-menu.ax-look-with-line.ax-location-start .ax-side-item:before,ax-side-menu.ax-look-with-line-color.ax-location-start .ax-side-children:before,ax-side-menu.ax-look-with-line-color.ax-location-start .ax-side-item:before{inset-inline-start:0;width:calc(var(--ax-comp-side-menu-indicator-size) / 2)}ax-side-menu.ax-look-with-line.ax-location-end .ax-side-children:before,ax-side-menu.ax-look-with-line.ax-location-end .ax-side-item:before,ax-side-menu.ax-look-with-line-color.ax-location-end .ax-side-children:before,ax-side-menu.ax-look-with-line-color.ax-location-end .ax-side-item:before{inset-inline-end:0;width:calc(var(--ax-comp-side-menu-indicator-size) / 2)}ax-side-menu.ax-look-with-line ax-side-menu-item,ax-side-menu.ax-look-with-line .ax-side-children,ax-side-menu.ax-look-with-line .ax-side-item,ax-side-menu.ax-look-with-line-color ax-side-menu-item,ax-side-menu.ax-look-with-line-color .ax-side-children,ax-side-menu.ax-look-with-line-color .ax-side-item{position:relative}ax-side-menu.ax-look-with-line ax-side-menu-item:before,ax-side-menu.ax-look-with-line .ax-side-children:before,ax-side-menu.ax-look-with-line .ax-side-item:before,ax-side-menu.ax-look-with-line-color ax-side-menu-item:before,ax-side-menu.ax-look-with-line-color .ax-side-children:before,ax-side-menu.ax-look-with-line-color .ax-side-item:before{content:\"\";height:100%;position:absolute;background-color:rgba(var(--ax-comp-side-menu-indicator-color, var(--ax-sys-color-border-lightest-surface)));transition-timing-function:var(--ax-sys-transition-timing-function);transition-duration:var(--ax-sys-transition-duration);transition-property:width}ax-side-menu.ax-look-with-line .ax-side-item:hover:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled),ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){color:rgba(var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface)))}ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled),ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled){color:rgba(var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface)))}ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled):before,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled):before{content:\"\";height:100%;position:absolute;width:var(--ax-comp-side-menu-indicator-size);background-color:rgba(var(--ax-comp-side-menu-indicator-active-color, var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface))))}ax-side-menu.ax-look-with-line .ax-side-children,ax-side-menu.ax-look-with-line-color .ax-side-children{gap:0}ax-side-menu.ax-look-with-line .ax-side-children ax-side-menu-item:first-child,ax-side-menu.ax-look-with-line-color .ax-side-children ax-side-menu-item:first-child{padding-top:0}ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface)),.05)}ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled){background-color:rgba(var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface)),.1)}html[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon:before{-moz-transform:scale(-1,1);-webkit-transform:scale(-1,1);-o-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scaleX(-1)}html[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{transform:rotate(-90deg)!important}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXSideMenuItemComponent, selector: "ax-side-menu-item", inputs: ["disabled", "text", "active", "isLoading", "isCollapsed", "href", "routerLink", "routerLinkActive", "routerLinkActiveOptions", "target"], outputs: ["textChange", "activeChange", "isLoadingChange", "isCollapsedChange", "onClick"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXSideMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXSideMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-side-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgFor, NgTemplateOutlet, AXDecoratorGenericComponent, AXSideMenuItemComponent, RouterLink, RouterLinkActive, AXDecoratorIconComponent], template: "<ng-content select=\"ax-side-menu-item,ax-title,ng-container,ng-content\"></ng-content>\n\n<ng-container\n  *ngFor=\"let node of items()\"\n  [ngTemplateOutlet]=\"Recursion\"\n  [ngTemplateOutletContext]=\"{ $implicit: node }\"\n>\n</ng-container>\n<ng-template #Recursion let-item>\n  @if (item.title) {\n    <ax-title>{{ item.title }}</ax-title>\n  }\n  @if (item.routerLink) {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [target]=\"item.target\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [routerLink]=\"item.routerLink\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [routerLinkActive]=\"item.routerLinkActive\"\n      [routerLinkActiveOptions]=\"item.routerLinkActiveOptions\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  } @else if (item.href) {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [href]=\"item.href\"\n      [target]=\"item.target\"\n      [active]=\"item.active\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [isCollapsed]=\"item.isCollapsed\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  } @else {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [active]=\"item.active\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [isCollapsed]=\"item.isCollapsed\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  }\n\n  <ng-template #sideMenuItemContent>\n    <ax-prefix>\n      @if (item.icon) {\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      }\n    </ax-prefix>\n    @if (item.data) {\n      <ax-text>{{ item.data }}</ax-text>\n    }\n    @if (item.suffixText) {\n      <ax-suffix>\n        <ax-text>{{ item.suffixText }}</ax-text>\n      </ax-suffix>\n    }\n    <ng-container\n      *ngFor=\"let child of item.items\"\n      [ngTemplateOutlet]=\"Recursion\"\n      [ngTemplateOutletContext]=\"{ $implicit: child }\"\n    ></ng-container>\n  </ng-template>\n</ng-template>\n", styles: ["ax-side-menu{--ax-comp-side-menu-indicator-size: 2px}ax-side-menu{width:100%;display:flex;color:inherit;-webkit-user-select:none;user-select:none;flex-direction:column;gap:var(--ax-comp-side-menu-gap, .5rem);font-size:var(--ax-comp-side-menu-font-size, .875rem);line-height:var(--ax-comp-side-menu-line-height, 1.25rem)}ax-side-menu>ax-title{margin-block:.5rem;display:block;padding-inline-start:.75rem;padding-inline-end:.75rem;padding-top:.25rem;padding-bottom:.25rem;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:.5}ax-side-menu ax-side-menu-item ax-title{margin-block:.5rem;margin-top:.5rem;display:block;padding-inline-start:.75rem;padding-inline-end:.75rem;padding-top:.25rem;padding-bottom:.25rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:var(--ax-comp-side-menu-title-opacity, .5);font-size:var(--ax-comp-side-menu-title-font-size, .75rem)}ax-side-menu ax-side-menu-item ax-divider{width:100%;display:block;height:var(--ax-comp-side-menu-divider-height, 1px);margin-top:var(--ax-comp-side-menu-divider-margin-y, .25rem);margin-bottom:var(--ax-comp-side-menu-divider-margin-y, .25rem);background-color:rgba(var(--ax-comp-side-menu-divider-bg-color, var(--ax-sys-color-border-lightest-surface)))}ax-side-menu ax-side-menu-item .ax-side-item{padding-inline:var(--ax-comp-side-menu-item-padding-x, 1rem);padding-block:var(--ax-comp-side-menu-item-padding-y, .5rem);font-size:inherit;position:relative;display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:.75rem;overflow:hidden;font-weight:500}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{cursor:not-allowed;opacity:var(--ax-comp-side-menu-item-disabled-opacity, .5)}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled .ax-ripple{opacity:0}ax-side-menu ax-side-menu-item .ax-side-item:hover:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled) ax-loading ax-loading-spinner span,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled) ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-comp-side-menu-text-color, var(--ax-sys-color-on-primary-surface)))}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side,ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{display:flex;align-items:center}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side{gap:.5rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{gap:.5rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{display:block}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{transform:rotate(90deg)}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-comp-side-menu-text-color, var(--ax-sys-color-on-primary-surface)))}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:rgba(var(--ax-comp-side-menu-ripple-color, var(--ax-sys-color-on-surface)),.3)!important}ax-side-menu ax-side-menu-item .ax-side-children{overflow:hidden;padding-inline-start:1.25rem;display:flex;flex-direction:column;gap:var(--ax-comp-side-menu-children-gap, .5rem)}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child{padding-top:var(--ax-comp-side-menu-children-gap, .5rem)}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child ax-title{margin-top:1em}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item .ax-side-item{font-weight:400}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item{border-radius:var(--ax-comp-side-menu-pills-border-radius, var(--ax-sys-border-radius))}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover.ax-state-disabled){color:rgba(var(--ax-comp-side-menu-hover-text-color, var(--ax-sys-color-on-surface)));background-color:rgba(var(--ax-comp-side-menu-hover-bg-color, var(--ax-sys-color-surface)))}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled){color:rgba(var(--ax-comp-side-menu-active-text-color, var(--ax-sys-color-on-primary-surface)));background-color:rgba(var(--ax-comp-side-menu-active-bg-color, var(--ax-sys-color-primary-surface)))}ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color{gap:0}ax-side-menu.ax-look-with-line .ax-ripple,ax-side-menu.ax-look-with-line-color .ax-ripple{display:none}ax-side-menu.ax-look-with-line.ax-location-start .ax-side-children:before,ax-side-menu.ax-look-with-line.ax-location-start .ax-side-item:before,ax-side-menu.ax-look-with-line-color.ax-location-start .ax-side-children:before,ax-side-menu.ax-look-with-line-color.ax-location-start .ax-side-item:before{inset-inline-start:0;width:calc(var(--ax-comp-side-menu-indicator-size) / 2)}ax-side-menu.ax-look-with-line.ax-location-end .ax-side-children:before,ax-side-menu.ax-look-with-line.ax-location-end .ax-side-item:before,ax-side-menu.ax-look-with-line-color.ax-location-end .ax-side-children:before,ax-side-menu.ax-look-with-line-color.ax-location-end .ax-side-item:before{inset-inline-end:0;width:calc(var(--ax-comp-side-menu-indicator-size) / 2)}ax-side-menu.ax-look-with-line ax-side-menu-item,ax-side-menu.ax-look-with-line .ax-side-children,ax-side-menu.ax-look-with-line .ax-side-item,ax-side-menu.ax-look-with-line-color ax-side-menu-item,ax-side-menu.ax-look-with-line-color .ax-side-children,ax-side-menu.ax-look-with-line-color .ax-side-item{position:relative}ax-side-menu.ax-look-with-line ax-side-menu-item:before,ax-side-menu.ax-look-with-line .ax-side-children:before,ax-side-menu.ax-look-with-line .ax-side-item:before,ax-side-menu.ax-look-with-line-color ax-side-menu-item:before,ax-side-menu.ax-look-with-line-color .ax-side-children:before,ax-side-menu.ax-look-with-line-color .ax-side-item:before{content:\"\";height:100%;position:absolute;background-color:rgba(var(--ax-comp-side-menu-indicator-color, var(--ax-sys-color-border-lightest-surface)));transition-timing-function:var(--ax-sys-transition-timing-function);transition-duration:var(--ax-sys-transition-duration);transition-property:width}ax-side-menu.ax-look-with-line .ax-side-item:hover:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled),ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){color:rgba(var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface)))}ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled),ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled){color:rgba(var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface)))}ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled):before,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled):before{content:\"\";height:100%;position:absolute;width:var(--ax-comp-side-menu-indicator-size);background-color:rgba(var(--ax-comp-side-menu-indicator-active-color, var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface))))}ax-side-menu.ax-look-with-line .ax-side-children,ax-side-menu.ax-look-with-line-color .ax-side-children{gap:0}ax-side-menu.ax-look-with-line .ax-side-children ax-side-menu-item:first-child,ax-side-menu.ax-look-with-line-color .ax-side-children ax-side-menu-item:first-child{padding-top:0}ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface)),.05)}ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active.ax-state-disabled){background-color:rgba(var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface)),.1)}html[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon:before{-moz-transform:scale(-1,1);-webkit-transform:scale(-1,1);-o-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scaleX(-1)}html[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{transform:rotate(-90deg)!important}\n"] }]
         }], propDecorators: { __hostClass: [{
@@ -152,10 +152,10 @@ class AXOutlineSideMenuDirective {
         this.sideMenu.children().forEach((item) => item.active.set(false));
         this.sideMenu.children()[activeIndex].active.set(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXOutlineSideMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.7", type: AXOutlineSideMenuDirective, isStandalone: true, selector: "[axOutlineSideMenu]", providers: [AXUnsubscriber], exportAs: ["axOutlineSideMenu"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXOutlineSideMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: AXOutlineSideMenuDirective, isStandalone: true, selector: "[axOutlineSideMenu]", providers: [AXUnsubscriber], exportAs: ["axOutlineSideMenu"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXOutlineSideMenuDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXOutlineSideMenuDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axOutlineSideMenu]',
@@ -167,11 +167,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
 const COMPONENT = [AXSideMenuComponent, AXSideMenuItemComponent, AXOutlineSideMenuDirective];
 const MODULES = [CommonModule, AXCommonModule, AXRippleDirective, AXLoadingModule, AXTranslationModule, RouterLink, RouterLinkActive, AXDecoratorModule];
 class AXSideMenuModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXSideMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: AXSideMenuModule, imports: [CommonModule, AXCommonModule, AXRippleDirective, AXLoadingModule, AXTranslationModule, RouterLink, RouterLinkActive, AXDecoratorModule, AXSideMenuComponent, AXSideMenuItemComponent, AXOutlineSideMenuDirective], exports: [AXSideMenuComponent, AXSideMenuItemComponent, AXOutlineSideMenuDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXSideMenuModule, imports: [CommonModule, AXCommonModule, AXLoadingModule, AXTranslationModule, AXDecoratorModule, AXSideMenuComponent, AXSideMenuItemComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXSideMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXSideMenuModule, imports: [CommonModule, AXCommonModule, AXRippleDirective, AXLoadingModule, AXTranslationModule, RouterLink, RouterLinkActive, AXDecoratorModule, AXSideMenuComponent, AXSideMenuItemComponent, AXOutlineSideMenuDirective], exports: [AXSideMenuComponent, AXSideMenuItemComponent, AXOutlineSideMenuDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXSideMenuModule, imports: [CommonModule, AXCommonModule, AXLoadingModule, AXTranslationModule, AXDecoratorModule, AXSideMenuComponent, AXSideMenuItemComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXSideMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXSideMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],

package/fesm2022/acorex-components-skeleton.mjs

@@ -1,6 +1,6 @@
 import { MXBaseComponent } from '@acorex/components/common';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, Input, HostBinding, NgModule } from '@angular/core';
+import { HostBinding, Input, ViewEncapsulation, Component, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 /**
@@ -21,10 +21,10 @@ class AXSkeletonComponent extends MXBaseComponent {
     get __hostClass() {
         return `ax-skeleton ${this.animated ? 'ax-skeleton-animate' : ''}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXSkeletonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: AXSkeletonComponent, isStandalone: true, selector: "ax-skeleton", inputs: { animated: "animated" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["ax-skeleton{--ax-comp-skeleton-bg-color: var(--ax-sys-color-dark);--ax-comp-skeleton-bg-opacity: .2}.ax-dark ax-skeleton{--ax-comp-skeleton-bg-color: var(--ax-sys-color-light)}ax-skeleton.ax-skeleton{position:relative;display:block;overflow:hidden;background-color:rgba(var(--ax-comp-skeleton-bg-color),var(--ax-comp-skeleton-bg-opacity))}ax-skeleton.ax-skeleton-animate:before{position:absolute;inset-inline-start:-13rem;top:0;display:block;height:100%;width:var(--ax-comp-skeleton-line-width, 14rem);content:\"\";background:linear-gradient(to right,transparent 0%,rgba(var(--ax-comp-skeleton-bg-color),var(--ax-comp-skeleton-bg-opacity)) 50%,transparent 100%);animation:load 1s cubic-bezier(.4,0,.2,1) infinite}@keyframes load{0%{inset-inline-start:-13rem}to{inset-inline-start:100%}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXSkeletonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: AXSkeletonComponent, isStandalone: true, selector: "ax-skeleton", inputs: { animated: "animated" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["ax-skeleton{--ax-comp-skeleton-bg-color: var(--ax-sys-color-dark);--ax-comp-skeleton-bg-opacity: .2}.ax-dark ax-skeleton{--ax-comp-skeleton-bg-color: var(--ax-sys-color-light)}ax-skeleton.ax-skeleton{position:relative;display:block;overflow:hidden;background-color:rgba(var(--ax-comp-skeleton-bg-color),var(--ax-comp-skeleton-bg-opacity))}ax-skeleton.ax-skeleton-animate:before{position:absolute;inset-inline-start:-13rem;top:0;display:block;height:100%;width:var(--ax-comp-skeleton-line-width, 14rem);content:\"\";background:linear-gradient(to right,transparent 0%,rgba(var(--ax-comp-skeleton-bg-color),var(--ax-comp-skeleton-bg-opacity)) 50%,transparent 100%);animation:load 1s cubic-bezier(.4,0,.2,1) infinite}@keyframes load{0%{inset-inline-start:-13rem}to{inset-inline-start:100%}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXSkeletonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXSkeletonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-skeleton', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, styles: ["ax-skeleton{--ax-comp-skeleton-bg-color: var(--ax-sys-color-dark);--ax-comp-skeleton-bg-opacity: .2}.ax-dark ax-skeleton{--ax-comp-skeleton-bg-color: var(--ax-sys-color-light)}ax-skeleton.ax-skeleton{position:relative;display:block;overflow:hidden;background-color:rgba(var(--ax-comp-skeleton-bg-color),var(--ax-comp-skeleton-bg-opacity))}ax-skeleton.ax-skeleton-animate:before{position:absolute;inset-inline-start:-13rem;top:0;display:block;height:100%;width:var(--ax-comp-skeleton-line-width, 14rem);content:\"\";background:linear-gradient(to right,transparent 0%,rgba(var(--ax-comp-skeleton-bg-color),var(--ax-comp-skeleton-bg-opacity)) 50%,transparent 100%);animation:load 1s cubic-bezier(.4,0,.2,1) infinite}@keyframes load{0%{inset-inline-start:-13rem}to{inset-inline-start:100%}}\n"] }]
         }], propDecorators: { animated: [{
@@ -35,11 +35,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
             }] } });
 
 class AXSkeletonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: AXSkeletonModule, imports: [CommonModule, AXSkeletonComponent], exports: [AXSkeletonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXSkeletonModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXSkeletonModule, imports: [CommonModule, AXSkeletonComponent], exports: [AXSkeletonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXSkeletonModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXSkeletonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXSkeletonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, AXSkeletonComponent],

package/fesm2022/acorex-components-slider.mjs

@@ -1,8 +1,8 @@
 import { MXValueComponent, MXColorComponent, AXValuableComponent, AXCommonModule } from '@acorex/components/common';
 import * as i0 from '@angular/core';
-import { output, forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, HostBinding, NgModule } from '@angular/core';
+import { output, forwardRef, HostBinding, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { classes } from 'polytype';
 import { CommonModule } from '@angular/common';
 
@@ -127,8 +127,8 @@ class AXSliderComponent extends classes((MXValueComponent), MXColorComponent) {
     get __hostClassDisabled() {
         return this.disabled;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXSliderComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: AXSliderComponent, isStandalone: true, selector: "ax-slider", inputs: { readonly: "readonly", disabled: "disabled", value: "value", name: "name", color: "color", minValue: "minValue", maxValue: "maxValue", step: "step", direction: "direction" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onChange: "onChange", onClick: "onClick" }, host: { properties: { "class": "this.__hostClass", "class.ax-state-disabled": "this.__hostClassDisabled" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXSliderComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: AXSliderComponent, isStandalone: true, selector: "ax-slider", inputs: { readonly: "readonly", disabled: "disabled", value: "value", name: "name", color: "color", minValue: "minValue", maxValue: "maxValue", step: "step", direction: "direction" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onChange: "onChange", onClick: "onClick" }, host: { properties: { "class": "this.__hostClass", "class.ax-state-disabled": "this.__hostClassDisabled" } }, providers: [
             { provide: AXValuableComponent, useExisting: AXSliderComponent },
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -137,7 +137,7 @@ class AXSliderComponent extends classes((MXValueComponent), MXColorComponent) {
             },
         ], usesInheritance: true, ngImport: i0, template: "<input\n  (click)=\"clickHandler($event)\"\n  type=\"range\"\n  [min]=\"minValue\"\n  [max]=\"maxValue\"\n  [ngModel]=\"value\"\n  (ngModelChange)=\"_handleModelChange($event)\"\n  (blur)=\"emitOnBlurEvent($event)\"\n  (focus)=\"emitOnFocusEvent($event)\"\n  [step]=\"step\"\n  [disabled]=\"disabled || readonly\"\n  [readonly]=\"readonly\"\n/>\n", styles: ["ax-slider{--ax-current-value: 0%;width:100%}ax-slider input{height:.5rem;width:100%;-webkit-appearance:none;appearance:none;border-radius:9999px;background-color:rgba(var(--ax-sys-color-surface));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-slider input::-webkit-slider-thumb{height:1.5rem;width:1.5rem;cursor:pointer;-webkit-appearance:none;appearance:none;border-radius:9999px;border-width:1px;border-style:solid;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:rgba(var(--ax-sys-color-light-surface));--ax-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--ax-shadow-colored: 0 10px 15px -3px var(--ax-shadow-color), 0 4px 6px -4px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow)}ax-slider input::-moz-range-thumb{height:1.5rem;width:1.5rem;cursor:pointer;-webkit-appearance:none;appearance:none;border-radius:9999px;border-width:1px;border-style:solid;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:rgba(var(--ax-sys-color-light-surface));--ax-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--ax-shadow-colored: 0 10px 15px -3px var(--ax-shadow-color), 0 4px 6px -4px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow)}ax-slider.ax-vertical input[type=range]{transform:rotate(270deg);-moz-transform:rotate(270deg);appearance:slider-vertical;-webkit-appearance:slider-vertical;writing-mode:bt-lr}ax-slider.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-slider.ax-primary-solid input{background:linear-gradient(to right,rgba(var(--ax-sys-color-primary-500)) 0%,rgba(var(--ax-sys-color-primary-500)) var(--ax-current-value),rgba(var(--ax-sys-color-surface)) var(--ax-current-value),rgba(var(--ax-sys-color-surface)) 100%)}ax-slider.ax-secondary-solid input{background:linear-gradient(to right,rgba(var(--ax-sys-color-secondary-500)) 0%,rgba(var(--ax-sys-color-secondary-500)) var(--ax-current-value),rgba(var(--ax-sys-color-surface)) var(--ax-current-value),rgba(var(--ax-sys-color-surface)) 100%)}ax-slider.ax-success-solid input{background:linear-gradient(to right,rgba(var(--ax-sys-color-success-500)) 0%,rgba(var(--ax-sys-color-success-500)) var(--ax-current-value),rgba(var(--ax-sys-color-surface)) var(--ax-current-value),rgba(var(--ax-sys-color-surface)) 100%)}ax-slider.ax-warning-solid input{background:linear-gradient(to right,rgba(var(--ax-sys-color-warning-500)) 0%,rgba(var(--ax-sys-color-warning-500)) var(--ax-current-value),rgba(var(--ax-sys-color-surface)) var(--ax-current-value),rgba(var(--ax-sys-color-surface)) 100%)}ax-slider.ax-danger-solid input{background:linear-gradient(to right,rgba(var(--ax-sys-color-danger-500)) 0%,rgba(var(--ax-sys-color-danger-500)) var(--ax-current-value),rgba(var(--ax-sys-color-surface)) var(--ax-current-value),rgba(var(--ax-sys-color-surface)) 100%)}ax-slider.ax-ghost-solid input{background:linear-gradient(to right,rgba(var(--ax-color-ghost-fore)) 0%,rgba(var(--ax-color-ghost-fore)) var(--ax-current-value),rgba(var(--ax-sys-color-surface)) var(--ax-current-value),rgba(var(--ax-sys-color-surface)) 100%)}.ax-dark ax-slider.ax-primary-solid input{background:linear-gradient(to right,rgba(var(--ax-sys-color-primary-500),70%) 0%,rgba(var(--ax-sys-color-primary-500),70%) var(--ax-current-value),rgba(var(--ax-sys-color-surface)) var(--ax-current-value),rgba(var(--ax-sys-color-surface)) 100%)}.ax-dark ax-slider.ax-secondary-solid input{background:linear-gradient(to right,rgba(var(--ax-sys-color-secondary-500),70%) 0%,rgba(var(--ax-sys-color-secondary-500),70%) var(--ax-current-value),rgba(var(--ax-sys-color-surface)) var(--ax-current-value),rgba(var(--ax-sys-color-surface)) 100%)}.ax-dark ax-slider.ax-success-solid input{background:linear-gradient(to right,rgba(var(--ax-sys-color-success-500),70%) 0%,rgba(var(--ax-sys-color-success-500),70%) var(--ax-current-value),rgba(var(--ax-sys-color-surface)) var(--ax-current-value),rgba(var(--ax-sys-color-surface)) 100%)}.ax-dark ax-slider.ax-warning-solid input{background:linear-gradient(to right,rgba(var(--ax-sys-color-warning-500),70%) 0%,rgba(var(--ax-sys-color-warning-500),70%) var(--ax-current-value),rgba(var(--ax-sys-color-surface)) var(--ax-current-value),rgba(var(--ax-sys-color-surface)) 100%)}.ax-dark ax-slider.ax-danger-solid input{background:linear-gradient(to right,rgba(var(--ax-sys-color-danger-500),70%) 0%,rgba(var(--ax-sys-color-danger-500),70%) var(--ax-current-value),rgba(var(--ax-sys-color-surface)) var(--ax-current-value),rgba(var(--ax-sys-color-surface)) 100%)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXSliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXSliderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-slider', changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['readonly', 'disabled', 'value', 'name', 'color'], outputs: ['valueChange', 'onValueChanged', 'readonlyChange', 'disabledChange', 'onChange'], encapsulation: ViewEncapsulation.None, providers: [
                         { provide: AXValuableComponent, useExisting: AXSliderComponent },
@@ -166,11 +166,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
 const COMPONENT = [AXSliderComponent];
 const MODULES = [CommonModule, AXCommonModule, FormsModule];
 class AXSliderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: AXSliderModule, imports: [CommonModule, AXCommonModule, FormsModule, AXSliderComponent], exports: [AXSliderComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXSliderModule, imports: [MODULES, COMPONENT] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXSliderModule, imports: [CommonModule, AXCommonModule, FormsModule, AXSliderComponent], exports: [AXSliderComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXSliderModule, imports: [MODULES, COMPONENT] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXSliderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXSliderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],

package/fesm2022/acorex-components-sliding-item.mjs

@@ -1,6 +1,6 @@
 import { AXDecoratorGenericComponent, AXDecoratorModule } from '@acorex/components/decorators';
 import * as i0 from '@angular/core';
-import { input, output, Component, ViewEncapsulation, HostBinding, HostListener, viewChild, contentChildren, ElementRef, signal, effect, afterNextRender, NgModule } from '@angular/core';
+import { input, output, HostListener, HostBinding, ViewEncapsulation, Component, viewChild, contentChildren, ElementRef, signal, effect, afterNextRender, NgModule } from '@angular/core';
 import { AXSlidingItemDirective, AXSlidingItemDirectiveModule } from '@acorex/cdk/sliding-item';
 
 class AXSlidingItemPrefixComponent {
@@ -15,10 +15,10 @@ class AXSlidingItemPrefixComponent {
     _onclick() {
         this.onClick.emit({ component: this });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXSlidingItemPrefixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.7", type: AXSlidingItemPrefixComponent, isStandalone: true, selector: "ax-sliding-item-prefix", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, host: { listeners: { "click": "_onclick()" }, properties: { "class": "this.__hostClass" } }, ngImport: i0, template: "<ng-content #select=\"ax-icon\"></ng-content>\n<ax-text>{{ text() }}</ax-text>\n", styles: [""], dependencies: [{ 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" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXSlidingItemPrefixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.8", type: AXSlidingItemPrefixComponent, isStandalone: true, selector: "ax-sliding-item-prefix", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, host: { listeners: { "click": "_onclick()" }, properties: { "class": "this.__hostClass" } }, ngImport: i0, template: "<ng-content #select=\"ax-icon\"></ng-content>\n<ax-text>{{ text() }}</ax-text>\n", styles: [""], dependencies: [{ 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" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXSlidingItemPrefixComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXSlidingItemPrefixComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-sliding-item-prefix', encapsulation: ViewEncapsulation.None, imports: [AXDecoratorGenericComponent], template: "<ng-content #select=\"ax-icon\"></ng-content>\n<ax-text>{{ text() }}</ax-text>\n" }]
         }], propDecorators: { __hostClass: [{
@@ -41,10 +41,10 @@ class AXSlidingItemSuffixComponent {
     _onclick() {
         this.onClick.emit({ component: this });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXSlidingItemSuffixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.7", type: AXSlidingItemSuffixComponent, isStandalone: true, selector: "ax-sliding-item-suffix", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, host: { listeners: { "click": "_onclick()" }, properties: { "class": "this.__hostClass" } }, ngImport: i0, template: "<ng-content #select=\"ax-icon\"></ng-content>\n<ax-text>{{ text() }}</ax-text>\n", styles: [""], dependencies: [{ 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" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXSlidingItemSuffixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.8", type: AXSlidingItemSuffixComponent, isStandalone: true, selector: "ax-sliding-item-suffix", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, host: { listeners: { "click": "_onclick()" }, properties: { "class": "this.__hostClass" } }, ngImport: i0, template: "<ng-content #select=\"ax-icon\"></ng-content>\n<ax-text>{{ text() }}</ax-text>\n", styles: [""], dependencies: [{ 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" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXSlidingItemSuffixComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXSlidingItemSuffixComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-sliding-item-suffix', encapsulation: ViewEncapsulation.None, imports: [AXDecoratorGenericComponent], template: "<ng-content #select=\"ax-icon\"></ng-content>\n<ax-text>{{ text() }}</ax-text>\n" }]
         }], propDecorators: { __hostClass: [{
@@ -130,10 +130,10 @@ class AXSlidingItemComponent {
     #effect;
     #effect2;
     #init;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXSlidingItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.7", type: AXSlidingItemComponent, isStandalone: true, selector: "ax-sliding-item", queries: [{ propertyName: "itemPrefix", predicate: AXSlidingItemPrefixComponent, read: ElementRef, isSignal: true }, { propertyName: "itemSuffix", predicate: AXSlidingItemSuffixComponent, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "slidingItem", first: true, predicate: AXSlidingItemDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div #itemPrefix class=\"ax-sliding-item-container\">\n  <ng-content select=\"ax-sliding-item-prefix\"></ng-content>\n</div>\n\n<div axSlidingItem>\n  <ng-content select=\"ax-content\"> </ng-content>\n</div>\n\n<div #itemSuffix class=\"ax-sliding-item-container\">\n  <ng-content select=\"ax-sliding-item-suffix\"></ng-content>\n</div>\n", styles: ["ax-sliding-item{--ax-comp-sliding-item-content-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-sliding-item-content-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-sliding-item-primary-btn-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-sliding-item-primary-btn-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-sliding-item-primary-btn-active-bg-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-sliding-item-primary-btn-active-text-color: var(--ax-sys-color-on-primary-darker-surface);--ax-comp-sliding-item-primary-btn-hover-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-sliding-item-primary-btn-hover-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-sliding-item-secondary-btn-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-sliding-item-secondary-btn-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-sliding-item-secondary-btn-active-bg-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-sliding-item-secondary-btn-active-text-color: var(--ax-sys-color-on-secondary-darker-surface);--ax-comp-sliding-item-secondary-btn-hover-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-sliding-item-secondary-btn-hover-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-sliding-item-success-btn-bg-color: var(--ax-sys-color-success-surface);--ax-comp-sliding-item-success-btn-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-sliding-item-success-btn-active-bg-color: var(--ax-sys-color-success-darker-surface);--ax-comp-sliding-item-success-btn-active-text-color: var(--ax-sys-color-on-success-darker-surface);--ax-comp-sliding-item-success-btn-hover-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-sliding-item-success-btn-hover-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-sliding-item-warning-btn-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-sliding-item-warning-btn-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-sliding-item-warning-btn-active-bg-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-sliding-item-warning-btn-active-text-color: var(--ax-sys-color-on-warning-darker-surface);--ax-comp-sliding-item-warning-btn-hover-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-sliding-item-warning-btn-hover-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-sliding-item-danger-btn-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-sliding-item-danger-btn-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-sliding-item-danger-btn-active-bg-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-sliding-item-danger-btn-active-text-color: var(--ax-sys-color-on-danger-darker-surface);--ax-comp-sliding-item-danger-btn-hover-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-sliding-item-danger-btn-hover-text-color: var(--ax-sys-color-on-danger-dark-surface)}ax-sliding-item{width:100%;height:100%}ax-sliding-item .ax-sliding-item-container{display:flex}ax-sliding-item ax-content{width:100%;height:100%;display:flex;align-items:center;background-color:rgba(var(--ax-comp-sliding-item-content-bg-color));color:rgba(var(--ax-comp-sliding-item-content-text-color));padding:1rem}ax-sliding-item ax-sliding-item-prefix,ax-sliding-item ax-sliding-item-suffix{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:4rem;aspect-ratio:1;cursor:pointer;transition-property:background-color,color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-sliding-item ax-sliding-item-prefix.ax-primary,ax-sliding-item ax-sliding-item-suffix.ax-primary{background-color:rgba(var(--ax-comp-sliding-item-primary-btn-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-primary ax-text,ax-sliding-item ax-sliding-item-prefix.ax-primary ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-primary ax-text,ax-sliding-item ax-sliding-item-suffix.ax-primary ax-icon{color:rgba(var(--ax-comp-sliding-item-primary-btn-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-primary:hover,ax-sliding-item ax-sliding-item-suffix.ax-primary:hover{background-color:rgba(var(--ax-comp-sliding-item-primary-btn-hover-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-primary:hover ax-text,ax-sliding-item ax-sliding-item-prefix.ax-primary:hover ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-primary:hover ax-text,ax-sliding-item ax-sliding-item-suffix.ax-primary:hover ax-icon{color:rgba(var(--ax-comp-sliding-item-primary-btn-hover-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-primary:active,ax-sliding-item ax-sliding-item-suffix.ax-primary:active{background-color:rgba(var(--ax-comp-sliding-item-primary-btn-active-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-primary:active ax-text,ax-sliding-item ax-sliding-item-prefix.ax-primary:active ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-primary:active ax-text,ax-sliding-item ax-sliding-item-suffix.ax-primary:active ax-icon{color:rgba(var(--ax-comp-sliding-item-primary-btn-active-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-secondary,ax-sliding-item ax-sliding-item-suffix.ax-secondary{background-color:rgba(var(--ax-comp-sliding-item-secondary-btn-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-secondary ax-text,ax-sliding-item ax-sliding-item-prefix.ax-secondary ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-secondary ax-text,ax-sliding-item ax-sliding-item-suffix.ax-secondary ax-icon{color:rgba(var(--ax-comp-sliding-item-secondary-btn-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-secondary:hover,ax-sliding-item ax-sliding-item-suffix.ax-secondary:hover{background-color:rgba(var(--ax-comp-sliding-item-secondary-btn-hover-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-secondary:hover ax-text,ax-sliding-item ax-sliding-item-prefix.ax-secondary:hover ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-secondary:hover ax-text,ax-sliding-item ax-sliding-item-suffix.ax-secondary:hover ax-icon{color:rgba(var(--ax-comp-sliding-item-secondary-btn-hover-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-secondary:active,ax-sliding-item ax-sliding-item-suffix.ax-secondary:active{background-color:rgba(var(--ax-comp-sliding-item-secondary-btn-active-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-secondary:active ax-text,ax-sliding-item ax-sliding-item-prefix.ax-secondary:active ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-secondary:active ax-text,ax-sliding-item ax-sliding-item-suffix.ax-secondary:active ax-icon{color:rgba(var(--ax-comp-sliding-item-secondary-btn-active-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-success,ax-sliding-item ax-sliding-item-suffix.ax-success{background-color:rgba(var(--ax-comp-sliding-item-success-btn-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-success ax-text,ax-sliding-item ax-sliding-item-prefix.ax-success ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-success ax-text,ax-sliding-item ax-sliding-item-suffix.ax-success ax-icon{color:rgba(var(--ax-comp-sliding-item-success-btn-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-success:hover,ax-sliding-item ax-sliding-item-suffix.ax-success:hover{background-color:rgba(var(--ax-comp-sliding-item-success-btn-hover-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-success:hover ax-text,ax-sliding-item ax-sliding-item-prefix.ax-success:hover ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-success:hover ax-text,ax-sliding-item ax-sliding-item-suffix.ax-success:hover ax-icon{color:rgba(var(--ax-comp-sliding-item-success-btn-hover-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-success:active,ax-sliding-item ax-sliding-item-suffix.ax-success:active{background-color:rgba(var(--ax-comp-sliding-item-success-btn-active-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-success:active ax-text,ax-sliding-item ax-sliding-item-prefix.ax-success:active ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-success:active ax-text,ax-sliding-item ax-sliding-item-suffix.ax-success:active ax-icon{color:rgba(var(--ax-comp-sliding-item-success-btn-active-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-warning,ax-sliding-item ax-sliding-item-suffix.ax-warning{background-color:rgba(var(--ax-comp-sliding-item-warning-btn-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-warning ax-text,ax-sliding-item ax-sliding-item-prefix.ax-warning ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-warning ax-text,ax-sliding-item ax-sliding-item-suffix.ax-warning ax-icon{color:rgba(var(--ax-comp-sliding-item-warning-btn-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-warning:hover,ax-sliding-item ax-sliding-item-suffix.ax-warning:hover{background-color:rgba(var(--ax-comp-sliding-item-warning-btn-hover-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-warning:hover ax-text,ax-sliding-item ax-sliding-item-prefix.ax-warning:hover ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-warning:hover ax-text,ax-sliding-item ax-sliding-item-suffix.ax-warning:hover ax-icon{color:rgba(var(--ax-comp-sliding-item-warning-btn-hover-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-warning:active,ax-sliding-item ax-sliding-item-suffix.ax-warning:active{background-color:rgba(var(--ax-comp-sliding-item-warning-btn-active-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-warning:active ax-text,ax-sliding-item ax-sliding-item-prefix.ax-warning:active ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-warning:active ax-text,ax-sliding-item ax-sliding-item-suffix.ax-warning:active ax-icon{color:rgba(var(--ax-comp-sliding-item-warning-btn-active-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-danger,ax-sliding-item ax-sliding-item-suffix.ax-danger{background-color:rgba(var(--ax-comp-sliding-item-danger-btn-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-danger ax-text,ax-sliding-item ax-sliding-item-prefix.ax-danger ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-danger ax-text,ax-sliding-item ax-sliding-item-suffix.ax-danger ax-icon{color:rgba(var(--ax-comp-sliding-item-danger-btn-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-danger:hover,ax-sliding-item ax-sliding-item-suffix.ax-danger:hover{background-color:rgba(var(--ax-comp-sliding-item-danger-btn-hover-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-danger:hover ax-text,ax-sliding-item ax-sliding-item-prefix.ax-danger:hover ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-danger:hover ax-text,ax-sliding-item ax-sliding-item-suffix.ax-danger:hover ax-icon{color:rgba(var(--ax-comp-sliding-item-danger-btn-hover-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-danger:active,ax-sliding-item ax-sliding-item-suffix.ax-danger:active{background-color:rgba(var(--ax-comp-sliding-item-danger-btn-active-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-danger:active ax-text,ax-sliding-item ax-sliding-item-prefix.ax-danger:active ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-danger:active ax-text,ax-sliding-item ax-sliding-item-suffix.ax-danger:active ax-icon{color:rgba(var(--ax-comp-sliding-item-danger-btn-active-text-color))}\n"], dependencies: [{ kind: "directive", type: AXSlidingItemDirective, selector: "[axSlidingItem]" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXSlidingItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.8", type: AXSlidingItemComponent, isStandalone: true, selector: "ax-sliding-item", queries: [{ propertyName: "itemPrefix", predicate: AXSlidingItemPrefixComponent, read: ElementRef, isSignal: true }, { propertyName: "itemSuffix", predicate: AXSlidingItemSuffixComponent, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "slidingItem", first: true, predicate: AXSlidingItemDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div #itemPrefix class=\"ax-sliding-item-container\">\n  <ng-content select=\"ax-sliding-item-prefix\"></ng-content>\n</div>\n\n<div axSlidingItem>\n  <ng-content select=\"ax-content\"> </ng-content>\n</div>\n\n<div #itemSuffix class=\"ax-sliding-item-container\">\n  <ng-content select=\"ax-sliding-item-suffix\"></ng-content>\n</div>\n", styles: ["ax-sliding-item{--ax-comp-sliding-item-content-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-sliding-item-content-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-sliding-item-primary-btn-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-sliding-item-primary-btn-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-sliding-item-primary-btn-active-bg-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-sliding-item-primary-btn-active-text-color: var(--ax-sys-color-on-primary-darker-surface);--ax-comp-sliding-item-primary-btn-hover-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-sliding-item-primary-btn-hover-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-sliding-item-secondary-btn-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-sliding-item-secondary-btn-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-sliding-item-secondary-btn-active-bg-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-sliding-item-secondary-btn-active-text-color: var(--ax-sys-color-on-secondary-darker-surface);--ax-comp-sliding-item-secondary-btn-hover-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-sliding-item-secondary-btn-hover-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-sliding-item-success-btn-bg-color: var(--ax-sys-color-success-surface);--ax-comp-sliding-item-success-btn-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-sliding-item-success-btn-active-bg-color: var(--ax-sys-color-success-darker-surface);--ax-comp-sliding-item-success-btn-active-text-color: var(--ax-sys-color-on-success-darker-surface);--ax-comp-sliding-item-success-btn-hover-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-sliding-item-success-btn-hover-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-sliding-item-warning-btn-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-sliding-item-warning-btn-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-sliding-item-warning-btn-active-bg-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-sliding-item-warning-btn-active-text-color: var(--ax-sys-color-on-warning-darker-surface);--ax-comp-sliding-item-warning-btn-hover-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-sliding-item-warning-btn-hover-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-sliding-item-danger-btn-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-sliding-item-danger-btn-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-sliding-item-danger-btn-active-bg-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-sliding-item-danger-btn-active-text-color: var(--ax-sys-color-on-danger-darker-surface);--ax-comp-sliding-item-danger-btn-hover-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-sliding-item-danger-btn-hover-text-color: var(--ax-sys-color-on-danger-dark-surface)}ax-sliding-item{width:100%;height:100%}ax-sliding-item .ax-sliding-item-container{display:flex}ax-sliding-item ax-content{width:100%;height:100%;display:flex;align-items:center;background-color:rgba(var(--ax-comp-sliding-item-content-bg-color));color:rgba(var(--ax-comp-sliding-item-content-text-color));padding:1rem}ax-sliding-item ax-sliding-item-prefix,ax-sliding-item ax-sliding-item-suffix{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:4rem;aspect-ratio:1;cursor:pointer;transition-property:background-color,color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-sliding-item ax-sliding-item-prefix.ax-primary,ax-sliding-item ax-sliding-item-suffix.ax-primary{background-color:rgba(var(--ax-comp-sliding-item-primary-btn-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-primary ax-text,ax-sliding-item ax-sliding-item-prefix.ax-primary ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-primary ax-text,ax-sliding-item ax-sliding-item-suffix.ax-primary ax-icon{color:rgba(var(--ax-comp-sliding-item-primary-btn-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-primary:hover,ax-sliding-item ax-sliding-item-suffix.ax-primary:hover{background-color:rgba(var(--ax-comp-sliding-item-primary-btn-hover-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-primary:hover ax-text,ax-sliding-item ax-sliding-item-prefix.ax-primary:hover ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-primary:hover ax-text,ax-sliding-item ax-sliding-item-suffix.ax-primary:hover ax-icon{color:rgba(var(--ax-comp-sliding-item-primary-btn-hover-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-primary:active,ax-sliding-item ax-sliding-item-suffix.ax-primary:active{background-color:rgba(var(--ax-comp-sliding-item-primary-btn-active-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-primary:active ax-text,ax-sliding-item ax-sliding-item-prefix.ax-primary:active ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-primary:active ax-text,ax-sliding-item ax-sliding-item-suffix.ax-primary:active ax-icon{color:rgba(var(--ax-comp-sliding-item-primary-btn-active-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-secondary,ax-sliding-item ax-sliding-item-suffix.ax-secondary{background-color:rgba(var(--ax-comp-sliding-item-secondary-btn-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-secondary ax-text,ax-sliding-item ax-sliding-item-prefix.ax-secondary ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-secondary ax-text,ax-sliding-item ax-sliding-item-suffix.ax-secondary ax-icon{color:rgba(var(--ax-comp-sliding-item-secondary-btn-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-secondary:hover,ax-sliding-item ax-sliding-item-suffix.ax-secondary:hover{background-color:rgba(var(--ax-comp-sliding-item-secondary-btn-hover-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-secondary:hover ax-text,ax-sliding-item ax-sliding-item-prefix.ax-secondary:hover ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-secondary:hover ax-text,ax-sliding-item ax-sliding-item-suffix.ax-secondary:hover ax-icon{color:rgba(var(--ax-comp-sliding-item-secondary-btn-hover-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-secondary:active,ax-sliding-item ax-sliding-item-suffix.ax-secondary:active{background-color:rgba(var(--ax-comp-sliding-item-secondary-btn-active-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-secondary:active ax-text,ax-sliding-item ax-sliding-item-prefix.ax-secondary:active ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-secondary:active ax-text,ax-sliding-item ax-sliding-item-suffix.ax-secondary:active ax-icon{color:rgba(var(--ax-comp-sliding-item-secondary-btn-active-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-success,ax-sliding-item ax-sliding-item-suffix.ax-success{background-color:rgba(var(--ax-comp-sliding-item-success-btn-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-success ax-text,ax-sliding-item ax-sliding-item-prefix.ax-success ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-success ax-text,ax-sliding-item ax-sliding-item-suffix.ax-success ax-icon{color:rgba(var(--ax-comp-sliding-item-success-btn-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-success:hover,ax-sliding-item ax-sliding-item-suffix.ax-success:hover{background-color:rgba(var(--ax-comp-sliding-item-success-btn-hover-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-success:hover ax-text,ax-sliding-item ax-sliding-item-prefix.ax-success:hover ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-success:hover ax-text,ax-sliding-item ax-sliding-item-suffix.ax-success:hover ax-icon{color:rgba(var(--ax-comp-sliding-item-success-btn-hover-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-success:active,ax-sliding-item ax-sliding-item-suffix.ax-success:active{background-color:rgba(var(--ax-comp-sliding-item-success-btn-active-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-success:active ax-text,ax-sliding-item ax-sliding-item-prefix.ax-success:active ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-success:active ax-text,ax-sliding-item ax-sliding-item-suffix.ax-success:active ax-icon{color:rgba(var(--ax-comp-sliding-item-success-btn-active-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-warning,ax-sliding-item ax-sliding-item-suffix.ax-warning{background-color:rgba(var(--ax-comp-sliding-item-warning-btn-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-warning ax-text,ax-sliding-item ax-sliding-item-prefix.ax-warning ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-warning ax-text,ax-sliding-item ax-sliding-item-suffix.ax-warning ax-icon{color:rgba(var(--ax-comp-sliding-item-warning-btn-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-warning:hover,ax-sliding-item ax-sliding-item-suffix.ax-warning:hover{background-color:rgba(var(--ax-comp-sliding-item-warning-btn-hover-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-warning:hover ax-text,ax-sliding-item ax-sliding-item-prefix.ax-warning:hover ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-warning:hover ax-text,ax-sliding-item ax-sliding-item-suffix.ax-warning:hover ax-icon{color:rgba(var(--ax-comp-sliding-item-warning-btn-hover-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-warning:active,ax-sliding-item ax-sliding-item-suffix.ax-warning:active{background-color:rgba(var(--ax-comp-sliding-item-warning-btn-active-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-warning:active ax-text,ax-sliding-item ax-sliding-item-prefix.ax-warning:active ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-warning:active ax-text,ax-sliding-item ax-sliding-item-suffix.ax-warning:active ax-icon{color:rgba(var(--ax-comp-sliding-item-warning-btn-active-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-danger,ax-sliding-item ax-sliding-item-suffix.ax-danger{background-color:rgba(var(--ax-comp-sliding-item-danger-btn-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-danger ax-text,ax-sliding-item ax-sliding-item-prefix.ax-danger ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-danger ax-text,ax-sliding-item ax-sliding-item-suffix.ax-danger ax-icon{color:rgba(var(--ax-comp-sliding-item-danger-btn-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-danger:hover,ax-sliding-item ax-sliding-item-suffix.ax-danger:hover{background-color:rgba(var(--ax-comp-sliding-item-danger-btn-hover-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-danger:hover ax-text,ax-sliding-item ax-sliding-item-prefix.ax-danger:hover ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-danger:hover ax-text,ax-sliding-item ax-sliding-item-suffix.ax-danger:hover ax-icon{color:rgba(var(--ax-comp-sliding-item-danger-btn-hover-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-danger:active,ax-sliding-item ax-sliding-item-suffix.ax-danger:active{background-color:rgba(var(--ax-comp-sliding-item-danger-btn-active-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-danger:active ax-text,ax-sliding-item ax-sliding-item-prefix.ax-danger:active ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-danger:active ax-text,ax-sliding-item ax-sliding-item-suffix.ax-danger:active ax-icon{color:rgba(var(--ax-comp-sliding-item-danger-btn-active-text-color))}\n"], dependencies: [{ kind: "directive", type: AXSlidingItemDirective, selector: "[axSlidingItem]" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXSlidingItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXSlidingItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-sliding-item', encapsulation: ViewEncapsulation.None, imports: [AXSlidingItemDirective], template: "<div #itemPrefix class=\"ax-sliding-item-container\">\n  <ng-content select=\"ax-sliding-item-prefix\"></ng-content>\n</div>\n\n<div axSlidingItem>\n  <ng-content select=\"ax-content\"> </ng-content>\n</div>\n\n<div #itemSuffix class=\"ax-sliding-item-container\">\n  <ng-content select=\"ax-sliding-item-suffix\"></ng-content>\n</div>\n", styles: ["ax-sliding-item{--ax-comp-sliding-item-content-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-sliding-item-content-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-sliding-item-primary-btn-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-sliding-item-primary-btn-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-sliding-item-primary-btn-active-bg-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-sliding-item-primary-btn-active-text-color: var(--ax-sys-color-on-primary-darker-surface);--ax-comp-sliding-item-primary-btn-hover-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-sliding-item-primary-btn-hover-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-sliding-item-secondary-btn-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-sliding-item-secondary-btn-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-sliding-item-secondary-btn-active-bg-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-sliding-item-secondary-btn-active-text-color: var(--ax-sys-color-on-secondary-darker-surface);--ax-comp-sliding-item-secondary-btn-hover-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-sliding-item-secondary-btn-hover-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-sliding-item-success-btn-bg-color: var(--ax-sys-color-success-surface);--ax-comp-sliding-item-success-btn-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-sliding-item-success-btn-active-bg-color: var(--ax-sys-color-success-darker-surface);--ax-comp-sliding-item-success-btn-active-text-color: var(--ax-sys-color-on-success-darker-surface);--ax-comp-sliding-item-success-btn-hover-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-sliding-item-success-btn-hover-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-sliding-item-warning-btn-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-sliding-item-warning-btn-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-sliding-item-warning-btn-active-bg-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-sliding-item-warning-btn-active-text-color: var(--ax-sys-color-on-warning-darker-surface);--ax-comp-sliding-item-warning-btn-hover-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-sliding-item-warning-btn-hover-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-sliding-item-danger-btn-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-sliding-item-danger-btn-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-sliding-item-danger-btn-active-bg-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-sliding-item-danger-btn-active-text-color: var(--ax-sys-color-on-danger-darker-surface);--ax-comp-sliding-item-danger-btn-hover-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-sliding-item-danger-btn-hover-text-color: var(--ax-sys-color-on-danger-dark-surface)}ax-sliding-item{width:100%;height:100%}ax-sliding-item .ax-sliding-item-container{display:flex}ax-sliding-item ax-content{width:100%;height:100%;display:flex;align-items:center;background-color:rgba(var(--ax-comp-sliding-item-content-bg-color));color:rgba(var(--ax-comp-sliding-item-content-text-color));padding:1rem}ax-sliding-item ax-sliding-item-prefix,ax-sliding-item ax-sliding-item-suffix{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:4rem;aspect-ratio:1;cursor:pointer;transition-property:background-color,color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-sliding-item ax-sliding-item-prefix.ax-primary,ax-sliding-item ax-sliding-item-suffix.ax-primary{background-color:rgba(var(--ax-comp-sliding-item-primary-btn-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-primary ax-text,ax-sliding-item ax-sliding-item-prefix.ax-primary ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-primary ax-text,ax-sliding-item ax-sliding-item-suffix.ax-primary ax-icon{color:rgba(var(--ax-comp-sliding-item-primary-btn-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-primary:hover,ax-sliding-item ax-sliding-item-suffix.ax-primary:hover{background-color:rgba(var(--ax-comp-sliding-item-primary-btn-hover-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-primary:hover ax-text,ax-sliding-item ax-sliding-item-prefix.ax-primary:hover ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-primary:hover ax-text,ax-sliding-item ax-sliding-item-suffix.ax-primary:hover ax-icon{color:rgba(var(--ax-comp-sliding-item-primary-btn-hover-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-primary:active,ax-sliding-item ax-sliding-item-suffix.ax-primary:active{background-color:rgba(var(--ax-comp-sliding-item-primary-btn-active-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-primary:active ax-text,ax-sliding-item ax-sliding-item-prefix.ax-primary:active ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-primary:active ax-text,ax-sliding-item ax-sliding-item-suffix.ax-primary:active ax-icon{color:rgba(var(--ax-comp-sliding-item-primary-btn-active-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-secondary,ax-sliding-item ax-sliding-item-suffix.ax-secondary{background-color:rgba(var(--ax-comp-sliding-item-secondary-btn-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-secondary ax-text,ax-sliding-item ax-sliding-item-prefix.ax-secondary ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-secondary ax-text,ax-sliding-item ax-sliding-item-suffix.ax-secondary ax-icon{color:rgba(var(--ax-comp-sliding-item-secondary-btn-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-secondary:hover,ax-sliding-item ax-sliding-item-suffix.ax-secondary:hover{background-color:rgba(var(--ax-comp-sliding-item-secondary-btn-hover-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-secondary:hover ax-text,ax-sliding-item ax-sliding-item-prefix.ax-secondary:hover ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-secondary:hover ax-text,ax-sliding-item ax-sliding-item-suffix.ax-secondary:hover ax-icon{color:rgba(var(--ax-comp-sliding-item-secondary-btn-hover-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-secondary:active,ax-sliding-item ax-sliding-item-suffix.ax-secondary:active{background-color:rgba(var(--ax-comp-sliding-item-secondary-btn-active-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-secondary:active ax-text,ax-sliding-item ax-sliding-item-prefix.ax-secondary:active ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-secondary:active ax-text,ax-sliding-item ax-sliding-item-suffix.ax-secondary:active ax-icon{color:rgba(var(--ax-comp-sliding-item-secondary-btn-active-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-success,ax-sliding-item ax-sliding-item-suffix.ax-success{background-color:rgba(var(--ax-comp-sliding-item-success-btn-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-success ax-text,ax-sliding-item ax-sliding-item-prefix.ax-success ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-success ax-text,ax-sliding-item ax-sliding-item-suffix.ax-success ax-icon{color:rgba(var(--ax-comp-sliding-item-success-btn-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-success:hover,ax-sliding-item ax-sliding-item-suffix.ax-success:hover{background-color:rgba(var(--ax-comp-sliding-item-success-btn-hover-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-success:hover ax-text,ax-sliding-item ax-sliding-item-prefix.ax-success:hover ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-success:hover ax-text,ax-sliding-item ax-sliding-item-suffix.ax-success:hover ax-icon{color:rgba(var(--ax-comp-sliding-item-success-btn-hover-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-success:active,ax-sliding-item ax-sliding-item-suffix.ax-success:active{background-color:rgba(var(--ax-comp-sliding-item-success-btn-active-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-success:active ax-text,ax-sliding-item ax-sliding-item-prefix.ax-success:active ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-success:active ax-text,ax-sliding-item ax-sliding-item-suffix.ax-success:active ax-icon{color:rgba(var(--ax-comp-sliding-item-success-btn-active-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-warning,ax-sliding-item ax-sliding-item-suffix.ax-warning{background-color:rgba(var(--ax-comp-sliding-item-warning-btn-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-warning ax-text,ax-sliding-item ax-sliding-item-prefix.ax-warning ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-warning ax-text,ax-sliding-item ax-sliding-item-suffix.ax-warning ax-icon{color:rgba(var(--ax-comp-sliding-item-warning-btn-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-warning:hover,ax-sliding-item ax-sliding-item-suffix.ax-warning:hover{background-color:rgba(var(--ax-comp-sliding-item-warning-btn-hover-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-warning:hover ax-text,ax-sliding-item ax-sliding-item-prefix.ax-warning:hover ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-warning:hover ax-text,ax-sliding-item ax-sliding-item-suffix.ax-warning:hover ax-icon{color:rgba(var(--ax-comp-sliding-item-warning-btn-hover-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-warning:active,ax-sliding-item ax-sliding-item-suffix.ax-warning:active{background-color:rgba(var(--ax-comp-sliding-item-warning-btn-active-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-warning:active ax-text,ax-sliding-item ax-sliding-item-prefix.ax-warning:active ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-warning:active ax-text,ax-sliding-item ax-sliding-item-suffix.ax-warning:active ax-icon{color:rgba(var(--ax-comp-sliding-item-warning-btn-active-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-danger,ax-sliding-item ax-sliding-item-suffix.ax-danger{background-color:rgba(var(--ax-comp-sliding-item-danger-btn-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-danger ax-text,ax-sliding-item ax-sliding-item-prefix.ax-danger ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-danger ax-text,ax-sliding-item ax-sliding-item-suffix.ax-danger ax-icon{color:rgba(var(--ax-comp-sliding-item-danger-btn-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-danger:hover,ax-sliding-item ax-sliding-item-suffix.ax-danger:hover{background-color:rgba(var(--ax-comp-sliding-item-danger-btn-hover-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-danger:hover ax-text,ax-sliding-item ax-sliding-item-prefix.ax-danger:hover ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-danger:hover ax-text,ax-sliding-item ax-sliding-item-suffix.ax-danger:hover ax-icon{color:rgba(var(--ax-comp-sliding-item-danger-btn-hover-text-color))}ax-sliding-item ax-sliding-item-prefix.ax-danger:active,ax-sliding-item ax-sliding-item-suffix.ax-danger:active{background-color:rgba(var(--ax-comp-sliding-item-danger-btn-active-bg-color))}ax-sliding-item ax-sliding-item-prefix.ax-danger:active ax-text,ax-sliding-item ax-sliding-item-prefix.ax-danger:active ax-icon,ax-sliding-item ax-sliding-item-suffix.ax-danger:active ax-text,ax-sliding-item ax-sliding-item-suffix.ax-danger:active ax-icon{color:rgba(var(--ax-comp-sliding-item-danger-btn-active-text-color))}\n"] }]
         }] });
@@ -141,11 +141,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
 const COMPONENT = [AXSlidingItemComponent, AXSlidingItemPrefixComponent, AXSlidingItemSuffixComponent];
 const MODULES = [AXSlidingItemDirectiveModule, AXDecoratorModule];
 class AXSlidingItemModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXSlidingItemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: AXSlidingItemModule, imports: [AXSlidingItemDirectiveModule, AXDecoratorModule, AXSlidingItemComponent, AXSlidingItemPrefixComponent, AXSlidingItemSuffixComponent], exports: [AXSlidingItemComponent, AXSlidingItemPrefixComponent, AXSlidingItemSuffixComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXSlidingItemModule, imports: [MODULES, AXSlidingItemPrefixComponent, AXSlidingItemSuffixComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXSlidingItemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXSlidingItemModule, imports: [AXSlidingItemDirectiveModule, AXDecoratorModule, AXSlidingItemComponent, AXSlidingItemPrefixComponent, AXSlidingItemSuffixComponent], exports: [AXSlidingItemComponent, AXSlidingItemPrefixComponent, AXSlidingItemSuffixComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXSlidingItemModule, imports: [MODULES, AXSlidingItemPrefixComponent, AXSlidingItemSuffixComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXSlidingItemModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXSlidingItemModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],