diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.ts index 262a532163..cab9b9d572 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.ts +++ b/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'; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/value-stepper-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/value-stepper-widget.component.html index 6b28d44066..6ce4387c1a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/value-stepper-widget.component.html +++ b/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">
{{ valueText }}
; - @ViewChild('rightButton', {static: false}) + @ViewChild('rightButton', {static: true}) rightButton: ElementRef; - @ViewChild('stepperContent', {static: false}) + @ViewChild('stepperContent', {static: true}) stepperContent: ElementRef; - @ViewChild('valueBoxContainer', {static: false}) + @ViewChild('valueBoxContainer', {static: true}) valueBox: ElementRef; - @ViewChild('value', {static: false}) + @ViewChild('value', {static: true}) valueElement: ElementRef; 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(); + + 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); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/value-stepper-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/value-stepper-widget.models.ts index 02471bfc05..9ec5ff5d65 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/value-stepper-widget.models.ts +++ b/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, - SetValueSettings, ValueToDataType + GetValueSettings, + SetValueAction, + SetValueSettings, + ValueToDataType } from '@shared/models/action-widget-settings.models'; -import { defaultWidgetAction, WidgetAction } from '@shared/models/widget.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 { WidgetButtonCustomStyles } 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 {