Skip to content

Commit c2836a5

Browse files
JBBianchilucas-koehler
JBBianchi
and
lucas-koehler
authored
Support Angular 16 and 17 (#2229)
This adds support for Angular 16 and 17 and drops support for any older version. * fix(angular-material): improved compatibility by removing angular flex layout * fix(angular-test): added broader compatibility with angular * fix(angular-material): fixed @angular-devkit/build-angular version * fix(angular-material): fixed tests by removing empty component styles. * fix(angular): updated to Angular 16 - readded angularCompilerOptions in tests tsconfig - removed empty imports array in tests - applied flex to divs only in group-layout renderer - removed html comment in range renderer * fix(angular-material): added padding on "mat cards" * fix(angular): Fix range control event binding * Update dependencies and restrict vue via pnpm override to ~3.3.13 Co-authored-by: Lucas Koehler <[email protected]>
1 parent a7d3268 commit c2836a5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+7692
-16325
lines changed

‎.vscode/settings.json

+6-1
Original file line numberDiff line numberDiff line change
@@ -49,5 +49,10 @@
4949
"**/node_modules": true,
5050
"**/lib": true
5151
},
52-
"typescript.tsdk": "node_modules/typescript/lib"
52+
"typescript.tsdk": "node_modules/typescript/lib",
53+
"[javascript][javascriptreact][typescript][typescriptreact][vue]": {
54+
"editor.codeActionsOnSave": {
55+
"source.fixAll.eslint": "explicit"
56+
}
57+
}
5358
}

‎package.json

+6
Original file line numberDiff line numberDiff line change
@@ -48,5 +48,11 @@
4848
"typescript": "4.2.3",
4949
"webpack": "^4.41.2",
5050
"webpack-merge": "^4.2.2"
51+
},
52+
"pnpm": {
53+
"overrides": {
54+
"vue": "~3.3.13",
55+
"@vue/compiler-sfc": "~3.3.13"
56+
}
5157
}
5258
}

‎packages/angular-material/example/main.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
2323
THE SOFTWARE.
2424
*/
25-
import 'core-js/es7/reflect';
25+
import 'core-js/es/reflect';
2626
import 'zone.js/dist/zone';
2727
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2828

‎packages/angular-material/package.json

+30-34
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
"typings": "./lib/esm/index.d.ts",
4040
"scripts": {
4141
"build": "ngc && ngc -p tsconfig.cjs.json",
42-
"build:examples-app": "ngc -p tsconfig.example.json && rollup -c rollup.example.config.js",
42+
"build:examples-app": "ngc -p tsconfig.example.json && rollup -c rollup.example.config.js --bundleConfigAsCjs",
4343
"dev": "pnpm run build:examples-app && npx http-server ./example/dist/ -c-1 -o",
4444
"clean": "rimraf lib coverage dist .nyc_output 2> /dev/null",
4545
"lint": "eslint .",
@@ -61,15 +61,14 @@
6161
]
6262
},
6363
"peerDependencies": {
64-
"@angular/animations": "^15.0.0",
65-
"@angular/cdk": "^15.0.0",
66-
"@angular/common": "^15.0.0",
67-
"@angular/core": "^15.0.0",
68-
"@angular/flex-layout": "^15.0.0-beta",
69-
"@angular/forms": "^15.0.0",
70-
"@angular/material": "^15.0.0",
71-
"@angular/platform-browser": "^15.0.0",
72-
"@angular/router": "^15.0.0",
64+
"@angular/animations": "^16.0.0 || ^17.0.0",
65+
"@angular/cdk": "^16.0.0 || ^17.0.0",
66+
"@angular/common": "^16.0.0 || ^17.0.0",
67+
"@angular/core": "^16.0.0 || ^17.0.0",
68+
"@angular/forms": "^16.0.0 || ^17.0.0",
69+
"@angular/material": "^16.0.0 || ^17.0.0",
70+
"@angular/platform-browser": "^16.0.0 || ^17.0.0",
71+
"@angular/router": "^16.0.0 || ^17.0.0",
7372
"@jsonforms/angular": "3.2.0-alpha.4",
7473
"@jsonforms/core": "3.2.0-alpha.4",
7574
"rxjs": "^6.6.0 || ^7.4.0"
@@ -79,32 +78,31 @@
7978
"lodash": "^4.17.21"
8079
},
8180
"devDependencies": {
82-
"@angular-devkit/build-angular": "~15.2.10",
83-
"@angular-eslint/eslint-plugin": "^15.0.0",
84-
"@angular-eslint/eslint-plugin-template": "^15.0.0",
85-
"@angular-eslint/schematics": "^15.0.0",
86-
"@angular-eslint/template-parser": "^15.0.0",
87-
"@angular/animations": "^15.0.0",
88-
"@angular/cdk": "^15.0.0",
89-
"@angular/common": "^15.0.0",
90-
"@angular/compiler": "^15.0.0",
91-
"@angular/compiler-cli": "^15.0.0",
92-
"@angular/core": "^15.0.0",
93-
"@angular/flex-layout": "^15.0.0-beta",
94-
"@angular/forms": "^15.0.0",
95-
"@angular/material": "^15.0.0",
96-
"@angular/platform-browser": "^15.0.0",
97-
"@angular/platform-browser-dynamic": "^15.0.0",
98-
"@angular/router": "^15.0.0",
81+
"@angular-devkit/build-angular": "^16.0.0",
82+
"@angular-eslint/eslint-plugin": "^16.0.0",
83+
"@angular-eslint/eslint-plugin-template": "^16.0.0",
84+
"@angular-eslint/schematics": "^16.0.0",
85+
"@angular-eslint/template-parser": "^16.0.0",
86+
"@angular/animations": "^16.0.0",
87+
"@angular/cdk": "^16.0.0",
88+
"@angular/common": "^16.0.0",
89+
"@angular/compiler": "^16.0.0",
90+
"@angular/compiler-cli": "^16.0.0",
91+
"@angular/core": "^16.0.0",
92+
"@angular/forms": "^16.0.0",
93+
"@angular/material": "^16.0.0",
94+
"@angular/platform-browser": "^16.0.0",
95+
"@angular/platform-browser-dynamic": "^16.0.0",
96+
"@angular/router": "^16.0.0",
9997
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.5",
10098
"@babel/plugin-proposal-optional-chaining": "^7.16.5",
10199
"@jsonforms/angular": "workspace:*",
102100
"@jsonforms/angular-test": "workspace:*",
103101
"@jsonforms/core": "workspace:*",
104102
"@jsonforms/examples": "workspace:*",
105-
"@ngtools/webpack": "^15.0.0",
103+
"@ngtools/webpack": "^16.0.0",
106104
"@rollup/plugin-commonjs": "^23.0.3",
107-
"@rollup/plugin-json": "^5.0.2",
105+
"@rollup/plugin-json": "^6.0.0",
108106
"@rollup/plugin-node-resolve": "^15.0.1",
109107
"@rollup/plugin-replace": "^5.0.1",
110108
"@types/jasmine": "~3.8.0",
@@ -129,25 +127,23 @@
129127
"karma-jasmine-html-reporter": "^1.7.0",
130128
"karma-sourcemap-loader": "^0.3.8",
131129
"karma-webpack": "^5.0.0",
132-
"ng-packagr": "^15.0.0",
130+
"ng-packagr": "^16.0.0",
133131
"null-loader": "^0.1.1",
134132
"nyc": "^15.1.0",
135133
"prettier": "^2.8.4",
136134
"protractor": "^7.0.0",
137135
"rimraf": "^3.0.2",
138-
"rollup": "^2.78.0",
139-
"rollup-plugin-cleanup": "^3.2.1",
136+
"rollup": "^3.0.0",
140137
"rollup-plugin-copy": "^3.4.0",
141138
"rollup-plugin-import-css": "^3.3.1",
142139
"rollup-plugin-typescript2": "^0.34.1",
143-
"rollup-plugin-visualizer": "^5.4.1",
144140
"rxjs": "^6.6.0",
145141
"ts-loader": "^6.2.1",
146142
"tslib": "^2.5.0",
147143
"typedoc": "~0.25.3",
148144
"typescript": "~4.9.5",
149145
"webpack": "^5.78.0",
150146
"yargs": "^17.7.2",
151-
"zone.js": "^0.11.4"
147+
"zone.js": "~0.13.0"
152148
}
153149
}

‎packages/angular-material/rollup.example.config.js

+3
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ const config = {
1616
format: 'iife',
1717
sourcemap: true,
1818
},
19+
// Disable treeshaking when generating bundles
20+
// see: https://github.com/angular/angular/pull/32069
21+
treeshake: false,
1922
plugins: [
2023
replace({
2124
'process.env.NODE_ENV': JSON.stringify('production'),

‎packages/angular-material/src/controls/autocomplete.renderer.ts

+13-3
Original file line numberDiff line numberDiff line change
@@ -59,16 +59,15 @@ import { map, startWith } from 'rxjs/operators';
5959
* <pre><code>
6060
* ...
6161
* imports: [JsonFormsAngularMaterialModule, MatAutocompleteModule],
62-
* declarations: [AutocompleteControlRenderer],
63-
* entryComponents: [AutocompleteControlRenderer]
62+
* declarations: [AutocompleteControlRenderer]
6463
* ...
6564
* </code></pre>
6665
*
6766
*/
6867
@Component({
6968
selector: 'AutocompleteControlRenderer',
7069
template: `
71-
<mat-form-field fxFlex [fxHide]="hidden">
70+
<mat-form-field [ngStyle]="{ display: hidden ? 'none' : '' }">
7271
<mat-label>{{ label }}</mat-label>
7372
<input
7473
matInput
@@ -99,6 +98,17 @@ import { map, startWith } from 'rxjs/operators';
9998
<mat-error>{{ error }}</mat-error>
10099
</mat-form-field>
101100
`,
101+
styles: [
102+
`
103+
:host {
104+
display: flex;
105+
flex-direction: row;
106+
}
107+
mat-form-field {
108+
flex: 1 1 auto;
109+
}
110+
`,
111+
],
102112
changeDetection: ChangeDetectionStrategy.OnPush,
103113
})
104114
export class AutocompleteControlRenderer

‎packages/angular-material/src/controls/boolean.renderer.ts

+16-6
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,7 @@ import { isBooleanControl, RankedTester, rankWith } from '@jsonforms/core';
3434
@Component({
3535
selector: 'BooleanControlRenderer',
3636
template: `
37-
<div
38-
[fxHide]="hidden"
39-
fxLayout="column"
40-
fxLayoutAlign="center"
41-
style="height:100%"
42-
>
37+
<div [ngStyle]="{ display: hidden ? 'none' : '' }" class="boolean-control">
4338
<mat-checkbox
4439
(change)="onChange($event)"
4540
[checked]="isChecked()"
@@ -54,6 +49,21 @@ import { isBooleanControl, RankedTester, rankWith } from '@jsonforms/core';
5449
<mat-error class="mat-caption">{{ error }}</mat-error>
5550
</div>
5651
`,
52+
styles: [
53+
`
54+
:host {
55+
display: flex;
56+
flex-direction: row;
57+
}
58+
.boolean-control {
59+
flex: 1 1 auto;
60+
display: flex;
61+
flex-direction: column;
62+
justify-content: center;
63+
height: 100%;
64+
}
65+
`,
66+
],
5767
changeDetection: ChangeDetectionStrategy.OnPush,
5868
})
5969
export class BooleanControlRenderer extends JsonFormsControl {

‎packages/angular-material/src/controls/date.renderer.ts

+12-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
2929
@Component({
3030
selector: 'DateControlRenderer',
3131
template: `
32-
<mat-form-field fxFlex [fxHide]="hidden">
32+
<mat-form-field [ngStyle]="{ display: hidden ? 'none' : '' }">
3333
<mat-label>{{ label }}</mat-label>
3434
<input
3535
matInput
@@ -51,6 +51,17 @@ import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
5151
<mat-error>{{ error }}</mat-error>
5252
</mat-form-field>
5353
`,
54+
styles: [
55+
`
56+
:host {
57+
display: flex;
58+
flex-direction: row;
59+
}
60+
mat-form-field {
61+
flex: 1 1 auto;
62+
}
63+
`,
64+
],
5465
changeDetection: ChangeDetectionStrategy.OnPush,
5566
})
5667
export class DateControlRenderer extends JsonFormsControl {

‎packages/angular-material/src/controls/number.renderer.ts

+12-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ import merge from 'lodash/merge';
3737
@Component({
3838
selector: 'NumberControlRenderer',
3939
template: `
40-
<mat-form-field fxFlex [fxHide]="hidden">
40+
<mat-form-field [ngStyle]="{ display: hidden ? 'none' : '' }">
4141
<mat-label>{{ label }}</mat-label>
4242
<input
4343
matInput
@@ -57,6 +57,17 @@ import merge from 'lodash/merge';
5757
<mat-error>{{ error }}</mat-error>
5858
</mat-form-field>
5959
`,
60+
styles: [
61+
`
62+
:host {
63+
display: flex;
64+
flex-direction: row;
65+
}
66+
mat-form-field {
67+
flex: 1 1 auto;
68+
}
69+
`,
70+
],
6071
changeDetection: ChangeDetectionStrategy.OnPush,
6172
})
6273
export class NumberControlRenderer extends JsonFormsControl {

‎packages/angular-material/src/controls/range.renderer.ts

+16-3
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ import { isRangeControl, RankedTester, rankWith } from '@jsonforms/core';
3333
@Component({
3434
selector: 'RangeControlRenderer',
3535
template: `
36-
<div fxFlex fxLayout="column" [fxHide]="hidden">
36+
<div [ngStyle]="{ display: hidden ? 'none' : '' }" class="range-control">
3737
<label class="mat-caption" style="color:rgba(0,0,0,.54)">{{
3838
label
3939
}}</label>
@@ -47,14 +47,27 @@ import { isRangeControl, RankedTester, rankWith } from '@jsonforms/core';
4747
showTickMarks
4848
#ngSlider
4949
>
50-
<input matSliderThumb />
50+
<input matSliderThumb (valueChange)="onChange($event)" />
5151
</mat-slider>
5252
<mat-hint class="mat-caption" *ngIf="shouldShowUnfocusedDescription()">{{
5353
description
5454
}}</mat-hint>
5555
<mat-error class="mat-caption">{{ error }}</mat-error>
5656
</div>
5757
`,
58+
styles: [
59+
`
60+
:host {
61+
display: flex;
62+
flex-direction: row;
63+
}
64+
.range-control {
65+
flex: 1 1 auto;
66+
display: flex;
67+
flex-direction: column;
68+
}
69+
`,
70+
],
5871
changeDetection: ChangeDetectionStrategy.OnPush,
5972
})
6073
export class RangeControlRenderer extends JsonFormsControl {
@@ -69,7 +82,7 @@ export class RangeControlRenderer extends JsonFormsControl {
6982
) {
7083
super(jsonformsService);
7184
}
72-
getEventValue = (event: any) => Number(event.value);
85+
getEventValue = (event: number) => Number(event);
7386
mapAdditionalProps() {
7487
if (this.scopedSchema) {
7588
this.min = this.scopedSchema.minimum;

‎packages/angular-material/src/controls/text.renderer.ts

+12-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import { isStringControl, RankedTester, rankWith } from '@jsonforms/core';
2929
@Component({
3030
selector: 'TextControlRenderer',
3131
template: `
32-
<mat-form-field fxFlex [fxHide]="hidden">
32+
<mat-form-field [ngStyle]="{ display: hidden ? 'none' : '' }">
3333
<mat-label>{{ label }}</mat-label>
3434
<input
3535
matInput
@@ -46,6 +46,17 @@ import { isStringControl, RankedTester, rankWith } from '@jsonforms/core';
4646
<mat-error>{{ error }}</mat-error>
4747
</mat-form-field>
4848
`,
49+
styles: [
50+
`
51+
:host {
52+
display: flex;
53+
flex-direction: row;
54+
}
55+
mat-form-field {
56+
flex: 1 1 auto;
57+
}
58+
`,
59+
],
4960
changeDetection: ChangeDetectionStrategy.OnPush,
5061
})
5162
export class TextControlRenderer extends JsonFormsControl {

‎packages/angular-material/src/controls/textarea.renderer.ts

+12-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import { isMultiLineControl, RankedTester, rankWith } from '@jsonforms/core';
2929
@Component({
3030
selector: 'TextAreaRenderer',
3131
template: `
32-
<mat-form-field fxFlex [fxHide]="hidden">
32+
<mat-form-field [ngStyle]="{ display: hidden ? 'none' : '' }">
3333
<mat-label>{{ label }}</mat-label>
3434
<textarea
3535
matInput
@@ -45,6 +45,17 @@ import { isMultiLineControl, RankedTester, rankWith } from '@jsonforms/core';
4545
<mat-error>{{ error }}</mat-error>
4646
</mat-form-field>
4747
`,
48+
styles: [
49+
`
50+
:host {
51+
display: flex;
52+
flex-direction: row;
53+
}
54+
mat-form-field {
55+
flex: 1 1 auto;
56+
}
57+
`,
58+
],
4859
changeDetection: ChangeDetectionStrategy.OnPush,
4960
})
5061
export class TextAreaRenderer extends JsonFormsControl {

‎packages/angular-material/src/controls/toggle.renderer.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ import {
3939
@Component({
4040
selector: 'ToggleControlRenderer',
4141
template: `
42-
<div [fxHide]="hidden">
42+
<div [ngStyle]="{ display: hidden ? 'none' : '' }">
4343
<mat-slide-toggle
4444
(change)="onChange($event)"
4545
[checked]="isChecked()"

0 commit comments

Comments
 (0)