ngx-rs-ant 1.6.0 → 1.6.2

package/fesm2020/ngx-rs-ant.mjs

@@ -13,18 +13,19 @@ import { TextAreaEntry, isTextAreaEntryEdited, SelectEntry, isSelectEntryEdited
 import * as i6 from 'devextreme-angular/ui/load-panel';
 import * as i6$1 from 'devextreme-angular/ui/nested';
 import { DxoPositionModule } from 'devextreme-angular/ui/nested';
-import * as i4 from 'devextreme-angular/ui/button';
+import * as i3 from 'devextreme-angular/ui/button';
 import * as i1$1 from '@angular/common/http';
 import notify from 'devextreme/ui/notify';
 import CustomStore from 'devextreme/data/custom_store';
-import * as i3 from 'devextreme-angular/core';
+import * as i3$1 from 'devextreme-angular/core';
 import * as i5$1 from 'devextreme-angular/ui/data-grid';
 import * as i5 from 'devextreme-angular/ui/tooltip';
 import * as i2$2 from '@angular/platform-browser';
-import * as i3$1 from 'devextreme-angular/ui/accordion';
-import * as i7 from 'devextreme-angular/ui/validation-group';
-import * as i4$1 from 'devextreme-angular/ui/text-box';
-import * as i4$2 from 'devextreme-angular/ui/popover';
+import * as i3$2 from 'devextreme-angular/ui/accordion';
+import * as i7 from 'devextreme-angular/ui/text-box';
+import * as i8 from 'devextreme-angular/ui/validation-group';
+import * as i9 from 'devextreme-angular/ui/validator';
+import * as i4 from 'devextreme-angular/ui/popover';
 import * as i2$3 from 'ng2-pdfjs-viewer';
 import { PdfJsViewerComponent, PdfJsViewerModule } from 'ng2-pdfjs-viewer';
 
@@ -268,6 +269,7 @@ class PluginManager {
         const componentRef = viewContainerRef.createComponent(plugin.component);
         const instance = componentRef.instance;
         Object.assign(instance, config.pluginConfig);
+        instance.editMode = boxItem.boxContainer.editMode;
         if (plugin.type === 'form') {
             instance.model = boxItem.boxContainer.model;
         }
@@ -315,6 +317,7 @@ class PluginManager {
         return hoverComponentRef;
     }
     static createActiveComponent(boxItem, index, componentRef, style, config, showClose) {
+        const id = boxItem.boxContainer.id;
         const viewContainerRef = boxItem.itemHosts.get(index)?.viewContainerRef;
         const activeComponentRef = viewContainerRef.createComponent(PluginActiveComponent);
         activeComponentRef.instance.name = config.caption;
@@ -322,16 +325,24 @@ class PluginManager {
         activeComponentRef.instance.targetElement = componentRef.location.nativeElement;
         const activeElement = activeComponentRef.location.nativeElement;
         componentRef.location.nativeElement.appendChild(activeElement);
-        this.activeItems.push(componentRef.location.nativeElement);
+        if (this.activeItems[id]) {
+            this.activeItems[id].push(componentRef.location.nativeElement);
+        }
+        else {
+            this.activeItems[id] = [componentRef.location.nativeElement];
+        }
         componentRef.location.nativeElement.addEventListener('click', ($event) => {
             $event.stopPropagation();
-            for (let activeItem of this.activeItems) {
+            for (let activeItem of this.activeItems[id]) {
                 activeItem.classList.remove('plugin-active');
             }
-            if (this.activeItems.indexOf($event.target) < 0) {
+            if (this.activeItems[id].indexOf($event.target) < 0) {
                 return;
             }
-            this.activeItem.next({ boxItem, index, style, config: config.config, componentRef });
+            this.activeItem.next({
+                id,
+                item: { boxItem, index, style, config: config.config, componentRef }
+            });
             $event.target.classList.add('plugin-active');
         });
         activeComponentRef.instance.splitItem = (direction) => {
@@ -363,17 +374,21 @@ class PluginManager {
             }
         };
         activeComponentRef.instance.itemRemove.subscribe(() => {
-            this.activeItem.next('');
+            this.activeItem.next({
+                id,
+                item: ''
+            });
             viewContainerRef.clear();
             componentRef.instance.onRemove();
         });
         return activeComponentRef;
     }
     static resetItemConfig(itemConfigContainerRef, item, fieldTree) {
+        itemConfigContainerRef.clear();
         if (!item) {
+            itemConfigContainerRef.createComponent(ConfigBlankComponent);
             return;
         }
-        itemConfigContainerRef.clear();
         const plugin = PluginFactory.get(item.config?.name);
         const pluginType = plugin?.type;
         const pluginConfig = PluginFactory.getConfig(item.config?.name);
@@ -400,33 +415,42 @@ class PluginManager {
     }
     static resetItemStyle(itemStyleContainerRef, item) {
         itemStyleContainerRef.clear();
-        if (item) {
-            const componentRef = itemStyleContainerRef.createComponent(StyleComponent);
-            const instance = componentRef.instance;
-            instance.style = item.style;
-        }
-        else {
+        if (!item) {
             itemStyleContainerRef.createComponent(StyleBlankComponent);
+            return;
         }
+        const componentRef = itemStyleContainerRef.createComponent(StyleComponent);
+        const instance = componentRef.instance;
+        instance.style = item.style;
     }
 }
 PluginManager.hoverItems = [];
 PluginManager.activeItem = new Subject();
-PluginManager.activeItems = [];
+PluginManager.activeItems = {};
 
 class ItemConfigComponent {
+    constructor() {
+        this.id = 'global';
+    }
     ngOnInit() {
-        PluginManager.activeItem.subscribe(item => {
-            PluginManager.resetItemConfig(this.itemConfigContainerRef, item, this.fieldTree);
+        PluginManager.activeItem.subscribe(data => {
+            if (data.id !== this.id) {
+                return;
+            }
+            PluginManager.resetItemConfig(this.itemConfigContainerRef, data.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: [""] });
+ItemConfigComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ItemConfigComponent, selector: "rs-item-config", inputs: { id: "id", fieldTree: "fieldTree" }, viewQueries: [{ propertyName: "itemConfigContainerRef", first: true, predicate: ["itemConfigContainerRef"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #itemConfigContainerRef></ng-container>\n", styles: [""] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ItemConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rs-item-config', template: "<ng-container #itemConfigContainerRef></ng-container>\n" }]
-        }], propDecorators: { itemConfigContainerRef: [{
+        }], propDecorators: { id: [{
+                type: Input
+            }], fieldTree: [{
+                type: Input
+            }], itemConfigContainerRef: [{
                 type: ViewChild,
                 args: ['itemConfigContainerRef', {
                         static: true,
@@ -435,18 +459,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
             }] } });
 
 class ItemStyleComponent {
+    constructor() {
+        this.id = 'global';
+    }
     ngOnInit() {
-        PluginManager.activeItem.subscribe(item => {
-            PluginManager.resetItemStyle(this.itemStyleContainerRef, item);
+        PluginManager.activeItem.subscribe(data => {
+            if (data.id !== this.id) {
+                return;
+            }
+            PluginManager.resetItemStyle(this.itemStyleContainerRef, data.item);
         });
     }
 }
 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: [""] });
+ItemStyleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ItemStyleComponent, selector: "rs-item-style", inputs: { id: "id" }, viewQueries: [{ propertyName: "itemStyleContainerRef", first: true, predicate: ["itemStyleContainerRef"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #itemStyleContainerRef></ng-container>\n", styles: [""] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ItemStyleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rs-item-style', template: "<ng-container #itemStyleContainerRef></ng-container>\n" }]
-        }], propDecorators: { itemStyleContainerRef: [{
+        }], propDecorators: { id: [{
+                type: Input
+            }], itemStyleContainerRef: [{
                 type: ViewChild,
                 args: ['itemStyleContainerRef', { static: true, read: ViewContainerRef }]
             }] } });
@@ -737,6 +769,7 @@ class ChangeFilter {
 
 class BoxContainerComponent {
     constructor() {
+        this.id = 'global';
         this.editMode = false;
         this.config = {
             direction: 'row',
@@ -750,6 +783,16 @@ class BoxContainerComponent {
         this.changeFilter.anyNotFirst(['config', 'model', 'readonly'], () => {
             this.load();
         });
+        PluginManager.activeItem.subscribe(data => {
+            if (data.id !== this.id) {
+                return;
+            }
+            if (!data.item) {
+                for (let activeItem of PluginManager.activeItems[this.id]) {
+                    activeItem.classList.remove('plugin-active');
+                }
+            }
+        });
     }
     ngOnChanges(changes) {
         this.changeFilter.doFilter(changes);
@@ -778,11 +821,15 @@ class BoxContainerComponent {
     }
 }
 BoxContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BoxContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BoxContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: BoxContainerComponent, selector: "rs-box-container", inputs: { config: "config", model: "model", opener: "opener", params: "params", readonly: "readonly", tabViewContainerRef: "tabViewContainerRef" }, viewQueries: [{ propertyName: "boxContainerContent", first: true, predicate: ["boxContainerContent"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container #boxContainerContent></ng-container>\n", styles: [":host{flex:1;position:relative;display:flex;flex-flow:row nowrap}\n"] });
+BoxContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: BoxContainerComponent, selector: "rs-box-container", inputs: { id: "id", editMode: "editMode", config: "config", model: "model", opener: "opener", params: "params", readonly: "readonly", tabViewContainerRef: "tabViewContainerRef" }, viewQueries: [{ propertyName: "boxContainerContent", first: true, predicate: ["boxContainerContent"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container #boxContainerContent></ng-container>\n", styles: [":host{flex:1;position:relative;display:flex;flex-flow:row nowrap}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BoxContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rs-box-container', template: "<ng-container #boxContainerContent></ng-container>\n", styles: [":host{flex:1;position:relative;display:flex;flex-flow:row nowrap}\n"] }]
-        }], propDecorators: { config: [{
+        }], propDecorators: { id: [{
+                type: Input
+            }], editMode: [{
+                type: Input
+            }], config: [{
                 type: Input
             }], model: [{
                 type: Input
@@ -1771,10 +1818,10 @@ class CamundaBpmnEditorComponent {
     }
 }
 CamundaBpmnEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CamundaBpmnEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CamundaBpmnEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: CamundaBpmnEditorComponent, selector: "rs-camunda-bpmn-editor", inputs: { xml: "xml" }, viewQueries: [{ propertyName: "bpmnContainer", first: true, predicate: ["bpmnContainer"], descendants: true }, { propertyName: "bpmnConfig", first: true, predicate: ["bpmnConfig"], descendants: true }], ngImport: i0, template: "<div class=\"main\">\n  <div class=\"container\" #bpmnContainer></div>\n  <div class=\"config\" #bpmnConfig></div>\n  <div class=\"xml-viewer\" [ngStyle]=\"{display: isShowXml ? 'flex' : 'none'}\">\n    <rs-code-editor language=\"xml\" [code]=\"xml\" [readonly]=\"true\" [enableMinimap]=\"true\"></rs-code-editor>\n  </div>\n</div>\n<div class=\"footer\">\n  <dx-button [type]=\"isShowXml ? 'default' : 'normal'\" text=\"XML\" [hoverStateEnabled]=\"false\"\n             (onClick)=\"showXml()\"></dx-button>\n</div>\n", styles: [":host{flex:1;display:flex;flex-flow:column nowrap}:host .main{flex:1;display:flex;flex-flow:row nowrap;position:relative}:host .main .container{flex:1}:host .main .config{flex:0 0 360px;border:1px solid var(--coast-border-color, #dddddd)}:host .main .xml-viewer{position:absolute;width:100%;height:100%;display:flex;flex-flow:column nowrap;z-index:var(--coast-z-index-drawer, 1040)}:host .main .xml-viewer rs-code-editor{flex:1}:host .footer{flex:0 0 24px;border:1px solid var(--coast-border-color, #dddddd)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CodeEditorComponent, selector: "rs-code-editor", inputs: ["code", "language", "readonly", "enableMinimap", "consoleMessage"], outputs: ["codeChange", "onContentReady"] }, { kind: "component", type: i4.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }] });
+CamundaBpmnEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: CamundaBpmnEditorComponent, selector: "rs-camunda-bpmn-editor", inputs: { xml: "xml" }, viewQueries: [{ propertyName: "bpmnContainer", first: true, predicate: ["bpmnContainer"], descendants: true }, { propertyName: "bpmnConfig", first: true, predicate: ["bpmnConfig"], descendants: true }], ngImport: i0, template: "<div class=\"main\">\n  <div class=\"container\" #bpmnContainer></div>\n  <div class=\"config\" #bpmnConfig></div>\n  <div class=\"xml-viewer\" [ngStyle]=\"{display: isShowXml ? 'flex' : 'none'}\">\n    <rs-code-editor language=\"xml\" [code]=\"xml\" [readonly]=\"true\" [enableMinimap]=\"true\"></rs-code-editor>\n  </div>\n</div>\n<div class=\"footer\">\n  <dx-button [type]=\"isShowXml ? 'default' : 'normal'\" text=\"XML\" [hoverStateEnabled]=\"false\"\n             (onClick)=\"showXml()\"></dx-button>\n</div>\n", styles: [":host{flex:1;display:flex;flex-flow:column nowrap}:host .main{flex:1;display:flex;flex-flow:row nowrap;position:relative}:host .main .container{flex:1}:host .main .config{flex:0 0 360px;border:1px solid var(--coast-border-color, #dddddd)}:host .main .xml-viewer{position:absolute;width:100%;height:100%;display:flex;flex-flow:column nowrap;z-index:var(--coast-z-index-drawer, 2000)}:host .main .xml-viewer rs-code-editor{flex:1}:host .footer{flex:0 0 24px;border:1px solid var(--coast-border-color, #dddddd)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CodeEditorComponent, selector: "rs-code-editor", inputs: ["code", "language", "readonly", "enableMinimap", "consoleMessage"], outputs: ["codeChange", "onContentReady"] }, { kind: "component", type: i3.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CamundaBpmnEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-camunda-bpmn-editor', template: "<div class=\"main\">\n  <div class=\"container\" #bpmnContainer></div>\n  <div class=\"config\" #bpmnConfig></div>\n  <div class=\"xml-viewer\" [ngStyle]=\"{display: isShowXml ? 'flex' : 'none'}\">\n    <rs-code-editor language=\"xml\" [code]=\"xml\" [readonly]=\"true\" [enableMinimap]=\"true\"></rs-code-editor>\n  </div>\n</div>\n<div class=\"footer\">\n  <dx-button [type]=\"isShowXml ? 'default' : 'normal'\" text=\"XML\" [hoverStateEnabled]=\"false\"\n             (onClick)=\"showXml()\"></dx-button>\n</div>\n", styles: [":host{flex:1;display:flex;flex-flow:column nowrap}:host .main{flex:1;display:flex;flex-flow:row nowrap;position:relative}:host .main .container{flex:1}:host .main .config{flex:0 0 360px;border:1px solid var(--coast-border-color, #dddddd)}:host .main .xml-viewer{position:absolute;width:100%;height:100%;display:flex;flex-flow:column nowrap;z-index:var(--coast-z-index-drawer, 1040)}:host .main .xml-viewer rs-code-editor{flex:1}:host .footer{flex:0 0 24px;border:1px solid var(--coast-border-color, #dddddd)}\n"] }]
+            args: [{ selector: 'rs-camunda-bpmn-editor', template: "<div class=\"main\">\n  <div class=\"container\" #bpmnContainer></div>\n  <div class=\"config\" #bpmnConfig></div>\n  <div class=\"xml-viewer\" [ngStyle]=\"{display: isShowXml ? 'flex' : 'none'}\">\n    <rs-code-editor language=\"xml\" [code]=\"xml\" [readonly]=\"true\" [enableMinimap]=\"true\"></rs-code-editor>\n  </div>\n</div>\n<div class=\"footer\">\n  <dx-button [type]=\"isShowXml ? 'default' : 'normal'\" text=\"XML\" [hoverStateEnabled]=\"false\"\n             (onClick)=\"showXml()\"></dx-button>\n</div>\n", styles: [":host{flex:1;display:flex;flex-flow:column nowrap}:host .main{flex:1;display:flex;flex-flow:row nowrap;position:relative}:host .main .container{flex:1}:host .main .config{flex:0 0 360px;border:1px solid var(--coast-border-color, #dddddd)}:host .main .xml-viewer{position:absolute;width:100%;height:100%;display:flex;flex-flow:column nowrap;z-index:var(--coast-z-index-drawer, 2000)}:host .main .xml-viewer rs-code-editor{flex:1}:host .footer{flex:0 0 24px;border:1px solid var(--coast-border-color, #dddddd)}\n"] }]
         }], propDecorators: { xml: [{
                 type: Input
             }], bpmnContainer: [{
@@ -2688,7 +2735,7 @@ class FileCellTemplateComponent {
     }
 }
 FileCellTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FileCellTemplateComponent, deps: [{ token: DataGridService }, { token: i2$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-FileCellTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: FileCellTemplateComponent, selector: "rs-file-cell-template", inputs: { file: "file" }, ngImport: i0, template: "<dx-button #fileBtn type=\"default\" stylingMode=\"text\" (onClick)=\"$event.event?.stopPropagation()\">\r\n  <i class=\"coast-icon-file-{{icon}}\" style=\"padding-right: 4px;\"></i>\r\n  {{ filename }}\r\n  <dx-tooltip #tooltip\r\n              [target]=\"fileBtn.instance.element()\"\r\n              [position]=\"'top'\"\r\n              [visible]=\"false\"\r\n              [showEvent]=\"'click'\">\r\n    <div *dxTemplate=\"let data of 'content'\">\r\n      <div [innerHTML]=\"content\"></div>\r\n      <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-file\" text=\"\u9884\u89C8\"\r\n                 (onClick)=\"preview(tooltip)\" [disabled]=\"!supportPreview || loading\"></dx-button>\r\n      <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-download\" text=\"\u4E0B\u8F7D\"\r\n                 (onClick)=\"download()\" [disabled]=\"loading\"></dx-button>\r\n    </div>\r\n  </dx-tooltip>\r\n</dx-button><br/>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i4.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i5.DxTooltipComponent, selector: "dx-tooltip", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showEvent", "target", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showEventChange", "targetChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
+FileCellTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: FileCellTemplateComponent, selector: "rs-file-cell-template", inputs: { file: "file" }, ngImport: i0, template: "<dx-button #fileBtn type=\"default\" stylingMode=\"text\" (onClick)=\"$event.event?.stopPropagation()\">\r\n  <i class=\"coast-icon-file-{{icon}}\" style=\"padding-right: 4px;\"></i>\r\n  {{ filename }}\r\n  <dx-tooltip #tooltip\r\n              [target]=\"fileBtn.instance.element()\"\r\n              [position]=\"'top'\"\r\n              [visible]=\"false\"\r\n              [showEvent]=\"'click'\">\r\n    <div *dxTemplate=\"let data of 'content'\">\r\n      <div [innerHTML]=\"content\"></div>\r\n      <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-file\" text=\"\u9884\u89C8\"\r\n                 (onClick)=\"preview(tooltip)\" [disabled]=\"!supportPreview || loading\"></dx-button>\r\n      <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-download\" text=\"\u4E0B\u8F7D\"\r\n                 (onClick)=\"download()\" [disabled]=\"loading\"></dx-button>\r\n    </div>\r\n  </dx-tooltip>\r\n</dx-button><br/>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3$1.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i3.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { 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)=\"$event.event?.stopPropagation()\">\r\n  <i class=\"coast-icon-file-{{icon}}\" style=\"padding-right: 4px;\"></i>\r\n  {{ filename }}\r\n  <dx-tooltip #tooltip\r\n              [target]=\"fileBtn.instance.element()\"\r\n              [position]=\"'top'\"\r\n              [visible]=\"false\"\r\n              [showEvent]=\"'click'\">\r\n    <div *dxTemplate=\"let data of 'content'\">\r\n      <div [innerHTML]=\"content\"></div>\r\n      <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-file\" text=\"\u9884\u89C8\"\r\n                 (onClick)=\"preview(tooltip)\" [disabled]=\"!supportPreview || loading\"></dx-button>\r\n      <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-download\" text=\"\u4E0B\u8F7D\"\r\n                 (onClick)=\"download()\" [disabled]=\"loading\"></dx-button>\r\n    </div>\r\n  </dx-tooltip>\r\n</dx-button><br/>\r\n" }]
@@ -2749,6 +2796,23 @@ class FormService {
             }
         });
     }
+    extraValidate(model, params, extraValidator) {
+        return this.http.post('api/validate/form', model, {
+            params: {
+                validator: extraValidator,
+                ...params
+            }
+        }).pipe(map(response => {
+            if (response.success) {
+                return response.data;
+            }
+            else {
+                return {
+                    isValid: false
+                };
+            }
+        }));
+    }
     createOrUpdate(tenant, className, model) {
         let api = 'api/data/' + className;
         if (model.oid) {
@@ -2779,6 +2843,7 @@ class FormComponent {
         this.submitCallback = new EventEmitter();
         this.loading = false;
         this.changeFilter = new ChangeFilter();
+        this.extraValidate = this.extraValidate.bind(this);
     }
     ngOnInit() {
         this.load();
@@ -2805,6 +2870,7 @@ class FormComponent {
         });
         this.service.getFormTemplateConfig(this.tenant, this.className, this.template).subscribe(response => {
             this.config = response.data.template;
+            this.extraValidator = this.config.extraValidator;
             if (this.onlyFrontEnd) {
                 this.loading = false;
             }
@@ -2831,6 +2897,14 @@ class FormComponent {
             }
         });
     }
+    extraValidate() {
+        return lastValueFrom(this.service.extraValidate(this.model, this.params, this.extraValidator).pipe(map(response => {
+            if (!response.isValid) {
+                this.extraValidateMessage = response.message;
+                return response;
+            }
+        })));
+    }
     submitForm() {
         this.validate().then(isValid => {
             if (isValid) {
@@ -2866,10 +2940,10 @@ class FormComponent {
     }
 }
 FormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormComponent, deps: [{ token: i0.ViewContainerRef }, { token: FormService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-FormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: FormComponent, selector: "rs-form", inputs: { tenant: "tenant", className: "className", oid: "oid", copyOid: "copyOid", template: "template", extraAttrMap: "extraAttrMap", opener: "opener", params: "params", tabViewContainerRef: "tabViewContainerRef", onlyFrontEnd: "onlyFrontEnd", model: "model", readonly: "readonly" }, outputs: { onDataLoaded: "onDataLoaded", submitCallback: "submitCallback" }, providers: [FormService], viewQueries: [{ propertyName: "validator", first: true, predicate: DxValidationGroupComponent, descendants: true }, { propertyName: "formSubmitter", first: true, predicate: ["formSubmitter"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<dx-load-panel [container]=\"viewContainerRef.element.nativeElement\" [showPane]=\"false\"\r\n               [visible]=\"loading\">\r\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\r\n</dx-load-panel>\r\n<dx-validation-group *ngIf=\"!loading\">\r\n  <rs-box-container [config]=\"config\"\r\n                    [model]=\"model\"\r\n                    [opener]=\"this\"\r\n                    [params]=\"params\"\r\n                    [tabViewContainerRef]=\"tabViewContainerRef\"\r\n                    [readonly]=\"readonly\"></rs-box-container>\r\n  <dx-button #formSubmitter [visible]=\"false\" (onClick)=\"submitForm()\"></dx-button>\r\n</dx-validation-group>\r\n", styles: [":host{padding:12px 24px 20px}:host dx-validation-group{display:flex;flex-flow:row nowrap}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BoxContainerComponent, selector: "rs-box-container", inputs: ["config", "model", "opener", "params", "readonly", "tabViewContainerRef"] }, { kind: "component", type: i6$1.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }, { kind: "component", type: i4.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i6.DxLoadPanelComponent, selector: "dx-load-panel", inputs: ["animation", "closeOnOutsideClick", "container", "copyRootClassesToWrapper", "deferRendering", "delay", "elementAttr", "focusStateEnabled", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "indicatorSrc", "maxHeight", "maxWidth", "message", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showIndicator", "showPane", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "delayChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "indicatorSrcChange", "maxHeightChange", "maxWidthChange", "messageChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showIndicatorChange", "showPaneChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i7.DxValidationGroupComponent, selector: "dx-validation-group", inputs: ["elementAttr", "height", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "elementAttrChange", "heightChange", "widthChange"] }] });
+FormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: FormComponent, selector: "rs-form", inputs: { tenant: "tenant", className: "className", oid: "oid", copyOid: "copyOid", template: "template", extraAttrMap: "extraAttrMap", opener: "opener", params: "params", tabViewContainerRef: "tabViewContainerRef", onlyFrontEnd: "onlyFrontEnd", model: "model", readonly: "readonly" }, outputs: { onDataLoaded: "onDataLoaded", submitCallback: "submitCallback" }, providers: [FormService], viewQueries: [{ propertyName: "validator", first: true, predicate: DxValidationGroupComponent, descendants: true }, { propertyName: "formSubmitter", first: true, predicate: ["formSubmitter"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<dx-load-panel [container]=\"viewContainerRef.element.nativeElement\" [showPane]=\"false\"\r\n               [visible]=\"loading\">\r\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\r\n</dx-load-panel>\r\n<dx-validation-group *ngIf=\"!loading\">\r\n  <rs-box-container [config]=\"config\"\r\n                    [model]=\"model\"\r\n                    [opener]=\"this\"\r\n                    [params]=\"params\"\r\n                    [tabViewContainerRef]=\"tabViewContainerRef\"\r\n                    [readonly]=\"readonly\"></rs-box-container>\r\n  <dx-text-box height=\"0\" style=\"border: none;\">\r\n    <dx-validator>\r\n      <dxi-validation-rule *ngIf=\"extraValidator\" type=\"async\"\r\n                           [validationCallback]=\"extraValidate\"></dxi-validation-rule>\r\n    </dx-validator>\r\n  </dx-text-box>\r\n  <div *ngIf=\"extraValidateMessage\" class=\"dx-field\">\r\n    <div class=\"dx-field-value\">\r\n      <div class=\"dx-toast-error dx-toast-content\">\r\n        <div class=\"dx-toast-message\">{{ extraValidateMessage }}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <dx-button #formSubmitter [visible]=\"false\" (onClick)=\"submitForm()\"></dx-button>\r\n</dx-validation-group>\r\n", styles: [":host{padding:12px 24px 20px}:host dx-validation-group{display:flex;flex-flow:column nowrap}:host dx-validation-group .dx-field{top:16px}:host dx-validation-group .dx-field .dx-field-value .dx-toast-content{padding:4px 8px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BoxContainerComponent, selector: "rs-box-container", inputs: ["id", "editMode", "config", "model", "opener", "params", "readonly", "tabViewContainerRef"] }, { kind: "component", type: i6$1.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }, { kind: "component", type: i3.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i6$1.DxiValidationRuleComponent, selector: "dxi-validation-rule", inputs: ["message", "trim", "type", "ignoreEmptyValue", "max", "min", "reevaluate", "validationCallback", "comparisonTarget", "comparisonType", "pattern"] }, { 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.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i8.DxValidationGroupComponent, selector: "dx-validation-group", inputs: ["elementAttr", "height", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "elementAttrChange", "heightChange", "widthChange"] }, { kind: "component", type: i9.DxValidatorComponent, selector: "dx-validator", inputs: ["adapter", "elementAttr", "height", "name", "validationGroup", "validationRules", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValidated", "adapterChange", "elementAttrChange", "heightChange", "nameChange", "validationGroupChange", "validationRulesChange", "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 [container]=\"viewContainerRef.element.nativeElement\" [showPane]=\"false\"\r\n               [visible]=\"loading\">\r\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\r\n</dx-load-panel>\r\n<dx-validation-group *ngIf=\"!loading\">\r\n  <rs-box-container [config]=\"config\"\r\n                    [model]=\"model\"\r\n                    [opener]=\"this\"\r\n                    [params]=\"params\"\r\n                    [tabViewContainerRef]=\"tabViewContainerRef\"\r\n                    [readonly]=\"readonly\"></rs-box-container>\r\n  <dx-button #formSubmitter [visible]=\"false\" (onClick)=\"submitForm()\"></dx-button>\r\n</dx-validation-group>\r\n", styles: [":host{padding:12px 24px 20px}:host dx-validation-group{display:flex;flex-flow:row nowrap}\n"] }]
+            args: [{ selector: 'rs-form', providers: [FormService], template: "<dx-load-panel [container]=\"viewContainerRef.element.nativeElement\" [showPane]=\"false\"\r\n               [visible]=\"loading\">\r\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\r\n</dx-load-panel>\r\n<dx-validation-group *ngIf=\"!loading\">\r\n  <rs-box-container [config]=\"config\"\r\n                    [model]=\"model\"\r\n                    [opener]=\"this\"\r\n                    [params]=\"params\"\r\n                    [tabViewContainerRef]=\"tabViewContainerRef\"\r\n                    [readonly]=\"readonly\"></rs-box-container>\r\n  <dx-text-box height=\"0\" style=\"border: none;\">\r\n    <dx-validator>\r\n      <dxi-validation-rule *ngIf=\"extraValidator\" type=\"async\"\r\n                           [validationCallback]=\"extraValidate\"></dxi-validation-rule>\r\n    </dx-validator>\r\n  </dx-text-box>\r\n  <div *ngIf=\"extraValidateMessage\" class=\"dx-field\">\r\n    <div class=\"dx-field-value\">\r\n      <div class=\"dx-toast-error dx-toast-content\">\r\n        <div class=\"dx-toast-message\">{{ extraValidateMessage }}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <dx-button #formSubmitter [visible]=\"false\" (onClick)=\"submitForm()\"></dx-button>\r\n</dx-validation-group>\r\n", styles: [":host{padding:12px 24px 20px}:host dx-validation-group{display:flex;flex-flow:column nowrap}:host dx-validation-group .dx-field{top:16px}:host dx-validation-group .dx-field .dx-field-value .dx-toast-content{padding:4px 8px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: FormService }, { type: i0.ElementRef }]; }, propDecorators: { tenant: [{
                 type: Input
             }], className: [{
@@ -2926,7 +3000,7 @@ class DataDetailComponent {
     }
 }
 DataDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DataDetailComponent, deps: [{ token: i0.ViewContainerRef }, { token: DataDetailService }], target: i0.ɵɵFactoryTarget.Component });
-DataDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DataDetailComponent, selector: "coast-data-detail", providers: [DataDetailService], ngImport: i0, template: "<dx-load-panel [container]=\"viewContainerRef.element.nativeElement\" [showPane]=\"false\"\n               [visible]=\"loading\">\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\n</dx-load-panel>\n<div *ngIf=\"!loading && sections.length === 0\" class=\"empty\">\n  <span>\u60A8\u65E0\u6743\u67E5\u770B\u8BE5\u6570\u636E\u5B9E\u4F8B\u4EFB\u4F55\u4FE1\u606F</span>\n</div>\n<ng-container *ngIf=\"sections.length > 0\">\n  <dx-accordion [collapsible]=\"true\" [multiple]=\"true\" [deferRendering]=\"false\" [dataSource]=\"sections\"\n                [selectedItems]=\"sections\" [focusStateEnabled]=\"false\">\n    <div *dxTemplate=\"let section of 'title'\" class=\"section-title\">\n      <div class=\"section-title-name\">{{ section.name }}</div>\n    </div>\n    <div *dxTemplate=\"let section of 'item'\">\n      <rs-form [tenant]=\"tenant\" [className]=\"className\" [oid]=\"oid\" [template]=\"section.formTemplate\" [params]=\"params\"\n               [tabViewContainerRef]=\"tabViewContainerRef\" [readonly]=\"true\"></rs-form>\n    </div>\n  </dx-accordion>\n</ng-container>\n", styles: [":host{flex:1;padding:24px;display:flex;flex-flow:column nowrap}:host div.empty{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div.empty span{text-align:center;-webkit-user-select:none;user-select:none}:host .section-title{border-bottom:1px solid var(--coast-border-color, #dddddd)}:host .section-title .section-title-name{height:24px;font-size:14px;font-weight:700;padding:4px 8px;display:flex;flex-flow:column nowrap;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.DxAccordionComponent, selector: "dx-accordion", inputs: ["accessKey", "activeStateEnabled", "animationDuration", "collapsible", "dataSource", "deferRendering", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "itemHoldTimeout", "items", "itemTemplate", "itemTitleTemplate", "keyExpr", "multiple", "noDataText", "repaintChangesOnly", "rtlEnabled", "selectedIndex", "selectedItem", "selectedItemKeys", "selectedItems", "tabIndex", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onItemClick", "onItemContextMenu", "onItemHold", "onItemRendered", "onItemTitleClick", "onOptionChanged", "onSelectionChanged", "accessKeyChange", "activeStateEnabledChange", "animationDurationChange", "collapsibleChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "itemHoldTimeoutChange", "itemsChange", "itemTemplateChange", "itemTitleTemplateChange", "keyExprChange", "multipleChange", "noDataTextChange", "repaintChangesOnlyChange", "rtlEnabledChange", "selectedIndexChange", "selectedItemChange", "selectedItemKeysChange", "selectedItemsChange", "tabIndexChange", "visibleChange", "widthChange"] }, { kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i6$1.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }, { kind: "component", type: i6.DxLoadPanelComponent, selector: "dx-load-panel", inputs: ["animation", "closeOnOutsideClick", "container", "copyRootClassesToWrapper", "deferRendering", "delay", "elementAttr", "focusStateEnabled", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "indicatorSrc", "maxHeight", "maxWidth", "message", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showIndicator", "showPane", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "delayChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "indicatorSrcChange", "maxHeightChange", "maxWidthChange", "messageChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showIndicatorChange", "showPaneChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: FormComponent, selector: "rs-form", inputs: ["tenant", "className", "oid", "copyOid", "template", "extraAttrMap", "opener", "params", "tabViewContainerRef", "onlyFrontEnd", "model", "readonly"], outputs: ["onDataLoaded", "submitCallback"] }] });
+DataDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DataDetailComponent, selector: "coast-data-detail", providers: [DataDetailService], ngImport: i0, template: "<dx-load-panel [container]=\"viewContainerRef.element.nativeElement\" [showPane]=\"false\"\n               [visible]=\"loading\">\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\n</dx-load-panel>\n<div *ngIf=\"!loading && sections.length === 0\" class=\"empty\">\n  <span>\u60A8\u65E0\u6743\u67E5\u770B\u8BE5\u6570\u636E\u5B9E\u4F8B\u4EFB\u4F55\u4FE1\u606F</span>\n</div>\n<ng-container *ngIf=\"sections.length > 0\">\n  <dx-accordion [collapsible]=\"true\" [multiple]=\"true\" [deferRendering]=\"false\" [dataSource]=\"sections\"\n                [selectedItems]=\"sections\" [focusStateEnabled]=\"false\">\n    <div *dxTemplate=\"let section of 'title'\" class=\"section-title\">\n      <div class=\"section-title-name\">{{ section.name }}</div>\n    </div>\n    <div *dxTemplate=\"let section of 'item'\">\n      <rs-form [tenant]=\"tenant\" [className]=\"className\" [oid]=\"oid\" [template]=\"section.formTemplate\" [params]=\"params\"\n               [tabViewContainerRef]=\"tabViewContainerRef\" [readonly]=\"true\"></rs-form>\n    </div>\n  </dx-accordion>\n</ng-container>\n", styles: [":host{flex:1;padding:24px;display:flex;flex-flow:column nowrap}:host div.empty{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div.empty span{text-align:center;-webkit-user-select:none;user-select:none}:host .section-title{border-bottom:1px solid var(--coast-border-color, #dddddd)}:host .section-title .section-title-name{height:24px;font-size:14px;font-weight:700;padding:4px 8px;display:flex;flex-flow:column nowrap;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.DxAccordionComponent, selector: "dx-accordion", inputs: ["accessKey", "activeStateEnabled", "animationDuration", "collapsible", "dataSource", "deferRendering", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "itemHoldTimeout", "items", "itemTemplate", "itemTitleTemplate", "keyExpr", "multiple", "noDataText", "repaintChangesOnly", "rtlEnabled", "selectedIndex", "selectedItem", "selectedItemKeys", "selectedItems", "tabIndex", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onItemClick", "onItemContextMenu", "onItemHold", "onItemRendered", "onItemTitleClick", "onOptionChanged", "onSelectionChanged", "accessKeyChange", "activeStateEnabledChange", "animationDurationChange", "collapsibleChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "itemHoldTimeoutChange", "itemsChange", "itemTemplateChange", "itemTitleTemplateChange", "keyExprChange", "multipleChange", "noDataTextChange", "repaintChangesOnlyChange", "rtlEnabledChange", "selectedIndexChange", "selectedItemChange", "selectedItemKeysChange", "selectedItemsChange", "tabIndexChange", "visibleChange", "widthChange"] }, { kind: "directive", type: i3$1.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i6$1.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }, { kind: "component", type: i6.DxLoadPanelComponent, selector: "dx-load-panel", inputs: ["animation", "closeOnOutsideClick", "container", "copyRootClassesToWrapper", "deferRendering", "delay", "elementAttr", "focusStateEnabled", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "indicatorSrc", "maxHeight", "maxWidth", "message", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showIndicator", "showPane", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "delayChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "indicatorSrcChange", "maxHeightChange", "maxWidthChange", "messageChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showIndicatorChange", "showPaneChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: FormComponent, selector: "rs-form", inputs: ["tenant", "className", "oid", "copyOid", "template", "extraAttrMap", "opener", "params", "tabViewContainerRef", "onlyFrontEnd", "model", "readonly"], outputs: ["onDataLoaded", "submitCallback"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DataDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'coast-data-detail', providers: [DataDetailService], template: "<dx-load-panel [container]=\"viewContainerRef.element.nativeElement\" [showPane]=\"false\"\n               [visible]=\"loading\">\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\n</dx-load-panel>\n<div *ngIf=\"!loading && sections.length === 0\" class=\"empty\">\n  <span>\u60A8\u65E0\u6743\u67E5\u770B\u8BE5\u6570\u636E\u5B9E\u4F8B\u4EFB\u4F55\u4FE1\u606F</span>\n</div>\n<ng-container *ngIf=\"sections.length > 0\">\n  <dx-accordion [collapsible]=\"true\" [multiple]=\"true\" [deferRendering]=\"false\" [dataSource]=\"sections\"\n                [selectedItems]=\"sections\" [focusStateEnabled]=\"false\">\n    <div *dxTemplate=\"let section of 'title'\" class=\"section-title\">\n      <div class=\"section-title-name\">{{ section.name }}</div>\n    </div>\n    <div *dxTemplate=\"let section of 'item'\">\n      <rs-form [tenant]=\"tenant\" [className]=\"className\" [oid]=\"oid\" [template]=\"section.formTemplate\" [params]=\"params\"\n               [tabViewContainerRef]=\"tabViewContainerRef\" [readonly]=\"true\"></rs-form>\n    </div>\n  </dx-accordion>\n</ng-container>\n", styles: [":host{flex:1;padding:24px;display:flex;flex-flow:column nowrap}:host div.empty{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div.empty span{text-align:center;-webkit-user-select:none;user-select:none}:host .section-title{border-bottom:1px solid var(--coast-border-color, #dddddd)}:host .section-title .section-title-name{height:24px;font-size:14px;font-weight:700;padding:4px 8px;display:flex;flex-flow:column nowrap;justify-content:center}\n"] }]
@@ -2939,51 +3013,55 @@ class DrawerComponent {
         this._width = '480px';
     }
     ngOnInit() {
-        if (this.size === 'large') {
+        if (this.size === 'default') {
+            this._width = '480px';
+        }
+        else if (this.size === 'large') {
             this._width = '960px';
         }
+        else {
+            this._width = this.size;
+        }
     }
     show() {
-        // 若存在多层抽屉，仅保留最上层遮罩颜色，下层遮罩设置为透明
+        // 若存在多层抽屉，仅保留最上层
         const nodeName = this.elementRef.nativeElement.nodeName;
         const drawers = this._parentViewContainerRef.element.nativeElement.parentElement.querySelectorAll(nodeName);
-        for (let i = 0; i < drawers.length; i++) {
-            if (i === drawers.length - 1) {
-                drawers[i].querySelector('.drawer-backdrop').style.backgroundColor = 'rgba(37, 43, 58, 0.05)';
-            }
-            else {
-                drawers[i].querySelector('.drawer-backdrop').style.backgroundColor = 'rgba(37, 43, 58, 0)';
-            }
+        for (let i = 0; i < drawers.length - 1; i++) {
+            drawers[i].querySelector('.drawer-close .coast-icon-arrow-right-filling').click();
         }
     }
-    hide($event, backdrop) {
+    hide($event) {
         // 在service中重写
     }
-    ngOnDestroy() {
-        // 若存在多层抽屉，下一层遮罩设置为不透明
-        const nodeName = this.elementRef.nativeElement.nodeName;
-        const nextDrawer = this._parentViewContainerRef.element.nativeElement.parentElement.querySelector(nodeName + ':nth-last-child(2)');
-        if (nextDrawer) {
-            nextDrawer.querySelector('.drawer-backdrop').style.backgroundColor = 'rgba(37, 43, 58, 0.05)';
-        }
+    stopPropagation($event) {
+        $event.stopPropagation();
+    }
+    autoHide($event) {
+        this.hide();
     }
 }
 DrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DrawerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-DrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DrawerComponent, selector: "rs-drawer", ngImport: i0, template: "<div #drawerBackdrop class=\"drawer-backdrop\" (click)=\"hide($event, drawerBackdrop)\">\n  <div class=\"drawer\" [ngStyle]=\"{width: _width}\">\n    <div *ngIf=\"headerTemplate\" class=\"drawer-header\">\n      <ng-template [ngTemplateOutlet]=\"headerTemplate\"\n                   [ngTemplateOutletContext]=\"{$implicit: headerTemplateContext}\"></ng-template>\n    </div>\n    <div class=\"drawer-content\">\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\n    </div>\n    <div class=\"drawer-close\">\n      <dx-button height=\"40px\" icon=\"coast-icon coast-icon-arrow-right-filling\" (onClick)=\"hide($event)\"></dx-button>\n    </div>\n  </div>\n</div>\n", styles: [":host .drawer-backdrop{position:absolute;inset:0;z-index:calc(var(--coast-z-index-drawer, 1040) - 1)}:host .drawer-backdrop .drawer{position:absolute;right:0;height:100%;z-index:var(--coast-z-index-drawer, 1040);background-color:var(--coast-base-bg-color, #fff);display:flex;flex-flow:column nowrap}:host .drawer-backdrop .drawer .drawer-header{flex:0 0 36px;padding:8px;border-bottom:1px solid var(--coast-border-color, #dddddd);display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-end}:host .drawer-backdrop .drawer .drawer-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .drawer-backdrop .drawer .drawer-close{position:absolute;height:100%;width:20px;top:0;left:-20px;display:flex;flex-flow:row nowrap;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }] });
+DrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DrawerComponent, selector: "rs-drawer", host: { listeners: { "click": "stopPropagation($event)", "window:click": "autoHide($event)" } }, ngImport: i0, template: "<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=\"80px\" icon=\"coast-icon coast-icon-arrow-right-filling\" (onClick)=\"hide($event)\"></dx-button>\n  </div>\n</div>\n", styles: [":host .drawer{position:absolute;top:0;right:0;bottom:0;height:100%;z-index:var(--coast-z-index-drawer, 2000);background-color:var(--coast-base-bg-color, #fff);border-left:1px solid var(--coast-border-color, #dddddd);box-shadow:-8px 0 4px -4px #252b3a3d;display:flex;flex-flow:column nowrap}:host .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 .drawer-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .drawer .drawer-close{position:absolute;height:100%;width:20px;top:0;left:-20px;display:flex;flex-flow:row nowrap;align-items:center}:host .drawer .drawer-close dx-button{box-shadow:-8px 0 4px -4px #252b3a3d}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-drawer', template: "<div #drawerBackdrop class=\"drawer-backdrop\" (click)=\"hide($event, drawerBackdrop)\">\n  <div class=\"drawer\" [ngStyle]=\"{width: _width}\">\n    <div *ngIf=\"headerTemplate\" class=\"drawer-header\">\n      <ng-template [ngTemplateOutlet]=\"headerTemplate\"\n                   [ngTemplateOutletContext]=\"{$implicit: headerTemplateContext}\"></ng-template>\n    </div>\n    <div class=\"drawer-content\">\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\n    </div>\n    <div class=\"drawer-close\">\n      <dx-button height=\"40px\" icon=\"coast-icon coast-icon-arrow-right-filling\" (onClick)=\"hide($event)\"></dx-button>\n    </div>\n  </div>\n</div>\n", styles: [":host .drawer-backdrop{position:absolute;inset:0;z-index:calc(var(--coast-z-index-drawer, 1040) - 1)}:host .drawer-backdrop .drawer{position:absolute;right:0;height:100%;z-index:var(--coast-z-index-drawer, 1040);background-color:var(--coast-base-bg-color, #fff);display:flex;flex-flow:column nowrap}:host .drawer-backdrop .drawer .drawer-header{flex:0 0 36px;padding:8px;border-bottom:1px solid var(--coast-border-color, #dddddd);display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-end}:host .drawer-backdrop .drawer .drawer-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .drawer-backdrop .drawer .drawer-close{position:absolute;height:100%;width:20px;top:0;left:-20px;display:flex;flex-flow:row nowrap;align-items:center}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+            args: [{ selector: 'rs-drawer', template: "<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=\"80px\" icon=\"coast-icon coast-icon-arrow-right-filling\" (onClick)=\"hide($event)\"></dx-button>\n  </div>\n</div>\n", styles: [":host .drawer{position:absolute;top:0;right:0;bottom:0;height:100%;z-index:var(--coast-z-index-drawer, 2000);background-color:var(--coast-base-bg-color, #fff);border-left:1px solid var(--coast-border-color, #dddddd);box-shadow:-8px 0 4px -4px #252b3a3d;display:flex;flex-flow:column nowrap}:host .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 .drawer-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .drawer .drawer-close{position:absolute;height:100%;width:20px;top:0;left:-20px;display:flex;flex-flow:row nowrap;align-items:center}:host .drawer .drawer-close dx-button{box-shadow:-8px 0 4px -4px #252b3a3d}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { stopPropagation: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], autoHide: [{
+                type: HostListener,
+                args: ['window:click', ['$event']]
+            }] } });
 
 class DrawerService {
     constructor() {
     }
     open(viewContainerRef, size = 'default', contentTemplate, contentTemplateContext, headerTemplate, headerTemplateContext) {
         const drawerRef = viewContainerRef.createComponent(DrawerComponent);
-        drawerRef.instance.hide = ($event, backdrop) => {
-            if ($event.target === backdrop) {
-                drawerRef.hostView.destroy();
-            }
+        drawerRef.instance.hide = ($event) => {
+            $event?.event?.stopPropagation();
+            drawerRef.hostView.destroy();
         };
         drawerRef.instance.size = size;
         drawerRef.instance.headerTemplate = headerTemplate;
@@ -3005,8 +3083,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
         }], ctorParameters: function () { return []; } });
 
 class InstanceLinkTemplateComponent {
-    constructor(service, drawerService) {
-        this.service = service;
+    constructor(drawerService) {
         this.drawerService = drawerService;
     }
     openNewTab($event) {
@@ -3029,17 +3106,17 @@ class InstanceLinkTemplateComponent {
     }
     openDrawer($event) {
         $event.event?.stopPropagation();
-        this.drawerService.open(this.drawerViewContainerRef, 'default', this.drawerFormContentTemplate, {
+        this.drawerService.open(this.drawerViewContainerRef, this.drawerSize || 'default', this.drawerFormContentTemplate, {
             template: this.drawerFormTemplate || 'About'
         }, this.drawerFormHeaderTemplate);
     }
 }
-InstanceLinkTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: InstanceLinkTemplateComponent, deps: [{ token: DataGridService }, { token: DrawerService }], target: i0.ɵɵFactoryTarget.Component });
-InstanceLinkTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: InstanceLinkTemplateComponent, selector: "rs-instance-link-template", inputs: { tenant: "tenant", className: "className", oid: "oid", instanceLinkType: "instanceLinkType", drawerViewContainerRef: "drawerViewContainerRef", drawerFormTemplate: "drawerFormTemplate" }, viewQueries: [{ propertyName: "drawerFormHeaderTemplate", first: true, predicate: ["drawerFormHeaderTemplate"], descendants: true, static: true }, { propertyName: "drawerFormContentTemplate", first: true, predicate: ["drawerFormContentTemplate"], descendants: true, static: true }], ngImport: i0, template: "<dx-button *ngIf=\"instanceLinkType === 'tab'\"\n           type=\"default\"\n           stylingMode=\"text\"\n           icon=\"coast-icon coast-icon-send\"\n           hint=\"\u67E5\u770B\u8BE6\u60C5\"\n           (onClick)=\"openNewTab($event)\"></dx-button>\n<dx-button *ngIf=\"instanceLinkType === 'drawer'\"\n           type=\"default\"\n           stylingMode=\"text\"\n           icon=\"coast-icon coast-icon-send\"\n           hint=\"\u67E5\u770B\u8BE6\u60C5\"\n           (onClick)=\"openDrawer($event)\"></dx-button>\n<ng-template #drawerFormHeaderTemplate>\n  <dx-button icon=\"coast-icon coast-icon-send\" text=\"\u5728\u65B0\u9009\u9879\u5361\u4E2D\u67E5\u770B\" (onClick)=\"openNewTab($event)\"></dx-button>\n</ng-template>\n<ng-template #drawerFormContentTemplate let-modalContext>\n  <rs-form [tenant]=\"tenant\"\n           [className]=\"className\"\n           [oid]=\"oid\"\n           [template]=\"modalContext.template\"\n           [readonly]=\"true\"></rs-form>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: FormComponent, selector: "rs-form", inputs: ["tenant", "className", "oid", "copyOid", "template", "extraAttrMap", "opener", "params", "tabViewContainerRef", "onlyFrontEnd", "model", "readonly"], outputs: ["onDataLoaded", "submitCallback"] }] });
+InstanceLinkTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: InstanceLinkTemplateComponent, deps: [{ token: DrawerService }], target: i0.ɵɵFactoryTarget.Component });
+InstanceLinkTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: InstanceLinkTemplateComponent, selector: "rs-instance-link-template", inputs: { tenant: "tenant", className: "className", oid: "oid", instanceLinkType: "instanceLinkType", drawerViewContainerRef: "drawerViewContainerRef", drawerSize: "drawerSize", drawerFormTemplate: "drawerFormTemplate" }, viewQueries: [{ propertyName: "drawerFormHeaderTemplate", first: true, predicate: ["drawerFormHeaderTemplate"], descendants: true, static: true }, { propertyName: "drawerFormContentTemplate", first: true, predicate: ["drawerFormContentTemplate"], descendants: true, static: true }], ngImport: i0, template: "<dx-button *ngIf=\"instanceLinkType === 'tab'\"\n           type=\"default\"\n           stylingMode=\"text\"\n           icon=\"coast-icon coast-icon-send\"\n           hint=\"\u67E5\u770B\u8BE6\u60C5\"\n           (onClick)=\"openNewTab($event)\"></dx-button>\n<dx-button *ngIf=\"instanceLinkType === 'drawer'\"\n           type=\"default\"\n           stylingMode=\"text\"\n           icon=\"coast-icon coast-icon-send\"\n           hint=\"\u67E5\u770B\u8BE6\u60C5\"\n           (onClick)=\"openDrawer($event)\"></dx-button>\n<ng-template #drawerFormHeaderTemplate>\n  <dx-button icon=\"coast-icon coast-icon-send\" text=\"\u5728\u65B0\u9009\u9879\u5361\u4E2D\u67E5\u770B\" (onClick)=\"openNewTab($event)\"></dx-button>\n</ng-template>\n<ng-template #drawerFormContentTemplate let-modalContext>\n  <rs-form [tenant]=\"tenant\"\n           [className]=\"className\"\n           [oid]=\"oid\"\n           [template]=\"modalContext.template\"\n           [tabViewContainerRef]=\"drawerViewContainerRef\"\n           [readonly]=\"true\"></rs-form>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: FormComponent, selector: "rs-form", inputs: ["tenant", "className", "oid", "copyOid", "template", "extraAttrMap", "opener", "params", "tabViewContainerRef", "onlyFrontEnd", "model", "readonly"], outputs: ["onDataLoaded", "submitCallback"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: InstanceLinkTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-instance-link-template', template: "<dx-button *ngIf=\"instanceLinkType === 'tab'\"\n           type=\"default\"\n           stylingMode=\"text\"\n           icon=\"coast-icon coast-icon-send\"\n           hint=\"\u67E5\u770B\u8BE6\u60C5\"\n           (onClick)=\"openNewTab($event)\"></dx-button>\n<dx-button *ngIf=\"instanceLinkType === 'drawer'\"\n           type=\"default\"\n           stylingMode=\"text\"\n           icon=\"coast-icon coast-icon-send\"\n           hint=\"\u67E5\u770B\u8BE6\u60C5\"\n           (onClick)=\"openDrawer($event)\"></dx-button>\n<ng-template #drawerFormHeaderTemplate>\n  <dx-button icon=\"coast-icon coast-icon-send\" text=\"\u5728\u65B0\u9009\u9879\u5361\u4E2D\u67E5\u770B\" (onClick)=\"openNewTab($event)\"></dx-button>\n</ng-template>\n<ng-template #drawerFormContentTemplate let-modalContext>\n  <rs-form [tenant]=\"tenant\"\n           [className]=\"className\"\n           [oid]=\"oid\"\n           [template]=\"modalContext.template\"\n           [readonly]=\"true\"></rs-form>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: DataGridService }, { type: DrawerService }]; }, propDecorators: { tenant: [{
+            args: [{ selector: 'rs-instance-link-template', template: "<dx-button *ngIf=\"instanceLinkType === 'tab'\"\n           type=\"default\"\n           stylingMode=\"text\"\n           icon=\"coast-icon coast-icon-send\"\n           hint=\"\u67E5\u770B\u8BE6\u60C5\"\n           (onClick)=\"openNewTab($event)\"></dx-button>\n<dx-button *ngIf=\"instanceLinkType === 'drawer'\"\n           type=\"default\"\n           stylingMode=\"text\"\n           icon=\"coast-icon coast-icon-send\"\n           hint=\"\u67E5\u770B\u8BE6\u60C5\"\n           (onClick)=\"openDrawer($event)\"></dx-button>\n<ng-template #drawerFormHeaderTemplate>\n  <dx-button icon=\"coast-icon coast-icon-send\" text=\"\u5728\u65B0\u9009\u9879\u5361\u4E2D\u67E5\u770B\" (onClick)=\"openNewTab($event)\"></dx-button>\n</ng-template>\n<ng-template #drawerFormContentTemplate let-modalContext>\n  <rs-form [tenant]=\"tenant\"\n           [className]=\"className\"\n           [oid]=\"oid\"\n           [template]=\"modalContext.template\"\n           [tabViewContainerRef]=\"drawerViewContainerRef\"\n           [readonly]=\"true\"></rs-form>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: DrawerService }]; }, propDecorators: { tenant: [{
                 type: Input
             }], className: [{
                 type: Input
@@ -3049,6 +3126,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 type: Input
             }], drawerViewContainerRef: [{
                 type: Input
+            }], drawerSize: [{
+                type: Input
             }], drawerFormTemplate: [{
                 type: Input
             }], drawerFormHeaderTemplate: [{
@@ -3091,7 +3170,7 @@ class UnitInfoTemplateComponent {
     }
 }
 UnitInfoTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: UnitInfoTemplateComponent, deps: [{ token: DataGridService }, { token: i2$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-UnitInfoTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: UnitInfoTemplateComponent, selector: "rs-unit-info-template", inputs: { uid: "uid", cellInfo: "cellInfo" }, ngImport: i0, template: "<dx-button #textDiv type=\"default\" stylingMode=\"text\" (onClick)=\"$event.event?.stopPropagation()\">\n  {{ displayName }}\n  <dx-tooltip [target]=\"textDiv.instance.element()\"\n              [position]=\"'top'\"\n              [showEvent]=\"'click'\">\n    <div *dxTemplate=\"let data of 'content'\">\n      <div [innerHTML]=\"content\"></div>\n    </div>\n  </dx-tooltip>\n</dx-button>\n<br/>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i4.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i5.DxTooltipComponent, selector: "dx-tooltip", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showEvent", "target", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showEventChange", "targetChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
+UnitInfoTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: UnitInfoTemplateComponent, selector: "rs-unit-info-template", inputs: { uid: "uid", cellInfo: "cellInfo" }, ngImport: i0, template: "<dx-button #textDiv type=\"default\" stylingMode=\"text\" (onClick)=\"$event.event?.stopPropagation()\">\n  {{ displayName }}\n  <dx-tooltip [target]=\"textDiv.instance.element()\"\n              [position]=\"'top'\"\n              [showEvent]=\"'click'\">\n    <div *dxTemplate=\"let data of 'content'\">\n      <div [innerHTML]=\"content\"></div>\n    </div>\n  </dx-tooltip>\n</dx-button>\n<br/>\n", styles: [""], dependencies: [{ kind: "directive", type: i3$1.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i3.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i5.DxTooltipComponent, selector: "dx-tooltip", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showEvent", "target", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showEventChange", "targetChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: UnitInfoTemplateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rs-unit-info-template', template: "<dx-button #textDiv type=\"default\" stylingMode=\"text\" (onClick)=\"$event.event?.stopPropagation()\">\n  {{ displayName }}\n  <dx-tooltip [target]=\"textDiv.instance.element()\"\n              [position]=\"'top'\"\n              [showEvent]=\"'click'\">\n    <div *dxTemplate=\"let data of 'content'\">\n      <div [innerHTML]=\"content\"></div>\n    </div>\n  </dx-tooltip>\n</dx-button>\n<br/>\n" }]
@@ -3133,7 +3212,7 @@ class UserInfoTemplateComponent {
     }
 }
 UserInfoTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: UserInfoTemplateComponent, deps: [{ token: DataGridService }, { token: i2$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-UserInfoTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: UserInfoTemplateComponent, selector: "rs-user-info-template", inputs: { uid: "uid", cellInfo: "cellInfo" }, ngImport: i0, template: "<dx-button #textDiv type=\"default\" stylingMode=\"text\" (onClick)=\"$event.event?.stopPropagation()\">\n  {{ displayName }}\n  <dx-tooltip [target]=\"textDiv.instance.element()\"\n              [position]=\"'top'\"\n              [showEvent]=\"'click'\">\n    <div *dxTemplate=\"let data of 'content'\">\n      <div [innerHTML]=\"content\"></div>\n    </div>\n  </dx-tooltip>\n</dx-button>\n<br/>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i4.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i5.DxTooltipComponent, selector: "dx-tooltip", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showEvent", "target", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showEventChange", "targetChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
+UserInfoTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: UserInfoTemplateComponent, selector: "rs-user-info-template", inputs: { uid: "uid", cellInfo: "cellInfo" }, ngImport: i0, template: "<dx-button #textDiv type=\"default\" stylingMode=\"text\" (onClick)=\"$event.event?.stopPropagation()\">\n  {{ displayName }}\n  <dx-tooltip [target]=\"textDiv.instance.element()\"\n              [position]=\"'top'\"\n              [showEvent]=\"'click'\">\n    <div *dxTemplate=\"let data of 'content'\">\n      <div [innerHTML]=\"content\"></div>\n    </div>\n  </dx-tooltip>\n</dx-button>\n<br/>\n", styles: [""], dependencies: [{ kind: "directive", type: i3$1.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i3.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i5.DxTooltipComponent, selector: "dx-tooltip", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showEvent", "target", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showEventChange", "targetChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: UserInfoTemplateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rs-user-info-template', template: "<dx-button #textDiv type=\"default\" stylingMode=\"text\" (onClick)=\"$event.event?.stopPropagation()\">\n  {{ displayName }}\n  <dx-tooltip [target]=\"textDiv.instance.element()\"\n              [position]=\"'top'\"\n              [showEvent]=\"'click'\">\n    <div *dxTemplate=\"let data of 'content'\">\n      <div [innerHTML]=\"content\"></div>\n    </div>\n  </dx-tooltip>\n</dx-button>\n<br/>\n" }]
@@ -3159,6 +3238,7 @@ class DataGridComponent {
         this.showRowNum = true;
         this.instanceLinkType = 'tab';
         this.drawerInstanceLinkViewContainerRef = this.viewContainerRef;
+        this.drawerInstanceLinkSize = 'default';
         this.onCellPrepared = new EventEmitter();
         this.onContentReady = new EventEmitter();
         this.onEditorPreparing = new EventEmitter();
@@ -3169,7 +3249,7 @@ class DataGridComponent {
     }
     ngOnInit() {
         this.reload();
-        this.service.cellTemplateLoaded$.pipe(debounceTime(300)).subscribe(() => {
+        this.service.cellTemplateLoaded$.pipe(debounceTime(100)).subscribe(() => {
             this.dxDataGrid.instance.resize();
         });
     }
@@ -3262,10 +3342,10 @@ class DataGridComponent {
     }
 }
 DataGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DataGridComponent, deps: [{ token: DataGridFactory }, { token: DataGridService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-DataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DataGridComponent, selector: "rs-data-grid", inputs: { tenant: "tenant", className: "className", view: "view", filter: "filter", customColumnFn: "customColumnFn", keyExpr: "keyExpr", dataGridName: "dataGridName", height: "height", onlyFrontEnd: "onlyFrontEnd", disablePage: "disablePage", dataSource: "dataSource", selectionMode: "selectionMode", selectedRowKeys: "selectedRowKeys", showRowNum: "showRowNum", instanceLinkType: "instanceLinkType", drawerInstanceLinkViewContainerRef: "drawerInstanceLinkViewContainerRef", drawerInstanceLinkFormTemplate: "drawerInstanceLinkFormTemplate" }, outputs: { selectedRowKeysChange: "selectedRowKeysChange", onCellPrepared: "onCellPrepared", onContentReady: "onContentReady", onEditorPreparing: "onEditorPreparing", onRowClick: "onRowClick", onRowDblClick: "onRowDblClick", onSelectionChanged: "onSelectionChanged" }, providers: [DataGridService], queries: [{ propertyName: "rowButtonsTemplate", first: true, predicate: RowButtonsTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "dxDataGrid", first: true, predicate: DxDataGridComponent, descendants: true, static: true }], ngImport: i0, template: "<dx-data-grid [showBorders]=\"true\"\r\n              [showRowLines]=\"true\"\r\n              [hoverStateEnabled]=\"true\"\r\n              [rowAlternationEnabled]=\"true\"\r\n              [columnAutoWidth]=\"true\"\r\n              [allowColumnResizing]=\"true\"\r\n              columnResizingMode=\"widget\"\r\n              dateSerializationFormat=\"yyyy/MM/dd HH:mm:ss\"\r\n              [syncLookupFilterValues]=\"false\"\r\n              [dataSource]=\"dataSource\"\r\n              [columns]=\"columns\"\r\n              [height]=\"height\"\r\n              [keyExpr]=\"keyExpr\"\r\n              [selectedRowKeys]=\"selectedRowKeys\"\r\n              (selectedRowKeysChange)=\"selectedRowKeysChange.emit($event)\"\r\n              (onCellPrepared)=\"onCellPrepared.emit($event)\"\r\n              (onContentReady)=\"onContentReady.emit($event)\"\r\n              (onEditorPreparing)=\"onDxDataGridEditorPreparing($event)\"\r\n              (onRowClick)=\"onRowClick.emit($event)\"\r\n              (onRowDblClick)=\"onRowDblClick.emit($event)\"\r\n              (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\r\n  <dxo-sorting mode=\"multiple\"></dxo-sorting>\r\n  <dxo-selection [mode]=\"selectionMode\" selectAllMode=\"page\" showCheckBoxesMode=\"always\"></dxo-selection>\r\n  <dxo-header-filter [visible]=\"!onlyFrontEnd\">\r\n    <dxo-search [enabled]=\"true\"></dxo-search>\r\n    <dxo-texts [ok]=\"'\u786E\u5B9A'\"></dxo-texts>\r\n  </dxo-header-filter>\r\n  <dxo-filter-row [visible]=\"true\"></dxo-filter-row>\r\n  <dxo-remote-operations [filtering]=\"!onlyFrontEnd\"\r\n                         [sorting]=\"!onlyFrontEnd\"\r\n                         [paging]=\"!onlyFrontEnd\">\r\n  </dxo-remote-operations>\r\n  <dxo-paging [enabled]=\"!disablePage\" [pageSize]=\"15\"></dxo-paging>\r\n  <dxo-pager [visible]=\"!disablePage\"\r\n             [showInfo]=\"true\"\r\n             infoText=\"\u7B2C{0}\u9875\uFF0C\u5171{1}\u9875\uFF08\u5171{2}\u4E2A\u9879\u76EE\uFF09\"\r\n             [showPageSizeSelector]=\"true\"\r\n             [allowedPageSizes]=\"[15, 30, 50]\"\r\n  ></dxo-pager>\r\n  <dxo-scrolling showScrollbar=\"always\"></dxo-scrolling>\r\n  <div *dxTemplate=\"let cellInfo of 'rowIndexTemplate'\">\r\n    {{ cellInfo.rowIndex + 1 }}\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'instanceLinkTemplate'\">\r\n    <rs-instance-link-template [tenant]=\"tenant\"\r\n                               [className]=\"className\"\r\n                               [oid]=\"cellInfo.data.oid\"\r\n                               [instanceLinkType]=\"instanceLinkType\"\r\n                               [drawerViewContainerRef]=\"drawerInstanceLinkViewContainerRef\"\r\n                               [drawerFormTemplate]=\"drawerInstanceLinkFormTemplate\">\r\n    </rs-instance-link-template>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'rowButtonsTemplate'\">\r\n    <ng-container [ngTemplateOutlet]=\"rowButtonsTemplate.templateRef\"\r\n                  [ngTemplateOutletContext]=\"{$implicit: cellInfo, cellTemplateLoaded$: service.cellTemplateLoaded$}\"></ng-container>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'multipleValueCellTemplate'\">\r\n    <div [innerHTML]=\"convertMultipleValueCellText(cellInfo)\"></div>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'textCellTemplate'\">\r\n    <div #textDiv style=\"text-overflow: ellipsis; overflow: hidden; cursor: pointer;\">{{ cellInfo.value }}</div>\r\n    <dx-tooltip [target]=\"textDiv\"\r\n                [position]=\"'top'\"\r\n                [showEvent]=\"'click'\">\r\n      <div *dxTemplate=\"let data of 'content'\">\r\n        <p style=\"max-width: 320px; text-align: left; white-space: normal;\" [innerText]=\"cellInfo.value\"></p>\r\n      </div>\r\n    </dx-tooltip>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'fileCellTemplate'\">\r\n    <ng-container *ngFor=\"let file of cellInfo.value\">\r\n      <rs-file-cell-template [file]=\"file\"></rs-file-cell-template>\r\n    </ng-container>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'userCellTemplate'\">\r\n    <ng-container *ngFor=\"let user of getOriginalValue(cellInfo, 'userInfo')\">\r\n      <rs-user-info-template [uid]=\"user\" [cellInfo]=\"cellInfo\"></rs-user-info-template>\r\n    </ng-container>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'unitCellTemplate'\">\r\n    <ng-container *ngFor=\"let unit of getOriginalValue(cellInfo, 'unitInfo')\">\r\n      <rs-unit-info-template [uid]=\"unit\" [cellInfo]=\"cellInfo\"></rs-unit-info-template>\r\n    </ng-container>\r\n  </div>\r\n</dx-data-grid>\r\n", styles: [":host{display:flex;flex-flow:column nowrap}:host dx-data-grid{flex:auto;height:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i5$1.DxDataGridComponent, selector: "dx-data-grid", inputs: ["accessKey", "activeStateEnabled", "allowColumnReordering", "allowColumnResizing", "autoNavigateToFocusedRow", "cacheEnabled", "cellHintEnabled", "columnAutoWidth", "columnChooser", "columnFixing", "columnHidingEnabled", "columnMinWidth", "columnResizingMode", "columns", "columnWidth", "customizeColumns", "dataRowTemplate", "dataSource", "dateSerializationFormat", "disabled", "editing", "elementAttr", "errorRowEnabled", "export", "filterBuilder", "filterBuilderPopup", "filterPanel", "filterRow", "filterSyncEnabled", "filterValue", "focusedColumnIndex", "focusedRowEnabled", "focusedRowIndex", "focusedRowKey", "grouping", "groupPanel", "headerFilter", "height", "highlightChanges", "hint", "hoverStateEnabled", "keyboardNavigation", "keyExpr", "loadPanel", "masterDetail", "noDataText", "pager", "paging", "remoteOperations", "renderAsync", "repaintChangesOnly", "rowAlternationEnabled", "rowDragging", "rowTemplate", "rtlEnabled", "scrolling", "searchPanel", "selectedRowKeys", "selection", "selectionFilter", "showBorders", "showColumnHeaders", "showColumnLines", "showRowLines", "sortByGroupSummaryInfo", "sorting", "stateStoring", "summary", "syncLookupFilterValues", "tabIndex", "toolbar", "twoWayBindingEnabled", "visible", "width", "wordWrapEnabled"], outputs: ["onAdaptiveDetailRowPreparing", "onCellClick", "onCellDblClick", "onCellHoverChanged", "onCellPrepared", "onContentReady", "onContextMenuPreparing", "onDataErrorOccurred", "onDisposing", "onEditCanceled", "onEditCanceling", "onEditingStart", "onEditorPrepared", "onEditorPreparing", "onExporting", "onFocusedCellChanged", "onFocusedCellChanging", "onFocusedRowChanged", "onFocusedRowChanging", "onInitialized", "onInitNewRow", "onKeyDown", "onOptionChanged", "onRowClick", "onRowCollapsed", "onRowCollapsing", "onRowDblClick", "onRowExpanded", "onRowExpanding", "onRowInserted", "onRowInserting", "onRowPrepared", "onRowRemoved", "onRowRemoving", "onRowUpdated", "onRowUpdating", "onRowValidating", "onSaved", "onSaving", "onSelectionChanged", "onToolbarPreparing", "accessKeyChange", "activeStateEnabledChange", "allowColumnReorderingChange", "allowColumnResizingChange", "autoNavigateToFocusedRowChange", "cacheEnabledChange", "cellHintEnabledChange", "columnAutoWidthChange", "columnChooserChange", "columnFixingChange", "columnHidingEnabledChange", "columnMinWidthChange", "columnResizingModeChange", "columnsChange", "columnWidthChange", "customizeColumnsChange", "dataRowTemplateChange", "dataSourceChange", "dateSerializationFormatChange", "disabledChange", "editingChange", "elementAttrChange", "errorRowEnabledChange", "exportChange", "filterBuilderChange", "filterBuilderPopupChange", "filterPanelChange", "filterRowChange", "filterSyncEnabledChange", "filterValueChange", "focusedColumnIndexChange", "focusedRowEnabledChange", "focusedRowIndexChange", "focusedRowKeyChange", "groupingChange", "groupPanelChange", "headerFilterChange", "heightChange", "highlightChangesChange", "hintChange", "hoverStateEnabledChange", "keyboardNavigationChange", "keyExprChange", "loadPanelChange", "masterDetailChange", "noDataTextChange", "pagerChange", "pagingChange", "remoteOperationsChange", "renderAsyncChange", "repaintChangesOnlyChange", "rowAlternationEnabledChange", "rowDraggingChange", "rowTemplateChange", "rtlEnabledChange", "scrollingChange", "searchPanelChange", "selectedRowKeysChange", "selectionChange", "selectionFilterChange", "showBordersChange", "showColumnHeadersChange", "showColumnLinesChange", "showRowLinesChange", "sortByGroupSummaryInfoChange", "sortingChange", "stateStoringChange", "summaryChange", "syncLookupFilterValuesChange", "tabIndexChange", "toolbarChange", "twoWayBindingEnabledChange", "visibleChange", "widthChange", "wordWrapEnabledChange"] }, { kind: "component", type: i6$1.DxoSearchComponent, selector: "dxo-search", inputs: ["editorOptions", "enabled", "timeout", "mode", "searchExpr"] }, { kind: "component", type: i6$1.DxoSelectionComponent, selector: "dxo-selection", inputs: ["allowSelectAll", "recursive", "selectByClick", "deferred", "mode", "selectAllMode", "showCheckBoxesMode"] }, { kind: "component", type: i6$1.DxoTextsComponent, selector: "dxo-texts", inputs: ["fix", "leftPosition", "rightPosition", "unfix", "addRow", "cancelAllChanges", "cancelRowChanges", "confirmDeleteMessage", "confirmDeleteTitle", "deleteRow", "editRow", "saveAllChanges", "saveRowChanges", "undeleteRow", "validationCancelChanges", "exportAll", "exportSelectedRows", "exportTo", "clearFilter", "createFilter", "filterEnabledHint", "groupByThisColumn", "groupContinuedMessage", "groupContinuesMessage", "ungroup", "ungroupAll", "cancel", "emptyValue", "ok", "avg", "avgOtherColumn", "count", "max", "maxOtherColumn", "min", "minOtherColumn", "sum", "sumOtherColumn", "allFields", "columnFields", "dataFields", "filterFields", "rowFields", "columnFieldArea", "dataFieldArea", "filterFieldArea", "rowFieldArea", "collapseAll", "dataNotAvailable", "expandAll", "exportToExcel", "grandTotal", "noData", "removeAllSorting", "showFieldChooser", "sortColumnBySummary", "sortRowBySummary", "total", "addRowToNode"] }, { kind: "component", type: i6$1.DxoHeaderFilterComponent, selector: "dxo-header-filter", inputs: ["allowSearch", "allowSelectAll", "dataSource", "groupInterval", "height", "search", "searchMode", "width", "searchTimeout", "texts", "visible", "showRelevantValues"] }, { kind: "component", type: i6$1.DxoFilterRowComponent, selector: "dxo-filter-row", inputs: ["applyFilter", "applyFilterText", "betweenEndText", "betweenStartText", "operationDescriptions", "resetOperationText", "showAllText", "showOperationChooser", "visible"] }, { kind: "component", type: i6$1.DxoPagerComponent, selector: "dxo-pager", inputs: ["allowedPageSizes", "displayMode", "infoText", "label", "showInfo", "showNavigationButtons", "showPageSizeSelector", "visible"] }, { kind: "component", type: i6$1.DxoPagingComponent, selector: "dxo-paging", inputs: ["enabled", "pageIndex", "pageSize"], outputs: ["pageIndexChange", "pageSizeChange"] }, { kind: "component", type: i6$1.DxoRemoteOperationsComponent, selector: "dxo-remote-operations", inputs: ["filtering", "grouping", "groupPaging", "paging", "sorting", "summary"] }, { kind: "component", type: i6$1.DxoScrollingComponent, selector: "dxo-scrolling", inputs: ["columnRenderingMode", "mode", "preloadEnabled", "renderAsync", "rowRenderingMode", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative"] }, { kind: "component", type: i6$1.DxoSortingComponent, selector: "dxo-sorting", inputs: ["ascendingText", "clearText", "descendingText", "mode", "showSortIndexes"] }, { kind: "component", type: i5.DxTooltipComponent, selector: "dx-tooltip", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showEvent", "target", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showEventChange", "targetChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: FileCellTemplateComponent, selector: "rs-file-cell-template", inputs: ["file"] }, { kind: "component", type: InstanceLinkTemplateComponent, selector: "rs-instance-link-template", inputs: ["tenant", "className", "oid", "instanceLinkType", "drawerViewContainerRef", "drawerFormTemplate"] }, { kind: "component", type: UnitInfoTemplateComponent, selector: "rs-unit-info-template", inputs: ["uid", "cellInfo"] }, { kind: "component", type: UserInfoTemplateComponent, selector: "rs-user-info-template", inputs: ["uid", "cellInfo"] }] });
+DataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DataGridComponent, selector: "rs-data-grid", inputs: { tenant: "tenant", className: "className", view: "view", filter: "filter", customColumnFn: "customColumnFn", keyExpr: "keyExpr", dataGridName: "dataGridName", height: "height", onlyFrontEnd: "onlyFrontEnd", disablePage: "disablePage", dataSource: "dataSource", selectionMode: "selectionMode", selectedRowKeys: "selectedRowKeys", showRowNum: "showRowNum", instanceLinkType: "instanceLinkType", drawerInstanceLinkViewContainerRef: "drawerInstanceLinkViewContainerRef", drawerInstanceLinkSize: "drawerInstanceLinkSize", drawerInstanceLinkFormTemplate: "drawerInstanceLinkFormTemplate" }, outputs: { selectedRowKeysChange: "selectedRowKeysChange", onCellPrepared: "onCellPrepared", onContentReady: "onContentReady", onEditorPreparing: "onEditorPreparing", onRowClick: "onRowClick", onRowDblClick: "onRowDblClick", onSelectionChanged: "onSelectionChanged" }, providers: [DataGridService], queries: [{ propertyName: "rowButtonsTemplate", first: true, predicate: RowButtonsTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "dxDataGrid", first: true, predicate: DxDataGridComponent, descendants: true, static: true }], ngImport: i0, template: "<dx-data-grid [showBorders]=\"true\"\r\n              [showRowLines]=\"true\"\r\n              [hoverStateEnabled]=\"true\"\r\n              [rowAlternationEnabled]=\"true\"\r\n              [columnAutoWidth]=\"true\"\r\n              [allowColumnResizing]=\"true\"\r\n              columnResizingMode=\"widget\"\r\n              dateSerializationFormat=\"yyyy/MM/dd HH:mm:ss\"\r\n              [syncLookupFilterValues]=\"false\"\r\n              [dataSource]=\"dataSource\"\r\n              [columns]=\"columns\"\r\n              [height]=\"height\"\r\n              [keyExpr]=\"keyExpr\"\r\n              [selectedRowKeys]=\"selectedRowKeys\"\r\n              (selectedRowKeysChange)=\"selectedRowKeysChange.emit($event)\"\r\n              (onCellPrepared)=\"onCellPrepared.emit($event)\"\r\n              (onContentReady)=\"onContentReady.emit($event)\"\r\n              (onEditorPreparing)=\"onDxDataGridEditorPreparing($event)\"\r\n              (onRowClick)=\"onRowClick.emit($event)\"\r\n              (onRowDblClick)=\"onRowDblClick.emit($event)\"\r\n              (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\r\n  <dxo-sorting mode=\"multiple\"></dxo-sorting>\r\n  <dxo-selection [mode]=\"selectionMode\" selectAllMode=\"page\" showCheckBoxesMode=\"always\"></dxo-selection>\r\n  <dxo-header-filter [visible]=\"!onlyFrontEnd\">\r\n    <dxo-search [enabled]=\"true\"></dxo-search>\r\n    <dxo-texts [ok]=\"'\u786E\u5B9A'\"></dxo-texts>\r\n  </dxo-header-filter>\r\n  <dxo-filter-row [visible]=\"true\"></dxo-filter-row>\r\n  <dxo-remote-operations [filtering]=\"!onlyFrontEnd\"\r\n                         [sorting]=\"!onlyFrontEnd\"\r\n                         [paging]=\"!onlyFrontEnd\">\r\n  </dxo-remote-operations>\r\n  <dxo-paging [enabled]=\"!disablePage\" [pageSize]=\"15\"></dxo-paging>\r\n  <dxo-pager [visible]=\"!disablePage\"\r\n             [showInfo]=\"true\"\r\n             infoText=\"\u7B2C{0}\u9875\uFF0C\u5171{1}\u9875\uFF08\u5171{2}\u4E2A\u9879\u76EE\uFF09\"\r\n             [showPageSizeSelector]=\"true\"\r\n             [allowedPageSizes]=\"[15, 30, 50]\"\r\n  ></dxo-pager>\r\n  <dxo-scrolling showScrollbar=\"always\"></dxo-scrolling>\r\n  <div *dxTemplate=\"let cellInfo of 'rowIndexTemplate'\">\r\n    {{ cellInfo.rowIndex + 1 }}\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'instanceLinkTemplate'\">\r\n    <rs-instance-link-template [tenant]=\"tenant\"\r\n                               [className]=\"className\"\r\n                               [oid]=\"cellInfo.data.oid\"\r\n                               [instanceLinkType]=\"instanceLinkType\"\r\n                               [drawerViewContainerRef]=\"drawerInstanceLinkViewContainerRef\"\r\n                               [drawerSize]=\"drawerInstanceLinkSize\"\r\n                               [drawerFormTemplate]=\"drawerInstanceLinkFormTemplate\">\r\n    </rs-instance-link-template>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'rowButtonsTemplate'\">\r\n    <ng-container [ngTemplateOutlet]=\"rowButtonsTemplate.templateRef\"\r\n                  [ngTemplateOutletContext]=\"{$implicit: cellInfo, cellTemplateLoaded$: service.cellTemplateLoaded$}\"></ng-container>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'multipleValueCellTemplate'\">\r\n    <div [innerHTML]=\"convertMultipleValueCellText(cellInfo)\"></div>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'textCellTemplate'\">\r\n    <div #textDiv style=\"text-overflow: ellipsis; overflow: hidden; cursor: pointer;\">{{ cellInfo.value }}</div>\r\n    <dx-tooltip [target]=\"textDiv\"\r\n                [position]=\"'top'\"\r\n                [showEvent]=\"'click'\">\r\n      <div *dxTemplate=\"let data of 'content'\">\r\n        <p style=\"max-width: 320px; text-align: left; white-space: normal;\" [innerText]=\"cellInfo.value\"></p>\r\n      </div>\r\n    </dx-tooltip>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'fileCellTemplate'\">\r\n    <ng-container *ngFor=\"let file of cellInfo.value\">\r\n      <rs-file-cell-template [file]=\"file\"></rs-file-cell-template>\r\n    </ng-container>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'userCellTemplate'\">\r\n    <ng-container *ngFor=\"let user of getOriginalValue(cellInfo, 'userInfo')\">\r\n      <rs-user-info-template [uid]=\"user\" [cellInfo]=\"cellInfo\"></rs-user-info-template>\r\n    </ng-container>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'unitCellTemplate'\">\r\n    <ng-container *ngFor=\"let unit of getOriginalValue(cellInfo, 'unitInfo')\">\r\n      <rs-unit-info-template [uid]=\"unit\" [cellInfo]=\"cellInfo\"></rs-unit-info-template>\r\n    </ng-container>\r\n  </div>\r\n</dx-data-grid>\r\n", styles: [":host{display:flex;flex-flow:column nowrap}:host dx-data-grid{flex:auto;height:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i5$1.DxDataGridComponent, selector: "dx-data-grid", inputs: ["accessKey", "activeStateEnabled", "allowColumnReordering", "allowColumnResizing", "autoNavigateToFocusedRow", "cacheEnabled", "cellHintEnabled", "columnAutoWidth", "columnChooser", "columnFixing", "columnHidingEnabled", "columnMinWidth", "columnResizingMode", "columns", "columnWidth", "customizeColumns", "dataRowTemplate", "dataSource", "dateSerializationFormat", "disabled", "editing", "elementAttr", "errorRowEnabled", "export", "filterBuilder", "filterBuilderPopup", "filterPanel", "filterRow", "filterSyncEnabled", "filterValue", "focusedColumnIndex", "focusedRowEnabled", "focusedRowIndex", "focusedRowKey", "grouping", "groupPanel", "headerFilter", "height", "highlightChanges", "hint", "hoverStateEnabled", "keyboardNavigation", "keyExpr", "loadPanel", "masterDetail", "noDataText", "pager", "paging", "remoteOperations", "renderAsync", "repaintChangesOnly", "rowAlternationEnabled", "rowDragging", "rowTemplate", "rtlEnabled", "scrolling", "searchPanel", "selectedRowKeys", "selection", "selectionFilter", "showBorders", "showColumnHeaders", "showColumnLines", "showRowLines", "sortByGroupSummaryInfo", "sorting", "stateStoring", "summary", "syncLookupFilterValues", "tabIndex", "toolbar", "twoWayBindingEnabled", "visible", "width", "wordWrapEnabled"], outputs: ["onAdaptiveDetailRowPreparing", "onCellClick", "onCellDblClick", "onCellHoverChanged", "onCellPrepared", "onContentReady", "onContextMenuPreparing", "onDataErrorOccurred", "onDisposing", "onEditCanceled", "onEditCanceling", "onEditingStart", "onEditorPrepared", "onEditorPreparing", "onExporting", "onFocusedCellChanged", "onFocusedCellChanging", "onFocusedRowChanged", "onFocusedRowChanging", "onInitialized", "onInitNewRow", "onKeyDown", "onOptionChanged", "onRowClick", "onRowCollapsed", "onRowCollapsing", "onRowDblClick", "onRowExpanded", "onRowExpanding", "onRowInserted", "onRowInserting", "onRowPrepared", "onRowRemoved", "onRowRemoving", "onRowUpdated", "onRowUpdating", "onRowValidating", "onSaved", "onSaving", "onSelectionChanged", "onToolbarPreparing", "accessKeyChange", "activeStateEnabledChange", "allowColumnReorderingChange", "allowColumnResizingChange", "autoNavigateToFocusedRowChange", "cacheEnabledChange", "cellHintEnabledChange", "columnAutoWidthChange", "columnChooserChange", "columnFixingChange", "columnHidingEnabledChange", "columnMinWidthChange", "columnResizingModeChange", "columnsChange", "columnWidthChange", "customizeColumnsChange", "dataRowTemplateChange", "dataSourceChange", "dateSerializationFormatChange", "disabledChange", "editingChange", "elementAttrChange", "errorRowEnabledChange", "exportChange", "filterBuilderChange", "filterBuilderPopupChange", "filterPanelChange", "filterRowChange", "filterSyncEnabledChange", "filterValueChange", "focusedColumnIndexChange", "focusedRowEnabledChange", "focusedRowIndexChange", "focusedRowKeyChange", "groupingChange", "groupPanelChange", "headerFilterChange", "heightChange", "highlightChangesChange", "hintChange", "hoverStateEnabledChange", "keyboardNavigationChange", "keyExprChange", "loadPanelChange", "masterDetailChange", "noDataTextChange", "pagerChange", "pagingChange", "remoteOperationsChange", "renderAsyncChange", "repaintChangesOnlyChange", "rowAlternationEnabledChange", "rowDraggingChange", "rowTemplateChange", "rtlEnabledChange", "scrollingChange", "searchPanelChange", "selectedRowKeysChange", "selectionChange", "selectionFilterChange", "showBordersChange", "showColumnHeadersChange", "showColumnLinesChange", "showRowLinesChange", "sortByGroupSummaryInfoChange", "sortingChange", "stateStoringChange", "summaryChange", "syncLookupFilterValuesChange", "tabIndexChange", "toolbarChange", "twoWayBindingEnabledChange", "visibleChange", "widthChange", "wordWrapEnabledChange"] }, { kind: "component", type: i6$1.DxoSearchComponent, selector: "dxo-search", inputs: ["editorOptions", "enabled", "timeout", "mode", "searchExpr"] }, { kind: "component", type: i6$1.DxoSelectionComponent, selector: "dxo-selection", inputs: ["allowSelectAll", "recursive", "selectByClick", "deferred", "mode", "selectAllMode", "showCheckBoxesMode"] }, { kind: "component", type: i6$1.DxoTextsComponent, selector: "dxo-texts", inputs: ["fix", "leftPosition", "rightPosition", "unfix", "addRow", "cancelAllChanges", "cancelRowChanges", "confirmDeleteMessage", "confirmDeleteTitle", "deleteRow", "editRow", "saveAllChanges", "saveRowChanges", "undeleteRow", "validationCancelChanges", "exportAll", "exportSelectedRows", "exportTo", "clearFilter", "createFilter", "filterEnabledHint", "groupByThisColumn", "groupContinuedMessage", "groupContinuesMessage", "ungroup", "ungroupAll", "cancel", "emptyValue", "ok", "avg", "avgOtherColumn", "count", "max", "maxOtherColumn", "min", "minOtherColumn", "sum", "sumOtherColumn", "allFields", "columnFields", "dataFields", "filterFields", "rowFields", "columnFieldArea", "dataFieldArea", "filterFieldArea", "rowFieldArea", "collapseAll", "dataNotAvailable", "expandAll", "exportToExcel", "grandTotal", "noData", "removeAllSorting", "showFieldChooser", "sortColumnBySummary", "sortRowBySummary", "total", "addRowToNode"] }, { kind: "component", type: i6$1.DxoHeaderFilterComponent, selector: "dxo-header-filter", inputs: ["allowSearch", "allowSelectAll", "dataSource", "groupInterval", "height", "search", "searchMode", "width", "searchTimeout", "texts", "visible", "showRelevantValues"] }, { kind: "component", type: i6$1.DxoFilterRowComponent, selector: "dxo-filter-row", inputs: ["applyFilter", "applyFilterText", "betweenEndText", "betweenStartText", "operationDescriptions", "resetOperationText", "showAllText", "showOperationChooser", "visible"] }, { kind: "component", type: i6$1.DxoPagerComponent, selector: "dxo-pager", inputs: ["allowedPageSizes", "displayMode", "infoText", "label", "showInfo", "showNavigationButtons", "showPageSizeSelector", "visible"] }, { kind: "component", type: i6$1.DxoPagingComponent, selector: "dxo-paging", inputs: ["enabled", "pageIndex", "pageSize"], outputs: ["pageIndexChange", "pageSizeChange"] }, { kind: "component", type: i6$1.DxoRemoteOperationsComponent, selector: "dxo-remote-operations", inputs: ["filtering", "grouping", "groupPaging", "paging", "sorting", "summary"] }, { kind: "component", type: i6$1.DxoScrollingComponent, selector: "dxo-scrolling", inputs: ["columnRenderingMode", "mode", "preloadEnabled", "renderAsync", "rowRenderingMode", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative"] }, { kind: "component", type: i6$1.DxoSortingComponent, selector: "dxo-sorting", inputs: ["ascendingText", "clearText", "descendingText", "mode", "showSortIndexes"] }, { kind: "component", type: i5.DxTooltipComponent, selector: "dx-tooltip", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showEvent", "target", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showEventChange", "targetChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: FileCellTemplateComponent, selector: "rs-file-cell-template", inputs: ["file"] }, { kind: "component", type: InstanceLinkTemplateComponent, selector: "rs-instance-link-template", inputs: ["tenant", "className", "oid", "instanceLinkType", "drawerViewContainerRef", "drawerSize", "drawerFormTemplate"] }, { kind: "component", type: UnitInfoTemplateComponent, selector: "rs-unit-info-template", inputs: ["uid", "cellInfo"] }, { kind: "component", type: UserInfoTemplateComponent, selector: "rs-user-info-template", inputs: ["uid", "cellInfo"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DataGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-data-grid', providers: [DataGridService], template: "<dx-data-grid [showBorders]=\"true\"\r\n              [showRowLines]=\"true\"\r\n              [hoverStateEnabled]=\"true\"\r\n              [rowAlternationEnabled]=\"true\"\r\n              [columnAutoWidth]=\"true\"\r\n              [allowColumnResizing]=\"true\"\r\n              columnResizingMode=\"widget\"\r\n              dateSerializationFormat=\"yyyy/MM/dd HH:mm:ss\"\r\n              [syncLookupFilterValues]=\"false\"\r\n              [dataSource]=\"dataSource\"\r\n              [columns]=\"columns\"\r\n              [height]=\"height\"\r\n              [keyExpr]=\"keyExpr\"\r\n              [selectedRowKeys]=\"selectedRowKeys\"\r\n              (selectedRowKeysChange)=\"selectedRowKeysChange.emit($event)\"\r\n              (onCellPrepared)=\"onCellPrepared.emit($event)\"\r\n              (onContentReady)=\"onContentReady.emit($event)\"\r\n              (onEditorPreparing)=\"onDxDataGridEditorPreparing($event)\"\r\n              (onRowClick)=\"onRowClick.emit($event)\"\r\n              (onRowDblClick)=\"onRowDblClick.emit($event)\"\r\n              (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\r\n  <dxo-sorting mode=\"multiple\"></dxo-sorting>\r\n  <dxo-selection [mode]=\"selectionMode\" selectAllMode=\"page\" showCheckBoxesMode=\"always\"></dxo-selection>\r\n  <dxo-header-filter [visible]=\"!onlyFrontEnd\">\r\n    <dxo-search [enabled]=\"true\"></dxo-search>\r\n    <dxo-texts [ok]=\"'\u786E\u5B9A'\"></dxo-texts>\r\n  </dxo-header-filter>\r\n  <dxo-filter-row [visible]=\"true\"></dxo-filter-row>\r\n  <dxo-remote-operations [filtering]=\"!onlyFrontEnd\"\r\n                         [sorting]=\"!onlyFrontEnd\"\r\n                         [paging]=\"!onlyFrontEnd\">\r\n  </dxo-remote-operations>\r\n  <dxo-paging [enabled]=\"!disablePage\" [pageSize]=\"15\"></dxo-paging>\r\n  <dxo-pager [visible]=\"!disablePage\"\r\n             [showInfo]=\"true\"\r\n             infoText=\"\u7B2C{0}\u9875\uFF0C\u5171{1}\u9875\uFF08\u5171{2}\u4E2A\u9879\u76EE\uFF09\"\r\n             [showPageSizeSelector]=\"true\"\r\n             [allowedPageSizes]=\"[15, 30, 50]\"\r\n  ></dxo-pager>\r\n  <dxo-scrolling showScrollbar=\"always\"></dxo-scrolling>\r\n  <div *dxTemplate=\"let cellInfo of 'rowIndexTemplate'\">\r\n    {{ cellInfo.rowIndex + 1 }}\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'instanceLinkTemplate'\">\r\n    <rs-instance-link-template [tenant]=\"tenant\"\r\n                               [className]=\"className\"\r\n                               [oid]=\"cellInfo.data.oid\"\r\n                               [instanceLinkType]=\"instanceLinkType\"\r\n                               [drawerViewContainerRef]=\"drawerInstanceLinkViewContainerRef\"\r\n                               [drawerFormTemplate]=\"drawerInstanceLinkFormTemplate\">\r\n    </rs-instance-link-template>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'rowButtonsTemplate'\">\r\n    <ng-container [ngTemplateOutlet]=\"rowButtonsTemplate.templateRef\"\r\n                  [ngTemplateOutletContext]=\"{$implicit: cellInfo, cellTemplateLoaded$: service.cellTemplateLoaded$}\"></ng-container>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'multipleValueCellTemplate'\">\r\n    <div [innerHTML]=\"convertMultipleValueCellText(cellInfo)\"></div>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'textCellTemplate'\">\r\n    <div #textDiv style=\"text-overflow: ellipsis; overflow: hidden; cursor: pointer;\">{{ cellInfo.value }}</div>\r\n    <dx-tooltip [target]=\"textDiv\"\r\n                [position]=\"'top'\"\r\n                [showEvent]=\"'click'\">\r\n      <div *dxTemplate=\"let data of 'content'\">\r\n        <p style=\"max-width: 320px; text-align: left; white-space: normal;\" [innerText]=\"cellInfo.value\"></p>\r\n      </div>\r\n    </dx-tooltip>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'fileCellTemplate'\">\r\n    <ng-container *ngFor=\"let file of cellInfo.value\">\r\n      <rs-file-cell-template [file]=\"file\"></rs-file-cell-template>\r\n    </ng-container>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'userCellTemplate'\">\r\n    <ng-container *ngFor=\"let user of getOriginalValue(cellInfo, 'userInfo')\">\r\n      <rs-user-info-template [uid]=\"user\" [cellInfo]=\"cellInfo\"></rs-user-info-template>\r\n    </ng-container>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'unitCellTemplate'\">\r\n    <ng-container *ngFor=\"let unit of getOriginalValue(cellInfo, 'unitInfo')\">\r\n      <rs-unit-info-template [uid]=\"unit\" [cellInfo]=\"cellInfo\"></rs-unit-info-template>\r\n    </ng-container>\r\n  </div>\r\n</dx-data-grid>\r\n", styles: [":host{display:flex;flex-flow:column nowrap}:host dx-data-grid{flex:auto;height:0}\n"] }]
+            args: [{ selector: 'rs-data-grid', providers: [DataGridService], template: "<dx-data-grid [showBorders]=\"true\"\r\n              [showRowLines]=\"true\"\r\n              [hoverStateEnabled]=\"true\"\r\n              [rowAlternationEnabled]=\"true\"\r\n              [columnAutoWidth]=\"true\"\r\n              [allowColumnResizing]=\"true\"\r\n              columnResizingMode=\"widget\"\r\n              dateSerializationFormat=\"yyyy/MM/dd HH:mm:ss\"\r\n              [syncLookupFilterValues]=\"false\"\r\n              [dataSource]=\"dataSource\"\r\n              [columns]=\"columns\"\r\n              [height]=\"height\"\r\n              [keyExpr]=\"keyExpr\"\r\n              [selectedRowKeys]=\"selectedRowKeys\"\r\n              (selectedRowKeysChange)=\"selectedRowKeysChange.emit($event)\"\r\n              (onCellPrepared)=\"onCellPrepared.emit($event)\"\r\n              (onContentReady)=\"onContentReady.emit($event)\"\r\n              (onEditorPreparing)=\"onDxDataGridEditorPreparing($event)\"\r\n              (onRowClick)=\"onRowClick.emit($event)\"\r\n              (onRowDblClick)=\"onRowDblClick.emit($event)\"\r\n              (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\r\n  <dxo-sorting mode=\"multiple\"></dxo-sorting>\r\n  <dxo-selection [mode]=\"selectionMode\" selectAllMode=\"page\" showCheckBoxesMode=\"always\"></dxo-selection>\r\n  <dxo-header-filter [visible]=\"!onlyFrontEnd\">\r\n    <dxo-search [enabled]=\"true\"></dxo-search>\r\n    <dxo-texts [ok]=\"'\u786E\u5B9A'\"></dxo-texts>\r\n  </dxo-header-filter>\r\n  <dxo-filter-row [visible]=\"true\"></dxo-filter-row>\r\n  <dxo-remote-operations [filtering]=\"!onlyFrontEnd\"\r\n                         [sorting]=\"!onlyFrontEnd\"\r\n                         [paging]=\"!onlyFrontEnd\">\r\n  </dxo-remote-operations>\r\n  <dxo-paging [enabled]=\"!disablePage\" [pageSize]=\"15\"></dxo-paging>\r\n  <dxo-pager [visible]=\"!disablePage\"\r\n             [showInfo]=\"true\"\r\n             infoText=\"\u7B2C{0}\u9875\uFF0C\u5171{1}\u9875\uFF08\u5171{2}\u4E2A\u9879\u76EE\uFF09\"\r\n             [showPageSizeSelector]=\"true\"\r\n             [allowedPageSizes]=\"[15, 30, 50]\"\r\n  ></dxo-pager>\r\n  <dxo-scrolling showScrollbar=\"always\"></dxo-scrolling>\r\n  <div *dxTemplate=\"let cellInfo of 'rowIndexTemplate'\">\r\n    {{ cellInfo.rowIndex + 1 }}\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'instanceLinkTemplate'\">\r\n    <rs-instance-link-template [tenant]=\"tenant\"\r\n                               [className]=\"className\"\r\n                               [oid]=\"cellInfo.data.oid\"\r\n                               [instanceLinkType]=\"instanceLinkType\"\r\n                               [drawerViewContainerRef]=\"drawerInstanceLinkViewContainerRef\"\r\n                               [drawerSize]=\"drawerInstanceLinkSize\"\r\n                               [drawerFormTemplate]=\"drawerInstanceLinkFormTemplate\">\r\n    </rs-instance-link-template>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'rowButtonsTemplate'\">\r\n    <ng-container [ngTemplateOutlet]=\"rowButtonsTemplate.templateRef\"\r\n                  [ngTemplateOutletContext]=\"{$implicit: cellInfo, cellTemplateLoaded$: service.cellTemplateLoaded$}\"></ng-container>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'multipleValueCellTemplate'\">\r\n    <div [innerHTML]=\"convertMultipleValueCellText(cellInfo)\"></div>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'textCellTemplate'\">\r\n    <div #textDiv style=\"text-overflow: ellipsis; overflow: hidden; cursor: pointer;\">{{ cellInfo.value }}</div>\r\n    <dx-tooltip [target]=\"textDiv\"\r\n                [position]=\"'top'\"\r\n                [showEvent]=\"'click'\">\r\n      <div *dxTemplate=\"let data of 'content'\">\r\n        <p style=\"max-width: 320px; text-align: left; white-space: normal;\" [innerText]=\"cellInfo.value\"></p>\r\n      </div>\r\n    </dx-tooltip>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'fileCellTemplate'\">\r\n    <ng-container *ngFor=\"let file of cellInfo.value\">\r\n      <rs-file-cell-template [file]=\"file\"></rs-file-cell-template>\r\n    </ng-container>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'userCellTemplate'\">\r\n    <ng-container *ngFor=\"let user of getOriginalValue(cellInfo, 'userInfo')\">\r\n      <rs-user-info-template [uid]=\"user\" [cellInfo]=\"cellInfo\"></rs-user-info-template>\r\n    </ng-container>\r\n  </div>\r\n  <div *dxTemplate=\"let cellInfo of 'unitCellTemplate'\">\r\n    <ng-container *ngFor=\"let unit of getOriginalValue(cellInfo, 'unitInfo')\">\r\n      <rs-unit-info-template [uid]=\"unit\" [cellInfo]=\"cellInfo\"></rs-unit-info-template>\r\n    </ng-container>\r\n  </div>\r\n</dx-data-grid>\r\n", styles: [":host{display:flex;flex-flow:column nowrap}:host dx-data-grid{flex:auto;height:0}\n"] }]
         }], ctorParameters: function () { return [{ type: DataGridFactory }, { type: DataGridService }, { type: i0.ViewContainerRef }]; }, propDecorators: { tenant: [{
                 type: Input
             }], className: [{
@@ -3300,6 +3380,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 type: Input
             }], drawerInstanceLinkViewContainerRef: [{
                 type: Input
+            }], drawerInstanceLinkSize: [{
+                type: Input
             }], drawerInstanceLinkFormTemplate: [{
                 type: Input
             }], onCellPrepared: [{
@@ -3464,7 +3546,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", showHelp: "showHelp", multipleRow: "multipleRow", keyPlaceholder: "keyPlaceholder", valuePlaceholder: "valuePlaceholder", params: "params", required: "required", readonly: "readonly" }, queries: [{ propertyName: "tooltipContentTemplate", first: true, predicate: TooltipContentTemplateDirective, descendants: true }], ngImport: i0, template: "<div class=\"dx-field\">\n  <div class=\"dx-field-label\">\n    <span>{{ label }}</span>\n    <span *ngIf=\"required\" class=\"required-mark\">&nbsp;*</span>\n    <i *ngIf=\"showHelp\" #dynamicParamsSpan class=\"coast-icon-help cursor-pointer\">\n      <dx-tooltip [target]=\"dynamicParamsSpan\"\n                  [position]=\"'top'\"\n                  [showEvent]=\"'mouseover'\"\n                  [hideEvent]=\"'mouseout'\">\n        <div *dxTemplate=\"let data of 'content'\"\n             style=\"display: flex; flex-flow: column nowrap;align-items: flex-start;\">\n          <ng-container [ngTemplateOutlet]=\"tooltipContentTemplate.templateRef\"></ng-container>\n        </div>\n      </dx-tooltip>\n    </i>\n    <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-add\" (onClick)=\"add()\"\n               [disabled]=\"readonly\"></dx-button>\n  </div>\n  <div class=\"dx-field-value\">\n    <div *ngFor=\"let param of params; let index = index\" class=\"param\">\n      <div class=\"param-entry\" [ngStyle]=\" { flexDirection : multipleRow ? 'column' : 'row' } \">\n        <dx-text-box [placeholder]=\"keyPlaceholder\" [(value)]=\"param.name\" [disabled]=\"readonly\"></dx-text-box>\n        <dx-text-box [placeholder]=\"valuePlaceholder\" [(value)]=\"param.value\" [disabled]=\"readonly\"></dx-text-box>\n      </div>\n      <div class=\"param-operation\">\n        <dx-button type=\"danger\" stylingMode=\"text\" icon=\"coast-icon coast-icon-close\"\n                   (onClick)=\"delete(index)\" [disabled]=\"readonly\"></dx-button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host .dx-field .dx-field-label{display:flex;align-items:center}:host .dx-field .dx-field-value .param{margin-bottom:4px;display:flex;flex-flow:row nowrap}:host .dx-field .dx-field-value .param .param-entry{flex:1;display:flex;flex-wrap:nowrap}:host .dx-field .dx-field-value .param .param-entry dx-text-box{flex:1}:host .dx-field .dx-field-value .param .param-operation{flex:none;display:flex;flex-flow:row nowrap}:host .dx-field .dx-field-value .param .param-operation dx-button{flex:none}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i4.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i4$1.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i5.DxTooltipComponent, selector: "dx-tooltip", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showEvent", "target", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showEventChange", "targetChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
+DynamicParamsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DynamicParamsComponent, selector: "rs-dynamic-params", inputs: { label: "label", showHelp: "showHelp", multipleRow: "multipleRow", keyPlaceholder: "keyPlaceholder", valuePlaceholder: "valuePlaceholder", params: "params", required: "required", readonly: "readonly" }, queries: [{ propertyName: "tooltipContentTemplate", first: true, predicate: TooltipContentTemplateDirective, descendants: true }], ngImport: i0, template: "<div class=\"dx-field\">\n  <div class=\"dx-field-label\">\n    <span>{{ label }}</span>\n    <span *ngIf=\"required\" class=\"required-mark\">&nbsp;*</span>\n    <i *ngIf=\"showHelp\" #dynamicParamsSpan class=\"coast-icon-help cursor-pointer\">\n      <dx-tooltip [target]=\"dynamicParamsSpan\"\n                  [position]=\"'top'\"\n                  [showEvent]=\"'mouseover'\"\n                  [hideEvent]=\"'mouseout'\">\n        <div *dxTemplate=\"let data of 'content'\"\n             style=\"display: flex; flex-flow: column nowrap;align-items: flex-start;\">\n          <ng-container [ngTemplateOutlet]=\"tooltipContentTemplate.templateRef\"></ng-container>\n        </div>\n      </dx-tooltip>\n    </i>\n    <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-add\" (onClick)=\"add()\"\n               [disabled]=\"readonly\"></dx-button>\n  </div>\n  <div class=\"dx-field-value\">\n    <div *ngFor=\"let param of params; let index = index\" class=\"param\">\n      <div class=\"param-entry\" [ngStyle]=\" { flexDirection : multipleRow ? 'column' : 'row' } \">\n        <dx-text-box [placeholder]=\"keyPlaceholder\" [(value)]=\"param.name\" [disabled]=\"readonly\"></dx-text-box>\n        <dx-text-box [placeholder]=\"valuePlaceholder\" [(value)]=\"param.value\" [disabled]=\"readonly\"></dx-text-box>\n      </div>\n      <div class=\"param-operation\">\n        <dx-button type=\"danger\" stylingMode=\"text\" icon=\"coast-icon coast-icon-close\"\n                   (onClick)=\"delete(index)\" [disabled]=\"readonly\"></dx-button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host .dx-field .dx-field-label{display:flex;align-items:center}:host .dx-field .dx-field-value .param{margin-bottom:4px;display:flex;flex-flow:row nowrap}:host .dx-field .dx-field-value .param .param-entry{flex:1;display:flex;flex-wrap:nowrap}:host .dx-field .dx-field-value .param .param-entry dx-text-box{flex:1}:host .dx-field .dx-field-value .param .param-operation{flex:none;display:flex;flex-flow:row nowrap}:host .dx-field .dx-field-value .param .param-operation dx-button{flex:none}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$1.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i3.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i5.DxTooltipComponent, selector: "dx-tooltip", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showEvent", "target", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showEventChange", "targetChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DynamicParamsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rs-dynamic-params', template: "<div class=\"dx-field\">\n  <div class=\"dx-field-label\">\n    <span>{{ label }}</span>\n    <span *ngIf=\"required\" class=\"required-mark\">&nbsp;*</span>\n    <i *ngIf=\"showHelp\" #dynamicParamsSpan class=\"coast-icon-help cursor-pointer\">\n      <dx-tooltip [target]=\"dynamicParamsSpan\"\n                  [position]=\"'top'\"\n                  [showEvent]=\"'mouseover'\"\n                  [hideEvent]=\"'mouseout'\">\n        <div *dxTemplate=\"let data of 'content'\"\n             style=\"display: flex; flex-flow: column nowrap;align-items: flex-start;\">\n          <ng-container [ngTemplateOutlet]=\"tooltipContentTemplate.templateRef\"></ng-container>\n        </div>\n      </dx-tooltip>\n    </i>\n    <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-add\" (onClick)=\"add()\"\n               [disabled]=\"readonly\"></dx-button>\n  </div>\n  <div class=\"dx-field-value\">\n    <div *ngFor=\"let param of params; let index = index\" class=\"param\">\n      <div class=\"param-entry\" [ngStyle]=\" { flexDirection : multipleRow ? 'column' : 'row' } \">\n        <dx-text-box [placeholder]=\"keyPlaceholder\" [(value)]=\"param.name\" [disabled]=\"readonly\"></dx-text-box>\n        <dx-text-box [placeholder]=\"valuePlaceholder\" [(value)]=\"param.value\" [disabled]=\"readonly\"></dx-text-box>\n      </div>\n      <div class=\"param-operation\">\n        <dx-button type=\"danger\" stylingMode=\"text\" icon=\"coast-icon coast-icon-close\"\n                   (onClick)=\"delete(index)\" [disabled]=\"readonly\"></dx-button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host .dx-field .dx-field-label{display:flex;align-items:center}:host .dx-field .dx-field-value .param{margin-bottom:4px;display:flex;flex-flow:row nowrap}:host .dx-field .dx-field-value .param .param-entry{flex:1;display:flex;flex-wrap:nowrap}:host .dx-field .dx-field-value .param .param-entry dx-text-box{flex:1}:host .dx-field .dx-field-value .param .param-operation{flex:none;display:flex;flex-flow:row nowrap}:host .dx-field .dx-field-value .param .param-operation dx-button{flex:none}\n"] }]
@@ -3625,7 +3707,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: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i4.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i4$2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "enableBodyScroll", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
+IconSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: IconSelectorComponent, selector: "rs-icon-selector", inputs: { target: "target" }, outputs: { select: "select" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["iconSelector"], descendants: true, static: true }, { propertyName: "iconZoomOut", first: true, predicate: ["iconZoomOut"], descendants: true, static: true }], ngImport: i0, template: "<dx-popover #iconSelector\n            maxWidth=\"280\"\n            maxHeight=\"280\"\n            [target]=\"target\"\n            [showEvent]=\"{name: 'click'}\">\n  <div *dxTemplate=\"let data of 'content'\">\n    <ng-container *ngFor=\"let icon of iconList; let index=index\">\n      <dx-button [icon]=\"'coast-icon ' + icon\" (onClick)=\"selectIcon(icon)\"\n                 (mouseenter)=\"zoomOut($event, icon)\" (mouseleave)=\"iconZoomOut.instance.hide()\"></dx-button>\n    </ng-container>\n  </div>\n</dx-popover>\n<dx-popover #iconZoomOut height=\"72px\" [enableBodyScroll]=\"false\">\n  <div *dxTemplate=\"let data of 'content'\"\n       style=\"display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;\">\n    <i [class]=\"hoverIcon\" style=\"font-size: 36px;\"></i>\n    <span>{{hoverIcon?.substring(11)}}</span>\n  </div>\n</dx-popover>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i3.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i4.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" }]
@@ -3665,11 +3747,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
         }] });
 
 class ModalComponent {
-    constructor(elementRef, changeDetectorRef) {
+    constructor(elementRef) {
         this.elementRef = elementRef;
-        this.changeDetectorRef = changeDetectorRef;
         this.size = 'default';
-        this._width = 480;
+        this._width = '480px';
         this.movable = false;
         this.topStart = 0;
         this.leftStart = 0;
@@ -3684,10 +3765,16 @@ class ModalComponent {
             this.modalElementRef.nativeElement.style.boxShadow = 'none';
         }
         else {
-            if (this.size === 'large') {
-                this._width = 960;
+            if (this.size === 'default') {
+                this._width = '480px';
+            }
+            else if (this.size === 'large') {
+                this._width = '960px';
+            }
+            else {
+                this._width = this.size;
             }
-            this.modalElementRef.nativeElement.style.width = this._width + 'px';
+            this.modalElementRef.nativeElement.style.width = this._width;
             this.modalElementRef.nativeElement.style.top = '24px';
             this.modalElementRef.nativeElement.style.left =
                 (this.elementRef.nativeElement.parentElement.offsetWidth - this.modalElementRef.nativeElement.offsetWidth) / 2 + 'px';
@@ -3768,10 +3855,10 @@ class ModalComponent {
         let currentTop = $event.clientY - this.topStart;
         let currentLeft = $event.clientX - this.leftStart;
         currentTop = currentTop < 0 ? 0 : currentTop;
-        const maxTop = element.parentElement.offsetHeight - element.offsetHeight;
+        const maxTop = element.parentElement.offsetHeight - element.offsetHeight - 1;
         currentTop = currentTop > maxTop ? maxTop : currentTop;
         currentLeft = currentLeft < 0 ? 0 : currentLeft;
-        const maxLeft = element.parentElement.offsetWidth - element.offsetWidth;
+        const maxLeft = element.parentElement.offsetWidth - element.offsetWidth - 1;
         currentLeft = currentLeft > maxLeft ? maxLeft : currentLeft;
         element.style.top = currentTop + 'px';
         element.style.left = currentLeft + 'px';
@@ -3780,15 +3867,14 @@ class ModalComponent {
         this.modalElementRef.nativeElement.style.top = '24px';
         this.modalElementRef.nativeElement.style.left =
             (this.elementRef.nativeElement.parentElement.offsetWidth - this.modalElementRef.nativeElement.offsetWidth) / 2 + 'px';
-        this.changeDetectorRef.detectChanges();
     }
 }
-ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ModalComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ModalComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
 ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ModalComponent, selector: "rs-modal", host: { listeners: { "document:mouseup": "onMouseup($event)", "document:mousemove": "onMousemove($event)", "window:resize": "onWindowResize($event)" } }, viewQueries: [{ propertyName: "modalElementRef", first: true, predicate: ["modal"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"modal-backdrop\">\r\n  <div #modal class=\"modal\" [ngStyle]=\"resolveModalPosition()\">\r\n    <div class=\"modal-header\" (mousedown)=\"onMousedown($event)\">\r\n      <div class=\"modal-title\">{{title}}</div>\r\n      <i class=\"icon-close\" (click)=\"hide()\"></i>\r\n    </div>\r\n    <div class=\"modal-content\">\r\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\r\n    </div>\r\n    <div *ngIf=\"footerTemplate\" class=\"modal-footer\">\r\n      <ng-template [ngTemplateOutlet]=\"footerTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: footerTemplateContext}\"></ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host .modal-backdrop{position:absolute;inset:0;z-index:calc(var(--coast-z-index-modal, 1050) - 1)}:host .modal-backdrop .modal{position:absolute;z-index:var(--coast-z-index-modal, 1050);background-color:var(--coast-base-bg-color, #fff);border-radius:4px;box-shadow:0 10px 24px #252b3a3d;display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-header{flex:0 0 36px;border-bottom:1px solid var(--coast-border-color, #dddddd)}:host .modal-backdrop .modal .modal-header .modal-title{padding:12px 24px;font-size:14px;font-weight:700}:host .modal-backdrop .modal .modal-header i{position:absolute;top:12px;right:12px;padding:4px;font-size:14px}:host .modal-backdrop .modal .modal-header i:hover{cursor:pointer;color:var(--coast-danger-color, #d9534f);background-color:var(--coast-global-bg-color, #f6f6f8)}:host .modal-backdrop .modal .modal-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-footer{flex:none;padding-top:12px;border-top:1px solid var(--coast-border-color, #dddddd)}\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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rs-modal', template: "<div class=\"modal-backdrop\">\r\n  <div #modal class=\"modal\" [ngStyle]=\"resolveModalPosition()\">\r\n    <div class=\"modal-header\" (mousedown)=\"onMousedown($event)\">\r\n      <div class=\"modal-title\">{{title}}</div>\r\n      <i class=\"icon-close\" (click)=\"hide()\"></i>\r\n    </div>\r\n    <div class=\"modal-content\">\r\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\r\n    </div>\r\n    <div *ngIf=\"footerTemplate\" class=\"modal-footer\">\r\n      <ng-template [ngTemplateOutlet]=\"footerTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: footerTemplateContext}\"></ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host .modal-backdrop{position:absolute;inset:0;z-index:calc(var(--coast-z-index-modal, 1050) - 1)}:host .modal-backdrop .modal{position:absolute;z-index:var(--coast-z-index-modal, 1050);background-color:var(--coast-base-bg-color, #fff);border-radius:4px;box-shadow:0 10px 24px #252b3a3d;display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-header{flex:0 0 36px;border-bottom:1px solid var(--coast-border-color, #dddddd)}:host .modal-backdrop .modal .modal-header .modal-title{padding:12px 24px;font-size:14px;font-weight:700}:host .modal-backdrop .modal .modal-header i{position:absolute;top:12px;right:12px;padding:4px;font-size:14px}:host .modal-backdrop .modal .modal-header i:hover{cursor:pointer;color:var(--coast-danger-color, #d9534f);background-color:var(--coast-global-bg-color, #f6f6f8)}:host .modal-backdrop .modal .modal-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-footer{flex:none;padding-top:12px;border-top:1px solid var(--coast-border-color, #dddddd)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { modalElementRef: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { modalElementRef: [{
                 type: ViewChild,
                 args: ['modal', { static: true }]
             }], onMouseup: [{