@wiltech-labs/ngx-forms 1.0.1 → 1.0.3
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 +374 -356
- package/fesm2022/wiltech-labs-ngx-forms.mjs +246 -57
- package/fesm2022/wiltech-labs-ngx-forms.mjs.map +1 -1
- package/package.json +1 -1
- package/types/wiltech-labs-ngx-forms.d.ts +38 -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";
|
|
@@ -13,6 +13,8 @@ import { MatOption, MatSelect } from "@angular/material/select";
|
|
|
13
13
|
import { LiveAnnouncer } from "@angular/cdk/a11y";
|
|
14
14
|
import { MatChipGrid, MatChipInput, MatChipRemove, MatChipRow } from "@angular/material/chips";
|
|
15
15
|
import { MatIcon } from "@angular/material/icon";
|
|
16
|
+
import * as i1 from "@angular/material/button-toggle";
|
|
17
|
+
import { MatButtonToggleModule } from "@angular/material/button-toggle";
|
|
16
18
|
import { MatSlider, MatSliderThumb } from "@angular/material/slider";
|
|
17
19
|
import { DateAdapter, MAT_DATE_FORMATS, MAT_NATIVE_DATE_FORMATS, NativeDateAdapter } from "@angular/material/core";
|
|
18
20
|
import * as i3$1 from "@angular/material/datepicker";
|
|
@@ -55,7 +57,7 @@ var TextField = class TextField {
|
|
|
55
57
|
}
|
|
56
58
|
},
|
|
57
59
|
ngImport: i0,
|
|
58
|
-
template: "<mat-form-field class=\"TextField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\
|
|
60
|
+
template: "<mat-form-field class=\"TextField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <input matInput [type]=\"fieldDef().type\" [formField]=\"formField()\" />\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of field()().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
|
|
59
61
|
styles: [":host{display:block}.TextField{width:100%}\n"],
|
|
60
62
|
dependencies: [
|
|
61
63
|
{
|
|
@@ -71,7 +73,7 @@ var TextField = class TextField {
|
|
|
71
73
|
},
|
|
72
74
|
{
|
|
73
75
|
kind: "component",
|
|
74
|
-
type: i1.MatFormField,
|
|
76
|
+
type: i1$1.MatFormField,
|
|
75
77
|
selector: "mat-form-field",
|
|
76
78
|
inputs: [
|
|
77
79
|
"hideRequiredMarker",
|
|
@@ -85,18 +87,18 @@ var TextField = class TextField {
|
|
|
85
87
|
},
|
|
86
88
|
{
|
|
87
89
|
kind: "directive",
|
|
88
|
-
type: i1.MatLabel,
|
|
90
|
+
type: i1$1.MatLabel,
|
|
89
91
|
selector: "mat-label"
|
|
90
92
|
},
|
|
91
93
|
{
|
|
92
94
|
kind: "directive",
|
|
93
|
-
type: i1.MatHint,
|
|
95
|
+
type: i1$1.MatHint,
|
|
94
96
|
selector: "mat-hint",
|
|
95
97
|
inputs: ["align", "id"]
|
|
96
98
|
},
|
|
97
99
|
{
|
|
98
100
|
kind: "directive",
|
|
99
|
-
type: i1.MatError,
|
|
101
|
+
type: i1$1.MatError,
|
|
100
102
|
selector: "mat-error, [matError]",
|
|
101
103
|
inputs: ["id"]
|
|
102
104
|
},
|
|
@@ -143,7 +145,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
143
145
|
MatInputModule
|
|
144
146
|
],
|
|
145
147
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
146
|
-
template: "<mat-form-field class=\"TextField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\
|
|
148
|
+
template: "<mat-form-field class=\"TextField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <input matInput [type]=\"fieldDef().type\" [formField]=\"formField()\" />\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of field()().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
|
|
147
149
|
styles: [":host{display:block}.TextField{width:100%}\n"]
|
|
148
150
|
}]
|
|
149
151
|
}],
|
|
@@ -178,6 +180,7 @@ var FormFieldType;
|
|
|
178
180
|
FormFieldType["RANGE"] = "range";
|
|
179
181
|
FormFieldType["SELECT"] = "select";
|
|
180
182
|
FormFieldType["CHIPS"] = "chips";
|
|
183
|
+
FormFieldType["THEME"] = "theme";
|
|
181
184
|
FormFieldType["TEXTAREA"] = "textarea";
|
|
182
185
|
FormFieldType["CODE"] = "code";
|
|
183
186
|
FormFieldType["BUSINESS_DATE"] = "business-date";
|
|
@@ -231,7 +234,7 @@ var TextareaField = class TextareaField {
|
|
|
231
234
|
}
|
|
232
235
|
},
|
|
233
236
|
ngImport: i0,
|
|
234
|
-
template: "<mat-form-field class=\"TextareaField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\
|
|
237
|
+
template: "<mat-form-field class=\"TextareaField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <textarea\n matInput\n class=\"TextareaField-input\"\n [formField]=\"field()\"\n cdkTextareaAutosize\n [cdkAutosizeMinRows]=\"isCode() ? 8 : 4\"\n [class.is-code]=\"isCode()\"\n [attr.spellcheck]=\"isCode() ? 'false' : null\"\n (keydown)=\"onKeydown($event)\"\n ></textarea>\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of field()().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
|
|
235
238
|
styles: [":host{display:block}.TextareaField{width:100%}.TextareaField-input.is-code{font-family:ui-monospace,Cascadia Code,Consolas,monospace;font-size:.875rem;tab-size:2}\n"],
|
|
236
239
|
dependencies: [
|
|
237
240
|
{
|
|
@@ -247,7 +250,7 @@ var TextareaField = class TextareaField {
|
|
|
247
250
|
},
|
|
248
251
|
{
|
|
249
252
|
kind: "component",
|
|
250
|
-
type: i1.MatFormField,
|
|
253
|
+
type: i1$1.MatFormField,
|
|
251
254
|
selector: "mat-form-field",
|
|
252
255
|
inputs: [
|
|
253
256
|
"hideRequiredMarker",
|
|
@@ -261,18 +264,18 @@ var TextareaField = class TextareaField {
|
|
|
261
264
|
},
|
|
262
265
|
{
|
|
263
266
|
kind: "directive",
|
|
264
|
-
type: i1.MatLabel,
|
|
267
|
+
type: i1$1.MatLabel,
|
|
265
268
|
selector: "mat-label"
|
|
266
269
|
},
|
|
267
270
|
{
|
|
268
271
|
kind: "directive",
|
|
269
|
-
type: i1.MatHint,
|
|
272
|
+
type: i1$1.MatHint,
|
|
270
273
|
selector: "mat-hint",
|
|
271
274
|
inputs: ["align", "id"]
|
|
272
275
|
},
|
|
273
276
|
{
|
|
274
277
|
kind: "directive",
|
|
275
|
-
type: i1.MatError,
|
|
278
|
+
type: i1$1.MatError,
|
|
276
279
|
selector: "mat-error, [matError]",
|
|
277
280
|
inputs: ["id"]
|
|
278
281
|
},
|
|
@@ -331,7 +334,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
331
334
|
MatInputModule
|
|
332
335
|
],
|
|
333
336
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
334
|
-
template: "<mat-form-field class=\"TextareaField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\
|
|
337
|
+
template: "<mat-form-field class=\"TextareaField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <textarea\n matInput\n class=\"TextareaField-input\"\n [formField]=\"field()\"\n cdkTextareaAutosize\n [cdkAutosizeMinRows]=\"isCode() ? 8 : 4\"\n [class.is-code]=\"isCode()\"\n [attr.spellcheck]=\"isCode() ? 'false' : null\"\n (keydown)=\"onKeydown($event)\"\n ></textarea>\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of field()().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
|
|
335
338
|
styles: [":host{display:block}.TextareaField{width:100%}.TextareaField-input.is-code{font-family:ui-monospace,Cascadia Code,Consolas,monospace;font-size:.875rem;tab-size:2}\n"]
|
|
336
339
|
}]
|
|
337
340
|
}],
|
|
@@ -396,7 +399,7 @@ var FieldSubscript = class FieldSubscript {
|
|
|
396
399
|
}
|
|
397
400
|
},
|
|
398
401
|
ngImport: i0,
|
|
399
|
-
template: "@let state = field()();\
|
|
402
|
+
template: "@let state = field()();\n@if (state.touched() && state.invalid()) {\n @for (error of errors(); track error.kind) {\n <mat-error class=\"FieldSubscript-error\">{{ error.message ?? error.kind }}</mat-error>\n }\n} @else if (hint()) {\n <div class=\"FieldSubscript-hint\">{{ hint() }}</div>\n}\n",
|
|
400
403
|
styles: [":host{display:block}.FieldSubscript-hint{margin-top:4px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-small);letter-spacing:var(--mat-sys-body-small-tracking)}.FieldSubscript-error{display:block;margin-top:4px;font:var(--mat-sys-body-small);letter-spacing:var(--mat-sys-body-small-tracking)}\n"],
|
|
401
404
|
dependencies: [{
|
|
402
405
|
kind: "directive",
|
|
@@ -419,7 +422,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
419
422
|
standalone: true,
|
|
420
423
|
imports: [MatError],
|
|
421
424
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
422
|
-
template: "@let state = field()();\
|
|
425
|
+
template: "@let state = field()();\n@if (state.touched() && state.invalid()) {\n @for (error of errors(); track error.kind) {\n <mat-error class=\"FieldSubscript-error\">{{ error.message ?? error.kind }}</mat-error>\n }\n} @else if (hint()) {\n <div class=\"FieldSubscript-hint\">{{ hint() }}</div>\n}\n",
|
|
423
426
|
styles: [":host{display:block}.FieldSubscript-hint{margin-top:4px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-small);letter-spacing:var(--mat-sys-body-small-tracking)}.FieldSubscript-error{display:block;margin-top:4px;font:var(--mat-sys-body-small);letter-spacing:var(--mat-sys-body-small-tracking)}\n"]
|
|
424
427
|
}]
|
|
425
428
|
}],
|
|
@@ -476,7 +479,7 @@ var CheckboxField = class CheckboxField {
|
|
|
476
479
|
}
|
|
477
480
|
},
|
|
478
481
|
ngImport: i0,
|
|
479
|
-
template: "<mat-checkbox [formField]=\"field()\">\
|
|
482
|
+
template: "<mat-checkbox [formField]=\"field()\">\n {{ fieldDef().label }}\n @if (field()().required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n</mat-checkbox>\n<ngx-field-subscript class=\"CheckboxField-subscript\" [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
|
|
480
483
|
styles: [":host{display:block}.CheckboxField-subscript{padding-inline-start:40px;margin-top:-4px}\n"],
|
|
481
484
|
dependencies: [
|
|
482
485
|
{
|
|
@@ -539,7 +542,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
539
542
|
FieldSubscript
|
|
540
543
|
],
|
|
541
544
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
542
|
-
template: "<mat-checkbox [formField]=\"field()\">\
|
|
545
|
+
template: "<mat-checkbox [formField]=\"field()\">\n {{ fieldDef().label }}\n @if (field()().required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n</mat-checkbox>\n<ngx-field-subscript class=\"CheckboxField-subscript\" [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
|
|
543
546
|
styles: [":host{display:block}.CheckboxField-subscript{padding-inline-start:40px;margin-top:-4px}\n"]
|
|
544
547
|
}]
|
|
545
548
|
}],
|
|
@@ -562,11 +565,11 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
562
565
|
}]
|
|
563
566
|
}
|
|
564
567
|
});
|
|
565
|
-
let nextId$
|
|
568
|
+
let nextId$2 = 0;
|
|
566
569
|
var RadioField = class RadioField {
|
|
567
570
|
fieldDef = input.required(...ngDevMode ? [{ debugName: "fieldDef" }] : /* istanbul ignore next */ []);
|
|
568
571
|
field = input.required(...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
|
|
569
|
-
labelId = `radio-field-label-${nextId$
|
|
572
|
+
labelId = `radio-field-label-${nextId$2++}`;
|
|
570
573
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
571
574
|
minVersion: "12.0.0",
|
|
572
575
|
version: "22.2.0",
|
|
@@ -598,7 +601,7 @@ var RadioField = class RadioField {
|
|
|
598
601
|
}
|
|
599
602
|
},
|
|
600
603
|
ngImport: i0,
|
|
601
|
-
template: "<div class=\"RadioField-label\" [id]=\"labelId\">\
|
|
604
|
+
template: "<div class=\"RadioField-label\" [id]=\"labelId\">\n {{ fieldDef().label }}\n @if (field()().required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n</div>\n<mat-radio-group\n class=\"RadioField-group\"\n [class.is-vertical]=\"fieldDef().orientation === 'vertical'\"\n [attr.aria-orientation]=\"fieldDef().orientation ?? 'horizontal'\"\n [formField]=\"field()\"\n [attr.aria-labelledby]=\"labelId\"\n>\n @for (option of fieldDef().options ?? []; track option.value) {\n <mat-radio-button [value]=\"option.value\">{{ option.label }}</mat-radio-button>\n }\n</mat-radio-group>\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
|
|
602
605
|
styles: [":host{display:block}.RadioField-label{color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium);letter-spacing:var(--mat-sys-body-medium-tracking);margin-bottom:0}.RadioField-group{display:flex;flex-wrap:wrap;column-gap:8px}.RadioField-group.is-vertical{flex-direction:column;flex-wrap:nowrap;align-items:flex-start}\n"],
|
|
603
606
|
dependencies: [
|
|
604
607
|
{
|
|
@@ -675,7 +678,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
675
678
|
FieldSubscript
|
|
676
679
|
],
|
|
677
680
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
678
|
-
template: "<div class=\"RadioField-label\" [id]=\"labelId\">\
|
|
681
|
+
template: "<div class=\"RadioField-label\" [id]=\"labelId\">\n {{ fieldDef().label }}\n @if (field()().required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n</div>\n<mat-radio-group\n class=\"RadioField-group\"\n [class.is-vertical]=\"fieldDef().orientation === 'vertical'\"\n [attr.aria-orientation]=\"fieldDef().orientation ?? 'horizontal'\"\n [formField]=\"field()\"\n [attr.aria-labelledby]=\"labelId\"\n>\n @for (option of fieldDef().options ?? []; track option.value) {\n <mat-radio-button [value]=\"option.value\">{{ option.label }}</mat-radio-button>\n }\n</mat-radio-group>\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
|
|
679
682
|
styles: [":host{display:block}.RadioField-label{color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium);letter-spacing:var(--mat-sys-body-medium-tracking);margin-bottom:0}.RadioField-group{display:flex;flex-wrap:wrap;column-gap:8px}.RadioField-group.is-vertical{flex-direction:column;flex-wrap:nowrap;align-items:flex-start}\n"]
|
|
680
683
|
}]
|
|
681
684
|
}],
|
|
@@ -732,7 +735,7 @@ var SelectField = class SelectField {
|
|
|
732
735
|
}
|
|
733
736
|
},
|
|
734
737
|
ngImport: i0,
|
|
735
|
-
template: "<mat-form-field class=\"SelectField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\
|
|
738
|
+
template: "<mat-form-field class=\"SelectField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <mat-select [formField]=\"field()\">\n @for (option of fieldDef().options ?? []; track option.value) {\n <mat-option [value]=\"option.value\">{{ option.label }}</mat-option>\n }\n </mat-select>\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of field()().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
|
|
736
739
|
styles: [":host{display:block}.SelectField{width:100%}\n"],
|
|
737
740
|
dependencies: [
|
|
738
741
|
{
|
|
@@ -748,7 +751,7 @@ var SelectField = class SelectField {
|
|
|
748
751
|
},
|
|
749
752
|
{
|
|
750
753
|
kind: "component",
|
|
751
|
-
type: i1.MatFormField,
|
|
754
|
+
type: i1$1.MatFormField,
|
|
752
755
|
selector: "mat-form-field",
|
|
753
756
|
inputs: [
|
|
754
757
|
"hideRequiredMarker",
|
|
@@ -762,18 +765,18 @@ var SelectField = class SelectField {
|
|
|
762
765
|
},
|
|
763
766
|
{
|
|
764
767
|
kind: "directive",
|
|
765
|
-
type: i1.MatLabel,
|
|
768
|
+
type: i1$1.MatLabel,
|
|
766
769
|
selector: "mat-label"
|
|
767
770
|
},
|
|
768
771
|
{
|
|
769
772
|
kind: "directive",
|
|
770
|
-
type: i1.MatHint,
|
|
773
|
+
type: i1$1.MatHint,
|
|
771
774
|
selector: "mat-hint",
|
|
772
775
|
inputs: ["align", "id"]
|
|
773
776
|
},
|
|
774
777
|
{
|
|
775
778
|
kind: "directive",
|
|
776
|
-
type: i1.MatError,
|
|
779
|
+
type: i1$1.MatError,
|
|
777
780
|
selector: "mat-error, [matError]",
|
|
778
781
|
inputs: ["id"]
|
|
779
782
|
},
|
|
@@ -845,7 +848,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
845
848
|
MatOption
|
|
846
849
|
],
|
|
847
850
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
848
|
-
template: "<mat-form-field class=\"SelectField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\
|
|
851
|
+
template: "<mat-form-field class=\"SelectField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <mat-select [formField]=\"field()\">\n @for (option of fieldDef().options ?? []; track option.value) {\n <mat-option [value]=\"option.value\">{{ option.label }}</mat-option>\n }\n </mat-select>\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of field()().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
|
|
849
852
|
styles: [":host{display:block}.SelectField{width:100%}\n"]
|
|
850
853
|
}]
|
|
851
854
|
}],
|
|
@@ -917,7 +920,7 @@ var ChipsField = class ChipsField {
|
|
|
917
920
|
}
|
|
918
921
|
},
|
|
919
922
|
ngImport: i0,
|
|
920
|
-
template: "<mat-form-field class=\"ChipsField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\
|
|
923
|
+
template: "<mat-form-field class=\"ChipsField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n\n <mat-chip-grid #grid [attr.aria-label]=\"fieldDef().label + ' entries'\">\n @for (chip of chips(); track chip) {\n <mat-chip-row (removed)=\"removeChip(chip)\">\n {{ chip }}\n <button matChipRemove [attr.aria-label]=\"'Remove ' + chip\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n </mat-chip-grid>\n\n <input\n [matChipInputFor]=\"grid\"\n [placeholder]=\"'Add ' + fieldDef().label\"\n [disabled]=\"state().disabled()\"\n (blur)=\"state().markAsTouched()\"\n (matChipInputTokenEnd)=\"addChip($event)\"\n />\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of state().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
|
|
921
924
|
styles: [":host{display:block}.ChipsField{width:100%}\n"],
|
|
922
925
|
dependencies: [
|
|
923
926
|
{
|
|
@@ -926,7 +929,7 @@ var ChipsField = class ChipsField {
|
|
|
926
929
|
},
|
|
927
930
|
{
|
|
928
931
|
kind: "component",
|
|
929
|
-
type: i1.MatFormField,
|
|
932
|
+
type: i1$1.MatFormField,
|
|
930
933
|
selector: "mat-form-field",
|
|
931
934
|
inputs: [
|
|
932
935
|
"hideRequiredMarker",
|
|
@@ -940,18 +943,18 @@ var ChipsField = class ChipsField {
|
|
|
940
943
|
},
|
|
941
944
|
{
|
|
942
945
|
kind: "directive",
|
|
943
|
-
type: i1.MatLabel,
|
|
946
|
+
type: i1$1.MatLabel,
|
|
944
947
|
selector: "mat-label"
|
|
945
948
|
},
|
|
946
949
|
{
|
|
947
950
|
kind: "directive",
|
|
948
|
-
type: i1.MatHint,
|
|
951
|
+
type: i1$1.MatHint,
|
|
949
952
|
selector: "mat-hint",
|
|
950
953
|
inputs: ["align", "id"]
|
|
951
954
|
},
|
|
952
955
|
{
|
|
953
956
|
kind: "directive",
|
|
954
|
-
type: i1.MatError,
|
|
957
|
+
type: i1$1.MatError,
|
|
955
958
|
selector: "mat-error, [matError]",
|
|
956
959
|
inputs: ["id"]
|
|
957
960
|
},
|
|
@@ -1033,7 +1036,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1033
1036
|
MatIcon
|
|
1034
1037
|
],
|
|
1035
1038
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1036
|
-
template: "<mat-form-field class=\"ChipsField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\
|
|
1039
|
+
template: "<mat-form-field class=\"ChipsField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n\n <mat-chip-grid #grid [attr.aria-label]=\"fieldDef().label + ' entries'\">\n @for (chip of chips(); track chip) {\n <mat-chip-row (removed)=\"removeChip(chip)\">\n {{ chip }}\n <button matChipRemove [attr.aria-label]=\"'Remove ' + chip\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n </mat-chip-grid>\n\n <input\n [matChipInputFor]=\"grid\"\n [placeholder]=\"'Add ' + fieldDef().label\"\n [disabled]=\"state().disabled()\"\n (blur)=\"state().markAsTouched()\"\n (matChipInputTokenEnd)=\"addChip($event)\"\n />\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of state().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
|
|
1037
1040
|
styles: [":host{display:block}.ChipsField{width:100%}\n"]
|
|
1038
1041
|
}]
|
|
1039
1042
|
}],
|
|
@@ -1056,6 +1059,179 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1056
1059
|
}]
|
|
1057
1060
|
}
|
|
1058
1061
|
});
|
|
1062
|
+
let nextId$1 = 0;
|
|
1063
|
+
const THEME_CHOICES = [
|
|
1064
|
+
{
|
|
1065
|
+
value: "light",
|
|
1066
|
+
icon: "light_mode",
|
|
1067
|
+
defaultLabel: "Light"
|
|
1068
|
+
},
|
|
1069
|
+
{
|
|
1070
|
+
value: "dark",
|
|
1071
|
+
icon: "dark_mode",
|
|
1072
|
+
defaultLabel: "Dark"
|
|
1073
|
+
},
|
|
1074
|
+
{
|
|
1075
|
+
value: "system",
|
|
1076
|
+
icon: "brightness_auto",
|
|
1077
|
+
defaultLabel: "System"
|
|
1078
|
+
}
|
|
1079
|
+
];
|
|
1080
|
+
var ThemeField = class ThemeField {
|
|
1081
|
+
fieldDef = input.required(...ngDevMode ? [{ debugName: "fieldDef" }] : /* istanbul ignore next */ []);
|
|
1082
|
+
field = input.required(...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
|
|
1083
|
+
choices = computed(() => THEME_CHOICES.map((choice) => ({
|
|
1084
|
+
value: choice.value,
|
|
1085
|
+
icon: choice.icon,
|
|
1086
|
+
label: this.fieldDef().options?.find((option) => option.value === choice.value)?.label ?? choice.defaultLabel
|
|
1087
|
+
})), ...ngDevMode ? [{ debugName: "choices" }] : /* istanbul ignore next */ []);
|
|
1088
|
+
labelId = `theme-field-label-${nextId$1++}`;
|
|
1089
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
1090
|
+
minVersion: "12.0.0",
|
|
1091
|
+
version: "22.2.0",
|
|
1092
|
+
ngImport: i0,
|
|
1093
|
+
type: ThemeField,
|
|
1094
|
+
deps: [],
|
|
1095
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
1096
|
+
});
|
|
1097
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
1098
|
+
minVersion: "17.0.0",
|
|
1099
|
+
version: "22.2.0",
|
|
1100
|
+
type: ThemeField,
|
|
1101
|
+
isStandalone: true,
|
|
1102
|
+
selector: "ngx-theme-field",
|
|
1103
|
+
inputs: {
|
|
1104
|
+
fieldDef: {
|
|
1105
|
+
classPropertyName: "fieldDef",
|
|
1106
|
+
publicName: "fieldDef",
|
|
1107
|
+
isSignal: true,
|
|
1108
|
+
isRequired: true,
|
|
1109
|
+
transformFunction: null
|
|
1110
|
+
},
|
|
1111
|
+
field: {
|
|
1112
|
+
classPropertyName: "field",
|
|
1113
|
+
publicName: "field",
|
|
1114
|
+
isSignal: true,
|
|
1115
|
+
isRequired: true,
|
|
1116
|
+
transformFunction: null
|
|
1117
|
+
}
|
|
1118
|
+
},
|
|
1119
|
+
ngImport: i0,
|
|
1120
|
+
template: "<div class=\"ThemeField-label\" [id]=\"labelId\">\n {{ fieldDef().label }}\n @if (field()().required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n</div>\n<mat-button-toggle-group\n class=\"ThemeField-group\"\n [formField]=\"field()\"\n [attr.aria-labelledby]=\"labelId\"\n>\n @for (choice of choices(); track choice.value) {\n <mat-button-toggle [value]=\"choice.value\" [aria-label]=\"choice.label\">\n <mat-icon aria-hidden=\"true\">{{ choice.icon }}</mat-icon>\n </mat-button-toggle>\n }\n</mat-button-toggle-group>\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
|
|
1121
|
+
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"],
|
|
1122
|
+
dependencies: [
|
|
1123
|
+
{
|
|
1124
|
+
kind: "directive",
|
|
1125
|
+
type: FormField,
|
|
1126
|
+
selector: "[formField]",
|
|
1127
|
+
inputs: ["formField"],
|
|
1128
|
+
exportAs: ["formField"]
|
|
1129
|
+
},
|
|
1130
|
+
{
|
|
1131
|
+
kind: "ngmodule",
|
|
1132
|
+
type: MatButtonToggleModule
|
|
1133
|
+
},
|
|
1134
|
+
{
|
|
1135
|
+
kind: "directive",
|
|
1136
|
+
type: i1.MatButtonToggleGroup,
|
|
1137
|
+
selector: "mat-button-toggle-group",
|
|
1138
|
+
inputs: [
|
|
1139
|
+
"appearance",
|
|
1140
|
+
"name",
|
|
1141
|
+
"vertical",
|
|
1142
|
+
"value",
|
|
1143
|
+
"multiple",
|
|
1144
|
+
"disabled",
|
|
1145
|
+
"disabledInteractive",
|
|
1146
|
+
"hideSingleSelectionIndicator",
|
|
1147
|
+
"hideMultipleSelectionIndicator"
|
|
1148
|
+
],
|
|
1149
|
+
outputs: ["valueChange", "change"],
|
|
1150
|
+
exportAs: ["matButtonToggleGroup"]
|
|
1151
|
+
},
|
|
1152
|
+
{
|
|
1153
|
+
kind: "component",
|
|
1154
|
+
type: i1.MatButtonToggle,
|
|
1155
|
+
selector: "mat-button-toggle",
|
|
1156
|
+
inputs: [
|
|
1157
|
+
"aria-label",
|
|
1158
|
+
"aria-labelledby",
|
|
1159
|
+
"id",
|
|
1160
|
+
"name",
|
|
1161
|
+
"value",
|
|
1162
|
+
"tabIndex",
|
|
1163
|
+
"disableRipple",
|
|
1164
|
+
"appearance",
|
|
1165
|
+
"checked",
|
|
1166
|
+
"disabled",
|
|
1167
|
+
"disabledInteractive"
|
|
1168
|
+
],
|
|
1169
|
+
outputs: ["change"],
|
|
1170
|
+
exportAs: ["matButtonToggle"]
|
|
1171
|
+
},
|
|
1172
|
+
{
|
|
1173
|
+
kind: "component",
|
|
1174
|
+
type: MatIcon,
|
|
1175
|
+
selector: "mat-icon",
|
|
1176
|
+
inputs: [
|
|
1177
|
+
"color",
|
|
1178
|
+
"inline",
|
|
1179
|
+
"svgIcon",
|
|
1180
|
+
"fontSet",
|
|
1181
|
+
"fontIcon"
|
|
1182
|
+
],
|
|
1183
|
+
exportAs: ["matIcon"]
|
|
1184
|
+
},
|
|
1185
|
+
{
|
|
1186
|
+
kind: "component",
|
|
1187
|
+
type: FieldSubscript,
|
|
1188
|
+
selector: "ngx-field-subscript",
|
|
1189
|
+
inputs: ["field", "hint"]
|
|
1190
|
+
}
|
|
1191
|
+
],
|
|
1192
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
1193
|
+
});
|
|
1194
|
+
};
|
|
1195
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
1196
|
+
minVersion: "12.0.0",
|
|
1197
|
+
version: "22.2.0",
|
|
1198
|
+
ngImport: i0,
|
|
1199
|
+
type: ThemeField,
|
|
1200
|
+
decorators: [{
|
|
1201
|
+
type: Component,
|
|
1202
|
+
args: [{
|
|
1203
|
+
selector: "ngx-theme-field",
|
|
1204
|
+
standalone: true,
|
|
1205
|
+
imports: [
|
|
1206
|
+
FormField,
|
|
1207
|
+
MatButtonToggleModule,
|
|
1208
|
+
MatIcon,
|
|
1209
|
+
FieldSubscript
|
|
1210
|
+
],
|
|
1211
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1212
|
+
template: "<div class=\"ThemeField-label\" [id]=\"labelId\">\n {{ fieldDef().label }}\n @if (field()().required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n</div>\n<mat-button-toggle-group\n class=\"ThemeField-group\"\n [formField]=\"field()\"\n [attr.aria-labelledby]=\"labelId\"\n>\n @for (choice of choices(); track choice.value) {\n <mat-button-toggle [value]=\"choice.value\" [aria-label]=\"choice.label\">\n <mat-icon aria-hidden=\"true\">{{ choice.icon }}</mat-icon>\n </mat-button-toggle>\n }\n</mat-button-toggle-group>\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
|
|
1213
|
+
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"]
|
|
1214
|
+
}]
|
|
1215
|
+
}],
|
|
1216
|
+
propDecorators: {
|
|
1217
|
+
fieldDef: [{
|
|
1218
|
+
type: i0.Input,
|
|
1219
|
+
args: [{
|
|
1220
|
+
isSignal: true,
|
|
1221
|
+
alias: "fieldDef",
|
|
1222
|
+
required: true
|
|
1223
|
+
}]
|
|
1224
|
+
}],
|
|
1225
|
+
field: [{
|
|
1226
|
+
type: i0.Input,
|
|
1227
|
+
args: [{
|
|
1228
|
+
isSignal: true,
|
|
1229
|
+
alias: "field",
|
|
1230
|
+
required: true
|
|
1231
|
+
}]
|
|
1232
|
+
}]
|
|
1233
|
+
}
|
|
1234
|
+
});
|
|
1059
1235
|
let nextId = 0;
|
|
1060
1236
|
var SliderField = class SliderField {
|
|
1061
1237
|
fieldDef = input.required(...ngDevMode ? [{ debugName: "fieldDef" }] : /* istanbul ignore next */ []);
|
|
@@ -1092,7 +1268,7 @@ var SliderField = class SliderField {
|
|
|
1092
1268
|
}
|
|
1093
1269
|
},
|
|
1094
1270
|
ngImport: i0,
|
|
1095
|
-
template: "<div class=\"SliderField-label\">\
|
|
1271
|
+
template: "<div class=\"SliderField-label\">\n <span [id]=\"labelId\">\n {{ fieldDef().label }}\n @if (field()().required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n </span>\n <span class=\"SliderField-value\">{{ field()().value() }}</span>\n</div>\n<mat-slider\n class=\"SliderField-slider\"\n discrete\n [min]=\"fieldDef().min ?? 0\"\n [max]=\"fieldDef().max ?? 100\"\n [step]=\"fieldDef().step ?? 1\"\n>\n <input matSliderThumb [formField]=\"field()\" [attr.aria-labelledby]=\"labelId\" />\n</mat-slider>\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
|
|
1096
1272
|
styles: [":host{display:block}.SliderField-label{color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium);letter-spacing:var(--mat-sys-body-medium-tracking);display:flex;justify-content:space-between;align-items:baseline;margin-bottom:0}.SliderField-value{color:var(--mat-sys-primary);font:var(--mat-sys-label-large);letter-spacing:var(--mat-sys-label-large-tracking)}.SliderField-slider{display:block;width:100%;margin:0}\n"],
|
|
1097
1273
|
dependencies: [
|
|
1098
1274
|
{
|
|
@@ -1158,7 +1334,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1158
1334
|
FieldSubscript
|
|
1159
1335
|
],
|
|
1160
1336
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1161
|
-
template: "<div class=\"SliderField-label\">\
|
|
1337
|
+
template: "<div class=\"SliderField-label\">\n <span [id]=\"labelId\">\n {{ fieldDef().label }}\n @if (field()().required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n </span>\n <span class=\"SliderField-value\">{{ field()().value() }}</span>\n</div>\n<mat-slider\n class=\"SliderField-slider\"\n discrete\n [min]=\"fieldDef().min ?? 0\"\n [max]=\"fieldDef().max ?? 100\"\n [step]=\"fieldDef().step ?? 1\"\n>\n <input matSliderThumb [formField]=\"field()\" [attr.aria-labelledby]=\"labelId\" />\n</mat-slider>\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
|
|
1162
1338
|
styles: [":host{display:block}.SliderField-label{color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium);letter-spacing:var(--mat-sys-body-medium-tracking);display:flex;justify-content:space-between;align-items:baseline;margin-bottom:0}.SliderField-value{color:var(--mat-sys-primary);font:var(--mat-sys-label-large);letter-spacing:var(--mat-sys-label-large-tracking)}.SliderField-slider{display:block;width:100%;margin:0}\n"]
|
|
1163
1339
|
}]
|
|
1164
1340
|
}],
|
|
@@ -1364,7 +1540,7 @@ var BusinessDateField = class BusinessDateField {
|
|
|
1364
1540
|
isSignal: true
|
|
1365
1541
|
}],
|
|
1366
1542
|
ngImport: i0,
|
|
1367
|
-
template: "<mat-form-field class=\"BusinessDateField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\
|
|
1543
|
+
template: "<mat-form-field class=\"BusinessDateField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <input\n matInput\n [matDatepicker]=\"datepicker\"\n [value]=\"date()\"\n [min]=\"minDate()\"\n [max]=\"maxDate()\"\n [required]=\"state().required()\"\n [disabled]=\"state().disabled()\"\n (blur)=\"state().markAsTouched()\"\n (dateChange)=\"onDateChange($event.value)\"\n />\n <mat-datepicker-toggle matIconSuffix [for]=\"datepicker\" />\n <mat-datepicker #datepicker (closed)=\"state().markAsTouched()\" />\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of state().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
|
|
1368
1544
|
styles: [":host{display:block}.BusinessDateField{width:100%}\n"],
|
|
1369
1545
|
dependencies: [
|
|
1370
1546
|
{
|
|
@@ -1373,7 +1549,7 @@ var BusinessDateField = class BusinessDateField {
|
|
|
1373
1549
|
},
|
|
1374
1550
|
{
|
|
1375
1551
|
kind: "component",
|
|
1376
|
-
type: i1.MatFormField,
|
|
1552
|
+
type: i1$1.MatFormField,
|
|
1377
1553
|
selector: "mat-form-field",
|
|
1378
1554
|
inputs: [
|
|
1379
1555
|
"hideRequiredMarker",
|
|
@@ -1387,24 +1563,24 @@ var BusinessDateField = class BusinessDateField {
|
|
|
1387
1563
|
},
|
|
1388
1564
|
{
|
|
1389
1565
|
kind: "directive",
|
|
1390
|
-
type: i1.MatLabel,
|
|
1566
|
+
type: i1$1.MatLabel,
|
|
1391
1567
|
selector: "mat-label"
|
|
1392
1568
|
},
|
|
1393
1569
|
{
|
|
1394
1570
|
kind: "directive",
|
|
1395
|
-
type: i1.MatHint,
|
|
1571
|
+
type: i1$1.MatHint,
|
|
1396
1572
|
selector: "mat-hint",
|
|
1397
1573
|
inputs: ["align", "id"]
|
|
1398
1574
|
},
|
|
1399
1575
|
{
|
|
1400
1576
|
kind: "directive",
|
|
1401
|
-
type: i1.MatError,
|
|
1577
|
+
type: i1$1.MatError,
|
|
1402
1578
|
selector: "mat-error, [matError]",
|
|
1403
1579
|
inputs: ["id"]
|
|
1404
1580
|
},
|
|
1405
1581
|
{
|
|
1406
1582
|
kind: "directive",
|
|
1407
|
-
type: i1.MatSuffix,
|
|
1583
|
+
type: i1$1.MatSuffix,
|
|
1408
1584
|
selector: "[matSuffix], [matIconSuffix], [matTextSuffix]",
|
|
1409
1585
|
inputs: ["matTextSuffix"]
|
|
1410
1586
|
},
|
|
@@ -1487,7 +1663,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1487
1663
|
],
|
|
1488
1664
|
providers: [provideLocaleDateAdapter()],
|
|
1489
1665
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1490
|
-
template: "<mat-form-field class=\"BusinessDateField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\
|
|
1666
|
+
template: "<mat-form-field class=\"BusinessDateField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <input\n matInput\n [matDatepicker]=\"datepicker\"\n [value]=\"date()\"\n [min]=\"minDate()\"\n [max]=\"maxDate()\"\n [required]=\"state().required()\"\n [disabled]=\"state().disabled()\"\n (blur)=\"state().markAsTouched()\"\n (dateChange)=\"onDateChange($event.value)\"\n />\n <mat-datepicker-toggle matIconSuffix [for]=\"datepicker\" />\n <mat-datepicker #datepicker (closed)=\"state().markAsTouched()\" />\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of state().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
|
|
1491
1667
|
styles: [":host{display:block}.BusinessDateField{width:100%}\n"]
|
|
1492
1668
|
}]
|
|
1493
1669
|
}],
|
|
@@ -1581,7 +1757,7 @@ var BusinessTimeField = class BusinessTimeField {
|
|
|
1581
1757
|
isSignal: true
|
|
1582
1758
|
}],
|
|
1583
1759
|
ngImport: i0,
|
|
1584
|
-
template: "<mat-form-field class=\"BusinessTimeField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\
|
|
1760
|
+
template: "<mat-form-field class=\"BusinessTimeField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <input\n matInput\n [matTimepicker]=\"timepicker\"\n [matTimepickerMin]=\"minTime()\"\n [matTimepickerMax]=\"maxTime()\"\n [value]=\"time()\"\n [required]=\"state().required()\"\n [disabled]=\"state().disabled()\"\n (blur)=\"state().markAsTouched()\"\n (valueChange)=\"onTimeChange($event)\"\n />\n <mat-timepicker-toggle matIconSuffix [for]=\"timepicker\" />\n <mat-timepicker #timepicker (closed)=\"state().markAsTouched()\" />\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of state().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
|
|
1585
1761
|
styles: [":host{display:block}.BusinessTimeField{width:100%}\n"],
|
|
1586
1762
|
dependencies: [
|
|
1587
1763
|
{
|
|
@@ -1590,7 +1766,7 @@ var BusinessTimeField = class BusinessTimeField {
|
|
|
1590
1766
|
},
|
|
1591
1767
|
{
|
|
1592
1768
|
kind: "component",
|
|
1593
|
-
type: i1.MatFormField,
|
|
1769
|
+
type: i1$1.MatFormField,
|
|
1594
1770
|
selector: "mat-form-field",
|
|
1595
1771
|
inputs: [
|
|
1596
1772
|
"hideRequiredMarker",
|
|
@@ -1604,24 +1780,24 @@ var BusinessTimeField = class BusinessTimeField {
|
|
|
1604
1780
|
},
|
|
1605
1781
|
{
|
|
1606
1782
|
kind: "directive",
|
|
1607
|
-
type: i1.MatLabel,
|
|
1783
|
+
type: i1$1.MatLabel,
|
|
1608
1784
|
selector: "mat-label"
|
|
1609
1785
|
},
|
|
1610
1786
|
{
|
|
1611
1787
|
kind: "directive",
|
|
1612
|
-
type: i1.MatHint,
|
|
1788
|
+
type: i1$1.MatHint,
|
|
1613
1789
|
selector: "mat-hint",
|
|
1614
1790
|
inputs: ["align", "id"]
|
|
1615
1791
|
},
|
|
1616
1792
|
{
|
|
1617
1793
|
kind: "directive",
|
|
1618
|
-
type: i1.MatError,
|
|
1794
|
+
type: i1$1.MatError,
|
|
1619
1795
|
selector: "mat-error, [matError]",
|
|
1620
1796
|
inputs: ["id"]
|
|
1621
1797
|
},
|
|
1622
1798
|
{
|
|
1623
1799
|
kind: "directive",
|
|
1624
|
-
type: i1.MatSuffix,
|
|
1800
|
+
type: i1$1.MatSuffix,
|
|
1625
1801
|
selector: "[matSuffix], [matIconSuffix], [matTextSuffix]",
|
|
1626
1802
|
inputs: ["matTextSuffix"]
|
|
1627
1803
|
},
|
|
@@ -1721,7 +1897,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1721
1897
|
],
|
|
1722
1898
|
providers: [provideLocaleDateAdapter()],
|
|
1723
1899
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1724
|
-
template: "<mat-form-field class=\"BusinessTimeField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\
|
|
1900
|
+
template: "<mat-form-field class=\"BusinessTimeField\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ fieldDef().label }}</mat-label>\n <input\n matInput\n [matTimepicker]=\"timepicker\"\n [matTimepickerMin]=\"minTime()\"\n [matTimepickerMax]=\"maxTime()\"\n [value]=\"time()\"\n [required]=\"state().required()\"\n [disabled]=\"state().disabled()\"\n (blur)=\"state().markAsTouched()\"\n (valueChange)=\"onTimeChange($event)\"\n />\n <mat-timepicker-toggle matIconSuffix [for]=\"timepicker\" />\n <mat-timepicker #timepicker (closed)=\"state().markAsTouched()\" />\n\n @if (fieldDef().hint) {\n <mat-hint>{{ fieldDef().hint }}</mat-hint>\n }\n\n @for (error of state().errors(); track error.kind) {\n <mat-error>{{ error.message }}</mat-error>\n }\n</mat-form-field>\n",
|
|
1725
1901
|
styles: [":host{display:block}.BusinessTimeField{width:100%}\n"]
|
|
1726
1902
|
}]
|
|
1727
1903
|
}],
|
|
@@ -1915,7 +2091,7 @@ var InstantDateTimeField = class InstantDateTimeField {
|
|
|
1915
2091
|
isSignal: true
|
|
1916
2092
|
}],
|
|
1917
2093
|
ngImport: i0,
|
|
1918
|
-
template: "<div class=\"InstantDateTimeField-label\">\
|
|
2094
|
+
template: "<div class=\"InstantDateTimeField-label\">\n {{ fieldDef().label }}\n @if (state().required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n</div>\n\n<div class=\"InstantDateTimeField-row\">\n <mat-form-field class=\"InstantDateTimeField-date\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>Date</mat-label>\n <input\n matInput\n [matDatepicker]=\"datepicker\"\n [value]=\"date()\"\n [min]=\"minDate()\"\n [max]=\"maxDate()\"\n [disabled]=\"state().disabled()\"\n (blur)=\"state().markAsTouched()\"\n (dateChange)=\"onDateChange($event.value)\"\n />\n <mat-datepicker-toggle matIconSuffix [for]=\"datepicker\" />\n <mat-datepicker #datepicker (closed)=\"state().markAsTouched()\" />\n </mat-form-field>\n\n <mat-form-field class=\"InstantDateTimeField-time\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>Time</mat-label>\n <input\n matInput\n [matTimepicker]=\"timepicker\"\n [value]=\"time()\"\n [disabled]=\"state().disabled()\"\n (blur)=\"state().markAsTouched()\"\n (valueChange)=\"onTimeChange($event)\"\n />\n <mat-timepicker-toggle matIconSuffix [for]=\"timepicker\" />\n <mat-timepicker #timepicker (closed)=\"state().markAsTouched()\" />\n </mat-form-field>\n</div>\n\n<div class=\"InstantDateTimeField-zone\">\n {{ timeZone() }}\n @if (offset()) {\n (UTC{{ offset() }})\n }\n @if (state().value()) {\n · stored as {{ state().value() }}\n }\n</div>\n\n@if (notice()) {\n <div class=\"InstantDateTimeField-notice\">{{ notice() }}</div>\n}\n\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
|
|
1919
2095
|
styles: [":host{display:block}.InstantDateTimeField-label{margin-bottom:6px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium);letter-spacing:var(--mat-sys-body-medium-tracking)}.InstantDateTimeField-row{display:flex;flex-direction:column;gap:8px;width:100%}@media(min-width:400px){.InstantDateTimeField-row{flex-direction:row}}.InstantDateTimeField-date{flex:3;min-width:0}.InstantDateTimeField-time{flex:2;min-width:0}.InstantDateTimeField-zone{margin-top:4px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-small);letter-spacing:var(--mat-sys-body-small-tracking)}.InstantDateTimeField-notice{margin-top:4px;color:var(--mat-sys-tertiary);font:var(--mat-sys-body-small);letter-spacing:var(--mat-sys-body-small-tracking)}\n"],
|
|
1920
2096
|
dependencies: [
|
|
1921
2097
|
{
|
|
@@ -1924,7 +2100,7 @@ var InstantDateTimeField = class InstantDateTimeField {
|
|
|
1924
2100
|
},
|
|
1925
2101
|
{
|
|
1926
2102
|
kind: "component",
|
|
1927
|
-
type: i1.MatFormField,
|
|
2103
|
+
type: i1$1.MatFormField,
|
|
1928
2104
|
selector: "mat-form-field",
|
|
1929
2105
|
inputs: [
|
|
1930
2106
|
"hideRequiredMarker",
|
|
@@ -1938,12 +2114,12 @@ var InstantDateTimeField = class InstantDateTimeField {
|
|
|
1938
2114
|
},
|
|
1939
2115
|
{
|
|
1940
2116
|
kind: "directive",
|
|
1941
|
-
type: i1.MatLabel,
|
|
2117
|
+
type: i1$1.MatLabel,
|
|
1942
2118
|
selector: "mat-label"
|
|
1943
2119
|
},
|
|
1944
2120
|
{
|
|
1945
2121
|
kind: "directive",
|
|
1946
|
-
type: i1.MatSuffix,
|
|
2122
|
+
type: i1$1.MatSuffix,
|
|
1947
2123
|
selector: "[matSuffix], [matIconSuffix], [matTextSuffix]",
|
|
1948
2124
|
inputs: ["matTextSuffix"]
|
|
1949
2125
|
},
|
|
@@ -2086,7 +2262,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
2086
2262
|
],
|
|
2087
2263
|
providers: [provideLocaleDateAdapter()],
|
|
2088
2264
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2089
|
-
template: "<div class=\"InstantDateTimeField-label\">\
|
|
2265
|
+
template: "<div class=\"InstantDateTimeField-label\">\n {{ fieldDef().label }}\n @if (state().required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n</div>\n\n<div class=\"InstantDateTimeField-row\">\n <mat-form-field class=\"InstantDateTimeField-date\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>Date</mat-label>\n <input\n matInput\n [matDatepicker]=\"datepicker\"\n [value]=\"date()\"\n [min]=\"minDate()\"\n [max]=\"maxDate()\"\n [disabled]=\"state().disabled()\"\n (blur)=\"state().markAsTouched()\"\n (dateChange)=\"onDateChange($event.value)\"\n />\n <mat-datepicker-toggle matIconSuffix [for]=\"datepicker\" />\n <mat-datepicker #datepicker (closed)=\"state().markAsTouched()\" />\n </mat-form-field>\n\n <mat-form-field class=\"InstantDateTimeField-time\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>Time</mat-label>\n <input\n matInput\n [matTimepicker]=\"timepicker\"\n [value]=\"time()\"\n [disabled]=\"state().disabled()\"\n (blur)=\"state().markAsTouched()\"\n (valueChange)=\"onTimeChange($event)\"\n />\n <mat-timepicker-toggle matIconSuffix [for]=\"timepicker\" />\n <mat-timepicker #timepicker (closed)=\"state().markAsTouched()\" />\n </mat-form-field>\n</div>\n\n<div class=\"InstantDateTimeField-zone\">\n {{ timeZone() }}\n @if (offset()) {\n (UTC{{ offset() }})\n }\n @if (state().value()) {\n · stored as {{ state().value() }}\n }\n</div>\n\n@if (notice()) {\n <div class=\"InstantDateTimeField-notice\">{{ notice() }}</div>\n}\n\n<ngx-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\n",
|
|
2090
2266
|
styles: [":host{display:block}.InstantDateTimeField-label{margin-bottom:6px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium);letter-spacing:var(--mat-sys-body-medium-tracking)}.InstantDateTimeField-row{display:flex;flex-direction:column;gap:8px;width:100%}@media(min-width:400px){.InstantDateTimeField-row{flex-direction:row}}.InstantDateTimeField-date{flex:3;min-width:0}.InstantDateTimeField-time{flex:2;min-width:0}.InstantDateTimeField-zone{margin-top:4px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-small);letter-spacing:var(--mat-sys-body-small-tracking)}.InstantDateTimeField-notice{margin-top:4px;color:var(--mat-sys-tertiary);font:var(--mat-sys-body-small);letter-spacing:var(--mat-sys-body-small-tracking)}\n"]
|
|
2091
2267
|
}]
|
|
2092
2268
|
}],
|
|
@@ -2184,7 +2360,7 @@ var DynamicForm = class DynamicForm {
|
|
|
2184
2360
|
onFormClear: "onFormClear"
|
|
2185
2361
|
},
|
|
2186
2362
|
ngImport: i0,
|
|
2187
|
-
template: "<div class=\"DynamicForm\">\
|
|
2363
|
+
template: "<div class=\"DynamicForm\">\n @for (fieldDef of metaInfo(); track fieldDef.name) {\n @let field = $any(dynamicForm())[fieldDef.name];\n\n @if (!fieldDef.hidden) {\n <div class=\"DynamicForm-field\" [style.--ngx-field-max-width]=\"fieldDef.maxWidth\">\n @switch (fieldDef.type) {\n @case ('text') {\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('email') {\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('password') {\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('search') {\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('number') {\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('textarea') {\n <ngx-textarea-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('code') {\n <ngx-textarea-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('checkbox') {\n <ngx-checkbox-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('radio') {\n <ngx-radio-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('select') {\n <ngx-select-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('chips') {\n <ngx-chips-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('theme') {\n <ngx-theme-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('range') {\n <ngx-slider-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('business-date') {\n <ngx-business-date-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('business-time') {\n <ngx-business-time-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('instant-date-time') {\n <ngx-instant-date-time-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n }\n </div>\n }\n }\n\n <div class=\"DynamicForm-actions\">\n <button matButton type=\"button\" (click)=\"clearForm()\">{{ clearLabel() }}</button>\n <button\n matButton=\"filled\"\n type=\"button\"\n [disabled]=\"dynamicForm()().invalid()\"\n (click)=\"handleSubmit()\"\n >\n {{ submitLabel() }}\n </button>\n </div>\n</div>\n",
|
|
2188
2364
|
styles: [".DynamicForm{display:flex;flex-direction:column;gap:16px;width:100%}.DynamicForm-field{display:flex;flex-direction:column;width:100%;max-width:var(--ngx-field-max-width, none)}.DynamicForm-actions{display:flex;justify-content:flex-end;gap:8px}\n"],
|
|
2189
2365
|
dependencies: [
|
|
2190
2366
|
{
|
|
@@ -2230,6 +2406,12 @@ var DynamicForm = class DynamicForm {
|
|
|
2230
2406
|
selector: "ngx-chips-field",
|
|
2231
2407
|
inputs: ["fieldDef", "field"]
|
|
2232
2408
|
},
|
|
2409
|
+
{
|
|
2410
|
+
kind: "component",
|
|
2411
|
+
type: ThemeField,
|
|
2412
|
+
selector: "ngx-theme-field",
|
|
2413
|
+
inputs: ["fieldDef", "field"]
|
|
2414
|
+
},
|
|
2233
2415
|
{
|
|
2234
2416
|
kind: "component",
|
|
2235
2417
|
type: SliderField,
|
|
@@ -2276,13 +2458,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
2276
2458
|
RadioField,
|
|
2277
2459
|
SelectField,
|
|
2278
2460
|
ChipsField,
|
|
2461
|
+
ThemeField,
|
|
2279
2462
|
SliderField,
|
|
2280
2463
|
BusinessDateField,
|
|
2281
2464
|
BusinessTimeField,
|
|
2282
2465
|
InstantDateTimeField
|
|
2283
2466
|
],
|
|
2284
2467
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2285
|
-
template: "<div class=\"DynamicForm\">\
|
|
2468
|
+
template: "<div class=\"DynamicForm\">\n @for (fieldDef of metaInfo(); track fieldDef.name) {\n @let field = $any(dynamicForm())[fieldDef.name];\n\n @if (!fieldDef.hidden) {\n <div class=\"DynamicForm-field\" [style.--ngx-field-max-width]=\"fieldDef.maxWidth\">\n @switch (fieldDef.type) {\n @case ('text') {\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('email') {\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('password') {\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('search') {\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('number') {\n <ngx-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('textarea') {\n <ngx-textarea-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('code') {\n <ngx-textarea-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('checkbox') {\n <ngx-checkbox-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('radio') {\n <ngx-radio-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('select') {\n <ngx-select-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('chips') {\n <ngx-chips-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('theme') {\n <ngx-theme-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('range') {\n <ngx-slider-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('business-date') {\n <ngx-business-date-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('business-time') {\n <ngx-business-time-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n @case ('instant-date-time') {\n <ngx-instant-date-time-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\n }\n }\n </div>\n }\n }\n\n <div class=\"DynamicForm-actions\">\n <button matButton type=\"button\" (click)=\"clearForm()\">{{ clearLabel() }}</button>\n <button\n matButton=\"filled\"\n type=\"button\"\n [disabled]=\"dynamicForm()().invalid()\"\n (click)=\"handleSubmit()\"\n >\n {{ submitLabel() }}\n </button>\n </div>\n</div>\n",
|
|
2286
2469
|
styles: [".DynamicForm{display:flex;flex-direction:column;gap:16px;width:100%}.DynamicForm-field{display:flex;flex-direction:column;width:100%;max-width:var(--ngx-field-max-width, none)}.DynamicForm-actions{display:flex;justify-content:flex-end;gap:8px}\n"]
|
|
2287
2470
|
}]
|
|
2288
2471
|
}],
|
|
@@ -2407,6 +2590,12 @@ var FormConfigBuilder = class {
|
|
|
2407
2590
|
chips(name, label, options) {
|
|
2408
2591
|
return this.add(FormFieldType.CHIPS, name, label, options);
|
|
2409
2592
|
}
|
|
2593
|
+
theme(name, label, choices, options) {
|
|
2594
|
+
return this.add(FormFieldType.THEME, name, label, {
|
|
2595
|
+
...options,
|
|
2596
|
+
options: choices
|
|
2597
|
+
});
|
|
2598
|
+
}
|
|
2410
2599
|
businessDate(name, label, options) {
|
|
2411
2600
|
return this.add(FormFieldType.BUSINESS_DATE, name, label, options);
|
|
2412
2601
|
}
|
|
@@ -2445,6 +2634,6 @@ var FormConfigBuilder = class {
|
|
|
2445
2634
|
function formConfig(schemaType) {
|
|
2446
2635
|
return new FormConfigBuilder(schemaType);
|
|
2447
2636
|
}
|
|
2448
|
-
export { BusinessDateField, BusinessTimeField, CheckboxField, ChipsField, DynamicForm, FormConfigBuilder, FormFieldType, InstantDateTimeField, NGX_FORMS_LOCALE, RadioField, SelectField, SliderField, TextField, TextareaField, ZonedDateTimeService, createEmptyEntity, defineSchema, formConfig, toSchema };
|
|
2637
|
+
export { BusinessDateField, BusinessTimeField, CheckboxField, ChipsField, DynamicForm, FormConfigBuilder, FormFieldType, InstantDateTimeField, NGX_FORMS_LOCALE, RadioField, SelectField, SliderField, TextField, TextareaField, ThemeField, ZonedDateTimeService, createEmptyEntity, defineSchema, formConfig, toSchema };
|
|
2449
2638
|
|
|
2450
2639
|
//# sourceMappingURL=wiltech-labs-ngx-forms.mjs.map
|