From 16fa1780c0750af56508d2fbf01aac54e18e07d3 Mon Sep 17 00:00:00 2001
From: Dmitriymush <powder322@gmail.com>
Date: Wed, 24 Jan 2024 13:25:02 +0200
Subject: [PATCH 1/4] UI: liquid level widget improvements

---
 ...uid-level-card-basic-config.component.html | 24 ++++++-
 ...iquid-level-card-basic-config.component.ts |  6 +-
 .../liquid-level-widget.component.ts          | 63 ++++++++++++++-----
 .../indicator/liquid-level-widget.models.ts   | 31 +++++++--
 ...-level-card-widget-settings.component.html | 24 ++++++-
 ...id-level-card-widget-settings.component.ts |  4 +-
 .../assets/locale/locale.constant-en_US.json  |  1 +
 7 files changed, 127 insertions(+), 26 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
index d79947185b..4940df18ba 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
@@ -184,10 +184,30 @@
                                   formControlName="volumeAttributeName">
           </tb-string-autocomplete>
         </ng-template>
-        <tb-unit-input [tagFilter]="unitsType.capacity"
-                       required style="max-width: 25%" class="flex"
+      </div>
+    </div>
+    <div class="tb-form-row space-between" [fxShow]="volumeInput">
+      <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume-units</div>
+      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
+          <mat-select formControlName="volumeUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
+            <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
+              {{ DataSourceTypeTranslations.get(type) | translate }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+        <tb-unit-input *ngIf="levelCardWidgetConfigForm.get('volumeUnitsSource').value === DataSourceType.static; else selectVolumeUnitsAttributes"
+                       class="flex" required
+                       [tagFilter]="unitsType.capacity"
                        formControlName="volumeUnits">
         </tb-unit-input>
+        <ng-template #selectVolumeUnitsAttributes>
+          <tb-string-autocomplete [fetchOptionsFn]="fetchOptions.bind(this)"
+                                  required style="flex: 1"
+                                  [errorText]="'widgets.liquid-level-card.attribute-name-required' | translate"
+                                  formControlName="volumeUnitsAttributeName">
+          </tb-string-autocomplete>
+        </ng-template>
       </div>
     </div>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.ts
index b246ed2db1..0fc034d496 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.ts
@@ -194,7 +194,9 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon
       volumeSource: [settings.volumeSource, []],
       volumeConstant: [settings.volumeConstant, [Validators.required, Validators.min(0.1)]],
       volumeAttributeName: [settings.volumeAttributeName, [Validators.required]],
+      volumeUnitsSource: [settings.volumeUnitsSource, []],
       volumeUnits: [settings.volumeUnits, [Validators.required]],
+      volumeUnitsAttributeName: [settings.volumeUnitsAttributeName, [Validators.required]],
       volumeFont: [settings.volumeFont, []],
       volumeColor: [settings.volumeColor, []],
       units: [settings.units, [Validators.required]],
@@ -260,6 +262,8 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon
     this.widgetConfig.config.settings.volumeSource = config.volumeSource;
     this.widgetConfig.config.settings.volumeConstant = config.volumeConstant;
     this.widgetConfig.config.settings.volumeAttributeName = config.volumeAttributeName;
+    this.widgetConfig.config.settings.volumeUnitsSource = config.volumeUnitsSource;
+    this.widgetConfig.config.settings.volumeUnitsAttributeName = config.volumeUnitsAttributeName;
     this.widgetConfig.config.settings.volumeUnits = config.volumeUnits;
     this.widgetConfig.config.settings.volumeFont = config.volumeFont;
     this.widgetConfig.config.settings.volumeColor = config.volumeColor;
@@ -294,7 +298,7 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon
   protected validatorTriggers(): string[] {
     return [
       'showTooltip', 'showTooltipLevel', 'tankSelectionType', 'datasourceUnits', 'showTitleIcon', 'volumeSource',
-      'showTooltipDate', 'layout', 'showTitle', 'widgetUnitsSource'
+      'showTooltipDate', 'layout', 'showTitle', 'widgetUnitsSource', 'volumeUnitsSource'
     ];
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.ts
index 3c79883bf3..0933bfe537 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.ts
@@ -106,6 +106,7 @@ export class LiquidLevelWidgetComponent implements OnInit {
   private volume: number;
   private tooltipContent: string;
   private widgetUnits: string;
+  private volumeUnits: string;
 
   private capacityUnits = Object.values(CapacityUnits);
 
@@ -128,7 +129,7 @@ export class LiquidLevelWidgetComponent implements OnInit {
 
     this.getData().subscribe(data => {
       if (data) {
-        const { svg, volume, units } = data;
+        const { svg, volume, units, volumeUnits } = data;
         if (svg && isNotEmptyStr(svg) && this.liquidLevelContent.nativeElement) {
           const jQueryContainerElement = $(this.liquidLevelContent.nativeElement);
           jQueryContainerElement.html(svg);
@@ -145,6 +146,10 @@ export class LiquidLevelWidgetComponent implements OnInit {
           this.volume = Number(volume);
         }
 
+        if (volumeUnits) {
+          this.volumeUnits = volumeUnits;
+        }
+
         if (units) {
           this.widgetUnits = units;
         }
@@ -164,7 +169,7 @@ export class LiquidLevelWidgetComponent implements OnInit {
     this.tooltipDateFormat = DateFormatProcessor.fromSettings(this.ctx.$injector, this.settings.tooltipDateFormat);
   }
 
-  private getData(): Observable<{ svg: string; volume: number; units: string }> {
+  private getData(): Observable<{ svg: string; volume: number; units: string; volumeUnits: string}> {
     if (this.ctx.datasources?.length) {
       const entityId: EntityId = {
         entityType: this.ctx.datasources[0].entityType,
@@ -308,7 +313,7 @@ export class LiquidLevelWidgetComponent implements OnInit {
         .pipe(map(attributes => {
             const shape = extractValue<Shapes>(attributes, this.settings.shapeAttributeName);
             if (!shape || !svgMapping.has(shape)) {
-              this.createdErrorMgs(this.settings.shapeAttributeName, isUndefinedOrNull(shape) || isEmptyStr(shape));
+              this.createdErrorMsg(this.settings.shapeAttributeName, isUndefinedOrNull(shape) || isEmptyStr(shape));
               return this.settings.selectedShape;
             }
             return shape;
@@ -318,12 +323,15 @@ export class LiquidLevelWidgetComponent implements OnInit {
     return of(this.settings.selectedShape);
   }
 
-  private getTankersParams(entityId: EntityId): Observable<{ volume: number; units: string }> {
+  private getTankersParams(entityId: EntityId): Observable<{ volume: number; units: string; volumeUnits: string }> {
     const isVolumeStatic = this.settings.layout !== LevelCardLayout.absolute
       && this.settings.datasourceUnits === CapacityUnits.percent
       || this.settings.volumeSource === LiquidWidgetDataSourceType.static;
     const isUnitStatic =  this.settings.layout !== LevelCardLayout.absolute ||
       this.settings.widgetUnitsSource === LiquidWidgetDataSourceType.static;
+    const isVolumeUnitStatic = this.settings.layout !== LevelCardLayout.absolute
+      && this.settings.datasourceUnits === CapacityUnits.percent
+      || this.settings.volumeUnitsSource === LiquidWidgetDataSourceType.static;
 
     const attributeKeys: string[] = [];
 
@@ -335,20 +343,29 @@ export class LiquidLevelWidgetComponent implements OnInit {
       attributeKeys.push(this.settings.widgetUnitsAttributeName);
     }
 
+    if (!isVolumeUnitStatic) {
+      attributeKeys.push(this.settings.volumeUnitsAttributeName);
+    }
+
     if (!attributeKeys.length || entityId.id === NULL_UUID) {
       return of({
         volume: this.settings.volumeConstant,
+        volumeUnits: this.settings.volumeUnits,
         units: this.settings.units
       });
     }
 
     return this.ctx.attributeService.getEntityAttributes(entityId, null, attributeKeys).pipe(
       map(attributes => {
-        let volume = isVolumeStatic ? this.settings.volumeConstant : extractValue<number>(attributes, this.settings.volumeAttributeName);
-        let units = isUnitStatic ? this.settings.units : extractValue<string>(attributes, this.settings.widgetUnitsAttributeName);
+        let volume = isVolumeStatic ? this.settings.volumeConstant :
+          extractValue<number>(attributes, this.settings.volumeAttributeName);
+        let volumeUnits = isVolumeUnitStatic ? this.settings.volumeUnits :
+          extractValue<string>(attributes, this.settings.volumeUnitsAttributeName);
+        let units = isUnitStatic ? this.settings.units :
+          extractValue<string>(attributes, this.settings.widgetUnitsAttributeName);
 
         if (!isVolumeStatic && (!volume || !isNumeric(volume) || volume < 0.1)) {
-          this.createdErrorMgs(this.settings.volumeAttributeName, isUndefinedOrNull(volume) || isEmptyStr(volume));
+          this.createdErrorMsg(this.settings.volumeAttributeName, isUndefinedOrNull(volume) || isEmptyStr(volume));
           volume = this.settings.volumeConstant;
         }
 
@@ -358,20 +375,33 @@ export class LiquidLevelWidgetComponent implements OnInit {
             units = this.capacityUnits.find(unit => unit.normalize() === normalizeUnits);
           }
           if (isUndefinedOrNull(units) || !isNotEmptyStr(units)) {
-            this.createdErrorMgs(this.settings.widgetUnitsAttributeName, isUndefinedOrNull(units) || isEmptyStr(units));
+            this.createdErrorMsg(this.settings.widgetUnitsAttributeName, isUndefinedOrNull(units) || isEmptyStr(units));
             units = this.settings.units;
           }
         }
 
+        if (!isVolumeUnitStatic) {
+          if (isNotEmptyStr(volumeUnits)) {
+            const normalizeUnits = volumeUnits.normalize().trim();
+            volumeUnits = this.capacityUnits.find(unit => unit.normalize() === normalizeUnits);
+          }
+          if (isUndefinedOrNull(volumeUnits) || !isNotEmptyStr(volumeUnits)) {
+            this.createdErrorMsg(this.settings.widgetUnitsAttributeName,
+              isUndefinedOrNull(volumeUnits) || isEmptyStr(volumeUnits));
+            volumeUnits = this.settings.volumeUnits;
+          }
+        }
+
         return {
           volume,
+          volumeUnits,
           units
         };
       })
     );
   }
 
-  private createdErrorMgs(attributeName: string, isEmpty = false) {
+  private createdErrorMsg(attributeName: string, isEmpty = false) {
     if (isEmpty) {
       this.errorsMsg.push(this.translate.instant('widgets.liquid-level-card.attribute-key-not-set', {attributeName}));
     } else {
@@ -474,9 +504,14 @@ export class LiquidLevelWidgetComponent implements OnInit {
     }
 
     if (this.settings.layout === LevelCardLayout.absolute) {
-      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);
+      let volume: number | string;
+      if (this.widgetUnits !== CapacityUnits.percent) {
+        const volumeInLiters: number = convertLiters(this.volume, this.volumeUnits as CapacityUnits, ConversionType.to);
+        volume = convertLiters(volumeInLiters, this.widgetUnits as CapacityUnits, ConversionType.from)
+          .toFixed(this.settings.decimals || 0);
+      } else {
+        volume = this.volume.toFixed(this.settings.decimals || 0);
+      }
 
       const volumeTextStyle = cssTextFromInlineStyle({...inlineTextStyle(this.settings.volumeFont),
                                                              color: this.settings.volumeColor});
@@ -553,7 +588,7 @@ export class LiquidLevelWidgetComponent implements OnInit {
   private convertInputData(value: any): number {
     if (this.settings.datasourceUnits !== CapacityUnits.percent) {
       return (convertLiters(Number(value), this.settings.datasourceUnits, ConversionType.to) /
-        convertLiters(this.volume, this.settings.volumeUnits, ConversionType.to)) * 100;
+        convertLiters(this.volume, this.volumeUnits as CapacityUnits, ConversionType.to)) * 100;
     }
 
     return Number(value);
@@ -561,7 +596,7 @@ export class LiquidLevelWidgetComponent implements OnInit {
 
   private convertOutputData(value: number): number {
     if (this.widgetUnits !== CapacityUnits.percent) {
-      return convertLiters(this.volume * (value / 100), this.settings.volumeUnits, ConversionType.to);
+      return convertLiters(this.volume * (value / 100), this.volumeUnits as CapacityUnits, ConversionType.to);
     }
 
     return value;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.models.ts
index 954e228e79..632cfe570d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.models.ts
@@ -56,6 +56,8 @@ export interface LevelCardWidgetSettings extends WidgetConfig {
   volumeSource: LiquidWidgetDataSourceType;
   volumeConstant: number;
   volumeAttributeName: string;
+  volumeUnitsSource: LiquidWidgetDataSourceType;
+  volumeUnitsAttributeName: string;
   volumeUnits: CapacityUnits;
   volumeFont: Font;
   volumeColor: string;
@@ -257,8 +259,10 @@ export const levelCardDefaultSettings: LevelCardWidgetSettings = {
   iconColor: '#5469FF',
   volumeSource: LiquidWidgetDataSourceType.static,
   volumeConstant: 500,
-  volumeUnits: CapacityUnits.liters,
   volumeAttributeName: 'volume',
+  volumeUnitsSource: LiquidWidgetDataSourceType.static,
+  volumeUnitsAttributeName: 'volumeUnits',
+  volumeUnits: CapacityUnits.liters,
   volumeFont: {
     family: 'Roboto',
     size: 14,
@@ -375,9 +379,7 @@ export const convertLiters = (value: number, units: CapacityUnits, conversionTyp
   return conversionType === ConversionType.to ? value / factor : value * factor;
 };
 
-export const extractValue = <T>(attributes: Array<AttributeData>, attributeName: string): T | undefined => {
-  return attributes.find(attr => attr.key === attributeName)?.value;
-};
+export const extractValue = <T>(attributes: Array<AttributeData>, attributeName: string): T | undefined => attributes.find(attr => attr.key === attributeName)?.value;
 
 export const valueContainerStyleDefaults = cssTextFromInlineStyle({
   width: '100%',
@@ -494,6 +496,7 @@ export const updatedFormSettingsValidators = (formGroup: FormGroup) => {
   const datasourceUnits: string = formGroup.get('datasourceUnits').value;
   const layout: LevelCardLayout = formGroup.get('layout').value;
   const volumeSource: LiquidWidgetDataSourceType = formGroup.get('volumeSource').value;
+  const volumeUnitsSource: LiquidWidgetDataSourceType = formGroup.get('volumeUnitsSource').value;
   const widgetUnitsSource: LiquidWidgetDataSourceType = formGroup.get('widgetUnitsSource').value;
   const showTooltipLevel: boolean = formGroup.get('showTooltipLevel').value;
   const showTooltipDate: boolean = formGroup.get('showTooltipDate').value;
@@ -517,7 +520,7 @@ export const updatedFormSettingsValidators = (formGroup: FormGroup) => {
 
       if (datasourceUnits !== CapacityUnits.percent) {
         formGroup.get('volumeSource').enable({emitEvent: false});
-        formGroup.get('volumeUnits').enable({emitEvent: false});
+        formGroup.get('volumeUnitsSource').enable({emitEvent: false});
         if (volumeSource === LiquidWidgetDataSourceType.static) {
           formGroup.get('volumeConstant').enable({emitEvent: false});
           formGroup.get('volumeAttributeName').disable({emitEvent: false});
@@ -525,11 +528,20 @@ export const updatedFormSettingsValidators = (formGroup: FormGroup) => {
           formGroup.get('volumeConstant').disable({emitEvent: false});
           formGroup.get('volumeAttributeName').enable({emitEvent: false});
         }
+        if (volumeUnitsSource === LiquidWidgetDataSourceType.static) {
+          formGroup.get('volumeUnits').enable({emitEvent: false});
+          formGroup.get('volumeUnitsAttributeName').disable({emitEvent: false});
+        } else {
+          formGroup.get('volumeUnits').disable({emitEvent: false});
+          formGroup.get('volumeUnitsAttributeName').enable({emitEvent: false});
+        }
       } else {
         formGroup.get('volumeSource').disable({emitEvent: false});
         formGroup.get('volumeConstant').disable({emitEvent: false});
         formGroup.get('volumeAttributeName').disable({emitEvent: false});
+        formGroup.get('volumeUnitsSource').disable({emitEvent: false});
         formGroup.get('volumeUnits').disable({emitEvent: false});
+        formGroup.get('volumeUnitsAttributeName').disable({emitEvent: false});
       }
 
       if (layout === LevelCardLayout.simple) {
@@ -557,7 +569,7 @@ export const updatedFormSettingsValidators = (formGroup: FormGroup) => {
       }
 
       formGroup.get('volumeSource').enable({emitEvent: false});
-      formGroup.get('volumeUnits').enable({emitEvent: false});
+      formGroup.get('volumeUnitsSource').enable({emitEvent: false});
       if (volumeSource === LiquidWidgetDataSourceType.static) {
         formGroup.get('volumeConstant').enable({emitEvent: false});
         formGroup.get('volumeAttributeName').disable({emitEvent: false});
@@ -565,6 +577,13 @@ export const updatedFormSettingsValidators = (formGroup: FormGroup) => {
         formGroup.get('volumeConstant').disable({emitEvent: false});
         formGroup.get('volumeAttributeName').enable({emitEvent: false});
       }
+      if (volumeUnitsSource === LiquidWidgetDataSourceType.static) {
+        formGroup.get('volumeUnits').enable({emitEvent: false});
+        formGroup.get('volumeUnitsAttributeName').disable({emitEvent: false});
+      } else {
+        formGroup.get('volumeUnits').disable({emitEvent: false});
+        formGroup.get('volumeUnitsAttributeName').enable({emitEvent: false});
+      }
 
       if (formGroup.get('decimals')) {
         formGroup.get('decimals').enable({emitEvent: false});
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
index e742475e80..d549198273 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
@@ -141,10 +141,30 @@
                                     formControlName="volumeAttributeName">
             </tb-string-autocomplete>
           </ng-template>
-          <tb-unit-input [tagFilter]="unitsType.capacity"
-                         required style="max-width: 25%" class="flex"
+        </div>
+      </div>
+      <div class="tb-form-row space-between" [fxShow]="volumeInput">
+        <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume-units</div>
+        <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
+            <mat-select formControlName="volumeUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
+              <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
+                {{ DataSourceTypeTranslations.get(type) | translate }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+          <tb-unit-input *ngIf="levelCardWidgetSettingsForm.get('volumeUnitsSource').value === DataSourceType.static; else selectVolumeUnitsAttributes"
+                         class="flex" required
+                         [tagFilter]="unitsType.capacity"
                          formControlName="volumeUnits">
           </tb-unit-input>
+          <ng-template #selectVolumeUnitsAttributes>
+            <tb-string-autocomplete [fetchOptionsFn]="fetchOptions.bind(this)"
+                                    required style="flex: 1"
+                                    [errorText]="'widgets.liquid-level-card.attribute-name-required' | translate"
+                                    formControlName="volumeUnitsAttributeName">
+            </tb-string-autocomplete>
+          </ng-template>
         </div>
       </div>
     </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.ts
index 5ed3bea446..e25e02d1b7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.ts
@@ -158,7 +158,9 @@ export class LiquidLevelCardWidgetSettingsComponent extends WidgetSettingsCompon
       volumeSource: [settings.volumeSource, []],
       volumeConstant: [settings.volumeConstant, [Validators.required, Validators.min(0.1)]],
       volumeAttributeName: [settings.volumeAttributeName, [Validators.required]],
+      volumeUnitsSource: [settings.volumeUnitsSource, []],
       volumeUnits: [settings.volumeUnits, [Validators.required]],
+      volumeUnitsAttributeName: [settings.volumeUnitsAttributeName, [Validators.required]],
       volumeFont: [settings.volumeFont, []],
       volumeColor: [settings.volumeColor, []],
       valueFont: [settings.valueFont, []],
@@ -195,7 +197,7 @@ export class LiquidLevelCardWidgetSettingsComponent extends WidgetSettingsCompon
   protected validatorTriggers(): string[] {
     return [
       'showBackgroundOverlay', 'showTooltip', 'showTooltipLevel', 'tankSelectionType', 'datasourceUnits',
-      'showTooltipDate', 'layout', 'volumeSource', 'widgetUnitsSource'
+      'showTooltipDate', 'layout', 'volumeSource', 'widgetUnitsSource', 'volumeUnitsSource'
     ];
   }
 
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 9140f0071a..6ab58e8e50 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -6241,6 +6241,7 @@
             "layout": "Layout",
             "background-overlay": "Value background overlay",
             "total-volume": "Total volume",
+            "total-volume-units": "Total volume units",
             "tank": "Tank",
             "shape": "Shape",
             "datasource-units": "Source units",

From 6614928bce91aa2afd15ea942b97cc82ea59128b Mon Sep 17 00:00:00 2001
From: Dmitriymush <powder322@gmail.com>
Date: Wed, 31 Jan 2024 17:06:49 +0200
Subject: [PATCH 2/4] UI: improvements for form scss

---
 ...uid-level-card-basic-config.component.html | 30 +++++++++----------
 ...-level-card-widget-settings.component.html | 24 +++++++--------
 ui-ngx/src/form.scss                          | 23 ++++++++++++++
 3 files changed, 50 insertions(+), 27 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
index 4940df18ba..2653842e6d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
@@ -34,7 +34,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widgets.liquid-level-card.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="tb-flex-centered-row flex-start">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -49,7 +49,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitleIcon">
         {{ 'widgets.liquid-level-card.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
+      <div class="tb-flex-centered-row flex-end">
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -64,7 +64,7 @@
       </div>
     </div>
     <div fxFlex fxLayout="column" class="tb-form-row space-between">
-      <div fxFlex fxLayout="row" style="width: 100%;" fxLayoutAlign="space-between center">
+      <div class="tb-flex-centered-row space-between no-gap fill-width">
         <div class="fixed-title-width"  translate>widgets.liquid-level-card.shape</div>
         <tb-toggle-select formControlName="tankSelectionType">
           <tb-toggle-option *ngFor="let type of DataSourceTypes" [value]="type">
@@ -96,7 +96,7 @@
                                   formControlName="shapeAttributeName">
           </tb-string-autocomplete>
         </div>
-        <div fxFlex fxLayout="row" fxLayoutAlign="space-between center" style="width: 100%;">
+        <div class="tb-flex-centered-row space-between no-gap fill-width">
           <div class="tb-hint" style="padding: 0;" translate>widgets.liquid-level-card.shape-by-attribute</div>
           <div class="see-example"
                [tb-help-popup]="'widget/lib/indicator/shape_attribute_fn'"
@@ -123,16 +123,16 @@
     <div class="tb-form-panel-title" translate>widgets.liquid-level-card.units</div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.datasource-units</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="end center">
+      <div class="tb-flex-centered-row flex-end no-gap">
         <tb-unit-input required style="max-width: 25%;" class="flex"
                        [tagFilter]="unitsType.capacity"
                        formControlName="datasourceUnits">
         </tb-unit-input>
       </div>
     </div>
-    <div class="tb-form-row space-between" *ngIf="levelCardWidgetConfigForm.get('layout').value === LevelCardLayout.absolute">
+    <div class="tb-form-row space-between column-xs" *ngIf="levelCardWidgetConfigForm.get('layout').value === LevelCardLayout.absolute">
       <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.widget-units</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="tb-flex-centered-row flex-start">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
           <mat-select formControlName="widgetUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
             <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
@@ -154,9 +154,9 @@
         </ng-template>
       </div>
     </div>
-    <div class="tb-form-row" [fxShow]="volumeInput">
+    <div class="tb-form-row column-xs" [fxShow]="volumeInput">
       <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="tb-flex-centered-row flex-start">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
           <mat-select formControlName="volumeSource" placeholder="{{ 'widget-config.set' | translate }}">
             <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
@@ -186,9 +186,9 @@
         </ng-template>
       </div>
     </div>
-    <div class="tb-form-row space-between" [fxShow]="volumeInput">
+    <div class="tb-form-row space-between column-xs" [fxShow]="volumeInput">
       <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume-units</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="tb-flex-centered-row flex-start">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
           <mat-select formControlName="volumeUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
             <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
@@ -226,7 +226,7 @@
     <div class="tb-form-row space-between"
          *ngIf="levelCardWidgetConfigForm.get('layout').value !== LevelCardLayout.simple">
       <div class="fixed-title-width" translate>widgets.liquid-level-card.value</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
+      <div class="tb-flex-centered-row flex-end">
         <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 }}">
@@ -241,7 +241,7 @@
     </div>
     <div class="tb-form-row" *ngIf="levelCardWidgetConfigForm.get('layout').value === LevelCardLayout.absolute">
       <div class="fixed-title-width" translate>widgets.liquid-level-card.total-volume</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
+      <div class="tb-flex-centered-row flex-end">
         <tb-font-settings formControlName="volumeFont"
                           [previewText]="totalVolumeValuePreviewFn">
         </tb-font-settings>
@@ -267,7 +267,7 @@
           <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="end center" fxLayoutGap="8px">
+          <div class="tb-flex-centered-row flex-end">
             <tb-unit-input required class="flex"
                            [tagFilter]="unitsType.capacity"
                            formControlName="tooltipUnits">
@@ -288,7 +288,7 @@
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipDate">
             {{ 'widgets.value-card.date' | translate }}
           </mat-slide-toggle>
-          <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="tb-flex-centered-row flex-start">
             <tb-date-format-select fxFlex formControlName="tooltipDateFormat"></tb-date-format-select>
             <tb-font-settings formControlName="tooltipDateFont"
                               [previewText]="datePreviewFn">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
index d549198273..6e3967c67d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
@@ -19,7 +19,7 @@
   <div class="tb-form-panel no-padding no-border">
     <div class="tb-form-panel">
       <div fxFlex fxLayout="column" class="tb-form-row space-between">
-        <div fxFlex fxLayout="row" style="width: 100%;" fxLayoutAlign="space-between center">
+        <div class="tb-flex-centered-row space-between no-gap fill-width">
           <div class="fixed-title-width"  translate>widgets.liquid-level-card.shape</div>
           <tb-toggle-select formControlName="tankSelectionType">
             <tb-toggle-option *ngFor="let type of DataSourceTypes" [value]="type">
@@ -51,7 +51,7 @@
                                     formControlName="shapeAttributeName">
             </tb-string-autocomplete>
           </div>
-          <div fxFlex fxLayout="row" fxLayoutAlign="space-between center" style="width: 100%;">
+          <div class="tb-flex-centered-row space-between no-gap fill-width">
             <div class="tb-hint" style="padding: 0;" translate>widgets.liquid-level-card.shape-by-attribute</div>
             <div class="see-example"
                  [tb-help-popup]="'widget/lib/indicator/shape_attribute_fn'"
@@ -87,9 +87,9 @@
                        formControlName="datasourceUnits">
         </tb-unit-input>
       </div>
-      <div class="tb-form-row space-between" *ngIf="levelCardWidgetSettingsForm.get('layout').value === LevelCardLayout.absolute">
+      <div class="tb-form-row space-between column-xs" *ngIf="levelCardWidgetSettingsForm.get('layout').value === LevelCardLayout.absolute">
         <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.widget-units</div>
-        <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="tb-flex-centered-row flex-start">
           <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
             <mat-select formControlName="widgetUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
               <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
@@ -111,9 +111,9 @@
           </ng-template>
         </div>
       </div>
-      <div class="tb-form-row" *ngIf="volumeInput">
+      <div class="tb-form-row column-xs" *ngIf="volumeInput">
         <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume</div>
-        <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="tb-flex-centered-row flex-start">
           <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
             <mat-select formControlName="volumeSource" placeholder="{{ 'widget-config.set' | translate }}">
               <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
@@ -143,9 +143,9 @@
           </ng-template>
         </div>
       </div>
-      <div class="tb-form-row space-between" [fxShow]="volumeInput">
+      <div class="tb-form-row space-between column-xs" [fxShow]="volumeInput">
         <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume-units</div>
-        <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="tb-flex-centered-row flex-start">
           <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
             <mat-select formControlName="volumeUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
               <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
@@ -188,7 +188,7 @@
       <div class="tb-form-row space-between"
            *ngIf="levelCardWidgetSettingsForm.get('layout').value !== LevelCardLayout.simple">
         <div class="fixed-title-width" translate>widgets.liquid-level-card.value</div>
-        <div fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
+        <div class="tb-flex-centered-row flex-end">
           <tb-font-settings formControlName="valueFont"
                             [previewText]="valuePreviewFn">
           </tb-font-settings>
@@ -198,7 +198,7 @@
       </div>
       <div class="tb-form-row" *ngIf="levelCardWidgetSettingsForm.get('layout').value === LevelCardLayout.absolute">
         <div class="fixed-title-width" translate>widgets.liquid-level-card.total-volume</div>
-        <div fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
+        <div class="tb-flex-centered-row flex-end">
           <tb-font-settings formControlName="volumeFont"
                             [previewText]="totalVolumeValuePreviewFn">
           </tb-font-settings>
@@ -232,7 +232,7 @@
             <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 class="tb-flex-centered-row flex-start">
               <tb-unit-input [tagFilter]="unitsType.capacity"
                              required class="flex" formControlName="tooltipUnits">
               </tb-unit-input>
@@ -252,7 +252,7 @@
             <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipDate">
               {{ 'widgets.value-card.date' | translate }}
             </mat-slide-toggle>
-            <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="tb-flex-centered-row flex-start">
               <tb-date-format-select fxFlex formControlName="tooltipDateFormat"></tb-date-format-select>
               <tb-font-settings formControlName="tooltipDateFont"
                                 [previewText]="datePreviewFn">
diff --git a/ui-ngx/src/form.scss b/ui-ngx/src/form.scss
index ee6d4167cd..8b857c05c8 100644
--- a/ui-ngx/src/form.scss
+++ b/ui-ngx/src/form.scss
@@ -211,6 +211,29 @@
     }
   }
 
+  .tb-flex-centered-row {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    &.flex-start {
+      justify-content: flex-start;
+    }
+    &.flex-end {
+      justify-content: flex-end;
+    }
+    &.space-between {
+      justify-content: space-between;
+    }
+    &.no-gap {
+      gap: 0;
+    }
+    &.fill-width {
+      width: 100%;
+    }
+  }
+
   .tb-form-panel, .tb-form-row {
     .mat-slide {
       margin: 0;

From ac04e6c7ba6cc041f8f586dc1428fc603750fe65 Mon Sep 17 00:00:00 2001
From: Dmitriymush <powder322@gmail.com>
Date: Wed, 31 Jan 2024 17:17:17 +0200
Subject: [PATCH 3/4] refactoring for tb-flex-row

---
 ...uid-level-card-basic-config.component.html | 24 +++++++++----------
 ...-level-card-widget-settings.component.html | 20 ++++++++--------
 ui-ngx/src/form.scss                          |  6 +++--
 3 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
index 2653842e6d..fd568ad021 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
@@ -34,7 +34,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widgets.liquid-level-card.title' | translate }}
       </mat-slide-toggle>
-      <div class="tb-flex-centered-row flex-start">
+      <div class="tb-flex-row flex-start align-center">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -49,7 +49,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitleIcon">
         {{ 'widgets.liquid-level-card.icon' | translate }}
       </mat-slide-toggle>
-      <div class="tb-flex-centered-row flex-end">
+      <div class="tb-flex-row flex-end align-center">
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -64,7 +64,7 @@
       </div>
     </div>
     <div fxFlex fxLayout="column" class="tb-form-row space-between">
-      <div class="tb-flex-centered-row space-between no-gap fill-width">
+      <div class="tb-flex-row space-between align-center no-gap fill-width">
         <div class="fixed-title-width"  translate>widgets.liquid-level-card.shape</div>
         <tb-toggle-select formControlName="tankSelectionType">
           <tb-toggle-option *ngFor="let type of DataSourceTypes" [value]="type">
@@ -96,7 +96,7 @@
                                   formControlName="shapeAttributeName">
           </tb-string-autocomplete>
         </div>
-        <div class="tb-flex-centered-row space-between no-gap fill-width">
+        <div class="tb-flex-row space-between align-center no-gap fill-width">
           <div class="tb-hint" style="padding: 0;" translate>widgets.liquid-level-card.shape-by-attribute</div>
           <div class="see-example"
                [tb-help-popup]="'widget/lib/indicator/shape_attribute_fn'"
@@ -123,7 +123,7 @@
     <div class="tb-form-panel-title" translate>widgets.liquid-level-card.units</div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.datasource-units</div>
-      <div class="tb-flex-centered-row flex-end no-gap">
+      <div class="tb-flex-row flex-end align-center no-gap">
         <tb-unit-input required style="max-width: 25%;" class="flex"
                        [tagFilter]="unitsType.capacity"
                        formControlName="datasourceUnits">
@@ -132,7 +132,7 @@
     </div>
     <div class="tb-form-row space-between column-xs" *ngIf="levelCardWidgetConfigForm.get('layout').value === LevelCardLayout.absolute">
       <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.widget-units</div>
-      <div class="tb-flex-centered-row flex-start">
+      <div class="tb-flex-row flex-start align-center">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
           <mat-select formControlName="widgetUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
             <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
@@ -156,7 +156,7 @@
     </div>
     <div class="tb-form-row column-xs" [fxShow]="volumeInput">
       <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume</div>
-      <div class="tb-flex-centered-row flex-start">
+      <div class="tb-flex-row flex-start align-center">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
           <mat-select formControlName="volumeSource" placeholder="{{ 'widget-config.set' | translate }}">
             <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
@@ -188,7 +188,7 @@
     </div>
     <div class="tb-form-row space-between column-xs" [fxShow]="volumeInput">
       <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume-units</div>
-      <div class="tb-flex-centered-row flex-start">
+      <div class="tb-flex-row flex-start align-center">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
           <mat-select formControlName="volumeUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
             <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
@@ -226,7 +226,7 @@
     <div class="tb-form-row space-between"
          *ngIf="levelCardWidgetConfigForm.get('layout').value !== LevelCardLayout.simple">
       <div class="fixed-title-width" translate>widgets.liquid-level-card.value</div>
-      <div class="tb-flex-centered-row flex-end">
+      <div class="tb-flex-row flex-end align-center">
         <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 }}">
@@ -241,7 +241,7 @@
     </div>
     <div class="tb-form-row" *ngIf="levelCardWidgetConfigForm.get('layout').value === LevelCardLayout.absolute">
       <div class="fixed-title-width" translate>widgets.liquid-level-card.total-volume</div>
-      <div class="tb-flex-centered-row flex-end">
+      <div class="tb-flex-row flex-end align-center">
         <tb-font-settings formControlName="volumeFont"
                           [previewText]="totalVolumeValuePreviewFn">
         </tb-font-settings>
@@ -267,7 +267,7 @@
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipLevel">
             {{ 'widgets.liquid-level-card.level' | translate }}
           </mat-slide-toggle>
-          <div class="tb-flex-centered-row flex-end">
+          <div class="tb-flex-row flex-end align-center">
             <tb-unit-input required class="flex"
                            [tagFilter]="unitsType.capacity"
                            formControlName="tooltipUnits">
@@ -288,7 +288,7 @@
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipDate">
             {{ 'widgets.value-card.date' | translate }}
           </mat-slide-toggle>
-          <div class="tb-flex-centered-row flex-start">
+          <div class="tb-flex-row flex-start align-center">
             <tb-date-format-select fxFlex formControlName="tooltipDateFormat"></tb-date-format-select>
             <tb-font-settings formControlName="tooltipDateFont"
                               [previewText]="datePreviewFn">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
index 6e3967c67d..8c5e761ea6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
@@ -19,8 +19,8 @@
   <div class="tb-form-panel no-padding no-border">
     <div class="tb-form-panel">
       <div fxFlex fxLayout="column" class="tb-form-row space-between">
-        <div class="tb-flex-centered-row space-between no-gap fill-width">
-          <div class="fixed-title-width"  translate>widgets.liquid-level-card.shape</div>
+        <div class="tb-flex-row space-between align-center no-gap fill-width">
+          <div class="fixed-title-width" translate>widgets.liquid-level-card.shape</div>
           <tb-toggle-select formControlName="tankSelectionType">
             <tb-toggle-option *ngFor="let type of DataSourceTypes" [value]="type">
               {{ DataSourceTypeTranslations.get(type) | translate }}
@@ -51,7 +51,7 @@
                                     formControlName="shapeAttributeName">
             </tb-string-autocomplete>
           </div>
-          <div class="tb-flex-centered-row space-between no-gap fill-width">
+          <div class="tb-flex-row space-between align-center no-gap fill-width">
             <div class="tb-hint" style="padding: 0;" translate>widgets.liquid-level-card.shape-by-attribute</div>
             <div class="see-example"
                  [tb-help-popup]="'widget/lib/indicator/shape_attribute_fn'"
@@ -89,7 +89,7 @@
       </div>
       <div class="tb-form-row space-between column-xs" *ngIf="levelCardWidgetSettingsForm.get('layout').value === LevelCardLayout.absolute">
         <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.widget-units</div>
-        <div class="tb-flex-centered-row flex-start">
+        <div class="tb-flex-row flex-start align-center">
           <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
             <mat-select formControlName="widgetUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
               <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
@@ -113,7 +113,7 @@
       </div>
       <div class="tb-form-row column-xs" *ngIf="volumeInput">
         <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume</div>
-        <div class="tb-flex-centered-row flex-start">
+        <div class="tb-flex-row flex-start align-center">
           <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
             <mat-select formControlName="volumeSource" placeholder="{{ 'widget-config.set' | translate }}">
               <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
@@ -145,7 +145,7 @@
       </div>
       <div class="tb-form-row space-between column-xs" [fxShow]="volumeInput">
         <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume-units</div>
-        <div class="tb-flex-centered-row flex-start">
+        <div class="tb-flex-row flex-start align-center">
           <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
             <mat-select formControlName="volumeUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
               <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
@@ -188,7 +188,7 @@
       <div class="tb-form-row space-between"
            *ngIf="levelCardWidgetSettingsForm.get('layout').value !== LevelCardLayout.simple">
         <div class="fixed-title-width" translate>widgets.liquid-level-card.value</div>
-        <div class="tb-flex-centered-row flex-end">
+        <div class="tb-flex-row flex-end align-center">
           <tb-font-settings formControlName="valueFont"
                             [previewText]="valuePreviewFn">
           </tb-font-settings>
@@ -198,7 +198,7 @@
       </div>
       <div class="tb-form-row" *ngIf="levelCardWidgetSettingsForm.get('layout').value === LevelCardLayout.absolute">
         <div class="fixed-title-width" translate>widgets.liquid-level-card.total-volume</div>
-        <div class="tb-flex-centered-row flex-end">
+        <div class="tb-flex-row flex-end align-center">
           <tb-font-settings formControlName="volumeFont"
                             [previewText]="totalVolumeValuePreviewFn">
           </tb-font-settings>
@@ -232,7 +232,7 @@
             <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipLevel">
               {{ 'widgets.liquid-level-card.level' | translate }}
             </mat-slide-toggle>
-            <div class="tb-flex-centered-row flex-start">
+            <div class="tb-flex-row flex-start align-center">
               <tb-unit-input [tagFilter]="unitsType.capacity"
                              required class="flex" formControlName="tooltipUnits">
               </tb-unit-input>
@@ -252,7 +252,7 @@
             <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipDate">
               {{ 'widgets.value-card.date' | translate }}
             </mat-slide-toggle>
-            <div class="tb-flex-centered-row flex-start">
+            <div class="tb-flex-row flex-start align-center">
               <tb-date-format-select fxFlex formControlName="tooltipDateFormat"></tb-date-format-select>
               <tb-font-settings formControlName="tooltipDateFont"
                                 [previewText]="datePreviewFn">
diff --git a/ui-ngx/src/form.scss b/ui-ngx/src/form.scss
index 8b857c05c8..b88a11979a 100644
--- a/ui-ngx/src/form.scss
+++ b/ui-ngx/src/form.scss
@@ -211,11 +211,10 @@
     }
   }
 
-  .tb-flex-centered-row {
+  .tb-flex-row {
     display: flex;
     flex: 1;
     flex-direction: row;
-    align-items: center;
     gap: 8px;
     &.flex-start {
       justify-content: flex-start;
@@ -226,6 +225,9 @@
     &.space-between {
       justify-content: space-between;
     }
+    &.align-center {
+      align-items: center;
+    }
     &.no-gap {
       gap: 0;
     }

From b298f5a52a327975665f3c4c61349f3488f69301 Mon Sep 17 00:00:00 2001
From: Dmitriymush <powder322@gmail.com>
Date: Wed, 31 Jan 2024 17:43:57 +0200
Subject: [PATCH 4/4] refactoring for tb-flex

---
 ...uid-level-card-basic-config.component.html | 24 +++++++++----------
 ...-level-card-widget-settings.component.html | 18 +++++++-------
 ui-ngx/src/form.scss                          |  9 +++++--
 3 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
index fd568ad021..b00a89969b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
@@ -34,7 +34,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widgets.liquid-level-card.title' | translate }}
       </mat-slide-toggle>
-      <div class="tb-flex-row flex-start align-center">
+      <div class="tb-flex row flex-start align-center">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -49,7 +49,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitleIcon">
         {{ 'widgets.liquid-level-card.icon' | translate }}
       </mat-slide-toggle>
-      <div class="tb-flex-row flex-end align-center">
+      <div class="tb-flex row flex-end align-center">
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -64,7 +64,7 @@
       </div>
     </div>
     <div fxFlex fxLayout="column" class="tb-form-row space-between">
-      <div class="tb-flex-row space-between align-center no-gap fill-width">
+      <div class="tb-flex row space-between align-center no-gap fill-width">
         <div class="fixed-title-width"  translate>widgets.liquid-level-card.shape</div>
         <tb-toggle-select formControlName="tankSelectionType">
           <tb-toggle-option *ngFor="let type of DataSourceTypes" [value]="type">
@@ -96,7 +96,7 @@
                                   formControlName="shapeAttributeName">
           </tb-string-autocomplete>
         </div>
-        <div class="tb-flex-row space-between align-center no-gap fill-width">
+        <div class="tb-flex row space-between align-center no-gap fill-width">
           <div class="tb-hint" style="padding: 0;" translate>widgets.liquid-level-card.shape-by-attribute</div>
           <div class="see-example"
                [tb-help-popup]="'widget/lib/indicator/shape_attribute_fn'"
@@ -123,7 +123,7 @@
     <div class="tb-form-panel-title" translate>widgets.liquid-level-card.units</div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.datasource-units</div>
-      <div class="tb-flex-row flex-end align-center no-gap">
+      <div class="tb-flex row flex-end align-center no-gap">
         <tb-unit-input required style="max-width: 25%;" class="flex"
                        [tagFilter]="unitsType.capacity"
                        formControlName="datasourceUnits">
@@ -132,7 +132,7 @@
     </div>
     <div class="tb-form-row space-between column-xs" *ngIf="levelCardWidgetConfigForm.get('layout').value === LevelCardLayout.absolute">
       <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.widget-units</div>
-      <div class="tb-flex-row flex-start align-center">
+      <div class="tb-flex row flex-start align-center">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
           <mat-select formControlName="widgetUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
             <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
@@ -156,7 +156,7 @@
     </div>
     <div class="tb-form-row column-xs" [fxShow]="volumeInput">
       <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume</div>
-      <div class="tb-flex-row flex-start align-center">
+      <div class="tb-flex row flex-start align-center">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
           <mat-select formControlName="volumeSource" placeholder="{{ 'widget-config.set' | translate }}">
             <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
@@ -188,7 +188,7 @@
     </div>
     <div class="tb-form-row space-between column-xs" [fxShow]="volumeInput">
       <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume-units</div>
-      <div class="tb-flex-row flex-start align-center">
+      <div class="tb-flex row flex-start align-center">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
           <mat-select formControlName="volumeUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
             <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
@@ -226,7 +226,7 @@
     <div class="tb-form-row space-between"
          *ngIf="levelCardWidgetConfigForm.get('layout').value !== LevelCardLayout.simple">
       <div class="fixed-title-width" translate>widgets.liquid-level-card.value</div>
-      <div class="tb-flex-row flex-end align-center">
+      <div class="tb-flex row flex-end align-center">
         <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 }}">
@@ -241,7 +241,7 @@
     </div>
     <div class="tb-form-row" *ngIf="levelCardWidgetConfigForm.get('layout').value === LevelCardLayout.absolute">
       <div class="fixed-title-width" translate>widgets.liquid-level-card.total-volume</div>
-      <div class="tb-flex-row flex-end align-center">
+      <div class="tb-flex row flex-end align-center">
         <tb-font-settings formControlName="volumeFont"
                           [previewText]="totalVolumeValuePreviewFn">
         </tb-font-settings>
@@ -267,7 +267,7 @@
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipLevel">
             {{ 'widgets.liquid-level-card.level' | translate }}
           </mat-slide-toggle>
-          <div class="tb-flex-row flex-end align-center">
+          <div class="tb-flex row flex-end align-center">
             <tb-unit-input required class="flex"
                            [tagFilter]="unitsType.capacity"
                            formControlName="tooltipUnits">
@@ -288,7 +288,7 @@
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipDate">
             {{ 'widgets.value-card.date' | translate }}
           </mat-slide-toggle>
-          <div class="tb-flex-row flex-start align-center">
+          <div class="tb-flex row flex-start align-center">
             <tb-date-format-select fxFlex formControlName="tooltipDateFormat"></tb-date-format-select>
             <tb-font-settings formControlName="tooltipDateFont"
                               [previewText]="datePreviewFn">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
index 8c5e761ea6..0040e7fa64 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
@@ -19,7 +19,7 @@
   <div class="tb-form-panel no-padding no-border">
     <div class="tb-form-panel">
       <div fxFlex fxLayout="column" class="tb-form-row space-between">
-        <div class="tb-flex-row space-between align-center no-gap fill-width">
+        <div class="tb-flex row space-between align-center no-gap fill-width">
           <div class="fixed-title-width" translate>widgets.liquid-level-card.shape</div>
           <tb-toggle-select formControlName="tankSelectionType">
             <tb-toggle-option *ngFor="let type of DataSourceTypes" [value]="type">
@@ -51,7 +51,7 @@
                                     formControlName="shapeAttributeName">
             </tb-string-autocomplete>
           </div>
-          <div class="tb-flex-row space-between align-center no-gap fill-width">
+          <div class="tb-flex row space-between align-center no-gap fill-width">
             <div class="tb-hint" style="padding: 0;" translate>widgets.liquid-level-card.shape-by-attribute</div>
             <div class="see-example"
                  [tb-help-popup]="'widget/lib/indicator/shape_attribute_fn'"
@@ -89,7 +89,7 @@
       </div>
       <div class="tb-form-row space-between column-xs" *ngIf="levelCardWidgetSettingsForm.get('layout').value === LevelCardLayout.absolute">
         <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.widget-units</div>
-        <div class="tb-flex-row flex-start align-center">
+        <div class="tb-flex row flex-start align-center">
           <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
             <mat-select formControlName="widgetUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
               <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
@@ -113,7 +113,7 @@
       </div>
       <div class="tb-form-row column-xs" *ngIf="volumeInput">
         <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume</div>
-        <div class="tb-flex-row flex-start align-center">
+        <div class="tb-flex row flex-start align-center">
           <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
             <mat-select formControlName="volumeSource" placeholder="{{ 'widget-config.set' | translate }}">
               <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
@@ -145,7 +145,7 @@
       </div>
       <div class="tb-form-row space-between column-xs" [fxShow]="volumeInput">
         <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume-units</div>
-        <div class="tb-flex-row flex-start align-center">
+        <div class="tb-flex row flex-start align-center">
           <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
             <mat-select formControlName="volumeUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
               <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
@@ -188,7 +188,7 @@
       <div class="tb-form-row space-between"
            *ngIf="levelCardWidgetSettingsForm.get('layout').value !== LevelCardLayout.simple">
         <div class="fixed-title-width" translate>widgets.liquid-level-card.value</div>
-        <div class="tb-flex-row flex-end align-center">
+        <div class="tb-flex row flex-end align-center">
           <tb-font-settings formControlName="valueFont"
                             [previewText]="valuePreviewFn">
           </tb-font-settings>
@@ -198,7 +198,7 @@
       </div>
       <div class="tb-form-row" *ngIf="levelCardWidgetSettingsForm.get('layout').value === LevelCardLayout.absolute">
         <div class="fixed-title-width" translate>widgets.liquid-level-card.total-volume</div>
-        <div class="tb-flex-row flex-end align-center">
+        <div class="tb-flex row flex-end align-center">
           <tb-font-settings formControlName="volumeFont"
                             [previewText]="totalVolumeValuePreviewFn">
           </tb-font-settings>
@@ -232,7 +232,7 @@
             <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipLevel">
               {{ 'widgets.liquid-level-card.level' | translate }}
             </mat-slide-toggle>
-            <div class="tb-flex-row flex-start align-center">
+            <div class="tb-flex row flex-start align-center">
               <tb-unit-input [tagFilter]="unitsType.capacity"
                              required class="flex" formControlName="tooltipUnits">
               </tb-unit-input>
@@ -252,7 +252,7 @@
             <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipDate">
               {{ 'widgets.value-card.date' | translate }}
             </mat-slide-toggle>
-            <div class="tb-flex-row flex-start align-center">
+            <div class="tb-flex row flex-start align-center">
               <tb-date-format-select fxFlex formControlName="tooltipDateFormat"></tb-date-format-select>
               <tb-font-settings formControlName="tooltipDateFont"
                                 [previewText]="datePreviewFn">
diff --git a/ui-ngx/src/form.scss b/ui-ngx/src/form.scss
index b88a11979a..eb26a95455 100644
--- a/ui-ngx/src/form.scss
+++ b/ui-ngx/src/form.scss
@@ -211,11 +211,16 @@
     }
   }
 
-  .tb-flex-row {
+  .tb-flex {
     display: flex;
     flex: 1;
-    flex-direction: row;
     gap: 8px;
+    &.row {
+      flex-direction: row;
+    }
+    &.column {
+      flex-direction: column;
+    }
     &.flex-start {
       justify-content: flex-start;
     }