removed flex layout dependency (replaced with css)

eclipsesource · Apr 13, 2023 · c8027b7 · c8027b7
1 parent c8a681e
commit c8027b7
Show file tree

Hide file tree

Showing 15 changed files with 187 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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> {