@acorex/components 6.0.0 → 6.0.1

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

@@ -1,672 +0,0 @@
-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