V18.x.x

.github/workflows/createdist.yml

@@ -1,3 +1,4 @@
+#NB has been disabled for now, change branches: [ main] to enable
 #workflow creates a dist branch for each library, based on its package version
 #should create the following 2 dist branches per lib project
 #for example the material library project with package version x.x.x will create branches: 
@@ -8,7 +9,7 @@ name: CreateDist
 
 on:
   push:
-    branches: [ main ]
+    branches: [ main-disabled ]
 
 jobs:
   deploy:

README.md

@@ -31,13 +31,16 @@ A [JSON Schema](http://json-schema.org) Form builder for Angular, similar to, an
 
 ## Versions
 
+### NB the version of ng-formworks to be installed, should correspond to the Angular version being used.
 
-| angular | ng-formworks |
-|--|--|
-| 15.x.x |15.x.x|
-| 16.x.x |16.x.x|
-| 17.x.x |17.x.x|
-| 18.x.x |18.x.x|
+Below is a table of the corresponding ng-formworks versions that's needed for the Angular version installed. It also lists the installation command if choosing to use the Material Design Framework, but installing other frameworks should have a similar command, have a look at their READMES for specific details.
+
+| Angular | ng-formworks |  installation (for Material Design)
+|--|--|--|
+| 18.x.x |18.x.x|```npm  install @ng-formworks/core@^18.0.0 @ng-formworks/cssframework@^18.0.0 @ng-formworks/material@^18.0.0```|
+| 17.x.x |17.x.x|```npm  install @ng-formworks/core@^17.0.0 @ng-formworks/cssframework@^17.0.0 @ng-formworks/material@^17.0.0```|
+| 16.x.x |16.x.x|```npm  install @ng-formworks/core@^16.0.0 @ng-formworks/cssframework@^16.0.0 @ng-formworks/material@^16.0.0```|
+| 15.x.x |15.x.x|```npm  install @ng-formworks/core@^15.0.0 @ng-formworks/cssframework@^15.0.0 @ng-formworks/material@^15.0.0```|
 
 
 ## Packages
@@ -92,12 +95,12 @@ For example if you'd like to try the material design based framework, [install @
 
 
  ```shell
-npm  install @ng-formworks/core@latest @ng-formworks/cssframework@latest @ng-formworks/material@latest 
+npm  install @ng-formworks/core @ng-formworks/cssframework @ng-formworks/material
 ```  
 
 With YARN, run the following:
 ```shell
-yarn  add  @ng-formworks/core@latest @ng-formworks/cssframework@latest @ng-formworks/material@latest 
+yarn  add  @ng-formworks/core @ng-formworks/cssframework @ng-formworks/material
 ```  
 
 include the themes scss in your applications sass file(typically "styles.scss" under "src" folder -see angular docs for more details) 
@@ -690,7 +693,7 @@ currently the following built-in themes are available(per framework):
 * Bootstrap 3:"bootstrap3_default"
 * Bootstrap 4:"bootstrap4_default"
 * Bootstrap 5:"bootstrap5_default" | "light" | "dark"
-* Material design:"material_default" | "indigo-pink" | "purple-green" | "deeppurple-amber" | "pink-bluegrey"
+* Material design:"material_default" | "azure-blue" | "rose-red" | "cyan-orange" | "magenta-violet"  | "indigo-pink" | "purple-green" | "deeppurple-amber" | "pink-bluegrey"
 * DaisyUi: "daisyui_default" | "light" | "dark" | "cupcake" | "cmyk" | "pastel" |"daisyui_leaf"
 
 | Framework Values | Theme values |
@@ -700,6 +703,10 @@ currently the following built-in themes are available(per framework):
 | "bootstrap-5" | "light" |
 | | "dark" |
 | "material-design" | "material_default" |
+| | "azure-blue" |
+| | "rose-red" |
+| | "cyan-orange" |
+| | "magenta-violet" |
 | | "indigo-pink" |
 | | "purple-green" |
 | | "deeppurple-amber" |

demo/environments/environment.prod.ts

@@ -1,3 +1,3 @@
 
-    export const environment ={"production":true,"version":"18.0.0","angularVersion":"18.2.7","materialVersion":"18.2.7","cssClassPrefix":true}
+    export const environment ={"production":true,"version":"18.4.0","angularVersion":"18.2.7","materialVersion":"18.2.7","cssClassPrefix":true}
 

demo/environments/environment.ts

@@ -1,3 +1,3 @@
 
-    export const environment ={"production":false,"version":"18.0.0","angularVersion":"18.2.7","materialVersion":"18.2.7","cssClassPrefix":true}
+    export const environment ={"production":false,"version":"18.4.0","angularVersion":"18.2.7","materialVersion":"18.2.7","cssClassPrefix":true}
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "demo",
-    "version": "18.0.0",
+    "version": "18.4.0",
     "author": "https://github.com/zahmo/ng-formworks/graphs/contributors",
     "description": "Angular JSON Schema Form builder Demo",
     "engines": {

projects/ng-formworks-bootstrap3/README.md

@@ -5,15 +5,16 @@ This module is a dependency of the [ng-formworks project][npm_core_ver] and is m
 
 If you are unfamiliar with with the ng-formworks project, it is highly recommended to 
 first have a look at the [@ng-formworks pages][npm_core_ver] for examples, demos, options and documentation.
+Before installing also have a look at the Angular/ng-formworks [version compatibility table][npm_core_ver#versions]
 
 ```shell
-npm install @ng-formworks/core@latest @ng-formworks/cssframework@latest @ng-formworks/bootstrap3@latest
+npm install @ng-formworks/core @ng-formworks/cssframework @ng-formworks/bootstrap3
 ```
 
 With YARN, run the following:
 
 ```shell
-yarn add @ng-formworks/core@latest @ng-formworks/cssframework@latest @ng-formworks/bootstrap3@latest
+yarn add @ng-formworks/core @ng-formworks/cssframework @ng-formworks/bootstrap3
 ```
 
 Then import `Bootstrap3FrameworkModule` in your main application module if you want to use `bootstrap3` UI, like this:
@@ -242,3 +243,4 @@ Run `ng test @ng-formworks/bootstrap3` to execute the unit tests via [Karma](htt
 To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
 
 [npm_core_ver]:https://www.npmjs.com/package/@ng-formworks/core
+[npm_core_ver#versions]:https://www.npmjs.com/package/@ng-formworks/core#versions

projects/ng-formworks-bootstrap3/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ng-formworks/bootstrap3",
-    "version": "18.0.0",
+    "version": "18.4.0",
     "description": "Angular ng-formworks - JSON Schema Form builder using Bootstrap 3 UI",
     "author": "https://github.com/zahmo/ng-formworks/graphs/contributors",
     "keywords": [
@@ -42,8 +42,8 @@
     "private": false,
     "dependencies": {
         "lodash-es": "~4.17.21",
-        "@ng-formworks/core": "~18.0.0",
-        "@ng-formworks/cssframework": "~18.0.0",
+        "@ng-formworks/core": "~18.4.0",
+        "@ng-formworks/cssframework": "~18.4.0",
         "tslib": "^2.7.0"
     },
     "peerDependencies": {

projects/ng-formworks-bootstrap4/README.md

@@ -5,15 +5,16 @@ This module is a dependency of the [ng-formworks project][npm_core_ver] and is m
 
 If you are unfamiliar with with the ng-formworks project, it is highly recommended to 
 first have a look at the [@ng-formworks pages][npm_core_ver] for examples, demos, options and documentation.
+Before installing also have a look at the Angular/ng-formworks [version compatibility table][npm_core_ver#versions]
 
 ```shell
-npm install @ng-formworks/core@latest @ng-formworks/cssframework@latest @ng-formworks/bootstrap4@latest
+npm install @ng-formworks/core @ng-formworks/cssframework @ng-formworks/bootstrap4
 ```
 
 With YARN, run the following:
 
 ```shell
-yarn add @ng-formworks/core@latest @ng-formworks/cssframework@latest @ng-formworks/bootstrap4@latest
+yarn add @ng-formworks/core @ng-formworks/cssframework @ng-formworks/bootstrap4
 ```
 
 Then import `Bootstrap4FrameworkModule` in your main application module if you want to use `bootstrap4` UI, like this:
@@ -231,3 +232,4 @@ Run `ng build @ng-formworks/bootstrap4` to build the project. The build artifact
 Run `ng test @ng-formworks/bootstrap4` to execute the unit tests via [Karma](https://karma-runner.github.io).
 
 [npm_core_ver]:https://www.npmjs.com/package/@ng-formworks/core
+[npm_core_ver#versions]:https://www.npmjs.com/package/@ng-formworks/core#versions

projects/ng-formworks-bootstrap4/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ng-formworks/bootstrap4",
-    "version": "18.0.0",
+    "version": "18.4.0",
     "description": "Angular ng-formworks - JSON Schema Form builder using Bootstrap 4 UI",
     "author": "https://github.com/zahmo/ng-formworks/graphs/contributors",
     "keywords": [
@@ -42,8 +42,8 @@
     "private": false,
     "dependencies": {
         "lodash-es": "~4.17.21",
-        "@ng-formworks/core": "~18.0.0",
-        "@ng-formworks/cssframework": "~18.0.0",
+        "@ng-formworks/core": "~18.4.0",
+        "@ng-formworks/cssframework": "~18.4.0",
         "tslib": "^2.7.0"
     },
     "peerDependencies": {

projects/ng-formworks-bootstrap5/README.md

@@ -5,15 +5,16 @@ This module is a dependency of the [ng-formworks project][npm_core_ver] and is m
 
 If you are unfamiliar with with the ng-formworks project, it is highly recommended to 
 first have a look at the [@ng-formworks pages][npm_core_ver] for examples, demos, options and documentation.
+Before installing also have a look at the Angular/ng-formworks [version compatibility table][npm_core_ver#versions]
 
 ```shell
-npm install @ng-formworks/core@latest @ng-formworks/cssframework@latest @ng-formworks/bootstrap5@latest
+npm install @ng-formworks/core @ng-formworks/cssframework @ng-formworks/bootstrap5
 ```
 
 With YARN, run the following:
 
 ```shell
-yarn add @ng-formworks/core@latest @ng-formworks/cssframework@latest @ng-formworks/bootstrap5@latest
+yarn add @ng-formworks/core @ng-formworks/cssframework @ng-formworks/bootstrap5
 ```
 
 Then import `Bootstrap5FrameworkModule` in your main application module if you want to use `bootstrap5` UI, like this:
@@ -225,4 +226,5 @@ Run `ng build @ng-formworks/bootstrap5` to build the project. The build artifact
 
 Run `ng test @ng-formworks/bootstrap5` to execute the unit tests via [Karma](https://karma-runner.github.io).
 
-[npm_core_ver]:https://www.npmjs.com/package/@ng-formworks/core
+[npm_core_ver]:https://www.npmjs.com/package/@ng-formworks/core
+[npm_core_ver#versions]:https://www.npmjs.com/package/@ng-formworks/core#versions

projects/ng-formworks-bootstrap5/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ng-formworks/bootstrap5",
-    "version": "18.0.0",
+    "version": "18.4.0",
     "description": "Angular ng-formworks - JSON Schema Form builder using Bootstrap 5 UI",
     "author": "https://github.com/zahmo/ng-formworks/graphs/contributors",
     "keywords": [
@@ -42,8 +42,8 @@
     "private": false,
     "dependencies": {
         "lodash-es": "~4.17.21",
-        "@ng-formworks/core": "~18.0.0",
-        "@ng-formworks/cssframework": "~18.0.0",
+        "@ng-formworks/core": "~18.4.0",
+        "@ng-formworks/cssframework": "~18.4.0",
         "tslib": "^2.7.0"
     },
     "peerDependencies": {

projects/ng-formworks-core/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ng-formworks/core",
-    "version": "18.0.0",
+    "version": "18.4.0",
     "description": "Angular ng-formworks - JSON Schema Form builder core",
     "author": "https://github.com/zahmo/ng-formworks/graphs/contributors",
     "keywords": [

projects/ng-formworks-core/src/lib/json-schema-form.service.ts

@@ -1,38 +1,41 @@
 import { Injectable, OnDestroy } from '@angular/core';
 import { AbstractControl, UntypedFormArray, UntypedFormGroup } from '@angular/forms';
-import Ajv, { ErrorObject, Options } from 'ajv';
+//import Ajv, { ErrorObject, Options } from 'ajv';
+import Ajv2019, { ErrorObject, Options } from 'ajv/dist/2019';
+
 import jsonDraft6 from 'ajv/lib/refs/json-schema-draft-06.json';
+import jsonDraft7 from 'ajv/lib/refs/json-schema-draft-07.json';
 import cloneDeep from 'lodash/cloneDeep';
 import { Subject, Subscription } from 'rxjs';
 import {
-    deValidationMessages,
-    enValidationMessages,
-    esValidationMessages,
-    frValidationMessages,
-    itValidationMessages,
-    ptValidationMessages,
-    zhValidationMessages
+  deValidationMessages,
+  enValidationMessages,
+  esValidationMessages,
+  frValidationMessages,
+  itValidationMessages,
+  ptValidationMessages,
+  zhValidationMessages
 } from './locale';
 import {
-    JsonPointer,
-    buildFormGroup,
-    buildFormGroupTemplate,
-    buildLayout,
-    buildSchemaFromData,
-    buildSchemaFromLayout,
-    fixTitle,
-    forEach,
-    formatFormData,
-    getControl,
-    getLayoutNode,
-    hasOwn,
-    hasValue,
-    isArray,
-    isDefined,
-    isEmpty,
-    isObject,
-    removeRecursiveReferences,
-    toTitleCase
+  JsonPointer,
+  buildFormGroup,
+  buildFormGroupTemplate,
+  buildLayout,
+  buildSchemaFromData,
+  buildSchemaFromLayout,
+  fixTitle,
+  forEach,
+  formatFormData,
+  getControl,
+  getLayoutNode,
+  hasOwn,
+  hasValue,
+  isArray,
+  isDefined,
+  isEmpty,
+  isObject,
+  removeRecursiveReferences,
+  toTitleCase
 } from './shared';
 
 import _isEqual from 'lodash/isEqual';
@@ -65,7 +68,7 @@ export class JsonSchemaFormService implements OnDestroy {
     strict:false
 
   };
-  ajv:any = new Ajv(this.ajvOptions); // AJV: Another JSON Schema Validator
+  ajv:any = new Ajv2019(this.ajvOptions); // AJV: Another JSON Schema Validator
 
   validateFormData: any = null; // Compiled AJV function to validate active form's schema
 
@@ -152,6 +155,7 @@ export class JsonSchemaFormService implements OnDestroy {
   constructor() {
     this.setLanguage(this.language);
     this.ajv.addMetaSchema(jsonDraft6);
+    this.ajv.addMetaSchema(jsonDraft7);
   }
   ngOnDestroy(): void {
     this.fcValueChangesSubs?.unsubscribe();

projects/ng-formworks-cssframework/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ng-formworks/cssframework",
-    "version": "18.0.0",
+    "version": "18.4.0",
     "description": "Angular ng-formworks - JSON Schema Form builder cssframework",
     "author": "https://github.com/zahmo/ng-formworks/graphs/contributors",
     "keywords": [
@@ -44,7 +44,7 @@
     },
     "dependencies": {
         "tslib": "^2.7.0",
-        "@ng-formworks/core": "~18.0.0"
+        "@ng-formworks/core": "~18.4.0"
     },
     "devDependencies": {
         "@types/lodash-es": "^4.17.6"

projects/ng-formworks-daisyui/README.md

@@ -5,17 +5,18 @@ This module is a dependency of the [ng-formworks project][npm_core_ver] and is m
 
 If you are unfamiliar with with the ng-formworks project, it is highly recommended to 
 first have a look at the [@ng-formworks pages][npm_core_ver] for examples, demos, options and documentation.
+Before installing also have a look at the Angular/ng-formworks [version compatibility table][npm_core_ver#versions]
 
 ## Getting started
 
 ```shell
-npm install @ng-formworks/core@latest @ng-formworks/cssframework@latest @ng-formworks/daisyui@latest
+npm install @ng-formworks/core @ng-formworks/cssframework @ng-formworks/daisyui
 ```
 
 With YARN, run the following:
 
 ```shell
-yarn add @ng-formworks/core@latest @ng-formworks/cssframework@latest @ng-formworks/daisyui@latest
+yarn add @ng-formworks/core @ng-formworks/cssframework @ng-formworks/daisyui
 ```
 
 Then import `DaisyUIFrameworkModule` in your main application module if you want to use `daisyui` UI, like this:
@@ -174,3 +175,4 @@ Run `ng build @ng-formworks/daisyui` to build the project. The build artifacts w
 Run `ng test @ng-formworks/daisyui` to execute the unit tests via [Karma](https://karma-runner.github.io).
 
 [npm_core_ver]:https://www.npmjs.com/package/@ng-formworks/core
+[npm_core_ver#versions]:https://www.npmjs.com/package/@ng-formworks/core#versions

projects/ng-formworks-daisyui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ng-formworks/daisyui",
-    "version": "18.0.0",
+    "version": "18.4.0",
     "description": "Angular ng-formworks - JSON Schema Form builder using DaisyUI",
     "author": "https://github.com/zahmo/ng-formworks/graphs/contributors",
     "keywords": [
@@ -49,8 +49,8 @@
 
     "dependencies": {
         "tslib": "^2.7.0",
-        "@ng-formworks/core": "~18.0.0",
-        "@ng-formworks/cssframework": "~18.0.0"
+        "@ng-formworks/core": "~18.4.0",
+        "@ng-formworks/cssframework": "~18.4.0"
     },
     "devDependencies": {
         "@types/lodash-es": "^4.17.6",