Flex layout replacements. Switch to tailwind.css.

ui-ngx/src/app/modules/home/components/profile/device/coap-device-profile-transport-configuration.component.html

@@ -19,7 +19,7 @@
   <section formGroupName="coapDeviceTypeConfiguration">
     <fieldset class="fields-group">
       <legend class="group-title" translate>device-profile.coap-device-type</legend>
-      <div fxLayoutGap="8px" fxLayout="column">
+      <div class="flex flex-col gap-2">
         <mat-form-field class="mat-block">
           <mat-select formControlName="coapDeviceType" required>
             <mat-option *ngFor="let type of coapTransportDeviceTypes" [value]="type">
@@ -35,7 +35,7 @@
     <div *ngIf="coapDeviceTypeDefault" formGroupName="transportPayloadTypeConfiguration">
       <fieldset class="fields-group">
         <legend class="group-title" translate>device-profile.coap-device-payload-type</legend>
-        <div fxLayoutGap="8px" fxLayout="column">
+        <div class="flex flex-col gap-2">
           <mat-form-field class="mat-block">
             <mat-select formControlName="transportPayloadType" required>
               <mat-option *ngFor="let type of transportPayloadTypes" [value]="type">
@@ -46,10 +46,10 @@
               {{ 'device-profile.mqtt-payload-type-required' | translate }}
             </mat-error>
           </mat-form-field>
-          <div *ngIf="protoPayloadType" fxLayout="column">
+          <div *ngIf="protoPayloadType" class="flex flex-col">
             <ng-container>
               <tb-protobuf-content
-                fxFlex
+                class="flex-1"
                 formControlName="deviceTelemetryProtoSchema"
                 label="{{ 'device-profile.telemetry-proto-schema' | translate }}"
                 [fillHeight]="true">
@@ -60,7 +60,7 @@
             </ng-container>
             <ng-container>
               <tb-protobuf-content
-                fxFlex
+                class="flex-1"
                 formControlName="deviceAttributesProtoSchema"
                 label="{{ 'device-profile.attributes-proto-schema' | translate }}"
                 [fillHeight]="true">
@@ -71,7 +71,7 @@
             </ng-container>
             <ng-container>
               <tb-protobuf-content
-                fxFlex
+                class="flex-1"
                 formControlName="deviceRpcRequestProtoSchema"
                 label="{{ 'device-profile.rpc-request-proto-schema' | translate }}"
                 [fillHeight]="true">
@@ -82,7 +82,7 @@
             </ng-container>
             <ng-container>
               <tb-protobuf-content
-                fxFlex
+                class="flex-1"
                 formControlName="deviceRpcResponseProtoSchema"
                 label="{{ 'device-profile.rpc-response-proto-schema' | translate }}"
                 [fillHeight]="true">

ui-ngx/src/app/modules/home/components/profile/device/common/power-mode-setting.component.html

@@ -16,7 +16,7 @@
 
 -->
 <section [formGroup]="parentForm">
-  <mat-form-field class="mat-block" fxFlex>
+  <mat-form-field class="mat-block flex-1">
     <mat-label *ngIf="isDeviceSetting">{{ "device-profile.power-saving-mode" | translate }}</mat-label>
     <mat-select formControlName="powerMode">
       <mat-option [value]="null" *ngIf="isDeviceSetting">{{ "device-profile.power-saving-mode-type.default" | translate }}</mat-option>
@@ -25,7 +25,7 @@
       </mat-option>
     </mat-select>
   </mat-form-field>
-  <section class="mat-block" fxFlex *ngIf="parentForm.get('powerMode').value === 'E_DRX'">
+  <section class="mat-block flex-1" *ngIf="parentForm.get('powerMode').value === 'E_DRX'">
     <tb-time-unit-select [labelText]="'device-profile.edrx-cycle'"
                          [requiredText]="'device-profile.edrx-cycle-required'"
                          [patternText]="'device-profile.edrx-cycle-pattern'"

ui-ngx/src/app/modules/home/components/profile/device/common/time-unit-select.component.html

@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<section [formGroup]="timeUnitSelectFormGroup" fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
+<section [formGroup]="timeUnitSelectFormGroup" class="flex flex-row xs:flex-col gt-xs:gap-2">
-  <mat-form-field class="mat-block" fxFlex>
+  <mat-form-field class="mat-block flex-1">
     <mat-label>{{ labelText | translate }}</mat-label>
     <input matInput type="number" min="0" formControlName="time" required>
     <mat-error *ngIf="timeUnitSelectFormGroup.get('time').hasError('required')">
@@ -29,7 +29,7 @@
       {{ (minText || patternText) | translate : {min: minTime/1000} }}
     </mat-error>
   </mat-form-field>
-  <mat-form-field class="mat-block" fxFlex>
+  <mat-form-field class="mat-block flex-1">
     <mat-label translate>device-profile.condition-duration-time-unit</mat-label>
     <mat-select formControlName="unit">
       <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-dialog.component.html

@@ -20,7 +20,7 @@
     <h2>
       {{ (readonly ? 'device-profile.lwm2m.view-attributes' : 'device-profile.lwm2m.edit-attributes') | translate : {name: name} }}
     </h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -35,7 +35,7 @@
       formControlName="attributes">
     </tb-lwm2m-attributes-key-list>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-key-list.component.html

@@ -15,17 +15,17 @@
     limitations under the License.
 
 -->
-<section fxLayout="column" class="name-value-map" [formGroup]="attributesValueFormGroup">
+<section class="name-value-map flex flex-col" [formGroup]="attributesValueFormGroup">
-  <div fxLayout="row" fxLayoutGap="8px" style="max-height: 40px; margin-top: 8px;">
+  <div class="flex flex-row gap-2" style="max-height: 40px; margin-top: 8px;">
-    <label fxFlex="40" class="tb-title no-padding" style="min-width: 230px;" translate>device-profile.lwm2m.attribute-name</label>
+    <label class="tb-title no-padding flex-full max-w-40%" style="min-width: 230px;" translate>device-profile.lwm2m.attribute-name</label>
-    <label fxFlex="60" class="tb-title no-padding" translate>device-profile.lwm2m.attribute-value</label>
+    <label class="tb-title no-padding flex-full max-w-60%" translate>device-profile.lwm2m.attribute-value</label>
-    <span [fxShow]="!disabled" style="width: 40px;"></span>
+    <span [class.!hidden]="disabled" style="width: 40px;"></span>
   </div>
-  <div fxLayout="column" class="map-list"
+  <div class="map-list flex flex-col"
        *ngFor="let nameValueControl of attributesValueFormArray().controls; let $index = index"
         [formGroup]="nameValueControl">
-    <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="flex flex-row justify-start items-center gap-2">
-      <mat-form-field fxFlex="40">
+      <mat-form-field class="flex-full max-w-40%">
         <mat-select formControlName="name" required>
           <mat-option *ngFor="let attributeName of attributeNames" [value]="attributeName"
                       [disabled]="isDisabledAttributeName(attributeName, $index)">
@@ -36,13 +36,13 @@
           {{ 'device-profile.lwm2m.attribute-name-required' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex="60">
+      <mat-form-field class="flex-full max-w-60%">
         <input formControlName="value" matInput required type="number"
                placeholder="{{ 'key-val.value' | translate }}">
-        <mat-error fxLayout="row" *ngIf="nameValueControl.get('value').hasError('required')">
+        <mat-error class="flex flex-row" *ngIf="nameValueControl.get('value').hasError('required')">
           {{ 'device-profile.lwm2m.attribute-value-required' | translate }}
         </mat-error>
-        <mat-error fxLayout="row" *ngIf="nameValueControl.get('value').hasError('min') ||
+        <mat-error class="flex flex-row" *ngIf="nameValueControl.get('value').hasError('min') ||
                                           nameValueControl.get('value').hasError('pattern')">
           {{ 'device-profile.lwm2m.attribute-value-pattern' | translate }}
         </mat-error>
@@ -57,9 +57,8 @@
       </button>
     </div>
   </div>
-  <div [fxShow]="!attributesValueFormArray().length"
+  <div [class.!hidden]="attributesValueFormArray().length"
-        fxLayoutAlign="center center"
+        class="map-list flex justify-center items-center" translate>device-profile.lwm2m.no-attributes-set</div>
-        class="map-list" translate>device-profile.lwm2m.no-attributes-set</div>
   <div style="margin-top: 9px;" *ngIf="!disabled && isAddEnabled">
     <button mat-stroked-button color="primary"
             [disabled]="isLoading$ | async"

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div [fxHide]="disabled && isEmpty()" matTooltip="{{ tooltipSetAttributesTelemetry | translate }}" matTooltipPosition="above">
+<div [class.!hidden]="disabled && isEmpty()" matTooltip="{{ tooltipSetAttributesTelemetry | translate }}" matTooltipPosition="above">
   <button type="button"
           [disabled]="isDisableBtn()"
           mat-icon-button

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-add-config-server-dialog.component.html

@@ -16,17 +16,17 @@
 
 -->
 <form [formGroup]="addConfigServerFormGroup" style="width: 400px;">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2 translate>device-profile.lwm2m.add-new-server-title</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button (click)="cancel()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </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 fxLayout="column">
+  <div mat-dialog-content class="flex flex-col">
     <mat-form-field>
       <mat-label>{{ 'device-profile.lwm2m.server-type' | translate }}</mat-label>
       <mat-select formControlName="serverType">
@@ -37,8 +37,8 @@
       </mat-select>
     </mat-form-field>
   </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/components/profile/device/lwm2m/lwm2m-bootstrap-config-servers.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div fxLayout="column">
+<div class="flex flex-col">
   <mat-accordion multi="true">
     <div *ngFor="let serverConfig of serverConfigsFromArray.controls; trackBy: trackByParams; let $index = index;">
       <tb-profile-lwm2m-device-config-server
@@ -27,8 +27,8 @@
     </div>
   </mat-accordion>
   <div *ngIf="!serverConfigsFromArray.controls.length" style="margin:32px 0">
-      <span translate fxLayoutAlign="center center"
+      <span translate
-            class="tb-prompt">device-profile.lwm2m.no-config-servers</span>
+            class="tb-prompt flex justify-center items-center">device-profile.lwm2m.no-config-servers</span>
   </div>
   <div *ngIf="!disabled" style="padding-top: 16px;">
     <button mat-raised-button color="primary"

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-config-server.component.html

@@ -17,12 +17,12 @@
 -->
 <mat-expansion-panel [formGroup]="serverFormGroup" #serverPanel>
   <mat-expansion-panel-header>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+    <div class="flex-1 flex flex-row justify-start items-center">
       <mat-panel-title>
-        <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+        <div class="flex-1 flex flex-row justify-start items-center">
           <div style="min-width:150px">{{ (serverFormGroup.get('bootstrapServerIs').value ?
             'device-profile.lwm2m.bootstrap-server' : 'device-profile.lwm2m.lwm2m-server') | translate }}</div>
-          <div *ngIf="!serverPanel.expanded" fxLayout="row" style="font-size:14px" class="no-wrap">
+          <div *ngIf="!serverPanel.expanded" style="font-size:14px" class="no-wrap flex flex-row">
             <div style="margin-left:32px">{{ ('device-profile.lwm2m.short-id' | translate) + ': ' }}
               <span style="font-style: italic">{{ serverFormGroup.get('shortServerId').value }}</span>
             </div>
@@ -32,7 +32,7 @@
           </div>
         </div>
       </mat-panel-title>
-      <span fxFlex="100"></span>
+      <span class="flex-full"></span>
       <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
               type="button"
               (click)="removeServer.emit($event)"
@@ -44,8 +44,8 @@
   </mat-expansion-panel-header>
   <ng-template matExpansionPanelContent>
     <section>
-      <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px" fxLayoutGap.xs="0px">
+      <div class="flex flex-row xs:flex-col gap-2 xs:gap-0">
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>{{ 'device-profile.lwm2m.mode' | translate }}</mat-label>
           <mat-select formControlName="securityMode">
             <mat-option *ngFor="let securityMode of securityConfigLwM2MTypes"
@@ -54,7 +54,7 @@
             </mat-option>
           </mat-select>
         </mat-form-field>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>{{ 'device-profile.lwm2m.short-id' | translate }}</mat-label>
           <mat-icon *ngIf="!disabled" class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
                     matTooltip="{{ (isBootstrap ? 'device-profile.lwm2m.short-id-tooltip-bootstrap': 'device-profile.lwm2m.short-id-tooltip') | translate }}">help</mat-icon>
@@ -71,15 +71,15 @@
           </mat-error>
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px" fxLayoutGap.xs="0px">
+      <div class="flex flex-row xs:flex-col gap-2 xs:gap-0">
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>{{ 'device-profile.lwm2m.server-host' | translate }}</mat-label>
           <input matInput type="text" formControlName="host" required>
           <mat-error *ngIf="serverFormGroup.get('host').hasError('required')">
             {{ 'device-profile.lwm2m.server-host-required' | translate }}
           </mat-error>
         </mat-form-field>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>{{ 'device-profile.lwm2m.server-port' | translate }}</mat-label>
           <input matInput type="number" formControlName="port" required min="0" max="65535" readonly>
           <mat-error *ngIf="serverFormGroup.get('port').hasError('required')">
@@ -94,8 +94,8 @@
           </mat-error>
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px" fxLayoutGap.xs="0px">
+      <div class="flex flex-row xs:flex-col gap-2 xs:gap-0">
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>{{ 'device-profile.lwm2m.client-hold-off-time' | translate }}</mat-label>
           <mat-icon *ngIf="!disabled" class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
                     matTooltip="{{'device-profile.lwm2m.client-hold-off-time-tooltip' | translate }}">help</mat-icon>
@@ -108,7 +108,7 @@
             {{ 'device-profile.lwm2m.client-hold-off-time-pattern' | translate }}
           </mat-error>
         </mat-form-field>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>{{ 'device-profile.lwm2m.account-after-timeout' | translate }}</mat-label>
           <mat-icon *ngIf="!disabled" class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
                     matTooltip="{{'device-profile.lwm2m.account-after-timeout-tooltip' | translate }}">help</mat-icon>
@@ -140,8 +140,8 @@
           </mat-error>
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px" fxLayoutGap.xs="0px">
+      <div class="flex flex-row xs:flex-col gap-2 xs:gap-0">
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>{{ 'device-profile.lwm2m.lifetime' | translate }}</mat-label>
           <input matInput type="number" min="0" formControlName="lifetime" required>
           <mat-error *ngIf="serverFormGroup.get('lifetime').hasError('required')">
@@ -152,7 +152,7 @@
             {{ 'device-profile.lwm2m.lifetime-pattern' | translate }}
           </mat-error>
         </mat-form-field>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>{{ 'device-profile.lwm2m.default-min-period' | translate }}</mat-label>
           <mat-icon *ngIf="!disabled" class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
                     matTooltip="{{'device-profile.lwm2m.default-min-period-tooltip' | translate }}">help</mat-icon>

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-profile-transport-configuration.component.html

@@ -33,7 +33,7 @@
     </mat-tab>
     <mat-tab label="{{ 'device-profile.lwm2m.bootstrap-tab' | translate }}">
       <section [formGroup]="lwm2mDeviceProfileFormGroup">
-        <div *ngIf="!isTransportWasRunWithBootstrap" style="padding:16px 0 0 8px;" fxLayout="row" fxLayoutAlign="start end">
+        <div *ngIf="!isTransportWasRunWithBootstrap" style="padding:16px 0 0 8px;" class="flex flex-row justify-start items-end">
           <mat-icon color="warn" class="material-icons" style="margin-right:8px;">warning</mat-icon>
           <span style="font-weight:500">LwM2M transport was run without bootstrap server</span>
         </div>
@@ -53,7 +53,7 @@
         <section formGroupName="clientLwM2mSettings">
           <fieldset class="fields-group">
             <legend class="group-title" translate>device-profile.lwm2m.fw-update</legend>
-            <mat-form-field class="mat-block" fxFlex>
+            <mat-form-field class="mat-block flex-1">
               <mat-label>{{ 'device-profile.lwm2m.fw-update-strategy' | translate }}</mat-label>
               <mat-select formControlName="fwUpdateStrategy">
                 <mat-option [value]=1>{{ 'device-profile.lwm2m.fw-update-strategy-package' | translate }}</mat-option>
@@ -61,7 +61,7 @@
                 <mat-option [value]=3>{{ 'device-profile.lwm2m.fw-update-strategy-data' | translate }}</mat-option>
               </mat-select>
             </mat-form-field>
-            <mat-form-field class="mat-block" fxFlex *ngIf="lwm2mDeviceProfileFormGroup.get('clientLwM2mSettings.fwUpdateStrategy').value === 2">
+            <mat-form-field class="mat-block flex-1" *ngIf="lwm2mDeviceProfileFormGroup.get('clientLwM2mSettings.fwUpdateStrategy').value === 2">
               <mat-label>{{ 'device-profile.lwm2m.fw-update-resource' | translate }}</mat-label>
               <input matInput formControlName="fwUpdateResource" required>
               <mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('clientLwM2mSettings.fwUpdateResource').hasError('required')">
@@ -71,14 +71,14 @@
           </fieldset>
           <fieldset class="fields-group">
             <legend class="group-title" translate>device-profile.lwm2m.sw-update</legend>
-            <mat-form-field class="mat-block" fxFlex>
+            <mat-form-field class="mat-block flex-1">
               <mat-label>{{ 'device-profile.lwm2m.sw-update-strategy' | translate }}</mat-label>
               <mat-select formControlName="swUpdateStrategy">
                 <mat-option [value]=1>{{ 'device-profile.lwm2m.sw-update-strategy-package' | translate }}</mat-option>
                 <mat-option [value]=2>{{ 'device-profile.lwm2m.sw-update-strategy-package-uri' | translate }}</mat-option>
               </mat-select>
             </mat-form-field>
-            <mat-form-field class="mat-block" fxFlex *ngIf="lwm2mDeviceProfileFormGroup.get('clientLwM2mSettings.swUpdateStrategy').value === 2">
+            <mat-form-field class="mat-block flex-1" *ngIf="lwm2mDeviceProfileFormGroup.get('clientLwM2mSettings.swUpdateStrategy').value === 2">
               <mat-label>{{ 'device-profile.lwm2m.sw-update-resource' | translate }}</mat-label>
               <input matInput formControlName="swUpdateResource" required>
               <mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('clientLwM2mSettings.swUpdateResource').hasError('required')">
@@ -93,7 +93,7 @@
           </fieldset>
           <fieldset class="fields-group">
             <legend class="group-title" translate>device-profile.lwm2m.default-object-id</legend>
-            <mat-form-field fxFlex>
+            <mat-form-field class="flex-1">
               <mat-select formControlName="defaultObjectIDVer">
                 <mat-option *ngFor="let objectIDVer of objectIDVers" [value]="objectIDVer">
                   {{ objectIDVerTranslationMap.get(objectIDVer) | translate }}

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-dialog.component.html

@@ -16,9 +16,9 @@
 
 -->
 <form [formGroup]="instancesFormGroup" (ngSubmit)="add()" style="min-width: 400px;">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <span style="font-weight: 500">{{data.objectName}}</span>&nbsp;#{{data.objectId}}
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -36,7 +36,7 @@
       </tb-profile-lwm2m-object-add-instances-list>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex flex-row justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-instances.component.html

@@ -24,11 +24,11 @@
       [expanded]="isExpend"
       [disabled]="isExpend">
       <mat-expansion-panel-header>
-        <mat-panel-title class="tb-panel" fxLayout="row">
+        <mat-panel-title class="tb-panel flex flex-row">
-          <div fxFlex="30" fxLayoutAlign="start center">
+          <div class="flex-full max-w-30% flex justify-start items-center">
             <span class="tb-panel-title">{{ 'device-profile.lwm2m.instance' | translate }}</span>&nbsp;#{{instances.get('id').value}}
           </div>
-          <div fxLayoutAlign="center center" fxFlex="10">
+          <div class="flex-full max-w-10% flex justify-center items-center">
             <mat-checkbox color="warn"
                           [disabled]="this.disabled"
                           [checked]="getChecked(instances, 'attribute')"
@@ -37,7 +37,7 @@
                           [indeterminate]="getIndeterminate(instances, 'attribute')">
             </mat-checkbox>
           </div>
-          <div fxLayoutAlign="center center" fxFlex="10">
+          <div class="flex-full max-w-10% flex justify-center items-center">
             <mat-checkbox color="primary"
                           [disabled]="this.disabled"
                           [checked]="getChecked(instances, 'telemetry')"
@@ -46,7 +46,7 @@
                           [indeterminate]="getIndeterminate(instances, 'telemetry')">
             </mat-checkbox>
           </div>
-          <div fxLayoutAlign="center center" fxFlex="10">
+          <div class="flex-full max-w-10% flex justify-center items-center">
             <mat-checkbox color="primary"
                           [disabled]="disableObserve(instances)"
                           [checked]="getChecked(instances, 'observe')"
@@ -55,7 +55,7 @@
                           [indeterminate]="getIndeterminate(instances, 'observe')">
             </mat-checkbox>
           </div>
-          <span fxFlex></span>
+          <span class="flex-1"></span>
           <tb-profile-lwm2m-attributes
             formControlName="attributes"
             [isAttributeTelemetry]="disableObserveInstance(instances)"

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-resources.component.html

@@ -16,53 +16,53 @@
 
 -->
 <section [formGroup]="resourcesFormGroup">
-  <div fxLayout="row" fxLayoutAlign="start center">
+  <div class="flex flex-row justify-start items-center">
-    <div fxFlex="30">
+    <div class="flex-full max-w-30%">
       <mat-label translate>device-profile.lwm2m.resource-label</mat-label>
     </div>
-    <div fxFlex="10" class="checkbox-column-title">
+    <div class="checkbox-column-title flex-full max-w-10%">
       <mat-label translate>device-profile.lwm2m.attribute-label</mat-label>
     </div>
-    <div fxFlex="10" class="checkbox-column-title">
+    <div class="checkbox-column-title flex-full max-w-10%">
       <mat-label translate>device-profile.lwm2m.telemetry-label</mat-label>
     </div>
-    <div fxFlex="10" class="checkbox-column-title">
+    <div class="checkbox-column-title flex-full max-w-10%">
       <mat-label translate>device-profile.lwm2m.observe-label</mat-label>
     </div>
-    <div fxFlex>
+    <div class="flex-1">
       <mat-label translate>device-profile.lwm2m.key-name</mat-label>
     </div>
   </div>
   <mat-divider></mat-divider>
   <div formArrayName="resources"
     *ngFor="let resourceLwM2M of resourcesFormArray.controls; let $index = index; trackBy: trackByParams">
-    <div [formGroupName]="$index" fxLayout="row" fxLayoutAlign="start center" class="resource-list">
+    <div [formGroupName]="$index" class="resource-list flex flex-row justify-start items-center">
-      <div class="resource-name" fxFlex="30">
+      <div class="resource-name flex-full max-w-30%">
         #{{resourceLwM2M.get('id').value}} <span class="name">{{resourceLwM2M.get('name').value}}</span>
       </div>
-      <div fxFlex="10" fxLayoutAlign="center center">
+      <div class="flex-full max-w-10% flex justify-center items-center">
         <mat-checkbox formControlName="attribute" color="warn">
         </mat-checkbox>
       </div>
-      <div fxFlex="10" fxLayoutAlign="center center">
+      <div class="flex-full max-w-10% flex justify-center items-center">
         <mat-checkbox formControlName="telemetry" color="primary">
         </mat-checkbox>
       </div>
-      <div fxFlex="10" fxLayoutAlign="center center">
+      <div class="flex-full max-w-10% flex justify-center items-center">
-        <mat-checkbox fxFlex="10" formControlName="observe" color="primary"
+        <mat-checkbox class="flex-full max-w-10%" formControlName="observe" color="primary"
                       matTooltip="{{ 'device-profile.lwm2m.edit-observe-select'  | translate }}"
                       [matTooltipDisabled]="disabled || !isDisabledObserve($index)"
                       matTooltipPosition="above">
         </mat-checkbox>
       </div>
-      <mat-form-field fxFlex="33">
+      <mat-form-field class="flex-full max-w-33%">
         <input matInput type="text" formControlName="keyName" required>
         <mat-error *ngIf="resourceLwM2M.get('keyName').hasError('required') ||
                             resourceLwM2M.get('keyName').hasError('pattern')">
           {{ 'device-profile.lwm2m.key-name-required' | translate }}
         </mat-error>
       </mat-form-field>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <tb-profile-lwm2m-attributes
         formControlName="attributes"
         [isAttributeTelemetry]="isDisabledObserve($index)"

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry.component.html

@@ -21,9 +21,9 @@
       *ngFor="let objectLwM2M of modelsFormArray.controls; let $index = index; trackBy: trackByParams"
       [formGroupName]="$index">
       <mat-expansion-panel-header >
-        <mat-panel-title fxLayoutAlign="start center" >
+        <mat-panel-title class="flex justify-start items-center">
           <span class="tb-panel-title">{{ objectLwM2M.get('name').value}}</span>&nbsp;#{{ objectLwM2M.get('keyId').value}}
-          <span fxFlex></span>
+          <span class="flex-1"></span>
           <tb-profile-lwm2m-attributes
             formControlName="attributes"
             [modelName]="getNameObject(objectLwM2M.value)">

ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html

@@ -34,9 +34,9 @@
 <form [formGroup]="mqttDeviceProfileTransportConfigurationFormGroup" style="padding-bottom: 16px;" *ngIf="!mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplug').value">
   <fieldset class="fields-group">
     <legend class="group-title" translate>device-profile.mqtt-device-topic-filters</legend>
-    <div fxLayoutGap="8px" fxLayout="column">
+    <div class="flex flex-col gap-2">
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column">
+      <div class="flex flex-row xs:flex-col gap-2">
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label translate>device-profile.telemetry-topic-filter</mat-label>
           <input matInput required
                  formControlName="deviceTelemetryTopic"
@@ -51,7 +51,7 @@
             {{ 'device-profile.not-valid-multi-character' | translate}}
           </mat-error>
         </mat-form-field>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label translate>device-profile.attributes-topic-filter</mat-label>
           <input matInput required
                  formControlName="deviceAttributesTopic"
@@ -66,7 +66,7 @@
             {{ 'device-profile.not-valid-multi-character' | translate}}
           </mat-error>
         </mat-form-field>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label translate>device-profile.attributes-subscribe-topic-filter</mat-label>
           <input matInput required
                  formControlName="deviceAttributesSubscribeTopic"
@@ -93,7 +93,7 @@
   <section formGroupName="transportPayloadTypeConfiguration">
     <fieldset class="fields-group">
       <legend class="group-title" translate>device-profile.mqtt-device-payload-type</legend>
-      <div fxLayoutGap="8px" fxLayout="column">
+      <div class="flex flex-col gap-2">
         <mat-form-field class="mat-block">
           <mat-select formControlName="transportPayloadType" required>
             <mat-option *ngFor="let type of transportPayloadTypes" [value]="type">
@@ -116,10 +116,10 @@
             <div class="tb-hint" innerHTML="{{ 'device-profile.mqtt-use-json-format-for-default-downlink-topics-hint' | translate }}"></div>
           </div>
         </div>
-        <div *ngIf="protoPayloadType" fxLayout="column">
+        <div *ngIf="protoPayloadType" class="flex flex-col">
           <ng-container>
             <tb-protobuf-content
-              fxFlex
+              class="flex-1"
               formControlName="deviceTelemetryProtoSchema"
               label="{{ 'device-profile.telemetry-proto-schema' | translate }}"
               [fillHeight]="true">
@@ -130,7 +130,7 @@
           </ng-container>
           <ng-container>
             <tb-protobuf-content
-              fxFlex
+              class="flex-1"
               formControlName="deviceAttributesProtoSchema"
               label="{{ 'device-profile.attributes-proto-schema' | translate }}"
               [fillHeight]="true">
@@ -141,7 +141,7 @@
           </ng-container>
           <ng-container>
             <tb-protobuf-content
-              fxFlex
+              class="flex-1"
               formControlName="deviceRpcRequestProtoSchema"
               label="{{ 'device-profile.rpc-request-proto-schema' | translate }}"
               [fillHeight]="true">
@@ -152,7 +152,7 @@
           </ng-container>
           <ng-container>
             <tb-protobuf-content
-              fxFlex
+              class="flex-1"
               formControlName="deviceRpcResponseProtoSchema"
               label="{{ 'device-profile.rpc-response-proto-schema' | translate }}"
               [fillHeight]="true">

ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-communication-config.component.html

@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<div fxLayout="column">
+<div class="flex flex-col">
   <div *ngFor="let deviceProfileCommunication of communicationConfigFormArray.controls; let $index = index;
-               last as isLast;" fxLayout="row" fxLayoutAlign="start center"
+               last as isLast;"
-       fxLayoutGap="8px" class="scope-row" [formGroup]="deviceProfileCommunication">
+       class="scope-row flex flex-row justify-start items-center gap-2" [formGroup]="deviceProfileCommunication">
     <div class="communication-config">
       <mat-form-field class="spec mat-block" floatLabel="always" hideRequiredMarker>
         <mat-label translate>device-profile.snmp.scope</mat-label>
@@ -33,7 +33,7 @@
         </mat-error>
       </mat-form-field>
       <mat-divider vertical></mat-divider>
-      <section fxFlex fxLayout="column">
+      <section class="flex-1 flex flex-col">
         <mat-form-field *ngIf="isShowFrequency(deviceProfileCommunication.get('spec').value)">
           <mat-label translate>device-profile.snmp.querying-frequency</mat-label>
           <input matInput formControlName="queryingFrequencyMs" type="number" min="0" required/>
@@ -59,7 +59,7 @@
     </button>
   </div>
   <div *ngIf="!communicationConfigFormArray.controls.length && !disabled">
-      <span fxLayoutAlign="center center" class="tb-prompt required required-text" translate>device-profile.snmp.please-add-communication-config</span>
+      <span class="tb-prompt required required-text flex justify-center items-center" translate>device-profile.snmp.please-add-communication-config</span>
   </div>
   <div *ngIf="!disabled && isAddEnabled">
     <button mat-stroked-button color="primary"

ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.html

@@ -15,21 +15,21 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="column" class="mapping-config">
+<div class="mapping-config flex-1 flex flex-col">
-  <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" fxFlex="100">
+  <div class="flex-full flex flex-row justify-start items-center gap-2">
-    <div fxFlex fxLayout="row" fxLayoutGap="8px">
+    <div class="flex-1 flex flex-row gap-2">
-      <label fxFlex="26" class="tb-title no-padding" translate>device-profile.snmp.data-type</label>
+      <label class="tb-title no-padding flex-full max-w-26%" translate>device-profile.snmp.data-type</label>
-      <label fxFlex="37" class="tb-title tb-required no-padding" translate>device-profile.snmp.data-key</label>
+      <label class="tb-title tb-required no-padding flex-full max-w-37%" translate>device-profile.snmp.data-key</label>
-      <label fxFlex="37" class="tb-title tb-required no-padding" translate>device-profile.snmp.oid</label>
+      <label class="tb-title tb-required no-padding flex-full max-w-37%" translate>device-profile.snmp.oid</label>
-      <span style="min-width: 40px" [fxShow]="!disabled"></span>
+      <span style="min-width: 40px" [class.!hidden]="disabled"></span>
     </div>
   </div>
   <mat-divider></mat-divider>
   <div *ngFor="let mappingConfig of mappingsConfigFormArray.controls; let $index = index;
-               last as isLast;" fxLayout="row" fxLayoutAlign="start center"
+               last as isLast;"
-       fxLayoutGap="8px" [formGroup]="mappingConfig" class="mapping-list">
+       [formGroup]="mappingConfig" class="mapping-list flex flex-row justify-start items-center gap-2">
-    <div class="tb-layout-fill" fxFlex fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start">
+    <div class="tb-layout-fill flex-1 flex flex-row justify-start items-stretch gap-2">
-      <mat-form-field fxFlex="26">
+      <mat-form-field class="flex-full max-w-26%">
         <mat-select formControlName="dataType" required>
           <mat-option *ngFor="let dataType of dataTypes" [value]="dataType">
             {{ dataTypesTranslationMap.get(dataType) | translate }}
@@ -39,13 +39,13 @@
           {{ 'device-profile.snmp.data-type-required' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex="37">
+      <mat-form-field class="flex-full max-w-37%">
         <input matInput formControlName="key" required/>
         <mat-error *ngIf="mappingConfig.get('key').hasError('required')">
           {{ 'device-profile.snmp.data-key-required' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex="37">
+      <mat-form-field class="flex-full max-w-37%">
         <input matInput formControlName="oid" required/>
         <mat-error *ngIf="mappingConfig.get('oid').hasError('required')">
           {{ 'device-profile.snmp.oid-required' | translate }}
@@ -65,7 +65,7 @@
     </div>
   </div>
   <div *ngIf="!mappingsConfigFormArray.controls.length && !disabled">
-      <span fxLayoutAlign="center center" class="tb-prompt required required-text" translate>device-profile.snmp.please-add-mapping-config</span>
+      <span class="tb-prompt required required-text flex justify-center items-center" translate>device-profile.snmp.please-add-mapping-config</span>
   </div>
   <div *ngIf="!disabled">
     <button mat-stroked-button color="primary"

ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-transport-configuration.component.html

@@ -16,8 +16,8 @@
 
 -->
 <form [formGroup]="snmpDeviceProfileTransportConfigurationFormGroup" style="padding: 8px 0 16px;">
-  <section fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column">
+  <section class="flex flex-row xs:flex-col gap-2">
-    <mat-form-field fxFlex>
+    <mat-form-field class="flex-1">
       <mat-label translate>device-profile.snmp.timeout-ms</mat-label>
       <input matInput formControlName="timeoutMs" type="number" min="0" required/>
       <mat-error *ngIf="snmpDeviceProfileTransportConfigurationFormGroup.get('timeoutMs').hasError('required')">
@@ -28,7 +28,7 @@
         {{ 'device-profile.snmp.timeout-ms-invalid-format' | translate }}
       </mat-error>
     </mat-form-field>
-    <mat-form-field fxFlex>
+    <mat-form-field class="flex-1">
       <mat-label translate>device-profile.snmp.retries</mat-label>
       <input matInput formControlName="retries" type="number" min="0" required/>
       <mat-error *ngIf="snmpDeviceProfileTransportConfigurationFormGroup.get('retries').hasError('required')">

ui-ngx/tailwind.config.js

@@ -99,8 +99,11 @@ module.exports = {
         '20%': '20%',
         '23%': '23%',
         '25%': '25%',
+        '26%': '26%',
         '30%': '30%',
+        '33%': '33%',
         '35%': '35%',
+        '37%': '37%',
         '40%': '40%',
         '45%': '45%',
         '50%': '50%',