ngx-rs-ant 1.9.8 → 2.0.0

package/fesm2020/ngx-rs-ant.mjs

@@ -19,7 +19,6 @@ import CustomStore from 'devextreme/data/custom_store';
 import * as i2$2 from 'devextreme-angular/core';
 import * as i5 from 'devextreme-angular/ui/data-grid';
 import * as i6 from 'devextreme-angular/ui/nested';
-import * as i3$1 from 'devextreme-angular/ui/accordion';
 import * as i6$1 from 'devextreme-angular/ui/load-panel';
 import * as i7 from 'devextreme-angular/ui/text-box';
 import * as i8 from 'devextreme-angular/ui/validator';
@@ -51,10 +50,10 @@ class DividerLineComponent {
     }
 }
 DividerLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DividerLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DividerLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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(--coast-default-color, rgb(51, 122, 183))}\n"] });
+DividerLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DividerLineComponent, selector: "rs-divider-line", inputs: { direction: "direction", targetElement: "targetElement" }, host: { properties: { "style": "this._style" } }, ngImport: i0, template: "", styles: ["rs-divider:hover>:host{position:absolute;top:-5px;border:1px dashed var(--coast-default-color, rgb(51, 122, 183))}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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(--coast-default-color, rgb(51, 122, 183))}\n"] }]
+            args: [{ selector: 'rs-divider-line', template: "", styles: ["rs-divider:hover>:host{position:absolute;top:-5px;border:1px dashed var(--coast-default-color, rgb(51, 122, 183))}\n"] }]
         }], propDecorators: { direction: [{
                 type: Input
             }], targetElement: [{
@@ -93,10 +92,10 @@ class DividerComponent {
     }
 }
 DividerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DividerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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;flex-flow:row nowrap;justify-content:center;align-items:center;width:24px;height:24px;background-color:#fff;border-radius:12px;cursor:pointer}: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(--coast-default-color, rgb(51, 122, 183))}\n"], dependencies: [{ kind: "component", type: DividerLineComponent, selector: "rs-divider-line", inputs: ["direction", "targetElement"] }] });
+DividerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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;flex-flow:row nowrap;justify-content:center;align-items:center;width:24px;height:24px;background-color:#fff;border-radius:12px;pointer-events:all;cursor:pointer}: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(--coast-default-color, rgb(51, 122, 183))}\n"], dependencies: [{ kind: "component", type: DividerLineComponent, selector: "rs-divider-line", inputs: ["direction", "targetElement"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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;flex-flow:row nowrap;justify-content:center;align-items:center;width:24px;height:24px;background-color:#fff;border-radius:12px;cursor:pointer}: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(--coast-default-color, rgb(51, 122, 183))}\n"] }]
+            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;flex-flow:row nowrap;justify-content:center;align-items:center;width:24px;height:24px;background-color:#fff;border-radius:12px;pointer-events:all;cursor:pointer}: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(--coast-default-color, rgb(51, 122, 183))}\n"] }]
         }], propDecorators: { direction: [{
                 type: Input
             }], targetElement: [{
@@ -116,30 +115,6 @@ class PluginActiveComponent {
         this.showClose = true;
         this.showDivider = false;
         this.itemRemove = new EventEmitter();
-        this.targetRect = {
-            width: 0,
-            height: 0
-        };
-        this._targetRect = {};
-        this.width = 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: elementRect.width + 'px',
-            height: elementRect.height + 'px'
-        };
-    }
-    ngOnInit() {
-        setTimeout(() => {
-            this.targetRect = this._targetRect;
-        });
     }
     onItemCloseIconClick($event) {
         this.itemRemove.emit();
@@ -149,36 +124,20 @@ class PluginActiveComponent {
     }
 }
 PluginActiveComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PluginActiveComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PluginActiveComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PluginActiveComponent, selector: "rs-plugin-active", host: { properties: { "style": "this._style" } }, ngImport: i0, template: "<div class=\"active-item\">\r\n  <div class=\"active-bar\">\r\n    <i *ngIf=\"showClose && !showDivider\" class=\"coast-icon-drag\"></i>\r\n    <span>{{ name }}</span>\r\n    <i class=\"coast-icon-add-row\" title=\"\u6DFB\u52A0\u884C\" (click)=\"splitItem('column')\"></i>\r\n    <i class=\"coast-icon-add-column\" title=\"\u6DFB\u52A0\u5217\" (click)=\"splitItem('row')\"></i>\r\n    <i *ngIf=\"showClose\" class=\"coast-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</div>\r\n", styles: [":host{display:none;position:absolute;border:1px solid var(--coast-default-color, rgb(51, 122, 183));pointer-events:none}:host .active-item{width:100%;height:100%}:host .active-item .active-bar{padding:2px 4px;color:#fff;background-color:var(--coast-default-color, rgb(51, 122, 183));position:absolute;top:-23px;right:-1px;display:flex;flex-flow:row nowrap;align-items:center;pointer-events:all;white-space:nowrap}:host .active-item .active-bar i{flex:none;cursor:pointer}:host .active-item .active-bar i:not(:last-child){margin-right:8px}:host .active-item .active-bar i.coast-icon-drag{cursor:move}:host .active-item .active-bar i.coast-icon-close:hover{color:var(--coast-danger-color, rgb(217, 83, 79))}:host .active-item .active-bar span{flex:1;margin-right:8px}.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"] }] });
+PluginActiveComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PluginActiveComponent, selector: "rs-plugin-active", ngImport: i0, template: "<div class=\"active-item\">\r\n  <div class=\"active-bar\">\r\n    <i *ngIf=\"showClose && !showDivider\" class=\"coast-icon-drag\"></i>\r\n    <span>{{ name }}</span>\r\n    <i class=\"coast-icon-add-row\" title=\"\u6DFB\u52A0\u884C\" (click)=\"splitItem('column')\"></i>\r\n    <i class=\"coast-icon-add-column\" title=\"\u6DFB\u52A0\u5217\" (click)=\"splitItem('row')\"></i>\r\n    <i *ngIf=\"showClose\" class=\"coast-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</div>\r\n", styles: [":host{display:none;position:absolute;inset:0;border:1px solid var(--coast-default-color, rgb(51, 122, 183));pointer-events:none}:host .active-item{width:100%;height:100%}:host .active-item .active-bar{padding:2px 4px;color:#fff;background-color:var(--coast-default-color, rgb(51, 122, 183));position:absolute;top:-21px;right:-1px;display:flex;flex-flow:row nowrap;align-items:center;pointer-events:all;white-space:nowrap}:host .active-item .active-bar i{flex:none;cursor:pointer}:host .active-item .active-bar i:not(:last-child){margin-right:8px}:host .active-item .active-bar i.coast-icon-drag{cursor:move}:host .active-item .active-bar i.coast-icon-close:hover{color:var(--coast-danger-color, rgb(217, 83, 79))}:host .active-item .active-bar span{flex:1;margin-right:8px}.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.10", ngImport: i0, type: PluginActiveComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-plugin-active', template: "<div class=\"active-item\">\r\n  <div class=\"active-bar\">\r\n    <i *ngIf=\"showClose && !showDivider\" class=\"coast-icon-drag\"></i>\r\n    <span>{{ name }}</span>\r\n    <i class=\"coast-icon-add-row\" title=\"\u6DFB\u52A0\u884C\" (click)=\"splitItem('column')\"></i>\r\n    <i class=\"coast-icon-add-column\" title=\"\u6DFB\u52A0\u5217\" (click)=\"splitItem('row')\"></i>\r\n    <i *ngIf=\"showClose\" class=\"coast-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</div>\r\n", styles: [":host{display:none;position:absolute;border:1px solid var(--coast-default-color, rgb(51, 122, 183));pointer-events:none}:host .active-item{width:100%;height:100%}:host .active-item .active-bar{padding:2px 4px;color:#fff;background-color:var(--coast-default-color, rgb(51, 122, 183));position:absolute;top:-23px;right:-1px;display:flex;flex-flow:row nowrap;align-items:center;pointer-events:all;white-space:nowrap}:host .active-item .active-bar i{flex:none;cursor:pointer}:host .active-item .active-bar i:not(:last-child){margin-right:8px}:host .active-item .active-bar i.coast-icon-drag{cursor:move}:host .active-item .active-bar i.coast-icon-close:hover{color:var(--coast-danger-color, rgb(217, 83, 79))}:host .active-item .active-bar span{flex:1;margin-right:8px}.plugin-active>:host{display:block}\n"] }]
-        }], propDecorators: { _style: [{
-                type: HostBinding,
-                args: ['style']
-            }] } });
+            args: [{ selector: 'rs-plugin-active', template: "<div class=\"active-item\">\r\n  <div class=\"active-bar\">\r\n    <i *ngIf=\"showClose && !showDivider\" class=\"coast-icon-drag\"></i>\r\n    <span>{{ name }}</span>\r\n    <i class=\"coast-icon-add-row\" title=\"\u6DFB\u52A0\u884C\" (click)=\"splitItem('column')\"></i>\r\n    <i class=\"coast-icon-add-column\" title=\"\u6DFB\u52A0\u5217\" (click)=\"splitItem('row')\"></i>\r\n    <i *ngIf=\"showClose\" class=\"coast-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</div>\r\n", styles: [":host{display:none;position:absolute;inset:0;border:1px solid var(--coast-default-color, rgb(51, 122, 183));pointer-events:none}:host .active-item{width:100%;height:100%}:host .active-item .active-bar{padding:2px 4px;color:#fff;background-color:var(--coast-default-color, rgb(51, 122, 183));position:absolute;top:-21px;right:-1px;display:flex;flex-flow:row nowrap;align-items:center;pointer-events:all;white-space:nowrap}:host .active-item .active-bar i{flex:none;cursor:pointer}:host .active-item .active-bar i:not(:last-child){margin-right:8px}:host .active-item .active-bar i.coast-icon-drag{cursor:move}:host .active-item .active-bar i.coast-icon-close:hover{color:var(--coast-danger-color, rgb(217, 83, 79))}:host .active-item .active-bar span{flex:1;margin-right:8px}.plugin-active>:host{display:block}\n"] }]
+        }] });
 
 class PluginHoverComponent {
-    get _style() {
-        if (!this.targetElement) {
-            return {};
-        }
-        const elementRect = this.targetElement.getBoundingClientRect();
-        return {
-            width: elementRect.width + 'px',
-            height: elementRect.height + 'px'
-        };
-    }
 }
 PluginHoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PluginHoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PluginHoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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(--coast-default-color, rgb(51, 122, 183));pointer-events:none}:host .hover-title{color:var(--coast-default-color, rgb(51, 122, 183));position:absolute;top:-18px;left:0}.plugin-active>:host{display:none!important}.plugin-hover>:host{display:block}\n"] });
+PluginHoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PluginHoverComponent, selector: "rs-plugin-hover", ngImport: i0, template: "<div class=\"hover-title\">{{ name }}</div>\n", styles: [":host{display:none;position:absolute;inset:0;border:1px dashed var(--coast-default-color, rgb(51, 122, 183));pointer-events:none}:host .hover-title{color:var(--coast-default-color, rgb(51, 122, 183));position:absolute;top:-17px;left:-1px}.plugin-active>:host{display:none!important}.plugin-hover>:host{display:block}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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(--coast-default-color, rgb(51, 122, 183));pointer-events:none}:host .hover-title{color:var(--coast-default-color, rgb(51, 122, 183));position:absolute;top:-18px;left:0}.plugin-active>:host{display:none!important}.plugin-hover>:host{display:block}\n"] }]
-        }], propDecorators: { _style: [{
-                type: HostBinding,
-                args: ['style']
-            }] } });
+            args: [{ selector: 'rs-plugin-hover', template: "<div class=\"hover-title\">{{ name }}</div>\n", styles: [":host{display:none;position:absolute;inset:0;border:1px dashed var(--coast-default-color, rgb(51, 122, 183));pointer-events:none}:host .hover-title{color:var(--coast-default-color, rgb(51, 122, 183));position:absolute;top:-17px;left:-1px}.plugin-active>:host{display:none!important}.plugin-hover>:host{display:block}\n"] }]
+        }] });
 
 class PluginNotFoundComponent {
 }
@@ -2392,26 +2351,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
 
-class DataDetailService {
-    constructor(http) {
-        this.http = http;
+class DrawerComponent {
+    constructor() {
+        this.size = 'default';
+        this._width = '480px';
     }
-    getInstanceSections(tenant, className, oid) {
-        return this.http.get('api/data/custom', {
-            params: {
-                tenant,
-                className,
-                oid,
-                executor: 'com.cs.system.section.GetInstanceSections'
-            }
-        });
+    ngOnInit() {
+        if (this.size === 'default') {
+            this._width = '480px';
+        }
+        else if (this.size === 'large') {
+            this._width = '960px';
+        }
+        else {
+            this._width = this.size;
+        }
+    }
+    hide($event) {
+        // 在service中重写
+    }
+    stopPropagation($event) {
+        $event.stopPropagation();
+    }
+    autoHide($event) {
+        if (this.config?.hideOnOutsideClick) {
+            this.hide();
+        }
     }
 }
-DataDetailService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataDetailService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-DataDetailService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataDetailService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataDetailService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
+DrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DrawerComponent, selector: "rs-drawer", host: { listeners: { "click": "stopPropagation($event)", "window:click": "autoHide($event)" } }, ngImport: i0, template: "<div class=\"drawer\" [class.hide-on-outside-click]=\"config?.hideOnOutsideClick\" [ngStyle]=\"{width: _width}\">\n  <div *ngIf=\"headerTemplate\" class=\"drawer-header\">\n    <ng-template [ngTemplateOutlet]=\"headerTemplate\"\n                 [ngTemplateOutletContext]=\"{$implicit: headerTemplateContext}\"></ng-template>\n  </div>\n  <div class=\"drawer-content\">\n    <ng-template [ngTemplateOutlet]=\"contentTemplate\"\n                 [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\n  </div>\n  <div class=\"drawer-close\">\n    <dx-button height=\"80px\" icon=\"coast-icon coast-icon-arrow-right-filling\" (onClick)=\"hide($event)\"></dx-button>\n  </div>\n</div>\n", styles: [":host .drawer{position:absolute;top:0;right:0;bottom:0;height:100%;z-index:var(--coast-z-index-framework, 1000);background-color:var(--coast-base-bg-color, rgb(255, 255, 255));border-left:1px solid var(--coast-border-color, rgb(221, 221, 221));box-shadow:-8px 0 4px -4px #252b3a3d;display:flex;flex-flow:column nowrap}:host .drawer.hide-on-outside-click{z-index:var(--coast-z-index-drawer, 2000)}:host .drawer .drawer-header{flex:0 0 36px;padding:8px;border-bottom:1px solid var(--coast-border-color, rgb(221, 221, 221));display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-end}:host .drawer .drawer-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .drawer .drawer-close{position:absolute;height:100%;width:20px;top:0;left:-20px;display:flex;flex-flow:row nowrap;align-items:center}:host .drawer .drawer-close dx-button{box-shadow:-8px 0 4px -4px #252b3a3d}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rs-drawer', template: "<div class=\"drawer\" [class.hide-on-outside-click]=\"config?.hideOnOutsideClick\" [ngStyle]=\"{width: _width}\">\n  <div *ngIf=\"headerTemplate\" class=\"drawer-header\">\n    <ng-template [ngTemplateOutlet]=\"headerTemplate\"\n                 [ngTemplateOutletContext]=\"{$implicit: headerTemplateContext}\"></ng-template>\n  </div>\n  <div class=\"drawer-content\">\n    <ng-template [ngTemplateOutlet]=\"contentTemplate\"\n                 [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\n  </div>\n  <div class=\"drawer-close\">\n    <dx-button height=\"80px\" icon=\"coast-icon coast-icon-arrow-right-filling\" (onClick)=\"hide($event)\"></dx-button>\n  </div>\n</div>\n", styles: [":host .drawer{position:absolute;top:0;right:0;bottom:0;height:100%;z-index:var(--coast-z-index-framework, 1000);background-color:var(--coast-base-bg-color, rgb(255, 255, 255));border-left:1px solid var(--coast-border-color, rgb(221, 221, 221));box-shadow:-8px 0 4px -4px #252b3a3d;display:flex;flex-flow:column nowrap}:host .drawer.hide-on-outside-click{z-index:var(--coast-z-index-drawer, 2000)}:host .drawer .drawer-header{flex:0 0 36px;padding:8px;border-bottom:1px solid var(--coast-border-color, rgb(221, 221, 221));display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-end}:host .drawer .drawer-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .drawer .drawer-close{position:absolute;height:100%;width:20px;top:0;left:-20px;display:flex;flex-flow:row nowrap;align-items:center}:host .drawer .drawer-close dx-button{box-shadow:-8px 0 4px -4px #252b3a3d}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { stopPropagation: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], autoHide: [{
+                type: HostListener,
+                args: ['window:click', ['$event']]
+            }] } });
+
+class DrawerService {
+    open(viewContainerRef, size = 'default', contentTemplate, contentTemplateContext, headerTemplate, headerTemplateContext, config) {
+        // 若已存在抽屉，先关闭
+        const drawers = viewContainerRef.element.nativeElement.parentElement.querySelectorAll('RS-DRAWER');
+        for (let i = 0; i < drawers.length; i++) {
+            drawers[i].querySelector('.drawer-close .coast-icon-arrow-right-filling').click();
+        }
+        const drawerRef = viewContainerRef.createComponent(DrawerComponent);
+        drawerRef.instance.hide = ($event) => {
+            $event?.event?.stopPropagation();
+            drawerRef.hostView.destroy();
+        };
+        drawerRef.instance.size = size;
+        drawerRef.instance.headerTemplate = headerTemplate;
+        drawerRef.instance.headerTemplateContext = headerTemplateContext;
+        drawerRef.instance.contentTemplate = contentTemplate;
+        drawerRef.instance.contentTemplateContext = contentTemplateContext;
+        drawerRef.instance.config = config || {
+            hideOnOutsideClick: true
+        };
+        return drawerRef.instance;
+    }
+}
+DrawerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DrawerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
 
 class FormService {
     constructor(http) {
@@ -2648,105 +2659,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }] } });
 
-class DataDetailComponent {
-    constructor(viewContainerRef, service) {
-        this.viewContainerRef = viewContainerRef;
-        this.service = service;
-        this.sections = [];
-        this.loading = false;
-    }
-    ngOnInit() {
-        this.loading = true;
-        this.service.getInstanceSections(this.tenant, this.className, this.oid).subscribe(response => {
-            window.coast.tabManager.setTitle.next({
-                id: 'detail:' + this.tenant + '_' + this.className + '_' + this.oid,
-                title: response.data.title
-            });
-            this.sections = response.data.list;
-            this.loading = false;
-        });
-    }
-}
-DataDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataDetailComponent, deps: [{ token: i0.ViewContainerRef }, { token: DataDetailService }], target: i0.ɵɵFactoryTarget.Component });
-DataDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DataDetailComponent, selector: "coast-data-detail", providers: [DataDetailService], ngImport: i0, template: "<dx-load-panel [container]=\"viewContainerRef.element.nativeElement\" [showPane]=\"false\"\n               [visible]=\"loading\">\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\n</dx-load-panel>\n<div *ngIf=\"!loading && sections.length === 0\" class=\"empty\">\n  <span>\u60A8\u65E0\u6743\u67E5\u770B\u8BE5\u6570\u636E\u5B9E\u4F8B\u4EFB\u4F55\u4FE1\u606F</span>\n</div>\n<ng-container *ngIf=\"sections.length > 0\">\n  <dx-accordion [collapsible]=\"true\" [multiple]=\"true\" [deferRendering]=\"false\" [dataSource]=\"sections\"\n                [selectedItems]=\"sections\" [focusStateEnabled]=\"false\">\n    <div *dxTemplate=\"let section of 'title'\" class=\"section-title\">\n      <div class=\"section-title-name\">{{ section.name }}</div>\n    </div>\n    <div *dxTemplate=\"let section of 'item'\">\n      <rs-form [tenant]=\"tenant\" [className]=\"className\" [oid]=\"oid\" [template]=\"section.formTemplate\" [params]=\"params\"\n               [tabViewContainerRef]=\"tabViewContainerRef\" [readonly]=\"true\"></rs-form>\n    </div>\n  </dx-accordion>\n</ng-container>\n", styles: [":host{flex:1;display:flex;flex-flow:column nowrap}:host div.empty{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div.empty span{text-align:center;-webkit-user-select:none;user-select:none}:host .section-title{border-bottom:1px solid var(--coast-border-color, rgb(221, 221, 221))}:host .section-title .section-title-name{height:24px;font-size:14px;font-weight:700;padding:4px 8px;display:flex;flex-flow:column nowrap;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.DxAccordionComponent, selector: "dx-accordion", inputs: ["accessKey", "activeStateEnabled", "animationDuration", "collapsible", "dataSource", "deferRendering", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "itemHoldTimeout", "items", "itemTemplate", "itemTitleTemplate", "keyExpr", "multiple", "noDataText", "repaintChangesOnly", "rtlEnabled", "selectedIndex", "selectedItem", "selectedItemKeys", "selectedItems", "tabIndex", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onItemClick", "onItemContextMenu", "onItemHold", "onItemRendered", "onItemTitleClick", "onOptionChanged", "onSelectionChanged", "accessKeyChange", "activeStateEnabledChange", "animationDurationChange", "collapsibleChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "itemHoldTimeoutChange", "itemsChange", "itemTemplateChange", "itemTitleTemplateChange", "keyExprChange", "multipleChange", "noDataTextChange", "repaintChangesOnlyChange", "rtlEnabledChange", "selectedIndexChange", "selectedItemChange", "selectedItemKeysChange", "selectedItemsChange", "tabIndexChange", "visibleChange", "widthChange"] }, { kind: "directive", type: i2$2.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i6.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }, { kind: "component", type: i6$1.DxLoadPanelComponent, selector: "dx-load-panel", inputs: ["animation", "closeOnOutsideClick", "container", "copyRootClassesToWrapper", "deferRendering", "delay", "elementAttr", "focusStateEnabled", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "indicatorSrc", "maxHeight", "maxWidth", "message", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showIndicator", "showPane", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "delayChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "indicatorSrcChange", "maxHeightChange", "maxWidthChange", "messageChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showIndicatorChange", "showPaneChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: FormComponent, selector: "rs-form", inputs: ["tenant", "className", "oid", "copyOid", "template", "extraAttrMap", "params", "tabViewContainerRef", "onlyFrontEnd", "model", "readonly"], outputs: ["onDataLoaded", "submitCallback"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataDetailComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'coast-data-detail', providers: [DataDetailService], template: "<dx-load-panel [container]=\"viewContainerRef.element.nativeElement\" [showPane]=\"false\"\n               [visible]=\"loading\">\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\n</dx-load-panel>\n<div *ngIf=\"!loading && sections.length === 0\" class=\"empty\">\n  <span>\u60A8\u65E0\u6743\u67E5\u770B\u8BE5\u6570\u636E\u5B9E\u4F8B\u4EFB\u4F55\u4FE1\u606F</span>\n</div>\n<ng-container *ngIf=\"sections.length > 0\">\n  <dx-accordion [collapsible]=\"true\" [multiple]=\"true\" [deferRendering]=\"false\" [dataSource]=\"sections\"\n                [selectedItems]=\"sections\" [focusStateEnabled]=\"false\">\n    <div *dxTemplate=\"let section of 'title'\" class=\"section-title\">\n      <div class=\"section-title-name\">{{ section.name }}</div>\n    </div>\n    <div *dxTemplate=\"let section of 'item'\">\n      <rs-form [tenant]=\"tenant\" [className]=\"className\" [oid]=\"oid\" [template]=\"section.formTemplate\" [params]=\"params\"\n               [tabViewContainerRef]=\"tabViewContainerRef\" [readonly]=\"true\"></rs-form>\n    </div>\n  </dx-accordion>\n</ng-container>\n", styles: [":host{flex:1;display:flex;flex-flow:column nowrap}:host div.empty{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div.empty span{text-align:center;-webkit-user-select:none;user-select:none}:host .section-title{border-bottom:1px solid var(--coast-border-color, rgb(221, 221, 221))}:host .section-title .section-title-name{height:24px;font-size:14px;font-weight:700;padding:4px 8px;display:flex;flex-flow:column nowrap;justify-content:center}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: DataDetailService }]; } });
-
-class DrawerComponent {
-    constructor() {
-        this.size = 'default';
-        this._width = '480px';
-    }
-    ngOnInit() {
-        if (this.size === 'default') {
-            this._width = '480px';
-        }
-        else if (this.size === 'large') {
-            this._width = '960px';
-        }
-        else {
-            this._width = this.size;
-        }
-    }
-    hide($event) {
-        // 在service中重写
-    }
-    stopPropagation($event) {
-        $event.stopPropagation();
-    }
-    autoHide($event) {
-        if (this.config?.hideOnOutsideClick) {
-            this.hide();
-        }
-    }
-}
-DrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DrawerComponent, selector: "rs-drawer", host: { listeners: { "click": "stopPropagation($event)", "window:click": "autoHide($event)" } }, ngImport: i0, template: "<div class=\"drawer\" [class.hide-on-outside-click]=\"config?.hideOnOutsideClick\" [ngStyle]=\"{width: _width}\">\n  <div *ngIf=\"headerTemplate\" class=\"drawer-header\">\n    <ng-template [ngTemplateOutlet]=\"headerTemplate\"\n                 [ngTemplateOutletContext]=\"{$implicit: headerTemplateContext}\"></ng-template>\n  </div>\n  <div class=\"drawer-content\">\n    <ng-template [ngTemplateOutlet]=\"contentTemplate\"\n                 [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\n  </div>\n  <div class=\"drawer-close\">\n    <dx-button height=\"80px\" icon=\"coast-icon coast-icon-arrow-right-filling\" (onClick)=\"hide($event)\"></dx-button>\n  </div>\n</div>\n", styles: [":host .drawer{position:absolute;top:0;right:0;bottom:0;height:100%;z-index:var(--coast-z-index-framework, 1000);background-color:var(--coast-base-bg-color, rgb(255, 255, 255));border-left:1px solid var(--coast-border-color, rgb(221, 221, 221));box-shadow:-8px 0 4px -4px #252b3a3d;display:flex;flex-flow:column nowrap}:host .drawer.hide-on-outside-click{z-index:var(--coast-z-index-drawer, 2000)}:host .drawer .drawer-header{flex:0 0 36px;padding:8px;border-bottom:1px solid var(--coast-border-color, rgb(221, 221, 221));display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-end}:host .drawer .drawer-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .drawer .drawer-close{position:absolute;height:100%;width:20px;top:0;left:-20px;display:flex;flex-flow:row nowrap;align-items:center}:host .drawer .drawer-close dx-button{box-shadow:-8px 0 4px -4px #252b3a3d}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rs-drawer', template: "<div class=\"drawer\" [class.hide-on-outside-click]=\"config?.hideOnOutsideClick\" [ngStyle]=\"{width: _width}\">\n  <div *ngIf=\"headerTemplate\" class=\"drawer-header\">\n    <ng-template [ngTemplateOutlet]=\"headerTemplate\"\n                 [ngTemplateOutletContext]=\"{$implicit: headerTemplateContext}\"></ng-template>\n  </div>\n  <div class=\"drawer-content\">\n    <ng-template [ngTemplateOutlet]=\"contentTemplate\"\n                 [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\n  </div>\n  <div class=\"drawer-close\">\n    <dx-button height=\"80px\" icon=\"coast-icon coast-icon-arrow-right-filling\" (onClick)=\"hide($event)\"></dx-button>\n  </div>\n</div>\n", styles: [":host .drawer{position:absolute;top:0;right:0;bottom:0;height:100%;z-index:var(--coast-z-index-framework, 1000);background-color:var(--coast-base-bg-color, rgb(255, 255, 255));border-left:1px solid var(--coast-border-color, rgb(221, 221, 221));box-shadow:-8px 0 4px -4px #252b3a3d;display:flex;flex-flow:column nowrap}:host .drawer.hide-on-outside-click{z-index:var(--coast-z-index-drawer, 2000)}:host .drawer .drawer-header{flex:0 0 36px;padding:8px;border-bottom:1px solid var(--coast-border-color, rgb(221, 221, 221));display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-end}:host .drawer .drawer-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .drawer .drawer-close{position:absolute;height:100%;width:20px;top:0;left:-20px;display:flex;flex-flow:row nowrap;align-items:center}:host .drawer .drawer-close dx-button{box-shadow:-8px 0 4px -4px #252b3a3d}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { stopPropagation: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], autoHide: [{
-                type: HostListener,
-                args: ['window:click', ['$event']]
-            }] } });
-
-class DrawerService {
-    open(viewContainerRef, size = 'default', contentTemplate, contentTemplateContext, headerTemplate, headerTemplateContext, config) {
-        // 若已存在抽屉，先关闭
-        const drawers = viewContainerRef.element.nativeElement.parentElement.querySelectorAll('RS-DRAWER');
-        for (let i = 0; i < drawers.length; i++) {
-            drawers[i].querySelector('.drawer-close .coast-icon-arrow-right-filling').click();
-        }
-        const drawerRef = viewContainerRef.createComponent(DrawerComponent);
-        drawerRef.instance.hide = ($event) => {
-            $event?.event?.stopPropagation();
-            drawerRef.hostView.destroy();
-        };
-        drawerRef.instance.size = size;
-        drawerRef.instance.headerTemplate = headerTemplate;
-        drawerRef.instance.headerTemplateContext = headerTemplateContext;
-        drawerRef.instance.contentTemplate = contentTemplate;
-        drawerRef.instance.contentTemplateContext = contentTemplateContext;
-        drawerRef.instance.config = config || {
-            hideOnOutsideClick: true
-        };
-        return drawerRef.instance;
-    }
-}
-DrawerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DrawerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
 class InstanceLinkTemplateComponent {
     constructor(drawerService) {
         this.drawerService = drawerService;
@@ -2762,7 +2674,7 @@ class InstanceLinkTemplateComponent {
             type: 'detail',
             id: 'detail:' + this.tenant + '_' + this.className + '_' + this.oid,
             title: '',
-            component: DataDetailComponent,
+            component: 'coast-dynamic-data-detail',
             config: {
                 tenant: this.tenant,
                 className: this.className,
@@ -3199,32 +3111,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }] });
 
-class DataDetailModule {
-}
-DataDetailModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataDetailModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DataDetailModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DataDetailModule, declarations: [DataDetailComponent], imports: [CommonModule,
-        DevExtremeModule,
-        FormModule], exports: [DataDetailComponent] });
-DataDetailModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataDetailModule, imports: [CommonModule,
-        DevExtremeModule,
-        FormModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataDetailModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        DataDetailComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        DevExtremeModule,
-                        FormModule
-                    ],
-                    exports: [
-                        DataDetailComponent
-                    ]
-                }]
-        }] });
-
 class DrawerModule {
 }
 DrawerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -3960,5 +3846,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BoxContainerComponent, BoxContainerModule, CamundaBpmnEditorComponent, CamundaBpmnEditorModule, CamundaBpmnViewerComponent, CamundaBpmnViewerModule, CellComponentBase, CellConfigBase, ChangeFilter, CodeEditorComponent, CodeEditorModule, CustomTemplateDirective, DataDetailComponent, DataDetailModule, DataGridComponent, DataGridFactory, DataGridModule, DataGridService, DrawerComponent, DrawerModule, DrawerService, DynamicParamsComponent, DynamicParamsModule, FieldSelectorComponent, FormComponent, FormItemComponentBase, FormItemConfigBase, FormModule, FormService, FullscreenDirective, IconSelectorComponent, IconSelectorModule, ItemConfigComponent, ItemStyleComponent, ModalComponent, ModalComponentBase, ModalConfigBase, ModalModule, ModalService, PageItemComponentBase, PageItemConfigBase, PdfViewerComponent, PluginManager, RowButtonsTemplateDirective, TooltipContentTemplateDirective, WebsocketModule, WebsocketService, download_file, file_type_icon, filename_from_disposition, format_date, format_datetime, format_file_size, localeSortMethod, notify_error, notify_success, notify_warning, support_preview_ext, validate, validate_group, validate_group_by_name };
+export { BoxContainerComponent, BoxContainerModule, CamundaBpmnEditorComponent, CamundaBpmnEditorModule, CamundaBpmnViewerComponent, CamundaBpmnViewerModule, CellComponentBase, CellConfigBase, ChangeFilter, CodeEditorComponent, CodeEditorModule, CustomTemplateDirective, DataGridComponent, DataGridFactory, DataGridModule, DataGridService, DrawerComponent, DrawerModule, DrawerService, DynamicParamsComponent, DynamicParamsModule, FieldSelectorComponent, FormComponent, FormItemComponentBase, FormItemConfigBase, FormModule, FormService, FullscreenDirective, IconSelectorComponent, IconSelectorModule, ItemConfigComponent, ItemStyleComponent, ModalComponent, ModalComponentBase, ModalConfigBase, ModalModule, ModalService, PageItemComponentBase, PageItemConfigBase, PdfViewerComponent, PluginManager, RowButtonsTemplateDirective, TooltipContentTemplateDirective, WebsocketModule, WebsocketService, download_file, file_type_icon, filename_from_disposition, format_date, format_datetime, format_file_size, localeSortMethod, notify_error, notify_success, notify_warning, support_preview_ext, validate, validate_group, validate_group_by_name };
 //# sourceMappingURL=ngx-rs-ant.mjs.map