@acorex/components 18.16.0-next.8 → 19.0.0

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

@@ -9,7 +9,6 @@ import * as i3 from '@acorex/components/text-box';
 import { AXTextBoxModule } from '@acorex/components/text-box';
 import * as i4 from '@acorex/components/number-box';
 import { AXNumberBoxModule } from '@acorex/components/number-box';
-import { isBrowser } from '@acorex/core/platform';
 import * as i3$1 from '@acorex/components/range-slider';
 import { AXRangeSliderModule } from '@acorex/components/range-slider';
 import { distinctUntilChanged } from 'rxjs/operators';
@@ -22,17 +21,17 @@ import { AXSliderModule } from '@acorex/components/slider';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 
 class AXColorPaletteParentComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXColorPaletteParentComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXColorPaletteParentComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXColorPaletteParentComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXColorPaletteParentComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXColorPaletteParentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXColorPaletteParentComponent, decorators: [{
             type: Injectable
         }] });
 class AXColorPaletteChildComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXColorPaletteChildComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXColorPaletteChildComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXColorPaletteChildComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXColorPaletteChildComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXColorPaletteChildComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXColorPaletteChildComponent, decorators: [{
             type: Injectable
         }] });
 const AXDefaultColorPalette = [
@@ -281,7 +280,7 @@ class AXColorPaletteInputComponent extends MXBaseComponent {
         /**
          *  @ignore
          */
-        this._colorMode = 'hex';
+        this._colorMode = 'rgba';
         /**
          *  @ignore
          */
@@ -313,15 +312,15 @@ class AXColorPaletteInputComponent extends MXBaseComponent {
             };
         }
         else {
+            if (!u && this._rgba.a != 1) {
+                this._colorMode = 'rgba';
+            }
             if (this._colorMode == 'rgba') {
                 Object.assign(this._rgba, AXColorUtil.to(value, 'rgba'));
             }
             if (this._colorMode == 'hex') {
                 this._hex = AXColorUtil.toString(value, 'hex');
             }
-            if (!u && this._rgba.a != 1) {
-                this._colorMode = 'rgba';
-            }
         }
         this.checkValid();
         this.cdr.detectChanges();
@@ -378,8 +377,8 @@ class AXColorPaletteInputComponent extends MXBaseComponent {
     get __hostClass() {
         return `ax-color-palette-input`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXColorPaletteInputComponent, deps: [{ token: AXColorPaletteParentComponent }, { token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input", host: { properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXColorPaletteInputComponent, deps: [{ token: AXColorPaletteParentComponent }, { token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXColorPaletteInputComponent, isStandalone: false, selector: "ax-color-palette-input", host: { properties: { "class": "this.__hostClass" } }, providers: [
             {
                 provide: AXColorPaletteChildComponent,
                 useExisting: AXColorPaletteInputComponent,
@@ -387,7 +386,7 @@ class AXColorPaletteInputComponent extends MXBaseComponent {
             AXUnsubscriber,
         ], usesInheritance: true, ngImport: i0, template: "<div class=\"palette-inputs\">\n  @switch (_colorMode) {\n    @case ('hex') {\n      <div>\n        <ax-text-box\n          class=\"ax-sm\"\n          [ngModel]=\"_hex\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          [state]=\"isValid ? 'clear' : 'error'\"\n          (onValueChanged)=\"_handleHEXAValueChanged($event)\"\n          [mask-options]=\"_hexMaskOptions\"\n        >\n        </ax-text-box>\n        <label>HEX</label>\n      </div>\n    }\n    @case ('rgba') {\n      <div>\n        <ax-number-box\n          class=\"ax-sm\"\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        <label>R</label>\n      </div>\n      <div>\n        <ax-number-box\n          class=\"ax-sm\"\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        <label>G</label>\n      </div>\n      <div>\n        <ax-number-box\n          class=\"ax-sm\"\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        <label>B</label>\n      </div>\n      <div>\n        <ax-number-box\n          class=\"ax-sm\"\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        <label>A</label>\n      </div>\n    }\n  }\n</div>\n<button\n  type=\"button\"\n  class=\"ax-general-button ax-button-rounded ax-button-icon ax-sm\"\n  (click)=\"_handleChangeInputMode()\"\n  [disabled]=\"_parent.disabled\"\n>\n  <span class=\"ax-icon ax-icon-unfold-more ax-bold\"></span>\n</button>\n", styles: [".ax-bold{font-weight:700}\n"], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: i4.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXColorPaletteInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXColorPaletteInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-palette-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -395,7 +394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                             useExisting: AXColorPaletteInputComponent,
                         },
                         AXUnsubscriber,
-                    ], template: "<div class=\"palette-inputs\">\n  @switch (_colorMode) {\n    @case ('hex') {\n      <div>\n        <ax-text-box\n          class=\"ax-sm\"\n          [ngModel]=\"_hex\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          [state]=\"isValid ? 'clear' : 'error'\"\n          (onValueChanged)=\"_handleHEXAValueChanged($event)\"\n          [mask-options]=\"_hexMaskOptions\"\n        >\n        </ax-text-box>\n        <label>HEX</label>\n      </div>\n    }\n    @case ('rgba') {\n      <div>\n        <ax-number-box\n          class=\"ax-sm\"\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        <label>R</label>\n      </div>\n      <div>\n        <ax-number-box\n          class=\"ax-sm\"\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        <label>G</label>\n      </div>\n      <div>\n        <ax-number-box\n          class=\"ax-sm\"\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        <label>B</label>\n      </div>\n      <div>\n        <ax-number-box\n          class=\"ax-sm\"\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        <label>A</label>\n      </div>\n    }\n  }\n</div>\n<button\n  type=\"button\"\n  class=\"ax-general-button ax-button-rounded ax-button-icon ax-sm\"\n  (click)=\"_handleChangeInputMode()\"\n  [disabled]=\"_parent.disabled\"\n>\n  <span class=\"ax-icon ax-icon-unfold-more ax-bold\"></span>\n</button>\n", styles: [".ax-bold{font-weight:700}\n"] }]
+                    ], standalone: false, template: "<div class=\"palette-inputs\">\n  @switch (_colorMode) {\n    @case ('hex') {\n      <div>\n        <ax-text-box\n          class=\"ax-sm\"\n          [ngModel]=\"_hex\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          [state]=\"isValid ? 'clear' : 'error'\"\n          (onValueChanged)=\"_handleHEXAValueChanged($event)\"\n          [mask-options]=\"_hexMaskOptions\"\n        >\n        </ax-text-box>\n        <label>HEX</label>\n      </div>\n    }\n    @case ('rgba') {\n      <div>\n        <ax-number-box\n          class=\"ax-sm\"\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        <label>R</label>\n      </div>\n      <div>\n        <ax-number-box\n          class=\"ax-sm\"\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        <label>G</label>\n      </div>\n      <div>\n        <ax-number-box\n          class=\"ax-sm\"\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        <label>B</label>\n      </div>\n      <div>\n        <ax-number-box\n          class=\"ax-sm\"\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        <label>A</label>\n      </div>\n    }\n  }\n</div>\n<button\n  type=\"button\"\n  class=\"ax-general-button ax-button-rounded ax-button-icon ax-sm\"\n  (click)=\"_handleChangeInputMode()\"\n  [disabled]=\"_parent.disabled\"\n>\n  <span class=\"ax-icon ax-icon-unfold-more ax-bold\"></span>\n</button>\n", styles: [".ax-bold{font-weight:700}\n"] }]
         }], ctorParameters: () => [{ type: AXColorPaletteParentComponent, decorators: [{
                     type: Inject,
                     args: [AXColorPaletteParentComponent]
@@ -410,6 +409,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * @category Components
  */
 class AXColorPalettePickerComponent extends MXBaseComponent {
+    /**
+     *  @ignore
+     */
+    // protected dragPosition = { x: 0, y: 0 };
     /**
      *  @ignore
      */
@@ -453,10 +456,6 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
          *  @ignore
          */
         this._colors = this._gradients.rgb(100);
-        /**
-         *  @ignore
-         */
-        this.dragPosition = { x: 0, y: 0 };
         _parent.onValueChanged.pipe(_unsubscriber.takeUntilDestroy).subscribe((e) => {
             this._handleParentColorChanged();
         });
@@ -598,21 +597,14 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
      *  @ignore
      */
     setPointerByPercent(x, y) {
-        if (isBrowser()) {
-            const surface = this.getHostElement().querySelector('.ax-color-box-overlay');
-            if (!surface)
-                return;
-            const sb = surface?.getBoundingClientRect();
-            const pointer = this.getHostElement().querySelector('.ax-color-box-pointer');
-            const pb = pointer?.getBoundingClientRect();
-            const w = pb.width / 2;
-            const width = sb.width; //+ pb.width
-            const height = sb.height; // + pb.width
-            this.dragPosition = {
-                x: (x * width) / 100 - w,
-                y: height - (y * height) / 100 - w,
-            };
-        }
+        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`;
     }
     /**
      *  @ignore
@@ -623,30 +615,26 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
     handleMove(event) {
         if (!this.changingColor())
             return;
-        this.placePointer(event);
+        this.setColor(event);
     }
     handleDown(event) {
         if (this._parent.disabled || this._parent.readonly)
             return;
-        this.placePointer(event);
+        this.setColor(event);
         this.changingColor.set(true);
     }
     handleUp() {
         this.changingColor.set(false);
     }
-    placePointer(event) {
+    setColor(event) {
         const circleElement = this.circle().nativeElement;
         const parentStats = circleElement.parentElement.getBoundingClientRect();
-        const circleHeight = circleElement.offsetHeight / 2;
-        const circleWidth = circleElement.offsetWidth / 2;
-        const top = event.clientY - parentStats.top - circleHeight;
-        const left = event.clientX - parentStats.left - circleWidth;
-        circleElement.style.top = `${Math.max(0 - circleHeight, Math.min(top, parentStats.height - circleHeight))}px`;
-        circleElement.style.left = `${Math.max(0 - circleWidth, Math.min(left, parentStats.width - circleWidth))}px`;
-        this.setColorByXY(event.clientX - parentStats.left, event.clientY - parentStats.top);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXColorPalettePickerComponent, deps: [{ token: AXColorPaletteParentComponent }, { token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker", host: { properties: { "class": "this.__hostClass" } }, providers: [
+        const x = Math.max(0, Math.min(parentStats.width, event.clientX - parentStats.left));
+        const y = Math.max(0, Math.min(parentStats.height, event.clientY - parentStats.top));
+        this.setColorByXY(x, y);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXColorPalettePickerComponent, deps: [{ token: AXColorPaletteParentComponent }, { token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: AXColorPalettePickerComponent, isStandalone: false, selector: "ax-color-palette-picker", host: { properties: { "class": "this.__hostClass" } }, providers: [
             {
                 provide: AXColorPaletteChildComponent,
                 useExisting: AXColorPalettePickerComponent,
@@ -654,7 +642,7 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
             AXUnsubscriber,
         ], viewQueries: [{ propertyName: "circle", first: true, predicate: ["circle"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-color-box-overlay-trans\">\n  <div\n    class=\"ax-color-box-overlay\"\n    [style.background-color]=\"_bgColor\"\n    (mousemove)=\"handleMove($event)\"\n    (mousedown)=\"handleDown($event)\"\n    (mouseup)=\"handleUp()\"\n    (mouseleave)=\"handleUp()\"\n  >\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\n<ax-range-slider\n  class=\"ax-color-box-gradient\"\n  [min]=\"0\"\n  [max]=\"100\"\n  [mode]=\"'single'\"\n  [ngModel]=\"_gradient\"\n  [disabled]=\"_parent.disabled\"\n  [readonly]=\"_parent.readonly\"\n  (ngModelChange)=\"_handleGradientChanged($event)\"\n>\n</ax-range-slider>\n<ax-range-slider\n  class=\"ax-color-box-transparent\"\n  [min]=\"0\"\n  [max]=\"1\"\n  [hasStep]=\"false\"\n  [ngModel]=\"_rgba.a\"\n  [disabled]=\"_parent.disabled\"\n  [readonly]=\"_parent.readonly\"\n  (ngModelChange)=\"_handleAlphaChanged($event)\"\n>\n</ax-range-slider>\n", dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXColorPalettePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXColorPalettePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-palette-picker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -662,7 +650,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                             useExisting: AXColorPalettePickerComponent,
                         },
                         AXUnsubscriber,
-                    ], template: "<div class=\"ax-color-box-overlay-trans\">\n  <div\n    class=\"ax-color-box-overlay\"\n    [style.background-color]=\"_bgColor\"\n    (mousemove)=\"handleMove($event)\"\n    (mousedown)=\"handleDown($event)\"\n    (mouseup)=\"handleUp()\"\n    (mouseleave)=\"handleUp()\"\n  >\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\n<ax-range-slider\n  class=\"ax-color-box-gradient\"\n  [min]=\"0\"\n  [max]=\"100\"\n  [mode]=\"'single'\"\n  [ngModel]=\"_gradient\"\n  [disabled]=\"_parent.disabled\"\n  [readonly]=\"_parent.readonly\"\n  (ngModelChange)=\"_handleGradientChanged($event)\"\n>\n</ax-range-slider>\n<ax-range-slider\n  class=\"ax-color-box-transparent\"\n  [min]=\"0\"\n  [max]=\"1\"\n  [hasStep]=\"false\"\n  [ngModel]=\"_rgba.a\"\n  [disabled]=\"_parent.disabled\"\n  [readonly]=\"_parent.readonly\"\n  (ngModelChange)=\"_handleAlphaChanged($event)\"\n>\n</ax-range-slider>\n" }]
+                    ], standalone: false, template: "<div class=\"ax-color-box-overlay-trans\">\n  <div\n    class=\"ax-color-box-overlay\"\n    [style.background-color]=\"_bgColor\"\n    (mousemove)=\"handleMove($event)\"\n    (mousedown)=\"handleDown($event)\"\n    (mouseup)=\"handleUp()\"\n    (mouseleave)=\"handleUp()\"\n  >\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\n<ax-range-slider\n  class=\"ax-color-box-gradient\"\n  [min]=\"0\"\n  [max]=\"100\"\n  [mode]=\"'single'\"\n  [ngModel]=\"_gradient\"\n  [disabled]=\"_parent.disabled\"\n  [readonly]=\"_parent.readonly\"\n  (ngModelChange)=\"_handleGradientChanged($event)\"\n>\n</ax-range-slider>\n<ax-range-slider\n  class=\"ax-color-box-transparent\"\n  [min]=\"0\"\n  [max]=\"1\"\n  [hasStep]=\"false\"\n  [ngModel]=\"_rgba.a\"\n  [disabled]=\"_parent.disabled\"\n  [readonly]=\"_parent.readonly\"\n  (ngModelChange)=\"_handleAlphaChanged($event)\"\n>\n</ax-range-slider>\n" }]
         }], ctorParameters: () => [{ type: AXColorPaletteParentComponent, decorators: [{
                     type: Inject,
                     args: [AXColorPaletteParentComponent]
@@ -712,8 +700,8 @@ class AXColorPalettePreviewComponent extends MXBaseComponent {
     get __hostClass() {
         return `ax-color-palette-preview`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXColorPalettePreviewComponent, deps: [{ token: AXColorPaletteParentComponent }, { token: i0.NgZone }, { token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview", host: { properties: { "classs": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXColorPalettePreviewComponent, deps: [{ token: AXColorPaletteParentComponent }, { token: i0.NgZone }, { token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXColorPalettePreviewComponent, isStandalone: false, selector: "ax-color-palette-preview", host: { properties: { "classs": "this.__hostClass" } }, providers: [
             {
                 provide: AXColorPaletteChildComponent,
                 useExisting: AXColorPalettePreviewComponent,
@@ -721,7 +709,7 @@ class AXColorPalettePreviewComponent extends MXBaseComponent {
             AXUnsubscriber,
         ], usesInheritance: true, ngImport: i0, template: `<div class="palette-preview-overlay" [class.ax-state-disabled]="_parent.disabled"></div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXColorPalettePreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXColorPalettePreviewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-color-palette-preview',
@@ -735,6 +723,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         },
                         AXUnsubscriber,
                     ],
+                    standalone: false
                 }]
         }], ctorParameters: () => [{ type: AXColorPaletteParentComponent, decorators: [{
                     type: Inject,
@@ -808,8 +797,8 @@ class AXColorPaletteSwatchesComponent extends MXBaseComponent {
             code: color.code.toLowerCase(),
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXColorPaletteSwatchesComponent, deps: [{ token: AXColorPaletteParentComponent }, { token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: { colors: "colors" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXColorPaletteSwatchesComponent, deps: [{ token: AXColorPaletteParentComponent }, { token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXColorPaletteSwatchesComponent, isStandalone: false, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: { colors: "colors" }, providers: [
             {
                 provide: AXColorPaletteChildComponent,
                 useExisting: AXColorPaletteSwatchesComponent,
@@ -826,7 +815,7 @@ class AXColorPaletteSwatchesComponent extends MXBaseComponent {
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXColorPaletteSwatchesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXColorPaletteSwatchesComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-color-palette-swatches, ax-color-palette-favorite',
@@ -849,6 +838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         },
                         AXUnsubscriber,
                     ],
+                    standalone: false
                 }]
         }], ctorParameters: () => [{ type: AXColorPaletteParentComponent, decorators: [{
                     type: Inject,
@@ -869,8 +859,8 @@ class AXColorPalleteComponent extends MXValueComponent {
     get __hostDisabled() {
         return this.disabled;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXColorPalleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXColorPalleteComponent, selector: "ax-color-palette", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", value: "value", state: "state", name: "name", checked: "checked" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", readonlyChange: "readonlyChange", disabledChange: "disabledChange" }, host: { properties: { "class.ax-state-disabled": "this.__hostDisabled" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXColorPalleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXColorPalleteComponent, isStandalone: false, selector: "ax-color-palette", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", value: "value", state: "state", name: "name", checked: "checked" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", readonlyChange: "readonlyChange", disabledChange: "disabledChange" }, host: { properties: { "class.ax-state-disabled": "this.__hostDisabled" } }, providers: [
             { provide: AXValuableComponent, useExisting: AXColorPalleteComponent },
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -883,7 +873,7 @@ class AXColorPalleteComponent extends MXValueComponent {
             },
         ], queries: [{ propertyName: "_children", predicate: AXColorPaletteChildComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select='ax-header'></ng-content>\n\n@if(_children?.length){\n<ng-container [ngTemplateOutlet]=\"custom\"></ng-container>\n} @else{\n<ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n\n}\n<ng-template #custom>\n    <ng-content select='ax-color-palette-preview'></ng-content>\n    <ng-content select='ax-color-palette-picker'></ng-content>\n    <ng-content select='ax-color-palette-swatches'></ng-content>\n    <ng-content select='ax-color-palette-favorite'></ng-content>\n    <ng-content select='ax-color-palette-input'></ng-content>\n</ng-template>\n<ng-template #default>\n    <ax-color-palette-preview></ax-color-palette-preview>\n    <ax-color-palette-picker></ax-color-palette-picker>\n    <ax-color-palette-swatches></ax-color-palette-swatches>\n    <ax-color-palette-input></ax-color-palette-input>\n</ng-template>\n<ng-content select='ax-footer'></ng-content>", styles: ["ax-color-palette{display:flex;width:100%;flex-direction:column;border-radius:var(--ax-rounded-border-default);border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface))}@media (min-width: 768px){ax-color-palette{width:20rem}}ax-color-palette.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-color-palette.ax-state-disabled ax-color-palette-swatches div:hover,ax-color-palette.ax-state-disabled ax-color-palette-swatches div.ax-state-selected,ax-color-palette.ax-state-disabled ax-color-palette-favorite div:hover,ax-color-palette.ax-state-disabled ax-color-palette-favorite div.ax-state-selected{cursor:not-allowed;opacity:.5}ax-color-palette ax-header,ax-color-palette ax-footer{display:flex;border-top-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.75rem}ax-color-palette ax-color-palette-preview{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;position:relative;height:6rem;width:100%;gap:.5rem;border-top-left-radius:var(--ax-rounded-border-default);border-top-right-radius:var(--ax-rounded-border-default)}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;inset-inline-start:0px;display:flex;height:100%;width:100%;align-items:center;justify-content:center;border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default));text-transform:uppercase}ax-color-palette ax-color-palette-favorite{display:block;border-top-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;max-height:9rem;grid-template-columns:repeat(10,minmax(0,1fr));gap:.5rem;overflow-y:auto;overflow-x:hidden;padding:.5rem}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:before,ax-color-palette ax-color-palette-favorite div:after{content:\"\"}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{float:left;padding-top:100%}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{clear:both;display:block}ax-color-palette ax-color-palette-swatches div:hover,ax-color-palette ax-color-palette-swatches div.ax-state-selected,ax-color-palette ax-color-palette-favorite div:hover,ax-color-palette ax-color-palette-favorite div.ax-state-selected{box-shadow:0 0 0 1px rgba(var(--ax-color-white)),0 0 0 3px rgba(var(--ax-color-black))}ax-color-palette ax-color-palette-input{display:flex;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-input .palette-inputs{display:flex;flex:1 1 0%;gap:.5rem}ax-color-palette ax-color-palette-input .palette-inputs div{width:100%;text-align:center}ax-color-palette ax-color-palette-input .palette-inputs div label{margin-top:.75rem;font-size:.75rem;line-height:1rem}ax-color-palette ax-color-palette-input .palette-inputs .ax-editor-container .ax-input{padding:0}ax-color-palette ax-color-palette-picker{display:flex;flex-direction:column;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-picker .ax-color-box-overlay-trans{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker .ax-color-box-overlay{position:relative;display:flex;height:8rem;width:100%}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-pointer{position:relative;z-index:10;height:.75rem;width:.75rem;border-radius:9999px;border-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:transparent}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{position:absolute;bottom:0;inset-inline-end:0px;inset-inline-start:0px;top:0;height:100%;width:100%}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1{background:linear-gradient(to right,#fff,#fff0);z-index:0}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{z-index:10;background:linear-gradient(to bottom,transparent 0%,#000 100%)}ax-color-palette ax-color-palette-picker ax-range-slider.ax-color-box-gradient .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-range-slider.ax-color-box-gradient .ax-range-slider-highlight{background:transparent!important}ax-color-palette ax-color-palette-picker ax-range-slider.ax-color-box-gradient .ax-range-slider-handler{background:#fff!important;border:1px solid lightgray!important}ax-color-palette ax-color-palette-picker ax-range-slider.ax-color-box-transparent .ax-range-slider-bar{background-image:linear-gradient(to right,#f5f6fc00,#000),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker ax-range-slider.ax-color-box-transparent .ax-range-slider-highlight{background:transparent!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview" }, { kind: "component", type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: ["colors"] }, { kind: "component", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input" }, { kind: "component", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXColorPalleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXColorPalleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-palette', inputs: ['disabled', 'tabIndex', 'readonly', 'value', 'state', 'name', 'checked'], outputs: ['onBlur', 'onFocus', 'valueChange', 'stateChange', 'onValueChanged', 'readonlyChange', 'disabledChange'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: AXValuableComponent, useExisting: AXColorPalleteComponent },
@@ -896,7 +886,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                             provide: AXColorPaletteParentComponent,
                             useExisting: AXColorPalleteComponent,
                         },
-                    ], template: "<ng-content select='ax-header'></ng-content>\n\n@if(_children?.length){\n<ng-container [ngTemplateOutlet]=\"custom\"></ng-container>\n} @else{\n<ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n\n}\n<ng-template #custom>\n    <ng-content select='ax-color-palette-preview'></ng-content>\n    <ng-content select='ax-color-palette-picker'></ng-content>\n    <ng-content select='ax-color-palette-swatches'></ng-content>\n    <ng-content select='ax-color-palette-favorite'></ng-content>\n    <ng-content select='ax-color-palette-input'></ng-content>\n</ng-template>\n<ng-template #default>\n    <ax-color-palette-preview></ax-color-palette-preview>\n    <ax-color-palette-picker></ax-color-palette-picker>\n    <ax-color-palette-swatches></ax-color-palette-swatches>\n    <ax-color-palette-input></ax-color-palette-input>\n</ng-template>\n<ng-content select='ax-footer'></ng-content>", styles: ["ax-color-palette{display:flex;width:100%;flex-direction:column;border-radius:var(--ax-rounded-border-default);border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface))}@media (min-width: 768px){ax-color-palette{width:20rem}}ax-color-palette.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-color-palette.ax-state-disabled ax-color-palette-swatches div:hover,ax-color-palette.ax-state-disabled ax-color-palette-swatches div.ax-state-selected,ax-color-palette.ax-state-disabled ax-color-palette-favorite div:hover,ax-color-palette.ax-state-disabled ax-color-palette-favorite div.ax-state-selected{cursor:not-allowed;opacity:.5}ax-color-palette ax-header,ax-color-palette ax-footer{display:flex;border-top-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.75rem}ax-color-palette ax-color-palette-preview{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;position:relative;height:6rem;width:100%;gap:.5rem;border-top-left-radius:var(--ax-rounded-border-default);border-top-right-radius:var(--ax-rounded-border-default)}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;inset-inline-start:0px;display:flex;height:100%;width:100%;align-items:center;justify-content:center;border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default));text-transform:uppercase}ax-color-palette ax-color-palette-favorite{display:block;border-top-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;max-height:9rem;grid-template-columns:repeat(10,minmax(0,1fr));gap:.5rem;overflow-y:auto;overflow-x:hidden;padding:.5rem}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:before,ax-color-palette ax-color-palette-favorite div:after{content:\"\"}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{float:left;padding-top:100%}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{clear:both;display:block}ax-color-palette ax-color-palette-swatches div:hover,ax-color-palette ax-color-palette-swatches div.ax-state-selected,ax-color-palette ax-color-palette-favorite div:hover,ax-color-palette ax-color-palette-favorite div.ax-state-selected{box-shadow:0 0 0 1px rgba(var(--ax-color-white)),0 0 0 3px rgba(var(--ax-color-black))}ax-color-palette ax-color-palette-input{display:flex;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-input .palette-inputs{display:flex;flex:1 1 0%;gap:.5rem}ax-color-palette ax-color-palette-input .palette-inputs div{width:100%;text-align:center}ax-color-palette ax-color-palette-input .palette-inputs div label{margin-top:.75rem;font-size:.75rem;line-height:1rem}ax-color-palette ax-color-palette-input .palette-inputs .ax-editor-container .ax-input{padding:0}ax-color-palette ax-color-palette-picker{display:flex;flex-direction:column;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-picker .ax-color-box-overlay-trans{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker .ax-color-box-overlay{position:relative;display:flex;height:8rem;width:100%}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-pointer{position:relative;z-index:10;height:.75rem;width:.75rem;border-radius:9999px;border-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:transparent}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{position:absolute;bottom:0;inset-inline-end:0px;inset-inline-start:0px;top:0;height:100%;width:100%}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1{background:linear-gradient(to right,#fff,#fff0);z-index:0}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{z-index:10;background:linear-gradient(to bottom,transparent 0%,#000 100%)}ax-color-palette ax-color-palette-picker ax-range-slider.ax-color-box-gradient .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-range-slider.ax-color-box-gradient .ax-range-slider-highlight{background:transparent!important}ax-color-palette ax-color-palette-picker ax-range-slider.ax-color-box-gradient .ax-range-slider-handler{background:#fff!important;border:1px solid lightgray!important}ax-color-palette ax-color-palette-picker ax-range-slider.ax-color-box-transparent .ax-range-slider-bar{background-image:linear-gradient(to right,#f5f6fc00,#000),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker ax-range-slider.ax-color-box-transparent .ax-range-slider-highlight{background:transparent!important}\n"] }]
+                    ], standalone: false, template: "<ng-content select='ax-header'></ng-content>\n\n@if(_children?.length){\n<ng-container [ngTemplateOutlet]=\"custom\"></ng-container>\n} @else{\n<ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n\n}\n<ng-template #custom>\n    <ng-content select='ax-color-palette-preview'></ng-content>\n    <ng-content select='ax-color-palette-picker'></ng-content>\n    <ng-content select='ax-color-palette-swatches'></ng-content>\n    <ng-content select='ax-color-palette-favorite'></ng-content>\n    <ng-content select='ax-color-palette-input'></ng-content>\n</ng-template>\n<ng-template #default>\n    <ax-color-palette-preview></ax-color-palette-preview>\n    <ax-color-palette-picker></ax-color-palette-picker>\n    <ax-color-palette-swatches></ax-color-palette-swatches>\n    <ax-color-palette-input></ax-color-palette-input>\n</ng-template>\n<ng-content select='ax-footer'></ng-content>", styles: ["ax-color-palette{display:flex;width:100%;flex-direction:column;border-radius:var(--ax-rounded-border-default);border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface))}@media (min-width: 768px){ax-color-palette{width:20rem}}ax-color-palette.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-color-palette.ax-state-disabled ax-color-palette-swatches div:hover,ax-color-palette.ax-state-disabled ax-color-palette-swatches div.ax-state-selected,ax-color-palette.ax-state-disabled ax-color-palette-favorite div:hover,ax-color-palette.ax-state-disabled ax-color-palette-favorite div.ax-state-selected{cursor:not-allowed;opacity:.5}ax-color-palette ax-header,ax-color-palette ax-footer{display:flex;border-top-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.75rem}ax-color-palette ax-color-palette-preview{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;position:relative;height:6rem;width:100%;gap:.5rem;border-top-left-radius:var(--ax-rounded-border-default);border-top-right-radius:var(--ax-rounded-border-default)}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;inset-inline-start:0px;display:flex;height:100%;width:100%;align-items:center;justify-content:center;border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default));text-transform:uppercase}ax-color-palette ax-color-palette-favorite{display:block;border-top-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;max-height:9rem;grid-template-columns:repeat(10,minmax(0,1fr));gap:.5rem;overflow-y:auto;overflow-x:hidden;padding:.5rem}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:before,ax-color-palette ax-color-palette-favorite div:after{content:\"\"}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{float:left;padding-top:100%}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{clear:both;display:block}ax-color-palette ax-color-palette-swatches div:hover,ax-color-palette ax-color-palette-swatches div.ax-state-selected,ax-color-palette ax-color-palette-favorite div:hover,ax-color-palette ax-color-palette-favorite div.ax-state-selected{box-shadow:0 0 0 1px rgba(var(--ax-color-white)),0 0 0 3px rgba(var(--ax-color-black))}ax-color-palette ax-color-palette-input{display:flex;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-input .palette-inputs{display:flex;flex:1 1 0%;gap:.5rem}ax-color-palette ax-color-palette-input .palette-inputs div{width:100%;text-align:center}ax-color-palette ax-color-palette-input .palette-inputs div label{margin-top:.75rem;font-size:.75rem;line-height:1rem}ax-color-palette ax-color-palette-input .palette-inputs .ax-editor-container .ax-input{padding:0}ax-color-palette ax-color-palette-picker{display:flex;flex-direction:column;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-picker .ax-color-box-overlay-trans{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker .ax-color-box-overlay{position:relative;display:flex;height:8rem;width:100%}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-pointer{position:relative;z-index:10;height:.75rem;width:.75rem;border-radius:9999px;border-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:transparent}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{position:absolute;bottom:0;inset-inline-end:0px;inset-inline-start:0px;top:0;height:100%;width:100%}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1{background:linear-gradient(to right,#fff,#fff0);z-index:0}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{z-index:10;background:linear-gradient(to bottom,transparent 0%,#000 100%)}ax-color-palette ax-color-palette-picker ax-range-slider.ax-color-box-gradient .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-range-slider.ax-color-box-gradient .ax-range-slider-highlight{background:transparent!important}ax-color-palette ax-color-palette-picker ax-range-slider.ax-color-box-gradient .ax-range-slider-handler{background:#fff!important;border:1px solid lightgray!important}ax-color-palette ax-color-palette-picker ax-range-slider.ax-color-box-transparent .ax-range-slider-bar{background-image:linear-gradient(to right,#f5f6fc00,#000),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker ax-range-slider.ax-color-box-transparent .ax-range-slider-highlight{background:transparent!important}\n"] }]
         }], propDecorators: { _children: [{
                 type: ContentChildren,
                 args: [AXColorPaletteChildComponent]
@@ -924,8 +914,8 @@ const CONPONENTS = [
     AXColorPalettePickerComponent,
 ];
 class AXColorPaletteModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXColorPaletteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: AXColorPaletteModule, declarations: [AXColorPalleteComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXColorPaletteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: AXColorPaletteModule, declarations: [AXColorPalleteComponent,
             AXColorPalettePreviewComponent,
             AXColorPaletteSwatchesComponent,
             AXColorPaletteInputComponent,
@@ -942,9 +932,9 @@ class AXColorPaletteModule {
             AXColorPaletteSwatchesComponent,
             AXColorPaletteInputComponent,
             AXColorPalettePickerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXColorPaletteModule, imports: [CommonModule, MODULES] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXColorPaletteModule, imports: [CommonModule, MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXColorPaletteModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXColorPaletteModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...CONPONENTS],