@acorex/components 7.0.32 → 7.0.34

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

@@ -1,6 +1,6 @@
 import { AXColorUtil } from '@acorex/core/utils';
 import * as i0 from '@angular/core';
-import { Injectable, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Inject, Input, EventEmitter, ContentChildren, Output, HostBinding, NgModule } from '@angular/core';
+import { Injectable, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Inject, Input, ContentChildren, HostBinding, NgModule } from '@angular/core';
 import { distinctUntilChanged } from 'rxjs/operators';
 import { AXBaseComponent, AXBaseValueComponentMixin } from '@acorex/components/mixin';
 import * as i1 from '@angular/common';
@@ -11,6 +11,8 @@ import * as i3 from '@acorex/components/number-box';
 import { AXNumberBoxModule } from '@acorex/components/number-box';
 import * as i1$1 from '@acorex/components/range-slider';
 import { AXRangeSliderModule } from '@acorex/components/range-slider';
+import * as i2$1 from '@angular/cdk/drag-drop';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 import { Subject } from 'rxjs';
 import { AXLabelModule } from '@acorex/components/label';
 import { AXButtonModule } from '@acorex/components/button';
@@ -36,6 +38,7 @@ class AXColorPaletteInputComponent extends AXBaseComponent {
         super(_elementRef, _cdr);
         this._parent = _parent;
         this._isTouched = false;
+        this.isValid = true;
         this._rgba = {
             r: 0,
             g: 0,
@@ -43,9 +46,16 @@ class AXColorPaletteInputComponent extends AXBaseComponent {
             a: 0,
         };
         this._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._onInternalColorChanged$
             .pipe(distinctUntilChanged())
-            .subscribe(e => {
+            .subscribe((e) => {
             if (!e.color) {
                 this._hex = '';
                 this._rgba = {
@@ -56,25 +66,27 @@ class AXColorPaletteInputComponent extends AXBaseComponent {
                 };
             }
             else {
-                if (!AXColorUtil.equal(e.color, this._rgba)) {
-                    Object.assign(this._rgba, AXColorUtil.to(e.color, 'rgba'));
+                Object.assign(this._rgba, AXColorUtil.to(e.color, 'rgba'));
+                if (this._colorMode != 'hex' || !this._hex)
                     this._hex = AXColorUtil.toString(e.color, 'hex');
-                    if (this._rgba.a != 1 && !this._isTouched) {
-                        this._parent.colorMode = 'rgba';
-                    }
+                if (this._colorMode == 'hex')
+                    this._hex = e.color;
+                if (this._rgba.a != 1 && !this._isTouched) {
+                    this._colorMode = 'rgba';
                 }
             }
+            this.checkValid();
             _cdr.detectChanges();
         });
     }
     _handleChangeInputMode() {
         this._isTouched = true;
-        switch (this._parent.colorMode) {
+        switch (this._colorMode) {
             case 'rgba':
-                this._parent.colorMode = 'hex';
+                this._colorMode = 'hex';
                 break;
             default:
-                this._parent.colorMode = 'rgba';
+                this._colorMode = 'rgba';
                 break;
         }
     }
@@ -89,20 +101,33 @@ class AXColorPaletteInputComponent extends AXBaseComponent {
         }
         this._parent._onInternalColorChanged$.next({
             color: AXColorUtil.toString(_color, 'rgba'),
-            mode: 'rgba',
+            sender: this,
         });
     }
     _handleHEXAValueChanged(e) {
-        if (e.value == null || (e.value == '' && !e.oldValue))
+        if (!e.value && !e.oldValue)
             return;
+        //
         if (e.isUserInteraction) {
             this._parent._setUserInteraction();
             this._isTouched = true;
         }
-        this._parent._onInternalColorChanged$.next({
-            color: AXColorUtil.toString(e.value, 'hex'),
-            mode: 'hex',
-        });
+        //
+        if (!e.value && e.oldValue) {
+            this._parent._onInternalColorChanged$.next({
+                color: null,
+                sender: this
+            });
+        }
+        else {
+            this._parent._onInternalColorChanged$.next({
+                color: e.value,
+                sender: this
+            });
+        }
+    }
+    checkValid() {
+        this.isValid = AXColorUtil.isValid(this._hex);
     }
 }
 AXColorPaletteInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXColorPaletteInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXColorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
@@ -111,7 +136,7 @@ AXColorPaletteInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
             provide: AXColorPaletteChildComponent,
             useExisting: AXColorPaletteInputComponent,
         },
-    ], usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"_parent.colorMode\">\r\n  <div class=\"palette-inputs\">\r\n    <ng-container *ngSwitchCase=\"'hex'\">\r\n      <div>\r\n        <ax-text-box\r\n          class=\"ax-sm\"\r\n          [value]=\"_hex\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          (onValueChanged)=\"_handleHEXAValueChanged($event)\">\r\n        </ax-text-box>\r\n        <label>HEX</label>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'rgba'\">\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.r\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>R</label>\r\n      </div>\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.g\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>G</label>\r\n      </div>\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.b\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>B</label>\r\n      </div>\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"1\"\r\n          [(value)]=\"_rgba.a\"\r\n          [decimals]=\"2\"\r\n          [step]=\"0.1\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          [showSpinButtons]=\"false\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>A</label>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <button\r\n    class=\"ax-general-button ax-button-icon ax-sm\"\r\n    (click)=\"_handleChangeInputMode()\"\r\n    [disabled]=\"_parent.disabled\">\r\n    <span class=\"ax-icon ax-icon-unfold-more\"></span>\r\n  </button>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "name", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "mask-options"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "component", type: i3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "size", "value", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "name", "checked", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue"], outputs: ["valueChange", "onValueChanged", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"this._colorMode\">\r\n  <div class=\"palette-inputs\">\r\n    <ng-container *ngSwitchCase=\"'hex'\">\r\n      <div>\r\n        <ax-text-box\r\n          class=\"ax-sm\"\r\n          [value]=\"_hex\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          [state]=\"isValid?'clear':'error'\"\r\n          (onValueChanged)=\"_handleHEXAValueChanged($event)\" [mask-options]=\"_hexMaskOptions\">\r\n        </ax-text-box>\r\n        <label>HEX</label>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'rgba'\">\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.r\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>R</label>\r\n      </div>\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.g\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>G</label>\r\n      </div>\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.b\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>B</label>\r\n      </div>\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"1\"\r\n          [(value)]=\"_rgba.a\"\r\n          [decimals]=\"2\"\r\n          [step]=\"0.1\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          [showSpinButtons]=\"false\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>A</label>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <button\r\n    class=\"ax-general-button ax-button-icon ax-sm\"\r\n    (click)=\"_handleChangeInputMode()\"\r\n    [disabled]=\"_parent.disabled\">\r\n    <span class=\"ax-icon ax-icon-unfold-more\"></span>\r\n  </button>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "mask-options"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged"] }, { kind: "component", type: i3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "size", "value", "state", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "name", "checked", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXColorPaletteInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-palette-input', host: { class: 'ax-color-palette-input' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -119,7 +144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                             provide: AXColorPaletteChildComponent,
                             useExisting: AXColorPaletteInputComponent,
                         },
-                    ], template: "<ng-container [ngSwitch]=\"_parent.colorMode\">\r\n  <div class=\"palette-inputs\">\r\n    <ng-container *ngSwitchCase=\"'hex'\">\r\n      <div>\r\n        <ax-text-box\r\n          class=\"ax-sm\"\r\n          [value]=\"_hex\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          (onValueChanged)=\"_handleHEXAValueChanged($event)\">\r\n        </ax-text-box>\r\n        <label>HEX</label>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'rgba'\">\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.r\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>R</label>\r\n      </div>\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.g\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>G</label>\r\n      </div>\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.b\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>B</label>\r\n      </div>\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"1\"\r\n          [(value)]=\"_rgba.a\"\r\n          [decimals]=\"2\"\r\n          [step]=\"0.1\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          [showSpinButtons]=\"false\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>A</label>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <button\r\n    class=\"ax-general-button ax-button-icon ax-sm\"\r\n    (click)=\"_handleChangeInputMode()\"\r\n    [disabled]=\"_parent.disabled\">\r\n    <span class=\"ax-icon ax-icon-unfold-more\"></span>\r\n  </button>\r\n</ng-container>\r\n" }]
+                    ], template: "<ng-container [ngSwitch]=\"this._colorMode\">\r\n  <div class=\"palette-inputs\">\r\n    <ng-container *ngSwitchCase=\"'hex'\">\r\n      <div>\r\n        <ax-text-box\r\n          class=\"ax-sm\"\r\n          [value]=\"_hex\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          [state]=\"isValid?'clear':'error'\"\r\n          (onValueChanged)=\"_handleHEXAValueChanged($event)\" [mask-options]=\"_hexMaskOptions\">\r\n        </ax-text-box>\r\n        <label>HEX</label>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'rgba'\">\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.r\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>R</label>\r\n      </div>\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.g\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>G</label>\r\n      </div>\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"255\"\r\n          [(value)]=\"_rgba.b\"\r\n          [showSpinButtons]=\"false\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>B</label>\r\n      </div>\r\n      <div>\r\n        <ax-number-box\r\n          class=\"ax-sm\"\r\n          [minValue]=\"0\"\r\n          [maxValue]=\"1\"\r\n          [(value)]=\"_rgba.a\"\r\n          [decimals]=\"2\"\r\n          [step]=\"0.1\"\r\n          [disabled]=\"_parent.disabled\"\r\n          [readonly]=\"_parent.readonly\"\r\n          [showSpinButtons]=\"false\"\r\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n        </ax-number-box>\r\n        <label>A</label>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <button\r\n    class=\"ax-general-button ax-button-icon ax-sm\"\r\n    (click)=\"_handleChangeInputMode()\"\r\n    [disabled]=\"_parent.disabled\">\r\n    <span class=\"ax-icon ax-icon-unfold-more\"></span>\r\n  </button>\r\n</ng-container>\r\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXColorComponent, decorators: [{
                     type: Optional
                 }, {
@@ -148,6 +173,7 @@ class AXColorPalettePickerComponent extends AXBaseComponent {
             { color: 'rgb(255, 0, 255)', pos: 0.83 },
             { color: 'rgb(255, 0, 0)', pos: 1 },
         ];
+        this.dragPosition = { x: 0, y: 0 };
         _parent._onInternalColorChanged$
             .pipe(distinctUntilChanged())
             .subscribe((e) => {
@@ -164,19 +190,23 @@ class AXColorPalettePickerComponent extends AXBaseComponent {
                     Object.assign(this._rgba, AXColorUtil.to(e.color, 'rgba'));
                 }
             }
-            this._bgColor = AXColorUtil.toString(e.color, 'hex');
+            this.setHSV();
             _cdr.detectChanges();
         });
     }
+    setHSV() {
+        const hsv = AXColorUtil.to(this._rgba, 'hsva');
+        this._bgColor = AXColorUtil.toString({ h: hsv.h, s: 1, v: 1, a: this._rgba.a }, 'rgba');
+        this.setPointerByPercent(hsv.s * 100, hsv.v * 100);
+    }
     _handleAlphaChanged(e) {
         if (e.value != null && e.value != this._rgba.a) {
             const { r, g, b } = this._rgba;
             const _color = `rgba(${r},${g},${b},${e.value})`;
-            this._parent.colorMode = 'rgba';
             this._parent._setUserInteraction();
             this._parent._onInternalColorChanged$.next({
                 color: AXColorUtil.toString(_color, 'rgba'),
-                mode: 'rgba',
+                sender: this,
             });
         }
     }
@@ -184,14 +214,69 @@ class AXColorPalettePickerComponent extends AXBaseComponent {
         if (e.value != null && e.value != this._gradient) {
             const gradient = AXColorUtil.gradient(this._gradientColors);
             const colors = gradient.rgb(100);
-            let color = colors[e.value].toRgbString();
+            const { s, v } = AXColorUtil.to(this._rgba, "hsva");
+            const { h } = colors[e.value].toHsv();
             this._parent._setUserInteraction();
             this._parent._onInternalColorChanged$.next({
-                color: AXColorUtil.toString(color, 'rgba'),
-                mode: this._parent.colorMode,
+                color: AXColorUtil.toString({ h, s, v, a: this._rgba.a }, 'rgba'),
+                sender: this,
             });
         }
     }
+    _handleSurfaceClick(e) {
+        const surface = this._getHostElement().querySelector(".ax-color-picker-overlay");
+        const sb = surface.getBoundingClientRect();
+        const pointer = this._getHostElement().querySelector(".ax-color-picker-pointer");
+        const pb = pointer.getBoundingClientRect();
+        let x = e.offsetX;
+        let y = e.offsetY;
+        this.setColorByXY(x, y);
+    }
+    _handleDrag() {
+        const surface = this._getHostElement().querySelector(".ax-color-picker-overlay");
+        const sb = surface.getBoundingClientRect();
+        const pointer = this._getHostElement().querySelector(".ax-color-picker-pointer");
+        const pb = pointer.getBoundingClientRect();
+        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;
+        //
+        y = y < 0 ? 0 : y;
+        y = y > sb.height ? sb.height : y;
+        //
+        this.setColorByXY(x, y);
+    }
+    setColorByXY(x, y) {
+        const surface = this._getHostElement().querySelector(".ax-color-picker-overlay");
+        const sb = surface.getBoundingClientRect();
+        //
+        const { h } = AXColorUtil.to(this._bgColor, "hsva");
+        const hsv = {
+            h,
+            s: (x / sb.width),
+            v: ((sb.height - y) / sb.height)
+        };
+        this._parent._onInternalColorChanged$.next({
+            color: AXColorUtil.toString(hsv, 'rgba'),
+            sender: this,
+        });
+    }
+    setPointerByPercent(x, y) {
+        const surface = this._getHostElement().querySelector(".ax-color-picker-overlay");
+        const sb = surface.getBoundingClientRect();
+        const pointer = this._getHostElement().querySelector(".ax-color-picker-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
+        };
+    }
 }
 AXColorPalettePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXColorPalettePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXColorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 AXColorPalettePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker", host: { classAttribute: "ax-color-palette-picker" }, providers: [
@@ -199,7 +284,7 @@ AXColorPalettePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
             provide: AXColorPaletteChildComponent,
             useExisting: AXColorPalettePickerComponent,
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-color-picker-overlay\" [style.background-color]=\"_bgColor\">\r\n    <div class=\"ax-color-picker-overlay-color\"></div>\r\n    <div class=\"ax-color-picker-overlay-gradient\"></div>\r\n    <div class=\"ax-color-picker-pointer\"></div>\r\n</div>\r\n<ax-range-slider class=\"ax-color-picker-gradient\" [minValue]=\"0\" [maxValue]=\"99\" [step]=\"1\" [value]=\"_gradient\" \r\n    (onValueChanged)=\"_handleGradientChanged($event)\">\r\n</ax-range-slider>\r\n<ax-range-slider class=\"ax-color-picker-transparent\" [minValue]=\"0\" [maxValue]=\"1\" [step]=\"0.01\" [value]=\"_rgba.a\"\r\n    (onValueChanged)=\"_handleAlphaChanged($event)\">\r\n</ax-range-slider>", dependencies: [{ kind: "component", type: i1$1.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["readonly", "allowNull", "value", "name", "checked", "minValue", "maxValue", "step", "color", "oriantaion"], outputs: ["valueChange", "onValueChanged", "colorChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-color-picker-overlay-trans\">\r\n    <div class=\"ax-color-picker-overlay\" [style.background-color]=\"_bgColor\">\r\n        <div class=\"ax-color-picker-overlay-g1\"></div>\r\n        <div class=\"ax-color-picker-overlay-g2\" (click)=\"_handleSurfaceClick($event)\"></div>\r\n        <div class=\"ax-color-picker-pointer\" cdkDrag cdkDragBoundary=\".ax-color-picker-overlay\" [cdkDragFreeDragPosition]=\"dragPosition\" (cdkDragEnded)=\"_handleDrag()\"></div>\r\n    </div>\r\n</div>\r\n<ax-range-slider class=\"ax-color-picker-gradient\" [minValue]=\"0\" [maxValue]=\"99\" [step]=\"1\" [value]=\"_gradient\" \r\n    (onValueChanged)=\"_handleGradientChanged($event)\">\r\n</ax-range-slider>\r\n<ax-range-slider class=\"ax-color-picker-transparent\" [minValue]=\"0\" [maxValue]=\"1\" [step]=\"0.01\" [value]=\"_rgba.a\"\r\n    (onValueChanged)=\"_handleAlphaChanged($event)\">\r\n</ax-range-slider>", dependencies: [{ kind: "component", type: i1$1.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["readonly", "allowNull", "value", "name", "checked", "minValue", "maxValue", "step", "color", "oriantaion"], outputs: ["valueChange", "onValueChanged", "colorChange"] }, { kind: "directive", type: i2$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: "15.1.4", ngImport: i0, type: AXColorPalettePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-palette-picker', host: { class: 'ax-color-palette-picker' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -207,7 +292,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                             provide: AXColorPaletteChildComponent,
                             useExisting: AXColorPalettePickerComponent,
                         },
-                    ], template: "<div class=\"ax-color-picker-overlay\" [style.background-color]=\"_bgColor\">\r\n    <div class=\"ax-color-picker-overlay-color\"></div>\r\n    <div class=\"ax-color-picker-overlay-gradient\"></div>\r\n    <div class=\"ax-color-picker-pointer\"></div>\r\n</div>\r\n<ax-range-slider class=\"ax-color-picker-gradient\" [minValue]=\"0\" [maxValue]=\"99\" [step]=\"1\" [value]=\"_gradient\" \r\n    (onValueChanged)=\"_handleGradientChanged($event)\">\r\n</ax-range-slider>\r\n<ax-range-slider class=\"ax-color-picker-transparent\" [minValue]=\"0\" [maxValue]=\"1\" [step]=\"0.01\" [value]=\"_rgba.a\"\r\n    (onValueChanged)=\"_handleAlphaChanged($event)\">\r\n</ax-range-slider>" }]
+                    ], template: "<div class=\"ax-color-picker-overlay-trans\">\r\n    <div class=\"ax-color-picker-overlay\" [style.background-color]=\"_bgColor\">\r\n        <div class=\"ax-color-picker-overlay-g1\"></div>\r\n        <div class=\"ax-color-picker-overlay-g2\" (click)=\"_handleSurfaceClick($event)\"></div>\r\n        <div class=\"ax-color-picker-pointer\" cdkDrag cdkDragBoundary=\".ax-color-picker-overlay\" [cdkDragFreeDragPosition]=\"dragPosition\" (cdkDragEnded)=\"_handleDrag()\"></div>\r\n    </div>\r\n</div>\r\n<ax-range-slider class=\"ax-color-picker-gradient\" [minValue]=\"0\" [maxValue]=\"99\" [step]=\"1\" [value]=\"_gradient\" \r\n    (onValueChanged)=\"_handleGradientChanged($event)\">\r\n</ax-range-slider>\r\n<ax-range-slider class=\"ax-color-picker-transparent\" [minValue]=\"0\" [maxValue]=\"1\" [step]=\"0.01\" [value]=\"_rgba.a\"\r\n    (onValueChanged)=\"_handleAlphaChanged($event)\">\r\n</ax-range-slider>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXColorComponent, decorators: [{
                     type: Optional
                 }, {
@@ -225,9 +310,7 @@ class AXColorPalettePreviewComponent extends AXBaseComponent {
             .subscribe((e) => {
             _zone.runOutsideAngular(() => {
                 this._getInnerElement().style.backgroundColor = e.color;
-                this._getInnerElement().innerText = e.color
-                    ? AXColorUtil.toString(e.color, e.mode)
-                    : '';
+                this._getInnerElement().innerText = AXColorUtil.toString(e.color);
                 const color = AXColorUtil.toString(e.color, 'hex');
                 const ratio = AXColorUtil.contrastToWhite(color);
                 this._getHostElement().style.color = !(ratio > 2.0) ? '#000' : '#fff';
@@ -502,8 +585,10 @@ class AXColorPaletteSwatchesComponent extends AXBaseComponent {
             this._selected = AXColorUtil.toString(e.color, 'hex').toLowerCase();
             this._cdr.detectChanges();
         });
-        if (this._getHostElement().tagName.toLowerCase() !=
-            'ax-color-palette-favorite') {
+    }
+    onInit() {
+        const isFav = this._getHostElement().tagName.toLowerCase() == 'ax-color-palette-favorite';
+        if (!isFav && this.colors.length == 0) {
             this.colors = this._defaultPalette.map(c => this._format(c));
         }
     }
@@ -513,7 +598,7 @@ class AXColorPaletteSwatchesComponent extends AXBaseComponent {
         this._parent._setUserInteraction();
         this._parent._onInternalColorChanged$.next({
             color: color.code,
-            mode: this._parent.colorMode,
+            sender: this
         });
     }
     _format(color) {
@@ -566,8 +651,6 @@ class AXColorPalleteComponent extends AXBaseValueComponentMixin {
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
         this._onInternalColorChanged$ = new Subject();
-        this.colorModeChange = new EventEmitter();
-        this._colorMode = 'hex';
         //
         this._onInternalColorChanged$.pipe(distinctUntilChanged()).subscribe(e => {
             if (this.disabled || this.readonly)
@@ -576,37 +659,26 @@ class AXColorPalleteComponent extends AXBaseValueComponentMixin {
             cdr.markForCheck();
         });
     }
-    /**
-     *  A character value that specifies the separator character.
-     */
-    get colorMode() {
-        return this._colorMode;
-    }
-    set colorMode(v) {
-        this._setOption({
-            name: 'colorMode',
-            value: v,
-        });
-    }
     _onValueChanged(oldValue, newValue) {
         super._onValueChanged(oldValue, newValue);
         this._onInternalColorChanged$.next({
             color: this.value,
-            mode: this.colorMode,
+            mode: newValue?.startsWith('#') ? "hex" : "rgba",
+            sender: this
         });
     }
     ngAfterContentInit() {
         this._children.changes.subscribe(() => {
             this._onInternalColorChanged$.next({
                 color: this.value,
-                mode: this.colorMode,
+                sender: this
             });
         });
     }
     onViewInit() {
         this._onInternalColorChanged$.next({
             color: this.value,
-            mode: this.colorMode,
+            sender: this
         });
     }
     get __hostDisabled() {
@@ -614,9 +686,9 @@ class AXColorPalleteComponent extends AXBaseValueComponentMixin {
     }
 }
 AXColorPalleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXColorPalleteComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXColorPalleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXColorPalleteComponent, selector: "ax-color-palette", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", name: "name", checked: "checked", colorMode: "colorMode" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", colorModeChange: "colorModeChange" }, host: { properties: { "class.ax-state-disabled": "this.__hostDisabled" } }, providers: [
+AXColorPalleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXColorPalleteComponent, selector: "ax-color-palette", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", state: "state", name: "name", checked: "checked" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged" }, host: { properties: { "class.ax-state-disabled": "this.__hostDisabled" } }, providers: [
         { provide: AXColorComponent, useExisting: AXColorPalleteComponent },
-    ], queries: [{ propertyName: "_children", predicate: AXColorPaletteChildComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select='ax-header'></ng-content>\r\n\r\n<ng-container [ngTemplateOutlet]=\"default\" *ngIf=\"!_children.length\"></ng-container>\r\n<ng-container [ngTemplateOutlet]=\"custom\" *ngIf=\"_children.length\"></ng-container>\r\n\r\n<ng-template #custom>\r\n    <ng-content select='ax-color-palette-preview'></ng-content>\r\n    <ng-content select='ax-color-palette-picker'></ng-content>\r\n    <ng-content select='ax-color-palette-swatches'></ng-content>\r\n    <ng-content select='ax-color-palette-favorite'></ng-content>\r\n    <ng-content select='ax-color-palette-input'></ng-content>\r\n</ng-template>\r\n<ng-template #default>\r\n    <ax-color-palette-preview></ax-color-palette-preview>\r\n    <ax-color-palette-swatches></ax-color-palette-swatches>\r\n    <ax-color-palette-input></ax-color-palette-input>\r\n</ng-template>\r\n\r\n<ng-content select='ax-footer'></ng-content>\r\n\r\n\r\n", styles: ["ax-color-palette{display:flex;flex-direction:column;border:1px solid;background-color:rgb(var(--ax-color-surface));border-color:rgb(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);width:18rem}@media (min-width: 600px){ax-color-palette{width:20rem!important}}@media (min-width: 1200px){ax-color-palette{width:18rem!important}}@media (max-width: 599px){ax-color-palette{width:100%!important}}ax-color-palette.ax-state-disabled{opacity:.5;cursor:not-allowed}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{opacity:.5;cursor:not-allowed}ax-color-palette ax-header,ax-color-palette ax-footer{padding:.75rem;border-top-width:1px;display:flex}ax-color-palette ax-color-palette-preview{position:relative;width:100%;height:6rem;gap:.5;border-top-left-radius:var(--ax-rounded-border-default);border-top-right-radius:var(--ax-rounded-border-default);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;left:0;width:100%;height:100%;display:flex;align-items:center;text-transform:uppercase;justify-content:center;border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default));box-shadow:0 1px 8px #00000029;text-shadow:0px 0px 14px rgba(0,0,0,.5)}ax-color-palette ax-color-palette-favorite{display:block;border-top:1px solid;border-color:rgb(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;padding:.5rem;grid-template-columns:repeat(10,minmax(0,1fr));max-height:9rem;overflow-x:hidden;gap:.5rem}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:99rem;border:1px solid rgb(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{content:\"\";padding-top:100%;float:left}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{content:\"\";display:block;clear:both}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{outline-offset:2px;outline-width:1px;outline-style:solid;outline-color:rgba(var(--ax-color-ghost),.86)}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:1.25rem}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-picker-overlay{display:block;width:100%;height:8rem;position:relative}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-pointer{width:.75rem;height:.75rem;border-radius:99rem;background-color:transparent;border:1px solid rgb(var(--ax-color-background-default))}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-color,ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-gradient{height:100%;width:100%;position:absolute;inset:0}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-color{background:linear-gradient(to right,rgb(255,255,255),rgba(255,255,255,0))}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-gradient{background:linear-gradient(to top,rgb(0,0,0),rgba(0,0,0,0))}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-gradient input{background:linear-gradient(to right,rgb(255,0,0) 0%,rgb(255,255,0) 17%,rgb(0,255,0) 33%,rgb(0,255,255) 50%,rgb(0,0,255) 67%,rgb(255,0,255) 83%,rgb(255,0,0) 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-transparent input{background-image:linear-gradient(to right,rgba(245,246,252,0),rgb(0,0,0)),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview" }, { kind: "component", type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: ["colors"] }, { kind: "component", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "_children", predicate: AXColorPaletteChildComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select='ax-header'></ng-content>\r\n\r\n<ng-container [ngTemplateOutlet]=\"default\" *ngIf=\"!_children.length\"></ng-container>\r\n<ng-container [ngTemplateOutlet]=\"custom\" *ngIf=\"_children.length\"></ng-container>\r\n\r\n<ng-template #custom>\r\n    <ng-content select='ax-color-palette-preview'></ng-content>\r\n    <ng-content select='ax-color-palette-picker'></ng-content>\r\n    <ng-content select='ax-color-palette-swatches'></ng-content>\r\n    <ng-content select='ax-color-palette-favorite'></ng-content>\r\n    <ng-content select='ax-color-palette-input'></ng-content>\r\n</ng-template>\r\n<ng-template #default>\r\n    <ax-color-palette-preview></ax-color-palette-preview>\r\n    <ax-color-palette-swatches></ax-color-palette-swatches>\r\n    <ax-color-palette-input></ax-color-palette-input>\r\n</ng-template>\r\n\r\n<ng-content select='ax-footer'></ng-content>\r\n\r\n\r\n", styles: ["ax-color-palette{display:flex;flex-direction:column;border:1px solid;background-color:rgb(var(--ax-color-surface));border-color:rgb(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);width:18rem}@media (min-width: 600px){ax-color-palette{width:20rem!important}}@media (min-width: 1200px){ax-color-palette{width:18rem!important}}@media (max-width: 599px){ax-color-palette{width:100%!important}}ax-color-palette.ax-state-disabled{opacity:.5;cursor:not-allowed}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{opacity:.5;cursor:not-allowed}ax-color-palette ax-header,ax-color-palette ax-footer{padding:.75rem;border-top-width:1px;display:flex}ax-color-palette ax-color-palette-preview{position:relative;width:100%;height:6rem;gap:.5;border-top-left-radius:var(--ax-rounded-border-default);border-top-right-radius:var(--ax-rounded-border-default);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;left:0;width:100%;height:100%;display:flex;align-items:center;text-transform:uppercase;justify-content:center;border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default));box-shadow:0 1px 8px #00000029;text-shadow:0px 0px 14px rgba(0,0,0,.5)}ax-color-palette ax-color-palette-favorite{display:block;border-top:1px solid;border-color:rgb(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;padding:.5rem;grid-template-columns:repeat(10,minmax(0,1fr));max-height:9rem;overflow-x:hidden;gap:.5rem}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:99rem;border:1px solid rgb(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{content:\"\";padding-top:100%;float:left}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{content:\"\";display:block;clear:both}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{outline-offset:2px;outline-width:1px;outline-style:solid;outline-color:rgba(var(--ax-color-ghost),.86)}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:1.25rem}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-picker-overlay-trans{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay{display:block;width:100%;height:8rem;position:relative}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-pointer{width:.75rem;height:.75rem;border-radius:99rem;background-color:transparent;border:1px solid rgb(var(--ax-color-background-default));position:relative;z-index:1}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{height:100%;width:100%;position:absolute;inset:0}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1{z-index:0;background:linear-gradient(to right,#fff 0%,rgba(255,255,255,0) 100%)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{z-index:1;background:linear-gradient(to bottom,transparent 0%,#000 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-gradient input{background:linear-gradient(to right,rgb(255,0,0) 0%,rgb(255,255,0) 17%,rgb(0,255,0) 33%,rgb(0,255,255) 50%,rgb(0,0,255) 67%,rgb(255,0,255) 83%,rgb(255,0,0) 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-transparent input{background-image:linear-gradient(to right,rgba(245,246,252,0),rgb(0,0,0)),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview" }, { kind: "component", type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: ["colors"] }, { kind: "component", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXColorPalleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-palette', inputs: [
@@ -625,18 +697,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                         'readonly',
                         'allowNull',
                         'value',
+                        'state',
                         'name',
                         'checked',
-                    ], outputs: ['onBlur', 'onFocus', 'valueChange', 'onValueChanged'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                    ], outputs: ['onBlur', 'onFocus', 'valueChange', 'stateChange', 'onValueChanged'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: AXColorComponent, useExisting: AXColorPalleteComponent },
-                    ], template: "<ng-content select='ax-header'></ng-content>\r\n\r\n<ng-container [ngTemplateOutlet]=\"default\" *ngIf=\"!_children.length\"></ng-container>\r\n<ng-container [ngTemplateOutlet]=\"custom\" *ngIf=\"_children.length\"></ng-container>\r\n\r\n<ng-template #custom>\r\n    <ng-content select='ax-color-palette-preview'></ng-content>\r\n    <ng-content select='ax-color-palette-picker'></ng-content>\r\n    <ng-content select='ax-color-palette-swatches'></ng-content>\r\n    <ng-content select='ax-color-palette-favorite'></ng-content>\r\n    <ng-content select='ax-color-palette-input'></ng-content>\r\n</ng-template>\r\n<ng-template #default>\r\n    <ax-color-palette-preview></ax-color-palette-preview>\r\n    <ax-color-palette-swatches></ax-color-palette-swatches>\r\n    <ax-color-palette-input></ax-color-palette-input>\r\n</ng-template>\r\n\r\n<ng-content select='ax-footer'></ng-content>\r\n\r\n\r\n", styles: ["ax-color-palette{display:flex;flex-direction:column;border:1px solid;background-color:rgb(var(--ax-color-surface));border-color:rgb(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);width:18rem}@media (min-width: 600px){ax-color-palette{width:20rem!important}}@media (min-width: 1200px){ax-color-palette{width:18rem!important}}@media (max-width: 599px){ax-color-palette{width:100%!important}}ax-color-palette.ax-state-disabled{opacity:.5;cursor:not-allowed}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{opacity:.5;cursor:not-allowed}ax-color-palette ax-header,ax-color-palette ax-footer{padding:.75rem;border-top-width:1px;display:flex}ax-color-palette ax-color-palette-preview{position:relative;width:100%;height:6rem;gap:.5;border-top-left-radius:var(--ax-rounded-border-default);border-top-right-radius:var(--ax-rounded-border-default);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;left:0;width:100%;height:100%;display:flex;align-items:center;text-transform:uppercase;justify-content:center;border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default));box-shadow:0 1px 8px #00000029;text-shadow:0px 0px 14px rgba(0,0,0,.5)}ax-color-palette ax-color-palette-favorite{display:block;border-top:1px solid;border-color:rgb(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;padding:.5rem;grid-template-columns:repeat(10,minmax(0,1fr));max-height:9rem;overflow-x:hidden;gap:.5rem}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:99rem;border:1px solid rgb(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{content:\"\";padding-top:100%;float:left}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{content:\"\";display:block;clear:both}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{outline-offset:2px;outline-width:1px;outline-style:solid;outline-color:rgba(var(--ax-color-ghost),.86)}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:1.25rem}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-picker-overlay{display:block;width:100%;height:8rem;position:relative}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-pointer{width:.75rem;height:.75rem;border-radius:99rem;background-color:transparent;border:1px solid rgb(var(--ax-color-background-default))}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-color,ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-gradient{height:100%;width:100%;position:absolute;inset:0}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-color{background:linear-gradient(to right,rgb(255,255,255),rgba(255,255,255,0))}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-gradient{background:linear-gradient(to top,rgb(0,0,0),rgba(0,0,0,0))}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-gradient input{background:linear-gradient(to right,rgb(255,0,0) 0%,rgb(255,255,0) 17%,rgb(0,255,0) 33%,rgb(0,255,255) 50%,rgb(0,0,255) 67%,rgb(255,0,255) 83%,rgb(255,0,0) 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-transparent input{background-image:linear-gradient(to right,rgba(245,246,252,0),rgb(0,0,0)),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}\n"] }]
+                    ], template: "<ng-content select='ax-header'></ng-content>\r\n\r\n<ng-container [ngTemplateOutlet]=\"default\" *ngIf=\"!_children.length\"></ng-container>\r\n<ng-container [ngTemplateOutlet]=\"custom\" *ngIf=\"_children.length\"></ng-container>\r\n\r\n<ng-template #custom>\r\n    <ng-content select='ax-color-palette-preview'></ng-content>\r\n    <ng-content select='ax-color-palette-picker'></ng-content>\r\n    <ng-content select='ax-color-palette-swatches'></ng-content>\r\n    <ng-content select='ax-color-palette-favorite'></ng-content>\r\n    <ng-content select='ax-color-palette-input'></ng-content>\r\n</ng-template>\r\n<ng-template #default>\r\n    <ax-color-palette-preview></ax-color-palette-preview>\r\n    <ax-color-palette-swatches></ax-color-palette-swatches>\r\n    <ax-color-palette-input></ax-color-palette-input>\r\n</ng-template>\r\n\r\n<ng-content select='ax-footer'></ng-content>\r\n\r\n\r\n", styles: ["ax-color-palette{display:flex;flex-direction:column;border:1px solid;background-color:rgb(var(--ax-color-surface));border-color:rgb(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);width:18rem}@media (min-width: 600px){ax-color-palette{width:20rem!important}}@media (min-width: 1200px){ax-color-palette{width:18rem!important}}@media (max-width: 599px){ax-color-palette{width:100%!important}}ax-color-palette.ax-state-disabled{opacity:.5;cursor:not-allowed}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{opacity:.5;cursor:not-allowed}ax-color-palette ax-header,ax-color-palette ax-footer{padding:.75rem;border-top-width:1px;display:flex}ax-color-palette ax-color-palette-preview{position:relative;width:100%;height:6rem;gap:.5;border-top-left-radius:var(--ax-rounded-border-default);border-top-right-radius:var(--ax-rounded-border-default);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;left:0;width:100%;height:100%;display:flex;align-items:center;text-transform:uppercase;justify-content:center;border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default));box-shadow:0 1px 8px #00000029;text-shadow:0px 0px 14px rgba(0,0,0,.5)}ax-color-palette ax-color-palette-favorite{display:block;border-top:1px solid;border-color:rgb(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;padding:.5rem;grid-template-columns:repeat(10,minmax(0,1fr));max-height:9rem;overflow-x:hidden;gap:.5rem}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:99rem;border:1px solid rgb(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{content:\"\";padding-top:100%;float:left}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{content:\"\";display:block;clear:both}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{outline-offset:2px;outline-width:1px;outline-style:solid;outline-color:rgba(var(--ax-color-ghost),.86)}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:1.25rem}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-picker-overlay-trans{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay{display:block;width:100%;height:8rem;position:relative}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-pointer{width:.75rem;height:.75rem;border-radius:99rem;background-color:transparent;border:1px solid rgb(var(--ax-color-background-default));position:relative;z-index:1}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{height:100%;width:100%;position:absolute;inset:0}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1{z-index:0;background:linear-gradient(to right,#fff 0%,rgba(255,255,255,0) 100%)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{z-index:1;background:linear-gradient(to bottom,transparent 0%,#000 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-gradient input{background:linear-gradient(to right,rgb(255,0,0) 0%,rgb(255,255,0) 17%,rgb(0,255,0) 33%,rgb(0,255,255) 50%,rgb(0,0,255) 67%,rgb(255,0,255) 83%,rgb(255,0,0) 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-transparent input{background-image:linear-gradient(to right,rgba(245,246,252,0),rgb(0,0,0)),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _children: [{
                 type: ContentChildren,
                 args: [AXColorPaletteChildComponent]
-            }], colorModeChange: [{
-                type: Output
-            }], colorMode: [{
-                type: Input
             }], __hostDisabled: [{
                 type: HostBinding,
                 args: ['class.ax-state-disabled']
@@ -648,7 +717,8 @@ const MODULES = [
     AXButtonModule,
     AXDecoratorModule,
     AXNumberBoxModule,
-    AXRangeSliderModule
+    AXRangeSliderModule,
+    DragDropModule
 ];
 const CONPONENTS = [
     AXColorPalleteComponent,
@@ -669,7 +739,8 @@ AXColorPaletteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
         AXButtonModule,
         AXDecoratorModule,
         AXNumberBoxModule,
-        AXRangeSliderModule], exports: [AXColorPalleteComponent,
+        AXRangeSliderModule,
+        DragDropModule], exports: [AXColorPalleteComponent,
         AXColorPalettePreviewComponent,
         AXColorPaletteSwatchesComponent,
         AXColorPaletteInputComponent,