Merge branch 'master' into preserve-edit-data

Author: kchobantonov

.prettierignore

@@ -1 +1,2 @@
-pnpm-lock.yaml
+pnpm-lock.yaml
+/.nx/workspace-data

MIGRATION.md

@@ -1,5 +1,13 @@
 # Migration guide
 
+## Migrating to JSON Forms 3.7
+
+### Angular support now targets Angular 19 to 21
+
+When using JSON Forms 3.7, your Angular application now needs to target Angular 19, 20 or 21.
+
+Use JSON Forms 3.6 if you need to stay on Angular 18.
+
 ## Migrating to JSON Forms 3.6
 
 ### UI schema type changes

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.7.0-alpha.2",
+  "version": "3.7.0",
   "npmClient": "pnpm",
-  "useWorkspaces": true
+  "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }

package.json

@@ -4,7 +4,7 @@
     "node": "^22",
     "pnpm": "^10.4.1"
   },
-  "packageManager": "pnpm@10.14.0+sha512.ad27a79641b49c3e481a16a805baa71817a04bbe06a38d17e60e2eaee83f6a146c6a688125f5792e48dd5ba30e7da52a5cda4c3992b9ccf333f9ce223af84748",
+  "packageManager": "pnpm@10.22.0+sha512.bf049efe995b28f527fd2b41ae0474ce29186f7edcb3bf545087bd61fbbebb2bf75362d1307fda09c2d288e1e499787ac12d4fcb617a974718a6051f2eee741c",
   "scripts": {
     "lerna": "lerna",
     "preparePublish": "git clean -dfx && pnpm i --frozen-lockfile && pnpm run clean && pnpm run build && pnpm run doc && pnpm run test",
@@ -21,23 +21,20 @@
     "build:examples-app": "lerna run build:examples-app && node packages/examples-app/prepare-examples-app.js"
   },
   "devDependencies": {
-    "@angular/core": "^18.0.0",
-    "@angular/cli": "^18.0.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.5",
     "@babel/plugin-proposal-optional-chaining": "^7.16.5",
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
-    "@types/jest": "^27.4.1",
     "@types/lodash": "^4.14.149",
     "ajv": "^8.6.1",
     "ajv-formats": "^2.1.0",
     "babel-loader": "^8.0.6",
     "core-js": "^3.9.1",
     "coveralls": "^3.0.9",
-    "cross-env": "^7.0.2",
+    "cross-env": "^10.1.0",
     "css-loader": "^3.2.0",
     "istanbul-lib-coverage": "^3.2.0",
     "lcov-result-merger": "^3.1.0",
-    "lerna": "^6.6.2",
+    "lerna": "^9.0.1",
     "nan": "^2.14.2",
     "nyc": "^15.1.0",
     "prettier": "^2.8.4",

packages/angular-material/.eslintrc.js

@@ -35,19 +35,19 @@ module.exports = {
     ],
     // workaround for
     // https://github.com/import-js/eslint-plugin-import/issues/1810:
-    "import/no-unresolved": [
-      "error",
+    'import/no-unresolved': [
+      'error',
       {
         ignore: [
-          "@angular/cdk/.*",
-          "@angular/core/.*",
-          "@angular/material/.*",
-          "@angular/platform-browser/.*",
-          "@angular/platform-browser-dynamic/.*",
-          "core-js/es7/.*",
-          "zone.js/.*",
-        ] 
-      }
+          '@angular/cdk/.*',
+          '@angular/core/.*',
+          '@angular/material/.*',
+          '@angular/platform-browser/.*',
+          '@angular/platform-browser-dynamic/.*',
+          'core-js/es7/.*',
+          'zone.js/.*',
+        ],
+      },
     ],
   },
 };

packages/angular-material/angular.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "../../node_modules/@angular/cli/lib/config/schema.json",
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "newProjectRoot": ".",
   "projects": {
@@ -20,28 +20,23 @@
             "outputPath": "example/dist/",
             "index": "example/index.html",
             "main": "example/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.example.json",
             "inlineStyleLanguage": "scss",
             "assets": [],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
             ],
             "scripts": [],
-            "allowedCommonJsDependencies": [
-              "lodash",
-              "hammerjs"
-            ],
+            "allowedCommonJsDependencies": ["lodash", "hammerjs"],
             "optimization": false,
             "buildOptimizer": false
           }
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-           "buildTarget": "example:build"
+            "buildTarget": "example:build"
           }
         }
       }
@@ -72,10 +67,7 @@
           "options": {
             "karmaConfig": "karma.conf.js",
             "tsConfig": "tsconfig.spec.json",
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ]
+            "polyfills": ["zone.js", "zone.js/testing"]
           }
         }
       }

packages/angular-material/example/app/app.component.ts

@@ -23,6 +23,8 @@
   THE SOFTWARE.
 */
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { JsonFormsModule } from '@jsonforms/angular';
 import { ExampleDescription, getExamples } from '@jsonforms/examples';
 import {
   JsonFormsI18nState,
@@ -87,7 +89,7 @@ const itemTester: UISchemaTester = (_schema, schemaPath, _path) => {
       [readonly]="readonly"
     ></jsonforms>
   `,
-  standalone: false,
+  imports: [CommonModule, JsonFormsModule],
 })
 export class AppComponent {
   readonly renderers = angularMaterialRenderers;

packages/angular-material/example/app/app.module.ts

@@ -29,11 +29,11 @@ import { AppComponent } from './app.component';
 import { JsonFormsAngularMaterialModule } from '../../src/library';
 
 @NgModule({
-  declarations: [AppComponent],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     JsonFormsAngularMaterialModule,
+    AppComponent,
   ],
   bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],

packages/angular-material/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsonforms/angular-material",
-  "version": "3.7.0-alpha.2",
+  "version": "3.7.0",
   "description": "Material Renderer Set for Angular module of JSON Forms",
   "repository": {
     "type": "git",
@@ -64,16 +64,16 @@
     ]
   },
   "peerDependencies": {
-    "@angular/animations": "^18.0.0 || ^19.0.0 || ^20.0.0",
-    "@angular/cdk": "^18.0.0 || ^19.0.0 || ^20.0.0",
-    "@angular/common": "^18.0.0 || ^19.0.0 || ^20.0.0",
-    "@angular/core": "^18.0.0 || ^19.0.0 || ^20.0.0",
-    "@angular/forms": "^18.0.0 || ^19.0.0 || ^20.0.0",
-    "@angular/material": "^18.0.0 || ^19.0.0 || ^20.0.0",
-    "@angular/platform-browser": "^18.0.0 || ^19.0.0 || ^20.0.0",
-    "@angular/router": "^18.0.0 || ^19.0.0 || ^20.0.0",
-    "@jsonforms/angular": "3.7.0-alpha.2",
-    "@jsonforms/core": "3.7.0-alpha.2",
+    "@angular/animations": "^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/cdk": "^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/common": "^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/core": "^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/forms": "^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/material": "^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/platform-browser": "^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/router": "^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@jsonforms/angular": "3.7.0",
+    "@jsonforms/core": "3.7.0",
     "dayjs": "^1.11.10",
     "rxjs": "^6.6.0 || ^7.4.0"
   },
@@ -82,29 +82,30 @@
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.0.0",
-    "@angular-devkit/core": "^18.0.0",
-    "@angular-eslint/eslint-plugin": "^18.0.0",
-    "@angular-eslint/eslint-plugin-template": "^18.0.0",
-    "@angular-eslint/schematics": "^18.0.0",
-    "@angular-eslint/template-parser": "^18.0.0",
-    "@angular/animations": "^18.0.0",
-    "@angular/cdk": "^18.0.0",
-    "@angular/common": "^18.0.0",
-    "@angular/compiler": "^18.0.0",
-    "@angular/compiler-cli": "^18.0.0",
-    "@angular/core": "^18.0.0",
-    "@angular/forms": "^18.0.0",
-    "@angular/material": "^18.0.0",
-    "@angular/platform-browser": "^18.0.0",
-    "@angular/platform-browser-dynamic": "^18.0.0",
-    "@angular/router": "^18.0.0",
+    "@angular-devkit/build-angular": "^19.0.0",
+    "@angular-devkit/core": "^19.0.0",
+    "@angular-eslint/eslint-plugin": "^19.0.0",
+    "@angular-eslint/eslint-plugin-template": "^19.0.0",
+    "@angular-eslint/schematics": "^19.0.0",
+    "@angular-eslint/template-parser": "^19.0.0",
+    "@angular/animations": "^19.0.0",
+    "@angular/cdk": "^19.0.0",
+    "@angular/cli": "^19.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/compiler-cli": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/forms": "^19.0.0",
+    "@angular/material": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "@angular/platform-browser-dynamic": "^19.0.0",
+    "@angular/router": "^19.0.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.5",
     "@babel/plugin-proposal-optional-chaining": "^7.16.5",
     "@jsonforms/angular": "workspace:*",
     "@jsonforms/core": "workspace:*",
     "@jsonforms/examples": "workspace:*",
-    "@ngtools/webpack": "^18.0.0",
+    "@ngtools/webpack": "^19.0.0",
     "@types/jasmine": "~3.8.0",
     "@types/lodash": "4.14.149",
     "@types/node": "^22.13.8",
@@ -128,19 +129,19 @@
     "karma-jasmine-html-reporter": "^1.7.0",
     "karma-sourcemap-loader": "^0.3.8",
     "karma-webpack": "^5.0.0",
-    "ng-packagr": "^18.0.0",
+    "ng-packagr": "^19.0.0",
     "null-loader": "^0.1.1",
     "nyc": "^15.1.0",
     "prettier": "^2.8.4",
     "protractor": "^7.0.0",
-    "rimraf": "^3.0.2",
+    "rimraf": "^6.1.0",
     "rxjs": "^6.6.0",
     "ts-loader": "^9.5.1",
     "tslib": "^2.5.0",
     "typedoc": "~0.25.3",
     "typescript": "~5.5.0",
     "webpack": "^5.78.0",
     "yargs": "^17.7.2",
-    "zone.js": "~0.14.10"
+    "zone.js": "~0.15.0"
   }
 }

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

@@ -41,6 +41,11 @@ import {
 } from '@jsonforms/core';
 import type { Observable } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 
 /**
  * To use this component you will need to add your own tester:
@@ -110,7 +115,13 @@ import { map, startWith } from 'rxjs/operators';
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatAutocompleteModule,
+  ],
 })
 export class AutocompleteControlRenderer
   extends JsonFormsControl