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/package.json b/package.json index fb619c5771..5797162770 100644 --- a/package.json +++ b/package.json @@ -48,5 +48,11 @@ "typescript": "4.2.3", "webpack": "^4.41.2", "webpack-merge": "^4.2.2" + }, + "pnpm": { + "overrides": { + "vue": "~3.3.13", + "@vue/compiler-sfc": "~3.3.13" + } } } diff --git a/packages/angular-material/example/main.ts b/packages/angular-material/example/main.ts index b052f4d20c..bdb3faa2d9 100644 --- a/packages/angular-material/example/main.ts +++ b/packages/angular-material/example/main.ts @@ -22,7 +22,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ -import 'core-js/es7/reflect'; +import 'core-js/es/reflect'; import 'zone.js/dist/zone'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; diff --git a/packages/angular-material/package.json b/packages/angular-material/package.json index 7054a0a1fa..dedb454242 100644 --- a/packages/angular-material/package.json +++ b/packages/angular-material/package.json @@ -39,7 +39,7 @@ "typings": "./lib/esm/index.d.ts", "scripts": { "build": "ngc && ngc -p tsconfig.cjs.json", - "build:examples-app": "ngc -p tsconfig.example.json && rollup -c rollup.example.config.js", + "build:examples-app": "ngc -p tsconfig.example.json && rollup -c rollup.example.config.js --bundleConfigAsCjs", "dev": "pnpm run build:examples-app && npx http-server ./example/dist/ -c-1 -o", "clean": "rimraf lib coverage dist .nyc_output 2> /dev/null", "lint": "eslint .", @@ -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": "^16.0.0 || ^17.0.0", + "@angular/cdk": "^16.0.0 || ^17.0.0", + "@angular/common": "^16.0.0 || ^17.0.0", + "@angular/core": "^16.0.0 || ^17.0.0", + "@angular/forms": "^16.0.0 || ^17.0.0", + "@angular/material": "^16.0.0 || ^17.0.0", + "@angular/platform-browser": "^16.0.0 || ^17.0.0", + "@angular/router": "^16.0.0 || ^17.0.0", "@jsonforms/angular": "3.2.0-alpha.4", "@jsonforms/core": "3.2.0-alpha.4", "rxjs": "^6.6.0 || ^7.4.0" @@ -79,32 +78,31 @@ "lodash": "^4.17.21" }, "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-devkit/build-angular": "^16.0.0", + "@angular-eslint/eslint-plugin": "^16.0.0", + "@angular-eslint/eslint-plugin-template": "^16.0.0", + "@angular-eslint/schematics": "^16.0.0", + "@angular-eslint/template-parser": "^16.0.0", + "@angular/animations": "^16.0.0", + "@angular/cdk": "^16.0.0", + "@angular/common": "^16.0.0", + "@angular/compiler": "^16.0.0", + "@angular/compiler-cli": "^16.0.0", + "@angular/core": "^16.0.0", + "@angular/forms": "^16.0.0", + "@angular/material": "^16.0.0", + "@angular/platform-browser": "^16.0.0", + "@angular/platform-browser-dynamic": "^16.0.0", + "@angular/router": "^16.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": "^16.0.0", "@rollup/plugin-commonjs": "^23.0.3", - "@rollup/plugin-json": "^5.0.2", + "@rollup/plugin-json": "^6.0.0", "@rollup/plugin-node-resolve": "^15.0.1", "@rollup/plugin-replace": "^5.0.1", "@types/jasmine": "~3.8.0", @@ -129,18 +127,16 @@ "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": "^16.0.0", "null-loader": "^0.1.1", "nyc": "^15.1.0", "prettier": "^2.8.4", "protractor": "^7.0.0", "rimraf": "^3.0.2", - "rollup": "^2.78.0", - "rollup-plugin-cleanup": "^3.2.1", + "rollup": "^3.0.0", "rollup-plugin-copy": "^3.4.0", "rollup-plugin-import-css": "^3.3.1", "rollup-plugin-typescript2": "^0.34.1", - "rollup-plugin-visualizer": "^5.4.1", "rxjs": "^6.6.0", "ts-loader": "^6.2.1", "tslib": "^2.5.0", @@ -148,6 +144,6 @@ "typescript": "~4.9.5", "webpack": "^5.78.0", "yargs": "^17.7.2", - "zone.js": "^0.11.4" + "zone.js": "~0.13.0" } } diff --git a/packages/angular-material/rollup.example.config.js b/packages/angular-material/rollup.example.config.js index 0a745fa032..8452a1d3ea 100644 --- a/packages/angular-material/rollup.example.config.js +++ b/packages/angular-material/rollup.example.config.js @@ -16,6 +16,9 @@ const config = { format: 'iife', sourcemap: true, }, + // Disable treeshaking when generating bundles + // see: https://github.com/angular/angular/pull/32069 + treeshake: false, plugins: [ replace({ 'process.env.NODE_ENV': JSON.stringify('production'), diff --git a/packages/angular-material/src/controls/autocomplete.renderer.ts b/packages/angular-material/src/controls/autocomplete.renderer.ts index b8db63089e..32742f9b0f 100644 --- a/packages/angular-material/src/controls/autocomplete.renderer.ts +++ b/packages/angular-material/src/controls/autocomplete.renderer.ts @@ -59,8 +59,7 @@ import { map, startWith } from 'rxjs/operators'; * 

  * ...
  * imports: [JsonFormsAngularMaterialModule, MatAutocompleteModule],
- * declarations: [AutocompleteControlRenderer],
- * entryComponents: [AutocompleteControlRenderer]
+ * declarations: [AutocompleteControlRenderer]
  * ...
  *
* @@ -68,7 +67,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..38030b8768 100644 --- a/packages/angular-material/src/controls/range.renderer.ts +++ b/packages/angular-material/src/controls/range.renderer.ts @@ -33,7 +33,7 @@ import { isRangeControl, RankedTester, rankWith } from '@jsonforms/core'; @Component({ selector: 'RangeControlRenderer', template: ` -
+
@@ -47,7 +47,7 @@ import { isRangeControl, RankedTester, rankWith } from '@jsonforms/core'; showTickMarks #ngSlider > - + {{ description @@ -55,6 +55,19 @@ import { isRangeControl, RankedTester, rankWith } from '@jsonforms/core'; {{ 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 { @@ -69,7 +82,7 @@ export class RangeControlRenderer extends JsonFormsControl { ) { super(jsonformsService); } - getEventValue = (event: any) => Number(event.value); + getEventValue = (event: number) => Number(event); mapAdditionalProps() { if (this.scopedSchema) { this.min = this.scopedSchema.minimum; 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 }}