+ (keydown)="startKeyPress($event)" [attr.aria-label]="themePaletteLabel" role="{{enablePopupMode ? 'dialog' : 'region'"
+ #dialogstart>
{{backgroundLabel}}
+ *ngFor="let bg of themeInfo.backgrounds; let i = index" (click)="changeBackground(i)"
+ (keyup.enter)="changeBackground(i)" class="theme-bg">
@@ -51,23 +57,61 @@
-
{{label}}
-
+
{{labelDefault}}
+
+
+
{{labelCustom}}
+
+ [hidden]="colors.color?.custom == true" class="theme-color">
check
-
+
+
+
+
+
+ check
+
+
+
+
+
+ check
+
+
+
+
+
+
-
-
+
\ No newline at end of file
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.scss b/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.scss
index a0188f827..164bf935a 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.scss
+++ b/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;
}
-
\ No newline at end of file
+
+
+.space-span {
+ margin-left:10px;
+}
+
+.set-circle{
+ justify-content: center;
+}
+
+
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.ts
index b2f9d4f0a..9392c94a2 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.ts
+++ b/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,8 +26,11 @@ 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 = '';
@@ -35,8 +38,12 @@ export class DxcThemePaletteComponent implements OnInit, AfterViewInit, OnDestro
@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
= new EventEmitter();
+ @Output() customThemeSelected: EventEmitter = new EventEmitter();
+ // @Input() isCustomThemeSelected:boolean = false;
// @Output() transparencyModeChanged: EventEmitter = new EventEmitter();
// @Output() backgroundChange: EventEmitter = new EventEmitter();
// @Output() themeColorChanged: EventEmitter = new EventEmitter();
@@ -52,7 +59,7 @@ export class DxcThemePaletteComponent implements OnInit, AfterViewInit, OnDestro
if (this.enablePopupMode)
this.closeThemePalette();
}
-
+ isCustomThemeSelected: boolean = false;
defaultInputs = new BehaviorSubject({
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';
+ }
}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.module.ts b/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.module.ts
index edfc72dfa..ac65fefdc 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.module.ts
+++ b/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]
})
diff --git a/projects/dxc-ngx-cdk/src/lib/models/startup/configuration.model.ts b/projects/dxc-ngx-cdk/src/lib/models/startup/configuration.model.ts
index dad5784aa..9d33d13fe 100644
--- a/projects/dxc-ngx-cdk/src/lib/models/startup/configuration.model.ts
+++ b/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 } []
}