ngx-tethys 19.0.13 → 19.1.0-next.0

package/fesm2022/ngx-tethys-color-picker.mjs

@@ -1,17 +1,17 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, HostBinding, Component, inject, ElementRef, HostListener, Directive, Renderer2, ViewChild, ChangeDetectionStrategy, ViewContainerRef, NgZone, forwardRef, numberAttribute, NgModule } from '@angular/core';
+import { inject, ElementRef, HostListener, Output, Directive, Renderer2, input, viewChild, output, effect, HostBinding, ChangeDetectionStrategy, Component, ViewChild, computed, signal, model, ViewContainerRef, NgZone, numberAttribute, forwardRef, Input, NgModule } from '@angular/core';
+import { Subject, fromEvent } from 'rxjs';
+import { distinctUntilChanged, takeUntil } from 'rxjs/operators';
 import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ThyInputDirective, ThyInputGroup, ThyInputModule } from 'ngx-tethys/input';
 import { ThyInputNumber, ThyInputNumberModule } from 'ngx-tethys/input-number';
 import { ThyEnterDirective, ThySharedModule } from 'ngx-tethys/shared';
-import { Subject, fromEvent } from 'rxjs';
-import { distinctUntilChanged, takeUntil } from 'rxjs/operators';
-import { ThyPopover, ThyPopoverRef } from 'ngx-tethys/popover';
-import { ThyIcon, ThyIconModule } from 'ngx-tethys/icon';
 import { NgClass, NgTemplateOutlet, NgStyle, CommonModule } from '@angular/common';
-import { coerceBooleanProperty } from 'ngx-tethys/util';
 import { injectLocale } from 'ngx-tethys/i18n';
+import { ThyIcon, ThyIconModule } from 'ngx-tethys/icon';
+import { ThyPopover, ThyPopoverRef } from 'ngx-tethys/popover';
+import { coerceBooleanProperty } from 'ngx-tethys/util';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { Platform } from '@angular/cdk/platform';
 import { ThyOverlayDirectiveBase, mixinTabIndex, mixinDisabled } from 'ngx-tethys/core';
@@ -484,82 +484,6 @@ class ThyColor {
     }
 }
 
-/**
- * @internal
- */
-class ThyColorInputs {
-    constructor() {
-        this.className = true;
-        this.colorChange = new EventEmitter(false);
-    }
-    set color(value) {
-        this.alpha = Math.round(value.rgba.alpha * 100);
-        this.innerColor = value;
-        this.hex = this.innerColor.toHexString(false).slice(1, 7);
-    }
-    get color() {
-        return this.innerColor;
-    }
-    onInputChange(event, type) {
-        let newColor;
-        const alpha = this.alpha / 100;
-        if (type === 'hex') {
-            let finalDisplayValue = this.hex;
-            if (this.hex.length === 3) {
-                finalDisplayValue = this.hex
-                    .split('')
-                    .map(value => value + value)
-                    .join('');
-            }
-            finalDisplayValue = `#${finalDisplayValue}`;
-            if (alpha !== 1) {
-                finalDisplayValue += ((1 << 8) | Math.round(alpha * 255)).toString(16).substr(1);
-            }
-            newColor = new ThyColor(finalDisplayValue);
-        }
-        else {
-            newColor = new ThyColor().setRgba(this.innerColor.rgba.red, this.innerColor.rgba.green, this.innerColor.rgba.blue, alpha);
-        }
-        this.colorChange.emit(newColor);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyColorInputs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: ThyColorInputs, isStandalone: true, selector: "thy-color-inputs", inputs: { color: "color" }, outputs: { colorChange: "colorChange" }, host: { properties: { "class.thy-color-inputs": "this.className" } }, ngImport: i0, template: "<div class=\"hex-column\">\n  <thy-input-group class=\"hex-input-group\">\n    <ng-template #prefix>\n      <span>#</span>\n    </ng-template>\n    <input\n      class=\"px-0 form-control-xs\"\n      thyInput\n      [(ngModel)]=\"hex\"\n      maxlength=\"6\"\n      (blur)=\"onInputChange($event, 'hex')\"\n      (thyEnter)=\"onInputChange($event, 'hex')\" />\n  </thy-input-group>\n  <span>HEX</span>\n</div>\n<div class=\"column\">\n  <thy-input-number\n    thySize=\"xs\"\n    [thyMin]=\"0\"\n    [thyMax]=\"255\"\n    class=\"px-0 text-center\"\n    [(ngModel)]=\"color.rgba.red\"\n    (thyBlur)=\"onInputChange($event, 'R')\"\n    (thyEnter)=\"onInputChange($event, 'R')\"></thy-input-number>\n  <span>R</span>\n</div>\n<div class=\"column\">\n  <thy-input-number\n    thySize=\"xs\"\n    [thyMin]=\"0\"\n    [thyMax]=\"255\"\n    class=\"px-0 text-center\"\n    [(ngModel)]=\"color.rgba.green\"\n    (thyBlur)=\"onInputChange($event, 'G')\"\n    (thyEnter)=\"onInputChange($event, 'G')\"></thy-input-number>\n  <span>G</span>\n</div>\n<div class=\"column\">\n  <thy-input-number\n    thySize=\"xs\"\n    [thyMin]=\"0\"\n    [thyMax]=\"255\"\n    class=\"px-0 text-center\"\n    [(ngModel)]=\"color.rgba.blue\"\n    (thyBlur)=\"onInputChange($event, 'B')\"\n    (thyEnter)=\"onInputChange($event, 'B')\"></thy-input-number>\n  <span>B</span>\n</div>\n<div class=\"column\">\n  <thy-input-number\n    [thyMin]=\"0\"\n    [thyMax]=\"100\"\n    thySize=\"xs\"\n    class=\"px-0 text-center\"\n    [(ngModel)]=\"alpha\"\n    (thyBlur)=\"onInputChange($event, 'A')\"\n    (thyEnter)=\"onInputChange($event, 'A')\"></thy-input-number>\n  <span>A</span>\n</div>\n", dependencies: [{ kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "component", type: ThyInputNumber, selector: "thy-input-number", inputs: ["thyAutoFocus", "thyPlaceholder", "thyDisabled", "thyMax", "thyMin", "thyStep", "thyStepDelay", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus", "thyStepChange"] }, { kind: "component", type: ThyInputGroup, selector: "thy-input-group", inputs: ["thyAppendText", "thyAppendTextTranslateKey", "thyPrependText", "thyPrependTextTranslateKey", "thySize"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyColorInputs, decorators: [{
-            type: Component,
-            args: [{ selector: 'thy-color-inputs', imports: [ThyInputDirective, FormsModule, ThyEnterDirective, ThyInputNumber, ThyInputGroup], template: "<div class=\"hex-column\">\n  <thy-input-group class=\"hex-input-group\">\n    <ng-template #prefix>\n      <span>#</span>\n    </ng-template>\n    <input\n      class=\"px-0 form-control-xs\"\n      thyInput\n      [(ngModel)]=\"hex\"\n      maxlength=\"6\"\n      (blur)=\"onInputChange($event, 'hex')\"\n      (thyEnter)=\"onInputChange($event, 'hex')\" />\n  </thy-input-group>\n  <span>HEX</span>\n</div>\n<div class=\"column\">\n  <thy-input-number\n    thySize=\"xs\"\n    [thyMin]=\"0\"\n    [thyMax]=\"255\"\n    class=\"px-0 text-center\"\n    [(ngModel)]=\"color.rgba.red\"\n    (thyBlur)=\"onInputChange($event, 'R')\"\n    (thyEnter)=\"onInputChange($event, 'R')\"></thy-input-number>\n  <span>R</span>\n</div>\n<div class=\"column\">\n  <thy-input-number\n    thySize=\"xs\"\n    [thyMin]=\"0\"\n    [thyMax]=\"255\"\n    class=\"px-0 text-center\"\n    [(ngModel)]=\"color.rgba.green\"\n    (thyBlur)=\"onInputChange($event, 'G')\"\n    (thyEnter)=\"onInputChange($event, 'G')\"></thy-input-number>\n  <span>G</span>\n</div>\n<div class=\"column\">\n  <thy-input-number\n    thySize=\"xs\"\n    [thyMin]=\"0\"\n    [thyMax]=\"255\"\n    class=\"px-0 text-center\"\n    [(ngModel)]=\"color.rgba.blue\"\n    (thyBlur)=\"onInputChange($event, 'B')\"\n    (thyEnter)=\"onInputChange($event, 'B')\"></thy-input-number>\n  <span>B</span>\n</div>\n<div class=\"column\">\n  <thy-input-number\n    [thyMin]=\"0\"\n    [thyMax]=\"100\"\n    thySize=\"xs\"\n    class=\"px-0 text-center\"\n    [(ngModel)]=\"alpha\"\n    (thyBlur)=\"onInputChange($event, 'A')\"\n    (thyEnter)=\"onInputChange($event, 'A')\"></thy-input-number>\n  <span>A</span>\n</div>\n" }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class.thy-color-inputs']
-            }], color: [{
-                type: Input
-            }], colorChange: [{
-                type: Output
-            }] } });
-
-/**
- * @internal
- */
-class ThyIndicator {
-    constructor() {
-        this.className = true;
-    }
-    get backgroundColor() {
-        return this.color.rgba.toString();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: ThyIndicator, isStandalone: true, selector: "thy-indicator", inputs: { color: "color" }, host: { properties: { "class.thy-indicator": "this.className" } }, ngImport: i0, template: "<div [style.backgroundColor]=\"backgroundColor\" class=\"icon-container\"></div>\n" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyIndicator, decorators: [{
-            type: Component,
-            args: [{ selector: 'thy-indicator', template: "<div [style.backgroundColor]=\"backgroundColor\" class=\"icon-container\"></div>\n" }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class.thy-indicator']
-            }], color: [{
-                type: Input
-            }] } });
-
 /**
  * @internal
  */
@@ -635,23 +559,24 @@ class ThyAlpha {
     constructor() {
         this.renderer = inject(Renderer2);
         this.className = true;
-        this.colorChange = new EventEmitter(false);
+        this.color = input();
+        this.pointer = viewChild('pointer');
+        this.gradient = viewChild('gradient');
+        this.colorChange = output();
+        effect(() => {
+            this.setBackground();
+            this.changePointerPosition();
+        });
     }
     setBackground() {
-        this.renderer.setStyle(this.gradient.nativeElement, 'background', `linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(${this.color.rgba.red},
-            ${this.color.rgba.green},
-            ${this.color.rgba.blue},
+        this.renderer.setStyle(this.gradient().nativeElement, 'background', `linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(${this.color().rgba.red},
+            ${this.color().rgba.green},
+            ${this.color().rgba.blue},
             1) 100%)`);
     }
-    ngOnChanges(changes) {
-        if (changes.color && changes.color.previousValue !== changes.color.currentValue) {
-            this.setBackground();
-            this.changePointerPosition(this.color.alpha);
-        }
-    }
     changePointerPosition(alpha) {
-        const x = alpha * 100;
-        this.renderer.setStyle(this.pointer.nativeElement, 'left', `${x}%`);
+        const x = (alpha ?? this.color().alpha) * 100;
+        this.renderer.setStyle(this.pointer().nativeElement, 'left', `${x}%`);
     }
     handleChange(event) {
         let x;
@@ -665,27 +590,17 @@ class ThyAlpha {
             x = Math.round((event.left * 100) / event.containerWidth) / 100;
         }
         this.changePointerPosition(x);
-        this.colorChange.emit(new ThyColor({ h: this.color.hue, s: this.color.saturation, v: this.color.value, alpha: x }));
+        this.colorChange.emit(new ThyColor({ h: this.color().hue, s: this.color().saturation, v: this.color().value, alpha: x }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyAlpha, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: ThyAlpha, isStandalone: true, selector: "thy-alpha", inputs: { color: "color" }, outputs: { colorChange: "colorChange" }, host: { properties: { "class.thy-alpha": "this.className" } }, viewQueries: [{ propertyName: "pointer", first: true, predicate: ["pointer"], descendants: true, static: true }, { propertyName: "gradient", first: true, predicate: ["gradient"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"gradient-container\" thyColorCoordinates (coordinatesChange)=\"handleChange($event)\">\n  <div class=\"gradient-color\" #gradient>\n    <div class=\"pointer-container\">\n      <div class=\"pointer\" #pointer></div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: ThyCoordinatesDirective, selector: "[thyColorCoordinates]", outputs: ["coordinatesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.8", type: ThyAlpha, isStandalone: true, selector: "thy-alpha", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChange: "colorChange" }, host: { properties: { "class.thy-alpha": "this.className" } }, viewQueries: [{ propertyName: "pointer", first: true, predicate: ["pointer"], descendants: true, isSignal: true }, { propertyName: "gradient", first: true, predicate: ["gradient"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"gradient-container\" thyColorCoordinates (coordinatesChange)=\"handleChange($event)\">\n  <div class=\"gradient-color\" #gradient>\n    <div class=\"pointer-container\">\n      <div class=\"pointer\" #pointer></div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: ThyCoordinatesDirective, selector: "[thyColorCoordinates]", outputs: ["coordinatesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyAlpha, decorators: [{
             type: Component,
             args: [{ selector: 'thy-alpha', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ThyCoordinatesDirective], template: "<div class=\"gradient-container\" thyColorCoordinates (coordinatesChange)=\"handleChange($event)\">\n  <div class=\"gradient-color\" #gradient>\n    <div class=\"pointer-container\">\n      <div class=\"pointer\" #pointer></div>\n    </div>\n  </div>\n</div>\n" }]
-        }], propDecorators: { className: [{
+        }], ctorParameters: () => [], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class.thy-alpha']
-            }], color: [{
-                type: Input
-            }], pointer: [{
-                type: ViewChild,
-                args: ['pointer', { static: true }]
-            }], gradient: [{
-                type: ViewChild,
-                args: ['gradient', { static: true }]
-            }], colorChange: [{
-                type: Output
             }] } });
 
 /**
@@ -695,15 +610,15 @@ class ThyHue {
     constructor() {
         this.renderer = inject(Renderer2);
         this.className = true;
-        this.colorChange = new EventEmitter(false);
-    }
-    ngOnChanges(changes) {
-        if (changes.color && changes.color.previousValue !== changes.color.currentValue) {
-            this.changePointerPosition(this.color.hue);
-        }
+        this.color = input();
+        this.colorChange = output();
+        effect(() => {
+            this.changePointerPosition();
+        });
     }
     changePointerPosition(hue) {
-        const x = (hue / 360) * 100;
+        const newHue = hue ?? this.color().hue;
+        const x = (newHue / 360) * 100;
         this.renderer.setStyle(this.pointer.nativeElement, 'left', `${x}%`);
     }
     handleChange(event) {
@@ -718,26 +633,93 @@ class ThyHue {
             x = Math.round((event.left * 100) / event.containerWidth) / 100;
         }
         this.changePointerPosition(x * 360);
-        this.colorChange.emit(new ThyColor({ h: x * 360, s: this.color.saturation, v: this.color.value, alpha: this.color.alpha }));
+        this.colorChange.emit(new ThyColor({ h: x * 360, s: this.color().saturation, v: this.color().value, alpha: this.color().alpha }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyHue, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: ThyHue, isStandalone: true, selector: "thy-hue", inputs: { color: "color" }, outputs: { colorChange: "colorChange" }, host: { properties: { "class.thy-hue": "this.className" } }, viewQueries: [{ propertyName: "pointer", first: true, predicate: ["pointer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"hue-contianer\">\n  <div class=\"pointer-container\" thyColorCoordinates (coordinatesChange)=\"handleChange($event)\">\n    <div class=\"pointer\" #pointer></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: ThyCoordinatesDirective, selector: "[thyColorCoordinates]", outputs: ["coordinatesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.8", type: ThyHue, isStandalone: true, selector: "thy-hue", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChange: "colorChange" }, host: { properties: { "class.thy-hue": "this.className" } }, viewQueries: [{ propertyName: "pointer", first: true, predicate: ["pointer"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"hue-contianer\">\n  <div class=\"pointer-container\" thyColorCoordinates (coordinatesChange)=\"handleChange($event)\">\n    <div class=\"pointer\" #pointer></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: ThyCoordinatesDirective, selector: "[thyColorCoordinates]", outputs: ["coordinatesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyHue, decorators: [{
             type: Component,
             args: [{ selector: 'thy-hue', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ThyCoordinatesDirective], template: "<div class=\"hue-contianer\">\n  <div class=\"pointer-container\" thyColorCoordinates (coordinatesChange)=\"handleChange($event)\">\n    <div class=\"pointer\" #pointer></div>\n  </div>\n</div>\n" }]
-        }], propDecorators: { className: [{
+        }], ctorParameters: () => [], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class.thy-hue']
-            }], color: [{
-                type: Input
-            }], colorChange: [{
-                type: Output
             }], pointer: [{
                 type: ViewChild,
                 args: ['pointer', { static: true }]
             }] } });
 
+/**
+ * @internal
+ */
+class ThyIndicator {
+    constructor() {
+        this.className = true;
+        this.color = input();
+        this.backgroundColor = computed(() => {
+            return this.color()?.rgba.toString() || '';
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.8", type: ThyIndicator, isStandalone: true, selector: "thy-indicator", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.thy-indicator": "this.className" } }, ngImport: i0, template: "<div [style.backgroundColor]=\"backgroundColor()\" class=\"icon-container\"></div>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyIndicator, decorators: [{
+            type: Component,
+            args: [{ selector: 'thy-indicator', template: "<div [style.backgroundColor]=\"backgroundColor()\" class=\"icon-container\"></div>\n" }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class.thy-indicator']
+            }] } });
+
+/**
+ * @internal
+ */
+class ThyColorInputs {
+    constructor() {
+        this.className = true;
+        this.color = input();
+        this.colorChange = output();
+        this.hex = signal('');
+        this.alpha = signal(100);
+        effect(() => {
+            this.hex.set(this.color()?.toHexString(false).slice(1, 7) || '');
+            this.alpha.set(Math.round(this.color()?.rgba.alpha * 100) || 100);
+        });
+    }
+    ngOnInit() { }
+    onInputChange(event, type) {
+        let newColor;
+        const alpha = this.alpha() / 100;
+        if (type === 'hex') {
+            let finalDisplayValue = this.hex();
+            if (this.hex().length === 3) {
+                finalDisplayValue = this.hex()
+                    .split('')
+                    .map(value => value + value)
+                    .join('');
+            }
+            finalDisplayValue = `#${finalDisplayValue}`;
+            if (alpha !== 1) {
+                finalDisplayValue += ((1 << 8) | Math.round(alpha * 255)).toString(16).substr(1);
+            }
+            newColor = new ThyColor(finalDisplayValue);
+        }
+        else {
+            newColor = new ThyColor().setRgba(this.color().rgba.red, this.color().rgba.green, this.color().rgba.blue, alpha);
+        }
+        this.colorChange.emit(newColor);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyColorInputs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.8", type: ThyColorInputs, isStandalone: true, selector: "thy-color-inputs", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChange: "colorChange" }, host: { properties: { "class.thy-color-inputs": "this.className" } }, ngImport: i0, template: "<div class=\"hex-column\">\n  <thy-input-group class=\"hex-input-group\">\n    <ng-template #prefix>\n      <span>#</span>\n    </ng-template>\n    <input\n      class=\"px-0 form-control-xs\"\n      thyInput\n      [(ngModel)]=\"hex\"\n      maxlength=\"6\"\n      (blur)=\"onInputChange($event, 'hex')\"\n      (thyEnter)=\"onInputChange($event, 'hex')\" />\n  </thy-input-group>\n  <span>HEX</span>\n</div>\n<div class=\"column\">\n  <thy-input-number\n    thySize=\"xs\"\n    [thyMin]=\"0\"\n    [thyMax]=\"255\"\n    class=\"px-0 text-center\"\n    [(ngModel)]=\"color().rgba.red\"\n    (thyBlur)=\"onInputChange($event, 'R')\"\n    (thyEnter)=\"onInputChange($event, 'R')\"></thy-input-number>\n  <span>R</span>\n</div>\n<div class=\"column\">\n  <thy-input-number\n    thySize=\"xs\"\n    [thyMin]=\"0\"\n    [thyMax]=\"255\"\n    class=\"px-0 text-center\"\n    [(ngModel)]=\"color().rgba.green\"\n    (thyBlur)=\"onInputChange($event, 'G')\"\n    (thyEnter)=\"onInputChange($event, 'G')\"></thy-input-number>\n  <span>G</span>\n</div>\n<div class=\"column\">\n  <thy-input-number\n    thySize=\"xs\"\n    [thyMin]=\"0\"\n    [thyMax]=\"255\"\n    class=\"px-0 text-center\"\n    [(ngModel)]=\"color().rgba.blue\"\n    (thyBlur)=\"onInputChange($event, 'B')\"\n    (thyEnter)=\"onInputChange($event, 'B')\"></thy-input-number>\n  <span>B</span>\n</div>\n<div class=\"column\">\n  <thy-input-number\n    [thyMin]=\"0\"\n    [thyMax]=\"100\"\n    thySize=\"xs\"\n    class=\"px-0 text-center\"\n    [(ngModel)]=\"alpha\"\n    (thyBlur)=\"onInputChange($event, 'A')\"\n    (thyEnter)=\"onInputChange($event, 'A')\"></thy-input-number>\n  <span>A</span>\n</div>\n", dependencies: [{ kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "component", type: ThyInputNumber, selector: "thy-input-number", inputs: ["thyAutoFocus", "thyPlaceholder", "thyDisabled", "thyMax", "thyMin", "thyStep", "thyStepDelay", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus", "thyStepChange"] }, { kind: "component", type: ThyInputGroup, selector: "thy-input-group", inputs: ["thyAppendText", "thyAppendTextTranslateKey", "thyPrependText", "thyPrependTextTranslateKey", "thySize"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyColorInputs, decorators: [{
+            type: Component,
+            args: [{ selector: 'thy-color-inputs', imports: [ThyInputDirective, FormsModule, ThyEnterDirective, ThyInputNumber, ThyInputGroup], template: "<div class=\"hex-column\">\n  <thy-input-group class=\"hex-input-group\">\n    <ng-template #prefix>\n      <span>#</span>\n    </ng-template>\n    <input\n      class=\"px-0 form-control-xs\"\n      thyInput\n      [(ngModel)]=\"hex\"\n      maxlength=\"6\"\n      (blur)=\"onInputChange($event, 'hex')\"\n      (thyEnter)=\"onInputChange($event, 'hex')\" />\n  </thy-input-group>\n  <span>HEX</span>\n</div>\n<div class=\"column\">\n  <thy-input-number\n    thySize=\"xs\"\n    [thyMin]=\"0\"\n    [thyMax]=\"255\"\n    class=\"px-0 text-center\"\n    [(ngModel)]=\"color().rgba.red\"\n    (thyBlur)=\"onInputChange($event, 'R')\"\n    (thyEnter)=\"onInputChange($event, 'R')\"></thy-input-number>\n  <span>R</span>\n</div>\n<div class=\"column\">\n  <thy-input-number\n    thySize=\"xs\"\n    [thyMin]=\"0\"\n    [thyMax]=\"255\"\n    class=\"px-0 text-center\"\n    [(ngModel)]=\"color().rgba.green\"\n    (thyBlur)=\"onInputChange($event, 'G')\"\n    (thyEnter)=\"onInputChange($event, 'G')\"></thy-input-number>\n  <span>G</span>\n</div>\n<div class=\"column\">\n  <thy-input-number\n    thySize=\"xs\"\n    [thyMin]=\"0\"\n    [thyMax]=\"255\"\n    class=\"px-0 text-center\"\n    [(ngModel)]=\"color().rgba.blue\"\n    (thyBlur)=\"onInputChange($event, 'B')\"\n    (thyEnter)=\"onInputChange($event, 'B')\"></thy-input-number>\n  <span>B</span>\n</div>\n<div class=\"column\">\n  <thy-input-number\n    [thyMin]=\"0\"\n    [thyMax]=\"100\"\n    thySize=\"xs\"\n    class=\"px-0 text-center\"\n    [(ngModel)]=\"alpha\"\n    (thyBlur)=\"onInputChange($event, 'A')\"\n    (thyEnter)=\"onInputChange($event, 'A')\"></thy-input-number>\n  <span>A</span>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class.thy-color-inputs']
+            }] } });
+
 /**
  * @internal
  */
@@ -745,20 +727,24 @@ class ThySaturation {
     constructor() {
         this.renderer = inject(Renderer2);
         this.className = true;
-        this.colorChange = new EventEmitter(false);
-    }
-    ngOnChanges(changes) {
-        if (changes.color && changes.color.previousValue !== changes.color.currentValue) {
+        this.panel = viewChild('panel');
+        this.pointer = viewChild('pointer');
+        this.colorChange = output();
+        this.color = input();
+        effect(() => {
             this.setBackground();
-            this.changePointerPosition(this.color.saturation, this.color.value);
-        }
+            this.changePointerPosition();
+        });
     }
     setBackground() {
-        this.renderer.setStyle(this.panel.nativeElement, 'background', `hsl(${this.color.hue},100%,50%)`);
+        this.renderer.setStyle(this.panel().nativeElement, 'background', `hsl(${this.color().hue},100%,50%)`);
     }
     changePointerPosition(s, v) {
-        this.renderer.setStyle(this.pointer.nativeElement, 'left', `${s}%`);
-        this.renderer.setStyle(this.pointer.nativeElement, 'top', `${100 - v}%`);
+        const saturation = s ?? this.color().saturation;
+        const value = v ?? this.color().value;
+        const pointer = this.pointer();
+        this.renderer.setStyle(pointer.nativeElement, 'left', `${saturation}%`);
+        this.renderer.setStyle(pointer.nativeElement, 'top', `${100 - value}%`);
     }
     handleChange(event) {
         let x = event.left, y = event.top;
@@ -779,27 +765,17 @@ class ThySaturation {
         v = v > 0 ? v : 0;
         v = v > 1 ? 1 : v;
         this.changePointerPosition(s * 100, v * 100);
-        this.colorChange.emit(new ThyColor({ h: this.color.hue, s: s * 100, v: v * 100, alpha: this.color.alpha }));
+        this.colorChange.emit(new ThyColor({ h: this.color().hue, s: s * 100, v: v * 100, alpha: this.color().alpha }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySaturation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: ThySaturation, isStandalone: true, selector: "thy-saturation", inputs: { color: "color" }, outputs: { colorChange: "colorChange" }, host: { properties: { "class.thy-saturation": "this.className" } }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, static: true }, { propertyName: "pointer", first: true, predicate: ["pointer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"color-panel\" #panel thyColorCoordinates (coordinatesChange)=\"handleChange($event)\">\n  <div class=\"color-panel-white\"></div>\n  <div class=\"color-panel-black\"></div>\n  <div class=\"color-panel-pointer\" #pointer></div>\n</div>\n", dependencies: [{ kind: "directive", type: ThyCoordinatesDirective, selector: "[thyColorCoordinates]", outputs: ["coordinatesChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.8", type: ThySaturation, isStandalone: true, selector: "thy-saturation", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChange: "colorChange" }, host: { properties: { "class.thy-saturation": "this.className" } }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "pointer", first: true, predicate: ["pointer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"color-panel\" #panel thyColorCoordinates (coordinatesChange)=\"handleChange($event)\">\n  <div class=\"color-panel-white\"></div>\n  <div class=\"color-panel-black\"></div>\n  <div class=\"color-panel-pointer\" #pointer></div>\n</div>\n", dependencies: [{ kind: "directive", type: ThyCoordinatesDirective, selector: "[thyColorCoordinates]", outputs: ["coordinatesChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySaturation, decorators: [{
             type: Component,
             args: [{ selector: 'thy-saturation', imports: [ThyCoordinatesDirective], template: "<div class=\"color-panel\" #panel thyColorCoordinates (coordinatesChange)=\"handleChange($event)\">\n  <div class=\"color-panel-white\"></div>\n  <div class=\"color-panel-black\"></div>\n  <div class=\"color-panel-pointer\" #pointer></div>\n</div>\n" }]
-        }], propDecorators: { className: [{
+        }], ctorParameters: () => [], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class.thy-saturation']
-            }], panel: [{
-                type: ViewChild,
-                args: ['panel', { static: true }]
-            }], pointer: [{
-                type: ViewChild,
-                args: ['pointer', { static: true }]
-            }], colorChange: [{
-                type: Output
-            }], color: [{
-                type: Input
             }] } });
 
 /**
@@ -808,28 +784,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
 class ThyColorPickerCustomPanel {
     constructor() {
         this.className = true;
+        this.color = model();
+        this.colorInstance = signal(null);
+        this.pickerColorChange = input();
     }
     ngOnInit() {
-        this.colorInstance = new ThyColor(this.color);
+        this.colorInstance.set(new ThyColor(this.color()));
     }
     colorChangeEvent($event) {
-        this.colorInstance = $event;
-        this.color = this.colorInstance.displayValue;
-        this.pickerColorChange(this.color);
+        this.colorInstance.set($event);
+        this.color.set(this.colorInstance().displayValue);
+        this.pickerColorChange()(this.color());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyColorPickerCustomPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: ThyColorPickerCustomPanel, isStandalone: true, selector: "thy-color-picker-custom-panel", inputs: { color: "color", pickerColorChange: "pickerColorChange" }, host: { properties: { "class.thy-color-picker-custom-panel": "this.className" } }, ngImport: i0, template: "<thy-saturation [color]=\"colorInstance\" (colorChange)=\"colorChangeEvent($event)\"></thy-saturation>\n<div class=\"controls\">\n  <div class=\"indicator-hue-alp\">\n    <div class=\"rows\">\n      <thy-hue [color]=\"colorInstance\" (colorChange)=\"colorChangeEvent($event)\"></thy-hue>\n      <thy-alpha [color]=\"colorInstance\" (colorChange)=\"colorChangeEvent($event)\"></thy-alpha>\n    </div>\n    <thy-indicator [color]=\"colorInstance\" (colorChange)=\"colorChangeEvent($event)\"></thy-indicator>\n  </div>\n</div>\n<thy-color-inputs [color]=\"colorInstance\" (colorChange)=\"colorChangeEvent($event)\"></thy-color-inputs>\n", dependencies: [{ kind: "component", type: ThySaturation, selector: "thy-saturation", inputs: ["color"], outputs: ["colorChange"] }, { kind: "component", type: ThyHue, selector: "thy-hue", inputs: ["color"], outputs: ["colorChange"] }, { kind: "component", type: ThyAlpha, selector: "thy-alpha", inputs: ["color"], outputs: ["colorChange"] }, { kind: "component", type: ThyIndicator, selector: "thy-indicator", inputs: ["color"] }, { kind: "component", type: ThyColorInputs, selector: "thy-color-inputs", inputs: ["color"], outputs: ["colorChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.8", type: ThyColorPickerCustomPanel, isStandalone: true, selector: "thy-color-picker-custom-panel", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, pickerColorChange: { classPropertyName: "pickerColorChange", publicName: "pickerColorChange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange" }, host: { properties: { "class.thy-color-picker-custom-panel": "this.className" } }, ngImport: i0, template: "<thy-saturation [color]=\"colorInstance()\" (colorChange)=\"colorChangeEvent($event)\"></thy-saturation>\n<div class=\"controls\">\n  <div class=\"indicator-hue-alp\">\n    <div class=\"rows\">\n      <thy-hue [color]=\"colorInstance()\" (colorChange)=\"colorChangeEvent($event)\"></thy-hue>\n      <thy-alpha [color]=\"colorInstance()\" (colorChange)=\"colorChangeEvent($event)\"></thy-alpha>\n    </div>\n    <thy-indicator [color]=\"colorInstance()\" (colorChange)=\"colorChangeEvent($event)\"></thy-indicator>\n  </div>\n</div>\n<thy-color-inputs [color]=\"colorInstance()\" (colorChange)=\"colorChangeEvent($event)\"></thy-color-inputs>\n", dependencies: [{ kind: "component", type: ThySaturation, selector: "thy-saturation", inputs: ["color"], outputs: ["colorChange"] }, { kind: "component", type: ThyHue, selector: "thy-hue", inputs: ["color"], outputs: ["colorChange"] }, { kind: "component", type: ThyAlpha, selector: "thy-alpha", inputs: ["color"], outputs: ["colorChange"] }, { kind: "component", type: ThyIndicator, selector: "thy-indicator", inputs: ["color"] }, { kind: "component", type: ThyColorInputs, selector: "thy-color-inputs", inputs: ["color"], outputs: ["colorChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyColorPickerCustomPanel, decorators: [{
             type: Component,
-            args: [{ selector: 'thy-color-picker-custom-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ThySaturation, ThyHue, ThyAlpha, ThyIndicator, ThyColorInputs], template: "<thy-saturation [color]=\"colorInstance\" (colorChange)=\"colorChangeEvent($event)\"></thy-saturation>\n<div class=\"controls\">\n  <div class=\"indicator-hue-alp\">\n    <div class=\"rows\">\n      <thy-hue [color]=\"colorInstance\" (colorChange)=\"colorChangeEvent($event)\"></thy-hue>\n      <thy-alpha [color]=\"colorInstance\" (colorChange)=\"colorChangeEvent($event)\"></thy-alpha>\n    </div>\n    <thy-indicator [color]=\"colorInstance\" (colorChange)=\"colorChangeEvent($event)\"></thy-indicator>\n  </div>\n</div>\n<thy-color-inputs [color]=\"colorInstance\" (colorChange)=\"colorChangeEvent($event)\"></thy-color-inputs>\n" }]
+            args: [{ selector: 'thy-color-picker-custom-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ThySaturation, ThyHue, ThyAlpha, ThyIndicator, ThyColorInputs], template: "<thy-saturation [color]=\"colorInstance()\" (colorChange)=\"colorChangeEvent($event)\"></thy-saturation>\n<div class=\"controls\">\n  <div class=\"indicator-hue-alp\">\n    <div class=\"rows\">\n      <thy-hue [color]=\"colorInstance()\" (colorChange)=\"colorChangeEvent($event)\"></thy-hue>\n      <thy-alpha [color]=\"colorInstance()\" (colorChange)=\"colorChangeEvent($event)\"></thy-alpha>\n    </div>\n    <thy-indicator [color]=\"colorInstance()\" (colorChange)=\"colorChangeEvent($event)\"></thy-indicator>\n  </div>\n</div>\n<thy-color-inputs [color]=\"colorInstance()\" (colorChange)=\"colorChangeEvent($event)\"></thy-color-inputs>\n" }]
         }], ctorParameters: () => [], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class.thy-color-picker-custom-panel']
-            }], color: [{
-                type: Input
-            }], pickerColorChange: [{
-                type: Input
             }] } });
 
 /**
@@ -841,15 +816,17 @@ class ThyColorPickerPanel {
         this.viewContainerRef = inject(ViewContainerRef);
         this.thyPopoverRef = inject(ThyPopoverRef);
         this.locale = injectLocale('colorPicker');
-        this.className = true;
+        this.color = model();
+        this.colorChange = input();
+        this.defaultColor = input('', {
+            transform: (value) => {
+                return (value && new ThyColor(value).toHexString(true)) || '';
+            }
+        });
+        this.transparentColorSelectable = input(false, { transform: coerceBooleanProperty });
+        this.defaultColors = input();
         this.recentColors = [];
     }
-    set defaultColor(value) {
-        this.customDefaultColor = value;
-    }
-    get defaultColor() {
-        return new ThyColor(this.customDefaultColor).toHexString(true);
-    }
     ngOnInit() {
         const colors = localStorage.getItem('recentColors');
         if (colors) {
@@ -857,8 +834,8 @@ class ThyColorPickerPanel {
         }
     }
     selectColor(color) {
-        this.color = color;
-        this.colorChange(this.color);
+        this.color.set(color);
+        this.colorChange()(this.color());
         this.thyPopoverRef.close();
     }
     showMoreColor(event) {
@@ -873,10 +850,10 @@ class ThyColorPickerPanel {
                 viewContainerRef: this.viewContainerRef,
                 originActiveClass: 'thy-color-picker-active',
                 initialState: {
-                    color: this.color,
+                    color: this.color(),
                     pickerColorChange: (value) => {
                         this.newColor = value;
-                        this.colorChange(value);
+                        this.colorChange()(value);
                     }
                 }
             });
@@ -900,28 +877,15 @@ class ThyColorPickerPanel {
         return hsp > 192 ? 'black' : 'white';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyColorPickerPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyColorPickerPanel, isStandalone: true, selector: "thy-color-picker-panel", inputs: { color: "color", colorChange: "colorChange", defaultColor: "defaultColor", transparentColorSelectable: ["transparentColorSelectable", "transparentColorSelectable", coerceBooleanProperty], defaultColors: "defaultColors" }, host: { properties: { "class.pt-4": "!transparentColorSelectable", "class.thy-color-picker-panel": "this.className" } }, ngImport: i0, template: "@if (customDefaultColor) {\n  <div class=\"quick-color\" [ngClass]=\"transparentColorSelectable ? ' mb-0 pb-0' : ''\" (click)=\"selectColor(defaultColor)\">\n    <ng-template [ngTemplateOutlet]=\"checkIconTpl\" [ngTemplateOutletContext]=\"{ $implicit: defaultColor }\"></ng-template>\n    <span class=\"ml-2 font-size-sm text-secondary\">{{ locale().defaultColor }}</span>\n  </div>\n}\n@if (transparentColorSelectable) {\n  <div class=\"quick-color\" [ngClass]=\"customDefaultColor ? 'mt-0 pt-0' : ''\" (click)=\"selectColor('transparent')\">\n    <div class=\"color-block\"></div>\n    <span class=\"ml-2 font-size-sm text-secondary\">{{ locale().noFillColor }}</span>\n  </div>\n}\n<div class=\"main-content\">\n  <div class=\"default-color\">\n    @for (item of defaultColors; track $index) {\n      <ng-template [ngTemplateOutlet]=\"checkIconTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n    }\n  </div>\n  <p class=\"font-size-sm text-secondary recent-text\">{{ locale().recentUsedColor }}</p>\n  <div class=\"recent-color-container\">\n    @for (item of recentColors; track $index) {\n      <ng-template [ngTemplateOutlet]=\"checkIconTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n    }\n    @if (recentColors.length === 0) {\n      <div class=\"font-size-sm px-1 text-muted\">{{ locale().none }}</div>\n    }\n  </div>\n</div>\n<div class=\"more-color\" (click)=\"showMoreColor($event)\">\n  <thy-icon thyIconName=\"palette\" class=\"mr-2\"></thy-icon>\n  <span class=\"font-size-sm custom-text\">{{ locale().customColor }}</span>\n  <thy-icon thyDropdownMenuItemExtendIcon thyIconName=\"angle-right\"></thy-icon>\n</div>\n\n<ng-template #checkIconTpl let-colorItem>\n  <div\n    class=\"color-item\"\n    [ngStyle]=\"{ background: colorItem }\"\n    [ngClass]=\"colorItem === '#FFFFFF' ? 'item-border' : ''\"\n    (click)=\"selectColor(colorItem)\">\n    <thy-icon\n      thyIconName=\"check-thick\"\n      class=\"check-icon\"\n      [ngClass]=\"\n        color === colorItem ? (getIconColor(colorItem) === 'white' ? 'checked white-check' : 'checked black-check') : ''\n      \"></thy-icon>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyColorPickerPanel, isStandalone: true, selector: "thy-color-picker-panel", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, colorChange: { classPropertyName: "colorChange", publicName: "colorChange", isSignal: true, isRequired: false, transformFunction: null }, defaultColor: { classPropertyName: "defaultColor", publicName: "defaultColor", isSignal: true, isRequired: false, transformFunction: null }, transparentColorSelectable: { classPropertyName: "transparentColorSelectable", publicName: "transparentColorSelectable", isSignal: true, isRequired: false, transformFunction: null }, defaultColors: { classPropertyName: "defaultColors", publicName: "defaultColors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange" }, host: { properties: { "class.pt-4": "!transparentColorSelectable()", "class.thy-color-picker-panel": "true" } }, ngImport: i0, template: "@if (defaultColor()) {\n  <div class=\"quick-color\" [ngClass]=\"transparentColorSelectable() ? ' mb-0 pb-0' : ''\" (click)=\"selectColor(defaultColor())\">\n    <ng-template [ngTemplateOutlet]=\"checkIconTpl\" [ngTemplateOutletContext]=\"{ $implicit: defaultColor() }\"></ng-template>\n    <span class=\"ml-2 font-size-sm text-secondary\">{{ locale().defaultColor }}</span>\n  </div>\n}\n@if (transparentColorSelectable()) {\n  <div class=\"quick-color\" [ngClass]=\"defaultColor() ? 'mt-0 pt-0' : ''\" (click)=\"selectColor('transparent')\">\n    <div class=\"color-block\"></div>\n    <span class=\"ml-2 font-size-sm text-secondary\">{{ locale().noFillColor }}</span>\n  </div>\n}\n<div class=\"main-content\">\n  <div class=\"default-color\">\n    @for (item of defaultColors(); track $index) {\n      <ng-template [ngTemplateOutlet]=\"checkIconTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n    }\n  </div>\n  <p class=\"font-size-sm text-secondary recent-text\">{{ locale().recentUsedColor }}</p>\n  <div class=\"recent-color-container\">\n    @for (item of recentColors; track $index) {\n      <ng-template [ngTemplateOutlet]=\"checkIconTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n    }\n    @if (recentColors.length === 0) {\n      <div class=\"font-size-sm px-1 text-muted\">{{ locale().none }}</div>\n    }\n  </div>\n</div>\n<div class=\"more-color\" (click)=\"showMoreColor($event)\">\n  <thy-icon thyIconName=\"palette\" class=\"mr-2\"></thy-icon>\n  <span class=\"font-size-sm custom-text\">{{ locale().customColor }}</span>\n  <thy-icon thyDropdownMenuItemExtendIcon thyIconName=\"angle-right\"></thy-icon>\n</div>\n\n<ng-template #checkIconTpl let-colorItem>\n  <div\n    class=\"color-item\"\n    [ngStyle]=\"{ background: colorItem }\"\n    [ngClass]=\"colorItem === '#FFFFFF' ? 'item-border' : ''\"\n    (click)=\"selectColor(colorItem)\">\n    <thy-icon\n      thyIconName=\"check-thick\"\n      class=\"check-icon\"\n      [ngClass]=\"\n        color() === colorItem ? (getIconColor(colorItem) === 'white' ? 'checked white-check' : 'checked black-check') : ''\n      \"></thy-icon>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyColorPickerPanel, decorators: [{
             type: Component,
             args: [{ selector: 'thy-color-picker-panel', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[class.pt-4]': '!transparentColorSelectable'
-                    }, imports: [NgClass, NgTemplateOutlet, ThyIcon, NgStyle], template: "@if (customDefaultColor) {\n  <div class=\"quick-color\" [ngClass]=\"transparentColorSelectable ? ' mb-0 pb-0' : ''\" (click)=\"selectColor(defaultColor)\">\n    <ng-template [ngTemplateOutlet]=\"checkIconTpl\" [ngTemplateOutletContext]=\"{ $implicit: defaultColor }\"></ng-template>\n    <span class=\"ml-2 font-size-sm text-secondary\">{{ locale().defaultColor }}</span>\n  </div>\n}\n@if (transparentColorSelectable) {\n  <div class=\"quick-color\" [ngClass]=\"customDefaultColor ? 'mt-0 pt-0' : ''\" (click)=\"selectColor('transparent')\">\n    <div class=\"color-block\"></div>\n    <span class=\"ml-2 font-size-sm text-secondary\">{{ locale().noFillColor }}</span>\n  </div>\n}\n<div class=\"main-content\">\n  <div class=\"default-color\">\n    @for (item of defaultColors; track $index) {\n      <ng-template [ngTemplateOutlet]=\"checkIconTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n    }\n  </div>\n  <p class=\"font-size-sm text-secondary recent-text\">{{ locale().recentUsedColor }}</p>\n  <div class=\"recent-color-container\">\n    @for (item of recentColors; track $index) {\n      <ng-template [ngTemplateOutlet]=\"checkIconTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n    }\n    @if (recentColors.length === 0) {\n      <div class=\"font-size-sm px-1 text-muted\">{{ locale().none }}</div>\n    }\n  </div>\n</div>\n<div class=\"more-color\" (click)=\"showMoreColor($event)\">\n  <thy-icon thyIconName=\"palette\" class=\"mr-2\"></thy-icon>\n  <span class=\"font-size-sm custom-text\">{{ locale().customColor }}</span>\n  <thy-icon thyDropdownMenuItemExtendIcon thyIconName=\"angle-right\"></thy-icon>\n</div>\n\n<ng-template #checkIconTpl let-colorItem>\n  <div\n    class=\"color-item\"\n    [ngStyle]=\"{ background: colorItem }\"\n    [ngClass]=\"colorItem === '#FFFFFF' ? 'item-border' : ''\"\n    (click)=\"selectColor(colorItem)\">\n    <thy-icon\n      thyIconName=\"check-thick\"\n      class=\"check-icon\"\n      [ngClass]=\"\n        color === colorItem ? (getIconColor(colorItem) === 'white' ? 'checked white-check' : 'checked black-check') : ''\n      \"></thy-icon>\n  </div>\n</ng-template>\n" }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class.thy-color-picker-panel']
-            }], color: [{
-                type: Input
-            }], colorChange: [{
-                type: Input
-            }], defaultColor: [{
-                type: Input
-            }], transparentColorSelectable: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], defaultColors: [{
-                type: Input
-            }] } });
+                        '[class.pt-4]': '!transparentColorSelectable()',
+                        '[class.thy-color-picker-panel]': 'true'
+                    }, imports: [NgClass, NgTemplateOutlet, ThyIcon, NgStyle], template: "@if (defaultColor()) {\n  <div class=\"quick-color\" [ngClass]=\"transparentColorSelectable() ? ' mb-0 pb-0' : ''\" (click)=\"selectColor(defaultColor())\">\n    <ng-template [ngTemplateOutlet]=\"checkIconTpl\" [ngTemplateOutletContext]=\"{ $implicit: defaultColor() }\"></ng-template>\n    <span class=\"ml-2 font-size-sm text-secondary\">{{ locale().defaultColor }}</span>\n  </div>\n}\n@if (transparentColorSelectable()) {\n  <div class=\"quick-color\" [ngClass]=\"defaultColor() ? 'mt-0 pt-0' : ''\" (click)=\"selectColor('transparent')\">\n    <div class=\"color-block\"></div>\n    <span class=\"ml-2 font-size-sm text-secondary\">{{ locale().noFillColor }}</span>\n  </div>\n}\n<div class=\"main-content\">\n  <div class=\"default-color\">\n    @for (item of defaultColors(); track $index) {\n      <ng-template [ngTemplateOutlet]=\"checkIconTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n    }\n  </div>\n  <p class=\"font-size-sm text-secondary recent-text\">{{ locale().recentUsedColor }}</p>\n  <div class=\"recent-color-container\">\n    @for (item of recentColors; track $index) {\n      <ng-template [ngTemplateOutlet]=\"checkIconTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n    }\n    @if (recentColors.length === 0) {\n      <div class=\"font-size-sm px-1 text-muted\">{{ locale().none }}</div>\n    }\n  </div>\n</div>\n<div class=\"more-color\" (click)=\"showMoreColor($event)\">\n  <thy-icon thyIconName=\"palette\" class=\"mr-2\"></thy-icon>\n  <span class=\"font-size-sm custom-text\">{{ locale().customColor }}</span>\n  <thy-icon thyDropdownMenuItemExtendIcon thyIconName=\"angle-right\"></thy-icon>\n</div>\n\n<ng-template #checkIconTpl let-colorItem>\n  <div\n    class=\"color-item\"\n    [ngStyle]=\"{ background: colorItem }\"\n    [ngClass]=\"colorItem === '#FFFFFF' ? 'item-border' : ''\"\n    (click)=\"selectColor(colorItem)\">\n    <thy-icon\n      thyIconName=\"check-thick\"\n      class=\"check-icon\"\n      [ngClass]=\"\n        color() === colorItem ? (getIconColor(colorItem) === 'white' ? 'checked white-check' : 'checked black-check') : ''\n      \"></thy-icon>\n  </div>\n</ng-template>\n" }]
+        }] });
 
 const DEFAULT_COLORS = [
     '#333333',
@@ -1011,26 +975,6 @@ const _BaseMixin = mixinTabIndex(mixinDisabled(OverlayBase));
  * @name thyColorPicker
  */
 class ThyColorPickerDirective extends _BaseMixin {
-    /**
-     * 弹出悬浮层的触发方式
-     * @type 'hover' | 'click'
-     * @default click
-     */
-    set thyTrigger(trigger) {
-        this.trigger = trigger;
-    }
-    /**
-     * 显示延迟时间
-     */
-    set thyShowDelay(value) {
-        this.showDelay = value;
-    }
-    /**
-     * 隐藏延迟时间
-     */
-    set thyHideDelay(value) {
-        this.hideDelay = value;
-    }
     /**
      * 是否属于禁用状态
      */
@@ -1054,39 +998,63 @@ class ThyColorPickerDirective extends _BaseMixin {
          * 弹框偏移量
          * @type  number
          */
-        this.thyOffset = 0;
+        this.thyOffset = input(0, { transform: numberAttribute });
         /**
          * 颜色选择面板是否有幕布
          */
-        this.thyHasBackdrop = true;
+        this.thyHasBackdrop = input(true, { transform: coerceBooleanProperty });
+        /**
+         * 设置颜色选择面板的默认颜色选项值
+         */
+        this.thyDefaultColor = input();
         /**
          * 是否显示'无填充色'选项
          */
-        this.thyTransparentColorSelectable = true;
+        this.thyTransparentColorSelectable = input(true, { transform: coerceBooleanProperty });
         /**
          * 预设的快捷选择颜色
          * @type string[]
          */
-        this.thyPresetColors = DEFAULT_COLORS;
+        this.thyPresetColors = input(DEFAULT_COLORS);
         /**
          * 颜色面板弹出位置 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom'
          * @type ThyPlacement
          */
-        this.thyPlacement = 'bottom';
+        this.thyPlacement = input('bottom');
         /**
          * panel 展开后触发
          */
-        this.thyPanelOpen = new EventEmitter();
+        this.thyPanelOpen = output();
         /**
          * panel 关闭后触发
          */
-        this.thyPanelClose = new EventEmitter();
+        this.thyPanelClose = output();
+        /**
+         * 弹出悬浮层的触发方式
+         * @type 'hover' | 'click'
+         */
+        this.thyTrigger = input('click');
+        /**
+         * 显示延迟时间
+         */
+        this.thyShowDelay = input(100, { transform: numberAttribute });
+        /**
+         * 隐藏延迟时间
+         */
+        this.thyHideDelay = input(100, { transform: numberAttribute });
         this.onChangeFn = () => { };
         this.onTouchFn = () => { };
         this.closePanel = true;
         this.destroy$ = new Subject();
+        effect(() => {
+            // TODO: 基类参数
+            this.showDelay = this.thyShowDelay() ?? 100;
+            this.hideDelay = this.thyHideDelay() ?? 100;
+            this.trigger = this.thyTrigger() || 'click';
+        });
     }
-    ngOnInit() {
+    ngOnInit() { }
+    ngAfterViewInit() {
         this.initialize();
         if (this.trigger === 'hover') {
             this.ngZone.runOutsideAngular(() => {
@@ -1113,12 +1081,12 @@ class ThyColorPickerDirective extends _BaseMixin {
         this.closePanel = false;
         this.popoverRef = this.thyPopover.open(ThyColorPickerPanel, {
             origin: this.elementRef.nativeElement,
-            offset: this.thyOffset,
+            offset: this.thyOffset(),
             manualClosure: true,
             width: '286px',
-            placement: this.thyPlacement,
+            placement: this.thyPlacement(),
             originActiveClass: 'thy-default-picker-active',
-            hasBackdrop: this.thyHasBackdrop,
+            hasBackdrop: this.thyHasBackdrop(),
             outsideClosable: false,
             canClose: () => {
                 if (this.trigger === 'hover') {
@@ -1128,9 +1096,9 @@ class ThyColorPickerDirective extends _BaseMixin {
             },
             initialState: {
                 color: new ThyColor(this.color).toHexString(true),
-                defaultColor: this.thyDefaultColor,
-                transparentColorSelectable: this.thyTransparentColorSelectable,
-                defaultColors: this.thyPresetColors,
+                defaultColor: this.thyDefaultColor(),
+                transparentColorSelectable: this.thyTransparentColorSelectable(),
+                defaultColors: this.thyPresetColors(),
                 colorChange: (value) => {
                     this.closePanel = true;
                     this.onModelChange(value);
@@ -1146,7 +1114,7 @@ class ThyColorPickerDirective extends _BaseMixin {
                 this.elementRef.nativeElement.focus();
             });
         }
-        if (this.popoverRef && !this.thyHasBackdrop) {
+        if (this.popoverRef && !this.thyHasBackdrop()) {
             this.popoverRef
                 .getOverlayRef()
                 .outsidePointerEvents()
@@ -1214,7 +1182,7 @@ class ThyColorPickerDirective extends _BaseMixin {
         this.popoverRef = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyColorPickerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.8", type: ThyColorPickerDirective, isStandalone: true, selector: "[thyColorPicker]", inputs: { thyOffset: ["thyOffset", "thyOffset", numberAttribute], thyHasBackdrop: ["thyHasBackdrop", "thyHasBackdrop", coerceBooleanProperty], thyDefaultColor: "thyDefaultColor", thyTransparentColorSelectable: ["thyTransparentColorSelectable", "thyTransparentColorSelectable", coerceBooleanProperty], thyPresetColors: "thyPresetColors", thyPlacement: "thyPlacement", thyTrigger: "thyTrigger", thyShowDelay: ["thyShowDelay", "thyShowDelay", numberAttribute], thyHideDelay: ["thyHideDelay", "thyHideDelay", numberAttribute], thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty] }, outputs: { thyPanelOpen: "thyPanelOpen", thyPanelClose: "thyPanelClose" }, host: { properties: { "attr.tabindex": "tabIndex", "class.thy-color-picker-disabled": "disabled" }, classAttribute: "thy-color-picker" }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: ThyColorPickerDirective, isStandalone: true, selector: "[thyColorPicker]", inputs: { thyOffset: { classPropertyName: "thyOffset", publicName: "thyOffset", isSignal: true, isRequired: false, transformFunction: null }, thyHasBackdrop: { classPropertyName: "thyHasBackdrop", publicName: "thyHasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, thyDefaultColor: { classPropertyName: "thyDefaultColor", publicName: "thyDefaultColor", isSignal: true, isRequired: false, transformFunction: null }, thyTransparentColorSelectable: { classPropertyName: "thyTransparentColorSelectable", publicName: "thyTransparentColorSelectable", isSignal: true, isRequired: false, transformFunction: null }, thyPresetColors: { classPropertyName: "thyPresetColors", publicName: "thyPresetColors", isSignal: true, isRequired: false, transformFunction: null }, thyPlacement: { classPropertyName: "thyPlacement", publicName: "thyPlacement", isSignal: true, isRequired: false, transformFunction: null }, thyTrigger: { classPropertyName: "thyTrigger", publicName: "thyTrigger", isSignal: true, isRequired: false, transformFunction: null }, thyShowDelay: { classPropertyName: "thyShowDelay", publicName: "thyShowDelay", isSignal: true, isRequired: false, transformFunction: null }, thyHideDelay: { classPropertyName: "thyHideDelay", publicName: "thyHideDelay", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: false, isRequired: false, transformFunction: coerceBooleanProperty } }, outputs: { thyPanelOpen: "thyPanelOpen", thyPanelClose: "thyPanelClose" }, host: { properties: { "attr.tabindex": "tabIndex", "class.thy-color-picker-disabled": "disabled" }, classAttribute: "thy-color-picker" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -1239,34 +1207,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         }
                     ]
                 }]
-        }], ctorParameters: () => [], propDecorators: { thyOffset: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], thyHasBackdrop: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyDefaultColor: [{
-                type: Input
-            }], thyTransparentColorSelectable: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyPresetColors: [{
-                type: Input
-            }], thyPlacement: [{
-                type: Input
-            }], thyPanelOpen: [{
-                type: Output
-            }], thyPanelClose: [{
-                type: Output
-            }], thyTrigger: [{
-                type: Input
-            }], thyShowDelay: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], thyHideDelay: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], thyDisabled: [{
+        }], ctorParameters: () => [], propDecorators: { thyDisabled: [{
                 type: Input,
                 args: [{ transform: coerceBooleanProperty }]
             }] } });