@wiltech-labs/ngx-forms 1.0.5 → 1.0.6

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/README.md +389 -374
  2. package/fesm2022/wiltech-labs-ngx-forms.mjs +28 -28
  3. package/fesm2022/wiltech-labs-ngx-forms.mjs.map +1 -1
  4. package/package.json +1 -1
package/fesm2022/wiltech-labs-ngx-forms.mjs CHANGED
@@ -57,7 +57,7 @@ var TextField = class TextField {
57
57
  }
58
58
  },
59
59
  ngImport: i0,
60
- template: "<mat-form-field class=\"TextField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <input matInput [type]=\"fieldDef().type\" [formField]=\"formField()\" />\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of field()().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
60
+ template: "<mat-form-field class=\"TextField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n <mat-label>{{ fieldDef().label }}</mat-label>\r\n <input matInput [type]=\"fieldDef().type\" [formField]=\"formField()\" />\r\n\r\n @if (fieldDef().hint) {\r\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\r\n }\r\n\r\n @for (error of field()().errors(); track error.kind) {\r\n <mat-error>{{ error.message }}</mat-error>\r\n }\r\n</mat-form-field>\r\n",
61
61
  styles: [":host{display:block}.TextField{width:100%}\n"],
62
62
  dependencies: [
63
63
  {
@@ -145,7 +145,7 @@ i0.ɵɵngDeclareClassMetadata({
145
145
  MatInputModule
146
146
  ],
147
147
  changeDetection: ChangeDetectionStrategy.OnPush,
148
- template: "<mat-form-field class=\"TextField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <input matInput [type]=\"fieldDef().type\" [formField]=\"formField()\" />\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of field()().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
148
+ template: "<mat-form-field class=\"TextField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n <mat-label>{{ fieldDef().label }}</mat-label>\r\n <input matInput [type]=\"fieldDef().type\" [formField]=\"formField()\" />\r\n\r\n @if (fieldDef().hint) {\r\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\r\n }\r\n\r\n @for (error of field()().errors(); track error.kind) {\r\n <mat-error>{{ error.message }}</mat-error>\r\n }\r\n</mat-form-field>\r\n",
149
149
  styles: [":host{display:block}.TextField{width:100%}\n"]
150
150
  }]
151
151
  }],
@@ -234,7 +234,7 @@ var TextareaField = class TextareaField {
234
234
  }
235
235
  },
236
236
  ngImport: i0,
237
- template: "<mat-form-field class=\"TextareaField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <textarea\n matInput\n class=\"TextareaField-input\"\n [formField]=\"field()\"\n cdkTextareaAutosize\n [cdkAutosizeMinRows]=\"isCode() ? 8 : 4\"\n [class.is-code]=\"isCode()\"\n [attr.spellcheck]=\"isCode() ? 'false' : null\"\n (keydown)=\"onKeydown($event)\"\n ></textarea>\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of field()().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
237
+ template: "<mat-form-field class=\"TextareaField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n <mat-label>{{ fieldDef().label }}</mat-label>\r\n <textarea\r\n matInput\r\n class=\"TextareaField-input\"\r\n [formField]=\"field()\"\r\n cdkTextareaAutosize\r\n [cdkAutosizeMinRows]=\"isCode() ? 8 : 4\"\r\n [class.is-code]=\"isCode()\"\r\n [attr.spellcheck]=\"isCode() ? 'false' : null\"\r\n (keydown)=\"onKeydown($event)\"\r\n ></textarea>\r\n\r\n @if (fieldDef().hint) {\r\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\r\n }\r\n\r\n @for (error of field()().errors(); track error.kind) {\r\n <mat-error>{{ error.message }}</mat-error>\r\n }\r\n</mat-form-field>\r\n",
238
238
  styles: [":host{display:block}.TextareaField{width:100%}.TextareaField-input.is-code{font-family:ui-monospace,Cascadia Code,Consolas,monospace;font-size:.875rem;tab-size:2}\n"],
239
239
  dependencies: [
240
240
  {
@@ -334,7 +334,7 @@ i0.ɵɵngDeclareClassMetadata({
334
334
  MatInputModule
335
335
  ],
336
336
  changeDetection: ChangeDetectionStrategy.OnPush,
337
- template: "<mat-form-field class=\"TextareaField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <textarea\n matInput\n class=\"TextareaField-input\"\n [formField]=\"field()\"\n cdkTextareaAutosize\n [cdkAutosizeMinRows]=\"isCode() ? 8 : 4\"\n [class.is-code]=\"isCode()\"\n [attr.spellcheck]=\"isCode() ? 'false' : null\"\n (keydown)=\"onKeydown($event)\"\n ></textarea>\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of field()().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
337
+ template: "<mat-form-field class=\"TextareaField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n <mat-label>{{ fieldDef().label }}</mat-label>\r\n <textarea\r\n matInput\r\n class=\"TextareaField-input\"\r\n [formField]=\"field()\"\r\n cdkTextareaAutosize\r\n [cdkAutosizeMinRows]=\"isCode() ? 8 : 4\"\r\n [class.is-code]=\"isCode()\"\r\n [attr.spellcheck]=\"isCode() ? 'false' : null\"\r\n (keydown)=\"onKeydown($event)\"\r\n ></textarea>\r\n\r\n @if (fieldDef().hint) {\r\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\r\n }\r\n\r\n @for (error of field()().errors(); track error.kind) {\r\n <mat-error>{{ error.message }}</mat-error>\r\n }\r\n</mat-form-field>\r\n",
338
338
  styles: [":host{display:block}.TextareaField{width:100%}.TextareaField-input.is-code{font-family:ui-monospace,Cascadia Code,Consolas,monospace;font-size:.875rem;tab-size:2}\n"]
339
339
  }]
340
340
  }],
@@ -399,7 +399,7 @@ var FieldSubscript = class FieldSubscript {
399
399
  }
400
400
  },
401
401
  ngImport: i0,
402
- template: "@let state = field()();\n@if (state.touched() && state.invalid()) {\n @for (error of errors(); track error.kind) {\n <mat-error class=\"FieldSubscript-error\">{{ error.message ?? error.kind }}</mat-error>\n }\n} @else if (hint()) {\n <div class=\"FieldSubscript-hint\">{{ hint() }}</div>\n}\n",
402
+ template: "@let state = field()();\r\n@if (state.touched() && state.invalid()) {\r\n @for (error of errors(); track error.kind) {\r\n <mat-error class=\"FieldSubscript-error\">{{ error.message ?? error.kind }}</mat-error>\r\n }\r\n} @else if (hint()) {\r\n <div class=\"FieldSubscript-hint\">{{ hint() }}</div>\r\n}\r\n",
403
403
  styles: [":host{display:block}.FieldSubscript-hint{margin-top:4px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-small);letter-spacing:var(--mat-sys-body-small-tracking)}.FieldSubscript-error{display:block;margin-top:4px;font:var(--mat-sys-body-small);letter-spacing:var(--mat-sys-body-small-tracking)}\n"],
404
404
  dependencies: [{
405
405
  kind: "directive",
@@ -422,7 +422,7 @@ i0.ɵɵngDeclareClassMetadata({
422
422
  standalone: true,
423
423
  imports: [MatError],
424
424
  changeDetection: ChangeDetectionStrategy.OnPush,
425
- template: "@let state = field()();\n@if (state.touched() && state.invalid()) {\n @for (error of errors(); track error.kind) {\n <mat-error class=\"FieldSubscript-error\">{{ error.message ?? error.kind }}</mat-error>\n }\n} @else if (hint()) {\n <div class=\"FieldSubscript-hint\">{{ hint() }}</div>\n}\n",
425
+ template: "@let state = field()();\r\n@if (state.touched() && state.invalid()) {\r\n @for (error of errors(); track error.kind) {\r\n <mat-error class=\"FieldSubscript-error\">{{ error.message ?? error.kind }}</mat-error>\r\n }\r\n} @else if (hint()) {\r\n <div class=\"FieldSubscript-hint\">{{ hint() }}</div>\r\n}\r\n",
426
426
  styles: [":host{display:block}.FieldSubscript-hint{margin-top:4px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-small);letter-spacing:var(--mat-sys-body-small-tracking)}.FieldSubscript-error{display:block;margin-top:4px;font:var(--mat-sys-body-small);letter-spacing:var(--mat-sys-body-small-tracking)}\n"]
427
427
  }]
428
428
  }],
@@ -479,7 +479,7 @@ var CheckboxField = class CheckboxField {
479
479
  }
480
480
  },
481
481
  ngImport: i0,
482
- template: "<mat-checkbox [formField]=\"field()\">\n {{ fieldDef().label }}\n @if (field()().required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n</mat-checkbox>\n<ngx-field-subscript class=\"CheckboxField-subscript\" [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
482
+ template: "<mat-checkbox [formField]=\"field()\">\r\n {{ fieldDef().label }}\r\n @if (field()().required()) {\r\n <span aria-hidden=\"true\"> *</span>\r\n }\r\n</mat-checkbox>\r\n<ngx-field-subscript class=\"CheckboxField-subscript\" [field]=\"field()\" [hint]=\"fieldDef().hint\" />\r\n",
483
483
  styles: [":host{display:block}.CheckboxField-subscript{padding-inline-start:40px;margin-top:-4px}\n"],
484
484
  dependencies: [
485
485
  {
@@ -542,7 +542,7 @@ i0.ɵɵngDeclareClassMetadata({
542
542
  FieldSubscript
543
543
  ],
544
544
  changeDetection: ChangeDetectionStrategy.OnPush,
545
- template: "<mat-checkbox [formField]=\"field()\">\n {{ fieldDef().label }}\n @if (field()().required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n</mat-checkbox>\n<ngx-field-subscript class=\"CheckboxField-subscript\" [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
545
+ template: "<mat-checkbox [formField]=\"field()\">\r\n {{ fieldDef().label }}\r\n @if (field()().required()) {\r\n <span aria-hidden=\"true\"> *</span>\r\n }\r\n</mat-checkbox>\r\n<ngx-field-subscript class=\"CheckboxField-subscript\" [field]=\"field()\" [hint]=\"fieldDef().hint\" />\r\n",
546
546
  styles: [":host{display:block}.CheckboxField-subscript{padding-inline-start:40px;margin-top:-4px}\n"]
547
547
  }]
548
548
  }],
@@ -601,7 +601,7 @@ var RadioField = class RadioField {
601
601
  }
602
602
  },
603
603
  ngImport: i0,
604
- template: "<div class=\"RadioField-label\" [id]=\"labelId\">\n {{ fieldDef().label }}\n @if (field()().required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n</div>\n<mat-radio-group\n class=\"RadioField-group\"\n [class.is-vertical]=\"fieldDef().orientation === 'vertical'\"\n [attr.aria-orientation]=\"fieldDef().orientation ?? 'horizontal'\"\n [formField]=\"field()\"\n [attr.aria-labelledby]=\"labelId\"\n>\n @for (option of fieldDef().options ?? []; track option.value) {\n <mat-radio-button [value]=\"option.value\">{{ option.label }}</mat-radio-button>\n }\n</mat-radio-group>\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
604
+ template: "<div class=\"RadioField-label\" [id]=\"labelId\">\r\n {{ fieldDef().label }}\r\n @if (field()().required()) {\r\n <span aria-hidden=\"true\"> *</span>\r\n }\r\n</div>\r\n<mat-radio-group\r\n class=\"RadioField-group\"\r\n [class.is-vertical]=\"fieldDef().orientation === 'vertical'\"\r\n [attr.aria-orientation]=\"fieldDef().orientation ?? 'horizontal'\"\r\n [formField]=\"field()\"\r\n [attr.aria-labelledby]=\"labelId\"\r\n>\r\n @for (option of fieldDef().options ?? []; track option.value) {\r\n <mat-radio-button [value]=\"option.value\">{{ option.label }}</mat-radio-button>\r\n }\r\n</mat-radio-group>\r\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\r\n",
605
605
  styles: [":host{display:block}.RadioField-label{color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium);letter-spacing:var(--mat-sys-body-medium-tracking);margin-bottom:0}.RadioField-group{display:flex;flex-wrap:wrap;column-gap:8px}.RadioField-group.is-vertical{flex-direction:column;flex-wrap:nowrap;align-items:flex-start}\n"],
606
606
  dependencies: [
607
607
  {
@@ -678,7 +678,7 @@ i0.ɵɵngDeclareClassMetadata({
678
678
  FieldSubscript
679
679
  ],
680
680
  changeDetection: ChangeDetectionStrategy.OnPush,
681
- template: "<div class=\"RadioField-label\" [id]=\"labelId\">\n {{ fieldDef().label }}\n @if (field()().required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n</div>\n<mat-radio-group\n class=\"RadioField-group\"\n [class.is-vertical]=\"fieldDef().orientation === 'vertical'\"\n [attr.aria-orientation]=\"fieldDef().orientation ?? 'horizontal'\"\n [formField]=\"field()\"\n [attr.aria-labelledby]=\"labelId\"\n>\n @for (option of fieldDef().options ?? []; track option.value) {\n <mat-radio-button [value]=\"option.value\">{{ option.label }}</mat-radio-button>\n }\n</mat-radio-group>\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
681
+ template: "<div class=\"RadioField-label\" [id]=\"labelId\">\r\n {{ fieldDef().label }}\r\n @if (field()().required()) {\r\n <span aria-hidden=\"true\"> *</span>\r\n }\r\n</div>\r\n<mat-radio-group\r\n class=\"RadioField-group\"\r\n [class.is-vertical]=\"fieldDef().orientation === 'vertical'\"\r\n [attr.aria-orientation]=\"fieldDef().orientation ?? 'horizontal'\"\r\n [formField]=\"field()\"\r\n [attr.aria-labelledby]=\"labelId\"\r\n>\r\n @for (option of fieldDef().options ?? []; track option.value) {\r\n <mat-radio-button [value]=\"option.value\">{{ option.label }}</mat-radio-button>\r\n }\r\n</mat-radio-group>\r\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\r\n",
682
682
  styles: [":host{display:block}.RadioField-label{color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium);letter-spacing:var(--mat-sys-body-medium-tracking);margin-bottom:0}.RadioField-group{display:flex;flex-wrap:wrap;column-gap:8px}.RadioField-group.is-vertical{flex-direction:column;flex-wrap:nowrap;align-items:flex-start}\n"]
683
683
  }]
684
684
  }],
@@ -736,7 +736,7 @@ var SelectField = class SelectField {
736
736
  }
737
737
  },
738
738
  ngImport: i0,
739
- template: "<mat-form-field class=\"SelectField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <mat-select [formField]=\"formField()\">\n @for (option of fieldDef().options ?? []; track option.value) {\n <mat-option [value]=\"option.value\">{{ option.label }}</mat-option>\n }\n </mat-select>\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of field()().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
739
+ template: "<mat-form-field class=\"SelectField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n <mat-label>{{ fieldDef().label }}</mat-label>\r\n <mat-select [formField]=\"formField()\">\r\n @for (option of fieldDef().options ?? []; track option.value) {\r\n <mat-option [value]=\"option.value\">{{ option.label }}</mat-option>\r\n }\r\n </mat-select>\r\n\r\n @if (fieldDef().hint) {\r\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\r\n }\r\n\r\n @for (error of field()().errors(); track error.kind) {\r\n <mat-error>{{ error.message }}</mat-error>\r\n }\r\n</mat-form-field>\r\n",
740
740
  styles: [":host{display:block}.SelectField{width:100%}\n"],
741
741
  dependencies: [
742
742
  {
@@ -849,7 +849,7 @@ i0.ɵɵngDeclareClassMetadata({
849
849
  MatOption
850
850
  ],
851
851
  changeDetection: ChangeDetectionStrategy.OnPush,
852
- template: "<mat-form-field class=\"SelectField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <mat-select [formField]=\"formField()\">\n @for (option of fieldDef().options ?? []; track option.value) {\n <mat-option [value]=\"option.value\">{{ option.label }}</mat-option>\n }\n </mat-select>\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of field()().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
852
+ template: "<mat-form-field class=\"SelectField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n <mat-label>{{ fieldDef().label }}</mat-label>\r\n <mat-select [formField]=\"formField()\">\r\n @for (option of fieldDef().options ?? []; track option.value) {\r\n <mat-option [value]=\"option.value\">{{ option.label }}</mat-option>\r\n }\r\n </mat-select>\r\n\r\n @if (fieldDef().hint) {\r\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\r\n }\r\n\r\n @for (error of field()().errors(); track error.kind) {\r\n <mat-error>{{ error.message }}</mat-error>\r\n }\r\n</mat-form-field>\r\n",
853
853
  styles: [":host{display:block}.SelectField{width:100%}\n"]
854
854
  }]
855
855
  }],
@@ -921,7 +921,7 @@ var ChipsField = class ChipsField {
921
921
  }
922
922
  },
923
923
  ngImport: i0,
924
- template: "<mat-form-field class=\"ChipsField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n\n <mat-chip-grid #grid [attr.aria-label]=\"fieldDef().label + ' entries'\">\n @for (chip of chips(); track chip) {\n <mat-chip-row (removed)=\"removeChip(chip)\">\n {{ chip }}\n <button matChipRemove [attr.aria-label]=\"'Remove ' + chip\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n </mat-chip-grid>\n\n <input\n [matChipInputFor]=\"grid\"\n [placeholder]=\"'Add ' + fieldDef().label\"\n [disabled]=\"state().disabled()\"\n (blur)=\"state().markAsTouched()\"\n (matChipInputTokenEnd)=\"addChip($event)\"\n />\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of state().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
924
+ template: "<mat-form-field class=\"ChipsField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n <mat-label>{{ fieldDef().label }}</mat-label>\r\n\r\n <mat-chip-grid #grid [attr.aria-label]=\"fieldDef().label + ' entries'\">\r\n @for (chip of chips(); track chip) {\r\n <mat-chip-row (removed)=\"removeChip(chip)\">\r\n {{ chip }}\r\n <button matChipRemove [attr.aria-label]=\"'Remove ' + chip\">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n }\r\n </mat-chip-grid>\r\n\r\n <input\r\n [matChipInputFor]=\"grid\"\r\n [placeholder]=\"'Add ' + fieldDef().label\"\r\n [disabled]=\"state().disabled()\"\r\n (blur)=\"state().markAsTouched()\"\r\n (matChipInputTokenEnd)=\"addChip($event)\"\r\n />\r\n\r\n @if (fieldDef().hint) {\r\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\r\n }\r\n\r\n @for (error of state().errors(); track error.kind) {\r\n <mat-error>{{ error.message }}</mat-error>\r\n }\r\n</mat-form-field>\r\n",
925
925
  styles: [":host{display:block}.ChipsField{width:100%}\n"],
926
926
  dependencies: [
927
927
  {
@@ -1037,7 +1037,7 @@ i0.ɵɵngDeclareClassMetadata({
1037
1037
  MatIcon
1038
1038
  ],
1039
1039
  changeDetection: ChangeDetectionStrategy.OnPush,
1040
- template: "<mat-form-field class=\"ChipsField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n\n <mat-chip-grid #grid [attr.aria-label]=\"fieldDef().label + ' entries'\">\n @for (chip of chips(); track chip) {\n <mat-chip-row (removed)=\"removeChip(chip)\">\n {{ chip }}\n <button matChipRemove [attr.aria-label]=\"'Remove ' + chip\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n </mat-chip-grid>\n\n <input\n [matChipInputFor]=\"grid\"\n [placeholder]=\"'Add ' + fieldDef().label\"\n [disabled]=\"state().disabled()\"\n (blur)=\"state().markAsTouched()\"\n (matChipInputTokenEnd)=\"addChip($event)\"\n />\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of state().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
1040
+ template: "<mat-form-field class=\"ChipsField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n <mat-label>{{ fieldDef().label }}</mat-label>\r\n\r\n <mat-chip-grid #grid [attr.aria-label]=\"fieldDef().label + ' entries'\">\r\n @for (chip of chips(); track chip) {\r\n <mat-chip-row (removed)=\"removeChip(chip)\">\r\n {{ chip }}\r\n <button matChipRemove [attr.aria-label]=\"'Remove ' + chip\">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n }\r\n </mat-chip-grid>\r\n\r\n <input\r\n [matChipInputFor]=\"grid\"\r\n [placeholder]=\"'Add ' + fieldDef().label\"\r\n [disabled]=\"state().disabled()\"\r\n (blur)=\"state().markAsTouched()\"\r\n (matChipInputTokenEnd)=\"addChip($event)\"\r\n />\r\n\r\n @if (fieldDef().hint) {\r\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\r\n }\r\n\r\n @for (error of state().errors(); track error.kind) {\r\n <mat-error>{{ error.message }}</mat-error>\r\n }\r\n</mat-form-field>\r\n",
1041
1041
  styles: [":host{display:block}.ChipsField{width:100%}\n"]
1042
1042
  }]
1043
1043
  }],
@@ -1118,7 +1118,7 @@ var ThemeField = class ThemeField {
1118
1118
  }
1119
1119
  },
1120
1120
  ngImport: i0,
1121
- template: "<div class=\"ThemeField-label\" [id]=\"labelId\">\n {{ fieldDef().label }}\n @if (field()().required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n</div>\n<mat-button-toggle-group\n class=\"ThemeField-group\"\n [formField]=\"field()\"\n [attr.aria-labelledby]=\"labelId\"\n>\n @for (choice of choices(); track choice.value) {\n <mat-button-toggle [value]=\"choice.value\" [aria-label]=\"choice.label\">\n <mat-icon aria-hidden=\"true\">{{ choice.icon }}</mat-icon>\n </mat-button-toggle>\n }\n</mat-button-toggle-group>\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
1121
+ template: "<div class=\"ThemeField-label\" [id]=\"labelId\">\r\n {{ fieldDef().label }}\r\n @if (field()().required()) {\r\n <span aria-hidden=\"true\"> *</span>\r\n }\r\n</div>\r\n<mat-button-toggle-group\r\n class=\"ThemeField-group\"\r\n [formField]=\"field()\"\r\n [attr.aria-labelledby]=\"labelId\"\r\n>\r\n @for (choice of choices(); track choice.value) {\r\n <mat-button-toggle [value]=\"choice.value\" [aria-label]=\"choice.label\">\r\n <mat-icon aria-hidden=\"true\">{{ choice.icon }}</mat-icon>\r\n </mat-button-toggle>\r\n }\r\n</mat-button-toggle-group>\r\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\r\n",
1122
1122
  styles: [":host{display:block}.ThemeField-label{color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium);letter-spacing:var(--mat-sys-body-medium-tracking);margin-bottom:0}.ThemeField-group{display:flex;width:100%}.ThemeField-group mat-button-toggle{flex:1}\n"],
1123
1123
  dependencies: [
1124
1124
  {
@@ -1210,7 +1210,7 @@ i0.ɵɵngDeclareClassMetadata({
1210
1210
  FieldSubscript
1211
1211
  ],
1212
1212
  changeDetection: ChangeDetectionStrategy.OnPush,
1213
- template: "<div class=\"ThemeField-label\" [id]=\"labelId\">\n {{ fieldDef().label }}\n @if (field()().required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n</div>\n<mat-button-toggle-group\n class=\"ThemeField-group\"\n [formField]=\"field()\"\n [attr.aria-labelledby]=\"labelId\"\n>\n @for (choice of choices(); track choice.value) {\n <mat-button-toggle [value]=\"choice.value\" [aria-label]=\"choice.label\">\n <mat-icon aria-hidden=\"true\">{{ choice.icon }}</mat-icon>\n </mat-button-toggle>\n }\n</mat-button-toggle-group>\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
1213
+ template: "<div class=\"ThemeField-label\" [id]=\"labelId\">\r\n {{ fieldDef().label }}\r\n @if (field()().required()) {\r\n <span aria-hidden=\"true\"> *</span>\r\n }\r\n</div>\r\n<mat-button-toggle-group\r\n class=\"ThemeField-group\"\r\n [formField]=\"field()\"\r\n [attr.aria-labelledby]=\"labelId\"\r\n>\r\n @for (choice of choices(); track choice.value) {\r\n <mat-button-toggle [value]=\"choice.value\" [aria-label]=\"choice.label\">\r\n <mat-icon aria-hidden=\"true\">{{ choice.icon }}</mat-icon>\r\n </mat-button-toggle>\r\n }\r\n</mat-button-toggle-group>\r\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\r\n",
1214
1214
  styles: [":host{display:block}.ThemeField-label{color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium);letter-spacing:var(--mat-sys-body-medium-tracking);margin-bottom:0}.ThemeField-group{display:flex;width:100%}.ThemeField-group mat-button-toggle{flex:1}\n"]
1215
1215
  }]
1216
1216
  }],
@@ -1269,7 +1269,7 @@ var SliderField = class SliderField {
1269
1269
  }
1270
1270
  },
1271
1271
  ngImport: i0,
1272
- template: "<div class=\"SliderField-label\">\n <span [id]=\"labelId\">\n {{ fieldDef().label }}\n @if (field()().required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n </span>\n <span class=\"SliderField-value\">{{ field()().value() }}</span>\n</div>\n<mat-slider\n class=\"SliderField-slider\"\n discrete\n [min]=\"fieldDef().min ?? 0\"\n [max]=\"fieldDef().max ?? 100\"\n [step]=\"fieldDef().step ?? 1\"\n>\n <input matSliderThumb [formField]=\"field()\" [attr.aria-labelledby]=\"labelId\" />\n</mat-slider>\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
1272
+ template: "<div class=\"SliderField-label\">\r\n <span [id]=\"labelId\">\r\n {{ fieldDef().label }}\r\n @if (field()().required()) {\r\n <span aria-hidden=\"true\"> *</span>\r\n }\r\n </span>\r\n <span class=\"SliderField-value\">{{ field()().value() }}</span>\r\n</div>\r\n<mat-slider\r\n class=\"SliderField-slider\"\r\n discrete\r\n [min]=\"fieldDef().min ?? 0\"\r\n [max]=\"fieldDef().max ?? 100\"\r\n [step]=\"fieldDef().step ?? 1\"\r\n>\r\n <input matSliderThumb [formField]=\"field()\" [attr.aria-labelledby]=\"labelId\" />\r\n</mat-slider>\r\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\r\n",
1273
1273
  styles: [":host{display:block}.SliderField-label{color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium);letter-spacing:var(--mat-sys-body-medium-tracking);display:flex;justify-content:space-between;align-items:baseline;margin-bottom:0}.SliderField-value{color:var(--mat-sys-primary);font:var(--mat-sys-label-large);letter-spacing:var(--mat-sys-label-large-tracking)}.SliderField-slider{display:block;width:100%;margin:0}\n"],
1274
1274
  dependencies: [
1275
1275
  {
@@ -1335,7 +1335,7 @@ i0.ɵɵngDeclareClassMetadata({
1335
1335
  FieldSubscript
1336
1336
  ],
1337
1337
  changeDetection: ChangeDetectionStrategy.OnPush,
1338
- template: "<div class=\"SliderField-label\">\n <span [id]=\"labelId\">\n {{ fieldDef().label }}\n @if (field()().required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n </span>\n <span class=\"SliderField-value\">{{ field()().value() }}</span>\n</div>\n<mat-slider\n class=\"SliderField-slider\"\n discrete\n [min]=\"fieldDef().min ?? 0\"\n [max]=\"fieldDef().max ?? 100\"\n [step]=\"fieldDef().step ?? 1\"\n>\n <input matSliderThumb [formField]=\"field()\" [attr.aria-labelledby]=\"labelId\" />\n</mat-slider>\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
1338
+ template: "<div class=\"SliderField-label\">\r\n <span [id]=\"labelId\">\r\n {{ fieldDef().label }}\r\n @if (field()().required()) {\r\n <span aria-hidden=\"true\"> *</span>\r\n }\r\n </span>\r\n <span class=\"SliderField-value\">{{ field()().value() }}</span>\r\n</div>\r\n<mat-slider\r\n class=\"SliderField-slider\"\r\n discrete\r\n [min]=\"fieldDef().min ?? 0\"\r\n [max]=\"fieldDef().max ?? 100\"\r\n [step]=\"fieldDef().step ?? 1\"\r\n>\r\n <input matSliderThumb [formField]=\"field()\" [attr.aria-labelledby]=\"labelId\" />\r\n</mat-slider>\r\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\r\n",
1339
1339
  styles: [":host{display:block}.SliderField-label{color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium);letter-spacing:var(--mat-sys-body-medium-tracking);display:flex;justify-content:space-between;align-items:baseline;margin-bottom:0}.SliderField-value{color:var(--mat-sys-primary);font:var(--mat-sys-label-large);letter-spacing:var(--mat-sys-label-large-tracking)}.SliderField-slider{display:block;width:100%;margin:0}\n"]
1340
1340
  }]
1341
1341
  }],
@@ -1541,7 +1541,7 @@ var BusinessDateField = class BusinessDateField {
1541
1541
  isSignal: true
1542
1542
  }],
1543
1543
  ngImport: i0,
1544
- template: "<mat-form-field class=\"BusinessDateField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <input\n matInput\n [matDatepicker]=\"datepicker\"\n [value]=\"date()\"\n [min]=\"minDate()\"\n [max]=\"maxDate()\"\n [required]=\"state().required()\"\n [disabled]=\"state().disabled()\"\n (blur)=\"state().markAsTouched()\"\n (dateChange)=\"onDateChange($event.value)\"\n />\n <mat-datepicker-toggle matIconSuffix [for]=\"datepicker\" />\n <mat-datepicker #datepicker (closed)=\"state().markAsTouched()\" />\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of state().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
1544
+ template: "<mat-form-field class=\"BusinessDateField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n <mat-label>{{ fieldDef().label }}</mat-label>\r\n <input\r\n matInput\r\n [matDatepicker]=\"datepicker\"\r\n [value]=\"date()\"\r\n [min]=\"minDate()\"\r\n [max]=\"maxDate()\"\r\n [required]=\"state().required()\"\r\n [disabled]=\"state().disabled()\"\r\n (blur)=\"state().markAsTouched()\"\r\n (dateChange)=\"onDateChange($event.value)\"\r\n />\r\n <mat-datepicker-toggle matIconSuffix [for]=\"datepicker\" />\r\n <mat-datepicker #datepicker (closed)=\"state().markAsTouched()\" />\r\n\r\n @if (fieldDef().hint) {\r\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\r\n }\r\n\r\n @for (error of state().errors(); track error.kind) {\r\n <mat-error>{{ error.message }}</mat-error>\r\n }\r\n</mat-form-field>\r\n",
1545
1545
  styles: [":host{display:block}.BusinessDateField{width:100%}\n"],
1546
1546
  dependencies: [
1547
1547
  {
@@ -1664,7 +1664,7 @@ i0.ɵɵngDeclareClassMetadata({
1664
1664
  ],
1665
1665
  providers: [provideLocaleDateAdapter()],
1666
1666
  changeDetection: ChangeDetectionStrategy.OnPush,
1667
- template: "<mat-form-field class=\"BusinessDateField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <input\n matInput\n [matDatepicker]=\"datepicker\"\n [value]=\"date()\"\n [min]=\"minDate()\"\n [max]=\"maxDate()\"\n [required]=\"state().required()\"\n [disabled]=\"state().disabled()\"\n (blur)=\"state().markAsTouched()\"\n (dateChange)=\"onDateChange($event.value)\"\n />\n <mat-datepicker-toggle matIconSuffix [for]=\"datepicker\" />\n <mat-datepicker #datepicker (closed)=\"state().markAsTouched()\" />\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of state().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
1667
+ template: "<mat-form-field class=\"BusinessDateField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n <mat-label>{{ fieldDef().label }}</mat-label>\r\n <input\r\n matInput\r\n [matDatepicker]=\"datepicker\"\r\n [value]=\"date()\"\r\n [min]=\"minDate()\"\r\n [max]=\"maxDate()\"\r\n [required]=\"state().required()\"\r\n [disabled]=\"state().disabled()\"\r\n (blur)=\"state().markAsTouched()\"\r\n (dateChange)=\"onDateChange($event.value)\"\r\n />\r\n <mat-datepicker-toggle matIconSuffix [for]=\"datepicker\" />\r\n <mat-datepicker #datepicker (closed)=\"state().markAsTouched()\" />\r\n\r\n @if (fieldDef().hint) {\r\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\r\n }\r\n\r\n @for (error of state().errors(); track error.kind) {\r\n <mat-error>{{ error.message }}</mat-error>\r\n }\r\n</mat-form-field>\r\n",
1668
1668
  styles: [":host{display:block}.BusinessDateField{width:100%}\n"]
1669
1669
  }]
1670
1670
  }],
@@ -1758,7 +1758,7 @@ var BusinessTimeField = class BusinessTimeField {
1758
1758
  isSignal: true
1759
1759
  }],
1760
1760
  ngImport: i0,
1761
- template: "<mat-form-field class=\"BusinessTimeField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <input\n matInput\n [matTimepicker]=\"timepicker\"\n [matTimepickerMin]=\"minTime()\"\n [matTimepickerMax]=\"maxTime()\"\n [value]=\"time()\"\n [required]=\"state().required()\"\n [disabled]=\"state().disabled()\"\n (blur)=\"state().markAsTouched()\"\n (valueChange)=\"onTimeChange($event)\"\n />\n <mat-timepicker-toggle matIconSuffix [for]=\"timepicker\" />\n <mat-timepicker #timepicker (closed)=\"state().markAsTouched()\" />\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of state().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
1761
+ template: "<mat-form-field class=\"BusinessTimeField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n <mat-label>{{ fieldDef().label }}</mat-label>\r\n <input\r\n matInput\r\n [matTimepicker]=\"timepicker\"\r\n [matTimepickerMin]=\"minTime()\"\r\n [matTimepickerMax]=\"maxTime()\"\r\n [value]=\"time()\"\r\n [required]=\"state().required()\"\r\n [disabled]=\"state().disabled()\"\r\n (blur)=\"state().markAsTouched()\"\r\n (valueChange)=\"onTimeChange($event)\"\r\n />\r\n <mat-timepicker-toggle matIconSuffix [for]=\"timepicker\" />\r\n <mat-timepicker #timepicker (closed)=\"state().markAsTouched()\" />\r\n\r\n @if (fieldDef().hint) {\r\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\r\n }\r\n\r\n @for (error of state().errors(); track error.kind) {\r\n <mat-error>{{ error.message }}</mat-error>\r\n }\r\n</mat-form-field>\r\n",
1762
1762
  styles: [":host{display:block}.BusinessTimeField{width:100%}\n"],
1763
1763
  dependencies: [
1764
1764
  {
@@ -1898,7 +1898,7 @@ i0.ɵɵngDeclareClassMetadata({
1898
1898
  ],
1899
1899
  providers: [provideLocaleDateAdapter()],
1900
1900
  changeDetection: ChangeDetectionStrategy.OnPush,
1901
- template: "<mat-form-field class=\"BusinessTimeField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <input\n matInput\n [matTimepicker]=\"timepicker\"\n [matTimepickerMin]=\"minTime()\"\n [matTimepickerMax]=\"maxTime()\"\n [value]=\"time()\"\n [required]=\"state().required()\"\n [disabled]=\"state().disabled()\"\n (blur)=\"state().markAsTouched()\"\n (valueChange)=\"onTimeChange($event)\"\n />\n <mat-timepicker-toggle matIconSuffix [for]=\"timepicker\" />\n <mat-timepicker #timepicker (closed)=\"state().markAsTouched()\" />\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of state().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
1901
+ template: "<mat-form-field class=\"BusinessTimeField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n <mat-label>{{ fieldDef().label }}</mat-label>\r\n <input\r\n matInput\r\n [matTimepicker]=\"timepicker\"\r\n [matTimepickerMin]=\"minTime()\"\r\n [matTimepickerMax]=\"maxTime()\"\r\n [value]=\"time()\"\r\n [required]=\"state().required()\"\r\n [disabled]=\"state().disabled()\"\r\n (blur)=\"state().markAsTouched()\"\r\n (valueChange)=\"onTimeChange($event)\"\r\n />\r\n <mat-timepicker-toggle matIconSuffix [for]=\"timepicker\" />\r\n <mat-timepicker #timepicker (closed)=\"state().markAsTouched()\" />\r\n\r\n @if (fieldDef().hint) {\r\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\r\n }\r\n\r\n @for (error of state().errors(); track error.kind) {\r\n <mat-error>{{ error.message }}</mat-error>\r\n }\r\n</mat-form-field>\r\n",
1902
1902
  styles: [":host{display:block}.BusinessTimeField{width:100%}\n"]
1903
1903
  }]
1904
1904
  }],
@@ -2092,7 +2092,7 @@ var InstantDateTimeField = class InstantDateTimeField {
2092
2092
  isSignal: true
2093
2093
  }],
2094
2094
  ngImport: i0,
2095
- template: "<div class=\"InstantDateTimeField-label\">\n {{ fieldDef().label }}\n @if (state().required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n</div>\n\n<div class=\"InstantDateTimeField-row\">\n <mat-form-field class=\"InstantDateTimeField-date\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>Date</mat-label>\n <input\n matInput\n [matDatepicker]=\"datepicker\"\n [value]=\"date()\"\n [min]=\"minDate()\"\n [max]=\"maxDate()\"\n [disabled]=\"state().disabled()\"\n (blur)=\"state().markAsTouched()\"\n (dateChange)=\"onDateChange($event.value)\"\n />\n <mat-datepicker-toggle matIconSuffix [for]=\"datepicker\" />\n <mat-datepicker #datepicker (closed)=\"state().markAsTouched()\" />\n </mat-form-field>\n\n <mat-form-field class=\"InstantDateTimeField-time\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>Time</mat-label>\n <input\n matInput\n [matTimepicker]=\"timepicker\"\n [value]=\"time()\"\n [disabled]=\"state().disabled()\"\n (blur)=\"state().markAsTouched()\"\n (valueChange)=\"onTimeChange($event)\"\n />\n <mat-timepicker-toggle matIconSuffix [for]=\"timepicker\" />\n <mat-timepicker #timepicker (closed)=\"state().markAsTouched()\" />\n </mat-form-field>\n</div>\n\n<div class=\"InstantDateTimeField-zone\">\n {{ timeZone() }}\n @if (offset()) {\n (UTC{{ offset() }})\n }\n @if (state().value()) {\n · stored as {{ state().value() }}\n }\n</div>\n\n@if (notice()) {\n <div class=\"InstantDateTimeField-notice\">{{ notice() }}</div>\n}\n\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
2095
+ template: "<div class=\"InstantDateTimeField-label\">\r\n {{ fieldDef().label }}\r\n @if (state().required()) {\r\n <span aria-hidden=\"true\"> *</span>\r\n }\r\n</div>\r\n\r\n<div class=\"InstantDateTimeField-row\">\r\n <mat-form-field class=\"InstantDateTimeField-date\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n <mat-label>Date</mat-label>\r\n <input\r\n matInput\r\n [matDatepicker]=\"datepicker\"\r\n [value]=\"date()\"\r\n [min]=\"minDate()\"\r\n [max]=\"maxDate()\"\r\n [disabled]=\"state().disabled()\"\r\n (blur)=\"state().markAsTouched()\"\r\n (dateChange)=\"onDateChange($event.value)\"\r\n />\r\n <mat-datepicker-toggle matIconSuffix [for]=\"datepicker\" />\r\n <mat-datepicker #datepicker (closed)=\"state().markAsTouched()\" />\r\n </mat-form-field>\r\n\r\n <mat-form-field class=\"InstantDateTimeField-time\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n <mat-label>Time</mat-label>\r\n <input\r\n matInput\r\n [matTimepicker]=\"timepicker\"\r\n [value]=\"time()\"\r\n [disabled]=\"state().disabled()\"\r\n (blur)=\"state().markAsTouched()\"\r\n (valueChange)=\"onTimeChange($event)\"\r\n />\r\n <mat-timepicker-toggle matIconSuffix [for]=\"timepicker\" />\r\n <mat-timepicker #timepicker (closed)=\"state().markAsTouched()\" />\r\n </mat-form-field>\r\n</div>\r\n\r\n<div class=\"InstantDateTimeField-zone\">\r\n {{ timeZone() }}\r\n @if (offset()) {\r\n (UTC{{ offset() }})\r\n }\r\n @if (state().value()) {\r\n · stored as {{ state().value() }}\r\n }\r\n</div>\r\n\r\n@if (notice()) {\r\n <div class=\"InstantDateTimeField-notice\">{{ notice() }}</div>\r\n}\r\n\r\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\r\n",
2096
2096
  styles: [":host{display:block}.InstantDateTimeField-label{margin-bottom:6px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium);letter-spacing:var(--mat-sys-body-medium-tracking)}.InstantDateTimeField-row{display:flex;flex-direction:column;gap:8px;width:100%}@media(min-width:400px){.InstantDateTimeField-row{flex-direction:row}}.InstantDateTimeField-date{flex:3;min-width:0}.InstantDateTimeField-time{flex:2;min-width:0}.InstantDateTimeField-zone{margin-top:4px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-small);letter-spacing:var(--mat-sys-body-small-tracking)}.InstantDateTimeField-notice{margin-top:4px;color:var(--mat-sys-tertiary);font:var(--mat-sys-body-small);letter-spacing:var(--mat-sys-body-small-tracking)}\n"],
2097
2097
  dependencies: [
2098
2098
  {
@@ -2263,7 +2263,7 @@ i0.ɵɵngDeclareClassMetadata({
2263
2263
  ],
2264
2264
  providers: [provideLocaleDateAdapter()],
2265
2265
  changeDetection: ChangeDetectionStrategy.OnPush,
2266
- template: "<div class=\"InstantDateTimeField-label\">\n {{ fieldDef().label }}\n @if (state().required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n</div>\n\n<div class=\"InstantDateTimeField-row\">\n <mat-form-field class=\"InstantDateTimeField-date\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>Date</mat-label>\n <input\n matInput\n [matDatepicker]=\"datepicker\"\n [value]=\"date()\"\n [min]=\"minDate()\"\n [max]=\"maxDate()\"\n [disabled]=\"state().disabled()\"\n (blur)=\"state().markAsTouched()\"\n (dateChange)=\"onDateChange($event.value)\"\n />\n <mat-datepicker-toggle matIconSuffix [for]=\"datepicker\" />\n <mat-datepicker #datepicker (closed)=\"state().markAsTouched()\" />\n </mat-form-field>\n\n <mat-form-field class=\"InstantDateTimeField-time\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>Time</mat-label>\n <input\n matInput\n [matTimepicker]=\"timepicker\"\n [value]=\"time()\"\n [disabled]=\"state().disabled()\"\n (blur)=\"state().markAsTouched()\"\n (valueChange)=\"onTimeChange($event)\"\n />\n <mat-timepicker-toggle matIconSuffix [for]=\"timepicker\" />\n <mat-timepicker #timepicker (closed)=\"state().markAsTouched()\" />\n </mat-form-field>\n</div>\n\n<div class=\"InstantDateTimeField-zone\">\n {{ timeZone() }}\n @if (offset()) {\n (UTC{{ offset() }})\n }\n @if (state().value()) {\n · stored as {{ state().value() }}\n }\n</div>\n\n@if (notice()) {\n <div class=\"InstantDateTimeField-notice\">{{ notice() }}</div>\n}\n\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
2266
+ template: "<div class=\"InstantDateTimeField-label\">\r\n {{ fieldDef().label }}\r\n @if (state().required()) {\r\n <span aria-hidden=\"true\"> *</span>\r\n }\r\n</div>\r\n\r\n<div class=\"InstantDateTimeField-row\">\r\n <mat-form-field class=\"InstantDateTimeField-date\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n <mat-label>Date</mat-label>\r\n <input\r\n matInput\r\n [matDatepicker]=\"datepicker\"\r\n [value]=\"date()\"\r\n [min]=\"minDate()\"\r\n [max]=\"maxDate()\"\r\n [disabled]=\"state().disabled()\"\r\n (blur)=\"state().markAsTouched()\"\r\n (dateChange)=\"onDateChange($event.value)\"\r\n />\r\n <mat-datepicker-toggle matIconSuffix [for]=\"datepicker\" />\r\n <mat-datepicker #datepicker (closed)=\"state().markAsTouched()\" />\r\n </mat-form-field>\r\n\r\n <mat-form-field class=\"InstantDateTimeField-time\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n <mat-label>Time</mat-label>\r\n <input\r\n matInput\r\n [matTimepicker]=\"timepicker\"\r\n [value]=\"time()\"\r\n [disabled]=\"state().disabled()\"\r\n (blur)=\"state().markAsTouched()\"\r\n (valueChange)=\"onTimeChange($event)\"\r\n />\r\n <mat-timepicker-toggle matIconSuffix [for]=\"timepicker\" />\r\n <mat-timepicker #timepicker (closed)=\"state().markAsTouched()\" />\r\n </mat-form-field>\r\n</div>\r\n\r\n<div class=\"InstantDateTimeField-zone\">\r\n {{ timeZone() }}\r\n @if (offset()) {\r\n (UTC{{ offset() }})\r\n }\r\n @if (state().value()) {\r\n · stored as {{ state().value() }}\r\n }\r\n</div>\r\n\r\n@if (notice()) {\r\n <div class=\"InstantDateTimeField-notice\">{{ notice() }}</div>\r\n}\r\n\r\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\r\n",
2267
2267
  styles: [":host{display:block}.InstantDateTimeField-label{margin-bottom:6px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium);letter-spacing:var(--mat-sys-body-medium-tracking)}.InstantDateTimeField-row{display:flex;flex-direction:column;gap:8px;width:100%}@media(min-width:400px){.InstantDateTimeField-row{flex-direction:row}}.InstantDateTimeField-date{flex:3;min-width:0}.InstantDateTimeField-time{flex:2;min-width:0}.InstantDateTimeField-zone{margin-top:4px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-small);letter-spacing:var(--mat-sys-body-small-tracking)}.InstantDateTimeField-notice{margin-top:4px;color:var(--mat-sys-tertiary);font:var(--mat-sys-body-small);letter-spacing:var(--mat-sys-body-small-tracking)}\n"]
2268
2268
  }]
2269
2269
  }],
@@ -2361,8 +2361,8 @@ var DynamicForm = class DynamicForm {
2361
2361
  onFormClear: "onFormClear"
2362
2362
  },
2363
2363
  ngImport: i0,
2364
- template: "<div class=\"DynamicForm\">\n @for (fieldDef of metaInfo(); track fieldDef.name) {\n @let field = $any(dynamicForm())[fieldDef.name];\n\n @if (!fieldDef.hidden) {\n <div class=\"DynamicForm-field\" [style.--ngx-field-max-width]=\"fieldDef.maxWidth\">\n @switch (fieldDef.type) {\n @case ('text') {\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('email') {\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('password') {\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('search') {\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('number') {\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('textarea') {\n <ngx-textarea-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('code') {\n <ngx-textarea-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('checkbox') {\n <ngx-checkbox-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('radio') {\n <ngx-radio-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('select') {\n <ngx-select-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('chips') {\n <ngx-chips-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('theme') {\n <ngx-theme-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('range') {\n <ngx-slider-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('business-date') {\n <ngx-business-date-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('business-time') {\n <ngx-business-time-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('instant-date-time') {\n <ngx-instant-date-time-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n }\n </div>\n }\n }\n\n <div class=\"DynamicForm-actions\">\n <button matButton type=\"button\" (click)=\"clearForm()\">{{ clearLabel() }}</button>\n <button\n matButton=\"filled\"\n type=\"button\"\n [disabled]=\"dynamicForm()().invalid()\"\n (click)=\"handleSubmit()\"\n >\n {{ submitLabel() }}\n </button>\n </div>\n</div>\n",
2365
- styles: [".DynamicForm{display:flex;flex-direction:column;gap:16px;width:100%}.DynamicForm-field{display:flex;flex-direction:column;width:100%;max-width:var(--ngx-field-max-width, none)}.DynamicForm-actions{display:flex;justify-content:flex-end;gap:8px}\n"],
2364
+ template: "<div class=\"DynamicForm\">\r\n @for (fieldDef of metaInfo(); track fieldDef.name) {\r\n @let field = $any(dynamicForm())[fieldDef.name];\r\n\r\n @if (!fieldDef.hidden) {\r\n <div class=\"DynamicForm-field\" [style.--ngx-field-max-width]=\"fieldDef.maxWidth\">\r\n @switch (fieldDef.type) {\r\n @case ('text') {\r\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('email') {\r\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('password') {\r\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('search') {\r\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('number') {\r\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('textarea') {\r\n <ngx-textarea-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('code') {\r\n <ngx-textarea-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('checkbox') {\r\n <ngx-checkbox-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('radio') {\r\n <ngx-radio-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('select') {\r\n <ngx-select-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('chips') {\r\n <ngx-chips-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('theme') {\r\n <ngx-theme-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('range') {\r\n <ngx-slider-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('business-date') {\r\n <ngx-business-date-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('business-time') {\r\n <ngx-business-time-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('instant-date-time') {\r\n <ngx-instant-date-time-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n }\r\n </div>\r\n }\r\n }\r\n\r\n <div class=\"DynamicForm-actions\">\r\n <button matButton type=\"button\" (click)=\"clearForm()\">{{ clearLabel() }}</button>\r\n <button\r\n matButton=\"filled\"\r\n type=\"button\"\r\n [disabled]=\"dynamicForm()().invalid()\"\r\n (click)=\"handleSubmit()\"\r\n >\r\n {{ submitLabel() }}\r\n </button>\r\n </div>\r\n</div>\r\n",
2365
+ styles: [".DynamicForm{display:flex;flex-direction:column;gap:var(--ngx-form-gap, 16px);width:100%}.DynamicForm-field{display:flex;flex-direction:column;width:100%;max-width:var(--ngx-field-max-width, none)}.DynamicForm-actions{display:flex;justify-content:flex-end;gap:8px}\n"],
2366
2366
  dependencies: [
2367
2367
  {
2368
2368
  kind: "component",
@@ -2466,8 +2466,8 @@ i0.ɵɵngDeclareClassMetadata({
2466
2466
  InstantDateTimeField
2467
2467
  ],
2468
2468
  changeDetection: ChangeDetectionStrategy.OnPush,
2469
- template: "<div class=\"DynamicForm\">\n @for (fieldDef of metaInfo(); track fieldDef.name) {\n @let field = $any(dynamicForm())[fieldDef.name];\n\n @if (!fieldDef.hidden) {\n <div class=\"DynamicForm-field\" [style.--ngx-field-max-width]=\"fieldDef.maxWidth\">\n @switch (fieldDef.type) {\n @case ('text') {\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('email') {\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('password') {\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('search') {\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('number') {\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('textarea') {\n <ngx-textarea-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('code') {\n <ngx-textarea-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('checkbox') {\n <ngx-checkbox-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('radio') {\n <ngx-radio-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('select') {\n <ngx-select-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('chips') {\n <ngx-chips-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('theme') {\n <ngx-theme-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('range') {\n <ngx-slider-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('business-date') {\n <ngx-business-date-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('business-time') {\n <ngx-business-time-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('instant-date-time') {\n <ngx-instant-date-time-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n }\n </div>\n }\n }\n\n <div class=\"DynamicForm-actions\">\n <button matButton type=\"button\" (click)=\"clearForm()\">{{ clearLabel() }}</button>\n <button\n matButton=\"filled\"\n type=\"button\"\n [disabled]=\"dynamicForm()().invalid()\"\n (click)=\"handleSubmit()\"\n >\n {{ submitLabel() }}\n </button>\n </div>\n</div>\n",
2470
- styles: [".DynamicForm{display:flex;flex-direction:column;gap:16px;width:100%}.DynamicForm-field{display:flex;flex-direction:column;width:100%;max-width:var(--ngx-field-max-width, none)}.DynamicForm-actions{display:flex;justify-content:flex-end;gap:8px}\n"]
2469
+ template: "<div class=\"DynamicForm\">\r\n @for (fieldDef of metaInfo(); track fieldDef.name) {\r\n @let field = $any(dynamicForm())[fieldDef.name];\r\n\r\n @if (!fieldDef.hidden) {\r\n <div class=\"DynamicForm-field\" [style.--ngx-field-max-width]=\"fieldDef.maxWidth\">\r\n @switch (fieldDef.type) {\r\n @case ('text') {\r\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('email') {\r\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('password') {\r\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('search') {\r\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('number') {\r\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('textarea') {\r\n <ngx-textarea-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('code') {\r\n <ngx-textarea-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('checkbox') {\r\n <ngx-checkbox-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('radio') {\r\n <ngx-radio-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('select') {\r\n <ngx-select-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('chips') {\r\n <ngx-chips-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('theme') {\r\n <ngx-theme-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('range') {\r\n <ngx-slider-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('business-date') {\r\n <ngx-business-date-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('business-time') {\r\n <ngx-business-time-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('instant-date-time') {\r\n <ngx-instant-date-time-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n }\r\n </div>\r\n }\r\n }\r\n\r\n <div class=\"DynamicForm-actions\">\r\n <button matButton type=\"button\" (click)=\"clearForm()\">{{ clearLabel() }}</button>\r\n <button\r\n matButton=\"filled\"\r\n type=\"button\"\r\n [disabled]=\"dynamicForm()().invalid()\"\r\n (click)=\"handleSubmit()\"\r\n >\r\n {{ submitLabel() }}\r\n </button>\r\n </div>\r\n</div>\r\n",
2470
+ styles: [".DynamicForm{display:flex;flex-direction:column;gap:var(--ngx-form-gap, 16px);width:100%}.DynamicForm-field{display:flex;flex-direction:column;width:100%;max-width:var(--ngx-field-max-width, none)}.DynamicForm-actions{display:flex;justify-content:flex-end;gap:8px}\n"]
2471
2471
  }]
2472
2472
  }],
2473
2473
  propDecorators: {