@ng-formworks/core 19.5.8 → 19.6.2

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, pick, 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,65 @@ 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, layoutNode, negate = false) {
+    let conditionFun = "";
+    let condition = {};
+    let notOp = negate ? "!" : "";
+    // expects "dataPointer" to be like "/a/b/c"
+    //TODO-test
+    //dataPointer can be something like /cities/-/name
+    //must end up like model.cities[arrayIndices].name
+    //also check can possibly be nested array like  /cities/-/sites/-/siteName
+    //in this case must probably end up like 
+    // /cities/arrayIndices[0]/sites/arrayIndices[1]/siteName
+    //but it seems evaluatCondition support only one level for now
+    //and uses arrayIndices as the last index only -check?
+    let parentPath = layoutNode.dataPointer ? layoutNode.dataPointer
+        .split("/")
+        .slice(1, -1)
+        .map((part, ind) => {
+        let sep = ind == 0 ? "" : ".";
+        let ret = part == "-" ? "[arrayIndices]" : sep + part;
+        return ret;
+    })
+        .join("")
+        : "";
+    let modelPath = parentPath ? `model.${parentPath}` : "model";
+    let checkPath = modelPath.split(".")
+        .reduce((accumulator, currentPart, index) => {
+        const currentExpression = index === 0 ? currentPart : `${accumulator}.${currentPart}`;
+        return index === 0 ? currentExpression : `${accumulator} && ${currentExpression}`;
+    }, '');
+    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} ${checkPath} && ${modelPath}.${ifProp}+""=='${schema.if.properties[ifProp].const}'`;
+        });
+    }
+    condition["functionBody"] = `return ${notOp}(${conditionFun})`;
+    return condition;
+}
 
 function convertSchemaToDraft6(schema, options = {}) {
     let draft = options.draft || null;
@@ -4786,6 +4928,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 +4987,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,11 +5032,175 @@ 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, dataPointer);
+                                //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(jsf.schema, controlItem.schemaPointer);
+                                        //JsonPointer.get(schema,pointerPath);
+                                        let dPointer = controlItem.schemaPointer.replace(/(anyOf|allOf|oneOf|none)\/[\d]+\//g, '')
+                                            .replace(/(if|then|else|properties)\//g, '');
+                                        //JsonPointer.toDataPointer(controlItem.schemaPointer,jsf.schema);
+                                        let dVal = JsonPointer.get(nodeValue, dPointer);
+                                        let fkey = key;
+                                        let oneOfItemValue = dVal;
+                                        /*
+                                        if(hasOwn(oneOfItemSchema,"if") && controlItem.schemaPointer
+                                        && controlItem.schemaPointer.indexOf(keySchemaPointer)==0){
+                                          let parts=controlItem.schemaPointer
+                                          .split(keySchemaPointer).join('').split("/")
+                                          let thenOrElse=parts[1];
+                                          fkey=parts[parts.length-1];
+                                          oneOfItemSchema=oneOfItemSchema[thenOrElse];
+                                        }
+                                       
+                                        if(oneOfItemSchema.properties && jsf.formValues===undefined){
+                                          //check if no form data values were supplied
+                                          //then set it to default otherwise to its nodevalue
+                                          oneOfItemValue=oneOfItemSchema.default
+                                          oneOfItemValue[fkey]=oneOfItemSchema.properties[fkey]?.default;
+                                        }
+                                        if(oneOfItemSchema.properties && jsf.formValues!=undefined){
+                                          oneOfItemValue ={};
+                                          //nodeValue||{};
+                                          oneOfItemValue[fkey]=nodeValue&&nodeValue[fkey];
+                                        }
+                                        if(!oneOfItemSchema.properties && jsf.formValues==undefined){
+                                          oneOfItemValue=oneOfItemSchema.default;
+                                        }
+                                          */
+                                        if (hasOwn(controlItem, "value")) {
+                                            if (!jsf.ajv.validate(oneOfItemSchema, oneOfItemValue)) {
+                                                controlItem.value.value = null;
+                                            }
+                                            else {
+                                                ///controlItem.value.value=oneOfItemValue[fkey];
+                                                controlItem.value.value = oneOfItemSchema.properties ? oneOfItemValue[fkey] : oneOfItemValue;
+                                            }
+                                        }
+                                        //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 };
+            return { controlType, controls, validators, schemaPointer };
         case 'FormArray':
             controls = [];
             const minItems = Math.max(schema.minItems || 0, nodeOptions.get('minItems') || 0);
@@ -4938,7 +5257,7 @@ function buildFormGroupTemplate(jsf, nodeValue = null, setValues = true, schemaP
                     }
                 }
             }
-            return { controlType, controls, validators };
+            return { controlType, controls, validators, schemaPointer };
         case '$ref':
             const schemaRef = JsonPointer.compile(schema.$ref);
             const dataRef = JsonPointer.toDataPointer(schemaRef, schema);
@@ -4960,7 +5279,57 @@ function buildFormGroupTemplate(jsf, nodeValue = null, setValues = true, schemaP
                 value: setValues && isPrimitive(nodeValue) ? nodeValue : null,
                 disabled: nodeOptions.get('disabled') || false
             };
-            return { controlType, value, validators };
+            return { controlType, value, validators, schemaPointer };
+        //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
+                        //let ifItemSchema=JsonPointer.get(schema,keySchemaPointer);
+                        //let ifItemValue;
+                        Object.keys(thenTFGTemplate.controls).forEach(key => {
+                            let controlKey = thenTFGTemplate.controls[key].schemaPointer;
+                            ////let controlItem=cloneDeep(thenTFGTemplate.controls[key]);
+                            ////thenTFGTemplate.controls[key].schemaPointer || `${schemaPointer}${keySchemaPointer}/${key}`;
+                            controlKey = path2ControlKey(controlKey);
+                            let cItem = Object.assign({}, thenTFGTemplate.controls[key]);
+                            ////cItem.schemaPointer = `${schemaPointer}${keySchemaPointer}/${key}`;
+                            /*
+                           if(ifItemSchema.properties && jsf.formValues===undefined){
+                             //check if no form data values were supplied
+                             //then set it to default otherwise to its nodevalue
+                             ifItemValue=ifItemSchema.default
+                             ifItemValue[key]=ifItemSchema.properties[key]?.default;
+                           }
+                           if(ifItemSchema.properties && jsf.formValues!=undefined){
+                             ifItemValue ={};
+                             //nodeValue||{};
+                             ifItemValue[key]=nodeValue&&nodeValue[key];
+                           }
+                           if(!ifItemSchema.properties && jsf.formValues==undefined){
+                             ifItemValue=ifItemSchema.default;
+                           }
+                           if(hasOwn(cItem,"value")){
+                             if(!jsf.ajv.validate(ifItemSchema,ifItemValue)){
+                               cItem.value.value=null;
+                             }else{
+                               cItem.value.value=ifItemValue[key];
+                             }
+                           }
+                           */
+                            controls[controlKey] = cItem;
+                        });
+                    }
+                });
+            }
+            return { controlType, controls, validators, schemaPointer };
         default:
             return null;
     }
@@ -4992,7 +5361,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 +5527,9 @@ function formatFormData(formData, dataMap, recursiveRefMap, arrayMap, returnEmpt
             }
             else if (typeof value !== 'object' || isDate(value) ||
                 (value === null && returnEmptyFields)) {
+                if (genericPointer.indexOf("/$") >= 0) {
+                    return formattedData;
+                }
                 console.error('formatFormData error: ' +
                     `Schema type not found for form value at ${genericPointer}`);
                 console.error('dataMap', dataMap);
@@ -5166,14 +5554,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 +5582,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;
         }
@@ -5212,6 +5601,9 @@ function getControl(formGroup, dataPointer, returnGroup = false) {
         else if (hasOwn(subGroup, key)) {
             subGroup = subGroup[key];
         }
+        else if (schemaPointer && hasOwn(subGroup, path2ControlKey(schemaPointer))) {
+            subGroup = subGroup[path2ControlKey(schemaPointer)];
+        }
         else {
             console.error(`getControl error: Unable to find "${key}" item in FormGroup.`);
             console.error(dataPointer);
@@ -5221,6 +5613,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:
@@ -5390,7 +5844,6 @@ function buildLayout_original(jsf, widgetLibrary) {
                 schemaPointer = JsonPointer.toSchemaPointer(shortDataPointer, jsf.schema);
                 nodeDataMap.set('schemaPointer', schemaPointer);
             }
-            nodeDataMap.set('disabled', !!newNode.options.disabled);
             nodeSchema = JsonPointer.get(jsf.schema, schemaPointer);
             if (nodeSchema) {
                 if (!hasOwn(newNode, 'type')) {
@@ -5411,6 +5864,7 @@ function buildLayout_original(jsf, widgetLibrary) {
                 newNode.dataType =
                     nodeSchema.type || (hasOwn(nodeSchema, '$ref') ? '$ref' : null);
                 updateInputOptions(newNode, nodeSchema, jsf);
+                nodeDataMap.set('disabled', !!newNode.options.disabled);
                 // Present checkboxes as single control, rather than array
                 if (newNode.type === 'checkboxes' && hasOwn(nodeSchema, 'items')) {
                     updateInputOptions(newNode, nodeSchema.items, jsf);
@@ -5837,16 +6291,50 @@ 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) {
+    function applyITEConditions(builtLayout, schPointer, keySchemaPointer, negateClause, parentLayout) {
+        if (builtLayout) {
+            if (parentLayout && parentLayout.isITEItem && parentLayout.options.condition) {
+                return;
+            }
+            if (isArray(builtLayout)) {
+                builtLayout.forEach(item => {
+                    item.isITEItem = true;
+                    item.options.condition = convertJSONSchemaIfToCondition(schema, item, negateClause);
+                    applyITEConditions(item, schPointer, keySchemaPointer, negateClause, builtLayout);
+                    //item.schemaPointer = schPointer + keySchemaPointer + item.dataPointer;
+                    //item.options.condition = convertJSONSchemaIfToCondition(schema, negateClause);
+                    //newSection.push(item);
+                });
+            }
+            else if (hasOwn(builtLayout, "items")) {
+                applyITEConditions(builtLayout.items, schPointer, keySchemaPointer, negateClause, builtLayout);
+                // builtLayout.items.forEach(item => {
+                //   item.isITEItem=true;
+                //   item.options.condition = convertJSONSchemaIfToCondition(schema,item, negateClause);
+                //   applyITEConditions(item,schPointer,keySchemaPointer,negateClause)
+                // });
+            }
+            else {
+                builtLayout.isITEItem = true;
+                //builtLayout.schemaPointer = `${schPointer}${keySchemaPointer}/${builtLayout.name}`;
+                builtLayout.options.condition = convertJSONSchemaIfToCondition(schema, builtLayout, negateClause);
+                //newSection.push(builtLayout)
+            }
+        }
+    }
+    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 +6342,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),
     };
@@ -5872,6 +6360,7 @@ function buildLayoutFromSchema(jsf, widgetLibrary, nodeValue = null, schemaPoint
     if (!jsf.dataMap.has(shortDataPointer)) {
         jsf.dataMap.set(shortDataPointer, new Map());
     }
+    updateInputOptions(newNode, schema, jsf);
     const nodeDataMap = jsf.dataMap.get(shortDataPointer);
     if (!nodeDataMap.has('inputType')) {
         nodeDataMap.set('schemaPointer', schemaPointer);
@@ -5879,7 +6368,7 @@ function buildLayoutFromSchema(jsf, widgetLibrary, nodeValue = null, schemaPoint
         nodeDataMap.set('widget', newNode.widget);
         nodeDataMap.set('disabled', !!newNode.options.disabled);
     }
-    updateInputOptions(newNode, schema, jsf);
+    //updateInputOptions(newNode, schema, jsf);
     if (!newNode.options.title && newNode.name && !/^\d+$/.test(newNode.name)) {
         newNode.options.title = fixTitle(newNode.name);
     }
@@ -5907,6 +6396,7 @@ function buildLayoutFromSchema(jsf, widgetLibrary, nodeValue = null, schemaPoint
                     '/properties/' + key : '/additionalProperties';
                 const innerItem = buildLayoutFromSchema(jsf, widgetLibrary, isObject(nodeValue) ? nodeValue[key] : null, schemaPointer + keySchemaPointer, dataPointer + '/' + key, false, null, null, forRefLibrary, dataPointerPrefix);
                 if (innerItem) {
+                    innerItem.schemaPointer = schemaPointer + keySchemaPointer;
                     if (isInputRequired(schema, '/' + key)) {
                         innerItem.options.required = true;
                         jsf.fieldsRequired = true;
@@ -5914,6 +6404,102 @@ 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, ofType == "oneOf" /*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.schemaPointer; 
+                                    innerItemLevel2.oneOfPointer = innerItemLevel2.schemaPointer;
+                                });
+                            }
+                            //TODO review-will never reach here if forRefLibrary==true
+                            if (isArray(innerItem)) {
+                                let outerOneOfItemTpl = cloneDeep(newNode);
+                                outerOneOfItemTpl;
+                                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);
+                                        */
+                                        outerOneOfItemTpl.items = outerOneOfItemTpl.items || [];
+                                        outerOneOfItemTpl.items.push(item);
+                                    }
+                                    else {
+                                        newSection.push(item);
+                                    }
+                                });
+                                if (outerOneOfItem) {
+                                    outerOneOfItem.items = outerOneOfItem.items || [];
+                                    outerOneOfItem.items.push(outerOneOfItemTpl);
+                                }
+                                //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) {
+                            applyITEConditions(innerItem, schemaPointer, keySchemaPointer, negateClause);
+                            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 +6516,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 +6649,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 +6661,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 +6679,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 +6702,32 @@ 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) {
+                    applyITEConditions(innerItem, schemaPointer, keySchemaPointer, negateClause);
+                    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 +6994,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 +7027,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 +7105,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 +7118,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 +7169,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 +7188,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 +7221,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 +7239,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 +7251,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 +7289,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 +7461,24 @@ 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 && layoutNode.isITEItem ||
+            (layoutNode?.schemaPointer && layoutNode?.oneOfPointer)) {
+            //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 +7497,40 @@ 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 
+        //TODO-review need to decide which of the data sets between data,formValues and default 
+        //to use for the value
+        if (ctx.options?.condition || layoutNode?.oneOfPointer) {
+            const dataPointer = this.getDataPointer(ctx);
+            const controlValue = ctx.formControl.value;
+            const dataValue = JsonPointer.has(this.data, dataPointer) ?
+                JsonPointer.get(this.data, dataPointer) : undefined;
+            const formValue = JsonPointer.has(this.formValues, dataPointer) ?
+                JsonPointer.get(this.formValues, dataPointer) : undefined;
+            const schemaDefault = ctx.options?.default;
+            //if initial formValues was supplied and controlValue matches formValue then likely
+            //control was initially created with the formValue then set value to data value
+            //if no formValues was supplied and controlValue matches schemaDefault then likely
+            //control was initially created with the default then set value to data value
+            const value = this.formValues && isEqual$1(formValue, controlValue) ? dataValue
+                : !this.formValues && isEqual$1(schemaDefault, controlValue) ? dataValue
+                    : schemaDefault;
+            ctx.formControl?.patchValue(value);
+        }
         return ctx.boundControl;
     }
     formatErrors(errors, validationMessages = {}) {
@@ -6932,13 +7612,50 @@ 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));
+        const schemaPointer = ctx.layoutNode()?.isITEItem ? ctx.layoutNode()?.schemaPointer : null;
+        const oneOfPointer = ctx.layoutNode()?.oneOfPointer;
+        return getControl(this.formGroup, this.getDataPointer(ctx), false, schemaPointer || oneOfPointer);
+    }
+    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 ||
@@ -6946,14 +7663,18 @@ class JsonSchemaFormService {
             ctx.layoutNode().type === '$ref') {
             return null;
         }
-        const control = getControl(this.formGroup, this.getDataPointer(ctx));
+        const schemaPointer = ctx.layoutNode()?.isITEItem ? ctx.layoutNode()?.schemaPointer : null;
+        const oneOfPointer = ctx.layoutNode()?.oneOfPointer;
+        const control = getControl(this.formGroup, this.getDataPointer(ctx), false, schemaPointer || oneOfPointer);
         return control ? control.value : null;
     }
     getFormControlGroup(ctx) {
         if (!ctx || !ctx.layoutNode || !isDefined(ctx.layoutNode().dataPointer)) {
             return null;
         }
-        return getControl(this.formGroup, this.getDataPointer(ctx), true);
+        const schemaPointer = ctx.layoutNode()?.isITEItem ? ctx.layoutNode()?.schemaPointer : null;
+        const oneOfPointer = ctx.layoutNode()?.oneOfPointer;
+        return getControl(this.formGroup, this.getDataPointer(ctx), true, schemaPointer || oneOfPointer);
     }
     getFormControlName(ctx) {
         if (!ctx || !ctx.layoutNode ||
@@ -7072,10 +7793,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 +7826,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 +7845,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 +7861,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 +7886,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 +7926,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 +7979,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 +8001,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
@@ -7299,6 +8027,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 }]
         }] });
 
+///NB issue caused by sortablejs when it its destroyed
+//this mainly affects checkboxes coupled with conditions
+//-the value is rechecked
+//-see https://github.com/SortableJS/Sortable/issues/1052#issuecomment-369613072
 class CheckboxComponent {
     constructor() {
         this.jsf = inject(JsonSchemaFormService);
@@ -7314,7 +8046,8 @@ class CheckboxComponent {
         this.options = this.layoutNode().options || {};
         this.jsf.initializeControl(this);
         if (this.controlValue === null || this.controlValue === undefined) {
-            this.controlValue = this.options.title;
+            this.controlValue = false;
+            this.jsf.updateValue(this, this.falseValue);
         }
     }
     updateValue(event) {
@@ -7324,8 +8057,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 || ''">
@@ -7341,7 +8077,7 @@ class CheckboxComponent {
         type="checkbox">
       <input *ngIf="!boundControl"
         [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
-        [checked]="isChecked ? 'checked' : null"
+        [checked]="isChecked"
         [class]="(options?.fieldHtmlClass || '') + (isChecked ?
           (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
           (' ' + (options?.style?.unselected || '')))"
@@ -7357,7 +8093,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
@@ -7378,7 +8114,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
         type="checkbox">
       <input *ngIf="!boundControl"
         [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
-        [checked]="isChecked ? 'checked' : null"
+        [checked]="isChecked"
         [class]="(options?.fieldHtmlClass || '') + (isChecked ?
           (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
           (' ' + (options?.style?.unselected || '')))"
@@ -7429,8 +8165,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 +8223,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 +8298,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 +8326,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 +8343,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 +8385,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 +8436,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 +8504,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 +8529,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 +8570,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 +8621,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 +8682,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 +8883,100 @@ 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;
+                            let controlSchema = JsonPointer.get(this.jsf.schema, parts.join("/"));
+                            let schemaPointer = parts.join("/");
+                            let dPointer = schemaPointer.replace(/(anyOf|allOf|oneOf|none)\/[\d]+\//g, '')
+                                .replace(/(if|then|else|properties)\//g, '');
+                            //JsonPointer.toDataPointer(parts.join("/"),this.jsf.schema);
+                            let dVal = JsonPointer.get(this.jsf.formValues, dPointer);
+                            let compareVal = dVal; //formValue;
+                            //compare only values that are in the subschema properties
+                            if (controlSchema && controlSchema.properties) {
+                                compareVal = isObject$1(dVal) && hasOwn(dVal, fieldName) ?
+                                    pick(dVal[fieldName], Object.keys(controlSchema.properties))
+                                    : pick(dVal, Object.keys(controlSchema.properties));
+                            }
+                            /*
+                            if(isObject(compareVal) && hasOwn(compareVal,fieldName) &&
+                            isEqual(compareVal[fieldName],controlValue)
+                          ){
+                              foundInd=ind;
+                            }else //if(formValue || controlValue){
+                            if(isEqual(compareVal,controlValue)){
+                              foundInd=ind;
+                            }
+                            */
+                            if (isEqual$2(compareVal, 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 +9005,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 +9066,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 +9131,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 +9246,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,11 +9287,74 @@ 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;
+                }
             }
         };
     }
     sortableInit(sortable) {
         this.sortableObj = sortable;
+        ///NB issue caused by sortablejs when it its destroyed
+        //this mainly affects checkboxes coupled with conditions
+        //-the value is rechecked
+        //-see https://github.com/SortableJS/Sortable/issues/1052#issuecomment-369613072
+        /* attempt to monkey patch sortable js
+        const originalMethod = sortable._nulling;
+        let zone=this.zone;
+        sortable._nulling=function() {
+          console.log(`pluginEvent 2 ${pluginEvent}`)
+                zone.runOutsideAngular(() => {
+                  console.log(`pluginEvent3 ${pluginEvent}`)
+          pluginEvent('nulling', this);
+      
+          rootEl =
+          dragEl =
+          parentEl =
+          ghostEl =
+          nextEl =
+          cloneEl =
+          lastDownEl =
+          cloneHidden =
+      
+          tapEvt =
+          touchEvt =
+      
+          moved =
+          newIndex =
+          newDraggableIndex =
+          oldIndex =
+          oldDraggableIndex =
+      
+          lastTarget =
+          lastDirection =
+      
+          putSortable =
+          activeGroup =
+          Sortable.dragged =
+          Sortable.ghost =
+          Sortable.clone =
+          Sortable.active = null;
+      
+        
+            let el = this.el;
+            savedInputChecked.forEach(function (checkEl) {
+              if (el.contains(checkEl)) {
+                checkEl.checked = true;
+              }
+            });
+        
+            savedInputChecked.length =
+            lastDx =
+            lastDy = 0;
+    
+          })
+    
+        }.bind(sortable)
+        */
     }
     isDraggable(node) {
         let result = node.arrayItem && node.type !== '$ref' &&
@@ -8317,6 +9366,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 +9400,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 +9411,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 +9422,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 +9433,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 +9445,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 +9456,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 +9529,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 +9593,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 +9665,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 +9674,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 +9718,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 +9765,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 +9807,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 +9854,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 +9898,7 @@ class SubmitComponent {
     ngOnDestroy() {
         this.isValidChangesSubs?.unsubscribe();
         this.isValidChangesSubs = null;
+        this.updateValue({ target: { value: null } });
     }
     ngOnInit() {
         this.options = this.layoutNode().options || {};
@@ -8777,8 +9922,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 +9939,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 +9973,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 +9982,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 +9998,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 +10025,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 +10054,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 +10094,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 +10331,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 +10351,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 +10375,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 +10390,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 +10560,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 +10626,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 +10649,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 +10871,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 +10922,20 @@ class JsonSchemaFormComponent {
             this.formInitialized = true;
         }
     }
+    /**
+   * 'initializeAjv' function
+   *
+   * Initialize ajv from 'ajvOptions'
+   */
+    initializeAjv() {
+        const form = this.form();
+        const ajvOptions = cloneDeep(this.ajvOptions()) ||
+            (form && hasOwn(form, 'ajvOptions') && isObject(form.ajvOptions)
+                && cloneDeep(form.ajvOptions));
+        if (ajvOptions) {
+            this.ajvInstanceName = this.jsf.createAndRegisterAjvInstance(ajvOptions).name;
+        }
+    }
     /**
      * 'initializeOptions' function
      *
@@ -9984,7 +11059,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 +11264,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 +11273,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 +11323,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 +11334,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 +11360,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