@ng-formworks/core 19.5.8 → 19.6.0

package/fesm2022/ng-formworks-core.mjs

@@ -1,16 +1,19 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, inject, input, viewChild, ViewContainerRef, Component, Input, Directive, ChangeDetectionStrategy, ViewChild, ElementRef, NgZone, signal, NgModule, Inject, forwardRef, ChangeDetectorRef, output } from '@angular/core';
+import { Injectable, inject, input, viewChild, ViewContainerRef, Component, Input, Directive, ChangeDetectionStrategy, ViewChild, signal, ElementRef, NgZone, NgModule, Inject, forwardRef, ChangeDetectorRef, output } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { UntypedFormControl, UntypedFormArray, UntypedFormGroup, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import addFormats from 'ajv-formats';
 import Ajv2019 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 { from, Observable, forkJoin, Subject, BehaviorSubject, lastValueFrom } from 'rxjs';
+import { some, isNil, isEmpty as isEmpty$1, isObject as isObject$1, isEqual as isEqual$2 } from 'lodash';
 import isEqual$1 from 'lodash/isEqual';
 import { map, takeUntil } from 'rxjs/operators';
+import omit from 'lodash/omit';
 import filter from 'lodash/filter';
 import map$1 from 'lodash/map';
 import _isArray from 'lodash/isArray';
@@ -26,10 +29,10 @@ class Framework {
         this.stylesheets = [];
         this.scripts = [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Framework, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Framework }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: Framework, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: Framework }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Framework, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: Framework, decorators: [{
             type: Injectable
         }] });
 
@@ -61,13 +64,15 @@ const deValidationMessages = {
             case 'uuid':
                 return 'Keine gültige UUID (z. B. "12345678-9ABC-DEF0-1234-56789ABCDEF0")';
             case 'color':
-                return 'Kein gültiger Farbwert (z. B. "#FFFFFF" oder "rgb(255, 255, 255)")';
+                return 'Kein gültiger Farbwert (z. B. "#FFFFFF")';
             case 'json-pointer':
                 return 'Kein gültiger JSON-Pointer (z. B. "/pointer/to/something")';
             case 'relative-json-pointer':
                 return 'Kein gültiger relativer JSON-Pointer (z. B. "2/pointer/to/something")';
             case 'regex':
                 return 'Kein gültiger regulärer Ausdruck (z. B. "(1-)?\\d{3}-\\d{3}-\\d{4}")';
+            case 'duration':
+                return "Muss eine gültige ISO 8601-Dauer sein (z. B. 'PT1H30M')";
             default:
                 return 'Muss diesem Format entsprechen: ' + error.requiredFormat;
         }
@@ -121,13 +126,15 @@ const enValidationMessages = {
             case 'uuid':
                 return 'Must be a uuid, like "12345678-9ABC-DEF0-1234-56789ABCDEF0"';
             case 'color':
-                return 'Must be a color, like "#FFFFFF" or "rgb(255, 255, 255)"';
+                return 'Must be a color, like "#FFFFFF"';
             case 'json-pointer':
                 return 'Must be a JSON Pointer, like "/pointer/to/something"';
             case 'relative-json-pointer':
                 return 'Must be a relative JSON Pointer, like "2/pointer/to/something"';
             case 'regex':
                 return 'Must be a regular expression, like "(1-)?\\d{3}-\\d{3}-\\d{4}"';
+            case 'duration':
+                return "Must be a valid ISO 8601 duration (e.g., 'PT1H30M')";
             default:
                 return 'Must be a correctly formatted ' + error.requiredFormat;
         }
@@ -179,13 +186,15 @@ const esValidationMessages = {
             case 'uuid':
                 return 'Debe ser un UUID, ej "12345678-9ABC-DEF0-1234-56789ABCDEF0"';
             case 'color':
-                return 'Debe ser un color, ej "#FFFFFF" or "rgb(255, 255, 255)"';
+                return 'Debe ser un color, ej "#FFFFFF"';
             case 'json-pointer':
                 return 'Debe ser un JSON Pointer, ej "/pointer/to/something"';
             case 'relative-json-pointer':
                 return 'Debe ser un JSON Pointer relativo, ej "2/pointer/to/something"';
             case 'regex':
                 return 'Debe ser una expresión regular, ej "(1-)?\\d{3}-\\d{3}-\\d{4}"';
+            case 'duration':
+                return "Debe ser una duración válida en formato ISO 8601 (p. ej., 'PT1H30M')";
             default:
                 return 'Debe tener el formato correcto ' + error.requiredFormat;
         }
@@ -238,13 +247,15 @@ const frValidationMessages = {
             case 'uuid':
                 return 'Doit être un UUID, tel que "12345678-9ABC-DEF0-1234-56789ABCDEF0"';
             case 'color':
-                return 'Doit être une couleur, tel que "#FFFFFF" or "rgb(255, 255, 255)"';
+                return 'Doit être une couleur, tel que "#FFFFFF"';
             case 'json-pointer':
                 return 'Doit être un JSON Pointer, tel que "/pointer/to/something"';
             case 'relative-json-pointer':
                 return 'Doit être un relative JSON Pointer, tel que "2/pointer/to/something"';
             case 'regex':
                 return 'Doit être une expression régulière, tel que "(1-)?\\d{3}-\\d{3}-\\d{4}"';
+            case 'duration':
+                return "Doit être une durée valide au format ISO 8601 (par ex., 'PT1H30M')";
             default:
                 return 'Doit être avoir le format correct: ' + error.requiredFormat;
         }
@@ -298,13 +309,15 @@ const itValidationMessages = {
             case 'uuid':
                 return 'Deve essere un uuid, come "12345678-9ABC-DEF0-1234-56789ABCDEF0"';
             case 'color':
-                return 'Deve essere un colore, come "#FFFFFF" o "rgb(255, 255, 255)"';
+                return 'Deve essere un colore, come "#FFFFFF"';
             case 'json-pointer':
                 return 'Deve essere un JSON Pointer, come "/pointer/to/something"';
             case 'relative-json-pointer':
                 return 'Deve essere un JSON Pointer relativo, come "2/pointer/to/something"';
             case 'regex':
                 return 'Deve essere una regular expression, come "(1-)?\\d{3}-\\d{3}-\\d{4}"';
+            case 'duration':
+                return "Deve essere una durata valida nel formato ISO 8601 (es. 'PT1H30M')";
             default:
                 return 'Deve essere formattato correttamente ' + error.requiredFormat;
         }
@@ -358,13 +371,15 @@ const ptValidationMessages = {
             case 'uuid':
                 return 'Tem que ser um uuid, por exemplo "12345678-9ABC-DEF0-1234-56789ABCDEF0"';
             case 'color':
-                return 'Tem que ser uma cor, por exemplo "#FFFFFF" ou "rgb(255, 255, 255)"';
+                return 'Tem que ser uma cor, por exemplo "#FFFFFF"';
             case 'json-pointer':
                 return 'Tem que ser um JSON Pointer, por exemplo "/referencia/para/algo"';
             case 'relative-json-pointer':
                 return 'Tem que ser um JSON Pointer relativo, por exemplo "2/referencia/para/algo"';
             case 'regex':
                 return 'Tem que ser uma expressão regular, por exemplo "(1-)?\\d{3}-\\d{3}-\\d{4}"';
+            case 'duration':
+                return "Deve ser uma duração válida no formato ISO 8601 (ex.: 'PT1H30M')";
             default:
                 return 'Tem que ser no formato: ' + error.requiredFormat;
         }
@@ -418,13 +433,15 @@ const zhValidationMessages = {
             case 'uuid':
                 return '必须为 uuid, 比如 "12345678-9ABC-DEF0-1234-56789ABCDEF0"';
             case 'color':
-                return '必须为颜色值, 比如 "#FFFFFF" 或者 "rgb(255, 255, 255)"';
+                return '必须为颜色值, 比如 "#FFFFFF"';
             case 'json-pointer':
                 return '必须为 JSON Pointer, 比如 "/pointer/to/something"';
             case 'relative-json-pointer':
                 return '必须为相对的 JSON Pointer, 比如 "2/pointer/to/something"';
             case 'regex':
                 return '必须为正则表达式, 比如 "(1-)?\\d{3}-\\d{3}-\\d{4}"';
+            case 'duration':
+                return "必须是有效的 ISO 8601 持续时间（例如：'PT1H30M'）";
             default:
                 return '必须为格式正确的 ' + error.requiredFormat;
         }
@@ -1411,6 +1428,35 @@ function toTitleCase(input, forceWords) {
         }
     });
 }
+/**
+ * Recursively checks if at least one property of the given object (including nested objects)
+ * has a non-null and non-undefined value.
+ *
+ * @param obj - The object to check.
+ * @returns `true` if at least one property has a non-null and non-undefined value, otherwise `false`.
+ *
+ * @example
+ * const testObj = { a: null, b: { b1: null, b2: undefined } };
+ * console.log(hasNonNullValue(testObj));  // Output: false
+ *
+ * const testObj2 = { a: 1, b: { b1: null, b2: undefined } };
+ * console.log(hasNonNullValue(testObj2));  // Output: true
+ */
+function hasNonNullValue(obj) {
+    // If the object is null or not an object, return false immediately
+    if (obj === null || typeof obj !== 'object') {
+        return false;
+    }
+    // _.some checks if at least one element passes the given condition.
+    return some(obj, (value) => {
+        // If value is an object, recurse deeper into the object.
+        if (isObject(value)) {
+            return hasNonNullValue(value);
+        }
+        // Check if value is neither null nor undefined.
+        return !isNil(value);
+    });
+}
 
 class JsonPointer {
     /**
@@ -2427,10 +2473,10 @@ class JsonPointer {
         }
         console.error('parseObjectPath error: Input object path must be a string.');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: JsonPointer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: JsonPointer }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: JsonPointer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: JsonPointer }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: JsonPointer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: JsonPointer, decorators: [{
             type: Injectable
         }] });
 
@@ -2475,6 +2521,7 @@ const jsonSchemaFormatTests = {
     // JSON-pointer: https://tools.ietf.org/html/rfc6901
     'json-pointer': /^(?:\/(?:[^~/]|~0|~1)*)*$|^#(?:\/(?:[a-z0-9_\-.!$&'()*+,;:=@]|%[0-9a-f]{2}|~0|~1)*)*$/i,
     'relative-json-pointer': /^(?:0|[1-9][0-9]*)(?:#|(?:\/(?:[^~/]|~0|~1)*)*)$/,
+    'duration': /^P(?!$)(\d+Y)?(\d+M)?(\d+D)?(T(\d+H)?(\d+M)?(\d+S)?)?$/,
     'regex': function (str) {
         if (/[^\\]\\Z/.test(str)) {
             return false;
@@ -2771,7 +2818,7 @@ class JsonValidators {
      * This validator currently checks the following formsts:
      *   date, time, date-time, email, hostname, ipv4, ipv6,
      *   uri, uri-reference, uri-template, url, uuid, color,
-     *   json-pointer, relative-json-pointer, regex
+     *   json-pointer, relative-json-pointer,duration, regex
      *
      * Fast format regular expressions copied from AJV:
      * https://github.com/epoberezkin/ajv/blob/master/lib/compile/formats.js
@@ -2790,9 +2837,14 @@ class JsonValidators {
             let isValid;
             const currentValue = control.value;
             if (isString(currentValue)) {
+                //TODO fix-Reg exp last index problem
+                //see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test
+                //before every call to .test it needs to be reset
+                //use either formatTest.lastIndex = 0; // Reset the lastIndex before each test
+                //or new RegExp(formatTest.source, formatTest.flags);
                 const formatTest = jsonSchemaFormatTests[requiredFormat];
                 if (typeof formatTest === 'object') {
-                    isValid = formatTest.test(currentValue);
+                    isValid = new RegExp(formatTest.source, formatTest.flags).test(currentValue);
                 }
                 else if (typeof formatTest === 'function') {
                     isValid = formatTest(currentValue);
@@ -4029,8 +4081,18 @@ function getInputType(schema, layoutNode = null) {
     if (hasOwn(schema, '$ref')) {
         return '$ref';
     }
-    if (isArray(schema.oneOf) || isArray(schema.anyOf)) {
+    //if (isArray(schema.anyOf)) { return 'any-of'; }//treated as allOf
+    if (isArray(schema.oneOf)) {
         return 'one-of';
+    } //{ return 'tabarray'; }
+    if (hasOwn(schema, 'if')) {
+        return 'if';
+    }
+    if (hasOwn(schema, 'then')) {
+        return 'then';
+    }
+    if (hasOwn(schema, 'else')) {
+        return 'else';
     }
     console.error(`getInputType error: Unable to determine input type for ${schemaType}`);
     console.error('schema', schema);
@@ -4443,6 +4505,14 @@ function getSubSchema(schema, pointer, schemaRefLibrary = null, schemaRecursiveR
         return subSchema;
     }, true, pointer);
 }
+function omitKeys(objects, keysToOmit) {
+    return objects.map((obj) => omit(obj, keysToOmit));
+}
+function combineAllOfITE(schema) {
+    if (schema && schema.allOf) {
+        const allITE = schema.allOf.map(item => { return item.if && { if: item.if }; });
+    }
+}
 /**
  * 'combineAllOf' function
  *
@@ -4456,11 +4526,24 @@ function combineAllOf(schema) {
     if (!isObject(schema) || !isArray(schema.allOf)) {
         return schema;
     }
-    let mergedSchema = mergeSchemas(...schema.allOf);
+    const allITE = schema.allOf.map(item => { return item.if && item; })
+        .filter(item => !isEmpty$1(item));
+    //adaped to accomodate ITE by merging all non ITE field
+    //then readding the allOf key with only ITE
+    let schemaITEOmitted = omitKeys(schema.allOf, ['if', 'then', 'else']);
+    let mergedSchema = mergeSchemas(...schemaITEOmitted);
+    //mergeSchemas(...schema.allOf);
     if (Object.keys(schema).length > 1) {
         const extraKeys = { ...schema };
         delete extraKeys.allOf;
-        mergedSchema = mergeSchemas(mergedSchema, extraKeys);
+        //TODO Test-changed order to preserve originial order
+        mergedSchema = mergeSchemas(extraKeys, mergedSchema);
+        //mergeSchemas(mergedSchema, extraKeys);
+        //need to put it back if ITE 
+        if (allITE && allITE.length > 0) {
+            mergedSchema.allOf = mergedSchema.allOf || [];
+            mergedSchema.allOf.push(...allITE);
+        }
     }
     return mergedSchema;
 }
@@ -4486,6 +4569,40 @@ function fixRequiredArrayProperties(schema) {
     }
     return schema;
 }
+/**
+ * 'convertJSONSchemaIfToCondition' function
+ * converts something like
+ * "if": {
+ *   "properties": {
+ *     "animal": {
+ *       "const": "Cat"
+ *     },
+ *     "habitat":{
+ *        "const": "City"
+ *      }
+ *   }
+ * }
+ * to "model.animal=='Cat' && habitat=='City" contion
+ * @param schema:any
+ * @param negate:boolean=false
+ * @returns
+
+ */
+function convertJSONSchemaIfToCondition(schema, negate = false) {
+    let conditionFun = "";
+    let condition = {};
+    let notOp = negate ? "!" : "";
+    if (schema.if) {
+        Object.keys(schema.if.properties).forEach((ifProp, ind) => {
+            let amper = ind > 0 ? "&" : "";
+            //Note the model value is first converted to string and so is the condition
+            //so that booleans and numbers can also be compared 
+            conditionFun += `${amper}model.${ifProp}+""=='${schema.if.properties[ifProp].const}'`;
+        });
+    }
+    condition["functionBody"] = `return ${notOp}(${conditionFun})`;
+    return condition;
+}
 
 function convertSchemaToDraft6(schema, options = {}) {
     let draft = options.draft || null;
@@ -4786,6 +4903,17 @@ function convertSchemaToDraft6(schema, options = {}) {
     return newSchema;
 }
 
+/**
+ * path2ControlKey takes a datapointer path like /some/pointer/path
+ * and returns something like $some$pointer$path
+ * used mainly to convert paths so it can be used as keys in FormGroups
+ * fot ITE scenarios
+ * @param path
+ * @returns string
+ */
+function path2ControlKey(path) {
+    return path.replace(/\//g, "$");
+}
 /**
  * FormGroup function library:
  *
@@ -4834,11 +4962,13 @@ function buildFormGroupTemplate(jsf, nodeValue = null, setValues = true, schemaP
     }
     // TODO: If nodeValue still not set, check layout for default value
     const schemaType = JsonPointer.get(schema, '/type');
-    const controlType = (hasOwn(schema, 'properties') || hasOwn(schema, 'additionalProperties')) &&
-        schemaType === 'object' ? 'FormGroup' :
-        (hasOwn(schema, 'items') || hasOwn(schema, 'additionalItems')) &&
-            schemaType === 'array' ? 'FormArray' :
-            !schemaType && hasOwn(schema, '$ref') ? '$ref' : 'FormControl';
+    const isIfThenElse = hasOwn(schema, 'if') || hasOwn(schema, 'then') || hasOwn(schema, 'else');
+    const controlType = isIfThenElse && !schemaType ? 'IfThenElse' :
+        (hasOwn(schema, 'properties') || hasOwn(schema, 'additionalProperties')) &&
+            schemaType === 'object' ? 'FormGroup' :
+            (hasOwn(schema, 'items') || hasOwn(schema, 'additionalItems')) &&
+                schemaType === 'array' ? 'FormArray' :
+                !schemaType && hasOwn(schema, '$ref') ? '$ref' : 'FormControl';
     const shortDataPointer = removeRecursiveReferences(dataPointer, jsf.dataRecursiveRefMap, jsf.arrayMap);
     if (!jsf.dataMap.has(shortDataPointer)) {
         jsf.dataMap.set(shortDataPointer, new Map());
@@ -4877,8 +5007,135 @@ function buildFormGroupTemplate(jsf, nodeValue = null, setValues = true, schemaP
                 propertyKeys
                     .filter(key => hasOwn(schema.properties, key) ||
                     hasOwn(schema, 'additionalProperties'))
-                    .forEach(key => controls[key] = buildFormGroupTemplate(jsf, JsonPointer.get(nodeValue, [key]), setValues, schemaPointer + (hasOwn(schema.properties, key) ?
-                    '/properties/' + key : '/additionalProperties'), dataPointer + '/' + key, templatePointer + '/controls/' + key));
+                    .forEach(key => {
+                    controls[key] = buildFormGroupTemplate(jsf, JsonPointer.get(nodeValue, [key]), setValues, schemaPointer + (hasOwn(schema.properties, key) ?
+                        '/properties/' + key : '/additionalProperties'), dataPointer + '/' + key, templatePointer + '/controls/' + key);
+                    //add the $<control> type to the root
+                    //so it can be flattened and acceses directly in the formgroup
+                    //by its full '$' path
+                    ["allOf", "anyOf", "oneOf"].forEach(ofType => {
+                        if (controls[key].controls && controls[key].controls[`_${ofType}`]) {
+                            Object.keys(controls[key].controls[`_${ofType}`]).forEach($key => {
+                                controls[$key] = controls[key].controls[`_${ofType}`][$key];
+                                delete controls[key].controls[$key];
+                            });
+                            delete controls[key].controls[`_${ofType}`];
+                        }
+                    });
+                });
+                if (hasOwn(schema, "if")) {
+                    ["then", "else"].forEach(con => {
+                        if (hasOwn(schema, con)) {
+                            const keySchemaPointer = `/${con}`;
+                            let thenFGTemplate = buildFormGroupTemplate(jsf, nodeValue, false, //JsonPointer.get(nodeValue, keySchemaPointer), setValues,
+                            schemaPointer + keySchemaPointer, dataPointer, templatePointer + `/controls/${con}`);
+                            Object.assign(controls, thenFGTemplate.controls);
+                        }
+                    });
+                }
+                /*  treat allOf the same as any of but need to add an extra
+        condition for which anyOf item is to be rendered
+          let allOfControls = {}
+          let allOfAllowedKeys = ["allOf", "anyOf", "oneOf", "if", "then", "else", "type", "properties", "items"];
+          if (hasOwn(schema, "allOf") && isArray(schema.allOf)) {
+            schema.allOf.forEach((allOfItem, ind) => {
+              let aoItemKeys = Object.keys(allOfItem);
+              let foundKeys = allOfAllowedKeys.filter(value =>
+                aoItemKeys.includes(value)
+              );
+              if (foundKeys && foundKeys.length > 0) {
+                const keySchemaPointer = `/allOf/${ind}`;
+                //console.log(`found:${keySchemaPointer}`);
+                let allOfFGTemplate = buildFormGroupTemplate(
+                  jsf, JsonPointer.get(nodeValue, keySchemaPointer), setValues,
+                  schemaPointer + keySchemaPointer,
+                  dataPointer,
+                  templatePointer + '/controls/' + ind
+                );
+                if (allOfFGTemplate.controls) {
+                  Object.keys(allOfFGTemplate.controls).forEach(key => {
+                    let controlKey = allOfFGTemplate.controls[key].schemaPointer || `${schemaPointer}${keySchemaPointer}/${key}`;
+                    controlKey = path2ControlKey(controlKey);
+                    controls[controlKey] = {
+                      key: key,
+                      schemaPointer: schemaPointer + keySchemaPointer,
+                      controls: allOfFGTemplate.controls[key]
+                    }
+                    controls[controlKey] = allOfFGTemplate.controls[key];
+                    controls[controlKey].key = key;
+                    controls[controlKey].schemaPointer = allOfFGTemplate.controls[key].schemaPointer || schemaPointer + keySchemaPointer;
+  
+                    controls[key] = allOfFGTemplate.controls[key];
+                  })
+                }
+                //add ui type items to controls
+                if (allOfItem["type"] || allOfItem["properties"] || allOfItem["items"]) {
+                  allOfControls[ind] = allOfFGTemplate
+                }
+  
+              }
+  
+            })
+            controls["allOf"] = allOfControls;
+          }
+          */
+                let ofAllowedKeys = ["allOf", "anyOf", "oneOf", "if", "then", "else", "type", "properties", "items"];
+                ["allOf", "anyOf", "oneOf"].forEach(ofType => {
+                    if (hasOwn(schema, ofType) && isArray(schema[ofType])) {
+                        schema[ofType].forEach((ofItem, ind) => {
+                            let aoItemKeys = Object.keys(ofItem);
+                            let foundKeys = ofAllowedKeys.filter(value => aoItemKeys.includes(value));
+                            if (foundKeys && foundKeys.length > 0) {
+                                const keySchemaPointer = `/${ofType}/${ind}`;
+                                //console.log(`found:${keySchemaPointer}`);
+                                let newNodeValue = JsonPointer.get(nodeValue, keySchemaPointer);
+                                if (ofType == "oneOf") {
+                                    newNodeValue = nodeValue;
+                                }
+                                let allOfFGTemplate = buildFormGroupTemplate(jsf, newNodeValue, setValues, schemaPointer + keySchemaPointer, dataPointer, templatePointer + '/controls/' + ind);
+                                if (allOfFGTemplate.controls) {
+                                    Object.keys(allOfFGTemplate.controls).forEach(key => {
+                                        const l2SchemaPointer = hasOwn(schema, 'properties') ?
+                                            '/properties/' + key : key;
+                                        let controlKey = allOfFGTemplate.controls[key].schemaPointer || `${schemaPointer}${keySchemaPointer}${l2SchemaPointer}`;
+                                        controlKey = path2ControlKey(controlKey);
+                                        /*
+                                        controls[controlKey] = {
+                                          key: key,
+                                          schemaPointer:  `${schemaPointer}${keySchemaPointer}/${key}`,//schemaPointer + keySchemaPointer,
+                                          controls: allOfFGTemplate.controls[key]
+                                        }
+                                        */
+                                        let controlItem = cloneDeep(allOfFGTemplate.controls[key]);
+                                        controlItem.key = key;
+                                        controlItem.schemaPointer = controlItem.schemaPointer || `${schemaPointer}${keySchemaPointer}${l2SchemaPointer}`;
+                                        controls[controlKey] = controlItem;
+                                        //need to test if value matches schema,
+                                        //as the same oneOf item will be assigned to the same value
+                                        //if key is a $oneOf key then it was inserted at the root of the controls
+                                        //as form control name will be the full(escaped) path 
+                                        const pointerPath = key.startsWith('$oneOf') ? controlItem.schemaPointer : keySchemaPointer;
+                                        let oneOfItemSchema = JsonPointer.get(schema, pointerPath);
+                                        let oneOfItemValue = {};
+                                        oneOfItemValue[key] = controlItem.value?.value;
+                                        if (controlItem.value && !jsf.ajv.validate(oneOfItemSchema, oneOfItemValue)) {
+                                            controlItem.value.value = null;
+                                        }
+                                        //controls[controlKey] = controlItem;
+                                        //allOfFGTemplate.controls[key].schemaPointer ||`${schemaPointer}${keySchemaPointer}/${key}`;
+                                        //allOfFGTemplate.controls[key].schemaPointer || schemaPointer + keySchemaPointer;
+                                        controls[key] = cloneDeep(allOfFGTemplate.controls[key]);
+                                        //add schemacontrol to root 
+                                        //controls[controlKey]=controlItem
+                                        controls[`_${ofType}`] = controls[`_${ofType}`] || {};
+                                        controls[`_${ofType}`][controlKey] = controlItem;
+                                        //allOfFGTemplate.controls[key];
+                                    });
+                                }
+                            }
+                        });
+                    }
+                });
                 jsf.formOptions.fieldsRequired = setRequiredFields(schema, controls);
             }
             return { controlType, controls, validators };
@@ -4961,6 +5218,29 @@ function buildFormGroupTemplate(jsf, nodeValue = null, setValues = true, schemaP
                 disabled: nodeOptions.get('disabled') || false
             };
             return { controlType, value, validators };
+        //TODO may make an IFThenElse widget or integrate it with the section
+        //widget  
+        case 'IfThenElse':
+            controls = {};
+            let conditionType;
+            if (hasOwn(schema, "if")) {
+                ["then", "else"].forEach(con => {
+                    if (hasOwn(schema, con)) {
+                        const keySchemaPointer = `/${con}`;
+                        let thenTFGTemplate = buildFormGroupTemplate(jsf, nodeValue, false, schemaPointer + keySchemaPointer, dataPointer, templatePointer + `/controls/${con}`);
+                        //NB same property can be in both then and else
+                        //so key must be the unique path to control
+                        Object.keys(thenTFGTemplate.controls).forEach(key => {
+                            let controlKey = thenTFGTemplate.controls[key].schemaPointer || `${schemaPointer}${keySchemaPointer}/${key}`;
+                            controlKey = path2ControlKey(controlKey);
+                            let cItem = Object.assign({}, thenTFGTemplate.controls[key]);
+                            cItem.schemaPointer = `${schemaPointer}${keySchemaPointer}/${key}`;
+                            controls[controlKey] = cItem;
+                        });
+                    }
+                });
+            }
+            return { controlType, controls, validators };
         default:
             return null;
     }
@@ -4992,7 +5272,23 @@ function buildFormGroup(template) {
                 const groupControls = {};
                 forEach(template.controls, (controls, key) => {
                     const newControl = buildFormGroup(controls);
+                    //if (newControl) { groupControls[key] = newControl; }
                     if (newControl) {
+                        /* experimental idea was to try to be able to switch
+                        conditional controls dynamically based on their schema pointer
+                        (not datapointer as that only maps to one control)
+                              Object.defineProperty(groupControls, key, {
+                                get: () => {
+                                  //console.log(`Accessed control: ${key}`);
+                                  //add switch logic here
+                                  return ncontrol;
+                                },
+                                set:(value)=>{
+                                  ncontrol=value
+                                },
+                                enumerable: true
+                              })
+                        */
                         groupControls[key] = newControl;
                     }
                 });
@@ -5142,6 +5438,9 @@ function formatFormData(formData, dataMap, recursiveRefMap, arrayMap, returnEmpt
             }
             else if (typeof value !== 'object' || isDate(value) ||
                 (value === null && returnEmptyFields)) {
+                if (genericPointer.substring(0, 2) == "/$") {
+                    return formattedData;
+                }
                 console.error('formatFormData error: ' +
                     `Schema type not found for form value at ${genericPointer}`);
                 console.error('dataMap', dataMap);
@@ -5166,14 +5465,15 @@ function formatFormData(formData, dataMap, recursiveRefMap, arrayMap, returnEmpt
  * // {Pointer} dataPointer - JSON Pointer (string or array)
  * // {boolean = false} returnGroup - If true, return group containing control
  * // {group} - Located value (or null, if no control found)
+ * // {string} schemaPointer - string used for conditional controls coming from schema if/then/else
  */
-function getControl(formGroup, dataPointer, returnGroup = false) {
+function getControl(formGroup, dataPointer, returnGroup = false, schemaPointer) {
     if (!isObject(formGroup) || !JsonPointer.isJsonPointer(dataPointer)) {
         if (!JsonPointer.isJsonPointer(dataPointer)) {
             // If dataPointer input is not a valid JSON pointer, check to
             // see if it is instead a valid object path, using dot notaion
             if (typeof dataPointer === 'string') {
-                const formControl = formGroup.get(dataPointer);
+                const formControl = formGroup.get(path2ControlKey(schemaPointer || "")) || formGroup.get(dataPointer);
                 if (formControl) {
                     return formControl;
                 }
@@ -5193,7 +5493,7 @@ function getControl(formGroup, dataPointer, returnGroup = false) {
     // try using formGroup.get() to return the control
     if (typeof formGroup.get === 'function' &&
         dataPointerArray.every(key => key.indexOf('.') === -1)) {
-        const formControl = formGroup.get(dataPointerArray.join('.'));
+        const formControl = formGroup.get(path2ControlKey(schemaPointer || "")) || formGroup.get(dataPointerArray.join('.'));
         if (formControl) {
             return formControl;
         }
@@ -5221,6 +5521,68 @@ function getControl(formGroup, dataPointer, returnGroup = false) {
     }
     return subGroup;
 }
+/**
+ * 'setControl' function
+ *
+ * Uses a JSON Pointer for a data object to retrieve a control from
+ * an Angular formGroup or formGroup template. (Note: though a formGroup
+ * template is much simpler, its basic structure is idential to a formGroup).
+ *
+ * If the optional third parameter 'returnGroup' is set to TRUE, the group
+ * containing the control is returned, rather than the control itself.
+ *
+ * // {FormGroup} formGroup - Angular FormGroup to get value from
+ * // {Pointer} dataPointer - JSON Pointer (string or array)
+ * // {AbstractControl} control - control used to replace existing or add
+ * // {targetKey} - optional string used as the new key-not implemented as yet
+ */
+function setControl(formGroup, dataPointer, control, targetKey) {
+    let dataPointerArray = JsonPointer.parse(dataPointer);
+    // If formGroup input is a real formGroup (not a formGroup template)
+    // try using formGroup.get() to return the control
+    /*
+    if (typeof formGroup.get === 'function' &&
+      dataPointerArray.every(key => key.indexOf('.') === -1)
+    ) {
+      formGroup.setControl(dataPointerArray.join('.'), control);
+      return;
+    }
+    */
+    let currentGroup = formGroup;
+    for (let i = 0; i < dataPointerArray.length - 1; i++) {
+        // Navigate down the form structure to find the correct nested FormGroup
+        currentGroup = currentGroup.get(dataPointerArray[i]);
+        // If it's not a FormGroup, we throw an error since we can't set a control in a non-group.
+        if (!(typeof currentGroup.setControl === 'function')) {
+            throw new Error(`Path '${dataPointerArray[i]}' is not a valid FormGroup or  FormArray.`);
+        }
+    }
+    // Now we are at the parent FormGroup, set the control at the last part of the path
+    const lastPart = dataPointerArray[dataPointerArray.length - 1];
+    // Set the control at the final path (like 'name' inside 'state')
+    currentGroup.setControl(lastPart, control);
+    // If formGroup input is a formGroup template,
+    // or formGroup.get() failed to return the control,
+    // search the formGroup object for dataPointer's control
+    //TODO needs to be adapted to setControl
+    /*
+    let subGroup = formGroup;
+    for (const key of dataPointerArray) {
+      if (hasOwn(subGroup, 'controls')) { subGroup = subGroup.controls; }
+      if (isArray(subGroup) && (key === '-')) {
+        subGroup = subGroup[subGroup.length - 1];
+      } else if (hasOwn(subGroup, key)) {
+        subGroup = subGroup[key];
+      } else {
+        console.error(`getControl error: Unable to find "${key}" item in FormGroup.`);
+        console.error(dataPointer);
+        console.error(formGroup);
+        return;
+      }
+    }
+    return subGroup;
+    */
+}
 
 /**
  * Layout function library:
@@ -5837,16 +6199,19 @@ function fixNestedArrayLayout(options) {
  * //  { string = '' } dataPointerPrefix -
  * //
  */
-function buildLayoutFromSchema(jsf, widgetLibrary, nodeValue = null, schemaPointer = '', dataPointer = '', arrayItem = false, arrayItemType = null, removable = null, forRefLibrary = false, dataPointerPrefix = '') {
-    const schema = JsonPointer.get(jsf.schema, schemaPointer);
+function buildLayoutFromSchema(jsf, widgetLibrary, nodeValue = null, schemaPointer = '', dataPointer = '', arrayItem = false, arrayItemType = null, removable = null, forRefLibrary = false, dataPointerPrefix = '', jsonSchema) {
+    const jsSchema = jsonSchema || jsf.schema;
+    const schema = JsonPointer.get(jsSchema, schemaPointer);
+    //JsonPointer.get(jsf.schema, schemaPointer);
     if (!hasOwn(schema, 'type') && !hasOwn(schema, '$ref') &&
-        !hasOwn(schema, 'x-schema-form')) {
+        !hasOwn(schema, 'x-schema-form')
+        && !hasOwn(schema, 'if') && !hasOwn(schema, 'then') && !hasOwn(schema, 'else')) {
         return null;
     }
     const newNodeType = getInputType(schema);
     if (!isDefined(nodeValue) && (jsf.formOptions.setSchemaDefaults === true ||
         (jsf.formOptions.setSchemaDefaults === 'auto' && isEmpty(jsf.formValues)))) {
-        nodeValue = JsonPointer.get(jsf.schema, schemaPointer + '/default');
+        nodeValue = JsonPointer.get(jsSchema, schemaPointer + '/default');
     }
     let newNode = {
         _id: forRefLibrary ? null : uniqueId(),
@@ -5854,7 +6219,7 @@ function buildLayoutFromSchema(jsf, widgetLibrary, nodeValue = null, schemaPoint
         dataPointer: JsonPointer.toGenericPointer(dataPointer, jsf.arrayMap),
         dataType: schema.type || (hasOwn(schema, '$ref') ? '$ref' : null),
         options: {},
-        required: isInputRequired(jsf.schema, schemaPointer),
+        required: isInputRequired(jsSchema, schemaPointer),
         type: newNodeType,
         widget: widgetLibrary.getWidget(newNodeType),
     };
@@ -5914,6 +6279,89 @@ function buildLayoutFromSchema(jsf, widgetLibrary, nodeValue = null, schemaPoint
                     newSection.push(innerItem);
                 }
             });
+            //treat allOf the same as any of but need to add an extra
+            //condition for which anyOf item is to be rendered 
+            ["allOf", "anyOf", "oneOf"].forEach(ofType => {
+                if (hasOwn(schema, ofType) && isArray(schema[ofType])) {
+                    let outerOneOfItem;
+                    if (ofType == "oneOf") {
+                        outerOneOfItem = buildLayoutFromSchema(jsf, widgetLibrary, schema.oneOf, //{type:"tabarray",items:schema.oneOf},
+                        "/", //schemaPointer + `/${ofType}`,
+                        dataPointer, false, null, null, forRefLibrary, dataPointerPrefix, 
+                        //{type:"tabarray",items:schema.oneOf,oneOf:schema.oneOf}
+                        { type: "one-of", items: schema.oneOf, oneOf: schema.oneOf });
+                        //outerItem.items=cloneDeep(newSection);
+                        //newSection.length=0;
+                        newSection.push(outerOneOfItem);
+                    }
+                    schema[ofType].forEach((ofItem, ind) => {
+                        const keySchemaPointer = `/${ofType}/${ind}`;
+                        const innerItem = buildLayoutFromSchema(jsf, widgetLibrary, ofItem, schemaPointer + keySchemaPointer, dataPointer, false, null, null, forRefLibrary, dataPointerPrefix);
+                        if (innerItem) {
+                            //newSection.push(innerItem);
+                            if (innerItem.items) {
+                                innerItem.items.forEach(innerItemLevel2 => {
+                                    const l2SchemaPointer = hasOwn(ofItem, 'properties') ?
+                                        '/properties/' + innerItemLevel2.name : innerItemLevel2.name;
+                                    innerItemLevel2.oneOfPointer = schemaPointer + keySchemaPointer + l2SchemaPointer;
+                                    innerItemLevel2.schemaPointer = innerItemLevel2.oneOfPointer;
+                                });
+                            }
+                            if (isArray(innerItem)) {
+                                innerItem.forEach(item => {
+                                    const l2SchemaPointer = hasOwn(ofItem, 'properties') ?
+                                        '/properties/' + item.name : item.name;
+                                    if (outerOneOfItem) {
+                                        item.oneOfPointer = schemaPointer + keySchemaPointer + l2SchemaPointer;
+                                        //schemaPointer + keySchemaPointer + item.dataPointer;
+                                        item.schemaPointer = item.oneOfPointer;
+                                        outerOneOfItem.items = outerOneOfItem.items || [];
+                                        outerOneOfItem.items.push(item);
+                                    }
+                                    else {
+                                        newSection.push(item);
+                                    }
+                                });
+                                //TODO test-might not work for more than 2 levels of nesting
+                            }
+                            else {
+                                if (outerOneOfItem) {
+                                    innerItem.oneOfPointer = schemaPointer + keySchemaPointer; // + innerItem.dataPointer;
+                                    innerItem.schemaPointer = innerItem.oneOfPointer;
+                                    outerOneOfItem.items = outerOneOfItem.items || [];
+                                    outerOneOfItem.items.push(innerItem);
+                                }
+                                else {
+                                    newSection.push(innerItem);
+                                }
+                            }
+                        }
+                    });
+                }
+            });
+            if (hasOwn(schema, "if")) {
+                ["then", "else"].forEach(con => {
+                    if (hasOwn(schema, con)) {
+                        const keySchemaPointer = `/${con}`;
+                        const negateClause = con == "else";
+                        const innerItem = buildLayoutFromSchema(jsf, widgetLibrary, nodeValue.then, schemaPointer + keySchemaPointer, dataPointer, false, null, null, forRefLibrary, dataPointerPrefix);
+                        if (innerItem) {
+                            if (isArray(innerItem)) {
+                                innerItem.forEach(item => {
+                                    item.schemaPointer = schemaPointer + keySchemaPointer + item.dataPointer;
+                                    item.options.condition = convertJSONSchemaIfToCondition(schema, negateClause);
+                                    newSection.push(item);
+                                });
+                            }
+                            else {
+                                innerItem.schemaPointer = schemaPointer + keySchemaPointer + innerItem.dataPointer;
+                                innerItem.options.condition = convertJSONSchemaIfToCondition(schema, negateClause);
+                                newSection.push(innerItem);
+                            }
+                        }
+                    }
+                });
+            }
             if (dataPointer === '' && !forRefLibrary) {
                 newNode = newSection;
             }
@@ -5930,7 +6378,7 @@ function buildLayoutFromSchema(jsf, widgetLibrary, nodeValue = null, schemaPoint
         newNode.items = [];
         newNode.options.maxItems = Math.min(schema.maxItems || 1000, newNode.options.maxItems || 1000);
         newNode.options.minItems = Math.max(schema.minItems || 0, newNode.options.minItems || 0);
-        if (!newNode.options.minItems && isInputRequired(jsf.schema, schemaPointer)) {
+        if (!newNode.options.minItems && isInputRequired(jsSchema, schemaPointer)) {
             newNode.options.minItems = 1;
         }
         if (!hasOwn(newNode.options, 'listItems')) {
@@ -6063,7 +6511,7 @@ function buildLayoutFromSchema(jsf, widgetLibrary, nodeValue = null, schemaPoint
     }
     else if (newNode.dataType === '$ref') {
         const schemaRef = JsonPointer.compile(schema.$ref);
-        const dataRef = JsonPointer.toDataPointer(schemaRef, jsf.schema);
+        const dataRef = JsonPointer.toDataPointer(schemaRef, jsSchema);
         let buttonText = '';
         // Get newNode title
         if (newNode.options.add) {
@@ -6075,7 +6523,7 @@ function buildLayoutFromSchema(jsf, widgetLibrary, nodeValue = null, schemaPoint
             // If newNode doesn't have a title, look for title of parent array item
         }
         else {
-            const parentSchema = JsonPointer.get(jsf.schema, schemaPointer, 0, -1);
+            const parentSchema = JsonPointer.get(jsSchema, schemaPointer, 0, -1);
             if (hasOwn(parentSchema, 'title')) {
                 buttonText = 'Add to ' + parentSchema.title;
             }
@@ -6093,9 +6541,9 @@ function buildLayoutFromSchema(jsf, widgetLibrary, nodeValue = null, schemaPoint
             removable: false,
             title: buttonText,
         });
-        if (isNumber(JsonPointer.get(jsf.schema, schemaPointer, 0, -1).maxItems)) {
+        if (isNumber(JsonPointer.get(jsSchema, schemaPointer, 0, -1).maxItems)) {
             newNode.options.maxItems =
-                JsonPointer.get(jsf.schema, schemaPointer, 0, -1).maxItems;
+                JsonPointer.get(jsSchema, schemaPointer, 0, -1).maxItems;
         }
         // Add layout template to layoutRefLibrary
         if (dataRef.length) {
@@ -6116,6 +6564,31 @@ function buildLayoutFromSchema(jsf, widgetLibrary, nodeValue = null, schemaPoint
             }
         }
     }
+    else if (newNode.type === 'if') {
+        const newSection = [];
+        ["then", "else"].forEach(con => {
+            if (hasOwn(schema, con)) {
+                const keySchemaPointer = `/${con}`;
+                const negateClause = con == "else";
+                const innerItem = buildLayoutFromSchema(jsf, widgetLibrary, nodeValue.then, schemaPointer + keySchemaPointer, dataPointer, false, null, null, forRefLibrary, dataPointerPrefix);
+                if (innerItem) {
+                    if (isArray(innerItem)) {
+                        innerItem.forEach(item => {
+                            item.schemaPointer = schemaPointer + keySchemaPointer + item.dataPointer;
+                            item.options.condition = convertJSONSchemaIfToCondition(schema, negateClause);
+                            newSection.push(item);
+                            newNode = newSection;
+                        });
+                    }
+                    else {
+                        innerItem.schemaPointer = schemaPointer + keySchemaPointer + innerItem.dataPointer;
+                        innerItem.options.condition = convertJSONSchemaIfToCondition(schema, negateClause);
+                        newNode = innerItem;
+                    }
+                }
+            }
+        });
+    }
     return newNode;
 }
 /**
@@ -6382,6 +6855,32 @@ class JsonSchemaFormService {
     setSortableOptions(value) {
         this.sortableOptionsSubject.next(value); // Update the sortable options value
     }
+    createAjvInstance(ajvOptions) {
+        let ajvInstance = new Ajv2019(ajvOptions);
+        ajvInstance.addMetaSchema(jsonDraft6);
+        ajvInstance.addMetaSchema(jsonDraft7);
+        addFormats(ajvInstance);
+        return ajvInstance;
+    }
+    createAndRegisterAjvInstance(ajvOptions, name) {
+        const intanceName = name || `ajv_${Date.now()}`;
+        if (this.ajvRegistry[intanceName]) {
+            throw new Error(`ajv instance with name:'${intanceName}' has already been registered`);
+        }
+        const ajvInstance = this.createAjvInstance(ajvOptions);
+        this.ajvRegistry[intanceName] = {
+            name: intanceName,
+            ajvInstance: ajvInstance,
+            ajvValidator: null
+        };
+        return this.ajvRegistry[intanceName];
+    }
+    getAjvInstance(name = 'default') {
+        return this.ajvRegistry[name].ajvInstance;
+    }
+    getAjvValidator(name = 'default') {
+        return this.ajvRegistry[name]?.ajvValidator;
+    }
     constructor() {
         this.JsonFormCompatibility = false;
         this.ReactJsonSchemaFormCompatibility = false;
@@ -6389,10 +6888,11 @@ class JsonSchemaFormService {
         this.tpldata = {};
         this.ajvOptions = {
             allErrors: true,
-            validateFormats: false,
+            //validateFormats:false,
             strict: false
         };
         this.ajv = new Ajv2019(this.ajvOptions); // AJV: Another JSON Schema Validator
+        //Being replaced by getAjvValidator()
         this.validateFormData = null; // Compiled AJV function to validate active form's schema
         this.formValues = {}; // Internal form data (may not have correct types)
         this.data = {}; // Output form data (formValues, formatted with correct data types)
@@ -6466,6 +6966,7 @@ class JsonSchemaFormService {
                 validationMessages: {} // set by setLanguage()
             }
         };
+        //TODO-review,may not be needed as sortablejs replaces dnd
         //this has been added to enable or disable the dragabble state of a component
         //using the OrderableDirective, mainly when an <input type="range"> 
         //elements are present, as the draggable attribute makes it difficult to
@@ -6478,9 +6979,19 @@ class JsonSchemaFormService {
         //nxt-sortablejs and sortablejs 
         this.sortableOptionsSubject = new BehaviorSubject({ disabled: false }); // Default value true
         this.sortableOptions$ = this.sortableOptionsSubject.asObservable();
+        this.ajvRegistry = {};
         this.setLanguage(this.language);
         this.ajv.addMetaSchema(jsonDraft6);
         this.ajv.addMetaSchema(jsonDraft7);
+        addFormats(this.ajv);
+        this.ajvRegistry['default'] = { name: 'default', ajvInstance: this.ajv, ajvValidator: null };
+        // Add custom 'duration' format using a regex
+        /*
+        this.ajv.addFormat("duration", {
+          type: "string",
+          validate: (duration) => /^P(?!$)(\d+Y)?(\d+M)?(\d+D)?(T(\d+H)?(\d+M)?(\d+S)?)?$/.test(duration)
+        });
+        */
     }
     ngOnDestroy() {
         this.fcValueChangesSubs?.unsubscribe();
@@ -6519,7 +7030,7 @@ class JsonSchemaFormService {
         this.ReactJsonSchemaFormCompatibility = false;
         this.AngularSchemaFormCompatibility = false;
         this.tpldata = {};
-        this.validateFormData = null;
+        this.validateFormData = null; //Being replaced by getAjvValidator()
         this.formValues = {};
         this.schema = {};
         this.layout = [];
@@ -6538,6 +7049,8 @@ class JsonSchemaFormService {
         this.schemaRefLibrary = {};
         this.templateRefLibrary = {};
         this.formOptions = cloneDeep(this.defaultFormOptions);
+        this.ajvRegistry = {};
+        this.ajvRegistry['default'] = { name: 'default', ajvInstance: this.ajv, ajvValidator: null };
     }
     /**
      * 'buildRemoteError' function
@@ -6569,10 +7082,10 @@ class JsonSchemaFormService {
             }
         });
     }
-    validateData(newValue, updateSubscriptions = true) {
+    validateData(newValue, updateSubscriptions = true, ajvInstanceName = 'default') {
         // Format raw form data to correct data types
         this.data = formatFormData(newValue, this.dataMap, this.dataRecursiveRefMap, this.arrayMap, this.formOptions.returnEmptyFields);
-        this.isValid = this.validateFormData(this.data);
+        this.isValid = this.getAjvValidator(ajvInstanceName)(this.data);
         this.validData = this.isValid ? this.data : null;
         const compileErrors = (errors) => {
             const compiledErrors = {};
@@ -6587,8 +7100,9 @@ class JsonSchemaFormService {
             });
             return compiledErrors;
         };
-        this.ajvErrors = this.validateFormData.errors;
-        this.validationErrors = compileErrors(this.validateFormData.errors);
+        //TODO:store avjErrors per ajvInstance in registry
+        this.ajvErrors = this.getAjvValidator(ajvInstanceName).errors;
+        this.validationErrors = compileErrors(this.ajvErrors);
         if (updateSubscriptions) {
             this.dataChanges.next(this.data);
             this.isValidChanges.next(this.isValid);
@@ -6598,16 +7112,16 @@ class JsonSchemaFormService {
     buildFormGroupTemplate(formValues = null, setValues = true) {
         this.formGroupTemplate = buildFormGroupTemplate(this, formValues, setValues);
     }
-    buildFormGroup() {
+    buildFormGroup(ajvInstanceName) {
         this.formGroup = buildFormGroup(this.formGroupTemplate);
         if (this.formGroup) {
-            this.compileAjvSchema();
-            this.validateData(this.formGroup.value);
+            this.compileAjvSchema(ajvInstanceName);
+            this.validateData(this.formGroup.value, true, ajvInstanceName);
             // Set up observables to emit data and validation info when form data changes
             if (this.formValueSubscription) {
                 this.formValueSubscription.unsubscribe();
             }
-            this.formValueSubscription = this.formGroup.valueChanges.subscribe(formValue => this.validateData(formValue));
+            this.formValueSubscription = this.formGroup.valueChanges.subscribe(formValue => this.validateData(formValue, true, ajvInstanceName));
         }
     }
     buildLayout(widgetLibrary) {
@@ -6636,15 +7150,17 @@ class JsonSchemaFormService {
             });
         }
     }
-    compileAjvSchema() {
-        if (!this.validateFormData) {
+    compileAjvSchema(ajvInstanceName = 'default') {
+        let ajvValidator = this.getAjvValidator(ajvInstanceName);
+        if (!ajvValidator) {
             // if 'ui:order' exists in properties, move it to root before compiling with ajv
             if (Array.isArray(this.schema.properties['ui:order'])) {
                 this.schema['ui:order'] = this.schema.properties['ui:order'];
                 delete this.schema.properties['ui:order'];
             }
-            this.ajv.removeSchema(this.schema);
-            this.validateFormData = this.ajv.compile(this.schema);
+            this.getAjvInstance(ajvInstanceName).removeSchema(this.schema);
+            ajvValidator = this.getAjvInstance(ajvInstanceName).compile(this.schema);
+            this.ajvRegistry[ajvInstanceName].ajvValidator = ajvValidator;
         }
     }
     buildSchemaFromData(data, requireAllFields = false) {
@@ -6806,12 +7322,23 @@ class JsonSchemaFormService {
         if (!isObject(ctx)) {
             return false;
         }
+        const layoutNode = ctx.layoutNode();
         if (isEmpty(ctx.options)) {
-            ctx.options = !isEmpty((ctx.layoutNode() || {}).options)
-                ? ctx.layoutNode().options
+            ctx.options = !isEmpty((layoutNode || {}).options)
+                ? layoutNode.options
                 : cloneDeep(this.formOptions);
         }
         ctx.formControl = this.getFormControl(ctx);
+        //introduced to check if the node  is part of ITE conditional
+        //then change or add the control
+        if (layoutNode?.schemaPointer) {
+            //before changing control, need to set the new data type for data formatting
+            const schemaType = this.dataMap.get(layoutNode?.dataPointer).get("schemaType");
+            if (schemaType != layoutNode.dataType) {
+                this.dataMap.get(layoutNode?.dataPointer).set("schemaType", layoutNode.dataType);
+            }
+            this.setFormControl(ctx, ctx.formControl);
+        }
         ctx.boundControl = bind && !!ctx.formControl;
         if (ctx.formControl) {
             ctx.controlName = this.getFormControlName(ctx);
@@ -6830,27 +7357,27 @@ class JsonSchemaFormService {
                     ? null
                     : this.formatErrors(ctx.formControl.errors, ctx.options.validationMessages)));
             this.fcValueChangesSubs = ctx.formControl.valueChanges.subscribe(value => {
-                //commented out to revert back to previous commits
-                //as seems to be causing some issues
-                /*
-               if (!!value) {
-                 ctx.controlValue = value;
-               }
-               */
-                //TODO-test,this is the original code
                 if (!isEqual$1(ctx.controlValue, value)) {
                     ctx.controlValue = value;
                 }
             });
         }
         else {
-            ctx.controlName = ctx.layoutNode().name;
-            ctx.controlValue = ctx.layoutNode().value || null;
+            ctx.controlName = layoutNode.name;
+            ctx.controlValue = layoutNode.value || null;
             const dataPointer = this.getDataPointer(ctx);
             if (bind && dataPointer) {
                 console.error(`warning: control "${dataPointer}" is not bound to the Angular FormGroup.`);
             }
         }
+        //if this is a ITE conditional field, the value would not have been
+        //set, as the control would only be initialized when the condition is true 
+        if (ctx.options?.condition) {
+            const value = JsonPointer.has(this.formValues, layoutNode.dataPointer)
+                ? JsonPointer.get(this.formValues, layoutNode.dataPointer)
+                : ctx.options?.default;
+            ctx.formControl?.setValue(value);
+        }
         return ctx.boundControl;
     }
     formatErrors(errors, validationMessages = {}) {
@@ -6932,13 +7459,48 @@ class JsonSchemaFormService {
         }
         formArray.markAsDirty();
     }
+    updateArrayMultiSelectList(ctx, selectList) {
+        this.updateArrayCheckboxList(ctx, selectList);
+        /* const formArray = <UntypedFormArray>this.getFormControl(ctx);
+    
+        // Remove all existing items
+        while (formArray.value.length) {
+          formArray.removeAt(0);
+        }
+    
+        // Re-add an item for each checked box
+        const refPointer = removeRecursiveReferences(
+          ctx.layoutNode().dataPointer + '/-',
+          this.dataRecursiveRefMap,
+          this.arrayMap
+        );
+        for (const selectItem of selectList) {
+          if (selectItem.value) {
+            const newFormControl = buildFormGroup(
+              this.templateRefLibrary[refPointer]
+            );
+            newFormControl.setValue(selectItem.value);
+            formArray.push(newFormControl);
+          }
+        }
+        formArray.markAsDirty();
+        */
+    }
     getFormControl(ctx) {
         if (!ctx || !ctx.layoutNode ||
             !isDefined(ctx.layoutNode().dataPointer) ||
             ctx.layoutNode().type === '$ref') {
             return null;
         }
-        return getControl(this.formGroup, this.getDataPointer(ctx));
+        return getControl(this.formGroup, this.getDataPointer(ctx), false, ctx.layoutNode()?.schemaPointer);
+    }
+    setFormControl(ctx, control) {
+        if (!ctx || !ctx.layoutNode ||
+            !isDefined(ctx.layoutNode().dataPointer) ||
+            ctx.layoutNode().type === '$ref') {
+            return null;
+        }
+        return setControl(this.formGroup, this.getDataPointer(ctx), control);
     }
     getFormControlValue(ctx) {
         if (!ctx || !ctx.layoutNode ||
@@ -6953,7 +7515,7 @@ class JsonSchemaFormService {
         if (!ctx || !ctx.layoutNode || !isDefined(ctx.layoutNode().dataPointer)) {
             return null;
         }
-        return getControl(this.formGroup, this.getDataPointer(ctx), true);
+        return getControl(this.formGroup, this.getDataPointer(ctx), true, ctx.layoutNode()?.schemaPointer);
     }
     getFormControlName(ctx) {
         if (!ctx || !ctx.layoutNode ||
@@ -7072,10 +7634,10 @@ class JsonSchemaFormService {
         JsonPointer.remove(this.layout, this.getLayoutPointer(ctx));
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: JsonSchemaFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: JsonSchemaFormService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: JsonSchemaFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: JsonSchemaFormService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: JsonSchemaFormService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: JsonSchemaFormService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -7105,10 +7667,10 @@ class SelectWidgetComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.6", type: SelectWidgetComponent, isStandalone: false, selector: "select-widget-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "widgetContainer", first: true, predicate: ["widgetContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: `<div #widgetContainer></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.14", type: SelectWidgetComponent, isStandalone: false, selector: "select-widget-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "widgetContainer", first: true, predicate: ["widgetContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: `<div #widgetContainer></div>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectWidgetComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -7124,10 +7686,10 @@ class NoFrameworkComponent {
         this.layoutIndex = input(undefined);
         this.dataIndex = input(undefined);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NoFrameworkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: NoFrameworkComponent, isStandalone: false, selector: "no-framework", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<select-widget-widget [dataIndex]=\"dataIndex()\" [layoutIndex]=\"layoutIndex()\" [layoutNode]=\"layoutNode()\">\r\n</select-widget-widget>", dependencies: [{ kind: "component", type: SelectWidgetComponent, selector: "select-widget-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NoFrameworkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: NoFrameworkComponent, isStandalone: false, selector: "no-framework", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<select-widget-widget [dataIndex]=\"dataIndex()\" [layoutIndex]=\"layoutIndex()\" [layoutNode]=\"layoutNode()\">\r\n</select-widget-widget>", dependencies: [{ kind: "component", type: SelectWidgetComponent, selector: "select-widget-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NoFrameworkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NoFrameworkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'no-framework', standalone: false, template: "<select-widget-widget [dataIndex]=\"dataIndex()\" [layoutIndex]=\"layoutIndex()\" [layoutNode]=\"layoutNode()\">\r\n</select-widget-widget>" }]
         }] });
@@ -7140,10 +7702,10 @@ class NoFramework extends Framework {
         this.text = 'None (plain HTML)';
         this.framework = NoFrameworkComponent;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NoFramework, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NoFramework }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NoFramework, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NoFramework }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NoFramework, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NoFramework, decorators: [{
             type: Injectable
         }] });
 
@@ -7165,10 +7727,10 @@ class ElementAttributeDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ElementAttributeDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: ElementAttributeDirective, isStandalone: false, selector: "[attributes]", inputs: { attributes: "attributes" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ElementAttributeDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: ElementAttributeDirective, isStandalone: false, selector: "[attributes]", inputs: { attributes: "attributes" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ElementAttributeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ElementAttributeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[attributes]',
@@ -7205,29 +7767,33 @@ class AddReferenceComponent {
         return parent.layoutNode.add ||
             this.jsf.setArrayItemTitle(parent, this.layoutNode(), this.itemCount);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AddReferenceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: AddReferenceComponent, isStandalone: false, selector: "add-reference-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <button *ngIf="showAddButton"
-      [class]="options?.fieldHtmlClass || ''"
-      [disabled]="options?.readonly"
-      (click)="addItem($event)">
-      <span *ngIf="options?.icon" [class]="options?.icon"></span>
-      <span *ngIf="options?.title" [innerHTML]="buttonText"></span>
-    </button>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AddReferenceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: AddReferenceComponent, isStandalone: false, selector: "add-reference-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <section [class]="options?.htmlClass || ''" align="end">
+      <button *ngIf="showAddButton"
+        [class]="options?.fieldHtmlClass || ''" class="sortable-filter sortable-fixed"
+        [disabled]="options?.readonly"
+        (click)="addItem($event)">
+        <span *ngIf="options?.icon" [class]="options?.icon"></span>
+        <span *ngIf="options?.title" [innerHTML]="buttonText"></span>
+      </button>
+    </section>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AddReferenceComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AddReferenceComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
                     selector: 'add-reference-widget',
                     template: `
-    <button *ngIf="showAddButton"
-      [class]="options?.fieldHtmlClass || ''"
-      [disabled]="options?.readonly"
-      (click)="addItem($event)">
-      <span *ngIf="options?.icon" [class]="options?.icon"></span>
-      <span *ngIf="options?.title" [innerHTML]="buttonText"></span>
-    </button>`,
+    <section [class]="options?.htmlClass || ''" align="end">
+      <button *ngIf="showAddButton"
+        [class]="options?.fieldHtmlClass || ''" class="sortable-filter sortable-fixed"
+        [disabled]="options?.readonly"
+        (click)="addItem($event)">
+        <span *ngIf="options?.icon" [class]="options?.icon"></span>
+        <span *ngIf="options?.title" [innerHTML]="buttonText"></span>
+      </button>
+    </section>`,
                     changeDetection: ChangeDetectionStrategy.Default,
                     standalone: false
                 }]
@@ -7254,8 +7820,11 @@ class ButtonComponent {
             this.jsf.updateValue(this, event.target.value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: ButtonComponent, isStandalone: false, selector: "button-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    ngOnDestroy() {
+        this.jsf.updateValue(this, null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: ButtonComponent, isStandalone: false, selector: "button-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div
       [class]="options?.htmlClass || ''">
       <button
@@ -7273,7 +7842,7 @@ class ButtonComponent {
       </button>
     </div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -7324,8 +7893,11 @@ class CheckboxComponent {
     get isChecked() {
         return this.jsf.getFormControlValue(this) === this.trueValue;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: CheckboxComponent, isStandalone: false, selector: "checkbox-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    ngOnDestroy() {
+        this.jsf.updateValue(this, null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: CheckboxComponent, isStandalone: false, selector: "checkbox-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <label
       [attr.for]="'control' + layoutNode()?._id"
       [class]="options?.itemLabelHtmlClass || ''">
@@ -7357,7 +7929,7 @@ class CheckboxComponent {
         [innerHTML]="options?.title"></span>
     </label>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -7429,8 +8001,15 @@ class CheckboxesComponent {
             this.jsf.updateArrayCheckboxList(this, this.checkboxList);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CheckboxesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: CheckboxesComponent, isStandalone: false, selector: "checkboxes-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    //TODO review this
+    ngOnDestroy() {
+        //this.jsf.updateValue(this, null);
+        let nullVal = [];
+        this.formControl.reset(nullVal);
+        this.controlValue = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: CheckboxesComponent, isStandalone: false, selector: "checkboxes-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <label *ngIf="options?.title"
       [class]="options?.labelHtmlClass || ''"
       [style.display]="options?.notitle ? 'none' : ''"
@@ -7480,7 +8059,7 @@ class CheckboxesComponent {
       </div>
     </div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CheckboxesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxesComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -7555,10 +8134,13 @@ class FileComponent {
     updateValue(event) {
         this.jsf.updateValue(this, event.target.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: FileComponent, isStandalone: false, selector: "file-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ``, isInline: true }); }
+    ngOnDestroy() {
+        this.jsf.updateValue(this, null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: FileComponent, isStandalone: false, selector: "file-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ``, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FileComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -7580,8 +8162,11 @@ class HiddenComponent {
     ngOnInit() {
         this.jsf.initializeControl(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: HiddenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: HiddenComponent, isStandalone: false, selector: "hidden-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    ngOnDestroy() {
+        this.jsf.updateValue(this, null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HiddenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: HiddenComponent, isStandalone: false, selector: "hidden-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <input *ngIf="boundControl"
       [formControl]="formControl"
       [id]="'control' + layoutNode()?._id"
@@ -7594,7 +8179,7 @@ class HiddenComponent {
       type="hidden"
       [value]="controlValue">`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: HiddenComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HiddenComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -7636,8 +8221,11 @@ class InputComponent {
     updateValue(event) {
         this.jsf.updateValue(this, event.target.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: InputComponent, isStandalone: false, selector: "input-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    ngOnDestroy() {
+        this.jsf.updateValue(this, null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: InputComponent, isStandalone: false, selector: "input-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div [class]="options?.htmlClass || ''" class="sortable-filter" >
       <label *ngIf="options?.title"
         [attr.for]="'control' + layoutNode()?._id"
@@ -7684,7 +8272,7 @@ class InputComponent {
         </datalist>
     </div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ElementAttributeDirective, selector: "[attributes]", inputs: ["attributes"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: InputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -7752,13 +8340,13 @@ class MessageComponent {
         this.message = this.options.help || this.options.helpvalue ||
             this.options.msg || this.options.message;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: MessageComponent, isStandalone: false, selector: "message-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: MessageComponent, isStandalone: false, selector: "message-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <span *ngIf="message"
       [class]="options?.labelHtmlClass || ''"
       [innerHTML]="message"></span>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -7777,10 +8365,10 @@ class NoneComponent {
         this.layoutIndex = input(undefined);
         this.dataIndex = input(undefined);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: NoneComponent, isStandalone: false, selector: "none-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ``, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: NoneComponent, isStandalone: false, selector: "none-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ``, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NoneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NoneComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -7818,8 +8406,11 @@ class NumberComponent {
     updateValue(event) {
         this.jsf.updateValue(this, event.target.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: NumberComponent, isStandalone: false, selector: "number-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputControl", first: true, predicate: ["inputControl"], descendants: true }, { propertyName: "div", first: true, predicate: ["divElt"], descendants: true }], ngImport: i0, template: `
+    ngOnDestroy() {
+        this.jsf.updateValue(this, null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: NumberComponent, isStandalone: false, selector: "number-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputControl", first: true, predicate: ["inputControl"], descendants: true }, { propertyName: "div", first: true, predicate: ["divElt"], descendants: true }], ngImport: i0, template: `
     <div #divElt [class]="options?.htmlClass || ''" class="sortable-filter" >
       <label *ngIf="options?.title"
         [attr.for]="'control' + layoutNode()?._id"
@@ -7866,7 +8457,7 @@ class NumberComponent {
       <span *ngIf="layoutNode()?.type === 'range'" [innerHTML]="controlValue"></span>
     </div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ElementAttributeDirective, selector: "[attributes]", inputs: ["attributes"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NumberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NumberComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -7927,6 +8518,195 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 args: ['divElt', {}]
             }] } });
 
+class SelectFrameworkComponent {
+    constructor() {
+        this.jsf = inject(JsonSchemaFormService);
+        this.newComponent = null;
+        this.layoutNode = input(undefined);
+        this.layoutIndex = input(undefined);
+        this.dataIndex = input(undefined);
+        this.widgetContainer = viewChild('widgetContainer', { read: ViewContainerRef });
+    }
+    ngOnInit() {
+        this.updateComponent();
+    }
+    ngOnChanges() {
+        this.updateComponent();
+    }
+    updateComponent() {
+        const widgetContainer = this.widgetContainer();
+        if (widgetContainer && !this.newComponent && this.jsf.framework) {
+            this.newComponent = widgetContainer.createComponent((this.jsf.framework));
+            //TODO fix all deprecated calls and test 
+            //this.widgetContainer.createComponent<any>(this.jsf.framework)
+        }
+        if (this.newComponent) {
+            for (const input of ['layoutNode', 'layoutIndex', 'dataIndex']) {
+                this.newComponent.instance[input] = this[input];
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectFrameworkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.14", type: SelectFrameworkComponent, isStandalone: false, selector: "select-framework-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "widgetContainer", first: true, predicate: ["widgetContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: `<div #widgetContainer></div>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectFrameworkComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // tslint:disable-next-line:component-selector
+                    selector: 'select-framework-widget',
+                    template: `<div #widgetContainer></div>`,
+                    standalone: false
+                }]
+        }] });
+
+class TabsComponent {
+    constructor() {
+        this.jsf = inject(JsonSchemaFormService);
+        this.selectedItem = 0;
+        this.showAddTab = true;
+        this.layoutNode = input(undefined);
+        this.layoutIndex = input(undefined);
+        this.dataIndex = input(undefined);
+    }
+    ngOnInit() {
+        this.options = this.layoutNode().options || {};
+        if (this.options.selectedTab) {
+            this.selectedItem = this.options.selectedTab;
+        }
+        this.itemCount = this.layoutNode().items.length - 1;
+        this.updateControl();
+    }
+    select(index) {
+        const layoutNode = this.layoutNode();
+        if (layoutNode.items[index].type === '$ref') {
+            this.itemCount = layoutNode.items.length;
+            this.jsf.addItem({
+                layoutNode: signal(layoutNode.items[index]),
+                layoutIndex: signal(this.layoutIndex().concat(index)),
+                dataIndex: signal(this.dataIndex().concat(index))
+            });
+            this.updateControl();
+        }
+        this.selectedItem = index;
+    }
+    updateControl() {
+        const lastItem = this.layoutNode().items[this.layoutNode().items.length - 1];
+        if (lastItem.type === '$ref' &&
+            this.itemCount >= (lastItem.options.maxItems || 1000)) {
+            this.showAddTab = false;
+        }
+    }
+    setTabTitle(item, index) {
+        return this.jsf.setArrayItemTitle(this, item, index);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: TabsComponent, isStandalone: false, selector: "tabs-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <ul
+      [class]="options?.labelHtmlClass || ''">
+      <li *ngFor="let item of layoutNode()?.items; let i = index"
+        [class]="(options?.itemLabelHtmlClass || '') + (selectedItem === i ?
+          (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
+          (' ' + options?.style?.unselected))"
+        role="presentation"
+        data-tabs>
+        <a *ngIf="showAddTab || item.type !== '$ref'"
+           [class]="'nav-link' + (selectedItem === i ? (' ' + options?.activeClass + ' ' + options?.style?.selected) :
+            (' ' + options?.style?.unselected))"
+          (click)="select(i)">
+          <input type="radio" [value]="i" *ngIf="options?.tabMode=='oneOfMode'" 
+           name="tabSelection" 
+           [(ngModel)]="selectedItem"
+           [class]="(options?.widget_radioClass || '')"
+           [value]="i" 
+           (change)="select(i)"
+          />
+          {{setTabTitle(item, i)}}
+          </a>
+      </li>
+    </ul>
+
+    <div *ngFor="let layoutItem of layoutNode()?.items; let i = index"
+      [class]="(options?.htmlClass || '') + (selectedItem != i?' ngf-hidden':'') ">
+        <!--for now the only difference between oneOfMode and the default 
+          is that oneOfMode uses the *ngIf="selectedItem === i" clause, which automatically
+          destroys the tabs that are not rendered while default mode only hide them
+          the upshot is that only the active tabs value will be used
+        -->
+      <ng-container *ngIf="options?.tabMode=='oneOfMode'">
+        <select-framework-widget *ngIf="selectedItem === i"
+          [class]="(options?.fieldHtmlClass || '') +
+            ' ' + (options?.activeClass || '') +
+            ' ' + (options?.style?.selected || '')"
+          [dataIndex]="layoutNode()?.dataType === 'array' ? (dataIndex() || []).concat(i) : dataIndex()"
+          [layoutIndex]="(layoutIndex() || []).concat(i)"
+          [layoutNode]="layoutItem"></select-framework-widget>
+      </ng-container> 
+      <ng-container *ngIf="options?.tabMode !='oneOfMode'">
+        <select-framework-widget 
+          [class]="(options?.fieldHtmlClass || '') +
+            ' ' + (options?.activeClass || '') +
+            ' ' + (options?.style?.selected || '')"
+          [dataIndex]="layoutNode()?.dataType === 'array' ? (dataIndex() || []).concat(i) : dataIndex()"
+          [layoutIndex]="(layoutIndex() || []).concat(i)"
+          [layoutNode]="layoutItem"></select-framework-widget>
+      </ng-container> 
+    </div>`, isInline: true, styles: ["a{cursor:pointer}.ngf-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SelectFrameworkComponent, selector: "select-framework-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tabs-widget', template: `
+    <ul
+      [class]="options?.labelHtmlClass || ''">
+      <li *ngFor="let item of layoutNode()?.items; let i = index"
+        [class]="(options?.itemLabelHtmlClass || '') + (selectedItem === i ?
+          (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
+          (' ' + options?.style?.unselected))"
+        role="presentation"
+        data-tabs>
+        <a *ngIf="showAddTab || item.type !== '$ref'"
+           [class]="'nav-link' + (selectedItem === i ? (' ' + options?.activeClass + ' ' + options?.style?.selected) :
+            (' ' + options?.style?.unselected))"
+          (click)="select(i)">
+          <input type="radio" [value]="i" *ngIf="options?.tabMode=='oneOfMode'" 
+           name="tabSelection" 
+           [(ngModel)]="selectedItem"
+           [class]="(options?.widget_radioClass || '')"
+           [value]="i" 
+           (change)="select(i)"
+          />
+          {{setTabTitle(item, i)}}
+          </a>
+      </li>
+    </ul>
+
+    <div *ngFor="let layoutItem of layoutNode()?.items; let i = index"
+      [class]="(options?.htmlClass || '') + (selectedItem != i?' ngf-hidden':'') ">
+        <!--for now the only difference between oneOfMode and the default 
+          is that oneOfMode uses the *ngIf="selectedItem === i" clause, which automatically
+          destroys the tabs that are not rendered while default mode only hide them
+          the upshot is that only the active tabs value will be used
+        -->
+      <ng-container *ngIf="options?.tabMode=='oneOfMode'">
+        <select-framework-widget *ngIf="selectedItem === i"
+          [class]="(options?.fieldHtmlClass || '') +
+            ' ' + (options?.activeClass || '') +
+            ' ' + (options?.style?.selected || '')"
+          [dataIndex]="layoutNode()?.dataType === 'array' ? (dataIndex() || []).concat(i) : dataIndex()"
+          [layoutIndex]="(layoutIndex() || []).concat(i)"
+          [layoutNode]="layoutItem"></select-framework-widget>
+      </ng-container> 
+      <ng-container *ngIf="options?.tabMode !='oneOfMode'">
+        <select-framework-widget 
+          [class]="(options?.fieldHtmlClass || '') +
+            ' ' + (options?.activeClass || '') +
+            ' ' + (options?.style?.selected || '')"
+          [dataIndex]="layoutNode()?.dataType === 'array' ? (dataIndex() || []).concat(i) : dataIndex()"
+          [layoutIndex]="(layoutIndex() || []).concat(i)"
+          [layoutNode]="layoutItem"></select-framework-widget>
+      </ng-container> 
+    </div>`, standalone: false, styles: ["a{cursor:pointer}.ngf-hidden{display:none}\n"] }]
+        }] });
+
 // TODO: Add this control
 class OneOfComponent {
     constructor() {
@@ -7939,20 +8719,84 @@ class OneOfComponent {
     }
     ngOnInit() {
         this.options = this.layoutNode().options || {};
+        this.options.tabMode = "oneOfMode";
+        this.options.selectedTab = this.findSelectedTab();
+        //this.options.description=this.options.description||"choose one of";
         this.jsf.initializeControl(this);
     }
+    findSelectedTab() {
+        //TODO test- this.jsf.formValues seems to be the initial data supplied to the form
+        //while the jsf.formGroup value is derived from the actual controls
+        //let formValue=this.jsf.getFormControlValue(this);
+        let foundInd = -1;
+        //seach for non null value
+        if (this.layoutNode().items) {
+            this.layoutNode().items.forEach((layoutItem, ind) => {
+                let formValue = JsonPointer.get(this.jsf.formValues, layoutItem.dataPointer);
+                if (layoutItem.oneOfPointer) {
+                    let controlKey = path2ControlKey(layoutItem.oneOfPointer);
+                    let fname = layoutItem.name;
+                    if (hasOwn(this.jsf.formGroup.controls, controlKey) &&
+                        (formValue || hasNonNullValue(this.jsf.formGroup.controls[controlKey].value))
+                    //hasOwn(formValue,fname) && hasOwn(this.jsf.formGroup.controls,controlKey) 
+                    // && (formValue[fname] || this.jsf.formGroup.controls[controlKey].value)
+                    //&&isEqual(formValue[fname],this.jsf.formGroup.controls[controlKey].value)
+                    ) {
+                        foundInd = ind;
+                    }
+                    //foundInd=formValue[controlKey]!=null?ind:foundInd;
+                    //if no exact match found, then search in descendant values
+                    //to see which one of item matches
+                    if (foundInd == -1) {
+                        //find all descendant oneof paths
+                        let descendantOneOfControlNames = Object.keys(this.jsf.formGroup.controls).filter(controlName => {
+                            return controlName.startsWith(controlKey);
+                        });
+                        descendantOneOfControlNames.forEach(controlName => {
+                            let parts = controlName.split('$');
+                            let fieldName = parts[parts.length - 1];
+                            let controlValue = this.jsf.formGroup.controls[controlName].value;
+                            if (isObject$1(formValue) && hasOwn(formValue, fieldName) &&
+                                formValue[fieldName] == controlValue
+                            //formValue[fieldName]||controlValue
+                            ) {
+                                foundInd = ind;
+                            }
+                            else //if(formValue || controlValue){
+                             if (isEqual$2(formValue, controlValue)) {
+                                foundInd = ind;
+                            }
+                        });
+                        //now need to compare values
+                    }
+                }
+            });
+        }
+        return Math.max(foundInd, 0);
+    }
     updateValue(event) {
         this.jsf.updateValue(this, event.target.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OneOfComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: OneOfComponent, isStandalone: false, selector: "one-of-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ``, isInline: true }); }
+    ngOnDestroy() {
+        //this.jsf.updateValue(this, null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OneOfComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: OneOfComponent, isStandalone: false, selector: "one-of-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<h4>{{this.options?.description}}</h4>
+    <tabs-widget #tabs [layoutNode]="layoutNode()" 
+    [layoutIndex]="layoutIndex()" 
+    [dataIndex]="dataIndex()" >
+    </tabs-widget>`, isInline: true, dependencies: [{ kind: "component", type: TabsComponent, selector: "tabs-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OneOfComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OneOfComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
                     selector: 'one-of-widget',
-                    template: ``,
+                    template: `<h4>{{this.options?.description}}</h4>
+    <tabs-widget #tabs [layoutNode]="layoutNode()" 
+    [layoutIndex]="layoutIndex()" 
+    [dataIndex]="dataIndex()" >
+    </tabs-widget>`,
                     standalone: false
                 }]
         }] });
@@ -7981,8 +8825,11 @@ class RadiosComponent {
     updateValue(event) {
         this.jsf.updateValue(this, event.target.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadiosComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: RadiosComponent, isStandalone: false, selector: "radios-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    ngOnDestroy() {
+        this.jsf.updateValue(this, null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RadiosComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: RadiosComponent, isStandalone: false, selector: "radios-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <label *ngIf="options?.title"
       [attr.for]="'control' + layoutNode()?._id"
       [class]="options?.labelHtmlClass || ''"
@@ -8039,7 +8886,7 @@ class RadiosComponent {
       </div>
     </div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadiosComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RadiosComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -8104,47 +8951,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 }]
         }] });
 
-class SelectFrameworkComponent {
-    constructor() {
-        this.jsf = inject(JsonSchemaFormService);
-        this.newComponent = null;
-        this.layoutNode = input(undefined);
-        this.layoutIndex = input(undefined);
-        this.dataIndex = input(undefined);
-        this.widgetContainer = viewChild('widgetContainer', { read: ViewContainerRef });
-    }
-    ngOnInit() {
-        this.updateComponent();
-    }
-    ngOnChanges() {
-        this.updateComponent();
-    }
-    updateComponent() {
-        const widgetContainer = this.widgetContainer();
-        if (widgetContainer && !this.newComponent && this.jsf.framework) {
-            this.newComponent = widgetContainer.createComponent((this.jsf.framework));
-            //TODO fix all deprecated calls and test 
-            //this.widgetContainer.createComponent<any>(this.jsf.framework)
-        }
-        if (this.newComponent) {
-            for (const input of ['layoutNode', 'layoutIndex', 'dataIndex']) {
-                this.newComponent.instance[input] = this[input];
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectFrameworkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.6", type: SelectFrameworkComponent, isStandalone: false, selector: "select-framework-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "widgetContainer", first: true, predicate: ["widgetContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: `<div #widgetContainer></div>`, isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectFrameworkComponent, decorators: [{
-            type: Component,
-            args: [{
-                    // tslint:disable-next-line:component-selector
-                    selector: 'select-framework-widget',
-                    template: `<div #widgetContainer></div>`,
-                    standalone: false
-                }]
-        }] });
-
 /**
  * OrderableDirective
  *
@@ -8260,10 +9066,10 @@ class OrderableDirective {
             this.draggableStateSubscription.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OrderableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.6", type: OrderableDirective, isStandalone: false, selector: "[orderable]", inputs: { orderable: { classPropertyName: "orderable", publicName: "orderable", isSignal: true, isRequired: false, transformFunction: null }, layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OrderableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", type: OrderableDirective, isStandalone: false, selector: "[orderable]", inputs: { orderable: { classPropertyName: "orderable", publicName: "orderable", isSignal: true, isRequired: false, transformFunction: null }, layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OrderableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OrderableDirective, decorators: [{
             type: Directive,
             args: [{
                     // tslint:disable-next-line:directive-selector
@@ -8301,6 +9107,12 @@ class RootComponent {
                 };
                 //must set moveLayout to false as nxtSortable already moves it
                 this.jsf.moveArrayItem(itemCtx, evt.oldIndex, evt.newIndex, false);
+            },
+            onMove: function (/**Event*/ evt, /**Event*/ originalEvent) {
+                if (evt.related.classList.contains("sortable-fixed")) {
+                    //console.log(evt.related);
+                    return false;
+                }
             }
         };
     }
@@ -8317,6 +9129,12 @@ class RootComponent {
         }
         return result;
     }
+    //TODO also need to think of other types such as button which can be
+    //created by an arbitrary layout
+    isFixed(node) {
+        let result = node.type == '$ref';
+        return result;
+    }
     // Set attributes for flexbox child
     // (container attributes are set in section.component)
     getFlexAttribute(node, attribute) {
@@ -8345,8 +9163,8 @@ class RootComponent {
             this.sortableOptionsSubscription.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: RootComponent, isStandalone: false, selector: "root-widget", inputs: { dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, isOrderable: { classPropertyName: "isOrderable", publicName: "isOrderable", isSignal: true, isRequired: false, transformFunction: null }, isFlexItem: { classPropertyName: "isFlexItem", publicName: "isFlexItem", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: RootComponent, isStandalone: false, selector: "root-widget", inputs: { dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, isOrderable: { classPropertyName: "isOrderable", publicName: "isOrderable", isSignal: true, isRequired: false, transformFunction: null }, isFlexItem: { classPropertyName: "isFlexItem", publicName: "isFlexItem", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div [class.flex-inherit]="true" #sortableContainter [nxtSortablejs]="layout()" [config]="sortableConfig" (init)="sortableInit($event)">
       <div *ngFor="let layoutItem of layout(); let i = index"
         [class.form-flex-item]="isFlexItem()"
@@ -8356,6 +9174,7 @@ class RootComponent {
         [style.flex-shrink]="getFlexAttribute(layoutItem, 'flex-shrink')"
         [style.order]="(layoutItem.options || {}).order"
         [class.sortable-filter]="!isDraggable(layoutItem)"
+        [class.sortable-fixed]="isFixed(layoutItem)"
         >
         <!--NB orderable directive is not used but has been left in for now and set to false
           otherwise the compiler won't recognize dataIndex and other dependent attributes
@@ -8366,6 +9185,7 @@ class RootComponent {
           [layoutNode]="layoutItem"
           [orderable]="false"
           [class.sortable-filter]="!isDraggable(layoutItem)"
+          [class.sortable-fixed]="isFixed(layoutItem)"
           >
           <select-framework-widget *ngIf="showWidget(layoutItem)"
             [dataIndex]="layoutItem?.arrayItem ? (dataIndex() || []).concat(i) : (dataIndex() || [])"
@@ -8376,7 +9196,7 @@ class RootComponent {
     </div>
     `, isInline: true, styles: ["[draggable=true]{transition:all .15s cubic-bezier(.4,0,.2,1)}[draggable=true]:hover{cursor:move;box-shadow:2px 2px 4px #0003;position:relative;z-index:10;margin:-1px 1px 1px -1px}[draggable=true].drag-target-top{box-shadow:0 -2px #000;position:relative;z-index:20}[draggable=true].drag-target-bottom{box-shadow:0 2px #000;position:relative;z-index:20}.flex-inherit{display:inherit;flex-flow:inherit;flex-wrap:inherit;flex-direction:inherit;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.SortablejsDirective, selector: "[nxtSortablejs]", inputs: ["nxtSortablejs", "sortablejsContainer", "config", "cloneFunction"], outputs: ["init"] }, { kind: "component", type: SelectFrameworkComponent, selector: "select-framework-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }, { kind: "directive", type: OrderableDirective, selector: "[orderable]", inputs: ["orderable", "layoutNode", "layoutIndex", "dataIndex"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RootComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RootComponent, decorators: [{
             type: Component,
             args: [{ selector: 'root-widget', template: `
     <div [class.flex-inherit]="true" #sortableContainter [nxtSortablejs]="layout()" [config]="sortableConfig" (init)="sortableInit($event)">
@@ -8388,6 +9208,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
         [style.flex-shrink]="getFlexAttribute(layoutItem, 'flex-shrink')"
         [style.order]="(layoutItem.options || {}).order"
         [class.sortable-filter]="!isDraggable(layoutItem)"
+        [class.sortable-fixed]="isFixed(layoutItem)"
         >
         <!--NB orderable directive is not used but has been left in for now and set to false
           otherwise the compiler won't recognize dataIndex and other dependent attributes
@@ -8398,6 +9219,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
           [layoutNode]="layoutItem"
           [orderable]="false"
           [class.sortable-filter]="!isDraggable(layoutItem)"
+          [class.sortable-fixed]="isFixed(layoutItem)"
           >
           <select-framework-widget *ngIf="showWidget(layoutItem)"
             [dataIndex]="layoutItem?.arrayItem ? (dataIndex() || []).concat(i) : (dataIndex() || [])"
@@ -8470,8 +9292,8 @@ class SectionComponent {
                 return this.options[attribute];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: SectionComponent, isStandalone: false, selector: "section-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: SectionComponent, isStandalone: false, selector: "section-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div *ngIf="containerType === 'div'"
       [class]="options?.htmlClass || ''"
       [class.expandable]="options?.expandable && !expanded"
@@ -8534,7 +9356,7 @@ class SectionComponent {
       </div>
     </fieldset>`, isInline: true, styles: [".legend{font-weight:700}.expandable>legend:before,.expandable>label:before{content:\"\\25b6\";padding-right:.3em;font-family:auto}.expanded>legend:before,.expanded>label:before{content:\"\\25bc\";padding-right:.2em}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RootComponent, selector: "root-widget", inputs: ["dataIndex", "layoutIndex", "layout", "isOrderable", "isFlexItem"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'section-widget', template: `
     <div *ngIf="containerType === 'div'"
@@ -8606,6 +9428,7 @@ class SelectComponent {
         this.controlDisabled = false;
         this.boundControl = false;
         this.selectList = [];
+        this.selectListFlatGroup = [];
         this.isArray = isArray;
         this.layoutNode = input(undefined);
         this.layoutIndex = input(undefined);
@@ -8614,13 +9437,43 @@ class SelectComponent {
     ngOnInit() {
         this.options = this.layoutNode().options || {};
         this.selectList = buildTitleMap(this.options.titleMap || this.options.enumNames, this.options.enum, !!this.options.required, !!this.options.flatList);
+        //the selectListFlatGroup array will be used to update the formArray values
+        //while the selectList array will be bound to the form select
+        //as either a grouped select or a flat select
+        this.selectListFlatGroup = buildTitleMap(this.options.titleMap || this.options.enumNames, this.options.enum, !!this.options.required, true);
         this.jsf.initializeControl(this);
     }
+    deselectAll() {
+        this.selectListFlatGroup.forEach(selItem => {
+            selItem.checked = false;
+        });
+    }
     updateValue(event) {
-        this.jsf.updateValue(this, event.target.value);
+        this.options.showErrors = true;
+        if (this.options.multiple) {
+            if (this.controlValue?.includes(null)) {
+                this.deselectAll();
+                //this.control.setValue([]);  // Reset the form control to an empty array
+                //this.selectList=JSON.parse(JSON.stringify(this.selectList));
+                this.jsf.updateArrayMultiSelectList(this, []);
+            }
+            else {
+                this.selectListFlatGroup.forEach(selItem => {
+                    selItem.checked = this.controlValue?.indexOf(selItem.value) >= 0 ? true : false;
+                });
+                this.jsf.updateArrayMultiSelectList(this, this.selectListFlatGroup);
+            }
+            return;
+        }
+        this.jsf.updateValue(this, this.controlValue);
+    }
+    ngOnDestroy() {
+        let nullVal = this.options.multiple ? [null] : null;
+        this.formControl.reset(nullVal);
+        this.controlValue = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: SelectComponent, isStandalone: false, selector: "select-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: SelectComponent, isStandalone: false, selector: "select-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div
       [class]="options?.htmlClass || ''">
       <label *ngIf="options?.title"
@@ -8628,7 +9481,7 @@ class SelectComponent {
         [class]="options?.labelHtmlClass || ''"
         [style.display]="options?.notitle ? 'none' : ''"
         [innerHTML]="options?.title"></label>
-      <select *ngIf="boundControl"
+      <select *ngIf="boundControl && !options?.multiple"
         [formControl]="formControl"
         [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
         [attr.readonly]="options?.readonly ? 'readonly' : null"
@@ -8675,9 +9528,36 @@ class SelectComponent {
           </optgroup>
         </ng-template>
       </select>
-    </div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+      <select *ngIf="boundControl && options?.multiple"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+        [attr.readonly]="options?.readonly ? 'readonly' : null"
+        [attr.required]="options?.required"
+        [class]="options?.fieldHtmlClass || ''"
+        [disabled]="controlDisabled"
+        [id]="'control' + layoutNode()?._id"
+        [multiple]="options?.multiple"
+        [name]="controlName"
+        [(ngModel)]="controlValue"
+        (change)="updateValue($event)">
+        <ng-template ngFor let-selectItem [ngForOf]="selectList">
+          <option *ngIf="!isArray(selectItem?.items)"
+            [selected]="selectItem?.value === controlValue"
+            [value]="selectItem?.value">
+            <span [innerHTML]="selectItem?.name"></span>
+          </option>
+          <optgroup *ngIf="isArray(selectItem?.items)"
+            [label]="selectItem?.group">
+            <option *ngFor="let subItem of selectItem.items"
+              [attr.selected]="subItem?.value === controlValue"
+              [value]="subItem?.value">
+              <span [innerHTML]="subItem?.name"></span>
+            </option>
+          </optgroup>
+        </ng-template>
+      </select>
+    </div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -8690,7 +9570,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
         [class]="options?.labelHtmlClass || ''"
         [style.display]="options?.notitle ? 'none' : ''"
         [innerHTML]="options?.title"></label>
-      <select *ngIf="boundControl"
+      <select *ngIf="boundControl && !options?.multiple"
         [formControl]="formControl"
         [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
         [attr.readonly]="options?.readonly ? 'readonly' : null"
@@ -8737,6 +9617,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
           </optgroup>
         </ng-template>
       </select>
+      <select *ngIf="boundControl && options?.multiple"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+        [attr.readonly]="options?.readonly ? 'readonly' : null"
+        [attr.required]="options?.required"
+        [class]="options?.fieldHtmlClass || ''"
+        [disabled]="controlDisabled"
+        [id]="'control' + layoutNode()?._id"
+        [multiple]="options?.multiple"
+        [name]="controlName"
+        [(ngModel)]="controlValue"
+        (change)="updateValue($event)">
+        <ng-template ngFor let-selectItem [ngForOf]="selectList">
+          <option *ngIf="!isArray(selectItem?.items)"
+            [selected]="selectItem?.value === controlValue"
+            [value]="selectItem?.value">
+            <span [innerHTML]="selectItem?.name"></span>
+          </option>
+          <optgroup *ngIf="isArray(selectItem?.items)"
+            [label]="selectItem?.group">
+            <option *ngFor="let subItem of selectItem.items"
+              [attr.selected]="subItem?.value === controlValue"
+              [value]="subItem?.value">
+              <span [innerHTML]="subItem?.name"></span>
+            </option>
+          </optgroup>
+        </ng-template>
+      </select>
     </div>`,
                     standalone: false
                 }]
@@ -8754,6 +9661,7 @@ class SubmitComponent {
     ngOnDestroy() {
         this.isValidChangesSubs?.unsubscribe();
         this.isValidChangesSubs = null;
+        this.updateValue({ target: { value: null } });
     }
     ngOnInit() {
         this.options = this.layoutNode().options || {};
@@ -8777,8 +9685,8 @@ class SubmitComponent {
             this.jsf.updateValue(this, event.target.value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SubmitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: SubmitComponent, isStandalone: false, selector: "submit-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SubmitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: SubmitComponent, isStandalone: false, selector: "submit-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div
       [class]="options?.htmlClass || ''">
       <input
@@ -8794,7 +9702,7 @@ class SubmitComponent {
         (click)="updateValue($event)">
     </div>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SubmitComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SubmitComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -8828,8 +9736,8 @@ class TabComponent {
     ngOnInit() {
         this.options = this.layoutNode().options || {};
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: TabComponent, isStandalone: false, selector: "tab-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: TabComponent, isStandalone: false, selector: "tab-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div [class]="options?.htmlClass || ''">
       <root-widget
         [dataIndex]="dataIndex()"
@@ -8837,7 +9745,7 @@ class TabComponent {
         [layout]="layoutNode().items"></root-widget>
     </div>`, isInline: true, dependencies: [{ kind: "component", type: RootComponent, selector: "root-widget", inputs: ["dataIndex", "layoutIndex", "layout", "isOrderable", "isFlexItem"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -8853,107 +9761,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 }]
         }] });
 
-class TabsComponent {
-    constructor() {
-        this.jsf = inject(JsonSchemaFormService);
-        this.selectedItem = 0;
-        this.showAddTab = true;
-        this.layoutNode = input(undefined);
-        this.layoutIndex = input(undefined);
-        this.dataIndex = input(undefined);
-    }
-    ngOnInit() {
-        this.options = this.layoutNode().options || {};
-        this.itemCount = this.layoutNode().items.length - 1;
-        this.updateControl();
-    }
-    select(index) {
-        const layoutNode = this.layoutNode();
-        if (layoutNode.items[index].type === '$ref') {
-            this.itemCount = layoutNode.items.length;
-            this.jsf.addItem({
-                layoutNode: signal(layoutNode.items[index]),
-                layoutIndex: signal(this.layoutIndex().concat(index)),
-                dataIndex: signal(this.dataIndex().concat(index))
-            });
-            this.updateControl();
-        }
-        this.selectedItem = index;
-    }
-    updateControl() {
-        const lastItem = this.layoutNode().items[this.layoutNode().items.length - 1];
-        if (lastItem.type === '$ref' &&
-            this.itemCount >= (lastItem.options.maxItems || 1000)) {
-            this.showAddTab = false;
-        }
-    }
-    setTabTitle(item, index) {
-        return this.jsf.setArrayItemTitle(this, item, index);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: TabsComponent, isStandalone: false, selector: "tabs-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <ul
-      [class]="options?.labelHtmlClass || ''">
-      <li *ngFor="let item of layoutNode()?.items; let i = index"
-        [class]="(options?.itemLabelHtmlClass || '') + (selectedItem === i ?
-          (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
-          (' ' + options?.style?.unselected))"
-        role="presentation"
-        data-tabs>
-        <a *ngIf="showAddTab || item.type !== '$ref'"
-           [class]="'nav-link' + (selectedItem === i ? (' ' + options?.activeClass + ' ' + options?.style?.selected) :
-            (' ' + options?.style?.unselected))"
-          [innerHTML]="setTabTitle(item, i)"
-          (click)="select(i)"></a>
-      </li>
-    </ul>
-
-    <div *ngFor="let layoutItem of layoutNode()?.items; let i = index"
-      [class]="options?.htmlClass || ''">
-
-      <select-framework-widget *ngIf="selectedItem === i"
-        [class]="(options?.fieldHtmlClass || '') +
-          ' ' + (options?.activeClass || '') +
-          ' ' + (options?.style?.selected || '')"
-        [dataIndex]="layoutNode()?.dataType === 'array' ? (dataIndex() || []).concat(i) : dataIndex()"
-        [layoutIndex]="(layoutIndex() || []).concat(i)"
-        [layoutNode]="layoutItem"></select-framework-widget>
-
-    </div>`, isInline: true, styles: ["a{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SelectFrameworkComponent, selector: "select-framework-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TabsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tabs-widget', template: `
-    <ul
-      [class]="options?.labelHtmlClass || ''">
-      <li *ngFor="let item of layoutNode()?.items; let i = index"
-        [class]="(options?.itemLabelHtmlClass || '') + (selectedItem === i ?
-          (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
-          (' ' + options?.style?.unselected))"
-        role="presentation"
-        data-tabs>
-        <a *ngIf="showAddTab || item.type !== '$ref'"
-           [class]="'nav-link' + (selectedItem === i ? (' ' + options?.activeClass + ' ' + options?.style?.selected) :
-            (' ' + options?.style?.unselected))"
-          [innerHTML]="setTabTitle(item, i)"
-          (click)="select(i)"></a>
-      </li>
-    </ul>
-
-    <div *ngFor="let layoutItem of layoutNode()?.items; let i = index"
-      [class]="options?.htmlClass || ''">
-
-      <select-framework-widget *ngIf="selectedItem === i"
-        [class]="(options?.fieldHtmlClass || '') +
-          ' ' + (options?.activeClass || '') +
-          ' ' + (options?.style?.selected || '')"
-        [dataIndex]="layoutNode()?.dataType === 'array' ? (dataIndex() || []).concat(i) : dataIndex()"
-        [layoutIndex]="(layoutIndex() || []).concat(i)"
-        [layoutNode]="layoutItem"></select-framework-widget>
-
-    </div>`, standalone: false, styles: ["a{cursor:pointer}\n"] }]
-        }] });
-
 class TemplateComponent {
     constructor() {
         this.jsf = inject(JsonSchemaFormService);
@@ -8981,10 +9788,10 @@ class TemplateComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.6", type: TemplateComponent, isStandalone: false, selector: "template-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "widgetContainer", first: true, predicate: ["widgetContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: `<div #widgetContainer></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.14", type: TemplateComponent, isStandalone: false, selector: "template-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "widgetContainer", first: true, predicate: ["widgetContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: `<div #widgetContainer></div>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TemplateComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -9010,8 +9817,11 @@ class TextareaComponent {
     updateValue(event) {
         this.jsf.updateValue(this, event.target.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: TextareaComponent, isStandalone: false, selector: "textarea-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    ngOnDestroy() {
+        this.jsf.updateValue(this, null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: TextareaComponent, isStandalone: false, selector: "textarea-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div
       [class]="options?.htmlClass || ''">
       <label *ngIf="options?.title"
@@ -9047,7 +9857,7 @@ class TextareaComponent {
         (input)="updateValue($event)">{{controlValue}}</textarea>
     </div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -9284,10 +10094,10 @@ class WidgetLibraryService {
             activeWidgets: this.activeWidgets,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: WidgetLibraryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: WidgetLibraryService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WidgetLibraryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WidgetLibraryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: WidgetLibraryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WidgetLibraryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -9304,17 +10114,23 @@ const BASIC_WIDGETS = [
 ];
 
 class WidgetLibraryModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: WidgetLibraryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: WidgetLibraryModule, declarations: [AddReferenceComponent, OneOfComponent, ButtonComponent, CheckboxComponent, CheckboxesComponent, FileComponent, HiddenComponent, InputComponent, MessageComponent, NoneComponent, NumberComponent, RadiosComponent, RootComponent, SectionComponent, SelectComponent, SelectFrameworkComponent, SelectWidgetComponent, SubmitComponent, TabComponent, TabsComponent, TemplateComponent, TextareaComponent, OrderableDirective, ElementAttributeDirective], imports: [CommonModule, FormsModule, ReactiveFormsModule, i2$1.SortablejsModule], exports: [AddReferenceComponent, OneOfComponent, ButtonComponent, CheckboxComponent, CheckboxesComponent, FileComponent, HiddenComponent, InputComponent, MessageComponent, NoneComponent, NumberComponent, RadiosComponent, RootComponent, SectionComponent, SelectComponent, SelectFrameworkComponent, SelectWidgetComponent, SubmitComponent, TabComponent, TabsComponent, TemplateComponent, TextareaComponent, OrderableDirective, ElementAttributeDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: WidgetLibraryModule, imports: [CommonModule, FormsModule, ReactiveFormsModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WidgetLibraryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: WidgetLibraryModule, declarations: [AddReferenceComponent, OneOfComponent, ButtonComponent, CheckboxComponent, CheckboxesComponent, FileComponent, HiddenComponent, InputComponent, MessageComponent, NoneComponent, NumberComponent, RadiosComponent, RootComponent, SectionComponent, SelectComponent, SelectFrameworkComponent, SelectWidgetComponent, SubmitComponent, TabComponent, TabsComponent, TemplateComponent, TextareaComponent, OrderableDirective, ElementAttributeDirective], imports: [CommonModule, FormsModule, ReactiveFormsModule, i2$1.SortablejsModule], exports: [AddReferenceComponent, OneOfComponent, ButtonComponent, CheckboxComponent, CheckboxesComponent, FileComponent, HiddenComponent, InputComponent, MessageComponent, NoneComponent, NumberComponent, RadiosComponent, RootComponent, SectionComponent, SelectComponent, SelectFrameworkComponent, SelectWidgetComponent, SubmitComponent, TabComponent, TabsComponent, TemplateComponent, TextareaComponent, OrderableDirective, ElementAttributeDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WidgetLibraryModule, imports: [CommonModule, FormsModule, ReactiveFormsModule,
             SortablejsModule.forRoot({
                 //disabled:false,
                 //draggable:".draggableitem",//">:not(.nonsort)",//">.draggable-item",//":not(.nonsort)",//">*",//":not(.nonsort)",//":not(.non-draggable)",
                 filter: ".sortable-filter", //needed to disable dragging on input range elements, class needs to be added to the element or its parent
-                preventOnFilter: false //needed for input range elements slider do still work
+                preventOnFilter: false, //needed for input range elements slider do still work
+                onMove: function (/**Event*/ evt, /**Event*/ originalEvent) {
+                    if (evt.related.classList.contains("sortable-fixed")) {
+                        //console.log(evt.related);
+                        return false;
+                    }
+                }
             })] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: WidgetLibraryModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WidgetLibraryModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, FormsModule, ReactiveFormsModule,
@@ -9322,7 +10138,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                             //disabled:false,
                             //draggable:".draggableitem",//">:not(.nonsort)",//">.draggable-item",//":not(.nonsort)",//">*",//":not(.nonsort)",//":not(.non-draggable)",
                             filter: ".sortable-filter", //needed to disable dragging on input range elements, class needs to be added to the element or its parent
-                            preventOnFilter: false //needed for input range elements slider do still work
+                            preventOnFilter: false, //needed for input range elements slider do still work
+                            onMove: function (/**Event*/ evt, /**Event*/ originalEvent) {
+                                if (evt.related.classList.contains("sortable-fixed")) {
+                                    //console.log(evt.related);
+                                    return false;
+                                }
+                            }
                         })],
                     declarations: [...BASIC_WIDGETS, OrderableDirective, ElementAttributeDirective],
                     exports: [...BASIC_WIDGETS, OrderableDirective, ElementAttributeDirective]
@@ -9331,13 +10153,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
 
 // No framework - plain HTML controls (styles from form layout only)
 class NoFrameworkModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NoFrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: NoFrameworkModule, declarations: [NoFrameworkComponent], imports: [CommonModule, WidgetLibraryModule], exports: [NoFrameworkComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NoFrameworkModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NoFrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: NoFrameworkModule, declarations: [NoFrameworkComponent], imports: [CommonModule, WidgetLibraryModule], exports: [NoFrameworkComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NoFrameworkModule, providers: [
             { provide: Framework, useClass: NoFramework, multi: true }
         ], imports: [CommonModule, WidgetLibraryModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NoFrameworkModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NoFrameworkModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, WidgetLibraryModule],
@@ -9501,10 +10323,10 @@ class FrameworkLibraryService {
             return actFramework.unregisterTheme(name);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FrameworkLibraryService, deps: [{ token: Framework }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FrameworkLibraryService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FrameworkLibraryService, deps: [{ token: Framework }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FrameworkLibraryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FrameworkLibraryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FrameworkLibraryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -9567,7 +10389,7 @@ class JsonSchemaFormComponent {
         this.previousInputs = {
             schema: null, layout: null, data: null, options: null, framework: null,
             widgets: null, form: null, model: null, JSONSchema: null, UISchema: null,
-            formData: null, loadExternalAssets: null, debug: null,
+            formData: null, loadExternalAssets: null, debug: null, ajvOptions: null
         };
         // Recommended inputs
         this.schema = input(undefined); // The JSON Schema
@@ -9590,6 +10412,7 @@ class JsonSchemaFormComponent {
         this.loadExternalAssets = input(undefined); // Load external framework assets?
         this.debug = input(undefined); // Show debug information?
         this.theme = input(undefined); // Theme
+        this.ajvOptions = input(undefined); // ajvOptions
         // Outputs
         this.onChanges = output(); // Live unvalidated internal form data
         this.onSubmit = output(); // Complete validated form data
@@ -9811,6 +10634,7 @@ class JsonSchemaFormComponent {
             this.jsf.data) {
             // Reset all form values to defaults
             this.jsf.resetAllValues();
+            this.initializeAjv();
             this.initializeOptions(); // Update options
             this.initializeSchema(); // Update schema, schemaRefLibrary,
             // schemaRecursiveRefMap, & dataRecursiveRefMap
@@ -9861,6 +10685,18 @@ class JsonSchemaFormComponent {
             this.formInitialized = true;
         }
     }
+    /**
+   * 'initializeAjv' function
+   *
+   * Initialize ajv from 'ajvOptions'
+   */
+    initializeAjv() {
+        const form = this.form();
+        const ajvOptions = cloneDeep(this.ajvOptions()) || cloneDeep(form.ajvOptions);
+        if (ajvOptions) {
+            this.ajvInstanceName = this.jsf.createAndRegisterAjvInstance(ajvOptions).name;
+        }
+    }
     /**
      * 'initializeOptions' function
      *
@@ -9984,7 +10820,8 @@ class JsonSchemaFormComponent {
             // draft 3 (JSON Form style) and draft 4 (Angular Schema Form style)
             this.jsf.schema = convertSchemaToDraft6(this.jsf.schema);
             // Initialize ajv and compile schema
-            this.jsf.compileAjvSchema();
+            //this.jsf.compileAjvSchema();
+            //moved to initializeAjv()
             // Create schemaRefLibrary, schemaRecursiveRefMap, dataRecursiveRefMap, & arrayMap
             this.jsf.schema = resolveSchemaReferences(this.jsf.schema, this.jsf.schemaRefLibrary, this.jsf.schemaRecursiveRefMap, this.jsf.dataRecursiveRefMap, this.jsf.arrayMap);
             if (hasOwn(this.jsf.schemaRefLibrary, '')) {
@@ -10188,7 +11025,8 @@ class JsonSchemaFormComponent {
         }
         if (!isEmpty(this.jsf.schema)) {
             // If not already initialized, initialize ajv and compile schema
-            this.jsf.compileAjvSchema();
+            //this.jsf.compileAjvSchema();
+            //moved to initializeAjv()
             // Update all layout elements, add values, widgets, and validators,
             // replace any '*' with a layout built from all schema elements,
             // and update the FormGroup template with any new validators
@@ -10196,7 +11034,7 @@ class JsonSchemaFormComponent {
             // Build the Angular FormGroup template from the schema
             this.jsf.buildFormGroupTemplate(this.jsf.formValues);
             // Build the real Angular FormGroup from the FormGroup template
-            this.jsf.buildFormGroup();
+            this.jsf.buildFormGroup(this.ajvInstanceName);
         }
         if (this.jsf.formGroup) {
             // Reset initial form values
@@ -10246,10 +11084,10 @@ class JsonSchemaFormComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: JsonSchemaFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: JsonSchemaFormComponent, isStandalone: false, selector: "json-schema-form", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, framework: { classPropertyName: "framework", publicName: "framework", isSignal: true, isRequired: false, transformFunction: null }, widgets: { classPropertyName: "widgets", publicName: "widgets", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, JSONSchema: { classPropertyName: "JSONSchema", publicName: "JSONSchema", isSignal: true, isRequired: false, transformFunction: null }, UISchema: { classPropertyName: "UISchema", publicName: "UISchema", isSignal: true, isRequired: false, transformFunction: null }, formData: { classPropertyName: "formData", publicName: "formData", isSignal: true, isRequired: false, transformFunction: null }, ngModel: { classPropertyName: "ngModel", publicName: "ngModel", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, loadExternalAssets: { classPropertyName: "loadExternalAssets", publicName: "loadExternalAssets", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onChanges: "onChanges", onSubmit: "onSubmit", isValid: "isValid", validationErrors: "validationErrors", formSchema: "formSchema", formLayout: "formLayout", dataChange: "dataChange", modelChange: "modelChange", formDataChange: "formDataChange", ngModelChange: "ngModelChange" }, providers: [JsonSchemaFormService, JSON_SCHEMA_FORM_VALUE_ACCESSOR], usesOnChanges: true, ngImport: i0, template: "<form [autocomplete]=\"jsf?.formOptions?.autocomplete ? 'on' : 'off'\" class=\"json-schema-form\" (ngSubmit)=\"submitForm()\">\r\n  <root-widget [layout]=\"jsf?.layout\"></root-widget>\r\n</form>\r\n<div *ngIf=\"debug() || jsf?.formOptions?.debug\">\r\n  Debug output:\r\n  <pre>{{debugOutput}}</pre>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: RootComponent, selector: "root-widget", inputs: ["dataIndex", "layoutIndex", "layout", "isOrderable", "isFlexItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: JsonSchemaFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: JsonSchemaFormComponent, isStandalone: false, selector: "json-schema-form", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, framework: { classPropertyName: "framework", publicName: "framework", isSignal: true, isRequired: false, transformFunction: null }, widgets: { classPropertyName: "widgets", publicName: "widgets", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, JSONSchema: { classPropertyName: "JSONSchema", publicName: "JSONSchema", isSignal: true, isRequired: false, transformFunction: null }, UISchema: { classPropertyName: "UISchema", publicName: "UISchema", isSignal: true, isRequired: false, transformFunction: null }, formData: { classPropertyName: "formData", publicName: "formData", isSignal: true, isRequired: false, transformFunction: null }, ngModel: { classPropertyName: "ngModel", publicName: "ngModel", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, loadExternalAssets: { classPropertyName: "loadExternalAssets", publicName: "loadExternalAssets", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, ajvOptions: { classPropertyName: "ajvOptions", publicName: "ajvOptions", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onChanges: "onChanges", onSubmit: "onSubmit", isValid: "isValid", validationErrors: "validationErrors", formSchema: "formSchema", formLayout: "formLayout", dataChange: "dataChange", modelChange: "modelChange", formDataChange: "formDataChange", ngModelChange: "ngModelChange" }, providers: [JsonSchemaFormService, JSON_SCHEMA_FORM_VALUE_ACCESSOR], usesOnChanges: true, ngImport: i0, template: "<form [autocomplete]=\"jsf?.formOptions?.autocomplete ? 'on' : 'off'\" class=\"json-schema-form\" (ngSubmit)=\"submitForm()\">\r\n  <root-widget [layout]=\"jsf?.layout\"></root-widget>\r\n</form>\r\n<div *ngIf=\"debug() || jsf?.formOptions?.debug\">\r\n  Debug output:\r\n  <pre>{{debugOutput}}</pre>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: RootComponent, selector: "root-widget", inputs: ["dataIndex", "layoutIndex", "layout", "isOrderable", "isFlexItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: JsonSchemaFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: JsonSchemaFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'json-schema-form', changeDetection: ChangeDetectionStrategy.OnPush, providers: [JsonSchemaFormService, JSON_SCHEMA_FORM_VALUE_ACCESSOR], standalone: false, template: "<form [autocomplete]=\"jsf?.formOptions?.autocomplete ? 'on' : 'off'\" class=\"json-schema-form\" (ngSubmit)=\"submitForm()\">\r\n  <root-widget [layout]=\"jsf?.layout\"></root-widget>\r\n</form>\r\n<div *ngIf=\"debug() || jsf?.formOptions?.debug\">\r\n  Debug output:\r\n  <pre>{{debugOutput}}</pre>\r\n</div>" }]
         }], propDecorators: { value: [{
@@ -10257,13 +11095,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }] } });
 
 class JsonSchemaFormModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: JsonSchemaFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: JsonSchemaFormModule, declarations: [JsonSchemaFormComponent], imports: [CommonModule, FormsModule, ReactiveFormsModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: JsonSchemaFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: JsonSchemaFormModule, declarations: [JsonSchemaFormComponent], imports: [CommonModule, FormsModule, ReactiveFormsModule,
             WidgetLibraryModule, NoFrameworkModule], exports: [JsonSchemaFormComponent, WidgetLibraryModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: JsonSchemaFormModule, imports: [CommonModule, FormsModule, ReactiveFormsModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: JsonSchemaFormModule, imports: [CommonModule, FormsModule, ReactiveFormsModule,
             WidgetLibraryModule, NoFrameworkModule, WidgetLibraryModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: JsonSchemaFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: JsonSchemaFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -10283,5 +11121,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AddReferenceComponent, BASIC_WIDGETS, ButtonComponent, CheckboxComponent, CheckboxesComponent, ElementAttributeDirective, FileComponent, Framework, FrameworkLibraryService, HiddenComponent, InputComponent, JsonPointer, JsonSchemaFormComponent, JsonSchemaFormModule, JsonSchemaFormService, JsonValidators, MessageComponent, NoneComponent, NumberComponent, OneOfComponent, OrderableDirective, RadiosComponent, RootComponent, SectionComponent, SelectComponent, SelectFrameworkComponent, SelectWidgetComponent, SubmitComponent, TabComponent, TabsComponent, TemplateComponent, TextareaComponent, WidgetLibraryModule, WidgetLibraryService, _executeAsyncValidators, _executeValidators, _mergeErrors, _mergeObjects, _toPromise, addClasses, buildFormGroup, buildFormGroupTemplate, buildLayout, buildLayoutFromSchema, buildSchemaFromData, buildSchemaFromLayout, buildTitleMap, checkInlineType, combineAllOf, commonItems, convertSchemaToDraft6, copy, deValidationMessages, enValidationMessages, esValidationMessages, fixRequiredArrayProperties, fixTitle, forEach, forEachCopy, formatFormData, frValidationMessages, getControl, getControlValidators, getFromSchema, getInputType, getLayoutNode, getSubSchema, getTitleMapFromOneOf, getType, hasOwn, hasValue, inArray, isArray, isBoolean, isDate, isDefined, isEmpty, isFunction, isInputRequired, isInteger, isMap, isNumber, isObject, isObservable, isPrimitive, isPromise, isSet, isString, isType, itValidationMessages, mapLayout, mergeFilteredObject, mergeSchemas, ptValidationMessages, removeRecursiveReferences, resolveSchemaReferences, setRequiredFields, toJavaScriptType, toObservable, toSchemaType, toTitleCase, uniqueItems, updateInputOptions, xor, zhValidationMessages };
+export { AddReferenceComponent, BASIC_WIDGETS, ButtonComponent, CheckboxComponent, CheckboxesComponent, ElementAttributeDirective, FileComponent, Framework, FrameworkLibraryService, HiddenComponent, InputComponent, JsonPointer, JsonSchemaFormComponent, JsonSchemaFormModule, JsonSchemaFormService, JsonValidators, MessageComponent, NoneComponent, NumberComponent, OneOfComponent, OrderableDirective, RadiosComponent, RootComponent, SectionComponent, SelectComponent, SelectFrameworkComponent, SelectWidgetComponent, SubmitComponent, TabComponent, TabsComponent, TemplateComponent, TextareaComponent, WidgetLibraryModule, WidgetLibraryService, _executeAsyncValidators, _executeValidators, _mergeErrors, _mergeObjects, _toPromise, addClasses, buildFormGroup, buildFormGroupTemplate, buildLayout, buildLayoutFromSchema, buildSchemaFromData, buildSchemaFromLayout, buildTitleMap, checkInlineType, combineAllOf, commonItems, convertSchemaToDraft6, copy, deValidationMessages, enValidationMessages, esValidationMessages, fixRequiredArrayProperties, fixTitle, forEach, forEachCopy, formatFormData, frValidationMessages, getControl, getControlValidators, getFromSchema, getInputType, getLayoutNode, getSubSchema, getTitleMapFromOneOf, getType, hasNonNullValue, hasOwn, hasValue, inArray, isArray, isBoolean, isDate, isDefined, isEmpty, isFunction, isInputRequired, isInteger, isMap, isNumber, isObject, isObservable, isPrimitive, isPromise, isSet, isString, isType, itValidationMessages, mapLayout, mergeFilteredObject, mergeSchemas, path2ControlKey, ptValidationMessages, removeRecursiveReferences, resolveSchemaReferences, setControl, setRequiredFields, toJavaScriptType, toObservable, toSchemaType, toTitleCase, uniqueItems, updateInputOptions, xor, zhValidationMessages };
 //# sourceMappingURL=ng-formworks-core.mjs.map