Apply tailwind.css style recommendations.

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

@@ -17,7 +17,7 @@
 -->
 <div [formGroup]="alarmCommentFormGroup" class="tb-alarm-comments flex flex-col">
   <div class="header" [class.activity-only]="alarmActivityOnly">
-    <div class="header-container flex flex-row justify-between items-center"
+    <div class="header-container flex flex-row items-center justify-between"
          [class.asc]="isDirectionAscending()"
          [class.activity-only]="alarmActivityOnly">
       <span class="header-title" translate>
@@ -67,12 +67,12 @@
           </span>
         </div>
         <ng-template #userComment>
-          <div class="user-comment flex flex-row justify-start items-center gap-2"
+          <div class="user-comment flex flex-row items-center justify-start gap-2"
                *ngIf="!displayDataElement.edit; else commentEditing"
                (mouseenter)="onCommentMouseEnter(displayDataElement.commentId, i)"
                (mouseleave)="onCommentMouseLeave(i)">
             <div *ngIf="displayDataElement.userExists; else userDeleted"
-                 class="user-avatar flex flex-row justify-center items-center self-start xs:!hidden"
+                 class="user-avatar flex flex-row items-center justify-center self-start xs:!hidden"
                  [style.background-color]="displayDataElement.avatarBgColor">
               {{ getUserInitials(displayDataElement.displayName) }}
             </div>
@@ -80,7 +80,7 @@
               <mat-icon class="mat-icon tb-mat-28 xs:!hidden">no_accounts</mat-icon>
             </ng-template>
             <div class="flex flex-1 flex-col" style="gap: 5px">
-              <div class="flex flex-row justify-start items-center gap-2">
+              <div class="flex flex-row items-center justify-start gap-2">
                 <span class="user-name">{{ displayDataElement.displayName }}</span>
                 <span class="time"
                       [matTooltip]="displayDataElement.createdTime"
@@ -110,8 +110,8 @@
             </div>
           </div>
           <ng-template #commentEditing>
-            <div class="flex flex-row justify-start items-center gap-2">
-              <div class="user-avatar flex flex-row justify-center items-center"
+            <div class="flex flex-row items-center justify-start gap-2">
+              <div class="user-avatar flex flex-row items-center justify-center"
                    [style.background-color]="displayDataElement.avatarBgColor">
                 {{ getUserInitials(displayDataElement.displayName) }}
               </div>
@@ -153,8 +153,8 @@
          [class.newest-first]="!isDirectionAscending()"
          [class.oldest-first]="isDirectionAscending()"
          [class.activity-only]="alarmActivityOnly">
-      <div class="inner-wrap flex flex-row justify-start items-center gap-2">
-        <div class="user-avatar flex flex-row justify-center items-center"
+      <div class="inner-wrap flex flex-row items-center justify-start gap-2">
+        <div class="user-avatar flex flex-row items-center justify-center"
              *ngIf="userDisplayName$ | async; let userDisplayName"
              [style.background-color]="getCurrentUserBgColor(userDisplayName)">
           {{ getUserInitials(userDisplayName) }}

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

@@ -66,7 +66,7 @@
         <mat-expansion-panel-header class="flex flex-row flex-wrap" style="margin-bottom: 8px">
           <mat-panel-title>
           </mat-panel-title>
-          <mat-panel-description class="flex justify-end items-center" translate>
+          <mat-panel-description class="flex items-center justify-end" translate>
             alarm.show-more
           </mat-panel-description>
         </mat-expansion-panel-header>

ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.html

@@ -32,7 +32,7 @@
 <ng-template #alarmFilterPanel>
   <form class="mat-content mat-padding flex flex-col" (ngSubmit)="update()">
     <ng-container *ngTemplateOutlet="alarmFilter"></ng-container>
-    <div class="tb-panel-actions flex flex-row justify-end items-center">
+    <div class="tb-panel-actions flex flex-row items-center justify-end">
       <button type="button"
               mat-button
               color="primary"

ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-aliases-entity-select flex flex-row justify-start items-center" *ngIf="hasSelectableAliasEntities">
+<section class="tb-aliases-entity-select flex flex-row items-center justify-start" *ngIf="hasSelectableAliasEntities">
   <button mat-icon-button
           cdkOverlayOrigin #aliasEntitySelectPanelOrigin="cdkOverlayOrigin"
           (click)="openEditMode()"

ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html

@@ -55,7 +55,7 @@
                 ? translate.instant('alias.entity-filter-no-entity-matched') : ''"></tb-error>
     </fieldset>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-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/components/alias/entity-aliases-dialog.component.html

@@ -29,23 +29,23 @@
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
   <div mat-dialog-content>
-    <div class="tb-aliases-header flex flex-row justify-start items-center">
-      <span class="flex-full max-w-5%"></span>
-      <div class="flex-full max-w-95% flex flex-row justify-start items-center">
-        <span class="tb-header-label flex-1 gt-sm:basis-52 gt-sm:min-w-52 gt-sm:max-w-52" translate>alias.name</span>
+    <div class="tb-aliases-header flex flex-row items-center justify-start">
+      <span class="max-w-5% flex-full"></span>
+      <div class="flex max-w-95% flex-full flex-row items-center justify-start">
+        <span class="tb-header-label flex-1 gt-sm:min-w-52 gt-sm:max-w-52 gt-sm:basis-52" translate>alias.name</span>
         <span class="tb-header-label flex-1" translate style="padding-left: 10px;">alias.entity-filter</span>
-        <span class="tb-header-label flex-1 basis-32 min-w-32 max-w-32" translate style="padding-left: 10px;">alias.resolve-multiple</span>
+        <span class="tb-header-label min-w-32 max-w-32 flex-1 basis-32" translate style="padding-left: 10px;">alias.resolve-multiple</span>
         <span style="min-width: 80px;"></span>
       </div>
     </div>
     <fieldset [disabled]="isLoading$ | async">
       <mat-divider></mat-divider>
-      <div class="flex-1 flex flex-row justify-start items-center"
+      <div class="flex flex-1 flex-row items-center justify-start"
            formArrayName="entityAliases"
            *ngFor="let entityAliasControl of entityAliasesFormArray().controls; let $index = index">
-        <span class="flex-full max-w-5%">{{$index + 1}}.</span>
-        <div class="mat-elevation-z4 tb-alias flex-full max-w-95% flex flex-row justify-start items-center">
-          <mat-form-field class="mat-block flex-1 gt-sm:basis-52 gt-sm:min-w-52 gt-sm:max-w-52" style="padding-top: 20px;">
+        <span class="max-w-5% flex-full">{{$index + 1}}.</span>
+        <div class="mat-elevation-z4 tb-alias flex max-w-95% flex-full flex-row items-center justify-start">
+          <mat-form-field class="mat-block flex-1 gt-sm:min-w-52 gt-sm:max-w-52 gt-sm:basis-52" style="padding-top: 20px;">
             <input matInput [formControl]="entityAliasControl.get('alias')" required placeholder="{{ 'entity.alias' | translate }}">
             <mat-error *ngIf="entityAliasControl.get('alias').hasError('required')">
               {{ 'entity.alias-required' | translate }}
@@ -54,7 +54,7 @@
           <tb-entity-filter-view class="flex-1" style="padding-left: 10px;" [formControl]="entityAliasControl.get('filter')">
           </tb-entity-filter-view>
           <section style="padding-left: 10px;"
-                   class="tb-resolve-multiple-switch flex-1 basis-32 min-w-32 max-w-32 flex flex-col justify-center items-center">
+                   class="tb-resolve-multiple-switch flex min-w-32 max-w-32 flex-1 basis-32 flex-col items-center justify-center">
             <mat-slide-toggle class="resolve-multiple-switch"
                    [formControl]="entityAliasControl.get('resolveMultiple')">
             </mat-slide-toggle>

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

@@ -46,7 +46,7 @@
       </tb-value-input>
     </fieldset>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-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/components/attribute/attribute-table.component.html

@@ -16,10 +16,10 @@
 
 -->
 <div class="mat-padding tb-entity-table tb-absolute-fill">
-  <div class="tb-entity-table-content tb-outlined-border flex-1 flex flex-col">
+  <div class="tb-entity-table-content tb-outlined-border flex flex-1 flex-col">
     <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="mode !== 'default' || textSearchMode || !dataSource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
-        <div class="title-container flex flex-row justify-start items-center xs:flex-col xs:justify-center xs:items-start">
+        <div class="title-container flex flex-row items-center justify-start xs:flex-col xs:items-start xs:justify-center">
           <span class="tb-entity-table-title">{{telemetryTypeTranslationsMap.get(attributeScope) | translate}}</span>
           <mat-form-field class="mat-block tb-attribute-scope" *ngIf="!disableAttributeScopeSelection && !attributeScopeSelectionReadonly">
             <mat-label translate>attribute.attributes-scope</mat-label>
@@ -106,7 +106,7 @@
     </mat-toolbar>
     <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [class.!hidden]="mode !== 'widget'">
       <div class="mat-toolbar-tools gap-2 xs:flex xs:flex-row xs:flex-wrap">
-        <div class="flex-1 flex flex-row justify-start items-stretch">
+        <div class="flex flex-1 flex-row items-stretch justify-start">
           <span class="tb-details-subtitle">{{ 'widgets-bundle.current' | translate }}</span>
           <tb-widgets-bundle-select class="flex-1"
                                     style="margin-left: 5%"
@@ -182,8 +182,8 @@
           <mat-cell *matCellDef="let attribute"
                     class="tb-value-cell attribute"
                     (click)="editAttribute($event, attribute)">
-            <div class="flex-1 flex flex-row" style="align-items: center">
-              <div class="flex-1 flex flex-row" style="overflow: hidden; align-items: center;">
+            <div class="flex flex-1 flex-row" style="align-items: center">
+              <div class="flex flex-1 flex-row" style="overflow: hidden; align-items: center;">
                 <span class="ellipsis">{{attribute.value | tbJson}}</span>
                 <tb-copy-button
                   *ngIf="attribute.value !== ''"
@@ -212,7 +212,7 @@
                  *matRowDef="let attribute; columns: displayedColumns;" (click)="dataSource.selection.toggle(attribute)"></mat-row>
       </table>
       <span [class.!hidden]="(dataSource.isEmpty() | async) === false"
-            class="no-data-found flex justify-center items-center" translate>{{
+            class="no-data-found flex items-center justify-center" translate>{{
           attributeScope === latestTelemetryTypes.LATEST_TELEMETRY
               ? 'attribute.no-telemetry-text'
               : 'attribute.no-attributes-text'
@@ -275,8 +275,8 @@
     <span translate *ngIf="mode === 'widget' && widgetsLoaded &&
                            widgetsList.length === 0 &&
                            widgetBundleSet"
-          class="mat-headline-5 flex-1 flex justify-center items-center">widgets-bundle.empty</span>
+          class="mat-headline-5 flex flex-1 items-center justify-center">widgets-bundle.empty</span>
     <span translate *ngIf="mode === 'widget' && !widgetBundleSet"
-          class="mat-headline-5 flex-1 flex justify-center items-center">widget.select-widgets-bundle</span>
+          class="mat-headline-5 flex flex-1 items-center justify-center">widget.select-widgets-bundle</span>
   </div>
 </div>

ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.html

@@ -33,7 +33,7 @@
   <div #failureDetailsEditor [class.!hidden]="!displayFailureDetails" class="tb-audit-log-failure-details">
   </div>
 </div>
-<div mat-dialog-actions class="flex justify-end items-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/components/dashboard-page/add-widget-dialog.component.html

@@ -20,7 +20,7 @@
     <div class="tb-add-widget-toolbar">
       <h2>{{'widget.add' | translate}}:</h2>
       <span class="flex-1">{{data.widgetInfo.widgetName}}</span>
-      <div class="flex flex-row justify-start items-center gt-xs:gap-4" style="min-width: fit-content;">
+      <div class="flex flex-row items-center justify-start gt-xs:gap-4" style="min-width: fit-content;">
         <tb-toggle-select *ngIf="widgetConfig.hasBasicMode" appearance="fill-invert" selectMediaBreakpoint="xs"
                           [(ngModel)]="widgetConfigMode" [ngModelOptions]="{standalone: true}">
           <tb-toggle-option value="basic">{{ 'widget.basic-mode' | translate }}</tb-toggle-option>
@@ -66,7 +66,7 @@
       </div>
     </tb-widget-preview>
   </div>
-  <div mat-dialog-actions class="flex justify-between items-center">
+  <div mat-dialog-actions class="flex items-center justify-between">
     <button mat-button color="primary"
             type="button"
             (click)="cancel()"

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html

@@ -28,13 +28,13 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div mat-dialog-content style="position: relative;">
-    <fieldset [disabled]="(isLoading$ | async) || (takingScreenshot$ | async)" class="flex flex-col justify-center items-stretch gap-2">
-      <div [formGroup]="dashboardRectFormGroup" class="flex flex-col gap-2 justify-center items-center">
+    <fieldset [disabled]="(isLoading$ | async) || (takingScreenshot$ | async)" class="flex flex-col items-stretch justify-center gap-2">
+      <div [formGroup]="dashboardRectFormGroup" class="flex flex-col items-center justify-center gap-2">
         <mat-form-field class="rect-field">
           <mat-label>Top %</mat-label>
           <input matInput formControlName="top" type="number" step="1" min="0" max="100">
         </mat-form-field>
-        <div class="flex flex-row gap-2 justify-center items-center">
+        <div class="flex flex-row items-center justify-center gap-2">
           <mat-form-field  class="rect-field">
             <mat-label>Left %</mat-label>
             <input matInput formControlName="left" type="number" step="1" min="0" max="100">
@@ -53,7 +53,7 @@
           <input matInput formControlName="bottom" type="number" step="1" min="0" max="100">
         </mat-form-field>
       </div>
-      <div class="flex flex-row justify-center items-center">
+      <div class="flex flex-row items-center justify-center">
         <button mat-raised-button color="accent"
                 type="button"
                 [disabled]="(isLoading$ | async) || (takingScreenshot$ | async)"
@@ -67,11 +67,11 @@
         </tb-gallery-image-input>
       </div>
     </fieldset>
-    <div *ngIf="takingScreenshot$ | async" class="taking-screenshot-progress tb-absolute-fill flex flex-col justify-center items-center">
+    <div *ngIf="takingScreenshot$ | async" class="taking-screenshot-progress tb-absolute-fill flex flex-col items-center justify-center">
         <mat-progress-spinner color="accent" mode="indeterminate"></mat-progress-spinner>
     </div>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async) || (takingScreenshot$ | async)"

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html

@@ -23,13 +23,13 @@
            [class.tb-dashboard-toolbar-closed]="!toolbarOpened">
     <tb-dashboard-toolbar [class.!hidden]="widgetEditMode || hideToolbar" [forceFullscreen]="forceFullscreen"
                           [toolbarOpened]="toolbarOpened" (triggerClick)="openToolbar()">
-      <div class="tb-dashboard-action-panels flex flex-col justify-center items-stretch gt-sm:flex-row gt-sm:justify-between gt-sm:items-center">
+      <div class="tb-dashboard-action-panels flex flex-col items-stretch justify-center gt-sm:flex-row gt-sm:items-center gt-sm:justify-between">
         <div class="tb-dashboard-action-panel tb-left-panel" [class.!hidden]="isMobileApp && !isEdit">
           <tb-user-menu *ngIf="!isPublicUser() && forceFullscreen" class="gt-sm:!hidden" displayUserInfo="true">
           </tb-user-menu>
           <ng-container *ngIf="isEdit">
             <div style="flex: 1 1 100%" class="gt-sm:!hidden"></div>
-            <div class="flex flex-row justify-end items-center lt-md:flex-1 gt-sm:justify-start gt-sm:items-center lt-lg:gap-0.75 lg:gap-1.5 gt-lg:gap-3">
+            <div class="flex flex-row items-center justify-end lg:gap-1.5 lt-md:flex-1 lt-lg:gap-0.75 gt-sm:items-center gt-sm:justify-start gt-lg:gap-3">
               <mat-divider class="tb-toolbar-divider" vertical></mat-divider>
               <button class="gt-md:!hidden" mat-icon-button
                       matTooltip="{{'layout.manage' | translate}}"
@@ -275,7 +275,7 @@
            [class.tb-dashboard-toolbar-animated]="isToolbarOpenedAnimate"
            [class.tb-dashboard-toolbar-closed]="!toolbarOpened">
     <mat-drawer-container hasBackdrop="false" class="tb-absolute-fill tb-dashboard-drawer-container">
-      <mat-drawer-content #dashboardContent class="flex flex-col justify-center items-start">
+      <mat-drawer-content #dashboardContent class="flex flex-col items-start justify-center">
         <section *ngIf="!widgetEditMode" class="tb-dashboard-title"
                  [style.color]="dashboard.configuration.settings.titleColor">
           <h3 [class.!hidden]="isEdit || !displayTitle()">{{ translatedDashboardTitle }}</h3>
@@ -335,7 +335,7 @@
             </div>
           </mat-drawer-content>
         </mat-drawer-container>
-        <section data-html2canvas-ignore class="tb-header-buttons tb-enter-edit-mode flex flex-row flex-wrap justify-start items-end" *ngIf="!readonly && (hideToolbar || widgetEditMode)">
+        <section data-html2canvas-ignore class="tb-header-buttons tb-enter-edit-mode flex flex-row flex-wrap items-end justify-start" *ngIf="!readonly && (hideToolbar || widgetEditMode)">
           <button [class.!hidden]="isEdit"
                   color="primary"
                   mat-mini-fab
@@ -380,7 +380,7 @@
                           headerSubtitle="{{ editingWidgetSubtitle }}"
                           [isReadOnly]="true"
                           (closeDetails)="onEditWidgetClosed()">
-          <div class="details-buttons flex flex-row justify-start items-center gap-4">
+          <div class="details-buttons flex flex-row items-center justify-start gap-4">
             <tb-toggle-select *ngIf="tbEditWidget.widgetConfig?.hasBasicMode" appearance="fill-invert" selectMediaBreakpoint="xs" [(ngModel)]="tbEditWidget.widgetConfigMode">
               <tb-toggle-option value="basic">{{ 'widget.basic-mode' | translate }}</tb-toggle-option>
               <tb-toggle-option value="advanced">{{ 'widget.advanced-mode' | translate }}</tb-toggle-option>
@@ -425,7 +425,7 @@
                                                         ? 'widgets-bundle.search' : 'widget.search') | translate }}">
             </tb-widgets-bundle-search>
           </div>
-          <div class="details-buttons flex flex-row justify-start items-center" *ngIf="isAddingWidget">
+          <div class="details-buttons flex flex-row items-center justify-start" *ngIf="isAddingWidget">
             <button mat-button type="button" (click)="importWidget($event)"
                     *ngIf="dashboardWidgetSelectComponent?.selectWidgetMode === 'bundles' && !dashboardWidgetSelectComponent?.widgetsBundle">
               <mat-icon>file_upload</mat-icon>{{ 'dashboard.import-widget' | translate }}</button>

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html

@@ -92,7 +92,7 @@
       </div>
       <mat-expansion-panel class="tb-settings">
         <mat-expansion-panel-header>
-          <mat-panel-description class="flex justify-end items-stretch" translate>
+          <mat-panel-description class="flex items-stretch justify-end" translate>
             dashboard.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
@@ -244,7 +244,7 @@
       </div>
     </div>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-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/components/dashboard-page/dashboard-widget-select.component.html

@@ -56,7 +56,7 @@
       </mat-card>
     </ng-template>
     <ng-template #loadingWidgets>
-      <div class="tb-absolute-fill flex flex-col justify-center items-center">
+      <div class="tb-absolute-fill flex flex-col items-center justify-center">
         <span class="mat-headline-5" style="padding-bottom: 20px;">
           {{ 'widget.loading-widgets' | translate }}
         </span>
@@ -64,7 +64,7 @@
       </div>
     </ng-template>
     <ng-template #noWidgets>
-        <span class="mat-headline-5 tb-absolute-fill flex justify-center items-center">{{(selectWidgetMode === 'bundles' ? 'widgets-bundle.empty' : 'widget.no-widgets-text') | translate}}</span>
+        <span class="mat-headline-5 tb-absolute-fill flex items-center justify-center">{{(selectWidgetMode === 'bundles' ? 'widgets-bundle.empty' : 'widget.no-widgets-text') | translate}}</span>
     </ng-template>
   </ng-template>
 
@@ -97,7 +97,7 @@
       </mat-card>
     </ng-template>
     <ng-template #loadingWidgetBundles>
-      <div class="tb-absolute-fill flex flex-col justify-center items-center">
+      <div class="tb-absolute-fill flex flex-col items-center justify-center">
         <span class="mat-headline-5" style="padding-bottom: 20px;">
           {{ 'widgets-bundle.loading-widgets-bundles' | translate }}
         </span>
@@ -106,7 +106,7 @@
     </ng-template>
     <ng-template #noWidgetBundles>
         <span translate
-              class="mat-headline-5 tb-absolute-fill flex justify-center items-center">widgets-bundle.no-widgets-bundles-text</span>
+              class="mat-headline-5 tb-absolute-fill flex items-center justify-center">widgets-bundle.no-widgets-bundles-text</span>
     </ng-template>
   </ng-template>
   <ng-template #widgetLoadingCard>

ui-ngx/src/app/modules/home/components/dashboard-page/edit-widget.component.html

@@ -43,7 +43,7 @@
           {{ 'widget-config.preview' | translate }}
         </button>
       </div>
-      <div class="tb-widget-config-header-suffix lt-md:flex-1 flex flex-row justify-end items-center gap-3">
+      <div class="tb-widget-config-header-suffix flex flex-row items-center justify-end gap-3 lt-md:flex-1">
         <button *ngIf="!previewMode"
                 class="lt-md:!hidden"
                 [disabled]="!widgetFormGroup.valid"
@@ -52,7 +52,7 @@
           <mat-icon>visibility</mat-icon>
           {{ 'widget-config.preview' | translate }}
         </button>
-        <div class="flex flex-row justify-start items-center gap-3">
+        <div class="flex flex-row items-center justify-start gap-3">
           <button [disabled]="!widgetFormGroup.dirty"
             mat-stroked-button color="primary"
             (click)="onRevertWidgetConfig()">

ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html

@@ -50,7 +50,7 @@
     </mat-form-field>
   </form>
 </div>
-<div mat-dialog-actions class="flex justify-end items-center">
+<div mat-dialog-actions class="flex items-center justify-end">
   <button mat-button
           color="primary"
           type="button"

ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-progress-cover flex flex-col justify-center items-center"
+<div class="tb-progress-cover flex flex-col items-center justify-center"
   *ngIf="layoutCtx.widgets.isLoading()">
   <mat-spinner color="warn" mode="indeterminate" diameter="100">
   </mat-spinner>
@@ -27,7 +27,7 @@
           [style]="dashboardStyle">
   <section *ngIf="layoutCtx.widgets.isEmpty()"
            style="z-index: 1; pointer-events: none;"
-           class="mat-headline-5 tb-absolute-fill flex justify-center items-center">
+           class="mat-headline-5 tb-absolute-fill flex items-center justify-center">
     <span *ngIf="!isEdit" style="text-align: center;">
       {{'dashboard.no-widgets' | translate}}
     </span>

ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html

@@ -92,7 +92,7 @@
       </div>
     </section>
     <ng-template #dividerLayout>
-    <div class="flex flex-col justify-start items-center gap-5">
+    <div class="flex flex-col items-center justify-start gap-5">
       <mat-button-toggle-group aria-label="Select width value type"
                                formControlName="type"
                                [class.!hidden]="!isDividerLayout">
@@ -103,13 +103,13 @@
           {{ 'layout.fixed-width' | translate }}
         </mat-button-toggle>
       </mat-button-toggle-group>
-      <div class="tb-layout-preview flex flex-row justify-center items-center">
-        <div class="tb-layout-preview-container flex flex-row justify-start items-center"
+      <div class="tb-layout-preview flex flex-row items-center justify-center">
+        <div class="tb-layout-preview-container flex flex-row items-center justify-start"
              #tooltip="matTooltip"
              matTooltip=""
              matTooltipPosition="below">
           <div [style.flex-basis]="buttonFlexValue() + '%'" [style.max-width]="buttonFlexValue() + '%'"
-               class="tb-layout-preview-container-main flex-1 flex flex-col justify-start items-center">
+               class="tb-layout-preview-container-main flex flex-1 flex-col items-center justify-start">
             <button mat-icon-button
                     type="button"
                     matTooltip="{{ 'layout.settings' | translate }}"
@@ -152,7 +152,7 @@
                      required>
             </div>
           </div>
-          <div class="flex-1 flex flex-col justify-start items-center" *ngIf="isDividerLayout" matTooltip="">
+          <div class="flex flex-1 flex-col items-center justify-start" *ngIf="isDividerLayout" matTooltip="">
             <button mat-icon-button
                     type="button"
                     matTooltip="{{ 'layout.settings' | translate }}"
@@ -196,7 +196,7 @@
           </div>
         </div>
       </div>
-      <div class="flex flex-col justify-center items-center gap-2" *ngIf="isDividerLayout" style="width: 80%">
+      <div class="flex flex-col items-center justify-center gap-2" *ngIf="isDividerLayout" style="width: 80%">
         <mat-slider *ngIf="layoutsFormGroup.get('type').value === layoutWidthType.PERCENTAGE"
                     step="1"
                     min="{{ layoutPercentageSize.MIN }}"
@@ -215,7 +215,7 @@
                     discrete
                     [displayWith]="formatSliderTooltipLabel.bind(this)"><input matSliderThumb formControlName="sliderFixed"/>
         </mat-slider>
-        <div class="tb-hint tb-hint-group flex flex-row justify-between items-center" style="width: 100%;">
+        <div class="tb-hint tb-hint-group flex flex-row items-center justify-between" style="width: 100%;">
           <label>
             {{layoutsFormGroup.get('type').value === layoutWidthType.PERCENTAGE ? layoutPercentageSize.MIN + '%' : layoutFixedSize.MIN + 'px'}}
           </label>
@@ -227,7 +227,7 @@
     </div>
     </ng-template>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button
             color="primary"
             type="button"

ui-ngx/src/app/modules/home/components/dashboard-page/layout/move-widgets-dialog.component.html

@@ -30,7 +30,7 @@
   <div mat-dialog-content class="tb-form-panel no-border no-padding" [formGroup]="moveWidgetsFormGroup">
     <div class="tb-form-row space-between column-xs">
       <div translate>dashboard.move-by</div>
-      <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input required matInput formControlName="cols"
                  type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
@@ -44,7 +44,7 @@
       </div>
     </div>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-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/components/dashboard-page/states/dashboard-state-dialog.component.html

@@ -51,7 +51,7 @@
       </mat-checkbox>
     </fieldset>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-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/components/dashboard-page/states/entity-state-controller.component.html

@@ -16,7 +16,7 @@
 
 -->
 <div class="entity-state-controller">
-  <div *ngIf="!isMobile || stateObject.length === 1" class="flex flex-row justify-start items-center">
+  <div *ngIf="!isMobile || stateObject.length === 1" class="flex flex-row items-center justify-start">
         <span *ngFor="let state of stateObject; index as i; last as isLast" class="state-entry"
               [style.font-weight]="isLast ? 'bold' : 'normal'"
               [style.cursor]="isLast ? 'default' : 'pointer'" (click)="navigatePrevState(i)">

ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html

@@ -99,7 +99,7 @@
                   <mat-header-cell *matHeaderCellDef style="min-width: 120px; max-width: 120px; width: 120px">
                   </mat-header-cell>
                   <mat-cell *matCellDef="let state">
-                    <div class="flex-1 flex flex-row">
+                    <div class="flex flex-1 flex-row">
                       <button mat-icon-button [disabled]="isLoading$ | async"
                               type="button"
                               matTooltip="{{ 'dashboard.edit-state' | translate }}"
@@ -129,7 +129,7 @@
                          *matRowDef="let state; columns: displayedColumns;"></mat-row>
               </table>
               <span [class.!hidden]="(dataSource.isEmpty() | async) === false"
-                    class="no-data-found flex justify-center items-center" translate>{{ 'dashboard.no-states-text' }}</span>
+                    class="no-data-found flex items-center justify-center" translate>{{ 'dashboard.no-states-text' }}</span>
             </div>
             <mat-divider></mat-divider>
             <mat-paginator [length]="dataSource.total() | async"
@@ -141,7 +141,7 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-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/components/dashboard/dashboard.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-progress-cover flex-1 flex flex-col justify-center items-center"
+<div class="tb-progress-cover flex flex-1 flex-col items-center justify-center"
      [style]="dashboardStyle"
      [style.background-image]="backgroundImage"
      [class.!hidden]="(isLoading$ | async) === false || ignoreLoading || isEdit">

ui-ngx/src/app/modules/home/components/dashboard/select-target-layout-dialog.component.html

@@ -29,7 +29,7 @@
   </mat-progress-bar>
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async" class="flex flex-col gap-2">
-      <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-2">
         <button mat-raised-button color="primary"
                 type="button"
                 class="tb-layout-button flex-1"

ui-ngx/src/app/modules/home/components/dashboard/select-target-state-dialog.component.html

@@ -39,7 +39,7 @@
       </mat-form-field>
     </fieldset>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-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/components/details-panel.component.html

@@ -17,9 +17,9 @@
 -->
 <header>
   <mat-toolbar class="details-toolbar" color="primary" [style.height]="headerHeightPx+'px'">
-    <div class="mat-toolbar-tools flex flex-row justify-start items-center" style="height: 100%;">
-      <div class="mat-toolbar-tools tb-details-title-header flex flex-1 flex-col justify-start items-start" [class.!hidden]="showSearchPane">
-        <div class="tb-details-title flex flex-row justify-start items-center">
+    <div class="mat-toolbar-tools flex flex-row items-center justify-start" style="height: 100%;">
+      <div class="mat-toolbar-tools tb-details-title-header flex flex-1 flex-col items-start justify-start" [class.!hidden]="showSearchPane">
+        <div class="tb-details-title flex flex-row items-center justify-start">
           <ng-content select=".prefix-title-buttons"></ng-content>
           <span class="tb-details-title-text">{{ headerTitle }}</span>
         </div>
@@ -28,7 +28,7 @@
           <ng-content select=".header-pane"></ng-content>
         </span>
       </div>
-      <div *ngIf="isShowSearch" [class.!hidden]="!showSearchPane" class="flex flex-row justify-start items-center" style="width: 100%;">
+      <div *ngIf="isShowSearch" [class.!hidden]="!showSearchPane" class="flex flex-row items-center justify-start" style="width: 100%;">
         <button mat-icon-button (click)="onToggleSearch()">
           <mat-icon class="material-icons">arrow_back</mat-icon>
         </button>
@@ -44,7 +44,7 @@
         <mat-icon class="material-icons">close</mat-icon>
       </button>
     </div>
-    <section *ngIf="!isReadOnly" class="flex flex-row layout-wrap tb-header-buttons">
+    <section *ngIf="!isReadOnly" class="layout-wrap tb-header-buttons flex flex-row">
       <button [disabled]="(isLoading$ | async) || theForm?.invalid || !theForm?.dirty"
               mat-fab
               matTooltip="{{ 'action.apply-changes' | translate }}"

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

@@ -32,7 +32,7 @@
 <ng-template #deviceFilterPanel>
   <form class="mat-content mat-padding flex flex-col" (ngSubmit)="update()">
     <ng-container *ngTemplateOutlet="deviceFilter"></ng-container>
-    <div class="tb-panel-actions flex flex-row justify-end items-center">
+    <div class="tb-panel-actions flex flex-row items-center justify-end">
       <button type="button"
               mat-button
               (click)="cancel()">

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

@@ -32,7 +32,7 @@
   <div mat-dialog-content>
     <tb-anchor #entityDetailsForm></tb-anchor>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial

ui-ngx/src/app/modules/home/components/entity/entities-table.component.html

@@ -37,7 +37,7 @@
       <div class="tb-entity-table-content tb-outlined-border flex flex-col">
         <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode || !dataSource.selection.isEmpty()">
           <div class="mat-toolbar-tools">
-            <div class="title-container flex flex-row justify-start items-center xs:flex-col xs:justify-center xs:items-start">
+            <div class="title-container flex flex-row items-center justify-start xs:flex-col xs:items-start xs:justify-center">
               <span *ngIf="entitiesTableConfig.tableTitle" class="tb-entity-table-title">{{ entitiesTableConfig.tableTitle }}</span>
               <tb-anchor #entityTableHeader></tb-anchor>
               <tb-timewindow *ngIf="entitiesTableConfig.useTimePageLink" [(ngModel)]="timewindow"
@@ -237,7 +237,7 @@
               </mat-header-cell>
               <mat-cell *matCellDef="let entity">
                 <ng-container *ngIf="cellActionDescriptors.length">
-                  <div [class.lt-lg:!hidden]="cellActionDescriptors.length !== 1" class="flex flex-row justify-end items-stretch"
+                  <div [class.lt-lg:!hidden]="cellActionDescriptors.length !== 1" class="flex flex-row items-stretch justify-end"
                        [style.width]="(cellActionDescriptors.length * 48) + 'px'"
                        [style.min-width]="(cellActionDescriptors.length * 48) + 'px'"
                        [style.max-width]="(cellActionDescriptors.length * 48) + 'px'">
@@ -281,9 +281,9 @@
                      *matRowDef="let entity; columns: displayedColumns;" (click)="onRowClick($event, entity)"></mat-row>
           </table>
           <span [class.!hidden]="(isLoading$ | async) || (dataSource.isEmpty() | async) === false || dataSource.dataLoading"
-                class="no-data-found flex justify-center items-center">{{ translations.noEntities | translate }}</span>
+                class="no-data-found flex items-center justify-center">{{ translations.noEntities | translate }}</span>
           <span [class.!hidden]="!dataSource.dataLoading"
-                class="no-data-found flex justify-center items-center">{{ 'common.loading' | translate }}</span>
+                class="no-data-found flex items-center justify-center">{{ 'common.loading' | translate }}</span>
         </div>
         <mat-divider *ngIf="displayPagination"></mat-divider>
         <mat-paginator *ngIf="displayPagination"

ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.html

@@ -17,14 +17,14 @@
 -->
 <mat-card appearance="outlined" class="settings-card">
   <mat-toolbar class="details-toolbar">
-    <div class="mat-toolbar-tools flex flex-row justify-start items-center gap-2">
+    <div class="mat-toolbar-tools flex flex-row items-center justify-start gap-2">
       <button mat-icon-button
               matTooltip="{{ 'action.back' | translate }}"
               matTooltipPosition="above"
               (click)="goBack()">
         <mat-icon>arrow_back</mat-icon>
       </button>
-      <div class="tb-details-title-header flex flex-col justify-center items-start">
+      <div class="tb-details-title-header flex flex-col items-start justify-center">
         <div class="tb-details-title tb-ellipsis">{{ headerTitle }}</div>
         <div class="tb-details-subtitle tb-ellipsis">{{ headerSubtitle }}</div>
       </div>
@@ -52,7 +52,7 @@
     </div>
   </mat-toolbar>
   <mat-card-content class="flex-full">
-    <mat-tab-group mat-stretch-tabs="false" class="tb-absolute-fill w-full h-full" [class.tb-headless]="hideDetailsTabs()" [(selectedIndex)]="selectedTab">
+    <mat-tab-group mat-stretch-tabs="false" class="tb-absolute-fill size-full" [class.tb-headless]="hideDetailsTabs()" [(selectedIndex)]="selectedTab">
       <mat-tab label="{{ 'details.details' | translate }}">
         <tb-anchor #entityDetailsForm></tb-anchor>
       </mat-tab>

ui-ngx/src/app/modules/home/components/entity/entity-filter.component.html

@@ -192,26 +192,26 @@
                                  entityFilterFormGroup.get('type').value === aliasFilterType.entityViewSearchQuery ?
                                  entityFilterFormGroup.get('type').value : ''">
       <label class="tb-small">{{ 'alias.root-entity' | translate }}</label>
-      <section class="tb-root-state-entity-switch flex flex-row justify-start items-center" style="padding-left: 0;">
+      <section class="tb-root-state-entity-switch flex flex-row items-center justify-start" style="padding-left: 0;">
         <mat-slide-toggle class="root-state-entity-switch"
                           formControlName="rootStateEntity">
         </mat-slide-toggle>
         <label class="tb-small root-state-entity-label" translate>alias.root-state-entity</label>
       </section>
-      <div class="flex-1 flex flex-row" *ngIf="!filterFormGroup.get('rootStateEntity').value">
+      <div class="flex flex-1 flex-row" *ngIf="!filterFormGroup.get('rootStateEntity').value">
         <tb-entity-select class="flex-1"
                           required
                           useAliasEntityTypes="true"
                           formControlName="rootEntity">
         </tb-entity-select>
       </div>
-      <div class="flex-1 flex flex-col gt-sm:flex-row" *ngIf="filterFormGroup.get('rootStateEntity').value">
+      <div class="flex flex-1 flex-col gt-sm:flex-row" *ngIf="filterFormGroup.get('rootStateEntity').value">
         <mat-form-field floatLabel="always" class="mat-block" style="margin-top: 24px; padding-right: 8px;">
           <mat-label translate>alias.state-entity-parameter-name</mat-label>
           <input matInput formControlName="stateEntityParamName"
                  placeholder="{{ 'alias.default-entity-parameter-name' | translate }}">
         </mat-form-field>
-        <div class="flex-1 flex flex-col">
+        <div class="flex flex-1 flex-col">
           <label class="tb-small">{{ 'alias.default-state-entity' | translate }}</label>
           <tb-entity-select class="flex-1"
                             useAliasEntityTypes="true"
@@ -219,15 +219,15 @@
           </tb-entity-select>
         </div>
       </div>
-      <div class="flex-1 flex flex-row">
-        <section class="tb-root-state-entity-switch flex flex-row justify-start items-center" style="padding-left: 0;">
+      <div class="flex flex-1 flex-row">
+        <section class="tb-root-state-entity-switch flex flex-row items-center justify-start" style="padding-left: 0;">
           <mat-slide-toggle class="root-state-entity-switch"
                             formControlName="fetchLastLevelOnly">
           </mat-slide-toggle>
           <label class="tb-small root-state-entity-label" translate>alias.last-level-relation</label>
         </section>
       </div>
-      <div class="flex-1 flex flex-row xs:flex-col gap-2">
+      <div class="flex flex-1 flex-row gap-2 xs:flex-col">
         <mat-form-field class="mat-block" style="min-width: 100px;">
           <mat-label translate>relation.direction</mat-label>
           <mat-select required formControlName="direction">

ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html

@@ -60,7 +60,7 @@
       </ng-container>
     </ng-container>
   </div>
-  <div class="tb-panel-actions mat-padding flex flex-row justify-end items-center">
+  <div class="tb-panel-actions mat-padding flex flex-row items-center justify-end">
     <button type="button"
             mat-button
             (click)="cancel()">

ui-ngx/src/app/modules/home/components/filter/boolean-filter-predicate.component.html

@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div class="flex-1 flex flex-row justify-start items-start gap-2" [formGroup]="booleanFilterPredicateFormGroup">
-  <mat-form-field hideRequiredMarker class="mat-block flex-full max-w-30%">
+<div class="flex flex-1 flex-row items-start justify-start gap-2" [formGroup]="booleanFilterPredicateFormGroup">
+  <mat-form-field hideRequiredMarker class="mat-block max-w-30% flex-full">
     <mat-select required formControlName="operation" placeholder="{{'filter.operation.operation' | translate}}">
       <mat-option *ngFor="let operation of booleanOperations" [value]="operation">
         {{booleanOperationTranslations.get(booleanOperationEnum[operation]) | translate}}
@@ -25,7 +25,7 @@
   </mat-form-field>
   <tb-filter-predicate-value [allowUserDynamicSource]="allowUserDynamicSource"
                              [onlyUserDynamicSource]="onlyUserDynamicSource"
-                             class="flex-full max-w-70%"
+                             class="max-w-70% flex-full"
                              [valueType]="valueTypeEnum.BOOLEAN"
                              formControlName="value">
   </tb-filter-predicate-value>

ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html

@@ -46,7 +46,7 @@
       </tb-filter-predicate-list>
     </fieldset>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-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/components/filter/complex-filter-predicate.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="flex-1 flex flex-row justify-start items-center gap-2">
+<div class="flex flex-1 flex-row items-center justify-start gap-2">
   <mat-label translate>filter.complex-filter</mat-label>
   <button mat-icon-button color="primary"
           class="tb-mat-32"

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

@@ -29,7 +29,7 @@
   </mat-progress-bar>
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
-      <div class="flex-1 flex flex-col">
+      <div class="flex flex-1 flex-col">
         <div class="flex flex-row">
           <mat-form-field class="mat-block flex-1">
             <mat-label translate>filter.name</mat-label>
@@ -41,7 +41,7 @@
               {{ 'filter.duplicate-filter' | translate }}
             </mat-error>
           </mat-form-field>
-          <section class="tb-editable-switch flex flex-col justify-start items-center">
+          <section class="tb-editable-switch flex flex-col items-center justify-start">
             <label class="tb-small editable-label" translate>filter.editable</label>
             <mat-slide-toggle class="editable-switch"
                               formControlName="editable">
@@ -54,7 +54,7 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions  class="flex justify-end items-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/components/filter/filter-predicate-list.component.html

@@ -23,15 +23,15 @@
       </mat-panel-title>
     </mat-expansion-panel-header>
     <div class="flex flex-row">
-      <span class="flex-full max-w-8%"></span>
-      <div class="flex-full max-w-92% flex flex-row justify-start items-center gap-2">
-        <div class="flex-1 flex flex-row gap-2">
-          <div class="flex-full max-w-30% flex flex-row justify-start items-center gap-2">
+      <span class="max-w-8% flex-full"></span>
+      <div class="flex max-w-92% flex-full flex-row items-center justify-start gap-2">
+        <div class="flex flex-1 flex-row gap-2">
+          <div class="flex max-w-30% flex-full flex-row items-center justify-start gap-2">
             <label translate class="tb-title no-padding flex-1">filter.operation.operation</label>
             <label *ngIf="valueType === valueTypeEnum.STRING"
                    translate class="tb-title no-padding" style="min-width: 70px;">filter.ignore-case</label>
           </div>
-          <label translate class="tb-title no-padding flex-full max-w-70%">filter.value</label>
+          <label translate class="tb-title no-padding max-w-70% flex-full">filter.value</label>
         </div>
         <label *ngIf="displayUserParameters"
                translate class="tb-title no-padding" style="width: 60px;">filter.user-parameters</label>
@@ -40,14 +40,14 @@
     </div>
     <mat-divider style="padding-bottom: 5px;"></mat-divider>
     <div class="predicate-list">
-      <div class="flex flex-row justify-start items-stretch" style="height: 76px;"
+      <div class="flex flex-row items-stretch justify-start" style="height: 76px;"
            formArrayName="predicates"
            *ngFor="let predicateControl of predicatesFormArray.controls; let $index = index">
-        <div class="filters-operation flex-full max-w-8% flex flex-row justify-center items-stretch">
+        <div class="filters-operation flex max-w-8% flex-full flex-row items-stretch justify-center">
           <span *ngIf="$index > 0">{{ complexOperationTranslations.get(operation) | translate }}</span>
         </div>
-        <div class="flex-full max-w-92% flex flex-col">
-          <div class="flex-1 flex flex-row justify-start items-center gap-2">
+        <div class="flex max-w-92% flex-full flex-col">
+          <div class="flex flex-1 flex-row items-center justify-start gap-2">
             <tb-filter-predicate
               class="flex-1"
               [valueType]="valueType"
@@ -70,7 +70,7 @@
       </div>
       <span [class.!hidden]="!!predicatesFormArray.length"
             [class.disabled]="disabled"
-            class="no-data-found flex justify-center items-center" translate>filter.no-filters</span>
+            class="no-data-found flex items-center justify-center" translate>filter.no-filters</span>
     </div>
     <div style="margin-top: 16px;" class="flex flex-row gap-2">
       <button mat-button mat-raised-button color="primary"

ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html

@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div class="flex-1 flex flex-row justify-start items-center gap-2" [formGroup]="filterPredicateValueFormGroup">
-  <div class="flex-1 flex flex-col" [class.!hidden]="dynamicMode || onlyUserDynamicSource">
+<div class="flex flex-1 flex-row items-center justify-start gap-2" [formGroup]="filterPredicateValueFormGroup">
+  <div class="flex flex-1 flex-col" [class.!hidden]="dynamicMode || onlyUserDynamicSource">
     <div class="flex flex-col" [ngSwitch]="valueType">
       <ng-template [ngSwitchCase]="valueTypeEnum.STRING">
         <mat-form-field hideRequiredMarker class="mat-block">
@@ -44,8 +44,8 @@
     <div class="tb-hint">{{ hintText | translate }}</div>
   </div>
   <div class="flex flex-col" [class.!hidden]="!dynamicMode && !onlyUserDynamicSource">
-    <div formGroupName="dynamicValue" class="flex flex-row justify-start items-center gap-2">
-      <div class="flex-full max-w-35% flex flex-col">
+    <div formGroupName="dynamicValue" class="flex flex-row items-center justify-start gap-2">
+      <div class="flex max-w-35% flex-full flex-col">
         <mat-form-field hideRequiredMarker class="mat-block">
           <mat-select formControlName="sourceType" placeholder="{{'filter.dynamic-source-type' | translate}}">
             <mat-option [value]="null">
@@ -58,7 +58,7 @@
         </mat-form-field>
         <div class="tb-hint" translate>filter.dynamic-source-type</div>
       </div>
-      <div class="flex-1 flex flex-col">
+      <div class="flex flex-1 flex-col">
         <mat-form-field hideRequiredMarker class="mat-block">
           <input matInput formControlName="sourceAttribute" placeholder="{{'filter.source-attribute' | translate}}">
         </mat-form-field>

ui-ngx/src/app/modules/home/components/filter/filter-predicate.component.html

@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div class="flex-1 flex flex-row justify-start items-center gap-2" [formGroup]="filterPredicateFormGroup">
-  <div class="flex-1 flex flex-col" [ngSwitch]="type">
+<div class="flex flex-1 flex-row items-center justify-start gap-2" [formGroup]="filterPredicateFormGroup">
+  <div class="flex flex-1 flex-col" [ngSwitch]="type">
     <ng-template [ngSwitchCase]="filterPredicateType.STRING">
       <tb-string-filter-predicate
         [allowUserDynamicSource]="allowUserDynamicSource"
@@ -52,7 +52,7 @@
   </div>
   <tb-filter-user-info *ngIf="type !== filterPredicateType.COMPLEX && displayUserParameters"
                        style="width: 60px;"
-                       class="flex flex-row justify-center items-stretch"
+                       class="flex flex-row items-stretch justify-center"
                        [valueType]="valueType"
                        [operation]="filterPredicateFormGroup.get('predicate').value?.operation"
                        [key]="key"

ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html

@@ -30,7 +30,7 @@
       <mat-checkbox formControlName="editable" style="margin-bottom: 16px;">
         {{ 'filter.editable' | translate }}
       </mat-checkbox>
-      <div class="flex flex-row justify-start items-center gap-2">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-form-field class="mat-block flex-1">
           <mat-label translate>filter.display-label</mat-label>
           <input matInput formControlName="label">
@@ -45,7 +45,7 @@
       </mat-form-field>
     </fieldset>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-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/components/filter/filters-dialog.component.html

@@ -29,25 +29,25 @@
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
   <div mat-dialog-content>
-    <div class="tb-filters-header flex flex-row justify-start items-center">
-      <span class="flex-full max-w-5%"></span>
-      <div class="flex-full max-w-95% flex flex-row justify-start items-center">
+    <div class="tb-filters-header flex flex-row items-center justify-start">
+      <span class="max-w-5% flex-full"></span>
+      <div class="flex max-w-95% flex-full flex-row items-center justify-start">
         <div class="tb-header-label flex-1" translate>filter.filter</div>
-        <div class="tb-header-label flex-1 basis-20 min-w-20 max-w-20 flex flex-col justify-center items-center" translate
+        <div class="tb-header-label flex min-w-20 max-w-20 flex-1 basis-20 flex-col items-center justify-center" translate
              style="padding-left: 5px;">filter.editable</div>
         <div style="min-width: 132px;"></div>
       </div>
     </div>
     <fieldset [disabled]="isLoading$ | async">
       <mat-divider></mat-divider>
-      <div class="flex-1 flex flex-row justify-start items-center"
+      <div class="flex flex-1 flex-row items-center justify-start"
            formArrayName="filters"
            *ngFor="let filterControl of filtersFormArray().controls; let $index = index">
-        <span class="flex-full max-w-5%">{{$index + 1}}.</span>
-        <div class="mat-elevation-z4 tb-filter flex-full max-w-5% flex flex-row justify-start items-center">
+        <span class="max-w-5% flex-full">{{$index + 1}}.</span>
+        <div class="mat-elevation-z4 tb-filter flex max-w-5% flex-full flex-row items-center justify-start">
           <mat-label class="flex-1">{{filterControl.get('filter').value}}</mat-label>
           <section style="padding-left: 10px;"
-                   class="tb-editable-switch flex-1 basis-20 min-w-20 max-w-20 flex flex-col justify-center items-center">
+                   class="tb-editable-switch flex min-w-20 max-w-20 flex-1 basis-20 flex-col items-center justify-center">
             <mat-slide-toggle class="editable-switch"
                               [formControl]="filterControl.get('editable')">
             </mat-slide-toggle>

ui-ngx/src/app/modules/home/components/filter/filters-edit-panel.component.html

@@ -17,7 +17,7 @@
 -->
 <div class="mat-content mat-padding flex flex-col">
   <div *ngFor="let filter of filtersInfo | keyvalue; let last = last">
-    <div class="flex flex-row justify-start items-center">
+    <div class="flex flex-row items-center justify-start">
       <mat-label class="flex-1">{{filter.value.filter}}</mat-label>
       <button mat-icon-button color="primary"
               style="min-width: 40px;"

ui-ngx/src/app/modules/home/components/filter/filters-edit.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-filters-edit flex flex-row justify-start items-center" *ngIf="hasEditableFilters">
+<section class="tb-filters-edit flex flex-row items-center justify-start" *ngIf="hasEditableFilters">
   <button mat-icon-button
           cdkOverlayOrigin #filtersEditPanelOrigin="cdkOverlayOrigin"
           (click)="openEditMode()"

ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html

@@ -28,13 +28,13 @@
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async" class="flex flex-col">
       <section class="entity-key flex flex-row gap-2">
-        <section class="flex-full flex flex-row gap-2"
+        <section class="flex flex-full flex-row gap-2"
                  [class]="{
                     'max-w-45%': isConstantKeyType,
                     'max-w-70%': !isConstantKeyType
                  }"
                  formGroupName="key">
-          <mat-form-field class="mat-block flex-full max-w-40%">
+          <mat-form-field class="mat-block max-w-40% flex-full">
             <mat-label translate>filter.key-type.key-type</mat-label>
             <mat-select required formControlName="type">
               <mat-option *ngFor="let type of entityKeyTypes" [value]="type">
@@ -42,7 +42,7 @@
               </mat-option>
             </mat-select>
           </mat-form-field>
-          <mat-form-field class="mat-block flex-full max-w-60%">
+          <mat-form-field class="mat-block max-w-60% flex-full">
             <mat-label translate>filter.key-name</mat-label>
             <input matInput required formControlName="key"
                    #keyNameInput
@@ -123,7 +123,7 @@
       </tb-filter-predicate-list>
     </fieldset>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-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/components/filter/key-filter-list.component.html

@@ -24,8 +24,8 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <div class="flex flex-row">
-        <span class="flex-full max-w-8%"></span>
-        <div class="flex-full max-w-92% flex flex-row justify-start items-center">
+        <span class="max-w-8% flex-full"></span>
+        <div class="flex max-w-92% flex-full flex-row items-center justify-start">
           <label translate class="tb-title no-padding flex-1">filter.key-name</label>
           <label translate class="tb-title no-padding flex-1">filter.key-type.key-type</label>
           <span [class.!hidden]="disabled" style="min-width: 80px;">&nbsp;</span>
@@ -34,14 +34,14 @@
       </div>
       <mat-divider></mat-divider>
       <div class="key-filter-list">
-        <div class="flex flex-row justify-start items-stretch" style="max-height: 76px;"
+        <div class="flex flex-row items-stretch justify-start" style="max-height: 76px;"
              formArrayName="keyFilters"
              *ngFor="let keyFilterControl of keyFiltersFormArray.controls; let $index = index">
-          <div class="filters-operation flex-full max-w-8%">
+          <div class="filters-operation max-w-8% flex-full">
             <span *ngIf="$index > 0" translate>filter.operation.and</span>
           </div>
-          <div class="flex-full max-w-92% flex flex-col">
-            <div class="flex flex-row justify-start items-center">
+          <div class="flex max-w-92% flex-full flex-col">
+            <div class="flex flex-row items-center justify-start">
               <div class="flex-1">{{ keyFilterControl.value.key.key }}</div>
               <div class="flex-1">{{ entityKeyTypeTranslations.get(keyFilterControl.value.key.type) | translate }}</div>
               <button mat-icon-button color="primary"
@@ -65,7 +65,7 @@
         </div>
         <span [class.!hidden]="!!keyFiltersFormArray.length"
               [class.disabled]="disabled"
-              class="no-data-found flex justify-center items-center" translate>filter.no-key-filters</span>
+              class="no-data-found flex items-center justify-center" translate>filter.no-key-filters</span>
       </div>
       <div style="margin-top: 16px;">
         <button mat-button mat-raised-button color="primary"

ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.html

@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div class="flex-1 flex flex-row justify-start items-start gap-2" [formGroup]="numericFilterPredicateFormGroup">
-  <mat-form-field hideRequiredMarker class="mat-block flex-full max-w-30%">
+<div class="flex flex-1 flex-row items-start justify-start gap-2" [formGroup]="numericFilterPredicateFormGroup">
+  <mat-form-field hideRequiredMarker class="mat-block max-w-30% flex-full">
     <mat-select required formControlName="operation" placeholder="{{'filter.operation.operation' | translate}}">
       <mat-option *ngFor="let operation of numericOperations" [value]="operation">
         {{numericOperationTranslations.get(numericOperationEnum[operation]) | translate}}
@@ -25,7 +25,7 @@
   </mat-form-field>
   <tb-filter-predicate-value [allowUserDynamicSource]="allowUserDynamicSource"
                              [onlyUserDynamicSource]="onlyUserDynamicSource"
-                             class="flex-full max-w-70%"
+                             class="max-w-70% flex-full"
                              [valueType]="valueType"
                              formControlName="value">
   </tb-filter-predicate-value>

ui-ngx/src/app/modules/home/components/filter/string-filter-predicate.component.html

@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div class="flex-1 flex flex-row justify-start items-start gap-2" [formGroup]="stringFilterPredicateFormGroup">
-  <div class="flex-full max-w-30% flex flex-row justify-start items-center gap-2">
+<div class="flex flex-1 flex-row items-start justify-start gap-2" [formGroup]="stringFilterPredicateFormGroup">
+  <div class="flex max-w-30% flex-full flex-row items-center justify-start gap-2">
     <mat-form-field hideRequiredMarker class="mat-block flex-1">
       <mat-select required formControlName="operation" placeholder="{{'filter.operation.operation' | translate}}">
         <mat-option *ngFor="let operation of stringOperations" [value]="operation">
@@ -24,12 +24,12 @@
         </mat-option>
       </mat-select>
     </mat-form-field>
-    <mat-checkbox class="flex flex-row justify-center items-stretch" formControlName="ignoreCase" style="min-width: 70px;">
+    <mat-checkbox class="flex flex-row items-stretch justify-center" formControlName="ignoreCase" style="min-width: 70px;">
     </mat-checkbox>
   </div>
   <tb-filter-predicate-value [allowUserDynamicSource]="allowUserDynamicSource"
                              [onlyUserDynamicSource]="onlyUserDynamicSource"
-                             class="flex-full max-w-70%"
+                             class="max-w-70% flex-full"
                              [valueType]="valueTypeEnum.STRING"
                              [operation]="stringFilterPredicateFormGroup.get('operation').value"
                              formControlName="value">

ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.html

@@ -60,7 +60,7 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-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/components/notification/send-notification-button.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div *ngIf="show()" class="flex flex-row justify-end items-end" style="height: 100%; padding: 0 16px;">
+<div *ngIf="show()" class="flex flex-row items-end justify-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>

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

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

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

@@ -134,7 +134,7 @@
   </mat-horizontal-stepper>
 </div>
 <div mat-dialog-actions style="padding: 0">
-  <div class="dialog-actions-row flex-1 flex flex-row justify-end items-center">
+  <div class="dialog-actions-row flex flex-1 flex-row items-center justify-end">
     <button mat-stroked-button *ngIf="selectedIndex > 0"
             [disabled]="(isLoading$ | async)"
             (click)="previousStep()">{{ 'action.back' | translate }}</button>
@@ -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 flex-1 flex flex-row justify-end items-center gap-2">
+  <div class="dialog-actions-row flex flex-1 flex-row items-center justify-end 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 class="flex-1 flex flex-row justify-start items-center gap-2" [formGroup]="alarmDurationPredicateValueFormGroup">
-  <div class="flex-1 flex flex-col" [class.!hidden]="dynamicMode">
+<div class="flex flex-1 flex-row items-center justify-start gap-2" [formGroup]="alarmDurationPredicateValueFormGroup">
+  <div class="flex flex-1 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 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">
+  <div class="flex flex-1 flex-col" [class.!hidden]="!dynamicMode">
+    <div formGroupName="dynamicValue" class="flex flex-row items-center justify-start gap-2">
+      <div class="flex max-w-40% flex-full 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,7 +50,7 @@
           </mat-select>
         </mat-form-field>
       </div>
-      <div class="flex-1 flex flex-col">
+      <div class="flex flex-1 flex-col">
         <mat-form-field class="mat-block source-attribute" subscriptSizing="dynamic">
           <input matInput formControlName="sourceAttribute" placeholder="{{'filter.source-attribute' | translate}}">
         </mat-form-field>

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

@@ -17,9 +17,9 @@
 -->
 <mat-expansion-panel [formGroup] = "dynamicValue" class="device-profile-alarm flex-1" style = "margin-bottom: 26px;">
   <mat-expansion-panel-header>
-    <div class="flex-1 flex flex-row justify-start items-center">
+    <div class="flex flex-1 flex-row items-center justify-start">
       <mat-panel-title>
-        <div class="flex-1 flex flex-row justify-start items-center">
+        <div class="flex flex-1 flex-row items-center justify-start">
           {{'filter.dynamic-value' | translate}}
         </div>
       </mat-panel-title>
@@ -27,9 +27,9 @@
     </div>
   </mat-expansion-panel-header>
   <ng-template matExpansionPanelContent>
-    <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">
+    <div class="flex flex-1 flex-col">
+      <div class="flex flex-row items-center justify-start gap-2">
+        <div class="flex max-w-40% flex-full 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 class="flex-1 flex flex-col">
+        <div class="flex flex-1 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

@@ -29,7 +29,7 @@
   </mat-progress-bar>
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
-      <div class="flex-1 flex flex-col">
+      <div class="flex flex-1 flex-col">
         <tb-key-filter-list
           [displayUserParameters]="false"
           [allowUserDynamicSource]="false"
@@ -51,12 +51,12 @@
           </mat-form-field>
           <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
-              class="flex-1 flex flex-row"
+              class="flex flex-1 flex-row"
               formControlName="predicate"
               [alarmConditionType]="conditionFormGroup.get('spec.type').value"
             >
             </tb-alarm-duration-predicate-value>
-            <div class="flex-full max-w-23%" *ngIf="conditionFormGroup.get('spec.type').value == AlarmConditionType.DURATION">
+            <div class="max-w-23% flex-full" *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 }}">
@@ -74,7 +74,7 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-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/components/profile/alarm/alarm-rule-condition.component.html

@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<div class="flex flex-row justify-start items-center" [formGroup]="alarmRuleConditionFormGroup" (click)="openFilterDialog($event)" style="min-width: 0;">
+<div class="flex flex-row items-center justify-start" [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 flex-1 flex flex-col justify-center items-stretch">
+  <div class="tb-alarm-rule-condition flex flex-1 flex-col items-stretch justify-center">
     <tb-filter-text formControlName="condition"
                     [nowrap]="true"
                     required

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

@@ -20,7 +20,7 @@
   </tb-alarm-rule-condition>
   <tb-alarm-schedule-info formControlName="schedule">
   </tb-alarm-schedule-info>
-  <div *ngIf="!disabled || alarmRuleFormGroup.get('alarmDetails').value" class="flex flex-row justify-start items-center">
+  <div *ngIf="!disabled || alarmRuleFormGroup.get('alarmDetails').value" class="flex flex-row items-center justify-start">
     <span class="tb-alarm-rule-details title" (click)="openEditDetailsDialog($event)">
       {{ ('device-profile.alarm-rule-additional-info' | translate) + ': ' }}
     </span>
@@ -35,7 +35,7 @@
       <mat-icon>{{ disabled ? 'visibility' : (alarmRuleFormGroup.get('alarmDetails').value ? 'edit' : 'add') }}</mat-icon>
     </button>
   </div>
-  <div *ngIf="!disabled || alarmRuleFormGroup.get('dashboardId').value" class="flex flex-col justify-start items-start gt-sm:flex-row gt-sm:items-center">
+  <div *ngIf="!disabled || alarmRuleFormGroup.get('dashboardId').value" class="flex flex-col items-start justify-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

@@ -32,7 +32,7 @@
       formControlName="alarmSchedule">
     </tb-alarm-schedule>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-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/components/profile/alarm/alarm-schedule-info.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="flex flex-row justify-start items-center" style="min-width: 0;">
+<div class="flex flex-row items-center justify-start" 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

@@ -35,7 +35,7 @@
     <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 class="flex flex-col gt-md:flex-row gap-2">
+      <div class="flex flex-col gap-2 gt-md:flex-row">
         <div class="flex flex-row gap-2">
           <mat-checkbox *ngFor="let day of firstRowDays" [formControl]="weeklyRepeatControl(day)">
             {{ dayOfWeekTranslationsArray[day] | translate }}
@@ -52,20 +52,20 @@
       <div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-time</div>
       <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-form-field class="flex-1 sm:min-w-37.5 sm:max-w-37.5 sm:basis-37.5 md:min-w-37.5 md:max-w-37.5 md:basis-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 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-form-field class="flex-1 sm:min-w-37.5 sm:max-w-37.5 sm:basis-37.5 md:min-w-37.5 md:max-w-37.5 md:basis-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 class="flex-1 flex justify-center items-center" style="margin: auto">
+        <div class="flex flex-1 items-center justify-center" style="margin: auto">
           <div style="text-align: center"
                [innerHTML]="getSchedulerRangeText(alarmScheduleForm)">
           </div>
@@ -76,25 +76,25 @@
       <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" 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)">
+        <div class="flex flex-row items-center justify-start gap-2 xs:flex-col xs:items-start xs:justify-center" [formGroupName]="''+day">
+          <mat-checkbox formControlName="enabled" class="max-w-17% flex-full" (change)="changeCustomScheduler($event, day)">
             {{ dayOfWeekTranslationsArray[day] | translate }}
           </mat-checkbox>
-          <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">
+          <div class="flex flex-1 flex-row gap-2">
+            <mat-form-field class="xs:flex-1 sm:min-w-25 sm:max-w-25 sm:flex-1 sm:basis-25 md:min-w-25 md:max-w-25 md:flex-1 md:basis-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 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-form-field class="xs:flex-1 sm:min-w-25 sm:max-w-25 sm:flex-1 sm:basis-25 md:min-w-25 md:max-w-25 md:flex-1 md:basis-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 class="flex-1 flex justify-center items-center"
+          <div class="flex flex-1 items-center justify-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 class="flex-1 flex flex-col">
+<div class="flex flex-1 flex-col">
   <div *ngFor="let createAlarmRuleControl of createAlarmRulesFormArray().controls; let $index = index;
-               last as isLast;" class="flex flex-row justify-start items-center gap-2"
+               last as isLast;" class="flex flex-row items-center justify-start gap-2"
                style="padding-bottom: 8px;" [formGroup]="createAlarmRuleControl">
-    <div class="create-alarm-rule flex-1 flex flex-row justify-start items-stretch gap-2">
+    <div class="create-alarm-rule flex flex-1 flex-row items-stretch justify-start gap-2">
       <mat-form-field class="severity mat-block" floatLabel="always" hideRequiredMarker>
         <mat-label translate>alarm.severity</mat-label>
         <mat-select formControlName="severity"
@@ -48,7 +48,7 @@
     </button>
   </div>
   <div *ngIf="!createAlarmRulesFormArray().controls.length && !disabled">
-      <span translate class="flex justify-center items-center" style="margin: 16px 0"
+      <span translate class="flex items-center justify-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

@@ -17,9 +17,9 @@
 -->
 <mat-expansion-panel class="device-profile-alarm flex-1" [formGroup]="alarmFormGroup" [(expanded)]="expanded">
   <mat-expansion-panel-header>
-    <div class="flex-1 flex flex-row justify-start items-center">
+    <div class="flex flex-1 flex-row items-center justify-start">
       <mat-panel-title>
-        <div class="flex-1 flex flex-row justify-start items-center">
+        <div class="flex flex-1 flex-row items-center justify-start">
           {{ alarmTypeTitle }}
         </div>
       </mat-panel-title>
@@ -53,7 +53,7 @@
     <mat-expansion-panel class="advanced-settings" [expanded]="false">
       <mat-expansion-panel-header>
         <mat-panel-title>
-          <div class="flex-1 flex flex-row justify-end items-center">
+          <div class="flex flex-1 flex-row items-center justify-end">
             <div class="tb-small" translate>device-profile.advanced-settings</div>
           </div>
         </mat-panel-title>
@@ -89,17 +89,17 @@
         </mat-checkbox>
       </ng-template>
     </mat-expansion-panel>
-    <div class="flex-1 flex flex-col">
+    <div class="flex flex-1 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 class="flex flex-row justify-start items-center gap-2"
+      <div class="flex flex-row items-center justify-start gap-2"
            [class.!hidden]="!alarmFormGroup.get('clearRule').value"
            style="padding-bottom: 8px;">
-        <div class="clear-alarm-rule flex-1 flex flex-row">
+        <div class="clear-alarm-rule flex flex-1 flex-row">
           <tb-alarm-rule formControlName="clearRule" class="flex-1" [deviceProfileId]="deviceProfileId">
           </tb-alarm-rule>
         </div>
@@ -114,7 +114,7 @@
       </div>
       <div *ngIf="disabled && !alarmFormGroup.get('clearRule').value">
         <span translate style="margin: 16px 0"
-              class="tb-prompt flex justify-center items-center">device-profile.no-clear-alarm-rule</span>
+              class="tb-prompt flex items-center justify-center">device-profile.no-clear-alarm-rule</span>
       </div>
       <div *ngIf="!disabled" [class.!hidden]="alarmFormGroup.get('clearRule').value">
         <button mat-stroked-button color="primary"

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

@@ -29,7 +29,7 @@
   </div>
   <div *ngIf="!alarmsFormArray.controls.length">
       <span translate
-            class="tb-prompt flex justify-center items-center">device-profile.no-alarm-rules</span>
+            class="tb-prompt flex items-center justify-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

@@ -29,7 +29,7 @@
   </mat-progress-bar>
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
-      <div class="flex-1 flex flex-col">
+      <div class="flex flex-1 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 class="flex justify-end items-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/components/profile/asset-profile-dialog.component.html

@@ -36,7 +36,7 @@
       [isEdit]="true">
     </tb-asset-profile>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial

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

@@ -36,7 +36,7 @@
       [isEdit]="true">
     </tb-device-profile>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <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 class="tb-hint flex-1 flex justify-start items-center">
+      <div class="tb-hint flex flex-1 items-center justify-start">
         <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"

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

@@ -35,7 +35,7 @@
       formControlName="attributes">
     </tb-lwm2m-attributes-key-list>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-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/components/profile/device/lwm2m/lwm2m-attributes-key-list.component.html

@@ -17,15 +17,15 @@
 -->
 <section class="name-value-map flex flex-col" [formGroup]="attributesValueFormGroup">
   <div class="flex flex-row gap-2" style="max-height: 40px; margin-top: 8px;">
-    <label class="tb-title no-padding flex-full max-w-40%" style="min-width: 230px;" translate>device-profile.lwm2m.attribute-name</label>
-    <label class="tb-title no-padding flex-full max-w-60%" translate>device-profile.lwm2m.attribute-value</label>
+    <label class="tb-title no-padding max-w-40% flex-full" style="min-width: 230px;" translate>device-profile.lwm2m.attribute-name</label>
+    <label class="tb-title no-padding max-w-60% flex-full" translate>device-profile.lwm2m.attribute-value</label>
     <span [class.!hidden]="disabled" style="width: 40px;"></span>
   </div>
   <div class="map-list flex flex-col"
        *ngFor="let nameValueControl of attributesValueFormArray().controls; let $index = index"
         [formGroup]="nameValueControl">
-    <div class="flex flex-row justify-start items-center gap-2">
-      <mat-form-field class="flex-full max-w-40%">
+    <div class="flex flex-row items-center justify-start gap-2">
+      <mat-form-field class="max-w-40% flex-full">
         <mat-select formControlName="name" required>
           <mat-option *ngFor="let attributeName of attributeNames" [value]="attributeName"
                       [disabled]="isDisabledAttributeName(attributeName, $index)">
@@ -36,7 +36,7 @@
           {{ 'device-profile.lwm2m.attribute-name-required' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-form-field class="flex-full max-w-60%">
+      <mat-form-field class="max-w-60% flex-full">
         <input formControlName="value" matInput required type="number"
                placeholder="{{ 'key-val.value' | translate }}">
         <mat-error class="flex flex-row" *ngIf="nameValueControl.get('value').hasError('required')">
@@ -58,7 +58,7 @@
     </div>
   </div>
   <div [class.!hidden]="attributesValueFormArray().length"
-        class="map-list flex justify-center items-center" translate>device-profile.lwm2m.no-attributes-set</div>
+        class="map-list flex items-center justify-center" 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-bootstrap-config-servers.component.html

@@ -28,7 +28,7 @@
   </mat-accordion>
   <div *ngIf="!serverConfigsFromArray.controls.length" style="margin:32px 0">
       <span translate
-            class="tb-prompt flex justify-center items-center">device-profile.lwm2m.no-config-servers</span>
+            class="tb-prompt flex items-center justify-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,9 +17,9 @@
 -->
 <mat-expansion-panel [formGroup]="serverFormGroup" #serverPanel>
   <mat-expansion-panel-header>
-    <div class="flex-1 flex flex-row justify-start items-center">
+    <div class="flex flex-1 flex-row items-center justify-start">
       <mat-panel-title>
-        <div class="flex-1 flex flex-row justify-start items-center">
+        <div class="flex flex-1 flex-row items-center justify-start">
           <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" style="font-size:14px" class="no-wrap flex flex-row">
@@ -44,7 +44,7 @@
   </mat-expansion-panel-header>
   <ng-template matExpansionPanelContent>
     <section>
-      <div class="flex flex-row xs:flex-col gap-2 xs:gap-0">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
         <mat-form-field class="flex-1">
           <mat-label>{{ 'device-profile.lwm2m.mode' | translate }}</mat-label>
           <mat-select formControlName="securityMode">
@@ -71,7 +71,7 @@
           </mat-error>
         </mat-form-field>
       </div>
-      <div class="flex flex-row xs:flex-col gap-2 xs:gap-0">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
         <mat-form-field class="flex-1">
           <mat-label>{{ 'device-profile.lwm2m.server-host' | translate }}</mat-label>
           <input matInput type="text" formControlName="host" required>
@@ -94,7 +94,7 @@
           </mat-error>
         </mat-form-field>
       </div>
-      <div class="flex flex-row xs:flex-col gap-2 xs:gap-0">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
         <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;"
@@ -140,7 +140,7 @@
           </mat-error>
         </mat-form-field>
       </div>
-      <div class="flex flex-row xs:flex-col gap-2 xs:gap-0">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
         <mat-form-field class="flex-1">
           <mat-label>{{ 'device-profile.lwm2m.lifetime' | translate }}</mat-label>
           <input matInput type="number" min="0" formControlName="lifetime" required>

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;" class="flex flex-row justify-start items-end">
+        <div *ngIf="!isTransportWasRunWithBootstrap" style="padding:16px 0 0 8px;" class="flex flex-row items-end justify-start">
           <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>

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

@@ -36,7 +36,7 @@
       </tb-profile-lwm2m-object-add-instances-list>
     </fieldset>
   </div>
-  <div mat-dialog-actions class="flex flex-row justify-end items-center">
+  <div mat-dialog-actions class="flex flex-row items-center justify-end">
     <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

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

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

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

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

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

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

@@ -35,7 +35,7 @@
   <fieldset class="fields-group">
     <legend class="group-title" translate>device-profile.mqtt-device-topic-filters</legend>
     <div class="flex flex-col gap-2">
-      <div class="flex flex-row xs:flex-col gap-2">
+      <div class="flex flex-row gap-2 xs:flex-col">
         <mat-form-field class="flex-1">
           <mat-label translate>device-profile.telemetry-topic-filter</mat-label>
           <input matInput required

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

@@ -18,7 +18,7 @@
 <div class="flex flex-col">
   <div *ngFor="let deviceProfileCommunication of communicationConfigFormArray.controls; let $index = index;
                last as isLast;"
-       class="scope-row flex flex-row justify-start items-center gap-2" [formGroup]="deviceProfileCommunication">
+       class="scope-row flex flex-row items-center justify-start 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 class="flex-1 flex flex-col">
+      <section class="flex flex-1 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 class="tb-prompt required required-text flex justify-center items-center" translate>device-profile.snmp.please-add-communication-config</span>
+      <span class="tb-prompt required required-text flex items-center justify-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 class="mapping-config flex-1 flex flex-col">
-  <div class="flex-full flex flex-row justify-start items-center gap-2">
-    <div class="flex-1 flex flex-row gap-2">
-      <label class="tb-title no-padding flex-full max-w-26%" translate>device-profile.snmp.data-type</label>
-      <label class="tb-title tb-required no-padding flex-full max-w-37%" translate>device-profile.snmp.data-key</label>
-      <label class="tb-title tb-required no-padding flex-full max-w-37%" translate>device-profile.snmp.oid</label>
+<div class="mapping-config flex flex-1 flex-col">
+  <div class="flex flex-full flex-row items-center justify-start gap-2">
+    <div class="flex flex-1 flex-row gap-2">
+      <label class="tb-title no-padding max-w-26% flex-full" translate>device-profile.snmp.data-type</label>
+      <label class="tb-title tb-required no-padding max-w-37% flex-full" translate>device-profile.snmp.data-key</label>
+      <label class="tb-title tb-required no-padding max-w-37% flex-full" translate>device-profile.snmp.oid</label>
       <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;"
-       [formGroup]="mappingConfig" class="mapping-list flex flex-row justify-start items-center gap-2">
-    <div class="tb-layout-fill flex-1 flex flex-row justify-start items-stretch gap-2">
-      <mat-form-field class="flex-full max-w-26%">
+       [formGroup]="mappingConfig" class="mapping-list flex flex-row items-center justify-start gap-2">
+    <div class="tb-layout-fill flex flex-1 flex-row items-stretch justify-start gap-2">
+      <mat-form-field class="max-w-26% flex-full">
         <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 class="flex-full max-w-37%">
+      <mat-form-field class="max-w-37% flex-full">
         <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 class="flex-full max-w-37%">
+      <mat-form-field class="max-w-37% flex-full">
         <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 class="tb-prompt required required-text flex justify-center items-center" translate>device-profile.snmp.please-add-mapping-config</span>
+      <span class="tb-prompt required required-text flex items-center justify-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,7 +16,7 @@
 
 -->
 <form [formGroup]="snmpDeviceProfileTransportConfigurationFormGroup" style="padding: 8px 0 16px;">
-  <section class="flex flex-row xs:flex-col gap-2">
+  <section class="flex flex-row gap-2 xs:flex-col">
     <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/>

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

@@ -22,7 +22,7 @@
        [class.pb-2]="!isLast">
     <mat-expansion-panel class="flex-1" [expanded]="true">
       <mat-expansion-panel-header>
-        <div class="flex-1 flex flex-row justify-start items-center">
+        <div class="flex flex-1 flex-row items-center justify-start">
           <mat-panel-title>
             {{ getTitle(queuesControl.value.name) }}
           </mat-panel-title>
@@ -43,7 +43,7 @@
   </div>
   <div *ngIf="!queuesFormArray.controls.length">
       <span translate
-            class="tb-prompt flex justify-center items-center">tenant-profile.no-queue</span>
+            class="tb-prompt flex items-center justify-center">tenant-profile.no-queue</span>
   </div>
   <div *ngIf="!disabled" style="padding-top: 16px;">
     <button mat-raised-button color="primary"

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

@@ -36,7 +36,7 @@
       [isEdit]="true">
     </tb-tenant-profile>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial

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

@@ -20,7 +20,7 @@
     <legend class="group-title">
       {{ 'tenant-profile.entities' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
-    <div class="fields-element flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+    <div class="fields-element flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.maximum-devices</mat-label>
         <input matInput required min="0" step="1"
@@ -48,7 +48,7 @@
         <mat-hint></mat-hint>
       </mat-form-field>
     </div>
-    <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+    <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.maximum-assets</mat-label>
         <input matInput required min="0" step="1"
@@ -78,12 +78,12 @@
     </div>
     <mat-expansion-panel class="configuration-panel">
       <mat-expansion-panel-header>
-        <mat-panel-description class="flex justify-end items-stretch" translate>
+        <mat-panel-description class="flex items-stretch justify-end" translate>
           tenant-profile.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
           <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.maximum-customers</mat-label>
             <input matInput required min="0" step="1"
@@ -119,7 +119,7 @@
     <legend class="group-title">
       {{ 'tenant-profile.rule-engine' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
-    <div class="fields-element flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+    <div class="fields-element flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-r-e-executions</mat-label>
         <input matInput required min="0" step="1"
@@ -149,12 +149,12 @@
     </div>
     <mat-expansion-panel class="configuration-panel">
       <mat-expansion-panel-header>
-        <mat-panel-description class="flex justify-end items-stretch" translate>
+        <mat-panel-description class="flex items-stretch justify-end" translate>
           tenant-profile.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
           <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.max-j-s-executions</mat-label>
             <input matInput required min="0" step="1"
@@ -182,7 +182,7 @@
             <mat-hint></mat-hint>
           </mat-form-field>
         </div>
-        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
           <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.max-rule-node-executions-per-message</mat-label>
             <input matInput required min="0" step="1"
@@ -218,7 +218,7 @@
     <legend class="group-title">
       {{ 'tenant-profile.time-to-live' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
-    <div class="fields-element flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+    <div class="fields-element flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-d-p-storage-days</mat-label>
         <input matInput required min="0" step="1"
@@ -246,7 +246,7 @@
         <mat-hint></mat-hint>
       </mat-form-field>
     </div>
-    <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+    <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.default-storage-ttl-days</mat-label>
         <input matInput required min="0" step="1"
@@ -274,7 +274,7 @@
         <mat-hint></mat-hint>
       </mat-form-field>
     </div>
-    <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+    <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.queue-stats-ttl-days</mat-label>
         <input matInput required min="0" step="1"
@@ -324,7 +324,7 @@
         {{ 'tenant-profile.max-sms-range' | translate}}
       </mat-error>
     </mat-form-field>
-    <div class="fields-element flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+    <div class="fields-element flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-emails</mat-label>
         <input matInput required min="0" step="1"
@@ -358,7 +358,7 @@
     <legend class="group-title">
       {{ 'tenant-profile.ota-files-in-bytes' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
-    <div class="fields-element flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+    <div class="fields-element flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.maximum-resources-sum-data-size</mat-label>
         <input matInput required min="0" step="1"
@@ -386,7 +386,7 @@
         <mat-hint></mat-hint>
       </mat-form-field>
     </div>
-    <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+    <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <mat-form-field class="mat-block flex-1" appearance="fill">
         <mat-label translate>tenant-profile.maximum-resource-size</mat-label>
         <input matInput required min="0" step="1"
@@ -408,7 +408,7 @@
     <legend class="group-title">
       {{ 'tenant-profile.ws-title' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
-    <div class="fields-element flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+    <div class="fields-element flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <mat-form-field class="mat-block flex-1" appearance="fill">
         <mat-label translate>tenant-profile.ws-limit-max-sessions-per-tenant</mat-label>
         <input matInput type="number" formControlName="maxWsSessionsPerTenant">
@@ -424,7 +424,7 @@
         </mat-error>
       </mat-form-field>
     </div>
-    <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+    <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <mat-form-field class="mat-block flex-1" appearance="fill">
         <mat-label translate>tenant-profile.ws-limit-max-sessions-per-customer</mat-label>
         <input matInput type="number" formControlName="maxWsSessionsPerCustomer">
@@ -442,12 +442,12 @@
     </div>
     <mat-expansion-panel class="configuration-panel">
       <mat-expansion-panel-header>
-        <mat-panel-description class="flex justify-end items-stretch" translate>
+        <mat-panel-description class="flex items-stretch justify-end" translate>
           tenant-profile.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
           <mat-form-field class="mat-block flex-1" appearance="fill">
             <mat-label translate>tenant-profile.ws-limit-max-sessions-per-public-user</mat-label>
             <input matInput type="number" formControlName="maxWsSessionsPerPublicUser">
@@ -463,7 +463,7 @@
             </mat-error>
           </mat-form-field>
         </div>
-        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
           <mat-form-field class="mat-block flex-1" appearance="fill">
             <mat-label translate>tenant-profile.ws-limit-max-sessions-per-regular-user</mat-label>
             <input matInput type="number" formControlName="maxWsSessionsPerRegularUser">
@@ -479,7 +479,7 @@
             </mat-error>
           </mat-form-field>
         </div>
-        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
           <mat-form-field class="mat-block flex-1" appearance="fill">
             <mat-label translate>tenant-profile.ws-limit-queue-per-session</mat-label>
             <input matInput type="number" formControlName="wsMsgQueueLimitPerSession">
@@ -500,7 +500,7 @@
     <legend class="group-title">
       {{ 'tenant-profile.rate-limits.rate-limits' | translate }}
     </legend>
-    <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+    <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <tb-rate-limits class="flex-1" formControlName="transportTenantMsgRateLimit"
                       [type]="rateLimitsType.TENANT_MESSAGES">
       </tb-rate-limits>
@@ -508,7 +508,7 @@
                       [type]="rateLimitsType.DEVICE_MESSAGES">
       </tb-rate-limits>
     </div>
-    <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+    <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <tb-rate-limits class="flex-1" formControlName="transportTenantTelemetryMsgRateLimit"
                       [type]="rateLimitsType.TENANT_TELEMETRY_MESSAGES">
       </tb-rate-limits>
@@ -516,7 +516,7 @@
                       [type]="rateLimitsType.DEVICE_TELEMETRY_MESSAGES">
       </tb-rate-limits>
     </div>
-    <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+    <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <tb-rate-limits class="flex-1" formControlName="transportGatewayMsgRateLimit"
                       [type]="rateLimitsType.GATEWAY_MESSAGES">
       </tb-rate-limits>
@@ -524,7 +524,7 @@
                       [type]="rateLimitsType.GATEWAY_DEVICE_MESSAGES">
       </tb-rate-limits>
     </div>
-    <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+    <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <tb-rate-limits class="flex-1" formControlName="transportGatewayTelemetryMsgRateLimit"
                       [type]="rateLimitsType.GATEWAY_TELEMETRY_MESSAGES">
       </tb-rate-limits>
@@ -534,12 +534,12 @@
     </div>
     <mat-expansion-panel class="configuration-panel">
       <mat-expansion-panel-header>
-        <mat-panel-description class="flex justify-end items-stretch" translate>
+        <mat-panel-description class="flex items-stretch justify-end" translate>
           tenant-profile.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
           <tb-rate-limits class="flex-1" formControlName="transportTenantTelemetryDataPointsRateLimit"
                           [type]="rateLimitsType.TENANT_TELEMETRY_DATA_POINTS">
           </tb-rate-limits>
@@ -547,7 +547,7 @@
                           [type]="rateLimitsType.DEVICE_TELEMETRY_DATA_POINTS">
           </tb-rate-limits>
         </div>
-        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
           <tb-rate-limits class="flex-1" formControlName="transportGatewayTelemetryDataPointsRateLimit"
                           [type]="rateLimitsType.GATEWAY_TELEMETRY_DATA_POINTS">
           </tb-rate-limits>
@@ -555,7 +555,7 @@
                           [type]="rateLimitsType.GATEWAY_DEVICE_TELEMETRY_DATA_POINTS">
           </tb-rate-limits>
         </div>
-        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
           <tb-rate-limits class="flex-1" formControlName="tenantServerRestLimitsConfiguration"
                           [type]="rateLimitsType.TENANT_SERVER_REST_LIMITS_CONFIGURATION">
           </tb-rate-limits>
@@ -563,7 +563,7 @@
                           [type]="rateLimitsType.CUSTOMER_SERVER_REST_LIMITS_CONFIGURATION">
           </tb-rate-limits>
         </div>
-        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
           <tb-rate-limits class="flex-1" formControlName="tenantEntityExportRateLimit"
                           [type]="rateLimitsType.TENANT_ENTITY_EXPORT_RATE_LIMIT">
           </tb-rate-limits>
@@ -571,7 +571,7 @@
                           [type]="rateLimitsType.TENANT_ENTITY_IMPORT_RATE_LIMIT">
           </tb-rate-limits>
         </div>
-        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
           <tb-rate-limits class="flex-1" formControlName="wsUpdatesPerSessionRateLimit"
                           [type]="rateLimitsType.WS_UPDATE_PER_SESSION_RATE_LIMIT">
           </tb-rate-limits>
@@ -579,7 +579,7 @@
                           [type]="rateLimitsType.CASSANDRA_QUERY_TENANT_RATE_LIMITS_CONFIGURATION">
           </tb-rate-limits>
         </div>
-        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
           <tb-rate-limits class="flex-1" formControlName="tenantNotificationRequestsRateLimit"
                           [type]="rateLimitsType.TENANT_NOTIFICATION_REQUEST_RATE_LIMIT">
           </tb-rate-limits>
@@ -587,7 +587,7 @@
                           [type]="rateLimitsType.TENANT_NOTIFICATION_REQUESTS_PER_RULE_RATE_LIMIT">
           </tb-rate-limits>
         </div>
-        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
           <tb-rate-limits class="flex-1" formControlName="edgeEventRateLimits"
                           [type]="rateLimitsType.EDGE_EVENTS_RATE_LIMIT">
           </tb-rate-limits>
@@ -595,7 +595,7 @@
                           [type]="rateLimitsType.EDGE_EVENTS_PER_EDGE_RATE_LIMIT">
           </tb-rate-limits>
         </div>
-        <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
           <tb-rate-limits class="flex-1" formControlName="edgeUplinkMessagesRateLimits"
                           [type]="rateLimitsType.EDGE_UPLINK_MESSAGES_RATE_LIMIT">
           </tb-rate-limits>

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

@@ -28,7 +28,7 @@
   <div mat-dialog-content>
     <tb-rate-limits-list formControlName="rateLimits"></tb-rate-limits-list>
   </div>
-  <div mat-dialog-actions class="flex justify-end items-center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [matDialogClose]="undefined"

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

@@ -20,7 +20,7 @@
     <div class="tb-rate-limits-operation" *ngIf="$index > 0 && rateLimitsFormArray.controls.length > 1" translate>
       tenant-profile.rate-limits.but-less-than
     </div>
-    <div class="flex-1 flex flex-row gap-2">
+    <div class="flex flex-1 flex-row gap-2">
       <mat-form-field hideRequiredMarker appearance="fill" class="mat-block flex-1">
         <mat-label translate>tenant-profile.rate-limits.number-of-messages</mat-label>
         <input matInput placeholder="{{ 'tenant-profile.rate-limits.number-of-messages' | translate }}"
@@ -59,7 +59,7 @@
           [matTooltip]="'tenant-profile.rate-limits.add-limit' | translate" matTooltipPosition="above">
     <span translate>tenant-profile.rate-limits.add-limit</span>
   </button>
-  <div class="tb-rate-limits-preview flex-1 flex flex-col gap-2" [class.tb-rate-limits-preview-short]="!disabled">
+  <div class="tb-rate-limits-preview flex flex-1 flex-col gap-2" [class.tb-rate-limits-preview-short]="!disabled">
     <span translate>tenant-profile.rate-limits.preview</span>
     <tb-rate-limits-text [rateLimitsArray]="rateLimitsArray" [disabled]="disabled"></tb-rate-limits-text>
   </div>

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

@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<div class="flex-1 flex flex-row gap-2">
+<div class="flex flex-1 flex-row gap-2">
   <fieldset class="fieldset-element">
     <legend class="legend-element">{{ label | translate }}</legend>
-    <div [formGroup]="rateLimitsFormGroup" class="flex-1 flex flex-row gap-2"
+    <div [formGroup]="rateLimitsFormGroup" class="flex flex-1 flex-row gap-2"
          (click)="onClick($event)"
          [matTooltip]="'tenant-profile.rate-limits.edit-limit' | translate" matTooltipPosition="above">
       <tb-rate-limits-text [rateLimitsArray]="rateLimitsArray" [disabled]="disabled"></tb-rate-limits-text>

ui-ngx/src/app/modules/home/components/queue/queue-form.component.html

@@ -37,10 +37,10 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div class="flex-1 flex flex-row lt-md:flex-col gap-4" formGroupName="submitStrategy">
+        <div class="flex flex-1 flex-row gap-4 lt-md:flex-col" formGroupName="submitStrategy">
           <div class="flex-1">
             <label class="group-label" translate>queue.submit-strategy</label>
-            <mat-radio-group class="flex-1 flex flex-col" formControlName="type" required>
+            <mat-radio-group class="flex flex-1 flex-col" formControlName="type" required>
               <mat-radio-button *ngFor="let strategy of submitStrategies" [value]="strategy">
                 {{ queueSubmitStrategyTypesMap.get(queueSubmitStrategyTypes[strategy]).label | translate }}
                 <mat-icon
@@ -75,10 +75,10 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div class="flex-1 flex flex-row lt-md:flex-col gap-4" formGroupName="processingStrategy">
+        <div class="flex flex-1 flex-row gap-4 lt-md:flex-col" formGroupName="processingStrategy">
           <div class="flex-1">
             <label class="group-label" translate>queue.processing-strategy</label>
-              <mat-radio-group class="flex-1 flex flex-col" formControlName="type" required>
+              <mat-radio-group class="flex flex-1 flex-col" formControlName="type" required>
                 <mat-radio-button *ngFor="let strategy of processingStrategies" [value]="strategy">
                   {{ queueProcessingStrategyTypesMap.get(queueProcessingStrategyTypes[strategy]).label | translate }}
                   <mat-icon
@@ -156,10 +156,10 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div class="flex-1 flex flex-col gap-2.5">
+        <div class="flex flex-1 flex-col gap-2.5">
           <div class="flex-1">
             <label class="group-label" translate>queue.batch-processing</label>
-            <div class="flex-1 flex flex-row xs:flex-col gap-2.5">
+            <div class="flex flex-1 flex-row gap-2.5 xs:flex-col">
               <mat-form-field class="mat-block flex-1">
                 <mat-label translate>queue.poll-interval</mat-label>
                 <input type="number" matInput formControlName="pollInterval" required>
@@ -186,8 +186,8 @@
           </div>
           <div class="flex-1">
             <label class="group-label" translate>queue.immediate-processing</label>
-            <div class="flex-1 flex flex-row xs:flex-col gap-2.5">
-              <mat-checkbox class="flex-1 gt-xs:flex gt-xs:justify-center gt-xs:items-stretch" formControlName="consumerPerPartition">
+            <div class="flex flex-1 flex-row gap-2.5 xs:flex-col">
+              <mat-checkbox class="flex-1 gt-xs:flex gt-xs:items-stretch gt-xs:justify-center" formControlName="consumerPerPartition">
                 {{ 'queue.consumer-per-partition' | translate }}
               </mat-checkbox>
               <mat-form-field class="mat-block flex-1">

ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html

@@ -53,7 +53,7 @@
         </div>
       </div>
       <div [class.!hidden]="relationFiltersFormArray.length">
-        <span class="tb-prompt flex justify-center items-center" translate>relation.any-relation</span>
+        <span class="tb-prompt flex items-center justify-center" translate>relation.any-relation</span>
       </div>
     </div>
   </div>

ui-ngx/src/app/modules/home/components/relation/relation-table.component.html

@@ -16,10 +16,10 @@
 
 -->
 <div class="mat-padding tb-entity-table tb-absolute-fill">
-  <div class="tb-entity-table-content tb-outlined-border flex-1 flex flex-col">
+  <div class="tb-entity-table-content tb-outlined-border flex flex-1 flex-col">
     <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode || !dataSource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
-        <div class="title-container flex flex-row justify-start items-center xs:flex-col xs:justify-center xs:items-start">
+        <div class="title-container flex flex-row items-center justify-start xs:flex-col xs:items-start xs:justify-center">
           <span class="tb-entity-table-title">
             {{(direction == directions.FROM ? 'relation.from-relations' : 'relation.to-relations') | translate}}
           </span>
@@ -73,7 +73,7 @@
       </div>
     </mat-toolbar>
     <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [class.!hidden]="dataSource.selection.isEmpty()">
-      <div class="mat-toolbar-tools flex justify-between items-center">
+      <div class="mat-toolbar-tools flex items-center justify-between">
         <span class="tb-entity-table-info">
           {{ 'relation.selected-relations' | translate:{count: dataSource.selection.selected.length} }}
         </span>
@@ -140,7 +140,7 @@
           <mat-header-cell *matHeaderCellDef style="min-width: 80px; max-width: 80px; width: 80px">
           </mat-header-cell>
           <mat-cell *matCellDef="let relation">
-            <div class="flex-1 flex flex-row justify-end items-stretch">
+            <div class="flex flex-1 flex-row items-stretch justify-end">
               <button mat-icon-button [disabled]="isLoading$ | async"
                       matTooltip="{{ 'relation.edit' | translate }}"
                       matTooltipPosition="above"
@@ -162,7 +162,7 @@
                  *matRowDef="let relation; columns: displayedColumns;" (click)="dataSource.selection.toggle(relation)"></mat-row>
       </table>
       <span [class.!hidden]="(dataSource.isEmpty() | async) === false"
-            class="no-data-found flex justify-center items-center" translate>{{ 'relation.no-relations-text' }}</span>
+            class="no-data-found flex items-center justify-center" translate>{{ 'relation.no-relations-text' }}</span>
     </div>
     <mat-divider></mat-divider>
     <mat-paginator [length]="dataSource.total() | async"

ui-ngx/src/app/modules/home/components/sms/smpp-sms-provider-configuration.component.html

@@ -17,7 +17,7 @@
 -->
 <form [formGroup]="smppSmsProviderConfigurationFormGroup" style="padding-bottom: 16px;">
   <div class="flex flex-row flex-wrap gap-1.5">
-    <mat-form-field class="mat-block lt-sm:flex-full gt-xs:flex-full gt-xs:max-w-25%">
+    <mat-form-field class="mat-block lt-sm:flex-full gt-xs:max-w-25% gt-xs:flex-full">
       <mat-label translate>admin.smpp-provider.smpp-version</mat-label>
       <mat-select formControlName="protocolVersion">
         <mat-option *ngFor="let smppVersion of smppVersions" [value]="smppVersion.value">
@@ -32,7 +32,7 @@
         {{'admin.smpp-provider.smpp-host-required' | translate}}
       </mat-error>
     </mat-form-field>
-    <mat-form-field class="mat-block lt-sm:flex-full gt-xs:flex-full gt-xs:max-w-25%">
+    <mat-form-field class="mat-block lt-sm:flex-full gt-xs:max-w-25% gt-xs:flex-full">
       <mat-label translate>admin.smpp-provider.smpp-port</mat-label>
       <input required matInput type="number" formControlName="port">
       <mat-error *ngIf="smppSmsProviderConfigurationFormGroup.get('port').hasError('required')">

ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html

@@ -34,12 +34,12 @@
           <div class="flex flex-col">
             <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
                let $index = index; last as isLast;"
-                 class="flex flex-row justify-start items-center" [class.pb-2]="!isLast">
+                 class="flex flex-row items-center justify-start" [class.pb-2]="!isLast">
               <mat-expansion-panel class="entity-type-config flex-1" [formGroup]="entityTypeFormGroup" [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)">
                 <mat-expansion-panel-header>
-                  <div class="flex-1 flex flex-row justify-start items-center">
+                  <div class="flex flex-1 flex-row items-center justify-start">
                     <mat-panel-title>
-                      <div class="flex-1 flex flex-row justify-start items-center">
+                      <div class="flex flex-1 flex-row items-center justify-start">
                         <div [innerHTML]="entityTypeText(entityTypeFormGroup)"></div>
                       </div>
                     </mat-panel-title>
@@ -73,7 +73,7 @@
                           </tb-branch-autocomplete>
                         </div>
                       </div>
-                      <div class="flex-1 flex flex-row justify-start items-center gap-4 xs:flex-col xs:justify-start xs:items-start xs:gap-0"
+                      <div class="flex flex-1 flex-row items-center justify-start gap-4 xs:flex-col xs:items-start xs:justify-start xs:gap-0"
                            formGroupName="config">
                         <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="saveCredentials">
                           {{ 'version-control.export-credentials' | translate }}
@@ -92,7 +92,7 @@
             </div>
             <div *ngIf="!entityTypesFormGroupArray().length">
               <span translate
-                    class="tb-prompt flex justify-center items-center">admin.no-auto-commit-entities-prompt</span>
+                    class="tb-prompt flex items-center justify-center">admin.no-auto-commit-entities-prompt</span>
             </div>
             <div style="padding-top: 16px;"  class="flex flex-row">
               <button mat-raised-button color="primary"
@@ -112,7 +112,7 @@
           </div>
         </fieldset>
         <div class="tb-hint" *ngIf="isReadOnly | async" translate>version-control.auto-commit-settings-read-only-hint</div>
-        <div class="flex flex-row justify-end items-center gap-4 xs:flex-col xs:justify-end xs:items-stretch">
+        <div class="flex flex-row items-center justify-end gap-4 xs:flex-col xs:items-stretch xs:justify-end">
           <button mat-raised-button color="warn" type="button" [class.!hidden]="!settings"
                   [disabled]="(isLoading$ | async) || (isReadOnly | async)" (click)="delete(formDirective)">
             {{'action.delete' | translate}}

ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html

@@ -52,7 +52,7 @@
       formControlName="entityTypes">
     </tb-entity-types-version-create>
   </form>
-  <div class="flex justify-end items-center gap-2" style="padding-top: 16px;">
+  <div class="flex items-center justify-end gap-2" style="padding-top: 16px;">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -71,7 +71,7 @@
   <section *ngIf="resultMessage">
     <div class="mat-headline-6 vc-result-message" [innerHtml]="resultMessage"></div>
   </section>
-  <div *ngIf="(versionCreateResult$ | async)?.done || hasError; else progress" class="flex justify-end items-center gap-2">
+  <div *ngIf="(versionCreateResult$ | async)?.done || hasError; else progress" class="flex items-center justify-end gap-2">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -80,7 +80,7 @@
     </button>
   </div>
   <ng-template #progress>
-    <section class="flex flex-col justify-center items-center">
+    <section class="flex flex-col items-center justify-center">
       <div class="mat-headline-6 vc-result-message progress">
         <span translate>version-control.creating-version</span>
         <mat-progress-bar mode="indeterminate"></mat-progress-bar>

ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html

@@ -33,7 +33,7 @@
       {{ 'version-control.rollback-on-error' | translate }}
     </mat-slide-toggle>
   </div>
-  <div class="flex justify-end items-center gap-2" style="padding-top: 16px;">
+  <div class="flex items-center justify-end gap-2" style="padding-top: 16px;">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -54,7 +54,7 @@
   </div>
   <div *ngIf="errorMessage" class="mat-headline-6 vc-result-message error" [innerHTML]="errorMessage"></div>
   <div *ngFor="let entityTypeLoadResult of entityTypeLoadResults" class="mat-headline-6 vc-result-message">{{ entityTypeLoadResultMessage(entityTypeLoadResult) }}</div>
-  <div *ngIf="(versionLoadResult$ | async)?.done || hasError; else progress" class="flex justify-end items-center gap-2">
+  <div *ngIf="(versionLoadResult$ | async)?.done || hasError; else progress" class="flex items-center justify-end gap-2">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -63,7 +63,7 @@
     </button>
   </div>
   <ng-template #progress>
-    <section class="flex flex-col justify-center items-center">
+    <section class="flex flex-col items-center justify-center">
       <div class="mat-headline-6 vc-result-message progress">
         <span translate>version-control.restoring-entities-from-version</span>
         <mat-progress-bar mode="indeterminate"></mat-progress-bar>

ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html

@@ -20,13 +20,13 @@
   <div class="flex flex-col" style="flex: 1; overflow: auto;">
     <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
              let $index = index; last as isLast;"
-         class="flex flex-row justify-start items-center" [class.pb-2]="!isLast">
+         class="flex flex-row items-center justify-start" [class.pb-2]="!isLast">
       <mat-expansion-panel class="entity-type-config flex-1" [class.load]="loading" [formGroup]="entityTypeFormGroup"
                            [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false">
         <mat-expansion-panel-header>
-          <div class="flex-1 flex flex-row justify-start items-center">
+          <div class="flex flex-1 flex-row items-center justify-start">
             <mat-panel-title>
-              <div class="flex-1 flex flex-row justify-start items-center">
+              <div class="flex flex-1 flex-row items-center justify-start">
                 <div>{{ entityTypeText(entityTypeFormGroup) }}</div>
               </div>
             </mat-panel-title>
@@ -50,7 +50,7 @@
               [filterAllowedEntityTypes]="false"
               [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
             </tb-entity-type-select>
-            <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4" formGroupName="config">
+            <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4" formGroupName="config">
               <mat-form-field class="mat-block flex-1">
                 <mat-label translate>version-control.sync-strategy</mat-label>
                 <mat-select formControlName="syncStrategy">
@@ -62,7 +62,7 @@
                   </mat-option>
                 </mat-select>
               </mat-form-field>
-              <div class="flex-1 flex flex-col">
+              <div class="flex flex-1 flex-col">
                 <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="saveCredentials">
                   {{ 'version-control.export-credentials' | translate }}
                 </mat-checkbox>
@@ -75,7 +75,7 @@
               </div>
             </div>
           </div>
-          <div class="flex flex-row xs:flex-col gt-xs:gap-4 gt-xs:justify-start gt-xs:items-center gt-xs:min-h-19"
+          <div class="flex flex-row xs:flex-col gt-xs:min-h-19 gt-xs:items-center gt-xs:justify-start gt-xs:gap-4"
                formGroupName="config">
             <mat-slide-toggle formControlName="allEntities">
               {{ 'version-control.all-entities' | translate }}
@@ -93,7 +93,7 @@
     </div>
     <div *ngIf="!entityTypesFormGroupArray().length">
           <span translate
-                class="tb-prompt flex justify-center items-center">version-control.no-entities-to-export-prompt</span>
+                class="tb-prompt flex items-center justify-center">version-control.no-entities-to-export-prompt</span>
     </div>
   </div>
   <div style="padding-top: 16px;" class="flex flex-row">

ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html

@@ -20,13 +20,13 @@
   <div class="flex flex-col" style="flex: 1; overflow: auto;">
     <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
              let $index = index; last as isLast;"
-         class="flex flex-row justify-start items-center" [class.pb-2]="!isLast">
+         class="flex flex-row items-center justify-start" [class.pb-2]="!isLast">
       <mat-expansion-panel class="entity-type-config flex-1" [class.load]="loading" [formGroup]="entityTypeFormGroup"
                            [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false">
         <mat-expansion-panel-header>
-          <div class="flex-1 flex flex-row justify-start items-center">
+          <div class="flex flex-1 flex-row items-center justify-start">
             <mat-panel-title>
-              <div class="flex-1 flex flex-row justify-start items-center">
+              <div class="flex flex-1 flex-row items-center justify-start">
                 <div>{{ entityTypeText(entityTypeFormGroup) }}</div>
               </div>
             </mat-panel-title>
@@ -51,8 +51,8 @@
               [filterAllowedEntityTypes]="false"
               [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
             </tb-entity-type-select>
-            <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4 xs:gap-2" formGroupName="config">
-              <div class="flex-1 flex flex-col">
+            <div class="flex flex-1 flex-row xs:flex-col xs:gap-2 gt-xs:gap-4" formGroupName="config">
+              <div class="flex flex-1 flex-col">
                 <mat-checkbox #removeOtherEntitiesCheckbox
                               formControlName="removeOtherEntities"
                               (change)="onRemoveOtherEntities(removeOtherEntitiesCheckbox, entityTypeFormGroup)">
@@ -62,7 +62,7 @@
                   {{ 'version-control.find-existing-entity-by-name' | translate }}
                 </mat-checkbox>
               </div>
-              <div class="flex-1 flex flex-col">
+              <div class="flex flex-1 flex-col">
                 <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="loadCredentials">
                   {{ 'version-control.load-credentials' | translate }}
                 </mat-checkbox>
@@ -80,7 +80,7 @@
     </div>
     <div *ngIf="!entityTypesFormGroupArray().length">
           <span translate
-                class="tb-prompt flex justify-center items-center">version-control.no-entities-to-restore-prompt</span>
+                class="tb-prompt flex items-center justify-center">version-control.no-entities-to-restore-prompt</span>
     </div>
   </div>
   <div style="padding-top: 16px;" class="flex flex-row">

ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html

@@ -25,7 +25,7 @@
   </mat-progress-bar>
   <form [formGroup]="createVersionFormGroup" style="padding-top: 16px;">
     <fieldset [disabled]="isLoading$ | async">
-      <div class="flex-1 flex flex-col">
+      <div class="flex flex-1 flex-col">
         <tb-branch-autocomplete
           required
           formControlName="branch">
@@ -50,7 +50,7 @@
       </div>
     </fieldset>
   </form>
-  <div class="flex justify-end items-center gap-2">
+  <div class="flex items-center justify-end gap-2">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -69,7 +69,7 @@
   <section *ngIf="(versionCreateResult$ | async)?.done || resultMessage; else progress">
     <section *ngIf="resultMessage">
       <div class="mat-headline-6 vc-result-message">{{ resultMessage }}</div>
-      <div class="flex justify-end items-center gap-2">
+      <div class="flex items-center justify-end gap-2">
         <button mat-button color="primary"
                 type="button"
                 [disabled]="(isLoading$ | async)"
@@ -80,7 +80,7 @@
     </section>
   </section>
   <ng-template #progress>
-    <section class="flex flex-col justify-center items-center">
+    <section class="flex flex-col items-center justify-center">
       <div class="mat-headline-6 vc-result-message progress">
         <span translate>version-control.creating-version</span>
         <mat-progress-bar mode="indeterminate"></mat-progress-bar>

ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.html

@@ -60,7 +60,7 @@
   </div>
   <mat-spinner *ngIf="!contentReady" mode="indeterminate" diameter="80"></mat-spinner>
   <div [class.!hidden]="!contentReady" class="diff-viewer flex-1" #diffViewer></div>
-  <div class="bottom-panel flex justify-end items-center gap-2" *ngIf="contentReady">
+  <div class="bottom-panel flex items-center justify-end gap-2" *ngIf="contentReady">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"

ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html

@@ -26,7 +26,7 @@
   <mat-spinner *ngIf="!entityDataInfo" mode="indeterminate" diameter="80"></mat-spinner>
   <form *ngIf="entityDataInfo" [formGroup]="restoreFormGroup" style="padding-top: 16px;">
     <fieldset [disabled]="isLoading$ | async">
-      <div class="flex-1 flex flex-col">
+      <div class="flex flex-1 flex-col">
         <mat-checkbox *ngIf="entityDataInfo.hasCredentials" formControlName="loadCredentials" style="margin-bottom: 16px;">
           {{ 'version-control.load-credentials' | translate }}
         </mat-checkbox>
@@ -39,7 +39,7 @@
       </div>
     </fieldset>
   </form>
-  <div *ngIf="entityDataInfo"  class="flex justify-end items-center gap-2">
+  <div *ngIf="entityDataInfo"  class="flex items-center justify-end gap-2">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -58,7 +58,7 @@
   <section *ngIf="(versionLoadResult$ | async)?.done || errorMessage; else progress">
     <section *ngIf="errorMessage">
       <div class="mat-headline-6 vc-result-message error" [innerHTML]="errorMessage"></div>
-      <div class="flex justify-end items-center gap-2">
+      <div class="flex items-center justify-end gap-2">
         <button mat-button color="primary"
                 type="button"
                 [disabled]="(isLoading$ | async)"
@@ -69,7 +69,7 @@
     </section>
   </section>
   <ng-template #progress>
-    <section class="flex flex-col justify-center items-center">
+    <section class="flex flex-col items-center justify-center">
       <div class="mat-headline-6 vc-result-message progress">
         <span translate>version-control.restoring-entity-version</span>
         <mat-progress-bar mode="indeterminate"></mat-progress-bar>

ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html

@@ -16,10 +16,10 @@
 
 -->
 <div class="mat-padding tb-entity-table tb-absolute-fill" [class.tb-popover-mode]="popoverComponent">
-  <div class="tb-entity-table-content flex-1 flex flex-col" [class.tb-outlined-border]="!popoverComponent">
+  <div class="tb-entity-table-content flex flex-1 flex-col" [class.tb-outlined-border]="!popoverComponent">
     <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode">
       <div class="mat-toolbar-tools">
-        <div class="title-container flex flex-row justify-start items-center xs:flex-col xs:justify-center xs:items-start">
+        <div class="title-container flex flex-row items-center justify-start xs:flex-col xs:items-start xs:justify-center">
           <span class="tb-entity-table-title">{{(singleEntityMode ? 'version-control.entity-versions' : 'version-control.versions') | translate}}</span>
           <tb-branch-autocomplete
             #branchAutocompleteComponent
@@ -32,7 +32,7 @@
           </tb-branch-autocomplete>
         </div>
         <span class="flex-1"></span>
-        <div class="flex flex-row justify-center items-center xs:flex-col xs:justify-center xs:items-end">
+        <div class="flex flex-row items-center justify-center xs:flex-col xs:items-end xs:justify-center">
           <button *ngIf="singleEntityMode" mat-stroked-button color="primary"
                   #createVersionButton
                   [disabled]="(isLoading$ | async) || (isReadOnly | async)"
@@ -128,7 +128,7 @@
                                              [class.min-w-10]="!singleEntityMode" [class.max-w-10]="!singleEntityMode" [class.w-10]="!singleEntityMode">
           </mat-header-cell>
           <mat-cell *matCellDef="let entityVersion">
-            <div class="flex-1 flex flex-row justify-end items-stretch">
+            <div class="flex flex-1 flex-row items-stretch justify-end">
               <button *ngIf="singleEntityMode" mat-icon-button [disabled]="isLoading$ | async"
                       matTooltip="{{ 'version-control.compare-with-current' | translate }}"
                       matTooltipPosition="above"
@@ -157,13 +157,13 @@
         <mat-row [class.!hidden]="dataSource.dataLoading" *matRowDef="let entityVersion; columns: displayedColumns;"></mat-row>
       </table>
       <span [class.!hidden]="(isLoading$ | async) || (dataSource.isEmpty() | async) === false || dataSource.dataLoading"
-            class="no-data-found flex justify-center items-center" translate>{{
+            class="no-data-found flex items-center justify-center" translate>{{
         singleEntityMode
           ? 'version-control.no-entity-versions-text'
           : 'version-control.no-versions-text'
         }}</span>
       <span [class.!hidden]="!dataSource.dataLoading"
-            class="no-data-found flex justify-center items-center">{{ 'common.loading' | translate }}</span>
+            class="no-data-found flex items-center justify-center">{{ 'common.loading' | translate }}</span>
     </div>
     <mat-divider></mat-divider>
     <mat-paginator [length]="dataSource.total() | async"

ui-ngx/src/app/modules/home/components/vc/remove-other-entities-confirm.component.html

@@ -24,7 +24,7 @@
       </mat-form-field>
     </fieldset>
   </form>
-  <div class="flex justify-end items-center gap-2">
+  <div class="flex items-center justify-end gap-2">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"

ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html

@@ -99,7 +99,7 @@
               </mat-form-field>
             </section>
           </fieldset>
-          <div class="flex flex-row justify-end items-center gap-4 xs:flex-col xs:justify-end xs:items-stretch">
+          <div class="flex flex-row items-center justify-end gap-4 xs:flex-col xs:items-stretch xs:justify-end">
             <button mat-raised-button color="warn" type="button" [class.!hidden]="!settings"
                     [disabled]="(isLoading$ | async)" (click)="delete(formDirective)">
               {{'action.delete' | translate}}