@acorex/components 19.10.0-next.1 → 19.10.0-next.10

package/avatar/lib/avatar.component.d.ts

@@ -22,7 +22,8 @@ export declare class AXAvatarComponent extends MXColorComponent {
      *
      * @defaultValue 'rounded'
      */
-    look: import("@angular/core").InputSignal<"sharp" | "soft" | "rounded">;
+    shape: import("@angular/core").InputSignal<"sharp" | "soft" | "rounded">;
+    look: import("@angular/core").InputSignal<"solid" | "twotone">;
     /**
      *  @ignore
      */
@@ -32,5 +33,5 @@ export declare class AXAvatarComponent extends MXColorComponent {
      */
     private get __hostStyle();
     static ɵfac: i0.ɵɵFactoryDeclaration<AXAvatarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXAvatarComponent, "ax-avatar", never, { "color": { "alias": "color"; "required": false; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; }, { "size": "sizeChange"; }, ["children"], ["ax-text, ax-image, ax-icon", "ax-badge"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXAvatarComponent, "ax-avatar", never, { "color": { "alias": "color"; "required": false; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; }, { "size": "sizeChange"; }, ["children"], ["ax-text, ax-image, ax-icon", "ax-badge"], false, never>;
 }

package/badge/lib/badge.component.d.ts

@@ -1,6 +1,6 @@
-import { MXColorLookComponent } from '@acorex/components/common';
+import { MXColorComponent } from '@acorex/components/common';
 import * as i0 from "@angular/core";
-export declare class AXBadgeComponent extends MXColorLookComponent {
+export declare class AXBadgeComponent extends MXColorComponent {
     /**
      * Defines the text displayed inside the badge.
      *

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

@@ -1,7 +1,6 @@
 import { AXClickEvent, MXButtonBaseComponent } from '@acorex/components/common';
 import { AfterViewInit, EventEmitter } from '@angular/core';
 import { AXButtonType } from './button-item.class';
-import { AXResponsiveOn } from './button.class';
 import * as i0 from "@angular/core";
 /**
  * The Button is a component which detects user interaction and triggers a corresponding event
@@ -20,10 +19,6 @@ export declare class AXButtonComponent extends MXButtonBaseComponent implements
      * @defaultValue 'button'
      */
     type: import("@angular/core").InputSignal<AXButtonType>;
-    /**
-     * convert button to just icon in specific break points.
-     */
-    responsiveOn: import("@angular/core").ModelSignal<AXResponsiveOn>;
     /**
      * Defines the text displayed while the action sheet is loading.
      *
@@ -61,5 +56,5 @@ export declare class AXButtonComponent extends MXButtonBaseComponent implements
      */
     blur(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXButtonComponent, "ax-button", never, { "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "color": { "alias": "color"; "required": false; }; "look": { "alias": "look"; "required": false; }; "text": { "alias": "text"; "required": false; }; "toggleable": { "alias": "toggleable"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "responsiveOn": { "alias": "responsiveOn"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "selectedChange": "selectedChange"; "toggleableChange": "toggleableChange"; "lookChange": "lookChange"; "colorChange": "colorChange"; "disabledChange": "disabledChange"; "responsiveOn": "responsiveOnChange"; "loadingText": "loadingTextChange"; }, never, ["ax-loading, ax-loading-spinner", "ax-prefix,ax-icon", "ax-content", "ax-suffix", "ax-dropdown-panel", ".tab-content"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXButtonComponent, "ax-button", never, { "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "color": { "alias": "color"; "required": false; }; "look": { "alias": "look"; "required": false; }; "text": { "alias": "text"; "required": false; }; "toggleable": { "alias": "toggleable"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "selectedChange": "selectedChange"; "toggleableChange": "toggleableChange"; "lookChange": "lookChange"; "colorChange": "colorChange"; "disabledChange": "disabledChange"; "loadingText": "loadingTextChange"; }, never, ["ax-loading, ax-loading-spinner", "ax-prefix, ax-icon", "ax-content", "ax-suffix", "ax-dropdown-panel", ".tab-content", "*"], false, never>;
 }

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

@@ -1,5 +1,6 @@
 import { AXClickEvent, AXStyleColorType, MXColorComponent, MXInteractiveComponent } from '@acorex/components/common';
 import { EventEmitter } from '@angular/core';
+import { AXButtonGroupComponent } from './button-group.component';
 import * as i0 from "@angular/core";
 export interface AXButtonItemListItem {
     name: string;
@@ -16,6 +17,7 @@ declare const AXButtonGroupItemComponent_base: import("polytype").Polytype.Clust
  * @category Components
  */
 export declare class AXButtonGroupItemComponent extends AXButtonGroupItemComponent_base {
+    btnGroup: AXButtonGroupComponent;
     /**
      * Text displayed on the button item.
      */
@@ -72,6 +74,6 @@ export declare class AXButtonGroupItemComponent extends AXButtonGroupItemCompone
      */
     tabindex: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXButtonGroupItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXButtonGroupItemComponent, "ax-button-group-item", never, { "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "text": { "alias": "text"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "divided": { "alias": "divided"; "required": false; }; "data": { "alias": "data"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, { "onClick": "onClick"; "onFocus": "onFocus"; "onBlur": "onBlur"; "disabledChange": "disabledChange"; }, never, ["ax-prefix", "ax-loading", "ax-icon", "ax-suffix", "ax-dropdown-panel"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXButtonGroupItemComponent, "ax-button-group-item", never, { "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "text": { "alias": "text"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "divided": { "alias": "divided"; "required": false; }; "data": { "alias": "data"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, { "onClick": "onClick"; "onFocus": "onFocus"; "onBlur": "onBlur"; "disabledChange": "disabledChange"; }, never, ["*"], false, never>;
 }
 export {};

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

@@ -1,5 +1,6 @@
 import { AXClickEvent, AXSelectionMode, MXColorLookComponent, MXInteractiveComponent } from '@acorex/components/common';
-import { AfterContentInit, EventEmitter } from '@angular/core';
+import { EventEmitter } from '@angular/core';
+import { AXButtonGroupItemComponent } from './button-group-item.component';
 import * as i0 from "@angular/core";
 declare const AXButtonGroupComponent_base: import("polytype").Polytype.ClusteredConstructor<[typeof MXInteractiveComponent, typeof MXColorLookComponent]>;
 /**
@@ -7,7 +8,8 @@ declare const AXButtonGroupComponent_base: import("polytype").Polytype.Clustered
  *
  * @category Components
  */
-export declare class AXButtonGroupComponent extends AXButtonGroupComponent_base implements AfterContentInit {
+export declare class AXButtonGroupComponent extends AXButtonGroupComponent_base {
+    #private;
     /**
      * Fires when any button in the group is clicked.
      *
@@ -24,6 +26,7 @@ export declare class AXButtonGroupComponent extends AXButtonGroupComponent_base
      * @event
      */
     selectionChange: EventEmitter<AXSelectionMode>;
+    selectedButtonChange: import("@angular/core").OutputEmitterRef<AXButtonGroupItemComponent>;
     /**
      *  @ignore
      */
@@ -38,10 +41,6 @@ export declare class AXButtonGroupComponent extends AXButtonGroupComponent_base
      * @param value - The selection mode to be set. Possible values include 'single', 'multiple', or 'none'.
      */
     set selection(value: AXSelectionMode);
-    /**
-     *  @ignore
-     */
-    ngAfterContentInit(): void;
     /**
      *  @ignore
      */
@@ -75,6 +74,6 @@ export declare class AXButtonGroupComponent extends AXButtonGroupComponent_base
      */
     private __hostClick;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXButtonGroupComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXButtonGroupComponent, "ax-button-group", never, { "disabled": { "alias": "disabled"; "required": false; }; "color": { "alias": "color"; "required": false; }; "look": { "alias": "look"; "required": false; }; "selection": { "alias": "selection"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "lookChange": "lookChange"; "colorChange": "colorChange"; "disabledChange": "disabledChange"; "onClick": "onClick"; "selectionChange": "selectionChange"; }, ["_contentButtons"], ["ax-button-group-item"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXButtonGroupComponent, "ax-button-group", never, { "disabled": { "alias": "disabled"; "required": false; }; "color": { "alias": "color"; "required": false; }; "look": { "alias": "look"; "required": false; }; "selection": { "alias": "selection"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "lookChange": "lookChange"; "colorChange": "colorChange"; "disabledChange": "disabledChange"; "onClick": "onClick"; "selectionChange": "selectionChange"; "selectedButtonChange": "selectedButtonChange"; }, ["_contentButtons"], ["ax-button-group-item"], false, never>;
 }
 export {};

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

@@ -3,8 +3,9 @@ import * as i1 from "./button-group.component";
 import * as i2 from "./button-group-item.component";
 import * as i3 from "@angular/common";
 import * as i4 from "@acorex/components/decorators";
+import * as i5 from "@acorex/components/button";
 export declare class AXButtonGroupModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AXButtonGroupModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXButtonGroupModule, [typeof i1.AXButtonGroupComponent, typeof i2.AXButtonGroupItemComponent], [typeof i3.CommonModule, typeof i4.AXDecoratorModule], [typeof i1.AXButtonGroupComponent, typeof i2.AXButtonGroupItemComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXButtonGroupModule, [typeof i1.AXButtonGroupComponent, typeof i2.AXButtonGroupItemComponent], [typeof i3.CommonModule, typeof i4.AXDecoratorModule, typeof i5.AXButtonModule], [typeof i1.AXButtonGroupComponent, typeof i2.AXButtonGroupItemComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AXButtonGroupModule>;
 }

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

@@ -1,22 +1,26 @@
-import { MXColorLookComponent } from '@acorex/components/common';
+import { AXStyleLookType, AXStyleSizeType, MXColorComponent } from '@acorex/components/common';
 import * as i0 from "@angular/core";
 import * as i1 from "@acorex/components/common";
+export type AXChipsLookType = Extract<AXStyleLookType, 'solid' | 'outline' | 'twotone'>;
+export type AXChipsSizeType = Exclude<AXStyleSizeType, 'ax-xs' | 'ax-xl'>;
 /**
  * A component for displaying and managing a set of chips.
  *
  * @category Components
  */
-export declare class AXChipsComponent extends MXColorLookComponent {
+export declare class AXChipsComponent extends MXColorComponent {
     /**
-   * The text displayed on the chips.
-   *
-   * @defaultValue ''
-   */
+     * The text displayed on the chips.
+     *
+     * @defaultValue ''
+     */
     text: import("@angular/core").ModelSignal<string>;
+    look: import("@angular/core").ModelSignal<AXChipsLookType>;
+    size: import("@angular/core").ModelSignal<AXChipsSizeType>;
     /**
      *  @ignore
      */
     private get __hostClass();
     static ɵfac: i0.ɵɵFactoryDeclaration<AXChipsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXChipsComponent, "ax-chips", never, { "tabIndex": { "alias": "tabIndex"; "required": false; }; "color": { "alias": "color"; "required": false; }; "look": { "alias": "look"; "required": false; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; }, { "text": "textChange"; }, never, ["ax-prefix", "ax-suffix"], false, [{ directive: typeof i1.AXRippleDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXChipsComponent, "ax-chips", never, { "tabIndex": { "alias": "tabIndex"; "required": false; }; "color": { "alias": "color"; "required": false; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "text": "textChange"; "look": "lookChange"; "size": "sizeChange"; }, never, ["ax-prefix", "ax-suffix"], false, [{ directive: typeof i1.AXRippleDirective; inputs: {}; outputs: {}; }]>;
 }

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

@@ -13,6 +13,10 @@ declare const AXColorBoxComponent_base: import("polytype").Polytype.ClusteredCon
  * @category Components
  */
 export declare class AXColorBoxComponent extends AXColorBoxComponent_base {
+    showBadge: import("@angular/core").InputSignal<boolean>;
+    showValue: import("@angular/core").InputSignal<boolean>;
+    showClearButton: import("@angular/core").InputSignal<boolean>;
+    showIcon: import("@angular/core").InputSignal<boolean>;
     /**
      *  @ignore
      */
@@ -50,6 +54,6 @@ export declare class AXColorBoxComponent extends AXColorBoxComponent_base {
      */
     internalValueChanged(value?: Date): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXColorBoxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXColorBoxComponent, "ax-color-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "type": { "alias": "type"; "required": false; }; "look": { "alias": "look"; "required": false; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-validation-rule"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXColorBoxComponent, "ax-color-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "type": { "alias": "type"; "required": false; }; "look": { "alias": "look"; "required": false; }; "showBadge": { "alias": "showBadge"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-validation-rule"], false, never>;
 }
 export {};

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

@@ -1,5 +1,6 @@
 import { MXBaseComponent } from '@acorex/components/common';
 import { AXUnsubscriber } from '@acorex/core/utils';
+import { ElementRef, NgZone, OnDestroy, Renderer2 } from '@angular/core';
 import { AXColorPaletteParentComponent } from './color-palette.class';
 import * as i0 from "@angular/core";
 /**
@@ -7,9 +8,11 @@ import * as i0 from "@angular/core";
  *
  * @category Components
  */
-export declare class AXColorPalettePickerComponent extends MXBaseComponent {
+export declare class AXColorPalettePickerComponent extends MXBaseComponent implements OnDestroy {
     _parent: AXColorPaletteParentComponent;
     private _unsubscriber;
+    render: Renderer2;
+    zone: NgZone;
     _rgba: {
         r: number;
         g: number;
@@ -26,6 +29,14 @@ export declare class AXColorPalettePickerComponent extends MXBaseComponent {
      *  @ignore
      */
     protected _bgColor: string;
+    protected colorBoxGradientBG: import("@angular/core").WritableSignal<string>;
+    protected colorBoxTransparentColor: {
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+    };
+    protected sample: import("@angular/core").Signal<ElementRef<HTMLDivElement>>;
     /**
      *  @ignore
      */
@@ -41,10 +52,13 @@ export declare class AXColorPalettePickerComponent extends MXBaseComponent {
     /**
      *  @ignore
      */
+    private onPointerMoveListenerFn;
+    private onPointerUpListenerFn;
     /**
      *  @ignore
      */
     constructor(_parent: AXColorPaletteParentComponent, _unsubscriber: AXUnsubscriber);
+    ngOnDestroy(): void;
     /**
      *  @ignore
      */
@@ -61,15 +75,6 @@ export declare class AXColorPalettePickerComponent extends MXBaseComponent {
      *  @ignore
      */
     protected _handleGradientChanged(e: any): void;
-    /**
-     *  @ignore
-     */
-    /**
-     *  @ignore
-     */
-    /**
-     *  @ignore
-     */
     /**
      *  @ignore
      */
@@ -78,14 +83,14 @@ export declare class AXColorPalettePickerComponent extends MXBaseComponent {
      *  @ignore
      */
     private setPointerByPercent;
+    protected handleMove(event: PointerEvent): void;
+    protected handleDown(event: PointerEvent): void;
+    protected handleUp(): void;
+    private setColor;
     /**
      *  @ignore
      */
     private get __hostClass();
-    protected handleMove(event: MouseEvent | TouchEvent): void;
-    protected handleDown(event: MouseEvent | TouchEvent): void;
-    protected handleUp(): void;
-    private setColor;
     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.module.d.ts

@@ -14,8 +14,9 @@ import * as i12 from "@acorex/components/number-box";
 import * as i13 from "@acorex/components/range-slider";
 import * as i14 from "@acorex/components/slider";
 import * as i15 from "@angular/cdk/drag-drop";
+import * as i16 from "@acorex/components/select-box";
 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.FormsModule, typeof i8.AXTextBoxModule, typeof i9.AXLabelModule, typeof i10.AXButtonModule, typeof i11.AXDecoratorModule, typeof i12.AXNumberBoxModule, typeof i13.AXRangeSliderModule, typeof i14.AXSliderModule, typeof i15.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.AXSliderModule, typeof i15.DragDropModule, typeof i16.AXSelectBoxModule], [typeof i1.AXColorPalleteComponent, typeof i2.AXColorPalettePreviewComponent, typeof i3.AXColorPaletteSwatchesComponent, typeof i4.AXColorPaletteInputComponent, typeof i5.AXColorPalettePickerComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AXColorPaletteModule>;
 }

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

@@ -1,9 +1,11 @@
-export declare const AX_STYLE_COLOR_TYPES: string[];
 /**
  * A token that specifies the  color style of component.
  */
-export type AXStyleColorType = 'primary' | 'success' | 'warning' | 'danger' | 'neutral' | 'ghost';
+export type AXStyleColorType = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'default';
+export declare const AX_STYLE_COLOR_TYPES: AXStyleColorType[];
 export type AXStyleLookType = 'solid' | 'blank' | 'outline' | 'twotone' | 'flat' | 'fill' | 'link' | 'none';
-export declare const AX_STYLE_LOOK_TYPES: string[];
-export declare const AX_LOCATIONS: string[];
+export declare const AX_STYLE_LOOK_TYPES: AXStyleLookType[];
+export type AXSizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type AXStyleSizeType = `ax-${AXSizeType}`;
 export type AXLocation = 'bottom-start' | 'bottom-center' | 'bottom-end' | 'top-start' | 'top-center' | 'top-end' | 'center-end' | 'center-start';
+export declare const AX_LOCATIONS: AXLocation[];

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

@@ -50,7 +50,6 @@ export declare class MXButtonBaseComponent extends MXButtonBaseComponent_base {
         'ax-button-icon': boolean;
         'ax-state-disabled': boolean;
         'ax-state-selected': boolean;
-        'ax-el-interactive': boolean;
     };
 }
 export {};

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

@@ -1,6 +1,5 @@
 import { AXCalendarNavigateEvent, MXCalendarBaseComponent } from '@acorex/components/calendar';
 import { AXValueChangedEvent, MXValueComponent } from '@acorex/components/common';
-import { AXPickerComponent } from '@acorex/components/picker';
 import { AXTabStripChangedEvent, AXTabsComponent } from '@acorex/components/tabs';
 import { AXDateTime, AXDateTimeParts } from '@acorex/core/date-time';
 import { EventEmitter, OnInit } from '@angular/core';
@@ -32,10 +31,6 @@ export declare class AXDateTimePickerComponent extends AXDateTimePickerComponent
     set currentTimeButton(v: boolean);
     private _calendarService;
     private _tranlationService;
-    /**
-     *  @ignore
-     */
-    protected picker: AXPickerComponent;
     /**
      *  @ignore
      */
@@ -90,11 +85,6 @@ export declare class AXDateTimePickerComponent extends AXDateTimePickerComponent
      *  @ignore
      */
     ngOnInit(): Promise<void>;
-    /**
-     * Refreshes the picker component, updating its view and data.
-     * @ignore
-     */
-    refresh(): void;
     /**
      * Handles changes to the internal value of the component.
      * @param value - The new date value. If not provided, defaults to the current date.

package/datetime-picker/lib/datetime-picker.module.d.ts

@@ -8,8 +8,9 @@ import * as i6 from "@acorex/components/button";
 import * as i7 from "@acorex/components/calendar";
 import * as i8 from "@acorex/components/picker";
 import * as i9 from "@acorex/core/translation";
+import * as i10 from "@acorex/components/decorators";
 export declare class AXDateTimePickerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDateTimePickerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXDateTimePickerModule, [typeof i1.AXDateTimePickerComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i4.AXTabsModule, typeof i5.AXDateTimeModule, typeof i6.AXButtonModule, typeof i7.AXCalendarModule, typeof i8.AXPickerModule, typeof i9.AXTranslationModule], [typeof i1.AXDateTimePickerComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXDateTimePickerModule, [typeof i1.AXDateTimePickerComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i4.AXTabsModule, typeof i5.AXDateTimeModule, typeof i6.AXButtonModule, typeof i7.AXCalendarModule, typeof i8.AXPickerModule, typeof i9.AXTranslationModule, typeof i10.AXDecoratorModule], [typeof i1.AXDateTimePickerComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AXDateTimePickerModule>;
 }

package/decorators/index.d.ts

@@ -1,6 +1,8 @@
-export * from './lib/components/clear-button.component';
-export * from './lib/components/close-button.component';
-export * from './lib/components/full-screen-button.component';
+export * from './lib/components/clear-button/clear-button.component';
+export * from './lib/components/close-button/close-button.component';
+export * from './lib/components/color-indicator/color-indicator.component';
+export * from './lib/components/full-screen/full-screen-button.component';
 export * from './lib/components/generic-content.component';
-export * from './lib/components/icon.component';
+export * from './lib/components/heading/heading.component';
+export * from './lib/components/icon/icon.component';
 export * from './lib/decorators.module';

package/decorators/lib/components/color-indicator/color-indicator.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class AXDecoratorColorIndicatorComponent {
+    previewColor: import("@angular/core").InputSignal<unknown>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXDecoratorColorIndicatorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDecoratorColorIndicatorComponent, "ax-color-indicator", never, { "previewColor": { "alias": "previewColor"; "required": false; "isSignal": true; }; }, {}, never, never, false, never>;
+}

package/decorators/lib/components/generic-content.component.d.ts

@@ -6,5 +6,5 @@ import * as i0 from "@angular/core";
  */
 export declare class AXDecoratorGenericComponent extends MXBaseComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDecoratorGenericComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXDecoratorGenericComponent, "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay", never, {}, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDecoratorGenericComponent, "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", never, {}, {}, never, ["*"], false, never>;
 }

package/decorators/lib/components/heading/heading.component.d.ts

@@ -0,0 +1,11 @@
+import { MXBaseComponent } from '@acorex/components/common';
+import * as i0 from "@angular/core";
+/**
+ * A button component that displays a close icon and triggers an action when clicked.
+ *
+ * @category Components
+ */
+export declare class AXDecoratorHeadingComponent extends MXBaseComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXDecoratorHeadingComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDecoratorHeadingComponent, "ax-heading", never, {}, {}, never, ["ax-title, ax-subtitle"], false, never>;
+}

package/decorators/lib/decorators.module.d.ts

@@ -1,12 +1,14 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./components/icon.component";
-import * as i2 from "./components/clear-button.component";
-import * as i3 from "./components/close-button.component";
+import * as i1 from "./components/icon/icon.component";
+import * as i2 from "./components/clear-button/clear-button.component";
+import * as i3 from "./components/close-button/close-button.component";
 import * as i4 from "./components/generic-content.component";
-import * as i5 from "./components/full-screen-button.component";
-import * as i6 from "@angular/common";
+import * as i5 from "./components/full-screen/full-screen-button.component";
+import * as i6 from "./components/heading/heading.component";
+import * as i7 from "./components/color-indicator/color-indicator.component";
+import * as i8 from "@angular/common";
 export declare class AXDecoratorModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDecoratorModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXDecoratorModule, [typeof i1.AXDecoratorIconComponent, typeof i2.AXDecoratorClearButtonComponent, typeof i3.AXDecoratorCloseButtonComponent, typeof i4.AXDecoratorGenericComponent, typeof i5.AXDecoratorFullScreenButtonComponent], [typeof i6.CommonModule], [typeof i1.AXDecoratorIconComponent, typeof i2.AXDecoratorClearButtonComponent, typeof i3.AXDecoratorCloseButtonComponent, typeof i4.AXDecoratorGenericComponent, typeof i5.AXDecoratorFullScreenButtonComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXDecoratorModule, [typeof i1.AXDecoratorIconComponent, typeof i2.AXDecoratorClearButtonComponent, typeof i3.AXDecoratorCloseButtonComponent, typeof i4.AXDecoratorGenericComponent, typeof i5.AXDecoratorFullScreenButtonComponent, typeof i6.AXDecoratorHeadingComponent, typeof i7.AXDecoratorColorIndicatorComponent], [typeof i8.CommonModule], [typeof i1.AXDecoratorIconComponent, typeof i2.AXDecoratorClearButtonComponent, typeof i3.AXDecoratorCloseButtonComponent, typeof i4.AXDecoratorGenericComponent, typeof i5.AXDecoratorFullScreenButtonComponent, typeof i6.AXDecoratorHeadingComponent, typeof i7.AXDecoratorColorIndicatorComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AXDecoratorModule>;
 }

package/dialog/lib/dialog.component.d.ts

@@ -34,6 +34,8 @@ export declare class AXDialogComponent extends MXBaseComponent {
      *  @ignore
      */
     get tabIndex(): string;
+    /** @ignore */
+    private get __hostClass();
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDialogComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AXDialogComponent, "ax-dialog", never, {}, {}, never, never, false, never>;
 }

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

@@ -62,5 +62,5 @@ export declare class AXDropdownButtonComponent extends MXButtonBaseComponent imp
      */
     close(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDropdownButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXDropdownButtonComponent, "ax-dropdown-button", never, { "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "color": { "alias": "color"; "required": false; }; "look": { "alias": "look"; "required": false; }; "text": { "alias": "text"; "required": false; }; "type": { "alias": "type"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "selectedChange": "selectedChange"; "lookChange": "lookChange"; "colorChange": "colorChange"; "disabledChange": "disabledChange"; }, never, ["*", "ax-prefix, ax-loading, ax-loading-spinner"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDropdownButtonComponent, "ax-dropdown-button", never, { "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "color": { "alias": "color"; "required": false; }; "look": { "alias": "look"; "required": false; }; "text": { "alias": "text"; "required": false; }; "type": { "alias": "type"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "selectedChange": "selectedChange"; "lookChange": "lookChange"; "colorChange": "colorChange"; "disabledChange": "disabledChange"; }, never, ["*", "ax-prefix, ax-loading, ax-loading-spinner"], false, never>;
 }

package/fesm2022/acorex-components-action-sheet.mjs

@@ -40,7 +40,7 @@ class AXActionSheetService {
             closeOnNavigation: true,
             closeOnDestroy: true,
             hasBackdrop: true,
-            panelClass: ['ax-actionsheet-panel'],
+            panelClass: ['ax-action-sheet-panel'],
             disableClose: true,
             positionStrategy: new GlobalPositionStrategy().centerHorizontally().bottom(),
         });
@@ -306,7 +306,7 @@ class AXActionSheetComponent extends MXBaseComponent {
                 provide: AXFocusableComponent,
                 useExisting: AXActionSheetComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if (data.draggable) {\n  <div\n    (mousedown)=\"handleMouseDown($event)\"\n    (touchstart)=\"handleTouchDown($event)\"\n    class=\"ax-drag-handle-container\"\n  >\n    <div class=\"ax-drag-handle\"></div>\n  </div>\n}\n@if (data.header) {\n  <ax-header\n    [class.draggable-header]=\"data.draggable\"\n    (mousedown)=\"data.draggable ? handleMouseDown($event) : null\"\n    (touchstart)=\"data.draggable ? handleTouchDown($event) : null\"\n  >\n    <ax-prefix>\n      <ax-title>{{ data.title | translate | async }}</ax-title>\n\n      @if (data.subTitle) {\n        <ax-sub-title>\n          {{ data.subTitle }}\n        </ax-sub-title>\n      }\n    </ax-prefix>\n    @if (data.closeButton) {\n      <ax-suffix>\n        <ax-close-button></ax-close-button>\n      </ax-suffix>\n    }\n  </ax-header>\n}\n@if (this.data.content) {\n  <div class=\"ax-custom-template-container\">\n    <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"handleAttched($event)\"></ng-template>\n  </div>\n}\n\n<div class=\"ax-action-list ax-action-list-vertical\">\n  @for (item of data.items; let i = $index; track i) {\n    @if (item.group?.title) {\n      <ax-title>{{ item.group?.title }}</ax-title>\n    }\n    <div\n      class=\"ax-action-item ax-el-interactive ax-el-{{ item.color }}-blank\"\n      [class.ax-state-disabled]=\"item.disabled\"\n      [tabindex]=\"i\"\n      (click)=\"onItemClick(item)\"\n    >\n      <div class=\"ax-action-item-prefix\">\n        @if (item.icon) {\n          <span class=\"ax-item-icon\" [class]=\"item.icon\"></span>\n        }\n        <ax-text>{{ item.text | translate | async }}</ax-text>\n      </div>\n      <div class=\"ax-action-item-suffix\"></div>\n    </div>\n    @if (item.break) {\n      <ax-divider></ax-divider>\n    }\n  }\n</div>\n", styles: ["ax-action-sheet{display:block;width:100vw;position:relative;transition:height .3s cubic-bezier(.25,.75,.15,1)}@media (min-width: 768px){ax-action-sheet{width:70vw}}@media (min-width: 1024px){ax-action-sheet{width:50vw}}ax-action-sheet .ax-custom-template-container{overflow-y:auto;max-height:100vh}ax-action-sheet .ax-drag-handle-container{padding-top:.5rem}ax-action-sheet .ax-drag-handle-container .ax-drag-handle{height:.375rem;width:3rem;margin:auto;border-radius:.5rem;background-color:rgba(var(--ax-color-border-default))}ax-action-sheet ax-header{padding:1rem;border-bottom-width:1px;font-size:1rem;line-height:1.5rem;font-weight:500}@media (min-width: 768px){ax-action-sheet ax-header{font-size:1.125rem;line-height:1.75rem}}ax-action-sheet ax-header.draggable-header{padding-top:0;-webkit-user-select:none;user-select:none}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-prefix ax-title{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}ax-action-sheet ax-header ax-suffix{align-items:flex-end;max-width:fit-content}ax-action-sheet .ax-action-list{overflow-y:auto;max-height:100vh}ax-action-sheet .ax-action-list ax-title{font-size:.875rem}ax-action-sheet .ax-action-list .ax-action-item{min-height:3.5rem!important;font-size:1rem!important}ax-action-sheet .ax-action-list .ax-action-item .ax-item-icon{margin-inline-end:.75rem!important;font-size:1.5rem!important;line-height:2rem!important}\n"], dependencies: [{ kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i3.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if (data.draggable) {\n  <div\n    (mousedown)=\"handleMouseDown($event)\"\n    (touchstart)=\"handleTouchDown($event)\"\n    class=\"ax-drag-handle-container\"\n  >\n    <div class=\"ax-drag-handle\"></div>\n  </div>\n}\n@if (data.header) {\n  <ax-header\n    [class.draggable-header]=\"data.draggable\"\n    (mousedown)=\"data.draggable ? handleMouseDown($event) : null\"\n    (touchstart)=\"data.draggable ? handleTouchDown($event) : null\"\n  >\n    <ax-prefix>\n      <ax-title>{{ data.title | translate | async }}</ax-title>\n\n      @if (data.subTitle) {\n        <ax-subtitle>\n          {{ data.subTitle }}\n        </ax-subtitle>\n      }\n    </ax-prefix>\n    @if (data.closeButton) {\n      <ax-suffix>\n        <ax-close-button></ax-close-button>\n      </ax-suffix>\n    }\n  </ax-header>\n}\n@if (this.data.content) {\n  <div class=\"ax-custom-template-container\">\n    <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"handleAttched($event)\"></ng-template>\n  </div>\n}\n\n<div class=\"ax-action-list ax-action-list-vertical\">\n  @for (item of data.items; let i = $index; track i) {\n    @if (item.group?.title) {\n      <ax-title>{{ item.group?.title }}</ax-title>\n    }\n    <div\n      class=\"ax-action-item ax-{{ item.color || 'ghost' }}\"\n      [class.ax-state-disabled]=\"item.disabled\"\n      [tabindex]=\"i\"\n      (click)=\"onItemClick(item)\"\n    >\n      <div class=\"ax-action-item-prefix\">\n        @if (item.icon) {\n          <span class=\"ax-item-icon\" [class]=\"item.icon\"></span>\n        }\n        <ax-text>{{ item.text | translate | async }}</ax-text>\n      </div>\n      <div class=\"ax-action-item-suffix\"></div>\n    </div>\n    @if (item.break) {\n      <ax-divider></ax-divider>\n    }\n  }\n</div>\n", styles: ["ax-action-sheet{--ax-comp-action-sheet-bg-color: var(--ax-sys-color-lightest-surface)}ax-action-sheet .ax-action-item.ax-primary{--ax-comp-action-sheet-text-color: var(--ax-sys-color-primary-surface)}ax-action-sheet .ax-action-item.ax-secondary{--ax-comp-action-sheet-text-color: var(--ax-sys-color-secondary-surface)}ax-action-sheet .ax-action-item.ax-success{--ax-comp-action-sheet-text-color: var(--ax-sys-color-success-surface)}ax-action-sheet .ax-action-item.ax-warning{--ax-comp-action-sheet-text-color: var(--ax-sys-color-warning-surface)}ax-action-sheet .ax-action-item.ax-danger{--ax-comp-action-sheet-text-color: var(--ax-sys-color-danger-surface)}ax-action-sheet{display:block;width:100vw;position:relative;transition-property:height;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);background-color:rgba(var(--ax-comp-action-sheet-bg-color))}@media (min-width: 768px){ax-action-sheet{width:70vw}}@media (min-width: 1024px){ax-action-sheet{width:50vw}}ax-action-sheet .ax-custom-template-container{overflow-y:auto;max-height:100vh}ax-action-sheet .ax-drag-handle-container{padding-top:.5rem}ax-action-sheet .ax-drag-handle-container .ax-drag-handle{height:.375rem;width:3rem;margin:auto;border-radius:.5rem;background-color:rgba(var(--ax-sys-color-surface))}ax-action-sheet ax-header{padding:1rem;border-bottom-width:1px;font-size:1rem;line-height:1.5rem;font-weight:500}@media (min-width: 768px){ax-action-sheet ax-header{font-size:1.125rem;line-height:1.75rem}}ax-action-sheet ax-header.draggable-header{padding-top:0;-webkit-user-select:none;user-select:none}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-prefix ax-title{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}ax-action-sheet ax-header ax-suffix{align-items:flex-end;max-width:fit-content}ax-action-sheet .ax-action-list{overflow-y:auto;max-height:100vh}ax-action-sheet .ax-action-list ax-title{font-size:.875rem}ax-action-sheet .ax-action-list .ax-action-item{min-height:3.5rem!important;font-size:1rem!important;color:rgba(var(--ax-comp-action-sheet-text-color))}ax-action-sheet .ax-action-list .ax-action-item .ax-item-icon{margin-inline-end:.75rem!important;font-size:1.5rem!important;line-height:2rem!important}.ax-dark ax-action-sheet{--ax-comp-action-sheet-bg-color: var(--ax-sys-color-darker-surface)}\n"], dependencies: [{ kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i3.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "component", type: i3.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: "pipe", type: i4.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXActionSheetComponent, decorators: [{
             type: Component,
@@ -319,7 +319,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                             provide: AXFocusableComponent,
                             useExisting: AXActionSheetComponent,
                         },
-                    ], standalone: false, template: "@if (data.draggable) {\n  <div\n    (mousedown)=\"handleMouseDown($event)\"\n    (touchstart)=\"handleTouchDown($event)\"\n    class=\"ax-drag-handle-container\"\n  >\n    <div class=\"ax-drag-handle\"></div>\n  </div>\n}\n@if (data.header) {\n  <ax-header\n    [class.draggable-header]=\"data.draggable\"\n    (mousedown)=\"data.draggable ? handleMouseDown($event) : null\"\n    (touchstart)=\"data.draggable ? handleTouchDown($event) : null\"\n  >\n    <ax-prefix>\n      <ax-title>{{ data.title | translate | async }}</ax-title>\n\n      @if (data.subTitle) {\n        <ax-sub-title>\n          {{ data.subTitle }}\n        </ax-sub-title>\n      }\n    </ax-prefix>\n    @if (data.closeButton) {\n      <ax-suffix>\n        <ax-close-button></ax-close-button>\n      </ax-suffix>\n    }\n  </ax-header>\n}\n@if (this.data.content) {\n  <div class=\"ax-custom-template-container\">\n    <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"handleAttched($event)\"></ng-template>\n  </div>\n}\n\n<div class=\"ax-action-list ax-action-list-vertical\">\n  @for (item of data.items; let i = $index; track i) {\n    @if (item.group?.title) {\n      <ax-title>{{ item.group?.title }}</ax-title>\n    }\n    <div\n      class=\"ax-action-item ax-el-interactive ax-el-{{ item.color }}-blank\"\n      [class.ax-state-disabled]=\"item.disabled\"\n      [tabindex]=\"i\"\n      (click)=\"onItemClick(item)\"\n    >\n      <div class=\"ax-action-item-prefix\">\n        @if (item.icon) {\n          <span class=\"ax-item-icon\" [class]=\"item.icon\"></span>\n        }\n        <ax-text>{{ item.text | translate | async }}</ax-text>\n      </div>\n      <div class=\"ax-action-item-suffix\"></div>\n    </div>\n    @if (item.break) {\n      <ax-divider></ax-divider>\n    }\n  }\n</div>\n", styles: ["ax-action-sheet{display:block;width:100vw;position:relative;transition:height .3s cubic-bezier(.25,.75,.15,1)}@media (min-width: 768px){ax-action-sheet{width:70vw}}@media (min-width: 1024px){ax-action-sheet{width:50vw}}ax-action-sheet .ax-custom-template-container{overflow-y:auto;max-height:100vh}ax-action-sheet .ax-drag-handle-container{padding-top:.5rem}ax-action-sheet .ax-drag-handle-container .ax-drag-handle{height:.375rem;width:3rem;margin:auto;border-radius:.5rem;background-color:rgba(var(--ax-color-border-default))}ax-action-sheet ax-header{padding:1rem;border-bottom-width:1px;font-size:1rem;line-height:1.5rem;font-weight:500}@media (min-width: 768px){ax-action-sheet ax-header{font-size:1.125rem;line-height:1.75rem}}ax-action-sheet ax-header.draggable-header{padding-top:0;-webkit-user-select:none;user-select:none}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-prefix ax-title{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}ax-action-sheet ax-header ax-suffix{align-items:flex-end;max-width:fit-content}ax-action-sheet .ax-action-list{overflow-y:auto;max-height:100vh}ax-action-sheet .ax-action-list ax-title{font-size:.875rem}ax-action-sheet .ax-action-list .ax-action-item{min-height:3.5rem!important;font-size:1rem!important}ax-action-sheet .ax-action-list .ax-action-item .ax-item-icon{margin-inline-end:.75rem!important;font-size:1.5rem!important;line-height:2rem!important}\n"] }]
+                    ], standalone: false, template: "@if (data.draggable) {\n  <div\n    (mousedown)=\"handleMouseDown($event)\"\n    (touchstart)=\"handleTouchDown($event)\"\n    class=\"ax-drag-handle-container\"\n  >\n    <div class=\"ax-drag-handle\"></div>\n  </div>\n}\n@if (data.header) {\n  <ax-header\n    [class.draggable-header]=\"data.draggable\"\n    (mousedown)=\"data.draggable ? handleMouseDown($event) : null\"\n    (touchstart)=\"data.draggable ? handleTouchDown($event) : null\"\n  >\n    <ax-prefix>\n      <ax-title>{{ data.title | translate | async }}</ax-title>\n\n      @if (data.subTitle) {\n        <ax-subtitle>\n          {{ data.subTitle }}\n        </ax-subtitle>\n      }\n    </ax-prefix>\n    @if (data.closeButton) {\n      <ax-suffix>\n        <ax-close-button></ax-close-button>\n      </ax-suffix>\n    }\n  </ax-header>\n}\n@if (this.data.content) {\n  <div class=\"ax-custom-template-container\">\n    <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"handleAttched($event)\"></ng-template>\n  </div>\n}\n\n<div class=\"ax-action-list ax-action-list-vertical\">\n  @for (item of data.items; let i = $index; track i) {\n    @if (item.group?.title) {\n      <ax-title>{{ item.group?.title }}</ax-title>\n    }\n    <div\n      class=\"ax-action-item ax-{{ item.color || 'ghost' }}\"\n      [class.ax-state-disabled]=\"item.disabled\"\n      [tabindex]=\"i\"\n      (click)=\"onItemClick(item)\"\n    >\n      <div class=\"ax-action-item-prefix\">\n        @if (item.icon) {\n          <span class=\"ax-item-icon\" [class]=\"item.icon\"></span>\n        }\n        <ax-text>{{ item.text | translate | async }}</ax-text>\n      </div>\n      <div class=\"ax-action-item-suffix\"></div>\n    </div>\n    @if (item.break) {\n      <ax-divider></ax-divider>\n    }\n  }\n</div>\n", styles: ["ax-action-sheet{--ax-comp-action-sheet-bg-color: var(--ax-sys-color-lightest-surface)}ax-action-sheet .ax-action-item.ax-primary{--ax-comp-action-sheet-text-color: var(--ax-sys-color-primary-surface)}ax-action-sheet .ax-action-item.ax-secondary{--ax-comp-action-sheet-text-color: var(--ax-sys-color-secondary-surface)}ax-action-sheet .ax-action-item.ax-success{--ax-comp-action-sheet-text-color: var(--ax-sys-color-success-surface)}ax-action-sheet .ax-action-item.ax-warning{--ax-comp-action-sheet-text-color: var(--ax-sys-color-warning-surface)}ax-action-sheet .ax-action-item.ax-danger{--ax-comp-action-sheet-text-color: var(--ax-sys-color-danger-surface)}ax-action-sheet{display:block;width:100vw;position:relative;transition-property:height;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);background-color:rgba(var(--ax-comp-action-sheet-bg-color))}@media (min-width: 768px){ax-action-sheet{width:70vw}}@media (min-width: 1024px){ax-action-sheet{width:50vw}}ax-action-sheet .ax-custom-template-container{overflow-y:auto;max-height:100vh}ax-action-sheet .ax-drag-handle-container{padding-top:.5rem}ax-action-sheet .ax-drag-handle-container .ax-drag-handle{height:.375rem;width:3rem;margin:auto;border-radius:.5rem;background-color:rgba(var(--ax-sys-color-surface))}ax-action-sheet ax-header{padding:1rem;border-bottom-width:1px;font-size:1rem;line-height:1.5rem;font-weight:500}@media (min-width: 768px){ax-action-sheet ax-header{font-size:1.125rem;line-height:1.75rem}}ax-action-sheet ax-header.draggable-header{padding-top:0;-webkit-user-select:none;user-select:none}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-prefix ax-title{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}ax-action-sheet ax-header ax-suffix{align-items:flex-end;max-width:fit-content}ax-action-sheet .ax-action-list{overflow-y:auto;max-height:100vh}ax-action-sheet .ax-action-list ax-title{font-size:.875rem}ax-action-sheet .ax-action-list .ax-action-item{min-height:3.5rem!important;font-size:1rem!important;color:rgba(var(--ax-comp-action-sheet-text-color))}ax-action-sheet .ax-action-list .ax-action-item .ax-item-icon{margin-inline-end:.75rem!important;font-size:1.5rem!important;line-height:2rem!important}.ax-dark ax-action-sheet{--ax-comp-action-sheet-bg-color: var(--ax-sys-color-darker-surface)}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [DIALOG_DATA]