@ng-formworks/core 20.6.9 → 21.6.9

package/fesm2022/ng-formworks-core.mjs

@@ -1,8 +1,7 @@
-import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Injectable, inject, input, viewChild, ViewContainerRef, Component, Input, Directive, ChangeDetectionStrategy, ViewChild, 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';
@@ -19,7 +18,7 @@ import filter from 'lodash/filter';
 import map$1 from 'lodash/map';
 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.3.13", ngImport: i0, type: Framework, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", 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.3.13", ngImport: i0, type: Framework, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: Framework, decorators: [{
             type: Injectable
         }] });
 
@@ -2516,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.3.13", ngImport: i0, type: JsonPointer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", 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.3.13", ngImport: i0, type: JsonPointer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: JsonPointer, decorators: [{
             type: Injectable
         }] });
 
@@ -8009,10 +8008,10 @@ class JsonSchemaFormService {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: JsonSchemaFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: JsonSchemaFormService }); }
+    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.3.13", ngImport: i0, type: JsonSchemaFormService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: JsonSchemaFormService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -8020,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();
@@ -8043,10 +8042,10 @@ class SelectWidgetComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SelectWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.13", 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.3.13", 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
@@ -8058,14 +8057,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
 
 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.3.13", ngImport: i0, type: NoFrameworkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", 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.3.13", 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 }] }] } });
@@ -8078,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.3.13", ngImport: i0, type: NoFramework, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", 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.3.13", ngImport: i0, type: NoFramework, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NoFramework, decorators: [{
             type: Injectable
         }] });
 
@@ -8103,10 +8102,10 @@ class ElementAttributeDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", 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.3.13", 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.3.13", 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]',
@@ -8143,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.3.13", 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.3.13", 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.3.13", 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
@@ -8159,9 +8158,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
 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 || {};
@@ -8183,38 +8182,48 @@ class AddReferenceComponent {
         return parent.layoutNode && (parent.layoutNode.add ||
             this.jsf.setArrayItemTitle(parent, this.layoutNode(), this.itemCount));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AddReferenceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", 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 }); }
+    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.3.13", 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
@@ -8226,9 +8235,9 @@ class ButtonComponent {
         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 || {};
@@ -8245,50 +8254,54 @@ class ButtonComponent {
     ngOnDestroy() {
         this.jsf.updateValue(this, null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", 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.3.13", 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
                 }]
@@ -8306,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 || {};
@@ -8328,74 +8341,86 @@ class CheckboxComponent {
     ngOnDestroy() {
         this.jsf.updateValue(this, null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", 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.3.13", 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
                 }]
@@ -8407,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 || {};
@@ -8440,111 +8465,131 @@ class CheckboxesComponent {
         this.formControl.reset(nullVal);
         this.controlValue = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CheckboxesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", 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.3.13", 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 }] }] } });
@@ -8555,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 || {};
@@ -8569,10 +8614,10 @@ class FileComponent {
     ngOnDestroy() {
         this.jsf.updateValue(this, null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: FileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", 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.3.13", 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
@@ -8587,9 +8632,9 @@ class HiddenComponent {
         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);
@@ -8597,37 +8642,45 @@ class HiddenComponent {
     ngOnDestroy() {
         this.jsf.updateValue(this, null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: HiddenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", 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.3.13", 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 }] }] } });
@@ -8638,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() {
@@ -8661,109 +8714,129 @@ class InputComponent {
             this.jsf.updateValue(this, null);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", 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.3.13", 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 }] }] } });
@@ -8789,10 +8862,10 @@ class ItemTitleComponent {
     ngOnDestroy() {
         this.dataChangesSubs?.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ItemTitleComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: ItemTitleComponent, isStandalone: false, selector: "item-title", inputs: { item: "item", index: "index", ctx: "ctx" }, usesOnChanges: true, ngImport: i0, template: `<div>{{ title }}</div>`, isInline: true }); }
+    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: "20.3.13", ngImport: i0, type: ItemTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ItemTitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'item-title',
@@ -8812,44 +8885,48 @@ 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.3.13", ngImport: i0, type: MessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", 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.3.13", 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.3.13", ngImport: i0, type: NoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", 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.3.13", 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
@@ -8869,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() {
@@ -8893,106 +8970,122 @@ class NumberComponent {
             this.jsf.updateValue(this, null);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", 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.3.13", 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
                 }]
@@ -9009,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();
@@ -9036,10 +9129,10 @@ class SelectFrameworkComponent {
             //this.changeDetectorRef.detectChanges();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SelectFrameworkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.13", 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.3.13", 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
@@ -9055,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 || {};
@@ -9100,114 +9193,132 @@ class TabsComponent {
     ngOnDestroy() {
         this.dataChangesSubs?.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", 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.3.13", 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
@@ -9216,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 || {};
@@ -9299,14 +9410,14 @@ class OneOfComponent {
     ngOnDestroy() {
         //this.jsf.updateValue(this, null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: OneOfComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", 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.3.13", 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
@@ -9327,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 || {};
@@ -9347,125 +9458,145 @@ class RadiosComponent {
     ngOnDestroy() {
         this.jsf.updateValue(this, null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: RadiosComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", 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.3.13", 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 }] }] } });
@@ -9474,12 +9605,12 @@ 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
@@ -9622,113 +9753,119 @@ class RootComponent {
         this._getSelectFrameworkInputsMemoized.cache.clear();
         this.dataChangesSubs?.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: RootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", 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;"
-         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.3.13", 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;"
-         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 }] }] } });
 
@@ -9736,9 +9873,9 @@ 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);
@@ -9793,134 +9930,166 @@ class SectionComponent {
                 return this.options[attribute];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", 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.3.13", 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 {
@@ -9931,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 || {};
@@ -9973,178 +10142,230 @@ class SelectComponent {
         this.formControl.reset(nullVal);
         this.controlValue = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", 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.3.13", 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
                 }]
@@ -10155,9 +10376,9 @@ class SubmitComponent {
         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();
@@ -10186,8 +10407,8 @@ class SubmitComponent {
             this.jsf.updateValue(this, event.target.value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SubmitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", 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
@@ -10205,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.3.13", 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
@@ -10235,10 +10456,10 @@ 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();
@@ -10258,10 +10479,10 @@ class TemplateComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: TemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.13", 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.3.13", 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
@@ -10276,9 +10497,9 @@ class TextareaComponent {
         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 || {};
@@ -10293,82 +10514,94 @@ class TextareaComponent {
             this.jsf.updateValue(this, null);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", 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.3.13", 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
                 }]
@@ -10571,10 +10804,10 @@ class WidgetLibraryService {
             activeWidgets: this.activeWidgets,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: WidgetLibraryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", 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.3.13", 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',
@@ -10733,10 +10966,10 @@ class FrameworkLibraryService {
             return actFramework.unregisterTheme(name);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: FrameworkLibraryService, deps: [{ token: Framework }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", 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.3.13", 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',
@@ -10757,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: "" },
@@ -10812,128 +11045,144 @@ class SelectCheckboxComponent {
         this.formControl.reset(nullVal);
         this.controlValue = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SelectCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", 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.3.13", 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.3.13", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", 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()"
@@ -10941,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.3.13", 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
@@ -10985,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();
@@ -11072,10 +11321,10 @@ class OrderableDirective {
             this.draggableStateSubscription.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: OrderableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.13", 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.3.13", 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
@@ -11094,11 +11343,11 @@ const BASIC_WIDGETS = [
 ];
 
 class WidgetLibraryModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: WidgetLibraryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.13", 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: "20.3.13", 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.3.13", 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
@@ -11110,13 +11359,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
 
 // No framework - plain HTML controls (styles from form layout only)
 class NoFrameworkModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NoFrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.13", ngImport: i0, type: NoFrameworkModule, declarations: [NoFrameworkComponent], imports: [CommonModule, WidgetLibraryModule], exports: [NoFrameworkComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.13", 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.3.13", 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],
@@ -11184,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
@@ -11899,24 +12148,24 @@ class JsonSchemaFormComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: JsonSchemaFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", 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.3.13", 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>" }]
+            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.3.13", ngImport: i0, type: JsonSchemaFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.13", 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.3.13", 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.3.13", ngImport: i0, type: JsonSchemaFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: JsonSchemaFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [