ngx-rs-ant 1.4.5 → 1.4.7

package/fesm2015/ngx-rs-ant.mjs

@@ -91,10 +91,10 @@ class DividerComponent {
     }
 }
 DividerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DividerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DividerComponent, selector: "rs-divider", inputs: { direction: "direction", targetElement: "targetElement" }, outputs: { dividerClick: "dividerClick" }, host: { listeners: { "click": "onClick()" }, properties: { "style": "this._style" } }, ngImport: i0, template: "<div class=\"divider-image\"></div>\n<rs-divider-line [targetElement]=\"targetElement\" [direction]=\"direction\"></rs-divider-line>\n", styles: [":host{position:absolute;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;width:24px;height:24px;background-color:#fff;border-radius:12px;cursor:pointer;pointer-events:all}:host .divider-image{width:12px;height:12px;background-size:contain;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAACO0lEQVRIDa2Uy6tNURzHN7cwMUAmHncot0QeV5QiBgZKmWEgzDDx+ANu5soMcUkxIY+iEFIKEZnIyMC9GZAMrke6hXt9Pvus1VnntPbZ53B/9dnrt36P7zpr7bVPUTRtD+5j+Arv4QwshDpbTIG1o2CvGmq12CVmk/ADnsGnMHccgCpbRiLWjuA/BTXUUrM0VzNwD+aVkcbjIMNveJnEUrePyWuYgP1JYi6+WmqWO3FLrpqKMy3tHE8LtzemLc99ITfcEm1MXERNtYsxcGs520nQBV61JWcyHw253W25OFVzbDqPj1D1MheF6tWM24LvcAD6w7yqdwF5tYvT4K90y6m5zQ/wE37BC9Bmw2f4Ah6DNdamFo/vlEHP3pvwB87CLjgGNrrwEbgY/K2MQ8E/zHg0+NbaY68aaqmpdmlLeT4HBSPf8RXQloA3ylvzDTx/34OmsLWxz9Hdqtlivo/l4NXy1syB1C4ziSK547THXjXU6tk20uECnn1fz91dNJynJu5gUxf1PZV4nr6DdzABj2BK7Rpq/votcDX4GxinxNagovjDoOZLdBcPwvy/h/souMDaROlGiK1PYv/kbg5C19u6V4b43bZ4z1M/GF/uQKbzFjF3NpjJdRXaEQQuVFQr7AK3K/Idw36Jb2Ec+jtU3iHnIqs61GRTe4naeDKbbQbXhbqbzVC9N4OSEfAPbD7UmbfMa7uirjDmD+H464/HQM3oB2f9lVxd7l9vFoVv4ESuIRN7QkzxaZlc8RcdnI7tMHZBlAAAAABJRU5ErkJggg==)}:host:hover{background-color:var(--devui-brand, #5e7ce0)}\n"], dependencies: [{ kind: "component", type: DividerLineComponent, selector: "rs-divider-line", inputs: ["direction", "targetElement"] }] });
+DividerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DividerComponent, selector: "rs-divider", inputs: { direction: "direction", targetElement: "targetElement" }, outputs: { dividerClick: "dividerClick" }, host: { listeners: { "click": "onClick()" }, properties: { "style": "this._style" } }, ngImport: i0, template: "<div class=\"divider-image\"></div>\r\n<rs-divider-line [targetElement]=\"targetElement\" [direction]=\"direction\"></rs-divider-line>\r\n", styles: [":host{position:absolute;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;width:24px;height:24px;background-color:#fff;border-radius:12px;cursor:pointer;pointer-events:all}:host .divider-image{width:12px;height:12px;background-size:contain;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAACO0lEQVRIDa2Uy6tNURzHN7cwMUAmHncot0QeV5QiBgZKmWEgzDDx+ANu5soMcUkxIY+iEFIKEZnIyMC9GZAMrke6hXt9Pvus1VnntPbZ53B/9dnrt36P7zpr7bVPUTRtD+5j+Arv4QwshDpbTIG1o2CvGmq12CVmk/ADnsGnMHccgCpbRiLWjuA/BTXUUrM0VzNwD+aVkcbjIMNveJnEUrePyWuYgP1JYi6+WmqWO3FLrpqKMy3tHE8LtzemLc99ITfcEm1MXERNtYsxcGs520nQBV61JWcyHw253W25OFVzbDqPj1D1MheF6tWM24LvcAD6w7yqdwF5tYvT4K90y6m5zQ/wE37BC9Bmw2f4Ah6DNdamFo/vlEHP3pvwB87CLjgGNrrwEbgY/K2MQ8E/zHg0+NbaY68aaqmpdmlLeT4HBSPf8RXQloA3ylvzDTx/34OmsLWxz9Hdqtlivo/l4NXy1syB1C4ziSK547THXjXU6tk20uECnn1fz91dNJynJu5gUxf1PZV4nr6DdzABj2BK7Rpq/votcDX4GxinxNagovjDoOZLdBcPwvy/h/souMDaROlGiK1PYv/kbg5C19u6V4b43bZ4z1M/GF/uQKbzFjF3NpjJdRXaEQQuVFQr7AK3K/Idw36Jb2Ec+jtU3iHnIqs61GRTe4naeDKbbQbXhbqbzVC9N4OSEfAPbD7UmbfMa7uirjDmD+H464/HQM3oB2f9lVxd7l9vFoVv4ESuIRN7QkzxaZlc8RcdnI7tMHZBlAAAAABJRU5ErkJggg==)}:host:hover{background-color:var(--devui-brand, #5e7ce0)}\n"], dependencies: [{ kind: "component", type: DividerLineComponent, selector: "rs-divider-line", inputs: ["direction", "targetElement"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DividerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-divider', template: "<div class=\"divider-image\"></div>\n<rs-divider-line [targetElement]=\"targetElement\" [direction]=\"direction\"></rs-divider-line>\n", styles: [":host{position:absolute;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;width:24px;height:24px;background-color:#fff;border-radius:12px;cursor:pointer;pointer-events:all}:host .divider-image{width:12px;height:12px;background-size:contain;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAACO0lEQVRIDa2Uy6tNURzHN7cwMUAmHncot0QeV5QiBgZKmWEgzDDx+ANu5soMcUkxIY+iEFIKEZnIyMC9GZAMrke6hXt9Pvus1VnntPbZ53B/9dnrt36P7zpr7bVPUTRtD+5j+Arv4QwshDpbTIG1o2CvGmq12CVmk/ADnsGnMHccgCpbRiLWjuA/BTXUUrM0VzNwD+aVkcbjIMNveJnEUrePyWuYgP1JYi6+WmqWO3FLrpqKMy3tHE8LtzemLc99ITfcEm1MXERNtYsxcGs520nQBV61JWcyHw253W25OFVzbDqPj1D1MheF6tWM24LvcAD6w7yqdwF5tYvT4K90y6m5zQ/wE37BC9Bmw2f4Ah6DNdamFo/vlEHP3pvwB87CLjgGNrrwEbgY/K2MQ8E/zHg0+NbaY68aaqmpdmlLeT4HBSPf8RXQloA3ylvzDTx/34OmsLWxz9Hdqtlivo/l4NXy1syB1C4ziSK547THXjXU6tk20uECnn1fz91dNJynJu5gUxf1PZV4nr6DdzABj2BK7Rpq/votcDX4GxinxNagovjDoOZLdBcPwvy/h/souMDaROlGiK1PYv/kbg5C19u6V4b43bZ4z1M/GF/uQKbzFjF3NpjJdRXaEQQuVFQr7AK3K/Idw36Jb2Ec+jtU3iHnIqs61GRTe4naeDKbbQbXhbqbzVC9N4OSEfAPbD7UmbfMa7uirjDmD+H464/HQM3oB2f9lVxd7l9vFoVv4ESuIRN7QkzxaZlc8RcdnI7tMHZBlAAAAABJRU5ErkJggg==)}:host:hover{background-color:var(--devui-brand, #5e7ce0)}\n"] }]
+            args: [{ selector: 'rs-divider', template: "<div class=\"divider-image\"></div>\r\n<rs-divider-line [targetElement]=\"targetElement\" [direction]=\"direction\"></rs-divider-line>\r\n", styles: [":host{position:absolute;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;width:24px;height:24px;background-color:#fff;border-radius:12px;cursor:pointer;pointer-events:all}:host .divider-image{width:12px;height:12px;background-size:contain;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAACO0lEQVRIDa2Uy6tNURzHN7cwMUAmHncot0QeV5QiBgZKmWEgzDDx+ANu5soMcUkxIY+iEFIKEZnIyMC9GZAMrke6hXt9Pvus1VnntPbZ53B/9dnrt36P7zpr7bVPUTRtD+5j+Arv4QwshDpbTIG1o2CvGmq12CVmk/ADnsGnMHccgCpbRiLWjuA/BTXUUrM0VzNwD+aVkcbjIMNveJnEUrePyWuYgP1JYi6+WmqWO3FLrpqKMy3tHE8LtzemLc99ITfcEm1MXERNtYsxcGs520nQBV61JWcyHw253W25OFVzbDqPj1D1MheF6tWM24LvcAD6w7yqdwF5tYvT4K90y6m5zQ/wE37BC9Bmw2f4Ah6DNdamFo/vlEHP3pvwB87CLjgGNrrwEbgY/K2MQ8E/zHg0+NbaY68aaqmpdmlLeT4HBSPf8RXQloA3ylvzDTx/34OmsLWxz9Hdqtlivo/l4NXy1syB1C4ziSK547THXjXU6tk20uECnn1fz91dNJynJu5gUxf1PZV4nr6DdzABj2BK7Rpq/votcDX4GxinxNagovjDoOZLdBcPwvy/h/souMDaROlGiK1PYv/kbg5C19u6V4b43bZ4z1M/GF/uQKbzFjF3NpjJdRXaEQQuVFQr7AK3K/Idw36Jb2Ec+jtU3iHnIqs61GRTe4naeDKbbQbXhbqbzVC9N4OSEfAPbD7UmbfMa7uirjDmD+H464/HQM3oB2f9lVxd7l9vFoVv4ESuIRN7QkzxaZlc8RcdnI7tMHZBlAAAAABJRU5ErkJggg==)}:host:hover{background-color:var(--devui-brand, #5e7ce0)}\n"] }]
         }], propDecorators: { direction: [{
                 type: Input
             }], targetElement: [{
@@ -173,10 +173,10 @@ class PluginHoverComponent {
     }
 }
 PluginHoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PluginHoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PluginHoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: PluginHoverComponent, selector: "rs-plugin-hover", host: { properties: { "style": "this._style" } }, ngImport: i0, template: "<div class=\"hover-title\">{{name}}</div>\n", styles: [":host{display:none;position:absolute;border:1px dashed var(--coast-default-color, #337ab7);pointer-events:none}:host .hover-title{color:var(--coast-default-color, #337ab7);position:absolute;top:-18px;left:0}.plugin-active>:host{display:none!important}.plugin-hover>:host{display:block}\n"] });
+PluginHoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: PluginHoverComponent, selector: "rs-plugin-hover", host: { properties: { "style": "this._style" } }, ngImport: i0, template: "<div class=\"hover-title\">{{name}}</div>\r\n", styles: [":host{display:none;position:absolute;border:1px dashed var(--coast-default-color, #337ab7);pointer-events:none}:host .hover-title{color:var(--coast-default-color, #337ab7);position:absolute;top:-18px;left:0}.plugin-active>:host{display:none!important}.plugin-hover>:host{display:block}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PluginHoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-plugin-hover', template: "<div class=\"hover-title\">{{name}}</div>\n", styles: [":host{display:none;position:absolute;border:1px dashed var(--coast-default-color, #337ab7);pointer-events:none}:host .hover-title{color:var(--coast-default-color, #337ab7);position:absolute;top:-18px;left:0}.plugin-active>:host{display:none!important}.plugin-hover>:host{display:block}\n"] }]
+            args: [{ selector: 'rs-plugin-hover', template: "<div class=\"hover-title\">{{name}}</div>\r\n", styles: [":host{display:none;position:absolute;border:1px dashed var(--coast-default-color, #337ab7);pointer-events:none}:host .hover-title{color:var(--coast-default-color, #337ab7);position:absolute;top:-18px;left:0}.plugin-active>:host{display:none!important}.plugin-hover>:host{display:block}\n"] }]
         }], propDecorators: { _style: [{
                 type: HostBinding,
                 args: ['style']
@@ -185,19 +185,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
 class PluginNotFoundComponent {
 }
 PluginNotFoundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PluginNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PluginNotFoundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: PluginNotFoundComponent, selector: "rs-plugin-not-found", ngImport: i0, template: "<div>\n  <span>\u7EC4\u4EF6\u52A0\u8F7D\u5931\u8D25</span>\n</div>\n", styles: [":host{flex:1;margin:16px;border:1px solid var(--devui-dividing-line, #f2f2f3);display:flex;flex-flow:row nowrap;justify-content:center;pointer-events:all}:host div{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{color:var(--devui-danger, #f66f6a);text-align:center;-webkit-user-select:none;user-select:none}:host div.active{background-color:var(--devui-waiting, #beccfa)}:host.plugin-hover>div{pointer-events:none}\n"] });
+PluginNotFoundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: PluginNotFoundComponent, selector: "rs-plugin-not-found", ngImport: i0, template: "<div>\r\n  <span>\u7EC4\u4EF6\u52A0\u8F7D\u5931\u8D25</span>\r\n</div>\r\n", styles: [":host{flex:1;margin:16px;border:1px solid var(--devui-dividing-line, #f2f2f3);display:flex;flex-flow:row nowrap;justify-content:center;pointer-events:all}:host div{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{color:var(--devui-danger, #f66f6a);text-align:center;-webkit-user-select:none;user-select:none}:host div.active{background-color:var(--devui-waiting, #beccfa)}:host.plugin-hover>div{pointer-events:none}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PluginNotFoundComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-plugin-not-found', template: "<div>\n  <span>\u7EC4\u4EF6\u52A0\u8F7D\u5931\u8D25</span>\n</div>\n", styles: [":host{flex:1;margin:16px;border:1px solid var(--devui-dividing-line, #f2f2f3);display:flex;flex-flow:row nowrap;justify-content:center;pointer-events:all}:host div{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{color:var(--devui-danger, #f66f6a);text-align:center;-webkit-user-select:none;user-select:none}:host div.active{background-color:var(--devui-waiting, #beccfa)}:host.plugin-hover>div{pointer-events:none}\n"] }]
+            args: [{ selector: 'rs-plugin-not-found', template: "<div>\r\n  <span>\u7EC4\u4EF6\u52A0\u8F7D\u5931\u8D25</span>\r\n</div>\r\n", styles: [":host{flex:1;margin:16px;border:1px solid var(--devui-dividing-line, #f2f2f3);display:flex;flex-flow:row nowrap;justify-content:center;pointer-events:all}:host div{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{color:var(--devui-danger, #f66f6a);text-align:center;-webkit-user-select:none;user-select:none}:host div.active{background-color:var(--devui-waiting, #beccfa)}:host.plugin-hover>div{pointer-events:none}\n"] }]
         }] });
 
 class ConfigBlankComponent {
 }
 ConfigBlankComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ConfigBlankComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ConfigBlankComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ConfigBlankComponent, selector: "rs-config-blank", ngImport: i0, template: "<div>\n  <span>\u65E0\u914D\u7F6E\u9879</span>\n</div>\n", styles: [":host{height:80px;margin:8px;display:flex;flex-flow:row nowrap;justify-content:center}:host div{flex:1;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}\n"] });
+ConfigBlankComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ConfigBlankComponent, selector: "rs-config-blank", ngImport: i0, template: "<div>\r\n  <span>\u65E0\u914D\u7F6E\u9879</span>\r\n</div>\r\n", styles: [":host{height:80px;margin:8px;display:flex;flex-flow:row nowrap;justify-content:center}:host div{flex:1;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ConfigBlankComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-config-blank', template: "<div>\n  <span>\u65E0\u914D\u7F6E\u9879</span>\n</div>\n", styles: [":host{height:80px;margin:8px;display:flex;flex-flow:row nowrap;justify-content:center}:host div{flex:1;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}\n"] }]
+            args: [{ selector: 'rs-config-blank', template: "<div>\r\n  <span>\u65E0\u914D\u7F6E\u9879</span>\r\n</div>\r\n", styles: [":host{height:80px;margin:8px;display:flex;flex-flow:row nowrap;justify-content:center}:host div{flex:1;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}\n"] }]
         }] });
 
 class StyleComponent {
@@ -238,19 +238,19 @@ class StyleComponent {
     }
 }
 StyleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: StyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StyleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: StyleComponent, selector: "rs-style", ngImport: i0, template: "<div class=\"config-item\">\n  <div class=\"item-title\">\u5BBD\u5EA6\u7C7B\u578B</div>\n  <div class=\"item-setting\">\n    <div class=\"card-style-radio\">\n      <div class=\"radio-value\" [ngClass]=\"!style.width || style.width === 'auto' ? 'active' : ''\"\n           (click)=\"select('width','auto')\">\n        <span>\u81EA\u9002\u5E94</span>\n      </div>\n      <div class=\"radio-value\" [ngClass]=\"style.width && style.width !== 'auto' ? 'active' : ''\"\n           (click)=\"select('width',240)\">\n        <span>\u56FA\u5B9A\u503C</span>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"config-item\">\n  <div class=\"item-title\">\u56FA\u5B9A\u5BBD\u5EA6</div>\n  <div class=\"item-setting\">\n    <dx-number-box [min]=\"0\"\n                   [showSpinButtons]=\"true\"\n                   [showClearButton]=\"true\"\n                   [(value)]=\"width\"\n                   (onValueChanged)=\"typing('width', $event.value)\"\n                   [readOnly]=\"style.width === 'auto'\">\n    </dx-number-box>\n  </div>\n</div>\n<div class=\"config-item\">\n  <div class=\"item-title\">\u9AD8\u5EA6\u7C7B\u578B</div>\n  <div class=\"item-setting\">\n    <div class=\"card-style-radio\">\n      <div class=\"radio-value\" [ngClass]=\"!style.height || style.height === 'auto' ? 'active' : ''\"\n           (click)=\"select('height','auto')\">\n        <span>\u81EA\u9002\u5E94</span>\n      </div>\n      <div class=\"radio-value\" [ngClass]=\"style.height && style.height !== 'auto' ? 'active' : ''\"\n           (click)=\"select('height',800)\">\n        <span>\u56FA\u5B9A\u503C</span>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"config-item\">\n  <div class=\"item-title\">\u56FA\u5B9A\u9AD8\u5EA6</div>\n  <div class=\"item-setting\">\n    <dx-number-box [min]=\"0\"\n                   [showSpinButtons]=\"true\"\n                   [showClearButton]=\"true\"\n                   [(value)]=\"height\"\n                   (onValueChanged)=\"typing('height', $event.value)\"\n                   [readOnly]=\"style.height === 'auto'\">\n    </dx-number-box>\n  </div>\n</div>\n", styles: [":host .config-item{display:flex;flex-flow:row nowrap;align-items:center;margin-bottom:8px}:host .config-item .item-title{flex:0 0 80px}:host .config-item .item-setting{flex:1;display:flex;flex-flow:row nowrap}:host .config-item .item-setting .card-style-radio{flex:1;display:flex;flex-flow:row nowrap;justify-content:stretch}:host .config-item .item-setting .card-style-radio .radio-value{flex:1;border:1px solid var(--devui-dividing-line, #f2f2f3);text-align:center;padding:4px;margin-left:-1px;cursor:pointer}:host .config-item .item-setting .card-style-radio .radio-value span{-webkit-user-select:none;user-select:none}:host .config-item .item-setting .card-style-radio .radio-value.active{color:var(--devui-brand, #5e7ce0);border:1px solid var(--devui-brand, #5e7ce0);z-index:1}:host .config-item .item-setting dx-number-box{flex:1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.DxNumberBoxComponent, selector: "dx-number-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "format", "height", "hint", "hoverStateEnabled", "inputAttr", "invalidValueMessage", "isValid", "label", "labelMode", "max", "min", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showSpinButtons", "step", "stylingMode", "tabIndex", "text", "useLargeSpinButtons", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "formatChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "invalidValueMessageChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "minChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showSpinButtonsChange", "stepChange", "stylingModeChange", "tabIndexChange", "textChange", "useLargeSpinButtonsChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }] });
+StyleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: StyleComponent, selector: "rs-style", ngImport: i0, template: "<div class=\"config-item\">\r\n  <div class=\"item-title\">\u5BBD\u5EA6\u7C7B\u578B</div>\r\n  <div class=\"item-setting\">\r\n    <div class=\"card-style-radio\">\r\n      <div class=\"radio-value\" [ngClass]=\"!style.width || style.width === 'auto' ? 'active' : ''\"\r\n           (click)=\"select('width','auto')\">\r\n        <span>\u81EA\u9002\u5E94</span>\r\n      </div>\r\n      <div class=\"radio-value\" [ngClass]=\"style.width && style.width !== 'auto' ? 'active' : ''\"\r\n           (click)=\"select('width',240)\">\r\n        <span>\u56FA\u5B9A\u503C</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"config-item\">\r\n  <div class=\"item-title\">\u56FA\u5B9A\u5BBD\u5EA6</div>\r\n  <div class=\"item-setting\">\r\n    <dx-number-box [min]=\"0\"\r\n                   [showSpinButtons]=\"true\"\r\n                   [showClearButton]=\"true\"\r\n                   [(value)]=\"width\"\r\n                   (onValueChanged)=\"typing('width', $event.value)\"\r\n                   [readOnly]=\"style.width === 'auto'\">\r\n    </dx-number-box>\r\n  </div>\r\n</div>\r\n<div class=\"config-item\">\r\n  <div class=\"item-title\">\u9AD8\u5EA6\u7C7B\u578B</div>\r\n  <div class=\"item-setting\">\r\n    <div class=\"card-style-radio\">\r\n      <div class=\"radio-value\" [ngClass]=\"!style.height || style.height === 'auto' ? 'active' : ''\"\r\n           (click)=\"select('height','auto')\">\r\n        <span>\u81EA\u9002\u5E94</span>\r\n      </div>\r\n      <div class=\"radio-value\" [ngClass]=\"style.height && style.height !== 'auto' ? 'active' : ''\"\r\n           (click)=\"select('height',800)\">\r\n        <span>\u56FA\u5B9A\u503C</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"config-item\">\r\n  <div class=\"item-title\">\u56FA\u5B9A\u9AD8\u5EA6</div>\r\n  <div class=\"item-setting\">\r\n    <dx-number-box [min]=\"0\"\r\n                   [showSpinButtons]=\"true\"\r\n                   [showClearButton]=\"true\"\r\n                   [(value)]=\"height\"\r\n                   (onValueChanged)=\"typing('height', $event.value)\"\r\n                   [readOnly]=\"style.height === 'auto'\">\r\n    </dx-number-box>\r\n  </div>\r\n</div>\r\n", styles: [":host .config-item{display:flex;flex-flow:row nowrap;align-items:center;margin-bottom:8px}:host .config-item .item-title{flex:0 0 80px}:host .config-item .item-setting{flex:1;display:flex;flex-flow:row nowrap}:host .config-item .item-setting .card-style-radio{flex:1;display:flex;flex-flow:row nowrap;justify-content:stretch}:host .config-item .item-setting .card-style-radio .radio-value{flex:1;border:1px solid var(--devui-dividing-line, #f2f2f3);text-align:center;padding:4px;margin-left:-1px;cursor:pointer}:host .config-item .item-setting .card-style-radio .radio-value span{-webkit-user-select:none;user-select:none}:host .config-item .item-setting .card-style-radio .radio-value.active{color:var(--devui-brand, #5e7ce0);border:1px solid var(--devui-brand, #5e7ce0);z-index:1}:host .config-item .item-setting dx-number-box{flex:1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.DxNumberBoxComponent, selector: "dx-number-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "format", "height", "hint", "hoverStateEnabled", "inputAttr", "invalidValueMessage", "isValid", "label", "labelMode", "max", "min", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showSpinButtons", "step", "stylingMode", "tabIndex", "text", "useLargeSpinButtons", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "formatChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "invalidValueMessageChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "minChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showSpinButtonsChange", "stepChange", "stylingModeChange", "tabIndexChange", "textChange", "useLargeSpinButtonsChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: StyleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-style', template: "<div class=\"config-item\">\n  <div class=\"item-title\">\u5BBD\u5EA6\u7C7B\u578B</div>\n  <div class=\"item-setting\">\n    <div class=\"card-style-radio\">\n      <div class=\"radio-value\" [ngClass]=\"!style.width || style.width === 'auto' ? 'active' : ''\"\n           (click)=\"select('width','auto')\">\n        <span>\u81EA\u9002\u5E94</span>\n      </div>\n      <div class=\"radio-value\" [ngClass]=\"style.width && style.width !== 'auto' ? 'active' : ''\"\n           (click)=\"select('width',240)\">\n        <span>\u56FA\u5B9A\u503C</span>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"config-item\">\n  <div class=\"item-title\">\u56FA\u5B9A\u5BBD\u5EA6</div>\n  <div class=\"item-setting\">\n    <dx-number-box [min]=\"0\"\n                   [showSpinButtons]=\"true\"\n                   [showClearButton]=\"true\"\n                   [(value)]=\"width\"\n                   (onValueChanged)=\"typing('width', $event.value)\"\n                   [readOnly]=\"style.width === 'auto'\">\n    </dx-number-box>\n  </div>\n</div>\n<div class=\"config-item\">\n  <div class=\"item-title\">\u9AD8\u5EA6\u7C7B\u578B</div>\n  <div class=\"item-setting\">\n    <div class=\"card-style-radio\">\n      <div class=\"radio-value\" [ngClass]=\"!style.height || style.height === 'auto' ? 'active' : ''\"\n           (click)=\"select('height','auto')\">\n        <span>\u81EA\u9002\u5E94</span>\n      </div>\n      <div class=\"radio-value\" [ngClass]=\"style.height && style.height !== 'auto' ? 'active' : ''\"\n           (click)=\"select('height',800)\">\n        <span>\u56FA\u5B9A\u503C</span>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"config-item\">\n  <div class=\"item-title\">\u56FA\u5B9A\u9AD8\u5EA6</div>\n  <div class=\"item-setting\">\n    <dx-number-box [min]=\"0\"\n                   [showSpinButtons]=\"true\"\n                   [showClearButton]=\"true\"\n                   [(value)]=\"height\"\n                   (onValueChanged)=\"typing('height', $event.value)\"\n                   [readOnly]=\"style.height === 'auto'\">\n    </dx-number-box>\n  </div>\n</div>\n", styles: [":host .config-item{display:flex;flex-flow:row nowrap;align-items:center;margin-bottom:8px}:host .config-item .item-title{flex:0 0 80px}:host .config-item .item-setting{flex:1;display:flex;flex-flow:row nowrap}:host .config-item .item-setting .card-style-radio{flex:1;display:flex;flex-flow:row nowrap;justify-content:stretch}:host .config-item .item-setting .card-style-radio .radio-value{flex:1;border:1px solid var(--devui-dividing-line, #f2f2f3);text-align:center;padding:4px;margin-left:-1px;cursor:pointer}:host .config-item .item-setting .card-style-radio .radio-value span{-webkit-user-select:none;user-select:none}:host .config-item .item-setting .card-style-radio .radio-value.active{color:var(--devui-brand, #5e7ce0);border:1px solid var(--devui-brand, #5e7ce0);z-index:1}:host .config-item .item-setting dx-number-box{flex:1}\n"] }]
+            args: [{ selector: 'rs-style', template: "<div class=\"config-item\">\r\n  <div class=\"item-title\">\u5BBD\u5EA6\u7C7B\u578B</div>\r\n  <div class=\"item-setting\">\r\n    <div class=\"card-style-radio\">\r\n      <div class=\"radio-value\" [ngClass]=\"!style.width || style.width === 'auto' ? 'active' : ''\"\r\n           (click)=\"select('width','auto')\">\r\n        <span>\u81EA\u9002\u5E94</span>\r\n      </div>\r\n      <div class=\"radio-value\" [ngClass]=\"style.width && style.width !== 'auto' ? 'active' : ''\"\r\n           (click)=\"select('width',240)\">\r\n        <span>\u56FA\u5B9A\u503C</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"config-item\">\r\n  <div class=\"item-title\">\u56FA\u5B9A\u5BBD\u5EA6</div>\r\n  <div class=\"item-setting\">\r\n    <dx-number-box [min]=\"0\"\r\n                   [showSpinButtons]=\"true\"\r\n                   [showClearButton]=\"true\"\r\n                   [(value)]=\"width\"\r\n                   (onValueChanged)=\"typing('width', $event.value)\"\r\n                   [readOnly]=\"style.width === 'auto'\">\r\n    </dx-number-box>\r\n  </div>\r\n</div>\r\n<div class=\"config-item\">\r\n  <div class=\"item-title\">\u9AD8\u5EA6\u7C7B\u578B</div>\r\n  <div class=\"item-setting\">\r\n    <div class=\"card-style-radio\">\r\n      <div class=\"radio-value\" [ngClass]=\"!style.height || style.height === 'auto' ? 'active' : ''\"\r\n           (click)=\"select('height','auto')\">\r\n        <span>\u81EA\u9002\u5E94</span>\r\n      </div>\r\n      <div class=\"radio-value\" [ngClass]=\"style.height && style.height !== 'auto' ? 'active' : ''\"\r\n           (click)=\"select('height',800)\">\r\n        <span>\u56FA\u5B9A\u503C</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"config-item\">\r\n  <div class=\"item-title\">\u56FA\u5B9A\u9AD8\u5EA6</div>\r\n  <div class=\"item-setting\">\r\n    <dx-number-box [min]=\"0\"\r\n                   [showSpinButtons]=\"true\"\r\n                   [showClearButton]=\"true\"\r\n                   [(value)]=\"height\"\r\n                   (onValueChanged)=\"typing('height', $event.value)\"\r\n                   [readOnly]=\"style.height === 'auto'\">\r\n    </dx-number-box>\r\n  </div>\r\n</div>\r\n", styles: [":host .config-item{display:flex;flex-flow:row nowrap;align-items:center;margin-bottom:8px}:host .config-item .item-title{flex:0 0 80px}:host .config-item .item-setting{flex:1;display:flex;flex-flow:row nowrap}:host .config-item .item-setting .card-style-radio{flex:1;display:flex;flex-flow:row nowrap;justify-content:stretch}:host .config-item .item-setting .card-style-radio .radio-value{flex:1;border:1px solid var(--devui-dividing-line, #f2f2f3);text-align:center;padding:4px;margin-left:-1px;cursor:pointer}:host .config-item .item-setting .card-style-radio .radio-value span{-webkit-user-select:none;user-select:none}:host .config-item .item-setting .card-style-radio .radio-value.active{color:var(--devui-brand, #5e7ce0);border:1px solid var(--devui-brand, #5e7ce0);z-index:1}:host .config-item .item-setting dx-number-box{flex:1}\n"] }]
         }] });
 
 class StyleBlankComponent {
 }
 StyleBlankComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: StyleBlankComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StyleBlankComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: StyleBlankComponent, selector: "rs-style-blank", ngImport: i0, template: "<div>\n  <span>\u8BF7\u5728\u5DE6\u4FA7\u753B\u5E03\u9009\u4E2D\u8282\u70B9</span>\n</div>\n", styles: [":host{height:80px;margin:8px;display:flex;flex-flow:row nowrap;justify-content:center}:host div{flex:1;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}\n"] });
+StyleBlankComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: StyleBlankComponent, selector: "rs-style-blank", ngImport: i0, template: "<div>\r\n  <span>\u8BF7\u5728\u5DE6\u4FA7\u753B\u5E03\u9009\u4E2D\u8282\u70B9</span>\r\n</div>\r\n", styles: [":host{height:80px;margin:8px;display:flex;flex-flow:row nowrap;justify-content:center}:host div{flex:1;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: StyleBlankComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-style-blank', template: "<div>\n  <span>\u8BF7\u5728\u5DE6\u4FA7\u753B\u5E03\u9009\u4E2D\u8282\u70B9</span>\n</div>\n", styles: [":host{height:80px;margin:8px;display:flex;flex-flow:row nowrap;justify-content:center}:host div{flex:1;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}\n"] }]
+            args: [{ selector: 'rs-style-blank', template: "<div>\r\n  <span>\u8BF7\u5728\u5DE6\u4FA7\u753B\u5E03\u9009\u4E2D\u8282\u70B9</span>\r\n</div>\r\n", styles: [":host{height:80px;margin:8px;display:flex;flex-flow:row nowrap;justify-content:center}:host div{flex:1;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}\n"] }]
         }] });
 
 class PluginManager {
@@ -426,10 +426,10 @@ class ItemConfigComponent {
     }
 }
 ItemConfigComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ItemConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ItemConfigComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ItemConfigComponent, selector: "rs-item-config", viewQueries: [{ propertyName: "itemConfigContainerRef", first: true, predicate: ["itemConfigContainerRef"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #itemConfigContainerRef></ng-container>\n", styles: [""] });
+ItemConfigComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ItemConfigComponent, selector: "rs-item-config", viewQueries: [{ propertyName: "itemConfigContainerRef", first: true, predicate: ["itemConfigContainerRef"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #itemConfigContainerRef></ng-container>\r\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" }]
+            args: [{ selector: 'rs-item-config', template: "<ng-container #itemConfigContainerRef></ng-container>\r\n" }]
         }], propDecorators: { itemConfigContainerRef: [{
                 type: ViewChild,
                 args: ['itemConfigContainerRef', {
@@ -446,10 +446,10 @@ class ItemStyleComponent {
     }
 }
 ItemStyleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ItemStyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ItemStyleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ItemStyleComponent, selector: "rs-item-style", viewQueries: [{ propertyName: "itemStyleContainerRef", first: true, predicate: ["itemStyleContainerRef"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #itemStyleContainerRef></ng-container>\n", styles: [""] });
+ItemStyleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ItemStyleComponent, selector: "rs-item-style", viewQueries: [{ propertyName: "itemStyleContainerRef", first: true, predicate: ["itemStyleContainerRef"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #itemStyleContainerRef></ng-container>\r\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" }]
+            args: [{ selector: 'rs-item-style', template: "<ng-container #itemStyleContainerRef></ng-container>\r\n" }]
         }], propDecorators: { itemStyleContainerRef: [{
                 type: ViewChild,
                 args: ['itemStyleContainerRef', { static: true, read: ViewContainerRef }]
@@ -476,10 +476,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
 class ItemBlankComponent {
 }
 ItemBlankComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ItemBlankComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ItemBlankComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ItemBlankComponent, selector: "rs-item-blank", ngImport: i0, template: "<div>\n  <span>\u62D6\u62FD\u7EC4\u4EF6\u5230\u6B64\u5904</span>\n</div>\n", styles: [":host{flex:1;margin:8px;border:1px solid var(--coast-border-color, #dddddd);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AQMAAAAAMksxAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRF8fHxAAAAMCd7XAAAAAJ0Uk5T/wDltzBKAAABJUlEQVR4nFVSy23EIBCdAiKxBaxCC1tBaGk7YG/OjZYSOQptLKKB8Y0D8ssbjBPl9gQz7wfigQbgQxygEXjIAjwDcJEV+PbYb1KAlNDusgE+Q1Va3EPFptJDjwVVZfcNiqwCV9BiIlhW9DdPkEn5GggKRV4igVL2AYJGpc8TFAMa5lXhzHuc69dwEO6DkBI9OhNVii60ERu3VxrjRUVRet7DsMoUbpgny+LRb5b0K2C/CAWejCxCSYVl9wcQSaMEzuRRArcqebzxcMCnUcKQsBKiiVoJoR1+4DfWSodILCGa5zXTvKWo5L5ars0C/iuh003F7GecbG62YVujunzypDqZTcsK76HF2UYP41HM4WoO7eEWNLUUyaHf/3L9JvXnBwjzS/wAoXR0PDbjCSUAAAAASUVORK5CYII=) repeat var(--coast-global-bg-color, #f6f6f8);display:flex;flex-flow:row nowrap;justify-content:center;pointer-events:all}:host div{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}:host.plugin-hover>div{pointer-events:none}.active>:host div{background-color:var(--coast-empty-color, #d4d4d4)}\n"] });
+ItemBlankComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ItemBlankComponent, selector: "rs-item-blank", ngImport: i0, template: "<div>\r\n  <span>\u62D6\u62FD\u7EC4\u4EF6\u5230\u6B64\u5904</span>\r\n</div>\r\n", styles: [":host{flex:1;margin:8px;border:1px solid var(--coast-border-color, #dddddd);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AQMAAAAAMksxAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRF8fHxAAAAMCd7XAAAAAJ0Uk5T/wDltzBKAAABJUlEQVR4nFVSy23EIBCdAiKxBaxCC1tBaGk7YG/OjZYSOQptLKKB8Y0D8ssbjBPl9gQz7wfigQbgQxygEXjIAjwDcJEV+PbYb1KAlNDusgE+Q1Va3EPFptJDjwVVZfcNiqwCV9BiIlhW9DdPkEn5GggKRV4igVL2AYJGpc8TFAMa5lXhzHuc69dwEO6DkBI9OhNVii60ERu3VxrjRUVRet7DsMoUbpgny+LRb5b0K2C/CAWejCxCSYVl9wcQSaMEzuRRArcqebzxcMCnUcKQsBKiiVoJoR1+4DfWSodILCGa5zXTvKWo5L5ars0C/iuh003F7GecbG62YVujunzypDqZTcsK76HF2UYP41HM4WoO7eEWNLUUyaHf/3L9JvXnBwjzS/wAoXR0PDbjCSUAAAAASUVORK5CYII=) repeat var(--coast-global-bg-color, #f6f6f8);display:flex;flex-flow:row nowrap;justify-content:center;pointer-events:all}:host div{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}:host.plugin-hover>div{pointer-events:none}.active>:host div{background-color:var(--coast-empty-color, #d4d4d4)}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ItemBlankComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-item-blank', template: "<div>\n  <span>\u62D6\u62FD\u7EC4\u4EF6\u5230\u6B64\u5904</span>\n</div>\n", styles: [":host{flex:1;margin:8px;border:1px solid var(--coast-border-color, #dddddd);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AQMAAAAAMksxAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRF8fHxAAAAMCd7XAAAAAJ0Uk5T/wDltzBKAAABJUlEQVR4nFVSy23EIBCdAiKxBaxCC1tBaGk7YG/OjZYSOQptLKKB8Y0D8ssbjBPl9gQz7wfigQbgQxygEXjIAjwDcJEV+PbYb1KAlNDusgE+Q1Va3EPFptJDjwVVZfcNiqwCV9BiIlhW9DdPkEn5GggKRV4igVL2AYJGpc8TFAMa5lXhzHuc69dwEO6DkBI9OhNVii60ERu3VxrjRUVRet7DsMoUbpgny+LRb5b0K2C/CAWejCxCSYVl9wcQSaMEzuRRArcqebzxcMCnUcKQsBKiiVoJoR1+4DfWSodILCGa5zXTvKWo5L5ars0C/iuh003F7GecbG62YVujunzypDqZTcsK76HF2UYP41HM4WoO7eEWNLUUyaHf/3L9JvXnBwjzS/wAoXR0PDbjCSUAAAAASUVORK5CYII=) repeat var(--coast-global-bg-color, #f6f6f8);display:flex;flex-flow:row nowrap;justify-content:center;pointer-events:all}:host div{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}:host.plugin-hover>div{pointer-events:none}.active>:host div{background-color:var(--coast-empty-color, #d4d4d4)}\n"] }]
+            args: [{ selector: 'rs-item-blank', template: "<div>\r\n  <span>\u62D6\u62FD\u7EC4\u4EF6\u5230\u6B64\u5904</span>\r\n</div>\r\n", styles: [":host{flex:1;margin:8px;border:1px solid var(--coast-border-color, #dddddd);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AQMAAAAAMksxAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRF8fHxAAAAMCd7XAAAAAJ0Uk5T/wDltzBKAAABJUlEQVR4nFVSy23EIBCdAiKxBaxCC1tBaGk7YG/OjZYSOQptLKKB8Y0D8ssbjBPl9gQz7wfigQbgQxygEXjIAjwDcJEV+PbYb1KAlNDusgE+Q1Va3EPFptJDjwVVZfcNiqwCV9BiIlhW9DdPkEn5GggKRV4igVL2AYJGpc8TFAMa5lXhzHuc69dwEO6DkBI9OhNVii60ERu3VxrjRUVRet7DsMoUbpgny+LRb5b0K2C/CAWejCxCSYVl9wcQSaMEzuRRArcqebzxcMCnUcKQsBKiiVoJoR1+4DfWSodILCGa5zXTvKWo5L5ars0C/iuh003F7GecbG62YVujunzypDqZTcsK76HF2UYP41HM4WoO7eEWNLUUyaHf/3L9JvXnBwjzS/wAoXR0PDbjCSUAAAAASUVORK5CYII=) repeat var(--coast-global-bg-color, #f6f6f8);display:flex;flex-flow:row nowrap;justify-content:center;pointer-events:all}:host div{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}:host.plugin-hover>div{pointer-events:none}.active>:host div{background-color:var(--coast-empty-color, #d4d4d4)}\n"] }]
         }] });
 
 class BoxItemComponent {
@@ -662,10 +662,10 @@ class BoxItemComponent {
     }
 }
 BoxItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BoxItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BoxItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: BoxItemComponent, selector: "rs-box-item", outputs: { leaveOneItem: "leaveOneItem" }, host: { properties: { "style.flex-direction": "this._direction", "style": "this._style" } }, viewQueries: [{ propertyName: "itemHosts", predicate: BoxItemHostDirective, descendants: true }], ngImport: i0, template: "<ng-container *ngFor=\"let item of config.list; index as index\">\n  <ng-container *ngIf=\"boxContainer.editMode\">\n    <ng-container *ngIf=\"item.type === 'plugin'\">\n      <dx-draggable [ngStyle]=\"calcStyle(item)\"\n                    [data]=\"{boxItem: this, item, index}\"\n                    handle=\".icon-drag\"\n                    group=\"rsBoxContainerDragGroup\"\n                    (onDragMove)=\"onDragMove($event)\"\n                    (onDragEnd)=\"onDragEnd($event)\">\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n      </dx-draggable>\n    </ng-container>\n    <ng-container *ngIf=\"item.type === 'item'\">\n      <div [ngStyle]=\"calcStyle(item)\">\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"item.type === 'blank'\">\n      <dx-draggable [ngStyle]=\"calcStyle(item)\"\n                    [data]=\"{boxItem: this, item, index}\"\n                    group=\"rsBoxContainerDragGroup\"\n                    (onDragStart)=\"$event.cancel = true\">\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n      </dx-draggable>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!boxContainer.editMode\">\n    <div [ngStyle]=\"calcStyle(item)\">\n      <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [":host{flex:1;display:flex;flex-flow:row nowrap;pointer-events:all}:host dx-draggable,:host div{display:flex;flex-flow:row nowrap}:host dx-draggable.active,:host div.active{background-color:var(--coast-empty-color, #d4d4d4)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.DxDraggableComponent, selector: "dx-draggable", inputs: ["autoScroll", "boundary", "clone", "container", "cursorOffset", "data", "dragDirection", "dragTemplate", "elementAttr", "group", "handle", "height", "rtlEnabled", "scrollSensitivity", "scrollSpeed", "width"], outputs: ["onDisposing", "onDragEnd", "onDragMove", "onDragStart", "onInitialized", "onOptionChanged", "autoScrollChange", "boundaryChange", "cloneChange", "containerChange", "cursorOffsetChange", "dataChange", "dragDirectionChange", "dragTemplateChange", "elementAttrChange", "groupChange", "handleChange", "heightChange", "rtlEnabledChange", "scrollSensitivityChange", "scrollSpeedChange", "widthChange"] }, { kind: "directive", type: BoxItemHostDirective, selector: "[rsBoxItemHost]", inputs: ["hostId"] }] });
+BoxItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: BoxItemComponent, selector: "rs-box-item", outputs: { leaveOneItem: "leaveOneItem" }, host: { properties: { "style.flex-direction": "this._direction", "style": "this._style" } }, viewQueries: [{ propertyName: "itemHosts", predicate: BoxItemHostDirective, descendants: true }], ngImport: i0, template: "<ng-container *ngFor=\"let item of config.list; index as index\">\r\n  <ng-container *ngIf=\"boxContainer.editMode\">\r\n    <ng-container *ngIf=\"item.type === 'plugin'\">\r\n      <dx-draggable [ngStyle]=\"calcStyle(item)\"\r\n                    [data]=\"{boxItem: this, item, index}\"\r\n                    handle=\".icon-drag\"\r\n                    group=\"rsBoxContainerDragGroup\"\r\n                    (onDragMove)=\"onDragMove($event)\"\r\n                    (onDragEnd)=\"onDragEnd($event)\">\r\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\r\n      </dx-draggable>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"item.type === 'item'\">\r\n      <div [ngStyle]=\"calcStyle(item)\">\r\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"item.type === 'blank'\">\r\n      <dx-draggable [ngStyle]=\"calcStyle(item)\"\r\n                    [data]=\"{boxItem: this, item, index}\"\r\n                    group=\"rsBoxContainerDragGroup\"\r\n                    (onDragStart)=\"$event.cancel = true\">\r\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\r\n      </dx-draggable>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!boxContainer.editMode\">\r\n    <div [ngStyle]=\"calcStyle(item)\">\r\n      <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\r\n    </div>\r\n  </ng-container>\r\n</ng-container>\r\n", styles: [":host{flex:1;display:flex;flex-flow:row nowrap;pointer-events:all}:host dx-draggable,:host div{display:flex;flex-flow:row nowrap}:host dx-draggable.active,:host div.active{background-color:var(--coast-empty-color, #d4d4d4)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.DxDraggableComponent, selector: "dx-draggable", inputs: ["autoScroll", "boundary", "clone", "container", "cursorOffset", "data", "dragDirection", "dragTemplate", "elementAttr", "group", "handle", "height", "rtlEnabled", "scrollSensitivity", "scrollSpeed", "width"], outputs: ["onDisposing", "onDragEnd", "onDragMove", "onDragStart", "onInitialized", "onOptionChanged", "autoScrollChange", "boundaryChange", "cloneChange", "containerChange", "cursorOffsetChange", "dataChange", "dragDirectionChange", "dragTemplateChange", "elementAttrChange", "groupChange", "handleChange", "heightChange", "rtlEnabledChange", "scrollSensitivityChange", "scrollSpeedChange", "widthChange"] }, { kind: "directive", type: BoxItemHostDirective, selector: "[rsBoxItemHost]", inputs: ["hostId"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BoxItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-box-item', template: "<ng-container *ngFor=\"let item of config.list; index as index\">\n  <ng-container *ngIf=\"boxContainer.editMode\">\n    <ng-container *ngIf=\"item.type === 'plugin'\">\n      <dx-draggable [ngStyle]=\"calcStyle(item)\"\n                    [data]=\"{boxItem: this, item, index}\"\n                    handle=\".icon-drag\"\n                    group=\"rsBoxContainerDragGroup\"\n                    (onDragMove)=\"onDragMove($event)\"\n                    (onDragEnd)=\"onDragEnd($event)\">\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n      </dx-draggable>\n    </ng-container>\n    <ng-container *ngIf=\"item.type === 'item'\">\n      <div [ngStyle]=\"calcStyle(item)\">\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"item.type === 'blank'\">\n      <dx-draggable [ngStyle]=\"calcStyle(item)\"\n                    [data]=\"{boxItem: this, item, index}\"\n                    group=\"rsBoxContainerDragGroup\"\n                    (onDragStart)=\"$event.cancel = true\">\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n      </dx-draggable>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!boxContainer.editMode\">\n    <div [ngStyle]=\"calcStyle(item)\">\n      <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [":host{flex:1;display:flex;flex-flow:row nowrap;pointer-events:all}:host dx-draggable,:host div{display:flex;flex-flow:row nowrap}:host dx-draggable.active,:host div.active{background-color:var(--coast-empty-color, #d4d4d4)}\n"] }]
+            args: [{ selector: 'rs-box-item', template: "<ng-container *ngFor=\"let item of config.list; index as index\">\r\n  <ng-container *ngIf=\"boxContainer.editMode\">\r\n    <ng-container *ngIf=\"item.type === 'plugin'\">\r\n      <dx-draggable [ngStyle]=\"calcStyle(item)\"\r\n                    [data]=\"{boxItem: this, item, index}\"\r\n                    handle=\".icon-drag\"\r\n                    group=\"rsBoxContainerDragGroup\"\r\n                    (onDragMove)=\"onDragMove($event)\"\r\n                    (onDragEnd)=\"onDragEnd($event)\">\r\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\r\n      </dx-draggable>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"item.type === 'item'\">\r\n      <div [ngStyle]=\"calcStyle(item)\">\r\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"item.type === 'blank'\">\r\n      <dx-draggable [ngStyle]=\"calcStyle(item)\"\r\n                    [data]=\"{boxItem: this, item, index}\"\r\n                    group=\"rsBoxContainerDragGroup\"\r\n                    (onDragStart)=\"$event.cancel = true\">\r\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\r\n      </dx-draggable>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!boxContainer.editMode\">\r\n    <div [ngStyle]=\"calcStyle(item)\">\r\n      <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\r\n    </div>\r\n  </ng-container>\r\n</ng-container>\r\n", styles: [":host{flex:1;display:flex;flex-flow:row nowrap;pointer-events:all}:host dx-draggable,:host div{display:flex;flex-flow:row nowrap}:host dx-draggable.active,:host div.active{background-color:var(--coast-empty-color, #d4d4d4)}\n"] }]
         }], propDecorators: { _direction: [{
                 type: HostBinding,
                 args: ['style.flex-direction']
@@ -785,10 +785,10 @@ class BoxContainerComponent {
     }
 }
 BoxContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BoxContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BoxContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: BoxContainerComponent, selector: "rs-box-container", inputs: { config: "config", model: "model", opener: "opener", params: "params", readonly: "readonly", tabViewContainerRef: "tabViewContainerRef" }, viewQueries: [{ propertyName: "boxContainerContent", first: true, predicate: ["boxContainerContent"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container #boxContainerContent></ng-container>\n", styles: [":host{flex:1;position:relative;display:flex;flex-flow:row nowrap}\n"] });
+BoxContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: BoxContainerComponent, selector: "rs-box-container", inputs: { config: "config", model: "model", opener: "opener", params: "params", readonly: "readonly", tabViewContainerRef: "tabViewContainerRef" }, viewQueries: [{ propertyName: "boxContainerContent", first: true, predicate: ["boxContainerContent"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container #boxContainerContent></ng-container>\r\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"] }]
+            args: [{ selector: 'rs-box-container', template: "<ng-container #boxContainerContent></ng-container>\r\n", styles: [":host{flex:1;position:relative;display:flex;flex-flow:row nowrap}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], model: [{
@@ -1676,10 +1676,10 @@ class CodeEditorComponent {
     }
 }
 CodeEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CodeEditorComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-CodeEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: CodeEditorComponent, selector: "rs-code-editor", inputs: { code: "code", language: "language", readonly: "readonly", enableMinimap: "enableMinimap", consoleMessage: "consoleMessage" }, outputs: { codeChange: "codeChange", onContentReady: "onContentReady" }, viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, static: true }], ngImport: i0, template: "<dx-load-panel [container]=\"viewContainerRef.element.nativeElement\" [showPane]=\"false\"\n               [visible]=\"loading\">\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\n</dx-load-panel>\n<div class=\"editor-container\" #editorContainer></div>\n<div *ngIf=\"consoleMessage\" class=\"editor-console\">{{consoleMessage}}</div>\n", styles: [":host{display:flex;flex-flow:column nowrap}:host .editor-container{flex:1}:host .editor-console{flex:0 0 30px;padding:4px;border:1px solid var(--coast-border-color, #dddddd);background-color:var(--coast-empty-color, #d4d4d4)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.DxLoadPanelComponent, selector: "dx-load-panel", inputs: ["animation", "closeOnOutsideClick", "container", "copyRootClassesToWrapper", "deferRendering", "delay", "elementAttr", "focusStateEnabled", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "indicatorSrc", "maxHeight", "maxWidth", "message", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showIndicator", "showPane", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "delayChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "indicatorSrcChange", "maxHeightChange", "maxWidthChange", "messageChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showIndicatorChange", "showPaneChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i6$1.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }] });
+CodeEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: CodeEditorComponent, selector: "rs-code-editor", inputs: { code: "code", language: "language", readonly: "readonly", enableMinimap: "enableMinimap", consoleMessage: "consoleMessage" }, outputs: { codeChange: "codeChange", onContentReady: "onContentReady" }, viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, static: true }], ngImport: i0, template: "<dx-load-panel [container]=\"viewContainerRef.element.nativeElement\" [showPane]=\"false\"\r\n               [visible]=\"loading\">\r\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\r\n</dx-load-panel>\r\n<div class=\"editor-container\" #editorContainer></div>\r\n<div *ngIf=\"consoleMessage\" class=\"editor-console\">{{consoleMessage}}</div>\r\n", styles: [":host{display:flex;flex-flow:column nowrap}:host .editor-container{flex:1}:host .editor-console{flex:0 0 30px;padding:4px;border:1px solid var(--coast-border-color, #dddddd);background-color:var(--coast-empty-color, #d4d4d4)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.DxLoadPanelComponent, selector: "dx-load-panel", inputs: ["animation", "closeOnOutsideClick", "container", "copyRootClassesToWrapper", "deferRendering", "delay", "elementAttr", "focusStateEnabled", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "indicatorSrc", "maxHeight", "maxWidth", "message", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showIndicator", "showPane", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "delayChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "indicatorSrcChange", "maxHeightChange", "maxWidthChange", "messageChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showIndicatorChange", "showPaneChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i6$1.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CodeEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-code-editor', template: "<dx-load-panel [container]=\"viewContainerRef.element.nativeElement\" [showPane]=\"false\"\n               [visible]=\"loading\">\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\n</dx-load-panel>\n<div class=\"editor-container\" #editorContainer></div>\n<div *ngIf=\"consoleMessage\" class=\"editor-console\">{{consoleMessage}}</div>\n", styles: [":host{display:flex;flex-flow:column nowrap}:host .editor-container{flex:1}:host .editor-console{flex:0 0 30px;padding:4px;border:1px solid var(--coast-border-color, #dddddd);background-color:var(--coast-empty-color, #d4d4d4)}\n"] }]
+            args: [{ selector: 'rs-code-editor', template: "<dx-load-panel [container]=\"viewContainerRef.element.nativeElement\" [showPane]=\"false\"\r\n               [visible]=\"loading\">\r\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\r\n</dx-load-panel>\r\n<div class=\"editor-container\" #editorContainer></div>\r\n<div *ngIf=\"consoleMessage\" class=\"editor-console\">{{consoleMessage}}</div>\r\n", styles: [":host{display:flex;flex-flow:column nowrap}:host .editor-container{flex:1}:host .editor-console{flex:0 0 30px;padding:4px;border:1px solid var(--coast-border-color, #dddddd);background-color:var(--coast-empty-color, #d4d4d4)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { code: [{
                 type: Input
             }], codeChange: [{
@@ -1758,10 +1758,10 @@ class CamundaBpmnEditorComponent {
     }
 }
 CamundaBpmnEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CamundaBpmnEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CamundaBpmnEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: CamundaBpmnEditorComponent, selector: "rs-camunda-bpmn-editor", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "config", first: true, predicate: ["config"], descendants: true }], ngImport: i0, template: "<div class=\"main\">\n  <div class=\"container\" #container></div>\n  <div class=\"config\" #config></div>\n  <div class=\"xml-viewer\" [ngStyle]=\"{display: isShowXml ? 'flex' : 'none'}\">\n    <rs-code-editor language=\"xml\" [code]=\"xml\" [readonly]=\"true\" [enableMinimap]=\"true\"></rs-code-editor>\n  </div>\n</div>\n<div class=\"footer\">\n  <dx-button [type]=\"isShowXml ? 'default' : 'normal'\" text=\"XML\" [hoverStateEnabled]=\"false\"\n             (onClick)=\"showXml()\"></dx-button>\n</div>\n", styles: [":host{flex:1;display:flex;flex-flow:column nowrap}:host .main{flex:1;display:flex;flex-flow:row nowrap;position:relative}:host .main .container{flex:1}:host .main .config{flex:0 0 360px;border:1px solid var(--coast-border-color, #dddddd)}:host .main .xml-viewer{position:absolute;width:100%;height:100%;display:flex;flex-flow:column nowrap;z-index:var(--coast-z-index-drawer, 1040)}:host .main .xml-viewer rs-code-editor{flex:1}:host .footer{flex:0 0 24px;border:1px solid var(--coast-border-color, #dddddd)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CodeEditorComponent, selector: "rs-code-editor", inputs: ["code", "language", "readonly", "enableMinimap", "consoleMessage"], outputs: ["codeChange", "onContentReady"] }, { kind: "component", type: i4.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }] });
+CamundaBpmnEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: CamundaBpmnEditorComponent, selector: "rs-camunda-bpmn-editor", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "config", first: true, predicate: ["config"], descendants: true }], ngImport: i0, template: "<div class=\"main\">\r\n  <div class=\"container\" #container></div>\r\n  <div class=\"config\" #config></div>\r\n  <div class=\"xml-viewer\" [ngStyle]=\"{display: isShowXml ? 'flex' : 'none'}\">\r\n    <rs-code-editor language=\"xml\" [code]=\"xml\" [readonly]=\"true\" [enableMinimap]=\"true\"></rs-code-editor>\r\n  </div>\r\n</div>\r\n<div class=\"footer\">\r\n  <dx-button [type]=\"isShowXml ? 'default' : 'normal'\" text=\"XML\" [hoverStateEnabled]=\"false\"\r\n             (onClick)=\"showXml()\"></dx-button>\r\n</div>\r\n", styles: [":host{flex:1;display:flex;flex-flow:column nowrap}:host .main{flex:1;display:flex;flex-flow:row nowrap;position:relative}:host .main .container{flex:1}:host .main .config{flex:0 0 360px;border:1px solid var(--coast-border-color, #dddddd)}:host .main .xml-viewer{position:absolute;width:100%;height:100%;display:flex;flex-flow:column nowrap;z-index:var(--coast-z-index-drawer, 1040)}:host .main .xml-viewer rs-code-editor{flex:1}:host .footer{flex:0 0 24px;border:1px solid var(--coast-border-color, #dddddd)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CodeEditorComponent, selector: "rs-code-editor", inputs: ["code", "language", "readonly", "enableMinimap", "consoleMessage"], outputs: ["codeChange", "onContentReady"] }, { kind: "component", type: i4.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }] });
 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\" #container></div>\n  <div class=\"config\" #config></div>\n  <div class=\"xml-viewer\" [ngStyle]=\"{display: isShowXml ? 'flex' : 'none'}\">\n    <rs-code-editor language=\"xml\" [code]=\"xml\" [readonly]=\"true\" [enableMinimap]=\"true\"></rs-code-editor>\n  </div>\n</div>\n<div class=\"footer\">\n  <dx-button [type]=\"isShowXml ? 'default' : 'normal'\" text=\"XML\" [hoverStateEnabled]=\"false\"\n             (onClick)=\"showXml()\"></dx-button>\n</div>\n", styles: [":host{flex:1;display:flex;flex-flow:column nowrap}:host .main{flex:1;display:flex;flex-flow:row nowrap;position:relative}:host .main .container{flex:1}:host .main .config{flex:0 0 360px;border:1px solid var(--coast-border-color, #dddddd)}:host .main .xml-viewer{position:absolute;width:100%;height:100%;display:flex;flex-flow:column nowrap;z-index:var(--coast-z-index-drawer, 1040)}:host .main .xml-viewer rs-code-editor{flex:1}:host .footer{flex:0 0 24px;border:1px solid var(--coast-border-color, #dddddd)}\n"] }]
+            args: [{ selector: 'rs-camunda-bpmn-editor', template: "<div class=\"main\">\r\n  <div class=\"container\" #container></div>\r\n  <div class=\"config\" #config></div>\r\n  <div class=\"xml-viewer\" [ngStyle]=\"{display: isShowXml ? 'flex' : 'none'}\">\r\n    <rs-code-editor language=\"xml\" [code]=\"xml\" [readonly]=\"true\" [enableMinimap]=\"true\"></rs-code-editor>\r\n  </div>\r\n</div>\r\n<div class=\"footer\">\r\n  <dx-button [type]=\"isShowXml ? 'default' : 'normal'\" text=\"XML\" [hoverStateEnabled]=\"false\"\r\n             (onClick)=\"showXml()\"></dx-button>\r\n</div>\r\n", styles: [":host{flex:1;display:flex;flex-flow:column nowrap}:host .main{flex:1;display:flex;flex-flow:row nowrap;position:relative}:host .main .container{flex:1}:host .main .config{flex:0 0 360px;border:1px solid var(--coast-border-color, #dddddd)}:host .main .xml-viewer{position:absolute;width:100%;height:100%;display:flex;flex-flow:column nowrap;z-index:var(--coast-z-index-drawer, 1040)}:host .main .xml-viewer rs-code-editor{flex:1}:host .footer{flex:0 0 24px;border:1px solid var(--coast-border-color, #dddddd)}\n"] }]
         }], propDecorators: { container: [{
                 type: ViewChild,
                 args: ['container']
@@ -2470,27 +2470,28 @@ function format_datetime(date, locale) {
 function file_type_icon(name) {
     const type = name.substring(name.lastIndexOf('.') + 1).toLocaleLowerCase();
     switch (type) {
-        case 'xls':
-        case 'xlsx':
-            return 'excel';
         case 'doc':
         case 'docx':
             return 'word';
+        case 'xls':
+        case 'xlsx':
+        case 'csv':
+            return 'excel';
         case 'ppt':
         case 'pptx':
             return 'ppt';
         case 'pdf':
             return 'pdf';
         case 'txt':
-        case 'csv':
         case 'xml':
         case 'json':
         case 'js':
             return 'text';
+        case 'png':
         case 'jpg':
         case 'jpeg':
-        case 'png':
         case 'gif':
+        case 'bmp':
             return 'image';
         case 'zip':
         case 'rar':
@@ -2501,6 +2502,9 @@ function file_type_icon(name) {
             return 'unknown';
     }
 }
+function support_preview_ext() {
+    return ['pdf', 'png', 'jpg', 'jpeg', 'gif', 'bmp', 'doc', 'docx', 'txt', 'xml', 'json', 'js', 'xls', 'xlsx', 'csv', 'ppt', 'pptx'];
+}
 function format_file_size(size) {
     const labels = ['b', 'Kb', 'Mb', 'Gb'];
     const count = labels.length - 1;
@@ -2601,12 +2605,18 @@ class FileCellTemplateComponent {
     constructor(service, domSanitizer) {
         this.service = service;
         this.domSanitizer = domSanitizer;
+        this.supportPreview = false;
         this.loading = false;
     }
     ngOnInit() {
         this.service.getOne('S', 'Attachment', this.oid).subscribe(response => {
             this.file = response.data;
             this.filename = this.file.fileName;
+            let extName = '';
+            if (this.filename.indexOf('.') > -1) {
+                extName = this.filename.substring(this.filename.lastIndexOf('.') + 1).toLowerCase();
+            }
+            this.supportPreview = support_preview_ext().indexOf(extName) > -1;
             this.content = this.domSanitizer.bypassSecurityTrustHtml(`
                 <table>
                     <tr>
@@ -2669,10 +2679,10 @@ class FileCellTemplateComponent {
     }
 }
 FileCellTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FileCellTemplateComponent, deps: [{ token: DataGridService }, { token: i2$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-FileCellTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: FileCellTemplateComponent, selector: "rs-file-cell-template", inputs: { table: "table", oid: "oid" }, ngImport: i0, template: "<dx-button #fileBtn type=\"default\" stylingMode=\"text\">\n  <i class=\"coast-icon-file-{{icon}}\" style=\"padding-right: 4px;\"></i>\n  {{ filename }}\n  <dx-tooltip #tooltip\n              [target]=\"fileBtn.instance.element()\"\n              [position]=\"'top'\"\n              [visible]=\"false\"\n              [showEvent]=\"'click'\">\n    <div *dxTemplate=\"let data of 'content'\">\n      <div [innerHTML]=\"content\"></div>\n      <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-file\" text=\"\u9884\u89C8\"\n                 (onClick)=\"preview(tooltip)\" [disabled]=\"loading\"></dx-button>\n      <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-download\" text=\"\u4E0B\u8F7D\"\n                 (onClick)=\"download()\" [disabled]=\"loading\"></dx-button>\n    </div>\n  </dx-tooltip>\n</dx-button><br/>\n", styles: [""], 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: { table: "table", oid: "oid" }, ngImport: i0, template: "<dx-button #fileBtn type=\"default\" stylingMode=\"text\">\r\n  <i class=\"coast-icon-file-{{icon}}\" style=\"padding-right: 4px;\"></i>\r\n  {{ filename }}\r\n  <dx-tooltip #tooltip\r\n              [target]=\"fileBtn.instance.element()\"\r\n              [position]=\"'top'\"\r\n              [visible]=\"false\"\r\n              [showEvent]=\"'click'\">\r\n    <div *dxTemplate=\"let data of 'content'\">\r\n      <div [innerHTML]=\"content\"></div>\r\n      <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-file\" text=\"\u9884\u89C8\"\r\n                 (onClick)=\"preview(tooltip)\" [disabled]=\"!supportPreview || loading\"></dx-button>\r\n      <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-download\" text=\"\u4E0B\u8F7D\"\r\n                 (onClick)=\"download()\" [disabled]=\"loading\"></dx-button>\r\n    </div>\r\n  </dx-tooltip>\r\n</dx-button><br/>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i4.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i5.DxTooltipComponent, selector: "dx-tooltip", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showEvent", "target", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showEventChange", "targetChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
 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\">\n  <i class=\"coast-icon-file-{{icon}}\" style=\"padding-right: 4px;\"></i>\n  {{ filename }}\n  <dx-tooltip #tooltip\n              [target]=\"fileBtn.instance.element()\"\n              [position]=\"'top'\"\n              [visible]=\"false\"\n              [showEvent]=\"'click'\">\n    <div *dxTemplate=\"let data of 'content'\">\n      <div [innerHTML]=\"content\"></div>\n      <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-file\" text=\"\u9884\u89C8\"\n                 (onClick)=\"preview(tooltip)\" [disabled]=\"loading\"></dx-button>\n      <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-download\" text=\"\u4E0B\u8F7D\"\n                 (onClick)=\"download()\" [disabled]=\"loading\"></dx-button>\n    </div>\n  </dx-tooltip>\n</dx-button><br/>\n" }]
+            args: [{ selector: 'rs-file-cell-template', template: "<dx-button #fileBtn type=\"default\" stylingMode=\"text\">\r\n  <i class=\"coast-icon-file-{{icon}}\" style=\"padding-right: 4px;\"></i>\r\n  {{ filename }}\r\n  <dx-tooltip #tooltip\r\n              [target]=\"fileBtn.instance.element()\"\r\n              [position]=\"'top'\"\r\n              [visible]=\"false\"\r\n              [showEvent]=\"'click'\">\r\n    <div *dxTemplate=\"let data of 'content'\">\r\n      <div [innerHTML]=\"content\"></div>\r\n      <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-file\" text=\"\u9884\u89C8\"\r\n                 (onClick)=\"preview(tooltip)\" [disabled]=\"!supportPreview || loading\"></dx-button>\r\n      <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-download\" text=\"\u4E0B\u8F7D\"\r\n                 (onClick)=\"download()\" [disabled]=\"loading\"></dx-button>\r\n    </div>\r\n  </dx-tooltip>\r\n</dx-button><br/>\r\n" }]
         }], ctorParameters: function () { return [{ type: DataGridService }, { type: i2$2.DomSanitizer }]; }, propDecorators: { table: [{
                 type: Input
             }], oid: [{
@@ -2708,10 +2718,10 @@ 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: { table: "table", uid: "uid" }, ngImport: i0, template: "<dx-button #textDiv type=\"default\" stylingMode=\"text\">\n  {{displayName}}\n  <dx-tooltip [target]=\"textDiv.instance.element()\"\n              [position]=\"'top'\"\n              [showEvent]=\"'click'\">\n    <div *dxTemplate=\"let data of 'content'\">\n      <div [innerHTML]=\"content\"></div>\n    </div>\n  </dx-tooltip>\n</dx-button>\n<br/>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i4.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i5.DxTooltipComponent, selector: "dx-tooltip", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showEvent", "target", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showEventChange", "targetChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
+UserInfoTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: UserInfoTemplateComponent, selector: "rs-user-info-template", inputs: { table: "table", uid: "uid" }, ngImport: i0, template: "<dx-button #textDiv type=\"default\" stylingMode=\"text\">\r\n  {{displayName}}\r\n  <dx-tooltip [target]=\"textDiv.instance.element()\"\r\n              [position]=\"'top'\"\r\n              [showEvent]=\"'click'\">\r\n    <div *dxTemplate=\"let data of 'content'\">\r\n      <div [innerHTML]=\"content\"></div>\r\n    </div>\r\n  </dx-tooltip>\r\n</dx-button>\r\n<br/>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i4.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i5.DxTooltipComponent, selector: "dx-tooltip", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showEvent", "target", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showEventChange", "targetChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: UserInfoTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-user-info-template', template: "<dx-button #textDiv type=\"default\" stylingMode=\"text\">\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" }]
+            args: [{ selector: 'rs-user-info-template', template: "<dx-button #textDiv type=\"default\" stylingMode=\"text\">\r\n  {{displayName}}\r\n  <dx-tooltip [target]=\"textDiv.instance.element()\"\r\n              [position]=\"'top'\"\r\n              [showEvent]=\"'click'\">\r\n    <div *dxTemplate=\"let data of 'content'\">\r\n      <div [innerHTML]=\"content\"></div>\r\n    </div>\r\n  </dx-tooltip>\r\n</dx-button>\r\n<br/>\r\n" }]
         }], ctorParameters: function () { return [{ type: DataGridService }, { type: i2$2.DomSanitizer }]; }, propDecorators: { table: [{
                 type: Input
             }], uid: [{
@@ -2747,10 +2757,10 @@ 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: { table: "table", uid: "uid" }, ngImport: i0, template: "<dx-button #textDiv type=\"default\" stylingMode=\"text\">\n  {{displayName}}\n  <dx-tooltip [target]=\"textDiv.instance.element()\"\n              [position]=\"'top'\"\n              [showEvent]=\"'click'\">\n    <div *dxTemplate=\"let data of 'content'\">\n      <div [innerHTML]=\"content\"></div>\n    </div>\n  </dx-tooltip>\n</dx-button>\n<br/>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i4.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i5.DxTooltipComponent, selector: "dx-tooltip", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showEvent", "target", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showEventChange", "targetChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
+UnitInfoTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: UnitInfoTemplateComponent, selector: "rs-unit-info-template", inputs: { table: "table", uid: "uid" }, ngImport: i0, template: "<dx-button #textDiv type=\"default\" stylingMode=\"text\">\r\n  {{displayName}}\r\n  <dx-tooltip [target]=\"textDiv.instance.element()\"\r\n              [position]=\"'top'\"\r\n              [showEvent]=\"'click'\">\r\n    <div *dxTemplate=\"let data of 'content'\">\r\n      <div [innerHTML]=\"content\"></div>\r\n    </div>\r\n  </dx-tooltip>\r\n</dx-button>\r\n<br/>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i4.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i5.DxTooltipComponent, selector: "dx-tooltip", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showEvent", "target", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showEventChange", "targetChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: UnitInfoTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-unit-info-template', template: "<dx-button #textDiv type=\"default\" stylingMode=\"text\">\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" }]
+            args: [{ selector: 'rs-unit-info-template', template: "<dx-button #textDiv type=\"default\" stylingMode=\"text\">\r\n  {{displayName}}\r\n  <dx-tooltip [target]=\"textDiv.instance.element()\"\r\n              [position]=\"'top'\"\r\n              [showEvent]=\"'click'\">\r\n    <div *dxTemplate=\"let data of 'content'\">\r\n      <div [innerHTML]=\"content\"></div>\r\n    </div>\r\n  </dx-tooltip>\r\n</dx-button>\r\n<br/>\r\n" }]
         }], ctorParameters: function () { return [{ type: DataGridService }, { type: i2$2.DomSanitizer }]; }, propDecorators: { table: [{
                 type: Input
             }], uid: [{
@@ -3136,10 +3146,10 @@ 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\">\n    <div *dxTemplate=\"let section of 'title'\" class=\"section-title\">\n      <div class=\"section-title-name\">{{ section.name }}</div>\n    </div>\n    <div *dxTemplate=\"let section of 'item'\">\n      <rs-form [tenant]=\"tenant\" [className]=\"className\" [oid]=\"oid\" [template]=\"section.formTemplate\" [params]=\"params\"\n               [tabViewContainerRef]=\"tabViewContainerRef\" [readonly]=\"true\"></rs-form>\n    </div>\n  </dx-accordion>\n</ng-container>\n", styles: [":host{flex:1;padding:24px;display:flex;flex-flow:column nowrap}:host div.empty{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div.empty span{text-align:center;-webkit-user-select:none;user-select:none}:host .section-title{border-bottom:1px solid var(--coast-border-color, #dddddd)}:host .section-title .section-title-name{height:24px;font-size:14px;font-weight:700;padding:4px 8px;display:flex;flex-flow:column nowrap;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.DxAccordionComponent, selector: "dx-accordion", inputs: ["accessKey", "activeStateEnabled", "animationDuration", "collapsible", "dataSource", "deferRendering", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "itemHoldTimeout", "items", "itemTemplate", "itemTitleTemplate", "keyExpr", "multiple", "noDataText", "repaintChangesOnly", "rtlEnabled", "selectedIndex", "selectedItem", "selectedItemKeys", "selectedItems", "tabIndex", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onItemClick", "onItemContextMenu", "onItemHold", "onItemRendered", "onItemTitleClick", "onOptionChanged", "onSelectionChanged", "accessKeyChange", "activeStateEnabledChange", "animationDurationChange", "collapsibleChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "itemHoldTimeoutChange", "itemsChange", "itemTemplateChange", "itemTitleTemplateChange", "keyExprChange", "multipleChange", "noDataTextChange", "repaintChangesOnlyChange", "rtlEnabledChange", "selectedIndexChange", "selectedItemChange", "selectedItemKeysChange", "selectedItemsChange", "tabIndexChange", "visibleChange", "widthChange"] }, { kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i6$1.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }, { kind: "component", type: i6.DxLoadPanelComponent, selector: "dx-load-panel", inputs: ["animation", "closeOnOutsideClick", "container", "copyRootClassesToWrapper", "deferRendering", "delay", "elementAttr", "focusStateEnabled", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "indicatorSrc", "maxHeight", "maxWidth", "message", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showIndicator", "showPane", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "delayChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "indicatorSrcChange", "maxHeightChange", "maxWidthChange", "messageChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showIndicatorChange", "showPaneChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: FormComponent, selector: "rs-form", inputs: ["tenant", "className", "oid", "copyOid", "template", "extraAttrMap", "opener", "params", "tabViewContainerRef", "onlyFrontEnd", "model", "readonly"], outputs: ["submitCallback"] }] });
+DataDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DataDetailComponent, selector: "coast-data-detail", providers: [DataDetailService], ngImport: i0, template: "<dx-load-panel [container]=\"viewContainerRef.element.nativeElement\" [showPane]=\"false\"\r\n               [visible]=\"loading\">\r\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\r\n</dx-load-panel>\r\n<div *ngIf=\"!loading && sections.length === 0\" class=\"empty\">\r\n  <span>\u60A8\u65E0\u6743\u67E5\u770B\u8BE5\u6570\u636E\u5B9E\u4F8B\u4EFB\u4F55\u4FE1\u606F</span>\r\n</div>\r\n<ng-container *ngIf=\"sections.length > 0\">\r\n  <dx-accordion [collapsible]=\"true\" [multiple]=\"true\" [deferRendering]=\"false\" [dataSource]=\"sections\"\r\n                [selectedItems]=\"sections\">\r\n    <div *dxTemplate=\"let section of 'title'\" class=\"section-title\">\r\n      <div class=\"section-title-name\">{{ section.name }}</div>\r\n    </div>\r\n    <div *dxTemplate=\"let section of 'item'\">\r\n      <rs-form [tenant]=\"tenant\" [className]=\"className\" [oid]=\"oid\" [template]=\"section.formTemplate\" [params]=\"params\"\r\n               [tabViewContainerRef]=\"tabViewContainerRef\" [readonly]=\"true\"></rs-form>\r\n    </div>\r\n  </dx-accordion>\r\n</ng-container>\r\n", styles: [":host{flex:1;padding:24px;display:flex;flex-flow:column nowrap}:host div.empty{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div.empty span{text-align:center;-webkit-user-select:none;user-select:none}:host .section-title{border-bottom:1px solid var(--coast-border-color, #dddddd)}:host .section-title .section-title-name{height:24px;font-size:14px;font-weight:700;padding:4px 8px;display:flex;flex-flow:column nowrap;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.DxAccordionComponent, selector: "dx-accordion", inputs: ["accessKey", "activeStateEnabled", "animationDuration", "collapsible", "dataSource", "deferRendering", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "itemHoldTimeout", "items", "itemTemplate", "itemTitleTemplate", "keyExpr", "multiple", "noDataText", "repaintChangesOnly", "rtlEnabled", "selectedIndex", "selectedItem", "selectedItemKeys", "selectedItems", "tabIndex", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onItemClick", "onItemContextMenu", "onItemHold", "onItemRendered", "onItemTitleClick", "onOptionChanged", "onSelectionChanged", "accessKeyChange", "activeStateEnabledChange", "animationDurationChange", "collapsibleChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "itemHoldTimeoutChange", "itemsChange", "itemTemplateChange", "itemTitleTemplateChange", "keyExprChange", "multipleChange", "noDataTextChange", "repaintChangesOnlyChange", "rtlEnabledChange", "selectedIndexChange", "selectedItemChange", "selectedItemKeysChange", "selectedItemsChange", "tabIndexChange", "visibleChange", "widthChange"] }, { kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i6$1.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }, { kind: "component", type: i6.DxLoadPanelComponent, selector: "dx-load-panel", inputs: ["animation", "closeOnOutsideClick", "container", "copyRootClassesToWrapper", "deferRendering", "delay", "elementAttr", "focusStateEnabled", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "indicatorSrc", "maxHeight", "maxWidth", "message", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showIndicator", "showPane", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "delayChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "indicatorSrcChange", "maxHeightChange", "maxWidthChange", "messageChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showIndicatorChange", "showPaneChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: FormComponent, selector: "rs-form", inputs: ["tenant", "className", "oid", "copyOid", "template", "extraAttrMap", "opener", "params", "tabViewContainerRef", "onlyFrontEnd", "model", "readonly"], outputs: ["submitCallback"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DataDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'coast-data-detail', providers: [DataDetailService], template: "<dx-load-panel [container]=\"viewContainerRef.element.nativeElement\" [showPane]=\"false\"\n               [visible]=\"loading\">\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\n</dx-load-panel>\n<div *ngIf=\"!loading && sections.length === 0\" class=\"empty\">\n  <span>\u60A8\u65E0\u6743\u67E5\u770B\u8BE5\u6570\u636E\u5B9E\u4F8B\u4EFB\u4F55\u4FE1\u606F</span>\n</div>\n<ng-container *ngIf=\"sections.length > 0\">\n  <dx-accordion [collapsible]=\"true\" [multiple]=\"true\" [deferRendering]=\"false\" [dataSource]=\"sections\"\n                [selectedItems]=\"sections\">\n    <div *dxTemplate=\"let section of 'title'\" class=\"section-title\">\n      <div class=\"section-title-name\">{{ section.name }}</div>\n    </div>\n    <div *dxTemplate=\"let section of 'item'\">\n      <rs-form [tenant]=\"tenant\" [className]=\"className\" [oid]=\"oid\" [template]=\"section.formTemplate\" [params]=\"params\"\n               [tabViewContainerRef]=\"tabViewContainerRef\" [readonly]=\"true\"></rs-form>\n    </div>\n  </dx-accordion>\n</ng-container>\n", styles: [":host{flex:1;padding:24px;display:flex;flex-flow:column nowrap}:host div.empty{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div.empty span{text-align:center;-webkit-user-select:none;user-select:none}:host .section-title{border-bottom:1px solid var(--coast-border-color, #dddddd)}:host .section-title .section-title-name{height:24px;font-size:14px;font-weight:700;padding:4px 8px;display:flex;flex-flow:column nowrap;justify-content:center}\n"] }]
+            args: [{ selector: 'coast-data-detail', providers: [DataDetailService], template: "<dx-load-panel [container]=\"viewContainerRef.element.nativeElement\" [showPane]=\"false\"\r\n               [visible]=\"loading\">\r\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\r\n</dx-load-panel>\r\n<div *ngIf=\"!loading && sections.length === 0\" class=\"empty\">\r\n  <span>\u60A8\u65E0\u6743\u67E5\u770B\u8BE5\u6570\u636E\u5B9E\u4F8B\u4EFB\u4F55\u4FE1\u606F</span>\r\n</div>\r\n<ng-container *ngIf=\"sections.length > 0\">\r\n  <dx-accordion [collapsible]=\"true\" [multiple]=\"true\" [deferRendering]=\"false\" [dataSource]=\"sections\"\r\n                [selectedItems]=\"sections\">\r\n    <div *dxTemplate=\"let section of 'title'\" class=\"section-title\">\r\n      <div class=\"section-title-name\">{{ section.name }}</div>\r\n    </div>\r\n    <div *dxTemplate=\"let section of 'item'\">\r\n      <rs-form [tenant]=\"tenant\" [className]=\"className\" [oid]=\"oid\" [template]=\"section.formTemplate\" [params]=\"params\"\r\n               [tabViewContainerRef]=\"tabViewContainerRef\" [readonly]=\"true\"></rs-form>\r\n    </div>\r\n  </dx-accordion>\r\n</ng-container>\r\n", styles: [":host{flex:1;padding:24px;display:flex;flex-flow:column nowrap}:host div.empty{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div.empty span{text-align:center;-webkit-user-select:none;user-select:none}:host .section-title{border-bottom:1px solid var(--coast-border-color, #dddddd)}:host .section-title .section-title-name{height:24px;font-size:14px;font-weight:700;padding:4px 8px;display:flex;flex-flow:column nowrap;justify-content:center}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: DataDetailService }]; } });
 
 class FormModule {
@@ -3231,10 +3241,10 @@ class DrawerComponent {
     }
 }
 DrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DrawerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-DrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DrawerComponent, selector: "rs-drawer", ngImport: i0, template: "<div #drawerBackdrop class=\"drawer-backdrop\" (click)=\"hide($event, drawerBackdrop)\">\n  <div class=\"drawer\" [ngStyle]=\"{width: _width}\">\n    <div *ngIf=\"headerTemplate\" class=\"drawer-header\">\n      <ng-template [ngTemplateOutlet]=\"headerTemplate\"\n                   [ngTemplateOutletContext]=\"{$implicit: headerTemplateContext}\"></ng-template>\n    </div>\n    <div class=\"drawer-content\">\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\n    </div>\n    <div class=\"drawer-close\">\n      <dx-button height=\"40px\" icon=\"coast-icon coast-icon-arrow-right-filling\" (onClick)=\"hide($event)\"></dx-button>\n    </div>\n  </div>\n</div>\n", styles: [":host .drawer-backdrop{position:absolute;inset:0;z-index:calc(var(--coast-z-index-drawer, 1040) - 1)}:host .drawer-backdrop .drawer{position:absolute;right:0;height:100%;z-index:var(--coast-z-index-drawer, 1040);background-color:var(--coast-base-bg-color, #fff);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", ngImport: i0, template: "<div #drawerBackdrop class=\"drawer-backdrop\" (click)=\"hide($event, drawerBackdrop)\">\r\n  <div class=\"drawer\" [ngStyle]=\"{width: _width}\">\r\n    <div *ngIf=\"headerTemplate\" class=\"drawer-header\">\r\n      <ng-template [ngTemplateOutlet]=\"headerTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: headerTemplateContext}\"></ng-template>\r\n    </div>\r\n    <div class=\"drawer-content\">\r\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\r\n    </div>\r\n    <div class=\"drawer-close\">\r\n      <dx-button height=\"40px\" icon=\"coast-icon coast-icon-arrow-right-filling\" (onClick)=\"hide($event)\"></dx-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host .drawer-backdrop{position:absolute;inset:0;z-index:calc(var(--coast-z-index-drawer, 1040) - 1)}:host .drawer-backdrop .drawer{position:absolute;right:0;height:100%;z-index:var(--coast-z-index-drawer, 1040);background-color:var(--coast-base-bg-color, #fff);display:flex;flex-flow:column nowrap}:host .drawer-backdrop .drawer .drawer-header{flex:0 0 36px;padding:8px;border-bottom:1px solid var(--coast-border-color, #dddddd);display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-end}:host .drawer-backdrop .drawer .drawer-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .drawer-backdrop .drawer .drawer-close{position:absolute;height:100%;width:20px;top:0;left:-20px;display:flex;flex-flow:row nowrap;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-drawer', template: "<div #drawerBackdrop class=\"drawer-backdrop\" (click)=\"hide($event, drawerBackdrop)\">\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"] }]
+            args: [{ selector: 'rs-drawer', template: "<div #drawerBackdrop class=\"drawer-backdrop\" (click)=\"hide($event, drawerBackdrop)\">\r\n  <div class=\"drawer\" [ngStyle]=\"{width: _width}\">\r\n    <div *ngIf=\"headerTemplate\" class=\"drawer-header\">\r\n      <ng-template [ngTemplateOutlet]=\"headerTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: headerTemplateContext}\"></ng-template>\r\n    </div>\r\n    <div class=\"drawer-content\">\r\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\r\n    </div>\r\n    <div class=\"drawer-close\">\r\n      <dx-button height=\"40px\" icon=\"coast-icon coast-icon-arrow-right-filling\" (onClick)=\"hide($event)\"></dx-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host .drawer-backdrop{position:absolute;inset:0;z-index:calc(var(--coast-z-index-drawer, 1040) - 1)}:host .drawer-backdrop .drawer{position:absolute;right:0;height:100%;z-index:var(--coast-z-index-drawer, 1040);background-color:var(--coast-base-bg-color, #fff);display:flex;flex-flow:column nowrap}:host .drawer-backdrop .drawer .drawer-header{flex:0 0 36px;padding:8px;border-bottom:1px solid var(--coast-border-color, #dddddd);display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-end}:host .drawer-backdrop .drawer .drawer-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .drawer-backdrop .drawer .drawer-close{position:absolute;height:100%;width:20px;top:0;left:-20px;display:flex;flex-flow:row nowrap;align-items:center}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 
 class DrawerModule {
@@ -3317,10 +3327,10 @@ class DynamicParamsComponent {
     }
 }
 DynamicParamsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DynamicParamsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DynamicParamsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DynamicParamsComponent, selector: "rs-dynamic-params", inputs: { label: "label", showHelp: "showHelp", keyPlaceholder: "keyPlaceholder", valuePlaceholder: "valuePlaceholder", params: "params", required: "required", readonly: "readonly" }, queries: [{ propertyName: "tooltipContentTemplate", first: true, predicate: TooltipContentTemplateDirective, descendants: true }], ngImport: i0, template: "<div class=\"dx-field\">\n  <div class=\"dx-field-label\">\n    <span>{{ label }}</span>\n    <span *ngIf=\"required\" class=\"required-mark\">&nbsp;*</span>\n    <i *ngIf=\"showHelp\" #dynamicParamsSpan class=\"coast-icon-help cursor-pointer\">\n      <dx-tooltip [target]=\"dynamicParamsSpan\"\n                  [position]=\"'top'\"\n                  [showEvent]=\"'mouseover'\"\n                  [hideEvent]=\"'mouseout'\">\n        <div *dxTemplate=\"let data of 'content'\"\n             style=\"display: flex; flex-flow: column nowrap;align-items: flex-start;\">\n          <ng-container [ngTemplateOutlet]=\"tooltipContentTemplate.templateRef\"></ng-container>\n        </div>\n      </dx-tooltip>\n    </i>\n    <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-add\" (onClick)=\"add()\"\n               [disabled]=\"readonly\"></dx-button>\n  </div>\n  <div class=\"dx-field-value\">\n    <div *ngFor=\"let param of params; let index = index\">\n      <dx-text-box [placeholder]=\"keyPlaceholder\" [(value)]=\"param.name\" [disabled]=\"readonly\"></dx-text-box>\n      <dx-text-box [placeholder]=\"valuePlaceholder\" [(value)]=\"param.value\" [disabled]=\"readonly\"></dx-text-box>\n      <dx-button type=\"danger\" stylingMode=\"text\" icon=\"coast-icon coast-icon-close\"\n                 (onClick)=\"delete(index)\" [disabled]=\"readonly\"></dx-button>\n    </div>\n  </div>\n</div>\n", styles: [":host .dx-field .dx-field-label{display:flex;align-items:center}:host .dx-field .dx-field-value div{display:flex;flex-flow:row nowrap}:host .dx-field .dx-field-value div dx-text-box{flex:1}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i4.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i4$1.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i5.DxTooltipComponent, selector: "dx-tooltip", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showEvent", "target", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showEventChange", "targetChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
+DynamicParamsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DynamicParamsComponent, selector: "rs-dynamic-params", inputs: { label: "label", showHelp: "showHelp", keyPlaceholder: "keyPlaceholder", valuePlaceholder: "valuePlaceholder", params: "params", required: "required", readonly: "readonly" }, queries: [{ propertyName: "tooltipContentTemplate", first: true, predicate: TooltipContentTemplateDirective, descendants: true }], ngImport: i0, template: "<div class=\"dx-field\">\r\n  <div class=\"dx-field-label\">\r\n    <span>{{ label }}</span>\r\n    <span *ngIf=\"required\" class=\"required-mark\">&nbsp;*</span>\r\n    <i *ngIf=\"showHelp\" #dynamicParamsSpan class=\"coast-icon-help cursor-pointer\">\r\n      <dx-tooltip [target]=\"dynamicParamsSpan\"\r\n                  [position]=\"'top'\"\r\n                  [showEvent]=\"'mouseover'\"\r\n                  [hideEvent]=\"'mouseout'\">\r\n        <div *dxTemplate=\"let data of 'content'\"\r\n             style=\"display: flex; flex-flow: column nowrap;align-items: flex-start;\">\r\n          <ng-container [ngTemplateOutlet]=\"tooltipContentTemplate.templateRef\"></ng-container>\r\n        </div>\r\n      </dx-tooltip>\r\n    </i>\r\n    <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-add\" (onClick)=\"add()\"\r\n               [disabled]=\"readonly\"></dx-button>\r\n  </div>\r\n  <div class=\"dx-field-value\">\r\n    <div *ngFor=\"let param of params; let index = index\">\r\n      <dx-text-box [placeholder]=\"keyPlaceholder\" [(value)]=\"param.name\" [disabled]=\"readonly\"></dx-text-box>\r\n      <dx-text-box [placeholder]=\"valuePlaceholder\" [(value)]=\"param.value\" [disabled]=\"readonly\"></dx-text-box>\r\n      <dx-button type=\"danger\" stylingMode=\"text\" icon=\"coast-icon coast-icon-close\"\r\n                 (onClick)=\"delete(index)\" [disabled]=\"readonly\"></dx-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host .dx-field .dx-field-label{display:flex;align-items:center}:host .dx-field .dx-field-value div{display:flex;flex-flow:row nowrap}:host .dx-field .dx-field-value div dx-text-box{flex:1}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i4.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i4$1.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i5.DxTooltipComponent, selector: "dx-tooltip", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showEvent", "target", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showEventChange", "targetChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
 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\">\n      <dx-text-box [placeholder]=\"keyPlaceholder\" [(value)]=\"param.name\" [disabled]=\"readonly\"></dx-text-box>\n      <dx-text-box [placeholder]=\"valuePlaceholder\" [(value)]=\"param.value\" [disabled]=\"readonly\"></dx-text-box>\n      <dx-button type=\"danger\" stylingMode=\"text\" icon=\"coast-icon coast-icon-close\"\n                 (onClick)=\"delete(index)\" [disabled]=\"readonly\"></dx-button>\n    </div>\n  </div>\n</div>\n", styles: [":host .dx-field .dx-field-label{display:flex;align-items:center}:host .dx-field .dx-field-value div{display:flex;flex-flow:row nowrap}:host .dx-field .dx-field-value div dx-text-box{flex:1}\n"] }]
+            args: [{ selector: 'rs-dynamic-params', template: "<div class=\"dx-field\">\r\n  <div class=\"dx-field-label\">\r\n    <span>{{ label }}</span>\r\n    <span *ngIf=\"required\" class=\"required-mark\">&nbsp;*</span>\r\n    <i *ngIf=\"showHelp\" #dynamicParamsSpan class=\"coast-icon-help cursor-pointer\">\r\n      <dx-tooltip [target]=\"dynamicParamsSpan\"\r\n                  [position]=\"'top'\"\r\n                  [showEvent]=\"'mouseover'\"\r\n                  [hideEvent]=\"'mouseout'\">\r\n        <div *dxTemplate=\"let data of 'content'\"\r\n             style=\"display: flex; flex-flow: column nowrap;align-items: flex-start;\">\r\n          <ng-container [ngTemplateOutlet]=\"tooltipContentTemplate.templateRef\"></ng-container>\r\n        </div>\r\n      </dx-tooltip>\r\n    </i>\r\n    <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-add\" (onClick)=\"add()\"\r\n               [disabled]=\"readonly\"></dx-button>\r\n  </div>\r\n  <div class=\"dx-field-value\">\r\n    <div *ngFor=\"let param of params; let index = index\">\r\n      <dx-text-box [placeholder]=\"keyPlaceholder\" [(value)]=\"param.name\" [disabled]=\"readonly\"></dx-text-box>\r\n      <dx-text-box [placeholder]=\"valuePlaceholder\" [(value)]=\"param.value\" [disabled]=\"readonly\"></dx-text-box>\r\n      <dx-button type=\"danger\" stylingMode=\"text\" icon=\"coast-icon coast-icon-close\"\r\n                 (onClick)=\"delete(index)\" [disabled]=\"readonly\"></dx-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host .dx-field .dx-field-label{display:flex;align-items:center}:host .dx-field .dx-field-value div{display:flex;flex-flow:row nowrap}:host .dx-field .dx-field-value div dx-text-box{flex:1}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], showHelp: [{
@@ -3367,6 +3377,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 }]
         }] });
 
+class FullscreenDirective {
+    set isFullscreen(isFullscreen) {
+        this._isFullscreen = isFullscreen;
+        this.toggle();
+    }
+    get isFullscreen() {
+        return this._isFullscreen;
+    }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.mode = 'normal';
+        this._isFullscreen = false;
+        this.isFullscreenChange = new EventEmitter();
+        this.onFullScreenChange = (event) => {
+            if (!document.fullscreenElement) {
+                this.exitNormalFullscreen();
+                this.isFullscreenChange.emit(false);
+            }
+        };
+    }
+    ngOnInit() {
+        document.addEventListener('fullscreenchange', this.onFullScreenChange);
+    }
+    ngOnDestroy() {
+        document.removeEventListener('fullscreenchange', this.onFullScreenChange);
+    }
+    toggle() {
+        switch (this.mode) {
+            case "normal":
+                if (this.isFullscreen) {
+                    this.launchNormalFullscreen();
+                }
+                else {
+                    this.exitNormalFullscreen();
+                }
+                break;
+            case "immersive":
+                if (this.isFullscreen) {
+                    this.launchImmersiveFullScreen().then(() => {
+                        this.launchNormalFullscreen();
+                    });
+                }
+                else {
+                    this.exitImmersiveFullScreen().then(() => {
+                        this.exitNormalFullscreen();
+                    });
+                }
+                break;
+        }
+    }
+    launchNormalFullscreen() {
+        this.elementRef.nativeElement.classList.add('fullscreen');
+        document.getElementsByTagName('html')[0].classList.add('coast-fullscreen');
+    }
+    exitNormalFullscreen() {
+        this.elementRef.nativeElement.classList.remove('fullscreen');
+        document.getElementsByTagName('html')[0].classList.remove('coast-fullscreen');
+    }
+    launchImmersiveFullScreen() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield document.documentElement.requestFullscreen().then();
+        });
+    }
+    exitImmersiveFullScreen() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!document.fullscreenElement) {
+                return;
+            }
+            return yield document.exitFullscreen().then();
+        });
+    }
+}
+FullscreenDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FullscreenDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+FullscreenDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: FullscreenDirective, isStandalone: true, selector: "[rsFullscreen]", inputs: { mode: "mode", isFullscreen: "isFullscreen" }, outputs: { isFullscreenChange: "isFullscreenChange" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FullscreenDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rsFullscreen]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { mode: [{
+                type: Input
+            }], isFullscreen: [{
+                type: Input
+            }], isFullscreenChange: [{
+                type: Output
+            }] } });
+
 class IconSelectorComponent {
     constructor() {
         this.select = new EventEmitter();
@@ -3392,10 +3490,10 @@ class IconSelectorComponent {
     }
 }
 IconSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: IconSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IconSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: IconSelectorComponent, selector: "rs-icon-selector", inputs: { target: "target" }, outputs: { select: "select" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["iconSelector"], descendants: true, static: true }, { propertyName: "iconZoomOut", first: true, predicate: ["iconZoomOut"], descendants: true, static: true }], ngImport: i0, template: "<dx-popover #iconSelector\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\r\n            maxWidth=\"280\"\r\n            maxHeight=\"280\"\r\n            [target]=\"target\"\r\n            [showEvent]=\"{name: 'click'}\">\r\n  <div *dxTemplate=\"let data of 'content'\">\r\n    <ng-container *ngFor=\"let icon of iconList; let index=index\">\r\n      <dx-button [icon]=\"'coast-icon ' + icon\" (onClick)=\"selectIcon(icon)\"\r\n                 (mouseenter)=\"zoomOut($event, icon)\" (mouseleave)=\"iconZoomOut.instance.hide()\"></dx-button>\r\n    </ng-container>\r\n  </div>\r\n</dx-popover>\r\n<dx-popover #iconZoomOut height=\"72px\" [enableBodyScroll]=\"false\">\r\n  <div *dxTemplate=\"let data of 'content'\"\r\n       style=\"display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;\">\r\n    <i [class]=\"hoverIcon\" style=\"font-size: 36px;\"></i>\r\n    <span>{{hoverIcon?.substring(11)}}</span>\r\n  </div>\r\n</dx-popover>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i4.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i4$2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "enableBodyScroll", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
 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" }]
+            args: [{ selector: 'rs-icon-selector', template: "<dx-popover #iconSelector\r\n            maxWidth=\"280\"\r\n            maxHeight=\"280\"\r\n            [target]=\"target\"\r\n            [showEvent]=\"{name: 'click'}\">\r\n  <div *dxTemplate=\"let data of 'content'\">\r\n    <ng-container *ngFor=\"let icon of iconList; let index=index\">\r\n      <dx-button [icon]=\"'coast-icon ' + icon\" (onClick)=\"selectIcon(icon)\"\r\n                 (mouseenter)=\"zoomOut($event, icon)\" (mouseleave)=\"iconZoomOut.instance.hide()\"></dx-button>\r\n    </ng-container>\r\n  </div>\r\n</dx-popover>\r\n<dx-popover #iconZoomOut height=\"72px\" [enableBodyScroll]=\"false\">\r\n  <div *dxTemplate=\"let data of 'content'\"\r\n       style=\"display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;\">\r\n    <i [class]=\"hoverIcon\" style=\"font-size: 36px;\"></i>\r\n    <span>{{hoverIcon?.substring(11)}}</span>\r\n  </div>\r\n</dx-popover>\r\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { target: [{
                 type: Input
             }], select: [{
@@ -3630,10 +3728,10 @@ class PdfViewerComponent {
     }
 }
 PdfViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PdfViewerComponent, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-PdfViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: PdfViewerComponent, isStandalone: true, selector: "rs-pdf-viewer", inputs: { src: "src" }, outputs: { loaded: "loaded" }, viewQueries: [{ propertyName: "viewer", first: true, predicate: PdfJsViewerComponent, descendants: true, static: true }], ngImport: i0, template: "<ng2-pdfjs-viewer\n  [openFile]=\"false\"\n  [download]=\"false\"\n  [viewBookmark]=\"false\"\n>\n</ng2-pdfjs-viewer>\n", styles: [":host{display:flex;flex-flow:column nowrap}:host ng2-pdfjs-viewer{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PdfJsViewerModule }, { kind: "component", type: i2$3.PdfJsViewerComponent, selector: "ng2-pdfjs-viewer", inputs: ["viewerId", "viewerFolder", "externalWindow", "showSpinner", "downloadFileName", "openFile", "download", "startDownload", "viewBookmark", "print", "startPrint", "fullScreen", "find", "zoom", "nameddest", "pagemode", "lastPage", "rotatecw", "rotateccw", "cursor", "scroll", "spread", "locale", "useOnlyCssZoom", "errorOverride", "errorAppend", "errorMessage", "diagnosticLogs", "externalWindowOptions", "page", "pdfSrc"], outputs: ["onBeforePrint", "onAfterPrint", "onDocumentLoad", "onPageChange"] }] });
+PdfViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: PdfViewerComponent, isStandalone: true, selector: "rs-pdf-viewer", inputs: { src: "src" }, outputs: { loaded: "loaded" }, viewQueries: [{ propertyName: "viewer", first: true, predicate: PdfJsViewerComponent, descendants: true, static: true }], ngImport: i0, template: "<ng2-pdfjs-viewer\r\n  [openFile]=\"false\"\r\n  [download]=\"false\"\r\n  [viewBookmark]=\"false\"\r\n>\r\n</ng2-pdfjs-viewer>\r\n", styles: [":host{display:flex;flex-flow:column nowrap}:host ng2-pdfjs-viewer{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PdfJsViewerModule }, { kind: "component", type: i2$3.PdfJsViewerComponent, selector: "ng2-pdfjs-viewer", inputs: ["viewerId", "viewerFolder", "externalWindow", "showSpinner", "downloadFileName", "openFile", "download", "startDownload", "viewBookmark", "print", "startPrint", "fullScreen", "find", "zoom", "nameddest", "pagemode", "lastPage", "rotatecw", "rotateccw", "cursor", "scroll", "spread", "locale", "useOnlyCssZoom", "errorOverride", "errorAppend", "errorMessage", "diagnosticLogs", "externalWindowOptions", "page", "pdfSrc"], outputs: ["onBeforePrint", "onAfterPrint", "onDocumentLoad", "onPageChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PdfViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-pdf-viewer', standalone: true, imports: [CommonModule, PdfJsViewerModule], template: "<ng2-pdfjs-viewer\n  [openFile]=\"false\"\n  [download]=\"false\"\n  [viewBookmark]=\"false\"\n>\n</ng2-pdfjs-viewer>\n", styles: [":host{display:flex;flex-flow:column nowrap}:host ng2-pdfjs-viewer{flex:1}\n"] }]
+            args: [{ selector: 'rs-pdf-viewer', standalone: true, imports: [CommonModule, PdfJsViewerModule], template: "<ng2-pdfjs-viewer\r\n  [openFile]=\"false\"\r\n  [download]=\"false\"\r\n  [viewBookmark]=\"false\"\r\n>\r\n</ng2-pdfjs-viewer>\r\n", styles: [":host{display:flex;flex-flow:column nowrap}:host ng2-pdfjs-viewer{flex:1}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; }, propDecorators: { src: [{
                 type: Input
             }], loaded: [{
@@ -3810,5 +3908,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BoxContainerComponent, BoxContainerModule, CamundaBpmnEditorComponent, CamundaBpmnEditorModule, ChangeFilter, CodeEditorComponent, CodeEditorModule, DataDetailComponent, DataDetailModule, DataGridComponent, DataGridFactory, DataGridModule, DataGridService, DrawerComponent, DrawerModule, DrawerService, DynamicParamsComponent, DynamicParamsModule, FormComponent, FormModule, FormService, IconSelectorComponent, IconSelectorModule, InstanceLinkTemplateDirective, ItemConfigComponent, ItemStyleComponent, MasterDetailTemplateDirective, ModalComponent, ModalModule, ModalService, PdfViewerComponent, PluginManager, RowButtonsTemplateDirective, TooltipContentTemplateDirective, WebsocketModule, WebsocketService, download_file, file_type_icon, format_date, format_datetime, format_file_size, notify_error, notify_success, notify_warning, validate, validate_group };
+export { BoxContainerComponent, BoxContainerModule, CamundaBpmnEditorComponent, CamundaBpmnEditorModule, ChangeFilter, CodeEditorComponent, CodeEditorModule, DataDetailComponent, DataDetailModule, DataGridComponent, DataGridFactory, DataGridModule, DataGridService, DrawerComponent, DrawerModule, DrawerService, DynamicParamsComponent, DynamicParamsModule, FormComponent, FormModule, FormService, FullscreenDirective, IconSelectorComponent, IconSelectorModule, InstanceLinkTemplateDirective, ItemConfigComponent, ItemStyleComponent, MasterDetailTemplateDirective, ModalComponent, ModalModule, ModalService, PdfViewerComponent, PluginManager, RowButtonsTemplateDirective, TooltipContentTemplateDirective, WebsocketModule, WebsocketService, download_file, file_type_icon, format_date, format_datetime, format_file_size, notify_error, notify_success, notify_warning, support_preview_ext, validate, validate_group };
 //# sourceMappingURL=ngx-rs-ant.mjs.map