@olafvv/ngx-dynamic-form 0.5.1 → 19.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/olafvv-ngx-dynamic-form.mjs +72 -57
- package/fesm2022/olafvv-ngx-dynamic-form.mjs.map +1 -1
- package/lib/controls/radio-group/dynamic-radio-group.component.d.ts +1 -1
- package/lib/controls/select/dynamic-select.component.d.ts +1 -1
- package/lib/models/constants/dynamic-relations.const.d.ts +5 -0
- package/package.json +5 -7
- package/esm2022/lib/components/dynamic-form/dynamic-form.component.mjs +0 -56
- package/esm2022/lib/components/dynamic-form-field/dynamic-form-field.component.mjs +0 -153
- package/esm2022/lib/controls/button/dynamic-button.component.mjs +0 -21
- package/esm2022/lib/controls/button/dynamic-button.model.mjs +0 -11
- package/esm2022/lib/controls/button-toggles/dynamic-button-toggles.component.mjs +0 -28
- package/esm2022/lib/controls/button-toggles/dynamic-button-toggles.model.mjs +0 -11
- package/esm2022/lib/controls/checkbox/dynamic-checkbox.component.mjs +0 -26
- package/esm2022/lib/controls/checkbox/dynamic-checkbox.model.mjs +0 -21
- package/esm2022/lib/controls/controls.mjs +0 -10
- package/esm2022/lib/controls/datepicker/dynamic-datepicker.component.mjs +0 -31
- package/esm2022/lib/controls/datepicker/dynamic-datepicker.model.mjs +0 -13
- package/esm2022/lib/controls/input/dynamic-input.component.mjs +0 -54
- package/esm2022/lib/controls/input/dynamic-input.model.mjs +0 -22
- package/esm2022/lib/controls/radio-group/dynamic-radio-group.component.mjs +0 -27
- package/esm2022/lib/controls/radio-group/dynamic-radio-group.model.mjs +0 -11
- package/esm2022/lib/controls/readonly/dynamic-readonly.component.mjs +0 -18
- package/esm2022/lib/controls/readonly/dynamic-readonly.model.mjs +0 -9
- package/esm2022/lib/controls/select/dynamic-select.component.mjs +0 -33
- package/esm2022/lib/controls/select/dynamic-select.model.mjs +0 -11
- package/esm2022/lib/controls/textarea/dynamic-textarea.component.mjs +0 -46
- package/esm2022/lib/controls/textarea/dynamic-textarea.model.mjs +0 -16
- package/esm2022/lib/models/classes/dynamic-form-field-base.mjs +0 -31
- package/esm2022/lib/models/classes/dynamic-form-field-model.mjs +0 -34
- package/esm2022/lib/models/classes/dynamic-form-field-option-model.mjs +0 -48
- package/esm2022/lib/models/classes/dynamic-form-field-value-model.mjs +0 -24
- package/esm2022/lib/models/classes/dynamic-form-validators.mjs +0 -73
- package/esm2022/lib/models/constants/dynamic-relations.const.mjs +0 -34
- package/esm2022/lib/models/index.mjs +0 -12
- package/esm2022/lib/models/interfaces/dynamic-form-field-config.interface.mjs +0 -2
- package/esm2022/lib/models/interfaces/dynamic-form-field-event.interface.mjs +0 -2
- package/esm2022/lib/models/interfaces/dynamic-form-field-relation.interface.mjs +0 -15
- package/esm2022/lib/models/interfaces/dynamic-form-validator.interface.mjs +0 -2
- package/esm2022/lib/models/tokens/dynamic-form-field-map-fn.token.mjs +0 -3
- package/esm2022/lib/models/types/dynamic-form-config.type.mjs +0 -2
- package/esm2022/lib/models/types/related-form-controls.type.mjs +0 -2
- package/esm2022/lib/services/dynamic-form-relations.service.mjs +0 -108
- package/esm2022/lib/services/dynamic-form.service.mjs +0 -81
- package/esm2022/lib/services/dynamic-validations.service.mjs +0 -37
- package/esm2022/olafvv-ngx-dynamic-form.mjs +0 -5
- package/esm2022/public-api.mjs +0 -8
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { AsyncPipe, NgIf, NgClass } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { InjectionToken, Injectable, Inject, Optional, EventEmitter,
|
|
3
|
+
import { InjectionToken, Injectable, Inject, Optional, EventEmitter, Output, Input, Component, signal, ViewChild, inject, Injector, ChangeDetectorRef, 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';
|
|
@@ -22,7 +22,6 @@ import * as i6 from '@angular/material/progress-spinner';
|
|
|
22
22
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
23
23
|
import * as i2$2 from '@angular/material/radio';
|
|
24
24
|
import { MatRadioModule } from '@angular/material/radio';
|
|
25
|
-
import * as i4$1 from '@angular/material/core';
|
|
26
25
|
import { MatOptionModule } from '@angular/material/core';
|
|
27
26
|
import * as i3$1 from '@angular/material/select';
|
|
28
27
|
import { MatSelectModule } from '@angular/material/select';
|
|
@@ -55,10 +54,10 @@ class DynamicFormValidationsService {
|
|
|
55
54
|
}
|
|
56
55
|
control.updateValueAndValidity();
|
|
57
56
|
}
|
|
58
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
59
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
57
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicFormValidationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
58
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicFormValidationsService, providedIn: 'root' }); }
|
|
60
59
|
}
|
|
61
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
60
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicFormValidationsService, decorators: [{
|
|
62
61
|
type: Injectable,
|
|
63
62
|
args: [{
|
|
64
63
|
providedIn: 'root'
|
|
@@ -124,10 +123,10 @@ class DynamicFormService {
|
|
|
124
123
|
});
|
|
125
124
|
}));
|
|
126
125
|
}
|
|
127
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
128
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
126
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicFormService, deps: [{ token: DYNAMIC_FORM_FIELD_MAP_FN, optional: true }, { token: i1.FormBuilder }, { token: DynamicFormValidationsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
127
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicFormService, providedIn: 'root' }); }
|
|
129
128
|
}
|
|
130
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
129
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicFormService, decorators: [{
|
|
131
130
|
type: Injectable,
|
|
132
131
|
args: [{
|
|
133
132
|
providedIn: 'root'
|
|
@@ -175,12 +174,12 @@ class DynamicButtonTogglesComponent extends DynamicFormFieldBase {
|
|
|
175
174
|
super(...arguments);
|
|
176
175
|
this.change = new EventEmitter();
|
|
177
176
|
}
|
|
178
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
179
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
177
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicButtonTogglesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
178
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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 }] }); }
|
|
180
179
|
}
|
|
181
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
180
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicButtonTogglesComponent, decorators: [{
|
|
182
181
|
type: Component,
|
|
183
|
-
args: [{
|
|
182
|
+
args: [{ 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"] }]
|
|
184
183
|
}], propDecorators: { model: [{
|
|
185
184
|
type: Input
|
|
186
185
|
}], group: [{
|
|
@@ -303,12 +302,12 @@ class DynamicButtonComponent extends DynamicFormFieldBase {
|
|
|
303
302
|
onClick() {
|
|
304
303
|
this.model.onClick();
|
|
305
304
|
}
|
|
306
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
307
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
305
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
306
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", 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 [disabled]=\"model.disabled\"\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"] }] }); }
|
|
308
307
|
}
|
|
309
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
308
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicButtonComponent, decorators: [{
|
|
310
309
|
type: Component,
|
|
311
|
-
args: [{
|
|
310
|
+
args: [{ imports: [MatButtonModule], selector: 'dynamic-button', template: "<div class=\"dynamic-button-wrapper\">\n <button mat-button\n [id]=\"id\"\n [disabled]=\"model.disabled\"\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"] }]
|
|
312
311
|
}], propDecorators: { model: [{
|
|
313
312
|
type: Input
|
|
314
313
|
}], group: [{
|
|
@@ -330,12 +329,12 @@ class DynamicCheckboxComponent extends DynamicFormFieldBase {
|
|
|
330
329
|
super(...arguments);
|
|
331
330
|
this.change = new EventEmitter();
|
|
332
331
|
}
|
|
333
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
334
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
332
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
333
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", 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", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] }); }
|
|
335
334
|
}
|
|
336
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
335
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicCheckboxComponent, decorators: [{
|
|
337
336
|
type: Component,
|
|
338
|
-
args: [{ selector: 'dynamic-checkbox',
|
|
337
|
+
args: [{ selector: 'dynamic-checkbox', 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>" }]
|
|
339
338
|
}], propDecorators: { model: [{
|
|
340
339
|
type: Input
|
|
341
340
|
}], group: [{
|
|
@@ -369,12 +368,12 @@ class DynamicDatepickerComponent extends DynamicFormFieldBase {
|
|
|
369
368
|
super(...arguments);
|
|
370
369
|
this.change = new EventEmitter();
|
|
371
370
|
}
|
|
372
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
373
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
371
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
372
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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 @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\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.MatError, selector: "mat-error, [matError]", inputs: ["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", "disabledInteractive"], 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"] }] }); }
|
|
374
373
|
}
|
|
375
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
374
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicDatepickerComponent, decorators: [{
|
|
376
375
|
type: Component,
|
|
377
|
-
args: [{
|
|
376
|
+
args: [{ 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 @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\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
|
|
378
377
|
}], propDecorators: { model: [{
|
|
379
378
|
type: Input
|
|
380
379
|
}], group: [{
|
|
@@ -416,12 +415,12 @@ class DynamicInputComponent extends DynamicFormFieldBase {
|
|
|
416
415
|
}
|
|
417
416
|
this.change.emit(event);
|
|
418
417
|
}
|
|
419
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
420
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
418
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
419
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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 <div matSuffix\n *ngIf=\"model.showLoader()\"\n class=\"loader-icon\">\n <mat-spinner diameter=\"16\"\n color=\"primary\"></mat-spinner>\n </div>\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%}mat-form-field .loader-icon{padding:8px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none;margin:0}input[type=number]{appearance:textfield}\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", "disabledInteractive"], 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"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
421
420
|
}
|
|
422
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
421
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicInputComponent, decorators: [{
|
|
423
422
|
type: Component,
|
|
424
|
-
args: [{
|
|
423
|
+
args: [{ imports: [NgIf, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule], selector: 'dynamic-input', 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 <div matSuffix\n *ngIf=\"model.showLoader()\"\n class=\"loader-icon\">\n <mat-spinner diameter=\"16\"\n color=\"primary\"></mat-spinner>\n </div>\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%}mat-form-field .loader-icon{padding:8px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none;margin:0}input[type=number]{appearance:textfield}\n"] }]
|
|
425
424
|
}], propDecorators: { input: [{
|
|
426
425
|
type: ViewChild,
|
|
427
426
|
args: [MatInput, { static: true }]
|
|
@@ -458,12 +457,12 @@ class DymamicRadioGroupComponent extends DynamicFormFieldBase {
|
|
|
458
457
|
super(...arguments);
|
|
459
458
|
this.change = new EventEmitter();
|
|
460
459
|
}
|
|
461
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
462
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
460
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DymamicRadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
461
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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" }] }); }
|
|
463
462
|
}
|
|
464
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
463
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DymamicRadioGroupComponent, decorators: [{
|
|
465
464
|
type: Component,
|
|
466
|
-
args: [{
|
|
465
|
+
args: [{ 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"] }]
|
|
467
466
|
}], propDecorators: { model: [{
|
|
468
467
|
type: Input
|
|
469
468
|
}], group: [{
|
|
@@ -483,12 +482,12 @@ class DynamicRadioGroup extends DynamicFormFieldOptionModel {
|
|
|
483
482
|
}
|
|
484
483
|
|
|
485
484
|
class DynamicReadonlyComponent extends DynamicFormFieldBase {
|
|
486
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
487
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
485
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicReadonlyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
486
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", 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"] }] }); }
|
|
488
487
|
}
|
|
489
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
488
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicReadonlyComponent, decorators: [{
|
|
490
489
|
type: Component,
|
|
491
|
-
args: [{
|
|
490
|
+
args: [{ 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"] }]
|
|
492
491
|
}], propDecorators: { model: [{
|
|
493
492
|
type: Input
|
|
494
493
|
}], group: [{
|
|
@@ -508,12 +507,12 @@ class DynamicSelectComponent extends DynamicFormFieldBase {
|
|
|
508
507
|
super(...arguments);
|
|
509
508
|
this.change = new EventEmitter();
|
|
510
509
|
}
|
|
511
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
512
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
510
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
511
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3$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", "disabledInteractive"], exportAs: ["matInput"] }] }); }
|
|
513
512
|
}
|
|
514
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
513
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicSelectComponent, decorators: [{
|
|
515
514
|
type: Component,
|
|
516
|
-
args: [{
|
|
515
|
+
args: [{ 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"] }]
|
|
517
516
|
}], propDecorators: { model: [{
|
|
518
517
|
type: Input
|
|
519
518
|
}], group: [{
|
|
@@ -550,12 +549,12 @@ class DynamicTextareaComponent extends DynamicFormFieldBase {
|
|
|
550
549
|
}
|
|
551
550
|
this.change.emit(event);
|
|
552
551
|
}
|
|
553
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
554
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
552
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
553
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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", "disabledInteractive"], 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"] }] }); }
|
|
555
554
|
}
|
|
556
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
555
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicTextareaComponent, decorators: [{
|
|
557
556
|
type: Component,
|
|
558
|
-
args: [{
|
|
557
|
+
args: [{ 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"] }]
|
|
559
558
|
}], propDecorators: { textarea: [{
|
|
560
559
|
type: ViewChild,
|
|
561
560
|
args: [MatInput, { static: true }]
|
|
@@ -669,6 +668,9 @@ var RelationOperator;
|
|
|
669
668
|
RelationOperator["OR"] = "OR";
|
|
670
669
|
})(RelationOperator || (RelationOperator = {}));
|
|
671
670
|
|
|
671
|
+
/**
|
|
672
|
+
* Relation action to disable/enable a form control.
|
|
673
|
+
*/
|
|
672
674
|
const DISABLE_ACTION = {
|
|
673
675
|
type: RelationActionType.DISABLED,
|
|
674
676
|
reversedType: RelationActionType.ENABLED,
|
|
@@ -676,6 +678,9 @@ const DISABLE_ACTION = {
|
|
|
676
678
|
model.disabled = hasMatch;
|
|
677
679
|
}
|
|
678
680
|
};
|
|
681
|
+
/**
|
|
682
|
+
* Relation action to toggle the visibility of a form control
|
|
683
|
+
*/
|
|
679
684
|
const HIDDEN_ACTION = {
|
|
680
685
|
type: RelationActionType.HIDDEN,
|
|
681
686
|
reversedType: RelationActionType.VISIBLE,
|
|
@@ -683,6 +688,9 @@ const HIDDEN_ACTION = {
|
|
|
683
688
|
model.hidden = hasMatch;
|
|
684
689
|
}
|
|
685
690
|
};
|
|
691
|
+
/**
|
|
692
|
+
* Relation action to add or remove the required validator to a form control
|
|
693
|
+
*/
|
|
686
694
|
const REQUIRED_ACTION = {
|
|
687
695
|
type: RelationActionType.REQUIRED,
|
|
688
696
|
reversedType: RelationActionType.OPTIONAL,
|
|
@@ -690,14 +698,21 @@ const REQUIRED_ACTION = {
|
|
|
690
698
|
const hasRequiredValidation = !!model.validators.find((f) => f.name === 'required');
|
|
691
699
|
let validators;
|
|
692
700
|
if (hasMatch) {
|
|
701
|
+
// If the model already contains the required validator, return the model validators.
|
|
702
|
+
// Otherwise, add the required validator
|
|
693
703
|
validators = hasRequiredValidation ? model.validators : [...model.validators, DynamicFormValidators.required()];
|
|
694
704
|
}
|
|
695
705
|
else {
|
|
696
|
-
validators = model.validators.filter((f) => f.name
|
|
706
|
+
validators = model.validators.filter((f) => f.name !== 'required');
|
|
697
707
|
}
|
|
698
708
|
injector.get(DynamicFormValidationsService).updateValidators(validators, control);
|
|
699
709
|
}
|
|
700
710
|
};
|
|
711
|
+
/**
|
|
712
|
+
* Export all Relation actions so the DynamicFormService can easily access all Relation actions.
|
|
713
|
+
* This way if there are any new actions, all you have to do is add them here.
|
|
714
|
+
* TODO: This can be potentially be expanded towords an InjectionToken to provide the possibility for custom relationactions.
|
|
715
|
+
*/
|
|
701
716
|
const RELATION_ACTIONS = [DISABLE_ACTION, HIDDEN_ACTION, REQUIRED_ACTION];
|
|
702
717
|
|
|
703
718
|
class DynamicFormRelationsService {
|
|
@@ -718,7 +733,7 @@ class DynamicFormRelationsService {
|
|
|
718
733
|
? group.root.get(condition.path)
|
|
719
734
|
: group.get(condition.fieldName);
|
|
720
735
|
if (!control) {
|
|
721
|
-
console.warn(`No related form control with the name ${
|
|
736
|
+
console.warn(`No related form control with the name ${fieldName} found`);
|
|
722
737
|
return controls;
|
|
723
738
|
}
|
|
724
739
|
controls[fieldName] = control;
|
|
@@ -793,10 +808,10 @@ class DynamicFormRelationsService {
|
|
|
793
808
|
};
|
|
794
809
|
return relation.conditions.reduce(reducer, false);
|
|
795
810
|
}
|
|
796
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
797
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
811
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicFormRelationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
812
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicFormRelationsService, providedIn: 'root' }); }
|
|
798
813
|
}
|
|
799
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
814
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicFormRelationsService, decorators: [{
|
|
800
815
|
type: Injectable,
|
|
801
816
|
args: [{
|
|
802
817
|
providedIn: 'root'
|
|
@@ -912,12 +927,12 @@ class DynamicFormFieldComponent {
|
|
|
912
927
|
createDynamicFormEvent(event, type) {
|
|
913
928
|
return { event, type, control: this._control, form: this.group, model: this.model };
|
|
914
929
|
}
|
|
915
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
916
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
930
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
931
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", 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 }); }
|
|
917
932
|
}
|
|
918
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
933
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicFormFieldComponent, decorators: [{
|
|
919
934
|
type: Component,
|
|
920
|
-
args: [{
|
|
935
|
+
args: [{ 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>" }]
|
|
921
936
|
}], propDecorators: { componentViewContainer: [{
|
|
922
937
|
type: ViewChild,
|
|
923
938
|
args: ['componentViewContainer', { read: ViewContainerRef, static: true }]
|
|
@@ -963,12 +978,12 @@ class DynamicFormComponent {
|
|
|
963
978
|
onChange(event) {
|
|
964
979
|
this.change.emit(event);
|
|
965
980
|
}
|
|
966
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
967
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
981
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
982
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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;overflow:hidden}.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-5{width:5%}.dynamic-form-row .form-field-width-10{width:10%}.dynamic-form-row .form-field-width-15{width:15%}.dynamic-form-row .form-field-width-20{width:20%}.dynamic-form-row .form-field-width-25{width:25%}.dynamic-form-row .form-field-width-30{width:30%}.dynamic-form-row .form-field-width-35{width:35%}.dynamic-form-row .form-field-width-40{width:40%}.dynamic-form-row .form-field-width-45{width:45%}.dynamic-form-row .form-field-width-50{width:50%}.dynamic-form-row .form-field-width-55{width:55%}.dynamic-form-row .form-field-width-60{width:60%}.dynamic-form-row .form-field-width-65{width:65%}.dynamic-form-row .form-field-width-70{width:70%}.dynamic-form-row .form-field-width-75{width:75%}.dynamic-form-row .form-field-width-80{width:80%}.dynamic-form-row .form-field-width-85{width:85%}.dynamic-form-row .form-field-width-90{width:90%}.dynamic-form-row .form-field-width-95{width:95%}.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 }); }
|
|
968
983
|
}
|
|
969
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
984
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicFormComponent, decorators: [{
|
|
970
985
|
type: Component,
|
|
971
|
-
args: [{
|
|
986
|
+
args: [{ 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;overflow:hidden}.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-5{width:5%}.dynamic-form-row .form-field-width-10{width:10%}.dynamic-form-row .form-field-width-15{width:15%}.dynamic-form-row .form-field-width-20{width:20%}.dynamic-form-row .form-field-width-25{width:25%}.dynamic-form-row .form-field-width-30{width:30%}.dynamic-form-row .form-field-width-35{width:35%}.dynamic-form-row .form-field-width-40{width:40%}.dynamic-form-row .form-field-width-45{width:45%}.dynamic-form-row .form-field-width-50{width:50%}.dynamic-form-row .form-field-width-55{width:55%}.dynamic-form-row .form-field-width-60{width:60%}.dynamic-form-row .form-field-width-65{width:65%}.dynamic-form-row .form-field-width-70{width:70%}.dynamic-form-row .form-field-width-75{width:75%}.dynamic-form-row .form-field-width-80{width:80%}.dynamic-form-row .form-field-width-85{width:85%}.dynamic-form-row .form-field-width-90{width:90%}.dynamic-form-row .form-field-width-95{width:95%}.dynamic-form-row .form-field-width-100{width:100%}\n"] }]
|
|
972
987
|
}], propDecorators: { group: [{
|
|
973
988
|
type: Input,
|
|
974
989
|
args: [{ required: true }]
|