ngx-rs-ant 1.0.5 → 1.1.3

package/fesm2020/ngx-rs-ant.mjs

@@ -3,26 +3,26 @@ import { Component, Input, HostBinding, EventEmitter, Output, HostListener, View
 import { PluginFactory } from 'coast-plugin-register';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { Subject, map, of, lastValueFrom } from 'rxjs';
+import { Subject, map, of, lastValueFrom, interval } from 'rxjs';
 import * as i2 from 'devextreme-angular/ui/number-box';
 import * as i2$1 from 'devextreme-angular/ui/draggable';
-import * as i3$1 from '@angular/forms';
+import * as i3$2 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { DevExtremeModule, DxDataGridComponent, DxButtonModule, DxValidationGroupComponent } from 'devextreme-angular';
 import { HelperUtils, DevUIModule } from 'ng-devui';
 import * as i1$1 from '@angular/common/http';
 import CustomStore from 'devextreme/data/custom_store';
-import * as i4 from 'devextreme-angular/core';
-import * as i4$1 from 'devextreme-angular/ui/nested';
-import * as i5$1 from 'devextreme-angular/ui/data-grid';
-import * as i6 from 'devextreme-angular/ui/tooltip';
+import * as i3 from 'devextreme-angular/core';
+import * as i4$1 from 'devextreme-angular/ui/data-grid';
+import * as i5$1 from 'devextreme-angular/ui/nested';
+import * as i5 from 'devextreme-angular/ui/tooltip';
 import * as i2$2 from '@angular/platform-browser';
-import * as i5 from 'devextreme-angular/ui/button';
-import * as i3 from 'devextreme-angular/ui/text-box';
-import * as i6$1 from 'devextreme-angular/ui/load-panel';
+import * as i4 from 'devextreme-angular/ui/button';
+import * as i3$1 from 'devextreme-angular/ui/text-box';
+import notify from 'devextreme/ui/notify';
+import * as i6 from 'devextreme-angular/ui/load-panel';
 import * as i7 from 'devextreme-angular/ui/validation-group';
 import * as i4$2 from 'devextreme-angular/ui/popover';
-import notify from 'devextreme/ui/notify';
 
 class DividerLineComponent {
     get _style() {
@@ -186,6 +186,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
             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>\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>\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 {
+    constructor() {
+        this.width = 0;
+        this.height = 0;
+    }
+    ngOnInit() {
+        this.style.width = this.style.width ? this.style.width : 'auto';
+        this.style.height = this.style.height ? this.style.height : 'auto';
+        if (this.style.width !== 'auto') {
+            this.width = this.style.width.substring(0, this.style.width.length - 2);
+        }
+        if (this.style.height !== 'auto') {
+            this.height = this.style.height.substring(0, this.style.height.length - 2);
+        }
+    }
+    select(name, value) {
+        const that = this;
+        if (value === 'auto') {
+            this.style[name] = 'auto';
+            that[name] = 0;
+        }
+        else {
+            if (!that[name]) {
+                that[name] = value;
+            }
+            this.style[name] = that[name] + 'px';
+        }
+    }
+    typing(name, value) {
+        if (value) {
+            this.style[name] = value + 'px';
+        }
+        else {
+            this.style[name] = 'auto';
+        }
+    }
+}
+StyleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: StyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+StyleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: StyleComponent, selector: "rs-style", ngImport: i0, template: "<div class=\"config-item\">\n  <div class=\"item-title\">\u5BBD\u5EA6\u7C7B\u578B</div>\n  <div class=\"item-setting\">\n    <div class=\"card-style-radio\">\n      <div class=\"radio-value\" [ngClass]=\"!style.width || style.width === 'auto' ? 'active' : ''\"\n           (click)=\"select('width','auto')\">\n        <span>\u81EA\u9002\u5E94</span>\n      </div>\n      <div class=\"radio-value\" [ngClass]=\"style.width && style.width !== 'auto' ? 'active' : ''\"\n           (click)=\"select('width',240)\">\n        <span>\u56FA\u5B9A\u503C</span>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"config-item\">\n  <div class=\"item-title\">\u56FA\u5B9A\u5BBD\u5EA6</div>\n  <div class=\"item-setting\">\n    <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\">\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>\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>\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 {
     static createComponent(boxItem, index, style, config) {
         let plugin = PluginFactory.get(config.name);
@@ -200,6 +262,7 @@ class PluginManager {
         const viewContainerRef = boxItem.itemHosts.get(index)?.viewContainerRef;
         viewContainerRef.clear();
         const componentRef = viewContainerRef.createComponent(plugin.component);
+        componentRef.location.nativeElement.style.width = '100%';
         const instance = componentRef.instance;
         Object.assign(instance, config.pluginConfig);
         if (plugin.type === 'form') {
@@ -301,29 +364,20 @@ class PluginManager {
         });
         return activeComponentRef;
     }
-}
-PluginManager.hoverItems = [];
-PluginManager.activeItem = new Subject();
-PluginManager.activeItems = [];
-
-class ItemConfigComponent {
-    ngOnInit() {
-        PluginManager.activeItem.subscribe(item => {
-            if (!item) {
-                return;
-            }
-            this.pageConfigContent.clear();
-            const plugin = PluginFactory.get(item.config?.name);
-            const pluginType = plugin?.type;
-            const pluginConfig = PluginFactory.getConfig(item.config?.name);
-            if (!pluginConfig) {
-                return;
-            }
-            const componentRef = this.pageConfigContent.createComponent(pluginConfig.component);
+    static resetItemConfig(itemConfigContainerRef, item, fieldTree) {
+        if (!item) {
+            return;
+        }
+        itemConfigContainerRef.clear();
+        const plugin = PluginFactory.get(item.config?.name);
+        const pluginType = plugin?.type;
+        const pluginConfig = PluginFactory.getConfig(item.config?.name);
+        if (pluginConfig) {
+            const componentRef = itemConfigContainerRef.createComponent(pluginConfig.component);
             const instance = componentRef.instance;
             instance.config = item.config.pluginConfig;
             if (pluginType === 'form') {
-                instance.fieldTree = this.fieldTree;
+                instance.fieldTree = fieldTree;
             }
             instance.configChange.subscribe((reload) => {
                 if (reload) {
@@ -334,99 +388,62 @@ class ItemConfigComponent {
                     Object.assign(item.componentRef.instance, item.config.pluginConfig);
                 }
             });
-        });
-    }
-}
-ItemConfigComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ItemConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ItemConfigComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ItemConfigComponent, selector: "rs-item-config", viewQueries: [{ propertyName: "pageConfigContent", first: true, predicate: ["pageConfigContent"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #pageConfigContent></ng-container>\n", styles: [""] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ItemConfigComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rs-item-config', template: "<ng-container #pageConfigContent></ng-container>\n" }]
-        }], propDecorators: { pageConfigContent: [{
-                type: ViewChild,
-                args: ['pageConfigContent', { static: true, read: ViewContainerRef }]
-            }] } });
-
-class StyleBlankComponent {
-}
-StyleBlankComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: StyleBlankComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StyleBlankComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: StyleBlankComponent, selector: "rs-style-blank", ngImport: i0, template: "<div>\n  <span>\u8BF7\u5728\u5DE6\u4FA7\u753B\u5E03\u9009\u4E2D\u8282\u70B9</span>\n</div>\n", styles: [":host{height:80px;margin:8px;display:flex;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>\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 StyleComponent {
-    constructor() {
-        this.width = 0;
-        this.height = 0;
-    }
-    ngOnInit() {
-        this.style.width = this.style.width ? this.style.width : 'auto';
-        this.style.height = this.style.height ? this.style.height : 'auto';
-        if (this.style.width !== 'auto') {
-            this.width = this.style.width.substring(0, this.style.width.length - 2);
-        }
-        if (this.style.height !== 'auto') {
-            this.height = this.style.height.substring(0, this.style.height.length - 2);
-        }
-    }
-    select(name, value) {
-        const that = this;
-        if (value === 'auto') {
-            this.style[name] = 'auto';
         }
         else {
-            if (!that[name]) {
-                that[name] = value;
-            }
-            this.style[name] = that[name] + 'px';
+            itemConfigContainerRef.createComponent(ConfigBlankComponent);
         }
     }
-    typing(name, value) {
-        if (value) {
-            this.style[name] = value + 'px';
+    static resetItemStyle(itemStyleContainerRef, item) {
+        itemStyleContainerRef.clear();
+        if (item) {
+            const componentRef = itemStyleContainerRef.createComponent(StyleComponent);
+            const instance = componentRef.instance;
+            instance.style = item.style;
         }
         else {
-            this.style[name] = 'auto';
+            itemStyleContainerRef.createComponent(StyleBlankComponent);
         }
     }
 }
-StyleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: StyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StyleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: StyleComponent, selector: "rs-style", ngImport: i0, template: "<div class=\"config-item\">\n  <div class=\"item-title\">\u5BBD\u5EA6\u7C7B\u578B</div>\n  <div class=\"item-setting\">\n    <div class=\"card-style-radio\">\n      <div class=\"radio-value\" [ngClass]=\"!style.width || style.width === 'auto' ? 'active' : ''\"\n           (click)=\"select('width','auto')\">\n        <span>\u81EA\u9002\u5E94</span>\n      </div>\n      <div class=\"radio-value\" [ngClass]=\"style.width && style.width !== 'auto' ? 'active' : ''\"\n           (click)=\"select('width',240)\">\n        <span>\u56FA\u5B9A\u503C</span>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"config-item\">\n  <div class=\"item-title\">\u56FA\u5B9A\u5BBD\u5EA6</div>\n  <div class=\"item-setting\">\n    <dx-number-box [min]=\"0\"\n                   [showSpinButtons]=\"true\"\n                   [showClearButton]=\"true\"\n                   [(value)]=\"width\"\n                   (onValueChanged)=\"typing('width', $event.value)\">\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    </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 d-input-number{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: [{
+PluginManager.hoverItems = [];
+PluginManager.activeItem = new Subject();
+PluginManager.activeItems = [];
+
+class ItemConfigComponent {
+    ngOnInit() {
+        PluginManager.activeItem.subscribe(item => {
+            PluginManager.resetItemConfig(this.itemConfigContainerRef, item, this.fieldTree);
+        });
+    }
+}
+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>\n", styles: [""] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ItemConfigComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-style', template: "<div class=\"config-item\">\n  <div class=\"item-title\">\u5BBD\u5EA6\u7C7B\u578B</div>\n  <div class=\"item-setting\">\n    <div class=\"card-style-radio\">\n      <div class=\"radio-value\" [ngClass]=\"!style.width || style.width === 'auto' ? 'active' : ''\"\n           (click)=\"select('width','auto')\">\n        <span>\u81EA\u9002\u5E94</span>\n      </div>\n      <div class=\"radio-value\" [ngClass]=\"style.width && style.width !== 'auto' ? 'active' : ''\"\n           (click)=\"select('width',240)\">\n        <span>\u56FA\u5B9A\u503C</span>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"config-item\">\n  <div class=\"item-title\">\u56FA\u5B9A\u5BBD\u5EA6</div>\n  <div class=\"item-setting\">\n    <dx-number-box [min]=\"0\"\n                   [showSpinButtons]=\"true\"\n                   [showClearButton]=\"true\"\n                   [(value)]=\"width\"\n                   (onValueChanged)=\"typing('width', $event.value)\">\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    </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 d-input-number{flex:1}\n"] }]
-        }] });
+            args: [{ selector: 'rs-item-config', template: "<ng-container #itemConfigContainerRef></ng-container>\n" }]
+        }], propDecorators: { itemConfigContainerRef: [{
+                type: ViewChild,
+                args: ['itemConfigContainerRef', {
+                        static: true,
+                        read: ViewContainerRef
+                    }]
+            }] } });
 
 class ItemStyleComponent {
-    constructor(changeDetectorRef) {
-        this.changeDetectorRef = changeDetectorRef;
-    }
     ngOnInit() {
-        this.pageStyleContent.createComponent(StyleBlankComponent);
         PluginManager.activeItem.subscribe(item => {
-            this.pageStyleContent.clear();
-            if (item) {
-                const componentRef = this.pageStyleContent.createComponent(StyleComponent);
-                const instance = componentRef.instance;
-                instance.style = item.style;
-            }
-            else {
-                this.pageStyleContent.createComponent(StyleBlankComponent);
-                this.changeDetectorRef.detectChanges();
-            }
+            PluginManager.resetItemStyle(this.itemStyleContainerRef, item);
         });
     }
 }
-ItemStyleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ItemStyleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ItemStyleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ItemStyleComponent, selector: "rs-item-style", viewQueries: [{ propertyName: "pageStyleContent", first: true, predicate: ["pageStyleContent"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #pageStyleContent></ng-container>\n", styles: [""] });
+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>\n", styles: [""] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ItemStyleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-item-style', template: "<ng-container #pageStyleContent></ng-container>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { pageStyleContent: [{
+            args: [{ selector: 'rs-item-style', template: "<ng-container #itemStyleContainerRef></ng-container>\n" }]
+        }], propDecorators: { itemStyleContainerRef: [{
                 type: ViewChild,
-                args: ['pageStyleContent', { static: true, read: ViewContainerRef }]
+                args: ['itemStyleContainerRef', { static: true, read: ViewContainerRef }]
             }] } });
 
 class BoxItemHostDirective {
@@ -569,7 +586,10 @@ class BoxItemComponent {
     calcStyle(item) {
         const width = item.style?.width ? item.style.width : 'auto';
         const height = item.style?.height ? item.style.height : 'auto';
-        return this._calcStyle(this.config.direction, width, height);
+        return {
+            ...this._calcStyle(this.config.direction, width, height),
+            overflow: 'auto'
+        };
     }
     _calcStyle(direction, width, height) {
         if (direction === 'row') {
@@ -711,7 +731,8 @@ BoxContainerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         StyleBlankComponent,
         ItemBlankComponent,
         StyleComponent,
-        PluginNotFoundComponent], imports: [CommonModule,
+        PluginNotFoundComponent,
+        ConfigBlankComponent], imports: [CommonModule,
         FormsModule,
         DevExtremeModule], exports: [BoxContainerComponent,
         ItemConfigComponent,
@@ -735,7 +756,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         StyleBlankComponent,
                         ItemBlankComponent,
                         StyleComponent,
-                        PluginNotFoundComponent
+                        PluginNotFoundComponent,
+                        ConfigBlankComponent
                     ],
                     imports: [
                         CommonModule,
@@ -1443,10 +1465,10 @@ 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: { table: "table", oid: "oid" }, ngImport: i0, template: "<dx-button #fileBtn type=\"default\" stylingMode=\"text\" (onClick)=\"download()\" [disabled]=\"loading\">\n  <i class=\"coast-icon-file-{{icon}}\" style=\"padding-right: 4px;\"></i>\n  {{filename}}\n  <dx-tooltip [target]=\"fileBtn.instance.element()\"\n              [position]=\"'top'\"\n              [visible]=\"false\"\n              [showEvent]=\"'mouseenter'\"\n              [hideEvent]=\"'mouseleave'\">\n    <div *dxTemplate=\"let data of 'content'\">\n      <div style=\"max-width: 320px; text-align: left; white-space: normal;\" [innerHTML]=\"content\"></div>\n    </div>\n  </dx-tooltip>\n</dx-button><br/>\n", styles: [":host{height:20px;padding-right:4px}:host button{color:var(--coast-default-color, #337ab7)}\n"], dependencies: [{ kind: "directive", type: i4.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i5.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.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: { table: "table", oid: "oid" }, ngImport: i0, template: "<dx-button #fileBtn type=\"default\" stylingMode=\"text\">\n  <i class=\"coast-icon-file-{{icon}}\" style=\"padding-right: 4px;\"></i>\n  {{filename}}\n  <dx-tooltip [target]=\"fileBtn.instance.element()\"\n              [position]=\"'top'\"\n              [visible]=\"false\"\n              [showEvent]=\"'click'\">\n    <div *dxTemplate=\"let data of 'content'\">\n      <div [innerHTML]=\"content\"></div>\n      <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-download\" text=\"\u4E0B\u8F7D\"\n                 (onClick)=\"download()\" [disabled]=\"loading\"></dx-button>\n    </div>\n  </dx-tooltip>\n</dx-button><br/>\n", styles: [":host{height:20px;padding-right:4px}:host button{color:var(--coast-default-color, #337ab7)}\n"], 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\" (onClick)=\"download()\" [disabled]=\"loading\">\n  <i class=\"coast-icon-file-{{icon}}\" style=\"padding-right: 4px;\"></i>\n  {{filename}}\n  <dx-tooltip [target]=\"fileBtn.instance.element()\"\n              [position]=\"'top'\"\n              [visible]=\"false\"\n              [showEvent]=\"'mouseenter'\"\n              [hideEvent]=\"'mouseleave'\">\n    <div *dxTemplate=\"let data of 'content'\">\n      <div style=\"max-width: 320px; text-align: left; white-space: normal;\" [innerHTML]=\"content\"></div>\n    </div>\n  </dx-tooltip>\n</dx-button><br/>\n", styles: [":host{height:20px;padding-right:4px}:host button{color:var(--coast-default-color, #337ab7)}\n"] }]
+            args: [{ selector: 'rs-file-cell-template', template: "<dx-button #fileBtn type=\"default\" stylingMode=\"text\">\n  <i class=\"coast-icon-file-{{icon}}\" style=\"padding-right: 4px;\"></i>\n  {{filename}}\n  <dx-tooltip [target]=\"fileBtn.instance.element()\"\n              [position]=\"'top'\"\n              [visible]=\"false\"\n              [showEvent]=\"'click'\">\n    <div *dxTemplate=\"let data of 'content'\">\n      <div [innerHTML]=\"content\"></div>\n      <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-download\" text=\"\u4E0B\u8F7D\"\n                 (onClick)=\"download()\" [disabled]=\"loading\"></dx-button>\n    </div>\n  </dx-tooltip>\n</dx-button><br/>\n", styles: [":host{height:20px;padding-right:4px}:host button{color:var(--coast-default-color, #337ab7)}\n"] }]
         }], ctorParameters: function () { return [{ type: DataGridService }, { type: i2$2.DomSanitizer }]; }, propDecorators: { table: [{
                 type: Input
             }], oid: [{
@@ -1457,56 +1479,37 @@ class UserInfoTemplateComponent {
     constructor(service, domSanitizer) {
         this.service = service;
         this.domSanitizer = domSanitizer;
-        this.users = [];
     }
     ngOnInit() {
-        const userInfo = this.cellInfo.column.userInfo;
-        const value = this.cellInfo.data[userInfo.field];
-        if (value) {
-            if (Array.isArray(value)) {
-                for (const v of value) {
-                    this.service.getUserInfo(v).subscribe(response => {
-                        this.users.push(response);
-                        // 重绘表格宽高
-                        setTimeout(() => {
-                            this.table.resize();
-                        });
-                    });
-                }
-            }
-            else {
-                this.service.getUserInfo(value).subscribe(response => {
-                    this.users.push(response);
-                    // 重绘表格宽高
-                    setTimeout(() => {
-                        this.table.resize();
-                    });
-                });
-            }
-        }
-    }
-    convertContent(userInfo) {
-        let content = '<table>';
-        for (const item of userInfo) {
-            content += `
+        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>
       `;
-        }
-        content += '</table>';
-        return this.domSanitizer.bypassSecurityTrustHtml(content);
+            }
+            content += '</table>';
+            this.content = this.domSanitizer.bypassSecurityTrustHtml(content);
+            // 重绘表格宽高
+            setTimeout(() => {
+                this.table.resize();
+            });
+        });
     }
 }
 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: { table: "table", cellInfo: "cellInfo" }, ngImport: i0, template: "<ng-container *ngFor=\"let user of users\">\n  <dx-button #textDiv type=\"default\" stylingMode=\"text\">\n    {{user.displayName}}\n    <dx-tooltip [target]=\"textDiv.instance.element()\"\n                [position]=\"'top'\"\n                [showEvent]=\"'mouseenter'\"\n                [hideEvent]=\"'mouseleave'\">\n      <div *dxTemplate=\"let data of 'content'\" [innerHTML]=\"convertContent(user.userInfo)\">\n      </div>\n    </dx-tooltip>\n  </dx-button>\n  <br/>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i5.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.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"] }] });
+UserInfoTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: UserInfoTemplateComponent, selector: "rs-user-info-template", inputs: { table: "table", uid: "uid" }, ngImport: i0, template: "<dx-button #textDiv type=\"default\" stylingMode=\"text\">\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: "<ng-container *ngFor=\"let user of users\">\n  <dx-button #textDiv type=\"default\" stylingMode=\"text\">\n    {{user.displayName}}\n    <dx-tooltip [target]=\"textDiv.instance.element()\"\n                [position]=\"'top'\"\n                [showEvent]=\"'mouseenter'\"\n                [hideEvent]=\"'mouseleave'\">\n      <div *dxTemplate=\"let data of 'content'\" [innerHTML]=\"convertContent(user.userInfo)\">\n      </div>\n    </dx-tooltip>\n  </dx-button>\n  <br/>\n</ng-container>\n" }]
+            args: [{ selector: 'rs-user-info-template', template: "<dx-button #textDiv type=\"default\" stylingMode=\"text\">\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: { table: [{
                 type: Input
-            }], cellInfo: [{
+            }], uid: [{
                 type: Input
             }] } });
 
@@ -1514,56 +1517,37 @@ class UnitInfoTemplateComponent {
     constructor(service, domSanitizer) {
         this.service = service;
         this.domSanitizer = domSanitizer;
-        this.units = [];
     }
     ngOnInit() {
-        const unitInfo = this.cellInfo.column.unitInfo;
-        const value = this.cellInfo.data[unitInfo.field];
-        if (value) {
-            if (Array.isArray(value)) {
-                for (const v of value) {
-                    this.service.getUnitInfo(v).subscribe(response => {
-                        this.units.push(response);
-                        // 重绘表格宽高
-                        setTimeout(() => {
-                            this.table.resize();
-                        });
-                    });
-                }
-            }
-            else {
-                this.service.getUnitInfo(value).subscribe(response => {
-                    this.units.push(response);
-                    // 重绘表格宽高
-                    setTimeout(() => {
-                        this.table.resize();
-                    });
-                });
-            }
-        }
-    }
-    convertContent(unitInfo) {
-        let content = '<table>';
-        for (const item of unitInfo) {
-            content += `
+        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>
       `;
-        }
-        content += '</table>';
-        return this.domSanitizer.bypassSecurityTrustHtml(content);
+            }
+            content += '</table>';
+            this.content = this.domSanitizer.bypassSecurityTrustHtml(content);
+            // 重绘表格宽高
+            setTimeout(() => {
+                this.table.resize();
+            });
+        });
     }
 }
 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: { table: "table", cellInfo: "cellInfo" }, ngImport: i0, template: "<ng-container *ngFor=\"let unit of units\">\n  <dx-button #textDiv type=\"default\" stylingMode=\"text\">\n    {{unit.displayName}}\n    <dx-tooltip [target]=\"textDiv.instance.element()\"\n                [position]=\"'top'\"\n                [showEvent]=\"'mouseenter'\"\n                [hideEvent]=\"'mouseleave'\">\n      <div *dxTemplate=\"let data of 'content'\" [innerHTML]=\"convertContent(unit.unitInfo)\">\n      </div>\n    </dx-tooltip>\n  </dx-button>\n  <br/>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i5.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.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"] }] });
+UnitInfoTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: UnitInfoTemplateComponent, selector: "rs-unit-info-template", inputs: { table: "table", uid: "uid" }, ngImport: i0, template: "<dx-button #textDiv type=\"default\" stylingMode=\"text\">\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: "<ng-container *ngFor=\"let unit of units\">\n  <dx-button #textDiv type=\"default\" stylingMode=\"text\">\n    {{unit.displayName}}\n    <dx-tooltip [target]=\"textDiv.instance.element()\"\n                [position]=\"'top'\"\n                [showEvent]=\"'mouseenter'\"\n                [hideEvent]=\"'mouseleave'\">\n      <div *dxTemplate=\"let data of 'content'\" [innerHTML]=\"convertContent(unit.unitInfo)\">\n      </div>\n    </dx-tooltip>\n  </dx-button>\n  <br/>\n</ng-container>\n" }]
+            args: [{ selector: 'rs-unit-info-template', template: "<dx-button #textDiv type=\"default\" stylingMode=\"text\">\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: { table: [{
                 type: Input
-            }], cellInfo: [{
+            }], uid: [{
                 type: Input
             }] } });
 
@@ -1606,11 +1590,19 @@ class DataGridComponent {
         }
         return cellInfo.value;
     }
-    convertTextValueCellText(cellInfo) {
-        if (!cellInfo.value) {
-            return;
+    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 [];
         }
-        return cellInfo.value.replaceAll('\n', '<br />');
+        return cellInfo.data[key];
     }
     refresh(callback) {
         this.dxDataGrid.instance.refresh().then(() => {
@@ -1631,12 +1623,20 @@ class DataGridComponent {
     onSelectionChanged($event) {
         this.onDxDataGridSelectionChanged.emit($event);
     }
+    onEditorPreparing($event) {
+        if ($event.parentType === 'filterRow' && $event.editorName === 'dxTextBox') {
+            $event.editorOptions.valueChangeEvent = 'blur';
+            $event.editorOptions.onEnterKey = (e) => {
+                e.component.blur();
+            };
+        }
+    }
 }
 DataGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DataGridComponent, deps: [{ token: DataGridFactory }], 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", 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\"\n              [columns]=\"columns\"\n              [syncLookupFilterValues]=\"false\"\n              [showBorders]=\"true\"\n              [showRowLines]=\"true\"\n              [hoverStateEnabled]=\"true\"\n              [rowAlternationEnabled]=\"true\"\n              [columnAutoWidth]=\"true\"\n              [allowColumnResizing]=\"true\"\n              columnResizingMode=\"widget\"\n              dateSerializationFormat=\"yyyy/MM/dd HH:mm:ss\"\n              (onCellPrepared)=\"onCellPrepared($event)\"\n              (onContentReady)=\"onContentReady($event)\"\n              (onSelectionChanged)=\"onSelectionChanged($event)\"\n              (onRowExpanding)=\"$event.component.collapseAll(-1)\">\n  <dxo-sorting mode=\"multiple\"></dxo-sorting>\n  <dxo-selection [mode]=\"selectionMode\" selectAllMode=\"page\" showCheckBoxesMode=\"always\"></dxo-selection>\n  <dxo-header-filter [visible]=\"true\">\n    <dxo-search [enabled]=\"true\"></dxo-search>\n    <dxo-texts [ok]=\"'\u786E\u5B9A'\"></dxo-texts>\n  </dxo-header-filter>\n  <dxo-filter-row [visible]=\"true\"></dxo-filter-row>\n  <dxo-remote-operations [filtering]=\"true\"\n                         [sorting]=\"true\"\n                         [paging]=\"true\">\n  </dxo-remote-operations>\n  <dxo-master-detail [enabled]=\"enableMasterDetail\" template=\"masterDetailTemplate\"></dxo-master-detail>\n  <dxo-paging [pageSize]=\"15\"></dxo-paging>\n  <dxo-pager [visible]=\"true\"\n             [showInfo]=\"true\"\n             infoText=\"\u7B2C{0}\u9875\uFF0C\u5171{1}\u9875\uFF08\u5171{2}\u4E2A\u9879\u76EE\uFF09\"\n             [showPageSizeSelector]=\"true\"\n             [allowedPageSizes]=\"[15, 30, 50]\"\n  ></dxo-pager>\n  <dxo-scrolling mode=\"virtual\" [preloadEnabled]=\"true\" showScrollbar=\"always\"></dxo-scrolling>\n  <dxo-export [allowExportSelectedData]=\"true\"\n              [fileName]=\"className\"></dxo-export>\n  <div *dxTemplate=\"let cellInfo of 'masterDetailTemplate'\">\n    <ng-container [ngTemplateOutlet]=\"masterDetailTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"{$implicit: cellInfo}\"></ng-container>\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'rowButtonsTemplate'\">\n    <ng-container [ngTemplateOutlet]=\"rowButtonsTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"{$implicit: cellInfo}\"></ng-container>\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'instanceLinkTemplate'\">\n    <ng-container [ngTemplateOutlet]=\"instanceLinkTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"{$implicit: cellInfo}\"></ng-container>\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'rowIndexTemplate'\">\n    {{cellInfo.rowIndex + 1}}\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'multipleValueCellTemplate'\">\n    <div [innerHTML]=\"convertMultipleValueCellText(cellInfo)\"></div>\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'textCellTemplate'\">\n    <div #textDiv style=\"text-overflow: ellipsis; overflow: hidden;\"\n         [innerHTML]=\"convertTextValueCellText(cellInfo)\"></div>\n    <dx-tooltip [target]=\"textDiv\"\n                [position]=\"'top'\"\n                [showEvent]=\"'mouseenter'\"\n                [hideEvent]=\"'mouseleave'\">\n      <div *dxTemplate=\"let data of 'content'\">\n        <p style=\"max-width: 320px; text-align: left; white-space: normal;\" [innerText]=\"cellInfo.value\"></p>\n      </div>\n    </dx-tooltip>\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'fileCellTemplate'\">\n    <ng-container *ngFor=\"let file of cellInfo.value\">\n      <rs-file-cell-template [table]=\"cellInfo.component\" [oid]=\"file\"></rs-file-cell-template>\n    </ng-container>\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'userCellTemplate'\">\n    <rs-user-info-template [table]=\"cellInfo.component\" [cellInfo]=\"cellInfo\"></rs-user-info-template>\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'unitCellTemplate'\">\n    <rs-unit-info-template [table]=\"cellInfo.component\" [cellInfo]=\"cellInfo\"></rs-unit-info-template>\n  </div>\n</dx-data-grid>\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: i4.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i4$1.DxoExportComponent, selector: "dxo-export", inputs: ["backgroundColor", "enabled", "fileName", "formats", "margin", "printingEnabled", "svgToCanvas", "allowExportSelectedData", "texts"] }, { 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: i4$1.DxoSearchComponent, selector: "dxo-search", inputs: ["editorOptions", "enabled", "timeout", "mode", "searchExpr"] }, { kind: "component", type: i4$1.DxoSelectionComponent, selector: "dxo-selection", inputs: ["allowSelectAll", "recursive", "selectByClick", "deferred", "mode", "selectAllMode", "showCheckBoxesMode"] }, { kind: "component", type: i4$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: i4$1.DxoHeaderFilterComponent, selector: "dxo-header-filter", inputs: ["allowSearch", "allowSelectAll", "dataSource", "groupInterval", "height", "search", "searchMode", "width", "searchTimeout", "texts", "visible", "showRelevantValues"] }, { kind: "component", type: i4$1.DxoFilterRowComponent, selector: "dxo-filter-row", inputs: ["applyFilter", "applyFilterText", "betweenEndText", "betweenStartText", "operationDescriptions", "resetOperationText", "showAllText", "showOperationChooser", "visible"] }, { kind: "component", type: i4$1.DxoMasterDetailComponent, selector: "dxo-master-detail", inputs: ["autoExpandAll", "enabled", "template"] }, { kind: "component", type: i4$1.DxoPagerComponent, selector: "dxo-pager", inputs: ["allowedPageSizes", "displayMode", "infoText", "label", "showInfo", "showNavigationButtons", "showPageSizeSelector", "visible"] }, { kind: "component", type: i4$1.DxoPagingComponent, selector: "dxo-paging", inputs: ["enabled", "pageIndex", "pageSize"], outputs: ["pageIndexChange", "pageSizeChange"] }, { kind: "component", type: i4$1.DxoRemoteOperationsComponent, selector: "dxo-remote-operations", inputs: ["filtering", "grouping", "groupPaging", "paging", "sorting", "summary"] }, { kind: "component", type: i4$1.DxoScrollingComponent, selector: "dxo-scrolling", inputs: ["columnRenderingMode", "mode", "preloadEnabled", "renderAsync", "rowRenderingMode", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative"] }, { kind: "component", type: i4$1.DxoSortingComponent, selector: "dxo-sorting", inputs: ["ascendingText", "clearText", "descendingText", "mode", "showSortIndexes"] }, { kind: "component", type: i6.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: ["table", "oid"] }, { kind: "component", type: UserInfoTemplateComponent, selector: "rs-user-info-template", inputs: ["table", "cellInfo"] }, { kind: "component", type: UnitInfoTemplateComponent, selector: "rs-unit-info-template", inputs: ["table", "cellInfo"] }] });
+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", 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\"\n              [columns]=\"columns\"\n              [syncLookupFilterValues]=\"false\"\n              [showBorders]=\"true\"\n              [showRowLines]=\"true\"\n              [hoverStateEnabled]=\"true\"\n              [rowAlternationEnabled]=\"true\"\n              [columnAutoWidth]=\"true\"\n              [allowColumnResizing]=\"true\"\n              columnResizingMode=\"widget\"\n              dateSerializationFormat=\"yyyy/MM/dd HH:mm:ss\"\n              (onCellPrepared)=\"onCellPrepared($event)\"\n              (onEditorPreparing)=\"onEditorPreparing($event)\"\n              (onContentReady)=\"onContentReady($event)\"\n              (onSelectionChanged)=\"onSelectionChanged($event)\"\n              (onRowExpanding)=\"$event.component.collapseAll(-1)\">\n  <dxo-sorting mode=\"multiple\"></dxo-sorting>\n  <dxo-selection [mode]=\"selectionMode\" selectAllMode=\"page\" showCheckBoxesMode=\"always\"></dxo-selection>\n  <dxo-header-filter [visible]=\"true\">\n    <dxo-search [enabled]=\"true\"></dxo-search>\n    <dxo-texts [ok]=\"'\u786E\u5B9A'\"></dxo-texts>\n  </dxo-header-filter>\n  <dxo-filter-row [visible]=\"true\"></dxo-filter-row>\n  <dxo-remote-operations [filtering]=\"true\"\n                         [sorting]=\"true\"\n                         [paging]=\"true\">\n  </dxo-remote-operations>\n  <dxo-master-detail [enabled]=\"enableMasterDetail\" template=\"masterDetailTemplate\"></dxo-master-detail>\n  <dxo-paging [pageSize]=\"15\"></dxo-paging>\n  <dxo-pager [visible]=\"true\"\n             [showInfo]=\"true\"\n             infoText=\"\u7B2C{0}\u9875\uFF0C\u5171{1}\u9875\uFF08\u5171{2}\u4E2A\u9879\u76EE\uFF09\"\n             [showPageSizeSelector]=\"true\"\n             [allowedPageSizes]=\"[15, 30, 50]\"\n  ></dxo-pager>\n  <dxo-scrolling showScrollbar=\"always\"></dxo-scrolling>\n  <div *dxTemplate=\"let cellInfo of 'masterDetailTemplate'\">\n    <ng-container [ngTemplateOutlet]=\"masterDetailTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"{$implicit: cellInfo}\"></ng-container>\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'rowButtonsTemplate'\">\n    <ng-container [ngTemplateOutlet]=\"rowButtonsTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"{$implicit: cellInfo}\"></ng-container>\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'instanceLinkTemplate'\">\n    <ng-container [ngTemplateOutlet]=\"instanceLinkTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"{$implicit: cellInfo}\"></ng-container>\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'rowIndexTemplate'\">\n    {{cellInfo.rowIndex + 1}}\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'multipleValueCellTemplate'\">\n    <div [innerHTML]=\"convertMultipleValueCellText(cellInfo)\"></div>\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'textCellTemplate'\">\n    <div #textDiv style=\"text-overflow: ellipsis; overflow: hidden; cursor: pointer;\">{{cellInfo.value}}</div>\n    <dx-tooltip [target]=\"textDiv\"\n                [position]=\"'top'\"\n                [showEvent]=\"'click'\">\n      <div *dxTemplate=\"let data of 'content'\">\n        <p style=\"max-width: 320px; text-align: left; white-space: normal;\" [innerText]=\"cellInfo.value\"></p>\n      </div>\n    </dx-tooltip>\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'fileCellTemplate'\">\n    <ng-container *ngFor=\"let file of cellInfo.value\">\n      <rs-file-cell-template [table]=\"cellInfo.component\" [oid]=\"file\"></rs-file-cell-template>\n    </ng-container>\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'userCellTemplate'\">\n    <ng-container *ngFor=\"let user of getOriginalValue(cellInfo, 'userInfo')\">\n      <rs-user-info-template [table]=\"cellInfo.component\" [uid]=\"user\"></rs-user-info-template>\n    </ng-container>\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'unitCellTemplate'\">\n    <ng-container *ngFor=\"let unit of getOriginalValue(cellInfo, 'unitInfo')\">\n      <rs-unit-info-template [table]=\"cellInfo.component\" [uid]=\"unit\"></rs-unit-info-template>\n    </ng-container>\n  </div>\n</dx-data-grid>\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: i4$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: i5$1.DxoSearchComponent, selector: "dxo-search", inputs: ["editorOptions", "enabled", "timeout", "mode", "searchExpr"] }, { kind: "component", type: i5$1.DxoSelectionComponent, selector: "dxo-selection", inputs: ["allowSelectAll", "recursive", "selectByClick", "deferred", "mode", "selectAllMode", "showCheckBoxesMode"] }, { kind: "component", type: i5$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: i5$1.DxoHeaderFilterComponent, selector: "dxo-header-filter", inputs: ["allowSearch", "allowSelectAll", "dataSource", "groupInterval", "height", "search", "searchMode", "width", "searchTimeout", "texts", "visible", "showRelevantValues"] }, { kind: "component", type: i5$1.DxoFilterRowComponent, selector: "dxo-filter-row", inputs: ["applyFilter", "applyFilterText", "betweenEndText", "betweenStartText", "operationDescriptions", "resetOperationText", "showAllText", "showOperationChooser", "visible"] }, { kind: "component", type: i5$1.DxoMasterDetailComponent, selector: "dxo-master-detail", inputs: ["autoExpandAll", "enabled", "template"] }, { kind: "component", type: i5$1.DxoPagerComponent, selector: "dxo-pager", inputs: ["allowedPageSizes", "displayMode", "infoText", "label", "showInfo", "showNavigationButtons", "showPageSizeSelector", "visible"] }, { kind: "component", type: i5$1.DxoPagingComponent, selector: "dxo-paging", inputs: ["enabled", "pageIndex", "pageSize"], outputs: ["pageIndexChange", "pageSizeChange"] }, { kind: "component", type: i5$1.DxoRemoteOperationsComponent, selector: "dxo-remote-operations", inputs: ["filtering", "grouping", "groupPaging", "paging", "sorting", "summary"] }, { kind: "component", type: i5$1.DxoScrollingComponent, selector: "dxo-scrolling", inputs: ["columnRenderingMode", "mode", "preloadEnabled", "renderAsync", "rowRenderingMode", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative"] }, { kind: "component", type: i5$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: ["table", "oid"] }, { kind: "component", type: UserInfoTemplateComponent, selector: "rs-user-info-template", inputs: ["table", "uid"] }, { kind: "component", type: UnitInfoTemplateComponent, selector: "rs-unit-info-template", inputs: ["table", "uid"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DataGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-data-grid', providers: [DataGridService], template: "<dx-data-grid [dataSource]=\"dataSource\"\n              [columns]=\"columns\"\n              [syncLookupFilterValues]=\"false\"\n              [showBorders]=\"true\"\n              [showRowLines]=\"true\"\n              [hoverStateEnabled]=\"true\"\n              [rowAlternationEnabled]=\"true\"\n              [columnAutoWidth]=\"true\"\n              [allowColumnResizing]=\"true\"\n              columnResizingMode=\"widget\"\n              dateSerializationFormat=\"yyyy/MM/dd HH:mm:ss\"\n              (onCellPrepared)=\"onCellPrepared($event)\"\n              (onContentReady)=\"onContentReady($event)\"\n              (onSelectionChanged)=\"onSelectionChanged($event)\"\n              (onRowExpanding)=\"$event.component.collapseAll(-1)\">\n  <dxo-sorting mode=\"multiple\"></dxo-sorting>\n  <dxo-selection [mode]=\"selectionMode\" selectAllMode=\"page\" showCheckBoxesMode=\"always\"></dxo-selection>\n  <dxo-header-filter [visible]=\"true\">\n    <dxo-search [enabled]=\"true\"></dxo-search>\n    <dxo-texts [ok]=\"'\u786E\u5B9A'\"></dxo-texts>\n  </dxo-header-filter>\n  <dxo-filter-row [visible]=\"true\"></dxo-filter-row>\n  <dxo-remote-operations [filtering]=\"true\"\n                         [sorting]=\"true\"\n                         [paging]=\"true\">\n  </dxo-remote-operations>\n  <dxo-master-detail [enabled]=\"enableMasterDetail\" template=\"masterDetailTemplate\"></dxo-master-detail>\n  <dxo-paging [pageSize]=\"15\"></dxo-paging>\n  <dxo-pager [visible]=\"true\"\n             [showInfo]=\"true\"\n             infoText=\"\u7B2C{0}\u9875\uFF0C\u5171{1}\u9875\uFF08\u5171{2}\u4E2A\u9879\u76EE\uFF09\"\n             [showPageSizeSelector]=\"true\"\n             [allowedPageSizes]=\"[15, 30, 50]\"\n  ></dxo-pager>\n  <dxo-scrolling mode=\"virtual\" [preloadEnabled]=\"true\" showScrollbar=\"always\"></dxo-scrolling>\n  <dxo-export [allowExportSelectedData]=\"true\"\n              [fileName]=\"className\"></dxo-export>\n  <div *dxTemplate=\"let cellInfo of 'masterDetailTemplate'\">\n    <ng-container [ngTemplateOutlet]=\"masterDetailTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"{$implicit: cellInfo}\"></ng-container>\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'rowButtonsTemplate'\">\n    <ng-container [ngTemplateOutlet]=\"rowButtonsTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"{$implicit: cellInfo}\"></ng-container>\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'instanceLinkTemplate'\">\n    <ng-container [ngTemplateOutlet]=\"instanceLinkTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"{$implicit: cellInfo}\"></ng-container>\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'rowIndexTemplate'\">\n    {{cellInfo.rowIndex + 1}}\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'multipleValueCellTemplate'\">\n    <div [innerHTML]=\"convertMultipleValueCellText(cellInfo)\"></div>\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'textCellTemplate'\">\n    <div #textDiv style=\"text-overflow: ellipsis; overflow: hidden;\"\n         [innerHTML]=\"convertTextValueCellText(cellInfo)\"></div>\n    <dx-tooltip [target]=\"textDiv\"\n                [position]=\"'top'\"\n                [showEvent]=\"'mouseenter'\"\n                [hideEvent]=\"'mouseleave'\">\n      <div *dxTemplate=\"let data of 'content'\">\n        <p style=\"max-width: 320px; text-align: left; white-space: normal;\" [innerText]=\"cellInfo.value\"></p>\n      </div>\n    </dx-tooltip>\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'fileCellTemplate'\">\n    <ng-container *ngFor=\"let file of cellInfo.value\">\n      <rs-file-cell-template [table]=\"cellInfo.component\" [oid]=\"file\"></rs-file-cell-template>\n    </ng-container>\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'userCellTemplate'\">\n    <rs-user-info-template [table]=\"cellInfo.component\" [cellInfo]=\"cellInfo\"></rs-user-info-template>\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'unitCellTemplate'\">\n    <rs-unit-info-template [table]=\"cellInfo.component\" [cellInfo]=\"cellInfo\"></rs-unit-info-template>\n  </div>\n</dx-data-grid>\n", styles: [":host{display:flex;flex-flow:column nowrap}:host dx-data-grid{flex:auto;height:0}\n"] }]
+            args: [{ selector: 'rs-data-grid', providers: [DataGridService], template: "<dx-data-grid [dataSource]=\"dataSource\"\n              [columns]=\"columns\"\n              [syncLookupFilterValues]=\"false\"\n              [showBorders]=\"true\"\n              [showRowLines]=\"true\"\n              [hoverStateEnabled]=\"true\"\n              [rowAlternationEnabled]=\"true\"\n              [columnAutoWidth]=\"true\"\n              [allowColumnResizing]=\"true\"\n              columnResizingMode=\"widget\"\n              dateSerializationFormat=\"yyyy/MM/dd HH:mm:ss\"\n              (onCellPrepared)=\"onCellPrepared($event)\"\n              (onEditorPreparing)=\"onEditorPreparing($event)\"\n              (onContentReady)=\"onContentReady($event)\"\n              (onSelectionChanged)=\"onSelectionChanged($event)\"\n              (onRowExpanding)=\"$event.component.collapseAll(-1)\">\n  <dxo-sorting mode=\"multiple\"></dxo-sorting>\n  <dxo-selection [mode]=\"selectionMode\" selectAllMode=\"page\" showCheckBoxesMode=\"always\"></dxo-selection>\n  <dxo-header-filter [visible]=\"true\">\n    <dxo-search [enabled]=\"true\"></dxo-search>\n    <dxo-texts [ok]=\"'\u786E\u5B9A'\"></dxo-texts>\n  </dxo-header-filter>\n  <dxo-filter-row [visible]=\"true\"></dxo-filter-row>\n  <dxo-remote-operations [filtering]=\"true\"\n                         [sorting]=\"true\"\n                         [paging]=\"true\">\n  </dxo-remote-operations>\n  <dxo-master-detail [enabled]=\"enableMasterDetail\" template=\"masterDetailTemplate\"></dxo-master-detail>\n  <dxo-paging [pageSize]=\"15\"></dxo-paging>\n  <dxo-pager [visible]=\"true\"\n             [showInfo]=\"true\"\n             infoText=\"\u7B2C{0}\u9875\uFF0C\u5171{1}\u9875\uFF08\u5171{2}\u4E2A\u9879\u76EE\uFF09\"\n             [showPageSizeSelector]=\"true\"\n             [allowedPageSizes]=\"[15, 30, 50]\"\n  ></dxo-pager>\n  <dxo-scrolling showScrollbar=\"always\"></dxo-scrolling>\n  <div *dxTemplate=\"let cellInfo of 'masterDetailTemplate'\">\n    <ng-container [ngTemplateOutlet]=\"masterDetailTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"{$implicit: cellInfo}\"></ng-container>\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'rowButtonsTemplate'\">\n    <ng-container [ngTemplateOutlet]=\"rowButtonsTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"{$implicit: cellInfo}\"></ng-container>\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'instanceLinkTemplate'\">\n    <ng-container [ngTemplateOutlet]=\"instanceLinkTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"{$implicit: cellInfo}\"></ng-container>\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'rowIndexTemplate'\">\n    {{cellInfo.rowIndex + 1}}\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'multipleValueCellTemplate'\">\n    <div [innerHTML]=\"convertMultipleValueCellText(cellInfo)\"></div>\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'textCellTemplate'\">\n    <div #textDiv style=\"text-overflow: ellipsis; overflow: hidden; cursor: pointer;\">{{cellInfo.value}}</div>\n    <dx-tooltip [target]=\"textDiv\"\n                [position]=\"'top'\"\n                [showEvent]=\"'click'\">\n      <div *dxTemplate=\"let data of 'content'\">\n        <p style=\"max-width: 320px; text-align: left; white-space: normal;\" [innerText]=\"cellInfo.value\"></p>\n      </div>\n    </dx-tooltip>\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'fileCellTemplate'\">\n    <ng-container *ngFor=\"let file of cellInfo.value\">\n      <rs-file-cell-template [table]=\"cellInfo.component\" [oid]=\"file\"></rs-file-cell-template>\n    </ng-container>\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'userCellTemplate'\">\n    <ng-container *ngFor=\"let user of getOriginalValue(cellInfo, 'userInfo')\">\n      <rs-user-info-template [table]=\"cellInfo.component\" [uid]=\"user\"></rs-user-info-template>\n    </ng-container>\n  </div>\n  <div *dxTemplate=\"let cellInfo of 'unitCellTemplate'\">\n    <ng-container *ngFor=\"let unit of getOriginalValue(cellInfo, 'unitInfo')\">\n      <rs-unit-info-template [table]=\"cellInfo.component\" [uid]=\"unit\"></rs-unit-info-template>\n    </ng-container>\n  </div>\n</dx-data-grid>\n", styles: [":host{display:flex;flex-flow:column nowrap}:host dx-data-grid{flex:auto;height:0}\n"] }]
         }], ctorParameters: function () { return [{ type: DataGridFactory }]; }, propDecorators: { tenant: [{
                 type: Input
             }], className: [{
@@ -1749,7 +1749,7 @@ class DrawerComponent {
     }
 }
 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);box-shadow:0 10px 24px #252b3a3d;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: i5.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"] }] });
+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);box-shadow:0 10px 24px #252b3a3d;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);box-shadow:0 10px 24px #252b3a3d;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"] }]
@@ -1813,7 +1813,7 @@ 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", params: "params" }, ngImport: i0, template: "<div class=\"dx-field\">\n  <div class=\"dx-field-label\">\n    <span>{{label || '\u52A8\u6001\u53C2\u6570'}}</span>\n    <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-add\" (onClick)=\"add()\"></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=\"\u53C2\u6570\u540D\" [(value)]=\"param.name\"></dx-text-box>\n      <dx-text-box placeholder=\"\u53C2\u6570\u503C\" [(value)]=\"param.value\"></dx-text-box>\n      <dx-button type=\"danger\" stylingMode=\"text\" icon=\"coast-icon coast-icon-close\"\n                 (onClick)=\"delete(index)\"></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: "component", type: i5.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: i3.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"] }] });
+DynamicParamsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DynamicParamsComponent, selector: "rs-dynamic-params", inputs: { label: "label", params: "params" }, ngImport: i0, template: "<div class=\"dx-field\">\n  <div class=\"dx-field-label\">\n    <span>{{label || '\u52A8\u6001\u53C2\u6570'}}</span>\n    <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-add\" (onClick)=\"add()\"></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=\"\u53C2\u6570\u540D\" [(value)]=\"param.name\"></dx-text-box>\n      <dx-text-box placeholder=\"\u53C2\u6570\u503C\" [(value)]=\"param.value\"></dx-text-box>\n      <dx-button type=\"danger\" stylingMode=\"text\" icon=\"coast-icon coast-icon-close\"\n                 (onClick)=\"delete(index)\"></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: "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: i3$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"] }] });
 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\">\n  <div class=\"dx-field-label\">\n    <span>{{label || '\u52A8\u6001\u53C2\u6570'}}</span>\n    <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-add\" (onClick)=\"add()\"></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=\"\u53C2\u6570\u540D\" [(value)]=\"param.name\"></dx-text-box>\n      <dx-text-box placeholder=\"\u53C2\u6570\u503C\" [(value)]=\"param.value\"></dx-text-box>\n      <dx-button type=\"danger\" stylingMode=\"text\" icon=\"coast-icon coast-icon-close\"\n                 (onClick)=\"delete(index)\"></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"] }]
@@ -1899,6 +1899,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
             type: Injectable
         }], 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'
+    });
+}
+async function validate(validator) {
+    return new Promise(resolve => {
+        const validateResult = validator.instance.validate();
+        if (!validateResult.isValid) {
+            resolve(false);
+        }
+        if (validateResult.status === 'pending') {
+            validateResult.complete?.then((result) => {
+                if (result.isValid) {
+                    resolve(true);
+                }
+                else {
+                    resolve(false);
+                }
+            });
+        }
+        else {
+            resolve(true);
+        }
+    });
+}
+async function validate_group(validationGroup) {
+    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 => {
+        const validateResult = validationGroup.instance.validate();
+        if (!validateResult.isValid) {
+            const brokenElement = (validateResult.brokenRules?.[0]).validator.element();
+            findTargetNode(brokenElement).scrollIntoView();
+            resolve(false);
+        }
+        if (validateResult.status === 'pending') {
+            validateResult.complete?.then((result) => {
+                if (result.isValid) {
+                    resolve(true);
+                }
+                else {
+                    const brokenElement = (result.brokenRules?.[0]).validator.element();
+                    findTargetNode(brokenElement).scrollIntoView();
+                    resolve(false);
+                }
+            });
+        }
+        else {
+            resolve(true);
+        }
+    });
+}
+
 class FormComponent {
     constructor(service) {
         this.service = service;
@@ -1926,36 +2023,33 @@ class FormComponent {
             }
         });
     }
-    submitForm($event) {
-        if (!this.validate()) {
-            return;
-        }
-        this.service.createOrUpdate(this.tenant, this.className, {
-            oid: this.oid,
-            ...this.model
-        }).subscribe(response => {
-            this.submitCallback.emit(response);
+    submitForm() {
+        this.validate().then(isValid => {
+            if (isValid) {
+                this.service.createOrUpdate(this.tenant, this.className, {
+                    oid: this.oid,
+                    ...this.model
+                }).subscribe(response => {
+                    this.submitCallback.emit(response);
+                });
+            }
+            else {
+                this.submitCallback.emit({ success: false });
+            }
         });
     }
     validate() {
-        const result = this.validator.instance.validate();
-        if (!result.isValid) { // TODO 异步校验可能存在问题，需进一步确认
-            this.submitCallback.emit({ success: false });
-            // @ts-ignore
-            result.brokenRules[0].validator.element().scrollIntoView();
-            return false;
-        }
-        return true;
+        return validate_group(this.validator);
     }
     submit() {
         this.formSubmitter.instance.element().click();
     }
 }
 FormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormComponent, deps: [{ token: FormService }], 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", readonly: "readonly" }, outputs: { submitCallback: "submitCallback" }, providers: [FormService], viewQueries: [{ propertyName: "validator", first: true, predicate: DxValidationGroupComponent, descendants: true }, { propertyName: "formSubmitter", first: true, predicate: ["formSubmitter"], descendants: true }], ngImport: i0, template: "<dx-load-panel [position]=\"{my: 'center', at: 'center', of: form.parentElement?.parentElement || window}\"\n               [showPane]=\"false\"\n               [visible]=\"!model\"></dx-load-panel>\n<form #form>\n  <dx-validation-group *ngIf=\"model\">\n    <rs-box-container [config]=\"config\" [model]=\"model\" [readonly]=\"readonly\"></rs-box-container>\n    <dx-button #formSubmitter [visible]=\"false\" (onClick)=\"submitForm($event)\" [useSubmitBehavior]=\"true\"></dx-button>\n  </dx-validation-group>\n</form>\n", styles: [":host{padding:12px 24px 20px}:host form{display:flex;flex-flow:row nowrap}:host form dx-validation-group{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: BoxContainerComponent, selector: "rs-box-container", inputs: ["editMode", "config", "model", "readonly", "tabViewContainerRef"] }, { kind: "component", type: i5.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$1.DxLoadPanelComponent, selector: "dx-load-panel", inputs: ["animation", "closeOnOutsideClick", "container", "copyRootClassesToWrapper", "deferRendering", "delay", "elementAttr", "focusStateEnabled", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "indicatorSrc", "maxHeight", "maxWidth", "message", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showIndicator", "showPane", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "delayChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "indicatorSrcChange", "maxHeightChange", "maxWidthChange", "messageChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showIndicatorChange", "showPaneChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i7.DxValidationGroupComponent, selector: "dx-validation-group", inputs: ["elementAttr", "height", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "elementAttrChange", "heightChange", "widthChange"] }] });
+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", readonly: "readonly" }, outputs: { submitCallback: "submitCallback" }, providers: [FormService], viewQueries: [{ propertyName: "validator", first: true, predicate: DxValidationGroupComponent, descendants: true }, { propertyName: "formSubmitter", first: true, predicate: ["formSubmitter"], descendants: true }], ngImport: i0, template: "<dx-load-panel [position]=\"{my: 'center', at: 'center', of: form.parentElement?.parentElement || window}\"\n               [showPane]=\"false\"\n               [visible]=\"!model\"></dx-load-panel>\n<form #form>\n  <dx-validation-group *ngIf=\"model\">\n    <rs-box-container [config]=\"config\" [model]=\"model\" [readonly]=\"readonly\"></rs-box-container>\n    <dx-button #formSubmitter [visible]=\"false\" (onClick)=\"submitForm()\"></dx-button>\n  </dx-validation-group>\n</form>\n", styles: [":host{padding:12px 24px 20px}:host form{display:flex;flex-flow:row nowrap}:host form dx-validation-group{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: BoxContainerComponent, selector: "rs-box-container", inputs: ["editMode", "config", "model", "readonly", "tabViewContainerRef"] }, { 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-form', providers: [FormService], template: "<dx-load-panel [position]=\"{my: 'center', at: 'center', of: form.parentElement?.parentElement || window}\"\n               [showPane]=\"false\"\n               [visible]=\"!model\"></dx-load-panel>\n<form #form>\n  <dx-validation-group *ngIf=\"model\">\n    <rs-box-container [config]=\"config\" [model]=\"model\" [readonly]=\"readonly\"></rs-box-container>\n    <dx-button #formSubmitter [visible]=\"false\" (onClick)=\"submitForm($event)\" [useSubmitBehavior]=\"true\"></dx-button>\n  </dx-validation-group>\n</form>\n", styles: [":host{padding:12px 24px 20px}:host form{display:flex;flex-flow:row nowrap}:host form dx-validation-group{width:100%}\n"] }]
+            args: [{ selector: 'rs-form', providers: [FormService], template: "<dx-load-panel [position]=\"{my: 'center', at: 'center', of: form.parentElement?.parentElement || window}\"\n               [showPane]=\"false\"\n               [visible]=\"!model\"></dx-load-panel>\n<form #form>\n  <dx-validation-group *ngIf=\"model\">\n    <rs-box-container [config]=\"config\" [model]=\"model\" [readonly]=\"readonly\"></rs-box-container>\n    <dx-button #formSubmitter [visible]=\"false\" (onClick)=\"submitForm()\"></dx-button>\n  </dx-validation-group>\n</form>\n", styles: [":host{padding:12px 24px 20px}:host form{display:flex;flex-flow:row nowrap}:host form dx-validation-group{width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: FormService }]; }, propDecorators: { tenant: [{
                 type: Input
             }], className: [{
@@ -2038,7 +2132,7 @@ 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\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: i4.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i5.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\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" }]
@@ -2265,43 +2359,174 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-function notify_error(message) {
-    notify({
-        displayTime: 12000,
-        message,
-        type: 'error',
-        width: '300px'
-    }, {
-        direction: 'up-push',
-        position: 'bottom right'
-    });
+class WebsocketModule {
 }
-function notify_warning(message) {
-    notify({
-        displayTime: 8000,
-        message,
-        type: 'warning',
-        width: '300px'
-    }, {
-        direction: 'up-push',
-        position: 'bottom right'
-    });
+WebsocketModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WebsocketModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+WebsocketModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: WebsocketModule, imports: [CommonModule] });
+WebsocketModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WebsocketModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WebsocketModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule
+                    ]
+                }]
+        }] });
+
+class WebsocketService {
+    constructor() {
+        this.connectSuccess = false; // websocket 连接成功
+        this.period = 60 * 1000 * 10; // 10分钟检查一次
+        this.reconnectFlag = false; // 重连
+        this.reconnectPeriod = 5 * 1000; // 重连失败,则5秒钟重连一次
+        this.serverMessageSubject = new Subject(); // subject对象,用于发送服务器消息
+        // 实例化时开始连接服务器
+        this.connect();
+        // 进入程序就进行心跳检测,避免出现开始就连接中断,后续不重连
+        this.heartCheckStart();
+        // 将messageSubject存储到window对象上
+        window.serverMessageSubject = this.serverMessageSubject;
+    }
+    /**
+     * 创建新连接
+     */
+    connect() {
+        this.url = 'ws://' + window.location.host + '/ws?token=' + localStorage.getItem('token');
+        // 创建websocket对象
+        this.createWebSocket();
+    }
+    /**
+     * 创建连接
+     */
+    createWebSocket() {
+        // 如果没有建立过连接，才建立连接并且添加时间监听
+        this.webSocket = new WebSocket(this.url);
+        // 建立连接成功
+        this.webSocket.onopen = () => this.onOpen();
+        // 接收到消息
+        this.webSocket.onmessage = (e) => this.onMessage(e);
+        // 连接关闭
+        this.webSocket.onclose = (e) => this.onClose(e);
+        // 异常
+        this.webSocket.onerror = (e) => this.onError(e);
+    }
+    /**
+     * 连接打开
+     */
+    onOpen() {
+        console.log('websocket 已连接');
+        // 设置连接成功
+        this.connectSuccess = true;
+        // 如果是重连中
+        if (this.reconnectFlag) {
+            // 1.停止重连
+            this.stopReconnect();
+            // 2.重新开启心跳
+            this.heartCheckStart();
+        }
+    }
+    /**
+     * 接受到消息
+     */
+    onMessage(event) {
+        // 将接受到的消息发布出去
+        const message = JSON.parse(event.data);
+        if (message.type === 'websocket') {
+            sessionStorage.setItem('clientId', message.value);
+        }
+        else {
+            this.serverMessageSubject.next(message);
+        }
+    }
+    /**
+     * 连接关闭
+     */
+    onClose(e) {
+        console.log('websocket 连接关闭', e);
+        this.connectSuccess = false;
+        this.webSocket.close();
+        // 关闭时开始重连
+        this.reconnect();
+    }
+    /**
+     * 连接异常
+     */
+    onError(e) {
+        // 出现异常时一定会进onClose,所以只在onClose做一次重连动作
+        console.log('websocket 连接异常', e);
+        this.connectSuccess = false;
+    }
+    /**
+     * 开始重新连接
+     */
+    reconnect() {
+        // 如果已重连,则直接return,避免重复连接
+        if (this.connectSuccess) {
+            this.stopReconnect();
+            return;
+        }
+        // 如果正在连接中,则直接return,避免产生多个轮训事件
+        if (this.reconnectFlag) {
+            console.log('正在重连...');
+            return;
+        }
+        // 开始重连
+        this.reconnectFlag = true;
+        // 如果没能成功连接,则定时重连
+        this.reconnectSubscription = interval(this.reconnectPeriod).subscribe(async (val) => {
+            console.log(`重连：${val + 1}次`);
+            // 重新连接
+            this.connect();
+        });
+    }
+    /**
+     * 停止重连
+     */
+    stopReconnect() {
+        // 连接标识置为false
+        this.reconnectFlag = false;
+        // 取消订阅
+        if (typeof this.reconnectSubscription !== 'undefined' && this.reconnectSubscription != null) {
+            this.reconnectSubscription.unsubscribe();
+        }
+    }
+    /**
+     * 开始心跳检测
+     */
+    heartCheckStart() {
+        this.serverTimeoutSubscription = interval(this.period).subscribe(() => {
+            console.log('心跳检查');
+            // 保持连接状态,重置下
+            if (this.webSocket != null && this.webSocket.readyState === 1) {
+            }
+            else {
+                // 停止心跳
+                this.heartCheckStop();
+                // 开始重连
+                this.reconnect();
+            }
+        });
+    }
+    /**
+     * 停止心跳检测
+     */
+    heartCheckStop() {
+        // 取消订阅停止心跳
+        if (typeof this.serverTimeoutSubscription !== 'undefined' && this.serverTimeoutSubscription != null) {
+            this.serverTimeoutSubscription.unsubscribe();
+        }
+    }
 }
-function notify_success(message) {
-    notify({
-        displayTime: 4000,
-        message,
-        type: 'success',
-        width: '300px'
-    }, {
-        direction: 'down-push',
-        position: 'top right'
-    });
-}
+WebsocketService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WebsocketService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+WebsocketService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WebsocketService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WebsocketService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BoxContainerComponent, BoxContainerModule, DataGridComponent, DataGridFactory, DataGridModule, DataGridService, DrawerComponent, DrawerModule, DrawerService, DynamicParamsComponent, DynamicParamsModule, FormComponent, FormModule, FormService, IconSelectorComponent, IconSelectorModule, InstanceLinkTemplateDirective, ItemConfigComponent, ItemStyleComponent, MasterDetailTemplateDirective, ModalComponent, ModalModule, ModalService, PluginManager, RowButtonsTemplateDirective, notify_error, notify_success, notify_warning };
+export { BoxContainerComponent, BoxContainerModule, DataGridComponent, DataGridFactory, DataGridModule, DataGridService, DrawerComponent, DrawerModule, DrawerService, DynamicParamsComponent, DynamicParamsModule, FormComponent, FormModule, FormService, IconSelectorComponent, IconSelectorModule, InstanceLinkTemplateDirective, ItemConfigComponent, ItemStyleComponent, MasterDetailTemplateDirective, ModalComponent, ModalModule, ModalService, PluginManager, RowButtonsTemplateDirective, WebsocketModule, WebsocketService, notify_error, notify_success, notify_warning, validate, validate_group };
 //# sourceMappingURL=ngx-rs-ant.mjs.map