UI: Improved colorUpdated in ColorProcessor

ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts

@@ -191,7 +191,6 @@ export class TbCanvasDigitalGauge {
   private ticksSourcesSubscription: IWidgetSubscription;
 
   private readonly barColorProcessor: ColorProcessor;
-  private updatedBarColor$: Subscription;
 
   private gauge: CanvasDigitalGauge;
 
@@ -219,7 +218,7 @@ export class TbCanvasDigitalGauge {
       this.updateSetting();
     }
 
-    this.updatedBarColor$ = this.barColorProcessor.colorUpdated.subscribe(() => {
+    this.barColorProcessor.colorUpdated?.subscribe(() => {
       this.gauge.update({} as CanvasDigitalGaugeOptions);
     });
   }
@@ -285,7 +284,6 @@ export class TbCanvasDigitalGauge {
     if (this.ticksSourcesSubscription) {
       this.ctx.subscriptionApi.removeSubscription(this.ticksSourcesSubscription.id);
     }
-    this.updatedBarColor$?.unsubscribe();
     this.gauge = null;
   }
 }

ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.ts

@@ -217,9 +217,9 @@ export class BatteryLevelWidgetComponent implements OnInit, OnDestroy, AfterView
 
     this.hasCardClickAction = this.ctx.actionsApi.getActionDescriptors('cardClick').length > 0;
 
-    this.valueColor.colorUpdated.subscribe(() => this.cd.markForCheck());
-    this.batteryLevelColor.colorUpdated.subscribe(() => this.cd.markForCheck());
-    this.batteryShapeColor.colorUpdated.subscribe(() => this.cd.markForCheck());
+    this.valueColor.colorUpdated?.subscribe(() => this.cd.markForCheck());
+    this.batteryLevelColor.colorUpdated?.subscribe(() => this.cd.markForCheck());
+    this.batteryShapeColor.colorUpdated?.subscribe(() => this.cd.markForCheck());
   }
 
   ngAfterViewInit() {
@@ -238,10 +238,6 @@ export class BatteryLevelWidgetComponent implements OnInit, OnDestroy, AfterView
       this.batteryBoxResize$.disconnect();
     }
 
-    this.valueColor.colorUpdated.unsubscribe();
-    this.batteryLevelColor.colorUpdated.unsubscribe();
-    this.batteryShapeColor.colorUpdated.unsubscribe();
-
     this.batteryLevelColor.destroy();
     this.valueColor.destroy();
     this.batteryShapeColor.destroy();

ui-ngx/src/app/shared/models/widget-settings.models.ts

@@ -386,7 +386,7 @@ export abstract class ColorProcessor {
 
   color: string;
 
-  colorUpdated: EventEmitter<void> = new EventEmitter<void>();
+  colorUpdated?: EventEmitter<void>;
 
   protected constructor(protected settings: ColorSettings) {
     this.color = settings.color;
@@ -426,6 +426,8 @@ export abstract class AdvancedModeColorProcessor extends ColorProcessor {
   protected advancedMode: boolean;
   private currentValue: number;
 
+  colorUpdated = new EventEmitter<void>();
+
   protected constructor(protected settings: ColorSettings,
                         protected ctx: WidgetContext) {
     super(settings);
@@ -455,6 +457,9 @@ export abstract class AdvancedModeColorProcessor extends ColorProcessor {
     if (this.sourcesSubscription) {
       this.ctx.subscriptionApi.removeSubscription(this.sourcesSubscription.id);
     }
+    this.colorUpdated.complete();
+    this.colorUpdated.unsubscribe();
+    this.colorUpdated = null;
   }
 
   private onDataUpdated(subscription: IWidgetSubscription) {