UI: Make min max editable

ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html

@@ -102,6 +102,8 @@
         <tb-color-settings formControlName="valueColor"
                            rangeAdvancedMode
                            gradientAdvancedMode
+                           minValue="0"
+                           maxValue="100"
                            [aliasController]="aliasController"
                            [dataKeyCallbacks]="callbacks"
                            [datasource]="datasource"
@@ -114,6 +116,8 @@
       <tb-color-settings formControlName="batteryLevelColor"
                          rangeAdvancedMode
                          gradientAdvancedMode
+                         minValue="0"
+                         maxValue="100"
                          [aliasController]="aliasController"
                          [dataKeyCallbacks]="callbacks"
                          [datasource]="datasource"
@@ -125,6 +129,8 @@
       <tb-color-settings formControlName="batteryShapeColor"
                          rangeAdvancedMode
                          gradientAdvancedMode
+                         minValue="0"
+                         maxValue="100"
                          [aliasController]="aliasController"
                          [dataKeyCallbacks]="callbacks"
                          [datasource]="datasource"

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.ts

@@ -74,11 +74,9 @@ export class ColorSettingsPanelComponent extends PageComponent implements OnInit
   gradientAdvancedMode = false;
 
   @Input()
-  @coerceNumber()
   minValue: number;
 
   @Input()
-  @coerceNumber()
   maxValue: number;
 
   colorType = ColorType;

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.ts

@@ -33,7 +33,7 @@ import {
 } from '@home/components/widget/lib/settings/common/color-settings-panel.component';
 import { IAliasController } from '@core/api/widget-api.models';
 import { deepClone, isDefinedAndNotNull } from '@core/utils';
-import { coerceBoolean, coerceNumber } from '@shared/decorators/coercion';
+import { coerceBoolean } from '@shared/decorators/coercion';
 import { DataKeysCallbacks } from '@home/components/widget/config/data-keys.component.models';
 import { Datasource } from '@shared/models/widget.models';
 
@@ -102,12 +102,10 @@ export class ColorSettingsComponent implements OnInit, ControlValueAccessor, OnD
   gradientAdvancedMode = false;
 
   @Input()
-  @coerceNumber()
-  minValue = 0;
+  minValue: number;
 
   @Input()
-  @coerceNumber()
-  maxValue = 100;
+  maxValue: number;
 
   colorType = ColorType;
 

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.html

@@ -36,19 +36,21 @@
 
   <div class="gradient-settings" [ngSwitch]="gradientFormGroup.get('advancedMode').value">
     <ng-template [ngSwitchCase]="false">
-      <div class="gradient" formGroupName="gradient">
+      <div class="gradient">
         <div class="gradient-container gradient-container-start">
           <div translate>widgets.color.gradient-start</div>
           <div class="start-gradient-container">
-            <div class="tb-form-row no-border no-padding" fxHide.xs [fxHide]="!minValue?.toString()?.length">
-              <div class="gradient-text" translate>widgets.color.start-value</div>
+            <div class="tb-form-row no-border no-padding">
+              <div class="gradient-text" fxHide.xs translate>widgets.color.start-value</div>
               <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-                <input matInput type="number" min="0" disabled [(ngModel)]="minValue" [ngModelOptions]="{standalone: true}" placeholder="{{ 'widget-config.set' | translate }}">
+                <input matInput type="number" formControlName="minValue" placeholder="{{ 'widget-config.set' | translate }}">
               </mat-form-field>
             </div>
-            <tb-color-input asBoxInput
-                            formControlName="start">
-            </tb-color-input>
+            <ng-container formGroupName="gradient">
+              <tb-color-input asBoxInput
+                              formControlName="start">
+              </tb-color-input>
+            </ng-container>
           </div>
         </div>
       </div>
@@ -94,19 +96,21 @@
         <mat-icon>add</mat-icon>
       </button>
 
-      <div class="gradient" formGroupName="gradient">
+      <div class="gradient">
         <div class="gradient-container gradient-container-end">
           <div translate>widgets.color.gradient-end</div>
           <div class="end-gradient-container">
-            <div class="tb-form-row no-border no-padding" fxHide.xs [fxHide]="!maxValue?.toString()?.length">
-              <div class="gradient-text" translate>widgets.color.end-value</div>
+            <div class="tb-form-row no-border no-padding">
+              <div class="gradient-text" fxHide.xs translate>widgets.color.end-value</div>
               <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-                <input matInput type="number" min="0" disabled [(ngModel)]="maxValue" [ngModelOptions]="{standalone: true}" placeholder="{{ 'widget-config.set' | translate }}">
+                <input matInput type="number" formControlName="maxValue" placeholder="{{ 'widget-config.set' | translate }}">
               </mat-form-field>
             </div>
-            <tb-color-input asBoxInput
-                            formControlName="end">
-            </tb-color-input>
+            <ng-container formGroupName="gradient">
+              <tb-color-input asBoxInput
+                              formControlName="end">
+              </tb-color-input>
+            </ng-container>
           </div>
         </div>
       </div>

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.ts

@@ -31,7 +31,7 @@ import { takeUntil } from 'rxjs/operators';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
 import { IAliasController } from '@core/api/widget-api.models';
 import { DomSanitizer } from '@angular/platform-browser';
-import { coerceBoolean, coerceNumber } from '@shared/decorators/coercion';
+import { coerceBoolean } from '@shared/decorators/coercion';
 import { isDefinedAndNotNull } from '@core/utils';
 import { DataKeysCallbacks } from '@home/components/widget/config/data-keys.component.models';
 import { Datasource } from '@shared/models/widget.models';
@@ -71,11 +71,9 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
   datasource: Datasource;
 
   @Input()
-  @coerceNumber()
   minValue: number;
 
   @Input()
-  @coerceNumber()
   maxValue: number;
 
   @Input()
@@ -111,7 +109,9 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
           source: [{type: ValueSourceType.constant}],
           color: ['rgba(255, 0, 0, 1)']
         })
-      })
+      }),
+      minValue: {value: 0, disabled: isFinite(this.minValue)},
+      maxValue: {value: 100, disabled: isFinite(this.maxValue)}
     });
 
     this.gradientFormGroup.valueChanges.pipe(
@@ -141,6 +141,8 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
   writeValue(value: ColorGradientSettings): void {
     if (isDefinedAndNotNull(value)) {
       this.gradientFormGroup.get('advancedMode').patchValue(value.advancedMode, {emitEvent: false});
+      this.gradientFormGroup.get('minValue').patchValue(isFinite(value.minValue) ? value.minValue : this.minValue, {emitEvent: false});
+      this.gradientFormGroup.get('maxValue').patchValue(isFinite(value.maxValue) ? value.maxValue : this.maxValue, {emitEvent: false});
       if (value?.gradient?.length) {
         this.gradientFormGroup.get('gradient').get('start').patchValue(value.gradient[0], {emitEvent: false});
         this.gradientFormGroup.get('gradient').get('end').patchValue(value.gradient[value.gradient.length - 1], {emitEvent: false});
@@ -165,10 +167,10 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
         this.advancedGradientListFormArray.value.map((v, i) => this.pointer(shift * (i + 1), i+1, null, true)).join('') +
         `<div class="pointer end"></div>`;
     } else {
-      const point = (+this.maxValue - +this.minValue) / (this.gradientListFormArray.value.length + 1);
+      const min = this.gradientFormGroup.get('minValue').value;
+      const max = this.gradientFormGroup.get('maxValue').value;
+      const point = (+max - +min) / (this.gradientListFormArray.value.length + 1);
       const shift = 100 / (this.gradientListFormArray.value.length + 1);
-      const min = isDefinedAndNotNull(this.minValue) ? this.minValue : 0;
-      const max = isDefinedAndNotNull(this.maxValue) ? this.maxValue : 100;
       return `<div class="pointer start"><div class="pointer-value"><span class="pointer-value-text">${min}</span></div></div>` +
         this.gradientListFormArray.value.map((v, i) => this.pointer(shift * (i + 1), i+1, point)).join('') +
         `<div class="pointer end"><div class="pointer-value"><span class="pointer-value-text">${max}</span></div></div>`;
@@ -180,7 +182,8 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
       return `<div class="pointer" style="left: ${shift}%"></div>`;
     } else {
       return `<div class="pointer" style="left: ${shift}%">` +
-        `<div class="pointer-value"><span class="pointer-value-text">${Math.floor(+this.minValue + (value * index))}</span></div></div>`;
+        `<div class="pointer-value"><span class="pointer-value-text">` +
+        `${Math.floor(+this.gradientFormGroup.get('minValue').value + (value * index))}</span></div></div>`;
     }
   }
 
@@ -256,15 +259,14 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
   }
 
   updateModel() {
+    const gradient = this.gradientFormGroup.getRawValue();
     this.propagateChange(
       {
-        advancedMode: this.gradientFormGroup.value.advancedMode,
-        gradient: [this.gradientFormGroup.value.gradient.start,
-        ...this.gradientFormGroup.value.gradient.gradientList.map(item => item.color),
-        this.gradientFormGroup.value.gradient.end],
-        gradientAdvanced: [this.gradientFormGroup.value.gradientAdvanced.start,
-          ...this.gradientFormGroup.value.gradientAdvanced.gradientList,
-          this.gradientFormGroup.value.gradientAdvanced.end]
+        advancedMode: gradient.advancedMode,
+        gradient: [gradient.gradient.start, ...gradient.gradient.gradientList.map(item => item.color), gradient.gradient.end],
+        gradientAdvanced: [gradient.gradientAdvanced.start, ...gradient.gradientAdvanced.gradientList, gradient.gradientAdvanced.end],
+        minValue: gradient.minValue,
+        maxValue: gradient.maxValue
       }
     );
   }

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

@@ -51,6 +51,8 @@
         <tb-color-settings formControlName="valueColor"
                            rangeAdvancedMode
                            gradientAdvancedMode
+                           minValue="0"
+                           maxValue="100"
                            [aliasController]="aliasController"
                            [dataKeyCallbacks]="dataKeyCallbacks"
                            [datasource]="datasource"
@@ -63,6 +65,8 @@
       <tb-color-settings formControlName="batteryLevelColor"
                          rangeAdvancedMode
                          gradientAdvancedMode
+                         minValue="0"
+                         maxValue="100"
                          [aliasController]="aliasController"
                          [dataKeyCallbacks]="dataKeyCallbacks"
                          [datasource]="datasource"
@@ -74,6 +78,8 @@
       <tb-color-settings formControlName="batteryShapeColor"
                          rangeAdvancedMode
                          gradientAdvancedMode
+                         minValue="0"
+                         maxValue="100"
                          [aliasController]="aliasController"
                          [dataKeyCallbacks]="dataKeyCallbacks"
                          [datasource]="datasource"