@acorex/components 5.7.0 → 6.0.0

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

@@ -0,0 +1,672 @@
+import { AXColorUtil } from '@acorex/core/utils';
+import * as i0 from '@angular/core';
+import { Injectable, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Inject, Input, EventEmitter, ContentChildren, Output, HostBinding, NgModule } from '@angular/core';
+import { distinctUntilChanged } from 'rxjs/operators';
+import { AXBaseComponent, AXBaseValueComponentMixin } from '@acorex/components/mixin';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@acorex/components/textbox';
+import { AXTextBoxModule } from '@acorex/components/textbox';
+import * as i3 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i4 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import * as i5 from '@acorex/components/number-box';
+import { AXNumberBoxModule } from '@acorex/components/number-box';
+import * as i1$1 from '@acorex/components/range-slider';
+import { AXRangeSliderModule } from '@acorex/components/range-slider';
+import { Subject } from 'rxjs';
+import { AXLabelModule } from '@acorex/components/label';
+
+class AXColorComponent {
+}
+AXColorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+AXColorComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXColorComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXColorComponent, decorators: [{
+            type: Injectable
+        }] });
+class AXColorPaletteChildComponent {
+}
+AXColorPaletteChildComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXColorPaletteChildComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+AXColorPaletteChildComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXColorPaletteChildComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXColorPaletteChildComponent, decorators: [{
+            type: Injectable
+        }] });
+
+class AXColorPaletteInputComponent extends AXBaseComponent {
+    constructor(_elementRef, _cdr, _parent) {
+        super(_elementRef, _cdr);
+        this._parent = _parent;
+        this._rgba = {
+            r: 0,
+            g: 0,
+            b: 0,
+            a: 0,
+        };
+        this._hex = '';
+        _parent._onInternalColorChanged$
+            .pipe(distinctUntilChanged())
+            .subscribe((e) => {
+            if (!e.color) {
+                this._hex = '';
+                this._rgba = {
+                    r: null,
+                    g: null,
+                    b: null,
+                    a: null,
+                };
+            }
+            else {
+                if (!AXColorUtil.equal(e.color, this._rgba)) {
+                    this._hex = AXColorUtil.toHexSting(e.color);
+                    Object.assign(this._rgba, AXColorUtil.to(e.color, 'rgba'));
+                }
+            }
+            _cdr.detectChanges();
+        });
+    }
+    _handleChangeInputMode(e) {
+        switch (this._parent.colorMode) {
+            case 'rgba':
+                this._parent.colorMode = 'hex';
+                break;
+            default:
+                this._parent.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})`;
+        this._parent._setUserInteraction();
+        this._parent._onInternalColorChanged$.next({
+            color: AXColorUtil.toString(_color, 'rgba'),
+            mode: 'rgba',
+        });
+    }
+    _handleHEXAValueChanged(e) {
+        if (e.value != null) {
+            this._parent._setUserInteraction();
+            this._parent._onInternalColorChanged$.next({
+                color: AXColorUtil.toString(e.value, 'hex'),
+                mode: 'hex',
+            });
+        }
+    }
+}
+AXColorPaletteInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXColorPaletteInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXColorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AXColorPaletteInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", 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]=\"_parent.colorMode\">\r\n    <div class=\"palette-inputs\">\r\n        <ng-container *ngSwitchCase=\"'hex'\">\r\n            <div>\r\n                <ax-text-box class=\"ax-w-full\" [value]=\"_hex\"  [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\"  (onValueChanged)=\"_handleHEXAValueChanged($event)\">\r\n                </ax-text-box>\r\n                <label>HEX</label>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'rgba'\">\r\n            <div>\r\n                <ax-number-box [minValue]=\"0\" [maxValue]=\"255\" [(value)]=\"_rgba.r\" [showSpinButtons]=\"false\" [disabled]=\"_parent.disabled\" [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 [minValue]=\"0\" [maxValue]=\"255\" [(value)]=\"_rgba.g\" [showSpinButtons]=\"false\" [disabled]=\"_parent.disabled\" [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 [minValue]=\"0\" [maxValue]=\"255\" [(value)]=\"_rgba.b\" [showSpinButtons]=\"false\" [disabled]=\"_parent.disabled\" [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 [minValue]=\"0\" [maxValue]=\"1\" [(value)]=\"_rgba.a\" [decimals]=\"2\" [step]=\"0.1\" [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\"\r\n                    [showSpinButtons]=\"false\" (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n                </ax-number-box>\r\n                <label>A</label>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <ax-button color=\"light\" class=\"ax-w-base\" (onClick)=\"_handleChangeInputMode($event)\" [disabled]=\"_parent.disabled\">\r\n        <ax-icon class=\"ax-ic ax-ic-unfold\"></ax-icon>\r\n    </ax-button>\r\n</ng-container>", 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", "allowNull", "value", "name", "checked", "placeholder", "maxLength", "debounceTime", "type", "autoComplete"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange"] }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "size", "value", "placeholder", "maxLength", "allowNull", "debounceTime", "type", "autoComplete", "name", "checked", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue"], outputs: ["valueChange", "onValueChanged", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", 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]=\"_parent.colorMode\">\r\n    <div class=\"palette-inputs\">\r\n        <ng-container *ngSwitchCase=\"'hex'\">\r\n            <div>\r\n                <ax-text-box class=\"ax-w-full\" [value]=\"_hex\"  [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\"  (onValueChanged)=\"_handleHEXAValueChanged($event)\">\r\n                </ax-text-box>\r\n                <label>HEX</label>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'rgba'\">\r\n            <div>\r\n                <ax-number-box [minValue]=\"0\" [maxValue]=\"255\" [(value)]=\"_rgba.r\" [showSpinButtons]=\"false\" [disabled]=\"_parent.disabled\" [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 [minValue]=\"0\" [maxValue]=\"255\" [(value)]=\"_rgba.g\" [showSpinButtons]=\"false\" [disabled]=\"_parent.disabled\" [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 [minValue]=\"0\" [maxValue]=\"255\" [(value)]=\"_rgba.b\" [showSpinButtons]=\"false\" [disabled]=\"_parent.disabled\" [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 [minValue]=\"0\" [maxValue]=\"1\" [(value)]=\"_rgba.a\" [decimals]=\"2\" [step]=\"0.1\" [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\"\r\n                    [showSpinButtons]=\"false\" (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n                </ax-number-box>\r\n                <label>A</label>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <ax-button color=\"light\" class=\"ax-w-base\" (onClick)=\"_handleChangeInputMode($event)\" [disabled]=\"_parent.disabled\">\r\n        <ax-icon class=\"ax-ic ax-ic-unfold\"></ax-icon>\r\n    </ax-button>\r\n</ng-container>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXColorComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [AXColorComponent]
+                }] }]; } });
+
+class AXColorPalettePickerComponent extends AXBaseComponent {
+    constructor(_elementRef, _cdr, _parent) {
+        super(_elementRef, _cdr);
+        this._parent = _parent;
+        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 },
+        ];
+        _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._bgColor = AXColorUtil.toString(e.color, 'hex');
+            _cdr.detectChanges();
+        });
+    }
+    _handleAlphaChanged(e) {
+        if (e.value != null && e.value != this._rgba.a) {
+            this._parent._setUserInteraction();
+            const { r, g, b } = this._rgba;
+            const _color = `rgba(${r},${g},${b},${e.value})`;
+            this._parent._setUserInteraction();
+            this._parent.colorMode = 'rgba';
+            this._parent._onInternalColorChanged$.next({
+                color: AXColorUtil.toString(_color, 'rgba'),
+                mode: 'rgba',
+            });
+        }
+    }
+    _handleGradientChanged(e) {
+        if (e.value != null && e.value != this._gradient) {
+            const gradient = AXColorUtil.gradient(this._gradientColors);
+            const colors = gradient.rgb(100);
+            let color = colors[e.value].toRgbString();
+            this._parent._onInternalColorChanged$.next({
+                color: AXColorUtil.toString(color, 'rgba'),
+                mode: this._parent.colorMode,
+            });
+        }
+    }
+}
+AXColorPalettePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXColorPalettePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXColorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AXColorPalettePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", 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\" [style.background-color]=\"_bgColor\">\r\n    <div class=\"ax-color-picker-overlay-color\"></div>\r\n    <div class=\"ax-color-picker-overlay-gradient\"></div>\r\n    <div class=\"ax-color-picker-pointer\"></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"], outputs: ["valueChange", "onValueChanged", "colorChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", 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\" [style.background-color]=\"_bgColor\">\r\n    <div class=\"ax-color-picker-overlay-color\"></div>\r\n    <div class=\"ax-color-picker-overlay-gradient\"></div>\r\n    <div class=\"ax-color-picker-pointer\"></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 {
+    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 = e.color
+                    ? AXColorUtil.toString(e.color, e.mode)
+                    : '';
+                const color = AXColorUtil.toHexSting(e.color);
+                const ratio = AXColorUtil.contrastToWhite(color);
+                this._getHostElement().style.color = !(ratio > 2.0) ? '#000' : '#fff';
+            });
+        });
+    }
+}
+AXColorPalettePreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXColorPalettePreviewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXColorComponent, optional: true }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+AXColorPalettePreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", 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: "14.0.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>`,
+                    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 {
+    constructor(_elementRef, _cdr, _parent) {
+        super(_elementRef, _cdr);
+        this._parent = _parent;
+        this.colors = [];
+        this._defaultPalette = [
+            { code: '#000000' },
+            { code: '#ffffff' },
+            // 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' },
+        ];
+        _parent?._onInternalColorChanged$
+            .pipe(distinctUntilChanged())
+            .subscribe((e) => {
+            this._selected = AXColorUtil.toHexSting(e.color).toLowerCase();
+            this._cdr.detectChanges();
+        });
+        if (this._getHostElement().tagName.toLowerCase() !=
+            'ax-color-palette-favorite') {
+            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,
+            mode: this._parent.colorMode,
+        });
+    }
+    _format(color) {
+        return {
+            code: color.code.toLowerCase(),
+        };
+    }
+}
+AXColorPaletteSwatchesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXColorPaletteSwatchesComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXColorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AXColorPaletteSwatchesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", 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: "14.0.2", 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
+            }] } });
+
+class AXColorPalleteComponent extends AXBaseValueComponentMixin {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        this._onInternalColorChanged$ = new Subject();
+        this.colorModeChange = new EventEmitter();
+        this._colorMode = 'hex';
+        //
+        this._onInternalColorChanged$
+            .pipe(distinctUntilChanged())
+            .subscribe((e) => {
+            if (this.disabled || this.readonly)
+                return;
+            this.value = e.color;
+            cdr.markForCheck();
+        });
+    }
+    /**
+     *  A character value that specifies the separator character.
+     */
+    get colorMode() {
+        return this._colorMode;
+    }
+    set colorMode(v) {
+        this._setOption({
+            name: 'colorMode',
+            value: v,
+        });
+    }
+    _onValueChanged(oldValue, newValue) {
+        super._onValueChanged(oldValue, newValue);
+        this._onInternalColorChanged$.next({
+            color: this.value,
+            mode: this.colorMode,
+        });
+    }
+    ngAfterContentInit() {
+        this._children.changes.subscribe(() => {
+            this._onInternalColorChanged$.next({
+                color: this.value,
+                mode: this.colorMode,
+            });
+        });
+    }
+    onViewInit() {
+        this._onInternalColorChanged$.next({
+            color: this.value,
+            mode: this.colorMode,
+        });
+    }
+    get __hostDisabled() {
+        return this.disabled;
+    }
+}
+AXColorPalleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXColorPalleteComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXColorPalleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: AXColorPalleteComponent, selector: "ax-color-palette", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", name: "name", checked: "checked", colorMode: "colorMode" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", colorModeChange: "colorModeChange" }, host: { properties: { "class.ax-state-disabled": "this.__hostDisabled" }, classAttribute: "ax-color-palette" }, 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", 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: "14.0.2", ngImport: i0, type: AXColorPalleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-color-palette', inputs: ['disabled', 'tabIndex', 'readonly', 'allowNull', 'value', 'name', 'checked'], outputs: ['onBlur', 'onFocus', 'valueChange', 'onValueChanged'], host: { class: 'ax-color-palette' }, 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" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _children: [{
+                type: ContentChildren,
+                args: [AXColorPaletteChildComponent]
+            }], colorModeChange: [{
+                type: Output
+            }], colorMode: [{
+                type: Input
+            }], __hostDisabled: [{
+                type: HostBinding,
+                args: ['class.ax-state-disabled']
+            }] } });
+
+const MODULES = [
+    AXTextBoxModule,
+    AXLabelModule,
+    AXButtonModule,
+    AXDecoratorModule,
+    AXNumberBoxModule,
+    AXRangeSliderModule
+];
+const CONPONENTS = [
+    AXColorPalleteComponent,
+    AXColorPalettePreviewComponent,
+    AXColorPaletteSwatchesComponent,
+    AXColorPaletteInputComponent,
+    AXColorPalettePickerComponent
+];
+class AXColorPaletteModule {
+}
+AXColorPaletteModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXColorPaletteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXColorPaletteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: AXColorPaletteModule, declarations: [AXColorPalleteComponent,
+        AXColorPalettePreviewComponent,
+        AXColorPaletteSwatchesComponent,
+        AXColorPaletteInputComponent,
+        AXColorPalettePickerComponent], imports: [CommonModule, AXTextBoxModule,
+        AXLabelModule,
+        AXButtonModule,
+        AXDecoratorModule,
+        AXNumberBoxModule,
+        AXRangeSliderModule], exports: [AXColorPalleteComponent,
+        AXColorPalettePreviewComponent,
+        AXColorPaletteSwatchesComponent,
+        AXColorPaletteInputComponent,
+        AXColorPalettePickerComponent] });
+AXColorPaletteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXColorPaletteModule, imports: [CommonModule, MODULES] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXColorPaletteModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...CONPONENTS],
+                    imports: [CommonModule, ...MODULES],
+                    exports: [...CONPONENTS],
+                    providers: [],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXColorComponent, AXColorPaletteChildComponent, AXColorPaletteInputComponent, AXColorPaletteModule, AXColorPalettePickerComponent, AXColorPalettePreviewComponent, AXColorPaletteSwatchesComponent, AXColorPalleteComponent };
+//# sourceMappingURL=acorex-components-color-palette.mjs.map