@acorex/components 7.5.0 → 7.8.0

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/badge/lib/badge.component.d.ts

@@ -1,8 +1,8 @@
-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 {
     text: string;
     private get __hostClass();
     static ɵfac: i0.ɵɵFactoryDeclaration<AXBadgeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXBadgeComponent, "ax-badge", never, { "color": { "alias": "color"; "required": false; }; "text": { "alias": "text"; "required": false; }; }, {}, never, ["ax-prefix", "ax-suffix"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXBadgeComponent, "ax-badge", never, { "color": { "alias": "color"; "required": false; }; "look": { "alias": "look"; "required": false; }; "text": { "alias": "text"; "required": false; }; }, {}, never, ["ax-prefix", "ax-suffix"], false, never>;
 }

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-item.component.d.ts

@@ -1,4 +1,5 @@
-import { MXColorComponent, MXInteractiveComponent } from '@acorex/components/common';
+import { AXClickEvent, MXColorComponent, MXInteractiveComponent } from '@acorex/components/common';
+import { EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
 declare const AXButtonItemComponent_base: import("polytype").Polytype.ClusteredConstructor<[typeof MXInteractiveComponent, typeof MXColorComponent]>;
 export declare class AXButtonItemComponent extends AXButtonItemComponent_base {
@@ -9,6 +10,7 @@ export declare class AXButtonItemComponent extends AXButtonItemComponent_base {
     divided: boolean;
     data: unknown;
     name: string;
+    onClick: EventEmitter<AXClickEvent>;
     private __hostClick;
     private __hostFocus;
     private __hostBlur;

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/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,6 +1,7 @@
+import { AXClickEvent, MXComponentOptionChanged, MXInteractiveComponent, MXValueComponent } from '@acorex/components/common';
 import { AXDateTime, AXDateTimeRange } from '@acorex/core/dateTime';
-import { AXClickEvent, AXOptionChangedEvent, MXInteractiveComponent, MXValueComponent } from '@acorex/components/common';
 import { AXCalendarView, AXCalendarViewSlot, AXCalendarViewType, MXCalendarBaseComponent } from './calendar.class';
+import { AXUnsubscriber } from '@acorex/core/utils';
 import * as i0 from "@angular/core";
 declare const AXCalendarComponent_base: import("polytype").Polytype.ClusteredConstructor<[{
     new (): MXValueComponent<Date>;
@@ -18,17 +19,18 @@ export declare class AXCalendarComponent extends AXCalendarComponent_base {
     protected _dayNames: string[];
     private _initValues;
     private _refresh;
-    constructor();
+    constructor(unsubscriber: AXUnsubscriber);
     protected ngOnInit(): void;
     protected ngAfterViewInit(): void;
+    protected ngOnDestroy(): void;
     render(): void;
     protected _handlePrevClick(): void;
     protected _handleNextClick(): void;
     protected _handleSlotClick(e: MouseEvent, slot: AXCalendarViewSlot): void;
     protected _handleNavClick(e: AXClickEvent | any, view: AXCalendarViewType): void;
     toggleView(): void;
-    protected _handleOnOptionChanged(e: AXOptionChangedEvent): void;
-    private _handleOnValueChanged;
+    protected internalOptionChanged(e: MXComponentOptionChanged): void;
+    protected internalValueChanged(value?: Date): void;
     protected _handleGoToday(): void;
     next(): void;
     prev(): void;

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

@@ -1,7 +1,7 @@
 import { MXColorComponent } from '@acorex/components/common';
 import * as i0 from "@angular/core";
 export declare class AXChipsComponent extends MXColorComponent {
-    look: 'default' | 'outline';
+    look: 'solid' | 'outline' | 'twotone';
     text: string;
     constructor();
     private get __hostClass();

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,23 +1,36 @@
-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 AXCollapseClickEvent extends AXClickEvent {
+    handled: boolean;
+}
 export declare class AXCollapseComponent extends MXInteractiveComponent {
     /**
-    *  Fires each time the user clicks the panel header.
-    *  @event
-    */
-    onClick: EventEmitter<AXClickEvent>;
+     *  Fires each time the user clicks the panel header.
+     *  @event
+     */
+    onClick: EventEmitter<AXCollapseClickEvent>;
     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;
     icon: string;
+    private _isLoading;
+    /**
+     *  Providing a boolean value for its collapse state
+     */
+    get isLoading(): boolean;
+    set isLoading(v: boolean);
     headerTemplate: TemplateRef<any>;
     handleHeaderClick(e: MouseEvent): void;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    get __hostClass(): string[];
     static ɵfac: i0.ɵɵFactoryDeclaration<AXCollapseComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXCollapseComponent, "ax-collapse", never, { "isCollapsed": { "alias": "isCollapsed"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; }; }, { "isCollapsedChange": "isCollapsedChange"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXCollapseComponent, "ax-collapse", never, { "disabled": { "alias": "disabled"; "required": false; }; "isCollapsed": { "alias": "isCollapsed"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; }; }, { "onClick": "onClick"; "isCollapsedChange": "isCollapsedChange"; }, never, ["*"], false, never>;
 }

package/collapse/lib/collapse.module.d.ts

@@ -2,8 +2,9 @@ import * as i0 from "@angular/core";
 import * as i1 from "./collapse.component";
 import * as i2 from "./collapse-group.component";
 import * as i3 from "@angular/common";
+import * as i4 from "@acorex/components/loading";
 export declare class AXCollapseModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AXCollapseModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXCollapseModule, [typeof i1.AXCollapseComponent, typeof i2.AXCollapseGroupComponent], [typeof i3.CommonModule], [typeof i1.AXCollapseComponent, typeof i2.AXCollapseGroupComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXCollapseModule, [typeof i1.AXCollapseComponent, typeof i2.AXCollapseGroupComponent], [typeof i3.CommonModule, typeof i4.AXLoadingModule], [typeof i1.AXCollapseComponent, typeof i2.AXCollapseGroupComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AXCollapseModule>;
 }

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

@@ -5,10 +5,10 @@ export * from './lib/types/range';
 export * from './lib/types/selection-mode';
 export * from './lib/classes/components.class';
 export * from './lib/classes/datalist.class';
+export * from './lib/classes/datasource.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/datasource.class.d.ts

@@ -0,0 +1,55 @@
+import { ListIterateeCustom } from "lodash";
+import { Subject } from "rxjs";
+export type AXDateSourceFilterPredicate<T> = ListIterateeCustom<T, boolean>;
+export interface AXDataSourceQuery<T> {
+    take?: number;
+    skip?: number;
+    predicate?: AXDateSourceFilterPredicate<T>;
+}
+export interface AXDataSourceCallbackResult<T> {
+    items: Array<T>;
+    total: number;
+}
+export type AXDataSourceLoadCallback<T> = (e: AXDataSourceQuery<T>) => 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 interface AXDateSourceChangedEvent<T = unknown> {
+    cachedItems: Array<T>;
+    items: Array<T>;
+    totalCount: number;
+    totalPages: number;
+    page: number;
+}
+export declare class AXDateSource<T = unknown> {
+    config: AXDateSourceConfig<T>;
+    private _totalCount;
+    private get totalCount();
+    private get totalPages();
+    private _cachedItems;
+    get cachedItems(): T[];
+    private _items;
+    get items(): T[];
+    private fetchedPages;
+    private _page;
+    private _query;
+    onChanged: Subject<AXDateSourceChangedEvent<T>>;
+    onLoadingChanged: Subject<boolean>;
+    private _isLoading;
+    get isLoading(): boolean;
+    constructor(config: AXDateSourceConfig<T>);
+    private load;
+    private setLoadingState;
+    setPage(page: number): void;
+    filter(predicate?: AXDateSourceFilterPredicate<T>): void;
+    reset(): void;
+    find(key: unknown): T | Promise<T>;
+}
+export declare function convertArrayToDataSource<T>(items: T[], options?: {
+    key: string;
+    pageSize: number;
+}): 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' | 'twotone' | '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/interactive-component.class.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '@angular/core';
-import { AXClickEvent, AXFocusEvent } from '../classes/events.class';
+import { AXFocusEvent } from '../classes/events.class';
 import { MXBaseComponent } from './base-component.class';
 export declare class MXInteractiveComponent extends MXBaseComponent {
     protected onTouchedCallback: () => void;
@@ -33,12 +33,6 @@ export declare class MXInteractiveComponent extends MXBaseComponent {
      */
     onBlur: EventEmitter<AXFocusEvent>;
     protected emitOnBlurEvent(e: FocusEvent): void;
-    /**
-     *  Fires each time the user clicks the button.
-     *  @event
-     */
-    onClick: EventEmitter<AXClickEvent>;
-    protected emitOnClickEvent(e: MouseEvent): void;
     focus(): void;
     blur(): void;
     /**

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

@@ -11,9 +11,6 @@ export declare abstract class MXSelectionValueComponent<T = unknown> extends MXV
     private _textField;
     get textField(): string;
     set textField(v: string);
-    private _hintField;
-    get hintField(): string;
-    set hintField(v: string);
     private _disabledField;
     get disabledField(): string;
     set disabledField(v: string);
@@ -22,10 +19,11 @@ export declare abstract class MXSelectionValueComponent<T = unknown> extends MXV
     set multiple(v: boolean);
     _selectedItems: unknown[];
     get selectedItems(): unknown[];
-    internalSetValue(value: unknown): unknown;
+    internalSetValue(value: unknown): any;
     emitOnValueChangedEvent(oldValue?: unknown, newValue?: unknown): void;
-    abstract getItemByKey(key: unknown): unknown;
-    private normalizeItemsList;
+    abstract getItemByKey(key: unknown): unknown | Promise<unknown>;
+    private _cacheList;
+    protected normalizeItemsList(items: unknown[], findBykey?: boolean): unknown[];
     private normalizeItem;
     private _normalizeSelectedItems;
     unselectItems(...items: T[]): void;
@@ -34,6 +32,7 @@ export declare abstract class MXSelectionValueComponent<T = unknown> extends MXV
     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/common/lib/directives/ripple.directive.d.ts

@@ -2,9 +2,10 @@ import { ElementRef, OnDestroy } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class AXRippleDirective implements OnDestroy {
     private el;
+    axRippleColor: string;
     constructor(el: ElementRef<HTMLElement>);
     ngOnDestroy(): void;
     private createRipple;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXRippleDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AXRippleDirective, "[axRipple]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AXRippleDirective, "[axRipple]", never, { "axRippleColor": { "alias": "axRippleColor"; "required": false; }; }, {}, never, never, false, never>;
 }

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 { AXClickEvent, 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
  *
@@ -29,7 +29,8 @@ export declare class AXDateTimeBoxComponent extends AXDateTimeBoxComponent_base
     protected _handleOnClosedEvent(): void;
     protected _handleCalendarOnNavigate(e: AXCalendarNavigateEvent): void;
     internalValueChanged(): void;
+    protected _handleInputOnClick(e: AXClickEvent): 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 { AXClickEvent, MXInputBaseValueComponent } from '@acorex/components/common';
 import { ElementRef, EventEmitter } from '@angular/core';
-import { MXInputBaseValueComponent } from '@acorex/components/common';
 import * as i0 from "@angular/core";
 export declare class AXDateTimeInputComponent extends MXInputBaseValueComponent<Date> {
     private calendarService;
@@ -23,6 +23,7 @@ export declare class AXDateTimeInputComponent extends MXInputBaseValueComponent<
     get maxValue(): Date;
     set maxValue(v: Date);
     formatChange: EventEmitter<string>;
+    onClick: EventEmitter<AXClickEvent>;
     private _format;
     get format(): string;
     set format(v: string);

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";