@dignite-ng/expand.dynamic-form 0.0.7 → 0.0.8

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

@@ -1,10 +1,12 @@
 import * as i0 from '@angular/core';
-import { Component, Input, ViewChild, ChangeDetectionStrategy, Injectable, ViewContainerRef, NgModule } from '@angular/core';
+import { Component, Input, ViewChild, ChangeDetectionStrategy, Injectable, inject, ViewContainerRef, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
-import { Validators, FormsModule, ReactiveFormsModule, FormArray, FormGroup, FormControl } from '@angular/forms';
+import { Validators, FormsModule, ReactiveFormsModule, FormArray, FormGroup, FormControl, FormBuilder } from '@angular/forms';
 import * as i2 from '@abp/ng.core';
 import { CoreModule } from '@abp/ng.core';
+import * as i6 from '@abp/ng.theme.shared';
 import { ThemeSharedModule } from '@abp/ng.theme.shared';
+import * as i7 from '@ng-bootstrap/ng-bootstrap';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { NzTreeModule } from 'ng-zorro-antd/tree';
 import * as i4 from '@dignite-ng/expand.file-explorer';
@@ -1163,13 +1165,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['submitclick', { static: true }]
             }] } });
 
-class SelectConfig {
-    /**空值文本 */
-    'Select.NullText' = ['', []];
-    //多选
-    'Select.Multiple' = [false, []];
-    // 选项
-    'Select.Options' = new FormArray([]);
+class MatrixConfig {
+    // 矩阵类型
+    'MatrixBlockTypes' = new FormArray([]);
+    constructor(data) {
+        if (data) {
+            for (const key in data) {
+                if (data.hasOwnProperty(key)) {
+                    this[key] = data[key];
+                }
+            }
+        }
+    }
+}
+class MatrixItemConfig {
+    displayName = ['', [Validators.required]];
+    /**字段名字 */
+    name = ['', [Validators.required]];
     constructor(data) {
         if (data) {
             for (const key in data) {
@@ -1180,6 +1192,129 @@ class SelectConfig {
         }
     }
 }
+class matrixFieldInputBase {
+    /**字段名称 Display name of this field */
+    displayName = ['', [Validators.required]];
+    /**字段唯一名称 Unique Name*/
+    name = ['', [Validators.required]];
+    /**描述 说明 */
+    description = ['', []];
+    /**FieldType字段类型 表单控件名称 */
+    formControlName = ['TextEdit', [Validators.required]];
+    /**动态表单配置 */
+    formConfiguration = new FormGroup({});
+    constructor(data) {
+        if (data) {
+            for (const key in data) {
+                if (data.hasOwnProperty(key)) {
+                    this[key] = data[key];
+                }
+            }
+        }
+    }
+}
+
+class MatrixControlComponent {
+    fb;
+    constructor(fb) {
+        this.fb = fb;
+    }
+    /**表单实体 */
+    _entity;
+    set entity(v) {
+        this._entity = v;
+        this.dataLoaded();
+    }
+    /**字段配置列表 */
+    _fields = '';
+    set fields(v) {
+        this._fields = v;
+        this.dataLoaded();
+    }
+    /**父级字段名称，用于为表单设置控件赋值 */
+    _parentFiledName;
+    set parentFiledName(v) {
+        this._parentFiledName = v;
+        this.dataLoaded();
+    }
+    /**父级字段名称，用于为表单设置控件赋值 */
+    _selected;
+    set selected(v) {
+        this._selected = v;
+        if (v) {
+            this.dataLoaded();
+        }
+    }
+    /**语言 */
+    _culture;
+    set culture(v) {
+        this._culture = v;
+    }
+    submitclick;
+    /** 获取父级字段代表的表单组*/
+    extraProperties;
+    /**数据加载完成 */
+    async dataLoaded() {
+        if (this._fields && this._entity && this._parentFiledName) {
+            this.extraProperties = this._entity.get(this._parentFiledName);
+            await this.AfterInit();
+            this.submitclick.nativeElement.click();
+            if (this._selected)
+                this.fieldNameControl.patchValue(this._selected);
+        }
+    }
+    formConfiguration;
+    /**获取表格字段代表的控件 */
+    fieldNameControl;
+    AfterInit() {
+        return new Promise((resolve, rejects) => {
+            let formConfiguration = this._fields.field.formConfiguration;
+            let newArrayGroup = this.fb.array([]);
+            this.extraProperties.setControl(this._fields.field.name, newArrayGroup);
+            this.fieldNameControl = this.extraProperties.get(this._fields.field.name);
+            if (this._selected) {
+                this._selected.forEach(el => {
+                    this.addMatrixControl(formConfiguration.MatrixBlockTypes.find(item => item.name == el.matrixBlockTypeName));
+                });
+            }
+            this.MatrixBlockTypesList = formConfiguration.MatrixBlockTypes;
+            resolve(true);
+        });
+    }
+    /**矩阵列表 */
+    MatrixBlockTypesList = [];
+    /**增加指定矩阵控件项 */
+    addMatrixControl(item) {
+        this.fieldNameControl.push(this.fb.group({
+            extraProperties: new FormGroup({}),
+            matrixBlockTypeName: [item.name],
+            displayName: [item.displayName]
+        }));
+    }
+    /**删除矩阵控件 */
+    deleteMatrixControl(index) {
+        this.fieldNameControl.removeAt(index);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MatrixControlComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MatrixControlComponent, selector: "df-matrix-control", inputs: { entity: "entity", fields: "fields", parentFiledName: "parentFiledName", selected: "selected", culture: "culture" }, viewQueries: [{ propertyName: "submitclick", first: true, predicate: ["submitclick"], descendants: true, static: true }], ngImport: i0, template: "<form [formGroup]=\"_entity\">\n    <div formGroupName=\"extraProperties\">\n        <div class=\"mb-2\">\n            <label class=\"form-label\" *ngIf=\"_fields.displayName\">{{ _fields.displayName }}</label>\n            <div [formArrayName]=\"_fields.field.name\">\n                <ng-container *ngFor=\"let item of fieldNameControl.controls;let i=index\">\n                    <div class=\"card mb-3 border \" [formGroupName]=\"i\">\n                        <div class=\"card-header d-flex align-items-center justify-content-between border-bottom pt-1\">\n                            <div>{{item.value.displayName}}</div>\n                            <button class=\"btn btn-sm btn-light p-0\" (click.stop)=\"deleteMatrixControl(i)\"><i\n                                    class=\"fas fa-trash p-2\"></i></button>\n                        </div>\n                        <div class=\"card-body\">\n                            <ng-container *ngFor=\"let el of MatrixBlockTypesList;let il =index\">\n                                <ng-container *ngIf=\"el.name===item.value.matrixBlockTypeName\">\n                                    <ng-container *ngFor=\"let elf of el.fields; let fi=index\">\n                                        <ng-container>\n                                            <df-dynamic [entity]=\"item\"\n                                                [fields]=\"{ field: elf,displayName:elf.displayName }\"\n                                                [selected]=\"_selected ? _selected[i][_parentFiledName][elf.name]: ''\"\n                                                [parentFiledName]=\"'extraProperties'\" [culture]=\"_culture\"></df-dynamic>\n                                        </ng-container>\n                                    </ng-container>\n                                </ng-container>\n                            </ng-container>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n            <div>\n                <div class=\"btn-group\" role=\"group\" aria-label=\"Basic example\">\n                    <ng-container *ngFor=\"let item of MatrixBlockTypesList;let i =index\">\n                        <button type=\"button\" class=\"btn btn-primary btn-sm\" (click.stop)=\"addMatrixControl(item)\"><i\n                                class=\"fas fa-plus me-1\"></i>{{item.displayName}}</button>\n                    </ng-container>\n                </div>\n            </div>\n            <div class=\"form-text\" *ngIf=\"_fields.field.description\">{{_fields.field.description}}</div>\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.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.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i2.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }, { kind: "directive", type: i3.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MatrixControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-matrix-control', template: "<form [formGroup]=\"_entity\">\n    <div formGroupName=\"extraProperties\">\n        <div class=\"mb-2\">\n            <label class=\"form-label\" *ngIf=\"_fields.displayName\">{{ _fields.displayName }}</label>\n            <div [formArrayName]=\"_fields.field.name\">\n                <ng-container *ngFor=\"let item of fieldNameControl.controls;let i=index\">\n                    <div class=\"card mb-3 border \" [formGroupName]=\"i\">\n                        <div class=\"card-header d-flex align-items-center justify-content-between border-bottom pt-1\">\n                            <div>{{item.value.displayName}}</div>\n                            <button class=\"btn btn-sm btn-light p-0\" (click.stop)=\"deleteMatrixControl(i)\"><i\n                                    class=\"fas fa-trash p-2\"></i></button>\n                        </div>\n                        <div class=\"card-body\">\n                            <ng-container *ngFor=\"let el of MatrixBlockTypesList;let il =index\">\n                                <ng-container *ngIf=\"el.name===item.value.matrixBlockTypeName\">\n                                    <ng-container *ngFor=\"let elf of el.fields; let fi=index\">\n                                        <ng-container>\n                                            <df-dynamic [entity]=\"item\"\n                                                [fields]=\"{ field: elf,displayName:elf.displayName }\"\n                                                [selected]=\"_selected ? _selected[i][_parentFiledName][elf.name]: ''\"\n                                                [parentFiledName]=\"'extraProperties'\" [culture]=\"_culture\"></df-dynamic>\n                                        </ng-container>\n                                    </ng-container>\n                                </ng-container>\n                            </ng-container>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n            <div>\n                <div class=\"btn-group\" role=\"group\" aria-label=\"Basic example\">\n                    <ng-container *ngFor=\"let item of MatrixBlockTypesList;let i =index\">\n                        <button type=\"button\" class=\"btn btn-primary btn-sm\" (click.stop)=\"addMatrixControl(item)\"><i\n                                class=\"fas fa-plus me-1\"></i>{{item.displayName}}</button>\n                    </ng-container>\n                </div>\n            </div>\n            <div class=\"form-text\" *ngIf=\"_fields.field.description\">{{_fields.field.description}}</div>\n        </div>\n    </div>\n    <button type=\"submit\" style=\"display: none\" #submitclick></button>\n</form>" }]
+        }], ctorParameters: function () { return [{ type: i1.FormBuilder }]; }, propDecorators: { entity: [{
+                type: Input
+            }], fields: [{
+                type: Input
+            }], parentFiledName: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], culture: [{
+                type: Input
+            }], submitclick: [{
+                type: ViewChild,
+                args: ['submitclick', { static: true }]
+            }] } });
 
 class DfApiService {
     constructor() { }
@@ -1260,6 +1395,236 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
+class MatrixConfigComponent {
+    fb;
+    _DfApiService;
+    constructor(fb, _DfApiService) {
+        this.fb = fb;
+        this._DfApiService = _DfApiService;
+    }
+    /**表单控件组 */
+    _FieldControlGroup;
+    /**表单控件类型 */
+    _type;
+    set type(v) {
+        this._type = v;
+        this.dataLoaded();
+    }
+    /**表单实体 */
+    _Entity;
+    set Entity(v) {
+        this._Entity = v;
+        this.dataLoaded();
+    }
+    /**选择的表单信息 */
+    _selected;
+    set selected(v) {
+        if (v) {
+            this._selected = v;
+            this.dataLoaded();
+        }
+    }
+    submitclick;
+    async dataLoaded() {
+        if (this._Entity && this._type) {
+            await this.AfterInit();
+            this.submitclick.nativeElement.click();
+        }
+    }
+    AfterInit() {
+        return new Promise(async (resolve, rejects) => {
+            this._FieldControlGroup = getExcludeAssignControl(this._type);
+            // this._FieldControlGroup = getExcludeAssignControl(this._type)
+            this._Entity.setControl('formConfiguration', this.fb.group(new MatrixConfig()));
+            await this.setSelectValue();
+            this.formConfiguration.patchValue(this._selected.formConfiguration);
+            resolve(true);
+        });
+    }
+    setSelectValue() {
+        return new Promise((resolve, rejects) => {
+            if (this._selected && this._selected.formControlName == this._type) {
+                this._selected.formConfiguration['MatrixBlockTypes'].forEach(((el, index) => {
+                    this.addMatrixBlockTypeItem(el);
+                    el.fields.forEach((elf, indexf) => {
+                        this.addMatrixFieldItem(elf, index);
+                    });
+                }));
+                resolve(true);
+            }
+        });
+    }
+    /**获取表单配置 */
+    get formConfiguration() {
+        return this._Entity.get('formConfiguration');
+    }
+    /**获取表单配置下的矩阵块表单数组 */
+    get MatrixBlockTypes() {
+        return this.formConfiguration.controls['MatrixBlockTypes'];
+    }
+    /**模态框-状态 */
+    matrixModalOpen = false;
+    /**模态框-是否正在编辑 */
+    isMatrixModalEdit = false;
+    /**模态框-用于确定模态的繁忙状态是否为真 */
+    modalBusy = false;
+    /**模态框-表单 */
+    matrixModalForm;
+    /**表单控件模板-用于在form外提交submit */
+    matrixModalModalSubmit;
+    /**矩阵块-选择的下标 */
+    selectMatrixBlockIndex = 0;
+    /**矩阵块-选择的矩阵下字段的下标 */
+    selectMatrixFieldIndex = 0;
+    /**模态框-状态改变 */
+    matrixModalVisibleChange(event) {
+        if (!event) {
+            this.isMatrixModalEdit = false;
+            this.matrixModalForm = undefined;
+            return;
+        }
+    }
+    /**矩阵块--新增-打开模态框 */
+    addMatrixBlockType() {
+        this.matrixModalForm = this.fb.group(new MatrixItemConfig());
+        this.matrixModalOpen = true;
+    }
+    /**模态框--矩阵表单保存提交 */
+    createOrEditSave() {
+        let input = this.matrixModalForm.value;
+        if (!this.matrixModalForm.valid)
+            return;
+        if (this.isMatrixModalEdit) {
+            let MatrixBlockTypesItem = this.MatrixBlockTypes.at(this.selectMatrixBlockIndex);
+            MatrixBlockTypesItem.patchValue({
+                ...input
+            });
+        }
+        else {
+            this.addMatrixBlockTypeItem(input);
+        }
+        this.matrixModalOpen = false;
+    }
+    /**新增矩阵块-向数组表单中增加项 */
+    addMatrixBlockTypeItem(input) {
+        this.MatrixBlockTypes.push(new FormGroup({
+            displayName: new FormControl(input.displayName, Validators.required),
+            name: new FormControl(input.name, Validators.required),
+            fields: new FormArray([])
+        }));
+    }
+    /**编辑矩阵块 */
+    EditMatrixBlock(input) {
+        this.matrixModalForm = this.fb.group(new MatrixItemConfig());
+        this.matrixModalForm.patchValue({
+            ...input
+        });
+        this.matrixModalOpen = true;
+        this.isMatrixModalEdit = true;
+    }
+    /**删除矩阵块 */
+    DeleteMatrixBlock(index) {
+        this.MatrixBlockTypes.removeAt(index);
+    }
+    /**矩阵块-选择 */
+    selectMatrixBlockChange(index) {
+        this.selectMatrixBlockIndex = index;
+    }
+    /**矩阵字段-新增 */
+    addMatrixField() {
+        this.addMatrixFieldItem('', this.selectMatrixBlockIndex);
+    }
+    /**矩阵字段-新增矩阵字段项 */
+    addMatrixFieldItem(input = '', selectMatrixBlockIndex) {
+        /**矩阵下标的矩阵项Form */
+        let MatrixBlockTypesItemForm = this.MatrixBlockTypes.at(selectMatrixBlockIndex);
+        let MatrixFieldItemForm = MatrixBlockTypesItemForm.get('fields');
+        MatrixFieldItemForm.push(this.fb.group({
+            /**字段名称 Display name of this field */
+            displayName: [input.displayName, [Validators.required]],
+            /**字段唯一名称 Unique Name*/
+            name: [input.name, [Validators.required]],
+            /**描述 说明 */
+            description: [input.description, []],
+            /**FieldType字段类型 表单控件名称 */
+            formControlName: [input.formControlName || 'TextEdit', [Validators.required]],
+            //动态表单配置
+            formConfiguration: new FormGroup({}),
+        }));
+    }
+    /**删除矩阵字段项 */
+    deleteMatrixField(MatrixFieldForm, index) {
+        MatrixFieldForm.removeAt(index);
+        this.selectMatrixFieldIndex = 0;
+    }
+    /**矩阵字段-选择 */
+    selectMatrixFieldChange(MatrixBlockIndex, MatrixFieldIndex) {
+        this.selectMatrixFieldIndex = MatrixFieldIndex;
+    }
+    get nameInput() {
+        return this.matrixModalForm?.get('name');
+    }
+    get FieldnameInput() {
+        let MatrixBlockTypesItemForm = this.MatrixBlockTypes.at(this.selectMatrixBlockIndex);
+        let MatrixFieldItemForm = MatrixBlockTypesItemForm.get('fields');
+        return MatrixFieldItemForm.at(this.selectMatrixFieldIndex).get('name');
+    }
+    /**矩阵displayNameInput字段失去焦点 */
+    displayNameInputBlur(event) {
+        let value = event.target.value;
+        let pinyin = this._DfApiService.chineseToPinyin(value);
+        let nameInput = this.nameInput;
+        if (nameInput.value)
+            return;
+        nameInput.patchValue(pinyin);
+    }
+    /**矩阵displayNameInput字段失去焦点 */
+    MatrixFieldDisplayNameInputBlur(event) {
+        let value = event.target.value;
+        let pinyin = this._DfApiService.chineseToPinyin(value);
+        let FieldnameInput = this.FieldnameInput;
+        if (FieldnameInput.value)
+            return;
+        FieldnameInput.patchValue(pinyin);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MatrixConfigComponent, deps: [{ token: i1.FormBuilder }, { token: DfApiService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MatrixConfigComponent, selector: "df-matrix-config", inputs: { type: "type", Entity: "Entity", selected: "selected" }, viewQueries: [{ propertyName: "submitclick", first: true, predicate: ["submitclick"], descendants: true, static: true }, { propertyName: "matrixModalModalSubmit", first: true, predicate: ["matrixModalModalSubmit"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"_Entity\">\n    <div formGroupName=\"formConfiguration\">\n        <div class=\"mb-2\">\n            <label class=\"form-label\">{{'Cms::::FormControl:Matrix' | abpLocalization}}</label>\n            <div class=\"row\">\n                <div class=\"col-md-3\">\n                    <div class=\"list-group\">\n                        <li class=\"list-group-item d-flex align-items-center justify-content-between\"\n                            aria-current=\"true\">\n                            {{'Cms::MatrixBlockType' | abpLocalization}}\n                            <button class=\"btn btn-light btn-sm p-0\" (click.stop)=\"addMatrixBlockType()\">\n                                <i class=\"fas fa-plus-circle p-1\"></i>\n                            </button>\n                        </li>\n                        <ng-container *ngFor=\"let item of MatrixBlockTypes.controls;let i =index\">\n                            <button type=\"button\" (click.stop)=\"selectMatrixBlockChange(i)\"\n                                class=\"list-group-item d-flex align-items-center justify-content-between list-group-item-action \"\n                                [class.active]=\"i===selectMatrixBlockIndex\">\n                                <div>\n                                    <div>{{item.value.displayName}}</div>\n                                    <div>{{item.value.name}}</div>\n                                </div>\n                                <div ngbDropdown class=\"d-inline-block\">\n                                    <button type=\"button\" class=\"btn btn-light btn-sm\" id=\"dropdownBasic1\"\n                                        style=\"z-index: 8;\" ngbDropdownToggle></button>\n                                    <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"z-index: 9;\">\n                                        <button ngbDropdownItem\n                                            (click.stop)=\"EditMatrixBlock(item.value)\">{{'AbpUi::Edit' | abpLocalization}}</button>\n                                        <button ngbDropdownItem\n                                            (click.stop)=\"DeleteMatrixBlock(i)\">{{'AbpUi::Delete' | abpLocalization}}</button>\n                                    </div>\n                                </div>\n                            </button>\n                        </ng-container>\n                    </div>\n                </div>\n                <div class=\"col-md-3\">\n                    <div class=\"list-group\" *ngIf=\"MatrixBlockTypes?.controls.length>0\">\n                        <li class=\"list-group-item d-flex align-items-center justify-content-between\"\n                            aria-current=\"true\">\n                            {{'Cms::Fields' | abpLocalization}}\n                            <button class=\"btn btn-light btn-sm p-0\" (click.stop)=\"addMatrixField()\">\n                                <i class=\"fas fa-plus-circle p-1\"></i>\n                            </button>\n                        </li>\n                        <ng-container *ngFor=\"let item of MatrixBlockTypes.controls;let i =index\">\n                            <ng-container *ngIf=\"i === selectMatrixBlockIndex\">\n                                <ng-container *ngFor=\"let el of item.controls['fields'].controls;let fi =index\">\n                                    <button type=\"button\" (click.stop)=\"selectMatrixFieldChange(i,fi)\"\n                                        class=\"list-group-item d-flex align-items-center justify-content-between list-group-item-action \"\n                                        [class.active]=\"fi===selectMatrixFieldIndex\">\n                                        <div>\n                                            <div>{{el.value.displayName}}</div>\n                                            <div>{{el.value.name}}</div>\n                                        </div>\n                                        <button type=\"button\"\n                                            (click.stop)=\"deleteMatrixField(item.controls['fields'],fi)\"\n                                            class=\"btn btn-sm btn-li\">{{'AbpUi::Delete' | abpLocalization}}</button>\n                                    </button>\n                                </ng-container>\n                            </ng-container>\n                        </ng-container>\n                    </div>\n                </div>\n                <div class=\"col-md-6\" formArrayName=\"MatrixBlockTypes\">\n                    <ng-container *ngFor=\"let item of MatrixBlockTypes.controls;let i =index\">\n                        <div [formGroupName]=\"i\" [hidden]=\"i !== selectMatrixBlockIndex\">\n                            <div formArrayName=\"fields\">\n                                <ng-container *ngFor=\"let item of item.controls['fields'].controls;let fi =index\">\n                                    <div [formGroupName]=\"fi\" [hidden]=\"fi !== selectMatrixFieldIndex\">\n                                        <div class=\"mb-2\">\n                                            <label class=\"form-label\"\n                                                for=\"displayName\">{{'Cms::DisplayName' | abpLocalization}}</label>\n                                            <input type=\"text\" class=\"form-control\" formControlName=\"displayName\"\n                                                (blur)=\"MatrixFieldDisplayNameInputBlur($event)\">\n                                        </div>\n                                        <div class=\"mb-2\">\n                                            <label class=\"form-label\"\n                                                for=\"name\">{{'DigniteAbpForms::FieldName' | abpLocalization}}</label>\n                                            <input type=\"text\" class=\"form-control\" formControlName=\"name\">\n                                            <div class=\"form-text\">\n                                                {{'DigniteAbpForms::FieldNameHelpText' | abpLocalization}}</div>\n                                        </div>\n                                        <div class=\"mb-2\">\n                                            <label class=\"form-label\"\n                                                for=\"description\">{{'Cms::Description' | abpLocalization}}</label>\n                                            <input type=\"text\" class=\"form-control\" formControlName=\"description\">\n                                        </div>\n                                        <div class=\"mb-2\">\n                                            <label class=\"form-label\"\n                                                for=\"formControlName\">{{'Cms::FieldType' | abpLocalization}}</label>\n                                            <select class=\"form-select\" formControlName=\"formControlName\">\n                                                <ng-container *ngFor=\"let item of _FieldControlGroup;let i =index\">\n                                                    <option [value]=\"item.name\">{{item.displayName}}</option>\n                                                </ng-container>\n                                            </select>\n                                        </div>\n                                        <ng-container *ngIf=\"item.value.formControlName&&item\">\n                                            <df-dynamic [type]=\"item.value.formControlName\" [entity]=\"item\"\n                                                [selected]=\"_selected?_selected['formConfiguration']['MatrixBlockTypes'][i]['fields'][fi]:''\"></df-dynamic>\n                                        </ng-container>\n\n\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </ng-container>\n                </div>\n\n            </div>\n        </div>\n        <button type=\"submit\" (abpInit)=\"submitclick?.nativeElement?.click()\" style=\"display: none;\"\n            #submitclick></button>\n    </div>\n</form>\n\n\n\n<abp-modal [(visible)]=\"matrixModalOpen\" [busy]=\"modalBusy\" (visibleChange)=\"matrixModalVisibleChange($event)\" >\n    <ng-template #abpHeader>\n        <h3>{{isMatrixEdit?('AbpUi::Edit' | abpLocalization):('Cms::New' | abpLocalization)}}</h3>\n    </ng-template>\n    <ng-template #abpBody>\n        <ng-template #loaderRef>\n            <div class=\"text-center\"><i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i></div>\n        </ng-template>\n        <ng-container *ngIf=\"matrixModalForm; else loaderRef\">\n            <form class=\"sites-modal-form\" #myForm=\"ngForm\" [formGroup]=\"matrixModalForm\"\n                (ngSubmit)=\"createOrEditSave()\">\n                <button type=\"submit\" #matrixModalModalSubmit style=\"display: none\"></button>\n                <div class=\"mb-2\">\n                    <label class=\"form-label\" for=\"displayName\">{{'Cms::DisplayName' | abpLocalization}}</label>\n                    <input type=\"text\" class=\"form-control\" formControlName=\"displayName\"\n                        (blur)=\"displayNameInputBlur($event)\">\n                </div>\n                <div class=\"mb-2\">\n                    <label class=\"form-label\" for=\"name\">{{'Cms::Name' | abpLocalization}}</label>\n                    <input type=\"text\" class=\"form-control\" formControlName=\"name\">\n                </div>\n            </form>\n        </ng-container>\n    </ng-template>\n    <ng-template #abpFooter>\n        <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>\n        <abp-button iconClass=\"fa fa-check\"\n            (click)=\"matrixModalModalSubmit.nativeElement.click()\">{{'AbpUi::Save' | abpLocalization}}</abp-button>\n    </ng-template>\n</abp-modal>", styles: [""], 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.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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([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: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i2.FormSubmitDirective, selector: "form[ngSubmit][formGroup]", inputs: ["debounce", "notValidateOnSubmit", "markAsDirtyWhenSubmit"], outputs: ["ngSubmit"] }, { kind: "directive", type: i2.InitDirective, selector: "[abpInit]", outputs: ["abpInit"] }, { kind: "directive", type: i2.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }, { kind: "directive", type: i3.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i3.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "component", type: i6.ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "component", type: i6.ModalComponent, selector: "abp-modal", inputs: ["visible", "busy", "options", "suppressUnsavedChangesWarning"], outputs: ["visibleChange", "init", "appear", "disappear"] }, { kind: "directive", type: i6.ModalCloseDirective, selector: "[abpClose]" }, { kind: "directive", type: i7.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i7.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i7.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i7.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }, { kind: "pipe", type: i2.LocalizationPipe, name: "abpLocalization" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MatrixConfigComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-matrix-config', template: "<form [formGroup]=\"_Entity\">\n    <div formGroupName=\"formConfiguration\">\n        <div class=\"mb-2\">\n            <label class=\"form-label\">{{'Cms::::FormControl:Matrix' | abpLocalization}}</label>\n            <div class=\"row\">\n                <div class=\"col-md-3\">\n                    <div class=\"list-group\">\n                        <li class=\"list-group-item d-flex align-items-center justify-content-between\"\n                            aria-current=\"true\">\n                            {{'Cms::MatrixBlockType' | abpLocalization}}\n                            <button class=\"btn btn-light btn-sm p-0\" (click.stop)=\"addMatrixBlockType()\">\n                                <i class=\"fas fa-plus-circle p-1\"></i>\n                            </button>\n                        </li>\n                        <ng-container *ngFor=\"let item of MatrixBlockTypes.controls;let i =index\">\n                            <button type=\"button\" (click.stop)=\"selectMatrixBlockChange(i)\"\n                                class=\"list-group-item d-flex align-items-center justify-content-between list-group-item-action \"\n                                [class.active]=\"i===selectMatrixBlockIndex\">\n                                <div>\n                                    <div>{{item.value.displayName}}</div>\n                                    <div>{{item.value.name}}</div>\n                                </div>\n                                <div ngbDropdown class=\"d-inline-block\">\n                                    <button type=\"button\" class=\"btn btn-light btn-sm\" id=\"dropdownBasic1\"\n                                        style=\"z-index: 8;\" ngbDropdownToggle></button>\n                                    <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"z-index: 9;\">\n                                        <button ngbDropdownItem\n                                            (click.stop)=\"EditMatrixBlock(item.value)\">{{'AbpUi::Edit' | abpLocalization}}</button>\n                                        <button ngbDropdownItem\n                                            (click.stop)=\"DeleteMatrixBlock(i)\">{{'AbpUi::Delete' | abpLocalization}}</button>\n                                    </div>\n                                </div>\n                            </button>\n                        </ng-container>\n                    </div>\n                </div>\n                <div class=\"col-md-3\">\n                    <div class=\"list-group\" *ngIf=\"MatrixBlockTypes?.controls.length>0\">\n                        <li class=\"list-group-item d-flex align-items-center justify-content-between\"\n                            aria-current=\"true\">\n                            {{'Cms::Fields' | abpLocalization}}\n                            <button class=\"btn btn-light btn-sm p-0\" (click.stop)=\"addMatrixField()\">\n                                <i class=\"fas fa-plus-circle p-1\"></i>\n                            </button>\n                        </li>\n                        <ng-container *ngFor=\"let item of MatrixBlockTypes.controls;let i =index\">\n                            <ng-container *ngIf=\"i === selectMatrixBlockIndex\">\n                                <ng-container *ngFor=\"let el of item.controls['fields'].controls;let fi =index\">\n                                    <button type=\"button\" (click.stop)=\"selectMatrixFieldChange(i,fi)\"\n                                        class=\"list-group-item d-flex align-items-center justify-content-between list-group-item-action \"\n                                        [class.active]=\"fi===selectMatrixFieldIndex\">\n                                        <div>\n                                            <div>{{el.value.displayName}}</div>\n                                            <div>{{el.value.name}}</div>\n                                        </div>\n                                        <button type=\"button\"\n                                            (click.stop)=\"deleteMatrixField(item.controls['fields'],fi)\"\n                                            class=\"btn btn-sm btn-li\">{{'AbpUi::Delete' | abpLocalization}}</button>\n                                    </button>\n                                </ng-container>\n                            </ng-container>\n                        </ng-container>\n                    </div>\n                </div>\n                <div class=\"col-md-6\" formArrayName=\"MatrixBlockTypes\">\n                    <ng-container *ngFor=\"let item of MatrixBlockTypes.controls;let i =index\">\n                        <div [formGroupName]=\"i\" [hidden]=\"i !== selectMatrixBlockIndex\">\n                            <div formArrayName=\"fields\">\n                                <ng-container *ngFor=\"let item of item.controls['fields'].controls;let fi =index\">\n                                    <div [formGroupName]=\"fi\" [hidden]=\"fi !== selectMatrixFieldIndex\">\n                                        <div class=\"mb-2\">\n                                            <label class=\"form-label\"\n                                                for=\"displayName\">{{'Cms::DisplayName' | abpLocalization}}</label>\n                                            <input type=\"text\" class=\"form-control\" formControlName=\"displayName\"\n                                                (blur)=\"MatrixFieldDisplayNameInputBlur($event)\">\n                                        </div>\n                                        <div class=\"mb-2\">\n                                            <label class=\"form-label\"\n                                                for=\"name\">{{'DigniteAbpForms::FieldName' | abpLocalization}}</label>\n                                            <input type=\"text\" class=\"form-control\" formControlName=\"name\">\n                                            <div class=\"form-text\">\n                                                {{'DigniteAbpForms::FieldNameHelpText' | abpLocalization}}</div>\n                                        </div>\n                                        <div class=\"mb-2\">\n                                            <label class=\"form-label\"\n                                                for=\"description\">{{'Cms::Description' | abpLocalization}}</label>\n                                            <input type=\"text\" class=\"form-control\" formControlName=\"description\">\n                                        </div>\n                                        <div class=\"mb-2\">\n                                            <label class=\"form-label\"\n                                                for=\"formControlName\">{{'Cms::FieldType' | abpLocalization}}</label>\n                                            <select class=\"form-select\" formControlName=\"formControlName\">\n                                                <ng-container *ngFor=\"let item of _FieldControlGroup;let i =index\">\n                                                    <option [value]=\"item.name\">{{item.displayName}}</option>\n                                                </ng-container>\n                                            </select>\n                                        </div>\n                                        <ng-container *ngIf=\"item.value.formControlName&&item\">\n                                            <df-dynamic [type]=\"item.value.formControlName\" [entity]=\"item\"\n                                                [selected]=\"_selected?_selected['formConfiguration']['MatrixBlockTypes'][i]['fields'][fi]:''\"></df-dynamic>\n                                        </ng-container>\n\n\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </ng-container>\n                </div>\n\n            </div>\n        </div>\n        <button type=\"submit\" (abpInit)=\"submitclick?.nativeElement?.click()\" style=\"display: none;\"\n            #submitclick></button>\n    </div>\n</form>\n\n\n\n<abp-modal [(visible)]=\"matrixModalOpen\" [busy]=\"modalBusy\" (visibleChange)=\"matrixModalVisibleChange($event)\" >\n    <ng-template #abpHeader>\n        <h3>{{isMatrixEdit?('AbpUi::Edit' | abpLocalization):('Cms::New' | abpLocalization)}}</h3>\n    </ng-template>\n    <ng-template #abpBody>\n        <ng-template #loaderRef>\n            <div class=\"text-center\"><i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i></div>\n        </ng-template>\n        <ng-container *ngIf=\"matrixModalForm; else loaderRef\">\n            <form class=\"sites-modal-form\" #myForm=\"ngForm\" [formGroup]=\"matrixModalForm\"\n                (ngSubmit)=\"createOrEditSave()\">\n                <button type=\"submit\" #matrixModalModalSubmit style=\"display: none\"></button>\n                <div class=\"mb-2\">\n                    <label class=\"form-label\" for=\"displayName\">{{'Cms::DisplayName' | abpLocalization}}</label>\n                    <input type=\"text\" class=\"form-control\" formControlName=\"displayName\"\n                        (blur)=\"displayNameInputBlur($event)\">\n                </div>\n                <div class=\"mb-2\">\n                    <label class=\"form-label\" for=\"name\">{{'Cms::Name' | abpLocalization}}</label>\n                    <input type=\"text\" class=\"form-control\" formControlName=\"name\">\n                </div>\n            </form>\n        </ng-container>\n    </ng-template>\n    <ng-template #abpFooter>\n        <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>\n        <abp-button iconClass=\"fa fa-check\"\n            (click)=\"matrixModalModalSubmit.nativeElement.click()\">{{'AbpUi::Save' | abpLocalization}}</abp-button>\n    </ng-template>\n</abp-modal>" }]
+        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: DfApiService }]; }, propDecorators: { type: [{
+                type: Input
+            }], Entity: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], submitclick: [{
+                type: ViewChild,
+                args: ['submitclick', { static: true }]
+            }], matrixModalModalSubmit: [{
+                type: ViewChild,
+                args: ['matrixModalModalSubmit', { static: false }]
+            }] } });
+
+class SelectConfig {
+    /**空值文本 */
+    'Select.NullText' = ['', []];
+    //多选
+    'Select.Multiple' = [false, []];
+    // 选项
+    'Select.Options' = new FormArray([]);
+    constructor(data) {
+        if (data) {
+            for (const key in data) {
+                if (data.hasOwnProperty(key)) {
+                    this[key] = data[key];
+                }
+            }
+        }
+    }
+}
+
 class SelectConfigComponent {
     fb;
     _DfApiService;
@@ -1435,6 +1800,307 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['submitclick', { static: true }]
             }] } });
 
+class TableConfig {
+    // 选项
+    TableColumns = new FormArray([]);
+    constructor(data) {
+        if (data) {
+            for (const key in data) {
+                if (data.hasOwnProperty(key)) {
+                    this[key] = data[key];
+                }
+            }
+        }
+    }
+}
+class TableFormControl {
+    /**列标题 */
+    displayName = ['', [Validators.required]];
+    /**空间配置 */
+    formConfiguration = new FormGroup({});
+    /**列名 */
+    name = ['', [Validators.required]];
+    //控件标识
+    formControlName = ['', [Validators.required]];
+    /**是否必填 */
+    required = [false];
+    /**描述 */
+    description = [''];
+    constructor(data) {
+        if (data) {
+            for (const key in data) {
+                if (data.hasOwnProperty(key)) {
+                    this[key] = data[key];
+                }
+            }
+        }
+    }
+}
+
+class TableConfigComponent {
+    fb;
+    _DfApiService;
+    constructor(fb, _DfApiService) {
+        this.fb = fb;
+        this._DfApiService = _DfApiService;
+    }
+    /**表单实体 */
+    _Entity;
+    set Entity(v) {
+        this._Entity = v;
+        this.dataLoaded();
+    }
+    /**选择的表单信息 */
+    _selected;
+    set selected(v) {
+        if (v) {
+            this._selected = v;
+            this.dataLoaded();
+        }
+    }
+    /**表单控件组 */
+    _fieldControlGroup;
+    /**表单控件类型 */
+    _type;
+    set type(v) {
+        this._type = v;
+        this.dataLoaded();
+    }
+    get formConfiguration() {
+        return this._Entity.get('formConfiguration');
+    }
+    get TableColumns() {
+        return this.formConfiguration.controls['TableColumns'];
+    }
+    submitclick;
+    async dataLoaded() {
+        if (this._Entity && this._type) {
+            await this.AfterInit();
+            this.submitclick.nativeElement.click();
+        }
+    }
+    /**增加选项 */
+    addTableColumns() {
+        this.TableColumns.push(this.fb.group({
+            ...new TableFormControl(),
+            formConfiguration: [{}]
+        }));
+    }
+    /**删除某个选项 */
+    deleteTableColumns(index) {
+        this.TableColumns.removeAt(index);
+    }
+    AfterInit() {
+        return new Promise((resolve, rejects) => {
+            this._Entity.setControl('formConfiguration', this.fb.group(new TableConfig()));
+            this._fieldControlGroup = getExcludeAssignControl(this._type);
+            if (this._selected && this._selected.formControlName == this._type) {
+                this._selected.formConfiguration['TableColumns'].forEach(el => {
+                    this.addTableColumns();
+                });
+                this.formConfiguration.patchValue(this._selected.formConfiguration);
+            }
+            else {
+                this.addTableColumns();
+            }
+            resolve(true);
+        });
+    }
+    itemForm;
+    /**选择表格的表单控件 */
+    selectTableControl(event, i, item) {
+        this.CurrentSelectionTableControlName = event.target.value;
+        this.tableSelectOpen = true;
+        this.tableSelectForm = this.fb.group(new TableFormControl());
+        this.TableColumnsIndex = i;
+        this.itemForm = item;
+    }
+    CurrentSelectionTableControlName;
+    /**正在创建或编辑的表格项下标 */
+    TableColumnsIndex;
+    /**创建站点模态框状态 */
+    tableSelectOpen = false;
+    /**用于确定模态的繁忙状态是否为真 */
+    modalBusy = false;
+    /**创建站点表单 */
+    tableSelectForm;
+    /**表格已选择数据 */
+    _tableSelected;
+    /**表单控件模板-动态赋值表单控件 */
+    tableSelectModalSubmit;
+    /**创建站点模态框状态改变 */
+    tableSelectVisibleChange(event) {
+        if (!event) {
+            this._tableSelected = undefined;
+            this.tableSelectForm = undefined;
+            this.CurrentSelectionTableControlName = undefined;
+            this.TableColumnsIndex = undefined;
+            return;
+        }
+    }
+    /**表单保存提交 */
+    createOrEditSave() {
+        const formGroup = this.TableColumns.at(this.TableColumnsIndex);
+        let formConfigurationgroup = formGroup.get('formConfiguration');
+        formConfigurationgroup.setValue({
+            ...this.tableSelectForm.value['formConfiguration'],
+        });
+        this.tableSelectOpen = false;
+    }
+    /**编辑站点按钮 */
+    EditSitesBtn(rows, i) {
+        this.CurrentSelectionTableControlName = rows.get('formControlName').value;
+        this.tableSelectForm = this.fb.group(new TableFormControl());
+        this.tableSelectForm.patchValue({
+            ...rows.value
+        });
+        this.tableSelectForm.get('formConfiguration').patchValue({
+            ...rows.value['formConfiguration']
+        });
+        this._tableSelected = rows.value;
+        this.TableColumnsIndex = i;
+        this.tableSelectOpen = true;
+    }
+    /**调整表格位置 */
+    TableArrowUpOrDown(type, index) {
+        let controlAt = this.TableColumns.at(index);
+        this.TableColumns.removeAt(index);
+        let lastindex = type == 'up' ? index - 1 : index + 1;
+        this.TableColumns.insert(lastindex, controlAt);
+    }
+    /**字段标签input失去标点生成字段名字 */
+    disPlayNameInputBlur(event, item) {
+        let value = event.target.value;
+        let pinyin = this._DfApiService.chineseToPinyin(value);
+        let nameInput = item.get('name');
+        if (nameInput.value)
+            return;
+        nameInput.patchValue(pinyin);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableConfigComponent, deps: [{ token: i1.FormBuilder }, { token: DfApiService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableConfigComponent, selector: "df-table-config", inputs: { Entity: "Entity", selected: "selected", type: "type" }, viewQueries: [{ propertyName: "submitclick", first: true, predicate: ["submitclick"], descendants: true, static: true }, { propertyName: "tableSelectModalSubmit", first: true, predicate: ["tableSelectModalSubmit"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"_Entity\">\n    <div formGroupName=\"formConfiguration\">\n        <div class=\"mb-2\">\n            <label class=\"form-label\">{{'DigniteAbpForms::SelectListItem' | abpLocalization}}</label>\n            <table class=\"table\">\n                <thead>\n                    <tr>\n                        <th scope=\"col\">{{'Cms::TableColumnDisplayName' | abpLocalization}}</th>\n                        <th scope=\"col\">{{'Cms::TableColumnName' | abpLocalization}}</th>\n                        <th scope=\"col\">{{'Cms::TableColumnForm' | abpLocalization}}</th>\n                        <th scope=\"col\" class=\"flex-end\">\n                            <button class=\"btn btn-light btn-sm\" (click.stop)=\"addTableColumns()\">\n                                <i class=\"fas fa-plus-circle\"></i>\n                            </button>\n                        </th>\n                    </tr>\n                </thead>\n                <tbody formArrayName=\"TableColumns\">\n                    <ng-container *ngFor=\"let item of TableColumns.controls;let i=index\">\n                        <tr [formGroupName]=\"i\">\n                            <td><input type=\"text\" class=\"form-control\" formControlName=\"displayName\"  (blur)=\"disPlayNameInputBlur($event,item)\" ></td>\n                            <td><input type=\"text\" class=\"form-control\" formControlName=\"name\"></td>\n                            <td>\n                                <select class=\"form-select\" formControlName=\"formControlName\"\n                                    (change)=\"selectTableControl($event,i,item)\">\n                                    <option value=\"\">SelectFrom</option>\n                                    <ng-container *ngFor=\"let item_f of _fieldControlGroup;let i_f =index\">\n                                        <option [value]=\"item_f.name\">{{item_f.displayName}}</option>\n                                    </ng-container>\n                                </select>\n                            </td>\n                            <td scope=\"row\">\n                                <div class=\"flex-start\">\n                                    <button class=\"btn btn-light btn-sm \" (click.stop)=\"EditSitesBtn(item,i)\">\n                                        <i class=\"fas fa-edit\"></i>\n                                    </button>\n                                    <button class=\"btn btn-light btn-sm ms-1\" (click.stop)=\"deleteTableColumns(i)\">\n                                        <i class=\"fas fa-minus\"></i>\n                                    </button>\n                                    <button class=\"btn btn-light btn-sm ms-1\" *ngIf=\"i!==0\"\n                                        (click.stop)=\"TableArrowUpOrDown('up',i)\">\n                                        <i class=\"fas fa-arrow-up\"></i>\n                                    </button>\n                                    <button class=\"btn btn-light btn-sm ms-1\" *ngIf=\"i!==TableColumns.controls.length-1\"\n                                        (click.stop)=\"TableArrowUpOrDown('down',i)\">\n                                        <i class=\"fas fa-arrow-down\"></i>\n                                    </button>\n                                </div>\n                            </td>\n                        </tr>\n                    </ng-container>\n                </tbody>\n            </table>\n        </div>\n        <button type=\"submit\" (abpInit)=\"submitclick?.nativeElement?.click()\" style=\"display: none;\"\n            #submitclick></button>\n    </div>\n</form>\n\n\n<abp-modal [(visible)]=\"tableSelectOpen\" [busy]=\"modalBusy\" (visibleChange)=\"tableSelectVisibleChange($event)\" [options]=\"{ size: CurrentSelectionTableControlName=='Matrix'?'xl':'' ,scrollable:false }\">\n    <ng-template #abpHeader>\n        <h3>{{_tableSelected?('AbpUi::Edit' | abpLocalization):('Cms::New' | abpLocalization)}}</h3>\n    </ng-template>\n    <ng-template #abpBody>\n        <ng-template #loaderRef>\n            <div class=\"text-center\"><i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i></div>\n        </ng-template>\n        <ng-container *ngIf=\"tableSelectForm; else loaderRef\">\n            <form class=\"sites-modal-form\" #myForm=\"ngForm\" [formGroup]=\"tableSelectForm\"\n                (ngSubmit)=\"createOrEditSave()\">\n                <button type=\"submit\" #tableSelectModalSubmit style=\"display: none\"></button>\n                <ng-container *ngIf=\"CurrentSelectionTableControlName&&tableSelectForm\">\n                    <df-dynamic [type]=\"CurrentSelectionTableControlName\" [entity]=\"tableSelectForm\"\n                    [selected]=\"_tableSelected\" [formGroup]=\"tableSelectForm\"></df-dynamic>\n                </ng-container>\n            </form>\n        </ng-container>\n    </ng-template>\n    <ng-template #abpFooter>\n        <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>\n        <abp-button iconClass=\"fa fa-check\"\n            (click)=\"tableSelectModalSubmit.nativeElement.click()\">{{'AbpUi::Save' | abpLocalization}}</abp-button>\n    </ng-template>\n</abp-modal>", styles: [".flex-end{display:flex;align-items:center;justify-content:flex-end}.flex-start{display:flex;align-items:center;justify-content:flex-start}\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.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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([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: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i2.FormSubmitDirective, selector: "form[ngSubmit][formGroup]", inputs: ["debounce", "notValidateOnSubmit", "markAsDirtyWhenSubmit"], outputs: ["ngSubmit"] }, { kind: "directive", type: i2.InitDirective, selector: "[abpInit]", outputs: ["abpInit"] }, { kind: "directive", type: i2.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }, { kind: "directive", type: i3.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i3.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "component", type: i6.ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "component", type: i6.ModalComponent, selector: "abp-modal", inputs: ["visible", "busy", "options", "suppressUnsavedChangesWarning"], outputs: ["visibleChange", "init", "appear", "disappear"] }, { kind: "directive", type: i6.ModalCloseDirective, selector: "[abpClose]" }, { kind: "pipe", type: i2.LocalizationPipe, name: "abpLocalization" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableConfigComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-table-config', template: "<form [formGroup]=\"_Entity\">\n    <div formGroupName=\"formConfiguration\">\n        <div class=\"mb-2\">\n            <label class=\"form-label\">{{'DigniteAbpForms::SelectListItem' | abpLocalization}}</label>\n            <table class=\"table\">\n                <thead>\n                    <tr>\n                        <th scope=\"col\">{{'Cms::TableColumnDisplayName' | abpLocalization}}</th>\n                        <th scope=\"col\">{{'Cms::TableColumnName' | abpLocalization}}</th>\n                        <th scope=\"col\">{{'Cms::TableColumnForm' | abpLocalization}}</th>\n                        <th scope=\"col\" class=\"flex-end\">\n                            <button class=\"btn btn-light btn-sm\" (click.stop)=\"addTableColumns()\">\n                                <i class=\"fas fa-plus-circle\"></i>\n                            </button>\n                        </th>\n                    </tr>\n                </thead>\n                <tbody formArrayName=\"TableColumns\">\n                    <ng-container *ngFor=\"let item of TableColumns.controls;let i=index\">\n                        <tr [formGroupName]=\"i\">\n                            <td><input type=\"text\" class=\"form-control\" formControlName=\"displayName\"  (blur)=\"disPlayNameInputBlur($event,item)\" ></td>\n                            <td><input type=\"text\" class=\"form-control\" formControlName=\"name\"></td>\n                            <td>\n                                <select class=\"form-select\" formControlName=\"formControlName\"\n                                    (change)=\"selectTableControl($event,i,item)\">\n                                    <option value=\"\">SelectFrom</option>\n                                    <ng-container *ngFor=\"let item_f of _fieldControlGroup;let i_f =index\">\n                                        <option [value]=\"item_f.name\">{{item_f.displayName}}</option>\n                                    </ng-container>\n                                </select>\n                            </td>\n                            <td scope=\"row\">\n                                <div class=\"flex-start\">\n                                    <button class=\"btn btn-light btn-sm \" (click.stop)=\"EditSitesBtn(item,i)\">\n                                        <i class=\"fas fa-edit\"></i>\n                                    </button>\n                                    <button class=\"btn btn-light btn-sm ms-1\" (click.stop)=\"deleteTableColumns(i)\">\n                                        <i class=\"fas fa-minus\"></i>\n                                    </button>\n                                    <button class=\"btn btn-light btn-sm ms-1\" *ngIf=\"i!==0\"\n                                        (click.stop)=\"TableArrowUpOrDown('up',i)\">\n                                        <i class=\"fas fa-arrow-up\"></i>\n                                    </button>\n                                    <button class=\"btn btn-light btn-sm ms-1\" *ngIf=\"i!==TableColumns.controls.length-1\"\n                                        (click.stop)=\"TableArrowUpOrDown('down',i)\">\n                                        <i class=\"fas fa-arrow-down\"></i>\n                                    </button>\n                                </div>\n                            </td>\n                        </tr>\n                    </ng-container>\n                </tbody>\n            </table>\n        </div>\n        <button type=\"submit\" (abpInit)=\"submitclick?.nativeElement?.click()\" style=\"display: none;\"\n            #submitclick></button>\n    </div>\n</form>\n\n\n<abp-modal [(visible)]=\"tableSelectOpen\" [busy]=\"modalBusy\" (visibleChange)=\"tableSelectVisibleChange($event)\" [options]=\"{ size: CurrentSelectionTableControlName=='Matrix'?'xl':'' ,scrollable:false }\">\n    <ng-template #abpHeader>\n        <h3>{{_tableSelected?('AbpUi::Edit' | abpLocalization):('Cms::New' | abpLocalization)}}</h3>\n    </ng-template>\n    <ng-template #abpBody>\n        <ng-template #loaderRef>\n            <div class=\"text-center\"><i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i></div>\n        </ng-template>\n        <ng-container *ngIf=\"tableSelectForm; else loaderRef\">\n            <form class=\"sites-modal-form\" #myForm=\"ngForm\" [formGroup]=\"tableSelectForm\"\n                (ngSubmit)=\"createOrEditSave()\">\n                <button type=\"submit\" #tableSelectModalSubmit style=\"display: none\"></button>\n                <ng-container *ngIf=\"CurrentSelectionTableControlName&&tableSelectForm\">\n                    <df-dynamic [type]=\"CurrentSelectionTableControlName\" [entity]=\"tableSelectForm\"\n                    [selected]=\"_tableSelected\" [formGroup]=\"tableSelectForm\"></df-dynamic>\n                </ng-container>\n            </form>\n        </ng-container>\n    </ng-template>\n    <ng-template #abpFooter>\n        <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>\n        <abp-button iconClass=\"fa fa-check\"\n            (click)=\"tableSelectModalSubmit.nativeElement.click()\">{{'AbpUi::Save' | abpLocalization}}</abp-button>\n    </ng-template>\n</abp-modal>", styles: [".flex-end{display:flex;align-items:center;justify-content:flex-end}.flex-start{display:flex;align-items:center;justify-content:flex-start}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: DfApiService }]; }, propDecorators: { Entity: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], submitclick: [{
+                type: ViewChild,
+                args: ['submitclick', { static: true }]
+            }], tableSelectModalSubmit: [{
+                type: ViewChild,
+                args: ['tableSelectModalSubmit', { static: false }]
+            }] } });
+
+class TableControlComponent {
+    constructor() {
+    }
+    fb = inject(FormBuilder);
+    /**表单实体 */
+    _entity;
+    set entity(v) {
+        this._entity = v;
+        this.dataLoaded();
+    }
+    /**字段配置列表 */
+    _fields = '';
+    set fields(v) {
+        this._fields = v;
+        this.dataLoaded();
+    }
+    /**父级字段名称，用于为表单设置控件赋值 */
+    _parentFiledName;
+    set parentFiledName(v) {
+        this._parentFiledName = v;
+        this.dataLoaded();
+    }
+    /**父级字段名称，用于为表单设置控件赋值 */
+    _selected;
+    set selected(v) {
+        this._selected = v;
+        if (v) {
+            this.dataLoaded();
+        }
+    }
+    submitclick;
+    /** 获取父级字段代表的表单组*/
+    extraProperties;
+    /**数据加载完成 */
+    async dataLoaded() {
+        if (this._fields && this._entity && this._parentFiledName) {
+            this.extraProperties = this._entity.get(this._parentFiledName);
+            await this.AfterInit();
+            this.submitclick.nativeElement.click();
+        }
+    }
+    formConfiguration;
+    /**获取表格字段代表的控件 */
+    fieldNameControl;
+    AfterInit() {
+        return new Promise((resolve, rejects) => {
+            let ValidatorsArray = [];
+            if (this._fields.required) {
+                ValidatorsArray.push(Validators.required);
+            }
+            let formConfiguration = this._fields.field.formConfiguration;
+            this.formConfiguration = formConfiguration;
+            let newArrayGroup = this.fb.array([]);
+            this.extraProperties.setControl(this._fields.field.name, newArrayGroup);
+            this.fieldNameControl = this.extraProperties.get(this._fields.field.name);
+            if (this._selected) {
+                this._selected.forEach(el => {
+                    this.addTableControlItem();
+                });
+                this.fieldNameControl.patchValue(this._selected);
+            }
+            else {
+                this.addTableControlItem();
+            }
+            resolve(true);
+        });
+    }
+    /**增加表格项 */
+    addTableControlItem() {
+        this.fieldNameControl.push(this.fb.group({
+            'extraProperties': this.fb.group({})
+        }));
+    }
+    /**删除表格项 */
+    minusTableControlItem(index) {
+        this.fieldNameControl.removeAt(index);
+    }
+    /**调整表格位置 */
+    TableArrowUpOrDown(type, index) {
+        let controlAt = this.fieldNameControl.at(index);
+        this.fieldNameControl.removeAt(index);
+        let lastindex = type == 'up' ? index - 1 : index + 1;
+        this.fieldNameControl.insert(lastindex, controlAt);
+        this._selected = this.fieldNameControl.value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableControlComponent, selector: "df-table-control", 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=\"extraProperties\">\n        <div class=\"mb-2\">\n            <label class=\"form-label\" *ngIf=\"_fields.displayName\">{{ _fields.displayName }}</label>\n            <table class=\"table\">\n                <thead>\n                    <tr>\n                        <ng-container *ngFor=\"let item of formConfiguration.TableColumns\">\n                            <th scope=\"col\">{{ item.displayName }}</th>\n                        </ng-container>\n\n                        <th scope=\"col\" class=\"flex-end\">\n                            <button class=\"btn btn-light btn-sm\" (click.stop)=\"addTableControlItem()\">\n                                <i class=\"fas fa-plus-circle\"></i>\n                            </button>\n                        </th>\n                    </tr>\n                </thead>\n                <tbody [formArrayName]=\"_fields.field.name\">\n                    <ng-container *ngFor=\"let item of fieldNameControl.controls; let i = index\">\n                        <tr>\n                            <ng-container *ngFor=\"let el of formConfiguration.TableColumns\">\n                                <td>\n                                    <ng-container *ngIf=\"item&&el\">\n                                        <df-dynamic [entity]=\"item\" [fields]=\"{ field: el }\"\n                                            [selected]=\"_selected[i]?.extraProperties[''+el.name+'']\"\n                                            [parentFiledName]=\"'extraProperties'\"></df-dynamic>\n                                    </ng-container>\n                                </td>\n                            </ng-container>\n                            <td scope=\"row\" class=\"\">\n                                <div class=\"flex-end mb-2\">\n                                    <button class=\"btn btn-light btn-sm ms-1\" (click.stop)=\"minusTableControlItem(i)\">\n                                        <i class=\"fas fa-minus\"></i>\n                                    </button>\n                                    <button class=\"btn btn-light btn-sm ms-1\" (click.stop)=\"TableArrowUpOrDown('up',i)\"\n                                        *ngIf=\"i!==0\">\n                                        <i class=\"fas fa-arrow-up\"></i>\n                                    </button>\n                                    <button class=\"btn btn-light btn-sm ms-1\"\n                                        (click.stop)=\"TableArrowUpOrDown('down',i)\"\n                                        *ngIf=\"i!==fieldNameControl.controls.length-1\">\n                                        <i class=\"fas fa-arrow-down\"></i>\n                                    </button>\n                                </div>\n                            </td>\n                        </tr>\n                    </ng-container>\n                </tbody>\n            </table>\n            <div class=\"form-text\" *ngIf=\"_fields.field.description\">{{_fields.field.description}}</div>\n        </div>\n    </div>\n    <button type=\"submit\" style=\"display: none\" #submitclick></button>\n</form>", styles: [".flex-end{display:flex;align-items:center;justify-content:flex-end}.flex-start{display:flex;align-items:center;justify-content:flex-start}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i2.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }, { kind: "directive", type: i3.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-table-control', template: "<form [formGroup]=\"_entity\">\n    <div formGroupName=\"extraProperties\">\n        <div class=\"mb-2\">\n            <label class=\"form-label\" *ngIf=\"_fields.displayName\">{{ _fields.displayName }}</label>\n            <table class=\"table\">\n                <thead>\n                    <tr>\n                        <ng-container *ngFor=\"let item of formConfiguration.TableColumns\">\n                            <th scope=\"col\">{{ item.displayName }}</th>\n                        </ng-container>\n\n                        <th scope=\"col\" class=\"flex-end\">\n                            <button class=\"btn btn-light btn-sm\" (click.stop)=\"addTableControlItem()\">\n                                <i class=\"fas fa-plus-circle\"></i>\n                            </button>\n                        </th>\n                    </tr>\n                </thead>\n                <tbody [formArrayName]=\"_fields.field.name\">\n                    <ng-container *ngFor=\"let item of fieldNameControl.controls; let i = index\">\n                        <tr>\n                            <ng-container *ngFor=\"let el of formConfiguration.TableColumns\">\n                                <td>\n                                    <ng-container *ngIf=\"item&&el\">\n                                        <df-dynamic [entity]=\"item\" [fields]=\"{ field: el }\"\n                                            [selected]=\"_selected[i]?.extraProperties[''+el.name+'']\"\n                                            [parentFiledName]=\"'extraProperties'\"></df-dynamic>\n                                    </ng-container>\n                                </td>\n                            </ng-container>\n                            <td scope=\"row\" class=\"\">\n                                <div class=\"flex-end mb-2\">\n                                    <button class=\"btn btn-light btn-sm ms-1\" (click.stop)=\"minusTableControlItem(i)\">\n                                        <i class=\"fas fa-minus\"></i>\n                                    </button>\n                                    <button class=\"btn btn-light btn-sm ms-1\" (click.stop)=\"TableArrowUpOrDown('up',i)\"\n                                        *ngIf=\"i!==0\">\n                                        <i class=\"fas fa-arrow-up\"></i>\n                                    </button>\n                                    <button class=\"btn btn-light btn-sm ms-1\"\n                                        (click.stop)=\"TableArrowUpOrDown('down',i)\"\n                                        *ngIf=\"i!==fieldNameControl.controls.length-1\">\n                                        <i class=\"fas fa-arrow-down\"></i>\n                                    </button>\n                                </div>\n                            </td>\n                        </tr>\n                    </ng-container>\n                </tbody>\n            </table>\n            <div class=\"form-text\" *ngIf=\"_fields.field.description\">{{_fields.field.description}}</div>\n        </div>\n    </div>\n    <button type=\"submit\" style=\"display: none\" #submitclick></button>\n</form>", styles: [".flex-end{display:flex;align-items:center;justify-content:flex-end}.flex-start{display:flex;align-items:center;justify-content:flex-start}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { entity: [{
+                type: Input
+            }], fields: [{
+                type: Input
+            }], parentFiledName: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], submitclick: [{
+                type: ViewChild,
+                args: ['submitclick', { static: true }]
+            }] } });
+
 /**
  * 表单控件分组-包含配置，控件，显示的数组
  */
@@ -1470,6 +2136,20 @@ const FieldControlGroup = [
         fieldComponent: DateEditControlComponent,
         // fieldViewComponent:TextBoxViewComponent,
     },
+    {
+        displayName: '表格',
+        name: 'Table',
+        fieldConfigComponent: TableConfigComponent,
+        fieldComponent: TableControlComponent,
+        // fieldViewComponent:TextBoxViewComponent,
+    },
+    {
+        displayName: '矩阵',
+        name: 'Matrix',
+        fieldConfigComponent: MatrixConfigComponent,
+        fieldComponent: MatrixControlComponent,
+        // fieldViewComponent:TextBoxViewComponent,
+    },
     {
         displayName: '文件管理',
         name: 'FileExplorer',
@@ -1485,15 +2165,13 @@ const FieldControlGroup = [
     },
 ];
 function getExcludeAssignControl(typeName) {
-    return FieldControlGroup.filter(el => el.name !== typeName);
+    // return FieldControlGroup.filter(el => el.name !== typeName)
+    return FieldControlGroup;
 }
-function AddFieldControlGroup(array) {
+function AddFieldControlGroup(array = []) {
     FieldControlGroup.push(...array);
 }
 
-// export * from './matrix'
-// export * from './table'
-
 class DynamicComponent {
     /**选择的表单信息 */
     _selected;
@@ -1589,11 +2267,11 @@ class DynamicComponent {
         instance.culture = this._culture;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicComponent, selector: "df-dynamic", inputs: { selected: "selected", type: "type", entity: "entity", culture: "culture", parentFiledName: "parentFiledName", fields: "fields" }, viewQueries: [{ propertyName: "FormControlRef", first: true, predicate: ["FormControlRef"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "FormComponentsRef", first: true, predicate: ["FormComponentsRef"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<template #FormControlRef></template>\n<template #FormComponentsRef></template>", styles: [""] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicComponent, isStandalone: true, selector: "df-dynamic", inputs: { selected: "selected", type: "type", entity: "entity", culture: "culture", parentFiledName: "parentFiledName", fields: "fields" }, viewQueries: [{ propertyName: "FormControlRef", first: true, predicate: ["FormControlRef"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "FormComponentsRef", first: true, predicate: ["FormComponentsRef"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<template #FormControlRef></template>\n<template #FormComponentsRef></template>", styles: [""] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'df-dynamic', template: "<template #FormControlRef></template>\n<template #FormComponentsRef></template>" }]
+            args: [{ selector: 'df-dynamic', standalone: true, template: "<template #FormControlRef></template>\n<template #FormComponentsRef></template>" }]
         }], propDecorators: { selected: [{
                 type: Input
             }], type: [{
@@ -1636,7 +2314,11 @@ class DynamicFormModule {
             CkEditorConfigComponent,
             SelectConfigComponent,
             SelectControlComponent,
-            DynamicComponent], imports: [FormsModule,
+            // DynamicComponent,
+            TableConfigComponent,
+            TableControlComponent,
+            MatrixConfigComponent,
+            MatrixControlComponent], imports: [FormsModule,
             CoreModule,
             ThemeSharedModule,
             ReactiveFormsModule,
@@ -1655,7 +2337,11 @@ class DynamicFormModule {
             CkEditorConfigComponent,
             SelectConfigComponent,
             SelectControlComponent,
-            DynamicComponent] });
+            // DynamicComponent,
+            TableConfigComponent,
+            TableControlComponent,
+            MatrixConfigComponent,
+            MatrixControlComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicFormModule, imports: [FormsModule,
             CoreModule,
             ThemeSharedModule,
@@ -1681,7 +2367,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         CkEditorConfigComponent,
                         SelectConfigComponent,
                         SelectControlComponent,
-                        DynamicComponent,
+                        // DynamicComponent,
+                        TableConfigComponent,
+                        TableControlComponent,
+                        MatrixConfigComponent,
+                        MatrixControlComponent,
                     ],
                     imports: [
                         FormsModule,
@@ -1706,7 +2396,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         CkEditorConfigComponent,
                         SelectConfigComponent,
                         SelectControlComponent,
-                        DynamicComponent
+                        // DynamicComponent,
+                        TableConfigComponent,
+                        TableControlComponent,
+                        MatrixConfigComponent,
+                        MatrixControlComponent,
                     ],
                 }]
         }] });
@@ -1893,5 +2587,5 @@ var index = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { AddFieldControlGroup, CkEditorConfigComponent, CkEditorControlComponent, DateEditConfigComponent, DateEditControlComponent, DateEditInterfaces, DfApiService, index$b as Dignite, DynamicComponent, DynamicFormModule, FieldControlGroup, FileExplorerConfigComponent, FileExplorerControlComponent, index$3 as Microsoft, NumbericEditConfigComponent, NumbericEditControlComponent, SelectConfigComponent, SelectControlComponent, SwitchConfigComponent, SwitchControlComponent, TextEditComponent, TextEditConfig, TextEditConfigComponent, TextEditMode, index as Volo, getExcludeAssignControl, maxDecimalPlacesValidator };
+export { AddFieldControlGroup, CkEditorConfigComponent, CkEditorControlComponent, DateEditConfigComponent, DateEditControlComponent, DateEditInterfaces, DfApiService, index$b as Dignite, DynamicComponent, DynamicFormModule, FieldControlGroup, FileExplorerConfigComponent, FileExplorerControlComponent, MatrixConfig, MatrixConfigComponent, MatrixControlComponent, MatrixItemConfig, index$3 as Microsoft, NumbericEditConfigComponent, NumbericEditControlComponent, SelectConfigComponent, SelectControlComponent, SwitchConfigComponent, SwitchControlComponent, TableConfig, TableConfigComponent, TableControlComponent, TableFormControl, TextEditComponent, TextEditConfig, TextEditConfigComponent, TextEditMode, index as Volo, getExcludeAssignControl, matrixFieldInputBase, maxDecimalPlacesValidator };
 //# sourceMappingURL=dignite-ng-expand.dynamic-form.mjs.map