@olafvv/ngx-dynamic-form 19.0.0 → 20.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 +52 -52
- package/fesm2022/olafvv-ngx-dynamic-form.mjs.map +1 -1
- package/index.d.ts +561 -3
- package/package.json +5 -5
- package/lib/components/dynamic-form/dynamic-form.component.d.ts +0 -31
- package/lib/components/dynamic-form-field/dynamic-form-field.component.d.ts +0 -49
- package/lib/controls/button/dynamic-button.component.d.ts +0 -11
- package/lib/controls/button/dynamic-button.model.d.ts +0 -23
- package/lib/controls/button-toggles/dynamic-button-toggles.component.d.ts +0 -13
- package/lib/controls/button-toggles/dynamic-button-toggles.model.d.ts +0 -14
- package/lib/controls/checkbox/dynamic-checkbox.component.d.ts +0 -13
- package/lib/controls/checkbox/dynamic-checkbox.model.d.ts +0 -15
- package/lib/controls/controls.d.ts +0 -9
- package/lib/controls/datepicker/dynamic-datepicker.component.d.ts +0 -13
- package/lib/controls/datepicker/dynamic-datepicker.model.d.ts +0 -21
- package/lib/controls/input/dynamic-input.component.d.ts +0 -19
- package/lib/controls/input/dynamic-input.model.d.ts +0 -35
- package/lib/controls/radio-group/dynamic-radio-group.component.d.ts +0 -13
- package/lib/controls/radio-group/dynamic-radio-group.model.d.ts +0 -14
- package/lib/controls/readonly/dynamic-readonly.component.d.ts +0 -10
- package/lib/controls/readonly/dynamic-readonly.model.d.ts +0 -9
- package/lib/controls/select/dynamic-select.component.d.ts +0 -13
- package/lib/controls/select/dynamic-select.model.d.ts +0 -19
- package/lib/controls/textarea/dynamic-textarea.component.d.ts +0 -18
- package/lib/controls/textarea/dynamic-textarea.model.d.ts +0 -46
- package/lib/models/classes/dynamic-form-field-base.d.ts +0 -23
- package/lib/models/classes/dynamic-form-field-model.d.ts +0 -26
- package/lib/models/classes/dynamic-form-field-option-model.d.ts +0 -41
- package/lib/models/classes/dynamic-form-field-value-model.d.ts +0 -33
- package/lib/models/classes/dynamic-form-validators.d.ts +0 -48
- package/lib/models/constants/dynamic-relations.const.d.ts +0 -15
- package/lib/models/index.d.ts +0 -11
- package/lib/models/interfaces/dynamic-form-field-config.interface.d.ts +0 -68
- package/lib/models/interfaces/dynamic-form-field-event.interface.d.ts +0 -10
- package/lib/models/interfaces/dynamic-form-field-relation.interface.d.ts +0 -28
- package/lib/models/interfaces/dynamic-form-validator.interface.d.ts +0 -6
- package/lib/models/tokens/dynamic-form-field-map-fn.token.d.ts +0 -2
- package/lib/models/types/dynamic-form-config.type.d.ts +0 -2
- package/lib/models/types/related-form-controls.type.d.ts +0 -4
- package/lib/services/dynamic-form-relations.service.d.ts +0 -26
- package/lib/services/dynamic-form.service.d.ts +0 -46
- package/lib/services/dynamic-validations.service.d.ts +0 -20
- package/public-api.d.ts +0 -4
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AsyncPipe,
|
|
1
|
+
import { AsyncPipe, NgClass } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
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';
|
|
@@ -54,10 +54,10 @@ class DynamicFormValidationsService {
|
|
|
54
54
|
}
|
|
55
55
|
control.updateValueAndValidity();
|
|
56
56
|
}
|
|
57
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
58
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
57
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFormValidationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
58
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFormValidationsService, providedIn: 'root' }); }
|
|
59
59
|
}
|
|
60
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
60
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFormValidationsService, decorators: [{
|
|
61
61
|
type: Injectable,
|
|
62
62
|
args: [{
|
|
63
63
|
providedIn: 'root'
|
|
@@ -123,10 +123,10 @@ class DynamicFormService {
|
|
|
123
123
|
});
|
|
124
124
|
}));
|
|
125
125
|
}
|
|
126
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
127
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
126
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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: "20.3.16", ngImport: i0, type: DynamicFormService, providedIn: 'root' }); }
|
|
128
128
|
}
|
|
129
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
129
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFormService, decorators: [{
|
|
130
130
|
type: Injectable,
|
|
131
131
|
args: [{
|
|
132
132
|
providedIn: 'root'
|
|
@@ -174,12 +174,12 @@ class DynamicButtonTogglesComponent extends DynamicFormFieldBase {
|
|
|
174
174
|
super(...arguments);
|
|
175
175
|
this.change = new EventEmitter();
|
|
176
176
|
}
|
|
177
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
178
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
177
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicButtonTogglesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
178
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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(--mat-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: "ngmodule", type: MatFormFieldModule }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
179
179
|
}
|
|
180
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
180
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicButtonTogglesComponent, decorators: [{
|
|
181
181
|
type: Component,
|
|
182
|
-
args: [{ imports: [
|
|
182
|
+
args: [{ imports: [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(--mat-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"] }]
|
|
183
183
|
}], propDecorators: { model: [{
|
|
184
184
|
type: Input
|
|
185
185
|
}], group: [{
|
|
@@ -204,7 +204,7 @@ class DynamicFormFieldModel {
|
|
|
204
204
|
// Create a disabled Subject and Observable to change the state of the FormControl inside DynamicFormFieldComponent by subscribing to disabledChange
|
|
205
205
|
this.disabled$ = new BehaviorSubject(config.disabled ?? false);
|
|
206
206
|
this.disabledChange = this.disabled$.asObservable();
|
|
207
|
-
this.$hidden = signal(config.hidden ?? false);
|
|
207
|
+
this.$hidden = signal(config.hidden ?? false, ...(ngDevMode ? [{ debugName: "$hidden" }] : []));
|
|
208
208
|
}
|
|
209
209
|
get disabled() {
|
|
210
210
|
return this.disabled$.getValue();
|
|
@@ -302,10 +302,10 @@ class DynamicButtonComponent extends DynamicFormFieldBase {
|
|
|
302
302
|
onClick() {
|
|
303
303
|
this.model.onClick();
|
|
304
304
|
}
|
|
305
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
306
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
305
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
306
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", 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[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
|
|
307
307
|
}
|
|
308
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
308
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicButtonComponent, decorators: [{
|
|
309
309
|
type: Component,
|
|
310
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"] }]
|
|
311
311
|
}], propDecorators: { model: [{
|
|
@@ -329,10 +329,10 @@ class DynamicCheckboxComponent extends DynamicFormFieldBase {
|
|
|
329
329
|
super(...arguments);
|
|
330
330
|
this.change = new EventEmitter();
|
|
331
331
|
}
|
|
332
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
333
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
332
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
333
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", 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"] }] }); }
|
|
334
334
|
}
|
|
335
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
335
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicCheckboxComponent, decorators: [{
|
|
336
336
|
type: Component,
|
|
337
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>" }]
|
|
338
338
|
}], propDecorators: { model: [{
|
|
@@ -368,12 +368,12 @@ class DynamicDatepickerComponent extends DynamicFormFieldBase {
|
|
|
368
368
|
super(...arguments);
|
|
369
369
|
this.change = new EventEmitter();
|
|
370
370
|
}
|
|
371
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
372
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
371
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
372
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DynamicDatepickerComponent, isStandalone: true, selector: "dynamic-datepicker", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field\n [formGroup]=\"group\"\n [id]=\"model.id\"\n color=\"primary\">\n @if (model.label) {\n <mat-label>{{ model.label }}</mat-label>\n }\n\n <input\n matInput\n [min]=\"model.min\"\n [max]=\"model.max\"\n [matDatepicker]=\"picker\" />\n\n @if (model.hint) {\n <mat-hint>{{ model.hint }}</mat-hint>\n }\n\n <mat-datepicker-toggle\n matIconSuffix\n [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker\n #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 @if (hasError(validator.name)) {\n <mat-error>{{ validator.message }}</mat-error>\n }\n </ng-container>\n }\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}\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"] }, { 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"] }] }); }
|
|
373
373
|
}
|
|
374
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
374
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicDatepickerComponent, decorators: [{
|
|
375
375
|
type: Component,
|
|
376
|
-
args: [{ imports: [
|
|
376
|
+
args: [{ imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatDatepickerModule], selector: 'dynamic-datepicker', template: "<mat-form-field\n [formGroup]=\"group\"\n [id]=\"model.id\"\n color=\"primary\">\n @if (model.label) {\n <mat-label>{{ model.label }}</mat-label>\n }\n\n <input\n matInput\n [min]=\"model.min\"\n [max]=\"model.max\"\n [matDatepicker]=\"picker\" />\n\n @if (model.hint) {\n <mat-hint>{{ model.hint }}</mat-hint>\n }\n\n <mat-datepicker-toggle\n matIconSuffix\n [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker\n #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 @if (hasError(validator.name)) {\n <mat-error>{{ validator.message }}</mat-error>\n }\n </ng-container>\n }\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}\n"] }]
|
|
377
377
|
}], propDecorators: { model: [{
|
|
378
378
|
type: Input
|
|
379
379
|
}], group: [{
|
|
@@ -415,12 +415,12 @@ class DynamicInputComponent extends DynamicFormFieldBase {
|
|
|
415
415
|
}
|
|
416
416
|
this.change.emit(event);
|
|
417
417
|
}
|
|
418
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
419
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
418
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
419
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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\n [formGroup]=\"group\"\n [id]=\"id\"\n color=\"primary\">\n @if (model.label) {\n <mat-label>{{ model.label }}</mat-label>\n }\n\n @if (model.prefix) {\n <span matTextPrefix>{{ model.prefix }}</span>\n }\n\n <input\n 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 @if (showClear) {\n <button\n matSuffix\n mat-icon-button\n (click)=\"resetControl()\">\n <mat-icon fontIcon=\"clear\"></mat-icon>\n </button>\n }\n\n @if (model.showLoader()) {\n <div\n matSuffix\n class=\"loader-icon\">\n <mat-spinner\n diameter=\"16\"\n color=\"primary\"></mat-spinner>\n </div>\n }\n\n @if (model.hint) {\n <mat-hint align=\"start\">{{ model.hint }}</mat-hint>\n }\n\n @if (model.maxLength) {\n <mat-hint align=\"end\">{{ maxCountText }}</mat-hint>\n }\n\n @for (validator of model.validators; track validator.name) {\n <ng-container ngProjectAs=\"mat-error\">\n @if (hasError(validator.name)) {\n <mat-error>{{ validator.message }}</mat-error>\n }\n </ng-container>\n }\n</mat-form-field>\n", 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: "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], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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"] }] }); }
|
|
420
420
|
}
|
|
421
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
421
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicInputComponent, decorators: [{
|
|
422
422
|
type: Component,
|
|
423
|
-
args: [{ imports: [
|
|
423
|
+
args: [{ imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule], selector: 'dynamic-input', template: "<mat-form-field\n [formGroup]=\"group\"\n [id]=\"id\"\n color=\"primary\">\n @if (model.label) {\n <mat-label>{{ model.label }}</mat-label>\n }\n\n @if (model.prefix) {\n <span matTextPrefix>{{ model.prefix }}</span>\n }\n\n <input\n 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 @if (showClear) {\n <button\n matSuffix\n mat-icon-button\n (click)=\"resetControl()\">\n <mat-icon fontIcon=\"clear\"></mat-icon>\n </button>\n }\n\n @if (model.showLoader()) {\n <div\n matSuffix\n class=\"loader-icon\">\n <mat-spinner\n diameter=\"16\"\n color=\"primary\"></mat-spinner>\n </div>\n }\n\n @if (model.hint) {\n <mat-hint align=\"start\">{{ model.hint }}</mat-hint>\n }\n\n @if (model.maxLength) {\n <mat-hint align=\"end\">{{ maxCountText }}</mat-hint>\n }\n\n @for (validator of model.validators; track validator.name) {\n <ng-container ngProjectAs=\"mat-error\">\n @if (hasError(validator.name)) {\n <mat-error>{{ validator.message }}</mat-error>\n }\n </ng-container>\n }\n</mat-form-field>\n", 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"] }]
|
|
424
424
|
}], propDecorators: { input: [{
|
|
425
425
|
type: ViewChild,
|
|
426
426
|
args: [MatInput, { static: true }]
|
|
@@ -457,12 +457,12 @@ class DymamicRadioGroupComponent extends DynamicFormFieldBase {
|
|
|
457
457
|
super(...arguments);
|
|
458
458
|
this.change = new EventEmitter();
|
|
459
459
|
}
|
|
460
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
461
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
460
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DymamicRadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
461
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DymamicRadioGroupComponent, isStandalone: true, selector: "dynamic-radio-group", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<div\n class=\"dynamic-radio-group-wrapper\"\n [formGroup]=\"group\">\n @if (model.label) {\n <label>{{ model.label }}</label>\n }\n <mat-radio-group\n [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\n [value]=\"option.value\"\n [labelPosition]=\"model.labelPosition\">\n {{ option.label }}\n </mat-radio-button>\n }\n </mat-radio-group>\n</div>\n", styles: [".dynamic-radio-group-wrapper label{display:block;font-size:var(--mat-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: 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" }] }); }
|
|
462
462
|
}
|
|
463
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
463
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DymamicRadioGroupComponent, decorators: [{
|
|
464
464
|
type: Component,
|
|
465
|
-
args: [{ imports: [
|
|
465
|
+
args: [{ imports: [NgClass, ReactiveFormsModule, MatRadioModule, AsyncPipe], selector: 'dynamic-radio-group', template: "<div\n class=\"dynamic-radio-group-wrapper\"\n [formGroup]=\"group\">\n @if (model.label) {\n <label>{{ model.label }}</label>\n }\n <mat-radio-group\n [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\n [value]=\"option.value\"\n [labelPosition]=\"model.labelPosition\">\n {{ option.label }}\n </mat-radio-button>\n }\n </mat-radio-group>\n</div>\n", styles: [".dynamic-radio-group-wrapper label{display:block;font-size:var(--mat-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"] }]
|
|
466
466
|
}], propDecorators: { model: [{
|
|
467
467
|
type: Input
|
|
468
468
|
}], group: [{
|
|
@@ -482,12 +482,12 @@ class DynamicRadioGroup extends DynamicFormFieldOptionModel {
|
|
|
482
482
|
}
|
|
483
483
|
|
|
484
484
|
class DynamicReadonlyComponent extends DynamicFormFieldBase {
|
|
485
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
486
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
485
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicReadonlyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
486
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", 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(--mat-theme-text-primary-on-background, rgba(0, 0, 0, .87))}.dynamic-form-field-readonly .label{font-size:var(--mat-typography-body2-font-size, 14px);line-height:var(--mat-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"] }] }); }
|
|
487
487
|
}
|
|
488
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
488
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicReadonlyComponent, decorators: [{
|
|
489
489
|
type: Component,
|
|
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(--
|
|
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(--mat-theme-text-primary-on-background, rgba(0, 0, 0, .87))}.dynamic-form-field-readonly .label{font-size:var(--mat-typography-body2-font-size, 14px);line-height:var(--mat-typography-body2-line-height, 20px);margin-bottom:8px}\n"] }]
|
|
491
491
|
}], propDecorators: { model: [{
|
|
492
492
|
type: Input
|
|
493
493
|
}], group: [{
|
|
@@ -507,12 +507,12 @@ class DynamicSelectComponent extends DynamicFormFieldBase {
|
|
|
507
507
|
super(...arguments);
|
|
508
508
|
this.change = new EventEmitter();
|
|
509
509
|
}
|
|
510
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
511
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
510
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
511
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DynamicSelectComponent, isStandalone: true, selector: "dynamic-select", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field\n [formGroup]=\"group\"\n [id]=\"id\"\n color=\"primary\">\n <mat-label>{{ model.label }}</mat-label>\n\n <!-- Template for select without grouped options -->\n @if (model.options$ | async; as options) {\n @if (!model.native) {\n <mat-select\n [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 } @else {\n <select\n 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 }\n }\n\n <!-- Template for select with grouped options -->\n @if (model.groupedOptions$ | async; as groupedOptions) {\n @if (!model.native) {\n <mat-select\n [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 </mat-select>\n } @else {\n <select\n matNativeControl\n (selectionchange)=\"onChange($event)\">\n @for (group of groupedOptions; track group.name) {\n =\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 }\n }\n\n @if (model.hint) {\n <mat-hint align=\"start\">{{ model.hint }}</mat-hint>\n }\n\n @for (validator of model.validators; track validator.name) {\n <ng-container ngProjectAs=\"mat-error\">\n @if (hasError(validator.name)) {\n <mat-error>{{ validator.message }}</mat-error>\n }\n </ng-container>\n }\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}mat-option{padding-top:8px;padding-bottom:8px}\n"], dependencies: [{ 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: "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: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
512
512
|
}
|
|
513
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
513
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicSelectComponent, decorators: [{
|
|
514
514
|
type: Component,
|
|
515
|
-
args: [{ imports: [
|
|
515
|
+
args: [{ imports: [MatFormFieldModule, ReactiveFormsModule, MatSelectModule, MatOptionModule, AsyncPipe, MatInputModule], selector: 'dynamic-select', template: "<mat-form-field\n [formGroup]=\"group\"\n [id]=\"id\"\n color=\"primary\">\n <mat-label>{{ model.label }}</mat-label>\n\n <!-- Template for select without grouped options -->\n @if (model.options$ | async; as options) {\n @if (!model.native) {\n <mat-select\n [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 } @else {\n <select\n 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 }\n }\n\n <!-- Template for select with grouped options -->\n @if (model.groupedOptions$ | async; as groupedOptions) {\n @if (!model.native) {\n <mat-select\n [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 </mat-select>\n } @else {\n <select\n matNativeControl\n (selectionchange)=\"onChange($event)\">\n @for (group of groupedOptions; track group.name) {\n =\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 }\n }\n\n @if (model.hint) {\n <mat-hint align=\"start\">{{ model.hint }}</mat-hint>\n }\n\n @for (validator of model.validators; track validator.name) {\n <ng-container ngProjectAs=\"mat-error\">\n @if (hasError(validator.name)) {\n <mat-error>{{ validator.message }}</mat-error>\n }\n </ng-container>\n }\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}mat-option{padding-top:8px;padding-bottom:8px}\n"] }]
|
|
516
516
|
}], propDecorators: { model: [{
|
|
517
517
|
type: Input
|
|
518
518
|
}], group: [{
|
|
@@ -549,12 +549,12 @@ class DynamicTextareaComponent extends DynamicFormFieldBase {
|
|
|
549
549
|
}
|
|
550
550
|
this.change.emit(event);
|
|
551
551
|
}
|
|
552
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
553
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
552
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
553
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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\n [formGroup]=\"group\"\n [id]=\"id\"\n color=\"primary\">\n @if (model.label) {\n <mat-label>{{ model.label }}</mat-label>\n }\n\n <textarea\n 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 @if (model.hint) {\n <mat-hint align=\"start\">{{ model.hint }}</mat-hint>\n }\n\n @if (model.maxLength) {\n <mat-hint align=\"end\">{{ maxCountText }}</mat-hint>\n }\n\n @for (validator of model.validators; track validator.name) {\n <ng-container ngProjectAs=\"mat-error\">\n @if (hasError(validator.name)) {\n <mat-error>{{ validator.message }}</mat-error>\n }\n </ng-container>\n }\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ 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"] }] }); }
|
|
554
554
|
}
|
|
555
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
555
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicTextareaComponent, decorators: [{
|
|
556
556
|
type: Component,
|
|
557
|
-
args: [{ imports: [
|
|
557
|
+
args: [{ imports: [MatFormFieldModule, MatInputModule, ReactiveFormsModule], selector: 'dynamic-textarea', template: "<mat-form-field\n [formGroup]=\"group\"\n [id]=\"id\"\n color=\"primary\">\n @if (model.label) {\n <mat-label>{{ model.label }}</mat-label>\n }\n\n <textarea\n 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 @if (model.hint) {\n <mat-hint align=\"start\">{{ model.hint }}</mat-hint>\n }\n\n @if (model.maxLength) {\n <mat-hint align=\"end\">{{ maxCountText }}</mat-hint>\n }\n\n @for (validator of model.validators; track validator.name) {\n <ng-container ngProjectAs=\"mat-error\">\n @if (hasError(validator.name)) {\n <mat-error>{{ validator.message }}</mat-error>\n }\n </ng-container>\n }\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}\n"] }]
|
|
558
558
|
}], propDecorators: { textarea: [{
|
|
559
559
|
type: ViewChild,
|
|
560
560
|
args: [MatInput, { static: true }]
|
|
@@ -808,10 +808,10 @@ class DynamicFormRelationsService {
|
|
|
808
808
|
};
|
|
809
809
|
return relation.conditions.reduce(reducer, false);
|
|
810
810
|
}
|
|
811
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
812
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
811
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFormRelationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
812
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFormRelationsService, providedIn: 'root' }); }
|
|
813
813
|
}
|
|
814
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
814
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFormRelationsService, decorators: [{
|
|
815
815
|
type: Injectable,
|
|
816
816
|
args: [{
|
|
817
817
|
providedIn: 'root'
|
|
@@ -927,10 +927,10 @@ class DynamicFormFieldComponent {
|
|
|
927
927
|
createDynamicFormEvent(event, type) {
|
|
928
928
|
return { event, type, control: this._control, form: this.group, model: this.model };
|
|
929
929
|
}
|
|
930
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
931
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
930
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
931
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", 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 }); }
|
|
932
932
|
}
|
|
933
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
933
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFormFieldComponent, decorators: [{
|
|
934
934
|
type: Component,
|
|
935
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>" }]
|
|
936
936
|
}], propDecorators: { componentViewContainer: [{
|
|
@@ -978,12 +978,12 @@ class DynamicFormComponent {
|
|
|
978
978
|
onChange(event) {
|
|
979
979
|
this.change.emit(event);
|
|
980
980
|
}
|
|
981
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
982
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
981
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
982
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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%}.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 }); }
|
|
983
983
|
}
|
|
984
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
984
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFormComponent, decorators: [{
|
|
985
985
|
type: Component,
|
|
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
|
|
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%}.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"] }]
|
|
987
987
|
}], propDecorators: { group: [{
|
|
988
988
|
type: Input,
|
|
989
989
|
args: [{ required: true }]
|