UI: liquid level widget additions and refactoring after review

application/src/main/data/json/system/widget_types/horizontal_2_1_elliptical_tank.json

@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-liquid-level-widget \n    [ctx]=\"ctx\">\n</tb-liquid-level-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    if (self.ctx.$scope.liquidLevelWidget) {\n        self.ctx.$scope.liquidLevelWidget.onInit();\n    }\n}\n\nself.onDataUpdated = function() {\n    if (self.ctx.$scope.liquidLevelWidget) {\n        self.ctx.$scope.liquidLevelWidget.update();\n    }\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() {    \n    return {        \n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false        \n        }    \n    };\n}\n",
+    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.liquidLevelWidget.update();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() {    \n    return {        \n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false        \n        }    \n    };\n}\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-liquid-level-card-widget-settings",

application/src/main/data/json/system/widget_types/horizontal_capsule_tank.json

@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-liquid-level-widget \n    [ctx]=\"ctx\">\n</tb-liquid-level-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    if (self.ctx.$scope.liquidLevelWidget) {\n        self.ctx.$scope.liquidLevelWidget.onInit();\n    }\n}\n\nself.onDataUpdated = function() {\n    if (self.ctx.$scope.liquidLevelWidget) {\n        self.ctx.$scope.liquidLevelWidget.update();\n    }\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() {    \n    return {        \n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false        \n        }    \n    };\n}\n",
+    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.liquidLevelWidget.update();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() {    \n    return {        \n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false        \n        }    \n    };\n}\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-liquid-level-card-widget-settings",

application/src/main/data/json/system/widget_types/horizontal_cylinder_tank.json

@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-liquid-level-widget \n    [ctx]=\"ctx\">\n</tb-liquid-level-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    if (self.ctx.$scope.liquidLevelWidget) {\n        self.ctx.$scope.liquidLevelWidget.onInit();\n    }\n}\n\nself.onDataUpdated = function() {\n    if (self.ctx.$scope.liquidLevelWidget) {\n        self.ctx.$scope.liquidLevelWidget.update();\n    }\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() {    \n    return {        \n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false        \n        }    \n    };\n}\n",
+    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.liquidLevelWidget.update();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() {    \n    return {        \n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false        \n        }    \n    };\n}\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-liquid-level-card-widget-settings",

application/src/main/data/json/system/widget_types/horizontal_dish_ends_tank.json

@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-liquid-level-widget \n    [ctx]=\"ctx\">\n</tb-liquid-level-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    if (self.ctx.$scope.liquidLevelWidget) {\n        self.ctx.$scope.liquidLevelWidget.onInit();\n    }\n}\n\nself.onDataUpdated = function() {\n    if (self.ctx.$scope.liquidLevelWidget) {\n        self.ctx.$scope.liquidLevelWidget.update();\n    }\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() {    \n    return {        \n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false        \n        }    \n    };\n}\n",
+    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.liquidLevelWidget.update();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() {    \n    return {        \n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false        \n        }    \n    };\n}\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-liquid-level-card-widget-settings",

application/src/main/data/json/system/widget_types/horizontal_ellipse_tank.json

@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-liquid-level-widget \n    [ctx]=\"ctx\">\n</tb-liquid-level-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    if (self.ctx.$scope.liquidLevelWidget) {\n        self.ctx.$scope.liquidLevelWidget.onInit();\n    }\n}\n\nself.onDataUpdated = function() {\n    if (self.ctx.$scope.liquidLevelWidget) {\n        self.ctx.$scope.liquidLevelWidget.update();\n    }\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() {    \n    return {        \n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false        \n        }    \n    };\n}\n",
+    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.liquidLevelWidget.update();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() {    \n    return {        \n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false        \n        }    \n    };\n}\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-liquid-level-card-widget-settings",

application/src/main/data/json/system/widget_types/horizontal_oval_tank.json

@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-liquid-level-widget \n    [ctx]=\"ctx\">\n</tb-liquid-level-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    if (self.ctx.$scope.liquidLevelWidget) {\n        self.ctx.$scope.liquidLevelWidget.onInit();\n    }\n}\n\nself.onDataUpdated = function() {\n    if (self.ctx.$scope.liquidLevelWidget) {\n        self.ctx.$scope.liquidLevelWidget.update();\n    }\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() {    \n    return {        \n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false        \n        }    \n    };\n}\n",
+    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.liquidLevelWidget.update();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() {    \n    return {        \n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false        \n        }    \n    };\n}\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-liquid-level-card-widget-settings",

application/src/main/data/json/system/widget_types/rectangle_tank.json

@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-liquid-level-widget \n    [ctx]=\"ctx\">\n</tb-liquid-level-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    if (self.ctx.$scope.liquidLevelWidget) {\n        self.ctx.$scope.liquidLevelWidget.onInit();\n    }\n}\n\nself.onDataUpdated = function() {\n    if (self.ctx.$scope.liquidLevelWidget) {\n        self.ctx.$scope.liquidLevelWidget.update();\n    }\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() {    \n    return {        \n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false        \n        }    \n    };\n}\n",
+    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.liquidLevelWidget.update();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() {    \n    return {        \n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false        \n        }    \n    };\n}\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-liquid-level-card-widget-settings",

application/src/main/data/json/system/widget_types/vertical_capsule_tank.json

@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-liquid-level-widget \n    [ctx]=\"ctx\">\n</tb-liquid-level-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    if (self.ctx.$scope.liquidLevelWidget) {\n        self.ctx.$scope.liquidLevelWidget.onInit();\n    }\n}\n\nself.onDataUpdated = function() {\n    if (self.ctx.$scope.liquidLevelWidget) {\n        self.ctx.$scope.liquidLevelWidget.update();\n    }\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() {    \n    return {        \n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false        \n        }    \n    };\n}\n",
+    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.liquidLevelWidget.update();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() {    \n    return {        \n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false        \n        }    \n    };\n}\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-liquid-level-card-widget-settings",

application/src/main/data/json/system/widget_types/vertical_cylinder_tank.json

@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-liquid-level-widget \n    [ctx]=\"ctx\">\n</tb-liquid-level-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    if (self.ctx.$scope.liquidLevelWidget) {\n        self.ctx.$scope.liquidLevelWidget.onInit();\n    }\n}\n\nself.onDataUpdated = function() {\n    if (self.ctx.$scope.liquidLevelWidget) {\n        self.ctx.$scope.liquidLevelWidget.update();\n    }\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() {    \n    return {        \n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false        \n        }    \n    };\n}\n",
+    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.liquidLevelWidget.update();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() {    \n    return {        \n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false        \n        }    \n    };\n}\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-liquid-level-card-widget-settings",

application/src/main/data/json/system/widget_types/vertical_oval_tank.json

@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-liquid-level-widget \n    [ctx]=\"ctx\">\n</tb-liquid-level-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    if (self.ctx.$scope.liquidLevelWidget) {\n        self.ctx.$scope.liquidLevelWidget.onInit();\n    }\n}\n\nself.onDataUpdated = function() {\n    if (self.ctx.$scope.liquidLevelWidget) {\n        self.ctx.$scope.liquidLevelWidget.update();\n    }\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() {    \n    return {        \n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false        \n        }    \n    };\n}\n",
+    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.liquidLevelWidget.update();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() {    \n    return {        \n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false        \n        }    \n    };\n}\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-liquid-level-card-widget-settings",

ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts

@@ -72,7 +72,7 @@ import {
 } from '@home/components/widget/config/basic/cards/progress-bar-basic-config.component';
 import {
   LiquidLevelCardBasicConfigComponent
-} from '@home/components/widget/config/basic/cards/liquid-level-card-basic-config.component';
+} from '@home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component';
 
 @NgModule({
   declarations: [

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

@@ -199,12 +199,12 @@
     <div class="tb-form-panel-title" translate>widgets.liquid-level-card.color-and-font</div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" translate>widgets.liquid-level-card.tank-color</div>
-      <tb-color-settings formControlName="tankColor">
+      <tb-color-settings formControlName="tankColor" settingsKey="{{'widgets.liquid-level-card.tank-color' | translate }}">
       </tb-color-settings>
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" translate>widgets.liquid-level-card.liquid-color</div>
-      <tb-color-settings formControlName="liquidColor">
+      <tb-color-settings formControlName="liquidColor" settingsKey="{{'widgets.liquid-level-card.liquid-color' | translate }}">
       </tb-color-settings>
     </div>
     <div class="tb-form-row space-between"
@@ -218,7 +218,7 @@
         <tb-font-settings formControlName="valueFont"
                           [previewText]="valuePreviewFn">
         </tb-font-settings>
-        <tb-color-settings formControlName="valueColor">
+        <tb-color-settings formControlName="valueColor" settingsKey="{{'widgets.liquid-level-card.value' | translate }}">
         </tb-color-settings>
       </div>
     </div>
@@ -228,7 +228,7 @@
         <tb-font-settings formControlName="volumeFont"
                           [previewText]="totalVolumeValuePreviewFn">
         </tb-font-settings>
-        <tb-color-settings formControlName="volumeColor">
+        <tb-color-settings formControlName="volumeColor" settingsKey="{{'widgets.liquid-level-card.total-volume' | translate }}">
         </tb-color-settings>
       </div>
     </div>
@@ -236,7 +236,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showBackgroundOverlay">
         {{ 'widgets.liquid-level-card.background-overlay' | translate }}
       </mat-slide-toggle>
-      <tb-color-settings formControlName="backgroundOverlayColor">
+      <tb-color-settings formControlName="backgroundOverlayColor" settingsKey="{{'widgets.liquid-level-card.background-overlay' | translate }}">
       </tb-color-settings>
     </div>
   </div>
@@ -270,7 +270,7 @@
             <tb-font-settings formControlName="tooltipLevelFont"
                               [previewText]="tooltipValuePreviewFn">
             </tb-font-settings>
-            <tb-color-settings formControlName="tooltipLevelColor">
+            <tb-color-settings formControlName="tooltipLevelColor" settingsKey="{{'widgets.liquid-level-card.background-overlay' | translate }}">
             </tb-color-settings>
           </div>
         </div>
@@ -283,13 +283,13 @@
             <tb-font-settings formControlName="tooltipDateFont"
                               [previewText]="datePreviewFn">
             </tb-font-settings>
-            <tb-color-settings formControlName="tooltipDateColor">
+            <tb-color-settings formControlName="tooltipDateColor" settingsKey="{{'widgets.value-card.date' | translate }}">
             </tb-color-settings>
           </div>
         </div>
         <div class="tb-form-row space-between">
           <div class="fixed-title-width" translate>widgets.liquid-level-card.tooltip-background</div>
-          <tb-color-settings formControlName="tooltipBackgroundColor">
+          <tb-color-settings formControlName="tooltipBackgroundColor" settingsKey="{{'widgets.liquid-level-card.tooltip-background' | translate }}">
           </tb-color-settings>
         </div>
         <div class="tb-form-row space-between">

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

@@ -60,7 +60,6 @@ import { ImageCardsSelectComponent } from '@home/components/widget/lib/settings/
 import { map, share, tap } from 'rxjs/operators';
 import { Observable, of, ReplaySubject } from 'rxjs';
 import { ResourcesService } from '@core/services/resources.service';
-import { UnitInputComponent } from '@shared/components/unit-input.component';
 import { UtilsService } from '@core/services/utils.service';
 
 @Component({
@@ -74,8 +73,6 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon
 
   @ViewChild('shapesImageCardsSelect', { static: false }) shapesImageCardsSelect: ImageCardsSelectComponent;
 
-  @ViewChild('widgetUnits', { static: false }) widgetUnits: UnitInputComponent;
-
   public get datasource(): Datasource {
     if (this.widgetConfig.config.datasources && this.widgetConfig.config.datasources) {
       return this.widgetConfig.config.datasources[0];
@@ -88,18 +85,18 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon
     const datasourceUnits = this.levelCardWidgetConfigForm.get('datasourceUnits').value;
     const layout: LevelCardLayout = this.levelCardWidgetConfigForm.get('layout').value;
     const units = this.levelCardWidgetConfigForm.get('units').value;
-    return !(datasourceUnits === CapacityUnits.percent && layout !== LevelCardLayout.absolute
+
-      || (datasourceUnits === CapacityUnits.percent && units === CapacityUnits.percent));
+    if (layout === LevelCardLayout.absolute) {
+      return true;
+    }
+
+    return !(datasourceUnits === CapacityUnits.percent && units === CapacityUnits.percent);
   }
 
   public get widgetUnitsInput(): boolean {
     const layout: LevelCardLayout = this.levelCardWidgetConfigForm.get('layout').value;
 
-    if (layout === LevelCardLayout.absolute) {
+    return layout === LevelCardLayout.absolute;
-      const datasourceUnits = this.levelCardWidgetConfigForm.get('datasourceUnits').value;
-      return !(datasourceUnits === CapacityUnits.percent);
-    }
-    return false;
   }
 
   public get displayTimewindowConfig(): boolean {
@@ -343,8 +340,10 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon
     }
 
     if (trigger === 'datasourceUnits' || trigger === 'layout' || trigger === 'units') {
-      if (datasourceUnits === CapacityUnits.percent && (layout !== LevelCardLayout.absolute)
+      if (
-        || (datasourceUnits === CapacityUnits.percent && units?.value === CapacityUnits.percent)
+        datasourceUnits === CapacityUnits.percent &&
+        layout !== LevelCardLayout.absolute &&
+        (!units?.value || units?.value === CapacityUnits.percent)
       ) {
         volumeSource.disable({emitEvent: false});
         this.levelCardWidgetConfigForm.get('volumeConstant').disable({emitEvent: false});

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

@@ -44,7 +44,7 @@ import {
 } from '@shared/models/widget-settings.models';
 import { ResourcesService } from '@core/services/resources.service';
 import { NULL_UUID } from '@shared/models/id/has-uuid';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, ElementRef, Host, HostBinding, Input, OnInit } from '@angular/core';
 
 import ITooltipsterInstance = JQueryTooltipster.ITooltipsterInstance;
 
@@ -54,6 +54,9 @@ import ITooltipsterInstance = JQueryTooltipster.ITooltipsterInstance;
 })
 export class LiquidLevelWidgetComponent implements OnInit {
 
+  @HostBinding('style.width') width = '100%';
+  @HostBinding('style.height') height = '100%';
+
   @Input()
   ctx: WidgetContext;
 
@@ -93,22 +96,21 @@ export class LiquidLevelWidgetComponent implements OnInit {
 
   widgetUnits: string;
 
-  constructor() {
+  constructor(@Host() private elementRef: ElementRef) {
   }
 
   ngOnInit(): void {
     this.ctx.$scope.liquidLevelWidget = this;
     this.settings = {...levelCardDefaultSettings(), ...this.ctx.widgetConfig, ...this.ctx.settings};
     this.declareStyles();
-  }
 
-  public onInit() {
     this.getData().subscribe(data => {
       if (data) {
         const { svg, volume, units } = data;
-        if (svg && isString(svg) && this.ctx.$container) {
+        if (svg && isString(svg) && this.elementRef.nativeElement) {
-          this.ctx.$container.html(svg);
+          const jQueryContainerElement = $(this.elementRef.nativeElement);
-          this.svg = this.ctx.$container.find('svg');
+          jQueryContainerElement.html(svg);
+          this.svg = jQueryContainerElement.find('svg');
           this.svg.on('click', this.cardClick.bind(this));
           this.createSVG();
           this.createValueElement();
@@ -247,9 +249,10 @@ export class LiquidLevelWidgetComponent implements OnInit {
   }
 
   private createValueElement(): void {
-    const containerOverlay = this.ctx.$container.find('.container-overlay');
+    const jQueryContainerElement = $(this.elementRef.nativeElement);
-    const percentageOverlay = this.ctx.$container.find('.percentage-overlay');
+    const containerOverlay = jQueryContainerElement.find('.container-overlay');
-    const absoluteOverlay = this.ctx.$container.find('.absolute-overlay');
+    const percentageOverlay = jQueryContainerElement.find('.percentage-overlay');
+    const absoluteOverlay = jQueryContainerElement.find('.absolute-overlay');
 
     if (this.settings.layout === LevelCardLayout.absolute) {
       this.overlayContainer = absoluteOverlay;
@@ -350,8 +353,9 @@ export class LiquidLevelWidgetComponent implements OnInit {
 
   private updateLevel(newY: number, percentage: number): void {
     this.liquidColor.update(percentage);
-    const fill = this.ctx.$container.find('.tb-liquid-fill');
+    const jQueryContainerElement = $(this.elementRef.nativeElement);
-    const surfaces = this.ctx.$container.find('.tb-liquid-surface');
+    const fill = jQueryContainerElement.find('.tb-liquid-fill');
+    const surfaces = jQueryContainerElement.find('.tb-liquid-surface');
     const surfacePositionAttr = this.shape !== Shapes.vCylinder ? 'y' : 'cy';
     const animationSpeed = 500;
 
@@ -377,8 +381,9 @@ export class LiquidLevelWidgetComponent implements OnInit {
   }
 
   private updateShapeColor(value: number): void {
-    const shapeStrokes = this.ctx.$container.find('.tb-shape-stroke');
+    const jQueryContainerElement = $(this.elementRef.nativeElement);
-    const shapeFill = this.ctx.$container.find('.tb-shape-fill');
+    const shapeStrokes = jQueryContainerElement.find('.tb-shape-stroke');
+    const shapeFill = jQueryContainerElement.find('.tb-shape-fill');
     this.tankColor.update(value);
 
     shapeStrokes.each((index, element) => {
@@ -393,6 +398,7 @@ export class LiquidLevelWidgetComponent implements OnInit {
   private updateValueElement(data: number, percentage: number): void {
     let content: string;
     let container: JQuery<HTMLElement>;
+    const jQueryContainerElement = $(this.elementRef.nativeElement);
 
     const value = convertLiters(data, this.widgetUnits as CapacityUnits, ConversionType.from)
       .toFixed(this.settings.decimals || 0);
@@ -412,12 +418,12 @@ export class LiquidLevelWidgetComponent implements OnInit {
       const volumeTextStyle = cssTextFromInlineStyle({...inlineTextStyle(this.settings.volumeFont),
                                                              color: this.volumeColor.color});
 
-      container = this.ctx.$container.find('.absolute-value-container');
+      container = jQueryContainerElement.find('.absolute-value-container');
       content = createAbsoluteLayout({inputValue: value, volume},
         {valueStyle: valueTextStyle, volumeStyle: volumeTextStyle}, this.widgetUnits);
 
     } else if (this.settings.layout === LevelCardLayout.percentage) {
-      container = this.ctx.$container.find('.percentage-value-container');
+      container = jQueryContainerElement.find('.percentage-value-container');
       content = createPercentLayout(value, valueTextStyle);
     }
 

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

@@ -369,13 +369,14 @@ export const valueContainerStyleDefaults = cssTextFromInlineStyle({
   'align-items': 'center',
   'align-content': 'center',
   'justify-content': 'center',
+  'font-family': 'Roboto, Helvetica Neue, sans-serif'
 });
 
-export const valueTextStyleDefaults = 'letterSpacing: normal; font-style: normal; font-weight: 500; line-height: 100%;' +
+export const valueTextStyleDefaults = 'letter-spacing: normal; font-style: normal; font-weight: 500; line-height: 100%;' +
-  '  font-size: 24px; font-family: Roboto; color: #000000DE';
+  '  font-size: 24px; font-family: Roboto, Helvetica Neue, sans-serif; color: #000000DE';
 
-export const volumeTextStyleDefaults = 'letterSpacing: normal; font-style: normal; font-weight: 500;' +
+export const volumeTextStyleDefaults = 'letter-spacing: normal; font-style: normal; font-weight: 500;' +
-  ' line-height: 100%; font-size: 14px; font-family: Roboto; color: rgba(0, 0, 0, 0.18)';
+  ' line-height: 100%; font-size: 14px; font-family: Roboto, Helvetica Neue, sans-serif; color: rgba(0, 0, 0, 0.18)';
 
 export const createAbsoluteLayout = (values?: {inputValue: number | string; volume: number | string},
                                      styles?: {valueStyle: string; volumeStyle: string},

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

@@ -158,12 +158,12 @@
       <div class="tb-form-panel-title" translate>widgets.liquid-level-card.color-and-font</div>
       <div class="tb-form-row space-between">
         <div class="fixed-title-width" translate>widgets.liquid-level-card.tank-color</div>
-        <tb-color-settings formControlName="tankColor">
+        <tb-color-settings formControlName="tankColor" settingsKey="{{'widgets.liquid-level-card.tank-color' | translate }}">
         </tb-color-settings>
       </div>
       <div class="tb-form-row space-between">
         <div class="fixed-title-width" translate>widgets.liquid-level-card.liquid-color</div>
-        <tb-color-settings formControlName="liquidColor">
+        <tb-color-settings formControlName="liquidColor" settingsKey="{{'widgets.liquid-level-card.liquid-color' | translate }}">
         </tb-color-settings>
       </div>
       <div class="tb-form-row space-between"
@@ -173,7 +173,7 @@
           <tb-font-settings formControlName="valueFont"
                             [previewText]="valuePreviewFn">
           </tb-font-settings>
-          <tb-color-settings formControlName="valueColor">
+          <tb-color-settings formControlName="valueColor" settingsKey="{{'widgets.liquid-level-card.value' | translate }}">
           </tb-color-settings>
         </div>
       </div>
@@ -183,7 +183,7 @@
           <tb-font-settings formControlName="volumeFont"
                             [previewText]="totalVolumeValuePreviewFn">
           </tb-font-settings>
-          <tb-color-settings formControlName="volumeColor">
+          <tb-color-settings formControlName="volumeColor" settingsKey="{{'widgets.liquid-level-card.total-volume' | translate }}">
           </tb-color-settings>
         </div>
       </div>
@@ -191,7 +191,7 @@
         <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showBackgroundOverlay">
           {{ 'widgets.liquid-level-card.background-overlay' | translate }}
         </mat-slide-toggle>
-        <tb-color-settings formControlName="backgroundOverlayColor">
+        <tb-color-settings formControlName="backgroundOverlayColor" settingsKey="{{'widgets.liquid-level-card.background-overlay' | translate }}">
         </tb-color-settings>
       </div>
     </div>
@@ -225,7 +225,7 @@
               <tb-font-settings formControlName="tooltipLevelFont"
                                 [previewText]="tooltipValuePreviewFn">
               </tb-font-settings>
-              <tb-color-settings formControlName="tooltipLevelColor">
+              <tb-color-settings formControlName="tooltipLevelColor" settingsKey="{{'widgets.liquid-level-card.level' | translate }}">
               </tb-color-settings>
             </div>
           </div>
@@ -238,13 +238,13 @@
               <tb-font-settings formControlName="tooltipDateFont"
                                 [previewText]="datePreviewFn">
               </tb-font-settings>
-              <tb-color-settings formControlName="tooltipDateColor">
+              <tb-color-settings formControlName="tooltipDateColor" settingsKey="{{'widgets.value-card.date' | translate }}">
               </tb-color-settings>
             </div>
           </div>
           <div class="tb-form-row space-between">
             <div class="fixed-title-width" translate>widgets.liquid-level-card.tooltip-background</div>
-            <tb-color-settings formControlName="tooltipBackgroundColor">
+            <tb-color-settings formControlName="tooltipBackgroundColor" settingsKey="{{'widgets.liquid-level-card.tooltip-background' | translate }}">
             </tb-color-settings>
           </div>
           <div class="tb-form-row space-between">

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

@@ -67,18 +67,18 @@ export class LiquidLevelCardWidgetSettingsComponent extends WidgetSettingsCompon
     const datasourceUnits = this.levelCardWidgetSettingsForm.get('datasourceUnits').value;
     const layout: LevelCardLayout = this.levelCardWidgetSettingsForm.get('layout').value;
     const widgetUnits = this.levelCardWidgetSettingsForm.get('units').value;
-    return !(datasourceUnits === CapacityUnits.percent && layout !== LevelCardLayout.absolute
+
-      || (datasourceUnits === CapacityUnits.percent && widgetUnits === CapacityUnits.percent));
+    if (layout === LevelCardLayout.absolute) {
+      return true;
+    }
+
+    return !(datasourceUnits === CapacityUnits.percent && widgetUnits === CapacityUnits.percent);
   }
 
   public get widgetUnitsInput(): boolean {
     const layout: LevelCardLayout = this.levelCardWidgetSettingsForm.get('layout').value;
 
-    if (layout === LevelCardLayout.absolute) {
+    return layout === LevelCardLayout.absolute;
-      const datasourceUnits = this.levelCardWidgetSettingsForm.get('datasourceUnits').value;
-      return !(datasourceUnits === CapacityUnits.percent);
-    }
-    return false;
   }
 
   public get datasource(): Datasource {
@@ -239,8 +239,10 @@ export class LiquidLevelCardWidgetSettingsComponent extends WidgetSettingsCompon
     }
 
     if (trigger === 'datasourceUnits' || trigger === 'layout' || trigger === 'units') {
-      if (datasourceUnits === CapacityUnits.percent && (layout !== LevelCardLayout.absolute)
+      if (
-        || (datasourceUnits === CapacityUnits.percent && widgetUnits?.value === CapacityUnits.percent)
+        datasourceUnits === CapacityUnits.percent &&
+        layout !== LevelCardLayout.absolute &&
+        (!widgetUnits?.value || widgetUnits?.value === CapacityUnits.percent)
       ) {
         volumeSource.disable({emitEvent: false});
         this.levelCardWidgetSettingsForm.get('volumeConstant').disable({emitEvent: false});

ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts

@@ -302,7 +302,7 @@ import {
 } from '@home/components/widget/lib/settings/cards/progress-bar-widget-settings.component';
 import {
   LiquidLevelCardWidgetSettingsComponent
-} from '@home/components/widget/lib/settings/cards/liquid-level-card-widget-settings.component';
+} from '@home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component';
 
 @NgModule({
   declarations: [