@acorex/components 22.1.0-next.31 → 22.1.0-next.33

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

@@ -12,17 +12,17 @@ import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import { distinctUntilChanged } from 'rxjs/operators';
 
 class AXColorPaletteParentComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXColorPaletteParentComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXColorPaletteParentComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXColorPaletteParentComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXColorPaletteParentComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXColorPaletteParentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXColorPaletteParentComponent, decorators: [{
             type: Injectable
         }] });
 class AXColorPaletteChildComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXColorPaletteChildComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXColorPaletteChildComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXColorPaletteChildComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXColorPaletteChildComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXColorPaletteChildComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXColorPaletteChildComponent, decorators: [{
             type: Injectable
         }] });
 const AXDefaultColorPalette = [
@@ -319,10 +319,10 @@ class AXColorPaletteService {
     constructor() {
         this.colorMode = 'hex';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXColorPaletteService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXColorPaletteService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXColorPaletteService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXColorPaletteService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXColorPaletteService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXColorPaletteService, decorators: [{
             type: Injectable
         }] });
 
@@ -434,8 +434,8 @@ class AXColorPaletteInputComponent extends MXBaseComponent {
     get __hostClass() {
         return `ax-color-palette-input`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXColorPaletteInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXColorPaletteInputComponent, isStandalone: true, selector: "ax-color-palette-input", host: { properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXColorPaletteInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXColorPaletteInputComponent, isStandalone: true, selector: "ax-color-palette-input", host: { properties: { "class": "this.__hostClass" } }, providers: [
             {
                 provide: AXColorPaletteChildComponent,
                 useExisting: AXColorPaletteInputComponent,
@@ -444,7 +444,7 @@ class AXColorPaletteInputComponent extends MXBaseComponent {
             { 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", "onMaskChanged"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXColorPaletteInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXColorPaletteInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-palette-input', encapsulation: ViewEncapsulation.None, providers: [
                         {
@@ -713,8 +713,8 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
     get __hostClass() {
         return `ax-color-palette-picker`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXColorPalettePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: AXColorPalettePickerComponent, isStandalone: true, selector: "ax-color-palette-picker", host: { properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXColorPalettePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: AXColorPalettePickerComponent, isStandalone: true, selector: "ax-color-palette-picker", host: { properties: { "class": "this.__hostClass" } }, providers: [
             {
                 provide: AXColorPaletteChildComponent,
                 useExisting: AXColorPalettePickerComponent,
@@ -723,7 +723,7 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
             { 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXColorPalettePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXColorPalettePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-palette-picker', encapsulation: ViewEncapsulation.None, providers: [
                         {
@@ -782,8 +782,8 @@ class AXColorPalettePreviewComponent extends MXBaseComponent {
     get __hostClass() {
         return `ax-color-palette-preview`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXColorPalettePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXColorPalettePreviewComponent, isStandalone: true, selector: "ax-color-palette-preview", host: { properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXColorPalettePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: AXColorPalettePreviewComponent, isStandalone: true, selector: "ax-color-palette-preview", host: { properties: { "class": "this.__hostClass" } }, providers: [
             {
                 provide: AXColorPaletteChildComponent,
                 useExisting: AXColorPalettePreviewComponent,
@@ -792,7 +792,7 @@ class AXColorPalettePreviewComponent extends MXBaseComponent {
             { provide: AXComponent, useExisting: AXColorPalettePreviewComponent },
         ], usesInheritance: true, ngImport: i0, template: ` <div class="palette-preview-overlay" [class.ax-state-disabled]="_parent.disabled"></div>`, isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXColorPalettePreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXColorPalettePreviewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-color-palette-preview',
@@ -878,8 +878,8 @@ class AXColorPaletteSwatchesComponent extends MXBaseComponent {
             code: color.code.toLowerCase(),
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXColorPaletteSwatchesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXColorPaletteSwatchesComponent, isStandalone: true, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: { colors: "colors" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXColorPaletteSwatchesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXColorPaletteSwatchesComponent, isStandalone: true, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: { colors: "colors" }, providers: [
             {
                 provide: AXColorPaletteChildComponent,
                 useExisting: AXColorPaletteSwatchesComponent,
@@ -897,7 +897,7 @@ class AXColorPaletteSwatchesComponent extends MXBaseComponent {
     }
   `, isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXColorPaletteSwatchesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXColorPaletteSwatchesComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-color-palette-swatches, ax-color-palette-favorite',
@@ -937,8 +937,8 @@ class AXColorPaletteComponent extends MXValueComponent {
     get __hostDisabled() {
         return this.disabled;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXColorPaletteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXColorPaletteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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,
@@ -953,7 +953,7 @@ class AXColorPaletteComponent extends MXValueComponent {
             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: ["@layer properties;@layer components{ax-color-palette{--trans-bg: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=);display:flex;width:100%;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 2)}@media(min-width:48rem){ax-color-palette{width:calc(var(--spacing, .25rem) * 80)}}ax-color-palette.ax-state-disabled{cursor:not-allowed;opacity:50%}:is(ax-color-palette.ax-state-disabled ax-color-palette-swatches,ax-color-palette.ax-state-disabled ax-color-palette-favorite) div:hover,:is(ax-color-palette.ax-state-disabled ax-color-palette-swatches,ax-color-palette.ax-state-disabled ax-color-palette-favorite) div.ax-state-selected{cursor:not-allowed;opacity:50%}ax-color-palette ax-header,ax-color-palette ax-footer{display:flex}ax-color-palette ax-color-palette-preview{position:relative;height:calc(var(--spacing, .25rem) * 24);width:100%;gap:calc(var(--spacing, .25rem) * 2);background-color:var(--trans-bg) left center}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;inset-inline-start:calc(var(--spacing, .25rem) * 0);display:flex;height:100%;width:100%;align-items:center;justify-content:center;border-radius:.25rem;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;text-transform:uppercase}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:calc(var(--spacing, .25rem) * 36);grid-template-columns:repeat(11,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 2);overflow-x:hidden;overflow-y:auto;padding:calc(var(--spacing, .25rem) * 2);scrollbar-width:thin}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:.25rem;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:before,:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:after{--tw-content: \"\";content:var(--tw-content)}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:before{float:left;padding-top:100%}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:after{clear:both;display:block}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:hover,:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div.ax-state-selected{border-style:var(--tw-border-style);border-width:2px;border-color:rgba(var(--ax-sys-color-border-lighter-surface))}ax-color-palette ax-color-palette-input{display:flex;gap:calc(var(--spacing, .25rem) * 2)}ax-color-palette ax-color-palette-input .palette-inputs{display:flex;flex:1;gap:calc(var(--spacing, .25rem) * 2)}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:calc(var(--spacing, .25rem) * 0);text-align:center}ax-color-palette ax-color-palette-picker{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}ax-color-palette ax-color-palette-picker .ax-color-box-overlay-trans{touch-action:none;overflow:hidden;border-radius:.25rem;background-image:var(--trans-bg)}ax-color-palette ax-color-palette-picker .ax-color-box-overlay{position:relative;display:flex;height:calc(var(--spacing, .25rem) * 32);width:100%}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-pointer{position:relative;z-index:10;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 4);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:4px;border-color:var(--color-white, #fff);background-color:transparent;--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color: #000}@supports (color: color-mix(in lab,red,red)){ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-pointer{--tw-shadow-color: color-mix(in oklab, var(--color-black, #000) var(--tw-shadow-alpha), transparent)}}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{position:absolute;inset-inline-start:calc(var(--spacing, .25rem) * 0);inset-inline-end:calc(var(--spacing, .25rem) * 0);top:calc(var(--spacing, .25rem) * 0);bottom:calc(var(--spacing, .25rem) * 0);height:100%;width:100%}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1{z-index:0;background-image:linear-gradient(to right,#fff,#fff0)}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{z-index:10;background-image:linear-gradient(to bottom,transparent 0%,#000 100%)}ax-color-palette ax-color-palette-picker .ax-pickers-container{display:flex;gap:calc(var(--spacing, .25rem) * 4)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container{display:flex;width:100%;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider{padding:calc(var(--spacing, .25rem) * 0)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 4);border-style:var(--tw-border-style);border-width:4px;border-color:var(--color-white, #fff);background-color:transparent;--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color: #000}@supports (color: color-mix(in lab,red,red)){ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider .ax-range-slider-handler{--tw-shadow-color: color-mix(in oklab, var(--color-black, #000) var(--tw-shadow-alpha), transparent)}}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-gradient .ax-range-slider-bar{height:calc(var(--spacing, .25rem) * 4);background-image: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-color: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{height:calc(var(--spacing, .25rem) * 4);background-image:linear-gradient(to right,rgba(255,255,255,0),var(--ax-comp-color-palette-transparent-color)),var(--trans-bg)}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-color:transparent!important}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-color-sample{width:calc(var(--spacing, .25rem) * 14);border-radius:.25rem}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-content{syntax: \"*\"; inherits: false; initial-value: \"\";}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-content: \"\";--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\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" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXColorPaletteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", 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, providers: [
                         { provide: AXValuableComponent, useExisting: AXColorPaletteComponent },
@@ -984,8 +984,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             }] } });
 
 class AXColorPaletteModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXColorPaletteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXColorPaletteModule, imports: [AXColorPaletteComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXColorPaletteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: AXColorPaletteModule, imports: [AXColorPaletteComponent,
             AXColorPalettePreviewComponent,
             AXColorPaletteSwatchesComponent,
             AXColorPaletteInputComponent,
@@ -994,11 +994,11 @@ class AXColorPaletteModule {
             AXColorPaletteSwatchesComponent,
             AXColorPaletteInputComponent,
             AXColorPalettePickerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXColorPaletteModule, imports: [AXColorPaletteComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXColorPaletteModule, imports: [AXColorPaletteComponent,
             AXColorPaletteInputComponent,
             AXColorPalettePickerComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXColorPaletteModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXColorPaletteModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [