From d609b386fe72e65335f853f9de0da0d4c9d8746e Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 2 Oct 2025 21:29:59 -0700
Subject: [PATCH] Enhancement: open color picker on swatch button click
 (#10994)

---
 .../app/components/common/input/color/color.component.html | 7 +++----
 .../components/common/input/color/color.component.spec.ts  | 4 ++--
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src-ui/src/app/components/common/input/color/color.component.html b/src-ui/src/app/components/common/input/color/color.component.html
index abc4e69eb..6531c70ad 100644
--- a/src-ui/src/app/components/common/input/color/color.component.html
+++ b/src-ui/src/app/components/common/input/color/color.component.html
@@ -1,19 +1,18 @@
 <div class="mb-3">
   @if (title) {
-    <label [for]="inputId">{{title}}</label>
+    <label class="form-label" [for]="inputId">{{title}}</label>
   }
 
   <div class="input-group" [class.is-invalid]="error">
-    <span class="input-group-text" [style.background-color]="value">&nbsp;&nbsp;&nbsp;</span>
+    <button type="button" class="input-group-text" [style.background-color]="value" (click)="colorPicker.toggle()">&nbsp;&nbsp;&nbsp;</button>
 
     <ng-template #popContent>
       <div style="min-width: 200px;" class="pb-3">
         <color-slider [color]="value" (onChangeComplete)="colorChanged($event.color.hex)"></color-slider>
       </div>
-
     </ng-template>
 
-    <input #inputField class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [autoClose]="'outside'" [ngbPopover]="popContent" placement="bottom" popoverClass="shadow">
+    <input #inputField class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [autoClose]="'outside'" [ngbPopover]="popContent" #colorPicker="ngbPopover" placement="bottom" popoverClass="shadow">
 
     <button class="btn btn-outline-secondary" type="button" (click)="randomize()">
       <i-bs name="dice5"></i-bs>
diff --git a/src-ui/src/app/components/common/input/color/color.component.spec.ts b/src-ui/src/app/components/common/input/color/color.component.spec.ts
index cbe53a0c3..427a87873 100644
--- a/src-ui/src/app/components/common/input/color/color.component.spec.ts
+++ b/src-ui/src/app/components/common/input/color/color.component.spec.ts
@@ -42,8 +42,8 @@ describe('ColorComponent', () => {
   })
 
   it('should set swatch color', () => {
-    const swatch: HTMLSpanElement = fixture.nativeElement.querySelector(
-      'span.input-group-text'
+    const swatch: HTMLButtonElement = fixture.nativeElement.querySelector(
+      'button.input-group-text'
     )
     expect(swatch.style.backgroundColor).toEqual('')
     component.value = '#ff0000'