Fx flex replacements. Switch to tailwind.css.

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

@@ -17,26 +17,26 @@
 -->
 <mat-card appearance="outlined" class="settings-card">
   <mat-toolbar class="details-toolbar">
-    <div class="mat-toolbar-tools" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="mat-toolbar-tools flex flex-row justify-start items-center 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" fxLayout="column" fxLayoutAlign="center start">
+      <div class="tb-details-title-header flex flex-col justify-center items-start">
         <div class="tb-details-title tb-ellipsis">{{ headerTitle }}</div>
         <div class="tb-details-subtitle tb-ellipsis">{{ headerSubtitle }}</div>
       </div>
       <div class="tb-help" [tb-help]="helpLinkId()"></div>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
-      <section *ngIf="!isReadOnly" fxLayout="row" class="tb-header-button" fxLayoutGap="8px">
+      <section *ngIf="!isReadOnly" class="tb-header-button flex flex-row gap-2">
         <button [disabled]="(isLoading$ | async) || detailsForm.invalid || !detailsForm.dirty"
                 mat-fab
                 matTooltip="{{ 'action.apply-changes' | translate }}"
                 matTooltipPosition="above"
                 color="accent" class="tb-btn-header"
-                [ngClass]="{'tb-hide': !isEdit}"
+                [class.tb-hide]="!isEdit"
                 (click)="onApplyDetails()">
           <mat-icon class="material-icons">done</mat-icon>
         </button>
@@ -51,8 +51,8 @@
       </section>
     </div>
   </mat-toolbar>
-  <mat-card-content fxFlex="100">
+  <mat-card-content class="flex-[1_1_100%]">
-    <mat-tab-group mat-stretch-tabs="false" class="tb-absolute-fill" [ngClass]="{'tb-headless': hideDetailsTabs()}" [(selectedIndex)]="selectedTab" fxFill>
+    <mat-tab-group mat-stretch-tabs="false" class="tb-absolute-fill w-full h-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-details-panel.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<tb-details-panel fxFlex
+<tb-details-panel class="flex-1"
                    [headerTitle]="entitiesTableConfig.entityTitle(entity)"
                    headerSubtitle="{{ translations.details | translate }}"
                    [isReadOnly]="entitiesTableConfig.detailsReadonly(entity)"
@@ -27,7 +27,7 @@
   <div class="details-buttons">
     <div [tb-help]="helpLinkId()"></div>
   </div>
-  <mat-tab-group mat-stretch-tabs="false" class="tb-absolute-fill" [ngClass]="{'tb-headless': hideDetailsTabs()}" fxFlex [(selectedIndex)]="selectedTab">
+  <mat-tab-group mat-stretch-tabs="false" class="tb-absolute-fill flex-1" [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-view.component.html

@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" class="tb-entity-filter-view">
+<div class="tb-entity-filter-view flex flex-col">
   <div *ngIf="!filter || !filter.type; else filterView" class="entity-filter-empty" translate>alias.no-entity-filter-specified</div>
   <ng-template #filterView>
-    <div fxLayout="column">
+    <div class="flex flex-col">
       <div class="entity-filter-value">{{ filterDisplayValue }}</div>
     </div>
   </ng-template>

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

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" [formGroup]="entityFilterFormGroup" class="tb-entity-filter">
+<div [formGroup]="entityFilterFormGroup" class="tb-entity-filter flex flex-col">
   <mat-form-field class="mat-block">
     <mat-label translate>alias.filter-type</mat-label>
     <mat-select required formControlName="type">
@@ -27,7 +27,7 @@
       {{ 'alias.filter-type-required' | translate }}
     </mat-error>
   </mat-form-field>
-  <section fxLayout="column" [formGroup]="filterFormGroup" [ngSwitch]="entityFilterFormGroup.get('type').value">
+  <section class="flex flex-col" [formGroup]="filterFormGroup" [ngSwitch]="entityFilterFormGroup.get('type').value">
     <ng-template [ngSwitchCase]="aliasFilterType.singleEntity">
       <tb-entity-select required
                         useAliasEntityTypes="true"
@@ -78,9 +78,9 @@
         <input matInput formControlName="stateEntityParamName"
                placeholder="{{ 'alias.default-entity-parameter-name' | translate }}">
       </mat-form-field>
-      <div fxLayout="column">
+      <div class="flex flex-col">
         <label class="tb-small">{{ 'alias.default-state-entity' | translate }}</label>
-        <tb-entity-select fxFlex
+        <tb-entity-select class="flex-1"
                           useAliasEntityTypes="true"
                           formControlName="defaultStateEntity">
         </tb-entity-select>
@@ -192,42 +192,42 @@
                                  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" fxLayout="row" fxLayoutAlign="start center" style="padding-left: 0;">
+      <section class="tb-root-state-entity-switch flex flex-row justify-start items-center" 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 fxFlex fxLayout="row" *ngIf="!filterFormGroup.get('rootStateEntity').value">
+      <div class="flex-1 flex flex-row" *ngIf="!filterFormGroup.get('rootStateEntity').value">
-        <tb-entity-select fxFlex
+        <tb-entity-select class="flex-1"
                           required
                           useAliasEntityTypes="true"
                           formControlName="rootEntity">
         </tb-entity-select>
       </div>
-      <div fxFlex fxLayout="column" fxLayout.gt-sm="row" *ngIf="filterFormGroup.get('rootStateEntity').value">
+      <div class="flex-1 flex 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 fxFlex fxLayout="column">
+        <div class="flex-1 flex flex-col">
           <label class="tb-small">{{ 'alias.default-state-entity' | translate }}</label>
-          <tb-entity-select fxFlex
+          <tb-entity-select class="flex-1"
                             useAliasEntityTypes="true"
                             formControlName="defaultStateEntity">
           </tb-entity-select>
         </div>
       </div>
-      <div fxFlex fxLayout="row">
+      <div class="flex-1 flex flex-row">
-        <section class="tb-root-state-entity-switch" fxLayout="row" fxLayoutAlign="start center" style="padding-left: 0;">
+        <section class="tb-root-state-entity-switch flex flex-row justify-start items-center" 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 fxFlex fxLayoutGap="8px" fxLayout="row" fxLayout.xs="column">
+      <div class="flex-1 flex flex-row xs:flex-col gap-2">
         <mat-form-field class="mat-block" style="min-width: 100px;">
           <mat-label translate>relation.direction</mat-label>
           <mat-select required formControlName="direction">
@@ -236,7 +236,7 @@
             </mat-option>
           </mat-select>
         </mat-form-field>
-        <mat-form-field fxFlex floatLabel="always" class="mat-block">
+        <mat-form-field floatLabel="always" class="mat-block flex-1">
           <mat-label translate>alias.max-relation-level</mat-label>
           <input matInput
                  type="number"
@@ -248,7 +248,7 @@
       </div>
       <div class="mat-caption" style="color: rgba(0,0,0,0.57);" translate>relation.relation-type</div>
       <tb-relation-type-autocomplete
-        fxFlex
+        class="flex-1"
         formControlName="relationType">
       </tb-relation-type-autocomplete>
     </ng-template>