From 5bf5a3bf81c051c38e78adb5f9d93ce4af308b80 Mon Sep 17 00:00:00 2001
From: navedqb <109583873+navedqb@users.noreply.github.com>
Date: Thu, 8 Aug 2024 12:15:50 +0530
Subject: [PATCH] opens colorpicker on label click

---
 src/app/showcase/doc/colorpicker/formatdoc.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/showcase/doc/colorpicker/formatdoc.ts b/src/app/showcase/doc/colorpicker/formatdoc.ts
index 5d1740b09e9..33ea87fa8c8 100644
--- a/src/app/showcase/doc/colorpicker/formatdoc.ts
+++ b/src/app/showcase/doc/colorpicker/formatdoc.ts
@@ -10,17 +10,17 @@ import { Code } from '@domain/code';
         <div class="card flex flex-wrap gap-3">
             <div class="flex-1 flex flex-column align-items-center gap-3">
                 <label for="cp-hex" class="font-bold block mb-2"> HEX </label>
-                <p-colorPicker [(ngModel)]="color" />
+                <p-colorPicker [(ngModel)]="color" inputId="cp-hex" />
                 <span>{{ color }}</span>
             </div>
             <div class="flex-1 flex flex-column align-items-center gap-3">
                 <label for="cp-rgb" class="font-bold block mb-2"> RGB </label>
-                <p-colorPicker [(ngModel)]="colorRGB" format="rgb" />
+                <p-colorPicker [(ngModel)]="colorRGB" format="rgb" inputId="cp-rgb" />
                 <span>{{ 'r:' + colorRGB.r + ' g:' + colorRGB.g + ' b:' + colorRGB.b }}</span>
             </div>
             <div class="flex-1 flex flex-column align-items-center gap-3">
                 <label for="cp-hsb" class="font-bold block mb-2"> HSB </label>
-                <p-colorPicker [(ngModel)]="colorHSB" format="hsb" />
+                <p-colorPicker [(ngModel)]="colorHSB" format="hsb" inputId="cp-hsb" />
                 <span>{{ 'h:' + colorHSB.h + ' s:' + colorHSB.s + ' b:' + colorHSB.b }}</span>
             </div>
         </div>