ngx-tethys 20.0.1 → 20.0.2

package/fesm2022/ngx-tethys-checkbox.mjs

@@ -19,8 +19,8 @@ class ThyCheckbox extends ThyFormCheckBaseComponent {
          */
         this.thyIndeterminate = input(false, ...(ngDevMode ? [{ debugName: "thyIndeterminate", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: ThyCheckbox, isStandalone: true, selector: "thy-checkbox,[thy-checkbox],[thyCheckbox]", inputs: { thyIndeterminate: { classPropertyName: "thyIndeterminate", publicName: "thyIndeterminate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.tabindex": "-1", "class.disabled": "_disabled" }, classAttribute: "thy-checkbox" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ThyCheckbox, isStandalone: true, selector: "thy-checkbox,[thy-checkbox],[thyCheckbox]", inputs: { thyIndeterminate: { classPropertyName: "thyIndeterminate", publicName: "thyIndeterminate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.tabindex": "-1", "class.disabled": "_disabled" }, classAttribute: "thy-checkbox" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ThyCheckbox),
@@ -28,7 +28,7 @@ class ThyCheckbox extends ThyFormCheckBaseComponent {
             }
         ], usesInheritance: true, ngImport: i0, template: "<input\n  class=\"form-check-input\"\n  [ngClass]=\"{ 'form-check-indeterminate': thyIndeterminate(), 'form-check-no-label-text': !_labelText() }\"\n  [checked]=\"_innerValue\"\n  (change)=\"change()\"\n  type=\"checkbox\"\n  [attr.tabindex]=\"tabIndex\"\n  [disabled]=\"_disabled\" />\n@if (_labelText()) {\n  <span class=\"form-check-label\">{{ _labelText() }}</span>\n}\n<ng-content></ng-content>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyCheckbox, decorators: [{
             type: Component,
             args: [{ selector: 'thy-checkbox,[thy-checkbox],[thyCheckbox]', providers: [
                         {
@@ -44,11 +44,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
         }], propDecorators: { thyIndeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyIndeterminate", required: false }] }] } });
 
 class ThyCheckboxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: ThyCheckboxModule, imports: [CommonModule, FormsModule, ThyCheckbox], exports: [ThyCheckbox] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyCheckboxModule, imports: [CommonModule, FormsModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: ThyCheckboxModule, imports: [CommonModule, FormsModule, ThyCheckbox], exports: [ThyCheckbox] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyCheckboxModule, imports: [CommonModule, FormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyCheckboxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyCheckboxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, FormsModule, ThyCheckbox],

package/fesm2022/ngx-tethys-collapse.mjs

@@ -78,10 +78,10 @@ class ThyCollapseItem {
     ngOnDestroy() {
         this.thyCollapseComponent.removePanel(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyCollapseItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: ThyCollapseItem, isStandalone: true, selector: "thy-collapse-panel, thy-collapse-item", inputs: { thyTitle: { classPropertyName: "thyTitle", publicName: "thyTitle", isSignal: true, isRequired: false, transformFunction: null }, thyActive: { classPropertyName: "thyActive", publicName: "thyActive", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null }, thyHeaderTemplate: { classPropertyName: "thyHeaderTemplate", publicName: "thyHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, thyArrowIcon: { classPropertyName: "thyArrowIcon", publicName: "thyArrowIcon", isSignal: true, isRequired: false, transformFunction: null }, thyExtra: { classPropertyName: "thyExtra", publicName: "thyExtra", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyActive: "thyActiveChange", thyArrowIcon: "thyArrowIconChange", thyActiveChange: "thyActiveChange" }, host: { properties: { "class.thy-collapse-item": "true", "class.thy-collapse-no-arrow": "!showArrow()", "class.thy-collapse-item-active": "thyActive()", "class.thy-collapse-item-disabled": "thyDisabled()" } }, exportAs: ["ThyCollapseComponent"], ngImport: i0, template: "<div class=\"thy-collapse-header\" (click)=\"activeChange($event)\">\n  @if (showArrow()) {\n    @if (arrowIconTemplate()) {\n      <ng-template [ngTemplateOutlet]=\"arrowIconTemplate()\"></ng-template>\n    } @else {\n      <thy-icon [thyIconName]=\"arrowIcon() || 'angle-right'\" class=\"thy-collapse-icon\" [thyIconRotate]=\"thyActive() ? -90 : 0\"></thy-icon>\n    }\n  }\n\n  @if (thyHeaderTemplate()) {\n    <ng-template [ngTemplateOutlet]=\"thyHeaderTemplate()\"></ng-template>\n  } @else {\n    <ng-container>\n      <span class=\"d-flex thy-collapse-title\">{{ thyTitle() }}</span></ng-container\n    >\n  }\n\n  @if (thyExtra()) {\n    <div class=\"thy-collapse-extra\">\n      <ng-template [ngTemplateOutlet]=\"thyExtra()\"></ng-template>\n    </div>\n  }\n</div>\n<div class=\"thy-collapse-content\" [@collapseMotion]=\"thyActive() ? 'expanded' : 'hidden'\">\n  <div class=\"thy-collapse-content-box\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", dependencies: [{ 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"] }], animations: [collapseMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyCollapseItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ThyCollapseItem, isStandalone: true, selector: "thy-collapse-panel, thy-collapse-item", inputs: { thyTitle: { classPropertyName: "thyTitle", publicName: "thyTitle", isSignal: true, isRequired: false, transformFunction: null }, thyActive: { classPropertyName: "thyActive", publicName: "thyActive", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null }, thyHeaderTemplate: { classPropertyName: "thyHeaderTemplate", publicName: "thyHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, thyArrowIcon: { classPropertyName: "thyArrowIcon", publicName: "thyArrowIcon", isSignal: true, isRequired: false, transformFunction: null }, thyExtra: { classPropertyName: "thyExtra", publicName: "thyExtra", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyActive: "thyActiveChange", thyArrowIcon: "thyArrowIconChange", thyActiveChange: "thyActiveChange" }, host: { properties: { "class.thy-collapse-item": "true", "class.thy-collapse-no-arrow": "!showArrow()", "class.thy-collapse-item-active": "thyActive()", "class.thy-collapse-item-disabled": "thyDisabled()" } }, exportAs: ["ThyCollapseComponent"], ngImport: i0, template: "<div class=\"thy-collapse-header\" (click)=\"activeChange($event)\">\n  @if (showArrow()) {\n    @if (arrowIconTemplate()) {\n      <ng-template [ngTemplateOutlet]=\"arrowIconTemplate()\"></ng-template>\n    } @else {\n      <thy-icon [thyIconName]=\"arrowIcon() || 'angle-right'\" class=\"thy-collapse-icon\" [thyIconRotate]=\"thyActive() ? -90 : 0\"></thy-icon>\n    }\n  }\n\n  @if (thyHeaderTemplate()) {\n    <ng-template [ngTemplateOutlet]=\"thyHeaderTemplate()\"></ng-template>\n  } @else {\n    <ng-container>\n      <span class=\"d-flex thy-collapse-title\">{{ thyTitle() }}</span></ng-container\n    >\n  }\n\n  @if (thyExtra()) {\n    <div class=\"thy-collapse-extra\">\n      <ng-template [ngTemplateOutlet]=\"thyExtra()\"></ng-template>\n    </div>\n  }\n</div>\n<div class=\"thy-collapse-content\" [@collapseMotion]=\"thyActive() ? 'expanded' : 'hidden'\">\n  <div class=\"thy-collapse-content-box\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", dependencies: [{ 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"] }], animations: [collapseMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyCollapseItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyCollapseItem, decorators: [{
             type: Component,
             args: [{ selector: 'thy-collapse-panel, thy-collapse-item', exportAs: 'ThyCollapseComponent', animations: [collapseMotion], host: {
                         '[class.thy-collapse-item]': 'true',
@@ -133,8 +133,8 @@ class ThyCollapse {
         collapseItem.thyActive.set(!collapseItem.thyActive());
         collapseItem.thyActiveChange.emit({ active: collapseItem.thyActive(), event });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyCollapse, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.14", type: ThyCollapse, isStandalone: true, selector: "thy-collapse", inputs: { thyTheme: { classPropertyName: "thyTheme", publicName: "thyTheme", isSignal: true, isRequired: false, transformFunction: null }, thyAccordion: { classPropertyName: "thyAccordion", publicName: "thyAccordion", isSignal: true, isRequired: false, transformFunction: null }, thyArrowIconPosition: { classPropertyName: "thyArrowIconPosition", publicName: "thyArrowIconPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.thy-collapse-divided": "thyTheme() === 'divided'", "class.thy-collapse-bordered": "thyTheme() === 'bordered'", "class.thy-collapse-ghost": "thyTheme() === 'ghost'", "class.thy-collapse-icon-position-right": "thyArrowIconPosition() === 'right'", "class.thy-collapse-icon-position-left": "thyArrowIconPosition() === 'left'" }, classAttribute: "thy-collapse" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyCollapse, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: ThyCollapse, isStandalone: true, selector: "thy-collapse", inputs: { thyTheme: { classPropertyName: "thyTheme", publicName: "thyTheme", isSignal: true, isRequired: false, transformFunction: null }, thyAccordion: { classPropertyName: "thyAccordion", publicName: "thyAccordion", isSignal: true, isRequired: false, transformFunction: null }, thyArrowIconPosition: { classPropertyName: "thyArrowIconPosition", publicName: "thyArrowIconPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.thy-collapse-divided": "thyTheme() === 'divided'", "class.thy-collapse-bordered": "thyTheme() === 'bordered'", "class.thy-collapse-ghost": "thyTheme() === 'ghost'", "class.thy-collapse-icon-position-right": "thyArrowIconPosition() === 'right'", "class.thy-collapse-icon-position-left": "thyArrowIconPosition() === 'left'" }, classAttribute: "thy-collapse" }, providers: [
             {
                 provide: THY_COLLAPSE_COMPONENT,
                 useExisting: ThyCollapse
@@ -145,7 +145,7 @@ class ThyCollapse {
         </ng-container>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyCollapse, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyCollapse, decorators: [{
             type: Component,
             args: [{
                     selector: 'thy-collapse',
@@ -173,11 +173,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
         }], propDecorators: { thyTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyTheme", required: false }] }], thyAccordion: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyAccordion", required: false }] }], thyArrowIconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyArrowIconPosition", required: false }] }] } });
 
 class ThyCollapseModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyCollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: ThyCollapseModule, imports: [CommonModule, FormsModule, OverlayModule, ThyInputModule, ThyIconModule, ThyCollapse, ThyCollapseItem], exports: [ThyCollapse, ThyCollapseItem] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyCollapseModule, imports: [CommonModule, FormsModule, OverlayModule, ThyInputModule, ThyIconModule, ThyCollapseItem] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyCollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: ThyCollapseModule, imports: [CommonModule, FormsModule, OverlayModule, ThyInputModule, ThyIconModule, ThyCollapse, ThyCollapseItem], exports: [ThyCollapse, ThyCollapseItem] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyCollapseModule, imports: [CommonModule, FormsModule, OverlayModule, ThyInputModule, ThyIconModule, ThyCollapseItem] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyCollapseModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyCollapseModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, FormsModule, OverlayModule, ThyInputModule, ThyIconModule, ThyCollapse, ThyCollapseItem],

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, output, HostListener, Directive, Renderer2, input, viewChild, effect, HostBinding, ChangeDetectionStrategy, Component, ViewChild, computed, signal, model, ViewContainerRef, NgZone, numberAttribute, forwardRef, Input, NgModule } from '@angular/core';
+import { inject, ElementRef, output, HostListener, Directive, Renderer2, input, viewChild, effect, HostBinding, ChangeDetectionStrategy, Component, 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';
@@ -248,7 +248,7 @@ class ThyColor {
                     this.alpha = this.roundNumber(parseInt(alpha || 'FF', 16) / 255);
                     hexArray = hex.match(/.{2}/g);
                 }
-                if (hexArray.length === 3) {
+                if (hexArray?.length === 3) {
                     rgba = new ThyRgba(parseInt(hexArray[0], 16), parseInt(hexArray[1], 16), parseInt(hexArray[2], 16), this.alpha);
                 }
             }
@@ -260,11 +260,13 @@ class ThyColor {
                 switch (colorTypeName) {
                     case 'rgba':
                         this.alpha = parseFloat(params.pop());
+                    // eslint-disable-next-line no-fallthrough
                     case 'rgb':
                         rgba = new ThyRgba(parseInt(params[0], 10), parseInt(params[1], 10), parseInt(params[2], 10), this.alpha);
                         break;
                     case 'hsla':
                         this.alpha = parseFloat(params.pop());
+                    // eslint-disable-next-line no-fallthrough
                     case 'hsl':
                         rgba = this.hslaToRgba(parseInt(params[0], 10), parseInt(params[1], 10), parseInt(params[2], 10), this.alpha);
                         break;
@@ -316,8 +318,8 @@ class ThyColor {
         const Cmin = Math.min(red, green, blue);
         const delta = Cmax - Cmin;
         let hue = 0;
-        let saturation = Cmax === 0 ? 0 : delta / Cmax;
-        let brightness = Cmax;
+        const saturation = Cmax === 0 ? 0 : delta / Cmax;
+        const brightness = Cmax;
         if (Cmax !== Cmin) {
             switch (Cmax) {
                 case red:
@@ -391,7 +393,7 @@ class ThyColor {
         this.getFinalValue();
     }
     toHexString(alpha = false) {
-        let hex = '#' + ((1 << 24) | (this.rgba.getRed() << 16) | (this.rgba.getGreen() << 8) | this.rgba.getBlue()).toString(16).substr(1);
+        let hex = `#${((1 << 24) | (this.rgba.getRed() << 16) | (this.rgba.getGreen() << 8) | this.rgba.getBlue()).toString(16).substr(1)}`;
         if (alpha && this.rgba.alpha !== 1) {
             hex += ((1 << 8) | Math.round(this.rgba.alpha * 255)).toString(16).substr(1);
         }
@@ -448,13 +450,14 @@ class ThyColor {
         return new ThyRgba(Math.round(red), Math.round(green), Math.round(blue), alpha);
     }
     getFinalValue() {
-        let { hue, saturation, value, alpha, format } = this;
+        const { hue, saturation, value, alpha, format } = this;
         if (this.enableAlpha) {
             switch (format) {
-                case 'hsl':
+                case 'hsl': {
                     const hsl = hsv2hsl(hue, saturation / 100, value / 100);
                     this.displayValue = `hsla(${hue}, ${Math.round(hsl[1] * 100)}%, ${Math.round(hsl[2] * 100)}%, ${alpha})`;
                     break;
+                }
                 case 'hsv':
                     this.displayValue = `hsva(${hue}, ${Math.round(saturation)}%, ${Math.round(value)}%, ${alpha})`;
                     break;
@@ -467,10 +470,11 @@ class ThyColor {
         }
         else {
             switch (format) {
-                case 'hsl':
+                case 'hsl': {
                     const hsl = hsv2hsl(hue, saturation / 100, value / 100);
                     this.displayValue = `hsl(${hue}, ${Math.round(hsl[1] * 100)}%, ${Math.round(hsl[2] * 100)}%)`;
                     break;
+                }
                 case 'hsv':
                     this.displayValue = `hsv(${hue}, ${Math.round(saturation)}%, ${Math.round(value)}%)`;
                     break;
@@ -531,10 +535,10 @@ class ThyCoordinatesDirective {
     ngOnDestroy() {
         this.sub?.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyCoordinatesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: ThyCoordinatesDirective, isStandalone: true, selector: "[thyColorCoordinates]", outputs: { coordinatesChange: "coordinatesChange" }, host: { listeners: { "mousedown": "mousedown($event,$event.pageX,$event.pageY)", "window:mousemove": "mousemove($event,$event.pageX,$event.pageY)", "window:mouseup": "mouseup()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyCoordinatesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: ThyCoordinatesDirective, isStandalone: true, selector: "[thyColorCoordinates]", outputs: { coordinatesChange: "coordinatesChange" }, host: { listeners: { "mousedown": "mousedown($event,$event.pageX,$event.pageY)", "window:mousemove": "mousemove($event,$event.pageX,$event.pageY)", "window:mouseup": "mouseup()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyCoordinatesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyCoordinatesDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyColorCoordinates]'
@@ -557,9 +561,9 @@ class ThyAlpha {
     constructor() {
         this.renderer = inject(Renderer2);
         this.className = true;
-        this.color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
-        this.pointer = viewChild('pointer', ...(ngDevMode ? [{ debugName: "pointer" }] : []));
-        this.gradient = viewChild('gradient', ...(ngDevMode ? [{ debugName: "gradient" }] : []));
+        this.color = input.required(...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.pointer = viewChild.required('pointer');
+        this.gradient = viewChild.required('gradient');
         this.colorChange = output();
         effect(() => {
             this.setBackground();
@@ -590,16 +594,16 @@ class ThyAlpha {
         this.changePointerPosition(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: "20.3.14", ngImport: i0, type: ThyAlpha, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.14", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyAlpha, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: ThyAlpha, isStandalone: true, selector: "thy-alpha", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, 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: "20.3.14", ngImport: i0, type: ThyAlpha, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", 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" }]
         }], ctorParameters: () => [], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class.thy-alpha']
-            }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], pointer: [{ type: i0.ViewChild, args: ['pointer', { isSignal: true }] }], gradient: [{ type: i0.ViewChild, args: ['gradient', { isSignal: true }] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }] } });
+            }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: true }] }], pointer: [{ type: i0.ViewChild, args: ['pointer', { isSignal: true }] }], gradient: [{ type: i0.ViewChild, args: ['gradient', { isSignal: true }] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }] } });
 
 /**
  * @internal
@@ -608,8 +612,9 @@ class ThyHue {
     constructor() {
         this.renderer = inject(Renderer2);
         this.className = true;
-        this.color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
+        this.color = input.required(...(ngDevMode ? [{ debugName: "color" }] : []));
         this.colorChange = output();
+        this.pointer = viewChild.required('pointer');
         effect(() => {
             this.changePointerPosition();
         });
@@ -617,7 +622,7 @@ class ThyHue {
     changePointerPosition(hue) {
         const newHue = hue ?? this.color().hue;
         const x = (newHue / 360) * 100;
-        this.renderer.setStyle(this.pointer.nativeElement, 'left', `${x}%`);
+        this.renderer.setStyle(this.pointer().nativeElement, 'left', `${x}%`);
     }
     handleChange(event) {
         let x;
@@ -633,19 +638,16 @@ class ThyHue {
         this.changePointerPosition(x * 360);
         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: "20.3.14", ngImport: i0, type: ThyHue, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.14", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyHue, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: ThyHue, isStandalone: true, selector: "thy-hue", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { colorChange: "colorChange" }, host: { properties: { "class.thy-hue": "this.className" } }, viewQueries: [{ propertyName: "pointer", first: true, predicate: ["pointer"], descendants: true, isSignal: 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: "20.3.14", ngImport: i0, type: ThyHue, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", 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" }]
         }], ctorParameters: () => [], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class.thy-hue']
-            }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }], pointer: [{
-                type: ViewChild,
-                args: ['pointer', { static: true }]
-            }] } });
+            }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: true }] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }], pointer: [{ type: i0.ViewChild, args: ['pointer', { isSignal: true }] }] } });
 
 /**
  * @internal
@@ -658,10 +660,10 @@ class ThyIndicator {
             return this.color()?.rgba.toString() || '';
         }, ...(ngDevMode ? [{ debugName: "backgroundColor" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.14", 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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", 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: "20.3.14", ngImport: i0, type: ThyIndicator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyIndicator, decorators: [{
             type: Component,
             args: [{ selector: 'thy-indicator', template: "<div [style.backgroundColor]=\"backgroundColor()\" class=\"icon-container\"></div>\n" }]
         }], propDecorators: { className: [{
@@ -675,7 +677,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
 class ThyColorInputs {
     constructor() {
         this.className = true;
-        this.color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
+        this.color = input.required(...(ngDevMode ? [{ debugName: "color" }] : []));
         this.colorChange = output();
         this.hex = signal('', ...(ngDevMode ? [{ debugName: "hex" }] : []));
         this.alpha = signal(100, ...(ngDevMode ? [{ debugName: "alpha" }] : []));
@@ -707,16 +709,16 @@ class ThyColorInputs {
         }
         this.colorChange.emit(newColor);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyColorInputs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.14", 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", "thyShowStepControls", "thyStepDelay", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus", "thyStepChange"] }, { kind: "component", type: ThyInputGroup, selector: "thy-input-group", inputs: ["thyAppendText", "thyAppendTextTranslateKey", "thyPrependText", "thyPrependTextTranslateKey", "thySize"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyColorInputs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: ThyColorInputs, isStandalone: true, selector: "thy-color-inputs", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, 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", "thyShowStepControls", "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: "20.3.14", ngImport: i0, type: ThyColorInputs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", 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']
-            }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }] } });
+            }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: true }] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }] } });
 
 /**
  * @internal
@@ -725,10 +727,10 @@ class ThySaturation {
     constructor() {
         this.renderer = inject(Renderer2);
         this.className = true;
-        this.panel = viewChild('panel', ...(ngDevMode ? [{ debugName: "panel" }] : []));
-        this.pointer = viewChild('pointer', ...(ngDevMode ? [{ debugName: "pointer" }] : []));
+        this.panel = viewChild.required('panel');
+        this.pointer = viewChild.required('pointer');
         this.colorChange = output();
-        this.color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
+        this.color = input.required(...(ngDevMode ? [{ debugName: "color" }] : []));
         effect(() => {
             this.setBackground();
             this.changePointerPosition();
@@ -765,16 +767,16 @@ class ThySaturation {
         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 }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThySaturation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.14", 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThySaturation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: ThySaturation, isStandalone: true, selector: "thy-saturation", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, 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: "20.3.14", ngImport: i0, type: ThySaturation, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", 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" }]
         }], ctorParameters: () => [], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class.thy-saturation']
-            }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], pointer: [{ type: i0.ViewChild, args: ['pointer', { isSignal: true }] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+            }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], pointer: [{ type: i0.ViewChild, args: ['pointer', { isSignal: true }] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: true }] }] } });
 
 /**
  * @internal
@@ -794,10 +796,10 @@ class ThyColorPickerCustomPanel {
         this.color.set(this.colorInstance().displayValue);
         this.pickerColorChange()(this.color());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyColorPickerCustomPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.14", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyColorPickerCustomPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", 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: "20.3.14", ngImport: i0, type: ThyColorPickerCustomPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", 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" }]
         }], ctorParameters: () => [], propDecorators: { className: [{
@@ -835,7 +837,10 @@ class ThyColorPickerPanel {
     }
     selectColor(color) {
         this.color.set(color);
-        this.colorChange()(this.color());
+        const colorChangeFn = this.colorChange();
+        if (colorChangeFn) {
+            colorChangeFn(this.color());
+        }
         this.thyPopoverRef.close();
     }
     showMoreColor(event) {
@@ -853,7 +858,9 @@ class ThyColorPickerPanel {
                     color: this.color(),
                     pickerColorChange: (value) => {
                         this.newColor = value;
-                        this.colorChange()(value);
+                        if (this.colorChange()) {
+                            this.colorChange()(value);
+                        }
                     }
                 }
             });
@@ -876,10 +883,10 @@ class ThyColorPickerPanel {
         const hsp = 0.299 * rgba.red + 0.587 * rgba.green + 0.114 * rgba.blue;
         return hsp > 192 ? 'black' : 'white';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyColorPickerPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyColorPickerPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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: "20.3.14", ngImport: i0, type: ThyColorPickerPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyColorPickerPanel, decorators: [{
             type: Component,
             args: [{ selector: 'thy-color-picker-panel', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.pt-4]': '!transparentColorSelectable()',
@@ -1044,6 +1051,7 @@ class ThyColorPickerDirective extends _BaseMixin {
         this.thyHideDelay = input(100, ...(ngDevMode ? [{ debugName: "thyHideDelay", transform: numberAttribute }] : [{ transform: numberAttribute }]));
         this.onChangeFn = () => { };
         this.onTouchFn = () => { };
+        this.popoverRef = null;
         this.closePanel = true;
         this.destroy$ = new Subject();
         effect(() => {
@@ -1181,8 +1189,8 @@ class ThyColorPickerDirective extends _BaseMixin {
         this.dispose();
         this.popoverRef = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyColorPickerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.14", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyColorPickerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", 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,
@@ -1190,7 +1198,7 @@ class ThyColorPickerDirective extends _BaseMixin {
             }
         ], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyColorPickerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyColorPickerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyColorPicker]',
@@ -1213,8 +1221,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             }] } });
 
 class ThyColorPickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: ThyColorPickerModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: ThyColorPickerModule, imports: [CommonModule,
             ThyDialogModule,
             ThyInputModule,
             ThyIconModule,
@@ -1230,7 +1238,7 @@ class ThyColorPickerModule {
             ThyCoordinatesDirective,
             ThyColorPickerPanel,
             ThyColorInputs], exports: [ThyColorPickerDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyColorPickerModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyColorPickerModule, imports: [CommonModule,
             ThyDialogModule,
             ThyInputModule,
             ThyIconModule,
@@ -1241,7 +1249,7 @@ class ThyColorPickerModule {
             ThyColorPickerPanel,
             ThyColorInputs] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyColorPickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyColorPickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [