ngx-rs-ant 0.12.8 → 0.13.1

package/fesm2020/ngx-rs-ant.mjs

@@ -8,7 +8,7 @@ import * as i2 from 'devextreme-angular/ui/number-box';
 import * as i2$1 from 'devextreme-angular/ui/draggable';
 import * as i3$2 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { DevExtremeModule, DxDataGridComponent, DxValidationGroupComponent } from 'devextreme-angular';
+import { DevExtremeModule, DxDataGridComponent, DxDrawerModule, DxValidationGroupComponent } from 'devextreme-angular';
 import { HelperUtils, DevUIModule } from 'ng-devui';
 import * as i1$1 from '@angular/common/http';
 import CustomStore from 'devextreme/data/custom_store';
@@ -19,7 +19,8 @@ import * as i4 from 'devextreme-angular/ui/tooltip';
 import * as i2$2 from '@angular/platform-browser';
 import * as i2$3 from 'devextreme-angular/ui/button';
 import * as i3$1 from 'devextreme-angular/ui/text-box';
-import * as i6 from 'devextreme-angular/ui/validation-group';
+import * as i6 from 'devextreme-angular/ui/load-panel';
+import * as i7 from 'devextreme-angular/ui/validation-group';
 import * as i4$2 from 'devextreme-angular/ui/popover';
 import notify from 'devextreme/ui/notify';
 
@@ -143,10 +144,10 @@ class PluginActiveComponent {
     }
 }
 PluginActiveComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PluginActiveComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PluginActiveComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: PluginActiveComponent, selector: "rs-plugin-active", host: { properties: { "style": "this._style" } }, ngImport: i0, template: "<div class=\"active-item\">\r\n  <div class=\"active-bar\">\r\n    <i *ngIf=\"showClose && !showDivider\" class=\"icon-drag\"></i>\r\n    <span>{{name}}</span>\r\n    <i class=\"coast-icon-add-row\" title=\"\u6DFB\u52A0\u884C\" (click)=\"splitItem('column')\"></i>\r\n    <i class=\"coast-icon-add-column\" title=\"\u6DFB\u52A0\u5217\" (click)=\"splitItem('row')\"></i>\r\n    <i *ngIf=\"showClose\" class=\"icon-close\" (click)=\"onItemCloseIconClick($event)\"></i>\r\n  </div>\r\n  <rs-divider *ngIf=\"showDivider\" [targetElement]=\"targetElement\" direction=\"row\"\r\n              (dividerClick)=\"splitItem('column')\"></rs-divider>\r\n  <rs-divider *ngIf=\"showDivider\" [targetElement]=\"targetElement\" direction=\"column\"\r\n              (dividerClick)=\"splitItem('row')\"></rs-divider>\r\n</div>\r\n", styles: [":host{display:none;position:absolute;border:1px solid #337ab7;pointer-events:none}:host .active-item{width:100%;height:100%}:host .active-item .active-bar{padding:2px 4px;color:#fff;background-color:#337ab7;position:absolute;top:-23px;right:-1px;display:flex;flex-flow:row nowrap;align-items:center;pointer-events:all;white-space:nowrap}:host .active-item .active-bar i{flex:none;cursor:pointer}:host .active-item .active-bar i:not(:last-child){margin-right:8px}:host .active-item .active-bar i.icon-drag{cursor:move}:host .active-item .active-bar i.icon-close:hover{color:#d9534f}:host .active-item .active-bar span{flex:1;margin-right:8px}.plugin-active>:host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DividerComponent, selector: "rs-divider", inputs: ["direction", "targetElement"], outputs: ["dividerClick"] }] });
+PluginActiveComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: PluginActiveComponent, selector: "rs-plugin-active", host: { properties: { "style": "this._style" } }, ngImport: i0, template: "<div class=\"active-item\">\r\n  <div class=\"active-bar\">\r\n    <i *ngIf=\"showClose && !showDivider\" class=\"icon-drag\"></i>\r\n    <span>{{name}}</span>\r\n    <i class=\"coast-icon-add-row\" title=\"\u6DFB\u52A0\u884C\" (click)=\"splitItem('column')\"></i>\r\n    <i class=\"coast-icon-add-column\" title=\"\u6DFB\u52A0\u5217\" (click)=\"splitItem('row')\"></i>\r\n    <i *ngIf=\"showClose\" class=\"icon-close\" (click)=\"onItemCloseIconClick($event)\"></i>\r\n  </div>\r\n  <rs-divider *ngIf=\"showDivider\" [targetElement]=\"targetElement\" direction=\"row\"\r\n              (dividerClick)=\"splitItem('column')\"></rs-divider>\r\n  <rs-divider *ngIf=\"showDivider\" [targetElement]=\"targetElement\" direction=\"column\"\r\n              (dividerClick)=\"splitItem('row')\"></rs-divider>\r\n</div>\r\n", styles: [":host{display:none;position:absolute;border:1px solid var(--coast-default-color, #337ab7);pointer-events:none}:host .active-item{width:100%;height:100%}:host .active-item .active-bar{padding:2px 4px;color:#fff;background-color:var(--coast-default-color, #337ab7);position:absolute;top:-23px;right:-1px;display:flex;flex-flow:row nowrap;align-items:center;pointer-events:all;white-space:nowrap}:host .active-item .active-bar i{flex:none;cursor:pointer}:host .active-item .active-bar i:not(:last-child){margin-right:8px}:host .active-item .active-bar i.icon-drag{cursor:move}:host .active-item .active-bar i.icon-close:hover{color:var(--coast-danger-color, #d9534f)}:host .active-item .active-bar span{flex:1;margin-right:8px}.plugin-active>:host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DividerComponent, selector: "rs-divider", inputs: ["direction", "targetElement"], outputs: ["dividerClick"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PluginActiveComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-plugin-active', template: "<div class=\"active-item\">\r\n  <div class=\"active-bar\">\r\n    <i *ngIf=\"showClose && !showDivider\" class=\"icon-drag\"></i>\r\n    <span>{{name}}</span>\r\n    <i class=\"coast-icon-add-row\" title=\"\u6DFB\u52A0\u884C\" (click)=\"splitItem('column')\"></i>\r\n    <i class=\"coast-icon-add-column\" title=\"\u6DFB\u52A0\u5217\" (click)=\"splitItem('row')\"></i>\r\n    <i *ngIf=\"showClose\" class=\"icon-close\" (click)=\"onItemCloseIconClick($event)\"></i>\r\n  </div>\r\n  <rs-divider *ngIf=\"showDivider\" [targetElement]=\"targetElement\" direction=\"row\"\r\n              (dividerClick)=\"splitItem('column')\"></rs-divider>\r\n  <rs-divider *ngIf=\"showDivider\" [targetElement]=\"targetElement\" direction=\"column\"\r\n              (dividerClick)=\"splitItem('row')\"></rs-divider>\r\n</div>\r\n", styles: [":host{display:none;position:absolute;border:1px solid #337ab7;pointer-events:none}:host .active-item{width:100%;height:100%}:host .active-item .active-bar{padding:2px 4px;color:#fff;background-color:#337ab7;position:absolute;top:-23px;right:-1px;display:flex;flex-flow:row nowrap;align-items:center;pointer-events:all;white-space:nowrap}:host .active-item .active-bar i{flex:none;cursor:pointer}:host .active-item .active-bar i:not(:last-child){margin-right:8px}:host .active-item .active-bar i.icon-drag{cursor:move}:host .active-item .active-bar i.icon-close:hover{color:#d9534f}:host .active-item .active-bar span{flex:1;margin-right:8px}.plugin-active>:host{display:block}\n"] }]
+            args: [{ selector: 'rs-plugin-active', template: "<div class=\"active-item\">\r\n  <div class=\"active-bar\">\r\n    <i *ngIf=\"showClose && !showDivider\" class=\"icon-drag\"></i>\r\n    <span>{{name}}</span>\r\n    <i class=\"coast-icon-add-row\" title=\"\u6DFB\u52A0\u884C\" (click)=\"splitItem('column')\"></i>\r\n    <i class=\"coast-icon-add-column\" title=\"\u6DFB\u52A0\u5217\" (click)=\"splitItem('row')\"></i>\r\n    <i *ngIf=\"showClose\" class=\"icon-close\" (click)=\"onItemCloseIconClick($event)\"></i>\r\n  </div>\r\n  <rs-divider *ngIf=\"showDivider\" [targetElement]=\"targetElement\" direction=\"row\"\r\n              (dividerClick)=\"splitItem('column')\"></rs-divider>\r\n  <rs-divider *ngIf=\"showDivider\" [targetElement]=\"targetElement\" direction=\"column\"\r\n              (dividerClick)=\"splitItem('row')\"></rs-divider>\r\n</div>\r\n", styles: [":host{display:none;position:absolute;border:1px solid var(--coast-default-color, #337ab7);pointer-events:none}:host .active-item{width:100%;height:100%}:host .active-item .active-bar{padding:2px 4px;color:#fff;background-color:var(--coast-default-color, #337ab7);position:absolute;top:-23px;right:-1px;display:flex;flex-flow:row nowrap;align-items:center;pointer-events:all;white-space:nowrap}:host .active-item .active-bar i{flex:none;cursor:pointer}:host .active-item .active-bar i:not(:last-child){margin-right:8px}:host .active-item .active-bar i.icon-drag{cursor:move}:host .active-item .active-bar i.icon-close:hover{color:var(--coast-danger-color, #d9534f)}:host .active-item .active-bar span{flex:1;margin-right:8px}.plugin-active>:host{display:block}\n"] }]
         }], propDecorators: { _style: [{
                 type: HostBinding,
                 args: ['style']
@@ -167,10 +168,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 #337ab7;pointer-events:none}:host .hover-title{color:#337ab7;position:absolute;top:-18px;left:0}.plugin-active>:host{display:none!important}.plugin-hover>:host{display:block}\n"] });
+PluginHoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: PluginHoverComponent, selector: "rs-plugin-hover", host: { properties: { "style": "this._style" } }, ngImport: i0, template: "<div class=\"hover-title\">{{name}}</div>\n", styles: [":host{display:none;position:absolute;border:1px dashed var(--coast-default-color, #337ab7);pointer-events:none}:host .hover-title{color:var(--coast-default-color, #337ab7);position:absolute;top:-18px;left:0}.plugin-active>:host{display:none!important}.plugin-hover>:host{display:block}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PluginHoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-plugin-hover', template: "<div class=\"hover-title\">{{name}}</div>\n", styles: [":host{display:none;position:absolute;border:1px dashed #337ab7;pointer-events:none}:host .hover-title{color:#337ab7;position:absolute;top:-18px;left:0}.plugin-active>:host{display:none!important}.plugin-hover>:host{display:block}\n"] }]
+            args: [{ selector: 'rs-plugin-hover', template: "<div class=\"hover-title\">{{name}}</div>\n", styles: [":host{display:none;position:absolute;border:1px dashed var(--coast-default-color, #337ab7);pointer-events:none}:host .hover-title{color:var(--coast-default-color, #337ab7);position:absolute;top:-18px;left:0}.plugin-active>:host{display:none!important}.plugin-hover>:host{display:block}\n"] }]
         }], propDecorators: { _style: [{
                 type: HostBinding,
                 args: ['style']
@@ -446,10 +447,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 #dddddd;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AQMAAAAAMksxAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRF8fHxAAAAMCd7XAAAAAJ0Uk5T/wDltzBKAAABJUlEQVR4nFVSy23EIBCdAiKxBaxCC1tBaGk7YG/OjZYSOQptLKKB8Y0D8ssbjBPl9gQz7wfigQbgQxygEXjIAjwDcJEV+PbYb1KAlNDusgE+Q1Va3EPFptJDjwVVZfcNiqwCV9BiIlhW9DdPkEn5GggKRV4igVL2AYJGpc8TFAMa5lXhzHuc69dwEO6DkBI9OhNVii60ERu3VxrjRUVRet7DsMoUbpgny+LRb5b0K2C/CAWejCxCSYVl9wcQSaMEzuRRArcqebzxcMCnUcKQsBKiiVoJoR1+4DfWSodILCGa5zXTvKWo5L5ars0C/iuh003F7GecbG62YVujunzypDqZTcsK76HF2UYP41HM4WoO7eEWNLUUyaHf/3L9JvXnBwjzS/wAoXR0PDbjCSUAAAAASUVORK5CYII=) repeat #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:#d4d4d4}\n"] });
+ItemBlankComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ItemBlankComponent, selector: "rs-item-blank", ngImport: i0, template: "<div>\n  <span>\u62D6\u62FD\u7EC4\u4EF6\u5230\u6B64\u5904</span>\n</div>\n", styles: [":host{flex:1;margin:8px;border:1px solid var(--coast-border-color, #dddddd);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AQMAAAAAMksxAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRF8fHxAAAAMCd7XAAAAAJ0Uk5T/wDltzBKAAABJUlEQVR4nFVSy23EIBCdAiKxBaxCC1tBaGk7YG/OjZYSOQptLKKB8Y0D8ssbjBPl9gQz7wfigQbgQxygEXjIAjwDcJEV+PbYb1KAlNDusgE+Q1Va3EPFptJDjwVVZfcNiqwCV9BiIlhW9DdPkEn5GggKRV4igVL2AYJGpc8TFAMa5lXhzHuc69dwEO6DkBI9OhNVii60ERu3VxrjRUVRet7DsMoUbpgny+LRb5b0K2C/CAWejCxCSYVl9wcQSaMEzuRRArcqebzxcMCnUcKQsBKiiVoJoR1+4DfWSodILCGa5zXTvKWo5L5ars0C/iuh003F7GecbG62YVujunzypDqZTcsK76HF2UYP41HM4WoO7eEWNLUUyaHf/3L9JvXnBwjzS/wAoXR0PDbjCSUAAAAASUVORK5CYII=) repeat var(--coast-global-bg-color, #f6f6f8);display:flex;flex-flow:row nowrap;justify-content:center;pointer-events:all}:host div{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}:host.plugin-hover>div{pointer-events:none}.active>:host div{background-color:var(--coast-empty-color, #d4d4d4)}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ItemBlankComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-item-blank', template: "<div>\n  <span>\u62D6\u62FD\u7EC4\u4EF6\u5230\u6B64\u5904</span>\n</div>\n", styles: [":host{flex:1;margin:8px;border:1px solid #dddddd;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AQMAAAAAMksxAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRF8fHxAAAAMCd7XAAAAAJ0Uk5T/wDltzBKAAABJUlEQVR4nFVSy23EIBCdAiKxBaxCC1tBaGk7YG/OjZYSOQptLKKB8Y0D8ssbjBPl9gQz7wfigQbgQxygEXjIAjwDcJEV+PbYb1KAlNDusgE+Q1Va3EPFptJDjwVVZfcNiqwCV9BiIlhW9DdPkEn5GggKRV4igVL2AYJGpc8TFAMa5lXhzHuc69dwEO6DkBI9OhNVii60ERu3VxrjRUVRet7DsMoUbpgny+LRb5b0K2C/CAWejCxCSYVl9wcQSaMEzuRRArcqebzxcMCnUcKQsBKiiVoJoR1+4DfWSodILCGa5zXTvKWo5L5ars0C/iuh003F7GecbG62YVujunzypDqZTcsK76HF2UYP41HM4WoO7eEWNLUUyaHf/3L9JvXnBwjzS/wAoXR0PDbjCSUAAAAASUVORK5CYII=) repeat #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:#d4d4d4}\n"] }]
+            args: [{ selector: 'rs-item-blank', template: "<div>\n  <span>\u62D6\u62FD\u7EC4\u4EF6\u5230\u6B64\u5904</span>\n</div>\n", styles: [":host{flex:1;margin:8px;border:1px solid var(--coast-border-color, #dddddd);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AQMAAAAAMksxAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRF8fHxAAAAMCd7XAAAAAJ0Uk5T/wDltzBKAAABJUlEQVR4nFVSy23EIBCdAiKxBaxCC1tBaGk7YG/OjZYSOQptLKKB8Y0D8ssbjBPl9gQz7wfigQbgQxygEXjIAjwDcJEV+PbYb1KAlNDusgE+Q1Va3EPFptJDjwVVZfcNiqwCV9BiIlhW9DdPkEn5GggKRV4igVL2AYJGpc8TFAMa5lXhzHuc69dwEO6DkBI9OhNVii60ERu3VxrjRUVRet7DsMoUbpgny+LRb5b0K2C/CAWejCxCSYVl9wcQSaMEzuRRArcqebzxcMCnUcKQsBKiiVoJoR1+4DfWSodILCGa5zXTvKWo5L5ars0C/iuh003F7GecbG62YVujunzypDqZTcsK76HF2UYP41HM4WoO7eEWNLUUyaHf/3L9JvXnBwjzS/wAoXR0PDbjCSUAAAAASUVORK5CYII=) repeat var(--coast-global-bg-color, #f6f6f8);display:flex;flex-flow:row nowrap;justify-content:center;pointer-events:all}:host div{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}:host.plugin-hover>div{pointer-events:none}.active>:host div{background-color:var(--coast-empty-color, #d4d4d4)}\n"] }]
         }] });
 
 class BoxItemComponent {
@@ -627,10 +628,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:#d4d4d4}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.DxDraggableComponent, selector: "dx-draggable", inputs: ["autoScroll", "boundary", "clone", "container", "cursorOffset", "data", "dragDirection", "dragTemplate", "elementAttr", "group", "handle", "height", "rtlEnabled", "scrollSensitivity", "scrollSpeed", "width"], outputs: ["onDisposing", "onDragEnd", "onDragMove", "onDragStart", "onInitialized", "onOptionChanged", "autoScrollChange", "boundaryChange", "cloneChange", "containerChange", "cursorOffsetChange", "dataChange", "dragDirectionChange", "dragTemplateChange", "elementAttrChange", "groupChange", "handleChange", "heightChange", "rtlEnabledChange", "scrollSensitivityChange", "scrollSpeedChange", "widthChange"] }, { kind: "directive", type: BoxItemHostDirective, selector: "[rsBoxItemHost]", inputs: ["hostId"] }] });
+BoxItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: BoxItemComponent, selector: "rs-box-item", outputs: { leaveOneItem: "leaveOneItem" }, host: { properties: { "style.flex-direction": "this._direction", "style": "this._style" } }, viewQueries: [{ propertyName: "itemHosts", predicate: BoxItemHostDirective, descendants: true }], ngImport: i0, template: "<ng-container *ngFor=\"let item of config.list; index as index\">\n  <ng-container *ngIf=\"boxContainer.editMode\">\n    <ng-container *ngIf=\"item.type === 'plugin'\">\n      <dx-draggable [ngStyle]=\"calcStyle(item)\"\n                    [data]=\"{boxItem: this, item, index}\"\n                    handle=\".icon-drag\"\n                    group=\"rsBoxContainerDragGroup\"\n                    (onDragMove)=\"onDragMove($event)\"\n                    (onDragEnd)=\"onDragEnd($event)\">\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n      </dx-draggable>\n    </ng-container>\n    <ng-container *ngIf=\"item.type === 'item'\">\n      <div [ngStyle]=\"calcStyle(item)\">\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"item.type === 'blank'\">\n      <dx-draggable [ngStyle]=\"calcStyle(item)\"\n                    [data]=\"{boxItem: this, item, index}\"\n                    group=\"rsBoxContainerDragGroup\"\n                    (onDragStart)=\"$event.cancel = true\">\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n      </dx-draggable>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!boxContainer.editMode\">\n    <div [ngStyle]=\"calcStyle(item)\">\n      <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [":host{flex:1;display:flex;flex-flow:row nowrap;pointer-events:all}:host dx-draggable,:host div{display:flex;flex-flow:row nowrap}:host dx-draggable.active,:host div.active{background-color:var(--coast-empty-color, #d4d4d4)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.DxDraggableComponent, selector: "dx-draggable", inputs: ["autoScroll", "boundary", "clone", "container", "cursorOffset", "data", "dragDirection", "dragTemplate", "elementAttr", "group", "handle", "height", "rtlEnabled", "scrollSensitivity", "scrollSpeed", "width"], outputs: ["onDisposing", "onDragEnd", "onDragMove", "onDragStart", "onInitialized", "onOptionChanged", "autoScrollChange", "boundaryChange", "cloneChange", "containerChange", "cursorOffsetChange", "dataChange", "dragDirectionChange", "dragTemplateChange", "elementAttrChange", "groupChange", "handleChange", "heightChange", "rtlEnabledChange", "scrollSensitivityChange", "scrollSpeedChange", "widthChange"] }, { kind: "directive", type: BoxItemHostDirective, selector: "[rsBoxItemHost]", inputs: ["hostId"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BoxItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-box-item', template: "<ng-container *ngFor=\"let item of config.list; index as index\">\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:#d4d4d4}\n"] }]
+            args: [{ selector: 'rs-box-item', template: "<ng-container *ngFor=\"let item of config.list; index as index\">\n  <ng-container *ngIf=\"boxContainer.editMode\">\n    <ng-container *ngIf=\"item.type === 'plugin'\">\n      <dx-draggable [ngStyle]=\"calcStyle(item)\"\n                    [data]=\"{boxItem: this, item, index}\"\n                    handle=\".icon-drag\"\n                    group=\"rsBoxContainerDragGroup\"\n                    (onDragMove)=\"onDragMove($event)\"\n                    (onDragEnd)=\"onDragEnd($event)\">\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n      </dx-draggable>\n    </ng-container>\n    <ng-container *ngIf=\"item.type === 'item'\">\n      <div [ngStyle]=\"calcStyle(item)\">\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"item.type === 'blank'\">\n      <dx-draggable [ngStyle]=\"calcStyle(item)\"\n                    [data]=\"{boxItem: this, item, index}\"\n                    group=\"rsBoxContainerDragGroup\"\n                    (onDragStart)=\"$event.cancel = true\">\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n      </dx-draggable>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!boxContainer.editMode\">\n    <div [ngStyle]=\"calcStyle(item)\">\n      <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [":host{flex:1;display:flex;flex-flow:row nowrap;pointer-events:all}:host dx-draggable,:host div{display:flex;flex-flow:row nowrap}:host dx-draggable.active,:host div.active{background-color:var(--coast-empty-color, #d4d4d4)}\n"] }]
         }], propDecorators: { _direction: [{
                 type: HostBinding,
                 args: ['style.flex-direction']
@@ -1353,10 +1354,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: "<button #fileBtn (click)=\"download()\" [disabled]=\"loading\">\n  <i class=\"dx-icon-{{icon}}\"></i>\n  {{filename}}\n  <dx-tooltip [target]=\"fileBtn\"\n              [position]=\"'top'\"\n              [visible]=\"false\"\n              [showEvent]=\"'mouseenter'\"\n              [hideEvent]=\"'mouseleave'\">\n    <div *dxTemplate=\"let data of 'content'\">\n      <div style=\"max-width: 320px; text-align: left; white-space: normal;\" [innerHTML]=\"content\"></div>\n    </div>\n  </dx-tooltip>\n</button><br/>\n", styles: [":host{height:20px;padding-right:4px}:host button{color:#337ab7}\n"], dependencies: [{ kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i4.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: "<button #fileBtn (click)=\"download()\" [disabled]=\"loading\">\n  <i class=\"dx-icon-{{icon}}\"></i>\n  {{filename}}\n  <dx-tooltip [target]=\"fileBtn\"\n              [position]=\"'top'\"\n              [visible]=\"false\"\n              [showEvent]=\"'mouseenter'\"\n              [hideEvent]=\"'mouseleave'\">\n    <div *dxTemplate=\"let data of 'content'\">\n      <div style=\"max-width: 320px; text-align: left; white-space: normal;\" [innerHTML]=\"content\"></div>\n    </div>\n  </dx-tooltip>\n</button><br/>\n", styles: [":host{height:20px;padding-right:4px}:host button{color:var(--coast-default-color, #337ab7)}\n"], dependencies: [{ kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i4.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: "<button #fileBtn (click)=\"download()\" [disabled]=\"loading\">\n  <i class=\"dx-icon-{{icon}}\"></i>\n  {{filename}}\n  <dx-tooltip [target]=\"fileBtn\"\n              [position]=\"'top'\"\n              [visible]=\"false\"\n              [showEvent]=\"'mouseenter'\"\n              [hideEvent]=\"'mouseleave'\">\n    <div *dxTemplate=\"let data of 'content'\">\n      <div style=\"max-width: 320px; text-align: left; white-space: normal;\" [innerHTML]=\"content\"></div>\n    </div>\n  </dx-tooltip>\n</button><br/>\n", styles: [":host{height:20px;padding-right:4px}:host button{color:#337ab7}\n"] }]
+            args: [{ selector: 'rs-file-cell-template', template: "<button #fileBtn (click)=\"download()\" [disabled]=\"loading\">\n  <i class=\"dx-icon-{{icon}}\"></i>\n  {{filename}}\n  <dx-tooltip [target]=\"fileBtn\"\n              [position]=\"'top'\"\n              [visible]=\"false\"\n              [showEvent]=\"'mouseenter'\"\n              [hideEvent]=\"'mouseleave'\">\n    <div *dxTemplate=\"let data of 'content'\">\n      <div style=\"max-width: 320px; text-align: left; white-space: normal;\" [innerHTML]=\"content\"></div>\n    </div>\n  </dx-tooltip>\n</button><br/>\n", styles: [":host{height:20px;padding-right:4px}:host button{color:var(--coast-default-color, #337ab7)}\n"] }]
         }], ctorParameters: function () { return [{ type: DataGridService }, { type: i2$2.DomSanitizer }]; }, propDecorators: { table: [{
                 type: Input
             }], oid: [{
@@ -1491,6 +1492,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 }]
         }] });
 
+class DrawerComponent {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.size = 'default';
+        this._width = '480px';
+    }
+    ngOnInit() {
+        if (this.size === 'large') {
+            this._width = '960px';
+        }
+    }
+    show() {
+        // 若存在多层抽屉，仅保留最上层遮罩颜色，下层遮罩设置为透明
+        const nodeName = this.elementRef.nativeElement.nodeName;
+        const drawers = this._parentViewContainerRef.element.nativeElement.parentElement.querySelectorAll(nodeName);
+        for (let i = 0; i < drawers.length; i++) {
+            if (i === drawers.length - 1) {
+                drawers[i].querySelector('.drawer-backdrop').style.backgroundColor = 'rgba(37, 43, 58, 0.05)';
+            }
+            else {
+                drawers[i].querySelector('.drawer-backdrop').style.backgroundColor = 'rgba(37, 43, 58, 0)';
+            }
+        }
+    }
+    hide($event, backdrop) {
+        // 在service中重写
+    }
+    ngOnDestroy() {
+        // 若存在多层抽屉，下一层遮罩设置为不透明
+        const nodeName = this.elementRef.nativeElement.nodeName;
+        const nextDrawer = this._parentViewContainerRef.element.nativeElement.parentElement.querySelector(nodeName + ':nth-last-child(2)');
+        if (nextDrawer) {
+            nextDrawer.querySelector('.drawer-backdrop').style.backgroundColor = 'rgba(37, 43, 58, 0.05)';
+        }
+    }
+}
+DrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DrawerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+DrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DrawerComponent, selector: "rs-drawer", ngImport: i0, template: "<div #drawerBackdrop class=\"drawer-backdrop\" (click)=\"hide($event, drawerBackdrop)\">\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>\n</div>\n", styles: [":host .drawer-backdrop{position:absolute;inset:0;z-index:calc(var(--coast-z-index-drawer, 1040) - 1)}:host .drawer-backdrop .drawer{position:absolute;right:0;height:100%;z-index:var(--coast-z-index-drawer, 1040);background-color:var(--coast-base-bg-color, #fff);box-shadow:0 10px 24px #252b3a3d;display:flex;flex-flow:column nowrap}:host .drawer-backdrop .drawer .drawer-header{flex:0 0 36px;border-bottom:1px solid var(--coast-border-color, #dddddd)}:host .drawer-backdrop .drawer .drawer-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: 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>\n</div>\n", styles: [":host .drawer-backdrop{position:absolute;inset:0;z-index:calc(var(--coast-z-index-drawer, 1040) - 1)}:host .drawer-backdrop .drawer{position:absolute;right:0;height:100%;z-index:var(--coast-z-index-drawer, 1040);background-color:var(--coast-base-bg-color, #fff);box-shadow:0 10px 24px #252b3a3d;display:flex;flex-flow:column nowrap}:host .drawer-backdrop .drawer .drawer-header{flex:0 0 36px;border-bottom:1px solid var(--coast-border-color, #dddddd)}:host .drawer-backdrop .drawer .drawer-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+class DrawerModule {
+}
+DrawerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: DrawerModule, declarations: [DrawerComponent], imports: [CommonModule,
+        DxDrawerModule] });
+DrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DrawerModule, imports: [CommonModule,
+        DxDrawerModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DrawerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        DrawerComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        DxDrawerModule
+                    ]
+                }]
+        }] });
+
+class DrawerService {
+    constructor() {
+    }
+    open(viewContainerRef, size = 'default', contentTemplate, contentTemplateContext, headerTemplate, headerTemplateContext) {
+        const drawerRef = viewContainerRef.createComponent(DrawerComponent);
+        drawerRef.instance.hide = ($event, backdrop) => {
+            if ($event.target === backdrop) {
+                drawerRef.hostView.destroy();
+            }
+        };
+        drawerRef.instance.size = size;
+        drawerRef.instance.headerTemplate = headerTemplate;
+        drawerRef.instance.headerTemplateContext = headerTemplateContext;
+        drawerRef.instance.contentTemplate = contentTemplate;
+        drawerRef.instance.contentTemplateContext = contentTemplateContext;
+        drawerRef.instance._parentViewContainerRef = viewContainerRef;
+        drawerRef.instance.show();
+        return drawerRef.instance;
+    }
+}
+DrawerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DrawerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DrawerService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DrawerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
 class DynamicParamsComponent {
     add() {
         this.params.push({ name: '', value: '' });
@@ -1591,6 +1684,7 @@ class FormComponent {
         this.service = service;
         this.submitCallback = new EventEmitter();
         this.loading = false;
+        this.window = window;
     }
     ngOnInit() {
         this.loading = true;
@@ -1637,10 +1731,10 @@ class FormComponent {
     }
 }
 FormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormComponent, deps: [{ token: FormService }], target: i0.ɵɵFactoryTarget.Component });
-FormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: FormComponent, selector: "rs-form", inputs: { tenant: "tenant", className: "className", oid: "oid", copyOid: "copyOid", template: "template" }, outputs: { submitCallback: "submitCallback" }, providers: [FormService], viewQueries: [{ propertyName: "validator", first: true, predicate: DxValidationGroupComponent, descendants: true }, { propertyName: "formSubmitter", first: true, predicate: ["formSubmitter"], descendants: true }], ngImport: i0, template: "<form>\n  <dx-validation-group *ngIf=\"model\">\n    <rs-box-container [config]=\"config\" [model]=\"model\"></rs-box-container>\n    <dx-button #formSubmitter [visible]=\"false\" (onClick)=\"submitForm($event)\" [useSubmitBehavior]=\"true\"></dx-button>\n  </dx-validation-group>\n</form>\n", styles: [":host{padding:12px 24px 20px}:host form{display:flex;flex-flow:row nowrap}:host form dx-validation-group{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: BoxContainerComponent, selector: "rs-box-container", inputs: ["editMode", "config", "model", "tabViewContainerRef"] }, { kind: "component", type: i2$3.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i6.DxValidationGroupComponent, selector: "dx-validation-group", inputs: ["elementAttr", "height", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "elementAttrChange", "heightChange", "widthChange"] }] });
+FormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: FormComponent, selector: "rs-form", inputs: { tenant: "tenant", className: "className", oid: "oid", copyOid: "copyOid", template: "template" }, outputs: { submitCallback: "submitCallback" }, providers: [FormService], viewQueries: [{ propertyName: "validator", first: true, predicate: DxValidationGroupComponent, descendants: true }, { propertyName: "formSubmitter", first: true, predicate: ["formSubmitter"], descendants: true }], ngImport: i0, template: "<dx-load-panel [position]=\"{my: 'center', at: 'center', of: form.parentElement?.parentElement || window}\"\n               [showPane]=\"false\"\n               [visible]=\"!model\"></dx-load-panel>\n<form #form>\n  <dx-validation-group *ngIf=\"model\">\n    <rs-box-container [config]=\"config\" [model]=\"model\"></rs-box-container>\n    <dx-button #formSubmitter [visible]=\"false\" (onClick)=\"submitForm($event)\" [useSubmitBehavior]=\"true\"></dx-button>\n  </dx-validation-group>\n</form>\n", styles: [":host{padding:12px 24px 20px}:host form{display:flex;flex-flow:row nowrap}:host form dx-validation-group{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: BoxContainerComponent, selector: "rs-box-container", inputs: ["editMode", "config", "model", "tabViewContainerRef"] }, { kind: "component", type: i2$3.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i6.DxLoadPanelComponent, selector: "dx-load-panel", inputs: ["animation", "closeOnOutsideClick", "container", "copyRootClassesToWrapper", "deferRendering", "delay", "elementAttr", "focusStateEnabled", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "indicatorSrc", "maxHeight", "maxWidth", "message", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showIndicator", "showPane", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "delayChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "indicatorSrcChange", "maxHeightChange", "maxWidthChange", "messageChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showIndicatorChange", "showPaneChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i7.DxValidationGroupComponent, selector: "dx-validation-group", inputs: ["elementAttr", "height", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "elementAttrChange", "heightChange", "widthChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-form', providers: [FormService], template: "<form>\n  <dx-validation-group *ngIf=\"model\">\n    <rs-box-container [config]=\"config\" [model]=\"model\"></rs-box-container>\n    <dx-button #formSubmitter [visible]=\"false\" (onClick)=\"submitForm($event)\" [useSubmitBehavior]=\"true\"></dx-button>\n  </dx-validation-group>\n</form>\n", styles: [":host{padding:12px 24px 20px}:host form{display:flex;flex-flow:row nowrap}:host form dx-validation-group{width:100%}\n"] }]
+            args: [{ selector: 'rs-form', providers: [FormService], template: "<dx-load-panel [position]=\"{my: 'center', at: 'center', of: form.parentElement?.parentElement || window}\"\n               [showPane]=\"false\"\n               [visible]=\"!model\"></dx-load-panel>\n<form #form>\n  <dx-validation-group *ngIf=\"model\">\n    <rs-box-container [config]=\"config\" [model]=\"model\"></rs-box-container>\n    <dx-button #formSubmitter [visible]=\"false\" (onClick)=\"submitForm($event)\" [useSubmitBehavior]=\"true\"></dx-button>\n  </dx-validation-group>\n</form>\n", styles: [":host{padding:12px 24px 20px}:host form{display:flex;flex-flow:row nowrap}:host form dx-validation-group{width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: FormService }]; }, propDecorators: { tenant: [{
                 type: Input
             }], className: [{
@@ -1772,11 +1866,11 @@ class ModalComponent {
     }
     ngOnInit() {
         if (this.size === 'full') {
-            this.modalElementRef.nativeElement.style.top = '0px';
-            this.modalElementRef.nativeElement.style.right = '0px';
-            this.modalElementRef.nativeElement.style.bottom = '0px';
-            this.modalElementRef.nativeElement.style.left = '0px';
-            this.modalElementRef.nativeElement.style.margin = '2px';
+            this.modalElementRef.nativeElement.style.top = '0';
+            this.modalElementRef.nativeElement.style.right = '0';
+            this.modalElementRef.nativeElement.style.bottom = '0';
+            this.modalElementRef.nativeElement.style.left = '0';
+            this.modalElementRef.nativeElement.style.margin = '0';
             this.modalElementRef.nativeElement.style.boxShadow = 'none';
         }
         else {
@@ -1794,7 +1888,7 @@ class ModalComponent {
     show() {
         // 若存在多层模态框，仅保留最上层遮罩颜色，下层遮罩设置为透明
         const nodeName = this.elementRef.nativeElement.nodeName;
-        const modals = this._parentViewContainerRef.element.nativeElement.querySelectorAll(nodeName);
+        const modals = this._parentViewContainerRef.element.nativeElement.parentElement.querySelectorAll(nodeName);
         for (let i = 0; i < modals.length; i++) {
             if (i === modals.length - 1) {
                 modals[i].querySelector('.modal-backdrop').style.backgroundColor = 'rgba(37, 43, 58, 0.05)';
@@ -1810,7 +1904,7 @@ class ModalComponent {
     ngOnDestroy() {
         // 若存在多层模态框，下一层遮罩设置为不透明
         const nodeName = this.elementRef.nativeElement.nodeName;
-        const nextModal = this._parentViewContainerRef.element.nativeElement.querySelector(nodeName + ':nth-last-child(2)');
+        const nextModal = this._parentViewContainerRef.element.nativeElement.parentElement.querySelector(nodeName + ':nth-last-child(2)');
         if (nextModal) {
             nextModal.querySelector('.modal-backdrop').style.backgroundColor = 'rgba(37, 43, 58, 0.05)';
         }
@@ -1885,25 +1979,13 @@ class ModalComponent {
     }
 }
 ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ModalComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ModalComponent, selector: "rs-modal", inputs: { title: "title", size: "size", contentTemplate: "contentTemplate", contentTemplateContext: "contentTemplateContext", footerTemplate: "footerTemplate", footerTemplateContext: "footerTemplateContext" }, host: { listeners: { "document:mouseup": "onMouseup($event)", "document:mousemove": "onMousemove($event)", "window:resize": "onWindowResize($event)" } }, viewQueries: [{ propertyName: "modalElementRef", first: true, predicate: ["modal"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"modal-backdrop\" [ngStyle]=\"resolveModalBackdropPosition()\">\r\n  <div #modal class=\"modal\" [ngStyle]=\"resolveModalPosition()\">\r\n    <div class=\"modal-header\" (mousedown)=\"onMousedown($event)\">\r\n      <div class=\"modal-title\">{{title}}</div>\r\n      <i class=\"icon-close\" (click)=\"hide()\"></i>\r\n    </div>\r\n    <div class=\"modal-content\">\r\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\r\n    </div>\r\n    <div *ngIf=\"footerTemplate\" class=\"modal-footer\">\r\n      <ng-template [ngTemplateOutlet]=\"footerTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: footerTemplateContext}\"></ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host .modal-backdrop{position:absolute;inset:0;z-index:1049}:host .modal-backdrop .modal{position:absolute;z-index:1050;background-color:#fff;border-radius:4px;box-shadow:0 10px 24px #252b3a3d;display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-header{flex:0 0 36px;border-bottom:1px solid #dddddd}:host .modal-backdrop .modal .modal-header .modal-title{padding:12px 24px;font-size:14px;font-weight:700}:host .modal-backdrop .modal .modal-header i{position:absolute;top:12px;right:12px;padding:4px;font-size:14px}:host .modal-backdrop .modal .modal-header i:hover{cursor:pointer;color:#d9534f;background-color:#f6f6f8}:host .modal-backdrop .modal .modal-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-footer{flex:none;padding-top:12px;border-top:1px solid #dddddd}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ModalComponent, selector: "rs-modal", host: { listeners: { "document:mouseup": "onMouseup($event)", "document:mousemove": "onMousemove($event)", "window:resize": "onWindowResize($event)" } }, viewQueries: [{ propertyName: "modalElementRef", first: true, predicate: ["modal"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"modal-backdrop\" [ngStyle]=\"resolveModalBackdropPosition()\">\r\n  <div #modal class=\"modal\" [ngStyle]=\"resolveModalPosition()\">\r\n    <div class=\"modal-header\" (mousedown)=\"onMousedown($event)\">\r\n      <div class=\"modal-title\">{{title}}</div>\r\n      <i class=\"icon-close\" (click)=\"hide()\"></i>\r\n    </div>\r\n    <div class=\"modal-content\">\r\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\r\n    </div>\r\n    <div *ngIf=\"footerTemplate\" class=\"modal-footer\">\r\n      <ng-template [ngTemplateOutlet]=\"footerTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: footerTemplateContext}\"></ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host .modal-backdrop{position:absolute;inset:0;z-index:calc(var(--coast-z-index-modal, 1050) - 1)}:host .modal-backdrop .modal{position:absolute;z-index:var(--coast-z-index-modal, 1050);background-color:var(--coast-base-bg-color, #fff);border-radius:4px;box-shadow:0 10px 24px #252b3a3d;display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-header{flex:0 0 36px;border-bottom:1px solid var(--coast-border-color, #dddddd)}:host .modal-backdrop .modal .modal-header .modal-title{padding:12px 24px;font-size:14px;font-weight:700}:host .modal-backdrop .modal .modal-header i{position:absolute;top:12px;right:12px;padding:4px;font-size:14px}:host .modal-backdrop .modal .modal-header i:hover{cursor:pointer;color:var(--coast-danger-color, #d9534f);background-color:var(--coast-global-bg-color, #f6f6f8)}:host .modal-backdrop .modal .modal-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-footer{flex:none;padding-top:12px;border-top:1px solid var(--coast-border-color, #dddddd)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-modal', template: "<div class=\"modal-backdrop\" [ngStyle]=\"resolveModalBackdropPosition()\">\r\n  <div #modal class=\"modal\" [ngStyle]=\"resolveModalPosition()\">\r\n    <div class=\"modal-header\" (mousedown)=\"onMousedown($event)\">\r\n      <div class=\"modal-title\">{{title}}</div>\r\n      <i class=\"icon-close\" (click)=\"hide()\"></i>\r\n    </div>\r\n    <div class=\"modal-content\">\r\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\r\n    </div>\r\n    <div *ngIf=\"footerTemplate\" class=\"modal-footer\">\r\n      <ng-template [ngTemplateOutlet]=\"footerTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: footerTemplateContext}\"></ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host .modal-backdrop{position:absolute;inset:0;z-index:1049}:host .modal-backdrop .modal{position:absolute;z-index:1050;background-color:#fff;border-radius:4px;box-shadow:0 10px 24px #252b3a3d;display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-header{flex:0 0 36px;border-bottom:1px solid #dddddd}:host .modal-backdrop .modal .modal-header .modal-title{padding:12px 24px;font-size:14px;font-weight:700}:host .modal-backdrop .modal .modal-header i{position:absolute;top:12px;right:12px;padding:4px;font-size:14px}:host .modal-backdrop .modal .modal-header i:hover{cursor:pointer;color:#d9534f;background-color:#f6f6f8}:host .modal-backdrop .modal .modal-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-footer{flex:none;padding-top:12px;border-top:1px solid #dddddd}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { title: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], modalElementRef: [{
+            args: [{ selector: 'rs-modal', template: "<div class=\"modal-backdrop\" [ngStyle]=\"resolveModalBackdropPosition()\">\r\n  <div #modal class=\"modal\" [ngStyle]=\"resolveModalPosition()\">\r\n    <div class=\"modal-header\" (mousedown)=\"onMousedown($event)\">\r\n      <div class=\"modal-title\">{{title}}</div>\r\n      <i class=\"icon-close\" (click)=\"hide()\"></i>\r\n    </div>\r\n    <div class=\"modal-content\">\r\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\r\n    </div>\r\n    <div *ngIf=\"footerTemplate\" class=\"modal-footer\">\r\n      <ng-template [ngTemplateOutlet]=\"footerTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: footerTemplateContext}\"></ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host .modal-backdrop{position:absolute;inset:0;z-index:calc(var(--coast-z-index-modal, 1050) - 1)}:host .modal-backdrop .modal{position:absolute;z-index:var(--coast-z-index-modal, 1050);background-color:var(--coast-base-bg-color, #fff);border-radius:4px;box-shadow:0 10px 24px #252b3a3d;display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-header{flex:0 0 36px;border-bottom:1px solid var(--coast-border-color, #dddddd)}:host .modal-backdrop .modal .modal-header .modal-title{padding:12px 24px;font-size:14px;font-weight:700}:host .modal-backdrop .modal .modal-header i{position:absolute;top:12px;right:12px;padding:4px;font-size:14px}:host .modal-backdrop .modal .modal-header i:hover{cursor:pointer;color:var(--coast-danger-color, #d9534f);background-color:var(--coast-global-bg-color, #f6f6f8)}:host .modal-backdrop .modal .modal-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-footer{flex:none;padding-top:12px;border-top:1px solid var(--coast-border-color, #dddddd)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { modalElementRef: [{
                 type: ViewChild,
                 args: ['modal', { static: true }]
-            }], contentTemplate: [{
-                type: Input
-            }], contentTemplateContext: [{
-                type: Input
-            }], footerTemplate: [{
-                type: Input
-            }], footerTemplateContext: [{
-                type: Input
             }], onMouseup: [{
                 type: HostListener,
                 args: ['document:mouseup', ['$event']]
@@ -1918,7 +2000,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
 class ModalModule {
 }
 ModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: ModalModule, declarations: [ModalComponent], imports: [CommonModule], exports: [ModalComponent] });
+ModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: ModalModule, declarations: [ModalComponent], imports: [CommonModule] });
 ModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ModalModule, imports: [CommonModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ModalModule, decorators: [{
             type: NgModule,
@@ -1928,9 +2010,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                     ],
                     imports: [
                         CommonModule
-                    ],
-                    exports: [
-                        ModalComponent
                     ]
                 }]
         }] });
@@ -1945,11 +2024,11 @@ class ModalService {
         };
         modalRef.instance.title = title;
         modalRef.instance.size = size;
-        modalRef.instance._parentViewContainerRef = viewContainerRef;
         modalRef.instance.contentTemplate = contentTemplate;
         modalRef.instance.contentTemplateContext = contentTemplateContext;
         modalRef.instance.footerTemplate = footerTemplate;
         modalRef.instance.footerTemplateContext = footerTemplateContext;
+        modalRef.instance._parentViewContainerRef = viewContainerRef;
         modalRef.instance.show();
         return modalRef.instance;
     }
@@ -2001,5 +2080,5 @@ function notify_success(message) {
  * Generated bundle index. Do not edit.
  */
 
-export { BoxContainerComponent, BoxContainerModule, DataGridComponent, DataGridFactory, DataGridModule, DataGridService, DynamicParamsComponent, DynamicParamsModule, FormComponent, FormModule, FormService, IconSelectorComponent, IconSelectorModule, ItemConfigComponent, ItemStyleComponent, MasterDetailTemplateDirective, ModalComponent, ModalModule, ModalService, PluginManager, RowButtonsTemplateDirective, notify_error, notify_success, notify_warning };
+export { BoxContainerComponent, BoxContainerModule, DataGridComponent, DataGridFactory, DataGridModule, DataGridService, DrawerModule, DrawerService, DynamicParamsComponent, DynamicParamsModule, FormComponent, FormModule, FormService, IconSelectorComponent, IconSelectorModule, ItemConfigComponent, ItemStyleComponent, MasterDetailTemplateDirective, ModalModule, ModalService, PluginManager, RowButtonsTemplateDirective, notify_error, notify_success, notify_warning };
 //# sourceMappingURL=ngx-rs-ant.mjs.map