ngx-rs-ant 1.4.8 → 1.5.1

package/fesm2015/ngx-rs-ant.mjs

@@ -6,7 +6,7 @@ import { CommonModule, formatDate } from '@angular/common';
 import { Subject, ReplaySubject, Subscription, map, shareReplay, lastValueFrom, debounceTime, interval } from 'rxjs';
 import * as i2 from 'devextreme-angular/ui/number-box';
 import * as i2$1 from 'devextreme-angular/ui/draggable';
-import { DevExtremeModule, DxLoadPanelModule, DxDataGridComponent, DxValidationGroupComponent } from 'devextreme-angular';
+import { DevExtremeModule, DxLoadPanelModule, DxValidationGroupComponent, DxDataGridComponent } from 'devextreme-angular';
 import BpmnModeler from 'camunda-bpmn-js/lib/camunda-platform/Modeler';
 import { is } from 'bpmn-js/lib/util/ModelUtil';
 import { TextAreaEntry, isTextAreaEntryEdited, SelectEntry, isSelectEntryEdited } from '@bpmn-io/properties-panel';
@@ -15,12 +15,12 @@ import * as i6$1 from 'devextreme-angular/ui/nested';
 import { DxoPositionModule } from 'devextreme-angular/ui/nested';
 import * as i4 from 'devextreme-angular/ui/button';
 import * as i1$1 from '@angular/common/http';
+import { __awaiter } from 'tslib';
+import notify from 'devextreme/ui/notify';
 import CustomStore from 'devextreme/data/custom_store';
 import * as i3 from 'devextreme-angular/core';
 import * as i5$1 from 'devextreme-angular/ui/data-grid';
 import * as i5 from 'devextreme-angular/ui/tooltip';
-import { __awaiter } from 'tslib';
-import notify from 'devextreme/ui/notify';
 import * as i2$2 from '@angular/platform-browser';
 import * as i3$1 from 'devextreme-angular/ui/accordion';
 import * as i7 from 'devextreme-angular/ui/validation-group';
@@ -91,10 +91,10 @@ class DividerComponent {
     }
 }
 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>\r\n<rs-divider-line [targetElement]=\"targetElement\" [direction]=\"direction\"></rs-divider-line>\r\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;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"] }] });
+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;flex-flow:row nowrap;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>\r\n<rs-divider-line [targetElement]=\"targetElement\" [direction]=\"direction\"></rs-divider-line>\r\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;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"] }]
+            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;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: [{
@@ -173,10 +173,10 @@ class PluginHoverComponent {
     }
 }
 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>\r\n", styles: [":host{display:none;position:absolute;border:1px dashed var(--coast-default-color, #337ab7);pointer-events:none}:host .hover-title{color:var(--coast-default-color, #337ab7);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.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(--coast-default-color, #337ab7);pointer-events:none}:host .hover-title{color:var(--coast-default-color, #337ab7);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>\r\n", styles: [":host{display:none;position:absolute;border:1px dashed var(--coast-default-color, #337ab7);pointer-events:none}:host .hover-title{color:var(--coast-default-color, #337ab7);position:absolute;top:-18px;left:0}.plugin-active>:host{display:none!important}.plugin-hover>:host{display:block}\n"] }]
+            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, #337ab7);pointer-events:none}:host .hover-title{color:var(--coast-default-color, #337ab7);position:absolute;top:-18px;left:0}.plugin-active>:host{display:none!important}.plugin-hover>:host{display:block}\n"] }]
         }], propDecorators: { _style: [{
                 type: HostBinding,
                 args: ['style']
@@ -185,19 +185,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
 class PluginNotFoundComponent {
 }
 PluginNotFoundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PluginNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PluginNotFoundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: PluginNotFoundComponent, selector: "rs-plugin-not-found", ngImport: i0, template: "<div>\r\n  <span>\u7EC4\u4EF6\u52A0\u8F7D\u5931\u8D25</span>\r\n</div>\r\n", styles: [":host{flex:1;margin:16px;border:1px solid var(--devui-dividing-line, #f2f2f3);display:flex;flex-flow:row nowrap;justify-content:center;pointer-events:all}:host div{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{color:var(--devui-danger, #f66f6a);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"] });
+PluginNotFoundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: PluginNotFoundComponent, selector: "rs-plugin-not-found", ngImport: i0, template: "<div>\n  <span>\u7EC4\u4EF6\u52A0\u8F7D\u5931\u8D25</span>\n</div>\n", styles: [":host{flex:1;margin:16px;border:1px solid var(--devui-dividing-line, #f2f2f3);display:flex;flex-flow:row nowrap;justify-content:center;pointer-events:all}:host div{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{color:var(--devui-danger, #f66f6a);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"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PluginNotFoundComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-plugin-not-found', template: "<div>\r\n  <span>\u7EC4\u4EF6\u52A0\u8F7D\u5931\u8D25</span>\r\n</div>\r\n", styles: [":host{flex:1;margin:16px;border:1px solid var(--devui-dividing-line, #f2f2f3);display:flex;flex-flow:row nowrap;justify-content:center;pointer-events:all}:host div{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{color:var(--devui-danger, #f66f6a);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"] }]
+            args: [{ selector: 'rs-plugin-not-found', template: "<div>\n  <span>\u7EC4\u4EF6\u52A0\u8F7D\u5931\u8D25</span>\n</div>\n", styles: [":host{flex:1;margin:16px;border:1px solid var(--devui-dividing-line, #f2f2f3);display:flex;flex-flow:row nowrap;justify-content:center;pointer-events:all}:host div{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{color:var(--devui-danger, #f66f6a);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"] }]
         }] });
 
 class ConfigBlankComponent {
 }
 ConfigBlankComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ConfigBlankComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ConfigBlankComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ConfigBlankComponent, selector: "rs-config-blank", ngImport: i0, template: "<div>\r\n  <span>\u65E0\u914D\u7F6E\u9879</span>\r\n</div>\r\n", styles: [":host{height:80px;margin:8px;display:flex;flex-flow:row nowrap;justify-content:center}:host div{flex:1;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}\n"] });
+ConfigBlankComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ConfigBlankComponent, selector: "rs-config-blank", ngImport: i0, template: "<div>\n  <span>\u65E0\u914D\u7F6E\u9879</span>\n</div>\n", styles: [":host{height:80px;margin:8px;display:flex;flex-flow:row nowrap;justify-content:center}:host div{flex:1;display:flex;flex-flow:row nowrap;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: ConfigBlankComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-config-blank', template: "<div>\r\n  <span>\u65E0\u914D\u7F6E\u9879</span>\r\n</div>\r\n", styles: [":host{height:80px;margin:8px;display:flex;flex-flow:row nowrap;justify-content:center}:host div{flex:1;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}\n"] }]
+            args: [{ selector: 'rs-config-blank', template: "<div>\n  <span>\u65E0\u914D\u7F6E\u9879</span>\n</div>\n", styles: [":host{height:80px;margin:8px;display:flex;flex-flow:row nowrap;justify-content:center}:host div{flex:1;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}\n"] }]
         }] });
 
 class StyleComponent {
@@ -238,19 +238,19 @@ class StyleComponent {
     }
 }
 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\">\r\n  <div class=\"item-title\">\u5BBD\u5EA6\u7C7B\u578B</div>\r\n  <div class=\"item-setting\">\r\n    <div class=\"card-style-radio\">\r\n      <div class=\"radio-value\" [ngClass]=\"!style.width || style.width === 'auto' ? 'active' : ''\"\r\n           (click)=\"select('width','auto')\">\r\n        <span>\u81EA\u9002\u5E94</span>\r\n      </div>\r\n      <div class=\"radio-value\" [ngClass]=\"style.width && style.width !== 'auto' ? 'active' : ''\"\r\n           (click)=\"select('width',240)\">\r\n        <span>\u56FA\u5B9A\u503C</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"config-item\">\r\n  <div class=\"item-title\">\u56FA\u5B9A\u5BBD\u5EA6</div>\r\n  <div class=\"item-setting\">\r\n    <dx-number-box [min]=\"0\"\r\n                   [showSpinButtons]=\"true\"\r\n                   [showClearButton]=\"true\"\r\n                   [(value)]=\"width\"\r\n                   (onValueChanged)=\"typing('width', $event.value)\"\r\n                   [readOnly]=\"style.width === 'auto'\">\r\n    </dx-number-box>\r\n  </div>\r\n</div>\r\n<div class=\"config-item\">\r\n  <div class=\"item-title\">\u9AD8\u5EA6\u7C7B\u578B</div>\r\n  <div class=\"item-setting\">\r\n    <div class=\"card-style-radio\">\r\n      <div class=\"radio-value\" [ngClass]=\"!style.height || style.height === 'auto' ? 'active' : ''\"\r\n           (click)=\"select('height','auto')\">\r\n        <span>\u81EA\u9002\u5E94</span>\r\n      </div>\r\n      <div class=\"radio-value\" [ngClass]=\"style.height && style.height !== 'auto' ? 'active' : ''\"\r\n           (click)=\"select('height',800)\">\r\n        <span>\u56FA\u5B9A\u503C</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"config-item\">\r\n  <div class=\"item-title\">\u56FA\u5B9A\u9AD8\u5EA6</div>\r\n  <div class=\"item-setting\">\r\n    <dx-number-box [min]=\"0\"\r\n                   [showSpinButtons]=\"true\"\r\n                   [showClearButton]=\"true\"\r\n                   [(value)]=\"height\"\r\n                   (onValueChanged)=\"typing('height', $event.value)\"\r\n                   [readOnly]=\"style.height === 'auto'\">\r\n    </dx-number-box>\r\n  </div>\r\n</div>\r\n", styles: [":host .config-item{display:flex;flex-flow:row nowrap;align-items:center;margin-bottom:8px}:host .config-item .item-title{flex:0 0 80px}:host .config-item .item-setting{flex:1;display:flex;flex-flow:row nowrap}:host .config-item .item-setting .card-style-radio{flex:1;display:flex;flex-flow:row nowrap;justify-content:stretch}:host .config-item .item-setting .card-style-radio .radio-value{flex:1;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 dx-number-box{flex:1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.DxNumberBoxComponent, selector: "dx-number-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "format", "height", "hint", "hoverStateEnabled", "inputAttr", "invalidValueMessage", "isValid", "label", "labelMode", "max", "min", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showSpinButtons", "step", "stylingMode", "tabIndex", "text", "useLargeSpinButtons", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "formatChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "invalidValueMessageChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "minChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showSpinButtonsChange", "stepChange", "stylingModeChange", "tabIndexChange", "textChange", "useLargeSpinButtonsChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }] });
+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    <dx-number-box [min]=\"0\"\n                   [showSpinButtons]=\"true\"\n                   [showClearButton]=\"true\"\n                   [(value)]=\"width\"\n                   (onValueChanged)=\"typing('width', $event.value)\"\n                   [readOnly]=\"style.width === 'auto'\">\n    </dx-number-box>\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    <dx-number-box [min]=\"0\"\n                   [showSpinButtons]=\"true\"\n                   [showClearButton]=\"true\"\n                   [(value)]=\"height\"\n                   (onValueChanged)=\"typing('height', $event.value)\"\n                   [readOnly]=\"style.height === 'auto'\">\n    </dx-number-box>\n  </div>\n</div>\n", styles: [":host .config-item{display:flex;flex-flow:row nowrap;align-items:center;margin-bottom:8px}:host .config-item .item-title{flex:0 0 80px}:host .config-item .item-setting{flex:1;display:flex;flex-flow:row nowrap}:host .config-item .item-setting .card-style-radio{flex:1;display:flex;flex-flow:row nowrap;justify-content:stretch}:host .config-item .item-setting .card-style-radio .radio-value{flex:1;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 dx-number-box{flex:1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.DxNumberBoxComponent, selector: "dx-number-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "format", "height", "hint", "hoverStateEnabled", "inputAttr", "invalidValueMessage", "isValid", "label", "labelMode", "max", "min", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showSpinButtons", "step", "stylingMode", "tabIndex", "text", "useLargeSpinButtons", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "formatChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "invalidValueMessageChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "minChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showSpinButtonsChange", "stepChange", "stylingModeChange", "tabIndexChange", "textChange", "useLargeSpinButtonsChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }] });
 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\">\r\n  <div class=\"item-title\">\u5BBD\u5EA6\u7C7B\u578B</div>\r\n  <div class=\"item-setting\">\r\n    <div class=\"card-style-radio\">\r\n      <div class=\"radio-value\" [ngClass]=\"!style.width || style.width === 'auto' ? 'active' : ''\"\r\n           (click)=\"select('width','auto')\">\r\n        <span>\u81EA\u9002\u5E94</span>\r\n      </div>\r\n      <div class=\"radio-value\" [ngClass]=\"style.width && style.width !== 'auto' ? 'active' : ''\"\r\n           (click)=\"select('width',240)\">\r\n        <span>\u56FA\u5B9A\u503C</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"config-item\">\r\n  <div class=\"item-title\">\u56FA\u5B9A\u5BBD\u5EA6</div>\r\n  <div class=\"item-setting\">\r\n    <dx-number-box [min]=\"0\"\r\n                   [showSpinButtons]=\"true\"\r\n                   [showClearButton]=\"true\"\r\n                   [(value)]=\"width\"\r\n                   (onValueChanged)=\"typing('width', $event.value)\"\r\n                   [readOnly]=\"style.width === 'auto'\">\r\n    </dx-number-box>\r\n  </div>\r\n</div>\r\n<div class=\"config-item\">\r\n  <div class=\"item-title\">\u9AD8\u5EA6\u7C7B\u578B</div>\r\n  <div class=\"item-setting\">\r\n    <div class=\"card-style-radio\">\r\n      <div class=\"radio-value\" [ngClass]=\"!style.height || style.height === 'auto' ? 'active' : ''\"\r\n           (click)=\"select('height','auto')\">\r\n        <span>\u81EA\u9002\u5E94</span>\r\n      </div>\r\n      <div class=\"radio-value\" [ngClass]=\"style.height && style.height !== 'auto' ? 'active' : ''\"\r\n           (click)=\"select('height',800)\">\r\n        <span>\u56FA\u5B9A\u503C</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"config-item\">\r\n  <div class=\"item-title\">\u56FA\u5B9A\u9AD8\u5EA6</div>\r\n  <div class=\"item-setting\">\r\n    <dx-number-box [min]=\"0\"\r\n                   [showSpinButtons]=\"true\"\r\n                   [showClearButton]=\"true\"\r\n                   [(value)]=\"height\"\r\n                   (onValueChanged)=\"typing('height', $event.value)\"\r\n                   [readOnly]=\"style.height === 'auto'\">\r\n    </dx-number-box>\r\n  </div>\r\n</div>\r\n", styles: [":host .config-item{display:flex;flex-flow:row nowrap;align-items:center;margin-bottom:8px}:host .config-item .item-title{flex:0 0 80px}:host .config-item .item-setting{flex:1;display:flex;flex-flow:row nowrap}:host .config-item .item-setting .card-style-radio{flex:1;display:flex;flex-flow:row nowrap;justify-content:stretch}:host .config-item .item-setting .card-style-radio .radio-value{flex:1;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 dx-number-box{flex:1}\n"] }]
+            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    <dx-number-box [min]=\"0\"\n                   [showSpinButtons]=\"true\"\n                   [showClearButton]=\"true\"\n                   [(value)]=\"width\"\n                   (onValueChanged)=\"typing('width', $event.value)\"\n                   [readOnly]=\"style.width === 'auto'\">\n    </dx-number-box>\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    <dx-number-box [min]=\"0\"\n                   [showSpinButtons]=\"true\"\n                   [showClearButton]=\"true\"\n                   [(value)]=\"height\"\n                   (onValueChanged)=\"typing('height', $event.value)\"\n                   [readOnly]=\"style.height === 'auto'\">\n    </dx-number-box>\n  </div>\n</div>\n", styles: [":host .config-item{display:flex;flex-flow:row nowrap;align-items:center;margin-bottom:8px}:host .config-item .item-title{flex:0 0 80px}:host .config-item .item-setting{flex:1;display:flex;flex-flow:row nowrap}:host .config-item .item-setting .card-style-radio{flex:1;display:flex;flex-flow:row nowrap;justify-content:stretch}:host .config-item .item-setting .card-style-radio .radio-value{flex:1;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 dx-number-box{flex:1}\n"] }]
         }] });
 
 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>\r\n  <span>\u8BF7\u5728\u5DE6\u4FA7\u753B\u5E03\u9009\u4E2D\u8282\u70B9</span>\r\n</div>\r\n", styles: [":host{height:80px;margin:8px;display:flex;flex-flow:row nowrap;justify-content:center}:host div{flex:1;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}\n"] });
+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;flex-flow:row nowrap;justify-content:center}:host div{flex:1;display:flex;flex-flow:row nowrap;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>\r\n  <span>\u8BF7\u5728\u5DE6\u4FA7\u753B\u5E03\u9009\u4E2D\u8282\u70B9</span>\r\n</div>\r\n", styles: [":host{height:80px;margin:8px;display:flex;flex-flow:row nowrap;justify-content:center}:host div{flex:1;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}\n"] }]
+            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;flex-flow:row nowrap;justify-content:center}:host div{flex:1;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}\n"] }]
         }] });
 
 class PluginManager {
@@ -426,10 +426,10 @@ class ItemConfigComponent {
     }
 }
 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: "itemConfigContainerRef", first: true, predicate: ["itemConfigContainerRef"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #itemConfigContainerRef></ng-container>\r\n", styles: [""] });
+ItemConfigComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ItemConfigComponent, selector: "rs-item-config", viewQueries: [{ propertyName: "itemConfigContainerRef", first: true, predicate: ["itemConfigContainerRef"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #itemConfigContainerRef></ng-container>\n", styles: [""] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ItemConfigComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-item-config', template: "<ng-container #itemConfigContainerRef></ng-container>\r\n" }]
+            args: [{ selector: 'rs-item-config', template: "<ng-container #itemConfigContainerRef></ng-container>\n" }]
         }], propDecorators: { itemConfigContainerRef: [{
                 type: ViewChild,
                 args: ['itemConfigContainerRef', {
@@ -446,10 +446,10 @@ class ItemStyleComponent {
     }
 }
 ItemStyleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ItemStyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ItemStyleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ItemStyleComponent, selector: "rs-item-style", viewQueries: [{ propertyName: "itemStyleContainerRef", first: true, predicate: ["itemStyleContainerRef"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #itemStyleContainerRef></ng-container>\r\n", styles: [""] });
+ItemStyleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ItemStyleComponent, selector: "rs-item-style", viewQueries: [{ propertyName: "itemStyleContainerRef", first: true, predicate: ["itemStyleContainerRef"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #itemStyleContainerRef></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 #itemStyleContainerRef></ng-container>\r\n" }]
+            args: [{ selector: 'rs-item-style', template: "<ng-container #itemStyleContainerRef></ng-container>\n" }]
         }], propDecorators: { itemStyleContainerRef: [{
                 type: ViewChild,
                 args: ['itemStyleContainerRef', { static: true, read: ViewContainerRef }]
@@ -476,10 +476,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
 class ItemBlankComponent {
 }
 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", ngImport: i0, template: "<div>\r\n  <span>\u62D6\u62FD\u7EC4\u4EF6\u5230\u6B64\u5904</span>\r\n</div>\r\n", styles: [":host{flex:1;margin:8px;border:1px solid var(--coast-border-color, #dddddd);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AQMAAAAAMksxAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRF8fHxAAAAMCd7XAAAAAJ0Uk5T/wDltzBKAAABJUlEQVR4nFVSy23EIBCdAiKxBaxCC1tBaGk7YG/OjZYSOQptLKKB8Y0D8ssbjBPl9gQz7wfigQbgQxygEXjIAjwDcJEV+PbYb1KAlNDusgE+Q1Va3EPFptJDjwVVZfcNiqwCV9BiIlhW9DdPkEn5GggKRV4igVL2AYJGpc8TFAMa5lXhzHuc69dwEO6DkBI9OhNVii60ERu3VxrjRUVRet7DsMoUbpgny+LRb5b0K2C/CAWejCxCSYVl9wcQSaMEzuRRArcqebzxcMCnUcKQsBKiiVoJoR1+4DfWSodILCGa5zXTvKWo5L5ars0C/iuh003F7GecbG62YVujunzypDqZTcsK76HF2UYP41HM4WoO7eEWNLUUyaHf/3L9JvXnBwjzS/wAoXR0PDbjCSUAAAAASUVORK5CYII=) repeat var(--coast-global-bg-color, #f6f6f8);display:flex;flex-flow:row nowrap;justify-content:center;pointer-events:all}:host div{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}:host.plugin-hover>div{pointer-events:none}.active>:host div{background-color:var(--coast-empty-color, #d4d4d4)}\n"] });
+ItemBlankComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ItemBlankComponent, selector: "rs-item-blank", ngImport: i0, template: "<div>\n  <span>\u62D6\u62FD\u7EC4\u4EF6\u5230\u6B64\u5904</span>\n</div>\n", styles: [":host{flex:1;margin:8px;border:1px solid var(--coast-border-color, #dddddd);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AQMAAAAAMksxAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRF8fHxAAAAMCd7XAAAAAJ0Uk5T/wDltzBKAAABJUlEQVR4nFVSy23EIBCdAiKxBaxCC1tBaGk7YG/OjZYSOQptLKKB8Y0D8ssbjBPl9gQz7wfigQbgQxygEXjIAjwDcJEV+PbYb1KAlNDusgE+Q1Va3EPFptJDjwVVZfcNiqwCV9BiIlhW9DdPkEn5GggKRV4igVL2AYJGpc8TFAMa5lXhzHuc69dwEO6DkBI9OhNVii60ERu3VxrjRUVRet7DsMoUbpgny+LRb5b0K2C/CAWejCxCSYVl9wcQSaMEzuRRArcqebzxcMCnUcKQsBKiiVoJoR1+4DfWSodILCGa5zXTvKWo5L5ars0C/iuh003F7GecbG62YVujunzypDqZTcsK76HF2UYP41HM4WoO7eEWNLUUyaHf/3L9JvXnBwjzS/wAoXR0PDbjCSUAAAAASUVORK5CYII=) repeat var(--coast-global-bg-color, #f6f6f8);display:flex;flex-flow:row nowrap;justify-content:center;pointer-events:all}:host div{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}:host.plugin-hover>div{pointer-events:none}.active>:host div{background-color:var(--coast-empty-color, #d4d4d4)}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ItemBlankComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-item-blank', template: "<div>\r\n  <span>\u62D6\u62FD\u7EC4\u4EF6\u5230\u6B64\u5904</span>\r\n</div>\r\n", styles: [":host{flex:1;margin:8px;border:1px solid var(--coast-border-color, #dddddd);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AQMAAAAAMksxAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRF8fHxAAAAMCd7XAAAAAJ0Uk5T/wDltzBKAAABJUlEQVR4nFVSy23EIBCdAiKxBaxCC1tBaGk7YG/OjZYSOQptLKKB8Y0D8ssbjBPl9gQz7wfigQbgQxygEXjIAjwDcJEV+PbYb1KAlNDusgE+Q1Va3EPFptJDjwVVZfcNiqwCV9BiIlhW9DdPkEn5GggKRV4igVL2AYJGpc8TFAMa5lXhzHuc69dwEO6DkBI9OhNVii60ERu3VxrjRUVRet7DsMoUbpgny+LRb5b0K2C/CAWejCxCSYVl9wcQSaMEzuRRArcqebzxcMCnUcKQsBKiiVoJoR1+4DfWSodILCGa5zXTvKWo5L5ars0C/iuh003F7GecbG62YVujunzypDqZTcsK76HF2UYP41HM4WoO7eEWNLUUyaHf/3L9JvXnBwjzS/wAoXR0PDbjCSUAAAAASUVORK5CYII=) repeat var(--coast-global-bg-color, #f6f6f8);display:flex;flex-flow:row nowrap;justify-content:center;pointer-events:all}:host div{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}:host.plugin-hover>div{pointer-events:none}.active>:host div{background-color:var(--coast-empty-color, #d4d4d4)}\n"] }]
+            args: [{ selector: 'rs-item-blank', template: "<div>\n  <span>\u62D6\u62FD\u7EC4\u4EF6\u5230\u6B64\u5904</span>\n</div>\n", styles: [":host{flex:1;margin:8px;border:1px solid var(--coast-border-color, #dddddd);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AQMAAAAAMksxAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRF8fHxAAAAMCd7XAAAAAJ0Uk5T/wDltzBKAAABJUlEQVR4nFVSy23EIBCdAiKxBaxCC1tBaGk7YG/OjZYSOQptLKKB8Y0D8ssbjBPl9gQz7wfigQbgQxygEXjIAjwDcJEV+PbYb1KAlNDusgE+Q1Va3EPFptJDjwVVZfcNiqwCV9BiIlhW9DdPkEn5GggKRV4igVL2AYJGpc8TFAMa5lXhzHuc69dwEO6DkBI9OhNVii60ERu3VxrjRUVRet7DsMoUbpgny+LRb5b0K2C/CAWejCxCSYVl9wcQSaMEzuRRArcqebzxcMCnUcKQsBKiiVoJoR1+4DfWSodILCGa5zXTvKWo5L5ars0C/iuh003F7GecbG62YVujunzypDqZTcsK76HF2UYP41HM4WoO7eEWNLUUyaHf/3L9JvXnBwjzS/wAoXR0PDbjCSUAAAAASUVORK5CYII=) repeat var(--coast-global-bg-color, #f6f6f8);display:flex;flex-flow:row nowrap;justify-content:center;pointer-events:all}:host div{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}:host.plugin-hover>div{pointer-events:none}.active>:host div{background-color:var(--coast-empty-color, #d4d4d4)}\n"] }]
         }] });
 
 class BoxItemComponent {
@@ -662,10 +662,10 @@ class BoxItemComponent {
     }
 }
 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\">\r\n  <ng-container *ngIf=\"boxContainer.editMode\">\r\n    <ng-container *ngIf=\"item.type === 'plugin'\">\r\n      <dx-draggable [ngStyle]=\"calcStyle(item)\"\r\n                    [data]=\"{boxItem: this, item, index}\"\r\n                    handle=\".icon-drag\"\r\n                    group=\"rsBoxContainerDragGroup\"\r\n                    (onDragMove)=\"onDragMove($event)\"\r\n                    (onDragEnd)=\"onDragEnd($event)\">\r\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\r\n      </dx-draggable>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"item.type === 'item'\">\r\n      <div [ngStyle]=\"calcStyle(item)\">\r\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"item.type === 'blank'\">\r\n      <dx-draggable [ngStyle]=\"calcStyle(item)\"\r\n                    [data]=\"{boxItem: this, item, index}\"\r\n                    group=\"rsBoxContainerDragGroup\"\r\n                    (onDragStart)=\"$event.cancel = true\">\r\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\r\n      </dx-draggable>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!boxContainer.editMode\">\r\n    <div [ngStyle]=\"calcStyle(item)\">\r\n      <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\r\n    </div>\r\n  </ng-container>\r\n</ng-container>\r\n", styles: [":host{flex:1;display:flex;flex-flow:row nowrap;pointer-events:all}:host dx-draggable,:host div{display:flex;flex-flow:row nowrap}:host dx-draggable.active,:host div.active{background-color:var(--coast-empty-color, #d4d4d4)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.DxDraggableComponent, selector: "dx-draggable", inputs: ["autoScroll", "boundary", "clone", "container", "cursorOffset", "data", "dragDirection", "dragTemplate", "elementAttr", "group", "handle", "height", "rtlEnabled", "scrollSensitivity", "scrollSpeed", "width"], outputs: ["onDisposing", "onDragEnd", "onDragMove", "onDragStart", "onInitialized", "onOptionChanged", "autoScrollChange", "boundaryChange", "cloneChange", "containerChange", "cursorOffsetChange", "dataChange", "dragDirectionChange", "dragTemplateChange", "elementAttrChange", "groupChange", "handleChange", "heightChange", "rtlEnabledChange", "scrollSensitivityChange", "scrollSpeedChange", "widthChange"] }, { kind: "directive", type: BoxItemHostDirective, selector: "[rsBoxItemHost]", inputs: ["hostId"] }] });
+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  <ng-container *ngIf=\"boxContainer.editMode\">\n    <ng-container *ngIf=\"item.type === 'plugin'\">\n      <dx-draggable [ngStyle]=\"calcStyle(item)\"\n                    [data]=\"{boxItem: this, item, index}\"\n                    handle=\".icon-drag\"\n                    group=\"rsBoxContainerDragGroup\"\n                    (onDragMove)=\"onDragMove($event)\"\n                    (onDragEnd)=\"onDragEnd($event)\">\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n      </dx-draggable>\n    </ng-container>\n    <ng-container *ngIf=\"item.type === 'item'\">\n      <div [ngStyle]=\"calcStyle(item)\">\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"item.type === 'blank'\">\n      <dx-draggable [ngStyle]=\"calcStyle(item)\"\n                    [data]=\"{boxItem: this, item, index}\"\n                    group=\"rsBoxContainerDragGroup\"\n                    (onDragStart)=\"$event.cancel = true\">\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n      </dx-draggable>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!boxContainer.editMode\">\n    <div [ngStyle]=\"calcStyle(item)\">\n      <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [":host{flex:1;display:flex;flex-flow:row nowrap;pointer-events:all}:host dx-draggable,:host div{display:flex;flex-flow:row nowrap}:host dx-draggable.active,:host div.active{background-color:var(--coast-empty-color, #d4d4d4)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.DxDraggableComponent, selector: "dx-draggable", inputs: ["autoScroll", "boundary", "clone", "container", "cursorOffset", "data", "dragDirection", "dragTemplate", "elementAttr", "group", "handle", "height", "rtlEnabled", "scrollSensitivity", "scrollSpeed", "width"], outputs: ["onDisposing", "onDragEnd", "onDragMove", "onDragStart", "onInitialized", "onOptionChanged", "autoScrollChange", "boundaryChange", "cloneChange", "containerChange", "cursorOffsetChange", "dataChange", "dragDirectionChange", "dragTemplateChange", "elementAttrChange", "groupChange", "handleChange", "heightChange", "rtlEnabledChange", "scrollSensitivityChange", "scrollSpeedChange", "widthChange"] }, { 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\">\r\n  <ng-container *ngIf=\"boxContainer.editMode\">\r\n    <ng-container *ngIf=\"item.type === 'plugin'\">\r\n      <dx-draggable [ngStyle]=\"calcStyle(item)\"\r\n                    [data]=\"{boxItem: this, item, index}\"\r\n                    handle=\".icon-drag\"\r\n                    group=\"rsBoxContainerDragGroup\"\r\n                    (onDragMove)=\"onDragMove($event)\"\r\n                    (onDragEnd)=\"onDragEnd($event)\">\r\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\r\n      </dx-draggable>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"item.type === 'item'\">\r\n      <div [ngStyle]=\"calcStyle(item)\">\r\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"item.type === 'blank'\">\r\n      <dx-draggable [ngStyle]=\"calcStyle(item)\"\r\n                    [data]=\"{boxItem: this, item, index}\"\r\n                    group=\"rsBoxContainerDragGroup\"\r\n                    (onDragStart)=\"$event.cancel = true\">\r\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\r\n      </dx-draggable>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!boxContainer.editMode\">\r\n    <div [ngStyle]=\"calcStyle(item)\">\r\n      <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\r\n    </div>\r\n  </ng-container>\r\n</ng-container>\r\n", styles: [":host{flex:1;display:flex;flex-flow:row nowrap;pointer-events:all}:host dx-draggable,:host div{display:flex;flex-flow:row nowrap}:host dx-draggable.active,:host div.active{background-color:var(--coast-empty-color, #d4d4d4)}\n"] }]
+            args: [{ selector: 'rs-box-item', template: "<ng-container *ngFor=\"let item of config.list; index as index\">\n  <ng-container *ngIf=\"boxContainer.editMode\">\n    <ng-container *ngIf=\"item.type === 'plugin'\">\n      <dx-draggable [ngStyle]=\"calcStyle(item)\"\n                    [data]=\"{boxItem: this, item, index}\"\n                    handle=\".icon-drag\"\n                    group=\"rsBoxContainerDragGroup\"\n                    (onDragMove)=\"onDragMove($event)\"\n                    (onDragEnd)=\"onDragEnd($event)\">\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n      </dx-draggable>\n    </ng-container>\n    <ng-container *ngIf=\"item.type === 'item'\">\n      <div [ngStyle]=\"calcStyle(item)\">\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"item.type === 'blank'\">\n      <dx-draggable [ngStyle]=\"calcStyle(item)\"\n                    [data]=\"{boxItem: this, item, index}\"\n                    group=\"rsBoxContainerDragGroup\"\n                    (onDragStart)=\"$event.cancel = true\">\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n      </dx-draggable>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!boxContainer.editMode\">\n    <div [ngStyle]=\"calcStyle(item)\">\n      <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [":host{flex:1;display:flex;flex-flow:row nowrap;pointer-events:all}:host dx-draggable,:host div{display:flex;flex-flow:row nowrap}:host dx-draggable.active,:host div.active{background-color:var(--coast-empty-color, #d4d4d4)}\n"] }]
         }], propDecorators: { _direction: [{
                 type: HostBinding,
                 args: ['style.flex-direction']
@@ -785,10 +785,10 @@ class BoxContainerComponent {
     }
 }
 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: { config: "config", model: "model", opener: "opener", params: "params", readonly: "readonly", tabViewContainerRef: "tabViewContainerRef" }, viewQueries: [{ propertyName: "boxContainerContent", first: true, predicate: ["boxContainerContent"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container #boxContainerContent></ng-container>\r\n", styles: [":host{flex:1;position:relative;display:flex;flex-flow:row nowrap}\n"] });
+BoxContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: BoxContainerComponent, selector: "rs-box-container", inputs: { config: "config", model: "model", opener: "opener", params: "params", readonly: "readonly", tabViewContainerRef: "tabViewContainerRef" }, viewQueries: [{ propertyName: "boxContainerContent", first: true, predicate: ["boxContainerContent"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container #boxContainerContent></ng-container>\n", styles: [":host{flex:1;position:relative;display:flex;flex-flow:row nowrap}\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>\r\n", styles: [":host{flex:1;position:relative;display:flex;flex-flow:row nowrap}\n"] }]
+            args: [{ selector: 'rs-box-container', template: "<ng-container #boxContainerContent></ng-container>\n", styles: [":host{flex:1;position:relative;display:flex;flex-flow:row nowrap}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], model: [{
@@ -1676,10 +1676,10 @@ class CodeEditorComponent {
     }
 }
 CodeEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CodeEditorComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-CodeEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: CodeEditorComponent, selector: "rs-code-editor", inputs: { code: "code", language: "language", readonly: "readonly", enableMinimap: "enableMinimap", consoleMessage: "consoleMessage" }, outputs: { codeChange: "codeChange", onContentReady: "onContentReady" }, viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, static: true }], ngImport: i0, template: "<dx-load-panel [container]=\"viewContainerRef.element.nativeElement\" [showPane]=\"false\"\r\n               [visible]=\"loading\">\r\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\r\n</dx-load-panel>\r\n<div class=\"editor-container\" #editorContainer></div>\r\n<div *ngIf=\"consoleMessage\" class=\"editor-console\">{{consoleMessage}}</div>\r\n", styles: [":host{display:flex;flex-flow:column nowrap}:host .editor-container{flex:1}:host .editor-console{flex:0 0 30px;padding:4px;border:1px solid var(--coast-border-color, #dddddd);background-color:var(--coast-empty-color, #d4d4d4)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.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: i6$1.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }] });
+CodeEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: CodeEditorComponent, selector: "rs-code-editor", inputs: { code: "code", language: "language", readonly: "readonly", enableMinimap: "enableMinimap", consoleMessage: "consoleMessage" }, outputs: { codeChange: "codeChange", onContentReady: "onContentReady" }, viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, static: true }], 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 class=\"editor-container\" #editorContainer></div>\n<div *ngIf=\"consoleMessage\" class=\"editor-console\">{{consoleMessage}}</div>\n", styles: [":host{display:flex;flex-flow:column nowrap}:host .editor-container{flex:1}:host .editor-console{flex:0 0 30px;padding:4px;border:1px solid var(--coast-border-color, #dddddd);background-color:var(--coast-empty-color, #d4d4d4)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.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: i6$1.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CodeEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-code-editor', template: "<dx-load-panel [container]=\"viewContainerRef.element.nativeElement\" [showPane]=\"false\"\r\n               [visible]=\"loading\">\r\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\r\n</dx-load-panel>\r\n<div class=\"editor-container\" #editorContainer></div>\r\n<div *ngIf=\"consoleMessage\" class=\"editor-console\">{{consoleMessage}}</div>\r\n", styles: [":host{display:flex;flex-flow:column nowrap}:host .editor-container{flex:1}:host .editor-console{flex:0 0 30px;padding:4px;border:1px solid var(--coast-border-color, #dddddd);background-color:var(--coast-empty-color, #d4d4d4)}\n"] }]
+            args: [{ selector: 'rs-code-editor', 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 class=\"editor-container\" #editorContainer></div>\n<div *ngIf=\"consoleMessage\" class=\"editor-console\">{{consoleMessage}}</div>\n", styles: [":host{display:flex;flex-flow:column nowrap}:host .editor-container{flex:1}:host .editor-console{flex:0 0 30px;padding:4px;border:1px solid var(--coast-border-color, #dddddd);background-color:var(--coast-empty-color, #d4d4d4)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { code: [{
                 type: Input
             }], codeChange: [{
@@ -1758,10 +1758,10 @@ class CamundaBpmnEditorComponent {
     }
 }
 CamundaBpmnEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CamundaBpmnEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CamundaBpmnEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: CamundaBpmnEditorComponent, selector: "rs-camunda-bpmn-editor", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "config", first: true, predicate: ["config"], descendants: true }], ngImport: i0, template: "<div class=\"main\">\r\n  <div class=\"container\" #container></div>\r\n  <div class=\"config\" #config></div>\r\n  <div class=\"xml-viewer\" [ngStyle]=\"{display: isShowXml ? 'flex' : 'none'}\">\r\n    <rs-code-editor language=\"xml\" [code]=\"xml\" [readonly]=\"true\" [enableMinimap]=\"true\"></rs-code-editor>\r\n  </div>\r\n</div>\r\n<div class=\"footer\">\r\n  <dx-button [type]=\"isShowXml ? 'default' : 'normal'\" text=\"XML\" [hoverStateEnabled]=\"false\"\r\n             (onClick)=\"showXml()\"></dx-button>\r\n</div>\r\n", styles: [":host{flex:1;display:flex;flex-flow:column nowrap}:host .main{flex:1;display:flex;flex-flow:row nowrap;position:relative}:host .main .container{flex:1}:host .main .config{flex:0 0 360px;border:1px solid var(--coast-border-color, #dddddd)}:host .main .xml-viewer{position:absolute;width:100%;height:100%;display:flex;flex-flow:column nowrap;z-index:var(--coast-z-index-drawer, 1040)}:host .main .xml-viewer rs-code-editor{flex:1}:host .footer{flex:0 0 24px;border:1px solid var(--coast-border-color, #dddddd)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CodeEditorComponent, selector: "rs-code-editor", inputs: ["code", "language", "readonly", "enableMinimap", "consoleMessage"], outputs: ["codeChange", "onContentReady"] }, { kind: "component", type: i4.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"] }] });
+CamundaBpmnEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: CamundaBpmnEditorComponent, selector: "rs-camunda-bpmn-editor", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "config", first: true, predicate: ["config"], descendants: true }], ngImport: i0, template: "<div class=\"main\">\n  <div class=\"container\" #container></div>\n  <div class=\"config\" #config></div>\n  <div class=\"xml-viewer\" [ngStyle]=\"{display: isShowXml ? 'flex' : 'none'}\">\n    <rs-code-editor language=\"xml\" [code]=\"xml\" [readonly]=\"true\" [enableMinimap]=\"true\"></rs-code-editor>\n  </div>\n</div>\n<div class=\"footer\">\n  <dx-button [type]=\"isShowXml ? 'default' : 'normal'\" text=\"XML\" [hoverStateEnabled]=\"false\"\n             (onClick)=\"showXml()\"></dx-button>\n</div>\n", styles: [":host{flex:1;display:flex;flex-flow:column nowrap}:host .main{flex:1;display:flex;flex-flow:row nowrap;position:relative}:host .main .container{flex:1}:host .main .config{flex:0 0 360px;border:1px solid var(--coast-border-color, #dddddd)}:host .main .xml-viewer{position:absolute;width:100%;height:100%;display:flex;flex-flow:column nowrap;z-index:var(--coast-z-index-drawer, 1040)}:host .main .xml-viewer rs-code-editor{flex:1}:host .footer{flex:0 0 24px;border:1px solid var(--coast-border-color, #dddddd)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CodeEditorComponent, selector: "rs-code-editor", inputs: ["code", "language", "readonly", "enableMinimap", "consoleMessage"], outputs: ["codeChange", "onContentReady"] }, { kind: "component", type: i4.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.7", ngImport: i0, type: CamundaBpmnEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-camunda-bpmn-editor', template: "<div class=\"main\">\r\n  <div class=\"container\" #container></div>\r\n  <div class=\"config\" #config></div>\r\n  <div class=\"xml-viewer\" [ngStyle]=\"{display: isShowXml ? 'flex' : 'none'}\">\r\n    <rs-code-editor language=\"xml\" [code]=\"xml\" [readonly]=\"true\" [enableMinimap]=\"true\"></rs-code-editor>\r\n  </div>\r\n</div>\r\n<div class=\"footer\">\r\n  <dx-button [type]=\"isShowXml ? 'default' : 'normal'\" text=\"XML\" [hoverStateEnabled]=\"false\"\r\n             (onClick)=\"showXml()\"></dx-button>\r\n</div>\r\n", styles: [":host{flex:1;display:flex;flex-flow:column nowrap}:host .main{flex:1;display:flex;flex-flow:row nowrap;position:relative}:host .main .container{flex:1}:host .main .config{flex:0 0 360px;border:1px solid var(--coast-border-color, #dddddd)}:host .main .xml-viewer{position:absolute;width:100%;height:100%;display:flex;flex-flow:column nowrap;z-index:var(--coast-z-index-drawer, 1040)}:host .main .xml-viewer rs-code-editor{flex:1}:host .footer{flex:0 0 24px;border:1px solid var(--coast-border-color, #dddddd)}\n"] }]
+            args: [{ selector: 'rs-camunda-bpmn-editor', template: "<div class=\"main\">\n  <div class=\"container\" #container></div>\n  <div class=\"config\" #config></div>\n  <div class=\"xml-viewer\" [ngStyle]=\"{display: isShowXml ? 'flex' : 'none'}\">\n    <rs-code-editor language=\"xml\" [code]=\"xml\" [readonly]=\"true\" [enableMinimap]=\"true\"></rs-code-editor>\n  </div>\n</div>\n<div class=\"footer\">\n  <dx-button [type]=\"isShowXml ? 'default' : 'normal'\" text=\"XML\" [hoverStateEnabled]=\"false\"\n             (onClick)=\"showXml()\"></dx-button>\n</div>\n", styles: [":host{flex:1;display:flex;flex-flow:column nowrap}:host .main{flex:1;display:flex;flex-flow:row nowrap;position:relative}:host .main .container{flex:1}:host .main .config{flex:0 0 360px;border:1px solid var(--coast-border-color, #dddddd)}:host .main .xml-viewer{position:absolute;width:100%;height:100%;display:flex;flex-flow:column nowrap;z-index:var(--coast-z-index-drawer, 1040)}:host .main .xml-viewer rs-code-editor{flex:1}:host .footer{flex:0 0 24px;border:1px solid var(--coast-border-color, #dddddd)}\n"] }]
         }], propDecorators: { container: [{
                 type: ViewChild,
                 args: ['container']
@@ -1846,6 +1846,22 @@ class DataGridService {
             }
         });
     }
+    getOneByFilter(tenant, className, key, value, view) {
+        let api = 'api/data/' + className;
+        return this.http.get(api, {
+            params: {
+                tenant,
+                view: view || '',
+                filter: '["' + key + '","=","' + value + '"]',
+                limit: 1
+            }
+        }).pipe(map(response => {
+            if (response.data.count === 1) {
+                return response.data.list[0];
+            }
+            return {};
+        }));
+    }
     getMany(tenant, className, params) {
         const api = 'api/data/' + className;
         return this.http.get(api + params, {
@@ -1949,6 +1965,15 @@ class DataGridService {
             responseType: "blob"
         });
     }
+    getInstanceCaption(tenant, className, oid) {
+        return this.http.get('api/data/' + className + '/' + oid + '/caption', {
+            params: {
+                tenant
+            }
+        }).pipe(map(response => {
+            return response.data;
+        }));
+    }
     getUserInfo(uid) {
         if (!this.userInfoCache.hasOwnProperty(uid)) {
             this.userInfoCache[uid] = this.http.get('api/data/custom', {
@@ -1982,20 +2007,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
 
-class MasterDetailTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-MasterDetailTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: MasterDetailTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-MasterDetailTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: MasterDetailTemplateDirective, selector: "[rsMasterDetailTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: MasterDetailTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rsMasterDetailTemplate]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
-
 class RowButtonsTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
@@ -2010,19 +2021,178 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
-class InstanceLinkTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
+function notify_error(message) {
+    notify({
+        displayTime: 12000,
+        message,
+        type: 'error',
+        width: '300px'
+    }, {
+        direction: 'up-push',
+        position: 'bottom right'
+    });
+}
+function notify_warning(message) {
+    notify({
+        displayTime: 8000,
+        message,
+        type: 'warning',
+        width: '300px'
+    }, {
+        direction: 'up-push',
+        position: 'bottom right'
+    });
+}
+function notify_success(message) {
+    notify({
+        displayTime: 4000,
+        message,
+        type: 'success',
+        width: '300px'
+    }, {
+        direction: 'down-push',
+        position: 'top right'
+    });
+}
+function format_date(date, locale) {
+    return formatDate(date, 'yyyy/MM/dd', locale, 'GMT+8');
+}
+function format_datetime(date, locale) {
+    return formatDate(date, 'yyyy/MM/dd HH:mm:ss', locale, 'GMT+8');
+}
+function file_type_icon(name) {
+    const type = name.substring(name.lastIndexOf('.') + 1).toLocaleLowerCase();
+    switch (type) {
+        case 'doc':
+        case 'docx':
+            return 'word';
+        case 'xls':
+        case 'xlsx':
+        case 'csv':
+            return 'excel';
+        case 'ppt':
+        case 'pptx':
+            return 'ppt';
+        case 'pdf':
+            return 'pdf';
+        case 'txt':
+        case 'xml':
+        case 'json':
+        case 'js':
+            return 'text';
+        case 'png':
+        case 'jpg':
+        case 'jpeg':
+        case 'gif':
+        case 'bmp':
+            return 'image';
+        case 'zip':
+        case 'rar':
+        case '7z':
+        case 'jar':
+            return 'zip';
+        default:
+            return 'unknown';
     }
 }
-InstanceLinkTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: InstanceLinkTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-InstanceLinkTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: InstanceLinkTemplateDirective, selector: "[rsInstanceLinkTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: InstanceLinkTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rsInstanceLinkTemplate]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+function support_preview_ext() {
+    return ['pdf', 'png', 'jpg', 'jpeg', 'gif', 'bmp', 'doc', 'docx', 'txt', 'xml', 'json', 'js', 'xls', 'xlsx', 'csv', 'ppt', 'pptx'];
+}
+function format_file_size(size) {
+    const labels = ['b', 'Kb', 'Mb', 'Gb'];
+    const count = labels.length - 1;
+    let i = 0;
+    while (i < count && size >= 1024) {
+        size /= 1024;
+        i++;
+    }
+    return Math.round(size * 100) / 100 + " " + labels[i];
+}
+function download_file(blob, filename, callback) {
+    const url = window.webkitURL.createObjectURL(blob);
+    const a = document.createElement('a');
+    document.body.appendChild(a);
+    a.setAttribute('style', 'display:none');
+    a.setAttribute('href', url);
+    a.setAttribute('download', decodeURIComponent(filename));
+    a.click();
+    setTimeout(() => {
+        if (callback) {
+            callback();
+        }
+        a.remove();
+    });
+}
+function validate(validator) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return new Promise(resolve => {
+            var _a;
+            const validateResult = validator.instance.validate();
+            if (!validateResult.isValid) {
+                resolve(false);
+            }
+            if (validateResult.status === 'pending') {
+                (_a = validateResult.complete) === null || _a === void 0 ? void 0 : _a.then((result) => {
+                    if (result.isValid) {
+                        resolve(true);
+                    }
+                    else {
+                        resolve(false);
+                    }
+                });
+            }
+            else {
+                resolve(true);
+            }
+        });
+    });
+}
+function validate_group(validationGroup) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const top = validationGroup.element.nativeElement;
+        let sourceNode;
+        const targetClassName = 'dx-field';
+        const findTargetNode = (node) => {
+            sourceNode = node;
+            while (true) {
+                if (node.classList.contains(targetClassName)) {
+                    return node;
+                }
+                else {
+                    node = node.parentElement;
+                    if (node === top) {
+                        return sourceNode;
+                    }
+                }
+            }
+        };
+        return new Promise(resolve => {
+            var _a, _b;
+            const validateResult = validationGroup.instance.validate();
+            if (!validateResult.isValid) {
+                const brokenElement = ((_a = validateResult.brokenRules) === null || _a === void 0 ? void 0 : _a[0]).validator.element();
+                findTargetNode(brokenElement).scrollIntoView();
+                resolve(false);
+            }
+            if (validateResult.status === 'pending') {
+                (_b = validateResult.complete) === null || _b === void 0 ? void 0 : _b.then((result) => {
+                    var _a;
+                    if (result.isValid) {
+                        resolve(true);
+                    }
+                    else {
+                        const brokenElement = ((_a = result.brokenRules) === null || _a === void 0 ? void 0 : _a[0]).validator.element();
+                        findTargetNode(brokenElement).scrollIntoView();
+                        resolve(false);
+                    }
+                });
+            }
+            else {
+                resolve(true);
+            }
+        });
+    });
+}
 
 class DataGridFactory {
     constructor(http) {
@@ -2073,7 +2243,6 @@ class DataGridFactory {
                             dataField: field.name,
                             caption: field.caption,
                             dataType: 'string',
-                            alignment: 'center',
                             cssClass: 'cell-vertical-middle',
                             allowHeaderFiltering: false,
                             allowFiltering: false,
@@ -2099,12 +2268,6 @@ class DataGridFactory {
                             visible: field.visible,
                             fixed: field.fixed
                         };
-                        if (field.isPrimaryKey) {
-                            column.instanceInfo = {
-                                tenant,
-                                className
-                            };
-                        }
                         switch (field.dataType) {
                             case 'BOOLEAN':
                                 column.allowHeaderFiltering = false;
@@ -2338,11 +2501,6 @@ class DataGridFactory {
                             visible: field.visible,
                             fixed: field.fixed
                         };
-                        column.instanceInfo = {
-                            tenant,
-                            className: field.targetClassName,
-                            key: field.name
-                        };
                         switch (field.relationType) {
                             case 'MANY_TO_ONE':
                             case 'ONE_TO_ONE':
@@ -2360,16 +2518,24 @@ class DataGridFactory {
         });
         return result;
     }
-    makeDataGridDataSource(tenant, className, view, extraFilter, dataGridName) {
+    makeDataGridDataSource(tenant, className, view, extraFilter, keyExpr, dataGridName) {
+        if (!keyExpr) {
+            keyExpr = 'oid';
+        }
         return new CustomStore({
-            key: 'oid',
+            key: keyExpr,
             byKey: (key) => {
-                return lastValueFrom(this.service.getOne(tenant, className, key).pipe(map(response => response.data)));
+                if (keyExpr === 'oid') {
+                    return lastValueFrom(this.service.getOne(tenant, className, key).pipe(map(response => response.data)));
+                }
+                else {
+                    return lastValueFrom(this.service.getOneByFilter(tenant, className, keyExpr, key, view));
+                }
             },
             load: (loadOptions) => {
                 if (loadOptions.dataField) {
                     // 未重写headerFilter的dataSource时，headerFilter会调用load方法加载筛选树，重写该方法查询该表所有数据
-                    // 该方式存在风险，无法识别一定是通过headerFilter过滤才存在dataField参数
+                    // 该方式存在风险，无法识别DevExtreme一定是通过headerFilter过滤才存在dataField参数
                     return lastValueFrom(this.service.getColumnDataSource(tenant, className, view, loadOptions.dataField));
                 }
                 let params = '?';
@@ -2410,7 +2576,7 @@ class DataGridFactory {
                 if (filter) {
                     params += '&filter=' + encodeURIComponent(JSON.stringify(filter));
                 }
-                params += '&view=' + view || '';
+                params += '&view=' + (view || '');
                 if (dataGridName) {
                     params += '&dataGridName=' + dataGridName;
                 }
@@ -2428,179 +2594,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
 
-function notify_error(message) {
-    notify({
-        displayTime: 12000,
-        message,
-        type: 'error',
-        width: '300px'
-    }, {
-        direction: 'up-push',
-        position: 'bottom right'
-    });
-}
-function notify_warning(message) {
-    notify({
-        displayTime: 8000,
-        message,
-        type: 'warning',
-        width: '300px'
-    }, {
-        direction: 'up-push',
-        position: 'bottom right'
-    });
-}
-function notify_success(message) {
-    notify({
-        displayTime: 4000,
-        message,
-        type: 'success',
-        width: '300px'
-    }, {
-        direction: 'down-push',
-        position: 'top right'
-    });
-}
-function format_date(date, locale) {
-    return formatDate(date, 'yyyy/MM/dd', locale, 'GMT+8');
-}
-function format_datetime(date, locale) {
-    return formatDate(date, 'yyyy/MM/dd HH:mm:ss', locale, 'GMT+8');
-}
-function file_type_icon(name) {
-    const type = name.substring(name.lastIndexOf('.') + 1).toLocaleLowerCase();
-    switch (type) {
-        case 'doc':
-        case 'docx':
-            return 'word';
-        case 'xls':
-        case 'xlsx':
-        case 'csv':
-            return 'excel';
-        case 'ppt':
-        case 'pptx':
-            return 'ppt';
-        case 'pdf':
-            return 'pdf';
-        case 'txt':
-        case 'xml':
-        case 'json':
-        case 'js':
-            return 'text';
-        case 'png':
-        case 'jpg':
-        case 'jpeg':
-        case 'gif':
-        case 'bmp':
-            return 'image';
-        case 'zip':
-        case 'rar':
-        case '7z':
-        case 'jar':
-            return 'zip';
-        default:
-            return 'unknown';
-    }
-}
-function support_preview_ext() {
-    return ['pdf', 'png', 'jpg', 'jpeg', 'gif', 'bmp', 'doc', 'docx', 'txt', 'xml', 'json', 'js', 'xls', 'xlsx', 'csv', 'ppt', 'pptx'];
-}
-function format_file_size(size) {
-    const labels = ['b', 'Kb', 'Mb', 'Gb'];
-    const count = labels.length - 1;
-    let i = 0;
-    while (i < count && size >= 1024) {
-        size /= 1024;
-        i++;
-    }
-    return Math.round(size * 100) / 100 + " " + labels[i];
-}
-function download_file(blob, filename, callback) {
-    const url = window.webkitURL.createObjectURL(blob);
-    const a = document.createElement('a');
-    document.body.appendChild(a);
-    a.setAttribute('style', 'display:none');
-    a.setAttribute('href', url);
-    a.setAttribute('download', decodeURIComponent(filename));
-    a.click();
-    setTimeout(() => {
-        if (callback) {
-            callback();
-        }
-        a.remove();
-    });
-}
-function validate(validator) {
-    return __awaiter(this, void 0, void 0, function* () {
-        return new Promise(resolve => {
-            var _a;
-            const validateResult = validator.instance.validate();
-            if (!validateResult.isValid) {
-                resolve(false);
-            }
-            if (validateResult.status === 'pending') {
-                (_a = validateResult.complete) === null || _a === void 0 ? void 0 : _a.then((result) => {
-                    if (result.isValid) {
-                        resolve(true);
-                    }
-                    else {
-                        resolve(false);
-                    }
-                });
-            }
-            else {
-                resolve(true);
-            }
-        });
-    });
-}
-function validate_group(validationGroup) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const top = validationGroup.element.nativeElement;
-        let sourceNode;
-        const targetClassName = 'dx-field';
-        const findTargetNode = (node) => {
-            sourceNode = node;
-            while (true) {
-                if (node.classList.contains(targetClassName)) {
-                    return node;
-                }
-                else {
-                    node = node.parentElement;
-                    if (node === top) {
-                        return sourceNode;
-                    }
-                }
-            }
-        };
-        return new Promise(resolve => {
-            var _a, _b;
-            const validateResult = validationGroup.instance.validate();
-            if (!validateResult.isValid) {
-                const brokenElement = ((_a = validateResult.brokenRules) === null || _a === void 0 ? void 0 : _a[0]).validator.element();
-                findTargetNode(brokenElement).scrollIntoView();
-                resolve(false);
-            }
-            if (validateResult.status === 'pending') {
-                (_b = validateResult.complete) === null || _b === void 0 ? void 0 : _b.then((result) => {
-                    var _a;
-                    if (result.isValid) {
-                        resolve(true);
-                    }
-                    else {
-                        const brokenElement = ((_a = result.brokenRules) === null || _a === void 0 ? void 0 : _a[0]).validator.element();
-                        findTargetNode(brokenElement).scrollIntoView();
-                        resolve(false);
-                    }
-                });
-            }
-            else {
-                resolve(true);
-            }
-        });
-    });
-}
-
 class FileCellTemplateComponent {
     constructor(service, domSanitizer) {
         this.service = service;
@@ -2632,10 +2625,6 @@ class FileCellTemplateComponent {
                 </table>
       `);
         this.icon = file_type_icon(this.filename);
-        // 重绘表格宽高
-        setTimeout(() => {
-            this.service.cellTemplateLoaded$.emit();
-        });
     }
     preview(tooltip) {
         if (!window.coast.tabManager) {
@@ -2675,471 +2664,625 @@ class FileCellTemplateComponent {
     }
 }
 FileCellTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FileCellTemplateComponent, deps: [{ token: DataGridService }, { token: i2$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-FileCellTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: FileCellTemplateComponent, selector: "rs-file-cell-template", inputs: { file: "file" }, ngImport: i0, template: "<dx-button #fileBtn type=\"default\" stylingMode=\"text\">\r\n  <i class=\"coast-icon-file-{{icon}}\" style=\"padding-right: 4px;\"></i>\r\n  {{ filename }}\r\n  <dx-tooltip #tooltip\r\n              [target]=\"fileBtn.instance.element()\"\r\n              [position]=\"'top'\"\r\n              [visible]=\"false\"\r\n              [showEvent]=\"'click'\">\r\n    <div *dxTemplate=\"let data of 'content'\">\r\n      <div [innerHTML]=\"content\"></div>\r\n      <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-file\" text=\"\u9884\u89C8\"\r\n                 (onClick)=\"preview(tooltip)\" [disabled]=\"!supportPreview || loading\"></dx-button>\r\n      <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-download\" text=\"\u4E0B\u8F7D\"\r\n                 (onClick)=\"download()\" [disabled]=\"loading\"></dx-button>\r\n    </div>\r\n  </dx-tooltip>\r\n</dx-button><br/>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i4.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"] }, { kind: "component", type: i5.DxTooltipComponent, selector: "dx-tooltip", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showEvent", "target", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showEventChange", "targetChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
+FileCellTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: FileCellTemplateComponent, selector: "rs-file-cell-template", inputs: { file: "file" }, ngImport: i0, template: "<dx-button #fileBtn type=\"default\" stylingMode=\"text\" (onClick)=\"$event.event?.stopPropagation()\">\r\n  <i class=\"coast-icon-file-{{icon}}\" style=\"padding-right: 4px;\"></i>\r\n  {{ filename }}\r\n  <dx-tooltip #tooltip\r\n              [target]=\"fileBtn.instance.element()\"\r\n              [position]=\"'top'\"\r\n              [visible]=\"false\"\r\n              [showEvent]=\"'click'\">\r\n    <div *dxTemplate=\"let data of 'content'\">\r\n      <div [innerHTML]=\"content\"></div>\r\n      <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-file\" text=\"\u9884\u89C8\"\r\n                 (onClick)=\"preview(tooltip)\" [disabled]=\"!supportPreview || loading\"></dx-button>\r\n      <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-download\" text=\"\u4E0B\u8F7D\"\r\n                 (onClick)=\"download()\" [disabled]=\"loading\"></dx-button>\r\n    </div>\r\n  </dx-tooltip>\r\n</dx-button><br/>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i4.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"] }, { kind: "component", type: i5.DxTooltipComponent, selector: "dx-tooltip", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showEvent", "target", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showEventChange", "targetChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FileCellTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-file-cell-template', template: "<dx-button #fileBtn type=\"default\" stylingMode=\"text\">\r\n  <i class=\"coast-icon-file-{{icon}}\" style=\"padding-right: 4px;\"></i>\r\n  {{ filename }}\r\n  <dx-tooltip #tooltip\r\n              [target]=\"fileBtn.instance.element()\"\r\n              [position]=\"'top'\"\r\n              [visible]=\"false\"\r\n              [showEvent]=\"'click'\">\r\n    <div *dxTemplate=\"let data of 'content'\">\r\n      <div [innerHTML]=\"content\"></div>\r\n      <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-file\" text=\"\u9884\u89C8\"\r\n                 (onClick)=\"preview(tooltip)\" [disabled]=\"!supportPreview || loading\"></dx-button>\r\n      <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-download\" text=\"\u4E0B\u8F7D\"\r\n                 (onClick)=\"download()\" [disabled]=\"loading\"></dx-button>\r\n    </div>\r\n  </dx-tooltip>\r\n</dx-button><br/>\r\n" }]
+            args: [{ selector: 'rs-file-cell-template', template: "<dx-button #fileBtn type=\"default\" stylingMode=\"text\" (onClick)=\"$event.event?.stopPropagation()\">\r\n  <i class=\"coast-icon-file-{{icon}}\" style=\"padding-right: 4px;\"></i>\r\n  {{ filename }}\r\n  <dx-tooltip #tooltip\r\n              [target]=\"fileBtn.instance.element()\"\r\n              [position]=\"'top'\"\r\n              [visible]=\"false\"\r\n              [showEvent]=\"'click'\">\r\n    <div *dxTemplate=\"let data of 'content'\">\r\n      <div [innerHTML]=\"content\"></div>\r\n      <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-file\" text=\"\u9884\u89C8\"\r\n                 (onClick)=\"preview(tooltip)\" [disabled]=\"!supportPreview || loading\"></dx-button>\r\n      <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-download\" text=\"\u4E0B\u8F7D\"\r\n                 (onClick)=\"download()\" [disabled]=\"loading\"></dx-button>\r\n    </div>\r\n  </dx-tooltip>\r\n</dx-button><br/>\r\n" }]
         }], ctorParameters: function () { return [{ type: DataGridService }, { type: i2$2.DomSanitizer }]; }, propDecorators: { file: [{
                 type: Input
             }] } });
 
-class UserInfoTemplateComponent {
-    constructor(service, domSanitizer) {
-        this.service = service;
-        this.domSanitizer = domSanitizer;
+class DataDetailService {
+    constructor(http) {
+        this.http = http;
     }
-    ngOnInit() {
-        this.service.getUserInfo(this.uid).subscribe(response => {
-            this.displayName = response.displayName;
-            const userInfo = response.userInfo;
-            let content = '<table>';
-            for (const item of userInfo) {
-                content += `
-            <tr>
-                <td style="text-align: right;">${item.caption}：</td>
-                <td style="text-align: left;">${item.value}</td>
-            </tr>
-      `;
+    getSectionList(tenant, className, oid) {
+        return this.http.get('api/data/custom', {
+            params: {
+                tenant,
+                className,
+                oid,
+                executor: 'com.cs.system.section.LoadSections'
             }
-            content += '</table>';
-            this.content = this.domSanitizer.bypassSecurityTrustHtml(content);
-            // 重绘表格宽高
-            setTimeout(() => {
-                this.service.cellTemplateLoaded$.emit();
-            });
         });
     }
 }
-UserInfoTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: UserInfoTemplateComponent, deps: [{ token: DataGridService }, { token: i2$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-UserInfoTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: UserInfoTemplateComponent, selector: "rs-user-info-template", inputs: { uid: "uid" }, ngImport: i0, template: "<dx-button #textDiv type=\"default\" stylingMode=\"text\">\r\n  {{displayName}}\r\n  <dx-tooltip [target]=\"textDiv.instance.element()\"\r\n              [position]=\"'top'\"\r\n              [showEvent]=\"'click'\">\r\n    <div *dxTemplate=\"let data of 'content'\">\r\n      <div [innerHTML]=\"content\"></div>\r\n    </div>\r\n  </dx-tooltip>\r\n</dx-button>\r\n<br/>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i4.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"] }, { kind: "component", type: i5.DxTooltipComponent, selector: "dx-tooltip", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showEvent", "target", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showEventChange", "targetChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: UserInfoTemplateComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rs-user-info-template', template: "<dx-button #textDiv type=\"default\" stylingMode=\"text\">\r\n  {{displayName}}\r\n  <dx-tooltip [target]=\"textDiv.instance.element()\"\r\n              [position]=\"'top'\"\r\n              [showEvent]=\"'click'\">\r\n    <div *dxTemplate=\"let data of 'content'\">\r\n      <div [innerHTML]=\"content\"></div>\r\n    </div>\r\n  </dx-tooltip>\r\n</dx-button>\r\n<br/>\r\n" }]
-        }], ctorParameters: function () { return [{ type: DataGridService }, { type: i2$2.DomSanitizer }]; }, propDecorators: { uid: [{
-                type: Input
-            }] } });
+DataDetailService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DataDetailService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+DataDetailService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DataDetailService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DataDetailService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
 
-class UnitInfoTemplateComponent {
-    constructor(service, domSanitizer) {
-        this.service = service;
-        this.domSanitizer = domSanitizer;
+class FormService {
+    constructor(http) {
+        this.http = http;
     }
-    ngOnInit() {
-        this.service.getUnitInfo(this.uid).subscribe(response => {
-            this.displayName = response.displayName;
-            const unitInfo = response.unitInfo;
-            let content = '<table>';
-            for (const item of unitInfo) {
-                content += `
-            <tr>
-                <td style="text-align: right;">${item.caption}：</td>
-                <td style="text-align: left;">${item.value}</td>
-            </tr>
-      `;
+    getFormTemplateConfig(tenant, className, template) {
+        return this.http.get('api/metadata/form/' + className, {
+            params: {
+                tenant,
+                template: template || ''
             }
-            content += '</table>';
-            this.content = this.domSanitizer.bypassSecurityTrustHtml(content);
-            // 重绘表格宽高
-            setTimeout(() => {
-                this.service.cellTemplateLoaded$.emit();
-            });
         });
     }
-}
-UnitInfoTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: UnitInfoTemplateComponent, deps: [{ token: DataGridService }, { token: i2$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-UnitInfoTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: UnitInfoTemplateComponent, selector: "rs-unit-info-template", inputs: { uid: "uid" }, ngImport: i0, template: "<dx-button #textDiv type=\"default\" stylingMode=\"text\">\r\n  {{displayName}}\r\n  <dx-tooltip [target]=\"textDiv.instance.element()\"\r\n              [position]=\"'top'\"\r\n              [showEvent]=\"'click'\">\r\n    <div *dxTemplate=\"let data of 'content'\">\r\n      <div [innerHTML]=\"content\"></div>\r\n    </div>\r\n  </dx-tooltip>\r\n</dx-button>\r\n<br/>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i4.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"] }, { kind: "component", type: i5.DxTooltipComponent, selector: "dx-tooltip", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showEvent", "target", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showEventChange", "targetChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: UnitInfoTemplateComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rs-unit-info-template', template: "<dx-button #textDiv type=\"default\" stylingMode=\"text\">\r\n  {{displayName}}\r\n  <dx-tooltip [target]=\"textDiv.instance.element()\"\r\n              [position]=\"'top'\"\r\n              [showEvent]=\"'click'\">\r\n    <div *dxTemplate=\"let data of 'content'\">\r\n      <div [innerHTML]=\"content\"></div>\r\n    </div>\r\n  </dx-tooltip>\r\n</dx-button>\r\n<br/>\r\n" }]
-        }], ctorParameters: function () { return [{ type: DataGridService }, { type: i2$2.DomSanitizer }]; }, propDecorators: { uid: [{
-                type: Input
-            }] } });
-
-class DataGridComponent {
-    constructor(factory, service) {
-        this.factory = factory;
-        this.service = service;
-        this.tenant = 'T';
-        this.enableMasterDetail = false;
-        this.selectionMode = 'none';
-        this.onDxDataGridCellPrepared = new EventEmitter();
-        this.onDxDataGridContentReady = new EventEmitter();
-        this.onDxDataGridSelectionChanged = new EventEmitter();
-        this.dataSource = {};
-        this.columns = [];
-    }
-    ngOnInit() {
-        this.reload();
-        this.service.cellTemplateLoaded$.pipe(debounceTime(200)).subscribe(() => {
-            this.dxDataGrid.instance.resize();
+    getOne(tenant, className, oid, template, isCopy) {
+        let api = 'api/data/' + className + '/' + oid;
+        return this.http.get(api, {
+            params: {
+                tenant,
+                template: template || '',
+                isCopy: !!isCopy
+            }
         });
     }
-    reload() {
-        this.columns.length = 0;
-        this.factory.makeDataGridColumns(this.tenant, this.className, this.view).subscribe(columns => {
-            if (this.customColumnFn) {
-                this.customColumnFn(columns);
+    getInitModelByTemplate(tenant, className, template) {
+        let api = 'api/data/' + className + '/new';
+        return this.http.get(api, {
+            params: {
+                tenant,
+                className,
+                template: template || ''
             }
-            this.columns = columns;
         });
-        this.dataSource = this.factory.makeDataGridDataSource(this.tenant, this.className, this.view, this.filter, this.dataGridName);
     }
-    convertMultipleValueCellText(cellInfo) {
-        if (!cellInfo.value) {
-            return;
+    createOrUpdate(tenant, className, model) {
+        let api = 'api/data/' + className;
+        if (model.oid) {
+            api += '/' + model.oid;
         }
-        if (Array.isArray(cellInfo.value)) {
-            if (cellInfo.column.lookup) {
-                return cellInfo.value.map((item) => cellInfo.column.lookup.calculateCellValue(item)).join('<br />');
-            }
-            return cellInfo.value.join('<br />');
-        }
-        if (cellInfo.column.lookup) {
-            return cellInfo.column.lookup.calculateCellValue(cellInfo.value);
-        }
-        return cellInfo.value;
-    }
-    getOriginalValue(cellInfo, key) {
-        const config = cellInfo.column[key];
-        if (config) {
-            const value = cellInfo.data[config.field];
-            if (value) {
-                if (Array.isArray(value)) {
-                    return value;
-                }
-                return [value];
+        return this.http.post(api, model, {
+            params: {
+                tenant
             }
-            return [];
-        }
-        return cellInfo.data[key];
+        });
     }
-    refresh(callback) {
-        this.dxDataGrid.instance.refresh().then(() => {
-            if (callback) {
-                callback();
-            }
+}
+FormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+FormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
+
+class FormComponent {
+    constructor(viewContainerRef, service, elementRef) {
+        this.viewContainerRef = viewContainerRef;
+        this.service = service;
+        this.elementRef = elementRef;
+        this.tenant = 'T';
+        this.onlyFrontEnd = false; // 仅前端，不通过oid获取实例model
+        this.readonly = false;
+        this.submitCallback = new EventEmitter();
+        this.loading = false;
+        this.changeFilter = new ChangeFilter();
+    }
+    ngOnInit() {
+        this.load();
+        this.changeFilter.anyNotFirst(['tenant', 'className', 'oid', 'copyOid', 'template'], () => {
+            this.load();
         });
     }
-    getSelectedRowKeys() {
-        return this.dxDataGrid.instance.getSelectedRowKeys();
+    ngOnChanges(changes) {
+        this.changeFilter.doFilter(changes);
     }
-    onCellPrepared($event) {
-        this.onDxDataGridCellPrepared.emit($event);
+    ngOnDestroy() {
+        this.changeFilter.dispose();
     }
-    onContentReady($event) {
-        this.onDxDataGridContentReady.emit($event);
+    load() {
+        this.loading = true;
+        this.params = Object.assign(this.params || {}, {
+            __form: {
+                tenant: this.tenant,
+                className: this.className,
+                oid: this.oid,
+                copyOid: this.copyOid,
+                template: this.template
+            }
+        });
+        this.service.getFormTemplateConfig(this.tenant, this.className, this.template).subscribe(response => {
+            this.config = response.data.template;
+            if (this.onlyFrontEnd) {
+                this.loading = false;
+            }
+            else if (this.copyOid || this.oid) {
+                this.service.getOne(this.tenant, this.className, this.copyOid || this.oid, this.template, this.copyOid)
+                    .subscribe(response => {
+                    this.model = response.data;
+                    this.loading = false;
+                });
+            }
+            else {
+                this.service.getInitModelByTemplate(this.tenant, this.className, this.template).subscribe(response => {
+                    this.model = response.data;
+                    this.loading = false;
+                });
+            }
+        });
     }
-    onSelectionChanged($event) {
-        this.onDxDataGridSelectionChanged.emit($event);
+    submitForm() {
+        this.validate().then(isValid => {
+            if (isValid) {
+                const mergeModel = Object.assign({}, this.model);
+                if (this.extraAttrMap) {
+                    for (const entry of this.extraAttrMap) {
+                        mergeModel[entry.name] = entry.value;
+                    }
+                }
+                this.service.createOrUpdate(this.tenant, this.className, Object.assign({ oid: this.oid }, mergeModel)).subscribe(response => {
+                    this.submitCallback.emit(response);
+                });
+            }
+            else {
+                this.submitCallback.emit({ success: false });
+            }
+        });
     }
-    onEditorPreparing($event) {
-        if ($event.parentType === 'filterRow' && $event.editorName === 'dxTextBox') {
-            $event.editorOptions.valueChangeEvent = 'blur';
-            $event.editorOptions.onEnterKey = (e) => {
-                e.component.blur();
-            };
+    scrollToAnchorPoint(anchorPointId) {
+        const points = this.elementRef.nativeElement.getElementsByClassName('__anchor_point_' + anchorPointId);
+        if (points.length > 0) {
+            points[0].scrollIntoView();
         }
     }
+    validate() {
+        return validate_group(this.validator);
+    }
+    submit() {
+        this.formSubmitter.instance.element().click();
+    }
 }
-DataGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DataGridComponent, deps: [{ token: DataGridFactory }, { token: DataGridService }], 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", enableMasterDetail: "enableMasterDetail", dataGridName: "dataGridName", selectionMode: "selectionMode", customColumnFn: "customColumnFn" }, outputs: { onDxDataGridCellPrepared: "onDxDataGridCellPrepared", onDxDataGridContentReady: "onDxDataGridContentReady", onDxDataGridSelectionChanged: "onDxDataGridSelectionChanged" }, providers: [DataGridService], queries: [{ propertyName: "masterDetailTemplate", first: true, predicate: MasterDetailTemplateDirective, descendants: true }, { propertyName: "rowButtonsTemplate", first: true, predicate: RowButtonsTemplateDirective, descendants: true }, { propertyName: "instanceLinkTemplate", first: true, predicate: InstanceLinkTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "dxDataGrid", first: true, predicate: DxDataGridComponent, descendants: true, static: true }], ngImport: i0, template: "<dx-data-grid [dataSource]=\"dataSource\"\r\n              [columns]=\"columns\"\r\n              [syncLookupFilterValues]=\"false\"\r\n              [showBorders]=\"true\"\r\n              [showRowLines]=\"true\"\r\n              [hoverStateEnabled]=\"true\"\r\n              [rowAlternationEnabled]=\"true\"\r\n              [columnAutoWidth]=\"true\"\r\n              [allowColumnResizing]=\"true\"\r\n              columnResizingMode=\"widget\"\r\n              dateSerializationFormat=\"yyyy/MM/dd HH:mm:ss\"\r\n              (onCellPrepared)=\"onCellPrepared($event)\"\r\n              (onEditorPreparing)=\"onEditorPreparing($event)\"\r\n              (onContentReady)=\"onContentReady($event)\"\r\n              (onSelectionChanged)=\"onSelectionChanged($event)\"\r\n              (onRowExpanding)=\"$event.component.collapseAll(-1)\">\r\n  <dxo-sorting mode=\"multiple\"></dxo-sorting>\r\n  <dxo-selection [mode]=\"selectionMode\" selectAllMode=\"page\" showCheckBoxesMode=\"always\"></dxo-selection>\r\n  <dxo-header-filter [visible]=\"true\">\r\n    <dxo-search [enabled]=\"true\"></dxo-search>\r\n    <dxo-texts [ok]=\"'\u786E\u5B9A'\"></dxo-texts>\r\n  </dxo-header-filter>\r\n  <dxo-filter-row [visible]=\"true\"></dxo-filter-row>\r\n  <dxo-remote-operations [filtering]=\"true\"\r\n                         [sorting]=\"true\"\r\n                         [paging]=\"true\">\r\n  </dxo-remote-operations>\r\n  <dxo-master-detail [enabled]=\"enableMasterDetail\" template=\"masterDetailTemplate\"></dxo-master-detail>\r\n  <dxo-paging [pageSize]=\"15\"></dxo-paging>\r\n  <dxo-pager [visible]=\"true\"\r\n             [showInfo]=\"true\"\r\n             infoText=\"\u7B2C{0}\u9875\uFF0C\u5171{1}\u9875\uFF08\u5171{2}\u4E2A\u9879\u76EE\uFF09\"\r\n             [showPageSizeSelector]=\"true\"\r\n             [allowedPageSizes]=\"[15, 30, 50]\"\r\n  ></dxo-pager>\r\n  <dxo-scrolling showScrollbar=\"always\"></dxo-scrolling>\r\n  <div *dxTemplate=\"let cellInfo of 'masterDetailTemplate'\">\r\n    <ng-container [ngTemplateOutlet]=\"masterDetailTemplate.templateRef\"\r\n                  [ngTemplateOutletContext]=\"{$implicit: cellInfo, cellTemplateLoaded$: service.cellTemplateLoaded$}\"></ng-container>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'rowButtonsTemplate'\">\r\n    <ng-container [ngTemplateOutlet]=\"rowButtonsTemplate.templateRef\"\r\n                  [ngTemplateOutletContext]=\"{$implicit: cellInfo, cellTemplateLoaded$: service.cellTemplateLoaded$}\"></ng-container>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'instanceLinkTemplate'\">\r\n    <ng-container [ngTemplateOutlet]=\"instanceLinkTemplate.templateRef\"\r\n                  [ngTemplateOutletContext]=\"{$implicit: cellInfo, cellTemplateLoaded$: service.cellTemplateLoaded$}\"></ng-container>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'rowIndexTemplate'\">\r\n    {{ cellInfo.rowIndex + 1 }}\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'multipleValueCellTemplate'\">\r\n    <div [innerHTML]=\"convertMultipleValueCellText(cellInfo)\"></div>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'textCellTemplate'\">\r\n    <div #textDiv style=\"text-overflow: ellipsis; overflow: hidden; cursor: pointer;\">{{ cellInfo.value }}</div>\r\n    <dx-tooltip [target]=\"textDiv\"\r\n                [position]=\"'top'\"\r\n                [showEvent]=\"'click'\">\r\n      <div *dxTemplate=\"let data of 'content'\">\r\n        <p style=\"max-width: 320px; text-align: left; white-space: normal;\" [innerText]=\"cellInfo.value\"></p>\r\n      </div>\r\n    </dx-tooltip>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'fileCellTemplate'\">\r\n    <ng-container *ngFor=\"let file of cellInfo.value\">\r\n      <rs-file-cell-template [file]=\"file\"></rs-file-cell-template>\r\n    </ng-container>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'userCellTemplate'\">\r\n    <ng-container *ngFor=\"let user of getOriginalValue(cellInfo, 'userInfo')\">\r\n      <rs-user-info-template [uid]=\"user\"></rs-user-info-template>\r\n    </ng-container>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'unitCellTemplate'\">\r\n    <ng-container *ngFor=\"let unit of getOriginalValue(cellInfo, 'unitInfo')\">\r\n      <rs-unit-info-template [uid]=\"unit\"></rs-unit-info-template>\r\n    </ng-container>\r\n  </div>\r\n</dx-data-grid>\r\n", styles: [":host{display:flex;flex-flow:column nowrap}:host dx-data-grid{flex:auto;height:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i5$1.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: i6$1.DxoSearchComponent, selector: "dxo-search", inputs: ["editorOptions", "enabled", "timeout", "mode", "searchExpr"] }, { kind: "component", type: i6$1.DxoSelectionComponent, selector: "dxo-selection", inputs: ["allowSelectAll", "recursive", "selectByClick", "deferred", "mode", "selectAllMode", "showCheckBoxesMode"] }, { kind: "component", type: i6$1.DxoTextsComponent, selector: "dxo-texts", inputs: ["fix", "leftPosition", "rightPosition", "unfix", "addRow", "cancelAllChanges", "cancelRowChanges", "confirmDeleteMessage", "confirmDeleteTitle", "deleteRow", "editRow", "saveAllChanges", "saveRowChanges", "undeleteRow", "validationCancelChanges", "exportAll", "exportSelectedRows", "exportTo", "clearFilter", "createFilter", "filterEnabledHint", "groupByThisColumn", "groupContinuedMessage", "groupContinuesMessage", "ungroup", "ungroupAll", "cancel", "emptyValue", "ok", "avg", "avgOtherColumn", "count", "max", "maxOtherColumn", "min", "minOtherColumn", "sum", "sumOtherColumn", "allFields", "columnFields", "dataFields", "filterFields", "rowFields", "columnFieldArea", "dataFieldArea", "filterFieldArea", "rowFieldArea", "collapseAll", "dataNotAvailable", "expandAll", "exportToExcel", "grandTotal", "noData", "removeAllSorting", "showFieldChooser", "sortColumnBySummary", "sortRowBySummary", "total", "addRowToNode"] }, { kind: "component", type: i6$1.DxoHeaderFilterComponent, selector: "dxo-header-filter", inputs: ["allowSearch", "allowSelectAll", "dataSource", "groupInterval", "height", "search", "searchMode", "width", "searchTimeout", "texts", "visible", "showRelevantValues"] }, { kind: "component", type: i6$1.DxoFilterRowComponent, selector: "dxo-filter-row", inputs: ["applyFilter", "applyFilterText", "betweenEndText", "betweenStartText", "operationDescriptions", "resetOperationText", "showAllText", "showOperationChooser", "visible"] }, { kind: "component", type: i6$1.DxoMasterDetailComponent, selector: "dxo-master-detail", inputs: ["autoExpandAll", "enabled", "template"] }, { kind: "component", type: i6$1.DxoPagerComponent, selector: "dxo-pager", inputs: ["allowedPageSizes", "displayMode", "infoText", "label", "showInfo", "showNavigationButtons", "showPageSizeSelector", "visible"] }, { kind: "component", type: i6$1.DxoPagingComponent, selector: "dxo-paging", inputs: ["enabled", "pageIndex", "pageSize"], outputs: ["pageIndexChange", "pageSizeChange"] }, { kind: "component", type: i6$1.DxoRemoteOperationsComponent, selector: "dxo-remote-operations", inputs: ["filtering", "grouping", "groupPaging", "paging", "sorting", "summary"] }, { kind: "component", type: i6$1.DxoScrollingComponent, selector: "dxo-scrolling", inputs: ["columnRenderingMode", "mode", "preloadEnabled", "renderAsync", "rowRenderingMode", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative"] }, { kind: "component", type: i6$1.DxoSortingComponent, selector: "dxo-sorting", inputs: ["ascendingText", "clearText", "descendingText", "mode", "showSortIndexes"] }, { kind: "component", type: i5.DxTooltipComponent, selector: "dx-tooltip", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showEvent", "target", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showEventChange", "targetChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: FileCellTemplateComponent, selector: "rs-file-cell-template", inputs: ["file"] }, { kind: "component", type: UserInfoTemplateComponent, selector: "rs-user-info-template", inputs: ["uid"] }, { kind: "component", type: UnitInfoTemplateComponent, selector: "rs-unit-info-template", inputs: ["uid"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DataGridComponent, decorators: [{
+FormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormComponent, deps: [{ token: i0.ViewContainerRef }, { token: FormService }, { token: i0.ElementRef }], 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", oid: "oid", copyOid: "copyOid", template: "template", extraAttrMap: "extraAttrMap", opener: "opener", params: "params", tabViewContainerRef: "tabViewContainerRef", onlyFrontEnd: "onlyFrontEnd", model: "model", readonly: "readonly" }, outputs: { submitCallback: "submitCallback" }, providers: [FormService], viewQueries: [{ propertyName: "validator", first: true, predicate: DxValidationGroupComponent, descendants: true }, { propertyName: "formSubmitter", first: true, predicate: ["formSubmitter"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<dx-load-panel [container]=\"viewContainerRef.element.nativeElement\" [showPane]=\"false\"\r\n               [visible]=\"loading\">\r\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\r\n</dx-load-panel>\r\n<dx-validation-group *ngIf=\"!loading\">\r\n  <rs-box-container [config]=\"config\"\r\n                    [model]=\"model\"\r\n                    [opener]=\"this\"\r\n                    [params]=\"params\"\r\n                    [tabViewContainerRef]=\"tabViewContainerRef\"\r\n                    [readonly]=\"readonly\"></rs-box-container>\r\n  <dx-button #formSubmitter [visible]=\"false\" (onClick)=\"submitForm()\"></dx-button>\r\n</dx-validation-group>\r\n", styles: [":host{padding:12px 24px 20px}:host dx-validation-group{display:flex;flex-flow:row nowrap}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BoxContainerComponent, selector: "rs-box-container", inputs: ["config", "model", "opener", "params", "readonly", "tabViewContainerRef"] }, { kind: "component", type: i6$1.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }, { kind: "component", type: i4.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"] }, { kind: "component", type: i6.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: i7.DxValidationGroupComponent, selector: "dx-validation-group", inputs: ["elementAttr", "height", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "elementAttrChange", "heightChange", "widthChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-data-grid', providers: [DataGridService], template: "<dx-data-grid [dataSource]=\"dataSource\"\r\n              [columns]=\"columns\"\r\n              [syncLookupFilterValues]=\"false\"\r\n              [showBorders]=\"true\"\r\n              [showRowLines]=\"true\"\r\n              [hoverStateEnabled]=\"true\"\r\n              [rowAlternationEnabled]=\"true\"\r\n              [columnAutoWidth]=\"true\"\r\n              [allowColumnResizing]=\"true\"\r\n              columnResizingMode=\"widget\"\r\n              dateSerializationFormat=\"yyyy/MM/dd HH:mm:ss\"\r\n              (onCellPrepared)=\"onCellPrepared($event)\"\r\n              (onEditorPreparing)=\"onEditorPreparing($event)\"\r\n              (onContentReady)=\"onContentReady($event)\"\r\n              (onSelectionChanged)=\"onSelectionChanged($event)\"\r\n              (onRowExpanding)=\"$event.component.collapseAll(-1)\">\r\n  <dxo-sorting mode=\"multiple\"></dxo-sorting>\r\n  <dxo-selection [mode]=\"selectionMode\" selectAllMode=\"page\" showCheckBoxesMode=\"always\"></dxo-selection>\r\n  <dxo-header-filter [visible]=\"true\">\r\n    <dxo-search [enabled]=\"true\"></dxo-search>\r\n    <dxo-texts [ok]=\"'\u786E\u5B9A'\"></dxo-texts>\r\n  </dxo-header-filter>\r\n  <dxo-filter-row [visible]=\"true\"></dxo-filter-row>\r\n  <dxo-remote-operations [filtering]=\"true\"\r\n                         [sorting]=\"true\"\r\n                         [paging]=\"true\">\r\n  </dxo-remote-operations>\r\n  <dxo-master-detail [enabled]=\"enableMasterDetail\" template=\"masterDetailTemplate\"></dxo-master-detail>\r\n  <dxo-paging [pageSize]=\"15\"></dxo-paging>\r\n  <dxo-pager [visible]=\"true\"\r\n             [showInfo]=\"true\"\r\n             infoText=\"\u7B2C{0}\u9875\uFF0C\u5171{1}\u9875\uFF08\u5171{2}\u4E2A\u9879\u76EE\uFF09\"\r\n             [showPageSizeSelector]=\"true\"\r\n             [allowedPageSizes]=\"[15, 30, 50]\"\r\n  ></dxo-pager>\r\n  <dxo-scrolling showScrollbar=\"always\"></dxo-scrolling>\r\n  <div *dxTemplate=\"let cellInfo of 'masterDetailTemplate'\">\r\n    <ng-container [ngTemplateOutlet]=\"masterDetailTemplate.templateRef\"\r\n                  [ngTemplateOutletContext]=\"{$implicit: cellInfo, cellTemplateLoaded$: service.cellTemplateLoaded$}\"></ng-container>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'rowButtonsTemplate'\">\r\n    <ng-container [ngTemplateOutlet]=\"rowButtonsTemplate.templateRef\"\r\n                  [ngTemplateOutletContext]=\"{$implicit: cellInfo, cellTemplateLoaded$: service.cellTemplateLoaded$}\"></ng-container>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'instanceLinkTemplate'\">\r\n    <ng-container [ngTemplateOutlet]=\"instanceLinkTemplate.templateRef\"\r\n                  [ngTemplateOutletContext]=\"{$implicit: cellInfo, cellTemplateLoaded$: service.cellTemplateLoaded$}\"></ng-container>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'rowIndexTemplate'\">\r\n    {{ cellInfo.rowIndex + 1 }}\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'multipleValueCellTemplate'\">\r\n    <div [innerHTML]=\"convertMultipleValueCellText(cellInfo)\"></div>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'textCellTemplate'\">\r\n    <div #textDiv style=\"text-overflow: ellipsis; overflow: hidden; cursor: pointer;\">{{ cellInfo.value }}</div>\r\n    <dx-tooltip [target]=\"textDiv\"\r\n                [position]=\"'top'\"\r\n                [showEvent]=\"'click'\">\r\n      <div *dxTemplate=\"let data of 'content'\">\r\n        <p style=\"max-width: 320px; text-align: left; white-space: normal;\" [innerText]=\"cellInfo.value\"></p>\r\n      </div>\r\n    </dx-tooltip>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'fileCellTemplate'\">\r\n    <ng-container *ngFor=\"let file of cellInfo.value\">\r\n      <rs-file-cell-template [file]=\"file\"></rs-file-cell-template>\r\n    </ng-container>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'userCellTemplate'\">\r\n    <ng-container *ngFor=\"let user of getOriginalValue(cellInfo, 'userInfo')\">\r\n      <rs-user-info-template [uid]=\"user\"></rs-user-info-template>\r\n    </ng-container>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'unitCellTemplate'\">\r\n    <ng-container *ngFor=\"let unit of getOriginalValue(cellInfo, 'unitInfo')\">\r\n      <rs-unit-info-template [uid]=\"unit\"></rs-unit-info-template>\r\n    </ng-container>\r\n  </div>\r\n</dx-data-grid>\r\n", styles: [":host{display:flex;flex-flow:column nowrap}:host dx-data-grid{flex:auto;height:0}\n"] }]
-        }], ctorParameters: function () { return [{ type: DataGridFactory }, { type: DataGridService }]; }, propDecorators: { tenant: [{
+            args: [{ selector: 'rs-form', providers: [FormService], template: "<dx-load-panel [container]=\"viewContainerRef.element.nativeElement\" [showPane]=\"false\"\r\n               [visible]=\"loading\">\r\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\r\n</dx-load-panel>\r\n<dx-validation-group *ngIf=\"!loading\">\r\n  <rs-box-container [config]=\"config\"\r\n                    [model]=\"model\"\r\n                    [opener]=\"this\"\r\n                    [params]=\"params\"\r\n                    [tabViewContainerRef]=\"tabViewContainerRef\"\r\n                    [readonly]=\"readonly\"></rs-box-container>\r\n  <dx-button #formSubmitter [visible]=\"false\" (onClick)=\"submitForm()\"></dx-button>\r\n</dx-validation-group>\r\n", styles: [":host{padding:12px 24px 20px}:host dx-validation-group{display:flex;flex-flow:row nowrap}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: FormService }, { type: i0.ElementRef }]; }, propDecorators: { tenant: [{
                 type: Input
             }], className: [{
                 type: Input
-            }], view: [{
+            }], oid: [{
                 type: Input
-            }], filter: [{
+            }], copyOid: [{
                 type: Input
-            }], enableMasterDetail: [{
+            }], template: [{
                 type: Input
-            }], dataGridName: [{
+            }], extraAttrMap: [{
                 type: Input
-            }], selectionMode: [{
+            }], opener: [{
                 type: Input
-            }], customColumnFn: [{
+            }], params: [{
                 type: Input
-            }], onDxDataGridCellPrepared: [{
-                type: Output
-            }], onDxDataGridContentReady: [{
-                type: Output
-            }], onDxDataGridSelectionChanged: [{
-                type: Output
-            }], dxDataGrid: [{
+            }], tabViewContainerRef: [{
+                type: Input
+            }], onlyFrontEnd: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], validator: [{
                 type: ViewChild,
-                args: [DxDataGridComponent, { static: true }]
-            }], masterDetailTemplate: [{
-                type: ContentChild,
-                args: [MasterDetailTemplateDirective]
-            }], rowButtonsTemplate: [{
-                type: ContentChild,
-                args: [RowButtonsTemplateDirective]
-            }], instanceLinkTemplate: [{
-                type: ContentChild,
-                args: [InstanceLinkTemplateDirective]
+                args: [DxValidationGroupComponent]
+            }], formSubmitter: [{
+                type: ViewChild,
+                args: ['formSubmitter']
+            }], submitCallback: [{
+                type: Output
             }] } });
 
-class DataGridModule {
+class DataDetailComponent {
+    constructor(viewContainerRef, service) {
+        this.viewContainerRef = viewContainerRef;
+        this.service = service;
+        this.sections = [];
+        this.loading = false;
+    }
+    ngOnInit() {
+        this.loading = true;
+        this.service.getSectionList(this.tenant, this.className, this.oid).subscribe(response => {
+            window.coast.tabManager.add.next({
+                id: 'detail:' + this.tenant + '_' + this.className + '_' + this.oid,
+                title: response.data.title
+            });
+            this.sections = response.data.list;
+            this.loading = false;
+        });
+    }
 }
-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,
-        FileCellTemplateComponent,
-        InstanceLinkTemplateDirective,
-        MasterDetailTemplateDirective,
-        RowButtonsTemplateDirective,
-        UserInfoTemplateComponent,
-        UnitInfoTemplateComponent], imports: [CommonModule,
-        DevExtremeModule], exports: [DataGridComponent,
-        InstanceLinkTemplateDirective,
-        MasterDetailTemplateDirective,
-        RowButtonsTemplateDirective] });
-DataGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DataGridModule, imports: [CommonModule,
-        DevExtremeModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DataGridModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        DataGridComponent,
-                        FileCellTemplateComponent,
-                        InstanceLinkTemplateDirective,
-                        MasterDetailTemplateDirective,
-                        RowButtonsTemplateDirective,
-                        UserInfoTemplateComponent,
-                        UnitInfoTemplateComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        DevExtremeModule
-                    ],
-                    exports: [
-                        DataGridComponent,
-                        InstanceLinkTemplateDirective,
-                        MasterDetailTemplateDirective,
-                        RowButtonsTemplateDirective
-                    ]
-                }]
-        }] });
+DataDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", 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.7", 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\">\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;padding:24px;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, #dddddd)}: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: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i6$1.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }, { kind: "component", type: i6.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", "opener", "params", "tabViewContainerRef", "onlyFrontEnd", "model", "readonly"], outputs: ["submitCallback"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", 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\">\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;padding:24px;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, #dddddd)}: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 DataDetailService {
-    constructor(http) {
-        this.http = http;
+class DrawerComponent {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.size = 'default';
+        this._width = '480px';
     }
-    getSectionList(tenant, className, oid) {
-        return this.http.get('api/data/custom', {
-            params: {
-                tenant,
-                className,
-                oid,
-                executor: 'com.cs.system.section.LoadSections'
+    ngOnInit() {
+        if (this.size === 'large') {
+            this._width = '960px';
+        }
+    }
+    show() {
+        // 若存在多层抽屉，仅保留最上层遮罩颜色，下层遮罩设置为透明
+        const nodeName = this.elementRef.nativeElement.nodeName;
+        const drawers = this._parentViewContainerRef.element.nativeElement.parentElement.querySelectorAll(nodeName);
+        for (let i = 0; i < drawers.length; i++) {
+            if (i === drawers.length - 1) {
+                drawers[i].querySelector('.drawer-backdrop').style.backgroundColor = 'rgba(37, 43, 58, 0.05)';
             }
-        });
+            else {
+                drawers[i].querySelector('.drawer-backdrop').style.backgroundColor = 'rgba(37, 43, 58, 0)';
+            }
+        }
+    }
+    hide($event, backdrop) {
+        // 在service中重写
+    }
+    ngOnDestroy() {
+        // 若存在多层抽屉，下一层遮罩设置为不透明
+        const nodeName = this.elementRef.nativeElement.nodeName;
+        const nextDrawer = this._parentViewContainerRef.element.nativeElement.parentElement.querySelector(nodeName + ':nth-last-child(2)');
+        if (nextDrawer) {
+            nextDrawer.querySelector('.drawer-backdrop').style.backgroundColor = 'rgba(37, 43, 58, 0.05)';
+        }
     }
 }
-DataDetailService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DataDetailService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-DataDetailService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DataDetailService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", 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.7", ngImport: i0, type: DrawerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+DrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DrawerComponent, selector: "rs-drawer", ngImport: i0, template: "<div #drawerBackdrop class=\"drawer-backdrop\" (click)=\"hide($event, drawerBackdrop)\">\n  <div class=\"drawer\" [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=\"40px\" icon=\"coast-icon coast-icon-arrow-right-filling\" (onClick)=\"hide($event)\"></dx-button>\n    </div>\n  </div>\n</div>\n", styles: [":host .drawer-backdrop{position:absolute;inset:0;z-index:calc(var(--coast-z-index-drawer, 1040) - 1)}:host .drawer-backdrop .drawer{position:absolute;right:0;height:100%;z-index:var(--coast-z-index-drawer, 1040);background-color:var(--coast-base-bg-color, #fff);display:flex;flex-flow:column nowrap}:host .drawer-backdrop .drawer .drawer-header{flex:0 0 36px;padding:8px;border-bottom:1px solid var(--coast-border-color, #dddddd);display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-end}:host .drawer-backdrop .drawer .drawer-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .drawer-backdrop .drawer .drawer-close{position:absolute;height:100%;width:20px;top:0;left:-20px;display:flex;flex-flow:row nowrap;align-items:center}\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: i4.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.7", ngImport: i0, type: DrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rs-drawer', template: "<div #drawerBackdrop class=\"drawer-backdrop\" (click)=\"hide($event, drawerBackdrop)\">\n  <div class=\"drawer\" [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=\"40px\" icon=\"coast-icon coast-icon-arrow-right-filling\" (onClick)=\"hide($event)\"></dx-button>\n    </div>\n  </div>\n</div>\n", styles: [":host .drawer-backdrop{position:absolute;inset:0;z-index:calc(var(--coast-z-index-drawer, 1040) - 1)}:host .drawer-backdrop .drawer{position:absolute;right:0;height:100%;z-index:var(--coast-z-index-drawer, 1040);background-color:var(--coast-base-bg-color, #fff);display:flex;flex-flow:column nowrap}:host .drawer-backdrop .drawer .drawer-header{flex:0 0 36px;padding:8px;border-bottom:1px solid var(--coast-border-color, #dddddd);display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-end}:host .drawer-backdrop .drawer .drawer-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .drawer-backdrop .drawer .drawer-close{position:absolute;height:100%;width:20px;top:0;left:-20px;display:flex;flex-flow:row nowrap;align-items:center}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 
-class FormService {
-    constructor(http) {
-        this.http = http;
+class DrawerService {
+    constructor() {
     }
-    getFormTemplateConfig(tenant, className, template) {
-        return this.http.get('api/metadata/form/' + className, {
-            params: {
-                tenant,
-                template: template || ''
+    open(viewContainerRef, size = 'default', contentTemplate, contentTemplateContext, headerTemplate, headerTemplateContext) {
+        const drawerRef = viewContainerRef.createComponent(DrawerComponent);
+        drawerRef.instance.hide = ($event, backdrop) => {
+            if ($event.target === backdrop) {
+                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._parentViewContainerRef = viewContainerRef;
+        drawerRef.instance.show();
+        return drawerRef.instance;
     }
-    getOne(tenant, className, oid, template, isCopy) {
-        let api = 'api/data/' + className + '/' + oid;
-        return this.http.get(api, {
-            params: {
-                tenant,
-                template: template || '',
-                isCopy: !!isCopy
-            }
-        });
+}
+DrawerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DrawerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DrawerService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DrawerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class InstanceLinkTemplateComponent {
+    constructor(service, drawerService) {
+        this.service = service;
+        this.drawerService = drawerService;
     }
-    getInitModelByTemplate(tenant, className, template) {
-        let api = 'api/data/' + className + '/new';
-        return this.http.get(api, {
-            params: {
-                tenant,
-                className,
-                template: template || ''
+    openNewTab($event) {
+        var _a;
+        (_a = $event.event) === null || _a === void 0 ? void 0 : _a.stopPropagation();
+        if (!window.coast.tabManager) {
+            notify_warning('此操作仅能在coast-web项目中执行，type：detail，config：tenant=' + this.tenant + ',className=' + this.className + ',oid=' + this.oid);
+            return;
+        }
+        window.coast.tabManager.add.next({
+            type: 'detail',
+            id: 'detail:' + this.tenant + '_' + this.className + '_' + this.oid,
+            title: '',
+            component: DataDetailComponent,
+            config: {
+                tenant: this.tenant,
+                className: this.className,
+                oid: this.oid
             }
         });
     }
-    createOrUpdate(tenant, className, model) {
-        let api = 'api/data/' + className;
-        if (model.oid) {
-            api += '/' + model.oid;
+    openDrawer($event) {
+        var _a;
+        (_a = $event.event) === null || _a === void 0 ? void 0 : _a.stopPropagation();
+        this.drawerService.open(this.drawerViewContainerRef, 'default', this.drawerFormContentTemplate, {
+            template: this.drawerFormTemplate || 'About'
+        }, this.drawerFormHeaderTemplate);
+    }
+}
+InstanceLinkTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: InstanceLinkTemplateComponent, deps: [{ token: DataGridService }, { token: DrawerService }], target: i0.ɵɵFactoryTarget.Component });
+InstanceLinkTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: InstanceLinkTemplateComponent, selector: "rs-instance-link-template", inputs: { tenant: "tenant", className: "className", oid: "oid", instanceLinkType: "instanceLinkType", drawerViewContainerRef: "drawerViewContainerRef", drawerFormTemplate: "drawerFormTemplate" }, viewQueries: [{ propertyName: "drawerFormHeaderTemplate", first: true, predicate: ["drawerFormHeaderTemplate"], descendants: true, static: true }, { propertyName: "drawerFormContentTemplate", first: true, predicate: ["drawerFormContentTemplate"], descendants: true, static: true }], ngImport: i0, template: "<dx-button *ngIf=\"instanceLinkType === 'tab'\"\n           type=\"default\"\n           stylingMode=\"text\"\n           icon=\"coast-icon coast-icon-send\"\n           hint=\"\u67E5\u770B\u8BE6\u60C5\"\n           (onClick)=\"openNewTab($event)\"></dx-button>\n<dx-button *ngIf=\"instanceLinkType === 'drawer'\"\n           type=\"default\"\n           stylingMode=\"text\"\n           icon=\"coast-icon coast-icon-send\"\n           hint=\"\u67E5\u770B\u8BE6\u60C5\"\n           (onClick)=\"openDrawer($event)\"></dx-button>\n<ng-template #drawerFormHeaderTemplate>\n  <dx-button icon=\"coast-icon coast-icon-send\" text=\"\u5728\u65B0\u9009\u9879\u5361\u4E2D\u67E5\u770B\" (onClick)=\"openNewTab($event)\"></dx-button>\n</ng-template>\n<ng-template #drawerFormContentTemplate let-modalContext>\n  <rs-form [tenant]=\"tenant\"\n           [className]=\"className\"\n           [oid]=\"oid\"\n           [template]=\"modalContext.template\"\n           [readonly]=\"true\"></rs-form>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.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"] }, { kind: "component", type: FormComponent, selector: "rs-form", inputs: ["tenant", "className", "oid", "copyOid", "template", "extraAttrMap", "opener", "params", "tabViewContainerRef", "onlyFrontEnd", "model", "readonly"], outputs: ["submitCallback"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: InstanceLinkTemplateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rs-instance-link-template', template: "<dx-button *ngIf=\"instanceLinkType === 'tab'\"\n           type=\"default\"\n           stylingMode=\"text\"\n           icon=\"coast-icon coast-icon-send\"\n           hint=\"\u67E5\u770B\u8BE6\u60C5\"\n           (onClick)=\"openNewTab($event)\"></dx-button>\n<dx-button *ngIf=\"instanceLinkType === 'drawer'\"\n           type=\"default\"\n           stylingMode=\"text\"\n           icon=\"coast-icon coast-icon-send\"\n           hint=\"\u67E5\u770B\u8BE6\u60C5\"\n           (onClick)=\"openDrawer($event)\"></dx-button>\n<ng-template #drawerFormHeaderTemplate>\n  <dx-button icon=\"coast-icon coast-icon-send\" text=\"\u5728\u65B0\u9009\u9879\u5361\u4E2D\u67E5\u770B\" (onClick)=\"openNewTab($event)\"></dx-button>\n</ng-template>\n<ng-template #drawerFormContentTemplate let-modalContext>\n  <rs-form [tenant]=\"tenant\"\n           [className]=\"className\"\n           [oid]=\"oid\"\n           [template]=\"modalContext.template\"\n           [readonly]=\"true\"></rs-form>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: DataGridService }, { type: DrawerService }]; }, propDecorators: { tenant: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], oid: [{
+                type: Input
+            }], instanceLinkType: [{
+                type: Input
+            }], drawerViewContainerRef: [{
+                type: Input
+            }], drawerFormTemplate: [{
+                type: Input
+            }], drawerFormHeaderTemplate: [{
+                type: ViewChild,
+                args: ['drawerFormHeaderTemplate', { static: true }]
+            }], drawerFormContentTemplate: [{
+                type: ViewChild,
+                args: ['drawerFormContentTemplate', { static: true }]
+            }] } });
+
+class UnitInfoTemplateComponent {
+    constructor(service, domSanitizer) {
+        this.service = service;
+        this.domSanitizer = domSanitizer;
+    }
+    ngOnInit() {
+        const needRemoteDisplayName = Array.isArray(this.cellInfo.value);
+        if (!needRemoteDisplayName) {
+            this.displayName = this.cellInfo.value;
         }
-        return this.http.post(api, model, {
-            params: {
-                tenant
+        this.service.getUnitInfo(this.uid).subscribe(response => {
+            if (needRemoteDisplayName) {
+                this.displayName = response.displayName;
+            }
+            const unitInfo = response.unitInfo;
+            let content = '<table>';
+            for (const item of unitInfo) {
+                content += `
+            <tr>
+                <td style="text-align: right;">${item.caption}：</td>
+                <td style="text-align: left;">${item.value}</td>
+            </tr>
+      `;
             }
+            content += '</table>';
+            this.content = this.domSanitizer.bypassSecurityTrustHtml(content);
+            // 重绘表格宽高
+            setTimeout(() => {
+                this.service.cellTemplateLoaded$.emit();
+            });
         });
     }
 }
-FormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-FormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
+UnitInfoTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: UnitInfoTemplateComponent, deps: [{ token: DataGridService }, { token: i2$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+UnitInfoTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: UnitInfoTemplateComponent, selector: "rs-unit-info-template", inputs: { uid: "uid", cellInfo: "cellInfo" }, ngImport: i0, template: "<dx-button #textDiv type=\"default\" stylingMode=\"text\" (onClick)=\"$event.event?.stopPropagation()\">\n  {{ displayName }}\n  <dx-tooltip [target]=\"textDiv.instance.element()\"\n              [position]=\"'top'\"\n              [showEvent]=\"'click'\">\n    <div *dxTemplate=\"let data of 'content'\">\n      <div [innerHTML]=\"content\"></div>\n    </div>\n  </dx-tooltip>\n</dx-button>\n<br/>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i4.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"] }, { kind: "component", type: i5.DxTooltipComponent, selector: "dx-tooltip", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showEvent", "target", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showEventChange", "targetChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: UnitInfoTemplateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rs-unit-info-template', template: "<dx-button #textDiv type=\"default\" stylingMode=\"text\" (onClick)=\"$event.event?.stopPropagation()\">\n  {{ displayName }}\n  <dx-tooltip [target]=\"textDiv.instance.element()\"\n              [position]=\"'top'\"\n              [showEvent]=\"'click'\">\n    <div *dxTemplate=\"let data of 'content'\">\n      <div [innerHTML]=\"content\"></div>\n    </div>\n  </dx-tooltip>\n</dx-button>\n<br/>\n" }]
+        }], ctorParameters: function () { return [{ type: DataGridService }, { type: i2$2.DomSanitizer }]; }, propDecorators: { uid: [{
+                type: Input
+            }], cellInfo: [{
+                type: Input
+            }] } });
 
-class FormComponent {
-    constructor(viewContainerRef, service, elementRef) {
-        this.viewContainerRef = viewContainerRef;
+class UserInfoTemplateComponent {
+    constructor(service, domSanitizer) {
         this.service = service;
-        this.elementRef = elementRef;
-        this.tenant = 'T';
-        this.onlyFrontEnd = false; // 仅前端，不通过oid获取实例model
-        this.readonly = false;
-        this.submitCallback = new EventEmitter();
-        this.loading = false;
-        this.changeFilter = new ChangeFilter();
+        this.domSanitizer = domSanitizer;
     }
     ngOnInit() {
-        this.load();
-        this.changeFilter.anyNotFirst(['tenant', 'className', 'oid', 'copyOid', 'template'], () => {
-            this.load();
+        const needRemoteDisplayName = Array.isArray(this.cellInfo.value);
+        if (!needRemoteDisplayName) {
+            this.displayName = this.cellInfo.value;
+        }
+        this.service.getUserInfo(this.uid).subscribe(response => {
+            if (needRemoteDisplayName) {
+                this.displayName = response.displayName;
+            }
+            const userInfo = response.userInfo;
+            let content = '<table>';
+            for (const item of userInfo) {
+                content += `
+            <tr>
+                <td style="text-align: right;">${item.caption}：</td>
+                <td style="text-align: left;">${item.value}</td>
+            </tr>
+      `;
+            }
+            content += '</table>';
+            this.content = this.domSanitizer.bypassSecurityTrustHtml(content);
+            // 重绘表格宽高
+            setTimeout(() => {
+                this.service.cellTemplateLoaded$.emit();
+            });
         });
     }
-    ngOnChanges(changes) {
-        this.changeFilter.doFilter(changes);
-    }
-    ngOnDestroy() {
-        this.changeFilter.dispose();
-    }
-    load() {
-        this.loading = true;
-        this.params = Object.assign(this.params || {}, {
-            __form: {
-                tenant: this.tenant,
-                className: this.className,
-                oid: this.oid,
-                copyOid: this.copyOid,
-                template: this.template
-            }
+}
+UserInfoTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: UserInfoTemplateComponent, deps: [{ token: DataGridService }, { token: i2$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+UserInfoTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: UserInfoTemplateComponent, selector: "rs-user-info-template", inputs: { uid: "uid", cellInfo: "cellInfo" }, ngImport: i0, template: "<dx-button #textDiv type=\"default\" stylingMode=\"text\" (onClick)=\"$event.event?.stopPropagation()\">\n  {{ displayName }}\n  <dx-tooltip [target]=\"textDiv.instance.element()\"\n              [position]=\"'top'\"\n              [showEvent]=\"'click'\">\n    <div *dxTemplate=\"let data of 'content'\">\n      <div [innerHTML]=\"content\"></div>\n    </div>\n  </dx-tooltip>\n</dx-button>\n<br/>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i4.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"] }, { kind: "component", type: i5.DxTooltipComponent, selector: "dx-tooltip", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showEvent", "target", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showEventChange", "targetChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: UserInfoTemplateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rs-user-info-template', template: "<dx-button #textDiv type=\"default\" stylingMode=\"text\" (onClick)=\"$event.event?.stopPropagation()\">\n  {{ displayName }}\n  <dx-tooltip [target]=\"textDiv.instance.element()\"\n              [position]=\"'top'\"\n              [showEvent]=\"'click'\">\n    <div *dxTemplate=\"let data of 'content'\">\n      <div [innerHTML]=\"content\"></div>\n    </div>\n  </dx-tooltip>\n</dx-button>\n<br/>\n" }]
+        }], ctorParameters: function () { return [{ type: DataGridService }, { type: i2$2.DomSanitizer }]; }, propDecorators: { uid: [{
+                type: Input
+            }], cellInfo: [{
+                type: Input
+            }] } });
+
+class DataGridComponent {
+    constructor(factory, service, viewContainerRef) {
+        this.factory = factory;
+        this.service = service;
+        this.viewContainerRef = viewContainerRef;
+        this.tenant = 'T';
+        this.keyExpr = ''; // 用于实例属性选择器，加载组件值时以选中字段为主键获取选中行数据
+        this.onlyFrontEnd = false; // 仅前端，不通过获取表格数据
+        this.dataSource = {};
+        this.selectionMode = 'none';
+        this.selectedRowKeys = [];
+        this.selectedRowKeysChange = new EventEmitter();
+        this.showRowNum = true;
+        this.instanceLinkType = 'tab';
+        this.drawerInstanceLinkViewContainerRef = this.viewContainerRef;
+        this.onCellPrepared = new EventEmitter();
+        this.onContentReady = new EventEmitter();
+        this.onEditorPreparing = new EventEmitter();
+        this.onRowClick = new EventEmitter();
+        this.onRowDblClick = new EventEmitter();
+        this.onSelectionChanged = new EventEmitter();
+        this.columns = [];
+    }
+    ngOnInit() {
+        this.reload();
+        this.service.cellTemplateLoaded$.pipe(debounceTime(200)).subscribe(() => {
+            this.dxDataGrid.instance.resize();
         });
-        this.service.getFormTemplateConfig(this.tenant, this.className, this.template).subscribe(response => {
-            this.config = response.data.template;
-            if (this.onlyFrontEnd) {
-                this.loading = false;
+    }
+    reload() {
+        this.columns.length = 0;
+        this.factory.makeDataGridColumns(this.tenant, this.className, this.view).subscribe(columns => {
+            if (this.customColumnFn) {
+                this.customColumnFn(columns);
             }
-            else if (this.copyOid || this.oid) {
-                this.service.getOne(this.tenant, this.className, this.copyOid || this.oid, this.template, this.copyOid)
-                    .subscribe(response => {
-                    this.model = response.data;
-                    this.loading = false;
+            if (this.instanceLinkType === 'tab' || this.instanceLinkType === 'drawer') {
+                columns.unshift({
+                    fixed: true,
+                    width: 48,
+                    cellTemplate: 'instanceLinkTemplate',
+                    alignment: 'center',
+                    cssClass: 'cell-vertical-middle'
                 });
             }
-            else {
-                this.service.getInitModelByTemplate(this.tenant, this.className, this.template).subscribe(response => {
-                    this.model = response.data;
-                    this.loading = false;
+            if (this.showRowNum) {
+                columns.unshift({
+                    fixed: true,
+                    width: 48,
+                    cellTemplate: 'rowIndexTemplate',
+                    alignment: 'center',
+                    cssClass: 'cell-vertical-middle'
                 });
             }
+            this.columns = columns;
         });
+        if (this.onlyFrontEnd) {
+            if (this.dataSource && !Array.isArray(this.dataSource)) {
+                notify_error('if onlyFrontEnd set true, you have to set dataSource as an Array');
+            }
+        }
+        else {
+            this.dataSource = this.factory.makeDataGridDataSource(this.tenant, this.className, this.view, this.filter, this.keyExpr, this.dataGridName);
+        }
     }
-    submitForm() {
-        this.validate().then(isValid => {
-            if (isValid) {
-                if (this.extraAttrMap) {
-                    for (const entry of this.extraAttrMap) {
-                        this.model[entry.name] = entry.value;
-                    }
+    convertMultipleValueCellText(cellInfo) {
+        if (!cellInfo.value) {
+            return;
+        }
+        if (Array.isArray(cellInfo.value)) {
+            if (cellInfo.column.lookup) {
+                return cellInfo.value.map((item) => cellInfo.column.lookup.calculateCellValue(item)).join('<br />');
+            }
+            return cellInfo.value.join('<br />');
+        }
+        if (cellInfo.column.lookup) {
+            return cellInfo.column.lookup.calculateCellValue(cellInfo.value);
+        }
+        return cellInfo.value;
+    }
+    getOriginalValue(cellInfo, key) {
+        const config = cellInfo.column[key];
+        if (config) {
+            const value = cellInfo.data[config.field];
+            if (value) {
+                if (Array.isArray(value)) {
+                    return value;
                 }
-                this.service.createOrUpdate(this.tenant, this.className, Object.assign({ oid: this.oid }, this.model)).subscribe(response => {
-                    this.submitCallback.emit(response);
-                });
+                return [value];
             }
-            else {
-                this.submitCallback.emit({ success: false });
+            return [];
+        }
+        return cellInfo.data[key];
+    }
+    getSelectedRowKeys() {
+        return this.dxDataGrid.instance.getSelectedRowKeys();
+    }
+    refresh(callback) {
+        this.dxDataGrid.instance.refresh().then(() => {
+            if (callback) {
+                callback();
             }
         });
     }
-    scrollToAnchorPoint(anchorPointId) {
-        const points = this.elementRef.nativeElement.getElementsByClassName('__anchor_point_' + anchorPointId);
-        if (points.length > 0) {
-            points[0].scrollIntoView();
+    onDxDataGridEditorPreparing($event) {
+        if ($event.parentType === 'filterRow' && $event.editorName === 'dxTextBox') {
+            $event.editorOptions.valueChangeEvent = 'blur';
+            $event.editorOptions.onEnterKey = (e) => {
+                e.component.blur();
+            };
         }
-    }
-    validate() {
-        return validate_group(this.validator);
-    }
-    submit() {
-        this.formSubmitter.instance.element().click();
+        this.onEditorPreparing.emit($event);
     }
 }
-FormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormComponent, deps: [{ token: i0.ViewContainerRef }, { token: FormService }, { token: i0.ElementRef }], 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", oid: "oid", copyOid: "copyOid", template: "template", extraAttrMap: "extraAttrMap", opener: "opener", params: "params", tabViewContainerRef: "tabViewContainerRef", onlyFrontEnd: "onlyFrontEnd", model: "model", readonly: "readonly" }, outputs: { submitCallback: "submitCallback" }, providers: [FormService], viewQueries: [{ propertyName: "validator", first: true, predicate: DxValidationGroupComponent, descendants: true }, { propertyName: "formSubmitter", first: true, predicate: ["formSubmitter"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<dx-load-panel [container]=\"viewContainerRef.element.nativeElement\" [showPane]=\"false\"\r\n               [visible]=\"loading\">\r\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\r\n</dx-load-panel>\r\n<dx-validation-group *ngIf=\"!loading\">\r\n  <rs-box-container [config]=\"config\"\r\n                    [model]=\"model\"\r\n                    [opener]=\"this\"\r\n                    [params]=\"params\"\r\n                    [tabViewContainerRef]=\"tabViewContainerRef\"\r\n                    [readonly]=\"readonly\"></rs-box-container>\r\n  <dx-button #formSubmitter [visible]=\"false\" (onClick)=\"submitForm()\"></dx-button>\r\n</dx-validation-group>\r\n", styles: [":host{padding:12px 24px 20px}:host dx-validation-group{display:flex;flex-flow:row nowrap}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BoxContainerComponent, selector: "rs-box-container", inputs: ["config", "model", "opener", "params", "readonly", "tabViewContainerRef"] }, { kind: "component", type: i6$1.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }, { kind: "component", type: i4.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"] }, { kind: "component", type: i6.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: i7.DxValidationGroupComponent, selector: "dx-validation-group", inputs: ["elementAttr", "height", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "elementAttrChange", "heightChange", "widthChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormComponent, decorators: [{
+DataGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DataGridComponent, deps: [{ token: DataGridFactory }, { token: DataGridService }, { token: i0.ViewContainerRef }], 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", customColumnFn: "customColumnFn", keyExpr: "keyExpr", dataGridName: "dataGridName", height: "height", onlyFrontEnd: "onlyFrontEnd", dataSource: "dataSource", selectionMode: "selectionMode", selectedRowKeys: "selectedRowKeys", showRowNum: "showRowNum", instanceLinkType: "instanceLinkType", drawerInstanceLinkViewContainerRef: "drawerInstanceLinkViewContainerRef", drawerInstanceLinkFormTemplate: "drawerInstanceLinkFormTemplate" }, outputs: { selectedRowKeysChange: "selectedRowKeysChange", onCellPrepared: "onCellPrepared", onContentReady: "onContentReady", onEditorPreparing: "onEditorPreparing", onRowClick: "onRowClick", onRowDblClick: "onRowDblClick", onSelectionChanged: "onSelectionChanged" }, providers: [DataGridService], queries: [{ propertyName: "rowButtonsTemplate", first: true, predicate: RowButtonsTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "dxDataGrid", first: true, predicate: DxDataGridComponent, descendants: true, static: true }], ngImport: i0, template: "<dx-data-grid [showBorders]=\"true\"\r\n              [showRowLines]=\"true\"\r\n              [hoverStateEnabled]=\"true\"\r\n              [rowAlternationEnabled]=\"true\"\r\n              [columnAutoWidth]=\"true\"\r\n              [allowColumnResizing]=\"true\"\r\n              columnResizingMode=\"widget\"\r\n              dateSerializationFormat=\"yyyy/MM/dd HH:mm:ss\"\r\n              [syncLookupFilterValues]=\"false\"\r\n              [dataSource]=\"dataSource\"\r\n              [columns]=\"columns\"\r\n              [height]=\"height\"\r\n              [keyExpr]=\"keyExpr\"\r\n              [selectedRowKeys]=\"selectedRowKeys\"\r\n              (selectedRowKeysChange)=\"selectedRowKeysChange.emit($event)\"\r\n              (onCellPrepared)=\"onCellPrepared.emit($event)\"\r\n              (onContentReady)=\"onContentReady.emit($event)\"\r\n              (onEditorPreparing)=\"onDxDataGridEditorPreparing($event)\"\r\n              (onRowClick)=\"onRowClick.emit($event)\"\r\n              (onRowDblClick)=\"onRowDblClick.emit($event)\"\r\n              (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\r\n  <dxo-sorting mode=\"multiple\"></dxo-sorting>\r\n  <dxo-selection [mode]=\"selectionMode\" selectAllMode=\"page\" showCheckBoxesMode=\"always\"></dxo-selection>\r\n  <dxo-header-filter [visible]=\"!onlyFrontEnd\">\r\n    <dxo-search [enabled]=\"true\"></dxo-search>\r\n    <dxo-texts [ok]=\"'\u786E\u5B9A'\"></dxo-texts>\r\n  </dxo-header-filter>\r\n  <dxo-filter-row [visible]=\"true\"></dxo-filter-row>\r\n  <dxo-remote-operations [filtering]=\"true\"\r\n                         [sorting]=\"true\"\r\n                         [paging]=\"true\">\r\n  </dxo-remote-operations>\r\n  <dxo-paging [pageSize]=\"15\"></dxo-paging>\r\n  <dxo-pager [visible]=\"true\"\r\n             [showInfo]=\"true\"\r\n             infoText=\"\u7B2C{0}\u9875\uFF0C\u5171{1}\u9875\uFF08\u5171{2}\u4E2A\u9879\u76EE\uFF09\"\r\n             [showPageSizeSelector]=\"true\"\r\n             [allowedPageSizes]=\"[15, 30, 50]\"\r\n  ></dxo-pager>\r\n  <dxo-scrolling showScrollbar=\"always\"></dxo-scrolling>\r\n  <div *dxTemplate=\"let cellInfo of 'rowIndexTemplate'\">\r\n    {{ cellInfo.rowIndex + 1 }}\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'instanceLinkTemplate'\">\r\n    <rs-instance-link-template [tenant]=\"tenant\"\r\n                               [className]=\"className\"\r\n                               [oid]=\"cellInfo.data.oid\"\r\n                               [instanceLinkType]=\"instanceLinkType\"\r\n                               [drawerViewContainerRef]=\"drawerInstanceLinkViewContainerRef\"\r\n                               [drawerFormTemplate]=\"drawerInstanceLinkFormTemplate\">\r\n    </rs-instance-link-template>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'rowButtonsTemplate'\">\r\n    <ng-container [ngTemplateOutlet]=\"rowButtonsTemplate.templateRef\"\r\n                  [ngTemplateOutletContext]=\"{$implicit: cellInfo, cellTemplateLoaded$: service.cellTemplateLoaded$}\"></ng-container>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'multipleValueCellTemplate'\">\r\n    <div [innerHTML]=\"convertMultipleValueCellText(cellInfo)\"></div>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'textCellTemplate'\">\r\n    <div #textDiv style=\"text-overflow: ellipsis; overflow: hidden; cursor: pointer;\">{{ cellInfo.value }}</div>\r\n    <dx-tooltip [target]=\"textDiv\"\r\n                [position]=\"'top'\"\r\n                [showEvent]=\"'click'\">\r\n      <div *dxTemplate=\"let data of 'content'\">\r\n        <p style=\"max-width: 320px; text-align: left; white-space: normal;\" [innerText]=\"cellInfo.value\"></p>\r\n      </div>\r\n    </dx-tooltip>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'fileCellTemplate'\">\r\n    <ng-container *ngFor=\"let file of cellInfo.value\">\r\n      <rs-file-cell-template [file]=\"file\"></rs-file-cell-template>\r\n    </ng-container>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'userCellTemplate'\">\r\n    <ng-container *ngFor=\"let user of getOriginalValue(cellInfo, 'userInfo')\">\r\n      <rs-user-info-template [uid]=\"user\" [cellInfo]=\"cellInfo\"></rs-user-info-template>\r\n    </ng-container>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'unitCellTemplate'\">\r\n    <ng-container *ngFor=\"let unit of getOriginalValue(cellInfo, 'unitInfo')\">\r\n      <rs-unit-info-template [uid]=\"unit\" [cellInfo]=\"cellInfo\"></rs-unit-info-template>\r\n    </ng-container>\r\n  </div>\r\n</dx-data-grid>\r\n", styles: [":host{display:flex;flex-flow:column nowrap}:host dx-data-grid{flex:auto;height:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i5$1.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: i6$1.DxoSearchComponent, selector: "dxo-search", inputs: ["editorOptions", "enabled", "timeout", "mode", "searchExpr"] }, { kind: "component", type: i6$1.DxoSelectionComponent, selector: "dxo-selection", inputs: ["allowSelectAll", "recursive", "selectByClick", "deferred", "mode", "selectAllMode", "showCheckBoxesMode"] }, { kind: "component", type: i6$1.DxoTextsComponent, selector: "dxo-texts", inputs: ["fix", "leftPosition", "rightPosition", "unfix", "addRow", "cancelAllChanges", "cancelRowChanges", "confirmDeleteMessage", "confirmDeleteTitle", "deleteRow", "editRow", "saveAllChanges", "saveRowChanges", "undeleteRow", "validationCancelChanges", "exportAll", "exportSelectedRows", "exportTo", "clearFilter", "createFilter", "filterEnabledHint", "groupByThisColumn", "groupContinuedMessage", "groupContinuesMessage", "ungroup", "ungroupAll", "cancel", "emptyValue", "ok", "avg", "avgOtherColumn", "count", "max", "maxOtherColumn", "min", "minOtherColumn", "sum", "sumOtherColumn", "allFields", "columnFields", "dataFields", "filterFields", "rowFields", "columnFieldArea", "dataFieldArea", "filterFieldArea", "rowFieldArea", "collapseAll", "dataNotAvailable", "expandAll", "exportToExcel", "grandTotal", "noData", "removeAllSorting", "showFieldChooser", "sortColumnBySummary", "sortRowBySummary", "total", "addRowToNode"] }, { kind: "component", type: i6$1.DxoHeaderFilterComponent, selector: "dxo-header-filter", inputs: ["allowSearch", "allowSelectAll", "dataSource", "groupInterval", "height", "search", "searchMode", "width", "searchTimeout", "texts", "visible", "showRelevantValues"] }, { kind: "component", type: i6$1.DxoFilterRowComponent, selector: "dxo-filter-row", inputs: ["applyFilter", "applyFilterText", "betweenEndText", "betweenStartText", "operationDescriptions", "resetOperationText", "showAllText", "showOperationChooser", "visible"] }, { kind: "component", type: i6$1.DxoPagerComponent, selector: "dxo-pager", inputs: ["allowedPageSizes", "displayMode", "infoText", "label", "showInfo", "showNavigationButtons", "showPageSizeSelector", "visible"] }, { kind: "component", type: i6$1.DxoPagingComponent, selector: "dxo-paging", inputs: ["enabled", "pageIndex", "pageSize"], outputs: ["pageIndexChange", "pageSizeChange"] }, { kind: "component", type: i6$1.DxoRemoteOperationsComponent, selector: "dxo-remote-operations", inputs: ["filtering", "grouping", "groupPaging", "paging", "sorting", "summary"] }, { kind: "component", type: i6$1.DxoScrollingComponent, selector: "dxo-scrolling", inputs: ["columnRenderingMode", "mode", "preloadEnabled", "renderAsync", "rowRenderingMode", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative"] }, { kind: "component", type: i6$1.DxoSortingComponent, selector: "dxo-sorting", inputs: ["ascendingText", "clearText", "descendingText", "mode", "showSortIndexes"] }, { kind: "component", type: i5.DxTooltipComponent, selector: "dx-tooltip", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showEvent", "target", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showEventChange", "targetChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: FileCellTemplateComponent, selector: "rs-file-cell-template", inputs: ["file"] }, { kind: "component", type: InstanceLinkTemplateComponent, selector: "rs-instance-link-template", inputs: ["tenant", "className", "oid", "instanceLinkType", "drawerViewContainerRef", "drawerFormTemplate"] }, { kind: "component", type: UnitInfoTemplateComponent, selector: "rs-unit-info-template", inputs: ["uid", "cellInfo"] }, { kind: "component", type: UserInfoTemplateComponent, selector: "rs-user-info-template", inputs: ["uid", "cellInfo"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DataGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-form', providers: [FormService], template: "<dx-load-panel [container]=\"viewContainerRef.element.nativeElement\" [showPane]=\"false\"\r\n               [visible]=\"loading\">\r\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\r\n</dx-load-panel>\r\n<dx-validation-group *ngIf=\"!loading\">\r\n  <rs-box-container [config]=\"config\"\r\n                    [model]=\"model\"\r\n                    [opener]=\"this\"\r\n                    [params]=\"params\"\r\n                    [tabViewContainerRef]=\"tabViewContainerRef\"\r\n                    [readonly]=\"readonly\"></rs-box-container>\r\n  <dx-button #formSubmitter [visible]=\"false\" (onClick)=\"submitForm()\"></dx-button>\r\n</dx-validation-group>\r\n", styles: [":host{padding:12px 24px 20px}:host dx-validation-group{display:flex;flex-flow:row nowrap}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: FormService }, { type: i0.ElementRef }]; }, propDecorators: { tenant: [{
+            args: [{ selector: 'rs-data-grid', providers: [DataGridService], template: "<dx-data-grid [showBorders]=\"true\"\r\n              [showRowLines]=\"true\"\r\n              [hoverStateEnabled]=\"true\"\r\n              [rowAlternationEnabled]=\"true\"\r\n              [columnAutoWidth]=\"true\"\r\n              [allowColumnResizing]=\"true\"\r\n              columnResizingMode=\"widget\"\r\n              dateSerializationFormat=\"yyyy/MM/dd HH:mm:ss\"\r\n              [syncLookupFilterValues]=\"false\"\r\n              [dataSource]=\"dataSource\"\r\n              [columns]=\"columns\"\r\n              [height]=\"height\"\r\n              [keyExpr]=\"keyExpr\"\r\n              [selectedRowKeys]=\"selectedRowKeys\"\r\n              (selectedRowKeysChange)=\"selectedRowKeysChange.emit($event)\"\r\n              (onCellPrepared)=\"onCellPrepared.emit($event)\"\r\n              (onContentReady)=\"onContentReady.emit($event)\"\r\n              (onEditorPreparing)=\"onDxDataGridEditorPreparing($event)\"\r\n              (onRowClick)=\"onRowClick.emit($event)\"\r\n              (onRowDblClick)=\"onRowDblClick.emit($event)\"\r\n              (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\r\n  <dxo-sorting mode=\"multiple\"></dxo-sorting>\r\n  <dxo-selection [mode]=\"selectionMode\" selectAllMode=\"page\" showCheckBoxesMode=\"always\"></dxo-selection>\r\n  <dxo-header-filter [visible]=\"!onlyFrontEnd\">\r\n    <dxo-search [enabled]=\"true\"></dxo-search>\r\n    <dxo-texts [ok]=\"'\u786E\u5B9A'\"></dxo-texts>\r\n  </dxo-header-filter>\r\n  <dxo-filter-row [visible]=\"true\"></dxo-filter-row>\r\n  <dxo-remote-operations [filtering]=\"true\"\r\n                         [sorting]=\"true\"\r\n                         [paging]=\"true\">\r\n  </dxo-remote-operations>\r\n  <dxo-paging [pageSize]=\"15\"></dxo-paging>\r\n  <dxo-pager [visible]=\"true\"\r\n             [showInfo]=\"true\"\r\n             infoText=\"\u7B2C{0}\u9875\uFF0C\u5171{1}\u9875\uFF08\u5171{2}\u4E2A\u9879\u76EE\uFF09\"\r\n             [showPageSizeSelector]=\"true\"\r\n             [allowedPageSizes]=\"[15, 30, 50]\"\r\n  ></dxo-pager>\r\n  <dxo-scrolling showScrollbar=\"always\"></dxo-scrolling>\r\n  <div *dxTemplate=\"let cellInfo of 'rowIndexTemplate'\">\r\n    {{ cellInfo.rowIndex + 1 }}\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'instanceLinkTemplate'\">\r\n    <rs-instance-link-template [tenant]=\"tenant\"\r\n                               [className]=\"className\"\r\n                               [oid]=\"cellInfo.data.oid\"\r\n                               [instanceLinkType]=\"instanceLinkType\"\r\n                               [drawerViewContainerRef]=\"drawerInstanceLinkViewContainerRef\"\r\n                               [drawerFormTemplate]=\"drawerInstanceLinkFormTemplate\">\r\n    </rs-instance-link-template>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'rowButtonsTemplate'\">\r\n    <ng-container [ngTemplateOutlet]=\"rowButtonsTemplate.templateRef\"\r\n                  [ngTemplateOutletContext]=\"{$implicit: cellInfo, cellTemplateLoaded$: service.cellTemplateLoaded$}\"></ng-container>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'multipleValueCellTemplate'\">\r\n    <div [innerHTML]=\"convertMultipleValueCellText(cellInfo)\"></div>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'textCellTemplate'\">\r\n    <div #textDiv style=\"text-overflow: ellipsis; overflow: hidden; cursor: pointer;\">{{ cellInfo.value }}</div>\r\n    <dx-tooltip [target]=\"textDiv\"\r\n                [position]=\"'top'\"\r\n                [showEvent]=\"'click'\">\r\n      <div *dxTemplate=\"let data of 'content'\">\r\n        <p style=\"max-width: 320px; text-align: left; white-space: normal;\" [innerText]=\"cellInfo.value\"></p>\r\n      </div>\r\n    </dx-tooltip>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'fileCellTemplate'\">\r\n    <ng-container *ngFor=\"let file of cellInfo.value\">\r\n      <rs-file-cell-template [file]=\"file\"></rs-file-cell-template>\r\n    </ng-container>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'userCellTemplate'\">\r\n    <ng-container *ngFor=\"let user of getOriginalValue(cellInfo, 'userInfo')\">\r\n      <rs-user-info-template [uid]=\"user\" [cellInfo]=\"cellInfo\"></rs-user-info-template>\r\n    </ng-container>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'unitCellTemplate'\">\r\n    <ng-container *ngFor=\"let unit of getOriginalValue(cellInfo, 'unitInfo')\">\r\n      <rs-unit-info-template [uid]=\"unit\" [cellInfo]=\"cellInfo\"></rs-unit-info-template>\r\n    </ng-container>\r\n  </div>\r\n</dx-data-grid>\r\n", styles: [":host{display:flex;flex-flow:column nowrap}:host dx-data-grid{flex:auto;height:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: DataGridFactory }, { type: DataGridService }, { type: i0.ViewContainerRef }]; }, propDecorators: { tenant: [{
                 type: Input
             }], className: [{
                 type: Input
-            }], oid: [{
-                type: Input
-            }], copyOid: [{
+            }], view: [{
                 type: Input
-            }], template: [{
+            }], filter: [{
                 type: Input
-            }], extraAttrMap: [{
+            }], customColumnFn: [{
                 type: Input
-            }], opener: [{
+            }], keyExpr: [{
                 type: Input
-            }], params: [{
+            }], dataGridName: [{
                 type: Input
-            }], tabViewContainerRef: [{
+            }], height: [{
                 type: Input
             }], onlyFrontEnd: [{
                 type: Input
-            }], model: [{
+            }], dataSource: [{
                 type: Input
-            }], readonly: [{
+            }], selectionMode: [{
                 type: Input
-            }], validator: [{
-                type: ViewChild,
-                args: [DxValidationGroupComponent]
-            }], formSubmitter: [{
-                type: ViewChild,
-                args: ['formSubmitter']
-            }], submitCallback: [{
+            }], selectedRowKeys: [{
+                type: Input
+            }], selectedRowKeysChange: [{
+                type: Output
+            }], showRowNum: [{
+                type: Input
+            }], instanceLinkType: [{
+                type: Input
+            }], drawerInstanceLinkViewContainerRef: [{
+                type: Input
+            }], drawerInstanceLinkFormTemplate: [{
+                type: Input
+            }], onCellPrepared: [{
+                type: Output
+            }], onContentReady: [{
+                type: Output
+            }], onEditorPreparing: [{
+                type: Output
+            }], onRowClick: [{
+                type: Output
+            }], onRowDblClick: [{
+                type: Output
+            }], onSelectionChanged: [{
                 type: Output
+            }], dxDataGrid: [{
+                type: ViewChild,
+                args: [DxDataGridComponent, { static: true }]
+            }], rowButtonsTemplate: [{
+                type: ContentChild,
+                args: [RowButtonsTemplateDirective]
             }] } });
 
-class DataDetailComponent {
-    constructor(viewContainerRef, service) {
-        this.viewContainerRef = viewContainerRef;
-        this.service = service;
-        this.sections = [];
-        this.loading = false;
-    }
-    ngOnInit() {
-        this.loading = true;
-        this.service.getSectionList(this.tenant, this.className, this.oid).subscribe(response => {
-            this.sections = response.data.list;
-            this.loading = false;
-        });
-    }
-}
-DataDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", 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.7", type: DataDetailComponent, selector: "coast-data-detail", providers: [DataDetailService], ngImport: i0, template: "<dx-load-panel [container]=\"viewContainerRef.element.nativeElement\" [showPane]=\"false\"\r\n               [visible]=\"loading\">\r\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\r\n</dx-load-panel>\r\n<div *ngIf=\"!loading && sections.length === 0\" class=\"empty\">\r\n  <span>\u60A8\u65E0\u6743\u67E5\u770B\u8BE5\u6570\u636E\u5B9E\u4F8B\u4EFB\u4F55\u4FE1\u606F</span>\r\n</div>\r\n<ng-container *ngIf=\"sections.length > 0\">\r\n  <dx-accordion [collapsible]=\"true\" [multiple]=\"true\" [deferRendering]=\"false\" [dataSource]=\"sections\"\r\n                [selectedItems]=\"sections\">\r\n    <div *dxTemplate=\"let section of 'title'\" class=\"section-title\">\r\n      <div class=\"section-title-name\">{{ section.name }}</div>\r\n    </div>\r\n    <div *dxTemplate=\"let section of 'item'\">\r\n      <rs-form [tenant]=\"tenant\" [className]=\"className\" [oid]=\"oid\" [template]=\"section.formTemplate\" [params]=\"params\"\r\n               [tabViewContainerRef]=\"tabViewContainerRef\" [readonly]=\"true\"></rs-form>\r\n    </div>\r\n  </dx-accordion>\r\n</ng-container>\r\n", styles: [":host{flex:1;padding:24px;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, #dddddd)}: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: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i6$1.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }, { kind: "component", type: i6.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", "opener", "params", "tabViewContainerRef", "onlyFrontEnd", "model", "readonly"], outputs: ["submitCallback"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DataDetailComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'coast-data-detail', providers: [DataDetailService], template: "<dx-load-panel [container]=\"viewContainerRef.element.nativeElement\" [showPane]=\"false\"\r\n               [visible]=\"loading\">\r\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\r\n</dx-load-panel>\r\n<div *ngIf=\"!loading && sections.length === 0\" class=\"empty\">\r\n  <span>\u60A8\u65E0\u6743\u67E5\u770B\u8BE5\u6570\u636E\u5B9E\u4F8B\u4EFB\u4F55\u4FE1\u606F</span>\r\n</div>\r\n<ng-container *ngIf=\"sections.length > 0\">\r\n  <dx-accordion [collapsible]=\"true\" [multiple]=\"true\" [deferRendering]=\"false\" [dataSource]=\"sections\"\r\n                [selectedItems]=\"sections\">\r\n    <div *dxTemplate=\"let section of 'title'\" class=\"section-title\">\r\n      <div class=\"section-title-name\">{{ section.name }}</div>\r\n    </div>\r\n    <div *dxTemplate=\"let section of 'item'\">\r\n      <rs-form [tenant]=\"tenant\" [className]=\"className\" [oid]=\"oid\" [template]=\"section.formTemplate\" [params]=\"params\"\r\n               [tabViewContainerRef]=\"tabViewContainerRef\" [readonly]=\"true\"></rs-form>\r\n    </div>\r\n  </dx-accordion>\r\n</ng-container>\r\n", styles: [":host{flex:1;padding:24px;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, #dddddd)}: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 FormModule {
 }
 FormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -3166,6 +3309,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 }]
         }] });
 
+class DataGridModule {
+}
+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,
+        FileCellTemplateComponent,
+        InstanceLinkTemplateComponent,
+        UnitInfoTemplateComponent,
+        UserInfoTemplateComponent,
+        RowButtonsTemplateDirective], imports: [CommonModule,
+        DevExtremeModule,
+        FormModule], exports: [DataGridComponent,
+        RowButtonsTemplateDirective] });
+DataGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DataGridModule, imports: [CommonModule,
+        DevExtremeModule,
+        FormModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DataGridModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        DataGridComponent,
+                        FileCellTemplateComponent,
+                        InstanceLinkTemplateComponent,
+                        UnitInfoTemplateComponent,
+                        UserInfoTemplateComponent,
+                        RowButtonsTemplateDirective
+                    ],
+                    imports: [
+                        CommonModule,
+                        DevExtremeModule,
+                        FormModule
+                    ],
+                    exports: [
+                        DataGridComponent,
+                        RowButtonsTemplateDirective
+                    ]
+                }]
+        }] });
+
 class DataDetailModule {
 }
 DataDetailModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DataDetailModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -3192,49 +3373,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 }]
         }] });
 
-class DrawerComponent {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this.size = 'default';
-        this._width = '480px';
-    }
-    ngOnInit() {
-        if (this.size === 'large') {
-            this._width = '960px';
-        }
-    }
-    show() {
-        // 若存在多层抽屉，仅保留最上层遮罩颜色，下层遮罩设置为透明
-        const nodeName = this.elementRef.nativeElement.nodeName;
-        const drawers = this._parentViewContainerRef.element.nativeElement.parentElement.querySelectorAll(nodeName);
-        for (let i = 0; i < drawers.length; i++) {
-            if (i === drawers.length - 1) {
-                drawers[i].querySelector('.drawer-backdrop').style.backgroundColor = 'rgba(37, 43, 58, 0.05)';
-            }
-            else {
-                drawers[i].querySelector('.drawer-backdrop').style.backgroundColor = 'rgba(37, 43, 58, 0)';
-            }
-        }
-    }
-    hide($event, backdrop) {
-        // 在service中重写
-    }
-    ngOnDestroy() {
-        // 若存在多层抽屉，下一层遮罩设置为不透明
-        const nodeName = this.elementRef.nativeElement.nodeName;
-        const nextDrawer = this._parentViewContainerRef.element.nativeElement.parentElement.querySelector(nodeName + ':nth-last-child(2)');
-        if (nextDrawer) {
-            nextDrawer.querySelector('.drawer-backdrop').style.backgroundColor = 'rgba(37, 43, 58, 0.05)';
-        }
-    }
-}
-DrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DrawerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-DrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DrawerComponent, selector: "rs-drawer", ngImport: i0, template: "<div #drawerBackdrop class=\"drawer-backdrop\" (click)=\"hide($event, drawerBackdrop)\">\r\n  <div class=\"drawer\" [ngStyle]=\"{width: _width}\">\r\n    <div *ngIf=\"headerTemplate\" class=\"drawer-header\">\r\n      <ng-template [ngTemplateOutlet]=\"headerTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: headerTemplateContext}\"></ng-template>\r\n    </div>\r\n    <div class=\"drawer-content\">\r\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\r\n    </div>\r\n    <div class=\"drawer-close\">\r\n      <dx-button height=\"40px\" icon=\"coast-icon coast-icon-arrow-right-filling\" (onClick)=\"hide($event)\"></dx-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host .drawer-backdrop{position:absolute;inset:0;z-index:calc(var(--coast-z-index-drawer, 1040) - 1)}:host .drawer-backdrop .drawer{position:absolute;right:0;height:100%;z-index:var(--coast-z-index-drawer, 1040);background-color:var(--coast-base-bg-color, #fff);display:flex;flex-flow:column nowrap}:host .drawer-backdrop .drawer .drawer-header{flex:0 0 36px;padding:8px;border-bottom:1px solid var(--coast-border-color, #dddddd);display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-end}:host .drawer-backdrop .drawer .drawer-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .drawer-backdrop .drawer .drawer-close{position:absolute;height:100%;width:20px;top:0;left:-20px;display:flex;flex-flow:row nowrap;align-items:center}\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: i4.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.7", ngImport: i0, type: DrawerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rs-drawer', template: "<div #drawerBackdrop class=\"drawer-backdrop\" (click)=\"hide($event, drawerBackdrop)\">\r\n  <div class=\"drawer\" [ngStyle]=\"{width: _width}\">\r\n    <div *ngIf=\"headerTemplate\" class=\"drawer-header\">\r\n      <ng-template [ngTemplateOutlet]=\"headerTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: headerTemplateContext}\"></ng-template>\r\n    </div>\r\n    <div class=\"drawer-content\">\r\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\r\n    </div>\r\n    <div class=\"drawer-close\">\r\n      <dx-button height=\"40px\" icon=\"coast-icon coast-icon-arrow-right-filling\" (onClick)=\"hide($event)\"></dx-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host .drawer-backdrop{position:absolute;inset:0;z-index:calc(var(--coast-z-index-drawer, 1040) - 1)}:host .drawer-backdrop .drawer{position:absolute;right:0;height:100%;z-index:var(--coast-z-index-drawer, 1040);background-color:var(--coast-base-bg-color, #fff);display:flex;flex-flow:column nowrap}:host .drawer-backdrop .drawer .drawer-header{flex:0 0 36px;padding:8px;border-bottom:1px solid var(--coast-border-color, #dddddd);display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-end}:host .drawer-backdrop .drawer .drawer-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .drawer-backdrop .drawer .drawer-close{position:absolute;height:100%;width:20px;top:0;left:-20px;display:flex;flex-flow:row nowrap;align-items:center}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-
 class DrawerModule {
 }
 DrawerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -3255,35 +3393,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 }]
         }] });
 
-class DrawerService {
-    constructor() {
-    }
-    open(viewContainerRef, size = 'default', contentTemplate, contentTemplateContext, headerTemplate, headerTemplateContext) {
-        const drawerRef = viewContainerRef.createComponent(DrawerComponent);
-        drawerRef.instance.hide = ($event, backdrop) => {
-            if ($event.target === backdrop) {
-                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._parentViewContainerRef = viewContainerRef;
-        drawerRef.instance.show();
-        return drawerRef.instance;
-    }
-}
-DrawerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DrawerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DrawerService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DrawerService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return []; } });
-
 class TooltipContentTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
@@ -3315,10 +3424,10 @@ class DynamicParamsComponent {
     }
 }
 DynamicParamsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DynamicParamsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DynamicParamsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DynamicParamsComponent, selector: "rs-dynamic-params", inputs: { label: "label", showHelp: "showHelp", keyPlaceholder: "keyPlaceholder", valuePlaceholder: "valuePlaceholder", params: "params", required: "required", readonly: "readonly" }, queries: [{ propertyName: "tooltipContentTemplate", first: true, predicate: TooltipContentTemplateDirective, descendants: true }], ngImport: i0, template: "<div class=\"dx-field\">\r\n  <div class=\"dx-field-label\">\r\n    <span>{{ label }}</span>\r\n    <span *ngIf=\"required\" class=\"required-mark\">&nbsp;*</span>\r\n    <i *ngIf=\"showHelp\" #dynamicParamsSpan class=\"coast-icon-help cursor-pointer\">\r\n      <dx-tooltip [target]=\"dynamicParamsSpan\"\r\n                  [position]=\"'top'\"\r\n                  [showEvent]=\"'mouseover'\"\r\n                  [hideEvent]=\"'mouseout'\">\r\n        <div *dxTemplate=\"let data of 'content'\"\r\n             style=\"display: flex; flex-flow: column nowrap;align-items: flex-start;\">\r\n          <ng-container [ngTemplateOutlet]=\"tooltipContentTemplate.templateRef\"></ng-container>\r\n        </div>\r\n      </dx-tooltip>\r\n    </i>\r\n    <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-add\" (onClick)=\"add()\"\r\n               [disabled]=\"readonly\"></dx-button>\r\n  </div>\r\n  <div class=\"dx-field-value\">\r\n    <div *ngFor=\"let param of params; let index = index\">\r\n      <dx-text-box [placeholder]=\"keyPlaceholder\" [(value)]=\"param.name\" [disabled]=\"readonly\"></dx-text-box>\r\n      <dx-text-box [placeholder]=\"valuePlaceholder\" [(value)]=\"param.value\" [disabled]=\"readonly\"></dx-text-box>\r\n      <dx-button type=\"danger\" stylingMode=\"text\" icon=\"coast-icon coast-icon-close\"\r\n                 (onClick)=\"delete(index)\" [disabled]=\"readonly\"></dx-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host .dx-field .dx-field-label{display:flex;align-items:center}:host .dx-field .dx-field-value div{display:flex;flex-flow:row nowrap}:host .dx-field .dx-field-value div dx-text-box{flex:1}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i4.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"] }, { kind: "component", type: i4$1.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i5.DxTooltipComponent, selector: "dx-tooltip", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showEvent", "target", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showEventChange", "targetChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
+DynamicParamsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DynamicParamsComponent, selector: "rs-dynamic-params", inputs: { label: "label", showHelp: "showHelp", keyPlaceholder: "keyPlaceholder", valuePlaceholder: "valuePlaceholder", params: "params", required: "required", readonly: "readonly" }, queries: [{ propertyName: "tooltipContentTemplate", first: true, predicate: TooltipContentTemplateDirective, descendants: true }], ngImport: i0, template: "<div class=\"dx-field\">\n  <div class=\"dx-field-label\">\n    <span>{{ label }}</span>\n    <span *ngIf=\"required\" class=\"required-mark\">&nbsp;*</span>\n    <i *ngIf=\"showHelp\" #dynamicParamsSpan class=\"coast-icon-help cursor-pointer\">\n      <dx-tooltip [target]=\"dynamicParamsSpan\"\n                  [position]=\"'top'\"\n                  [showEvent]=\"'mouseover'\"\n                  [hideEvent]=\"'mouseout'\">\n        <div *dxTemplate=\"let data of 'content'\"\n             style=\"display: flex; flex-flow: column nowrap;align-items: flex-start;\">\n          <ng-container [ngTemplateOutlet]=\"tooltipContentTemplate.templateRef\"></ng-container>\n        </div>\n      </dx-tooltip>\n    </i>\n    <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-add\" (onClick)=\"add()\"\n               [disabled]=\"readonly\"></dx-button>\n  </div>\n  <div class=\"dx-field-value\">\n    <div *ngFor=\"let param of params; let index = index\">\n      <dx-text-box [placeholder]=\"keyPlaceholder\" [(value)]=\"param.name\" [disabled]=\"readonly\"></dx-text-box>\n      <dx-text-box [placeholder]=\"valuePlaceholder\" [(value)]=\"param.value\" [disabled]=\"readonly\"></dx-text-box>\n      <dx-button type=\"danger\" stylingMode=\"text\" icon=\"coast-icon coast-icon-close\"\n                 (onClick)=\"delete(index)\" [disabled]=\"readonly\"></dx-button>\n    </div>\n  </div>\n</div>\n", styles: [":host .dx-field .dx-field-label{display:flex;align-items:center}:host .dx-field .dx-field-value div{display:flex;flex-flow:row nowrap}:host .dx-field .dx-field-value div dx-text-box{flex:1}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i4.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"] }, { kind: "component", type: i4$1.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i5.DxTooltipComponent, selector: "dx-tooltip", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showEvent", "target", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showEventChange", "targetChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DynamicParamsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-dynamic-params', template: "<div class=\"dx-field\">\r\n  <div class=\"dx-field-label\">\r\n    <span>{{ label }}</span>\r\n    <span *ngIf=\"required\" class=\"required-mark\">&nbsp;*</span>\r\n    <i *ngIf=\"showHelp\" #dynamicParamsSpan class=\"coast-icon-help cursor-pointer\">\r\n      <dx-tooltip [target]=\"dynamicParamsSpan\"\r\n                  [position]=\"'top'\"\r\n                  [showEvent]=\"'mouseover'\"\r\n                  [hideEvent]=\"'mouseout'\">\r\n        <div *dxTemplate=\"let data of 'content'\"\r\n             style=\"display: flex; flex-flow: column nowrap;align-items: flex-start;\">\r\n          <ng-container [ngTemplateOutlet]=\"tooltipContentTemplate.templateRef\"></ng-container>\r\n        </div>\r\n      </dx-tooltip>\r\n    </i>\r\n    <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-add\" (onClick)=\"add()\"\r\n               [disabled]=\"readonly\"></dx-button>\r\n  </div>\r\n  <div class=\"dx-field-value\">\r\n    <div *ngFor=\"let param of params; let index = index\">\r\n      <dx-text-box [placeholder]=\"keyPlaceholder\" [(value)]=\"param.name\" [disabled]=\"readonly\"></dx-text-box>\r\n      <dx-text-box [placeholder]=\"valuePlaceholder\" [(value)]=\"param.value\" [disabled]=\"readonly\"></dx-text-box>\r\n      <dx-button type=\"danger\" stylingMode=\"text\" icon=\"coast-icon coast-icon-close\"\r\n                 (onClick)=\"delete(index)\" [disabled]=\"readonly\"></dx-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host .dx-field .dx-field-label{display:flex;align-items:center}:host .dx-field .dx-field-value div{display:flex;flex-flow:row nowrap}:host .dx-field .dx-field-value div dx-text-box{flex:1}\n"] }]
+            args: [{ selector: 'rs-dynamic-params', template: "<div class=\"dx-field\">\n  <div class=\"dx-field-label\">\n    <span>{{ label }}</span>\n    <span *ngIf=\"required\" class=\"required-mark\">&nbsp;*</span>\n    <i *ngIf=\"showHelp\" #dynamicParamsSpan class=\"coast-icon-help cursor-pointer\">\n      <dx-tooltip [target]=\"dynamicParamsSpan\"\n                  [position]=\"'top'\"\n                  [showEvent]=\"'mouseover'\"\n                  [hideEvent]=\"'mouseout'\">\n        <div *dxTemplate=\"let data of 'content'\"\n             style=\"display: flex; flex-flow: column nowrap;align-items: flex-start;\">\n          <ng-container [ngTemplateOutlet]=\"tooltipContentTemplate.templateRef\"></ng-container>\n        </div>\n      </dx-tooltip>\n    </i>\n    <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-add\" (onClick)=\"add()\"\n               [disabled]=\"readonly\"></dx-button>\n  </div>\n  <div class=\"dx-field-value\">\n    <div *ngFor=\"let param of params; let index = index\">\n      <dx-text-box [placeholder]=\"keyPlaceholder\" [(value)]=\"param.name\" [disabled]=\"readonly\"></dx-text-box>\n      <dx-text-box [placeholder]=\"valuePlaceholder\" [(value)]=\"param.value\" [disabled]=\"readonly\"></dx-text-box>\n      <dx-button type=\"danger\" stylingMode=\"text\" icon=\"coast-icon coast-icon-close\"\n                 (onClick)=\"delete(index)\" [disabled]=\"readonly\"></dx-button>\n    </div>\n  </div>\n</div>\n", styles: [":host .dx-field .dx-field-label{display:flex;align-items:center}:host .dx-field .dx-field-value div{display:flex;flex-flow:row nowrap}:host .dx-field .dx-field-value div dx-text-box{flex:1}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], showHelp: [{
@@ -3478,10 +3587,10 @@ class IconSelectorComponent {
     }
 }
 IconSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: IconSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IconSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: IconSelectorComponent, selector: "rs-icon-selector", inputs: { target: "target" }, outputs: { select: "select" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["iconSelector"], descendants: true, static: true }, { propertyName: "iconZoomOut", first: true, predicate: ["iconZoomOut"], descendants: true, static: true }], ngImport: i0, template: "<dx-popover #iconSelector\r\n            maxWidth=\"280\"\r\n            maxHeight=\"280\"\r\n            [target]=\"target\"\r\n            [showEvent]=\"{name: 'click'}\">\r\n  <div *dxTemplate=\"let data of 'content'\">\r\n    <ng-container *ngFor=\"let icon of iconList; let index=index\">\r\n      <dx-button [icon]=\"'coast-icon ' + icon\" (onClick)=\"selectIcon(icon)\"\r\n                 (mouseenter)=\"zoomOut($event, icon)\" (mouseleave)=\"iconZoomOut.instance.hide()\"></dx-button>\r\n    </ng-container>\r\n  </div>\r\n</dx-popover>\r\n<dx-popover #iconZoomOut height=\"72px\" [enableBodyScroll]=\"false\">\r\n  <div *dxTemplate=\"let data of 'content'\"\r\n       style=\"display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;\">\r\n    <i [class]=\"hoverIcon\" style=\"font-size: 36px;\"></i>\r\n    <span>{{hoverIcon?.substring(11)}}</span>\r\n  </div>\r\n</dx-popover>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i4.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"] }, { kind: "component", type: i4$2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "enableBodyScroll", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
+IconSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: IconSelectorComponent, selector: "rs-icon-selector", inputs: { target: "target" }, outputs: { select: "select" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["iconSelector"], descendants: true, static: true }, { propertyName: "iconZoomOut", first: true, predicate: ["iconZoomOut"], descendants: true, static: true }], ngImport: i0, template: "<dx-popover #iconSelector\n            maxWidth=\"280\"\n            maxHeight=\"280\"\n            [target]=\"target\"\n            [showEvent]=\"{name: 'click'}\">\n  <div *dxTemplate=\"let data of 'content'\">\n    <ng-container *ngFor=\"let icon of iconList; let index=index\">\n      <dx-button [icon]=\"'coast-icon ' + icon\" (onClick)=\"selectIcon(icon)\"\n                 (mouseenter)=\"zoomOut($event, icon)\" (mouseleave)=\"iconZoomOut.instance.hide()\"></dx-button>\n    </ng-container>\n  </div>\n</dx-popover>\n<dx-popover #iconZoomOut height=\"72px\" [enableBodyScroll]=\"false\">\n  <div *dxTemplate=\"let data of 'content'\"\n       style=\"display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;\">\n    <i [class]=\"hoverIcon\" style=\"font-size: 36px;\"></i>\n    <span>{{hoverIcon?.substring(11)}}</span>\n  </div>\n</dx-popover>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i4.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"] }, { kind: "component", type: i4$2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "enableBodyScroll", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: IconSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-icon-selector', template: "<dx-popover #iconSelector\r\n            maxWidth=\"280\"\r\n            maxHeight=\"280\"\r\n            [target]=\"target\"\r\n            [showEvent]=\"{name: 'click'}\">\r\n  <div *dxTemplate=\"let data of 'content'\">\r\n    <ng-container *ngFor=\"let icon of iconList; let index=index\">\r\n      <dx-button [icon]=\"'coast-icon ' + icon\" (onClick)=\"selectIcon(icon)\"\r\n                 (mouseenter)=\"zoomOut($event, icon)\" (mouseleave)=\"iconZoomOut.instance.hide()\"></dx-button>\r\n    </ng-container>\r\n  </div>\r\n</dx-popover>\r\n<dx-popover #iconZoomOut height=\"72px\" [enableBodyScroll]=\"false\">\r\n  <div *dxTemplate=\"let data of 'content'\"\r\n       style=\"display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;\">\r\n    <i [class]=\"hoverIcon\" style=\"font-size: 36px;\"></i>\r\n    <span>{{hoverIcon?.substring(11)}}</span>\r\n  </div>\r\n</dx-popover>\r\n" }]
+            args: [{ selector: 'rs-icon-selector', template: "<dx-popover #iconSelector\n            maxWidth=\"280\"\n            maxHeight=\"280\"\n            [target]=\"target\"\n            [showEvent]=\"{name: 'click'}\">\n  <div *dxTemplate=\"let data of 'content'\">\n    <ng-container *ngFor=\"let icon of iconList; let index=index\">\n      <dx-button [icon]=\"'coast-icon ' + icon\" (onClick)=\"selectIcon(icon)\"\n                 (mouseenter)=\"zoomOut($event, icon)\" (mouseleave)=\"iconZoomOut.instance.hide()\"></dx-button>\n    </ng-container>\n  </div>\n</dx-popover>\n<dx-popover #iconZoomOut height=\"72px\" [enableBodyScroll]=\"false\">\n  <div *dxTemplate=\"let data of 'content'\"\n       style=\"display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;\">\n    <i [class]=\"hoverIcon\" style=\"font-size: 36px;\"></i>\n    <span>{{hoverIcon?.substring(11)}}</span>\n  </div>\n</dx-popover>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { target: [{
                 type: Input
             }], select: [{
@@ -3896,5 +4005,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BoxContainerComponent, BoxContainerModule, CamundaBpmnEditorComponent, CamundaBpmnEditorModule, ChangeFilter, CodeEditorComponent, CodeEditorModule, DataDetailComponent, DataDetailModule, DataGridComponent, DataGridFactory, DataGridModule, DataGridService, DrawerComponent, DrawerModule, DrawerService, DynamicParamsComponent, DynamicParamsModule, FormComponent, FormModule, FormService, FullscreenDirective, IconSelectorComponent, IconSelectorModule, InstanceLinkTemplateDirective, ItemConfigComponent, ItemStyleComponent, MasterDetailTemplateDirective, ModalComponent, ModalModule, ModalService, PdfViewerComponent, PluginManager, RowButtonsTemplateDirective, TooltipContentTemplateDirective, WebsocketModule, WebsocketService, download_file, file_type_icon, format_date, format_datetime, format_file_size, notify_error, notify_success, notify_warning, support_preview_ext, validate, validate_group };
+export { BoxContainerComponent, BoxContainerModule, CamundaBpmnEditorComponent, CamundaBpmnEditorModule, ChangeFilter, CodeEditorComponent, CodeEditorModule, DataDetailComponent, DataDetailModule, DataGridComponent, DataGridFactory, DataGridModule, DataGridService, DrawerComponent, DrawerModule, DrawerService, DynamicParamsComponent, DynamicParamsModule, FormComponent, FormModule, FormService, FullscreenDirective, IconSelectorComponent, IconSelectorModule, ItemConfigComponent, ItemStyleComponent, ModalComponent, ModalModule, ModalService, PdfViewerComponent, PluginManager, RowButtonsTemplateDirective, TooltipContentTemplateDirective, WebsocketModule, WebsocketService, download_file, file_type_icon, format_date, format_datetime, format_file_size, notify_error, notify_success, notify_warning, support_preview_ext, validate, validate_group };
 //# sourceMappingURL=ngx-rs-ant.mjs.map