@acorex/components 7.5.0 → 7.5.1

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

@@ -1,8 +1,8 @@
+import { MXBaseComponent, MXValueComponent } from '@acorex/components/common';
 import * as i1 from '@acorex/core/utils';
 import { AXColorUtil, AXUnsubscriber } from '@acorex/core/utils';
 import * as i0 from '@angular/core';
 import { Injectable, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, Input, forwardRef, ContentChildren, HostBinding, NgModule } from '@angular/core';
-import { MXBaseComponent, MXValueComponent } from '@acorex/components/common';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from '@angular/forms';
@@ -16,9 +16,9 @@ import { AXRangeSliderModule } from '@acorex/components/range-slider';
 import * as i4$1 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { distinctUntilChanged } from 'rxjs/operators';
-import { AXLabelModule } from '@acorex/components/label';
 import { AXButtonModule } from '@acorex/components/button';
 import { AXDecoratorModule } from '@acorex/components/decorators';
+import { AXLabelModule } from '@acorex/components/label';
 
 class AXColorPaletteParentComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXColorPaletteParentComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -269,21 +269,17 @@ class AXColorPaletteInputComponent extends MXBaseComponent {
             a: 0,
         };
         this._hex = '';
-        this._colorMode = "hex";
+        this._colorMode = 'hex';
         this._hexMaskOptions = {
             mask: /^#[0-9a-f]{0,6}[0-9a-f]{0,2}$/i,
             prepare: (str, m, a) => {
                 return m.typedValue?.startsWith('#') || str == '#' ? str.trim() : '#' + str.trim();
             },
         };
-        _parent.onValueChanged
-            .pipe(_unsubscriber.takeUntilDestroy)
-            .subscribe((e) => {
+        _parent.onValueChanged.pipe(_unsubscriber.takeUntilDestroy).subscribe((e) => {
             this.applyParent(e.isUserInteraction);
         });
-        _parent.onOptionChanged
-            .pipe(_unsubscriber.takeUntilDestroy)
-            .subscribe((e) => {
+        _parent.onOptionChanged.pipe(_unsubscriber.takeUntilDestroy).subscribe((e) => {
             this.cdr.markForCheck();
         });
     }
@@ -348,8 +344,8 @@ class AXColorPaletteInputComponent extends MXBaseComponent {
                 provide: AXColorPaletteChildComponent,
                 useExisting: AXColorPaletteInputComponent,
             },
-            AXUnsubscriber
-        ], usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"this._colorMode\">\n  <div class=\"palette-inputs\">\n    <ng-container *ngSwitchCase=\"'hex'\">\n      <div>\n        <ax-text-box class=\"ax-sm\" [ngModel]=\"_hex\" [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\"\n          [state]=\"isValid ? 'clear' : 'error'\" (onValueChanged)=\"_handleHEXAValueChanged($event)\"\n          [mask-options]=\"_hexMaskOptions\">\n        </ax-text-box>\n        <label>HEX</label>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'rgba'\">\n      <div>\n        <ax-number-box class=\"ax-sm\" name=\"r\" [minValue]=\"0\" [maxValue]=\"255\" [ngModel]=\"_rgba.r\"\n          [showSpinButtons]=\"false\" [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n        </ax-number-box>\n        <label>R</label>\n      </div>\n      <div>\n        <ax-number-box class=\"ax-sm\" name=\"g\" [minValue]=\"0\" [maxValue]=\"255\" [ngModel]=\"_rgba.g\"\n          [showSpinButtons]=\"false\" [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n        </ax-number-box>\n        <label>G</label>\n      </div>\n      <div>\n        <ax-number-box class=\"ax-sm\" name=\"b\" [minValue]=\"0\" [maxValue]=\"255\" [ngModel]=\"_rgba.b\"\n          [showSpinButtons]=\"false\" [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n        </ax-number-box>\n        <label>B</label>\n      </div>\n      <div>\n        <ax-number-box class=\"ax-sm\" name=\"a\" [minValue]=\"0\" [maxValue]=\"1\" [ngModel]=\"_rgba.a\" [decimals]=\"2\"\n          [step]=\"0.1\" [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\" [showSpinButtons]=\"false\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n        </ax-number-box>\n        <label>A</label>\n      </div>\n    </ng-container>\n  </div>\n  <button type=\"button\" class=\"ax-general-button ax-button-rounded ax-button-icon ax-sm\"\n    (click)=\"_handleChangeInputMode()\" [disabled]=\"_parent.disabled\">\n    <span class=\"ax-icon ax-icon-unfold-more\"></span>\n  </button>\n</ng-container>", dependencies: [{ kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "appearance", "mask-options"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "component", type: i5.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "appearance", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+            AXUnsubscriber,
+        ], usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"this._colorMode\">\n  <div class=\"palette-inputs\">\n    <ng-container *ngSwitchCase=\"'hex'\">\n      <div>\n        <ax-text-box class=\"ax-sm\" [ngModel]=\"_hex\" [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\"\n          [state]=\"isValid ? 'clear' : 'error'\" (onValueChanged)=\"_handleHEXAValueChanged($event)\"\n          [mask-options]=\"_hexMaskOptions\">\n        </ax-text-box>\n        <label>HEX</label>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'rgba'\">\n      <div>\n        <ax-number-box class=\"ax-sm\" name=\"r\" [minValue]=\"0\" [maxValue]=\"255\" [ngModel]=\"_rgba.r\"\n          [showSpinButtons]=\"false\" [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n        </ax-number-box>\n        <label>R</label>\n      </div>\n      <div>\n        <ax-number-box class=\"ax-sm\" name=\"g\" [minValue]=\"0\" [maxValue]=\"255\" [ngModel]=\"_rgba.g\"\n          [showSpinButtons]=\"false\" [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n        </ax-number-box>\n        <label>G</label>\n      </div>\n      <div>\n        <ax-number-box class=\"ax-sm\" name=\"b\" [minValue]=\"0\" [maxValue]=\"255\" [ngModel]=\"_rgba.b\"\n          [showSpinButtons]=\"false\" [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n        </ax-number-box>\n        <label>B</label>\n      </div>\n      <div>\n        <ax-number-box class=\"ax-sm\" name=\"a\" [minValue]=\"0\" [maxValue]=\"1\" [ngModel]=\"_rgba.a\" [decimals]=\"2\"\n          [step]=\"0.1\" [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\" [showSpinButtons]=\"false\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n        </ax-number-box>\n        <label>A</label>\n      </div>\n    </ng-container>\n  </div>\n  <button type=\"button\" class=\"ax-general-button ax-button-rounded ax-button-icon ax-sm\"\n    (click)=\"_handleChangeInputMode()\" [disabled]=\"_parent.disabled\">\n    <span class=\"ax-icon ax-icon-unfold-more\"></span>\n  </button>\n</ng-container>", dependencies: [{ kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "component", type: i5.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXColorPaletteInputComponent, decorators: [{
             type: Component,
@@ -358,7 +354,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
                             provide: AXColorPaletteChildComponent,
                             useExisting: AXColorPaletteInputComponent,
                         },
-                        AXUnsubscriber
+                        AXUnsubscriber,
                     ], template: "<ng-container [ngSwitch]=\"this._colorMode\">\n  <div class=\"palette-inputs\">\n    <ng-container *ngSwitchCase=\"'hex'\">\n      <div>\n        <ax-text-box class=\"ax-sm\" [ngModel]=\"_hex\" [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\"\n          [state]=\"isValid ? 'clear' : 'error'\" (onValueChanged)=\"_handleHEXAValueChanged($event)\"\n          [mask-options]=\"_hexMaskOptions\">\n        </ax-text-box>\n        <label>HEX</label>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'rgba'\">\n      <div>\n        <ax-number-box class=\"ax-sm\" name=\"r\" [minValue]=\"0\" [maxValue]=\"255\" [ngModel]=\"_rgba.r\"\n          [showSpinButtons]=\"false\" [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n        </ax-number-box>\n        <label>R</label>\n      </div>\n      <div>\n        <ax-number-box class=\"ax-sm\" name=\"g\" [minValue]=\"0\" [maxValue]=\"255\" [ngModel]=\"_rgba.g\"\n          [showSpinButtons]=\"false\" [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n        </ax-number-box>\n        <label>G</label>\n      </div>\n      <div>\n        <ax-number-box class=\"ax-sm\" name=\"b\" [minValue]=\"0\" [maxValue]=\"255\" [ngModel]=\"_rgba.b\"\n          [showSpinButtons]=\"false\" [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n        </ax-number-box>\n        <label>B</label>\n      </div>\n      <div>\n        <ax-number-box class=\"ax-sm\" name=\"a\" [minValue]=\"0\" [maxValue]=\"1\" [ngModel]=\"_rgba.a\" [decimals]=\"2\"\n          [step]=\"0.1\" [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\" [showSpinButtons]=\"false\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n        </ax-number-box>\n        <label>A</label>\n      </div>\n    </ng-container>\n  </div>\n  <button type=\"button\" class=\"ax-general-button ax-button-rounded ax-button-icon ax-sm\"\n    (click)=\"_handleChangeInputMode()\" [disabled]=\"_parent.disabled\">\n    <span class=\"ax-icon ax-icon-unfold-more\"></span>\n  </button>\n</ng-container>" }]
         }], ctorParameters: function () { return [{ type: AXColorPaletteParentComponent, decorators: [{
                     type: Inject,
@@ -390,22 +386,20 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
         this._gradients = AXColorUtil.gradient(this._gradientColors);
         this._colors = this._gradients.rgb(100);
         this.dragPosition = { x: 0, y: 0 };
-        _parent.onValueChanged
-            .pipe(_unsubscriber.takeUntilDestroy)
-            .subscribe((e) => {
+        _parent.onValueChanged.pipe(_unsubscriber.takeUntilDestroy).subscribe((e) => {
             this._handleParentColorChanged();
         });
-        _parent.onOptionChanged
-            .pipe(_unsubscriber.takeUntilDestroy)
-            .subscribe((e) => {
+        _parent.onOptionChanged.pipe(_unsubscriber.takeUntilDestroy).subscribe((e) => {
             this.cdr.markForCheck();
         });
     }
     setHSV() {
         const hsv = AXColorUtil.to(this._rgba, 'hsva');
-        const sortedH = this._colors.map(c => c.toHsv().h);
+        const sortedH = this._colors.map((c) => c.toHsv().h);
         //TODO: find closest
-        this._gradient = sortedH.findIndex(c => { return Math.round(c) >= Math.round(hsv.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');
         this.setPointerByPercent(hsv.s * 100, hsv.v * 100);
     }
@@ -436,7 +430,7 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
     }
     _handleGradientChanged(e) {
         if (e.isUserInteraction && e.value != this._gradient) {
-            const { s, v } = AXColorUtil.to(this._rgba, "hsva");
+            const { s, v } = AXColorUtil.to(this._rgba, 'hsva');
             const { h } = this._colors[e.value].toHsv();
             this._parent.commitValue(AXColorUtil.toString({ h, s, v, a: this._rgba.a }, 'rgba'), e.isUserInteraction);
         }
@@ -447,8 +441,8 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
             e.stopPropagation();
             return;
         }
-        const surface = this.getHostElement().querySelector(".ax-color-box-overlay");
-        const pointer = this.getHostElement().querySelector(".ax-color-box-pointer");
+        const surface = this.getHostElement().querySelector('.ax-color-box-overlay');
+        const pointer = this.getHostElement().querySelector('.ax-color-box-pointer');
         let x = e.offsetX;
         let y = e.offsetY;
         this.setColorByXY(x, y);
@@ -457,13 +451,13 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
         if (this._parent.disabled || this._parent.readonly) {
             return;
         }
-        const surface = this.getHostElement().querySelector(".ax-color-box-overlay");
+        const surface = this.getHostElement().querySelector('.ax-color-box-overlay');
         const sb = surface.getBoundingClientRect();
-        const pointer = this.getHostElement().querySelector(".ax-color-box-pointer");
+        const pointer = this.getHostElement().querySelector('.ax-color-box-pointer');
         const pb = pointer.getBoundingClientRect();
-        const w = (pb.width / 2);
-        let x = (pb.left - sb.left) + w;
-        let y = (pb.top - sb.top) + w;
+        const w = pb.width / 2;
+        let x = pb.left - sb.left + w;
+        let y = pb.top - sb.top + w;
         //
         x = x < 0 ? 0 : x;
         x = x > sb.width ? sb.width : x;
@@ -474,30 +468,30 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
         this.setColorByXY(x, y);
     }
     setColorByXY(x, y) {
-        const surface = this.getHostElement().querySelector(".ax-color-box-overlay");
+        const surface = this.getHostElement().querySelector('.ax-color-box-overlay');
         const sb = surface.getBoundingClientRect();
         //
-        const { h } = AXColorUtil.to(this._bgColor, "hsva");
+        const { h } = AXColorUtil.to(this._bgColor, 'hsva');
         const hsv = {
             h,
-            s: (x / sb.width),
-            v: ((sb.height - y) / sb.height)
+            s: x / sb.width,
+            v: (sb.height - y) / sb.height,
         };
         this._parent.commitValue(AXColorUtil.toString(hsv, 'rgba'), true);
     }
     setPointerByPercent(x, y) {
-        const surface = this.getHostElement().querySelector(".ax-color-box-overlay");
+        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 pointer = this.getHostElement().querySelector('.ax-color-box-pointer');
         const pb = pointer.getBoundingClientRect();
-        const w = (pb.width / 2);
+        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
+            x: (x * width) / 100 - w,
+            y: height - (y * height) / 100 - w,
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXColorPalettePickerComponent, deps: [{ token: AXColorPaletteParentComponent }, { token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
@@ -506,7 +500,7 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
                 provide: AXColorPaletteChildComponent,
                 useExisting: AXColorPalettePickerComponent,
             },
-            AXUnsubscriber
+            AXUnsubscriber,
         ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-color-box-overlay-trans\">\n    <div class=\"ax-color-box-overlay\" [style.background-color]=\"_bgColor\">\n        <div class=\"ax-color-box-overlay-g1\"></div>\n        <div class=\"ax-color-box-overlay-g2\" (click)=\"_handleSurfaceClick($event)\"></div>\n        <div class=\"ax-color-box-pointer\" cdkDrag cdkDragBoundary=\".ax-color-box-overlay\"\n            [cdkDragFreeDragPosition]=\"dragPosition\" (cdkDragEnded)=\"_handleDrag()\"\n            [cdkDragDisabled]=\"_parent.disabled || _parent.readonly\">\n        </div>\n    </div>\n</div>\n<ax-range-slider class=\"ax-color-box-gradient\" [minValue]=\"0\" [maxValue]=\"100\" [step]=\"1\" [ngModel]=\"_gradient\"\n    [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\" (onValueChanged)=\"_handleGradientChanged($event)\">\n</ax-range-slider>\n<ax-range-slider class=\"ax-color-box-transparent\" [minValue]=\"0\" [maxValue]=\"1\" [step]=\"0.01\" [ngModel]=\"_rgba.a\"\n    [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\" (onValueChanged)=\"_handleAlphaChanged($event)\">\n</ax-range-slider>", dependencies: [{ kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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: ["readonly", "disabled", "value", "name", "color", "minValue", "maxValue", "step", "direction"], outputs: ["valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "directive", type: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXColorPalettePickerComponent, decorators: [{
@@ -516,7 +510,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
                             provide: AXColorPaletteChildComponent,
                             useExisting: AXColorPalettePickerComponent,
                         },
-                        AXUnsubscriber
+                        AXUnsubscriber,
                     ], template: "<div class=\"ax-color-box-overlay-trans\">\n    <div class=\"ax-color-box-overlay\" [style.background-color]=\"_bgColor\">\n        <div class=\"ax-color-box-overlay-g1\"></div>\n        <div class=\"ax-color-box-overlay-g2\" (click)=\"_handleSurfaceClick($event)\"></div>\n        <div class=\"ax-color-box-pointer\" cdkDrag cdkDragBoundary=\".ax-color-box-overlay\"\n            [cdkDragFreeDragPosition]=\"dragPosition\" (cdkDragEnded)=\"_handleDrag()\"\n            [cdkDragDisabled]=\"_parent.disabled || _parent.readonly\">\n        </div>\n    </div>\n</div>\n<ax-range-slider class=\"ax-color-box-gradient\" [minValue]=\"0\" [maxValue]=\"100\" [step]=\"1\" [ngModel]=\"_gradient\"\n    [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\" (onValueChanged)=\"_handleGradientChanged($event)\">\n</ax-range-slider>\n<ax-range-slider class=\"ax-color-box-transparent\" [minValue]=\"0\" [maxValue]=\"1\" [step]=\"0.01\" [ngModel]=\"_rgba.a\"\n    [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\" (onValueChanged)=\"_handleAlphaChanged($event)\">\n</ax-range-slider>" }]
         }], ctorParameters: function () { return [{ type: AXColorPaletteParentComponent, decorators: [{
                     type: Inject,
@@ -529,9 +523,7 @@ class AXColorPalettePreviewComponent extends MXBaseComponent {
         this._parent = _parent;
         this._zone = _zone;
         this._unsubscriber = _unsubscriber;
-        _parent.onValueChanged
-            .pipe(_unsubscriber.takeUntilDestroy)
-            .subscribe((e) => {
+        _parent.onValueChanged.pipe(_unsubscriber.takeUntilDestroy).subscribe((e) => {
             _zone.runOutsideAngular(this.applyParent.bind(this));
         });
     }
@@ -552,20 +544,14 @@ class AXColorPalettePreviewComponent extends MXBaseComponent {
                 provide: AXColorPaletteChildComponent,
                 useExisting: AXColorPalettePreviewComponent,
             },
-            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 }); }
+            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: "16.1.9", 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>`,
+                    template: `<div class="palette-preview-overlay" [class.ax-state-disabled]="_parent.disabled"></div>`,
                     host: { class: 'ax-color-palette-preview' },
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -574,7 +560,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
                             provide: AXColorPaletteChildComponent,
                             useExisting: AXColorPalettePreviewComponent,
                         },
-                        AXUnsubscriber
+                        AXUnsubscriber,
                     ],
                 }]
         }], ctorParameters: function () { return [{ type: AXColorPaletteParentComponent, decorators: [{
@@ -625,7 +611,7 @@ class AXColorPaletteSwatchesComponent extends MXBaseComponent {
                 provide: AXColorPaletteChildComponent,
                 useExisting: AXColorPaletteSwatchesComponent,
             },
-            AXUnsubscriber
+            AXUnsubscriber,
         ], usesInheritance: true, ngImport: i0, template: ` <div
     *ngFor="let color of colors"
     [style.background-color]="color.code"
@@ -652,7 +638,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
                             provide: AXColorPaletteChildComponent,
                             useExisting: AXColorPaletteSwatchesComponent,
                         },
-                        AXUnsubscriber
+                        AXUnsubscriber,
                     ],
                 }]
         }], ctorParameters: function () { return [{ type: AXColorPaletteParentComponent, decorators: [{
@@ -671,7 +657,7 @@ class AXColorPalleteComponent extends MXValueComponent {
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AXColorPalleteComponent),
-                multi: true
+                multi: true,
             },
             {
                 provide: AXColorPaletteParentComponent,
@@ -681,11 +667,19 @@ class AXColorPalleteComponent extends MXValueComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", 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: [
+            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: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => AXColorPalleteComponent),
-                            multi: true
+                            multi: true,
                         },
                         {
                             provide: AXColorPaletteParentComponent,
@@ -708,14 +702,14 @@ const MODULES = [
     AXDecoratorModule,
     AXNumberBoxModule,
     AXRangeSliderModule,
-    DragDropModule
+    DragDropModule,
 ];
 const CONPONENTS = [
     AXColorPalleteComponent,
     AXColorPalettePreviewComponent,
     AXColorPaletteSwatchesComponent,
     AXColorPaletteInputComponent,
-    AXColorPalettePickerComponent
+    AXColorPalettePickerComponent,
 ];
 class AXColorPaletteModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXColorPaletteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }