From c8027b7079dd4182b510960f9138cda38cd407a1 Mon Sep 17 00:00:00 2001
From: Jonas Suter <jonas.suter@headitsolutions.ch>
Date: Thu, 13 Apr 2023 19:35:57 +0200
Subject: [PATCH] removed flex layout dependency (replaced with css)

---
 packages/angular-material/package.json        |  2 --
 .../src/controls/autocomplete.renderer.ts     | 14 ++++++++--
 .../src/controls/boolean.renderer.ts          | 18 ++++++++++---
 .../src/controls/date.renderer.ts             | 12 ++++++++-
 .../src/controls/number.renderer.ts           | 12 ++++++++-
 .../src/controls/range.renderer.ts            | 18 ++++++++++++-
 .../src/controls/text.renderer.ts             | 12 ++++++++-
 .../src/controls/textarea.renderer.ts         | 12 ++++++++-
 .../src/controls/toggle.renderer.ts           |  8 +++++-
 .../src/layouts/array-layout.renderer.ts      | 21 ++++++++++++---
 .../layouts/categorization-layout.renderer.ts | 11 ++++++--
 .../src/layouts/group-layout.renderer.ts      | 20 ++++++++++++--
 .../src/layouts/horizontal-layout.renderer.ts | 26 +++++++++++++++----
 .../src/layouts/vertical-layout.renderer.ts   | 21 +++++++++++++--
 .../src/other/label.renderer.ts               | 11 ++++++--
 15 files changed, 187 insertions(+), 31 deletions(-)

diff --git a/packages/angular-material/package.json b/packages/angular-material/package.json
index f0c3d4cf1..285ac1ff7 100644
--- a/packages/angular-material/package.json
+++ b/packages/angular-material/package.json
@@ -63,7 +63,6 @@
     "@angular/cdk": "^14.2.0 || ^15.0.0",
     "@angular/common": "^14.2.0 || ^15.0.0",
     "@angular/core": "^14.2.0 || ^15.0.0",
-    "@angular/flex-layout": "^14.0.0-beta || ^15.0.0-beta",
     "@angular/forms": "^14.2.0 || ^15.0.0",
     "@angular/material": "^14.2.0 || ^15.0.0",
     "@angular/platform-browser": "^14.2.0 || ^15.0.0",
@@ -83,7 +82,6 @@
     "@angular/compiler": "^14.2.0",
     "@angular/compiler-cli": "^14.2.0",
     "@angular/core": "^14.2.0",
-    "@angular/flex-layout": "^14.0.0-beta || ^15.0.0-beta",
     "@angular/forms": "^14.2.0",
     "@angular/material": "^14.2.0",
     "@angular/platform-browser": "^14.2.0",
diff --git a/packages/angular-material/src/controls/autocomplete.renderer.ts b/packages/angular-material/src/controls/autocomplete.renderer.ts
index 1cb61acf8..a5581b3cc 100644
--- a/packages/angular-material/src/controls/autocomplete.renderer.ts
+++ b/packages/angular-material/src/controls/autocomplete.renderer.ts
@@ -64,7 +64,7 @@ import { startWith } from 'rxjs/operators';
 @Component({
   selector: 'AutocompleteControlRenderer',
   template: `
-    <mat-form-field fxFlex [fxHide]="hidden">
+    <mat-form-field [ngClass]="{'simple-flex-item':true,'d-none': hidden}">
       <mat-label>{{ label }}</mat-label>
       <input
         matInput
@@ -93,11 +93,21 @@ import { startWith } from 'rxjs/operators';
       <mat-error>{{ error }}</mat-error>
     </mat-form-field>
   `,
+  styles: [
+    `.d-none {
+      display: none;
+    }
+    .simple-flex-item {
+      flex: 1 1 0%;
+      box-sizing: border-box;
+    }
+    `
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AutocompleteControlRenderer extends JsonFormsControl {
   @Input() options: string[];
-  
+
   focused: boolean = false;
   filteredOptions: Observable<string[]>;
   shouldFilter: boolean;
diff --git a/packages/angular-material/src/controls/boolean.renderer.ts b/packages/angular-material/src/controls/boolean.renderer.ts
index 06d9807d5..0ca23a9d2 100644
--- a/packages/angular-material/src/controls/boolean.renderer.ts
+++ b/packages/angular-material/src/controls/boolean.renderer.ts
@@ -30,10 +30,7 @@ import { isBooleanControl, RankedTester, rankWith } from '@jsonforms/core';
   selector: 'BooleanControlRenderer',
   template: `
     <div
-      [fxHide]="hidden"
-      fxLayout="column"
-      fxLayoutAlign="center"
-      style="height:100%"
+    [ngClass]="{'boolean-control': true, 'd-none': hidden}"
     >
       <mat-checkbox
         (change)="onChange($event)"
@@ -47,6 +44,19 @@ import { isBooleanControl, RankedTester, rankWith } from '@jsonforms/core';
       <mat-error class="mat-caption">{{ error }}</mat-error>
     </div>
   `,
+  styles: [
+    `.d-none {
+      display: none;
+    }
+    .boolean-control {
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      justify-content: 'center';
+      height: 100%;
+    }
+    `
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class BooleanControlRenderer extends JsonFormsControl {
diff --git a/packages/angular-material/src/controls/date.renderer.ts b/packages/angular-material/src/controls/date.renderer.ts
index 65040b22d..2b613ce0a 100644
--- a/packages/angular-material/src/controls/date.renderer.ts
+++ b/packages/angular-material/src/controls/date.renderer.ts
@@ -33,7 +33,7 @@ import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
 @Component({
   selector: 'DateControlRenderer',
   template: `
-    <mat-form-field fxFlex [fxHide]="hidden">
+    <mat-form-field  [ngClass]="{'simple-flex-item': true, 'd-none': hidden}">
       <mat-label>{{ label }}</mat-label>
       <input
         matInput
@@ -53,6 +53,16 @@ import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
       <mat-error>{{ error }}</mat-error>
     </mat-form-field>
   `,
+  styles: [
+    `.d-none {
+      display: none;
+    }
+    .simple-flex-item {
+      flex: 1 1 0%;
+      box-sizing: border-box;
+    }
+    `
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DateControlRenderer extends JsonFormsControl {
diff --git a/packages/angular-material/src/controls/number.renderer.ts b/packages/angular-material/src/controls/number.renderer.ts
index 350b9894a..6a0b652a1 100644
--- a/packages/angular-material/src/controls/number.renderer.ts
+++ b/packages/angular-material/src/controls/number.renderer.ts
@@ -37,7 +37,7 @@ import merge from 'lodash/merge';
 @Component({
   selector: 'NumberControlRenderer',
   template: `
-    <mat-form-field fxFlex [fxHide]="hidden">
+    <mat-form-field [ngClass]="{'simple-flex-item': true, 'd-none': hidden}">
       <mat-label>{{ label }}</mat-label>
       <input
         matInput
@@ -55,6 +55,16 @@ import merge from 'lodash/merge';
       <mat-error>{{ error }}</mat-error>
     </mat-form-field>
   `,
+  styles: [
+    `.d-none {
+      display: none;
+    }
+    .simple-flex-item {
+      flex: 1 1 0%;
+      box-sizing: border-box;
+    }
+    `
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class NumberControlRenderer extends JsonFormsControl {
diff --git a/packages/angular-material/src/controls/range.renderer.ts b/packages/angular-material/src/controls/range.renderer.ts
index 1effc3f7f..67f48f738 100644
--- a/packages/angular-material/src/controls/range.renderer.ts
+++ b/packages/angular-material/src/controls/range.renderer.ts
@@ -29,7 +29,7 @@ import { isRangeControl, RankedTester, rankWith } from '@jsonforms/core';
 @Component({
   selector: 'RangeControlRenderer',
   template: `
-    <div fxFlex fxLayout="column" [fxHide]="hidden">
+    <div [ngClass]="{'simple-flex-item': true, 'd-none': hidden}">
       <label class="mat-caption" style="color:rgba(0,0,0,.54)">{{
         label
       }}</label>
@@ -48,6 +48,22 @@ import { isRangeControl, RankedTester, rankWith } from '@jsonforms/core';
       <mat-error class="mat-caption">{{ error }}</mat-error>
     </div>
   `,
+  styles: [
+    `
+    .range-control {
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+    }
+    .d-none {
+      display: none;
+    }
+    .simple-flex-item {
+      flex: 1 1 0%;
+      box-sizing: border-box;
+    }
+    `
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class RangeControlRenderer extends JsonFormsControl {
diff --git a/packages/angular-material/src/controls/text.renderer.ts b/packages/angular-material/src/controls/text.renderer.ts
index dde8fc2f5..72402a2f9 100644
--- a/packages/angular-material/src/controls/text.renderer.ts
+++ b/packages/angular-material/src/controls/text.renderer.ts
@@ -29,7 +29,7 @@ import { isStringControl, RankedTester, rankWith } from '@jsonforms/core';
 @Component({
   selector: 'TextControlRenderer',
   template: `
-    <mat-form-field fxFlex [fxHide]="hidden">
+    <mat-form-field  [ngClass]="{'simple-flex-item': true, 'd-none': hidden}">
       <mat-label>{{ label }}</mat-label>
       <input
         matInput
@@ -44,6 +44,16 @@ import { isStringControl, RankedTester, rankWith } from '@jsonforms/core';
       <mat-error>{{ error }}</mat-error>
     </mat-form-field>
   `,
+  styles: [
+    `.d-none {
+      display: none;
+    }
+    .simple-flex-item {
+      flex: 1 1 0%;
+      box-sizing: border-box;
+    }
+    `
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TextControlRenderer extends JsonFormsControl {
diff --git a/packages/angular-material/src/controls/textarea.renderer.ts b/packages/angular-material/src/controls/textarea.renderer.ts
index 21458ff62..20d0a2c6c 100644
--- a/packages/angular-material/src/controls/textarea.renderer.ts
+++ b/packages/angular-material/src/controls/textarea.renderer.ts
@@ -29,7 +29,7 @@ import { isMultiLineControl, RankedTester, rankWith } from '@jsonforms/core';
 @Component({
   selector: 'TextAreaRenderer',
   template: `
-    <mat-form-field fxFlex [fxHide]="hidden">
+    <mat-form-field  [ngClass]="{'simple-flex-item': true, 'd-none': hidden}">
       <mat-label>{{ label }}</mat-label>
       <textarea
         matInput
@@ -43,6 +43,16 @@ import { isMultiLineControl, RankedTester, rankWith } from '@jsonforms/core';
       <mat-error>{{ error }}</mat-error>
     </mat-form-field>
   `,
+  styles: [
+    `.d-none {
+      display: none;
+    }
+    .simple-flex-item {
+      flex: 1 1 0%;
+      box-sizing: border-box;
+    }
+    `
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TextAreaRenderer extends JsonFormsControl {
diff --git a/packages/angular-material/src/controls/toggle.renderer.ts b/packages/angular-material/src/controls/toggle.renderer.ts
index a0586f910..df86dd20b 100644
--- a/packages/angular-material/src/controls/toggle.renderer.ts
+++ b/packages/angular-material/src/controls/toggle.renderer.ts
@@ -35,7 +35,7 @@ import {
 @Component({
   selector: 'ToggleControlRenderer',
   template: `
-    <div [fxHide]="hidden">
+    <div  [ngClass]="{'d-none': hidden}">
       <mat-slide-toggle
         (change)="onChange($event)"
         [checked]="isChecked()"
@@ -48,6 +48,12 @@ import {
       <mat-error class="mat-caption">{{ error }}</mat-error>
     </div>
   `,
+  styles: [
+    `.d-none {
+      display: none;
+    }
+    `
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ToggleControlRenderer extends JsonFormsControl {
diff --git a/packages/angular-material/src/layouts/array-layout.renderer.ts b/packages/angular-material/src/layouts/array-layout.renderer.ts
index ce966145f..fa219f99c 100644
--- a/packages/angular-material/src/layouts/array-layout.renderer.ts
+++ b/packages/angular-material/src/layouts/array-layout.renderer.ts
@@ -51,10 +51,10 @@ import {
 @Component({
   selector: 'app-array-layout-renderer',
   template: `
-    <div fxLayout="column" fxLayoutGap="16px" [fxHide]="hidden">
+    <div [ngClass]="{'array-layout-col': true, 'd-none': hidden}">
       <div [ngClass]="'array-layout-toolbar'">
         <h2 [ngClass]="['mat-h2', 'array-layout-title']">{{ label }}</h2>
-        <span fxFlex></span>
+        <span ></span>
         <mat-icon
           *ngIf="this.error?.length"
           color="warn"
@@ -65,7 +65,7 @@ import {
           >
             error_outline
         </mat-icon>
-        <span fxFlex></span>
+        <span [ngClass]="'simple-flex-item'"></span>
         <button
           mat-button
           matTooltip="{{ this.addTooltip }}"
@@ -131,7 +131,20 @@ import {
     </div>
   `,
   styles: [
-    `.array-layout-toolbar {
+    `
+    .d-none {
+      display: none;
+    }
+    .array-layout-col {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem; /** 16px */
+    }
+    .simple-flex-item {
+      flex: 1 1 0%;
+      box-sizing: border-box;
+    }
+    .array-layout-toolbar {
        display: flex;
        align-items: center;
       }
diff --git a/packages/angular-material/src/layouts/categorization-layout.renderer.ts b/packages/angular-material/src/layouts/categorization-layout.renderer.ts
index f5526eec0..48c189a31 100644
--- a/packages/angular-material/src/layouts/categorization-layout.renderer.ts
+++ b/packages/angular-material/src/layouts/categorization-layout.renderer.ts
@@ -48,7 +48,7 @@ import { Subscription } from 'rxjs';
 @Component({
   selector: 'jsonforms-categorization-layout',
   template: `
-    <mat-tab-group dynamicHeight="true" [fxHide]="hidden">
+    <mat-tab-group dynamicHeight="true" [ngClass]="{'d-none': hidden}">
       <mat-tab
         *ngFor="let category of visibleCategories; let i = index"
         [label]="categoryLabels[i]"
@@ -58,7 +58,14 @@ import { Subscription } from 'rxjs';
         </div>
       </mat-tab>
     </mat-tab-group>
-  `
+  `,
+  styles: [
+    `
+    .d-none{
+      display: none
+    }
+    `
+  ]
 })
 export class CategorizationTabLayoutRenderer
   extends JsonFormsBaseRenderer<Categorization>
diff --git a/packages/angular-material/src/layouts/group-layout.renderer.ts b/packages/angular-material/src/layouts/group-layout.renderer.ts
index e18b52d99..06866c4d5 100644
--- a/packages/angular-material/src/layouts/group-layout.renderer.ts
+++ b/packages/angular-material/src/layouts/group-layout.renderer.ts
@@ -30,13 +30,29 @@ import { JsonFormsAngularService } from '@jsonforms/angular';
 @Component({
   selector: 'GroupLayoutRenderer',
   template: `
-    <mat-card fxLayout="column" [fxHide]="hidden">
+    <mat-card [ngClass]="{'group-layout-col': true, 'd-none': hidden}">
       <mat-card-title class="mat-title">{{ label }}</mat-card-title>
-      <div *ngFor="let props of uischema | layoutChildrenRenderProps: schema: path; trackBy: trackElement" fxFlex>
+      <div *ngFor="let props of uischema | layoutChildrenRenderProps: schema: path; trackBy: trackElement" [ngClass]="'simple-flex-item'">
         <jsonforms-outlet [renderProps]="props"></jsonforms-outlet>
       </div>
     </mat-card>
   `,
+  styles: [
+    `
+    .d-none {
+      display: none;
+    }
+    .group-layout-col {
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+    }
+    .simple-flex-item {
+      flex: 1 1 0%;
+      box-sizing: border-box;
+    }
+    `
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class GroupLayoutRenderer extends LayoutRenderer<GroupLayout> {
diff --git a/packages/angular-material/src/layouts/horizontal-layout.renderer.ts b/packages/angular-material/src/layouts/horizontal-layout.renderer.ts
index 9a541e440..142f9c925 100644
--- a/packages/angular-material/src/layouts/horizontal-layout.renderer.ts
+++ b/packages/angular-material/src/layouts/horizontal-layout.renderer.ts
@@ -36,16 +36,32 @@ import { JsonFormsAngularService } from '@jsonforms/angular';
   selector: 'HorizontalLayoutRenderer',
   template: `
     <div
-      fxLayout="row wrap"
-      fxLayoutGap="16px"
-      [fxHide]="hidden"
-      fxLayoutAlign="center start"
+      [ngClass]="{'horizontal-layout-row': true, 'd-none': hidden}"
     >
-      <div *ngFor="let props of uischema | layoutChildrenRenderProps: schema: path; trackBy: trackElement" fxFlex>
+      <div *ngFor="let props of uischema | layoutChildrenRenderProps: schema: path; trackBy: trackElement" [ngClass]="'simple-flex-item'">
         <jsonforms-outlet [renderProps]="props"></jsonforms-outlet>
       </div>
     </div>
   `,
+  styles: [
+    `
+    .horizontal-layout-row {
+      flex-flow: row wrap;
+      box-sizing: border-box;
+      display: flex;
+      place-content: flex-start center;
+      align-items: flex-start;
+      gap: 1rem;
+    }
+    .d-none {
+      display: none;
+    }
+    .simple-flex-item {
+      flex: 1 1 0%;
+      box-sizing: border-box;
+    }
+    `
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class HorizontalLayoutRenderer extends LayoutRenderer<HorizontalLayout> {
diff --git a/packages/angular-material/src/layouts/vertical-layout.renderer.ts b/packages/angular-material/src/layouts/vertical-layout.renderer.ts
index 7d285476b..05ea0fc9c 100644
--- a/packages/angular-material/src/layouts/vertical-layout.renderer.ts
+++ b/packages/angular-material/src/layouts/vertical-layout.renderer.ts
@@ -35,12 +35,29 @@ import { JsonFormsAngularService } from '@jsonforms/angular';
 @Component({
   selector: 'VerticalLayoutRenderer',
   template: `
-    <div fxLayout="column" fxLayoutGap="16px" [fxHide]="hidden">
-      <div *ngFor="let props of uischema | layoutChildrenRenderProps: schema: path; trackBy: trackElement" fxFlex>
+    <div [ngClass]="{'horizontal-layout-row': true, 'd-none': hidden}">
+      <div *ngFor="let props of uischema | layoutChildrenRenderProps: schema: path; trackBy: trackElement" [ngClass]="'simple-flex-item'">
         <jsonforms-outlet [renderProps]="props"></jsonforms-outlet>
       </div>
     </div>
   `,
+  styles: [
+    `
+    .horizontal-layout-row {
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      gap: 1rem;
+    }
+    .d-none {
+      display: none;
+    }
+    .simple-flex-item {
+      flex: 1 1 0%;
+      box-sizing: border-box;
+    }
+    `
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class VerticalLayoutRenderer extends LayoutRenderer<VerticalLayout> {
diff --git a/packages/angular-material/src/other/label.renderer.ts b/packages/angular-material/src/other/label.renderer.ts
index 341c0ea4c..e6f5713cb 100644
--- a/packages/angular-material/src/other/label.renderer.ts
+++ b/packages/angular-material/src/other/label.renderer.ts
@@ -41,8 +41,15 @@ import { Subscription } from 'rxjs';
 @Component({
   selector: 'LabelRenderer',
   template: `
-    <label class="mat-title" fxFlex> {{ label }} </label>
-  `
+    <label class="mat-title" [ngClass]="'simple-flex-item'"> {{ label }} </label>
+  `,
+  styles: [
+    `.simple-flex-item {
+      flex: 1 1 0%;
+      box-sizing: border-box;
+    }
+    `
+  ]
 })
 export class LabelRenderer extends JsonFormsBaseRenderer<LabelElement> {
   label: string;