@acorex/components 7.1.0 → 7.1.2

package/fesm2022/acorex-components-color-palette.mjs

@@ -18,753 +18,753 @@ import { AXLabelModule } from '@acorex/components/label';
 import { AXButtonModule } from '@acorex/components/button';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 
-class AXColorComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorComponent });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorComponent, decorators: [{
-            type: Injectable
-        }] });
-class AXColorPaletteChildComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPaletteChildComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPaletteChildComponent });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPaletteChildComponent, decorators: [{
-            type: Injectable
+class AXColorComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorComponent });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorComponent, decorators: [{
+            type: Injectable
+        }] });
+class AXColorPaletteChildComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPaletteChildComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPaletteChildComponent });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPaletteChildComponent, decorators: [{
+            type: Injectable
         }] });
 
-class AXColorPaletteInputComponent extends AXBaseComponent {
-    _parent;
-    _isTouched = false;
-    isValid = true;
-    _rgba = {
-        r: 0,
-        g: 0,
-        b: 0,
-        a: 0,
-    };
-    _hex = '';
-    _colorMode = "hex";
-    _hexMaskOptions = {
-        mask: /^#[0-9a-f]{0,6}[0-9a-f]{0,2}$/i,
-        prepare: (str, m, a) => {
-            return m.typedValue?.startsWith('#') || str == '#' ? str.trim() : '#' + str.trim();
-        },
-    };
-    constructor(_elementRef, _cdr, _parent) {
-        super(_elementRef, _cdr);
-        this._parent = _parent;
-        _parent._onInternalColorChanged$
-            .pipe(distinctUntilChanged())
-            .subscribe((e) => {
-            if (!e.color) {
-                this._hex = '';
-                this._rgba = {
-                    r: null,
-                    g: null,
-                    b: null,
-                    a: null,
-                };
-            }
-            else {
-                Object.assign(this._rgba, AXColorUtil.to(e.color, 'rgba'));
-                if (this._colorMode != 'hex' || !this._hex)
-                    this._hex = AXColorUtil.toString(e.color, 'hex');
-                if (this._colorMode == 'hex')
-                    this._hex = e.color;
-                if (this._rgba.a != 1 && !this._isTouched) {
-                    this._colorMode = 'rgba';
-                }
-            }
-            this.checkValid();
-            _cdr.detectChanges();
-        });
-    }
-    _handleChangeInputMode() {
-        this._isTouched = true;
-        switch (this._colorMode) {
-            case 'rgba':
-                this._colorMode = 'hex';
-                break;
-            default:
-                this._colorMode = 'rgba';
-                break;
-        }
-    }
-    _handleRGBAValueChanged(e) {
-        if (e.value == null || (e.value == 0 && !e.oldValue))
-            return;
-        const { r, g, b, a } = this._rgba;
-        const _color = `rgba(${r},${g},${b},${a})`;
-        if (e.isUserInteraction) {
-            this._parent._setUserInteraction();
-            this._isTouched = true;
-        }
-        this._parent._onInternalColorChanged$.next({
-            color: AXColorUtil.toString(_color, 'rgba'),
-            sender: this,
-        });
-    }
-    _handleHEXAValueChanged(e) {
-        if (!e.value && !e.oldValue)
-            return;
-        //
-        if (e.isUserInteraction) {
-            this._parent._setUserInteraction();
-            this._isTouched = true;
-        }
-        //
-        if (!e.value && e.oldValue) {
-            this._parent._onInternalColorChanged$.next({
-                color: null,
-                sender: this
-            });
-        }
-        else {
-            this._parent._onInternalColorChanged$.next({
-                color: e.value,
-                sender: this
-            });
-        }
-    }
-    checkValid() {
-        this.isValid = AXColorUtil.isValid(this._hex);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPaletteInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXColorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input", host: { classAttribute: "ax-color-palette-input" }, providers: [
-            {
-                provide: AXColorPaletteChildComponent,
-                useExisting: AXColorPaletteInputComponent,
-            },
-        ], usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"this._colorMode\">\r\n  <div class=\"palette-inputs\">\r\n    <ng-container *ngSwitchCase=\"'hex'\">\r\n      <div>\r\n        <ax-text-box\r\n          class=\"ax-sm\"\r\n          [value]=\"_hex\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          [state]=\"isValid?'clear':'error'\"\r\n          (onValueChanged)=\"_handleHEXAValueChanged($event)\" [mask-options]=\"_hexMaskOptions\">\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\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.r\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\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\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.g\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\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\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.b\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\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\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"1\"\r\n          [(value)]=\"_rgba.a\"\r\n          [decimals]=\"2\"\r\n          [step]=\"0.1\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          [showSpinButtons]=\"false\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>A</label>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <button\r\n    class=\"ax-general-button ax-button-icon ax-sm\"\r\n    (click)=\"_handleChangeInputMode()\"\r\n    [disabled]=\"_parent.disabled\">\r\n    <span class=\"ax-icon ax-icon-unfold-more\"></span>\r\n  </button>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "mask-options"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged"] }, { kind: "component", type: i3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "size", "value", "state", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "name", "checked", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPaletteInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-color-palette-input', host: { class: 'ax-color-palette-input' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: AXColorPaletteChildComponent,
-                            useExisting: AXColorPaletteInputComponent,
-                        },
-                    ], template: "<ng-container [ngSwitch]=\"this._colorMode\">\r\n  <div class=\"palette-inputs\">\r\n    <ng-container *ngSwitchCase=\"'hex'\">\r\n      <div>\r\n        <ax-text-box\r\n          class=\"ax-sm\"\r\n          [value]=\"_hex\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          [state]=\"isValid?'clear':'error'\"\r\n          (onValueChanged)=\"_handleHEXAValueChanged($event)\" [mask-options]=\"_hexMaskOptions\">\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\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.r\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\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\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.g\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\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\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.b\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\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\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"1\"\r\n          [(value)]=\"_rgba.a\"\r\n          [decimals]=\"2\"\r\n          [step]=\"0.1\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          [showSpinButtons]=\"false\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>A</label>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <button\r\n    class=\"ax-general-button ax-button-icon ax-sm\"\r\n    (click)=\"_handleChangeInputMode()\"\r\n    [disabled]=\"_parent.disabled\">\r\n    <span class=\"ax-icon ax-icon-unfold-more\"></span>\r\n  </button>\r\n</ng-container>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXColorComponent, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [AXColorComponent]
+class AXColorPaletteInputComponent extends AXBaseComponent {
+    _parent;
+    _isTouched = false;
+    isValid = true;
+    _rgba = {
+        r: 0,
+        g: 0,
+        b: 0,
+        a: 0,
+    };
+    _hex = '';
+    _colorMode = "hex";
+    _hexMaskOptions = {
+        mask: /^#[0-9a-f]{0,6}[0-9a-f]{0,2}$/i,
+        prepare: (str, m, a) => {
+            return m.typedValue?.startsWith('#') || str == '#' ? str.trim() : '#' + str.trim();
+        },
+    };
+    constructor(_elementRef, _cdr, _parent) {
+        super(_elementRef, _cdr);
+        this._parent = _parent;
+        _parent._onInternalColorChanged$
+            .pipe(distinctUntilChanged())
+            .subscribe((e) => {
+            if (!e.color) {
+                this._hex = '';
+                this._rgba = {
+                    r: null,
+                    g: null,
+                    b: null,
+                    a: null,
+                };
+            }
+            else {
+                Object.assign(this._rgba, AXColorUtil.to(e.color, 'rgba'));
+                if (this._colorMode != 'hex' || !this._hex)
+                    this._hex = AXColorUtil.toString(e.color, 'hex');
+                if (this._colorMode == 'hex')
+                    this._hex = e.color;
+                if (this._rgba.a != 1 && !this._isTouched) {
+                    this._colorMode = 'rgba';
+                }
+            }
+            this.checkValid();
+            _cdr.detectChanges();
+        });
+    }
+    _handleChangeInputMode() {
+        this._isTouched = true;
+        switch (this._colorMode) {
+            case 'rgba':
+                this._colorMode = 'hex';
+                break;
+            default:
+                this._colorMode = 'rgba';
+                break;
+        }
+    }
+    _handleRGBAValueChanged(e) {
+        if (e.value == null || (e.value == 0 && !e.oldValue))
+            return;
+        const { r, g, b, a } = this._rgba;
+        const _color = `rgba(${r},${g},${b},${a})`;
+        if (e.isUserInteraction) {
+            this._parent._setUserInteraction();
+            this._isTouched = true;
+        }
+        this._parent._onInternalColorChanged$.next({
+            color: AXColorUtil.toString(_color, 'rgba'),
+            sender: this,
+        });
+    }
+    _handleHEXAValueChanged(e) {
+        if (!e.value && !e.oldValue)
+            return;
+        //
+        if (e.isUserInteraction) {
+            this._parent._setUserInteraction();
+            this._isTouched = true;
+        }
+        //
+        if (!e.value && e.oldValue) {
+            this._parent._onInternalColorChanged$.next({
+                color: null,
+                sender: this
+            });
+        }
+        else {
+            this._parent._onInternalColorChanged$.next({
+                color: e.value,
+                sender: this
+            });
+        }
+    }
+    checkValid() {
+        this.isValid = AXColorUtil.isValid(this._hex);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPaletteInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXColorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input", host: { classAttribute: "ax-color-palette-input" }, providers: [
+            {
+                provide: AXColorPaletteChildComponent,
+                useExisting: AXColorPaletteInputComponent,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"this._colorMode\">\r\n  <div class=\"palette-inputs\">\r\n    <ng-container *ngSwitchCase=\"'hex'\">\r\n      <div>\r\n        <ax-text-box\r\n          class=\"ax-sm\"\r\n          [value]=\"_hex\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          [state]=\"isValid?'clear':'error'\"\r\n          (onValueChanged)=\"_handleHEXAValueChanged($event)\" [mask-options]=\"_hexMaskOptions\">\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\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.r\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\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\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.g\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\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\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.b\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\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\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"1\"\r\n          [(value)]=\"_rgba.a\"\r\n          [decimals]=\"2\"\r\n          [step]=\"0.1\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          [showSpinButtons]=\"false\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>A</label>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <button\r\n    class=\"ax-general-button ax-button-icon ax-sm\"\r\n    (click)=\"_handleChangeInputMode()\"\r\n    [disabled]=\"_parent.disabled\">\r\n    <span class=\"ax-icon ax-icon-unfold-more\"></span>\r\n  </button>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "mask-options"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged"] }, { kind: "component", type: i3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "size", "value", "state", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "name", "checked", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPaletteInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-color-palette-input', host: { class: 'ax-color-palette-input' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: AXColorPaletteChildComponent,
+                            useExisting: AXColorPaletteInputComponent,
+                        },
+                    ], template: "<ng-container [ngSwitch]=\"this._colorMode\">\r\n  <div class=\"palette-inputs\">\r\n    <ng-container *ngSwitchCase=\"'hex'\">\r\n      <div>\r\n        <ax-text-box\r\n          class=\"ax-sm\"\r\n          [value]=\"_hex\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          [state]=\"isValid?'clear':'error'\"\r\n          (onValueChanged)=\"_handleHEXAValueChanged($event)\" [mask-options]=\"_hexMaskOptions\">\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\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.r\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\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\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.g\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\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\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.b\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\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\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"1\"\r\n          [(value)]=\"_rgba.a\"\r\n          [decimals]=\"2\"\r\n          [step]=\"0.1\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          [showSpinButtons]=\"false\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>A</label>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <button\r\n    class=\"ax-general-button ax-button-icon ax-sm\"\r\n    (click)=\"_handleChangeInputMode()\"\r\n    [disabled]=\"_parent.disabled\">\r\n    <span class=\"ax-icon ax-icon-unfold-more\"></span>\r\n  </button>\r\n</ng-container>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXColorComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [AXColorComponent]
                 }] }]; } });
 
-class AXColorPalettePickerComponent extends AXBaseComponent {
-    _parent;
-    _rgba = {
-        r: 0,
-        g: 0,
-        b: 0,
-        a: 0,
-    };
-    _gradient = 0;
-    _bgColor = '#F00';
-    _gradientColors = [
-        { color: 'rgb(255, 0, 0)', pos: 0 },
-        { color: 'rgb(255, 255, 0)', pos: 0.17 },
-        { color: 'rgb(0, 255, 0)', pos: 0.33 },
-        { color: 'rgb(0, 255, 255)', pos: 0.5 },
-        { color: 'rgb(0, 0, 255)', pos: 0.67 },
-        { color: 'rgb(255, 0, 255)', pos: 0.83 },
-        { color: 'rgb(255, 0, 0)', pos: 1 },
-    ];
-    dragPosition = { x: 0, y: 0 };
-    constructor(_elementRef, _cdr, _parent) {
-        super(_elementRef, _cdr);
-        this._parent = _parent;
-        _parent._onInternalColorChanged$
-            .pipe(distinctUntilChanged())
-            .subscribe((e) => {
-            if (!e.color) {
-                this._rgba = {
-                    r: 0,
-                    g: 0,
-                    b: 0,
-                    a: 0,
-                };
-            }
-            else {
-                if (!AXColorUtil.equal(e.color, this._rgba)) {
-                    Object.assign(this._rgba, AXColorUtil.to(e.color, 'rgba'));
-                }
-            }
-            this.setHSV();
-            _cdr.detectChanges();
-        });
-    }
-    setHSV() {
-        const hsv = AXColorUtil.to(this._rgba, 'hsva');
-        this._bgColor = AXColorUtil.toString({ h: hsv.h, s: 1, v: 1, a: this._rgba.a }, 'rgba');
-        this.setPointerByPercent(hsv.s * 100, hsv.v * 100);
-    }
-    _handleAlphaChanged(e) {
-        if (e.value != null && e.value != this._rgba.a) {
-            const { r, g, b } = this._rgba;
-            const _color = `rgba(${r},${g},${b},${e.value})`;
-            this._parent._setUserInteraction();
-            this._parent._onInternalColorChanged$.next({
-                color: AXColorUtil.toString(_color, 'rgba'),
-                sender: this,
-            });
-        }
-    }
-    _handleGradientChanged(e) {
-        if (e.value != null && e.value != this._gradient) {
-            const gradient = AXColorUtil.gradient(this._gradientColors);
-            const colors = gradient.rgb(100);
-            const { s, v } = AXColorUtil.to(this._rgba, "hsva");
-            const { h } = colors[e.value].toHsv();
-            this._parent._setUserInteraction();
-            this._parent._onInternalColorChanged$.next({
-                color: AXColorUtil.toString({ h, s, v, a: this._rgba.a }, 'rgba'),
-                sender: this,
-            });
-        }
-    }
-    _handleSurfaceClick(e) {
-        const surface = this._getHostElement().querySelector(".ax-color-picker-overlay");
-        const sb = surface.getBoundingClientRect();
-        const pointer = this._getHostElement().querySelector(".ax-color-picker-pointer");
-        const pb = pointer.getBoundingClientRect();
-        let x = e.offsetX;
-        let y = e.offsetY;
-        this.setColorByXY(x, y);
-    }
-    _handleDrag() {
-        const surface = this._getHostElement().querySelector(".ax-color-picker-overlay");
-        const sb = surface.getBoundingClientRect();
-        const pointer = this._getHostElement().querySelector(".ax-color-picker-pointer");
-        const pb = pointer.getBoundingClientRect();
-        const w = (pb.width / 2);
-        let x = (pb.left - sb.left) + w;
-        let y = (pb.top - sb.top) + w;
-        //
-        x = x < 0 ? 0 : x;
-        x = x > sb.width ? sb.width : x;
-        //
-        y = y < 0 ? 0 : y;
-        y = y > sb.height ? sb.height : y;
-        //
-        this.setColorByXY(x, y);
-    }
-    setColorByXY(x, y) {
-        const surface = this._getHostElement().querySelector(".ax-color-picker-overlay");
-        const sb = surface.getBoundingClientRect();
-        //
-        const { h } = AXColorUtil.to(this._bgColor, "hsva");
-        const hsv = {
-            h,
-            s: (x / sb.width),
-            v: ((sb.height - y) / sb.height)
-        };
-        this._parent._onInternalColorChanged$.next({
-            color: AXColorUtil.toString(hsv, 'rgba'),
-            sender: this,
-        });
-    }
-    setPointerByPercent(x, y) {
-        const surface = this._getHostElement().querySelector(".ax-color-picker-overlay");
-        const sb = surface.getBoundingClientRect();
-        const pointer = this._getHostElement().querySelector(".ax-color-picker-pointer");
-        const pb = pointer.getBoundingClientRect();
-        const w = (pb.width / 2);
-        const width = sb.width; //+ pb.width
-        const height = sb.height; // + pb.width
-        this.dragPosition = {
-            x: ((x * width) / 100) - w,
-            y: (height - (((y * height)) / 100)) - w
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPalettePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXColorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker", host: { classAttribute: "ax-color-palette-picker" }, providers: [
-            {
-                provide: AXColorPaletteChildComponent,
-                useExisting: AXColorPalettePickerComponent,
-            },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-color-picker-overlay-trans\">\r\n    <div class=\"ax-color-picker-overlay\" [style.background-color]=\"_bgColor\">\r\n        <div class=\"ax-color-picker-overlay-g1\"></div>\r\n        <div class=\"ax-color-picker-overlay-g2\" (click)=\"_handleSurfaceClick($event)\"></div>\r\n        <div class=\"ax-color-picker-pointer\" cdkDrag cdkDragBoundary=\".ax-color-picker-overlay\" [cdkDragFreeDragPosition]=\"dragPosition\" (cdkDragEnded)=\"_handleDrag()\"></div>\r\n    </div>\r\n</div>\r\n<ax-range-slider class=\"ax-color-picker-gradient\" [minValue]=\"0\" [maxValue]=\"99\" [step]=\"1\" [value]=\"_gradient\" \r\n    (onValueChanged)=\"_handleGradientChanged($event)\">\r\n</ax-range-slider>\r\n<ax-range-slider class=\"ax-color-picker-transparent\" [minValue]=\"0\" [maxValue]=\"1\" [step]=\"0.01\" [value]=\"_rgba.a\"\r\n    (onValueChanged)=\"_handleAlphaChanged($event)\">\r\n</ax-range-slider>", dependencies: [{ kind: "component", type: i1$1.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["readonly", "allowNull", "value", "name", "checked", "minValue", "maxValue", "step", "color", "oriantaion"], outputs: ["valueChange", "onValueChanged", "colorChange"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPalettePickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-color-palette-picker', host: { class: 'ax-color-palette-picker' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: AXColorPaletteChildComponent,
-                            useExisting: AXColorPalettePickerComponent,
-                        },
-                    ], template: "<div class=\"ax-color-picker-overlay-trans\">\r\n    <div class=\"ax-color-picker-overlay\" [style.background-color]=\"_bgColor\">\r\n        <div class=\"ax-color-picker-overlay-g1\"></div>\r\n        <div class=\"ax-color-picker-overlay-g2\" (click)=\"_handleSurfaceClick($event)\"></div>\r\n        <div class=\"ax-color-picker-pointer\" cdkDrag cdkDragBoundary=\".ax-color-picker-overlay\" [cdkDragFreeDragPosition]=\"dragPosition\" (cdkDragEnded)=\"_handleDrag()\"></div>\r\n    </div>\r\n</div>\r\n<ax-range-slider class=\"ax-color-picker-gradient\" [minValue]=\"0\" [maxValue]=\"99\" [step]=\"1\" [value]=\"_gradient\" \r\n    (onValueChanged)=\"_handleGradientChanged($event)\">\r\n</ax-range-slider>\r\n<ax-range-slider class=\"ax-color-picker-transparent\" [minValue]=\"0\" [maxValue]=\"1\" [step]=\"0.01\" [value]=\"_rgba.a\"\r\n    (onValueChanged)=\"_handleAlphaChanged($event)\">\r\n</ax-range-slider>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXColorComponent, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [AXColorComponent]
+class AXColorPalettePickerComponent extends AXBaseComponent {
+    _parent;
+    _rgba = {
+        r: 0,
+        g: 0,
+        b: 0,
+        a: 0,
+    };
+    _gradient = 0;
+    _bgColor = '#F00';
+    _gradientColors = [
+        { color: 'rgb(255, 0, 0)', pos: 0 },
+        { color: 'rgb(255, 255, 0)', pos: 0.17 },
+        { color: 'rgb(0, 255, 0)', pos: 0.33 },
+        { color: 'rgb(0, 255, 255)', pos: 0.5 },
+        { color: 'rgb(0, 0, 255)', pos: 0.67 },
+        { color: 'rgb(255, 0, 255)', pos: 0.83 },
+        { color: 'rgb(255, 0, 0)', pos: 1 },
+    ];
+    dragPosition = { x: 0, y: 0 };
+    constructor(_elementRef, _cdr, _parent) {
+        super(_elementRef, _cdr);
+        this._parent = _parent;
+        _parent._onInternalColorChanged$
+            .pipe(distinctUntilChanged())
+            .subscribe((e) => {
+            if (!e.color) {
+                this._rgba = {
+                    r: 0,
+                    g: 0,
+                    b: 0,
+                    a: 0,
+                };
+            }
+            else {
+                if (!AXColorUtil.equal(e.color, this._rgba)) {
+                    Object.assign(this._rgba, AXColorUtil.to(e.color, 'rgba'));
+                }
+            }
+            this.setHSV();
+            _cdr.detectChanges();
+        });
+    }
+    setHSV() {
+        const hsv = AXColorUtil.to(this._rgba, 'hsva');
+        this._bgColor = AXColorUtil.toString({ h: hsv.h, s: 1, v: 1, a: this._rgba.a }, 'rgba');
+        this.setPointerByPercent(hsv.s * 100, hsv.v * 100);
+    }
+    _handleAlphaChanged(e) {
+        if (e.value != null && e.value != this._rgba.a) {
+            const { r, g, b } = this._rgba;
+            const _color = `rgba(${r},${g},${b},${e.value})`;
+            this._parent._setUserInteraction();
+            this._parent._onInternalColorChanged$.next({
+                color: AXColorUtil.toString(_color, 'rgba'),
+                sender: this,
+            });
+        }
+    }
+    _handleGradientChanged(e) {
+        if (e.value != null && e.value != this._gradient) {
+            const gradient = AXColorUtil.gradient(this._gradientColors);
+            const colors = gradient.rgb(100);
+            const { s, v } = AXColorUtil.to(this._rgba, "hsva");
+            const { h } = colors[e.value].toHsv();
+            this._parent._setUserInteraction();
+            this._parent._onInternalColorChanged$.next({
+                color: AXColorUtil.toString({ h, s, v, a: this._rgba.a }, 'rgba'),
+                sender: this,
+            });
+        }
+    }
+    _handleSurfaceClick(e) {
+        const surface = this._getHostElement().querySelector(".ax-color-picker-overlay");
+        const sb = surface.getBoundingClientRect();
+        const pointer = this._getHostElement().querySelector(".ax-color-picker-pointer");
+        const pb = pointer.getBoundingClientRect();
+        let x = e.offsetX;
+        let y = e.offsetY;
+        this.setColorByXY(x, y);
+    }
+    _handleDrag() {
+        const surface = this._getHostElement().querySelector(".ax-color-picker-overlay");
+        const sb = surface.getBoundingClientRect();
+        const pointer = this._getHostElement().querySelector(".ax-color-picker-pointer");
+        const pb = pointer.getBoundingClientRect();
+        const w = (pb.width / 2);
+        let x = (pb.left - sb.left) + w;
+        let y = (pb.top - sb.top) + w;
+        //
+        x = x < 0 ? 0 : x;
+        x = x > sb.width ? sb.width : x;
+        //
+        y = y < 0 ? 0 : y;
+        y = y > sb.height ? sb.height : y;
+        //
+        this.setColorByXY(x, y);
+    }
+    setColorByXY(x, y) {
+        const surface = this._getHostElement().querySelector(".ax-color-picker-overlay");
+        const sb = surface.getBoundingClientRect();
+        //
+        const { h } = AXColorUtil.to(this._bgColor, "hsva");
+        const hsv = {
+            h,
+            s: (x / sb.width),
+            v: ((sb.height - y) / sb.height)
+        };
+        this._parent._onInternalColorChanged$.next({
+            color: AXColorUtil.toString(hsv, 'rgba'),
+            sender: this,
+        });
+    }
+    setPointerByPercent(x, y) {
+        const surface = this._getHostElement().querySelector(".ax-color-picker-overlay");
+        const sb = surface.getBoundingClientRect();
+        const pointer = this._getHostElement().querySelector(".ax-color-picker-pointer");
+        const pb = pointer.getBoundingClientRect();
+        const w = (pb.width / 2);
+        const width = sb.width; //+ pb.width
+        const height = sb.height; // + pb.width
+        this.dragPosition = {
+            x: ((x * width) / 100) - w,
+            y: (height - (((y * height)) / 100)) - w
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPalettePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXColorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker", host: { classAttribute: "ax-color-palette-picker" }, providers: [
+            {
+                provide: AXColorPaletteChildComponent,
+                useExisting: AXColorPalettePickerComponent,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-color-picker-overlay-trans\">\r\n    <div class=\"ax-color-picker-overlay\" [style.background-color]=\"_bgColor\">\r\n        <div class=\"ax-color-picker-overlay-g1\"></div>\r\n        <div class=\"ax-color-picker-overlay-g2\" (click)=\"_handleSurfaceClick($event)\"></div>\r\n        <div class=\"ax-color-picker-pointer\" cdkDrag cdkDragBoundary=\".ax-color-picker-overlay\" [cdkDragFreeDragPosition]=\"dragPosition\" (cdkDragEnded)=\"_handleDrag()\"></div>\r\n    </div>\r\n</div>\r\n<ax-range-slider class=\"ax-color-picker-gradient\" [minValue]=\"0\" [maxValue]=\"99\" [step]=\"1\" [value]=\"_gradient\" \r\n    (onValueChanged)=\"_handleGradientChanged($event)\">\r\n</ax-range-slider>\r\n<ax-range-slider class=\"ax-color-picker-transparent\" [minValue]=\"0\" [maxValue]=\"1\" [step]=\"0.01\" [value]=\"_rgba.a\"\r\n    (onValueChanged)=\"_handleAlphaChanged($event)\">\r\n</ax-range-slider>", dependencies: [{ kind: "component", type: i1$1.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["readonly", "allowNull", "value", "name", "checked", "minValue", "maxValue", "step", "color", "oriantaion"], outputs: ["valueChange", "onValueChanged", "colorChange"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPalettePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-color-palette-picker', host: { class: 'ax-color-palette-picker' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: AXColorPaletteChildComponent,
+                            useExisting: AXColorPalettePickerComponent,
+                        },
+                    ], template: "<div class=\"ax-color-picker-overlay-trans\">\r\n    <div class=\"ax-color-picker-overlay\" [style.background-color]=\"_bgColor\">\r\n        <div class=\"ax-color-picker-overlay-g1\"></div>\r\n        <div class=\"ax-color-picker-overlay-g2\" (click)=\"_handleSurfaceClick($event)\"></div>\r\n        <div class=\"ax-color-picker-pointer\" cdkDrag cdkDragBoundary=\".ax-color-picker-overlay\" [cdkDragFreeDragPosition]=\"dragPosition\" (cdkDragEnded)=\"_handleDrag()\"></div>\r\n    </div>\r\n</div>\r\n<ax-range-slider class=\"ax-color-picker-gradient\" [minValue]=\"0\" [maxValue]=\"99\" [step]=\"1\" [value]=\"_gradient\" \r\n    (onValueChanged)=\"_handleGradientChanged($event)\">\r\n</ax-range-slider>\r\n<ax-range-slider class=\"ax-color-picker-transparent\" [minValue]=\"0\" [maxValue]=\"1\" [step]=\"0.01\" [value]=\"_rgba.a\"\r\n    (onValueChanged)=\"_handleAlphaChanged($event)\">\r\n</ax-range-slider>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXColorComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [AXColorComponent]
                 }] }]; } });
 
-class AXColorPalettePreviewComponent extends AXBaseComponent {
-    _parent;
-    _zone;
-    constructor(_elementRef, _cdr, _parent, _zone) {
-        super(_elementRef, _cdr);
-        this._parent = _parent;
-        this._zone = _zone;
-        _parent._onInternalColorChanged$
-            .pipe(distinctUntilChanged())
-            .subscribe((e) => {
-            _zone.runOutsideAngular(() => {
-                this._getInnerElement().style.backgroundColor = e.color;
-                this._getInnerElement().innerText = AXColorUtil.toString(e.color);
-                const color = AXColorUtil.toString(e.color, 'hex');
-                const ratio = AXColorUtil.contrastToWhite(color);
-                this._getHostElement().style.color = !(ratio > 2.0) ? '#000' : '#fff';
-            });
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPalettePreviewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXColorComponent, optional: true }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview", host: { classAttribute: "ax-color-palette-preview" }, providers: [
-            {
-                provide: AXColorPaletteChildComponent,
-                useExisting: AXColorPalettePreviewComponent,
-            },
+class AXColorPalettePreviewComponent extends AXBaseComponent {
+    _parent;
+    _zone;
+    constructor(_elementRef, _cdr, _parent, _zone) {
+        super(_elementRef, _cdr);
+        this._parent = _parent;
+        this._zone = _zone;
+        _parent._onInternalColorChanged$
+            .pipe(distinctUntilChanged())
+            .subscribe((e) => {
+            _zone.runOutsideAngular(() => {
+                this._getInnerElement().style.backgroundColor = e.color;
+                this._getInnerElement().innerText = AXColorUtil.toString(e.color);
+                const color = AXColorUtil.toString(e.color, 'hex');
+                const ratio = AXColorUtil.contrastToWhite(color);
+                this._getHostElement().style.color = !(ratio > 2.0) ? '#000' : '#fff';
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPalettePreviewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXColorComponent, optional: true }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview", host: { classAttribute: "ax-color-palette-preview" }, providers: [
+            {
+                provide: AXColorPaletteChildComponent,
+                useExisting: AXColorPalettePreviewComponent,
+            },
         ], usesInheritance: true, ngImport: i0, template: `<div
     class="palette-preview-overlay"
     [class.ax-state-disabled]="_parent.disabled"
-  ></div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPalettePreviewComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-color-palette-preview',
+  ></div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPalettePreviewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-color-palette-preview',
                     template: `<div
     class="palette-preview-overlay"
     [class.ax-state-disabled]="_parent.disabled"
-  ></div>`,
-                    host: { class: 'ax-color-palette-preview' },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [
-                        {
-                            provide: AXColorPaletteChildComponent,
-                            useExisting: AXColorPalettePreviewComponent,
-                        },
-                    ],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXColorComponent, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [AXColorComponent]
+  ></div>`,
+                    host: { class: 'ax-color-palette-preview' },
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: AXColorPaletteChildComponent,
+                            useExisting: AXColorPalettePreviewComponent,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXColorComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [AXColorComponent]
                 }] }, { type: i0.NgZone }]; } });
 
-class AXColorPaletteSwatchesComponent extends AXBaseComponent {
-    _parent;
-    _selected;
-    colors = [];
-    constructor(_elementRef, _cdr, _parent) {
-        super(_elementRef, _cdr);
-        this._parent = _parent;
-        _parent?._onInternalColorChanged$
-            .pipe(distinctUntilChanged())
-            .subscribe(e => {
-            this._selected = AXColorUtil.toString(e.color, 'hex').toLowerCase();
-            this._cdr.detectChanges();
-        });
-    }
-    onInit() {
-        const isFav = this._getHostElement().tagName.toLowerCase() == 'ax-color-palette-favorite';
-        if (!isFav && this.colors.length == 0) {
-            this.colors = this._defaultPalette.map(c => this._format(c));
-        }
-    }
-    _handleClick(e, color) {
-        if (this._parent.disabled || this._parent.readonly)
-            return;
-        this._parent._setUserInteraction();
-        this._parent._onInternalColorChanged$.next({
-            color: color.code,
-            sender: this
-        });
-    }
-    _format(color) {
-        return {
-            code: color.code.toLowerCase(),
-        };
-    }
-    _defaultPalette = [
-        { code: '#ffffff' },
-        { code: '#000000' },
-        { code: '#9E9E9E' },
-        { code: '#FFC107' },
-        { code: '#607D8B' },
-        { code: '#2196F3' },
-        { code: '#FF5722' },
-        { code: '#4CAF50' },
-        { code: '#9c27b0' },
-        { code: '#3F51B5' },
-        // Amber
-        { code: '#fff8e1' },
-        { code: '#ffecb3' },
-        { code: '#ffe082' },
-        { code: '#ffd54f' },
-        { code: '#ffca28' },
-        { code: '#ffc107' },
-        { code: '#ffb300' },
-        { code: '#ffa000' },
-        { code: '#ff8f00' },
-        { code: '#ff6f00' },
-        // Blue Grey
-        { code: '#ECEFF1' },
-        { code: '#CFD8DC' },
-        { code: '#B0BEC5' },
-        { code: '#90A4AE' },
-        { code: '#78909C' },
-        { code: '#607D8B' },
-        { code: '#546E7A' },
-        { code: '#455A64' },
-        { code: '#37474F' },
-        { code: '#263238' },
-        // Blue
-        { code: '#E3F2FD' },
-        { code: '#BBDEFB' },
-        { code: '#90CAF9' },
-        { code: '#64B5F6' },
-        { code: '#42A5F5' },
-        { code: '#2196F3' },
-        { code: '#1E88E5' },
-        { code: '#1976D2' },
-        { code: '#1565C0' },
-        { code: '#0D47A1' },
-        // Brown
-        { code: '#EFEBE9' },
-        { code: '#D7CCC8' },
-        { code: '#BCAAA4' },
-        { code: '#A1887F' },
-        { code: '#8D6E63' },
-        { code: '#795548' },
-        { code: '#6D4C41' },
-        { code: '#5D4037' },
-        { code: '#4E342E' },
-        { code: '#3E2723' },
-        // Cyan
-        { code: '#E0F7FA' },
-        { code: '#B2EBF2' },
-        { code: '#80DEEA' },
-        { code: '#4DD0E1' },
-        { code: '#26C6DA' },
-        { code: '#00BCD4' },
-        { code: '#00ACC1' },
-        { code: '#0097A7' },
-        { code: '#00838F' },
-        { code: '#006064' },
-        // Deep Orange
-        { code: '#FBE9E7' },
-        { code: '#FFCCBC' },
-        { code: '#FFAB91' },
-        { code: '#FF8A65' },
-        { code: '#FF7043' },
-        { code: '#FF5722' },
-        { code: '#F4511E' },
-        { code: '#E64A19' },
-        { code: '#D84315' },
-        { code: '#BF360C' },
-        // Deep Purple
-        { code: '#EDE7F6' },
-        { code: '#D1C4E9' },
-        { code: '#B39DDB' },
-        { code: '#9575CD' },
-        { code: '#7E57C2' },
-        { code: '#673AB7' },
-        { code: '#5E35B1' },
-        { code: '#512DA8' },
-        { code: '#4527A0' },
-        { code: '#311B92' },
-        // Green
-        { code: '#E8F5E9' },
-        { code: '#C8E6C9' },
-        { code: '#A5D6A7' },
-        { code: '#81C784' },
-        { code: '#66BB6A' },
-        { code: '#4CAF50' },
-        { code: '#43A047' },
-        { code: '#388E3C' },
-        { code: '#2E7D32' },
-        { code: '#1B5E20' },
-        // Grey
-        { code: '#FAFAFA' },
-        { code: '#F5F5F5' },
-        { code: '#EEEEEE' },
-        { code: '#E0E0E0' },
-        { code: '#BDBDBD' },
-        { code: '#9E9E9E' },
-        { code: '#757575' },
-        { code: '#616161' },
-        { code: '#424242' },
-        { code: '#212121' },
-        // Indigo
-        { code: '#E8EAF6' },
-        { code: '#C5CAE9' },
-        { code: '#9FA8DA' },
-        { code: '#7986CB' },
-        { code: '#5C6BC0' },
-        { code: '#3F51B5' },
-        { code: '#3949AB' },
-        { code: '#303F9F' },
-        { code: '#283593' },
-        { code: '#1A237E' },
-        // Light Blue
-        { code: '#E1F5FE' },
-        { code: '#B3E5FC' },
-        { code: '#81D4FA' },
-        { code: '#4FC3F7' },
-        { code: '#29B6F6' },
-        { code: '#03A9F4' },
-        { code: '#039BE5' },
-        { code: '#0288D1' },
-        { code: '#0277BD' },
-        { code: '#01579B' },
-        // Light Green
-        { code: '#F1F8E9' },
-        { code: '#DCEDC8' },
-        { code: '#C5E1A5' },
-        { code: '#AED581' },
-        { code: '#9CCC65' },
-        { code: '#8BC34A' },
-        { code: '#7CB342' },
-        { code: '#689F38' },
-        { code: '#558B2F' },
-        { code: '#33691E' },
-        // Lime
-        { code: '#F9FBE7' },
-        { code: '#F0F4C3' },
-        { code: '#E6EE9C' },
-        { code: '#DCE775' },
-        { code: '#D4E157' },
-        { code: '#CDDC39' },
-        { code: '#C0CA33' },
-        { code: '#AFB42B' },
-        { code: '#9E9D24' },
-        { code: '#827717' },
-        // Orange
-        { code: '#FFF3E0' },
-        { code: '#FFE0B2' },
-        { code: '#FFCC80' },
-        { code: '#FFB74D' },
-        { code: '#FFA726' },
-        { code: '#FF9800' },
-        { code: '#FB8C00' },
-        { code: '#F57C00' },
-        { code: '#EF6C00' },
-        { code: '#E65100' },
-        // Pink
-        { code: '#FCE4EC' },
-        { code: '#F8BBD0' },
-        { code: '#F48FB1' },
-        { code: '#F06292' },
-        { code: '#EC407A' },
-        { code: '#E91E63' },
-        { code: '#D81B60' },
-        { code: '#C2185B' },
-        { code: '#AD1457' },
-        { code: '#880E4F' },
-        // Purple
-        { code: '#F3E5F5' },
-        { code: '#E1BEE7' },
-        { code: '#CE93D8' },
-        { code: '#BA68C8' },
-        { code: '#AB47BC' },
-        { code: '#9C27B0' },
-        { code: '#8E24AA' },
-        { code: '#7B1FA2' },
-        { code: '#6A1B9A' },
-        { code: '#4A148C' },
-        // Red
-        { code: '#FFEBEE' },
-        { code: '#FFCDD2' },
-        { code: '#EF9A9A' },
-        { code: '#E57373' },
-        { code: '#EF5350' },
-        { code: '#F44336' },
-        { code: '#E53935' },
-        { code: '#D32F2F' },
-        { code: '#C62828' },
-        { code: '#B71C1C' },
-        // Teal
-        { code: '#E0F2F1' },
-        { code: '#B2DFDB' },
-        { code: '#80CBC4' },
-        { code: '#4DB6AC' },
-        { code: '#26A69A' },
-        { code: '#009688' },
-        { code: '#00897B' },
-        { code: '#00796B' },
-        { code: '#00695C' },
-        { code: '#004D40' },
-        // Yellow
-        { code: '#FFFDE7' },
-        { code: '#FFF9C4' },
-        { code: '#FFF59D' },
-        { code: '#FFF176' },
-        { code: '#FFEE58' },
-        { code: '#FFEB3B' },
-        { code: '#FDD835' },
-        { code: '#FBC02D' },
-        { code: '#F9A825' },
-        { code: '#F57F17' },
-    ];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPaletteSwatchesComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXColorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: { colors: "colors" }, providers: [
-            {
-                provide: AXColorPaletteChildComponent,
-                useExisting: AXColorPaletteSwatchesComponent,
-            },
+class AXColorPaletteSwatchesComponent extends AXBaseComponent {
+    _parent;
+    _selected;
+    colors = [];
+    constructor(_elementRef, _cdr, _parent) {
+        super(_elementRef, _cdr);
+        this._parent = _parent;
+        _parent?._onInternalColorChanged$
+            .pipe(distinctUntilChanged())
+            .subscribe(e => {
+            this._selected = AXColorUtil.toString(e.color, 'hex').toLowerCase();
+            this._cdr.detectChanges();
+        });
+    }
+    onInit() {
+        const isFav = this._getHostElement().tagName.toLowerCase() == 'ax-color-palette-favorite';
+        if (!isFav && this.colors.length == 0) {
+            this.colors = this._defaultPalette.map(c => this._format(c));
+        }
+    }
+    _handleClick(e, color) {
+        if (this._parent.disabled || this._parent.readonly)
+            return;
+        this._parent._setUserInteraction();
+        this._parent._onInternalColorChanged$.next({
+            color: color.code,
+            sender: this
+        });
+    }
+    _format(color) {
+        return {
+            code: color.code.toLowerCase(),
+        };
+    }
+    _defaultPalette = [
+        { code: '#ffffff' },
+        { code: '#000000' },
+        { code: '#9E9E9E' },
+        { code: '#FFC107' },
+        { code: '#607D8B' },
+        { code: '#2196F3' },
+        { code: '#FF5722' },
+        { code: '#4CAF50' },
+        { code: '#9c27b0' },
+        { code: '#3F51B5' },
+        // Amber
+        { code: '#fff8e1' },
+        { code: '#ffecb3' },
+        { code: '#ffe082' },
+        { code: '#ffd54f' },
+        { code: '#ffca28' },
+        { code: '#ffc107' },
+        { code: '#ffb300' },
+        { code: '#ffa000' },
+        { code: '#ff8f00' },
+        { code: '#ff6f00' },
+        // Blue Grey
+        { code: '#ECEFF1' },
+        { code: '#CFD8DC' },
+        { code: '#B0BEC5' },
+        { code: '#90A4AE' },
+        { code: '#78909C' },
+        { code: '#607D8B' },
+        { code: '#546E7A' },
+        { code: '#455A64' },
+        { code: '#37474F' },
+        { code: '#263238' },
+        // Blue
+        { code: '#E3F2FD' },
+        { code: '#BBDEFB' },
+        { code: '#90CAF9' },
+        { code: '#64B5F6' },
+        { code: '#42A5F5' },
+        { code: '#2196F3' },
+        { code: '#1E88E5' },
+        { code: '#1976D2' },
+        { code: '#1565C0' },
+        { code: '#0D47A1' },
+        // Brown
+        { code: '#EFEBE9' },
+        { code: '#D7CCC8' },
+        { code: '#BCAAA4' },
+        { code: '#A1887F' },
+        { code: '#8D6E63' },
+        { code: '#795548' },
+        { code: '#6D4C41' },
+        { code: '#5D4037' },
+        { code: '#4E342E' },
+        { code: '#3E2723' },
+        // Cyan
+        { code: '#E0F7FA' },
+        { code: '#B2EBF2' },
+        { code: '#80DEEA' },
+        { code: '#4DD0E1' },
+        { code: '#26C6DA' },
+        { code: '#00BCD4' },
+        { code: '#00ACC1' },
+        { code: '#0097A7' },
+        { code: '#00838F' },
+        { code: '#006064' },
+        // Deep Orange
+        { code: '#FBE9E7' },
+        { code: '#FFCCBC' },
+        { code: '#FFAB91' },
+        { code: '#FF8A65' },
+        { code: '#FF7043' },
+        { code: '#FF5722' },
+        { code: '#F4511E' },
+        { code: '#E64A19' },
+        { code: '#D84315' },
+        { code: '#BF360C' },
+        // Deep Purple
+        { code: '#EDE7F6' },
+        { code: '#D1C4E9' },
+        { code: '#B39DDB' },
+        { code: '#9575CD' },
+        { code: '#7E57C2' },
+        { code: '#673AB7' },
+        { code: '#5E35B1' },
+        { code: '#512DA8' },
+        { code: '#4527A0' },
+        { code: '#311B92' },
+        // Green
+        { code: '#E8F5E9' },
+        { code: '#C8E6C9' },
+        { code: '#A5D6A7' },
+        { code: '#81C784' },
+        { code: '#66BB6A' },
+        { code: '#4CAF50' },
+        { code: '#43A047' },
+        { code: '#388E3C' },
+        { code: '#2E7D32' },
+        { code: '#1B5E20' },
+        // Grey
+        { code: '#FAFAFA' },
+        { code: '#F5F5F5' },
+        { code: '#EEEEEE' },
+        { code: '#E0E0E0' },
+        { code: '#BDBDBD' },
+        { code: '#9E9E9E' },
+        { code: '#757575' },
+        { code: '#616161' },
+        { code: '#424242' },
+        { code: '#212121' },
+        // Indigo
+        { code: '#E8EAF6' },
+        { code: '#C5CAE9' },
+        { code: '#9FA8DA' },
+        { code: '#7986CB' },
+        { code: '#5C6BC0' },
+        { code: '#3F51B5' },
+        { code: '#3949AB' },
+        { code: '#303F9F' },
+        { code: '#283593' },
+        { code: '#1A237E' },
+        // Light Blue
+        { code: '#E1F5FE' },
+        { code: '#B3E5FC' },
+        { code: '#81D4FA' },
+        { code: '#4FC3F7' },
+        { code: '#29B6F6' },
+        { code: '#03A9F4' },
+        { code: '#039BE5' },
+        { code: '#0288D1' },
+        { code: '#0277BD' },
+        { code: '#01579B' },
+        // Light Green
+        { code: '#F1F8E9' },
+        { code: '#DCEDC8' },
+        { code: '#C5E1A5' },
+        { code: '#AED581' },
+        { code: '#9CCC65' },
+        { code: '#8BC34A' },
+        { code: '#7CB342' },
+        { code: '#689F38' },
+        { code: '#558B2F' },
+        { code: '#33691E' },
+        // Lime
+        { code: '#F9FBE7' },
+        { code: '#F0F4C3' },
+        { code: '#E6EE9C' },
+        { code: '#DCE775' },
+        { code: '#D4E157' },
+        { code: '#CDDC39' },
+        { code: '#C0CA33' },
+        { code: '#AFB42B' },
+        { code: '#9E9D24' },
+        { code: '#827717' },
+        // Orange
+        { code: '#FFF3E0' },
+        { code: '#FFE0B2' },
+        { code: '#FFCC80' },
+        { code: '#FFB74D' },
+        { code: '#FFA726' },
+        { code: '#FF9800' },
+        { code: '#FB8C00' },
+        { code: '#F57C00' },
+        { code: '#EF6C00' },
+        { code: '#E65100' },
+        // Pink
+        { code: '#FCE4EC' },
+        { code: '#F8BBD0' },
+        { code: '#F48FB1' },
+        { code: '#F06292' },
+        { code: '#EC407A' },
+        { code: '#E91E63' },
+        { code: '#D81B60' },
+        { code: '#C2185B' },
+        { code: '#AD1457' },
+        { code: '#880E4F' },
+        // Purple
+        { code: '#F3E5F5' },
+        { code: '#E1BEE7' },
+        { code: '#CE93D8' },
+        { code: '#BA68C8' },
+        { code: '#AB47BC' },
+        { code: '#9C27B0' },
+        { code: '#8E24AA' },
+        { code: '#7B1FA2' },
+        { code: '#6A1B9A' },
+        { code: '#4A148C' },
+        // Red
+        { code: '#FFEBEE' },
+        { code: '#FFCDD2' },
+        { code: '#EF9A9A' },
+        { code: '#E57373' },
+        { code: '#EF5350' },
+        { code: '#F44336' },
+        { code: '#E53935' },
+        { code: '#D32F2F' },
+        { code: '#C62828' },
+        { code: '#B71C1C' },
+        // Teal
+        { code: '#E0F2F1' },
+        { code: '#B2DFDB' },
+        { code: '#80CBC4' },
+        { code: '#4DB6AC' },
+        { code: '#26A69A' },
+        { code: '#009688' },
+        { code: '#00897B' },
+        { code: '#00796B' },
+        { code: '#00695C' },
+        { code: '#004D40' },
+        // Yellow
+        { code: '#FFFDE7' },
+        { code: '#FFF9C4' },
+        { code: '#FFF59D' },
+        { code: '#FFF176' },
+        { code: '#FFEE58' },
+        { code: '#FFEB3B' },
+        { code: '#FDD835' },
+        { code: '#FBC02D' },
+        { code: '#F9A825' },
+        { code: '#F57F17' },
+    ];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPaletteSwatchesComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXColorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: { colors: "colors" }, providers: [
+            {
+                provide: AXColorPaletteChildComponent,
+                useExisting: AXColorPaletteSwatchesComponent,
+            },
         ], usesInheritance: true, ngImport: i0, template: ` <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>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPaletteSwatchesComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-color-palette-swatches, ax-color-palette-favorite',
+    (click)="_handleClick($event, color)"></div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPaletteSwatchesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-color-palette-swatches, ax-color-palette-favorite',
                     template: ` <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>`,
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [
-                        {
-                            provide: AXColorPaletteChildComponent,
-                            useExisting: AXColorPaletteSwatchesComponent,
-                        },
-                    ],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXColorComponent, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [AXColorComponent]
-                }] }]; }, propDecorators: { colors: [{
-                type: Input
+    (click)="_handleClick($event, color)"></div>`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: AXColorPaletteChildComponent,
+                            useExisting: AXColorPaletteSwatchesComponent,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXColorComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [AXColorComponent]
+                }] }]; }, propDecorators: { colors: [{
+                type: Input
             }] } });
 
-class AXColorPalleteComponent extends AXBaseValueComponentMixin {
-    _onInternalColorChanged$ = new Subject();
-    _children;
-    _onValueChanged(oldValue, newValue) {
-        super._onValueChanged(oldValue, newValue);
-        this._onInternalColorChanged$.next({
-            color: this.value,
-            mode: newValue?.startsWith('#') ? "hex" : "rgba",
-            sender: this
-        });
-    }
-    ngAfterContentInit() {
-        this._children.changes.subscribe(() => {
-            this._onInternalColorChanged$.next({
-                color: this.value,
-                sender: this
-            });
-        });
-    }
-    onViewInit() {
-        this._onInternalColorChanged$.next({
-            color: this.value,
-            sender: this
-        });
-    }
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-        //
-        this._onInternalColorChanged$.pipe(distinctUntilChanged()).subscribe(e => {
-            if (this.disabled || this.readonly)
-                return;
-            this.value = e.color;
-            cdr.markForCheck();
-        });
-    }
-    get __hostDisabled() {
-        return this.disabled;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPalleteComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AXColorPalleteComponent, selector: "ax-color-palette", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", state: "state", name: "name", checked: "checked" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged" }, host: { properties: { "class.ax-state-disabled": "this.__hostDisabled" } }, providers: [
-            { provide: AXColorComponent, useExisting: AXColorPalleteComponent },
-        ], queries: [{ propertyName: "_children", predicate: AXColorPaletteChildComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select='ax-header'></ng-content>\r\n\r\n<ng-container [ngTemplateOutlet]=\"default\" *ngIf=\"!_children.length\"></ng-container>\r\n<ng-container [ngTemplateOutlet]=\"custom\" *ngIf=\"_children.length\"></ng-container>\r\n\r\n<ng-template #custom>\r\n    <ng-content select='ax-color-palette-preview'></ng-content>\r\n    <ng-content select='ax-color-palette-picker'></ng-content>\r\n    <ng-content select='ax-color-palette-swatches'></ng-content>\r\n    <ng-content select='ax-color-palette-favorite'></ng-content>\r\n    <ng-content select='ax-color-palette-input'></ng-content>\r\n</ng-template>\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    <ax-color-palette-input></ax-color-palette-input>\r\n</ng-template>\r\n\r\n<ng-content select='ax-footer'></ng-content>\r\n\r\n\r\n", styles: ["ax-color-palette{display:flex;flex-direction:column;border:1px solid;background-color:rgba(var(--ax-color-surface));border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);width:18rem}@media (min-width: 600px){ax-color-palette{width:20rem!important}}@media (min-width: 1200px){ax-color-palette{width:18rem!important}}@media (max-width: 599px){ax-color-palette{width:100%!important}}ax-color-palette.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-color-palette.ax-state-disabled ax-color-palette-swatches div:hover,ax-color-palette.ax-state-disabled ax-color-palette-swatches div.ax-state-selected,ax-color-palette.ax-state-disabled ax-color-palette-favorite div:hover,ax-color-palette.ax-state-disabled ax-color-palette-favorite div.ax-state-selected{opacity:.5;cursor:not-allowed}ax-color-palette ax-header,ax-color-palette ax-footer{padding:.75rem;border-top-width:1px;display:flex}ax-color-palette ax-color-palette-preview{position:relative;width:100%;height:6rem;gap:.5;border-top-left-radius:var(--ax-rounded-border-default);border-top-right-radius:var(--ax-rounded-border-default);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;left:0;width:100%;height:100%;display:flex;align-items:center;text-transform:uppercase;justify-content:center;border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default));box-shadow:0 1px 8px #00000029;text-shadow:0px 0px 14px rgba(0,0,0,.5)}ax-color-palette ax-color-palette-favorite{display:block;border-top:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;padding:.5rem;grid-template-columns:repeat(10,minmax(0,1fr));max-height:9rem;overflow-x:hidden;gap:.5rem}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:99rem;border:1px solid rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{content:\"\";padding-top:100%;float:left}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{content:\"\";display:block;clear:both}ax-color-palette ax-color-palette-swatches div:hover,ax-color-palette ax-color-palette-swatches div.ax-state-selected,ax-color-palette ax-color-palette-favorite div:hover,ax-color-palette ax-color-palette-favorite div.ax-state-selected{outline-offset:2px;outline-width:1px;outline-style:solid;outline-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-input{display:flex;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-input .palette-inputs{display:flex;flex:1 1 0%;gap:.5rem}ax-color-palette ax-color-palette-input .palette-inputs div{width:100%;text-align:center}ax-color-palette ax-color-palette-input .palette-inputs div label{margin-top:.75rem;font-size:.75rem;line-height:1.25rem}ax-color-palette ax-color-palette-picker{display:flex;flex-direction:column;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay-trans{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay{display:block;width:100%;height:8rem;position:relative}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-pointer{width:.75rem;height:.75rem;border-radius:99rem;background-color:transparent;border:1px solid rgba(var(--ax-color-background-default));position:relative;z-index:1}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{height:100%;width:100%;position:absolute;inset:0}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1{z-index:0;background:linear-gradient(to right,#fff 0%,rgba(255,255,255,0) 100%)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{z-index:1;background:linear-gradient(to bottom,transparent 0%,#000 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-gradient input{background:linear-gradient(to right,rgb(255,0,0) 0%,rgb(255,255,0) 17%,rgb(0,255,0) 33%,rgb(0,255,255) 50%,rgb(0,0,255) 67%,rgb(255,0,255) 83%,rgb(255,0,0) 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-transparent input{background-image:linear-gradient(to right,rgba(245,246,252,0),rgb(0,0,0)),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview" }, { kind: "component", type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: ["colors"] }, { kind: "component", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPalleteComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-color-palette', inputs: [
-                        'disabled',
-                        'tabIndex',
-                        'readonly',
-                        'allowNull',
-                        'value',
-                        'state',
-                        'name',
-                        'checked',
-                    ], outputs: ['onBlur', 'onFocus', 'valueChange', 'stateChange', 'onValueChanged'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        { provide: AXColorComponent, useExisting: AXColorPalleteComponent },
-                    ], template: "<ng-content select='ax-header'></ng-content>\r\n\r\n<ng-container [ngTemplateOutlet]=\"default\" *ngIf=\"!_children.length\"></ng-container>\r\n<ng-container [ngTemplateOutlet]=\"custom\" *ngIf=\"_children.length\"></ng-container>\r\n\r\n<ng-template #custom>\r\n    <ng-content select='ax-color-palette-preview'></ng-content>\r\n    <ng-content select='ax-color-palette-picker'></ng-content>\r\n    <ng-content select='ax-color-palette-swatches'></ng-content>\r\n    <ng-content select='ax-color-palette-favorite'></ng-content>\r\n    <ng-content select='ax-color-palette-input'></ng-content>\r\n</ng-template>\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    <ax-color-palette-input></ax-color-palette-input>\r\n</ng-template>\r\n\r\n<ng-content select='ax-footer'></ng-content>\r\n\r\n\r\n", styles: ["ax-color-palette{display:flex;flex-direction:column;border:1px solid;background-color:rgba(var(--ax-color-surface));border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);width:18rem}@media (min-width: 600px){ax-color-palette{width:20rem!important}}@media (min-width: 1200px){ax-color-palette{width:18rem!important}}@media (max-width: 599px){ax-color-palette{width:100%!important}}ax-color-palette.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-color-palette.ax-state-disabled ax-color-palette-swatches div:hover,ax-color-palette.ax-state-disabled ax-color-palette-swatches div.ax-state-selected,ax-color-palette.ax-state-disabled ax-color-palette-favorite div:hover,ax-color-palette.ax-state-disabled ax-color-palette-favorite div.ax-state-selected{opacity:.5;cursor:not-allowed}ax-color-palette ax-header,ax-color-palette ax-footer{padding:.75rem;border-top-width:1px;display:flex}ax-color-palette ax-color-palette-preview{position:relative;width:100%;height:6rem;gap:.5;border-top-left-radius:var(--ax-rounded-border-default);border-top-right-radius:var(--ax-rounded-border-default);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;left:0;width:100%;height:100%;display:flex;align-items:center;text-transform:uppercase;justify-content:center;border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default));box-shadow:0 1px 8px #00000029;text-shadow:0px 0px 14px rgba(0,0,0,.5)}ax-color-palette ax-color-palette-favorite{display:block;border-top:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;padding:.5rem;grid-template-columns:repeat(10,minmax(0,1fr));max-height:9rem;overflow-x:hidden;gap:.5rem}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:99rem;border:1px solid rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{content:\"\";padding-top:100%;float:left}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{content:\"\";display:block;clear:both}ax-color-palette ax-color-palette-swatches div:hover,ax-color-palette ax-color-palette-swatches div.ax-state-selected,ax-color-palette ax-color-palette-favorite div:hover,ax-color-palette ax-color-palette-favorite div.ax-state-selected{outline-offset:2px;outline-width:1px;outline-style:solid;outline-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-input{display:flex;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-input .palette-inputs{display:flex;flex:1 1 0%;gap:.5rem}ax-color-palette ax-color-palette-input .palette-inputs div{width:100%;text-align:center}ax-color-palette ax-color-palette-input .palette-inputs div label{margin-top:.75rem;font-size:.75rem;line-height:1.25rem}ax-color-palette ax-color-palette-picker{display:flex;flex-direction:column;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay-trans{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay{display:block;width:100%;height:8rem;position:relative}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-pointer{width:.75rem;height:.75rem;border-radius:99rem;background-color:transparent;border:1px solid rgba(var(--ax-color-background-default));position:relative;z-index:1}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{height:100%;width:100%;position:absolute;inset:0}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1{z-index:0;background:linear-gradient(to right,#fff 0%,rgba(255,255,255,0) 100%)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{z-index:1;background:linear-gradient(to bottom,transparent 0%,#000 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-gradient input{background:linear-gradient(to right,rgb(255,0,0) 0%,rgb(255,255,0) 17%,rgb(0,255,0) 33%,rgb(0,255,255) 50%,rgb(0,0,255) 67%,rgb(255,0,255) 83%,rgb(255,0,0) 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-transparent input{background-image:linear-gradient(to right,rgba(245,246,252,0),rgb(0,0,0)),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _children: [{
-                type: ContentChildren,
-                args: [AXColorPaletteChildComponent]
-            }], __hostDisabled: [{
-                type: HostBinding,
-                args: ['class.ax-state-disabled']
+class AXColorPalleteComponent extends AXBaseValueComponentMixin {
+    _onInternalColorChanged$ = new Subject();
+    _children;
+    _onValueChanged(oldValue, newValue) {
+        super._onValueChanged(oldValue, newValue);
+        this._onInternalColorChanged$.next({
+            color: this.value,
+            mode: newValue?.startsWith('#') ? "hex" : "rgba",
+            sender: this
+        });
+    }
+    ngAfterContentInit() {
+        this._children.changes.subscribe(() => {
+            this._onInternalColorChanged$.next({
+                color: this.value,
+                sender: this
+            });
+        });
+    }
+    onViewInit() {
+        this._onInternalColorChanged$.next({
+            color: this.value,
+            sender: this
+        });
+    }
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        //
+        this._onInternalColorChanged$.pipe(distinctUntilChanged()).subscribe(e => {
+            if (this.disabled || this.readonly)
+                return;
+            this.value = e.color;
+            cdr.markForCheck();
+        });
+    }
+    get __hostDisabled() {
+        return this.disabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPalleteComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AXColorPalleteComponent, selector: "ax-color-palette", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", state: "state", name: "name", checked: "checked" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged" }, host: { properties: { "class.ax-state-disabled": "this.__hostDisabled" } }, providers: [
+            { provide: AXColorComponent, useExisting: AXColorPalleteComponent },
+        ], queries: [{ propertyName: "_children", predicate: AXColorPaletteChildComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select='ax-header'></ng-content>\r\n\r\n<ng-container [ngTemplateOutlet]=\"default\" *ngIf=\"!_children.length\"></ng-container>\r\n<ng-container [ngTemplateOutlet]=\"custom\" *ngIf=\"_children.length\"></ng-container>\r\n\r\n<ng-template #custom>\r\n    <ng-content select='ax-color-palette-preview'></ng-content>\r\n    <ng-content select='ax-color-palette-picker'></ng-content>\r\n    <ng-content select='ax-color-palette-swatches'></ng-content>\r\n    <ng-content select='ax-color-palette-favorite'></ng-content>\r\n    <ng-content select='ax-color-palette-input'></ng-content>\r\n</ng-template>\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    <ax-color-palette-input></ax-color-palette-input>\r\n</ng-template>\r\n\r\n<ng-content select='ax-footer'></ng-content>\r\n\r\n\r\n", styles: ["ax-color-palette{display:flex;flex-direction:column;border:1px solid;background-color:rgba(var(--ax-color-surface));border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);width:18rem}@media (min-width: 600px){ax-color-palette{width:20rem!important}}@media (min-width: 1200px){ax-color-palette{width:18rem!important}}@media (max-width: 599px){ax-color-palette{width:100%!important}}ax-color-palette.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-color-palette.ax-state-disabled ax-color-palette-swatches div:hover,ax-color-palette.ax-state-disabled ax-color-palette-swatches div.ax-state-selected,ax-color-palette.ax-state-disabled ax-color-palette-favorite div:hover,ax-color-palette.ax-state-disabled ax-color-palette-favorite div.ax-state-selected{opacity:.5;cursor:not-allowed}ax-color-palette ax-header,ax-color-palette ax-footer{padding:.75rem;border-top-width:1px;display:flex}ax-color-palette ax-color-palette-preview{position:relative;width:100%;height:6rem;gap:.5;border-top-left-radius:var(--ax-rounded-border-default);border-top-right-radius:var(--ax-rounded-border-default);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;left:0;width:100%;height:100%;display:flex;align-items:center;text-transform:uppercase;justify-content:center;border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default));box-shadow:0 1px 8px #00000029;text-shadow:0px 0px 14px rgba(0,0,0,.5)}ax-color-palette ax-color-palette-favorite{display:block;border-top:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;padding:.5rem;grid-template-columns:repeat(10,minmax(0,1fr));max-height:9rem;overflow-x:hidden;gap:.5rem}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:99rem;border:1px solid rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{content:\"\";padding-top:100%;float:left}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{content:\"\";display:block;clear:both}ax-color-palette ax-color-palette-swatches div:hover,ax-color-palette ax-color-palette-swatches div.ax-state-selected,ax-color-palette ax-color-palette-favorite div:hover,ax-color-palette ax-color-palette-favorite div.ax-state-selected{outline-offset:2px;outline-width:1px;outline-style:solid;outline-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-input{display:flex;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-input .palette-inputs{display:flex;flex:1 1 0%;gap:.5rem}ax-color-palette ax-color-palette-input .palette-inputs div{width:100%;text-align:center}ax-color-palette ax-color-palette-input .palette-inputs div label{margin-top:.75rem;font-size:.75rem;line-height:1.25rem}ax-color-palette ax-color-palette-picker{display:flex;flex-direction:column;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay-trans{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay{display:block;width:100%;height:8rem;position:relative}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-pointer{width:.75rem;height:.75rem;border-radius:99rem;background-color:transparent;border:1px solid rgba(var(--ax-color-background-default));position:relative;z-index:1}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{height:100%;width:100%;position:absolute;inset:0}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1{z-index:0;background:linear-gradient(to right,#fff 0%,rgba(255,255,255,0) 100%)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{z-index:1;background:linear-gradient(to bottom,transparent 0%,#000 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-gradient input{background:linear-gradient(to right,rgb(255,0,0) 0%,rgb(255,255,0) 17%,rgb(0,255,0) 33%,rgb(0,255,255) 50%,rgb(0,0,255) 67%,rgb(255,0,255) 83%,rgb(255,0,0) 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-transparent input{background-image:linear-gradient(to right,rgba(245,246,252,0),rgb(0,0,0)),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview" }, { kind: "component", type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: ["colors"] }, { kind: "component", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPalleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-color-palette', inputs: [
+                        'disabled',
+                        'tabIndex',
+                        'readonly',
+                        'allowNull',
+                        'value',
+                        'state',
+                        'name',
+                        'checked',
+                    ], outputs: ['onBlur', 'onFocus', 'valueChange', 'stateChange', 'onValueChanged'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        { provide: AXColorComponent, useExisting: AXColorPalleteComponent },
+                    ], template: "<ng-content select='ax-header'></ng-content>\r\n\r\n<ng-container [ngTemplateOutlet]=\"default\" *ngIf=\"!_children.length\"></ng-container>\r\n<ng-container [ngTemplateOutlet]=\"custom\" *ngIf=\"_children.length\"></ng-container>\r\n\r\n<ng-template #custom>\r\n    <ng-content select='ax-color-palette-preview'></ng-content>\r\n    <ng-content select='ax-color-palette-picker'></ng-content>\r\n    <ng-content select='ax-color-palette-swatches'></ng-content>\r\n    <ng-content select='ax-color-palette-favorite'></ng-content>\r\n    <ng-content select='ax-color-palette-input'></ng-content>\r\n</ng-template>\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    <ax-color-palette-input></ax-color-palette-input>\r\n</ng-template>\r\n\r\n<ng-content select='ax-footer'></ng-content>\r\n\r\n\r\n", styles: ["ax-color-palette{display:flex;flex-direction:column;border:1px solid;background-color:rgba(var(--ax-color-surface));border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);width:18rem}@media (min-width: 600px){ax-color-palette{width:20rem!important}}@media (min-width: 1200px){ax-color-palette{width:18rem!important}}@media (max-width: 599px){ax-color-palette{width:100%!important}}ax-color-palette.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-color-palette.ax-state-disabled ax-color-palette-swatches div:hover,ax-color-palette.ax-state-disabled ax-color-palette-swatches div.ax-state-selected,ax-color-palette.ax-state-disabled ax-color-palette-favorite div:hover,ax-color-palette.ax-state-disabled ax-color-palette-favorite div.ax-state-selected{opacity:.5;cursor:not-allowed}ax-color-palette ax-header,ax-color-palette ax-footer{padding:.75rem;border-top-width:1px;display:flex}ax-color-palette ax-color-palette-preview{position:relative;width:100%;height:6rem;gap:.5;border-top-left-radius:var(--ax-rounded-border-default);border-top-right-radius:var(--ax-rounded-border-default);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;left:0;width:100%;height:100%;display:flex;align-items:center;text-transform:uppercase;justify-content:center;border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default));box-shadow:0 1px 8px #00000029;text-shadow:0px 0px 14px rgba(0,0,0,.5)}ax-color-palette ax-color-palette-favorite{display:block;border-top:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;padding:.5rem;grid-template-columns:repeat(10,minmax(0,1fr));max-height:9rem;overflow-x:hidden;gap:.5rem}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:99rem;border:1px solid rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{content:\"\";padding-top:100%;float:left}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{content:\"\";display:block;clear:both}ax-color-palette ax-color-palette-swatches div:hover,ax-color-palette ax-color-palette-swatches div.ax-state-selected,ax-color-palette ax-color-palette-favorite div:hover,ax-color-palette ax-color-palette-favorite div.ax-state-selected{outline-offset:2px;outline-width:1px;outline-style:solid;outline-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-input{display:flex;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-input .palette-inputs{display:flex;flex:1 1 0%;gap:.5rem}ax-color-palette ax-color-palette-input .palette-inputs div{width:100%;text-align:center}ax-color-palette ax-color-palette-input .palette-inputs div label{margin-top:.75rem;font-size:.75rem;line-height:1.25rem}ax-color-palette ax-color-palette-picker{display:flex;flex-direction:column;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay-trans{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay{display:block;width:100%;height:8rem;position:relative}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-pointer{width:.75rem;height:.75rem;border-radius:99rem;background-color:transparent;border:1px solid rgba(var(--ax-color-background-default));position:relative;z-index:1}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{height:100%;width:100%;position:absolute;inset:0}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1{z-index:0;background:linear-gradient(to right,#fff 0%,rgba(255,255,255,0) 100%)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{z-index:1;background:linear-gradient(to bottom,transparent 0%,#000 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-gradient input{background:linear-gradient(to right,rgb(255,0,0) 0%,rgb(255,255,0) 17%,rgb(0,255,0) 33%,rgb(0,255,255) 50%,rgb(0,0,255) 67%,rgb(255,0,255) 83%,rgb(255,0,0) 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-transparent input{background-image:linear-gradient(to right,rgba(245,246,252,0),rgb(0,0,0)),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _children: [{
+                type: ContentChildren,
+                args: [AXColorPaletteChildComponent]
+            }], __hostDisabled: [{
+                type: HostBinding,
+                args: ['class.ax-state-disabled']
             }] } });
 
-const MODULES = [
-    AXTextBoxModule,
-    AXLabelModule,
-    AXButtonModule,
-    AXDecoratorModule,
-    AXNumberBoxModule,
-    AXRangeSliderModule,
-    DragDropModule
-];
-const CONPONENTS = [
-    AXColorPalleteComponent,
-    AXColorPalettePreviewComponent,
-    AXColorPaletteSwatchesComponent,
-    AXColorPaletteInputComponent,
-    AXColorPalettePickerComponent
-];
-class AXColorPaletteModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPaletteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: AXColorPaletteModule, declarations: [AXColorPalleteComponent,
-            AXColorPalettePreviewComponent,
-            AXColorPaletteSwatchesComponent,
-            AXColorPaletteInputComponent,
-            AXColorPalettePickerComponent], imports: [CommonModule, AXTextBoxModule,
-            AXLabelModule,
-            AXButtonModule,
-            AXDecoratorModule,
-            AXNumberBoxModule,
-            AXRangeSliderModule,
-            DragDropModule], exports: [AXColorPalleteComponent,
-            AXColorPalettePreviewComponent,
-            AXColorPaletteSwatchesComponent,
-            AXColorPaletteInputComponent,
-            AXColorPalettePickerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPaletteModule, imports: [CommonModule, MODULES] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPaletteModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [...CONPONENTS],
-                    imports: [CommonModule, ...MODULES],
-                    exports: [...CONPONENTS],
-                    providers: [],
-                }]
+const MODULES = [
+    AXTextBoxModule,
+    AXLabelModule,
+    AXButtonModule,
+    AXDecoratorModule,
+    AXNumberBoxModule,
+    AXRangeSliderModule,
+    DragDropModule
+];
+const CONPONENTS = [
+    AXColorPalleteComponent,
+    AXColorPalettePreviewComponent,
+    AXColorPaletteSwatchesComponent,
+    AXColorPaletteInputComponent,
+    AXColorPalettePickerComponent
+];
+class AXColorPaletteModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPaletteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: AXColorPaletteModule, declarations: [AXColorPalleteComponent,
+            AXColorPalettePreviewComponent,
+            AXColorPaletteSwatchesComponent,
+            AXColorPaletteInputComponent,
+            AXColorPalettePickerComponent], imports: [CommonModule, AXTextBoxModule,
+            AXLabelModule,
+            AXButtonModule,
+            AXDecoratorModule,
+            AXNumberBoxModule,
+            AXRangeSliderModule,
+            DragDropModule], exports: [AXColorPalleteComponent,
+            AXColorPalettePreviewComponent,
+            AXColorPaletteSwatchesComponent,
+            AXColorPaletteInputComponent,
+            AXColorPalettePickerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPaletteModule, imports: [CommonModule, MODULES] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPaletteModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...CONPONENTS],
+                    imports: [CommonModule, ...MODULES],
+                    exports: [...CONPONENTS],
+                    providers: [],
+                }]
         }] });
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { AXColorComponent, AXColorPaletteChildComponent, AXColorPaletteInputComponent, AXColorPaletteModule, AXColorPalettePickerComponent, AXColorPalettePreviewComponent, AXColorPaletteSwatchesComponent, AXColorPalleteComponent };