ngx-color 9.0.0 → 10.1.0

package/fesm2022/ngx-color.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, NgModule, Directive, Output, HostListener, EventEmitter, isDevMode, forwardRef } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, NgModule, inject, ElementRef, Directive, Output, HostListener, EventEmitter, isDevMode, forwardRef } from '@angular/core';
 import { Subject, Subscription, fromEvent } from 'rxjs';
 import { distinctUntilChanged, debounceTime, tap } from 'rxjs/operators';
 import { TinyColor } from '@ctrl/tinycolor';
@@ -55,12 +55,12 @@ class CheckboardComponent {
             background: `url(${background}) center left`,
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: CheckboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: CheckboardComponent, selector: "color-checkboard", inputs: { white: "white", size: "size", grey: "grey", boxShadow: "boxShadow", borderRadius: "borderRadius" }, ngImport: i0, template: `<div class="grid" [ngStyle]="gridStyles"></div>`, isInline: true, styles: [".grid{inset:0;position:absolute}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: CheckboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: CheckboardComponent, isStandalone: false, selector: "color-checkboard", inputs: { white: "white", size: "size", grey: "grey", boxShadow: "boxShadow", borderRadius: "borderRadius" }, ngImport: i0, template: `<div class="grid" [ngStyle]="gridStyles"></div>`, isInline: true, styles: [".grid{inset:0;position:absolute}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: CheckboardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: CheckboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'color-checkboard', template: `<div class="grid" [ngStyle]="gridStyles"></div>`, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".grid{inset:0;position:absolute}\n"] }]
+            args: [{ selector: 'color-checkboard', template: `<div class="grid" [ngStyle]="gridStyles"></div>`, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [".grid{inset:0;position:absolute}\n"] }]
         }], propDecorators: { white: [{
                 type: Input
             }], size: [{
@@ -73,11 +73,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
                 type: Input
             }] } });
 class CheckboardModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: CheckboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: CheckboardModule, declarations: [CheckboardComponent], imports: [CommonModule], exports: [CheckboardComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: CheckboardModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: CheckboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: CheckboardModule, declarations: [CheckboardComponent], imports: [CommonModule], exports: [CheckboardComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: CheckboardModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: CheckboardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: CheckboardModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [CheckboardComponent],
@@ -87,7 +87,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
         }] });
 
 class CoordinatesDirective {
-    el;
+    el = inject(ElementRef);
     coordinatesChange = new Subject();
     mousechange = new Subject();
     mouseListening = false;
@@ -106,9 +106,6 @@ class CoordinatesDirective {
         this.mouseListening = true;
         this.mousechange.next({ $event, x, y, isTouch });
     }
-    constructor(el) {
-        this.el = el;
-    }
     ngOnInit() {
         this.sub = this.mousechange
             .pipe(
@@ -122,8 +119,7 @@ class CoordinatesDirective {
     handleChange(x, y, $event, isTouch) {
         const containerWidth = this.el.nativeElement.clientWidth;
         const containerHeight = this.el.nativeElement.clientHeight;
-        const left = x -
-            (this.el.nativeElement.getBoundingClientRect().left + window.pageXOffset);
+        const left = x - (this.el.nativeElement.getBoundingClientRect().left + window.pageXOffset);
         let top = y - this.el.nativeElement.getBoundingClientRect().top;
         if (!isTouch) {
             top = top - window.pageYOffset;
@@ -138,13 +134,16 @@ class CoordinatesDirective {
             $event,
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: CoordinatesDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.1", type: CoordinatesDirective, selector: "[ngx-color-coordinates]", outputs: { coordinatesChange: "coordinatesChange" }, host: { listeners: { "window:mousemove": "mousemove($event,$event.pageX,$event.pageY)", "window:touchmove": "mousemove($event,$event.touches[0].clientX,$event.touches[0].clientY,true)", "window:mouseup": "mouseup()", "window:touchend": "mouseup()", "mousedown": "mousedown($event,$event.pageX,$event.pageY)", "touchstart": "mousedown($event,$event.touches[0].clientX,$event.touches[0].clientY,true)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: CoordinatesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.3", type: CoordinatesDirective, isStandalone: false, selector: "[ngx-color-coordinates]", outputs: { coordinatesChange: "coordinatesChange" }, host: { listeners: { "window:mousemove": "mousemove($event,$event.pageX,$event.pageY)", "window:touchmove": "mousemove($event,$event.touches[0].clientX,$event.touches[0].clientY,true)", "window:mouseup": "mouseup()", "window:touchend": "mouseup()", "mousedown": "mousedown($event,$event.pageX,$event.pageY)", "touchstart": "mousedown($event,$event.touches[0].clientX,$event.touches[0].clientY,true)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: CoordinatesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: CoordinatesDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[ngx-color-coordinates]' }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { coordinatesChange: [{
+            args: [{
+                    selector: '[ngx-color-coordinates]',
+                    standalone: false,
+                }]
+        }], propDecorators: { coordinatesChange: [{
                 type: Output
             }], mousemove: [{
                 type: HostListener,
@@ -176,11 +175,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
                     ]]
             }] } });
 class CoordinatesModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: CoordinatesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: CoordinatesModule, declarations: [CoordinatesDirective], exports: [CoordinatesDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: CoordinatesModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: CoordinatesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: CoordinatesModule, declarations: [CoordinatesDirective], exports: [CoordinatesDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: CoordinatesModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: CoordinatesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: CoordinatesModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [CoordinatesDirective],
@@ -227,7 +226,7 @@ class AlphaComponent {
                 a = 1;
             }
             else {
-                a = Math.round(top * 100 / containerHeight) / 100;
+                a = Math.round((top * 100) / containerHeight) / 100;
             }
             if (this.hsl.a !== a) {
                 data = {
@@ -248,7 +247,7 @@ class AlphaComponent {
                 a = 1;
             }
             else {
-                a = Math.round(left * 100 / containerWidth) / 100;
+                a = Math.round((left * 100) / containerWidth) / 100;
             }
             if (this.hsl.a !== a) {
                 data = {
@@ -265,36 +264,54 @@ class AlphaComponent {
         }
         this.onChange.emit({ data, $event });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AlphaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: AlphaComponent, selector: "color-alpha", inputs: { hsl: "hsl", rgb: "rgb", pointer: "pointer", shadow: "shadow", radius: "radius", direction: "direction" }, outputs: { onChange: "onChange" }, usesOnChanges: true, ngImport: i0, template: `
-  <div class="alpha" [style.border-radius]="radius">
-    <div class="alpha-checkboard">
-      <color-checkboard></color-checkboard>
-    </div>
-    <div class="alpha-gradient" [ngStyle]="gradient" [style.box-shadow]="shadow" [style.border-radius]="radius"></div>
-    <div ngx-color-coordinates (coordinatesChange)="handleChange($event)" class="alpha-container color-alpha-{{direction}}">
-      <div class="alpha-pointer" [style.left.%]="pointerLeft" [style.top.%]="pointerTop">
-        <div class="alpha-slider" [ngStyle]="pointer"></div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: AlphaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: AlphaComponent, isStandalone: false, selector: "color-alpha", inputs: { hsl: "hsl", rgb: "rgb", pointer: "pointer", shadow: "shadow", radius: "radius", direction: "direction" }, outputs: { onChange: "onChange" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="alpha" [style.border-radius]="radius">
+      <div class="alpha-checkboard">
+        <color-checkboard></color-checkboard>
+      </div>
+      <div
+        class="alpha-gradient"
+        [ngStyle]="gradient"
+        [style.box-shadow]="shadow"
+        [style.border-radius]="radius"
+      ></div>
+      <div
+        ngx-color-coordinates
+        (coordinatesChange)="handleChange($event)"
+        class="alpha-container color-alpha-{{ direction }}"
+      >
+        <div class="alpha-pointer" [style.left.%]="pointerLeft" [style.top.%]="pointerTop">
+          <div class="alpha-slider" [ngStyle]="pointer"></div>
+        </div>
       </div>
     </div>
-  </div>
   `, isInline: true, styles: [".alpha{position:absolute;inset:0}.alpha-checkboard{position:absolute;inset:0;overflow:hidden}.alpha-gradient{position:absolute;inset:0}.alpha-container{position:relative;height:100%;margin:0 3px}.alpha-pointer{position:absolute}.alpha-slider{width:4px;border-radius:1px;height:8px;box-shadow:0 0 2px #0009;background:#fff;margin-top:1px;transform:translate(-2px)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CheckboardComponent, selector: "color-checkboard", inputs: ["white", "size", "grey", "boxShadow", "borderRadius"] }, { kind: "directive", type: CoordinatesDirective, selector: "[ngx-color-coordinates]", outputs: ["coordinatesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AlphaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: AlphaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'color-alpha', template: `
-  <div class="alpha" [style.border-radius]="radius">
-    <div class="alpha-checkboard">
-      <color-checkboard></color-checkboard>
-    </div>
-    <div class="alpha-gradient" [ngStyle]="gradient" [style.box-shadow]="shadow" [style.border-radius]="radius"></div>
-    <div ngx-color-coordinates (coordinatesChange)="handleChange($event)" class="alpha-container color-alpha-{{direction}}">
-      <div class="alpha-pointer" [style.left.%]="pointerLeft" [style.top.%]="pointerTop">
-        <div class="alpha-slider" [ngStyle]="pointer"></div>
+    <div class="alpha" [style.border-radius]="radius">
+      <div class="alpha-checkboard">
+        <color-checkboard></color-checkboard>
+      </div>
+      <div
+        class="alpha-gradient"
+        [ngStyle]="gradient"
+        [style.box-shadow]="shadow"
+        [style.border-radius]="radius"
+      ></div>
+      <div
+        ngx-color-coordinates
+        (coordinatesChange)="handleChange($event)"
+        class="alpha-container color-alpha-{{ direction }}"
+      >
+        <div class="alpha-pointer" [style.left.%]="pointerLeft" [style.top.%]="pointerTop">
+          <div class="alpha-slider" [ngStyle]="pointer"></div>
+        </div>
       </div>
     </div>
-  </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".alpha{position:absolute;inset:0}.alpha-checkboard{position:absolute;inset:0;overflow:hidden}.alpha-gradient{position:absolute;inset:0}.alpha-container{position:relative;height:100%;margin:0 3px}.alpha-pointer{position:absolute}.alpha-slider{width:4px;border-radius:1px;height:8px;box-shadow:0 0 2px #0009;background:#fff;margin-top:1px;transform:translate(-2px)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, standalone: false, styles: [".alpha{position:absolute;inset:0}.alpha-checkboard{position:absolute;inset:0;overflow:hidden}.alpha-gradient{position:absolute;inset:0}.alpha-container{position:relative;height:100%;margin:0 3px}.alpha-pointer{position:absolute}.alpha-slider{width:4px;border-radius:1px;height:8px;box-shadow:0 0 2px #0009;background:#fff;margin-top:1px;transform:translate(-2px)}\n"] }]
         }], propDecorators: { hsl: [{
                 type: Input
             }], rgb: [{
@@ -311,11 +328,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
                 type: Output
             }] } });
 class AlphaModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AlphaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: AlphaModule, declarations: [AlphaComponent], imports: [CommonModule, CheckboardModule, CoordinatesModule], exports: [AlphaComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AlphaModule, imports: [CommonModule, CheckboardModule, CoordinatesModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: AlphaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: AlphaModule, declarations: [AlphaComponent], imports: [CommonModule, CheckboardModule, CoordinatesModule], exports: [AlphaComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: AlphaModule, imports: [CommonModule, CheckboardModule, CoordinatesModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AlphaModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: AlphaModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AlphaComponent],
@@ -495,16 +512,16 @@ class ColorWrap {
     writeValue(hex) {
         this.color = hex;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorWrap, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: ColorWrap, selector: "color-wrap", inputs: { className: "className", mode: "mode", color: "color" }, outputs: { colorChange: "colorChange", onChange: "onChange", onChangeComplete: "onChangeComplete", onSwatchHover: "onSwatchHover" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorWrap, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: ColorWrap, isStandalone: false, selector: "color-wrap", inputs: { className: "className", mode: "mode", color: "color" }, outputs: { colorChange: "colorChange", onChange: "onChange", onChangeComplete: "onChangeComplete", onSwatchHover: "onSwatchHover" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ColorWrap),
                 multi: true,
-            }
+            },
         ], usesOnChanges: true, ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorWrap, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorWrap, decorators: [{
             type: Component,
             args: [{
                     // create seletor base for test override property
@@ -515,8 +532,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => ColorWrap),
                             multi: true,
-                        }
-                    ]
+                        },
+                    ],
+                    standalone: false,
                 }]
         }], propDecorators: { className: [{
                 type: Input
@@ -534,11 +552,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
                 type: Output
             }] } });
 class ColorWrapModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorWrapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: ColorWrapModule, declarations: [ColorWrap], imports: [CommonModule], exports: [ColorWrap] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorWrapModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorWrapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: ColorWrapModule, declarations: [ColorWrap], imports: [CommonModule], exports: [ColorWrap] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorWrapModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorWrapModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorWrapModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ColorWrap],
@@ -681,8 +699,8 @@ class EditableInputComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: EditableInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: EditableInputComponent, selector: "color-editable-input", inputs: { style: "style", label: "label", value: "value", arrowOffset: "arrowOffset", dragLabel: "dragLabel", dragMax: "dragMax", placeholder: "placeholder" }, outputs: { onChange: "onChange" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: EditableInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.3", type: EditableInputComponent, isStandalone: false, selector: "color-editable-input", inputs: { style: "style", label: "label", value: "value", arrowOffset: "arrowOffset", dragLabel: "dragLabel", dragMax: "dragMax", placeholder: "placeholder" }, outputs: { onChange: "onChange" }, usesOnChanges: true, ngImport: i0, template: `
     <div class="wrap" [ngStyle]="wrapStyle">
       <input
         [ngStyle]="inputStyle"
@@ -695,13 +713,15 @@ class EditableInputComponent {
         (focusout)="handleFocusOut($event)"
         [attr.aria-labelledby]="uniqueId"
       />
-      <span [id]="uniqueId" *ngIf="label" [ngStyle]="labelStyle" (mousedown)="handleMousedown($event)">
-        {{ label }}
-      </span>
+      @if (label) {
+        <span [id]="uniqueId" [ngStyle]="labelStyle" (mousedown)="handleMousedown($event)">
+          {{ label }}
+        </span>
+      }
     </div>
-  `, isInline: true, styles: [":host{display:flex}.wrap{position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:flex}.wrap{position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: EditableInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: EditableInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'color-editable-input', template: `
     <div class="wrap" [ngStyle]="wrapStyle">
@@ -716,11 +736,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
         (focusout)="handleFocusOut($event)"
         [attr.aria-labelledby]="uniqueId"
       />
-      <span [id]="uniqueId" *ngIf="label" [ngStyle]="labelStyle" (mousedown)="handleMousedown($event)">
-        {{ label }}
-      </span>
+      @if (label) {
+        <span [id]="uniqueId" [ngStyle]="labelStyle" (mousedown)="handleMousedown($event)">
+          {{ label }}
+        </span>
+      }
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex}.wrap{position:relative}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [":host{display:flex}.wrap{position:relative}\n"] }]
         }], propDecorators: { style: [{
                 type: Input
             }], label: [{
@@ -739,11 +761,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
                 type: Output
             }] } });
 class EditableInputModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: EditableInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: EditableInputModule, declarations: [EditableInputComponent], imports: [CommonModule], exports: [EditableInputComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: EditableInputModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: EditableInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: EditableInputModule, declarations: [EditableInputComponent], imports: [CommonModule], exports: [EditableInputComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: EditableInputModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: EditableInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: EditableInputModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [EditableInputComponent],
@@ -764,10 +786,10 @@ class HueComponent {
     top = '';
     ngOnChanges() {
         if (this.direction === 'horizontal') {
-            this.left = `${this.hsl.h * 100 / 360}%`;
+            this.left = `${(this.hsl.h * 100) / 360}%`;
         }
         else {
-            this.top = `${-(this.hsl.h * 100 / 360) + 100}%`;
+            this.top = `${-((this.hsl.h * 100) / 360) + 100}%`;
         }
     }
     handleChange({ top, left, containerHeight, containerWidth, $event }) {
@@ -781,8 +803,8 @@ class HueComponent {
                 h = 0;
             }
             else {
-                const percent = -(top * 100 / containerHeight) + 100;
-                h = 360 * percent / 100;
+                const percent = -((top * 100) / containerHeight) + 100;
+                h = (360 * percent) / 100;
             }
             if (this.hsl.h !== h) {
                 data = {
@@ -803,8 +825,8 @@ class HueComponent {
                 h = 359;
             }
             else {
-                const percent = left * 100 / containerWidth;
-                h = 360 * percent / 100;
+                const percent = (left * 100) / containerWidth;
+                h = (360 * percent) / 100;
             }
             if (this.hsl.h !== h) {
                 data = {
@@ -821,28 +843,48 @@ class HueComponent {
         }
         this.onChange.emit({ data, $event });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: HueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: HueComponent, selector: "color-hue", inputs: { hsl: "hsl", pointer: "pointer", radius: "radius", shadow: "shadow", hidePointer: "hidePointer", direction: "direction" }, outputs: { onChange: "onChange" }, usesOnChanges: true, ngImport: i0, template: `
-  <div class="color-hue color-hue-{{direction}}" [style.border-radius.px]="radius" [style.box-shadow]="shadow">
-    <div ngx-color-coordinates (coordinatesChange)="handleChange($event)" class="color-hue-container">
-      <div class="color-hue-pointer" [style.left]="left" [style.top]="top" *ngIf="!hidePointer">
-        <div class="color-hue-slider" [ngStyle]="pointer"></div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: HueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.3", type: HueComponent, isStandalone: false, selector: "color-hue", inputs: { hsl: "hsl", pointer: "pointer", radius: "radius", shadow: "shadow", hidePointer: "hidePointer", direction: "direction" }, outputs: { onChange: "onChange" }, usesOnChanges: true, ngImport: i0, template: `
+    <div
+      class="color-hue color-hue-{{ direction }}"
+      [style.border-radius.px]="radius"
+      [style.box-shadow]="shadow"
+    >
+      <div
+        ngx-color-coordinates
+        (coordinatesChange)="handleChange($event)"
+        class="color-hue-container"
+      >
+        @if (!hidePointer) {
+          <div class="color-hue-pointer" [style.left]="left" [style.top]="top">
+            <div class="color-hue-slider" [ngStyle]="pointer"></div>
+          </div>
+        }
       </div>
     </div>
-  </div>
-  `, isInline: true, styles: [".color-hue{position:absolute;inset:0}.color-hue-container{margin:0 2px;position:relative;height:100%}.color-hue-pointer{position:absolute}.color-hue-slider{margin-top:1px;width:4px;border-radius:1px;height:8px;box-shadow:0 0 2px #0009;background:#fff;transform:translate(-2px)}.color-hue-horizontal{background:linear-gradient(to right,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%)}.color-hue-vertical{background:linear-gradient(to top,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: CoordinatesDirective, selector: "[ngx-color-coordinates]", outputs: ["coordinatesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".color-hue{position:absolute;inset:0}.color-hue-container{margin:0 2px;position:relative;height:100%}.color-hue-pointer{position:absolute}.color-hue-slider{margin-top:1px;width:4px;border-radius:1px;height:8px;box-shadow:0 0 2px #0009;background:#fff;transform:translate(-2px)}.color-hue-horizontal{background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.color-hue-vertical{background:linear-gradient(to top,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: CoordinatesDirective, selector: "[ngx-color-coordinates]", outputs: ["coordinatesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: HueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: HueComponent, decorators: [{
             type: Component,
             args: [{ selector: 'color-hue', template: `
-  <div class="color-hue color-hue-{{direction}}" [style.border-radius.px]="radius" [style.box-shadow]="shadow">
-    <div ngx-color-coordinates (coordinatesChange)="handleChange($event)" class="color-hue-container">
-      <div class="color-hue-pointer" [style.left]="left" [style.top]="top" *ngIf="!hidePointer">
-        <div class="color-hue-slider" [ngStyle]="pointer"></div>
+    <div
+      class="color-hue color-hue-{{ direction }}"
+      [style.border-radius.px]="radius"
+      [style.box-shadow]="shadow"
+    >
+      <div
+        ngx-color-coordinates
+        (coordinatesChange)="handleChange($event)"
+        class="color-hue-container"
+      >
+        @if (!hidePointer) {
+          <div class="color-hue-pointer" [style.left]="left" [style.top]="top">
+            <div class="color-hue-slider" [ngStyle]="pointer"></div>
+          </div>
+        }
       </div>
     </div>
-  </div>
-  `, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".color-hue{position:absolute;inset:0}.color-hue-container{margin:0 2px;position:relative;height:100%}.color-hue-pointer{position:absolute}.color-hue-slider{margin-top:1px;width:4px;border-radius:1px;height:8px;box-shadow:0 0 2px #0009;background:#fff;transform:translate(-2px)}.color-hue-horizontal{background:linear-gradient(to right,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%)}.color-hue-vertical{background:linear-gradient(to top,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%)}\n"] }]
+  `, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [".color-hue{position:absolute;inset:0}.color-hue-container{margin:0 2px;position:relative;height:100%}.color-hue-pointer{position:absolute}.color-hue-slider{margin-top:1px;width:4px;border-radius:1px;height:8px;box-shadow:0 0 2px #0009;background:#fff;transform:translate(-2px)}.color-hue-horizontal{background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.color-hue-vertical{background:linear-gradient(to top,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}\n"] }]
         }], propDecorators: { hsl: [{
                 type: Input
             }], pointer: [{
@@ -859,11 +901,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
                 type: Output
             }] } });
 class HueModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: HueModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: HueModule, declarations: [HueComponent], imports: [CommonModule, CoordinatesModule], exports: [HueComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: HueModule, imports: [CommonModule, CoordinatesModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: HueModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: HueModule, declarations: [HueComponent], imports: [CommonModule, CoordinatesModule], exports: [HueComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: HueModule, imports: [CommonModule, CoordinatesModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: HueModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: HueModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [HueComponent],
@@ -876,26 +918,26 @@ class RaisedComponent {
     zDepth = 1;
     radius = 1;
     background = '#fff';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: RaisedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: RaisedComponent, selector: "color-raised", inputs: { zDepth: "zDepth", radius: "radius", background: "background" }, ngImport: i0, template: `
-  <div class="raised-wrap">
-    <div class="raised-bg zDepth-{{zDepth}}" [style.background]="background"></div>
-    <div class="raised-content">
-      <ng-content></ng-content>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: RaisedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: RaisedComponent, isStandalone: false, selector: "color-raised", inputs: { zDepth: "zDepth", radius: "radius", background: "background" }, ngImport: i0, template: `
+    <div class="raised-wrap">
+      <div class="raised-bg zDepth-{{ zDepth }}" [style.background]="background"></div>
+      <div class="raised-content">
+        <ng-content></ng-content>
+      </div>
     </div>
-  </div>
   `, isInline: true, styles: [".raised-wrap{position:relative;display:inline-block}.raised-bg{position:absolute;inset:0}.raised-content{position:relative}.zDepth-0{box-shadow:none}.zDepth-1{box-shadow:0 2px 10px #0000001f,0 2px 5px #00000029}.zDepth-2{box-shadow:0 6px 20px #00000030,0 8px 17px #0003}.zDepth-3{box-shadow:0 17px 50px #00000030,0 12px 15px #0000003d}.zDepth-4{box-shadow:0 25px 55px #00000036,0 16px 28px #00000038}.zDepth-5{box-shadow:0 40px 77px #00000038,0 27px 24px #0003}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: RaisedComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: RaisedComponent, decorators: [{
             type: Component,
             args: [{ selector: 'color-raised', template: `
-  <div class="raised-wrap">
-    <div class="raised-bg zDepth-{{zDepth}}" [style.background]="background"></div>
-    <div class="raised-content">
-      <ng-content></ng-content>
+    <div class="raised-wrap">
+      <div class="raised-bg zDepth-{{ zDepth }}" [style.background]="background"></div>
+      <div class="raised-content">
+        <ng-content></ng-content>
+      </div>
     </div>
-  </div>
-  `, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".raised-wrap{position:relative;display:inline-block}.raised-bg{position:absolute;inset:0}.raised-content{position:relative}.zDepth-0{box-shadow:none}.zDepth-1{box-shadow:0 2px 10px #0000001f,0 2px 5px #00000029}.zDepth-2{box-shadow:0 6px 20px #00000030,0 8px 17px #0003}.zDepth-3{box-shadow:0 17px 50px #00000030,0 12px 15px #0000003d}.zDepth-4{box-shadow:0 25px 55px #00000036,0 16px 28px #00000038}.zDepth-5{box-shadow:0 40px 77px #00000038,0 27px 24px #0003}\n"] }]
+  `, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [".raised-wrap{position:relative;display:inline-block}.raised-bg{position:absolute;inset:0}.raised-content{position:relative}.zDepth-0{box-shadow:none}.zDepth-1{box-shadow:0 2px 10px #0000001f,0 2px 5px #00000029}.zDepth-2{box-shadow:0 6px 20px #00000030,0 8px 17px #0003}.zDepth-3{box-shadow:0 17px 50px #00000030,0 12px 15px #0000003d}.zDepth-4{box-shadow:0 25px 55px #00000036,0 16px 28px #00000038}.zDepth-5{box-shadow:0 40px 77px #00000038,0 27px 24px #0003}\n"] }]
         }], propDecorators: { zDepth: [{
                 type: Input
             }], radius: [{
@@ -904,11 +946,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
                 type: Input
             }] } });
 class RaisedModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: RaisedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: RaisedModule, declarations: [RaisedComponent], imports: [CommonModule], exports: [RaisedComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: RaisedModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: RaisedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: RaisedModule, declarations: [RaisedComponent], imports: [CommonModule], exports: [RaisedComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: RaisedModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: RaisedModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: RaisedModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [RaisedComponent],
@@ -958,30 +1000,50 @@ class SaturationComponent {
         };
         this.onChange.emit({ data, $event });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SaturationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: SaturationComponent, selector: "color-saturation", inputs: { hsl: "hsl", hsv: "hsv", radius: "radius", pointer: "pointer", circle: "circle" }, outputs: { onChange: "onChange" }, usesOnChanges: true, ngImport: i0, template: `
-  <div class="color-saturation" ngx-color-coordinates (coordinatesChange)="handleChange($event)" [style.background]="background">
-    <div class="saturation-white">
-      <div class="saturation-black"></div>
-      <div class="saturation-pointer" [ngStyle]="pointer" [style.top]="pointerTop" [style.left]="pointerLeft">
-        <div class="saturation-circle" [ngStyle]="circle"></div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SaturationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: SaturationComponent, isStandalone: false, selector: "color-saturation", inputs: { hsl: "hsl", hsv: "hsv", radius: "radius", pointer: "pointer", circle: "circle" }, outputs: { onChange: "onChange" }, usesOnChanges: true, ngImport: i0, template: `
+    <div
+      class="color-saturation"
+      ngx-color-coordinates
+      (coordinatesChange)="handleChange($event)"
+      [style.background]="background"
+    >
+      <div class="saturation-white">
+        <div class="saturation-black"></div>
+        <div
+          class="saturation-pointer"
+          [ngStyle]="pointer"
+          [style.top]="pointerTop"
+          [style.left]="pointerLeft"
+        >
+          <div class="saturation-circle" [ngStyle]="circle"></div>
+        </div>
       </div>
     </div>
-  </div>
-  `, isInline: true, styles: [".saturation-white{background:linear-gradient(to right,#fff,rgba(255,255,255,0));position:absolute;inset:0}.saturation-black{background:linear-gradient(to top,#000,rgba(0,0,0,0));position:absolute;inset:0}.color-saturation{position:absolute;inset:0}.saturation-pointer{position:absolute;cursor:default}.saturation-circle{width:4px;height:4px;box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px #0000004d,0 0 1px 2px #0006;border-radius:50%;cursor:hand;transform:translate(-2px,-4px)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: CoordinatesDirective, selector: "[ngx-color-coordinates]", outputs: ["coordinatesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".saturation-white{background:linear-gradient(to right,#fff,#fff0);position:absolute;inset:0}.saturation-black{background:linear-gradient(to top,#000,#0000);position:absolute;inset:0}.color-saturation{position:absolute;inset:0}.saturation-pointer{position:absolute;cursor:default}.saturation-circle{width:4px;height:4px;box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px #0000004d,0 0 1px 2px #0006;border-radius:50%;cursor:hand;transform:translate(-2px,-4px)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: CoordinatesDirective, selector: "[ngx-color-coordinates]", outputs: ["coordinatesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SaturationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SaturationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'color-saturation', template: `
-  <div class="color-saturation" ngx-color-coordinates (coordinatesChange)="handleChange($event)" [style.background]="background">
-    <div class="saturation-white">
-      <div class="saturation-black"></div>
-      <div class="saturation-pointer" [ngStyle]="pointer" [style.top]="pointerTop" [style.left]="pointerLeft">
-        <div class="saturation-circle" [ngStyle]="circle"></div>
+    <div
+      class="color-saturation"
+      ngx-color-coordinates
+      (coordinatesChange)="handleChange($event)"
+      [style.background]="background"
+    >
+      <div class="saturation-white">
+        <div class="saturation-black"></div>
+        <div
+          class="saturation-pointer"
+          [ngStyle]="pointer"
+          [style.top]="pointerTop"
+          [style.left]="pointerLeft"
+        >
+          <div class="saturation-circle" [ngStyle]="circle"></div>
+        </div>
       </div>
     </div>
-  </div>
-  `, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".saturation-white{background:linear-gradient(to right,#fff,rgba(255,255,255,0));position:absolute;inset:0}.saturation-black{background:linear-gradient(to top,#000,rgba(0,0,0,0));position:absolute;inset:0}.color-saturation{position:absolute;inset:0}.saturation-pointer{position:absolute;cursor:default}.saturation-circle{width:4px;height:4px;box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px #0000004d,0 0 1px 2px #0006;border-radius:50%;cursor:hand;transform:translate(-2px,-4px)}\n"] }]
+  `, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [".saturation-white{background:linear-gradient(to right,#fff,#fff0);position:absolute;inset:0}.saturation-black{background:linear-gradient(to top,#000,#0000);position:absolute;inset:0}.color-saturation{position:absolute;inset:0}.saturation-pointer{position:absolute;cursor:default}.saturation-circle{width:4px;height:4px;box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px #0000004d,0 0 1px 2px #0006;border-radius:50%;cursor:hand;transform:translate(-2px,-4px)}\n"] }]
         }], propDecorators: { hsl: [{
                 type: Input
             }], hsv: [{
@@ -996,11 +1058,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
                 type: Output
             }] } });
 class SaturationModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SaturationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: SaturationModule, declarations: [SaturationComponent], imports: [CommonModule, CoordinatesModule], exports: [SaturationComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SaturationModule, imports: [CommonModule, CoordinatesModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SaturationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: SaturationModule, declarations: [SaturationComponent], imports: [CommonModule, CoordinatesModule], exports: [SaturationComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SaturationModule, imports: [CommonModule, CoordinatesModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SaturationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SaturationModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SaturationComponent],
@@ -1044,8 +1106,8 @@ class SwatchComponent {
     handleClick(hex, $event) {
         this.onClick.emit({ hex, $event });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SwatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: SwatchComponent, selector: "color-swatch", inputs: { color: "color", style: "style", focusStyle: "focusStyle", focus: "focus" }, outputs: { onClick: "onClick", onHover: "onHover" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SwatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.3", type: SwatchComponent, isStandalone: false, selector: "color-swatch", inputs: { color: "color", style: "style", focusStyle: "focusStyle", focus: "focus" }, outputs: { onClick: "onClick", onHover: "onHover" }, ngImport: i0, template: `
     <div
       class="swatch"
       [ngStyle]="currentStyles()"
@@ -1058,14 +1120,13 @@ class SwatchComponent {
       tabindex="0"
     >
       <ng-content></ng-content>
-      <color-checkboard
-        *ngIf="color === 'transparent'"
-        boxShadow="inset 0 0 0 1px rgba(0,0,0,0.1)"
-      ></color-checkboard>
+      @if (color === 'transparent') {
+        <color-checkboard boxShadow="inset 0 0 0 1px rgba(0,0,0,0.1)"></color-checkboard>
+      }
     </div>
-  `, isInline: true, styles: [".swatch{outline:none;height:100%;width:100%;cursor:pointer;position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CheckboardComponent, selector: "color-checkboard", inputs: ["white", "size", "grey", "boxShadow", "borderRadius"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".swatch{outline:none;height:100%;width:100%;cursor:pointer;position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CheckboardComponent, selector: "color-checkboard", inputs: ["white", "size", "grey", "boxShadow", "borderRadius"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SwatchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SwatchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'color-swatch', template: `
     <div
@@ -1080,12 +1141,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
       tabindex="0"
     >
       <ng-content></ng-content>
-      <color-checkboard
-        *ngIf="color === 'transparent'"
-        boxShadow="inset 0 0 0 1px rgba(0,0,0,0.1)"
-      ></color-checkboard>
+      @if (color === 'transparent') {
+        <color-checkboard boxShadow="inset 0 0 0 1px rgba(0,0,0,0.1)"></color-checkboard>
+      }
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".swatch{outline:none;height:100%;width:100%;cursor:pointer;position:relative}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [".swatch{outline:none;height:100%;width:100%;cursor:pointer;position:relative}\n"] }]
         }], propDecorators: { color: [{
                 type: Input
             }], style: [{
@@ -1100,11 +1160,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
                 type: Output
             }] } });
 class SwatchModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SwatchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: SwatchModule, declarations: [SwatchComponent], imports: [CommonModule, CheckboardModule], exports: [SwatchComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SwatchModule, imports: [CommonModule, CheckboardModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SwatchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: SwatchModule, declarations: [SwatchComponent], imports: [CommonModule, CheckboardModule], exports: [SwatchComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SwatchModule, imports: [CommonModule, CheckboardModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SwatchModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SwatchModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SwatchComponent],
@@ -1130,7 +1190,7 @@ class ShadeComponent {
           #000)`,
         };
         const hsv = new TinyColor(this.hsl).toHsv();
-        this.pointerLeft = 100 - (hsv.v * 100);
+        this.pointerLeft = 100 - hsv.v * 100;
     }
     handleChange({ left, containerWidth, $event }) {
         let data;
@@ -1160,8 +1220,8 @@ class ShadeComponent {
         }
         this.onChange.emit({ data, $event });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ShadeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: ShadeComponent, selector: "color-shade", inputs: { hsl: "hsl", rgb: "rgb", pointer: "pointer", shadow: "shadow", radius: "radius" }, outputs: { onChange: "onChange" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ShadeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: ShadeComponent, isStandalone: false, selector: "color-shade", inputs: { hsl: "hsl", rgb: "rgb", pointer: "pointer", shadow: "shadow", radius: "radius" }, outputs: { onChange: "onChange" }, usesOnChanges: true, ngImport: i0, template: `
     <div class="shade" [style.border-radius]="radius">
       <div
         class="shade-gradient"
@@ -1169,23 +1229,15 @@ class ShadeComponent {
         [style.box-shadow]="shadow"
         [style.border-radius]="radius"
       ></div>
-      <div
-        ngx-color-coordinates
-        (coordinatesChange)="handleChange($event)"
-        class="shade-container"
-      >
-        <div
-          class="shade-pointer"
-          [style.left.%]="pointerLeft"
-          [style.top.%]="pointerTop"
-        >
+      <div ngx-color-coordinates (coordinatesChange)="handleChange($event)" class="shade-container">
+        <div class="shade-pointer" [style.left.%]="pointerLeft" [style.top.%]="pointerTop">
           <div class="shade-slider" [ngStyle]="pointer"></div>
         </div>
       </div>
     </div>
   `, isInline: true, styles: [".shade,.shade-gradient{position:absolute;inset:0}.shade-container{position:relative;height:100%;margin:0 3px}.shade-pointer{position:absolute}.shade-slider{width:4px;border-radius:1px;height:8px;box-shadow:0 0 2px #0009;background:#fff;margin-top:1px;transform:translate(-2px)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: CoordinatesDirective, selector: "[ngx-color-coordinates]", outputs: ["coordinatesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ShadeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ShadeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'color-shade', template: `
     <div class="shade" [style.border-radius]="radius">
@@ -1195,21 +1247,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
         [style.box-shadow]="shadow"
         [style.border-radius]="radius"
       ></div>
-      <div
-        ngx-color-coordinates
-        (coordinatesChange)="handleChange($event)"
-        class="shade-container"
-      >
-        <div
-          class="shade-pointer"
-          [style.left.%]="pointerLeft"
-          [style.top.%]="pointerTop"
-        >
+      <div ngx-color-coordinates (coordinatesChange)="handleChange($event)" class="shade-container">
+        <div class="shade-pointer" [style.left.%]="pointerLeft" [style.top.%]="pointerTop">
           <div class="shade-slider" [ngStyle]="pointer"></div>
         </div>
       </div>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".shade,.shade-gradient{position:absolute;inset:0}.shade-container{position:relative;height:100%;margin:0 3px}.shade-pointer{position:absolute}.shade-slider{width:4px;border-radius:1px;height:8px;box-shadow:0 0 2px #0009;background:#fff;margin-top:1px;transform:translate(-2px)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, standalone: false, styles: [".shade,.shade-gradient{position:absolute;inset:0}.shade-container{position:relative;height:100%;margin:0 3px}.shade-pointer{position:absolute}.shade-slider{width:4px;border-radius:1px;height:8px;box-shadow:0 0 2px #0009;background:#fff;margin-top:1px;transform:translate(-2px)}\n"] }]
         }], propDecorators: { hsl: [{
                 type: Input
             }], rgb: [{
@@ -1224,11 +1268,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
                 type: Output
             }] } });
 class ShadeModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ShadeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: ShadeModule, declarations: [ShadeComponent], imports: [CommonModule, CoordinatesModule], exports: [ShadeComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ShadeModule, imports: [CommonModule, CoordinatesModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ShadeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: ShadeModule, declarations: [ShadeComponent], imports: [CommonModule, CoordinatesModule], exports: [ShadeComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ShadeModule, imports: [CommonModule, CoordinatesModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ShadeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ShadeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ShadeComponent],