@ng-formworks/core 19.6.0 → 19.6.3

package/fesm2022/ng-formworks-core.mjs

@@ -1,7 +1,7 @@
 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, signal, ElementRef, NgZone, NgModule, Inject, forwardRef, ChangeDetectorRef, output } from '@angular/core';
+import { Injectable, inject, input, viewChild, ViewContainerRef, Component, Input, Directive, ChangeDetectionStrategy, ViewChild, signal, ElementRef, NgZone, Inject, NgModule, 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';
@@ -10,7 +10,7 @@ import jsonDraft6 from 'ajv/lib/refs/json-schema-draft-06.json';
 import jsonDraft7 from 'ajv/lib/refs/json-schema-draft-07.json';
 import cloneDeep from 'lodash/cloneDeep';
 import { from, Observable, forkJoin, Subject, BehaviorSubject, lastValueFrom } from 'rxjs';
-import { some, isNil, isEmpty as isEmpty$1, isObject as isObject$1, isEqual as isEqual$2 } from 'lodash';
+import { 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';
@@ -4586,18 +4586,76 @@ function fixRequiredArrayProperties(schema) {
  * @param schema:any
  * @param negate:boolean=false
  * @returns
-
  */
-function convertJSONSchemaIfToCondition(schema, negate = false) {
+//TODO also handle ifs with mixed conditional such as allOf/oneOf etc
+/*
+
+  "if": {
+   "allOf": [
+     {
+       "properties": {
+         "animalType": {
+           "enum": ["Cat", "Fish"]
+         }
+       }
+     },
+     {
+       "properties": {
+         "color": {
+           "const": "orange"
+         }
+       }
+     }
+   ]
+ }
+
+
+
+*/
+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('.')
+        .map((_, index, array) => {
+        return array.slice(0, index + 1).join('.'); // Build each part of the path dynamically
+    }).join(' && '); // Join the parts with '&&'
+    //  .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}model.${ifProp}+""=='${schema.if.properties[ifProp].const}'`;
+            //changed to an includesList to handle cases such as 
+            const includesList = hasOwn(schema.if.properties[ifProp], "const") ? [schema.if.properties[ifProp].const]
+                : hasOwn(schema.if.properties[ifProp], "enum") ? schema.if.properties[ifProp].enum
+                    : [];
+            const includesListAsStr = includesList.map(val => { return `"${val}"`; });
+            conditionFun += `${amper} ${checkPath} && [${includesListAsStr}].includes(${modelPath}.${ifProp}+"")`;
+            //conditionFun+=`${amper} ${checkPath} && ${modelPath}.${ifProp}+""=='${schema.if.properties[ifProp].const}'`
         });
     }
     condition["functionBody"] = `return ${notOp}(${conditionFun})`;
@@ -5027,7 +5085,7 @@ function buildFormGroupTemplate(jsf, nodeValue = null, setValues = true, schemaP
                     ["then", "else"].forEach(con => {
                         if (hasOwn(schema, con)) {
                             const keySchemaPointer = `/${con}`;
-                            let thenFGTemplate = buildFormGroupTemplate(jsf, nodeValue, false, //JsonPointer.get(nodeValue, keySchemaPointer), setValues,
+                            let thenFGTemplate = buildFormGroupTemplate(jsf, nodeValue, setValues, //false,//JsonPointer.get(nodeValue, keySchemaPointer), setValues,
                             schemaPointer + keySchemaPointer, dataPointer, templatePointer + `/controls/${con}`);
                             Object.assign(controls, thenFGTemplate.controls);
                         }
@@ -5088,7 +5146,9 @@ function buildFormGroupTemplate(jsf, nodeValue = null, setValues = true, schemaP
                             if (foundKeys && foundKeys.length > 0) {
                                 const keySchemaPointer = `/${ofType}/${ind}`;
                                 //console.log(`found:${keySchemaPointer}`);
-                                let newNodeValue = JsonPointer.get(nodeValue, keySchemaPointer);
+                                let newNodeValue = nodeValue;
+                                //JsonPointer.get(nodeValue, dataPointer);
+                                //JsonPointer.get(nodeValue, keySchemaPointer);
                                 if (ofType == "oneOf") {
                                     newNodeValue = nodeValue;
                                 }
@@ -5115,16 +5175,59 @@ function buildFormGroupTemplate(jsf, nodeValue = null, setValues = true, schemaP
                                         //if key is a $oneOf key then it was inserted at the root of the controls
                                         //as form control name will be the full(escaped) path 
                                         const pointerPath = key.startsWith('$oneOf') ? controlItem.schemaPointer : keySchemaPointer;
-                                        let oneOfItemSchema = JsonPointer.get(schema, pointerPath);
-                                        let oneOfItemValue = {};
-                                        oneOfItemValue[key] = controlItem.value?.value;
-                                        if (controlItem.value && !jsf.ajv.validate(oneOfItemSchema, oneOfItemValue)) {
-                                            controlItem.value.value = null;
+                                        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, '').replace(/\/items\//g, '/-/');
+                                        dPointer = dPointer.indexOf(dataPointer) == 0
+                                            ? dPointer.substring(dataPointer.length) : dPointer;
+                                        //dataPointer+"/"+controlItem.schemaPointer.split("/").slice(-1)[0];
+                                        ////controlItem.schemaPointer.replace(/(anyOf|allOf|oneOf|none)\/[\d]+\//g, '')
+                                        ////.replace(/(if|then|else|properties)\//g, '').replace(/\/items\//g,'/-/');
+                                        //JsonPointer.toDataPointer(controlItem.schemaPointer,jsf.schema);
+                                        //console.log(`dataPointer:${dataPointer}\ndPointer:${dPointer}`)
+                                        let dVal = //JsonPointer.get(jsf.formValues,dPointer);
+                                         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]);
+                                        ///////controls[key] = cloneDeep(allOfFGTemplate.controls[key]);
                                         //add schemacontrol to root 
                                         //controls[controlKey]=controlItem
                                         controls[`_${ofType}`] = controls[`_${ofType}`] || {};
@@ -5138,7 +5241,7 @@ function buildFormGroupTemplate(jsf, nodeValue = null, setValues = true, schemaP
                 });
                 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);
@@ -5195,7 +5298,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);
@@ -5217,7 +5320,7 @@ 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':
@@ -5227,20 +5330,26 @@ function buildFormGroupTemplate(jsf, nodeValue = null, setValues = true, schemaP
                 ["then", "else"].forEach(con => {
                     if (hasOwn(schema, con)) {
                         const keySchemaPointer = `/${con}`;
-                        let thenTFGTemplate = buildFormGroupTemplate(jsf, nodeValue, false, schemaPointer + keySchemaPointer, dataPointer, templatePointer + `/controls/${con}`);
+                        let thenTFGTemplate = buildFormGroupTemplate(jsf, nodeValue, setValues, //false,
+                        schemaPointer + keySchemaPointer, dataPointer, templatePointer + `/controls/${con}`);
                         //NB same property can be in both then and else
                         //so key must be the unique path to control
-                        Object.keys(thenTFGTemplate.controls).forEach(key => {
-                            let controlKey = thenTFGTemplate.controls[key].schemaPointer || `${schemaPointer}${keySchemaPointer}/${key}`;
-                            controlKey = path2ControlKey(controlKey);
-                            let cItem = Object.assign({}, thenTFGTemplate.controls[key]);
-                            cItem.schemaPointer = `${schemaPointer}${keySchemaPointer}/${key}`;
-                            controls[controlKey] = cItem;
-                        });
+                        //let ifItemSchema=JsonPointer.get(schema,keySchemaPointer);
+                        //let ifItemValue;
+                        if (hasOwn(thenTFGTemplate, 'controls')) {
+                            Object.keys(thenTFGTemplate.controls).forEach(key => {
+                                let controlKey = thenTFGTemplate.controls[key].schemaPointer;
+                                if (controlKey) {
+                                    controlKey = path2ControlKey(controlKey);
+                                    let cItem = Object.assign({}, thenTFGTemplate.controls[key]);
+                                    controls[controlKey] = cItem;
+                                }
+                            });
+                        }
                     }
                 });
             }
-            return { controlType, controls, validators };
+            return { controlType, controls, validators, schemaPointer };
         default:
             return null;
     }
@@ -5438,7 +5547,7 @@ function formatFormData(formData, dataMap, recursiveRefMap, arrayMap, returnEmpt
             }
             else if (typeof value !== 'object' || isDate(value) ||
                 (value === null && returnEmptyFields)) {
-                if (genericPointer.substring(0, 2) == "/$") {
+                if (genericPointer.indexOf("/$") >= 0) {
                     return formattedData;
                 }
                 console.error('formatFormData error: ' +
@@ -5473,7 +5582,8 @@ function getControl(formGroup, dataPointer, returnGroup = false, schemaPointer)
             // 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(path2ControlKey(schemaPointer || "")) || formGroup.get(dataPointer);
+                const controlPath = !!schemaPointer ? path2ControlKey(schemaPointer) : dataPointer;
+                const formControl = formGroup.get(controlPath);
                 if (formControl) {
                     return formControl;
                 }
@@ -5493,7 +5603,8 @@ function getControl(formGroup, dataPointer, returnGroup = false, schemaPointer)
     // try using formGroup.get() to return the control
     if (typeof formGroup.get === 'function' &&
         dataPointerArray.every(key => key.indexOf('.') === -1)) {
-        const formControl = formGroup.get(path2ControlKey(schemaPointer || "")) || formGroup.get(dataPointerArray.join('.'));
+        const controlPath = !!schemaPointer ? path2ControlKey(schemaPointer) : dataPointerArray.join('.');
+        const formControl = formGroup.get(controlPath);
         if (formControl) {
             return formControl;
         }
@@ -5506,7 +5617,11 @@ function getControl(formGroup, dataPointer, returnGroup = false, schemaPointer)
         if (hasOwn(subGroup, 'controls')) {
             subGroup = subGroup.controls;
         }
-        if (isArray(subGroup) && (key === '-')) {
+        if (schemaPointer && hasOwn(subGroup, path2ControlKey(schemaPointer))) {
+            subGroup = subGroup[path2ControlKey(schemaPointer)];
+            return subGroup;
+        }
+        else if (isArray(subGroup) && (key === '-')) {
             subGroup = subGroup[subGroup.length - 1];
         }
         else if (hasOwn(subGroup, key)) {
@@ -5752,7 +5867,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')) {
@@ -5773,6 +5887,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);
@@ -6200,6 +6315,37 @@ function fixNestedArrayLayout(options) {
  * //
  */
 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);
@@ -6237,6 +6383,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);
@@ -6244,7 +6391,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);
     }
@@ -6272,6 +6419,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;
@@ -6296,38 +6444,50 @@ function buildLayoutFromSchema(jsf, widgetLibrary, nodeValue = null, schemaPoint
                     }
                     schema[ofType].forEach((ofItem, ind) => {
                         const keySchemaPointer = `/${ofType}/${ind}`;
-                        const innerItem = buildLayoutFromSchema(jsf, widgetLibrary, ofItem, schemaPointer + keySchemaPointer, dataPointer, false, null, null, forRefLibrary, dataPointerPrefix);
+                        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.oneOfPointer;
+                                    //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;
+                                        ////item.oneOfPointer =  schemaPointer + keySchemaPointer + l2SchemaPointer;
                                         //schemaPointer + keySchemaPointer + item.dataPointer;
-                                        item.schemaPointer = item.oneOfPointer;
-                                        outerOneOfItem.items = outerOneOfItem.items || [];
+                                        ////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;
+                                    ////innerItem.schemaPointer=innerItem.oneOfPointer; 
                                     outerOneOfItem.items = outerOneOfItem.items || [];
                                     outerOneOfItem.items.push(innerItem);
                                 }
@@ -6344,18 +6504,19 @@ function buildLayoutFromSchema(jsf, widgetLibrary, nodeValue = null, schemaPoint
                     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);
+                        const innerItem = buildLayoutFromSchema(jsf, widgetLibrary, nodeValue[con], 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);
+                                    //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);
+                                //innerItem.schemaPointer = schemaPointer + keySchemaPointer + innerItem.dataPointer;
+                                //innerItem.options.condition = convertJSONSchemaIfToCondition(schema, negateClause);
                                 newSection.push(innerItem);
                             }
                         }
@@ -6570,24 +6731,27 @@ function buildLayoutFromSchema(jsf, widgetLibrary, nodeValue = null, schemaPoint
             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);
+                const innerItem = buildLayoutFromSchema(jsf, widgetLibrary, nodeValue[con], 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);
+                            //item.schemaPointer = schemaPointer + keySchemaPointer + item.dataPointer;
+                            //item.options.condition = convertJSONSchemaIfToCondition(schema, negateClause);
                             newSection.push(item);
-                            newNode = newSection;
+                            /////// newNode = newSection
                         });
                     }
                     else {
-                        innerItem.schemaPointer = schemaPointer + keySchemaPointer + innerItem.dataPointer;
-                        innerItem.options.condition = convertJSONSchemaIfToCondition(schema, negateClause);
-                        newNode = innerItem;
+                        //innerItem.schemaPointer = schemaPointer + keySchemaPointer + innerItem.dataPointer;
+                        //innerItem.options.condition = convertJSONSchemaIfToCondition(schema, negateClause);
+                        ///////newNode = innerItem
+                        newSection.push(innerItem);
                     }
                 }
             }
         });
+        newNode = newSection;
     }
     return newNode;
 }
@@ -7331,7 +7495,8 @@ class JsonSchemaFormService {
         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) {
+        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) {
@@ -7372,11 +7537,24 @@ class JsonSchemaFormService {
         }
         //if this is a ITE conditional field, the value would not have been
         //set, as the control would only be initialized when the condition is true 
-        if (ctx.options?.condition) {
-            const value = JsonPointer.has(this.formValues, layoutNode.dataPointer)
-                ? JsonPointer.get(this.formValues, layoutNode.dataPointer)
-                : ctx.options?.default;
-            ctx.formControl?.setValue(value);
+        //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;
     }
@@ -7492,7 +7670,9 @@ class JsonSchemaFormService {
             ctx.layoutNode().type === '$ref') {
             return null;
         }
-        return getControl(this.formGroup, this.getDataPointer(ctx), false, ctx.layoutNode()?.schemaPointer);
+        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 ||
@@ -7508,14 +7688,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, ctx.layoutNode()?.schemaPointer);
+        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 ||
@@ -7868,6 +8052,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }] });
 
+///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);
@@ -7883,7 +8071,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) {
@@ -7913,7 +8102,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 || '')))"
@@ -7950,7 +8139,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
         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 || '')))"
@@ -8756,14 +8945,30 @@ class OneOfComponent {
                             let parts = controlName.split('$');
                             let fieldName = parts[parts.length - 1];
                             let controlValue = this.jsf.formGroup.controls[controlName].value;
-                            if (isObject$1(formValue) && hasOwn(formValue, fieldName) &&
-                                formValue[fieldName] == controlValue
-                            //formValue[fieldName]||controlValue
-                            ) {
-                                foundInd = ind;
+                            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, '').replace(/\/items\//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;
                             }
-                            else //if(formValue || controlValue){
-                             if (isEqual$2(formValue, controlValue)) {
+                            */
+                            if (isEqual$2(compareVal, controlValue)) {
                                 foundInd = ind;
                             }
                         });
@@ -9118,6 +9323,64 @@ class RootComponent {
     }
     sortableInit(sortable) {
         this.sortableObj = sortable;
+        //Sortable.utils.on(this.sortableObj.el,"nulling",(s)=>{console.log("event nulling sortablejs")})
+        ///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' &&
@@ -9726,41 +9989,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }] });
 
-class TabComponent {
-    constructor() {
-        this.jsf = inject(JsonSchemaFormService);
-        this.layoutNode = input(undefined);
-        this.layoutIndex = input(undefined);
-        this.dataIndex = input(undefined);
-    }
-    ngOnInit() {
-        this.options = this.layoutNode().options || {};
-    }
-    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()"
-        [layoutIndex]="layoutIndex()"
-        [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.14", ngImport: i0, type: TabComponent, decorators: [{
-            type: Component,
-            args: [{
-                    // tslint:disable-next-line:component-selector
-                    selector: 'tab-widget',
-                    template: `
-    <div [class]="options?.htmlClass || ''">
-      <root-widget
-        [dataIndex]="dataIndex()"
-        [layoutIndex]="layoutIndex()"
-        [layout]="layoutNode().items"></root-widget>
-    </div>`,
-                    standalone: false
-                }]
-        }] });
-
 class TemplateComponent {
     constructor() {
         this.jsf = inject(JsonSchemaFormService);
@@ -9988,6 +10216,7 @@ class WidgetLibraryService {
             'wizard': 'section', // TODO: Sequential panels with "Next" and "Previous" buttons
             // Widgets included for compatibility with other libraries
             'textline': 'text',
+            'selectcheckbox': SelectCheckboxComponent,
             // Recommended 3rd-party add-on widgets (TODO: create wrappers for these...)
             // 'ng2-select': Select control replacement - http://valor-software.com/ng2-select/
             // 'flatpickr': Flatpickr date picker - https://github.com/chmln/flatpickr
@@ -10104,73 +10333,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
-const BASIC_WIDGETS = [
-    AddReferenceComponent, OneOfComponent, ButtonComponent, CheckboxComponent,
-    CheckboxesComponent, FileComponent, HiddenComponent, InputComponent,
-    MessageComponent, NoneComponent, NumberComponent, RadiosComponent,
-    RootComponent, SectionComponent, SelectComponent, SelectFrameworkComponent,
-    SelectWidgetComponent, SubmitComponent, TabComponent, TabsComponent,
-    TemplateComponent, TextareaComponent
-];
-
-class WidgetLibraryModule {
-    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
-                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.14", ngImport: i0, type: WidgetLibraryModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    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
-                            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]
-                }]
-        }] });
-
-// No framework - plain HTML controls (styles from form layout only)
-class NoFrameworkModule {
-    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.14", ngImport: i0, type: NoFrameworkModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, WidgetLibraryModule],
-                    declarations: [NoFrameworkComponent],
-                    exports: [NoFrameworkComponent],
-                    providers: [
-                        { provide: Framework, useClass: NoFramework, multi: true }
-                    ]
-                }]
-        }] });
-
 // Possible future frameworks:
 // - Foundation 6:
 //   http://justindavis.co/2017/06/15/using-foundation-6-in-angular-4/
@@ -10336,6 +10498,284 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                     args: [Framework]
                 }] }] });
 
+//component created as a fallback for the checkbox/sortabljs issue
+//its meant to display a select as a checkbox
+class SelectCheckboxComponent {
+    constructor() {
+        this.jsf = inject(JsonSchemaFormService);
+        this.jsfFLService = inject(FrameworkLibraryService);
+        this.controlDisabled = false;
+        this.boundControl = false;
+        this.selectList = [];
+        this.selectListFlatGroup = [];
+        this.isArray = isArray;
+        this.layoutNode = input(undefined);
+        this.layoutIndex = input(undefined);
+        this.dataIndex = input(undefined);
+        this.frameworkStyles = {
+            daisyui: { selectClass: "select-box", optionClass: "checkbox tw:dui-checkbox", optionChecked: "active", optionUnchecked: "" },
+            "bootstrap-3": { selectClass: "select-box", optionClass: "bs3-option checkbox display-inline-block", optionChecked: "active", optionUnchecked: "" },
+            "bootstrap-4": { selectClass: "select-box", optionClass: "bs4-option checkbox display-inline-block", optionChecked: "active", optionUnchecked: "" },
+            "bootstrap-5": { selectClass: " select-box", optionClass: "form-check-input display-inline-block", optionChecked: "active", optionUnchecked: "" },
+            //"material-design":{selectClass:" ",optionClass:" "}
+        };
+    }
+    ngOnInit() {
+        this.options = this.layoutNode().options || {};
+        this.activeFramework = this.jsfFLService.activeFramework.name;
+        this.selectList = buildTitleMap(
+        //this.options.titleMap || this.options.enumNames,
+        //TODO review-title is set to null in the setTitle() method of CssFrameworkComponent
+        this.options.enumNames || (this.options?.title && [this.options?.title])
+            || [this.layoutNode().name], 
+        //this.options.enum, 
+        [true], 
+        //make required true to avoid creating 'none' select option
+        true, !!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);
+        this.selectValue = [this.controlValue];
+    }
+    deselectAll() {
+        this.selectListFlatGroup.forEach(selItem => {
+            selItem.checked = false;
+        });
+    }
+    updateValue(event) {
+        this.options.showErrors = true;
+        this.controlValue = this.selectValue[0];
+        this.jsf.updateValue(this, this.controlValue);
+    }
+    onSelectClicked($event) {
+        this.selectValue = this.selectValue && this.selectValue[0] ? [false] : [true];
+        this.controlValue = this.selectValue[0];
+        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.14", ngImport: i0, type: SelectCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: SelectCheckboxComponent, isStandalone: false, selector: "selectcheckbox-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 || ''">
+      <select *ngIf="boundControl"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+        [attr.readonly]="options?.readonly ? 'readonly' : null"
+        [attr.required]="options?.required"
+        [class]=" frameworkStyles[activeFramework].selectClass"
+        [multiple]="true"
+        [id]="'control' + layoutNode()?._id"
+        [name]="controlName"
+        [ngModel]="selectValue"   
+        >
+        <ng-template ngFor let-selectItem [ngForOf]="selectList">
+          <option *ngIf="!isArray(selectItem?.items)"
+            [class]="frameworkStyles[activeFramework].optionClass"
+            [class.active]="selectItem?.value === controlValue"
+            [class.unchecked-notusing]="selectItem?.value != controlValue"
+            [value]="selectItem?.value"
+            (click)="onSelectClicked($event)"
+            type="checkbox"
+            >
+          </option>
+          <!--NB the text is out of the option element to display besides the checkbox-->
+          <span [innerHTML]="selectItem?.name"></span>
+        </ng-template>
+      </select>
+      <select *ngIf="!boundControl"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+        [attr.readonly]="options?.readonly ? 'readonly' : null"
+        [attr.required]="options?.required"
+        [class]="frameworkStyles[activeFramework].selectClass +' select-box'"
+        [multiple]="true"
+        [disabled]="controlDisabled"
+        [id]="'control' + layoutNode()?._id"
+        [name]="controlName"
+        (change)="updateValue($event)">
+        <ng-template ngFor let-selectItem [ngForOf]="selectList">
+          <option *ngIf="!isArray(selectItem?.items)"
+            [selected]="selectItem?.value === controlValue"
+            [class]="frameworkStyles[activeFramework].optionClass"
+            [class.checked-notusing]="selectItem?.value === controlValue"
+            [class.unchecked-notusing]]="selectItem?.value != controlValue"
+            [value]="selectItem?.value"
+            type="checkbox">
+          </option>
+          <!--NB the text is out of the option element to display besides the checkbox-->
+          <span [innerHTML]="selectItem?.name"></span>
+        </ng-template>
+      </select>
+      
+    </div>`, isInline: true, styles: [".select-box{font-size:16px;border:none;appearance:none;-webkit-appearance:none;-moz-appearance:none;height:25px;overflow:hidden;text-overflow:ellipsis;background-color:#fff;color:#000;background-color:transparent}.select-box:focus{outline:none}.select-option{font-size:20px;color:#000;background-color:#fff;display:inline-block}.unchecked:before{content:\"\\2610\";left:5px;top:50%;transform:translateY(-50%);font-size:30px}.checked:before{content:\"\\2611\";left:5px;top:50%;transform:translateY(-50%);font-size:30px}.select-option:checked{background-image:linear-gradient(0deg,#fff 0% 100%);color:#000}.select-box[multiple]:focus{background-color:transparent;color:#00f;-webkit-text-fill-color:black}.display-inline-block{display:inline-block}.bs4-option,.bs3-option{width:14px;height:14px;border:solid 1px;color:#a9a9a9;min-block-size:auto;border-radius:3px}.bs4-option:checked[type=checkbox],.bs3-option:checked[type=checkbox]{background-image:url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!--%20License%3A%20MIT.%20Made%20by%20jaynewey%3A%20https%3A%2F%2Fgithub.com%2Fjaynewey%2Fcharm-icons%20--%3E%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222.5%22%3E%3Cpolyline%20points%3D%224%208.75%2C6.25%2012.25%2C13.25%203.5%22%2F%3E%3C%2Fsvg%3E);background-color:#00ced1}\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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'selectcheckbox-widget', template: `
+    <div 
+      [class]="options?.htmlClass || ''">
+      <select *ngIf="boundControl"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+        [attr.readonly]="options?.readonly ? 'readonly' : null"
+        [attr.required]="options?.required"
+        [class]=" frameworkStyles[activeFramework].selectClass"
+        [multiple]="true"
+        [id]="'control' + layoutNode()?._id"
+        [name]="controlName"
+        [ngModel]="selectValue"   
+        >
+        <ng-template ngFor let-selectItem [ngForOf]="selectList">
+          <option *ngIf="!isArray(selectItem?.items)"
+            [class]="frameworkStyles[activeFramework].optionClass"
+            [class.active]="selectItem?.value === controlValue"
+            [class.unchecked-notusing]="selectItem?.value != controlValue"
+            [value]="selectItem?.value"
+            (click)="onSelectClicked($event)"
+            type="checkbox"
+            >
+          </option>
+          <!--NB the text is out of the option element to display besides the checkbox-->
+          <span [innerHTML]="selectItem?.name"></span>
+        </ng-template>
+      </select>
+      <select *ngIf="!boundControl"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+        [attr.readonly]="options?.readonly ? 'readonly' : null"
+        [attr.required]="options?.required"
+        [class]="frameworkStyles[activeFramework].selectClass +' select-box'"
+        [multiple]="true"
+        [disabled]="controlDisabled"
+        [id]="'control' + layoutNode()?._id"
+        [name]="controlName"
+        (change)="updateValue($event)">
+        <ng-template ngFor let-selectItem [ngForOf]="selectList">
+          <option *ngIf="!isArray(selectItem?.items)"
+            [selected]="selectItem?.value === controlValue"
+            [class]="frameworkStyles[activeFramework].optionClass"
+            [class.checked-notusing]="selectItem?.value === controlValue"
+            [class.unchecked-notusing]]="selectItem?.value != controlValue"
+            [value]="selectItem?.value"
+            type="checkbox">
+          </option>
+          <!--NB the text is out of the option element to display besides the checkbox-->
+          <span [innerHTML]="selectItem?.name"></span>
+        </ng-template>
+      </select>
+      
+    </div>`, standalone: false, styles: [".select-box{font-size:16px;border:none;appearance:none;-webkit-appearance:none;-moz-appearance:none;height:25px;overflow:hidden;text-overflow:ellipsis;background-color:#fff;color:#000;background-color:transparent}.select-box:focus{outline:none}.select-option{font-size:20px;color:#000;background-color:#fff;display:inline-block}.unchecked:before{content:\"\\2610\";left:5px;top:50%;transform:translateY(-50%);font-size:30px}.checked:before{content:\"\\2611\";left:5px;top:50%;transform:translateY(-50%);font-size:30px}.select-option:checked{background-image:linear-gradient(0deg,#fff 0% 100%);color:#000}.select-box[multiple]:focus{background-color:transparent;color:#00f;-webkit-text-fill-color:black}.display-inline-block{display:inline-block}.bs4-option,.bs3-option{width:14px;height:14px;border:solid 1px;color:#a9a9a9;min-block-size:auto;border-radius:3px}.bs4-option:checked[type=checkbox],.bs3-option:checked[type=checkbox]{background-image:url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!--%20License%3A%20MIT.%20Made%20by%20jaynewey%3A%20https%3A%2F%2Fgithub.com%2Fjaynewey%2Fcharm-icons%20--%3E%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222.5%22%3E%3Cpolyline%20points%3D%224%208.75%2C6.25%2012.25%2C13.25%203.5%22%2F%3E%3C%2Fsvg%3E);background-color:#00ced1}\n"] }]
+        }] });
+
+class TabComponent {
+    constructor() {
+        this.jsf = inject(JsonSchemaFormService);
+        this.layoutNode = input(undefined);
+        this.layoutIndex = input(undefined);
+        this.dataIndex = input(undefined);
+    }
+    ngOnInit() {
+        this.options = this.layoutNode().options || {};
+    }
+    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()"
+        [layoutIndex]="layoutIndex()"
+        [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.14", ngImport: i0, type: TabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // tslint:disable-next-line:component-selector
+                    selector: 'tab-widget',
+                    template: `
+    <div [class]="options?.htmlClass || ''">
+      <root-widget
+        [dataIndex]="dataIndex()"
+        [layoutIndex]="layoutIndex()"
+        [layout]="layoutNode().items"></root-widget>
+    </div>`,
+                    standalone: false
+                }]
+        }] });
+
+const BASIC_WIDGETS = [
+    AddReferenceComponent, OneOfComponent, ButtonComponent, CheckboxComponent,
+    CheckboxesComponent, FileComponent, HiddenComponent, InputComponent,
+    MessageComponent, NoneComponent, NumberComponent, RadiosComponent,
+    RootComponent, SectionComponent, SelectComponent, SelectFrameworkComponent,
+    SelectWidgetComponent, SubmitComponent, TabComponent, TabsComponent,
+    TemplateComponent, TextareaComponent, SelectCheckboxComponent
+];
+
+class WidgetLibraryModule {
+    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, SelectCheckboxComponent, 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, SelectCheckboxComponent, 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
+                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.14", ngImport: i0, type: WidgetLibraryModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    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
+                            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]
+                }]
+        }] });
+
+// No framework - plain HTML controls (styles from form layout only)
+class NoFrameworkModule {
+    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.14", ngImport: i0, type: NoFrameworkModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, WidgetLibraryModule],
+                    declarations: [NoFrameworkComponent],
+                    exports: [NoFrameworkComponent],
+                    providers: [
+                        { provide: Framework, useClass: NoFramework, multi: true }
+                    ]
+                }]
+        }] });
+
 const JSON_SCHEMA_FORM_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => JsonSchemaFormComponent),
@@ -10692,7 +11132,9 @@ class JsonSchemaFormComponent {
    */
     initializeAjv() {
         const form = this.form();
-        const ajvOptions = cloneDeep(this.ajvOptions()) || cloneDeep(form.ajvOptions);
+        const ajvOptions = cloneDeep(this.ajvOptions()) ||
+            (form && hasOwn(form, 'ajvOptions') && isObject(form.ajvOptions)
+                && cloneDeep(form.ajvOptions));
         if (ajvOptions) {
             this.ajvInstanceName = this.jsf.createAndRegisterAjvInstance(ajvOptions).name;
         }
@@ -11121,5 +11563,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * 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, 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 };
+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, SelectCheckboxComponent, 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