Flex layout replacements. Switch to tailwind.css.

ui-ngx/src/app/modules/home/pages/asset/asset.component.html

@@ -15,63 +15,63 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePublic')"
-          [fxShow]="!isEdit && assetScope === 'tenant' && !isAssignedToCustomer(entity) && !entity?.customerIsPublic">
+          [class.!hidden]="isEdit || assetScope !== 'tenant' || isAssignedToCustomer(entity) || entity?.customerIsPublic">
     {{'asset.make-public' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'assignToCustomer')"
-          [fxShow]="!isEdit && assetScope === 'tenant' && !isAssignedToCustomer(entity)">
+          [class.!hidden]="isEdit || assetScope !== 'tenant' || isAssignedToCustomer(entity)">
     {{'asset.assign-to-customer' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromCustomer')"
-          [fxShow]="!isEdit && (assetScope === 'customer' || assetScope === 'tenant') && isAssignedToCustomer(entity)">
+          [class.!hidden]="isEdit || (assetScope !== 'customer' && assetScope !== 'tenant') || !isAssignedToCustomer(entity)">
     {{ (entity?.customerIsPublic ? 'asset.make-private' : 'asset.unassign-from-customer') | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromEdge')"
-          [fxShow]="!isEdit && assetScope === 'edge'">
+          [class.!hidden]="isEdit || assetScope !== 'edge'">
     {{ 'edge.unassign-from-edge' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'asset.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onAssetIdCopied($event)"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>asset.copyId</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <mat-form-field class="mat-block"
-                  [fxShow]="!isEdit && isAssignedToCustomer(entity)
+                  [class.!hidden]="isEdit || !isAssignedToCustomer(entity)
-                              && !entity?.customerIsPublic && assetScope === 'tenant'">
+                              || entity?.customerIsPublic || assetScope !== 'tenant'">
     <mat-label translate>asset.assignedToCustomer</mat-label>
     <input matInput disabled [ngModel]="entity?.customerTitle">
   </mat-form-field>
   <div class="tb-small" style="padding-bottom: 10px; padding-left: 2px;"
-       [fxShow]="!isEdit && entity?.customerIsPublic && (assetScope === 'customer' || assetScope === 'tenant')">
+       [class.!hidden]="isEdit || !entity?.customerIsPublic || (assetScope !== 'customer' && assetScope !== 'tenant')">
     {{ 'asset.asset-public' | translate }}
   </div>
   <form [formGroup]="entityForm">

ui-ngx/src/app/modules/home/pages/customer/customer.component.html

@@ -15,64 +15,64 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageUsers')"
-          [fxShow]="!isEdit && !isPublic">
+          [class.!hidden]="isEdit || isPublic">
     {{'customer.manage-users' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageAssets')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'customer.manage-assets' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageDevices')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'customer.manage-devices' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageDashboards')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'customer.manage-dashboards' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageEdges')"
-          [fxShow]="!isEdit"
+          [class.!hidden]="isEdit">
           *ngIf="edgesSupportEnabled()">
     {{'customer.manage-edges' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit && !isPublic">
+          [class.!hidden]="hideDelete() || isEdit || isPublic">
     {{'customer.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onCustomerIdCopied($event)"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>customer.copyId</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <form [formGroup]="entityForm">
-    <fieldset [fxShow]="!isPublic" [disabled]="(isLoading$ | async) || !isEdit">
+    <fieldset [class.!hidden]="isPublic" [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
         <mat-label translate>customer.title</mat-label>
         <input matInput formControlName="title" required/>
@@ -83,22 +83,22 @@
           {{ 'customer.title-max-length' | translate }}
         </mat-error>
       </mat-form-field>
-      <div formGroupName="additionalInfo" fxLayout="column">
+      <div formGroupName="additionalInfo" class="flex flex-col">
         <mat-form-field class="mat-block">
           <mat-label translate>customer.description</mat-label>
           <textarea matInput formControlName="description" rows="2"></textarea>
         </mat-form-field>
-        <section class="tb-default-dashboard" fxFlex fxLayout="column" *ngIf="entity?.id">
+        <section class="tb-default-dashboard flex flex-1 flex-col" *ngIf="entity?.id">
-          <section fxFlex fxLayout="column" fxLayout.gt-sm="row">
+          <section class="flex flex-1 flex-col gt-sm:flex-row">
             <tb-dashboard-autocomplete
-              fxFlex
+              class="flex-1"
               label="{{ 'dashboard.home-dashboard' | translate }}"
               formControlName="homeDashboardId"
               [dashboardsScope]="'customer'"
               [customerId]="entity?.id.id"
               [selectFirstDashboard]="false"
             ></tb-dashboard-autocomplete>
-            <mat-checkbox fxFlex formControlName="homeDashboardHideToolbar">
+            <mat-checkbox class="flex-1" formControlName="homeDashboardHideToolbar">
               {{ 'dashboard.home-dashboard-hide-toolbar' | translate }}
             </mat-checkbox>
           </section>

ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html

@@ -15,75 +15,75 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'dashboard.open-dashboard' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'export')"
-          [fxShow]="!isEdit && dashboardScope === 'tenant'">
+          [class.!hidden]="isEdit || dashboardScope !== 'tenant'">
     {{'dashboard.export' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePublic')"
-          [fxShow]="!isEdit && dashboardScope === 'tenant' && !isPublic(entity)">
+          [class.!hidden]="isEdit || dashboardScope !== 'tenant' || isPublic(entity)">
     {{'dashboard.make-public' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePrivate')"
-          [fxShow]="!isEdit && (dashboardScope === 'tenant' && isPublic(entity)
+          [class.!hidden]="isEdit || !(dashboardScope === 'tenant' && isPublic(entity)
                                 || dashboardScope === 'customer' && isCurrentPublicCustomer(entity))">
     {{'dashboard.make-private' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageAssignedCustomers')"
-          [fxShow]="!isEdit && dashboardScope === 'tenant'">
+          [class.!hidden]="isEdit || dashboardScope !== 'tenant'">
     {{'dashboard.manage-assigned-customers' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromCustomer')"
-          [fxShow]="!isEdit && dashboardScope === 'customer' && !isCurrentPublicCustomer(entity)">
+          [class.!hidden]="isEdit || dashboardScope !== 'customer' || isCurrentPublicCustomer(entity)">
     {{ 'dashboard.unassign-from-customer' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromEdge')"
-          [fxShow]="!isEdit && dashboardScope === 'edge'">
+          [class.!hidden]="isEdit || dashboardScope !== 'edge'">
     {{ 'edge.unassign-from-edge' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'dashboard.delete' | translate }}
   </button>
-  <div fxLayout="row">
+  <div class="flex flex-row">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onDashboardIdCopied($event)"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>dashboard.copyId</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <mat-form-field class="mat-block"
-                  [fxShow]="!isEdit && assignedCustomersText?.length
+                  [class.!hidden]="isEdit || !assignedCustomersText?.length
-                              && dashboardScope === 'tenant'">
+                              || dashboardScope !== 'tenant'">
     <mat-label translate>dashboard.assignedToCustomers</mat-label>
     <input matInput disabled [ngModel]="assignedCustomersText">
   </mat-form-field>
-  <div fxLayout="column" [fxShow]="!isEdit && (dashboardScope === 'tenant' && isPublic(entity)
+  <div class="flex flex-col" [class.!hidden]="isEdit || !(dashboardScope === 'tenant' && isPublic(entity)
                                 || dashboardScope === 'customer' && isCurrentPublicCustomer(entity))">
     <tb-social-share-panel style="padding-bottom: 1.25em;"
                            shareTitle="{{ 'dashboard.socialshare-title' | translate:{dashboardTitle: entity?.title} }}"
@@ -91,8 +91,8 @@
                            shareLink="{{ publicLink }}"
                            shareHashTags="thingsboard, iot">
     </tb-social-share-panel>
-    <div fxLayout="row">
+    <div class="flex flex-row">
-      <mat-form-field class="mat-block" fxFlex>
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>dashboard.public-link</mat-label>
         <input matInput disabled [ngModel]="publicLink">
       </mat-form-field>
@@ -118,7 +118,7 @@
           {{ 'dashboard.title-max-length' | translate }}
         </mat-error>
       </mat-form-field>
-      <div formGroupName="configuration" fxLayout="column">
+      <div formGroupName="configuration" class="flex flex-col">
         <mat-form-field class="mat-block">
           <mat-label translate>dashboard.description</mat-label>
           <textarea matInput formControlName="description" rows="2"></textarea>
@@ -139,7 +139,7 @@
           <mat-label translate>dashboard.mobile-order</mat-label>
           <input matInput formControlName="mobileOrder" type="number" step="1">
         </mat-form-field>
-        <tb-gallery-image-input fxFlex
+        <tb-gallery-image-input class="flex-1"
                                 label="{{'dashboard.image' | translate}}"
                                 formControlName="image">
         </tb-gallery-image-input>

ui-ngx/src/app/modules/home/pages/dashboard/make-dashboard-public-dialog.component.html

@@ -16,9 +16,9 @@
 
 -->
 <div style="min-width: 400px; position: relative;">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>{{ 'dashboard.public-dashboard-title' | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="close()"
             type="button">
@@ -32,8 +32,8 @@
     <span
        innerHTML="{{ translate.get('dashboard.public-dashboard-text', {dashboardTitle: dashboard.title, publicLink: publicLink}) | async }}">
     </span>
-    <div fxLayout="row" fxLayoutAlign="start center">
+    <div class="flex flex-row items-center justify-start">
-      <pre class="tb-highlight" fxFlex><code>{{ publicLink }}</code></pre>
+      <pre class="tb-highlight flex-1"><code>{{ publicLink }}</code></pre>
       <button mat-icon-button
               ngxClipboard
               (cbOnSuccess)="onPublicLinkCopied($event)"
@@ -51,8 +51,8 @@
                            shareHashTags="thingsboard, iot">
     </tb-social-share-panel>
   </div>
-  <div mat-dialog-actions fxLayout="row">
+  <div mat-dialog-actions class="flex flex-row">
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"

ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html

@@ -17,9 +17,9 @@
 -->
 <form style="width: 600px;"
       [formGroup]="dashboardCustomersFormGroup" (ngSubmit)="submit()">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>{{ titleText | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -39,8 +39,8 @@
       </tb-entity-list>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayout="row">
+  <div mat-dialog-actions class="flex flex-row">
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"

ui-ngx/src/app/modules/home/pages/device/data/snmp-device-transport-configuration.component.html

@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<form [formGroup]="snmpDeviceTransportConfigurationFormGroup" style="padding-bottom: 16px;"  fxLayoutGap="8px" fxLayout="column">
+<form [formGroup]="snmpDeviceTransportConfigurationFormGroup" class="flex flex-col gap-2 pb-4">
-  <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column">
+  <div class="flex flex-row gap-2 xs:flex-col">
-    <mat-form-field fxFlex>
+    <mat-form-field class="flex-1">
       <mat-label translate>device-profile.snmp.host</mat-label>
       <input matInput formControlName="host" required>
       <mat-error *ngIf="snmpDeviceTransportConfigurationFormGroup.get('host').hasError('required') ||
@@ -25,7 +25,7 @@
         {{ 'device-profile.snmp.host-required' | translate }}
       </mat-error>
     </mat-form-field>
-    <mat-form-field fxFlex>
+    <mat-form-field class="flex-1">
       <mat-label translate>device-profile.snmp.port</mat-label>
       <input matInput formControlName="port" type="number" min="0" required>
       <mat-error *ngIf="snmpDeviceTransportConfigurationFormGroup.get('port').hasError('required')">
@@ -59,8 +59,8 @@
     </mat-form-field>
   </section>
   <section *ngIf="isV3protocolVersion()">
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column">
+    <div class="flex flex-row gap-2 xs:flex-col">
-      <mat-form-field fxFlex>
+      <mat-form-field class="flex-1">
         <mat-label translate>device-profile.snmp.user-name</mat-label>
         <input matInput formControlName="username" required>
         <mat-error *ngIf="snmpDeviceTransportConfigurationFormGroup.get('username').hasError('required') ||
@@ -68,7 +68,7 @@
           {{ 'device-profile.snmp.user-name-required' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex>
+      <mat-form-field class="flex-1">
         <mat-label translate>device-profile.snmp.security-name</mat-label>
         <input matInput formControlName="securityName" required>
         <mat-error *ngIf="snmpDeviceTransportConfigurationFormGroup.get('securityName').hasError('required') ||
@@ -77,8 +77,8 @@
         </mat-error>
       </mat-form-field>
     </div>
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column">
+    <div class="flex flex-row gap-2 xs:flex-col">
-      <mat-form-field fxFlex floatLabel="always" hideRequiredMarker>
+      <mat-form-field class="flex-1" floatLabel="always" hideRequiredMarker>
         <mat-label translate>device-profile.snmp.authentication-protocol</mat-label>
         <mat-select formControlName="authenticationProtocol" required>
           <mat-option *ngFor="let snmpAuthenticationProtocol of snmpAuthenticationProtocols" [value]="snmpAuthenticationProtocol">
@@ -89,7 +89,7 @@
           {{ 'device-profile.snmp.authentication-protocol-required' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex>
+      <mat-form-field class="flex-1">
         <mat-label translate>device-profile.snmp.authentication-passphrase</mat-label>
         <input matInput formControlName="authenticationPassphrase" required>
         <mat-error *ngIf="snmpDeviceTransportConfigurationFormGroup.get('authenticationPassphrase').hasError('required') ||
@@ -98,8 +98,8 @@
         </mat-error>
       </mat-form-field>
     </div>
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column">
+    <div class="flex flex-row gap-2 xs:flex-col">
-      <mat-form-field fxFlex floatLabel="always" hideRequiredMarker>
+      <mat-form-field class="flex-1" floatLabel="always" hideRequiredMarker>
         <mat-label translate>device-profile.snmp.privacy-protocol</mat-label>
         <mat-select formControlName="privacyProtocol" required>
           <mat-option *ngFor="let snmpPrivacyProtocol of snmpPrivacyProtocols" [value]="snmpPrivacyProtocol">
@@ -110,7 +110,7 @@
           {{ 'device-profile.snmp.privacy-protocol-required' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex>
+      <mat-form-field class="flex-1">
         <mat-label translate>device-profile.snmp.privacy-passphrase</mat-label>
         <input matInput formControlName="privacyPassphrase" required>
         <mat-error *ngIf="snmpDeviceTransportConfigurationFormGroup.get('privacyPassphrase').hasError('required') ||
@@ -119,12 +119,12 @@
         </mat-error>
       </mat-form-field>
     </div>
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column">
+    <div class="flex flex-row gap-2 xs:flex-col">
-      <mat-form-field fxFlex>
+      <mat-form-field class="flex-1">
         <mat-label translate>device-profile.snmp.context-name</mat-label>
         <input matInput formControlName="contextName">
       </mat-form-field>
-      <mat-form-field fxFlex>
+      <mat-form-field class="flex-1">
         <mat-label translate>device-profile.snmp.engine-id</mat-label>
         <input matInput formControlName="engineId">
       </mat-form-field>

ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html

@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2 translate>{{ dialogTitle }}</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
 <!--  <div [tb-help]="'check-connectivity'"></div>-->
   <button mat-icon-button
           (click)="close()"
@@ -32,7 +32,7 @@
                       name="TransportProtocol"
                       useSelectOnMdLg="false"
                       appearance="fill"
-                      [fxHide]="allowTransportType.size < 2">
+                      [class.!hidden]="allowTransportType.size < 2">
       <tb-toggle-option
         *ngIf="allowTransportType.has(BasicTransportType.HTTP)"
         [value]="BasicTransportType.HTTP">
@@ -59,7 +59,7 @@
         {{ deviceTransportTypeTranslationMap.get(DeviceTransportType.LWM2M) | translate }}
       </tb-toggle-option>
     </tb-toggle-header>
-    <div class="tb-form-panel no-padding no-border" [fxHide]="!allowTransportType.size">
+    <div class="tb-form-panel no-padding no-border" [class.!hidden]="!allowTransportType.size">
       <ng-container [ngSwitch]="transportProtocol.value">
         <ng-template [ngSwitchCase]="BasicTransportType.HTTP">
           <div class="tb-no-data-text" translate>device.connectivity.use-following-instructions</div>
@@ -288,24 +288,24 @@
       </ng-container>
     </div>
     <div class="tb-form-panel stroked">
-      <div fxFlex fxLayout="row">
+      <div class="flex flex-1 flex-row">
         <div class="tb-form-panel-title" translate>device.state</div>
-        <div class="status" [ngClass]="{'inactive': !status, 'hide': status === undefined}">
+        <div class="status" [class.inactive]="!status" [class.hide]="status === undefined">
           {{ (status ? 'device.active' : 'device.inactive') | translate }}
         </div>
       </div>
       <div class="tb-form-panel-hint tb-font-14" translate>attribute.latest-telemetry</div>
       <div class="tb-form-table">
         <div class="tb-form-table-header">
-          <div class="tb-form-table-header-cell" fxFlex translate>device.time</div>
+          <div class="tb-form-table-header-cell flex-1" translate>device.time</div>
-          <div class="tb-form-table-header-cell" fxFlex translate>attribute.key</div>
+          <div class="tb-form-table-header-cell flex-1" translate>attribute.key</div>
-          <div class="tb-form-table-header-cell" fxFlex translate>attribute.value</div>
+          <div class="tb-form-table-header-cell flex-1" translate>attribute.value</div>
         </div>
         <div *ngIf="latestTelemetry.length; else noData" class="tb-form-table-body">
           <div class="tb-form-table-row" *ngFor="let telemetry of latestTelemetry">
-            <div class="tb-form-table-row-cell" fxFlex>{{ telemetry.lastUpdateTs | date: 'yyyy-MM-dd HH:mm:ss' }}</div>
+            <div class="tb-form-table-row-cell flex-1">{{ telemetry.lastUpdateTs | date: 'yyyy-MM-dd HH:mm:ss' }}</div>
-            <div class="tb-form-table-row-cell" fxFlex>{{ telemetry.key }}</div>
+            <div class="tb-form-table-row-cell flex-1">{{ telemetry.key }}</div>
-            <div class="tb-form-table-row-cell" fxFlex>{{ telemetry.value }}</div>
+            <div class="tb-form-table-row-cell flex-1">{{ telemetry.value }}</div>
           </div>
         </div>
       </div>
@@ -313,8 +313,8 @@
   </section>
 </div>
 <div mat-dialog-actions class="tb-dialog-actions">
-  <mat-slide-toggle fxShow="{{ showDontShowAgain }}" [(ngModel)]="notShowAgain">{{ 'action.dont-show-again' | translate}}</mat-slide-toggle>
+  <mat-slide-toggle [class.!hidden]="!showDontShowAgain" [(ngModel)]="notShowAgain">{{ 'action.dont-show-again' | translate}}</mat-slide-toggle>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-button
           [disabled]="(isLoading$ | async)"
           (click)="close()">{{ 'action.close' | translate }}</button>
@@ -336,10 +336,10 @@
 
 <ng-template #executeCommand let-cmd="cmd">
   <div class="tb-form-panel stroked">
-    <div fxLayout="row" fxLayoutAlign="space-between center" [fxHide]="!(cmd.noSec || cmd.sec !== 'Check documentation')">
+    <div class="flex flex-row items-center justify-between" [class.!hidden]="!(cmd.noSec || cmd.sec !== 'Check documentation')">
       <div class="tb-form-panel-title" translate>device.connectivity.execute-following-command</div>
       <tb-toggle-header #protocolType value="{{ cmd.noSec ? 'noSec' : 'sec'}}" name="protocolType" useSelectOnMdLg="false"
-                        [fxShow]="cmd.noSec && cmd.sec">
+                        [class.!hidden]="!cmd.noSec || !cmd.sec">
         <tb-toggle-option value="noSec">{{ cmd.noSecLabel }}</tb-toggle-option>
         <tb-toggle-option value="sec">{{ cmd.secLabel }}</tb-toggle-option>
       </tb-toggle-header>

ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html

@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2>{{ 'device.device-credentials' | translate }}</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           (click)="cancel()"
           type="button">
@@ -36,7 +36,7 @@
     </form>
   </section>
   <ng-template #loadCredentials>
-    <div fxLayout="column" fxLayoutAlign="center center">
+    <div class="flex flex-col items-center justify-center">
       <mat-spinner color="accent" diameter="65" strokeWidth="4" style="margin-bottom: 18px"></mat-spinner>
       <span class="mat-subtitle-1" style="margin-bottom: 0">
         {{ 'device.loading-device-credentials' | translate }}

ui-ngx/src/app/modules/home/pages/device/device.component.html

@@ -15,82 +15,82 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePublic')"
-          [fxShow]="!isEdit && deviceScope === 'tenant' && !isAssignedToCustomer(entity) && !entity?.customerIsPublic">
+          [class.!hidden]="isEdit || deviceScope !== 'tenant' || isAssignedToCustomer(entity) || entity?.customerIsPublic">
     {{'device.make-public' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'assignToCustomer')"
-          [fxShow]="!isEdit && deviceScope === 'tenant' && !isAssignedToCustomer(entity)">
+          [class.!hidden]="isEdit || deviceScope !== 'tenant' || isAssignedToCustomer(entity)">
     {{'device.assign-to-customer' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromCustomer')"
-          [fxShow]="!isEdit && (deviceScope === 'customer' || deviceScope === 'tenant') && isAssignedToCustomer(entity)">
+          [class.!hidden]="isEdit || (deviceScope !== 'customer' && deviceScope !== 'tenant') || !isAssignedToCustomer(entity)">
     {{ (entity?.customerIsPublic ? 'device.make-private' : 'device.unassign-from-customer') | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageCredentials')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{ ((deviceScope === 'customer_user' || deviceScope === 'edge_customer_user') ? 'device.view-credentials' : 'device.manage-credentials') | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'checkConnectivity')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{ 'device.connectivity.check-connectivity' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromEdge')"
-          [fxShow]="!isEdit && deviceScope === 'edge'">
+          [class.!hidden]="isEdit || deviceScope !== 'edge'">
     {{ 'edge.unassign-from-edge' | translate }}
   </button>
-  <button mat-raised-button color="primary" fxFlex.xs
+  <button mat-raised-button color="primary" class="xs:flex-1"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'device.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onDeviceIdCopied($event)"
             [cbContent]="entity?.id?.id"
             [disabled]="(isLoading$ | async)"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>device.copyId</span>
     </button>
     <tb-copy-device-credentials
-      [fxShow]="!isEdit"
+      [class.!hidden]="isEdit"
       [disabled]="(isLoading$ | async)"
       [credentials$]="deviceCredentials$"
       [deviceId]="entity?.id">
     </tb-copy-device-credentials>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <mat-form-field class="mat-block"
-                  [fxShow]="!isEdit && isAssignedToCustomer(entity)
+                  [class.!hidden]="isEdit || !isAssignedToCustomer(entity)
-                              && !entity?.customerIsPublic && deviceScope === 'tenant'">
+                              || entity?.customerIsPublic || deviceScope !== 'tenant'">
     <mat-label translate>device.assignedToCustomer</mat-label>
     <input matInput disabled [ngModel]="entity?.customerTitle">
   </mat-form-field>
   <div class="tb-small" style="padding-bottom: 10px; padding-left: 2px;"
-       [fxShow]="!isEdit && entity?.customerIsPublic && (deviceScope === 'customer' || deviceScope === 'tenant')">
+       [class.!hidden]="isEdit || !entity?.customerIsPublic || (deviceScope !== 'customer' && deviceScope !== 'tenant')">
     {{ 'device.device-public' | translate }}
   </div>
   <form [formGroup]="entityForm">
@@ -138,7 +138,7 @@
         formControlName="deviceData"
         required>
       </tb-device-data>
-      <div formGroupName="additionalInfo" fxLayout="column">
+      <div formGroupName="additionalInfo" class="flex flex-col">
         <div class="toggle-group">
           <mat-slide-toggle formControlName="gateway" style="min-width: 165px">
             {{ 'device.is-gateway' | translate }}

ui-ngx/src/app/modules/home/pages/edge/edge-instructions-dialog.component.html

@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2 translate>{{ dialogTitle }}</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           (click)="close()"
           type="button">
@@ -72,8 +72,8 @@
   </section>
 </div>
 <div mat-dialog-actions class="tb-dialog-actions">
-  <mat-slide-toggle fxShow="{{ showDontShowAgain }}" [(ngModel)]="notShowAgain">{{ 'action.dont-show-again' | translate}}</mat-slide-toggle>
+  <mat-slide-toggle [class.!hidden]="!showDontShowAgain" [(ngModel)]="notShowAgain">{{ 'action.dont-show-again' | translate}}</mat-slide-toggle>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-button
           [disabled]="(isLoading$ | async)"
           (click)="close()">{{ 'action.close' | translate }}</button>

ui-ngx/src/app/modules/home/pages/edge/edge.component.html

@@ -15,74 +15,74 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePublic')"
-          [fxShow]="!isEdit && edgeScope === 'tenant' && !isAssignedToCustomer(entity) && !entity?.customerIsPublic">
+          [class.!hidden]="isEdit || edgeScope !== 'tenant' || isAssignedToCustomer(entity) || entity?.customerIsPublic">
     {{'edge.make-public' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'assignToCustomer')"
-          [fxShow]="!isEdit && edgeScope === 'tenant' && !isAssignedToCustomer(entity)">
+          [class.!hidden]="isEdit || edgeScope !== 'tenant' || isAssignedToCustomer(entity)">
     {{'edge.assign-to-customer' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromCustomer')"
-          [fxShow]="!isEdit && (edgeScope === 'customer' || edgeScope === 'tenant') && isAssignedToCustomer(entity)">
+          [class.!hidden]="isEdit || (edgeScope !== 'customer' && edgeScope !== 'tenant') || !isAssignedToCustomer(entity)">
     {{ (entity?.customerIsPublic ? 'edge.make-private' : 'edge.unassign-from-customer') | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'openEdgeAssets')"
-          [fxShow]="!isEdit && edgeScope !== 'customer'">
+          [class.!hidden]="isEdit || edgeScope === 'customer'">
     {{'edge.manage-assets' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'openEdgeDevices')"
-          [fxShow]="!isEdit && edgeScope !== 'customer'">
+          [class.!hidden]="isEdit || edgeScope === 'customer'">
     {{'edge.manage-devices' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'openEdgeEntityViews')"
-          [fxShow]="!isEdit && edgeScope !== 'customer'">
+          [class.!hidden]="isEdit || edgeScope === 'customer'">
     {{'edge.manage-entity-views' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'openEdgeDashboards')"
-          [fxShow]="!isEdit && edgeScope !== 'customer'">
+          [class.!hidden]="isEdit || edgeScope === 'customer'">
     {{'edge.manage-dashboards' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'openEdgeRuleChains')"
-          [fxShow]="!isEdit && edgeScope === 'tenant'">
+          [class.!hidden]="isEdit || edgeScope !== 'tenant'">
     {{'edge.manage-rulechains' | translate }}
   </button>
-  <button mat-raised-button color="primary" fxFlex.xs
+  <button mat-raised-button color="primary" class="xs:flex-1"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'edge.delete' | translate }}
   </button>
-  <div fxLayout="row wrap" fxLayout.xs="column">
+  <div class="flex flex-row flex-wrap xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onEdgeIdCopied($event)"
             [cbContent]="entity?.id?.id"
             [disabled]="(isLoading$ | async)"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>edge.copy-id</span>
     </button>
@@ -91,7 +91,7 @@
             (cbOnSuccess)="onEdgeInfoCopied('key')"
             [cbContent]="entity?.routingKey"
             [disabled]="(isLoading$ | async)"
-            [fxShow]="!isEdit && edgeScope !== 'customer_user'">
+            [class.!hidden]="isEdit || edgeScope === 'customer_user'">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>edge.copy-edge-key</span>
     </button>
@@ -100,7 +100,7 @@
             (cbOnSuccess)="onEdgeInfoCopied('secret')"
             [cbContent]="entity?.secret"
             [disabled]="(isLoading$ | async)"
-            [fxShow]="!isEdit && edgeScope !== 'customer_user'">
+            [class.!hidden]="isEdit || edgeScope === 'customer_user'">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>edge.copy-edge-secret</span>
     </button>
@@ -108,18 +108,18 @@
             ngxClipboard
             [disabled]="(isLoading$ | async)"
             (click)="onEntityAction($event, 'syncEdge')"
-            [fxShow]="!isEdit && edgeScope !== 'customer_user'">
+            [class.!hidden]="isEdit || edgeScope === 'customer_user'">
       <mat-icon svgIcon="mdi:sync"></mat-icon>
       <span translate>edge.sync</span>
     </button>
   </div>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <div [ngSwitch]="upgradeAvailable">
       <ng-container *ngSwitchCase="false">
         <button mat-raised-button color="primary"
                 [disabled]="(isLoading$ | async)"
                 (click)="onEntityAction($event, 'openInstallInstructions')"
-                [fxShow]="!isEdit && edgeScope !== 'customer_user'">
+                [class.!hidden]="isEdit || edgeScope === 'customer_user'">
           <mat-icon>info_outline</mat-icon>
           <span>{{ 'edge.install-connect-instructions' | translate }}</span>
         </button>
@@ -128,7 +128,7 @@
         <button mat-raised-button color="primary"
                 [disabled]="(isLoading$ | async)"
                 (click)="onEntityAction($event, 'openUpgradeInstructions')"
-                [fxShow]="!isEdit && edgeScope !== 'customer_user'">
+                [class.!hidden]="isEdit || edgeScope === 'customer_user'">
           <mat-icon>info_outline</mat-icon>
           <span>{{ 'edge.upgrade-instructions' | translate }}</span>
         </button>
@@ -136,15 +136,15 @@
     </div>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <mat-form-field class="mat-block"
-                  [fxShow]="!isEdit && isAssignedToCustomer(entity)
+                  [class.!hidden]="isEdit || !isAssignedToCustomer(entity)
-                              && !entity?.customerIsPublic && edgeScope === 'tenant'">
+                              || entity?.customerIsPublic || edgeScope !== 'tenant'">
     <mat-label translate>edge.assignedToCustomer</mat-label>
     <input matInput disabled [ngModel]="entity?.customerTitle">
   </mat-form-field>
   <div class="tb-small" style="padding-bottom: 10px; padding-left: 2px;"
-       [fxShow]="!isEdit && entity?.customerIsPublic && edgeScope === 'tenant'">
+       [class.!hidden]="isEdit || !entity?.customerIsPublic || edgeScope !== 'tenant'">
     {{ 'edge.edge-public' | translate }}
   </div>
   <form [formGroup]="entityForm">
@@ -165,8 +165,8 @@
         [entityType]="entityType.EDGE">
       </tb-entity-subtype-autocomplete>
     </fieldset>
-    <div fxLayout="row" [fxShow]="edgeScope !== 'customer_user'">
+    <div class="flex flex-row" [class.!hidden]="edgeScope === 'customer_user'">
-        <mat-form-field class="mat-block" fxFlex>
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>edge.edge-key</mat-label>
           <input matInput formControlName="routingKey">
         </mat-form-field>
@@ -176,8 +176,8 @@
         <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       </button>
     </div>
-    <div fxLayout="row" [fxShow]="edgeScope !== 'customer_user'">
+    <div class="flex flex-row" [class.!hidden]="edgeScope === 'customer_user'">
-        <mat-form-field class="mat-block" fxFlex>
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>edge.edge-secret</mat-label>
           <input matInput formControlName="secret">
         </mat-form-field>
@@ -195,7 +195,7 @@
           {{ 'edge.label-max-length' | translate }}
         </mat-error>
       </mat-form-field>
-      <div formGroupName="additionalInfo" fxLayout="column">
+      <div formGroupName="additionalInfo" class="flex flex-col">
         <mat-form-field class="mat-block">
           <mat-label translate>edge.description</mat-label>
           <textarea matInput formControlName="description" rows="2"></textarea>

ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html

@@ -15,63 +15,63 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePublic')"
-          [fxShow]="!isEdit && entityViewScope === 'tenant' && !isAssignedToCustomer(entity) && !entity?.customerIsPublic">
+          [class.!hidden]="isEdit || entityViewScope !== 'tenant' || isAssignedToCustomer(entity) || entity?.customerIsPublic">
     {{'entity-view.make-public' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'assignToCustomer')"
-          [fxShow]="!isEdit && entityViewScope === 'tenant' && !isAssignedToCustomer(entity)">
+          [class.!hidden]="isEdit || entityViewScope !== 'tenant' || isAssignedToCustomer(entity)">
     {{'entity-view.assign-to-customer' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromCustomer')"
-          [fxShow]="!isEdit && (entityViewScope === 'customer' || entityViewScope === 'tenant') && isAssignedToCustomer(entity)">
+          [class.!hidden]="isEdit || (entityViewScope !== 'customer' && entityViewScope !== 'tenant') || !isAssignedToCustomer(entity)">
     {{ (entity?.customerIsPublic ? 'entity-view.make-private' : 'entity-view.unassign-from-customer') | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromEdge')"
-          [fxShow]="!isEdit && entityViewScope === 'edge'">
+          [class.!hidden]="isEdit || entityViewScope !== 'edge'">
     {{ 'edge.unassign-from-edge' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'entity-view.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onEntityViewIdCopied($event)"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>entity-view.copyId</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <mat-form-field class="mat-block"
-                  [fxShow]="!isEdit && isAssignedToCustomer(entity)
+                  [class.!hidden]="isEdit || !isAssignedToCustomer(entity)
-                              && !entity?.customerIsPublic && entityViewScope === 'tenant'">
+                              || entity?.customerIsPublic || entityViewScope !== 'tenant'">
     <mat-label translate>entity-view.assignedToCustomer</mat-label>
     <input matInput disabled [ngModel]="entity?.customerTitle">
   </mat-form-field>
   <div class="tb-small" style="padding-bottom: 10px; padding-left: 2px;"
-       [fxShow]="!isEdit && entity?.customerIsPublic && (entityViewScope === 'customer' || entityViewScope === 'tenant')">
+       [class.!hidden]="isEdit || !entity?.customerIsPublic || (entityViewScope !== 'customer' && entityViewScope !== 'tenant')">
     {{ 'entity-view.entity-view-public' | translate }}
   </div>
   <form [formGroup]="entityForm">
@@ -92,9 +92,9 @@
         [entityType]="entityType.ENTITY_VIEW"
       >
       </tb-entity-subtype-autocomplete>
-      <section fxLayout="column">
+      <section class="flex flex-col">
         <label translate class="tb-title no-padding">entity-view.target-entity</label>
-        <tb-entity-select fxFlex
+        <tb-entity-select class="flex-1"
                           [required]="true"
                           [allowedEntityTypes]="allowedEntityTypes"
                           formControlName="entityId">

ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.html

@@ -15,13 +15,13 @@
     limitations under the License.
 
 -->
-<div fxFlex="100" fxLayout="row" fxLayoutAlign="start center">
+<div class="flex flex-full flex-row items-center justify-start">
   <mat-button-toggle-group class="tb-notification-unread-toggle-group"
                            style="width: 180px;"
                            [ngModel]="entitiesTableConfig.componentsData.unreadOnly"
                            (ngModelChange)="changeUnreadOnly($event)">
-    <mat-button-toggle fxFlex [value]=true>{{ 'notification.unread' | translate }}</mat-button-toggle>
+    <mat-button-toggle class="flex-1" [value]=true>{{ 'notification.unread' | translate }}</mat-button-toggle>
-    <mat-button-toggle fxFlex [value]=false>{{ 'notification.all' | translate }}</mat-button-toggle>
+    <mat-button-toggle class="flex-1" [value]=false>{{ 'notification.all' | translate }}</mat-button-toggle>
   </mat-button-toggle-group>
 
 </div>

ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-notification-dialog.component.html

@@ -18,7 +18,7 @@
 <form [formGroup]="targetNotificationForm" class="tb-dialog-container">
   <mat-toolbar color="primary">
     <h2>{{ (isAdd ? 'notification.add-notification-recipients-group' : 'notification.edit-notification-recipients-group') | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <div tb-help="recipientNotifications"></div>
     <button mat-icon-button
             (click)="cancel()"
@@ -28,7 +28,7 @@
   </mat-toolbar>
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  <div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
   <div mat-dialog-content>
     <mat-form-field class="mat-block">
       <mat-label translate>notification.name</mat-label>
@@ -41,7 +41,7 @@
       <label class="tb-title">{{ 'notification.type' | translate }}</label>
       <mat-radio-group formControlName="type">
         <mat-radio-button *ngFor="let notificationTargetType of notificationTargetTypes" [value]="notificationTargetType">
-          <div fxLayout="column">
+          <div class="flex flex-col">
             <div>{{ notificationTargetTypeTranslationMap.get(notificationTargetType) | translate }}</div>
           </div>
         </mat-radio-button>
@@ -60,7 +60,7 @@
         <ng-container [ngSwitch]="targetNotificationForm.get('configuration.usersFilter.type').value">
           <ng-container *ngSwitchCase="notificationTargetConfigType.TENANT_ADMINISTRATORS">
             <section *ngIf="isSysAdmin()">
-              <div fxFlex fxLayoutAlign="center center">
+              <div class="flex flex-1 items-center justify-center">
                 <tb-toggle-select class="tb-notification-tenant-group" appearance="fill"
                                   formControlName="filterByTenants">
                   <tb-toggle-option [value]="true">{{ 'tenant.tenant' | translate }}</tb-toggle-option>
@@ -157,7 +157,7 @@
     </section>
   </div>
   <mat-divider></mat-divider>
-  <div mat-dialog-actions fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="end">
+  <div mat-dialog-actions class="flex flex-row items-stretch justify-end gap-2">
     <button mat-button
             [disabled]="(isLoading$ | async)"
             (click)="cancel()">{{ 'action.cancel' | translate }}</button>

ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-table-header.component.html

@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<div fxFlex="100" fxLayout="row" fxLayoutAlign="end center">
+<div class="flex flex-full flex-row items-center justify-end">
   <button mat-stroked-button color="primary" (click)="createTarget($event)">
-    <div fxLayout="row" fxLayoutAlign="start center">
+    <div class="flex flex-row items-center justify-start">
       <mat-icon>add</mat-icon>{{ 'notification.add-recipients' | translate }}
     </div>
   </button>

ui-ngx/src/app/modules/home/pages/notification/rule/escalation-form.component.html

@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<form [formGroup]="escalationFormGroup" fxLayout="column">
+<form [formGroup]="escalationFormGroup" class="flex flex-col">
-  <div class="escalation" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" fxLayoutAlign.xs="start">
+  <div class="escalation flex flex-row items-center justify-center xs:flex-col xs:items-stretch xs:justify-start">
-    <div fxFlex *ngIf="systemEscalation; else selectTime" translate>notification.first-recipient</div>
+    <div class="flex-1" *ngIf="systemEscalation; else selectTime" translate>notification.first-recipient</div>
     <ng-template #selectTime>
-      <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center">
+      <div class="flex flex-1 flex-row items-center justify-center xs:flex-col">
         <span translate>notification.after</span>
         <tb-timeinterval
           subscriptSizing="dynamic"
@@ -27,19 +27,19 @@
           min="60000"
           max="604800000"
           disabledAdvanced></tb-timeinterval>
-        <span fxFlex class="escalation-notify" translate>notification.notify</span>
+        <span class="escalation-notify flex-1" translate>notification.notify</span>
       </div>
     </ng-template>
     <tb-entity-list
       required
-      fxFlex="60"
+      class="max-w-60% flex-full"
       formControlName="targets"
       subscriptSizing="dynamic"
       entityType="{{ entityType.NOTIFICATION_TARGET }}"
       subType="{{ notificationType.ALARM }}"
       [placeholderText]="escalationFormGroup.get('targets').value ? '' : ('notification.add-recipient' | translate)">
       <button #createTargetButton
-              mat-button [fxHide]="disabled" matSuffix
+              mat-button [class.!hidden]="disabled" matSuffix
               (click)="createTarget($event, createTargetButton)">
         <span style="white-space: nowrap">{{ 'notification.create-new' | translate }}</span>
       </button>

ui-ngx/src/app/modules/home/pages/notification/rule/escalations.component.html

@@ -15,13 +15,12 @@
     limitations under the License.
 
 -->
-<div fxLayout="column">
+<div class="flex flex-col">
-  <div class="tb-tenant-profile-queues"
+  <div class="tb-tenant-profile-queues flex flex-row items-center"
-       fxLayout="row" style="align-items: center"
        *ngFor="let escalationControl of escalationsFormArray.controls;
        let $index = index; last as isLast;"
-       [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+       [class.pb-2]="!isLast">
-    <tb-escalation-form fxFlex
+    <tb-escalation-form class="flex-1"
                         [formControl]="escalationControl"
                         [systemEscalation]="$index === 0">
     </tb-escalation-form>
@@ -35,8 +34,8 @@
     </button>
   </div>
   <div *ngIf="!escalationsFormArray.controls.length">
-      <span translate fxLayoutAlign="center center"
+      <span translate
-            class="tb-prompt">notification.no-rule</span>
+            class="tb-prompt flex items-center justify-center">notification.no-rule</span>
   </div>
   <div *ngIf="!disabled" style="padding: 16px 0;">
     <button mat-raised-button color="primary"

ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html

@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2>{{ dialogTitle | translate }}</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <div tb-help="ruleNotifications"></div>
   <button mat-icon-button
           (click)="cancel()"
@@ -27,8 +27,8 @@
 </mat-toolbar>
 <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
 </mat-progress-bar>
-<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+<div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
-<div mat-dialog-content ngStyle.xs="padding: 0;">
+<div mat-dialog-content class="xs:p-0">
   <mat-horizontal-stepper [linear]="true" labelPosition="end" #addNotificationRule [orientation]="(stepperOrientation | async)"
                           (selectionChange)="changeStep($event)">
     <ng-template matStepperIcon="edit">
@@ -94,7 +94,7 @@
           <section formGroupName="triggerConfig">
             <section formGroupName="clearRule">
               <div class="mat-body-2" translate>notification.stop-escalation-alarm-status-become</div>
-              <mat-form-field fxFlex class="mat-block" floatLabel="always" style="margin-right: 48px">
+              <mat-form-field class="mat-block flex-1" floatLabel="always" style="margin-right: 48px">
                 <mat-label translate>alarm.alarm-status-list</mat-label>
                 <mat-select formControlName="alarmStatuses" multiple
                             placeholder="{{ !alarmTemplateForm.get('triggerConfig.clearRule.alarmStatuses').value?.length ? ('alarm.any-status' | translate) : '' }}">
@@ -123,7 +123,7 @@
               formControlName="alarmTypes">
             </tb-string-items-list>
 
-            <mat-form-field fxFlex class="mat-block" floatLabel="always">
+            <mat-form-field class="mat-block flex-1" floatLabel="always">
               <mat-label translate>alarm.alarm-severity-list</mat-label>
               <mat-select formControlName="alarmSeverities" multiple
                           placeholder="{{ !alarmTemplateForm.get('triggerConfig.alarmSeverities').value?.length ? ('alarm.any-severity' | translate) : '' }}">
@@ -133,7 +133,7 @@
               </mat-select>
             </mat-form-field>
           </fieldset>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>notification.notify-on</mat-label>
             <mat-select formControlName="notifyOn" multiple>
               <mat-option *ngFor="let alarmAction of alarmActions" [value]="alarmAction">
@@ -161,12 +161,12 @@
       <ng-template matStepLabel>{{ 'notification.device-activity-trigger-settings' | translate }}</ng-template>
       <form [formGroup]="deviceInactivityTemplateForm">
         <section formGroupName="triggerConfig">
-          <div fxFlex fxLayoutAlign="center center">
+          <div class="flex flex-1 items-center justify-center">
             <mat-button-toggle-group class="tb-notification-unread-toggle-group"
                                      style="width: 250px;"
                                      formControlName="filterByDevice">
-              <mat-button-toggle fxFlex [value]=true>{{ 'device.device' | translate }}</mat-button-toggle>
+              <mat-button-toggle class="flex-1" [value]=true>{{ 'device.device' | translate }}</mat-button-toggle>
-              <mat-button-toggle fxFlex [value]=false>{{ 'device-profile.device-profile' | translate }}</mat-button-toggle>
+              <mat-button-toggle class="flex-1" [value]=false>{{ 'device-profile.device-profile' | translate }}</mat-button-toggle>
             </mat-button-toggle-group>
           </div>
           <ng-container *ngIf="deviceInactivityTemplateForm.get('triggerConfig.filterByDevice').value; else deviceProfile">
@@ -189,7 +189,7 @@
               [entityType]="entityType.DEVICE_PROFILE">
             </tb-entity-list>
           </ng-template>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>notification.notify-on</mat-label>
             <mat-select formControlName="notifyOn" multiple>
               <mat-option *ngFor="let deviceEvent of deviceEvents" [value]="deviceEvent">
@@ -223,8 +223,8 @@
                                [allowedEntityTypes]="allowEntityTypeForEntityAction"
                                formControlName="entityTypes">
           </tb-entity-type-list>
-          <section fxLayout="column" fxLayoutGap="8px">
+          <section class="flex flex-col gap-2">
-            <span fxFlex translate>notification.status</span>
+            <span class="flex-1" translate>notification.status</span>
             <mat-slide-toggle formControlName="created">{{ 'notification.created' | translate }}</mat-slide-toggle>
             <mat-slide-toggle formControlName="updated">{{ 'notification.updated' | translate }}</mat-slide-toggle>
             <mat-slide-toggle formControlName="deleted">{{ 'notification.deleted' | translate }}</mat-slide-toggle>
@@ -256,7 +256,7 @@
               formControlName="alarmTypes">
             </tb-string-items-list>
 
-            <mat-form-field fxFlex class="mat-block" floatLabel="always">
+            <mat-form-field class="mat-block flex-1" floatLabel="always">
               <mat-label translate>alarm.alarm-severity-list</mat-label>
               <mat-select formControlName="alarmSeverities" multiple
                           placeholder="{{ !alarmCommentTemplateForm.get('triggerConfig.alarmSeverities').value?.length ? ('alarm.any-severity' | translate) : '' }}">
@@ -265,7 +265,7 @@
                 </mat-option>
               </mat-select>
             </mat-form-field>
-            <mat-form-field fxFlex class="mat-block" floatLabel="always">
+            <mat-form-field class="mat-block flex-1" floatLabel="always">
               <mat-label translate>alarm.alarm-status-list</mat-label>
               <mat-select formControlName="alarmStatuses" multiple
                           placeholder="{{ !alarmCommentTemplateForm.get('triggerConfig.alarmStatuses').value?.length ? ('alarm.any-status' | translate) : '' }}">
@@ -275,7 +275,7 @@
               </mat-select>
             </mat-form-field>
           </fieldset>
-          <section fxLayout="column">
+          <section class="flex flex-col">
             <mat-slide-toggle formControlName="onlyUserComments" style="margin-bottom: 12px;">
               {{ 'notification.notify-only-user-comments' | translate }}
             </mat-slide-toggle>
@@ -309,7 +309,7 @@
               formControlName="alarmTypes">
             </tb-string-items-list>
 
-            <mat-form-field fxFlex class="mat-block" floatLabel="always">
+            <mat-form-field class="mat-block flex-1" floatLabel="always">
               <mat-label translate>alarm.alarm-severity-list</mat-label>
               <mat-select formControlName="alarmSeverities" multiple
                           placeholder="{{ !alarmAssignmentTemplateForm.get('triggerConfig.alarmSeverities').value?.length ? ('alarm.any-severity' | translate) : '' }}">
@@ -318,7 +318,7 @@
                 </mat-option>
               </mat-select>
             </mat-form-field>
-            <mat-form-field fxFlex class="mat-block" floatLabel="always">
+            <mat-form-field class="mat-block flex-1" floatLabel="always">
               <mat-label translate>alarm.alarm-status-list</mat-label>
               <mat-select formControlName="alarmStatuses" multiple
                           placeholder="{{ !alarmAssignmentTemplateForm.get('triggerConfig.alarmStatuses').value?.length ? ('alarm.any-status' | translate) : '' }}">
@@ -328,7 +328,7 @@
               </mat-select>
             </mat-form-field>
           </fieldset>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>notification.notify-on</mat-label>
             <mat-select formControlName="notifyOn" multiple>
               <mat-option *ngFor="let alarmAssignmentAction of alarmAssignmentActions" [value]="alarmAssignmentAction">
@@ -365,7 +365,7 @@
               hint="{{ 'notification.rule-chain-list-rule-hint' | translate }}"
               [entityType]="entityType.RULE_CHAIN">
             </tb-entity-list>
-            <mat-form-field fxFlex class="mat-block" floatLabel="always">
+            <mat-form-field class="mat-block flex-1" floatLabel="always">
               <mat-label translate>rulechain.rulechain-events</mat-label>
               <mat-select formControlName="ruleChainEvents" multiple
                           placeholder="{{ !ruleEngineEventsTemplateForm.get('triggerConfig.ruleChainEvents').value?.length ? ('event.all-events' | translate) : '' }}">
@@ -384,7 +384,7 @@
               {{ 'notification.track-rule-node-events' | translate }}
             </mat-slide-toggle>
             <section *ngIf="ruleEngineEventsTemplateForm.get('triggerConfig.trackRuleNodeEvents').value">
-              <mat-form-field fxFlex class="mat-block" floatLabel="always">
+              <mat-form-field class="mat-block flex-1" floatLabel="always">
                 <mat-label translate>rulenode.rule-node-events</mat-label>
                 <mat-select formControlName="ruleNodeEvents" multiple
                             placeholder="{{ !ruleEngineEventsTemplateForm.get('triggerConfig.ruleNodeEvents').value?.length ? ('event.all-events' | translate) : '' }}">
@@ -425,7 +425,7 @@
               hint="{{ 'notification.edge-list-rule-hint' | translate }}"
               [entityType]="entityType.EDGE">
             </tb-entity-list>
-            <mat-form-field fxFlex class="mat-block" floatLabel="always">
+            <mat-form-field class="mat-block flex-1" floatLabel="always">
               <mat-label translate>notification.notify-on</mat-label>
               <mat-select formControlName="notifyOn" multiple
                           placeholder="{{ !edgeConnectionTemplateForm.get('triggerConfig.notifyOn').value?.length ? ('event.all-events' | translate) : '' }}">
@@ -482,11 +482,10 @@
                                ignoreAuthorityFilter
                                [allowedEntityTypes]="allowEntityTypeForEntitiesLimit">
           </tb-entity-type-list>
-          <div class="limit-slider-container" fxLayout="row" fxLayoutAlign="start center"
+          <div class="limit-slider-container flex flex-row items-center justify-start xs:flex-col xs:items-stretch">
-               fxLayout.xs="column"  fxLayoutAlign.xs="stretch">
             <label translate>notification.threshold</label>
-            <div fxLayout="row" fxLayoutAlign="start center" fxFlex>
+            <div class="flex flex-1 flex-row items-center justify-start">
-              <mat-slider fxFlex min="0" max="1" step="0.01" discrete [displayWith]="formatLabel">
+              <mat-slider class="flex-1" min="0" max="1" step="0.01" discrete [displayWith]="formatLabel">
                 <input matSliderThumb formControlName="threshold">
               </mat-slider>
               <mat-form-field class="limit-slider-value">
@@ -514,7 +513,7 @@
       <ng-template matStepLabel>{{ 'notification.api-usage-trigger-settings' | translate }}</ng-template>
       <form [formGroup]="apiUsageLimitTemplateForm">
         <section formGroupName="triggerConfig">
-          <mat-form-field fxFlex class="mat-block" subscriptSizing="dynamic">
+          <mat-form-field class="mat-block flex-1" subscriptSizing="dynamic">
             <mat-label translate>api-usage.api-features</mat-label>
             <mat-select formControlName="apiFeatures" multiple>
               <mat-option *ngFor="let apiFeature of apiFeatures" [value]="apiFeature">
@@ -523,7 +522,7 @@
             </mat-select>
             <mat-hint>{{ 'notification.api-feature-hint' | translate }}</mat-hint>
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>notification.notify-on</mat-label>
             <mat-select formControlName="notifyOn" multiple>
               <mat-option *ngFor="let apiUsageStateValue of apiUsageStateValues" [value]="apiUsageStateValue">
@@ -597,10 +596,10 @@
   </mat-horizontal-stepper>
 </div>
 <mat-divider></mat-divider>
-<div mat-dialog-actions fxLayout="row">
+<div mat-dialog-actions class="flex flex-row">
   <button mat-stroked-button *ngIf="selectedIndex > 0"
           (click)="backStep()">{{ 'action.back' | translate }}</button>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-raised-button
           color="primary"
           (click)="nextStep()">{{ nextStepLabel() | translate }}</button>

ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-header.component.html

@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<div fxFlex="100" fxLayout="row" fxLayoutAlign="end center">
+<div class="flex flex-full flex-row items-center justify-end">
   <button mat-stroked-button color="primary" (click)="createTarget($event)">
-    <div fxLayout="row" fxLayoutAlign="start center">
+    <div class="flex flex-row items-center justify-start">
       <mat-icon>add</mat-icon>{{ 'notification.add-rule' | translate }}
     </div>
   </button>

ui-ngx/src/app/modules/home/pages/notification/sent/sent-error-dialog.component.html

@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2 translate>notification.failed-send</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           (click)="cancel()"
           type="button">

ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html

@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2>{{ dialogTitle | translate }}</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <div tb-help="sentNotification"></div>
   <button mat-icon-button
           (click)="cancel()"
@@ -38,7 +38,7 @@
     <mat-step [stepControl]="notificationRequestForm">
       <ng-template matStepLabel>{{ 'notification.setup' | translate }}</ng-template>
       <form [formGroup]="notificationRequestForm">
-        <div fxLayoutAlign="center">
+        <div class="flex items-stretch justify-center">
           <tb-toggle-select formControlName="useTemplate" appearance="fill">
             <tb-toggle-option  [value]="false">{{ 'notification.start-from-scratch' | translate }}</tb-toggle-option>
             <tb-toggle-option  [value]="true">{{ 'notification.use-template' | translate }}</tb-toggle-option>
@@ -58,7 +58,7 @@
             <section formGroupName="configuration">
               <div class="delivery-title">
                 <div>
-                  <label [ngClass]="{'tb-error': notificationRequestForm.get('template.configuration.deliveryMethodsTemplates').hasError('atLeastOne')}"
+                  <label [class.tb-error]="notificationRequestForm.get('template.configuration.deliveryMethodsTemplates').hasError('atLeastOne')"
                          class="tb-title tb-required">{{ "notification.delivery-methods" | translate }}</label>
                   <div class="tb-form-hint" translate>notification.at-least-one-should-be-selected</div>
                 </div>
@@ -123,7 +123,7 @@
           <mat-slide-toggle formControlName="enabled" class="toggle">
             {{ 'notification.scheduler-later' | translate }}
           </mat-slide-toggle>
-          <div *ngIf="notificationRequestForm.get('additionalConfig.enabled').value" fxLayout="column">
+          <div *ngIf="notificationRequestForm.get('additionalConfig.enabled').value" class="flex flex-col">
             <tb-timezone-select userTimezoneByDefault
                                 required
                                 formControlName="timezone">
@@ -132,7 +132,7 @@
               <mat-label translate>notification.time</mat-label>
               <mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle>
               <mat-datetimepicker #startTimePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
-              <input required matInput fxFlex formControlName="time" [min]="minDate()" [max]="maxDate()" [matDatetimepicker]="startTimePicker">
+              <input required matInput class="flex-1" formControlName="time" [min]="minDate()" [max]="maxDate()" [matDatetimepicker]="startTimePicker">
             </mat-form-field>
           </div>
         </section>
@@ -161,7 +161,7 @@
       </div>
       <div *ngIf="preview" class="tb-form-panel no-padding no-border">
         <section class="preview-group tb-form-panel stroked no-gap">
-          <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-icon class="tb-mat-18">supervisor_account</tb-icon>
             <div class="tb-form-panel-title">{{ 'notification.recipients-count' | translate : {count: preview.totalRecipientsCount} }}</div>
           </div>
@@ -178,7 +178,7 @@
           </mat-chip-listbox>
         </section>
         <section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.WEB?.enabled">
-          <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-icon class="tb-mat-18">mdi:bell-badge</tb-icon>
             <div class="tb-form-panel-title" translate>notification.delivery-method.web-preview</div>
           </div>
@@ -187,7 +187,7 @@
           </div>
         </section>
         <section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.MOBILE_APP?.enabled">
-          <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-icon class="tb-mat-18">mdi:cellphone-text</tb-icon>
             <div class="tb-form-panel-title" translate>notification.delivery-method.mobile-app-preview</div>
           </div>
@@ -197,7 +197,7 @@
           </div>
         </section>
         <section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.SMS?.enabled">
-          <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-icon class="tb-mat-18">mdi:message-processing</tb-icon>
             <div class="tb-form-panel-title" translate>notification.delivery-method.sms-preview</div>
           </div>
@@ -206,7 +206,7 @@
           </div>
         </section>
         <section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.EMAIL?.enabled">
-          <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-icon class="tb-mat-18">mdi:email</tb-icon>
             <div class="tb-form-panel-title" translate>notification.delivery-method.email-preview</div>
           </div>
@@ -217,7 +217,7 @@
           </div>
         </section>
         <section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.SLACK?.enabled">
-          <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-icon class="tb-mat-18">mdi:slack</tb-icon>
             <div class="tb-form-panel-title" translate>notification.delivery-method.slack-preview</div>
           </div>
@@ -226,7 +226,7 @@
           </div>
         </section>
         <section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.MICROSOFT_TEAMS?.enabled">
-          <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-icon class="tb-mat-18">mdi:microsoft-teams</tb-icon>
             <div class="tb-form-panel-title" translate>notification.delivery-method.microsoft-teams-preview</div>
           </div>
@@ -243,7 +243,7 @@
 <div mat-dialog-actions class="tb-dialog-actions">
   <button mat-stroked-button *ngIf="selectedIndex > 0"
           (click)="backStep()">{{ 'action.back' | translate }}</button>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-raised-button
           color="primary"
           (click)="nextStep()">{{ nextStepLabel() | translate }}</button>

ui-ngx/src/app/modules/home/pages/notification/settings/notification-setting-form.component.html

@@ -15,22 +15,22 @@
     limitations under the License.
 
 -->
-<form [formGroup]="notificationSettingsFormGroup" fxLayout="column">
+<form [formGroup]="notificationSettingsFormGroup" class="flex flex-col">
-  <div fxLayout="row" style="height: 48px;">
+  <div class="flex flex-row" style="height: 48px;">
-    <div fxFlex="50" fxLayoutAlign="start center">
+    <div class="flex max-w-50% flex-full items-center justify-start">
       <mat-checkbox color="primary"
                     (click)="$event.stopPropagation()"
                     (change)="changeInstanceTypeCheckBox($event.checked)"
                     [checked]="getChecked()"
                     [indeterminate]="getIndeterminate()">
         <span class="notification-type"
-              [ngClass]="{'notification-type-disabled': !notificationSettingsFormGroup.get('enabled').value}">
+              [class.notification-type-disabled]="!notificationSettingsFormGroup.get('enabled').value">
           {{notificationTemplateTypeTranslateMap.get(notificationSettingsFormGroup.get('name').value)?.name | translate}}
         </span>
       </mat-checkbox>
     </div>
-    <div fxFlex fxLayout="row" *ngFor="let deliveryMethod of deliveryMethods">
+    <div class="flex flex-1 flex-row" *ngFor="let deliveryMethod of deliveryMethods">
-      <div fxFlex fxLayoutAlign="start center">
+      <div class="flex flex-1 items-center justify-start">
         <mat-checkbox color="primary"
                       [checked]="getChecked(deliveryMethod)"
                       (click)="toggleDeliviryMethod(deliveryMethod)"

ui-ngx/src/app/modules/home/pages/notification/settings/notification-settings.component.html

@@ -18,12 +18,11 @@
 <div>
   <mat-card appearance="outlined" class="settings-card tb-absolute-fill">
     <mat-card-header>
-      <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.xs="8px"
+      <div class="flex flex-1 flex-row items-start justify-between xs:flex-col xs:justify-start xs:gap-2">
-           fxLayoutAlign="space-between start" fxLayoutAlign.xs="start start">
+        <div class="flex flex-1 flex-col">
-        <div fxFlex fxLayout="column">
           <span class="mat-headline-5" translate>notification.settings.notification-settings</span>
         </div>
-        <div fxLayout="column">
+        <div class="flex flex-col">
           <button mat-button color="primary"
                   [disabled]="(isLoading$ | async)"
                   (click)="resetSettings()">{{ 'notification.settings.reset-all' | translate }}</button>
@@ -37,8 +36,8 @@
       <form [formGroup]="notificationSettings" class="notification-form">
         <section class="notification-section">
           <div  class="notification-section-block">
-            <div fxLayout="row" fxLayoutAlign="start center" style="height: 44px;">
+            <div class="flex flex-row items-center justify-start" style="height: 44px;">
-              <div fxFlex="50">
+              <div class="max-w-50% flex-full">
                 <mat-checkbox color="warn"
                               (click)="$event.stopPropagation()"
                               [indeterminate]="getIndeterminate()"
@@ -47,8 +46,8 @@
                   <mat-label translate>notification.settings.type</mat-label>
                 </mat-checkbox>
               </div>
-              <div fxFlex *ngFor="let deliveryMethods of notificationDeliveryMethods">
+              <div class="flex-1" *ngFor="let deliveryMethods of notificationDeliveryMethods">
-                <div fxFlex fxLayoutAlign="start center">
+                <div class="flex flex-1 items-center justify-start">
                   <mat-checkbox color="warn"
                                 [checked]="getChecked(deliveryMethods)"
                                 (change)="changeInstanceTypeCheckBox($event.checked, deliveryMethods)"
@@ -70,7 +69,7 @@
         </section>
       </form>
     </mat-card-content>
-    <div fxLayout="row" fxLayoutAlign="end start" style="padding: 16px;">
+    <div class="flex flex-row items-start justify-end" style="padding: 16px;">
       <button mat-button mat-raised-button color="primary"
               type="button"
               (click)="save()"

ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-action-button-configuration.component.html

@@ -18,19 +18,18 @@
 <div class="tb-form-panel tb-slide-toggle stroked" [formGroup]="actionButtonConfigForm">
   <mat-expansion-panel class="tb-settings"
                        [expanded]="actionButtonConfigForm.get('enabled').value">
-    <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
+    <mat-expansion-panel-header class="fill-width flex flex-row flex-wrap">
-      <mat-panel-title fxFlex="60">
+      <mat-panel-title class="max-w-60% flex-full">
         <div tb-hint-tooltip-icon="{{ sliderHint }}" class="tb-form-row no-border no-padding">
-          <mat-slide-toggle class="mat-slide" formControlName="enabled" (click)="$event.stopPropagation()"
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="enabled" (click)="$event.stopPropagation()">
-                            fxLayoutAlign="center">
             {{ actionTitle }}
           </mat-slide-toggle>
         </div>
       </mat-panel-title>
     </mat-expansion-panel-header>
     <ng-template matExpansionPanelContent class="tb-extension-panel">
-      <div fxLayout="row" fxLayoutGap.gt-xs="8px" fxLayout.xs="column">
+      <div class="flex flex-row xs:flex-col gt-xs:gap-2">
-        <mat-form-field class="mat-block" fxFlex *ngIf="!hideButtonText">
+        <mat-form-field class="mat-block flex-1" *ngIf="!hideButtonText">
           <mat-label translate>notification.button-text</mat-label>
           <input matInput formControlName="text" required>
           <mat-error
@@ -45,8 +44,8 @@
           </mat-error>
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutGap.gt-xs="8px" fxLayout.xs="column">
+      <div class="flex flex-row xs:flex-col gt-xs:gap-2">
-        <mat-form-field fxFlex="30" fxFlex.xs="100">
+        <mat-form-field class="max-w-30% flex-full xs:max-w-full">
           <mat-label translate>notification.action-type</mat-label>
           <mat-select formControlName="linkType">
             <mat-option *ngFor="let actionButtonLinkType of actionButtonLinkTypes"
@@ -55,7 +54,7 @@
             </mat-option>
           </mat-select>
         </mat-form-field>
-        <mat-form-field fxFlex
+        <mat-form-field class="flex-1"
                         *ngIf="actionButtonConfigForm.get('linkType').value === actionButtonLinkType.LINK; else dashboardSelector">
           <mat-label translate>notification.link</mat-label>
           <input matInput formControlName="link" required>
@@ -66,11 +65,11 @@
         </mat-form-field>
         <ng-template #dashboardSelector>
           <tb-dashboard-autocomplete
-            fxFlex="35" fxFlex.xs="100"
+            class="max-w-35% flex-full xs:max-w-full"
             required
             formControlName="dashboardId">
           </tb-dashboard-autocomplete>
-          <tb-dashboard-state-autocomplete fxFlex="35" fxFlex.xs="100"
+          <tb-dashboard-state-autocomplete class="max-w-35% flex-full xs:max-w-full"
                                            [dashboardId]="actionButtonConfigForm.get('dashboardId').value"
                                            formControlName="dashboardState">
           </tb-dashboard-state-autocomplete>

ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.html

@@ -31,7 +31,7 @@
            [formGroupName]="NotificationDeliveryMethod.WEB"
            *ngIf="templateConfigurationForm.get('WEB.enabled').value">
     <mat-expansion-panel class="tb-settings" expanded="{{ expandedForm(NotificationDeliveryMethod.WEB) }}">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
+      <mat-expansion-panel-header class="fill-width flex flex-row flex-wrap">
         <mat-panel-title class="template-tittle">
           <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.WEB).icon }}</tb-icon>
           {{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.WEB).name | translate }}
@@ -62,7 +62,7 @@
             <mat-slide-toggle formControlName="enabled" class="mat-slide">
               {{ 'icon.icon' | translate }}
             </mat-slide-toggle>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-material-icon-select asBoxInput
                                        [color]="templateConfigurationForm.get('WEB.additionalConfig.icon.color').value"
                                        formControlName="icon">
@@ -84,7 +84,7 @@
            [formGroupName]="NotificationDeliveryMethod.MOBILE_APP"
            *ngIf="templateConfigurationForm.get('MOBILE_APP.enabled').value">
     <mat-expansion-panel class="tb-settings" expanded="{{ expandedForm(NotificationDeliveryMethod.MOBILE_APP) }}">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
+      <mat-expansion-panel-header class="fill-width flex flex-row flex-wrap">
         <mat-panel-title class="template-tittle">
           <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.MOBILE_APP).icon }}</tb-icon>
           {{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.MOBILE_APP).name | translate }}
@@ -125,7 +125,7 @@
             <mat-slide-toggle formControlName="enabled" class="mat-slide">
               {{ 'icon.icon' | translate }}
             </mat-slide-toggle>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-material-icon-select asBoxInput
                                        [color]="templateConfigurationForm.get('MOBILE_APP.additionalConfig.icon.color').value"
                                        formControlName="icon">
@@ -149,7 +149,7 @@
            [formGroupName]="NotificationDeliveryMethod.SMS"
            *ngIf="templateConfigurationForm.get('SMS.enabled').value">
     <mat-expansion-panel class="tb-settings" expanded="{{ expandedForm(NotificationDeliveryMethod.SMS) }}">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
+      <mat-expansion-panel-header class="fill-width flex flex-row flex-wrap">
         <mat-panel-title class="template-tittle">
           <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SMS).icon }}</tb-icon>
           {{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SMS).name | translate }}
@@ -181,7 +181,7 @@
            [formGroupName]="NotificationDeliveryMethod.EMAIL"
            *ngIf="templateConfigurationForm.get('EMAIL.enabled').value">
     <mat-expansion-panel class="tb-settings" expanded="{{ expandedForm(NotificationDeliveryMethod.EMAIL) }}">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
+      <mat-expansion-panel-header class="fill-width flex flex-row flex-wrap">
         <mat-panel-title class="template-tittle">
           <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.EMAIL).icon }}</tb-icon>
           {{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.EMAIL).name | translate }}
@@ -211,7 +211,7 @@
            [formGroupName]="NotificationDeliveryMethod.SLACK"
            *ngIf="templateConfigurationForm.get('SLACK.enabled').value">
     <mat-expansion-panel class="tb-settings" expanded="{{ expandedForm(NotificationDeliveryMethod.SLACK) }}">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
+      <mat-expansion-panel-header class="fill-width flex flex-row flex-wrap">
         <mat-panel-title class="template-tittle">
           <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SLACK).icon }}</tb-icon>
           {{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SLACK).name | translate }}
@@ -237,7 +237,7 @@
            [formGroupName]="NotificationDeliveryMethod.MICROSOFT_TEAMS"
            *ngIf="templateConfigurationForm.get('MICROSOFT_TEAMS.enabled').value">
     <mat-expansion-panel class="tb-settings" expanded="{{ expandedForm(NotificationDeliveryMethod.MICROSOFT_TEAMS) }}">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
+      <mat-expansion-panel-header class="fill-width flex flex-row flex-wrap">
         <mat-panel-title class="template-tittle">
           <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.MICROSOFT_TEAMS).icon }}</tb-icon>
           {{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.MICROSOFT_TEAMS).name | translate }}

ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html

@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2>{{ dialogTitle | translate }}</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <div tb-help="templateNotifications"></div>
   <button mat-icon-button
           (click)="cancel()"
@@ -45,7 +45,7 @@
             {{ 'notification.name-required' | translate }}
           </mat-error>
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block" *ngIf="!hideSelectType">
+        <mat-form-field class="mat-block flex-1" *ngIf="!hideSelectType">
           <mat-label translate>notification.type</mat-label>
           <mat-select formControlName="notificationType">
             <mat-option *ngFor="let notificationType of notificationTypes" [value]="notificationType">
@@ -54,7 +54,7 @@
           </mat-select>
         </mat-form-field>
         <section formGroupName="configuration">
-          <label [ngClass]="{'tb-error': templateNotificationForm.get('configuration.deliveryMethodsTemplates').hasError('atLeastOne')}"
+          <label [class.tb-error]="templateNotificationForm.get('configuration.deliveryMethodsTemplates').hasError('atLeastOne')"
             class="tb-title tb-required">{{ "notification.delivery-methods" | translate }}</label>
           <div class="tb-hint" translate>notification.at-least-one-should-be-selected</div>
           <section formGroupName="deliveryMethodsTemplates" class="delivery-methods-container">
@@ -88,7 +88,7 @@
 <div mat-dialog-actions class="tb-dialog-actions">
   <button mat-stroked-button *ngIf="selectedIndex > 0"
           (click)="backStep()">{{ 'action.back' | translate }}</button>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-raised-button
           color="primary"
           (click)="nextStep()">{{ nextStepLabel() | translate }}</button>

ui-ngx/src/app/modules/home/pages/notification/template/template-table-header.component.html

@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<div fxFlex="100" fxLayout="row" fxLayoutAlign="end center">
+<div class="flex flex-full flex-row items-center justify-end">
   <button mat-stroked-button color="primary" (click)="createTemplate($event)">
-    <div fxLayout="row" fxLayoutAlign="start center">
+    <div class="flex flex-row items-center justify-start">
       <mat-icon>add</mat-icon>{{ 'notification.add-template' | translate }}
     </div>
   </button>

ui-ngx/src/app/modules/home/pages/ota-update/ota-update.component.html

@@ -15,31 +15,31 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
-  <button mat-raised-button color="primary" fxFlex.xs
+  <button mat-raised-button color="primary" class="xs:flex-1"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
-  <button mat-raised-button color="primary" fxFlex.xs
+  <button mat-raised-button color="primary" class="xs:flex-1"
           [disabled]="(isLoading$ | async) || !(entity?.hasData && !entity?.url)"
           (click)="onEntityAction($event, 'uploadPackage')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{ 'ota-update.download' | translate }}
   </button>
-  <button mat-raised-button color="primary" fxFlex.xs
+  <button mat-raised-button color="primary" class="xs:flex-1"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{ 'ota-update.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onPackageIdCopied()"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>ota-update.copyId</span>
     </button>
@@ -47,7 +47,7 @@
             ngxClipboard
             (cbOnSuccess)="onPackageChecksumCopied()"
             [cbContent]="entity?.checksum"
-            [fxShow]="!isEdit && entity?.checksum">
+            [class.!hidden]="isEdit || !entity?.checksum">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>ota-update.copy-checksum</span>
     </button>
@@ -55,17 +55,17 @@
             ngxClipboard
             (cbOnSuccess)="onPackageDirectUrlCopied()"
             [cbContent]="entity?.url"
-            [fxShow]="!isEdit && entity?.url">
+            [class.!hidden]="isEdit || !entity?.url">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>ota-update.copy-direct-url</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column" fxLayoutGap="8px">
+<div class="mat-padding flex flex-col gap-2">
   <form [formGroup]="entityForm">
-    <fieldset [disabled]="(isLoading$ | async) || !isEdit" fxLayout="column">
+    <fieldset [disabled]="(isLoading$ | async) || !isEdit" class="flex flex-col">
-      <div fxLayout="row" fxLayoutGap.gt-xs="8px" fxLayout.xs="column">
+      <div class="flex flex-row xs:flex-col gt-xs:gap-2">
-        <mat-form-field class="mat-block" fxFlex="45">
+        <mat-form-field class="mat-block max-w-45% flex-full">
           <mat-label translate>ota-update.title</mat-label>
           <input matInput formControlName="title" type="text" required [readonly]="!isAdd">
           <mat-error *ngIf="entityForm.get('title').hasError('required')">
@@ -75,7 +75,7 @@
             {{ 'ota-update.title-max-length' | translate }}
           </mat-error>
         </mat-form-field>
-        <mat-form-field class="mat-block" fxFlex>
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>ota-update.version</mat-label>
           <input matInput formControlName="version" type="text" required [readonly]="!isAdd">
           <mat-error *ngIf="entityForm.get('version').hasError('required')">
@@ -86,7 +86,7 @@
           </mat-error>
         </mat-form-field>
       </div>
-      <mat-form-field class="mat-block" fxFlex style="margin-bottom: 8px">
+      <mat-form-field class="mat-block flex-1" style="margin-bottom: 8px">
         <mat-label translate>ota-update.version-tag</mat-label>
         <input matInput formControlName="tag" type="text" [readonly]="!isAdd">
         <mat-hint *ngIf="isAdd" translate>ota-update.version-tag-hint</mat-hint>
@@ -94,7 +94,8 @@
       <tb-device-profile-autocomplete
         formControlName="deviceProfileId"
         required
-        [ngStyle]="{'padding-bottom': isAdd ? '16px': 0}"
+        [class.pb-4]="isAdd"
+        [class.pb-0]="!isAdd"
         [hint]="'ota-update.chose-compatible-device-profile'"
         [editProfileEnabled]="false"
         [addNewProfile]="false"
@@ -110,7 +111,7 @@
       </mat-form-field>
       <section *ngIf="isAdd">
         <div class="mat-caption" style="margin: -8px 0 8px;" translate>ota-update.warning-after-save-no-edit</div>
-        <mat-radio-group formControlName="isURL" fxLayoutGap="16px">
+        <mat-radio-group formControlName="isURL" class="gap-4">
           <mat-radio-button [value]="false">{{ "ota-update.upload-binary-file" | translate }}</mat-radio-button>
           <mat-radio-button [value]="true">{{ "ota-update.use-external-url" | translate }}</mat-radio-button>
         </mat-radio-group>
@@ -128,10 +129,9 @@
             {{ 'ota-update.auto-generate-checksum' | translate }}
           </mat-checkbox>
         </section>
-        <div fxLayout="row" fxLayoutGap.gt-xs="8px" fxLayoutGap.sm="8px"
+        <div class="flex flex-row xs:flex-col sm:gap-2 md:flex-col gt-xs:gap-2"
-             fxLayout.xs="column" fxLayout.md="column"
              *ngIf="!(isAdd && this.entityForm.get('generateChecksum').value)">
-          <mat-form-field class="mat-block" fxFlex="33">
+          <mat-form-field class="mat-block max-w-33% flex-full">
             <mat-label translate>ota-update.checksum-algorithm</mat-label>
             <mat-select formControlName="checksumAlgorithm">
               <mat-option *ngFor="let checksumAlgorithm of checksumAlgorithms" [value]="checksumAlgorithm">
@@ -139,23 +139,23 @@
               </mat-option>
             </mat-select>
           </mat-form-field>
-          <mat-form-field class="mat-block" fxFlex>
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>ota-update.checksum</mat-label>
             <input matInput formControlName="checksum" type="text">
             <mat-hint *ngIf="isAdd" translate>ota-update.checksum-hint</mat-hint>
           </mat-form-field>
         </div>
         <section *ngIf="!isAdd">
-          <div fxLayout="row" fxLayoutGap.gt-md="8px" fxLayoutGap.sm="8px" fxLayout.xs="column" fxLayout.md="column">
+          <div class="flex flex-row xs:flex-col sm:gap-2 md:flex-col gt-md:gap-2">
-            <mat-form-field class="mat-block" fxFlex="33">
+            <mat-form-field class="mat-block max-w-33% flex-full">
               <mat-label translate>ota-update.file-name</mat-label>
               <input matInput formControlName="fileName" type="text">
             </mat-form-field>
-            <mat-form-field class="mat-block" fxFlex>
+            <mat-form-field class="mat-block flex-1">
               <mat-label translate>ota-update.file-size-bytes</mat-label>
               <input matInput formControlName="dataSize" type="text">
             </mat-form-field>
-            <mat-form-field class="mat-block" fxFlex>
+            <mat-form-field class="mat-block flex-1">
               <mat-label translate>ota-update.content-type</mat-label>
               <input matInput formControlName="contentType" type="text">
             </mat-form-field>

ui-ngx/src/app/modules/home/pages/profile/profile.component.html

@@ -18,13 +18,12 @@
 <div>
   <mat-card appearance="outlined" class="profile-card">
     <mat-card-header>
-      <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.xs="8px"
+      <div class="flex flex-1 flex-row items-start justify-between xs:flex-col xs:justify-start xs:gap-2">
-           fxLayoutAlign="space-between start" fxLayoutAlign.xs="start start">
+        <div class="flex flex-1 flex-col">
-        <div fxFlex fxLayout="column">
           <span class="mat-headline-5" translate>profile.profile</span>
           <span class="profile-email" style='opacity: 0.7;'>{{ profile ? profile.get('email').value : '' }}</span>
         </div>
-        <div fxLayout="column">
+        <div class="flex flex-col">
           <span class="mat-mdc-subheader" translate>profile.last-login-time</span>
           <span class="profile-last-login-ts" style='opacity: 0.7;'>{{ user?.additionalInfo?.lastLoginTs | date:'yyyy-MM-dd HH:mm:ss'  }}</span>
         </div>
@@ -67,9 +66,9 @@
               </mat-option>
             </mat-select>
           </mat-form-field>
-          <section class="tb-home-dashboard" fxFlex fxLayout="column" fxLayout.gt-sm="row" *ngIf="!isSysAdmin()">
+          <section class="tb-home-dashboard flex flex-1 flex-col gt-sm:flex-row" *ngIf="!isSysAdmin()">
             <tb-dashboard-autocomplete
-              fxFlex
+              class="flex-1"
               label="{{ 'dashboard.home-dashboard' | translate }}"
               formControlName="homeDashboardId"
               [dashboardsScope]="user?.authority === authorities.TENANT_ADMIN ? 'tenant' : 'customer'"
@@ -77,11 +76,11 @@
               [customerId]="user?.customerId?.id"
               [selectFirstDashboard]="false"
             ></tb-dashboard-autocomplete>
-            <mat-checkbox fxFlex formControlName="homeDashboardHideToolbar">
+            <mat-checkbox class="flex-1" formControlName="homeDashboardHideToolbar">
               {{ 'dashboard.home-dashboard-hide-toolbar' | translate }}
             </mat-checkbox>
           </section>
-          <div fxLayout="row" fxLayoutAlign="end start">
+          <div class="flex flex-row items-start justify-end">
             <button mat-button mat-raised-button color="primary"
                     type="submit"
                     [disabled]="(isLoading$ | async) || profile.invalid || !profile.dirty">

ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html

@@ -18,7 +18,7 @@
 <form (ngSubmit)="add()" class="dialog-container">
   <mat-toolbar color="primary">
     <h2 translate>rulenode.add</h2>
-    <span fxFlex>: {{ruleNode.component.name}}</span>
+    <span class="flex-1">: {{ruleNode.component.name}}</span>
     <div [tb-help]="helpLinkIdForRuleNodeType()"></div>
     <button mat-icon-button
             (click)="cancel()"
@@ -36,7 +36,7 @@
                   isAdd>
     </tb-rule-node>
   </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"
             [disabled]="(isLoading$ | async)"

ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-link-dialog.component.html

@@ -18,7 +18,7 @@
 <form [formGroup]="ruleNodeLinkFormGroup" (ngSubmit)="add()" style="width: 480px;">
   <mat-toolbar color="primary">
     <h2 translate>rulenode.add-link</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <div [tb-help]="'ruleEngine'"></div>
     <button mat-icon-button
             (click)="cancel()"
@@ -39,7 +39,7 @@
       </tb-rule-node-link>
     </fieldset>
   </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"
             [disabled]="(isLoading$ | async)"

ui-ngx/src/app/modules/home/pages/rulechain/create-nested-rulechain-dialog.component.html

@@ -18,7 +18,7 @@
 <form (ngSubmit)="add()" style="min-width: 650px;">
   <mat-toolbar color="primary">
     <h2 translate>rulenode.create-nested-rulechain</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -30,7 +30,7 @@
   <div mat-dialog-content>
     <form [formGroup]="createNestedRuleChainFormGroup" class="mat-padding">
       <fieldset [disabled]="isLoading$ | async">
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>rulechain.name</mat-label>
           <input matInput formControlName="name" required>
           <mat-error *ngIf="createNestedRuleChainFormGroup.get('name').hasError('required')">
@@ -49,7 +49,7 @@
       </fieldset>
     </form>
   </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"
             [disabled]="(isLoading$ | async)"

ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html

@@ -23,7 +23,7 @@
 </div>
 <form [formGroup]="ruleNodeFormGroup" class="mat-padding">
   <section class="title-row">
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>rulenode.name</mat-label>
       <input matInput formControlName="name" required>
       <mat-error *ngIf="ruleNodeFormGroup.get('name').hasError('required')

ui-ngx/src/app/modules/home/pages/rulechain/rule-node-link.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <form [formGroup]="ruleNodeLinkFormGroup">
     <tb-link-labels
       required

ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html

@@ -15,22 +15,21 @@
     limitations under the License.
 
 -->
-<div class="mat-content tb-rulechain" fxFlex tb-fullscreen [fullscreen]="isFullscreen" [tb-hotkeys]="hotKeys"
+<div class="mat-content tb-rulechain flex flex-1 flex-col" tb-fullscreen [fullscreen]="isFullscreen" [tb-hotkeys]="hotKeys"
-     [cheatSheet]="cheatSheetComponent" fxLayout="column">
+     [cheatSheet]="cheatSheetComponent">
   <tb-hotkeys-cheatsheet #cheatSheetComponent></tb-hotkeys-cheatsheet>
-  <section class="tb-rulechain-container" fxFlex fxLayout="column">
+  <section class="tb-rulechain-container flex flex-1 flex-col">
-    <div class="tb-rulechain-layout" fxFlex fxLayout="row">
+    <div class="tb-rulechain-layout flex flex-1 flex-row">
-      <mat-drawer-container style="width: 100%; height: 100%;">
+      <mat-drawer-container class="size-full">
-        <mat-drawer class="tb-rulechain-library mat-elevation-z4"
+        <mat-drawer class="tb-rulechain-library mat-elevation-z4 flex flex-col"
                     disableClose="true"
                     mode="side"
                     #drawer
                     opened
-                    position="start"
+                    position="start">
-                    fxLayout="column">
           <mat-toolbar color="primary" class="tb-dark">
             <tb-rule-chain-select
-              fxFlex
+              class="flex-1"
               *ngIf="!isImport"
               [ruleChainType]="ruleChainType"
               [disabled]="isDirtyValue"
@@ -40,7 +39,7 @@
           </mat-toolbar>
           <mat-toolbar>
             <div class="mat-toolbar-tools">
-              <mat-form-field fxFlex class="tb-appearance-transparent">
+              <mat-form-field class="tb-appearance-transparent flex-1">
                 <button mat-icon-button matPrefix class="tb-small"
                         matTooltip="{{'rulenode.search' | translate}}"
                         matTooltipPosition="above">
@@ -50,7 +49,7 @@
                        [formControl]="ruleNodeTypeSearch"
                        placeholder="{{'rulenode.search' | translate}}"/>
                 <button mat-icon-button matSuffix class="tb-small"
-                        [fxShow]="ruleNodeTypeSearch.value !== ''"
+                        [class.!hidden]="ruleNodeTypeSearch.value === ''"
                         (click)="ruleNodeTypeSearch.reset()"
                         matTooltip="{{'action.clear-search' | translate}}"
                         matTooltipPosition="above">
@@ -89,7 +88,7 @@
                     (closed)="onDetailsDrawerClosed()"
                     mode="over"
                     position="end">
-          <tb-details-panel *ngIf="editingRuleNode" fxFlex
+          <tb-details-panel *ngIf="editingRuleNode" class="flex-1"
                             headerTitle="{{editingRuleNode.name}}"
                             headerSubtitle="{{
                               (ruleNodeTypeDescriptorsMap.get(editingRuleNode.component.type).name | translate)
@@ -104,7 +103,7 @@
             <div class="details-buttons">
               <div [tb-help]="helpLinkIdForRuleNodeType()"></div>
             </div>
-            <mat-tab-group fxFlex mat-stretch-tabs="false" class="tb-absolute-fill tb-rulenode-details" [(selectedIndex)]="selectedRuleNodeTabIndex">
+            <mat-tab-group mat-stretch-tabs="false" class="tb-absolute-fill tb-rulenode-details flex-1" [(selectedIndex)]="selectedRuleNodeTabIndex">
               <mat-tab label="{{ 'rulenode.details' | translate }}">
                 <tb-rule-node #tbRuleNode
                               [ruleNode]="editingRuleNode"
@@ -126,7 +125,7 @@
               </mat-tab>
               <mat-tab label="{{ 'rulenode.help' | translate }}">
                 <div class="tb-rule-node-help">
-                  <div id="tb-node-content" class="mat-padding" fxLayout="column">
+                  <div id="tb-node-content" class="mat-padding flex flex-col">
                     <div class="tb-node-title">{{editingRuleNode.component.name}}</div>
                     <div>&nbsp;</div>
                     <div class="tb-node-description" [innerHtml]="editingRuleNode.component.configurationDescriptor.nodeDefinition.description | safe: 'html'"></div>
@@ -137,7 +136,7 @@
               </mat-tab>
             </mat-tab-group>
           </tb-details-panel>
-          <tb-details-panel *ngIf="editingRuleNodeLink" fxFlex
+          <tb-details-panel *ngIf="editingRuleNodeLink" class="flex-1"
                             headerTitle="{{editingRuleNodeLink.label}}"
                             headerSubtitle="{{'rulenode.link-details' | translate}}"
                             [isReadOnly]="false"
@@ -150,7 +149,7 @@
               <div [tb-help]="'ruleEngine'"></div>
             </div>
             <tb-rule-node-link
-              fxFlex
+              class="flex-1"
               #tbRuleNodeLink
               [(ngModel)]="editingRuleNodeLink"
               [allowedLabels]="editingRuleNodeLinkLabels"
@@ -166,7 +165,7 @@
                   (click)="drawer.toggle();"
                   matTooltip="{{ (drawer.opened ? 'rulenode.close-node-library' : 'rulenode.open-node-library') | translate }}"
                   matTooltipPosition="above">
-            <mat-icon class="tb-library-node-btn-icon" [ngClass]="{'tb-library-node-btn-icon-toggled' : drawer.opened}">chevron_right</mat-icon>
+            <mat-icon class="tb-library-node-btn-icon" [class.tb-library-node-btn-icon-toggled]="drawer.opened">chevron_right</mat-icon>
           </button>
           <button #versionControlButton
                   *ngIf="!isImport"
@@ -198,7 +197,7 @@
                   <div class="tb-context-menu-header {{contextInfo.headerClass}}">
                     <mat-icon *ngIf="!contextInfo.iconUrl">{{contextInfo.icon}}</mat-icon>
                     <img *ngIf="contextInfo.iconUrl" [src]="contextInfo.iconUrl"/>
-                    <div fxFlex>
+                    <div class="flex-1">
                       <div class="tb-context-menu-title">{{contextInfo.title}}</div>
                       <div class="tb-context-menu-subtitle">{{contextInfo.subtitle}}</div>
                     </div>
@@ -231,10 +230,10 @@
                        [userCallbacks]="editCallbacks">
             </fc-canvas>
           </div>
-          <section fxLayout="row" class="layout-wrap tb-footer-buttons" fxLayoutAlign="start end">
+          <section class="tb-footer-buttons flex flex-row flex-wrap items-end justify-start">
             <button [disabled]="isLoading$ | async"
                     mat-fab color="accent" class="tb-btn-footer"
-                    [ngClass]="{'tb-hide': !objectsSelected()}"
+                    [class.tb-hide]="!objectsSelected()"
                     (click)="deleteSelected()"
                     matTooltip="{{ 'rulenode.delete-selected-objects' | translate }}"
                     matTooltipPosition="above">

ui-ngx/src/app/modules/home/pages/rulechain/rulechain.component.html

@@ -19,63 +19,63 @@
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'rulechain.open-rulechain' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'export')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'rulechain.export' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'setRoot')"
-          [fxShow]="!isEdit && ((!entity?.root && ruleChainScope === 'tenant') || (!isEdgeRootRuleChain() && ruleChainScope === 'edge'))">
+          [class.!hidden]="isEdit || !((!entity?.root && ruleChainScope === 'tenant') || (!isEdgeRootRuleChain() && ruleChainScope === 'edge'))">
     {{'rulechain.set-root' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'setEdgeTemplateRoot')"
-          [fxShow]="!isEdit && !entity?.root && ruleChainScope === 'edges'">
+          [class.!hidden]="isEdit || entity?.root || ruleChainScope !== 'edges'">
     {{'rulechain.set-edge-template-root-rulechain' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'setAutoAssignToEdge')"
-          [fxShow]="!isEdit && isNotAutoAssignToEdgeRuleChain() && ruleChainScope === 'edges'">
+          [class.!hidden]="isEdit || !isNotAutoAssignToEdgeRuleChain() || ruleChainScope !== 'edges'">
     {{'rulechain.set-auto-assign-to-edge' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unsetAutoAssignToEdge')"
-          [fxShow]="!isEdit && isAutoAssignToEdgeRuleChain() && ruleChainScope === 'edges'">
+          [class.!hidden]="isEdit || !isAutoAssignToEdgeRuleChain() || ruleChainScope !== 'edges'">
     {{'rulechain.unset-auto-assign-to-edge' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromEdge')"
-          [fxShow]="!isEdit && !isEdgeRootRuleChain() && ruleChainScope === 'edge'">
+          [class.!hidden]="isEdit || isEdgeRootRuleChain() || ruleChainScope !== 'edges'">
     {{'edge.unassign-from-edge' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit && ruleChainScope !== 'edge'">
+          [class.!hidden]="hideDelete() || isEdit || ruleChainScope === 'edge'">
     {{'rulechain.delete' | translate }}
   </button>
-  <div fxLayout="row">
+  <div class="flex flex-row">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onRuleChainIdCopied($event)"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>rulechain.copyId</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
@@ -88,7 +88,7 @@
           {{ 'rulechain.name-max-length' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-checkbox fxFlex formControlName="debugMode" style="padding-bottom: 16px;">
+      <mat-checkbox class="flex-1" formControlName="debugMode" style="padding-bottom: 16px;">
         {{ 'rulechain.debug-mode' | translate }}
       </mat-checkbox>
       <div formGroupName="additionalInfo">

ui-ngx/src/app/modules/home/pages/rulechain/rulenode.component.html

@@ -22,11 +22,11 @@
    (mouseleave)="userNodeCallbacks.mouseLeave($event, node)">
   <div class="fc-node-overlay"></div>
   <div class="tb-rule-node {{node.nodeClass}}"
-       [ngClass]="{'tb-rule-node-highlighted' : node.highlighted,
+       [class.tb-rule-node-highlighted]="node.highlighted"
-                   'tb-rule-node-invalid': node.error }">
+       [class.tb-rule-node-invalid]="node.error">
-    <mat-icon *ngIf="!iconUrl" fxFlex="15">{{node.icon}}</mat-icon>
+    <mat-icon *ngIf="!iconUrl" class="max-w-15% flex-full">{{node.icon}}</mat-icon>
-    <img *ngIf="iconUrl" fxFlex="15" [src]="iconUrl"/>
+    <img *ngIf="iconUrl" class="max-w-15% flex-full" [src]="iconUrl"/>
-    <div fxLayout="column" fxFlex="85" fxLayoutAlign="center">
+    <div class="flex max-w-85% flex-full flex-col items-stretch justify-center">
       <span class="tb-node-type">{{ node.component.name }}</span>
       <span class="tb-node-title" *ngIf="node.name">{{ node.name }}</span>
     </div>