@acorex/components 16.0.2 → 17.0.1

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

@@ -0,0 +1,800 @@
+import { MXBaseComponent, MXValueComponent, AXValuableComponent } from '@acorex/components/common';
+import * as i1 from '@acorex/core/utils';
+import { AXColorUtil, AXUnsubscriber } from '@acorex/core/utils';
+import * as i0 from '@angular/core';
+import { Injectable, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, HostBinding, Input, forwardRef, ContentChildren, NgModule } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import * as i3 from '@acorex/components/text-box';
+import { AXTextBoxModule } from '@acorex/components/text-box';
+import * as i4 from '@acorex/components/number-box';
+import { AXNumberBoxModule } from '@acorex/components/number-box';
+import * as i3$1 from '@acorex/components/range-slider';
+import { AXRangeSliderModule } from '@acorex/components/range-slider';
+import * as i4$1 from '@angular/cdk/drag-drop';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { distinctUntilChanged } from 'rxjs/operators';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { AXButtonModule } from '@acorex/components/button';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import { AXLabelModule } from '@acorex/components/label';
+
+class AXColorPaletteParentComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXColorPaletteParentComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXColorPaletteParentComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXColorPaletteParentComponent, decorators: [{
+            type: Injectable
+        }] });
+class AXColorPaletteChildComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXColorPaletteChildComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXColorPaletteChildComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXColorPaletteChildComponent, decorators: [{
+            type: Injectable
+        }] });
+const AXDefaultColorPalette = [
+    { 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' },
+];
+
+class AXColorPaletteInputComponent extends MXBaseComponent {
+    constructor(_parent, _unsubscriber) {
+        super();
+        this._parent = _parent;
+        this._unsubscriber = _unsubscriber;
+        this.isValid = true;
+        this._rgba = {
+            r: 0,
+            g: 0,
+            b: 0,
+            a: 0,
+        };
+        this._hex = '';
+        this._colorMode = 'hex';
+        this._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();
+            },
+        };
+        _parent.onValueChanged
+            .pipe(_unsubscriber.takeUntilDestroy)
+            .subscribe((e) => {
+            this.applyParent(e.isUserInteraction);
+        });
+        _parent.onOptionChanged
+            .pipe(_unsubscriber.takeUntilDestroy)
+            .subscribe((e) => {
+            this.cdr.markForCheck();
+        });
+    }
+    applyParent(u = false) {
+        const value = this._parent.value;
+        if (!value) {
+            this._hex = '';
+            this._rgba = {
+                r: null,
+                g: null,
+                b: null,
+                a: null,
+            };
+        }
+        else {
+            Object.assign(this._rgba, AXColorUtil.to(value, 'rgba'));
+            if (this._colorMode != 'hex' || !this._hex) {
+                this._hex = AXColorUtil.toString(value, 'hex');
+            }
+            if (this._colorMode == 'hex') {
+                this._hex = value;
+            }
+            if (!u && this._rgba.a != 1) {
+                this._colorMode = 'rgba';
+            }
+        }
+        this.checkValid();
+        this.cdr.detectChanges();
+    }
+    ngAfterViewInit() {
+        this.applyParent();
+    }
+    _handleChangeInputMode() {
+        switch (this._colorMode) {
+            case 'rgba':
+                this._colorMode = 'hex';
+                break;
+            default:
+                this._colorMode = 'rgba';
+                break;
+        }
+    }
+    _handleRGBAValueChanged(e) {
+        if (e.isUserInteraction) {
+            this._rgba[e.name] = e.value;
+            const { r, g, b, a } = this._rgba;
+            const _color = `rgba(${r},${g},${b},${a})`;
+            this._parent.commitValue(AXColorUtil.toString(_color, 'rgba'), e.isUserInteraction);
+        }
+    }
+    _handleHEXAValueChanged(e) {
+        if (e.isUserInteraction && e.value?.trim() != this._hex?.trim()) {
+            this._parent.commitValue(e.value, e.isUserInteraction);
+        }
+    }
+    checkValid() {
+        this.isValid = AXColorUtil.isValid(this._hex);
+    }
+    get __hostClass() {
+        return `ax-color-palette-input`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXColorPaletteInputComponent, deps: [{ token: AXColorPaletteParentComponent }, { token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input", host: { properties: { "class": "this.__hostClass" } }, providers: [
+            {
+                provide: AXColorPaletteChildComponent,
+                useExisting: AXColorPaletteInputComponent,
+            },
+            AXUnsubscriber,
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"palette-inputs\">\n  @switch(_colorMode){\n\n  @case('hex'){\n  <div>\n    <ax-text-box class=\"ax-sm\" [ngModel]=\"_hex\" [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\"\n      [state]=\"isValid ? 'clear' : 'error'\" (onValueChanged)=\"_handleHEXAValueChanged($event)\"\n      [mask-options]=\"_hexMaskOptions\">\n    </ax-text-box>\n    <label>HEX</label>\n  </div>\n  }\n  @case('rgba'){\n  <div>\n    <ax-number-box class=\"ax-sm\" name=\"r\" [minValue]=\"0\" [maxValue]=\"255\" [ngModel]=\"_rgba.r\" [showSpinButtons]=\"false\"\n      [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\" (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n    </ax-number-box>\n    <label>R</label>\n  </div>\n  <div>\n    <ax-number-box class=\"ax-sm\" name=\"g\" [minValue]=\"0\" [maxValue]=\"255\" [ngModel]=\"_rgba.g\" [showSpinButtons]=\"false\"\n      [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\" (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n    </ax-number-box>\n    <label>G</label>\n  </div>\n  <div>\n    <ax-number-box class=\"ax-sm\" name=\"b\" [minValue]=\"0\" [maxValue]=\"255\" [ngModel]=\"_rgba.b\" [showSpinButtons]=\"false\"\n      [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\" (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n    </ax-number-box>\n    <label>B</label>\n  </div>\n  <div>\n    <ax-number-box class=\"ax-sm\" name=\"a\" [minValue]=\"0\" [maxValue]=\"1\" [ngModel]=\"_rgba.a\" [decimals]=\"2\" [step]=\"0.1\"\n      [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\" [showSpinButtons]=\"false\"\n      (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n    </ax-number-box>\n    <label>A</label>\n  </div>\n  }\n  }\n</div>\n<button type=\"button\" class=\"ax-general-button ax-button-rounded ax-button-icon ax-sm\"\n  (click)=\"_handleChangeInputMode()\" [disabled]=\"_parent.disabled\">\n  <span class=\"ax-icon ax-icon-unfold-more\"></span>\n</button>", dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: i4.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXColorPaletteInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-color-palette-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: AXColorPaletteChildComponent,
+                            useExisting: AXColorPaletteInputComponent,
+                        },
+                        AXUnsubscriber,
+                    ], template: "<div class=\"palette-inputs\">\n  @switch(_colorMode){\n\n  @case('hex'){\n  <div>\n    <ax-text-box class=\"ax-sm\" [ngModel]=\"_hex\" [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\"\n      [state]=\"isValid ? 'clear' : 'error'\" (onValueChanged)=\"_handleHEXAValueChanged($event)\"\n      [mask-options]=\"_hexMaskOptions\">\n    </ax-text-box>\n    <label>HEX</label>\n  </div>\n  }\n  @case('rgba'){\n  <div>\n    <ax-number-box class=\"ax-sm\" name=\"r\" [minValue]=\"0\" [maxValue]=\"255\" [ngModel]=\"_rgba.r\" [showSpinButtons]=\"false\"\n      [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\" (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n    </ax-number-box>\n    <label>R</label>\n  </div>\n  <div>\n    <ax-number-box class=\"ax-sm\" name=\"g\" [minValue]=\"0\" [maxValue]=\"255\" [ngModel]=\"_rgba.g\" [showSpinButtons]=\"false\"\n      [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\" (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n    </ax-number-box>\n    <label>G</label>\n  </div>\n  <div>\n    <ax-number-box class=\"ax-sm\" name=\"b\" [minValue]=\"0\" [maxValue]=\"255\" [ngModel]=\"_rgba.b\" [showSpinButtons]=\"false\"\n      [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\" (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n    </ax-number-box>\n    <label>B</label>\n  </div>\n  <div>\n    <ax-number-box class=\"ax-sm\" name=\"a\" [minValue]=\"0\" [maxValue]=\"1\" [ngModel]=\"_rgba.a\" [decimals]=\"2\" [step]=\"0.1\"\n      [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\" [showSpinButtons]=\"false\"\n      (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n    </ax-number-box>\n    <label>A</label>\n  </div>\n  }\n  }\n</div>\n<button type=\"button\" class=\"ax-general-button ax-button-rounded ax-button-icon ax-sm\"\n  (click)=\"_handleChangeInputMode()\" [disabled]=\"_parent.disabled\">\n  <span class=\"ax-icon ax-icon-unfold-more\"></span>\n</button>" }]
+        }], ctorParameters: () => [{ type: AXColorPaletteParentComponent, decorators: [{
+                    type: Inject,
+                    args: [AXColorPaletteParentComponent]
+                }] }, { type: i1.AXUnsubscriber }], propDecorators: { __hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class AXColorPalettePickerComponent extends MXBaseComponent {
+    constructor(_parent, _unsubscriber) {
+        super();
+        this._parent = _parent;
+        this._unsubscriber = _unsubscriber;
+        this._rgba = {
+            r: 0,
+            g: 0,
+            b: 0,
+            a: 0,
+        };
+        this._gradient = 0;
+        this._bgColor = '#F00';
+        this._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 },
+        ];
+        this._gradients = AXColorUtil.gradient(this._gradientColors);
+        this._colors = this._gradients.rgb(100);
+        this.dragPosition = { x: 0, y: 0 };
+        _parent.onValueChanged
+            .pipe(_unsubscriber.takeUntilDestroy)
+            .subscribe((e) => {
+            this._handleParentColorChanged();
+        });
+        _parent.onOptionChanged
+            .pipe(_unsubscriber.takeUntilDestroy)
+            .subscribe((e) => {
+            this.cdr.markForCheck();
+        });
+    }
+    setHSV() {
+        const hsv = AXColorUtil.to(this._rgba, 'hsva');
+        const sortedH = this._colors.map((c) => c.toHsv().h);
+        this._gradient = sortedH.findIndex((c) => {
+            return Math.round(c) >= Math.round(hsv.h);
+        });
+        this._bgColor = AXColorUtil.toString({ h: hsv.h, s: 1, v: 1, a: this._rgba.a }, 'rgba');
+        this.setPointerByPercent(hsv.s * 100, hsv.v * 100);
+    }
+    _handleParentColorChanged() {
+        const color = this._parent.value;
+        if (!color) {
+            this._rgba = {
+                r: 0,
+                g: 0,
+                b: 0,
+                a: 0,
+            };
+        }
+        else {
+            if (!AXColorUtil.equal(color, this._rgba)) {
+                Object.assign(this._rgba, AXColorUtil.to(color, 'rgba'));
+            }
+        }
+        this.setHSV();
+        this.cdr.detectChanges();
+    }
+    _handleAlphaChanged(e) {
+        if (e.isUserInteraction && e.value != this._rgba.a) {
+            const { r, g, b } = this._rgba;
+            const _color = `rgba(${r},${g},${b},${e.value})`;
+            this._parent.commitValue(AXColorUtil.toString(_color, 'rgba'), e.isUserInteraction);
+        }
+    }
+    _handleGradientChanged(e) {
+        if (e.isUserInteraction && e.value != this._gradient) {
+            const { s, v } = AXColorUtil.to(this._rgba, 'hsva');
+            const { h } = this._colors[e.value].toHsv();
+            this._parent.commitValue(AXColorUtil.toString({ h, s, v, a: this._rgba.a }, 'rgba'), e.isUserInteraction);
+        }
+    }
+    _handleSurfaceClick(e) {
+        if (this._parent.disabled || this._parent.readonly) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        const surface = this.getHostElement().querySelector('.ax-color-box-overlay');
+        const pointer = this.getHostElement().querySelector('.ax-color-box-pointer');
+        let x = e.offsetX;
+        let y = e.offsetY;
+        this.setColorByXY(x, y);
+    }
+    _handleDrag() {
+        if (this._parent.disabled || this._parent.readonly) {
+            return;
+        }
+        const surface = this.getHostElement().querySelector('.ax-color-box-overlay');
+        const sb = surface.getBoundingClientRect();
+        const pointer = this.getHostElement().querySelector('.ax-color-box-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-box-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.commitValue(AXColorUtil.toString(hsv, 'rgba'), true);
+    }
+    setPointerByPercent(x, y) {
+        const surface = this.getHostElement().querySelector('.ax-color-box-overlay');
+        if (!surface)
+            return;
+        const sb = surface.getBoundingClientRect();
+        const pointer = this.getHostElement().querySelector('.ax-color-box-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,
+        };
+    }
+    get __hostClass() {
+        return `ax-color-palette-picker`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXColorPalettePickerComponent, deps: [{ token: AXColorPaletteParentComponent }, { token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker", host: { properties: { "class": "this.__hostClass" } }, providers: [
+            {
+                provide: AXColorPaletteChildComponent,
+                useExisting: AXColorPalettePickerComponent,
+            },
+            AXUnsubscriber,
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-color-box-overlay-trans\">\n    <div class=\"ax-color-box-overlay\" [style.background-color]=\"_bgColor\">\n        <div class=\"ax-color-box-overlay-g1\"></div>\n        <div class=\"ax-color-box-overlay-g2\" (click)=\"_handleSurfaceClick($event)\"></div>\n        <div class=\"ax-color-box-pointer\" cdkDrag cdkDragBoundary=\".ax-color-box-overlay\"\n            [cdkDragFreeDragPosition]=\"dragPosition\" (cdkDragEnded)=\"_handleDrag()\"\n            [cdkDragDisabled]=\"_parent.disabled || _parent.readonly\">\n        </div>\n    </div>\n</div>\n<ax-range-slider class=\"ax-color-box-gradient\" [minValue]=\"0\" [maxValue]=\"100\" [step]=\"1\" [ngModel]=\"_gradient\"\n    [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\" (onValueChanged)=\"_handleGradientChanged($event)\">\n</ax-range-slider>\n<ax-range-slider class=\"ax-color-box-transparent\" [minValue]=\"0\" [maxValue]=\"1\" [step]=\"0.01\" [ngModel]=\"_rgba.a\"\n    [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\" (onValueChanged)=\"_handleAlphaChanged($event)\">\n</ax-range-slider>", dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["readonly", "disabled", "value", "name", "color", "minValue", "maxValue", "step", "direction"], outputs: ["valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "directive", type: i4$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: "17.3.2", ngImport: i0, type: AXColorPalettePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-color-palette-picker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: AXColorPaletteChildComponent,
+                            useExisting: AXColorPalettePickerComponent,
+                        },
+                        AXUnsubscriber,
+                    ], template: "<div class=\"ax-color-box-overlay-trans\">\n    <div class=\"ax-color-box-overlay\" [style.background-color]=\"_bgColor\">\n        <div class=\"ax-color-box-overlay-g1\"></div>\n        <div class=\"ax-color-box-overlay-g2\" (click)=\"_handleSurfaceClick($event)\"></div>\n        <div class=\"ax-color-box-pointer\" cdkDrag cdkDragBoundary=\".ax-color-box-overlay\"\n            [cdkDragFreeDragPosition]=\"dragPosition\" (cdkDragEnded)=\"_handleDrag()\"\n            [cdkDragDisabled]=\"_parent.disabled || _parent.readonly\">\n        </div>\n    </div>\n</div>\n<ax-range-slider class=\"ax-color-box-gradient\" [minValue]=\"0\" [maxValue]=\"100\" [step]=\"1\" [ngModel]=\"_gradient\"\n    [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\" (onValueChanged)=\"_handleGradientChanged($event)\">\n</ax-range-slider>\n<ax-range-slider class=\"ax-color-box-transparent\" [minValue]=\"0\" [maxValue]=\"1\" [step]=\"0.01\" [ngModel]=\"_rgba.a\"\n    [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\" (onValueChanged)=\"_handleAlphaChanged($event)\">\n</ax-range-slider>" }]
+        }], ctorParameters: () => [{ type: AXColorPaletteParentComponent, decorators: [{
+                    type: Inject,
+                    args: [AXColorPaletteParentComponent]
+                }] }, { type: i1.AXUnsubscriber }], propDecorators: { __hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class AXColorPalettePreviewComponent extends MXBaseComponent {
+    constructor(_parent, _zone, _unsubscriber) {
+        super();
+        this._parent = _parent;
+        this._zone = _zone;
+        this._unsubscriber = _unsubscriber;
+        _parent.onValueChanged
+            .pipe(_unsubscriber.takeUntilDestroy)
+            .subscribe((e) => {
+            _zone.runOutsideAngular(this.applyParent.bind(this));
+        });
+    }
+    ngAfterViewInit() {
+        this.applyParent();
+    }
+    applyParent() {
+        const inner = this.getHostElement().firstElementChild;
+        inner.style.backgroundColor = this._parent.value;
+        inner.innerText = AXColorUtil.toString(this._parent.value);
+        const color = AXColorUtil.toString(this._parent.value, 'hex');
+        const ratio = AXColorUtil.contrastToWhite(color);
+        this.getHostElement().style.color = !(ratio > 2.0) ? '#000' : '#fff';
+    }
+    get __hostClass() {
+        return `ax-color-palette-preview`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXColorPalettePreviewComponent, deps: [{ token: AXColorPaletteParentComponent }, { token: i0.NgZone }, { token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview", host: { properties: { "classs": "this.__hostClass" } }, providers: [
+            {
+                provide: AXColorPaletteChildComponent,
+                useExisting: AXColorPalettePreviewComponent,
+            },
+            AXUnsubscriber,
+        ], 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: "17.3.2", 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>`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: AXColorPaletteChildComponent,
+                            useExisting: AXColorPalettePreviewComponent,
+                        },
+                        AXUnsubscriber,
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: AXColorPaletteParentComponent, decorators: [{
+                    type: Inject,
+                    args: [AXColorPaletteParentComponent]
+                }] }, { type: i0.NgZone }, { type: i1.AXUnsubscriber }], propDecorators: { __hostClass: [{
+                type: HostBinding,
+                args: ['classs']
+            }] } });
+
+class AXColorPaletteSwatchesComponent extends MXBaseComponent {
+    constructor(_parent, _unsubscriber) {
+        super();
+        this._parent = _parent;
+        this._unsubscriber = _unsubscriber;
+        this.colors = [];
+        _parent.onValueChanged
+            .pipe(_unsubscriber.takeUntilDestroy)
+            .pipe(distinctUntilChanged())
+            .subscribe(() => {
+            this.applyParent();
+        });
+    }
+    applyParent() {
+        this._selected = AXColorUtil.toString(this._parent.value, 'hex').toLowerCase();
+        this.cdr.detectChanges();
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        const isFav = this.getHostElement().tagName.toLowerCase() ==
+            'ax-color-palette-favorite';
+        if (!isFav && this.colors.length == 0) {
+            this.colors = AXDefaultColorPalette.map((c) => this._format(c));
+        }
+    }
+    ngAfterViewInit() {
+        this.applyParent();
+    }
+    _handleClick(e, color) {
+        if (this._parent.disabled || this._parent.readonly)
+            return;
+        this._parent.commitValue(color.code, true);
+    }
+    _format(color) {
+        return {
+            code: color.code.toLowerCase(),
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXColorPaletteSwatchesComponent, deps: [{ token: AXColorPaletteParentComponent }, { token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: { colors: "colors" }, providers: [
+            {
+                provide: AXColorPaletteChildComponent,
+                useExisting: AXColorPaletteSwatchesComponent,
+            },
+            AXUnsubscriber,
+        ], usesInheritance: true, ngImport: i0, template: `
+    @for (color of colors; track color.code) {
+    <div
+      [style.background-color]="color.code"
+      [attr.title]="color.code"
+      [class.ax-state-selected]="color.code === _selected"
+      (click)="_handleClick($event, color)"
+    ></div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXColorPaletteSwatchesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-color-palette-swatches, ax-color-palette-favorite',
+                    template: `
+    @for (color of colors; track color.code) {
+    <div
+      [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,
+                        },
+                        AXUnsubscriber,
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: AXColorPaletteParentComponent, decorators: [{
+                    type: Inject,
+                    args: [AXColorPaletteParentComponent]
+                }] }, { type: i1.AXUnsubscriber }], propDecorators: { colors: [{
+                type: Input
+            }] } });
+
+class AXColorPalleteComponent extends MXValueComponent {
+    get __hostDisabled() {
+        return this.disabled;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXColorPalleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXColorPalleteComponent, selector: "ax-color-palette", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", value: "value", state: "state", name: "name", checked: "checked" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", readonlyChange: "readonlyChange", disabledChange: "disabledChange" }, host: { properties: { "class.ax-state-disabled": "this.__hostDisabled" } }, providers: [
+            { provide: AXValuableComponent, useExisting: AXColorPalleteComponent },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AXColorPalleteComponent),
+                multi: true,
+            },
+            {
+                provide: AXColorPaletteParentComponent,
+                useExisting: AXColorPalleteComponent,
+            },
+        ], queries: [{ propertyName: "_children", predicate: AXColorPaletteChildComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select='ax-header'></ng-content>\n\n@if(_children?.length){\n<ng-container [ngTemplateOutlet]=\"custom\"></ng-container>\n} @else{\n<ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n\n}\n<ng-template #custom>\n    <ng-content select='ax-color-palette-preview'></ng-content>\n    <ng-content select='ax-color-palette-picker'></ng-content>\n    <ng-content select='ax-color-palette-swatches'></ng-content>\n    <ng-content select='ax-color-palette-favorite'></ng-content>\n    <ng-content select='ax-color-palette-input'></ng-content>\n</ng-template>\n<ng-template #default>\n    <ax-color-palette-preview></ax-color-palette-preview>\n    <ax-color-palette-picker></ax-color-palette-picker>\n    <ax-color-palette-swatches></ax-color-palette-swatches>\n    <ax-color-palette-input></ax-color-palette-input>\n</ng-template>\n<ng-content select='ax-footer'></ng-content>", styles: ["ax-color-palette{display:flex;width:100%;flex-direction:column;border-radius:var(--ax-rounded-border-default);border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface))}@media (min-width: 768px){ax-color-palette{width:20rem}}ax-color-palette.ax-state-disabled{cursor:not-allowed;opacity:.5}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{cursor:not-allowed;opacity:.5}ax-color-palette ax-header,ax-color-palette ax-footer{display:flex;border-top-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.75rem}ax-color-palette ax-color-palette-preview{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;position:relative;height:6rem;width:100%;gap:.5rem;border-top-left-radius:var(--ax-rounded-border-default);border-top-right-radius:var(--ax-rounded-border-default)}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;inset-inline-start:0px;display:flex;height:100%;width:100%;align-items:center;justify-content:center;border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default));text-transform:uppercase}ax-color-palette ax-color-palette-favorite{display:block;border-top-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;max-height:9rem;grid-template-columns:repeat(10,minmax(0,1fr));gap:.5rem;overflow-y:auto;overflow-x:hidden;padding:.5rem}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:before,ax-color-palette ax-color-palette-favorite div:after{content:\"\"}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{float:left;padding-top:100%}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{clear:both;display:block}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{box-shadow:0 0 0 1px rgba(var(--ax-color-white)),0 0 0 3px rgba(var(--ax-color-black))}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:1rem}ax-color-palette ax-color-palette-input .palette-inputs .ax-editor-container .ax-input{padding:0}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-box-overlay-trans{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker .ax-color-box-overlay{position:relative;display:flex;height:8rem;width:100%}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-pointer{position:relative;z-index:10;height:.75rem;width:.75rem;border-radius:9999px;border-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:transparent}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{position:absolute;bottom:0;inset-inline-end:0px;inset-inline-start:0px;top:0;height:100%;width:100%}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1{background:linear-gradient(to right,#fff,#fff0);z-index:0}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{z-index:10;background:linear-gradient(to bottom,transparent 0%,#000 100%)}ax-color-palette ax-color-palette-picker ax-range-slider.ax-color-box-gradient input{background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}ax-color-palette ax-color-palette-picker ax-range-slider.ax-color-box-transparent input{background-image:linear-gradient(to right,#f5f6fc00,#000),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}\n"], dependencies: [{ kind: "directive", type: i1$1.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" }, { kind: "component", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXColorPalleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-color-palette', inputs: [
+                        'disabled',
+                        'tabIndex',
+                        'readonly',
+                        'value',
+                        'state',
+                        'name',
+                        'checked',
+                    ], outputs: [
+                        'onBlur',
+                        'onFocus',
+                        'valueChange',
+                        'stateChange',
+                        'onValueChanged',
+                        'readonlyChange',
+                        'disabledChange',
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        { provide: AXValuableComponent, useExisting: AXColorPalleteComponent },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AXColorPalleteComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: AXColorPaletteParentComponent,
+                            useExisting: AXColorPalleteComponent,
+                        },
+                    ], template: "<ng-content select='ax-header'></ng-content>\n\n@if(_children?.length){\n<ng-container [ngTemplateOutlet]=\"custom\"></ng-container>\n} @else{\n<ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n\n}\n<ng-template #custom>\n    <ng-content select='ax-color-palette-preview'></ng-content>\n    <ng-content select='ax-color-palette-picker'></ng-content>\n    <ng-content select='ax-color-palette-swatches'></ng-content>\n    <ng-content select='ax-color-palette-favorite'></ng-content>\n    <ng-content select='ax-color-palette-input'></ng-content>\n</ng-template>\n<ng-template #default>\n    <ax-color-palette-preview></ax-color-palette-preview>\n    <ax-color-palette-picker></ax-color-palette-picker>\n    <ax-color-palette-swatches></ax-color-palette-swatches>\n    <ax-color-palette-input></ax-color-palette-input>\n</ng-template>\n<ng-content select='ax-footer'></ng-content>", styles: ["ax-color-palette{display:flex;width:100%;flex-direction:column;border-radius:var(--ax-rounded-border-default);border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface))}@media (min-width: 768px){ax-color-palette{width:20rem}}ax-color-palette.ax-state-disabled{cursor:not-allowed;opacity:.5}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{cursor:not-allowed;opacity:.5}ax-color-palette ax-header,ax-color-palette ax-footer{display:flex;border-top-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.75rem}ax-color-palette ax-color-palette-preview{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;position:relative;height:6rem;width:100%;gap:.5rem;border-top-left-radius:var(--ax-rounded-border-default);border-top-right-radius:var(--ax-rounded-border-default)}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;inset-inline-start:0px;display:flex;height:100%;width:100%;align-items:center;justify-content:center;border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default));text-transform:uppercase}ax-color-palette ax-color-palette-favorite{display:block;border-top-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;max-height:9rem;grid-template-columns:repeat(10,minmax(0,1fr));gap:.5rem;overflow-y:auto;overflow-x:hidden;padding:.5rem}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:before,ax-color-palette ax-color-palette-favorite div:after{content:\"\"}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{float:left;padding-top:100%}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{clear:both;display:block}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{box-shadow:0 0 0 1px rgba(var(--ax-color-white)),0 0 0 3px rgba(var(--ax-color-black))}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:1rem}ax-color-palette ax-color-palette-input .palette-inputs .ax-editor-container .ax-input{padding:0}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-box-overlay-trans{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker .ax-color-box-overlay{position:relative;display:flex;height:8rem;width:100%}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-pointer{position:relative;z-index:10;height:.75rem;width:.75rem;border-radius:9999px;border-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:transparent}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{position:absolute;bottom:0;inset-inline-end:0px;inset-inline-start:0px;top:0;height:100%;width:100%}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1{background:linear-gradient(to right,#fff,#fff0);z-index:0}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{z-index:10;background:linear-gradient(to bottom,transparent 0%,#000 100%)}ax-color-palette ax-color-palette-picker ax-range-slider.ax-color-box-gradient input{background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}ax-color-palette ax-color-palette-picker ax-range-slider.ax-color-box-transparent input{background-image:linear-gradient(to right,#f5f6fc00,#000),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}\n"] }]
+        }], propDecorators: { _children: [{
+                type: ContentChildren,
+                args: [AXColorPaletteChildComponent]
+            }], __hostDisabled: [{
+                type: HostBinding,
+                args: ['class.ax-state-disabled']
+            }] } });
+
+const MODULES = [
+    FormsModule,
+    AXTextBoxModule,
+    AXLabelModule,
+    AXButtonModule,
+    AXDecoratorModule,
+    AXNumberBoxModule,
+    AXRangeSliderModule,
+    DragDropModule,
+];
+const CONPONENTS = [
+    AXColorPalleteComponent,
+    AXColorPalettePreviewComponent,
+    AXColorPaletteSwatchesComponent,
+    AXColorPaletteInputComponent,
+    AXColorPalettePickerComponent,
+];
+class AXColorPaletteModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXColorPaletteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: AXColorPaletteModule, declarations: [AXColorPalleteComponent,
+            AXColorPalettePreviewComponent,
+            AXColorPaletteSwatchesComponent,
+            AXColorPaletteInputComponent,
+            AXColorPalettePickerComponent], imports: [CommonModule, FormsModule,
+            AXTextBoxModule,
+            AXLabelModule,
+            AXButtonModule,
+            AXDecoratorModule,
+            AXNumberBoxModule,
+            AXRangeSliderModule,
+            DragDropModule], exports: [AXColorPalleteComponent,
+            AXColorPalettePreviewComponent,
+            AXColorPaletteSwatchesComponent,
+            AXColorPaletteInputComponent,
+            AXColorPalettePickerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXColorPaletteModule, imports: [CommonModule, MODULES] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXColorPaletteModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...CONPONENTS],
+                    imports: [CommonModule, ...MODULES],
+                    exports: [...CONPONENTS],
+                    providers: [],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXColorPaletteChildComponent, AXColorPaletteInputComponent, AXColorPaletteModule, AXColorPaletteParentComponent, AXColorPalettePickerComponent, AXColorPalettePreviewComponent, AXColorPaletteSwatchesComponent, AXColorPalleteComponent, AXDefaultColorPalette };
+//# sourceMappingURL=acorex-components-color-palette.mjs.map