@ng-formworks/core 20.6.8 → 21.6.9

package/fesm2022/ng-formworks-core.mjs

@@ -1,14 +1,14 @@
-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, ChangeDetectorRef, signal, Inject, ElementRef, NgZone, NgModule, forwardRef, output } from '@angular/core';
-import * as i2 from '@angular/forms';
+import * as i1 from '@angular/forms';
 import { UntypedFormControl, UntypedFormArray, UntypedFormGroup, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import addFormats from 'ajv-formats';
 import Ajv2019 from 'ajv/dist/2019';
 import jsonDraft6 from 'ajv/lib/refs/json-schema-draft-06.json';
 import jsonDraft7 from 'ajv/lib/refs/json-schema-draft-07.json';
 import cloneDeep from 'lodash/cloneDeep';
+import _isArray from 'lodash/isArray';
 import { from, Observable, forkJoin, Subject, BehaviorSubject, lastValueFrom } from 'rxjs';
 import { some, isNil, isEmpty as isEmpty$1, pick, isObject as isObject$1, isEqual as isEqual$2, memoize } from 'lodash';
 import isEqual$1 from 'lodash/isEqual';
@@ -16,10 +16,9 @@ import { map, takeUntil } from 'rxjs/operators';
 import omit from 'lodash/omit';
 import filter from 'lodash/filter';
 import map$1 from 'lodash/map';
-import _isArray from 'lodash/isArray';
 import _isPlainObject from 'lodash/isPlainObject';
 import uniqueId from 'lodash/uniqueId';
-import * as i2$1 from '@angular/cdk/drag-drop';
+import * as i1$1 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { HttpClient } from '@angular/common/http';
 
@@ -29,10 +28,10 @@ class Framework {
         this.stylesheets = [];
         this.scripts = [];
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: Framework, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: Framework }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Framework, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: Framework, decorators: [{
             type: Injectable
         }] });
 
@@ -1457,6 +1456,49 @@ function hasNonNullValue(obj) {
         return !isNil(value);
     });
 }
+/**
+ * Recursively compares array sizes of nested arrays
+ *
+ * @param obj1 - The object to check.
+ * @param obj2 - The object to check.
+ * @returns `false` if at least one nested array size mismatches`.
+ *
+ * @example
+ * const obj1 = { a: ['a','aa'], b:{c:[1,11,11]} };
+ * const obj2 = { a: ['ee','dd'], b:{c:[2]} };
+ *
+ * console.log(compareObjectArraySizes(obj1,obj1));  // Output: false
+ * mismatch will be on path b/c
+ */
+function compareObjectArraySizes(obj1, obj2, comparePath = "") {
+    if (isArray(obj1) && isArray(obj2)) {
+        if (obj1.length != obj2.length) {
+            console.log(`size mismatch at ${comparePath}`);
+            return false; // immediately return false on mismatch
+        }
+        else {
+            for (let ind = 0; ind < obj1.length; ind++) {
+                const item1 = obj1[ind];
+                const item2 = obj2[ind];
+                const result = compareObjectArraySizes(item1, item2, `${comparePath}/${ind}`);
+                if (result === false) {
+                    return false; // propagate false if mismatch is found
+                }
+            }
+        }
+    }
+    if (isObject(obj1) && !isArray(obj1)) {
+        for (let key in obj1) {
+            if (obj2.hasOwnProperty(key)) {
+                const result = compareObjectArraySizes(obj1[key], obj2[key], `${comparePath}/${key}`);
+                if (result === false) {
+                    return false; // propagate false if mismatch is found
+                }
+            }
+        }
+    }
+    return true; // all checks passed
+}
 
 class JsonPointer {
     /**
@@ -2473,10 +2515,10 @@ class JsonPointer {
         }
         console.error('parseObjectPath error: Input object path must be a string.');
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: JsonPointer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: JsonPointer }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: JsonPointer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: JsonPointer, decorators: [{
             type: Injectable
         }] });
 
@@ -4643,14 +4685,7 @@ function convertJSONSchemaIfToCondition(schema, layoutNode, negate = false) {
         .join("")
         : "";
     let modelPath = parentPath ? `model.${parentPath}` : "model";
-    let checkPath = modelPath.split('.')
-        .map((_, index, array) => {
-        return array.slice(0, index + 1).join('.'); // Build each part of the path dynamically
-    }).join(' && '); // Join the parts with '&&'
-    //  .reduce((accumulator, currentPart, index) => {
-    //   const currentExpression = index === 0 ? currentPart : `${accumulator}.${currentPart}`;
-    //   return index === 0 ? currentExpression : `${accumulator} && ${currentExpression}`;
-    // }, '');
+    let checkPath = modelPath.replace(/\[/g, ".[").split('.').join("?.");
     if (schema.if) {
         Object.keys(schema.if.properties).forEach((ifProp, ind) => {
             let amper = ind > 0 ? "&" : "";
@@ -6201,7 +6236,7 @@ function buildLayout_original(jsf, widgetLibrary) {
     return formLayout;
 }
 //TODO-review:this implements a quick 'post' fix rather than an
-//integrared ideal fix
+//integrated ideal fix
 function buildLayout(jsf, widgetLibrary) {
     let layout = buildLayout_original(jsf, widgetLibrary);
     if (jsf.formValues) {
@@ -6317,11 +6352,21 @@ function fixNestedArrayLayout(options) {
                         : cloneDeep(builtLayout.items[0]); //copy first
                     newItem._id = uniqueId("new_");
                     builtLayout.items.unshift(newItem);
+                    // builtLayout.items=[newItem, ...builtLayout.items];
                 }
-                if (builtLayout.options.listItems) {
-                    builtLayout.options.listItems = numDataItems;
+            }
+            else if (numActualItems > numDataItems) {
+                let numItemsToRemove = numActualItems - numDataItems;
+                for (let i = 0; i < numItemsToRemove; i++) {
+                    builtLayout.items.pop();
+                    //builtLayout.items=builtLayout.items.slice(0, -1);
+                    //builtLayout.items.slice(0, -1);
                 }
             }
+            if (builtLayout.options.listItems) {
+                builtLayout.options.listItems = numDataItems;
+            }
+            //builtLayout.items=[...builtLayout.items];
             indices[builtLayout.dataPointer] = indices[builtLayout.dataPointer] || -1;
             indexPos++;
             builtLayout.items.forEach((item, index) => {
@@ -7693,7 +7738,7 @@ class JsonSchemaFormService {
         // Set values of any related controls in copyValueTo array
         if (isArray(ctx.options.copyValueTo)) {
             for (const item of ctx.options.copyValueTo) {
-                const targetControl = getControl(this.formGroup, item);
+                const targetControl = this.formGroup && getControl(this.formGroup, item);
                 if (isObject(targetControl) &&
                     typeof targetControl.setValue === 'function') {
                     targetControl.setValue(value);
@@ -7768,7 +7813,8 @@ class JsonSchemaFormService {
     getFormControlValue(ctx) {
         if (!ctx || !ctx.layoutNode ||
             !isDefined(ctx.layoutNode().dataPointer) ||
-            ctx.layoutNode().type === '$ref') {
+            ctx.layoutNode().type === '$ref'
+            || this.formGroup == null) {
             return null;
         }
         const schemaPointer = ctx.layoutNode()?.isITEItem ? ctx.layoutNode()?.schemaPointer : null;
@@ -7778,7 +7824,7 @@ class JsonSchemaFormService {
         return control ? control.value : null;
     }
     getFormControlGroup(ctx) {
-        if (!ctx || !ctx.layoutNode || !isDefined(ctx.layoutNode().dataPointer)) {
+        if (!ctx || !ctx.layoutNode || !isDefined(ctx.layoutNode().dataPointer) || this.formGroup == null) {
             return null;
         }
         const schemaPointer = ctx.layoutNode()?.isITEItem ? ctx.layoutNode()?.schemaPointer : null;
@@ -7906,10 +7952,66 @@ class JsonSchemaFormService {
         JsonPointer.remove(this.layout, this.getLayoutPointer(ctx));
         return true;
     }
-    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 }); }
+    //TODO fix-doesnt seem to work for nested array
+    adjustLayout(layout, newData, currLayoutIndex = [0], currDataIndex = []) {
+        const createWidgetCtx = (layoutNode, layoutIndex, dataIndex) => {
+            return {
+                layoutNode: () => { return layoutNode; },
+                layoutIndex: () => { return layoutIndex; },
+                dataIndex: () => { return dataIndex; },
+            };
+        };
+        // console.log(`adjustLayout currLayoutIndex:${currLayoutIndex}`);
+        if (layout.items && _isArray(newData)) {
+            let ctx = createWidgetCtx({
+                ...layout,
+                $ref: layout.$ref || layout.items[0]?.dataPointer,
+                dataPointer: layout.items[0]?.dataPointer,
+                arrayItem: true,
+                arrayItemType: "list"
+            }, [...currLayoutIndex.slice(0, currLayoutIndex.length - 1), layout.items.length - 1], [...currDataIndex.slice(0, currDataIndex.length - 1), layout.items.length - 1]);
+            const lengthDifference = newData.length - layout.items.filter(litem => {
+                return litem?.type != "$ref";
+            }).length;
+            if (lengthDifference > 0) {
+                // Add missing controls if newData has more items
+                for (let i = 0; i < lengthDifference; i++) {
+                    this.addItem(ctx);
+                }
+            }
+            else if (lengthDifference < 0) {
+                let numToRemove = layout.items.filter(litem => {
+                    return litem?.type != "$ref";
+                })
+                    .length - newData.length;
+                // Remove extra controls if newData has fewer items
+                for (let i = 0; i < numToRemove; i++) {
+                    let oldDataIndex = ctx.dataIndex();
+                    let lastDataIndex = oldDataIndex[oldDataIndex.length - 1];
+                    let updatedLayoutIndex = [...currLayoutIndex.slice(0, currLayoutIndex.length - 1), 0];
+                    let updatedDataIndex = [...oldDataIndex.slice(0, oldDataIndex.length - 1), 0];
+                    ctx = createWidgetCtx(ctx.layoutNode(), updatedLayoutIndex, updatedDataIndex);
+                    let removed = this.removeItem(ctx);
+                    // if(removed){
+                    //}
+                }
+            }
+            return;
+        }
+        if (_isArray(layout)) {
+            layout.forEach((layoutNode, ind) => {
+                //if(layoutNode.items){
+                let layoutMappedData = layoutNode.dataPointer ? JsonPointer.get(newData, layoutNode.dataPointer)
+                    : undefined;
+                this.adjustLayout(layoutNode, layoutMappedData, [...currLayoutIndex, ind], [...currDataIndex, ind]);
+                ///}
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: JsonSchemaFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: JsonSchemaFormService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: JsonSchemaFormService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: JsonSchemaFormService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -7917,10 +8019,10 @@ class SelectWidgetComponent {
     constructor() {
         this.jsf = inject(JsonSchemaFormService);
         this.newComponent = null;
-        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 }]));
+        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 });
     }
     ngOnInit() {
         this.updateComponent();
@@ -7940,10 +8042,10 @@ class SelectWidgetComponent {
             }
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: SelectWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.2", 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: "20.1.6", ngImport: i0, type: SelectWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: SelectWidgetComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -7951,21 +8053,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     template: `<div #widgetContainer></div>`,
                     standalone: false
                 }]
-        }] });
+        }], propDecorators: { layoutNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutNode", required: false }] }], layoutIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutIndex", required: false }] }], dataIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataIndex", required: false }] }], widgetContainer: [{ type: i0.ViewChild, args: ['widgetContainer', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 
 class NoFrameworkComponent {
     constructor() {
-        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
-        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
-        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
+        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: "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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NoFrameworkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.2", 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: "20.1.6", ngImport: i0, type: NoFrameworkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", 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>" }]
-        }] });
+        }], propDecorators: { layoutNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutNode", required: false }] }], layoutIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutIndex", required: false }] }], dataIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataIndex", required: false }] }] } });
 
 // No framework - plain HTML controls (styles from form layout only)
 class NoFramework extends Framework {
@@ -7975,10 +8077,10 @@ class NoFramework extends Framework {
         this.text = 'None (plain HTML)';
         this.framework = NoFrameworkComponent;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NoFramework, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NoFramework }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NoFramework, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NoFramework, decorators: [{
             type: Injectable
         }] });
 
@@ -8000,10 +8102,10 @@ class ElementAttributeDirective {
             }
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", 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: "21.0.2", type: ElementAttributeDirective, isStandalone: false, selector: "[attributes]", inputs: { attributes: "attributes" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ElementAttributeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ElementAttributeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[attributes]',
@@ -8040,10 +8142,10 @@ class StopPropagationDirective {
         // Call each stored unsubscribe function to clean up listeners
         this.unsubscribeFunctions.forEach(unsub => unsub());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: StopPropagationDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: StopPropagationDirective, isStandalone: false, selector: "[appStopPropagation]", inputs: { events: ["appStopPropagation", "events"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: StopPropagationDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: StopPropagationDirective, isStandalone: false, selector: "[appStopPropagation]", inputs: { events: ["appStopPropagation", "events"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: StopPropagationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: StopPropagationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appStopPropagation]', standalone: false
@@ -8056,9 +8158,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
 class AddReferenceComponent {
     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" }] : []));
+        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 || {};
@@ -8077,55 +8179,65 @@ class AddReferenceComponent {
             layoutIndex: this.layoutIndex().slice(0, -1),
             layoutNode: this.jsf.getParentNode(this)
         };
-        return parent.layoutNode.add ||
-            this.jsf.setArrayItemTitle(parent, this.layoutNode(), this.itemCount);
-    }
-    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 || ''"
-        [disabled]="options?.readonly"
-        (click)="addItem($event)"
-        [appStopPropagation]="['mousedown', 'touchstart']"
-        >
-        <span *ngIf="options?.icon" [class]="options?.icon"></span>
-        <span *ngIf="options?.title" [innerHTML]="buttonText"></span>
-        
-      </button>
-    </section>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: StopPropagationDirective, selector: "[appStopPropagation]", inputs: ["appStopPropagation"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+        return parent.layoutNode && (parent.layoutNode.add ||
+            this.jsf.setArrayItemTitle(parent, this.layoutNode(), this.itemCount));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: AddReferenceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", 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">
+      @if (showAddButton) {
+        <button
+          [class]="options?.fieldHtmlClass || ''"
+          [disabled]="options?.readonly"
+          (click)="addItem($event)"
+          [appStopPropagation]="['mousedown', 'touchstart']"
+          >
+          @if (options?.icon) {
+            <span [class]="options?.icon"></span>
+          }
+          @if (options?.title) {
+            <span [innerHTML]="buttonText"></span>
+          }
+        </button>
+      }
+    </section>`, isInline: true, dependencies: [{ kind: "directive", type: StopPropagationDirective, selector: "[appStopPropagation]", inputs: ["appStopPropagation"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AddReferenceComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: AddReferenceComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
                     selector: 'add-reference-widget',
-                    template: `
-    <section [class]="options?.htmlClass || ''" align="end">
-      <button *ngIf="showAddButton"
-        [class]="options?.fieldHtmlClass || ''"
-        [disabled]="options?.readonly"
-        (click)="addItem($event)"
-        [appStopPropagation]="['mousedown', 'touchstart']"
-        >
-        <span *ngIf="options?.icon" [class]="options?.icon"></span>
-        <span *ngIf="options?.title" [innerHTML]="buttonText"></span>
-        
-      </button>
+                    template: `
+    <section [class]="options?.htmlClass || ''" align="end">
+      @if (showAddButton) {
+        <button
+          [class]="options?.fieldHtmlClass || ''"
+          [disabled]="options?.readonly"
+          (click)="addItem($event)"
+          [appStopPropagation]="['mousedown', 'touchstart']"
+          >
+          @if (options?.icon) {
+            <span [class]="options?.icon"></span>
+          }
+          @if (options?.title) {
+            <span [innerHTML]="buttonText"></span>
+          }
+        </button>
+      }
     </section>`,
                     changeDetection: ChangeDetectionStrategy.Default,
                     standalone: false
                 }]
-        }] });
+        }], propDecorators: { layoutNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutNode", required: false }] }], layoutIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutIndex", required: false }] }], dataIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataIndex", required: false }] }] } });
 
 class ButtonComponent {
     constructor() {
         this.jsf = inject(JsonSchemaFormService);
         this.controlDisabled = false;
         this.boundControl = false;
-        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
-        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
-        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
+        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 || {};
@@ -8142,54 +8254,58 @@ class ButtonComponent {
     ngOnDestroy() {
         this.jsf.updateValue(this, null);
     }
-    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
-        [attr.readonly]="options?.readonly ? 'readonly' : null"
-        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
-        [class]="options?.fieldHtmlClass || ''"
-        [disabled]="controlDisabled"
-        [name]="controlName"
-        [type]="layoutNode()?.type"
-        [value]="controlValue"
-        (click)="updateValue($event)"
-        [appStopPropagation]="['mousedown', 'touchstart']"
-        >
-        <span *ngIf="options?.icon || options?.title"
-          [class]="options?.icon"
-          [innerHTML]="options?.title"></span>
-      </button>
-    </div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: StopPropagationDirective, selector: "[appStopPropagation]", inputs: ["appStopPropagation"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", 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
+        [attr.readonly]="options?.readonly ? 'readonly' : null"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+        [class]="options?.fieldHtmlClass || ''"
+        [disabled]="controlDisabled"
+        [name]="controlName"
+        [type]="layoutNode()?.type"
+        [value]="controlValue"
+        (click)="updateValue($event)"
+        [appStopPropagation]="['mousedown', 'touchstart']"
+        >
+        @if (options?.icon || options?.title) {
+          <span
+            [class]="options?.icon"
+          [innerHTML]="options?.title"></span>
+        }
+      </button>
+    </div>`, isInline: true, dependencies: [{ kind: "directive", type: StopPropagationDirective, selector: "[appStopPropagation]", inputs: ["appStopPropagation"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
                     selector: 'button-widget',
-                    template: `
-    <div
-      [class]="options?.htmlClass || ''">
-      <button
-        [attr.readonly]="options?.readonly ? 'readonly' : null"
-        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
-        [class]="options?.fieldHtmlClass || ''"
-        [disabled]="controlDisabled"
-        [name]="controlName"
-        [type]="layoutNode()?.type"
-        [value]="controlValue"
-        (click)="updateValue($event)"
-        [appStopPropagation]="['mousedown', 'touchstart']"
-        >
-        <span *ngIf="options?.icon || options?.title"
-          [class]="options?.icon"
-          [innerHTML]="options?.title"></span>
-      </button>
+                    template: `
+    <div
+      [class]="options?.htmlClass || ''">
+      <button
+        [attr.readonly]="options?.readonly ? 'readonly' : null"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+        [class]="options?.fieldHtmlClass || ''"
+        [disabled]="controlDisabled"
+        [name]="controlName"
+        [type]="layoutNode()?.type"
+        [value]="controlValue"
+        (click)="updateValue($event)"
+        [appStopPropagation]="['mousedown', 'touchstart']"
+        >
+        @if (options?.icon || options?.title) {
+          <span
+            [class]="options?.icon"
+          [innerHTML]="options?.title"></span>
+        }
+      </button>
     </div>`,
                     standalone: false
                 }]
-        }] });
+        }], propDecorators: { layoutNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutNode", required: false }] }], layoutIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutIndex", required: false }] }], dataIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataIndex", required: false }] }] } });
 
 ///NB issue caused by sortablejs when it its destroyed
 //this mainly affects checkboxes coupled with conditions
@@ -8203,9 +8319,9 @@ class CheckboxComponent {
         this.boundControl = false;
         this.trueValue = true;
         this.falseValue = false;
-        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
-        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
-        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
+        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 || {};
@@ -8225,78 +8341,90 @@ class CheckboxComponent {
     ngOnDestroy() {
         this.jsf.updateValue(this, null);
     }
-    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 || ''">
-      <input *ngIf="boundControl"
-        [formControl]="formControl"
-        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", 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 || ''">
+      @if (boundControl) {
+        <input
+          [formControl]="formControl"
+          [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
         [class]="(options?.fieldHtmlClass || '') + (isChecked ?
           (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
           (' ' + (options?.style?.unselected || '')))"
-        [id]="'control' + layoutNode()?._id"
-        [name]="controlName"
-        [readonly]="options?.readonly ? 'readonly' : null"
-        type="checkbox">
-      <input *ngIf="!boundControl"
-        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
-        [checked]="isChecked"
+          [id]="'control' + layoutNode()?._id"
+          [name]="controlName"
+          [readonly]="options?.readonly ? 'readonly' : null"
+          type="checkbox">
+      }
+      @if (!boundControl) {
+        <input
+          [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+          [checked]="isChecked"
         [class]="(options?.fieldHtmlClass || '') + (isChecked ?
           (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
           (' ' + (options?.style?.unselected || '')))"
-        [disabled]="controlDisabled"
-        [id]="'control' + layoutNode()?._id"
-        [name]="controlName"
-        [readonly]="options?.readonly ? 'readonly' : null"
-        [value]="controlValue"
-        type="checkbox"
-        (change)="updateValue($event)">
-      <span *ngIf="options?.title"
-        [style.display]="options?.notitle ? 'none' : ''"
-        [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"] }] }); }
+          [disabled]="controlDisabled"
+          [id]="'control' + layoutNode()?._id"
+          [name]="controlName"
+          [readonly]="options?.readonly ? 'readonly' : null"
+          [value]="controlValue"
+          type="checkbox"
+          (change)="updateValue($event)">
+      }
+      @if (options?.title) {
+        <span
+          [style.display]="options?.notitle ? 'none' : ''"
+        [innerHTML]="options?.title"></span>
+      }
+    </label>`, isInline: true, dependencies: [{ kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
                     selector: 'checkbox-widget',
-                    template: `
-    <label
-      [attr.for]="'control' + layoutNode()?._id"
-      [class]="options?.itemLabelHtmlClass || ''">
-      <input *ngIf="boundControl"
-        [formControl]="formControl"
-        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+                    template: `
+    <label
+      [attr.for]="'control' + layoutNode()?._id"
+      [class]="options?.itemLabelHtmlClass || ''">
+      @if (boundControl) {
+        <input
+          [formControl]="formControl"
+          [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
         [class]="(options?.fieldHtmlClass || '') + (isChecked ?
           (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
           (' ' + (options?.style?.unselected || '')))"
-        [id]="'control' + layoutNode()?._id"
-        [name]="controlName"
-        [readonly]="options?.readonly ? 'readonly' : null"
-        type="checkbox">
-      <input *ngIf="!boundControl"
-        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
-        [checked]="isChecked"
+          [id]="'control' + layoutNode()?._id"
+          [name]="controlName"
+          [readonly]="options?.readonly ? 'readonly' : null"
+          type="checkbox">
+      }
+      @if (!boundControl) {
+        <input
+          [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+          [checked]="isChecked"
         [class]="(options?.fieldHtmlClass || '') + (isChecked ?
           (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
           (' ' + (options?.style?.unselected || '')))"
-        [disabled]="controlDisabled"
-        [id]="'control' + layoutNode()?._id"
-        [name]="controlName"
-        [readonly]="options?.readonly ? 'readonly' : null"
-        [value]="controlValue"
-        type="checkbox"
-        (change)="updateValue($event)">
-      <span *ngIf="options?.title"
-        [style.display]="options?.notitle ? 'none' : ''"
-        [innerHTML]="options?.title"></span>
+          [disabled]="controlDisabled"
+          [id]="'control' + layoutNode()?._id"
+          [name]="controlName"
+          [readonly]="options?.readonly ? 'readonly' : null"
+          [value]="controlValue"
+          type="checkbox"
+          (change)="updateValue($event)">
+      }
+      @if (options?.title) {
+        <span
+          [style.display]="options?.notitle ? 'none' : ''"
+        [innerHTML]="options?.title"></span>
+      }
     </label>`,
                     standalone: false
                 }]
-        }] });
+        }], propDecorators: { layoutNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutNode", required: false }] }], layoutIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutIndex", required: false }] }], dataIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataIndex", required: false }] }] } });
 
 class CheckboxesComponent {
     constructor() {
@@ -8304,9 +8432,9 @@ class CheckboxesComponent {
         this.controlDisabled = false;
         this.boundControl = false;
         this.checkboxList = [];
-        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
-        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
-        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
+        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 || {};
@@ -8337,114 +8465,134 @@ class CheckboxesComponent {
         this.formControl.reset(nullVal);
         this.controlValue = null;
     }
-    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' : ''"
-      [innerHTML]="options?.title"></label>
-
-    <!-- 'horizontal' = checkboxes-inline or checkboxbuttons -->
-    <div *ngIf="layoutOrientation === 'horizontal'" [class]="options?.htmlClass || ''">
-      <label *ngFor="let checkboxItem of checkboxList"
-        [attr.for]="'control' + layoutNode()?._id + '/' + checkboxItem.value"
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: CheckboxesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", 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: `
+    @if (options?.title) {
+      <label
+        [class]="options?.labelHtmlClass || ''"
+        [style.display]="options?.notitle ? 'none' : ''"
+      [innerHTML]="options?.title"></label>
+    }
+    
+    <!-- 'horizontal' = checkboxes-inline or checkboxbuttons -->
+    @if (layoutOrientation === 'horizontal') {
+      <div [class]="options?.htmlClass || ''">
+        @for (checkboxItem of checkboxList; track checkboxItem) {
+          <label
+            [attr.for]="'control' + layoutNode()?._id + '/' + checkboxItem.value"
         [class]="(options?.itemLabelHtmlClass || '') + (checkboxItem.checked ?
           (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
           (' ' + (options?.style?.unselected || '')))">
-        <input type="checkbox"
-          [attr.required]="options?.required"
-          [checked]="checkboxItem.checked"
-          [class]="options?.fieldHtmlClass || ''"
-          [disabled]="controlDisabled"
-          [id]="'control' + layoutNode()?._id + '/' + checkboxItem.value"
-          [name]="checkboxItem?.name"
-          [readonly]="options?.readonly ? 'readonly' : null"
-          [value]="checkboxItem.value"
-          (change)="updateValue($event)">
-        <span [innerHTML]="checkboxItem.name"></span>
-      </label>
-    </div>
-
-    <!-- 'vertical' = regular checkboxes -->
-    <div *ngIf="layoutOrientation === 'vertical'">
-      <div *ngFor="let checkboxItem of checkboxList" [class]="options?.htmlClass || ''">
-        <label
-          [attr.for]="'control' + layoutNode()?._id + '/' + checkboxItem.value"
+            <input type="checkbox"
+              [attr.required]="options?.required"
+              [checked]="checkboxItem.checked"
+              [class]="options?.fieldHtmlClass || ''"
+              [disabled]="controlDisabled"
+              [id]="'control' + layoutNode()?._id + '/' + checkboxItem.value"
+              [name]="checkboxItem?.name"
+              [readonly]="options?.readonly ? 'readonly' : null"
+              [value]="checkboxItem.value"
+              (change)="updateValue($event)">
+              <span [innerHTML]="checkboxItem.name"></span>
+            </label>
+          }
+        </div>
+      }
+    
+      <!-- 'vertical' = regular checkboxes -->
+      @if (layoutOrientation === 'vertical') {
+        <div>
+          @for (checkboxItem of checkboxList; track checkboxItem) {
+            <div [class]="options?.htmlClass || ''">
+              <label
+                [attr.for]="'control' + layoutNode()?._id + '/' + checkboxItem.value"
           [class]="(options?.itemLabelHtmlClass || '') + (checkboxItem.checked ?
             (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
             (' ' + (options?.style?.unselected || '')))">
-          <input type="checkbox"
-            [attr.required]="options?.required"
-            [checked]="checkboxItem.checked"
-            [class]="options?.fieldHtmlClass || ''"
-            [disabled]="controlDisabled"
-            [id]="options?.name + '/' + checkboxItem.value"
-            [name]="checkboxItem?.name"
-            [readonly]="options?.readonly ? 'readonly' : null"
-            [value]="checkboxItem.value"
-            (change)="updateValue($event)">
-          <span [innerHTML]="checkboxItem?.name"></span>
-        </label>
-      </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"] }] }); }
+                <input type="checkbox"
+                  [attr.required]="options?.required"
+                  [checked]="checkboxItem.checked"
+                  [class]="options?.fieldHtmlClass || ''"
+                  [disabled]="controlDisabled"
+                  [id]="options?.name + '/' + checkboxItem.value"
+                  [name]="checkboxItem?.name"
+                  [readonly]="options?.readonly ? 'readonly' : null"
+                  [value]="checkboxItem.value"
+                  (change)="updateValue($event)">
+                  <span [innerHTML]="checkboxItem?.name"></span>
+                </label>
+              </div>
+            }
+          </div>
+        }`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CheckboxesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: CheckboxesComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
                     selector: 'checkboxes-widget',
-                    template: `
-    <label *ngIf="options?.title"
-      [class]="options?.labelHtmlClass || ''"
-      [style.display]="options?.notitle ? 'none' : ''"
-      [innerHTML]="options?.title"></label>
-
-    <!-- 'horizontal' = checkboxes-inline or checkboxbuttons -->
-    <div *ngIf="layoutOrientation === 'horizontal'" [class]="options?.htmlClass || ''">
-      <label *ngFor="let checkboxItem of checkboxList"
-        [attr.for]="'control' + layoutNode()?._id + '/' + checkboxItem.value"
+                    template: `
+    @if (options?.title) {
+      <label
+        [class]="options?.labelHtmlClass || ''"
+        [style.display]="options?.notitle ? 'none' : ''"
+      [innerHTML]="options?.title"></label>
+    }
+    
+    <!-- 'horizontal' = checkboxes-inline or checkboxbuttons -->
+    @if (layoutOrientation === 'horizontal') {
+      <div [class]="options?.htmlClass || ''">
+        @for (checkboxItem of checkboxList; track checkboxItem) {
+          <label
+            [attr.for]="'control' + layoutNode()?._id + '/' + checkboxItem.value"
         [class]="(options?.itemLabelHtmlClass || '') + (checkboxItem.checked ?
           (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
           (' ' + (options?.style?.unselected || '')))">
-        <input type="checkbox"
-          [attr.required]="options?.required"
-          [checked]="checkboxItem.checked"
-          [class]="options?.fieldHtmlClass || ''"
-          [disabled]="controlDisabled"
-          [id]="'control' + layoutNode()?._id + '/' + checkboxItem.value"
-          [name]="checkboxItem?.name"
-          [readonly]="options?.readonly ? 'readonly' : null"
-          [value]="checkboxItem.value"
-          (change)="updateValue($event)">
-        <span [innerHTML]="checkboxItem.name"></span>
-      </label>
-    </div>
-
-    <!-- 'vertical' = regular checkboxes -->
-    <div *ngIf="layoutOrientation === 'vertical'">
-      <div *ngFor="let checkboxItem of checkboxList" [class]="options?.htmlClass || ''">
-        <label
-          [attr.for]="'control' + layoutNode()?._id + '/' + checkboxItem.value"
+            <input type="checkbox"
+              [attr.required]="options?.required"
+              [checked]="checkboxItem.checked"
+              [class]="options?.fieldHtmlClass || ''"
+              [disabled]="controlDisabled"
+              [id]="'control' + layoutNode()?._id + '/' + checkboxItem.value"
+              [name]="checkboxItem?.name"
+              [readonly]="options?.readonly ? 'readonly' : null"
+              [value]="checkboxItem.value"
+              (change)="updateValue($event)">
+              <span [innerHTML]="checkboxItem.name"></span>
+            </label>
+          }
+        </div>
+      }
+    
+      <!-- 'vertical' = regular checkboxes -->
+      @if (layoutOrientation === 'vertical') {
+        <div>
+          @for (checkboxItem of checkboxList; track checkboxItem) {
+            <div [class]="options?.htmlClass || ''">
+              <label
+                [attr.for]="'control' + layoutNode()?._id + '/' + checkboxItem.value"
           [class]="(options?.itemLabelHtmlClass || '') + (checkboxItem.checked ?
             (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
             (' ' + (options?.style?.unselected || '')))">
-          <input type="checkbox"
-            [attr.required]="options?.required"
-            [checked]="checkboxItem.checked"
-            [class]="options?.fieldHtmlClass || ''"
-            [disabled]="controlDisabled"
-            [id]="options?.name + '/' + checkboxItem.value"
-            [name]="checkboxItem?.name"
-            [readonly]="options?.readonly ? 'readonly' : null"
-            [value]="checkboxItem.value"
-            (change)="updateValue($event)">
-          <span [innerHTML]="checkboxItem?.name"></span>
-        </label>
-      </div>
-    </div>`,
+                <input type="checkbox"
+                  [attr.required]="options?.required"
+                  [checked]="checkboxItem.checked"
+                  [class]="options?.fieldHtmlClass || ''"
+                  [disabled]="controlDisabled"
+                  [id]="options?.name + '/' + checkboxItem.value"
+                  [name]="checkboxItem?.name"
+                  [readonly]="options?.readonly ? 'readonly' : null"
+                  [value]="checkboxItem.value"
+                  (change)="updateValue($event)">
+                  <span [innerHTML]="checkboxItem?.name"></span>
+                </label>
+              </div>
+            }
+          </div>
+        }`,
                     standalone: false
                 }]
-        }] });
+        }], propDecorators: { layoutNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutNode", required: false }] }], layoutIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutIndex", required: false }] }], dataIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataIndex", required: false }] }] } });
 
 // TODO: Add this control
 class FileComponent {
@@ -8452,9 +8600,9 @@ class FileComponent {
         this.jsf = inject(JsonSchemaFormService);
         this.controlDisabled = false;
         this.boundControl = false;
-        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
-        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
-        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
+        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 || {};
@@ -8466,10 +8614,10 @@ class FileComponent {
     ngOnDestroy() {
         this.jsf.updateValue(this, null);
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: FileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.2", 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: "20.1.6", ngImport: i0, type: FileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: FileComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -8477,16 +8625,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     template: ``,
                     standalone: false
                 }]
-        }] });
+        }], propDecorators: { layoutNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutNode", required: false }] }], layoutIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutIndex", required: false }] }], dataIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataIndex", required: false }] }] } });
 
 class HiddenComponent {
     constructor() {
         this.jsf = inject(JsonSchemaFormService);
         this.controlDisabled = false;
         this.boundControl = false;
-        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
-        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
-        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
+        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);
@@ -8494,40 +8642,48 @@ class HiddenComponent {
     ngOnDestroy() {
         this.jsf.updateValue(this, null);
     }
-    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"
-      [name]="controlName"
-      type="hidden">
-    <input *ngIf="!boundControl"
-      [disabled]="controlDisabled"
-      [name]="controlName"
-      [id]="'control' + layoutNode()?._id"
-      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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: HiddenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", 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: `
+    @if (boundControl) {
+      <input
+        [formControl]="formControl"
+        [id]="'control' + layoutNode()?._id"
+        [name]="controlName"
+        type="hidden">
+    }
+    @if (!boundControl) {
+      <input
+        [disabled]="controlDisabled"
+        [name]="controlName"
+        [id]="'control' + layoutNode()?._id"
+        type="hidden"
+        [value]="controlValue">
+    }`, isInline: true, dependencies: [{ kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: HiddenComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: HiddenComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
                     selector: 'hidden-widget',
-                    template: `
-    <input *ngIf="boundControl"
-      [formControl]="formControl"
-      [id]="'control' + layoutNode()?._id"
-      [name]="controlName"
-      type="hidden">
-    <input *ngIf="!boundControl"
-      [disabled]="controlDisabled"
-      [name]="controlName"
-      [id]="'control' + layoutNode()?._id"
-      type="hidden"
-      [value]="controlValue">`,
+                    template: `
+    @if (boundControl) {
+      <input
+        [formControl]="formControl"
+        [id]="'control' + layoutNode()?._id"
+        [name]="controlName"
+        type="hidden">
+    }
+    @if (!boundControl) {
+      <input
+        [disabled]="controlDisabled"
+        [name]="controlName"
+        [id]="'control' + layoutNode()?._id"
+        type="hidden"
+        [value]="controlValue">
+    }`,
                     standalone: false
                 }]
-        }] });
+        }], propDecorators: { layoutNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutNode", required: false }] }], layoutIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutIndex", required: false }] }], dataIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataIndex", required: false }] }] } });
 
 class InputComponent {
     constructor() {
@@ -8535,9 +8691,9 @@ class InputComponent {
         this.controlDisabled = false;
         this.boundControl = false;
         this.autoCompleteList = [];
-        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
-        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
-        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
+        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() {
@@ -8551,157 +8707,226 @@ class InputComponent {
         this.jsf.updateValue(this, event.target.value);
     }
     ngOnDestroy() {
-        this.jsf.updateValue(this, null);
+        //needed to be done in timeout for when dynamic/condition based
+        //titles depend on the formControls value but the formControl
+        //is also destroyed
+        setTimeout(() => {
+            this.jsf.updateValue(this, null);
+        });
     }
-    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 || ''" >
-      <label *ngIf="options?.title"
-        [attr.for]="'control' + layoutNode()?._id"
-        [class]="options?.labelHtmlClass || ''"
-        [style.display]="options?.notitle ? 'none' : ''"
-        [innerHTML]="options?.title"></label>
-      <input *ngIf="boundControl"
-        [formControl]="formControl"
-        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
-        [attr.list]="'control' + layoutNode()?._id + 'Autocomplete'"
-        [attr.maxlength]="options?.maxLength"
-        [attr.minlength]="options?.minLength"
-        [attr.pattern]="options?.pattern"
-        [attr.placeholder]="options?.placeholder"
-        [attr.required]="options?.required"
-        [class]="options?.fieldHtmlClass || ''"
-        [id]="'control' + layoutNode()?._id"
-        [name]="controlName"
-        [readonly]="options?.readonly ? 'readonly' : null"
-        [type]="layoutNode()?.type"
-        [attributes]="inputAttributes"
-        [appStopPropagation]="['mousedown', 'touchstart']"
-        >
-      <input *ngIf="!boundControl"
-        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
-        [attr.list]="'control' + layoutNode()?._id + 'Autocomplete'"
-        [attr.maxlength]="options?.maxLength"
-        [attr.minlength]="options?.minLength"
-        [attr.pattern]="options?.pattern"
-        [attr.placeholder]="options?.placeholder"
-        [attr.required]="options?.required"
-        [class]="options?.fieldHtmlClass || ''"
-        [disabled]="controlDisabled"
-        [id]="'control' + layoutNode()?._id"
-        [name]="controlName"
-        [readonly]="options?.readonly ? 'readonly' : null"
-        [type]="layoutNode()?.type"
-        [value]="controlValue"
-        (input)="updateValue($event)"
-        [attributes]="inputAttributes"
-        [appStopPropagation]="['mousedown', 'touchstart']"
-        >
-        <datalist *ngIf="options?.typeahead?.source"
-          [id]="'control' + layoutNode()?._id + 'Autocomplete'">
-          <option *ngFor="let word of options?.typeahead?.source" [value]="word">
-        </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"] }, { kind: "directive", type: StopPropagationDirective, selector: "[appStopPropagation]", inputs: ["appStopPropagation"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", 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 || ''" >
+      @if (options?.title) {
+        <label
+          [attr.for]="'control' + layoutNode()?._id"
+          [class]="options?.labelHtmlClass || ''"
+          [style.display]="options?.notitle ? 'none' : ''"
+        [innerHTML]="options?.title"></label>
+      }
+      @if (boundControl) {
+        <input
+          [formControl]="formControl"
+          [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+          [attr.list]="'control' + layoutNode()?._id + 'Autocomplete'"
+          [attr.maxlength]="options?.maxLength"
+          [attr.minlength]="options?.minLength"
+          [attr.pattern]="options?.pattern"
+          [attr.placeholder]="options?.placeholder"
+          [attr.required]="options?.required"
+          [class]="options?.fieldHtmlClass || ''"
+          [id]="'control' + layoutNode()?._id"
+          [name]="controlName"
+          [readonly]="options?.readonly ? 'readonly' : null"
+          [type]="layoutNode()?.type"
+          [attributes]="inputAttributes"
+          [appStopPropagation]="['mousedown', 'touchstart']"
+          >
+      }
+      @if (!boundControl) {
+        <input
+          [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+          [attr.list]="'control' + layoutNode()?._id + 'Autocomplete'"
+          [attr.maxlength]="options?.maxLength"
+          [attr.minlength]="options?.minLength"
+          [attr.pattern]="options?.pattern"
+          [attr.placeholder]="options?.placeholder"
+          [attr.required]="options?.required"
+          [class]="options?.fieldHtmlClass || ''"
+          [disabled]="controlDisabled"
+          [id]="'control' + layoutNode()?._id"
+          [name]="controlName"
+          [readonly]="options?.readonly ? 'readonly' : null"
+          [type]="layoutNode()?.type"
+          [value]="controlValue"
+          (input)="updateValue($event)"
+          [attributes]="inputAttributes"
+          [appStopPropagation]="['mousedown', 'touchstart']"
+          >
+      }
+      @if (options?.typeahead?.source) {
+        <datalist
+          [id]="'control' + layoutNode()?._id + 'Autocomplete'">
+          @for (word of options?.typeahead?.source; track word) {
+            <option [value]="word">
+            }
+          </datalist>
+        }
+      </div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ElementAttributeDirective, selector: "[attributes]", inputs: ["attributes"] }, { kind: "directive", type: StopPropagationDirective, selector: "[appStopPropagation]", inputs: ["appStopPropagation"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: InputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
                     selector: 'input-widget',
-                    template: `
-    <div [class]="options?.htmlClass || ''" >
-      <label *ngIf="options?.title"
-        [attr.for]="'control' + layoutNode()?._id"
-        [class]="options?.labelHtmlClass || ''"
-        [style.display]="options?.notitle ? 'none' : ''"
-        [innerHTML]="options?.title"></label>
-      <input *ngIf="boundControl"
-        [formControl]="formControl"
-        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
-        [attr.list]="'control' + layoutNode()?._id + 'Autocomplete'"
-        [attr.maxlength]="options?.maxLength"
-        [attr.minlength]="options?.minLength"
-        [attr.pattern]="options?.pattern"
-        [attr.placeholder]="options?.placeholder"
-        [attr.required]="options?.required"
-        [class]="options?.fieldHtmlClass || ''"
-        [id]="'control' + layoutNode()?._id"
-        [name]="controlName"
-        [readonly]="options?.readonly ? 'readonly' : null"
-        [type]="layoutNode()?.type"
-        [attributes]="inputAttributes"
-        [appStopPropagation]="['mousedown', 'touchstart']"
-        >
-      <input *ngIf="!boundControl"
-        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
-        [attr.list]="'control' + layoutNode()?._id + 'Autocomplete'"
-        [attr.maxlength]="options?.maxLength"
-        [attr.minlength]="options?.minLength"
-        [attr.pattern]="options?.pattern"
-        [attr.placeholder]="options?.placeholder"
-        [attr.required]="options?.required"
-        [class]="options?.fieldHtmlClass || ''"
-        [disabled]="controlDisabled"
-        [id]="'control' + layoutNode()?._id"
-        [name]="controlName"
-        [readonly]="options?.readonly ? 'readonly' : null"
-        [type]="layoutNode()?.type"
-        [value]="controlValue"
-        (input)="updateValue($event)"
-        [attributes]="inputAttributes"
-        [appStopPropagation]="['mousedown', 'touchstart']"
-        >
-        <datalist *ngIf="options?.typeahead?.source"
-          [id]="'control' + layoutNode()?._id + 'Autocomplete'">
-          <option *ngFor="let word of options?.typeahead?.source" [value]="word">
-        </datalist>
-    </div>`,
+                    template: `
+    <div [class]="options?.htmlClass || ''" >
+      @if (options?.title) {
+        <label
+          [attr.for]="'control' + layoutNode()?._id"
+          [class]="options?.labelHtmlClass || ''"
+          [style.display]="options?.notitle ? 'none' : ''"
+        [innerHTML]="options?.title"></label>
+      }
+      @if (boundControl) {
+        <input
+          [formControl]="formControl"
+          [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+          [attr.list]="'control' + layoutNode()?._id + 'Autocomplete'"
+          [attr.maxlength]="options?.maxLength"
+          [attr.minlength]="options?.minLength"
+          [attr.pattern]="options?.pattern"
+          [attr.placeholder]="options?.placeholder"
+          [attr.required]="options?.required"
+          [class]="options?.fieldHtmlClass || ''"
+          [id]="'control' + layoutNode()?._id"
+          [name]="controlName"
+          [readonly]="options?.readonly ? 'readonly' : null"
+          [type]="layoutNode()?.type"
+          [attributes]="inputAttributes"
+          [appStopPropagation]="['mousedown', 'touchstart']"
+          >
+      }
+      @if (!boundControl) {
+        <input
+          [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+          [attr.list]="'control' + layoutNode()?._id + 'Autocomplete'"
+          [attr.maxlength]="options?.maxLength"
+          [attr.minlength]="options?.minLength"
+          [attr.pattern]="options?.pattern"
+          [attr.placeholder]="options?.placeholder"
+          [attr.required]="options?.required"
+          [class]="options?.fieldHtmlClass || ''"
+          [disabled]="controlDisabled"
+          [id]="'control' + layoutNode()?._id"
+          [name]="controlName"
+          [readonly]="options?.readonly ? 'readonly' : null"
+          [type]="layoutNode()?.type"
+          [value]="controlValue"
+          (input)="updateValue($event)"
+          [attributes]="inputAttributes"
+          [appStopPropagation]="['mousedown', 'touchstart']"
+          >
+      }
+      @if (options?.typeahead?.source) {
+        <datalist
+          [id]="'control' + layoutNode()?._id + 'Autocomplete'">
+          @for (word of options?.typeahead?.source; track word) {
+            <option [value]="word">
+            }
+          </datalist>
+        }
+      </div>`,
                     standalone: false
                 }]
-        }] });
+        }], propDecorators: { layoutNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutNode", required: false }] }], layoutIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutIndex", required: false }] }], dataIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataIndex", required: false }] }] } });
+
+// item-title.component.ts
+class ItemTitleComponent {
+    constructor(jsf) {
+        this.jsf = jsf;
+    }
+    ngOnChanges(changes) {
+        this.updateTitle();
+    }
+    ngOnInit() {
+        // Calculate the title once on init, or subscribe to changes here
+        this.updateTitle();
+        this.dataChangesSubs = this.jsf.dataChanges.subscribe((val) => {
+            this.updateTitle();
+        });
+    }
+    updateTitle() {
+        this.title = this.jsf.setArrayItemTitle(this.ctx, this.item, this.index);
+    }
+    ngOnDestroy() {
+        this.dataChangesSubs?.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ItemTitleComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.2", type: ItemTitleComponent, isStandalone: false, selector: "item-title", inputs: { item: "item", index: "index", ctx: "ctx" }, usesOnChanges: true, ngImport: i0, template: `<div>{{ title }}</div>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ItemTitleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'item-title',
+                    template: `<div>{{ title }}</div>`,
+                    standalone: false
+                    // Consider using ChangeDetectionStrategy.OnPush here for maximum efficiency
+                }]
+        }], ctorParameters: () => [{ type: JsonSchemaFormService }], propDecorators: { item: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], ctx: [{
+                type: Input
+            }] } });
 
 class MessageComponent {
     constructor() {
         this.jsf = inject(JsonSchemaFormService);
         this.message = null;
-        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
-        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
-        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
+        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: "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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: MessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", 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: `
+    @if (message) {
+      <span
+        [class]="options?.labelHtmlClass || ''"
+      [innerHTML]="message"></span>
+    }`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: MessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
                     selector: 'message-widget',
-                    template: `
-    <span *ngIf="message"
-      [class]="options?.labelHtmlClass || ''"
-      [innerHTML]="message"></span>`,
+                    template: `
+    @if (message) {
+      <span
+        [class]="options?.labelHtmlClass || ''"
+      [innerHTML]="message"></span>
+    }`,
                     standalone: false
                 }]
-        }] });
+        }], propDecorators: { layoutNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutNode", required: false }] }], layoutIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutIndex", required: false }] }], dataIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataIndex", required: false }] }] } });
 
 class NoneComponent {
     constructor() {
-        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
-        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
-        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
+        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: "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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.2", 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: "20.1.6", ngImport: i0, type: NoneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NoneComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -8709,7 +8934,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     template: ``,
                     standalone: false
                 }]
-        }] });
+        }], propDecorators: { layoutNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutNode", required: false }] }], layoutIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutIndex", required: false }] }], dataIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataIndex", required: false }] }] } });
 
 //TODO look at reusing InputComponent
 class NumberComponent {
@@ -8721,9 +8946,9 @@ class NumberComponent {
         this.allowDecimal = true;
         this.allowExponents = false;
         this.lastValidNumber = '';
-        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
-        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
-        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
+        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() {
@@ -8740,112 +8965,131 @@ class NumberComponent {
         this.jsf.updateValue(this, event.target.value);
     }
     ngOnDestroy() {
-        this.jsf.updateValue(this, null);
+        //see cpmments in input component
+        setTimeout(() => {
+            this.jsf.updateValue(this, null);
+        });
     }
-    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 || ''"  >
-      <label *ngIf="options?.title"
-        [attr.for]="'control' + layoutNode()?._id"
-        [class]="options?.labelHtmlClass || ''"
-        [style.display]="options?.notitle ? 'none' : ''"
-        [innerHTML]="options?.title"></label>
-      <input #inputControl *ngIf="boundControl"
-        [formControl]="formControl"
-        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
-        [attr.max]="options?.maximum"
-        [attr.min]="options?.minimum"
-        [attr.placeholder]="options?.placeholder"
-        [attr.required]="options?.required"
-        [attr.readonly]="options?.readonly ? 'readonly' : null"
-        [attr.step]="options?.multipleOf || options?.step || 'any'"
-        [class]="options?.fieldHtmlClass || ''"
-        [id]="'control' + layoutNode()?._id"
-        [name]="controlName"
-        [readonly]="options?.readonly ? 'readonly' : null"
-        [title]="lastValidNumber"
-        [type]="layoutNode()?.type === 'range' ? 'range' : 'number'"
-        [attributes]="inputAttributes"
-        [appStopPropagation]="['mousedown', 'touchstart']"
-        >
-      <input #inputControl *ngIf="!boundControl"
-        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
-        [attr.max]="options?.maximum"
-        [attr.min]="options?.minimum"
-        [attr.placeholder]="options?.placeholder"
-        [attr.required]="options?.required"
-        [attr.readonly]="options?.readonly ? 'readonly' : null"
-        [attr.step]="options?.multipleOf || options?.step || 'any'"
-        [class]="options?.fieldHtmlClass || ''"
-        [disabled]="controlDisabled"
-        [id]="'control' + layoutNode()?._id"
-        [name]="controlName"
-        [readonly]="options?.readonly ? 'readonly' : null"
-        [title]="lastValidNumber"
-        [type]="layoutNode()?.type === 'range' ? 'range' : 'number'"
-        [value]="controlValue"
-        (input)="updateValue($event)"
-        [attributes]="inputAttributes"
-        [appStopPropagation]="['mousedown', 'touchstart']"
-        >
-      <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"] }, { kind: "directive", type: StopPropagationDirective, selector: "[appStopPropagation]", inputs: ["appStopPropagation"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", 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 || ''"  >
+      @if (options?.title) {
+        <label
+          [attr.for]="'control' + layoutNode()?._id"
+          [class]="options?.labelHtmlClass || ''"
+          [style.display]="options?.notitle ? 'none' : ''"
+        [innerHTML]="options?.title"></label>
+      }
+      @if (boundControl) {
+        <input #inputControl
+          [formControl]="formControl"
+          [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+          [attr.max]="options?.maximum"
+          [attr.min]="options?.minimum"
+          [attr.placeholder]="options?.placeholder"
+          [attr.required]="options?.required"
+          [attr.readonly]="options?.readonly ? 'readonly' : null"
+          [attr.step]="options?.multipleOf || options?.step || 'any'"
+          [class]="options?.fieldHtmlClass || ''"
+          [id]="'control' + layoutNode()?._id"
+          [name]="controlName"
+          [readonly]="options?.readonly ? 'readonly' : null"
+          [title]="lastValidNumber"
+          [type]="layoutNode()?.type === 'range' ? 'range' : 'number'"
+          [attributes]="inputAttributes"
+          [appStopPropagation]="['mousedown', 'touchstart']"
+          >
+      }
+      @if (!boundControl) {
+        <input #inputControl
+          [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+          [attr.max]="options?.maximum"
+          [attr.min]="options?.minimum"
+          [attr.placeholder]="options?.placeholder"
+          [attr.required]="options?.required"
+          [attr.readonly]="options?.readonly ? 'readonly' : null"
+          [attr.step]="options?.multipleOf || options?.step || 'any'"
+          [class]="options?.fieldHtmlClass || ''"
+          [disabled]="controlDisabled"
+          [id]="'control' + layoutNode()?._id"
+          [name]="controlName"
+          [readonly]="options?.readonly ? 'readonly' : null"
+          [title]="lastValidNumber"
+          [type]="layoutNode()?.type === 'range' ? 'range' : 'number'"
+          [value]="controlValue"
+          (input)="updateValue($event)"
+          [attributes]="inputAttributes"
+          [appStopPropagation]="['mousedown', 'touchstart']"
+          >
+      }
+      @if (layoutNode()?.type === 'range') {
+        <span [innerHTML]="controlValue"></span>
+      }
+    </div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ElementAttributeDirective, selector: "[attributes]", inputs: ["attributes"] }, { kind: "directive", type: StopPropagationDirective, selector: "[appStopPropagation]", inputs: ["appStopPropagation"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NumberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NumberComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
                     selector: 'number-widget',
-                    template: `
-    <div #divElt [class]="options?.htmlClass || ''"  >
-      <label *ngIf="options?.title"
-        [attr.for]="'control' + layoutNode()?._id"
-        [class]="options?.labelHtmlClass || ''"
-        [style.display]="options?.notitle ? 'none' : ''"
-        [innerHTML]="options?.title"></label>
-      <input #inputControl *ngIf="boundControl"
-        [formControl]="formControl"
-        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
-        [attr.max]="options?.maximum"
-        [attr.min]="options?.minimum"
-        [attr.placeholder]="options?.placeholder"
-        [attr.required]="options?.required"
-        [attr.readonly]="options?.readonly ? 'readonly' : null"
-        [attr.step]="options?.multipleOf || options?.step || 'any'"
-        [class]="options?.fieldHtmlClass || ''"
-        [id]="'control' + layoutNode()?._id"
-        [name]="controlName"
-        [readonly]="options?.readonly ? 'readonly' : null"
-        [title]="lastValidNumber"
-        [type]="layoutNode()?.type === 'range' ? 'range' : 'number'"
-        [attributes]="inputAttributes"
-        [appStopPropagation]="['mousedown', 'touchstart']"
-        >
-      <input #inputControl *ngIf="!boundControl"
-        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
-        [attr.max]="options?.maximum"
-        [attr.min]="options?.minimum"
-        [attr.placeholder]="options?.placeholder"
-        [attr.required]="options?.required"
-        [attr.readonly]="options?.readonly ? 'readonly' : null"
-        [attr.step]="options?.multipleOf || options?.step || 'any'"
-        [class]="options?.fieldHtmlClass || ''"
-        [disabled]="controlDisabled"
-        [id]="'control' + layoutNode()?._id"
-        [name]="controlName"
-        [readonly]="options?.readonly ? 'readonly' : null"
-        [title]="lastValidNumber"
-        [type]="layoutNode()?.type === 'range' ? 'range' : 'number'"
-        [value]="controlValue"
-        (input)="updateValue($event)"
-        [attributes]="inputAttributes"
-        [appStopPropagation]="['mousedown', 'touchstart']"
-        >
-      <span *ngIf="layoutNode()?.type === 'range'" [innerHTML]="controlValue"></span>
+                    template: `
+    <div #divElt [class]="options?.htmlClass || ''"  >
+      @if (options?.title) {
+        <label
+          [attr.for]="'control' + layoutNode()?._id"
+          [class]="options?.labelHtmlClass || ''"
+          [style.display]="options?.notitle ? 'none' : ''"
+        [innerHTML]="options?.title"></label>
+      }
+      @if (boundControl) {
+        <input #inputControl
+          [formControl]="formControl"
+          [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+          [attr.max]="options?.maximum"
+          [attr.min]="options?.minimum"
+          [attr.placeholder]="options?.placeholder"
+          [attr.required]="options?.required"
+          [attr.readonly]="options?.readonly ? 'readonly' : null"
+          [attr.step]="options?.multipleOf || options?.step || 'any'"
+          [class]="options?.fieldHtmlClass || ''"
+          [id]="'control' + layoutNode()?._id"
+          [name]="controlName"
+          [readonly]="options?.readonly ? 'readonly' : null"
+          [title]="lastValidNumber"
+          [type]="layoutNode()?.type === 'range' ? 'range' : 'number'"
+          [attributes]="inputAttributes"
+          [appStopPropagation]="['mousedown', 'touchstart']"
+          >
+      }
+      @if (!boundControl) {
+        <input #inputControl
+          [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+          [attr.max]="options?.maximum"
+          [attr.min]="options?.minimum"
+          [attr.placeholder]="options?.placeholder"
+          [attr.required]="options?.required"
+          [attr.readonly]="options?.readonly ? 'readonly' : null"
+          [attr.step]="options?.multipleOf || options?.step || 'any'"
+          [class]="options?.fieldHtmlClass || ''"
+          [disabled]="controlDisabled"
+          [id]="'control' + layoutNode()?._id"
+          [name]="controlName"
+          [readonly]="options?.readonly ? 'readonly' : null"
+          [title]="lastValidNumber"
+          [type]="layoutNode()?.type === 'range' ? 'range' : 'number'"
+          [value]="controlValue"
+          (input)="updateValue($event)"
+          [attributes]="inputAttributes"
+          [appStopPropagation]="['mousedown', 'touchstart']"
+          >
+      }
+      @if (layoutNode()?.type === 'range') {
+        <span [innerHTML]="controlValue"></span>
+      }
     </div>`,
                     standalone: false
                 }]
-        }], propDecorators: { inputControl: [{
+        }], propDecorators: { layoutNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutNode", required: false }] }], layoutIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutIndex", required: false }] }], dataIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataIndex", required: false }] }], inputControl: [{
                 type: ViewChild,
                 args: ['inputControl', {}]
             }], div: [{
@@ -8858,10 +9102,10 @@ class SelectFrameworkComponent {
         this.jsf = inject(JsonSchemaFormService);
         this.changeDetectorRef = inject(ChangeDetectorRef);
         this.newComponent = null;
-        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 }]));
+        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 });
     }
     ngOnInit() {
         this.updateComponent();
@@ -8885,10 +9129,10 @@ class SelectFrameworkComponent {
             //this.changeDetectorRef.detectChanges();
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: SelectFrameworkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.2", 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: "20.1.6", ngImport: i0, type: SelectFrameworkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: SelectFrameworkComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -8896,7 +9140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     template: `<div #widgetContainer></div>`,
                     standalone: false
                 }]
-        }] });
+        }], propDecorators: { layoutNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutNode", required: false }] }], layoutIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutIndex", required: false }] }], dataIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataIndex", required: false }] }], widgetContainer: [{ type: i0.ViewChild, args: ['widgetContainer', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 
 class TabsComponent {
     constructor() {
@@ -8904,9 +9148,9 @@ class TabsComponent {
         this.cdr = inject(ChangeDetectorRef);
         this.selectedItem = 0;
         this.showAddTab = true;
-        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
-        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
-        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
+        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 || {};
@@ -8918,8 +9162,9 @@ class TabsComponent {
         //TODO review/test-introduced to fix dynamic titles not updating
         //when their conditional linked field is destroyed
         //-forces change detection!
-        this.jsf.dataChanges.subscribe((val) => {
-            this.cdr.detectChanges();
+        //-commented out, causing other issues
+        this.dataChangesSubs = this.jsf.dataChanges.subscribe((val) => {
+            //this.cdr.detectChanges();
         });
     }
     select(index) {
@@ -8948,115 +9193,133 @@ class TabsComponent {
     ngOnDestroy() {
         this.dataChangesSubs?.unsubscribe();
     }
-    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"
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", 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 || ''">
+      @for (item of layoutNode()?.items; track item; let i = $index) {
+        <li
         [class]="(options?.itemLabelHtmlClass || '') + (selectedItem === i ?
           (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
           (' ' + options?.style?.unselected))"
-        role="presentation"
-        data-tabs>
-        <a *ngIf="showAddTab || item.type !== '$ref'"
+          role="presentation"
+          data-tabs>
+          @if (showAddTab || item.type !== '$ref') {
+            <a
            [class]="'nav-link' + (selectedItem === i ? (' ' + options?.activeClass + ' ' + options?.style?.selected) :
             (' ' + options?.style?.unselected))"
-          (click)="select(i)">
-          <input type="radio" [value]="i" *ngIf="options?.tabMode=='oneOfMode'" 
-           name="tabSelection" 
-           [(ngModel)]="selectedItem"
-           [class]="(options?.widget_radioClass || '')"
-           [value]="i" 
-           (change)="select(i)"
-          />
-          {{setTabTitle(item, i)}}
-          </a>
-          
-      </li>
-    </ul>
-
-    <div *ngFor="let layoutItem of layoutNode()?.items; let i = index"
-      [class]="(options?.htmlClass || '') + (selectedItem != i?' ngf-hidden':'') ">
-        <!--for now the only difference between oneOfMode and the default 
-          is that oneOfMode uses the *ngIf="selectedItem === i" clause, which automatically
-          destroys the tabs that are not rendered while default mode only hide them
-          the upshot is that only the active tabs value will be used
-        -->
-      <ng-container *ngIf="options?.tabMode=='oneOfMode'">
-        <select-framework-widget *ngIf="selectedItem === i"
+              (click)="select(i)">
+              @if (options?.tabMode=='oneOfMode') {
+                <input type="radio" [value]="i"
+                  name="tabSelection"
+                  [(ngModel)]="selectedItem"
+                  [class]="(options?.widget_radioClass || '')"
+                  [value]="i"
+                  (change)="select(i)"
+                  />
+              }
+              {{setTabTitle(item, i)}}
+            </a>
+          }
+        </li>
+      }
+    </ul>
+    
+    @for (layoutItem of layoutNode()?.items; track layoutItem; let i = $index) {
+      <div
+        [class]="(options?.htmlClass || '') + (selectedItem != i?' ngf-hidden':'') ">
+        <!--for now the only difference between oneOfMode and the default
+        is that oneOfMode uses the *ngIf="selectedItem === i" clause, which automatically
+        destroys the tabs that are not rendered while default mode only hide them
+        the upshot is that only the active tabs value will be used
+        -->
+        @if (options?.tabMode=='oneOfMode') {
+          @if (selectedItem === i) {
+            <select-framework-widget
           [class]="(options?.fieldHtmlClass || '') +
             ' ' + (options?.activeClass || '') +
             ' ' + (options?.style?.selected || '')"
-          [dataIndex]="layoutNode()?.dataType === 'array' ? (dataIndex() || []).concat(i) : dataIndex()"
-          [layoutIndex]="(layoutIndex() || []).concat(i)"
-          [layoutNode]="layoutItem"></select-framework-widget>
-      </ng-container> 
-      <ng-container *ngIf="options?.tabMode !='oneOfMode'">
-        <select-framework-widget 
+              [dataIndex]="layoutNode()?.dataType === 'array' ? (dataIndex() || []).concat(i) : dataIndex()"
+              [layoutIndex]="(layoutIndex() || []).concat(i)"
+            [layoutNode]="layoutItem"></select-framework-widget>
+          }
+        }
+        @if (options?.tabMode !='oneOfMode') {
+          <select-framework-widget
           [class]="(options?.fieldHtmlClass || '') +
             ' ' + (options?.activeClass || '') +
             ' ' + (options?.style?.selected || '')"
-          [dataIndex]="layoutNode()?.dataType === 'array' ? (dataIndex() || []).concat(i) : dataIndex()"
-          [layoutIndex]="(layoutIndex() || []).concat(i)"
-          [layoutNode]="layoutItem"></select-framework-widget>
-      </ng-container> 
-    </div>`, isInline: true, styles: ["a{cursor:pointer}.ngf-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SelectFrameworkComponent, selector: "select-framework-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }] }); }
+            [dataIndex]="layoutNode()?.dataType === 'array' ? (dataIndex() || []).concat(i) : dataIndex()"
+            [layoutIndex]="(layoutIndex() || []).concat(i)"
+          [layoutNode]="layoutItem"></select-framework-widget>
+        }
+      </div>
+    }`, isInline: true, styles: ["a{cursor:pointer}.ngf-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i1.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: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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: "20.1.6", ngImport: i0, type: TabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tabs-widget', template: `
-    <ul
-      [class]="options?.labelHtmlClass || ''">
-      <li *ngFor="let item of layoutNode()?.items; let i = index"
+            args: [{ selector: 'tabs-widget', template: `
+    <ul
+      [class]="options?.labelHtmlClass || ''">
+      @for (item of layoutNode()?.items; track item; let i = $index) {
+        <li
         [class]="(options?.itemLabelHtmlClass || '') + (selectedItem === i ?
           (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
           (' ' + options?.style?.unselected))"
-        role="presentation"
-        data-tabs>
-        <a *ngIf="showAddTab || item.type !== '$ref'"
+          role="presentation"
+          data-tabs>
+          @if (showAddTab || item.type !== '$ref') {
+            <a
            [class]="'nav-link' + (selectedItem === i ? (' ' + options?.activeClass + ' ' + options?.style?.selected) :
             (' ' + options?.style?.unselected))"
-          (click)="select(i)">
-          <input type="radio" [value]="i" *ngIf="options?.tabMode=='oneOfMode'" 
-           name="tabSelection" 
-           [(ngModel)]="selectedItem"
-           [class]="(options?.widget_radioClass || '')"
-           [value]="i" 
-           (change)="select(i)"
-          />
-          {{setTabTitle(item, i)}}
-          </a>
-          
-      </li>
-    </ul>
-
-    <div *ngFor="let layoutItem of layoutNode()?.items; let i = index"
-      [class]="(options?.htmlClass || '') + (selectedItem != i?' ngf-hidden':'') ">
-        <!--for now the only difference between oneOfMode and the default 
-          is that oneOfMode uses the *ngIf="selectedItem === i" clause, which automatically
-          destroys the tabs that are not rendered while default mode only hide them
-          the upshot is that only the active tabs value will be used
-        -->
-      <ng-container *ngIf="options?.tabMode=='oneOfMode'">
-        <select-framework-widget *ngIf="selectedItem === i"
+              (click)="select(i)">
+              @if (options?.tabMode=='oneOfMode') {
+                <input type="radio" [value]="i"
+                  name="tabSelection"
+                  [(ngModel)]="selectedItem"
+                  [class]="(options?.widget_radioClass || '')"
+                  [value]="i"
+                  (change)="select(i)"
+                  />
+              }
+              {{setTabTitle(item, i)}}
+            </a>
+          }
+        </li>
+      }
+    </ul>
+    
+    @for (layoutItem of layoutNode()?.items; track layoutItem; let i = $index) {
+      <div
+        [class]="(options?.htmlClass || '') + (selectedItem != i?' ngf-hidden':'') ">
+        <!--for now the only difference between oneOfMode and the default
+        is that oneOfMode uses the *ngIf="selectedItem === i" clause, which automatically
+        destroys the tabs that are not rendered while default mode only hide them
+        the upshot is that only the active tabs value will be used
+        -->
+        @if (options?.tabMode=='oneOfMode') {
+          @if (selectedItem === i) {
+            <select-framework-widget
           [class]="(options?.fieldHtmlClass || '') +
             ' ' + (options?.activeClass || '') +
             ' ' + (options?.style?.selected || '')"
-          [dataIndex]="layoutNode()?.dataType === 'array' ? (dataIndex() || []).concat(i) : dataIndex()"
-          [layoutIndex]="(layoutIndex() || []).concat(i)"
-          [layoutNode]="layoutItem"></select-framework-widget>
-      </ng-container> 
-      <ng-container *ngIf="options?.tabMode !='oneOfMode'">
-        <select-framework-widget 
+              [dataIndex]="layoutNode()?.dataType === 'array' ? (dataIndex() || []).concat(i) : dataIndex()"
+              [layoutIndex]="(layoutIndex() || []).concat(i)"
+            [layoutNode]="layoutItem"></select-framework-widget>
+          }
+        }
+        @if (options?.tabMode !='oneOfMode') {
+          <select-framework-widget
           [class]="(options?.fieldHtmlClass || '') +
             ' ' + (options?.activeClass || '') +
             ' ' + (options?.style?.selected || '')"
-          [dataIndex]="layoutNode()?.dataType === 'array' ? (dataIndex() || []).concat(i) : dataIndex()"
-          [layoutIndex]="(layoutIndex() || []).concat(i)"
-          [layoutNode]="layoutItem"></select-framework-widget>
-      </ng-container> 
-    </div>`, standalone: false, styles: ["a{cursor:pointer}.ngf-hidden{display:none}\n"] }]
-        }] });
+            [dataIndex]="layoutNode()?.dataType === 'array' ? (dataIndex() || []).concat(i) : dataIndex()"
+            [layoutIndex]="(layoutIndex() || []).concat(i)"
+          [layoutNode]="layoutItem"></select-framework-widget>
+        }
+      </div>
+    }`, standalone: false, styles: ["a{cursor:pointer}.ngf-hidden{display:none}\n"] }]
+        }], propDecorators: { layoutNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutNode", required: false }] }], layoutIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutIndex", required: false }] }], dataIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataIndex", required: false }] }] } });
 
 // TODO: Add this control
 class OneOfComponent {
@@ -9064,9 +9327,9 @@ class OneOfComponent {
         this.jsf = inject(JsonSchemaFormService);
         this.controlDisabled = false;
         this.boundControl = false;
-        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
-        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
-        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
+        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 || {};
@@ -9147,14 +9410,14 @@ class OneOfComponent {
     ngOnDestroy() {
         //this.jsf.updateValue(this, null);
     }
-    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>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: OneOfComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.2", 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: "20.1.6", ngImport: i0, type: OneOfComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: OneOfComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -9166,7 +9429,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
     </tabs-widget>`,
                     standalone: false
                 }]
-        }] });
+        }], propDecorators: { layoutNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutNode", required: false }] }], layoutIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutIndex", required: false }] }], dataIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataIndex", required: false }] }] } });
 
 class RadiosComponent {
     constructor() {
@@ -9175,9 +9438,9 @@ class RadiosComponent {
         this.boundControl = false;
         this.layoutOrientation = 'vertical';
         this.radiosList = [];
-        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
-        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
-        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
+        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 || {};
@@ -9195,139 +9458,159 @@ class RadiosComponent {
     ngOnDestroy() {
         this.jsf.updateValue(this, null);
     }
-    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 || ''"
-      [style.display]="options?.notitle ? 'none' : ''"
-      [innerHTML]="options?.title"></label>
-
-    <!-- 'horizontal' = radios-inline or radiobuttons -->
-    <div *ngIf="layoutOrientation === 'horizontal'"
-      [class]="options?.htmlClass || ''">
-      <label *ngFor="let radioItem of radiosList"
-        [attr.for]="'control' + layoutNode()?._id + '/' + radioItem?.value"
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: RadiosComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", 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: `
+    @if (options?.title) {
+      <label
+        [attr.for]="'control' + layoutNode()?._id"
+        [class]="options?.labelHtmlClass || ''"
+        [style.display]="options?.notitle ? 'none' : ''"
+      [innerHTML]="options?.title"></label>
+    }
+    
+    <!-- 'horizontal' = radios-inline or radiobuttons -->
+    @if (layoutOrientation === 'horizontal') {
+      <div
+        [class]="options?.htmlClass || ''">
+        @for (radioItem of radiosList; track radioItem) {
+          <label
+            [attr.for]="'control' + layoutNode()?._id + '/' + radioItem?.value"
         [class]="(options?.itemLabelHtmlClass || '') +
           ((controlValue + '' === radioItem?.value + '') ?
           (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
           (' ' + (options?.style?.unselected || '')))">
-        <input type="radio"
-          [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
-          [attr.readonly]="options?.readonly ? 'readonly' : null"
-          [attr.required]="options?.required"
-          [checked]="radioItem?.value === controlValue"
-          [class]="options?.fieldHtmlClass || ''"
-          [disabled]="controlDisabled"
-          [id]="'control' + layoutNode()?._id + '/' + radioItem?.value"
-          [name]="controlName"
-          [value]="radioItem?.value"
-          (change)="updateValue($event)">
-        <span [innerHTML]="radioItem?.name"></span>
-      </label>
-    </div>
-
-    <!-- 'vertical' = regular radios -->
-    <div *ngIf="layoutOrientation !== 'horizontal'">
-      <div *ngFor="let radioItem of radiosList"
-        [class]="options?.htmlClass || ''">
-        <label
-          [attr.for]="'control' + layoutNode()?._id + '/' + radioItem?.value"
+            <input type="radio"
+              [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+              [attr.readonly]="options?.readonly ? 'readonly' : null"
+              [attr.required]="options?.required"
+              [checked]="radioItem?.value === controlValue"
+              [class]="options?.fieldHtmlClass || ''"
+              [disabled]="controlDisabled"
+              [id]="'control' + layoutNode()?._id + '/' + radioItem?.value"
+              [name]="controlName"
+              [value]="radioItem?.value"
+              (change)="updateValue($event)">
+              <span [innerHTML]="radioItem?.name"></span>
+            </label>
+          }
+        </div>
+      }
+    
+      <!-- 'vertical' = regular radios -->
+      @if (layoutOrientation !== 'horizontal') {
+        <div>
+          @for (radioItem of radiosList; track radioItem) {
+            <div
+              [class]="options?.htmlClass || ''">
+              <label
+                [attr.for]="'control' + layoutNode()?._id + '/' + radioItem?.value"
           [class]="(options?.itemLabelHtmlClass || '') +
             ((controlValue + '' === radioItem?.value + '') ?
             (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
             (' ' + (options?.style?.unselected || '')))">
-          <input type="radio"
-            [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
-            [attr.readonly]="options?.readonly ? 'readonly' : null"
-            [attr.required]="options?.required"
-            [checked]="radioItem?.value === controlValue"
-            [class]="options?.fieldHtmlClass || ''"
-            [disabled]="controlDisabled"
-            [id]="'control' + layoutNode()?._id + '/' + radioItem?.value"
-            [name]="controlName"
-            [value]="radioItem?.value"
-            (change)="updateValue($event)">
-          <span [innerHTML]="radioItem?.name"></span>
-        </label>
-      </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"] }] }); }
+                <input type="radio"
+                  [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+                  [attr.readonly]="options?.readonly ? 'readonly' : null"
+                  [attr.required]="options?.required"
+                  [checked]="radioItem?.value === controlValue"
+                  [class]="options?.fieldHtmlClass || ''"
+                  [disabled]="controlDisabled"
+                  [id]="'control' + layoutNode()?._id + '/' + radioItem?.value"
+                  [name]="controlName"
+                  [value]="radioItem?.value"
+                  (change)="updateValue($event)">
+                  <span [innerHTML]="radioItem?.name"></span>
+                </label>
+              </div>
+            }
+          </div>
+        }`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: RadiosComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: RadiosComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
                     selector: 'radios-widget',
-                    template: `
-    <label *ngIf="options?.title"
-      [attr.for]="'control' + layoutNode()?._id"
-      [class]="options?.labelHtmlClass || ''"
-      [style.display]="options?.notitle ? 'none' : ''"
-      [innerHTML]="options?.title"></label>
-
-    <!-- 'horizontal' = radios-inline or radiobuttons -->
-    <div *ngIf="layoutOrientation === 'horizontal'"
-      [class]="options?.htmlClass || ''">
-      <label *ngFor="let radioItem of radiosList"
-        [attr.for]="'control' + layoutNode()?._id + '/' + radioItem?.value"
+                    template: `
+    @if (options?.title) {
+      <label
+        [attr.for]="'control' + layoutNode()?._id"
+        [class]="options?.labelHtmlClass || ''"
+        [style.display]="options?.notitle ? 'none' : ''"
+      [innerHTML]="options?.title"></label>
+    }
+    
+    <!-- 'horizontal' = radios-inline or radiobuttons -->
+    @if (layoutOrientation === 'horizontal') {
+      <div
+        [class]="options?.htmlClass || ''">
+        @for (radioItem of radiosList; track radioItem) {
+          <label
+            [attr.for]="'control' + layoutNode()?._id + '/' + radioItem?.value"
         [class]="(options?.itemLabelHtmlClass || '') +
           ((controlValue + '' === radioItem?.value + '') ?
           (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
           (' ' + (options?.style?.unselected || '')))">
-        <input type="radio"
-          [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
-          [attr.readonly]="options?.readonly ? 'readonly' : null"
-          [attr.required]="options?.required"
-          [checked]="radioItem?.value === controlValue"
-          [class]="options?.fieldHtmlClass || ''"
-          [disabled]="controlDisabled"
-          [id]="'control' + layoutNode()?._id + '/' + radioItem?.value"
-          [name]="controlName"
-          [value]="radioItem?.value"
-          (change)="updateValue($event)">
-        <span [innerHTML]="radioItem?.name"></span>
-      </label>
-    </div>
-
-    <!-- 'vertical' = regular radios -->
-    <div *ngIf="layoutOrientation !== 'horizontal'">
-      <div *ngFor="let radioItem of radiosList"
-        [class]="options?.htmlClass || ''">
-        <label
-          [attr.for]="'control' + layoutNode()?._id + '/' + radioItem?.value"
+            <input type="radio"
+              [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+              [attr.readonly]="options?.readonly ? 'readonly' : null"
+              [attr.required]="options?.required"
+              [checked]="radioItem?.value === controlValue"
+              [class]="options?.fieldHtmlClass || ''"
+              [disabled]="controlDisabled"
+              [id]="'control' + layoutNode()?._id + '/' + radioItem?.value"
+              [name]="controlName"
+              [value]="radioItem?.value"
+              (change)="updateValue($event)">
+              <span [innerHTML]="radioItem?.name"></span>
+            </label>
+          }
+        </div>
+      }
+    
+      <!-- 'vertical' = regular radios -->
+      @if (layoutOrientation !== 'horizontal') {
+        <div>
+          @for (radioItem of radiosList; track radioItem) {
+            <div
+              [class]="options?.htmlClass || ''">
+              <label
+                [attr.for]="'control' + layoutNode()?._id + '/' + radioItem?.value"
           [class]="(options?.itemLabelHtmlClass || '') +
             ((controlValue + '' === radioItem?.value + '') ?
             (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
             (' ' + (options?.style?.unselected || '')))">
-          <input type="radio"
-            [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
-            [attr.readonly]="options?.readonly ? 'readonly' : null"
-            [attr.required]="options?.required"
-            [checked]="radioItem?.value === controlValue"
-            [class]="options?.fieldHtmlClass || ''"
-            [disabled]="controlDisabled"
-            [id]="'control' + layoutNode()?._id + '/' + radioItem?.value"
-            [name]="controlName"
-            [value]="radioItem?.value"
-            (change)="updateValue($event)">
-          <span [innerHTML]="radioItem?.name"></span>
-        </label>
-      </div>
-    </div>`,
+                <input type="radio"
+                  [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+                  [attr.readonly]="options?.readonly ? 'readonly' : null"
+                  [attr.required]="options?.required"
+                  [checked]="radioItem?.value === controlValue"
+                  [class]="options?.fieldHtmlClass || ''"
+                  [disabled]="controlDisabled"
+                  [id]="'control' + layoutNode()?._id + '/' + radioItem?.value"
+                  [name]="controlName"
+                  [value]="radioItem?.value"
+                  (change)="updateValue($event)">
+                  <span [innerHTML]="radioItem?.name"></span>
+                </label>
+              </div>
+            }
+          </div>
+        }`,
                     standalone: false
                 }]
-        }] });
+        }], propDecorators: { layoutNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutNode", required: false }] }], layoutIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutIndex", required: false }] }], dataIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataIndex", required: false }] }] } });
 
 class RootComponent {
     constructor() {
         this.jsf = inject(JsonSchemaFormService);
         this.cdr = inject(ChangeDetectorRef);
-        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.memoizationEnabled = input(true, ...(ngDevMode ? [{ debugName: "memoizationEnabled" }] : []));
+        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.memoizationEnabled = input(true, { ...(ngDevMode ? { debugName: "memoizationEnabled" } : {}) });
         /**
          * Predicate function that disallows '$ref' item sorts
          * NB declared as a var instead of a function
@@ -9429,6 +9712,8 @@ class RootComponent {
             return this._getSelectFrameworkInputsRaw(layoutItem, i);
         }
     }
+    //TODO investigate-causing layout issue with layout,for now
+    //removed from template
     trackByFn(index, item) {
         return item._id ?? index;
     }
@@ -9468,123 +9753,129 @@ class RootComponent {
         this._getSelectFrameworkInputsMemoized.cache.clear();
         this.dataChangesSubs?.unsubscribe();
     }
-    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 }, memoizationEnabled: { classPropertyName: "memoizationEnabled", publicName: "memoizationEnabled", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0, template: `
-    <div cdkDropList (cdkDropListDropped)="drop($event)" 
-      [class.flex-inherit]="true"
-      [cdkDropListSortPredicate]="sortPredicate"
-    >
-      <!-- -for now left out
-      cdkDragHandle directive, by itself, does not disable the 
-      default drag behavior of its parent cdkDrag element. 
-      You must explicitly disable dragging on the main element 
-      and re-enable it only when using the handle.
-      -->
-      <div *ngFor="let layoutItem of layout(); let i = index;trackBy: trackByFn"
-         cdkDrag  [cdkDragStartDelay]="{touch:1000,mouse:0}"
-        [cdkDragDisabled]="!isDraggable(layoutItem)"
-        [class.form-flex-item]="isFlexItem()"
-        [style.align-self]="(layoutItem.options || {})['align-self']"
-        [style.flex-basis]="getFlexAttribute(layoutItem, 'flex-basis')"
-        [style.flex-grow]="getFlexAttribute(layoutItem, 'flex-grow')"
-        [style.flex-shrink]="getFlexAttribute(layoutItem, 'flex-shrink')"
-        [style.order]="(layoutItem.options || {}).order"
-        >
-
-        <!-- workaround to disbale dragging of input fields -->
-        <!--
-        <div *ngIf="layoutItem?.dataType !='object'"  cdkDragHandle>
-         <p>Drag Handle {{layoutItem?.dataType}}</p>
-        </div>
-        -->
-        <!--NB orderable directive is not used but has been left in for now and set to false
-          otherwise the compiler won't recognize dataIndex and other dependent attributes
-        -->
-        <!--
-        <div 
-          [dataIndex]="layoutItem?.arrayItem ? (dataIndex() || []).concat(i) : (dataIndex() || [])"
-          [layoutIndex]="(layoutIndex() || []).concat(i)"
-          [layoutNode]="layoutItem"
-          [orderable]="false"
-          >
-          <select-framework-widget *ngIf="showWidget(layoutItem)"
-            [dataIndex]="layoutItem?.arrayItem ? (dataIndex() || []).concat(i) : (dataIndex() || [])"
-            [layoutIndex]="(layoutIndex() || []).concat(i)"
-            [layoutNode]="layoutItem"></select-framework-widget>
-        </div>
-        -->
-      <select-framework-widget *ngIf="showWidget(layoutItem)"
-            [dataIndex]="getSelectFrameworkInputs(layoutItem,i).dataIndex"
-            [layoutIndex]="getSelectFrameworkInputs(layoutItem,i).layoutIndex"
-            [layoutNode]="getSelectFrameworkInputs(layoutItem,i).layoutNode">
-		  </select-framework-widget>
-      </div>
-    </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.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: SelectFrameworkComponent, selector: "select-framework-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: RootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", 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 }, memoizationEnabled: { classPropertyName: "memoizationEnabled", publicName: "memoizationEnabled", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0, template: `
+    <div cdkDropList (cdkDropListDropped)="drop($event)"
+      [class.flex-inherit]="true"
+      [cdkDropListSortPredicate]="sortPredicate"
+      >
+      <!-- -for now left out
+      cdkDragHandle directive, by itself, does not disable the
+      default drag behavior of its parent cdkDrag element.
+      You must explicitly disable dragging on the main element
+      and re-enable it only when using the handle.
+      -->
+      @for (layoutItem of layout(); track layoutItem; let i = $index) {
+        <div
+          cdkDrag  [cdkDragStartDelay]="{touch:1000,mouse:0}"
+          [cdkDragDisabled]="!isDraggable(layoutItem)"
+          [class.form-flex-item]="isFlexItem()"
+          [style.align-self]="(layoutItem.options || {})['align-self']"
+          [style.flex-basis]="getFlexAttribute(layoutItem, 'flex-basis')"
+          [style.flex-grow]="getFlexAttribute(layoutItem, 'flex-grow')"
+          [style.flex-shrink]="getFlexAttribute(layoutItem, 'flex-shrink')"
+          [style.order]="(layoutItem.options || {}).order"
+          >
+          <!-- workaround to disbale dragging of input fields -->
+          <!--
+          <div *ngIf="layoutItem?.dataType !='object'"  cdkDragHandle>
+            <p>Drag Handle {{layoutItem?.dataType}}</p>
+          </div>
+          -->
+          <!--NB orderable directive is not used but has been left in for now and set to false
+          otherwise the compiler won't recognize dataIndex and other dependent attributes
+          -->
+          <!--
+          <div
+            [dataIndex]="layoutItem?.arrayItem ? (dataIndex() || []).concat(i) : (dataIndex() || [])"
+            [layoutIndex]="(layoutIndex() || []).concat(i)"
+            [layoutNode]="layoutItem"
+            [orderable]="false"
+            >
+            <select-framework-widget *ngIf="showWidget(layoutItem)"
+              [dataIndex]="layoutItem?.arrayItem ? (dataIndex() || []).concat(i) : (dataIndex() || [])"
+              [layoutIndex]="(layoutIndex() || []).concat(i)"
+            [layoutNode]="layoutItem"></select-framework-widget>
+          </div>
+          -->
+          @if (showWidget(layoutItem)) {
+            <select-framework-widget
+              [dataIndex]="getSelectFrameworkInputs(layoutItem,i).dataIndex"
+              [layoutIndex]="getSelectFrameworkInputs(layoutItem,i).layoutIndex"
+              [layoutNode]="getSelectFrameworkInputs(layoutItem,i).layoutNode">
+            </select-framework-widget>
+          }
+        </div>
+      }
+    </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$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: SelectFrameworkComponent, selector: "select-framework-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: RootComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: RootComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'root-widget', template: `
-    <div cdkDropList (cdkDropListDropped)="drop($event)" 
-      [class.flex-inherit]="true"
-      [cdkDropListSortPredicate]="sortPredicate"
-    >
-      <!-- -for now left out
-      cdkDragHandle directive, by itself, does not disable the 
-      default drag behavior of its parent cdkDrag element. 
-      You must explicitly disable dragging on the main element 
-      and re-enable it only when using the handle.
-      -->
-      <div *ngFor="let layoutItem of layout(); let i = index;trackBy: trackByFn"
-         cdkDrag  [cdkDragStartDelay]="{touch:1000,mouse:0}"
-        [cdkDragDisabled]="!isDraggable(layoutItem)"
-        [class.form-flex-item]="isFlexItem()"
-        [style.align-self]="(layoutItem.options || {})['align-self']"
-        [style.flex-basis]="getFlexAttribute(layoutItem, 'flex-basis')"
-        [style.flex-grow]="getFlexAttribute(layoutItem, 'flex-grow')"
-        [style.flex-shrink]="getFlexAttribute(layoutItem, 'flex-shrink')"
-        [style.order]="(layoutItem.options || {}).order"
-        >
-
-        <!-- workaround to disbale dragging of input fields -->
-        <!--
-        <div *ngIf="layoutItem?.dataType !='object'"  cdkDragHandle>
-         <p>Drag Handle {{layoutItem?.dataType}}</p>
-        </div>
-        -->
-        <!--NB orderable directive is not used but has been left in for now and set to false
-          otherwise the compiler won't recognize dataIndex and other dependent attributes
-        -->
-        <!--
-        <div 
-          [dataIndex]="layoutItem?.arrayItem ? (dataIndex() || []).concat(i) : (dataIndex() || [])"
-          [layoutIndex]="(layoutIndex() || []).concat(i)"
-          [layoutNode]="layoutItem"
-          [orderable]="false"
-          >
-          <select-framework-widget *ngIf="showWidget(layoutItem)"
-            [dataIndex]="layoutItem?.arrayItem ? (dataIndex() || []).concat(i) : (dataIndex() || [])"
-            [layoutIndex]="(layoutIndex() || []).concat(i)"
-            [layoutNode]="layoutItem"></select-framework-widget>
-        </div>
-        -->
-      <select-framework-widget *ngIf="showWidget(layoutItem)"
-            [dataIndex]="getSelectFrameworkInputs(layoutItem,i).dataIndex"
-            [layoutIndex]="getSelectFrameworkInputs(layoutItem,i).layoutIndex"
-            [layoutNode]="getSelectFrameworkInputs(layoutItem,i).layoutNode">
-		  </select-framework-widget>
-      </div>
-    </div>
+            args: [{ selector: 'root-widget', template: `
+    <div cdkDropList (cdkDropListDropped)="drop($event)"
+      [class.flex-inherit]="true"
+      [cdkDropListSortPredicate]="sortPredicate"
+      >
+      <!-- -for now left out
+      cdkDragHandle directive, by itself, does not disable the
+      default drag behavior of its parent cdkDrag element.
+      You must explicitly disable dragging on the main element
+      and re-enable it only when using the handle.
+      -->
+      @for (layoutItem of layout(); track layoutItem; let i = $index) {
+        <div
+          cdkDrag  [cdkDragStartDelay]="{touch:1000,mouse:0}"
+          [cdkDragDisabled]="!isDraggable(layoutItem)"
+          [class.form-flex-item]="isFlexItem()"
+          [style.align-self]="(layoutItem.options || {})['align-self']"
+          [style.flex-basis]="getFlexAttribute(layoutItem, 'flex-basis')"
+          [style.flex-grow]="getFlexAttribute(layoutItem, 'flex-grow')"
+          [style.flex-shrink]="getFlexAttribute(layoutItem, 'flex-shrink')"
+          [style.order]="(layoutItem.options || {}).order"
+          >
+          <!-- workaround to disbale dragging of input fields -->
+          <!--
+          <div *ngIf="layoutItem?.dataType !='object'"  cdkDragHandle>
+            <p>Drag Handle {{layoutItem?.dataType}}</p>
+          </div>
+          -->
+          <!--NB orderable directive is not used but has been left in for now and set to false
+          otherwise the compiler won't recognize dataIndex and other dependent attributes
+          -->
+          <!--
+          <div
+            [dataIndex]="layoutItem?.arrayItem ? (dataIndex() || []).concat(i) : (dataIndex() || [])"
+            [layoutIndex]="(layoutIndex() || []).concat(i)"
+            [layoutNode]="layoutItem"
+            [orderable]="false"
+            >
+            <select-framework-widget *ngIf="showWidget(layoutItem)"
+              [dataIndex]="layoutItem?.arrayItem ? (dataIndex() || []).concat(i) : (dataIndex() || [])"
+              [layoutIndex]="(layoutIndex() || []).concat(i)"
+            [layoutNode]="layoutItem"></select-framework-widget>
+          </div>
+          -->
+          @if (showWidget(layoutItem)) {
+            <select-framework-widget
+              [dataIndex]="getSelectFrameworkInputs(layoutItem,i).dataIndex"
+              [layoutIndex]="getSelectFrameworkInputs(layoutItem,i).layoutIndex"
+              [layoutNode]="getSelectFrameworkInputs(layoutItem,i).layoutNode">
+            </select-framework-widget>
+          }
+        </div>
+      }
+    </div>
     `, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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"] }]
-        }] });
+        }], propDecorators: { dataIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataIndex", required: false }] }], layoutIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutIndex", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], isOrderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOrderable", required: false }] }], isFlexItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFlexItem", required: false }] }], memoizationEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "memoizationEnabled", required: false }] }] } });
 
 class SectionComponent {
     constructor() {
         this.jsf = inject(JsonSchemaFormService);
         this.expanded = true;
-        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
-        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
-        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
+        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);
@@ -9639,135 +9930,167 @@ class SectionComponent {
                 return this.options[attribute];
         }
     }
-    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"
-      [class.expanded]="options?.expandable && expanded">
-      <label *ngIf="sectionTitle"
-        class="legend"
-        [class]="options?.labelHtmlClass || ''"
-        [innerHTML]="sectionTitle"
-        (click)="toggleExpanded()"></label>
-      <root-widget 
-        [dataIndex]="dataIndex()"
-        [layout]="layoutNode().items"
-        [layoutIndex]="layoutIndex()"
-        [isFlexItem]="getFlexAttribute('is-flex')"
-        [isOrderable]="options?.orderable"
-        [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
-        [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
-        [style.align-content]="getFlexAttribute('align-content')"
-        [style.align-items]="getFlexAttribute('align-items')"
-        [style.display]="!expanded?'none':getFlexAttribute('display')"
-        [style.flex-direction]="getFlexAttribute('flex-direction')"
-        [style.flex-wrap]="getFlexAttribute('flex-wrap')"
-        [style.justify-content]="getFlexAttribute('justify-content')"></root-widget>
-    </div>
-    <fieldset *ngIf="containerType === 'fieldset'"
-      [class]="options?.htmlClass || ''"
-      [class.expandable]="options?.expandable && !expanded"
-      [class.expanded]="options?.expandable && expanded"
-      [disabled]="options?.readonly">
-      <legend *ngIf="sectionTitle"
-        class="legend"
-        [class]="options?.labelHtmlClass || ''"
-        [innerHTML]="sectionTitle"
-        (click)="toggleExpanded()"></legend>
-      <div *ngIf="options?.messageLocation !== 'bottom'">
-        <p *ngIf="options?.description"
-        class="help-block"
-        [class]="options?.labelHelpBlockClass || ''"
-        [innerHTML]="options?.description"></p>
-      </div>
-      <root-widget 
-        [dataIndex]="dataIndex()"
-        [layout]="layoutNode().items"
-        [layoutIndex]="layoutIndex()"
-        [isFlexItem]="getFlexAttribute('is-flex')"
-        [isOrderable]="options?.orderable"
-        [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
-        [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
-        [style.align-content]="getFlexAttribute('align-content')"
-        [style.align-items]="getFlexAttribute('align-items')"
-        [style.display]="!expanded?'none':getFlexAttribute('display')"
-        [style.flex-direction]="getFlexAttribute('flex-direction')"
-        [style.flex-wrap]="getFlexAttribute('flex-wrap')"
-        [style.justify-content]="getFlexAttribute('justify-content')"></root-widget>
-      <div *ngIf="options?.messageLocation === 'bottom'">
-        <p *ngIf="options?.description"
-        class="help-block"
-        [class]="options?.labelHelpBlockClass || ''"
-        [innerHTML]="options?.description"></p>
-      </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", "memoizationEnabled"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: SectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", 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: `
+    @if (containerType === 'div') {
+      <div
+        [class]="options?.htmlClass || ''"
+        [class.expandable]="options?.expandable && !expanded"
+        [class.expanded]="options?.expandable && expanded">
+        @if (sectionTitle) {
+          <label
+            class="legend"
+            [class]="options?.labelHtmlClass || ''"
+            [innerHTML]="sectionTitle"
+          (click)="toggleExpanded()"></label>
+        }
+        <root-widget
+          [dataIndex]="dataIndex()"
+          [layout]="layoutNode().items"
+          [layoutIndex]="layoutIndex()"
+          [isFlexItem]="getFlexAttribute('is-flex')"
+          [isOrderable]="options?.orderable"
+          [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
+          [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
+          [style.align-content]="getFlexAttribute('align-content')"
+          [style.align-items]="getFlexAttribute('align-items')"
+          [style.display]="!expanded?'none':getFlexAttribute('display')"
+          [style.flex-direction]="getFlexAttribute('flex-direction')"
+          [style.flex-wrap]="getFlexAttribute('flex-wrap')"
+        [style.justify-content]="getFlexAttribute('justify-content')"></root-widget>
+      </div>
+    }
+    @if (containerType === 'fieldset') {
+      <fieldset
+        [class]="options?.htmlClass || ''"
+        [class.expandable]="options?.expandable && !expanded"
+        [class.expanded]="options?.expandable && expanded"
+        [disabled]="options?.readonly">
+        @if (sectionTitle) {
+          <legend
+            class="legend"
+            [class]="options?.labelHtmlClass || ''"
+            [innerHTML]="sectionTitle"
+          (click)="toggleExpanded()"></legend>
+        }
+        @if (options?.messageLocation !== 'bottom') {
+          <div>
+            @if (options?.description) {
+              <p
+                class="help-block"
+                [class]="options?.labelHelpBlockClass || ''"
+              [innerHTML]="options?.description"></p>
+            }
+          </div>
+        }
+        <root-widget
+          [dataIndex]="dataIndex()"
+          [layout]="layoutNode().items"
+          [layoutIndex]="layoutIndex()"
+          [isFlexItem]="getFlexAttribute('is-flex')"
+          [isOrderable]="options?.orderable"
+          [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
+          [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
+          [style.align-content]="getFlexAttribute('align-content')"
+          [style.align-items]="getFlexAttribute('align-items')"
+          [style.display]="!expanded?'none':getFlexAttribute('display')"
+          [style.flex-direction]="getFlexAttribute('flex-direction')"
+          [style.flex-wrap]="getFlexAttribute('flex-wrap')"
+        [style.justify-content]="getFlexAttribute('justify-content')"></root-widget>
+        @if (options?.messageLocation === 'bottom') {
+          <div>
+            @if (options?.description) {
+              <p
+                class="help-block"
+                [class]="options?.labelHelpBlockClass || ''"
+              [innerHTML]="options?.description"></p>
+            }
+          </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: "component", type: RootComponent, selector: "root-widget", inputs: ["dataIndex", "layoutIndex", "layout", "isOrderable", "isFlexItem", "memoizationEnabled"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: SectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'section-widget', template: `
-    <div *ngIf="containerType === 'div'"
-      [class]="options?.htmlClass || ''"
-      [class.expandable]="options?.expandable && !expanded"
-      [class.expanded]="options?.expandable && expanded">
-      <label *ngIf="sectionTitle"
-        class="legend"
-        [class]="options?.labelHtmlClass || ''"
-        [innerHTML]="sectionTitle"
-        (click)="toggleExpanded()"></label>
-      <root-widget 
-        [dataIndex]="dataIndex()"
-        [layout]="layoutNode().items"
-        [layoutIndex]="layoutIndex()"
-        [isFlexItem]="getFlexAttribute('is-flex')"
-        [isOrderable]="options?.orderable"
-        [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
-        [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
-        [style.align-content]="getFlexAttribute('align-content')"
-        [style.align-items]="getFlexAttribute('align-items')"
-        [style.display]="!expanded?'none':getFlexAttribute('display')"
-        [style.flex-direction]="getFlexAttribute('flex-direction')"
-        [style.flex-wrap]="getFlexAttribute('flex-wrap')"
-        [style.justify-content]="getFlexAttribute('justify-content')"></root-widget>
-    </div>
-    <fieldset *ngIf="containerType === 'fieldset'"
-      [class]="options?.htmlClass || ''"
-      [class.expandable]="options?.expandable && !expanded"
-      [class.expanded]="options?.expandable && expanded"
-      [disabled]="options?.readonly">
-      <legend *ngIf="sectionTitle"
-        class="legend"
-        [class]="options?.labelHtmlClass || ''"
-        [innerHTML]="sectionTitle"
-        (click)="toggleExpanded()"></legend>
-      <div *ngIf="options?.messageLocation !== 'bottom'">
-        <p *ngIf="options?.description"
-        class="help-block"
-        [class]="options?.labelHelpBlockClass || ''"
-        [innerHTML]="options?.description"></p>
-      </div>
-      <root-widget 
-        [dataIndex]="dataIndex()"
-        [layout]="layoutNode().items"
-        [layoutIndex]="layoutIndex()"
-        [isFlexItem]="getFlexAttribute('is-flex')"
-        [isOrderable]="options?.orderable"
-        [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
-        [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
-        [style.align-content]="getFlexAttribute('align-content')"
-        [style.align-items]="getFlexAttribute('align-items')"
-        [style.display]="!expanded?'none':getFlexAttribute('display')"
-        [style.flex-direction]="getFlexAttribute('flex-direction')"
-        [style.flex-wrap]="getFlexAttribute('flex-wrap')"
-        [style.justify-content]="getFlexAttribute('justify-content')"></root-widget>
-      <div *ngIf="options?.messageLocation === 'bottom'">
-        <p *ngIf="options?.description"
-        class="help-block"
-        [class]="options?.labelHelpBlockClass || ''"
-        [innerHTML]="options?.description"></p>
-      </div>
-    </fieldset>`, standalone: false, 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"] }]
-        }] });
+            args: [{ selector: 'section-widget', template: `
+    @if (containerType === 'div') {
+      <div
+        [class]="options?.htmlClass || ''"
+        [class.expandable]="options?.expandable && !expanded"
+        [class.expanded]="options?.expandable && expanded">
+        @if (sectionTitle) {
+          <label
+            class="legend"
+            [class]="options?.labelHtmlClass || ''"
+            [innerHTML]="sectionTitle"
+          (click)="toggleExpanded()"></label>
+        }
+        <root-widget
+          [dataIndex]="dataIndex()"
+          [layout]="layoutNode().items"
+          [layoutIndex]="layoutIndex()"
+          [isFlexItem]="getFlexAttribute('is-flex')"
+          [isOrderable]="options?.orderable"
+          [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
+          [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
+          [style.align-content]="getFlexAttribute('align-content')"
+          [style.align-items]="getFlexAttribute('align-items')"
+          [style.display]="!expanded?'none':getFlexAttribute('display')"
+          [style.flex-direction]="getFlexAttribute('flex-direction')"
+          [style.flex-wrap]="getFlexAttribute('flex-wrap')"
+        [style.justify-content]="getFlexAttribute('justify-content')"></root-widget>
+      </div>
+    }
+    @if (containerType === 'fieldset') {
+      <fieldset
+        [class]="options?.htmlClass || ''"
+        [class.expandable]="options?.expandable && !expanded"
+        [class.expanded]="options?.expandable && expanded"
+        [disabled]="options?.readonly">
+        @if (sectionTitle) {
+          <legend
+            class="legend"
+            [class]="options?.labelHtmlClass || ''"
+            [innerHTML]="sectionTitle"
+          (click)="toggleExpanded()"></legend>
+        }
+        @if (options?.messageLocation !== 'bottom') {
+          <div>
+            @if (options?.description) {
+              <p
+                class="help-block"
+                [class]="options?.labelHelpBlockClass || ''"
+              [innerHTML]="options?.description"></p>
+            }
+          </div>
+        }
+        <root-widget
+          [dataIndex]="dataIndex()"
+          [layout]="layoutNode().items"
+          [layoutIndex]="layoutIndex()"
+          [isFlexItem]="getFlexAttribute('is-flex')"
+          [isOrderable]="options?.orderable"
+          [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
+          [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
+          [style.align-content]="getFlexAttribute('align-content')"
+          [style.align-items]="getFlexAttribute('align-items')"
+          [style.display]="!expanded?'none':getFlexAttribute('display')"
+          [style.flex-direction]="getFlexAttribute('flex-direction')"
+          [style.flex-wrap]="getFlexAttribute('flex-wrap')"
+        [style.justify-content]="getFlexAttribute('justify-content')"></root-widget>
+        @if (options?.messageLocation === 'bottom') {
+          <div>
+            @if (options?.description) {
+              <p
+                class="help-block"
+                [class]="options?.labelHelpBlockClass || ''"
+              [innerHTML]="options?.description"></p>
+            }
+          </div>
+        }
+      </fieldset>
+    }`, standalone: false, 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"] }]
+        }], propDecorators: { layoutNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutNode", required: false }] }], layoutIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutIndex", required: false }] }], dataIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataIndex", required: false }] }] } });
 
 class SelectComponent {
     constructor() {
@@ -9777,9 +10100,9 @@ class SelectComponent {
         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.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 || {};
@@ -9819,191 +10142,243 @@ class SelectComponent {
         this.formControl.reset(nullVal);
         this.controlValue = null;
     }
-    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"
-        [attr.for]="'control' + layoutNode()?._id"
-        [class]="options?.labelHtmlClass || ''"
-        [style.display]="options?.notitle ? 'none' : ''"
-        [innerHTML]="options?.title"></label>
-      <select *ngIf="boundControl && !options?.multiple"
-        [formControl]="formControl"
-        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
-        [attr.readonly]="options?.readonly ? 'readonly' : null"
-        [attr.required]="options?.required"
-        [class]="options?.fieldHtmlClass || ''"
-        [id]="'control' + layoutNode()?._id"
-        [name]="controlName">
-        <ng-template ngFor let-selectItem [ngForOf]="selectList">
-          <option *ngIf="!isArray(selectItem?.items)"
-            [ngValue]="selectItem?.value">
-            <span [innerHTML]="selectItem?.name"></span>
-          </option>
-          <optgroup *ngIf="isArray(selectItem?.items)"
-            [label]="selectItem?.group">
-            <option *ngFor="let subItem of selectItem.items"
-              [ngValue]="subItem?.value">
-              <span [innerHTML]="subItem?.name"></span>
-            </option>
-          </optgroup>
-        </ng-template>
-      </select>
-      <select *ngIf="!boundControl"
-        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
-        [attr.readonly]="options?.readonly ? 'readonly' : null"
-        [attr.required]="options?.required"
-        [class]="options?.fieldHtmlClass || ''"
-        [disabled]="controlDisabled"
-        [id]="'control' + layoutNode()?._id"
-        [name]="controlName"
-        (change)="updateValue($event)">
-        <ng-template ngFor let-selectItem [ngForOf]="selectList">
-          <option *ngIf="!isArray(selectItem?.items)"
-            [selected]="selectItem?.value === controlValue"
-            [ngValue]="selectItem?.value">
-            <span [innerHTML]="selectItem?.name"></span>
-          </option>
-          <optgroup *ngIf="isArray(selectItem?.items)"
-            [label]="selectItem?.group">
-            <option *ngFor="let subItem of selectItem.items"
-              [attr.selected]="subItem?.value === controlValue"
-              [ngValue]="subItem?.value">
-              <span [innerHTML]="subItem?.name"></span>
-            </option>
-          </optgroup>
-        </ng-template>
-      </select>
-      <select *ngIf="boundControl && options?.multiple"
-        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
-        [attr.readonly]="options?.readonly ? 'readonly' : null"
-        [attr.required]="options?.required"
-        [class]="options?.fieldHtmlClass || ''"
-        [disabled]="controlDisabled"
-        [id]="'control' + layoutNode()?._id"
-        [multiple]="options?.multiple"
-        [name]="controlName"
-        [(ngModel)]="controlValue"
-        (change)="updateValue($event)">
-        <ng-template ngFor let-selectItem [ngForOf]="selectList">
-          <option *ngIf="!isArray(selectItem?.items)"
-            [selected]="selectItem?.value === controlValue"
-            [ngValue]="selectItem?.value">
-            <span [innerHTML]="selectItem?.name"></span>
-          </option>
-          <optgroup *ngIf="isArray(selectItem?.items)"
-            [label]="selectItem?.group">
-            <option *ngFor="let subItem of selectItem.items"
-              [attr.selected]="subItem?.value === controlValue"
-              [ngValue]="subItem?.value">
-              <span [innerHTML]="subItem?.name"></span>
-            </option>
-          </optgroup>
-        </ng-template>
-      </select>
-    </div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", 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 || ''">
+      @if (options?.title) {
+        <label
+          [attr.for]="'control' + layoutNode()?._id"
+          [class]="options?.labelHtmlClass || ''"
+          [style.display]="options?.notitle ? 'none' : ''"
+        [innerHTML]="options?.title"></label>
+      }
+      @if (boundControl && !options?.multiple) {
+        <select
+          [formControl]="formControl"
+          [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+          [attr.readonly]="options?.readonly ? 'readonly' : null"
+          [attr.required]="options?.required"
+          [class]="options?.fieldHtmlClass || ''"
+          [id]="'control' + layoutNode()?._id"
+          [name]="controlName">
+          @for (selectItem of selectList; track selectItem) {
+            @if (!isArray(selectItem?.items)) {
+              <option
+                [ngValue]="selectItem?.value">
+                <span [innerHTML]="selectItem?.name"></span>
+              </option>
+            }
+            @if (isArray(selectItem?.items)) {
+              <optgroup
+                [label]="selectItem?.group">
+                @for (subItem of selectItem.items; track subItem) {
+                  <option
+                    [ngValue]="subItem?.value">
+                    <span [innerHTML]="subItem?.name"></span>
+                  </option>
+                }
+              </optgroup>
+            }
+          }
+        </select>
+      }
+      @if (!boundControl) {
+        <select
+          [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+          [attr.readonly]="options?.readonly ? 'readonly' : null"
+          [attr.required]="options?.required"
+          [class]="options?.fieldHtmlClass || ''"
+          [disabled]="controlDisabled"
+          [id]="'control' + layoutNode()?._id"
+          [name]="controlName"
+          (change)="updateValue($event)">
+          @for (selectItem of selectList; track selectItem) {
+            @if (!isArray(selectItem?.items)) {
+              <option
+                [selected]="selectItem?.value === controlValue"
+                [ngValue]="selectItem?.value">
+                <span [innerHTML]="selectItem?.name"></span>
+              </option>
+            }
+            @if (isArray(selectItem?.items)) {
+              <optgroup
+                [label]="selectItem?.group">
+                @for (subItem of selectItem.items; track subItem) {
+                  <option
+                    [attr.selected]="subItem?.value === controlValue"
+                    [ngValue]="subItem?.value">
+                    <span [innerHTML]="subItem?.name"></span>
+                  </option>
+                }
+              </optgroup>
+            }
+          }
+        </select>
+      }
+      @if (boundControl && options?.multiple) {
+        <select
+          [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+          [attr.readonly]="options?.readonly ? 'readonly' : null"
+          [attr.required]="options?.required"
+          [class]="options?.fieldHtmlClass || ''"
+          [disabled]="controlDisabled"
+          [id]="'control' + layoutNode()?._id"
+          [multiple]="options?.multiple"
+          [name]="controlName"
+          [(ngModel)]="controlValue"
+          (change)="updateValue($event)">
+          @for (selectItem of selectList; track selectItem) {
+            @if (!isArray(selectItem?.items)) {
+              <option
+                [selected]="selectItem?.value === controlValue"
+                [ngValue]="selectItem?.value">
+                <span [innerHTML]="selectItem?.name"></span>
+              </option>
+            }
+            @if (isArray(selectItem?.items)) {
+              <optgroup
+                [label]="selectItem?.group">
+                @for (subItem of selectItem.items; track subItem) {
+                  <option
+                    [attr.selected]="subItem?.value === controlValue"
+                    [ngValue]="subItem?.value">
+                    <span [innerHTML]="subItem?.name"></span>
+                  </option>
+                }
+              </optgroup>
+            }
+          }
+        </select>
+      }
+    </div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
                     selector: 'select-widget',
-                    template: `
-    <div
-      [class]="options?.htmlClass || ''">
-      <label *ngIf="options?.title"
-        [attr.for]="'control' + layoutNode()?._id"
-        [class]="options?.labelHtmlClass || ''"
-        [style.display]="options?.notitle ? 'none' : ''"
-        [innerHTML]="options?.title"></label>
-      <select *ngIf="boundControl && !options?.multiple"
-        [formControl]="formControl"
-        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
-        [attr.readonly]="options?.readonly ? 'readonly' : null"
-        [attr.required]="options?.required"
-        [class]="options?.fieldHtmlClass || ''"
-        [id]="'control' + layoutNode()?._id"
-        [name]="controlName">
-        <ng-template ngFor let-selectItem [ngForOf]="selectList">
-          <option *ngIf="!isArray(selectItem?.items)"
-            [ngValue]="selectItem?.value">
-            <span [innerHTML]="selectItem?.name"></span>
-          </option>
-          <optgroup *ngIf="isArray(selectItem?.items)"
-            [label]="selectItem?.group">
-            <option *ngFor="let subItem of selectItem.items"
-              [ngValue]="subItem?.value">
-              <span [innerHTML]="subItem?.name"></span>
-            </option>
-          </optgroup>
-        </ng-template>
-      </select>
-      <select *ngIf="!boundControl"
-        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
-        [attr.readonly]="options?.readonly ? 'readonly' : null"
-        [attr.required]="options?.required"
-        [class]="options?.fieldHtmlClass || ''"
-        [disabled]="controlDisabled"
-        [id]="'control' + layoutNode()?._id"
-        [name]="controlName"
-        (change)="updateValue($event)">
-        <ng-template ngFor let-selectItem [ngForOf]="selectList">
-          <option *ngIf="!isArray(selectItem?.items)"
-            [selected]="selectItem?.value === controlValue"
-            [ngValue]="selectItem?.value">
-            <span [innerHTML]="selectItem?.name"></span>
-          </option>
-          <optgroup *ngIf="isArray(selectItem?.items)"
-            [label]="selectItem?.group">
-            <option *ngFor="let subItem of selectItem.items"
-              [attr.selected]="subItem?.value === controlValue"
-              [ngValue]="subItem?.value">
-              <span [innerHTML]="subItem?.name"></span>
-            </option>
-          </optgroup>
-        </ng-template>
-      </select>
-      <select *ngIf="boundControl && options?.multiple"
-        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
-        [attr.readonly]="options?.readonly ? 'readonly' : null"
-        [attr.required]="options?.required"
-        [class]="options?.fieldHtmlClass || ''"
-        [disabled]="controlDisabled"
-        [id]="'control' + layoutNode()?._id"
-        [multiple]="options?.multiple"
-        [name]="controlName"
-        [(ngModel)]="controlValue"
-        (change)="updateValue($event)">
-        <ng-template ngFor let-selectItem [ngForOf]="selectList">
-          <option *ngIf="!isArray(selectItem?.items)"
-            [selected]="selectItem?.value === controlValue"
-            [ngValue]="selectItem?.value">
-            <span [innerHTML]="selectItem?.name"></span>
-          </option>
-          <optgroup *ngIf="isArray(selectItem?.items)"
-            [label]="selectItem?.group">
-            <option *ngFor="let subItem of selectItem.items"
-              [attr.selected]="subItem?.value === controlValue"
-              [ngValue]="subItem?.value">
-              <span [innerHTML]="subItem?.name"></span>
-            </option>
-          </optgroup>
-        </ng-template>
-      </select>
+                    template: `
+    <div
+      [class]="options?.htmlClass || ''">
+      @if (options?.title) {
+        <label
+          [attr.for]="'control' + layoutNode()?._id"
+          [class]="options?.labelHtmlClass || ''"
+          [style.display]="options?.notitle ? 'none' : ''"
+        [innerHTML]="options?.title"></label>
+      }
+      @if (boundControl && !options?.multiple) {
+        <select
+          [formControl]="formControl"
+          [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+          [attr.readonly]="options?.readonly ? 'readonly' : null"
+          [attr.required]="options?.required"
+          [class]="options?.fieldHtmlClass || ''"
+          [id]="'control' + layoutNode()?._id"
+          [name]="controlName">
+          @for (selectItem of selectList; track selectItem) {
+            @if (!isArray(selectItem?.items)) {
+              <option
+                [ngValue]="selectItem?.value">
+                <span [innerHTML]="selectItem?.name"></span>
+              </option>
+            }
+            @if (isArray(selectItem?.items)) {
+              <optgroup
+                [label]="selectItem?.group">
+                @for (subItem of selectItem.items; track subItem) {
+                  <option
+                    [ngValue]="subItem?.value">
+                    <span [innerHTML]="subItem?.name"></span>
+                  </option>
+                }
+              </optgroup>
+            }
+          }
+        </select>
+      }
+      @if (!boundControl) {
+        <select
+          [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+          [attr.readonly]="options?.readonly ? 'readonly' : null"
+          [attr.required]="options?.required"
+          [class]="options?.fieldHtmlClass || ''"
+          [disabled]="controlDisabled"
+          [id]="'control' + layoutNode()?._id"
+          [name]="controlName"
+          (change)="updateValue($event)">
+          @for (selectItem of selectList; track selectItem) {
+            @if (!isArray(selectItem?.items)) {
+              <option
+                [selected]="selectItem?.value === controlValue"
+                [ngValue]="selectItem?.value">
+                <span [innerHTML]="selectItem?.name"></span>
+              </option>
+            }
+            @if (isArray(selectItem?.items)) {
+              <optgroup
+                [label]="selectItem?.group">
+                @for (subItem of selectItem.items; track subItem) {
+                  <option
+                    [attr.selected]="subItem?.value === controlValue"
+                    [ngValue]="subItem?.value">
+                    <span [innerHTML]="subItem?.name"></span>
+                  </option>
+                }
+              </optgroup>
+            }
+          }
+        </select>
+      }
+      @if (boundControl && options?.multiple) {
+        <select
+          [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+          [attr.readonly]="options?.readonly ? 'readonly' : null"
+          [attr.required]="options?.required"
+          [class]="options?.fieldHtmlClass || ''"
+          [disabled]="controlDisabled"
+          [id]="'control' + layoutNode()?._id"
+          [multiple]="options?.multiple"
+          [name]="controlName"
+          [(ngModel)]="controlValue"
+          (change)="updateValue($event)">
+          @for (selectItem of selectList; track selectItem) {
+            @if (!isArray(selectItem?.items)) {
+              <option
+                [selected]="selectItem?.value === controlValue"
+                [ngValue]="selectItem?.value">
+                <span [innerHTML]="selectItem?.name"></span>
+              </option>
+            }
+            @if (isArray(selectItem?.items)) {
+              <optgroup
+                [label]="selectItem?.group">
+                @for (subItem of selectItem.items; track subItem) {
+                  <option
+                    [attr.selected]="subItem?.value === controlValue"
+                    [ngValue]="subItem?.value">
+                    <span [innerHTML]="subItem?.name"></span>
+                  </option>
+                }
+              </optgroup>
+            }
+          }
+        </select>
+      }
     </div>`,
                     standalone: false
                 }]
-        }] });
+        }], propDecorators: { layoutNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutNode", required: false }] }], layoutIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutIndex", required: false }] }], dataIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataIndex", required: false }] }] } });
 
 class SubmitComponent {
     constructor() {
         this.jsf = inject(JsonSchemaFormService);
         this.controlDisabled = false;
         this.boundControl = false;
-        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
-        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
-        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
+        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();
@@ -10032,8 +10407,8 @@ class SubmitComponent {
             this.jsf.updateValue(this, event.target.value);
         }
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: SubmitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.2", 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
@@ -10051,7 +10426,7 @@ class SubmitComponent {
         >
     </div>`, isInline: true, dependencies: [{ kind: "directive", type: StopPropagationDirective, selector: "[appStopPropagation]", inputs: ["appStopPropagation"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SubmitComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: SubmitComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -10075,16 +10450,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
     </div>`,
                     standalone: false
                 }]
-        }] });
+        }], propDecorators: { layoutNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutNode", required: false }] }], layoutIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutIndex", required: false }] }], dataIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataIndex", required: false }] }] } });
 
 class TemplateComponent {
     constructor() {
         this.jsf = inject(JsonSchemaFormService);
         this.newComponent = null;
-        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 }]));
+        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 });
     }
     ngOnInit() {
         this.updateComponent();
@@ -10104,10 +10479,10 @@ class TemplateComponent {
             }
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.2", 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: "20.1.6", ngImport: i0, type: TemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TemplateComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -10115,16 +10490,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     template: `<div #widgetContainer></div>`,
                     standalone: false
                 }]
-        }] });
+        }], propDecorators: { layoutNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutNode", required: false }] }], layoutIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutIndex", required: false }] }], dataIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataIndex", required: false }] }], widgetContainer: [{ type: i0.ViewChild, args: ['widgetContainer', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 
 class TextareaComponent {
     constructor() {
         this.jsf = inject(JsonSchemaFormService);
         this.controlDisabled = false;
         this.boundControl = false;
-        this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
-        this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
-        this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
+        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 || {};
@@ -10134,88 +10509,103 @@ class TextareaComponent {
         this.jsf.updateValue(this, event.target.value);
     }
     ngOnDestroy() {
-        this.jsf.updateValue(this, null);
+        //see cpmments in input component
+        setTimeout(() => {
+            this.jsf.updateValue(this, null);
+        });
     }
-    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"
-        [attr.for]="'control' + layoutNode()?._id"
-        [class]="options?.labelHtmlClass || ''"
-        [style.display]="options?.notitle ? 'none' : ''"
-        [innerHTML]="options?.title"></label>
-      <textarea *ngIf="boundControl"
-        [formControl]="formControl"
-        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
-        [attr.maxlength]="options?.maxLength"
-        [attr.minlength]="options?.minLength"
-        [attr.pattern]="options?.pattern"
-        [attr.placeholder]="options?.placeholder"
-        [attr.readonly]="options?.readonly ? 'readonly' : null"
-        [attr.required]="options?.required"
-        [class]="options?.fieldHtmlClass || ''"
-        [id]="'control' + layoutNode()?._id"
-        [name]="controlName"></textarea>
-      <textarea *ngIf="!boundControl"
-        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
-        [attr.maxlength]="options?.maxLength"
-        [attr.minlength]="options?.minLength"
-        [attr.pattern]="options?.pattern"
-        [attr.placeholder]="options?.placeholder"
-        [attr.readonly]="options?.readonly ? 'readonly' : null"
-        [attr.required]="options?.required"
-        [class]="options?.fieldHtmlClass || ''"
-        [disabled]="controlDisabled"
-        [id]="'control' + layoutNode()?._id"
-        [name]="controlName"
-        [value]="controlValue"
-        (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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", 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 || ''">
+      @if (options?.title) {
+        <label
+          [attr.for]="'control' + layoutNode()?._id"
+          [class]="options?.labelHtmlClass || ''"
+          [style.display]="options?.notitle ? 'none' : ''"
+        [innerHTML]="options?.title"></label>
+      }
+      @if (boundControl) {
+        <textarea
+          [formControl]="formControl"
+          [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+          [attr.maxlength]="options?.maxLength"
+          [attr.minlength]="options?.minLength"
+          [attr.pattern]="options?.pattern"
+          [attr.placeholder]="options?.placeholder"
+          [attr.readonly]="options?.readonly ? 'readonly' : null"
+          [attr.required]="options?.required"
+          [class]="options?.fieldHtmlClass || ''"
+          [id]="'control' + layoutNode()?._id"
+        [name]="controlName"></textarea>
+      }
+      @if (!boundControl) {
+        <textarea
+          [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+          [attr.maxlength]="options?.maxLength"
+          [attr.minlength]="options?.minLength"
+          [attr.pattern]="options?.pattern"
+          [attr.placeholder]="options?.placeholder"
+          [attr.readonly]="options?.readonly ? 'readonly' : null"
+          [attr.required]="options?.required"
+          [class]="options?.fieldHtmlClass || ''"
+          [disabled]="controlDisabled"
+          [id]="'control' + layoutNode()?._id"
+          [name]="controlName"
+          [value]="controlValue"
+        (input)="updateValue($event)">{{controlValue}}</textarea>
+      }
+    </div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
                     selector: 'textarea-widget',
-                    template: `
-    <div
-      [class]="options?.htmlClass || ''">
-      <label *ngIf="options?.title"
-        [attr.for]="'control' + layoutNode()?._id"
-        [class]="options?.labelHtmlClass || ''"
-        [style.display]="options?.notitle ? 'none' : ''"
-        [innerHTML]="options?.title"></label>
-      <textarea *ngIf="boundControl"
-        [formControl]="formControl"
-        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
-        [attr.maxlength]="options?.maxLength"
-        [attr.minlength]="options?.minLength"
-        [attr.pattern]="options?.pattern"
-        [attr.placeholder]="options?.placeholder"
-        [attr.readonly]="options?.readonly ? 'readonly' : null"
-        [attr.required]="options?.required"
-        [class]="options?.fieldHtmlClass || ''"
-        [id]="'control' + layoutNode()?._id"
-        [name]="controlName"></textarea>
-      <textarea *ngIf="!boundControl"
-        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
-        [attr.maxlength]="options?.maxLength"
-        [attr.minlength]="options?.minLength"
-        [attr.pattern]="options?.pattern"
-        [attr.placeholder]="options?.placeholder"
-        [attr.readonly]="options?.readonly ? 'readonly' : null"
-        [attr.required]="options?.required"
-        [class]="options?.fieldHtmlClass || ''"
-        [disabled]="controlDisabled"
-        [id]="'control' + layoutNode()?._id"
-        [name]="controlName"
-        [value]="controlValue"
-        (input)="updateValue($event)">{{controlValue}}</textarea>
+                    template: `
+    <div
+      [class]="options?.htmlClass || ''">
+      @if (options?.title) {
+        <label
+          [attr.for]="'control' + layoutNode()?._id"
+          [class]="options?.labelHtmlClass || ''"
+          [style.display]="options?.notitle ? 'none' : ''"
+        [innerHTML]="options?.title"></label>
+      }
+      @if (boundControl) {
+        <textarea
+          [formControl]="formControl"
+          [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+          [attr.maxlength]="options?.maxLength"
+          [attr.minlength]="options?.minLength"
+          [attr.pattern]="options?.pattern"
+          [attr.placeholder]="options?.placeholder"
+          [attr.readonly]="options?.readonly ? 'readonly' : null"
+          [attr.required]="options?.required"
+          [class]="options?.fieldHtmlClass || ''"
+          [id]="'control' + layoutNode()?._id"
+        [name]="controlName"></textarea>
+      }
+      @if (!boundControl) {
+        <textarea
+          [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+          [attr.maxlength]="options?.maxLength"
+          [attr.minlength]="options?.minLength"
+          [attr.pattern]="options?.pattern"
+          [attr.placeholder]="options?.placeholder"
+          [attr.readonly]="options?.readonly ? 'readonly' : null"
+          [attr.required]="options?.required"
+          [class]="options?.fieldHtmlClass || ''"
+          [disabled]="controlDisabled"
+          [id]="'control' + layoutNode()?._id"
+          [name]="controlName"
+          [value]="controlValue"
+        (input)="updateValue($event)">{{controlValue}}</textarea>
+      }
     </div>`,
                     standalone: false
                 }]
-        }] });
+        }], propDecorators: { layoutNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutNode", required: false }] }], layoutIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutIndex", required: false }] }], dataIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataIndex", required: false }] }] } });
 
 class WidgetLibraryService {
     constructor() {
@@ -10414,10 +10804,10 @@ class WidgetLibraryService {
             activeWidgets: this.activeWidgets,
         };
     }
-    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' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: WidgetLibraryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: WidgetLibraryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: WidgetLibraryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: WidgetLibraryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -10576,10 +10966,10 @@ class FrameworkLibraryService {
             return actFramework.unregisterTheme(name);
         }
     }
-    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' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: FrameworkLibraryService, deps: [{ token: Framework }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: FrameworkLibraryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: FrameworkLibraryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: FrameworkLibraryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -10600,9 +10990,9 @@ class SelectCheckboxComponent {
         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.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: "" },
@@ -10655,128 +11045,144 @@ class SelectCheckboxComponent {
         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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: SelectCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", 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 || ''">
+      @if (boundControl) {
+        <select
+          [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"
+          >
+          @for (selectItem of selectList; track selectItem) {
+            @if (!isArray(selectItem?.items)) {
+              <option
+                [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>
+          }
+        </select>
+      }
+      @if (!boundControl) {
+        <select
+          [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)">
+          @for (selectItem of selectList; track selectItem) {
+            @if (!isArray(selectItem?.items)) {
+              <option
+                [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>
+          }
+        </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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", 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>
-      
+            args: [{ selector: 'selectcheckbox-widget', template: `
+    <div
+      [class]="options?.htmlClass || ''">
+      @if (boundControl) {
+        <select
+          [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"
+          >
+          @for (selectItem of selectList; track selectItem) {
+            @if (!isArray(selectItem?.items)) {
+              <option
+                [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>
+          }
+        </select>
+      }
+      @if (!boundControl) {
+        <select
+          [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)">
+          @for (selectItem of selectList; track selectItem) {
+            @if (!isArray(selectItem?.items)) {
+              <option
+                [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>
+          }
+        </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"] }]
-        }] });
+        }], propDecorators: { layoutNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutNode", required: false }] }], layoutIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutIndex", required: false }] }], dataIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataIndex", required: false }] }] } });
 
 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" }] : []));
+        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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.2", 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()"
@@ -10784,7 +11190,7 @@ class TabComponent {
         [layout]="layoutNode().items"></root-widget>
     </div>`, isInline: true, dependencies: [{ kind: "component", type: RootComponent, selector: "root-widget", inputs: ["dataIndex", "layoutIndex", "layout", "isOrderable", "isFlexItem", "memoizationEnabled"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -10798,7 +11204,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
     </div>`,
                     standalone: false
                 }]
-        }] });
+        }], propDecorators: { layoutNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutNode", required: false }] }], layoutIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutIndex", required: false }] }], dataIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataIndex", required: false }] }] } });
 
 /**
  * OrderableDirective
@@ -10828,10 +11234,10 @@ class OrderableDirective {
         this.ngZone = inject(NgZone);
         this.overParentElement = false;
         this.overChildElement = false;
-        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" }] : []));
+        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();
@@ -10915,17 +11321,17 @@ class OrderableDirective {
             this.draggableStateSubscription.unsubscribe();
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: OrderableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.2", 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: "20.1.6", ngImport: i0, type: OrderableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: OrderableDirective, decorators: [{
             type: Directive,
             args: [{
                     // tslint:disable-next-line:directive-selector
                     selector: '[orderable]',
                     standalone: false
                 }]
-        }] });
+        }], propDecorators: { orderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "orderable", required: false }] }], layoutNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutNode", required: false }] }], layoutIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutIndex", required: false }] }], dataIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataIndex", required: false }] }] } });
 
 const BASIC_WIDGETS = [
     AddReferenceComponent, OneOfComponent, ButtonComponent, CheckboxComponent,
@@ -10933,15 +11339,15 @@ const BASIC_WIDGETS = [
     MessageComponent, NoneComponent, NumberComponent, RadiosComponent,
     RootComponent, SectionComponent, SelectComponent, SelectFrameworkComponent,
     SelectWidgetComponent, SubmitComponent, TabComponent, TabsComponent,
-    TemplateComponent, TextareaComponent, SelectCheckboxComponent
+    TemplateComponent, TextareaComponent, SelectCheckboxComponent, ItemTitleComponent
 ];
 
 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, StopPropagationDirective], imports: [CommonModule, FormsModule, ReactiveFormsModule, DragDropModule], 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, StopPropagationDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: WidgetLibraryModule, imports: [CommonModule, FormsModule, ReactiveFormsModule, DragDropModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: WidgetLibraryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", 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, ItemTitleComponent, OrderableDirective, ElementAttributeDirective, StopPropagationDirective], imports: [CommonModule, FormsModule, ReactiveFormsModule, DragDropModule], exports: [AddReferenceComponent, OneOfComponent, ButtonComponent, CheckboxComponent, CheckboxesComponent, FileComponent, HiddenComponent, InputComponent, MessageComponent, NoneComponent, NumberComponent, RadiosComponent, RootComponent, SectionComponent, SelectComponent, SelectFrameworkComponent, SelectWidgetComponent, SubmitComponent, TabComponent, TabsComponent, TemplateComponent, TextareaComponent, SelectCheckboxComponent, ItemTitleComponent, OrderableDirective, ElementAttributeDirective, StopPropagationDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: WidgetLibraryModule, imports: [CommonModule, FormsModule, ReactiveFormsModule, DragDropModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: WidgetLibraryModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: WidgetLibraryModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, FormsModule, ReactiveFormsModule, DragDropModule
@@ -10953,13 +11359,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
 
 // 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NoFrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: NoFrameworkModule, declarations: [NoFrameworkComponent], imports: [CommonModule, WidgetLibraryModule], exports: [NoFrameworkComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NoFrameworkModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, WidgetLibraryModule],
@@ -11027,27 +11433,27 @@ class JsonSchemaFormComponent {
             formData: null, loadExternalAssets: null, debug: null, ajvOptions: null
         };
         // Recommended inputs
-        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
+        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, ...(ngDevMode ? [{ debugName: "form" }] : [])); // 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, ...(ngDevMode ? [{ debugName: "model" }] : [])); // 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, ...(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
+        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, ...(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
+        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
@@ -11186,11 +11592,26 @@ class JsonSchemaFormComponent {
                 if (this.formValuesInput.indexOf('.') === -1) {
                     changedData = this.getInputValue(this.formValuesInput);
                     //this[this.formValuesInput];
-                    this.setFormValues(changedData, resetFirst);
                 }
                 else {
                     const [input, key] = this.formValuesInput.split('.');
                     changedData = this.getInputValue(input)[key];
+                }
+                //TODO -review if any of the the array sizes changed then the 
+                //layout array sizes need to be resynced to match
+                //-for now jsf.adjustLayout doesnt seem to work with nested arrays
+                //so entire form is reinited 
+                let arraySizesChanged = !compareObjectArraySizes(changedData, this.jsf.data);
+                if (arraySizesChanged) {
+                    this.initializeForm(changedData);
+                    if (this.onChange) {
+                        this.onChange(changedData);
+                    }
+                    if (this.onTouched) {
+                        this.onTouched(changedData);
+                    }
+                }
+                else {
                     this.setFormValues(changedData, resetFirst);
                 }
                 // If anything else has changed, re-render the entire form
@@ -11215,7 +11636,7 @@ class JsonSchemaFormComponent {
                 .forEach(input => this.previousInputs[input] = this.getInputValue(input));
         }
     }
-    setFormValues(formValues, resetFirst = true) {
+    setFormValues(formValues, resetFirst = true, emitFormEvent = true, usePatch = true) {
         if (formValues) {
             const newFormValues = this.objectWrap ? formValues['1'] : formValues;
             if (!this.jsf.formGroup) {
@@ -11223,10 +11644,15 @@ class JsonSchemaFormComponent {
                 this.activateForm();
             }
             else if (resetFirst) { //changed to avoid reset events
-                this.jsf.formGroup.reset({}, { emitEvent: false });
+                this.jsf.formGroup.reset({}, { emitEvent: emitFormEvent });
             }
             if (this.jsf.formGroup) { //changed to avoid reset events
-                this.jsf.formGroup.patchValue(newFormValues, { emitEvent: false });
+                if (usePatch) {
+                    this.jsf.formGroup.patchValue(newFormValues, { emitEvent: emitFormEvent });
+                }
+                else {
+                    this.jsf.formGroup.setValue(newFormValues, { emitEvent: emitFormEvent });
+                }
             }
             if (this.onChange) {
                 this.onChange(newFormValues);
@@ -11238,6 +11664,7 @@ class JsonSchemaFormComponent {
         else {
             this.jsf.formGroup.reset();
         }
+        this.changeDetector.markForCheck();
     }
     submitForm() {
         const validData = this.jsf.validData;
@@ -11721,24 +12148,24 @@ class JsonSchemaFormComponent {
             }
         }
     }
-    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", "memoizationEnabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: JsonSchemaFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", 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()\">\n  <root-widget [layout]=\"jsf?.layout\"></root-widget>\n</form>\n@if (debug() || jsf?.formOptions?.debug) {\n  <div>\n    Debug output:\n    <pre>{{debugOutput}}</pre>\n  </div>\n}", dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: RootComponent, selector: "root-widget", inputs: ["dataIndex", "layoutIndex", "layout", "isOrderable", "isFlexItem", "memoizationEnabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: JsonSchemaFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", 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: [{
+            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()\">\n  <root-widget [layout]=\"jsf?.layout\"></root-widget>\n</form>\n@if (debug() || jsf?.formOptions?.debug) {\n  <div>\n    Debug output:\n    <pre>{{debugOutput}}</pre>\n  </div>\n}" }]
+        }], propDecorators: { schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], framework: [{ type: i0.Input, args: [{ isSignal: true, alias: "framework", required: false }] }], widgets: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgets", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], JSONSchema: [{ type: i0.Input, args: [{ isSignal: true, alias: "JSONSchema", required: false }] }], UISchema: [{ type: i0.Input, args: [{ isSignal: true, alias: "UISchema", required: false }] }], formData: [{ type: i0.Input, args: [{ isSignal: true, alias: "formData", required: false }] }], ngModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngModel", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], loadExternalAssets: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadExternalAssets", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], ajvOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "ajvOptions", required: false }] }], value: [{
                 type: Input
-            }] } });
+            }], onChanges: [{ type: i0.Output, args: ["onChanges"] }], onSubmit: [{ type: i0.Output, args: ["onSubmit"] }], isValid: [{ type: i0.Output, args: ["isValid"] }], validationErrors: [{ type: i0.Output, args: ["validationErrors"] }], formSchema: [{ type: i0.Output, args: ["formSchema"] }], formLayout: [{ type: i0.Output, args: ["formLayout"] }], dataChange: [{ type: i0.Output, args: ["dataChange"] }], modelChange: [{ type: i0.Output, args: ["modelChange"] }], formDataChange: [{ type: i0.Output, args: ["formDataChange"] }], ngModelChange: [{ type: i0.Output, args: ["ngModelChange"] }] } });
 
 class JsonSchemaFormModule {
-    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,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: JsonSchemaFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", 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: "20.1.6", ngImport: i0, type: JsonSchemaFormModule, imports: [CommonModule, FormsModule, ReactiveFormsModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: JsonSchemaFormModule, imports: [CommonModule, FormsModule, ReactiveFormsModule,
             WidgetLibraryModule, NoFrameworkModule, WidgetLibraryModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: JsonSchemaFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: JsonSchemaFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -11758,5 +12185,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AddReferenceComponent, BASIC_WIDGETS, ButtonComponent, CheckboxComponent, CheckboxesComponent, ElementAttributeDirective, FileComponent, Framework, FrameworkLibraryService, HiddenComponent, InputComponent, JsonPointer, JsonSchemaFormComponent, JsonSchemaFormModule, JsonSchemaFormService, JsonValidators, MessageComponent, NoneComponent, NumberComponent, OneOfComponent, OrderableDirective, RadiosComponent, RootComponent, SectionComponent, SelectCheckboxComponent, SelectComponent, SelectFrameworkComponent, SelectWidgetComponent, StopPropagationDirective, 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, ItemTitleComponent, JsonPointer, JsonSchemaFormComponent, JsonSchemaFormModule, JsonSchemaFormService, JsonValidators, MessageComponent, NoneComponent, NumberComponent, OneOfComponent, OrderableDirective, RadiosComponent, RootComponent, SectionComponent, SelectCheckboxComponent, SelectComponent, SelectFrameworkComponent, SelectWidgetComponent, StopPropagationDirective, 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