import { MXBaseComponent, AXComponent, MXValueComponent, AXValuableComponent } from '@acorex/cdk/common';
import { AXNumberBoxComponent } from '@acorex/components/number-box';
import { AXSelectBoxComponent } from '@acorex/components/select-box';
import { AXTextBoxComponent } from '@acorex/components/text-box';
import { AXUnsubscriber, AXColorUtil } from '@acorex/core/utils';
import * as i0 from '@angular/core';
import { Injectable, inject, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, Component, Renderer2, NgZone, viewChild, signal, Input, forwardRef, ContentChildren, NgModule } from '@angular/core';
import * as i1 from '@angular/forms';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { AXRangeSliderComponent } from '@acorex/components/range-slider';
import { distinctUntilChanged } from 'rxjs/operators';
import { NgTemplateOutlet } from '@angular/common';

class AXColorPaletteParentComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteParentComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteParentComponent }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteParentComponent, decorators: [{
            type: Injectable
        }] });
class AXColorPaletteChildComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteChildComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteChildComponent }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteChildComponent, decorators: [{
            type: Injectable
        }] });
const AXDefaultColorPalette = [
    { code: '#ffffff' },
    { code: '#000000' },
    //500
    { code: 'rgb(251,44,54)' },
    { code: 'rgb(255,105,0)' },
    { code: 'rgb(253,154,0)' },
    { code: 'rgb(239,177,0)' },
    { code: 'rgb(124,207,0)' },
    { code: 'rgb(0,201,81)' },
    { code: 'rgb(0,188,125)' },
    { code: 'rgb(0,187,167)' },
    { code: 'rgb(0,184,219)' },
    { code: 'rgb(0,166,244)' },
    { code: 'rgb(43,127,255)' },
    { code: 'rgb(97,95,255)' },
    { code: 'rgb(142,81,255)' },
    { code: 'rgb(173,70,255)' },
    { code: 'rgb(225,42,251)' },
    { code: 'rgb(246,51,154)' },
    { code: 'rgb(255,32,86)' },
    { code: 'rgb(98,116,142)' },
    { code: 'rgb(106,114,130)' },
    { code: 'rgb(113,113,123)' },
    //red
    { code: 'rgb(254,242,242)' },
    { code: 'rgb(255,226,226)' },
    { code: 'rgb(255,201,201)' },
    { code: 'rgb(255,162,162)' },
    { code: 'rgb(255,100,103)' },
    { code: 'rgb(251,44,54)' },
    { code: 'rgb(231,0,11)' },
    { code: 'rgb(193,0,7)' },
    { code: 'rgb(159,7,18)' },
    { code: 'rgb(130,24,26)' },
    { code: 'rgb(70,8,9)' },
    //orange
    { code: 'rgb(255,247,237)' },
    { code: 'rgb(255,237,212)' },
    { code: 'rgb(255,214,168)' },
    { code: 'rgb(255,184,106)' },
    { code: 'rgb(255,137,4)' },
    { code: 'rgb(255,105,0)' },
    { code: 'rgb(245,74,0)' },
    { code: 'rgb(202,53,0)' },
    { code: 'rgb(159,45,0)' },
    { code: 'rgb(126,42,12)' },
    { code: 'rgb(68,19,6)' },
    //amber
    { code: 'rgb(255,251,235)' },
    { code: 'rgb(254,243,198)' },
    { code: 'rgb(254,230,133)' },
    { code: 'rgb(255,210,48)' },
    { code: 'rgb(255,186,0)' },
    { code: 'rgb(253,154,0)' },
    { code: 'rgb(225,113,0)' },
    { code: 'rgb(187,77,0)' },
    { code: 'rgb(151,60,0)' },
    { code: 'rgb(123,51,6)' },
    { code: 'rgb(70,25,1)' },
    //yellow
    { code: 'rgb(254,252,232)' },
    { code: 'rgb(254,249,194)' },
    { code: 'rgb(255,240,133)' },
    { code: 'rgb(255,223,32)' },
    { code: 'rgb(252,200,0)' },
    { code: 'rgb(239,177,0)' },
    { code: 'rgb(208,135,0)' },
    { code: 'rgb(166,95,0)' },
    { code: 'rgb(137,75,0)' },
    { code: 'rgb(115,62,10)' },
    { code: 'rgb(67,32,4)' },
    //lime
    { code: 'rgb(247,254,231)' },
    { code: 'rgb(236,252,202)' },
    { code: 'rgb(216,249,153)' },
    { code: 'rgb(187,244,81)' },
    { code: 'rgb(154,230,0)' },
    { code: 'rgb(124,207,0)' },
    { code: 'rgb(94,165,0)' },
    { code: 'rgb(73,125,0)' },
    { code: 'rgb(61,99,0)' },
    { code: 'rgb(53,83,14)' },
    { code: 'rgb(25,46,3)' },
    //green
    { code: 'rgb(240,253,244)' },
    { code: 'rgb(220,252,231)' },
    { code: 'rgb(185,248,207)' },
    { code: 'rgb(123,241,168)' },
    { code: 'rgb(5,223,114)' },
    { code: 'rgb(0,201,81)' },
    { code: 'rgb(0,166,62)' },
    { code: 'rgb(0,130,54)' },
    { code: 'rgb(1,102,48)' },
    { code: 'rgb(13,84,43)' },
    { code: 'rgb(3,46,21)' },
    //emerald
    { code: 'rgb(236,253,245)' },
    { code: 'rgb(208,250,229)' },
    { code: 'rgb(164,244,207)' },
    { code: 'rgb(94,233,181)' },
    { code: 'rgb(0,212,146)' },
    { code: 'rgb(0,188,125)' },
    { code: 'rgb(0,153,102)' },
    { code: 'rgb(0,122,85)' },
    { code: 'rgb(0,96,69)' },
    { code: 'rgb(0,79,59)' },
    { code: 'rgb(0,44,34)' },
    //teal
    { code: 'rgb(240,253,250)' },
    { code: 'rgb(203,251,241)' },
    { code: 'rgb(150,247,228)' },
    { code: 'rgb(70,236,213)' },
    { code: 'rgb(0,213,190)' },
    { code: 'rgb(0,187,167)' },
    { code: 'rgb(0,150,137)' },
    { code: 'rgb(0,120,111)' },
    { code: 'rgb(0,95,90)' },
    { code: 'rgb(11,79,74)' },
    { code: 'rgb(2,47,46)' },
    //cyan
    { code: 'rgb(236,254,255)' },
    { code: 'rgb(206,250,254)' },
    { code: 'rgb(162,244,253)' },
    { code: 'rgb(83,234,253)' },
    { code: 'rgb(0,211,242)' },
    { code: 'rgb(0,184,219)' },
    { code: 'rgb(0,146,184)' },
    { code: 'rgb(0,117,149)' },
    { code: 'rgb(0,95,120)' },
    { code: 'rgb(16,78,100)' },
    { code: 'rgb(5,51,69)' },
    //sky
    { code: 'rgb(240,249,255)' },
    { code: 'rgb(223,242,254)' },
    { code: 'rgb(184,230,254)' },
    { code: 'rgb(116,212,255)' },
    { code: 'rgb(0,188,255)' },
    { code: 'rgb(0,166,244)' },
    { code: 'rgb(0,132,209)' },
    { code: 'rgb(0,105,168)' },
    { code: 'rgb(0,89,138)' },
    { code: 'rgb(2,74,112)' },
    { code: 'rgb(5,47,74)' },
    //blue
    { code: 'rgb(239,246,255)' },
    { code: 'rgb(219,234,254)' },
    { code: 'rgb(190,219,255)' },
    { code: 'rgb(142,197,255)' },
    { code: 'rgb(81,162,255)' },
    { code: 'rgb(43,127,255)' },
    { code: 'rgb(21,93,252)' },
    { code: 'rgb(20,71,230)' },
    { code: 'rgb(25,60,184)' },
    { code: 'rgb(28,57,142)' },
    { code: 'rgb(22,36,86)' },
    //indigo
    { code: 'rgb(238,242,255)' },
    { code: 'rgb(224,231,255)' },
    { code: 'rgb(198,210,255)' },
    { code: 'rgb(163,179,255)' },
    { code: 'rgb(124,134,255)' },
    { code: 'rgb(97,95,255)' },
    { code: 'rgb(79,57,246)' },
    { code: 'rgb(67,45,215)' },
    { code: 'rgb(55,42,172)' },
    { code: 'rgb(49,44,133)' },
    { code: 'rgb(30,26,77)' },
    //violet
    { code: 'rgb(245,243,255)' },
    { code: 'rgb(237,233,254)' },
    { code: 'rgb(221,214,255)' },
    { code: 'rgb(196,180,255)' },
    { code: 'rgb(166,132,255)' },
    { code: 'rgb(142,81,255)' },
    { code: 'rgb(127,34,254)' },
    { code: 'rgb(112,8,231)' },
    { code: 'rgb(93,14,192)' },
    { code: 'rgb(77,23,154)' },
    { code: 'rgb(47,13,104)' },
    //purple
    { code: 'rgb(250,245,255)' },
    { code: 'rgb(243,232,255)' },
    { code: 'rgb(233,212,255)' },
    { code: 'rgb(218,178,255)' },
    { code: 'rgb(194,122,255)' },
    { code: 'rgb(173,70,255)' },
    { code: 'rgb(152,16,250)' },
    { code: 'rgb(130,0,219)' },
    { code: 'rgb(110,17,176)' },
    { code: 'rgb(89,22,139)' },
    { code: 'rgb(60,3,102)' },
    //fuchsia
    { code: 'rgb(253,244,255)' },
    { code: 'rgb(250,232,255)' },
    { code: 'rgb(246,207,255)' },
    { code: 'rgb(244,168,255)' },
    { code: 'rgb(237,107,255)' },
    { code: 'rgb(225,42,251)' },
    { code: 'rgb(200,0,222)' },
    { code: 'rgb(168,0,183)' },
    { code: 'rgb(138,1,148)' },
    { code: 'rgb(114,19,120)' },
    { code: 'rgb(75,0,79)' },
    //pink
    { code: 'rgb(253,242,248)' },
    { code: 'rgb(252,231,243)' },
    { code: 'rgb(252,206,232)' },
    { code: 'rgb(253,165,213)' },
    { code: 'rgb(251,100,182)' },
    { code: 'rgb(246,51,154)' },
    { code: 'rgb(230,0,118)' },
    { code: 'rgb(198,0,92)' },
    { code: 'rgb(163,0,76)' },
    { code: 'rgb(134,16,67)' },
    { code: 'rgb(81,4,36)' },
    //rose
    { code: 'rgb(255,241,242)' },
    { code: 'rgb(255,228,230)' },
    { code: 'rgb(255,204,211)' },
    { code: 'rgb(255,161,173)' },
    { code: 'rgb(255,99,126)' },
    { code: 'rgb(255,32,86)' },
    { code: 'rgb(236,0,63)' },
    { code: 'rgb(199,0,54)' },
    { code: 'rgb(165,0,54)' },
    { code: 'rgb(139,8,54)' },
    { code: 'rgb(77,2,24)' },
    //slate
    { code: 'rgb(248,250,252)' },
    { code: 'rgb(241,245,249)' },
    { code: 'rgb(226,232,240)' },
    { code: 'rgb(202,213,226)' },
    { code: 'rgb(144,161,185)' },
    { code: 'rgb(98,116,142)' },
    { code: 'rgb(69,85,108)' },
    { code: 'rgb(49,65,88)' },
    { code: 'rgb(29,41,61)' },
    { code: 'rgb(15,23,43)' },
    { code: 'rgb(2,6,24)' },
    //gray
    { code: 'rgb(249,250,251)' },
    { code: 'rgb(243,244,246)' },
    { code: 'rgb(229,231,235)' },
    { code: 'rgb(209,213,220)' },
    { code: 'rgb(153,161,175)' },
    { code: 'rgb(106,114,130)' },
    { code: 'rgb(74,85,101)' },
    { code: 'rgb(54,65,83)' },
    { code: 'rgb(30,41,57)' },
    { code: 'rgb(16,24,40)' },
    { code: 'rgb(3,7,18)' },
    //zinc
    { code: 'rgb(250,250,250)' },
    { code: 'rgb(244,244,245)' },
    { code: 'rgb(228,228,231)' },
    { code: 'rgb(212,212,216)' },
    { code: 'rgb(159,159,169)' },
    { code: 'rgb(113,113,123)' },
    { code: 'rgb(82,82,92)' },
    { code: 'rgb(63,63,70)' },
    { code: 'rgb(39,39,42)' },
    { code: 'rgb(24,24,27)' },
    { code: 'rgb(9,9,11)' },
    //neutral
    { code: 'rgb(250,250,250)' },
    { code: 'rgb(245,245,245)' },
    { code: 'rgb(229,229,229)' },
    { code: 'rgb(212,212,212)' },
    { code: 'rgb(161,161,161)' },
    { code: 'rgb(115,115,115)' },
    { code: 'rgb(82,82,82)' },
    { code: 'rgb(64,64,64)' },
    { code: 'rgb(38,38,38)' },
    { code: 'rgb(23,23,23)' },
    { code: 'rgb(10,10,10)' },
    //stone
    { code: 'rgb(250,250,249)' },
    { code: 'rgb(245,245,244)' },
    { code: 'rgb(231,229,228)' },
    { code: 'rgb(214,211,209)' },
    { code: 'rgb(166,160,155)' },
    { code: 'rgb(121,113,107)' },
    { code: 'rgb(87,83,77)' },
    { code: 'rgb(68,64,59)' },
    { code: 'rgb(41,37,36)' },
    { code: 'rgb(28,25,23)' },
    { code: 'rgb(12,10,9)' },
];

class AXColorPaletteService {
    constructor() {
        this.colorMode = 'hex';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteService, decorators: [{
            type: Injectable
        }] });

/**
 * Component for selecting colors from a palette.
 *
 * @category Components
 */
class AXColorPaletteInputComponent extends MXBaseComponent {
    /**
     *  @ignore
     */
    constructor() {
        super();
        this._parent = inject(AXColorPaletteParentComponent);
        this._unsubscriber = inject(AXUnsubscriber);
        this.colorService = inject(AXColorPaletteService);
        this.isValid = true;
        this._rgba = {
            r: 0,
            g: 0,
            b: 0,
            a: 0,
        };
        this._hex = '';
        /**
         *  @ignore
         */
        this._colorMode = 'hex';
        /**
         *  @ignore
         */
        this._hexMaskOptions = '/^#[0-9a-f]{0,6}[0-9a-f]{0,2}$/i';
        const _parent = this._parent;
        const _unsubscriber = this._unsubscriber;
        _parent.onValueChanged.pipe(_unsubscriber.takeUntilDestroy).subscribe((e) => {
            this.applyParent(e.isUserInteraction);
        });
        _parent.onOptionChanged.pipe(_unsubscriber.takeUntilDestroy).subscribe((e) => {
            this.cdr.markForCheck();
        });
    }
    /**
     *  @ignore
     */
    applyParent(u = false) {
        const value = this._parent.value;
        if (!value) {
            this._hex = '';
            this._rgba = {
                r: null,
                g: null,
                b: null,
                a: null,
            };
        }
        else {
            if (this._colorMode == 'rgba') {
                Object.assign(this._rgba, AXColorUtil.to(value, 'rgba'));
            }
            if (this._colorMode == 'hex') {
                this._hex = AXColorUtil.toString(value, 'hex');
            }
        }
        this.checkValid();
        this.cdr.detectChanges();
    }
    /**
     *  @ignore
     */
    ngAfterViewInit() {
        this.applyParent();
    }
    /**
     *  @ignore
     */
    _handleChangeInputMode() {
        this.colorService.colorMode = this._colorMode;
        this.applyParent(true);
    }
    /**
     *  @ignore
     */
    _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);
        }
    }
    /**
     *  @ignore
     */
    _handleHEXAValueChanged(e) {
        if (e.isUserInteraction && e.value?.trim() != this._hex?.trim()) {
            this._parent.commitValue(e.value, e.isUserInteraction);
        }
    }
    /**
     *  @ignore
     */
    checkValid() {
        this.isValid = AXColorUtil.isValid(this._hex);
    }
    /**
     *  @ignore
     */
    get __hostClass() {
        return `ax-color-palette-input`;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXColorPaletteInputComponent, isStandalone: true, selector: "ax-color-palette-input", host: { properties: { "class": "this.__hostClass" } }, providers: [
            {
                provide: AXColorPaletteChildComponent,
                useExisting: AXColorPaletteInputComponent,
            },
            AXUnsubscriber,
            { provide: AXComponent, useExisting: AXColorPaletteInputComponent },
        ], usesInheritance: true, ngImport: i0, template: "<div class=\"palette-inputs ax-sm\">\n  <div class=\"select-box-container\">\n    <ax-select-box\n      [dataSource]=\"['hex', 'rgba']\"\n      [(ngModel)]=\"_colorMode\"\n      (ngModelChange)=\"_handleChangeInputMode()\"\n      [disabled]=\"_parent.disabled\"\n    >\n    </ax-select-box>\n  </div>\n  @switch (_colorMode) {\n    @case ('hex') {\n      <div>\n        <ax-text-box\n          [ngModel]=\"_hex\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          [state]=\"isValid ? 'clear' : 'error'\"\n          (onValueChanged)=\"_handleHEXAValueChanged($event)\"\n        >\n        </ax-text-box>\n      </div>\n    }\n    @case ('rgba') {\n      <div>\n        <ax-number-box\n          name=\"r\"\n          [minValue]=\"0\"\n          [maxValue]=\"255\"\n          [ngModel]=\"_rgba.r\"\n          [showSpinButtons]=\"false\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\"\n        >\n        </ax-number-box>\n      </div>\n      <div>\n        <ax-number-box\n          name=\"g\"\n          [minValue]=\"0\"\n          [maxValue]=\"255\"\n          [ngModel]=\"_rgba.g\"\n          [showSpinButtons]=\"false\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\"\n        >\n        </ax-number-box>\n      </div>\n      <div>\n        <ax-number-box\n          name=\"b\"\n          [minValue]=\"0\"\n          [maxValue]=\"255\"\n          [ngModel]=\"_rgba.b\"\n          [showSpinButtons]=\"false\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\"\n        >\n        </ax-number-box>\n      </div>\n      <div>\n        <ax-number-box\n          name=\"a\"\n          [minValue]=\"0\"\n          [maxValue]=\"1\"\n          [ngModel]=\"_rgba.a\"\n          [decimals]=\"2\"\n          [step]=\"0.1\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          [showSpinButtons]=\"false\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\"\n        >\n        </ax-number-box>\n      </div>\n    }\n  }\n</div>\n", styles: [".ax-bold{font-weight:700}\n"], dependencies: [{ kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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,
                        { provide: AXComponent, useExisting: AXColorPaletteInputComponent },
                    ], imports: [AXSelectBoxComponent, FormsModule, AXTextBoxComponent, AXNumberBoxComponent], template: "<div class=\"palette-inputs ax-sm\">\n  <div class=\"select-box-container\">\n    <ax-select-box\n      [dataSource]=\"['hex', 'rgba']\"\n      [(ngModel)]=\"_colorMode\"\n      (ngModelChange)=\"_handleChangeInputMode()\"\n      [disabled]=\"_parent.disabled\"\n    >\n    </ax-select-box>\n  </div>\n  @switch (_colorMode) {\n    @case ('hex') {\n      <div>\n        <ax-text-box\n          [ngModel]=\"_hex\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          [state]=\"isValid ? 'clear' : 'error'\"\n          (onValueChanged)=\"_handleHEXAValueChanged($event)\"\n        >\n        </ax-text-box>\n      </div>\n    }\n    @case ('rgba') {\n      <div>\n        <ax-number-box\n          name=\"r\"\n          [minValue]=\"0\"\n          [maxValue]=\"255\"\n          [ngModel]=\"_rgba.r\"\n          [showSpinButtons]=\"false\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\"\n        >\n        </ax-number-box>\n      </div>\n      <div>\n        <ax-number-box\n          name=\"g\"\n          [minValue]=\"0\"\n          [maxValue]=\"255\"\n          [ngModel]=\"_rgba.g\"\n          [showSpinButtons]=\"false\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\"\n        >\n        </ax-number-box>\n      </div>\n      <div>\n        <ax-number-box\n          name=\"b\"\n          [minValue]=\"0\"\n          [maxValue]=\"255\"\n          [ngModel]=\"_rgba.b\"\n          [showSpinButtons]=\"false\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\"\n        >\n        </ax-number-box>\n      </div>\n      <div>\n        <ax-number-box\n          name=\"a\"\n          [minValue]=\"0\"\n          [maxValue]=\"1\"\n          [ngModel]=\"_rgba.a\"\n          [decimals]=\"2\"\n          [step]=\"0.1\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          [showSpinButtons]=\"false\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\"\n        >\n        </ax-number-box>\n      </div>\n    }\n  }\n</div>\n", styles: [".ax-bold{font-weight:700}\n"] }]
        }], ctorParameters: () => [], propDecorators: { __hostClass: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * Component for picking colors from a color palette.
 *
 * @category Components
 */
class AXColorPalettePickerComponent extends MXBaseComponent {
    /**
     *  @ignore
     */
    constructor() {
        super();
        this._parent = inject(AXColorPaletteParentComponent);
        this._unsubscriber = inject(AXUnsubscriber);
        this.colorService = inject(AXColorPaletteService);
        this.render = inject(Renderer2);
        this.zone = inject(NgZone);
        this._rgba = {
            r: 0,
            g: 0,
            b: 0,
            a: 0,
        };
        this.circle = viewChild('circle', ...(ngDevMode ? [{ debugName: "circle" }] : []));
        this.changingColor = signal(false, ...(ngDevMode ? [{ debugName: "changingColor" }] : []));
        /**
         *  @ignore
         */
        this._gradient = 0;
        /**
         *  @ignore
         */
        this._bgColor = '#F00';
        this.colorBoxGradientBG = signal('', ...(ngDevMode ? [{ debugName: "colorBoxGradientBG" }] : []));
        this.colorBoxTransparentColor = { r: 0, g: 0, b: 0, a: 0 };
        this.sample = viewChild('sample', ...(ngDevMode ? [{ debugName: "sample" }] : []));
        /**
         *  @ignore
         */
        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 },
        ];
        /**
         *  @ignore
         */
        this._gradients = AXColorUtil.gradient(this._gradientColors);
        /**
         *  @ignore
         */
        this._colors = this._gradients.rgb(100);
        /**
         *  @ignore
         */
        // protected dragPosition = { x: 0, y: 0 };
        this.onPointerMoveListenerFn = () => undefined;
        this.onPointerUpListenerFn = () => undefined;
        const _parent = this._parent;
        const _unsubscriber = this._unsubscriber;
        _parent.onValueChanged.pipe(_unsubscriber.takeUntilDestroy).subscribe((e) => {
            Object.assign(this.colorBoxTransparentColor, AXColorUtil.to(e.value, 'rgba'));
            this.sample().nativeElement.style.backgroundColor = AXColorUtil.toString(e.value, 'rgba');
            this.parentColorChanged();
        });
        _parent.onOptionChanged.pipe(_unsubscriber.takeUntilDestroy).subscribe(() => {
            this.cdr.markForCheck();
        });
    }
    ngOnDestroy() {
        this.onPointerMoveListenerFn();
        this.onPointerUpListenerFn();
    }
    /**
     *  @ignore
     */
    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');
        const rgbaColor = this._bgColor.match(/\d+/g);
        this.colorBoxGradientBG.set(rgbaColor[0] + ',' + rgbaColor[1] + ',' + rgbaColor[2]);
        this.setPointerByPercent(hsv.s * 100, hsv.v * 100);
    }
    /**
     * Synchronizes internal RGBA and UI state with the parent palette value.
     *
     * Called when the parent emits onValueChanged. Updates local RGBA from the parent
     * value, recalculates gradient and pointer when the user is not actively changing
     * the color, and requests change detection.
     *
     * @returns void
     */
    parentColorChanged() {
        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'));
            }
        }
        if (!this.changingColor()) {
            this.setHSV();
        }
        this.cdr.detectChanges();
    }
    /**
     *  @ignore
     */
    _handleAlphaChanged(e) {
        if (e != this._rgba.a) {
            const { r, g, b } = this._rgba;
            const _color = `rgba(${r},${g},${b},${e})`;
            this._parent.commitValue(AXColorUtil.toString(_color, this.colorService.colorMode), true);
        }
    }
    /**
     *  @ignore
     */
    _handleGradientChanged(e) {
        if (e != this._gradient) {
            const { s, v } = AXColorUtil.to(this._rgba, 'hsva');
            const { h } = this._colors[e].toHsv();
            this._parent.commitValue(AXColorUtil.toString({ h, s, v, a: this._rgba.a }, this.colorService.colorMode), true);
            this._bgColor = AXColorUtil.toString({ h, s: 1, v: 1, a: this._rgba.a }, 'rgba');
            const rgbaColor = this._bgColor.match(/\d+/g);
            this.colorBoxGradientBG.set(rgbaColor[0] + ',' + rgbaColor[1] + ',' + rgbaColor[2]);
        }
    }
    /**
     *  @ignore
     */
    setColorByXY(x, y) {
        const surface = this.getHostElement().querySelector('.ax-color-box-overlay');
        const sb = surface.getBoundingClientRect();
        //
        const { h, a } = AXColorUtil.to(this._bgColor, 'hsva');
        const hsva = {
            h,
            s: x / sb.width,
            v: (sb.height - y) / sb.height,
            a,
        };
        this._parent.commitValue(AXColorUtil.toString(hsva, this.colorService.colorMode), true);
        const circleElement = this.circle().nativeElement;
        const parentStats = circleElement.parentElement.getBoundingClientRect();
        this.setPointerByPercent((x / parentStats.width) * 100, 100 - (y / parentStats.height) * 100);
    }
    /**
     *  @ignore
     */
    setPointerByPercent(x, y) {
        const circleElement = this.circle().nativeElement;
        const parentStats = circleElement.parentElement.getBoundingClientRect();
        const circleHeight = circleElement.offsetHeight / 2;
        const circleWidth = circleElement.offsetWidth / 2;
        const top = parentStats.height - (y * parentStats.height) / 100 - circleHeight;
        const left = (x * parentStats.width) / 100 - circleWidth;
        circleElement.style.top = `${top}px`;
        circleElement.style.left = `${left}px`;
    }
    handleMove(event) {
        if (!this.changingColor())
            return;
        event.preventDefault();
        event.stopPropagation();
        this.setColor(event.clientX, event.clientY);
    }
    handleDown(event) {
        if (this._parent.disabled || this._parent.readonly)
            return;
        event.preventDefault();
        event.stopPropagation();
        this.setColor(event.clientX, event.clientY);
        this.changingColor.set(true);
        this.onPointerMoveListenerFn = this.render.listen('document', 'pointermove', (e) => this.handleMove(e));
        this.onPointerUpListenerFn = this.render.listen('document', 'pointerup', () => this.handleUp());
    }
    handleUp() {
        this.changingColor.set(false);
        this.onPointerMoveListenerFn();
        this.onPointerUpListenerFn();
    }
    setColor(clientX, clientY) {
        const circleElement = this.circle().nativeElement;
        const parentStats = circleElement.parentElement.getBoundingClientRect();
        const x = Math.max(0, Math.min(parentStats.width, clientX - parentStats.left));
        const y = Math.max(0, Math.min(parentStats.height, clientY - parentStats.top));
        this.setColorByXY(x, y);
    }
    /**
     *  @ignore
     */
    get __hostClass() {
        return `ax-color-palette-picker`;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPalettePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: AXColorPalettePickerComponent, isStandalone: true, selector: "ax-color-palette-picker", host: { properties: { "class": "this.__hostClass" } }, providers: [
            {
                provide: AXColorPaletteChildComponent,
                useExisting: AXColorPalettePickerComponent,
            },
            AXUnsubscriber,
            { provide: AXComponent, useExisting: AXColorPalettePickerComponent },
        ], viewQueries: [{ propertyName: "circle", first: true, predicate: ["circle"], descendants: true, isSignal: true }, { propertyName: "sample", first: true, predicate: ["sample"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-color-box-overlay-trans\">\n  <div class=\"ax-color-box-overlay\" [style.background-color]=\"_bgColor\" (pointerdown)=\"handleDown($event)\">\n    <div class=\"ax-color-box-overlay-g1\"></div>\n    <div class=\"ax-color-box-overlay-g2\"></div>\n    <div #circle class=\"ax-color-box-pointer\"></div>\n  </div>\n</div>\n<div class=\"ax-pickers-container\">\n  <div class=\"ax-slider-container\">\n    <ax-range-slider\n      [min]=\"0\"\n      [max]=\"99\"\n      [mode]=\"'single'\"\n      [ngModel]=\"_gradient\"\n      class=\"ax-color-box-gradient\"\n      [disabled]=\"_parent.disabled\"\n      [readonly]=\"_parent.readonly\"\n      (ngModelChange)=\"_handleGradientChanged($event)\"\n      [style.--ax-comp-range-slider-color]=\"colorBoxGradientBG()\"\n    >\n    </ax-range-slider>\n    <ax-range-slider\n      [min]=\"0\"\n      [max]=\"1\"\n      [step]=\"0.01\"\n      [ngModel]=\"_rgba.a\"\n      [disabled]=\"_parent.disabled\"\n      [readonly]=\"_parent.readonly\"\n      class=\"ax-color-box-transparent\"\n      (ngModelChange)=\"_handleAlphaChanged($event)\"\n      [style.--ax-comp-range-slider-color]=\"\n        colorBoxTransparentColor.r +\n        ',' +\n        colorBoxTransparentColor.g +\n        ',' +\n        colorBoxTransparentColor.b +\n        ',' +\n        colorBoxTransparentColor.a\n      \"\n      [style.--ax-comp-color-palette-transparent-color]=\"\n        'rgba(' + colorBoxTransparentColor.r + ',' + colorBoxTransparentColor.g + ',' + colorBoxTransparentColor.b + ')'\n      \"\n    >\n    </ax-range-slider>\n  </div>\n  <div class=\"ax-color-sample\" #sample></div>\n</div>\n", dependencies: [{ kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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,
                        { provide: AXComponent, useExisting: AXColorPalettePickerComponent },
                    ], imports: [AXRangeSliderComponent, FormsModule], template: "<div class=\"ax-color-box-overlay-trans\">\n  <div class=\"ax-color-box-overlay\" [style.background-color]=\"_bgColor\" (pointerdown)=\"handleDown($event)\">\n    <div class=\"ax-color-box-overlay-g1\"></div>\n    <div class=\"ax-color-box-overlay-g2\"></div>\n    <div #circle class=\"ax-color-box-pointer\"></div>\n  </div>\n</div>\n<div class=\"ax-pickers-container\">\n  <div class=\"ax-slider-container\">\n    <ax-range-slider\n      [min]=\"0\"\n      [max]=\"99\"\n      [mode]=\"'single'\"\n      [ngModel]=\"_gradient\"\n      class=\"ax-color-box-gradient\"\n      [disabled]=\"_parent.disabled\"\n      [readonly]=\"_parent.readonly\"\n      (ngModelChange)=\"_handleGradientChanged($event)\"\n      [style.--ax-comp-range-slider-color]=\"colorBoxGradientBG()\"\n    >\n    </ax-range-slider>\n    <ax-range-slider\n      [min]=\"0\"\n      [max]=\"1\"\n      [step]=\"0.01\"\n      [ngModel]=\"_rgba.a\"\n      [disabled]=\"_parent.disabled\"\n      [readonly]=\"_parent.readonly\"\n      class=\"ax-color-box-transparent\"\n      (ngModelChange)=\"_handleAlphaChanged($event)\"\n      [style.--ax-comp-range-slider-color]=\"\n        colorBoxTransparentColor.r +\n        ',' +\n        colorBoxTransparentColor.g +\n        ',' +\n        colorBoxTransparentColor.b +\n        ',' +\n        colorBoxTransparentColor.a\n      \"\n      [style.--ax-comp-color-palette-transparent-color]=\"\n        'rgba(' + colorBoxTransparentColor.r + ',' + colorBoxTransparentColor.g + ',' + colorBoxTransparentColor.b + ')'\n      \"\n    >\n    </ax-range-slider>\n  </div>\n  <div class=\"ax-color-sample\" #sample></div>\n</div>\n" }]
        }], ctorParameters: () => [], propDecorators: { circle: [{ type: i0.ViewChild, args: ['circle', { isSignal: true }] }], sample: [{ type: i0.ViewChild, args: ['sample', { isSignal: true }] }], __hostClass: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * Component that displays a preview of the selected color in the palette.
 *
 * @category Components
 */
class AXColorPalettePreviewComponent extends MXBaseComponent {
    /**
     *  @ignore
     */
    constructor() {
        super();
        this._parent = inject(AXColorPaletteParentComponent);
        this._zone = inject(NgZone);
        this._unsubscriber = inject(AXUnsubscriber);
        const _parent = this._parent;
        const _zone = this._zone;
        const _unsubscriber = this._unsubscriber;
        _parent.onValueChanged.pipe(_unsubscriber.takeUntilDestroy).subscribe((e) => {
            _zone.runOutsideAngular(this.applyParent.bind(this));
        });
    }
    /**
     *  @ignore
     */
    ngAfterViewInit() {
        this.applyParent();
    }
    /**
     *  @ignore
     */
    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';
    }
    /**
     *  @ignore
     */
    get __hostClass() {
        return `ax-color-palette-preview`;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPalettePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AXColorPalettePreviewComponent, isStandalone: true, selector: "ax-color-palette-preview", host: { properties: { "class": "this.__hostClass" } }, providers: [
            {
                provide: AXColorPaletteChildComponent,
                useExisting: AXColorPalettePreviewComponent,
            },
            AXUnsubscriber,
            { provide: AXComponent, 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: "20.3.16", 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,
                        { provide: AXComponent, useExisting: AXColorPalettePreviewComponent },
                    ],
                }]
        }], ctorParameters: () => [], propDecorators: { __hostClass: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * Displays color swatches or favorites, allowing color selection.
 *
 * @category Components
 */
class AXColorPaletteSwatchesComponent extends MXBaseComponent {
    /**
     *  @ignore
     */
    constructor() {
        super();
        this._parent = inject(AXColorPaletteParentComponent);
        this._unsubscriber = inject(AXUnsubscriber);
        /**
         * List of color objects for display, each with a `code` property.
         * @defaultValue []
         */
        this.colors = [];
        const _parent = this._parent;
        const _unsubscriber = this._unsubscriber;
        _parent.onValueChanged
            .pipe(_unsubscriber.takeUntilDestroy)
            .pipe(distinctUntilChanged())
            .subscribe(() => {
            this.applyParent();
        });
    }
    /**
     *  @ignore
     */
    applyParent() {
        this._selected = AXColorUtil.toString(this._parent.value, 'hex').toLowerCase();
        this.cdr.detectChanges();
    }
    /**
     *  @ignore
     */
    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));
        }
    }
    /**
     *  @ignore
     */
    ngAfterViewInit() {
        this.applyParent();
    }
    /**
     *  @ignore
     */
    _handleClick(e, color) {
        if (this._parent.disabled || this._parent.readonly)
            return;
        this._parent.commitValue(color.code, true);
    }
    /**
     *  @ignore
     */
    _format(color) {
        return {
            code: color.code.toLowerCase(),
        };
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteSwatchesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXColorPaletteSwatchesComponent, isStandalone: true, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: { colors: "colors" }, providers: [
            {
                provide: AXColorPaletteChildComponent,
                useExisting: AXColorPaletteSwatchesComponent,
            },
            AXUnsubscriber,
            { provide: AXComponent, useExisting: AXColorPaletteSwatchesComponent },
        ], usesInheritance: true, ngImport: i0, template: `
    @for (color of colors; track $index) {
      <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: "20.3.16", ngImport: i0, type: AXColorPaletteSwatchesComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'ax-color-palette-swatches, ax-color-palette-favorite',
                    template: `
    @for (color of colors; track $index) {
      <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,
                        { provide: AXComponent, useExisting: AXColorPaletteSwatchesComponent },
                    ],
                }]
        }], ctorParameters: () => [], propDecorators: { colors: [{
                type: Input
            }] } });

/**
 * A color palette component that allows for color selection and interaction.
 *
 * @category Components
 */
class AXColorPaletteComponent extends MXValueComponent {
    /**
     *  @ignore
     */
    get __hostDisabled() {
        return this.disabled;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXColorPaletteComponent, isStandalone: true, selector: "ax-color-palette", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", value: "value", state: "state", name: "name" }, 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: AXColorPaletteComponent },
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => AXColorPaletteComponent),
                multi: true,
            },
            {
                provide: AXColorPaletteParentComponent,
                useExisting: AXColorPaletteComponent,
            },
            { provide: AXComponent, useExisting: AXColorPaletteComponent },
            AXColorPaletteService,
        ], 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<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>\n", styles: ["ax-color-palette{display:flex;width:100%;flex-direction:column;padding:.5rem;gap:.5rem}@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}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}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;text-transform:uppercase;border-radius:.25rem}ax-color-palette ax-color-palette-favorite{display:block}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;max-height:9rem;grid-template-columns:repeat(11,minmax(0,1fr));gap:.5rem;overflow-y:auto;overflow-x:hidden;padding:.5rem;scrollbar-width:thin}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:.25rem;border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}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{border-color:rgba(var(--ax-sys-color-border-lighter-surface));border-width:2px}ax-color-palette ax-color-palette-input{display:flex;gap:.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 .select-box-container{width:fit-content}ax-color-palette ax-color-palette-input .palette-inputs div{width:100%;text-align:center}ax-color-palette ax-color-palette-input .palette-inputs .ax-editor-container .ax-input{padding:0;text-align:center}ax-color-palette ax-color-palette-picker{display:flex;flex-direction:column;gap:.5rem}ax-color-palette ax-color-palette-picker .ax-color-box-overlay-trans{overflow:hidden;border-radius:.25rem;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=);touch-action:none}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:1rem;width:1rem;border-radius:9999px;border-width:.25rem;background-color:transparent;box-shadow:#00000080 0 0 5px;border-color:rgba(var(--ax-sys-color-light))}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-pickers-container{gap:1rem;display:flex}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container{width:100%;gap:.5rem;display:flex;flex-direction:column}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider{--ax-comp-range-slider-ring-size: 0;--ax-comp-range-slider-bar-height: 1rem;--ax-comp-range-slider-handler-size: 1rem;--ax-comp-range-slider-ring-color: var(--ax-sys-color-border-surface);padding:0}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider .ax-range-slider-handler{border-width:.25rem;border-color:rgba(var(--ax-sys-color-light));box-shadow:#00000080 0 0 5px}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider .ax-range-slider-handler:hover{box-shadow:#00000080 0 0 7px}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-gradient .ax-range-slider-bar{background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-gradient .ax-range-slider-highlight{background:transparent!important}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-transparent .ax-range-slider-bar{background-image:linear-gradient(to right,rgba(255,255,255,0),var(--ax-comp-color-palette-transparent-color)),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-transparent .ax-range-slider-highlight{background:transparent!important}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-color-sample{width:var(--ax-comp-color-palette-color-sample-width, 3.5rem);border-radius:.25rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview" }, { kind: "component", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker" }, { 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: "20.3.16", ngImport: i0, type: AXColorPaletteComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-color-palette', inputs: ['disabled', 'tabIndex', 'readonly', 'value', 'state', 'name'], outputs: ['onBlur', 'onFocus', 'valueChange', 'stateChange', 'onValueChanged', 'readonlyChange', 'disabledChange'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        { provide: AXValuableComponent, useExisting: AXColorPaletteComponent },
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => AXColorPaletteComponent),
                            multi: true,
                        },
                        {
                            provide: AXColorPaletteParentComponent,
                            useExisting: AXColorPaletteComponent,
                        },
                        { provide: AXComponent, useExisting: AXColorPaletteComponent },
                        AXColorPaletteService,
                    ], imports: [
                        NgTemplateOutlet,
                        AXColorPalettePreviewComponent,
                        AXColorPalettePickerComponent,
                        AXColorPaletteSwatchesComponent,
                        AXColorPaletteInputComponent,
                    ], 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<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>\n", styles: ["ax-color-palette{display:flex;width:100%;flex-direction:column;padding:.5rem;gap:.5rem}@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}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}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;text-transform:uppercase;border-radius:.25rem}ax-color-palette ax-color-palette-favorite{display:block}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;max-height:9rem;grid-template-columns:repeat(11,minmax(0,1fr));gap:.5rem;overflow-y:auto;overflow-x:hidden;padding:.5rem;scrollbar-width:thin}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:.25rem;border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}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{border-color:rgba(var(--ax-sys-color-border-lighter-surface));border-width:2px}ax-color-palette ax-color-palette-input{display:flex;gap:.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 .select-box-container{width:fit-content}ax-color-palette ax-color-palette-input .palette-inputs div{width:100%;text-align:center}ax-color-palette ax-color-palette-input .palette-inputs .ax-editor-container .ax-input{padding:0;text-align:center}ax-color-palette ax-color-palette-picker{display:flex;flex-direction:column;gap:.5rem}ax-color-palette ax-color-palette-picker .ax-color-box-overlay-trans{overflow:hidden;border-radius:.25rem;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=);touch-action:none}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:1rem;width:1rem;border-radius:9999px;border-width:.25rem;background-color:transparent;box-shadow:#00000080 0 0 5px;border-color:rgba(var(--ax-sys-color-light))}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-pickers-container{gap:1rem;display:flex}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container{width:100%;gap:.5rem;display:flex;flex-direction:column}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider{--ax-comp-range-slider-ring-size: 0;--ax-comp-range-slider-bar-height: 1rem;--ax-comp-range-slider-handler-size: 1rem;--ax-comp-range-slider-ring-color: var(--ax-sys-color-border-surface);padding:0}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider .ax-range-slider-handler{border-width:.25rem;border-color:rgba(var(--ax-sys-color-light));box-shadow:#00000080 0 0 5px}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider .ax-range-slider-handler:hover{box-shadow:#00000080 0 0 7px}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-gradient .ax-range-slider-bar{background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-gradient .ax-range-slider-highlight{background:transparent!important}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-transparent .ax-range-slider-bar{background-image:linear-gradient(to right,rgba(255,255,255,0),var(--ax-comp-color-palette-transparent-color)),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-transparent .ax-range-slider-highlight{background:transparent!important}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-color-sample{width:var(--ax-comp-color-palette-color-sample-width, 3.5rem);border-radius:.25rem}\n"] }]
        }], propDecorators: { _children: [{
                type: ContentChildren,
                args: [AXColorPaletteChildComponent]
            }], __hostDisabled: [{
                type: HostBinding,
                args: ['class.ax-state-disabled']
            }] } });

class AXColorPaletteModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteModule, imports: [AXColorPaletteComponent,
            AXColorPalettePreviewComponent,
            AXColorPaletteSwatchesComponent,
            AXColorPaletteInputComponent,
            AXColorPalettePickerComponent], exports: [AXColorPaletteComponent,
            AXColorPalettePreviewComponent,
            AXColorPaletteSwatchesComponent,
            AXColorPaletteInputComponent,
            AXColorPalettePickerComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteModule, imports: [AXColorPaletteComponent,
            AXColorPaletteInputComponent,
            AXColorPalettePickerComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        AXColorPaletteComponent,
                        AXColorPalettePreviewComponent,
                        AXColorPaletteSwatchesComponent,
                        AXColorPaletteInputComponent,
                        AXColorPalettePickerComponent,
                    ],
                    exports: [
                        AXColorPaletteComponent,
                        AXColorPalettePreviewComponent,
                        AXColorPaletteSwatchesComponent,
                        AXColorPaletteInputComponent,
                        AXColorPalettePickerComponent,
                    ],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { AXColorPaletteChildComponent, AXColorPaletteComponent, AXColorPaletteInputComponent, AXColorPaletteModule, AXColorPaletteParentComponent, AXColorPalettePickerComponent, AXColorPalettePreviewComponent, AXColorPaletteSwatchesComponent, AXDefaultColorPalette };
//# sourceMappingURL=acorex-components-color-palette.mjs.map
