@acorex/components 5.3.4 → 5.4.0

package/fesm2015/acorex-components.mjs

@@ -22,7 +22,7 @@ import * as i5 from 'angular-imask';
 import { IMaskDirective, IMaskModule } from 'angular-imask';
 import * as i1$3 from 'ngx-mask';
 import { NgxMaskModule } from 'ngx-mask';
-import * as i10 from '@angular/cdk/a11y';
+import * as i7 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import * as i3 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
@@ -1214,6 +1214,13 @@ AXSearchableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", ve
 AXSearchableComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXSearchableComponent });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXSearchableComponent, decorators: [{
             type: Injectable
+        }] });
+class AXValuableComponent {
+}
+AXValuableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXValuableComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+AXValuableComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXValuableComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXValuableComponent, decorators: [{
+            type: Injectable
         }] });
 
 /**
@@ -4210,361 +4217,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                 }]
         }] });
 
-class AXColorPalleteComponent extends AXBaseValueComponentMixin {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-    }
-    ngOnInit() { }
+class AXColorComponent {
 }
-AXColorPalleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPalleteComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXColorPalleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXColorPalleteComponent, selector: "ax-color-palette", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, usesInheritance: true, ngImport: i0, template: "<ng-content select='ax-header'></ng-content>\r\n<ng-content select='ax-color-palette-preview'></ng-content>\r\n<ng-content select='ax-color-palette-swatches'></ng-content>\r\n\r\n<!-- <ax-color-palette-preview></ax-color-palette-preview>\r\n<ax-color-palette-swatches></ax-color-palette-swatches> -->\r\n<ng-content select=\"ax-color-palette-favorite\"></ng-content>\r\n<ng-content select=\"ax-color-palette-input\"></ng-content>\r\n<!-- <ax-color-palette-input></ax-color-palette-input> -->\r\n<ng-content select='ax-footer'></ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPalleteComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-color-palette', changeDetection: ChangeDetectionStrategy.OnPush, inputs: [...INTERACTIVE_INPUTS, ...VALUE_INPUTS], outputs: [...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT], encapsulation: ViewEncapsulation.None, template: "<ng-content select='ax-header'></ng-content>\r\n<ng-content select='ax-color-palette-preview'></ng-content>\r\n<ng-content select='ax-color-palette-swatches'></ng-content>\r\n\r\n<!-- <ax-color-palette-preview></ax-color-palette-preview>\r\n<ax-color-palette-swatches></ax-color-palette-swatches> -->\r\n<ng-content select=\"ax-color-palette-favorite\"></ng-content>\r\n<ng-content select=\"ax-color-palette-input\"></ng-content>\r\n<!-- <ax-color-palette-input></ax-color-palette-input> -->\r\n<ng-content select='ax-footer'></ng-content>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
+AXColorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+AXColorComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorComponent, decorators: [{
+            type: Injectable
+        }] });
 
 class AXColorPalettePreviewComponent extends AXBaseComponent {
     constructor(_elementRef, _cdr, _parent) {
         super(_elementRef, _cdr);
         this._parent = _parent;
-        _parent === null || _parent === void 0 ? void 0 : _parent.onValueChanged.subscribe(e => {
-            this._getHostElement().style.backgroundColor = this._hex = e.value;
-            this._getHostElement().style.color = !(AXColorUtil.contrastToWhite(this._hex) > 2.0) ? '#000' : '#fff';
+        _parent === null || _parent === void 0 ? void 0 : _parent._onInternalColorChanged$.subscribe(e => {
+            this._colorCode = AXColorUtil.to(e.color, e.mode);
+            this._getHostElement().style.backgroundColor = e.color;
+            const color = AXColorUtil.toHex(e.color);
+            const ratio = AXColorUtil.contrastToWhite(color);
+            this._getHostElement().style.color = !(ratio > 2.0) ? '#000' : '#fff';
         });
     }
     ngOnInit() { }
 }
-AXColorPalettePreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPalettePreviewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXColorPalleteComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AXColorPalettePreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview", usesInheritance: true, ngImport: i0, template: `{{_hex}}`, isInline: true, encapsulation: i0.ViewEncapsulation.None });
+AXColorPalettePreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPalettePreviewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXColorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AXColorPalettePreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview", usesInheritance: true, ngImport: i0, template: `{{_colorCode}}`, isInline: true, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPalettePreviewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-color-palette-preview',
-                    template: `{{_hex}}`,
+                    template: `{{_colorCode}}`,
                     encapsulation: ViewEncapsulation.None
                 }]
         }], ctorParameters: function () {
-        return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXColorPalleteComponent, decorators: [{
+        return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXColorComponent, decorators: [{
                         type: Optional
                     }, {
                         type: Inject,
-                        args: [AXColorPalleteComponent]
+                        args: [AXColorComponent]
                     }] }];
     } });
 
-/**
- * The Textbox is a component which detects user interaction and triggers a corresponding event
- *
- * @category Components
- */
-class AXTextBoxComponent extends AXBaseTextBoxMixin {
-    /**
-    *  @ignore
-    */
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-    }
-}
-AXTextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXTextBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXTextBoxComponent, selector: "ax-text-box", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", autoComplete: "autoComplete" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { classAttribute: "ax-editor-container" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" [attr.name]=\"name\" [attr.autocomplete]=\"autoComplete\" [attr.type]=\"type\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\">\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-input-mask\">\r\n</ng-content>", directives: [{ type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXTextBoxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-text-box', inputs: [...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS], outputs: [...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ax-editor-container' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" [attr.name]=\"name\" [attr.autocomplete]=\"autoComplete\" [attr.type]=\"type\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\">\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-input-mask\">\r\n</ng-content>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
-
-/**
- * The NumberBox is a component which detects user interaction and triggers a corresponding event
- *
- * @category Components
- */
-class AXNumberBoxComponent extends AXBaseTextBoxMixin {
-    /**
-    *  @ignore
-    */
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-        this.cdr = cdr;
-        this._padDecimalZeros = false;
-        /**
-       *  Specifies the value that is used to increment or decrement the **Integer** part of number
-       */
-        this.step = 1;
-        this._decimals = 0;
-        /**
-        *  Specifies the value that is used to increment or decrement the **Deciaml** part of number
-        */
-        this.decimalStep = 'auto';
-        /**
-        *  Specifies whether the Up and Down spin buttons will be rendered or not
-        */
-        this.showSpinButtons = true;
-        this._minValue = Number.MIN_SAFE_INTEGER;
-        this._maxValue = Number.MAX_SAFE_INTEGER;
-    }
-    /**
-    *  A character value that specifies the separator character.
-    */
-    get thousandsSeparator() {
-        return this._thousandsSeparator;
-    }
-    set thousandsSeparator(v) {
-        this._setOption({
-            name: "thousandsSeparator",
-            value: v !== null && v !== void 0 ? v : '',
-        });
-    }
-    /**
-    *  A character value that specifies the separator character.
-    */
-    get padDecimalZeros() {
-        return this._padDecimalZeros;
-    }
-    set padDecimalZeros(v) {
-        this._setOption({
-            name: "padDecimalZeros",
-            value: v,
-        });
-    }
-    /**
-    *  Specifies the number of decimals that the user can enter
-    */
-    get decimals() {
-        return this._decimals;
-    }
-    set decimals(v) {
-        this._setOption({
-            name: "decimals",
-            value: v !== null && v !== void 0 ? v : 0,
-        });
-    }
-    /**
-    *  Specifies the smallest value that is valid
-    */
-    get minValue() {
-        return this._minValue;
-    }
-    set minValue(v) {
-        this._setOption({
-            name: "minValue",
-            value: v != null ? Number(v) : Number.MIN_SAFE_INTEGER,
-        });
-    }
-    /**
-    *  Specifies the greatest value that is valid
-    */
-    get maxValue() {
-        return this._maxValue;
-    }
-    set maxValue(v) {
-        this._setOption({
-            name: "maxValue",
-            value: v != null ? Number(v) : Number.MAX_SAFE_INTEGER,
-        });
-    }
-    onViewInit() {
-        super.onViewInit();
-        this._updateMask();
-    }
-    _onOptionChanged(option) {
-        super._onOptionChanged(option);
-        this._updateMask();
-    }
-    _updateMask() {
-        var _a, _b, _c, _d;
-        if (!this._maskObj) {
-            this._maskObj = IMask.createMask({
-                mask: Number,
-                min: this.minValue,
-                max: this.maxValue,
-                thousandsSeparator: this.thousandsSeparator || '',
-                scale: this.decimals,
-                radix: '.',
-                padFractionalZeros: this.decimals > 0 && this.padDecimalZeros
-            });
-        }
-        else {
-            this._maskObj.updateOptions({
-                min: this.minValue,
-                max: this.maxValue,
-                thousandsSeparator: this.thousandsSeparator || '',
-                scale: this.decimals,
-                radix: '.',
-                padFractionalZeros: this.decimals > 0 && this.padDecimalZeros
-            });
-        }
-        (_b = (_a = this._maskDirective) === null || _a === void 0 ? void 0 : _a.maskRef) === null || _b === void 0 ? void 0 : _b.updateValue();
-        (_d = (_c = this._maskDirective) === null || _c === void 0 ? void 0 : _c.maskRef) === null || _d === void 0 ? void 0 : _d.updateControl();
-    }
-    _handleOnKeydownEvent(e) {
-        const ignore = () => {
-            e.preventDefault();
-            e.stopPropagation();
-        };
-        const input = e.target;
-        const valStr = input.value;
-        const decimalPointIndex = valStr.indexOf('.');
-        const _cursorPos = input.selectionStart;
-        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-            if (decimalPointIndex > 0 && _cursorPos > decimalPointIndex && this.decimals > 0) {
-                e.key === 'ArrowDown' ? this.decimalStepDown() : this.decimalStepUp();
-            }
-            else {
-                e.key === 'ArrowDown' ? this.stepDown() : this.stepUp();
-            }
-            ignore();
-            setTimeout(() => {
-                input.setSelectionRange(_cursorPos, _cursorPos);
-            }, 5);
-        }
-        super._emitOnKeydownEvent(e);
-    }
-    _handleUpDownClick(e, v) {
-        v == 1 ? this.stepUp() : this.stepDown();
-    }
-    _onValueChanging(value) {
-        const v = _.toNumber(value);
-        if (v < this.minValue)
-            return this.minValue;
-        if (v > this.maxValue)
-            return this.maxValue;
-        return v;
-    }
-    stepUp() {
-        this.value += _.toNumber(this.step);
-    }
-    stepDown() {
-        this.value -= _.toNumber(this.step);
-    }
-    decimalStepUp() {
-        this.value += _.toNumber(this.decimalStep == 'auto' ? (1 / Math.pow(10, this.decimals)) : this.decimalStep);
-    }
-    decimalStepDown() {
-        this.value -= _.toNumber(this.decimalStep == 'auto' ? (1 / Math.pow(10, this.decimals)) : this.decimalStep);
-    }
-}
-AXNumberBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXNumberBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXNumberBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", type: "type", autoComplete: "autoComplete", name: "name", checked: "checked", thousandsSeparator: "thousandsSeparator", padDecimalZeros: "padDecimalZeros", step: "step", decimals: "decimals", decimalStep: "decimalStep", showSpinButtons: "showSpinButtons", minValue: "minValue", maxValue: "maxValue" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "ax-editor-container" }, viewQueries: [{ propertyName: "_maskDirective", first: true, predicate: IMaskDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" type=\"text\"  \r\n    [attr.placeholder]=\"placeholder\" \r\n    [imask]=\"_maskObj\" \r\n    [unmask]=\"'typed'\"\r\n    [attr.min]=\"minValue\"\r\n    [attr.max]=\"maxValue\" \r\n    [class.ax-state-disabled]=\"disabled\" \r\n    [class.ax-state-readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" \r\n    [readonly]=\"readonly\" \r\n    [tabindex]=\"tabIndex\" \r\n    [(ngModel)]=\"value\"\r\n    (focus)=\"_emitOnFocusEvent($event)\" \r\n    (blur)=\"_emitOnFocusEvent($event)\" \r\n    (keydown)=\"_handleOnKeydownEvent($event)\"\r\n    [attr.autocomplete]=\"autoComplete\">\r\n\r\n<div class=\"ax-number-box-arrows\" *ngIf=\"showSpinButtons && !(disabled || readonly)\">\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,1)\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-ic-arrow-fill ax-rotate-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,-1)\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-ic-arrow-fill ax--rotate-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n</div>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXNumberBoxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-number-box', inputs: [
-                        'disabled',
-                        'readonly',
-                        'tabIndex',
-                        'size',
-                        'value',
-                        ...TEXTBOX_INPUTS,
-                    ], outputs: [
-                        'valueChange',
-                        'onValueChanged',
-                        'onBlur',
-                        'onFocus',
-                        ...TEXTBOX_OUTPUT,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-editor-container' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" type=\"text\"  \r\n    [attr.placeholder]=\"placeholder\" \r\n    [imask]=\"_maskObj\" \r\n    [unmask]=\"'typed'\"\r\n    [attr.min]=\"minValue\"\r\n    [attr.max]=\"maxValue\" \r\n    [class.ax-state-disabled]=\"disabled\" \r\n    [class.ax-state-readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" \r\n    [readonly]=\"readonly\" \r\n    [tabindex]=\"tabIndex\" \r\n    [(ngModel)]=\"value\"\r\n    (focus)=\"_emitOnFocusEvent($event)\" \r\n    (blur)=\"_emitOnFocusEvent($event)\" \r\n    (keydown)=\"_handleOnKeydownEvent($event)\"\r\n    [attr.autocomplete]=\"autoComplete\">\r\n\r\n<div class=\"ax-number-box-arrows\" *ngIf=\"showSpinButtons && !(disabled || readonly)\">\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,1)\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-ic-arrow-fill ax-rotate-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,-1)\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-ic-arrow-fill ax--rotate-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n</div>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { thousandsSeparator: [{
-                type: Input
-            }], padDecimalZeros: [{
-                type: Input
-            }], step: [{
-                type: Input
-            }], decimals: [{
-                type: Input
-            }], decimalStep: [{
-                type: Input
-            }], showSpinButtons: [{
-                type: Input
-            }], minValue: [{
-                type: Input
-            }], maxValue: [{
-                type: Input
-            }], _maskDirective: [{
-                type: ViewChild,
-                args: [IMaskDirective]
-            }] } });
-
-class AXColorPaletteInputComponent extends AXBaseComponent {
-    constructor(_elementRef, _cdr, _parent) {
-        super(_elementRef, _cdr);
-        this._parent = _parent;
-        this._rgba = {
-            r: 255,
-            g: 255,
-            b: 255,
-            a: 0
-        };
-        this._hex = "#000000";
-        this.inputMode = 'rgba';
-        _parent === null || _parent === void 0 ? void 0 : _parent.onValueChanged.subscribe(e => {
-            if (this._hex != e.value) {
-                this._hex = e.value;
-                Object.assign(this._rgba, AXColorUtil.hex2Rgb(e.value));
-            }
-        });
-    }
-    _handleChangeInputMode(e) {
-        // switch (this.inputMode) {
-        //     case 'rgba':
-        //         this.inputMode = 'hsla'
-        //         break;
-        //     case 'hsla':
-        //         this.inputMode = 'hwba'
-        //         break;
-        //     case 'hwba':
-        //         this.inputMode = 'hex'
-        //         break;
-        //     case 'hex':
-        //         this.inputMode = 'rgba'
-        //         break;
-        // }
-        this.inputMode = this.inputMode == 'rgba' ? 'hex' : 'rgba';
-    }
-    _handleRGBAValueChanged(e) {
-        if (this._parent) {
-            this._parent.value = AXColorUtil.rgba2Hex(this._rgba);
-        }
-    }
-    _handleHEXAValueChanged(e) {
-        debugger;
-        const color = AXColorUtil.hex2Rgb(e.value);
-        if (this._parent && color) {
-            Object.assign(this._rgba, color);
-            this._parent.value = e.value;
-        }
-        else {
-            this._hex = this._parent.value;
-            this._cdr.markForCheck();
-        }
-    }
-}
-AXColorPaletteInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPaletteInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXColorPalleteComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AXColorPaletteInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input", usesInheritance: true, ngImport: i0, template: "<div class=\"palette-input-container\" [ngSwitch]=\"inputMode\">\r\n    <div class=\"palette-inputs\">\r\n        <ng-container *ngSwitchCase=\"'hex'\">\r\n            <div>\r\n                <ax-text-box class=\"ax-w-full\" [(value)]=\"_hex\"  [debounceTime]=\"300\" (onValueChanged)=\"_handleHEXAValueChanged($event)\">\r\n                </ax-text-box>\r\n                <label>HEX</label>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'rgba'\">\r\n            <div>\r\n                <ax-number-box [minValue]=\"0\" [maxValue]=\"255\" [(value)]=\"_rgba.r\" [showSpinButtons]=\"false\"\r\n                    (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n                </ax-number-box>\r\n                <label>R</label>\r\n            </div>\r\n            <div>\r\n                <ax-number-box [minValue]=\"0\" [maxValue]=\"255\" [(value)]=\"_rgba.g\" [showSpinButtons]=\"false\"\r\n                    (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n                </ax-number-box>\r\n                <label>G</label>\r\n            </div>\r\n            <div>\r\n                <ax-number-box [minValue]=\"0\" [maxValue]=\"255\" [(value)]=\"_rgba.b\" [showSpinButtons]=\"false\"\r\n                    (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n                </ax-number-box>\r\n                <label>B</label>\r\n            </div>\r\n            <div>\r\n                <ax-number-box [minValue]=\"0\" [maxValue]=\"1\" [(value)]=\"_rgba.a\" [decimals]=\"2\" [step]=\"0.1\"\r\n                    [showSpinButtons]=\"false\" (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n                </ax-number-box>\r\n                <label>A</label>\r\n            </div>\r\n        </ng-container>\r\n        <!-- <ng-container *ngSwitchCase=\"'hsla'\">\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>H</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>S</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>L</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>A</label>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'hwba'\">\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>H</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>W</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>B</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>A</label>\r\n            </div>\r\n        </ng-container> -->\r\n    </div>\r\n    <ax-button color=\"light\" class=\"ax-min-w-[32px]\" (onClick)=\"_handleChangeInputMode($event)\">\r\n        <ax-icon class=\"ax-ic ax-ic-unfold\"></ax-icon>\r\n    </ax-button>\r\n</div>", components: [{ type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "allowNull", "value", "debounceTime", "name", "checked", "placeholder", "maxLength", "type", "autoComplete"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "size", "value", "placeholder", "maxLength", "allowNull", "debounceTime", "type", "autoComplete", "name", "checked", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue"], outputs: ["valueChange", "onValueChanged", "onBlur", "onFocus"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPaletteInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-color-palette-input', encapsulation: ViewEncapsulation.None, template: "<div class=\"palette-input-container\" [ngSwitch]=\"inputMode\">\r\n    <div class=\"palette-inputs\">\r\n        <ng-container *ngSwitchCase=\"'hex'\">\r\n            <div>\r\n                <ax-text-box class=\"ax-w-full\" [(value)]=\"_hex\"  [debounceTime]=\"300\" (onValueChanged)=\"_handleHEXAValueChanged($event)\">\r\n                </ax-text-box>\r\n                <label>HEX</label>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'rgba'\">\r\n            <div>\r\n                <ax-number-box [minValue]=\"0\" [maxValue]=\"255\" [(value)]=\"_rgba.r\" [showSpinButtons]=\"false\"\r\n                    (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n                </ax-number-box>\r\n                <label>R</label>\r\n            </div>\r\n            <div>\r\n                <ax-number-box [minValue]=\"0\" [maxValue]=\"255\" [(value)]=\"_rgba.g\" [showSpinButtons]=\"false\"\r\n                    (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n                </ax-number-box>\r\n                <label>G</label>\r\n            </div>\r\n            <div>\r\n                <ax-number-box [minValue]=\"0\" [maxValue]=\"255\" [(value)]=\"_rgba.b\" [showSpinButtons]=\"false\"\r\n                    (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n                </ax-number-box>\r\n                <label>B</label>\r\n            </div>\r\n            <div>\r\n                <ax-number-box [minValue]=\"0\" [maxValue]=\"1\" [(value)]=\"_rgba.a\" [decimals]=\"2\" [step]=\"0.1\"\r\n                    [showSpinButtons]=\"false\" (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n                </ax-number-box>\r\n                <label>A</label>\r\n            </div>\r\n        </ng-container>\r\n        <!-- <ng-container *ngSwitchCase=\"'hsla'\">\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>H</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>S</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>L</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>A</label>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'hwba'\">\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>H</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>W</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>B</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>A</label>\r\n            </div>\r\n        </ng-container> -->\r\n    </div>\r\n    <ax-button color=\"light\" class=\"ax-min-w-[32px]\" (onClick)=\"_handleChangeInputMode($event)\">\r\n        <ax-icon class=\"ax-ic ax-ic-unfold\"></ax-icon>\r\n    </ax-button>\r\n</div>" }]
-        }], ctorParameters: function () {
-        return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXColorPalleteComponent, decorators: [{
-                        type: Optional
-                    }, {
-                        type: Inject,
-                        args: [AXColorPalleteComponent]
-                    }] }];
-    } });
-
-class AXColorPalettePickerComponent {
-    constructor() { }
-    ngOnInit() { }
-}
-AXColorPalettePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPalettePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXColorPalettePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker", ngImport: i0, template: ``, isInline: true, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPalettePickerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-color-palette-picker',
-                    template: ``,
-                    encapsulation: ViewEncapsulation.None
-                }]
-        }], ctorParameters: function () { return []; } });
-
-class AXColorPaletteSwatchesComponent extends AXBaseComponent {
+class AXColorPaletteSwatchesComponent extends AXBaseComponent {
     constructor(_elementRef, _cdr, _parent) {
         super(_elementRef, _cdr);
         this._parent = _parent;
@@ -4782,19 +4475,19 @@ class AXColorPaletteSwatchesComponent extends AXBaseComponent {
             { code: '#F9A825' },
             { code: '#F57F17' },
         ];
-        _parent === null || _parent === void 0 ? void 0 : _parent.onValueChanged.subscribe(e => {
-            this._selected = e.value;
+        _parent === null || _parent === void 0 ? void 0 : _parent._onInternalColorChanged$.subscribe(e => {
+            this._selected = AXColorUtil.toHex(e.color);
         });
-        debugger;
         if (this._getHostElement().tagName.toLocaleLowerCase() != 'ax-color-palette-favorite') {
             this.colors = this._defaultPalette;
         }
     }
     _handleClick(e, color) {
-        this._parent.value = this._selected = color.code;
+        this._selected = color.code;
+        this._parent._onInternalColorChanged$.next({ color: color.code, mode: this._parent.mode });
     }
 }
-AXColorPaletteSwatchesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPaletteSwatchesComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXColorPalleteComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AXColorPaletteSwatchesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPaletteSwatchesComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXColorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 AXColorPaletteSwatchesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: { colors: "colors" }, usesInheritance: true, ngImport: i0, template: `<div class="palette-items">  
     <div *ngFor="let color of colors" [style.background-color]="color.code" [attr.title]="color.code" [class.ax-state-selected]="color.code==_selected" (click)="_handleClick($event,color)" >        
     </div>
@@ -4810,16 +4503,353 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                     encapsulation: ViewEncapsulation.None
                 }]
         }], ctorParameters: function () {
-        return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXColorPalleteComponent, decorators: [{
+        return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXColorComponent, decorators: [{
                         type: Optional
                     }, {
                         type: Inject,
-                        args: [AXColorPalleteComponent]
+                        args: [AXColorComponent]
                     }] }];
     }, propDecorators: { colors: [{
                 type: Input
             }] } });
 
+/**
+ * The Textbox is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+class AXTextBoxComponent extends AXBaseTextBoxMixin {
+    /**
+    *  @ignore
+    */
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+    }
+}
+AXTextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXTextBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXTextBoxComponent, selector: "ax-text-box", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", autoComplete: "autoComplete" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { classAttribute: "ax-editor-container" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" [attr.name]=\"name\" [attr.autocomplete]=\"autoComplete\" [attr.type]=\"type\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\">\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-input-mask\">\r\n</ng-content>", directives: [{ type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXTextBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-text-box', inputs: [...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS], outputs: [...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ax-editor-container' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" [attr.name]=\"name\" [attr.autocomplete]=\"autoComplete\" [attr.type]=\"type\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\">\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-input-mask\">\r\n</ng-content>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
+
+/**
+ * The NumberBox is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+class AXNumberBoxComponent extends AXBaseTextBoxMixin {
+    /**
+    *  @ignore
+    */
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        this.cdr = cdr;
+        this._padDecimalZeros = false;
+        /**
+       *  Specifies the value that is used to increment or decrement the **Integer** part of number
+       */
+        this.step = 1;
+        this._decimals = 0;
+        /**
+        *  Specifies the value that is used to increment or decrement the **Deciaml** part of number
+        */
+        this.decimalStep = 'auto';
+        /**
+        *  Specifies whether the Up and Down spin buttons will be rendered or not
+        */
+        this.showSpinButtons = true;
+        this._minValue = Number.MIN_SAFE_INTEGER;
+        this._maxValue = Number.MAX_SAFE_INTEGER;
+    }
+    /**
+    *  A character value that specifies the separator character.
+    */
+    get thousandsSeparator() {
+        return this._thousandsSeparator;
+    }
+    set thousandsSeparator(v) {
+        this._setOption({
+            name: "thousandsSeparator",
+            value: v !== null && v !== void 0 ? v : '',
+        });
+    }
+    /**
+    *  A character value that specifies the separator character.
+    */
+    get padDecimalZeros() {
+        return this._padDecimalZeros;
+    }
+    set padDecimalZeros(v) {
+        this._setOption({
+            name: "padDecimalZeros",
+            value: v,
+        });
+    }
+    /**
+    *  Specifies the number of decimals that the user can enter
+    */
+    get decimals() {
+        return this._decimals;
+    }
+    set decimals(v) {
+        this._setOption({
+            name: "decimals",
+            value: v !== null && v !== void 0 ? v : 0,
+        });
+    }
+    /**
+    *  Specifies the smallest value that is valid
+    */
+    get minValue() {
+        return this._minValue;
+    }
+    set minValue(v) {
+        this._setOption({
+            name: "minValue",
+            value: v != null ? Number(v) : Number.MIN_SAFE_INTEGER,
+        });
+    }
+    /**
+    *  Specifies the greatest value that is valid
+    */
+    get maxValue() {
+        return this._maxValue;
+    }
+    set maxValue(v) {
+        this._setOption({
+            name: "maxValue",
+            value: v != null ? Number(v) : Number.MAX_SAFE_INTEGER,
+        });
+    }
+    onViewInit() {
+        super.onViewInit();
+        this._updateMask();
+    }
+    _onOptionChanged(option) {
+        super._onOptionChanged(option);
+        this._updateMask();
+    }
+    _updateMask() {
+        var _a, _b, _c, _d;
+        if (!this._maskObj) {
+            this._maskObj = IMask.createMask({
+                mask: Number,
+                min: this.minValue,
+                max: this.maxValue,
+                thousandsSeparator: this.thousandsSeparator || '',
+                scale: this.decimals,
+                radix: '.',
+                padFractionalZeros: this.decimals > 0 && this.padDecimalZeros
+            });
+        }
+        else {
+            this._maskObj.updateOptions({
+                min: this.minValue,
+                max: this.maxValue,
+                thousandsSeparator: this.thousandsSeparator || '',
+                scale: this.decimals,
+                radix: '.',
+                padFractionalZeros: this.decimals > 0 && this.padDecimalZeros
+            });
+        }
+        (_b = (_a = this._maskDirective) === null || _a === void 0 ? void 0 : _a.maskRef) === null || _b === void 0 ? void 0 : _b.updateValue();
+        (_d = (_c = this._maskDirective) === null || _c === void 0 ? void 0 : _c.maskRef) === null || _d === void 0 ? void 0 : _d.updateControl();
+    }
+    _handleOnKeydownEvent(e) {
+        const ignore = () => {
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        const input = e.target;
+        const valStr = input.value;
+        const decimalPointIndex = valStr.indexOf('.');
+        const _cursorPos = input.selectionStart;
+        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+            if (decimalPointIndex > 0 && _cursorPos > decimalPointIndex && this.decimals > 0) {
+                e.key === 'ArrowDown' ? this.decimalStepDown() : this.decimalStepUp();
+            }
+            else {
+                e.key === 'ArrowDown' ? this.stepDown() : this.stepUp();
+            }
+            ignore();
+            setTimeout(() => {
+                input.setSelectionRange(_cursorPos, _cursorPos);
+            }, 5);
+        }
+        super._emitOnKeydownEvent(e);
+    }
+    _handleUpDownClick(e, v) {
+        v == 1 ? this.stepUp() : this.stepDown();
+    }
+    _onValueChanging(value) {
+        const v = _.toNumber(value);
+        if (v < this.minValue)
+            return this.minValue;
+        if (v > this.maxValue)
+            return this.maxValue;
+        return v;
+    }
+    stepUp() {
+        this.value += _.toNumber(this.step);
+    }
+    stepDown() {
+        this.value -= _.toNumber(this.step);
+    }
+    decimalStepUp() {
+        this.value += _.toNumber(this.decimalStep == 'auto' ? (1 / Math.pow(10, this.decimals)) : this.decimalStep);
+    }
+    decimalStepDown() {
+        this.value -= _.toNumber(this.decimalStep == 'auto' ? (1 / Math.pow(10, this.decimals)) : this.decimalStep);
+    }
+}
+AXNumberBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXNumberBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXNumberBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", type: "type", autoComplete: "autoComplete", name: "name", checked: "checked", thousandsSeparator: "thousandsSeparator", padDecimalZeros: "padDecimalZeros", step: "step", decimals: "decimals", decimalStep: "decimalStep", showSpinButtons: "showSpinButtons", minValue: "minValue", maxValue: "maxValue" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "ax-editor-container" }, viewQueries: [{ propertyName: "_maskDirective", first: true, predicate: IMaskDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" type=\"text\"  \r\n    [attr.placeholder]=\"placeholder\" \r\n    [imask]=\"_maskObj\" \r\n    [unmask]=\"'typed'\"\r\n    [attr.min]=\"minValue\"\r\n    [attr.max]=\"maxValue\" \r\n    [class.ax-state-disabled]=\"disabled\" \r\n    [class.ax-state-readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" \r\n    [readonly]=\"readonly\" \r\n    [tabindex]=\"tabIndex\" \r\n    [(ngModel)]=\"value\"\r\n    (focus)=\"_emitOnFocusEvent($event)\" \r\n    (blur)=\"_emitOnFocusEvent($event)\" \r\n    (keydown)=\"_handleOnKeydownEvent($event)\"\r\n    [attr.autocomplete]=\"autoComplete\">\r\n\r\n<div class=\"ax-number-box-arrows\" *ngIf=\"showSpinButtons && !(disabled || readonly)\">\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,1)\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-ic-arrow-fill ax-rotate-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,-1)\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-ic-arrow-fill ax--rotate-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n</div>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXNumberBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-number-box', inputs: [
+                        'disabled',
+                        'readonly',
+                        'tabIndex',
+                        'size',
+                        'value',
+                        ...TEXTBOX_INPUTS,
+                    ], outputs: [
+                        'valueChange',
+                        'onValueChanged',
+                        'onBlur',
+                        'onFocus',
+                        ...TEXTBOX_OUTPUT,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-editor-container' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" type=\"text\"  \r\n    [attr.placeholder]=\"placeholder\" \r\n    [imask]=\"_maskObj\" \r\n    [unmask]=\"'typed'\"\r\n    [attr.min]=\"minValue\"\r\n    [attr.max]=\"maxValue\" \r\n    [class.ax-state-disabled]=\"disabled\" \r\n    [class.ax-state-readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" \r\n    [readonly]=\"readonly\" \r\n    [tabindex]=\"tabIndex\" \r\n    [(ngModel)]=\"value\"\r\n    (focus)=\"_emitOnFocusEvent($event)\" \r\n    (blur)=\"_emitOnFocusEvent($event)\" \r\n    (keydown)=\"_handleOnKeydownEvent($event)\"\r\n    [attr.autocomplete]=\"autoComplete\">\r\n\r\n<div class=\"ax-number-box-arrows\" *ngIf=\"showSpinButtons && !(disabled || readonly)\">\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,1)\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-ic-arrow-fill ax-rotate-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,-1)\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-ic-arrow-fill ax--rotate-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n</div>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { thousandsSeparator: [{
+                type: Input
+            }], padDecimalZeros: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], decimals: [{
+                type: Input
+            }], decimalStep: [{
+                type: Input
+            }], showSpinButtons: [{
+                type: Input
+            }], minValue: [{
+                type: Input
+            }], maxValue: [{
+                type: Input
+            }], _maskDirective: [{
+                type: ViewChild,
+                args: [IMaskDirective]
+            }] } });
+
+class AXColorPaletteInputComponent extends AXBaseComponent {
+    constructor(_elementRef, _cdr, _parent) {
+        super(_elementRef, _cdr);
+        this._parent = _parent;
+        this._rgba = {
+            r: 255,
+            g: 255,
+            b: 255,
+            a: 0
+        };
+        this._hex = "#000000";
+        _parent === null || _parent === void 0 ? void 0 : _parent._onInternalColorChanged$.subscribe(e => {
+            if (this._hex != AXColorUtil.toHex(e.color)) {
+                this._hex = AXColorUtil.toHex(e.color);
+                Object.assign(this._rgba, AXColorUtil.toRGB(e.color));
+            }
+        });
+    }
+    _handleChangeInputMode(e) {
+        // switch (this.inputMode) {
+        //     case 'rgba':
+        //         this.inputMode = 'hsla'
+        //         break;
+        //     case 'hsla':
+        //         this.inputMode = 'hwba'
+        //         break;
+        //     case 'hwba':
+        //         this.inputMode = 'hex'
+        //         break;
+        //     case 'hex':
+        //         this.inputMode = 'rgba'
+        //         break;
+        // }
+        this._parent.mode = (this._parent.mode == 'rgba' ? 'hex' : 'rgba');
+    }
+    _handleRGBAValueChanged(e) {
+        const { r, g, b, a } = this._rgba;
+        const _color = `rgba(${r},${g},${b},${a})`;
+        this._parent._onInternalColorChanged$.next({ color: AXColorUtil.toRGB(_color), mode: 'rgba' });
+    }
+    _handleHEXAValueChanged(e) {
+        this._parent._onInternalColorChanged$.next({ color: AXColorUtil.toHex(e.value), mode: 'hex' });
+    }
+}
+AXColorPaletteInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPaletteInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXColorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AXColorPaletteInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input", usesInheritance: true, ngImport: i0, template: "<div class=\"palette-input-container\" [ngSwitch]=\"_parent.mode\">\r\n    <div class=\"palette-inputs\">\r\n        <ng-container *ngSwitchCase=\"'hex'\">\r\n            <div>\r\n                <ax-text-box class=\"ax-w-full\" [(value)]=\"_hex\"  [debounceTime]=\"300\" (onValueChanged)=\"_handleHEXAValueChanged($event)\">\r\n                </ax-text-box>\r\n                <label>HEX</label>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'rgba'\">\r\n            <div>\r\n                <ax-number-box [minValue]=\"0\" [maxValue]=\"255\" [(value)]=\"_rgba.r\" [showSpinButtons]=\"false\"\r\n                    (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n                </ax-number-box>\r\n                <label>R</label>\r\n            </div>\r\n            <div>\r\n                <ax-number-box [minValue]=\"0\" [maxValue]=\"255\" [(value)]=\"_rgba.g\" [showSpinButtons]=\"false\"\r\n                    (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n                </ax-number-box>\r\n                <label>G</label>\r\n            </div>\r\n            <div>\r\n                <ax-number-box [minValue]=\"0\" [maxValue]=\"255\" [(value)]=\"_rgba.b\" [showSpinButtons]=\"false\"\r\n                    (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n                </ax-number-box>\r\n                <label>B</label>\r\n            </div>\r\n            <div>\r\n                <ax-number-box [minValue]=\"0\" [maxValue]=\"1\" [(value)]=\"_rgba.a\" [decimals]=\"2\" [step]=\"0.1\"\r\n                    [showSpinButtons]=\"false\" (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n                </ax-number-box>\r\n                <label>A</label>\r\n            </div>\r\n        </ng-container>\r\n        <!-- <ng-container *ngSwitchCase=\"'hsla'\">\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>H</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>S</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>L</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>A</label>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'hwba'\">\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>H</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>W</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>B</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>A</label>\r\n            </div>\r\n        </ng-container> -->\r\n    </div>\r\n    <ax-button color=\"light\" class=\"ax-w-base\" (onClick)=\"_handleChangeInputMode($event)\">\r\n        <ax-icon class=\"ax-ic ax-ic-unfold\"></ax-icon>\r\n    </ax-button>\r\n</div>", components: [{ type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "allowNull", "value", "debounceTime", "name", "checked", "placeholder", "maxLength", "type", "autoComplete"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "size", "value", "placeholder", "maxLength", "allowNull", "debounceTime", "type", "autoComplete", "name", "checked", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue"], outputs: ["valueChange", "onValueChanged", "onBlur", "onFocus"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPaletteInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-color-palette-input', encapsulation: ViewEncapsulation.None, template: "<div class=\"palette-input-container\" [ngSwitch]=\"_parent.mode\">\r\n    <div class=\"palette-inputs\">\r\n        <ng-container *ngSwitchCase=\"'hex'\">\r\n            <div>\r\n                <ax-text-box class=\"ax-w-full\" [(value)]=\"_hex\"  [debounceTime]=\"300\" (onValueChanged)=\"_handleHEXAValueChanged($event)\">\r\n                </ax-text-box>\r\n                <label>HEX</label>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'rgba'\">\r\n            <div>\r\n                <ax-number-box [minValue]=\"0\" [maxValue]=\"255\" [(value)]=\"_rgba.r\" [showSpinButtons]=\"false\"\r\n                    (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n                </ax-number-box>\r\n                <label>R</label>\r\n            </div>\r\n            <div>\r\n                <ax-number-box [minValue]=\"0\" [maxValue]=\"255\" [(value)]=\"_rgba.g\" [showSpinButtons]=\"false\"\r\n                    (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n                </ax-number-box>\r\n                <label>G</label>\r\n            </div>\r\n            <div>\r\n                <ax-number-box [minValue]=\"0\" [maxValue]=\"255\" [(value)]=\"_rgba.b\" [showSpinButtons]=\"false\"\r\n                    (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n                </ax-number-box>\r\n                <label>B</label>\r\n            </div>\r\n            <div>\r\n                <ax-number-box [minValue]=\"0\" [maxValue]=\"1\" [(value)]=\"_rgba.a\" [decimals]=\"2\" [step]=\"0.1\"\r\n                    [showSpinButtons]=\"false\" (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n                </ax-number-box>\r\n                <label>A</label>\r\n            </div>\r\n        </ng-container>\r\n        <!-- <ng-container *ngSwitchCase=\"'hsla'\">\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>H</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>S</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>L</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>A</label>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'hwba'\">\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>H</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>W</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>B</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>A</label>\r\n            </div>\r\n        </ng-container> -->\r\n    </div>\r\n    <ax-button color=\"light\" class=\"ax-w-base\" (onClick)=\"_handleChangeInputMode($event)\">\r\n        <ax-icon class=\"ax-ic ax-ic-unfold\"></ax-icon>\r\n    </ax-button>\r\n</div>" }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXColorComponent, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [AXColorComponent]
+                    }] }];
+    } });
+
+class AXColorPalleteComponent extends AXBaseValueComponentMixin {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        this._onInternalColorChanged$ = new Subject();
+        this.modeChange = new EventEmitter();
+        this._mode = 'hex';
+        //
+        this._onInternalColorChanged$.subscribe(e => {
+            this.value = e.color;
+        });
+    }
+    /**
+    *  A character value that specifies the separator character.
+    */
+    get mode() {
+        return this._mode;
+    }
+    set mode(v) {
+        this._setOption({
+            name: "mode",
+            value: v,
+        });
+    }
+}
+AXColorPalleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPalleteComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXColorPalleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXColorPalleteComponent, selector: "ax-color-palette", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", mode: "mode" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", modeChange: "modeChange" }, providers: [{ provide: AXColorComponent, useExisting: AXColorPalleteComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select='ax-header'></ng-content>\r\n\r\n<ng-container [ngTemplateOutlet]=\"default\"></ng-container>\r\n\r\n<ng-template #default>\r\n    <ax-color-palette-preview></ax-color-palette-preview>\r\n    <ax-color-palette-swatches></ax-color-palette-swatches>\r\n    <ng-content select=\"ax-color-palette-favorite\"></ng-content>\r\n    <ax-color-palette-input></ax-color-palette-input>\r\n</ng-template>\r\n<ng-content select='ax-footer'></ng-content>", components: [{ type: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview" }, { type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: ["colors"] }, { type: AXColorPaletteInputComponent, selector: "ax-color-palette-input" }], directives: [{ type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPalleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-color-palette', changeDetection: ChangeDetectionStrategy.OnPush, inputs: [...INTERACTIVE_INPUTS, ...VALUE_INPUTS], outputs: [...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT], encapsulation: ViewEncapsulation.None, providers: [{ provide: AXColorComponent, useExisting: AXColorPalleteComponent }], template: "<ng-content select='ax-header'></ng-content>\r\n\r\n<ng-container [ngTemplateOutlet]=\"default\"></ng-container>\r\n\r\n<ng-template #default>\r\n    <ax-color-palette-preview></ax-color-palette-preview>\r\n    <ax-color-palette-swatches></ax-color-palette-swatches>\r\n    <ng-content select=\"ax-color-palette-favorite\"></ng-content>\r\n    <ax-color-palette-input></ax-color-palette-input>\r\n</ng-template>\r\n<ng-content select='ax-footer'></ng-content>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { modeChange: [{
+                type: Output
+            }], mode: [{
+                type: Input
+            }] } });
+
+class AXColorPalettePickerComponent {
+    constructor() { }
+    ngOnInit() { }
+}
+AXColorPalettePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPalettePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXColorPalettePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker", ngImport: i0, template: ``, isInline: true, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPalettePickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-color-palette-picker',
+                    template: ``,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: function () { return []; } });
+
 class AXTextBoxModule {
 }
 AXTextBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -5332,6 +5362,7 @@ class AXColorPickerComponent extends AXBaseColorPickerMixin {
         this._elementRef = _elementRef;
         this._zone = _zone;
         this._platform = _platform;
+        this._mode = 'hex';
         this._isMobile = false;
         this._isMobile = this._platform.is('Mobile');
         this._platform.resize.subscribe(() => {
@@ -5359,7 +5390,7 @@ class AXColorPickerComponent extends AXBaseColorPickerMixin {
     }
     _onValueChanged(oldValue, newValue) {
         super._onValueChanged(oldValue, newValue);
-        this.close();
+        this._colorCode = AXColorUtil.to(newValue, this._mode);
     }
     _handlePopupOnOpened(e) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -5372,12 +5403,12 @@ class AXColorPickerComponent extends AXBaseColorPickerMixin {
 AXColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$4.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
 AXColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXColorPickerComponent, selector: "ax-color-picker", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", autoComplete: "autoComplete" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { classAttribute: "ax-editor-container ax-drop-down" }, providers: [
         { provide: AXClosbaleComponent, useExisting: AXColorPickerComponent }
-    ], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n    <div class=\"color-badge\" [ngStyle]=\"{'background-color': value}\"></div>\r\n    <div>{{value}}</div>\r\n</div>\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\" *ngIf=\"value &&  !(disabled || readonly)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n</ax-button>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon #icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\"\r\n    [adaptivityEnabled]=\"true\" (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\r\n    <div class=\"ax-overlay-pane\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-actionsheet]=\"_isMobile\">\r\n        <ax-color-palette [(value)]=\"value\">\r\n            <ax-color-palette-preview></ax-color-palette-preview>\r\n            <ax-color-palette-swatches></ax-color-palette-swatches>\r\n            <ax-color-palette-input></ax-color-palette-input>\r\n        </ax-color-palette>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { type: AXColorPalleteComponent, selector: "ax-color-palette", inputs: ["disabled", "tabIndex", "readonly", "allowNull", "value", "debounceTime", "name", "checked"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { type: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview" }, { type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: ["colors"] }, { type: AXColorPaletteInputComponent, selector: "ax-color-palette-input" }], directives: [{ type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n    <div *ngIf=\"value\" class=\"color-badge\" [ngStyle]=\"{'background-color': value}\"></div>\r\n    <div class=\"ax-uppercase\">{{_colorCode}}</div>\r\n</div>\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\" *ngIf=\"value &&  !(disabled || readonly)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n</ax-button>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon #icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\"\r\n    [adaptivityEnabled]=\"true\" (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\r\n    <div class=\"ax-overlay-pane\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-actionsheet]=\"_isMobile\">\r\n        <ax-color-palette [(value)]=\"value\" [(mode)]=\"_mode\">\r\n        </ax-color-palette>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { type: AXColorPalleteComponent, selector: "ax-color-palette", inputs: ["disabled", "tabIndex", "readonly", "allowNull", "value", "debounceTime", "name", "checked", "mode"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "modeChange"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-picker', inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS], outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: AXClosbaleComponent, useExisting: AXColorPickerComponent }
-                    ], host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n    <div class=\"color-badge\" [ngStyle]=\"{'background-color': value}\"></div>\r\n    <div>{{value}}</div>\r\n</div>\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\" *ngIf=\"value &&  !(disabled || readonly)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n</ax-button>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon #icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\"\r\n    [adaptivityEnabled]=\"true\" (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\r\n    <div class=\"ax-overlay-pane\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-actionsheet]=\"_isMobile\">\r\n        <ax-color-palette [(value)]=\"value\">\r\n            <ax-color-palette-preview></ax-color-palette-preview>\r\n            <ax-color-palette-swatches></ax-color-palette-swatches>\r\n            <ax-color-palette-input></ax-color-palette-input>\r\n        </ax-color-palette>\r\n    </div>\r\n</ax-popover>" }]
+                    ], host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n    <div *ngIf=\"value\" class=\"color-badge\" [ngStyle]=\"{'background-color': value}\"></div>\r\n    <div class=\"ax-uppercase\">{{_colorCode}}</div>\r\n</div>\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\" *ngIf=\"value &&  !(disabled || readonly)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n</ax-button>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon #icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\"\r\n    [adaptivityEnabled]=\"true\" (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\r\n    <div class=\"ax-overlay-pane\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-actionsheet]=\"_isMobile\">\r\n        <ax-color-palette [(value)]=\"value\" [(mode)]=\"_mode\">\r\n        </ax-color-palette>\r\n    </div>\r\n</ax-popover>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$4.AXPlatform }]; }, propDecorators: { popover: [{
                 type: ViewChild,
                 args: [AXPopoverComponent, { static: true }]
@@ -6074,7 +6105,7 @@ class AXDialogComponent extends AXBaseComponentMixin {
     }
 }
 AXDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXDialogComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXDialogComponent, selector: "ax-dialog", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" cdkTrapFocus>\r\n    <div class=\"ax-dialog ax-{{options.type}}-default\" tabindex=\"0\" cdkDrag role=\"alert\" cdkDragHandle>\r\n        <div class=\"ax-dialog-icon-side\">\r\n            <i class=\"ax-dialog-icon {{_icon}}\"></i>\r\n        </div>\r\n        <div class=\"ax-dialog-content-side\">\r\n            <div class=\"ax-dialog-title\">{{options.title}}</div>\r\n            <div class=\"ax-dialog-content\">{{options.content}}</div>\r\n        </div>\r\n        <div class=\"ax-dialog-dismiss-icon\">\r\n            <i class=\"ax-ic ax-ic-close\" *ngIf=\"options.dismissible\" (click)=\"close()\"></i>\r\n        </div>\r\n        <footer class=\"ax-dialog-footer\">\r\n            <ng-container *ngFor=\"let button of options.buttons\">\r\n                <ax-button [text]=\"button.text\"  [submitBehavior]=\"button.submitBehavior\" [cancelBehavior]=\"button.cancelBehavior\" (onClick)=\"_handleButtonClick(button)\" [class]=\"button.cssClass\" [look]=\"button.look\" [color]=\"button.color\"></ax-button>\r\n                <div class=\"ax-ml-2\"></div>\r\n            </ng-container>\r\n        </footer>\r\n    </div>\r\n\r\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }], directives: [{ type: i10.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXDialogComponent, selector: "ax-dialog", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" cdkTrapFocus>\r\n    <div class=\"ax-dialog ax-{{options.type}}-default\" tabindex=\"0\" cdkDrag role=\"alert\" cdkDragHandle>\r\n        <div class=\"ax-dialog-icon-side\">\r\n            <i class=\"ax-dialog-icon {{_icon}}\"></i>\r\n        </div>\r\n        <div class=\"ax-dialog-content-side\">\r\n            <div class=\"ax-dialog-title\">{{options.title}}</div>\r\n            <div class=\"ax-dialog-content\">{{options.content}}</div>\r\n        </div>\r\n        <div class=\"ax-dialog-dismiss-icon\">\r\n            <i class=\"ax-ic ax-ic-close\" *ngIf=\"options.dismissible\" (click)=\"close()\"></i>\r\n        </div>\r\n        <footer class=\"ax-dialog-footer\">\r\n            <ng-container *ngFor=\"let button of options.buttons\">\r\n                <ax-button [text]=\"button.text\"  [submitBehavior]=\"button.submitBehavior\" [cancelBehavior]=\"button.cancelBehavior\" (onClick)=\"_handleButtonClick(button)\" [class]=\"button.cssClass\" [look]=\"button.look\" [color]=\"button.color\"></ax-button>\r\n                <div class=\"ax-ml-2\"></div>\r\n            </ng-container>\r\n        </footer>\r\n    </div>\r\n\r\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }], directives: [{ type: i7.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" cdkTrapFocus>\r\n    <div class=\"ax-dialog ax-{{options.type}}-default\" tabindex=\"0\" cdkDrag role=\"alert\" cdkDragHandle>\r\n        <div class=\"ax-dialog-icon-side\">\r\n            <i class=\"ax-dialog-icon {{_icon}}\"></i>\r\n        </div>\r\n        <div class=\"ax-dialog-content-side\">\r\n            <div class=\"ax-dialog-title\">{{options.title}}</div>\r\n            <div class=\"ax-dialog-content\">{{options.content}}</div>\r\n        </div>\r\n        <div class=\"ax-dialog-dismiss-icon\">\r\n            <i class=\"ax-ic ax-ic-close\" *ngIf=\"options.dismissible\" (click)=\"close()\"></i>\r\n        </div>\r\n        <footer class=\"ax-dialog-footer\">\r\n            <ng-container *ngFor=\"let button of options.buttons\">\r\n                <ax-button [text]=\"button.text\"  [submitBehavior]=\"button.submitBehavior\" [cancelBehavior]=\"button.cancelBehavior\" (onClick)=\"_handleButtonClick(button)\" [class]=\"button.cssClass\" [look]=\"button.look\" [color]=\"button.color\"></ax-button>\r\n                <div class=\"ax-ml-2\"></div>\r\n            </ng-container>\r\n        </footer>\r\n    </div>\r\n\r\n</div>" }]
@@ -7081,7 +7112,7 @@ class AXPopupComponent extends AXBaseComponentMixin {
     onFullScreen() { }
 }
 AXPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXPopupComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: AXLoadingService }, { token: i1$4.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
-AXPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXPopupComponent, selector: "ax-popup", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, providers: [{ provide: AXClosbaleComponent, useExisting: AXPopupComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" [cdkTrapFocus]=\"true\">\r\n    <div class=\"ax-popup ax-popup-{{size}}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!draggable\">\r\n        <div cdkDragHandle class=\"ax-popup-header-container\">\r\n            <ax-header *ngIf=\"showHeader\">\r\n                <ax-title [text]=\"title\"></ax-title>\r\n                <ax-close-button *ngIf=\"showCloseButton\"></ax-close-button>\r\n            </ax-header>\r\n        </div>\r\n        <div class=\"ax-popup-main-container\">\r\n            <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\r\n        </div>\r\n        <div class=\"ax-popup-footer-container\"></div>\r\n    </div>\r\n</div>", components: [{ type: AXDecoratorHeaderComponent, selector: "ax-header" }, { type: AXDecoratorTitleComponent, selector: "ax-title", inputs: ["text"] }, { type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }], directives: [{ type: i10.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$5.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXPopupComponent, selector: "ax-popup", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, providers: [{ provide: AXClosbaleComponent, useExisting: AXPopupComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" [cdkTrapFocus]=\"true\">\r\n    <div class=\"ax-popup ax-popup-{{size}}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!draggable\">\r\n        <div cdkDragHandle class=\"ax-popup-header-container\">\r\n            <ax-header *ngIf=\"showHeader\">\r\n                <ax-title [text]=\"title\"></ax-title>\r\n                <ax-close-button *ngIf=\"showCloseButton\"></ax-close-button>\r\n            </ax-header>\r\n        </div>\r\n        <div class=\"ax-popup-main-container\">\r\n            <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\r\n        </div>\r\n        <div class=\"ax-popup-footer-container\"></div>\r\n    </div>\r\n</div>", components: [{ type: AXDecoratorHeaderComponent, selector: "ax-header" }, { type: AXDecoratorTitleComponent, selector: "ax-title", inputs: ["text"] }, { type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }], directives: [{ type: i7.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$5.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXPopupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-popup', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXClosbaleComponent, useExisting: AXPopupComponent }], template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" [cdkTrapFocus]=\"true\">\r\n    <div class=\"ax-popup ax-popup-{{size}}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!draggable\">\r\n        <div cdkDragHandle class=\"ax-popup-header-container\">\r\n            <ax-header *ngIf=\"showHeader\">\r\n                <ax-title [text]=\"title\"></ax-title>\r\n                <ax-close-button *ngIf=\"showCloseButton\"></ax-close-button>\r\n            </ax-header>\r\n        </div>\r\n        <div class=\"ax-popup-main-container\">\r\n            <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\r\n        </div>\r\n        <div class=\"ax-popup-footer-container\"></div>\r\n    </div>\r\n</div>" }]
@@ -7694,7 +7725,7 @@ AXSelectBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", ver
 AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", autoComplete: "autoComplete", pageSize: "pageSize", valueField: "valueField", textField: "textField", items: "items", disabledField: "disabledField", disabledCallback: "disabledCallback", multiple: "multiple", selectionMode: "selectionMode", clearButton: "clearButton", checkbox: "checkbox" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", valueChanged: "valueChanged" }, host: { listeners: { "keydown": "_handleKeydown($event)" }, classAttribute: "ax-editor-container ax-drop-down" }, providers: [
         { provide: AXClosbaleComponent, useExisting: AXSelectBoxComponent },
         { provide: AXSearchableComponent, useExisting: AXSelectBoxComponent }
-    ], queries: [{ propertyName: "_searchBox", first: true, predicate: AXSearchBoxComponent, descendants: true, static: true }, { propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n    <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\">\r\n        <ng-container *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\r\n            <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\r\n            <ng-template #singleSelectedTemplate>\r\n                <ng-container *ngFor=\"let item of selectedItems\">\r\n                    <span class=\"ax-mx-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                </ng-container>\r\n            </ng-template>\r\n            <ng-template #multipleSelectedTemplate>\r\n                <div class=\"ax-flex ax-mx-2\">\r\n                    <ng-container *ngFor=\"let item of selectedItems\">\r\n                        <ax-badge [text]=\"_getItemDisplayTextTemplte(item)\" color=\"light\" class=\"ax-me-2\">\r\n                            <ax-suffix>\r\n                                <ax-icon icon=\"ax-ic ax-ic-close ax-cursor-pointer\"\r\n                                    (click)=\"_handleBadgeRemove($event,item)\"></ax-icon>\r\n                            </ax-suffix>\r\n                        </ax-badge>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n        </ng-container>\r\n        <ng-template #showPlaceholder>\r\n            <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\"> {{placeholder}}</div>\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && clearButton &&  !(disabled || readonly)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n</ax-button>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-prefix *ngIf=\"(isLoading && !this.popover.isOpen);else icon\">\r\n        <ax-loading type=\"spinner\"></ax-loading>\r\n    </ax-prefix>\r\n    <ng-template #icon>\r\n        <ax-icon #icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n    </ng-template>\r\n</ax-button>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\" [adaptivityEnabled]=\"true\"\r\n    (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\r\n    <div class=\"ax-overlay-pane \" (keydown)=\"_handlePopoverKeydown($event)\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-actionsheet]=\"_isMobile\" [class.ax-full]=\"_searchBox ||  isLazy\"\r\n        [style.min-width.px]=\"_popoverWidth\">\r\n        <div class=\"ax-list\" >\r\n            <ax-header *ngIf=\"_isMobile\" >\r\n                <ax-title [text]=\"_popoverTitle\"></ax-title>\r\n                <ax-close-button [icon]=\"multiple?'ax-ic-check !ax-text-primary-500':'ax-ic-close'\"></ax-close-button>\r\n            </ax-header>\r\n            <div class=\"ax-p-2\" [class.ax-hidden]=\"!_searchBox\" [cdkTrapFocus]=\"_searchBox!=null\">\r\n                <ng-content select=\"ax-search-box\" ></ng-content>\r\n            </div>\r\n            <div class=\"ax-content ax-list-items-container ax-default\" (scroll)=\"_handleListScroll($event)\"\r\n                #listContainer>\r\n                <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n                    <ul>\r\n                        <ng-container *ngTemplateOutlet=\"tmpTree; context:{ list: displayItems }\">\r\n                        </ng-container>\r\n                        <ng-template #tmpTree let-list=\"list\">\r\n                            <ng-container *ngFor=\"let item of list;let i = index;trackBy : _trackByFunction\">\r\n                                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                                    <li class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\"\r\n                                        [attr.data-id]=\"item[this.valueField]\">\r\n                                        <ng-container\r\n                                            *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                                        </ng-container>\r\n                                    </li>\r\n                                </ng-container>\r\n                                <ng-template #defualtTemplate>\r\n                                    <ng-container *ngIf=\"item.children?.length > 0;else tmpItem\">\r\n                                        <li class=\"ax-list-item-group\" [attr.data-id]=\"item[this.valueField]\">\r\n                                            <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            <ul *ngIf=\"item.children?.length > 0\">\r\n                                                <ng-container\r\n                                                    *ngTemplateOutlet=\"tmpTree; context:{ list:  item.children }\">\r\n                                                </ng-container>\r\n                                            </ul>\r\n                                        </li>\r\n                                    </ng-container>\r\n                                    <ng-template #tmpItem>\r\n                                        <ng-container *ngIf=\"!multiple;  else multipleTemplate\">\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-container>\r\n                                        <ng-template #multipleTemplate>\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                [class.ax-check-box]=\"checkbox\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <input type=\"checkbox\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                    *ngIf=\"checkbox\" [checked]=\"isItemSelected(item)\"\r\n                                                    [disabled]=\"isItemDisabled(item)\">\r\n                                                <span class=\"ax-ms-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-template>\r\n                                    </ng-template>\r\n                                </ng-template>\r\n                            </ng-container>\r\n                        </ng-template>\r\n                    </ul>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"isLoading\">\r\n                    <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n                        <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #elseLoadingTemplate>\r\n                        <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n                            <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-container>\r\n                <ng-template #tmpEmpty>\r\n                    <ng-container *ngIf=\"!isLoading\">\r\n                        <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n                            <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-template #elseEmptyTemplate>\r\n                            <div class=\"ax-list-item\">\r\n                                {{ 'common.no-result-found' | trans }}\r\n                            </div>\r\n                        </ng-template>\r\n                    </ng-container>\r\n                </ng-template>\r\n\r\n            </div>\r\n            <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                >\r\n               \r\n            </div> -->\r\n            <!-- <div class=\"ax-footer\">footer</div> -->\r\n        </div>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { type: AXDecoratorSuffixComponent, selector: "ax-suffix" }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { type: AXDecoratorHeaderComponent, selector: "ax-header" }, { type: AXDecoratorTitleComponent, selector: "ax-title", inputs: ["text"] }, { type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "trans": i1$4.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "_searchBox", first: true, predicate: AXSearchBoxComponent, descendants: true, static: true }, { propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n    <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\">\r\n        <ng-container *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\r\n            <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\r\n            <ng-template #singleSelectedTemplate>\r\n                <ng-container *ngFor=\"let item of selectedItems\">\r\n                    <span class=\"ax-mx-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                </ng-container>\r\n            </ng-template>\r\n            <ng-template #multipleSelectedTemplate>\r\n                <div class=\"ax-flex ax-mx-2\">\r\n                    <ng-container *ngFor=\"let item of selectedItems\">\r\n                        <ax-badge [text]=\"_getItemDisplayTextTemplte(item)\" color=\"light\" class=\"ax-me-2\">\r\n                            <ax-suffix>\r\n                                <ax-icon icon=\"ax-ic ax-ic-close ax-cursor-pointer\"\r\n                                    (click)=\"_handleBadgeRemove($event,item)\"></ax-icon>\r\n                            </ax-suffix>\r\n                        </ax-badge>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n        </ng-container>\r\n        <ng-template #showPlaceholder>\r\n            <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\"> {{placeholder}}</div>\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && clearButton &&  !(disabled || readonly)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n</ax-button>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-prefix *ngIf=\"(isLoading && !this.popover.isOpen);else icon\">\r\n        <ax-loading type=\"spinner\"></ax-loading>\r\n    </ax-prefix>\r\n    <ng-template #icon>\r\n        <ax-icon #icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n    </ng-template>\r\n</ax-button>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\" [adaptivityEnabled]=\"true\"\r\n    (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\r\n    <div class=\"ax-overlay-pane \" (keydown)=\"_handlePopoverKeydown($event)\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-actionsheet]=\"_isMobile\" [class.ax-full]=\"_searchBox ||  isLazy\"\r\n        [style.min-width.px]=\"_popoverWidth\">\r\n        <div class=\"ax-list\" >\r\n            <ax-header *ngIf=\"_isMobile\" >\r\n                <ax-title [text]=\"_popoverTitle\"></ax-title>\r\n                <ax-close-button [icon]=\"multiple?'ax-ic-check !ax-text-primary-500':'ax-ic-close'\"></ax-close-button>\r\n            </ax-header>\r\n            <div class=\"ax-p-2\" [class.ax-hidden]=\"!_searchBox\" [cdkTrapFocus]=\"_searchBox!=null\">\r\n                <ng-content select=\"ax-search-box\" ></ng-content>\r\n            </div>\r\n            <div class=\"ax-content ax-list-items-container ax-default\" (scroll)=\"_handleListScroll($event)\"\r\n                #listContainer>\r\n                <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n                    <ul>\r\n                        <ng-container *ngTemplateOutlet=\"tmpTree; context:{ list: displayItems }\">\r\n                        </ng-container>\r\n                        <ng-template #tmpTree let-list=\"list\">\r\n                            <ng-container *ngFor=\"let item of list;let i = index;trackBy : _trackByFunction\">\r\n                                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                                    <li class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\"\r\n                                        [attr.data-id]=\"item[this.valueField]\">\r\n                                        <ng-container\r\n                                            *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                                        </ng-container>\r\n                                    </li>\r\n                                </ng-container>\r\n                                <ng-template #defualtTemplate>\r\n                                    <ng-container *ngIf=\"item.children?.length > 0;else tmpItem\">\r\n                                        <li class=\"ax-list-item-group\" [attr.data-id]=\"item[this.valueField]\">\r\n                                            <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            <ul *ngIf=\"item.children?.length > 0\">\r\n                                                <ng-container\r\n                                                    *ngTemplateOutlet=\"tmpTree; context:{ list:  item.children }\">\r\n                                                </ng-container>\r\n                                            </ul>\r\n                                        </li>\r\n                                    </ng-container>\r\n                                    <ng-template #tmpItem>\r\n                                        <ng-container *ngIf=\"!multiple;  else multipleTemplate\">\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-container>\r\n                                        <ng-template #multipleTemplate>\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                [class.ax-check-box]=\"checkbox\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <input type=\"checkbox\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                    *ngIf=\"checkbox\" [checked]=\"isItemSelected(item)\"\r\n                                                    [disabled]=\"isItemDisabled(item)\">\r\n                                                <span class=\"ax-ms-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-template>\r\n                                    </ng-template>\r\n                                </ng-template>\r\n                            </ng-container>\r\n                        </ng-template>\r\n                    </ul>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"isLoading\">\r\n                    <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n                        <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #elseLoadingTemplate>\r\n                        <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n                            <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-container>\r\n                <ng-template #tmpEmpty>\r\n                    <ng-container *ngIf=\"!isLoading\">\r\n                        <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n                            <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-template #elseEmptyTemplate>\r\n                            <div class=\"ax-list-item\">\r\n                                {{ 'common.no-result-found' | trans }}\r\n                            </div>\r\n                        </ng-template>\r\n                    </ng-container>\r\n                </ng-template>\r\n\r\n            </div>\r\n            <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                >\r\n               \r\n            </div> -->\r\n            <!-- <div class=\"ax-footer\">footer</div> -->\r\n        </div>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { type: AXDecoratorSuffixComponent, selector: "ax-suffix" }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { type: AXDecoratorHeaderComponent, selector: "ax-header" }, { type: AXDecoratorTitleComponent, selector: "ax-title", inputs: ["text"] }, { type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "trans": i1$4.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-select-box', inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS, ...DATALIST_INPUTS, ...SELECTION_INPUTS], outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT, ...SELECTION_OUTPUT], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -9044,5 +9075,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXActionSheetComponent, AXActionSheetItemComponent, AXActionSheetModule, AXAlertButtonComponent, AXAlertComponent, AXAlertModule, AXAvatarComponent, AXAvatarGroup, AXAvatarMixin, AXAvatarModule, AXBadgeComponent, AXBadgeModule, AXBaseAlertMixin, AXBaseBadgeMixin, AXBaseButtonMixin, AXBaseClickableMixin, AXBaseColorPickerMixin, AXBaseComponent, AXBaseComponentMixin, AXBaseDatePickerMixin, AXBaseDropdownMixin, AXBaseItemButtonMixin, AXBaseMenuMixin, AXBasePageComponent, AXBaseSelectionDropdownMixin, AXBaseSelectionValueMixin, AXBaseTabItemMixin, AXBaseTextBoxMixin, AXBaseValueComponentMixin, AXBaseValueDropdownMixin, AXBreadCrumbsComponent, AXBreadCrumbsItemComponent, AXBreadcrumbsModule, AXButtonClickEvent, AXButtonComponent, AXButtonGroupComponent, AXButtonItemComponent, AXButtonModule, AXCalendarComponent, AXCalendarComponentMixin, AXCalendarModule, AXCarouselArrowsComponent, AXCarouselComponent, AXCarouselCore, AXCarouselItemComponent, AXCarouselModule, AXCarouselPagerComponent, AXCheckBoxComponent, AXCheckBoxModule, AXClickEvent, AXClosbaleComponent, AXCollapseComponent, AXCollapseGroupComponent, AXCollapseModule, AXColorPaletteInputComponent, AXColorPaletteModule, AXColorPalettePickerComponent, AXColorPalettePreviewComponent, AXColorPaletteSwatchesComponent, AXColorPalleteComponent, AXColorPickerComponent, AXColorPickerModule, AXCommonModule, AXDataListComponent, AXDataListModule, AXDatePickerComponent, AXDatepickerModule, AXDecoratorAddOnComponent, AXDecoratorCloseButtonComponent, AXDecoratorContentComponent, AXDecoratorFooterComponent, AXDecoratorHeaderComponent, AXDecoratorIconComponent, AXDecoratorModule, AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDecoratorTitleComponent, AXDialogComponent, AXDialogModule, AXDialogService, AXDrawerComponent, AXDrawerContainerComponent, AXDrawerModule, AXDropdownModule, AXDropdownPanelComponent, AXEvent, AXFocusEvent, AXFormComponent, AXFormFieldComponent, AXFormHintComponent, AXFormModule, AXHtmlEvent, AXInfiniteScrollerDirective, AXInputMaskComponent, AXInputMaskModule, AXInteractiveComponenetMixin, AXItemClickEvent, AXLabelComponent, AXLabelModule, AXLoadingComponent, AXLoadingDirective, AXLoadingModule, AXLoadingService, AXLoadingSpinnerComponent, AXMenuComponent, AXMenuModule, AXNumberBoxComponent, AXNumberBoxModule, AXOverlayService, AXPageCloseEvent, AXPageClosedPromise, AXPageClosing, AXPageComponent, AXPageModule, AXPageResult, AXPasswordBoxComponent, AXPasswordBoxModule, AXPickerComponent, AXPickerModule, AXPopoverComponent, AXPopoverModule, AXPopupComponent, AXPopupModule, AXPopupService, AXProgressBarComponent, AXProgressBarModule, AXRadioComponent, AXRadioModule, AXRangeChangedEvent, AXRangeSliderComponent, AXRangeSliderModule, AXRatingComponent, AXRatingModule, AXResponsiveDirective, AXResultComponent, AXResultModule, AXSearchBoxComponent, AXSearchBoxModule, AXSearchableComponent, AXSelectBoxComponent, AXSelectBoxModule, AXSelectionListComponent, AXSelectionListModule, AXSelectionValueChangedEvent, AXSizableComponentMixin, AXSwitchComponent, AXSwitchModule, AXTabContentDirective, AXTabItemComponent, AXTabStripChangedEvent, AXTabsComponent, AXTabsModule, AXTextBoxComponent, AXTextBoxModule, AXTextareaComponent, AXTextareaModule, AXTimeBoxComponent, AXTimeBoxModule, AXToastComponent, AXToastModule, AXToastService, AXTooltipComponent, AXTooltipDirective, AXTooltipModule, AXTreeViewComponent, AXTreeViewModule, AXValidationModule, AXValidationRuleComponent, AXValidationRules, AXValueChangedEvent, AX_DIRECTIONS, AX_LOCATIONS, AX_STYLE_TYPES, BASE_INPUTS, BASE_OUTPUT, TAB_META_KEY, _BaseComponenetMixin };
+export { AXActionSheetComponent, AXActionSheetItemComponent, AXActionSheetModule, AXAlertButtonComponent, AXAlertComponent, AXAlertModule, AXAvatarComponent, AXAvatarGroup, AXAvatarMixin, AXAvatarModule, AXBadgeComponent, AXBadgeModule, AXBaseAlertMixin, AXBaseBadgeMixin, AXBaseButtonMixin, AXBaseClickableMixin, AXBaseColorPickerMixin, AXBaseComponent, AXBaseComponentMixin, AXBaseDatePickerMixin, AXBaseDropdownMixin, AXBaseItemButtonMixin, AXBaseMenuMixin, AXBasePageComponent, AXBaseSelectionDropdownMixin, AXBaseSelectionValueMixin, AXBaseTabItemMixin, AXBaseTextBoxMixin, AXBaseValueComponentMixin, AXBaseValueDropdownMixin, AXBreadCrumbsComponent, AXBreadCrumbsItemComponent, AXBreadcrumbsModule, AXButtonClickEvent, AXButtonComponent, AXButtonGroupComponent, AXButtonItemComponent, AXButtonModule, AXCalendarComponent, AXCalendarComponentMixin, AXCalendarModule, AXCarouselArrowsComponent, AXCarouselComponent, AXCarouselCore, AXCarouselItemComponent, AXCarouselModule, AXCarouselPagerComponent, AXCheckBoxComponent, AXCheckBoxModule, AXClickEvent, AXClosbaleComponent, AXCollapseComponent, AXCollapseGroupComponent, AXCollapseModule, AXColorPaletteInputComponent, AXColorPaletteModule, AXColorPalettePickerComponent, AXColorPalettePreviewComponent, AXColorPaletteSwatchesComponent, AXColorPalleteComponent, AXColorPickerComponent, AXColorPickerModule, AXCommonModule, AXDataListComponent, AXDataListModule, AXDatePickerComponent, AXDatepickerModule, AXDecoratorAddOnComponent, AXDecoratorCloseButtonComponent, AXDecoratorContentComponent, AXDecoratorFooterComponent, AXDecoratorHeaderComponent, AXDecoratorIconComponent, AXDecoratorModule, AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDecoratorTitleComponent, AXDialogComponent, AXDialogModule, AXDialogService, AXDrawerComponent, AXDrawerContainerComponent, AXDrawerModule, AXDropdownModule, AXDropdownPanelComponent, AXEvent, AXFocusEvent, AXFormComponent, AXFormFieldComponent, AXFormHintComponent, AXFormModule, AXHtmlEvent, AXInfiniteScrollerDirective, AXInputMaskComponent, AXInputMaskModule, AXInteractiveComponenetMixin, AXItemClickEvent, AXLabelComponent, AXLabelModule, AXLoadingComponent, AXLoadingDirective, AXLoadingModule, AXLoadingService, AXLoadingSpinnerComponent, AXMenuComponent, AXMenuModule, AXNumberBoxComponent, AXNumberBoxModule, AXOverlayService, AXPageCloseEvent, AXPageClosedPromise, AXPageClosing, AXPageComponent, AXPageModule, AXPageResult, AXPasswordBoxComponent, AXPasswordBoxModule, AXPickerComponent, AXPickerModule, AXPopoverComponent, AXPopoverModule, AXPopupComponent, AXPopupModule, AXPopupService, AXProgressBarComponent, AXProgressBarModule, AXRadioComponent, AXRadioModule, AXRangeChangedEvent, AXRangeSliderComponent, AXRangeSliderModule, AXRatingComponent, AXRatingModule, AXResponsiveDirective, AXResultComponent, AXResultModule, AXSearchBoxComponent, AXSearchBoxModule, AXSearchableComponent, AXSelectBoxComponent, AXSelectBoxModule, AXSelectionListComponent, AXSelectionListModule, AXSelectionValueChangedEvent, AXSizableComponentMixin, AXSwitchComponent, AXSwitchModule, AXTabContentDirective, AXTabItemComponent, AXTabStripChangedEvent, AXTabsComponent, AXTabsModule, AXTextBoxComponent, AXTextBoxModule, AXTextareaComponent, AXTextareaModule, AXTimeBoxComponent, AXTimeBoxModule, AXToastComponent, AXToastModule, AXToastService, AXTooltipComponent, AXTooltipDirective, AXTooltipModule, AXTreeViewComponent, AXTreeViewModule, AXValidationModule, AXValidationRuleComponent, AXValidationRules, AXValuableComponent, AXValueChangedEvent, AX_DIRECTIONS, AX_LOCATIONS, AX_STYLE_TYPES, BASE_INPUTS, BASE_OUTPUT, TAB_META_KEY, _BaseComponenetMixin };
 //# sourceMappingURL=acorex-components.mjs.map