@acorex/components 7.2.7 → 7.3.1

package/action-sheet/index.d.ts

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

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

@@ -0,0 +1,31 @@
+import { AXStyleColorType } from '@acorex/components/common';
+import { ComponentType } from '@angular/cdk/portal';
+import { TemplateRef } from '@angular/core';
+export interface AXActionSheetItem {
+    name?: string;
+    text: string;
+    icon?: string;
+    disabled?: boolean;
+    color?: AXStyleColorType;
+    onClick?: () => void;
+}
+export type AXActionSheetContentType = TemplateRef<unknown> | ComponentType<unknown>;
+export interface AXActionSheetConfig {
+    title?: string;
+    subTitle?: string;
+    closeButton?: boolean;
+    header?: boolean;
+    data?: unknown;
+    closeOnBackdropClick?: boolean;
+    items?: AXActionSheetItem[];
+    content?: AXActionSheetContentType;
+}
+export interface AXActionSheetData {
+    title: string;
+    subTitle?: string;
+    closeButton?: boolean;
+    header: boolean;
+    data: unknown;
+    content?: AXActionSheetContentType;
+    items?: AXActionSheetItem[];
+}

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

@@ -1,24 +1,23 @@
 import { AXComponentCloseEvent, MXBaseComponent } from '@acorex/components/common';
 import { CdkPortalOutletAttachedRef, Portal } from '@angular/cdk/portal';
-import { EventEmitter, OnInit } from '@angular/core';
-import { AXActionSheetItem } from './action-sheet.interface';
+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;
+    private dialogRef;
     protected _selectedPortal: Portal<any>;
-    title: string;
-    subTitle: string;
-    items: AXActionSheetItem[];
-    content: any;
-    showCloseButton: boolean;
-    showHeader: boolean;
-    data: unknown;
-    onClosed: EventEmitter<AXComponentCloseEvent>;
-    close(): void;
+    private _componentRef;
+    /**
+       *  @ignore
+       */
+    constructor(data: AXActionSheetData, dialogRef: DialogRef<AXComponentCloseEvent>);
     ngOnInit(): void;
     protected onKeydownHandler(): void;
-    protected _handleAttched(ref: CdkPortalOutletAttachedRef): void;
-    protected _handleCloseClick(): void;
+    _handleAttched(ref: CdkPortalOutletAttachedRef): void;
     onItemClick(item: AXActionSheetItem): void;
+    close(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXActionSheetComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AXActionSheetComponent, "ax-action-sheet", never, {}, {}, never, never, false, never>;
 }

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

@@ -7,8 +7,9 @@ import * as i5 from "@angular/cdk/a11y";
 import * as i6 from "@acorex/components/button";
 import * as i7 from "@angular/cdk/portal";
 import * as i8 from "@acorex/components/decorators";
+import * as i9 from "@angular/cdk/dialog";
 export declare class AXActionSheetModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AXActionSheetModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXActionSheetModule, [typeof i1.AXActionSheetComponent], [typeof i2.CommonModule, typeof i3.AXCommonModule, typeof i4.DragDropModule, typeof i5.A11yModule, typeof i6.AXButtonModule, typeof i7.PortalModule, typeof i8.AXDecoratorModule], [typeof i1.AXActionSheetComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXActionSheetModule, [typeof i1.AXActionSheetComponent], [typeof i2.CommonModule, typeof i3.AXCommonModule, typeof i4.DragDropModule, typeof i5.A11yModule, typeof i6.AXButtonModule, typeof i7.PortalModule, typeof i8.AXDecoratorModule, typeof i9.DialogModule], [typeof i1.AXActionSheetComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AXActionSheetModule>;
 }

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

@@ -1,13 +1,9 @@
-import { AXComponentClosedPromise, AXOverlayService } from '@acorex/components/common';
-import { Overlay } from '@angular/cdk/overlay';
-import { AXActionSheetOptions } from './action-sheet.interface';
+import { AXComponentClosedPromise } from '@acorex/components/common';
+import { AXActionSheetConfig } from './action-sheet.class';
 import * as i0 from "@angular/core";
 export declare class AXActionSheetService {
-    private _overlay;
-    private overlayService;
-    constructor(_overlay: Overlay, overlayService: AXOverlayService);
-    open(options: AXActionSheetOptions): AXComponentClosedPromise;
-    private closePopup;
+    private dialog;
+    open(config: AXActionSheetConfig): AXComponentClosedPromise;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXActionSheetService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<AXActionSheetService>;
 }

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

@@ -1,6 +1,6 @@
-import { AXButtonComponent } from '@acorex/components/button';
-import { AXEvent, AXOptionChangedEvent, MXColorComponent } from '@acorex/components/common';
-import { EventEmitter } from '@angular/core';
+import { AXEvent, MXColorComponent } from '@acorex/components/common';
+import { AXDecoratorGenericComponent } from '@acorex/components/decorators';
+import { AfterViewInit, EventEmitter, OnDestroy, OnInit } from '@angular/core';
 import * as i0 from "@angular/core";
 declare const AXAlertComponent_base: import("polytype").Polytype.ClusteredConstructor<[typeof MXColorComponent]>;
 /**
@@ -8,12 +8,12 @@ declare const AXAlertComponent_base: import("polytype").Polytype.ClusteredConstr
  *
  * @category Components
  */
-export declare class AXAlertComponent extends AXAlertComponent_base {
+export declare class AXAlertComponent extends AXAlertComponent_base implements OnInit, AfterViewInit, OnDestroy {
     private _iconComp;
     private _buttonComps;
-    protected _titleComp: AXButtonComponent;
-    protected _contentComp: AXButtonComponent;
-    protected _footerComp: AXButtonComponent;
+    protected _titleComp: AXDecoratorGenericComponent;
+    protected _contentComp: AXDecoratorGenericComponent;
+    protected _footerComp: AXDecoratorGenericComponent;
     protected _showInline: boolean;
     onClosed: EventEmitter<AXEvent>;
     private _customIcon;
@@ -32,9 +32,10 @@ export declare class AXAlertComponent extends AXAlertComponent_base {
      */
     get visible(): boolean;
     set visible(v: boolean);
-    protected ngOnInit(): void;
-    protected ngAfterViewInit(): void;
-    protected _handleOnOptionChanged(e: AXOptionChangedEvent): void;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    private _setLayout;
+    protected _handleOnOptionChanged(): void;
     private _setIcon;
     private _applyButtonStyle;
     /**
@@ -51,6 +52,6 @@ export declare class AXAlertComponent extends AXAlertComponent_base {
     show(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXAlertComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXAlertComponent, "ax-alert", never, { "color": { "alias": "color"; "required": false; }; "timeOut": { "alias": "timeOut"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; }, { "colorChange": "colorChange"; "onClosed": "onClosed"; }, ["_iconComp", "_titleComp", "_contentComp", "_footerComp", "_buttonComps"], ["ax-icon", "ax-title", "ax-content", "ax-footer", "ax-button", "ax-close-button"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXAlertComponent, "ax-alert", never, { "color": { "alias": "color"; "required": false; }; "timeOut": { "alias": "timeOut"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; }, { "colorChange": "colorChange"; "onClosed": "onClosed"; }, ["_iconComp", "_titleComp", "_contentComp", "_footerComp", "_buttonComps"], ["ax-button", "ax-close-button", "ax-title", "ax-icon", "ax-content", "ax-footer"], false, never>;
 }
 export {};

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

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

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

@@ -12,12 +12,16 @@ export interface AXClickItemBase {
     selected?: boolean;
     seperated?: boolean;
     name?: string;
-    data?: any;
-    onClick?: (...args: any) => void;
+    data?: unknown;
+    onClick?: (e?: {
+        source: AXButtonItem;
+        handled?: boolean;
+    }) => void;
     hotkey?: string | AXHotKeyAction;
 }
 export interface AXButtonItem extends AXClickItemBase {
     type?: AXButtonType;
+    loading?: boolean;
     autofocus?: boolean;
 }
 export interface AXMenuItem extends AXClickItemBase {

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

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

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

@@ -1,5 +1,5 @@
-import { EventEmitter } from '@angular/core';
 import { AXClickEvent, MXButtonBaseComponent } from '@acorex/components/common';
+import { AfterViewInit, EventEmitter } from '@angular/core';
 import { AXButtonType } from './button-item.class';
 import * as i0 from "@angular/core";
 /**
@@ -7,7 +7,7 @@ import * as i0 from "@angular/core";
  *
  * @category Components
  */
-export declare class AXButtonComponent extends MXButtonBaseComponent {
+export declare class AXButtonComponent extends MXButtonBaseComponent implements AfterViewInit {
     /**
      *  Fires each time the user clicks the button.
      *  @event
@@ -15,9 +15,11 @@ export declare class AXButtonComponent extends MXButtonBaseComponent {
     onClick: EventEmitter<AXClickEvent>;
     type: AXButtonType;
     ngAfterViewInit(): void;
-    protected emitOnClickEvent(e: MouseEvent): void;
+    private getButton;
+    _handleClick(e: MouseEvent): void;
     click(): void;
     private get __hostClass();
+    focus(): 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"; }, never, ["ax-prefix, ax-loading, ax-icon", "ax-content", "ax-suffix", "ax-dropdown-panel"], false, never>;
 }

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

@@ -12,6 +12,7 @@ export declare class AXCalendarComponent extends AXCalendarComponent_base {
     private _setDisplayRange;
     protected _today: AXDateTime;
     private _viewStartDate;
+    private _navUserInteraction;
     private _footPrint;
     protected views: AXCalendarView[];
     protected _dayNames: string[];
@@ -41,6 +42,6 @@ export declare class AXCalendarComponent extends AXCalendarComponent_base {
     protected isHoliday(date: AXDateTime): boolean;
     protected isWeekend(date: AXDateTime): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXCalendarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXCalendarComponent, "ax-calendar", never, { "rtl": { "alias": "rtl"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "depth": { "alias": "depth"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "holidayDates": { "alias": "holidayDates"; "required": false; }; "type": { "alias": "type"; "required": false; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; }; "cellClass": { "alias": "cellClass"; "required": false; }; "showNavigation": { "alias": "showNavigation"; "required": false; }; "count": { "alias": "count"; "required": false; }; }, { "onOptionChanged": "onOptionChanged"; "valueChange": "valueChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "depthChange": "depthChange"; "typeChange": "typeChange"; "activeViewChange": "activeViewChange"; "disabledDatesChange": "disabledDatesChange"; "holidayDatesChange": "holidayDatesChange"; "onNavigate": "onNavigate"; "onSlotClick": "onSlotClick"; "countChange": "countChange"; }, never, ["ax-header", "ax-footer"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXCalendarComponent, "ax-calendar", never, { "rtl": { "alias": "rtl"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "depth": { "alias": "depth"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "holidayDates": { "alias": "holidayDates"; "required": false; }; "type": { "alias": "type"; "required": false; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; }; "cellClass": { "alias": "cellClass"; "required": false; }; "showNavigation": { "alias": "showNavigation"; "required": false; }; "count": { "alias": "count"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, { "onOptionChanged": "onOptionChanged"; "valueChange": "valueChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "depthChange": "depthChange"; "typeChange": "typeChange"; "activeViewChange": "activeViewChange"; "disabledDatesChange": "disabledDatesChange"; "holidayDatesChange": "holidayDatesChange"; "onNavigate": "onNavigate"; "onSlotClick": "onSlotClick"; "countChange": "countChange"; }, never, ["ax-header", "ax-footer"], false, never>;
 }
 export {};

package/check-box/README.md

@@ -0,0 +1,3 @@
+# @acorex/components/check-box
+
+Secondary entry point of `@acorex/components`. It can be used by importing from `@acorex/components/check-box`.

package/check-box/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/check-box.component';
+export * from './lib/check-box.module';

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

@@ -0,0 +1,14 @@
+import { MXValueComponent } from '@acorex/components/common';
+import * as i0 from "@angular/core";
+export declare class AXCheckBoxComponent extends MXValueComponent<boolean | null> {
+    private _labels;
+    indeterminate: boolean;
+    protected _stateIndeterminate: boolean;
+    protected internalGetValue(value: any): boolean | null;
+    internalSetValue(value: boolean | null): boolean;
+    ngAfterViewChecked(): void;
+    private _handleClick;
+    protected _handleModelChange(value: boolean | null): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXCheckBoxComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXCheckBoxComponent, "ax-check-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "valueChange": "valueChange"; "onValueChanged": "onValueChanged"; }, ["_labels"], ["ax-label", "ax-form-hint", "ax-validation-rule"], false, never>;
+}

package/{checkbox/lib/checkbox.module.d.ts → check-box/lib/check-box.module.d.ts}

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./checkbox.component";
+import * as i1 from "./check-box.component";
 import * as i2 from "@angular/common";
 import * as i3 from "@angular/forms";
 import * as i4 from "@acorex/components/decorators";

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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