@wiltech-labs/ngx-forms 0.1.0 → 1.0.1

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 +120 -65
  2. package/fesm2022/wiltech-labs-ngx-forms.mjs +323 -84
  3. package/fesm2022/wiltech-labs-ngx-forms.mjs.map +1 -1
  4. package/package.json +2 -1
  5. package/types/wiltech-labs-ngx-forms.d.ts +84 -13
package/fesm2022/wiltech-labs-ngx-forms.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from "@angular/core";
2
- import { ChangeDetectionStrategy, Component, Injectable, computed, effect, inject, input, linkedSignal, output, signal, viewChildren } from "@angular/core";
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
5
  import * as i1 from "@angular/material/form-field";
@@ -10,6 +10,9 @@ import * as i3$2 from "@angular/cdk/text-field";
10
10
  import { MatCheckbox } from "@angular/material/checkbox";
11
11
  import { MatRadioButton, MatRadioGroup } from "@angular/material/radio";
12
12
  import { MatOption, MatSelect } from "@angular/material/select";
13
+ import { LiveAnnouncer } from "@angular/cdk/a11y";
14
+ import { MatChipGrid, MatChipInput, MatChipRemove, MatChipRow } from "@angular/material/chips";
15
+ import { MatIcon } from "@angular/material/icon";
13
16
  import { MatSlider, MatSliderThumb } from "@angular/material/slider";
14
17
  import { DateAdapter, MAT_DATE_FORMATS, MAT_NATIVE_DATE_FORMATS, NativeDateAdapter } from "@angular/material/core";
15
18
  import * as i3$1 from "@angular/material/datepicker";
@@ -34,7 +37,7 @@ var TextField = class TextField {
34
37
  version: "22.2.0",
35
38
  type: TextField,
36
39
  isStandalone: true,
37
- selector: "app-text-field",
40
+ selector: "ngx-text-field",
38
41
  inputs: {
39
42
  fieldDef: {
40
43
  classPropertyName: "fieldDef",
@@ -52,8 +55,8 @@ var TextField = class TextField {
52
55
  }
53
56
  },
54
57
  ngImport: i0,
55
- template: "<mat-form-field class=\"text-field\" 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",
56
- styles: [":host{display:block}.text-field{width:100%}\n"],
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",
59
+ styles: [":host{display:block}.TextField{width:100%}\n"],
57
60
  dependencies: [
58
61
  {
59
62
  kind: "directive",
@@ -132,7 +135,7 @@ i0.ɵɵngDeclareClassMetadata({
132
135
  decorators: [{
133
136
  type: Component,
134
137
  args: [{
135
- selector: "app-text-field",
138
+ selector: "ngx-text-field",
136
139
  standalone: true,
137
140
  imports: [
138
141
  FormField,
@@ -140,8 +143,8 @@ i0.ɵɵngDeclareClassMetadata({
140
143
  MatInputModule
141
144
  ],
142
145
  changeDetection: ChangeDetectionStrategy.OnPush,
143
- template: "<mat-form-field class=\"text-field\" 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",
144
- styles: [":host{display:block}.text-field{width:100%}\n"]
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",
147
+ styles: [":host{display:block}.TextField{width:100%}\n"]
145
148
  }]
146
149
  }],
147
150
  propDecorators: {
@@ -174,6 +177,7 @@ var FormFieldType;
174
177
  FormFieldType["NUMBER"] = "number";
175
178
  FormFieldType["RANGE"] = "range";
176
179
  FormFieldType["SELECT"] = "select";
180
+ FormFieldType["CHIPS"] = "chips";
177
181
  FormFieldType["TEXTAREA"] = "textarea";
178
182
  FormFieldType["CODE"] = "code";
179
183
  FormFieldType["BUSINESS_DATE"] = "business-date";
@@ -209,7 +213,7 @@ var TextareaField = class TextareaField {
209
213
  version: "22.2.0",
210
214
  type: TextareaField,
211
215
  isStandalone: true,
212
- selector: "app-textarea-field",
216
+ selector: "ngx-textarea-field",
213
217
  inputs: {
214
218
  fieldDef: {
215
219
  classPropertyName: "fieldDef",
@@ -227,8 +231,8 @@ var TextareaField = class TextareaField {
227
231
  }
228
232
  },
229
233
  ngImport: i0,
230
- template: "<mat-form-field class=\"textarea-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n <mat-label>{{ fieldDef().label }}</mat-label>\r\n <textarea\r\n matInput\r\n [formField]=\"field()\"\r\n cdkTextareaAutosize\r\n [cdkAutosizeMinRows]=\"isCode() ? 8 : 4\"\r\n [class.textarea-field-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",
231
- styles: [":host{display:block}.textarea-field{width:100%}.textarea-field-code{font-family:Courier New,Consolas,monospace;font-size:.85rem;tab-size:2}\n"],
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",
235
+ 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"],
232
236
  dependencies: [
233
237
  {
234
238
  kind: "directive",
@@ -319,7 +323,7 @@ i0.ɵɵngDeclareClassMetadata({
319
323
  decorators: [{
320
324
  type: Component,
321
325
  args: [{
322
- selector: "app-textarea-field",
326
+ selector: "ngx-textarea-field",
323
327
  standalone: true,
324
328
  imports: [
325
329
  FormField,
@@ -327,8 +331,8 @@ i0.ɵɵngDeclareClassMetadata({
327
331
  MatInputModule
328
332
  ],
329
333
  changeDetection: ChangeDetectionStrategy.OnPush,
330
- template: "<mat-form-field class=\"textarea-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n <mat-label>{{ fieldDef().label }}</mat-label>\r\n <textarea\r\n matInput\r\n [formField]=\"field()\"\r\n cdkTextareaAutosize\r\n [cdkAutosizeMinRows]=\"isCode() ? 8 : 4\"\r\n [class.textarea-field-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",
331
- styles: [":host{display:block}.textarea-field{width:100%}.textarea-field-code{font-family:Courier New,Consolas,monospace;font-size:.85rem;tab-size:2}\n"]
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",
335
+ 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"]
332
336
  }]
333
337
  }],
334
338
  propDecorators: {
@@ -374,7 +378,7 @@ var FieldSubscript = class FieldSubscript {
374
378
  version: "22.2.0",
375
379
  type: FieldSubscript,
376
380
  isStandalone: true,
377
- selector: "app-field-subscript",
381
+ selector: "ngx-field-subscript",
378
382
  inputs: {
379
383
  field: {
380
384
  classPropertyName: "field",
@@ -392,8 +396,8 @@ var FieldSubscript = class FieldSubscript {
392
396
  }
393
397
  },
394
398
  ngImport: i0,
395
- 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=\"field-subscript-error\">{{ error.message ?? error.kind }}</mat-error>\r\n }\r\n} @else if (hint()) {\r\n <div class=\"field-subscript-hint\">{{ hint() }}</div>\r\n}\r\n",
396
- styles: [":host{display:block}.field-subscript-hint{font-size:12px;color:#0009;margin-top:4px;line-height:1.2}.field-subscript-error{display:block;margin-top:4px;font-size:12px;line-height:1.2}\n"],
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",
400
+ 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"],
397
401
  dependencies: [{
398
402
  kind: "directive",
399
403
  type: MatError,
@@ -411,12 +415,12 @@ i0.ɵɵngDeclareClassMetadata({
411
415
  decorators: [{
412
416
  type: Component,
413
417
  args: [{
414
- selector: "app-field-subscript",
418
+ selector: "ngx-field-subscript",
415
419
  standalone: true,
416
420
  imports: [MatError],
417
421
  changeDetection: ChangeDetectionStrategy.OnPush,
418
- 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=\"field-subscript-error\">{{ error.message ?? error.kind }}</mat-error>\r\n }\r\n} @else if (hint()) {\r\n <div class=\"field-subscript-hint\">{{ hint() }}</div>\r\n}\r\n",
419
- styles: [":host{display:block}.field-subscript-hint{font-size:12px;color:#0009;margin-top:4px;line-height:1.2}.field-subscript-error{display:block;margin-top:4px;font-size:12px;line-height:1.2}\n"]
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",
423
+ 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"]
420
424
  }]
421
425
  }],
422
426
  propDecorators: {
@@ -454,7 +458,7 @@ var CheckboxField = class CheckboxField {
454
458
  version: "22.2.0",
455
459
  type: CheckboxField,
456
460
  isStandalone: true,
457
- selector: "app-checkbox-field",
461
+ selector: "ngx-checkbox-field",
458
462
  inputs: {
459
463
  fieldDef: {
460
464
  classPropertyName: "fieldDef",
@@ -472,8 +476,8 @@ var CheckboxField = class CheckboxField {
472
476
  }
473
477
  },
474
478
  ngImport: i0,
475
- template: "<mat-checkbox [formField]=\"field()\">\r\n {{ fieldDef().label }}@if (field()().required()) {<span aria-hidden=\"true\"> *</span>}\r\n</mat-checkbox>\r\n<app-field-subscript class=\"checkbox-field-subscript\" [field]=\"field()\" [hint]=\"fieldDef().hint\" />\r\n",
476
- styles: [":host{display:block}.checkbox-field-subscript{padding-left:40px;margin-top:-4px}\n"],
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",
480
+ styles: [":host{display:block}.CheckboxField-subscript{padding-inline-start:40px;margin-top:-4px}\n"],
477
481
  dependencies: [
478
482
  {
479
483
  kind: "directive",
@@ -512,7 +516,7 @@ var CheckboxField = class CheckboxField {
512
516
  {
513
517
  kind: "component",
514
518
  type: FieldSubscript,
515
- selector: "app-field-subscript",
519
+ selector: "ngx-field-subscript",
516
520
  inputs: ["field", "hint"]
517
521
  }
518
522
  ],
@@ -527,7 +531,7 @@ i0.ɵɵngDeclareClassMetadata({
527
531
  decorators: [{
528
532
  type: Component,
529
533
  args: [{
530
- selector: "app-checkbox-field",
534
+ selector: "ngx-checkbox-field",
531
535
  standalone: true,
532
536
  imports: [
533
537
  FormField,
@@ -535,8 +539,8 @@ i0.ɵɵngDeclareClassMetadata({
535
539
  FieldSubscript
536
540
  ],
537
541
  changeDetection: ChangeDetectionStrategy.OnPush,
538
- template: "<mat-checkbox [formField]=\"field()\">\r\n {{ fieldDef().label }}@if (field()().required()) {<span aria-hidden=\"true\"> *</span>}\r\n</mat-checkbox>\r\n<app-field-subscript class=\"checkbox-field-subscript\" [field]=\"field()\" [hint]=\"fieldDef().hint\" />\r\n",
539
- styles: [":host{display:block}.checkbox-field-subscript{padding-left:40px;margin-top:-4px}\n"]
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",
543
+ styles: [":host{display:block}.CheckboxField-subscript{padding-inline-start:40px;margin-top:-4px}\n"]
540
544
  }]
541
545
  }],
542
546
  propDecorators: {
@@ -576,7 +580,7 @@ var RadioField = class RadioField {
576
580
  version: "22.2.0",
577
581
  type: RadioField,
578
582
  isStandalone: true,
579
- selector: "app-radio-field",
583
+ selector: "ngx-radio-field",
580
584
  inputs: {
581
585
  fieldDef: {
582
586
  classPropertyName: "fieldDef",
@@ -594,8 +598,8 @@ var RadioField = class RadioField {
594
598
  }
595
599
  },
596
600
  ngImport: i0,
597
- template: "<div class=\"radio-field-label\" [id]=\"labelId\">\r\n {{ fieldDef().label }}@if (field()().required()) {<span aria-hidden=\"true\"> *</span>}\r\n</div>\r\n<mat-radio-group\r\n class=\"radio-field-group\"\r\n [class.radio-field-group-vertical]=\"fieldDef().orientation === 'vertical'\"\r\n [attr.aria-orientation]=\"fieldDef().orientation ?? 'horizontal'\"\r\n [formField]=\"field()\"\r\n [attr.aria-labelledby]=\"labelId\">\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<app-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\r\n",
598
- styles: [":host{display:block}.radio-field-label{font-size:14px;color:#0009;margin-bottom:0}.radio-field-group{display:flex;flex-wrap:wrap;column-gap:8px}.radio-field-group-vertical{flex-direction:column;flex-wrap:nowrap;align-items:flex-start}\n"],
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",
602
+ 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"],
599
603
  dependencies: [
600
604
  {
601
605
  kind: "directive",
@@ -647,7 +651,7 @@ var RadioField = class RadioField {
647
651
  {
648
652
  kind: "component",
649
653
  type: FieldSubscript,
650
- selector: "app-field-subscript",
654
+ selector: "ngx-field-subscript",
651
655
  inputs: ["field", "hint"]
652
656
  }
653
657
  ],
@@ -662,7 +666,7 @@ i0.ɵɵngDeclareClassMetadata({
662
666
  decorators: [{
663
667
  type: Component,
664
668
  args: [{
665
- selector: "app-radio-field",
669
+ selector: "ngx-radio-field",
666
670
  standalone: true,
667
671
  imports: [
668
672
  FormField,
@@ -671,8 +675,8 @@ i0.ɵɵngDeclareClassMetadata({
671
675
  FieldSubscript
672
676
  ],
673
677
  changeDetection: ChangeDetectionStrategy.OnPush,
674
- template: "<div class=\"radio-field-label\" [id]=\"labelId\">\r\n {{ fieldDef().label }}@if (field()().required()) {<span aria-hidden=\"true\"> *</span>}\r\n</div>\r\n<mat-radio-group\r\n class=\"radio-field-group\"\r\n [class.radio-field-group-vertical]=\"fieldDef().orientation === 'vertical'\"\r\n [attr.aria-orientation]=\"fieldDef().orientation ?? 'horizontal'\"\r\n [formField]=\"field()\"\r\n [attr.aria-labelledby]=\"labelId\">\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<app-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\r\n",
675
- styles: [":host{display:block}.radio-field-label{font-size:14px;color:#0009;margin-bottom:0}.radio-field-group{display:flex;flex-wrap:wrap;column-gap:8px}.radio-field-group-vertical{flex-direction:column;flex-wrap:nowrap;align-items:flex-start}\n"]
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",
679
+ 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"]
676
680
  }]
677
681
  }],
678
682
  propDecorators: {
@@ -710,7 +714,7 @@ var SelectField = class SelectField {
710
714
  version: "22.2.0",
711
715
  type: SelectField,
712
716
  isStandalone: true,
713
- selector: "app-select-field",
717
+ selector: "ngx-select-field",
714
718
  inputs: {
715
719
  fieldDef: {
716
720
  classPropertyName: "fieldDef",
@@ -728,8 +732,8 @@ var SelectField = class SelectField {
728
732
  }
729
733
  },
730
734
  ngImport: i0,
731
- template: "<mat-form-field class=\"select-field\" 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",
732
- styles: [":host{display:block}.select-field{width:100%}\n"],
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",
736
+ styles: [":host{display:block}.SelectField{width:100%}\n"],
733
737
  dependencies: [
734
738
  {
735
739
  kind: "directive",
@@ -832,7 +836,7 @@ i0.ɵɵngDeclareClassMetadata({
832
836
  decorators: [{
833
837
  type: Component,
834
838
  args: [{
835
- selector: "app-select-field",
839
+ selector: "ngx-select-field",
836
840
  standalone: true,
837
841
  imports: [
838
842
  FormField,
@@ -841,8 +845,196 @@ i0.ɵɵngDeclareClassMetadata({
841
845
  MatOption
842
846
  ],
843
847
  changeDetection: ChangeDetectionStrategy.OnPush,
844
- template: "<mat-form-field class=\"select-field\" 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",
845
- styles: [":host{display:block}.select-field{width:100%}\n"]
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",
849
+ styles: [":host{display:block}.SelectField{width:100%}\n"]
850
+ }]
851
+ }],
852
+ propDecorators: {
853
+ fieldDef: [{
854
+ type: i0.Input,
855
+ args: [{
856
+ isSignal: true,
857
+ alias: "fieldDef",
858
+ required: true
859
+ }]
860
+ }],
861
+ field: [{
862
+ type: i0.Input,
863
+ args: [{
864
+ isSignal: true,
865
+ alias: "field",
866
+ required: true
867
+ }]
868
+ }]
869
+ }
870
+ });
871
+ var ChipsField = class ChipsField {
872
+ fieldDef = input.required(...ngDevMode ? [{ debugName: "fieldDef" }] : /* istanbul ignore next */ []);
873
+ field = input.required(...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
874
+ announcer = inject(LiveAnnouncer);
875
+ state = computed(() => this.field()(), ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
876
+ chips = computed(() => this.state().value() ?? [], ...ngDevMode ? [{ debugName: "chips" }] : /* istanbul ignore next */ []);
877
+ addChip(event) {
878
+ const value = (event.value || "").trim();
879
+ if (value) {
880
+ this.state().value.update((chips) => [...chips, value]);
881
+ this.announcer.announce(`Added ${value}`);
882
+ }
883
+ event.chipInput.clear();
884
+ }
885
+ removeChip(chip) {
886
+ this.state().value.update((chips) => chips.filter((existing) => existing !== chip));
887
+ this.announcer.announce(`Removed ${chip}`);
888
+ }
889
+ static ɵfac = i0.ɵɵngDeclareFactory({
890
+ minVersion: "12.0.0",
891
+ version: "22.2.0",
892
+ ngImport: i0,
893
+ type: ChipsField,
894
+ deps: [],
895
+ target: i0.ɵɵFactoryTarget.Component
896
+ });
897
+ static ɵcmp = i0.ɵɵngDeclareComponent({
898
+ minVersion: "17.0.0",
899
+ version: "22.2.0",
900
+ type: ChipsField,
901
+ isStandalone: true,
902
+ selector: "ngx-chips-field",
903
+ inputs: {
904
+ fieldDef: {
905
+ classPropertyName: "fieldDef",
906
+ publicName: "fieldDef",
907
+ isSignal: true,
908
+ isRequired: true,
909
+ transformFunction: null
910
+ },
911
+ field: {
912
+ classPropertyName: "field",
913
+ publicName: "field",
914
+ isSignal: true,
915
+ isRequired: true,
916
+ transformFunction: null
917
+ }
918
+ },
919
+ 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",
921
+ styles: [":host{display:block}.ChipsField{width:100%}\n"],
922
+ dependencies: [
923
+ {
924
+ kind: "ngmodule",
925
+ type: MatFormFieldModule
926
+ },
927
+ {
928
+ kind: "component",
929
+ type: i1.MatFormField,
930
+ selector: "mat-form-field",
931
+ inputs: [
932
+ "hideRequiredMarker",
933
+ "color",
934
+ "floatLabel",
935
+ "appearance",
936
+ "subscriptSizing",
937
+ "hintLabel"
938
+ ],
939
+ exportAs: ["matFormField"]
940
+ },
941
+ {
942
+ kind: "directive",
943
+ type: i1.MatLabel,
944
+ selector: "mat-label"
945
+ },
946
+ {
947
+ kind: "directive",
948
+ type: i1.MatHint,
949
+ selector: "mat-hint",
950
+ inputs: ["align", "id"]
951
+ },
952
+ {
953
+ kind: "directive",
954
+ type: i1.MatError,
955
+ selector: "mat-error, [matError]",
956
+ inputs: ["id"]
957
+ },
958
+ {
959
+ kind: "component",
960
+ type: MatChipGrid,
961
+ selector: "mat-chip-grid",
962
+ inputs: [
963
+ "disabled",
964
+ "placeholder",
965
+ "required",
966
+ "value",
967
+ "errorStateMatcher"
968
+ ],
969
+ outputs: ["change", "valueChange"]
970
+ },
971
+ {
972
+ kind: "component",
973
+ type: MatChipRow,
974
+ selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]",
975
+ inputs: ["editable"],
976
+ outputs: ["edited"]
977
+ },
978
+ {
979
+ kind: "directive",
980
+ type: MatChipRemove,
981
+ selector: "[matChipRemove]"
982
+ },
983
+ {
984
+ kind: "directive",
985
+ type: MatChipInput,
986
+ selector: "input[matChipInputFor]",
987
+ inputs: [
988
+ "matChipInputFor",
989
+ "matChipInputAddOnBlur",
990
+ "matChipInputSeparatorKeyCodes",
991
+ "placeholder",
992
+ "id",
993
+ "disabled",
994
+ "readonly",
995
+ "matChipInputDisabledInteractive"
996
+ ],
997
+ outputs: ["matChipInputTokenEnd"],
998
+ exportAs: ["matChipInput", "matChipInputFor"]
999
+ },
1000
+ {
1001
+ kind: "component",
1002
+ type: MatIcon,
1003
+ selector: "mat-icon",
1004
+ inputs: [
1005
+ "color",
1006
+ "inline",
1007
+ "svgIcon",
1008
+ "fontSet",
1009
+ "fontIcon"
1010
+ ],
1011
+ exportAs: ["matIcon"]
1012
+ }
1013
+ ],
1014
+ changeDetection: i0.ChangeDetectionStrategy.OnPush
1015
+ });
1016
+ };
1017
+ i0.ɵɵngDeclareClassMetadata({
1018
+ minVersion: "12.0.0",
1019
+ version: "22.2.0",
1020
+ ngImport: i0,
1021
+ type: ChipsField,
1022
+ decorators: [{
1023
+ type: Component,
1024
+ args: [{
1025
+ selector: "ngx-chips-field",
1026
+ standalone: true,
1027
+ imports: [
1028
+ MatFormFieldModule,
1029
+ MatChipGrid,
1030
+ MatChipRow,
1031
+ MatChipRemove,
1032
+ MatChipInput,
1033
+ MatIcon
1034
+ ],
1035
+ 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",
1037
+ styles: [":host{display:block}.ChipsField{width:100%}\n"]
846
1038
  }]
847
1039
  }],
848
1040
  propDecorators: {
@@ -882,7 +1074,7 @@ var SliderField = class SliderField {
882
1074
  version: "22.2.0",
883
1075
  type: SliderField,
884
1076
  isStandalone: true,
885
- selector: "app-slider-field",
1077
+ selector: "ngx-slider-field",
886
1078
  inputs: {
887
1079
  fieldDef: {
888
1080
  classPropertyName: "fieldDef",
@@ -900,8 +1092,8 @@ var SliderField = class SliderField {
900
1092
  }
901
1093
  },
902
1094
  ngImport: i0,
903
- template: "<div class=\"slider-field-label\">\r\n <span [id]=\"labelId\">\r\n {{ fieldDef().label }}@if (field()().required()) {<span aria-hidden=\"true\"> *</span>}\r\n </span>\r\n <span class=\"slider-field-value\">{{ field()().value() }}</span>\r\n</div>\r\n<mat-slider\r\n class=\"slider-field-slider\"\r\n discrete\r\n [min]=\"fieldDef().min ?? 0\"\r\n [max]=\"fieldDef().max ?? 100\"\r\n [step]=\"fieldDef().step ?? 1\">\r\n <input matSliderThumb [formField]=\"field()\" [attr.aria-labelledby]=\"labelId\" />\r\n</mat-slider>\r\n<app-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\r\n",
904
- styles: [":host{display:block}.slider-field-label{font-size:14px;color:#0009;display:flex;justify-content:space-between;align-items:baseline;margin-bottom:0}.slider-field-value{font-size:14px;font-weight:600;color:var(--mat-sys-primary, #3f51b5)}.slider-field-slider{display:block;width:100%;margin:0}\n"],
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",
1096
+ 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"],
905
1097
  dependencies: [
906
1098
  {
907
1099
  kind: "directive",
@@ -942,7 +1134,7 @@ var SliderField = class SliderField {
942
1134
  {
943
1135
  kind: "component",
944
1136
  type: FieldSubscript,
945
- selector: "app-field-subscript",
1137
+ selector: "ngx-field-subscript",
946
1138
  inputs: ["field", "hint"]
947
1139
  }
948
1140
  ],
@@ -957,7 +1149,7 @@ i0.ɵɵngDeclareClassMetadata({
957
1149
  decorators: [{
958
1150
  type: Component,
959
1151
  args: [{
960
- selector: "app-slider-field",
1152
+ selector: "ngx-slider-field",
961
1153
  standalone: true,
962
1154
  imports: [
963
1155
  FormField,
@@ -966,8 +1158,8 @@ i0.ɵɵngDeclareClassMetadata({
966
1158
  FieldSubscript
967
1159
  ],
968
1160
  changeDetection: ChangeDetectionStrategy.OnPush,
969
- template: "<div class=\"slider-field-label\">\r\n <span [id]=\"labelId\">\r\n {{ fieldDef().label }}@if (field()().required()) {<span aria-hidden=\"true\"> *</span>}\r\n </span>\r\n <span class=\"slider-field-value\">{{ field()().value() }}</span>\r\n</div>\r\n<mat-slider\r\n class=\"slider-field-slider\"\r\n discrete\r\n [min]=\"fieldDef().min ?? 0\"\r\n [max]=\"fieldDef().max ?? 100\"\r\n [step]=\"fieldDef().step ?? 1\">\r\n <input matSliderThumb [formField]=\"field()\" [attr.aria-labelledby]=\"labelId\" />\r\n</mat-slider>\r\n<app-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\r\n",
970
- styles: [":host{display:block}.slider-field-label{font-size:14px;color:#0009;display:flex;justify-content:space-between;align-items:baseline;margin-bottom:0}.slider-field-value{font-size:14px;font-weight:600;color:var(--mat-sys-primary, #3f51b5)}.slider-field-slider{display:block;width:100%;margin:0}\n"]
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",
1162
+ 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"]
971
1163
  }]
972
1164
  }],
973
1165
  propDecorators: {
@@ -1036,9 +1228,11 @@ function provideLocaleDateAdapter() {
1036
1228
  useValue: MAT_NATIVE_DATE_FORMATS
1037
1229
  }];
1038
1230
  }
1231
+ const DEFAULT_DATE_TIME_LOCALE = "en-GB";
1039
1232
  const INSTANT_DATE_TIME_INVALID_ERROR_LABEL = "Not a valid date and time.";
1040
1233
  const BUSINESS_DATE_INVALID_ERROR_LABEL = "Not a valid date.";
1041
1234
  const BUSINESS_TIME_INVALID_ERROR_LABEL = "Not a valid time.";
1235
+ const NGX_FORMS_LOCALE = new InjectionToken("NGX_FORMS_LOCALE", { factory: () => () => DEFAULT_DATE_TIME_LOCALE });
1042
1236
  function syncMatInputErrorState(inputs, state) {
1043
1237
  effect(() => {
1044
1238
  const hasError = state().touched() && state().invalid();
@@ -1111,6 +1305,7 @@ var BusinessDateField = class BusinessDateField {
1111
1305
  fieldDef = input.required(...ngDevMode ? [{ debugName: "fieldDef" }] : /* istanbul ignore next */ []);
1112
1306
  field = input.required(...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
1113
1307
  dateAdapter = inject(DateAdapter);
1308
+ resolveLocale = inject(NGX_FORMS_LOCALE);
1114
1309
  state = computed(() => this.field()(), ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
1115
1310
  date = computed(() => toDate$1(this.state().value()), ...ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []);
1116
1311
  minDate = computed(() => toDate$1(this.fieldDef().dateTimeConfig?.min), ...ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []);
@@ -1118,7 +1313,7 @@ var BusinessDateField = class BusinessDateField {
1118
1313
  inputs = viewChildren(MatInput, ...ngDevMode ? [{ debugName: "inputs" }] : /* istanbul ignore next */ []);
1119
1314
  constructor() {
1120
1315
  syncMatInputErrorState(this.inputs, this.state);
1121
- effect(() => this.dateAdapter.setLocale(this.fieldDef().dateTimeConfig?.locale || "en-GB"));
1316
+ effect(() => this.dateAdapter.setLocale(this.fieldDef().dateTimeConfig?.locale || this.resolveLocale()));
1122
1317
  }
1123
1318
  onDateChange(date) {
1124
1319
  if (!date || isNaN(date.getTime())) {
@@ -1144,7 +1339,7 @@ var BusinessDateField = class BusinessDateField {
1144
1339
  version: "22.2.0",
1145
1340
  type: BusinessDateField,
1146
1341
  isStandalone: true,
1147
- selector: "app-business-date-field",
1342
+ selector: "ngx-business-date-field",
1148
1343
  inputs: {
1149
1344
  fieldDef: {
1150
1345
  classPropertyName: "fieldDef",
@@ -1169,8 +1364,8 @@ var BusinessDateField = class BusinessDateField {
1169
1364
  isSignal: true
1170
1365
  }],
1171
1366
  ngImport: i0,
1172
- template: "<mat-form-field class=\"business-date-field\" 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",
1173
- styles: [":host{display:block}.business-date-field{width:100%}\n"],
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",
1368
+ styles: [":host{display:block}.BusinessDateField{width:100%}\n"],
1174
1369
  dependencies: [
1175
1370
  {
1176
1371
  kind: "ngmodule",
@@ -1283,7 +1478,7 @@ i0.ɵɵngDeclareClassMetadata({
1283
1478
  decorators: [{
1284
1479
  type: Component,
1285
1480
  args: [{
1286
- selector: "app-business-date-field",
1481
+ selector: "ngx-business-date-field",
1287
1482
  standalone: true,
1288
1483
  imports: [
1289
1484
  MatFormFieldModule,
@@ -1292,8 +1487,8 @@ i0.ɵɵngDeclareClassMetadata({
1292
1487
  ],
1293
1488
  providers: [provideLocaleDateAdapter()],
1294
1489
  changeDetection: ChangeDetectionStrategy.OnPush,
1295
- template: "<mat-form-field class=\"business-date-field\" 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",
1296
- styles: [":host{display:block}.business-date-field{width:100%}\n"]
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",
1491
+ styles: [":host{display:block}.BusinessDateField{width:100%}\n"]
1297
1492
  }]
1298
1493
  }],
1299
1494
  ctorParameters: () => [],
@@ -1328,6 +1523,7 @@ var BusinessTimeField = class BusinessTimeField {
1328
1523
  fieldDef = input.required(...ngDevMode ? [{ debugName: "fieldDef" }] : /* istanbul ignore next */ []);
1329
1524
  field = input.required(...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
1330
1525
  dateAdapter = inject(DateAdapter);
1526
+ resolveLocale = inject(NGX_FORMS_LOCALE);
1331
1527
  state = computed(() => this.field()(), ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
1332
1528
  time = computed(() => toDate(this.state().value()), ...ngDevMode ? [{ debugName: "time" }] : /* istanbul ignore next */ []);
1333
1529
  minTime = computed(() => toDate(this.fieldDef().dateTimeConfig?.min), ...ngDevMode ? [{ debugName: "minTime" }] : /* istanbul ignore next */ []);
@@ -1335,7 +1531,7 @@ var BusinessTimeField = class BusinessTimeField {
1335
1531
  inputs = viewChildren(MatInput, ...ngDevMode ? [{ debugName: "inputs" }] : /* istanbul ignore next */ []);
1336
1532
  constructor() {
1337
1533
  syncMatInputErrorState(this.inputs, this.state);
1338
- effect(() => this.dateAdapter.setLocale(this.fieldDef().dateTimeConfig?.locale || "en-GB"));
1534
+ effect(() => this.dateAdapter.setLocale(this.fieldDef().dateTimeConfig?.locale || this.resolveLocale()));
1339
1535
  }
1340
1536
  onTimeChange(time) {
1341
1537
  if (!time || isNaN(time.getTime())) {
@@ -1360,7 +1556,7 @@ var BusinessTimeField = class BusinessTimeField {
1360
1556
  version: "22.2.0",
1361
1557
  type: BusinessTimeField,
1362
1558
  isStandalone: true,
1363
- selector: "app-business-time-field",
1559
+ selector: "ngx-business-time-field",
1364
1560
  inputs: {
1365
1561
  fieldDef: {
1366
1562
  classPropertyName: "fieldDef",
@@ -1385,8 +1581,8 @@ var BusinessTimeField = class BusinessTimeField {
1385
1581
  isSignal: true
1386
1582
  }],
1387
1583
  ngImport: i0,
1388
- template: "<mat-form-field class=\"business-time-field\" 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",
1389
- styles: [":host{display:block}.business-time-field{width:100%}\n"],
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",
1585
+ styles: [":host{display:block}.BusinessTimeField{width:100%}\n"],
1390
1586
  dependencies: [
1391
1587
  {
1392
1588
  kind: "ngmodule",
@@ -1516,7 +1712,7 @@ i0.ɵɵngDeclareClassMetadata({
1516
1712
  decorators: [{
1517
1713
  type: Component,
1518
1714
  args: [{
1519
- selector: "app-business-time-field",
1715
+ selector: "ngx-business-time-field",
1520
1716
  standalone: true,
1521
1717
  imports: [
1522
1718
  MatFormFieldModule,
@@ -1525,8 +1721,8 @@ i0.ɵɵngDeclareClassMetadata({
1525
1721
  ],
1526
1722
  providers: [provideLocaleDateAdapter()],
1527
1723
  changeDetection: ChangeDetectionStrategy.OnPush,
1528
- template: "<mat-form-field class=\"business-time-field\" 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",
1529
- styles: [":host{display:block}.business-time-field{width:100%}\n"]
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",
1725
+ styles: [":host{display:block}.BusinessTimeField{width:100%}\n"]
1530
1726
  }]
1531
1727
  }],
1532
1728
  ctorParameters: () => [],
@@ -1635,6 +1831,7 @@ var InstantDateTimeField = class InstantDateTimeField {
1635
1831
  field = input.required(...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
1636
1832
  zonedDateTime = inject(ZonedDateTimeService);
1637
1833
  dateAdapter = inject(DateAdapter);
1834
+ resolveLocale = inject(NGX_FORMS_LOCALE);
1638
1835
  notice = signal(null, ...ngDevMode ? [{ debugName: "notice" }] : /* istanbul ignore next */ []);
1639
1836
  state = computed(() => this.field()(), ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
1640
1837
  config = computed(() => this.fieldDef().dateTimeConfig, ...ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []);
@@ -1651,7 +1848,7 @@ var InstantDateTimeField = class InstantDateTimeField {
1651
1848
  inputs = viewChildren(MatInput, ...ngDevMode ? [{ debugName: "inputs" }] : /* istanbul ignore next */ []);
1652
1849
  constructor() {
1653
1850
  syncMatInputErrorState(this.inputs, this.state);
1654
- effect(() => this.dateAdapter.setLocale(this.config()?.locale || "en-GB"));
1851
+ effect(() => this.dateAdapter.setLocale(this.config()?.locale || this.resolveLocale()));
1655
1852
  }
1656
1853
  onDateChange(date) {
1657
1854
  if (sameParts(date, this.date(), (d) => [
@@ -1693,7 +1890,7 @@ var InstantDateTimeField = class InstantDateTimeField {
1693
1890
  version: "22.2.0",
1694
1891
  type: InstantDateTimeField,
1695
1892
  isStandalone: true,
1696
- selector: "app-instant-date-time-field",
1893
+ selector: "ngx-instant-date-time-field",
1697
1894
  inputs: {
1698
1895
  fieldDef: {
1699
1896
  classPropertyName: "fieldDef",
@@ -1718,8 +1915,8 @@ var InstantDateTimeField = class InstantDateTimeField {
1718
1915
  isSignal: true
1719
1916
  }],
1720
1917
  ngImport: i0,
1721
- template: "<div class=\"instant-date-time-field-label\">\r\n {{ fieldDef().label }}@if (state().required()) {<span aria-hidden=\"true\"> *</span>}\r\n</div>\r\n\r\n<div class=\"instant-date-time-field-row\">\r\n <mat-form-field class=\"instant-date-time-field-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=\"instant-date-time-field-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=\"instant-date-time-field-zone\">\r\n {{ timeZone() }}@if (offset()) { (UTC{{ offset() }})}\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=\"instant-date-time-field-notice\">{{ notice() }}</div>\r\n}\r\n\r\n<app-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\r\n",
1722
- styles: [":host{display:block}.instant-date-time-field-label{margin-bottom:6px;font-size:14px;color:#0009}.instant-date-time-field-row{display:flex;gap:8px;width:100%}@media(max-width:400px){.instant-date-time-field-row{flex-direction:column}}.instant-date-time-field-date{flex:3;min-width:0}.instant-date-time-field-time{flex:2;min-width:0}.instant-date-time-field-zone{font-size:12px;color:#0009;margin-top:4px;line-height:1.2}.instant-date-time-field-notice{font-size:12px;color:#8a5a00;margin-top:4px}\n"],
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",
1919
+ 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"],
1723
1920
  dependencies: [
1724
1921
  {
1725
1922
  kind: "ngmodule",
@@ -1863,7 +2060,7 @@ var InstantDateTimeField = class InstantDateTimeField {
1863
2060
  {
1864
2061
  kind: "component",
1865
2062
  type: FieldSubscript,
1866
- selector: "app-field-subscript",
2063
+ selector: "ngx-field-subscript",
1867
2064
  inputs: ["field", "hint"]
1868
2065
  }
1869
2066
  ],
@@ -1878,7 +2075,7 @@ i0.ɵɵngDeclareClassMetadata({
1878
2075
  decorators: [{
1879
2076
  type: Component,
1880
2077
  args: [{
1881
- selector: "app-instant-date-time-field",
2078
+ selector: "ngx-instant-date-time-field",
1882
2079
  standalone: true,
1883
2080
  imports: [
1884
2081
  MatFormFieldModule,
@@ -1889,8 +2086,8 @@ i0.ɵɵngDeclareClassMetadata({
1889
2086
  ],
1890
2087
  providers: [provideLocaleDateAdapter()],
1891
2088
  changeDetection: ChangeDetectionStrategy.OnPush,
1892
- template: "<div class=\"instant-date-time-field-label\">\r\n {{ fieldDef().label }}@if (state().required()) {<span aria-hidden=\"true\"> *</span>}\r\n</div>\r\n\r\n<div class=\"instant-date-time-field-row\">\r\n <mat-form-field class=\"instant-date-time-field-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=\"instant-date-time-field-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=\"instant-date-time-field-zone\">\r\n {{ timeZone() }}@if (offset()) { (UTC{{ offset() }})}\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=\"instant-date-time-field-notice\">{{ notice() }}</div>\r\n}\r\n\r\n<app-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\r\n",
1893
- styles: [":host{display:block}.instant-date-time-field-label{margin-bottom:6px;font-size:14px;color:#0009}.instant-date-time-field-row{display:flex;gap:8px;width:100%}@media(max-width:400px){.instant-date-time-field-row{flex-direction:column}}.instant-date-time-field-date{flex:3;min-width:0}.instant-date-time-field-time{flex:2;min-width:0}.instant-date-time-field-zone{font-size:12px;color:#0009;margin-top:4px;line-height:1.2}.instant-date-time-field-notice{font-size:12px;color:#8a5a00;margin-top:4px}\n"]
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",
2090
+ 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"]
1894
2091
  }]
1895
2092
  }],
1896
2093
  ctorParameters: () => [],
@@ -1928,6 +2125,8 @@ function sameParts(a, b, parts) {
1928
2125
  var DynamicForm = class DynamicForm {
1929
2126
  metaInfo = input.required(...ngDevMode ? [{ debugName: "metaInfo" }] : /* istanbul ignore next */ []);
1930
2127
  dynamicForm = input.required(...ngDevMode ? [{ debugName: "dynamicForm" }] : /* istanbul ignore next */ []);
2128
+ submitLabel = input("Save", ...ngDevMode ? [{ debugName: "submitLabel" }] : /* istanbul ignore next */ []);
2129
+ clearLabel = input("Clear", ...ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []);
1931
2130
  onFormSubmit = output();
1932
2131
  onFormClear = output();
1933
2132
  handleSubmit() {
@@ -1949,7 +2148,7 @@ var DynamicForm = class DynamicForm {
1949
2148
  version: "22.2.0",
1950
2149
  type: DynamicForm,
1951
2150
  isStandalone: true,
1952
- selector: "app-dynamic-form",
2151
+ selector: "ngx-dynamic-form",
1953
2152
  inputs: {
1954
2153
  metaInfo: {
1955
2154
  classPropertyName: "metaInfo",
@@ -1964,6 +2163,20 @@ var DynamicForm = class DynamicForm {
1964
2163
  isSignal: true,
1965
2164
  isRequired: true,
1966
2165
  transformFunction: null
2166
+ },
2167
+ submitLabel: {
2168
+ classPropertyName: "submitLabel",
2169
+ publicName: "submitLabel",
2170
+ isSignal: true,
2171
+ isRequired: false,
2172
+ transformFunction: null
2173
+ },
2174
+ clearLabel: {
2175
+ classPropertyName: "clearLabel",
2176
+ publicName: "clearLabel",
2177
+ isSignal: true,
2178
+ isRequired: false,
2179
+ transformFunction: null
1967
2180
  }
1968
2181
  },
1969
2182
  outputs: {
@@ -1971,8 +2184,8 @@ var DynamicForm = class DynamicForm {
1971
2184
  onFormClear: "onFormClear"
1972
2185
  },
1973
2186
  ngImport: i0,
1974
- template: "<div class=\"dynamic-form-container\">\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=\"dynamic-form-field\" [style.--field-max-width]=\"fieldDef.maxWidth\">\r\n @switch (fieldDef.type) {\r\n @case ('text') {\r\n <app-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('email') {\r\n <app-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('password') {\r\n <app-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('search') {\r\n <app-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('number') {\r\n <app-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('textarea') {\r\n <app-textarea-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('code') {\r\n <app-textarea-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('checkbox') {\r\n <app-checkbox-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('radio') {\r\n <app-radio-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('select') {\r\n <app-select-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('range') {\r\n <app-slider-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('business-date') {\r\n <app-business-date-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('business-time') {\r\n <app-business-time-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('instant-date-time') {\r\n <app-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=\"dynamic-form-actions-container\">\r\n <button mat-flat-button\r\n [disabled]=\"dynamicForm()().invalid()\"\r\n (click)=\"handleSubmit()\">Save\r\n </button>\r\n <button matButton=\"outlined\" (click)=\"clearForm()\">Clear</button>\r\n </div>\r\n</div>\r\n",
1975
- styles: [".dynamic-form-container{padding:2rem 3rem;display:flex;flex-direction:column;align-items:center;width:100%;gap:16px;box-sizing:border-box}.dynamic-form-field{display:flex;flex-direction:column;max-width:var(--field-max-width, 400px);width:100%;margin:0 auto;font-family:Roboto,Helvetica Neue,sans-serif}.dynamic-form-actions-container{display:flex;gap:20px}\n"],
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",
2188
+ 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"],
1976
2189
  dependencies: [
1977
2190
  {
1978
2191
  kind: "component",
@@ -1984,55 +2197,61 @@ var DynamicForm = class DynamicForm {
1984
2197
  {
1985
2198
  kind: "component",
1986
2199
  type: TextField,
1987
- selector: "app-text-field",
2200
+ selector: "ngx-text-field",
1988
2201
  inputs: ["fieldDef", "field"]
1989
2202
  },
1990
2203
  {
1991
2204
  kind: "component",
1992
2205
  type: TextareaField,
1993
- selector: "app-textarea-field",
2206
+ selector: "ngx-textarea-field",
1994
2207
  inputs: ["fieldDef", "field"]
1995
2208
  },
1996
2209
  {
1997
2210
  kind: "component",
1998
2211
  type: CheckboxField,
1999
- selector: "app-checkbox-field",
2212
+ selector: "ngx-checkbox-field",
2000
2213
  inputs: ["fieldDef", "field"]
2001
2214
  },
2002
2215
  {
2003
2216
  kind: "component",
2004
2217
  type: RadioField,
2005
- selector: "app-radio-field",
2218
+ selector: "ngx-radio-field",
2006
2219
  inputs: ["fieldDef", "field"]
2007
2220
  },
2008
2221
  {
2009
2222
  kind: "component",
2010
2223
  type: SelectField,
2011
- selector: "app-select-field",
2224
+ selector: "ngx-select-field",
2225
+ inputs: ["fieldDef", "field"]
2226
+ },
2227
+ {
2228
+ kind: "component",
2229
+ type: ChipsField,
2230
+ selector: "ngx-chips-field",
2012
2231
  inputs: ["fieldDef", "field"]
2013
2232
  },
2014
2233
  {
2015
2234
  kind: "component",
2016
2235
  type: SliderField,
2017
- selector: "app-slider-field",
2236
+ selector: "ngx-slider-field",
2018
2237
  inputs: ["fieldDef", "field"]
2019
2238
  },
2020
2239
  {
2021
2240
  kind: "component",
2022
2241
  type: BusinessDateField,
2023
- selector: "app-business-date-field",
2242
+ selector: "ngx-business-date-field",
2024
2243
  inputs: ["fieldDef", "field"]
2025
2244
  },
2026
2245
  {
2027
2246
  kind: "component",
2028
2247
  type: BusinessTimeField,
2029
- selector: "app-business-time-field",
2248
+ selector: "ngx-business-time-field",
2030
2249
  inputs: ["fieldDef", "field"]
2031
2250
  },
2032
2251
  {
2033
2252
  kind: "component",
2034
2253
  type: InstantDateTimeField,
2035
- selector: "app-instant-date-time-field",
2254
+ selector: "ngx-instant-date-time-field",
2036
2255
  inputs: ["fieldDef", "field"]
2037
2256
  }
2038
2257
  ],
@@ -2047,7 +2266,7 @@ i0.ɵɵngDeclareClassMetadata({
2047
2266
  decorators: [{
2048
2267
  type: Component,
2049
2268
  args: [{
2050
- selector: "app-dynamic-form",
2269
+ selector: "ngx-dynamic-form",
2051
2270
  standalone: true,
2052
2271
  imports: [
2053
2272
  MatButton,
@@ -2056,14 +2275,15 @@ i0.ɵɵngDeclareClassMetadata({
2056
2275
  CheckboxField,
2057
2276
  RadioField,
2058
2277
  SelectField,
2278
+ ChipsField,
2059
2279
  SliderField,
2060
2280
  BusinessDateField,
2061
2281
  BusinessTimeField,
2062
2282
  InstantDateTimeField
2063
2283
  ],
2064
2284
  changeDetection: ChangeDetectionStrategy.OnPush,
2065
- template: "<div class=\"dynamic-form-container\">\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=\"dynamic-form-field\" [style.--field-max-width]=\"fieldDef.maxWidth\">\r\n @switch (fieldDef.type) {\r\n @case ('text') {\r\n <app-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('email') {\r\n <app-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('password') {\r\n <app-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('search') {\r\n <app-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('number') {\r\n <app-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('textarea') {\r\n <app-textarea-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('code') {\r\n <app-textarea-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('checkbox') {\r\n <app-checkbox-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('radio') {\r\n <app-radio-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('select') {\r\n <app-select-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('range') {\r\n <app-slider-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('business-date') {\r\n <app-business-date-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('business-time') {\r\n <app-business-time-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n }\r\n @case ('instant-date-time') {\r\n <app-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=\"dynamic-form-actions-container\">\r\n <button mat-flat-button\r\n [disabled]=\"dynamicForm()().invalid()\"\r\n (click)=\"handleSubmit()\">Save\r\n </button>\r\n <button matButton=\"outlined\" (click)=\"clearForm()\">Clear</button>\r\n </div>\r\n</div>\r\n",
2066
- styles: [".dynamic-form-container{padding:2rem 3rem;display:flex;flex-direction:column;align-items:center;width:100%;gap:16px;box-sizing:border-box}.dynamic-form-field{display:flex;flex-direction:column;max-width:var(--field-max-width, 400px);width:100%;margin:0 auto;font-family:Roboto,Helvetica Neue,sans-serif}.dynamic-form-actions-container{display:flex;gap:20px}\n"]
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",
2286
+ 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"]
2067
2287
  }]
2068
2288
  }],
2069
2289
  propDecorators: {
@@ -2083,6 +2303,22 @@ i0.ɵɵngDeclareClassMetadata({
2083
2303
  required: true
2084
2304
  }]
2085
2305
  }],
2306
+ submitLabel: [{
2307
+ type: i0.Input,
2308
+ args: [{
2309
+ isSignal: true,
2310
+ alias: "submitLabel",
2311
+ required: false
2312
+ }]
2313
+ }],
2314
+ clearLabel: [{
2315
+ type: i0.Input,
2316
+ args: [{
2317
+ isSignal: true,
2318
+ alias: "clearLabel",
2319
+ required: false
2320
+ }]
2321
+ }],
2086
2322
  onFormSubmit: [{
2087
2323
  type: i0.Output,
2088
2324
  args: ["onFormSubmit"]
@@ -2168,6 +2404,9 @@ var FormConfigBuilder = class {
2168
2404
  options: choices
2169
2405
  });
2170
2406
  }
2407
+ chips(name, label, options) {
2408
+ return this.add(FormFieldType.CHIPS, name, label, options);
2409
+ }
2171
2410
  businessDate(name, label, options) {
2172
2411
  return this.add(FormFieldType.BUSINESS_DATE, name, label, options);
2173
2412
  }
@@ -2206,6 +2445,6 @@ var FormConfigBuilder = class {
2206
2445
  function formConfig(schemaType) {
2207
2446
  return new FormConfigBuilder(schemaType);
2208
2447
  }
2209
- export { BusinessDateField, BusinessTimeField, CheckboxField, DynamicForm, FormConfigBuilder, FormFieldType, InstantDateTimeField, RadioField, SelectField, SliderField, TextField, TextareaField, ZonedDateTimeService, createEmptyEntity, defineSchema, formConfig, toSchema };
2448
+ export { BusinessDateField, BusinessTimeField, CheckboxField, ChipsField, DynamicForm, FormConfigBuilder, FormFieldType, InstantDateTimeField, NGX_FORMS_LOCALE, RadioField, SelectField, SliderField, TextField, TextareaField, ZonedDateTimeService, createEmptyEntity, defineSchema, formConfig, toSchema };
2210
2449
 
2211
2450
  //# sourceMappingURL=wiltech-labs-ngx-forms.mjs.map