ngx-color 9.0.0 → 10.1.0

package/fesm2022/ngx-color-chrome.mjs

@@ -1,9 +1,8 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, forwardRef, NgModule } from '@angular/core';
-import * as i2 from 'ngx-color';
+import * as i1 from 'ngx-color';
 import { isValidHex, ColorWrap, AlphaModule, CheckboardModule, EditableInputModule, HueModule, SaturationModule } from 'ngx-color';
 import { TinyColor } from '@ctrl/tinycolor';
-import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
@@ -119,51 +118,58 @@ class ChromeFieldsComponent {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ChromeFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: ChromeFieldsComponent, selector: "color-chrome-fields", inputs: { disableAlpha: "disableAlpha", hsl: "hsl", rgb: "rgb", hex: "hex" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ChromeFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.3", type: ChromeFieldsComponent, isStandalone: false, selector: "color-chrome-fields", inputs: { disableAlpha: "disableAlpha", hsl: "hsl", rgb: "rgb", hex: "hex" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
     <div class="chrome-wrap">
       <div class="chrome-fields">
-        <ng-template [ngIf]="view === 'hex'">
+        @if (view === 'hex') {
           <div class="chrome-field">
             <color-editable-input
               [style]="{ input: input, label: label }"
-              label="hex" [value]="hex"
+              label="hex"
+              [value]="hex"
               (onChange)="handleChange($event)"
             ></color-editable-input>
           </div>
-        </ng-template>
-        <ng-template [ngIf]="view === 'rgb'">
+        }
+        @if (view === 'rgb') {
           <div class="chrome-field">
             <color-editable-input
               [style]="{ input: input, label: label }"
-              label="r" [value]="rgb.r"
+              label="r"
+              [value]="rgb.r"
               (onChange)="handleChange($event)"
             ></color-editable-input>
           </div>
           <div class="chrome-field">
             <color-editable-input
               [style]="{ input: input, label: label }"
-              label="g" [value]="rgb.g"
+              label="g"
+              [value]="rgb.g"
               (onChange)="handleChange($event)"
             ></color-editable-input>
           </div>
           <div class="chrome-field">
             <color-editable-input
               [style]="{ input: input, label: label }"
-              label="b" [value]="rgb.b"
+              label="b"
+              [value]="rgb.b"
               (onChange)="handleChange($event)"
             ></color-editable-input>
           </div>
           <div class="chrome-field">
-            <color-editable-input *ngIf="!disableAlpha"
-              [style]="{ input: input, label: label }"
-              label="a" [value]="rgb.a"
-              [arrowOffset]="0.01"
-              (onChange)="handleChange($event)"
-            ></color-editable-input>
+            @if (!disableAlpha) {
+              <color-editable-input
+                [style]="{ input: input, label: label }"
+                label="a"
+                [value]="rgb.a"
+                [arrowOffset]="0.01"
+                (onChange)="handleChange($event)"
+              ></color-editable-input>
+            }
           </div>
-        </ng-template>
-        <ng-template [ngIf]="view === 'hsl'">
+        }
+        @if (view === 'hsl') {
           <div class="chrome-field">
             <color-editable-input
               [style]="{ input: input, label: label }"
@@ -175,89 +181,105 @@ class ChromeFieldsComponent {
           <div class="chrome-field">
             <color-editable-input
               [style]="{ input: input, label: label }"
-              label="s" [value]="round(hsl.s * 100) + '%'"
+              label="s"
+              [value]="round(hsl.s * 100) + '%'"
               (onChange)="handleChange($event)"
             ></color-editable-input>
           </div>
           <div class="chrome-field">
             <color-editable-input
               [style]="{ input: input, label: label }"
-              label="l" [value]="round(hsl.l * 100) + '%'"
+              label="l"
+              [value]="round(hsl.l * 100) + '%'"
               (onChange)="handleChange($event)"
             ></color-editable-input>
           </div>
           <div class="chrome-field">
-            <color-editable-input *ngIf="!disableAlpha"
-              [style]="{ input: input, label: label }"
-              label="a" [value]="hsl.a"
-              [arrowOffset]="0.01"
-              (onChange)="handleChange($event)"
-            ></color-editable-input>
+            @if (!disableAlpha) {
+              <color-editable-input
+                [style]="{ input: input, label: label }"
+                label="a"
+                [value]="hsl.a"
+                [arrowOffset]="0.01"
+                (onChange)="handleChange($event)"
+              ></color-editable-input>
+            }
           </div>
-        </ng-template>
+        }
       </div>
 
       <div class="chrome-toggle">
         <div class="chrome-icon" (click)="toggleViews()" #icon>
           <svg class="chrome-toggle-svg" viewBox="0 0 24 24">
-            <path #iconUp fill="#333"
+            <path
+              #iconUp
+              fill="#333"
               d="M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z"
             />
-            <path #iconDown fill="#333"
+            <path
+              #iconDown
+              fill="#333"
               d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15Z"
             />
           </svg>
         </div>
       </div>
     </div>
-  `, isInline: true, styles: [".chrome-wrap{padding-top:16px;display:flex}.chrome-fields{flex:1;display:flex;margin-left:-6px}.chrome-field{padding-left:6px;width:100%}.chrome-toggle{width:32px;text-align:right;position:relative}.chrome-icon{margin-right:-4px;margin-top:12px;cursor:pointer;position:relative}.chrome-toggle-svg{width:24px;height:24px;border:1px transparent solid;border-radius:5px}.chrome-toggle-svg:hover{background:#eee}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.EditableInputComponent, selector: "color-editable-input", inputs: ["style", "label", "value", "arrowOffset", "dragLabel", "dragMax", "placeholder"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".chrome-wrap{padding-top:16px;display:flex}.chrome-fields{flex:1;display:flex;margin-left:-6px}.chrome-field{padding-left:6px;width:100%}.chrome-toggle{width:32px;text-align:right;position:relative}.chrome-icon{margin-right:-4px;margin-top:12px;cursor:pointer;position:relative}.chrome-toggle-svg{width:24px;height:24px;border:1px transparent solid;border-radius:5px}.chrome-toggle-svg:hover{background:#eee}\n"], dependencies: [{ kind: "component", type: i1.EditableInputComponent, selector: "color-editable-input", inputs: ["style", "label", "value", "arrowOffset", "dragLabel", "dragMax", "placeholder"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ChromeFieldsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ChromeFieldsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'color-chrome-fields', template: `
     <div class="chrome-wrap">
       <div class="chrome-fields">
-        <ng-template [ngIf]="view === 'hex'">
+        @if (view === 'hex') {
           <div class="chrome-field">
             <color-editable-input
               [style]="{ input: input, label: label }"
-              label="hex" [value]="hex"
+              label="hex"
+              [value]="hex"
               (onChange)="handleChange($event)"
             ></color-editable-input>
           </div>
-        </ng-template>
-        <ng-template [ngIf]="view === 'rgb'">
+        }
+        @if (view === 'rgb') {
           <div class="chrome-field">
             <color-editable-input
               [style]="{ input: input, label: label }"
-              label="r" [value]="rgb.r"
+              label="r"
+              [value]="rgb.r"
               (onChange)="handleChange($event)"
             ></color-editable-input>
           </div>
           <div class="chrome-field">
             <color-editable-input
               [style]="{ input: input, label: label }"
-              label="g" [value]="rgb.g"
+              label="g"
+              [value]="rgb.g"
               (onChange)="handleChange($event)"
             ></color-editable-input>
           </div>
           <div class="chrome-field">
             <color-editable-input
               [style]="{ input: input, label: label }"
-              label="b" [value]="rgb.b"
+              label="b"
+              [value]="rgb.b"
               (onChange)="handleChange($event)"
             ></color-editable-input>
           </div>
           <div class="chrome-field">
-            <color-editable-input *ngIf="!disableAlpha"
-              [style]="{ input: input, label: label }"
-              label="a" [value]="rgb.a"
-              [arrowOffset]="0.01"
-              (onChange)="handleChange($event)"
-            ></color-editable-input>
+            @if (!disableAlpha) {
+              <color-editable-input
+                [style]="{ input: input, label: label }"
+                label="a"
+                [value]="rgb.a"
+                [arrowOffset]="0.01"
+                (onChange)="handleChange($event)"
+              ></color-editable-input>
+            }
           </div>
-        </ng-template>
-        <ng-template [ngIf]="view === 'hsl'">
+        }
+        @if (view === 'hsl') {
           <div class="chrome-field">
             <color-editable-input
               [style]="{ input: input, label: label }"
@@ -269,42 +291,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
           <div class="chrome-field">
             <color-editable-input
               [style]="{ input: input, label: label }"
-              label="s" [value]="round(hsl.s * 100) + '%'"
+              label="s"
+              [value]="round(hsl.s * 100) + '%'"
               (onChange)="handleChange($event)"
             ></color-editable-input>
           </div>
           <div class="chrome-field">
             <color-editable-input
               [style]="{ input: input, label: label }"
-              label="l" [value]="round(hsl.l * 100) + '%'"
+              label="l"
+              [value]="round(hsl.l * 100) + '%'"
               (onChange)="handleChange($event)"
             ></color-editable-input>
           </div>
           <div class="chrome-field">
-            <color-editable-input *ngIf="!disableAlpha"
-              [style]="{ input: input, label: label }"
-              label="a" [value]="hsl.a"
-              [arrowOffset]="0.01"
-              (onChange)="handleChange($event)"
-            ></color-editable-input>
+            @if (!disableAlpha) {
+              <color-editable-input
+                [style]="{ input: input, label: label }"
+                label="a"
+                [value]="hsl.a"
+                [arrowOffset]="0.01"
+                (onChange)="handleChange($event)"
+              ></color-editable-input>
+            }
           </div>
-        </ng-template>
+        }
       </div>
 
       <div class="chrome-toggle">
         <div class="chrome-icon" (click)="toggleViews()" #icon>
           <svg class="chrome-toggle-svg" viewBox="0 0 24 24">
-            <path #iconUp fill="#333"
+            <path
+              #iconUp
+              fill="#333"
               d="M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z"
             />
-            <path #iconDown fill="#333"
+            <path
+              #iconDown
+              fill="#333"
               d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15Z"
             />
           </svg>
         </div>
       </div>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".chrome-wrap{padding-top:16px;display:flex}.chrome-fields{flex:1;display:flex;margin-left:-6px}.chrome-field{padding-left:6px;width:100%}.chrome-toggle{width:32px;text-align:right;position:relative}.chrome-icon{margin-right:-4px;margin-top:12px;cursor:pointer;position:relative}.chrome-toggle-svg{width:24px;height:24px;border:1px transparent solid;border-radius:5px}.chrome-toggle-svg:hover{background:#eee}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, standalone: false, styles: [".chrome-wrap{padding-top:16px;display:flex}.chrome-fields{flex:1;display:flex;margin-left:-6px}.chrome-field{padding-left:6px;width:100%}.chrome-toggle{width:32px;text-align:right;position:relative}.chrome-icon{margin-right:-4px;margin-top:12px;cursor:pointer;position:relative}.chrome-toggle-svg{width:24px;height:24px;border:1px transparent solid;border-radius:5px}.chrome-toggle-svg:hover{background:#eee}\n"] }]
         }], propDecorators: { disableAlpha: [{
                 type: Input
             }], hsl: [{
@@ -346,8 +377,8 @@ class ChromeComponent extends ColorWrap {
     handleValueChange({ data, $event }) {
         this.handleChange(data, $event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ChromeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: ChromeComponent, selector: "color-chrome", inputs: { disableAlpha: "disableAlpha" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ChromeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.3", type: ChromeComponent, isStandalone: false, selector: "color-chrome", inputs: { disableAlpha: "disableAlpha" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ChromeComponent),
@@ -358,97 +389,107 @@ class ChromeComponent extends ColorWrap {
                 useExisting: forwardRef(() => ChromeComponent),
             },
         ], usesInheritance: true, ngImport: i0, template: `
-  <div class="chrome-picker {{ className }}">
-    <div class="saturation">
-      <color-saturation
-        [hsl]="hsl"
-        [hsv]="hsv"
-        [circle]="circle"
-        (onChange)="handleValueChange($event)"
-      ></color-saturation>
-    </div>
-    <div class="chrome-body">
-      <div class="chrome-controls">
-        <div class="chrome-color">
-          <div class="chrome-swatch">
-            <div class="chrome-active"
-              [style.background]="activeBackground"
-            ></div>
-            <color-checkboard></color-checkboard>
-          </div>
-        </div>
-        <div class="chrome-toggles">
-          <div class="chrome-hue">
-            <color-hue
-              [radius]="2"
-              [hsl]="hsl"
-              [pointer]="pointer"
-              (onChange)="handleValueChange($event)"
-            ></color-hue>
+    <div class="chrome-picker {{ className }}">
+      <div class="saturation">
+        <color-saturation
+          [hsl]="hsl"
+          [hsv]="hsv"
+          [circle]="circle"
+          (onChange)="handleValueChange($event)"
+        ></color-saturation>
+      </div>
+      <div class="chrome-body">
+        <div class="chrome-controls">
+          <div class="chrome-color">
+            <div class="chrome-swatch">
+              <div class="chrome-active" [style.background]="activeBackground"></div>
+              <color-checkboard></color-checkboard>
+            </div>
           </div>
-          <div class="chrome-alpha" *ngIf="!disableAlpha">
-            <color-alpha
-              [radius]="2" [rgb]="rgb" [hsl]="hsl"
-              [pointer]="pointer" (onChange)="handleValueChange($event)"
-            ></color-alpha>
+          <div class="chrome-toggles">
+            <div class="chrome-hue">
+              <color-hue
+                [radius]="2"
+                [hsl]="hsl"
+                [pointer]="pointer"
+                (onChange)="handleValueChange($event)"
+              ></color-hue>
+            </div>
+            @if (!disableAlpha) {
+              <div class="chrome-alpha">
+                <color-alpha
+                  [radius]="2"
+                  [rgb]="rgb"
+                  [hsl]="hsl"
+                  [pointer]="pointer"
+                  (onChange)="handleValueChange($event)"
+                ></color-alpha>
+              </div>
+            }
           </div>
         </div>
+        <color-chrome-fields
+          [rgb]="rgb"
+          [hsl]="hsl"
+          [hex]="hex"
+          [disableAlpha]="disableAlpha"
+          (onChange)="handleValueChange($event)"
+        ></color-chrome-fields>
       </div>
-      <color-chrome-fields
-        [rgb]="rgb" [hsl]="hsl" [hex]="hex"
-        [disableAlpha]="disableAlpha"
-        (onChange)="handleValueChange($event)"
-      ></color-chrome-fields>
     </div>
-  </div>
-  `, isInline: true, styles: [".chrome-picker{background:#fff;border-radius:2px;box-shadow:0 0 2px #0000004d,0 4px 8px #0000004d;box-sizing:initial;width:225px;font-family:Menlo}.chrome-controls{display:flex}.chrome-color{width:42px}.chrome-body{padding:14px 14px 12px}.chrome-active{position:absolute;inset:0;border-radius:20px;box-shadow:inset 0 0 0 1px #0000001a;z-index:2}.chrome-swatch{width:28px;height:28px;border-radius:15px;position:relative;overflow:hidden}.saturation{width:100%;padding-bottom:55%;position:relative;border-radius:2px 2px 0 0;overflow:hidden}.chrome-toggles{flex:1}.chrome-hue{height:10px;position:relative;margin-bottom:8px}.chrome-alpha{height:10px;position:relative}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return i2.AlphaComponent; }), selector: "color-alpha", inputs: ["hsl", "rgb", "pointer", "shadow", "radius", "direction"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(function () { return i2.CheckboardComponent; }), selector: "color-checkboard", inputs: ["white", "size", "grey", "boxShadow", "borderRadius"] }, { kind: "component", type: i0.forwardRef(function () { return i2.HueComponent; }), selector: "color-hue", inputs: ["hsl", "pointer", "radius", "shadow", "hidePointer", "direction"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(function () { return i2.SaturationComponent; }), selector: "color-saturation", inputs: ["hsl", "hsv", "radius", "pointer", "circle"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(function () { return ChromeFieldsComponent; }), selector: "color-chrome-fields", inputs: ["disableAlpha", "hsl", "rgb", "hex"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".chrome-picker{background:#fff;border-radius:2px;box-shadow:0 0 2px #0000004d,0 4px 8px #0000004d;box-sizing:initial;width:225px;font-family:Menlo}.chrome-controls{display:flex}.chrome-color{width:42px}.chrome-body{padding:14px 14px 12px}.chrome-active{position:absolute;inset:0;border-radius:20px;box-shadow:inset 0 0 0 1px #0000001a;z-index:2}.chrome-swatch{width:28px;height:28px;border-radius:15px;position:relative;overflow:hidden}.saturation{width:100%;padding-bottom:55%;position:relative;border-radius:2px 2px 0 0;overflow:hidden}.chrome-toggles{flex:1}.chrome-hue{height:10px;position:relative;margin-bottom:8px}.chrome-alpha{height:10px;position:relative}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => i1.AlphaComponent), selector: "color-alpha", inputs: ["hsl", "rgb", "pointer", "shadow", "radius", "direction"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(() => i1.CheckboardComponent), selector: "color-checkboard", inputs: ["white", "size", "grey", "boxShadow", "borderRadius"] }, { kind: "component", type: i0.forwardRef(() => i1.HueComponent), selector: "color-hue", inputs: ["hsl", "pointer", "radius", "shadow", "hidePointer", "direction"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(() => i1.SaturationComponent), selector: "color-saturation", inputs: ["hsl", "hsv", "radius", "pointer", "circle"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(() => ChromeFieldsComponent), selector: "color-chrome-fields", inputs: ["disableAlpha", "hsl", "rgb", "hex"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ChromeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ChromeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'color-chrome', template: `
-  <div class="chrome-picker {{ className }}">
-    <div class="saturation">
-      <color-saturation
-        [hsl]="hsl"
-        [hsv]="hsv"
-        [circle]="circle"
-        (onChange)="handleValueChange($event)"
-      ></color-saturation>
-    </div>
-    <div class="chrome-body">
-      <div class="chrome-controls">
-        <div class="chrome-color">
-          <div class="chrome-swatch">
-            <div class="chrome-active"
-              [style.background]="activeBackground"
-            ></div>
-            <color-checkboard></color-checkboard>
-          </div>
-        </div>
-        <div class="chrome-toggles">
-          <div class="chrome-hue">
-            <color-hue
-              [radius]="2"
-              [hsl]="hsl"
-              [pointer]="pointer"
-              (onChange)="handleValueChange($event)"
-            ></color-hue>
+    <div class="chrome-picker {{ className }}">
+      <div class="saturation">
+        <color-saturation
+          [hsl]="hsl"
+          [hsv]="hsv"
+          [circle]="circle"
+          (onChange)="handleValueChange($event)"
+        ></color-saturation>
+      </div>
+      <div class="chrome-body">
+        <div class="chrome-controls">
+          <div class="chrome-color">
+            <div class="chrome-swatch">
+              <div class="chrome-active" [style.background]="activeBackground"></div>
+              <color-checkboard></color-checkboard>
+            </div>
           </div>
-          <div class="chrome-alpha" *ngIf="!disableAlpha">
-            <color-alpha
-              [radius]="2" [rgb]="rgb" [hsl]="hsl"
-              [pointer]="pointer" (onChange)="handleValueChange($event)"
-            ></color-alpha>
+          <div class="chrome-toggles">
+            <div class="chrome-hue">
+              <color-hue
+                [radius]="2"
+                [hsl]="hsl"
+                [pointer]="pointer"
+                (onChange)="handleValueChange($event)"
+              ></color-hue>
+            </div>
+            @if (!disableAlpha) {
+              <div class="chrome-alpha">
+                <color-alpha
+                  [radius]="2"
+                  [rgb]="rgb"
+                  [hsl]="hsl"
+                  [pointer]="pointer"
+                  (onChange)="handleValueChange($event)"
+                ></color-alpha>
+              </div>
+            }
           </div>
         </div>
+        <color-chrome-fields
+          [rgb]="rgb"
+          [hsl]="hsl"
+          [hex]="hex"
+          [disableAlpha]="disableAlpha"
+          (onChange)="handleValueChange($event)"
+        ></color-chrome-fields>
       </div>
-      <color-chrome-fields
-        [rgb]="rgb" [hsl]="hsl" [hex]="hex"
-        [disableAlpha]="disableAlpha"
-        (onChange)="handleValueChange($event)"
-      ></color-chrome-fields>
     </div>
-  </div>
   `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -459,26 +500,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
                             provide: ColorWrap,
                             useExisting: forwardRef(() => ChromeComponent),
                         },
-                    ], styles: [".chrome-picker{background:#fff;border-radius:2px;box-shadow:0 0 2px #0000004d,0 4px 8px #0000004d;box-sizing:initial;width:225px;font-family:Menlo}.chrome-controls{display:flex}.chrome-color{width:42px}.chrome-body{padding:14px 14px 12px}.chrome-active{position:absolute;inset:0;border-radius:20px;box-shadow:inset 0 0 0 1px #0000001a;z-index:2}.chrome-swatch{width:28px;height:28px;border-radius:15px;position:relative;overflow:hidden}.saturation{width:100%;padding-bottom:55%;position:relative;border-radius:2px 2px 0 0;overflow:hidden}.chrome-toggles{flex:1}.chrome-hue{height:10px;position:relative;margin-bottom:8px}.chrome-alpha{height:10px;position:relative}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { disableAlpha: [{
+                    ], standalone: false, styles: [".chrome-picker{background:#fff;border-radius:2px;box-shadow:0 0 2px #0000004d,0 4px 8px #0000004d;box-sizing:initial;width:225px;font-family:Menlo}.chrome-controls{display:flex}.chrome-color{width:42px}.chrome-body{padding:14px 14px 12px}.chrome-active{position:absolute;inset:0;border-radius:20px;box-shadow:inset 0 0 0 1px #0000001a;z-index:2}.chrome-swatch{width:28px;height:28px;border-radius:15px;position:relative;overflow:hidden}.saturation{width:100%;padding-bottom:55%;position:relative;border-radius:2px 2px 0 0;overflow:hidden}.chrome-toggles{flex:1}.chrome-hue{height:10px;position:relative;margin-bottom:8px}.chrome-alpha{height:10px;position:relative}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { disableAlpha: [{
                 type: Input
             }] } });
 class ColorChromeModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorChromeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: ColorChromeModule, declarations: [ChromeComponent, ChromeFieldsComponent], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorChromeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: ColorChromeModule, declarations: [ChromeComponent, ChromeFieldsComponent], imports: [CommonModule,
             AlphaModule,
             CheckboardModule,
             EditableInputModule,
             HueModule,
             SaturationModule], exports: [ChromeComponent, ChromeFieldsComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorChromeModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorChromeModule, imports: [CommonModule,
             AlphaModule,
             CheckboardModule,
             EditableInputModule,
             HueModule,
             SaturationModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorChromeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorChromeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ChromeComponent, ChromeFieldsComponent],