@wiltech-labs/ngx-forms 0.1.0 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +119 -65
  2. package/fesm2022/wiltech-labs-ngx-forms.mjs +121 -84
  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 +53 -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";
@@ -34,7 +34,7 @@ var TextField = class TextField {
34
34
  version: "22.2.0",
35
35
  type: TextField,
36
36
  isStandalone: true,
37
- selector: "app-text-field",
37
+ selector: "ngx-text-field",
38
38
  inputs: {
39
39
  fieldDef: {
40
40
  classPropertyName: "fieldDef",
@@ -52,8 +52,8 @@ var TextField = class TextField {
52
52
  }
53
53
  },
54
54
  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"],
55
+ 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",
56
+ styles: [":host{display:block}.TextField{width:100%}\n"],
57
57
  dependencies: [
58
58
  {
59
59
  kind: "directive",
@@ -132,7 +132,7 @@ i0.ɵɵngDeclareClassMetadata({
132
132
  decorators: [{
133
133
  type: Component,
134
134
  args: [{
135
- selector: "app-text-field",
135
+ selector: "ngx-text-field",
136
136
  standalone: true,
137
137
  imports: [
138
138
  FormField,
@@ -140,8 +140,8 @@ i0.ɵɵngDeclareClassMetadata({
140
140
  MatInputModule
141
141
  ],
142
142
  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"]
143
+ 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",
144
+ styles: [":host{display:block}.TextField{width:100%}\n"]
145
145
  }]
146
146
  }],
147
147
  propDecorators: {
@@ -209,7 +209,7 @@ var TextareaField = class TextareaField {
209
209
  version: "22.2.0",
210
210
  type: TextareaField,
211
211
  isStandalone: true,
212
- selector: "app-textarea-field",
212
+ selector: "ngx-textarea-field",
213
213
  inputs: {
214
214
  fieldDef: {
215
215
  classPropertyName: "fieldDef",
@@ -227,8 +227,8 @@ var TextareaField = class TextareaField {
227
227
  }
228
228
  },
229
229
  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"],
230
+ 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",
231
+ 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
232
  dependencies: [
233
233
  {
234
234
  kind: "directive",
@@ -319,7 +319,7 @@ i0.ɵɵngDeclareClassMetadata({
319
319
  decorators: [{
320
320
  type: Component,
321
321
  args: [{
322
- selector: "app-textarea-field",
322
+ selector: "ngx-textarea-field",
323
323
  standalone: true,
324
324
  imports: [
325
325
  FormField,
@@ -327,8 +327,8 @@ i0.ɵɵngDeclareClassMetadata({
327
327
  MatInputModule
328
328
  ],
329
329
  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"]
330
+ 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",
331
+ 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
332
  }]
333
333
  }],
334
334
  propDecorators: {
@@ -374,7 +374,7 @@ var FieldSubscript = class FieldSubscript {
374
374
  version: "22.2.0",
375
375
  type: FieldSubscript,
376
376
  isStandalone: true,
377
- selector: "app-field-subscript",
377
+ selector: "ngx-field-subscript",
378
378
  inputs: {
379
379
  field: {
380
380
  classPropertyName: "field",
@@ -392,8 +392,8 @@ var FieldSubscript = class FieldSubscript {
392
392
  }
393
393
  },
394
394
  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"],
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=\"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",
396
+ 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
397
  dependencies: [{
398
398
  kind: "directive",
399
399
  type: MatError,
@@ -411,12 +411,12 @@ i0.ɵɵngDeclareClassMetadata({
411
411
  decorators: [{
412
412
  type: Component,
413
413
  args: [{
414
- selector: "app-field-subscript",
414
+ selector: "ngx-field-subscript",
415
415
  standalone: true,
416
416
  imports: [MatError],
417
417
  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"]
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=\"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",
419
+ 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
420
  }]
421
421
  }],
422
422
  propDecorators: {
@@ -454,7 +454,7 @@ var CheckboxField = class CheckboxField {
454
454
  version: "22.2.0",
455
455
  type: CheckboxField,
456
456
  isStandalone: true,
457
- selector: "app-checkbox-field",
457
+ selector: "ngx-checkbox-field",
458
458
  inputs: {
459
459
  fieldDef: {
460
460
  classPropertyName: "fieldDef",
@@ -472,8 +472,8 @@ var CheckboxField = class CheckboxField {
472
472
  }
473
473
  },
474
474
  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"],
475
+ 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",
476
+ styles: [":host{display:block}.CheckboxField-subscript{padding-inline-start:40px;margin-top:-4px}\n"],
477
477
  dependencies: [
478
478
  {
479
479
  kind: "directive",
@@ -512,7 +512,7 @@ var CheckboxField = class CheckboxField {
512
512
  {
513
513
  kind: "component",
514
514
  type: FieldSubscript,
515
- selector: "app-field-subscript",
515
+ selector: "ngx-field-subscript",
516
516
  inputs: ["field", "hint"]
517
517
  }
518
518
  ],
@@ -527,7 +527,7 @@ i0.ɵɵngDeclareClassMetadata({
527
527
  decorators: [{
528
528
  type: Component,
529
529
  args: [{
530
- selector: "app-checkbox-field",
530
+ selector: "ngx-checkbox-field",
531
531
  standalone: true,
532
532
  imports: [
533
533
  FormField,
@@ -535,8 +535,8 @@ i0.ɵɵngDeclareClassMetadata({
535
535
  FieldSubscript
536
536
  ],
537
537
  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"]
538
+ 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",
539
+ styles: [":host{display:block}.CheckboxField-subscript{padding-inline-start:40px;margin-top:-4px}\n"]
540
540
  }]
541
541
  }],
542
542
  propDecorators: {
@@ -576,7 +576,7 @@ var RadioField = class RadioField {
576
576
  version: "22.2.0",
577
577
  type: RadioField,
578
578
  isStandalone: true,
579
- selector: "app-radio-field",
579
+ selector: "ngx-radio-field",
580
580
  inputs: {
581
581
  fieldDef: {
582
582
  classPropertyName: "fieldDef",
@@ -594,8 +594,8 @@ var RadioField = class RadioField {
594
594
  }
595
595
  },
596
596
  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"],
597
+ 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",
598
+ 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
599
  dependencies: [
600
600
  {
601
601
  kind: "directive",
@@ -647,7 +647,7 @@ var RadioField = class RadioField {
647
647
  {
648
648
  kind: "component",
649
649
  type: FieldSubscript,
650
- selector: "app-field-subscript",
650
+ selector: "ngx-field-subscript",
651
651
  inputs: ["field", "hint"]
652
652
  }
653
653
  ],
@@ -662,7 +662,7 @@ i0.ɵɵngDeclareClassMetadata({
662
662
  decorators: [{
663
663
  type: Component,
664
664
  args: [{
665
- selector: "app-radio-field",
665
+ selector: "ngx-radio-field",
666
666
  standalone: true,
667
667
  imports: [
668
668
  FormField,
@@ -671,8 +671,8 @@ i0.ɵɵngDeclareClassMetadata({
671
671
  FieldSubscript
672
672
  ],
673
673
  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"]
674
+ 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",
675
+ 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
676
  }]
677
677
  }],
678
678
  propDecorators: {
@@ -710,7 +710,7 @@ var SelectField = class SelectField {
710
710
  version: "22.2.0",
711
711
  type: SelectField,
712
712
  isStandalone: true,
713
- selector: "app-select-field",
713
+ selector: "ngx-select-field",
714
714
  inputs: {
715
715
  fieldDef: {
716
716
  classPropertyName: "fieldDef",
@@ -728,8 +728,8 @@ var SelectField = class SelectField {
728
728
  }
729
729
  },
730
730
  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"],
731
+ 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",
732
+ styles: [":host{display:block}.SelectField{width:100%}\n"],
733
733
  dependencies: [
734
734
  {
735
735
  kind: "directive",
@@ -832,7 +832,7 @@ i0.ɵɵngDeclareClassMetadata({
832
832
  decorators: [{
833
833
  type: Component,
834
834
  args: [{
835
- selector: "app-select-field",
835
+ selector: "ngx-select-field",
836
836
  standalone: true,
837
837
  imports: [
838
838
  FormField,
@@ -841,8 +841,8 @@ i0.ɵɵngDeclareClassMetadata({
841
841
  MatOption
842
842
  ],
843
843
  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"]
844
+ 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",
845
+ styles: [":host{display:block}.SelectField{width:100%}\n"]
846
846
  }]
847
847
  }],
848
848
  propDecorators: {
@@ -882,7 +882,7 @@ var SliderField = class SliderField {
882
882
  version: "22.2.0",
883
883
  type: SliderField,
884
884
  isStandalone: true,
885
- selector: "app-slider-field",
885
+ selector: "ngx-slider-field",
886
886
  inputs: {
887
887
  fieldDef: {
888
888
  classPropertyName: "fieldDef",
@@ -900,8 +900,8 @@ var SliderField = class SliderField {
900
900
  }
901
901
  },
902
902
  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"],
903
+ 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",
904
+ 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
905
  dependencies: [
906
906
  {
907
907
  kind: "directive",
@@ -942,7 +942,7 @@ var SliderField = class SliderField {
942
942
  {
943
943
  kind: "component",
944
944
  type: FieldSubscript,
945
- selector: "app-field-subscript",
945
+ selector: "ngx-field-subscript",
946
946
  inputs: ["field", "hint"]
947
947
  }
948
948
  ],
@@ -957,7 +957,7 @@ i0.ɵɵngDeclareClassMetadata({
957
957
  decorators: [{
958
958
  type: Component,
959
959
  args: [{
960
- selector: "app-slider-field",
960
+ selector: "ngx-slider-field",
961
961
  standalone: true,
962
962
  imports: [
963
963
  FormField,
@@ -966,8 +966,8 @@ i0.ɵɵngDeclareClassMetadata({
966
966
  FieldSubscript
967
967
  ],
968
968
  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"]
969
+ 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",
970
+ 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
971
  }]
972
972
  }],
973
973
  propDecorators: {
@@ -1036,9 +1036,11 @@ function provideLocaleDateAdapter() {
1036
1036
  useValue: MAT_NATIVE_DATE_FORMATS
1037
1037
  }];
1038
1038
  }
1039
+ const DEFAULT_DATE_TIME_LOCALE = "en-GB";
1039
1040
  const INSTANT_DATE_TIME_INVALID_ERROR_LABEL = "Not a valid date and time.";
1040
1041
  const BUSINESS_DATE_INVALID_ERROR_LABEL = "Not a valid date.";
1041
1042
  const BUSINESS_TIME_INVALID_ERROR_LABEL = "Not a valid time.";
1043
+ const NGX_FORMS_LOCALE = new InjectionToken("NGX_FORMS_LOCALE", { factory: () => () => DEFAULT_DATE_TIME_LOCALE });
1042
1044
  function syncMatInputErrorState(inputs, state) {
1043
1045
  effect(() => {
1044
1046
  const hasError = state().touched() && state().invalid();
@@ -1111,6 +1113,7 @@ var BusinessDateField = class BusinessDateField {
1111
1113
  fieldDef = input.required(...ngDevMode ? [{ debugName: "fieldDef" }] : /* istanbul ignore next */ []);
1112
1114
  field = input.required(...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
1113
1115
  dateAdapter = inject(DateAdapter);
1116
+ resolveLocale = inject(NGX_FORMS_LOCALE);
1114
1117
  state = computed(() => this.field()(), ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
1115
1118
  date = computed(() => toDate$1(this.state().value()), ...ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []);
1116
1119
  minDate = computed(() => toDate$1(this.fieldDef().dateTimeConfig?.min), ...ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []);
@@ -1118,7 +1121,7 @@ var BusinessDateField = class BusinessDateField {
1118
1121
  inputs = viewChildren(MatInput, ...ngDevMode ? [{ debugName: "inputs" }] : /* istanbul ignore next */ []);
1119
1122
  constructor() {
1120
1123
  syncMatInputErrorState(this.inputs, this.state);
1121
- effect(() => this.dateAdapter.setLocale(this.fieldDef().dateTimeConfig?.locale || "en-GB"));
1124
+ effect(() => this.dateAdapter.setLocale(this.fieldDef().dateTimeConfig?.locale || this.resolveLocale()));
1122
1125
  }
1123
1126
  onDateChange(date) {
1124
1127
  if (!date || isNaN(date.getTime())) {
@@ -1144,7 +1147,7 @@ var BusinessDateField = class BusinessDateField {
1144
1147
  version: "22.2.0",
1145
1148
  type: BusinessDateField,
1146
1149
  isStandalone: true,
1147
- selector: "app-business-date-field",
1150
+ selector: "ngx-business-date-field",
1148
1151
  inputs: {
1149
1152
  fieldDef: {
1150
1153
  classPropertyName: "fieldDef",
@@ -1169,8 +1172,8 @@ var BusinessDateField = class BusinessDateField {
1169
1172
  isSignal: true
1170
1173
  }],
1171
1174
  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"],
1175
+ 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",
1176
+ styles: [":host{display:block}.BusinessDateField{width:100%}\n"],
1174
1177
  dependencies: [
1175
1178
  {
1176
1179
  kind: "ngmodule",
@@ -1283,7 +1286,7 @@ i0.ɵɵngDeclareClassMetadata({
1283
1286
  decorators: [{
1284
1287
  type: Component,
1285
1288
  args: [{
1286
- selector: "app-business-date-field",
1289
+ selector: "ngx-business-date-field",
1287
1290
  standalone: true,
1288
1291
  imports: [
1289
1292
  MatFormFieldModule,
@@ -1292,8 +1295,8 @@ i0.ɵɵngDeclareClassMetadata({
1292
1295
  ],
1293
1296
  providers: [provideLocaleDateAdapter()],
1294
1297
  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"]
1298
+ 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",
1299
+ styles: [":host{display:block}.BusinessDateField{width:100%}\n"]
1297
1300
  }]
1298
1301
  }],
1299
1302
  ctorParameters: () => [],
@@ -1328,6 +1331,7 @@ var BusinessTimeField = class BusinessTimeField {
1328
1331
  fieldDef = input.required(...ngDevMode ? [{ debugName: "fieldDef" }] : /* istanbul ignore next */ []);
1329
1332
  field = input.required(...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
1330
1333
  dateAdapter = inject(DateAdapter);
1334
+ resolveLocale = inject(NGX_FORMS_LOCALE);
1331
1335
  state = computed(() => this.field()(), ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
1332
1336
  time = computed(() => toDate(this.state().value()), ...ngDevMode ? [{ debugName: "time" }] : /* istanbul ignore next */ []);
1333
1337
  minTime = computed(() => toDate(this.fieldDef().dateTimeConfig?.min), ...ngDevMode ? [{ debugName: "minTime" }] : /* istanbul ignore next */ []);
@@ -1335,7 +1339,7 @@ var BusinessTimeField = class BusinessTimeField {
1335
1339
  inputs = viewChildren(MatInput, ...ngDevMode ? [{ debugName: "inputs" }] : /* istanbul ignore next */ []);
1336
1340
  constructor() {
1337
1341
  syncMatInputErrorState(this.inputs, this.state);
1338
- effect(() => this.dateAdapter.setLocale(this.fieldDef().dateTimeConfig?.locale || "en-GB"));
1342
+ effect(() => this.dateAdapter.setLocale(this.fieldDef().dateTimeConfig?.locale || this.resolveLocale()));
1339
1343
  }
1340
1344
  onTimeChange(time) {
1341
1345
  if (!time || isNaN(time.getTime())) {
@@ -1360,7 +1364,7 @@ var BusinessTimeField = class BusinessTimeField {
1360
1364
  version: "22.2.0",
1361
1365
  type: BusinessTimeField,
1362
1366
  isStandalone: true,
1363
- selector: "app-business-time-field",
1367
+ selector: "ngx-business-time-field",
1364
1368
  inputs: {
1365
1369
  fieldDef: {
1366
1370
  classPropertyName: "fieldDef",
@@ -1385,8 +1389,8 @@ var BusinessTimeField = class BusinessTimeField {
1385
1389
  isSignal: true
1386
1390
  }],
1387
1391
  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"],
1392
+ 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",
1393
+ styles: [":host{display:block}.BusinessTimeField{width:100%}\n"],
1390
1394
  dependencies: [
1391
1395
  {
1392
1396
  kind: "ngmodule",
@@ -1516,7 +1520,7 @@ i0.ɵɵngDeclareClassMetadata({
1516
1520
  decorators: [{
1517
1521
  type: Component,
1518
1522
  args: [{
1519
- selector: "app-business-time-field",
1523
+ selector: "ngx-business-time-field",
1520
1524
  standalone: true,
1521
1525
  imports: [
1522
1526
  MatFormFieldModule,
@@ -1525,8 +1529,8 @@ i0.ɵɵngDeclareClassMetadata({
1525
1529
  ],
1526
1530
  providers: [provideLocaleDateAdapter()],
1527
1531
  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"]
1532
+ 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",
1533
+ styles: [":host{display:block}.BusinessTimeField{width:100%}\n"]
1530
1534
  }]
1531
1535
  }],
1532
1536
  ctorParameters: () => [],
@@ -1635,6 +1639,7 @@ var InstantDateTimeField = class InstantDateTimeField {
1635
1639
  field = input.required(...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
1636
1640
  zonedDateTime = inject(ZonedDateTimeService);
1637
1641
  dateAdapter = inject(DateAdapter);
1642
+ resolveLocale = inject(NGX_FORMS_LOCALE);
1638
1643
  notice = signal(null, ...ngDevMode ? [{ debugName: "notice" }] : /* istanbul ignore next */ []);
1639
1644
  state = computed(() => this.field()(), ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
1640
1645
  config = computed(() => this.fieldDef().dateTimeConfig, ...ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []);
@@ -1651,7 +1656,7 @@ var InstantDateTimeField = class InstantDateTimeField {
1651
1656
  inputs = viewChildren(MatInput, ...ngDevMode ? [{ debugName: "inputs" }] : /* istanbul ignore next */ []);
1652
1657
  constructor() {
1653
1658
  syncMatInputErrorState(this.inputs, this.state);
1654
- effect(() => this.dateAdapter.setLocale(this.config()?.locale || "en-GB"));
1659
+ effect(() => this.dateAdapter.setLocale(this.config()?.locale || this.resolveLocale()));
1655
1660
  }
1656
1661
  onDateChange(date) {
1657
1662
  if (sameParts(date, this.date(), (d) => [
@@ -1693,7 +1698,7 @@ var InstantDateTimeField = class InstantDateTimeField {
1693
1698
  version: "22.2.0",
1694
1699
  type: InstantDateTimeField,
1695
1700
  isStandalone: true,
1696
- selector: "app-instant-date-time-field",
1701
+ selector: "ngx-instant-date-time-field",
1697
1702
  inputs: {
1698
1703
  fieldDef: {
1699
1704
  classPropertyName: "fieldDef",
@@ -1718,8 +1723,8 @@ var InstantDateTimeField = class InstantDateTimeField {
1718
1723
  isSignal: true
1719
1724
  }],
1720
1725
  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"],
1726
+ 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",
1727
+ 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
1728
  dependencies: [
1724
1729
  {
1725
1730
  kind: "ngmodule",
@@ -1863,7 +1868,7 @@ var InstantDateTimeField = class InstantDateTimeField {
1863
1868
  {
1864
1869
  kind: "component",
1865
1870
  type: FieldSubscript,
1866
- selector: "app-field-subscript",
1871
+ selector: "ngx-field-subscript",
1867
1872
  inputs: ["field", "hint"]
1868
1873
  }
1869
1874
  ],
@@ -1878,7 +1883,7 @@ i0.ɵɵngDeclareClassMetadata({
1878
1883
  decorators: [{
1879
1884
  type: Component,
1880
1885
  args: [{
1881
- selector: "app-instant-date-time-field",
1886
+ selector: "ngx-instant-date-time-field",
1882
1887
  standalone: true,
1883
1888
  imports: [
1884
1889
  MatFormFieldModule,
@@ -1889,8 +1894,8 @@ i0.ɵɵngDeclareClassMetadata({
1889
1894
  ],
1890
1895
  providers: [provideLocaleDateAdapter()],
1891
1896
  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"]
1897
+ 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",
1898
+ 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
1899
  }]
1895
1900
  }],
1896
1901
  ctorParameters: () => [],
@@ -1928,6 +1933,8 @@ function sameParts(a, b, parts) {
1928
1933
  var DynamicForm = class DynamicForm {
1929
1934
  metaInfo = input.required(...ngDevMode ? [{ debugName: "metaInfo" }] : /* istanbul ignore next */ []);
1930
1935
  dynamicForm = input.required(...ngDevMode ? [{ debugName: "dynamicForm" }] : /* istanbul ignore next */ []);
1936
+ submitLabel = input("Save", ...ngDevMode ? [{ debugName: "submitLabel" }] : /* istanbul ignore next */ []);
1937
+ clearLabel = input("Clear", ...ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []);
1931
1938
  onFormSubmit = output();
1932
1939
  onFormClear = output();
1933
1940
  handleSubmit() {
@@ -1949,7 +1956,7 @@ var DynamicForm = class DynamicForm {
1949
1956
  version: "22.2.0",
1950
1957
  type: DynamicForm,
1951
1958
  isStandalone: true,
1952
- selector: "app-dynamic-form",
1959
+ selector: "ngx-dynamic-form",
1953
1960
  inputs: {
1954
1961
  metaInfo: {
1955
1962
  classPropertyName: "metaInfo",
@@ -1964,6 +1971,20 @@ var DynamicForm = class DynamicForm {
1964
1971
  isSignal: true,
1965
1972
  isRequired: true,
1966
1973
  transformFunction: null
1974
+ },
1975
+ submitLabel: {
1976
+ classPropertyName: "submitLabel",
1977
+ publicName: "submitLabel",
1978
+ isSignal: true,
1979
+ isRequired: false,
1980
+ transformFunction: null
1981
+ },
1982
+ clearLabel: {
1983
+ classPropertyName: "clearLabel",
1984
+ publicName: "clearLabel",
1985
+ isSignal: true,
1986
+ isRequired: false,
1987
+ transformFunction: null
1967
1988
  }
1968
1989
  },
1969
1990
  outputs: {
@@ -1971,8 +1992,8 @@ var DynamicForm = class DynamicForm {
1971
1992
  onFormClear: "onFormClear"
1972
1993
  },
1973
1994
  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"],
1995
+ 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 ('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",
1996
+ 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
1997
  dependencies: [
1977
1998
  {
1978
1999
  kind: "component",
@@ -1984,55 +2005,55 @@ var DynamicForm = class DynamicForm {
1984
2005
  {
1985
2006
  kind: "component",
1986
2007
  type: TextField,
1987
- selector: "app-text-field",
2008
+ selector: "ngx-text-field",
1988
2009
  inputs: ["fieldDef", "field"]
1989
2010
  },
1990
2011
  {
1991
2012
  kind: "component",
1992
2013
  type: TextareaField,
1993
- selector: "app-textarea-field",
2014
+ selector: "ngx-textarea-field",
1994
2015
  inputs: ["fieldDef", "field"]
1995
2016
  },
1996
2017
  {
1997
2018
  kind: "component",
1998
2019
  type: CheckboxField,
1999
- selector: "app-checkbox-field",
2020
+ selector: "ngx-checkbox-field",
2000
2021
  inputs: ["fieldDef", "field"]
2001
2022
  },
2002
2023
  {
2003
2024
  kind: "component",
2004
2025
  type: RadioField,
2005
- selector: "app-radio-field",
2026
+ selector: "ngx-radio-field",
2006
2027
  inputs: ["fieldDef", "field"]
2007
2028
  },
2008
2029
  {
2009
2030
  kind: "component",
2010
2031
  type: SelectField,
2011
- selector: "app-select-field",
2032
+ selector: "ngx-select-field",
2012
2033
  inputs: ["fieldDef", "field"]
2013
2034
  },
2014
2035
  {
2015
2036
  kind: "component",
2016
2037
  type: SliderField,
2017
- selector: "app-slider-field",
2038
+ selector: "ngx-slider-field",
2018
2039
  inputs: ["fieldDef", "field"]
2019
2040
  },
2020
2041
  {
2021
2042
  kind: "component",
2022
2043
  type: BusinessDateField,
2023
- selector: "app-business-date-field",
2044
+ selector: "ngx-business-date-field",
2024
2045
  inputs: ["fieldDef", "field"]
2025
2046
  },
2026
2047
  {
2027
2048
  kind: "component",
2028
2049
  type: BusinessTimeField,
2029
- selector: "app-business-time-field",
2050
+ selector: "ngx-business-time-field",
2030
2051
  inputs: ["fieldDef", "field"]
2031
2052
  },
2032
2053
  {
2033
2054
  kind: "component",
2034
2055
  type: InstantDateTimeField,
2035
- selector: "app-instant-date-time-field",
2056
+ selector: "ngx-instant-date-time-field",
2036
2057
  inputs: ["fieldDef", "field"]
2037
2058
  }
2038
2059
  ],
@@ -2047,7 +2068,7 @@ i0.ɵɵngDeclareClassMetadata({
2047
2068
  decorators: [{
2048
2069
  type: Component,
2049
2070
  args: [{
2050
- selector: "app-dynamic-form",
2071
+ selector: "ngx-dynamic-form",
2051
2072
  standalone: true,
2052
2073
  imports: [
2053
2074
  MatButton,
@@ -2062,8 +2083,8 @@ i0.ɵɵngDeclareClassMetadata({
2062
2083
  InstantDateTimeField
2063
2084
  ],
2064
2085
  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"]
2086
+ 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 ('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",
2087
+ 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
2088
  }]
2068
2089
  }],
2069
2090
  propDecorators: {
@@ -2083,6 +2104,22 @@ i0.ɵɵngDeclareClassMetadata({
2083
2104
  required: true
2084
2105
  }]
2085
2106
  }],
2107
+ submitLabel: [{
2108
+ type: i0.Input,
2109
+ args: [{
2110
+ isSignal: true,
2111
+ alias: "submitLabel",
2112
+ required: false
2113
+ }]
2114
+ }],
2115
+ clearLabel: [{
2116
+ type: i0.Input,
2117
+ args: [{
2118
+ isSignal: true,
2119
+ alias: "clearLabel",
2120
+ required: false
2121
+ }]
2122
+ }],
2086
2123
  onFormSubmit: [{
2087
2124
  type: i0.Output,
2088
2125
  args: ["onFormSubmit"]
@@ -2206,6 +2243,6 @@ var FormConfigBuilder = class {
2206
2243
  function formConfig(schemaType) {
2207
2244
  return new FormConfigBuilder(schemaType);
2208
2245
  }
2209
- export { BusinessDateField, BusinessTimeField, CheckboxField, DynamicForm, FormConfigBuilder, FormFieldType, InstantDateTimeField, RadioField, SelectField, SliderField, TextField, TextareaField, ZonedDateTimeService, createEmptyEntity, defineSchema, formConfig, toSchema };
2246
+ export { BusinessDateField, BusinessTimeField, CheckboxField, DynamicForm, FormConfigBuilder, FormFieldType, InstantDateTimeField, NGX_FORMS_LOCALE, RadioField, SelectField, SliderField, TextField, TextareaField, ZonedDateTimeService, createEmptyEntity, defineSchema, formConfig, toSchema };
2210
2247
 
2211
2248
  //# sourceMappingURL=wiltech-labs-ngx-forms.mjs.map