@acorex/components 7.4.8 → 7.5.1

package/action-sheet/index.d.ts

@@ -1,4 +1,4 @@
-export * from './lib/action-sheet.component';
 export * from './lib/action-sheet.class';
+export * from './lib/action-sheet.component';
 export * from './lib/action-sheet.module';
 export * from './lib/action-sheet.service';

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

@@ -1,8 +1,8 @@
 import { AXComponentCloseEvent, MXBaseComponent } from '@acorex/components/common';
+import { DialogRef } from '@angular/cdk/dialog';
 import { CdkPortalOutletAttachedRef, Portal } from '@angular/cdk/portal';
 import { OnInit } from '@angular/core';
 import { AXActionSheetData, AXActionSheetItem } from './action-sheet.class';
-import { DialogRef } from '@angular/cdk/dialog';
 import * as i0 from "@angular/core";
 export declare class AXActionSheetComponent extends MXBaseComponent implements OnInit {
     protected data: AXActionSheetData;
@@ -10,8 +10,8 @@ export declare class AXActionSheetComponent extends MXBaseComponent implements O
     protected _selectedPortal: Portal<any>;
     private _componentRef;
     /**
-       *  @ignore
-       */
+     *  @ignore
+     */
     constructor(data: AXActionSheetData, dialogRef: DialogRef<AXComponentCloseEvent>);
     ngOnInit(): void;
     protected onKeydownHandler(): void;

package/avatar/index.d.ts

@@ -1,3 +1,3 @@
-export * from './lib/avatar.component';
 export * from './lib/avatar-group.component';
+export * from './lib/avatar.component';
 export * from './lib/avatar.module';

package/breadcrumbs/index.d.ts

@@ -1,4 +1,4 @@
-export * from './lib/breadcrumbs.component';
-export * from './lib/breadcrumbs.module';
 export * from './lib/breadcrumbs-item.class';
 export * from './lib/breadcrumbs-item.component';
+export * from './lib/breadcrumbs.component';
+export * from './lib/breadcrumbs.module';

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

@@ -1,5 +1,5 @@
-import { AXBreadCrumbsComponent } from './breadcrumbs.component';
 import { MXBaseComponent } from '@acorex/components/common';
+import { AXBreadCrumbsComponent } from './breadcrumbs.component';
 import * as i0 from "@angular/core";
 export declare class AXBreadCrumbsItemComponent extends MXBaseComponent {
     _parent: AXBreadCrumbsComponent;

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

@@ -1,4 +1,4 @@
-import { AXStyleLookType, AXStyleColorType, AXHotKeyAction } from '@acorex/components/common';
+import { AXHotKeyAction, AXStyleColorType, AXStyleLookType } from '@acorex/components/common';
 export type AXButtonType = 'submit' | 'button' | 'cancel' | 'reset';
 export interface AXClickItemBase {
     cssClass?: string;

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

@@ -22,5 +22,5 @@ export declare class AXButtonComponent extends MXButtonBaseComponent implements
     focus(): void;
     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; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "selectedChange": "selectedChange"; "toggleableChange": "toggleableChange"; "lookChange": "lookChange"; "colorChange": "colorChange"; "disabledChange": "disabledChange"; }, never, ["ax-prefix, ax-loading, ax-icon", "ax-content", "ax-suffix", "ax-dropdown-panel"], 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; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "selectedChange": "selectedChange"; "toggleableChange": "toggleableChange"; "lookChange": "lookChange"; "colorChange": "colorChange"; "disabledChange": "disabledChange"; }, never, ["ax-prefix, ax-loading, ax-icon", "ax-content", "ax-suffix", "ax-dropdown-panel", ".tab-content"], false, never>;
 }

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

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

package/calendar/lib/calendar.class.d.ts

@@ -1,6 +1,6 @@
-import { EventEmitter, TemplateRef } from '@angular/core';
 import { AXItemClickEvent, AXRangeChangedEvent, MXBaseComponent } from '@acorex/components/common';
 import { AXCalendarService, AXDateTimeRange } from '@acorex/core/dateTime';
+import { EventEmitter, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 export type AXCalendarViewType = 'year' | 'month' | 'day';
 export type AXCalendarViewDepth = AXCalendarViewType;

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

@@ -1,5 +1,5 @@
-import { AXDateTime, AXDateTimeRange } from '@acorex/core/dateTime';
 import { AXClickEvent, AXOptionChangedEvent, MXInteractiveComponent, MXValueComponent } from '@acorex/components/common';
+import { AXDateTime, AXDateTimeRange } from '@acorex/core/dateTime';
 import { AXCalendarView, AXCalendarViewSlot, AXCalendarViewType, MXCalendarBaseComponent } from './calendar.class';
 import * as i0 from "@angular/core";
 declare const AXCalendarComponent_base: import("polytype").Polytype.ClusteredConstructor<[{

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

@@ -1,7 +1,8 @@
-import { EventEmitter } from '@angular/core';
-import { MXBaseComponent } from '@acorex/components/common';
+import { MXBaseComponent, MXLookComponent } from '@acorex/components/common';
+import { AfterViewInit, EventEmitter, OnDestroy } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare class AXCollapseGroupComponent extends MXBaseComponent {
+declare const AXCollapseGroupComponent_base: import("polytype").Polytype.ClusteredConstructor<[typeof MXBaseComponent, typeof MXLookComponent]>;
+export declare class AXCollapseGroupComponent extends AXCollapseGroupComponent_base implements AfterViewInit, OnDestroy {
     accordionChange: EventEmitter<boolean>;
     private _accordion?;
     /**
@@ -12,8 +13,8 @@ export declare class AXCollapseGroupComponent extends MXBaseComponent {
     activeIndexChange: EventEmitter<number>;
     private _activeIndex;
     /**
-    *  Index of the currently active item within the group
-    */
+     *  Index of the currently active item within the group
+     */
     get activeIndex(): number;
     set activeIndex(value: number);
     private _items;
@@ -22,6 +23,8 @@ export declare class AXCollapseGroupComponent extends MXBaseComponent {
     private applyAccordion;
     private removeAccordion;
     ngOnDestroy(): void;
+    private get __hostClass();
     static ɵfac: i0.ɵɵFactoryDeclaration<AXCollapseGroupComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXCollapseGroupComponent, "ax-collapse-group", never, { "accordion": { "alias": "accordion"; "required": false; }; "activeIndex": { "alias": "activeIndex"; "required": false; }; }, { "accordionChange": "accordionChange"; "activeIndexChange": "activeIndexChange"; }, ["_items"], ["ax-collapse"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXCollapseGroupComponent, "ax-collapse-group", never, { "look": { "alias": "look"; "required": false; }; "accordion": { "alias": "accordion"; "required": false; }; "activeIndex": { "alias": "activeIndex"; "required": false; }; }, { "accordionChange": "accordionChange"; "activeIndexChange": "activeIndexChange"; }, ["_items"], ["ax-collapse"], false, never>;
 }
+export {};

package/collapse/lib/collapse.component.d.ts

@@ -1,17 +1,17 @@
-import { EventEmitter, TemplateRef } from '@angular/core';
 import { AXClickEvent, MXInteractiveComponent } from '@acorex/components/common';
+import { EventEmitter, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class AXCollapseComponent extends MXInteractiveComponent {
     /**
-    *  Fires each time the user clicks the panel header.
-    *  @event
-    */
+     *  Fires each time the user clicks the panel header.
+     *  @event
+     */
     onClick: EventEmitter<AXClickEvent>;
     isCollapsedChange: EventEmitter<any>;
     private _isCollapsed;
     /**
-    *  Providing a boolean value for its collapse state
-    */
+     *  Providing a boolean value for its collapse state
+     */
     get isCollapsed(): boolean;
     set isCollapsed(v: boolean);
     caption: string;

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

@@ -1,6 +1,6 @@
-import { MXInputBaseValueComponent, AXEvent } from '@acorex/components/common';
-import { MXDropdownBoxBaseComponent, AXDropdownBoxComponent } from '@acorex/components/dropdown';
 import { AXColorPalleteComponent } from '@acorex/components/color-palette';
+import { AXEvent, MXInputBaseValueComponent } from '@acorex/components/common';
+import { AXDropdownBoxComponent, MXDropdownBoxBaseComponent } from '@acorex/components/dropdown';
 import * as i0 from "@angular/core";
 declare const AXColorBoxComponent_base: import("polytype").Polytype.ClusteredConstructor<[typeof MXDropdownBoxBaseComponent, {
     new (): MXInputBaseValueComponent<string>;

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

@@ -1,7 +1,7 @@
-import { AXUnsubscriber } from '@acorex/core/utils';
 import { AXValueChangedEvent, MXBaseComponent } from '@acorex/components/common';
-import { AXColorPaletteParentComponent } from './color-palette.class';
 import { AXMaskOptions } from '@acorex/components/text-box';
+import { AXUnsubscriber } from '@acorex/core/utils';
+import { AXColorPaletteParentComponent } from './color-palette.class';
 import * as i0 from "@angular/core";
 export declare class AXColorPaletteInputComponent extends MXBaseComponent {
     _parent: AXColorPaletteParentComponent;
@@ -9,7 +9,7 @@ export declare class AXColorPaletteInputComponent extends MXBaseComponent {
     isValid: boolean;
     _rgba: any;
     _hex: string;
-    protected _colorMode: "hex" | "rgba";
+    protected _colorMode: 'hex' | 'rgba';
     protected _hexMaskOptions: AXMaskOptions;
     constructor(_parent: AXColorPaletteParentComponent, _unsubscriber: AXUnsubscriber);
     private applyParent;

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

@@ -1,5 +1,5 @@
-import { AXUnsubscriber } from '@acorex/core/utils';
 import { AXValueChangedEvent, MXBaseComponent } from '@acorex/components/common';
+import { AXUnsubscriber } from '@acorex/core/utils';
 import { AXColorPaletteParentComponent } from './color-palette.class';
 import * as i0 from "@angular/core";
 export declare class AXColorPalettePickerComponent extends MXBaseComponent {

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

@@ -1,9 +1,9 @@
-import { EventEmitter } from "@angular/core";
-import { AXValueChangedEvent, AXOptionChangedEvent } from "@acorex/components/common";
+import { AXOptionChangedEvent, AXValueChangedEvent } from '@acorex/components/common';
+import { EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
-* A token that specifies the  display mode of datapager component.
-*/
+ * A token that specifies the  display mode of datapager component.
+ */
 export type AXColorPaletteView = 'swatches' | 'gradient' | 'custom';
 export interface AXColorChangedEvent {
     color: any;

package/common/index.d.ts

@@ -8,7 +8,6 @@ export * from './lib/classes/datalist.class';
 export * from './lib/classes/events.class';
 export * from './lib/classes/styles.class';
 export * from './lib/common.module';
-export * from './lib/components/appearance-component.class';
 export * from './lib/components/base-component.class';
 export * from './lib/components/button-base-component.class';
 export * from './lib/components/color-component.class';

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

@@ -1,11 +1,42 @@
+import { BehaviorSubject } from 'rxjs';
 export interface AXDataListQuery {
     take?: number;
     skip?: number;
     searchQuery?: string;
 }
 export interface AXDataListFetchCallbackResult {
-    items: any[];
+    items: Array<any>;
     total: number;
 }
-export type AXDataListFetchDataCallback = (e: AXDataListQuery) => Promise<any[] | AXDataListFetchCallbackResult>;
-export type AXDataListItems = any[] | AXDataListFetchDataCallback;
+export type AXDataListFetchDataCallback = (e: AXDataListQuery) => Promise<AXDataListFetchCallbackResult>;
+export type AXDataListItems = Array<any> | AXDataListFetchDataCallback;
+export interface AXDataSourceQuery {
+    take?: number;
+    skip?: number;
+    searchQuery?: string;
+}
+export interface AXDataSourceCallbackResult<T> {
+    items: Array<T>;
+    total: number;
+}
+export type AXDataSourceLoadCallback<T> = (e: AXDataSourceQuery) => Promise<AXDataSourceCallbackResult<T>>;
+export type AXDataSourceByKeyCallback<T> = (key: unknown) => Promise<T>;
+export interface AXDateSourceConfig<T = unknown> {
+    key: string;
+    pageSize: number;
+    load: AXDataSourceLoadCallback<T>;
+    byKey: AXDataSourceByKeyCallback<T>;
+}
+export declare class AXDateSource<T = unknown> {
+    private config;
+    private _totalCount;
+    private _items;
+    get items(): T[];
+    private fetchedPages;
+    private _query;
+    loadingChanged: BehaviorSubject<boolean>;
+    dataStream: BehaviorSubject<T[]>;
+    constructor(config: AXDateSourceConfig<T>);
+    fetchPage(page: number): Promise<void>;
+}
+export declare function convertArrayToDataSource<T>(key: string, items: T[]): AXDateSource;

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

@@ -2,8 +2,7 @@ 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' | 'info' | 'default' | 'ghost';
-export type AXStyleLookType = 'default' | 'blank' | 'outline';
-export type AXAppearanceType = 'solid' | 'flat' | 'outline' | 'fill' | 'none';
+export type AXStyleColorType = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'ghost';
+export type AXStyleLookType = 'solid' | 'blank' | 'outline' | 'flat' | 'fill' | 'none';
 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';

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

@@ -1,5 +1,5 @@
-import { MXColorComponent } from "./color-component.class";
-import { MXLookComponent } from "./look-component.class";
+import { MXColorComponent } from './color-component.class';
+import { MXLookComponent } from './look-component.class';
 declare const MXColorLookComponent_base: import("polytype").Polytype.ClusteredConstructor<[typeof MXColorComponent, typeof MXLookComponent]>;
 export declare class MXColorLookComponent extends MXColorLookComponent_base {
 }

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

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

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

@@ -1,7 +1,6 @@
 import { MXValueComponent } from './value-component.class';
 import * as i0 from "@angular/core";
-export declare class MXSelectionValueComponent<T = unknown> extends MXValueComponent<unknown> {
-    selectionMode: 'value' | 'item';
+export declare abstract class MXSelectionValueComponent<T = unknown> extends MXValueComponent<unknown> {
     disabledCallback: (e: {
         item: T;
         index: number;
@@ -18,21 +17,15 @@ export declare class MXSelectionValueComponent<T = unknown> extends MXValueCompo
     private _disabledField;
     get disabledField(): string;
     set disabledField(v: string);
-    private _readonlyField;
-    get readonlyField(): string;
-    set readonlyField(v: string);
     private _multiple;
     get multiple(): boolean;
     set multiple(v: boolean);
-    private _items;
-    get items(): unknown[];
-    set items(v: unknown[]);
-    protected displayItems: unknown[];
     _selectedItems: unknown[];
     get selectedItems(): unknown[];
     internalSetValue(value: unknown): unknown;
     emitOnValueChangedEvent(oldValue?: unknown, newValue?: unknown): void;
-    private normalizeItemsList;
+    abstract getItemByKey(key: unknown): unknown;
+    protected normalizeItemsList(items: unknown[]): unknown[];
     private normalizeItem;
     private _normalizeSelectedItems;
     unselectItems(...items: T[]): void;
@@ -40,6 +33,8 @@ export declare class MXSelectionValueComponent<T = unknown> extends MXValueCompo
     toggleSelect(...items: T[]): void;
     isItemSelected(item: T): boolean;
     isItemDisabled(item: T): boolean;
+    protected getDisplayText(item: T): any;
+    protected getValue(item: T): any;
     static ɵfac: i0.ɵɵFactoryDeclaration<MXSelectionValueComponent<any>, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<MXSelectionValueComponent<any>>;
 }

package/common/lib/directives/delayed-value-changed.directive.d.ts

@@ -1,10 +1,10 @@
-import { EventEmitter, OnDestroy } from "@angular/core";
-import { NgModel } from "@angular/forms";
+import { EventEmitter, OnDestroy } from '@angular/core';
+import { NgModel } from '@angular/forms';
 import * as i0 from "@angular/core";
 export declare class AXNgModelDelayedValueChangedDirective implements OnDestroy {
     private ngModel;
-    delayedValueChanged: EventEmitter<any>;
-    delayTimeChange: EventEmitter<number>;
+    axDelayedValueChanged: EventEmitter<any>;
+    axDelayTimeChange: EventEmitter<number>;
     private _delayTime;
     get delayTime(): number;
     set delayTime(v: number);
@@ -13,5 +13,5 @@ export declare class AXNgModelDelayedValueChangedDirective implements OnDestroy
     constructor(ngModel: NgModel);
     private update;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXNgModelDelayedValueChangedDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AXNgModelDelayedValueChangedDirective, "[delayedValueChanged]", never, { "delayTime": { "alias": "delayTime"; "required": false; }; }, { "delayedValueChanged": "delayedValueChanged"; "delayTimeChange": "delayTimeChange"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AXNgModelDelayedValueChangedDirective, "[axDelayedValueChanged]", never, { "delayTime": { "alias": "delayTime"; "required": false; }; }, { "axDelayedValueChanged": "axDelayedValueChanged"; "axDelayTimeChange": "axDelayTimeChange"; }, never, never, true, never>;
 }

package/common/lib/directives/hotkey.directive.d.ts

@@ -10,7 +10,7 @@ export declare class AXHotkeyDirective implements AfterViewInit {
     private el;
     _host: AXComponent;
     private hs;
-    hotkey: string | AXHotKeyAction | AXHotKeyAction[];
+    axHotkey: string | AXHotKeyAction | AXHotKeyAction[];
     private _subs;
     constructor(el: ElementRef<HTMLElement>, _host: AXComponent, hs: AXHotkeysService);
     ngAfterViewInit(): void;
@@ -18,5 +18,5 @@ export declare class AXHotkeyDirective implements AfterViewInit {
     private _addHotKeyAction;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXHotkeyDirective, [null, { optional: true; host: true; self: true; }, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AXHotkeyDirective, "[hotkey]", never, { "hotkey": { "alias": "hotkey"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AXHotkeyDirective, "[axHotkey]", never, { "axHotkey": { "alias": "axHotkey"; "required": false; }; }, {}, never, never, false, never>;
 }

package/common/lib/directives/responsive.directive.d.ts

@@ -6,5 +6,5 @@ export declare class AXResponsiveDirective implements OnDestroy {
     constructor(_elementRef: ElementRef<HTMLDivElement>);
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXResponsiveDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AXResponsiveDirective, "[ax-responsive]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AXResponsiveDirective, "[axResponsive]", never, {}, {}, never, never, false, never>;
 }

package/context-menu/lib/context-menu.component.d.ts

@@ -1,7 +1,7 @@
 import { Overlay } from '@angular/cdk/overlay';
-import { OnInit, TemplateRef, ElementRef, ChangeDetectorRef, ViewContainerRef } from '@angular/core';
 import { AXBaseComponent, AXBaseMenuMixin } from '@acorex/components/mixin';
 import { AXPlatform } from '@acorex/core/platform';
+import { ChangeDetectorRef, ElementRef, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * The Button is a component which detects user interaction and triggers a corresponding event

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

@@ -1,5 +1,5 @@
-import { QueryList, TemplateRef, EventEmitter } from '@angular/core';
-import { AXPagedComponentInterface, AXValueChangedEvent, MXBaseComponent, AXDataListItems } from '@acorex/components/common';
+import { AXDataListItems, AXPagedComponentInterface, AXValueChangedEvent, MXBaseComponent } from '@acorex/components/common';
+import { EventEmitter, QueryList, TemplateRef } from '@angular/core';
 import { AXDataColumnComponent } from './data-column.directive';
 import * as i0 from "@angular/core";
 export declare class AXDataTableComponent extends MXBaseComponent implements AXPagedComponentInterface {

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

@@ -1,5 +1,5 @@
 import { AXCalendarNavigateEvent, MXCalendarBaseComponent } from '@acorex/components/calendar';
-import { MXAppearanceComponent, MXInputBaseValueComponent } from '@acorex/components/common';
+import { MXInputBaseValueComponent, MXLookComponent } from '@acorex/components/common';
 import { AXDateTimeInputComponent } from '@acorex/components/datetime-input';
 import { AXDateTimePickerComponent } from '@acorex/components/datetime-picker';
 import { AXDropdownBoxComponent, MXDropdownBoxBaseComponent } from '@acorex/components/dropdown';
@@ -9,7 +9,7 @@ declare const AXDateTimeBoxComponent_base: import("polytype").Polytype.Clustered
     new (): MXInputBaseValueComponent<Date>;
     ɵfac: unknown;
     ɵprov: import("@angular/core").ɵɵInjectableDeclaration<MXInputBaseValueComponent<any>>;
-}, typeof MXCalendarBaseComponent, typeof MXDropdownBoxBaseComponent, typeof MXAppearanceComponent]>;
+}, typeof MXCalendarBaseComponent, typeof MXDropdownBoxBaseComponent, typeof MXLookComponent]>;
 /**
  * The Button is a component which detects user interaction and triggers a corresponding event
  *
@@ -23,12 +23,13 @@ export declare class AXDateTimeBoxComponent extends AXDateTimeBoxComponent_base
     private _format;
     get format(): string;
     set format(v: string);
-    protected _handleModelChange(value: Date | null): void;
+    protected _handleInputModelChange(value: Date | null): void;
+    protected _handlePickerModelChange(value: Date | null): void;
     protected _handleOnOpenedEvent(): void;
     protected _handleOnClosedEvent(): void;
     protected _handleCalendarOnNavigate(e: AXCalendarNavigateEvent): void;
     internalValueChanged(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDateTimeBoxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXDateTimeBoxComponent, "ax-datetime-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; }; "appearance": { "alias": "appearance"; "required": false; }; "format": { "alias": "format"; "required": false; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "formatChange": "formatChange"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-validation-rule"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDateTimeBoxComponent, "ax-datetime-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; }; "format": { "alias": "format"; "required": false; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "formatChange": "formatChange"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-validation-rule"], false, never>;
 }
 export {};

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

@@ -1,5 +1,5 @@
-import { ElementRef, EventEmitter } from '@angular/core';
 import { MXInputBaseValueComponent } from '@acorex/components/common';
+import { ElementRef, EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class AXDateTimeInputComponent extends MXInputBaseValueComponent<Date> {
     private calendarService;

package/datetime-picker/index.d.ts

@@ -1,3 +1,3 @@
-export * from './lib/datetime-picker.config';
 export * from './lib/datetime-picker.component';
+export * from './lib/datetime-picker.config';
 export * from './lib/datetime-picker.module';

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

@@ -1,8 +1,7 @@
 import { AXCalendarNavigateEvent, MXCalendarBaseComponent } from '@acorex/components/calendar';
 import { AXClickEvent, AXValueChangedEvent, MXValueComponent } from '@acorex/components/common';
 import { AXPickerComponent } from '@acorex/components/picker';
-import { AXTabsComponent } from '@acorex/components/tabs';
-import { AXTabStripChangedEvent } from '@acorex/components/tabs';
+import { AXTabStripChangedEvent, AXTabsComponent } from '@acorex/components/tabs';
 import { AXDateTime, AXDateTimeParts } from '@acorex/core/dateTime';
 import { EventEmitter, OnInit } from '@angular/core';
 import * as i0 from "@angular/core";

package/dialog/lib/dialog.class.d.ts

@@ -19,7 +19,8 @@ export interface AXDialogConfig {
     type: AXStyleColorType;
     buttons: AXDialogButtonItem[];
     closeButton?: boolean;
-    orientation?: "horizontal" | "vertical";
+    orientation?: 'horizontal' | 'vertical';
+    icon?: string | 'none';
 }
 export interface AXDialogRef {
     close(): void;
@@ -30,5 +31,6 @@ export interface AXDialogData {
     type: AXStyleColorType;
     buttons: AXDialogButtonItem[];
     closeButton: boolean;
-    orientation: "horizontal" | "vertical";
+    orientation: 'horizontal' | 'vertical';
+    icon?: string | 'none';
 }

package/dialog/lib/dialog.service.d.ts

@@ -8,14 +8,15 @@ import * as i0 from "@angular/core";
  */
 export declare class AXDialogService {
     private dialog;
+    private detectIcon;
     /**
      *  Show an alert box with 'Okay' button.
      */
-    alert(title: string, content: string, type?: AXStyleColorType): Promise<void>;
+    alert(title: string, content: string, type?: AXStyleColorType, orientation?: 'horizontal' | 'vertical'): Promise<void>;
     /**
      *  Show a confirm box with 'Okay' & 'Cancel' buttons.
      */
-    confirm(title: string, content: string, type?: AXStyleColorType): Promise<{
+    confirm(title: string, content: string, type?: AXStyleColorType, orientation?: 'horizontal' | 'vertical'): Promise<{
         result: boolean;
     }>;
     /**

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

@@ -1,13 +1,14 @@
-import { AXEvent, MXAppearanceComponent, MXInteractiveComponent } from '@acorex/components/common';
+import { AXEvent, MXInteractiveComponent, MXLookComponent } from '@acorex/components/common';
 import { AXPopoverComponent } from '@acorex/components/popover';
 import { EventEmitter, OnInit } from '@angular/core';
 import * as i0 from "@angular/core";
-declare const AXDropdownBoxComponent_base: import("polytype").Polytype.ClusteredConstructor<[typeof MXInteractiveComponent, typeof MXAppearanceComponent]>;
+declare const AXDropdownBoxComponent_base: import("polytype").Polytype.ClusteredConstructor<[typeof MXInteractiveComponent, typeof MXLookComponent]>;
 export declare class AXDropdownBoxComponent extends AXDropdownBoxComponent_base implements OnInit {
     private _platform;
     protected _isMobile: boolean;
     protected _target: HTMLDivElement;
     protected _popoverTitle: string;
+    protected _popoverWidth: string;
     protected _placement: import("@acorex/components/common").AXConnectedPosition[];
     protected _popover: AXPopoverComponent;
     onOpened: EventEmitter<AXEvent>;
@@ -16,12 +17,14 @@ export declare class AXDropdownBoxComponent extends AXDropdownBoxComponent_base
     protected _handlePopupOnOpened(e: AXEvent): void;
     protected _handlePopupOnClosed(e: AXEvent): void;
     protected _handleKeydown(e: KeyboardEvent): void;
+    updatePosition(): void;
     toggle(): void;
     close(): void;
     open(): void;
     get isOpen(): boolean;
+    get isActionsheetStyle(): boolean;
     private get __hostClass();
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDropdownBoxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXDropdownBoxComponent, "ax-dropdown-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; }, { "disabledChange": "disabledChange"; "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["[input]", "[panel]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDropdownBoxComponent, "ax-dropdown-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "look": { "alias": "look"; "required": false; }; }, { "disabledChange": "disabledChange"; "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["[input]", "[panel]"], false, never>;
 }
 export {};

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

@@ -35,6 +35,7 @@ export declare class AXDropdownPanelComponent extends MXInteractiveComponent imp
     close(): void;
     open(): void;
     get isOpen(): boolean;
+    get isActionsheetStyle(): boolean;
     private get __hostClass();
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDropdownPanelComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AXDropdownPanelComponent, "ax-dropdown-panel", never, { "isOpen": { "alias": "isOpen"; "required": false; }; "fitParent": { "alias": "fitParent"; "required": false; }; "dropdownWidth": { "alias": "dropdownWidth"; "required": false; }; "position": { "alias": "position"; "required": false; }; "adaptivityEnabled": { "alias": "adaptivityEnabled"; "required": false; }; }, { "onOpened": "onOpened"; "onClosed": "onClosed"; "onItemClick": "onItemClick"; }, ["_contentButtons"], ["[panel],ax-button-item"], false, never>;

package/esm2022/action-sheet/index.mjs

@@ -1,5 +1,5 @@
-export * from './lib/action-sheet.component';
 export * from './lib/action-sheet.class';
+export * from './lib/action-sheet.component';
 export * from './lib/action-sheet.module';
 export * from './lib/action-sheet.service';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvYWN0aW9uLXNoZWV0L3NyYy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLDhCQUE4QixDQUFDO0FBQzdDLGNBQWMsMEJBQTBCLENBQUM7QUFDekMsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLDRCQUE0QixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9saWIvYWN0aW9uLXNoZWV0LmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9hY3Rpb24tc2hlZXQuY2xhc3MnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvYWN0aW9uLXNoZWV0Lm1vZHVsZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9hY3Rpb24tc2hlZXQuc2VydmljZSc7XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvYWN0aW9uLXNoZWV0L3NyYy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLDBCQUEwQixDQUFDO0FBQ3pDLGNBQWMsOEJBQThCLENBQUM7QUFDN0MsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLDRCQUE0QixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9saWIvYWN0aW9uLXNoZWV0LmNsYXNzJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2FjdGlvbi1zaGVldC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvYWN0aW9uLXNoZWV0Lm1vZHVsZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9hY3Rpb24tc2hlZXQuc2VydmljZSc7XG4iXX0=

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

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWN0aW9uLXNoZWV0LmNsYXNzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL2FjdGlvbi1zaGVldC9zcmMvbGliL2FjdGlvbi1zaGVldC5jbGFzcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQVhTdHlsZUNvbG9yVHlwZSB9IGZyb20gJ0BhY29yZXgvY29tcG9uZW50cy9jb21tb24nO1xuaW1wb3J0IHsgQ29tcG9uZW50VHlwZSB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9wb3J0YWwnO1xuaW1wb3J0IHsgVGVtcGxhdGVSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuZXhwb3J0IGludGVyZmFjZSBBWEFjdGlvblNoZWV0SXRlbSB7XG4gIG5hbWU/OiBzdHJpbmc7XG4gIHRleHQ6IHN0cmluZztcbiAgaWNvbj86IHN0cmluZztcbiAgZGlzYWJsZWQ/OiBib29sZWFuO1xuICBjb2xvcj86IEFYU3R5bGVDb2xvclR5cGU7XG4gIG9uQ2xpY2s/OiAoKSA9PiB2b2lkO1xufVxuXG5leHBvcnQgdHlwZSBBWEFjdGlvblNoZWV0Q29udGVudFR5cGUgPSBUZW1wbGF0ZVJlZjx1bmtub3duPiB8IENvbXBvbmVudFR5cGU8dW5rbm93bj47XG5cbmV4cG9ydCBpbnRlcmZhY2UgQVhBY3Rpb25TaGVldENvbmZpZyB7XG4gIHRpdGxlPzogc3RyaW5nO1xuICBzdWJUaXRsZT86IHN0cmluZztcbiAgY2xvc2VCdXR0b24/OiBib29sZWFuO1xuICBoZWFkZXI/OiBib29sZWFuO1xuICBkYXRhPzogdW5rbm93bjtcbiAgY2xvc2VPbkJhY2tkcm9wQ2xpY2s/OiBib29sZWFuO1xuICBpdGVtcz86IEFYQWN0aW9uU2hlZXRJdGVtW107XG4gIGNvbnRlbnQ/OiBBWEFjdGlvblNoZWV0Q29udGVudFR5cGVcbn1cblxuZXhwb3J0IGludGVyZmFjZSBBWEFjdGlvblNoZWV0RGF0YSB7XG4gIHRpdGxlOiBzdHJpbmc7XG4gIHN1YlRpdGxlPzogc3RyaW5nO1xuICBjbG9zZUJ1dHRvbj86IGJvb2xlYW47XG4gIGhlYWRlcjogYm9vbGVhbjtcbiAgZGF0YTogdW5rbm93bjtcbiAgY29udGVudD86IEFYQWN0aW9uU2hlZXRDb250ZW50VHlwZSxcbiAgaXRlbXM/OiBBWEFjdGlvblNoZWV0SXRlbVtdO1xufSJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWN0aW9uLXNoZWV0LmNsYXNzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL2FjdGlvbi1zaGVldC9zcmMvbGliL2FjdGlvbi1zaGVldC5jbGFzcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQVhTdHlsZUNvbG9yVHlwZSB9IGZyb20gJ0BhY29yZXgvY29tcG9uZW50cy9jb21tb24nO1xuaW1wb3J0IHsgQ29tcG9uZW50VHlwZSB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9wb3J0YWwnO1xuaW1wb3J0IHsgVGVtcGxhdGVSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuZXhwb3J0IGludGVyZmFjZSBBWEFjdGlvblNoZWV0SXRlbSB7XG4gIG5hbWU/OiBzdHJpbmc7XG4gIHRleHQ6IHN0cmluZztcbiAgaWNvbj86IHN0cmluZztcbiAgZGlzYWJsZWQ/OiBib29sZWFuO1xuICBjb2xvcj86IEFYU3R5bGVDb2xvclR5cGU7XG4gIG9uQ2xpY2s/OiAoKSA9PiB2b2lkO1xufVxuXG5leHBvcnQgdHlwZSBBWEFjdGlvblNoZWV0Q29udGVudFR5cGUgPSBUZW1wbGF0ZVJlZjx1bmtub3duPiB8IENvbXBvbmVudFR5cGU8dW5rbm93bj47XG5cbmV4cG9ydCBpbnRlcmZhY2UgQVhBY3Rpb25TaGVldENvbmZpZyB7XG4gIHRpdGxlPzogc3RyaW5nO1xuICBzdWJUaXRsZT86IHN0cmluZztcbiAgY2xvc2VCdXR0b24/OiBib29sZWFuO1xuICBoZWFkZXI/OiBib29sZWFuO1xuICBkYXRhPzogdW5rbm93bjtcbiAgY2xvc2VPbkJhY2tkcm9wQ2xpY2s/OiBib29sZWFuO1xuICBpdGVtcz86IEFYQWN0aW9uU2hlZXRJdGVtW107XG4gIGNvbnRlbnQ/OiBBWEFjdGlvblNoZWV0Q29udGVudFR5cGU7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgQVhBY3Rpb25TaGVldERhdGEge1xuICB0aXRsZTogc3RyaW5nO1xuICBzdWJUaXRsZT86IHN0cmluZztcbiAgY2xvc2VCdXR0b24/OiBib29sZWFuO1xuICBoZWFkZXI6IGJvb2xlYW47XG4gIGRhdGE6IHVua25vd247XG4gIGNvbnRlbnQ/OiBBWEFjdGlvblNoZWV0Q29udGVudFR5cGU7XG4gIGl0ZW1zPzogQVhBY3Rpb25TaGVldEl0ZW1bXTtcbn1cbiJdfQ==