[DLAB-4011] Color picker for theme inputs

ui/ui-frontend/package.json

@@ -57,6 +57,7 @@
     "lodash": "^4.17.10",
     "material-design-icons": "^3.0.1",
     "moment": "^2.24.0",
+    "ngx-color-picker": "^9.0.0",
     "rxjs": "^6.5.2",
     "tslib": "^1.9.0",
     "ui-frontend-common": "file:../ui-frontend-common/ui-frontend-common-0.0.13.tgz",

ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/customer-colors-input.component.html

 <!-- TODO: Add specific colors -->
 <div [formGroup]="colorForm">
-  <p><vitamui-common-input class="field-primary-color" formControlName="primary" maxlength="7"
-                            placeholder="Couleur principale"
-                            i18n-placeholder="Customer primary theme color input placeholder@@customerUpdatePrimaryColorThemeInputPlaceholder">
+  <p>
+    <vitamui-common-input [colorPicker]="colors['vitamui-primary']" (colorPickerChange)="handlePicker('primary', $event)"
+                          cpAlphaChannel="disabled" cpDisableInput="true" cpOutputFormat="hex" cpFallbackColor="#000"
+                          cpPosition="top" class="field-primary-color" formControlName="primary" maxlength="7"
+                          placeholder="Couleur principale"
+                          i18n-placeholder="Customer primary theme color input placeholder@@customerUpdatePrimaryColorThemeInputPlaceholder">
   </vitamui-common-input>
     <span class="field-color-preview primary"></span>
     <span class="field-color-preview primary-light"></span>
     <span class="field-color-preview primary-light-20"></span>
   </p>
   <p>
-    <vitamui-common-input class="field-secondary-color" formControlName="secondary" maxlength="7"
-                           placeholder="Couleur secondaire"
-                           i18n-placeholder="Customer secondary theme color input placeholder@@customerUpdateSecondaryColorThemeInputPlaceholder">
+    <vitamui-common-input [colorPicker]="colors['vitamui-secondary']" (colorPickerChange)="handlePicker('secondary', $event)"
+                          cpAlphaChannel="disabled" cpDisableInput="true" cpOutputFormat="hex" cpFallbackColor="#000"
+                          cpPosition="top" class="field-secondary-color" formControlName="secondary" maxlength="7"
+                          placeholder="Couleur secondaire"
+                          i18n-placeholder="Customer secondary theme color input placeholder@@customerUpdateSecondaryColorThemeInputPlaceholder">
 
     </vitamui-common-input>
     <span class="field-color-preview secondary"></span>

ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/customer-colors-input.component.scss

@@ -8,6 +8,10 @@ div {
   margin-bottom: 30px;
 }
 
+input {
+  display: none;
+}
+
 .field-color-preview {
   padding: 0;
   margin: 0 5px 0 0;

ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/customer-colors-input.component.ts

 import {Component, forwardRef, Input, OnInit} from '@angular/core';
+
 import {
   ControlValueAccessor,
   FormBuilder,
@@ -109,4 +110,42 @@ export class CustomerColorsInputComponent implements ControlValueAccessor, OnIni
   ngOnInit(): void {
     this.handleValueChanges();
   }
+
+
+  handlePicker(key: string, pickerValue: string) {
+
+    // Avoir 3 chars hex to become 6 chars (ex. #123 becoming instantly #112233...)
+    let inputValue: string = this.colorForm.get(key).value;
+
+    if (inputValue.startsWith('#')) {
+      inputValue = inputValue.substring(1);
+    }
+
+    if (pickerValue.startsWith('#')) {
+      pickerValue = pickerValue.substring(1);
+    }
+
+    if (inputValue.length === 3 && pickerValue.length === 6) {
+      for (let i = 0; i < 3; i++) {
+        if (inputValue.charAt(i) !== pickerValue.charAt(2 * i) || inputValue.charAt(i) !== pickerValue.charAt(2 * i + 1)) {
+          continue;
+        }
+        return;
+      }
+    }
+
+    if (key === 'primary') {
+      this.colorForm.setValue({
+        primary: pickerValue,
+        secondary: this.colorForm.value.secondary
+      });
+
+    } else if (key === 'secondary') {
+      this.colorForm.setValue({
+        primary: this.colorForm.value.primary,
+        secondary: pickerValue
+      });
+    }
+
+  }
 }

ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/customer-colors-input.module.ts

@@ -7,7 +7,7 @@ import {MatInputModule} from '@angular/material/input';
 import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {MatSelectModule} from '@angular/material/select';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
-
+import {ColorPickerModule} from 'ngx-color-picker';
 import {VitamUICommonModule} from 'ui-frontend-common';
 import {SharedModule} from '../../../shared/shared.module';
 import {OwnerFormModule} from '../../owner-form/owner-form.module';
@@ -25,7 +25,8 @@ import {CustomerColorsInputComponent} from './customer-colors-input.component';
     MatSnackBarModule,
     ReactiveFormsModule,
     OwnerFormModule,
-    VitamUICommonModule
+    VitamUICommonModule,
+    ColorPickerModule
   ],
   declarations: [
     CustomerColorsInputComponent