From 430fbec6d99d2c89bf4c39c50db5cfd345e66711 Mon Sep 17 00:00:00 2001 From: JBBianchi Date: Thu, 14 Dec 2023 16:47:57 +0100 Subject: [PATCH 01/15] fix(angular-material): improved compatibility by removing angular flex layout --- .vscode/settings.json | 7 +- packages/angular-material/package.json | 52 +- .../src/controls/autocomplete.renderer.ts | 13 +- .../src/controls/boolean.renderer.ts | 22 +- .../src/controls/date.renderer.ts | 13 +- .../src/controls/number.renderer.ts | 13 +- .../src/controls/range.renderer.ts | 16 +- .../src/controls/text.renderer.ts | 13 +- .../src/controls/textarea.renderer.ts | 13 +- .../src/controls/toggle.renderer.ts | 3 +- .../src/layouts/array-layout.renderer.ts | 28 +- .../layouts/categorization-layout.renderer.ts | 6 +- .../src/layouts/group-layout.renderer.ts | 19 +- .../src/layouts/horizontal-layout.renderer.ts | 21 +- .../src/layouts/vertical-layout.renderer.ts | 15 +- packages/angular-material/src/module.ts | 3 - .../src/other/label.renderer.ts | 9 +- .../src/other/master-detail/master.ts | 8 +- .../test/autocomplete-control.spec.ts | 2 - .../test/boolean-control.spec.ts | 3 +- .../test/categorization-tab-layout.spec.ts | 2 - .../test/date-control.spec.ts | 2 - .../test/group-layout.spec.ts | 3 +- .../test/horizontal-layout.spec.ts | 3 +- .../test/master-detail.spec.ts | 2 - .../test/number-control.spec.ts | 2 - .../test/object-control.spec.ts | 2 - .../test/range-control.spec.ts | 2 - .../test/table-control.spec.ts | 2 - .../angular-material/test/text-area.spec.ts | 2 - .../test/text-control.spec.ts | 2 - .../test/toggle-control.spec.ts | 3 +- .../test/vertical-layout.spec.ts | 3 +- packages/angular-test/src/boolean.ts | 1 + packages/angular-test/src/number.ts | 1 + packages/angular-test/src/range.ts | 1 + packages/angular-test/src/text.ts | 1 + packages/angular/package.json | 22 +- pnpm-lock.yaml | 1565 ++++++++--------- 39 files changed, 998 insertions(+), 902 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 51cf0bd8a2..6afe27a47f 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -49,5 +49,10 @@ "**/node_modules": true, "**/lib": true }, - "typescript.tsdk": "node_modules/typescript/lib" + "typescript.tsdk": "node_modules/typescript/lib", + "[javascript][javascriptreact][typescript][typescriptreact][vue]": { + "editor.codeActionsOnSave": { + "source.fixAll.eslint": "explicit" + } + } } diff --git a/packages/angular-material/package.json b/packages/angular-material/package.json index 7e4fde8c14..0e03b7231e 100644 --- a/packages/angular-material/package.json +++ b/packages/angular-material/package.json @@ -61,15 +61,14 @@ ] }, "peerDependencies": { - "@angular/animations": "^15.0.0", - "@angular/cdk": "^15.0.0", - "@angular/common": "^15.0.0", - "@angular/core": "^15.0.0", - "@angular/flex-layout": "^15.0.0-beta", - "@angular/forms": "^15.0.0", - "@angular/material": "^15.0.0", - "@angular/platform-browser": "^15.0.0", - "@angular/router": "^15.0.0", + "@angular/animations": "^15.0.0 || ^16.0.0 || ^17.0.0", + "@angular/cdk": "^15.0.0 || ^16.0.0 || ^17.0.0", + "@angular/common": "^15.0.0 || ^16.0.0 || ^17.0.0", + "@angular/core": "^15.0.0 || ^16.0.0 || ^17.0.0", + "@angular/forms": "^15.0.0 || ^16.0.0 || ^17.0.0", + "@angular/material": "^15.0.0 || ^16.0.0 || ^17.0.0", + "@angular/platform-browser": "^15.0.0 || ^16.0.0 || ^17.0.0", + "@angular/router": "^15.0.0 || ^16.0.0 || ^17.0.0", "@jsonforms/angular": "3.2.0-alpha.3", "@jsonforms/angular-test": "^3.2.0-alpha.3", "@jsonforms/core": "3.2.0-alpha.3", @@ -81,29 +80,28 @@ }, "devDependencies": { "@angular-devkit/build-angular": "~15.2.10", - "@angular-eslint/eslint-plugin": "^15.0.0", - "@angular-eslint/eslint-plugin-template": "^15.0.0", - "@angular-eslint/schematics": "^15.0.0", - "@angular-eslint/template-parser": "^15.0.0", - "@angular/animations": "^15.0.0", - "@angular/cdk": "^15.0.0", - "@angular/common": "^15.0.0", - "@angular/compiler": "^15.0.0", - "@angular/compiler-cli": "^15.0.0", - "@angular/core": "^15.0.0", - "@angular/flex-layout": "^15.0.0-beta", - "@angular/forms": "^15.0.0", - "@angular/material": "^15.0.0", - "@angular/platform-browser": "^15.0.0", - "@angular/platform-browser-dynamic": "^15.0.0", - "@angular/router": "^15.0.0", + "@angular-eslint/eslint-plugin": "^15.0.0 || ^16.0.0 || ^17.0.0", + "@angular-eslint/eslint-plugin-template": "^15.0.0 || ^16.0.0 || ^17.0.0", + "@angular-eslint/schematics": "^15.0.0 || ^16.0.0 || ^17.0.0", + "@angular-eslint/template-parser": "^15.0.0 || ^16.0.0 || ^17.0.0", + "@angular/animations": "^15.0.0 || ^16.0.0 || ^17.0.0", + "@angular/cdk": "^15.0.0 || ^16.0.0 || ^17.0.0", + "@angular/common": "^15.0.0 || ^16.0.0 || ^17.0.0", + "@angular/compiler": "^15.0.0 || ^16.0.0 || ^17.0.0", + "@angular/compiler-cli": "^15.0.0 || ^16.0.0 || ^17.0.0", + "@angular/core": "^15.0.0 || ^16.0.0 || ^17.0.0", + "@angular/forms": "^15.0.0 || ^16.0.0 || ^17.0.0", + "@angular/material": "^15.0.0 || ^16.0.0 || ^17.0.0", + "@angular/platform-browser": "^15.0.0 || ^16.0.0 || ^17.0.0", + "@angular/platform-browser-dynamic": "^15.0.0 || ^16.0.0 || ^17.0.0", + "@angular/router": "^15.0.0 || ^16.0.0 || ^17.0.0", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.5", "@babel/plugin-proposal-optional-chaining": "^7.16.5", "@jsonforms/angular": "workspace:*", "@jsonforms/angular-test": "workspace:*", "@jsonforms/core": "workspace:*", "@jsonforms/examples": "workspace:*", - "@ngtools/webpack": "^15.0.0", + "@ngtools/webpack": "^15.0.0 || ^16.0.0 || ^17.0.0", "@rollup/plugin-commonjs": "^23.0.3", "@rollup/plugin-json": "^5.0.2", "@rollup/plugin-node-resolve": "^15.0.1", @@ -130,7 +128,7 @@ "karma-jasmine-html-reporter": "^1.7.0", "karma-sourcemap-loader": "^0.3.8", "karma-webpack": "^5.0.0", - "ng-packagr": "^15.0.0", + "ng-packagr": "^15.0.0 || ^16.0.0 || ^17.0.0", "null-loader": "^0.1.1", "nyc": "^15.1.0", "prettier": "^2.8.4", diff --git a/packages/angular-material/src/controls/autocomplete.renderer.ts b/packages/angular-material/src/controls/autocomplete.renderer.ts index b8db63089e..a1b3dfd2a6 100644 --- a/packages/angular-material/src/controls/autocomplete.renderer.ts +++ b/packages/angular-material/src/controls/autocomplete.renderer.ts @@ -68,7 +68,7 @@ import { map, startWith } from 'rxjs/operators'; @Component({ selector: 'AutocompleteControlRenderer', template: ` - + {{ label }} {{ error }} `, + styles: [ + ` + :host { + display: flex; + flex-direction: row; + } + mat-form-field { + flex: 1 1 auto; + } + `, + ], changeDetection: ChangeDetectionStrategy.OnPush, }) export class AutocompleteControlRenderer diff --git a/packages/angular-material/src/controls/boolean.renderer.ts b/packages/angular-material/src/controls/boolean.renderer.ts index da81a68b2d..f9e9e770e2 100644 --- a/packages/angular-material/src/controls/boolean.renderer.ts +++ b/packages/angular-material/src/controls/boolean.renderer.ts @@ -34,12 +34,7 @@ import { isBooleanControl, RankedTester, rankWith } from '@jsonforms/core'; @Component({ selector: 'BooleanControlRenderer', template: ` -
+
{{ error }}
`, + styles: [ + ` + :host { + display: flex; + flex-direction: row; + } + .boolean-control { + flex: 1 1 auto; + 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 ea708aa9b6..3f84084969 100644 --- a/packages/angular-material/src/controls/date.renderer.ts +++ b/packages/angular-material/src/controls/date.renderer.ts @@ -29,7 +29,7 @@ import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular'; @Component({ selector: 'DateControlRenderer', template: ` - + {{ label }} {{ error }} `, + styles: [ + ` + :host { + display: flex; + flex-direction: row; + } + mat-form-field { + flex: 1 1 auto; + } + `, + ], 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 6efca50016..829b9c347d 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: ` - + {{ label }} {{ error }} `, + styles: [ + ` + :host { + display: flex; + flex-direction: row; + } + mat-form-field { + flex: 1 1 auto; + } + `, + ], 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 c55e08e206..fc30b1c462 100644 --- a/packages/angular-material/src/controls/range.renderer.ts +++ b/packages/angular-material/src/controls/range.renderer.ts @@ -33,10 +33,11 @@ import { isRangeControl, RankedTester, rankWith } from '@jsonforms/core'; @Component({ selector: 'RangeControlRenderer', template: ` -
+
+ {{ error }}
`, + styles: [ + ` + :host { + display: flex; + flex-direction: row; + } + .range-control { + flex: 1 1 auto; + display: flex; + flex-direction: column; + } + `, + ], 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 72a6335a43..f6c0ae5fa6 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: ` - + {{ label }} {{ error }} `, + styles: [ + ` + :host { + display: flex; + flex-direction: row; + } + mat-form-field { + flex: 1 1 auto; + } + `, + ], 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 ae69996066..7816d6700c 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: ` - + {{ label }}