@olafvv/ngx-dynamic-form 0.6.0 → 19.0.1
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 +54 -55
- package/fesm2022/olafvv-ngx-dynamic-form.mjs.map +1 -1
- package/lib/controls/button/dynamic-button.model.d.ts +3 -0
- 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/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 -50
- 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 }]
|
|
@@ -809,10 +808,10 @@ class DynamicFormRelationsService {
|
|
|
809
808
|
};
|
|
810
809
|
return relation.conditions.reduce(reducer, false);
|
|
811
810
|
}
|
|
812
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
813
|
-
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' }); }
|
|
814
813
|
}
|
|
815
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
814
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicFormRelationsService, decorators: [{
|
|
816
815
|
type: Injectable,
|
|
817
816
|
args: [{
|
|
818
817
|
providedIn: 'root'
|
|
@@ -928,12 +927,12 @@ class DynamicFormFieldComponent {
|
|
|
928
927
|
createDynamicFormEvent(event, type) {
|
|
929
928
|
return { event, type, control: this._control, form: this.group, model: this.model };
|
|
930
929
|
}
|
|
931
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
932
|
-
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 }); }
|
|
933
932
|
}
|
|
934
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
933
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicFormFieldComponent, decorators: [{
|
|
935
934
|
type: Component,
|
|
936
|
-
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>" }]
|
|
937
936
|
}], propDecorators: { componentViewContainer: [{
|
|
938
937
|
type: ViewChild,
|
|
939
938
|
args: ['componentViewContainer', { read: ViewContainerRef, static: true }]
|
|
@@ -979,12 +978,12 @@ class DynamicFormComponent {
|
|
|
979
978
|
onChange(event) {
|
|
980
979
|
this.change.emit(event);
|
|
981
980
|
}
|
|
982
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
983
|
-
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%}.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 }); }
|
|
984
983
|
}
|
|
985
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
984
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicFormComponent, decorators: [{
|
|
986
985
|
type: Component,
|
|
987
|
-
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%}.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"] }]
|
|
988
987
|
}], propDecorators: { group: [{
|
|
989
988
|
type: Input,
|
|
990
989
|
args: [{ required: true }]
|