@ng-formworks/core 19.6.2 → 20.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';
@@ -29,10 +29,10 @@ class Framework {
         this.stylesheets = [];
         this.scripts = [];
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Framework, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Framework }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: Framework, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Framework, decorators: [{
             type: Injectable
         }] });
 
@@ -2473,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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: JsonPointer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: JsonPointer }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: JsonPointer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: JsonPointer, decorators: [{
             type: Injectable
         }] });
 
@@ -4586,8 +4586,32 @@ function fixRequiredArrayProperties(schema) {
  * @param schema:any
  * @param negate:boolean=false
  * @returns
-
  */
+//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 = {};
@@ -4612,17 +4636,26 @@ function convertJSONSchemaIfToCondition(schema, layoutNode, negate = false) {
         .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}`;
-    }, '');
+    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} ${checkPath} && ${modelPath}.${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})`;
@@ -5052,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);
                         }
@@ -5113,7 +5146,8 @@ 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, dataPointer);
+                                let newNodeValue = nodeValue;
+                                //JsonPointer.get(nodeValue, dataPointer);
                                 //JsonPointer.get(nodeValue, keySchemaPointer);
                                 if (ofType == "oneOf") {
                                     newNodeValue = nodeValue;
@@ -5144,9 +5178,16 @@ function buildFormGroupTemplate(jsf, nodeValue = null, setValues = true, schemaP
                                         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(/(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);
-                                        let dVal = JsonPointer.get(nodeValue, dPointer);
+                                        //console.log(`dataPointer:${dataPointer}\ndPointer:${dPointer}`)
+                                        let dVal = //JsonPointer.get(jsf.formValues,dPointer);
+                                         JsonPointer.get(nodeValue, dPointer);
                                         let fkey = key;
                                         let oneOfItemValue = dVal;
                                         /*
@@ -5289,43 +5330,22 @@ 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
                         //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;
-                        });
+                        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;
+                                }
+                            });
+                        }
                     }
                 });
             }
@@ -5562,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;
                 }
@@ -5582,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;
         }
@@ -5595,15 +5617,16 @@ 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)) {
             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);
@@ -6481,7 +6504,7 @@ 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)) {
@@ -6708,7 +6731,7 @@ 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)) {
@@ -6716,17 +6739,19 @@ function buildLayoutFromSchema(jsf, widgetLibrary, nodeValue = null, schemaPoint
                             //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;
+                        ///////newNode = innerItem
+                        newSection.push(innerItem);
                     }
                 }
             }
         });
+        newNode = newSection;
     }
     return newNode;
 }
@@ -7793,10 +7818,10 @@ class JsonSchemaFormService {
         JsonPointer.remove(this.layout, this.getLayoutPointer(ctx));
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: JsonSchemaFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: JsonSchemaFormService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: JsonSchemaFormService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: JsonSchemaFormService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -7804,10 +7829,10 @@ class SelectWidgetComponent {
     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 });
+        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
+        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
+        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
+        this.widgetContainer = viewChild('widgetContainer', ...(ngDevMode ? [{ debugName: "widgetContainer", read: ViewContainerRef }] : [{ read: ViewContainerRef }]));
     }
     ngOnInit() {
         this.updateComponent();
@@ -7826,10 +7851,10 @@ class SelectWidgetComponent {
             }
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SelectWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SelectWidgetComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -7841,14 +7866,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class NoFrameworkComponent {
     constructor() {
-        this.layoutNode = input(undefined);
-        this.layoutIndex = input(undefined);
-        this.dataIndex = input(undefined);
+        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
+        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
+        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NoFrameworkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NoFrameworkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", 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>" }]
         }] });
@@ -7861,10 +7886,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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NoFramework, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NoFramework }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NoFramework, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NoFramework, decorators: [{
             type: Injectable
         }] });
 
@@ -7886,10 +7911,10 @@ class ElementAttributeDirective {
             }
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.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: "20.1.6", type: ElementAttributeDirective, isStandalone: false, selector: "[attributes]", inputs: { attributes: "attributes" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ElementAttributeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ElementAttributeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[attributes]',
@@ -7902,9 +7927,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 class AddReferenceComponent {
     constructor() {
         this.jsf = inject(JsonSchemaFormService);
-        this.layoutNode = input(undefined);
-        this.layoutIndex = input(undefined);
-        this.dataIndex = input(undefined);
+        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
+        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
+        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
     }
     ngOnInit() {
         this.options = this.layoutNode().options || {};
@@ -7926,8 +7951,8 @@ 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.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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AddReferenceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.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: `
     <section [class]="options?.htmlClass || ''" align="end">
       <button *ngIf="showAddButton"
         [class]="options?.fieldHtmlClass || ''" class="sortable-filter sortable-fixed"
@@ -7938,7 +7963,7 @@ class AddReferenceComponent {
       </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.14", ngImport: i0, type: AddReferenceComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AddReferenceComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -7963,9 +7988,9 @@ class ButtonComponent {
         this.jsf = inject(JsonSchemaFormService);
         this.controlDisabled = false;
         this.boundControl = false;
-        this.layoutNode = input(undefined);
-        this.layoutIndex = input(undefined);
-        this.dataIndex = input(undefined);
+        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
+        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
+        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
     }
     ngOnInit() {
         this.options = this.layoutNode().options || {};
@@ -7982,8 +8007,8 @@ class ButtonComponent {
     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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.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: `
     <div
       [class]="options?.htmlClass || ''">
       <button
@@ -8001,7 +8026,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.14", ngImport: i0, type: ButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -8038,9 +8063,9 @@ class CheckboxComponent {
         this.boundControl = false;
         this.trueValue = true;
         this.falseValue = false;
-        this.layoutNode = input(undefined);
-        this.layoutIndex = input(undefined);
-        this.dataIndex = input(undefined);
+        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
+        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
+        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
     }
     ngOnInit() {
         this.options = this.layoutNode().options || {};
@@ -8060,8 +8085,8 @@ class CheckboxComponent {
     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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.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: `
     <label
       [attr.for]="'control' + layoutNode()?._id"
       [class]="options?.itemLabelHtmlClass || ''">
@@ -8093,7 +8118,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.14", ngImport: i0, type: CheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -8139,9 +8164,9 @@ class CheckboxesComponent {
         this.controlDisabled = false;
         this.boundControl = false;
         this.checkboxList = [];
-        this.layoutNode = input(undefined);
-        this.layoutIndex = input(undefined);
-        this.dataIndex = input(undefined);
+        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
+        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
+        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
     }
     ngOnInit() {
         this.options = this.layoutNode().options || {};
@@ -8172,8 +8197,8 @@ class CheckboxesComponent {
         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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CheckboxesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.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: `
     <label *ngIf="options?.title"
       [class]="options?.labelHtmlClass || ''"
       [style.display]="options?.notitle ? 'none' : ''"
@@ -8223,7 +8248,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.14", ngImport: i0, type: CheckboxesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CheckboxesComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -8287,9 +8312,9 @@ class FileComponent {
         this.jsf = inject(JsonSchemaFormService);
         this.controlDisabled = false;
         this.boundControl = false;
-        this.layoutNode = input(undefined);
-        this.layoutIndex = input(undefined);
-        this.dataIndex = input(undefined);
+        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
+        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
+        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
     }
     ngOnInit() {
         this.options = this.layoutNode().options || {};
@@ -8301,10 +8326,10 @@ class FileComponent {
     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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: FileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: FileComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -8319,9 +8344,9 @@ class HiddenComponent {
         this.jsf = inject(JsonSchemaFormService);
         this.controlDisabled = false;
         this.boundControl = false;
-        this.layoutNode = input(undefined);
-        this.layoutIndex = input(undefined);
-        this.dataIndex = input(undefined);
+        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
+        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
+        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
     }
     ngOnInit() {
         this.jsf.initializeControl(this);
@@ -8329,8 +8354,8 @@ class HiddenComponent {
     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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: HiddenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.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: `
     <input *ngIf="boundControl"
       [formControl]="formControl"
       [id]="'control' + layoutNode()?._id"
@@ -8343,7 +8368,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.14", ngImport: i0, type: HiddenComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: HiddenComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -8370,9 +8395,9 @@ class InputComponent {
         this.controlDisabled = false;
         this.boundControl = false;
         this.autoCompleteList = [];
-        this.layoutNode = input(undefined);
-        this.layoutIndex = input(undefined);
-        this.dataIndex = input(undefined);
+        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
+        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
+        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
     }
     //needed as templates don't accept something like [attributes]="options?.['x-inputAttributes']"
     get inputAttributes() {
@@ -8388,8 +8413,8 @@ class InputComponent {
     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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.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: `
     <div [class]="options?.htmlClass || ''" class="sortable-filter" >
       <label *ngIf="options?.title"
         [attr.for]="'control' + layoutNode()?._id"
@@ -8436,7 +8461,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.14", ngImport: i0, type: InputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -8495,22 +8520,22 @@ class MessageComponent {
     constructor() {
         this.jsf = inject(JsonSchemaFormService);
         this.message = null;
-        this.layoutNode = input(undefined);
-        this.layoutIndex = input(undefined);
-        this.dataIndex = input(undefined);
+        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
+        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
+        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
     }
     ngOnInit() {
         this.options = this.layoutNode().options || {};
         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.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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: MessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.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: `
     <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.14", ngImport: i0, type: MessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -8525,14 +8550,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class NoneComponent {
     constructor() {
-        this.layoutNode = input(undefined);
-        this.layoutIndex = input(undefined);
-        this.dataIndex = input(undefined);
+        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
+        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
+        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NoneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NoneComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -8552,9 +8577,9 @@ class NumberComponent {
         this.allowDecimal = true;
         this.allowExponents = false;
         this.lastValidNumber = '';
-        this.layoutNode = input(undefined);
-        this.layoutIndex = input(undefined);
-        this.dataIndex = input(undefined);
+        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
+        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
+        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
     }
     //needed as templates don't accept something like [attributes]="options?.['x-inputAttributes']"
     get inputAttributes() {
@@ -8573,8 +8598,8 @@ class NumberComponent {
     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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.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: `
     <div #divElt [class]="options?.htmlClass || ''" class="sortable-filter" >
       <label *ngIf="options?.title"
         [attr.for]="'control' + layoutNode()?._id"
@@ -8621,7 +8646,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.14", ngImport: i0, type: NumberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NumberComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -8686,10 +8711,10 @@ 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 });
+        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
+        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
+        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
+        this.widgetContainer = viewChild('widgetContainer', ...(ngDevMode ? [{ debugName: "widgetContainer", read: ViewContainerRef }] : [{ read: ViewContainerRef }]));
     }
     ngOnInit() {
         this.updateComponent();
@@ -8710,10 +8735,10 @@ class SelectFrameworkComponent {
             }
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SelectFrameworkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.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.14", ngImport: i0, type: SelectFrameworkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SelectFrameworkComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -8728,9 +8753,9 @@ class TabsComponent {
         this.jsf = inject(JsonSchemaFormService);
         this.selectedItem = 0;
         this.showAddTab = true;
-        this.layoutNode = input(undefined);
-        this.layoutIndex = input(undefined);
-        this.dataIndex = input(undefined);
+        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
+        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
+        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
     }
     ngOnInit() {
         this.options = this.layoutNode().options || {};
@@ -8763,8 +8788,8 @@ class TabsComponent {
     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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.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"
@@ -8816,7 +8841,7 @@ class TabsComponent {
       </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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tabs-widget', template: `
     <ul
@@ -8877,9 +8902,9 @@ class OneOfComponent {
         this.jsf = inject(JsonSchemaFormService);
         this.controlDisabled = false;
         this.boundControl = false;
-        this.layoutNode = input(undefined);
-        this.layoutIndex = input(undefined);
-        this.dataIndex = input(undefined);
+        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
+        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
+        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
     }
     ngOnInit() {
         this.options = this.layoutNode().options || {};
@@ -8923,7 +8948,7 @@ class OneOfComponent {
                             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(/(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;
@@ -8960,14 +8985,14 @@ class OneOfComponent {
     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>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: OneOfComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.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: `<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.14", ngImport: i0, type: OneOfComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: OneOfComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -8988,9 +9013,9 @@ class RadiosComponent {
         this.boundControl = false;
         this.layoutOrientation = 'vertical';
         this.radiosList = [];
-        this.layoutNode = input(undefined);
-        this.layoutIndex = input(undefined);
-        this.dataIndex = input(undefined);
+        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
+        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
+        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
     }
     ngOnInit() {
         this.options = this.layoutNode().options || {};
@@ -9008,8 +9033,8 @@ class RadiosComponent {
     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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: RadiosComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.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: `
     <label *ngIf="options?.title"
       [attr.for]="'control' + layoutNode()?._id"
       [class]="options?.labelHtmlClass || ''"
@@ -9066,7 +9091,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.14", ngImport: i0, type: RadiosComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: RadiosComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -9159,10 +9184,10 @@ class OrderableDirective {
         this.ngZone = inject(NgZone);
         this.overParentElement = false;
         this.overChildElement = false;
-        this.orderable = input(undefined);
-        this.layoutNode = input(undefined);
-        this.layoutIndex = input(undefined);
-        this.dataIndex = input(undefined);
+        this.orderable = input(undefined, ...(ngDevMode ? [{ debugName: "orderable" }] : []));
+        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
+        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
+        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
     }
     ngOnInit() {
         const layoutIndex = this.layoutIndex();
@@ -9246,10 +9271,10 @@ class OrderableDirective {
             this.draggableStateSubscription.unsubscribe();
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: OrderableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OrderableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: OrderableDirective, decorators: [{
             type: Directive,
             args: [{
                     // tslint:disable-next-line:directive-selector
@@ -9261,11 +9286,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 class RootComponent {
     constructor() {
         this.jsf = inject(JsonSchemaFormService);
-        this.dataIndex = input(undefined);
-        this.layoutIndex = input(undefined);
-        this.layout = input(undefined);
-        this.isOrderable = input(undefined);
-        this.isFlexItem = input(false);
+        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
+        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
+        this.layout = input(undefined, ...(ngDevMode ? [{ debugName: "layout" }] : []));
+        this.isOrderable = input(undefined, ...(ngDevMode ? [{ debugName: "isOrderable" }] : []));
+        this.isFlexItem = input(false, ...(ngDevMode ? [{ debugName: "isFlexItem" }] : []));
         this.sortableConfig = {
             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
@@ -9298,6 +9323,7 @@ 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
@@ -9400,8 +9426,8 @@ class RootComponent {
             this.sortableOptionsSubscription.unsubscribe();
         }
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: RootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.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: `
     <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()"
@@ -9433,7 +9459,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.14", ngImport: i0, type: RootComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", 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)">
@@ -9472,9 +9498,9 @@ class SectionComponent {
     constructor() {
         this.jsf = inject(JsonSchemaFormService);
         this.expanded = true;
-        this.layoutNode = input(undefined);
-        this.layoutIndex = input(undefined);
-        this.dataIndex = input(undefined);
+        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
+        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
+        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
     }
     get sectionTitle() {
         return this.options.notitle ? null : this.jsf.setItemTitle(this);
@@ -9529,8 +9555,8 @@ class SectionComponent {
                 return this.options[attribute];
         }
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.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: `
     <div *ngIf="containerType === 'div'"
       [class]="options?.htmlClass || ''"
       [class.expandable]="options?.expandable && !expanded"
@@ -9593,7 +9619,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.14", ngImport: i0, type: SectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'section-widget', template: `
     <div *ngIf="containerType === 'div'"
@@ -9667,9 +9693,9 @@ class SelectComponent {
         this.selectList = [];
         this.selectListFlatGroup = [];
         this.isArray = isArray;
-        this.layoutNode = input(undefined);
-        this.layoutIndex = input(undefined);
-        this.dataIndex = input(undefined);
+        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
+        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
+        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
     }
     ngOnInit() {
         this.options = this.layoutNode().options || {};
@@ -9709,8 +9735,8 @@ class SelectComponent {
         this.formControl.reset(nullVal);
         this.controlValue = null;
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.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: `
     <div
       [class]="options?.htmlClass || ''">
       <label *ngIf="options?.title"
@@ -9794,7 +9820,7 @@ class SelectComponent {
       </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.14", ngImport: i0, type: SelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -9891,9 +9917,9 @@ class SubmitComponent {
         this.jsf = inject(JsonSchemaFormService);
         this.controlDisabled = false;
         this.boundControl = false;
-        this.layoutNode = input(undefined);
-        this.layoutIndex = input(undefined);
-        this.dataIndex = input(undefined);
+        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
+        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
+        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
     }
     ngOnDestroy() {
         this.isValidChangesSubs?.unsubscribe();
@@ -9922,8 +9948,8 @@ class SubmitComponent {
             this.jsf.updateValue(this, event.target.value);
         }
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SubmitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.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: `
     <div
       [class]="options?.htmlClass || ''">
       <input
@@ -9939,7 +9965,7 @@ class SubmitComponent {
         (click)="updateValue($event)">
     </div>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SubmitComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SubmitComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -9963,49 +9989,14 @@ 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);
         this.newComponent = null;
-        this.layoutNode = input(undefined);
-        this.layoutIndex = input(undefined);
-        this.dataIndex = input(undefined);
-        this.widgetContainer = viewChild('widgetContainer', { read: ViewContainerRef });
+        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
+        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
+        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
+        this.widgetContainer = viewChild('widgetContainer', ...(ngDevMode ? [{ debugName: "widgetContainer", read: ViewContainerRef }] : [{ read: ViewContainerRef }]));
     }
     ngOnInit() {
         this.updateComponent();
@@ -10025,10 +10016,10 @@ class TemplateComponent {
             }
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TemplateComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -10043,9 +10034,9 @@ class TextareaComponent {
         this.jsf = inject(JsonSchemaFormService);
         this.controlDisabled = false;
         this.boundControl = false;
-        this.layoutNode = input(undefined);
-        this.layoutIndex = input(undefined);
-        this.dataIndex = input(undefined);
+        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
+        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
+        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
     }
     ngOnInit() {
         this.options = this.layoutNode().options || {};
@@ -10057,8 +10048,8 @@ class TextareaComponent {
     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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.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: `
     <div
       [class]="options?.htmlClass || ''">
       <label *ngIf="options?.title"
@@ -10094,7 +10085,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.14", ngImport: i0, type: TextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -10225,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
@@ -10331,83 +10323,16 @@ class WidgetLibraryService {
             activeWidgets: this.activeWidgets,
         };
     }
-    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' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: WidgetLibraryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: WidgetLibraryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WidgetLibraryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: WidgetLibraryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }], 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/
@@ -10560,10 +10485,10 @@ class FrameworkLibraryService {
             return actFramework.unregisterTheme(name);
         }
     }
-    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' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: FrameworkLibraryService, deps: [{ token: Framework }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: FrameworkLibraryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FrameworkLibraryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: FrameworkLibraryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -10573,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, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
+        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
+        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
+        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: "20.1.6", ngImport: i0, type: SelectCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", 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: "20.1.6", 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, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
+        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
+        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
+    }
+    ngOnInit() {
+        this.options = this.layoutNode().options || {};
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.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: `
+    <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: "20.1.6", 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: "20.1.6", ngImport: i0, type: WidgetLibraryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.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, 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: "20.1.6", 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: "20.1.6", 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: "20.1.6", ngImport: i0, type: NoFrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: NoFrameworkModule, declarations: [NoFrameworkComponent], imports: [CommonModule, WidgetLibraryModule], exports: [NoFrameworkComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NoFrameworkModule, providers: [
+            { provide: Framework, useClass: NoFramework, multi: true }
+        ], imports: [CommonModule, WidgetLibraryModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", 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),
@@ -10629,27 +10832,27 @@ class JsonSchemaFormComponent {
             formData: null, loadExternalAssets: null, debug: null, ajvOptions: null
         };
         // Recommended inputs
-        this.schema = input(undefined); // The JSON Schema
-        this.layout = input(undefined); // The form layout
-        this.data = input(undefined); // The form data
-        this.options = input(undefined); // The global form options
-        this.framework = input(undefined); // The framework to load
-        this.widgets = input(undefined); // Any custom widgets to load
+        this.schema = input(undefined, ...(ngDevMode ? [{ debugName: "schema" }] : [])); // The JSON Schema
+        this.layout = input(undefined, ...(ngDevMode ? [{ debugName: "layout" }] : [])); // The form layout
+        this.data = input(undefined, ...(ngDevMode ? [{ debugName: "data" }] : [])); // The form data
+        this.options = input(undefined, ...(ngDevMode ? [{ debugName: "options" }] : [])); // The global form options
+        this.framework = input(undefined, ...(ngDevMode ? [{ debugName: "framework" }] : [])); // The framework to load
+        this.widgets = input(undefined, ...(ngDevMode ? [{ debugName: "widgets" }] : [])); // Any custom widgets to load
         // Alternate combined single input
-        this.form = input(undefined); // For testing, and JSON Schema Form API compatibility
+        this.form = input(undefined, ...(ngDevMode ? [{ debugName: "form" }] : [])); // For testing, and JSON Schema Form API compatibility
         // Angular Schema Form API compatibility input
-        this.model = input(undefined); // Alternate input for form data
+        this.model = input(undefined, ...(ngDevMode ? [{ debugName: "model" }] : [])); // Alternate input for form data
         // React JSON Schema Form API compatibility inputs
-        this.JSONSchema = input(undefined); // Alternate input for JSON Schema
-        this.UISchema = input(undefined); // UI schema - alternate form layout format
-        this.formData = input(undefined); // Alternate input for form data
-        this.ngModel = input(undefined); // Alternate input for Angular forms
-        this.language = input(undefined); // Language
+        this.JSONSchema = input(undefined, ...(ngDevMode ? [{ debugName: "JSONSchema" }] : [])); // Alternate input for JSON Schema
+        this.UISchema = input(undefined, ...(ngDevMode ? [{ debugName: "UISchema" }] : [])); // UI schema - alternate form layout format
+        this.formData = input(undefined, ...(ngDevMode ? [{ debugName: "formData" }] : [])); // Alternate input for form data
+        this.ngModel = input(undefined, ...(ngDevMode ? [{ debugName: "ngModel" }] : [])); // Alternate input for Angular forms
+        this.language = input(undefined, ...(ngDevMode ? [{ debugName: "language" }] : [])); // Language
         // Development inputs, for testing and debugging
-        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
+        this.loadExternalAssets = input(undefined, ...(ngDevMode ? [{ debugName: "loadExternalAssets" }] : [])); // Load external framework assets?
+        this.debug = input(undefined, ...(ngDevMode ? [{ debugName: "debug" }] : [])); // Show debug information?
+        this.theme = input(undefined, ...(ngDevMode ? [{ debugName: "theme" }] : [])); // Theme
+        this.ajvOptions = input(undefined, ...(ngDevMode ? [{ debugName: "ajvOptions" }] : [])); // ajvOptions
         // Outputs
         this.onChanges = output(); // Live unvalidated internal form data
         this.onSubmit = output(); // Complete validated form data
@@ -11323,10 +11526,10 @@ class JsonSchemaFormComponent {
             }
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: JsonSchemaFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.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 }, 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.14", ngImport: i0, type: JsonSchemaFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", 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: [{
@@ -11334,13 +11537,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             }] } });
 
 class JsonSchemaFormModule {
-    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,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: JsonSchemaFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.6", 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.14", ngImport: i0, type: JsonSchemaFormModule, imports: [CommonModule, FormsModule, ReactiveFormsModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: JsonSchemaFormModule, imports: [CommonModule, FormsModule, ReactiveFormsModule,
             WidgetLibraryModule, NoFrameworkModule, WidgetLibraryModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: JsonSchemaFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: JsonSchemaFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -11360,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