@acorex/components 19.11.6 → 19.11.7

package/fesm2022/acorex-components-button-group.mjs

@@ -147,10 +147,10 @@ class AXButtonGroupComponent extends classes(MXInteractiveComponent, MXColorLook
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXButtonGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.1", type: AXButtonGroupComponent, isStandalone: true, selector: "ax-button-group", inputs: { disabled: "disabled", color: "color", look: "look", selection: "selection" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", lookChange: "lookChange", colorChange: "colorChange", disabledChange: "disabledChange", onClick: "onClick", selectionChange: "selectionChange", selectedButtonChange: "selectedButtonChange" }, host: { listeners: { "click": "__hostClick($event)" }, properties: { "class": "this.__hostClass", "attr.role": "this.role" } }, queries: [{ propertyName: "_contentButtons", predicate: AXButtonGroupItemComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <ng-content select=\"ax-button-group-item\"></ng-content>\n</ng-container>\n", styles: ["ax-button-group{display:flex}ax-button-group ax-button-group-item ax-button{--ax-sys-transition-duration: 0}ax-button-group ax-button-group-item.ax-state-selected ax-button{z-index:1}ax-button-group ax-button-group-item:not(:first-child,:last-child) ax-button{--ax-comp-button-border-radius: 0}ax-button-group ax-button-group-item:not(:first-child) ax-button{margin-inline-start:-1px}ax-button-group ax-button-group-item:first-child ax-button{--ax-comp-button-border-radius: 0;border-start-start-radius:var(--ax-comp-button-group-border-radius, var(--ax-sys-border-radius));border-end-start-radius:var(--ax-comp-button-group-border-radius, var(--ax-sys-border-radius))}ax-button-group ax-button-group-item:last-child ax-button{--ax-comp-button-border-radius: 0;border-start-end-radius:var(--ax-comp-button-group-border-radius, var(--ax-sys-border-radius));border-end-end-radius:var(--ax-comp-button-group-border-radius, var(--ax-sys-border-radius))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXButtonGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.5", type: AXButtonGroupComponent, isStandalone: true, selector: "ax-button-group", inputs: { disabled: "disabled", color: "color", look: "look", selection: "selection" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", lookChange: "lookChange", colorChange: "colorChange", disabledChange: "disabledChange", onClick: "onClick", selectionChange: "selectionChange", selectedButtonChange: "selectedButtonChange" }, host: { listeners: { "click": "__hostClick($event)" }, properties: { "class": "this.__hostClass", "attr.role": "this.role" } }, queries: [{ propertyName: "_contentButtons", predicate: AXButtonGroupItemComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <ng-content select=\"ax-button-group-item\"></ng-content>\n</ng-container>\n", styles: ["ax-button-group{display:flex}ax-button-group ax-button-group-item ax-button{--ax-sys-transition-duration: 0}ax-button-group ax-button-group-item.ax-state-selected ax-button{z-index:1}ax-button-group ax-button-group-item:not(:first-child,:last-child) ax-button{--ax-comp-button-border-radius: 0}ax-button-group ax-button-group-item:not(:first-child) ax-button{margin-inline-start:-1px}ax-button-group ax-button-group-item:first-child ax-button{--ax-comp-button-border-radius: 0;border-start-start-radius:var(--ax-comp-button-group-border-radius, var(--ax-sys-border-radius));border-end-start-radius:var(--ax-comp-button-group-border-radius, var(--ax-sys-border-radius))}ax-button-group ax-button-group-item:last-child ax-button{--ax-comp-button-border-radius: 0;border-start-end-radius:var(--ax-comp-button-group-border-radius, var(--ax-sys-border-radius));border-end-end-radius:var(--ax-comp-button-group-border-radius, var(--ax-sys-border-radius))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXButtonGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXButtonGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-button-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: ['disabled', 'color', 'look'], outputs: ['onBlur', 'onFocus', 'lookChange', 'colorChange', 'disabledChange'], template: "<ng-container>\n  <ng-content select=\"ax-button-group-item\"></ng-content>\n</ng-container>\n", styles: ["ax-button-group{display:flex}ax-button-group ax-button-group-item ax-button{--ax-sys-transition-duration: 0}ax-button-group ax-button-group-item.ax-state-selected ax-button{z-index:1}ax-button-group ax-button-group-item:not(:first-child,:last-child) ax-button{--ax-comp-button-border-radius: 0}ax-button-group ax-button-group-item:not(:first-child) ax-button{margin-inline-start:-1px}ax-button-group ax-button-group-item:first-child ax-button{--ax-comp-button-border-radius: 0;border-start-start-radius:var(--ax-comp-button-group-border-radius, var(--ax-sys-border-radius));border-end-start-radius:var(--ax-comp-button-group-border-radius, var(--ax-sys-border-radius))}ax-button-group ax-button-group-item:last-child ax-button{--ax-comp-button-border-radius: 0;border-start-end-radius:var(--ax-comp-button-group-border-radius, var(--ax-sys-border-radius));border-end-end-radius:var(--ax-comp-button-group-border-radius, var(--ax-sys-border-radius))}\n"] }]
         }], propDecorators: { onClick: [{
@@ -248,8 +248,8 @@ class AXButtonGroupItemComponent extends classes(MXInteractiveComponent, MXColor
             .map((c) => c[0])
             .join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXButtonGroupItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: AXButtonGroupItemComponent, isStandalone: true, selector: "ax-button-group-item", inputs: { color: "color", disabled: "disabled", text: "text", selected: "selected", divided: "divided", data: "data", name: "name" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur", disabledChange: "disabledChange" }, host: { listeners: { "click": "__hostClick($event)", "focus": "__hostFocus($event)", "blur": "__hostBlur($event)" }, properties: { "class": "this.__hostClass", "attr.tabindex": "this.tabindex" } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXButtonGroupItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: AXButtonGroupItemComponent, isStandalone: true, selector: "ax-button-group-item", inputs: { color: "color", disabled: "disabled", text: "text", selected: "selected", divided: "divided", data: "data", name: "name" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur", disabledChange: "disabledChange" }, host: { listeners: { "click": "__hostClick($event)", "focus": "__hostFocus($event)", "blur": "__hostBlur($event)" }, properties: { "class": "this.__hostClass", "attr.tabindex": "this.tabindex" } }, usesInheritance: true, ngImport: i0, template: `
     <ax-button
       [color]="selected ? color : 'default'"
       [text]="text"
@@ -261,7 +261,7 @@ class AXButtonGroupItemComponent extends classes(MXInteractiveComponent, MXColor
     </ax-button>
   `, isInline: true, dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXButtonGroupItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXButtonGroupItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-button-group-item',
@@ -314,11 +314,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
 const COMPONENT = [AXButtonGroupComponent, AXButtonGroupItemComponent];
 const MODULES = [CommonModule, AXDecoratorModule, AXButtonModule];
 class AXButtonGroupModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: AXButtonGroupModule, imports: [CommonModule, AXDecoratorModule, AXButtonModule, AXButtonGroupComponent, AXButtonGroupItemComponent], exports: [AXButtonGroupComponent, AXButtonGroupItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXButtonGroupModule, imports: [MODULES, AXButtonGroupItemComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: AXButtonGroupModule, imports: [CommonModule, AXDecoratorModule, AXButtonModule, AXButtonGroupComponent, AXButtonGroupItemComponent], exports: [AXButtonGroupComponent, AXButtonGroupItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXButtonGroupModule, imports: [MODULES, AXButtonGroupItemComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXButtonGroupModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXButtonGroupModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],

package/fesm2022/acorex-components-button.mjs

@@ -85,8 +85,8 @@ class AXButtonItemComponent extends classes(MXInteractiveComponent, MXColorCompo
             .map((c) => c[0])
             .join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXButtonItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: AXButtonItemComponent, isStandalone: true, selector: "ax-button-item", inputs: { color: "color", disabled: "disabled", text: "text", selected: "selected", divided: "divided", data: "data", name: "name" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur", disabledChange: "disabledChange" }, host: { listeners: { "click": "__hostClick($event)", "focus": "__hostFocus($event)", "blur": "__hostBlur($event)" }, properties: { "class": "this.__hostClass", "attr.tabindex": "this.tabindex" } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXButtonItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AXButtonItemComponent, isStandalone: true, selector: "ax-button-item", inputs: { color: "color", disabled: "disabled", text: "text", selected: "selected", divided: "divided", data: "data", name: "name" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur", disabledChange: "disabledChange" }, host: { listeners: { "click": "__hostClick($event)", "focus": "__hostFocus($event)", "blur": "__hostBlur($event)" }, properties: { "class": "this.__hostClass", "attr.tabindex": "this.tabindex" } }, usesInheritance: true, ngImport: i0, template: `
     <div class="ax-action-item-prefix">
       <ng-content select="ax-prefix"> </ng-content>
       <ng-content select="ax-loading"> </ng-content>
@@ -101,7 +101,7 @@ class AXButtonItemComponent extends classes(MXInteractiveComponent, MXColorCompo
     <ng-content select="ax-dropdown-panel"> </ng-content>
   `, isInline: true, styles: ["ax-button{--ax-comp-button-padding-y: 0;--ax-comp-button-border-radius: var(--ax-sys-border-radius);--ax-comp-button-height: calc(var(--ax-sys-size-base) * var(--ax-comp-button-size-ratio, 1));--ax-comp-button-text-padding-x: .5rem}ax-button ax-prefix{display:flex;padding-inline-start:var(--ax-comp-button-decorator-padding-x)}ax-button ax-suffix{display:flex;padding-inline-end:var(--ax-comp-button-decorator-padding-x)}ax-button.ax-button-icon{--ax-comp-button-decorator-padding-x: 0 !important;font-size:var(--ax-comp-button-icon-only-font-size)}.ax-xs ax-button,ax-button.ax-xs{--ax-comp-button-font-size: .75rem;--ax-comp-button-padding-x: .25rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: .875rem}.ax-sm ax-button,ax-button.ax-sm{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: .5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1rem}.ax-md ax-button,ax-button{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: 1rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: 1.25rem}.ax-lg ax-button,ax-button.ax-lg{--ax-comp-button-font-size: 1.125rem;--ax-comp-button-padding-x: 1.125rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.5rem}.ax-xl ax-button,ax-button.ax-xl{--ax-comp-button-font-size: 1.5rem;--ax-comp-button-padding-x: 1.5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.75rem}ax-button.ax-solid{--ax-comp-button-border-width: 1px}ax-button.ax-solid>button:focus-visible,ax-button.ax-solid>button.ax-state-focus{outline:2px solid;outline-offset:3px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-solid.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-darkest-surface)}ax-button.ax-solid.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-darkest-surface)}ax-button.ax-solid.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-darkest-surface)}ax-button.ax-solid.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-darkest-surface)}ax-button.ax-solid.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-darkest-surface)}ax-button.ax-solid.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-solid.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-darker-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-outline.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-lighter-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-outline.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-outline{--ax-comp-button-border-width: 1px;--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-hover-bg-color: transparent;--ax-comp-button-pressed-bg-color: transparent;--ax-comp-button-focused-bg-color: transparent}ax-button.ax-outline>button:focus-visible,ax-button.ax-outline>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-outline.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-outline.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-outline.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-outline.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-outline.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-twotone.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-darker-surface)}.ax-dark ax-button.ax-twotone.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-lighter-surface)}ax-button.ax-twotone{--ax-comp-button-border-width: 1px}ax-button.ax-twotone>button:focus-visible,ax-button.ax-twotone>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-twotone.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-twotone.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-twotone.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-twotone.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-twotone.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-blank.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-blank.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-darker-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-blank{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-blank>button:focus-visible,ax-button.ax-blank>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-blank.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface)}ax-button.ax-blank.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-blank.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface)}ax-button.ax-blank.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface)}ax-button.ax-blank.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface)}ax-button.ax-link.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-link.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-link{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-link>button:focus-visible,ax-button.ax-link>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-link.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface)}ax-button.ax-link.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface)}ax-button.ax-link.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface)}ax-button.ax-link.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface)}ax-button.ax-link.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface)}ax-button-item.ax-primary{--ax-comp-button-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-primary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-primary-surface)}ax-button-item.ax-secondary{--ax-comp-button-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-secondary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-secondary-surface)}ax-button-item.ax-success{--ax-comp-button-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-success-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-success-surface)}ax-button-item.ax-warning{--ax-comp-button-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-warning-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-warning-surface)}ax-button-item.ax-danger{--ax-comp-button-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-danger-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-danger-surface)}ax-button-item{background-color:rgba(var(--ax-comp-button-item-bg-color));color:rgba(var(--ax-comp-button-item-text-color))}ax-button-item.ax-state-selected{background-color:rgba(var(--ax-comp-button-item-selected-bg-color, var(--ax-sys-color-surface)));color:rgba(var(--ax-comp-button-item-selected-text-color))}ax-button-item:hover:not(.ax-state-selected){background-color:rgba(var(--ax-comp-button-item-hover-bg-color, var(--ax-sys-color-surface)))!important;color:rgba(var(--ax-comp-button-item-hover-text-color))}\n"], 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXButtonItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXButtonItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-button-item', template: `
     <div class="ax-action-item-prefix">
@@ -231,8 +231,8 @@ class AXButtonItemListComponent extends MXInteractiveComponent {
     get __hostClass() {
         return `ax-action-list ax-action-list-vertical`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXButtonItemListComponent, deps: [{ token: AXClosbaleComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: AXButtonItemListComponent, isStandalone: true, selector: "ax-button-item-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onItemClick: "onItemClick" }, host: { properties: { "class": "this.__hostClass" } }, queries: [{ propertyName: "_contentButtons", predicate: AXButtonItemComponent }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXButtonItemListComponent, deps: [{ token: AXClosbaleComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AXButtonItemListComponent, isStandalone: true, selector: "ax-button-item-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onItemClick: "onItemClick" }, host: { properties: { "class": "this.__hostClass" } }, queries: [{ propertyName: "_contentButtons", predicate: AXButtonItemComponent }], usesInheritance: true, ngImport: i0, template: `
     @for (item of items(); track item.name) {
       <ax-button-item [text]="item.text" [name]="item.name" [disabled]="item.disabled" [color]="item.color" (onClick)="_handleOnItemClick($event)">
         @if (item.icon) {
@@ -248,7 +248,7 @@ class AXButtonItemListComponent extends MXInteractiveComponent {
     <ng-content></ng-content>
   `, isInline: true, styles: ["ax-button-item-list.ax-action-list{padding-block:var(--ax-comp-button-item-list-padding-block, .25rem)}\n"], dependencies: [{ kind: "component", type: AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { 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: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXButtonItemListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXButtonItemListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-button-item-list', template: `
     @for (item of items(); track item.name) {
@@ -379,14 +379,14 @@ class AXButtonComponent extends MXButtonBaseComponent {
     blur() {
         this.getButton().classList.remove('ax-state-focus');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: AXButtonComponent, isStandalone: true, selector: "ax-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", selectedChange: "selectedChange", toggleableChange: "toggleableChange", lookChange: "lookChange", colorChange: "colorChange", disabledChange: "disabledChange", loadingText: "loadingTextChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AXButtonComponent, isStandalone: true, selector: "ax-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", selectedChange: "selectedChange", toggleableChange: "toggleableChange", lookChange: "lookChange", colorChange: "colorChange", disabledChange: "disabledChange", loadingText: "loadingTextChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
             { provide: AXComponent, useExisting: AXButtonComponent },
             { provide: AXButtonItemComponent, useExisting: AXButtonComponent },
             { provide: AXFocusableComponent, useExisting: AXButtonComponent },
         ], queries: [{ propertyName: "loadingIcon", first: true, predicate: AXLoadingComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\n  [axRipple]\n  [disabled]=\"disabled\"\n  [attr.tabindex]=\"tabIndex\"\n  (focus)=\"emitOnFocusEvent($event)\"\n  (blur)=\"emitOnBlurEvent($event)\"\n  (click)=\"_handleClick($event)\"\n  [attr.type]=\"type()\"\n>\n  <ng-content select=\"ax-loading, ax-loading-spinner\"> </ng-content>\n\n  @if (showIcon()) {\n    <ng-content select=\"ax-prefix, ax-icon\"> </ng-content>\n  }\n\n  <ng-content select=\"ax-content\"> </ng-content>\n\n  @if (text && !loadingText() && !iconOnly()) {\n    <span class=\"ax-button-text\">{{ text }}</span>\n  }\n\n  @if (loadingText()) {\n    <span class=\"ax-button-text\">{{ loadingText() }}</span>\n  }\n\n  <ng-content select=\"ax-suffix\"> </ng-content>\n  <ng-content select=\"ax-dropdown-panel\"> </ng-content>\n  <ng-content select=\".tab-content\"> </ng-content>\n\n  <ng-content></ng-content>\n</button>\n", styles: ["ax-button{--ax-comp-button-padding-y: 0;--ax-comp-button-border-radius: var(--ax-sys-border-radius);--ax-comp-button-height: calc(var(--ax-sys-size-base) * var(--ax-comp-button-size-ratio, 1));--ax-comp-button-text-padding-x: .5rem}ax-button ax-prefix{display:flex;padding-inline-start:var(--ax-comp-button-decorator-padding-x)}ax-button ax-suffix{display:flex;padding-inline-end:var(--ax-comp-button-decorator-padding-x)}ax-button.ax-button-icon{--ax-comp-button-decorator-padding-x: 0 !important;font-size:var(--ax-comp-button-icon-only-font-size)}.ax-xs ax-button,ax-button.ax-xs{--ax-comp-button-font-size: .75rem;--ax-comp-button-padding-x: .25rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: .875rem}.ax-sm ax-button,ax-button.ax-sm{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: .5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1rem}.ax-md ax-button,ax-button{--ax-comp-button-font-size: .875rem;--ax-comp-button-padding-x: 1rem;--ax-comp-button-decorator-padding-x: .25rem;--ax-comp-button-icon-only-font-size: 1.25rem}.ax-lg ax-button,ax-button.ax-lg{--ax-comp-button-font-size: 1.125rem;--ax-comp-button-padding-x: 1.125rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.5rem}.ax-xl ax-button,ax-button.ax-xl{--ax-comp-button-font-size: 1.5rem;--ax-comp-button-padding-x: 1.5rem;--ax-comp-button-decorator-padding-x: .5rem;--ax-comp-button-icon-only-font-size: 1.75rem}ax-button.ax-solid{--ax-comp-button-border-width: 1px}ax-button.ax-solid>button:focus-visible,ax-button.ax-solid>button.ax-state-focus{outline:2px solid;outline-offset:3px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-solid.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-darkest-surface)}ax-button.ax-solid.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-darkest-surface)}ax-button.ax-solid.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-darkest-surface)}ax-button.ax-solid.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-darkest-surface)}ax-button.ax-solid.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-darker-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-darkest-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-darkest-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-darkest-surface)}ax-button.ax-solid.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-solid.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-darker-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-outline.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-lighter-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-outline.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-outline{--ax-comp-button-border-width: 1px;--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-hover-bg-color: transparent;--ax-comp-button-pressed-bg-color: transparent;--ax-comp-button-focused-bg-color: transparent}ax-button.ax-outline>button:focus-visible,ax-button.ax-outline>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-outline.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-outline.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-outline.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-outline.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-outline.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-twotone.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-darker-surface)}.ax-dark ax-button.ax-twotone.ax-default{--ax-comp-button-normal-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-dark-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-lighter-surface)}ax-button.ax-twotone{--ax-comp-button-border-width: 1px}ax-button.ax-twotone>button:focus-visible,ax-button.ax-twotone>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-twotone.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-primary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-primary-surface)}ax-button.ax-twotone.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-secondary-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-twotone.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-success-surface)}ax-button.ax-twotone.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-warning-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-warning-surface)}ax-button.ax-twotone.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-danger-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-danger-surface)}ax-button.ax-blank.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-blank.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-normal-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-hover-border-color: var(--ax-sys-color-border-darker-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-pressed-border-color: var(--ax-sys-color-border-surface);--ax-comp-button-focused-bg-color: var(--ax-sys-color-light-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-border-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-blank{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-blank>button:focus-visible,ax-button.ax-blank>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-blank.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-primary-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface)}ax-button.ax-blank.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-secondary-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-secondary-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-secondary-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-secondary-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface)}ax-button.ax-blank.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-success-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-success-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-success-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface)}ax-button.ax-blank.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-warning-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-warning-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-warning-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface)}ax-button.ax-blank.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-on-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-danger-lightest-surface);--ax-comp-button-hover-bg-color: var(--ax-sys-color-danger-lightest-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-button-pressed-bg-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-button-focused-text-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-focused-border-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-focused-outline-color: var(---ax-sys-color-danger-light-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface)}ax-button.ax-link.ax-default{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-on-lightest-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-darker-surface)}.ax-dark ax-button.ax-link.ax-default{--ax-comp-button-normal-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-on-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-border-light-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-button-selected-border-color: var(--ax-sys-color-border-lighter-surface)}ax-button.ax-link{--ax-comp-button-normal-bg-color: transparent;--ax-comp-button-normal-border-color: transparent;--ax-comp-button-border-width: 0px}ax-button.ax-link>button:focus-visible,ax-button.ax-link>button.ax-state-focus{outline:2px solid;outline-offset:2px;color:rgba(var(--ax-comp-button-focused-text-color));background-color:rgba(var(--ax-comp-button-focused-bg-color));border-color:rgba(var(--ax-comp-button-focused-border-color));outline-color:rgba(var(--ax-comp-button-focused-outline-color))}ax-button.ax-link.ax-primary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-primary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-primary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-primary-surface)}ax-button.ax-link.ax-secondary{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-secondary-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-secondary-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-secondary-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-secondary-surface)}ax-button.ax-link.ax-success{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-success-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-success-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-success-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-success-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-success-surface)}ax-button.ax-link.ax-warning{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-warning-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-warning-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-warning-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-warning-surface)}ax-button.ax-link.ax-danger{--ax-comp-ripple-bg-color: rgba(var(--ax-sys-color-danger-surface), .3);--ax-comp-button-normal-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-hover-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-pressed-text-color: var(--ax-sys-color-danger-darker-surface);--ax-comp-button-focused-text-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-focused-outline-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-button-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-button-selected-text-color: var(--ax-sys-color-on-danger-surface)}ax-button-item.ax-primary{--ax-comp-button-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-primary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-primary-surface)}ax-button-item.ax-secondary{--ax-comp-button-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-secondary-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-secondary-surface)}ax-button-item.ax-success{--ax-comp-button-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-success-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-success-surface)}ax-button-item.ax-warning{--ax-comp-button-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-warning-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-warning-surface)}ax-button-item.ax-danger{--ax-comp-button-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-button-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-button-item-selected-bg-color: var(--ax-sys-color-danger-surface), .2;--ax-comp-button-item-selected-text-color: var(--ax-sys-color-danger-surface)}ax-button{position:relative;display:inline-flex;cursor:pointer;align-items:center;justify-content:center;transition-property:background-color,border-color,color,border-width,font-size,height;transition-timing-function:var(--ax-sys-transition-timing-function);transition-duration:var(--ax-sys-transition-duration);color:rgba(var(--ax-comp-button-normal-text-color));background-color:rgba(var(--ax-comp-button-normal-bg-color));border-color:rgba(var(--ax-comp-button-normal-border-color));border-width:var(--ax-comp-button-border-width, 0px);font-family:var(--ax-comp-button-font-family);font-size:var(--ax-comp-button-font-size);font-weight:var(--ax-comp-button-font-weight);border-radius:var(--ax-comp-button-border-radius);height:var(--ax-comp-button-height);line-height:var(--ax-comp-button-height)}ax-button>button{position:relative;display:inline-flex;height:100%;width:100%;align-items:center;justify-content:center;overflow:hidden;border-radius:inherit;outline-color:transparent;-webkit-user-select:none;user-select:none;padding:var(--ax-comp-button-padding-y) var(--ax-comp-button-padding-x)}ax-button>button .ax-button-text{white-space:nowrap;padding:0 var(--ax-comp-button-text-padding-x);font-weight:500}ax-button:hover:not(ax-button:hover.ax-state-disabled,ax-button:hover.ax-state-loading,ax-button:hover.ax-state-selected){color:rgba(var(--ax-comp-button-hover-text-color));background-color:rgba(var(--ax-comp-button-hover-bg-color));border-color:rgba(var(--ax-comp-button-hover-border-color))}ax-button:active:not(ax-button:active.ax-state-disabled,ax-button:active.ax-state-loading,ax-button:active.ax-state-selected){color:rgba(var(--ax-comp-button-pressed-text-color));background-color:rgba(var(--ax-comp-button-pressed-bg-color));border-color:rgba(var(--ax-comp-button-pressed-border-color))}ax-button.ax-state-disabled,ax-button.ax-state-loading{opacity:.5}ax-button.ax-state-disabled>button,ax-button.ax-state-loading>button{cursor:not-allowed}ax-button.ax-button-icon{height:var(--ax-comp-button-height);width:var(--ax-comp-button-height)}ax-button.ax-state-selected{color:rgba(var(--ax-comp-button-selected-text-color));background-color:rgba(var(--ax-comp-button-selected-bg-color));border-color:rgba(var(--ax-comp-button-selected-border-color))}\n"], dependencies: [{ kind: "directive", type: AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-button', inputs: ['disabled', 'size', 'tabIndex', 'color', 'look', 'text', 'toggleable', 'selected'], outputs: [
                         'onBlur',
@@ -410,11 +410,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
 const COMPONENT = [AXButtonComponent, AXButtonItemComponent, AXButtonItemListComponent];
 const MODULES = [CommonModule, AXCommonModule, AXDecoratorModule, AXLoadingModule, AXRippleDirective];
 class AXButtonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: AXButtonModule, imports: [CommonModule, AXCommonModule, AXDecoratorModule, AXLoadingModule, AXRippleDirective, AXButtonComponent, AXButtonItemComponent, AXButtonItemListComponent], exports: [AXButtonComponent, AXButtonItemComponent, AXButtonItemListComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXButtonModule, imports: [CommonModule, AXCommonModule, AXDecoratorModule, AXLoadingModule, AXButtonItemComponent, AXButtonItemListComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: AXButtonModule, imports: [CommonModule, AXCommonModule, AXDecoratorModule, AXLoadingModule, AXRippleDirective, AXButtonComponent, AXButtonItemComponent, AXButtonItemListComponent], exports: [AXButtonComponent, AXButtonItemComponent, AXButtonItemListComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXButtonModule, imports: [CommonModule, AXCommonModule, AXDecoratorModule, AXLoadingModule, AXButtonItemComponent, AXButtonItemListComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [MODULES, ...COMPONENT],

package/fesm2022/acorex-components-calendar.mjs

@@ -118,10 +118,10 @@ class MXCalendarBaseComponent extends MXBaseComponent {
         this.setOption({ name: 'holidayDates', value: v });
     }
     render() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: MXCalendarBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: MXCalendarBaseComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MXCalendarBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MXCalendarBaseComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: MXCalendarBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MXCalendarBaseComponent, decorators: [{
             type: Injectable
         }], propDecorators: { interface: [{
                 type: Input
@@ -704,8 +704,8 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
     getMonthName(date, style) {
         return `dateTime.months.${date.calendar.name()}.${style}.${date.monthOfYear - 1}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXCalendarComponent, deps: [{ token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: AXCalendarComponent, isStandalone: true, selector: "ax-calendar", inputs: { rtl: "rtl", readonly: "readonly", value: "value", name: "name", disabled: "disabled", depth: "depth", activeView: "activeView", minValue: "minValue", maxValue: "maxValue", disabledDates: "disabledDates", holidayDates: "holidayDates", type: "type", cellTemplate: "cellTemplate", cellClass: "cellClass", showNavigation: "showNavigation", count: "count", id: "id" }, outputs: { onOptionChanged: "onOptionChanged", valueChange: "valueChange", onValueChanged: "onValueChanged", minValueChange: "minValueChange", maxValueChange: "maxValueChange", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", activeViewChange: "activeViewChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", onSlotClick: "onSlotClick", countChange: "countChange" }, host: { listeners: { "keydown": "_handleOnKeydownEvent($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCalendarComponent, deps: [{ token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AXCalendarComponent, isStandalone: true, selector: "ax-calendar", inputs: { rtl: "rtl", readonly: "readonly", value: "value", name: "name", disabled: "disabled", depth: "depth", activeView: "activeView", minValue: "minValue", maxValue: "maxValue", disabledDates: "disabledDates", holidayDates: "holidayDates", type: "type", cellTemplate: "cellTemplate", cellClass: "cellClass", showNavigation: "showNavigation", count: "count", id: "id" }, outputs: { onOptionChanged: "onOptionChanged", valueChange: "valueChange", onValueChanged: "onValueChanged", minValueChange: "minValueChange", maxValueChange: "maxValueChange", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", activeViewChange: "activeViewChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", onSlotClick: "onSlotClick", countChange: "countChange" }, host: { listeners: { "keydown": "_handleOnKeydownEvent($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AXCalendarComponent),
@@ -718,7 +718,7 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
             AXUnsubscriber,
         ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"></ng-content>\n<div class=\"ax-calendar-body\">\n  @for (v of views; let i = $index, first = $first, last = $last; track i) {\n    @switch (activeView) {\n      @case ('year') {\n        @if (showNavigation) {\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-state-disabled\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime.format('YYYY') }} - {{ v.range.endTime.format('YYYY') }}\n              </button>\n            </div>\n            @if (last) {\n              <div class=\"ax-calendar-header-buttons\">\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button ax-button-rounded ax-button-icon ax-next\"\n                  (click)=\"_handlePrevClick()\"\n                  [title]=\"'prev' | translate | async\"\n                >\n                  <i class=\"ax-icon ax-icon-chevron-left\"></i>\n                </button>\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                  (click)=\"_handleNextClick()\"\n                  [title]=\"'next' | translate | async\"\n                >\n                  <i class=\"ax-icon ax-icon-chevron-right\"></i>\n                </button>\n              </div>\n            }\n          </div>\n        }\n        <div class=\"ax-calendar-slots ax-calendar-slots-year\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n          @for (slot of v.slots; track slot.text) {\n            <button\n              tabindex=\"0\"\n              class=\"ax-calendar-slot\"\n              [class.ax-state-disabled]=\"disabled\"\n              [ngClass]=\"slot.cssClass\"\n              (click)=\"_handleSlotClick($event, slot)\"\n            >\n              @if (cellTemplate) {\n                <div>\n                  <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n                  </ng-container>\n                </div>\n              } @else {\n                <div [title]=\"slot.tooltip\">\n                  {{ slot.text }}\n                </div>\n              }\n            </button>\n          }\n        </div>\n      }\n      @case ('month') {\n        @if (showNavigation) {\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime.format('YYYY') }}\n              </button>\n            </div>\n            @if (last) {\n              <div class=\"ax-calendar-header-buttons\">\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                  (click)=\"_handlePrevClick()\"\n                  [title]=\"'prev' | translate | async\"\n                >\n                  <i class=\"ax-icon ax-icon-chevron-left\"></i>\n                </button>\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                  (click)=\"_handleNextClick()\"\n                  [title]=\"'next' | translate | async\"\n                >\n                  <i class=\"ax-icon ax-icon-chevron-right\"></i>\n                </button>\n              </div>\n            }\n          </div>\n        }\n        <div class=\"ax-calendar-slots ax-calendar-slots-month\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n          <button\n            tabindex=\"0\"\n            *ngFor=\"let slot of v.slots\"\n            class=\"ax-calendar-slot\"\n            [class.ax-state-disabled]=\"disabled\"\n            [ngClass]=\"slot.cssClass\"\n            (click)=\"_handleSlotClick($event, slot)\"\n          >\n            @if (cellTemplate) {\n              <div>\n                <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n                </ng-container>\n              </div>\n            } @else {\n              <div [title]=\"slot.tooltip\">\n                {{ getMonthName(slot.date, 'short') | translate | async }}\n              </div>\n            }\n          </button>\n        </div>\n      }\n      @default {\n        @if (showNavigation) {\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime.format('YYYY') }}\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'month')\"\n              >\n                {{ getMonthName(v.range.startTime, 'long') | translate | async }}\n              </button>\n            </div>\n            @if (last) {\n              <div class=\"ax-calendar-header-buttons\">\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                  (click)=\"_handlePrevClick()\"\n                  [title]=\"'prev' | translate | async\"\n                >\n                  <i class=\"ax-icon ax-icon-chevron-left\"></i>\n                </button>\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                  (click)=\"_handleNextClick()\"\n                  [title]=\"'next' | translate | async\"\n                >\n                  <i class=\"ax-icon ax-icon-chevron-right\"></i>\n                </button>\n              </div>\n            }\n          </div>\n        }\n        <div class=\"ax-calendar-week\">\n          <div *ngFor=\"let d of _weekdays\">{{ 'dateTime.weekdays.short.' + d | translate | async }}</div>\n        </div>\n        <div class=\"ax-calendar-slots ax-calendar-slots-day\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n          <ng-container *ngFor=\"let slot of v.slots\">\n            <button\n              tabindex=\"0\"\n              class=\"ax-calendar-slot\"\n              [ngClass]=\"slot.cssClass\"\n              [class.ax-state-disabled]=\"disabled\"\n              (click)=\"_handleSlotClick($event, slot)\"\n              [disabled]=\"disabled\"\n              [axRipple]\n            >\n              @if (cellTemplate) {\n                <div>\n                  <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n                  </ng-container>\n                </div>\n              } @else {\n                <div [title]=\"slot.tooltip\">\n                  {{ slot.text }}\n                </div>\n              }\n            </button>\n          </ng-container>\n        </div>\n      }\n    }\n  }\n</div>\n<ng-content select=\"ax-footer\"></ng-content>\n", styles: ["ax-calendar{--ax-comp-calendar-view-header-padding: .5rem;--ax-comp-calendar-slot-today-border-width: 1px;--ax-comp-calendar-slot-focused-border-width: 1px;--ax-comp-calendar-slot-focused-outline-width: 2px;--ax-comp-calendar-slot-disabled-opacity: .5;--ax-comp-calendar-slot-readonly-opacity: .75;--ax-comp-calendar-footer-margin-t: 1.25rem;--ax-comp-calendar-footer-today-button-padding-x: 1rem;--ax-comp-calendar-footer-today-button-height: var(--ax-sys-size-base)}ax-calendar{--ax-comp-calendar-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-calendar-view-header-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-calendar-slot-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-calendar-slot-ripple-color: var(--ax-sys-color-primary-light-surface), .3;--ax-comp-calendar-slot-today-text-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-today-border-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-hover-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-hover-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-calendar-slot-focused-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-calendar-slot-focused-outline-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-calendar-slot-holiday-text-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-ripple-color: var(--ax-sys-color-danger-light-surface), .3;--ax-comp-calendar-slot-holiday-today-border-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-hover-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-hover-border-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-calendar-footer-today-button-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-footer-today-button-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-calendar-footer-today-button-hover-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-calendar-footer-today-button-focused-outline-color: var(--ax-sys-color-primary-surface), 1}.ax-dark ax-calendar{--ax-comp-calendar-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-calendar-view-header-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-calendar-slot-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-calendar-slot-focused-border-color: var(--ax-sys-color-border-darkest-surface)}html[dir=rtl] ax-calendar .ax-calendar-header-buttons .ax-icon{-moz-transform:scale(-1,1);-o-transform:scale(-1,1);-webkit-transform:scale(-1,1);transform:scaleX(-1)}ax-calendar{width:100%;display:block;color:rgba(var(--ax-comp-calendar-text-color));background-color:rgba(var(--ax-comp-calendar-bg-color))}ax-calendar.ax-state-disabled .ax-calendar-slots{cursor:not-allowed;opacity:.5}ax-calendar.ax-state-readonly .ax-calendar-slots{cursor:text}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding-left:var(--ax-comp-calendar-header-padding-x, .25rem);padding-right:var(--ax-comp-calendar-header-padding-x, .25rem);padding-top:var(--ax-comp-calendar-header-padding-t, .25rem)}ax-calendar .ax-calendar-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body{display:flex;flex-direction:column;justify-content:center;align-items:center}@media (min-width: 1024px){ax-calendar .ax-calendar-body{flex-direction:column}}ax-calendar .ax-calendar-body>div{width:100%;flex:1 1 0%}@media (min-width: 768px){ax-calendar .ax-calendar-body>div{width:20rem}}ax-calendar .ax-calendar-body .ax-calendar-view-header{display:flex;justify-content:space-between;border-bottom-width:var(--ax-comp-calendar-view-header-border-width, 1px);border-color:rgba(var(--ax-comp-calendar-view-header-border-color));padding:var(--ax-comp-calendar-view-header-padding)}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem;padding:1rem}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;text-align:center;font-size:var(--ax-comp-calendar-font-size, .875rem);color:rgba(var(--ax-comp-calendar-slot-text-color));line-height:var(--ax-comp-calendar-line-height, 1.25rem);border-radius:var(--ax-comp-calendar-slot-border-radius, var(--ax-sys-border-radius));transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:before{content:\"\";float:left;padding-top:100%}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:after{content:\"\";clear:both;display:block}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected){background-color:rgba(var(--ax-comp-calendar-slot-hover-bg-color));color:rgba(var(--ax-comp-calendar-slot-hover-text-color))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled){outline-width:var(--ax-comp-calendar-slot-focused-outline-width);outline-color:rgba(var(--ax-comp-calendar-slot-focused-text-color))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{outline-style:dashed;outline-width:var(--ax-comp-calendar-slot-focused-outline-width)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled{cursor:not-allowed;opacity:var(--ax-comp-calendar-slot-disabled-opacity)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-readonly{cursor:text;opacity:var(--ax-comp-calendar-slot-readonly-opacity)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-3{grid-column-start:3}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other{opacity:.05}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot .ax-ripple{background-color:rgba(var(--ax-comp-calendar-slot-ripple-color))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{color:rgba(var(--ax-comp-calendar-slot-today-text-color));border-width:var(--ax-comp-calendar-slot-today-border-width);border-color:rgba(var(--ax-ax-comp-calendar-slot-today-border-color))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today.ax-state-holiday{border-color:rgba(var(--ax-comp-calendar-slot-holiday-today-border-color))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-focused{border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected{color:rgba(var(--ax-comp-calendar-slot-selected-text-color));background-color:rgba(var(--ax-comp-calendar-slot-selected-bg-color))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday{color:rgba(var(--ax-comp-calendar-slot-holiday-selected-text-color))!important;background-color:rgba(var(--ax-comp-calendar-slot-holiday-selected-bg-color))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday{color:rgba(var(--ax-comp-calendar-slot-holiday-text-color))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:is(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-comp-calendar-slot-holiday-hover-bg-color))!important;border-color:rgba(var(--ax-comp-calendar-slot-holiday-hover-border-color))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday .ax-ripple{background-color:rgba(var(--ax-comp-calendar-slot-holiday-ripple-color))!important}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-day{grid-template-columns:repeat(7,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-year,ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-month{grid-template-columns:repeat(4,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding-top:var(--ax-comp-calendar-week-padding-t, .75rem);padding-left:var(--ax-comp-calendar-week-padding-x, .5rem);padding-right:var(--ax-comp-calendar-week-padding-x, .5rem)}ax-calendar .ax-calendar-body .ax-calendar-week>div{display:flex;cursor:pointer;position:relative;text-align:center;align-items:center;justify-content:center;font-size:var(--ax-comp-calendar-font-size, .875rem);line-height:var(--ax-comp-calendar-line-height, 1.25rem)}ax-calendar .ax-calendar-footer{display:flex;align-items:center;justify-content:center;margin-top:var(--ax-comp-calendar-footer-margin-t)}ax-calendar .ax-calendar-footer .ax-today-button{width:100%;display:block;cursor:pointer;text-align:center;padding-left:var(--ax-comp-calendar-footer-today-button-padding-x);padding-right:var(--ax-comp-calendar-footer-today-button-padding-x);font-size:var(--ax-comp-calendar-font-size, .875rem);line-height:var(--ax-comp-calendar-line-height, 1.25rem);height:var(--ax-comp-calendar-footer-today-button-height);border-radius:var(--ax-comp-calendar-footer-today-button-border-radius, var(--ax-sys-border-radius));color:rgba(var(--ax-comp-calendar-footer-today-button-text-color));background-color:rgba(var(--ax-comp-calendar-footer-today-button-bg-color))}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{cursor:not-allowed;opacity:var(--ax-comp-calendar-slot-disabled-opacity)}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-readonly{cursor:text;opacity:var(--ax-comp-calendar-slot-readonly-opacity)}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-comp-calendar-footer-today-button-hover-bg-color))}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:focus,ax-calendar .ax-calendar-footer .ax-today-button:focus-visible):not(.ax-state-disabled){outline-color:rgba(var(--ax-comp-calendar-footer-today-button-focused-outline-color))}.ax-calendar-picker{display:flex;width:100%}.ax-calendar-picker ax-picker{flex:1 1 0%}.ax-overlay-pane ax-calendar{border-style:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-calendar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: [
                         'rtl',
@@ -949,8 +949,8 @@ class AXCalendarRangeComponent extends classes((MXValueComponent), MXInteractive
             this._c1.navTo(e.startOf('year'));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXCalendarRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: AXCalendarRangeComponent, isStandalone: true, selector: "ax-calendar-range", inputs: { rtl: "rtl", readonly: "readonly", value: "value", name: "name", disabled: "disabled", depth: "depth", activeView: "activeView", minValue: "minValue", maxValue: "maxValue", disabledDates: "disabledDates", holidayDates: "holidayDates", type: "type", cellTemplate: "cellTemplate", cellClass: "cellClass", showNavigation: "showNavigation" }, outputs: { onOptionChanged: "onOptionChanged", valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", activeViewChange: "activeViewChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", onSlotClick: "onSlotClick" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCalendarRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: AXCalendarRangeComponent, isStandalone: true, selector: "ax-calendar-range", inputs: { rtl: "rtl", readonly: "readonly", value: "value", name: "name", disabled: "disabled", depth: "depth", activeView: "activeView", minValue: "minValue", maxValue: "maxValue", disabledDates: "disabledDates", holidayDates: "holidayDates", type: "type", cellTemplate: "cellTemplate", cellClass: "cellClass", showNavigation: "showNavigation" }, outputs: { onOptionChanged: "onOptionChanged", valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", activeViewChange: "activeViewChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", onSlotClick: "onSlotClick" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AXCalendarRangeComponent),
@@ -962,7 +962,7 @@ class AXCalendarRangeComponent extends classes((MXValueComponent), MXInteractive
             },
         ], viewQueries: [{ propertyName: "_c1", first: true, predicate: ["c1"], descendants: true, static: true }, { propertyName: "_c2", first: true, predicate: ["c2"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-calendar-range-header\">\n    <ng-content></ng-content>\n    <div class=\"ax-calendar-header-range-info\">\n        <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\"\n            (click)=\"handleNavClick()\">\n            {{ _navText }}\n        </button>\n    </div>\n    <div class=\"ax-calendar-header-range-buttons\">\n        <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n            (click)=\"handlePrevClick()\">\n            <i class=\"ax-icon\" [ngClass]=\"{\n                'ax-icon-chevron-left': !rtl,\n                'ax-icon-chevron-right': rtl\n              }\"></i>\n        </button>\n        <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n            (click)=\"handleNextClick()\">\n            <i class=\"ax-icon\" [ngClass]=\"{\n                'ax-icon-chevron-left': rtl,\n                'ax-icon-chevron-right': !rtl\n              }\"></i>\n        </button>\n    </div>\n</div>\n<div class=\"ax-calendar-range-body\">\n    <ax-calendar #c1 [showNavigation]=\"false\" [readonly]=\"true\" [cellClass]=\"getCellClass\" [type]=\"type\"\n        [cellTemplate]=\"cellTemplate\" [minValue]=\"minValue\" [maxValue]=\"maxValue\" [depth]=\"depth\"\n        (onSlotClick)=\"handleSlotClick($event)\" (onNavigate)=\"handleNavigate()\"\n        (activeViewChange)=\"handleActiveViewChange1()\">\n    </ax-calendar>\n    <ax-calendar #c2 [showNavigation]=\"false\" [readonly]=\"true\" [cellClass]=\"getCellClass\" [type]=\"type\"\n        [cellTemplate]=\"cellTemplate\" [minValue]=\"minValue\" [maxValue]=\"maxValue\" [depth]=\"depth\"\n        (onSlotClick)=\"handleSlotClick($event)\" (activeViewChange)=\"handleActiveViewChange2()\">\n    </ax-calendar>\n</div>", styles: ["ax-calendar-range{--ax-comp-calendar-range-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-calendar-slot-range-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-calendar-slot-range-between-bg-color: var(--ax-sys-color-primary-surface), .5;--ax-comp-calendar-slot-range-start-end-bg-color: var(--ax-sys-color-primary-surface)}.ax-dark ax-calendar-range{--ax-comp-calendar-range-text-color: var(--ax-sys-color-on-darkest-surface)}ax-calendar-range{display:block;padding:.5rem;color:rgb(var(--ax-comp-calendar-range-text-color));background-color:rgba(var(--ax-comp-calendar-range-bg-color))}ax-calendar-range .ax-calendar-range-header{display:flex;justify-content:space-between;padding-top:var(--ax-comp-calendar-range-header-padding-t, .25rem);padding-left:var(--ax-comp-calendar-range-header-padding-x, .25rem);padding-right:var(--ax-comp-calendar-range-header-padding-x, .25rem)}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-info{font-weight:500}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-buttons{display:flex}ax-calendar-range .ax-calendar-range-body{display:flex;flex-direction:row}@media (min-width: 320px) and (max-width: 640px){ax-calendar-range .ax-calendar-range-body{flex-direction:column}}ax-calendar-range ax-calendar{margin:0;padding:0}ax-calendar-range ax-calendar .ax-calendar-body{margin-top:0;padding-top:0}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{color:rgba(var(--ax-comp-calendar-slot-range-text-color));background-color:rgba(var(--ax-comp-calendar-slot-range-between-bg-color))}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-start,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-end{color:rgba(var(--ax-comp-calendar-slot-range-text-color));background-color:rgba(var(--ax-comp-calendar-slot-range-start-end-bg-color))}@media (min-width: 768px){ax-calendar-range ax-calendar .ax-calendar-body>div{width:100%!important}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "minValue", "maxValue", "disabledDates", "holidayDates", "type", "cellTemplate", "cellClass", "showNavigation", "count", "id"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "minValueChange", "maxValueChange", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXCalendarRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCalendarRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-calendar-range', encapsulation: ViewEncapsulation.None, inputs: [
                         'rtl',
@@ -1015,11 +1015,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
 const COMPONENT = [AXCalendarComponent, AXCalendarRangeComponent];
 const MODULES = [CommonModule, AXDateTimeModule, AXTranslationModule, AXTooltipModule, AXRippleDirective];
 class AXCalendarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: AXCalendarModule, imports: [CommonModule, AXDateTimeModule, AXTranslationModule, AXTooltipModule, AXRippleDirective, AXCalendarComponent, AXCalendarRangeComponent], exports: [AXCalendarComponent, AXCalendarRangeComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXCalendarModule, imports: [CommonModule, AXDateTimeModule, AXTranslationModule, AXTooltipModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: AXCalendarModule, imports: [CommonModule, AXDateTimeModule, AXTranslationModule, AXTooltipModule, AXRippleDirective, AXCalendarComponent, AXCalendarRangeComponent], exports: [AXCalendarComponent, AXCalendarRangeComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCalendarModule, imports: [CommonModule, AXDateTimeModule, AXTranslationModule, AXTooltipModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXCalendarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],

package/fesm2022/acorex-components-check-box.mjs

@@ -106,8 +106,8 @@ class AXCheckBoxComponent extends classes((MXValueComponent), MXColorComponent)
             this.commitValue(!this.value, true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXCheckBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: AXCheckBoxComponent, isStandalone: true, selector: "ax-check-box", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", color: "color", value: "value", name: "name", id: "id", checked: "checked", indeterminate: "indeterminate" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { listeners: { "click": "_handleClick($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCheckBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AXCheckBoxComponent, isStandalone: true, selector: "ax-check-box", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", color: "color", value: "value", name: "name", id: "id", checked: "checked", indeterminate: "indeterminate" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { listeners: { "click": "_handleClick($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
             { provide: AXValuableComponent, useExisting: AXCheckBoxComponent },
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -116,7 +116,7 @@ class AXCheckBoxComponent extends classes((MXValueComponent), MXColorComponent)
             },
         ], queries: [{ propertyName: "_labels", predicate: AXLabelComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-checkbox-label\" [class.ax-state-readonly]=\"readonly\" [class.ax-state-disabled]=\"disabled\">\n  <div class=\"ax-checkbox-start-side\">\n    <input\n      [id]=\"id\"\n      class=\"ax-check-box\"\n      type=\"checkbox\"\n      [indeterminate]=\"_stateIndeterminate\"\n      [ngModel]=\"value\"\n      (ngModelChange)=\"_handleModelChange($event)\"\n      [checked]=\"value\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [tabindex]=\"tabIndex\"\n      (focus)=\"emitOnFocusEvent($event)\"\n      (blur)=\"emitOnBlurEvent($event)\"\n      #cb\n    />\n    <div class=\"ax-checkbox-background\" (click)=\"changeValue()\">\n      @if (cb.indeterminate) {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n          <rect x=\"3\" y=\"7\" width=\"10\" height=\"2\" />\n        </svg>\n      }\n      @if (cb.checked) {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n          <path\n            d=\"M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z\"\n          />\n        </svg>\n      }\n    </div>\n  </div>\n  <div class=\"ax-checkbox-end-side\">\n    <ng-content select=\"ax-label\"></ng-content>\n    <ng-content select=\"ax-form-hint\"></ng-content>\n    <span class=\"ax-error-container\"></span>\n  </div>\n</div>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n", styles: ["ax-check-box{--ax-comp-checkbox-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-checkbox-border-color: var(--ax-sys-color-border-surface)}ax-check-box.ax-primary{--ax-comp-checkbox-checked-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-checkbox-checked-bg-svg-fill: var(--ax-sys-color-on-primary-surface);--ax-comp-checkbox-checked-border-color: var(--ax-sys-color-primary-surface);--ax-comp-checkbox-checked-box-shadow-outline-color: var(--ax-sys-color-primary-surface)}ax-check-box.ax-secondary{--ax-comp-checkbox-checked-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-checkbox-checked-bg-svg-fill: var(--ax-sys-color-on-secondary-surface);--ax-comp-checkbox-checked-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-checkbox-checked-box-shadow-outline-color: var(--ax-sys-color-secondary-surface)}ax-check-box.ax-success{--ax-comp-checkbox-checked-bg-color: var(--ax-sys-color-success-surface);--ax-comp-checkbox-checked-bg-svg-fill: var(--ax-sys-color-on-success-surface);--ax-comp-checkbox-checked-border-color: var(--ax-sys-color-success-surface);--ax-comp-checkbox-checked-box-shadow-outline-color: var(--ax-sys-color-success-surface)}ax-check-box.ax-warning{--ax-comp-checkbox-checked-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-checkbox-checked-bg-svg-fill: var(--ax-sys-color-on-warning-surface);--ax-comp-checkbox-checked-border-color: var(--ax-sys-color-warning-surface);--ax-comp-checkbox-checked-box-shadow-outline-color: var(--ax-sys-color-warning-surface)}ax-check-box.ax-danger{--ax-comp-checkbox-checked-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-checkbox-checked-bg-svg-fill: var(--ax-sys-color-on-danger-surface);--ax-comp-checkbox-checked-border-color: var(--ax-sys-color-danger-surface);--ax-comp-checkbox-checked-box-shadow-outline-color: var(--ax-sys-color-danger-surface)}ax-check-box.ax-default{--ax-comp-checkbox-checked-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-checkbox-checked-bg-svg-fill: var(--ax-sys-color-on-primary-surface);--ax-comp-checkbox-checked-border-color: var(--ax-sys-color-primary-surface)}.ax-checkbox-label{display:flex;width:fit-content;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:flex-start;font-size:var(--ax-comp-checkbox-font-size, .875rem);line-height:var(--ax-comp-checkbox-line-height, 1.25rem)}.ax-checkbox-label.ax-state-readonly{opacity:var(--ax-comp-checkbox-readonly-opacity, .75)}.ax-checkbox-label.ax-state-disabled{cursor:not-allowed;opacity:var(--ax-comp-checkbox-disabled-opacity, .5)}.ax-checkbox-label.ax-state-disabled .ax-check-box:disabled{opacity:1}.ax-checkbox-label .ax-checkbox-start-side{display:flex;position:relative;align-items:center;height:1.25rem}.ax-checkbox-label .ax-checkbox-start-side .ax-check-box{margin:0;height:1rem;min-width:1rem;cursor:pointer;-webkit-appearance:none;appearance:none;outline-offset:2px;vertical-align:middle;outline:2px solid transparent;border-width:var(--ax-comp-checkbox-border-width, 1px);border-color:rgba(var(--ax-comp-checkbox-border-color));border-radius:var(--ax-comp-checkbox-border-radius, .25rem);transition-duration:var(--ax-sys-transition-duration);background-color:rgba(var(--ax-comp-checkbox-bg-color));transition-timing-function:var(--ax-sys-transition-timing-function)}.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:checked,.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:indeterminate{background-size:contain;background-repeat:no-repeat;border-color:rgba(var(--ax-comp-checkbox-checked-border-color))!important;background-color:rgba(var(--ax-comp-checkbox-checked-bg-color))!important}.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:focus-visible,.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:focus{box-shadow:0 0 0 2px rgba(var(--ax-sys-color-surface)),0 0 0 4px rgba(var(--ax-comp-checkbox-checked-box-shadow-outline-color))}.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:disabled{cursor:not-allowed;opacity:var(--ax-comp-checkbox-disabled-opacity, .5)}.ax-checkbox-label .ax-checkbox-start-side .ax-checkbox-background{position:absolute}.ax-checkbox-label .ax-checkbox-start-side .ax-checkbox-background svg{fill:rgba(var(--ax-comp-checkbox-checked-bg-svg-fill))}.ax-checkbox-label .ax-checkbox-end-side{margin-inline-start:var(--ax-comp-checkbox-end-side-margin-s, .75rem)}.ax-checkbox-label .ax-checkbox-end-side ax-label label{margin-bottom:0}.ax-checkbox-label .ax-checkbox-end-side ax-form-hint{margin-top:var(--ax-comp-checkbox-end-side-hint-margin-t, .25rem);cursor:text;-webkit-user-select:text;user-select:text}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][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.2.1", ngImport: i0, type: AXCheckBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCheckBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-check-box', inputs: ['disabled', 'tabIndex', 'readonly', 'color', 'value', 'name', 'id', 'checked'], outputs: ['onBlur', 'onFocus', 'valueChange', 'onValueChanged'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: AXValuableComponent, useExisting: AXCheckBoxComponent },
@@ -140,11 +140,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
             }] } });
 
 class AXCheckBoxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXCheckBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: AXCheckBoxModule, imports: [CommonModule, FormsModule, AXDecoratorModule, AXCheckBoxComponent], exports: [AXCheckBoxComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXCheckBoxModule, imports: [CommonModule, FormsModule, AXDecoratorModule, AXCheckBoxComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCheckBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: AXCheckBoxModule, imports: [CommonModule, FormsModule, AXDecoratorModule, AXCheckBoxComponent], exports: [AXCheckBoxComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCheckBoxModule, imports: [CommonModule, FormsModule, AXDecoratorModule, AXCheckBoxComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXCheckBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCheckBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, FormsModule, AXDecoratorModule, AXCheckBoxComponent],