@acorex/components 7.2.7 → 7.2.8

package/alert/lib/alert.component.d.ts

@@ -34,6 +34,7 @@ export declare class AXAlertComponent extends AXAlertComponent_base {
     set visible(v: boolean);
     protected ngOnInit(): void;
     protected ngAfterViewInit(): void;
+    private _setLayout;
     protected _handleOnOptionChanged(e: AXOptionChangedEvent): void;
     private _setIcon;
     private _applyButtonStyle;
@@ -51,6 +52,6 @@ export declare class AXAlertComponent extends AXAlertComponent_base {
     show(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXAlertComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXAlertComponent, "ax-alert", never, { "color": { "alias": "color"; "required": false; }; "timeOut": { "alias": "timeOut"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; }, { "colorChange": "colorChange"; "onClosed": "onClosed"; }, ["_iconComp", "_titleComp", "_contentComp", "_footerComp", "_buttonComps"], ["ax-icon", "ax-title", "ax-content", "ax-footer", "ax-button", "ax-close-button"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXAlertComponent, "ax-alert", never, { "color": { "alias": "color"; "required": false; }; "timeOut": { "alias": "timeOut"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; }, { "colorChange": "colorChange"; "onClosed": "onClosed"; }, ["_iconComp", "_titleComp", "_contentComp", "_footerComp", "_buttonComps"], ["ax-button", "ax-close-button", "ax-title", "ax-icon", "ax-content", "ax-footer"], false, never>;
 }
 export {};

package/button/lib/button-group.component.d.ts

@@ -4,9 +4,9 @@ import { AXClickEvent, AXItemClickEvent, AXSelectionMode, AXSelectionValueChange
 import { AXBaseComponent } from '@acorex/components/mixin';
 import * as i0 from "@angular/core";
 export declare const AXBaseButtonGroupMixin: (abstract new (...args: any[]) => {
-    "__#5095@#disabled": boolean;
+    "__#5174@#disabled": boolean;
     disabled: boolean;
-    "__#5095@#tabIndex": number;
+    "__#5174@#tabIndex": number;
     tabIndex: number;
     onFocus: EventEmitter<import("@acorex/components/common").AXFocusEvent>;
     _emitOnFocusEvent(e: FocusEvent): void;
@@ -15,9 +15,9 @@ export declare const AXBaseButtonGroupMixin: (abstract new (...args: any[]) => {
     focus(): void;
     hasFocus(): boolean;
     id: string;
-    "__#5092@#rtl": boolean;
+    "__#5171@#rtl": boolean;
     rtl: boolean;
-    "__#5092@#elementRef": ElementRef<any>;
+    "__#5171@#elementRef": ElementRef<any>;
     _cdr: ChangeDetectorRef;
     _isInited: boolean;
     _isRendered: boolean;
@@ -44,9 +44,9 @@ export declare const AXBaseButtonGroupMixin: (abstract new (...args: any[]) => {
     _look?: import("@acorex/components/common").AXStyleLookType;
     look: import("@acorex/components/common").AXStyleLookType;
     id: string;
-    "__#5092@#rtl": boolean;
+    "__#5171@#rtl": boolean;
     rtl: boolean;
-    "__#5092@#elementRef": ElementRef<any>;
+    "__#5171@#elementRef": ElementRef<any>;
     _cdr: ChangeDetectorRef;
     _isInited: boolean;
     _isRendered: boolean;

package/button/lib/button-item.component.d.ts

@@ -3,9 +3,9 @@ import { AXStyleColorType } from '@acorex/components/common';
 import { AXBaseComponent } from '@acorex/components/mixin';
 import * as i0 from "@angular/core";
 export declare const AXBaseItemButtonMixin: (abstract new (...args: any[]) => {
-    "__#5095@#disabled": boolean;
+    "__#5174@#disabled": boolean;
     disabled: boolean;
-    "__#5095@#tabIndex": number;
+    "__#5174@#tabIndex": number;
     tabIndex: number;
     onFocus: import("@angular/core").EventEmitter<import("@acorex/components/common").AXFocusEvent>;
     _emitOnFocusEvent(e: FocusEvent): void;
@@ -14,9 +14,9 @@ export declare const AXBaseItemButtonMixin: (abstract new (...args: any[]) => {
     focus(): void;
     hasFocus(): boolean;
     id: string;
-    "__#5092@#rtl": boolean;
+    "__#5171@#rtl": boolean;
     rtl: boolean;
-    "__#5092@#elementRef": ElementRef<any>;
+    "__#5171@#elementRef": ElementRef<any>;
     _cdr: ChangeDetectorRef;
     _isInited: boolean;
     _isRendered: boolean;
@@ -39,9 +39,9 @@ export declare const AXBaseItemButtonMixin: (abstract new (...args: any[]) => {
     onClick: import("@angular/core").EventEmitter<import("@acorex/components/common").AXClickEvent>;
     _emitOnClickEvent(e: MouseEvent): void;
     id: string;
-    "__#5092@#rtl": boolean;
+    "__#5171@#rtl": boolean;
     rtl: boolean;
-    "__#5092@#elementRef": ElementRef<any>;
+    "__#5171@#elementRef": ElementRef<any>;
     _cdr: ChangeDetectorRef;
     _isInited: boolean;
     _isRendered: boolean;

package/calendar/lib/calendar.component.d.ts

@@ -12,6 +12,7 @@ export declare class AXCalendarComponent extends AXCalendarComponent_base {
     private _setDisplayRange;
     protected _today: AXDateTime;
     private _viewStartDate;
+    private _navUserInteraction;
     private _footPrint;
     protected views: AXCalendarView[];
     protected _dayNames: string[];

package/checkbox/lib/checkbox.component.d.ts

@@ -8,9 +8,10 @@ declare const AXCheckBoxComponent_base: import("polytype").Polytype.ClusteredCon
 export declare class AXCheckBoxComponent extends AXCheckBoxComponent_base {
     indeterminate: boolean;
     protected _stateIndeterminate: boolean;
-    protected ngOnInit(): void;
-    setValue(value: any): boolean;
-    protected handleOnClickEvent(e: MouseEvent): boolean;
+    protected internalGetValue(value: any): boolean | null;
+    internalSetValue(value: boolean | null): boolean;
+    protected _handleOnClickEvent(e: MouseEvent): boolean;
+    protected _handleModelChange(value: boolean | null): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXCheckBoxComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AXCheckBoxComponent, "ax-check-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "allowNull": { "alias": "allowNull"; "required": false; }; "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "valueChange": "valueChange"; "onValueChanged": "onValueChanged"; }, never, ["*", "ax-form-hint", "ax-validation-rule"], false, never>;
 }

package/chips/lib/chips.component.d.ts

@@ -1,6 +1,6 @@
-import { MXColorComponent, MXInteractiveComponent } from '@acorex/components/common';
+import { MXBaseComponent, MXColorComponent } from '@acorex/components/common';
 import * as i0 from "@angular/core";
-declare const AXChipsComponent_base: import("polytype").Polytype.ClusteredConstructor<[typeof MXInteractiveComponent, typeof MXColorComponent]>;
+declare const AXChipsComponent_base: import("polytype").Polytype.ClusteredConstructor<[typeof MXBaseComponent, typeof MXColorComponent]>;
 export declare class AXChipsComponent extends AXChipsComponent_base {
     look: 'default' | 'outline';
     text: string;

package/color-palette/lib/color-palette-input.component.d.ts

@@ -1,20 +1,23 @@
+import { AXUnsubscriber } from '@acorex/core/utils';
 import { AXValueChangedEvent, MXBaseComponent } from '@acorex/components/common';
-import { AXColorComponent } from './color-palette.class';
+import { AXColorPaletteParentComponent } from './color-palette.class';
 import { AXMaskOptions } from '@acorex/components/textbox';
 import * as i0 from "@angular/core";
 export declare class AXColorPaletteInputComponent extends MXBaseComponent {
-    _parent: AXColorComponent;
-    _isTouched: boolean;
+    _parent: AXColorPaletteParentComponent;
+    private _unsubscriber;
     isValid: boolean;
     _rgba: any;
     _hex: string;
     protected _colorMode: "hex" | "rgba";
     protected _hexMaskOptions: AXMaskOptions;
-    constructor(_parent: AXColorComponent);
+    constructor(_parent: AXColorPaletteParentComponent, _unsubscriber: AXUnsubscriber);
+    private applyParent;
+    ngAfterViewInit(): void;
     _handleChangeInputMode(): void;
     _handleRGBAValueChanged(e: AXValueChangedEvent<number>): void;
-    _handleHEXAValueChanged(e: AXValueChangedEvent<string>): void;
+    protected _handleHEXAValueChanged(e: AXValueChangedEvent<string>): void;
     private checkValid;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXColorPaletteInputComponent, [{ optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXColorPaletteInputComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AXColorPaletteInputComponent, "ax-color-palette-input", never, {}, {}, never, never, false, never>;
 }

package/color-palette/lib/color-palette-picker.component.d.ts

@@ -1,8 +1,10 @@
+import { AXUnsubscriber } from '@acorex/core/utils';
 import { AXValueChangedEvent, MXBaseComponent } from '@acorex/components/common';
-import { AXColorComponent } from './color-palette.class';
+import { AXColorPaletteParentComponent } from './color-palette.class';
 import * as i0 from "@angular/core";
 export declare class AXColorPalettePickerComponent extends MXBaseComponent {
-    _parent: AXColorComponent;
+    _parent: AXColorPaletteParentComponent;
+    private _unsubscriber;
     _rgba: {
         r: number;
         g: number;
@@ -11,19 +13,22 @@ export declare class AXColorPalettePickerComponent extends MXBaseComponent {
     };
     protected _gradient: number;
     protected _bgColor: string;
-    private _gradientColors;
+    private readonly _gradientColors;
+    private readonly _gradients;
+    private readonly _colors;
     protected dragPosition: {
         x: number;
         y: number;
     };
-    constructor(_parent: AXColorComponent);
+    constructor(_parent: AXColorPaletteParentComponent, _unsubscriber: AXUnsubscriber);
     private setHSV;
+    private _handleParentColorChanged;
     protected _handleAlphaChanged(e: AXValueChangedEvent<number>): void;
     protected _handleGradientChanged(e: AXValueChangedEvent<number>): void;
     protected _handleSurfaceClick(e: MouseEvent): void;
     protected _handleDrag(): void;
     private setColorByXY;
     private setPointerByPercent;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXColorPalettePickerComponent, [{ optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXColorPalettePickerComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AXColorPalettePickerComponent, "ax-color-palette-picker", never, {}, {}, never, never, false, never>;
 }

package/color-palette/lib/color-palette-preview.component.d.ts

@@ -1,11 +1,15 @@
 import { MXBaseComponent } from '@acorex/components/common';
+import { AXUnsubscriber } from '@acorex/core/utils';
 import { NgZone } from '@angular/core';
-import { AXColorComponent } from './color-palette.class';
+import { AXColorPaletteParentComponent } from './color-palette.class';
 import * as i0 from "@angular/core";
 export declare class AXColorPalettePreviewComponent extends MXBaseComponent {
-    _parent: AXColorComponent;
+    _parent: AXColorPaletteParentComponent;
     private _zone;
-    constructor(_parent: AXColorComponent, _zone: NgZone);
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXColorPalettePreviewComponent, [{ optional: true; }, null]>;
+    private _unsubscriber;
+    constructor(_parent: AXColorPaletteParentComponent, _zone: NgZone, _unsubscriber: AXUnsubscriber);
+    ngAfterViewInit(): void;
+    private applyParent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXColorPalettePreviewComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AXColorPalettePreviewComponent, "ax-color-palette-preview", never, {}, {}, never, never, false, never>;
 }

package/color-palette/lib/color-palette-swatches.component.d.ts

@@ -1,17 +1,20 @@
 import { MXBaseComponent } from '@acorex/components/common';
-import { AXColorComponent } from './color-palette.class';
+import { AXUnsubscriber } from '@acorex/core/utils';
+import { AXColorPaletteParentComponent } from './color-palette.class';
 import * as i0 from "@angular/core";
 export declare class AXColorPaletteSwatchesComponent extends MXBaseComponent {
-    _parent: AXColorComponent;
+    _parent: AXColorPaletteParentComponent;
+    private _unsubscriber;
     protected _selected: string;
     colors: {
         code: string;
     }[];
-    constructor(_parent: AXColorComponent);
+    constructor(_parent: AXColorPaletteParentComponent, _unsubscriber: AXUnsubscriber);
+    private applyParent;
     ngOnInit(): void;
-    _handleClick(e: MouseEvent, color: any): void;
+    ngAfterViewInit(): void;
+    protected _handleClick(e: MouseEvent, color: any): void;
     private _format;
-    private _defaultPalette;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXColorPaletteSwatchesComponent, [{ optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXColorPaletteSwatchesComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AXColorPaletteSwatchesComponent, "ax-color-palette-swatches, ax-color-palette-favorite", never, { "colors": { "alias": "colors"; "required": false; }; }, {}, never, never, false, never>;
 }

package/color-palette/lib/color-palette.class.d.ts

@@ -1,4 +1,5 @@
-import { Subject } from "rxjs";
+import { EventEmitter } from "@angular/core";
+import { AXValueChangedEvent, AXOptionChangedEvent } from "@acorex/components/common";
 import * as i0 from "@angular/core";
 /**
 * A token that specifies the  display mode of datapager component.
@@ -8,15 +9,20 @@ export interface AXColorChangedEvent {
     color: any;
     sender: any;
 }
-export declare abstract class AXColorComponent {
-    abstract _onInternalColorChanged$: Subject<AXColorChangedEvent>;
-    abstract setUserInteraction(): any;
+export declare abstract class AXColorPaletteParentComponent {
     abstract readonly: boolean;
     abstract disabled: boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXColorComponent, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<AXColorComponent>;
+    abstract get value(): string;
+    abstract onValueChanged: EventEmitter<AXValueChangedEvent<string>>;
+    abstract onOptionChanged: EventEmitter<AXOptionChangedEvent>;
+    abstract commitValue(value: string, u?: boolean): any;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXColorPaletteParentComponent, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AXColorPaletteParentComponent>;
 }
 export declare abstract class AXColorPaletteChildComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<AXColorPaletteChildComponent, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<AXColorPaletteChildComponent>;
 }
+export declare const AXDefaultColorPalette: {
+    code: string;
+}[];

package/color-palette/lib/color-palette.component.d.ts

@@ -1,22 +1,10 @@
-import { MXValueComponent, MXInteractiveComponent } from '@acorex/components/common';
+import { MXValueComponent } from '@acorex/components/common';
 import { QueryList } from '@angular/core';
-import { Subject } from 'rxjs';
 import { AXColorPaletteChildComponent } from './color-palette.class';
 import * as i0 from "@angular/core";
-declare const AXColorPalleteComponent_base: import("polytype").Polytype.ClusteredConstructor<[typeof MXInteractiveComponent, {
-    new (): MXValueComponent<string>;
-    ɵfac: unknown;
-    ɵprov: import("@angular/core").ɵɵInjectableDeclaration<MXValueComponent<any>>;
-}]>;
-export declare class AXColorPalleteComponent extends AXColorPalleteComponent_base {
-    _onInternalColorChanged$: Subject<any>;
+export declare class AXColorPalleteComponent extends MXValueComponent<string> {
     _children: QueryList<AXColorPaletteChildComponent>;
-    ngAfterContentInit(): void;
-    ngAfterViewInit(): void;
-    constructor();
-    private _handleOnValueChanged;
     private get __hostDisabled();
     static ɵfac: i0.ɵɵFactoryDeclaration<AXColorPalleteComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXColorPalleteComponent, "ax-color-palette", never, { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; }, ["_children"], ["ax-header", "ax-color-palette-preview", "ax-color-palette-picker", "ax-color-palette-swatches", "ax-color-palette-favorite", "ax-color-palette-input", "ax-footer"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXColorPalleteComponent, "ax-color-palette", never, { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; }, ["_children"], ["ax-header", "ax-color-palette-preview", "ax-color-palette-picker", "ax-color-palette-swatches", "ax-color-palette-favorite", "ax-color-palette-input", "ax-footer"], false, never>;
 }
-export {};

package/color-palette/lib/color-palette.module.d.ts

@@ -5,15 +5,16 @@ import * as i3 from "./color-palette-swatches.component";
 import * as i4 from "./color-palette-input.component";
 import * as i5 from "./color-palette-picker.component";
 import * as i6 from "@angular/common";
-import * as i7 from "@acorex/components/textbox";
-import * as i8 from "@acorex/components/label";
-import * as i9 from "@acorex/components/button";
-import * as i10 from "@acorex/components/decorators";
-import * as i11 from "@acorex/components/number-box";
-import * as i12 from "@acorex/components/range-slider";
-import * as i13 from "@angular/cdk/drag-drop";
+import * as i7 from "@angular/forms";
+import * as i8 from "@acorex/components/textbox";
+import * as i9 from "@acorex/components/label";
+import * as i10 from "@acorex/components/button";
+import * as i11 from "@acorex/components/decorators";
+import * as i12 from "@acorex/components/number-box";
+import * as i13 from "@acorex/components/range-slider";
+import * as i14 from "@angular/cdk/drag-drop";
 export declare class AXColorPaletteModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AXColorPaletteModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXColorPaletteModule, [typeof i1.AXColorPalleteComponent, typeof i2.AXColorPalettePreviewComponent, typeof i3.AXColorPaletteSwatchesComponent, typeof i4.AXColorPaletteInputComponent, typeof i5.AXColorPalettePickerComponent], [typeof i6.CommonModule, typeof i7.AXTextBoxModule, typeof i8.AXLabelModule, typeof i9.AXButtonModule, typeof i10.AXDecoratorModule, typeof i11.AXNumberBoxModule, typeof i12.AXRangeSliderModule, typeof i13.DragDropModule], [typeof i1.AXColorPalleteComponent, typeof i2.AXColorPalettePreviewComponent, typeof i3.AXColorPaletteSwatchesComponent, typeof i4.AXColorPaletteInputComponent, typeof i5.AXColorPalettePickerComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXColorPaletteModule, [typeof i1.AXColorPalleteComponent, typeof i2.AXColorPalettePreviewComponent, typeof i3.AXColorPaletteSwatchesComponent, typeof i4.AXColorPaletteInputComponent, typeof i5.AXColorPalettePickerComponent], [typeof i6.CommonModule, typeof i7.FormsModule, typeof i8.AXTextBoxModule, typeof i9.AXLabelModule, typeof i10.AXButtonModule, typeof i11.AXDecoratorModule, typeof i12.AXNumberBoxModule, typeof i13.AXRangeSliderModule, typeof i14.DragDropModule], [typeof i1.AXColorPalleteComponent, typeof i2.AXColorPalettePreviewComponent, typeof i3.AXColorPaletteSwatchesComponent, typeof i4.AXColorPaletteInputComponent, typeof i5.AXColorPalettePickerComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AXColorPaletteModule>;
 }

package/color-picker/lib/color-picker.component.d.ts

@@ -6,9 +6,9 @@ import { AXPopoverComponent } from '@acorex/components/popover';
 import { AXBaseComponent } from '@acorex/components/mixin';
 import * as i0 from "@angular/core";
 export declare const AXBaseColorPickerMixin: (abstract new (...args: any[]) => {
-    "__#5095@#disabled": boolean;
+    "__#5174@#disabled": boolean;
     disabled: boolean;
-    "__#5095@#tabIndex": number;
+    "__#5174@#tabIndex": number;
     tabIndex: number;
     onFocus: import("@angular/core").EventEmitter<import("@acorex/components/common").AXFocusEvent>;
     _emitOnFocusEvent(e: FocusEvent): void;
@@ -17,9 +17,9 @@ export declare const AXBaseColorPickerMixin: (abstract new (...args: any[]) => {
     focus(): void;
     hasFocus(): boolean;
     id: string;
-    "__#5092@#rtl": boolean;
+    "__#5171@#rtl": boolean;
     rtl: boolean;
-    "__#5092@#elementRef": ElementRef<any>;
+    "__#5171@#elementRef": ElementRef<any>;
     _cdr: ChangeDetectorRef;
     _isInited: boolean;
     _isRendered: boolean;
@@ -58,9 +58,9 @@ export declare const AXBaseColorPickerMixin: (abstract new (...args: any[]) => {
     open(): void;
     readonly isOpen: boolean;
     id: string;
-    "__#5092@#rtl": boolean;
+    "__#5171@#rtl": boolean;
     rtl: boolean;
-    "__#5092@#elementRef": ElementRef<any>;
+    "__#5171@#elementRef": ElementRef<any>;
     _cdr: ChangeDetectorRef;
     _isInited: boolean;
     _isRendered: boolean;
@@ -81,17 +81,17 @@ export declare const AXBaseColorPickerMixin: (abstract new (...args: any[]) => {
     onValueChanged: import("@angular/core").EventEmitter<AXValueChangedEvent<any>>;
     valueChange: import("@angular/core").EventEmitter<any>;
     stateChange: import("@angular/core").EventEmitter<import("@acorex/components/mixin").AXComponentState>;
-    "__#5096@#readonly": boolean;
+    "__#5175@#readonly": boolean;
     readonly: boolean;
-    "__#5096@#allowNull": boolean;
+    "__#5175@#allowNull": boolean;
     allowNull: boolean;
-    "__#5096@#name": string;
+    "__#5175@#name": string;
     name: string;
-    "__#5096@#isUserInteraction": boolean;
+    "__#5175@#isUserInteraction": boolean;
     readonly isUserInteraction: boolean;
-    "__#5096@#value": any;
+    "__#5175@#value": any;
     value: any;
-    "__#5096@#state": import("@acorex/components/mixin").AXComponentState;
+    "__#5175@#state": import("@acorex/components/mixin").AXComponentState;
     state: import("@acorex/components/mixin").AXComponentState;
     _emitOnValueChangedEvent(oldValue?: any, newValue?: any): void;
     _internalSetValue(value: any): any;
@@ -109,9 +109,9 @@ export declare const AXBaseColorPickerMixin: (abstract new (...args: any[]) => {
     validate(): Promise<any>;
     _setState(state: import("@acorex/components/mixin").AXComponentState, ...args: any[]): void;
     id: string;
-    "__#5092@#rtl": boolean;
+    "__#5171@#rtl": boolean;
     rtl: boolean;
-    "__#5092@#elementRef": ElementRef<any>;
+    "__#5171@#elementRef": ElementRef<any>;
     _cdr: ChangeDetectorRef;
     _isInited: boolean;
     _isRendered: boolean; /**
@@ -141,9 +141,9 @@ export declare const AXBaseColorPickerMixin: (abstract new (...args: any[]) => {
     _emitOnKeyupEvent(e: KeyboardEvent): void;
     _emitOnKeypressEvent(e: KeyboardEvent): void;
     id: string;
-    "__#5092@#rtl": boolean;
+    "__#5171@#rtl": boolean;
     rtl: boolean;
-    "__#5092@#elementRef": ElementRef<any>;
+    "__#5171@#elementRef": ElementRef<any>;
     _cdr: ChangeDetectorRef;
     _isInited: boolean;
     _isRendered: boolean;

package/common/index.d.ts

@@ -11,6 +11,7 @@ export * from './lib/components/colorlook-component.class';
 export * from './lib/components/interactive-component.class';
 export * from './lib/components/look-component.class';
 export * from './lib/components/value-component.class';
+export * from './lib/components/input-base-value-component.class';
 export * from './lib/constant/positions';
 export * from './lib/directives/auto-focus.directive';
 export * from './lib/directives/debounce-time.directive';

package/common/lib/classes/components.class.d.ts

@@ -36,8 +36,9 @@ export declare abstract class AXSearchableComponent extends AXComponent {
     static ɵprov: i0.ɵɵInjectableDeclaration<AXSearchableComponent>;
 }
 export declare abstract class AXValuableComponent extends AXComponent {
+    abstract get value(): any;
     abstract onValueChanged: EventEmitter<AXValueChangedEvent<any>>;
-    abstract value: any;
+    abstract commitValue(value: any, u: boolean): any;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXValuableComponent, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<AXValuableComponent>;
 }

package/common/lib/components/base-component.class.d.ts

@@ -5,6 +5,7 @@ export type MXComponentOptionChanging<T = any> = {
     name: string;
     value?: T;
 };
+export type MXComponentOptionChanged<T = any> = MXComponentOptionChanging<T>;
 export type MXComponentSetOption<T> = {
     name: string;
     value?: T;
@@ -20,9 +21,10 @@ export declare abstract class MXBaseComponent {
     protected get cdr(): ChangeDetectorRef;
     getHostElement<T = HTMLElement>(): T;
     protected getViewContainer(): ViewContainerRef;
-    protected onOptionChanging(option: MXComponentOptionChanging): any;
+    protected internalOptionChanging(option: MXComponentOptionChanging): any;
+    protected internalOptionChanged(option: MXComponentOptionChanged): void;
     protected init(): void;
-    protected onOptionChanged: EventEmitter<AXOptionChangedEvent>;
+    onOptionChanged: EventEmitter<AXOptionChangedEvent>;
     protected setOption<T = any>(option: MXComponentSetOption<T>): void;
     private _rtl;
     get rtl(): boolean;

package/common/lib/components/input-base-value-component.class.d.ts

@@ -0,0 +1,26 @@
+import { EventEmitter } from "@angular/core";
+import { MXValueComponent } from "./value-component.class";
+import { AXHtmlEvent } from "../classes/events.class";
+import * as i0 from "@angular/core";
+export declare class MXInputBaseValueComponent<T = string> extends MXValueComponent<T> {
+    /**
+    *  Fires each time the user press a key.
+    *  @event
+    */
+    onKeyDown: EventEmitter<AXHtmlEvent<KeyboardEvent>>;
+    /**
+    *  Fires each time the user press a key.
+    *  @event
+    */
+    onKeyUp: EventEmitter<AXHtmlEvent<KeyboardEvent>>;
+    /**
+    *  Fires each time the user press a key.
+    *  @event
+    */
+    onKeyPress: EventEmitter<AXHtmlEvent<KeyboardEvent>>;
+    protected emitOnKeydownEvent(e: KeyboardEvent): void;
+    protected emitOnKeyupEvent(e: KeyboardEvent): void;
+    protected emitOnKeypressEvent(e: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MXInputBaseValueComponent<any>, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MXInputBaseValueComponent<any>>;
+}

package/common/lib/components/interactive-component.class.d.ts

@@ -2,12 +2,19 @@ import { EventEmitter } from '@angular/core';
 import { AXFocusEvent } from '../classes/events.class';
 import { MXBaseComponent } from './base-component.class';
 export declare class MXInteractiveComponent extends MXBaseComponent {
+    protected onTouchedCallback: () => void;
+    registerOnTouched(fn: () => void): void;
+    private _touched;
+    get touched(): boolean;
+    protected markAsTouched(): void;
+    disabledChange: EventEmitter<boolean>;
     private _disabled;
     /**
      *  If set to true, it disables the component.
      */
     get disabled(): boolean;
     set disabled(value: boolean);
+    setDisabledState(isDisabled: boolean): void;
     _tabIndex: number;
     /**
      *  Specifies the tabindex of the component.

package/common/lib/components/value-component.class.d.ts

@@ -1,8 +1,10 @@
 import { EventEmitter } from '@angular/core';
-import { AXComponentState, MXBaseComponent } from './base-component.class';
+import { AXComponentState } from './base-component.class';
+import { MXInteractiveComponent } from './interactive-component.class';
 import { AXValueChangedEvent } from '../classes/events.class';
+import { ControlValueAccessor } from '@angular/forms';
 import * as i0 from "@angular/core";
-export declare class MXValueComponent<T = any> extends MXBaseComponent {
+export declare class MXValueComponent<T = any> extends MXInteractiveComponent implements ControlValueAccessor {
     /**
      *  Fires each time the user press a key.
      *  @event
@@ -10,6 +12,7 @@ export declare class MXValueComponent<T = any> extends MXBaseComponent {
     onValueChanged: EventEmitter<AXValueChangedEvent<any>>;
     valueChange: EventEmitter<any>;
     stateChange: EventEmitter<AXComponentState>;
+    readonlyChange: EventEmitter<boolean>;
     private _readonly;
     /**
      *  If set to true, user cannot change the value of component.
@@ -19,10 +22,10 @@ export declare class MXValueComponent<T = any> extends MXBaseComponent {
     private _name;
     get name(): string;
     set name(value: string);
+    private _dirty;
+    get dirty(): boolean;
+    markAsDirty(): void;
     private _isUserInteraction;
-    get isUserInteraction(): boolean;
-    set isUserInteraction(value: boolean);
-    protected setUserInteraction(): void;
     initValue: T;
     defaultValue: T;
     private _value;
@@ -32,15 +35,19 @@ export declare class MXValueComponent<T = any> extends MXBaseComponent {
     get state(): AXComponentState;
     set state(value: AXComponentState);
     protected emitOnValueChangedEvent(oldValue?: any, newValue?: any): void;
-    protected setValue(value: any): any;
-    protected getValue(value: any): any;
+    protected internalSetValue(value: any): T;
+    protected internalGetValue(value: any): T;
+    protected internalValueChanged(value: any): void;
     protected ngOnInit(): void;
     protected ngAfterViewInit(): void;
     protected ngOnDestroy(): void;
-    clear(): void;
     private _checkRequired;
     validate(): Promise<any>;
     protected setState(state: AXComponentState, ...args: any[]): void;
+    protected onChangeCallback: (value: T) => void;
+    registerOnChange(fn: (value: T) => void): void;
+    writeValue(value: T): void;
+    commitValue(value: T, u?: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MXValueComponent<any>, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<MXValueComponent<any>>;
 }

package/drawer/lib/drawer.component.d.ts

@@ -1,5 +1,5 @@
-import { ElementRef, ChangeDetectorRef, NgZone, EventEmitter } from '@angular/core';
 import { AXBaseComponentMixin, AXComponentOptionChanged } from '@acorex/components/mixin';
+import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone } from '@angular/core';
 import * as i0 from "@angular/core";
 export type AXDrawerMode = 'push' | 'overlay';
 export type AXDrawerLocation = 'start' | 'end';

package/esm2022/acorex-components.mjs

@@ -2,4 +2,4 @@
  * Generated bundle index. Do not edit.
  */
 export * from './index';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNvcmV4LWNvbXBvbmVudHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvc3JjL2Fjb3JleC1jb21wb25lbnRzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxTQUFTLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vaW5kZXgnO1xuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNvcmV4LWNvbXBvbmVudHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvYWNvcmV4LWNvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLFNBQVMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9pbmRleCc7XG4iXX0=

package/esm2022/action-sheet/lib/action-sheet.component.mjs

@@ -61,10 +61,10 @@ export class AXActionSheetComponent extends MXBaseComponent {
         this.close();
         item.onClick();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXActionSheetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AXActionSheetComponent, selector: "ax-action-sheet", host: { listeners: { "keydown.escape": "onKeydownHandler()" } }, usesInheritance: true, ngImport: i0, template: "<ax-header *ngIf=\"showHeader\">\n  <ax-prefix>\n    <ax-title>{{ title }}</ax-title>\n    <ax-sub-title *ngIf=\"subTitle\">{{ subTitle }}</ax-sub-title>\n  </ax-prefix>\n  <ax-suffix>\n    <ax-close-button\n      *ngIf=\"showCloseButton\"\n      (click)=\"_handleCloseClick()\"\n      tabindex=\"1\"\n    ></ax-close-button>\n  </ax-suffix>\n</ax-header>\n<ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\n<div class=\"ax-action-sheet-items\">\n  <ng-container *ngFor=\"let item of items\">\n    <div\n      class=\"ax-action-sheet-item ax-{{ item.color }}\"\n      [class.ax-state-disabled]=\"item.disabled\"\n      (click)=\"onItemClick(item)\"\n    >\n      <span class=\"item-icon\" *ngIf=\"item.icon\" [class]=\"item.icon\"></span>\n      <span class=\"item-text\">{{ item.text }}</span>\n    </div>\n  </ng-container>\n</div>\n", styles: ["@media (max-width: 599px){ax-action-sheet{width:100vw}}@media (min-width: 600px){ax-action-sheet{width:75vw}}@media (min-width: 1200px){ax-action-sheet{width:30vw}}@media (min-width: 1800px){ax-action-sheet{width:25vw}}ax-action-sheet ax-header{padding:1rem;font-size:1.125rem;font-weight:500;border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-action-sheet ax-header ax-prefix,ax-action-sheet ax-header ax-suffix{display:flex;flex-direction:column;justify-content:flex-start}ax-action-sheet ax-header ax-prefix{align-items:flex-start}ax-action-sheet ax-header ax-suffix{align-items:flex-end}@media (max-width: 599px){ax-action-sheet ax-header{font-size:1rem}}ax-action-sheet .ax-action-sheet-items{padding:.5rem 0}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item{-webkit-user-select:none;user-select:none;cursor:pointer;padding:.75rem 1rem;display:flex}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item:hover{background-color:rgba(var(--ax-color-default))}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item .item-icon{font-size:1.5rem;margin-inline-end:.75rem}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item.ax-primary{color:rgba(var(--ax-color-primary-500))}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item.ax-secondary{color:rgba(var(--ax-color-secondary-500))}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item.ax-success{color:rgba(var(--ax-color-success-500))}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item.ax-warning{color:rgba(var(--ax-color-warning-500))}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item.ax-danger{color:rgba(var(--ax-color-danger-500))}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item.ax-info{color:rgba(var(--ax-color-info-500))}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i3.AXDecoratorPrefixComponent, selector: "ax-prefix" }, { kind: "component", type: i3.AXDecoratorSuffixComponent, selector: "ax-suffix" }, { kind: "component", type: i3.AXDecoratorHeaderComponent, selector: "ax-header" }, { kind: "component", type: i3.AXDecoratorTitleComponent, selector: "ax-title" }, { kind: "component", type: i3.AXDecoratorSubTitleComponent, selector: "ax-sub-title" }, { kind: "component", type: i3.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXActionSheetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AXActionSheetComponent, selector: "ax-action-sheet", host: { listeners: { "keydown.escape": "onKeydownHandler()" } }, usesInheritance: true, ngImport: i0, template: "<ax-header *ngIf=\"showHeader\">\n  <ax-prefix>\n    <ax-title>{{ title }}</ax-title>\n    <ax-sub-title *ngIf=\"subTitle\">{{ subTitle }}</ax-sub-title>\n  </ax-prefix>\n  <ax-suffix>\n    <ax-close-button\n      *ngIf=\"showCloseButton\"\n      (click)=\"_handleCloseClick()\"\n      tabindex=\"1\"\n    ></ax-close-button>\n  </ax-suffix>\n</ax-header>\n<ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\n<div class=\"ax-action-sheet-items\">\n  <ng-container *ngFor=\"let item of items\">\n    <div\n      class=\"ax-action-sheet-item ax-{{ item.color }}\"\n      [class.ax-state-disabled]=\"item.disabled\"\n      (click)=\"onItemClick(item)\"\n    >\n      <span class=\"item-icon\" *ngIf=\"item.icon\" [class]=\"item.icon\"></span>\n      <span class=\"item-text\">{{ item.text }}</span>\n    </div>\n  </ng-container>\n</div>\n", styles: ["@media (max-width: 599px){ax-action-sheet{width:100vw}}@media (min-width: 600px){ax-action-sheet{width:75vw}}@media (min-width: 1200px){ax-action-sheet{width:30vw}}@media (min-width: 1800px){ax-action-sheet{width:25vw}}ax-action-sheet ax-header{padding:1rem;font-size:1.125rem;font-weight:500;border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-action-sheet ax-header ax-prefix,ax-action-sheet ax-header ax-suffix{display:flex;flex-direction:column;justify-content:flex-start}ax-action-sheet ax-header ax-prefix{align-items:flex-start}ax-action-sheet ax-header ax-suffix{align-items:flex-end}@media (max-width: 599px){ax-action-sheet ax-header{font-size:1rem}}ax-action-sheet .ax-action-sheet-items{padding:.5rem 0}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item{-webkit-user-select:none;user-select:none;cursor:pointer;padding:.75rem 1rem;display:flex}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item:hover{background-color:rgba(var(--ax-color-default))}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item .item-icon{font-size:1.5rem;margin-inline-end:.75rem}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item.ax-primary{color:rgba(var(--ax-color-primary-500))}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item.ax-secondary{color:rgba(var(--ax-color-secondary-500))}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item.ax-success{color:rgba(var(--ax-color-success-500))}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item.ax-warning{color:rgba(var(--ax-color-warning-500))}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item.ax-danger{color:rgba(var(--ax-color-danger-500))}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item.ax-info{color:rgba(var(--ax-color-info-500))}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i3.AXDecoratorPrefixComponent, selector: "ax-prefix" }, { kind: "component", type: i3.AXDecoratorSuffixComponent, selector: "ax-suffix" }, { kind: "component", type: i3.AXDecoratorHeaderComponent, selector: "ax-header" }, { kind: "component", type: i3.AXDecoratorTitleComponent, selector: "ax-title" }, { kind: "component", type: i3.AXDecoratorSubTitleComponent, selector: "ax-sub-title" }, { kind: "component", type: i3.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXActionSheetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXActionSheetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-action-sheet', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ax-header *ngIf=\"showHeader\">\n  <ax-prefix>\n    <ax-title>{{ title }}</ax-title>\n    <ax-sub-title *ngIf=\"subTitle\">{{ subTitle }}</ax-sub-title>\n  </ax-prefix>\n  <ax-suffix>\n    <ax-close-button\n      *ngIf=\"showCloseButton\"\n      (click)=\"_handleCloseClick()\"\n      tabindex=\"1\"\n    ></ax-close-button>\n  </ax-suffix>\n</ax-header>\n<ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\n<div class=\"ax-action-sheet-items\">\n  <ng-container *ngFor=\"let item of items\">\n    <div\n      class=\"ax-action-sheet-item ax-{{ item.color }}\"\n      [class.ax-state-disabled]=\"item.disabled\"\n      (click)=\"onItemClick(item)\"\n    >\n      <span class=\"item-icon\" *ngIf=\"item.icon\" [class]=\"item.icon\"></span>\n      <span class=\"item-text\">{{ item.text }}</span>\n    </div>\n  </ng-container>\n</div>\n", styles: ["@media (max-width: 599px){ax-action-sheet{width:100vw}}@media (min-width: 600px){ax-action-sheet{width:75vw}}@media (min-width: 1200px){ax-action-sheet{width:30vw}}@media (min-width: 1800px){ax-action-sheet{width:25vw}}ax-action-sheet ax-header{padding:1rem;font-size:1.125rem;font-weight:500;border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-action-sheet ax-header ax-prefix,ax-action-sheet ax-header ax-suffix{display:flex;flex-direction:column;justify-content:flex-start}ax-action-sheet ax-header ax-prefix{align-items:flex-start}ax-action-sheet ax-header ax-suffix{align-items:flex-end}@media (max-width: 599px){ax-action-sheet ax-header{font-size:1rem}}ax-action-sheet .ax-action-sheet-items{padding:.5rem 0}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item{-webkit-user-select:none;user-select:none;cursor:pointer;padding:.75rem 1rem;display:flex}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item:hover{background-color:rgba(var(--ax-color-default))}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item .item-icon{font-size:1.5rem;margin-inline-end:.75rem}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item.ax-primary{color:rgba(var(--ax-color-primary-500))}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item.ax-secondary{color:rgba(var(--ax-color-secondary-500))}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item.ax-success{color:rgba(var(--ax-color-success-500))}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item.ax-warning{color:rgba(var(--ax-color-warning-500))}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item.ax-danger{color:rgba(var(--ax-color-danger-500))}ax-action-sheet .ax-action-sheet-items .ax-action-sheet-item.ax-info{color:rgba(var(--ax-color-info-500))}\n"] }]
         }], propDecorators: { onKeydownHandler: [{