ngx-color 9.0.0 → 10.1.0

package/fesm2022/ngx-color-photoshop.mjs

@@ -9,24 +9,20 @@ class PhotoshopButtonComponent {
     label = '';
     active = false;
     onClick = new EventEmitter();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: PhotoshopButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: PhotoshopButtonComponent, selector: "color-photoshop-button", inputs: { label: "label", active: "active" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
-    <div class="photoshop-button"  [class.active]="active"
-      (click)="onClick.emit($event)"
-    >
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: PhotoshopButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: PhotoshopButtonComponent, isStandalone: false, selector: "color-photoshop-button", inputs: { label: "label", active: "active" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    <div class="photoshop-button" [class.active]="active" (click)="onClick.emit($event)">
       {{ label }}
     </div>
-  `, isInline: true, styles: [".photoshop-button{background-image:linear-gradient(-180deg,rgb(255,255,255) 0%,rgb(230,230,230) 100%);border:1px solid rgb(135,135,135);border-radius:2px;height:22px;box-shadow:#eaeaea 0 1px;font-size:14px;color:#000;line-height:20px;text-align:center;margin-bottom:10px;cursor:pointer}.photoshop-button.active{box-shadow:0 0 0 1px #878787}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".photoshop-button{background-image:linear-gradient(-180deg,#fff,#e6e6e6);border:1px solid rgb(135,135,135);border-radius:2px;height:22px;box-shadow:#eaeaea 0 1px;font-size:14px;color:#000;line-height:20px;text-align:center;margin-bottom:10px;cursor:pointer}.photoshop-button.active{box-shadow:0 0 0 1px #878787}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: PhotoshopButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: PhotoshopButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'color-photoshop-button', template: `
-    <div class="photoshop-button"  [class.active]="active"
-      (click)="onClick.emit($event)"
-    >
+    <div class="photoshop-button" [class.active]="active" (click)="onClick.emit($event)">
       {{ label }}
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".photoshop-button{background-image:linear-gradient(-180deg,rgb(255,255,255) 0%,rgb(230,230,230) 100%);border:1px solid rgb(135,135,135);border-radius:2px;height:22px;box-shadow:#eaeaea 0 1px;font-size:14px;color:#000;line-height:20px;text-align:center;margin-bottom:10px;cursor:pointer}.photoshop-button.active{box-shadow:0 0 0 1px #878787}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, standalone: false, styles: [".photoshop-button{background-image:linear-gradient(-180deg,#fff,#e6e6e6);border:1px solid rgb(135,135,135);border-radius:2px;height:22px;box-shadow:#eaeaea 0 1px;font-size:14px;color:#000;line-height:20px;text-align:center;margin-bottom:10px;cursor:pointer}.photoshop-button.active{box-shadow:0 0 0 1px #878787}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], active: [{
@@ -124,116 +120,116 @@ class PhotoshopFieldsComponent {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: PhotoshopFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: PhotoshopFieldsComponent, selector: "color-photoshop-fields", inputs: { rgb: "rgb", hsv: "hsv", hex: "hex" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
-  <div class="photoshop-fields">
-    <color-editable-input
-      [value]="round(hsv.h)"
-      label="h"
-      (onChange)="handleValueChange($event)"
-      [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
-    ></color-editable-input>
-    <color-editable-input
-      [value]="round(hsv.s * 100)"
-      label="s"
-      (onChange)="handleValueChange($event)"
-      [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
-    ></color-editable-input>
-    <color-editable-input
-      [value]="round(hsv.v * 100)"
-      label="v"
-      (onChange)="handleValueChange($event)"
-      [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
-    ></color-editable-input>
-    <div class="photoshop-divider"></div>
-    <color-editable-input
-      [value]="rgb.r"
-      label="r"
-      (onChange)="handleValueChange($event)"
-      [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
-    ></color-editable-input>
-    <color-editable-input
-      [value]="rgb.g"
-      label="g"
-      (onChange)="handleValueChange($event)"
-      [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
-    ></color-editable-input>
-    <color-editable-input
-      [value]="rgb.b"
-      label="b"
-      (onChange)="handleValueChange($event)"
-      [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
-    ></color-editable-input>
-    <div class="photoshop-divider"></div>
-    <color-editable-input
-      [value]="hex.replace('#', '')"
-      label="#"
-      (onChange)="handleValueChange($event)"
-      [style]="{input: HEXinput, wrap: HEXwrap, label: HEXlabel}"
-    ></color-editable-input>
-    <div class="photoshop-field-symbols">
-      <div class="photoshop-symbol">°</div>
-      <div class="photoshop-symbol">%</div>
-      <div class="photoshop-symbol">%</div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: PhotoshopFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: PhotoshopFieldsComponent, isStandalone: false, selector: "color-photoshop-fields", inputs: { rgb: "rgb", hsv: "hsv", hex: "hex" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
+    <div class="photoshop-fields">
+      <color-editable-input
+        [value]="round(hsv.h)"
+        label="h"
+        (onChange)="handleValueChange($event)"
+        [style]="{ input: RGBinput, wrap: RGBwrap, label: RGBlabel }"
+      ></color-editable-input>
+      <color-editable-input
+        [value]="round(hsv.s * 100)"
+        label="s"
+        (onChange)="handleValueChange($event)"
+        [style]="{ input: RGBinput, wrap: RGBwrap, label: RGBlabel }"
+      ></color-editable-input>
+      <color-editable-input
+        [value]="round(hsv.v * 100)"
+        label="v"
+        (onChange)="handleValueChange($event)"
+        [style]="{ input: RGBinput, wrap: RGBwrap, label: RGBlabel }"
+      ></color-editable-input>
+      <div class="photoshop-divider"></div>
+      <color-editable-input
+        [value]="rgb.r"
+        label="r"
+        (onChange)="handleValueChange($event)"
+        [style]="{ input: RGBinput, wrap: RGBwrap, label: RGBlabel }"
+      ></color-editable-input>
+      <color-editable-input
+        [value]="rgb.g"
+        label="g"
+        (onChange)="handleValueChange($event)"
+        [style]="{ input: RGBinput, wrap: RGBwrap, label: RGBlabel }"
+      ></color-editable-input>
+      <color-editable-input
+        [value]="rgb.b"
+        label="b"
+        (onChange)="handleValueChange($event)"
+        [style]="{ input: RGBinput, wrap: RGBwrap, label: RGBlabel }"
+      ></color-editable-input>
+      <div class="photoshop-divider"></div>
+      <color-editable-input
+        [value]="hex.replace('#', '')"
+        label="#"
+        (onChange)="handleValueChange($event)"
+        [style]="{ input: HEXinput, wrap: HEXwrap, label: HEXlabel }"
+      ></color-editable-input>
+      <div class="photoshop-field-symbols">
+        <div class="photoshop-symbol">°</div>
+        <div class="photoshop-symbol">%</div>
+        <div class="photoshop-symbol">%</div>
+      </div>
     </div>
-  </div>
   `, isInline: true, styles: [".photoshop-fields{padding-top:5px;padding-bottom:9px;width:85px;position:relative}.photoshop-field-symbols{position:absolute;top:5px;right:-7px;font-size:13px}.photoshop-symbol{height:24px;line-height:24px;padding-bottom:7px}.photoshop-divider{height:5px}\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: PhotoshopFieldsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: PhotoshopFieldsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'color-photoshop-fields', template: `
-  <div class="photoshop-fields">
-    <color-editable-input
-      [value]="round(hsv.h)"
-      label="h"
-      (onChange)="handleValueChange($event)"
-      [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
-    ></color-editable-input>
-    <color-editable-input
-      [value]="round(hsv.s * 100)"
-      label="s"
-      (onChange)="handleValueChange($event)"
-      [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
-    ></color-editable-input>
-    <color-editable-input
-      [value]="round(hsv.v * 100)"
-      label="v"
-      (onChange)="handleValueChange($event)"
-      [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
-    ></color-editable-input>
-    <div class="photoshop-divider"></div>
-    <color-editable-input
-      [value]="rgb.r"
-      label="r"
-      (onChange)="handleValueChange($event)"
-      [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
-    ></color-editable-input>
-    <color-editable-input
-      [value]="rgb.g"
-      label="g"
-      (onChange)="handleValueChange($event)"
-      [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
-    ></color-editable-input>
-    <color-editable-input
-      [value]="rgb.b"
-      label="b"
-      (onChange)="handleValueChange($event)"
-      [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
-    ></color-editable-input>
-    <div class="photoshop-divider"></div>
-    <color-editable-input
-      [value]="hex.replace('#', '')"
-      label="#"
-      (onChange)="handleValueChange($event)"
-      [style]="{input: HEXinput, wrap: HEXwrap, label: HEXlabel}"
-    ></color-editable-input>
-    <div class="photoshop-field-symbols">
-      <div class="photoshop-symbol">°</div>
-      <div class="photoshop-symbol">%</div>
-      <div class="photoshop-symbol">%</div>
+    <div class="photoshop-fields">
+      <color-editable-input
+        [value]="round(hsv.h)"
+        label="h"
+        (onChange)="handleValueChange($event)"
+        [style]="{ input: RGBinput, wrap: RGBwrap, label: RGBlabel }"
+      ></color-editable-input>
+      <color-editable-input
+        [value]="round(hsv.s * 100)"
+        label="s"
+        (onChange)="handleValueChange($event)"
+        [style]="{ input: RGBinput, wrap: RGBwrap, label: RGBlabel }"
+      ></color-editable-input>
+      <color-editable-input
+        [value]="round(hsv.v * 100)"
+        label="v"
+        (onChange)="handleValueChange($event)"
+        [style]="{ input: RGBinput, wrap: RGBwrap, label: RGBlabel }"
+      ></color-editable-input>
+      <div class="photoshop-divider"></div>
+      <color-editable-input
+        [value]="rgb.r"
+        label="r"
+        (onChange)="handleValueChange($event)"
+        [style]="{ input: RGBinput, wrap: RGBwrap, label: RGBlabel }"
+      ></color-editable-input>
+      <color-editable-input
+        [value]="rgb.g"
+        label="g"
+        (onChange)="handleValueChange($event)"
+        [style]="{ input: RGBinput, wrap: RGBwrap, label: RGBlabel }"
+      ></color-editable-input>
+      <color-editable-input
+        [value]="rgb.b"
+        label="b"
+        (onChange)="handleValueChange($event)"
+        [style]="{ input: RGBinput, wrap: RGBwrap, label: RGBlabel }"
+      ></color-editable-input>
+      <div class="photoshop-divider"></div>
+      <color-editable-input
+        [value]="hex.replace('#', '')"
+        label="#"
+        (onChange)="handleValueChange($event)"
+        [style]="{ input: HEXinput, wrap: HEXwrap, label: HEXlabel }"
+      ></color-editable-input>
+      <div class="photoshop-field-symbols">
+        <div class="photoshop-symbol">°</div>
+        <div class="photoshop-symbol">%</div>
+        <div class="photoshop-symbol">%</div>
+      </div>
     </div>
-  </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".photoshop-fields{padding-top:5px;padding-bottom:9px;width:85px;position:relative}.photoshop-field-symbols{position:absolute;top:5px;right:-7px;font-size:13px}.photoshop-symbol{height:24px;line-height:24px;padding-bottom:7px}.photoshop-divider{height:5px}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, standalone: false, styles: [".photoshop-fields{padding-top:5px;padding-bottom:9px;width:85px;position:relative}.photoshop-field-symbols{position:absolute;top:5px;right:-7px;font-size:13px}.photoshop-symbol{height:24px;line-height:24px;padding-bottom:7px}.photoshop-divider{height:5px}\n"] }]
         }], propDecorators: { rgb: [{
                 type: Input
             }], hsv: [{
@@ -251,30 +247,30 @@ class PhotoshopPreviewsComponent {
     ngOnChanges() {
         this.backgroundNew = `rgb(${this.rgb.r},${this.rgb.g}, ${this.rgb.b})`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: PhotoshopPreviewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: PhotoshopPreviewsComponent, selector: "color-photoshop-previews", inputs: { rgb: "rgb", currentColor: "currentColor" }, usesOnChanges: true, ngImport: i0, template: `
-  <div>
-    <div class="photoshop-label">new</div>
-    <div class="photoshop-swatches">
-      <div class="photoshop-new" [style.background]="backgroundNew"></div>
-      <div class="photoshop-current" [style.background]="currentColor"></div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: PhotoshopPreviewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: PhotoshopPreviewsComponent, isStandalone: false, selector: "color-photoshop-previews", inputs: { rgb: "rgb", currentColor: "currentColor" }, usesOnChanges: true, ngImport: i0, template: `
+    <div>
+      <div class="photoshop-label">new</div>
+      <div class="photoshop-swatches">
+        <div class="photoshop-new" [style.background]="backgroundNew"></div>
+        <div class="photoshop-current" [style.background]="currentColor"></div>
+      </div>
+      <div class="photoshop-label">current</div>
     </div>
-    <div class="photoshop-label">current</div>
-  </div>
-  `, isInline: true, styles: [".photoshop-swatches{border:1px solid #B3B3B3;border-bottom:1px solid #F0F0F0;margin-bottom:2px;margin-top:1px}.photoshop-new{height:34px;box-shadow:inset 1px 0 #000,inset -1px 0 #000,inset 0 1px #000}.photoshop-current{height:34px;box-shadow:inset 1px 0 #000,inset -1px 0 #000,inset 0 -1px #000}.photoshop-label{font-size:14px;color:#000;text-align:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".photoshop-swatches{border:1px solid #b3b3b3;border-bottom:1px solid #f0f0f0;margin-bottom:2px;margin-top:1px}.photoshop-new{height:34px;box-shadow:inset 1px 0 #000,inset -1px 0 #000,inset 0 1px #000}.photoshop-current{height:34px;box-shadow:inset 1px 0 #000,inset -1px 0 #000,inset 0 -1px #000}.photoshop-label{font-size:14px;color:#000;text-align:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: PhotoshopPreviewsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: PhotoshopPreviewsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'color-photoshop-previews', template: `
-  <div>
-    <div class="photoshop-label">new</div>
-    <div class="photoshop-swatches">
-      <div class="photoshop-new" [style.background]="backgroundNew"></div>
-      <div class="photoshop-current" [style.background]="currentColor"></div>
+    <div>
+      <div class="photoshop-label">new</div>
+      <div class="photoshop-swatches">
+        <div class="photoshop-new" [style.background]="backgroundNew"></div>
+        <div class="photoshop-current" [style.background]="currentColor"></div>
+      </div>
+      <div class="photoshop-label">current</div>
     </div>
-    <div class="photoshop-label">current</div>
-  </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".photoshop-swatches{border:1px solid #B3B3B3;border-bottom:1px solid #F0F0F0;margin-bottom:2px;margin-top:1px}.photoshop-new{height:34px;box-shadow:inset 1px 0 #000,inset -1px 0 #000,inset 0 1px #000}.photoshop-current{height:34px;box-shadow:inset 1px 0 #000,inset -1px 0 #000,inset 0 -1px #000}.photoshop-label{font-size:14px;color:#000;text-align:center}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, standalone: false, styles: [".photoshop-swatches{border:1px solid #b3b3b3;border-bottom:1px solid #f0f0f0;margin-bottom:2px;margin-top:1px}.photoshop-new{height:34px;box-shadow:inset 1px 0 #000,inset -1px 0 #000,inset 0 1px #000}.photoshop-current{height:34px;box-shadow:inset 1px 0 #000,inset -1px 0 #000,inset 0 -1px #000}.photoshop-label{font-size:14px;color:#000;text-align:center}\n"] }]
         }], propDecorators: { rgb: [{
                 type: Input
             }], currentColor: [{
@@ -299,8 +295,8 @@ class PhotoshopComponent extends ColorWrap {
     handleValueChange({ data, $event }) {
         this.handleChange(data, $event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: PhotoshopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: PhotoshopComponent, selector: "color-photoshop", inputs: { header: "header" }, outputs: { onAccept: "onAccept", onCancel: "onCancel" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: PhotoshopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: PhotoshopComponent, isStandalone: false, selector: "color-photoshop", inputs: { header: "header" }, outputs: { onAccept: "onAccept", onCancel: "onCancel" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => PhotoshopComponent),
@@ -311,89 +307,103 @@ class PhotoshopComponent extends ColorWrap {
                 useExisting: forwardRef(() => PhotoshopComponent),
             },
         ], usesInheritance: true, ngImport: i0, template: `
-  <div class="photoshop-picker {{ className }}">
-    <div class="photoshop-head">{{ header }}</div>
-    <div class="photoshop-body">
-      <div class="photoshop-saturation">
-        <color-saturation
-          [hsl]="hsl" [hsv]="hsv" [circle]="circle"
-          (onChange)="handleValueChange($event)"
-        ></color-saturation>
-      </div>
-      <div class="photoshop-hue">
-        <color-hue direction="vertical"
-          [hsl]="hsl" [hidePointer]="true"
-          (onChange)="handleValueChange($event)"
-        ></color-hue>
-      </div>
-      <div class="photoshop-controls">
-        <div class="photoshop-top">
-          <div class="photoshop-previews">
-            <color-photoshop-previews
-              [rgb]="rgb" [currentColor]="currentColor"
-            ></color-photoshop-previews>
-          </div>
-          <div class="photoshop-actions">
-            <color-photoshop-button label="OK"
-              [active]="true" (onClick)="onAccept.emit($event)"
-            ></color-photoshop-button>
-            <color-photoshop-button label="Cancel"
-              (onClick)="onCancel.emit($event)"
-            >
-            </color-photoshop-button>
-            <color-photoshop-fields
-              [rgb]="rgb" [hex]="hex" [hsv]="hsv"
-              (onChange)="handleValueChange($event)"
-            ></color-photoshop-fields>
+    <div class="photoshop-picker {{ className }}">
+      <div class="photoshop-head">{{ header }}</div>
+      <div class="photoshop-body">
+        <div class="photoshop-saturation">
+          <color-saturation
+            [hsl]="hsl"
+            [hsv]="hsv"
+            [circle]="circle"
+            (onChange)="handleValueChange($event)"
+          ></color-saturation>
+        </div>
+        <div class="photoshop-hue">
+          <color-hue
+            direction="vertical"
+            [hsl]="hsl"
+            [hidePointer]="true"
+            (onChange)="handleValueChange($event)"
+          ></color-hue>
+        </div>
+        <div class="photoshop-controls">
+          <div class="photoshop-top">
+            <div class="photoshop-previews">
+              <color-photoshop-previews
+                [rgb]="rgb"
+                [currentColor]="currentColor"
+              ></color-photoshop-previews>
+            </div>
+            <div class="photoshop-actions">
+              <color-photoshop-button
+                label="OK"
+                [active]="true"
+                (onClick)="onAccept.emit($event)"
+              ></color-photoshop-button>
+              <color-photoshop-button label="Cancel" (onClick)="onCancel.emit($event)">
+              </color-photoshop-button>
+              <color-photoshop-fields
+                [rgb]="rgb"
+                [hex]="hex"
+                [hsv]="hsv"
+                (onChange)="handleValueChange($event)"
+              ></color-photoshop-fields>
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  `, isInline: true, styles: [".photoshop-picker{background:rgb(220,220,220);border-radius:4px;box-shadow:#00000040 0 0 0 1px,#00000026 0 8px 16px;box-sizing:initial;width:513px}.photoshop-head{background-image:linear-gradient(-180deg,rgb(240,240,240) 0%,rgb(212,212,212) 100%);border-bottom:1px solid rgb(177,177,177);box-shadow:#fff3 0 1px inset,#00000005 0 -1px inset;height:23px;line-height:24px;border-radius:4px 4px 0 0;font-size:13px;color:#4d4d4d;text-align:center}.photoshop-body{padding:15px 15px 0;display:flex}.photoshop-saturation{width:256px;height:256px;position:relative;border-width:2px;border-style:solid;border-color:rgb(179,179,179) rgb(179,179,179) rgb(240,240,240);border-image:initial;overflow:hidden}.photoshop-hue{position:relative;height:256px;width:23px;margin-left:10px;border-width:2px;border-style:solid;border-color:rgb(179,179,179) rgb(179,179,179) rgb(240,240,240);border-image:initial}.photoshop-controls{width:180px;margin-left:10px}.photoshop-top{display:flex}.photoshop-previews{width:60px}.photoshop-actions{flex:1 1 0%;margin-left:20px}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(function () { return i1.HueComponent; }), selector: "color-hue", inputs: ["hsl", "pointer", "radius", "shadow", "hidePointer", "direction"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(function () { return i1.SaturationComponent; }), selector: "color-saturation", inputs: ["hsl", "hsv", "radius", "pointer", "circle"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(function () { return PhotoshopPreviewsComponent; }), selector: "color-photoshop-previews", inputs: ["rgb", "currentColor"] }, { kind: "component", type: i0.forwardRef(function () { return PhotoshopButtonComponent; }), selector: "color-photoshop-button", inputs: ["label", "active"], outputs: ["onClick"] }, { kind: "component", type: i0.forwardRef(function () { return PhotoshopFieldsComponent; }), selector: "color-photoshop-fields", inputs: ["rgb", "hsv", "hex"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".photoshop-picker{background:#dcdcdc;border-radius:4px;box-shadow:#00000040 0 0 0 1px,#00000026 0 8px 16px;box-sizing:initial;width:513px}.photoshop-head{background-image:linear-gradient(-180deg,#f0f0f0,#d4d4d4);border-bottom:1px solid rgb(177,177,177);box-shadow:#fff3 0 1px inset,#00000005 0 -1px inset;height:23px;line-height:24px;border-radius:4px 4px 0 0;font-size:13px;color:#4d4d4d;text-align:center}.photoshop-body{padding:15px 15px 0;display:flex}.photoshop-saturation{width:256px;height:256px;position:relative;border-width:2px;border-style:solid;border-color:rgb(179,179,179) rgb(179,179,179) rgb(240,240,240);border-image:initial;overflow:hidden}.photoshop-hue{position:relative;height:256px;width:23px;margin-left:10px;border-width:2px;border-style:solid;border-color:rgb(179,179,179) rgb(179,179,179) rgb(240,240,240);border-image:initial}.photoshop-controls{width:180px;margin-left:10px}.photoshop-top{display:flex}.photoshop-previews{width:60px}.photoshop-actions{-webkit-box-flex:1;flex:1 1 0%;margin-left:20px}\n"], dependencies: [{ 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(() => PhotoshopPreviewsComponent), selector: "color-photoshop-previews", inputs: ["rgb", "currentColor"] }, { kind: "component", type: i0.forwardRef(() => PhotoshopButtonComponent), selector: "color-photoshop-button", inputs: ["label", "active"], outputs: ["onClick"] }, { kind: "component", type: i0.forwardRef(() => PhotoshopFieldsComponent), selector: "color-photoshop-fields", inputs: ["rgb", "hsv", "hex"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: PhotoshopComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: PhotoshopComponent, decorators: [{
             type: Component,
             args: [{ selector: 'color-photoshop', template: `
-  <div class="photoshop-picker {{ className }}">
-    <div class="photoshop-head">{{ header }}</div>
-    <div class="photoshop-body">
-      <div class="photoshop-saturation">
-        <color-saturation
-          [hsl]="hsl" [hsv]="hsv" [circle]="circle"
-          (onChange)="handleValueChange($event)"
-        ></color-saturation>
-      </div>
-      <div class="photoshop-hue">
-        <color-hue direction="vertical"
-          [hsl]="hsl" [hidePointer]="true"
-          (onChange)="handleValueChange($event)"
-        ></color-hue>
-      </div>
-      <div class="photoshop-controls">
-        <div class="photoshop-top">
-          <div class="photoshop-previews">
-            <color-photoshop-previews
-              [rgb]="rgb" [currentColor]="currentColor"
-            ></color-photoshop-previews>
-          </div>
-          <div class="photoshop-actions">
-            <color-photoshop-button label="OK"
-              [active]="true" (onClick)="onAccept.emit($event)"
-            ></color-photoshop-button>
-            <color-photoshop-button label="Cancel"
-              (onClick)="onCancel.emit($event)"
-            >
-            </color-photoshop-button>
-            <color-photoshop-fields
-              [rgb]="rgb" [hex]="hex" [hsv]="hsv"
-              (onChange)="handleValueChange($event)"
-            ></color-photoshop-fields>
+    <div class="photoshop-picker {{ className }}">
+      <div class="photoshop-head">{{ header }}</div>
+      <div class="photoshop-body">
+        <div class="photoshop-saturation">
+          <color-saturation
+            [hsl]="hsl"
+            [hsv]="hsv"
+            [circle]="circle"
+            (onChange)="handleValueChange($event)"
+          ></color-saturation>
+        </div>
+        <div class="photoshop-hue">
+          <color-hue
+            direction="vertical"
+            [hsl]="hsl"
+            [hidePointer]="true"
+            (onChange)="handleValueChange($event)"
+          ></color-hue>
+        </div>
+        <div class="photoshop-controls">
+          <div class="photoshop-top">
+            <div class="photoshop-previews">
+              <color-photoshop-previews
+                [rgb]="rgb"
+                [currentColor]="currentColor"
+              ></color-photoshop-previews>
+            </div>
+            <div class="photoshop-actions">
+              <color-photoshop-button
+                label="OK"
+                [active]="true"
+                (onClick)="onAccept.emit($event)"
+              ></color-photoshop-button>
+              <color-photoshop-button label="Cancel" (onClick)="onCancel.emit($event)">
+              </color-photoshop-button>
+              <color-photoshop-fields
+                [rgb]="rgb"
+                [hex]="hex"
+                [hsv]="hsv"
+                (onChange)="handleValueChange($event)"
+              ></color-photoshop-fields>
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
   `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -404,8 +414,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
                             provide: ColorWrap,
                             useExisting: forwardRef(() => PhotoshopComponent),
                         },
-                    ], styles: [".photoshop-picker{background:rgb(220,220,220);border-radius:4px;box-shadow:#00000040 0 0 0 1px,#00000026 0 8px 16px;box-sizing:initial;width:513px}.photoshop-head{background-image:linear-gradient(-180deg,rgb(240,240,240) 0%,rgb(212,212,212) 100%);border-bottom:1px solid rgb(177,177,177);box-shadow:#fff3 0 1px inset,#00000005 0 -1px inset;height:23px;line-height:24px;border-radius:4px 4px 0 0;font-size:13px;color:#4d4d4d;text-align:center}.photoshop-body{padding:15px 15px 0;display:flex}.photoshop-saturation{width:256px;height:256px;position:relative;border-width:2px;border-style:solid;border-color:rgb(179,179,179) rgb(179,179,179) rgb(240,240,240);border-image:initial;overflow:hidden}.photoshop-hue{position:relative;height:256px;width:23px;margin-left:10px;border-width:2px;border-style:solid;border-color:rgb(179,179,179) rgb(179,179,179) rgb(240,240,240);border-image:initial}.photoshop-controls{width:180px;margin-left:10px}.photoshop-top{display:flex}.photoshop-previews{width:60px}.photoshop-actions{flex:1 1 0%;margin-left:20px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { header: [{
+                    ], standalone: false, styles: [".photoshop-picker{background:#dcdcdc;border-radius:4px;box-shadow:#00000040 0 0 0 1px,#00000026 0 8px 16px;box-sizing:initial;width:513px}.photoshop-head{background-image:linear-gradient(-180deg,#f0f0f0,#d4d4d4);border-bottom:1px solid rgb(177,177,177);box-shadow:#fff3 0 1px inset,#00000005 0 -1px inset;height:23px;line-height:24px;border-radius:4px 4px 0 0;font-size:13px;color:#4d4d4d;text-align:center}.photoshop-body{padding:15px 15px 0;display:flex}.photoshop-saturation{width:256px;height:256px;position:relative;border-width:2px;border-style:solid;border-color:rgb(179,179,179) rgb(179,179,179) rgb(240,240,240);border-image:initial;overflow:hidden}.photoshop-hue{position:relative;height:256px;width:23px;margin-left:10px;border-width:2px;border-style:solid;border-color:rgb(179,179,179) rgb(179,179,179) rgb(240,240,240);border-image:initial}.photoshop-controls{width:180px;margin-left:10px}.photoshop-top{display:flex}.photoshop-previews{width:60px}.photoshop-actions{-webkit-box-flex:1;flex:1 1 0%;margin-left:20px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { header: [{
                 type: Input
             }], onAccept: [{
                 type: Output
@@ -413,8 +423,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
                 type: Output
             }] } });
 class ColorPhotoshopModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorPhotoshopModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: ColorPhotoshopModule, declarations: [PhotoshopComponent, PhotoshopPreviewsComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorPhotoshopModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: ColorPhotoshopModule, declarations: [PhotoshopComponent, PhotoshopPreviewsComponent,
             PhotoshopButtonComponent,
             PhotoshopFieldsComponent], imports: [CommonModule,
             EditableInputModule,
@@ -424,14 +434,14 @@ class ColorPhotoshopModule {
             SaturationModule], exports: [PhotoshopComponent, PhotoshopPreviewsComponent,
             PhotoshopButtonComponent,
             PhotoshopFieldsComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorPhotoshopModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorPhotoshopModule, imports: [CommonModule,
             EditableInputModule,
             HueModule,
             AlphaModule,
             SwatchModule,
             SaturationModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorPhotoshopModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorPhotoshopModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [