Fx flex replacements. Switch to tailwind.css.

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

@@ -19,7 +19,7 @@
         ngxClipboard
         [cbContent]="credential"
         (cbOnSuccess)="onCopyCredential()"
-        [fxHide]="hideButton"
+        [class.!hidden]="hideButton"
         [disabled]="disabled || loading">
   <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
   <span>{{ buttonLabel }}</span>

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

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section [formGroup]="serverFormGroup" fxLayout="column">
+<section [formGroup]="serverFormGroup" class="flex flex-col">
   <mat-form-field class="mat-block">
     <mat-label translate>device.lwm2m-security-config.mode</mat-label>
     <mat-select formControlName="securityMode">
@@ -24,7 +24,7 @@
       </mat-option>
     </mat-select>
   </mat-form-field>
-  <div [fxShow]="serverFormGroup.get('securityMode').value !== securityConfigLwM2MType.NO_SEC">
+  <div [class.!hidden]="serverFormGroup.get('securityMode').value === securityConfigLwM2MType.NO_SEC">
     <mat-form-field class="mat-block">
       <mat-label>{{ 'device.lwm2m-security-config.client-publicKey-or-id' | translate }}</mat-label>
       <mat-icon class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"

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

@@ -16,7 +16,7 @@
 
 -->
 <section [formGroup]="deviceCredentialsFormGroup">
-  <section [fxShow]="credentialsTypes?.length > 1" style="margin-bottom: 16px">
+  <section [class.!hidden]="!(credentialsTypes?.length > 1)" style="margin-bottom: 16px">
     <div class="tb-type-title" translate>device.credentials-type</div>
     <tb-toggle-select formControlName="credentialsType" appearance="fill">
       <tb-toggle-option *ngFor="let credentialsType of credentialsTypes" [value]="credentialsType">

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

@@ -30,9 +30,9 @@
   </ng-container>
 </ng-template>
 <ng-template #deviceFilterPanel>
-  <form fxLayout="column" class="mat-content mat-padding" (ngSubmit)="update()">
+  <form class="mat-content mat-padding flex flex-col" (ngSubmit)="update()">
     <ng-container *ngTemplateOutlet="deviceFilter"></ng-container>
-    <div fxLayout="row" class="tb-panel-actions" fxLayoutAlign="end center">
+    <div class="tb-panel-actions flex flex-row justify-end items-center">
       <button type="button"
               mat-button
               (click)="cancel()">
@@ -48,7 +48,7 @@
   </form>
 </ng-template>
 <ng-template #deviceFilter>
-  <div fxLayout="column" fxLayoutGap="16px" style="min-width: 280px;" [formGroup]="deviceInfoFilterForm">
+  <div class="flex flex-col gap-4" style="min-width: 280px;" [formGroup]="deviceInfoFilterForm">
     <tb-device-profile-autocomplete
       subscriptSizing="dynamic"
       formControlName="deviceProfileId"

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

@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<form (ngSubmit)="add()" style="min-width: 400px; width: 750px;" [ngStyle]="entitiesTableConfig.addDialogStyle">
+<form (ngSubmit)="add()" style="min-width: 400px; width: 750px;" [style]="entitiesTableConfig.addDialogStyle">
   <mat-toolbar color="primary">
     <h2 translate>{{ translations.add }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <div [tb-help]="helpLinkId()"></div>
     <button mat-icon-button
             (click)="cancel()"
@@ -32,7 +32,7 @@
   <div mat-dialog-content>
     <tb-anchor #entityDetailsForm></tb-anchor>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial

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

@@ -34,18 +34,18 @@
   </mat-drawer>
   <mat-drawer-content>
     <div class="mat-padding tb-entity-table tb-absolute-fill">
-      <div fxLayout="column" class="tb-entity-table-content tb-outlined-border">
-        <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode && dataSource.selection.isEmpty()">
+      <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 fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">
+            <div class="title-container flex flex-row justify-start items-center xs:flex-col xs:justify-center xs:items-start">
               <span *ngIf="entitiesTableConfig.tableTitle" class="tb-entity-table-title">{{ entitiesTableConfig.tableTitle }}</span>
               <tb-anchor #entityTableHeader></tb-anchor>
               <tb-timewindow *ngIf="entitiesTableConfig.useTimePageLink" [(ngModel)]="timewindow"
                               (ngModelChange)="onTimewindowChange()"
                               asButton strokedButton historyOnly [forAllTimeEnabled]="entitiesTableConfig.forAllTimeEnabled"></tb-timewindow>
             </div>
-            <span fxFlex></span>
-            <div [fxShow]="addEnabled()">
+            <span class="flex-1"></span>
+            <div [class.!hidden]="!addEnabled()">
               <button mat-icon-button [disabled]="isLoading$ | async"
                       *ngIf="!entitiesTableConfig.addActionDescriptors.length; else addActions"
                       (click)="addEntity($event)"
@@ -56,7 +56,7 @@
               <ng-template #addActions>
                 <button mat-icon-button [disabled]="isLoading$ | async"
                         *ngIf="entitiesTableConfig.addActionDescriptors.length === 1; else addActionsMenu"
-                        [fxShow]="entitiesTableConfig.addActionDescriptors[0].isEnabled()"
+                        [class.!hidden]="!entitiesTableConfig.addActionDescriptors[0].isEnabled()"
                         (click)="entitiesTableConfig.addActionDescriptors[0].onAction($event)"
                         matTooltip="{{ entitiesTableConfig.addActionDescriptors[0].name }}"
                         matTooltipPosition="above">
@@ -72,7 +72,7 @@
                   <mat-menu #addActionsMenu="matMenu" xPosition="before">
                     <button mat-menu-item *ngFor="let actionDescriptor of entitiesTableConfig.addActionDescriptors"
                             [disabled]="isLoading$ | async"
-                            [fxShow]="actionDescriptor.isEnabled()"
+                            [class.!hidden]="!actionDescriptor.isEnabled()"
                             (click)="actionDescriptor.onAction($event)">
                       <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
                       <span>{{ actionDescriptor.name }}</span>
@@ -82,7 +82,7 @@
               </ng-template>
             </div>
             <button mat-icon-button [disabled]="isLoading$ | async"
-                    [fxShow]="actionDescriptor.isEnabled()" *ngFor="let actionDescriptor of headerActionDescriptors"
+                    [class.!hidden]="!actionDescriptor.isEnabled()" *ngFor="let actionDescriptor of headerActionDescriptors"
                     matTooltip="{{ actionDescriptor.name }}"
                     matTooltipPosition="above"
                     (click)="actionDescriptor.onAction($event)">
@@ -101,14 +101,14 @@
             </button>
           </div>
         </mat-toolbar>
-        <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode && dataSource.selection.isEmpty()">
+        <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode || !dataSource.selection.isEmpty()">
           <div class="mat-toolbar-tools">
             <button mat-icon-button
                     matTooltip="{{ translations.search | translate }}"
                     matTooltipPosition="above">
               <mat-icon>search</mat-icon>
             </button>
-            <mat-form-field fxFlex>
+            <mat-form-field class="flex-1">
               <mat-label>&nbsp;</mat-label>
               <input #searchInput matInput
                      [formControl]="textSearch"
@@ -121,14 +121,14 @@
             </button>
           </div>
         </mat-toolbar>
-        <mat-toolbar *ngIf="entitiesTableConfig.selectionEnabled" class="mat-mdc-table-toolbar" color="primary" [fxShow]="!dataSource.selection.isEmpty()">
+        <mat-toolbar *ngIf="entitiesTableConfig.selectionEnabled" class="mat-mdc-table-toolbar" color="primary" [class.!hidden]="dataSource.selection.isEmpty()">
           <div class="mat-toolbar-tools">
             <span class="tb-entity-table-info">
               {{ translations.selectedEntities | translate:{count: dataSource.selection.selected.length} }}
             </span>
-            <span fxFlex></span>
+            <span class="flex-1"></span>
             <button mat-icon-button [disabled]="isLoading$ | async"
-                    [fxShow]="actionDescriptor.isEnabled" *ngFor="let actionDescriptor of groupActionDescriptors"
+                    [class.!hidden]="!actionDescriptor.isEnabled" *ngFor="let actionDescriptor of groupActionDescriptors"
                     matTooltip="{{ actionDescriptor.name }}"
                     matTooltipPosition="above"
                     (click)="actionDescriptor.onAction($event, dataSource.selection.selected)">
@@ -136,7 +136,7 @@
             </button>
           </div>
         </mat-toolbar>
-        <div fxFlex class="table-container">
+        <div class="table-container flex-1">
           <table mat-table [dataSource]="dataSource" [trackBy]="trackByEntityId"
                      matSort [matSortActive]="pageLink.sortOrder?.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
             <ng-container matColumnDef="select" sticky>
@@ -148,23 +148,23 @@
               </mat-header-cell>
               <mat-cell *matCellDef="let entity">
                 <mat-checkbox (click)="$event.stopPropagation()"
-                              [fxShow]="entitiesTableConfig.entitySelectionEnabled(entity)"
+                              [class.!hidden]="!entitiesTableConfig.entitySelectionEnabled(entity)"
                               (change)="$event ? dataSource.selection.toggle(entity) : null"
                               [checked]="dataSource.selection.isSelected(entity)">
                 </mat-checkbox>
               </mat-cell>
             </ng-container>
             <ng-container [matColumnDef]="column.key" *ngFor="let column of entityColumns; trackBy: trackByColumnKey;">
-              <mat-header-cell [ngClass]="{'mat-number-cell': column.isNumberColumn}"
-                               [fxHide.lt-lg]="column.mobileHide"
-                               *matHeaderCellDef [ngStyle]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable">
+              <mat-header-cell [class.mat-number-cell]="column.isNumberColumn"
+                               [class.lt-lg:!hidden]="column.mobileHide"
+                               *matHeaderCellDef [style]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable">
                 {{ column.ignoreTranslate ? column.title : (column.title | translate) }} </mat-header-cell>
-              <mat-cell [ngClass]="{'mat-number-cell': column.isNumberColumn}"
-                        [fxHide.lt-lg]="column.mobileHide"
+              <mat-cell [class.mat-number-cell]="column.isNumberColumn"
+                        [class.lt-lg:!hidden]="column.mobileHide"
                         *matCellDef="let entity; let row = index"
                         [matTooltip]="cellTooltip(entity, column, row)"
                         matTooltipPosition="above"
-                        [ngStyle]="cellStyle(entity, column, row)">
+                        [style]="cellStyle(entity, column, row)">
                 <ng-container [ngSwitch]="column.type">
                   <ng-template [ngSwitchCase]="'link'">
                     <a *ngIf="column.entityURL(entity) as detailsPageURL; else defaultContent"
@@ -183,7 +183,7 @@
                     <ng-template [ngSwitchCase]="cellActionType.COPY_BUTTON">
                       <tb-copy-button
                         [disabled]="isLoading$ | async"
-                        [fxShow]="column.actionCell.isEnabled(entity)"
+                        [class.!hidden]="!column.actionCell.isEnabled(entity)"
                         [copyText]="column.actionCell.onAction(null, entity)"
                         tooltipText="{{ column.actionCell.nameFunction ? column.actionCell.nameFunction(entity) : column.actionCell.name }}"
                         tooltipPosition="above"
@@ -193,11 +193,11 @@
                     </ng-template>
                     <ng-template ngSwitchDefault>
                       <button mat-icon-button [disabled]="isLoading$ | async"
-                              [fxShow]="column.actionCell.isEnabled(entity)"
+                              [class.!hidden]="!column.actionCell.isEnabled(entity)"
                               matTooltip="{{ column.actionCell.nameFunction ? column.actionCell.nameFunction(entity) : column.actionCell.name }}"
                               matTooltipPosition="above"
                               (click)="column.actionCell.onAction($event, entity)">
-                        <tb-icon [ngStyle]="column.actionCell.style">
+                        <tb-icon [style]="column.actionCell.style">
                           {{column.actionCell.icon}}
                         </tb-icon>
                       </button>
@@ -207,74 +207,83 @@
               </mat-cell>
             </ng-container>
             <ng-container [matColumnDef]="column.key" *ngFor="let column of actionColumns; trackBy: trackByColumnKey;">
-              <mat-header-cell *matHeaderCellDef [ngStyle]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable"> {{ column.title | translate }} </mat-header-cell>
+              <mat-header-cell *matHeaderCellDef [style]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable"> {{ column.title | translate }} </mat-header-cell>
               <mat-cell *matCellDef="let entity; let row = index"
-                        [ngStyle]="cellStyle(entity, column, row)">
+                        [style]="cellStyle(entity, column, row)">
                 <button mat-icon-button [disabled]="isLoading$ | async"
-                        [fxShow]="column.actionDescriptor.isEnabled(entity)"
+                        [class.!hidden]="!column.actionDescriptor.isEnabled(entity)"
                         matTooltip="{{ column.actionDescriptor.nameFunction ? column.actionDescriptor.nameFunction(entity) : column.actionDescriptor.name }}"
                         matTooltipPosition="above"
                         (click)="column.actionDescriptor.onAction($event, entity)">
-                  <tb-icon [ngStyle]="column.actionDescriptor.style">
+                  <tb-icon [style]="column.actionDescriptor.style">
                     {{column.actionDescriptor.iconFunction ? column.actionDescriptor.iconFunction(entity) : column.actionDescriptor.icon}}
                   </tb-icon>
                 </button>
               </mat-cell>
             </ng-container>
             <ng-container matColumnDef="actions" stickyEnd>
-              <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (cellActionDescriptors.length * 48) + 'px',
-                                                                    maxWidth: (cellActionDescriptors.length * 48) + 'px',
-                                                                    width: (cellActionDescriptors.length * 48) + 'px' }">
-                {{ entitiesTableConfig.actionsColumnTitle ? (entitiesTableConfig.actionsColumnTitle | translate) : '' }}
+              <mat-header-cell *matHeaderCellDef>
+                <ng-container *ngIf="cellActionDescriptors.length">
+                  <div class="gt-md:!hidden" style="width: 48px; min-width: 48px; max-width: 48px;">
+                    {{ entitiesTableConfig.actionsColumnTitle ? (entitiesTableConfig.actionsColumnTitle | translate) : '' }}
+                  </div>
+                  <div class="lt-lg:!hidden"
+                       [style.width]="(cellActionDescriptors.length * 48) + 'px'"
+                       [style.min-width]="(cellActionDescriptors.length * 48) + 'px'"
+                       [style.max-width]="(cellActionDescriptors.length * 48) + 'px'">
+                    {{ entitiesTableConfig.actionsColumnTitle ? (entitiesTableConfig.actionsColumnTitle | translate) : '' }}
+                  </div>
+                </ng-container>
               </mat-header-cell>
-              <mat-cell *matCellDef="let entity" [ngStyle.gt-md]="{ minWidth: (cellActionDescriptors.length * 48) + 'px',
-                                                                    maxWidth: (cellActionDescriptors.length * 48) + 'px',
-                                                                    width: (cellActionDescriptors.length * 48) + 'px' }">
-                <div [fxHide]="cellActionDescriptors.length !== 1" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
-                  <button mat-icon-button [disabled]="(isLoading$ | async) || !actionDescriptor.isEnabled(entity)"
-                          *ngFor="let actionDescriptor of cellActionDescriptors"
-                          matTooltip="{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}"
-                          matTooltipPosition="above"
-                          (click)="actionDescriptor.onAction($event, entity)">
-                    <tb-icon [ngStyle]="actionDescriptor.style">
-                      {{actionDescriptor.iconFunction ?  actionDescriptor.iconFunction(entity) : actionDescriptor.icon}}
-                    </tb-icon>
-                  </button>
-                </div>
-                <div fxHide [fxShow.lt-lg]="cellActionDescriptors.length !== 1" *ngIf="cellActionDescriptors.length">
-                  <button mat-icon-button
-                          (click)="$event.stopPropagation()"
-                          [matMenuTriggerFor]="cellActionsMenu">
-                    <mat-icon class="material-icons">more_vert</mat-icon>
-                  </button>
-                  <mat-menu #cellActionsMenu="matMenu" xPosition="before">
-                    <button mat-menu-item *ngFor="let actionDescriptor of cellActionDescriptors"
-                            [disabled]="isLoading$ | async"
-                            [fxShow]="actionDescriptor.isEnabled(entity)"
+              <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"
+                       [style.width]="(cellActionDescriptors.length * 48) + 'px'"
+                       [style.min-width]="(cellActionDescriptors.length * 48) + 'px'"
+                       [style.max-width]="(cellActionDescriptors.length * 48) + 'px'">
+                    <button mat-icon-button [disabled]="(isLoading$ | async) || !actionDescriptor.isEnabled(entity)"
+                            *ngFor="let actionDescriptor of cellActionDescriptors"
+                            matTooltip="{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}"
+                            matTooltipPosition="above"
                             (click)="actionDescriptor.onAction($event, entity)">
-                      <tb-icon matMenuItemIcon [ngStyle]="actionDescriptor.style">
+                      <tb-icon [style]="actionDescriptor.style">
                         {{actionDescriptor.iconFunction ?  actionDescriptor.iconFunction(entity) : actionDescriptor.icon}}
                       </tb-icon>
-                      <span>{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}</span>
                     </button>
-                  </mat-menu>
-                </div>
+                  </div>
+                  <div [class.!hidden]="cellActionDescriptors.length === 1" class="gt-md:!hidden">
+                    <button mat-icon-button
+                            (click)="$event.stopPropagation()"
+                            [matMenuTriggerFor]="cellActionsMenu">
+                      <mat-icon class="material-icons">more_vert</mat-icon>
+                    </button>
+                    <mat-menu #cellActionsMenu="matMenu" xPosition="before">
+                      <button mat-menu-item *ngFor="let actionDescriptor of cellActionDescriptors"
+                              [disabled]="isLoading$ | async"
+                              [class.!hidden]="!actionDescriptor.isEnabled(entity)"
+                              (click)="actionDescriptor.onAction($event, entity)">
+                        <tb-icon matMenuItemIcon [style]="actionDescriptor.style">
+                          {{actionDescriptor.iconFunction ?  actionDescriptor.iconFunction(entity) : actionDescriptor.icon}}
+                        </tb-icon>
+                        <span>{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}</span>
+                      </button>
+                    </mat-menu>
+                  </div>
+                </ng-container>
               </mat-cell>
             </ng-container>
-            <mat-header-row [ngClass]="{'mat-row-select': selectionEnabled}" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
-            <mat-row [fxShow]="!dataSource.dataLoading"
-                     [ngClass]="{'mat-row-select': selectionEnabled,
-                                 'mat-selected': dataSource.selection.isSelected(entity),
-                                 'tb-current-entity': dataSource.isCurrentEntity(entity),
-                                 'tb-pointer': entitiesTableConfig.rowPointer}"
+            <mat-header-row [class.mat-row-select]="selectionEnabled" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
+            <mat-row [class.!hidden]="dataSource.dataLoading"
+                     [class.mat-row-select]="selectionEnabled"
+                     [class.mat-selected]="dataSource.selection.isSelected(entity)"
+                     [class.tb-current-entity]="dataSource.isCurrentEntity(entity)"
+                     [class.tb-pointer]="entitiesTableConfig.rowPointer"
                      *matRowDef="let entity; columns: displayedColumns;" (click)="onRowClick($event, entity)"></mat-row>
           </table>
-          <span [fxShow]="!(isLoading$ | async) && (dataSource.isEmpty() | async) && !dataSource.dataLoading"
-                fxLayoutAlign="center center"
-                class="no-data-found">{{ translations.noEntities | translate }}</span>
-          <span [fxShow]="dataSource.dataLoading"
-                fxLayoutAlign="center center"
-                class="no-data-found">{{ 'common.loading' | translate }}</span>
+          <span [class.!hidden]="(isLoading$ | async) || (dataSource.isEmpty() | async) === false || dataSource.dataLoading"
+                class="no-data-found flex justify-center items-center">{{ translations.noEntities | translate }}</span>
+          <span [class.!hidden]="!dataSource.dataLoading"
+                class="no-data-found flex justify-center items-center">{{ 'common.loading' | translate }}</span>
         </div>
         <mat-divider *ngIf="displayPagination"></mat-divider>
         <mat-paginator *ngIf="displayPagination"