@olafvv/ngx-dynamic-form 0.2.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +326 -3
- package/esm2022/lib/components/dynamic-form/dynamic-form.component.mjs +6 -15
- package/esm2022/lib/components/dynamic-form-field/dynamic-form-field.component.mjs +17 -13
- package/esm2022/lib/controls/button/dynamic-button.component.mjs +5 -6
- package/esm2022/lib/controls/button/dynamic-button.model.mjs +2 -3
- package/esm2022/lib/controls/button-toggles/dynamic-button-toggles.component.mjs +6 -6
- package/esm2022/lib/controls/button-toggles/dynamic-button-toggles.model.mjs +1 -3
- package/esm2022/lib/controls/checkbox/dynamic-checkbox.component.mjs +3 -3
- package/esm2022/lib/controls/controls.mjs +2 -1
- package/esm2022/lib/controls/datepicker/dynamic-datepicker.component.mjs +31 -0
- package/esm2022/lib/controls/datepicker/dynamic-datepicker.model.mjs +13 -0
- package/esm2022/lib/controls/input/dynamic-input.component.mjs +6 -6
- package/esm2022/lib/controls/input/dynamic-input.model.mjs +2 -1
- package/esm2022/lib/controls/radio-group/dynamic-radio-group.component.mjs +6 -6
- package/esm2022/lib/controls/readonly/dynamic-readonly.component.mjs +3 -3
- package/esm2022/lib/controls/select/dynamic-select.component.mjs +6 -9
- package/esm2022/lib/controls/textarea/dynamic-textarea.component.mjs +6 -6
- package/esm2022/lib/controls/textarea/dynamic-textarea.model.mjs +2 -1
- package/esm2022/lib/models/classes/dynamic-form-field-base.mjs +1 -1
- package/esm2022/lib/models/classes/dynamic-form-field-model.mjs +9 -2
- package/esm2022/lib/models/classes/dynamic-form-field-option-model.mjs +1 -1
- package/esm2022/lib/models/classes/dynamic-form-validators.mjs +21 -21
- package/esm2022/lib/models/constants/dynamic-relations.const.mjs +1 -1
- package/esm2022/lib/models/interfaces/dynamic-form-field-config.interface.mjs +1 -1
- package/esm2022/lib/models/interfaces/dynamic-form-field-relation.interface.mjs +1 -1
- package/esm2022/lib/services/dynamic-form-relations.service.mjs +13 -9
- package/esm2022/lib/services/dynamic-form.service.mjs +5 -5
- package/esm2022/lib/services/dynamic-validations.service.mjs +4 -4
- package/fesm2022/olafvv-ngx-dynamic-form.mjs +139 -107
- package/fesm2022/olafvv-ngx-dynamic-form.mjs.map +1 -1
- package/lib/components/dynamic-form/dynamic-form.component.d.ts +0 -7
- package/lib/components/dynamic-form-field/dynamic-form-field.component.d.ts +2 -2
- package/lib/controls/button/dynamic-button.model.d.ts +2 -4
- package/lib/controls/button-toggles/dynamic-button-toggles.model.d.ts +1 -7
- package/lib/controls/controls.d.ts +1 -0
- package/lib/controls/datepicker/dynamic-datepicker.component.d.ts +13 -0
- package/lib/controls/datepicker/dynamic-datepicker.model.d.ts +24 -0
- package/lib/controls/input/dynamic-input.model.d.ts +2 -0
- package/lib/controls/select/dynamic-select.component.d.ts +0 -2
- package/lib/controls/textarea/dynamic-textarea.model.d.ts +2 -0
- package/lib/models/classes/dynamic-form-field-model.d.ts +3 -1
- package/lib/models/classes/dynamic-form-validators.d.ts +12 -12
- package/lib/models/constants/dynamic-relations.const.d.ts +9 -1
- package/lib/models/interfaces/dynamic-form-field-config.interface.d.ts +7 -2
- package/lib/models/interfaces/dynamic-form-field-relation.interface.d.ts +9 -10
- package/package.json +1 -1
|
@@ -1,24 +1,26 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { AsyncPipe, NgIf, NgClass } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { InjectionToken, Injectable, Inject, Optional, EventEmitter, Component, Input, Output, ViewChild, inject, Injector, ViewContainerRef, ChangeDetectionStrategy } from '@angular/core';
|
|
3
|
+
import { InjectionToken, Injectable, Inject, Optional, EventEmitter, Component, Input, Output, signal, ViewChild, inject, Injector, ViewContainerRef, ChangeDetectionStrategy } from '@angular/core';
|
|
4
4
|
import * as i1 from '@angular/forms';
|
|
5
5
|
import { UntypedFormControl, ReactiveFormsModule, Validators } from '@angular/forms';
|
|
6
6
|
import { map, BehaviorSubject, of, isObservable, startWith, distinctUntilChanged, Subscription } from 'rxjs';
|
|
7
7
|
import * as i1$1 from '@angular/material/button-toggle';
|
|
8
8
|
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
9
|
-
import * as
|
|
9
|
+
import * as i2$1 from '@angular/material/form-field';
|
|
10
10
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
11
11
|
import * as i1$2 from '@angular/material/button';
|
|
12
12
|
import { MatButtonModule } from '@angular/material/button';
|
|
13
13
|
import * as i2 from '@angular/material/checkbox';
|
|
14
14
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
15
|
+
import * as i4 from '@angular/material/datepicker';
|
|
16
|
+
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
17
|
+
import * as i3 from '@angular/material/input';
|
|
18
|
+
import { MatInputModule, MatInput } from '@angular/material/input';
|
|
15
19
|
import * as i5 from '@angular/material/icon';
|
|
16
20
|
import { MatIconModule } from '@angular/material/icon';
|
|
17
|
-
import * as
|
|
18
|
-
import { MatInput, MatInputModule } from '@angular/material/input';
|
|
19
|
-
import * as i2$1 from '@angular/material/radio';
|
|
21
|
+
import * as i2$2 from '@angular/material/radio';
|
|
20
22
|
import { MatRadioModule } from '@angular/material/radio';
|
|
21
|
-
import * as i4 from '@angular/material/core';
|
|
23
|
+
import * as i4$1 from '@angular/material/core';
|
|
22
24
|
import { MatOptionModule } from '@angular/material/core';
|
|
23
25
|
import * as i3$1 from '@angular/material/select';
|
|
24
26
|
import { MatSelectModule } from '@angular/material/select';
|
|
@@ -51,10 +53,10 @@ class DynamicFormValidationsService {
|
|
|
51
53
|
}
|
|
52
54
|
control.updateValueAndValidity();
|
|
53
55
|
}
|
|
54
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
55
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
56
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicFormValidationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
57
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicFormValidationsService, providedIn: 'root' }); }
|
|
56
58
|
}
|
|
57
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
59
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicFormValidationsService, decorators: [{
|
|
58
60
|
type: Injectable,
|
|
59
61
|
args: [{
|
|
60
62
|
providedIn: 'root'
|
|
@@ -120,20 +122,20 @@ class DynamicFormService {
|
|
|
120
122
|
});
|
|
121
123
|
}));
|
|
122
124
|
}
|
|
123
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
124
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
125
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicFormService, deps: [{ token: DYNAMIC_FORM_FIELD_MAP_FN, optional: true }, { token: i1.FormBuilder }, { token: DynamicFormValidationsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
126
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicFormService, providedIn: 'root' }); }
|
|
125
127
|
}
|
|
126
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
128
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicFormService, decorators: [{
|
|
127
129
|
type: Injectable,
|
|
128
130
|
args: [{
|
|
129
131
|
providedIn: 'root'
|
|
130
132
|
}]
|
|
131
|
-
}], ctorParameters:
|
|
133
|
+
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
132
134
|
type: Inject,
|
|
133
135
|
args: [DYNAMIC_FORM_FIELD_MAP_FN]
|
|
134
136
|
}, {
|
|
135
137
|
type: Optional
|
|
136
|
-
}] }, { type: i1.FormBuilder }, { type: DynamicFormValidationsService }]
|
|
138
|
+
}] }, { type: i1.FormBuilder }, { type: DynamicFormValidationsService }] });
|
|
137
139
|
|
|
138
140
|
class DynamicFormFieldBase {
|
|
139
141
|
get id() {
|
|
@@ -168,12 +170,12 @@ class DynamicButtonTogglesComponent extends DynamicFormFieldBase {
|
|
|
168
170
|
super(...arguments);
|
|
169
171
|
this.change = new EventEmitter();
|
|
170
172
|
}
|
|
171
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
172
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
173
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicButtonTogglesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
174
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DynamicButtonTogglesComponent, isStandalone: true, selector: "dynamic-button-toggles", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<div class=\"dynamic-button-toggles-wrapper\"\n [formGroup]=\"group\">\n <mat-button-toggle-group [id]=\"id\"\n [formControlName]=\"model.name\"\n [multiple]=\"model.multiple\"\n [vertical]=\"model.vertical\"\n (change)=\"onChange($event)\">\n\n @for(option of model.options$ | async; track option.value) {\n <mat-button-toggle [value]=\"option.value\">{{option.label}}</mat-button-toggle>\n }\n </mat-button-toggle-group>\n</div>", styles: [".dynamic-button-toggles-wrapper{height:var(--mat-form-field-container-height, 56px);display:flex;align-items:center}.dynamic-button-toggles-wrapper label{font-size:var(--mdc-typography-body2-font-size, 14px)}.dynamic-button-toggles-wrapper label.above{display:block;margin-bottom:8px}.dynamic-button-toggles-wrapper label.before{display:inline-block;margin-right:8px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatFormFieldModule }] }); }
|
|
173
175
|
}
|
|
174
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
176
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicButtonTogglesComponent, decorators: [{
|
|
175
177
|
type: Component,
|
|
176
|
-
args: [{ standalone: true, imports: [
|
|
178
|
+
args: [{ standalone: true, imports: [NgIf, NgClass, MatButtonToggleModule, ReactiveFormsModule, AsyncPipe, MatFormFieldModule], selector: 'dynamic-button-toggles', template: "<div class=\"dynamic-button-toggles-wrapper\"\n [formGroup]=\"group\">\n <mat-button-toggle-group [id]=\"id\"\n [formControlName]=\"model.name\"\n [multiple]=\"model.multiple\"\n [vertical]=\"model.vertical\"\n (change)=\"onChange($event)\">\n\n @for(option of model.options$ | async; track option.value) {\n <mat-button-toggle [value]=\"option.value\">{{option.label}}</mat-button-toggle>\n }\n </mat-button-toggle-group>\n</div>", styles: [".dynamic-button-toggles-wrapper{height:var(--mat-form-field-container-height, 56px);display:flex;align-items:center}.dynamic-button-toggles-wrapper label{font-size:var(--mdc-typography-body2-font-size, 14px)}.dynamic-button-toggles-wrapper label.above{display:block;margin-bottom:8px}.dynamic-button-toggles-wrapper label.before{display:inline-block;margin-right:8px}\n"] }]
|
|
177
179
|
}], propDecorators: { model: [{
|
|
178
180
|
type: Input
|
|
179
181
|
}], group: [{
|
|
@@ -184,7 +186,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
184
186
|
|
|
185
187
|
class DynamicFormFieldModel {
|
|
186
188
|
constructor(config) {
|
|
187
|
-
this.hidden = config.hidden ?? false;
|
|
188
189
|
this.id = config.id ?? config.name;
|
|
189
190
|
this.width = config.width ?? 100;
|
|
190
191
|
this.label = config.label ?? null;
|
|
@@ -196,6 +197,7 @@ class DynamicFormFieldModel {
|
|
|
196
197
|
// Create a disabled Subject and Observable to change the state of the FormControl inside DynamicFormFieldComponent by subscribing to disabledChange
|
|
197
198
|
this.disabled$ = new BehaviorSubject(config.disabled ?? false);
|
|
198
199
|
this.disabledChange = this.disabled$.asObservable();
|
|
200
|
+
this.$hidden = signal(config.hidden ?? false);
|
|
199
201
|
}
|
|
200
202
|
get disabled() {
|
|
201
203
|
return this.disabled$.getValue();
|
|
@@ -203,6 +205,12 @@ class DynamicFormFieldModel {
|
|
|
203
205
|
set disabled(disable) {
|
|
204
206
|
this.disabled$.next(disable);
|
|
205
207
|
}
|
|
208
|
+
get hidden() {
|
|
209
|
+
return this.$hidden();
|
|
210
|
+
}
|
|
211
|
+
set hidden(hidden) {
|
|
212
|
+
this.$hidden.set(hidden);
|
|
213
|
+
}
|
|
206
214
|
}
|
|
207
215
|
|
|
208
216
|
class DynamicFormFieldValueModel extends DynamicFormFieldModel {
|
|
@@ -280,8 +288,6 @@ class DynamicButtonToggles extends DynamicFormFieldOptionModel {
|
|
|
280
288
|
this.type = DYNAMIC_FORM_FIELD_BUTTON_TOGGLES;
|
|
281
289
|
this.multiple = config.multiple ?? false;
|
|
282
290
|
this.vertical = config.vertical ?? false;
|
|
283
|
-
this.showLabel = config.showLabel ?? false;
|
|
284
|
-
this.fieldLabelPosition = config.fieldLabelPosition ?? 'above';
|
|
285
291
|
}
|
|
286
292
|
}
|
|
287
293
|
|
|
@@ -289,12 +295,12 @@ class DynamicButtonComponent extends DynamicFormFieldBase {
|
|
|
289
295
|
onClick() {
|
|
290
296
|
this.model.onClick();
|
|
291
297
|
}
|
|
292
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
293
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
298
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
299
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DynamicButtonComponent, isStandalone: true, selector: "dynamic-button", inputs: { model: "model", group: "group" }, usesInheritance: true, ngImport: i0, template: "<div class=\"dynamic-button-wrapper\">\n <button mat-button\n [id]=\"id\"\n (click)=\"onClick()\">\n <span>{{model.label}}</span>\n </button>\n</div>", styles: [".dynamic-button-wrapper{height:var(--mat-form-field-container-height, 56px);display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
294
300
|
}
|
|
295
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
301
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicButtonComponent, decorators: [{
|
|
296
302
|
type: Component,
|
|
297
|
-
args: [{ standalone: true, imports: [
|
|
303
|
+
args: [{ standalone: true, imports: [MatButtonModule], selector: 'dynamic-button', template: "<div class=\"dynamic-button-wrapper\">\n <button mat-button\n [id]=\"id\"\n (click)=\"onClick()\">\n <span>{{model.label}}</span>\n </button>\n</div>", styles: [".dynamic-button-wrapper{height:var(--mat-form-field-container-height, 56px);display:flex;align-items:center}\n"] }]
|
|
298
304
|
}], propDecorators: { model: [{
|
|
299
305
|
type: Input
|
|
300
306
|
}], group: [{
|
|
@@ -306,8 +312,7 @@ class DynamicButton extends DynamicFormFieldModel {
|
|
|
306
312
|
constructor(config) {
|
|
307
313
|
super(config);
|
|
308
314
|
this.type = DYNAMIC_FORM_FIELD_BUTTON;
|
|
309
|
-
this.
|
|
310
|
-
this.raised = config.raised ?? false;
|
|
315
|
+
this.label = config.label ?? null;
|
|
311
316
|
this.onClick = config.onClick;
|
|
312
317
|
}
|
|
313
318
|
}
|
|
@@ -317,10 +322,10 @@ class DynamicCheckboxComponent extends DynamicFormFieldBase {
|
|
|
317
322
|
super(...arguments);
|
|
318
323
|
this.change = new EventEmitter();
|
|
319
324
|
}
|
|
320
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
321
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
325
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
326
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DynamicCheckboxComponent, isStandalone: true, selector: "dynamic-checkbox", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"group\">\n <mat-checkbox [checked]=\"model.checked\"\n [formControlName]=\"model.name\"\n [indeterminate]=\"model.indeterminate\"\n [labelPosition]=\"model.labelPosition\"\n [name]=\"model.name\"\n [id]=\"id\"\n (change)=\"onChange($event)\">\n\n <span class=\"checkbox-label\">{{model.label}}</span>\n </mat-checkbox>\n</ng-container>", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] }); }
|
|
322
327
|
}
|
|
323
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
328
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicCheckboxComponent, decorators: [{
|
|
324
329
|
type: Component,
|
|
325
330
|
args: [{ selector: 'dynamic-checkbox', standalone: true, imports: [ReactiveFormsModule, MatCheckboxModule], template: "<ng-container [formGroup]=\"group\">\n <mat-checkbox [checked]=\"model.checked\"\n [formControlName]=\"model.name\"\n [indeterminate]=\"model.indeterminate\"\n [labelPosition]=\"model.labelPosition\"\n [name]=\"model.name\"\n [id]=\"id\"\n (change)=\"onChange($event)\">\n\n <span class=\"checkbox-label\">{{model.label}}</span>\n </mat-checkbox>\n</ng-container>" }]
|
|
326
331
|
}], propDecorators: { model: [{
|
|
@@ -351,6 +356,37 @@ class DynamicCheckbox extends DynamicFormFieldValueModel {
|
|
|
351
356
|
}
|
|
352
357
|
}
|
|
353
358
|
|
|
359
|
+
class DynamicDatepickerComponent extends DynamicFormFieldBase {
|
|
360
|
+
constructor() {
|
|
361
|
+
super(...arguments);
|
|
362
|
+
this.change = new EventEmitter();
|
|
363
|
+
}
|
|
364
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
365
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DynamicDatepickerComponent, isStandalone: true, selector: "dynamic-datepicker", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [formGroup]=\"group\"\n [id]=\"model.id\"\n color=\"primary\">\n <mat-label *ngIf=\"model.label\">{{model.label}}</mat-label>\n\n <input matInput\n [min]=\"model.min\"\n [max]=\"model.max\"\n [matDatepicker]=\"picker\">\n\n <mat-hint *ngIf=\"model.hint\">{{model.hint}}</mat-hint>\n\n <mat-datepicker-toggle matIconSuffix\n [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker\n [startAt]=\"model.startAt\"\n [startView]=\"model.startView\"></mat-datepicker>\n\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] }); }
|
|
366
|
+
}
|
|
367
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicDatepickerComponent, decorators: [{
|
|
368
|
+
type: Component,
|
|
369
|
+
args: [{ standalone: true, imports: [NgIf, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatDatepickerModule], selector: 'dynamic-datepicker', template: "<mat-form-field [formGroup]=\"group\"\n [id]=\"model.id\"\n color=\"primary\">\n <mat-label *ngIf=\"model.label\">{{model.label}}</mat-label>\n\n <input matInput\n [min]=\"model.min\"\n [max]=\"model.max\"\n [matDatepicker]=\"picker\">\n\n <mat-hint *ngIf=\"model.hint\">{{model.hint}}</mat-hint>\n\n <mat-datepicker-toggle matIconSuffix\n [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker\n [startAt]=\"model.startAt\"\n [startView]=\"model.startView\"></mat-datepicker>\n\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
|
|
370
|
+
}], propDecorators: { model: [{
|
|
371
|
+
type: Input
|
|
372
|
+
}], group: [{
|
|
373
|
+
type: Input
|
|
374
|
+
}], change: [{
|
|
375
|
+
type: Output
|
|
376
|
+
}] } });
|
|
377
|
+
|
|
378
|
+
const DYNAMIC_FORM_FIELD_DATEPICKER = 'datepicker';
|
|
379
|
+
class DynamicDatepicker extends DynamicFormFieldValueModel {
|
|
380
|
+
constructor(config) {
|
|
381
|
+
super(config);
|
|
382
|
+
this.type = DYNAMIC_FORM_FIELD_DATEPICKER;
|
|
383
|
+
this.max = config.max ?? null;
|
|
384
|
+
this.min = config.min ?? null;
|
|
385
|
+
this.startAt = config.startAt ?? null;
|
|
386
|
+
this.startView = config.startView ?? 'month';
|
|
387
|
+
}
|
|
388
|
+
}
|
|
389
|
+
|
|
354
390
|
class DynamicInputComponent extends DynamicFormFieldBase {
|
|
355
391
|
constructor() {
|
|
356
392
|
super(...arguments);
|
|
@@ -372,12 +408,12 @@ class DynamicInputComponent extends DynamicFormFieldBase {
|
|
|
372
408
|
}
|
|
373
409
|
this.change.emit(event);
|
|
374
410
|
}
|
|
375
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
376
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
411
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
412
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DynamicInputComponent, isStandalone: true, selector: "dynamic-input", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field [formGroup]=\"group\"\n [id]=\"id\"\n color=\"primary\">\n <mat-label *ngIf=\"model.label\">{{model.label}}</mat-label>\n\n <span matTextPrefix\n *ngIf=\"model.prefix\">{{model.prefix}}</span>\n\n <input matInput\n [type]=\"model.inputType\"\n [formControlName]=\"model.name\"\n [placeholder]=\"model.placeholder\"\n [attr.min]=\"model.min\"\n [attr.max]=\"model.max\"\n [attr.minLength]=\"model.minLength\"\n [attr.maxLength]=\"model.maxLength\"\n [pattern]=\"model.pattern\"\n [autocomplete]=\"model.autocomplete\"\n (change)=\"onChange($event)\" />\n\n <button matSuffix\n mat-icon-button\n *ngIf=\"showClear\"\n (click)=\"resetControl()\">\n <mat-icon fontIcon=\"clear\"></mat-icon>\n </button>\n\n <mat-hint *ngIf=\"model.hint\"\n align=\"start\">{{model.hint}}</mat-hint>\n\n <mat-hint *ngIf=\"model.maxLength\"\n align=\"end\">{{maxCountText}}</mat-hint>\n\n @for(validator of model.validators; track validator.name) {\n <ng-container ngProjectAs=\"mat-error\">\n <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n </ng-container>\n }\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
377
413
|
}
|
|
378
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
414
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicInputComponent, decorators: [{
|
|
379
415
|
type: Component,
|
|
380
|
-
args: [{ selector: 'dynamic-input', standalone: true, imports: [NgIf,
|
|
416
|
+
args: [{ selector: 'dynamic-input', standalone: true, imports: [NgIf, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatIconModule], template: "<mat-form-field [formGroup]=\"group\"\n [id]=\"id\"\n color=\"primary\">\n <mat-label *ngIf=\"model.label\">{{model.label}}</mat-label>\n\n <span matTextPrefix\n *ngIf=\"model.prefix\">{{model.prefix}}</span>\n\n <input matInput\n [type]=\"model.inputType\"\n [formControlName]=\"model.name\"\n [placeholder]=\"model.placeholder\"\n [attr.min]=\"model.min\"\n [attr.max]=\"model.max\"\n [attr.minLength]=\"model.minLength\"\n [attr.maxLength]=\"model.maxLength\"\n [pattern]=\"model.pattern\"\n [autocomplete]=\"model.autocomplete\"\n (change)=\"onChange($event)\" />\n\n <button matSuffix\n mat-icon-button\n *ngIf=\"showClear\"\n (click)=\"resetControl()\">\n <mat-icon fontIcon=\"clear\"></mat-icon>\n </button>\n\n <mat-hint *ngIf=\"model.hint\"\n align=\"start\">{{model.hint}}</mat-hint>\n\n <mat-hint *ngIf=\"model.maxLength\"\n align=\"end\">{{maxCountText}}</mat-hint>\n\n @for(validator of model.validators; track validator.name) {\n <ng-container ngProjectAs=\"mat-error\">\n <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n </ng-container>\n }\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
|
|
381
417
|
}], propDecorators: { input: [{
|
|
382
418
|
type: ViewChild,
|
|
383
419
|
args: [MatInput, { static: true }]
|
|
@@ -395,6 +431,7 @@ class DynamicInput extends DynamicFormFieldValueModel {
|
|
|
395
431
|
super(config);
|
|
396
432
|
this.type = DYNAMIC_FORM_FIELD_INPUT;
|
|
397
433
|
this.inputType = config.inputType ?? 'text';
|
|
434
|
+
this.placeholder = config.placeholder ?? config.label ?? '';
|
|
398
435
|
this.max = config.max ?? null;
|
|
399
436
|
this.min = config.min ?? null;
|
|
400
437
|
this.maxLength = typeof config.maxLength === 'number' ? config.maxLength : null;
|
|
@@ -412,12 +449,12 @@ class DymamicRadioGroupComponent extends DynamicFormFieldBase {
|
|
|
412
449
|
super(...arguments);
|
|
413
450
|
this.change = new EventEmitter();
|
|
414
451
|
}
|
|
415
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
416
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
452
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DymamicRadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
453
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DymamicRadioGroupComponent, isStandalone: true, selector: "dynamic-radio-group", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<div class=\"dynamic-radio-group-wrapper\"\n [formGroup]=\"group\">\n <label *ngIf=\"model.label\">{{model.label}}</label>\n <mat-radio-group [formControlName]=\"model.name\"\n class=\"radio-group\"\n [ngClass]=\"{'inline': model.inline}\"\n (change)=\"onChange($event)\">\n @for(option of model.options$ | async; track option.value) {\n <mat-radio-button [value]=\"option.value\"\n [labelPosition]=\"model.labelPosition\">\n {{option.label}}\n </mat-radio-button>\n }\n </mat-radio-group>\n</div>", styles: [".dynamic-radio-group-wrapper label{display:block;font-size:var(--mdc-typography-body2-font-size, 14px);margin-bottom:8px}.dynamic-radio-group-wrapper .radio-group:not(.inline){display:flex;flex-direction:column;align-items:flex-start}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i2$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
417
454
|
}
|
|
418
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
455
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DymamicRadioGroupComponent, decorators: [{
|
|
419
456
|
type: Component,
|
|
420
|
-
args: [{ standalone: true, imports: [
|
|
457
|
+
args: [{ standalone: true, imports: [NgIf, NgClass, ReactiveFormsModule, MatRadioModule, AsyncPipe], selector: 'dynamic-radio-group', template: "<div class=\"dynamic-radio-group-wrapper\"\n [formGroup]=\"group\">\n <label *ngIf=\"model.label\">{{model.label}}</label>\n <mat-radio-group [formControlName]=\"model.name\"\n class=\"radio-group\"\n [ngClass]=\"{'inline': model.inline}\"\n (change)=\"onChange($event)\">\n @for(option of model.options$ | async; track option.value) {\n <mat-radio-button [value]=\"option.value\"\n [labelPosition]=\"model.labelPosition\">\n {{option.label}}\n </mat-radio-button>\n }\n </mat-radio-group>\n</div>", styles: [".dynamic-radio-group-wrapper label{display:block;font-size:var(--mdc-typography-body2-font-size, 14px);margin-bottom:8px}.dynamic-radio-group-wrapper .radio-group:not(.inline){display:flex;flex-direction:column;align-items:flex-start}\n"] }]
|
|
421
458
|
}], propDecorators: { model: [{
|
|
422
459
|
type: Input
|
|
423
460
|
}], group: [{
|
|
@@ -437,10 +474,10 @@ class DynamicRadioGroup extends DynamicFormFieldOptionModel {
|
|
|
437
474
|
}
|
|
438
475
|
|
|
439
476
|
class DynamicReadonlyComponent extends DynamicFormFieldBase {
|
|
440
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
441
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
477
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicReadonlyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
478
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DynamicReadonlyComponent, isStandalone: true, selector: "dynamic-readonly", inputs: { model: "model", group: "group" }, usesInheritance: true, ngImport: i0, template: "<div class=\"dynamic-form-field-readonly\"\n [formGroup]=\"group\"\n [id]=\"id\">\n <div class=\"label\">{{model.label}}</div>\n <span>{{model.value}}</span>\n</div>", styles: [".dynamic-form-field-readonly{width:100%;margin:8px 0;color:var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, .87))}.dynamic-form-field-readonly .label{font-size:var(--mdc-typography-body2-font-size, 14px);line-height:var(--mdc-typography-body2-line-height, 20px);margin-bottom:8px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
|
|
442
479
|
}
|
|
443
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
480
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicReadonlyComponent, decorators: [{
|
|
444
481
|
type: Component,
|
|
445
482
|
args: [{ standalone: true, imports: [ReactiveFormsModule], selector: 'dynamic-readonly', template: "<div class=\"dynamic-form-field-readonly\"\n [formGroup]=\"group\"\n [id]=\"id\">\n <div class=\"label\">{{model.label}}</div>\n <span>{{model.value}}</span>\n</div>", styles: [".dynamic-form-field-readonly{width:100%;margin:8px 0;color:var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, .87))}.dynamic-form-field-readonly .label{font-size:var(--mdc-typography-body2-font-size, 14px);line-height:var(--mdc-typography-body2-line-height, 20px);margin-bottom:8px}\n"] }]
|
|
446
483
|
}], propDecorators: { model: [{
|
|
@@ -462,15 +499,12 @@ class DynamicSelectComponent extends DynamicFormFieldBase {
|
|
|
462
499
|
super(...arguments);
|
|
463
500
|
this.change = new EventEmitter();
|
|
464
501
|
}
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
}
|
|
468
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
469
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicSelectComponent, isStandalone: true, selector: "dynamic-select", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [formGroup]=\"group\"\n [id]=\"id\"\n color=\"primary\">\n <mat-label>{{model.label}}</mat-label>\n\n <!-- Template for select without grouped options -->\n <ng-container *ngIf=\"model.options$ | async as options\">\n <ng-container *ngIf=\"!model.native else nativeSelect\">\n <mat-select [formControlName]=\"model.name\"\n [multiple]=\"model.multiple\"\n (selectionChange)=\"onChange($event)\">\n <mat-option *ngFor=\"let option of options; trackBy: trackByFn\"\n [value]=\"option.value\">\n {{option.label}}\n </mat-option>\n </mat-select>\n </ng-container>\n\n <ng-template #nativeSelect>\n <select matNativeControl\n (selectionchange)=\"onChange($event)\">\n <option *ngFor=\"let option of options\"\n [value]=\"option.value\">\n {{option.label}}\n </option>\n </select>\n </ng-template>\n </ng-container>\n\n <!-- Template for select with grouped options -->\n <ng-container *ngIf=\"model.groupedOptions$ | async as groupedOptions\">\n <ng-container *ngIf=\"!model.native else nativeSelectGrouped\">\n <mat-select [formControlName]=\"model.name\"\n (selectionChange)=\"onChange($event)\">\n <mat-optgroup *ngFor=\"let group of groupedOptions\"\n [label]=\"group.name\">\n <mat-option *ngFor=\"let option of group.options; trackBy: trackByFn\"\n [value]=\"option.value\">\n {{option.label}}\n </mat-option>\n </mat-optgroup>\n </mat-select>\n </ng-container>\n\n <ng-template #nativeSelectGrouped>\n <select matNativeControl\n (selectionchange)=\"onChange($event)\">\n <optgroup *ngFor=\"let group of groupedOptions\"\n [label]=\"group.name\">\n <option *ngFor=\"let option of group.options\"\n [value]=\"option.value\">\n {{option.label}}\n </option>\n </optgroup>\n </select>\n </ng-template>\n </ng-container>\n\n <mat-hint *ngIf=\"model.hint\"\n align=\"start\">{{model.hint}}</mat-hint>\n\n <ng-container *ngFor=\"let validator of model.validators\"\n ngProjectAs=\"mat-error\">\n <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n </ng-container>\n</mat-form-field>", styles: ["mat-form-field{width:100%}mat-option{padding-top:8px;padding-bottom:8px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] }); }
|
|
502
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
503
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DynamicSelectComponent, isStandalone: true, selector: "dynamic-select", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [formGroup]=\"group\"\n [id]=\"id\"\n color=\"primary\">\n <mat-label>{{model.label}}</mat-label>\n\n <!-- Template for select without grouped options -->\n <ng-container *ngIf=\"model.options$ | async as options\">\n <ng-container *ngIf=\"!model.native else nativeSelect\">\n <mat-select [formControlName]=\"model.name\"\n [multiple]=\"model.multiple\"\n (selectionChange)=\"onChange($event)\">\n @for(option of options; track option.value) {\n <mat-option [value]=\"option.value\">\n {{option.label}}\n </mat-option>\n }\n </mat-select>\n </ng-container>\n\n <ng-template #nativeSelect>\n <select matNativeControl\n (selectionchange)=\"onChange($event)\">\n @for(option of options; track option.value) {\n <option [value]=\"option.value\">\n {{option.label}}\n </option>\n }\n </select>\n </ng-template>\n </ng-container>\n\n <!-- Template for select with grouped options -->\n <ng-container *ngIf=\"model.groupedOptions$ | async as groupedOptions\">\n <ng-container *ngIf=\"!model.native else nativeSelectGrouped\">\n <mat-select [formControlName]=\"model.name\"\n (selectionChange)=\"onChange($event)\">\n @for(group of groupedOptions; track group.name) {\n <mat-optgroup [label]=\"group.name\">\n @for(option of group.options; track option.value) {\n <mat-option [value]=\"option.value\">\n {{option.label}}\n </mat-option>\n }\n </mat-optgroup>\n }\n\n </mat-select>\n </ng-container>\n\n <ng-template #nativeSelectGrouped>\n <select matNativeControl\n (selectionchange)=\"onChange($event)\">\n @for(group of groupedOptions; track group.name) {=\n <optgroup [label]=\"group.name\">\n @for(option of group.options; track option.value) {\n <option [value]=\"option.value\">\n {{option.label}}\n </option>\n }\n </optgroup>\n }\n </select>\n </ng-template>\n </ng-container>\n\n <mat-hint *ngIf=\"model.hint\"\n align=\"start\">{{model.hint}}</mat-hint>\n\n @for(validator of model.validators; track validator.name) {\n <ng-container ngProjectAs=\"mat-error\">\n <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n </ng-container>\n }\n</mat-form-field>", styles: ["mat-form-field{width:100%}mat-option{padding-top:8px;padding-bottom:8px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4$1.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] }); }
|
|
470
504
|
}
|
|
471
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
505
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicSelectComponent, decorators: [{
|
|
472
506
|
type: Component,
|
|
473
|
-
args: [{ standalone: true, imports: [NgIf,
|
|
507
|
+
args: [{ standalone: true, imports: [NgIf, MatFormFieldModule, ReactiveFormsModule, MatSelectModule, MatOptionModule, AsyncPipe, MatInputModule], selector: 'dynamic-select', template: "<mat-form-field [formGroup]=\"group\"\n [id]=\"id\"\n color=\"primary\">\n <mat-label>{{model.label}}</mat-label>\n\n <!-- Template for select without grouped options -->\n <ng-container *ngIf=\"model.options$ | async as options\">\n <ng-container *ngIf=\"!model.native else nativeSelect\">\n <mat-select [formControlName]=\"model.name\"\n [multiple]=\"model.multiple\"\n (selectionChange)=\"onChange($event)\">\n @for(option of options; track option.value) {\n <mat-option [value]=\"option.value\">\n {{option.label}}\n </mat-option>\n }\n </mat-select>\n </ng-container>\n\n <ng-template #nativeSelect>\n <select matNativeControl\n (selectionchange)=\"onChange($event)\">\n @for(option of options; track option.value) {\n <option [value]=\"option.value\">\n {{option.label}}\n </option>\n }\n </select>\n </ng-template>\n </ng-container>\n\n <!-- Template for select with grouped options -->\n <ng-container *ngIf=\"model.groupedOptions$ | async as groupedOptions\">\n <ng-container *ngIf=\"!model.native else nativeSelectGrouped\">\n <mat-select [formControlName]=\"model.name\"\n (selectionChange)=\"onChange($event)\">\n @for(group of groupedOptions; track group.name) {\n <mat-optgroup [label]=\"group.name\">\n @for(option of group.options; track option.value) {\n <mat-option [value]=\"option.value\">\n {{option.label}}\n </mat-option>\n }\n </mat-optgroup>\n }\n\n </mat-select>\n </ng-container>\n\n <ng-template #nativeSelectGrouped>\n <select matNativeControl\n (selectionchange)=\"onChange($event)\">\n @for(group of groupedOptions; track group.name) {=\n <optgroup [label]=\"group.name\">\n @for(option of group.options; track option.value) {\n <option [value]=\"option.value\">\n {{option.label}}\n </option>\n }\n </optgroup>\n }\n </select>\n </ng-template>\n </ng-container>\n\n <mat-hint *ngIf=\"model.hint\"\n align=\"start\">{{model.hint}}</mat-hint>\n\n @for(validator of model.validators; track validator.name) {\n <ng-container ngProjectAs=\"mat-error\">\n <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n </ng-container>\n }\n</mat-form-field>", styles: ["mat-form-field{width:100%}mat-option{padding-top:8px;padding-bottom:8px}\n"] }]
|
|
474
508
|
}], propDecorators: { model: [{
|
|
475
509
|
type: Input
|
|
476
510
|
}], group: [{
|
|
@@ -507,12 +541,12 @@ class DynamicTextareaComponent extends DynamicFormFieldBase {
|
|
|
507
541
|
}
|
|
508
542
|
this.change.emit(event);
|
|
509
543
|
}
|
|
510
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
511
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
544
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
545
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DynamicTextareaComponent, isStandalone: true, selector: "dynamic-textarea", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, viewQueries: [{ propertyName: "textarea", first: true, predicate: MatInput, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field [formGroup]=\"group\"\n [id]=\"id\"\n color=\"primary\">\n <mat-label *ngIf=\"model.label\">{{model.label}}</mat-label>\n\n <textarea matInput\n [cdkTextareaAutosize]=\"model.resize\"\n [cdkAutosizeMinRows]=\"model.rows\"\n [cdkAutosizeMaxRows]=\"model.resizeMaxRows\"\n [id]=\"id\"\n [formControlName]=\"model.name\"\n [placeholder]=\"model.placeholder\"\n [attr.minLength]=\"model.minLength\"\n [attr.maxLength]=\"model.maxLength\"\n [rows]=\"model.rows\"\n [autocomplete]=\"model.autocomplete\"\n (change)=\"onChange($event)\">\n </textarea>\n\n <mat-hint *ngIf=\"model.hint\"\n align=\"start\">{{model.hint}}</mat-hint>\n\n <mat-hint *ngIf=\"model.maxLength\"\n align=\"end\">{{maxCountText}}</mat-hint>\n\n @for(validator of model.validators; track validator.name) {\n <ng-container ngProjectAs=\"mat-error\">\n <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n </ng-container>\n }\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i3$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
|
|
512
546
|
}
|
|
513
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
547
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicTextareaComponent, decorators: [{
|
|
514
548
|
type: Component,
|
|
515
|
-
args: [{ standalone: true, imports: [NgIf,
|
|
549
|
+
args: [{ standalone: true, imports: [NgIf, MatFormFieldModule, MatInputModule, ReactiveFormsModule], selector: 'dynamic-textarea', template: "<mat-form-field [formGroup]=\"group\"\n [id]=\"id\"\n color=\"primary\">\n <mat-label *ngIf=\"model.label\">{{model.label}}</mat-label>\n\n <textarea matInput\n [cdkTextareaAutosize]=\"model.resize\"\n [cdkAutosizeMinRows]=\"model.rows\"\n [cdkAutosizeMaxRows]=\"model.resizeMaxRows\"\n [id]=\"id\"\n [formControlName]=\"model.name\"\n [placeholder]=\"model.placeholder\"\n [attr.minLength]=\"model.minLength\"\n [attr.maxLength]=\"model.maxLength\"\n [rows]=\"model.rows\"\n [autocomplete]=\"model.autocomplete\"\n (change)=\"onChange($event)\">\n </textarea>\n\n <mat-hint *ngIf=\"model.hint\"\n align=\"start\">{{model.hint}}</mat-hint>\n\n <mat-hint *ngIf=\"model.maxLength\"\n align=\"end\">{{maxCountText}}</mat-hint>\n\n @for(validator of model.validators; track validator.name) {\n <ng-container ngProjectAs=\"mat-error\">\n <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n </ng-container>\n }\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
|
|
516
550
|
}], propDecorators: { textarea: [{
|
|
517
551
|
type: ViewChild,
|
|
518
552
|
args: [MatInput, { static: true }]
|
|
@@ -529,6 +563,7 @@ class DynamicTextarea extends DynamicFormFieldValueModel {
|
|
|
529
563
|
constructor(config) {
|
|
530
564
|
super(config);
|
|
531
565
|
this.type = DYNAMIC_FORM_FIELD_TEXTAREA;
|
|
566
|
+
this.placeholder = config.placeholder ?? '';
|
|
532
567
|
this.minLength = config.minLength ?? 0;
|
|
533
568
|
this.maxLength = config.minLength ?? null;
|
|
534
569
|
this.autocomplete = config.autocomplete ?? 'off';
|
|
@@ -540,20 +575,12 @@ class DynamicTextarea extends DynamicFormFieldValueModel {
|
|
|
540
575
|
|
|
541
576
|
class DynamicFormValidators {
|
|
542
577
|
/**
|
|
543
|
-
* Default
|
|
544
|
-
* @param msg
|
|
545
|
-
*/
|
|
546
|
-
static required(msg) {
|
|
547
|
-
const message = msg ?? 'Dit veld is verplicht';
|
|
548
|
-
return { name: 'required', validator: Validators.required, message };
|
|
549
|
-
}
|
|
550
|
-
/**
|
|
551
|
-
* Ddefault requiredTrue validator, the value of the control has to be true
|
|
578
|
+
* Default email validator, the value of the control has to be a valid email address
|
|
552
579
|
* @param msg
|
|
553
580
|
*/
|
|
554
|
-
static
|
|
555
|
-
const message = msg ?? '
|
|
556
|
-
return { name: '
|
|
581
|
+
static email(msg) {
|
|
582
|
+
const message = msg ?? 'Geen geldig emailadres';
|
|
583
|
+
return { name: 'email', validator: Validators.email, message };
|
|
557
584
|
}
|
|
558
585
|
/**
|
|
559
586
|
* Default min validator, the value has to be greater or equal than the the provided number
|
|
@@ -591,14 +618,6 @@ class DynamicFormValidators {
|
|
|
591
618
|
const message = msg ?? `Maximaal ${max} tekens`;
|
|
592
619
|
return { name: 'maxLength', validator: Validators.max(max), message };
|
|
593
620
|
}
|
|
594
|
-
/**
|
|
595
|
-
* Ddefault email validator, the value of the control has to be a valid email address
|
|
596
|
-
* @param msg
|
|
597
|
-
*/
|
|
598
|
-
static email(msg) {
|
|
599
|
-
const message = msg ?? 'Geen geldig emailadres';
|
|
600
|
-
return { name: 'email', validator: Validators.email, message };
|
|
601
|
-
}
|
|
602
621
|
/**
|
|
603
622
|
* Default pattern validator, the value of the control has to match the provided pattern
|
|
604
623
|
* @param pattern: string | RegExp
|
|
@@ -608,6 +627,22 @@ class DynamicFormValidators {
|
|
|
608
627
|
const message = msg ?? 'Geen geldige invoer';
|
|
609
628
|
return { name: 'pattern', validator: Validators.pattern(pattern), message };
|
|
610
629
|
}
|
|
630
|
+
/**
|
|
631
|
+
* Default required validator, the control must contain a value
|
|
632
|
+
* @param msg
|
|
633
|
+
*/
|
|
634
|
+
static required(msg) {
|
|
635
|
+
const message = msg ?? 'Dit veld is verplicht';
|
|
636
|
+
return { name: 'required', validator: Validators.required, message };
|
|
637
|
+
}
|
|
638
|
+
/**
|
|
639
|
+
* Default requiredTrue validator, the value of the control has to be true
|
|
640
|
+
* @param msg
|
|
641
|
+
*/
|
|
642
|
+
static requiredTrue(msg) {
|
|
643
|
+
const message = msg ?? 'Dit veld is verplicht';
|
|
644
|
+
return { name: 'requiredTrue', validator: Validators.requiredTrue, message };
|
|
645
|
+
}
|
|
611
646
|
}
|
|
612
647
|
|
|
613
648
|
var RelationActionType;
|
|
@@ -668,12 +703,16 @@ class DynamicFormRelationsService {
|
|
|
668
703
|
*/
|
|
669
704
|
findRelatedFormField(model, group) {
|
|
670
705
|
const conditionReducer = (controls, condition) => {
|
|
671
|
-
const
|
|
706
|
+
const fieldName = condition.path ?? condition.fieldName;
|
|
707
|
+
// Get the control using the provided path or fieldName
|
|
708
|
+
const control = condition.path
|
|
709
|
+
? group.root.get(condition.path)
|
|
710
|
+
: group.get(condition.fieldName);
|
|
672
711
|
if (!control) {
|
|
673
712
|
console.warn(`No related form control with the name ${condition.fieldName} found`);
|
|
674
713
|
return controls;
|
|
675
714
|
}
|
|
676
|
-
controls[
|
|
715
|
+
controls[fieldName] = control;
|
|
677
716
|
return controls;
|
|
678
717
|
};
|
|
679
718
|
const relationsReducer = (controls, relation) => {
|
|
@@ -714,7 +753,7 @@ class DynamicFormRelationsService {
|
|
|
714
753
|
// Find the FormControl of the related field
|
|
715
754
|
let relatedControl;
|
|
716
755
|
for (const [fieldName, control] of Object.entries(relatedControls)) {
|
|
717
|
-
if (fieldName === condition.fieldName) {
|
|
756
|
+
if (fieldName === (condition.path ?? condition.fieldName)) {
|
|
718
757
|
relatedControl = control;
|
|
719
758
|
break;
|
|
720
759
|
}
|
|
@@ -723,10 +762,10 @@ class DynamicFormRelationsService {
|
|
|
723
762
|
return false;
|
|
724
763
|
// Using the 'normal' type should return true when the condition matches
|
|
725
764
|
if (relation.actionType === action.type) {
|
|
726
|
-
// Shortcut to false when a previous condition check was resolved as false
|
|
765
|
+
// Shortcut to false when a previous condition check was resolved as false in case of the AND operator
|
|
727
766
|
if (index > 0 && operator === RelationOperator.AND && !isMatch)
|
|
728
767
|
return false;
|
|
729
|
-
// Shortcut to true when a previous condition check was resolved as true
|
|
768
|
+
// Shortcut to true when a previous condition check was resolved as true in case of the OR operator
|
|
730
769
|
if (index > 0 && operator === RelationOperator.OR && isMatch)
|
|
731
770
|
return true;
|
|
732
771
|
return condition.value(relatedControl.value);
|
|
@@ -745,10 +784,10 @@ class DynamicFormRelationsService {
|
|
|
745
784
|
};
|
|
746
785
|
return relation.conditions.reduce(reducer, false);
|
|
747
786
|
}
|
|
748
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
749
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
787
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicFormRelationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
788
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicFormRelationsService, providedIn: 'root' }); }
|
|
750
789
|
}
|
|
751
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
790
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicFormRelationsService, decorators: [{
|
|
752
791
|
type: Injectable,
|
|
753
792
|
args: [{
|
|
754
793
|
providedIn: 'root'
|
|
@@ -758,9 +797,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
758
797
|
class DynamicFormFieldComponent {
|
|
759
798
|
constructor() {
|
|
760
799
|
this.change = new EventEmitter();
|
|
761
|
-
this._subs = new Subscription();
|
|
762
800
|
this.dynamicFormService = inject(DynamicFormService);
|
|
763
801
|
this.relationService = inject(DynamicFormRelationsService);
|
|
802
|
+
this._subs = new Subscription();
|
|
764
803
|
}
|
|
765
804
|
/** Get the instance of a control component using the injected custom method or local method */
|
|
766
805
|
get componentType() {
|
|
@@ -782,22 +821,24 @@ class DynamicFormFieldComponent {
|
|
|
782
821
|
*/
|
|
783
822
|
getControlComponentType() {
|
|
784
823
|
switch (this.model.type) {
|
|
824
|
+
case DYNAMIC_FORM_FIELD_BUTTON:
|
|
825
|
+
return DynamicButtonComponent;
|
|
826
|
+
case DYNAMIC_FORM_FIELD_BUTTON_TOGGLES:
|
|
827
|
+
return DynamicButtonTogglesComponent;
|
|
785
828
|
case DYNAMIC_FORM_FIELD_CHECKBOX:
|
|
786
829
|
return DynamicCheckboxComponent;
|
|
830
|
+
case DYNAMIC_FORM_FIELD_DATEPICKER:
|
|
831
|
+
return DynamicDatepickerComponent;
|
|
787
832
|
case DYNAMIC_FORM_FIELD_INPUT:
|
|
788
833
|
return DynamicInputComponent;
|
|
789
|
-
case
|
|
790
|
-
return
|
|
834
|
+
case DYNAMIC_FORM_FIELD_RADIO_GROUP:
|
|
835
|
+
return DymamicRadioGroupComponent;
|
|
791
836
|
case DYNAMIC_FORM_FIELD_READONLY:
|
|
792
837
|
return DynamicReadonlyComponent;
|
|
793
838
|
case DYNAMIC_FORM_FIELD_SELECT:
|
|
794
839
|
return DynamicSelectComponent;
|
|
795
|
-
case
|
|
796
|
-
return
|
|
797
|
-
case DYNAMIC_FORM_FIELD_BUTTON_TOGGLES:
|
|
798
|
-
return DynamicButtonTogglesComponent;
|
|
799
|
-
case DYNAMIC_FORM_FIELD_RADIO_GROUP:
|
|
800
|
-
return DymamicRadioGroupComponent;
|
|
840
|
+
case DYNAMIC_FORM_FIELD_TEXTAREA:
|
|
841
|
+
return DynamicTextareaComponent;
|
|
801
842
|
default:
|
|
802
843
|
console.warn(`Model of type 'dynamic-${this.model.type}' is not implemented yet. Add this type to dynamic-form-field.component.ts to add support`);
|
|
803
844
|
return null;
|
|
@@ -860,10 +901,10 @@ class DynamicFormFieldComponent {
|
|
|
860
901
|
createDynamicFormEvent(event, type) {
|
|
861
902
|
return { event, type, control: this._control, form: this.group, model: this.model };
|
|
862
903
|
}
|
|
863
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
864
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
904
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
905
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DynamicFormFieldComponent, isStandalone: true, selector: "dynamic-form-field", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, viewQueries: [{ propertyName: "componentViewContainer", first: true, predicate: ["componentViewContainer"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div [formGroup]=\"group\"\n [ngClass]=\"['dynamic-form-field-container', 'dynamic-form-field-' + model.type]\">\n <ng-container #componentViewContainer></ng-container>\n</div>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
865
906
|
}
|
|
866
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
907
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicFormFieldComponent, decorators: [{
|
|
867
908
|
type: Component,
|
|
868
909
|
args: [{ standalone: true, imports: [NgClass, ReactiveFormsModule], selector: 'dynamic-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [formGroup]=\"group\"\n [ngClass]=\"['dynamic-form-field-container', 'dynamic-form-field-' + model.type]\">\n <ng-container #componentViewContainer></ng-container>\n</div>" }]
|
|
869
910
|
}], propDecorators: { componentViewContainer: [{
|
|
@@ -887,15 +928,6 @@ class DynamicFormComponent {
|
|
|
887
928
|
get flatFormConfig() {
|
|
888
929
|
return this.formConfig.reduce((acc, curr) => acc.concat(curr), []);
|
|
889
930
|
}
|
|
890
|
-
/**
|
|
891
|
-
* TrackBy Function for performance optimization
|
|
892
|
-
* @param _index
|
|
893
|
-
* @param field
|
|
894
|
-
* @returns
|
|
895
|
-
*/
|
|
896
|
-
trackByFn(_index, field) {
|
|
897
|
-
return field.id;
|
|
898
|
-
}
|
|
899
931
|
/**
|
|
900
932
|
* Get the current value of the form.
|
|
901
933
|
* @param includeDisabledFields Include the disabled fields of the form, is enabled by default
|
|
@@ -920,12 +952,12 @@ class DynamicFormComponent {
|
|
|
920
952
|
onChange(event) {
|
|
921
953
|
this.change.emit(event);
|
|
922
954
|
}
|
|
923
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
924
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
955
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
956
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DynamicFormComponent, isStandalone: true, selector: "dynamic-form", inputs: { group: "group", formConfig: "formConfig" }, outputs: { change: "change" }, providers: [DynamicFormService], ngImport: i0, template: "@for(row of formConfig; track $index) {\n<div class=\"dynamic-form-row\">\n @for(field of row; track field.id) {\n <dynamic-form-field class=\"dynamic-form-field\"\n [id]=\"field.id\"\n [hidden]=\"field.hidden\"\n [ngClass]=\"[field.type, 'form-field-width-' + field.width]\"\n [group]=\"group\"\n [model]=\"field\"\n (change)=\"onChange($event)\">\n </dynamic-form-field>\n }\n</div>\n}", styles: [".dynamic-form-row{display:flex}.dynamic-form-row .dynamic-form-field{width:100%;margin:4px 0}.dynamic-form-row .dynamic-form-field:not(:last-of-type){margin-right:12px}.dynamic-form-row .dynamic-form-field.button{flex:0}.dynamic-form-row .form-field-width-1{width:1%}.dynamic-form-row .form-field-width-2{width:2%}.dynamic-form-row .form-field-width-3{width:3%}.dynamic-form-row .form-field-width-4{width:4%}.dynamic-form-row .form-field-width-5{width:5%}.dynamic-form-row .form-field-width-6{width:6%}.dynamic-form-row .form-field-width-7{width:7%}.dynamic-form-row .form-field-width-8{width:8%}.dynamic-form-row .form-field-width-9{width:9%}.dynamic-form-row .form-field-width-10{width:10%}.dynamic-form-row .form-field-width-11{width:11%}.dynamic-form-row .form-field-width-12{width:12%}.dynamic-form-row .form-field-width-13{width:13%}.dynamic-form-row .form-field-width-14{width:14%}.dynamic-form-row .form-field-width-15{width:15%}.dynamic-form-row .form-field-width-16{width:16%}.dynamic-form-row .form-field-width-17{width:17%}.dynamic-form-row .form-field-width-18{width:18%}.dynamic-form-row .form-field-width-19{width:19%}.dynamic-form-row .form-field-width-20{width:20%}.dynamic-form-row .form-field-width-21{width:21%}.dynamic-form-row .form-field-width-22{width:22%}.dynamic-form-row .form-field-width-23{width:23%}.dynamic-form-row .form-field-width-24{width:24%}.dynamic-form-row .form-field-width-25{width:25%}.dynamic-form-row .form-field-width-26{width:26%}.dynamic-form-row .form-field-width-27{width:27%}.dynamic-form-row .form-field-width-28{width:28%}.dynamic-form-row .form-field-width-29{width:29%}.dynamic-form-row .form-field-width-30{width:30%}.dynamic-form-row .form-field-width-31{width:31%}.dynamic-form-row .form-field-width-32{width:32%}.dynamic-form-row .form-field-width-33{width:33%}.dynamic-form-row .form-field-width-34{width:34%}.dynamic-form-row .form-field-width-35{width:35%}.dynamic-form-row .form-field-width-36{width:36%}.dynamic-form-row .form-field-width-37{width:37%}.dynamic-form-row .form-field-width-38{width:38%}.dynamic-form-row .form-field-width-39{width:39%}.dynamic-form-row .form-field-width-40{width:40%}.dynamic-form-row .form-field-width-41{width:41%}.dynamic-form-row .form-field-width-42{width:42%}.dynamic-form-row .form-field-width-43{width:43%}.dynamic-form-row .form-field-width-44{width:44%}.dynamic-form-row .form-field-width-45{width:45%}.dynamic-form-row .form-field-width-46{width:46%}.dynamic-form-row .form-field-width-47{width:47%}.dynamic-form-row .form-field-width-48{width:48%}.dynamic-form-row .form-field-width-49{width:49%}.dynamic-form-row .form-field-width-50{width:50%}.dynamic-form-row .form-field-width-51{width:51%}.dynamic-form-row .form-field-width-52{width:52%}.dynamic-form-row .form-field-width-53{width:53%}.dynamic-form-row .form-field-width-54{width:54%}.dynamic-form-row .form-field-width-55{width:55%}.dynamic-form-row .form-field-width-56{width:56%}.dynamic-form-row .form-field-width-57{width:57%}.dynamic-form-row .form-field-width-58{width:58%}.dynamic-form-row .form-field-width-59{width:59%}.dynamic-form-row .form-field-width-60{width:60%}.dynamic-form-row .form-field-width-61{width:61%}.dynamic-form-row .form-field-width-62{width:62%}.dynamic-form-row .form-field-width-63{width:63%}.dynamic-form-row .form-field-width-64{width:64%}.dynamic-form-row .form-field-width-65{width:65%}.dynamic-form-row .form-field-width-66{width:66%}.dynamic-form-row .form-field-width-67{width:67%}.dynamic-form-row .form-field-width-68{width:68%}.dynamic-form-row .form-field-width-69{width:69%}.dynamic-form-row .form-field-width-70{width:70%}.dynamic-form-row .form-field-width-71{width:71%}.dynamic-form-row .form-field-width-72{width:72%}.dynamic-form-row .form-field-width-73{width:73%}.dynamic-form-row .form-field-width-74{width:74%}.dynamic-form-row .form-field-width-75{width:75%}.dynamic-form-row .form-field-width-76{width:76%}.dynamic-form-row .form-field-width-77{width:77%}.dynamic-form-row .form-field-width-78{width:78%}.dynamic-form-row .form-field-width-79{width:79%}.dynamic-form-row .form-field-width-80{width:80%}.dynamic-form-row .form-field-width-81{width:81%}.dynamic-form-row .form-field-width-82{width:82%}.dynamic-form-row .form-field-width-83{width:83%}.dynamic-form-row .form-field-width-84{width:84%}.dynamic-form-row .form-field-width-85{width:85%}.dynamic-form-row .form-field-width-86{width:86%}.dynamic-form-row .form-field-width-87{width:87%}.dynamic-form-row .form-field-width-88{width:88%}.dynamic-form-row .form-field-width-89{width:89%}.dynamic-form-row .form-field-width-90{width:90%}.dynamic-form-row .form-field-width-91{width:91%}.dynamic-form-row .form-field-width-92{width:92%}.dynamic-form-row .form-field-width-93{width:93%}.dynamic-form-row .form-field-width-94{width:94%}.dynamic-form-row .form-field-width-95{width:95%}.dynamic-form-row .form-field-width-96{width:96%}.dynamic-form-row .form-field-width-97{width:97%}.dynamic-form-row .form-field-width-98{width:98%}.dynamic-form-row .form-field-width-99{width:99%}.dynamic-form-row .form-field-width-100{width:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DynamicFormFieldComponent, selector: "dynamic-form-field", inputs: ["model", "group"], outputs: ["change"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
925
957
|
}
|
|
926
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
958
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicFormComponent, decorators: [{
|
|
927
959
|
type: Component,
|
|
928
|
-
args: [{ standalone: true, imports: [
|
|
960
|
+
args: [{ standalone: true, imports: [NgClass, DynamicFormFieldComponent, ReactiveFormsModule], selector: 'dynamic-form', providers: [DynamicFormService], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for(row of formConfig; track $index) {\n<div class=\"dynamic-form-row\">\n @for(field of row; track field.id) {\n <dynamic-form-field class=\"dynamic-form-field\"\n [id]=\"field.id\"\n [hidden]=\"field.hidden\"\n [ngClass]=\"[field.type, 'form-field-width-' + field.width]\"\n [group]=\"group\"\n [model]=\"field\"\n (change)=\"onChange($event)\">\n </dynamic-form-field>\n }\n</div>\n}", styles: [".dynamic-form-row{display:flex}.dynamic-form-row .dynamic-form-field{width:100%;margin:4px 0}.dynamic-form-row .dynamic-form-field:not(:last-of-type){margin-right:12px}.dynamic-form-row .dynamic-form-field.button{flex:0}.dynamic-form-row .form-field-width-1{width:1%}.dynamic-form-row .form-field-width-2{width:2%}.dynamic-form-row .form-field-width-3{width:3%}.dynamic-form-row .form-field-width-4{width:4%}.dynamic-form-row .form-field-width-5{width:5%}.dynamic-form-row .form-field-width-6{width:6%}.dynamic-form-row .form-field-width-7{width:7%}.dynamic-form-row .form-field-width-8{width:8%}.dynamic-form-row .form-field-width-9{width:9%}.dynamic-form-row .form-field-width-10{width:10%}.dynamic-form-row .form-field-width-11{width:11%}.dynamic-form-row .form-field-width-12{width:12%}.dynamic-form-row .form-field-width-13{width:13%}.dynamic-form-row .form-field-width-14{width:14%}.dynamic-form-row .form-field-width-15{width:15%}.dynamic-form-row .form-field-width-16{width:16%}.dynamic-form-row .form-field-width-17{width:17%}.dynamic-form-row .form-field-width-18{width:18%}.dynamic-form-row .form-field-width-19{width:19%}.dynamic-form-row .form-field-width-20{width:20%}.dynamic-form-row .form-field-width-21{width:21%}.dynamic-form-row .form-field-width-22{width:22%}.dynamic-form-row .form-field-width-23{width:23%}.dynamic-form-row .form-field-width-24{width:24%}.dynamic-form-row .form-field-width-25{width:25%}.dynamic-form-row .form-field-width-26{width:26%}.dynamic-form-row .form-field-width-27{width:27%}.dynamic-form-row .form-field-width-28{width:28%}.dynamic-form-row .form-field-width-29{width:29%}.dynamic-form-row .form-field-width-30{width:30%}.dynamic-form-row .form-field-width-31{width:31%}.dynamic-form-row .form-field-width-32{width:32%}.dynamic-form-row .form-field-width-33{width:33%}.dynamic-form-row .form-field-width-34{width:34%}.dynamic-form-row .form-field-width-35{width:35%}.dynamic-form-row .form-field-width-36{width:36%}.dynamic-form-row .form-field-width-37{width:37%}.dynamic-form-row .form-field-width-38{width:38%}.dynamic-form-row .form-field-width-39{width:39%}.dynamic-form-row .form-field-width-40{width:40%}.dynamic-form-row .form-field-width-41{width:41%}.dynamic-form-row .form-field-width-42{width:42%}.dynamic-form-row .form-field-width-43{width:43%}.dynamic-form-row .form-field-width-44{width:44%}.dynamic-form-row .form-field-width-45{width:45%}.dynamic-form-row .form-field-width-46{width:46%}.dynamic-form-row .form-field-width-47{width:47%}.dynamic-form-row .form-field-width-48{width:48%}.dynamic-form-row .form-field-width-49{width:49%}.dynamic-form-row .form-field-width-50{width:50%}.dynamic-form-row .form-field-width-51{width:51%}.dynamic-form-row .form-field-width-52{width:52%}.dynamic-form-row .form-field-width-53{width:53%}.dynamic-form-row .form-field-width-54{width:54%}.dynamic-form-row .form-field-width-55{width:55%}.dynamic-form-row .form-field-width-56{width:56%}.dynamic-form-row .form-field-width-57{width:57%}.dynamic-form-row .form-field-width-58{width:58%}.dynamic-form-row .form-field-width-59{width:59%}.dynamic-form-row .form-field-width-60{width:60%}.dynamic-form-row .form-field-width-61{width:61%}.dynamic-form-row .form-field-width-62{width:62%}.dynamic-form-row .form-field-width-63{width:63%}.dynamic-form-row .form-field-width-64{width:64%}.dynamic-form-row .form-field-width-65{width:65%}.dynamic-form-row .form-field-width-66{width:66%}.dynamic-form-row .form-field-width-67{width:67%}.dynamic-form-row .form-field-width-68{width:68%}.dynamic-form-row .form-field-width-69{width:69%}.dynamic-form-row .form-field-width-70{width:70%}.dynamic-form-row .form-field-width-71{width:71%}.dynamic-form-row .form-field-width-72{width:72%}.dynamic-form-row .form-field-width-73{width:73%}.dynamic-form-row .form-field-width-74{width:74%}.dynamic-form-row .form-field-width-75{width:75%}.dynamic-form-row .form-field-width-76{width:76%}.dynamic-form-row .form-field-width-77{width:77%}.dynamic-form-row .form-field-width-78{width:78%}.dynamic-form-row .form-field-width-79{width:79%}.dynamic-form-row .form-field-width-80{width:80%}.dynamic-form-row .form-field-width-81{width:81%}.dynamic-form-row .form-field-width-82{width:82%}.dynamic-form-row .form-field-width-83{width:83%}.dynamic-form-row .form-field-width-84{width:84%}.dynamic-form-row .form-field-width-85{width:85%}.dynamic-form-row .form-field-width-86{width:86%}.dynamic-form-row .form-field-width-87{width:87%}.dynamic-form-row .form-field-width-88{width:88%}.dynamic-form-row .form-field-width-89{width:89%}.dynamic-form-row .form-field-width-90{width:90%}.dynamic-form-row .form-field-width-91{width:91%}.dynamic-form-row .form-field-width-92{width:92%}.dynamic-form-row .form-field-width-93{width:93%}.dynamic-form-row .form-field-width-94{width:94%}.dynamic-form-row .form-field-width-95{width:95%}.dynamic-form-row .form-field-width-96{width:96%}.dynamic-form-row .form-field-width-97{width:97%}.dynamic-form-row .form-field-width-98{width:98%}.dynamic-form-row .form-field-width-99{width:99%}.dynamic-form-row .form-field-width-100{width:100%}\n"] }]
|
|
929
961
|
}], propDecorators: { group: [{
|
|
930
962
|
type: Input,
|
|
931
963
|
args: [{ required: true }]
|
|
@@ -944,5 +976,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
944
976
|
* Generated bundle index. Do not edit.
|
|
945
977
|
*/
|
|
946
978
|
|
|
947
|
-
export { DYNAMIC_FORM_FIELD_BUTTON, DYNAMIC_FORM_FIELD_BUTTON_TOGGLES, DYNAMIC_FORM_FIELD_CHECKBOX, DYNAMIC_FORM_FIELD_INPUT, DYNAMIC_FORM_FIELD_MAP_FN, DYNAMIC_FORM_FIELD_RADIO_GROUP, DYNAMIC_FORM_FIELD_READONLY, DYNAMIC_FORM_FIELD_SELECT, DYNAMIC_FORM_FIELD_TEXTAREA, DynamicButton, DynamicButtonToggles, DynamicCheckbox, DynamicFormComponent, DynamicFormFieldBase, DynamicFormFieldModel, DynamicFormFieldOptionModel, DynamicFormFieldValueModel, DynamicFormService, DynamicFormValidators, DynamicInput, DynamicRadioGroup, DynamicReadonly, DynamicSelect, DynamicTextarea, RelationActionType, RelationOperator };
|
|
979
|
+
export { DYNAMIC_FORM_FIELD_BUTTON, DYNAMIC_FORM_FIELD_BUTTON_TOGGLES, DYNAMIC_FORM_FIELD_CHECKBOX, DYNAMIC_FORM_FIELD_DATEPICKER, DYNAMIC_FORM_FIELD_INPUT, DYNAMIC_FORM_FIELD_MAP_FN, DYNAMIC_FORM_FIELD_RADIO_GROUP, DYNAMIC_FORM_FIELD_READONLY, DYNAMIC_FORM_FIELD_SELECT, DYNAMIC_FORM_FIELD_TEXTAREA, DynamicButton, DynamicButtonToggles, DynamicCheckbox, DynamicDatepicker, DynamicFormComponent, DynamicFormFieldBase, DynamicFormFieldModel, DynamicFormFieldOptionModel, DynamicFormFieldValueModel, DynamicFormService, DynamicFormValidators, DynamicInput, DynamicRadioGroup, DynamicReadonly, DynamicSelect, DynamicTextarea, RelationActionType, RelationOperator };
|
|
948
980
|
//# sourceMappingURL=olafvv-ngx-dynamic-form.mjs.map
|