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

package/action-sheet/lib/action-sheet.class.d.ts

@@ -1,3 +1,4 @@
+import { AXStyleColorType } from '@acorex/components/common';
 import { ComponentType } from '@angular/cdk/portal';
 import { TemplateRef } from '@angular/core';
 export interface AXActionSheetItem {
@@ -5,7 +6,7 @@ export interface AXActionSheetItem {
     text: string;
     icon?: string;
     disabled?: boolean;
-    color?: 'ghost' | 'danger';
+    color?: AXStyleColorType;
     onClick?: () => void;
     suffix?: {
         text: string;

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

@@ -22,8 +22,7 @@ export declare class AXAvatarComponent extends MXColorComponent {
      *
      * @defaultValue 'rounded'
      */
-    shape: import("@angular/core").InputSignal<"sharp" | "soft" | "rounded">;
-    look: import("@angular/core").InputSignal<"solid" | "twotone">;
+    look: import("@angular/core").InputSignal<"sharp" | "soft" | "rounded">;
     /**
      *  @ignore
      */
@@ -33,5 +32,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; }; "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>;
+    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>;
 }

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

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

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

@@ -1,6 +1,7 @@
 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
@@ -19,6 +20,10 @@ 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.
      *
@@ -56,5 +61,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; }; "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>;
+    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>;
 }

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

@@ -1,6 +1,5 @@
 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;
@@ -17,7 +16,6 @@ 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.
      */
@@ -74,6 +72,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, ["*"], 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, ["ax-prefix", "ax-loading", "ax-icon", "ax-suffix", "ax-dropdown-panel"], false, never>;
 }
 export {};

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

@@ -8,7 +8,6 @@ declare const AXButtonGroupComponent_base: import("polytype").Polytype.Clustered
  * @category Components
  */
 export declare class AXButtonGroupComponent extends AXButtonGroupComponent_base implements AfterContentInit {
-    #private;
     /**
      * Fires when any button in the group is clicked.
      *

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

@@ -3,9 +3,8 @@ 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 i5.AXButtonModule], [typeof i1.AXButtonGroupComponent, typeof i2.AXButtonGroupItemComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXButtonGroupModule, [typeof i1.AXButtonGroupComponent, typeof i2.AXButtonGroupItemComponent], [typeof i3.CommonModule, typeof i4.AXDecoratorModule], [typeof i1.AXButtonGroupComponent, typeof i2.AXButtonGroupItemComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AXButtonGroupModule>;
 }

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

@@ -1,26 +1,22 @@
-import { AXStyleLookType, AXStyleSizeType, MXColorComponent } from '@acorex/components/common';
+import { MXColorLookComponent } 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 MXColorComponent {
+export declare class AXChipsComponent extends MXColorLookComponent {
     /**
-     * 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; }; "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: {}; }]>;
+    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: {}; }]>;
 }

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

@@ -13,10 +13,6 @@ 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
      */
@@ -54,6 +50,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; }; "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>;
+    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>;
 }
 export {};

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

@@ -1,6 +1,5 @@
 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";
 /**
@@ -8,11 +7,9 @@ import * as i0 from "@angular/core";
  *
  * @category Components
  */
-export declare class AXColorPalettePickerComponent extends MXBaseComponent implements OnDestroy {
+export declare class AXColorPalettePickerComponent extends MXBaseComponent {
     _parent: AXColorPaletteParentComponent;
     private _unsubscriber;
-    render: Renderer2;
-    zone: NgZone;
     _rgba: {
         r: number;
         g: number;
@@ -29,14 +26,6 @@ export declare class AXColorPalettePickerComponent extends MXBaseComponent imple
      *  @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
      */
@@ -52,13 +41,10 @@ export declare class AXColorPalettePickerComponent extends MXBaseComponent imple
     /**
      *  @ignore
      */
-    private onPointerMoveListenerFn;
-    private onPointerUpListenerFn;
     /**
      *  @ignore
      */
     constructor(_parent: AXColorPaletteParentComponent, _unsubscriber: AXUnsubscriber);
-    ngOnDestroy(): void;
     /**
      *  @ignore
      */
@@ -75,6 +61,15 @@ export declare class AXColorPalettePickerComponent extends MXBaseComponent imple
      *  @ignore
      */
     protected _handleGradientChanged(e: any): void;
+    /**
+     *  @ignore
+     */
+    /**
+     *  @ignore
+     */
+    /**
+     *  @ignore
+     */
     /**
      *  @ignore
      */
@@ -83,14 +78,14 @@ export declare class AXColorPalettePickerComponent extends MXBaseComponent imple
      *  @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,9 +14,8 @@ 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 i16.AXSelectBoxModule], [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 i1.AXColorPalleteComponent, typeof i2.AXColorPalettePreviewComponent, typeof i3.AXColorPaletteSwatchesComponent, typeof i4.AXColorPaletteInputComponent, typeof i5.AXColorPalettePickerComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AXColorPaletteModule>;
 }

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

@@ -62,6 +62,9 @@ export declare class AXDataSource<T = unknown> {
     get query(): AXDataSourceQuery;
     onChanged: Subject<AXDataSourceChangedEvent<T>>;
     onItemExpanded: Subject<AXDataSourceItemExpandedEvent<T>>;
+    onItemRefreshChildren: Subject<{
+        id: string;
+    }>;
     onLoadingChanged: Subject<boolean>;
     private _isLoading;
     get isLoading(): boolean;

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

@@ -1,11 +1,9 @@
+export declare const AX_STYLE_COLOR_TYPES: string[];
 /**
  * A token that specifies the  color style of component.
  */
-export type AXStyleColorType = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'ghost';
-export declare const AX_STYLE_COLOR_TYPES: AXStyleColorType[];
+export type AXStyleColorType = 'primary' | 'success' | 'warning' | 'danger' | 'neutral' | 'ghost';
 export type AXStyleLookType = 'solid' | 'blank' | 'outline' | 'twotone' | 'flat' | 'fill' | 'link' | 'none';
-export declare const AX_STYLE_LOOK_TYPES: AXStyleLookType[];
-export type AXSizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type AXStyleSizeType = `ax-${AXSizeType}`;
+export declare const AX_STYLE_LOOK_TYPES: string[];
+export declare const AX_LOCATIONS: string[];
 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,6 +50,7 @@ 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/data-table/lib/base-data-table.class.d.ts

@@ -30,6 +30,7 @@ export declare abstract class AXBaseDataTable extends MXBaseComponent {
     get selectedRows(): unknown[];
     set selectedRows(v: unknown[]);
     expandRow(row: any): Promise<void>;
+    refreshItemChildren(id: string): Promise<void>;
     selectRows(...rows: unknown[]): void;
     unSelectRows(...rows: unknown[]): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXBaseDataTable, never>;

package/data-table/lib/columns/data-text-column.component.d.ts

@@ -11,6 +11,8 @@ export declare class AXDataTableTextColumnComponent extends AXDataTableColumnCom
     private grid;
     protected loadingRow: import("@angular/core").WritableSignal<any>;
     protected initialWidth: string;
+    customExpandIcon: string;
+    customCollapseIcon: string;
     /**
      * Defines the data field to display in the column.
      */
@@ -94,5 +96,5 @@ export declare class AXDataTableTextColumnComponent extends AXDataTableColumnCom
      */
     formatOptions: AXFormatOptions;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDataTableTextColumnComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXDataTableTextColumnComponent, "ax-text-column", never, { "width": { "alias": "width"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "allowSorting": { "alias": "allowSorting"; "required": false; }; "allowResizing": { "alias": "allowResizing"; "required": false; }; "fixed": { "alias": "fixed"; "required": false; }; "dataField": { "alias": "dataField"; "required": false; }; "expandHandler": { "alias": "expandHandler"; "required": false; }; "wrapText": { "alias": "wrapText"; "required": false; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; }; "footerTemplate": { "alias": "footerTemplate"; "required": false; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; }; "format": { "alias": "format"; "required": false; }; "formatOptions": { "alias": "formatOptions"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDataTableTextColumnComponent, "ax-text-column", never, { "width": { "alias": "width"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "allowSorting": { "alias": "allowSorting"; "required": false; }; "allowResizing": { "alias": "allowResizing"; "required": false; }; "fixed": { "alias": "fixed"; "required": false; }; "customExpandIcon": { "alias": "customExpandIcon"; "required": false; }; "customCollapseIcon": { "alias": "customCollapseIcon"; "required": false; }; "dataField": { "alias": "dataField"; "required": false; }; "expandHandler": { "alias": "expandHandler"; "required": false; }; "wrapText": { "alias": "wrapText"; "required": false; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; }; "footerTemplate": { "alias": "footerTemplate"; "required": false; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; }; "format": { "alias": "format"; "required": false; }; "formatOptions": { "alias": "formatOptions"; "required": false; }; }, {}, never, never, false, never>;
 }

package/data-table/lib/data-table/data-table.component.d.ts

@@ -217,6 +217,8 @@ export declare class AXDataTableComponent extends AXBaseDataTable implements OnI
      */
     ngAfterViewInit(): void;
     protected toggleExpanded(rows: any[], expandedItem: any, children: any[]): any[];
+    protected refreshExpandedItem(id: string | number): Promise<void>;
+    private updateChildren;
     /**
      *  @ignore
      */

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

@@ -1,5 +1,6 @@
 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';
@@ -31,6 +32,10 @@ export declare class AXDateTimePickerComponent extends AXDateTimePickerComponent
     set currentTimeButton(v: boolean);
     private _calendarService;
     private _tranlationService;
+    /**
+     *  @ignore
+     */
+    protected picker: AXPickerComponent;
     /**
      *  @ignore
      */
@@ -85,6 +90,11 @@ 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,9 +8,8 @@ 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 i10.AXDecoratorModule], [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 i1.AXDateTimePickerComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AXDateTimePickerModule>;
 }

package/decorators/index.d.ts

@@ -1,8 +1,6 @@
-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/clear-button.component';
+export * from './lib/components/close-button.component';
+export * from './lib/components/full-screen-button.component';
 export * from './lib/components/generic-content.component';
-export * from './lib/components/heading/heading.component';
-export * from './lib/components/icon/icon.component';
+export * from './lib/components/icon.component';
 export * from './lib/decorators.module';

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-subtitle, 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-sub-title, ax-placeholder, ax-overlay", never, {}, {}, never, ["*"], false, never>;
 }

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

@@ -1,14 +1,12 @@
 import * as i0 from "@angular/core";
-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 i1 from "./components/icon.component";
+import * as i2 from "./components/clear-button.component";
+import * as i3 from "./components/close-button.component";
 import * as i4 from "./components/generic-content.component";
-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";
+import * as i5 from "./components/full-screen-button.component";
+import * as i6 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.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 ɵ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 ɵinj: i0.ɵɵInjectorDeclaration<AXDecoratorModule>;
 }

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

@@ -34,8 +34,6 @@ 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; }; "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; }; "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>;
 }

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

@@ -40,7 +40,7 @@ class AXActionSheetService {
             closeOnNavigation: true,
             closeOnDestroy: true,
             hasBackdrop: true,
-            panelClass: ['ax-action-sheet-panel'],
+            panelClass: ['ax-actionsheet-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-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-danger{--ax-comp-action-sheet-text-color: var(--ax-sys-color-danger-500)}ax-action-sheet .ax-ghost{--ax-comp-action-sheet-text-color: var(--ax-sys-color-on-contrast-ghost)}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)}@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-border-color))}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-ghost{color:rgb(var(--ax-comp-action-sheet-text-color))}ax-action-sheet .ax-action-list .ax-danger{color:rgb(var(--ax-comp-action-sheet-text-color))}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-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 }); }
+        ], 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 }); }
 }
 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-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-danger{--ax-comp-action-sheet-text-color: var(--ax-sys-color-danger-500)}ax-action-sheet .ax-ghost{--ax-comp-action-sheet-text-color: var(--ax-sys-color-on-contrast-ghost)}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)}@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-border-color))}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-ghost{color:rgb(var(--ax-comp-action-sheet-text-color))}ax-action-sheet .ax-action-list .ax-danger{color:rgb(var(--ax-comp-action-sheet-text-color))}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-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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [DIALOG_DATA]