@dignite-ng/expand.dynamic-form 3.0.0-rc.7 → 3.0.0-rc.9

package/fesm2022/dignite-ng-expand.dynamic-form.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, Component, Input, ViewChild, ChangeDetectionStrategy, Injectable, ViewContainerRef, Inject, NgModule } from '@angular/core';
+import { inject, ChangeDetectorRef, ViewChild, Input, Component, ChangeDetectionStrategy, Injectable, ViewContainerRef, Inject, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { Validators, FormArray, FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i2 from '@abp/ng.core';
@@ -148,14 +148,14 @@ class TextEditComponent {
                 ValidatorsArray.push(Validators.maxLength(this._fields.field.formConfiguration['TextEdit.CharLimit']));
             }
             let newControl = this.fb.control(this._selected, ValidatorsArray);
-            this.extraProperties.setControl(this._fields.field.name, newControl);
+            this.extraProperties?.setControl(this._fields.field.name, newControl);
             resolve(true);
         });
     }
     ngOnDestroy() {
         //Called once, before the instance is destroyed.
         //Add 'implements OnDestroy' to the class.
-        this.extraProperties.removeControl(this._fields.field.name);
+        this.extraProperties?.removeControl(this._fields.field.name);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TextEditComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: TextEditComponent, selector: "df-text-edit", inputs: { entity: "entity", fields: "fields", parentFiledName: "parentFiledName", selected: "selected" }, viewQueries: [{ propertyName: "submitclick", first: true, predicate: ["submitclick"], descendants: true, static: true }], ngImport: i0, template: "<form [formGroup]=\"_entity\">\n    <div [formGroupName]=\"_parentFiledName\">\n        <div class=\"mb-3\">\n            <label class=\"form-label\" *ngIf=\"_fields.displayName\">{{ _fields.displayName }}</label>\n            <ng-container *ngIf=\"_fields.field.formConfiguration['TextEdit.Mode'] ===_TextEditMode.SingleLine\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"{{_fields.field.name}}\"\n                    [placeholder]=\"_fields.field.formConfiguration['TextEdit.Placeholder']\" />\n            </ng-container>\n            <ng-container *ngIf=\"_fields.field.formConfiguration['TextEdit.Mode'] === _TextEditMode.MultipleLine\">\n                <textarea class=\"form-control\" formControlName=\"{{_fields.field.name}}\"\n                    [placeholder]=\"_fields.field.formConfiguration['TextEdit.Placeholder']\" rows=\"3\"></textarea>\n            </ng-container>\n            <small class=\"form-text text-muted d-block\" *ngIf=\"_fields.field.description\">{{_fields.field.description}}</small>\n        </div>\n    </div>\n    <button type=\"submit\" style=\"display: none;\" #submitclick></button>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i3.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }] }); }
@@ -697,6 +697,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImpor
                 args: ['submitclick', { static: true }]
             }] } });
 
+class DateEditViewComponent {
+    constructor() {
+        /**展示则内容 */
+        this.showValue = '';
+        /**是否显示再列表 */
+        this.showInList = false;
+        /**表单控件Value */
+        this._value = '';
+    }
+    set value(v) {
+        this._value = v;
+    }
+    async ngAfterContentInit() {
+        //Called after ngOnInit when the component's or directive's content has been initialized.
+        //Add 'implements AfterContentInit' to the class.
+        let valueOptions = this._value;
+        if (this.type && valueOptions) {
+            this.showValue = valueOptions;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: DateEditViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.5", type: DateEditViewComponent, selector: "df-date-edit-view", inputs: { showInList: "showInList", fields: "fields", type: "type", value: "value" }, ngImport: i0, template: "@if(showInList){\r\n{{showValue|shortDateTime}}\r\n} @else{\r\n<div class=\"mb-3\">\r\n    <label class=\"form-label\" *ngIf=\"fields.displayName\">{{ fields.displayName }}</label>\r\n    <div>\r\n        {{showValue|shortDateTime}}\r\n    </div>\r\n</div>\r\n}", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.ShortDateTimePipe, name: "shortDateTime" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: DateEditViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-date-edit-view', template: "@if(showInList){\r\n{{showValue|shortDateTime}}\r\n} @else{\r\n<div class=\"mb-3\">\r\n    <label class=\"form-label\" *ngIf=\"fields.displayName\">{{ fields.displayName }}</label>\r\n    <div>\r\n        {{showValue|shortDateTime}}\r\n    </div>\r\n</div>\r\n}" }]
+        }], propDecorators: { showInList: [{
+                type: Input
+            }], fields: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
+
+class NumericEditViewComponent {
+    constructor() {
+        /**展示则内容 */
+        this.showValue = '';
+        /**是否显示再列表 */
+        this.showInList = false;
+        /**表单控件Value */
+        this._value = '';
+    }
+    set value(v) {
+        this._value = v;
+    }
+    async ngAfterContentInit() {
+        //Called after ngOnInit when the component's or directive's content has been initialized.
+        //Add 'implements AfterContentInit' to the class.
+        let valueOptions = this._value;
+        if (this.type && valueOptions) {
+            this.showValue = valueOptions;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: NumericEditViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.5", type: NumericEditViewComponent, selector: "df-numeric-edit-view", inputs: { showInList: "showInList", fields: "fields", type: "type", value: "value" }, ngImport: i0, template: "@if(showInList){\r\n{{showValue}}\r\n} @else{\r\n<div class=\"mb-3\">\r\n    <label class=\"form-label\" *ngIf=\"fields.displayName\">{{ fields.displayName }}</label>\r\n    <div>\r\n        {{showValue}}\r\n    </div>\r\n</div>\r\n}", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: NumericEditViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-numeric-edit-view', template: "@if(showInList){\r\n{{showValue}}\r\n} @else{\r\n<div class=\"mb-3\">\r\n    <label class=\"form-label\" *ngIf=\"fields.displayName\">{{ fields.displayName }}</label>\r\n    <div>\r\n        {{showValue}}\r\n    </div>\r\n</div>\r\n}" }]
+        }], propDecorators: { showInList: [{
+                type: Input
+            }], fields: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
+
 class SelectConfig {
     constructor(data) {
         /**空值文本 */
@@ -811,7 +883,7 @@ class SelectConfigComponent {
         this.dataLoaded();
     }
     get formConfiguration() {
-        return this._Entity.get('formConfiguration');
+        return this._Entity?.get('formConfiguration');
     }
     get SelectOptions() {
         return this.formConfiguration.controls['Select.Options'];
@@ -837,11 +909,21 @@ class SelectConfigComponent {
     }
     AfterInit() {
         return new Promise((resolve, rejects) => {
-            this._Entity.setControl('formConfiguration', this.fb.group(new SelectConfig()));
+            this._Entity?.setControl('formConfiguration', this.fb.group(new SelectConfig()));
             if (this._selected && this._selected.formControlName == this._type) {
-                this._selected.formConfiguration['Select.Options']?.forEach(el => {
+                // this._selected.formConfiguration['Select.Options']?.forEach(el => {
+                //   console.log(this._selected.formConfiguration,'el',el);
+                //   this.addSelectOptions();
+                // });
+                for (const element of this._selected.formConfiguration['Select.Options']) {
+                    for (const key in element) {
+                        const item = element[key];
+                        const capitalizedKey = key.charAt(0).toUpperCase() + key.slice(1);
+                        element[capitalizedKey] = item;
+                    }
                     this.addSelectOptions();
-                });
+                }
+                // console.log(this._selected.formConfiguration['Select.Options'],'111111')
                 this.formConfiguration.patchValue({
                     ...this._selected.formConfiguration,
                 });
@@ -855,7 +937,7 @@ class SelectConfigComponent {
     textChange(event, index) {
         let SelectOptionsItem = this.SelectOptions.at(index);
         let value = event.target.value;
-        if (SelectOptionsItem.get('Value').value)
+        if (SelectOptionsItem.get('Value')?.value)
             return;
         SelectOptionsItem.patchValue({
             Value: this._DfApiService.chineseToPinyin(value),
@@ -917,17 +999,19 @@ class SelectControlComponent {
                 ValidatorsArray.push(Validators.required);
             }
             this.formConfiguration = this._fields.field.formConfiguration;
-            if (!this._selected) {
-                const isMultiple = this.formConfiguration['Select.Multiple'];
-                let selectValue = isMultiple ? [] : '';
-                this.formConfiguration['Select.Options'].forEach(el => {
-                    if (el.Selected) {
-                        selectValue = isMultiple
-                            ? [...selectValue, el.value || el.Value]
-                            : [el.value || el.Value];
-                    }
-                });
-                this._selected = selectValue;
+            const isMultiple = this.formConfiguration['Select.Multiple'];
+            let selectValue = isMultiple ? [] : '';
+            console.log(this._fields.field.name, 'this.formConfigura', this.formConfiguration, this._selected);
+            for (const element of this.formConfiguration['Select.Options']) {
+                for (const key in element) {
+                    const item = element[key];
+                    const capitalizedKey = key.charAt(0).toUpperCase() + key.slice(1);
+                    element[capitalizedKey] = item;
+                }
+                if (Array.isArray(this._selected) && element.Selected && this._selected.length === 0) {
+                    selectValue = isMultiple ? [...selectValue, element.Value] : [element.Value];
+                    this._selected = selectValue;
+                }
             }
             let newControl = this.fb.control(this._selected, ValidatorsArray);
             this.extraProperties.setControl(this._fields.field.name, newControl);
@@ -940,11 +1024,11 @@ class SelectControlComponent {
         this.extraProperties.removeControl(this._fields.field.name);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: SelectControlComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: SelectControlComponent, selector: "df-select-control", inputs: { fields: "fields", parentFiledName: "parentFiledName", selected: "selected", entity: "entity" }, viewQueries: [{ propertyName: "submitclick", first: true, predicate: ["submitclick"], descendants: true, static: true }], ngImport: i0, template: "<form [formGroup]=\"_entity\">\n    <div formGroupName=\"extraProperties\" class=\"selectcontrol\">\n        <div class=\"mb-3\">\n            <label class=\"form-label\" *ngIf=\"_fields.displayName\">{{ _fields.displayName }}</label>\n            <ng-container *ngIf=\"formConfiguration['Select.Multiple']; else elseTemplate\">\n                <!-- <select class=\"form-select\" multiple formControlName=\"{{_fields.field.name}}\">\n                    <ng-container *ngFor=\"let item of _fields.field.formConfiguration['Select.Options'];let i =index\">\n                        <option [value]=\"item.Value\">{{item.Text}}</option>\n                    </ng-container>\n                </select> -->\n                <nz-select class=\"form-select form-select-multiple\" [nzMaxTagCount]=\"1\"\n                    nzShowSearch nzMode=\"multiple\"\n                    formControlName=\"{{_fields.field.name}}\">\n                    <nz-option *ngFor=\"let item of _fields.field.formConfiguration['Select.Options']\"\n                        [nzLabel]=\"item.Text\" [nzValue]=\"item.Value\"></nz-option>\n                </nz-select>\n            </ng-container>\n            <ng-template #elseTemplate>\n                <select class=\"form-select\" [multiple]=\"false\" formControlName=\"{{_fields.field.name}}\">\n                    <option [value]=\"\">{{formConfiguration['Select.NullText']}}</option>\n                    <ng-container *ngFor=\"let item of _fields.field.formConfiguration['Select.Options'];let i =index\">\n                        <option [value]=\"item.Value\">{{item.Text}}</option>\n                    </ng-container>\n                </select>\n            </ng-template>\n            <small class=\"form-text text-muted d-block\"\n                *ngIf=\"_fields.field.description\">{{_fields.field.description}}</small>\n        </div>\n\n    </div>\n    <button type=\"submit\" style=\"display: none;\" #submitclick></button>\n</form>", styles: ["::ng-deep .selectcontrol nz-select{width:100%}::ng-deep .selectcontrol nz-select .ant-select-selector{background:transparent!important;border:none!important;padding:.275rem 1.25rem!important;box-shadow:none!important;height:auto!important}::ng-deep .selectcontrol nz-select .anticon-search,::ng-deep .selectcontrol nz-select .anticon-down{display:none}::ng-deep .selectcontrol .ant-select-multiple .ant-select-selection-item{max-width:40%!important}::ng-deep .was-validated .form-select-multiple{border-color:#4fbf67;padding-right:calc(1.5em + 1.35rem);background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%234fbf67' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e\");background-repeat:no-repeat;background-position:right calc(.375em + .3375rem) center;background-size:calc(.75em + .675rem) calc(.75em + .675rem)}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { 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: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i3.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "component", type: i4.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i4.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: SelectControlComponent, selector: "df-select-control", inputs: { fields: "fields", parentFiledName: "parentFiledName", selected: "selected", entity: "entity" }, viewQueries: [{ propertyName: "submitclick", first: true, predicate: ["submitclick"], descendants: true, static: true }], ngImport: i0, template: "<form [formGroup]=\"_entity\">\n    <div formGroupName=\"extraProperties\" class=\"selectcontrol\">\n        <div class=\"mb-3\">\n            <label class=\"form-label\" *ngIf=\"_fields.displayName\">{{ _fields.displayName }}</label>\n            <ng-container *ngIf=\"formConfiguration['Select.Multiple']; else elseTemplate\">\n                <nz-select class=\"form-select form-select-multiple\" [nzMaxTagCount]=\"1\"\n                    nzShowSearch nzMode=\"multiple\"\n                    formControlName=\"{{_fields.field.name}}\">\n                    <nz-option *ngFor=\"let item of _fields.field.formConfiguration['Select.Options']\"\n                        [nzLabel]=\"item.Text\" [nzValue]=\"item.Value\"></nz-option>\n                </nz-select>\n            </ng-container>\n            <ng-template #elseTemplate>\n                <select class=\"form-select\" [multiple]=\"false\" formControlName=\"{{_fields.field.name}}\">\n                    <option [value]=\"\">{{formConfiguration['Select.NullText']}}</option>\n                    <ng-container *ngFor=\"let item of _fields.field.formConfiguration['Select.Options'];let i =index\">\n                        <option [value]=\"item.Value\">{{item.Text}}</option>\n                    </ng-container>\n                </select>\n            </ng-template>\n            <small class=\"form-text text-muted d-block\"\n                *ngIf=\"_fields.field.description\">{{_fields.field.description}}</small>\n        </div>\n\n    </div>\n    <button type=\"submit\" style=\"display: none;\" #submitclick></button>\n</form>", styles: ["::ng-deep .selectcontrol nz-select{width:100%}::ng-deep .selectcontrol nz-select .ant-select-selector{background:transparent!important;border:none!important;padding:.275rem 1.25rem!important;box-shadow:none!important;height:auto!important}::ng-deep .selectcontrol nz-select .anticon-search,::ng-deep .selectcontrol nz-select .anticon-down{display:none}::ng-deep .selectcontrol .ant-select-multiple .ant-select-selection-item{max-width:40%!important}::ng-deep .was-validated .form-select-multiple{border-color:#4fbf67;padding-right:calc(1.5em + 1.35rem);background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%234fbf67' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e\");background-repeat:no-repeat;background-position:right calc(.375em + .3375rem) center;background-size:calc(.75em + .675rem) calc(.75em + .675rem)}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { 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: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i3.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "component", type: i4.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i4.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: SelectControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'df-select-control', template: "<form [formGroup]=\"_entity\">\n    <div formGroupName=\"extraProperties\" class=\"selectcontrol\">\n        <div class=\"mb-3\">\n            <label class=\"form-label\" *ngIf=\"_fields.displayName\">{{ _fields.displayName }}</label>\n            <ng-container *ngIf=\"formConfiguration['Select.Multiple']; else elseTemplate\">\n                <!-- <select class=\"form-select\" multiple formControlName=\"{{_fields.field.name}}\">\n                    <ng-container *ngFor=\"let item of _fields.field.formConfiguration['Select.Options'];let i =index\">\n                        <option [value]=\"item.Value\">{{item.Text}}</option>\n                    </ng-container>\n                </select> -->\n                <nz-select class=\"form-select form-select-multiple\" [nzMaxTagCount]=\"1\"\n                    nzShowSearch nzMode=\"multiple\"\n                    formControlName=\"{{_fields.field.name}}\">\n                    <nz-option *ngFor=\"let item of _fields.field.formConfiguration['Select.Options']\"\n                        [nzLabel]=\"item.Text\" [nzValue]=\"item.Value\"></nz-option>\n                </nz-select>\n            </ng-container>\n            <ng-template #elseTemplate>\n                <select class=\"form-select\" [multiple]=\"false\" formControlName=\"{{_fields.field.name}}\">\n                    <option [value]=\"\">{{formConfiguration['Select.NullText']}}</option>\n                    <ng-container *ngFor=\"let item of _fields.field.formConfiguration['Select.Options'];let i =index\">\n                        <option [value]=\"item.Value\">{{item.Text}}</option>\n                    </ng-container>\n                </select>\n            </ng-template>\n            <small class=\"form-text text-muted d-block\"\n                *ngIf=\"_fields.field.description\">{{_fields.field.description}}</small>\n        </div>\n\n    </div>\n    <button type=\"submit\" style=\"display: none;\" #submitclick></button>\n</form>", styles: ["::ng-deep .selectcontrol nz-select{width:100%}::ng-deep .selectcontrol nz-select .ant-select-selector{background:transparent!important;border:none!important;padding:.275rem 1.25rem!important;box-shadow:none!important;height:auto!important}::ng-deep .selectcontrol nz-select .anticon-search,::ng-deep .selectcontrol nz-select .anticon-down{display:none}::ng-deep .selectcontrol .ant-select-multiple .ant-select-selection-item{max-width:40%!important}::ng-deep .was-validated .form-select-multiple{border-color:#4fbf67;padding-right:calc(1.5em + 1.35rem);background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%234fbf67' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e\");background-repeat:no-repeat;background-position:right calc(.375em + .3375rem) center;background-size:calc(.75em + .675rem) calc(.75em + .675rem)}\n"] }]
+            args: [{ selector: 'df-select-control', template: "<form [formGroup]=\"_entity\">\n    <div formGroupName=\"extraProperties\" class=\"selectcontrol\">\n        <div class=\"mb-3\">\n            <label class=\"form-label\" *ngIf=\"_fields.displayName\">{{ _fields.displayName }}</label>\n            <ng-container *ngIf=\"formConfiguration['Select.Multiple']; else elseTemplate\">\n                <nz-select class=\"form-select form-select-multiple\" [nzMaxTagCount]=\"1\"\n                    nzShowSearch nzMode=\"multiple\"\n                    formControlName=\"{{_fields.field.name}}\">\n                    <nz-option *ngFor=\"let item of _fields.field.formConfiguration['Select.Options']\"\n                        [nzLabel]=\"item.Text\" [nzValue]=\"item.Value\"></nz-option>\n                </nz-select>\n            </ng-container>\n            <ng-template #elseTemplate>\n                <select class=\"form-select\" [multiple]=\"false\" formControlName=\"{{_fields.field.name}}\">\n                    <option [value]=\"\">{{formConfiguration['Select.NullText']}}</option>\n                    <ng-container *ngFor=\"let item of _fields.field.formConfiguration['Select.Options'];let i =index\">\n                        <option [value]=\"item.Value\">{{item.Text}}</option>\n                    </ng-container>\n                </select>\n            </ng-template>\n            <small class=\"form-text text-muted d-block\"\n                *ngIf=\"_fields.field.description\">{{_fields.field.description}}</small>\n        </div>\n\n    </div>\n    <button type=\"submit\" style=\"display: none;\" #submitclick></button>\n</form>", styles: ["::ng-deep .selectcontrol nz-select{width:100%}::ng-deep .selectcontrol nz-select .ant-select-selector{background:transparent!important;border:none!important;padding:.275rem 1.25rem!important;box-shadow:none!important;height:auto!important}::ng-deep .selectcontrol nz-select .anticon-search,::ng-deep .selectcontrol nz-select .anticon-down{display:none}::ng-deep .selectcontrol .ant-select-multiple .ant-select-selection-item{max-width:40%!important}::ng-deep .was-validated .form-select-multiple{border-color:#4fbf67;padding-right:calc(1.5em + 1.35rem);background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%234fbf67' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e\");background-repeat:no-repeat;background-position:right calc(.375em + .3375rem) center;background-size:calc(.75em + .675rem) calc(.75em + .675rem)}\n"] }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { fields: [{
                 type: Input
             }], parentFiledName: [{
@@ -958,6 +1042,119 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImpor
                 args: ['submitclick', { static: true }]
             }] } });
 
+class SelectViewComponent {
+    constructor() {
+        /**展示则内容 */
+        this.showValue = '';
+        /**是否显示再列表 */
+        this.showInList = false;
+        /**表单控件Value */
+        this._value = '';
+    }
+    set value(v) {
+        this._value = v;
+    }
+    async ngAfterContentInit() {
+        //Called after ngOnInit when the component's or directive's content has been initialized.
+        //Add 'implements AfterContentInit' to the class.
+        let valueOptions = this._value;
+        if (this.type && valueOptions) {
+            if (Array.isArray(valueOptions)) {
+                this.showValue = valueOptions.join(',');
+            }
+            else {
+                this.showValue = valueOptions;
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: SelectViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.5", type: SelectViewComponent, selector: "df-select-view", inputs: { showInList: "showInList", fields: "fields", type: "type", value: "value" }, ngImport: i0, template: "@if(showInList){\r\n{{showValue}}\r\n} @else{\r\n<div class=\"mb-3\">\r\n    <label class=\"form-label\" *ngIf=\"fields.displayName\">{{ fields.displayName }}</label>\r\n    <div>\r\n        {{showValue}}\r\n    </div>\r\n</div>\r\n}", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: SelectViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-select-view', template: "@if(showInList){\r\n{{showValue}}\r\n} @else{\r\n<div class=\"mb-3\">\r\n    <label class=\"form-label\" *ngIf=\"fields.displayName\">{{ fields.displayName }}</label>\r\n    <div>\r\n        {{showValue}}\r\n    </div>\r\n</div>\r\n}" }]
+        }], propDecorators: { showInList: [{
+                type: Input
+            }], fields: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
+
+class SwitchViewComponent {
+    constructor() {
+        /**展示则内容 */
+        this.showValue = '';
+        /**是否显示再列表 */
+        this.showInList = false;
+        /**表单控件Value */
+        this._value = '';
+    }
+    set value(v) {
+        this._value = v;
+    }
+    async ngAfterContentInit() {
+        //Called after ngOnInit when the component's or directive's content has been initialized.
+        //Add 'implements AfterContentInit' to the class.
+        let valueOptions = this._value;
+        if (this.type && valueOptions) {
+            this.showValue = valueOptions;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: SwitchViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.5", type: SwitchViewComponent, selector: "df-switch-view", inputs: { showInList: "showInList", fields: "fields", type: "type", value: "value" }, ngImport: i0, template: "@if(showInList){\r\n    {{'AbpUi::'+(showValue ? 'Yes' : 'No') | abpLocalization}}\r\n} @else{\r\n<div class=\"mb-3\">\r\n    <label class=\"form-label\" *ngIf=\"fields.displayName\">{{ fields.displayName }}</label>\r\n    <div>\r\n        {{'AbpUi::'+(showValue ? 'Yes' : 'No') | abpLocalization}}\r\n    </div>\r\n</div>\r\n}", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.LocalizationPipe, name: "abpLocalization" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: SwitchViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-switch-view', template: "@if(showInList){\r\n    {{'AbpUi::'+(showValue ? 'Yes' : 'No') | abpLocalization}}\r\n} @else{\r\n<div class=\"mb-3\">\r\n    <label class=\"form-label\" *ngIf=\"fields.displayName\">{{ fields.displayName }}</label>\r\n    <div>\r\n        {{'AbpUi::'+(showValue ? 'Yes' : 'No') | abpLocalization}}\r\n    </div>\r\n</div>\r\n}" }]
+        }], propDecorators: { showInList: [{
+                type: Input
+            }], fields: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
+
+class TextEditViewComponent {
+    constructor() {
+        /**展示则内容 */
+        this.showValue = '';
+        /**是否显示再列表 */
+        this.showInList = false;
+        /**表单控件Value */
+        this._value = '';
+    }
+    set value(v) {
+        this._value = v;
+    }
+    async ngAfterContentInit() {
+        //Called after ngOnInit when the component's or directive's content has been initialized.
+        //Add 'implements AfterContentInit' to the class.
+        let valueOptions = this._value;
+        if (this.type && valueOptions) {
+            this.showValue = valueOptions;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TextEditViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.5", type: TextEditViewComponent, selector: "df-text-edit-view", inputs: { showInList: "showInList", fields: "fields", type: "type", value: "value" }, ngImport: i0, template: "@if(showInList){\r\n{{showValue}}\r\n} @else{\r\n<div class=\"mb-3\">\r\n    <label class=\"form-label\" *ngIf=\"fields.displayName\">{{ fields.displayName }}</label>\r\n    <div>\r\n        {{showValue}}\r\n    </div>\r\n</div>\r\n}", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TextEditViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-text-edit-view', template: "@if(showInList){\r\n{{showValue}}\r\n} @else{\r\n<div class=\"mb-3\">\r\n    <label class=\"form-label\" *ngIf=\"fields.displayName\">{{ fields.displayName }}</label>\r\n    <div>\r\n        {{showValue}}\r\n    </div>\r\n</div>\r\n}" }]
+        }], propDecorators: { showInList: [{
+                type: Input
+            }], fields: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
+
 // import { CkEditorConfigComponent, CkEditorControlComponent } from "./ck-editor";
 /**
  * 表单控件分组-包含配置，控件，显示的数组
@@ -968,35 +1165,35 @@ const FieldControlGroup = [
         name: 'TextEdit',
         fieldConfigComponent: TextEditConfigComponent,
         fieldComponent: TextEditComponent,
-        // fieldViewComponent:TextBoxViewComponent,
+        fieldViewComponent: TextEditViewComponent,
     },
     {
         displayName: '开关',
         name: 'Switch',
         fieldConfigComponent: SwitchConfigComponent,
         fieldComponent: SwitchControlComponent,
-        // fieldViewComponent:TextBoxViewComponent,
+        fieldViewComponent: SwitchViewComponent,
     },
     {
         displayName: '选择',
         name: 'Select',
         fieldConfigComponent: SelectConfigComponent,
         fieldComponent: SelectControlComponent,
-        // fieldViewComponent:TextBoxViewComponent,
+        fieldViewComponent: SelectViewComponent,
     },
     {
         displayName: '数字',
         name: 'NumericEdit',
         fieldConfigComponent: NumbericEditConfigComponent,
         fieldComponent: NumbericEditControlComponent,
-        // fieldViewComponent:TextBoxViewComponent,
+        fieldViewComponent: NumericEditViewComponent,
     },
     {
         displayName: '日期',
         name: 'DateEdit',
         fieldConfigComponent: DateEditConfigComponent,
         fieldComponent: DateEditControlComponent,
-        // fieldViewComponent:TextBoxViewComponent,
+        fieldViewComponent: DateEditViewComponent,
     },
 ];
 function AddFieldControlGroup(array = []) {
@@ -1114,6 +1311,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImpor
                 args: ['FormComponentsRef', { read: ViewContainerRef, static: true }]
             }] } });
 
+class FormControlService {
+    constructor(mergedConfig) {
+        this.mergedConfig = mergedConfig;
+        this._FieldControlGroup = FieldControlGroup;
+    }
+    AddFieldControlGroup() {
+        let array = this.mergedConfig;
+        for (const element of array) {
+            let find = FieldControlGroup.find(control => {
+                return control.name === element.name;
+            });
+            if (!find) {
+                FieldControlGroup.push(element);
+            }
+        }
+        return FieldControlGroup;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FormControlService, deps: [{ token: 'MERGED_FORM_CONFIG' }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FormControlService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FormControlService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['MERGED_FORM_CONFIG']
+                }] }] });
+
+class DynamicViewComponent {
+    constructor(_FormControlService) {
+        this._FormControlService = _FormControlService;
+        /**是否显示再列表 */
+        this.showInList = false;
+        /**表单控件Value */
+        this._value = '';
+    }
+    set value(v) {
+        this._value = v;
+        // if(this._value) this.dataLoaded();
+    }
+    ngAfterContentInit() {
+        //Called after ngOnInit when the component's or directive's content has been initialized.
+        //Add 'implements AfterContentInit' to the class.
+        if (this.type && this._value) {
+            let _fieldControlGroup = this._FormControlService.AddFieldControlGroup();
+            let fieldControlItem = _fieldControlGroup.find(el => el.name === this.type);
+            this.loadViewComponent(fieldControlItem);
+        }
+    }
+    /**加载动态展示组件 */
+    loadViewComponent(FieldControlItem) {
+        //清空了容器中的所有组件
+        this.FormTemplateRef?.clear();
+        if (!FieldControlItem || !FieldControlItem.fieldViewComponent)
+            return;
+        //在容器中创建组件
+        const { instance } = this.FormTemplateRef?.createComponent(FieldControlItem.fieldViewComponent); //创建组件模板
+        /**向创建的组件模板中传值 */
+        instance.type = this.type;
+        instance.value = this._value;
+        instance.fields = this.fields;
+        instance.showInList = this.showInList;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: DynamicViewComponent, deps: [{ token: FormControlService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: DynamicViewComponent, selector: "df-dynamic-view", inputs: { showInList: "showInList", fields: "fields", type: "type", value: "value" }, viewQueries: [{ propertyName: "FormTemplateRef", first: true, predicate: ["FormTemplateRef"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<template #FormTemplateRef></template>", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: DynamicViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-dynamic-view', template: "<template #FormTemplateRef></template>" }]
+        }], ctorParameters: () => [{ type: FormControlService }], propDecorators: { showInList: [{
+                type: Input
+            }], fields: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], FormTemplateRef: [{
+                type: ViewChild,
+                args: ['FormTemplateRef', { read: ViewContainerRef, static: true }]
+            }] } });
+
+class DynamicConfigComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: DynamicConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: DynamicConfigComponent, selector: "df-dynamic-config", ngImport: i0, template: "<p>dynamic-config works!</p>\r\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: DynamicConfigComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-dynamic-config', template: "<p>dynamic-config works!</p>\r\n" }]
+        }] });
+
+class DynamicControlComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: DynamicControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: DynamicControlComponent, selector: "df-dynamic-control", ngImport: i0, template: "<p>dynamic-control works!</p>\r\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: DynamicControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-dynamic-control', template: "<p>dynamic-control works!</p>\r\n" }]
+        }] });
+
 class DynamicFormModule {
     static forRoot(config) {
         return {
@@ -1132,7 +1431,15 @@ class DynamicFormModule {
             DateEditControlComponent,
             SelectConfigComponent,
             SelectControlComponent,
-            DynamicComponent], imports: [FormsModule,
+            DynamicComponent,
+            DynamicConfigComponent,
+            DynamicViewComponent,
+            DynamicControlComponent,
+            SelectViewComponent,
+            SwitchViewComponent,
+            TextEditViewComponent,
+            DateEditViewComponent,
+            NumericEditViewComponent], imports: [FormsModule,
             CoreModule,
             ThemeSharedModule,
             ReactiveFormsModule,
@@ -1147,7 +1454,10 @@ class DynamicFormModule {
             DateEditControlComponent,
             SelectConfigComponent,
             SelectControlComponent,
-            DynamicComponent] }); }
+            DynamicComponent,
+            DynamicConfigComponent,
+            DynamicViewComponent,
+            DynamicControlComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: DynamicFormModule, imports: [FormsModule,
             CoreModule,
             ThemeSharedModule,
@@ -1170,6 +1480,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImpor
                         SelectConfigComponent,
                         SelectControlComponent,
                         DynamicComponent,
+                        DynamicConfigComponent,
+                        DynamicViewComponent,
+                        DynamicControlComponent,
+                        SelectViewComponent,
+                        SwitchViewComponent,
+                        TextEditViewComponent,
+                        DateEditViewComponent,
+                        NumericEditViewComponent,
                     ],
                     imports: [
                         FormsModule,
@@ -1192,6 +1510,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImpor
                         SelectConfigComponent,
                         SelectControlComponent,
                         DynamicComponent,
+                        DynamicConfigComponent,
+                        DynamicViewComponent,
+                        DynamicControlComponent,
                     ],
                     providers: [],
                 }]
@@ -1205,5 +1526,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AddFieldControlGroup, DateEditConfigComponent, DateEditControlComponent, DynamicComponent, DynamicFormModule, FieldControlGroup, NumbericEditConfigComponent, NumbericEditControlComponent, SelectConfigComponent, SelectControlComponent, SwitchConfigComponent, SwitchControlComponent, TextEditComponent, TextEditConfig, TextEditConfigComponent, maxDecimalPlacesValidator };
+export { AddFieldControlGroup, DateEditConfigComponent, DateEditControlComponent, DynamicComponent, DynamicConfigComponent, DynamicControlComponent, DynamicFormModule, DynamicViewComponent, FieldControlGroup, NumbericEditConfigComponent, NumbericEditControlComponent, SelectConfigComponent, SelectControlComponent, SwitchConfigComponent, SwitchControlComponent, TextEditComponent, TextEditConfig, TextEditConfigComponent, maxDecimalPlacesValidator };
 //# sourceMappingURL=dignite-ng-expand.dynamic-form.mjs.map