From 1bdf49574d1d1f7721a18c9c73251ffbfe1cefca Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Tue, 15 Oct 2024 18:43:28 +0300
Subject: [PATCH] Flex layout replacements. Switch to tailwind.css.

---
 ...with-labels-widget-settings.component.html |  6 +--
 .../common/advanced-range.component.html      |  8 ++--
 ...-date-format-settings-panel.component.html |  7 ++--
 .../background-settings-panel.component.html  |  8 ++--
 .../common/color-range-list.component.html    | 20 +++++-----
 .../common/color-range-panel.component.html   |  2 +-
 .../color-settings-panel.component.html       | 18 ++++-----
 .../count-widget-settings.component.html      | 16 ++++----
 .../common/css-size-input.component.html      |  2 +-
 .../common/data-key-input.component.html      |  4 +-
 .../date-format-settings-panel.component.html |  4 +-
 .../common/font-settings-panel.component.html | 18 ++++-----
 .../settings/common/gradient.component.html   | 38 +++++++++----------
 .../common/image-cards-select.component.html  |  6 +--
 .../common/value-source.component.html        |  8 ++--
 .../common/widget-font.component.html         | 20 +++++-----
 16 files changed, 91 insertions(+), 94 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html
index bacacd2aab..1322f29f53 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html
@@ -173,7 +173,7 @@
           </div>
           <div class="tb-form-row space-between">
             <div>{{ 'tooltip.value' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="tooltipValueFont"
                                 [initialPreviewStyle]="{ color: barChartWidgetSettingsForm.get('tooltipValueColor').value }"
                                 [previewText]="tooltipValuePreviewFn">
@@ -188,8 +188,8 @@
             <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="tooltipShowDate">
               {{ 'tooltip.date' | translate }}
             </mat-slide-toggle>
-            <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-              <tb-date-format-select fxFlex excludeLastUpdateAgo includeAuto
+            <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
+              <tb-date-format-select class="flex-1" excludeLastUpdateAgo includeAuto
                                      formControlName="tooltipDateFormat"></tb-date-format-select>
               <tb-font-settings formControlName="tooltipDateFont"
                                 [initialPreviewStyle]="{ color: barChartWidgetSettingsForm.get('tooltipDateColor').value }"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/advanced-range.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/advanced-range.component.html
index 4bd50a81c6..f76dc1a94a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/advanced-range.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/advanced-range.component.html
@@ -18,18 +18,18 @@
 <div class="tb-form-row no-padding no-border" style="gap: 0; width: 100%;" [formGroup]="advancedRangeLevelFormGroup">
   <div class="range-container">
     <div class="range-input range-input-fields">
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+      <div class="flex flex-1 flex-row items-center justify-start">
         <div class="range-text" translate>widgets.color.from</div>
-        <tb-value-source-data-key fxFlex
+        <tb-value-source-data-key class="flex-1"
                                   formControlName="from"
                                   [aliasController]="aliasController"
                                   [dataKeyCallbacks]="dataKeyCallbacks"
                                   [datasource]="datasource">
         </tb-value-source-data-key>
       </div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+      <div class="flex flex-1 flex-row items-center justify-start">
         <div class="range-text" translate>widgets.color.to</div>
-        <tb-value-source-data-key fxFlex
+        <tb-value-source-data-key class="flex-1"
                                   formControlName="to"
                                   [aliasController]="aliasController"
                                   [dataKeyCallbacks]="dataKeyCallbacks"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/auto-date-format-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/auto-date-format-settings-panel.component.html
index a88ea77488..54da20f8a5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/auto-date-format-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/auto-date-format-settings-panel.component.html
@@ -20,14 +20,13 @@
   <div class="tb-auto-date-format-settings-panel-content">
     <div class="tb-form-row" *ngFor="let unit of formatTimeUnits">
       <div class="fixed-title-width">{{ formatTimeUnitTranslations.get(unit) | translate }}</div>
-      <div fxFlex fxLayout="column" fxLayoutGap="8px"
-                  fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutGap.gt-xs="16px">
+      <div class="flex flex-1 flex-col gap-2 gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-4">
         <mat-form-field class="tb-date-format-input flex" appearance="outline" subscriptSizing="dynamic">
           <input required matInput [formControlName]="unit" placeholder="{{ 'widget-config.set' | translate }}">
           <div matIconSuffix tb-help-popup="date/date-format" [tb-help-popup-style]="{width: '800px'}"></div>
         </mat-form-field>
-        <mat-divider fxHide fxShow.gt-xs vertical></mat-divider>
-        <div class="preview-text" fxFlex>{{ previewText[unit] }}</div>
+        <mat-divider class="lt-sm:!hidden" vertical></mat-divider>
+        <div class="preview-text flex-1">{{ previewText[unit] }}</div>
       </div>
     </div>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html
index 9038f2a22f..bce7eec5c2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html
@@ -19,18 +19,18 @@
   <div class="tb-background-settings-title" translate>widgets.background.background-settings</div>
   <div class="tb-background-settings-panel-content">
     <div class="tb-form-panel tb-background-form-panel">
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
+      <div class="flex flex-row items-center justify-start gap-4">
         <div class="tb-form-panel-title" translate>widgets.background.background</div>
-        <tb-toggle-select formControlName="type" fxFlex selectMediaBreakpoint="xs">
+        <tb-toggle-select formControlName="type" class="flex-1" selectMediaBreakpoint="xs">
           <tb-toggle-option *ngFor="let type of backgroundTypes"
                             [value]="type">
             {{ backgroundTypeTranslationsMap.get(type) | translate }}
           </tb-toggle-option>
         </tb-toggle-select>
       </div>
-      <tb-gallery-image-input [fxShow]="backgroundSettingsFormGroup.get('type').value === backgroundType.image"
+      <tb-gallery-image-input [class.!hidden]="backgroundSettingsFormGroup.get('type').value !== backgroundType.image"
                               formControlName="imageUrl"></tb-gallery-image-input>
-      <div [fxShow]="backgroundSettingsFormGroup.get('type').value === backgroundType.color"
+      <div [class.!hidden]="backgroundSettingsFormGroup.get('type').value !== backgroundType.color"
            class="tb-form-row space-between tb-background-color-field">
         <div translate>widgets.color.color</div>
         <tb-color-input asBoxInput
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.html
index 3bd47d9921..2dccd63a27 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.html
@@ -16,9 +16,9 @@
 
 -->
 <ng-container  [formGroup]="colorRangeListFormGroup">
-  <div fxLayout="row" fxLayoutAlign="start center" *ngIf="advancedMode; else basicMode">
-    <div fxFlex class="tb-form-panel-title" translate>widgets.color.settings-type</div>
-    <tb-toggle-select formControlName="advancedMode" fxFlex>
+  <div class="flex flex-row items-center justify-start" *ngIf="advancedMode; else basicMode">
+    <div class="tb-form-panel-title flex-1" translate>widgets.color.settings-type</div>
+    <tb-toggle-select formControlName="advancedMode" class="flex-1">
       <tb-toggle-option [value]="false">
         {{ 'widgets.color.basic-mode' | translate }}
       </tb-toggle-option>
@@ -29,8 +29,8 @@
   </div>
 
   <ng-template #basicMode>
-    <div fxLayout="row" fxLayoutAlign="start center">
-      <div fxFlex *ngIf="panelTitle" class="tb-form-panel-title">{{ panelTitle }}</div>
+    <div class="flex flex-row items-center justify-start">
+      <div *ngIf="panelTitle" class="tb-form-panel-title flex-1">{{ panelTitle }}</div>
     </div>
   </ng-template>
 
@@ -41,16 +41,16 @@
         <div cdkDrag class="tb-draggable tb-advanced-range-drag"
              [formGroup]="rangeFormGroup"
              *ngFor="let rangeFormGroup of rangeListFormGroups; trackBy: trackByRange; let $index = index; last as isLast;"
-             [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
-          <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+             [class.pb-2]="!isLast">
+          <div class="flex flex-1 flex-row items-center justify-start">
             <div class="tb-form-row range-container">
               <div class="tb-value-range-text" translate>widgets.color.from</div>
-              <mat-form-field fxFlex appearance="outline" class="center number" subscriptSizing="dynamic">
+              <mat-form-field appearance="outline" class="center number flex-1" subscriptSizing="dynamic">
                 <input matInput type="number" formControlName="from" placeholder="{{ 'widget-config.set' | translate }}">
               </mat-form-field>
 
               <div class="tb-value-range-text tb-value-range-text-to" translate>widgets.color.to</div>
-              <mat-form-field fxFlex appearance="outline" class="center number" subscriptSizing="dynamic">
+              <mat-form-field appearance="outline" class="center number flex-1" subscriptSizing="dynamic">
                 <input matInput type="number" formControlName="to" placeholder="{{ 'widget-config.set' | translate }}">
               </mat-form-field>
 
@@ -84,7 +84,7 @@
            (cdkDropListDropped)="rangeDrop($event, 'rangeAdvanced')">
         <div cdkDrag class="tb-draggable tb-advanced-range-drag"
              *ngFor="let advancedRangeControl of advancedRangeControls; trackBy: trackByAdvancedRange;let $index = index; last as isLast;"
-             [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+             [class.pb-2]="!isLast">
           <tb-advanced-range [formControl]="advancedRangeControl"
                              [aliasController]="aliasController"
                              [dataKeyCallbacks]="dataKeyCallbacks"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-panel.component.html
index 347db57baa..41d847ab1b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-panel.component.html
@@ -39,7 +39,7 @@
           </div>
         </ng-template>
       </mat-menu>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <button mat-button
               color="primary"
               type="button"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.html
index f7df367657..5787d6af24 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.html
@@ -17,8 +17,8 @@
 -->
 <div class="tb-color-settings-panel" [formGroup]="colorSettingsFormGroup">
   <div class="tb-color-settings-title" translate>widgets.color.color-settings</div>
-  <div fxLayout="row">
-    <tb-toggle-select formControlName="type" fxFlex.xs fxFlex="70%">
+  <div class="flex flex-row">
+    <tb-toggle-select formControlName="type" class="max-w-70% flex-full xs:flex-1">
       <tb-toggle-option *ngFor="let type of colorTypes"
                         [value]="type">
         {{ colorTypeTranslationsMap.get(type) | translate }}
@@ -31,9 +31,9 @@
                     formControlName="color">
     </tb-color-input>
   </div>
-  <div class="tb-color-settings-panel-body" [fxShow]="colorSettingsFormGroup.get('type').value === colorType.constant">
+  <div class="tb-color-settings-panel-body" [class.!hidden]="colorSettingsFormGroup.get('type').value !== colorType.constant">
   </div>
-  <div class="tb-color-settings-panel-body" [fxShow]="colorSettingsFormGroup.get('type').value === colorType.gradient">
+  <div class="tb-color-settings-panel-body" [class.!hidden]="colorSettingsFormGroup.get('type').value !== colorType.gradient">
     <tb-gradient class="tb-gradient-panel"
                  formControlName="gradient"
                  [minValue]="minValue"
@@ -45,7 +45,7 @@
                  [popover]="popover">
     </tb-gradient>
   </div>
-  <div class="tb-color-settings-panel-body" [fxShow]="colorSettingsFormGroup.get('type').value === colorType.range">
+  <div class="tb-color-settings-panel-body" [class.!hidden]="colorSettingsFormGroup.get('type').value !== colorType.range">
     <tb-color-range-list class="tb-color-ranges-panel"
                          formControlName="rangeList"
                          panelTitle="{{ 'widgets.color.value-range' | translate }}"
@@ -56,7 +56,7 @@
                          [popover]="popover">
     </tb-color-range-list>
   </div>
-  <div class="tb-color-settings-panel-body" [fxShow]="colorSettingsFormGroup.get('type').value === colorType.function">
+  <div class="tb-color-settings-panel-body" [class.!hidden]="colorSettingsFormGroup.get('type').value !== colorType.function">
     <ng-container *ngTemplateOutlet="function"></ng-container>
   </div>
   <div class="tb-color-settings-panel-buttons">
@@ -66,8 +66,8 @@
             color="primary"
             type="button"
             [matMenuTriggerFor]="settingsSourcesMenu" [matMenuTriggerData]="{menuWidth: copySettingsButton._elementRef.nativeElement.clientWidth}">
-      <span fxHide.xs>{{ 'widgets.color.copy-color-settings-from' | translate }}</span>
-      <span fxHide.gt-xs>{{ 'widgets.color.copy-from' | translate }}</span>
+      <span class="xs:!hidden">{{ 'widgets.color.copy-color-settings-from' | translate }}</span>
+      <span class="gt-xs:!hidden">{{ 'widgets.color.copy-from' | translate }}</span>
     </button>
     <mat-menu #settingsSourcesMenu="matMenu">
       <ng-template matMenuContent let-menuWidth="menuWidth">
@@ -76,7 +76,7 @@
         </div>
       </ng-template>
     </mat-menu>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-button
             color="primary"
             type="button"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html
index 3a9145565c..e5ffbaf972 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html
@@ -37,7 +37,7 @@
     <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
       {{ 'widgets.count.label' | translate }}
     </mat-slide-toggle>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="flex flex-1 flex-row items-center justify-start gap-2">
       <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
         <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
@@ -52,11 +52,11 @@
     <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
       {{ 'widgets.count.icon' | translate }}
     </mat-slide-toggle>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="flex flex-1 flex-row items-center justify-start gap-2">
       <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
         <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
-      <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+      <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
       <tb-material-icon-select asBoxInput
                                iconClearButton
                                [color]="countWidgetConfigForm.get('iconColor').value?.color"
@@ -73,18 +73,18 @@
     <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIconBackground">
       {{ 'widgets.count.icon-background' | translate }}
     </mat-slide-toggle>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="flex flex-1 flex-row items-center justify-start gap-2">
       <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
         <input matInput type="number" min="0" formControlName="iconBackgroundSize" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
-      <tb-css-unit-select fxFlex formControlName="iconBackgroundSizeUnit"></tb-css-unit-select>
+      <tb-css-unit-select class="flex-1" formControlName="iconBackgroundSizeUnit"></tb-css-unit-select>
       <tb-color-settings formControlName="iconBackgroundColor" settingsKey="{{'widgets.count.icon-background' | translate }}">
       </tb-color-settings>
     </div>
   </div>
   <div class="tb-form-row space-between">
     <div translate>widgets.count.value</div>
-    <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="flex flex-row items-center justify-start gap-2">
       <tb-font-settings formControlName="valueFont"
                         previewText="10">
       </tb-font-settings>
@@ -96,11 +96,11 @@
     <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showChevron">
       {{ 'widgets.count.chevron' | translate }}
     </mat-slide-toggle>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="flex flex-1 flex-row items-center justify-start gap-2">
       <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
         <input matInput type="number" min="0" formControlName="chevronSize" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
-      <tb-css-unit-select fxFlex formControlName="chevronSizeUnit"></tb-css-unit-select>
+      <tb-css-unit-select class="flex-1" formControlName="chevronSizeUnit"></tb-css-unit-select>
       <tb-color-input asBoxInput
                       colorClearButton
                       formControlName="chevronColor">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/css-size-input.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/css-size-input.component.html
index 62c3332fec..b4afb11926 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/css-size-input.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/css-size-input.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div [formGroup]="cssSizeFormGroup" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+<div [formGroup]="cssSizeFormGroup" class="flex flex-row items-center justify-start gap-2">
   <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-inline-field tb-suffix-absolute number" [class.flex]="flex">
     <input matInput [required]="required"
            type="number" min="0" formControlName="size" placeholder="{{ 'widget-config.set' | translate }}">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/data-key-input.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/data-key-input.component.html
index d5cc9a183e..71dadb99fd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/data-key-input.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/data-key-input.component.html
@@ -21,7 +21,7 @@
     <mat-chip-row class="tb-datakey-chip" *ngIf="modelValue?.type"
                   [removable]="removable"
                   (removed)="removeKey()">
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="4px" class="tb-attribute-chip">
+      <div class="tb-attribute-chip flex flex-row items-center justify-start gap-1">
         <div class="tb-chip-labels">
           <div class="tb-chip-label tb-chip-text tb-chip-icon">
             <ng-container *ngIf="isEntityDatasource">
@@ -65,7 +65,7 @@
            [required]="required"
            [formControl]="keyFormControl"
            matAutocompleteOrigin
-           [fxHide]="!!modelValue?.type"
+           [class.!hidden]="!!modelValue?.type"
            [readonly]="!!modelValue?.type"
            #origin="matAutocompleteOrigin"
            [matAutocompleteConnectedTo]="origin"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.html
index 2c7801f149..55cf5482d2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.html
@@ -19,7 +19,7 @@
   <div class="tb-date-format-settings-title" translate>date.custom-date</div>
   <div class="tb-form-row no-border no-padding">
     <div class="fixed-title-width" translate>date.format</div>
-    <mat-form-field class="tb-date-format-input" required fxFlex appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field class="tb-date-format-input flex-1" required appearance="outline" subscriptSizing="dynamic">
       <input matInput [formControl]="dateFormatFormControl" placeholder="{{ 'widget-config.set' | translate }}">
       <div matIconSuffix tb-help-popup="date/date-format" [tb-help-popup-style]="{width: '800px'}"></div>
     </mat-form-field>
@@ -27,7 +27,7 @@
   <mat-divider></mat-divider>
   <div class="tb-form-row no-border no-padding date-format-preview">
     <div class="fixed-title-width" translate>date.preview</div>
-    <div class="preview-text" fxFlex>{{ previewText }}</div>
+    <div class="preview-text flex-1">{{ previewText }}</div>
   </div>
   <div class="tb-date-format-settings-panel-buttons">
     <button mat-button
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings-panel.component.html
index e897a9de8b..ab18cead4a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings-panel.component.html
@@ -19,17 +19,17 @@
   <div class="tb-font-settings-title" translate>widgets.widget-font.font-settings</div>
   <div class="tb-form-row no-border no-padding">
     <div class="fixed-title-width" translate>widgets.widget-font.size</div>
-    <div *ngIf="!autoScale" fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
-      <mat-form-field fxFlex appearance="outline" class="number" subscriptSizing="dynamic">
+    <div *ngIf="!autoScale" class="flex flex-1 flex-row items-center justify-start gap-3">
+      <mat-form-field appearance="outline" class="number flex-1" subscriptSizing="dynamic">
         <input matInput type="number" min="0" formControlName="size" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
-      <tb-css-unit-select fxFlex formControlName="sizeUnit"></tb-css-unit-select>
+      <tb-css-unit-select class="flex-1" formControlName="sizeUnit"></tb-css-unit-select>
     </div>
     <div *ngIf="autoScale" class="tb-font-settings-auto" translate>widgets.widget-font.auto</div>
   </div>
   <div class="tb-form-row no-border no-padding">
     <div class="fixed-title-width" translate>widgets.widget-font.font-family</div>
-    <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
       <input matInput #familyInput
              formControlName="family" placeholder="{{ 'widget-config.set' | translate }}"
              [matAutocomplete]="familyAutocomplete">
@@ -51,7 +51,7 @@
   </div>
   <div class="tb-form-row no-border no-padding">
     <div class="fixed-title-width" translate>widgets.widget-font.font-weight</div>
-    <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
       <mat-select formControlName="weight" placeholder="{{ 'widget-config.set' | translate }}">
         <mat-option [value]="null">
         </mat-option>
@@ -63,7 +63,7 @@
   </div>
   <div class="tb-form-row no-border no-padding">
     <div class="fixed-title-width" translate>widgets.widget-font.font-style</div>
-    <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
       <mat-select formControlName="style" placeholder="{{ 'widget-config.set' | translate }}">
         <mat-option [value]="null">
         </mat-option>
@@ -75,7 +75,7 @@
   </div>
   <div class="tb-form-row no-border no-padding" *ngIf="!disabledLineHeight">
     <div class="fixed-title-width" translate>widgets.widget-font.line-height</div>
-    <mat-form-field *ngIf="!autoScale" fxFlex appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field *ngIf="!autoScale" class="flex-1" appearance="outline" subscriptSizing="dynamic">
       <input matInput formControlName="lineHeight" placeholder="{{ 'widget-config.set' | translate }}">
     </mat-form-field>
     <div *ngIf="autoScale" class="tb-font-settings-auto" translate>widgets.widget-font.auto</div>
@@ -83,7 +83,7 @@
   <mat-divider></mat-divider>
   <div class="tb-form-row no-border no-padding font-preview">
     <div class="fixed-title-width" translate>widgets.widget-font.preview</div>
-    <div class="preview-text" fxFlex [style]="previewStyle" [innerHTML]="previewText | safe:'html'"></div>
+    <div class="preview-text flex-1" [style]="previewStyle" [innerHTML]="previewText | safe:'html'"></div>
   </div>
   <div class="tb-font-settings-panel-buttons">
     <button *ngIf="clearButton"
@@ -93,7 +93,7 @@
             [disabled]="clearDisabled()">
       {{ 'action.clear' | translate }}
     </button>
-    <span *ngIf="clearButton" fxFlex></span>
+    <span *ngIf="clearButton" class="flex-1"></span>
     <button mat-button
             color="primary"
             type="button"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.html
index 1b71225a47..fa71a5deff 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.html
@@ -17,9 +17,9 @@
 -->
 <ng-container [formGroup]="gradientFormGroup">
 
-  <div fxLayout="row" fxLayoutAlign="start center" *ngIf="advancedMode">
-    <div fxFlex class="tb-form-panel-title" fxHide.xs translate>widgets.color.gradient-type</div>
-    <tb-toggle-select formControlName="advancedMode" fxFlex>
+  <div class="flex flex-row items-center justify-start" *ngIf="advancedMode">
+    <div class="tb-form-panel-title flex-1 xs:!hidden" translate>widgets.color.gradient-type</div>
+    <tb-toggle-select formControlName="advancedMode" class="flex-1">
       <tb-toggle-option [value]="false">
         {{ 'widgets.color.basic-mode' | translate }}
       </tb-toggle-option>
@@ -41,7 +41,7 @@
           <div translate>widgets.color.gradient-start</div>
           <div class="start-gradient-container">
             <div class="tb-form-row no-border no-padding">
-              <div class="gradient-text" fxHide.xs translate>widgets.color.start-value</div>
+              <div class="gradient-text xs:!hidden" translate>widgets.color.start-value</div>
               <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
                 <input matInput type="number" formControlName="minValue" placeholder="{{ 'widget-config.set' | translate }}">
               </mat-form-field>
@@ -61,7 +61,7 @@
           <div cdkDrag class="tb-form-row no-padding no-border tb-draggable"
                [formGroup]="gradientFormGroup"
                *ngFor="let gradientFormGroup of gradientListFormGroups; trackBy: trackByGradient; let $index = index; last as isLast;"
-               [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+               [class.pb-2]="!isLast">
             <div class="gradient">
               <div class="gradient-container">
                 <div translate>widgets.color.gradient-color</div>
@@ -77,8 +77,7 @@
                       matTooltipPosition="above">
                 <mat-icon>delete</mat-icon>
               </button>
-              <button class="tb-box-button"
-                      fxHide.lt-lg
+              <button class="tb-box-button lt-lg:!hidden"
                       mat-icon-button
                       type="button"
                       cdkDragHandle
@@ -101,7 +100,7 @@
           <div translate>widgets.color.gradient-end</div>
           <div class="end-gradient-container">
             <div class="tb-form-row no-border no-padding">
-              <div class="gradient-text" fxHide.xs translate>widgets.color.end-value</div>
+              <div class="gradient-text xs:!hidden" translate>widgets.color.end-value</div>
               <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
                 <input matInput type="number" formControlName="maxValue" placeholder="{{ 'widget-config.set' | translate }}">
               </mat-form-field>
@@ -119,11 +118,11 @@
       <div class="gradient" formGroupName="gradientAdvanced">
         <div class="gradient-container gradient-container-start" formGroupName="start">
           <div class="tb-gradient-text">
-            <span fxHide.xs translate>widgets.color.gradient-start</span>
-            <span fxHide fxShow.xs translate>widgets.color.gradient-start-min</span>
+            <span class="xs:!hidden" translate>widgets.color.gradient-start</span>
+            <span class="gt-xs:!hidden" translate>widgets.color.gradient-start-min</span>
           </div>
           <div class="tb-form-row no-border no-padding start-gradient-container start-gradient-container-advanced">
-            <tb-value-source-data-key fxFlex
+            <tb-value-source-data-key class="flex-1"
                                       formControlName="source"
                                       [aliasController]="aliasController"
                                       [dataKeyCallbacks]="dataKeyCallbacks"
@@ -142,15 +141,15 @@
           <div cdkDrag class="tb-form-row no-padding no-border tb-draggable"
                [formGroup]="gradientFormGroup"
                *ngFor="let gradientFormGroup of advancedGradientListFormGroups; trackBy: trackByGradient; let $index = index; last as isLast;"
-               [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+               [class.pb-2]="!isLast">
             <div class="gradient">
               <div class="gradient-container">
                 <div class="tb-gradient-text">
-                  <span fxHide.xs translate>widgets.color.gradient-color</span>
-                  <span fxHide fxShow.xs translate>widgets.color.gradient-color-min</span>
+                  <span class="xs:!hidden" translate>widgets.color.gradient-color</span>
+                  <span class="gt-xs:!hidden" translate>widgets.color.gradient-color-min</span>
                 </div>
                 <div class="list-gradient-container list-gradient-container-advanced">
-                  <tb-value-source-data-key fxFlex
+                  <tb-value-source-data-key class="flex-1"
                                             formControlName="source"
                                             [aliasController]="aliasController"
                                             [dataKeyCallbacks]="dataKeyCallbacks"
@@ -169,8 +168,7 @@
                       matTooltipPosition="above">
                 <mat-icon>delete</mat-icon>
               </button>
-              <button class="tb-box-button"
-                      fxHide.lt-lg
+              <button class="tb-box-button lt-lg:!hidden"
                       mat-icon-button
                       type="button"
                       cdkDragHandle
@@ -191,11 +189,11 @@
       <div class="gradient" formGroupName="gradientAdvanced">
         <div class="gradient-container gradient-container-end" formGroupName="end">
           <div class="tb-gradient-text">
-            <span fxHide.xs translate>widgets.color.gradient-end</span>
-            <span fxHide fxShow.xs translate>widgets.color.gradient-end-min</span>
+            <span class="xs:!hidden" translate>widgets.color.gradient-end</span>
+            <span class="gt-xs:!hidden" translate>widgets.color.gradient-end-min</span>
           </div>
           <div class="tb-form-row no-border no-padding end-gradient-container end-gradient-container-advanced">
-            <tb-value-source-data-key fxFlex
+            <tb-value-source-data-key class="flex-1"
                                       formControlName="source"
                                       [aliasController]="aliasController"
                                       [dataKeyCallbacks]="dataKeyCallbacks"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/image-cards-select.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/image-cards-select.component.html
index 16d88debcf..81ab02442b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/image-cards-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/image-cards-select.component.html
@@ -17,10 +17,10 @@
 -->
 <div class="tb-image-cards-select tb-form-panel stroked no-padding">
   <mat-expansion-panel class="tb-settings" [expanded]="expanded" disabled>
-    <mat-expansion-panel-header fxLayout="row wrap">
-      <div fxFlex class="tb-form-row no-border"  [class.expanded]="expanded">
+    <mat-expansion-panel-header class="flex flex-row flex-wrap">
+      <div class="tb-form-row no-border flex-1"  [class.expanded]="expanded">
         <div class="fixed-title-width">{{ label }}</div>
-        <mat-form-field class="tb-image-cards-value-field" fxFlex appearance="outline" subscriptSizing="dynamic" (click)="toggleSelectPanel($event)">
+        <mat-form-field class="tb-image-cards-value-field flex-1" appearance="outline" subscriptSizing="dynamic" (click)="toggleSelectPanel($event)">
           <input readonly matInput [formControl]="valueFormControl" placeholder="{{ 'widget-config.set' | translate }}">
           <mat-icon matSuffix>{{ expanded ? 'expand_less' : 'expand_more' }}</mat-icon>
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.html
index 24c8564ffb..5486996a45 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.html
@@ -17,7 +17,7 @@
 -->
 
 <div class="tb-form-row no-border no-padding column-xs" style="gap: 10px;" [formGroup]="valueSourceFormGroup">
-  <mat-form-field fxFlex="33" fxFlex.xs appearance="outline" subscriptSizing="dynamic">
+  <mat-form-field class="max-w-33% flex-full xs:flex-1" appearance="outline" subscriptSizing="dynamic">
     <mat-select formControlName="valueSource">
       <mat-option [value]="'predefinedValue'">
         {{ 'widgets.value-source.predefined-value' | translate }}
@@ -27,13 +27,13 @@
       </mat-option>
     </mat-select>
   </mat-form-field>
-  <mat-form-field [fxShow]="valueSourceFormGroup.get('valueSource').value === 'predefinedValue'"
+  <mat-form-field [class.!hidden]="valueSourceFormGroup.get('valueSource').value !== 'predefinedValue'"
                   appearance="outline"
                   class="number flex"
                   subscriptSizing="dynamic">
     <input matInput formControlName="value" type="number" placeholder="{{ 'widgets.value-source.value' | translate }}">
   </mat-form-field>
-  <mat-form-field [fxShow]="valueSourceFormGroup.get('valueSource').value === 'entityAttribute'"
+  <mat-form-field [class.!hidden]="valueSourceFormGroup.get('valueSource').value !== 'entityAttribute'"
                   appearance="outline"
                   class="flex"
                   subscriptSizing="dynamic">
@@ -53,7 +53,7 @@
       </mat-option>
     </mat-autocomplete>
   </mat-form-field>
-  <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" [fxShow]="valueSourceFormGroup.get('valueSource').value === 'entityAttribute'">
+  <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" [class.!hidden]="valueSourceFormGroup.get('valueSource').value !== 'entityAttribute'">
     <input matInput type="text" placeholder="{{ entityAttributePlaceholder | translate }}"
            #keyInput
            formControlName="attribute"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html
index 38b71bf638..f192352d83 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html
@@ -15,19 +15,19 @@
     limitations under the License.
 
 -->
-<section [formGroup]="widgetFontFormGroup" fxLayout="column">
-  <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-    <mat-form-field fxFlex class="mat-block">
+<section [formGroup]="widgetFontFormGroup" class="flex flex-col">
+  <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.widget-font.font-family</mat-label>
       <input matInput formControlName="family">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>{{ sizeTitle }}</mat-label>
       <input matInput type="number" min="1" step="1" formControlName="size">
     </mat-form-field>
   </section>
-  <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-    <mat-form-field fxFlex class="mat-block">
+  <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.widget-font.font-style</mat-label>
       <mat-select formControlName="style">
         <mat-option [value]="'normal'">
@@ -41,7 +41,7 @@
         </mat-option>
       </mat-select>
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.widget-font.font-weight</mat-label>
       <mat-select formControlName="weight">
         <mat-option [value]="'normal'">
@@ -68,16 +68,16 @@
       </mat-select>
     </mat-form-field>
   </section>
-  <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
+  <section class="flex flex-row xs:flex-col gt-xs:gap-2">
     <tb-color-input
-      fxFlex
+      class="flex-1"
       formControlName="color"
       icon="format_color_fill"
       label="{{ 'widgets.widget-font.color' | translate }}" openOnInput colorClearButton>
     </tb-color-input>
     <tb-color-input
       *ngIf="hasShadowColor"
-      fxFlex
+      class="flex-1"
       formControlName="shadowColor"
       icon="format_color_fill"
       label="{{ 'widgets.widget-font.shadow-color' | translate }}" openOnInput colorClearButton>