@wiltech-labs/ngx-forms 1.0.1 → 1.0.2

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 (5) hide show
  1. package/README.md +372 -356
  2. package/fesm2022/wiltech-labs-ngx-forms.mjs +228 -57
  3. package/fesm2022/wiltech-labs-ngx-forms.mjs.map +1 -1
  4. package/package.json +1 -1
  5. package/types/wiltech-labs-ngx-forms.d.ts +34 -0
package/fesm2022/wiltech-labs-ngx-forms.mjs CHANGED
@@ -2,7 +2,7 @@ import * as i0 from "@angular/core";
2
2
  import { ChangeDetectionStrategy, Component, Injectable, InjectionToken, computed, effect, inject, input, linkedSignal, output, signal, viewChildren } from "@angular/core";
3
3
  import { MatButton } from "@angular/material/button";
4
4
  import { FormField, disabled, email, max, maxLength, min, minLength, pattern, required, schema, validate } from "@angular/forms/signals";
5
- import * as i1 from "@angular/material/form-field";
5
+ import * as i1$1 from "@angular/material/form-field";
6
6
  import { MatError, MatFormFieldModule } from "@angular/material/form-field";
7
7
  import * as i2 from "@angular/material/input";
8
8
  import { MatInput, MatInputModule } from "@angular/material/input";
@@ -13,6 +13,8 @@ import { MatOption, MatSelect } from "@angular/material/select";
13
13
  import { LiveAnnouncer } from "@angular/cdk/a11y";
14
14
  import { MatChipGrid, MatChipInput, MatChipRemove, MatChipRow } from "@angular/material/chips";
15
15
  import { MatIcon } from "@angular/material/icon";
16
+ import * as i1 from "@angular/material/button-toggle";
17
+ import { MatButtonToggleModule } from "@angular/material/button-toggle";
16
18
  import { MatSlider, MatSliderThumb } from "@angular/material/slider";
17
19
  import { DateAdapter, MAT_DATE_FORMATS, MAT_NATIVE_DATE_FORMATS, NativeDateAdapter } from "@angular/material/core";
18
20
  import * as i3$1 from "@angular/material/datepicker";
@@ -55,7 +57,7 @@ var TextField = class TextField {
55
57
  }
56
58
  },
57
59
  ngImport: i0,
58
- 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",
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",
59
61
  styles: [":host{display:block}.TextField{width:100%}\n"],
60
62
  dependencies: [
61
63
  {
@@ -71,7 +73,7 @@ var TextField = class TextField {
71
73
  },
72
74
  {
73
75
  kind: "component",
74
- type: i1.MatFormField,
76
+ type: i1$1.MatFormField,
75
77
  selector: "mat-form-field",
76
78
  inputs: [
77
79
  "hideRequiredMarker",
@@ -85,18 +87,18 @@ var TextField = class TextField {
85
87
  },
86
88
  {
87
89
  kind: "directive",
88
- type: i1.MatLabel,
90
+ type: i1$1.MatLabel,
89
91
  selector: "mat-label"
90
92
  },
91
93
  {
92
94
  kind: "directive",
93
- type: i1.MatHint,
95
+ type: i1$1.MatHint,
94
96
  selector: "mat-hint",
95
97
  inputs: ["align", "id"]
96
98
  },
97
99
  {
98
100
  kind: "directive",
99
- type: i1.MatError,
101
+ type: i1$1.MatError,
100
102
  selector: "mat-error, [matError]",
101
103
  inputs: ["id"]
102
104
  },
@@ -143,7 +145,7 @@ i0.ɵɵngDeclareClassMetadata({
143
145
  MatInputModule
144
146
  ],
145
147
  changeDetection: ChangeDetectionStrategy.OnPush,
146
- 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",
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",
147
149
  styles: [":host{display:block}.TextField{width:100%}\n"]
148
150
  }]
149
151
  }],
@@ -178,6 +180,7 @@ var FormFieldType;
178
180
  FormFieldType["RANGE"] = "range";
179
181
  FormFieldType["SELECT"] = "select";
180
182
  FormFieldType["CHIPS"] = "chips";
183
+ FormFieldType["THEME"] = "theme";
181
184
  FormFieldType["TEXTAREA"] = "textarea";
182
185
  FormFieldType["CODE"] = "code";
183
186
  FormFieldType["BUSINESS_DATE"] = "business-date";
@@ -231,7 +234,7 @@ var TextareaField = class TextareaField {
231
234
  }
232
235
  },
233
236
  ngImport: i0,
234
- 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",
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",
235
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"],
236
239
  dependencies: [
237
240
  {
@@ -247,7 +250,7 @@ var TextareaField = class TextareaField {
247
250
  },
248
251
  {
249
252
  kind: "component",
250
- type: i1.MatFormField,
253
+ type: i1$1.MatFormField,
251
254
  selector: "mat-form-field",
252
255
  inputs: [
253
256
  "hideRequiredMarker",
@@ -261,18 +264,18 @@ var TextareaField = class TextareaField {
261
264
  },
262
265
  {
263
266
  kind: "directive",
264
- type: i1.MatLabel,
267
+ type: i1$1.MatLabel,
265
268
  selector: "mat-label"
266
269
  },
267
270
  {
268
271
  kind: "directive",
269
- type: i1.MatHint,
272
+ type: i1$1.MatHint,
270
273
  selector: "mat-hint",
271
274
  inputs: ["align", "id"]
272
275
  },
273
276
  {
274
277
  kind: "directive",
275
- type: i1.MatError,
278
+ type: i1$1.MatError,
276
279
  selector: "mat-error, [matError]",
277
280
  inputs: ["id"]
278
281
  },
@@ -331,7 +334,7 @@ i0.ɵɵngDeclareClassMetadata({
331
334
  MatInputModule
332
335
  ],
333
336
  changeDetection: ChangeDetectionStrategy.OnPush,
334
- 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",
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",
335
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"]
336
339
  }]
337
340
  }],
@@ -396,7 +399,7 @@ var FieldSubscript = class FieldSubscript {
396
399
  }
397
400
  },
398
401
  ngImport: i0,
399
- 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",
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",
400
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"],
401
404
  dependencies: [{
402
405
  kind: "directive",
@@ -419,7 +422,7 @@ i0.ɵɵngDeclareClassMetadata({
419
422
  standalone: true,
420
423
  imports: [MatError],
421
424
  changeDetection: ChangeDetectionStrategy.OnPush,
422
- 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",
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",
423
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"]
424
427
  }]
425
428
  }],
@@ -476,7 +479,7 @@ var CheckboxField = class CheckboxField {
476
479
  }
477
480
  },
478
481
  ngImport: i0,
479
- 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",
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",
480
483
  styles: [":host{display:block}.CheckboxField-subscript{padding-inline-start:40px;margin-top:-4px}\n"],
481
484
  dependencies: [
482
485
  {
@@ -539,7 +542,7 @@ i0.ɵɵngDeclareClassMetadata({
539
542
  FieldSubscript
540
543
  ],
541
544
  changeDetection: ChangeDetectionStrategy.OnPush,
542
- 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",
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",
543
546
  styles: [":host{display:block}.CheckboxField-subscript{padding-inline-start:40px;margin-top:-4px}\n"]
544
547
  }]
545
548
  }],
@@ -562,11 +565,11 @@ i0.ɵɵngDeclareClassMetadata({
562
565
  }]
563
566
  }
564
567
  });
565
- let nextId$1 = 0;
568
+ let nextId$2 = 0;
566
569
  var RadioField = class RadioField {
567
570
  fieldDef = input.required(...ngDevMode ? [{ debugName: "fieldDef" }] : /* istanbul ignore next */ []);
568
571
  field = input.required(...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
569
- labelId = `radio-field-label-${nextId$1++}`;
572
+ labelId = `radio-field-label-${nextId$2++}`;
570
573
  static ɵfac = i0.ɵɵngDeclareFactory({
571
574
  minVersion: "12.0.0",
572
575
  version: "22.2.0",
@@ -598,7 +601,7 @@ var RadioField = class RadioField {
598
601
  }
599
602
  },
600
603
  ngImport: i0,
601
- 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",
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",
602
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"],
603
606
  dependencies: [
604
607
  {
@@ -675,7 +678,7 @@ i0.ɵɵngDeclareClassMetadata({
675
678
  FieldSubscript
676
679
  ],
677
680
  changeDetection: ChangeDetectionStrategy.OnPush,
678
- 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",
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",
679
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"]
680
683
  }]
681
684
  }],
@@ -732,7 +735,7 @@ var SelectField = class SelectField {
732
735
  }
733
736
  },
734
737
  ngImport: i0,
735
- template: "<mat-form-field class=\"SelectField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n <mat-label>{{ fieldDef().label }}</mat-label>\r\n <mat-select [formField]=\"field()\">\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",
738
+ template: "<mat-form-field class=\"SelectField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <mat-select [formField]=\"field()\">\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",
736
739
  styles: [":host{display:block}.SelectField{width:100%}\n"],
737
740
  dependencies: [
738
741
  {
@@ -748,7 +751,7 @@ var SelectField = class SelectField {
748
751
  },
749
752
  {
750
753
  kind: "component",
751
- type: i1.MatFormField,
754
+ type: i1$1.MatFormField,
752
755
  selector: "mat-form-field",
753
756
  inputs: [
754
757
  "hideRequiredMarker",
@@ -762,18 +765,18 @@ var SelectField = class SelectField {
762
765
  },
763
766
  {
764
767
  kind: "directive",
765
- type: i1.MatLabel,
768
+ type: i1$1.MatLabel,
766
769
  selector: "mat-label"
767
770
  },
768
771
  {
769
772
  kind: "directive",
770
- type: i1.MatHint,
773
+ type: i1$1.MatHint,
771
774
  selector: "mat-hint",
772
775
  inputs: ["align", "id"]
773
776
  },
774
777
  {
775
778
  kind: "directive",
776
- type: i1.MatError,
779
+ type: i1$1.MatError,
777
780
  selector: "mat-error, [matError]",
778
781
  inputs: ["id"]
779
782
  },
@@ -845,7 +848,7 @@ i0.ɵɵngDeclareClassMetadata({
845
848
  MatOption
846
849
  ],
847
850
  changeDetection: ChangeDetectionStrategy.OnPush,
848
- template: "<mat-form-field class=\"SelectField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n <mat-label>{{ fieldDef().label }}</mat-label>\r\n <mat-select [formField]=\"field()\">\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",
851
+ template: "<mat-form-field class=\"SelectField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <mat-select [formField]=\"field()\">\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",
849
852
  styles: [":host{display:block}.SelectField{width:100%}\n"]
850
853
  }]
851
854
  }],
@@ -917,7 +920,7 @@ var ChipsField = class ChipsField {
917
920
  }
918
921
  },
919
922
  ngImport: i0,
920
- 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",
923
+ 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",
921
924
  styles: [":host{display:block}.ChipsField{width:100%}\n"],
922
925
  dependencies: [
923
926
  {
@@ -926,7 +929,7 @@ var ChipsField = class ChipsField {
926
929
  },
927
930
  {
928
931
  kind: "component",
929
- type: i1.MatFormField,
932
+ type: i1$1.MatFormField,
930
933
  selector: "mat-form-field",
931
934
  inputs: [
932
935
  "hideRequiredMarker",
@@ -940,18 +943,18 @@ var ChipsField = class ChipsField {
940
943
  },
941
944
  {
942
945
  kind: "directive",
943
- type: i1.MatLabel,
946
+ type: i1$1.MatLabel,
944
947
  selector: "mat-label"
945
948
  },
946
949
  {
947
950
  kind: "directive",
948
- type: i1.MatHint,
951
+ type: i1$1.MatHint,
949
952
  selector: "mat-hint",
950
953
  inputs: ["align", "id"]
951
954
  },
952
955
  {
953
956
  kind: "directive",
954
- type: i1.MatError,
957
+ type: i1$1.MatError,
955
958
  selector: "mat-error, [matError]",
956
959
  inputs: ["id"]
957
960
  },
@@ -1033,7 +1036,7 @@ i0.ɵɵngDeclareClassMetadata({
1033
1036
  MatIcon
1034
1037
  ],
1035
1038
  changeDetection: ChangeDetectionStrategy.OnPush,
1036
- 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",
1039
+ 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",
1037
1040
  styles: [":host{display:block}.ChipsField{width:100%}\n"]
1038
1041
  }]
1039
1042
  }],
@@ -1056,6 +1059,161 @@ i0.ɵɵngDeclareClassMetadata({
1056
1059
  }]
1057
1060
  }
1058
1061
  });
1062
+ let nextId$1 = 0;
1063
+ const DEFAULT_LIGHT_LABEL = "Light";
1064
+ const DEFAULT_DARK_LABEL = "Dark";
1065
+ var ThemeField = class ThemeField {
1066
+ fieldDef = input.required(...ngDevMode ? [{ debugName: "fieldDef" }] : /* istanbul ignore next */ []);
1067
+ field = input.required(...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
1068
+ lightLabel = computed(() => this.fieldDef().options?.find((option) => option.value === "light")?.label ?? DEFAULT_LIGHT_LABEL, ...ngDevMode ? [{ debugName: "lightLabel" }] : /* istanbul ignore next */ []);
1069
+ darkLabel = computed(() => this.fieldDef().options?.find((option) => option.value === "dark")?.label ?? DEFAULT_DARK_LABEL, ...ngDevMode ? [{ debugName: "darkLabel" }] : /* istanbul ignore next */ []);
1070
+ labelId = `theme-field-label-${nextId$1++}`;
1071
+ static ɵfac = i0.ɵɵngDeclareFactory({
1072
+ minVersion: "12.0.0",
1073
+ version: "22.2.0",
1074
+ ngImport: i0,
1075
+ type: ThemeField,
1076
+ deps: [],
1077
+ target: i0.ɵɵFactoryTarget.Component
1078
+ });
1079
+ static ɵcmp = i0.ɵɵngDeclareComponent({
1080
+ minVersion: "17.0.0",
1081
+ version: "22.2.0",
1082
+ type: ThemeField,
1083
+ isStandalone: true,
1084
+ selector: "ngx-theme-field",
1085
+ inputs: {
1086
+ fieldDef: {
1087
+ classPropertyName: "fieldDef",
1088
+ publicName: "fieldDef",
1089
+ isSignal: true,
1090
+ isRequired: true,
1091
+ transformFunction: null
1092
+ },
1093
+ field: {
1094
+ classPropertyName: "field",
1095
+ publicName: "field",
1096
+ isSignal: true,
1097
+ isRequired: true,
1098
+ transformFunction: null
1099
+ }
1100
+ },
1101
+ ngImport: i0,
1102
+ 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 <mat-button-toggle value=\"light\" [attr.aria-label]=\"lightLabel()\">\n <mat-icon aria-hidden=\"true\">light_mode</mat-icon>\n </mat-button-toggle>\n <mat-button-toggle value=\"dark\" [attr.aria-label]=\"darkLabel()\">\n <mat-icon aria-hidden=\"true\">dark_mode</mat-icon>\n </mat-button-toggle>\n</mat-button-toggle-group>\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
1103
+ 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"],
1104
+ dependencies: [
1105
+ {
1106
+ kind: "directive",
1107
+ type: FormField,
1108
+ selector: "[formField]",
1109
+ inputs: ["formField"],
1110
+ exportAs: ["formField"]
1111
+ },
1112
+ {
1113
+ kind: "ngmodule",
1114
+ type: MatButtonToggleModule
1115
+ },
1116
+ {
1117
+ kind: "directive",
1118
+ type: i1.MatButtonToggleGroup,
1119
+ selector: "mat-button-toggle-group",
1120
+ inputs: [
1121
+ "appearance",
1122
+ "name",
1123
+ "vertical",
1124
+ "value",
1125
+ "multiple",
1126
+ "disabled",
1127
+ "disabledInteractive",
1128
+ "hideSingleSelectionIndicator",
1129
+ "hideMultipleSelectionIndicator"
1130
+ ],
1131
+ outputs: ["valueChange", "change"],
1132
+ exportAs: ["matButtonToggleGroup"]
1133
+ },
1134
+ {
1135
+ kind: "component",
1136
+ type: i1.MatButtonToggle,
1137
+ selector: "mat-button-toggle",
1138
+ inputs: [
1139
+ "aria-label",
1140
+ "aria-labelledby",
1141
+ "id",
1142
+ "name",
1143
+ "value",
1144
+ "tabIndex",
1145
+ "disableRipple",
1146
+ "appearance",
1147
+ "checked",
1148
+ "disabled",
1149
+ "disabledInteractive"
1150
+ ],
1151
+ outputs: ["change"],
1152
+ exportAs: ["matButtonToggle"]
1153
+ },
1154
+ {
1155
+ kind: "component",
1156
+ type: MatIcon,
1157
+ selector: "mat-icon",
1158
+ inputs: [
1159
+ "color",
1160
+ "inline",
1161
+ "svgIcon",
1162
+ "fontSet",
1163
+ "fontIcon"
1164
+ ],
1165
+ exportAs: ["matIcon"]
1166
+ },
1167
+ {
1168
+ kind: "component",
1169
+ type: FieldSubscript,
1170
+ selector: "ngx-field-subscript",
1171
+ inputs: ["field", "hint"]
1172
+ }
1173
+ ],
1174
+ changeDetection: i0.ChangeDetectionStrategy.OnPush
1175
+ });
1176
+ };
1177
+ i0.ɵɵngDeclareClassMetadata({
1178
+ minVersion: "12.0.0",
1179
+ version: "22.2.0",
1180
+ ngImport: i0,
1181
+ type: ThemeField,
1182
+ decorators: [{
1183
+ type: Component,
1184
+ args: [{
1185
+ selector: "ngx-theme-field",
1186
+ standalone: true,
1187
+ imports: [
1188
+ FormField,
1189
+ MatButtonToggleModule,
1190
+ MatIcon,
1191
+ FieldSubscript
1192
+ ],
1193
+ changeDetection: ChangeDetectionStrategy.OnPush,
1194
+ 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 <mat-button-toggle value=\"light\" [attr.aria-label]=\"lightLabel()\">\n <mat-icon aria-hidden=\"true\">light_mode</mat-icon>\n </mat-button-toggle>\n <mat-button-toggle value=\"dark\" [attr.aria-label]=\"darkLabel()\">\n <mat-icon aria-hidden=\"true\">dark_mode</mat-icon>\n </mat-button-toggle>\n</mat-button-toggle-group>\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
1195
+ 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"]
1196
+ }]
1197
+ }],
1198
+ propDecorators: {
1199
+ fieldDef: [{
1200
+ type: i0.Input,
1201
+ args: [{
1202
+ isSignal: true,
1203
+ alias: "fieldDef",
1204
+ required: true
1205
+ }]
1206
+ }],
1207
+ field: [{
1208
+ type: i0.Input,
1209
+ args: [{
1210
+ isSignal: true,
1211
+ alias: "field",
1212
+ required: true
1213
+ }]
1214
+ }]
1215
+ }
1216
+ });
1059
1217
  let nextId = 0;
1060
1218
  var SliderField = class SliderField {
1061
1219
  fieldDef = input.required(...ngDevMode ? [{ debugName: "fieldDef" }] : /* istanbul ignore next */ []);
@@ -1092,7 +1250,7 @@ var SliderField = class SliderField {
1092
1250
  }
1093
1251
  },
1094
1252
  ngImport: i0,
1095
- 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",
1253
+ 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",
1096
1254
  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"],
1097
1255
  dependencies: [
1098
1256
  {
@@ -1158,7 +1316,7 @@ i0.ɵɵngDeclareClassMetadata({
1158
1316
  FieldSubscript
1159
1317
  ],
1160
1318
  changeDetection: ChangeDetectionStrategy.OnPush,
1161
- 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",
1319
+ 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",
1162
1320
  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"]
1163
1321
  }]
1164
1322
  }],
@@ -1364,7 +1522,7 @@ var BusinessDateField = class BusinessDateField {
1364
1522
  isSignal: true
1365
1523
  }],
1366
1524
  ngImport: i0,
1367
- 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",
1525
+ 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",
1368
1526
  styles: [":host{display:block}.BusinessDateField{width:100%}\n"],
1369
1527
  dependencies: [
1370
1528
  {
@@ -1373,7 +1531,7 @@ var BusinessDateField = class BusinessDateField {
1373
1531
  },
1374
1532
  {
1375
1533
  kind: "component",
1376
- type: i1.MatFormField,
1534
+ type: i1$1.MatFormField,
1377
1535
  selector: "mat-form-field",
1378
1536
  inputs: [
1379
1537
  "hideRequiredMarker",
@@ -1387,24 +1545,24 @@ var BusinessDateField = class BusinessDateField {
1387
1545
  },
1388
1546
  {
1389
1547
  kind: "directive",
1390
- type: i1.MatLabel,
1548
+ type: i1$1.MatLabel,
1391
1549
  selector: "mat-label"
1392
1550
  },
1393
1551
  {
1394
1552
  kind: "directive",
1395
- type: i1.MatHint,
1553
+ type: i1$1.MatHint,
1396
1554
  selector: "mat-hint",
1397
1555
  inputs: ["align", "id"]
1398
1556
  },
1399
1557
  {
1400
1558
  kind: "directive",
1401
- type: i1.MatError,
1559
+ type: i1$1.MatError,
1402
1560
  selector: "mat-error, [matError]",
1403
1561
  inputs: ["id"]
1404
1562
  },
1405
1563
  {
1406
1564
  kind: "directive",
1407
- type: i1.MatSuffix,
1565
+ type: i1$1.MatSuffix,
1408
1566
  selector: "[matSuffix], [matIconSuffix], [matTextSuffix]",
1409
1567
  inputs: ["matTextSuffix"]
1410
1568
  },
@@ -1487,7 +1645,7 @@ i0.ɵɵngDeclareClassMetadata({
1487
1645
  ],
1488
1646
  providers: [provideLocaleDateAdapter()],
1489
1647
  changeDetection: ChangeDetectionStrategy.OnPush,
1490
- 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",
1648
+ 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",
1491
1649
  styles: [":host{display:block}.BusinessDateField{width:100%}\n"]
1492
1650
  }]
1493
1651
  }],
@@ -1581,7 +1739,7 @@ var BusinessTimeField = class BusinessTimeField {
1581
1739
  isSignal: true
1582
1740
  }],
1583
1741
  ngImport: i0,
1584
- 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",
1742
+ 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",
1585
1743
  styles: [":host{display:block}.BusinessTimeField{width:100%}\n"],
1586
1744
  dependencies: [
1587
1745
  {
@@ -1590,7 +1748,7 @@ var BusinessTimeField = class BusinessTimeField {
1590
1748
  },
1591
1749
  {
1592
1750
  kind: "component",
1593
- type: i1.MatFormField,
1751
+ type: i1$1.MatFormField,
1594
1752
  selector: "mat-form-field",
1595
1753
  inputs: [
1596
1754
  "hideRequiredMarker",
@@ -1604,24 +1762,24 @@ var BusinessTimeField = class BusinessTimeField {
1604
1762
  },
1605
1763
  {
1606
1764
  kind: "directive",
1607
- type: i1.MatLabel,
1765
+ type: i1$1.MatLabel,
1608
1766
  selector: "mat-label"
1609
1767
  },
1610
1768
  {
1611
1769
  kind: "directive",
1612
- type: i1.MatHint,
1770
+ type: i1$1.MatHint,
1613
1771
  selector: "mat-hint",
1614
1772
  inputs: ["align", "id"]
1615
1773
  },
1616
1774
  {
1617
1775
  kind: "directive",
1618
- type: i1.MatError,
1776
+ type: i1$1.MatError,
1619
1777
  selector: "mat-error, [matError]",
1620
1778
  inputs: ["id"]
1621
1779
  },
1622
1780
  {
1623
1781
  kind: "directive",
1624
- type: i1.MatSuffix,
1782
+ type: i1$1.MatSuffix,
1625
1783
  selector: "[matSuffix], [matIconSuffix], [matTextSuffix]",
1626
1784
  inputs: ["matTextSuffix"]
1627
1785
  },
@@ -1721,7 +1879,7 @@ i0.ɵɵngDeclareClassMetadata({
1721
1879
  ],
1722
1880
  providers: [provideLocaleDateAdapter()],
1723
1881
  changeDetection: ChangeDetectionStrategy.OnPush,
1724
- 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",
1882
+ 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",
1725
1883
  styles: [":host{display:block}.BusinessTimeField{width:100%}\n"]
1726
1884
  }]
1727
1885
  }],
@@ -1915,7 +2073,7 @@ var InstantDateTimeField = class InstantDateTimeField {
1915
2073
  isSignal: true
1916
2074
  }],
1917
2075
  ngImport: i0,
1918
- 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",
2076
+ 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",
1919
2077
  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"],
1920
2078
  dependencies: [
1921
2079
  {
@@ -1924,7 +2082,7 @@ var InstantDateTimeField = class InstantDateTimeField {
1924
2082
  },
1925
2083
  {
1926
2084
  kind: "component",
1927
- type: i1.MatFormField,
2085
+ type: i1$1.MatFormField,
1928
2086
  selector: "mat-form-field",
1929
2087
  inputs: [
1930
2088
  "hideRequiredMarker",
@@ -1938,12 +2096,12 @@ var InstantDateTimeField = class InstantDateTimeField {
1938
2096
  },
1939
2097
  {
1940
2098
  kind: "directive",
1941
- type: i1.MatLabel,
2099
+ type: i1$1.MatLabel,
1942
2100
  selector: "mat-label"
1943
2101
  },
1944
2102
  {
1945
2103
  kind: "directive",
1946
- type: i1.MatSuffix,
2104
+ type: i1$1.MatSuffix,
1947
2105
  selector: "[matSuffix], [matIconSuffix], [matTextSuffix]",
1948
2106
  inputs: ["matTextSuffix"]
1949
2107
  },
@@ -2086,7 +2244,7 @@ i0.ɵɵngDeclareClassMetadata({
2086
2244
  ],
2087
2245
  providers: [provideLocaleDateAdapter()],
2088
2246
  changeDetection: ChangeDetectionStrategy.OnPush,
2089
- 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",
2247
+ 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",
2090
2248
  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"]
2091
2249
  }]
2092
2250
  }],
@@ -2184,7 +2342,7 @@ var DynamicForm = class DynamicForm {
2184
2342
  onFormClear: "onFormClear"
2185
2343
  },
2186
2344
  ngImport: i0,
2187
- 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 ('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",
2345
+ 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",
2188
2346
  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"],
2189
2347
  dependencies: [
2190
2348
  {
@@ -2230,6 +2388,12 @@ var DynamicForm = class DynamicForm {
2230
2388
  selector: "ngx-chips-field",
2231
2389
  inputs: ["fieldDef", "field"]
2232
2390
  },
2391
+ {
2392
+ kind: "component",
2393
+ type: ThemeField,
2394
+ selector: "ngx-theme-field",
2395
+ inputs: ["fieldDef", "field"]
2396
+ },
2233
2397
  {
2234
2398
  kind: "component",
2235
2399
  type: SliderField,
@@ -2276,13 +2440,14 @@ i0.ɵɵngDeclareClassMetadata({
2276
2440
  RadioField,
2277
2441
  SelectField,
2278
2442
  ChipsField,
2443
+ ThemeField,
2279
2444
  SliderField,
2280
2445
  BusinessDateField,
2281
2446
  BusinessTimeField,
2282
2447
  InstantDateTimeField
2283
2448
  ],
2284
2449
  changeDetection: ChangeDetectionStrategy.OnPush,
2285
- 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 ('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",
2450
+ 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",
2286
2451
  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"]
2287
2452
  }]
2288
2453
  }],
@@ -2407,6 +2572,12 @@ var FormConfigBuilder = class {
2407
2572
  chips(name, label, options) {
2408
2573
  return this.add(FormFieldType.CHIPS, name, label, options);
2409
2574
  }
2575
+ theme(name, label, choices, options) {
2576
+ return this.add(FormFieldType.THEME, name, label, {
2577
+ ...options,
2578
+ options: choices
2579
+ });
2580
+ }
2410
2581
  businessDate(name, label, options) {
2411
2582
  return this.add(FormFieldType.BUSINESS_DATE, name, label, options);
2412
2583
  }
@@ -2445,6 +2616,6 @@ var FormConfigBuilder = class {
2445
2616
  function formConfig(schemaType) {
2446
2617
  return new FormConfigBuilder(schemaType);
2447
2618
  }
2448
- export { BusinessDateField, BusinessTimeField, CheckboxField, ChipsField, DynamicForm, FormConfigBuilder, FormFieldType, InstantDateTimeField, NGX_FORMS_LOCALE, RadioField, SelectField, SliderField, TextField, TextareaField, ZonedDateTimeService, createEmptyEntity, defineSchema, formConfig, toSchema };
2619
+ export { BusinessDateField, BusinessTimeField, CheckboxField, ChipsField, DynamicForm, FormConfigBuilder, FormFieldType, InstantDateTimeField, NGX_FORMS_LOCALE, RadioField, SelectField, SliderField, TextField, TextareaField, ThemeField, ZonedDateTimeService, createEmptyEntity, defineSchema, formConfig, toSchema };
2449
2620
 
2450
2621
  //# sourceMappingURL=wiltech-labs-ngx-forms.mjs.map