Flex layout replacements. Switch to tailwind.css.

ui-ngx/src/app/modules/home/components/notification/send-notification-button.component.html

@@ -15,12 +15,12 @@
     limitations under the License.
 
 -->
-<div *ngIf="show()" fxLayout="row" fxLayoutAlign="end end" style="height: 100%; padding: 0 16px;">
-  <button fxHide.lt-md mat-flat-button color="primary" (click)="sendNotification($event)">
+<div *ngIf="show()" class="flex flex-row justify-end items-end" style="height: 100%; padding: 0 16px;">
+  <button class="lt-md:!hidden" mat-flat-button color="primary" (click)="sendNotification($event)">
     <mat-icon>send</mat-icon>
     <span translate>notification.send-notification</span>
   </button>
-  <button class="mat-elevation-z0" fxHide.gt-sm mat-mini-fab color="primary" (click)="sendNotification($event)">
+  <button class="mat-elevation-z0 gt-sm:!hidden" mat-mini-fab color="primary" (click)="sendNotification($event)">
     <mat-icon>send</mat-icon>
   </button>
 </div>

ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section fxLayout="row" fxLayoutAlign="space-between center" style="margin: 0 10px 4px; min-height: 36px">
+<section class="flex flex-row justify-between items-center" style="margin: 0 10px 4px; min-height: 36px">
   <div style="font-weight: 500; letter-spacing: .25px" translate>notification.notification</div>
   <button mat-button color="primary"
           *ngIf="(notifications$ | async).length"
@@ -37,8 +37,8 @@
     </section>
   </div>
   <mat-divider *ngIf="(notifications$ | async).length"></mat-divider>
-  <section fxLayoutAlign="center center" *ngIf="(notifications$ | async).length">
-    <button fxFlex mat-button color="primary" (click)="viewAll($event)">
+  <section class="flex justify-center items-center" *ngIf="(notifications$ | async).length">
+    <button class="flex-1" mat-button color="primary" (click)="viewAll($event)">
       {{ 'notification.view-all' | translate }}
     </button>
   </section>

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

@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2 translate>device-profile.add</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <div [tb-help]="'deviceProfiles'"></div>
   <button mat-icon-button
           (click)="cancel()"
@@ -27,7 +27,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-horizontal-stepper [linear]="true"
                           #addDeviceProfileStepper
@@ -67,7 +67,7 @@
             [ruleChainType]="edgeRuleChainType">
             <span tb-hint>{{'device-profile.default-edge-rule-chain-hint' | translate}}</span>
           </tb-rule-chain-autocomplete>
-          <mat-form-field fxHide class="mat-block">
+          <mat-form-field class="mat-block !hidden">
             <mat-label translate>device-profile.type</mat-label>
             <mat-select formControlName="type" required>
               <mat-option *ngFor="let type of deviceProfileTypes" [value]="type">
@@ -78,7 +78,7 @@
               {{ 'device-profile.type-required' | translate }}
             </mat-error>
           </mat-form-field>
-          <tb-gallery-image-input fxFlex
+          <tb-gallery-image-input class="flex-1"
                           label="{{'device-profile.image' | translate}}"
                           formControlName="image">
           </tb-gallery-image-input>
@@ -134,11 +134,11 @@
   </mat-horizontal-stepper>
 </div>
 <div mat-dialog-actions style="padding: 0">
-  <div class="dialog-actions-row" fxFlex fxLayout="row" fxLayoutAlign="end center">
+  <div class="dialog-actions-row flex-1 flex flex-row justify-end items-center">
     <button mat-stroked-button *ngIf="selectedIndex > 0"
             [disabled]="(isLoading$ | async)"
             (click)="previousStep()">{{ 'action.back' | translate }}</button>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-stroked-button
             color="primary"
             *ngIf="showNext"
@@ -146,7 +146,7 @@
             (click)="nextStep()">{{ 'action.next-with-label' | translate:{label: (getFormLabel(this.selectedIndex+1) | translate)} }}</button>
   </div>
   <mat-divider style="width: 100%"></mat-divider>
-  <div class="dialog-actions-row" fxFlex fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="end center">
+  <div class="dialog-actions-row flex-1 flex flex-row justify-end items-center gap-2">
     <button mat-button
             [disabled]="(isLoading$ | async)"
             (click)="cancel()">{{ 'action.cancel' | translate }}</button>

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html

@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" [formGroup]="alarmDurationPredicateValueFormGroup">
-  <div fxFlex fxLayout="column" [fxShow]="!dynamicMode">
+<div class="flex-1 flex flex-row justify-start items-center gap-2" [formGroup]="alarmDurationPredicateValueFormGroup">
+  <div class="flex-1 flex flex-col" [class.!hidden]="dynamicMode">
     <mat-form-field class="mat-block" subscriptSizing="dynamic">
       <input required type="number" matInput
              step="1" min="1" max="2147483647"
@@ -36,9 +36,9 @@
       </mat-error>
     </mat-form-field>
   </div>
-  <div fxFlex fxLayout="column" [fxShow]="dynamicMode">
-    <div formGroupName="dynamicValue" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-      <div fxFlex="40" fxLayout="column">
+  <div class="flex-1 flex flex-col" [class.!hidden]="!dynamicMode">
+    <div formGroupName="dynamicValue" class="flex flex-row justify-start items-center gap-2">
+      <div class="flex-full max-w-40% flex flex-col">
         <mat-form-field class="mat-block" subscriptSizing="dynamic">
           <mat-select formControlName="sourceType" placeholder="{{'filter.dynamic-source-type' | translate}}">
             <mat-option [value]="null">
@@ -50,13 +50,13 @@
           </mat-select>
         </mat-form-field>
       </div>
-      <div fxFlex fxLayout="column">
+      <div class="flex-1 flex flex-col">
         <mat-form-field class="mat-block source-attribute" subscriptSizing="dynamic">
           <input matInput formControlName="sourceAttribute" placeholder="{{'filter.source-attribute' | translate}}">
         </mat-form-field>
       </div>
       <div *ngIf="inheritMode"
-           fxLayout="column"
+           class="flex flex-col"
            style="padding-top: 6px">
         <mat-checkbox formControlName="inherit">
           {{ 'filter.inherit-owner' | translate}}

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-dynamic-value.component.html

@@ -15,21 +15,21 @@
     limitations under the License.
 
 -->
-<mat-expansion-panel [formGroup] = "dynamicValue" class="device-profile-alarm" style = "margin-bottom: 26px;" fxFlex>
+<mat-expansion-panel [formGroup] = "dynamicValue" class="device-profile-alarm flex-1" style = "margin-bottom: 26px;">
   <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">
           {{'filter.dynamic-value' | translate}}
         </div>
       </mat-panel-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
     </div>
   </mat-expansion-panel-header>
   <ng-template matExpansionPanelContent>
-    <div fxFlex fxLayout="column">
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <div fxFlex="40" fxLayout="column">
+    <div class="flex-1 flex flex-col">
+      <div class="flex flex-row justify-start items-center gap-2">
+        <div class="flex-full max-w-40% flex flex-col">
           <mat-form-field class="mat-block">
             <mat-select formControlName="sourceType" placeholder="{{'filter.dynamic-source-type' | translate}}">
               <mat-option [value]="null">
@@ -41,7 +41,7 @@
             </mat-select>
           </mat-form-field>
         </div>
-        <div fxFlex fxLayout="column">
+        <div class="flex-1 flex flex-col">
           <mat-form-field class="mat-block source-attribute">
             <input matInput formControlName="sourceAttribute" placeholder="{{'filter.source-attribute' | translate}}">
           </mat-form-field>

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html

@@ -18,7 +18,7 @@
 <form [formGroup]="conditionFormGroup" (ngSubmit)="save()" style="width: 900px;">
   <mat-toolbar color="primary">
     <h2>{{ (readonly ? 'device-profile.alarm-rule-condition' : 'device-profile.edit-alarm-rule-condition') | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -29,7 +29,7 @@
   </mat-progress-bar>
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
-      <div fxFlex fxLayout="column">
+      <div class="flex-1 flex flex-col">
         <tb-key-filter-list
           [displayUserParameters]="false"
           [allowUserDynamicSource]="false"
@@ -49,13 +49,14 @@
               {{ 'device-profile.condition-type-required' | translate }}
             </mat-error>
           </mat-form-field>
-          <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" *ngIf="conditionFormGroup.get('spec.type').value != AlarmConditionType.SIMPLE">
+          <div class="flex flex-row xs:flex-col gt-xs:gap-4" *ngIf="conditionFormGroup.get('spec.type').value != AlarmConditionType.SIMPLE">
             <tb-alarm-duration-predicate-value
-              fxLayout="row" fxFlex formControlName="predicate"
+              class="flex-1 flex flex-row"
+              formControlName="predicate"
               [alarmConditionType]="conditionFormGroup.get('spec.type').value"
             >
             </tb-alarm-duration-predicate-value>
-            <div fxFlex="23" *ngIf="conditionFormGroup.get('spec.type').value == AlarmConditionType.DURATION">
+            <div class="flex-full max-w-23%" *ngIf="conditionFormGroup.get('spec.type').value == AlarmConditionType.DURATION">
               <mat-form-field class="mat-block" subscriptSizing="dynamic">
                 <mat-select formControlName="unit" required
                             placeholder="{{ 'device-profile.condition-duration-time-unit' | translate }}">
@@ -73,7 +74,7 @@
       </div>
     </fieldset>
   </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/alarm/alarm-rule-condition.component.html

@@ -15,15 +15,15 @@
     limitations under the License.
 
 -->
-<div fxLayout="row" fxLayoutAlign="start center" [formGroup]="alarmRuleConditionFormGroup" (click)="openFilterDialog($event)" style="min-width: 0;">
+<div class="flex flex-row justify-start items-center" [formGroup]="alarmRuleConditionFormGroup" (click)="openFilterDialog($event)" style="min-width: 0;">
   <span class="tb-alarm-rule-condition title">{{('device-profile.condition' | translate) + ': '}}</span>
-  <div class="tb-alarm-rule-condition" fxFlex fxLayout="column" fxLayoutAlign="center">
+  <div class="tb-alarm-rule-condition flex-1 flex flex-col justify-center items-stretch">
     <tb-filter-text formControlName="condition"
                     [nowrap]="true"
                     required
                     addFilterPrompt="{{'device-profile.enter-alarm-rule-condition-prompt' | translate}}">
     </tb-filter-text>
-    <span *ngIf="specText" class="tb-alarm-rule-condition-spec" [ngClass]="{disabled: this.disabled}" [innerHTML]="specText">
+    <span *ngIf="specText" class="tb-alarm-rule-condition-spec" [class.disabled]="disabled" [innerHTML]="specText">
     </span>
   </div>
   <button mat-icon-button

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.html

@@ -15,12 +15,12 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" [formGroup]="alarmRuleFormGroup">
+<div class="flex flex-col" [formGroup]="alarmRuleFormGroup">
   <tb-alarm-rule-condition formControlName="condition" [deviceProfileId]="deviceProfileId">
   </tb-alarm-rule-condition>
   <tb-alarm-schedule-info formControlName="schedule">
   </tb-alarm-schedule-info>
-  <div *ngIf="!disabled || alarmRuleFormGroup.get('alarmDetails').value" fxLayout="row" fxLayoutAlign="start center">
+  <div *ngIf="!disabled || alarmRuleFormGroup.get('alarmDetails').value" class="flex flex-row justify-start items-center">
     <span class="tb-alarm-rule-details title" (click)="openEditDetailsDialog($event)">
       {{ ('device-profile.alarm-rule-additional-info' | translate) + ': ' }}
     </span>
@@ -35,8 +35,7 @@
       <mat-icon>{{ disabled ? 'visibility' : (alarmRuleFormGroup.get('alarmDetails').value ? 'edit' : 'add') }}</mat-icon>
     </button>
   </div>
-  <div *ngIf="!disabled || alarmRuleFormGroup.get('dashboardId').value" fxLayout="column" fxLayoutAlign="start start"
-       fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="start center">
+  <div *ngIf="!disabled || alarmRuleFormGroup.get('dashboardId').value" class="flex flex-col justify-start items-start gt-sm:flex-row gt-sm:items-center">
     <span class="tb-alarm-rule-dashboard title">
       {{ ('device-profile.alarm-rule-mobile-dashboard' | translate) + ': ' }}
     </span>

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-dialog.component.html

@@ -18,7 +18,7 @@
 <form [formGroup]="alarmScheduleFormGroup" (ngSubmit)="save()" style="width: 900px;">
   <mat-toolbar color="primary">
     <h2>{{ (readonly ? 'device-profile.schedule' : 'device-profile.edit-schedule') | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -32,7 +32,7 @@
       formControlName="alarmSchedule">
     </tb-alarm-schedule>
   </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/alarm/alarm-schedule-info.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div fxLayout="row" fxLayoutAlign="start center" style="min-width: 0;">
+<div class="flex flex-row justify-start items-center" style="min-width: 0;">
   <span class="tb-alarm-rule-schedule title" (click)="openScheduleDialog($event)">{{('device-profile.schedule' | translate) + ': '}}</span>
   <span class="tb-alarm-rule-schedule" (click)="openScheduleDialog($event)"
        [innerHTML]="scheduleText">

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section [formGroup]="alarmScheduleForm" fxLayout="column">
+<section [formGroup]="alarmScheduleForm" class="flex flex-col">
   <mat-form-field class="mat-block">
     <mat-select formControlName="type" required placeholder="{{ 'device-profile.schedule-type' | translate }}">
       <mat-option *ngFor="let alarmScheduleType of alarmScheduleTypes" [value]="alarmScheduleType">
@@ -35,13 +35,13 @@
     <section *ngIf="alarmScheduleForm.get('type').value === alarmScheduleType.SPECIFIC_TIME">
       <tb-alarm-dynamic-value formControlName = 'dynamicValue' helpId = 'device-profile/alarm_specific_schedule_format'></tb-alarm-dynamic-value>
       <div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-days</div>
-      <div fxLayout="column" fxLayout.gt-md="row" fxLayoutGap="8px">
-        <div fxLayout="row" fxLayoutGap="8px">
+      <div class="flex flex-col gt-md:flex-row gap-2">
+        <div class="flex flex-row gap-2">
           <mat-checkbox *ngFor="let day of firstRowDays" [formControl]="weeklyRepeatControl(day)">
             {{ dayOfWeekTranslationsArray[day] | translate }}
           </mat-checkbox>
         </div>
-        <div fxLayout="row" fxLayoutGap="8px">
+        <div class="flex flex-row gap-2">
           <mat-checkbox *ngFor="let day of secondRowDays" [formControl]="weeklyRepeatControl(day)">
             {{ dayOfWeekTranslationsArray[day] | translate }}
           </mat-checkbox>
@@ -50,22 +50,22 @@
       <tb-error style="display: block;" [error]="alarmScheduleForm.get('daysOfWeek').hasError('dayOfWeeks')
                   ? ('device-profile.schedule-days-of-week-required' | translate) : ''"></tb-error>
       <div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-time</div>
-      <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-        <div fxLayout="row" fxLayoutGap="8px" fxFlex.gt-md>
-          <mat-form-field fxFlex.xs fxFlex.sm="150px" fxFlex.md="150px" fxFlex.gt-md>
+      <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+        <div class="flex flex-row gap-2 gt-md:flex-1">
+          <mat-form-field class="flex-1 sm:basis-37.5 sm:min-w-37.5 sm:max-w-37.5 md:basis-37.5 md:min-w-37.5 md:max-w-37.5">
             <mat-label translate>device-profile.schedule-time-from</mat-label>
             <mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle>
             <mat-datetimepicker #startTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
             <input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker">
           </mat-form-field>
-          <mat-form-field fxFlex.xs fxFlex.sm="150px" fxFlex.md="150px" fxFlex.gt-md>
+          <mat-form-field class="flex-1 sm:basis-37.5 sm:min-w-37.5 sm:max-w-37.5 md:basis-37.5 md:min-w-37.5 md:max-w-37.5">
             <mat-label translate>device-profile.schedule-time-to</mat-label>
             <mat-datetimepicker-toggle [for]="endTimePicker" matPrefix></mat-datetimepicker-toggle>
             <mat-datetimepicker #endTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
             <input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker">
           </mat-form-field>
         </div>
-        <div fxFlex fxLayoutAlign="center center" style="margin: auto">
+        <div class="flex-1 flex justify-center items-center" style="margin: auto">
           <div style="text-align: center"
                [innerHTML]="getSchedulerRangeText(alarmScheduleForm)">
           </div>
@@ -75,26 +75,26 @@
     <section *ngIf="alarmScheduleForm.get('type').value === alarmScheduleType.CUSTOM">
       <tb-alarm-dynamic-value formControlName = 'dynamicValue' helpId = 'device-profile/alarm_custom_schedule_format'></tb-alarm-dynamic-value>
       <div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-days</div>
-      <div *ngFor="let day of allDays" fxLayout="column" formArrayName="items" fxLayoutGap="1em">
-        <div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px" [formGroupName]="''+day" fxLayoutAlign="start center" fxLayoutAlign.xs="center start">
-          <mat-checkbox formControlName="enabled" fxFlex="17" (change)="changeCustomScheduler($event, day)">
+      <div *ngFor="let day of allDays" class="flex flex-col gap-4" formArrayName="items">
+        <div class="flex flex-row justify-start items-center xs:flex-col xs:justify-center xs:items-start gap-2" [formGroupName]="''+day">
+          <mat-checkbox formControlName="enabled" class="flex-full max-w-17%" (change)="changeCustomScheduler($event, day)">
             {{ dayOfWeekTranslationsArray[day] | translate }}
           </mat-checkbox>
-          <div fxLayout="row" fxLayoutGap="8px" fxFlex>
-            <mat-form-field fxFlex.xs fxFlex.sm="100px" fxFlex.md="100px">
+          <div class="flex-1 flex flex-row gap-2">
+            <mat-form-field class="xs:flex-1 sm:flex-1 sm:basis-25 sm:min-w-25 sm:max-w-25 md:flex-1 md:basis-25 md:min-w-25 md:max-w-25">
               <mat-label translate>device-profile.schedule-time-from</mat-label>
               <mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle>
               <mat-datetimepicker #startTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
               <input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker">
             </mat-form-field>
-            <mat-form-field fxFlex.xs fxFlex.sm="100px" fxFlex.md="100px">
+            <mat-form-field class="xs:flex-1 sm:flex-1 sm:basis-25 sm:min-w-25 sm:max-w-25 md:flex-1 md:basis-25 md:min-w-25 md:max-w-25">
               <mat-label translate>device-profile.schedule-time-to</mat-label>
               <mat-datetimepicker-toggle [for]="endTimePicker" matPrefix></mat-datetimepicker-toggle>
               <mat-datetimepicker #endTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
               <input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker">
             </mat-form-field>
           </div>
-          <div fxFlex fxLayoutAlign="center center"
+          <div class="flex-1 flex justify-center items-center"
                style="text-align: center"
                [innerHTML]="getSchedulerRangeText(itemsSchedulerForm.at(day))">
           </div>

ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.html

@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="column">
+<div class="flex-1 flex flex-col">
   <div *ngFor="let createAlarmRuleControl of createAlarmRulesFormArray().controls; let $index = index;
-               last as isLast;" fxLayout="row" fxLayoutAlign="start center"
-               fxLayoutGap="8px" style="padding-bottom: 8px;" [formGroup]="createAlarmRuleControl">
-    <div class="create-alarm-rule" fxFlex fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start">
+               last as isLast;" class="flex flex-row justify-start items-center gap-2"
+               style="padding-bottom: 8px;" [formGroup]="createAlarmRuleControl">
+    <div class="create-alarm-rule flex-1 flex flex-row justify-start items-stretch gap-2">
       <mat-form-field class="severity mat-block" floatLabel="always" hideRequiredMarker>
         <mat-label translate>alarm.severity</mat-label>
         <mat-select formControlName="severity"
@@ -35,7 +35,7 @@
         </mat-error>
       </mat-form-field>
       <mat-divider vertical></mat-divider>
-      <tb-alarm-rule formControlName="alarmRule" [deviceProfileId]="deviceProfileId" required fxFlex>
+      <tb-alarm-rule formControlName="alarmRule" [deviceProfileId]="deviceProfileId" required class="flex-1">
       </tb-alarm-rule>
     </div>
     <button *ngIf="!disabled"
@@ -48,7 +48,7 @@
     </button>
   </div>
   <div *ngIf="!createAlarmRulesFormArray().controls.length && !disabled">
-      <span translate fxLayoutAlign="center center" style="margin: 16px 0"
+      <span translate class="flex justify-center items-center" style="margin: 16px 0"
             class="tb-prompt required">device-profile.add-create-alarm-rule-prompt</span>
   </div>
   <div *ngIf="!disabled">

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

@@ -15,15 +15,15 @@
     limitations under the License.
 
 -->
-<mat-expansion-panel class="device-profile-alarm" fxFlex [formGroup]="alarmFormGroup" [(expanded)]="expanded">
+<mat-expansion-panel class="device-profile-alarm flex-1" [formGroup]="alarmFormGroup" [(expanded)]="expanded">
   <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">
           {{ alarmTypeTitle }}
         </div>
       </mat-panel-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
               type="button"
               (click)="removeAlarm.emit()"
@@ -34,9 +34,9 @@
     </div>
   </mat-expansion-panel-header>
   <ng-template matExpansionPanelContent>
-    <div fxLayout="column" fxLayoutGap="0.5em">
+    <div class="flex flex-col gap-2">
       <mat-divider></mat-divider>
-      <mat-form-field fxFlex floatLabel="always">
+      <mat-form-field class="flex-1" floatLabel="always">
         <mat-label>{{'device-profile.alarm-type' | translate}}</mat-label>
         <input required matInput formControlName="alarmType" placeholder="Enter alarm type">
         <mat-error *ngIf="alarmFormGroup.get('alarmType').hasError('required')">
@@ -53,7 +53,7 @@
     <mat-expansion-panel class="advanced-settings" [expanded]="false">
       <mat-expansion-panel-header>
         <mat-panel-title>
-          <div fxFlex fxLayout="row" fxLayoutAlign="end center">
+          <div class="flex-1 flex flex-row justify-end items-center">
             <div class="tb-small" translate>device-profile.advanced-settings</div>
           </div>
         </mat-panel-title>
@@ -89,18 +89,18 @@
         </mat-checkbox>
       </ng-template>
     </mat-expansion-panel>
-    <div fxFlex fxLayout="column">
+    <div class="flex-1 flex flex-col">
       <div translate class="tb-small" style="padding-bottom: 8px;">device-profile.create-alarm-rules</div>
       <tb-create-alarm-rules formControlName="createRules"
                              style="padding-bottom: 16px;"
                              [deviceProfileId]="deviceProfileId">
       </tb-create-alarm-rules>
       <div translate class="tb-small" style="padding-bottom: 8px;">device-profile.clear-alarm-rule</div>
-      <div fxLayout="row" fxLayoutGap="8px;" fxLayoutAlign="start center"
-           [fxShow]="alarmFormGroup.get('clearRule').value"
+      <div class="flex flex-row justify-start items-center gap-2"
+           [class.!hidden]="!alarmFormGroup.get('clearRule').value"
            style="padding-bottom: 8px;">
-        <div class="clear-alarm-rule" fxFlex fxLayout="row">
-          <tb-alarm-rule formControlName="clearRule" fxFlex [deviceProfileId]="deviceProfileId">
+        <div class="clear-alarm-rule flex-1 flex flex-row">
+          <tb-alarm-rule formControlName="clearRule" class="flex-1" [deviceProfileId]="deviceProfileId">
           </tb-alarm-rule>
         </div>
         <button *ngIf="!disabled"
@@ -113,10 +113,10 @@
         </button>
       </div>
       <div *ngIf="disabled && !alarmFormGroup.get('clearRule').value">
-        <span translate fxLayoutAlign="center center" style="margin: 16px 0"
-              class="tb-prompt">device-profile.no-clear-alarm-rule</span>
+        <span translate style="margin: 16px 0"
+              class="tb-prompt flex justify-center items-center">device-profile.no-clear-alarm-rule</span>
       </div>
-      <div *ngIf="!disabled" [fxShow]="!alarmFormGroup.get('clearRule').value">
+      <div *ngIf="!disabled" [class.!hidden]="alarmFormGroup.get('clearRule').value">
         <button mat-stroked-button color="primary"
                 type="button"
                 (click)="addClearAlarmRule()"

ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html

@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<div fxLayout="column">
+<div class="flex flex-col">
   <div class="tb-device-profile-alarms">
     <div *ngFor="let alarmControl of alarmsFormArray.controls; trackBy: trackByAlarm;
                  let $index = index; last as isLast;"
-         fxLayout="column" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+         class="flex flex-col" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
       <tb-device-profile-alarm [formControl]="alarmControl"
                                [expanded]="$index === 0"
                                [deviceProfileId]="deviceProfileId"
@@ -28,8 +28,8 @@
     </div>
   </div>
   <div *ngIf="!alarmsFormArray.controls.length">
-      <span translate fxLayoutAlign="center center"
-            class="tb-prompt">device-profile.no-alarm-rules</span>
+      <span translate
+            class="tb-prompt flex justify-center items-center">device-profile.no-alarm-rules</span>
   </div>
   <div *ngIf="!disabled" style="padding-top: 16px;">
     <button mat-raised-button color="primary"

ui-ngx/src/app/modules/home/components/profile/alarm/edit-alarm-details-dialog.component.html

@@ -18,7 +18,7 @@
 <form [formGroup]="editDetailsFormGroup" (ngSubmit)="save()" style="width: 800px;">
   <mat-toolbar color="primary">
     <h2>{{ 'device-profile.edit-alarm-rule-additional-info' | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -29,7 +29,7 @@
   </mat-progress-bar>
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
-      <div fxFlex fxLayout="column">
+      <div class="flex-1 flex flex-col">
         <mat-form-field class="mat-block">
           <textarea matInput formControlName="alarmDetails" rows="5"
             placeholder="{{ 'device-profile.alarm-rule-additional-info-placeholder' | translate }}"></textarea>
@@ -38,7 +38,7 @@
       </div>
     </fieldset>
   </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/asset-profile-autocomplete.component.html

@@ -25,7 +25,7 @@
          (keydown)="assetProfileEnter($event)"
          (keypress)="assetProfileEnter($event)"
          [matAutocomplete]="assetProfileAutocomplete"
-         [fxShow]="!showDetailsPageLink || !useAssetProfileLink || !disabled || !selectAssetProfileFormGroup.get('assetProfile').value">
+         [class.!hidden]="showDetailsPageLink && useAssetProfileLink && disabled && selectAssetProfileFormGroup.get('assetProfile').value">
   <a *ngIf="showDetailsPageLink && useAssetProfileLink && selectAssetProfileFormGroup.get('assetProfile').value && disabled"
      aria-label="Open asset profile" [routerLink]=assetProfileURL>
     {{ displayAssetProfileFn(selectAssetProfileFormGroup.get('assetProfile').value) }}

ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.html

@@ -18,7 +18,7 @@
 <form (ngSubmit)="save()" style="width: 600px;">
   <mat-toolbar color="primary">
     <h2>{{ (isAdd ? 'asset-profile.add' : 'asset-profile.edit' ) | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -36,7 +36,7 @@
       [isEdit]="true">
     </tb-asset-profile>
   </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"
             cdkFocusInitial

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

@@ -15,43 +15,43 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column" *ngIf="!standalone">
+<div class="tb-details-buttons xs:flex xs:flex-col" *ngIf="!standalone">
   <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, 'export')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'asset-profile.export' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'setDefault')"
-          [fxShow]="!isEdit && !entity?.default">
+          [class.!hidden]="isEdit || entity?.default">
     {{'asset-profile.set-default' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'asset-profile.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onAssetProfileIdCopied($event)"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>asset-profile.copyId</span>
     </button>
   </div>
 </div>
-<div [ngClass]="{'mat-padding': !standalone}" fxLayout="column">
+<div [class.mat-padding]="!standalone" class="flex flex-col">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit" style="min-width: 0;">
       <mat-form-field class="mat-block">
@@ -83,7 +83,7 @@
         [ruleChainType]="edgeRuleChainType">
         <span tb-hint>{{'asset-profile.default-edge-rule-chain-hint' | translate}}</span>
       </tb-rule-chain-autocomplete>
-      <tb-gallery-image-input fxFlex
+      <tb-gallery-image-input class="flex-1"
                       label="{{'asset-profile.image' | translate}}"
                       formControlName="image">
       </tb-gallery-image-input>

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

@@ -25,7 +25,7 @@
          (keydown)="deviceProfileEnter($event)"
          (keypress)="deviceProfileEnter($event)"
          [matAutocomplete]="deviceProfileAutocomplete"
-         [fxShow]="!showDetailsPageLink || !useDeviceProfileLink || !disabled || !selectDeviceProfileFormGroup.get('deviceProfile').value">
+         [class.!hidden]="showDetailsPageLink && useDeviceProfileLink && disabled && selectDeviceProfileFormGroup.get('deviceProfile').value">
   <a *ngIf="showDetailsPageLink && useDeviceProfileLink && selectDeviceProfileFormGroup.get('deviceProfile').value && disabled"
      aria-label="Open device profile" [routerLink]=deviceProfileURL>
     {{ displayDeviceProfileFn(selectDeviceProfileFormGroup.get('deviceProfile').value) }}

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

@@ -18,7 +18,7 @@
 <form (ngSubmit)="save()" style="width: 1000px;">
   <mat-toolbar color="primary">
     <h2>{{ (isAdd ? 'device-profile.add' : 'device-profile.edit' ) | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -36,7 +36,7 @@
       [isEdit]="true">
     </tb-device-profile>
   </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"
             cdkFocusInitial

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

@@ -35,7 +35,7 @@
       <ng-container *ngTemplateOutlet="default"></ng-container>
     </ng-template>
     <ng-template [ngSwitchCase]="deviceProvisionType.X509_CERTIFICATE_CHAIN">
-      <div fxFlex fxLayoutAlign="start center" class="tb-hint">
+      <div class="tb-hint flex-1 flex justify-start items-center">
         <span [innerHTML]="'device-profile.provision-strategy-x509.certificate-chain-hint' | translate"></span>
         <span tb-help-popup="device-profile/x509-chain-hint"
              tb-help-popup-placement="top"
@@ -69,8 +69,8 @@
       </mat-form-field>
     </ng-template>
     <ng-template #default>
-      <section fxLayoutGap.gt-xs="8px" fxLayout="row" fxLayout.xs="column">
-        <mat-form-field fxFlex class="mat-block">
+      <section class="flex flex-row xs:flex-col gt-xs:gap-2">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>device-profile.provision-device-key</mat-label>
           <input matInput formControlName="provisionDeviceKey" required/>
           <button matSuffix mat-icon-button
@@ -85,7 +85,7 @@
             {{ 'device-profile.provision-device-key-required' | translate }}
           </mat-error>
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>device-profile.provision-device-secret</mat-label>
           <input matInput formControlName="provisionDeviceSecret" required/>
           <button matSuffix mat-icon-button

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

@@ -15,43 +15,43 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column" *ngIf="!standalone">
+<div class="tb-details-buttons xs:flex xs:flex-col" *ngIf="!standalone">
   <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, 'export')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'device-profile.export' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'setDefault')"
-          [fxShow]="!isEdit && !entity?.default">
+          [class.!hidden]="isEdit || entity?.default">
     {{'device-profile.set-default' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'device-profile.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onDeviceProfileIdCopied($event)"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>device-profile.copyId</span>
     </button>
   </div>
 </div>
-<div [ngClass]="{'mat-padding': !standalone}" fxLayout="column">
+<div [class.mat-padding]="!standalone" class="flex flex-col">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit" style="min-width: 0;">
       <mat-form-field class="mat-block">
@@ -97,7 +97,7 @@
         [deviceProfileId]="deviceProfileId?.id"
         formControlName="softwareId">
       </tb-ota-package-autocomplete>
-      <mat-form-field fxHide class="mat-block">
+      <mat-form-field class="mat-block !hidden">
         <mat-label translate>device-profile.type</mat-label>
         <mat-select formControlName="type" required>
           <mat-option *ngFor="let type of deviceProfileTypes" [value]="type">
@@ -108,7 +108,7 @@
           {{ 'device-profile.type-required' | translate }}
         </mat-error>
       </mat-form-field>
-      <tb-gallery-image-input fxFlex
+      <tb-gallery-image-input class="flex-1"
                       label="{{'device-profile.image' | translate}}"
                       formControlName="image">
       </tb-gallery-image-input>

ui-ngx/src/app/modules/home/components/profile/tenant-profile-autocomplete.component.html

@@ -25,7 +25,7 @@
          (keydown)="tenantProfileEnter($event)"
          (keypress)="tenantProfileEnter($event)"
          [matAutocomplete]="tenantProfileAutocomplete"
-         [fxShow]="!showDetailsPageLink || !disabled || !selectTenantProfileFormGroup.get('tenantProfile').value">
+         [class.!hidden]="showDetailsPageLink && disabled && selectTenantProfileFormGroup.get('tenantProfile').value">
   <a *ngIf="showDetailsPageLink && selectTenantProfileFormGroup.get('tenantProfile').value && disabled" aria-label="Open tenant profile" [routerLink]=tenantProfileURL>
     {{ displayTenantProfileFn(selectTenantProfileFormGroup.get('tenantProfile').value) }}
   </a>

ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.html

@@ -18,7 +18,7 @@
 <form (ngSubmit)="save()" style="width: 650px;">
   <mat-toolbar color="primary">
     <h2>{{ (isAdd ? 'tenant-profile.add' : 'tenant-profile.edit' ) | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -36,7 +36,7 @@
       [isEdit]="true">
     </tb-tenant-profile>
   </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"
             cdkFocusInitial

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

@@ -15,37 +15,37 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column" *ngIf="!standalone">
+<div class="tb-details-buttons xs:flex xs:flex-col" *ngIf="!standalone">
   <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, 'setDefault')"
-          [fxShow]="!isEdit && !entity?.default">
+          [class.!hidden]="isEdit || entity?.default">
     {{'tenant-profile.set-default' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'tenant-profile.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onTenantProfileIdCopied($event)"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>tenant-profile.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" appearance="fill">
@@ -58,7 +58,7 @@
           {{ 'tenant-profile.name-max-length' | translate }}
         </mat-error>
       </mat-form-field>
-      <div fxLayout="column">
+      <div class="flex flex-col">
         <mat-checkbox class="hinted-checkbox" formControlName="isolatedTbRuleEngine">
           <div>{{ 'tenant.isolated-tb-rule-engine' | translate }}</div>
           <div class="tb-hint">{{'tenant.isolated-tb-rule-engine-details' | translate}}</div>

ui-ngx/tailwind.config.js

@@ -61,18 +61,28 @@ module.exports = {
       }
     },
     extend: {
+      flexBasis: {
+        '25': '6.25rem',
+        '37.5': '9.375rem'
+      },
       flex: {
         full: '1 1 100%'
       },
       gap: {
         '0.75': '0.1875rem'
       },
+      minWidth: {
+        '25': '6.25rem',
+        '37.5': '9.375rem'
+      },
       maxWidth: {
         '5%': '5%',
         '8%': '8%',
         '10%': '10%',
         '15%': '15%',
+        '17%': '17%',
         '20%': '20%',
+        '23%': '23%',
         '25%': '25%',
         '30%': '30%',
         '35%': '35%',
@@ -103,7 +113,9 @@ module.exports = {
         '7/12': '58.333333%',
         '8/12': '66.666667%',
         '10/12': '83.333333%',
-        '11/12': '91.666667%'
+        '11/12': '91.666667%',
+        '25': '6.25rem',
+        '37.5': '9.375rem'
       }
     },
   },