Angular v15

.gitignore

@@ -13,4 +13,6 @@ stats.html
 !.vscode/settings.json
 
 .coveralls.yml
-packages/examples-react/build
+packages/examples-react/build
+
+**/.angular/cache

package.json

@@ -1,7 +1,7 @@
 {
   "name": "jsonforms-monorepo",
   "engines": {
-    "node": "^16.13",
+    "node": "^16.14",
     "pnpm": ">=7.13.4"
   },
   "scripts": {

packages/angular-material/.eslintrc.js

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

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

@@ -74,7 +74,7 @@ const itemTester: UISchemaTester = (_schema, schemaPath, _path) => {
     <div>
       <button (click)="changeLocale('de-DE')">Change locale to de-DE</button>
       <button (click)="changeLocale('en-US')">Change locale to en-US</button>
-      Current locale: {{ currentLocale }}
+      Current locale: {{ i18n.locale }}
       <button (click)="toggleReadonly()">
         {{ readonly ? 'Unset' : 'Set' }} Readonly
       </button>
@@ -85,19 +85,17 @@ const itemTester: UISchemaTester = (_schema, schemaPath, _path) => {
       [uischema]="selectedExample.uischema"
       [renderers]="renderers"
       [i18n]="i18n"
-      [uischemas]="uischemas"
       [readonly]="readonly"
-      [config]="config"
     ></jsonforms>
   `,
 })
 export class AppComponent {
   readonly renderers = angularMaterialRenderers;
   readonly examples = getExamples();
-  selectedExample: ExampleDescription;
+  selectedExample: ExampleDescription | undefined;
   i18n: JsonFormsI18nState;
   private dateAdapter;
-  private readonly = false;
+  readonly = false;
   data: any;
   uischemas: { tester: UISchemaTester; uischema: UISchemaElement }[] = [
     { tester: itemTester, uischema: uiSchema },
@@ -114,7 +112,7 @@ export class AppComponent {
     this.selectedExample = this.examples.find(
       (e) => e.name === ev.target.value
     );
-    this.i18n = this.selectedExample.i18n ?? defaultI18n;
+    this.i18n = this.selectedExample?.i18n ?? defaultI18n;
   }
 
   changeLocale(locale: string) {

packages/angular-material/karma.conf.js

@@ -0,0 +1,55 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      //dir: require('path').join(__dirname, '../../coverage/angular-material'),
+      subdir: '.',
+      reporters: [
+        { type: 'lcov' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml', 'dots'],
+
+    browsers: [ config.singleRun ? 'ChromeHeadlessNoSandbox' : 'Chrome' ],
+    customLaunchers: {
+      ChromeHeadlessNoSandbox: {
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox'],
+      },
+    },
+    restartOnFileChange: true,
+    logLevel: config.LOG_INFO,
+
+    webpackMiddleware: {
+      stats: 'detailed',
+    },
+
+    webpackServer: {
+      noInfo: true,
+    },
+  });
+};

packages/angular-material/package.json

@@ -39,16 +39,17 @@
   "typings": "./lib/esm/index.d.ts",
   "scripts": {
     "build": "ngc && ngc -p tsconfig.cjs.json",
-    "build:examples-app": "rollup -c rollup.example.config.js",
-    "dev": "webpack --config webpack/webpack.dev.js && webpack-dev-server --config webpack/webpack.dev.js --env=dev --inline",
+    "build:examples-app": "ngc -p tsconfig.example.json && rollup -c rollup.example.config.js",
+    "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 .",
     "lint:fix": "eslint --fix .",
     "report": "nyc report --reporter=html",
     "doc": "typedoc --name 'JSON Forms Angular Material Renderers' --out docs src",
-    "test": "karma start ./test-config/karma.conf.js --single-run",
-    "test-ci": "karma start ./test-config/karma.conf.js --single-run",
-    "test-cov": "karma start ./test-config/karma.conf.js --coverage --single-run",
+    "test-dbg": "node ./test-runner",
+    "test": "node ./test-runner --single-run",
+    "test-ci": "node ./test-runner --single-run",
+    "test-cov": "node ./test-runner --coverage --single-run",
     "e2e": "npm run e2e-update && npm run e2e-test",
     "e2e-test": "protractor ./test-config/protractor.conf.js",
     "e2e-update": "webdriver-manager update --standalone false --gecko false"
@@ -60,93 +61,96 @@
     ]
   },
   "peerDependencies": {
-    "@angular/animations": "^12.0.0 || ^13.0.0 || ^14.0.0",
-    "@angular/cdk": "^12.0.0 || ^13.0.0 || ^14.0.0",
-    "@angular/common": "^12.0.0 || ^13.0.0 || ^14.0.0",
-    "@angular/core": "^12.0.0 || ^13.0.0 || ^14.0.0",
-    "@angular/flex-layout": "^12.0.0-beta || ^13.0.0-beta || ^14.0.0-beta",
-    "@angular/forms": "^12.0.0 || ^13.0.0 || ^14.0.0",
-    "@angular/material": "^12.0.0 || ^13.0.0 || ^14.0.0",
-    "@angular/platform-browser": "^12.0.0 || ^13.0.0 || ^14.0.0",
-    "@angular/router": "^12.0.0 || ^13.0.0 || ^14.0.0",
+    "@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",
     "@jsonforms/angular": "3.2.0-alpha.3",
+    "@jsonforms/angular-test": "^3.2.0-alpha.3",
     "@jsonforms/core": "3.2.0-alpha.3",
-    "core-js": "^2.5.3",
-    "rxjs": "^6.5.3 || ^7.4.0"
+    "rxjs": "^6.6.0 || ^7.4.0"
   },
   "dependencies": {
     "hammerjs": "2.0.8",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@angular-eslint/eslint-plugin": "^12.0.0",
-    "@angular-eslint/eslint-plugin-template": "^12.0.0",
-    "@angular-eslint/schematics": "^12.0.0",
-    "@angular-eslint/template-parser": "^12.0.0",
-    "@angular/animations": "^12.0.0",
-    "@angular/cdk": "^12.0.0",
-    "@angular/common": "^12.0.0",
-    "@angular/compiler": "^12.0.0",
-    "@angular/compiler-cli": "^12.0.0",
-    "@angular/core": "^12.0.0",
-    "@angular/flex-layout": "^12.0.0-beta",
-    "@angular/forms": "^12.0.0",
-    "@angular/material": "^12.0.0",
-    "@angular/platform-browser": "^12.0.0",
-    "@angular/platform-browser-dynamic": "^12.0.0",
-    "@angular/router": "^12.0.0",
+    "@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",
     "@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",
     "@rollup/plugin-commonjs": "^23.0.3",
     "@rollup/plugin-json": "^5.0.2",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.1",
-    "@types/node": "^16.18.34",
+    "@types/jasmine": "~3.8.0",
+    "@types/lodash": "4.14.149",
+    "@types/node": "^18.10.0",
     "@typescript-eslint/eslint-plugin": "^5.54.1",
     "@typescript-eslint/parser": "^5.54.1",
-    "angular2-template-loader": "^0.6.2",
     "babel-loader": "^8.0.6",
-    "copy-webpack-plugin": "^5.0.5",
-    "core-js": "^2.5.3",
+    "copy-webpack-plugin": "^11.0.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.7.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-prettier": "^4.2.1",
     "html-loader": "^0.5.5",
-    "istanbul-instrumenter-loader": "^3.0.1",
+    "http-server": "^14.1.1",
     "jasmine": "^3.99.0",
     "jasmine-spec-reporter": "^4.2.1",
-    "karma": "^3.1.4",
+    "karma": "^6.4.1",
     "karma-chrome-launcher": "^3.2.0",
-    "karma-coverage-istanbul-reporter": "^2.1.1",
+    "karma-coverage": "~2.0.3",
     "karma-jasmine": "^2.0.1",
     "karma-jasmine-html-reporter": "^1.7.0",
     "karma-sourcemap-loader": "^0.3.8",
-    "karma-webpack": "^4.0.2",
+    "karma-webpack": "^5.0.0",
+    "ng-packagr": "^15.0.0",
     "null-loader": "^0.1.1",
     "nyc": "^15.1.0",
     "prettier": "^2.8.4",
-    "protractor": "^5.4.1",
-    "request": "^2.88.0",
+    "protractor": "^7.0.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.78.0",
     "rollup-plugin-cleanup": "^3.2.1",
     "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.5.3",
+    "rxjs": "^6.6.0",
     "ts-loader": "^6.2.1",
-    "tslib": "^2.5.0",
-    "typedoc": "~0.21.9",
-    "typescript": "4.2.3",
-    "webpack": "^4.41.2",
-    "webpack-cli": "^3.2.1",
-    "webpack-dev-server": "^3.9.0",
+    "tslib": "^2.3.0",
+    "typedoc": "~0.25.3",
+    "typescript": "~4.9.5",
+    "webpack": "^5.78.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.13.2",
+    "yargs": "^17.7.2",
     "zone.js": "^0.11.4"
   }
 }

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

@@ -10,7 +10,7 @@ import typescript from 'rollup-plugin-typescript2';
  * @type {import('rollup').RollupOptions}
  */
 const config = {
-  input: 'example/main.ts',
+  input: 'example/dist/example/main.js',
   output: {
     file: 'example/dist/bundle.js',
     format: 'iife',

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

@@ -108,6 +108,7 @@ export class AutocompleteControlRenderer
   @Input() options: string[];
   filteredOptions: Observable<string[]>;
   shouldFilter: boolean;
+  focused = false;
 
   constructor(jsonformsService: JsonFormsAngularService) {
     super(jsonformsService);

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

@@ -54,6 +54,8 @@ import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DateControlRenderer extends JsonFormsControl {
+  focused = false;
+
   constructor(jsonformsService: JsonFormsAngularService) {
     super(jsonformsService);
   }

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

@@ -69,6 +69,7 @@ export class NumberControlRenderer extends JsonFormsControl {
   locale: string;
   numberFormat: Intl.NumberFormat;
   decimalSeparator: string;
+  focused = false;
 
   constructor(jsonformsService: JsonFormsAngularService) {
     super(jsonformsService);

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

@@ -37,17 +37,29 @@ import { isRangeControl, RankedTester, rankWith } from '@jsonforms/core';
       <label class="mat-caption" style="color:rgba(0,0,0,.54)">{{
         label
       }}</label>
+      <!-- TODO: The 'tickInterval' property no longer exists -->
       <mat-slider
-        [value]="data || scopedSchema.default"
-        (change)="onChange($event)"
         [disabled]="!isEnabled()"
         [max]="max"
         [min]="min"
         [step]="multipleOf"
-        [thumbLabel]="true"
-        tickInterval="auto"
+        [discrete]="true"
         [id]="id"
-      ></mat-slider>
+        #ngSlider
+      >
+        <input
+          matSliderThumb
+          [value]="data || scopedSchema.default"
+          (change)="
+            onChange({
+              source: ngSliderThumb,
+              parent: ngSlider,
+              value: ngSliderThumb.value
+            })
+          "
+          #ngSliderThumb="matSliderThumb"
+        />
+      </mat-slider>
       <mat-hint class="mat-caption" *ngIf="shouldShowUnfocusedDescription()">{{
         description
       }}</mat-hint>
@@ -60,6 +72,7 @@ export class RangeControlRenderer extends JsonFormsControl {
   min: number;
   max: number;
   multipleOf: number;
+  focused = false;
 
   constructor(
     jsonformsService: JsonFormsAngularService,

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

@@ -49,6 +49,7 @@ import { isStringControl, RankedTester, rankWith } from '@jsonforms/core';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TextControlRenderer extends JsonFormsControl {
+  focused = false;
   constructor(jsonformsService: JsonFormsAngularService) {
     super(jsonformsService);
   }

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

@@ -48,6 +48,7 @@ import { isMultiLineControl, RankedTester, rankWith } from '@jsonforms/core';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TextAreaRenderer extends JsonFormsControl {
+  focused = false;
   constructor(jsonformsService: JsonFormsAngularService) {
     super(jsonformsService);
   }