@olafvv/ngx-dynamic-form 0.2.0 → 0.3.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 +5 -5
- package/esm2022/lib/controls/button/dynamic-button.component.mjs +5 -5
- 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/checkbox/dynamic-checkbox.component.mjs +3 -3
- 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 +90 -91
- 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/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,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { NgIf, NgClass, AsyncPipe } 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';
|
|
@@ -51,10 +51,10 @@ class DynamicFormValidationsService {
|
|
|
51
51
|
}
|
|
52
52
|
control.updateValueAndValidity();
|
|
53
53
|
}
|
|
54
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
55
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
54
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicFormValidationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
55
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicFormValidationsService, providedIn: 'root' }); }
|
|
56
56
|
}
|
|
57
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
57
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicFormValidationsService, decorators: [{
|
|
58
58
|
type: Injectable,
|
|
59
59
|
args: [{
|
|
60
60
|
providedIn: 'root'
|
|
@@ -120,20 +120,20 @@ class DynamicFormService {
|
|
|
120
120
|
});
|
|
121
121
|
}));
|
|
122
122
|
}
|
|
123
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
124
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
123
|
+
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 }); }
|
|
124
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicFormService, providedIn: 'root' }); }
|
|
125
125
|
}
|
|
126
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
126
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicFormService, decorators: [{
|
|
127
127
|
type: Injectable,
|
|
128
128
|
args: [{
|
|
129
129
|
providedIn: 'root'
|
|
130
130
|
}]
|
|
131
|
-
}], ctorParameters:
|
|
131
|
+
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
132
132
|
type: Inject,
|
|
133
133
|
args: [DYNAMIC_FORM_FIELD_MAP_FN]
|
|
134
134
|
}, {
|
|
135
135
|
type: Optional
|
|
136
|
-
}] }, { type: i1.FormBuilder }, { type: DynamicFormValidationsService }]
|
|
136
|
+
}] }, { type: i1.FormBuilder }, { type: DynamicFormValidationsService }] });
|
|
137
137
|
|
|
138
138
|
class DynamicFormFieldBase {
|
|
139
139
|
get id() {
|
|
@@ -168,12 +168,12 @@ class DynamicButtonTogglesComponent extends DynamicFormFieldBase {
|
|
|
168
168
|
super(...arguments);
|
|
169
169
|
this.change = new EventEmitter();
|
|
170
170
|
}
|
|
171
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
172
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
171
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicButtonTogglesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
172
|
+
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 <label *ngIf=\"model.label\"\n [ngClass]=\"model.fieldLabelPosition\">{{model.label}}</label>\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 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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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
173
|
}
|
|
174
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
174
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicButtonTogglesComponent, decorators: [{
|
|
175
175
|
type: Component,
|
|
176
|
-
args: [{ standalone: true, imports: [
|
|
176
|
+
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 <label *ngIf=\"model.label\"\n [ngClass]=\"model.fieldLabelPosition\">{{model.label}}</label>\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 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
177
|
}], propDecorators: { model: [{
|
|
178
178
|
type: Input
|
|
179
179
|
}], group: [{
|
|
@@ -184,7 +184,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
184
184
|
|
|
185
185
|
class DynamicFormFieldModel {
|
|
186
186
|
constructor(config) {
|
|
187
|
-
this.hidden = config.hidden ?? false;
|
|
188
187
|
this.id = config.id ?? config.name;
|
|
189
188
|
this.width = config.width ?? 100;
|
|
190
189
|
this.label = config.label ?? null;
|
|
@@ -196,6 +195,7 @@ class DynamicFormFieldModel {
|
|
|
196
195
|
// Create a disabled Subject and Observable to change the state of the FormControl inside DynamicFormFieldComponent by subscribing to disabledChange
|
|
197
196
|
this.disabled$ = new BehaviorSubject(config.disabled ?? false);
|
|
198
197
|
this.disabledChange = this.disabled$.asObservable();
|
|
198
|
+
this.$hidden = signal(config.hidden ?? false);
|
|
199
199
|
}
|
|
200
200
|
get disabled() {
|
|
201
201
|
return this.disabled$.getValue();
|
|
@@ -203,6 +203,12 @@ class DynamicFormFieldModel {
|
|
|
203
203
|
set disabled(disable) {
|
|
204
204
|
this.disabled$.next(disable);
|
|
205
205
|
}
|
|
206
|
+
get hidden() {
|
|
207
|
+
return this.$hidden();
|
|
208
|
+
}
|
|
209
|
+
set hidden(hidden) {
|
|
210
|
+
this.$hidden.set(hidden);
|
|
211
|
+
}
|
|
206
212
|
}
|
|
207
213
|
|
|
208
214
|
class DynamicFormFieldValueModel extends DynamicFormFieldModel {
|
|
@@ -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: "<button mat-button\n [id]=\"id\"\n (click)=\"onClick()\">\n <span>{{model.label}}</span>\n</button>", 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: [NgIf, MatButtonModule], selector: 'dynamic-button', template: "<
|
|
303
|
+
args: [{ standalone: true, imports: [NgIf, MatButtonModule], selector: 'dynamic-button', template: "<button mat-button\n [id]=\"id\"\n (click)=\"onClick()\">\n <span>{{model.label}}</span>\n</button>" }]
|
|
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: [{
|
|
@@ -372,12 +377,12 @@ class DynamicInputComponent extends DynamicFormFieldBase {
|
|
|
372
377
|
}
|
|
373
378
|
this.change.emit(event);
|
|
374
379
|
}
|
|
375
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
376
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
380
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
381
|
+
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: 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: "directive", type: i1$3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$3.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
382
|
}
|
|
378
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
383
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicInputComponent, decorators: [{
|
|
379
384
|
type: Component,
|
|
380
|
-
args: [{ selector: 'dynamic-input', standalone: true, imports: [NgIf,
|
|
385
|
+
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
386
|
}], propDecorators: { input: [{
|
|
382
387
|
type: ViewChild,
|
|
383
388
|
args: [MatInput, { static: true }]
|
|
@@ -395,6 +400,7 @@ class DynamicInput extends DynamicFormFieldValueModel {
|
|
|
395
400
|
super(config);
|
|
396
401
|
this.type = DYNAMIC_FORM_FIELD_INPUT;
|
|
397
402
|
this.inputType = config.inputType ?? 'text';
|
|
403
|
+
this.placeholder = config.placeholder ?? config.label ?? '';
|
|
398
404
|
this.max = config.max ?? null;
|
|
399
405
|
this.min = config.min ?? null;
|
|
400
406
|
this.maxLength = typeof config.maxLength === 'number' ? config.maxLength : null;
|
|
@@ -412,12 +418,12 @@ class DymamicRadioGroupComponent extends DynamicFormFieldBase {
|
|
|
412
418
|
super(...arguments);
|
|
413
419
|
this.change = new EventEmitter();
|
|
414
420
|
}
|
|
415
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
416
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
421
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DymamicRadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
422
|
+
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$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$1.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
423
|
}
|
|
418
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
424
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DymamicRadioGroupComponent, decorators: [{
|
|
419
425
|
type: Component,
|
|
420
|
-
args: [{ standalone: true, imports: [
|
|
426
|
+
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
427
|
}], propDecorators: { model: [{
|
|
422
428
|
type: Input
|
|
423
429
|
}], group: [{
|
|
@@ -437,10 +443,10 @@ class DynamicRadioGroup extends DynamicFormFieldOptionModel {
|
|
|
437
443
|
}
|
|
438
444
|
|
|
439
445
|
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: "
|
|
446
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicReadonlyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
447
|
+
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
448
|
}
|
|
443
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
449
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicReadonlyComponent, decorators: [{
|
|
444
450
|
type: Component,
|
|
445
451
|
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
452
|
}], propDecorators: { model: [{
|
|
@@ -462,15 +468,12 @@ class DynamicSelectComponent extends DynamicFormFieldBase {
|
|
|
462
468
|
super(...arguments);
|
|
463
469
|
this.change = new EventEmitter();
|
|
464
470
|
}
|
|
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"] }] }); }
|
|
471
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
472
|
+
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: 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: ["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.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4.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
473
|
}
|
|
471
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
474
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicSelectComponent, decorators: [{
|
|
472
475
|
type: Component,
|
|
473
|
-
args: [{ standalone: true, imports: [NgIf,
|
|
476
|
+
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
477
|
}], propDecorators: { model: [{
|
|
475
478
|
type: Input
|
|
476
479
|
}], group: [{
|
|
@@ -507,12 +510,12 @@ class DynamicTextareaComponent extends DynamicFormFieldBase {
|
|
|
507
510
|
}
|
|
508
511
|
this.change.emit(event);
|
|
509
512
|
}
|
|
510
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
511
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
513
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
514
|
+
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: 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: 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
515
|
}
|
|
513
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
516
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicTextareaComponent, decorators: [{
|
|
514
517
|
type: Component,
|
|
515
|
-
args: [{ standalone: true, imports: [NgIf,
|
|
518
|
+
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
519
|
}], propDecorators: { textarea: [{
|
|
517
520
|
type: ViewChild,
|
|
518
521
|
args: [MatInput, { static: true }]
|
|
@@ -529,6 +532,7 @@ class DynamicTextarea extends DynamicFormFieldValueModel {
|
|
|
529
532
|
constructor(config) {
|
|
530
533
|
super(config);
|
|
531
534
|
this.type = DYNAMIC_FORM_FIELD_TEXTAREA;
|
|
535
|
+
this.placeholder = config.placeholder ?? '';
|
|
532
536
|
this.minLength = config.minLength ?? 0;
|
|
533
537
|
this.maxLength = config.minLength ?? null;
|
|
534
538
|
this.autocomplete = config.autocomplete ?? 'off';
|
|
@@ -540,20 +544,12 @@ class DynamicTextarea extends DynamicFormFieldValueModel {
|
|
|
540
544
|
|
|
541
545
|
class DynamicFormValidators {
|
|
542
546
|
/**
|
|
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
|
|
547
|
+
* Default email validator, the value of the control has to be a valid email address
|
|
552
548
|
* @param msg
|
|
553
549
|
*/
|
|
554
|
-
static
|
|
555
|
-
const message = msg ?? '
|
|
556
|
-
return { name: '
|
|
550
|
+
static email(msg) {
|
|
551
|
+
const message = msg ?? 'Geen geldig emailadres';
|
|
552
|
+
return { name: 'email', validator: Validators.email, message };
|
|
557
553
|
}
|
|
558
554
|
/**
|
|
559
555
|
* Default min validator, the value has to be greater or equal than the the provided number
|
|
@@ -591,14 +587,6 @@ class DynamicFormValidators {
|
|
|
591
587
|
const message = msg ?? `Maximaal ${max} tekens`;
|
|
592
588
|
return { name: 'maxLength', validator: Validators.max(max), message };
|
|
593
589
|
}
|
|
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
590
|
/**
|
|
603
591
|
* Default pattern validator, the value of the control has to match the provided pattern
|
|
604
592
|
* @param pattern: string | RegExp
|
|
@@ -608,6 +596,22 @@ class DynamicFormValidators {
|
|
|
608
596
|
const message = msg ?? 'Geen geldige invoer';
|
|
609
597
|
return { name: 'pattern', validator: Validators.pattern(pattern), message };
|
|
610
598
|
}
|
|
599
|
+
/**
|
|
600
|
+
* Default required validator, the control must contain a value
|
|
601
|
+
* @param msg
|
|
602
|
+
*/
|
|
603
|
+
static required(msg) {
|
|
604
|
+
const message = msg ?? 'Dit veld is verplicht';
|
|
605
|
+
return { name: 'required', validator: Validators.required, message };
|
|
606
|
+
}
|
|
607
|
+
/**
|
|
608
|
+
* Default requiredTrue validator, the value of the control has to be true
|
|
609
|
+
* @param msg
|
|
610
|
+
*/
|
|
611
|
+
static requiredTrue(msg) {
|
|
612
|
+
const message = msg ?? 'Dit veld is verplicht';
|
|
613
|
+
return { name: 'requiredTrue', validator: Validators.requiredTrue, message };
|
|
614
|
+
}
|
|
611
615
|
}
|
|
612
616
|
|
|
613
617
|
var RelationActionType;
|
|
@@ -668,12 +672,16 @@ class DynamicFormRelationsService {
|
|
|
668
672
|
*/
|
|
669
673
|
findRelatedFormField(model, group) {
|
|
670
674
|
const conditionReducer = (controls, condition) => {
|
|
671
|
-
const
|
|
675
|
+
const fieldName = condition.path ?? condition.fieldName;
|
|
676
|
+
// Get the control using the provided path or fieldName
|
|
677
|
+
const control = condition.path
|
|
678
|
+
? group.root.get(condition.path)
|
|
679
|
+
: group.get(condition.fieldName);
|
|
672
680
|
if (!control) {
|
|
673
681
|
console.warn(`No related form control with the name ${condition.fieldName} found`);
|
|
674
682
|
return controls;
|
|
675
683
|
}
|
|
676
|
-
controls[
|
|
684
|
+
controls[fieldName] = control;
|
|
677
685
|
return controls;
|
|
678
686
|
};
|
|
679
687
|
const relationsReducer = (controls, relation) => {
|
|
@@ -714,7 +722,7 @@ class DynamicFormRelationsService {
|
|
|
714
722
|
// Find the FormControl of the related field
|
|
715
723
|
let relatedControl;
|
|
716
724
|
for (const [fieldName, control] of Object.entries(relatedControls)) {
|
|
717
|
-
if (fieldName === condition.fieldName) {
|
|
725
|
+
if (fieldName === (condition.path ?? condition.fieldName)) {
|
|
718
726
|
relatedControl = control;
|
|
719
727
|
break;
|
|
720
728
|
}
|
|
@@ -723,10 +731,10 @@ class DynamicFormRelationsService {
|
|
|
723
731
|
return false;
|
|
724
732
|
// Using the 'normal' type should return true when the condition matches
|
|
725
733
|
if (relation.actionType === action.type) {
|
|
726
|
-
// Shortcut to false when a previous condition check was resolved as false
|
|
734
|
+
// Shortcut to false when a previous condition check was resolved as false in case of the AND operator
|
|
727
735
|
if (index > 0 && operator === RelationOperator.AND && !isMatch)
|
|
728
736
|
return false;
|
|
729
|
-
// Shortcut to true when a previous condition check was resolved as true
|
|
737
|
+
// Shortcut to true when a previous condition check was resolved as true in case of the OR operator
|
|
730
738
|
if (index > 0 && operator === RelationOperator.OR && isMatch)
|
|
731
739
|
return true;
|
|
732
740
|
return condition.value(relatedControl.value);
|
|
@@ -745,10 +753,10 @@ class DynamicFormRelationsService {
|
|
|
745
753
|
};
|
|
746
754
|
return relation.conditions.reduce(reducer, false);
|
|
747
755
|
}
|
|
748
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
749
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
756
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicFormRelationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
757
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicFormRelationsService, providedIn: 'root' }); }
|
|
750
758
|
}
|
|
751
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
759
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicFormRelationsService, decorators: [{
|
|
752
760
|
type: Injectable,
|
|
753
761
|
args: [{
|
|
754
762
|
providedIn: 'root'
|
|
@@ -758,9 +766,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
758
766
|
class DynamicFormFieldComponent {
|
|
759
767
|
constructor() {
|
|
760
768
|
this.change = new EventEmitter();
|
|
761
|
-
this._subs = new Subscription();
|
|
762
769
|
this.dynamicFormService = inject(DynamicFormService);
|
|
763
770
|
this.relationService = inject(DynamicFormRelationsService);
|
|
771
|
+
this._subs = new Subscription();
|
|
764
772
|
}
|
|
765
773
|
/** Get the instance of a control component using the injected custom method or local method */
|
|
766
774
|
get componentType() {
|
|
@@ -860,10 +868,10 @@ class DynamicFormFieldComponent {
|
|
|
860
868
|
createDynamicFormEvent(event, type) {
|
|
861
869
|
return { event, type, control: this._control, form: this.group, model: this.model };
|
|
862
870
|
}
|
|
863
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
864
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
871
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
872
|
+
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
873
|
}
|
|
866
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
874
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicFormFieldComponent, decorators: [{
|
|
867
875
|
type: Component,
|
|
868
876
|
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
877
|
}], propDecorators: { componentViewContainer: [{
|
|
@@ -887,15 +895,6 @@ class DynamicFormComponent {
|
|
|
887
895
|
get flatFormConfig() {
|
|
888
896
|
return this.formConfig.reduce((acc, curr) => acc.concat(curr), []);
|
|
889
897
|
}
|
|
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
898
|
/**
|
|
900
899
|
* Get the current value of the form.
|
|
901
900
|
* @param includeDisabledFields Include the disabled fields of the form, is enabled by default
|
|
@@ -920,12 +919,12 @@ class DynamicFormComponent {
|
|
|
920
919
|
onChange(event) {
|
|
921
920
|
this.change.emit(event);
|
|
922
921
|
}
|
|
923
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
924
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
922
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
923
|
+
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
924
|
}
|
|
926
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
925
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicFormComponent, decorators: [{
|
|
927
926
|
type: Component,
|
|
928
|
-
args: [{ standalone: true, imports: [
|
|
927
|
+
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
928
|
}], propDecorators: { group: [{
|
|
930
929
|
type: Input,
|
|
931
930
|
args: [{ required: true }]
|