UI: Refactoring

ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.ts

@@ -18,7 +18,8 @@ import {
   AfterViewInit,
   ChangeDetectorRef,
   Component,
-  ElementRef, NgZone,
+  ElementRef,
+  NgZone,
   OnDestroy,
   OnInit,
   Renderer2,
@@ -33,7 +34,8 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { ValueType } from '@shared/models/constants';
 import {
   powerButtonDefaultSettings,
-  PowerButtonShape, powerButtonShapeSize,
+  PowerButtonShape,
+  powerButtonShapeSize,
   PowerButtonWidgetSettings
 } from '@home/components/widget/lib/rpc/power-button-widget.models';
 import { SVG, Svg } from '@svgdotjs/svg.js';

ui-ngx/src/app/modules/home/components/widget/lib/rpc/value-stepper-widget.component.html

@@ -30,7 +30,7 @@
          [class.tb-value-stepper-value-box-disabled]="(disabledState$ | async) === true">
       <div #value
            class="tb-value-stepper-value"
-           [class.tb-value-stepper-value-disabled]="(disabledState$ | async) === true"
+           [style.color]="(disabledState$ | async) === true ? disabledColor : valueStyleColor"
            [style]="valueStyle">{{ valueText }}</div>
     </div>
     <div [class.!hidden]="!showRightButton"

ui-ngx/src/app/modules/home/components/widget/lib/rpc/value-stepper-widget.component.scss

@@ -51,9 +51,6 @@
       height: 32px;
       padding: 0 12px;
       border-radius: 4px;
-      .tb-value-stepper-value-disabled {
-        color: rgba(0, 0, 0, 0.38) !important;
-      }
       &-disabled {
         border-color: rgba(0, 0, 0, 0.38);
       }

ui-ngx/src/app/modules/home/components/widget/lib/rpc/value-stepper-widget.component.ts

@@ -18,7 +18,9 @@ import {
   AfterViewInit,
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   ElementRef,
+  inject,
   NgZone,
   OnDestroy,
   OnInit,
@@ -28,7 +30,7 @@ import {
 } from '@angular/core';
 import { BasicActionWidgetComponent, ValueSetter } from '@home/components/widget/lib/action/action-widget.models';
 import { backgroundStyle, ComponentStyle, overlayStyle, textStyle } from '@shared/models/widget-settings.models';
-import { BehaviorSubject, combineLatest, Observable, Subject } from 'rxjs';
+import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
 import { ImagePipe } from '@shared/pipe/image.pipe';
 import { DomSanitizer } from '@angular/platform-browser';
 import { ValueType } from '@shared/models/constants';
@@ -46,7 +48,7 @@ import {
   ValueStepperWidgetSettings
 } from '@home/components/widget/lib/rpc/value-stepper-widget.models';
 import { UtilsService } from '@core/services/utils.service';
-import { takeUntil } from 'rxjs/operators';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-value-stepper-widget',
@@ -57,19 +59,19 @@ import { takeUntil } from 'rxjs/operators';
 export class ValueStepperWidgetComponent extends
   BasicActionWidgetComponent implements OnInit, AfterViewInit, OnDestroy {
 
-  @ViewChild('leftButton', {static: false})
+  @ViewChild('leftButton', {static: true})
   leftButton: ElementRef<HTMLElement>;
 
-  @ViewChild('rightButton', {static: false})
+  @ViewChild('rightButton', {static: true})
   rightButton: ElementRef<HTMLElement>;
 
-  @ViewChild('stepperContent', {static: false})
+  @ViewChild('stepperContent', {static: true})
   stepperContent: ElementRef<HTMLElement>;
 
-  @ViewChild('valueBoxContainer', {static: false})
+  @ViewChild('valueBoxContainer', {static: true})
   valueBox: ElementRef<HTMLElement>;
 
-  @ViewChild('value', {static: false})
+  @ViewChild('value', {static: true})
   valueElement: ElementRef<HTMLElement>;
 
   settings: ValueStepperWidgetSettings;
@@ -79,6 +81,8 @@ export class ValueStepperWidgetComponent extends
   padding: string;
 
   valueStyle: ComponentStyle = {};
+  valueStyleColor = '';
+  disabledColor = 'rgba(0, 0, 0, 0.38)';
   value: number = null;
 
   autoScale = false;
@@ -108,7 +112,8 @@ export class ValueStepperWidgetComponent extends
 
   private leftDisabledState$ = new BehaviorSubject(false);
   private rightDisabledState$ = new BehaviorSubject(false);
-  private readonly destroy$ = new Subject<void>();
+
+  protected destroyRef = inject(DestroyRef);
 
   constructor(protected imagePipe: ImagePipe,
               protected sanitizer: DomSanitizer,
@@ -135,7 +140,7 @@ export class ValueStepperWidgetComponent extends
     this.showLeftButton = this.settings.buttonAppearance.leftButton.showButton;
     this.showRightButton = this.settings.buttonAppearance.rightButton.showButton;
     this.valueStyle = textStyle(this.settings.appearance.valueFont);
-    this.valueStyle.color = this.settings.appearance.valueColor;
+    this.valueStyleColor = this.settings.appearance.valueColor;
 
     if (this.showValueBox) {
       const valueBoxCss = `.tb-value-stepper-value-box {\n`+
@@ -171,7 +176,7 @@ export class ValueStepperWidgetComponent extends
       this.disabledState$.asObservable(),
       this.leftDisabledState$.asObservable()
     ]).pipe(
-      takeUntil(this.destroy$)
+      takeUntilDestroyed(this.destroyRef)
     ).subscribe(value => {
       const state = value.includes(true);
       this.updateLeftDisabledState(state)
@@ -182,7 +187,7 @@ export class ValueStepperWidgetComponent extends
       this.disabledState$.asObservable(),
       this.rightDisabledState$.asObservable()
     ]).pipe(
-      takeUntil(this.destroy$)
+      takeUntilDestroyed(this.destroyRef)
     ).subscribe(value => {
       const state = value.includes(true);
       this.updateRightDisabledState(state)
@@ -200,8 +205,6 @@ export class ValueStepperWidgetComponent extends
     if (this.shapeResize$) {
       this.shapeResize$.disconnect();
     }
-    this.destroy$.next();
-    this.destroy$.complete();
     super.ngOnDestroy();
   }
 
@@ -220,12 +223,12 @@ export class ValueStepperWidgetComponent extends
   private onValue(value: number): void {
     this.value = value;
     this.prevValue = value;
-    if ((this.value + this.settings.appearance.valueStep) >= this.settings.appearance.maxValueRange) {
+    if ((this.value + this.settings.appearance.valueStep) > this.settings.appearance.maxValueRange) {
       this.rightDisabledState$.next(true);
     } else {
       this.rightDisabledState$.next(false);
     }
-    if ((this.value - this.settings.appearance.valueStep) <= this.settings.appearance.minValueRange) {
+    if ((this.value - this.settings.appearance.valueStep) < this.settings.appearance.minValueRange) {
       this.leftDisabledState$.next(true);
     } else {
       this.leftDisabledState$.next(false);

ui-ngx/src/app/modules/home/components/widget/lib/rpc/value-stepper-widget.models.ts

@@ -1,19 +1,32 @@
+///
+/// Copyright © 2016-2024 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+
 import {
   DataToValueType,
   GetValueAction,
-  GetValueSettings, SetValueAction,
+  GetValueSettings,
-  SetValueSettings, ValueToDataType
+  SetValueAction,
+  SetValueSettings,
+  ValueToDataType
 } from '@shared/models/action-widget-settings.models';
-import { defaultWidgetAction, WidgetAction } from '@shared/models/widget.models';
+import { WidgetButtonCustomStyles } from '@shared/components/button/widget-button.models';
-import {
-  ButtonToggleAppearance, segmentedButtonDefaultAppearance,
-  SegmentedButtonWidgetSettings
-} from '@home/components/widget/lib/button/segmented-button-widget.models';
-import { WidgetButtonCustomStyles, WidgetButtonType } from '@shared/components/button/widget-button.models';
 import { BackgroundSettings, BackgroundType, cssUnit, Font } from '@shared/models/widget-settings.models';
 import { AttributeScope } from '@shared/models/telemetry/telemetry.models';
 
-
 const defaultMainColor = '#305680';
 
 export enum ValueStepperType {