@abp/ng.components 10.6.0-rc.1 → 10.6.0-rc.2
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/abp-ng.components-chart.js.mjs +7 -7
- package/fesm2022/abp-ng.components-dynamic-form.mjs +19 -19
- package/fesm2022/abp-ng.components-dynamic-form.mjs.map +1 -1
- package/fesm2022/abp-ng.components-extensible.mjs +53 -49
- package/fesm2022/abp-ng.components-extensible.mjs.map +1 -1
- package/fesm2022/abp-ng.components-lookup.mjs +3 -3
- package/fesm2022/abp-ng.components-page.mjs +19 -19
- package/fesm2022/abp-ng.components-tree.mjs +13 -13
- package/package.json +3 -3
|
@@ -90,8 +90,8 @@ class ChartComponent {
|
|
|
90
90
|
this.chart = null;
|
|
91
91
|
}
|
|
92
92
|
}
|
|
93
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
94
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.
|
|
93
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
94
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: ChartComponent, isStandalone: true, selector: "abp-chart", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, plugins: { classPropertyName: "plugins", publicName: "plugins", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataSelect: "dataSelect", initialized: "initialized" }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true }], exportAs: ["abpChart"], ngImport: i0, template: `
|
|
95
95
|
<div
|
|
96
96
|
style="position:relative"
|
|
97
97
|
[style.width]="responsive() && !width() ? null : width()"
|
|
@@ -106,7 +106,7 @@ class ChartComponent {
|
|
|
106
106
|
</div>
|
|
107
107
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
108
108
|
}
|
|
109
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
109
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ChartComponent, decorators: [{
|
|
110
110
|
type: Component,
|
|
111
111
|
args: [{
|
|
112
112
|
selector: 'abp-chart',
|
|
@@ -133,11 +133,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
133
133
|
}] } });
|
|
134
134
|
|
|
135
135
|
class ChartModule {
|
|
136
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
137
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.
|
|
138
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.
|
|
136
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
137
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: ChartModule, imports: [ChartComponent], exports: [ChartComponent] }); }
|
|
138
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ChartModule }); }
|
|
139
139
|
}
|
|
140
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
140
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ChartModule, decorators: [{
|
|
141
141
|
type: NgModule,
|
|
142
142
|
args: [{
|
|
143
143
|
imports: [ChartComponent],
|
|
@@ -109,10 +109,10 @@ class DynamicFormService {
|
|
|
109
109
|
return '';
|
|
110
110
|
}
|
|
111
111
|
}
|
|
112
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
113
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.
|
|
112
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DynamicFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
113
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DynamicFormService, providedIn: 'root' }); }
|
|
114
114
|
}
|
|
115
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
115
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DynamicFormService, decorators: [{
|
|
116
116
|
type: Injectable,
|
|
117
117
|
args: [{
|
|
118
118
|
providedIn: 'root'
|
|
@@ -253,13 +253,13 @@ class DynamicFormFieldComponent {
|
|
|
253
253
|
this.onChange(value);
|
|
254
254
|
}
|
|
255
255
|
}
|
|
256
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
257
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
256
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DynamicFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
257
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: DynamicFormFieldComponent, isStandalone: true, selector: "abp-dynamic-form-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "abp-dynamic-form-field" }, providers: [
|
|
258
258
|
{ provide: ABP_DYNAMIC_FORM_FIELD, useExisting: DynamicFormFieldComponent },
|
|
259
259
|
DYNAMIC_FORM_FIELD_CONTROL_VALUE_ACCESSOR,
|
|
260
260
|
], exportAs: ["abpDynamicFormField"], ngImport: i0, template: "@if (visible()) {\r\n <div [formGroup]=\"fieldFormGroup\" role=\"group\" [attr.aria-labelledby]=\"fieldId + '-label'\">\r\n <!-- NOTE: Group and Array types are NOT rendered here, they should be rendered at parent level -->\r\n <!-- This component only handles leaf/primitive field types -->\r\n\r\n @if (field().type === 'text') {\r\n <!-- Text Input -->\r\n <div class=\"form-group mb-3\">\r\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n <input\r\n [id]=\"fieldId\"\r\n [placeholder]=\"field().placeholder || '' | abpLocalization\"\r\n formControlName=\"value\"\r\n [class.is-invalid]=\"isInvalid()\"\r\n class=\"form-control\"\r\n [attr.aria-required]=\"field().required || null\"\r\n [attr.aria-invalid]=\"isInvalid() || null\"\r\n [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n [attr.aria-label]=\"field().label | abpLocalization\"\r\n />\r\n @if (isInvalid()) {\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n }\r\n </div>\r\n } @else if (field().type === 'select') {\r\n <!-- Select Dropdown -->\r\n <div class=\"form-group mb-3\">\r\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n <select\r\n [id]=\"fieldId\"\r\n formControlName=\"value\"\r\n [class.is-invalid]=\"isInvalid()\"\r\n class=\"form-control\"\r\n [attr.aria-required]=\"field().required || null\"\r\n [attr.aria-invalid]=\"isInvalid() || null\"\r\n [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n [attr.aria-label]=\"field().label | abpLocalization\"\r\n >\r\n <option value=\"\">{{ '::Select' | abpLocalization }}</option>\r\n @for (option of options$ | async; track option.key) {\r\n <option [value]=\"option.key\">\r\n {{ option.value | abpLocalization }}\r\n </option>\r\n }\r\n </select>\r\n @if (isInvalid()) {\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n }\r\n </div>\r\n } @else if (field().type === 'checkbox') {\r\n <!-- Checkbox -->\r\n <div class=\"form-group form-check mb-3\" role=\"group\">\r\n <abp-checkbox\r\n [label]=\"field().label | abpLocalization\"\r\n formControlName=\"value\"\r\n [checkboxId]=\"fieldId\"\r\n [id]=\"fieldId\"\r\n [attr.aria-required]=\"field().required || null\"\r\n [attr.aria-invalid]=\"isInvalid() || null\"\r\n [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n />\r\n @if (isInvalid()) {\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n }\r\n </div>\r\n } @else if (field().type === 'email') {\r\n <!-- Email Input -->\r\n <div class=\"form-group mb-3\">\r\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n <input\r\n type=\"email\"\r\n [id]=\"fieldId\"\r\n formControlName=\"value\"\r\n [placeholder]=\"field().placeholder || '' | abpLocalization\"\r\n [class.is-invalid]=\"isInvalid()\"\r\n class=\"form-control\"\r\n [attr.aria-required]=\"field().required || null\"\r\n [attr.aria-invalid]=\"isInvalid() || null\"\r\n [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n [attr.aria-label]=\"field().label | abpLocalization\"\r\n autocomplete=\"email\"\r\n />\r\n @if (isInvalid()) {\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n }\r\n </div>\r\n } @else if (field().type === 'textarea') {\r\n <!-- Textarea -->\r\n <div class=\"form-group mb-3\">\r\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n <textarea\r\n [id]=\"fieldId\"\r\n formControlName=\"value\"\r\n [placeholder]=\"field().placeholder || '' | abpLocalization\"\r\n [class.is-invalid]=\"isInvalid()\"\r\n rows=\"4\"\r\n class=\"form-control\"\r\n [attr.aria-required]=\"field().required || null\"\r\n [attr.aria-invalid]=\"isInvalid() || null\"\r\n [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n [attr.aria-label]=\"field().label | abpLocalization\"\r\n >\r\n </textarea>\r\n @if (isInvalid()) {\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n }\r\n </div>\r\n } @else if (field().type === 'number') {\r\n <!-- Number Input -->\r\n <div class=\"form-group mb-3\">\r\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n <input\r\n type=\"number\"\r\n [id]=\"fieldId\"\r\n formControlName=\"value\"\r\n [placeholder]=\"field().placeholder || '' | abpLocalization\"\r\n [class.is-invalid]=\"isInvalid()\"\r\n class=\"form-control\"\r\n [attr.min]=\"field().min || null\"\r\n [attr.max]=\"field().max || null\"\r\n [attr.step]=\"field().step || null\"\r\n [attr.aria-required]=\"field().required || null\"\r\n [attr.aria-invalid]=\"isInvalid() || null\"\r\n [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n [attr.aria-label]=\"field().label | abpLocalization\"\r\n />\r\n @if (isInvalid()) {\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n }\r\n </div>\r\n } @else if (field().type === 'date') {\r\n <!-- Date Input -->\r\n <div class=\"form-group mb-3\">\r\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n <input\r\n type=\"date\"\r\n [id]=\"fieldId\"\r\n formControlName=\"value\"\r\n [class.is-invalid]=\"isInvalid()\"\r\n class=\"form-control\"\r\n [attr.min]=\"field().min || null\"\r\n [attr.max]=\"field().max || null\"\r\n [attr.aria-required]=\"field().required || null\"\r\n [attr.aria-invalid]=\"isInvalid() || null\"\r\n [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n [attr.aria-label]=\"field().label | abpLocalization\"\r\n />\r\n @if (isInvalid()) {\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n }\r\n </div>\r\n } @else if (field().type === 'datetime-local') {\r\n <!-- DateTime Local Input -->\r\n <div class=\"form-group mb-3\">\r\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n <input\r\n type=\"datetime-local\"\r\n [id]=\"fieldId\"\r\n formControlName=\"value\"\r\n [class.is-invalid]=\"isInvalid()\"\r\n class=\"form-control\"\r\n [attr.min]=\"field().min || null\"\r\n [attr.max]=\"field().max || null\"\r\n [attr.aria-required]=\"field().required || null\"\r\n [attr.aria-invalid]=\"isInvalid() || null\"\r\n [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n [attr.aria-label]=\"field().label | abpLocalization\"\r\n />\r\n @if (isInvalid()) {\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n }\r\n </div>\r\n } @else if (field().type === 'time') {\r\n <!-- Time Input -->\r\n <div class=\"form-group mb-3\">\r\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n <input\r\n type=\"time\"\r\n [id]=\"fieldId\"\r\n formControlName=\"value\"\r\n [class.is-invalid]=\"isInvalid()\"\r\n class=\"form-control\"\r\n [attr.min]=\"field().min || null\"\r\n [attr.max]=\"field().max || null\"\r\n [attr.step]=\"field().step || null\"\r\n [attr.aria-required]=\"field().required || null\"\r\n [attr.aria-invalid]=\"isInvalid() || null\"\r\n [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n [attr.aria-label]=\"field().label | abpLocalization\"\r\n />\r\n @if (isInvalid()) {\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n }\r\n </div>\r\n } @else if (field().type === 'password') {\r\n <!-- Password Input -->\r\n <div class=\"form-group mb-3\">\r\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n <input\r\n type=\"password\"\r\n [id]=\"fieldId\"\r\n formControlName=\"value\"\r\n [placeholder]=\"field().placeholder || '' | abpLocalization\"\r\n [class.is-invalid]=\"isInvalid()\"\r\n class=\"form-control\"\r\n [attr.minlength]=\"field().minLength || null\"\r\n [attr.maxlength]=\"field().maxLength || null\"\r\n [attr.aria-required]=\"field().required || null\"\r\n [attr.aria-invalid]=\"isInvalid() || null\"\r\n [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n [attr.aria-label]=\"field().label | abpLocalization\"\r\n autocomplete=\"new-password\"\r\n />\r\n @if (isInvalid()) {\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n }\r\n </div>\r\n } @else if (field().type === 'tel') {\r\n <!-- Tel Input -->\r\n <div class=\"form-group mb-3\">\r\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n <input\r\n type=\"tel\"\r\n [id]=\"fieldId\"\r\n formControlName=\"value\"\r\n [placeholder]=\"field().placeholder || '' | abpLocalization\"\r\n [class.is-invalid]=\"isInvalid()\"\r\n class=\"form-control\"\r\n [attr.pattern]=\"field().pattern || null\"\r\n [attr.aria-required]=\"field().required || null\"\r\n [attr.aria-invalid]=\"isInvalid() || null\"\r\n [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n [attr.aria-label]=\"field().label | abpLocalization\"\r\n autocomplete=\"tel\"\r\n />\r\n @if (isInvalid()) {\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n }\r\n </div>\r\n } @else if (field().type === 'url') {\r\n <!-- URL Input -->\r\n <div class=\"form-group mb-3\">\r\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n <input\r\n type=\"url\"\r\n [id]=\"fieldId\"\r\n formControlName=\"value\"\r\n [placeholder]=\"field().placeholder || '' | abpLocalization\"\r\n [class.is-invalid]=\"isInvalid()\"\r\n class=\"form-control\"\r\n [attr.aria-required]=\"field().required || null\"\r\n [attr.aria-invalid]=\"isInvalid() || null\"\r\n [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n [attr.aria-label]=\"field().label | abpLocalization\"\r\n autocomplete=\"url\"\r\n />\r\n @if (isInvalid()) {\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n }\r\n </div>\r\n } @else if (field().type === 'radio') {\r\n <!-- Radio Group -->\r\n <div class=\"form-group mb-3\" role=\"radiogroup\" [attr.aria-labelledby]=\"fieldId + '-label'\">\r\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n <div class=\"radio-group\">\r\n @for (option of options$ | async; track option.key) {\r\n <div class=\"form-check\">\r\n <input\r\n type=\"radio\"\r\n [id]=\"fieldId + '-' + option.key\"\r\n [value]=\"option.key\"\r\n formControlName=\"value\"\r\n [class.is-invalid]=\"isInvalid()\"\r\n class=\"form-check-input\"\r\n [attr.aria-required]=\"field().required || null\"\r\n [attr.aria-invalid]=\"isInvalid() || null\"\r\n [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n />\r\n <label [for]=\"fieldId + '-' + option.key\" class=\"form-check-label\">\r\n {{ option.value | abpLocalization }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n @if (isInvalid()) {\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n }\r\n </div>\r\n } @else if (field().type === 'file') {\r\n <!-- File Input -->\r\n <div class=\"form-group mb-3\">\r\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n <input\r\n type=\"file\"\r\n [id]=\"fieldId\"\r\n (change)=\"onFileChange($event)\"\r\n [class.is-invalid]=\"isInvalid()\"\r\n class=\"form-control\"\r\n [attr.accept]=\"field().accept || null\"\r\n [attr.multiple]=\"field().multiple || null\"\r\n [attr.aria-required]=\"field().required || null\"\r\n [attr.aria-invalid]=\"isInvalid() || null\"\r\n [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n [attr.aria-label]=\"field().label | abpLocalization\"\r\n />\r\n @if (isInvalid()) {\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n }\r\n </div>\r\n } @else if (field().type === 'range') {\r\n <!-- Range Slider -->\r\n <div class=\"form-group mb-3\">\r\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <input\r\n type=\"range\"\r\n [id]=\"fieldId\"\r\n formControlName=\"value\"\r\n [class.is-invalid]=\"isInvalid()\"\r\n class=\"form-range flex-grow-1\"\r\n [attr.min]=\"field().min || 0\"\r\n [attr.max]=\"field().max || 100\"\r\n [attr.step]=\"field().step || 1\"\r\n [attr.aria-required]=\"field().required || null\"\r\n [attr.aria-invalid]=\"isInvalid() || null\"\r\n [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n [attr.aria-label]=\"field().label | abpLocalization\"\r\n [attr.aria-valuenow]=\"value.value\"\r\n [attr.aria-valuemin]=\"field().min || 0\"\r\n [attr.aria-valuemax]=\"field().max || 100\"\r\n />\r\n <output [for]=\"fieldId\" class=\"badge bg-primary\">{{ value.value }}</output>\r\n </div>\r\n @if (isInvalid()) {\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n }\r\n </div>\r\n } @else if (field().type === 'color') {\r\n <!-- Color Picker -->\r\n <div class=\"form-group mb-3\">\r\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <input\r\n type=\"color\"\r\n [id]=\"fieldId\"\r\n formControlName=\"value\"\r\n [class.is-invalid]=\"isInvalid()\"\r\n class=\"form-control form-control-color\"\r\n [attr.aria-required]=\"field().required || null\"\r\n [attr.aria-invalid]=\"isInvalid() || null\"\r\n [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n [attr.aria-label]=\"field().label | abpLocalization\"\r\n />\r\n <code class=\"text-muted\">{{ value.value || '#000000' }}</code>\r\n </div>\r\n @if (isInvalid()) {\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n\r\n<ng-template #labelTemplate>\r\n <label [for]=\"fieldId\" [id]=\"fieldId + '-label'\" [class.required]=\"field().required\">\r\n {{ field().label | abpLocalization }}\r\n @if (field().required) {\r\n <span class=\"text-danger\" aria-label=\"required\">*</span>\r\n }\r\n </label>\r\n</ng-template>\r\n\r\n<ng-template #errorTemplate>\r\n <div class=\"invalid-feedback\" [id]=\"errorId\" role=\"alert\" aria-live=\"polite\" aria-atomic=\"true\">\r\n @for (error of errors(); track error) {\r\n <div>{{ error | abpLocalization }}</div>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: [".form-group{display:flex;flex-direction:column}.form-group .radio-group{display:flex;flex-direction:column;gap:.5rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i2.RangeValueAccessor, selector: "input[type=range]:not([ngNoCva])[formControlName],input[type=range]:not([ngNoCva])[formControl],input[type=range]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio]:not([ngNoCva])[formControlName],input[type=radio]:not([ngNoCva])[formControl],input[type=radio]:not([ngNoCva])[ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormCheckboxComponent, selector: "abp-checkbox", inputs: ["label", "labelClass", "checkboxId", "checkboxStyle", "checkboxClass", "checkboxReadonly"], outputs: ["checkboxBlur", "checkboxFocus"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
261
261
|
}
|
|
262
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
262
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DynamicFormFieldComponent, decorators: [{
|
|
263
263
|
type: Component,
|
|
264
264
|
args: [{ selector: 'abp-dynamic-form-field', providers: [
|
|
265
265
|
{ provide: ABP_DYNAMIC_FORM_FIELD, useExisting: DynamicFormFieldComponent },
|
|
@@ -279,7 +279,7 @@ class DynamicFieldHostComponent {
|
|
|
279
279
|
...(ngDevMode ? [undefined, { debugName: "component" }] : /* istanbul ignore next */ []));
|
|
280
280
|
this.inputs = input({}, /* @ts-ignore */
|
|
281
281
|
...(ngDevMode ? [{ debugName: "inputs" }] : /* istanbul ignore next */ []));
|
|
282
|
-
this.viewContainerRef = viewChild.required('vcRef', { read: ViewContainerRef });
|
|
282
|
+
this.viewContainerRef = viewChild.required('vcRef', { ...(ngDevMode ? { debugName: "viewContainerRef" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
|
|
283
283
|
this.disabled = false;
|
|
284
284
|
// if child has not implemented ControlValueAccessor. Create form control
|
|
285
285
|
this.innerControl = new FormControl(null);
|
|
@@ -365,14 +365,14 @@ class DynamicFieldHostComponent {
|
|
|
365
365
|
isDisabled ? inst.formControl.disable({ emitEvent: false }) : inst.formControl.enable({ emitEvent: false });
|
|
366
366
|
}
|
|
367
367
|
}
|
|
368
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
369
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.
|
|
368
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DynamicFieldHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
369
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: DynamicFieldHostComponent, isStandalone: true, selector: "abp-dynamic-form-field-host", inputs: { component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: false, transformFunction: null }, inputs: { classPropertyName: "inputs", publicName: "inputs", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{
|
|
370
370
|
provide: NG_VALUE_ACCESSOR,
|
|
371
371
|
useExisting: forwardRef(() => DynamicFieldHostComponent),
|
|
372
372
|
multi: true
|
|
373
373
|
}], viewQueries: [{ propertyName: "viewContainerRef", first: true, predicate: ["vcRef"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `<ng-template #vcRef></ng-template>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
374
374
|
}
|
|
375
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
375
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DynamicFieldHostComponent, decorators: [{
|
|
376
376
|
type: Component,
|
|
377
377
|
args: [{
|
|
378
378
|
selector: 'abp-dynamic-form-field-host',
|
|
@@ -437,10 +437,10 @@ class DynamicFormArrayComponent {
|
|
|
437
437
|
trackByIndex(index) {
|
|
438
438
|
return index;
|
|
439
439
|
}
|
|
440
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
441
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
440
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DynamicFormArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
441
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: DynamicFormArrayComponent, isStandalone: true, selector: "abp-dynamic-form-array", inputs: { arrayConfig: { classPropertyName: "arrayConfig", publicName: "arrayConfig", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (visible()) {\r\n <div class=\"form-array-container\" role=\"region\" [attr.aria-label]=\"arrayConfig().label | abpLocalization\">\r\n \r\n <!-- Header with Add Button -->\r\n <div class=\"array-header d-flex justify-content-between align-items-center mb-3\">\r\n <label class=\"form-array-label\">\r\n {{ arrayConfig().label | abpLocalization }}\r\n @if (arrayConfig().required) {\r\n <span class=\"text-danger\" aria-label=\"required\">*</span>\r\n }\r\n </label>\r\n <button \r\n type=\"button\" \r\n class=\"btn btn-sm btn-primary\"\r\n (click)=\"addItem()\"\r\n [disabled]=\"!canAddItem\"\r\n [attr.aria-label]=\"'Add ' + (arrayConfig().label | abpLocalization)\">\r\n <i class=\"fa fa-plus me-1\"></i>\r\n {{ '::Add' | abpLocalization }}\r\n </button>\r\n </div>\r\n\r\n <!-- Array Items -->\r\n <div class=\"array-items\" role=\"list\">\r\n @for (item of formArray.controls; track $index + '-' + formArrayVersion()) {\r\n <div class=\"array-item border rounded p-3 mb-3\" role=\"listitem\" [formGroup]=\"getItemFormGroup($index)\">\r\n \r\n <!-- Item Header -->\r\n <div class=\"item-header d-flex justify-content-between align-items-center mb-3\">\r\n <strong class=\"item-title\">\r\n {{ arrayConfig().label | abpLocalization }} #{{ $index + 1 }}\r\n </strong>\r\n <button \r\n type=\"button\" \r\n class=\"btn btn-sm btn-danger\"\r\n (click)=\"removeItem($index)\"\r\n [disabled]=\"!canRemoveItem\"\r\n [attr.aria-label]=\"'Remove ' + (arrayConfig().label | abpLocalization) + ' #' + ($index + 1)\">\r\n <i class=\"fa fa-trash me-1\"></i>\r\n {{ '::Remove' | abpLocalization }}\r\n </button>\r\n </div>\r\n\r\n <!-- Item Fields -->\r\n <div class=\"row\">\r\n @for (field of sortedChildren; track field.key) {\r\n <div [ngClass]=\"'col-md-' + (field.gridSize || 12)\">\r\n \r\n <!-- Nested Group -->\r\n @if (field.type === 'group') {\r\n <abp-dynamic-form-group\r\n [groupConfig]=\"field\"\r\n [formGroup]=\"getNestedFormGroup($index, field.key)\" />\r\n }\r\n \r\n <!-- Nested Array (recursive) -->\r\n @else if (field.type === 'array') {\r\n <abp-dynamic-form-array\r\n [arrayConfig]=\"field\"\r\n [formGroup]=\"getItemFormGroup($index)\" />\r\n }\r\n \r\n <!-- Regular Field -->\r\n @else {\r\n <abp-dynamic-form-field\r\n [field]=\"field\"\r\n [formControlName]=\"field.key\" />\r\n }\r\n \r\n </div>\r\n }\r\n </div>\r\n </div>\r\n } @empty {\r\n <div class=\"alert alert-info\" role=\"status\">\r\n <i class=\"fa fa-info-circle me-2\"></i>\r\n {{ '::NoItemsAdded' | abpLocalization }}\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Item Count -->\r\n <div class=\"array-footer text-muted small\" aria-live=\"polite\" aria-atomic=\"true\">\r\n {{ formArray.length }} {{ '::Items' | abpLocalization }}\r\n @if (arrayConfig().minItems) {\r\n ({{ '::Min' | abpLocalization }}: {{ arrayConfig().minItems }})\r\n }\r\n @if (arrayConfig().maxItems) {\r\n ({{ '::Max' | abpLocalization }}: {{ arrayConfig().maxItems }})\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".form-array-container{margin-bottom:1.5rem}.array-header{border-bottom:2px solid var(--bs-primary, #007bff);padding-bottom:.5rem}.form-array-label{font-size:1.1rem;font-weight:600;color:var(--bs-dark, #212529);margin-bottom:0}.array-items{margin-top:1rem}.array-item{background-color:var(--bs-white, #fff);transition:all .2s ease;position:relative}.array-item:hover{box-shadow:0 .125rem .25rem #00000013;transform:translateY(-1px)}.array-item .array-item{background-color:var(--bs-light, #f8f9fa)}.item-header{border-bottom:1px solid var(--bs-border-color, #dee2e6);padding-bottom:.75rem}.item-title{color:var(--bs-primary, #007bff);font-size:.95rem}.array-footer{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--bs-border-color, #dee2e6)}button:focus-visible{outline:2px solid var(--bs-primary, #007bff);outline-offset:2px}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.array-item{animation:slideIn .3s ease}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => DynamicFormArrayComponent), selector: "abp-dynamic-form-array", inputs: ["arrayConfig", "formGroup", "visible"] }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i2.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i2.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i2.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i2.FormControlName), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i0.forwardRef(() => DynamicFormFieldComponent), selector: "abp-dynamic-form-field", inputs: ["field", "visible"], exportAs: ["abpDynamicFormField"] }, { kind: "component", type: i0.forwardRef(() => DynamicFormGroupComponent), selector: "abp-dynamic-form-group", inputs: ["groupConfig", "formGroup", "visible"] }, { kind: "pipe", type: i0.forwardRef(() => LocalizationPipe), name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
442
442
|
}
|
|
443
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
443
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DynamicFormArrayComponent, decorators: [{
|
|
444
444
|
type: Component,
|
|
445
445
|
args: [{ selector: 'abp-dynamic-form-array', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
446
446
|
CommonModule,
|
|
@@ -471,10 +471,10 @@ class DynamicFormGroupComponent {
|
|
|
471
471
|
getChildControl(key) {
|
|
472
472
|
return this.formGroup().get(key);
|
|
473
473
|
}
|
|
474
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
475
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
474
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DynamicFormGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
475
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: DynamicFormGroupComponent, isStandalone: true, selector: "abp-dynamic-form-group", inputs: { groupConfig: { classPropertyName: "groupConfig", publicName: "groupConfig", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (visible()) {\r\n <fieldset class=\"form-group-container\" [formGroup]=\"formGroup()\" role=\"group\" [attr.aria-labelledby]=\"groupConfig().key + '-legend'\">\r\n <legend [id]=\"groupConfig().key + '-legend'\" class=\"form-group-legend\">\r\n {{ groupConfig().label | abpLocalization }}\r\n </legend>\r\n \r\n <div class=\"row\">\r\n @for (field of sortedChildren; track field.key) {\r\n <div [ngClass]=\"'col-md-' + (field.gridSize || 12)\">\r\n \r\n <!-- Nested Group (Recursive) -->\r\n @if (field.type === 'group') {\r\n <abp-dynamic-form-group\r\n [groupConfig]=\"field\"\r\n [formGroup]=\"getChildFormGroup(field.key)\" />\r\n }\r\n \r\n <!-- Nested Array -->\r\n @else if (field.type === 'array') {\r\n <abp-dynamic-form-array\r\n [arrayConfig]=\"field\"\r\n [formGroup]=\"formGroup()\" />\r\n }\r\n \r\n <!-- Regular Field -->\r\n @else {\r\n <abp-dynamic-form-field\r\n [field]=\"field\"\r\n [formControlName]=\"field.key\" />\r\n }\r\n \r\n </div>\r\n }\r\n </div>\r\n </fieldset>\r\n}\r\n", styles: [".form-group-container{border-left:3px solid var(--bs-primary, #007bff);padding-left:1rem;margin-bottom:1.5rem;border:1px solid var(--bs-border-color, #dee2e6);border-radius:.375rem;padding:1rem;background-color:var(--bs-light, #f8f9fa)}.form-group-container .form-group-container{border-left-color:var(--bs-secondary, #6c757d);padding-left:.75rem;background-color:var(--bs-white, #fff)}.form-group-legend{font-size:1.1rem;font-weight:600;color:var(--bs-primary, #007bff);margin-bottom:1rem;padding:0 .5rem;float:none;width:auto}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => DynamicFormGroupComponent), selector: "abp-dynamic-form-group", inputs: ["groupConfig", "formGroup", "visible"] }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i2.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i2.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i2.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i2.FormControlName), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i0.forwardRef(() => DynamicFormFieldComponent), selector: "abp-dynamic-form-field", inputs: ["field", "visible"], exportAs: ["abpDynamicFormField"] }, { kind: "component", type: i0.forwardRef(() => DynamicFormArrayComponent), selector: "abp-dynamic-form-array", inputs: ["arrayConfig", "formGroup", "visible"] }, { kind: "pipe", type: i0.forwardRef(() => LocalizationPipe), name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
476
476
|
}
|
|
477
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
477
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DynamicFormGroupComponent, decorators: [{
|
|
478
478
|
type: Component,
|
|
479
479
|
args: [{ selector: 'abp-dynamic-form-group', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
480
480
|
CommonModule,
|
|
@@ -635,10 +635,10 @@ class DynamicFormComponent {
|
|
|
635
635
|
}, 100);
|
|
636
636
|
}
|
|
637
637
|
}
|
|
638
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
639
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
638
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
639
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: DynamicFormComponent, isStandalone: true, selector: "abp-dynamic-form", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, submitButtonText: { classPropertyName: "submitButtonText", publicName: "submitButtonText", isSignal: true, isRequired: false, transformFunction: null }, submitInProgress: { classPropertyName: "submitInProgress", publicName: "submitInProgress", isSignal: true, isRequired: false, transformFunction: null }, showCancelButton: { classPropertyName: "showCancelButton", publicName: "showCancelButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit", formCancel: "formCancel" }, host: { classAttribute: "abp-dynamic-form" }, exportAs: ["abpDynamicForm"], ngImport: i0, template: "<div class=\"form-wrapper\">\r\n<form \r\n [formGroup]=\"dynamicForm\" \r\n (ngSubmit)=\"submit()\" \r\n class=\"dynamic-form\"\r\n role=\"form\"\r\n [attr.aria-label]=\"'Dynamic Form'\">\r\n <div class=\"row\" role=\"group\">\r\n @for (field of sortedFields; track field.key) {\r\n <div [ngClass]=\"'col-md-' + (field.gridSize || 12)\">\r\n \r\n <!-- Custom Component -->\r\n @if (field.component) {\r\n <abp-dynamic-form-field-host\r\n [component]=\"field.component\"\r\n [inputs]=\"{ field: field, visible: isFieldVisible(field) }\"\r\n formControlName=\"{{ field.key }}\">\r\n </abp-dynamic-form-field-host>\r\n }\r\n \r\n <!-- Nested Group -->\r\n @else if (field.type === 'group') {\r\n <abp-dynamic-form-group\r\n [groupConfig]=\"field\"\r\n [formGroup]=\"getChildFormGroup(field.key)\"\r\n [visible]=\"isFieldVisible(field)\">\r\n </abp-dynamic-form-group>\r\n }\r\n \r\n <!-- Nested Array -->\r\n @else if (field.type === 'array') {\r\n <abp-dynamic-form-array\r\n [arrayConfig]=\"field\"\r\n [formGroup]=\"dynamicForm\"\r\n [visible]=\"isFieldVisible(field)\">\r\n </abp-dynamic-form-array>\r\n }\r\n \r\n <!-- Regular Field -->\r\n @else {\r\n <abp-dynamic-form-field\r\n [field]=\"field\"\r\n [formControlName]=\"field.key\"\r\n [visible]=\"isFieldVisible(field)\">\r\n </abp-dynamic-form-field>\r\n }\r\n \r\n </div>\r\n }\r\n </div>\r\n <ng-content select=\"[actions]\">\r\n <ng-container [ngTemplateOutlet]=\"defaultActions\"></ng-container>\r\n </ng-content>\r\n\r\n</form>\r\n\r\n<ng-template #defaultActions>\r\n <div class=\"form-actions\" role=\"group\" aria-label=\"Form actions\">\r\n @if (showCancelButton()) {\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-secondary\"\r\n (click)=\"onCancel()\"\r\n aria-label=\"Cancel form\">\r\n Cancel\r\n </button>\r\n }\r\n <button\r\n type=\"submit\"\r\n class=\"btn btn-primary\"\r\n [disabled]=\"!dynamicForm.valid || submitInProgress()\"\r\n [attr.aria-busy]=\"submitInProgress() || null\"\r\n [attr.aria-label]=\"submitInProgress() ? 'Submitting form...' : submitButtonText()\">\r\n {{ submitButtonText() }}\r\n </button>\r\n </div>\r\n</ng-template>\r\n</div>\r\n", styles: [":host(.abp-dynamic-form) form{display:flex;flex-direction:column;gap:.5rem}:host(.abp-dynamic-form) .form-wrapper{text-align:left}.form-actions{display:flex;justify-content:flex-end;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DynamicFormFieldComponent, selector: "abp-dynamic-form-field", inputs: ["field", "visible"], exportAs: ["abpDynamicFormField"] }, { kind: "component", type: DynamicFormGroupComponent, selector: "abp-dynamic-form-group", inputs: ["groupConfig", "formGroup", "visible"] }, { kind: "component", type: DynamicFormArrayComponent, selector: "abp-dynamic-form-array", inputs: ["arrayConfig", "formGroup", "visible"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DynamicFieldHostComponent, selector: "abp-dynamic-form-field-host", inputs: ["component", "inputs"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
640
640
|
}
|
|
641
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
641
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DynamicFormComponent, decorators: [{
|
|
642
642
|
type: Component,
|
|
643
643
|
args: [{ selector: 'abp-dynamic-form', host: { class: 'abp-dynamic-form' }, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'abpDynamicForm', imports: [
|
|
644
644
|
CommonModule,
|