@acorex/components 7.2.6 → 7.2.8

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

@@ -34,6 +34,7 @@ export declare class AXAlertComponent extends AXAlertComponent_base {
     set visible(v: boolean);
     protected ngOnInit(): void;
     protected ngAfterViewInit(): void;
+    private _setLayout;
     protected _handleOnOptionChanged(e: AXOptionChangedEvent): 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/breadcrumbs/lib/breadcrumbs-item.component.d.ts

@@ -1,70 +1,7 @@
-import { AXBaseComponent } from '@acorex/components/mixin';
-import { ChangeDetectorRef, ElementRef } from '@angular/core';
 import { AXBreadCrumbsComponent } from './breadcrumbs.component';
+import { MXBaseComponent } from '@acorex/components/common';
 import * as i0 from "@angular/core";
-export declare const AXBaseItemBreadCrumbMixin: (abstract new (...args: any[]) => {
-    "__#5091@#disabled": boolean;
-    disabled: boolean;
-    "__#5091@#tabIndex": number;
-    tabIndex: number;
-    onFocus: import("@angular/core").EventEmitter<import("dist/libs/components/common").AXFocusEvent>;
-    _emitOnFocusEvent(e: FocusEvent): void;
-    onBlur: import("@angular/core").EventEmitter<import("dist/libs/components/common").AXFocusEvent>;
-    _emitOnBlurEvent(e: FocusEvent): void;
-    focus(): void;
-    hasFocus(): boolean;
-    id: string;
-    "__#5088@#rtl": boolean;
-    rtl: boolean;
-    "__#5088@#elementRef": ElementRef<any>;
-    _cdr: ChangeDetectorRef;
-    _isInited: boolean;
-    _isRendered: boolean;
-    ngOnInit(): void;
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
-    _getHostElement<T = HTMLElement>(): T;
-    _getInnerElement<T_1 = HTMLElement>(): T_1;
-    _onInternalInit(): void;
-    _onInternalViewInit(): void;
-    _onInternalDestroy(): void;
-    onInit(): void;
-    onViewInit(): void;
-    onDestroy(): void;
-    _applyRtl(): void;
-    _onOptionChanging(option: import("@acorex/components/mixin").AXComponentOptionChanging): any;
-    _onOptionChanged(option: import("@acorex/components/mixin").AXComponentOptionChanged): void;
-    _setOption(option: import("@acorex/components/mixin").AXComponentSetOption): void;
-}) & (new (...args: any[]) => {
-    onClick: import("@angular/core").EventEmitter<import("dist/libs/components/common").AXClickEvent>;
-    _emitOnClickEvent(e: MouseEvent): void;
-    id: string;
-    "__#5088@#rtl": boolean;
-    rtl: boolean;
-    "__#5088@#elementRef": ElementRef<any>;
-    /**
-     *  @ignore
-     */
-    _cdr: ChangeDetectorRef;
-    _isInited: boolean;
-    _isRendered: boolean;
-    ngOnInit(): void;
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
-    _getHostElement<T_2 = HTMLElement>(): T_2;
-    _getInnerElement<T_1_1 = HTMLElement>(): T_1_1;
-    _onInternalInit(): void;
-    _onInternalViewInit(): void;
-    _onInternalDestroy(): void;
-    onInit(): void;
-    onViewInit(): void;
-    onDestroy(): void;
-    _applyRtl(): void;
-    _onOptionChanging(option: import("@acorex/components/mixin").AXComponentOptionChanging): any;
-    _onOptionChanged(option: import("@acorex/components/mixin").AXComponentOptionChanged): void;
-    _setOption(option: import("@acorex/components/mixin").AXComponentSetOption): void;
-}) & typeof AXBaseComponent;
-export declare class AXBreadCrumbsItemComponent extends AXBaseItemBreadCrumbMixin {
+export declare class AXBreadCrumbsItemComponent extends MXBaseComponent {
     _parent: AXBreadCrumbsComponent;
     text: string;
     href: string;
@@ -72,9 +9,8 @@ export declare class AXBreadCrumbsItemComponent extends AXBaseItemBreadCrumbMixi
     /**
      *  @ignore
      */
-    constructor(_elementRef: ElementRef, _cdr: ChangeDetectorRef, _parent: AXBreadCrumbsComponent);
-    private __hostClick;
+    constructor(_parent: AXBreadCrumbsComponent);
     private get __hostClass();
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXBreadCrumbsItemComponent, [null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXBreadCrumbsItemComponent, "ax-breadcrumbs-item", never, { "text": { "alias": "text"; "required": false; }; "href": { "alias": "href"; "required": false; }; "active": { "alias": "active"; "required": false; }; }, {}, never, ["ax-prefix, ax-loading, ax-icon", "ax-suffix, ax-loading, ax-icon"], false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXBreadCrumbsItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXBreadCrumbsItemComponent, "ax-breadcrumbs-item", never, { "text": { "alias": "text"; "required": false; }; "href": { "alias": "href"; "required": false; }; "active": { "alias": "active"; "required": false; }; }, {}, never, ["ax-prefix", "ax-suffix"], false, never>;
 }

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[]) => {
-    "__#5091@#disabled": boolean;
+    "__#5174@#disabled": boolean;
     disabled: boolean;
-    "__#5091@#tabIndex": number;
+    "__#5174@#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;
-    "__#5088@#rtl": boolean;
+    "__#5171@#rtl": boolean;
     rtl: boolean;
-    "__#5088@#elementRef": ElementRef<any>;
+    "__#5171@#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;
-    "__#5088@#rtl": boolean;
+    "__#5171@#rtl": boolean;
     rtl: boolean;
-    "__#5088@#elementRef": ElementRef<any>;
+    "__#5171@#elementRef": ElementRef<any>;
     _cdr: ChangeDetectorRef;
     _isInited: boolean;
     _isRendered: boolean;

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[]) => {
-    "__#5091@#disabled": boolean;
+    "__#5174@#disabled": boolean;
     disabled: boolean;
-    "__#5091@#tabIndex": number;
+    "__#5174@#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;
-    "__#5088@#rtl": boolean;
+    "__#5171@#rtl": boolean;
     rtl: boolean;
-    "__#5088@#elementRef": ElementRef<any>;
+    "__#5171@#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;
-    "__#5088@#rtl": boolean;
+    "__#5171@#rtl": boolean;
     rtl: boolean;
-    "__#5088@#elementRef": ElementRef<any>;
+    "__#5171@#elementRef": ElementRef<any>;
     _cdr: ChangeDetectorRef;
     _isInited: boolean;
     _isRendered: boolean;

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[];

package/checkbox/lib/checkbox.component.d.ts

@@ -1,12 +1,18 @@
-import { AXBaseValueComponentMixin } from '@acorex/components/mixin';
-import { ChangeDetectorRef, ElementRef } from '@angular/core';
+import { MXInteractiveComponent, MXValueComponent } from '@acorex/components/common';
 import * as i0 from "@angular/core";
-export declare class AXCheckBoxComponent extends AXBaseValueComponentMixin {
-    private _cdr;
-    constructor(elementRef: ElementRef, _cdr: ChangeDetectorRef);
-    onInit(): void;
-    _setValue(value: any): any;
-    _handleOnClickEvent(e: MouseEvent): boolean;
+declare const AXCheckBoxComponent_base: import("polytype").Polytype.ClusteredConstructor<[{
+    new (): MXValueComponent<boolean>;
+    ɵfac: unknown;
+    ɵprov: import("@angular/core").ɵɵInjectableDeclaration<MXValueComponent<any>>;
+}, typeof MXInteractiveComponent]>;
+export declare class AXCheckBoxComponent extends AXCheckBoxComponent_base {
+    indeterminate: boolean;
+    protected _stateIndeterminate: boolean;
+    protected internalGetValue(value: any): boolean | null;
+    internalSetValue(value: boolean | null): boolean;
+    protected _handleOnClickEvent(e: MouseEvent): boolean;
+    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; }; "allowNull": { "alias": "allowNull"; "required": false; }; "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "valueChange": "valueChange"; "onValueChanged": "onValueChanged"; }, never, ["*", "ax-form-hint", "ax-validation-rule"], false, 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; }; "allowNull": { "alias": "allowNull"; "required": false; }; "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "valueChange": "valueChange"; "onValueChanged": "onValueChanged"; }, never, ["*", "ax-form-hint", "ax-validation-rule"], false, never>;
 }
+export {};

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

@@ -1,71 +1,12 @@
-import { AXStyleColorType } from '@acorex/components/common';
-import { AXBaseComponent } from '@acorex/components/mixin';
+import { MXBaseComponent, MXColorComponent } from '@acorex/components/common';
 import * as i0 from "@angular/core";
-export declare const AXBaseChipsMixin: (abstract new (...args: any[]) => {
-    "__#5091@#disabled": boolean;
-    disabled: boolean;
-    "__#5091@#tabIndex": number;
-    tabIndex: number;
-    onFocus: import("@angular/core").EventEmitter<import("@acorex/components/common").AXFocusEvent>;
-    _emitOnFocusEvent(e: FocusEvent): void;
-    onBlur: import("@angular/core").EventEmitter<import("@acorex/components/common").AXFocusEvent>;
-    _emitOnBlurEvent(e: FocusEvent): void;
-    focus(): void;
-    hasFocus(): boolean;
-    id: string;
-    "__#5088@#rtl": boolean;
-    rtl: boolean;
-    "__#5088@#elementRef": import("@angular/core").ElementRef<any>;
-    _cdr: import("@angular/core").ChangeDetectorRef;
-    _isInited: boolean;
-    _isRendered: boolean;
-    ngOnInit(): void;
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
-    _getHostElement<T = HTMLElement>(): T;
-    _getInnerElement<T_1 = HTMLElement>(): T_1;
-    _onInternalInit(): void;
-    _onInternalViewInit(): void;
-    _onInternalDestroy(): void;
-    onInit(): void;
-    onViewInit(): void;
-    onDestroy(): void;
-    _applyRtl(): void;
-    _onOptionChanging(option: import("@acorex/components/mixin").AXComponentOptionChanging): any;
-    _onOptionChanged(option: import("@acorex/components/mixin").AXComponentOptionChanged): void;
-    _setOption(option: import("@acorex/components/mixin").AXComponentSetOption): void;
-}) & (new (...args: any[]) => {
-    onClick: import("@angular/core").EventEmitter<import("@acorex/components/common").AXClickEvent>;
-    _emitOnClickEvent(e: MouseEvent): void;
-    id: string;
-    "__#5088@#rtl": boolean;
-    rtl: boolean;
-    "__#5088@#elementRef": import("@angular/core").ElementRef<any>;
-    _cdr: import("@angular/core").ChangeDetectorRef;
-    _isInited: boolean;
-    _isRendered: boolean;
-    ngOnInit(): void;
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
-    _getHostElement<T_2 = HTMLElement>(): T_2;
-    _getInnerElement<T_1_1 = HTMLElement>(): T_1_1;
-    _onInternalInit(): void;
-    _onInternalViewInit(): void;
-    _onInternalDestroy(): void;
-    onInit(): void;
-    onViewInit(): void;
-    onDestroy(): void;
-    _applyRtl(): void;
-    _onOptionChanging(option: import("@acorex/components/mixin").AXComponentOptionChanging): any;
-    _onOptionChanged(option: import("@acorex/components/mixin").AXComponentOptionChanged): void;
-    _setOption(option: import("@acorex/components/mixin").AXComponentSetOption): void;
-}) & typeof AXBaseComponent;
-export declare class AXChipsComponent extends AXBaseChipsMixin {
+declare const AXChipsComponent_base: import("polytype").Polytype.ClusteredConstructor<[typeof MXBaseComponent, typeof MXColorComponent]>;
+export declare class AXChipsComponent extends AXChipsComponent_base {
     look: 'default' | 'outline';
-    color: AXStyleColorType;
     text: string;
     constructor();
     private get __hostClass();
     static ɵfac: i0.ɵɵFactoryDeclaration<AXChipsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXChipsComponent, "ax-chips", never, { "tabIndex": { "alias": "tabIndex"; "required": false; }; "look": { "alias": "look"; "required": false; }; "color": { "alias": "color"; "required": false; }; "text": { "alias": "text"; "required": false; }; }, {}, never, ["ax-prefix", "ax-suffix"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXChipsComponent, "ax-chips", never, { "tabIndex": { "alias": "tabIndex"; "required": false; }; "color": { "alias": "color"; "required": false; }; "look": { "alias": "look"; "required": false; }; "text": { "alias": "text"; "required": false; }; }, { "colorChange": "colorChange"; }, never, ["ax-prefix", "ax-suffix"], false, never>;
 }
+export {};

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

@@ -1,15 +1,27 @@
-import { AXBaseComponent } from '@acorex/components/mixin';
-import { ChangeDetectorRef, ElementRef } from '@angular/core';
+import { EventEmitter } from '@angular/core';
+import { MXBaseComponent } from '@acorex/components/common';
 import * as i0 from "@angular/core";
-export declare class AXCollapseGroupComponent extends AXBaseComponent {
-    private cdr;
-    accordion: boolean;
-    nonCollapsedIndex: number;
+export declare class AXCollapseGroupComponent extends MXBaseComponent {
+    accordionChange: EventEmitter<boolean>;
+    private _accordion?;
+    /**
+     *  Enables accordion behavior, allowing only one collapsible item to be expanded at a time
+     */
+    get accordion(): boolean;
+    set accordion(value: boolean);
+    activeIndexChange: EventEmitter<number>;
+    private _activeIndex;
+    /**
+    *  Index of the currently active item within the group
+    */
+    get activeIndex(): number;
+    set activeIndex(value: number);
     private _items;
     private _subs;
-    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef);
-    onViewInit(): void;
-    onDestroy(): void;
+    ngAfterViewInit(): void;
+    private applyAccordion;
+    private removeAccordion;
+    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXCollapseGroupComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXCollapseGroupComponent, "ax-collapse-group", never, { "accordion": { "alias": "accordion"; "required": false; }; "nonCollapsedIndex": { "alias": "nonCollapsedIndex"; "required": false; }; }, {}, ["_items"], ["ax-collapse"], false, 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>;
 }

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

@@ -1,17 +1,23 @@
-import { AXBaseComponent } from '@acorex/components/mixin';
-import { ChangeDetectorRef, ElementRef, EventEmitter, TemplateRef } from '@angular/core';
+import { EventEmitter, TemplateRef } from '@angular/core';
+import { AXClickEvent, MXInteractiveComponent } from '@acorex/components/common';
 import * as i0 from "@angular/core";
-export declare class AXCollapseComponent extends AXBaseComponent {
-    private cdr;
-    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef);
+export declare class AXCollapseComponent extends MXInteractiveComponent {
+    /**
+    *  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
+    */
     get isCollapsed(): boolean;
     set isCollapsed(v: boolean);
     caption: string;
     icon: string;
     headerTemplate: TemplateRef<any>;
-    handleHeaderClick(): void;
+    handleHeaderClick(e: MouseEvent): void;
     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; }; }, { "isCollapsedChange": "isCollapsedChange"; }, ["headerTemplate"], ["*"], false, 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>;
 }

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

@@ -1,22 +1,23 @@
-import { ChangeDetectorRef, ElementRef } from '@angular/core';
-import { AXValueChangedEvent } from '@acorex/components/common';
-import { AXColorComponent } from './color-palette.class';
-import { AXBaseComponent } from '@acorex/components/mixin';
+import { AXUnsubscriber } from '@acorex/core/utils';
+import { AXValueChangedEvent, MXBaseComponent } from '@acorex/components/common';
+import { AXColorPaletteParentComponent } from './color-palette.class';
 import { AXMaskOptions } from '@acorex/components/textbox';
 import * as i0 from "@angular/core";
-export declare class AXColorPaletteInputComponent extends AXBaseComponent {
-    _parent: AXColorComponent;
-    _isTouched: boolean;
+export declare class AXColorPaletteInputComponent extends MXBaseComponent {
+    _parent: AXColorPaletteParentComponent;
+    private _unsubscriber;
     isValid: boolean;
     _rgba: any;
     _hex: string;
     protected _colorMode: "hex" | "rgba";
     protected _hexMaskOptions: AXMaskOptions;
-    constructor(_elementRef: ElementRef, _cdr: ChangeDetectorRef, _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, [null, null, { 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,11 +1,10 @@
-import { ElementRef } from '@angular/core';
-import { ChangeDetectorRef } from '@angular/core';
-import { AXValueChangedEvent } from '@acorex/components/common';
-import { AXColorComponent } from './color-palette.class';
-import { AXBaseComponent } from '@acorex/components/mixin';
+import { AXUnsubscriber } from '@acorex/core/utils';
+import { AXValueChangedEvent, MXBaseComponent } from '@acorex/components/common';
+import { AXColorPaletteParentComponent } from './color-palette.class';
 import * as i0 from "@angular/core";
-export declare class AXColorPalettePickerComponent extends AXBaseComponent {
-    _parent: AXColorComponent;
+export declare class AXColorPalettePickerComponent extends MXBaseComponent {
+    _parent: AXColorPaletteParentComponent;
+    private _unsubscriber;
     _rgba: {
         r: number;
         g: number;
@@ -14,19 +13,22 @@ export declare class AXColorPalettePickerComponent extends AXBaseComponent {
     };
     protected _gradient: number;
     protected _bgColor: string;
-    private _gradientColors;
+    private readonly _gradientColors;
+    private readonly _gradients;
+    private readonly _colors;
     protected dragPosition: {
         x: number;
         y: number;
     };
-    constructor(_elementRef: ElementRef, _cdr: ChangeDetectorRef, _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, [null, null, { 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 { AXBaseComponent } from '@acorex/components/mixin';
-import { ChangeDetectorRef, ElementRef, NgZone } from '@angular/core';
-import { AXColorComponent } from './color-palette.class';
+import { MXBaseComponent } from '@acorex/components/common';
+import { AXUnsubscriber } from '@acorex/core/utils';
+import { NgZone } from '@angular/core';
+import { AXColorPaletteParentComponent } from './color-palette.class';
 import * as i0 from "@angular/core";
-export declare class AXColorPalettePreviewComponent extends AXBaseComponent {
-    _parent: AXColorComponent;
+export declare class AXColorPalettePreviewComponent extends MXBaseComponent {
+    _parent: AXColorPaletteParentComponent;
     private _zone;
-    constructor(_elementRef: ElementRef, _cdr: ChangeDetectorRef, _parent: AXColorComponent, _zone: NgZone);
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXColorPalettePreviewComponent, [null, null, { 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,18 +1,20 @@
-import { AXBaseComponent } from '@acorex/components/mixin';
-import { ChangeDetectorRef, ElementRef } from '@angular/core';
-import { AXColorComponent } from './color-palette.class';
+import { 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 AXColorPaletteSwatchesComponent extends AXBaseComponent {
-    _parent: AXColorComponent;
-    _selected: string;
+export declare class AXColorPaletteSwatchesComponent extends MXBaseComponent {
+    _parent: AXColorPaletteParentComponent;
+    private _unsubscriber;
+    protected _selected: string;
     colors: {
         code: string;
     }[];
-    constructor(_elementRef: ElementRef, _cdr: ChangeDetectorRef, _parent: AXColorComponent);
-    onInit(): void;
-    _handleClick(e: MouseEvent, color: any): void;
+    constructor(_parent: AXColorPaletteParentComponent, _unsubscriber: AXUnsubscriber);
+    private applyParent;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    protected _handleClick(e: MouseEvent, color: any): void;
     private _format;
-    private _defaultPalette;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXColorPaletteSwatchesComponent, [null, null, { 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,16 +1,10 @@
-import { AXBaseValueComponentMixin } from '@acorex/components/mixin';
-import { ChangeDetectorRef, ElementRef, QueryList } from '@angular/core';
-import { Subject } from 'rxjs';
+import { MXValueComponent } from '@acorex/components/common';
+import { QueryList } from '@angular/core';
 import { AXColorPaletteChildComponent } from './color-palette.class';
 import * as i0 from "@angular/core";
-export declare class AXColorPalleteComponent extends AXBaseValueComponentMixin {
-    _onInternalColorChanged$: Subject<any>;
+export declare class AXColorPalleteComponent extends MXValueComponent<string> {
     _children: QueryList<AXColorPaletteChildComponent>;
-    _onValueChanged(oldValue: string, newValue: string): void;
-    ngAfterContentInit(): void;
-    onViewInit(): void;
-    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef);
     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; }; "allowNull": { "alias": "allowNull"; "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>;
 }

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/textbox";
+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>;
 }