@acorex/components 7.2.6 → 7.2.7

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;
+    "__#5095@#disabled": boolean;
     disabled: boolean;
-    "__#5091@#tabIndex": number;
+    "__#5095@#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;
+    "__#5092@#rtl": boolean;
     rtl: boolean;
-    "__#5088@#elementRef": ElementRef<any>;
+    "__#5092@#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;
+    "__#5092@#rtl": boolean;
     rtl: boolean;
-    "__#5088@#elementRef": ElementRef<any>;
+    "__#5092@#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;
+    "__#5095@#disabled": boolean;
     disabled: boolean;
-    "__#5091@#tabIndex": number;
+    "__#5095@#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;
+    "__#5092@#rtl": boolean;
     rtl: boolean;
-    "__#5088@#elementRef": ElementRef<any>;
+    "__#5092@#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;
+    "__#5092@#rtl": boolean;
     rtl: boolean;
-    "__#5088@#elementRef": ElementRef<any>;
+    "__#5092@#elementRef": ElementRef<any>;
     _cdr: ChangeDetectorRef;
     _isInited: boolean;
     _isRendered: boolean;

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

@@ -1,12 +1,17 @@
-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 ngOnInit(): void;
+    setValue(value: any): boolean;
+    protected handleOnClickEvent(e: MouseEvent): boolean;
     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 { MXColorComponent, MXInteractiveComponent } 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 MXInteractiveComponent, 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,10 +1,8 @@
-import { ChangeDetectorRef, ElementRef } from '@angular/core';
-import { AXValueChangedEvent } from '@acorex/components/common';
+import { AXValueChangedEvent, MXBaseComponent } from '@acorex/components/common';
 import { AXColorComponent } from './color-palette.class';
-import { AXBaseComponent } from '@acorex/components/mixin';
 import { AXMaskOptions } from '@acorex/components/textbox';
 import * as i0 from "@angular/core";
-export declare class AXColorPaletteInputComponent extends AXBaseComponent {
+export declare class AXColorPaletteInputComponent extends MXBaseComponent {
     _parent: AXColorComponent;
     _isTouched: boolean;
     isValid: boolean;
@@ -12,11 +10,11 @@ export declare class AXColorPaletteInputComponent extends AXBaseComponent {
     _hex: string;
     protected _colorMode: "hex" | "rgba";
     protected _hexMaskOptions: AXMaskOptions;
-    constructor(_elementRef: ElementRef, _cdr: ChangeDetectorRef, _parent: AXColorComponent);
+    constructor(_parent: AXColorComponent);
     _handleChangeInputMode(): void;
     _handleRGBAValueChanged(e: AXValueChangedEvent<number>): void;
     _handleHEXAValueChanged(e: AXValueChangedEvent<string>): void;
     private checkValid;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXColorPaletteInputComponent, [null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXColorPaletteInputComponent, [{ optional: true; }]>;
     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,10 +1,7 @@
-import { ElementRef } from '@angular/core';
-import { ChangeDetectorRef } from '@angular/core';
-import { AXValueChangedEvent } from '@acorex/components/common';
+import { AXValueChangedEvent, MXBaseComponent } from '@acorex/components/common';
 import { AXColorComponent } from './color-palette.class';
-import { AXBaseComponent } from '@acorex/components/mixin';
 import * as i0 from "@angular/core";
-export declare class AXColorPalettePickerComponent extends AXBaseComponent {
+export declare class AXColorPalettePickerComponent extends MXBaseComponent {
     _parent: AXColorComponent;
     _rgba: {
         r: number;
@@ -19,7 +16,7 @@ export declare class AXColorPalettePickerComponent extends AXBaseComponent {
         x: number;
         y: number;
     };
-    constructor(_elementRef: ElementRef, _cdr: ChangeDetectorRef, _parent: AXColorComponent);
+    constructor(_parent: AXColorComponent);
     private setHSV;
     protected _handleAlphaChanged(e: AXValueChangedEvent<number>): void;
     protected _handleGradientChanged(e: AXValueChangedEvent<number>): void;
@@ -27,6 +24,6 @@ export declare class AXColorPalettePickerComponent extends AXBaseComponent {
     protected _handleDrag(): void;
     private setColorByXY;
     private setPointerByPercent;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXColorPalettePickerComponent, [null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXColorPalettePickerComponent, [{ optional: true; }]>;
     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,11 @@
-import { AXBaseComponent } from '@acorex/components/mixin';
-import { ChangeDetectorRef, ElementRef, NgZone } from '@angular/core';
+import { MXBaseComponent } from '@acorex/components/common';
+import { NgZone } from '@angular/core';
 import { AXColorComponent } from './color-palette.class';
 import * as i0 from "@angular/core";
-export declare class AXColorPalettePreviewComponent extends AXBaseComponent {
+export declare class AXColorPalettePreviewComponent extends MXBaseComponent {
     _parent: AXColorComponent;
     private _zone;
-    constructor(_elementRef: ElementRef, _cdr: ChangeDetectorRef, _parent: AXColorComponent, _zone: NgZone);
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXColorPalettePreviewComponent, [null, null, { optional: true; }, null]>;
+    constructor(_parent: AXColorComponent, _zone: NgZone);
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXColorPalettePreviewComponent, [{ optional: true; }, null]>;
     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,17 @@
-import { AXBaseComponent } from '@acorex/components/mixin';
-import { ChangeDetectorRef, ElementRef } from '@angular/core';
+import { MXBaseComponent } from '@acorex/components/common';
 import { AXColorComponent } from './color-palette.class';
 import * as i0 from "@angular/core";
-export declare class AXColorPaletteSwatchesComponent extends AXBaseComponent {
+export declare class AXColorPaletteSwatchesComponent extends MXBaseComponent {
     _parent: AXColorComponent;
-    _selected: string;
+    protected _selected: string;
     colors: {
         code: string;
     }[];
-    constructor(_elementRef: ElementRef, _cdr: ChangeDetectorRef, _parent: AXColorComponent);
-    onInit(): void;
+    constructor(_parent: AXColorComponent);
+    ngOnInit(): void;
     _handleClick(e: MouseEvent, color: any): void;
     private _format;
     private _defaultPalette;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXColorPaletteSwatchesComponent, [null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXColorPaletteSwatchesComponent, [{ optional: true; }]>;
     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

@@ -10,7 +10,7 @@ export interface AXColorChangedEvent {
 }
 export declare abstract class AXColorComponent {
     abstract _onInternalColorChanged$: Subject<AXColorChangedEvent>;
-    abstract _setUserInteraction(): any;
+    abstract setUserInteraction(): any;
     abstract readonly: boolean;
     abstract disabled: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXColorComponent, never>;

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

@@ -1,16 +1,22 @@
-import { AXBaseValueComponentMixin } from '@acorex/components/mixin';
-import { ChangeDetectorRef, ElementRef, QueryList } from '@angular/core';
+import { MXValueComponent, MXInteractiveComponent } 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";
-export declare class AXColorPalleteComponent extends AXBaseValueComponentMixin {
+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>;
     _children: QueryList<AXColorPaletteChildComponent>;
-    _onValueChanged(oldValue: string, newValue: string): void;
     ngAfterContentInit(): void;
-    onViewInit(): void;
-    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef);
+    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; }; "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"; }, ["_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-picker/lib/color-picker.component.d.ts

@@ -6,9 +6,9 @@ import { AXPopoverComponent } from '@acorex/components/popover';
 import { AXBaseComponent } from '@acorex/components/mixin';
 import * as i0 from "@angular/core";
 export declare const AXBaseColorPickerMixin: (abstract new (...args: any[]) => {
-    "__#5091@#disabled": boolean;
+    "__#5095@#disabled": boolean;
     disabled: boolean;
-    "__#5091@#tabIndex": number;
+    "__#5095@#tabIndex": number;
     tabIndex: number;
     onFocus: import("@angular/core").EventEmitter<import("@acorex/components/common").AXFocusEvent>;
     _emitOnFocusEvent(e: FocusEvent): void;
@@ -17,9 +17,9 @@ export declare const AXBaseColorPickerMixin: (abstract new (...args: any[]) => {
     focus(): void;
     hasFocus(): boolean;
     id: string;
-    "__#5088@#rtl": boolean;
+    "__#5092@#rtl": boolean;
     rtl: boolean;
-    "__#5088@#elementRef": ElementRef<any>;
+    "__#5092@#elementRef": ElementRef<any>;
     _cdr: ChangeDetectorRef;
     _isInited: boolean;
     _isRendered: boolean;
@@ -58,9 +58,9 @@ export declare const AXBaseColorPickerMixin: (abstract new (...args: any[]) => {
     open(): void;
     readonly isOpen: boolean;
     id: string;
-    "__#5088@#rtl": boolean;
+    "__#5092@#rtl": boolean;
     rtl: boolean;
-    "__#5088@#elementRef": ElementRef<any>;
+    "__#5092@#elementRef": ElementRef<any>;
     _cdr: ChangeDetectorRef;
     _isInited: boolean;
     _isRendered: boolean;
@@ -81,17 +81,17 @@ export declare const AXBaseColorPickerMixin: (abstract new (...args: any[]) => {
     onValueChanged: import("@angular/core").EventEmitter<AXValueChangedEvent<any>>;
     valueChange: import("@angular/core").EventEmitter<any>;
     stateChange: import("@angular/core").EventEmitter<import("@acorex/components/mixin").AXComponentState>;
-    "__#5092@#readonly": boolean;
+    "__#5096@#readonly": boolean;
     readonly: boolean;
-    "__#5092@#allowNull": boolean;
+    "__#5096@#allowNull": boolean;
     allowNull: boolean;
-    "__#5092@#name": string;
+    "__#5096@#name": string;
     name: string;
-    "__#5092@#isUserInteraction": boolean;
+    "__#5096@#isUserInteraction": boolean;
     readonly isUserInteraction: boolean;
-    "__#5092@#value": any;
+    "__#5096@#value": any;
     value: any;
-    "__#5092@#state": import("@acorex/components/mixin").AXComponentState;
+    "__#5096@#state": import("@acorex/components/mixin").AXComponentState;
     state: import("@acorex/components/mixin").AXComponentState;
     _emitOnValueChangedEvent(oldValue?: any, newValue?: any): void;
     _internalSetValue(value: any): any;
@@ -99,6 +99,7 @@ export declare const AXBaseColorPickerMixin: (abstract new (...args: any[]) => {
     _setValue(value: any): any;
     _getValue(value: any): any;
     _setUserInteraction(): void;
+    setUserInteraction(): void;
     _onValueChanged(oldValue: any, newValue: any): void;
     _onInternalInit(): void;
     _onInternalViewInit(): void;
@@ -108,12 +109,14 @@ export declare const AXBaseColorPickerMixin: (abstract new (...args: any[]) => {
     validate(): Promise<any>;
     _setState(state: import("@acorex/components/mixin").AXComponentState, ...args: any[]): void;
     id: string;
-    "__#5088@#rtl": boolean;
+    "__#5092@#rtl": boolean;
     rtl: boolean;
-    "__#5088@#elementRef": ElementRef<any>;
+    "__#5092@#elementRef": ElementRef<any>;
     _cdr: ChangeDetectorRef;
     _isInited: boolean;
-    _isRendered: boolean;
+    _isRendered: boolean; /**
+     *  @ignore
+     */
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
@@ -138,9 +141,9 @@ export declare const AXBaseColorPickerMixin: (abstract new (...args: any[]) => {
     _emitOnKeyupEvent(e: KeyboardEvent): void;
     _emitOnKeypressEvent(e: KeyboardEvent): void;
     id: string;
-    "__#5088@#rtl": boolean;
+    "__#5092@#rtl": boolean;
     rtl: boolean;
-    "__#5088@#elementRef": ElementRef<any>;
+    "__#5092@#elementRef": ElementRef<any>;
     _cdr: ChangeDetectorRef;
     _isInited: boolean;
     _isRendered: boolean;
@@ -191,5 +194,5 @@ export declare class AXColorPickerComponent extends AXBaseColorPickerMixin {
     _handlePopupOnClosed(e: any): void;
     _handleKeydown(e: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXColorPickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXColorPickerComponent, "ax-color-picker", never, { "isOpen": { "alias": "isOpen"; "required": false; }; "fitParent": { "alias": "fitParent"; "required": false; }; "dropdownWidth": { "alias": "dropdownWidth"; "required": false; }; "position": { "alias": "position"; "required": false; }; "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; }; "placeholder": { "alias": "placeholder"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "type": { "alias": "type"; "required": false; }; "autoComplete": { "alias": "autoComplete"; "required": false; }; }, { "onOpened": "onOpened"; "onClosed": "onClosed"; "onBlur": "onBlur"; "onFocus": "onFocus"; "valueChange": "valueChange"; "onValueChanged": "onValueChanged"; }, never, ["ax-prefix", "ax-validation-rule", "ax-suffix"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXColorPickerComponent, "ax-color-picker", never, { "isOpen": { "alias": "isOpen"; "required": false; }; "fitParent": { "alias": "fitParent"; "required": false; }; "dropdownWidth": { "alias": "dropdownWidth"; "required": false; }; "position": { "alias": "position"; "required": false; }; "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; }; "checked": { "alias": "checked"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "type": { "alias": "type"; "required": false; }; "autoComplete": { "alias": "autoComplete"; "required": false; }; }, { "onOpened": "onOpened"; "onClosed": "onClosed"; "onBlur": "onBlur"; "onFocus": "onFocus"; "valueChange": "valueChange"; "onValueChanged": "onValueChanged"; }, never, ["ax-prefix", "ax-validation-rule", "ax-suffix"], false, never>;
 }

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

@@ -1,15 +1,15 @@
 import { ChangeDetectorRef, EventEmitter, ViewContainerRef } from '@angular/core';
 import { AXOptionChangedEvent } from '../classes/events.class';
 import * as i0 from "@angular/core";
-export type MXComponentOptionChanging = {
+export type MXComponentOptionChanging<T = any> = {
     name: string;
-    value?: any;
+    value?: T;
 };
-export type MXComponentSetOption = {
+export type MXComponentSetOption<T> = {
     name: string;
-    value?: any;
-    afterCallback?: (oldValue?: any, newValue?: any) => void;
-    beforeCallback?: (oldValue?: any, newValue?: any) => void;
+    value?: T;
+    afterCallback?: (oldValue?: T, newValue?: T) => void;
+    beforeCallback?: (oldValue?: T, newValue?: T) => void;
 };
 export type AXComponentState = 'clear' | 'success' | 'error';
 export declare abstract class MXBaseComponent {
@@ -23,7 +23,7 @@ export declare abstract class MXBaseComponent {
     protected onOptionChanging(option: MXComponentOptionChanging): any;
     protected init(): void;
     protected onOptionChanged: EventEmitter<AXOptionChangedEvent>;
-    protected setOption(option: MXComponentSetOption): void;
+    protected setOption<T = any>(option: MXComponentSetOption<T>): void;
     private _rtl;
     get rtl(): boolean;
     set rtl(value: boolean);