From 3a5ab479f00371db7af42eae0640d84aad2c007b Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Thu, 17 Oct 2024 11:45:35 +0300
Subject: [PATCH] Flex layout replacements. Switch to tailwind.css.

---
 .../custom_pretty_create_dialog_html.md       | 62 +++++++--------
 .../custom_pretty_edit_dialog_html.md         | 76 +++++++++---------
 .../custom_pretty_clone_device_html.md        | 11 ++-
 .../custom_pretty_create_dialog_html.md       | 62 +++++++--------
 .../custom_pretty_create_user_html.md         | 29 +++----
 .../custom_pretty_create_user_js.md           | 10 +--
 .../custom_pretty_edit_dialog_html.md         | 78 +++++++++----------
 .../custom_pretty_edit_image_html.md          | 10 +--
 .../widget/action/mobile_process_image_fn.md  | 10 +--
 .../widget/editor/examples/alarm_widget.md    |  6 +-
 .../editor/examples/latest_values_widget.md   |  4 +-
 .../widget/editor/examples/rpc_widget.md      |  2 +-
 .../widget/editor/examples/static_widget.md   |  2 +-
 13 files changed, 178 insertions(+), 184 deletions(-)

diff --git a/ui-ngx/src/assets/help/en_US/widget/action/examples/custom_pretty_create_dialog_html.md b/ui-ngx/src/assets/help/en_US/widget/action/examples/custom_pretty_create_dialog_html.md
index e9a2a90ef7..db3c17e0b5 100644
--- a/ui-ngx/src/assets/help/en_US/widget/action/examples/custom_pretty_create_dialog_html.md
+++ b/ui-ngx/src/assets/help/en_US/widget/action/examples/custom_pretty_create_dialog_html.md
@@ -4,9 +4,9 @@
 {:code-style="max-height: 400px;"}
 <form #addEntityForm="ngForm" [formGroup]="addEntityFormGroup"
       (ngSubmit)="save()" class="add-entity-form">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>Add entity</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button (click)="cancel()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
@@ -14,21 +14,21 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-  <div mat-dialog-content fxLayout="column">
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-      <mat-form-field fxFlex class="mat-block">
+  <div mat-dialog-content class="flex flex-col">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Entity Name</mat-label>
         <input matInput formControlName="entityName" required>
         <mat-error *ngIf="addEntityFormGroup.get('entityName').hasError('required')">
           Entity name is required.
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Entity Label</mat-label>
         <input matInput formControlName="entityLabel" >
       </mat-form-field>
     </div>
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
       <tb-entity-type-select
         class="mat-block"
         formControlName="entityType"
@@ -36,50 +36,50 @@
         [allowedEntityTypes]="allowedEntityTypes"
       ></tb-entity-type-select>
       <tb-entity-subtype-autocomplete
-        fxFlex *ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'"
-        class="mat-block"
+        *ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'"
+        class="mat-block flex-1"
         formControlName="type"
         [required]="true"
         [entityType]="'ASSET'"
       ></tb-entity-subtype-autocomplete>
       <tb-entity-subtype-autocomplete
-        fxFlex *ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'"
-        class="mat-block"
+        *ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'"
+        class="mat-block flex-1"
         formControlName="type"
         [required]="true"
         [entityType]="'DEVICE'"
       ></tb-entity-subtype-autocomplete>
     </div>
-    <div formGroupName="attributes" fxLayout="column">
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+    <div formGroupName="attributes" class="flex flex-col">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Latitude</mat-label>
           <input type="number" step="any" matInput formControlName="latitude">
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Longitude</mat-label>
           <input type="number" step="any" matInput formControlName="longitude">
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Address</mat-label>
           <input matInput formControlName="address">
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Owner</mat-label>
           <input matInput formControlName="owner">
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Integer Value</mat-label>
           <input type="number" step="1" matInput formControlName="number">
           <mat-error *ngIf="addEntityFormGroup.get('attributes.number').hasError('pattern')">
             Invalid integer value.
           </mat-error>
         </mat-form-field>
-        <div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex>
+        <div class="boolean-value-input flex flex-1 flex-col items-center justify-start">
           <label class="checkbox-label">Boolean Value</label>
           <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">
             {{ (addEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }}
@@ -89,11 +89,11 @@
     </div>
     <div class="relations-list">
       <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>
-      <div class="body" [fxShow]="relations().length">
-        <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">
-          <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">
-            <div fxFlex fxLayout="column">
-              <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
+      <div class="body" [class.!hidden]="!relations().length">
+        <div class="row flex flex-row items-center justify-start" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">
+          <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">
+            <div class="flex flex-1 flex-col">
+              <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
                 <mat-form-field class="mat-block" style="min-width: 100px;">
                   <mat-label>Direction</mat-label>
                   <mat-select formControlName="direction" name="direction">
@@ -106,20 +106,20 @@
                   </mat-error>
                 </mat-form-field>
                 <tb-relation-type-autocomplete
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   formControlName="relationType"
                   [required]="true">
                 </tb-relation-type-autocomplete>
               </div>
-              <div fxLayout="row" fxLayout.xs="column">
+              <div class="flex flex-row xs:flex-col">
                 <tb-entity-select
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   [required]="true"
                   formControlName="relatedEntity">
                 </tb-entity-select>
               </div>
             </div>
-            <div fxLayout="column" fxLayoutAlign="center center">
+            <div class="flex flex-col items-center justify-center">
               <button mat-icon-button color="primary"
                       aria-label="Remove"
                       type="button"
@@ -143,7 +143,7 @@
       </div>
     </div>
   </div>
-  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex flex-row items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/examples/custom_pretty_edit_dialog_html.md b/ui-ngx/src/assets/help/en_US/widget/action/examples/custom_pretty_edit_dialog_html.md
index e2f4f531bc..76b656385c 100644
--- a/ui-ngx/src/assets/help/en_US/widget/action/examples/custom_pretty_edit_dialog_html.md
+++ b/ui-ngx/src/assets/help/en_US/widget/action/examples/custom_pretty_edit_dialog_html.md
@@ -4,9 +4,9 @@
 {:code-style="max-height: 400px;"}
 <form #editEntityForm="ngForm" [formGroup]="editEntityFormGroup"
       (ngSubmit)="save()"  class="edit-entity-form">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>Edit {{entityType.toLowerCase()}} {{entityName}}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button (click)="cancel()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
@@ -14,57 +14,57 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-  <div mat-dialog-content fxLayout="column">
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-      <mat-form-field fxFlex class="mat-block">
+  <div mat-dialog-content class="flex flex-col">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Entity Name</mat-label>
         <input matInput formControlName="entityName" required readonly="">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Entity Label</mat-label>
         <input matInput formControlName="entityLabel">
       </mat-form-field>
     </div>
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-      <mat-form-field fxFlex class="mat-block">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Entity Type</mat-label>
         <input matInput formControlName="entityType" readonly>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Type</mat-label>
         <input matInput formControlName="type" readonly>
       </mat-form-field>
     </div>
-    <div formGroupName="attributes" fxLayout="column">
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+    <div formGroupName="attributes" class="flex flex-col">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Latitude</mat-label>
           <input type="number" step="any" matInput formControlName="latitude">
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Longitude</mat-label>
           <input type="number" step="any" matInput formControlName="longitude">
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Address</mat-label>
           <input matInput formControlName="address">
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Owner</mat-label>
           <input matInput formControlName="owner">
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Integer Value</mat-label>
           <input type="number" step="1" matInput formControlName="number">
           <mat-error *ngIf="editEntityFormGroup.get('attributes.number').hasError('pattern')">
             Invalid integer value.
           </mat-error>
         </mat-form-field>
-        <div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex>
+        <div class="boolean-value-input flex flex-1 flex-col items-start justify-center">
           <label class="checkbox-label">Boolean Value</label>
           <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">
             {{ (editEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }}
@@ -74,12 +74,12 @@
     </div>
     <div class="relations-list old-relations">
       <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>
-      <div class="body" [fxShow]="oldRelations().length">
-        <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="oldRelations"
+      <div class="body" [class.!hidden]="!oldRelations().length">
+        <div class="row flex flex-row items-center justify-start" formArrayName="oldRelations"
              *ngFor="let relation of oldRelations().controls; let i = index;">
-          <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">
-            <div fxFlex fxLayout="column">
-              <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
+          <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">
+            <div class="flex flex-1 flex-col">
+              <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
                 <mat-form-field class="mat-block" style="min-width: 100px;">
                   <mat-label>Direction</mat-label>
                   <mat-select formControlName="direction" name="direction">
@@ -92,20 +92,20 @@
                   </mat-error>
                 </mat-form-field>
                 <tb-relation-type-autocomplete
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   formControlName="relationType"
                   required="true">
                 </tb-relation-type-autocomplete>
               </div>
-              <div fxLayout="row" fxLayout.xs="column">
+              <div class="flex flex-row xs:flex-col">
                 <tb-entity-select
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   required="true"
                   formControlName="relatedEntity">
                 </tb-entity-select>
               </div>
             </div>
-            <div fxLayout="column" fxLayoutAlign="center center">
+            <div class="flex flex-col items-center justify-center">
               <button mat-icon-button color="primary"
                       aria-label="Remove"
                       type="button"
@@ -121,11 +121,11 @@
     </div>
     <div class="relations-list">
       <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">New Relations</div>
-      <div class="body" [fxShow]="relations().length">
-        <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">
-          <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">
-            <div fxFlex fxLayout="column">
-              <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
+      <div class="body" [class.!hidden]="!relations().length">
+        <div class="row flex flex-row items-center justify-start" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">
+          <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">
+            <div class="flex flex-1 flex-col">
+              <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
                 <mat-form-field class="mat-block" style="min-width: 100px;">
                   <mat-label>Direction</mat-label>
                   <mat-select formControlName="direction" name="direction">
@@ -138,20 +138,20 @@
                   </mat-error>
                 </mat-form-field>
                 <tb-relation-type-autocomplete
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   formControlName="relationType"
                   [required]="true">
                 </tb-relation-type-autocomplete>
               </div>
-              <div fxLayout="row" fxLayout.xs="column">
+              <div class="flex flex-row xs:flex-col">
                 <tb-entity-select
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   [required]="true"
                   formControlName="relatedEntity">
                 </tb-entity-select>
               </div>
             </div>
-            <div fxLayout="column" fxLayoutAlign="center center">
+            <div class="flex flex-col items-center justify-center">
               <button mat-icon-button color="primary"
                       aria-label="Remove"
                       type="button"
@@ -175,7 +175,7 @@
       </div>
     </div>
   </div>
-  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex flex-row items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_clone_device_html.md b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_clone_device_html.md
index 7f93d6266b..d012914b00 100644
--- a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_clone_device_html.md
+++ b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_clone_device_html.md
@@ -3,9 +3,9 @@
 ```html
 {:code-style="max-height: 400px;"}
 <form [formGroup]="cloneDeviceFormGroup" (ngSubmit)="save()" style="min-width:320px;">
-    <mat-toolbar fxLayout="row" color="primary">
+    <mat-toolbar class="flex flex-row" color="primary">
         <h2>Clone device: {{ deviceName }}</h2>
-        <span fxFlex></span>
+        <span class="flex-1"></span>
         <button mat-icon-button (click)="cancel()"
                 type="button">
             <mat-icon class="material-icons">close
@@ -16,8 +16,8 @@
                       *ngIf="isLoading$ | async">
     </mat-progress-bar>
     <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-    <div mat-dialog-content fxLayout="column">
-        <mat-form-field fxFlex class="mat-block">
+    <div mat-dialog-content class="flex flex-col">
+        <mat-form-field class="mat-block flex-1">
             <mat-label>Clone device name</mat-label>
             <input matInput formControlName="cloneName" required>
             <mat-error *ngIf="cloneDeviceFormGroup.get('cloneName').hasError('required')">
@@ -25,8 +25,7 @@
             </mat-error>
         </mat-form-field>
     </div>
-    <div mat-dialog-actions fxLayout="row"
-         fxLayoutAlign="end center">
+    <div mat-dialog-actions class="flex flex-row items-center justify-end">
         <button mat-button color="primary" type="button"
                 [disabled]="(isLoading$ | async)"
                 (click)="cancel()" cdkFocusInitial>
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_dialog_html.md b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_dialog_html.md
index e9a2a90ef7..db3c17e0b5 100644
--- a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_dialog_html.md
+++ b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_dialog_html.md
@@ -4,9 +4,9 @@
 {:code-style="max-height: 400px;"}
 <form #addEntityForm="ngForm" [formGroup]="addEntityFormGroup"
       (ngSubmit)="save()" class="add-entity-form">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>Add entity</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button (click)="cancel()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
@@ -14,21 +14,21 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-  <div mat-dialog-content fxLayout="column">
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-      <mat-form-field fxFlex class="mat-block">
+  <div mat-dialog-content class="flex flex-col">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Entity Name</mat-label>
         <input matInput formControlName="entityName" required>
         <mat-error *ngIf="addEntityFormGroup.get('entityName').hasError('required')">
           Entity name is required.
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Entity Label</mat-label>
         <input matInput formControlName="entityLabel" >
       </mat-form-field>
     </div>
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
       <tb-entity-type-select
         class="mat-block"
         formControlName="entityType"
@@ -36,50 +36,50 @@
         [allowedEntityTypes]="allowedEntityTypes"
       ></tb-entity-type-select>
       <tb-entity-subtype-autocomplete
-        fxFlex *ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'"
-        class="mat-block"
+        *ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'"
+        class="mat-block flex-1"
         formControlName="type"
         [required]="true"
         [entityType]="'ASSET'"
       ></tb-entity-subtype-autocomplete>
       <tb-entity-subtype-autocomplete
-        fxFlex *ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'"
-        class="mat-block"
+        *ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'"
+        class="mat-block flex-1"
         formControlName="type"
         [required]="true"
         [entityType]="'DEVICE'"
       ></tb-entity-subtype-autocomplete>
     </div>
-    <div formGroupName="attributes" fxLayout="column">
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+    <div formGroupName="attributes" class="flex flex-col">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Latitude</mat-label>
           <input type="number" step="any" matInput formControlName="latitude">
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Longitude</mat-label>
           <input type="number" step="any" matInput formControlName="longitude">
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Address</mat-label>
           <input matInput formControlName="address">
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Owner</mat-label>
           <input matInput formControlName="owner">
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Integer Value</mat-label>
           <input type="number" step="1" matInput formControlName="number">
           <mat-error *ngIf="addEntityFormGroup.get('attributes.number').hasError('pattern')">
             Invalid integer value.
           </mat-error>
         </mat-form-field>
-        <div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex>
+        <div class="boolean-value-input flex flex-1 flex-col items-center justify-start">
           <label class="checkbox-label">Boolean Value</label>
           <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">
             {{ (addEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }}
@@ -89,11 +89,11 @@
     </div>
     <div class="relations-list">
       <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>
-      <div class="body" [fxShow]="relations().length">
-        <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">
-          <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">
-            <div fxFlex fxLayout="column">
-              <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
+      <div class="body" [class.!hidden]="!relations().length">
+        <div class="row flex flex-row items-center justify-start" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">
+          <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">
+            <div class="flex flex-1 flex-col">
+              <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
                 <mat-form-field class="mat-block" style="min-width: 100px;">
                   <mat-label>Direction</mat-label>
                   <mat-select formControlName="direction" name="direction">
@@ -106,20 +106,20 @@
                   </mat-error>
                 </mat-form-field>
                 <tb-relation-type-autocomplete
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   formControlName="relationType"
                   [required]="true">
                 </tb-relation-type-autocomplete>
               </div>
-              <div fxLayout="row" fxLayout.xs="column">
+              <div class="flex flex-row xs:flex-col">
                 <tb-entity-select
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   [required]="true"
                   formControlName="relatedEntity">
                 </tb-entity-select>
               </div>
             </div>
-            <div fxLayout="column" fxLayoutAlign="center center">
+            <div class="flex flex-col items-center justify-center">
               <button mat-icon-button color="primary"
                       aria-label="Remove"
                       type="button"
@@ -143,7 +143,7 @@
       </div>
     </div>
   </div>
-  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex flex-row items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_user_html.md b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_user_html.md
index c523258fbc..44343e8d2f 100644
--- a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_user_html.md
+++ b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_user_html.md
@@ -3,9 +3,9 @@
 ```html
 {:code-style="max-height: 400px;"}
 <form [formGroup]="addEntityFormGroup" (ngSubmit)="save()" style="min-width:480px;">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>Add new User</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button (click)="cancel()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
@@ -15,10 +15,9 @@
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)">
   </div>
-  <div mat-dialog-content fxLayout="column">
-    <div fxLayout="row" fxLayoutGap="8px"
-         fxLayout.xs="column" fxLayoutGap.xs="0">
-      <mat-form-field fxFlex class="mat-block">
+  <div mat-dialog-content class="flex flex-col">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Email</mat-label>
         <input matInput formControlName="email" required
                ng-pattern='/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\_\-0-9]+\.)+[a-zA-Z]{2,}))$/'>
@@ -30,25 +29,22 @@
         </mat-error>
       </mat-form-field>
     </div>
-    <div fxLayout="row" fxLayoutGap="8px"
-         fxLayout.xs="column" fxLayoutGap.xs="0">
-      <mat-form-field fxFlex class="mat-block">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>First Name</mat-label>
         <input matInput
                formControlName="firstName">
       </mat-form-field>
     </div>
-    <div fxLayout="row" fxLayoutGap="8px"
-         fxLayout.xs="column" fxLayoutGap.xs="0">
-      <mat-form-field fxFlex class="mat-block">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Last Name</mat-label>
         <input matInput
                formControlName="lastName">
       </mat-form-field>
     </div>
-    <div fxLayout="row" fxLayoutGap="8px"
-         fxLayout.xs="column" fxLayoutGap.xs="0">
-      <mat-form-field fxFlex class="mat-block">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>User activation method</mat-label>
         <mat-select matInput formControlName="userActivationMethod">
           <mat-option *ngFor="let activationMethod of activationMethods" [value]="activationMethod.value">
@@ -60,8 +56,7 @@
       </mat-form-field>
     </div>
   </div>
-  <div mat-dialog-actions fxLayout="row"
-       fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex flex-row items-center justify-end">
     <button mat-button color="primary" type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_user_js.md b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_user_js.md
index 130426c6cf..c23de01abf 100644
--- a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_user_js.md
+++ b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_user_js.md
@@ -93,7 +93,7 @@ function ActivationLinkDialogController(instance) {
 let activationLinkDialogTemplate = `<form style="min-width: 400px; position: relative;">
   <mat-toolbar color="primary">
     <h2 translate>user.activation-link</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="close()"
             type="button">
@@ -104,10 +104,10 @@ let activationLinkDialogTemplate = `<form style="min-width: 400px; position: rel
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
   <div mat-dialog-content tb-toast toastTarget="activationLinkDialogContent">
-    <div class="mat-content" fxLayout="column">
+    <div class="mat-content" class="flex flex-col">
       <span [innerHTML]="'user.activation-link-text' | translate: {activationLink: activationLink}"></span>
-      <div fxLayout="row" fxLayoutAlign="start center">
-        <pre class="tb-highlight" fxFlex><code>{{ activationLink }}</code></pre>
+      <div class="flex flex-row items-center justify-start">
+        <pre class="tb-highlight flex-1"><code>{{ activationLink }}</code></pre>
         <button mat-icon-button
                 color="primary"
                 ngxClipboard
@@ -120,7 +120,7 @@ let activationLinkDialogTemplate = `<form style="min-width: 400px; position: rel
       </div>
     </div>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_edit_dialog_html.md b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_edit_dialog_html.md
index 05f494666f..76b656385c 100644
--- a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_edit_dialog_html.md
+++ b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_edit_dialog_html.md
@@ -4,9 +4,9 @@
 {:code-style="max-height: 400px;"}
 <form #editEntityForm="ngForm" [formGroup]="editEntityFormGroup"
       (ngSubmit)="save()"  class="edit-entity-form">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>Edit {{entityType.toLowerCase()}} {{entityName}}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button (click)="cancel()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
@@ -14,57 +14,57 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-  <div mat-dialog-content fxLayout="column">
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-      <mat-form-field fxFlex class="mat-block">
+  <div mat-dialog-content class="flex flex-col">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Entity Name</mat-label>
         <input matInput formControlName="entityName" required readonly="">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Entity Label</mat-label>
         <input matInput formControlName="entityLabel">
       </mat-form-field>
     </div>
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-      <mat-form-field fxFlex class="mat-block">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Entity Type</mat-label>
         <input matInput formControlName="entityType" readonly>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Type</mat-label>
         <input matInput formControlName="type" readonly>
       </mat-form-field>
     </div>
-    <div formGroupName="attributes" fxLayout="column">
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+    <div formGroupName="attributes" class="flex flex-col">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Latitude</mat-label>
           <input type="number" step="any" matInput formControlName="latitude">
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Longitude</mat-label>
           <input type="number" step="any" matInput formControlName="longitude">
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Address</mat-label>
           <input matInput formControlName="address">
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Owner</mat-label>
           <input matInput formControlName="owner">
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Integer Value</mat-label>
           <input type="number" step="1" matInput formControlName="number">
           <mat-error *ngIf="editEntityFormGroup.get('attributes.number').hasError('pattern')">
             Invalid integer value.
           </mat-error>
         </mat-form-field>
-        <div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex>
+        <div class="boolean-value-input flex flex-1 flex-col items-start justify-center">
           <label class="checkbox-label">Boolean Value</label>
           <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">
             {{ (editEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }}
@@ -74,12 +74,12 @@
     </div>
     <div class="relations-list old-relations">
       <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>
-      <div class="body" [fxShow]="oldRelations().length">
-        <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="oldRelations"
+      <div class="body" [class.!hidden]="!oldRelations().length">
+        <div class="row flex flex-row items-center justify-start" formArrayName="oldRelations"
              *ngFor="let relation of oldRelations().controls; let i = index;">
-          <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">
-            <div fxFlex fxLayout="column">
-              <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
+          <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">
+            <div class="flex flex-1 flex-col">
+              <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
                 <mat-form-field class="mat-block" style="min-width: 100px;">
                   <mat-label>Direction</mat-label>
                   <mat-select formControlName="direction" name="direction">
@@ -92,20 +92,20 @@
                   </mat-error>
                 </mat-form-field>
                 <tb-relation-type-autocomplete
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   formControlName="relationType"
                   required="true">
                 </tb-relation-type-autocomplete>
               </div>
-              <div fxLayout="row" fxLayout.xs="column">
+              <div class="flex flex-row xs:flex-col">
                 <tb-entity-select
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   required="true"
                   formControlName="relatedEntity">
                 </tb-entity-select>
               </div>
             </div>
-            <div fxLayout="column" fxLayoutAlign="center center">
+            <div class="flex flex-col items-center justify-center">
               <button mat-icon-button color="primary"
                       aria-label="Remove"
                       type="button"
@@ -121,16 +121,16 @@
     </div>
     <div class="relations-list">
       <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">New Relations</div>
-      <div class="body" [fxShow]="relations().length">
-        <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">
-          <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">
-            <div fxFlex fxLayout="column">
-              <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
+      <div class="body" [class.!hidden]="!relations().length">
+        <div class="row flex flex-row items-center justify-start" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">
+          <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">
+            <div class="flex flex-1 flex-col">
+              <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
                 <mat-form-field class="mat-block" style="min-width: 100px;">
                   <mat-label>Direction</mat-label>
                   <mat-select formControlName="direction" name="direction">
                     <mat-option *ngFor="let direction of entitySearchDirection | keyvalue" [value]="direction.value">
-                        {{ ("relation.search-direction." + direction.value) | translate}}
+                      {{ ("relation.search-direction." + direction.value) | translate}}
                     </mat-option>
                   </mat-select>
                   <mat-error *ngIf="relation.get('direction').hasError('required')">
@@ -138,20 +138,20 @@
                   </mat-error>
                 </mat-form-field>
                 <tb-relation-type-autocomplete
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   formControlName="relationType"
                   [required]="true">
                 </tb-relation-type-autocomplete>
               </div>
-              <div fxLayout="row" fxLayout.xs="column">
+              <div class="flex flex-row xs:flex-col">
                 <tb-entity-select
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   [required]="true"
                   formControlName="relatedEntity">
                 </tb-entity-select>
               </div>
             </div>
-            <div fxLayout="column" fxLayoutAlign="center center">
+            <div class="flex flex-col items-center justify-center">
               <button mat-icon-button color="primary"
                       aria-label="Remove"
                       type="button"
@@ -175,7 +175,7 @@
       </div>
     </div>
   </div>
-  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex flex-row items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_edit_image_html.md b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_edit_image_html.md
index 3f2eff11c6..4b621239e8 100644
--- a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_edit_image_html.md
+++ b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_edit_image_html.md
@@ -3,9 +3,9 @@
 ```html
 {:code-style="max-height: 400px;"}
 <form [formGroup]="editEntity" (ngSubmit)="save()" class="edit-entity-form">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>Edit {{entityName}} image</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button (click)="cancel()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
@@ -13,15 +13,15 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="(isLoading$ | async) || loading">
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async) && !loading"></div>
-  <div mat-dialog-content fxLayout="column">
-    <div formGroupName="attributes" fxLayout="column">
+  <div mat-dialog-content class="flex flex-col">
+    <div formGroupName="attributes" class="flex flex-col">
       <tb-image-input
         label="Entity image"
         formControlName="image"
       ></tb-image-input>
     </div>
   </div>
-  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex flex-row items-center justify-end">
     <button mat-button mat-raised-button color="primary"
             type="submit"
             [disabled]="(isLoading$ | async) || editEntity.invalid || !editEntity.dirty">
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/mobile_process_image_fn.md b/ui-ngx/src/assets/help/en_US/widget/action/mobile_process_image_fn.md
index 5759571fe7..25df3a7e84 100644
--- a/ui-ngx/src/assets/help/en_US/widget/action/mobile_process_image_fn.md
+++ b/ui-ngx/src/assets/help/en_US/widget/action/mobile_process_image_fn.md
@@ -56,24 +56,24 @@ function showImageDialog(title, imageUrl) {
 var imageDialogTemplate =
     '<div aria-label="Image">' +
     '<form #theForm="ngForm">' +
-    '<mat-toolbar fxLayout="row" color="primary">' +
+    '<mat-toolbar class="flex flex-row" color="primary">' +
     '<h2>{{title}}</h2>' +
-    '<span fxFlex></span>' +
+    '<span class="flex-1"></span>' +
     '<button mat-icon-button (click)="close()">' +
     '<mat-icon>close</mat-icon>' +
     '</button>' +
     '</mat-toolbar>' +
     '<div mat-dialog-content>' +
     '<div class="mat-content mat-padding">' +
-    '<div fxLayout="column" fxFlex>' +
+    '<div class="flex flex-1 flex-col">' +
     '<div style="padding-top: 20px;">' +
     '<img [src]="imageUrl" style="height: 300px;"/>' +
     '</div>' +
     '</div>' +
     '</div>' +
     '</div>' +
-    '<div mat-dialog-actions fxLayout="row">' +
-    '<span fxFlex></span>' +
+    '<div mat-dialog-actions class="flex flex-row">' +
+    '<span class="flex-1"></span>' +
     '<button mat-button (click)="close()" style="margin-right:20px;">Close</button>' +
     '</div>' +
     '</form>' +
diff --git a/ui-ngx/src/assets/help/en_US/widget/editor/examples/alarm_widget.md b/ui-ngx/src/assets/help/en_US/widget/editor/examples/alarm_widget.md
index f3ba4c0590..c0126214c7 100644
--- a/ui-ngx/src/assets/help/en_US/widget/editor/examples/alarm_widget.md
+++ b/ui-ngx/src/assets/help/en_US/widget/editor/examples/alarm_widget.md
@@ -19,9 +19,9 @@ The **Widget Editor** will be opened, pre-populated with the content of the defa
  - Put the following HTML code inside the HTML tab of "Resources" section:
 
 ```html
-  <div fxFlex fxLayout="column" style="height: 100%;">
+  <div class="flex h-full flex-1 flex-col">
       <div>My first Alarm widget.</div>
-      <table class="my-alarm-table" style="width: 100%;">
+      <table class="my-alarm-table w-full">
           <thead>
               <tr>
                   <th *ngFor="let dataKey of alarmSource?.dataKeys">{{dataKey.label}}</th> 
@@ -30,7 +30,7 @@ The **Widget Editor** will be opened, pre-populated with the content of the defa
           <tbody>
               <tr *ngFor="let alarm of alarms">
                   <td *ngFor="let dataKey of alarmSource?.dataKeys" 
-                      [ngStyle]="getAlarmCellStyle(alarm, dataKey)">
+                      [style]="getAlarmCellStyle(alarm, dataKey)">
                       {{getAlarmValue(alarm, dataKey)}}
                   </td>
               </tr>      
diff --git a/ui-ngx/src/assets/help/en_US/widget/editor/examples/latest_values_widget.md b/ui-ngx/src/assets/help/en_US/widget/editor/examples/latest_values_widget.md
index afe4f6a0e1..19f79d0962 100644
--- a/ui-ngx/src/assets/help/en_US/widget/editor/examples/latest_values_widget.md
+++ b/ui-ngx/src/assets/help/en_US/widget/editor/examples/latest_values_widget.md
@@ -11,9 +11,9 @@ The **Widget Editor** will open, pre-populated with the content of the default *
  - Put the following HTML code inside the HTML tab of "Resources" section:
 
 ```html
-  <div fxFlex fxLayout="column" style="height: 100%;" fxLayoutAlign="center stretch">
+  <div class="flex h-full flex-1 flex-col items-stretch justify-center">
     <div>My first latest values widget.</div>
-    <div fxFlex fxLayout="row" *ngFor="let dataKeyData of data" fxLayoutAlign="space-around center">
+    <div class="flex flex-1 flex-row items-center justify-around" *ngFor="let dataKeyData of data">
         <div>{{dataKeyData.dataKey.label}}:</div>
         <div>{{(dataKeyData.data[0] && dataKeyData.data[0][0]) | date : 'yyyy-MM-dd HH:mm:ss' }}</div>
         <div>{{dataKeyData.data[0] && dataKeyData.data[0][1]}}</div>
diff --git a/ui-ngx/src/assets/help/en_US/widget/editor/examples/rpc_widget.md b/ui-ngx/src/assets/help/en_US/widget/editor/examples/rpc_widget.md
index 2fa83c2062..44abed8a46 100644
--- a/ui-ngx/src/assets/help/en_US/widget/editor/examples/rpc_widget.md
+++ b/ui-ngx/src/assets/help/en_US/widget/editor/examples/rpc_widget.md
@@ -12,7 +12,7 @@ The **Widget Editor** will open, pre-populated with default **Control** template
 
 ```html
     <form #rpcForm="ngForm" (submit)="sendCommand()">
-      <div class="mat-content mat-padding" fxLayout="column">
+      <div class="mat-content mat-padding flex flex-col">
         <mat-form-field class="mat-block">
           <mat-label>RPC method</mat-label>
           <input matInput required name="rpcMethod" #rpcMethodField="ngModel" [(ngModel)]="rpcMethod"/>
diff --git a/ui-ngx/src/assets/help/en_US/widget/editor/examples/static_widget.md b/ui-ngx/src/assets/help/en_US/widget/editor/examples/static_widget.md
index 7e73b63307..d7c7901052 100644
--- a/ui-ngx/src/assets/help/en_US/widget/editor/examples/static_widget.md
+++ b/ui-ngx/src/assets/help/en_US/widget/editor/examples/static_widget.md
@@ -10,7 +10,7 @@ The **Widget Editor** will be opened pre-populated with the content of default *
  - Put the following HTML code inside the HTML tab of "Resources" section:
 
 ```html
-  <div fxFlex fxLayout="column" style="height: 100%;" fxLayoutAlign="space-around stretch">
+  <div class="flex h-full flex-1 flex-col items-stretch justify-around">
     <h3 style="text-align: center;">My first static widget.</h3>
     <button mat-raised-button color="primary" (click)="showAlert()">Click me</button>
   </div>