fix: Implement working color picker with Angular

  Material integration

  - Add ViewContainerRef to AppComponent for ngx-color-picker root container support
  - Replace color picker input integration with proper button-based triggers
  - Fix layout shift issue by adding permanent scrollbar
  - Add button spacing using fxLayoutGap for better UX

Author: t-ho

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ViewContainerRef } from '@angular/core';
 
 import { DemoService } from './demo.service';
 
@@ -11,5 +11,8 @@ export class AppComponent {
   /**
    * Constructor
    */
-  constructor(public demoService: DemoService) {}
+  constructor(
+    public demoService: DemoService,
+    public vcRef: ViewContainerRef
+  ) {}
 }

src/app/master-configuration/master-configuration.component.html

@@ -32,17 +32,26 @@
     >
       <mat-form-field>
         <input
-          [(colorPicker)]="demoService.config.fgsColor"
           matInput
           placeholder="Foreground Spinner Color (fgsColor)"
           [(ngModel)]="demoService.config.fgsColor"
+          readonly
         />
-        <mat-icon
+        <button
+          mat-icon-button
           matSuffix
-          [style.color]="demoService.config.fgsColor"
-          fontIcon="mdi-palette"
-          fontSet="mdi"
-        ></mat-icon>
+          [(colorPicker)]="demoService.config.fgsColor"
+          [cpPosition]="'bottom'"
+          [cpUseRootViewContainer]="true"
+          (click)="$event.stopPropagation()"
+          type="button"
+        >
+          <mat-icon
+            [style.color]="demoService.config.fgsColor"
+            fontIcon="mdi-palette"
+            fontSet="mdi"
+          ></mat-icon>
+        </button>
       </mat-form-field>
 
       <mat-form-field>
@@ -95,18 +104,27 @@
 
       <mat-form-field>
         <input
-          [(colorPicker)]="demoService.config.overlayColor"
-          cpOutputFormat="rgba"
           matInput
           placeholder="Overlay Color (overlayColor)"
           [(ngModel)]="demoService.config.overlayColor"
+          readonly
         />
-        <mat-icon
+        <button
+          mat-icon-button
           matSuffix
-          [style.color]="demoService.config.overlayColor"
-          fontIcon="mdi-palette"
-          fontSet="mdi"
-        ></mat-icon>
+          [(colorPicker)]="demoService.config.overlayColor"
+          cpOutputFormat="rgba"
+          [cpPosition]="'bottom'"
+          [cpUseRootViewContainer]="true"
+          (click)="$event.stopPropagation()"
+          type="button"
+        >
+          <mat-icon
+            [style.color]="demoService.config.overlayColor"
+            fontIcon="mdi-palette"
+            fontSet="mdi"
+          ></mat-icon>
+        </button>
       </mat-form-field>
 
       <div style="margin-top: 21px; margin-bottom: 20px">
@@ -119,17 +137,26 @@
 
       <mat-form-field *ngIf="demoService.config.hasProgressBar">
         <input
-          [(colorPicker)]="demoService.config.pbColor"
           matInput
           placeholder="Progress Bar Color (pbColor)"
           [(ngModel)]="demoService.config.pbColor"
+          readonly
         />
-        <mat-icon
+        <button
+          mat-icon-button
           matSuffix
-          [style.color]="demoService.config.pbColor"
-          fontIcon="mdi-palette"
-          fontSet="mdi"
-        ></mat-icon>
+          [(colorPicker)]="demoService.config.pbColor"
+          [cpPosition]="'bottom'"
+          [cpUseRootViewContainer]="true"
+          (click)="$event.stopPropagation()"
+          type="button"
+        >
+          <mat-icon
+            [style.color]="demoService.config.pbColor"
+            fontIcon="mdi-palette"
+            fontSet="mdi"
+          ></mat-icon>
+        </button>
       </mat-form-field>
 
       <div style="margin-top: 21px; margin-bottom: 20px">
@@ -176,17 +203,26 @@
     >
       <mat-form-field>
         <input
-          [(colorPicker)]="demoService.config.bgsColor"
           matInput
           placeholder="Background Spinner Color (bgsColor)"
           [(ngModel)]="demoService.config.bgsColor"
+          readonly
         />
-        <mat-icon
+        <button
+          mat-icon-button
           matSuffix
-          [style.color]="demoService.config.bgsColor"
-          fontIcon="mdi-palette"
-          fontSet="mdi"
-        ></mat-icon>
+          [(colorPicker)]="demoService.config.bgsColor"
+          [cpPosition]="'bottom'"
+          [cpUseRootViewContainer]="true"
+          (click)="$event.stopPropagation()"
+          type="button"
+        >
+          <mat-icon
+            [style.color]="demoService.config.bgsColor"
+            fontIcon="mdi-palette"
+            fontSet="mdi"
+          ></mat-icon>
+        </button>
       </mat-form-field>
 
       <mat-form-field>
@@ -300,21 +336,30 @@
 
       <mat-form-field *ngIf="demoService.config.text">
         <input
-          [(colorPicker)]="demoService.config.textColor"
           matInput
           placeholder="Loading Text Color (textColor)"
           [(ngModel)]="demoService.config.textColor"
+          readonly
         />
-        <mat-icon
+        <div
           matSuffix
-          [style.color]="demoService.config.textColor"
-          fontIcon="mdi-palette"
-          fontSet="mdi"
-        ></mat-icon>
+          [(colorPicker)]="demoService.config.textColor"
+          [cpPosition]="'bottom'"
+          [cpUseRootViewContainer]="true"
+          (click)="$event.stopPropagation()"
+        >
+          <button mat-icon-button type="button">
+            <mat-icon
+              [style.color]="demoService.config.textColor"
+              fontIcon="mdi-palette"
+              fontSet="mdi"
+            ></mat-icon>
+          </button>
+        </div>
       </mat-form-field>
     </div>
     <!-- Background }}}-->
-    <div fxFlex="100" fxLayout="row wrap" fxLayoutAlign="center">
+    <div fxFlex="100" fxLayout="row wrap" fxLayoutAlign="center" fxLayoutGap="12px">
       <button mat-raised-button color="accent" (click)="reset()">
         Reset Configuration
       </button>

src/styles.scss

@@ -7,4 +7,5 @@ body {
 body {
   margin: 0;
   font-family: Roboto, "Helvetica Neue", sans-serif;
+  overflow-y: scroll; /* Always show scrollbar to prevent layout shift */
 }