ngx-rs-ant 0.2.4 → 0.4.0

package/fesm2015/ngx-rs-ant.mjs

@@ -1,188 +1,675 @@
 import * as i0 from '@angular/core';
-import { Component, Input, ViewChild, HostListener, Injectable, NgModule } from '@angular/core';
+import { Component, Input, HostBinding, EventEmitter, Output, HostListener, ViewContainerRef, ViewChild, Directive, ViewChildren, NgModule, Injectable } from '@angular/core';
+import { PluginFactory } from 'coast-plugin-register';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import { Subject, lastValueFrom } from 'rxjs';
+import * as i2 from 'ng-devui/input-number';
+import * as i3 from '@angular/forms';
+import { UntypedFormControl, FormsModule, UntypedFormGroup, ReactiveFormsModule } from '@angular/forms';
+import * as i1$1 from 'ng-devui/dragdrop';
+import { DevUIModule, FormLayout } from 'ng-devui';
 import CustomStore from 'devextreme/data/custom_store';
-import { lastValueFrom } from 'rxjs';
-import * as i1$1 from 'devextreme-angular/core';
-import * as i2 from 'devextreme-angular/ui/nested';
-import * as i3 from 'devextreme-angular/ui/data-grid';
-import { DevExtremeModule } from 'devextreme-angular';
+import * as i1$2 from 'devextreme-angular';
+import { DxDataGridComponent, DxDataGridModule } from 'devextreme-angular';
+import * as i2$1 from 'devextreme-angular/ui/nested';
+import * as i3$1 from 'devextreme-angular/core';
+import * as i2$2 from 'ng-devui/form';
 
-class ModalComponent {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this.size = 'default';
-        this._width = 480;
-        this.movable = false;
-        this.topStart = 0;
-        this.leftStart = 0;
-    }
-    ngOnInit() {
-        if (this.size === 'full') {
-            this.modalElementRef.nativeElement.style.top = '0px';
-            this.modalElementRef.nativeElement.style.right = '0px';
-            this.modalElementRef.nativeElement.style.bottom = '0px';
-            this.modalElementRef.nativeElement.style.left = '0px';
-            this.modalElementRef.nativeElement.style.margin = '2px';
-            this.modalElementRef.nativeElement.style.boxShadow = 'none';
+class DividerLineComponent {
+    get _style() {
+        if (!this.targetElement) {
+            return {};
         }
-        else {
-            if (this.size === 'large') {
-                this._width = 960;
-            }
-            this.modalElementRef.nativeElement.style.width = this._width + 'px';
-            this.modalElementRef.nativeElement.style.top = '40px';
-            this.modalElementRef.nativeElement.style.left =
-                (this.elementRef.nativeElement.parentElement.offsetWidth - this.modalElementRef.nativeElement.offsetWidth) / 2 + 'px';
-            this.moveHandleEl = this.elementRef.nativeElement.querySelector('.modal-header');
-            this.moveHandleEl.style.cursor = 'move';
+        const elementRect = this.targetElement.getBoundingClientRect();
+        if (this.direction === 'row') {
+            return {
+                height: elementRect.width + 'px'
+            };
         }
-    }
-    show() {
-        // 若存在多层模态框，仅保留最上层遮罩颜色，下层遮罩设置为透明
-        const parentElement = this.elementRef.nativeElement.parentElement;
-        const nodeName = this.elementRef.nativeElement.nodeName;
-        const modals = parentElement.querySelectorAll(nodeName);
-        for (let i = 0; i < modals.length; i++) {
-            if (i === modals.length - 1) {
-                modals[i].querySelector('.modal-backdrop').style.backgroundColor = 'rgba(37, 43, 58, 0.05)';
-            }
-            else {
-                modals[i].querySelector('.modal-backdrop').style.backgroundColor = 'rgba(37, 43, 58, 0)';
-            }
+        if (this.direction === 'column') {
+            return {
+                height: elementRect.height + 'px'
+            };
         }
+        return {};
     }
-    hide() {
-        // 在service中重写
+}
+DividerLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DividerLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DividerLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DividerLineComponent, selector: "rs-divider-line", inputs: { direction: "direction", targetElement: "targetElement" }, host: { properties: { "style": "this._style" } }, ngImport: i0, template: "", styles: ["coast-divider:hover>:host{position:absolute;top:-5px;border:1px dashed var(--devui-brand, #5e7ce0)}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DividerLineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rs-divider-line', template: "", styles: ["coast-divider:hover>:host{position:absolute;top:-5px;border:1px dashed var(--devui-brand, #5e7ce0)}\n"] }]
+        }], propDecorators: { direction: [{
+                type: Input
+            }], targetElement: [{
+                type: Input
+            }], _style: [{
+                type: HostBinding,
+                args: ['style']
+            }] } });
+
+class DividerComponent {
+    constructor() {
+        this.dividerClick = new EventEmitter();
     }
-    ngOnDestroy() {
-        // 若存在多层模态框，下一层遮罩设置为不透明
-        const parentElement = this.elementRef.nativeElement.parentElement;
-        const nodeName = this.elementRef.nativeElement.nodeName;
-        const nextModal = parentElement.querySelector(nodeName + ':nth-last-child(2)');
-        if (nextModal) {
-            nextModal.querySelector('.modal-backdrop').style.backgroundColor = 'rgba(37, 43, 58, 0.05)';
+    get _style() {
+        if (!this.targetElement) {
+            return {};
+        }
+        const elementRect = this.targetElement.getBoundingClientRect();
+        if (this.direction === 'row') {
+            return {
+                top: elementRect.height / 2 - 12 + 'px',
+                left: '4px',
+                transform: 'rotate(270deg)'
+            };
+        }
+        if (this.direction === 'column') {
+            return {
+                top: '4px',
+                left: elementRect.width / 2 - 12 + 'px'
+            };
         }
+        return {};
     }
-    resolveModalBackdropPosition() {
+    onClick() {
+        this.dividerClick.emit();
+    }
+}
+DividerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DividerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DividerComponent, selector: "rs-divider", inputs: { direction: "direction", targetElement: "targetElement" }, outputs: { dividerClick: "dividerClick" }, host: { listeners: { "click": "onClick()" }, properties: { "style": "this._style" } }, ngImport: i0, template: "<div class=\"divider-image\"></div>\n<rs-divider-line [targetElement]=\"targetElement\" [direction]=\"direction\"></rs-divider-line>\n", styles: [":host{position:absolute;display:flex;justify-content:center;align-items:center;width:24px;height:24px;background-color:#fff;border-radius:12px;cursor:pointer;pointer-events:all}:host .divider-image{width:12px;height:12px;background-size:contain;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAACO0lEQVRIDa2Uy6tNURzHN7cwMUAmHncot0QeV5QiBgZKmWEgzDDx+ANu5soMcUkxIY+iEFIKEZnIyMC9GZAMrke6hXt9Pvus1VnntPbZ53B/9dnrt36P7zpr7bVPUTRtD+5j+Arv4QwshDpbTIG1o2CvGmq12CVmk/ADnsGnMHccgCpbRiLWjuA/BTXUUrM0VzNwD+aVkcbjIMNveJnEUrePyWuYgP1JYi6+WmqWO3FLrpqKMy3tHE8LtzemLc99ITfcEm1MXERNtYsxcGs520nQBV61JWcyHw253W25OFVzbDqPj1D1MheF6tWM24LvcAD6w7yqdwF5tYvT4K90y6m5zQ/wE37BC9Bmw2f4Ah6DNdamFo/vlEHP3pvwB87CLjgGNrrwEbgY/K2MQ8E/zHg0+NbaY68aaqmpdmlLeT4HBSPf8RXQloA3ylvzDTx/34OmsLWxz9Hdqtlivo/l4NXy1syB1C4ziSK547THXjXU6tk20uECnn1fz91dNJynJu5gUxf1PZV4nr6DdzABj2BK7Rpq/votcDX4GxinxNagovjDoOZLdBcPwvy/h/souMDaROlGiK1PYv/kbg5C19u6V4b43bZ4z1M/GF/uQKbzFjF3NpjJdRXaEQQuVFQr7AK3K/Idw36Jb2Ec+jtU3iHnIqs61GRTe4naeDKbbQbXhbqbzVC9N4OSEfAPbD7UmbfMa7uirjDmD+H464/HQM3oB2f9lVxd7l9vFoVv4ESuIRN7QkzxaZlc8RcdnI7tMHZBlAAAAABJRU5ErkJggg==)}:host:hover{background-color:var(--devui-brand, #5e7ce0)}\n"], dependencies: [{ kind: "component", type: DividerLineComponent, selector: "rs-divider-line", inputs: ["direction", "targetElement"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DividerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rs-divider', template: "<div class=\"divider-image\"></div>\n<rs-divider-line [targetElement]=\"targetElement\" [direction]=\"direction\"></rs-divider-line>\n", styles: [":host{position:absolute;display:flex;justify-content:center;align-items:center;width:24px;height:24px;background-color:#fff;border-radius:12px;cursor:pointer;pointer-events:all}:host .divider-image{width:12px;height:12px;background-size:contain;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAACO0lEQVRIDa2Uy6tNURzHN7cwMUAmHncot0QeV5QiBgZKmWEgzDDx+ANu5soMcUkxIY+iEFIKEZnIyMC9GZAMrke6hXt9Pvus1VnntPbZ53B/9dnrt36P7zpr7bVPUTRtD+5j+Arv4QwshDpbTIG1o2CvGmq12CVmk/ADnsGnMHccgCpbRiLWjuA/BTXUUrM0VzNwD+aVkcbjIMNveJnEUrePyWuYgP1JYi6+WmqWO3FLrpqKMy3tHE8LtzemLc99ITfcEm1MXERNtYsxcGs520nQBV61JWcyHw253W25OFVzbDqPj1D1MheF6tWM24LvcAD6w7yqdwF5tYvT4K90y6m5zQ/wE37BC9Bmw2f4Ah6DNdamFo/vlEHP3pvwB87CLjgGNrrwEbgY/K2MQ8E/zHg0+NbaY68aaqmpdmlLeT4HBSPf8RXQloA3ylvzDTx/34OmsLWxz9Hdqtlivo/l4NXy1syB1C4ziSK547THXjXU6tk20uECnn1fz91dNJynJu5gUxf1PZV4nr6DdzABj2BK7Rpq/votcDX4GxinxNagovjDoOZLdBcPwvy/h/souMDaROlGiK1PYv/kbg5C19u6V4b43bZ4z1M/GF/uQKbzFjF3NpjJdRXaEQQuVFQr7AK3K/Idw36Jb2Ec+jtU3iHnIqs61GRTe4naeDKbbQbXhbqbzVC9N4OSEfAPbD7UmbfMa7uirjDmD+H464/HQM3oB2f9lVxd7l9vFoVv4ESuIRN7QkzxaZlc8RcdnI7tMHZBlAAAAABJRU5ErkJggg==)}:host:hover{background-color:var(--devui-brand, #5e7ce0)}\n"] }]
+        }], propDecorators: { direction: [{
+                type: Input
+            }], targetElement: [{
+                type: Input
+            }], dividerClick: [{
+                type: Output
+            }], _style: [{
+                type: HostBinding,
+                args: ['style']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class PluginActiveComponent {
+    constructor() {
+        this.showClose = true;
+        this.showDivider = false;
+        this.itemRemove = new EventEmitter();
+        this.targetRect = {
+            width: 0,
+            height: 0
+        };
+        this._targetRect = {};
+        this.width = 0;
+        this._width = 0;
+        this.height = 0;
+        this._height = 0;
+    }
+    get _style() {
+        if (!this.targetElement) {
+            return {};
+        }
+        const elementRect = this.targetElement.getBoundingClientRect();
+        this._targetRect.width = elementRect.width;
+        this._targetRect.height = elementRect.height;
         return {
-            "width": this.elementRef.nativeElement.parentElement.offsetWidth + 'px',
-            "height": this.elementRef.nativeElement.parentElement.offsetHeight + 'px',
-            "top": this.elementRef.nativeElement.parentElement.offsetTop + 'px',
-            "left": this.elementRef.nativeElement.parentElement.offsetLeft + 'px',
+            width: elementRect.width + 'px',
+            height: elementRect.height + 'px',
+            top: this.targetElement.offsetTop + 'px',
+            left: this.targetElement.offsetLeft + 'px'
         };
     }
-    onMousedown($event) {
-        if ($event.button === 2 || !this.checkHandleTarget($event.target, this.moveHandleEl)) {
-            return;
+    ngOnInit() {
+        setTimeout(() => {
+            this.targetRect = this._targetRect;
+        });
+    }
+    onItemCloseIconClick($event) {
+        this.itemRemove.emit();
+    }
+    splitItem(direction) {
+        // 在布局型组件中实例化时重写
+    }
+}
+PluginActiveComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PluginActiveComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PluginActiveComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: PluginActiveComponent, selector: "rs-plugin-active", host: { properties: { "style": "this._style" } }, ngImport: i0, template: "<div class=\"active-bar\">\r\n  <span>{{name}}</span>\r\n  <i *ngIf=\"showClose\" class=\"icon-close\" (click)=\"onItemCloseIconClick($event)\"></i>\r\n</div>\r\n<rs-divider *ngIf=\"showDivider\" [targetElement]=\"targetElement\" direction=\"row\"\r\n               (dividerClick)=\"splitItem('column')\"></rs-divider>\r\n<rs-divider *ngIf=\"showDivider\" [targetElement]=\"targetElement\" direction=\"column\"\r\n               (dividerClick)=\"splitItem('row')\"></rs-divider>\r\n", styles: [":host{display:none;position:absolute;border:1px solid var(--devui-brand, #5e7ce0);pointer-events:none}:host .active-bar{padding:2px 4px;color:#fff;background-color:var(--devui-brand, #5e7ce0);position:absolute;top:-23px;right:-1px;display:flex;align-items:center;pointer-events:all;white-space:nowrap}:host .active-bar span{flex:auto}:host .active-bar i{flex:none;margin-left:8px;cursor:pointer}:host .active-bar i:hover{color:var(--devui-danger, #f66f6a)}.plugin-active>:host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DividerComponent, selector: "rs-divider", inputs: ["direction", "targetElement"], outputs: ["dividerClick"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PluginActiveComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rs-plugin-active', template: "<div class=\"active-bar\">\r\n  <span>{{name}}</span>\r\n  <i *ngIf=\"showClose\" class=\"icon-close\" (click)=\"onItemCloseIconClick($event)\"></i>\r\n</div>\r\n<rs-divider *ngIf=\"showDivider\" [targetElement]=\"targetElement\" direction=\"row\"\r\n               (dividerClick)=\"splitItem('column')\"></rs-divider>\r\n<rs-divider *ngIf=\"showDivider\" [targetElement]=\"targetElement\" direction=\"column\"\r\n               (dividerClick)=\"splitItem('row')\"></rs-divider>\r\n", styles: [":host{display:none;position:absolute;border:1px solid var(--devui-brand, #5e7ce0);pointer-events:none}:host .active-bar{padding:2px 4px;color:#fff;background-color:var(--devui-brand, #5e7ce0);position:absolute;top:-23px;right:-1px;display:flex;align-items:center;pointer-events:all;white-space:nowrap}:host .active-bar span{flex:auto}:host .active-bar i{flex:none;margin-left:8px;cursor:pointer}:host .active-bar i:hover{color:var(--devui-danger, #f66f6a)}.plugin-active>:host{display:block}\n"] }]
+        }], propDecorators: { _style: [{
+                type: HostBinding,
+                args: ['style']
+            }] } });
+
+class PluginHoverComponent {
+    get _style() {
+        if (!this.targetElement) {
+            return {};
         }
-        this.movable = true;
-        this.topStart = $event.clientY - this.modalElementRef.nativeElement.style.top.replace('px', '');
-        this.leftStart = $event.clientX - this.modalElementRef.nativeElement.style.left.replace('px', '');
+        const elementRect = this.targetElement.getBoundingClientRect();
+        return {
+            width: elementRect.width + 'px',
+            height: elementRect.height + 'px',
+            top: this.targetElement.offsetTop + 'px',
+            left: this.targetElement.offsetLeft + 'px'
+        };
     }
-    checkHandleTarget(target, element) {
-        if (!element) {
-            return false;
+}
+PluginHoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PluginHoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PluginHoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: PluginHoverComponent, selector: "rs-plugin-hover", host: { properties: { "style": "this._style" } }, ngImport: i0, template: "<div class=\"hover-title\">{{name}}</div>\n", styles: [":host{display:none;position:absolute;border:1px dashed var(--devui-brand, #5e7ce0);pointer-events:none}:host .hover-title{color:var(--devui-brand, #5e7ce0);position:absolute;top:-18px;left:0}.plugin-active>:host{display:none!important}.plugin-hover>:host{display:block}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PluginHoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rs-plugin-hover', template: "<div class=\"hover-title\">{{name}}</div>\n", styles: [":host{display:none;position:absolute;border:1px dashed var(--devui-brand, #5e7ce0);pointer-events:none}:host .hover-title{color:var(--devui-brand, #5e7ce0);position:absolute;top:-18px;left:0}.plugin-active>:host{display:none!important}.plugin-hover>:host{display:block}\n"] }]
+        }], propDecorators: { _style: [{
+                type: HostBinding,
+                args: ['style']
+            }] } });
+
+class StyleBlankComponent {
+}
+StyleBlankComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: StyleBlankComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+StyleBlankComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: StyleBlankComponent, selector: "rs-style-blank", ngImport: i0, template: "<div>\n  <span>\u8BF7\u5728\u5DE6\u4FA7\u753B\u5E03\u9009\u4E2D\u8282\u70B9</span>\n</div>\n", styles: [":host{height:80px;margin:8px;display:flex;justify-content:center}:host div{flex:auto;display:flex;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: StyleBlankComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rs-style-blank', template: "<div>\n  <span>\u8BF7\u5728\u5DE6\u4FA7\u753B\u5E03\u9009\u4E2D\u8282\u70B9</span>\n</div>\n", styles: [":host{height:80px;margin:8px;display:flex;justify-content:center}:host div{flex:auto;display:flex;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}\n"] }]
+        }] });
+
+class StyleComponent {
+    ngOnInit() {
+        this.style.width = this.style.width ? this.style.width : 'auto';
+        this.style.height = this.style.height ? this.style.height : 'auto';
+        if (this.style.width !== 'auto') {
+            this.width = this.style.width.substring(0, this.style.width.length - 2);
         }
-        if (target === element) {
-            return true;
+        if (this.style.height !== 'auto') {
+            this.height = this.style.height.substring(0, this.style.height.length - 2);
         }
-        for (let child in element.children) {
-            if (Object.prototype.hasOwnProperty.call(element.children, child)) {
-                if (this.checkHandleTarget(target, element.children[child])) {
-                    return true;
-                }
+    }
+    select(name, value) {
+        const that = this;
+        if (value === 'auto') {
+            this.style[name] = 'auto';
+        }
+        else {
+            if (!that[name]) {
+                that[name] = value;
             }
+            this.style[name] = that[name] + 'px';
         }
-        return false;
     }
-    onMouseup() {
-        this.movable = false;
+    typing(name, value) {
+        if (value) {
+            this.style[name] = value + 'px';
+        }
+        else {
+            this.style[name] = 'auto';
+        }
     }
-    onMousemove($event) {
-        if (!this.movable) {
+}
+StyleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: StyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+StyleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: StyleComponent, selector: "rs-style", ngImport: i0, template: "<div class=\"config-item\">\n  <div class=\"item-title\">\u5BBD\u5EA6\u7C7B\u578B</div>\n  <div class=\"item-setting\">\n    <div class=\"card-style-radio\">\n      <div class=\"radio-value\" [ngClass]=\"!style.width || style.width === 'auto' ? 'active' : ''\"\n           (click)=\"select('width','auto')\">\n        <span>\u81EA\u9002\u5E94</span>\n      </div>\n      <div class=\"radio-value\" [ngClass]=\"style.width && style.width !== 'auto' ? 'active' : ''\"\n           (click)=\"select('width',240)\">\n        <span>\u56FA\u5B9A\u503C</span>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"config-item\">\n  <div class=\"item-title\">\u56FA\u5B9A\u5BBD\u5EA6</div>\n  <div class=\"item-setting\">\n    <d-input-number [allowEmpty]=\"true\" [(ngModel)]=\"width\"\n                    (whileValueChanging)=\"typing('width', $event)\"></d-input-number>\n  </div>\n</div>\n<div class=\"config-item\">\n  <div class=\"item-title\">\u9AD8\u5EA6\u7C7B\u578B</div>\n  <div class=\"item-setting\">\n    <div class=\"card-style-radio\">\n      <div class=\"radio-value\" [ngClass]=\"!style.height || style.height === 'auto' ? 'active' : ''\"\n           (click)=\"select('height','auto')\">\n        <span>\u81EA\u9002\u5E94</span>\n      </div>\n      <div class=\"radio-value\" [ngClass]=\"style.height && style.height !== 'auto' ? 'active' : ''\"\n           (click)=\"select('height',800)\">\n        <span>\u56FA\u5B9A\u503C</span>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"config-item\">\n  <div class=\"item-title\">\u56FA\u5B9A\u9AD8\u5EA6</div>\n  <div class=\"item-setting\">\n    <d-input-number [allowEmpty]=\"true\" [(ngModel)]=\"height\"\n                    (whileValueChanging)=\"typing('height', $event)\"></d-input-number>\n  </div>\n</div>\n", styles: [":host .config-item{display:flex;margin:8px;align-items:center}:host .config-item .item-title{flex:0 0 80px}:host .config-item .item-setting{flex:auto;display:flex}:host .config-item .item-setting .card-style-radio{flex:auto;display:flex;justify-content:stretch}:host .config-item .item-setting .card-style-radio .radio-value{flex:auto;border:1px solid var(--devui-dividing-line, #f2f2f3);text-align:center;padding:4px;margin-left:-1px;cursor:pointer}:host .config-item .item-setting .card-style-radio .radio-value span{-webkit-user-select:none;user-select:none}:host .config-item .item-setting .card-style-radio .radio-value.active{color:var(--devui-brand, #5e7ce0);border:1px solid var(--devui-brand, #5e7ce0);z-index:1}:host .config-item .item-setting d-input-number{flex:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.InputNumberComponent, selector: "d-input-number", inputs: ["step", "disabled", "size", "decimalLimit", "autoFocus", "allowEmpty", "placeholder", "maxLength", "reg", "styleType", "min", "max"], outputs: ["afterValueChanged", "whileValueChanging"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: StyleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rs-style', template: "<div class=\"config-item\">\n  <div class=\"item-title\">\u5BBD\u5EA6\u7C7B\u578B</div>\n  <div class=\"item-setting\">\n    <div class=\"card-style-radio\">\n      <div class=\"radio-value\" [ngClass]=\"!style.width || style.width === 'auto' ? 'active' : ''\"\n           (click)=\"select('width','auto')\">\n        <span>\u81EA\u9002\u5E94</span>\n      </div>\n      <div class=\"radio-value\" [ngClass]=\"style.width && style.width !== 'auto' ? 'active' : ''\"\n           (click)=\"select('width',240)\">\n        <span>\u56FA\u5B9A\u503C</span>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"config-item\">\n  <div class=\"item-title\">\u56FA\u5B9A\u5BBD\u5EA6</div>\n  <div class=\"item-setting\">\n    <d-input-number [allowEmpty]=\"true\" [(ngModel)]=\"width\"\n                    (whileValueChanging)=\"typing('width', $event)\"></d-input-number>\n  </div>\n</div>\n<div class=\"config-item\">\n  <div class=\"item-title\">\u9AD8\u5EA6\u7C7B\u578B</div>\n  <div class=\"item-setting\">\n    <div class=\"card-style-radio\">\n      <div class=\"radio-value\" [ngClass]=\"!style.height || style.height === 'auto' ? 'active' : ''\"\n           (click)=\"select('height','auto')\">\n        <span>\u81EA\u9002\u5E94</span>\n      </div>\n      <div class=\"radio-value\" [ngClass]=\"style.height && style.height !== 'auto' ? 'active' : ''\"\n           (click)=\"select('height',800)\">\n        <span>\u56FA\u5B9A\u503C</span>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"config-item\">\n  <div class=\"item-title\">\u56FA\u5B9A\u9AD8\u5EA6</div>\n  <div class=\"item-setting\">\n    <d-input-number [allowEmpty]=\"true\" [(ngModel)]=\"height\"\n                    (whileValueChanging)=\"typing('height', $event)\"></d-input-number>\n  </div>\n</div>\n", styles: [":host .config-item{display:flex;margin:8px;align-items:center}:host .config-item .item-title{flex:0 0 80px}:host .config-item .item-setting{flex:auto;display:flex}:host .config-item .item-setting .card-style-radio{flex:auto;display:flex;justify-content:stretch}:host .config-item .item-setting .card-style-radio .radio-value{flex:auto;border:1px solid var(--devui-dividing-line, #f2f2f3);text-align:center;padding:4px;margin-left:-1px;cursor:pointer}:host .config-item .item-setting .card-style-radio .radio-value span{-webkit-user-select:none;user-select:none}:host .config-item .item-setting .card-style-radio .radio-value.active{color:var(--devui-brand, #5e7ce0);border:1px solid var(--devui-brand, #5e7ce0);z-index:1}:host .config-item .item-setting d-input-number{flex:auto}\n"] }]
+        }] });
+
+class ItemStyleComponent {
+    constructor(changeDetectorRef) {
+        this.changeDetectorRef = changeDetectorRef;
+    }
+    ngOnInit() {
+        this.pageStyleContent.createComponent(StyleBlankComponent);
+        PluginManager.activeItem.subscribe(item => {
+            this.pageStyleContent.clear();
+            if (item) {
+                const componentRef = this.pageStyleContent.createComponent(StyleComponent);
+                const instance = componentRef.instance;
+                instance.style = item.style;
+            }
+            else {
+                this.pageStyleContent.createComponent(StyleBlankComponent);
+                this.changeDetectorRef.detectChanges();
+            }
+        });
+    }
+}
+ItemStyleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ItemStyleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ItemStyleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ItemStyleComponent, selector: "rs-item-style", viewQueries: [{ propertyName: "pageStyleContent", first: true, predicate: ["pageStyleContent"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #pageStyleContent></ng-container>\n", styles: [""] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ItemStyleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rs-item-style', template: "<ng-container #pageStyleContent></ng-container>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { pageStyleContent: [{
+                type: ViewChild,
+                args: ['pageStyleContent', { static: true, read: ViewContainerRef }]
+            }] } });
+
+class PluginManager {
+    static createComponent(boxItem, index, style, config, editMode = false, control) {
+        var _a;
+        const plugin = PluginFactory.get(config.name);
+        if (!plugin) {
+            console.error('undefined plugin: ' + config.name);
             return;
         }
-        $event.stopPropagation();
-        $event.preventDefault();
-        const element = this.modalElementRef.nativeElement;
-        let currentTop = $event.clientY - this.topStart;
-        let currentLeft = $event.clientX - this.leftStart;
-        currentTop = currentTop < 0 ? 0 : currentTop;
-        const maxTop = element.parentElement.offsetHeight - element.offsetHeight;
-        currentTop = currentTop > maxTop ? maxTop : currentTop;
-        currentLeft = currentLeft < 0 ? 0 : currentLeft;
-        const maxLeft = element.parentElement.offsetWidth - element.offsetWidth;
-        currentLeft = currentLeft > maxLeft ? maxLeft : currentLeft;
-        element.style.top = currentTop + 'px';
-        element.style.left = currentLeft + 'px';
+        const viewContainerRef = (_a = boxItem.itemHosts.get(index)) === null || _a === void 0 ? void 0 : _a.viewContainerRef;
+        viewContainerRef.clear();
+        const componentRef = viewContainerRef.createComponent(plugin.component);
+        const instance = componentRef.instance;
+        Object.assign(instance, config.pluginConfig);
+        if (plugin.category === 'form') {
+            if (editMode) {
+                instance.control = new UntypedFormControl('');
+            }
+            else {
+                instance.control = control.get(config.pluginConfig.field);
+            }
+        }
+        if (editMode) {
+            instance.onRemove = () => {
+                boxItem.config.list.splice(index, 1, { type: 'blank', style: boxItem.config.list[index].style });
+                boxItem.load();
+            };
+            if (plugin.type === 'default') {
+                componentRef.location.nativeElement.style.pointerEvents = 'all';
+                for (let child of componentRef.location.nativeElement.children) {
+                    child.style.pointerEvents = 'none';
+                }
+            }
+            this.createHoverComponent(viewContainerRef, componentRef, plugin.caption);
+            this.createActiveComponent(boxItem, index, componentRef, style, {
+                caption: plugin.caption,
+                config
+            }, true);
+        }
+        return componentRef;
+    }
+    static createHoverComponent(viewContainerRef, componentRef, caption) {
+        const hoverComponentRef = viewContainerRef.createComponent(PluginHoverComponent);
+        hoverComponentRef.instance.name = caption;
+        hoverComponentRef.instance.targetElement = componentRef.location.nativeElement;
+        const hoverElement = hoverComponentRef.location.nativeElement;
+        componentRef.location.nativeElement.appendChild(hoverElement);
+        this.hoverItems.push(componentRef.location.nativeElement);
+        componentRef.location.nativeElement.addEventListener('mouseenter', ($event) => {
+            for (let hoverItem of this.hoverItems) {
+                hoverItem.classList.remove('plugin-hover');
+            }
+            $event.target.classList.add('plugin-hover');
+        });
+        componentRef.location.nativeElement.addEventListener('mouseleave', ($event) => {
+            $event.target.classList.remove('plugin-hover');
+            $event.target.parentElement.parentElement.classList.add('plugin-hover');
+        });
+        return hoverComponentRef;
+    }
+    static createActiveComponent(boxItem, index, componentRef, style, config, showClose) {
+        var _a;
+        const viewContainerRef = (_a = boxItem.itemHosts.get(index)) === null || _a === void 0 ? void 0 : _a.viewContainerRef;
+        const activeComponentRef = viewContainerRef.createComponent(PluginActiveComponent);
+        activeComponentRef.instance.name = config.caption;
+        activeComponentRef.instance.showClose = showClose;
+        activeComponentRef.instance.targetElement = componentRef.location.nativeElement;
+        const activeElement = activeComponentRef.location.nativeElement;
+        componentRef.location.nativeElement.appendChild(activeElement);
+        this.activeItems.push(componentRef.location.nativeElement);
+        componentRef.location.nativeElement.addEventListener('click', ($event) => {
+            $event.stopPropagation();
+            for (let activeItem of this.activeItems) {
+                activeItem.classList.remove('plugin-active');
+            }
+            if (this.activeItems.indexOf($event.target) < 0) {
+                return;
+            }
+            this.activeItem.next({ boxItem, index, style, config: config.config });
+            $event.target.classList.add('plugin-active');
+        });
+        activeComponentRef.instance.itemRemove.subscribe(() => {
+            this.activeItem.next('');
+            viewContainerRef.clear();
+            componentRef.instance.onRemove();
+        });
+        return activeComponentRef;
+    }
+    static getItemConfigComponent() {
+        return ItemConfigComponent;
+    }
+    static getItemStyleComponent() {
+        return ItemStyleComponent;
     }
 }
-ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ModalComponent, selector: "rs-modal", inputs: { title: "title", size: "size", contentTemplate: "contentTemplate", contentTemplateContext: "contentTemplateContext" }, host: { listeners: { "document:mouseup": "onMouseup($event)", "document:mousemove": "onMousemove($event)" } }, viewQueries: [{ propertyName: "modalElementRef", first: true, predicate: ["modal"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"modal-backdrop\" [ngStyle]=\"resolveModalBackdropPosition()\">\n  <div #modal class=\"modal\">\n    <div class=\"modal-header\" (mousedown)=\"onMousedown($event)\">\n      <div class=\"modal-title\">{{title}}</div>\n      <i class=\"icon-close\" (click)=\"hide()\"></i>\n    </div>\n    <div class=\"modal-content\">\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\n    </div>\n  </div>\n</div>\n", styles: [":host .modal-backdrop{position:absolute;inset:0;z-index:calc(var(--devui-z-index-modal, 1050) - 1)}:host .modal-backdrop .modal{position:absolute;top:0;left:0;z-index:var(--devui-z-index-modal, 1050);background-color:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius-card, 6px);box-shadow:var(--devui-shadow-length-fullscreen-overlay, 0 12px 24px 0) var(--devui-shadow, rgba(37, 43, 58, .2));display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-header{flex:0 0 36px;border-bottom:1px solid var(--devui-dividing-line, #f2f2f3)}:host .modal-backdrop .modal .modal-header .modal-title{padding:12px 24px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700}:host .modal-backdrop .modal .modal-header i{position:absolute;top:12px;right:12px;padding:4px;font-size:var(--devui-font-size-card-title, 14px)}:host .modal-backdrop .modal .modal-header i:hover{cursor:pointer;color:var(--devui-danger, #f66f6a);background-color:var(--devui-info-bg, #e9edfa)}:host .modal-backdrop .modal .modal-content{flex:auto;padding:24px;display:flex;flex-flow:column;font-size:var(--devui-font-size, 12px);color:var(--devui-aide-text, #71757f)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalComponent, decorators: [{
+PluginManager.hoverItems = [];
+PluginManager.activeItem = new Subject();
+PluginManager.activeItems = [];
+
+class ItemConfigComponent {
+    ngOnInit() {
+        PluginManager.activeItem.subscribe(item => {
+            var _a;
+            if (!item) {
+                return;
+            }
+            this.pageConfigContent.clear();
+            const pluginConfig = PluginFactory.getConfig((_a = item.config) === null || _a === void 0 ? void 0 : _a.name);
+            if (!pluginConfig) {
+                return;
+            }
+            const componentRef = this.pageConfigContent.createComponent(pluginConfig.component);
+            const instance = componentRef.instance;
+            instance.config = item.config.pluginConfig;
+            instance.configChange.subscribe(() => {
+                const componentRef = PluginManager.createComponent(item.boxItem, item.index, item.style, item.config, true);
+                componentRef.location.nativeElement.click();
+            });
+        });
+    }
+}
+ItemConfigComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ItemConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ItemConfigComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ItemConfigComponent, selector: "rs-item-config", viewQueries: [{ propertyName: "pageConfigContent", first: true, predicate: ["pageConfigContent"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #pageConfigContent></ng-container>\n", styles: [""] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ItemConfigComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-modal', template: "<div class=\"modal-backdrop\" [ngStyle]=\"resolveModalBackdropPosition()\">\n  <div #modal class=\"modal\">\n    <div class=\"modal-header\" (mousedown)=\"onMousedown($event)\">\n      <div class=\"modal-title\">{{title}}</div>\n      <i class=\"icon-close\" (click)=\"hide()\"></i>\n    </div>\n    <div class=\"modal-content\">\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\n    </div>\n  </div>\n</div>\n", styles: [":host .modal-backdrop{position:absolute;inset:0;z-index:calc(var(--devui-z-index-modal, 1050) - 1)}:host .modal-backdrop .modal{position:absolute;top:0;left:0;z-index:var(--devui-z-index-modal, 1050);background-color:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius-card, 6px);box-shadow:var(--devui-shadow-length-fullscreen-overlay, 0 12px 24px 0) var(--devui-shadow, rgba(37, 43, 58, .2));display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-header{flex:0 0 36px;border-bottom:1px solid var(--devui-dividing-line, #f2f2f3)}:host .modal-backdrop .modal .modal-header .modal-title{padding:12px 24px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700}:host .modal-backdrop .modal .modal-header i{position:absolute;top:12px;right:12px;padding:4px;font-size:var(--devui-font-size-card-title, 14px)}:host .modal-backdrop .modal .modal-header i:hover{cursor:pointer;color:var(--devui-danger, #f66f6a);background-color:var(--devui-info-bg, #e9edfa)}:host .modal-backdrop .modal .modal-content{flex:auto;padding:24px;display:flex;flex-flow:column;font-size:var(--devui-font-size, 12px);color:var(--devui-aide-text, #71757f)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { title: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], modalElementRef: [{
+            args: [{ selector: 'rs-item-config', template: "<ng-container #pageConfigContent></ng-container>\n" }]
+        }], propDecorators: { pageConfigContent: [{
                 type: ViewChild,
-                args: ['modal', { static: true }]
-            }], contentTemplate: [{
-                type: Input
-            }], contentTemplateContext: [{
+                args: ['pageConfigContent', { static: true, read: ViewContainerRef }]
+            }] } });
+
+class BoxItemHostDirective {
+    constructor(el, viewContainerRef) {
+        this.el = el;
+        this.viewContainerRef = viewContainerRef;
+        this.el.nativeElement.hostId = this.hostId;
+    }
+}
+BoxItemHostDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BoxItemHostDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+BoxItemHostDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: BoxItemHostDirective, selector: "[rsBoxItemHost]", inputs: { hostId: "hostId" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BoxItemHostDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rsBoxItemHost]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { hostId: [{
                 type: Input
-            }], onMouseup: [{
-                type: HostListener,
-                args: ['document:mouseup', ['$event']]
-            }], onMousemove: [{
-                type: HostListener,
-                args: ['document:mousemove', ['$event']]
             }] } });
 
-class ModalService {
+class ItemBlankComponent {
     constructor() {
+        this.dropItem = new EventEmitter();
     }
-    open(viewContainerRef, title, size = 'default', contentTemplate, contentTemplateContext) {
-        const modalRef = viewContainerRef.createComponent(ModalComponent);
-        modalRef.instance.hide = () => {
-            modalRef.hostView.destroy();
+    dropEvent($event) {
+        this.dropItem.emit($event.dragData);
+    }
+}
+ItemBlankComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ItemBlankComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ItemBlankComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ItemBlankComponent, selector: "rs-item-blank", outputs: { dropItem: "dropItem" }, ngImport: i0, template: "<div\n  dDroppable\n  [dropScope]=\"'default'\"\n  dragOverClass=\"active\"\n  (dropEvent)=\"dropEvent($event)\"\n>\n  <span>\u62D6\u62FD\u7EC4\u4EF6\u5230\u6B64\u5904</span>\n</div>\n", styles: [":host{flex:auto;margin:16px;border:1px solid var(--devui-dividing-line, #f2f2f3);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AQMAAAAAMksxAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRF8fHxAAAAMCd7XAAAAAJ0Uk5T/wDltzBKAAABJUlEQVR4nFVSy23EIBCdAiKxBaxCC1tBaGk7YG/OjZYSOQptLKKB8Y0D8ssbjBPl9gQz7wfigQbgQxygEXjIAjwDcJEV+PbYb1KAlNDusgE+Q1Va3EPFptJDjwVVZfcNiqwCV9BiIlhW9DdPkEn5GggKRV4igVL2AYJGpc8TFAMa5lXhzHuc69dwEO6DkBI9OhNVii60ERu3VxrjRUVRet7DsMoUbpgny+LRb5b0K2C/CAWejCxCSYVl9wcQSaMEzuRRArcqebzxcMCnUcKQsBKiiVoJoR1+4DfWSodILCGa5zXTvKWo5L5ars0C/iuh003F7GecbG62YVujunzypDqZTcsK76HF2UYP41HM4WoO7eEWNLUUyaHf/3L9JvXnBwjzS/wAoXR0PDbjCSUAAAAASUVORK5CYII=) repeat var(--devui-unavailable, #f5f5f5);display:flex;justify-content:center;pointer-events:all}:host div{flex:auto;padding:16px;display:flex;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}:host div.active{background-color:var(--devui-waiting, #beccfa)}:host.plugin-hover>div{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.DroppableDirective, selector: "[dDroppable]", inputs: ["dragOverClass", "dropScope", "placeholderTag", "placeholderStyle", "placeholderText", "allowDropOnItem", "dragOverItemClass", "nestingTargetRect", "switchWhileCrossEdge", "defaultDropPosition", "dropSortCountSelector", "dropSortVirtualScrollOption"], outputs: ["dragEnterEvent", "dragOverEvent", "dragLeaveEvent", "dropEvent"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ItemBlankComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rs-item-blank', template: "<div\n  dDroppable\n  [dropScope]=\"'default'\"\n  dragOverClass=\"active\"\n  (dropEvent)=\"dropEvent($event)\"\n>\n  <span>\u62D6\u62FD\u7EC4\u4EF6\u5230\u6B64\u5904</span>\n</div>\n", styles: [":host{flex:auto;margin:16px;border:1px solid var(--devui-dividing-line, #f2f2f3);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AQMAAAAAMksxAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRF8fHxAAAAMCd7XAAAAAJ0Uk5T/wDltzBKAAABJUlEQVR4nFVSy23EIBCdAiKxBaxCC1tBaGk7YG/OjZYSOQptLKKB8Y0D8ssbjBPl9gQz7wfigQbgQxygEXjIAjwDcJEV+PbYb1KAlNDusgE+Q1Va3EPFptJDjwVVZfcNiqwCV9BiIlhW9DdPkEn5GggKRV4igVL2AYJGpc8TFAMa5lXhzHuc69dwEO6DkBI9OhNVii60ERu3VxrjRUVRet7DsMoUbpgny+LRb5b0K2C/CAWejCxCSYVl9wcQSaMEzuRRArcqebzxcMCnUcKQsBKiiVoJoR1+4DfWSodILCGa5zXTvKWo5L5ars0C/iuh003F7GecbG62YVujunzypDqZTcsK76HF2UYP41HM4WoO7eEWNLUUyaHf/3L9JvXnBwjzS/wAoXR0PDbjCSUAAAAASUVORK5CYII=) repeat var(--devui-unavailable, #f5f5f5);display:flex;justify-content:center;pointer-events:all}:host div{flex:auto;padding:16px;display:flex;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}:host div.active{background-color:var(--devui-waiting, #beccfa)}:host.plugin-hover>div{pointer-events:none}\n"] }]
+        }], propDecorators: { dropItem: [{
+                type: Output
+            }] } });
+
+class BoxItemComponent {
+    constructor() {
+        this.editMode = false;
+        this.style = {};
+        this.config = {};
+        this.leaveOneItem = new EventEmitter();
+    }
+    get _direction() {
+        return this.config.direction;
+    }
+    get _style() {
+        var _a, _b;
+        if (this.pDirection) {
+            return {};
+        }
+        const width = ((_a = this.style) === null || _a === void 0 ? void 0 : _a.width) ? this.style.width : 'auto';
+        const height = ((_b = this.style) === null || _b === void 0 ? void 0 : _b.height) ? this.style.height : 'auto';
+        return this._calcStyle(this.pDirection, width, height);
+    }
+    ngOnInit() {
+        this.load();
+    }
+    load() {
+        setTimeout(() => {
+            for (let i = 0; i < this.itemHosts.length; i++) {
+                const itemHost = this.itemHosts.get(i);
+                itemHost.viewContainerRef.clear();
+                const item = this.config.list[i];
+                switch (item.type) {
+                    case 'plugin':
+                        PluginManager.createComponent(this, i, item.style, item.config, this.editMode, this.control);
+                        break;
+                    case 'item':
+                        const boxItemComponentRef = itemHost.viewContainerRef.createComponent(BoxItemComponent);
+                        const instance = boxItemComponentRef.instance;
+                        instance.editMode = this.editMode;
+                        instance.style = item.style;
+                        instance.config = item.config;
+                        instance.control = this.control;
+                        instance.pDirection = this.config.direction;
+                        if (this.editMode) {
+                            instance.leaveOneItem.subscribe((item) => {
+                                if (item.type === 'item' && item.direction === this.config.direction) {
+                                    this.config.list.splice(i, 1, ...item.list);
+                                }
+                                else {
+                                    this.config.list.splice(i, 1, item);
+                                }
+                                this.load();
+                            });
+                            PluginManager.createHoverComponent(itemHost.viewContainerRef, boxItemComponentRef, '格子容器');
+                            PluginManager.createActiveComponent(this, i, boxItemComponentRef, item.style, {
+                                name: 'coast-box-container',
+                                caption: '格子容器'
+                            }, false);
+                        }
+                        break;
+                    case 'blank':
+                    default:
+                        if (this.editMode) {
+                            this.createBlankComponent(i);
+                        }
+                        break;
+                }
+            }
+        });
+    }
+    createBlankComponent(index) {
+        var _a;
+        const viewContainerRef = (_a = this.itemHosts.get(index)) === null || _a === void 0 ? void 0 : _a.viewContainerRef;
+        const containerBlankComponentRef = viewContainerRef.createComponent(ItemBlankComponent);
+        containerBlankComponentRef.instance.dropItem.subscribe((plugin) => {
+            this.config.list[index] = {
+                type: 'plugin',
+                style: this.config.list[index].style,
+                config: {
+                    name: plugin.name,
+                    pluginConfig: plugin.pluginConfig || {}
+                }
+            };
+            this.load();
+        });
+        containerBlankComponentRef.instance.onRemove = () => {
+            this.config.list.splice(index, 1);
+            if (this.config.list.length === 1) {
+                this.leaveOneItem.emit(this.config.list[0]);
+            }
+            else {
+                this.load();
+            }
+        };
+        PluginManager.createHoverComponent(viewContainerRef, containerBlankComponentRef, '占位格');
+        const activeComponentRef = PluginManager.createActiveComponent(this, index, containerBlankComponentRef, this.config.list[index].style, {
+            name: 'coast-box-container',
+            caption: '占位格'
+        }, this.config.list.length > 1);
+        activeComponentRef.instance.showDivider = true;
+        activeComponentRef.instance.splitItem = (direction) => {
+            if (this.config.direction === direction) {
+                this.config.list.splice(index, 0, { type: 'blank', style: {} });
+                this.load();
+            }
+            else {
+                if (this.config.list.length === 1) {
+                    this.config.direction = direction;
+                    this.config.list.push({ type: 'blank', style: {} });
+                }
+                else {
+                    this.config.list.splice(index, 1, {
+                        type: 'item',
+                        style: this.config.list[index].style,
+                        config: {
+                            direction,
+                            list: [{ type: 'blank', style: {} }, { type: 'blank', style: {} }]
+                        }
+                    });
+                }
+                this.load();
+            }
+        };
+    }
+    calcStyle(item) {
+        var _a, _b;
+        const width = ((_a = item.style) === null || _a === void 0 ? void 0 : _a.width) ? item.style.width : 'auto';
+        const height = ((_b = item.style) === null || _b === void 0 ? void 0 : _b.height) ? item.style.height : 'auto';
+        return this._calcStyle(this.config.direction, width, height);
+    }
+    _calcStyle(direction, width, height) {
+        if (direction === 'row') {
+            return {
+                flex: width === 'auto' ? '1' : '0 0 ' + width,
+                height,
+                pointerEvents: this.editMode ? 'none' : 'all'
+            };
+        }
+        else if (direction === 'column') {
+            return {
+                width,
+                flex: height === 'auto' ? '1' : '0 0 ' + height,
+                pointerEvents: this.editMode ? 'none' : 'all'
+            };
+        }
+        return {
+            pointerEvents: this.editMode ? 'none' : 'all'
         };
-        modalRef.instance.title = title;
-        modalRef.instance.contentTemplate = contentTemplate;
-        modalRef.instance.size = size;
-        modalRef.instance.contentTemplateContext = contentTemplateContext;
-        modalRef.instance.show();
-        return modalRef.instance;
     }
 }
-ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return []; } });
+BoxItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BoxItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BoxItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: BoxItemComponent, selector: "rs-box-item", outputs: { leaveOneItem: "leaveOneItem" }, host: { properties: { "style.flex-direction": "this._direction", "style": "this._style" } }, viewQueries: [{ propertyName: "itemHosts", predicate: BoxItemHostDirective, descendants: true }], ngImport: i0, template: "<ng-container *ngFor=\"let item of config.list; index as index\">\n  <div [ngStyle]=\"calcStyle(item)\">\n    <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n  </div>\n</ng-container>\n", styles: [":host{flex:auto;display:flex;pointer-events:all}:host div{flex:auto;display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: BoxItemHostDirective, selector: "[rsBoxItemHost]", inputs: ["hostId"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BoxItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rs-box-item', template: "<ng-container *ngFor=\"let item of config.list; index as index\">\n  <div [ngStyle]=\"calcStyle(item)\">\n    <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n  </div>\n</ng-container>\n", styles: [":host{flex:auto;display:flex;pointer-events:all}:host div{flex:auto;display:flex}\n"] }]
+        }], propDecorators: { _direction: [{
+                type: HostBinding,
+                args: ['style.flex-direction']
+            }], _style: [{
+                type: HostBinding,
+                args: ['style']
+            }], leaveOneItem: [{
+                type: Output
+            }], itemHosts: [{
+                type: ViewChildren,
+                args: [BoxItemHostDirective]
+            }] } });
 
-class ModalModule {
+class BoxContainerComponent {
+    constructor() {
+        this.editMode = false;
+        this.config = {
+            direction: 'row',
+            list: [{ type: 'blank', style: {} }]
+        };
+    }
+    ngOnInit() {
+        var _a;
+        const boxItemComponentRef = this.boxContainerContent.createComponent(BoxItemComponent);
+        const instance = boxItemComponentRef.instance;
+        instance.editMode = this.editMode;
+        instance.config = this.config;
+        instance.control = this.control;
+        (_a = instance.leaveOneItem) === null || _a === void 0 ? void 0 : _a.subscribe((item) => {
+            if (item.type === 'item') {
+                Object.assign(instance.config, item);
+            }
+            else {
+                instance.config.direction = 'row';
+            }
+            instance.load();
+        });
+    }
+}
+BoxContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BoxContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BoxContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: BoxContainerComponent, selector: "rs-box-container", inputs: { editMode: "editMode", config: "config", control: "control" }, viewQueries: [{ propertyName: "boxContainerContent", first: true, predicate: ["boxContainerContent"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #boxContainerContent></ng-container>\n", styles: [":host{flex:auto;position:relative;display:flex;overflow:auto}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BoxContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rs-box-container', template: "<ng-container #boxContainerContent></ng-container>\n", styles: [":host{flex:auto;position:relative;display:flex;overflow:auto}\n"] }]
+        }], propDecorators: { editMode: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], boxContainerContent: [{
+                type: ViewChild,
+                args: ['boxContainerContent', { static: true, read: ViewContainerRef }]
+            }] } });
+
+class BoxContainerModule {
 }
-ModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.0", ngImport: i0, type: ModalModule, declarations: [ModalComponent], imports: [CommonModule] });
-ModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalModule, decorators: [{
+BoxContainerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BoxContainerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BoxContainerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: BoxContainerModule, declarations: [BoxContainerComponent,
+        BoxItemHostDirective,
+        BoxItemComponent,
+        PluginActiveComponent,
+        DividerComponent,
+        DividerLineComponent,
+        PluginHoverComponent,
+        ItemConfigComponent,
+        ItemStyleComponent,
+        StyleBlankComponent,
+        ItemBlankComponent,
+        StyleComponent], imports: [CommonModule,
+        DevUIModule,
+        FormsModule], exports: [BoxContainerComponent,
+        ItemConfigComponent,
+        ItemStyleComponent] });
+BoxContainerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BoxContainerModule, imports: [CommonModule,
+        DevUIModule,
+        FormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BoxContainerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
-                        ModalComponent
+                        BoxContainerComponent,
+                        BoxItemHostDirective,
+                        BoxItemComponent,
+                        PluginActiveComponent,
+                        DividerComponent,
+                        DividerLineComponent,
+                        PluginHoverComponent,
+                        ItemConfigComponent,
+                        ItemStyleComponent,
+                        StyleBlankComponent,
+                        ItemBlankComponent,
+                        StyleComponent
                     ],
                     imports: [
-                        CommonModule
+                        CommonModule,
+                        DevUIModule,
+                        FormsModule
                     ],
-                    exports: []
+                    exports: [
+                        BoxContainerComponent,
+                        ItemConfigComponent,
+                        ItemStyleComponent
+                    ]
                 }]
         }] });
 
@@ -224,10 +711,12 @@ class DataGridComponent {
         };
     }
     ngOnInit() {
-        this.load();
+        this.reload();
     }
-    load() {
-        this.service.getMetadata(this.tenant, this.className, this.view || '').subscribe((response) => {
+    reload() {
+        var _a;
+        (_a = this.dxDataGrid.instance) === null || _a === void 0 ? void 0 : _a.state(null);
+        this.service.getMetadataByView(this.tenant, this.className, this.view || '').subscribe((response) => {
             this.columns = [];
             for (let column of response.data.columns) {
                 if (column.type === 'NORMAL') {
@@ -291,11 +780,11 @@ class DataGridComponent {
         });
     }
 }
-DataGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DataGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: DataGridComponent, selector: "rs-data-grid", inputs: { tenant: "tenant", className: "className", view: "view", filter: "filter", service: "service" }, ngImport: i0, template: "<dx-data-grid [dataSource]=\"dataSource\"\n              [columns]=\"columns\"\n              [showBorders]=\"true\"\n              [showColumnLines]=\"true\"\n              [showRowLines]=\"true\"\n              [hoverStateEnabled]=\"true\"\n              [rowAlternationEnabled]=\"true\"\n              [columnAutoWidth]=\"true\"\n              [allowColumnResizing]=\"true\"\n              columnResizingMode=\"widget\"\n              dateSerializationFormat=\"yyyy/MM/dd HH:mm:ss\"\n>\n  <dxo-sorting mode=\"multiple\"></dxo-sorting>\n  <dxo-selection mode=\"multiple\" selectAllMode=\"page\"></dxo-selection>\n  <dxo-filter-row [visible]=\"true\"></dxo-filter-row>\n  <dxo-remote-operations [filtering]=\"true\"\n                         [sorting]=\"true\"\n                         [paging]=\"true\">\n  </dxo-remote-operations>\n  <dxo-paging [pageSize]=\"15\"></dxo-paging>\n  <dxo-pager [visible]=\"true\"\n             [showInfo]=\"true\"\n             infoText=\"\u7B2C{0}\u9875\uFF0C\u5171{1}\u9875\uFF08\u5171{2}\u4E2A\u9879\u76EE\uFF09\"\n             [showPageSizeSelector]=\"true\"\n             [allowedPageSizes]=\"[15, 30, 50]\"\n  ></dxo-pager>\n  <dxo-scrolling showScrollbar=\"always\"></dxo-scrolling>\n  <dxo-export [allowExportSelectedData]=\"true\"\n              [fileName]=\"className\"></dxo-export>\n  <div *dxTemplate=\"let cellInfo of 'rowIndexTemplate'\">\n    {{cellInfo.rowIndex + 1}}\n  </div>\n</dx-data-grid>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i2.DxoExportComponent, selector: "dxo-export", inputs: ["backgroundColor", "enabled", "fileName", "formats", "margin", "printingEnabled", "svgToCanvas", "allowExportSelectedData", "texts"] }, { kind: "component", type: i3.DxDataGridComponent, selector: "dx-data-grid", inputs: ["accessKey", "activeStateEnabled", "allowColumnReordering", "allowColumnResizing", "autoNavigateToFocusedRow", "cacheEnabled", "cellHintEnabled", "columnAutoWidth", "columnChooser", "columnFixing", "columnHidingEnabled", "columnMinWidth", "columnResizingMode", "columns", "columnWidth", "customizeColumns", "dataRowTemplate", "dataSource", "dateSerializationFormat", "disabled", "editing", "elementAttr", "errorRowEnabled", "export", "filterBuilder", "filterBuilderPopup", "filterPanel", "filterRow", "filterSyncEnabled", "filterValue", "focusedColumnIndex", "focusedRowEnabled", "focusedRowIndex", "focusedRowKey", "grouping", "groupPanel", "headerFilter", "height", "highlightChanges", "hint", "hoverStateEnabled", "keyboardNavigation", "keyExpr", "loadPanel", "masterDetail", "noDataText", "pager", "paging", "remoteOperations", "renderAsync", "repaintChangesOnly", "rowAlternationEnabled", "rowDragging", "rowTemplate", "rtlEnabled", "scrolling", "searchPanel", "selectedRowKeys", "selection", "selectionFilter", "showBorders", "showColumnHeaders", "showColumnLines", "showRowLines", "sortByGroupSummaryInfo", "sorting", "stateStoring", "summary", "syncLookupFilterValues", "tabIndex", "toolbar", "twoWayBindingEnabled", "visible", "width", "wordWrapEnabled"], outputs: ["onAdaptiveDetailRowPreparing", "onCellClick", "onCellDblClick", "onCellHoverChanged", "onCellPrepared", "onContentReady", "onContextMenuPreparing", "onDataErrorOccurred", "onDisposing", "onEditCanceled", "onEditCanceling", "onEditingStart", "onEditorPrepared", "onEditorPreparing", "onExporting", "onFocusedCellChanged", "onFocusedCellChanging", "onFocusedRowChanged", "onFocusedRowChanging", "onInitialized", "onInitNewRow", "onKeyDown", "onOptionChanged", "onRowClick", "onRowCollapsed", "onRowCollapsing", "onRowDblClick", "onRowExpanded", "onRowExpanding", "onRowInserted", "onRowInserting", "onRowPrepared", "onRowRemoved", "onRowRemoving", "onRowUpdated", "onRowUpdating", "onRowValidating", "onSaved", "onSaving", "onSelectionChanged", "onToolbarPreparing", "accessKeyChange", "activeStateEnabledChange", "allowColumnReorderingChange", "allowColumnResizingChange", "autoNavigateToFocusedRowChange", "cacheEnabledChange", "cellHintEnabledChange", "columnAutoWidthChange", "columnChooserChange", "columnFixingChange", "columnHidingEnabledChange", "columnMinWidthChange", "columnResizingModeChange", "columnsChange", "columnWidthChange", "customizeColumnsChange", "dataRowTemplateChange", "dataSourceChange", "dateSerializationFormatChange", "disabledChange", "editingChange", "elementAttrChange", "errorRowEnabledChange", "exportChange", "filterBuilderChange", "filterBuilderPopupChange", "filterPanelChange", "filterRowChange", "filterSyncEnabledChange", "filterValueChange", "focusedColumnIndexChange", "focusedRowEnabledChange", "focusedRowIndexChange", "focusedRowKeyChange", "groupingChange", "groupPanelChange", "headerFilterChange", "heightChange", "highlightChangesChange", "hintChange", "hoverStateEnabledChange", "keyboardNavigationChange", "keyExprChange", "loadPanelChange", "masterDetailChange", "noDataTextChange", "pagerChange", "pagingChange", "remoteOperationsChange", "renderAsyncChange", "repaintChangesOnlyChange", "rowAlternationEnabledChange", "rowDraggingChange", "rowTemplateChange", "rtlEnabledChange", "scrollingChange", "searchPanelChange", "selectedRowKeysChange", "selectionChange", "selectionFilterChange", "showBordersChange", "showColumnHeadersChange", "showColumnLinesChange", "showRowLinesChange", "sortByGroupSummaryInfoChange", "sortingChange", "stateStoringChange", "summaryChange", "syncLookupFilterValuesChange", "tabIndexChange", "toolbarChange", "twoWayBindingEnabledChange", "visibleChange", "widthChange", "wordWrapEnabledChange"] }, { kind: "component", type: i2.DxoFilterRowComponent, selector: "dxo-filter-row", inputs: ["applyFilter", "applyFilterText", "betweenEndText", "betweenStartText", "operationDescriptions", "resetOperationText", "showAllText", "showOperationChooser", "visible"] }, { kind: "component", type: i2.DxoPagerComponent, selector: "dxo-pager", inputs: ["allowedPageSizes", "displayMode", "infoText", "label", "showInfo", "showNavigationButtons", "showPageSizeSelector", "visible"] }, { kind: "component", type: i2.DxoPagingComponent, selector: "dxo-paging", inputs: ["enabled", "pageIndex", "pageSize"], outputs: ["pageIndexChange", "pageSizeChange"] }, { kind: "component", type: i2.DxoRemoteOperationsComponent, selector: "dxo-remote-operations", inputs: ["filtering", "grouping", "groupPaging", "paging", "sorting", "summary"] }, { kind: "component", type: i2.DxoScrollingComponent, selector: "dxo-scrolling", inputs: ["columnRenderingMode", "mode", "preloadEnabled", "renderAsync", "rowRenderingMode", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative"] }, { kind: "component", type: i2.DxoSelectionComponent, selector: "dxo-selection", inputs: ["allowSelectAll", "deferred", "mode", "selectAllMode", "showCheckBoxesMode", "recursive"] }, { kind: "component", type: i2.DxoSortingComponent, selector: "dxo-sorting", inputs: ["ascendingText", "clearText", "descendingText", "mode", "showSortIndexes"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DataGridComponent, decorators: [{
+DataGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DataGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DataGridComponent, selector: "rs-data-grid", inputs: { tenant: "tenant", className: "className", view: "view", filter: "filter", service: "service", height: "height" }, viewQueries: [{ propertyName: "dxDataGrid", first: true, predicate: DxDataGridComponent, descendants: true, static: true }], ngImport: i0, template: "<dx-data-grid [dataSource]=\"dataSource\"\n              [columns]=\"columns\"\n              [height]=\"height\"\n              [showBorders]=\"true\"\n              [showColumnLines]=\"true\"\n              [showRowLines]=\"true\"\n              [hoverStateEnabled]=\"true\"\n              [rowAlternationEnabled]=\"true\"\n              [columnAutoWidth]=\"true\"\n              [allowColumnResizing]=\"true\"\n              columnResizingMode=\"widget\"\n              dateSerializationFormat=\"yyyy/MM/dd HH:mm:ss\"\n>\n  <dxo-sorting mode=\"multiple\"></dxo-sorting>\n  <dxo-selection mode=\"multiple\" selectAllMode=\"page\"></dxo-selection>\n  <dxo-filter-row [visible]=\"true\"></dxo-filter-row>\n  <dxo-remote-operations [filtering]=\"true\"\n                         [sorting]=\"true\"\n                         [paging]=\"true\">\n  </dxo-remote-operations>\n  <dxo-paging [pageSize]=\"15\"></dxo-paging>\n  <dxo-pager [visible]=\"true\"\n             [showInfo]=\"true\"\n             infoText=\"\u7B2C{0}\u9875\uFF0C\u5171{1}\u9875\uFF08\u5171{2}\u4E2A\u9879\u76EE\uFF09\"\n             [showPageSizeSelector]=\"true\"\n             [allowedPageSizes]=\"[15, 30, 50]\"\n  ></dxo-pager>\n  <dxo-scrolling showScrollbar=\"always\"></dxo-scrolling>\n  <dxo-export [allowExportSelectedData]=\"true\"\n              [fileName]=\"className\"></dxo-export>\n  <div *dxTemplate=\"let cellInfo of 'rowIndexTemplate'\">\n    {{cellInfo.rowIndex + 1}}\n  </div>\n</dx-data-grid>\n", styles: [""], dependencies: [{ kind: "component", type: i1$2.DxDataGridComponent, selector: "dx-data-grid", inputs: ["accessKey", "activeStateEnabled", "allowColumnReordering", "allowColumnResizing", "autoNavigateToFocusedRow", "cacheEnabled", "cellHintEnabled", "columnAutoWidth", "columnChooser", "columnFixing", "columnHidingEnabled", "columnMinWidth", "columnResizingMode", "columns", "columnWidth", "customizeColumns", "dataRowTemplate", "dataSource", "dateSerializationFormat", "disabled", "editing", "elementAttr", "errorRowEnabled", "export", "filterBuilder", "filterBuilderPopup", "filterPanel", "filterRow", "filterSyncEnabled", "filterValue", "focusedColumnIndex", "focusedRowEnabled", "focusedRowIndex", "focusedRowKey", "grouping", "groupPanel", "headerFilter", "height", "highlightChanges", "hint", "hoverStateEnabled", "keyboardNavigation", "keyExpr", "loadPanel", "masterDetail", "noDataText", "pager", "paging", "remoteOperations", "renderAsync", "repaintChangesOnly", "rowAlternationEnabled", "rowDragging", "rowTemplate", "rtlEnabled", "scrolling", "searchPanel", "selectedRowKeys", "selection", "selectionFilter", "showBorders", "showColumnHeaders", "showColumnLines", "showRowLines", "sortByGroupSummaryInfo", "sorting", "stateStoring", "summary", "syncLookupFilterValues", "tabIndex", "toolbar", "twoWayBindingEnabled", "visible", "width", "wordWrapEnabled"], outputs: ["onAdaptiveDetailRowPreparing", "onCellClick", "onCellDblClick", "onCellHoverChanged", "onCellPrepared", "onContentReady", "onContextMenuPreparing", "onDataErrorOccurred", "onDisposing", "onEditCanceled", "onEditCanceling", "onEditingStart", "onEditorPrepared", "onEditorPreparing", "onExporting", "onFocusedCellChanged", "onFocusedCellChanging", "onFocusedRowChanged", "onFocusedRowChanging", "onInitialized", "onInitNewRow", "onKeyDown", "onOptionChanged", "onRowClick", "onRowCollapsed", "onRowCollapsing", "onRowDblClick", "onRowExpanded", "onRowExpanding", "onRowInserted", "onRowInserting", "onRowPrepared", "onRowRemoved", "onRowRemoving", "onRowUpdated", "onRowUpdating", "onRowValidating", "onSaved", "onSaving", "onSelectionChanged", "onToolbarPreparing", "accessKeyChange", "activeStateEnabledChange", "allowColumnReorderingChange", "allowColumnResizingChange", "autoNavigateToFocusedRowChange", "cacheEnabledChange", "cellHintEnabledChange", "columnAutoWidthChange", "columnChooserChange", "columnFixingChange", "columnHidingEnabledChange", "columnMinWidthChange", "columnResizingModeChange", "columnsChange", "columnWidthChange", "customizeColumnsChange", "dataRowTemplateChange", "dataSourceChange", "dateSerializationFormatChange", "disabledChange", "editingChange", "elementAttrChange", "errorRowEnabledChange", "exportChange", "filterBuilderChange", "filterBuilderPopupChange", "filterPanelChange", "filterRowChange", "filterSyncEnabledChange", "filterValueChange", "focusedColumnIndexChange", "focusedRowEnabledChange", "focusedRowIndexChange", "focusedRowKeyChange", "groupingChange", "groupPanelChange", "headerFilterChange", "heightChange", "highlightChangesChange", "hintChange", "hoverStateEnabledChange", "keyboardNavigationChange", "keyExprChange", "loadPanelChange", "masterDetailChange", "noDataTextChange", "pagerChange", "pagingChange", "remoteOperationsChange", "renderAsyncChange", "repaintChangesOnlyChange", "rowAlternationEnabledChange", "rowDraggingChange", "rowTemplateChange", "rtlEnabledChange", "scrollingChange", "searchPanelChange", "selectedRowKeysChange", "selectionChange", "selectionFilterChange", "showBordersChange", "showColumnHeadersChange", "showColumnLinesChange", "showRowLinesChange", "sortByGroupSummaryInfoChange", "sortingChange", "stateStoringChange", "summaryChange", "syncLookupFilterValuesChange", "tabIndexChange", "toolbarChange", "twoWayBindingEnabledChange", "visibleChange", "widthChange", "wordWrapEnabledChange"] }, { kind: "component", type: i2$1.DxoExportComponent, selector: "dxo-export", inputs: ["backgroundColor", "enabled", "fileName", "formats", "margin", "printingEnabled", "svgToCanvas", "allowExportSelectedData", "texts"] }, { kind: "component", type: i2$1.DxoFilterRowComponent, selector: "dxo-filter-row", inputs: ["applyFilter", "applyFilterText", "betweenEndText", "betweenStartText", "operationDescriptions", "resetOperationText", "showAllText", "showOperationChooser", "visible"] }, { kind: "component", type: i2$1.DxoPagerComponent, selector: "dxo-pager", inputs: ["allowedPageSizes", "displayMode", "infoText", "label", "showInfo", "showNavigationButtons", "showPageSizeSelector", "visible"] }, { kind: "component", type: i2$1.DxoPagingComponent, selector: "dxo-paging", inputs: ["enabled", "pageIndex", "pageSize"], outputs: ["pageIndexChange", "pageSizeChange"] }, { kind: "component", type: i2$1.DxoRemoteOperationsComponent, selector: "dxo-remote-operations", inputs: ["filtering", "grouping", "groupPaging", "paging", "sorting", "summary"] }, { kind: "component", type: i2$1.DxoScrollingComponent, selector: "dxo-scrolling", inputs: ["columnRenderingMode", "mode", "preloadEnabled", "renderAsync", "rowRenderingMode", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative"] }, { kind: "component", type: i2$1.DxoSelectionComponent, selector: "dxo-selection", inputs: ["allowSelectAll", "deferred", "mode", "selectAllMode", "showCheckBoxesMode", "recursive"] }, { kind: "component", type: i2$1.DxoSortingComponent, selector: "dxo-sorting", inputs: ["ascendingText", "clearText", "descendingText", "mode", "showSortIndexes"] }, { kind: "directive", type: i3$1.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DataGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-data-grid', template: "<dx-data-grid [dataSource]=\"dataSource\"\n              [columns]=\"columns\"\n              [showBorders]=\"true\"\n              [showColumnLines]=\"true\"\n              [showRowLines]=\"true\"\n              [hoverStateEnabled]=\"true\"\n              [rowAlternationEnabled]=\"true\"\n              [columnAutoWidth]=\"true\"\n              [allowColumnResizing]=\"true\"\n              columnResizingMode=\"widget\"\n              dateSerializationFormat=\"yyyy/MM/dd HH:mm:ss\"\n>\n  <dxo-sorting mode=\"multiple\"></dxo-sorting>\n  <dxo-selection mode=\"multiple\" selectAllMode=\"page\"></dxo-selection>\n  <dxo-filter-row [visible]=\"true\"></dxo-filter-row>\n  <dxo-remote-operations [filtering]=\"true\"\n                         [sorting]=\"true\"\n                         [paging]=\"true\">\n  </dxo-remote-operations>\n  <dxo-paging [pageSize]=\"15\"></dxo-paging>\n  <dxo-pager [visible]=\"true\"\n             [showInfo]=\"true\"\n             infoText=\"\u7B2C{0}\u9875\uFF0C\u5171{1}\u9875\uFF08\u5171{2}\u4E2A\u9879\u76EE\uFF09\"\n             [showPageSizeSelector]=\"true\"\n             [allowedPageSizes]=\"[15, 30, 50]\"\n  ></dxo-pager>\n  <dxo-scrolling showScrollbar=\"always\"></dxo-scrolling>\n  <dxo-export [allowExportSelectedData]=\"true\"\n              [fileName]=\"className\"></dxo-export>\n  <div *dxTemplate=\"let cellInfo of 'rowIndexTemplate'\">\n    {{cellInfo.rowIndex + 1}}\n  </div>\n</dx-data-grid>\n" }]
+            args: [{ selector: 'rs-data-grid', template: "<dx-data-grid [dataSource]=\"dataSource\"\n              [columns]=\"columns\"\n              [height]=\"height\"\n              [showBorders]=\"true\"\n              [showColumnLines]=\"true\"\n              [showRowLines]=\"true\"\n              [hoverStateEnabled]=\"true\"\n              [rowAlternationEnabled]=\"true\"\n              [columnAutoWidth]=\"true\"\n              [allowColumnResizing]=\"true\"\n              columnResizingMode=\"widget\"\n              dateSerializationFormat=\"yyyy/MM/dd HH:mm:ss\"\n>\n  <dxo-sorting mode=\"multiple\"></dxo-sorting>\n  <dxo-selection mode=\"multiple\" selectAllMode=\"page\"></dxo-selection>\n  <dxo-filter-row [visible]=\"true\"></dxo-filter-row>\n  <dxo-remote-operations [filtering]=\"true\"\n                         [sorting]=\"true\"\n                         [paging]=\"true\">\n  </dxo-remote-operations>\n  <dxo-paging [pageSize]=\"15\"></dxo-paging>\n  <dxo-pager [visible]=\"true\"\n             [showInfo]=\"true\"\n             infoText=\"\u7B2C{0}\u9875\uFF0C\u5171{1}\u9875\uFF08\u5171{2}\u4E2A\u9879\u76EE\uFF09\"\n             [showPageSizeSelector]=\"true\"\n             [allowedPageSizes]=\"[15, 30, 50]\"\n  ></dxo-pager>\n  <dxo-scrolling showScrollbar=\"always\"></dxo-scrolling>\n  <dxo-export [allowExportSelectedData]=\"true\"\n              [fileName]=\"className\"></dxo-export>\n  <div *dxTemplate=\"let cellInfo of 'rowIndexTemplate'\">\n    {{cellInfo.rowIndex + 1}}\n  </div>\n</dx-data-grid>\n" }]
         }], propDecorators: { tenant: [{
                 type: Input
             }], className: [{
@@ -306,16 +795,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                 type: Input
             }], service: [{
                 type: Input
+            }], height: [{
+                type: Input
+            }], dxDataGrid: [{
+                type: ViewChild,
+                args: [DxDataGridComponent, { static: true }]
             }] } });
 
 class DataGridModule {
 }
-DataGridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DataGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DataGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.0", ngImport: i0, type: DataGridModule, declarations: [DataGridComponent], imports: [CommonModule,
-        DevExtremeModule], exports: [DataGridComponent] });
-DataGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DataGridModule, imports: [CommonModule,
-        DevExtremeModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DataGridModule, decorators: [{
+DataGridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DataGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DataGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: DataGridModule, declarations: [DataGridComponent], imports: [CommonModule,
+        DxDataGridModule], exports: [DataGridComponent] });
+DataGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DataGridModule, imports: [CommonModule,
+        DxDataGridModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DataGridModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -323,7 +817,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                     ],
                     imports: [
                         CommonModule,
-                        DevExtremeModule
+                        DxDataGridModule
                     ],
                     exports: [
                         DataGridComponent
@@ -331,6 +825,262 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                 }]
         }] });
 
+class FormComponent {
+    constructor() {
+        this.layoutDirection = FormLayout.Vertical;
+        this.model = {};
+        this.items = [];
+        this.formGroup = new UntypedFormGroup({});
+        this.submitted = new EventEmitter();
+    }
+    ngOnInit() {
+        this.formGroup.valueChanges.subscribe(model => {
+            this.model = model;
+        });
+        this.service.getMetadataByTemplate(this.tenant, this.className, this.template || 'Test').subscribe((response) => {
+            this.config = JSON.parse(response.data.template);
+            this.items = ["modifier", "createTime", "modifyTime", "creator", "number"];
+            for (let item of this.items) {
+                this.formGroup.addControl(item, new UntypedFormControl(this.model[item]));
+            }
+        });
+    }
+    submit($event) {
+        console.log($event);
+        console.log(this.model);
+    }
+}
+FormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: FormComponent, selector: "rs-form", inputs: { tenant: "tenant", className: "className", template: "template", service: "service" }, outputs: { submitted: "submitted" }, viewQueries: [{ propertyName: "formSubmitter", first: true, predicate: ["formSubmitter"], descendants: true }], ngImport: i0, template: "<form dForm [formGroup]=\"formGroup\" [layout]=\"layoutDirection\" (dSubmit)=\"submit($event)\">\n  <ng-container *ngIf=\"config && formGroup\">\n    <rs-box-container [config]=\"config\" [control]=\"formGroup\"></rs-box-container>\n  </ng-container>\n  <button #formSubmitter dFormSubmit=\"click\"></button>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.FormDirective, selector: "[dForm]", inputs: ["layout", "labelSize", "labelAlign", "dFeedbackType", "dHasFeedback"], outputs: ["dSubmit"], exportAs: ["dForm"] }, { kind: "directive", type: i2$2.DFormSubmitDirective, selector: "[dFormSubmit]", inputs: ["dFormSubmit", "dFormSubmitData"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: BoxContainerComponent, selector: "rs-box-container", inputs: ["editMode", "config", "control"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rs-form', template: "<form dForm [formGroup]=\"formGroup\" [layout]=\"layoutDirection\" (dSubmit)=\"submit($event)\">\n  <ng-container *ngIf=\"config && formGroup\">\n    <rs-box-container [config]=\"config\" [control]=\"formGroup\"></rs-box-container>\n  </ng-container>\n  <button #formSubmitter dFormSubmit=\"click\"></button>\n</form>\n" }]
+        }], propDecorators: { tenant: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], template: [{
+                type: Input
+            }], service: [{
+                type: Input
+            }], formSubmitter: [{
+                type: ViewChild,
+                args: ['formSubmitter']
+            }], submitted: [{
+                type: Output
+            }] } });
+
+class FormModule {
+}
+FormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: FormModule, declarations: [FormComponent], imports: [CommonModule,
+        DevUIModule,
+        FormsModule,
+        ReactiveFormsModule,
+        BoxContainerModule], exports: [FormComponent] });
+FormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormModule, imports: [CommonModule,
+        DevUIModule,
+        FormsModule,
+        ReactiveFormsModule,
+        BoxContainerModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        FormComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        DevUIModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        BoxContainerModule
+                    ],
+                    exports: [
+                        FormComponent
+                    ]
+                }]
+        }] });
+
+class ModalComponent {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.size = 'default';
+        this._width = 480;
+        this.movable = false;
+        this.topStart = 0;
+        this.leftStart = 0;
+    }
+    ngOnInit() {
+        if (this.size === 'full') {
+            this.modalElementRef.nativeElement.style.top = '0px';
+            this.modalElementRef.nativeElement.style.right = '0px';
+            this.modalElementRef.nativeElement.style.bottom = '0px';
+            this.modalElementRef.nativeElement.style.left = '0px';
+            this.modalElementRef.nativeElement.style.margin = '2px';
+            this.modalElementRef.nativeElement.style.boxShadow = 'none';
+        }
+        else {
+            if (this.size === 'large') {
+                this._width = 960;
+            }
+            this.modalElementRef.nativeElement.style.width = this._width + 'px';
+            this.modalElementRef.nativeElement.style.top = '40px';
+            this.modalElementRef.nativeElement.style.left =
+                (this.elementRef.nativeElement.parentElement.offsetWidth - this.modalElementRef.nativeElement.offsetWidth) / 2 + 'px';
+            this.moveHandleEl = this.elementRef.nativeElement.querySelector('.modal-header');
+            this.moveHandleEl.style.cursor = 'move';
+        }
+    }
+    show() {
+        // 若存在多层模态框，仅保留最上层遮罩颜色，下层遮罩设置为透明
+        const parentElement = this.elementRef.nativeElement.parentElement;
+        const nodeName = this.elementRef.nativeElement.nodeName;
+        const modals = parentElement.querySelectorAll(nodeName);
+        for (let i = 0; i < modals.length; i++) {
+            if (i === modals.length - 1) {
+                modals[i].querySelector('.modal-backdrop').style.backgroundColor = 'rgba(37, 43, 58, 0.05)';
+            }
+            else {
+                modals[i].querySelector('.modal-backdrop').style.backgroundColor = 'rgba(37, 43, 58, 0)';
+            }
+        }
+    }
+    hide() {
+        // 在service中重写
+    }
+    ngOnDestroy() {
+        // 若存在多层模态框，下一层遮罩设置为不透明
+        const parentElement = this.elementRef.nativeElement.parentElement;
+        const nodeName = this.elementRef.nativeElement.nodeName;
+        const nextModal = parentElement.querySelector(nodeName + ':nth-last-child(2)');
+        if (nextModal) {
+            nextModal.querySelector('.modal-backdrop').style.backgroundColor = 'rgba(37, 43, 58, 0.05)';
+        }
+    }
+    resolveModalBackdropPosition() {
+        return {
+            "width": this.elementRef.nativeElement.parentElement.offsetWidth + 'px',
+            "height": this.elementRef.nativeElement.parentElement.offsetHeight + 'px',
+            "top": this.elementRef.nativeElement.parentElement.offsetTop + 'px',
+            "left": this.elementRef.nativeElement.parentElement.offsetLeft + 'px',
+        };
+    }
+    onMousedown($event) {
+        if ($event.button === 2 || !this.checkHandleTarget($event.target, this.moveHandleEl)) {
+            return;
+        }
+        this.movable = true;
+        this.topStart = $event.clientY - this.modalElementRef.nativeElement.style.top.replace('px', '');
+        this.leftStart = $event.clientX - this.modalElementRef.nativeElement.style.left.replace('px', '');
+    }
+    checkHandleTarget(target, element) {
+        if (!element) {
+            return false;
+        }
+        if (target === element) {
+            return true;
+        }
+        for (let child in element.children) {
+            if (Object.prototype.hasOwnProperty.call(element.children, child)) {
+                if (this.checkHandleTarget(target, element.children[child])) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    onMouseup() {
+        this.movable = false;
+    }
+    onMousemove($event) {
+        if (!this.movable) {
+            return;
+        }
+        $event.stopPropagation();
+        $event.preventDefault();
+        const element = this.modalElementRef.nativeElement;
+        let currentTop = $event.clientY - this.topStart;
+        let currentLeft = $event.clientX - this.leftStart;
+        currentTop = currentTop < 0 ? 0 : currentTop;
+        const maxTop = element.parentElement.offsetHeight - element.offsetHeight;
+        currentTop = currentTop > maxTop ? maxTop : currentTop;
+        currentLeft = currentLeft < 0 ? 0 : currentLeft;
+        const maxLeft = element.parentElement.offsetWidth - element.offsetWidth;
+        currentLeft = currentLeft > maxLeft ? maxLeft : currentLeft;
+        element.style.top = currentTop + 'px';
+        element.style.left = currentLeft + 'px';
+    }
+}
+ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ModalComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ModalComponent, selector: "rs-modal", inputs: { title: "title", size: "size", contentTemplate: "contentTemplate", contentTemplateContext: "contentTemplateContext" }, host: { listeners: { "document:mouseup": "onMouseup($event)", "document:mousemove": "onMousemove($event)" } }, viewQueries: [{ propertyName: "modalElementRef", first: true, predicate: ["modal"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"modal-backdrop\" [ngStyle]=\"resolveModalBackdropPosition()\">\n  <div #modal class=\"modal\">\n    <div class=\"modal-header\" (mousedown)=\"onMousedown($event)\">\n      <div class=\"modal-title\">{{title}}</div>\n      <i class=\"icon-close\" (click)=\"hide()\"></i>\n    </div>\n    <div class=\"modal-content\">\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\n    </div>\n  </div>\n</div>\n", styles: [":host .modal-backdrop{position:absolute;inset:0;z-index:calc(var(--devui-z-index-modal, 1050) - 1)}:host .modal-backdrop .modal{position:absolute;top:0;left:0;z-index:var(--devui-z-index-modal, 1050);background-color:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius-card, 6px);box-shadow:var(--devui-shadow-length-fullscreen-overlay, 0 10px 24px 0) var(--devui-shadow, rgba(37, 43, 58, .24));display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-header{flex:0 0 36px;border-bottom:1px solid var(--devui-dividing-line, #f2f2f3)}:host .modal-backdrop .modal .modal-header .modal-title{padding:12px 24px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700}:host .modal-backdrop .modal .modal-header i{position:absolute;top:12px;right:12px;padding:4px;font-size:var(--devui-font-size-card-title, 14px)}:host .modal-backdrop .modal .modal-header i:hover{cursor:pointer;color:var(--devui-danger, #f66f6a);background-color:var(--devui-info-bg, #e9edfa)}:host .modal-backdrop .modal .modal-content{flex:auto;padding:24px;display:flex;flex-flow:column;font-size:var(--devui-font-size, 12px);color:var(--devui-aide-text, #71757f)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rs-modal', template: "<div class=\"modal-backdrop\" [ngStyle]=\"resolveModalBackdropPosition()\">\n  <div #modal class=\"modal\">\n    <div class=\"modal-header\" (mousedown)=\"onMousedown($event)\">\n      <div class=\"modal-title\">{{title}}</div>\n      <i class=\"icon-close\" (click)=\"hide()\"></i>\n    </div>\n    <div class=\"modal-content\">\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\n    </div>\n  </div>\n</div>\n", styles: [":host .modal-backdrop{position:absolute;inset:0;z-index:calc(var(--devui-z-index-modal, 1050) - 1)}:host .modal-backdrop .modal{position:absolute;top:0;left:0;z-index:var(--devui-z-index-modal, 1050);background-color:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius-card, 6px);box-shadow:var(--devui-shadow-length-fullscreen-overlay, 0 10px 24px 0) var(--devui-shadow, rgba(37, 43, 58, .24));display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-header{flex:0 0 36px;border-bottom:1px solid var(--devui-dividing-line, #f2f2f3)}:host .modal-backdrop .modal .modal-header .modal-title{padding:12px 24px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700}:host .modal-backdrop .modal .modal-header i{position:absolute;top:12px;right:12px;padding:4px;font-size:var(--devui-font-size-card-title, 14px)}:host .modal-backdrop .modal .modal-header i:hover{cursor:pointer;color:var(--devui-danger, #f66f6a);background-color:var(--devui-info-bg, #e9edfa)}:host .modal-backdrop .modal .modal-content{flex:auto;padding:24px;display:flex;flex-flow:column;font-size:var(--devui-font-size, 12px);color:var(--devui-aide-text, #71757f)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { title: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], modalElementRef: [{
+                type: ViewChild,
+                args: ['modal', { static: true }]
+            }], contentTemplate: [{
+                type: Input
+            }], contentTemplateContext: [{
+                type: Input
+            }], onMouseup: [{
+                type: HostListener,
+                args: ['document:mouseup', ['$event']]
+            }], onMousemove: [{
+                type: HostListener,
+                args: ['document:mousemove', ['$event']]
+            }] } });
+
+class ModalModule {
+}
+ModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: ModalModule, declarations: [ModalComponent], imports: [CommonModule], exports: [ModalComponent] });
+ModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ModalModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ModalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ModalComponent
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        ModalComponent
+                    ]
+                }]
+        }] });
+
+class ModalService {
+    constructor() {
+    }
+    open(viewContainerRef, title, size = 'default', contentTemplate, contentTemplateContext) {
+        const modalRef = viewContainerRef.createComponent(ModalComponent);
+        modalRef.instance.hide = () => {
+            modalRef.hostView.destroy();
+        };
+        modalRef.instance.title = title;
+        modalRef.instance.contentTemplate = contentTemplate;
+        modalRef.instance.size = size;
+        modalRef.instance.contentTemplateContext = contentTemplateContext;
+        modalRef.instance.show();
+        return modalRef.instance;
+    }
+}
+ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ModalService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
 /*
  * Public API Surface of ngx-rs-ant
  */
@@ -339,5 +1089,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DataGridComponent, DataGridModule, ModalModule, ModalService };
+export { BoxContainerComponent, BoxContainerModule, DataGridComponent, DataGridModule, FormComponent, FormModule, ItemConfigComponent, ItemStyleComponent, ModalComponent, ModalModule, ModalService, PluginManager };
 //# sourceMappingURL=ngx-rs-ant.mjs.map