From f13ae930a544d1547891ec2ff82f9f39e45b11d9 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 9 Mar 2022 14:12:39 -0800
Subject: [PATCH] Allow non-hex color modes from color component

---
 .../common/input/color/color.component.html      |  4 ++--
 .../common/input/color/color.component.ts        | 16 ++++++++++++----
 2 files changed, 14 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 a22d4f350..d7b84566c 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,12 +1,12 @@
 <div class="mb-3">
-  <label [for]="inputId">{{title}}</label>
+  <label *ngIf="title" [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>
 
       <ng-template #popContent>
         <div style="min-width: 200px;" class="pb-3">
-          <color-slider [color]="value" (onChangeComplete)="colorChanged($event.color.hex)"></color-slider>
+          <color-slider [color]="value" (onChangeComplete)="sliderChanged($event)"></color-slider>
         </div>
 
       </ng-template>
diff --git a/src-ui/src/app/components/common/input/color/color.component.ts b/src-ui/src/app/components/common/input/color/color.component.ts
index a7f3452f2..b31259200 100644
--- a/src-ui/src/app/components/common/input/color/color.component.ts
+++ b/src-ui/src/app/components/common/input/color/color.component.ts
@@ -1,5 +1,6 @@
-import { Component, forwardRef } from '@angular/core';
+import { Component, Input, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ColorEvent, ColorMode } from 'ngx-color';
 import { randomColor } from 'src/app/utils/color';
 import { AbstractInputComponent } from '../abstract-input';
 
@@ -15,6 +16,9 @@ import { AbstractInputComponent } from '../abstract-input';
 })
 export class ColorComponent extends AbstractInputComponent<string> {
 
+  @Input()
+  colorMode: ColorMode = ColorMode.HEX
+
   constructor() {
     super()
   }
@@ -23,8 +27,12 @@ export class ColorComponent extends AbstractInputComponent<string> {
     this.colorChanged(randomColor())
   }
 
-  colorChanged(value) {
-    this.value = value
-    this.onChange(value)
+  sliderChanged(colorEvent:ColorEvent) {
+    this.colorChanged(colorEvent.color[this.colorMode].toString())
+  }
+
+  colorChanged(color:string) {
+    this.value = color
+    this.onChange(color)
   }
 }