UI: liquid level widget fixes and editions after review and etc.

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

@@ -79,7 +79,7 @@
                              [fxShow]="levelCardWidgetConfigForm.get('tankSelectionType')?.value === shapeSelectOptions.static"
                              rowHeight="{{ '1:1' }}"
                              [cols]="5"
-                             [colsLtMd]="5"
+                             [colsLtMd]="2"
                              style="width: 100%;"
                              label="{{ 'widgets.liquid-level-card.shape-type' | translate }}" formControlName="selectedShape">
         <tb-image-cards-select-option *ngFor="let shape of shapes"
@@ -213,9 +213,10 @@
          *ngIf="levelCardWidgetConfigForm.get('layout')?.value !== this.levelCardLayouts.simple">
       <div class="fixed-title-width" translate>widgets.liquid-level-card.value</div>
       <div fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
-        <mat-form-field style="max-width: 12%;" appearance="outline" class="flex number" subscriptSizing="dynamic">
+        <mat-form-field style="max-width: 40%;" appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput formControlName="decimals" type="number"
                  min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+          <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
         </mat-form-field>
         <tb-font-settings formControlName="valueFont"
                           [previewText]="valuePreviewFn">
@@ -259,12 +260,12 @@
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipLevel">
             {{ 'widgets.liquid-level-card.level' | translate }}
           </mat-slide-toggle>
-          <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
             <tb-unit-input [required]="isRequired('tooltipUnits')"
                            [tagFilter]="unitsType.capacity" class="flex"
                            formControlName="tooltipUnits">
             </tb-unit-input>
-            <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+            <mat-form-field style="width: 40%;" appearance="outline" class="flex number" subscriptSizing="dynamic">
               <input matInput formControlName="tooltipLevelDecimals" type="number" min="0"
                      max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
               <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>

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

@@ -116,8 +116,8 @@ export class LiquidLevelWidgetComponent implements OnInit {
           }
         }
 
-        if (isDefined(volume) && isNumber(volume)) {
-          this.volume = volume;
+        if (isDefined(volume) && !isNaN(Number(volume))) {
+          this.volume = Number(volume);
         }
 
         if (units) {
@@ -214,7 +214,7 @@ export class LiquidLevelWidgetComponent implements OnInit {
         theme: 'tooltipster-shadow',
         side: 'top',
         delay: 10,
-        distance: -33,
+        distance: this.settings.showTitle ? -33 : -63,
         triggerClose: {
           click: true,
           tap: true,
@@ -231,10 +231,12 @@ export class LiquidLevelWidgetComponent implements OnInit {
           const tooltipsterBoxStyles: JQuery.PlainObject = {
             backgroundColor: this.getTooltipBackground(),
             backdropFilter: `blur(${this.settings.tooltipBackgroundBlur}px)`,
-            width: '100%'
+            width: '100%',
+            height: '100%'
           };
 
           $(helper.tooltip).css('max-width', this.svg.width() + 'px');
+          $(helper.tooltip).css('max-height', this.svg.height() + 'px');
           $(helper.tooltip).find('.tooltipster-box').css(tooltipsterBoxStyles);
           $(helper.tooltip).find('.tooltipster-arrow').empty();
 
@@ -397,6 +399,8 @@ export class LiquidLevelWidgetComponent implements OnInit {
 
     const value = convertLiters(data, this.widgetUnits as CapacityUnits, ConversionType.from)
       .toFixed(this.settings.decimals || 0);
+    this.valueColor.update(value);
+
     const valueTextStyle = cssTextFromInlineStyle({...inlineTextStyle(this.settings.valueFont),
                                                           color: this.valueColor.color});
     this.backgroundOverlayColor.update(percentage);
@@ -405,11 +409,11 @@ export class LiquidLevelWidgetComponent implements OnInit {
     }
 
     if (this.settings.layout === LevelCardLayout.absolute) {
-      this.volumeColor.update(percentage);
-
       const volumeInLiters: number = convertLiters(this.volume, this.settings.volumeUnits as CapacityUnits, ConversionType.to);
       const volume = convertLiters(volumeInLiters, this.widgetUnits as CapacityUnits, ConversionType.from)
         .toFixed(this.settings.decimals || 0);
+      this.volumeColor.update(volume);
+
       const volumeTextStyle = cssTextFromInlineStyle({...inlineTextStyle(this.settings.volumeFont),
                                                              color: this.volumeColor.color});
 

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

@@ -95,6 +95,11 @@
       min-height: 0;
       display: flex;
       justify-content: center;
+
+      .tb-image-cards-option-image {
+        max-width: 100%;
+        max-height: 100%;
+      }
     }
     &.selected {
       .tb-image-cards-option-background {

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

@@ -34,7 +34,7 @@
                                [fxShow]="levelCardWidgetSettingsForm.get('tankSelectionType')?.value === shapeSelectOptions.static"
                                rowHeight="{{ '1:1' }}"
                                [cols]="5"
-                               [colsLtMd]="5"
+                               [colsLtMd]="2"
                                style="width: 100%;"
                                label="{{ 'widgets.liquid-level-card.shape-type' | translate }}" formControlName="selectedShape">
           <tb-image-cards-select-option *ngFor="let shape of shapes"

ui-ngx/src/assets/help/en_US/widget/lib/indicator/shape_attribute_fn.md

@@ -1,6 +1,6 @@
 #### Shape attribute name
 
-A string expression value that allows you dynamically select shape image depending on attribute name.
+A string expression value that allows you dynamically select shape image depending on attribute name (ex. tankShape).
 
 **Attribute values that could be used to add the image:**