@ajsf/material 21.0.0 → 22.0.0

package/fesm2022/ajsf-material.mjs

@@ -91,8 +91,8 @@ class FlexLayoutRootComponent {
     showWidget(layoutNode) {
         return this.jsf.evaluateCondition(layoutNode, this.dataIndex);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FlexLayoutRootComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: FlexLayoutRootComponent, isStandalone: false, selector: "flex-layout-root-widget", inputs: { dataIndex: "dataIndex", layoutIndex: "layoutIndex", layout: "layout", isFlexItem: "isFlexItem" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FlexLayoutRootComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: FlexLayoutRootComponent, isStandalone: false, selector: "flex-layout-root-widget", inputs: { dataIndex: "dataIndex", layoutIndex: "layoutIndex", layout: "layout", isFlexItem: "isFlexItem" }, ngImport: i0, template: `
     @for (layoutNode of layout; track layoutNode; let i = $index) {
       <div
         [class.form-flex-item]="isFlexItem"
@@ -112,7 +112,7 @@ class FlexLayoutRootComponent {
       </div>
     }`, isInline: true, dependencies: [{ kind: "component", type: i1.SelectFrameworkComponent, selector: "select-framework-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FlexLayoutRootComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FlexLayoutRootComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'flex-layout-root-widget',
@@ -135,7 +135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         }
       </div>
     }`,
-                    changeDetection: ChangeDetectionStrategy.Default,
+                    changeDetection: ChangeDetectionStrategy.Eager,
                     standalone: false
                 }]
         }], ctorParameters: () => [{ type: i1.JsonSchemaFormService }], propDecorators: { dataIndex: [{
@@ -233,8 +233,8 @@ class FlexLayoutSectionComponent {
                 return this.options[attribute];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FlexLayoutSectionComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: FlexLayoutSectionComponent, isStandalone: false, selector: "flex-layout-section-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FlexLayoutSectionComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: FlexLayoutSectionComponent, isStandalone: false, selector: "flex-layout-section-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
     @if (containerType === 'div') {
       <div
         [class]="options?.htmlClass || ''"
@@ -266,7 +266,7 @@ class FlexLayoutSectionComponent {
         }
         @if (options?.showErrors && options?.errorMessage) {
           <mat-error
-          [innerHTML]="options?.errorMessage"></mat-error>
+          [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
         }
       </div>
     }
@@ -276,7 +276,7 @@ class FlexLayoutSectionComponent {
         [class]="options?.htmlClass || ''"
         [class.expandable]="options?.expandable && !expanded"
         [class.expanded]="options?.expandable && expanded"
-        [disabled]="options?.readonly">
+        [disabled]="$safeNavigationMigration(options?.readonly)">
         @if (sectionTitle) {
           <legend
             [class]="'legend ' + (options?.labelHtmlClass || '')"
@@ -303,7 +303,7 @@ class FlexLayoutSectionComponent {
         }
         @if (options?.showErrors && options?.errorMessage) {
           <mat-error
-          [innerHTML]="options?.errorMessage"></mat-error>
+          [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
         }
       </fieldset>
     }
@@ -323,7 +323,7 @@ class FlexLayoutSectionComponent {
         }
         @if (expanded) {
           <mat-card-content>
-            <fieldset [disabled]="options?.readonly">
+            <fieldset [disabled]="$safeNavigationMigration(options?.readonly)">
               @if (expanded) {
                 <flex-layout-root-widget
                   [layout]="layoutNode.items"
@@ -348,7 +348,7 @@ class FlexLayoutSectionComponent {
         <mat-card-footer>
           @if (options?.showErrors && options?.errorMessage) {
             <mat-error
-            [innerHTML]="options?.errorMessage"></mat-error>
+            [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
           }
         </mat-card-footer>
       </mat-card>
@@ -368,7 +368,7 @@ class FlexLayoutSectionComponent {
             }
           </mat-panel-title>
         </mat-expansion-panel-header>
-        <fieldset [disabled]="options?.readonly">
+        <fieldset [disabled]="$safeNavigationMigration(options?.readonly)">
           @if (expanded) {
             <flex-layout-root-widget
               [layout]="layoutNode.items"
@@ -390,12 +390,12 @@ class FlexLayoutSectionComponent {
         </fieldset>
         @if (options?.showErrors && options?.errorMessage) {
           <mat-error
-          [innerHTML]="options?.errorMessage"></mat-error>
+          [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
         }
       </mat-expansion-panel>
-    }`, isInline: true, styles: ["fieldset{border:0;margin:0;padding:0}.legend{font-weight:700}.expandable>.legend:before{content:\"\\25b6\";padding-right:.3em}.expanded>.legend:before{content:\"\\25bc\";padding-right:.2em}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i3.MatCardFooter, selector: "mat-card-footer" }, { kind: "component", type: i3.MatCardHeader, selector: "mat-card-header" }, { kind: "component", type: i4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: FlexLayoutRootComponent, selector: "flex-layout-root-widget", inputs: ["dataIndex", "layoutIndex", "layout", "isFlexItem"] }] }); }
+    }`, isInline: true, styles: ["fieldset{border:0;margin:0;padding:0}.legend{font-weight:700}.expandable>.legend:before{content:\"\\25b6\";padding-right:.3em}.expanded>.legend:before{content:\"\\25bc\";padding-right:.2em}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i3.MatCardFooter, selector: "mat-card-footer" }, { kind: "component", type: i3.MatCardHeader, selector: "mat-card-header" }, { kind: "component", type: i4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: FlexLayoutRootComponent, selector: "flex-layout-root-widget", inputs: ["dataIndex", "layoutIndex", "layout", "isFlexItem"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FlexLayoutSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FlexLayoutSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'flex-layout-section-widget', template: `
     @if (containerType === 'div') {
@@ -429,7 +429,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         }
         @if (options?.showErrors && options?.errorMessage) {
           <mat-error
-          [innerHTML]="options?.errorMessage"></mat-error>
+          [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
         }
       </div>
     }
@@ -439,7 +439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         [class]="options?.htmlClass || ''"
         [class.expandable]="options?.expandable && !expanded"
         [class.expanded]="options?.expandable && expanded"
-        [disabled]="options?.readonly">
+        [disabled]="$safeNavigationMigration(options?.readonly)">
         @if (sectionTitle) {
           <legend
             [class]="'legend ' + (options?.labelHtmlClass || '')"
@@ -466,7 +466,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         }
         @if (options?.showErrors && options?.errorMessage) {
           <mat-error
-          [innerHTML]="options?.errorMessage"></mat-error>
+          [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
         }
       </fieldset>
     }
@@ -486,7 +486,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         }
         @if (expanded) {
           <mat-card-content>
-            <fieldset [disabled]="options?.readonly">
+            <fieldset [disabled]="$safeNavigationMigration(options?.readonly)">
               @if (expanded) {
                 <flex-layout-root-widget
                   [layout]="layoutNode.items"
@@ -511,7 +511,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         <mat-card-footer>
           @if (options?.showErrors && options?.errorMessage) {
             <mat-error
-            [innerHTML]="options?.errorMessage"></mat-error>
+            [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
           }
         </mat-card-footer>
       </mat-card>
@@ -531,7 +531,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
             }
           </mat-panel-title>
         </mat-expansion-panel-header>
-        <fieldset [disabled]="options?.readonly">
+        <fieldset [disabled]="$safeNavigationMigration(options?.readonly)">
           @if (expanded) {
             <flex-layout-root-widget
               [layout]="layoutNode.items"
@@ -553,10 +553,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         </fieldset>
         @if (options?.showErrors && options?.errorMessage) {
           <mat-error
-          [innerHTML]="options?.errorMessage"></mat-error>
+          [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
         }
       </mat-expansion-panel>
-    }`, standalone: false, styles: ["fieldset{border:0;margin:0;padding:0}.legend{font-weight:700}.expandable>.legend:before{content:\"\\25b6\";padding-right:.3em}.expanded>.legend:before{content:\"\\25bc\";padding-right:.2em}\n"] }]
+    }`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: ["fieldset{border:0;margin:0;padding:0}.legend{font-weight:700}.expandable>.legend:before{content:\"\\25b6\";padding-right:.3em}.expanded>.legend:before{content:\"\\25bc\";padding-right:.2em}\n"] }]
         }], ctorParameters: () => [{ type: i1.JsonSchemaFormService }], propDecorators: { layoutNode: [{
                 type: Input
             }], layoutIndex: [{
@@ -589,13 +589,13 @@ class MaterialAddReferenceComponent {
         return parent.layoutNode.add ||
             this.jsf.setArrayItemTitle(parent, this.layoutNode, this.itemCount);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialAddReferenceComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MaterialAddReferenceComponent, isStandalone: false, selector: "material-add-reference-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialAddReferenceComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: MaterialAddReferenceComponent, isStandalone: false, selector: "material-add-reference-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
     <section [class]="options?.htmlClass || ''" align="end">
       @if (showAddButton) {
         <button mat-raised-button
           [color]="options?.color || 'accent'"
-          [disabled]="options?.readonly"
+          [disabled]="$safeNavigationMigration(options?.readonly)"
           (click)="addItem($event)">
           @if (options?.icon) {
             <span [class]="options?.icon"></span>
@@ -607,7 +607,7 @@ class MaterialAddReferenceComponent {
       }
     </section>`, isInline: true, dependencies: [{ kind: "component", type: i2$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialAddReferenceComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialAddReferenceComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'material-add-reference-widget',
@@ -616,7 +616,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
       @if (showAddButton) {
         <button mat-raised-button
           [color]="options?.color || 'accent'"
-          [disabled]="options?.readonly"
+          [disabled]="$safeNavigationMigration(options?.readonly)"
           (click)="addItem($event)">
           @if (options?.icon) {
             <span [class]="options?.icon"></span>
@@ -627,7 +627,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         </button>
       }
     </section>`,
-                    changeDetection: ChangeDetectionStrategy.Default,
+                    changeDetection: ChangeDetectionStrategy.Eager,
                     standalone: false
                 }]
         }], ctorParameters: () => [{ type: i1.JsonSchemaFormService }], propDecorators: { layoutNode: [{
@@ -663,29 +663,29 @@ class MaterialButtonComponent {
             this.jsf.updateValue(this, event.target.value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialButtonComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MaterialButtonComponent, isStandalone: false, selector: "material-button-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialButtonComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: MaterialButtonComponent, isStandalone: false, selector: "material-button-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
     <div class="button-row" [class]="options?.htmlClass || ''">
       <button mat-raised-button
         [attr.readonly]="options?.readonly ? 'readonly' : null"
         [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
         [color]="options?.color || 'primary'"
         [disabled]="controlDisabled || options?.readonly"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
         [name]="controlName"
-        [type]="layoutNode?.type"
+        [type]="$safeNavigationMigration(layoutNode?.type)"
         [value]="controlValue"
         (click)="updateValue($event)">
         @if (options?.icon) {
           <mat-icon class="mat-24">{{options?.icon}}</mat-icon>
         }
         @if (options?.title) {
-          <span [innerHTML]="options?.title"></span>
+          <span [innerHTML]="$safeNavigationMigration(options?.title)"></span>
         }
       </button>
-    </div>`, isInline: true, styles: ["button{margin-top:10px}\n"], dependencies: [{ kind: "component", type: i2$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    </div>`, isInline: true, styles: ["button{margin-top:10px}\n"], dependencies: [{ kind: "component", type: i2$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'material-button-widget', template: `
     <div class="button-row" [class]="options?.htmlClass || ''">
@@ -694,19 +694,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
         [color]="options?.color || 'primary'"
         [disabled]="controlDisabled || options?.readonly"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
         [name]="controlName"
-        [type]="layoutNode?.type"
+        [type]="$safeNavigationMigration(layoutNode?.type)"
         [value]="controlValue"
         (click)="updateValue($event)">
         @if (options?.icon) {
           <mat-icon class="mat-24">{{options?.icon}}</mat-icon>
         }
         @if (options?.title) {
-          <span [innerHTML]="options?.title"></span>
+          <span [innerHTML]="$safeNavigationMigration(options?.title)"></span>
         }
       </button>
-    </div>`, standalone: false, styles: ["button{margin-top:10px}\n"] }]
+    </div>`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: ["button{margin-top:10px}\n"] }]
         }], ctorParameters: () => [{ type: i1.JsonSchemaFormService }], propDecorators: { layoutNode: [{
                 type: Input
             }], layoutIndex: [{
@@ -732,8 +732,8 @@ class MaterialButtonGroupComponent {
         this.options.showErrors = true;
         this.jsf.updateValue(this, value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialButtonGroupComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MaterialButtonGroupComponent, isStandalone: false, selector: "material-button-group-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialButtonGroupComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: MaterialButtonGroupComponent, isStandalone: false, selector: "material-button-group-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
     <div>
       @if (options?.title) {
         <div>
@@ -741,7 +741,7 @@ class MaterialButtonGroupComponent {
             [attr.for]="'control' + layoutNode?._id"
             [class]="options?.labelHtmlClass || ''"
             [style.display]="options?.notitle ? 'none' : ''"
-          [innerHTML]="options?.title"></label>
+          [innerHTML]="$safeNavigationMigration(options?.title)"></label>
         </div>
       }
       <mat-button-toggle-group
@@ -754,20 +754,20 @@ class MaterialButtonGroupComponent {
         [vertical]="!!options.vertical">
         @for (radioItem of radiosList; track radioItem) {
           <mat-button-toggle
-            [id]="'control' + layoutNode?._id + '/' + radioItem?.name"
-            [value]="radioItem?.value"
-            (click)="updateValue(radioItem?.value)">
-            <span [innerHTML]="radioItem?.name"></span>
+            [id]="'control' + $safeNavigationMigration(layoutNode?._id) + '/' + $safeNavigationMigration(radioItem?.name)"
+            [value]="$safeNavigationMigration(radioItem?.value)"
+            (click)="updateValue($safeNavigationMigration(radioItem?.value))">
+            <span [innerHTML]="$safeNavigationMigration(radioItem?.name)"></span>
           </mat-button-toggle>
         }
       </mat-button-toggle-group>
       @if (options?.showErrors && options?.errorMessage) {
         <mat-error
-        [innerHTML]="options?.errorMessage"></mat-error>
+        [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
       }
-    </div>`, isInline: true, styles: ["mat-error{font-size:75%}\n"], dependencies: [{ kind: "directive", type: i2$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }] }); }
+    </div>`, isInline: true, styles: ["mat-error{font-size:75%}\n"], dependencies: [{ kind: "directive", type: i2$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialButtonGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialButtonGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'material-button-group-widget', template: `
     <div>
@@ -777,7 +777,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
             [attr.for]="'control' + layoutNode?._id"
             [class]="options?.labelHtmlClass || ''"
             [style.display]="options?.notitle ? 'none' : ''"
-          [innerHTML]="options?.title"></label>
+          [innerHTML]="$safeNavigationMigration(options?.title)"></label>
         </div>
       }
       <mat-button-toggle-group
@@ -790,18 +790,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         [vertical]="!!options.vertical">
         @for (radioItem of radiosList; track radioItem) {
           <mat-button-toggle
-            [id]="'control' + layoutNode?._id + '/' + radioItem?.name"
-            [value]="radioItem?.value"
-            (click)="updateValue(radioItem?.value)">
-            <span [innerHTML]="radioItem?.name"></span>
+            [id]="'control' + $safeNavigationMigration(layoutNode?._id) + '/' + $safeNavigationMigration(radioItem?.name)"
+            [value]="$safeNavigationMigration(radioItem?.value)"
+            (click)="updateValue($safeNavigationMigration(radioItem?.value))">
+            <span [innerHTML]="$safeNavigationMigration(radioItem?.name)"></span>
           </mat-button-toggle>
         }
       </mat-button-toggle-group>
       @if (options?.showErrors && options?.errorMessage) {
         <mat-error
-        [innerHTML]="options?.errorMessage"></mat-error>
+        [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
       }
-    </div>`, standalone: false, styles: ["mat-error{font-size:75%}\n"] }]
+    </div>`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: ["mat-error{font-size:75%}\n"] }]
         }], ctorParameters: () => [{ type: i1.JsonSchemaFormService }], propDecorators: { layoutNode: [{
                 type: Input
             }], layoutIndex: [{
@@ -838,14 +838,14 @@ class MaterialCheckboxComponent {
     get isChecked() {
         return this.jsf.getFormControlValue(this) === this.trueValue;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialCheckboxComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MaterialCheckboxComponent, isStandalone: false, selector: "material-checkbox-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialCheckboxComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: MaterialCheckboxComponent, isStandalone: false, selector: "material-checkbox-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
     @if (boundControl && !showSlideToggle) {
       <mat-checkbox
         [formControl]="formControl"
         align="left"
         [color]="options?.color || 'primary'"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
         labelPosition="after"
         [name]="controlName"
         (blur)="options.showErrors = true">
@@ -853,7 +853,7 @@ class MaterialCheckboxComponent {
           <span
             class="checkbox-name"
             [style.display]="options?.notitle ? 'none' : ''"
-          [innerHTML]="options?.title"></span>
+          [innerHTML]="$safeNavigationMigration(options?.title)"></span>
         }
       </mat-checkbox>
     }
@@ -862,7 +862,7 @@ class MaterialCheckboxComponent {
         align="left"
         [color]="options?.color || 'primary'"
         [disabled]="controlDisabled || options?.readonly"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
         labelPosition="after"
         [name]="controlName"
         [checked]="isChecked"
@@ -872,7 +872,7 @@ class MaterialCheckboxComponent {
           <span
             class="checkbox-name"
             [style.display]="options?.notitle ? 'none' : ''"
-          [innerHTML]="options?.title"></span>
+          [innerHTML]="$safeNavigationMigration(options?.title)"></span>
         }
       </mat-checkbox>
     }
@@ -881,7 +881,7 @@ class MaterialCheckboxComponent {
         [formControl]="formControl"
         align="left"
         [color]="options?.color || 'primary'"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
         labelPosition="after"
         [name]="controlName"
         (blur)="options.showErrors = true">
@@ -889,7 +889,7 @@ class MaterialCheckboxComponent {
           <span
             class="checkbox-name"
             [style.display]="options?.notitle ? 'none' : ''"
-          [innerHTML]="options?.title"></span>
+          [innerHTML]="$safeNavigationMigration(options?.title)"></span>
         }
       </mat-slide-toggle>
     }
@@ -898,7 +898,7 @@ class MaterialCheckboxComponent {
         align="left"
         [color]="options?.color || 'primary'"
         [disabled]="controlDisabled || options?.readonly"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
         labelPosition="after"
         [name]="controlName"
         [checked]="isChecked"
@@ -908,16 +908,16 @@ class MaterialCheckboxComponent {
           <span
             class="checkbox-name"
             [style.display]="options?.notitle ? 'none' : ''"
-          [innerHTML]="options?.title"></span>
+          [innerHTML]="$safeNavigationMigration(options?.title)"></span>
         }
       </mat-slide-toggle>
     }
     @if (options?.showErrors && options?.errorMessage) {
       <mat-error
-      [innerHTML]="options?.errorMessage"></mat-error>
-    }`, isInline: true, styles: [".checkbox-name{white-space:nowrap}mat-error{font-size:75%}\n"], dependencies: [{ kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] }); }
+      [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
+    }`, isInline: true, styles: [".checkbox-name{white-space:nowrap}mat-error{font-size:75%}\n"], dependencies: [{ kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "fullWidth", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'material-checkbox-widget', template: `
     @if (boundControl && !showSlideToggle) {
@@ -925,7 +925,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         [formControl]="formControl"
         align="left"
         [color]="options?.color || 'primary'"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
         labelPosition="after"
         [name]="controlName"
         (blur)="options.showErrors = true">
@@ -933,7 +933,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
           <span
             class="checkbox-name"
             [style.display]="options?.notitle ? 'none' : ''"
-          [innerHTML]="options?.title"></span>
+          [innerHTML]="$safeNavigationMigration(options?.title)"></span>
         }
       </mat-checkbox>
     }
@@ -942,7 +942,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         align="left"
         [color]="options?.color || 'primary'"
         [disabled]="controlDisabled || options?.readonly"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
         labelPosition="after"
         [name]="controlName"
         [checked]="isChecked"
@@ -952,7 +952,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
           <span
             class="checkbox-name"
             [style.display]="options?.notitle ? 'none' : ''"
-          [innerHTML]="options?.title"></span>
+          [innerHTML]="$safeNavigationMigration(options?.title)"></span>
         }
       </mat-checkbox>
     }
@@ -961,7 +961,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         [formControl]="formControl"
         align="left"
         [color]="options?.color || 'primary'"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
         labelPosition="after"
         [name]="controlName"
         (blur)="options.showErrors = true">
@@ -969,7 +969,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
           <span
             class="checkbox-name"
             [style.display]="options?.notitle ? 'none' : ''"
-          [innerHTML]="options?.title"></span>
+          [innerHTML]="$safeNavigationMigration(options?.title)"></span>
         }
       </mat-slide-toggle>
     }
@@ -978,7 +978,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         align="left"
         [color]="options?.color || 'primary'"
         [disabled]="controlDisabled || options?.readonly"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
         labelPosition="after"
         [name]="controlName"
         [checked]="isChecked"
@@ -988,14 +988,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
           <span
             class="checkbox-name"
             [style.display]="options?.notitle ? 'none' : ''"
-          [innerHTML]="options?.title"></span>
+          [innerHTML]="$safeNavigationMigration(options?.title)"></span>
         }
       </mat-slide-toggle>
     }
     @if (options?.showErrors && options?.errorMessage) {
       <mat-error
-      [innerHTML]="options?.errorMessage"></mat-error>
-    }`, standalone: false, styles: [".checkbox-name{white-space:nowrap}mat-error{font-size:75%}\n"] }]
+      [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
+    }`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: [".checkbox-name{white-space:nowrap}mat-error{font-size:75%}\n"] }]
         }], ctorParameters: () => [{ type: i1.JsonSchemaFormService }], propDecorators: { layoutNode: [{
                 type: Input
             }], layoutIndex: [{
@@ -1045,25 +1045,25 @@ class MaterialCheckboxesComponent {
         this.checkboxList.forEach(t => t.checked = event.checked);
         this.updateValue();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialCheckboxesComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MaterialCheckboxesComponent, isStandalone: false, selector: "material-checkboxes-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialCheckboxesComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: MaterialCheckboxesComponent, isStandalone: false, selector: "material-checkboxes-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
     <div>
       <mat-checkbox type="checkbox"
         [checked]="allChecked"
         [color]="options?.color || 'primary'"
         [disabled]="controlDisabled || options?.readonly"
         [indeterminate]="someChecked"
-        [name]="options?.name"
+        [name]="$safeNavigationMigration(options?.name)"
         (blur)="options.showErrors = true"
         (change)="updateAllValues($event)">
-        <span class="checkbox-name" [innerHTML]="options?.name"></span>
+        <span class="checkbox-name" [innerHTML]="$safeNavigationMigration(options?.name)"></span>
       </mat-checkbox>
       @if (options?.title) {
         <label
           class="title"
           [class]="options?.labelHtmlClass || ''"
           [style.display]="options?.notitle ? 'none' : ''"
-        [innerHTML]="options?.title"></label>
+        [innerHTML]="$safeNavigationMigration(options?.title)"></label>
       }
       <ul class="checkbox-list" [class.horizontal-list]="horizontalList">
         @for (checkboxItem of checkboxList; track checkboxItem) {
@@ -1073,21 +1073,21 @@ class MaterialCheckboxesComponent {
               [(ngModel)]="checkboxItem.checked"
               [color]="options?.color || 'primary'"
               [disabled]="controlDisabled || options?.readonly"
-              [name]="checkboxItem?.name"
+              [name]="$safeNavigationMigration(checkboxItem?.name)"
               (blur)="options.showErrors = true"
               (change)="updateValue()">
-              <span class="checkbox-name" [innerHTML]="checkboxItem?.name"></span>
+              <span class="checkbox-name" [innerHTML]="$safeNavigationMigration(checkboxItem?.name)"></span>
             </mat-checkbox>
           </li>
         }
       </ul>
       @if (options?.showErrors && options?.errorMessage) {
         <mat-error
-        [innerHTML]="options?.errorMessage"></mat-error>
+        [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
       }
-    </div>`, isInline: true, styles: [".title{font-weight:700}.checkbox-list{list-style-type:none}.horizontal-list>li{display:inline-block;margin-right:10px;zoom:1}.checkbox-name{white-space:nowrap}mat-error{font-size:75%}\n"], dependencies: [{ kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }] }); }
+    </div>`, isInline: true, styles: [".title{font-weight:700}.checkbox-list{list-style-type:none}.horizontal-list>li{display:inline-block;margin-right:10px;zoom:1}.checkbox-name{white-space:nowrap}mat-error{font-size:75%}\n"], dependencies: [{ kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialCheckboxesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialCheckboxesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'material-checkboxes-widget', template: `
     <div>
@@ -1096,17 +1096,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         [color]="options?.color || 'primary'"
         [disabled]="controlDisabled || options?.readonly"
         [indeterminate]="someChecked"
-        [name]="options?.name"
+        [name]="$safeNavigationMigration(options?.name)"
         (blur)="options.showErrors = true"
         (change)="updateAllValues($event)">
-        <span class="checkbox-name" [innerHTML]="options?.name"></span>
+        <span class="checkbox-name" [innerHTML]="$safeNavigationMigration(options?.name)"></span>
       </mat-checkbox>
       @if (options?.title) {
         <label
           class="title"
           [class]="options?.labelHtmlClass || ''"
           [style.display]="options?.notitle ? 'none' : ''"
-        [innerHTML]="options?.title"></label>
+        [innerHTML]="$safeNavigationMigration(options?.title)"></label>
       }
       <ul class="checkbox-list" [class.horizontal-list]="horizontalList">
         @for (checkboxItem of checkboxList; track checkboxItem) {
@@ -1116,19 +1116,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
               [(ngModel)]="checkboxItem.checked"
               [color]="options?.color || 'primary'"
               [disabled]="controlDisabled || options?.readonly"
-              [name]="checkboxItem?.name"
+              [name]="$safeNavigationMigration(checkboxItem?.name)"
               (blur)="options.showErrors = true"
               (change)="updateValue()">
-              <span class="checkbox-name" [innerHTML]="checkboxItem?.name"></span>
+              <span class="checkbox-name" [innerHTML]="$safeNavigationMigration(checkboxItem?.name)"></span>
             </mat-checkbox>
           </li>
         }
       </ul>
       @if (options?.showErrors && options?.errorMessage) {
         <mat-error
-        [innerHTML]="options?.errorMessage"></mat-error>
+        [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
       }
-    </div>`, standalone: false, styles: [".title{font-weight:700}.checkbox-list{list-style-type:none}.horizontal-list>li{display:inline-block;margin-right:10px;zoom:1}.checkbox-name{white-space:nowrap}mat-error{font-size:75%}\n"] }]
+    </div>`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: [".title{font-weight:700}.checkbox-list{list-style-type:none}.horizontal-list>li{display:inline-block;margin-right:10px;zoom:1}.checkbox-name{white-space:nowrap}mat-error{font-size:75%}\n"] }]
         }], ctorParameters: () => [{ type: i1.JsonSchemaFormService }], propDecorators: { layoutNode: [{
                 type: Input
             }], layoutIndex: [{
@@ -1165,8 +1165,8 @@ class MaterialChipListComponent {
     syncFormArray() {
         this.jsf.updateArrayCheckboxList(this, this.tags.map(value => ({ checked: true, value })));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialChipListComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MaterialChipListComponent, isStandalone: false, selector: "material-chip-list-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialChipListComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: MaterialChipListComponent, isStandalone: false, selector: "material-chip-list-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
     <mat-form-field
       [appearance]="options?.appearance || 'fill'"
       [class]="options?.htmlClass || ''"
@@ -1195,15 +1195,15 @@ class MaterialChipListComponent {
         (matChipInputTokenEnd)="add($event)">
       @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
         <mat-hint
-        align="end" [innerHTML]="options?.description"></mat-hint>
+        align="end" [innerHTML]="$safeNavigationMigration(options?.description)"></mat-hint>
       }
     </mat-form-field>
     @if (options?.showErrors && options?.errorMessage) {
       <mat-error
-      [innerHTML]="options?.errorMessage"></mat-error>
-    }`, isInline: true, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}\n"], dependencies: [{ kind: "component", type: i2$4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$4.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+      [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
+    }`, isInline: true, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}\n"], dependencies: [{ kind: "component", type: i2$4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$4.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialChipListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialChipListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'material-chip-list-widget', template: `
     <mat-form-field
@@ -1234,13 +1234,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         (matChipInputTokenEnd)="add($event)">
       @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
         <mat-hint
-        align="end" [innerHTML]="options?.description"></mat-hint>
+        align="end" [innerHTML]="$safeNavigationMigration(options?.description)"></mat-hint>
       }
     </mat-form-field>
     @if (options?.showErrors && options?.errorMessage) {
       <mat-error
-      [innerHTML]="options?.errorMessage"></mat-error>
-    }`, standalone: false, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}\n"] }]
+      [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
+    }`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}\n"] }]
         }], ctorParameters: () => [{ type: i1.JsonSchemaFormService }], propDecorators: { layoutNode: [{
                 type: Input
             }], layoutIndex: [{
@@ -1264,8 +1264,8 @@ class MaterialDatepickerComponent {
             this.options.description = this.options.placeholder;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialDatepickerComponent, deps: [{ token: MAT_FORM_FIELD_DEFAULT_OPTIONS, optional: true }, { token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MaterialDatepickerComponent, isStandalone: false, selector: "material-datepicker-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialDatepickerComponent, deps: [{ token: MAT_FORM_FIELD_DEFAULT_OPTIONS, optional: true }, { token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: MaterialDatepickerComponent, isStandalone: false, selector: "material-datepicker-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
     <mat-form-field [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'fill'"
       [class]="options?.htmlClass || ''"
       [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || 'auto'"
@@ -1284,14 +1284,14 @@ class MaterialDatepickerComponent {
           [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
           [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
           [attr.readonly]="options?.readonly ? 'readonly' : null"
-          [id]="'control' + layoutNode?._id"
-          [max]="options?.maximum"
+          [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
+          [max]="$safeNavigationMigration(options?.maximum)"
           [matDatepicker]="picker"
-          [min]="options?.minimum"
+          [min]="$safeNavigationMigration(options?.minimum)"
           [name]="controlName"
-          [placeholder]="options?.title"
-          [readonly]="options?.readonly"
-          [required]="options?.required"
+          [placeholder]="$safeNavigationMigration(options?.title)"
+          [readonly]="$safeNavigationMigration(options?.readonly)"
+          [required]="$safeNavigationMigration(options?.required)"
           [style.width]="'100%'"
           (blur)="options.showErrors = true"
           >
@@ -1302,15 +1302,15 @@ class MaterialDatepickerComponent {
           [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
           [attr.readonly]="options?.readonly ? 'readonly' : null"
           [disabled]="controlDisabled || options?.readonly"
-          [id]="'control' + layoutNode?._id"
-          [max]="options?.maximum"
+          [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
+          [max]="$safeNavigationMigration(options?.maximum)"
           [matDatepicker]="picker"
-          [min]="options?.minimum"
+          [min]="$safeNavigationMigration(options?.minimum)"
           [name]="controlName"
-          [placeholder]="options?.title"
-          [required]="options?.required"
+          [placeholder]="$safeNavigationMigration(options?.title)"
+          [required]="$safeNavigationMigration(options?.required)"
           [style.width]="'100%'"
-          [readonly]="options?.readonly"
+          [readonly]="$safeNavigationMigration(options?.readonly)"
           (blur)="options.showErrors = true"
           >
       }
@@ -1320,17 +1320,17 @@ class MaterialDatepickerComponent {
       }
       @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
         <mat-hint
-        align="end" [innerHTML]="options?.description"></mat-hint>
+        align="end" [innerHTML]="$safeNavigationMigration(options?.description)"></mat-hint>
       }
       <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
     </mat-form-field>
     <mat-datepicker #picker ></mat-datepicker>
     @if (options?.showErrors && options?.errorMessage) {
       <mat-error
-      [innerHTML]="options?.errorMessage"></mat-error>
-    }`, isInline: true, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}::ng-deep json-schema-form mat-form-field .mat-mdc-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{width:initial}\n"], dependencies: [{ kind: "directive", type: i2$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] }); }
+      [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
+    }`, isInline: true, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}::ng-deep json-schema-form mat-form-field .mat-mdc-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{width:initial}\n"], dependencies: [{ kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialDatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'material-datepicker-widget', template: `
     <mat-form-field [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'fill'"
@@ -1351,14 +1351,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
           [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
           [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
           [attr.readonly]="options?.readonly ? 'readonly' : null"
-          [id]="'control' + layoutNode?._id"
-          [max]="options?.maximum"
+          [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
+          [max]="$safeNavigationMigration(options?.maximum)"
           [matDatepicker]="picker"
-          [min]="options?.minimum"
+          [min]="$safeNavigationMigration(options?.minimum)"
           [name]="controlName"
-          [placeholder]="options?.title"
-          [readonly]="options?.readonly"
-          [required]="options?.required"
+          [placeholder]="$safeNavigationMigration(options?.title)"
+          [readonly]="$safeNavigationMigration(options?.readonly)"
+          [required]="$safeNavigationMigration(options?.required)"
           [style.width]="'100%'"
           (blur)="options.showErrors = true"
           >
@@ -1369,15 +1369,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
           [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
           [attr.readonly]="options?.readonly ? 'readonly' : null"
           [disabled]="controlDisabled || options?.readonly"
-          [id]="'control' + layoutNode?._id"
-          [max]="options?.maximum"
+          [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
+          [max]="$safeNavigationMigration(options?.maximum)"
           [matDatepicker]="picker"
-          [min]="options?.minimum"
+          [min]="$safeNavigationMigration(options?.minimum)"
           [name]="controlName"
-          [placeholder]="options?.title"
-          [required]="options?.required"
+          [placeholder]="$safeNavigationMigration(options?.title)"
+          [required]="$safeNavigationMigration(options?.required)"
           [style.width]="'100%'"
-          [readonly]="options?.readonly"
+          [readonly]="$safeNavigationMigration(options?.readonly)"
           (blur)="options.showErrors = true"
           >
       }
@@ -1387,15 +1387,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
       }
       @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
         <mat-hint
-        align="end" [innerHTML]="options?.description"></mat-hint>
+        align="end" [innerHTML]="$safeNavigationMigration(options?.description)"></mat-hint>
       }
       <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
     </mat-form-field>
     <mat-datepicker #picker ></mat-datepicker>
     @if (options?.showErrors && options?.errorMessage) {
       <mat-error
-      [innerHTML]="options?.errorMessage"></mat-error>
-    }`, standalone: false, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}::ng-deep json-schema-form mat-form-field .mat-mdc-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{width:initial}\n"] }]
+      [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
+    }`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}::ng-deep json-schema-form mat-form-field .mat-mdc-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{width:initial}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_FORM_FIELD_DEFAULT_OPTIONS]
@@ -1491,12 +1491,12 @@ class MaterialDesignFrameworkComponent {
     removeItem() {
         this.jsf.removeItem(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialDesignFrameworkComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MaterialDesignFrameworkComponent, isStandalone: false, selector: "material-design-framework", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, usesOnChanges: true, ngImport: i0, template: "<div\n  [class.array-item]=\"widgetLayoutNode?.arrayItem && widgetLayoutNode?.type !== '$ref'\"\n  [orderable]=\"isOrderable\"\n  [dataIndex]=\"dataIndex\"\n  [layoutIndex]=\"layoutIndex\"\n  [layoutNode]=\"widgetLayoutNode\">\n  @if (showRemoveButton) {\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"18\" width=\"18\" viewBox=\"0 0 24 24\"\n      class=\"close-button\"\n      (click)=\"removeItem()\">\n      <path\n        d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z\"/>\n    </svg>\n  }\n  <select-widget-widget\n    [dataIndex]=\"dataIndex\"\n    [layoutIndex]=\"layoutIndex\"\n  [layoutNode]=\"widgetLayoutNode\"></select-widget-widget>\n</div>\n@if (widgetLayoutNode?.arrayItem && widgetLayoutNode?.type !== '$ref') {\n  <div class=\"spacer\"></div>\n}\n", styles: [".array-item{border-radius:2px;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;padding:6px;position:relative;transition:all .28s cubic-bezier(.4,0,.2,1)}.close-button{cursor:pointer;position:absolute;top:6px;right:6px;fill:#0006;visibility:hidden;z-index:500}.close-button:hover{fill:#000c}.array-item:hover>.close-button{visibility:visible}.spacer{margin:6px 0}[draggable=true]:hover{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;cursor:move;z-index:10}[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}\n"], dependencies: [{ kind: "component", type: i1.SelectWidgetComponent, selector: "select-widget-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }, { kind: "directive", type: i1.OrderableDirective, selector: "[orderable]", inputs: ["orderable", "layoutNode", "layoutIndex", "dataIndex"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialDesignFrameworkComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: MaterialDesignFrameworkComponent, isStandalone: false, selector: "material-design-framework", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, usesOnChanges: true, ngImport: i0, template: "<div\n  [class.array-item]=\"widgetLayoutNode?.arrayItem && widgetLayoutNode?.type !== '$ref'\"\n  [orderable]=\"isOrderable\"\n  [dataIndex]=\"dataIndex\"\n  [layoutIndex]=\"layoutIndex\"\n  [layoutNode]=\"widgetLayoutNode\">\n  @if (showRemoveButton) {\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"18\" width=\"18\" viewBox=\"0 0 24 24\"\n      class=\"close-button\"\n      (click)=\"removeItem()\">\n      <path\n        d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z\"/>\n    </svg>\n  }\n  <select-widget-widget\n    [dataIndex]=\"dataIndex\"\n    [layoutIndex]=\"layoutIndex\"\n  [layoutNode]=\"widgetLayoutNode\"></select-widget-widget>\n</div>\n@if (widgetLayoutNode?.arrayItem && widgetLayoutNode?.type !== '$ref') {\n  <div class=\"spacer\"></div>\n}\n", styles: [".array-item{border-radius:2px;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;padding:6px;position:relative;transition:all .28s cubic-bezier(.4,0,.2,1)}.close-button{cursor:pointer;position:absolute;top:6px;right:6px;fill:#0006;visibility:hidden;z-index:500}.close-button:hover{fill:#000c}.array-item:hover>.close-button{visibility:visible}.spacer{margin:6px 0}[draggable=true]:hover{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;cursor:move;z-index:10}[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}\n"], dependencies: [{ kind: "component", type: i1.SelectWidgetComponent, selector: "select-widget-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }, { kind: "directive", type: i1.OrderableDirective, selector: "[orderable]", inputs: ["orderable", "layoutNode", "layoutIndex", "dataIndex"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialDesignFrameworkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialDesignFrameworkComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'material-design-framework', standalone: false, template: "<div\n  [class.array-item]=\"widgetLayoutNode?.arrayItem && widgetLayoutNode?.type !== '$ref'\"\n  [orderable]=\"isOrderable\"\n  [dataIndex]=\"dataIndex\"\n  [layoutIndex]=\"layoutIndex\"\n  [layoutNode]=\"widgetLayoutNode\">\n  @if (showRemoveButton) {\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"18\" width=\"18\" viewBox=\"0 0 24 24\"\n      class=\"close-button\"\n      (click)=\"removeItem()\">\n      <path\n        d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z\"/>\n    </svg>\n  }\n  <select-widget-widget\n    [dataIndex]=\"dataIndex\"\n    [layoutIndex]=\"layoutIndex\"\n  [layoutNode]=\"widgetLayoutNode\"></select-widget-widget>\n</div>\n@if (widgetLayoutNode?.arrayItem && widgetLayoutNode?.type !== '$ref') {\n  <div class=\"spacer\"></div>\n}\n", styles: [".array-item{border-radius:2px;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;padding:6px;position:relative;transition:all .28s cubic-bezier(.4,0,.2,1)}.close-button{cursor:pointer;position:absolute;top:6px;right:6px;fill:#0006;visibility:hidden;z-index:500}.close-button:hover{fill:#000c}.array-item:hover>.close-button{visibility:visible}.spacer{margin:6px 0}[draggable=true]:hover{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;cursor:move;z-index:10}[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}\n"] }]
+            args: [{ selector: 'material-design-framework', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div\n  [class.array-item]=\"widgetLayoutNode?.arrayItem && widgetLayoutNode?.type !== '$ref'\"\n  [orderable]=\"isOrderable\"\n  [dataIndex]=\"dataIndex\"\n  [layoutIndex]=\"layoutIndex\"\n  [layoutNode]=\"widgetLayoutNode\">\n  @if (showRemoveButton) {\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"18\" width=\"18\" viewBox=\"0 0 24 24\"\n      class=\"close-button\"\n      (click)=\"removeItem()\">\n      <path\n        d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z\"/>\n    </svg>\n  }\n  <select-widget-widget\n    [dataIndex]=\"dataIndex\"\n    [layoutIndex]=\"layoutIndex\"\n  [layoutNode]=\"widgetLayoutNode\"></select-widget-widget>\n</div>\n@if (widgetLayoutNode?.arrayItem && widgetLayoutNode?.type !== '$ref') {\n  <div class=\"spacer\"></div>\n}\n", styles: [".array-item{border-radius:2px;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;padding:6px;position:relative;transition:all .28s cubic-bezier(.4,0,.2,1)}.close-button{cursor:pointer;position:absolute;top:6px;right:6px;fill:#0006;visibility:hidden;z-index:500}.close-button:hover{fill:#000c}.array-item:hover>.close-button{visibility:visible}.spacer{margin:6px 0}[draggable=true]:hover{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;cursor:move;z-index:10}[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}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.JsonSchemaFormService }], propDecorators: { layoutNode: [{
                 type: Input
             }], layoutIndex: [{
@@ -1528,8 +1528,8 @@ class MaterialFileComponent {
         };
         reader.readAsDataURL(file);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialFileComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MaterialFileComponent, isStandalone: false, selector: "material-file-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialFileComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: MaterialFileComponent, isStandalone: false, selector: "material-file-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
     <div [class]="options?.htmlClass || ''" [style.width]="'100%'">
       @if (!options?.notitle) {
         <label
@@ -1550,16 +1550,16 @@ class MaterialFileComponent {
       </div>
       @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
         <mat-hint
-          [innerHTML]="options?.description"
+          [innerHTML]="$safeNavigationMigration(options?.description)"
         style="display:block; font-size:75%; color:rgba(0,0,0,.6); margin-top:4px;"></mat-hint>
       }
     </div>
     @if (options?.showErrors && options?.errorMessage) {
       <mat-error
-      [innerHTML]="options?.errorMessage"></mat-error>
-    }`, isInline: true, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}\n"], dependencies: [{ kind: "component", type: i2$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+      [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
+    }`, isInline: true, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}\n"], dependencies: [{ kind: "component", type: i2$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialFileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialFileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'material-file-widget', template: `
     <div [class]="options?.htmlClass || ''" [style.width]="'100%'">
@@ -1582,14 +1582,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
       </div>
       @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
         <mat-hint
-          [innerHTML]="options?.description"
+          [innerHTML]="$safeNavigationMigration(options?.description)"
         style="display:block; font-size:75%; color:rgba(0,0,0,.6); margin-top:4px;"></mat-hint>
       }
     </div>
     @if (options?.showErrors && options?.errorMessage) {
       <mat-error
-      [innerHTML]="options?.errorMessage"></mat-error>
-    }`, standalone: false, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}\n"] }]
+      [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
+    }`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}\n"] }]
         }], ctorParameters: () => [{ type: i1.JsonSchemaFormService }], propDecorators: { layoutNode: [{
                 type: Input
             }], layoutIndex: [{
@@ -1616,8 +1616,8 @@ class MaterialInputComponent {
     updateValue(event) {
         this.jsf.updateValue(this, event.target.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialInputComponent, deps: [{ token: MAT_FORM_FIELD_DEFAULT_OPTIONS, optional: true }, { token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MaterialInputComponent, isStandalone: false, selector: "material-input-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialInputComponent, deps: [{ token: MAT_FORM_FIELD_DEFAULT_OPTIONS, optional: true }, { token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: MaterialInputComponent, isStandalone: false, selector: "material-input-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
     <mat-form-field [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'fill'"
       [class]="options?.htmlClass || ''"
       [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || 'auto'"
@@ -1639,12 +1639,12 @@ class MaterialInputComponent {
           [attr.minlength]="options?.minLength"
           [attr.pattern]="options?.pattern"
           [readonly]="options?.readonly ? 'readonly' : null"
-          [id]="'control' + layoutNode?._id"
+          [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
           [name]="controlName"
-          [placeholder]="options?.notitle ? options?.placeholder : options?.title"
-          [required]="options?.required"
+          [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
+          [required]="$safeNavigationMigration(options?.required)"
           [style.width]="'100%'"
-          [type]="layoutNode?.type"
+          [type]="$safeNavigationMigration(layoutNode?.type)"
           (blur)="options.showErrors = true">
       }
       @if (!boundControl) {
@@ -1655,13 +1655,13 @@ class MaterialInputComponent {
           [attr.minlength]="options?.minLength"
           [attr.pattern]="options?.pattern"
           [disabled]="controlDisabled"
-          [id]="'control' + layoutNode?._id"
+          [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
           [name]="controlName"
-          [placeholder]="options?.notitle ? options?.placeholder : options?.title"
+          [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
           [readonly]="options?.readonly ? 'readonly' : null"
-          [required]="options?.required"
+          [required]="$safeNavigationMigration(options?.required)"
           [style.width]="'100%'"
-          [type]="layoutNode?.type"
+          [type]="$safeNavigationMigration(layoutNode?.type)"
           [value]="controlValue"
           (input)="updateValue($event)"
           (blur)="options.showErrors = true">
@@ -1672,7 +1672,7 @@ class MaterialInputComponent {
       }
       @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
         <mat-hint
-        align="end" [innerHTML]="options?.description"></mat-hint>
+        align="end" [innerHTML]="$safeNavigationMigration(options?.description)"></mat-hint>
       }
       @if (options?.typeahead?.source) {
         <mat-autocomplete>
@@ -1685,10 +1685,10 @@ class MaterialInputComponent {
     </mat-form-field>
     @if (options?.showErrors && options?.errorMessage) {
       <mat-error
-      [innerHTML]="options?.errorMessage"></mat-error>
-    }`, isInline: true, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}::ng-deep json-schema-form mat-form-field .mat-mdc-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{width:initial}\n"], dependencies: [{ kind: "directive", type: i2$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] }); }
+      [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
+    }`, isInline: true, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}::ng-deep json-schema-form mat-form-field .mat-mdc-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{width:initial}\n"], dependencies: [{ kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'material-input-widget', template: `
     <mat-form-field [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'fill'"
@@ -1712,12 +1712,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
           [attr.minlength]="options?.minLength"
           [attr.pattern]="options?.pattern"
           [readonly]="options?.readonly ? 'readonly' : null"
-          [id]="'control' + layoutNode?._id"
+          [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
           [name]="controlName"
-          [placeholder]="options?.notitle ? options?.placeholder : options?.title"
-          [required]="options?.required"
+          [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
+          [required]="$safeNavigationMigration(options?.required)"
           [style.width]="'100%'"
-          [type]="layoutNode?.type"
+          [type]="$safeNavigationMigration(layoutNode?.type)"
           (blur)="options.showErrors = true">
       }
       @if (!boundControl) {
@@ -1728,13 +1728,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
           [attr.minlength]="options?.minLength"
           [attr.pattern]="options?.pattern"
           [disabled]="controlDisabled"
-          [id]="'control' + layoutNode?._id"
+          [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
           [name]="controlName"
-          [placeholder]="options?.notitle ? options?.placeholder : options?.title"
+          [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
           [readonly]="options?.readonly ? 'readonly' : null"
-          [required]="options?.required"
+          [required]="$safeNavigationMigration(options?.required)"
           [style.width]="'100%'"
-          [type]="layoutNode?.type"
+          [type]="$safeNavigationMigration(layoutNode?.type)"
           [value]="controlValue"
           (input)="updateValue($event)"
           (blur)="options.showErrors = true">
@@ -1745,7 +1745,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
       }
       @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
         <mat-hint
-        align="end" [innerHTML]="options?.description"></mat-hint>
+        align="end" [innerHTML]="$safeNavigationMigration(options?.description)"></mat-hint>
       }
       @if (options?.typeahead?.source) {
         <mat-autocomplete>
@@ -1758,8 +1758,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
     </mat-form-field>
     @if (options?.showErrors && options?.errorMessage) {
       <mat-error
-      [innerHTML]="options?.errorMessage"></mat-error>
-    }`, standalone: false, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}::ng-deep json-schema-form mat-form-field .mat-mdc-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{width:initial}\n"] }]
+      [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
+    }`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}::ng-deep json-schema-form mat-form-field .mat-mdc-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{width:initial}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_FORM_FIELD_DEFAULT_OPTIONS]
@@ -1799,8 +1799,8 @@ class MaterialNumberComponent {
     updateValue(event) {
         this.jsf.updateValue(this, event.target.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialNumberComponent, deps: [{ token: MAT_FORM_FIELD_DEFAULT_OPTIONS, optional: true }, { token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MaterialNumberComponent, isStandalone: false, selector: "material-number-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialNumberComponent, deps: [{ token: MAT_FORM_FIELD_DEFAULT_OPTIONS, optional: true }, { token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: MaterialNumberComponent, isStandalone: false, selector: "material-number-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
     <mat-form-field [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'fill'"
       [class]="options?.htmlClass || ''"
       [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || 'auto'"
@@ -1820,11 +1820,11 @@ class MaterialNumberComponent {
           [attr.max]="maxValue"
           [attr.min]="minValue"
           [attr.step]="options?.multipleOf || options?.step || 'any'"
-          [id]="'control' + layoutNode?._id"
+          [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
           [name]="controlName"
-          [placeholder]="options?.notitle ? options?.placeholder : options?.title"
+          [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
           [readonly]="options?.readonly ? 'readonly' : null"
-          [required]="options?.required"
+          [required]="$safeNavigationMigration(options?.required)"
           [style.width]="'100%'"
           [type]="'number'"
           (blur)="options.showErrors = true">
@@ -1836,11 +1836,11 @@ class MaterialNumberComponent {
           [attr.min]="minValue"
           [attr.step]="options?.multipleOf || options?.step || 'any'"
           [disabled]="controlDisabled"
-          [id]="'control' + layoutNode?._id"
+          [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
           [name]="controlName"
-          [placeholder]="options?.notitle ? options?.placeholder : options?.title"
+          [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
           [readonly]="options?.readonly ? 'readonly' : null"
-          [required]="options?.required"
+          [required]="$safeNavigationMigration(options?.required)"
           [style.width]="'100%'"
           [type]="'number'"
           [value]="controlValue"
@@ -1857,15 +1857,15 @@ class MaterialNumberComponent {
       }
       @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
         <mat-hint
-        align="end" [innerHTML]="options?.description"></mat-hint>
+        align="end" [innerHTML]="$safeNavigationMigration(options?.description)"></mat-hint>
       }
     </mat-form-field>
     @if (options?.showErrors && options?.errorMessage) {
       <mat-error
-      [innerHTML]="options?.errorMessage"></mat-error>
-    }`, isInline: true, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}::ng-deep json-schema-form mat-form-field .mat-mdc-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{width:initial}\n"], dependencies: [{ kind: "directive", type: i2$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] }); }
+      [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
+    }`, isInline: true, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}::ng-deep json-schema-form mat-form-field .mat-mdc-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{width:initial}\n"], dependencies: [{ kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialNumberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialNumberComponent, decorators: [{
             type: Component,
             args: [{ selector: 'material-number-widget', template: `
     <mat-form-field [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'fill'"
@@ -1887,11 +1887,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
           [attr.max]="maxValue"
           [attr.min]="minValue"
           [attr.step]="options?.multipleOf || options?.step || 'any'"
-          [id]="'control' + layoutNode?._id"
+          [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
           [name]="controlName"
-          [placeholder]="options?.notitle ? options?.placeholder : options?.title"
+          [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
           [readonly]="options?.readonly ? 'readonly' : null"
-          [required]="options?.required"
+          [required]="$safeNavigationMigration(options?.required)"
           [style.width]="'100%'"
           [type]="'number'"
           (blur)="options.showErrors = true">
@@ -1903,11 +1903,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
           [attr.min]="minValue"
           [attr.step]="options?.multipleOf || options?.step || 'any'"
           [disabled]="controlDisabled"
-          [id]="'control' + layoutNode?._id"
+          [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
           [name]="controlName"
-          [placeholder]="options?.notitle ? options?.placeholder : options?.title"
+          [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
           [readonly]="options?.readonly ? 'readonly' : null"
-          [required]="options?.required"
+          [required]="$safeNavigationMigration(options?.required)"
           [style.width]="'100%'"
           [type]="'number'"
           [value]="controlValue"
@@ -1924,13 +1924,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
       }
       @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
         <mat-hint
-        align="end" [innerHTML]="options?.description"></mat-hint>
+        align="end" [innerHTML]="$safeNavigationMigration(options?.description)"></mat-hint>
       }
     </mat-form-field>
     @if (options?.showErrors && options?.errorMessage) {
       <mat-error
-      [innerHTML]="options?.errorMessage"></mat-error>
-    }`, standalone: false, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}::ng-deep json-schema-form mat-form-field .mat-mdc-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{width:initial}\n"] }]
+      [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
+    }`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}::ng-deep json-schema-form mat-form-field .mat-mdc-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{width:initial}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_FORM_FIELD_DEFAULT_OPTIONS]
@@ -2006,8 +2006,8 @@ class MaterialOneOfComponent {
         this.options.showErrors = true;
         this.jsf.updateValue(this, event.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialOneOfComponent, deps: [{ token: MAT_FORM_FIELD_DEFAULT_OPTIONS, optional: true }, { token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MaterialOneOfComponent, isStandalone: false, selector: "material-one-of-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialOneOfComponent, deps: [{ token: MAT_FORM_FIELD_DEFAULT_OPTIONS, optional: true }, { token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: MaterialOneOfComponent, isStandalone: false, selector: "material-one-of-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
     <mat-form-field
       [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'fill'"
       [class]="options?.htmlClass || ''"
@@ -2021,14 +2021,14 @@ class MaterialOneOfComponent {
         <mat-select
           [formControl]="formControl"
           [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-          [id]="'control' + layoutNode?._id"
-          [placeholder]="options?.notitle ? options?.placeholder : options?.title"
-          [required]="options?.required"
+          [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
+          [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
+          [required]="$safeNavigationMigration(options?.required)"
           [style.width]="'100%'"
           (blur)="options.showErrors = true">
           @for (item of selectList; track item) {
-            <mat-option [value]="item?.value">
-              <span [innerHTML]="item?.name"></span>
+            <mat-option [value]="$safeNavigationMigration(item?.value)">
+              <span [innerHTML]="$safeNavigationMigration(item?.name)"></span>
             </mat-option>
           }
         </mat-select>
@@ -2037,17 +2037,17 @@ class MaterialOneOfComponent {
       @if (!boundControl && !isFieldset) {
         <mat-select
           [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-          [id]="'control' + layoutNode?._id"
+          [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
           [disabled]="controlDisabled || options?.readonly"
-          [placeholder]="options?.notitle ? options?.placeholder : options?.title"
-          [required]="options?.required"
+          [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
+          [required]="$safeNavigationMigration(options?.required)"
           [style.width]="'100%'"
           [value]="controlValue"
           (selectionChange)="updateValue($event)"
           (blur)="options.showErrors = true">
           @for (item of selectList; track item) {
-            <mat-option [value]="item?.value">
-              <span [innerHTML]="item?.name"></span>
+            <mat-option [value]="$safeNavigationMigration(item?.value)">
+              <span [innerHTML]="$safeNavigationMigration(item?.name)"></span>
             </mat-option>
           }
         </mat-select>
@@ -2056,14 +2056,14 @@ class MaterialOneOfComponent {
       @if (!boundControl && isFieldset) {
         <mat-select
           [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-          [id]="'control' + layoutNode?._id"
+          [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
           [disabled]="controlDisabled || options?.readonly"
           [style.width]="'100%'"
           [value]="selectedValue"
           (selectionChange)="selectChild($event)">
           @for (item of selectList; track item) {
-            <mat-option [value]="item?.value">
-              <span [innerHTML]="item?.name"></span>
+            <mat-option [value]="$safeNavigationMigration(item?.value)">
+              <span [innerHTML]="$safeNavigationMigration(item?.name)"></span>
             </mat-option>
           }
         </mat-select>
@@ -2071,12 +2071,12 @@ class MaterialOneOfComponent {
     
       @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
         <mat-hint
-        align="end" [innerHTML]="options?.description"></mat-hint>
+        align="end" [innerHTML]="$safeNavigationMigration(options?.description)"></mat-hint>
       }
     </mat-form-field>
     @if (options?.showErrors && options?.errorMessage) {
       <mat-error
-      [innerHTML]="options?.errorMessage"></mat-error>
+      [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
     }
     
     @for (layoutItem of layoutNode?.items; track layoutItem; let i = $index) {
@@ -2088,9 +2088,9 @@ class MaterialOneOfComponent {
           [layoutNode]="layoutItem"></select-framework-widget>
         }
       </div>
-    }`, isInline: true, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}\n"], dependencies: [{ kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i1.SelectFrameworkComponent, selector: "select-framework-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }] }); }
+    }`, isInline: true, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}\n"], dependencies: [{ kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i1.SelectFrameworkComponent, selector: "select-framework-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialOneOfComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialOneOfComponent, decorators: [{
             type: Component,
             args: [{ selector: 'material-one-of-widget', template: `
     <mat-form-field
@@ -2106,14 +2106,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         <mat-select
           [formControl]="formControl"
           [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-          [id]="'control' + layoutNode?._id"
-          [placeholder]="options?.notitle ? options?.placeholder : options?.title"
-          [required]="options?.required"
+          [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
+          [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
+          [required]="$safeNavigationMigration(options?.required)"
           [style.width]="'100%'"
           (blur)="options.showErrors = true">
           @for (item of selectList; track item) {
-            <mat-option [value]="item?.value">
-              <span [innerHTML]="item?.name"></span>
+            <mat-option [value]="$safeNavigationMigration(item?.value)">
+              <span [innerHTML]="$safeNavigationMigration(item?.name)"></span>
             </mat-option>
           }
         </mat-select>
@@ -2122,17 +2122,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
       @if (!boundControl && !isFieldset) {
         <mat-select
           [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-          [id]="'control' + layoutNode?._id"
+          [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
           [disabled]="controlDisabled || options?.readonly"
-          [placeholder]="options?.notitle ? options?.placeholder : options?.title"
-          [required]="options?.required"
+          [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
+          [required]="$safeNavigationMigration(options?.required)"
           [style.width]="'100%'"
           [value]="controlValue"
           (selectionChange)="updateValue($event)"
           (blur)="options.showErrors = true">
           @for (item of selectList; track item) {
-            <mat-option [value]="item?.value">
-              <span [innerHTML]="item?.name"></span>
+            <mat-option [value]="$safeNavigationMigration(item?.value)">
+              <span [innerHTML]="$safeNavigationMigration(item?.name)"></span>
             </mat-option>
           }
         </mat-select>
@@ -2141,14 +2141,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
       @if (!boundControl && isFieldset) {
         <mat-select
           [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-          [id]="'control' + layoutNode?._id"
+          [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
           [disabled]="controlDisabled || options?.readonly"
           [style.width]="'100%'"
           [value]="selectedValue"
           (selectionChange)="selectChild($event)">
           @for (item of selectList; track item) {
-            <mat-option [value]="item?.value">
-              <span [innerHTML]="item?.name"></span>
+            <mat-option [value]="$safeNavigationMigration(item?.value)">
+              <span [innerHTML]="$safeNavigationMigration(item?.name)"></span>
             </mat-option>
           }
         </mat-select>
@@ -2156,12 +2156,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
     
       @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
         <mat-hint
-        align="end" [innerHTML]="options?.description"></mat-hint>
+        align="end" [innerHTML]="$safeNavigationMigration(options?.description)"></mat-hint>
       }
     </mat-form-field>
     @if (options?.showErrors && options?.errorMessage) {
       <mat-error
-      [innerHTML]="options?.errorMessage"></mat-error>
+      [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
     }
     
     @for (layoutItem of layoutNode?.items; track layoutItem; let i = $index) {
@@ -2173,7 +2173,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
           [layoutNode]="layoutItem"></select-framework-widget>
         }
       </div>
-    }`, standalone: false, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}\n"] }]
+    }`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_FORM_FIELD_DEFAULT_OPTIONS]
@@ -2207,8 +2207,8 @@ class MaterialRadiosComponent {
         this.options.showErrors = true;
         this.jsf.updateValue(this, value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialRadiosComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MaterialRadiosComponent, isStandalone: false, selector: "material-radios-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialRadiosComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: MaterialRadiosComponent, isStandalone: false, selector: "material-radios-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
     <div>
       @if (options?.title) {
         <div>
@@ -2216,7 +2216,7 @@ class MaterialRadiosComponent {
             [attr.for]="'control' + layoutNode?._id"
             [class]="options?.labelHtmlClass || ''"
             [style.display]="options?.notitle ? 'none' : ''"
-          [innerHTML]="options?.title"></label>
+          [innerHTML]="$safeNavigationMigration(options?.title)"></label>
         </div>
       }
       @if (boundControl) {
@@ -2230,9 +2230,9 @@ class MaterialRadiosComponent {
           (blur)="options.showErrors = true">
           @for (radioItem of radiosList; track radioItem) {
             <mat-radio-button
-              [id]="'control' + layoutNode?._id + '/' + radioItem?.name"
-              [value]="radioItem?.value">
-              <span [innerHTML]="radioItem?.name"></span>
+              [id]="'control' + $safeNavigationMigration(layoutNode?._id) + '/' + $safeNavigationMigration(radioItem?.name)"
+              [value]="$safeNavigationMigration(radioItem?.value)">
+              <span [innerHTML]="$safeNavigationMigration(radioItem?.name)"></span>
             </mat-radio-button>
           }
         </mat-radio-group>
@@ -2248,21 +2248,21 @@ class MaterialRadiosComponent {
           [value]="controlValue">
           @for (radioItem of radiosList; track radioItem) {
             <mat-radio-button
-              [id]="'control' + layoutNode?._id + '/' + radioItem?.name"
-              [value]="radioItem?.value"
-              (click)="updateValue(radioItem?.value)">
-              <span [innerHTML]="radioItem?.name"></span>
+              [id]="'control' + $safeNavigationMigration(layoutNode?._id) + '/' + $safeNavigationMigration(radioItem?.name)"
+              [value]="$safeNavigationMigration(radioItem?.value)"
+              (click)="updateValue($safeNavigationMigration(radioItem?.value))">
+              <span [innerHTML]="$safeNavigationMigration(radioItem?.name)"></span>
             </mat-radio-button>
           }
         </mat-radio-group>
       }
       @if (options?.showErrors && options?.errorMessage) {
         <mat-error
-        [innerHTML]="options?.errorMessage"></mat-error>
+        [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
       }
-    </div>`, isInline: true, styles: ["mat-radio-group{display:inline-flex}mat-radio-button{margin:2px}mat-error{font-size:75%}\n"], dependencies: [{ kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$3.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }] }); }
+    </div>`, isInline: true, styles: ["mat-radio-group{display:inline-flex}mat-radio-button{margin:2px}mat-error{font-size:75%}\n"], dependencies: [{ kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$3.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialRadiosComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialRadiosComponent, decorators: [{
             type: Component,
             args: [{ selector: 'material-radios-widget', template: `
     <div>
@@ -2272,7 +2272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
             [attr.for]="'control' + layoutNode?._id"
             [class]="options?.labelHtmlClass || ''"
             [style.display]="options?.notitle ? 'none' : ''"
-          [innerHTML]="options?.title"></label>
+          [innerHTML]="$safeNavigationMigration(options?.title)"></label>
         </div>
       }
       @if (boundControl) {
@@ -2286,9 +2286,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
           (blur)="options.showErrors = true">
           @for (radioItem of radiosList; track radioItem) {
             <mat-radio-button
-              [id]="'control' + layoutNode?._id + '/' + radioItem?.name"
-              [value]="radioItem?.value">
-              <span [innerHTML]="radioItem?.name"></span>
+              [id]="'control' + $safeNavigationMigration(layoutNode?._id) + '/' + $safeNavigationMigration(radioItem?.name)"
+              [value]="$safeNavigationMigration(radioItem?.value)">
+              <span [innerHTML]="$safeNavigationMigration(radioItem?.name)"></span>
             </mat-radio-button>
           }
         </mat-radio-group>
@@ -2304,19 +2304,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
           [value]="controlValue">
           @for (radioItem of radiosList; track radioItem) {
             <mat-radio-button
-              [id]="'control' + layoutNode?._id + '/' + radioItem?.name"
-              [value]="radioItem?.value"
-              (click)="updateValue(radioItem?.value)">
-              <span [innerHTML]="radioItem?.name"></span>
+              [id]="'control' + $safeNavigationMigration(layoutNode?._id) + '/' + $safeNavigationMigration(radioItem?.name)"
+              [value]="$safeNavigationMigration(radioItem?.value)"
+              (click)="updateValue($safeNavigationMigration(radioItem?.value))">
+              <span [innerHTML]="$safeNavigationMigration(radioItem?.name)"></span>
             </mat-radio-button>
           }
         </mat-radio-group>
       }
       @if (options?.showErrors && options?.errorMessage) {
         <mat-error
-        [innerHTML]="options?.errorMessage"></mat-error>
+        [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
       }
-    </div>`, standalone: false, styles: ["mat-radio-group{display:inline-flex}mat-radio-button{margin:2px}mat-error{font-size:75%}\n"] }]
+    </div>`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: ["mat-radio-group{display:inline-flex}mat-radio-button{margin:2px}mat-error{font-size:75%}\n"] }]
         }], ctorParameters: () => [{ type: i1.JsonSchemaFormService }], propDecorators: { layoutNode: [{
                 type: Input
             }], layoutIndex: [{
@@ -2346,8 +2346,8 @@ class MaterialSelectComponent {
         this.options.showErrors = true;
         this.jsf.updateValue(this, event.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialSelectComponent, deps: [{ token: MAT_FORM_FIELD_DEFAULT_OPTIONS, optional: true }, { token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MaterialSelectComponent, isStandalone: false, selector: "material-select-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialSelectComponent, deps: [{ token: MAT_FORM_FIELD_DEFAULT_OPTIONS, optional: true }, { token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: MaterialSelectComponent, isStandalone: false, selector: "material-select-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
     <mat-form-field
       [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'fill'"
       [class]="options?.htmlClass || ''"
@@ -2366,26 +2366,26 @@ class MaterialSelectComponent {
           [formControl]="formControl"
           [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
           [attr.name]="controlName"
-          [id]="'control' + layoutNode?._id"
-          [multiple]="options?.multiple"
-          [placeholder]="options?.notitle ? options?.placeholder : options?.title"
-          [required]="options?.required"
+          [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
+          [multiple]="$safeNavigationMigration(options?.multiple)"
+          [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
+          [required]="$safeNavigationMigration(options?.required)"
           [style.width]="'100%'"
           (blur)="options.showErrors = true">
           @for (selectItem of selectList; track selectItem) {
-            @if (!isArray(selectItem?.items)) {
+            @if (!isArray($safeNavigationMigration(selectItem?.items))) {
               <mat-option
-                [value]="selectItem?.value">
-                <span [innerHTML]="selectItem?.name"></span>
+                [value]="$safeNavigationMigration(selectItem?.value)">
+                <span [innerHTML]="$safeNavigationMigration(selectItem?.name)"></span>
               </mat-option>
             }
-            @if (isArray(selectItem?.items)) {
+            @if (isArray($safeNavigationMigration(selectItem?.items))) {
               <mat-optgroup
-                [label]="selectItem?.group">
+                [label]="$safeNavigationMigration(selectItem?.group)">
                 @for (subItem of selectItem.items; track subItem) {
                   <mat-option
-                    [value]="subItem?.value">
-                    <span [innerHTML]="subItem?.name"></span>
+                    [value]="$safeNavigationMigration(subItem?.value)">
+                    <span [innerHTML]="$safeNavigationMigration(subItem?.name)"></span>
                   </mat-option>
                 }
               </mat-optgroup>
@@ -2398,30 +2398,30 @@ class MaterialSelectComponent {
           [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
           [attr.name]="controlName"
           [disabled]="controlDisabled || options?.readonly"
-          [id]="'control' + layoutNode?._id"
-          [multiple]="options?.multiple"
-          [placeholder]="options?.notitle ? options?.placeholder : options?.title"
-          [required]="options?.required"
+          [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
+          [multiple]="$safeNavigationMigration(options?.multiple)"
+          [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
+          [required]="$safeNavigationMigration(options?.required)"
           [style.width]="'100%'"
           [value]="controlValue"
           (blur)="options.showErrors = true"
           (change)="updateValue($event)">
           @for (selectItem of selectList; track selectItem) {
-            @if (!isArray(selectItem?.items)) {
+            @if (!isArray($safeNavigationMigration(selectItem?.items))) {
               <mat-option
                 [attr.selected]="selectItem?.value === controlValue"
-                [value]="selectItem?.value">
-                <span [innerHTML]="selectItem?.name"></span>
+                [value]="$safeNavigationMigration(selectItem?.value)">
+                <span [innerHTML]="$safeNavigationMigration(selectItem?.name)"></span>
               </mat-option>
             }
-            @if (isArray(selectItem?.items)) {
+            @if (isArray($safeNavigationMigration(selectItem?.items))) {
               <mat-optgroup
-                [label]="selectItem?.group">
+                [label]="$safeNavigationMigration(selectItem?.group)">
                 @for (subItem of selectItem.items; track subItem) {
                   <mat-option
                     [attr.selected]="subItem?.value === controlValue"
-                    [value]="subItem?.value">
-                    <span [innerHTML]="subItem?.name"></span>
+                    [value]="$safeNavigationMigration(subItem?.value)">
+                    <span [innerHTML]="$safeNavigationMigration(subItem?.name)"></span>
                   </mat-option>
                 }
               </mat-optgroup>
@@ -2435,15 +2435,15 @@ class MaterialSelectComponent {
       }
       @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
         <mat-hint
-        align="end" [innerHTML]="options?.description"></mat-hint>
+        align="end" [innerHTML]="$safeNavigationMigration(options?.description)"></mat-hint>
       }
     </mat-form-field>
     @if (options?.showErrors && options?.errorMessage) {
       <mat-error
-      [innerHTML]="options?.errorMessage"></mat-error>
-    }`, isInline: true, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}::ng-deep json-schema-form mat-form-field .mat-mdc-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{width:initial}\n"], dependencies: [{ kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3$3.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }] }); }
+      [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
+    }`, isInline: true, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}::ng-deep json-schema-form mat-form-field .mat-mdc-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{width:initial}\n"], dependencies: [{ kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3$3.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'material-select-widget', template: `
     <mat-form-field
@@ -2464,26 +2464,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
           [formControl]="formControl"
           [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
           [attr.name]="controlName"
-          [id]="'control' + layoutNode?._id"
-          [multiple]="options?.multiple"
-          [placeholder]="options?.notitle ? options?.placeholder : options?.title"
-          [required]="options?.required"
+          [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
+          [multiple]="$safeNavigationMigration(options?.multiple)"
+          [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
+          [required]="$safeNavigationMigration(options?.required)"
           [style.width]="'100%'"
           (blur)="options.showErrors = true">
           @for (selectItem of selectList; track selectItem) {
-            @if (!isArray(selectItem?.items)) {
+            @if (!isArray($safeNavigationMigration(selectItem?.items))) {
               <mat-option
-                [value]="selectItem?.value">
-                <span [innerHTML]="selectItem?.name"></span>
+                [value]="$safeNavigationMigration(selectItem?.value)">
+                <span [innerHTML]="$safeNavigationMigration(selectItem?.name)"></span>
               </mat-option>
             }
-            @if (isArray(selectItem?.items)) {
+            @if (isArray($safeNavigationMigration(selectItem?.items))) {
               <mat-optgroup
-                [label]="selectItem?.group">
+                [label]="$safeNavigationMigration(selectItem?.group)">
                 @for (subItem of selectItem.items; track subItem) {
                   <mat-option
-                    [value]="subItem?.value">
-                    <span [innerHTML]="subItem?.name"></span>
+                    [value]="$safeNavigationMigration(subItem?.value)">
+                    <span [innerHTML]="$safeNavigationMigration(subItem?.name)"></span>
                   </mat-option>
                 }
               </mat-optgroup>
@@ -2496,30 +2496,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
           [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
           [attr.name]="controlName"
           [disabled]="controlDisabled || options?.readonly"
-          [id]="'control' + layoutNode?._id"
-          [multiple]="options?.multiple"
-          [placeholder]="options?.notitle ? options?.placeholder : options?.title"
-          [required]="options?.required"
+          [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
+          [multiple]="$safeNavigationMigration(options?.multiple)"
+          [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
+          [required]="$safeNavigationMigration(options?.required)"
           [style.width]="'100%'"
           [value]="controlValue"
           (blur)="options.showErrors = true"
           (change)="updateValue($event)">
           @for (selectItem of selectList; track selectItem) {
-            @if (!isArray(selectItem?.items)) {
+            @if (!isArray($safeNavigationMigration(selectItem?.items))) {
               <mat-option
                 [attr.selected]="selectItem?.value === controlValue"
-                [value]="selectItem?.value">
-                <span [innerHTML]="selectItem?.name"></span>
+                [value]="$safeNavigationMigration(selectItem?.value)">
+                <span [innerHTML]="$safeNavigationMigration(selectItem?.name)"></span>
               </mat-option>
             }
-            @if (isArray(selectItem?.items)) {
+            @if (isArray($safeNavigationMigration(selectItem?.items))) {
               <mat-optgroup
-                [label]="selectItem?.group">
+                [label]="$safeNavigationMigration(selectItem?.group)">
                 @for (subItem of selectItem.items; track subItem) {
                   <mat-option
                     [attr.selected]="subItem?.value === controlValue"
-                    [value]="subItem?.value">
-                    <span [innerHTML]="subItem?.name"></span>
+                    [value]="$safeNavigationMigration(subItem?.value)">
+                    <span [innerHTML]="$safeNavigationMigration(subItem?.name)"></span>
                   </mat-option>
                 }
               </mat-optgroup>
@@ -2533,13 +2533,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
       }
       @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
         <mat-hint
-        align="end" [innerHTML]="options?.description"></mat-hint>
+        align="end" [innerHTML]="$safeNavigationMigration(options?.description)"></mat-hint>
       }
     </mat-form-field>
     @if (options?.showErrors && options?.errorMessage) {
       <mat-error
-      [innerHTML]="options?.errorMessage"></mat-error>
-    }`, standalone: false, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}::ng-deep json-schema-form mat-form-field .mat-mdc-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{width:initial}\n"] }]
+      [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
+    }`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}::ng-deep json-schema-form mat-form-field .mat-mdc-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{width:initial}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_FORM_FIELD_DEFAULT_OPTIONS]
@@ -2573,12 +2573,12 @@ class MaterialSliderComponent {
         this.options.showErrors = true;
         this.jsf.updateValue(this, event.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialSliderComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MaterialSliderComponent, isStandalone: false, selector: "material-slider-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialSliderComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: MaterialSliderComponent, isStandalone: false, selector: "material-slider-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
     @if (boundControl) {
       <mat-slider discrete
         [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
         [max]="maxValue"
         [min]="minValue"
         [step]="options?.multipleOf || options?.step || 'any'"
@@ -2589,7 +2589,7 @@ class MaterialSliderComponent {
       <mat-slider discrete
         [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
         [disabled]="controlDisabled || options?.readonly"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
         [max]="maxValue"
         [min]="minValue"
         [step]="options?.multipleOf || options?.step || 'any'"
@@ -2598,16 +2598,16 @@ class MaterialSliderComponent {
     }
     @if (options?.showErrors && options?.errorMessage) {
       <mat-error
-      [innerHTML]="options?.errorMessage"></mat-error>
-    }`, isInline: true, styles: ["mat-error{font-size:75%}\n"], dependencies: [{ kind: "directive", type: i2$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4$4.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i4$4.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }] }); }
+      [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
+    }`, isInline: true, styles: ["mat-error{font-size:75%}\n"], dependencies: [{ kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4$4.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i4$4.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialSliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialSliderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'material-slider-widget', template: `
     @if (boundControl) {
       <mat-slider discrete
         [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
         [max]="maxValue"
         [min]="minValue"
         [step]="options?.multipleOf || options?.step || 'any'"
@@ -2618,7 +2618,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
       <mat-slider discrete
         [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
         [disabled]="controlDisabled || options?.readonly"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
         [max]="maxValue"
         [min]="minValue"
         [step]="options?.multipleOf || options?.step || 'any'"
@@ -2627,8 +2627,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
     }
     @if (options?.showErrors && options?.errorMessage) {
       <mat-error
-      [innerHTML]="options?.errorMessage"></mat-error>
-    }`, standalone: false, styles: ["mat-error{font-size:75%}\n"] }]
+      [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
+    }`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: ["mat-error{font-size:75%}\n"] }]
         }], ctorParameters: () => [{ type: i1.JsonSchemaFormService }], propDecorators: { layoutNode: [{
                 type: Input
             }], layoutIndex: [{
@@ -2687,8 +2687,8 @@ class MaterialStepperComponent {
     setStepTitle(item, index) {
         return this.jsf.setArrayItemTitle(this, item, index);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialStepperComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MaterialStepperComponent, isStandalone: false, selector: "material-stepper-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialStepperComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: MaterialStepperComponent, isStandalone: false, selector: "material-stepper-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
     <mat-stepper
       [selectedIndex]="selectedItem"
       [linear]="options?.linear || false"
@@ -2717,9 +2717,9 @@ class MaterialStepperComponent {
           </mat-step>
         }
       }
-    </mat-stepper>`, isInline: true, dependencies: [{ kind: "component", type: i2$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$4.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i3$4.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i3$4.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "aria-label", "headerPrefix", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i3$4.MatStepperNext, selector: "button[matStepperNext]" }, { kind: "directive", type: i3$4.MatStepperPrevious, selector: "button[matStepperPrevious]" }, { kind: "directive", type: i3$4.MatStepContent, selector: "ng-template[matStepContent]" }, { kind: "component", type: i1.SelectFrameworkComponent, selector: "select-framework-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }] }); }
+    </mat-stepper>`, isInline: true, dependencies: [{ kind: "component", type: i2$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$4.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i3$4.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i3$4.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "aria-label", "headerPrefix", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i3$4.MatStepperNext, selector: "button[matStepperNext]" }, { kind: "directive", type: i3$4.MatStepperPrevious, selector: "button[matStepperPrevious]" }, { kind: "directive", type: i3$4.MatStepContent, selector: "ng-template[matStepContent]" }, { kind: "component", type: i1.SelectFrameworkComponent, selector: "select-framework-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialStepperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialStepperComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'material-stepper-widget',
@@ -2753,6 +2753,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         }
       }
     </mat-stepper>`,
+                    changeDetection: ChangeDetectionStrategy.Eager,
                     standalone: false
                 }]
         }], ctorParameters: () => [{ type: i1.JsonSchemaFormService }], propDecorators: { layoutNode: [{
@@ -2794,8 +2795,8 @@ class MaterialTabsComponent {
     setTabTitle(item, index) {
         return this.jsf.setArrayItemTitle(this, item, index);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialTabsComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MaterialTabsComponent, isStandalone: false, selector: "material-tabs-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialTabsComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: MaterialTabsComponent, isStandalone: false, selector: "material-tabs-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
     <nav mat-tab-nav-bar
       [attr.aria-label]="options?.label || options?.title || ''"
       [tabPanel]="tabPanel"
@@ -2826,9 +2827,9 @@ class MaterialTabsComponent {
           }
         </div>
       }
-    </div>`, isInline: true, styles: ["a{cursor:pointer}\n"], dependencies: [{ kind: "component", type: i2$5.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i2$5.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i1.SelectFrameworkComponent, selector: "select-framework-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }] }); }
+    </div>`, isInline: true, styles: ["a{cursor:pointer}\n"], dependencies: [{ kind: "component", type: i2$5.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i2$5.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i1.SelectFrameworkComponent, selector: "select-framework-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'material-tabs-widget', template: `
     <nav mat-tab-nav-bar
@@ -2861,7 +2862,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
           }
         </div>
       }
-    </div>`, standalone: false, styles: ["a{cursor:pointer}\n"] }]
+    </div>`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: ["a{cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: i1.JsonSchemaFormService }], propDecorators: { layoutNode: [{
                 type: Input
             }], layoutIndex: [{
@@ -2887,8 +2888,8 @@ class MaterialTextareaComponent {
     updateValue(event) {
         this.jsf.updateValue(this, event.target.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialTextareaComponent, deps: [{ token: MAT_FORM_FIELD_DEFAULT_OPTIONS, optional: true }, { token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MaterialTextareaComponent, isStandalone: false, selector: "material-textarea-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialTextareaComponent, deps: [{ token: MAT_FORM_FIELD_DEFAULT_OPTIONS, optional: true }, { token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: MaterialTextareaComponent, isStandalone: false, selector: "material-textarea-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
     <mat-form-field [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'fill'"
       [class]="options?.htmlClass || ''"
       [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || 'auto'"
@@ -2909,10 +2910,10 @@ class MaterialTextareaComponent {
           [attr.maxlength]="options?.maxLength"
           [attr.minlength]="options?.minLength"
           [attr.pattern]="options?.pattern"
-          [required]="options?.required"
-          [id]="'control' + layoutNode?._id"
+          [required]="$safeNavigationMigration(options?.required)"
+          [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
           [name]="controlName"
-          [placeholder]="options?.notitle ? options?.placeholder : options?.title"
+          [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
           [readonly]="options?.readonly ? 'readonly' : null"
           [style.width]="'100%'"
         (blur)="options.showErrors = true"></textarea>
@@ -2924,11 +2925,11 @@ class MaterialTextareaComponent {
           [attr.maxlength]="options?.maxLength"
           [attr.minlength]="options?.minLength"
           [attr.pattern]="options?.pattern"
-          [required]="options?.required"
+          [required]="$safeNavigationMigration(options?.required)"
           [disabled]="controlDisabled"
-          [id]="'control' + layoutNode?._id"
+          [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
           [name]="controlName"
-          [placeholder]="options?.notitle ? options?.placeholder : options?.title"
+          [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
           [readonly]="options?.readonly ? 'readonly' : null"
           [style.width]="'100%'"
           [value]="controlValue"
@@ -2941,15 +2942,15 @@ class MaterialTextareaComponent {
       }
       @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
         <mat-hint
-        align="end" [innerHTML]="options?.description"></mat-hint>
+        align="end" [innerHTML]="$safeNavigationMigration(options?.description)"></mat-hint>
       }
     </mat-form-field>
     @if (options?.showErrors && options?.errorMessage) {
       <mat-error
-      [innerHTML]="options?.errorMessage"></mat-error>
-    }`, isInline: true, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}::ng-deep json-schema-form mat-form-field .mat-mdc-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{width:initial}\n"], dependencies: [{ kind: "directive", type: i2$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] }); }
+      [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
+    }`, isInline: true, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}::ng-deep json-schema-form mat-form-field .mat-mdc-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{width:initial}\n"], dependencies: [{ kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialTextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialTextareaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'material-textarea-widget', template: `
     <mat-form-field [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'fill'"
@@ -2972,10 +2973,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
           [attr.maxlength]="options?.maxLength"
           [attr.minlength]="options?.minLength"
           [attr.pattern]="options?.pattern"
-          [required]="options?.required"
-          [id]="'control' + layoutNode?._id"
+          [required]="$safeNavigationMigration(options?.required)"
+          [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
           [name]="controlName"
-          [placeholder]="options?.notitle ? options?.placeholder : options?.title"
+          [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
           [readonly]="options?.readonly ? 'readonly' : null"
           [style.width]="'100%'"
         (blur)="options.showErrors = true"></textarea>
@@ -2987,11 +2988,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
           [attr.maxlength]="options?.maxLength"
           [attr.minlength]="options?.minLength"
           [attr.pattern]="options?.pattern"
-          [required]="options?.required"
+          [required]="$safeNavigationMigration(options?.required)"
           [disabled]="controlDisabled"
-          [id]="'control' + layoutNode?._id"
+          [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
           [name]="controlName"
-          [placeholder]="options?.notitle ? options?.placeholder : options?.title"
+          [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
           [readonly]="options?.readonly ? 'readonly' : null"
           [style.width]="'100%'"
           [value]="controlValue"
@@ -3004,13 +3005,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
       }
       @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
         <mat-hint
-        align="end" [innerHTML]="options?.description"></mat-hint>
+        align="end" [innerHTML]="$safeNavigationMigration(options?.description)"></mat-hint>
       }
     </mat-form-field>
     @if (options?.showErrors && options?.errorMessage) {
       <mat-error
-      [innerHTML]="options?.errorMessage"></mat-error>
-    }`, standalone: false, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}::ng-deep json-schema-form mat-form-field .mat-mdc-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{width:initial}\n"] }]
+      [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
+    }`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}::ng-deep json-schema-form mat-form-field .mat-mdc-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{width:initial}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_FORM_FIELD_DEFAULT_OPTIONS]
@@ -3082,10 +3083,10 @@ class MaterialDesignFramework extends Framework {
             'wizard': 'stepper',
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialDesignFramework, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialDesignFramework }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialDesignFramework, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialDesignFramework }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialDesignFramework, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialDesignFramework, decorators: [{
             type: Injectable
         }] });
 
@@ -3105,8 +3106,8 @@ const ANGULAR_MATERIAL_MODULES = [
     MatToolbarModule, MatMenuModule, MatToolbarModule,
 ];
 class MaterialDesignFrameworkModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialDesignFrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: MaterialDesignFrameworkModule, declarations: [FlexLayoutRootComponent, FlexLayoutSectionComponent, MaterialAddReferenceComponent, MaterialOneOfComponent, MaterialButtonComponent, MaterialButtonGroupComponent, MaterialCheckboxComponent, MaterialCheckboxesComponent, MaterialChipListComponent, MaterialDatepickerComponent, MaterialFileComponent, MaterialInputComponent, MaterialNumberComponent, MaterialRadiosComponent, MaterialSelectComponent, MaterialSliderComponent, MaterialStepperComponent, MaterialTabsComponent, MaterialTextareaComponent, MaterialDesignFrameworkComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialDesignFrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: MaterialDesignFrameworkModule, declarations: [FlexLayoutRootComponent, FlexLayoutSectionComponent, MaterialAddReferenceComponent, MaterialOneOfComponent, MaterialButtonComponent, MaterialButtonGroupComponent, MaterialCheckboxComponent, MaterialCheckboxesComponent, MaterialChipListComponent, MaterialDatepickerComponent, MaterialFileComponent, MaterialInputComponent, MaterialNumberComponent, MaterialRadiosComponent, MaterialSelectComponent, MaterialSliderComponent, MaterialStepperComponent, MaterialTabsComponent, MaterialTextareaComponent, MaterialDesignFrameworkComponent], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule, MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule,
             MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatExpansionModule,
@@ -3115,7 +3116,7 @@ class MaterialDesignFrameworkModule {
             MatStepperModule, MatTabsModule, MatTooltipModule,
             MatToolbarModule, MatMenuModule, MatToolbarModule, WidgetLibraryModule,
             JsonSchemaFormModule], exports: [JsonSchemaFormModule, FlexLayoutRootComponent, FlexLayoutSectionComponent, MaterialAddReferenceComponent, MaterialOneOfComponent, MaterialButtonComponent, MaterialButtonGroupComponent, MaterialCheckboxComponent, MaterialCheckboxesComponent, MaterialChipListComponent, MaterialDatepickerComponent, MaterialFileComponent, MaterialInputComponent, MaterialNumberComponent, MaterialRadiosComponent, MaterialSelectComponent, MaterialSliderComponent, MaterialStepperComponent, MaterialTabsComponent, MaterialTextareaComponent, MaterialDesignFrameworkComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialDesignFrameworkModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialDesignFrameworkModule, providers: [
             JsonSchemaFormService,
             FrameworkLibraryService,
             WidgetLibraryService,
@@ -3125,7 +3126,7 @@ class MaterialDesignFrameworkModule {
             ReactiveFormsModule, ANGULAR_MATERIAL_MODULES, WidgetLibraryModule,
             JsonSchemaFormModule, JsonSchemaFormModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MaterialDesignFrameworkModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialDesignFrameworkModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [