@wiltech-labs/ngx-forms 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +372 -355
- package/fesm2022/wiltech-labs-ngx-forms.mjs +424 -51
- package/fesm2022/wiltech-labs-ngx-forms.mjs.map +1 -1
- package/package.json +2 -1
- package/types/wiltech-labs-ngx-forms.d.ts +65 -0
|
@@ -2,7 +2,7 @@ import * as i0 from "@angular/core";
|
|
|
2
2
|
import { ChangeDetectionStrategy, Component, Injectable, InjectionToken, computed, effect, inject, input, linkedSignal, output, signal, viewChildren } from "@angular/core";
|
|
3
3
|
import { MatButton } from "@angular/material/button";
|
|
4
4
|
import { FormField, disabled, email, max, maxLength, min, minLength, pattern, required, schema, validate } from "@angular/forms/signals";
|
|
5
|
-
import * as i1 from "@angular/material/form-field";
|
|
5
|
+
import * as i1$1 from "@angular/material/form-field";
|
|
6
6
|
import { MatError, MatFormFieldModule } from "@angular/material/form-field";
|
|
7
7
|
import * as i2 from "@angular/material/input";
|
|
8
8
|
import { MatInput, MatInputModule } from "@angular/material/input";
|
|
@@ -10,6 +10,11 @@ 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";
|
|
16
|
+
import * as i1 from "@angular/material/button-toggle";
|
|
17
|
+
import { MatButtonToggleModule } from "@angular/material/button-toggle";
|
|
13
18
|
import { MatSlider, MatSliderThumb } from "@angular/material/slider";
|
|
14
19
|
import { DateAdapter, MAT_DATE_FORMATS, MAT_NATIVE_DATE_FORMATS, NativeDateAdapter } from "@angular/material/core";
|
|
15
20
|
import * as i3$1 from "@angular/material/datepicker";
|
|
@@ -52,7 +57,7 @@ var TextField = class TextField {
|
|
|
52
57
|
}
|
|
53
58
|
},
|
|
54
59
|
ngImport: i0,
|
|
55
|
-
template: "<mat-form-field class=\"TextField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\
|
|
60
|
+
template: "<mat-form-field class=\"TextField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <input matInput [type]=\"fieldDef().type\" [formField]=\"formField()\" />\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of field()().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
|
|
56
61
|
styles: [":host{display:block}.TextField{width:100%}\n"],
|
|
57
62
|
dependencies: [
|
|
58
63
|
{
|
|
@@ -68,7 +73,7 @@ var TextField = class TextField {
|
|
|
68
73
|
},
|
|
69
74
|
{
|
|
70
75
|
kind: "component",
|
|
71
|
-
type: i1.MatFormField,
|
|
76
|
+
type: i1$1.MatFormField,
|
|
72
77
|
selector: "mat-form-field",
|
|
73
78
|
inputs: [
|
|
74
79
|
"hideRequiredMarker",
|
|
@@ -82,18 +87,18 @@ var TextField = class TextField {
|
|
|
82
87
|
},
|
|
83
88
|
{
|
|
84
89
|
kind: "directive",
|
|
85
|
-
type: i1.MatLabel,
|
|
90
|
+
type: i1$1.MatLabel,
|
|
86
91
|
selector: "mat-label"
|
|
87
92
|
},
|
|
88
93
|
{
|
|
89
94
|
kind: "directive",
|
|
90
|
-
type: i1.MatHint,
|
|
95
|
+
type: i1$1.MatHint,
|
|
91
96
|
selector: "mat-hint",
|
|
92
97
|
inputs: ["align", "id"]
|
|
93
98
|
},
|
|
94
99
|
{
|
|
95
100
|
kind: "directive",
|
|
96
|
-
type: i1.MatError,
|
|
101
|
+
type: i1$1.MatError,
|
|
97
102
|
selector: "mat-error, [matError]",
|
|
98
103
|
inputs: ["id"]
|
|
99
104
|
},
|
|
@@ -140,7 +145,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
140
145
|
MatInputModule
|
|
141
146
|
],
|
|
142
147
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
143
|
-
template: "<mat-form-field class=\"TextField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\
|
|
148
|
+
template: "<mat-form-field class=\"TextField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <input matInput [type]=\"fieldDef().type\" [formField]=\"formField()\" />\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of field()().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
|
|
144
149
|
styles: [":host{display:block}.TextField{width:100%}\n"]
|
|
145
150
|
}]
|
|
146
151
|
}],
|
|
@@ -174,6 +179,8 @@ var FormFieldType;
|
|
|
174
179
|
FormFieldType["NUMBER"] = "number";
|
|
175
180
|
FormFieldType["RANGE"] = "range";
|
|
176
181
|
FormFieldType["SELECT"] = "select";
|
|
182
|
+
FormFieldType["CHIPS"] = "chips";
|
|
183
|
+
FormFieldType["THEME"] = "theme";
|
|
177
184
|
FormFieldType["TEXTAREA"] = "textarea";
|
|
178
185
|
FormFieldType["CODE"] = "code";
|
|
179
186
|
FormFieldType["BUSINESS_DATE"] = "business-date";
|
|
@@ -227,7 +234,7 @@ var TextareaField = class TextareaField {
|
|
|
227
234
|
}
|
|
228
235
|
},
|
|
229
236
|
ngImport: i0,
|
|
230
|
-
template: "<mat-form-field class=\"TextareaField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\
|
|
237
|
+
template: "<mat-form-field class=\"TextareaField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <textarea\n matInput\n class=\"TextareaField-input\"\n [formField]=\"field()\"\n cdkTextareaAutosize\n [cdkAutosizeMinRows]=\"isCode() ? 8 : 4\"\n [class.is-code]=\"isCode()\"\n [attr.spellcheck]=\"isCode() ? 'false' : null\"\n (keydown)=\"onKeydown($event)\"\n ></textarea>\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of field()().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
|
|
231
238
|
styles: [":host{display:block}.TextareaField{width:100%}.TextareaField-input.is-code{font-family:ui-monospace,Cascadia Code,Consolas,monospace;font-size:.875rem;tab-size:2}\n"],
|
|
232
239
|
dependencies: [
|
|
233
240
|
{
|
|
@@ -243,7 +250,7 @@ var TextareaField = class TextareaField {
|
|
|
243
250
|
},
|
|
244
251
|
{
|
|
245
252
|
kind: "component",
|
|
246
|
-
type: i1.MatFormField,
|
|
253
|
+
type: i1$1.MatFormField,
|
|
247
254
|
selector: "mat-form-field",
|
|
248
255
|
inputs: [
|
|
249
256
|
"hideRequiredMarker",
|
|
@@ -257,18 +264,18 @@ var TextareaField = class TextareaField {
|
|
|
257
264
|
},
|
|
258
265
|
{
|
|
259
266
|
kind: "directive",
|
|
260
|
-
type: i1.MatLabel,
|
|
267
|
+
type: i1$1.MatLabel,
|
|
261
268
|
selector: "mat-label"
|
|
262
269
|
},
|
|
263
270
|
{
|
|
264
271
|
kind: "directive",
|
|
265
|
-
type: i1.MatHint,
|
|
272
|
+
type: i1$1.MatHint,
|
|
266
273
|
selector: "mat-hint",
|
|
267
274
|
inputs: ["align", "id"]
|
|
268
275
|
},
|
|
269
276
|
{
|
|
270
277
|
kind: "directive",
|
|
271
|
-
type: i1.MatError,
|
|
278
|
+
type: i1$1.MatError,
|
|
272
279
|
selector: "mat-error, [matError]",
|
|
273
280
|
inputs: ["id"]
|
|
274
281
|
},
|
|
@@ -327,7 +334,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
327
334
|
MatInputModule
|
|
328
335
|
],
|
|
329
336
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
330
|
-
template: "<mat-form-field class=\"TextareaField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\
|
|
337
|
+
template: "<mat-form-field class=\"TextareaField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <textarea\n matInput\n class=\"TextareaField-input\"\n [formField]=\"field()\"\n cdkTextareaAutosize\n [cdkAutosizeMinRows]=\"isCode() ? 8 : 4\"\n [class.is-code]=\"isCode()\"\n [attr.spellcheck]=\"isCode() ? 'false' : null\"\n (keydown)=\"onKeydown($event)\"\n ></textarea>\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of field()().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
|
|
331
338
|
styles: [":host{display:block}.TextareaField{width:100%}.TextareaField-input.is-code{font-family:ui-monospace,Cascadia Code,Consolas,monospace;font-size:.875rem;tab-size:2}\n"]
|
|
332
339
|
}]
|
|
333
340
|
}],
|
|
@@ -392,7 +399,7 @@ var FieldSubscript = class FieldSubscript {
|
|
|
392
399
|
}
|
|
393
400
|
},
|
|
394
401
|
ngImport: i0,
|
|
395
|
-
template: "@let state = field()();\
|
|
402
|
+
template: "@let state = field()();\n@if (state.touched() && state.invalid()) {\n @for (error of errors(); track error.kind) {\n <mat-error class=\"FieldSubscript-error\">{{ error.message ?? error.kind }}</mat-error>\n }\n} @else if (hint()) {\n <div class=\"FieldSubscript-hint\">{{ hint() }}</div>\n}\n",
|
|
396
403
|
styles: [":host{display:block}.FieldSubscript-hint{margin-top:4px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-small);letter-spacing:var(--mat-sys-body-small-tracking)}.FieldSubscript-error{display:block;margin-top:4px;font:var(--mat-sys-body-small);letter-spacing:var(--mat-sys-body-small-tracking)}\n"],
|
|
397
404
|
dependencies: [{
|
|
398
405
|
kind: "directive",
|
|
@@ -415,7 +422,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
415
422
|
standalone: true,
|
|
416
423
|
imports: [MatError],
|
|
417
424
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
418
|
-
template: "@let state = field()();\
|
|
425
|
+
template: "@let state = field()();\n@if (state.touched() && state.invalid()) {\n @for (error of errors(); track error.kind) {\n <mat-error class=\"FieldSubscript-error\">{{ error.message ?? error.kind }}</mat-error>\n }\n} @else if (hint()) {\n <div class=\"FieldSubscript-hint\">{{ hint() }}</div>\n}\n",
|
|
419
426
|
styles: [":host{display:block}.FieldSubscript-hint{margin-top:4px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-small);letter-spacing:var(--mat-sys-body-small-tracking)}.FieldSubscript-error{display:block;margin-top:4px;font:var(--mat-sys-body-small);letter-spacing:var(--mat-sys-body-small-tracking)}\n"]
|
|
420
427
|
}]
|
|
421
428
|
}],
|
|
@@ -472,7 +479,7 @@ var CheckboxField = class CheckboxField {
|
|
|
472
479
|
}
|
|
473
480
|
},
|
|
474
481
|
ngImport: i0,
|
|
475
|
-
template: "<mat-checkbox [formField]=\"field()\">\
|
|
482
|
+
template: "<mat-checkbox [formField]=\"field()\">\n {{ fieldDef().label }}\n @if (field()().required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n</mat-checkbox>\n<ngx-field-subscript class=\"CheckboxField-subscript\" [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
|
|
476
483
|
styles: [":host{display:block}.CheckboxField-subscript{padding-inline-start:40px;margin-top:-4px}\n"],
|
|
477
484
|
dependencies: [
|
|
478
485
|
{
|
|
@@ -535,7 +542,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
535
542
|
FieldSubscript
|
|
536
543
|
],
|
|
537
544
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
538
|
-
template: "<mat-checkbox [formField]=\"field()\">\
|
|
545
|
+
template: "<mat-checkbox [formField]=\"field()\">\n {{ fieldDef().label }}\n @if (field()().required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n</mat-checkbox>\n<ngx-field-subscript class=\"CheckboxField-subscript\" [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
|
|
539
546
|
styles: [":host{display:block}.CheckboxField-subscript{padding-inline-start:40px;margin-top:-4px}\n"]
|
|
540
547
|
}]
|
|
541
548
|
}],
|
|
@@ -558,11 +565,11 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
558
565
|
}]
|
|
559
566
|
}
|
|
560
567
|
});
|
|
561
|
-
let nextId$
|
|
568
|
+
let nextId$2 = 0;
|
|
562
569
|
var RadioField = class RadioField {
|
|
563
570
|
fieldDef = input.required(...ngDevMode ? [{ debugName: "fieldDef" }] : /* istanbul ignore next */ []);
|
|
564
571
|
field = input.required(...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
|
|
565
|
-
labelId = `radio-field-label-${nextId$
|
|
572
|
+
labelId = `radio-field-label-${nextId$2++}`;
|
|
566
573
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
567
574
|
minVersion: "12.0.0",
|
|
568
575
|
version: "22.2.0",
|
|
@@ -594,7 +601,7 @@ var RadioField = class RadioField {
|
|
|
594
601
|
}
|
|
595
602
|
},
|
|
596
603
|
ngImport: i0,
|
|
597
|
-
template: "<div class=\"RadioField-label\" [id]=\"labelId\">\
|
|
604
|
+
template: "<div class=\"RadioField-label\" [id]=\"labelId\">\n {{ fieldDef().label }}\n @if (field()().required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n</div>\n<mat-radio-group\n class=\"RadioField-group\"\n [class.is-vertical]=\"fieldDef().orientation === 'vertical'\"\n [attr.aria-orientation]=\"fieldDef().orientation ?? 'horizontal'\"\n [formField]=\"field()\"\n [attr.aria-labelledby]=\"labelId\"\n>\n @for (option of fieldDef().options ?? []; track option.value) {\n <mat-radio-button [value]=\"option.value\">{{ option.label }}</mat-radio-button>\n }\n</mat-radio-group>\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
|
|
598
605
|
styles: [":host{display:block}.RadioField-label{color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium);letter-spacing:var(--mat-sys-body-medium-tracking);margin-bottom:0}.RadioField-group{display:flex;flex-wrap:wrap;column-gap:8px}.RadioField-group.is-vertical{flex-direction:column;flex-wrap:nowrap;align-items:flex-start}\n"],
|
|
599
606
|
dependencies: [
|
|
600
607
|
{
|
|
@@ -671,7 +678,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
671
678
|
FieldSubscript
|
|
672
679
|
],
|
|
673
680
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
674
|
-
template: "<div class=\"RadioField-label\" [id]=\"labelId\">\
|
|
681
|
+
template: "<div class=\"RadioField-label\" [id]=\"labelId\">\n {{ fieldDef().label }}\n @if (field()().required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n</div>\n<mat-radio-group\n class=\"RadioField-group\"\n [class.is-vertical]=\"fieldDef().orientation === 'vertical'\"\n [attr.aria-orientation]=\"fieldDef().orientation ?? 'horizontal'\"\n [formField]=\"field()\"\n [attr.aria-labelledby]=\"labelId\"\n>\n @for (option of fieldDef().options ?? []; track option.value) {\n <mat-radio-button [value]=\"option.value\">{{ option.label }}</mat-radio-button>\n }\n</mat-radio-group>\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
|
|
675
682
|
styles: [":host{display:block}.RadioField-label{color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium);letter-spacing:var(--mat-sys-body-medium-tracking);margin-bottom:0}.RadioField-group{display:flex;flex-wrap:wrap;column-gap:8px}.RadioField-group.is-vertical{flex-direction:column;flex-wrap:nowrap;align-items:flex-start}\n"]
|
|
676
683
|
}]
|
|
677
684
|
}],
|
|
@@ -728,7 +735,7 @@ var SelectField = class SelectField {
|
|
|
728
735
|
}
|
|
729
736
|
},
|
|
730
737
|
ngImport: i0,
|
|
731
|
-
template: "<mat-form-field class=\"SelectField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\
|
|
738
|
+
template: "<mat-form-field class=\"SelectField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <mat-select [formField]=\"field()\">\n @for (option of fieldDef().options ?? []; track option.value) {\n <mat-option [value]=\"option.value\">{{ option.label }}</mat-option>\n }\n </mat-select>\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of field()().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
|
|
732
739
|
styles: [":host{display:block}.SelectField{width:100%}\n"],
|
|
733
740
|
dependencies: [
|
|
734
741
|
{
|
|
@@ -744,7 +751,7 @@ var SelectField = class SelectField {
|
|
|
744
751
|
},
|
|
745
752
|
{
|
|
746
753
|
kind: "component",
|
|
747
|
-
type: i1.MatFormField,
|
|
754
|
+
type: i1$1.MatFormField,
|
|
748
755
|
selector: "mat-form-field",
|
|
749
756
|
inputs: [
|
|
750
757
|
"hideRequiredMarker",
|
|
@@ -758,18 +765,18 @@ var SelectField = class SelectField {
|
|
|
758
765
|
},
|
|
759
766
|
{
|
|
760
767
|
kind: "directive",
|
|
761
|
-
type: i1.MatLabel,
|
|
768
|
+
type: i1$1.MatLabel,
|
|
762
769
|
selector: "mat-label"
|
|
763
770
|
},
|
|
764
771
|
{
|
|
765
772
|
kind: "directive",
|
|
766
|
-
type: i1.MatHint,
|
|
773
|
+
type: i1$1.MatHint,
|
|
767
774
|
selector: "mat-hint",
|
|
768
775
|
inputs: ["align", "id"]
|
|
769
776
|
},
|
|
770
777
|
{
|
|
771
778
|
kind: "directive",
|
|
772
|
-
type: i1.MatError,
|
|
779
|
+
type: i1$1.MatError,
|
|
773
780
|
selector: "mat-error, [matError]",
|
|
774
781
|
inputs: ["id"]
|
|
775
782
|
},
|
|
@@ -841,7 +848,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
841
848
|
MatOption
|
|
842
849
|
],
|
|
843
850
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
844
|
-
template: "<mat-form-field class=\"SelectField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\
|
|
851
|
+
template: "<mat-form-field class=\"SelectField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <mat-select [formField]=\"field()\">\n @for (option of fieldDef().options ?? []; track option.value) {\n <mat-option [value]=\"option.value\">{{ option.label }}</mat-option>\n }\n </mat-select>\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of field()().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
|
|
845
852
|
styles: [":host{display:block}.SelectField{width:100%}\n"]
|
|
846
853
|
}]
|
|
847
854
|
}],
|
|
@@ -864,6 +871,349 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
864
871
|
}]
|
|
865
872
|
}
|
|
866
873
|
});
|
|
874
|
+
var ChipsField = class ChipsField {
|
|
875
|
+
fieldDef = input.required(...ngDevMode ? [{ debugName: "fieldDef" }] : /* istanbul ignore next */ []);
|
|
876
|
+
field = input.required(...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
|
|
877
|
+
announcer = inject(LiveAnnouncer);
|
|
878
|
+
state = computed(() => this.field()(), ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
|
|
879
|
+
chips = computed(() => this.state().value() ?? [], ...ngDevMode ? [{ debugName: "chips" }] : /* istanbul ignore next */ []);
|
|
880
|
+
addChip(event) {
|
|
881
|
+
const value = (event.value || "").trim();
|
|
882
|
+
if (value) {
|
|
883
|
+
this.state().value.update((chips) => [...chips, value]);
|
|
884
|
+
this.announcer.announce(`Added ${value}`);
|
|
885
|
+
}
|
|
886
|
+
event.chipInput.clear();
|
|
887
|
+
}
|
|
888
|
+
removeChip(chip) {
|
|
889
|
+
this.state().value.update((chips) => chips.filter((existing) => existing !== chip));
|
|
890
|
+
this.announcer.announce(`Removed ${chip}`);
|
|
891
|
+
}
|
|
892
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
893
|
+
minVersion: "12.0.0",
|
|
894
|
+
version: "22.2.0",
|
|
895
|
+
ngImport: i0,
|
|
896
|
+
type: ChipsField,
|
|
897
|
+
deps: [],
|
|
898
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
899
|
+
});
|
|
900
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
901
|
+
minVersion: "17.0.0",
|
|
902
|
+
version: "22.2.0",
|
|
903
|
+
type: ChipsField,
|
|
904
|
+
isStandalone: true,
|
|
905
|
+
selector: "ngx-chips-field",
|
|
906
|
+
inputs: {
|
|
907
|
+
fieldDef: {
|
|
908
|
+
classPropertyName: "fieldDef",
|
|
909
|
+
publicName: "fieldDef",
|
|
910
|
+
isSignal: true,
|
|
911
|
+
isRequired: true,
|
|
912
|
+
transformFunction: null
|
|
913
|
+
},
|
|
914
|
+
field: {
|
|
915
|
+
classPropertyName: "field",
|
|
916
|
+
publicName: "field",
|
|
917
|
+
isSignal: true,
|
|
918
|
+
isRequired: true,
|
|
919
|
+
transformFunction: null
|
|
920
|
+
}
|
|
921
|
+
},
|
|
922
|
+
ngImport: i0,
|
|
923
|
+
template: "<mat-form-field class=\"ChipsField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n\n <mat-chip-grid #grid [attr.aria-label]=\"fieldDef().label + ' entries'\">\n @for (chip of chips(); track chip) {\n <mat-chip-row (removed)=\"removeChip(chip)\">\n {{ chip }}\n <button matChipRemove [attr.aria-label]=\"'Remove ' + chip\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n </mat-chip-grid>\n\n <input\n [matChipInputFor]=\"grid\"\n [placeholder]=\"'Add ' + fieldDef().label\"\n [disabled]=\"state().disabled()\"\n (blur)=\"state().markAsTouched()\"\n (matChipInputTokenEnd)=\"addChip($event)\"\n />\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of state().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
|
|
924
|
+
styles: [":host{display:block}.ChipsField{width:100%}\n"],
|
|
925
|
+
dependencies: [
|
|
926
|
+
{
|
|
927
|
+
kind: "ngmodule",
|
|
928
|
+
type: MatFormFieldModule
|
|
929
|
+
},
|
|
930
|
+
{
|
|
931
|
+
kind: "component",
|
|
932
|
+
type: i1$1.MatFormField,
|
|
933
|
+
selector: "mat-form-field",
|
|
934
|
+
inputs: [
|
|
935
|
+
"hideRequiredMarker",
|
|
936
|
+
"color",
|
|
937
|
+
"floatLabel",
|
|
938
|
+
"appearance",
|
|
939
|
+
"subscriptSizing",
|
|
940
|
+
"hintLabel"
|
|
941
|
+
],
|
|
942
|
+
exportAs: ["matFormField"]
|
|
943
|
+
},
|
|
944
|
+
{
|
|
945
|
+
kind: "directive",
|
|
946
|
+
type: i1$1.MatLabel,
|
|
947
|
+
selector: "mat-label"
|
|
948
|
+
},
|
|
949
|
+
{
|
|
950
|
+
kind: "directive",
|
|
951
|
+
type: i1$1.MatHint,
|
|
952
|
+
selector: "mat-hint",
|
|
953
|
+
inputs: ["align", "id"]
|
|
954
|
+
},
|
|
955
|
+
{
|
|
956
|
+
kind: "directive",
|
|
957
|
+
type: i1$1.MatError,
|
|
958
|
+
selector: "mat-error, [matError]",
|
|
959
|
+
inputs: ["id"]
|
|
960
|
+
},
|
|
961
|
+
{
|
|
962
|
+
kind: "component",
|
|
963
|
+
type: MatChipGrid,
|
|
964
|
+
selector: "mat-chip-grid",
|
|
965
|
+
inputs: [
|
|
966
|
+
"disabled",
|
|
967
|
+
"placeholder",
|
|
968
|
+
"required",
|
|
969
|
+
"value",
|
|
970
|
+
"errorStateMatcher"
|
|
971
|
+
],
|
|
972
|
+
outputs: ["change", "valueChange"]
|
|
973
|
+
},
|
|
974
|
+
{
|
|
975
|
+
kind: "component",
|
|
976
|
+
type: MatChipRow,
|
|
977
|
+
selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]",
|
|
978
|
+
inputs: ["editable"],
|
|
979
|
+
outputs: ["edited"]
|
|
980
|
+
},
|
|
981
|
+
{
|
|
982
|
+
kind: "directive",
|
|
983
|
+
type: MatChipRemove,
|
|
984
|
+
selector: "[matChipRemove]"
|
|
985
|
+
},
|
|
986
|
+
{
|
|
987
|
+
kind: "directive",
|
|
988
|
+
type: MatChipInput,
|
|
989
|
+
selector: "input[matChipInputFor]",
|
|
990
|
+
inputs: [
|
|
991
|
+
"matChipInputFor",
|
|
992
|
+
"matChipInputAddOnBlur",
|
|
993
|
+
"matChipInputSeparatorKeyCodes",
|
|
994
|
+
"placeholder",
|
|
995
|
+
"id",
|
|
996
|
+
"disabled",
|
|
997
|
+
"readonly",
|
|
998
|
+
"matChipInputDisabledInteractive"
|
|
999
|
+
],
|
|
1000
|
+
outputs: ["matChipInputTokenEnd"],
|
|
1001
|
+
exportAs: ["matChipInput", "matChipInputFor"]
|
|
1002
|
+
},
|
|
1003
|
+
{
|
|
1004
|
+
kind: "component",
|
|
1005
|
+
type: MatIcon,
|
|
1006
|
+
selector: "mat-icon",
|
|
1007
|
+
inputs: [
|
|
1008
|
+
"color",
|
|
1009
|
+
"inline",
|
|
1010
|
+
"svgIcon",
|
|
1011
|
+
"fontSet",
|
|
1012
|
+
"fontIcon"
|
|
1013
|
+
],
|
|
1014
|
+
exportAs: ["matIcon"]
|
|
1015
|
+
}
|
|
1016
|
+
],
|
|
1017
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
1018
|
+
});
|
|
1019
|
+
};
|
|
1020
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
1021
|
+
minVersion: "12.0.0",
|
|
1022
|
+
version: "22.2.0",
|
|
1023
|
+
ngImport: i0,
|
|
1024
|
+
type: ChipsField,
|
|
1025
|
+
decorators: [{
|
|
1026
|
+
type: Component,
|
|
1027
|
+
args: [{
|
|
1028
|
+
selector: "ngx-chips-field",
|
|
1029
|
+
standalone: true,
|
|
1030
|
+
imports: [
|
|
1031
|
+
MatFormFieldModule,
|
|
1032
|
+
MatChipGrid,
|
|
1033
|
+
MatChipRow,
|
|
1034
|
+
MatChipRemove,
|
|
1035
|
+
MatChipInput,
|
|
1036
|
+
MatIcon
|
|
1037
|
+
],
|
|
1038
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1039
|
+
template: "<mat-form-field class=\"ChipsField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n\n <mat-chip-grid #grid [attr.aria-label]=\"fieldDef().label + ' entries'\">\n @for (chip of chips(); track chip) {\n <mat-chip-row (removed)=\"removeChip(chip)\">\n {{ chip }}\n <button matChipRemove [attr.aria-label]=\"'Remove ' + chip\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n </mat-chip-grid>\n\n <input\n [matChipInputFor]=\"grid\"\n [placeholder]=\"'Add ' + fieldDef().label\"\n [disabled]=\"state().disabled()\"\n (blur)=\"state().markAsTouched()\"\n (matChipInputTokenEnd)=\"addChip($event)\"\n />\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of state().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
|
|
1040
|
+
styles: [":host{display:block}.ChipsField{width:100%}\n"]
|
|
1041
|
+
}]
|
|
1042
|
+
}],
|
|
1043
|
+
propDecorators: {
|
|
1044
|
+
fieldDef: [{
|
|
1045
|
+
type: i0.Input,
|
|
1046
|
+
args: [{
|
|
1047
|
+
isSignal: true,
|
|
1048
|
+
alias: "fieldDef",
|
|
1049
|
+
required: true
|
|
1050
|
+
}]
|
|
1051
|
+
}],
|
|
1052
|
+
field: [{
|
|
1053
|
+
type: i0.Input,
|
|
1054
|
+
args: [{
|
|
1055
|
+
isSignal: true,
|
|
1056
|
+
alias: "field",
|
|
1057
|
+
required: true
|
|
1058
|
+
}]
|
|
1059
|
+
}]
|
|
1060
|
+
}
|
|
1061
|
+
});
|
|
1062
|
+
let nextId$1 = 0;
|
|
1063
|
+
const DEFAULT_LIGHT_LABEL = "Light";
|
|
1064
|
+
const DEFAULT_DARK_LABEL = "Dark";
|
|
1065
|
+
var ThemeField = class ThemeField {
|
|
1066
|
+
fieldDef = input.required(...ngDevMode ? [{ debugName: "fieldDef" }] : /* istanbul ignore next */ []);
|
|
1067
|
+
field = input.required(...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
|
|
1068
|
+
lightLabel = computed(() => this.fieldDef().options?.find((option) => option.value === "light")?.label ?? DEFAULT_LIGHT_LABEL, ...ngDevMode ? [{ debugName: "lightLabel" }] : /* istanbul ignore next */ []);
|
|
1069
|
+
darkLabel = computed(() => this.fieldDef().options?.find((option) => option.value === "dark")?.label ?? DEFAULT_DARK_LABEL, ...ngDevMode ? [{ debugName: "darkLabel" }] : /* istanbul ignore next */ []);
|
|
1070
|
+
labelId = `theme-field-label-${nextId$1++}`;
|
|
1071
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
1072
|
+
minVersion: "12.0.0",
|
|
1073
|
+
version: "22.2.0",
|
|
1074
|
+
ngImport: i0,
|
|
1075
|
+
type: ThemeField,
|
|
1076
|
+
deps: [],
|
|
1077
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
1078
|
+
});
|
|
1079
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
1080
|
+
minVersion: "17.0.0",
|
|
1081
|
+
version: "22.2.0",
|
|
1082
|
+
type: ThemeField,
|
|
1083
|
+
isStandalone: true,
|
|
1084
|
+
selector: "ngx-theme-field",
|
|
1085
|
+
inputs: {
|
|
1086
|
+
fieldDef: {
|
|
1087
|
+
classPropertyName: "fieldDef",
|
|
1088
|
+
publicName: "fieldDef",
|
|
1089
|
+
isSignal: true,
|
|
1090
|
+
isRequired: true,
|
|
1091
|
+
transformFunction: null
|
|
1092
|
+
},
|
|
1093
|
+
field: {
|
|
1094
|
+
classPropertyName: "field",
|
|
1095
|
+
publicName: "field",
|
|
1096
|
+
isSignal: true,
|
|
1097
|
+
isRequired: true,
|
|
1098
|
+
transformFunction: null
|
|
1099
|
+
}
|
|
1100
|
+
},
|
|
1101
|
+
ngImport: i0,
|
|
1102
|
+
template: "<div class=\"ThemeField-label\" [id]=\"labelId\">\n {{ fieldDef().label }}\n @if (field()().required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n</div>\n<mat-button-toggle-group\n class=\"ThemeField-group\"\n [formField]=\"field()\"\n [attr.aria-labelledby]=\"labelId\"\n>\n <mat-button-toggle value=\"light\" [attr.aria-label]=\"lightLabel()\">\n <mat-icon aria-hidden=\"true\">light_mode</mat-icon>\n </mat-button-toggle>\n <mat-button-toggle value=\"dark\" [attr.aria-label]=\"darkLabel()\">\n <mat-icon aria-hidden=\"true\">dark_mode</mat-icon>\n </mat-button-toggle>\n</mat-button-toggle-group>\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
|
|
1103
|
+
styles: [":host{display:block}.ThemeField-label{color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium);letter-spacing:var(--mat-sys-body-medium-tracking);margin-bottom:0}.ThemeField-group{display:flex;width:100%}.ThemeField-group mat-button-toggle{flex:1}\n"],
|
|
1104
|
+
dependencies: [
|
|
1105
|
+
{
|
|
1106
|
+
kind: "directive",
|
|
1107
|
+
type: FormField,
|
|
1108
|
+
selector: "[formField]",
|
|
1109
|
+
inputs: ["formField"],
|
|
1110
|
+
exportAs: ["formField"]
|
|
1111
|
+
},
|
|
1112
|
+
{
|
|
1113
|
+
kind: "ngmodule",
|
|
1114
|
+
type: MatButtonToggleModule
|
|
1115
|
+
},
|
|
1116
|
+
{
|
|
1117
|
+
kind: "directive",
|
|
1118
|
+
type: i1.MatButtonToggleGroup,
|
|
1119
|
+
selector: "mat-button-toggle-group",
|
|
1120
|
+
inputs: [
|
|
1121
|
+
"appearance",
|
|
1122
|
+
"name",
|
|
1123
|
+
"vertical",
|
|
1124
|
+
"value",
|
|
1125
|
+
"multiple",
|
|
1126
|
+
"disabled",
|
|
1127
|
+
"disabledInteractive",
|
|
1128
|
+
"hideSingleSelectionIndicator",
|
|
1129
|
+
"hideMultipleSelectionIndicator"
|
|
1130
|
+
],
|
|
1131
|
+
outputs: ["valueChange", "change"],
|
|
1132
|
+
exportAs: ["matButtonToggleGroup"]
|
|
1133
|
+
},
|
|
1134
|
+
{
|
|
1135
|
+
kind: "component",
|
|
1136
|
+
type: i1.MatButtonToggle,
|
|
1137
|
+
selector: "mat-button-toggle",
|
|
1138
|
+
inputs: [
|
|
1139
|
+
"aria-label",
|
|
1140
|
+
"aria-labelledby",
|
|
1141
|
+
"id",
|
|
1142
|
+
"name",
|
|
1143
|
+
"value",
|
|
1144
|
+
"tabIndex",
|
|
1145
|
+
"disableRipple",
|
|
1146
|
+
"appearance",
|
|
1147
|
+
"checked",
|
|
1148
|
+
"disabled",
|
|
1149
|
+
"disabledInteractive"
|
|
1150
|
+
],
|
|
1151
|
+
outputs: ["change"],
|
|
1152
|
+
exportAs: ["matButtonToggle"]
|
|
1153
|
+
},
|
|
1154
|
+
{
|
|
1155
|
+
kind: "component",
|
|
1156
|
+
type: MatIcon,
|
|
1157
|
+
selector: "mat-icon",
|
|
1158
|
+
inputs: [
|
|
1159
|
+
"color",
|
|
1160
|
+
"inline",
|
|
1161
|
+
"svgIcon",
|
|
1162
|
+
"fontSet",
|
|
1163
|
+
"fontIcon"
|
|
1164
|
+
],
|
|
1165
|
+
exportAs: ["matIcon"]
|
|
1166
|
+
},
|
|
1167
|
+
{
|
|
1168
|
+
kind: "component",
|
|
1169
|
+
type: FieldSubscript,
|
|
1170
|
+
selector: "ngx-field-subscript",
|
|
1171
|
+
inputs: ["field", "hint"]
|
|
1172
|
+
}
|
|
1173
|
+
],
|
|
1174
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
1175
|
+
});
|
|
1176
|
+
};
|
|
1177
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
1178
|
+
minVersion: "12.0.0",
|
|
1179
|
+
version: "22.2.0",
|
|
1180
|
+
ngImport: i0,
|
|
1181
|
+
type: ThemeField,
|
|
1182
|
+
decorators: [{
|
|
1183
|
+
type: Component,
|
|
1184
|
+
args: [{
|
|
1185
|
+
selector: "ngx-theme-field",
|
|
1186
|
+
standalone: true,
|
|
1187
|
+
imports: [
|
|
1188
|
+
FormField,
|
|
1189
|
+
MatButtonToggleModule,
|
|
1190
|
+
MatIcon,
|
|
1191
|
+
FieldSubscript
|
|
1192
|
+
],
|
|
1193
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1194
|
+
template: "<div class=\"ThemeField-label\" [id]=\"labelId\">\n {{ fieldDef().label }}\n @if (field()().required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n</div>\n<mat-button-toggle-group\n class=\"ThemeField-group\"\n [formField]=\"field()\"\n [attr.aria-labelledby]=\"labelId\"\n>\n <mat-button-toggle value=\"light\" [attr.aria-label]=\"lightLabel()\">\n <mat-icon aria-hidden=\"true\">light_mode</mat-icon>\n </mat-button-toggle>\n <mat-button-toggle value=\"dark\" [attr.aria-label]=\"darkLabel()\">\n <mat-icon aria-hidden=\"true\">dark_mode</mat-icon>\n </mat-button-toggle>\n</mat-button-toggle-group>\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
|
|
1195
|
+
styles: [":host{display:block}.ThemeField-label{color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium);letter-spacing:var(--mat-sys-body-medium-tracking);margin-bottom:0}.ThemeField-group{display:flex;width:100%}.ThemeField-group mat-button-toggle{flex:1}\n"]
|
|
1196
|
+
}]
|
|
1197
|
+
}],
|
|
1198
|
+
propDecorators: {
|
|
1199
|
+
fieldDef: [{
|
|
1200
|
+
type: i0.Input,
|
|
1201
|
+
args: [{
|
|
1202
|
+
isSignal: true,
|
|
1203
|
+
alias: "fieldDef",
|
|
1204
|
+
required: true
|
|
1205
|
+
}]
|
|
1206
|
+
}],
|
|
1207
|
+
field: [{
|
|
1208
|
+
type: i0.Input,
|
|
1209
|
+
args: [{
|
|
1210
|
+
isSignal: true,
|
|
1211
|
+
alias: "field",
|
|
1212
|
+
required: true
|
|
1213
|
+
}]
|
|
1214
|
+
}]
|
|
1215
|
+
}
|
|
1216
|
+
});
|
|
867
1217
|
let nextId = 0;
|
|
868
1218
|
var SliderField = class SliderField {
|
|
869
1219
|
fieldDef = input.required(...ngDevMode ? [{ debugName: "fieldDef" }] : /* istanbul ignore next */ []);
|
|
@@ -900,7 +1250,7 @@ var SliderField = class SliderField {
|
|
|
900
1250
|
}
|
|
901
1251
|
},
|
|
902
1252
|
ngImport: i0,
|
|
903
|
-
template: "<div class=\"SliderField-label\">\
|
|
1253
|
+
template: "<div class=\"SliderField-label\">\n <span [id]=\"labelId\">\n {{ fieldDef().label }}\n @if (field()().required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n </span>\n <span class=\"SliderField-value\">{{ field()().value() }}</span>\n</div>\n<mat-slider\n class=\"SliderField-slider\"\n discrete\n [min]=\"fieldDef().min ?? 0\"\n [max]=\"fieldDef().max ?? 100\"\n [step]=\"fieldDef().step ?? 1\"\n>\n <input matSliderThumb [formField]=\"field()\" [attr.aria-labelledby]=\"labelId\" />\n</mat-slider>\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
|
|
904
1254
|
styles: [":host{display:block}.SliderField-label{color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium);letter-spacing:var(--mat-sys-body-medium-tracking);display:flex;justify-content:space-between;align-items:baseline;margin-bottom:0}.SliderField-value{color:var(--mat-sys-primary);font:var(--mat-sys-label-large);letter-spacing:var(--mat-sys-label-large-tracking)}.SliderField-slider{display:block;width:100%;margin:0}\n"],
|
|
905
1255
|
dependencies: [
|
|
906
1256
|
{
|
|
@@ -966,7 +1316,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
966
1316
|
FieldSubscript
|
|
967
1317
|
],
|
|
968
1318
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
969
|
-
template: "<div class=\"SliderField-label\">\
|
|
1319
|
+
template: "<div class=\"SliderField-label\">\n <span [id]=\"labelId\">\n {{ fieldDef().label }}\n @if (field()().required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n </span>\n <span class=\"SliderField-value\">{{ field()().value() }}</span>\n</div>\n<mat-slider\n class=\"SliderField-slider\"\n discrete\n [min]=\"fieldDef().min ?? 0\"\n [max]=\"fieldDef().max ?? 100\"\n [step]=\"fieldDef().step ?? 1\"\n>\n <input matSliderThumb [formField]=\"field()\" [attr.aria-labelledby]=\"labelId\" />\n</mat-slider>\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
|
|
970
1320
|
styles: [":host{display:block}.SliderField-label{color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium);letter-spacing:var(--mat-sys-body-medium-tracking);display:flex;justify-content:space-between;align-items:baseline;margin-bottom:0}.SliderField-value{color:var(--mat-sys-primary);font:var(--mat-sys-label-large);letter-spacing:var(--mat-sys-label-large-tracking)}.SliderField-slider{display:block;width:100%;margin:0}\n"]
|
|
971
1321
|
}]
|
|
972
1322
|
}],
|
|
@@ -1172,7 +1522,7 @@ var BusinessDateField = class BusinessDateField {
|
|
|
1172
1522
|
isSignal: true
|
|
1173
1523
|
}],
|
|
1174
1524
|
ngImport: i0,
|
|
1175
|
-
template: "<mat-form-field class=\"BusinessDateField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\
|
|
1525
|
+
template: "<mat-form-field class=\"BusinessDateField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <input\n matInput\n [matDatepicker]=\"datepicker\"\n [value]=\"date()\"\n [min]=\"minDate()\"\n [max]=\"maxDate()\"\n [required]=\"state().required()\"\n [disabled]=\"state().disabled()\"\n (blur)=\"state().markAsTouched()\"\n (dateChange)=\"onDateChange($event.value)\"\n />\n <mat-datepicker-toggle matIconSuffix [for]=\"datepicker\" />\n <mat-datepicker #datepicker (closed)=\"state().markAsTouched()\" />\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of state().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
|
|
1176
1526
|
styles: [":host{display:block}.BusinessDateField{width:100%}\n"],
|
|
1177
1527
|
dependencies: [
|
|
1178
1528
|
{
|
|
@@ -1181,7 +1531,7 @@ var BusinessDateField = class BusinessDateField {
|
|
|
1181
1531
|
},
|
|
1182
1532
|
{
|
|
1183
1533
|
kind: "component",
|
|
1184
|
-
type: i1.MatFormField,
|
|
1534
|
+
type: i1$1.MatFormField,
|
|
1185
1535
|
selector: "mat-form-field",
|
|
1186
1536
|
inputs: [
|
|
1187
1537
|
"hideRequiredMarker",
|
|
@@ -1195,24 +1545,24 @@ var BusinessDateField = class BusinessDateField {
|
|
|
1195
1545
|
},
|
|
1196
1546
|
{
|
|
1197
1547
|
kind: "directive",
|
|
1198
|
-
type: i1.MatLabel,
|
|
1548
|
+
type: i1$1.MatLabel,
|
|
1199
1549
|
selector: "mat-label"
|
|
1200
1550
|
},
|
|
1201
1551
|
{
|
|
1202
1552
|
kind: "directive",
|
|
1203
|
-
type: i1.MatHint,
|
|
1553
|
+
type: i1$1.MatHint,
|
|
1204
1554
|
selector: "mat-hint",
|
|
1205
1555
|
inputs: ["align", "id"]
|
|
1206
1556
|
},
|
|
1207
1557
|
{
|
|
1208
1558
|
kind: "directive",
|
|
1209
|
-
type: i1.MatError,
|
|
1559
|
+
type: i1$1.MatError,
|
|
1210
1560
|
selector: "mat-error, [matError]",
|
|
1211
1561
|
inputs: ["id"]
|
|
1212
1562
|
},
|
|
1213
1563
|
{
|
|
1214
1564
|
kind: "directive",
|
|
1215
|
-
type: i1.MatSuffix,
|
|
1565
|
+
type: i1$1.MatSuffix,
|
|
1216
1566
|
selector: "[matSuffix], [matIconSuffix], [matTextSuffix]",
|
|
1217
1567
|
inputs: ["matTextSuffix"]
|
|
1218
1568
|
},
|
|
@@ -1295,7 +1645,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1295
1645
|
],
|
|
1296
1646
|
providers: [provideLocaleDateAdapter()],
|
|
1297
1647
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1298
|
-
template: "<mat-form-field class=\"BusinessDateField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\
|
|
1648
|
+
template: "<mat-form-field class=\"BusinessDateField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <input\n matInput\n [matDatepicker]=\"datepicker\"\n [value]=\"date()\"\n [min]=\"minDate()\"\n [max]=\"maxDate()\"\n [required]=\"state().required()\"\n [disabled]=\"state().disabled()\"\n (blur)=\"state().markAsTouched()\"\n (dateChange)=\"onDateChange($event.value)\"\n />\n <mat-datepicker-toggle matIconSuffix [for]=\"datepicker\" />\n <mat-datepicker #datepicker (closed)=\"state().markAsTouched()\" />\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of state().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
|
|
1299
1649
|
styles: [":host{display:block}.BusinessDateField{width:100%}\n"]
|
|
1300
1650
|
}]
|
|
1301
1651
|
}],
|
|
@@ -1389,7 +1739,7 @@ var BusinessTimeField = class BusinessTimeField {
|
|
|
1389
1739
|
isSignal: true
|
|
1390
1740
|
}],
|
|
1391
1741
|
ngImport: i0,
|
|
1392
|
-
template: "<mat-form-field class=\"BusinessTimeField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\
|
|
1742
|
+
template: "<mat-form-field class=\"BusinessTimeField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <input\n matInput\n [matTimepicker]=\"timepicker\"\n [matTimepickerMin]=\"minTime()\"\n [matTimepickerMax]=\"maxTime()\"\n [value]=\"time()\"\n [required]=\"state().required()\"\n [disabled]=\"state().disabled()\"\n (blur)=\"state().markAsTouched()\"\n (valueChange)=\"onTimeChange($event)\"\n />\n <mat-timepicker-toggle matIconSuffix [for]=\"timepicker\" />\n <mat-timepicker #timepicker (closed)=\"state().markAsTouched()\" />\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of state().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
|
|
1393
1743
|
styles: [":host{display:block}.BusinessTimeField{width:100%}\n"],
|
|
1394
1744
|
dependencies: [
|
|
1395
1745
|
{
|
|
@@ -1398,7 +1748,7 @@ var BusinessTimeField = class BusinessTimeField {
|
|
|
1398
1748
|
},
|
|
1399
1749
|
{
|
|
1400
1750
|
kind: "component",
|
|
1401
|
-
type: i1.MatFormField,
|
|
1751
|
+
type: i1$1.MatFormField,
|
|
1402
1752
|
selector: "mat-form-field",
|
|
1403
1753
|
inputs: [
|
|
1404
1754
|
"hideRequiredMarker",
|
|
@@ -1412,24 +1762,24 @@ var BusinessTimeField = class BusinessTimeField {
|
|
|
1412
1762
|
},
|
|
1413
1763
|
{
|
|
1414
1764
|
kind: "directive",
|
|
1415
|
-
type: i1.MatLabel,
|
|
1765
|
+
type: i1$1.MatLabel,
|
|
1416
1766
|
selector: "mat-label"
|
|
1417
1767
|
},
|
|
1418
1768
|
{
|
|
1419
1769
|
kind: "directive",
|
|
1420
|
-
type: i1.MatHint,
|
|
1770
|
+
type: i1$1.MatHint,
|
|
1421
1771
|
selector: "mat-hint",
|
|
1422
1772
|
inputs: ["align", "id"]
|
|
1423
1773
|
},
|
|
1424
1774
|
{
|
|
1425
1775
|
kind: "directive",
|
|
1426
|
-
type: i1.MatError,
|
|
1776
|
+
type: i1$1.MatError,
|
|
1427
1777
|
selector: "mat-error, [matError]",
|
|
1428
1778
|
inputs: ["id"]
|
|
1429
1779
|
},
|
|
1430
1780
|
{
|
|
1431
1781
|
kind: "directive",
|
|
1432
|
-
type: i1.MatSuffix,
|
|
1782
|
+
type: i1$1.MatSuffix,
|
|
1433
1783
|
selector: "[matSuffix], [matIconSuffix], [matTextSuffix]",
|
|
1434
1784
|
inputs: ["matTextSuffix"]
|
|
1435
1785
|
},
|
|
@@ -1529,7 +1879,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1529
1879
|
],
|
|
1530
1880
|
providers: [provideLocaleDateAdapter()],
|
|
1531
1881
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1532
|
-
template: "<mat-form-field class=\"BusinessTimeField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\
|
|
1882
|
+
template: "<mat-form-field class=\"BusinessTimeField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <input\n matInput\n [matTimepicker]=\"timepicker\"\n [matTimepickerMin]=\"minTime()\"\n [matTimepickerMax]=\"maxTime()\"\n [value]=\"time()\"\n [required]=\"state().required()\"\n [disabled]=\"state().disabled()\"\n (blur)=\"state().markAsTouched()\"\n (valueChange)=\"onTimeChange($event)\"\n />\n <mat-timepicker-toggle matIconSuffix [for]=\"timepicker\" />\n <mat-timepicker #timepicker (closed)=\"state().markAsTouched()\" />\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of state().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
|
|
1533
1883
|
styles: [":host{display:block}.BusinessTimeField{width:100%}\n"]
|
|
1534
1884
|
}]
|
|
1535
1885
|
}],
|
|
@@ -1723,7 +2073,7 @@ var InstantDateTimeField = class InstantDateTimeField {
|
|
|
1723
2073
|
isSignal: true
|
|
1724
2074
|
}],
|
|
1725
2075
|
ngImport: i0,
|
|
1726
|
-
template: "<div class=\"InstantDateTimeField-label\">\
|
|
2076
|
+
template: "<div class=\"InstantDateTimeField-label\">\n {{ fieldDef().label }}\n @if (state().required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n</div>\n\n<div class=\"InstantDateTimeField-row\">\n <mat-form-field class=\"InstantDateTimeField-date\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>Date</mat-label>\n <input\n matInput\n [matDatepicker]=\"datepicker\"\n [value]=\"date()\"\n [min]=\"minDate()\"\n [max]=\"maxDate()\"\n [disabled]=\"state().disabled()\"\n (blur)=\"state().markAsTouched()\"\n (dateChange)=\"onDateChange($event.value)\"\n />\n <mat-datepicker-toggle matIconSuffix [for]=\"datepicker\" />\n <mat-datepicker #datepicker (closed)=\"state().markAsTouched()\" />\n </mat-form-field>\n\n <mat-form-field class=\"InstantDateTimeField-time\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>Time</mat-label>\n <input\n matInput\n [matTimepicker]=\"timepicker\"\n [value]=\"time()\"\n [disabled]=\"state().disabled()\"\n (blur)=\"state().markAsTouched()\"\n (valueChange)=\"onTimeChange($event)\"\n />\n <mat-timepicker-toggle matIconSuffix [for]=\"timepicker\" />\n <mat-timepicker #timepicker (closed)=\"state().markAsTouched()\" />\n </mat-form-field>\n</div>\n\n<div class=\"InstantDateTimeField-zone\">\n {{ timeZone() }}\n @if (offset()) {\n (UTC{{ offset() }})\n }\n @if (state().value()) {\n · stored as {{ state().value() }}\n }\n</div>\n\n@if (notice()) {\n <div class=\"InstantDateTimeField-notice\">{{ notice() }}</div>\n}\n\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
|
|
1727
2077
|
styles: [":host{display:block}.InstantDateTimeField-label{margin-bottom:6px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium);letter-spacing:var(--mat-sys-body-medium-tracking)}.InstantDateTimeField-row{display:flex;flex-direction:column;gap:8px;width:100%}@media(min-width:400px){.InstantDateTimeField-row{flex-direction:row}}.InstantDateTimeField-date{flex:3;min-width:0}.InstantDateTimeField-time{flex:2;min-width:0}.InstantDateTimeField-zone{margin-top:4px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-small);letter-spacing:var(--mat-sys-body-small-tracking)}.InstantDateTimeField-notice{margin-top:4px;color:var(--mat-sys-tertiary);font:var(--mat-sys-body-small);letter-spacing:var(--mat-sys-body-small-tracking)}\n"],
|
|
1728
2078
|
dependencies: [
|
|
1729
2079
|
{
|
|
@@ -1732,7 +2082,7 @@ var InstantDateTimeField = class InstantDateTimeField {
|
|
|
1732
2082
|
},
|
|
1733
2083
|
{
|
|
1734
2084
|
kind: "component",
|
|
1735
|
-
type: i1.MatFormField,
|
|
2085
|
+
type: i1$1.MatFormField,
|
|
1736
2086
|
selector: "mat-form-field",
|
|
1737
2087
|
inputs: [
|
|
1738
2088
|
"hideRequiredMarker",
|
|
@@ -1746,12 +2096,12 @@ var InstantDateTimeField = class InstantDateTimeField {
|
|
|
1746
2096
|
},
|
|
1747
2097
|
{
|
|
1748
2098
|
kind: "directive",
|
|
1749
|
-
type: i1.MatLabel,
|
|
2099
|
+
type: i1$1.MatLabel,
|
|
1750
2100
|
selector: "mat-label"
|
|
1751
2101
|
},
|
|
1752
2102
|
{
|
|
1753
2103
|
kind: "directive",
|
|
1754
|
-
type: i1.MatSuffix,
|
|
2104
|
+
type: i1$1.MatSuffix,
|
|
1755
2105
|
selector: "[matSuffix], [matIconSuffix], [matTextSuffix]",
|
|
1756
2106
|
inputs: ["matTextSuffix"]
|
|
1757
2107
|
},
|
|
@@ -1894,7 +2244,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1894
2244
|
],
|
|
1895
2245
|
providers: [provideLocaleDateAdapter()],
|
|
1896
2246
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1897
|
-
template: "<div class=\"InstantDateTimeField-label\">\
|
|
2247
|
+
template: "<div class=\"InstantDateTimeField-label\">\n {{ fieldDef().label }}\n @if (state().required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n</div>\n\n<div class=\"InstantDateTimeField-row\">\n <mat-form-field class=\"InstantDateTimeField-date\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>Date</mat-label>\n <input\n matInput\n [matDatepicker]=\"datepicker\"\n [value]=\"date()\"\n [min]=\"minDate()\"\n [max]=\"maxDate()\"\n [disabled]=\"state().disabled()\"\n (blur)=\"state().markAsTouched()\"\n (dateChange)=\"onDateChange($event.value)\"\n />\n <mat-datepicker-toggle matIconSuffix [for]=\"datepicker\" />\n <mat-datepicker #datepicker (closed)=\"state().markAsTouched()\" />\n </mat-form-field>\n\n <mat-form-field class=\"InstantDateTimeField-time\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>Time</mat-label>\n <input\n matInput\n [matTimepicker]=\"timepicker\"\n [value]=\"time()\"\n [disabled]=\"state().disabled()\"\n (blur)=\"state().markAsTouched()\"\n (valueChange)=\"onTimeChange($event)\"\n />\n <mat-timepicker-toggle matIconSuffix [for]=\"timepicker\" />\n <mat-timepicker #timepicker (closed)=\"state().markAsTouched()\" />\n </mat-form-field>\n</div>\n\n<div class=\"InstantDateTimeField-zone\">\n {{ timeZone() }}\n @if (offset()) {\n (UTC{{ offset() }})\n }\n @if (state().value()) {\n · stored as {{ state().value() }}\n }\n</div>\n\n@if (notice()) {\n <div class=\"InstantDateTimeField-notice\">{{ notice() }}</div>\n}\n\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
|
|
1898
2248
|
styles: [":host{display:block}.InstantDateTimeField-label{margin-bottom:6px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium);letter-spacing:var(--mat-sys-body-medium-tracking)}.InstantDateTimeField-row{display:flex;flex-direction:column;gap:8px;width:100%}@media(min-width:400px){.InstantDateTimeField-row{flex-direction:row}}.InstantDateTimeField-date{flex:3;min-width:0}.InstantDateTimeField-time{flex:2;min-width:0}.InstantDateTimeField-zone{margin-top:4px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-small);letter-spacing:var(--mat-sys-body-small-tracking)}.InstantDateTimeField-notice{margin-top:4px;color:var(--mat-sys-tertiary);font:var(--mat-sys-body-small);letter-spacing:var(--mat-sys-body-small-tracking)}\n"]
|
|
1899
2249
|
}]
|
|
1900
2250
|
}],
|
|
@@ -1992,7 +2342,7 @@ var DynamicForm = class DynamicForm {
|
|
|
1992
2342
|
onFormClear: "onFormClear"
|
|
1993
2343
|
},
|
|
1994
2344
|
ngImport: i0,
|
|
1995
|
-
template: "<div class=\"DynamicForm\">\
|
|
2345
|
+
template: "<div class=\"DynamicForm\">\n @for (fieldDef of metaInfo(); track fieldDef.name) {\n @let field = $any(dynamicForm())[fieldDef.name];\n\n @if (!fieldDef.hidden) {\n <div class=\"DynamicForm-field\" [style.--ngx-field-max-width]=\"fieldDef.maxWidth\">\n @switch (fieldDef.type) {\n @case ('text') {\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('email') {\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('password') {\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('search') {\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('number') {\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('textarea') {\n <ngx-textarea-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('code') {\n <ngx-textarea-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('checkbox') {\n <ngx-checkbox-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('radio') {\n <ngx-radio-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('select') {\n <ngx-select-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('chips') {\n <ngx-chips-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('theme') {\n <ngx-theme-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('range') {\n <ngx-slider-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('business-date') {\n <ngx-business-date-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('business-time') {\n <ngx-business-time-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('instant-date-time') {\n <ngx-instant-date-time-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n }\n </div>\n }\n }\n\n <div class=\"DynamicForm-actions\">\n <button matButton type=\"button\" (click)=\"clearForm()\">{{ clearLabel() }}</button>\n <button\n matButton=\"filled\"\n type=\"button\"\n [disabled]=\"dynamicForm()().invalid()\"\n (click)=\"handleSubmit()\"\n >\n {{ submitLabel() }}\n </button>\n </div>\n</div>\n",
|
|
1996
2346
|
styles: [".DynamicForm{display:flex;flex-direction:column;gap:16px;width:100%}.DynamicForm-field{display:flex;flex-direction:column;width:100%;max-width:var(--ngx-field-max-width, none)}.DynamicForm-actions{display:flex;justify-content:flex-end;gap:8px}\n"],
|
|
1997
2347
|
dependencies: [
|
|
1998
2348
|
{
|
|
@@ -2032,6 +2382,18 @@ var DynamicForm = class DynamicForm {
|
|
|
2032
2382
|
selector: "ngx-select-field",
|
|
2033
2383
|
inputs: ["fieldDef", "field"]
|
|
2034
2384
|
},
|
|
2385
|
+
{
|
|
2386
|
+
kind: "component",
|
|
2387
|
+
type: ChipsField,
|
|
2388
|
+
selector: "ngx-chips-field",
|
|
2389
|
+
inputs: ["fieldDef", "field"]
|
|
2390
|
+
},
|
|
2391
|
+
{
|
|
2392
|
+
kind: "component",
|
|
2393
|
+
type: ThemeField,
|
|
2394
|
+
selector: "ngx-theme-field",
|
|
2395
|
+
inputs: ["fieldDef", "field"]
|
|
2396
|
+
},
|
|
2035
2397
|
{
|
|
2036
2398
|
kind: "component",
|
|
2037
2399
|
type: SliderField,
|
|
@@ -2077,13 +2439,15 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
2077
2439
|
CheckboxField,
|
|
2078
2440
|
RadioField,
|
|
2079
2441
|
SelectField,
|
|
2442
|
+
ChipsField,
|
|
2443
|
+
ThemeField,
|
|
2080
2444
|
SliderField,
|
|
2081
2445
|
BusinessDateField,
|
|
2082
2446
|
BusinessTimeField,
|
|
2083
2447
|
InstantDateTimeField
|
|
2084
2448
|
],
|
|
2085
2449
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2086
|
-
template: "<div class=\"DynamicForm\">\
|
|
2450
|
+
template: "<div class=\"DynamicForm\">\n @for (fieldDef of metaInfo(); track fieldDef.name) {\n @let field = $any(dynamicForm())[fieldDef.name];\n\n @if (!fieldDef.hidden) {\n <div class=\"DynamicForm-field\" [style.--ngx-field-max-width]=\"fieldDef.maxWidth\">\n @switch (fieldDef.type) {\n @case ('text') {\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('email') {\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('password') {\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('search') {\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('number') {\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('textarea') {\n <ngx-textarea-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('code') {\n <ngx-textarea-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('checkbox') {\n <ngx-checkbox-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('radio') {\n <ngx-radio-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('select') {\n <ngx-select-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('chips') {\n <ngx-chips-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('theme') {\n <ngx-theme-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('range') {\n <ngx-slider-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('business-date') {\n <ngx-business-date-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('business-time') {\n <ngx-business-time-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('instant-date-time') {\n <ngx-instant-date-time-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n }\n </div>\n }\n }\n\n <div class=\"DynamicForm-actions\">\n <button matButton type=\"button\" (click)=\"clearForm()\">{{ clearLabel() }}</button>\n <button\n matButton=\"filled\"\n type=\"button\"\n [disabled]=\"dynamicForm()().invalid()\"\n (click)=\"handleSubmit()\"\n >\n {{ submitLabel() }}\n </button>\n </div>\n</div>\n",
|
|
2087
2451
|
styles: [".DynamicForm{display:flex;flex-direction:column;gap:16px;width:100%}.DynamicForm-field{display:flex;flex-direction:column;width:100%;max-width:var(--ngx-field-max-width, none)}.DynamicForm-actions{display:flex;justify-content:flex-end;gap:8px}\n"]
|
|
2088
2452
|
}]
|
|
2089
2453
|
}],
|
|
@@ -2205,6 +2569,15 @@ var FormConfigBuilder = class {
|
|
|
2205
2569
|
options: choices
|
|
2206
2570
|
});
|
|
2207
2571
|
}
|
|
2572
|
+
chips(name, label, options) {
|
|
2573
|
+
return this.add(FormFieldType.CHIPS, name, label, options);
|
|
2574
|
+
}
|
|
2575
|
+
theme(name, label, choices, options) {
|
|
2576
|
+
return this.add(FormFieldType.THEME, name, label, {
|
|
2577
|
+
...options,
|
|
2578
|
+
options: choices
|
|
2579
|
+
});
|
|
2580
|
+
}
|
|
2208
2581
|
businessDate(name, label, options) {
|
|
2209
2582
|
return this.add(FormFieldType.BUSINESS_DATE, name, label, options);
|
|
2210
2583
|
}
|
|
@@ -2243,6 +2616,6 @@ var FormConfigBuilder = class {
|
|
|
2243
2616
|
function formConfig(schemaType) {
|
|
2244
2617
|
return new FormConfigBuilder(schemaType);
|
|
2245
2618
|
}
|
|
2246
|
-
export { BusinessDateField, BusinessTimeField, CheckboxField, DynamicForm, FormConfigBuilder, FormFieldType, InstantDateTimeField, NGX_FORMS_LOCALE, RadioField, SelectField, SliderField, TextField, TextareaField, ZonedDateTimeService, createEmptyEntity, defineSchema, formConfig, toSchema };
|
|
2619
|
+
export { BusinessDateField, BusinessTimeField, CheckboxField, ChipsField, DynamicForm, FormConfigBuilder, FormFieldType, InstantDateTimeField, NGX_FORMS_LOCALE, RadioField, SelectField, SliderField, TextField, TextareaField, ThemeField, ZonedDateTimeService, createEmptyEntity, defineSchema, formConfig, toSchema };
|
|
2247
2620
|
|
|
2248
2621
|
//# sourceMappingURL=wiltech-labs-ngx-forms.mjs.map
|