ngx-color 9.0.0 → 10.0.0

package/fesm2022/ngx-color-sketch.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, SwatchModule } 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';
 
@@ -91,114 +90,118 @@ class SketchFieldsComponent {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SketchFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: SketchFieldsComponent, selector: "color-sketch-fields", inputs: { hsl: "hsl", rgb: "rgb", hex: "hex", disableAlpha: "disableAlpha" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
-  <div class="sketch-fields">
-    <div class="sketch-double">
-      <color-editable-input
-        [style]="{ input: input, label: label }"
-        label="hex"
-        [value]="hex.replace('#', '')"
-        (onChange)="handleChange($event)"
-      ></color-editable-input>
-    </div>
-    <div class="sketch-single">
-      <color-editable-input
-        [style]="{ input: input, label: label }"
-        label="r"
-        [value]="rgb.r"
-        (onChange)="handleChange($event)"
-        [dragLabel]="true"
-        [dragMax]="255"
-      ></color-editable-input>
-    </div>
-    <div class="sketch-single">
-      <color-editable-input
-        [style]="{ input: input, label: label }"
-        label="g"
-        [value]="rgb.g"
-        (onChange)="handleChange($event)"
-        [dragLabel]="true"
-        [dragMax]="255"
-      ></color-editable-input>
-    </div>
-    <div class="sketch-single">
-      <color-editable-input
-        [style]="{ input: input, label: label }"
-        label="b"
-        [value]="rgb.b"
-        (onChange)="handleChange($event)"
-        [dragLabel]="true"
-        [dragMax]="255"
-      ></color-editable-input>
-    </div>
-    <div class="sketch-alpha" *ngIf="disableAlpha === false">
-      <color-editable-input
-        [style]="{ input: input, label: label }"
-        label="a"
-        [value]="round(rgb.a * 100)"
-        (onChange)="handleChange($event)"
-        [dragLabel]="true"
-        [dragMax]="100"
-      ></color-editable-input>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SketchFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.3", type: SketchFieldsComponent, isStandalone: false, selector: "color-sketch-fields", inputs: { hsl: "hsl", rgb: "rgb", hex: "hex", disableAlpha: "disableAlpha" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
+    <div class="sketch-fields">
+      <div class="sketch-double">
+        <color-editable-input
+          [style]="{ input: input, label: label }"
+          label="hex"
+          [value]="hex.replace('#', '')"
+          (onChange)="handleChange($event)"
+        ></color-editable-input>
+      </div>
+      <div class="sketch-single">
+        <color-editable-input
+          [style]="{ input: input, label: label }"
+          label="r"
+          [value]="rgb.r"
+          (onChange)="handleChange($event)"
+          [dragLabel]="true"
+          [dragMax]="255"
+        ></color-editable-input>
+      </div>
+      <div class="sketch-single">
+        <color-editable-input
+          [style]="{ input: input, label: label }"
+          label="g"
+          [value]="rgb.g"
+          (onChange)="handleChange($event)"
+          [dragLabel]="true"
+          [dragMax]="255"
+        ></color-editable-input>
+      </div>
+      <div class="sketch-single">
+        <color-editable-input
+          [style]="{ input: input, label: label }"
+          label="b"
+          [value]="rgb.b"
+          (onChange)="handleChange($event)"
+          [dragLabel]="true"
+          [dragMax]="255"
+        ></color-editable-input>
+      </div>
+      @if (disableAlpha === false) {
+        <div class="sketch-alpha">
+          <color-editable-input
+            [style]="{ input: input, label: label }"
+            label="a"
+            [value]="round(rgb.a * 100)"
+            (onChange)="handleChange($event)"
+            [dragLabel]="true"
+            [dragMax]="100"
+          ></color-editable-input>
+        </div>
+      }
     </div>
-  </div>
-  `, isInline: true, styles: [".sketch-fields{display:flex;padding-top:4px}.sketch-double{flex:2 1 0%}.sketch-single,.sketch-alpha{flex:1 1 0%;padding-left:6px}:host-context([dir=rtl]) .sketch-single{padding-right:6px;padding-left:0}:host-context([dir=rtl]) .sketch-alpha{padding-right:6px;padding-left:0}\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: [".sketch-fields{display:flex;padding-top:4px}.sketch-double{-webkit-box-flex:2;flex:2 1 0%}.sketch-single{flex:1 1 0%;padding-left:6px}.sketch-alpha{-webkit-box-flex:1;flex:1 1 0%;padding-left:6px}:host-context([dir=\"rtl\"]) .sketch-single{padding-right:6px;padding-left:0}:host-context([dir=\"rtl\"]) .sketch-alpha{padding-right:6px;padding-left:0}\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: SketchFieldsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SketchFieldsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'color-sketch-fields', template: `
-  <div class="sketch-fields">
-    <div class="sketch-double">
-      <color-editable-input
-        [style]="{ input: input, label: label }"
-        label="hex"
-        [value]="hex.replace('#', '')"
-        (onChange)="handleChange($event)"
-      ></color-editable-input>
-    </div>
-    <div class="sketch-single">
-      <color-editable-input
-        [style]="{ input: input, label: label }"
-        label="r"
-        [value]="rgb.r"
-        (onChange)="handleChange($event)"
-        [dragLabel]="true"
-        [dragMax]="255"
-      ></color-editable-input>
-    </div>
-    <div class="sketch-single">
-      <color-editable-input
-        [style]="{ input: input, label: label }"
-        label="g"
-        [value]="rgb.g"
-        (onChange)="handleChange($event)"
-        [dragLabel]="true"
-        [dragMax]="255"
-      ></color-editable-input>
-    </div>
-    <div class="sketch-single">
-      <color-editable-input
-        [style]="{ input: input, label: label }"
-        label="b"
-        [value]="rgb.b"
-        (onChange)="handleChange($event)"
-        [dragLabel]="true"
-        [dragMax]="255"
-      ></color-editable-input>
-    </div>
-    <div class="sketch-alpha" *ngIf="disableAlpha === false">
-      <color-editable-input
-        [style]="{ input: input, label: label }"
-        label="a"
-        [value]="round(rgb.a * 100)"
-        (onChange)="handleChange($event)"
-        [dragLabel]="true"
-        [dragMax]="100"
-      ></color-editable-input>
+    <div class="sketch-fields">
+      <div class="sketch-double">
+        <color-editable-input
+          [style]="{ input: input, label: label }"
+          label="hex"
+          [value]="hex.replace('#', '')"
+          (onChange)="handleChange($event)"
+        ></color-editable-input>
+      </div>
+      <div class="sketch-single">
+        <color-editable-input
+          [style]="{ input: input, label: label }"
+          label="r"
+          [value]="rgb.r"
+          (onChange)="handleChange($event)"
+          [dragLabel]="true"
+          [dragMax]="255"
+        ></color-editable-input>
+      </div>
+      <div class="sketch-single">
+        <color-editable-input
+          [style]="{ input: input, label: label }"
+          label="g"
+          [value]="rgb.g"
+          (onChange)="handleChange($event)"
+          [dragLabel]="true"
+          [dragMax]="255"
+        ></color-editable-input>
+      </div>
+      <div class="sketch-single">
+        <color-editable-input
+          [style]="{ input: input, label: label }"
+          label="b"
+          [value]="rgb.b"
+          (onChange)="handleChange($event)"
+          [dragLabel]="true"
+          [dragMax]="255"
+        ></color-editable-input>
+      </div>
+      @if (disableAlpha === false) {
+        <div class="sketch-alpha">
+          <color-editable-input
+            [style]="{ input: input, label: label }"
+            label="a"
+            [value]="round(rgb.a * 100)"
+            (onChange)="handleChange($event)"
+            [dragLabel]="true"
+            [dragMax]="100"
+          ></color-editable-input>
+        </div>
+      }
     </div>
-  </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".sketch-fields{display:flex;padding-top:4px}.sketch-double{flex:2 1 0%}.sketch-single,.sketch-alpha{flex:1 1 0%;padding-left:6px}:host-context([dir=rtl]) .sketch-single{padding-right:6px;padding-left:0}:host-context([dir=rtl]) .sketch-alpha{padding-right:6px;padding-left:0}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, standalone: false, styles: [".sketch-fields{display:flex;padding-top:4px}.sketch-double{-webkit-box-flex:2;flex:2 1 0%}.sketch-single{flex:1 1 0%;padding-left:6px}.sketch-alpha{-webkit-box-flex:1;flex:1 1 0%;padding-left:6px}:host-context([dir=\"rtl\"]) .sketch-single{padding-right:6px;padding-left:0}:host-context([dir=\"rtl\"]) .sketch-alpha{padding-right:6px;padding-left:0}\n"] }]
         }], propDecorators: { hsl: [{
                 type: Input
             }], rgb: [{
@@ -234,38 +237,42 @@ class SketchPresetColorsComponent {
             boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${c.color}`,
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SketchPresetColorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: SketchPresetColorsComponent, selector: "color-sketch-preset-colors", inputs: { colors: "colors" }, outputs: { onClick: "onClick", onSwatchHover: "onSwatchHover" }, ngImport: i0, template: `
-  <div class="sketch-swatches">
-    <div class="sketch-wrap" *ngFor="let c of colors">
-      <color-swatch
-        [color]="normalizeValue(c).color"
-        [style]="swatchStyle"
-        [focusStyle]="focusStyle(c)"
-        (onClick)="handleClick($event)"
-        (onHover)="onSwatchHover.emit($event)"
-        class="swatch"
-      ></color-swatch>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SketchPresetColorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.3", type: SketchPresetColorsComponent, isStandalone: false, selector: "color-sketch-preset-colors", inputs: { colors: "colors" }, outputs: { onClick: "onClick", onSwatchHover: "onSwatchHover" }, ngImport: i0, template: `
+    <div class="sketch-swatches">
+      @for (c of colors; track c) {
+        <div class="sketch-wrap">
+          <color-swatch
+            [color]="normalizeValue(c).color"
+            [style]="swatchStyle"
+            [focusStyle]="focusStyle(c)"
+            (onClick)="handleClick($event)"
+            (onHover)="onSwatchHover.emit($event)"
+            class="swatch"
+          ></color-swatch>
+        </div>
+      }
     </div>
-  </div>
-  `, isInline: true, styles: [".sketch-swatches{position:relative;display:flex;flex-wrap:wrap;margin:0 -10px;padding:10px 0 0 10px;border-top:1px solid rgb(238,238,238)}.sketch-wrap{width:16px;height:16px;margin:0 10px 10px 0}:host-context([dir=rtl]) .sketch-swatches{padding-right:10px;padding-left:0}:host-context([dir=rtl]) .sketch-wrap{margin-left:10px;margin-right:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.SwatchComponent, selector: "color-swatch", inputs: ["color", "style", "focusStyle", "focus"], outputs: ["onClick", "onHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".sketch-swatches{position:relative;display:flex;flex-wrap:wrap;margin:0 -10px;padding:10px 0 0 10px;border-top:1px solid rgb(238,238,238)}.sketch-wrap{width:16px;height:16px;margin:0 10px 10px 0}:host-context([dir=\"rtl\"]) .sketch-swatches{padding-right:10px;padding-left:0}:host-context([dir=\"rtl\"]) .sketch-wrap{margin-left:10px;margin-right:0}\n"], dependencies: [{ kind: "component", type: i1.SwatchComponent, selector: "color-swatch", inputs: ["color", "style", "focusStyle", "focus"], outputs: ["onClick", "onHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SketchPresetColorsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SketchPresetColorsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'color-sketch-preset-colors', template: `
-  <div class="sketch-swatches">
-    <div class="sketch-wrap" *ngFor="let c of colors">
-      <color-swatch
-        [color]="normalizeValue(c).color"
-        [style]="swatchStyle"
-        [focusStyle]="focusStyle(c)"
-        (onClick)="handleClick($event)"
-        (onHover)="onSwatchHover.emit($event)"
-        class="swatch"
-      ></color-swatch>
+    <div class="sketch-swatches">
+      @for (c of colors; track c) {
+        <div class="sketch-wrap">
+          <color-swatch
+            [color]="normalizeValue(c).color"
+            [style]="swatchStyle"
+            [focusStyle]="focusStyle(c)"
+            (onClick)="handleClick($event)"
+            (onHover)="onSwatchHover.emit($event)"
+            class="swatch"
+          ></color-swatch>
+        </div>
+      }
     </div>
-  </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".sketch-swatches{position:relative;display:flex;flex-wrap:wrap;margin:0 -10px;padding:10px 0 0 10px;border-top:1px solid rgb(238,238,238)}.sketch-wrap{width:16px;height:16px;margin:0 10px 10px 0}:host-context([dir=rtl]) .sketch-swatches{padding-right:10px;padding-left:0}:host-context([dir=rtl]) .sketch-wrap{margin-left:10px;margin-right:0}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, standalone: false, styles: [".sketch-swatches{position:relative;display:flex;flex-wrap:wrap;margin:0 -10px;padding:10px 0 0 10px;border-top:1px solid rgb(238,238,238)}.sketch-wrap{width:16px;height:16px;margin:0 10px 10px 0}:host-context([dir=\"rtl\"]) .sketch-swatches{padding-right:10px;padding-left:0}:host-context([dir=\"rtl\"]) .sketch-wrap{margin-left:10px;margin-right:0}\n"] }]
         }], propDecorators: { colors: [{
                 type: Input
             }], onClick: [{
@@ -317,8 +324,8 @@ class SketchComponent extends ColorWrap {
             }, $event);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SketchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: SketchComponent, selector: "color-sketch", inputs: { disableAlpha: "disableAlpha", presetColors: "presetColors", width: "width" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SketchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.3", type: SketchComponent, isStandalone: false, selector: "color-sketch", inputs: { disableAlpha: "disableAlpha", presetColors: "presetColors", width: "width" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SketchComponent),
@@ -329,93 +336,101 @@ class SketchComponent extends ColorWrap {
                 useExisting: forwardRef(() => SketchComponent),
             },
         ], usesInheritance: true, ngImport: i0, template: `
-  <div class="sketch-picker {{ className }}" [style.width.px]="width">
-    <div class="sketch-saturation">
-      <color-saturation [hsl]="hsl" [hsv]="hsv"
-        (onChange)="handleValueChange($event)"
-      >
-      </color-saturation>
-    </div>
-    <div class="sketch-controls">
-      <div class="sketch-sliders">
-        <div class="sketch-hue">
-          <color-hue [hsl]="hsl"
-            (onChange)="handleValueChange($event)"
-          ></color-hue>
+    <div class="sketch-picker {{ className }}" [style.width.px]="width">
+      <div class="sketch-saturation">
+        <color-saturation [hsl]="hsl" [hsv]="hsv" (onChange)="handleValueChange($event)">
+        </color-saturation>
+      </div>
+      <div class="sketch-controls">
+        <div class="sketch-sliders">
+          <div class="sketch-hue">
+            <color-hue [hsl]="hsl" (onChange)="handleValueChange($event)"></color-hue>
+          </div>
+          @if (disableAlpha === false) {
+            <div class="sketch-alpha">
+              <color-alpha
+                [radius]="2"
+                [rgb]="rgb"
+                [hsl]="hsl"
+                (onChange)="handleValueChange($event)"
+              ></color-alpha>
+            </div>
+          }
         </div>
-        <div class="sketch-alpha" *ngIf="disableAlpha === false">
-          <color-alpha
-            [radius]="2" [rgb]="rgb" [hsl]="hsl"
-            (onChange)="handleValueChange($event)"
-          ></color-alpha>
+        <div class="sketch-color">
+          <color-checkboard></color-checkboard>
+          <div class="sketch-active" [style.background]="activeBackground"></div>
         </div>
       </div>
-      <div class="sketch-color">
-        <color-checkboard></color-checkboard>
-        <div class="sketch-active" [style.background]="activeBackground"></div>
+      <div class="sketch-fields-container">
+        <color-sketch-fields
+          [rgb]="rgb"
+          [hsl]="hsl"
+          [hex]="hex"
+          [disableAlpha]="disableAlpha"
+          (onChange)="handleValueChange($event)"
+        ></color-sketch-fields>
       </div>
+      @if (presetColors && presetColors.length) {
+        <div class="sketch-swatches-container">
+          <color-sketch-preset-colors
+            [colors]="presetColors"
+            (onClick)="handleBlockChange($event)"
+            (onSwatchHover)="onSwatchHover.emit($event)"
+          ></color-sketch-preset-colors>
+        </div>
+      }
     </div>
-    <div class="sketch-fields-container">
-      <color-sketch-fields
-        [rgb]="rgb" [hsl]="hsl" [hex]="hex"
-        [disableAlpha]="disableAlpha"
-        (onChange)="handleValueChange($event)"
-      ></color-sketch-fields>
-    </div>
-    <div class="sketch-swatches-container" *ngIf="presetColors && presetColors.length">
-      <color-sketch-preset-colors
-        [colors]="presetColors"
-        (onClick)="handleBlockChange($event)"
-        (onSwatchHover)="onSwatchHover.emit($event)"
-      ></color-sketch-preset-colors>
-    </div>
-  </div>
-  `, isInline: true, styles: [".sketch-picker{padding:10px 10px 3px;box-sizing:initial;background:#fff;border-radius:4px;box-shadow:0 0 0 1px #00000026,0 8px 16px #00000026}.sketch-saturation{width:100%;padding-bottom:75%;position:relative;overflow:hidden}.sketch-fields-container,.sketch-swatches-container{display:block}.sketch-controls{display:flex}.sketch-sliders{padding:4px 0;flex:1 1 0%}.sketch-hue{position:relative;height:10px;overflow:hidden}.sketch-alpha{position:relative;height:10px;margin-top:4px;overflow:hidden}.sketch-color{width:24px;height:24px;position:relative;margin-top:4px;margin-left:4px;border-radius:3px}.sketch-active{position:absolute;inset:0;border-radius:2px;box-shadow:#00000026 0 0 0 1px inset,#00000040 0 0 4px inset}:host-context([dir=rtl]) .sketch-color{margin-right:4px;margin-left:0}\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 SketchFieldsComponent; }), selector: "color-sketch-fields", inputs: ["hsl", "rgb", "hex", "disableAlpha"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(function () { return SketchPresetColorsComponent; }), selector: "color-sketch-preset-colors", inputs: ["colors"], outputs: ["onClick", "onSwatchHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".sketch-picker{padding:10px 10px 3px;box-sizing:initial;background:#fff;border-radius:4px;box-shadow:0 0 0 1px #00000026,0 8px 16px #00000026}.sketch-saturation{width:100%;padding-bottom:75%;position:relative;overflow:hidden}.sketch-fields-container,.sketch-swatches-container{display:block}.sketch-controls{display:flex}.sketch-sliders{padding:4px 0;-webkit-box-flex:1;flex:1 1 0%}.sketch-hue{position:relative;height:10px;overflow:hidden}.sketch-alpha{position:relative;height:10px;margin-top:4px;overflow:hidden}.sketch-color{width:24px;height:24px;position:relative;margin-top:4px;margin-left:4px;border-radius:3px}.sketch-active{position:absolute;inset:0;border-radius:2px;box-shadow:#00000026 0 0 0 1px inset,#00000040 0 0 4px inset}:host-context([dir=\"rtl\"]) .sketch-color{margin-right:4px;margin-left:0}\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(() => SketchFieldsComponent), selector: "color-sketch-fields", inputs: ["hsl", "rgb", "hex", "disableAlpha"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(() => SketchPresetColorsComponent), selector: "color-sketch-preset-colors", inputs: ["colors"], outputs: ["onClick", "onSwatchHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SketchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SketchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'color-sketch', template: `
-  <div class="sketch-picker {{ className }}" [style.width.px]="width">
-    <div class="sketch-saturation">
-      <color-saturation [hsl]="hsl" [hsv]="hsv"
-        (onChange)="handleValueChange($event)"
-      >
-      </color-saturation>
-    </div>
-    <div class="sketch-controls">
-      <div class="sketch-sliders">
-        <div class="sketch-hue">
-          <color-hue [hsl]="hsl"
-            (onChange)="handleValueChange($event)"
-          ></color-hue>
+    <div class="sketch-picker {{ className }}" [style.width.px]="width">
+      <div class="sketch-saturation">
+        <color-saturation [hsl]="hsl" [hsv]="hsv" (onChange)="handleValueChange($event)">
+        </color-saturation>
+      </div>
+      <div class="sketch-controls">
+        <div class="sketch-sliders">
+          <div class="sketch-hue">
+            <color-hue [hsl]="hsl" (onChange)="handleValueChange($event)"></color-hue>
+          </div>
+          @if (disableAlpha === false) {
+            <div class="sketch-alpha">
+              <color-alpha
+                [radius]="2"
+                [rgb]="rgb"
+                [hsl]="hsl"
+                (onChange)="handleValueChange($event)"
+              ></color-alpha>
+            </div>
+          }
         </div>
-        <div class="sketch-alpha" *ngIf="disableAlpha === false">
-          <color-alpha
-            [radius]="2" [rgb]="rgb" [hsl]="hsl"
-            (onChange)="handleValueChange($event)"
-          ></color-alpha>
+        <div class="sketch-color">
+          <color-checkboard></color-checkboard>
+          <div class="sketch-active" [style.background]="activeBackground"></div>
         </div>
       </div>
-      <div class="sketch-color">
-        <color-checkboard></color-checkboard>
-        <div class="sketch-active" [style.background]="activeBackground"></div>
+      <div class="sketch-fields-container">
+        <color-sketch-fields
+          [rgb]="rgb"
+          [hsl]="hsl"
+          [hex]="hex"
+          [disableAlpha]="disableAlpha"
+          (onChange)="handleValueChange($event)"
+        ></color-sketch-fields>
       </div>
+      @if (presetColors && presetColors.length) {
+        <div class="sketch-swatches-container">
+          <color-sketch-preset-colors
+            [colors]="presetColors"
+            (onClick)="handleBlockChange($event)"
+            (onSwatchHover)="onSwatchHover.emit($event)"
+          ></color-sketch-preset-colors>
+        </div>
+      }
     </div>
-    <div class="sketch-fields-container">
-      <color-sketch-fields
-        [rgb]="rgb" [hsl]="hsl" [hex]="hex"
-        [disableAlpha]="disableAlpha"
-        (onChange)="handleValueChange($event)"
-      ></color-sketch-fields>
-    </div>
-    <div class="sketch-swatches-container" *ngIf="presetColors && presetColors.length">
-      <color-sketch-preset-colors
-        [colors]="presetColors"
-        (onClick)="handleBlockChange($event)"
-        (onSwatchHover)="onSwatchHover.emit($event)"
-      ></color-sketch-preset-colors>
-    </div>
-  </div>
   `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -426,8 +441,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
                             provide: ColorWrap,
                             useExisting: forwardRef(() => SketchComponent),
                         },
-                    ], styles: [".sketch-picker{padding:10px 10px 3px;box-sizing:initial;background:#fff;border-radius:4px;box-shadow:0 0 0 1px #00000026,0 8px 16px #00000026}.sketch-saturation{width:100%;padding-bottom:75%;position:relative;overflow:hidden}.sketch-fields-container,.sketch-swatches-container{display:block}.sketch-controls{display:flex}.sketch-sliders{padding:4px 0;flex:1 1 0%}.sketch-hue{position:relative;height:10px;overflow:hidden}.sketch-alpha{position:relative;height:10px;margin-top:4px;overflow:hidden}.sketch-color{width:24px;height:24px;position:relative;margin-top:4px;margin-left:4px;border-radius:3px}.sketch-active{position:absolute;inset:0;border-radius:2px;box-shadow:#00000026 0 0 0 1px inset,#00000040 0 0 4px inset}:host-context([dir=rtl]) .sketch-color{margin-right:4px;margin-left:0}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { disableAlpha: [{
+                    ], standalone: false, styles: [".sketch-picker{padding:10px 10px 3px;box-sizing:initial;background:#fff;border-radius:4px;box-shadow:0 0 0 1px #00000026,0 8px 16px #00000026}.sketch-saturation{width:100%;padding-bottom:75%;position:relative;overflow:hidden}.sketch-fields-container,.sketch-swatches-container{display:block}.sketch-controls{display:flex}.sketch-sliders{padding:4px 0;-webkit-box-flex:1;flex:1 1 0%}.sketch-hue{position:relative;height:10px;overflow:hidden}.sketch-alpha{position:relative;height:10px;margin-top:4px;overflow:hidden}.sketch-color{width:24px;height:24px;position:relative;margin-top:4px;margin-left:4px;border-radius:3px}.sketch-active{position:absolute;inset:0;border-radius:2px;box-shadow:#00000026 0 0 0 1px inset,#00000040 0 0 4px inset}:host-context([dir=\"rtl\"]) .sketch-color{margin-right:4px;margin-left:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { disableAlpha: [{
                 type: Input
             }], presetColors: [{
                 type: Input
@@ -435,17 +450,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
                 type: Input
             }] } });
 class ColorSketchModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorSketchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: ColorSketchModule, declarations: [SketchComponent, SketchFieldsComponent,
-            SketchPresetColorsComponent], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorSketchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: ColorSketchModule, declarations: [SketchComponent, SketchFieldsComponent, SketchPresetColorsComponent], imports: [CommonModule,
             AlphaModule,
             CheckboardModule,
             EditableInputModule,
             HueModule,
             SaturationModule,
-            SwatchModule], exports: [SketchComponent, SketchFieldsComponent,
-            SketchPresetColorsComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorSketchModule, imports: [CommonModule,
+            SwatchModule], exports: [SketchComponent, SketchFieldsComponent, SketchPresetColorsComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorSketchModule, imports: [CommonModule,
             AlphaModule,
             CheckboardModule,
             EditableInputModule,
@@ -453,19 +466,11 @@ class ColorSketchModule {
             SaturationModule,
             SwatchModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorSketchModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorSketchModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        SketchComponent,
-                        SketchFieldsComponent,
-                        SketchPresetColorsComponent,
-                    ],
-                    exports: [
-                        SketchComponent,
-                        SketchFieldsComponent,
-                        SketchPresetColorsComponent,
-                    ],
+                    declarations: [SketchComponent, SketchFieldsComponent, SketchPresetColorsComponent],
+                    exports: [SketchComponent, SketchFieldsComponent, SketchPresetColorsComponent],
                     imports: [
                         CommonModule,
                         AlphaModule,