feature/RMA-94761 : Custom theme Color Palette.

package.json

@@ -64,6 +64,7 @@
     "moment": "^2.24.0",
     "ng-packagr": "^10.1.0",
     "ng2-charts": "^2.4.3",
+    "ngx-color-picker": "^10.0.1",
     "ngx-cookie-service": "^10.0.1",
     "ngx-infinite-scroll": "^9.0.0",
     "ngx-material-timepicker": "^5.5.3",

projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.html

@@ -1,43 +1,49 @@
 <div class="menu-arrow-up" *ngIf="enablePopupMode"></div>
 <div class="theme-palette-border d-inline-block w-100" tabindex="{{disabled ? -1 : tabIndexValue}}"
-  (keydown)="startKeyPress($event)" [attr.aria-label]="themePaletteLabel" role="{{enablePopupMode ? 'dialog' : 'region'" #dialogstart>
+  (keydown)="startKeyPress($event)" [attr.aria-label]="themePaletteLabel" role="{{enablePopupMode ? 'dialog' : 'region'"
+  #dialogstart>
   <a href="javascript:void(0);" role="button" tabindex="{{disabled ? -1 : tabIndexValue}}" *ngIf="enablePopupMode"
-  [attr.aria-label]="closeLabel" class="mr-2 view-icon closeIcon menuclose float-right" [matTooltip]="closeLabel"
-  (click)="closeThemePalette()">
-  <mat-icon class="mat-icon material-icons mat-icon-no-color">
-    close
-  </mat-icon>
+    [attr.aria-label]="closeLabel" class="mr-2 view-icon closeIcon menuclose float-right" [matTooltip]="closeLabel"
+    (click)="closeThemePalette()">
+    <mat-icon class="mat-icon material-icons mat-icon-no-color">
+      close
+    </mat-icon>
   </a>
   <div class="container px-0 py-4">
     <div class="w-100">
       <span class="float-left px-2" *ngIf="showThemeToggle">
-        <mat-icon [ngClass]="[themeInfo.isDarkMode ? 'mat-icon-no-color' : 'mat-icon-theme-color']" class="mat-icon material-icons  float-left pt-3">
+        <mat-icon [ngClass]="[themeInfo.isDarkMode ? 'mat-icon-no-color' : 'mat-icon-theme-color']"
+          class="mat-icon material-icons  float-left pt-3">
           wb_sunny
         </mat-icon>
-        <dxc-switch [checked]="themeInfo.isDarkMode" (onChange)="themeChange($event)" [ariaLabel]="switchLabel"></dxc-switch>
-        <mat-icon [ngClass]="[!themeInfo.isDarkMode ? 'mat-icon-no-color' : 'mat-icon-theme-color']" class="mat-icon material-icons float-right pt-3">
+        <dxc-switch [checked]="themeInfo.isDarkMode" (onChange)="themeChange($event)" [ariaLabel]="switchLabel">
+        </dxc-switch>
+        <mat-icon [ngClass]="[!themeInfo.isDarkMode ? 'mat-icon-no-color' : 'mat-icon-theme-color']"
+          class="mat-icon material-icons float-right pt-3">
           nightlight_round
         </mat-icon>
       </span>
       <span class="float-right px-2" *ngIf="showThemeToggle">
-        <mat-icon [ngClass]="[themeInfo.isTransparent ? 'mat-icon-no-color' : 'mat-icon-theme-color']" class="mat-icon material-icons  float-left pt-3">
+        <mat-icon [ngClass]="[themeInfo.isTransparent ? 'mat-icon-no-color' : 'mat-icon-theme-color']"
+          class="mat-icon material-icons  float-left pt-3">
           blur_off
         </mat-icon>
         <dxc-switch [checked]="themeInfo.isTransparent" (onChange)="transparencyChange($event)"
           [ariaLabel]="backgroundSwitchLabel"></dxc-switch>
-        <mat-icon [ngClass]="[!themeInfo.isTransparent ? 'mat-icon-no-color' : 'mat-icon-theme-color']" class="mat-icon material-icons float-right pt-3">
+        <mat-icon [ngClass]="[!themeInfo.isTransparent ? 'mat-icon-no-color' : 'mat-icon-theme-color']"
+          class="mat-icon material-icons float-right pt-3">
           blur_on
         </mat-icon>
       </span>
-</div>
+    </div>
     <div class="w-100 d-inline-block" *ngIf="themeInfo.isTransparent">
       <div class="px-2 py-0">
         <p class="text-muted mb-2">{{backgroundLabel}}</p>
         <div class="theme-background w-100 theme-palette">
           <div [ngClass]="{ active: bg.active}" role="button" attr.aria-checked="{{bg.active}}" role="radio"
             tabindex="{{disabled ? -1 : tabIndexValue}}" attr.aria-label="{{backgroundLabel + ' ' + bg.title}}"
-            *ngFor="let bg of themeInfo.backgrounds; let i = index" (click)="changeBackground(i)" (keyup.enter)="changeBackground(i)"
-            class="theme-bg">
+            *ngFor="let bg of themeInfo.backgrounds; let i = index" (click)="changeBackground(i)"
+            (keyup.enter)="changeBackground(i)" class="theme-bg">
             <span class="toggle-button m-2">
               <i class="icon-container">
                 <mat-icon aria-hidden="true" class="mat-icon material-icons mat-icon-theme-selected-color notranslate">
@@ -51,23 +57,61 @@
     </div>
     <div class="theme-colors d-inline-block w-100">
       <div class="p-2">
-        <p class="text-muted mb-2">{{label}}</p>
-        <div class="d-flex flex-row justify-content-between theme-palette">
+          <span class="text-muted mb-2">{{labelDefault}}</span>
+        <dxc-switch [checked]="isCustomThemeSelected" (onChange)="customColor($event)" [ariaLabel]="colorLabel">
+        </dxc-switch>
+        <span class="text-muted mb-2">{{labelCustom}}</span>
+        <div class="d-flex flex-row justify-content-between theme-palette" *ngIf="!isCustomThemeSelected">
           <span [ngClass]="{ active: colors.active}" role="button" attr.aria-checked="{{colors.active}}" role="radio"
-            tabindex="{{disabled ? -1 : tabIndexValue}}" attr.aria-label="{{label + ' ' + colors.color?.primary}}"
+            tabindex="{{disabled ? -1 : tabIndexValue}}" attr.aria-label="{{labelDefault + ' ' + colors.color?.primary}}"
             *ngFor="let colors of themeInfo.themeColors; let i = index" (click)="changeThemeColor(i)"
             (keyup.enter)="changeThemeColor(i)"
             [ngStyle]="{'background-color': colors.color?.primary, 'border-color': colors.color?.primary}"
-            class="theme-color">
+            [hidden]="colors.color?.custom == true" class="theme-color">
             <i>
               <mat-icon aria-hidden="true" class="mat-icon material-icons mat-icon-theme-selected-color notranslate">
                 check</mat-icon>
             </i>
           </span>
         </div>
-      </div>
+        <div class="d-flex flex-row set-circle theme-palette" *ngIf="isCustomThemeSelected">
+          <span *ngFor="let colors of themeInfo.themeColors; let i = index " [hidden]="colors.color?.custom != true">
+            <span [ngClass]="{ active: colors.active}" [cpPosition]="'left'" role="button" attr.aria-checked="{{colors.active}}" role="radio"
+              tabindex="{{disabled ? -1 : tabIndexValue}}" attr.aria-label="{{labelCustom + ' ' + colors.color?.primary}}"
+              [colorPicker]="colors.color?.primary"
+              (cpInputChange)="onPrimaryColor(i, $event)"
+              (cpSliderDragStart)="onPrimaryColor(i, $event)"
+              (cpSliderChange)="onPrimaryColor(i, $event)"
+              (cpSliderDragEnd)="onPrimaryColor(i, $event)"
+              (click)="changeThemeColor(i)"
+              (keyup.enter)="changeThemeColor(i)"
+              [ngStyle]="{'background-color': colors.color?.primary, 'border-color': colors.color?.primary}"
+               class="theme-color center-span">
+              <i>
+                <mat-icon aria-hidden="true" class="mat-icon material-icons mat-icon-theme-selected-color notranslate">
+                  check</mat-icon>
+              </i>
+            </span>
+            <span [ngClass]="{ active: colors.active}" [cpPosition]="'top-left'" role="button" attr.aria-checked="{{colors.active}}" role="radio" *ngIf="themeInfo.isTransparent && colors.color !=null && colors.color.effect !=null"
+              tabindex="{{disabled ? -1 : tabIndexValue}}" attr.aria-label="{{labelCustom + ' ' + colors.color?.effect}}"
+              [colorPicker]="colors.color.effect"
+              (cpInputChange)="onEffectColor(i, $event)"
+              (cpSliderDragStart)="onEffectColor(i, $event)"
+              (cpSliderChange)="onEffectColor(i, $event)"
+              (cpSliderDragEnd)="onEffectColor(i, $event)"
+              (click)="changeThemeColor(i)" (keyup.enter)="changeThemeColor(i)"
+              [ngStyle]="{'background-color': colors.color?.effect, 'border-color': colors.color?.effect}"
+               class="theme-color space-span">
+              <i>
+                <mat-icon aria-hidden="true" class="mat-icon material-icons mat-icon-theme-selected-color notranslate">
+                  check</mat-icon>
+              </i>
+            </span>
+          </span>
+        </div>
+        <span #returntoend tabindex="-1" (onblur)="returnFocusOut($event)"></span>
+        <span #dialogend tabindex="{{enablePopupMode ? 0 : -1}}" (focus)="endFocus($event)"></span>
       <span #returntoend tabindex="-1" (onblur)="returnFocusOut($event)"></span>
       <span #dialogend tabindex="{{enablePopupMode ? 0 : -1}}" (focus)="endFocus($event)"></span>
     </div>
-  </div>
-</div>
+  </div>

projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.scss

@@ -79,4 +79,14 @@
     .mat-icon-theme-selected-color {
       color: var(--selected-icon-color) !important;
       }
-
+
+
+.space-span {
+  margin-left:10px;
+}
+
+.set-circle{
+  justify-content: center;
+}
+
+

projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, OnInit, Output, EventEmitter, Input, ViewChild, ElementRef, AfterViewInit, HostListener, HostBinding, ChangeDetectorRef, OnDestroy, SimpleChanges } from '@angular/core';
+import { Component, Inject, OnInit, Output, EventEmitter, Input, ViewChild, ElementRef, AfterViewInit, HostListener, HostBinding, ChangeDetectorRef, OnDestroy, SimpleChanges, OnChanges } from '@angular/core';
 import { ComplexThemeBindingStrategy } from '../theme/complexThemeBindingStrategy';
 import { css } from "emotion";
 import { BehaviorSubject } from "rxjs";
@@ -12,9 +12,9 @@ import { IThemeInfo } from '../models/startup/configuration.model';
   providers: [CssUtils, ComplexThemeBindingStrategy]
 })
 
-export class DxcThemePaletteComponent implements OnInit, AfterViewInit, OnDestroy {
+export class DxcThemePaletteComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges {
   @Input('isThemeOpen') isThemeOpen: boolean = false;
-  
+
   //@Input('themeColors') themeColors: { 'color': { 'primary': string, 'effect': string }, active: boolean }[] = null;
   //@Input('selectedThemeColor') selectedThemeColor: { [key: string]: any } = {};
   //@Input('themeBackgrounds') themeBackgrounds: { 'id': string, 'title': string, 'background': string, 'active': boolean }[] = null;
@@ -26,17 +26,24 @@ export class DxcThemePaletteComponent implements OnInit, AfterViewInit, OnDestro
   @Input('tabIndexValue') tabIndexValue: number = 0;
   @Input('showThemeToggle') showThemeToggle: boolean = true;
   @Input('label') label: string = '';
+  @Input('labelDefault') labelDefault: string = '';
+  @Input('labelCustom') labelCustom: string = '';
   @Input('backgroundLabel') backgroundLabel: string = '';
   @Input('switchLabel') switchLabel: string = '';
+  @Input('colorLabel') colorLabel: string = '';
   @Input('backgroundSwitchLabel') backgroundSwitchLabel: string = '';
   @Input('themePaletteLabel') themePaletteLabel: string = '';
   @Input('closeLabel') closeLabel: string = '';
   @Input('colorShades') colorShades: Array<number> = [];
   @Input() border: boolean = false;
   @Input() public disabled: boolean = false;
 
+  // isCustomMode: boolean = false;
+  colorIndex: number = 0;
   @Output() themeChanged: EventEmitter<{ 'themeInfo': IThemeInfo, 'shades': any[] }> = new EventEmitter<{ 'themeInfo': IThemeInfo, 'shades': any[] }>();
   @Output() themeOpenChanged: EventEmitter<boolean> = new EventEmitter<boolean>();
+  @Output() customThemeSelected: EventEmitter<boolean> = new EventEmitter<boolean>();
+ // @Input() isCustomThemeSelected:boolean = false;
   // @Output() transparencyModeChanged: EventEmitter<any> = new EventEmitter<any>();
   // @Output() backgroundChange: EventEmitter<any> = new EventEmitter<any>();
   // @Output() themeColorChanged: EventEmitter<any> = new EventEmitter<any>();
@@ -52,7 +59,7 @@ export class DxcThemePaletteComponent implements OnInit, AfterViewInit, OnDestro
     if (this.enablePopupMode)
       this.closeThemePalette();
   }
-
+  isCustomThemeSelected: boolean = false;
   defaultInputs = new BehaviorSubject<any>({
     value: null,
     checked: false,
@@ -79,6 +86,7 @@ export class DxcThemePaletteComponent implements OnInit, AfterViewInit, OnDestro
   ngOnInit(): void {
     // let selectedThemeColor = this.themeColors.filter((colors) => { return colors.active == true; });
     // this.selectedThemeColor = selectedThemeColor.length > 0 ? selectedThemeColor[0].color : '';
+    this.setCustomTheme(this.themeInfo);
   }
 
   public ngOnChanges(changes: SimpleChanges): void {
@@ -88,6 +96,19 @@ export class DxcThemePaletteComponent implements OnInit, AfterViewInit, OnDestro
     }, {});
     this.defaultInputs.next({ ...this.defaultInputs.getValue(), ...inputs });
     this.className = `${this.getDynamicStyle(this.defaultInputs.getValue())}`;
+    if (JSON.stringify(changes.themeInfo?.currentValue) != JSON.stringify(changes.themeInfo?.previousValue)) {
+      this.setCustomTheme(changes.themeInfo?.currentValue);
+    }
+  }
+
+  private setCustomTheme(themeInfo: IThemeInfo) {
+    let customColorIndex = themeInfo.themeColors.findIndex(colorsObj => colorsObj?.color?.custom == true);
+    let selectedColorIndex = themeInfo.themeColors.findIndex(colorsObj => colorsObj.active == true);
+    if (customColorIndex == selectedColorIndex && customColorIndex != -1) {
+      this.isCustomThemeSelected = true;
+    } else {
+      this.colorIndex = selectedColorIndex;
+    }
   }
 
   ngOnDestroy(): void {
@@ -117,7 +138,9 @@ export class DxcThemePaletteComponent implements OnInit, AfterViewInit, OnDestro
 
   changeThemeColor = (index) => {
     this.themeInfo.themeColors.forEach(color => color.active = false);
+    let customColorIndex = this.themeInfo.themeColors.findIndex(colorsObj => colorsObj?.color?.custom == true);
     this.themeInfo.themeColors[index].active = true;
+    this.colorIndex = customColorIndex != index ? index : this.colorIndex;
     this.emitEvent();
   }
 
@@ -138,6 +161,29 @@ export class DxcThemePaletteComponent implements OnInit, AfterViewInit, OnDestro
     }
   }
 
+  customColor(event) {
+    let selectedColorIndex = this.themeInfo.themeColors.findIndex(colorsObj => colorsObj?.color?.custom != true && colorsObj.active == true);
+    this.colorIndex = event != true && selectedColorIndex > 0 ? selectedColorIndex : this.colorIndex;
+    this.isCustomThemeSelected = event;
+    this.themeInfo.themeColors.forEach((colorObj, index) => {
+      colorObj.active = this.isCustomThemeSelected == true && colorObj.color?.custom == true ? true : this.isCustomThemeSelected != true && index == this.colorIndex ? true : false;
+    });
+    this.emitEvent();
+  }
+
+  onPrimaryColor(index: any, event: any): void {
+    this.themeInfo.themeColors[index].color.primary = event?.color;
+    this.themeInfo.themeColors[index].color.effect = this.hexToRgb(this.complexThemeBindingStrategy.setOpacity(event?.color, 0.4), 0.4);
+    this.emitEvent();
+  }
+
+  onEffectColor(index: any, event: any): void {
+    this.themeInfo.themeColors[index].color.effect = event?.color;
+    this.emitEvent();
+  }
+
+
+
   endFocus($event: any) {
     if (this.enablePopupMode) {
       if (this.dialogstart.nativeElement.focus)
@@ -176,4 +222,15 @@ export class DxcThemePaletteComponent implements OnInit, AfterViewInit, OnDestro
     }
     this.themeChanged.emit({ 'themeInfo': this.themeInfo, 'shades': colorShadesList });
   }
+
+  private hexToRgb = (hex, opacity) => {
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex.substring(0, 7));
+    if(result){
+    var r= parseInt(result[1], 16);
+    var g= parseInt(result[2], 16);
+    var b= parseInt(result[3], 16);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+    }
+    return '#fffff';
+    }
 }

projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DxcThemePaletteComponent } from './dxc-theme-palette.component';
 import { DxcSwitchModule } from '../dxc-switch/dxc-switch.module';
+import { ColorPickerModule } from 'ngx-color-picker';
 import { MatTooltipModule } from '@angular/material/tooltip'
 import { MatIconModule } from '@angular/material/icon'
 import { DxcSafeModule } from '../directives/pipes/safe/dxc-safe.module'
@@ -12,7 +13,8 @@ import { DxcSafeModule } from '../directives/pipes/safe/dxc-safe.module'
     DxcSwitchModule,
     MatTooltipModule,
     MatIconModule,
-    DxcSafeModule
+    DxcSafeModule,
+    ColorPickerModule
   ], 
   exports: [DxcThemePaletteComponent]
 })

projects/dxc-ngx-cdk/src/lib/models/startup/configuration.model.ts

@@ -9,7 +9,7 @@ import { BehaviorSubject } from 'rxjs';
 export interface IThemeInfo {
   "isDarkMode": boolean,
   "isTransparent": boolean,
-  "themeColors": { 'color': { 'primary': string, 'effect': string }, active: boolean } [],
+  "themeColors": { 'color': { 'primary': string, 'effect': string, 'custom': boolean}, active: boolean} [],
   "backgrounds": { 'id': string, 'title': string, 'background': string, 'active': boolean } []
 }