Merge pull request #11002 from ArtemDzhereleiko/AD/hot-fix/color-settings

Hotfix for color settings

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

@@ -111,7 +111,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
     ).subscribe(() => this.updateModel());
     this.colorRangeListFormGroup.get('advancedMode').valueChanges.pipe(
       takeUntil(this.destroy$)
-    ).subscribe(() => Promise.resolve().then(() => this.popover?.updatePosition()));
+    ).subscribe(() => setTimeout(() => {this.popover?.updatePosition();}, 0));
   }
 
   ngOnDestroy() {
@@ -175,7 +175,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
 
   public removeAdvancedRange(index: number) {
     (this.colorRangeListFormGroup.get('rangeAdvanced') as UntypedFormArray).removeAt(index);
-    Promise.resolve().then(() => this.popover?.updatePosition());
+    setTimeout(() => {this.popover?.updatePosition();}, 0);
   }
 
   get advancedRangeFormArray(): UntypedFormArray {
@@ -189,7 +189,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
   removeRange(index: number) {
     this.rangeListFormArray.removeAt(index);
     this.colorRangeListFormGroup.markAsDirty();
-    Promise.resolve().then(() => this.popover?.updatePosition());
+    setTimeout(() => {this.popover?.updatePosition();}, 0);
   }
 
   rangeDrop(event: CdkDragDrop<string[]>, range: string) {
@@ -212,7 +212,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
     const advancedRangeColorsArray = this.colorRangeListFormGroup.get('rangeAdvanced') as UntypedFormArray;
     const advancedRangeColorControl = this.fb.control(advancedRange, [advancedRangeValidator]);
     advancedRangeColorsArray.push(advancedRangeColorControl);
-    Promise.resolve().then(() => this.popover?.updatePosition());
+    setTimeout(() => {this.popover?.updatePosition();}, 0);
   }
 
   addRange() {
@@ -224,7 +224,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
       };
       this.rangeListFormArray.push(this.colorRangeControl(newRange));
       this.colorRangeListFormGroup.markAsDirty();
-      Promise.resolve().then(() => this.popover?.updatePosition());
+      setTimeout(() => {this.popover?.updatePosition();}, 0);
     }
   }
 

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

@@ -106,7 +106,7 @@ export class ColorSettingsPanelComponent extends PageComponent implements OnInit
       }
     );
     this.colorSettingsFormGroup.get('type').valueChanges.subscribe(() => {
-      Promise.resolve().then(() => this.popover?.updatePosition());
+      setTimeout(() => {this.popover?.updatePosition();}, 0);
     });
   }
 

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

@@ -23,7 +23,7 @@
 
   .gradient-preview {
     width: 100%;
-    padding: 40px 12px 0;
+    padding: 40px 15px 0;
     .gradient-background {
       position: relative;
       height: 56px;
@@ -120,11 +120,13 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 33px;
+        width: 38px;
         height: 24px;
         border-radius: 4px;
         background-color: rgba(0, 0, 0, 0.06);
         &-text {
+          text-overflow: ellipsis;
+          overflow: hidden;
           font-size: 14px;
           font-weight: 500;
         }

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

@@ -119,7 +119,7 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
     ).subscribe(() => this.updateModel());
     this.gradientFormGroup.get('advancedMode').valueChanges.pipe(
       takeUntil(this.destroy$)
-    ).subscribe(() => Promise.resolve().then(() => this.popover?.updatePosition()));
+    ).subscribe(() => setTimeout(() => {this.popover?.updatePosition();}, 0));
   }
 
   ngOnDestroy() {
@@ -167,8 +167,8 @@ 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 min = this.gradientFormGroup.get('minValue').value;
+      const min = this.gradientFormGroup.get('minValue').value || 0;
-      const max = this.gradientFormGroup.get('maxValue').value;
+      const max = this.gradientFormGroup.get('maxValue').value || 100;
       const point = (+max - +min) / (this.gradientListFormArray.value.length + 1);
       const shift = 100 / (this.gradientListFormArray.value.length + 1);
       return `<div class="pointer start"><div class="pointer-value"><span class="pointer-value-text">${min}</span></div></div>` +
@@ -236,7 +236,7 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
       this.gradientListFormArray.removeAt(index);
     }
     this.gradientFormGroup.markAsDirty();
-    Promise.resolve().then(() => this.popover?.updatePosition());
+    setTimeout(() => {this.popover?.updatePosition();}, 0);
   }
 
   gradientDrop(event: CdkDragDrop<string[]>, advanced = false) {
@@ -255,7 +255,7 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
       this.gradientListFormArray.push(this.colorGradientControl('rgba(0,0,0,0.87)'));
     }
     this.gradientFormGroup.markAsDirty();
-    Promise.resolve().then(() => this.popover?.updatePosition());
+    setTimeout(() => {this.popover?.updatePosition();}, 0);
   }
 
   updateModel() {