UI: string autocomplete style addition and liquid level widget minor improvement

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

@@ -192,7 +192,7 @@ export class LiquidLevelWidgetComponent implements OnInit {
     if (isDefinedAndNotNull(data) && data.length && typeof Number(data[1]) === 'number') {
       const percentage = this.convertInputData(Number(data[1]));
       this.updateSvg(percentage);
-      this.updateValueElement(this.convertOutputData(percentage));
+      this.updateValueElement(this.convertOutputData(percentage), percentage);
 
       if (this.settings.showTooltip) {
         this.updateTooltip(data);
@@ -382,7 +382,7 @@ export class LiquidLevelWidgetComponent implements OnInit {
     });
   }
 
-  private updateValueElement(data: number): void {
+  private updateValueElement(data: number, percentage: number): void {
     let content: string;
     let container: JQuery<HTMLElement>;
 
@@ -390,13 +390,13 @@ export class LiquidLevelWidgetComponent implements OnInit {
       .toFixed(this.settings.decimals || 0);
     const valueTextStyle = cssTextFromInlineStyle({...inlineTextStyle(this.settings.valueFont),
                                                           color: this.valueColor.color});
-    this.backgroundOverlayColor.update(data);
+    this.backgroundOverlayColor.update(percentage);
     if (this.overlayContainer) {
       this.overlayContainer.attr('fill', this.backgroundOverlayColor.color);
     }
 
     if (this.settings.layout === LevelCardLayout.absolute) {
-      this.volumeColor.update(data);
+      this.volumeColor.update(percentage);
 
       const volumeInLiters: number = convertLiters(this.volume, this.settings.volumeUnits as CapacityUnits, ConversionType.to);
       const volume = convertLiters(volumeInLiters, this.widgetUnits as CapacityUnits, ConversionType.from)

ui-ngx/src/app/shared/components/string-autocomplete.component.scss

@@ -14,24 +14,28 @@
  * limitations under the License.
  */
 :host {
-  display: flex;
-  flex: 1 1 0%;
-  max-width: 100%;
-  box-sizing: border-box;
+  mat-form-field {
+    display: flex;
+    flex: 1 1 0%;
+    max-width: 100%;
+    box-sizing: border-box;
 
-  .tb-autocomplete.tb-option-input-autocomplete {
-    .mat-mdc-option {
-      border-bottom: none;
-      .mdc-list-item__primary-text {
-        flex: 1;
-        display: flex;
-        flex-direction: row;
-        gap: 8px;
-        .tb-option {
-          font-size: 14px;
-          font-weight: 400;
-          line-height: 20px;
-          letter-spacing: 0.2px;
+    .tb-autocomplete.tb-option-input-autocomplete {
+      .mat-mdc-option {
+        border-bottom: none;
+
+        .mdc-list-item__primary-text {
+          flex: 1;
+          display: flex;
+          flex-direction: row;
+          gap: 8px;
+
+          .tb-option {
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 20px;
+            letter-spacing: 0.2px;
+          }
         }
       }
     }