@ajsf/material 20.1.0 → 22.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/ajsf-material.mjs +1771 -1302
  2. package/fesm2022/ajsf-material.mjs.map +1 -1
  3. package/package.json +11 -10
  4. package/{index.d.ts → types/ajsf-material.d.ts} +1 -1
package/fesm2022/ajsf-material.mjs CHANGED
@@ -8,38 +8,38 @@ import * as i3 from '@angular/material/card';
8
8
  import { MatCardModule } from '@angular/material/card';
9
9
  import * as i4 from '@angular/material/expansion';
10
10
  import { MatExpansionModule } from '@angular/material/expansion';
11
- import * as i5 from '@angular/material/form-field';
11
+ import * as i4$1 from '@angular/material/form-field';
12
12
  import { MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormFieldModule } from '@angular/material/form-field';
13
- import * as i3$1 from '@angular/material/button';
13
+ import * as i2$1 from '@angular/material/button';
14
14
  import { MatButtonModule } from '@angular/material/button';
15
- import * as i5$1 from '@angular/material/icon';
15
+ import * as i4$2 from '@angular/material/icon';
16
16
  import { MatIconModule } from '@angular/material/icon';
17
- import * as i3$2 from '@angular/material/button-toggle';
17
+ import * as i2$2 from '@angular/material/button-toggle';
18
18
  import { MatButtonToggleModule } from '@angular/material/button-toggle';
19
- import * as i3$3 from '@angular/forms';
19
+ import * as i2$3 from '@angular/forms';
20
20
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
21
- import * as i4$1 from '@angular/material/checkbox';
21
+ import * as i3$1 from '@angular/material/checkbox';
22
22
  import { MatCheckboxModule } from '@angular/material/checkbox';
23
- import * as i6 from '@angular/material/slide-toggle';
23
+ import * as i5 from '@angular/material/slide-toggle';
24
24
  import { MatSlideToggleModule } from '@angular/material/slide-toggle';
25
25
  import { ENTER, COMMA } from '@angular/cdk/keycodes';
26
- import * as i3$4 from '@angular/material/chips';
26
+ import * as i2$4 from '@angular/material/chips';
27
27
  import { MatChipsModule } from '@angular/material/chips';
28
- import * as i4$2 from '@angular/material/datepicker';
28
+ import * as i3$2 from '@angular/material/datepicker';
29
29
  import { MatDatepickerModule } from '@angular/material/datepicker';
30
- import * as i6$1 from '@angular/material/input';
30
+ import * as i5$1 from '@angular/material/input';
31
31
  import { MatInputModule } from '@angular/material/input';
32
- import * as i4$3 from '@angular/material/autocomplete';
32
+ import * as i3$3 from '@angular/material/autocomplete';
33
33
  import { MatAutocompleteModule } from '@angular/material/autocomplete';
34
- import * as i6$2 from '@angular/material/select';
34
+ import * as i5$2 from '@angular/material/select';
35
35
  import { MatSelectModule } from '@angular/material/select';
36
- import * as i5$2 from '@angular/material/radio';
36
+ import * as i4$3 from '@angular/material/radio';
37
37
  import { MatRadioModule } from '@angular/material/radio';
38
- import * as i5$3 from '@angular/material/slider';
38
+ import * as i4$4 from '@angular/material/slider';
39
39
  import { MatSliderModule } from '@angular/material/slider';
40
- import * as i4$4 from '@angular/material/stepper';
40
+ import * as i3$4 from '@angular/material/stepper';
41
41
  import { MatStepperModule } from '@angular/material/stepper';
42
- import * as i3$5 from '@angular/material/tabs';
42
+ import * as i2$5 from '@angular/material/tabs';
43
43
  import { MatTabsModule } from '@angular/material/tabs';
44
44
  import { MatNativeDateModule } from '@angular/material/core';
45
45
  import { MatTooltipModule } from '@angular/material/tooltip';
@@ -91,43 +91,51 @@ class FlexLayoutRootComponent {
91
91
  showWidget(layoutNode) {
92
92
  return this.jsf.evaluateCondition(layoutNode, this.dataIndex);
93
93
  }
94
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: FlexLayoutRootComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
95
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: FlexLayoutRootComponent, isStandalone: false, selector: "flex-layout-root-widget", inputs: { dataIndex: "dataIndex", layoutIndex: "layoutIndex", layout: "layout", isFlexItem: "isFlexItem" }, ngImport: i0, template: `
96
- <div *ngFor="let layoutNode of layout; let i = index"
97
- [class.form-flex-item]="isFlexItem"
98
- [style.flex-grow]="getFlexAttribute(layoutNode, 'flex-grow')"
99
- [style.flex-shrink]="getFlexAttribute(layoutNode, 'flex-shrink')"
100
- [style.flex-basis]="getFlexBasis(layoutNode)"
101
- [style.align-self]="getAlignSelf(layoutNode)"
102
- [style.order]="getOrder(layoutNode)"
103
- [style.max-width]="getMaxWidth(layoutNode)"
104
- [style.margin-left]="getOffset(layoutNode)">
105
- <select-framework-widget *ngIf="showWidget(layoutNode)"
106
- [dataIndex]="layoutNode?.arrayItem ? (dataIndex || []).concat(i) : (dataIndex || [])"
107
- [layoutIndex]="(layoutIndex || []).concat(i)"
108
- [layoutNode]="layoutNode"></select-framework-widget>
109
- </div>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.SelectFrameworkComponent, selector: "select-framework-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
94
+ 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 }); }
95
+ 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: `
96
+ @for (layoutNode of layout; track layoutNode; let i = $index) {
97
+ <div
98
+ [class.form-flex-item]="isFlexItem"
99
+ [style.flex-grow]="getFlexAttribute(layoutNode, 'flex-grow')"
100
+ [style.flex-shrink]="getFlexAttribute(layoutNode, 'flex-shrink')"
101
+ [style.flex-basis]="getFlexBasis(layoutNode)"
102
+ [style.align-self]="getAlignSelf(layoutNode)"
103
+ [style.order]="getOrder(layoutNode)"
104
+ [style.max-width]="getMaxWidth(layoutNode)"
105
+ [style.margin-left]="getOffset(layoutNode)">
106
+ @if (showWidget(layoutNode)) {
107
+ <select-framework-widget
108
+ [dataIndex]="layoutNode?.arrayItem ? (dataIndex || []).concat(i) : (dataIndex || [])"
109
+ [layoutIndex]="(layoutIndex || []).concat(i)"
110
+ [layoutNode]="layoutNode"></select-framework-widget>
111
+ }
112
+ </div>
113
+ }`, isInline: true, dependencies: [{ kind: "component", type: i1.SelectFrameworkComponent, selector: "select-framework-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
110
114
  }
111
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: FlexLayoutRootComponent, decorators: [{
115
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FlexLayoutRootComponent, decorators: [{
112
116
  type: Component,
113
117
  args: [{
114
118
  selector: 'flex-layout-root-widget',
115
119
  template: `
116
- <div *ngFor="let layoutNode of layout; let i = index"
117
- [class.form-flex-item]="isFlexItem"
118
- [style.flex-grow]="getFlexAttribute(layoutNode, 'flex-grow')"
119
- [style.flex-shrink]="getFlexAttribute(layoutNode, 'flex-shrink')"
120
- [style.flex-basis]="getFlexBasis(layoutNode)"
121
- [style.align-self]="getAlignSelf(layoutNode)"
122
- [style.order]="getOrder(layoutNode)"
123
- [style.max-width]="getMaxWidth(layoutNode)"
124
- [style.margin-left]="getOffset(layoutNode)">
125
- <select-framework-widget *ngIf="showWidget(layoutNode)"
126
- [dataIndex]="layoutNode?.arrayItem ? (dataIndex || []).concat(i) : (dataIndex || [])"
127
- [layoutIndex]="(layoutIndex || []).concat(i)"
128
- [layoutNode]="layoutNode"></select-framework-widget>
129
- </div>`,
130
- changeDetection: ChangeDetectionStrategy.Default,
120
+ @for (layoutNode of layout; track layoutNode; let i = $index) {
121
+ <div
122
+ [class.form-flex-item]="isFlexItem"
123
+ [style.flex-grow]="getFlexAttribute(layoutNode, 'flex-grow')"
124
+ [style.flex-shrink]="getFlexAttribute(layoutNode, 'flex-shrink')"
125
+ [style.flex-basis]="getFlexBasis(layoutNode)"
126
+ [style.align-self]="getAlignSelf(layoutNode)"
127
+ [style.order]="getOrder(layoutNode)"
128
+ [style.max-width]="getMaxWidth(layoutNode)"
129
+ [style.margin-left]="getOffset(layoutNode)">
130
+ @if (showWidget(layoutNode)) {
131
+ <select-framework-widget
132
+ [dataIndex]="layoutNode?.arrayItem ? (dataIndex || []).concat(i) : (dataIndex || [])"
133
+ [layoutIndex]="(layoutIndex || []).concat(i)"
134
+ [layoutNode]="layoutNode"></select-framework-widget>
135
+ }
136
+ </div>
137
+ }`,
138
+ changeDetection: ChangeDetectionStrategy.Eager,
131
139
  standalone: false
132
140
  }]
133
141
  }], ctorParameters: () => [{ type: i1.JsonSchemaFormService }], propDecorators: { dataIndex: [{
@@ -225,78 +233,21 @@ class FlexLayoutSectionComponent {
225
233
  return this.options[attribute];
226
234
  }
227
235
  }
228
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: FlexLayoutSectionComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
229
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: FlexLayoutSectionComponent, isStandalone: false, selector: "flex-layout-section-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
230
- <div *ngIf="containerType === 'div'"
231
- [class]="options?.htmlClass || ''"
232
- [class.expandable]="options?.expandable && !expanded"
233
- [class.expanded]="options?.expandable && expanded">
234
- <label *ngIf="sectionTitle"
235
- [class]="'legend ' + (options?.labelHtmlClass || '')"
236
- [innerHTML]="sectionTitle"
237
- (click)="toggleExpanded()"></label>
238
- <flex-layout-root-widget *ngIf="expanded"
239
- [layout]="layoutNode.items"
240
- [dataIndex]="dataIndex"
241
- [layoutIndex]="layoutIndex"
242
- [isFlexItem]="getFlexAttribute('is-flex')"
243
- [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
244
- [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
245
- [style.display]="getFlexAttribute('display')"
246
- [style.flex-direction]="getFlexAttribute('flex-direction')"
247
- [style.flex-wrap]="getFlexAttribute('flex-wrap')"
248
- [style.justify-content]="getFlexAttribute('justify-content')"
249
- [style.align-items]="getFlexAttribute('align-items')"
250
- [style.align-content]="getFlexAttribute('align-content')"
251
- [style.gap]="options?.fxLayoutGap"
252
- [style.justify-content]="getJustifyContent()"
253
- [style.align-items]="getAlignItems()"></flex-layout-root-widget>
254
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
255
- [innerHTML]="options?.errorMessage"></mat-error>
256
- </div>
257
-
258
- <fieldset *ngIf="containerType === 'fieldset'"
259
- [class]="options?.htmlClass || ''"
260
- [class.expandable]="options?.expandable && !expanded"
261
- [class.expanded]="options?.expandable && expanded"
262
- [disabled]="options?.readonly">
263
- <legend *ngIf="sectionTitle"
264
- [class]="'legend ' + (options?.labelHtmlClass || '')"
265
- [innerHTML]="sectionTitle"
266
- (click)="toggleExpanded()"></legend>
267
- <flex-layout-root-widget *ngIf="expanded"
268
- [layout]="layoutNode.items"
269
- [dataIndex]="dataIndex"
270
- [layoutIndex]="layoutIndex"
271
- [isFlexItem]="getFlexAttribute('is-flex')"
272
- [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
273
- [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
274
- [style.display]="getFlexAttribute('display')"
275
- [style.flex-direction]="getFlexAttribute('flex-direction')"
276
- [style.flex-wrap]="getFlexAttribute('flex-wrap')"
277
- [style.justify-content]="getFlexAttribute('justify-content')"
278
- [style.align-items]="getFlexAttribute('align-items')"
279
- [style.align-content]="getFlexAttribute('align-content')"
280
- [style.gap]="options?.fxLayoutGap"
281
- [style.justify-content]="getJustifyContent()"
282
- [style.align-items]="getAlignItems()"></flex-layout-root-widget>
283
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
284
- [innerHTML]="options?.errorMessage"></mat-error>
285
- </fieldset>
286
-
287
- <mat-card appearance="outlined" *ngIf="containerType === 'card'"
288
- [ngClass]="options?.htmlClass || ''"
289
- [class.expandable]="options?.expandable && !expanded"
290
- [class.expanded]="options?.expandable && expanded">
291
- <mat-card-header *ngIf="sectionTitle">
292
- <legend
293
- [class]="'legend ' + (options?.labelHtmlClass || '')"
294
- [innerHTML]="sectionTitle"
295
- (click)="toggleExpanded()"></legend>
296
- </mat-card-header>
297
- <mat-card-content *ngIf="expanded">
298
- <fieldset [disabled]="options?.readonly">
299
- <flex-layout-root-widget *ngIf="expanded"
236
+ 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 }); }
237
+ 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: `
238
+ @if (containerType === 'div') {
239
+ <div
240
+ [class]="options?.htmlClass || ''"
241
+ [class.expandable]="options?.expandable && !expanded"
242
+ [class.expanded]="options?.expandable && expanded">
243
+ @if (sectionTitle) {
244
+ <label
245
+ [class]="'legend ' + (options?.labelHtmlClass || '')"
246
+ [innerHTML]="sectionTitle"
247
+ (click)="toggleExpanded()"></label>
248
+ }
249
+ @if (expanded) {
250
+ <flex-layout-root-widget
300
251
  [layout]="layoutNode.items"
301
252
  [dataIndex]="dataIndex"
302
253
  [layoutIndex]="layoutIndex"
@@ -311,121 +262,155 @@ class FlexLayoutSectionComponent {
311
262
  [style.align-content]="getFlexAttribute('align-content')"
312
263
  [style.gap]="options?.fxLayoutGap"
313
264
  [style.justify-content]="getJustifyContent()"
314
- [style.align-items]="getAlignItems()"></flex-layout-root-widget>
315
- </fieldset>
316
- </mat-card-content>
317
- <mat-card-footer>
318
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
319
- [innerHTML]="options?.errorMessage"></mat-error>
320
- </mat-card-footer>
321
- </mat-card>
322
-
323
- <mat-expansion-panel *ngIf="containerType === 'expansion-panel'"
324
- [expanded]="expanded"
325
- [hideToggle]="!options?.expandable">
326
- <mat-expansion-panel-header>
327
- <mat-panel-title>
328
- <legend *ngIf="sectionTitle"
329
- [class]="options?.labelHtmlClass"
265
+ [style.align-items]="getAlignItems()"></flex-layout-root-widget>
266
+ }
267
+ @if (options?.showErrors && options?.errorMessage) {
268
+ <mat-error
269
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
270
+ }
271
+ </div>
272
+ }
273
+
274
+ @if (containerType === 'fieldset') {
275
+ <fieldset
276
+ [class]="options?.htmlClass || ''"
277
+ [class.expandable]="options?.expandable && !expanded"
278
+ [class.expanded]="options?.expandable && expanded"
279
+ [disabled]="$safeNavigationMigration(options?.readonly)">
280
+ @if (sectionTitle) {
281
+ <legend
282
+ [class]="'legend ' + (options?.labelHtmlClass || '')"
330
283
  [innerHTML]="sectionTitle"
331
- (click)="toggleExpanded()"></legend>
332
- </mat-panel-title>
333
- </mat-expansion-panel-header>
334
- <fieldset [disabled]="options?.readonly">
335
- <flex-layout-root-widget *ngIf="expanded"
336
- [layout]="layoutNode.items"
337
- [dataIndex]="dataIndex"
338
- [layoutIndex]="layoutIndex"
339
- [isFlexItem]="getFlexAttribute('is-flex')"
340
- [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
341
- [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
342
- [style.display]="getFlexAttribute('display')"
343
- [style.flex-direction]="getFlexAttribute('flex-direction')"
344
- [style.flex-wrap]="getFlexAttribute('flex-wrap')"
345
- [style.justify-content]="getFlexAttribute('justify-content')"
346
- [style.align-items]="getFlexAttribute('align-items')"
347
- [style.align-content]="getFlexAttribute('align-content')"
348
- [style.gap]="options?.fxLayoutGap"
349
- [style.justify-content]="getJustifyContent()"
284
+ (click)="toggleExpanded()"></legend>
285
+ }
286
+ @if (expanded) {
287
+ <flex-layout-root-widget
288
+ [layout]="layoutNode.items"
289
+ [dataIndex]="dataIndex"
290
+ [layoutIndex]="layoutIndex"
291
+ [isFlexItem]="getFlexAttribute('is-flex')"
292
+ [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
293
+ [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
294
+ [style.display]="getFlexAttribute('display')"
295
+ [style.flex-direction]="getFlexAttribute('flex-direction')"
296
+ [style.flex-wrap]="getFlexAttribute('flex-wrap')"
297
+ [style.justify-content]="getFlexAttribute('justify-content')"
298
+ [style.align-items]="getFlexAttribute('align-items')"
299
+ [style.align-content]="getFlexAttribute('align-content')"
300
+ [style.gap]="options?.fxLayoutGap"
301
+ [style.justify-content]="getJustifyContent()"
350
302
  [style.align-items]="getAlignItems()"></flex-layout-root-widget>
303
+ }
304
+ @if (options?.showErrors && options?.errorMessage) {
305
+ <mat-error
306
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
307
+ }
351
308
  </fieldset>
352
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
353
- [innerHTML]="options?.errorMessage"></mat-error>
354
- </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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: FlexLayoutRootComponent, selector: "flex-layout-root-widget", inputs: ["dataIndex", "layoutIndex", "layout", "isFlexItem"] }] }); }
309
+ }
310
+
311
+ @if (containerType === 'card') {
312
+ <mat-card appearance="outlined"
313
+ [ngClass]="options?.htmlClass || ''"
314
+ [class.expandable]="options?.expandable && !expanded"
315
+ [class.expanded]="options?.expandable && expanded">
316
+ @if (sectionTitle) {
317
+ <mat-card-header>
318
+ <legend
319
+ [class]="'legend ' + (options?.labelHtmlClass || '')"
320
+ [innerHTML]="sectionTitle"
321
+ (click)="toggleExpanded()"></legend>
322
+ </mat-card-header>
323
+ }
324
+ @if (expanded) {
325
+ <mat-card-content>
326
+ <fieldset [disabled]="$safeNavigationMigration(options?.readonly)">
327
+ @if (expanded) {
328
+ <flex-layout-root-widget
329
+ [layout]="layoutNode.items"
330
+ [dataIndex]="dataIndex"
331
+ [layoutIndex]="layoutIndex"
332
+ [isFlexItem]="getFlexAttribute('is-flex')"
333
+ [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
334
+ [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
335
+ [style.display]="getFlexAttribute('display')"
336
+ [style.flex-direction]="getFlexAttribute('flex-direction')"
337
+ [style.flex-wrap]="getFlexAttribute('flex-wrap')"
338
+ [style.justify-content]="getFlexAttribute('justify-content')"
339
+ [style.align-items]="getFlexAttribute('align-items')"
340
+ [style.align-content]="getFlexAttribute('align-content')"
341
+ [style.gap]="options?.fxLayoutGap"
342
+ [style.justify-content]="getJustifyContent()"
343
+ [style.align-items]="getAlignItems()"></flex-layout-root-widget>
344
+ }
345
+ </fieldset>
346
+ </mat-card-content>
347
+ }
348
+ <mat-card-footer>
349
+ @if (options?.showErrors && options?.errorMessage) {
350
+ <mat-error
351
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
352
+ }
353
+ </mat-card-footer>
354
+ </mat-card>
355
+ }
356
+
357
+ @if (containerType === 'expansion-panel') {
358
+ <mat-expansion-panel
359
+ [expanded]="expanded"
360
+ [hideToggle]="!options?.expandable">
361
+ <mat-expansion-panel-header>
362
+ <mat-panel-title>
363
+ @if (sectionTitle) {
364
+ <legend
365
+ [class]="options?.labelHtmlClass"
366
+ [innerHTML]="sectionTitle"
367
+ (click)="toggleExpanded()"></legend>
368
+ }
369
+ </mat-panel-title>
370
+ </mat-expansion-panel-header>
371
+ <fieldset [disabled]="$safeNavigationMigration(options?.readonly)">
372
+ @if (expanded) {
373
+ <flex-layout-root-widget
374
+ [layout]="layoutNode.items"
375
+ [dataIndex]="dataIndex"
376
+ [layoutIndex]="layoutIndex"
377
+ [isFlexItem]="getFlexAttribute('is-flex')"
378
+ [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
379
+ [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
380
+ [style.display]="getFlexAttribute('display')"
381
+ [style.flex-direction]="getFlexAttribute('flex-direction')"
382
+ [style.flex-wrap]="getFlexAttribute('flex-wrap')"
383
+ [style.justify-content]="getFlexAttribute('justify-content')"
384
+ [style.align-items]="getFlexAttribute('align-items')"
385
+ [style.align-content]="getFlexAttribute('align-content')"
386
+ [style.gap]="options?.fxLayoutGap"
387
+ [style.justify-content]="getJustifyContent()"
388
+ [style.align-items]="getAlignItems()"></flex-layout-root-widget>
389
+ }
390
+ </fieldset>
391
+ @if (options?.showErrors && options?.errorMessage) {
392
+ <mat-error
393
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
394
+ }
395
+ </mat-expansion-panel>
396
+ }`, 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 }); }
355
397
  }
356
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: FlexLayoutSectionComponent, decorators: [{
398
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FlexLayoutSectionComponent, decorators: [{
357
399
  type: Component,
358
400
  args: [{ selector: 'flex-layout-section-widget', template: `
359
- <div *ngIf="containerType === 'div'"
360
- [class]="options?.htmlClass || ''"
361
- [class.expandable]="options?.expandable && !expanded"
362
- [class.expanded]="options?.expandable && expanded">
363
- <label *ngIf="sectionTitle"
364
- [class]="'legend ' + (options?.labelHtmlClass || '')"
365
- [innerHTML]="sectionTitle"
366
- (click)="toggleExpanded()"></label>
367
- <flex-layout-root-widget *ngIf="expanded"
368
- [layout]="layoutNode.items"
369
- [dataIndex]="dataIndex"
370
- [layoutIndex]="layoutIndex"
371
- [isFlexItem]="getFlexAttribute('is-flex')"
372
- [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
373
- [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
374
- [style.display]="getFlexAttribute('display')"
375
- [style.flex-direction]="getFlexAttribute('flex-direction')"
376
- [style.flex-wrap]="getFlexAttribute('flex-wrap')"
377
- [style.justify-content]="getFlexAttribute('justify-content')"
378
- [style.align-items]="getFlexAttribute('align-items')"
379
- [style.align-content]="getFlexAttribute('align-content')"
380
- [style.gap]="options?.fxLayoutGap"
381
- [style.justify-content]="getJustifyContent()"
382
- [style.align-items]="getAlignItems()"></flex-layout-root-widget>
383
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
384
- [innerHTML]="options?.errorMessage"></mat-error>
385
- </div>
386
-
387
- <fieldset *ngIf="containerType === 'fieldset'"
388
- [class]="options?.htmlClass || ''"
389
- [class.expandable]="options?.expandable && !expanded"
390
- [class.expanded]="options?.expandable && expanded"
391
- [disabled]="options?.readonly">
392
- <legend *ngIf="sectionTitle"
393
- [class]="'legend ' + (options?.labelHtmlClass || '')"
394
- [innerHTML]="sectionTitle"
395
- (click)="toggleExpanded()"></legend>
396
- <flex-layout-root-widget *ngIf="expanded"
397
- [layout]="layoutNode.items"
398
- [dataIndex]="dataIndex"
399
- [layoutIndex]="layoutIndex"
400
- [isFlexItem]="getFlexAttribute('is-flex')"
401
- [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
402
- [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
403
- [style.display]="getFlexAttribute('display')"
404
- [style.flex-direction]="getFlexAttribute('flex-direction')"
405
- [style.flex-wrap]="getFlexAttribute('flex-wrap')"
406
- [style.justify-content]="getFlexAttribute('justify-content')"
407
- [style.align-items]="getFlexAttribute('align-items')"
408
- [style.align-content]="getFlexAttribute('align-content')"
409
- [style.gap]="options?.fxLayoutGap"
410
- [style.justify-content]="getJustifyContent()"
411
- [style.align-items]="getAlignItems()"></flex-layout-root-widget>
412
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
413
- [innerHTML]="options?.errorMessage"></mat-error>
414
- </fieldset>
415
-
416
- <mat-card appearance="outlined" *ngIf="containerType === 'card'"
417
- [ngClass]="options?.htmlClass || ''"
418
- [class.expandable]="options?.expandable && !expanded"
419
- [class.expanded]="options?.expandable && expanded">
420
- <mat-card-header *ngIf="sectionTitle">
421
- <legend
422
- [class]="'legend ' + (options?.labelHtmlClass || '')"
423
- [innerHTML]="sectionTitle"
424
- (click)="toggleExpanded()"></legend>
425
- </mat-card-header>
426
- <mat-card-content *ngIf="expanded">
427
- <fieldset [disabled]="options?.readonly">
428
- <flex-layout-root-widget *ngIf="expanded"
401
+ @if (containerType === 'div') {
402
+ <div
403
+ [class]="options?.htmlClass || ''"
404
+ [class.expandable]="options?.expandable && !expanded"
405
+ [class.expanded]="options?.expandable && expanded">
406
+ @if (sectionTitle) {
407
+ <label
408
+ [class]="'legend ' + (options?.labelHtmlClass || '')"
409
+ [innerHTML]="sectionTitle"
410
+ (click)="toggleExpanded()"></label>
411
+ }
412
+ @if (expanded) {
413
+ <flex-layout-root-widget
429
414
  [layout]="layoutNode.items"
430
415
  [dataIndex]="dataIndex"
431
416
  [layoutIndex]="layoutIndex"
@@ -440,47 +425,138 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
440
425
  [style.align-content]="getFlexAttribute('align-content')"
441
426
  [style.gap]="options?.fxLayoutGap"
442
427
  [style.justify-content]="getJustifyContent()"
443
- [style.align-items]="getAlignItems()"></flex-layout-root-widget>
444
- </fieldset>
445
- </mat-card-content>
446
- <mat-card-footer>
447
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
448
- [innerHTML]="options?.errorMessage"></mat-error>
449
- </mat-card-footer>
450
- </mat-card>
451
-
452
- <mat-expansion-panel *ngIf="containerType === 'expansion-panel'"
453
- [expanded]="expanded"
454
- [hideToggle]="!options?.expandable">
455
- <mat-expansion-panel-header>
456
- <mat-panel-title>
457
- <legend *ngIf="sectionTitle"
458
- [class]="options?.labelHtmlClass"
428
+ [style.align-items]="getAlignItems()"></flex-layout-root-widget>
429
+ }
430
+ @if (options?.showErrors && options?.errorMessage) {
431
+ <mat-error
432
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
433
+ }
434
+ </div>
435
+ }
436
+
437
+ @if (containerType === 'fieldset') {
438
+ <fieldset
439
+ [class]="options?.htmlClass || ''"
440
+ [class.expandable]="options?.expandable && !expanded"
441
+ [class.expanded]="options?.expandable && expanded"
442
+ [disabled]="$safeNavigationMigration(options?.readonly)">
443
+ @if (sectionTitle) {
444
+ <legend
445
+ [class]="'legend ' + (options?.labelHtmlClass || '')"
459
446
  [innerHTML]="sectionTitle"
460
- (click)="toggleExpanded()"></legend>
461
- </mat-panel-title>
462
- </mat-expansion-panel-header>
463
- <fieldset [disabled]="options?.readonly">
464
- <flex-layout-root-widget *ngIf="expanded"
465
- [layout]="layoutNode.items"
466
- [dataIndex]="dataIndex"
467
- [layoutIndex]="layoutIndex"
468
- [isFlexItem]="getFlexAttribute('is-flex')"
469
- [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
470
- [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
471
- [style.display]="getFlexAttribute('display')"
472
- [style.flex-direction]="getFlexAttribute('flex-direction')"
473
- [style.flex-wrap]="getFlexAttribute('flex-wrap')"
474
- [style.justify-content]="getFlexAttribute('justify-content')"
475
- [style.align-items]="getFlexAttribute('align-items')"
476
- [style.align-content]="getFlexAttribute('align-content')"
477
- [style.gap]="options?.fxLayoutGap"
478
- [style.justify-content]="getJustifyContent()"
447
+ (click)="toggleExpanded()"></legend>
448
+ }
449
+ @if (expanded) {
450
+ <flex-layout-root-widget
451
+ [layout]="layoutNode.items"
452
+ [dataIndex]="dataIndex"
453
+ [layoutIndex]="layoutIndex"
454
+ [isFlexItem]="getFlexAttribute('is-flex')"
455
+ [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
456
+ [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
457
+ [style.display]="getFlexAttribute('display')"
458
+ [style.flex-direction]="getFlexAttribute('flex-direction')"
459
+ [style.flex-wrap]="getFlexAttribute('flex-wrap')"
460
+ [style.justify-content]="getFlexAttribute('justify-content')"
461
+ [style.align-items]="getFlexAttribute('align-items')"
462
+ [style.align-content]="getFlexAttribute('align-content')"
463
+ [style.gap]="options?.fxLayoutGap"
464
+ [style.justify-content]="getJustifyContent()"
479
465
  [style.align-items]="getAlignItems()"></flex-layout-root-widget>
466
+ }
467
+ @if (options?.showErrors && options?.errorMessage) {
468
+ <mat-error
469
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
470
+ }
480
471
  </fieldset>
481
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
482
- [innerHTML]="options?.errorMessage"></mat-error>
483
- </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"] }]
472
+ }
473
+
474
+ @if (containerType === 'card') {
475
+ <mat-card appearance="outlined"
476
+ [ngClass]="options?.htmlClass || ''"
477
+ [class.expandable]="options?.expandable && !expanded"
478
+ [class.expanded]="options?.expandable && expanded">
479
+ @if (sectionTitle) {
480
+ <mat-card-header>
481
+ <legend
482
+ [class]="'legend ' + (options?.labelHtmlClass || '')"
483
+ [innerHTML]="sectionTitle"
484
+ (click)="toggleExpanded()"></legend>
485
+ </mat-card-header>
486
+ }
487
+ @if (expanded) {
488
+ <mat-card-content>
489
+ <fieldset [disabled]="$safeNavigationMigration(options?.readonly)">
490
+ @if (expanded) {
491
+ <flex-layout-root-widget
492
+ [layout]="layoutNode.items"
493
+ [dataIndex]="dataIndex"
494
+ [layoutIndex]="layoutIndex"
495
+ [isFlexItem]="getFlexAttribute('is-flex')"
496
+ [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
497
+ [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
498
+ [style.display]="getFlexAttribute('display')"
499
+ [style.flex-direction]="getFlexAttribute('flex-direction')"
500
+ [style.flex-wrap]="getFlexAttribute('flex-wrap')"
501
+ [style.justify-content]="getFlexAttribute('justify-content')"
502
+ [style.align-items]="getFlexAttribute('align-items')"
503
+ [style.align-content]="getFlexAttribute('align-content')"
504
+ [style.gap]="options?.fxLayoutGap"
505
+ [style.justify-content]="getJustifyContent()"
506
+ [style.align-items]="getAlignItems()"></flex-layout-root-widget>
507
+ }
508
+ </fieldset>
509
+ </mat-card-content>
510
+ }
511
+ <mat-card-footer>
512
+ @if (options?.showErrors && options?.errorMessage) {
513
+ <mat-error
514
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
515
+ }
516
+ </mat-card-footer>
517
+ </mat-card>
518
+ }
519
+
520
+ @if (containerType === 'expansion-panel') {
521
+ <mat-expansion-panel
522
+ [expanded]="expanded"
523
+ [hideToggle]="!options?.expandable">
524
+ <mat-expansion-panel-header>
525
+ <mat-panel-title>
526
+ @if (sectionTitle) {
527
+ <legend
528
+ [class]="options?.labelHtmlClass"
529
+ [innerHTML]="sectionTitle"
530
+ (click)="toggleExpanded()"></legend>
531
+ }
532
+ </mat-panel-title>
533
+ </mat-expansion-panel-header>
534
+ <fieldset [disabled]="$safeNavigationMigration(options?.readonly)">
535
+ @if (expanded) {
536
+ <flex-layout-root-widget
537
+ [layout]="layoutNode.items"
538
+ [dataIndex]="dataIndex"
539
+ [layoutIndex]="layoutIndex"
540
+ [isFlexItem]="getFlexAttribute('is-flex')"
541
+ [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
542
+ [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
543
+ [style.display]="getFlexAttribute('display')"
544
+ [style.flex-direction]="getFlexAttribute('flex-direction')"
545
+ [style.flex-wrap]="getFlexAttribute('flex-wrap')"
546
+ [style.justify-content]="getFlexAttribute('justify-content')"
547
+ [style.align-items]="getFlexAttribute('align-items')"
548
+ [style.align-content]="getFlexAttribute('align-content')"
549
+ [style.gap]="options?.fxLayoutGap"
550
+ [style.justify-content]="getJustifyContent()"
551
+ [style.align-items]="getAlignItems()"></flex-layout-root-widget>
552
+ }
553
+ </fieldset>
554
+ @if (options?.showErrors && options?.errorMessage) {
555
+ <mat-error
556
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
557
+ }
558
+ </mat-expansion-panel>
559
+ }`, 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"] }]
484
560
  }], ctorParameters: () => [{ type: i1.JsonSchemaFormService }], propDecorators: { layoutNode: [{
485
561
  type: Input
486
562
  }], layoutIndex: [{
@@ -513,33 +589,45 @@ class MaterialAddReferenceComponent {
513
589
  return parent.layoutNode.add ||
514
590
  this.jsf.setArrayItemTitle(parent, this.layoutNode, this.itemCount);
515
591
  }
516
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialAddReferenceComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
517
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: MaterialAddReferenceComponent, isStandalone: false, selector: "material-add-reference-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
592
+ 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 }); }
593
+ 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: `
518
594
  <section [class]="options?.htmlClass || ''" align="end">
519
- <button mat-raised-button *ngIf="showAddButton"
520
- [color]="options?.color || 'accent'"
521
- [disabled]="options?.readonly"
522
- (click)="addItem($event)">
523
- <span *ngIf="options?.icon" [class]="options?.icon"></span>
524
- <span *ngIf="options?.title" [innerHTML]="buttonText"></span>
525
- </button>
526
- </section>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$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.Default }); }
595
+ @if (showAddButton) {
596
+ <button mat-raised-button
597
+ [color]="options?.color || 'accent'"
598
+ [disabled]="$safeNavigationMigration(options?.readonly)"
599
+ (click)="addItem($event)">
600
+ @if (options?.icon) {
601
+ <span [class]="options?.icon"></span>
602
+ }
603
+ @if (options?.title) {
604
+ <span [innerHTML]="buttonText"></span>
605
+ }
606
+ </button>
607
+ }
608
+ </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 }); }
527
609
  }
528
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialAddReferenceComponent, decorators: [{
610
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialAddReferenceComponent, decorators: [{
529
611
  type: Component,
530
612
  args: [{
531
613
  selector: 'material-add-reference-widget',
532
614
  template: `
533
615
  <section [class]="options?.htmlClass || ''" align="end">
534
- <button mat-raised-button *ngIf="showAddButton"
535
- [color]="options?.color || 'accent'"
536
- [disabled]="options?.readonly"
537
- (click)="addItem($event)">
538
- <span *ngIf="options?.icon" [class]="options?.icon"></span>
539
- <span *ngIf="options?.title" [innerHTML]="buttonText"></span>
540
- </button>
616
+ @if (showAddButton) {
617
+ <button mat-raised-button
618
+ [color]="options?.color || 'accent'"
619
+ [disabled]="$safeNavigationMigration(options?.readonly)"
620
+ (click)="addItem($event)">
621
+ @if (options?.icon) {
622
+ <span [class]="options?.icon"></span>
623
+ }
624
+ @if (options?.title) {
625
+ <span [innerHTML]="buttonText"></span>
626
+ }
627
+ </button>
628
+ }
541
629
  </section>`,
542
- changeDetection: ChangeDetectionStrategy.Default,
630
+ changeDetection: ChangeDetectionStrategy.Eager,
543
631
  standalone: false
544
632
  }]
545
633
  }], ctorParameters: () => [{ type: i1.JsonSchemaFormService }], propDecorators: { layoutNode: [{
@@ -575,25 +663,29 @@ class MaterialButtonComponent {
575
663
  this.jsf.updateValue(this, event.target.value);
576
664
  }
577
665
  }
578
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialButtonComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
579
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: MaterialButtonComponent, isStandalone: false, selector: "material-button-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
666
+ 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 }); }
667
+ 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: `
580
668
  <div class="button-row" [class]="options?.htmlClass || ''">
581
669
  <button mat-raised-button
582
670
  [attr.readonly]="options?.readonly ? 'readonly' : null"
583
671
  [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
584
672
  [color]="options?.color || 'primary'"
585
673
  [disabled]="controlDisabled || options?.readonly"
586
- [id]="'control' + layoutNode?._id"
674
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
587
675
  [name]="controlName"
588
- [type]="layoutNode?.type"
676
+ [type]="$safeNavigationMigration(layoutNode?.type)"
589
677
  [value]="controlValue"
590
678
  (click)="updateValue($event)">
591
- <mat-icon *ngIf="options?.icon" class="mat-24">{{options?.icon}}</mat-icon>
592
- <span *ngIf="options?.title" [innerHTML]="options?.title"></span>
679
+ @if (options?.icon) {
680
+ <mat-icon class="mat-24">{{options?.icon}}</mat-icon>
681
+ }
682
+ @if (options?.title) {
683
+ <span [innerHTML]="$safeNavigationMigration(options?.title)"></span>
684
+ }
593
685
  </button>
594
- </div>`, isInline: true, styles: ["button{margin-top:10px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$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: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
686
+ </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 }); }
595
687
  }
596
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialButtonComponent, decorators: [{
688
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialButtonComponent, decorators: [{
597
689
  type: Component,
598
690
  args: [{ selector: 'material-button-widget', template: `
599
691
  <div class="button-row" [class]="options?.htmlClass || ''">
@@ -602,15 +694,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
602
694
  [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
603
695
  [color]="options?.color || 'primary'"
604
696
  [disabled]="controlDisabled || options?.readonly"
605
- [id]="'control' + layoutNode?._id"
697
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
606
698
  [name]="controlName"
607
- [type]="layoutNode?.type"
699
+ [type]="$safeNavigationMigration(layoutNode?.type)"
608
700
  [value]="controlValue"
609
701
  (click)="updateValue($event)">
610
- <mat-icon *ngIf="options?.icon" class="mat-24">{{options?.icon}}</mat-icon>
611
- <span *ngIf="options?.title" [innerHTML]="options?.title"></span>
702
+ @if (options?.icon) {
703
+ <mat-icon class="mat-24">{{options?.icon}}</mat-icon>
704
+ }
705
+ @if (options?.title) {
706
+ <span [innerHTML]="$safeNavigationMigration(options?.title)"></span>
707
+ }
612
708
  </button>
613
- </div>`, standalone: false, styles: ["button{margin-top:10px}\n"] }]
709
+ </div>`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: ["button{margin-top:10px}\n"] }]
614
710
  }], ctorParameters: () => [{ type: i1.JsonSchemaFormService }], propDecorators: { layoutNode: [{
615
711
  type: Input
616
712
  }], layoutIndex: [{
@@ -636,16 +732,18 @@ class MaterialButtonGroupComponent {
636
732
  this.options.showErrors = true;
637
733
  this.jsf.updateValue(this, value);
638
734
  }
639
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialButtonGroupComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
640
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: MaterialButtonGroupComponent, isStandalone: false, selector: "material-button-group-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
735
+ 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 }); }
736
+ 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: `
641
737
  <div>
642
- <div *ngIf="options?.title">
643
- <label
644
- [attr.for]="'control' + layoutNode?._id"
645
- [class]="options?.labelHtmlClass || ''"
646
- [style.display]="options?.notitle ? 'none' : ''"
647
- [innerHTML]="options?.title"></label>
648
- </div>
738
+ @if (options?.title) {
739
+ <div>
740
+ <label
741
+ [attr.for]="'control' + layoutNode?._id"
742
+ [class]="options?.labelHtmlClass || ''"
743
+ [style.display]="options?.notitle ? 'none' : ''"
744
+ [innerHTML]="$safeNavigationMigration(options?.title)"></label>
745
+ </div>
746
+ }
649
747
  <mat-button-toggle-group
650
748
  [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
651
749
  [attr.readonly]="options?.readonly ? 'readonly' : null"
@@ -654,28 +752,34 @@ class MaterialButtonGroupComponent {
654
752
  [name]="controlName"
655
753
  [value]="controlValue"
656
754
  [vertical]="!!options.vertical">
657
- <mat-button-toggle *ngFor="let radioItem of radiosList"
658
- [id]="'control' + layoutNode?._id + '/' + radioItem?.name"
659
- [value]="radioItem?.value"
660
- (click)="updateValue(radioItem?.value)">
661
- <span [innerHTML]="radioItem?.name"></span>
662
- </mat-button-toggle>
755
+ @for (radioItem of radiosList; track radioItem) {
756
+ <mat-button-toggle
757
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id) + '/' + $safeNavigationMigration(radioItem?.name)"
758
+ [value]="$safeNavigationMigration(radioItem?.value)"
759
+ (click)="updateValue($safeNavigationMigration(radioItem?.value))">
760
+ <span [innerHTML]="$safeNavigationMigration(radioItem?.name)"></span>
761
+ </mat-button-toggle>
762
+ }
663
763
  </mat-button-toggle-group>
664
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
665
- [innerHTML]="options?.errorMessage"></mat-error>
666
- </div>`, isInline: true, styles: ["mat-error{font-size:75%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$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: i3$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: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }] }); }
764
+ @if (options?.showErrors && options?.errorMessage) {
765
+ <mat-error
766
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
767
+ }
768
+ </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 }); }
667
769
  }
668
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialButtonGroupComponent, decorators: [{
770
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialButtonGroupComponent, decorators: [{
669
771
  type: Component,
670
772
  args: [{ selector: 'material-button-group-widget', template: `
671
773
  <div>
672
- <div *ngIf="options?.title">
673
- <label
674
- [attr.for]="'control' + layoutNode?._id"
675
- [class]="options?.labelHtmlClass || ''"
676
- [style.display]="options?.notitle ? 'none' : ''"
677
- [innerHTML]="options?.title"></label>
678
- </div>
774
+ @if (options?.title) {
775
+ <div>
776
+ <label
777
+ [attr.for]="'control' + layoutNode?._id"
778
+ [class]="options?.labelHtmlClass || ''"
779
+ [style.display]="options?.notitle ? 'none' : ''"
780
+ [innerHTML]="$safeNavigationMigration(options?.title)"></label>
781
+ </div>
782
+ }
679
783
  <mat-button-toggle-group
680
784
  [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
681
785
  [attr.readonly]="options?.readonly ? 'readonly' : null"
@@ -684,16 +788,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
684
788
  [name]="controlName"
685
789
  [value]="controlValue"
686
790
  [vertical]="!!options.vertical">
687
- <mat-button-toggle *ngFor="let radioItem of radiosList"
688
- [id]="'control' + layoutNode?._id + '/' + radioItem?.name"
689
- [value]="radioItem?.value"
690
- (click)="updateValue(radioItem?.value)">
691
- <span [innerHTML]="radioItem?.name"></span>
692
- </mat-button-toggle>
791
+ @for (radioItem of radiosList; track radioItem) {
792
+ <mat-button-toggle
793
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id) + '/' + $safeNavigationMigration(radioItem?.name)"
794
+ [value]="$safeNavigationMigration(radioItem?.value)"
795
+ (click)="updateValue($safeNavigationMigration(radioItem?.value))">
796
+ <span [innerHTML]="$safeNavigationMigration(radioItem?.name)"></span>
797
+ </mat-button-toggle>
798
+ }
693
799
  </mat-button-toggle-group>
694
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
695
- [innerHTML]="options?.errorMessage"></mat-error>
696
- </div>`, standalone: false, styles: ["mat-error{font-size:75%}\n"] }]
800
+ @if (options?.showErrors && options?.errorMessage) {
801
+ <mat-error
802
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
803
+ }
804
+ </div>`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: ["mat-error{font-size:75%}\n"] }]
697
805
  }], ctorParameters: () => [{ type: i1.JsonSchemaFormService }], propDecorators: { layoutNode: [{
698
806
  type: Input
699
807
  }], layoutIndex: [{
@@ -730,128 +838,164 @@ class MaterialCheckboxComponent {
730
838
  get isChecked() {
731
839
  return this.jsf.getFormControlValue(this) === this.trueValue;
732
840
  }
733
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialCheckboxComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
734
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: MaterialCheckboxComponent, isStandalone: false, selector: "material-checkbox-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
735
- <mat-checkbox *ngIf="boundControl && !showSlideToggle"
736
- [formControl]="formControl"
737
- align="left"
738
- [color]="options?.color || 'primary'"
739
- [id]="'control' + layoutNode?._id"
740
- labelPosition="after"
741
- [name]="controlName"
742
- (blur)="options.showErrors = true">
743
- <span *ngIf="options?.title"
744
- class="checkbox-name"
745
- [style.display]="options?.notitle ? 'none' : ''"
746
- [innerHTML]="options?.title"></span>
747
- </mat-checkbox>
748
- <mat-checkbox *ngIf="!boundControl && !showSlideToggle"
749
- align="left"
750
- [color]="options?.color || 'primary'"
751
- [disabled]="controlDisabled || options?.readonly"
752
- [id]="'control' + layoutNode?._id"
753
- labelPosition="after"
754
- [name]="controlName"
755
- [checked]="isChecked"
756
- (blur)="options.showErrors = true"
757
- (change)="updateValue($event)">
758
- <span *ngIf="options?.title"
759
- class="checkbox-name"
760
- [style.display]="options?.notitle ? 'none' : ''"
761
- [innerHTML]="options?.title"></span>
762
- </mat-checkbox>
763
- <mat-slide-toggle *ngIf="boundControl && showSlideToggle"
764
- [formControl]="formControl"
765
- align="left"
766
- [color]="options?.color || 'primary'"
767
- [id]="'control' + layoutNode?._id"
768
- labelPosition="after"
769
- [name]="controlName"
770
- (blur)="options.showErrors = true">
771
- <span *ngIf="options?.title"
772
- class="checkbox-name"
773
- [style.display]="options?.notitle ? 'none' : ''"
774
- [innerHTML]="options?.title"></span>
775
- </mat-slide-toggle>
776
- <mat-slide-toggle *ngIf="!boundControl && showSlideToggle"
777
- align="left"
778
- [color]="options?.color || 'primary'"
779
- [disabled]="controlDisabled || options?.readonly"
780
- [id]="'control' + layoutNode?._id"
781
- labelPosition="after"
782
- [name]="controlName"
783
- [checked]="isChecked"
784
- (blur)="options.showErrors = true"
785
- (change)="updateValue($event)">
786
- <span *ngIf="options?.title"
787
- class="checkbox-name"
788
- [style.display]="options?.notitle ? 'none' : ''"
789
- [innerHTML]="options?.title"></span>
790
- </mat-slide-toggle>
791
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
792
- [innerHTML]="options?.errorMessage"></mat-error>`, isInline: true, styles: [".checkbox-name{white-space:nowrap}mat-error{font-size:75%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$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: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i6.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"] }] }); }
841
+ 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 }); }
842
+ 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: `
843
+ @if (boundControl && !showSlideToggle) {
844
+ <mat-checkbox
845
+ [formControl]="formControl"
846
+ align="left"
847
+ [color]="options?.color || 'primary'"
848
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
849
+ labelPosition="after"
850
+ [name]="controlName"
851
+ (blur)="options.showErrors = true">
852
+ @if (options?.title) {
853
+ <span
854
+ class="checkbox-name"
855
+ [style.display]="options?.notitle ? 'none' : ''"
856
+ [innerHTML]="$safeNavigationMigration(options?.title)"></span>
857
+ }
858
+ </mat-checkbox>
859
+ }
860
+ @if (!boundControl && !showSlideToggle) {
861
+ <mat-checkbox
862
+ align="left"
863
+ [color]="options?.color || 'primary'"
864
+ [disabled]="controlDisabled || options?.readonly"
865
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
866
+ labelPosition="after"
867
+ [name]="controlName"
868
+ [checked]="isChecked"
869
+ (blur)="options.showErrors = true"
870
+ (change)="updateValue($event)">
871
+ @if (options?.title) {
872
+ <span
873
+ class="checkbox-name"
874
+ [style.display]="options?.notitle ? 'none' : ''"
875
+ [innerHTML]="$safeNavigationMigration(options?.title)"></span>
876
+ }
877
+ </mat-checkbox>
878
+ }
879
+ @if (boundControl && showSlideToggle) {
880
+ <mat-slide-toggle
881
+ [formControl]="formControl"
882
+ align="left"
883
+ [color]="options?.color || 'primary'"
884
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
885
+ labelPosition="after"
886
+ [name]="controlName"
887
+ (blur)="options.showErrors = true">
888
+ @if (options?.title) {
889
+ <span
890
+ class="checkbox-name"
891
+ [style.display]="options?.notitle ? 'none' : ''"
892
+ [innerHTML]="$safeNavigationMigration(options?.title)"></span>
893
+ }
894
+ </mat-slide-toggle>
895
+ }
896
+ @if (!boundControl && showSlideToggle) {
897
+ <mat-slide-toggle
898
+ align="left"
899
+ [color]="options?.color || 'primary'"
900
+ [disabled]="controlDisabled || options?.readonly"
901
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
902
+ labelPosition="after"
903
+ [name]="controlName"
904
+ [checked]="isChecked"
905
+ (blur)="options.showErrors = true"
906
+ (change)="updateValue($event)">
907
+ @if (options?.title) {
908
+ <span
909
+ class="checkbox-name"
910
+ [style.display]="options?.notitle ? 'none' : ''"
911
+ [innerHTML]="$safeNavigationMigration(options?.title)"></span>
912
+ }
913
+ </mat-slide-toggle>
914
+ }
915
+ @if (options?.showErrors && options?.errorMessage) {
916
+ <mat-error
917
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
918
+ }`, 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 }); }
793
919
  }
794
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialCheckboxComponent, decorators: [{
920
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialCheckboxComponent, decorators: [{
795
921
  type: Component,
796
922
  args: [{ selector: 'material-checkbox-widget', template: `
797
- <mat-checkbox *ngIf="boundControl && !showSlideToggle"
798
- [formControl]="formControl"
799
- align="left"
800
- [color]="options?.color || 'primary'"
801
- [id]="'control' + layoutNode?._id"
802
- labelPosition="after"
803
- [name]="controlName"
804
- (blur)="options.showErrors = true">
805
- <span *ngIf="options?.title"
806
- class="checkbox-name"
807
- [style.display]="options?.notitle ? 'none' : ''"
808
- [innerHTML]="options?.title"></span>
809
- </mat-checkbox>
810
- <mat-checkbox *ngIf="!boundControl && !showSlideToggle"
811
- align="left"
812
- [color]="options?.color || 'primary'"
813
- [disabled]="controlDisabled || options?.readonly"
814
- [id]="'control' + layoutNode?._id"
815
- labelPosition="after"
816
- [name]="controlName"
817
- [checked]="isChecked"
818
- (blur)="options.showErrors = true"
819
- (change)="updateValue($event)">
820
- <span *ngIf="options?.title"
821
- class="checkbox-name"
822
- [style.display]="options?.notitle ? 'none' : ''"
823
- [innerHTML]="options?.title"></span>
824
- </mat-checkbox>
825
- <mat-slide-toggle *ngIf="boundControl && showSlideToggle"
826
- [formControl]="formControl"
827
- align="left"
828
- [color]="options?.color || 'primary'"
829
- [id]="'control' + layoutNode?._id"
830
- labelPosition="after"
831
- [name]="controlName"
832
- (blur)="options.showErrors = true">
833
- <span *ngIf="options?.title"
834
- class="checkbox-name"
835
- [style.display]="options?.notitle ? 'none' : ''"
836
- [innerHTML]="options?.title"></span>
837
- </mat-slide-toggle>
838
- <mat-slide-toggle *ngIf="!boundControl && showSlideToggle"
839
- align="left"
840
- [color]="options?.color || 'primary'"
841
- [disabled]="controlDisabled || options?.readonly"
842
- [id]="'control' + layoutNode?._id"
843
- labelPosition="after"
844
- [name]="controlName"
845
- [checked]="isChecked"
846
- (blur)="options.showErrors = true"
847
- (change)="updateValue($event)">
848
- <span *ngIf="options?.title"
849
- class="checkbox-name"
850
- [style.display]="options?.notitle ? 'none' : ''"
851
- [innerHTML]="options?.title"></span>
852
- </mat-slide-toggle>
853
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
854
- [innerHTML]="options?.errorMessage"></mat-error>`, standalone: false, styles: [".checkbox-name{white-space:nowrap}mat-error{font-size:75%}\n"] }]
923
+ @if (boundControl && !showSlideToggle) {
924
+ <mat-checkbox
925
+ [formControl]="formControl"
926
+ align="left"
927
+ [color]="options?.color || 'primary'"
928
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
929
+ labelPosition="after"
930
+ [name]="controlName"
931
+ (blur)="options.showErrors = true">
932
+ @if (options?.title) {
933
+ <span
934
+ class="checkbox-name"
935
+ [style.display]="options?.notitle ? 'none' : ''"
936
+ [innerHTML]="$safeNavigationMigration(options?.title)"></span>
937
+ }
938
+ </mat-checkbox>
939
+ }
940
+ @if (!boundControl && !showSlideToggle) {
941
+ <mat-checkbox
942
+ align="left"
943
+ [color]="options?.color || 'primary'"
944
+ [disabled]="controlDisabled || options?.readonly"
945
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
946
+ labelPosition="after"
947
+ [name]="controlName"
948
+ [checked]="isChecked"
949
+ (blur)="options.showErrors = true"
950
+ (change)="updateValue($event)">
951
+ @if (options?.title) {
952
+ <span
953
+ class="checkbox-name"
954
+ [style.display]="options?.notitle ? 'none' : ''"
955
+ [innerHTML]="$safeNavigationMigration(options?.title)"></span>
956
+ }
957
+ </mat-checkbox>
958
+ }
959
+ @if (boundControl && showSlideToggle) {
960
+ <mat-slide-toggle
961
+ [formControl]="formControl"
962
+ align="left"
963
+ [color]="options?.color || 'primary'"
964
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
965
+ labelPosition="after"
966
+ [name]="controlName"
967
+ (blur)="options.showErrors = true">
968
+ @if (options?.title) {
969
+ <span
970
+ class="checkbox-name"
971
+ [style.display]="options?.notitle ? 'none' : ''"
972
+ [innerHTML]="$safeNavigationMigration(options?.title)"></span>
973
+ }
974
+ </mat-slide-toggle>
975
+ }
976
+ @if (!boundControl && showSlideToggle) {
977
+ <mat-slide-toggle
978
+ align="left"
979
+ [color]="options?.color || 'primary'"
980
+ [disabled]="controlDisabled || options?.readonly"
981
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
982
+ labelPosition="after"
983
+ [name]="controlName"
984
+ [checked]="isChecked"
985
+ (blur)="options.showErrors = true"
986
+ (change)="updateValue($event)">
987
+ @if (options?.title) {
988
+ <span
989
+ class="checkbox-name"
990
+ [style.display]="options?.notitle ? 'none' : ''"
991
+ [innerHTML]="$safeNavigationMigration(options?.title)"></span>
992
+ }
993
+ </mat-slide-toggle>
994
+ }
995
+ @if (options?.showErrors && options?.errorMessage) {
996
+ <mat-error
997
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
998
+ }`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: [".checkbox-name{white-space:nowrap}mat-error{font-size:75%}\n"] }]
855
999
  }], ctorParameters: () => [{ type: i1.JsonSchemaFormService }], propDecorators: { layoutNode: [{
856
1000
  type: Input
857
1001
  }], layoutIndex: [{
@@ -901,43 +1045,49 @@ class MaterialCheckboxesComponent {
901
1045
  this.checkboxList.forEach(t => t.checked = event.checked);
902
1046
  this.updateValue();
903
1047
  }
904
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialCheckboxesComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
905
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: MaterialCheckboxesComponent, isStandalone: false, selector: "material-checkboxes-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
1048
+ 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 }); }
1049
+ 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: `
906
1050
  <div>
907
1051
  <mat-checkbox type="checkbox"
908
1052
  [checked]="allChecked"
909
1053
  [color]="options?.color || 'primary'"
910
1054
  [disabled]="controlDisabled || options?.readonly"
911
1055
  [indeterminate]="someChecked"
912
- [name]="options?.name"
1056
+ [name]="$safeNavigationMigration(options?.name)"
913
1057
  (blur)="options.showErrors = true"
914
1058
  (change)="updateAllValues($event)">
915
- <span class="checkbox-name" [innerHTML]="options?.name"></span>
1059
+ <span class="checkbox-name" [innerHTML]="$safeNavigationMigration(options?.name)"></span>
916
1060
  </mat-checkbox>
917
- <label *ngIf="options?.title"
918
- class="title"
919
- [class]="options?.labelHtmlClass || ''"
920
- [style.display]="options?.notitle ? 'none' : ''"
921
- [innerHTML]="options?.title"></label>
1061
+ @if (options?.title) {
1062
+ <label
1063
+ class="title"
1064
+ [class]="options?.labelHtmlClass || ''"
1065
+ [style.display]="options?.notitle ? 'none' : ''"
1066
+ [innerHTML]="$safeNavigationMigration(options?.title)"></label>
1067
+ }
922
1068
  <ul class="checkbox-list" [class.horizontal-list]="horizontalList">
923
- <li *ngFor="let checkboxItem of checkboxList"
924
- [class]="options?.htmlClass || ''">
925
- <mat-checkbox type="checkbox"
926
- [(ngModel)]="checkboxItem.checked"
927
- [color]="options?.color || 'primary'"
928
- [disabled]="controlDisabled || options?.readonly"
929
- [name]="checkboxItem?.name"
930
- (blur)="options.showErrors = true"
931
- (change)="updateValue()">
932
- <span class="checkbox-name" [innerHTML]="checkboxItem?.name"></span>
933
- </mat-checkbox>
934
- </li>
1069
+ @for (checkboxItem of checkboxList; track checkboxItem) {
1070
+ <li
1071
+ [class]="options?.htmlClass || ''">
1072
+ <mat-checkbox type="checkbox"
1073
+ [(ngModel)]="checkboxItem.checked"
1074
+ [color]="options?.color || 'primary'"
1075
+ [disabled]="controlDisabled || options?.readonly"
1076
+ [name]="$safeNavigationMigration(checkboxItem?.name)"
1077
+ (blur)="options.showErrors = true"
1078
+ (change)="updateValue()">
1079
+ <span class="checkbox-name" [innerHTML]="$safeNavigationMigration(checkboxItem?.name)"></span>
1080
+ </mat-checkbox>
1081
+ </li>
1082
+ }
935
1083
  </ul>
936
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
937
- [innerHTML]="options?.errorMessage"></mat-error>
938
- </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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$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: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }] }); }
1084
+ @if (options?.showErrors && options?.errorMessage) {
1085
+ <mat-error
1086
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
1087
+ }
1088
+ </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 }); }
939
1089
  }
940
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialCheckboxesComponent, decorators: [{
1090
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialCheckboxesComponent, decorators: [{
941
1091
  type: Component,
942
1092
  args: [{ selector: 'material-checkboxes-widget', template: `
943
1093
  <div>
@@ -946,33 +1096,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
946
1096
  [color]="options?.color || 'primary'"
947
1097
  [disabled]="controlDisabled || options?.readonly"
948
1098
  [indeterminate]="someChecked"
949
- [name]="options?.name"
1099
+ [name]="$safeNavigationMigration(options?.name)"
950
1100
  (blur)="options.showErrors = true"
951
1101
  (change)="updateAllValues($event)">
952
- <span class="checkbox-name" [innerHTML]="options?.name"></span>
1102
+ <span class="checkbox-name" [innerHTML]="$safeNavigationMigration(options?.name)"></span>
953
1103
  </mat-checkbox>
954
- <label *ngIf="options?.title"
955
- class="title"
956
- [class]="options?.labelHtmlClass || ''"
957
- [style.display]="options?.notitle ? 'none' : ''"
958
- [innerHTML]="options?.title"></label>
1104
+ @if (options?.title) {
1105
+ <label
1106
+ class="title"
1107
+ [class]="options?.labelHtmlClass || ''"
1108
+ [style.display]="options?.notitle ? 'none' : ''"
1109
+ [innerHTML]="$safeNavigationMigration(options?.title)"></label>
1110
+ }
959
1111
  <ul class="checkbox-list" [class.horizontal-list]="horizontalList">
960
- <li *ngFor="let checkboxItem of checkboxList"
961
- [class]="options?.htmlClass || ''">
962
- <mat-checkbox type="checkbox"
963
- [(ngModel)]="checkboxItem.checked"
964
- [color]="options?.color || 'primary'"
965
- [disabled]="controlDisabled || options?.readonly"
966
- [name]="checkboxItem?.name"
967
- (blur)="options.showErrors = true"
968
- (change)="updateValue()">
969
- <span class="checkbox-name" [innerHTML]="checkboxItem?.name"></span>
970
- </mat-checkbox>
971
- </li>
1112
+ @for (checkboxItem of checkboxList; track checkboxItem) {
1113
+ <li
1114
+ [class]="options?.htmlClass || ''">
1115
+ <mat-checkbox type="checkbox"
1116
+ [(ngModel)]="checkboxItem.checked"
1117
+ [color]="options?.color || 'primary'"
1118
+ [disabled]="controlDisabled || options?.readonly"
1119
+ [name]="$safeNavigationMigration(checkboxItem?.name)"
1120
+ (blur)="options.showErrors = true"
1121
+ (change)="updateValue()">
1122
+ <span class="checkbox-name" [innerHTML]="$safeNavigationMigration(checkboxItem?.name)"></span>
1123
+ </mat-checkbox>
1124
+ </li>
1125
+ }
972
1126
  </ul>
973
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
974
- [innerHTML]="options?.errorMessage"></mat-error>
975
- </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"] }]
1127
+ @if (options?.showErrors && options?.errorMessage) {
1128
+ <mat-error
1129
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
1130
+ }
1131
+ </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"] }]
976
1132
  }], ctorParameters: () => [{ type: i1.JsonSchemaFormService }], propDecorators: { layoutNode: [{
977
1133
  type: Input
978
1134
  }], layoutIndex: [{
@@ -1009,37 +1165,45 @@ class MaterialChipListComponent {
1009
1165
  syncFormArray() {
1010
1166
  this.jsf.updateArrayCheckboxList(this, this.tags.map(value => ({ checked: true, value })));
1011
1167
  }
1012
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialChipListComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
1013
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: MaterialChipListComponent, isStandalone: false, selector: "material-chip-list-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
1168
+ 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 }); }
1169
+ 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: `
1014
1170
  <mat-form-field
1015
1171
  [appearance]="options?.appearance || 'fill'"
1016
1172
  [class]="options?.htmlClass || ''"
1017
1173
  [floatLabel]="options?.floatLabel || 'auto'"
1018
1174
  [style.width]="'100%'">
1019
- <mat-label *ngIf="!options?.notitle">{{options?.title}}</mat-label>
1175
+ @if (!options?.notitle) {
1176
+ <mat-label>{{options?.title}}</mat-label>
1177
+ }
1020
1178
  <mat-chip-grid #chipGrid
1021
1179
  [attr.aria-label]="options?.title"
1022
1180
  [disabled]="controlDisabled || options?.readonly">
1023
- <mat-chip-row *ngFor="let tag of tags; let i = index"
1024
- (removed)="remove(i)">
1025
- {{tag}}
1026
- <button matChipRemove aria-label="Remove">
1027
- <mat-icon>cancel</mat-icon>
1028
- </button>
1029
- </mat-chip-row>
1181
+ @for (tag of tags; track tag; let i = $index) {
1182
+ <mat-chip-row
1183
+ (removed)="remove(i)">
1184
+ {{tag}}
1185
+ <button matChipRemove aria-label="Remove">
1186
+ <mat-icon>cancel</mat-icon>
1187
+ </button>
1188
+ </mat-chip-row>
1189
+ }
1030
1190
  </mat-chip-grid>
1031
1191
  <input [matChipInputFor]="chipGrid"
1032
1192
  [matChipInputSeparatorKeyCodes]="separatorKeyCodes"
1033
1193
  [matChipInputAddOnBlur]="true"
1034
1194
  [placeholder]="options?.placeholder || ''"
1035
1195
  (matChipInputTokenEnd)="add($event)">
1036
- <mat-hint *ngIf="options?.description && (!options?.showErrors || !options?.errorMessage)"
1037
- align="end" [innerHTML]="options?.description"></mat-hint>
1196
+ @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
1197
+ <mat-hint
1198
+ align="end" [innerHTML]="$safeNavigationMigration(options?.description)"></mat-hint>
1199
+ }
1038
1200
  </mat-form-field>
1039
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
1040
- [innerHTML]="options?.errorMessage"></mat-error>`, isInline: true, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i3$4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i3$4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i3$4.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
1201
+ @if (options?.showErrors && options?.errorMessage) {
1202
+ <mat-error
1203
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
1204
+ }`, 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 }); }
1041
1205
  }
1042
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialChipListComponent, decorators: [{
1206
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialChipListComponent, decorators: [{
1043
1207
  type: Component,
1044
1208
  args: [{ selector: 'material-chip-list-widget', template: `
1045
1209
  <mat-form-field
@@ -1047,28 +1211,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
1047
1211
  [class]="options?.htmlClass || ''"
1048
1212
  [floatLabel]="options?.floatLabel || 'auto'"
1049
1213
  [style.width]="'100%'">
1050
- <mat-label *ngIf="!options?.notitle">{{options?.title}}</mat-label>
1214
+ @if (!options?.notitle) {
1215
+ <mat-label>{{options?.title}}</mat-label>
1216
+ }
1051
1217
  <mat-chip-grid #chipGrid
1052
1218
  [attr.aria-label]="options?.title"
1053
1219
  [disabled]="controlDisabled || options?.readonly">
1054
- <mat-chip-row *ngFor="let tag of tags; let i = index"
1055
- (removed)="remove(i)">
1056
- {{tag}}
1057
- <button matChipRemove aria-label="Remove">
1058
- <mat-icon>cancel</mat-icon>
1059
- </button>
1060
- </mat-chip-row>
1220
+ @for (tag of tags; track tag; let i = $index) {
1221
+ <mat-chip-row
1222
+ (removed)="remove(i)">
1223
+ {{tag}}
1224
+ <button matChipRemove aria-label="Remove">
1225
+ <mat-icon>cancel</mat-icon>
1226
+ </button>
1227
+ </mat-chip-row>
1228
+ }
1061
1229
  </mat-chip-grid>
1062
1230
  <input [matChipInputFor]="chipGrid"
1063
1231
  [matChipInputSeparatorKeyCodes]="separatorKeyCodes"
1064
1232
  [matChipInputAddOnBlur]="true"
1065
1233
  [placeholder]="options?.placeholder || ''"
1066
1234
  (matChipInputTokenEnd)="add($event)">
1067
- <mat-hint *ngIf="options?.description && (!options?.showErrors || !options?.errorMessage)"
1068
- align="end" [innerHTML]="options?.description"></mat-hint>
1235
+ @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
1236
+ <mat-hint
1237
+ align="end" [innerHTML]="$safeNavigationMigration(options?.description)"></mat-hint>
1238
+ }
1069
1239
  </mat-form-field>
1070
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
1071
- [innerHTML]="options?.errorMessage"></mat-error>`, standalone: false, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}\n"] }]
1240
+ @if (options?.showErrors && options?.errorMessage) {
1241
+ <mat-error
1242
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
1243
+ }`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}\n"] }]
1072
1244
  }], ctorParameters: () => [{ type: i1.JsonSchemaFormService }], propDecorators: { layoutNode: [{
1073
1245
  type: Input
1074
1246
  }], layoutIndex: [{
@@ -1092,110 +1264,138 @@ class MaterialDatepickerComponent {
1092
1264
  this.options.description = this.options.placeholder;
1093
1265
  }
1094
1266
  }
1095
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialDatepickerComponent, deps: [{ token: MAT_FORM_FIELD_DEFAULT_OPTIONS, optional: true }, { token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
1096
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: MaterialDatepickerComponent, isStandalone: false, selector: "material-datepicker-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
1267
+ 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 }); }
1268
+ 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: `
1097
1269
  <mat-form-field [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'fill'"
1098
- [class]="options?.htmlClass || ''"
1099
- [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || 'auto'"
1100
- [hideRequiredMarker]="options?.hideRequired ? 'true' : 'false'"
1101
- [style.width]="'100%'">
1102
- <mat-label *ngIf="!options?.notitle">{{options?.title}}</mat-label>
1103
- <span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"
1270
+ [class]="options?.htmlClass || ''"
1271
+ [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || 'auto'"
1272
+ [hideRequiredMarker]="options?.hideRequired ? 'true' : 'false'"
1273
+ [style.width]="'100%'">
1274
+ @if (!options?.notitle) {
1275
+ <mat-label>{{options?.title}}</mat-label>
1276
+ }
1277
+ @if (options?.prefix || options?.fieldAddonLeft) {
1278
+ <span matPrefix
1104
1279
  [innerHTML]="options?.prefix || options?.fieldAddonLeft"></span>
1105
- <input matInput *ngIf="boundControl"
1106
- [formControl]="formControl"
1107
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1108
- [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
1109
- [attr.readonly]="options?.readonly ? 'readonly' : null"
1110
- [id]="'control' + layoutNode?._id"
1111
- [max]="options?.maximum"
1112
- [matDatepicker]="picker"
1113
- [min]="options?.minimum"
1114
- [name]="controlName"
1115
- [placeholder]="options?.title"
1116
- [readonly]="options?.readonly"
1117
- [required]="options?.required"
1118
- [style.width]="'100%'"
1119
- (blur)="options.showErrors = true"
1120
- >
1121
- <input matInput *ngIf="!boundControl"
1122
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1123
- [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
1124
- [attr.readonly]="options?.readonly ? 'readonly' : null"
1125
- [disabled]="controlDisabled || options?.readonly"
1126
- [id]="'control' + layoutNode?._id"
1127
- [max]="options?.maximum"
1128
- [matDatepicker]="picker"
1129
- [min]="options?.minimum"
1130
- [name]="controlName"
1131
- [placeholder]="options?.title"
1132
- [required]="options?.required"
1133
- [style.width]="'100%'"
1134
- [readonly]="options?.readonly"
1135
- (blur)="options.showErrors = true"
1136
- >
1137
- <span matSuffix *ngIf="options?.suffix || options?.fieldAddonRight"
1280
+ }
1281
+ @if (boundControl) {
1282
+ <input matInput
1283
+ [formControl]="formControl"
1284
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1285
+ [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
1286
+ [attr.readonly]="options?.readonly ? 'readonly' : null"
1287
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
1288
+ [max]="$safeNavigationMigration(options?.maximum)"
1289
+ [matDatepicker]="picker"
1290
+ [min]="$safeNavigationMigration(options?.minimum)"
1291
+ [name]="controlName"
1292
+ [placeholder]="$safeNavigationMigration(options?.title)"
1293
+ [readonly]="$safeNavigationMigration(options?.readonly)"
1294
+ [required]="$safeNavigationMigration(options?.required)"
1295
+ [style.width]="'100%'"
1296
+ (blur)="options.showErrors = true"
1297
+ >
1298
+ }
1299
+ @if (!boundControl) {
1300
+ <input matInput
1301
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1302
+ [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
1303
+ [attr.readonly]="options?.readonly ? 'readonly' : null"
1304
+ [disabled]="controlDisabled || options?.readonly"
1305
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
1306
+ [max]="$safeNavigationMigration(options?.maximum)"
1307
+ [matDatepicker]="picker"
1308
+ [min]="$safeNavigationMigration(options?.minimum)"
1309
+ [name]="controlName"
1310
+ [placeholder]="$safeNavigationMigration(options?.title)"
1311
+ [required]="$safeNavigationMigration(options?.required)"
1312
+ [style.width]="'100%'"
1313
+ [readonly]="$safeNavigationMigration(options?.readonly)"
1314
+ (blur)="options.showErrors = true"
1315
+ >
1316
+ }
1317
+ @if (options?.suffix || options?.fieldAddonRight) {
1318
+ <span matSuffix
1138
1319
  [innerHTML]="options?.suffix || options?.fieldAddonRight"></span>
1139
- <mat-hint *ngIf="options?.description && (!options?.showErrors || !options?.errorMessage)"
1140
- align="end" [innerHTML]="options?.description"></mat-hint>
1320
+ }
1321
+ @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
1322
+ <mat-hint
1323
+ align="end" [innerHTML]="$safeNavigationMigration(options?.description)"></mat-hint>
1324
+ }
1141
1325
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
1142
1326
  </mat-form-field>
1143
1327
  <mat-datepicker #picker ></mat-datepicker>
1144
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
1145
- [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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$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: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6$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"] }] }); }
1328
+ @if (options?.showErrors && options?.errorMessage) {
1329
+ <mat-error
1330
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
1331
+ }`, 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 }); }
1146
1332
  }
1147
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialDatepickerComponent, decorators: [{
1333
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialDatepickerComponent, decorators: [{
1148
1334
  type: Component,
1149
1335
  args: [{ selector: 'material-datepicker-widget', template: `
1150
1336
  <mat-form-field [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'fill'"
1151
- [class]="options?.htmlClass || ''"
1152
- [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || 'auto'"
1153
- [hideRequiredMarker]="options?.hideRequired ? 'true' : 'false'"
1154
- [style.width]="'100%'">
1155
- <mat-label *ngIf="!options?.notitle">{{options?.title}}</mat-label>
1156
- <span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"
1337
+ [class]="options?.htmlClass || ''"
1338
+ [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || 'auto'"
1339
+ [hideRequiredMarker]="options?.hideRequired ? 'true' : 'false'"
1340
+ [style.width]="'100%'">
1341
+ @if (!options?.notitle) {
1342
+ <mat-label>{{options?.title}}</mat-label>
1343
+ }
1344
+ @if (options?.prefix || options?.fieldAddonLeft) {
1345
+ <span matPrefix
1157
1346
  [innerHTML]="options?.prefix || options?.fieldAddonLeft"></span>
1158
- <input matInput *ngIf="boundControl"
1159
- [formControl]="formControl"
1160
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1161
- [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
1162
- [attr.readonly]="options?.readonly ? 'readonly' : null"
1163
- [id]="'control' + layoutNode?._id"
1164
- [max]="options?.maximum"
1165
- [matDatepicker]="picker"
1166
- [min]="options?.minimum"
1167
- [name]="controlName"
1168
- [placeholder]="options?.title"
1169
- [readonly]="options?.readonly"
1170
- [required]="options?.required"
1171
- [style.width]="'100%'"
1172
- (blur)="options.showErrors = true"
1173
- >
1174
- <input matInput *ngIf="!boundControl"
1175
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1176
- [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
1177
- [attr.readonly]="options?.readonly ? 'readonly' : null"
1178
- [disabled]="controlDisabled || options?.readonly"
1179
- [id]="'control' + layoutNode?._id"
1180
- [max]="options?.maximum"
1181
- [matDatepicker]="picker"
1182
- [min]="options?.minimum"
1183
- [name]="controlName"
1184
- [placeholder]="options?.title"
1185
- [required]="options?.required"
1186
- [style.width]="'100%'"
1187
- [readonly]="options?.readonly"
1188
- (blur)="options.showErrors = true"
1189
- >
1190
- <span matSuffix *ngIf="options?.suffix || options?.fieldAddonRight"
1347
+ }
1348
+ @if (boundControl) {
1349
+ <input matInput
1350
+ [formControl]="formControl"
1351
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1352
+ [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
1353
+ [attr.readonly]="options?.readonly ? 'readonly' : null"
1354
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
1355
+ [max]="$safeNavigationMigration(options?.maximum)"
1356
+ [matDatepicker]="picker"
1357
+ [min]="$safeNavigationMigration(options?.minimum)"
1358
+ [name]="controlName"
1359
+ [placeholder]="$safeNavigationMigration(options?.title)"
1360
+ [readonly]="$safeNavigationMigration(options?.readonly)"
1361
+ [required]="$safeNavigationMigration(options?.required)"
1362
+ [style.width]="'100%'"
1363
+ (blur)="options.showErrors = true"
1364
+ >
1365
+ }
1366
+ @if (!boundControl) {
1367
+ <input matInput
1368
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1369
+ [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
1370
+ [attr.readonly]="options?.readonly ? 'readonly' : null"
1371
+ [disabled]="controlDisabled || options?.readonly"
1372
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
1373
+ [max]="$safeNavigationMigration(options?.maximum)"
1374
+ [matDatepicker]="picker"
1375
+ [min]="$safeNavigationMigration(options?.minimum)"
1376
+ [name]="controlName"
1377
+ [placeholder]="$safeNavigationMigration(options?.title)"
1378
+ [required]="$safeNavigationMigration(options?.required)"
1379
+ [style.width]="'100%'"
1380
+ [readonly]="$safeNavigationMigration(options?.readonly)"
1381
+ (blur)="options.showErrors = true"
1382
+ >
1383
+ }
1384
+ @if (options?.suffix || options?.fieldAddonRight) {
1385
+ <span matSuffix
1191
1386
  [innerHTML]="options?.suffix || options?.fieldAddonRight"></span>
1192
- <mat-hint *ngIf="options?.description && (!options?.showErrors || !options?.errorMessage)"
1193
- align="end" [innerHTML]="options?.description"></mat-hint>
1387
+ }
1388
+ @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
1389
+ <mat-hint
1390
+ align="end" [innerHTML]="$safeNavigationMigration(options?.description)"></mat-hint>
1391
+ }
1194
1392
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
1195
1393
  </mat-form-field>
1196
1394
  <mat-datepicker #picker ></mat-datepicker>
1197
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
1198
- [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"] }]
1395
+ @if (options?.showErrors && options?.errorMessage) {
1396
+ <mat-error
1397
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
1398
+ }`, 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"] }]
1199
1399
  }], ctorParameters: () => [{ type: undefined, decorators: [{
1200
1400
  type: Inject,
1201
1401
  args: [MAT_FORM_FIELD_DEFAULT_OPTIONS]
@@ -1291,12 +1491,12 @@ class MaterialDesignFrameworkComponent {
1291
1491
  removeItem() {
1292
1492
  this.jsf.removeItem(this);
1293
1493
  }
1294
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialDesignFrameworkComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
1295
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", 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 <svg *ngIf=\"showRemoveButton\"\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 <select-widget-widget\n [dataIndex]=\"dataIndex\"\n [layoutIndex]=\"layoutIndex\"\n [layoutNode]=\"widgetLayoutNode\"></select-widget-widget>\n</div>\n<div class=\"spacer\" *ngIf=\"widgetLayoutNode?.arrayItem && widgetLayoutNode?.type !== '$ref'\"></div>\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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
1494
+ 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 }); }
1495
+ 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 }); }
1296
1496
  }
1297
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialDesignFrameworkComponent, decorators: [{
1497
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialDesignFrameworkComponent, decorators: [{
1298
1498
  type: Component,
1299
- 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 <svg *ngIf=\"showRemoveButton\"\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 <select-widget-widget\n [dataIndex]=\"dataIndex\"\n [layoutIndex]=\"layoutIndex\"\n [layoutNode]=\"widgetLayoutNode\"></select-widget-widget>\n</div>\n<div class=\"spacer\" *ngIf=\"widgetLayoutNode?.arrayItem && widgetLayoutNode?.type !== '$ref'\"></div>\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"] }]
1499
+ 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"] }]
1300
1500
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.JsonSchemaFormService }], propDecorators: { layoutNode: [{
1301
1501
  type: Input
1302
1502
  }], layoutIndex: [{
@@ -1328,11 +1528,13 @@ class MaterialFileComponent {
1328
1528
  };
1329
1529
  reader.readAsDataURL(file);
1330
1530
  }
1331
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialFileComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
1332
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: MaterialFileComponent, isStandalone: false, selector: "material-file-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
1531
+ 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 }); }
1532
+ 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: `
1333
1533
  <div [class]="options?.htmlClass || ''" [style.width]="'100%'">
1334
- <label *ngIf="!options?.notitle"
1534
+ @if (!options?.notitle) {
1535
+ <label
1335
1536
  [class]="options?.labelHtmlClass || ''">{{options?.title}}</label>
1537
+ }
1336
1538
  <div>
1337
1539
  <button mat-raised-button type="button"
1338
1540
  [disabled]="controlDisabled || options?.readonly"
@@ -1346,19 +1548,25 @@ class MaterialFileComponent {
1346
1548
  [hidden]="true"
1347
1549
  (change)="onFileSelect($event)">
1348
1550
  </div>
1349
- <mat-hint *ngIf="options?.description && (!options?.showErrors || !options?.errorMessage)"
1350
- [innerHTML]="options?.description"
1551
+ @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
1552
+ <mat-hint
1553
+ [innerHTML]="$safeNavigationMigration(options?.description)"
1351
1554
  style="display:block; font-size:75%; color:rgba(0,0,0,.6); margin-top:4px;"></mat-hint>
1555
+ }
1352
1556
  </div>
1353
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
1354
- [innerHTML]="options?.errorMessage"></mat-error>`, isInline: true, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$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: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
1557
+ @if (options?.showErrors && options?.errorMessage) {
1558
+ <mat-error
1559
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
1560
+ }`, 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 }); }
1355
1561
  }
1356
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialFileComponent, decorators: [{
1562
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialFileComponent, decorators: [{
1357
1563
  type: Component,
1358
1564
  args: [{ selector: 'material-file-widget', template: `
1359
1565
  <div [class]="options?.htmlClass || ''" [style.width]="'100%'">
1360
- <label *ngIf="!options?.notitle"
1566
+ @if (!options?.notitle) {
1567
+ <label
1361
1568
  [class]="options?.labelHtmlClass || ''">{{options?.title}}</label>
1569
+ }
1362
1570
  <div>
1363
1571
  <button mat-raised-button type="button"
1364
1572
  [disabled]="controlDisabled || options?.readonly"
@@ -1372,12 +1580,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
1372
1580
  [hidden]="true"
1373
1581
  (change)="onFileSelect($event)">
1374
1582
  </div>
1375
- <mat-hint *ngIf="options?.description && (!options?.showErrors || !options?.errorMessage)"
1376
- [innerHTML]="options?.description"
1583
+ @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
1584
+ <mat-hint
1585
+ [innerHTML]="$safeNavigationMigration(options?.description)"
1377
1586
  style="display:block; font-size:75%; color:rgba(0,0,0,.6); margin-top:4px;"></mat-hint>
1587
+ }
1378
1588
  </div>
1379
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
1380
- [innerHTML]="options?.errorMessage"></mat-error>`, standalone: false, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}\n"] }]
1589
+ @if (options?.showErrors && options?.errorMessage) {
1590
+ <mat-error
1591
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
1592
+ }`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}\n"] }]
1381
1593
  }], ctorParameters: () => [{ type: i1.JsonSchemaFormService }], propDecorators: { layoutNode: [{
1382
1594
  type: Input
1383
1595
  }], layoutIndex: [{
@@ -1404,61 +1616,79 @@ class MaterialInputComponent {
1404
1616
  updateValue(event) {
1405
1617
  this.jsf.updateValue(this, event.target.value);
1406
1618
  }
1407
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialInputComponent, deps: [{ token: MAT_FORM_FIELD_DEFAULT_OPTIONS, optional: true }, { token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
1408
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: MaterialInputComponent, isStandalone: false, selector: "material-input-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
1619
+ 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 }); }
1620
+ 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: `
1409
1621
  <mat-form-field [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'fill'"
1410
1622
  [class]="options?.htmlClass || ''"
1411
1623
  [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || 'auto'"
1412
1624
  [hideRequiredMarker]="options?.hideRequired ? 'true' : 'false'"
1413
1625
  [style.width]="'100%'">
1414
- <mat-label *ngIf="!options?.notitle">{{options?.title}}</mat-label>
1415
- <span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"
1626
+ @if (!options?.notitle) {
1627
+ <mat-label>{{options?.title}}</mat-label>
1628
+ }
1629
+ @if (options?.prefix || options?.fieldAddonLeft) {
1630
+ <span matPrefix
1416
1631
  [innerHTML]="options?.prefix || options?.fieldAddonLeft"></span>
1417
- <input matInput *ngIf="boundControl"
1418
- [formControl]="formControl"
1419
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1420
- [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
1421
- [attr.maxlength]="options?.maxLength"
1422
- [attr.minlength]="options?.minLength"
1423
- [attr.pattern]="options?.pattern"
1424
- [readonly]="options?.readonly ? 'readonly' : null"
1425
- [id]="'control' + layoutNode?._id"
1426
- [name]="controlName"
1427
- [placeholder]="options?.notitle ? options?.placeholder : options?.title"
1428
- [required]="options?.required"
1429
- [style.width]="'100%'"
1430
- [type]="layoutNode?.type"
1431
- (blur)="options.showErrors = true">
1432
- <input matInput *ngIf="!boundControl"
1433
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1434
- [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
1435
- [attr.maxlength]="options?.maxLength"
1436
- [attr.minlength]="options?.minLength"
1437
- [attr.pattern]="options?.pattern"
1438
- [disabled]="controlDisabled"
1439
- [id]="'control' + layoutNode?._id"
1440
- [name]="controlName"
1441
- [placeholder]="options?.notitle ? options?.placeholder : options?.title"
1442
- [readonly]="options?.readonly ? 'readonly' : null"
1443
- [required]="options?.required"
1444
- [style.width]="'100%'"
1445
- [type]="layoutNode?.type"
1446
- [value]="controlValue"
1447
- (input)="updateValue($event)"
1448
- (blur)="options.showErrors = true">
1449
- <span matSuffix *ngIf="options?.suffix || options?.fieldAddonRight"
1632
+ }
1633
+ @if (boundControl) {
1634
+ <input matInput
1635
+ [formControl]="formControl"
1636
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1637
+ [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
1638
+ [attr.maxlength]="options?.maxLength"
1639
+ [attr.minlength]="options?.minLength"
1640
+ [attr.pattern]="options?.pattern"
1641
+ [readonly]="options?.readonly ? 'readonly' : null"
1642
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
1643
+ [name]="controlName"
1644
+ [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
1645
+ [required]="$safeNavigationMigration(options?.required)"
1646
+ [style.width]="'100%'"
1647
+ [type]="$safeNavigationMigration(layoutNode?.type)"
1648
+ (blur)="options.showErrors = true">
1649
+ }
1650
+ @if (!boundControl) {
1651
+ <input matInput
1652
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1653
+ [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
1654
+ [attr.maxlength]="options?.maxLength"
1655
+ [attr.minlength]="options?.minLength"
1656
+ [attr.pattern]="options?.pattern"
1657
+ [disabled]="controlDisabled"
1658
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
1659
+ [name]="controlName"
1660
+ [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
1661
+ [readonly]="options?.readonly ? 'readonly' : null"
1662
+ [required]="$safeNavigationMigration(options?.required)"
1663
+ [style.width]="'100%'"
1664
+ [type]="$safeNavigationMigration(layoutNode?.type)"
1665
+ [value]="controlValue"
1666
+ (input)="updateValue($event)"
1667
+ (blur)="options.showErrors = true">
1668
+ }
1669
+ @if (options?.suffix || options?.fieldAddonRight) {
1670
+ <span matSuffix
1450
1671
  [innerHTML]="options?.suffix || options?.fieldAddonRight"></span>
1451
- <mat-hint *ngIf="options?.description && (!options?.showErrors || !options?.errorMessage)"
1452
- align="end" [innerHTML]="options?.description"></mat-hint>
1453
- <mat-autocomplete *ngIf="options?.typeahead?.source">
1454
- <mat-option *ngFor="let word of options?.typeahead?.source"
1455
- [value]="word">{{word}}</mat-option>
1456
- </mat-autocomplete>
1672
+ }
1673
+ @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
1674
+ <mat-hint
1675
+ align="end" [innerHTML]="$safeNavigationMigration(options?.description)"></mat-hint>
1676
+ }
1677
+ @if (options?.typeahead?.source) {
1678
+ <mat-autocomplete>
1679
+ @for (word of options?.typeahead?.source; track word) {
1680
+ <mat-option
1681
+ [value]="word">{{word}}</mat-option>
1682
+ }
1683
+ </mat-autocomplete>
1684
+ }
1457
1685
  </mat-form-field>
1458
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
1459
- [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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$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: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$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: i4$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6$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"] }] }); }
1686
+ @if (options?.showErrors && options?.errorMessage) {
1687
+ <mat-error
1688
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
1689
+ }`, 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 }); }
1460
1690
  }
1461
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialInputComponent, decorators: [{
1691
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialInputComponent, decorators: [{
1462
1692
  type: Component,
1463
1693
  args: [{ selector: 'material-input-widget', template: `
1464
1694
  <mat-form-field [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'fill'"
@@ -1466,52 +1696,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
1466
1696
  [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || 'auto'"
1467
1697
  [hideRequiredMarker]="options?.hideRequired ? 'true' : 'false'"
1468
1698
  [style.width]="'100%'">
1469
- <mat-label *ngIf="!options?.notitle">{{options?.title}}</mat-label>
1470
- <span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"
1699
+ @if (!options?.notitle) {
1700
+ <mat-label>{{options?.title}}</mat-label>
1701
+ }
1702
+ @if (options?.prefix || options?.fieldAddonLeft) {
1703
+ <span matPrefix
1471
1704
  [innerHTML]="options?.prefix || options?.fieldAddonLeft"></span>
1472
- <input matInput *ngIf="boundControl"
1473
- [formControl]="formControl"
1474
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1475
- [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
1476
- [attr.maxlength]="options?.maxLength"
1477
- [attr.minlength]="options?.minLength"
1478
- [attr.pattern]="options?.pattern"
1479
- [readonly]="options?.readonly ? 'readonly' : null"
1480
- [id]="'control' + layoutNode?._id"
1481
- [name]="controlName"
1482
- [placeholder]="options?.notitle ? options?.placeholder : options?.title"
1483
- [required]="options?.required"
1484
- [style.width]="'100%'"
1485
- [type]="layoutNode?.type"
1486
- (blur)="options.showErrors = true">
1487
- <input matInput *ngIf="!boundControl"
1488
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1489
- [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
1490
- [attr.maxlength]="options?.maxLength"
1491
- [attr.minlength]="options?.minLength"
1492
- [attr.pattern]="options?.pattern"
1493
- [disabled]="controlDisabled"
1494
- [id]="'control' + layoutNode?._id"
1495
- [name]="controlName"
1496
- [placeholder]="options?.notitle ? options?.placeholder : options?.title"
1497
- [readonly]="options?.readonly ? 'readonly' : null"
1498
- [required]="options?.required"
1499
- [style.width]="'100%'"
1500
- [type]="layoutNode?.type"
1501
- [value]="controlValue"
1502
- (input)="updateValue($event)"
1503
- (blur)="options.showErrors = true">
1504
- <span matSuffix *ngIf="options?.suffix || options?.fieldAddonRight"
1705
+ }
1706
+ @if (boundControl) {
1707
+ <input matInput
1708
+ [formControl]="formControl"
1709
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1710
+ [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
1711
+ [attr.maxlength]="options?.maxLength"
1712
+ [attr.minlength]="options?.minLength"
1713
+ [attr.pattern]="options?.pattern"
1714
+ [readonly]="options?.readonly ? 'readonly' : null"
1715
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
1716
+ [name]="controlName"
1717
+ [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
1718
+ [required]="$safeNavigationMigration(options?.required)"
1719
+ [style.width]="'100%'"
1720
+ [type]="$safeNavigationMigration(layoutNode?.type)"
1721
+ (blur)="options.showErrors = true">
1722
+ }
1723
+ @if (!boundControl) {
1724
+ <input matInput
1725
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1726
+ [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
1727
+ [attr.maxlength]="options?.maxLength"
1728
+ [attr.minlength]="options?.minLength"
1729
+ [attr.pattern]="options?.pattern"
1730
+ [disabled]="controlDisabled"
1731
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
1732
+ [name]="controlName"
1733
+ [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
1734
+ [readonly]="options?.readonly ? 'readonly' : null"
1735
+ [required]="$safeNavigationMigration(options?.required)"
1736
+ [style.width]="'100%'"
1737
+ [type]="$safeNavigationMigration(layoutNode?.type)"
1738
+ [value]="controlValue"
1739
+ (input)="updateValue($event)"
1740
+ (blur)="options.showErrors = true">
1741
+ }
1742
+ @if (options?.suffix || options?.fieldAddonRight) {
1743
+ <span matSuffix
1505
1744
  [innerHTML]="options?.suffix || options?.fieldAddonRight"></span>
1506
- <mat-hint *ngIf="options?.description && (!options?.showErrors || !options?.errorMessage)"
1507
- align="end" [innerHTML]="options?.description"></mat-hint>
1508
- <mat-autocomplete *ngIf="options?.typeahead?.source">
1509
- <mat-option *ngFor="let word of options?.typeahead?.source"
1510
- [value]="word">{{word}}</mat-option>
1511
- </mat-autocomplete>
1745
+ }
1746
+ @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
1747
+ <mat-hint
1748
+ align="end" [innerHTML]="$safeNavigationMigration(options?.description)"></mat-hint>
1749
+ }
1750
+ @if (options?.typeahead?.source) {
1751
+ <mat-autocomplete>
1752
+ @for (word of options?.typeahead?.source; track word) {
1753
+ <mat-option
1754
+ [value]="word">{{word}}</mat-option>
1755
+ }
1756
+ </mat-autocomplete>
1757
+ }
1512
1758
  </mat-form-field>
1513
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
1514
- [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"] }]
1759
+ @if (options?.showErrors && options?.errorMessage) {
1760
+ <mat-error
1761
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
1762
+ }`, 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"] }]
1515
1763
  }], ctorParameters: () => [{ type: undefined, decorators: [{
1516
1764
  type: Inject,
1517
1765
  args: [MAT_FORM_FIELD_DEFAULT_OPTIONS]
@@ -1551,106 +1799,138 @@ class MaterialNumberComponent {
1551
1799
  updateValue(event) {
1552
1800
  this.jsf.updateValue(this, event.target.value);
1553
1801
  }
1554
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialNumberComponent, deps: [{ token: MAT_FORM_FIELD_DEFAULT_OPTIONS, optional: true }, { token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
1555
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: MaterialNumberComponent, isStandalone: false, selector: "material-number-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
1802
+ 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 }); }
1803
+ 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: `
1556
1804
  <mat-form-field [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'fill'"
1557
- [class]="options?.htmlClass || ''"
1558
- [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || 'auto'"
1559
- [hideRequiredMarker]="options?.hideRequired ? 'true' : 'false'"
1560
- [style.width]="'100%'">
1561
- <mat-label *ngIf="!options?.notitle">{{options?.title}}</mat-label>
1562
- <span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"
1805
+ [class]="options?.htmlClass || ''"
1806
+ [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || 'auto'"
1807
+ [hideRequiredMarker]="options?.hideRequired ? 'true' : 'false'"
1808
+ [style.width]="'100%'">
1809
+ @if (!options?.notitle) {
1810
+ <mat-label>{{options?.title}}</mat-label>
1811
+ }
1812
+ @if (options?.prefix || options?.fieldAddonLeft) {
1813
+ <span matPrefix
1563
1814
  [innerHTML]="options?.prefix || options?.fieldAddonLeft"></span>
1564
- <input matInput *ngIf="boundControl"
1565
- [formControl]="formControl"
1566
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1567
- [attr.max]="maxValue"
1568
- [attr.min]="minValue"
1569
- [attr.step]="options?.multipleOf || options?.step || 'any'"
1570
- [id]="'control' + layoutNode?._id"
1571
- [name]="controlName"
1572
- [placeholder]="options?.notitle ? options?.placeholder : options?.title"
1573
- [readonly]="options?.readonly ? 'readonly' : null"
1574
- [required]="options?.required"
1575
- [style.width]="'100%'"
1576
- [type]="'number'"
1577
- (blur)="options.showErrors = true">
1578
- <input matInput *ngIf="!boundControl"
1579
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1580
- [attr.max]="maxValue"
1581
- [attr.min]="minValue"
1582
- [attr.step]="options?.multipleOf || options?.step || 'any'"
1583
- [disabled]="controlDisabled"
1584
- [id]="'control' + layoutNode?._id"
1585
- [name]="controlName"
1586
- [placeholder]="options?.notitle ? options?.placeholder : options?.title"
1587
- [readonly]="options?.readonly ? 'readonly' : null"
1588
- [required]="options?.required"
1589
- [style.width]="'100%'"
1590
- [type]="'number'"
1591
- [value]="controlValue"
1592
- (input)="updateValue($event)"
1593
- (blur)="options.showErrors = true">
1594
- <span matSuffix *ngIf="options?.suffix || options?.fieldAddonRight"
1815
+ }
1816
+ @if (boundControl) {
1817
+ <input matInput
1818
+ [formControl]="formControl"
1819
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1820
+ [attr.max]="maxValue"
1821
+ [attr.min]="minValue"
1822
+ [attr.step]="options?.multipleOf || options?.step || 'any'"
1823
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
1824
+ [name]="controlName"
1825
+ [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
1826
+ [readonly]="options?.readonly ? 'readonly' : null"
1827
+ [required]="$safeNavigationMigration(options?.required)"
1828
+ [style.width]="'100%'"
1829
+ [type]="'number'"
1830
+ (blur)="options.showErrors = true">
1831
+ }
1832
+ @if (!boundControl) {
1833
+ <input matInput
1834
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1835
+ [attr.max]="maxValue"
1836
+ [attr.min]="minValue"
1837
+ [attr.step]="options?.multipleOf || options?.step || 'any'"
1838
+ [disabled]="controlDisabled"
1839
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
1840
+ [name]="controlName"
1841
+ [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
1842
+ [readonly]="options?.readonly ? 'readonly' : null"
1843
+ [required]="$safeNavigationMigration(options?.required)"
1844
+ [style.width]="'100%'"
1845
+ [type]="'number'"
1846
+ [value]="controlValue"
1847
+ (input)="updateValue($event)"
1848
+ (blur)="options.showErrors = true">
1849
+ }
1850
+ @if (options?.suffix || options?.fieldAddonRight) {
1851
+ <span matSuffix
1595
1852
  [innerHTML]="options?.suffix || options?.fieldAddonRight"></span>
1596
- <mat-hint *ngIf="layoutNode?.type === 'range'" align="start"
1853
+ }
1854
+ @if (layoutNode?.type === 'range') {
1855
+ <mat-hint align="start"
1597
1856
  [innerHTML]="controlValue"></mat-hint>
1598
- <mat-hint *ngIf="options?.description && (!options?.showErrors || !options?.errorMessage)"
1599
- align="end" [innerHTML]="options?.description"></mat-hint>
1857
+ }
1858
+ @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
1859
+ <mat-hint
1860
+ align="end" [innerHTML]="$safeNavigationMigration(options?.description)"></mat-hint>
1861
+ }
1600
1862
  </mat-form-field>
1601
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
1602
- [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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$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: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6$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"] }] }); }
1863
+ @if (options?.showErrors && options?.errorMessage) {
1864
+ <mat-error
1865
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
1866
+ }`, 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 }); }
1603
1867
  }
1604
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialNumberComponent, decorators: [{
1868
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialNumberComponent, decorators: [{
1605
1869
  type: Component,
1606
1870
  args: [{ selector: 'material-number-widget', template: `
1607
1871
  <mat-form-field [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'fill'"
1608
- [class]="options?.htmlClass || ''"
1609
- [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || 'auto'"
1610
- [hideRequiredMarker]="options?.hideRequired ? 'true' : 'false'"
1611
- [style.width]="'100%'">
1612
- <mat-label *ngIf="!options?.notitle">{{options?.title}}</mat-label>
1613
- <span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"
1872
+ [class]="options?.htmlClass || ''"
1873
+ [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || 'auto'"
1874
+ [hideRequiredMarker]="options?.hideRequired ? 'true' : 'false'"
1875
+ [style.width]="'100%'">
1876
+ @if (!options?.notitle) {
1877
+ <mat-label>{{options?.title}}</mat-label>
1878
+ }
1879
+ @if (options?.prefix || options?.fieldAddonLeft) {
1880
+ <span matPrefix
1614
1881
  [innerHTML]="options?.prefix || options?.fieldAddonLeft"></span>
1615
- <input matInput *ngIf="boundControl"
1616
- [formControl]="formControl"
1617
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1618
- [attr.max]="maxValue"
1619
- [attr.min]="minValue"
1620
- [attr.step]="options?.multipleOf || options?.step || 'any'"
1621
- [id]="'control' + layoutNode?._id"
1622
- [name]="controlName"
1623
- [placeholder]="options?.notitle ? options?.placeholder : options?.title"
1624
- [readonly]="options?.readonly ? 'readonly' : null"
1625
- [required]="options?.required"
1626
- [style.width]="'100%'"
1627
- [type]="'number'"
1628
- (blur)="options.showErrors = true">
1629
- <input matInput *ngIf="!boundControl"
1630
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1631
- [attr.max]="maxValue"
1632
- [attr.min]="minValue"
1633
- [attr.step]="options?.multipleOf || options?.step || 'any'"
1634
- [disabled]="controlDisabled"
1635
- [id]="'control' + layoutNode?._id"
1636
- [name]="controlName"
1637
- [placeholder]="options?.notitle ? options?.placeholder : options?.title"
1638
- [readonly]="options?.readonly ? 'readonly' : null"
1639
- [required]="options?.required"
1640
- [style.width]="'100%'"
1641
- [type]="'number'"
1642
- [value]="controlValue"
1643
- (input)="updateValue($event)"
1644
- (blur)="options.showErrors = true">
1645
- <span matSuffix *ngIf="options?.suffix || options?.fieldAddonRight"
1882
+ }
1883
+ @if (boundControl) {
1884
+ <input matInput
1885
+ [formControl]="formControl"
1886
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1887
+ [attr.max]="maxValue"
1888
+ [attr.min]="minValue"
1889
+ [attr.step]="options?.multipleOf || options?.step || 'any'"
1890
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
1891
+ [name]="controlName"
1892
+ [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
1893
+ [readonly]="options?.readonly ? 'readonly' : null"
1894
+ [required]="$safeNavigationMigration(options?.required)"
1895
+ [style.width]="'100%'"
1896
+ [type]="'number'"
1897
+ (blur)="options.showErrors = true">
1898
+ }
1899
+ @if (!boundControl) {
1900
+ <input matInput
1901
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1902
+ [attr.max]="maxValue"
1903
+ [attr.min]="minValue"
1904
+ [attr.step]="options?.multipleOf || options?.step || 'any'"
1905
+ [disabled]="controlDisabled"
1906
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
1907
+ [name]="controlName"
1908
+ [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
1909
+ [readonly]="options?.readonly ? 'readonly' : null"
1910
+ [required]="$safeNavigationMigration(options?.required)"
1911
+ [style.width]="'100%'"
1912
+ [type]="'number'"
1913
+ [value]="controlValue"
1914
+ (input)="updateValue($event)"
1915
+ (blur)="options.showErrors = true">
1916
+ }
1917
+ @if (options?.suffix || options?.fieldAddonRight) {
1918
+ <span matSuffix
1646
1919
  [innerHTML]="options?.suffix || options?.fieldAddonRight"></span>
1647
- <mat-hint *ngIf="layoutNode?.type === 'range'" align="start"
1920
+ }
1921
+ @if (layoutNode?.type === 'range') {
1922
+ <mat-hint align="start"
1648
1923
  [innerHTML]="controlValue"></mat-hint>
1649
- <mat-hint *ngIf="options?.description && (!options?.showErrors || !options?.errorMessage)"
1650
- align="end" [innerHTML]="options?.description"></mat-hint>
1924
+ }
1925
+ @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
1926
+ <mat-hint
1927
+ align="end" [innerHTML]="$safeNavigationMigration(options?.description)"></mat-hint>
1928
+ }
1651
1929
  </mat-form-field>
1652
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
1653
- [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"] }]
1930
+ @if (options?.showErrors && options?.errorMessage) {
1931
+ <mat-error
1932
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
1933
+ }`, 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"] }]
1654
1934
  }], ctorParameters: () => [{ type: undefined, decorators: [{
1655
1935
  type: Inject,
1656
1936
  args: [MAT_FORM_FIELD_DEFAULT_OPTIONS]
@@ -1726,69 +2006,91 @@ class MaterialOneOfComponent {
1726
2006
  this.options.showErrors = true;
1727
2007
  this.jsf.updateValue(this, event.value);
1728
2008
  }
1729
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialOneOfComponent, deps: [{ token: MAT_FORM_FIELD_DEFAULT_OPTIONS, optional: true }, { token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
1730
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: MaterialOneOfComponent, isStandalone: false, selector: "material-one-of-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
2009
+ 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 }); }
2010
+ 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: `
1731
2011
  <mat-form-field
1732
2012
  [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'fill'"
1733
2013
  [class]="options?.htmlClass || ''"
1734
2014
  [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || 'auto'"
1735
2015
  [style.width]="'100%'">
1736
- <mat-label *ngIf="!options?.notitle">{{options?.title}}</mat-label>
1737
-
1738
- <mat-select *ngIf="boundControl"
1739
- [formControl]="formControl"
1740
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1741
- [id]="'control' + layoutNode?._id"
1742
- [placeholder]="options?.notitle ? options?.placeholder : options?.title"
1743
- [required]="options?.required"
1744
- [style.width]="'100%'"
1745
- (blur)="options.showErrors = true">
1746
- <mat-option *ngFor="let item of selectList" [value]="item?.value">
1747
- <span [innerHTML]="item?.name"></span>
1748
- </mat-option>
1749
- </mat-select>
1750
-
1751
- <mat-select *ngIf="!boundControl && !isFieldset"
1752
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1753
- [id]="'control' + layoutNode?._id"
1754
- [disabled]="controlDisabled || options?.readonly"
1755
- [placeholder]="options?.notitle ? options?.placeholder : options?.title"
1756
- [required]="options?.required"
1757
- [style.width]="'100%'"
1758
- [value]="controlValue"
1759
- (selectionChange)="updateValue($event)"
1760
- (blur)="options.showErrors = true">
1761
- <mat-option *ngFor="let item of selectList" [value]="item?.value">
1762
- <span [innerHTML]="item?.name"></span>
1763
- </mat-option>
1764
- </mat-select>
1765
-
1766
- <mat-select *ngIf="!boundControl && isFieldset"
1767
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1768
- [id]="'control' + layoutNode?._id"
1769
- [disabled]="controlDisabled || options?.readonly"
1770
- [style.width]="'100%'"
1771
- [value]="selectedValue"
1772
- (selectionChange)="selectChild($event)">
1773
- <mat-option *ngFor="let item of selectList" [value]="item?.value">
1774
- <span [innerHTML]="item?.name"></span>
1775
- </mat-option>
1776
- </mat-select>
1777
-
1778
- <mat-hint *ngIf="options?.description && (!options?.showErrors || !options?.errorMessage)"
1779
- align="end" [innerHTML]="options?.description"></mat-hint>
2016
+ @if (!options?.notitle) {
2017
+ <mat-label>{{options?.title}}</mat-label>
2018
+ }
2019
+
2020
+ @if (boundControl) {
2021
+ <mat-select
2022
+ [formControl]="formControl"
2023
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2024
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
2025
+ [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
2026
+ [required]="$safeNavigationMigration(options?.required)"
2027
+ [style.width]="'100%'"
2028
+ (blur)="options.showErrors = true">
2029
+ @for (item of selectList; track item) {
2030
+ <mat-option [value]="$safeNavigationMigration(item?.value)">
2031
+ <span [innerHTML]="$safeNavigationMigration(item?.name)"></span>
2032
+ </mat-option>
2033
+ }
2034
+ </mat-select>
2035
+ }
2036
+
2037
+ @if (!boundControl && !isFieldset) {
2038
+ <mat-select
2039
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2040
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
2041
+ [disabled]="controlDisabled || options?.readonly"
2042
+ [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
2043
+ [required]="$safeNavigationMigration(options?.required)"
2044
+ [style.width]="'100%'"
2045
+ [value]="controlValue"
2046
+ (selectionChange)="updateValue($event)"
2047
+ (blur)="options.showErrors = true">
2048
+ @for (item of selectList; track item) {
2049
+ <mat-option [value]="$safeNavigationMigration(item?.value)">
2050
+ <span [innerHTML]="$safeNavigationMigration(item?.name)"></span>
2051
+ </mat-option>
2052
+ }
2053
+ </mat-select>
2054
+ }
2055
+
2056
+ @if (!boundControl && isFieldset) {
2057
+ <mat-select
2058
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2059
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
2060
+ [disabled]="controlDisabled || options?.readonly"
2061
+ [style.width]="'100%'"
2062
+ [value]="selectedValue"
2063
+ (selectionChange)="selectChild($event)">
2064
+ @for (item of selectList; track item) {
2065
+ <mat-option [value]="$safeNavigationMigration(item?.value)">
2066
+ <span [innerHTML]="$safeNavigationMigration(item?.name)"></span>
2067
+ </mat-option>
2068
+ }
2069
+ </mat-select>
2070
+ }
2071
+
2072
+ @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
2073
+ <mat-hint
2074
+ align="end" [innerHTML]="$safeNavigationMigration(options?.description)"></mat-hint>
2075
+ }
1780
2076
  </mat-form-field>
1781
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
1782
- [innerHTML]="options?.errorMessage"></mat-error>
1783
-
1784
- <div *ngFor="let layoutItem of layoutNode?.items; let i = index">
1785
- <select-framework-widget *ngIf="isFieldset && selectedItem === i"
1786
- [dataIndex]="layoutNode?.dataType === 'array' ? (dataIndex || []).concat(i) : dataIndex"
1787
- [layoutIndex]="(layoutIndex || []).concat(i)"
1788
- [layoutNode]="layoutItem"></select-framework-widget>
1789
- </div>`, isInline: true, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i6$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"] }] }); }
2077
+ @if (options?.showErrors && options?.errorMessage) {
2078
+ <mat-error
2079
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
2080
+ }
2081
+
2082
+ @for (layoutItem of layoutNode?.items; track layoutItem; let i = $index) {
2083
+ <div>
2084
+ @if (isFieldset && selectedItem === i) {
2085
+ <select-framework-widget
2086
+ [dataIndex]="layoutNode?.dataType === 'array' ? (dataIndex || []).concat(i) : dataIndex"
2087
+ [layoutIndex]="(layoutIndex || []).concat(i)"
2088
+ [layoutNode]="layoutItem"></select-framework-widget>
2089
+ }
2090
+ </div>
2091
+ }`, 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 }); }
1790
2092
  }
1791
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialOneOfComponent, decorators: [{
2093
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialOneOfComponent, decorators: [{
1792
2094
  type: Component,
1793
2095
  args: [{ selector: 'material-one-of-widget', template: `
1794
2096
  <mat-form-field
@@ -1796,60 +2098,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
1796
2098
  [class]="options?.htmlClass || ''"
1797
2099
  [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || 'auto'"
1798
2100
  [style.width]="'100%'">
1799
- <mat-label *ngIf="!options?.notitle">{{options?.title}}</mat-label>
1800
-
1801
- <mat-select *ngIf="boundControl"
1802
- [formControl]="formControl"
1803
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1804
- [id]="'control' + layoutNode?._id"
1805
- [placeholder]="options?.notitle ? options?.placeholder : options?.title"
1806
- [required]="options?.required"
1807
- [style.width]="'100%'"
1808
- (blur)="options.showErrors = true">
1809
- <mat-option *ngFor="let item of selectList" [value]="item?.value">
1810
- <span [innerHTML]="item?.name"></span>
1811
- </mat-option>
1812
- </mat-select>
1813
-
1814
- <mat-select *ngIf="!boundControl && !isFieldset"
1815
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1816
- [id]="'control' + layoutNode?._id"
1817
- [disabled]="controlDisabled || options?.readonly"
1818
- [placeholder]="options?.notitle ? options?.placeholder : options?.title"
1819
- [required]="options?.required"
1820
- [style.width]="'100%'"
1821
- [value]="controlValue"
1822
- (selectionChange)="updateValue($event)"
1823
- (blur)="options.showErrors = true">
1824
- <mat-option *ngFor="let item of selectList" [value]="item?.value">
1825
- <span [innerHTML]="item?.name"></span>
1826
- </mat-option>
1827
- </mat-select>
1828
-
1829
- <mat-select *ngIf="!boundControl && isFieldset"
1830
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1831
- [id]="'control' + layoutNode?._id"
1832
- [disabled]="controlDisabled || options?.readonly"
1833
- [style.width]="'100%'"
1834
- [value]="selectedValue"
1835
- (selectionChange)="selectChild($event)">
1836
- <mat-option *ngFor="let item of selectList" [value]="item?.value">
1837
- <span [innerHTML]="item?.name"></span>
1838
- </mat-option>
1839
- </mat-select>
1840
-
1841
- <mat-hint *ngIf="options?.description && (!options?.showErrors || !options?.errorMessage)"
1842
- align="end" [innerHTML]="options?.description"></mat-hint>
2101
+ @if (!options?.notitle) {
2102
+ <mat-label>{{options?.title}}</mat-label>
2103
+ }
2104
+
2105
+ @if (boundControl) {
2106
+ <mat-select
2107
+ [formControl]="formControl"
2108
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2109
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
2110
+ [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
2111
+ [required]="$safeNavigationMigration(options?.required)"
2112
+ [style.width]="'100%'"
2113
+ (blur)="options.showErrors = true">
2114
+ @for (item of selectList; track item) {
2115
+ <mat-option [value]="$safeNavigationMigration(item?.value)">
2116
+ <span [innerHTML]="$safeNavigationMigration(item?.name)"></span>
2117
+ </mat-option>
2118
+ }
2119
+ </mat-select>
2120
+ }
2121
+
2122
+ @if (!boundControl && !isFieldset) {
2123
+ <mat-select
2124
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2125
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
2126
+ [disabled]="controlDisabled || options?.readonly"
2127
+ [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
2128
+ [required]="$safeNavigationMigration(options?.required)"
2129
+ [style.width]="'100%'"
2130
+ [value]="controlValue"
2131
+ (selectionChange)="updateValue($event)"
2132
+ (blur)="options.showErrors = true">
2133
+ @for (item of selectList; track item) {
2134
+ <mat-option [value]="$safeNavigationMigration(item?.value)">
2135
+ <span [innerHTML]="$safeNavigationMigration(item?.name)"></span>
2136
+ </mat-option>
2137
+ }
2138
+ </mat-select>
2139
+ }
2140
+
2141
+ @if (!boundControl && isFieldset) {
2142
+ <mat-select
2143
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2144
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
2145
+ [disabled]="controlDisabled || options?.readonly"
2146
+ [style.width]="'100%'"
2147
+ [value]="selectedValue"
2148
+ (selectionChange)="selectChild($event)">
2149
+ @for (item of selectList; track item) {
2150
+ <mat-option [value]="$safeNavigationMigration(item?.value)">
2151
+ <span [innerHTML]="$safeNavigationMigration(item?.name)"></span>
2152
+ </mat-option>
2153
+ }
2154
+ </mat-select>
2155
+ }
2156
+
2157
+ @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
2158
+ <mat-hint
2159
+ align="end" [innerHTML]="$safeNavigationMigration(options?.description)"></mat-hint>
2160
+ }
1843
2161
  </mat-form-field>
1844
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
1845
- [innerHTML]="options?.errorMessage"></mat-error>
1846
-
1847
- <div *ngFor="let layoutItem of layoutNode?.items; let i = index">
1848
- <select-framework-widget *ngIf="isFieldset && selectedItem === i"
1849
- [dataIndex]="layoutNode?.dataType === 'array' ? (dataIndex || []).concat(i) : dataIndex"
1850
- [layoutIndex]="(layoutIndex || []).concat(i)"
1851
- [layoutNode]="layoutItem"></select-framework-widget>
1852
- </div>`, standalone: false, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}\n"] }]
2162
+ @if (options?.showErrors && options?.errorMessage) {
2163
+ <mat-error
2164
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
2165
+ }
2166
+
2167
+ @for (layoutItem of layoutNode?.items; track layoutItem; let i = $index) {
2168
+ <div>
2169
+ @if (isFieldset && selectedItem === i) {
2170
+ <select-framework-widget
2171
+ [dataIndex]="layoutNode?.dataType === 'array' ? (dataIndex || []).concat(i) : dataIndex"
2172
+ [layoutIndex]="(layoutIndex || []).concat(i)"
2173
+ [layoutNode]="layoutItem"></select-framework-widget>
2174
+ }
2175
+ </div>
2176
+ }`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: ["mat-error{font-size:75%;margin-top:-1rem;margin-bottom:.5rem}\n"] }]
1853
2177
  }], ctorParameters: () => [{ type: undefined, decorators: [{
1854
2178
  type: Inject,
1855
2179
  args: [MAT_FORM_FIELD_DEFAULT_OPTIONS]
@@ -1883,92 +2207,116 @@ class MaterialRadiosComponent {
1883
2207
  this.options.showErrors = true;
1884
2208
  this.jsf.updateValue(this, value);
1885
2209
  }
1886
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialRadiosComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
1887
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: MaterialRadiosComponent, isStandalone: false, selector: "material-radios-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
2210
+ 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 }); }
2211
+ 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: `
1888
2212
  <div>
1889
- <div *ngIf="options?.title">
1890
- <label
1891
- [attr.for]="'control' + layoutNode?._id"
1892
- [class]="options?.labelHtmlClass || ''"
1893
- [style.display]="options?.notitle ? 'none' : ''"
1894
- [innerHTML]="options?.title"></label>
1895
- </div>
1896
- <mat-radio-group *ngIf="boundControl"
1897
- [formControl]="formControl"
1898
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1899
- [attr.readonly]="options?.readonly ? 'readonly' : null"
1900
- [attr.required]="options?.required"
1901
- [style.flex-direction]="flexDirection"
1902
- [name]="controlName"
1903
- (blur)="options.showErrors = true">
1904
- <mat-radio-button *ngFor="let radioItem of radiosList"
1905
- [id]="'control' + layoutNode?._id + '/' + radioItem?.name"
1906
- [value]="radioItem?.value">
1907
- <span [innerHTML]="radioItem?.name"></span>
1908
- </mat-radio-button>
1909
- </mat-radio-group>
1910
- <mat-radio-group *ngIf="!boundControl"
1911
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1912
- [attr.readonly]="options?.readonly ? 'readonly' : null"
1913
- [attr.required]="options?.required"
1914
- [style.flex-direction]="flexDirection"
1915
- [disabled]="controlDisabled || options?.readonly"
1916
- [name]="controlName"
1917
- [value]="controlValue">
1918
- <mat-radio-button *ngFor="let radioItem of radiosList"
1919
- [id]="'control' + layoutNode?._id + '/' + radioItem?.name"
1920
- [value]="radioItem?.value"
1921
- (click)="updateValue(radioItem?.value)">
1922
- <span [innerHTML]="radioItem?.name"></span>
1923
- </mat-radio-button>
1924
- </mat-radio-group>
1925
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
1926
- [innerHTML]="options?.errorMessage"></mat-error>
1927
- </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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i5$2.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"] }] }); }
2213
+ @if (options?.title) {
2214
+ <div>
2215
+ <label
2216
+ [attr.for]="'control' + layoutNode?._id"
2217
+ [class]="options?.labelHtmlClass || ''"
2218
+ [style.display]="options?.notitle ? 'none' : ''"
2219
+ [innerHTML]="$safeNavigationMigration(options?.title)"></label>
2220
+ </div>
2221
+ }
2222
+ @if (boundControl) {
2223
+ <mat-radio-group
2224
+ [formControl]="formControl"
2225
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2226
+ [attr.readonly]="options?.readonly ? 'readonly' : null"
2227
+ [attr.required]="options?.required"
2228
+ [style.flex-direction]="flexDirection"
2229
+ [name]="controlName"
2230
+ (blur)="options.showErrors = true">
2231
+ @for (radioItem of radiosList; track radioItem) {
2232
+ <mat-radio-button
2233
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id) + '/' + $safeNavigationMigration(radioItem?.name)"
2234
+ [value]="$safeNavigationMigration(radioItem?.value)">
2235
+ <span [innerHTML]="$safeNavigationMigration(radioItem?.name)"></span>
2236
+ </mat-radio-button>
2237
+ }
2238
+ </mat-radio-group>
2239
+ }
2240
+ @if (!boundControl) {
2241
+ <mat-radio-group
2242
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2243
+ [attr.readonly]="options?.readonly ? 'readonly' : null"
2244
+ [attr.required]="options?.required"
2245
+ [style.flex-direction]="flexDirection"
2246
+ [disabled]="controlDisabled || options?.readonly"
2247
+ [name]="controlName"
2248
+ [value]="controlValue">
2249
+ @for (radioItem of radiosList; track radioItem) {
2250
+ <mat-radio-button
2251
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id) + '/' + $safeNavigationMigration(radioItem?.name)"
2252
+ [value]="$safeNavigationMigration(radioItem?.value)"
2253
+ (click)="updateValue($safeNavigationMigration(radioItem?.value))">
2254
+ <span [innerHTML]="$safeNavigationMigration(radioItem?.name)"></span>
2255
+ </mat-radio-button>
2256
+ }
2257
+ </mat-radio-group>
2258
+ }
2259
+ @if (options?.showErrors && options?.errorMessage) {
2260
+ <mat-error
2261
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
2262
+ }
2263
+ </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 }); }
1928
2264
  }
1929
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialRadiosComponent, decorators: [{
2265
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialRadiosComponent, decorators: [{
1930
2266
  type: Component,
1931
2267
  args: [{ selector: 'material-radios-widget', template: `
1932
2268
  <div>
1933
- <div *ngIf="options?.title">
1934
- <label
1935
- [attr.for]="'control' + layoutNode?._id"
1936
- [class]="options?.labelHtmlClass || ''"
1937
- [style.display]="options?.notitle ? 'none' : ''"
1938
- [innerHTML]="options?.title"></label>
1939
- </div>
1940
- <mat-radio-group *ngIf="boundControl"
1941
- [formControl]="formControl"
1942
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1943
- [attr.readonly]="options?.readonly ? 'readonly' : null"
1944
- [attr.required]="options?.required"
1945
- [style.flex-direction]="flexDirection"
1946
- [name]="controlName"
1947
- (blur)="options.showErrors = true">
1948
- <mat-radio-button *ngFor="let radioItem of radiosList"
1949
- [id]="'control' + layoutNode?._id + '/' + radioItem?.name"
1950
- [value]="radioItem?.value">
1951
- <span [innerHTML]="radioItem?.name"></span>
1952
- </mat-radio-button>
1953
- </mat-radio-group>
1954
- <mat-radio-group *ngIf="!boundControl"
1955
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
1956
- [attr.readonly]="options?.readonly ? 'readonly' : null"
1957
- [attr.required]="options?.required"
1958
- [style.flex-direction]="flexDirection"
1959
- [disabled]="controlDisabled || options?.readonly"
1960
- [name]="controlName"
1961
- [value]="controlValue">
1962
- <mat-radio-button *ngFor="let radioItem of radiosList"
1963
- [id]="'control' + layoutNode?._id + '/' + radioItem?.name"
1964
- [value]="radioItem?.value"
1965
- (click)="updateValue(radioItem?.value)">
1966
- <span [innerHTML]="radioItem?.name"></span>
1967
- </mat-radio-button>
1968
- </mat-radio-group>
1969
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
1970
- [innerHTML]="options?.errorMessage"></mat-error>
1971
- </div>`, standalone: false, styles: ["mat-radio-group{display:inline-flex}mat-radio-button{margin:2px}mat-error{font-size:75%}\n"] }]
2269
+ @if (options?.title) {
2270
+ <div>
2271
+ <label
2272
+ [attr.for]="'control' + layoutNode?._id"
2273
+ [class]="options?.labelHtmlClass || ''"
2274
+ [style.display]="options?.notitle ? 'none' : ''"
2275
+ [innerHTML]="$safeNavigationMigration(options?.title)"></label>
2276
+ </div>
2277
+ }
2278
+ @if (boundControl) {
2279
+ <mat-radio-group
2280
+ [formControl]="formControl"
2281
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2282
+ [attr.readonly]="options?.readonly ? 'readonly' : null"
2283
+ [attr.required]="options?.required"
2284
+ [style.flex-direction]="flexDirection"
2285
+ [name]="controlName"
2286
+ (blur)="options.showErrors = true">
2287
+ @for (radioItem of radiosList; track radioItem) {
2288
+ <mat-radio-button
2289
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id) + '/' + $safeNavigationMigration(radioItem?.name)"
2290
+ [value]="$safeNavigationMigration(radioItem?.value)">
2291
+ <span [innerHTML]="$safeNavigationMigration(radioItem?.name)"></span>
2292
+ </mat-radio-button>
2293
+ }
2294
+ </mat-radio-group>
2295
+ }
2296
+ @if (!boundControl) {
2297
+ <mat-radio-group
2298
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2299
+ [attr.readonly]="options?.readonly ? 'readonly' : null"
2300
+ [attr.required]="options?.required"
2301
+ [style.flex-direction]="flexDirection"
2302
+ [disabled]="controlDisabled || options?.readonly"
2303
+ [name]="controlName"
2304
+ [value]="controlValue">
2305
+ @for (radioItem of radiosList; track radioItem) {
2306
+ <mat-radio-button
2307
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id) + '/' + $safeNavigationMigration(radioItem?.name)"
2308
+ [value]="$safeNavigationMigration(radioItem?.value)"
2309
+ (click)="updateValue($safeNavigationMigration(radioItem?.value))">
2310
+ <span [innerHTML]="$safeNavigationMigration(radioItem?.name)"></span>
2311
+ </mat-radio-button>
2312
+ }
2313
+ </mat-radio-group>
2314
+ }
2315
+ @if (options?.showErrors && options?.errorMessage) {
2316
+ <mat-error
2317
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
2318
+ }
2319
+ </div>`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: ["mat-radio-group{display:inline-flex}mat-radio-button{margin:2px}mat-error{font-size:75%}\n"] }]
1972
2320
  }], ctorParameters: () => [{ type: i1.JsonSchemaFormService }], propDecorators: { layoutNode: [{
1973
2321
  type: Input
1974
2322
  }], layoutIndex: [{
@@ -1998,78 +2346,104 @@ class MaterialSelectComponent {
1998
2346
  this.options.showErrors = true;
1999
2347
  this.jsf.updateValue(this, event.value);
2000
2348
  }
2001
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialSelectComponent, deps: [{ token: MAT_FORM_FIELD_DEFAULT_OPTIONS, optional: true }, { token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
2002
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: MaterialSelectComponent, isStandalone: false, selector: "material-select-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
2349
+ 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 }); }
2350
+ 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: `
2003
2351
  <mat-form-field
2004
2352
  [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'fill'"
2005
2353
  [class]="options?.htmlClass || ''"
2006
2354
  [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || 'auto'"
2007
2355
  [hideRequiredMarker]="options?.hideRequired ? 'true' : 'false'"
2008
2356
  [style.width]="'100%'">
2009
- <mat-label *ngIf="!options?.notitle">{{options?.title}}</mat-label>
2010
- <span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"
2357
+ @if (!options?.notitle) {
2358
+ <mat-label>{{options?.title}}</mat-label>
2359
+ }
2360
+ @if (options?.prefix || options?.fieldAddonLeft) {
2361
+ <span matPrefix
2011
2362
  [innerHTML]="options?.prefix || options?.fieldAddonLeft"></span>
2012
- <mat-select *ngIf="boundControl"
2013
- [formControl]="formControl"
2014
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2015
- [attr.name]="controlName"
2016
- [id]="'control' + layoutNode?._id"
2017
- [multiple]="options?.multiple"
2018
- [placeholder]="options?.notitle ? options?.placeholder : options?.title"
2019
- [required]="options?.required"
2020
- [style.width]="'100%'"
2021
- (blur)="options.showErrors = true">
2022
- <ng-template ngFor let-selectItem [ngForOf]="selectList">
2023
- <mat-option *ngIf="!isArray(selectItem?.items)"
2024
- [value]="selectItem?.value">
2025
- <span [innerHTML]="selectItem?.name"></span>
2026
- </mat-option>
2027
- <mat-optgroup *ngIf="isArray(selectItem?.items)"
2028
- [label]="selectItem?.group">
2029
- <mat-option *ngFor="let subItem of selectItem.items"
2030
- [value]="subItem?.value">
2031
- <span [innerHTML]="subItem?.name"></span>
2032
- </mat-option>
2033
- </mat-optgroup>
2034
- </ng-template>
2035
- </mat-select>
2036
- <mat-select *ngIf="!boundControl"
2037
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2038
- [attr.name]="controlName"
2039
- [disabled]="controlDisabled || options?.readonly"
2040
- [id]="'control' + layoutNode?._id"
2041
- [multiple]="options?.multiple"
2042
- [placeholder]="options?.notitle ? options?.placeholder : options?.title"
2043
- [required]="options?.required"
2044
- [style.width]="'100%'"
2045
- [value]="controlValue"
2046
- (blur)="options.showErrors = true"
2047
- (change)="updateValue($event)">
2048
- <ng-template ngFor let-selectItem [ngForOf]="selectList">
2049
- <mat-option *ngIf="!isArray(selectItem?.items)"
2050
- [attr.selected]="selectItem?.value === controlValue"
2051
- [value]="selectItem?.value">
2052
- <span [innerHTML]="selectItem?.name"></span>
2053
- </mat-option>
2054
- <mat-optgroup *ngIf="isArray(selectItem?.items)"
2055
- [label]="selectItem?.group">
2056
- <mat-option *ngFor="let subItem of selectItem.items"
2057
- [attr.selected]="subItem?.value === controlValue"
2058
- [value]="subItem?.value">
2059
- <span [innerHTML]="subItem?.name"></span>
2060
- </mat-option>
2061
- </mat-optgroup>
2062
- </ng-template>
2063
- </mat-select>
2064
- <span matSuffix *ngIf="options?.suffix || options?.fieldAddonRight"
2363
+ }
2364
+ @if (boundControl) {
2365
+ <mat-select
2366
+ [formControl]="formControl"
2367
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2368
+ [attr.name]="controlName"
2369
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
2370
+ [multiple]="$safeNavigationMigration(options?.multiple)"
2371
+ [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
2372
+ [required]="$safeNavigationMigration(options?.required)"
2373
+ [style.width]="'100%'"
2374
+ (blur)="options.showErrors = true">
2375
+ @for (selectItem of selectList; track selectItem) {
2376
+ @if (!isArray($safeNavigationMigration(selectItem?.items))) {
2377
+ <mat-option
2378
+ [value]="$safeNavigationMigration(selectItem?.value)">
2379
+ <span [innerHTML]="$safeNavigationMigration(selectItem?.name)"></span>
2380
+ </mat-option>
2381
+ }
2382
+ @if (isArray($safeNavigationMigration(selectItem?.items))) {
2383
+ <mat-optgroup
2384
+ [label]="$safeNavigationMigration(selectItem?.group)">
2385
+ @for (subItem of selectItem.items; track subItem) {
2386
+ <mat-option
2387
+ [value]="$safeNavigationMigration(subItem?.value)">
2388
+ <span [innerHTML]="$safeNavigationMigration(subItem?.name)"></span>
2389
+ </mat-option>
2390
+ }
2391
+ </mat-optgroup>
2392
+ }
2393
+ }
2394
+ </mat-select>
2395
+ }
2396
+ @if (!boundControl) {
2397
+ <mat-select
2398
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2399
+ [attr.name]="controlName"
2400
+ [disabled]="controlDisabled || options?.readonly"
2401
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
2402
+ [multiple]="$safeNavigationMigration(options?.multiple)"
2403
+ [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
2404
+ [required]="$safeNavigationMigration(options?.required)"
2405
+ [style.width]="'100%'"
2406
+ [value]="controlValue"
2407
+ (blur)="options.showErrors = true"
2408
+ (change)="updateValue($event)">
2409
+ @for (selectItem of selectList; track selectItem) {
2410
+ @if (!isArray($safeNavigationMigration(selectItem?.items))) {
2411
+ <mat-option
2412
+ [attr.selected]="selectItem?.value === controlValue"
2413
+ [value]="$safeNavigationMigration(selectItem?.value)">
2414
+ <span [innerHTML]="$safeNavigationMigration(selectItem?.name)"></span>
2415
+ </mat-option>
2416
+ }
2417
+ @if (isArray($safeNavigationMigration(selectItem?.items))) {
2418
+ <mat-optgroup
2419
+ [label]="$safeNavigationMigration(selectItem?.group)">
2420
+ @for (subItem of selectItem.items; track subItem) {
2421
+ <mat-option
2422
+ [attr.selected]="subItem?.value === controlValue"
2423
+ [value]="$safeNavigationMigration(subItem?.value)">
2424
+ <span [innerHTML]="$safeNavigationMigration(subItem?.name)"></span>
2425
+ </mat-option>
2426
+ }
2427
+ </mat-optgroup>
2428
+ }
2429
+ }
2430
+ </mat-select>
2431
+ }
2432
+ @if (options?.suffix || options?.fieldAddonRight) {
2433
+ <span matSuffix
2065
2434
  [innerHTML]="options?.suffix || options?.fieldAddonRight"></span>
2066
- <mat-hint *ngIf="options?.description && (!options?.showErrors || !options?.errorMessage)"
2067
- align="end" [innerHTML]="options?.description"></mat-hint>
2435
+ }
2436
+ @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
2437
+ <mat-hint
2438
+ align="end" [innerHTML]="$safeNavigationMigration(options?.description)"></mat-hint>
2439
+ }
2068
2440
  </mat-form-field>
2069
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
2070
- [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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4$3.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i6$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"] }] }); }
2441
+ @if (options?.showErrors && options?.errorMessage) {
2442
+ <mat-error
2443
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
2444
+ }`, 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 }); }
2071
2445
  }
2072
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialSelectComponent, decorators: [{
2446
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialSelectComponent, decorators: [{
2073
2447
  type: Component,
2074
2448
  args: [{ selector: 'material-select-widget', template: `
2075
2449
  <mat-form-field
@@ -2078,68 +2452,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
2078
2452
  [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || 'auto'"
2079
2453
  [hideRequiredMarker]="options?.hideRequired ? 'true' : 'false'"
2080
2454
  [style.width]="'100%'">
2081
- <mat-label *ngIf="!options?.notitle">{{options?.title}}</mat-label>
2082
- <span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"
2455
+ @if (!options?.notitle) {
2456
+ <mat-label>{{options?.title}}</mat-label>
2457
+ }
2458
+ @if (options?.prefix || options?.fieldAddonLeft) {
2459
+ <span matPrefix
2083
2460
  [innerHTML]="options?.prefix || options?.fieldAddonLeft"></span>
2084
- <mat-select *ngIf="boundControl"
2085
- [formControl]="formControl"
2086
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2087
- [attr.name]="controlName"
2088
- [id]="'control' + layoutNode?._id"
2089
- [multiple]="options?.multiple"
2090
- [placeholder]="options?.notitle ? options?.placeholder : options?.title"
2091
- [required]="options?.required"
2092
- [style.width]="'100%'"
2093
- (blur)="options.showErrors = true">
2094
- <ng-template ngFor let-selectItem [ngForOf]="selectList">
2095
- <mat-option *ngIf="!isArray(selectItem?.items)"
2096
- [value]="selectItem?.value">
2097
- <span [innerHTML]="selectItem?.name"></span>
2098
- </mat-option>
2099
- <mat-optgroup *ngIf="isArray(selectItem?.items)"
2100
- [label]="selectItem?.group">
2101
- <mat-option *ngFor="let subItem of selectItem.items"
2102
- [value]="subItem?.value">
2103
- <span [innerHTML]="subItem?.name"></span>
2104
- </mat-option>
2105
- </mat-optgroup>
2106
- </ng-template>
2107
- </mat-select>
2108
- <mat-select *ngIf="!boundControl"
2109
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2110
- [attr.name]="controlName"
2111
- [disabled]="controlDisabled || options?.readonly"
2112
- [id]="'control' + layoutNode?._id"
2113
- [multiple]="options?.multiple"
2114
- [placeholder]="options?.notitle ? options?.placeholder : options?.title"
2115
- [required]="options?.required"
2116
- [style.width]="'100%'"
2117
- [value]="controlValue"
2118
- (blur)="options.showErrors = true"
2119
- (change)="updateValue($event)">
2120
- <ng-template ngFor let-selectItem [ngForOf]="selectList">
2121
- <mat-option *ngIf="!isArray(selectItem?.items)"
2122
- [attr.selected]="selectItem?.value === controlValue"
2123
- [value]="selectItem?.value">
2124
- <span [innerHTML]="selectItem?.name"></span>
2125
- </mat-option>
2126
- <mat-optgroup *ngIf="isArray(selectItem?.items)"
2127
- [label]="selectItem?.group">
2128
- <mat-option *ngFor="let subItem of selectItem.items"
2129
- [attr.selected]="subItem?.value === controlValue"
2130
- [value]="subItem?.value">
2131
- <span [innerHTML]="subItem?.name"></span>
2132
- </mat-option>
2133
- </mat-optgroup>
2134
- </ng-template>
2135
- </mat-select>
2136
- <span matSuffix *ngIf="options?.suffix || options?.fieldAddonRight"
2461
+ }
2462
+ @if (boundControl) {
2463
+ <mat-select
2464
+ [formControl]="formControl"
2465
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2466
+ [attr.name]="controlName"
2467
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
2468
+ [multiple]="$safeNavigationMigration(options?.multiple)"
2469
+ [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
2470
+ [required]="$safeNavigationMigration(options?.required)"
2471
+ [style.width]="'100%'"
2472
+ (blur)="options.showErrors = true">
2473
+ @for (selectItem of selectList; track selectItem) {
2474
+ @if (!isArray($safeNavigationMigration(selectItem?.items))) {
2475
+ <mat-option
2476
+ [value]="$safeNavigationMigration(selectItem?.value)">
2477
+ <span [innerHTML]="$safeNavigationMigration(selectItem?.name)"></span>
2478
+ </mat-option>
2479
+ }
2480
+ @if (isArray($safeNavigationMigration(selectItem?.items))) {
2481
+ <mat-optgroup
2482
+ [label]="$safeNavigationMigration(selectItem?.group)">
2483
+ @for (subItem of selectItem.items; track subItem) {
2484
+ <mat-option
2485
+ [value]="$safeNavigationMigration(subItem?.value)">
2486
+ <span [innerHTML]="$safeNavigationMigration(subItem?.name)"></span>
2487
+ </mat-option>
2488
+ }
2489
+ </mat-optgroup>
2490
+ }
2491
+ }
2492
+ </mat-select>
2493
+ }
2494
+ @if (!boundControl) {
2495
+ <mat-select
2496
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2497
+ [attr.name]="controlName"
2498
+ [disabled]="controlDisabled || options?.readonly"
2499
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
2500
+ [multiple]="$safeNavigationMigration(options?.multiple)"
2501
+ [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
2502
+ [required]="$safeNavigationMigration(options?.required)"
2503
+ [style.width]="'100%'"
2504
+ [value]="controlValue"
2505
+ (blur)="options.showErrors = true"
2506
+ (change)="updateValue($event)">
2507
+ @for (selectItem of selectList; track selectItem) {
2508
+ @if (!isArray($safeNavigationMigration(selectItem?.items))) {
2509
+ <mat-option
2510
+ [attr.selected]="selectItem?.value === controlValue"
2511
+ [value]="$safeNavigationMigration(selectItem?.value)">
2512
+ <span [innerHTML]="$safeNavigationMigration(selectItem?.name)"></span>
2513
+ </mat-option>
2514
+ }
2515
+ @if (isArray($safeNavigationMigration(selectItem?.items))) {
2516
+ <mat-optgroup
2517
+ [label]="$safeNavigationMigration(selectItem?.group)">
2518
+ @for (subItem of selectItem.items; track subItem) {
2519
+ <mat-option
2520
+ [attr.selected]="subItem?.value === controlValue"
2521
+ [value]="$safeNavigationMigration(subItem?.value)">
2522
+ <span [innerHTML]="$safeNavigationMigration(subItem?.name)"></span>
2523
+ </mat-option>
2524
+ }
2525
+ </mat-optgroup>
2526
+ }
2527
+ }
2528
+ </mat-select>
2529
+ }
2530
+ @if (options?.suffix || options?.fieldAddonRight) {
2531
+ <span matSuffix
2137
2532
  [innerHTML]="options?.suffix || options?.fieldAddonRight"></span>
2138
- <mat-hint *ngIf="options?.description && (!options?.showErrors || !options?.errorMessage)"
2139
- align="end" [innerHTML]="options?.description"></mat-hint>
2533
+ }
2534
+ @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
2535
+ <mat-hint
2536
+ align="end" [innerHTML]="$safeNavigationMigration(options?.description)"></mat-hint>
2537
+ }
2140
2538
  </mat-form-field>
2141
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
2142
- [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"] }]
2539
+ @if (options?.showErrors && options?.errorMessage) {
2540
+ <mat-error
2541
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
2542
+ }`, 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"] }]
2143
2543
  }], ctorParameters: () => [{ type: undefined, decorators: [{
2144
2544
  type: Inject,
2145
2545
  args: [MAT_FORM_FIELD_DEFAULT_OPTIONS]
@@ -2173,50 +2573,62 @@ class MaterialSliderComponent {
2173
2573
  this.options.showErrors = true;
2174
2574
  this.jsf.updateValue(this, event.value);
2175
2575
  }
2176
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialSliderComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
2177
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: MaterialSliderComponent, isStandalone: false, selector: "material-slider-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
2178
- <mat-slider discrete *ngIf="boundControl"
2179
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2180
- [id]="'control' + layoutNode?._id"
2181
- [max]="maxValue"
2182
- [min]="minValue"
2183
- [step]="options?.multipleOf || options?.step || 'any'"
2184
- [style.width]="'100%'"
2576
+ 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 }); }
2577
+ 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: `
2578
+ @if (boundControl) {
2579
+ <mat-slider discrete
2580
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2581
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
2582
+ [max]="maxValue"
2583
+ [min]="minValue"
2584
+ [step]="options?.multipleOf || options?.step || 'any'"
2585
+ [style.width]="'100%'"
2185
2586
  ><input matSliderThumb [formControl]="formControl" (blur)="options.showErrors = true" /></mat-slider>
2186
- <mat-slider discrete *ngIf="!boundControl"
2187
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2188
- [disabled]="controlDisabled || options?.readonly"
2189
- [id]="'control' + layoutNode?._id"
2190
- [max]="maxValue"
2191
- [min]="minValue"
2192
- [step]="options?.multipleOf || options?.step || 'any'"
2193
- [style.width]="'100%'"
2587
+ }
2588
+ @if (!boundControl) {
2589
+ <mat-slider discrete
2590
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2591
+ [disabled]="controlDisabled || options?.readonly"
2592
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
2593
+ [max]="maxValue"
2594
+ [min]="minValue"
2595
+ [step]="options?.multipleOf || options?.step || 'any'"
2596
+ [style.width]="'100%'"
2194
2597
  (blur)="options.showErrors = true" #ngSlider><input matSliderThumb [value]="controlValue" (change)="updateValue({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})" #ngSliderThumb="matSliderThumb" /></mat-slider>
2195
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
2196
- [innerHTML]="options?.errorMessage"></mat-error>`, isInline: true, styles: ["mat-error{font-size:75%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$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: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5$3.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i5$3.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }] }); }
2598
+ }
2599
+ @if (options?.showErrors && options?.errorMessage) {
2600
+ <mat-error
2601
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
2602
+ }`, 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 }); }
2197
2603
  }
2198
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialSliderComponent, decorators: [{
2604
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialSliderComponent, decorators: [{
2199
2605
  type: Component,
2200
2606
  args: [{ selector: 'material-slider-widget', template: `
2201
- <mat-slider discrete *ngIf="boundControl"
2202
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2203
- [id]="'control' + layoutNode?._id"
2204
- [max]="maxValue"
2205
- [min]="minValue"
2206
- [step]="options?.multipleOf || options?.step || 'any'"
2207
- [style.width]="'100%'"
2607
+ @if (boundControl) {
2608
+ <mat-slider discrete
2609
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2610
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
2611
+ [max]="maxValue"
2612
+ [min]="minValue"
2613
+ [step]="options?.multipleOf || options?.step || 'any'"
2614
+ [style.width]="'100%'"
2208
2615
  ><input matSliderThumb [formControl]="formControl" (blur)="options.showErrors = true" /></mat-slider>
2209
- <mat-slider discrete *ngIf="!boundControl"
2210
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2211
- [disabled]="controlDisabled || options?.readonly"
2212
- [id]="'control' + layoutNode?._id"
2213
- [max]="maxValue"
2214
- [min]="minValue"
2215
- [step]="options?.multipleOf || options?.step || 'any'"
2216
- [style.width]="'100%'"
2616
+ }
2617
+ @if (!boundControl) {
2618
+ <mat-slider discrete
2619
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2620
+ [disabled]="controlDisabled || options?.readonly"
2621
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
2622
+ [max]="maxValue"
2623
+ [min]="minValue"
2624
+ [step]="options?.multipleOf || options?.step || 'any'"
2625
+ [style.width]="'100%'"
2217
2626
  (blur)="options.showErrors = true" #ngSlider><input matSliderThumb [value]="controlValue" (change)="updateValue({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})" #ngSliderThumb="matSliderThumb" /></mat-slider>
2218
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
2219
- [innerHTML]="options?.errorMessage"></mat-error>`, standalone: false, styles: ["mat-error{font-size:75%}\n"] }]
2627
+ }
2628
+ @if (options?.showErrors && options?.errorMessage) {
2629
+ <mat-error
2630
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
2631
+ }`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: ["mat-error{font-size:75%}\n"] }]
2220
2632
  }], ctorParameters: () => [{ type: i1.JsonSchemaFormService }], propDecorators: { layoutNode: [{
2221
2633
  type: Input
2222
2634
  }], layoutIndex: [{
@@ -2275,33 +2687,39 @@ class MaterialStepperComponent {
2275
2687
  setStepTitle(item, index) {
2276
2688
  return this.jsf.setArrayItemTitle(this, item, index);
2277
2689
  }
2278
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialStepperComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
2279
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: MaterialStepperComponent, isStandalone: false, selector: "material-stepper-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
2690
+ 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 }); }
2691
+ 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: `
2280
2692
  <mat-stepper
2281
2693
  [selectedIndex]="selectedItem"
2282
2694
  [linear]="options?.linear || false"
2283
2695
  (selectionChange)="select($event.selectedIndex)">
2284
- <ng-container *ngFor="let item of layoutNode?.items; let i = index">
2285
- <mat-step *ngIf="showAddTab || item.type !== '$ref'">
2286
- <ng-template matStepLabel>
2287
- <span [innerHTML]="setStepTitle(item, i)"></span>
2288
- </ng-template>
2289
- <ng-template matStepContent>
2290
- <select-framework-widget
2291
- [class]="(options?.fieldHtmlClass || '') + ' ' + (options?.activeClass || '')"
2292
- [dataIndex]="layoutNode?.dataType === 'array' ? (dataIndex || []).concat(i) : dataIndex"
2293
- [layoutIndex]="(layoutIndex || []).concat(i)"
2696
+ @for (item of layoutNode?.items; track item; let i = $index) {
2697
+ @if (showAddTab || item.type !== '$ref') {
2698
+ <mat-step>
2699
+ <ng-template matStepLabel>
2700
+ <span [innerHTML]="setStepTitle(item, i)"></span>
2701
+ </ng-template>
2702
+ <ng-template matStepContent>
2703
+ <select-framework-widget
2704
+ [class]="(options?.fieldHtmlClass || '') + ' ' + (options?.activeClass || '')"
2705
+ [dataIndex]="layoutNode?.dataType === 'array' ? (dataIndex || []).concat(i) : dataIndex"
2706
+ [layoutIndex]="(layoutIndex || []).concat(i)"
2294
2707
  [layoutNode]="item"></select-framework-widget>
2295
- <div style="margin-top: 16px">
2296
- <button mat-button matStepperPrevious *ngIf="i > 0" type="button">Back</button>
2297
- <button mat-button matStepperNext *ngIf="hasNextVisible(i)" type="button">Next</button>
2298
- </div>
2299
- </ng-template>
2300
- </mat-step>
2301
- </ng-container>
2302
- </mat-stepper>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$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$4.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i4$4.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i4$4.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i4$4.MatStepperNext, selector: "button[matStepperNext]" }, { kind: "directive", type: i4$4.MatStepperPrevious, selector: "button[matStepperPrevious]" }, { kind: "directive", type: i4$4.MatStepContent, selector: "ng-template[matStepContent]" }, { kind: "component", type: i1.SelectFrameworkComponent, selector: "select-framework-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }] }); }
2708
+ <div style="margin-top: 16px">
2709
+ @if (i > 0) {
2710
+ <button mat-button matStepperPrevious type="button">Back</button>
2711
+ }
2712
+ @if (hasNextVisible(i)) {
2713
+ <button mat-button matStepperNext type="button">Next</button>
2714
+ }
2715
+ </div>
2716
+ </ng-template>
2717
+ </mat-step>
2718
+ }
2719
+ }
2720
+ </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 }); }
2303
2721
  }
2304
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialStepperComponent, decorators: [{
2722
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialStepperComponent, decorators: [{
2305
2723
  type: Component,
2306
2724
  args: [{
2307
2725
  selector: 'material-stepper-widget',
@@ -2310,25 +2728,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
2310
2728
  [selectedIndex]="selectedItem"
2311
2729
  [linear]="options?.linear || false"
2312
2730
  (selectionChange)="select($event.selectedIndex)">
2313
- <ng-container *ngFor="let item of layoutNode?.items; let i = index">
2314
- <mat-step *ngIf="showAddTab || item.type !== '$ref'">
2315
- <ng-template matStepLabel>
2316
- <span [innerHTML]="setStepTitle(item, i)"></span>
2317
- </ng-template>
2318
- <ng-template matStepContent>
2319
- <select-framework-widget
2320
- [class]="(options?.fieldHtmlClass || '') + ' ' + (options?.activeClass || '')"
2321
- [dataIndex]="layoutNode?.dataType === 'array' ? (dataIndex || []).concat(i) : dataIndex"
2322
- [layoutIndex]="(layoutIndex || []).concat(i)"
2731
+ @for (item of layoutNode?.items; track item; let i = $index) {
2732
+ @if (showAddTab || item.type !== '$ref') {
2733
+ <mat-step>
2734
+ <ng-template matStepLabel>
2735
+ <span [innerHTML]="setStepTitle(item, i)"></span>
2736
+ </ng-template>
2737
+ <ng-template matStepContent>
2738
+ <select-framework-widget
2739
+ [class]="(options?.fieldHtmlClass || '') + ' ' + (options?.activeClass || '')"
2740
+ [dataIndex]="layoutNode?.dataType === 'array' ? (dataIndex || []).concat(i) : dataIndex"
2741
+ [layoutIndex]="(layoutIndex || []).concat(i)"
2323
2742
  [layoutNode]="item"></select-framework-widget>
2324
- <div style="margin-top: 16px">
2325
- <button mat-button matStepperPrevious *ngIf="i > 0" type="button">Back</button>
2326
- <button mat-button matStepperNext *ngIf="hasNextVisible(i)" type="button">Next</button>
2327
- </div>
2328
- </ng-template>
2329
- </mat-step>
2330
- </ng-container>
2743
+ <div style="margin-top: 16px">
2744
+ @if (i > 0) {
2745
+ <button mat-button matStepperPrevious type="button">Back</button>
2746
+ }
2747
+ @if (hasNextVisible(i)) {
2748
+ <button mat-button matStepperNext type="button">Next</button>
2749
+ }
2750
+ </div>
2751
+ </ng-template>
2752
+ </mat-step>
2753
+ }
2754
+ }
2331
2755
  </mat-stepper>`,
2756
+ changeDetection: ChangeDetectionStrategy.Eager,
2332
2757
  standalone: false
2333
2758
  }]
2334
2759
  }], ctorParameters: () => [{ type: i1.JsonSchemaFormService }], propDecorators: { layoutNode: [{
@@ -2370,58 +2795,74 @@ class MaterialTabsComponent {
2370
2795
  setTabTitle(item, index) {
2371
2796
  return this.jsf.setArrayItemTitle(this, item, index);
2372
2797
  }
2373
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialTabsComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
2374
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: MaterialTabsComponent, isStandalone: false, selector: "material-tabs-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
2798
+ 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 }); }
2799
+ 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: `
2375
2800
  <nav mat-tab-nav-bar
2376
2801
  [attr.aria-label]="options?.label || options?.title || ''"
2377
2802
  [tabPanel]="tabPanel"
2378
2803
  [style.width]="'100%'">
2379
- <a mat-tab-link *ngFor="let item of layoutNode?.items; let i = index"
2804
+ @for (item of layoutNode?.items; track item; let i = $index) {
2805
+ <a mat-tab-link
2380
2806
  [active]="selectedItem === i"
2381
2807
  (click)="select(i)">
2382
- <span *ngIf="showAddTab || item.type !== '$ref'"
2808
+ @if (showAddTab || item.type !== '$ref') {
2809
+ <span
2383
2810
  [innerHTML]="setTabTitle(item, i)"></span>
2811
+ }
2384
2812
  </a>
2813
+ }
2385
2814
  </nav>
2386
2815
  <!-- MDC requires mat-tab-nav-bar to reference a mat-tab-nav-panel, which
2387
- did not exist before v15. It wraps the content the nav switches. -->
2816
+ did not exist before v15. It wraps the content the nav switches. -->
2388
2817
  <div mat-tab-nav-panel #tabPanel>
2389
- <div *ngFor="let layoutItem of layoutNode?.items; let i = index"
2390
- [class]="options?.htmlClass || ''">
2391
- <select-framework-widget *ngIf="selectedItem === i"
2392
- [class]="(options?.fieldHtmlClass || '') + ' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')"
2393
- [dataIndex]="layoutNode?.dataType === 'array' ? (dataIndex || []).concat(i) : dataIndex"
2394
- [layoutIndex]="(layoutIndex || []).concat(i)"
2395
- [layoutNode]="layoutItem"></select-framework-widget>
2396
- </div>
2397
- </div>`, isInline: true, styles: ["a{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$5.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i3$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"] }] }); }
2818
+ @for (layoutItem of layoutNode?.items; track layoutItem; let i = $index) {
2819
+ <div
2820
+ [class]="options?.htmlClass || ''">
2821
+ @if (selectedItem === i) {
2822
+ <select-framework-widget
2823
+ [class]="(options?.fieldHtmlClass || '') + ' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')"
2824
+ [dataIndex]="layoutNode?.dataType === 'array' ? (dataIndex || []).concat(i) : dataIndex"
2825
+ [layoutIndex]="(layoutIndex || []).concat(i)"
2826
+ [layoutNode]="layoutItem"></select-framework-widget>
2827
+ }
2828
+ </div>
2829
+ }
2830
+ </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 }); }
2398
2831
  }
2399
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialTabsComponent, decorators: [{
2832
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialTabsComponent, decorators: [{
2400
2833
  type: Component,
2401
2834
  args: [{ selector: 'material-tabs-widget', template: `
2402
2835
  <nav mat-tab-nav-bar
2403
2836
  [attr.aria-label]="options?.label || options?.title || ''"
2404
2837
  [tabPanel]="tabPanel"
2405
2838
  [style.width]="'100%'">
2406
- <a mat-tab-link *ngFor="let item of layoutNode?.items; let i = index"
2839
+ @for (item of layoutNode?.items; track item; let i = $index) {
2840
+ <a mat-tab-link
2407
2841
  [active]="selectedItem === i"
2408
2842
  (click)="select(i)">
2409
- <span *ngIf="showAddTab || item.type !== '$ref'"
2843
+ @if (showAddTab || item.type !== '$ref') {
2844
+ <span
2410
2845
  [innerHTML]="setTabTitle(item, i)"></span>
2846
+ }
2411
2847
  </a>
2848
+ }
2412
2849
  </nav>
2413
2850
  <!-- MDC requires mat-tab-nav-bar to reference a mat-tab-nav-panel, which
2414
- did not exist before v15. It wraps the content the nav switches. -->
2851
+ did not exist before v15. It wraps the content the nav switches. -->
2415
2852
  <div mat-tab-nav-panel #tabPanel>
2416
- <div *ngFor="let layoutItem of layoutNode?.items; let i = index"
2417
- [class]="options?.htmlClass || ''">
2418
- <select-framework-widget *ngIf="selectedItem === i"
2419
- [class]="(options?.fieldHtmlClass || '') + ' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')"
2420
- [dataIndex]="layoutNode?.dataType === 'array' ? (dataIndex || []).concat(i) : dataIndex"
2421
- [layoutIndex]="(layoutIndex || []).concat(i)"
2422
- [layoutNode]="layoutItem"></select-framework-widget>
2423
- </div>
2424
- </div>`, standalone: false, styles: ["a{cursor:pointer}\n"] }]
2853
+ @for (layoutItem of layoutNode?.items; track layoutItem; let i = $index) {
2854
+ <div
2855
+ [class]="options?.htmlClass || ''">
2856
+ @if (selectedItem === i) {
2857
+ <select-framework-widget
2858
+ [class]="(options?.fieldHtmlClass || '') + ' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')"
2859
+ [dataIndex]="layoutNode?.dataType === 'array' ? (dataIndex || []).concat(i) : dataIndex"
2860
+ [layoutIndex]="(layoutIndex || []).concat(i)"
2861
+ [layoutNode]="layoutItem"></select-framework-widget>
2862
+ }
2863
+ </div>
2864
+ }
2865
+ </div>`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: ["a{cursor:pointer}\n"] }]
2425
2866
  }], ctorParameters: () => [{ type: i1.JsonSchemaFormService }], propDecorators: { layoutNode: [{
2426
2867
  type: Input
2427
2868
  }], layoutIndex: [{
@@ -2447,55 +2888,69 @@ class MaterialTextareaComponent {
2447
2888
  updateValue(event) {
2448
2889
  this.jsf.updateValue(this, event.target.value);
2449
2890
  }
2450
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialTextareaComponent, deps: [{ token: MAT_FORM_FIELD_DEFAULT_OPTIONS, optional: true }, { token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
2451
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: MaterialTextareaComponent, isStandalone: false, selector: "material-textarea-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
2891
+ 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 }); }
2892
+ 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: `
2452
2893
  <mat-form-field [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'fill'"
2453
2894
  [class]="options?.htmlClass || ''"
2454
2895
  [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || 'auto'"
2455
2896
  [hideRequiredMarker]="options?.hideRequired ? 'true' : 'false'"
2456
2897
  [style.width]="'100%'">
2457
- <mat-label *ngIf="!options?.notitle">{{options?.title}}</mat-label>
2458
- <span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"
2898
+ @if (!options?.notitle) {
2899
+ <mat-label>{{options?.title}}</mat-label>
2900
+ }
2901
+ @if (options?.prefix || options?.fieldAddonLeft) {
2902
+ <span matPrefix
2459
2903
  [innerHTML]="options?.prefix || options?.fieldAddonLeft"></span>
2460
- <textarea matInput *ngIf="boundControl"
2461
- [formControl]="formControl"
2462
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2463
- [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
2464
- [attr.maxlength]="options?.maxLength"
2465
- [attr.minlength]="options?.minLength"
2466
- [attr.pattern]="options?.pattern"
2467
- [required]="options?.required"
2468
- [id]="'control' + layoutNode?._id"
2469
- [name]="controlName"
2470
- [placeholder]="options?.notitle ? options?.placeholder : options?.title"
2471
- [readonly]="options?.readonly ? 'readonly' : null"
2472
- [style.width]="'100%'"
2904
+ }
2905
+ @if (boundControl) {
2906
+ <textarea matInput
2907
+ [formControl]="formControl"
2908
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2909
+ [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
2910
+ [attr.maxlength]="options?.maxLength"
2911
+ [attr.minlength]="options?.minLength"
2912
+ [attr.pattern]="options?.pattern"
2913
+ [required]="$safeNavigationMigration(options?.required)"
2914
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
2915
+ [name]="controlName"
2916
+ [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
2917
+ [readonly]="options?.readonly ? 'readonly' : null"
2918
+ [style.width]="'100%'"
2473
2919
  (blur)="options.showErrors = true"></textarea>
2474
- <textarea matInput *ngIf="!boundControl"
2475
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2476
- [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
2477
- [attr.maxlength]="options?.maxLength"
2478
- [attr.minlength]="options?.minLength"
2479
- [attr.pattern]="options?.pattern"
2480
- [required]="options?.required"
2481
- [disabled]="controlDisabled"
2482
- [id]="'control' + layoutNode?._id"
2483
- [name]="controlName"
2484
- [placeholder]="options?.notitle ? options?.placeholder : options?.title"
2485
- [readonly]="options?.readonly ? 'readonly' : null"
2486
- [style.width]="'100%'"
2487
- [value]="controlValue"
2488
- (input)="updateValue($event)"
2920
+ }
2921
+ @if (!boundControl) {
2922
+ <textarea matInput
2923
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2924
+ [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
2925
+ [attr.maxlength]="options?.maxLength"
2926
+ [attr.minlength]="options?.minLength"
2927
+ [attr.pattern]="options?.pattern"
2928
+ [required]="$safeNavigationMigration(options?.required)"
2929
+ [disabled]="controlDisabled"
2930
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
2931
+ [name]="controlName"
2932
+ [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
2933
+ [readonly]="options?.readonly ? 'readonly' : null"
2934
+ [style.width]="'100%'"
2935
+ [value]="controlValue"
2936
+ (input)="updateValue($event)"
2489
2937
  (blur)="options.showErrors = true"></textarea>
2490
- <span matSuffix *ngIf="options?.suffix || options?.fieldAddonRight"
2938
+ }
2939
+ @if (options?.suffix || options?.fieldAddonRight) {
2940
+ <span matSuffix
2491
2941
  [innerHTML]="options?.suffix || options?.fieldAddonRight"></span>
2492
- <mat-hint *ngIf="options?.description && (!options?.showErrors || !options?.errorMessage)"
2493
- align="end" [innerHTML]="options?.description"></mat-hint>
2942
+ }
2943
+ @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
2944
+ <mat-hint
2945
+ align="end" [innerHTML]="$safeNavigationMigration(options?.description)"></mat-hint>
2946
+ }
2494
2947
  </mat-form-field>
2495
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
2496
- [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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$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: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6$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"] }] }); }
2948
+ @if (options?.showErrors && options?.errorMessage) {
2949
+ <mat-error
2950
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
2951
+ }`, 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 }); }
2497
2952
  }
2498
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialTextareaComponent, decorators: [{
2953
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialTextareaComponent, decorators: [{
2499
2954
  type: Component,
2500
2955
  args: [{ selector: 'material-textarea-widget', template: `
2501
2956
  <mat-form-field [appearance]="options?.appearance || matFormFieldDefaultOptions?.appearance || 'fill'"
@@ -2503,46 +2958,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
2503
2958
  [floatLabel]="options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || 'auto'"
2504
2959
  [hideRequiredMarker]="options?.hideRequired ? 'true' : 'false'"
2505
2960
  [style.width]="'100%'">
2506
- <mat-label *ngIf="!options?.notitle">{{options?.title}}</mat-label>
2507
- <span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"
2961
+ @if (!options?.notitle) {
2962
+ <mat-label>{{options?.title}}</mat-label>
2963
+ }
2964
+ @if (options?.prefix || options?.fieldAddonLeft) {
2965
+ <span matPrefix
2508
2966
  [innerHTML]="options?.prefix || options?.fieldAddonLeft"></span>
2509
- <textarea matInput *ngIf="boundControl"
2510
- [formControl]="formControl"
2511
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2512
- [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
2513
- [attr.maxlength]="options?.maxLength"
2514
- [attr.minlength]="options?.minLength"
2515
- [attr.pattern]="options?.pattern"
2516
- [required]="options?.required"
2517
- [id]="'control' + layoutNode?._id"
2518
- [name]="controlName"
2519
- [placeholder]="options?.notitle ? options?.placeholder : options?.title"
2520
- [readonly]="options?.readonly ? 'readonly' : null"
2521
- [style.width]="'100%'"
2967
+ }
2968
+ @if (boundControl) {
2969
+ <textarea matInput
2970
+ [formControl]="formControl"
2971
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2972
+ [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
2973
+ [attr.maxlength]="options?.maxLength"
2974
+ [attr.minlength]="options?.minLength"
2975
+ [attr.pattern]="options?.pattern"
2976
+ [required]="$safeNavigationMigration(options?.required)"
2977
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
2978
+ [name]="controlName"
2979
+ [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
2980
+ [readonly]="options?.readonly ? 'readonly' : null"
2981
+ [style.width]="'100%'"
2522
2982
  (blur)="options.showErrors = true"></textarea>
2523
- <textarea matInput *ngIf="!boundControl"
2524
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2525
- [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
2526
- [attr.maxlength]="options?.maxLength"
2527
- [attr.minlength]="options?.minLength"
2528
- [attr.pattern]="options?.pattern"
2529
- [required]="options?.required"
2530
- [disabled]="controlDisabled"
2531
- [id]="'control' + layoutNode?._id"
2532
- [name]="controlName"
2533
- [placeholder]="options?.notitle ? options?.placeholder : options?.title"
2534
- [readonly]="options?.readonly ? 'readonly' : null"
2535
- [style.width]="'100%'"
2536
- [value]="controlValue"
2537
- (input)="updateValue($event)"
2983
+ }
2984
+ @if (!boundControl) {
2985
+ <textarea matInput
2986
+ [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2987
+ [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
2988
+ [attr.maxlength]="options?.maxLength"
2989
+ [attr.minlength]="options?.minLength"
2990
+ [attr.pattern]="options?.pattern"
2991
+ [required]="$safeNavigationMigration(options?.required)"
2992
+ [disabled]="controlDisabled"
2993
+ [id]="'control' + $safeNavigationMigration(layoutNode?._id)"
2994
+ [name]="controlName"
2995
+ [placeholder]="options?.notitle ? $safeNavigationMigration(options?.placeholder) : $safeNavigationMigration(options?.title)"
2996
+ [readonly]="options?.readonly ? 'readonly' : null"
2997
+ [style.width]="'100%'"
2998
+ [value]="controlValue"
2999
+ (input)="updateValue($event)"
2538
3000
  (blur)="options.showErrors = true"></textarea>
2539
- <span matSuffix *ngIf="options?.suffix || options?.fieldAddonRight"
3001
+ }
3002
+ @if (options?.suffix || options?.fieldAddonRight) {
3003
+ <span matSuffix
2540
3004
  [innerHTML]="options?.suffix || options?.fieldAddonRight"></span>
2541
- <mat-hint *ngIf="options?.description && (!options?.showErrors || !options?.errorMessage)"
2542
- align="end" [innerHTML]="options?.description"></mat-hint>
3005
+ }
3006
+ @if (options?.description && (!options?.showErrors || !options?.errorMessage)) {
3007
+ <mat-hint
3008
+ align="end" [innerHTML]="$safeNavigationMigration(options?.description)"></mat-hint>
3009
+ }
2543
3010
  </mat-form-field>
2544
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
2545
- [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"] }]
3011
+ @if (options?.showErrors && options?.errorMessage) {
3012
+ <mat-error
3013
+ [innerHTML]="$safeNavigationMigration(options?.errorMessage)"></mat-error>
3014
+ }`, 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"] }]
2546
3015
  }], ctorParameters: () => [{ type: undefined, decorators: [{
2547
3016
  type: Inject,
2548
3017
  args: [MAT_FORM_FIELD_DEFAULT_OPTIONS]
@@ -2614,10 +3083,10 @@ class MaterialDesignFramework extends Framework {
2614
3083
  'wizard': 'stepper',
2615
3084
  };
2616
3085
  }
2617
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialDesignFramework, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
2618
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialDesignFramework }); }
3086
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialDesignFramework, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
3087
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialDesignFramework }); }
2619
3088
  }
2620
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialDesignFramework, decorators: [{
3089
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialDesignFramework, decorators: [{
2621
3090
  type: Injectable
2622
3091
  }] });
2623
3092
 
@@ -2637,8 +3106,8 @@ const ANGULAR_MATERIAL_MODULES = [
2637
3106
  MatToolbarModule, MatMenuModule, MatToolbarModule,
2638
3107
  ];
2639
3108
  class MaterialDesignFrameworkModule {
2640
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialDesignFrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
2641
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", 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,
3109
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialDesignFrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
3110
+ 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,
2642
3111
  FormsModule,
2643
3112
  ReactiveFormsModule, MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule,
2644
3113
  MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatExpansionModule,
@@ -2647,7 +3116,7 @@ class MaterialDesignFrameworkModule {
2647
3116
  MatStepperModule, MatTabsModule, MatTooltipModule,
2648
3117
  MatToolbarModule, MatMenuModule, MatToolbarModule, WidgetLibraryModule,
2649
3118
  JsonSchemaFormModule], exports: [JsonSchemaFormModule, FlexLayoutRootComponent, FlexLayoutSectionComponent, MaterialAddReferenceComponent, MaterialOneOfComponent, MaterialButtonComponent, MaterialButtonGroupComponent, MaterialCheckboxComponent, MaterialCheckboxesComponent, MaterialChipListComponent, MaterialDatepickerComponent, MaterialFileComponent, MaterialInputComponent, MaterialNumberComponent, MaterialRadiosComponent, MaterialSelectComponent, MaterialSliderComponent, MaterialStepperComponent, MaterialTabsComponent, MaterialTextareaComponent, MaterialDesignFrameworkComponent] }); }
2650
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialDesignFrameworkModule, providers: [
3119
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialDesignFrameworkModule, providers: [
2651
3120
  JsonSchemaFormService,
2652
3121
  FrameworkLibraryService,
2653
3122
  WidgetLibraryService,
@@ -2657,7 +3126,7 @@ class MaterialDesignFrameworkModule {
2657
3126
  ReactiveFormsModule, ANGULAR_MATERIAL_MODULES, WidgetLibraryModule,
2658
3127
  JsonSchemaFormModule, JsonSchemaFormModule] }); }
2659
3128
  }
2660
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaterialDesignFrameworkModule, decorators: [{
3129
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MaterialDesignFrameworkModule, decorators: [{
2661
3130
  type: NgModule,
2662
3131
  args: [{
2663
3132
  imports: [