From 0c4dc2042b9d243e5bd1471c90775420406c07fe Mon Sep 17 00:00:00 2001
From: kwiateusz <kwiateusz@users.noreply.github.com>
Date: Tue, 5 Aug 2025 13:38:47 +0200
Subject: [PATCH 1/3] refactor: migrate into control flow in color picker
 component

---
 .../lib/src/lib/color-picker.component.html   | 163 +++++++++++-------
 .../lib/src/lib/color-picker.component.ts     |  11 +-
 2 files changed, 105 insertions(+), 69 deletions(-)

diff --git a/projects/lib/src/lib/color-picker.component.html b/projects/lib/src/lib/color-picker.component.html
index 1bb9f62..5d033ac 100644
--- a/projects/lib/src/lib/color-picker.component.html
+++ b/projects/lib/src/lib/color-picker.component.html
@@ -1,31 +1,41 @@
 <div #dialogPopup class="color-picker" [class.open]="show" [style.display]="!show ? 'none' : 'block'" [style.visibility]="hidden ? 'hidden' : 'visible'" [style.top.px]="top" [style.left.px]="left" [style.position]="position" [style.height.px]="cpHeight" [style.width.px]="cpWidth" (click)="$event.stopPropagation()">
-  <div *ngIf="cpDialogDisplay === 'popup'" [style.left]="cpArrowPosition" class="arrow arrow-{{cpUsePosition}}" [style.top.px]="arrowTop"></div>
+  @if (cpDialogDisplay === 'popup') {
+    <div [style.left]="cpArrowPosition" class="arrow arrow-{{cpUsePosition}}" [style.top.px]="arrowTop"></div>
+  }
 
-  <div *ngIf="(cpColorMode || 1) === 1" class="saturation-lightness" slider [rgX]="1" [rgY]="1" [style.background-color]="hueSliderColor" (newValue)="onColorChange($event)" (dragStart)="onDragStart('saturation-lightness')" (dragEnd)="onDragEnd('saturation-lightness')">
-    <div class="cursor" [style.top.px]="slider?.v" [style.left.px]="slider?.s"></div>
-  </div>
+  @if ((cpColorMode || 1) === 1) {
+    <div class="saturation-lightness" slider [rgX]="1" [rgY]="1" [style.background-color]="hueSliderColor" (newValue)="onColorChange($event)" (dragStart)="onDragStart('saturation-lightness')" (dragEnd)="onDragEnd('saturation-lightness')">
+      <div class="cursor" [style.top.px]="slider?.v" [style.left.px]="slider?.s"></div>
+    </div>
+  }
 
   <div class="hue-alpha box">
     <div class="left">
       <div class="selected-color-background"></div>
 
       <div class="selected-color" [style.background-color]="selectedColor" [style.cursor]="eyeDropperSupported && cpEyeDropper ? 'pointer' : null" (click)="eyeDropperSupported && cpEyeDropper && onEyeDropper()">
-        <svg *ngIf="eyeDropperSupported && cpEyeDropper" class="eyedropper-icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M17.66 5.41l.92.92-2.69 2.69-.92-.92 2.69-2.69M17.67 3c-.26 0-.51.1-.71.29l-3.12 3.12-1.93-1.91-1.41 1.41 1.42 1.42L3 16.25V21h4.75l8.92-8.92 1.42 1.42 1.41-1.41-1.92-1.92 3.12-3.12c.4-.4.4-1.03.01-1.42l-2.34-2.34c-.2-.19-.45-.29-.7-.29zM6.92 19L5 17.08l8.06-8.06 1.92 1.92L6.92 19z"/></svg>
+        @if (eyeDropperSupported && cpEyeDropper) {
+          <svg class="eyedropper-icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M17.66 5.41l.92.92-2.69 2.69-.92-.92 2.69-2.69M17.67 3c-.26 0-.51.1-.71.29l-3.12 3.12-1.93-1.91-1.41 1.41 1.42 1.42L3 16.25V21h4.75l8.92-8.92 1.42 1.42 1.41-1.41-1.92-1.92 3.12-3.12c.4-.4.4-1.03.01-1.42l-2.34-2.34c-.2-.19-.45-.29-.7-.29zM6.92 19L5 17.08l8.06-8.06 1.92 1.92L6.92 19z"/></svg>
+        }
       </div>
 
-      <button *ngIf="cpAddColorButton" type="button" class="{{cpAddColorButtonClass}}" [disabled]="cpPresetColors && cpPresetColors.length >= cpMaxPresetColorsLength" (click)="onAddPresetColor($event, selectedColor)">
-        {{cpAddColorButtonText}}
-      </button>
+      @if (cpAddColorButton) {
+        <button type="button" class="{{cpAddColorButtonClass}}" [disabled]="cpPresetColors && cpPresetColors.length >= cpMaxPresetColorsLength" (click)="onAddPresetColor($event, selectedColor)">
+          {{cpAddColorButtonText}}
+        </button>
+      }
     </div>
 
     <div class="right">
-      <div *ngIf="cpAlphaChannel==='disabled'" style="height: 16px;"></div>
+      @if (cpAlphaChannel === 'disabled') {
+        <div style="height: 16px;"></div>
+      }
 
-      <div #hueSlider class="hue" slider [rgX]="1" [style.display]="(cpColorMode || 1) === 1 ? 'block' : 'none'" (newValue)="onHueChange($event)" (dragStart)="onDragStart('hue')" (dragEnd)="onDragEnd('hue')">
+      <div #hueSlider class="hue" slider [rgX]="1" [style.display]="(cpColorMode || 1) === 1 ? 'block' : 'none'" (newValue)="onHueChange($event)" (dragStart)="onDragStart('hue')" (dragEnd)="onDragEnd('hue')">
         <div class="cursor" [style.left.px]="slider?.h"></div>
       </div>
 
-      <div #valueSlider class="value" slider [rgX]="1" [style.display]="(cpColorMode || 1) === 2 ? 'block': 'none'" (newValue)="onValueChange($event)" (dragStart)="onDragStart('value')" (dragEnd)="onDragEnd('value')">
+      <div #valueSlider class="value" slider [rgX]="1" [style.display]="(cpColorMode || 1) === 2 ? 'block': 'none'" (newValue)="onValueChange($event)" (dragStart)="onDragStart('value')" (dragEnd)="onDragEnd('value')">
         <div class="cursor" [style.right.px]="slider?.v"></div>
       </div>
 
@@ -35,96 +45,129 @@
     </div>
   </div>
 
-  <div *ngIf="!cpDisableInput && (cpColorMode || 1) === 1" class="cmyk-text" [style.display]="format !== 3 ? 'none' : 'block'">
-    <div class="box">
-      <input type="number" pattern="[0-9]*" min="0" max="100" [text] [rg]="100" [value]="cmykText?.c" (keyup.enter)="onAcceptColor($event)" (newValue)="onCyanInput($event)" />
-      <input type="number" pattern="[0-9]*" min="0" max="100" [text] [rg]="100" [value]="cmykText?.m" (keyup.enter)="onAcceptColor($event)" (newValue)="onMagentaInput($event)" />
-      <input type="number" pattern="[0-9]*" min="0" max="100" [text] [rg]="100" [value]="cmykText?.y" (keyup.enter)="onAcceptColor($event)" (newValue)="onYellowInput($event)" />
-      <input type="number" pattern="[0-9]*" min="0" max="100" [text] [rg]="100" [value]="cmykText?.k" (keyup.enter)="onAcceptColor($event)" (newValue)="onBlackInput($event)" />
-      <input *ngIf="cpAlphaChannel!=='disabled'" type="number" pattern="[0-9]+([\.,][0-9]{1,2})?" min="0" max="1" step="0.1" [text] [rg]="1" [value]="cmykText?.a" (keyup.enter)="onAcceptColor($event)" (newValue)="onAlphaInput($event)" />
-    </div>
-
-     <div class="box">
-      <div>C</div><div>M</div><div>Y</div><div>K</div><div *ngIf="cpAlphaChannel!=='disabled'" >A</div>
+  @if (!cpDisableInput && (cpColorMode || 1) === 1) {
+    <div class="cmyk-text" [style.display]="format !== 3 ? 'none' : 'block'">
+      <div class="box">
+        <input type="number" pattern="[0-9]*" min="0" max="100" [text] [rg]="100" [value]="cmykText?.c" (keyup.enter)="onAcceptColor($event)" (newValue)="onCyanInput($event)" />
+        <input type="number" pattern="[0-9]*" min="0" max="100" [text] [rg]="100" [value]="cmykText?.m" (keyup.enter)="onAcceptColor($event)" (newValue)="onMagentaInput($event)" />
+        <input type="number" pattern="[0-9]*" min="0" max="100" [text] [rg]="100" [value]="cmykText?.y" (keyup.enter)="onAcceptColor($event)" (newValue)="onYellowInput($event)" />
+        <input type="number" pattern="[0-9]*" min="0" max="100" [text] [rg]="100" [value]="cmykText?.k" (keyup.enter)="onAcceptColor($event)" (newValue)="onBlackInput($event)" />
+        @if (cpAlphaChannel !== 'disabled') {
+          <input type="number" pattern="[0-9]+([\.,][0-9]{1,2})?" min="0" max="1" step="0.1" [text] [rg]="1" [value]="cmykText?.a" (keyup.enter)="onAcceptColor($event)" (newValue)="onAlphaInput($event)" />
+        }
+      </div>
+      <div class="box">
+        <div>C</div><div>M</div><div>Y</div><div>K</div>@if (cpAlphaChannel!=='disabled') { <div >A</div> }
     </div>
   </div>
+}
 
-  <div *ngIf="!cpDisableInput && (cpColorMode || 1) === 1 " class="hsla-text" [style.display]="format !== 2 ? 'none' : 'block'">
+@if (!cpDisableInput && (cpColorMode || 1) === 1 ) {
+  <div class="hsla-text" [style.display]="format !== 2 ? 'none' : 'block'">
     <div class="box">
       <input type="number" pattern="[0-9]*" min="0" max="360" [text] [rg]="360" [value]="hslaText?.h" (keyup.enter)="onAcceptColor($event)" (newValue)="onHueInput($event)" />
       <input type="number" pattern="[0-9]*" min="0" max="100" [text] [rg]="100" [value]="hslaText?.s" (keyup.enter)="onAcceptColor($event)" (newValue)="onSaturationInput($event)" />
       <input type="number" pattern="[0-9]*" min="0" max="100" [text] [rg]="100" [value]="hslaText?.l" (keyup.enter)="onAcceptColor($event)" (newValue)="onLightnessInput($event)" />
-      <input *ngIf="cpAlphaChannel!=='disabled'" type="number" pattern="[0-9]+([\.,][0-9]{1,2})?" min="0" max="1" step="0.1" [text] [rg]="1" [value]="hslaText?.a" (keyup.enter)="onAcceptColor($event)" (newValue)="onAlphaInput($event)" />
+      @if (cpAlphaChannel !== 'disabled') {
+        <input type="number" pattern="[0-9]+([\.,][0-9]{1,2})?" min="0" max="1" step="0.1" [text] [rg]="1" [value]="hslaText?.a" (keyup.enter)="onAcceptColor($event)" (newValue)="onAlphaInput($event)" />
+      }
     </div>
-
     <div class="box">
-      <div>H</div><div>S</div><div>L</div><div *ngIf="cpAlphaChannel!=='disabled'">A</div>
-    </div>
+      <div>H</div><div>S</div><div>L</div>@if (cpAlphaChannel !== 'disabled') { <div>A</div> }
   </div>
+</div>
+}
 
-  <div *ngIf="!cpDisableInput && (cpColorMode || 1) === 1 " [style.display]="format !== 1 ? 'none' : 'block'" class="rgba-text">
+@if (!cpDisableInput && (cpColorMode || 1) === 1 ) {
+  <div [style.display]="format !== 1 ? 'none' : 'block'" class="rgba-text">
     <div class="box">
       <input type="number" pattern="[0-9]*" min="0" max="255" [text] [rg]="255" [value]="rgbaText?.r" (keyup.enter)="onAcceptColor($event)" (newValue)="onRedInput($event)" />
       <input type="number" pattern="[0-9]*" min="0" max="255" [text] [rg]="255" [value]="rgbaText?.g" (keyup.enter)="onAcceptColor($event)" (newValue)="onGreenInput($event)" />
       <input type="number" pattern="[0-9]*" min="0" max="255" [text] [rg]="255" [value]="rgbaText?.b" (keyup.enter)="onAcceptColor($event)" (newValue)="onBlueInput($event)" />
-      <input *ngIf="cpAlphaChannel!=='disabled'" type="number" pattern="[0-9]+([\.,][0-9]{1,2})?" min="0" max="1" step="0.1" [text] [rg]="1" [value]="rgbaText?.a" (keyup.enter)="onAcceptColor($event)" (newValue)="onAlphaInput($event)" />
+      @if (cpAlphaChannel !== 'disabled') {
+        <input type="number" pattern="[0-9]+([\.,][0-9]{1,2})?" min="0" max="1" step="0.1" [text] [rg]="1" [value]="rgbaText?.a" (keyup.enter)="onAcceptColor($event)" (newValue)="onAlphaInput($event)" />
+      }
     </div>
-
     <div class="box">
-      <div>R</div><div>G</div><div>B</div><div *ngIf="cpAlphaChannel!=='disabled'" >A</div>
-    </div>
+      <div>R</div><div>G</div><div>B</div>@if (cpAlphaChannel !== 'disabled') { <div >A</div> }
   </div>
+</div>
+}
 
-  <div *ngIf="!cpDisableInput && (cpColorMode || 1) === 1" class="hex-text" [class.hex-alpha]="cpAlphaChannel==='forced'"
+@if (!cpDisableInput && (cpColorMode || 1) === 1) {
+  <div class="hex-text" [class.hex-alpha]="cpAlphaChannel === 'forced'"
     [style.display]="format !== 0 ? 'none' : 'block'">
     <div class="box">
       <input [text] [value]="hexText" (blur)="onHexInput(null)" (keyup.enter)="onAcceptColor($event)" (newValue)="onHexInput($event)"/>
-      <input *ngIf="cpAlphaChannel==='forced'" type="number" pattern="[0-9]+([\.,][0-9]{1,2})?" min="0" max="1" step="0.1" [text] [rg]="1" [value]="hexAlpha" (keyup.enter)="onAcceptColor($event)" (newValue)="onAlphaInput($event)"/>
+      @if (cpAlphaChannel === 'forced') {
+        <input type="number" pattern="[0-9]+([\.,][0-9]{1,2})?" min="0" max="1" step="0.1" [text] [rg]="1" [value]="hexAlpha" (keyup.enter)="onAcceptColor($event)" (newValue)="onAlphaInput($event)"/>
+      }
     </div>
-
     <div class="box">
       <div>Hex</div>
-      <div *ngIf="cpAlphaChannel==='forced'">A</div>
+      @if (cpAlphaChannel === 'forced') {
+        <div>A</div>
+      }
     </div>
   </div>
+}
 
-  <div *ngIf="!cpDisableInput && (cpColorMode || 1) === 2" class="value-text">
+@if (!cpDisableInput && (cpColorMode || 1) === 2) {
+  <div class="value-text">
     <div class="box">
       <input type="number" pattern="[0-9]*" min="0" max="100" [text] [rg]="100" [value]="hslaText?.l" (keyup.enter)="onAcceptColor($event)" (newValue)="onValueInput($event)" />
-      <input *ngIf="cpAlphaChannel!=='disabled'" type="number" pattern="[0-9]+([\.,][0-9]{1,2})?" min="0" max="1" step="0.1"  [text] [rg]="1" [value]="hslaText?.a" (keyup.enter)="onAcceptColor($event)" (newValue)="onAlphaInput($event)" />
+      @if (cpAlphaChannel !== 'disabled') {
+        <input type="number" pattern="[0-9]+([\.,][0-9]{1,2})?" min="0" max="1" step="0.1"  [text] [rg]="1" [value]="hslaText?.a" (keyup.enter)="onAcceptColor($event)" (newValue)="onAlphaInput($event)" />
+      }
     </div>
-
     <div class="box">
       <div>V</div><div>A</div>
     </div>
   </div>
+}
 
-  <div *ngIf="!cpDisableInput && (cpColorMode || 1) === 1" class="type-policy">
+@if (!cpDisableInput && (cpColorMode || 1) === 1) {
+  <div class="type-policy">
     <span class="type-policy-arrow" (click)="onFormatToggle(-1)"></span>
     <span class="type-policy-arrow" (click)="onFormatToggle(1)"></span>
   </div>
+}
 
-  <div *ngIf="cpPresetColors?.length || cpAddColorButton" class="preset-area">
+@if (cpPresetColors?.length || cpAddColorButton) {
+  <div class="preset-area">
     <hr>
-
-    <div class="preset-label">{{cpPresetLabel}}</div>
-
-    <div *ngIf="cpPresetColors?.length" class="{{cpPresetColorsClass}}">
-      <div *ngFor="let color of cpPresetColors" class="preset-color" [style.backgroundColor]="color" (click)="setColorFromString(color)">
-        <span *ngIf="cpAddColorButton" class="{{cpRemoveColorButtonClass}}" (click)="onRemovePresetColor($event, color)"></span>
-      </div>
+      <div class="preset-label">{{cpPresetLabel}}</div>
+      @if (cpPresetColors?.length) {
+        <div class="{{cpPresetColorsClass}}">
+          @for (color of cpPresetColors; track color) {
+            <div class="preset-color" [style.backgroundColor]="color" (click)="setColorFromString(color)">
+              @if (cpAddColorButton) {
+                <span class="{{cpRemoveColorButtonClass}}" (click)="onRemovePresetColor($event, color)"></span>
+              }
+            </div>
+          }
+        </div>
+      }
+      @if (!cpPresetColors?.length && cpAddColorButton) {
+        <div class="{{cpPresetEmptyMessageClass}}">{{cpPresetEmptyMessage}}</div>
+      }
     </div>
+  }
+
+  @if (cpOKButton || cpCancelButton) {
+    <div class="button-area">
+      @if (cpCancelButton) {
+        <button type="button" class="{{cpCancelButtonClass}}" (click)="onCancelColor($event)">{{cpCancelButtonText}}</button>
+      }
+      @if (cpOKButton) {
+        <button type="button" class="{{cpOKButtonClass}}" (click)="onAcceptColor($event)">{{cpOKButtonText}}</button>
+      }
+    </div>
+  }
 
-    <div *ngIf="!cpPresetColors?.length && cpAddColorButton" class="{{cpPresetEmptyMessageClass}}">{{cpPresetEmptyMessage}}</div>
-  </div>
-
-  <div *ngIf="cpOKButton || cpCancelButton" class="button-area">
-    <button *ngIf="cpCancelButton" type="button" class="{{cpCancelButtonClass}}" (click)="onCancelColor($event)">{{cpCancelButtonText}}</button>
-
-    <button *ngIf="cpOKButton" type="button" class="{{cpOKButtonClass}}" (click)="onAcceptColor($event)">{{cpOKButtonText}}</button>
-  </div>
-
-  <div class="extra-template" *ngIf="cpExtraTemplate">
-    <ng-container *ngTemplateOutlet="cpExtraTemplate"></ng-container>
-  </div>
+  @if (cpExtraTemplate) {
+    <div class="extra-template">
+      <ng-container *ngTemplateOutlet="cpExtraTemplate"/>
+    </div>
+  }
 </div>
diff --git a/projects/lib/src/lib/color-picker.component.ts b/projects/lib/src/lib/color-picker.component.ts
index 14dcc6f..c2502fa 100644
--- a/projects/lib/src/lib/color-picker.component.ts
+++ b/projects/lib/src/lib/color-picker.component.ts
@@ -13,14 +13,7 @@ import {
   PLATFORM_ID,
   inject,
 } from '@angular/core'
-
-import {
-  DOCUMENT,
-  isPlatformBrowser,
-  NgForOf,
-  NgIf,
-  NgTemplateOutlet,
-} from '@angular/common'
+import { DOCUMENT, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 
 import {
   calculateAutoPositioning,
@@ -47,7 +40,7 @@ const SUPPORTS_TOUCH = typeof window !== 'undefined' && 'ontouchstart' in window
   templateUrl: './color-picker.component.html',
   styleUrls: ['./color-picker.component.css'],
   encapsulation: ViewEncapsulation.None,
-  imports: [SliderDirective, TextDirective, NgIf, NgForOf, NgTemplateOutlet],
+  imports: [SliderDirective, TextDirective, NgTemplateOutlet],
 })
 export class ColorPickerComponent implements OnInit, OnDestroy, AfterViewInit {
   private ngZone = inject(NgZone)

From 24a483e282d3199d5bd477909bfd00ea333764eb Mon Sep 17 00:00:00 2001
From: kwiateusz <kwiateusz@users.noreply.github.com>
Date: Tue, 5 Aug 2025 13:40:42 +0200
Subject: [PATCH 2/3] chore: remove unused watch dependency

---
 package-lock.json | 91 ++++++++---------------------------------------
 package.json      |  3 +-
 2 files changed, 16 insertions(+), 78 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 289715d..5c72ccd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,8 +42,7 @@
         "stylelint-order": "^6.0.0",
         "terser": "^5.43.0",
         "tslib": "^2.8.0",
-        "typescript": "~5.8.0",
-        "watch": "^1.0.0"
+        "typescript": "~5.8.0"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -8167,16 +8166,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/cpx/node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
     "node_modules/cpx/node_modules/to-regex-range": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
@@ -9159,16 +9148,6 @@
         "node": ">=0.8.x"
       }
     },
-    "node_modules/exec-sh": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/exec-sh/-/exec-sh-0.2.2.tgz",
-      "integrity": "sha512-FIUCJz1RbuS0FKTdaAafAByGS0CPvU3R0MeHxgtl+djzCc//F8HakL8GzmVNZanasTbTAY/3DRFA0KpVqj/eAw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "merge": "^1.2.0"
-      }
-    },
     "node_modules/expand-brackets": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz",
@@ -10347,16 +10326,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/hpack.js/node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
     "node_modules/html-tags": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
@@ -11144,9 +11113,9 @@
       "license": "MIT"
     },
     "node_modules/jsesc": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
-      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
+      "integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -11892,13 +11861,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/merge": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/merge/-/merge-1.2.1.tgz",
-      "integrity": "sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/merge-descriptors": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
@@ -14195,19 +14157,6 @@
         "regjsparser": "bin/parser"
       }
     },
-    "node_modules/regjsparser/node_modules/jsesc": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
-      "integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "jsesc": "bin/jsesc"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
@@ -15657,15 +15606,22 @@
       }
     },
     "node_modules/string_decoder": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "safe-buffer": "~5.2.0"
+        "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/string_decoder/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/string-width": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
@@ -17118,23 +17074,6 @@
         }
       }
     },
-    "node_modules/watch": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/watch/-/watch-1.0.2.tgz",
-      "integrity": "sha512-1u+Z5n9Jc1E2c7qDO8SinPoZuHj7FgbgU1olSFoyaklduDvvtX7GMMtlE6OC9FTXq4KvNAOfj6Zu4vI1e9bAKA==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "exec-sh": "^0.2.0",
-        "minimist": "^1.2.0"
-      },
-      "bin": {
-        "watch": "cli.js"
-      },
-      "engines": {
-        "node": ">=0.1.95"
-      }
-    },
     "node_modules/watchpack": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz",
diff --git a/package.json b/package.json
index 90c7cef..d29d1c2 100644
--- a/package.json
+++ b/package.json
@@ -66,7 +66,6 @@
     "stylelint-order": "^6.0.0",
     "terser": "^5.43.0",
     "tslib": "^2.8.0",
-    "typescript": "~5.8.0",
-    "watch": "^1.0.0"
+    "typescript": "~5.8.0"
   }
 }

From ca725051497e33c4a3509cd7cbbd06b48d1e8acc Mon Sep 17 00:00:00 2001
From: kwiateusz <kwiateusz@users.noreply.github.com>
Date: Tue, 5 Aug 2025 13:44:12 +0200
Subject: [PATCH 3/3] refactor: update input attributes in text directive

---
 .../lib/src/lib/color-picker.component.html   | 34 +++++++++----------
 projects/lib/src/lib/helpers.ts               |  2 --
 2 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/projects/lib/src/lib/color-picker.component.html b/projects/lib/src/lib/color-picker.component.html
index 5d033ac..5270c23 100644
--- a/projects/lib/src/lib/color-picker.component.html
+++ b/projects/lib/src/lib/color-picker.component.html
@@ -48,12 +48,12 @@
   @if (!cpDisableInput && (cpColorMode || 1) === 1) {
     <div class="cmyk-text" [style.display]="format !== 3 ? 'none' : 'block'">
       <div class="box">
-        <input type="number" pattern="[0-9]*" min="0" max="100" [text] [rg]="100" [value]="cmykText?.c" (keyup.enter)="onAcceptColor($event)" (newValue)="onCyanInput($event)" />
-        <input type="number" pattern="[0-9]*" min="0" max="100" [text] [rg]="100" [value]="cmykText?.m" (keyup.enter)="onAcceptColor($event)" (newValue)="onMagentaInput($event)" />
-        <input type="number" pattern="[0-9]*" min="0" max="100" [text] [rg]="100" [value]="cmykText?.y" (keyup.enter)="onAcceptColor($event)" (newValue)="onYellowInput($event)" />
-        <input type="number" pattern="[0-9]*" min="0" max="100" [text] [rg]="100" [value]="cmykText?.k" (keyup.enter)="onAcceptColor($event)" (newValue)="onBlackInput($event)" />
+        <input type="number" pattern="[0-9]*" min="0" max="100" text [rg]="100" [value]="cmykText?.c" (keyup.enter)="onAcceptColor($event)" (newValue)="onCyanInput($event)" />
+        <input type="number" pattern="[0-9]*" min="0" max="100" text [rg]="100" [value]="cmykText?.m" (keyup.enter)="onAcceptColor($event)" (newValue)="onMagentaInput($event)" />
+        <input type="number" pattern="[0-9]*" min="0" max="100" text [rg]="100" [value]="cmykText?.y" (keyup.enter)="onAcceptColor($event)" (newValue)="onYellowInput($event)" />
+        <input type="number" pattern="[0-9]*" min="0" max="100" text [rg]="100" [value]="cmykText?.k" (keyup.enter)="onAcceptColor($event)" (newValue)="onBlackInput($event)" />
         @if (cpAlphaChannel !== 'disabled') {
-          <input type="number" pattern="[0-9]+([\.,][0-9]{1,2})?" min="0" max="1" step="0.1" [text] [rg]="1" [value]="cmykText?.a" (keyup.enter)="onAcceptColor($event)" (newValue)="onAlphaInput($event)" />
+          <input type="number" pattern="[0-9]+([\.,][0-9]{1,2})?" min="0" max="1" step="0.1" text [rg]="1" [value]="cmykText?.a" (keyup.enter)="onAcceptColor($event)" (newValue)="onAlphaInput($event)" />
         }
       </div>
       <div class="box">
@@ -65,11 +65,11 @@
 @if (!cpDisableInput && (cpColorMode || 1) === 1 ) {
   <div class="hsla-text" [style.display]="format !== 2 ? 'none' : 'block'">
     <div class="box">
-      <input type="number" pattern="[0-9]*" min="0" max="360" [text] [rg]="360" [value]="hslaText?.h" (keyup.enter)="onAcceptColor($event)" (newValue)="onHueInput($event)" />
-      <input type="number" pattern="[0-9]*" min="0" max="100" [text] [rg]="100" [value]="hslaText?.s" (keyup.enter)="onAcceptColor($event)" (newValue)="onSaturationInput($event)" />
-      <input type="number" pattern="[0-9]*" min="0" max="100" [text] [rg]="100" [value]="hslaText?.l" (keyup.enter)="onAcceptColor($event)" (newValue)="onLightnessInput($event)" />
+      <input type="number" pattern="[0-9]*" min="0" max="360" text [rg]="360" [value]="hslaText?.h" (keyup.enter)="onAcceptColor($event)" (newValue)="onHueInput($event)" />
+      <input type="number" pattern="[0-9]*" min="0" max="100" text [rg]="100" [value]="hslaText?.s" (keyup.enter)="onAcceptColor($event)" (newValue)="onSaturationInput($event)" />
+      <input type="number" pattern="[0-9]*" min="0" max="100" text [rg]="100" [value]="hslaText?.l" (keyup.enter)="onAcceptColor($event)" (newValue)="onLightnessInput($event)" />
       @if (cpAlphaChannel !== 'disabled') {
-        <input type="number" pattern="[0-9]+([\.,][0-9]{1,2})?" min="0" max="1" step="0.1" [text] [rg]="1" [value]="hslaText?.a" (keyup.enter)="onAcceptColor($event)" (newValue)="onAlphaInput($event)" />
+        <input type="number" pattern="[0-9]+([\.,][0-9]{1,2})?" min="0" max="1" step="0.1" text [rg]="1" [value]="hslaText?.a" (keyup.enter)="onAcceptColor($event)" (newValue)="onAlphaInput($event)" />
       }
     </div>
     <div class="box">
@@ -81,11 +81,11 @@
 @if (!cpDisableInput && (cpColorMode || 1) === 1 ) {
   <div [style.display]="format !== 1 ? 'none' : 'block'" class="rgba-text">
     <div class="box">
-      <input type="number" pattern="[0-9]*" min="0" max="255" [text] [rg]="255" [value]="rgbaText?.r" (keyup.enter)="onAcceptColor($event)" (newValue)="onRedInput($event)" />
-      <input type="number" pattern="[0-9]*" min="0" max="255" [text] [rg]="255" [value]="rgbaText?.g" (keyup.enter)="onAcceptColor($event)" (newValue)="onGreenInput($event)" />
-      <input type="number" pattern="[0-9]*" min="0" max="255" [text] [rg]="255" [value]="rgbaText?.b" (keyup.enter)="onAcceptColor($event)" (newValue)="onBlueInput($event)" />
+      <input type="number" pattern="[0-9]*" min="0" max="255" text [rg]="255" [value]="rgbaText?.r" (keyup.enter)="onAcceptColor($event)" (newValue)="onRedInput($event)" />
+      <input type="number" pattern="[0-9]*" min="0" max="255" text [rg]="255" [value]="rgbaText?.g" (keyup.enter)="onAcceptColor($event)" (newValue)="onGreenInput($event)" />
+      <input type="number" pattern="[0-9]*" min="0" max="255" text [rg]="255" [value]="rgbaText?.b" (keyup.enter)="onAcceptColor($event)" (newValue)="onBlueInput($event)" />
       @if (cpAlphaChannel !== 'disabled') {
-        <input type="number" pattern="[0-9]+([\.,][0-9]{1,2})?" min="0" max="1" step="0.1" [text] [rg]="1" [value]="rgbaText?.a" (keyup.enter)="onAcceptColor($event)" (newValue)="onAlphaInput($event)" />
+        <input type="number" pattern="[0-9]+([\.,][0-9]{1,2})?" min="0" max="1" step="0.1" text [rg]="1" [value]="rgbaText?.a" (keyup.enter)="onAcceptColor($event)" (newValue)="onAlphaInput($event)" />
       }
     </div>
     <div class="box">
@@ -98,9 +98,9 @@
   <div class="hex-text" [class.hex-alpha]="cpAlphaChannel === 'forced'"
     [style.display]="format !== 0 ? 'none' : 'block'">
     <div class="box">
-      <input [text] [value]="hexText" (blur)="onHexInput(null)" (keyup.enter)="onAcceptColor($event)" (newValue)="onHexInput($event)"/>
+      <input text [value]="hexText" (blur)="onHexInput(null)" (keyup.enter)="onAcceptColor($event)" (newValue)="onHexInput($event)"/>
       @if (cpAlphaChannel === 'forced') {
-        <input type="number" pattern="[0-9]+([\.,][0-9]{1,2})?" min="0" max="1" step="0.1" [text] [rg]="1" [value]="hexAlpha" (keyup.enter)="onAcceptColor($event)" (newValue)="onAlphaInput($event)"/>
+        <input type="number" pattern="[0-9]+([\.,][0-9]{1,2})?" min="0" max="1" step="0.1" text [rg]="1" [value]="hexAlpha" (keyup.enter)="onAcceptColor($event)" (newValue)="onAlphaInput($event)"/>
       }
     </div>
     <div class="box">
@@ -115,9 +115,9 @@
 @if (!cpDisableInput && (cpColorMode || 1) === 2) {
   <div class="value-text">
     <div class="box">
-      <input type="number" pattern="[0-9]*" min="0" max="100" [text] [rg]="100" [value]="hslaText?.l" (keyup.enter)="onAcceptColor($event)" (newValue)="onValueInput($event)" />
+      <input type="number" pattern="[0-9]*" min="0" max="100" text [rg]="100" [value]="hslaText?.l" (keyup.enter)="onAcceptColor($event)" (newValue)="onValueInput($event)" />
       @if (cpAlphaChannel !== 'disabled') {
-        <input type="number" pattern="[0-9]+([\.,][0-9]{1,2})?" min="0" max="1" step="0.1"  [text] [rg]="1" [value]="hslaText?.a" (keyup.enter)="onAcceptColor($event)" (newValue)="onAlphaInput($event)" />
+        <input type="number" pattern="[0-9]+([\.,][0-9]{1,2})?" min="0" max="1" step="0.1"  text [rg]="1" [value]="hslaText?.a" (keyup.enter)="onAcceptColor($event)" (newValue)="onAlphaInput($event)" />
       }
     </div>
     <div class="box">
diff --git a/projects/lib/src/lib/helpers.ts b/projects/lib/src/lib/helpers.ts
index 4e99a48..12cdcab 100644
--- a/projects/lib/src/lib/helpers.ts
+++ b/projects/lib/src/lib/helpers.ts
@@ -110,8 +110,6 @@ export function calculateAutoPositioning(
 })
 export class TextDirective {
   @Input() rg: number
-  @Input() text: any
-
   @Output() newValue = new EventEmitter<any>()
 
   @HostListener('input', ['$event']) inputChange(event: any): void {