ngx-rs-ant 1.8.9 → 1.9.0

package/esm2020/box-container/box-item/box-item.component.mjs

@@ -184,10 +184,10 @@ export class BoxItemComponent {
     }
 }
 BoxItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BoxItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BoxItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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:#0000001a}\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.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: i3.BoxItemHostDirective, selector: "[rsBoxItemHost]", inputs: ["hostId"] }] });
+BoxItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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, rgb(229, 229, 229))}\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.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: i3.BoxItemHostDirective, selector: "[rsBoxItemHost]", inputs: ["hostId"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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:#0000001a}\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, rgb(229, 229, 229))}\n"] }]
         }], propDecorators: { _direction: [{
                 type: HostBinding,
                 args: ['style.flex-direction']

package/esm2020/box-container/box-item/item-blank/item-blank.component.mjs

@@ -3,9 +3,9 @@ import * as i0 from "@angular/core";
 export class ItemBlankComponent {
 }
 ItemBlankComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ItemBlankComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ItemBlankComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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 rgb(221,221,221);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AQMAAAAAMksxAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRF8fHxAAAAMCd7XAAAAAJ0Uk5T/wDltzBKAAABJUlEQVR4nFVSy23EIBCdAiKxBaxCC1tBaGk7YG/OjZYSOQptLKKB8Y0D8ssbjBPl9gQz7wfigQbgQxygEXjIAjwDcJEV+PbYb1KAlNDusgE+Q1Va3EPFptJDjwVVZfcNiqwCV9BiIlhW9DdPkEn5GggKRV4igVL2AYJGpc8TFAMa5lXhzHuc69dwEO6DkBI9OhNVii60ERu3VxrjRUVRet7DsMoUbpgny+LRb5b0K2C/CAWejCxCSYVl9wcQSaMEzuRRArcqebzxcMCnUcKQsBKiiVoJoR1+4DfWSodILCGa5zXTvKWo5L5ars0C/iuh003F7GecbG62YVujunzypDqZTcsK76HF2UYP41HM4WoO7eEWNLUUyaHf/3L9JvXnBwjzS/wAoXR0PDbjCSUAAAAASUVORK5CYII=) repeat rgba(0,0,0,.04);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:#0000001a}\n"] });
+ItemBlankComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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, rgb(221, 221, 221));background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AQMAAAAAMksxAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRF8fHxAAAAMCd7XAAAAAJ0Uk5T/wDltzBKAAABJUlEQVR4nFVSy23EIBCdAiKxBaxCC1tBaGk7YG/OjZYSOQptLKKB8Y0D8ssbjBPl9gQz7wfigQbgQxygEXjIAjwDcJEV+PbYb1KAlNDusgE+Q1Va3EPFptJDjwVVZfcNiqwCV9BiIlhW9DdPkEn5GggKRV4igVL2AYJGpc8TFAMa5lXhzHuc69dwEO6DkBI9OhNVii60ERu3VxrjRUVRet7DsMoUbpgny+LRb5b0K2C/CAWejCxCSYVl9wcQSaMEzuRRArcqebzxcMCnUcKQsBKiiVoJoR1+4DfWSodILCGa5zXTvKWo5L5ars0C/iuh003F7GecbG62YVujunzypDqZTcsK76HF2UYP41HM4WoO7eEWNLUUyaHf/3L9JvXnBwjzS/wAoXR0PDbjCSUAAAAASUVORK5CYII=) repeat var(--coast-global-bg-color, rgb(245, 245, 245));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, rgb(229, 229, 229))}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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 rgb(221,221,221);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AQMAAAAAMksxAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRF8fHxAAAAMCd7XAAAAAJ0Uk5T/wDltzBKAAABJUlEQVR4nFVSy23EIBCdAiKxBaxCC1tBaGk7YG/OjZYSOQptLKKB8Y0D8ssbjBPl9gQz7wfigQbgQxygEXjIAjwDcJEV+PbYb1KAlNDusgE+Q1Va3EPFptJDjwVVZfcNiqwCV9BiIlhW9DdPkEn5GggKRV4igVL2AYJGpc8TFAMa5lXhzHuc69dwEO6DkBI9OhNVii60ERu3VxrjRUVRet7DsMoUbpgny+LRb5b0K2C/CAWejCxCSYVl9wcQSaMEzuRRArcqebzxcMCnUcKQsBKiiVoJoR1+4DfWSodILCGa5zXTvKWo5L5ars0C/iuh003F7GecbG62YVujunzypDqZTcsK76HF2UYP41HM4WoO7eEWNLUUyaHf/3L9JvXnBwjzS/wAoXR0PDbjCSUAAAAASUVORK5CYII=) repeat rgba(0,0,0,.04);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:#0000001a}\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, rgb(221, 221, 221));background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AQMAAAAAMksxAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRF8fHxAAAAMCd7XAAAAAJ0Uk5T/wDltzBKAAABJUlEQVR4nFVSy23EIBCdAiKxBaxCC1tBaGk7YG/OjZYSOQptLKKB8Y0D8ssbjBPl9gQz7wfigQbgQxygEXjIAjwDcJEV+PbYb1KAlNDusgE+Q1Va3EPFptJDjwVVZfcNiqwCV9BiIlhW9DdPkEn5GggKRV4igVL2AYJGpc8TFAMa5lXhzHuc69dwEO6DkBI9OhNVii60ERu3VxrjRUVRet7DsMoUbpgny+LRb5b0K2C/CAWejCxCSYVl9wcQSaMEzuRRArcqebzxcMCnUcKQsBKiiVoJoR1+4DfWSodILCGa5zXTvKWo5L5ars0C/iuh003F7GecbG62YVujunzypDqZTcsK76HF2UYP41HM4WoO7eEWNLUUyaHf/3L9JvXnBwjzS/wAoXR0PDbjCSUAAAAASUVORK5CYII=) repeat var(--coast-global-bg-color, rgb(245, 245, 245));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, rgb(229, 229, 229))}\n"] }]
         }] });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaXRlbS1ibGFuay5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtcnMtYW50L3NyYy9ib3gtY29udGFpbmVyL2JveC1pdGVtL2l0ZW0tYmxhbmsvaXRlbS1ibGFuay5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtcnMtYW50L3NyYy9ib3gtY29udGFpbmVyL2JveC1pdGVtL2l0ZW0tYmxhbmsvaXRlbS1ibGFuay5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFDLE1BQU0sZUFBZSxDQUFDOztBQU94QyxNQUFNLE9BQU8sa0JBQWtCOztnSEFBbEIsa0JBQWtCO29HQUFsQixrQkFBa0IscURDUC9CLDRFQUdBOzRGRElhLGtCQUFrQjtrQkFMOUIsU0FBUzsrQkFDRSxlQUFlIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdycy1pdGVtLWJsYW5rJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2l0ZW0tYmxhbmsuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9pdGVtLWJsYW5rLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgSXRlbUJsYW5rQ29tcG9uZW50IHtcbn1cbiIsIjxkaXY+XG4gIDxzcGFuPuaLluaLvee7hOS7tuWIsOatpOWkhDwvc3Bhbj5cbjwvZGl2PlxuIl19

package/esm2020/box-container/box-item/item-style/style/style.component.mjs

@@ -40,9 +40,9 @@ export class StyleComponent {
     }
 }
 StyleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StyleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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 rgb(221,221,221);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:#337ab7;border:1px solid rgb(51,122,183);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.10", 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(--coast-border-color, rgb(221, 221, 221));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(--coast-default-color, rgb(51, 122, 183));border:1px solid var(--coast-default-color, rgb(51, 122, 183));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.10", 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 rgb(221,221,221);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:#337ab7;border:1px solid rgb(51,122,183);z-index:1}:host .config-item .item-setting dx-number-box{flex:1}\n"] }]
+            args: [{ selector: 'rs-style', template: "<div class=\"config-item\">\n  <div class=\"item-title\">\u5BBD\u5EA6\u7C7B\u578B</div>\n  <div class=\"item-setting\">\n    <div class=\"card-style-radio\">\n      <div class=\"radio-value\" [ngClass]=\"!style.width || style.width === 'auto' ? 'active' : ''\"\n           (click)=\"select('width','auto')\">\n        <span>\u81EA\u9002\u5E94</span>\n      </div>\n      <div class=\"radio-value\" [ngClass]=\"style.width && style.width !== 'auto' ? 'active' : ''\"\n           (click)=\"select('width',240)\">\n        <span>\u56FA\u5B9A\u503C</span>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"config-item\">\n  <div class=\"item-title\">\u56FA\u5B9A\u5BBD\u5EA6</div>\n  <div class=\"item-setting\">\n    <dx-number-box [min]=\"0\"\n                   [showSpinButtons]=\"true\"\n                   [showClearButton]=\"true\"\n                   [(value)]=\"width\"\n                   (onValueChanged)=\"typing('width', $event.value)\"\n                   [readOnly]=\"style.width === 'auto'\">\n    </dx-number-box>\n  </div>\n</div>\n<div class=\"config-item\">\n  <div class=\"item-title\">\u9AD8\u5EA6\u7C7B\u578B</div>\n  <div class=\"item-setting\">\n    <div class=\"card-style-radio\">\n      <div class=\"radio-value\" [ngClass]=\"!style.height || style.height === 'auto' ? 'active' : ''\"\n           (click)=\"select('height','auto')\">\n        <span>\u81EA\u9002\u5E94</span>\n      </div>\n      <div class=\"radio-value\" [ngClass]=\"style.height && style.height !== 'auto' ? 'active' : ''\"\n           (click)=\"select('height',800)\">\n        <span>\u56FA\u5B9A\u503C</span>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"config-item\">\n  <div class=\"item-title\">\u56FA\u5B9A\u9AD8\u5EA6</div>\n  <div class=\"item-setting\">\n    <dx-number-box [min]=\"0\"\n                   [showSpinButtons]=\"true\"\n                   [showClearButton]=\"true\"\n                   [(value)]=\"height\"\n                   (onValueChanged)=\"typing('height', $event.value)\"\n                   [readOnly]=\"style.height === 'auto'\">\n    </dx-number-box>\n  </div>\n</div>\n", styles: [":host .config-item{display:flex;flex-flow:row nowrap;align-items:center;margin-bottom:8px}:host .config-item .item-title{flex:0 0 80px}:host .config-item .item-setting{flex:1;display:flex;flex-flow:row nowrap}:host .config-item .item-setting .card-style-radio{flex:1;display:flex;flex-flow:row nowrap;justify-content:stretch}:host .config-item .item-setting .card-style-radio .radio-value{flex:1;border:1px solid var(--coast-border-color, rgb(221, 221, 221));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(--coast-default-color, rgb(51, 122, 183));border:1px solid var(--coast-default-color, rgb(51, 122, 183));z-index:1}:host .config-item .item-setting dx-number-box{flex:1}\n"] }]
         }] });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXJzLWFudC9zcmMvYm94LWNvbnRhaW5lci9ib3gtaXRlbS9pdGVtLXN0eWxlL3N0eWxlL3N0eWxlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1ycy1hbnQvc3JjL2JveC1jb250YWluZXIvYm94LWl0ZW0vaXRlbS1zdHlsZS9zdHlsZS9zdHlsZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFTLE1BQU0sZUFBZSxDQUFDOzs7O0FBT2hELE1BQU0sT0FBTyxjQUFjO0lBTDNCO1FBT0UsVUFBSyxHQUFXLENBQUMsQ0FBQztRQUNsQixXQUFNLEdBQVcsQ0FBQyxDQUFDO0tBaUNwQjtJQS9CQyxRQUFRO1FBQ04sSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUM7UUFDaEUsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUM7UUFDbkUsSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssS0FBSyxNQUFNLEVBQUU7WUFDL0IsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxTQUFTLENBQUMsQ0FBQyxFQUFFLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUMsQ0FBQztTQUN6RTtRQUNELElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLEtBQUssTUFBTSxFQUFFO1lBQ2hDLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsU0FBUyxDQUFDLENBQUMsRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDLENBQUM7U0FDNUU7SUFDSCxDQUFDO0lBRUQsTUFBTSxDQUFDLElBQVksRUFBRSxLQUFVO1FBQzdCLE1BQU0sSUFBSSxHQUFRLElBQUksQ0FBQztRQUN2QixJQUFJLEtBQUssS0FBSyxNQUFNLEVBQUU7WUFDcEIsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsR0FBRyxNQUFNLENBQUM7WUFDMUIsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztTQUNoQjthQUFNO1lBQ0wsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsRUFBRTtnQkFDZixJQUFJLENBQUMsSUFBSSxDQUFDLEdBQUcsS0FBSyxDQUFDO2FBQ3BCO1lBQ0QsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLEdBQUcsSUFBSSxDQUFDO1NBQ3RDO0lBQ0gsQ0FBQztJQUVELE1BQU0sQ0FBQyxJQUFZLEVBQUUsS0FBVTtRQUM3QixJQUFJLEtBQUssRUFBRTtZQUNULElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEdBQUcsS0FBSyxHQUFHLElBQUksQ0FBQztTQUNqQzthQUFNO1lBQ0wsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsR0FBRyxNQUFNLENBQUM7U0FDM0I7SUFDSCxDQUFDOzs0R0FuQ1UsY0FBYztnR0FBZCxjQUFjLGdEQ1AzQix1a0VBc0RBOzRGRC9DYSxjQUFjO2tCQUwxQixTQUFTOytCQUNFLFVBQVUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgT25Jbml0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncnMtc3R5bGUnLFxuICB0ZW1wbGF0ZVVybDogJy4vc3R5bGUuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9zdHlsZS5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIFN0eWxlQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgc3R5bGU6IGFueTtcbiAgd2lkdGg6IG51bWJlciA9IDA7XG4gIGhlaWdodDogbnVtYmVyID0gMDtcblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLnN0eWxlLndpZHRoID0gdGhpcy5zdHlsZS53aWR0aCA/IHRoaXMuc3R5bGUud2lkdGggOiAnYXV0byc7XG4gICAgdGhpcy5zdHlsZS5oZWlnaHQgPSB0aGlzLnN0eWxlLmhlaWdodCA/IHRoaXMuc3R5bGUuaGVpZ2h0IDogJ2F1dG8nO1xuICAgIGlmICh0aGlzLnN0eWxlLndpZHRoICE9PSAnYXV0bycpIHtcbiAgICAgIHRoaXMud2lkdGggPSB0aGlzLnN0eWxlLndpZHRoLnN1YnN0cmluZygwLCB0aGlzLnN0eWxlLndpZHRoLmxlbmd0aCAtIDIpO1xuICAgIH1cbiAgICBpZiAodGhpcy5zdHlsZS5oZWlnaHQgIT09ICdhdXRvJykge1xuICAgICAgdGhpcy5oZWlnaHQgPSB0aGlzLnN0eWxlLmhlaWdodC5zdWJzdHJpbmcoMCwgdGhpcy5zdHlsZS5oZWlnaHQubGVuZ3RoIC0gMik7XG4gICAgfVxuICB9XG5cbiAgc2VsZWN0KG5hbWU6IHN0cmluZywgdmFsdWU6IGFueSkge1xuICAgIGNvbnN0IHRoYXQ6IGFueSA9IHRoaXM7XG4gICAgaWYgKHZhbHVlID09PSAnYXV0bycpIHtcbiAgICAgIHRoaXMuc3R5bGVbbmFtZV0gPSAnYXV0byc7XG4gICAgICB0aGF0W25hbWVdID0gMDtcbiAgICB9IGVsc2Uge1xuICAgICAgaWYgKCF0aGF0W25hbWVdKSB7XG4gICAgICAgIHRoYXRbbmFtZV0gPSB2YWx1ZTtcbiAgICAgIH1cbiAgICAgIHRoaXMuc3R5bGVbbmFtZV0gPSB0aGF0W25hbWVdICsgJ3B4JztcbiAgICB9XG4gIH1cblxuICB0eXBpbmcobmFtZTogc3RyaW5nLCB2YWx1ZTogYW55KSB7XG4gICAgaWYgKHZhbHVlKSB7XG4gICAgICB0aGlzLnN0eWxlW25hbWVdID0gdmFsdWUgKyAncHgnO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLnN0eWxlW25hbWVdID0gJ2F1dG8nO1xuICAgIH1cbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImNvbmZpZy1pdGVtXCI+XG4gIDxkaXYgY2xhc3M9XCJpdGVtLXRpdGxlXCI+5a695bqm57G75Z6LPC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJpdGVtLXNldHRpbmdcIj5cbiAgICA8ZGl2IGNsYXNzPVwiY2FyZC1zdHlsZS1yYWRpb1wiPlxuICAgICAgPGRpdiBjbGFzcz1cInJhZGlvLXZhbHVlXCIgW25nQ2xhc3NdPVwiIXN0eWxlLndpZHRoIHx8IHN0eWxlLndpZHRoID09PSAnYXV0bycgPyAnYWN0aXZlJyA6ICcnXCJcbiAgICAgICAgICAgKGNsaWNrKT1cInNlbGVjdCgnd2lkdGgnLCdhdXRvJylcIj5cbiAgICAgICAgPHNwYW4+6Ieq6YCC5bqUPC9zcGFuPlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwicmFkaW8tdmFsdWVcIiBbbmdDbGFzc109XCJzdHlsZS53aWR0aCAmJiBzdHlsZS53aWR0aCAhPT0gJ2F1dG8nID8gJ2FjdGl2ZScgOiAnJ1wiXG4gICAgICAgICAgIChjbGljayk9XCJzZWxlY3QoJ3dpZHRoJywyNDApXCI+XG4gICAgICAgIDxzcGFuPuWbuuWumuWAvDwvc3Bhbj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuPGRpdiBjbGFzcz1cImNvbmZpZy1pdGVtXCI+XG4gIDxkaXYgY2xhc3M9XCJpdGVtLXRpdGxlXCI+5Zu65a6a5a695bqmPC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJpdGVtLXNldHRpbmdcIj5cbiAgICA8ZHgtbnVtYmVyLWJveCBbbWluXT1cIjBcIlxuICAgICAgICAgICAgICAgICAgIFtzaG93U3BpbkJ1dHRvbnNdPVwidHJ1ZVwiXG4gICAgICAgICAgICAgICAgICAgW3Nob3dDbGVhckJ1dHRvbl09XCJ0cnVlXCJcbiAgICAgICAgICAgICAgICAgICBbKHZhbHVlKV09XCJ3aWR0aFwiXG4gICAgICAgICAgICAgICAgICAgKG9uVmFsdWVDaGFuZ2VkKT1cInR5cGluZygnd2lkdGgnLCAkZXZlbnQudmFsdWUpXCJcbiAgICAgICAgICAgICAgICAgICBbcmVhZE9ubHldPVwic3R5bGUud2lkdGggPT09ICdhdXRvJ1wiPlxuICAgIDwvZHgtbnVtYmVyLWJveD5cbiAgPC9kaXY+XG48L2Rpdj5cbjxkaXYgY2xhc3M9XCJjb25maWctaXRlbVwiPlxuICA8ZGl2IGNsYXNzPVwiaXRlbS10aXRsZVwiPumrmOW6puexu+WeizwvZGl2PlxuICA8ZGl2IGNsYXNzPVwiaXRlbS1zZXR0aW5nXCI+XG4gICAgPGRpdiBjbGFzcz1cImNhcmQtc3R5bGUtcmFkaW9cIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJyYWRpby12YWx1ZVwiIFtuZ0NsYXNzXT1cIiFzdHlsZS5oZWlnaHQgfHwgc3R5bGUuaGVpZ2h0ID09PSAnYXV0bycgPyAnYWN0aXZlJyA6ICcnXCJcbiAgICAgICAgICAgKGNsaWNrKT1cInNlbGVjdCgnaGVpZ2h0JywnYXV0bycpXCI+XG4gICAgICAgIDxzcGFuPuiHqumAguW6lDwvc3Bhbj5cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cInJhZGlvLXZhbHVlXCIgW25nQ2xhc3NdPVwic3R5bGUuaGVpZ2h0ICYmIHN0eWxlLmhlaWdodCAhPT0gJ2F1dG8nID8gJ2FjdGl2ZScgOiAnJ1wiXG4gICAgICAgICAgIChjbGljayk9XCJzZWxlY3QoJ2hlaWdodCcsODAwKVwiPlxuICAgICAgICA8c3Bhbj7lm7rlrprlgLw8L3NwYW4+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L2Rpdj5cbjxkaXYgY2xhc3M9XCJjb25maWctaXRlbVwiPlxuICA8ZGl2IGNsYXNzPVwiaXRlbS10aXRsZVwiPuWbuuWumumrmOW6pjwvZGl2PlxuICA8ZGl2IGNsYXNzPVwiaXRlbS1zZXR0aW5nXCI+XG4gICAgPGR4LW51bWJlci1ib3ggW21pbl09XCIwXCJcbiAgICAgICAgICAgICAgICAgICBbc2hvd1NwaW5CdXR0b25zXT1cInRydWVcIlxuICAgICAgICAgICAgICAgICAgIFtzaG93Q2xlYXJCdXR0b25dPVwidHJ1ZVwiXG4gICAgICAgICAgICAgICAgICAgWyh2YWx1ZSldPVwiaGVpZ2h0XCJcbiAgICAgICAgICAgICAgICAgICAob25WYWx1ZUNoYW5nZWQpPVwidHlwaW5nKCdoZWlnaHQnLCAkZXZlbnQudmFsdWUpXCJcbiAgICAgICAgICAgICAgICAgICBbcmVhZE9ubHldPVwic3R5bGUuaGVpZ2h0ID09PSAnYXV0bydcIj5cbiAgICA8L2R4LW51bWJlci1ib3g+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=

package/esm2020/box-container/plugin-active/divider/divider-line/divider-line.component.mjs

@@ -20,10 +20,10 @@ export class DividerLineComponent {
     }
 }
 DividerLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DividerLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DividerLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DividerLineComponent, selector: "rs-divider-line", inputs: { direction: "direction", targetElement: "targetElement" }, host: { properties: { "style": "this._style" } }, ngImport: i0, template: "", styles: ["coast-divider:hover>:host{position:absolute;top:-5px;border:1px dashed rgb(51,122,183)}\n"] });
+DividerLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DividerLineComponent, selector: "rs-divider-line", inputs: { direction: "direction", targetElement: "targetElement" }, host: { properties: { "style": "this._style" } }, ngImport: i0, template: "", styles: ["coast-divider:hover>:host{position:absolute;top:-5px;border:1px dashed var(--coast-default-color, rgb(51, 122, 183))}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DividerLineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-divider-line', template: "", styles: ["coast-divider:hover>:host{position:absolute;top:-5px;border:1px dashed rgb(51,122,183)}\n"] }]
+            args: [{ selector: 'rs-divider-line', template: "", styles: ["coast-divider:hover>:host{position:absolute;top:-5px;border:1px dashed var(--coast-default-color, rgb(51, 122, 183))}\n"] }]
         }], propDecorators: { direction: [{
                 type: Input
             }], targetElement: [{

package/esm2020/box-container/plugin-active/divider/divider.component.mjs

@@ -30,10 +30,10 @@ export class DividerComponent {
     }
 }
 DividerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DividerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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:#337ab7}\n"], dependencies: [{ kind: "component", type: i1.DividerLineComponent, selector: "rs-divider-line", inputs: ["direction", "targetElement"] }] });
+DividerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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(--coast-default-color, rgb(51, 122, 183))}\n"], dependencies: [{ kind: "component", type: i1.DividerLineComponent, selector: "rs-divider-line", inputs: ["direction", "targetElement"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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:#337ab7}\n"] }]
+            args: [{ selector: 'rs-divider', template: "<div class=\"divider-image\"></div>\n<rs-divider-line [targetElement]=\"targetElement\" [direction]=\"direction\"></rs-divider-line>\n", styles: [":host{position:absolute;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;width:24px;height:24px;background-color:#fff;border-radius:12px;cursor:pointer;pointer-events:all}:host .divider-image{width:12px;height:12px;background-size:contain;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAACO0lEQVRIDa2Uy6tNURzHN7cwMUAmHncot0QeV5QiBgZKmWEgzDDx+ANu5soMcUkxIY+iEFIKEZnIyMC9GZAMrke6hXt9Pvus1VnntPbZ53B/9dnrt36P7zpr7bVPUTRtD+5j+Arv4QwshDpbTIG1o2CvGmq12CVmk/ADnsGnMHccgCpbRiLWjuA/BTXUUrM0VzNwD+aVkcbjIMNveJnEUrePyWuYgP1JYi6+WmqWO3FLrpqKMy3tHE8LtzemLc99ITfcEm1MXERNtYsxcGs520nQBV61JWcyHw253W25OFVzbDqPj1D1MheF6tWM24LvcAD6w7yqdwF5tYvT4K90y6m5zQ/wE37BC9Bmw2f4Ah6DNdamFo/vlEHP3pvwB87CLjgGNrrwEbgY/K2MQ8E/zHg0+NbaY68aaqmpdmlLeT4HBSPf8RXQloA3ylvzDTx/34OmsLWxz9Hdqtlivo/l4NXy1syB1C4ziSK547THXjXU6tk20uECnn1fz91dNJynJu5gUxf1PZV4nr6DdzABj2BK7Rpq/votcDX4GxinxNagovjDoOZLdBcPwvy/h/souMDaROlGiK1PYv/kbg5C19u6V4b43bZ4z1M/GF/uQKbzFjF3NpjJdRXaEQQuVFQr7AK3K/Idw36Jb2Ec+jtU3iHnIqs61GRTe4naeDKbbQbXhbqbzVC9N4OSEfAPbD7UmbfMa7uirjDmD+H464/HQM3oB2f9lVxd7l9vFoVv4ESuIRN7QkzxaZlc8RcdnI7tMHZBlAAAAABJRU5ErkJggg==)}:host:hover{background-color:var(--coast-default-color, rgb(51, 122, 183))}\n"] }]
         }], propDecorators: { direction: [{
                 type: Input
             }], targetElement: [{

package/esm2020/box-container/plugin-active/plugin-active.component.mjs

@@ -42,10 +42,10 @@ export class PluginActiveComponent {
     }
 }
 PluginActiveComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PluginActiveComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PluginActiveComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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 rgb(51,122,183);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: i2.DividerComponent, selector: "rs-divider", inputs: ["direction", "targetElement"], outputs: ["dividerClick"] }] });
+PluginActiveComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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, rgb(51, 122, 183));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, rgb(51, 122, 183));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, rgb(217, 83, 79))}: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: i2.DividerComponent, selector: "rs-divider", inputs: ["direction", "targetElement"], outputs: ["dividerClick"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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 rgb(51,122,183);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, rgb(51, 122, 183));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, rgb(51, 122, 183));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, rgb(217, 83, 79))}:host .active-item .active-bar span{flex:1;margin-right:8px}.plugin-active>:host{display:block}\n"] }]
         }], propDecorators: { _style: [{
                 type: HostBinding,
                 args: ['style']

package/esm2020/box-container/plugin-hover/plugin-hover.component.mjs

@@ -15,10 +15,10 @@ export class PluginHoverComponent {
     }
 }
 PluginHoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PluginHoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PluginHoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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 rgb(51,122,183);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.10", 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, rgb(51, 122, 183));pointer-events:none}:host .hover-title{color:var(--coast-default-color, rgb(51, 122, 183));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.10", 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 rgb(51,122,183);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, rgb(51, 122, 183));pointer-events:none}:host .hover-title{color:var(--coast-default-color, rgb(51, 122, 183));position:absolute;top:-18px;left:0}.plugin-active>:host{display:none!important}.plugin-hover>:host{display:block}\n"] }]
         }], propDecorators: { _style: [{
                 type: HostBinding,
                 args: ['style']

package/esm2020/box-container/plugin-not-found/plugin-not-found.component.mjs

@@ -3,9 +3,9 @@ import * as i0 from "@angular/core";
 export class PluginNotFoundComponent {
 }
 PluginNotFoundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PluginNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PluginNotFoundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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 rgb(221,221,221);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:#d9534f;text-align:center;-webkit-user-select:none;user-select:none}\n"] });
+PluginNotFoundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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(--coast-border-color, rgb(221, 221, 221));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(--coast-danger-color, rgb(217, 83, 79));text-align:center;-webkit-user-select:none;user-select:none}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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 rgb(221,221,221);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:#d9534f;text-align:center;-webkit-user-select:none;user-select:none}\n"] }]
+            args: [{ selector: 'rs-plugin-not-found', template: "<div>\n  <span>\u7EC4\u4EF6\u52A0\u8F7D\u5931\u8D25</span>\n</div>\n", styles: [":host{flex:1;margin:16px;border:1px solid var(--coast-border-color, rgb(221, 221, 221));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(--coast-danger-color, rgb(217, 83, 79));text-align:center;-webkit-user-select:none;user-select:none}\n"] }]
         }] });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGx1Z2luLW5vdC1mb3VuZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtcnMtYW50L3NyYy9ib3gtY29udGFpbmVyL3BsdWdpbi1ub3QtZm91bmQvcGx1Z2luLW5vdC1mb3VuZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtcnMtYW50L3NyYy9ib3gtY29udGFpbmVyL3BsdWdpbi1ub3QtZm91bmQvcGx1Z2luLW5vdC1mb3VuZC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFDLE1BQU0sZUFBZSxDQUFDOztBQU94QyxNQUFNLE9BQU8sdUJBQXVCOztxSEFBdkIsdUJBQXVCO3lHQUF2Qix1QkFBdUIsMkRDUHBDLHNFQUdBOzRGRElhLHVCQUF1QjtrQkFMbkMsU0FBUzsrQkFDRSxxQkFBcUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3JzLXBsdWdpbi1ub3QtZm91bmQnLFxuICB0ZW1wbGF0ZVVybDogJy4vcGx1Z2luLW5vdC1mb3VuZC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3BsdWdpbi1ub3QtZm91bmQuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBQbHVnaW5Ob3RGb3VuZENvbXBvbmVudCB7XG59XG4iLCI8ZGl2PlxuICA8c3Bhbj7nu4Tku7bliqDovb3lpLHotKU8L3NwYW4+XG48L2Rpdj5cbiJdfQ==

package/esm2020/camunda-bpmn-editor/camunda-bpmn-editor.component.mjs

@@ -110,10 +110,10 @@ export class CamundaBpmnEditorComponent {
     }
 }
 CamundaBpmnEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CamundaBpmnEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CamundaBpmnEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CamundaBpmnEditorComponent, selector: "rs-camunda-bpmn-editor", inputs: { xml: "xml", showXmlButton: "showXmlButton", showConfigButton: "showConfigButton" }, outputs: { selectedNodeChanged: "selectedNodeChanged" }, viewQueries: [{ propertyName: "bpmnContainer", first: true, predicate: ["bpmnContainer"], descendants: true }, { propertyName: "bpmnConfig", first: true, predicate: ["bpmnConfig"], descendants: true }], ngImport: i0, template: "<div class=\"main\">\r\n  <div class=\"container\" #bpmnContainer></div>\r\n  <div [hidden]=\"!isShowConfig\" class=\"config\" #bpmnConfig></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             [visible]=\"showXmlButton\" (onClick)=\"showXml()\"></dx-button>\r\n  <dx-button [type]=\"isShowConfig ? 'default' : 'normal'\" icon=\"coast-icon coast-icon-setting\"\r\n             style=\"float: right;\" [visible]=\"showConfigButton\"\r\n             (onClick)=\"isShowConfig = !isShowConfig;\"></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 rgb(221,221,221)}:host .main .xml-viewer{position:absolute;width:100%;height:100%;display:flex;flex-flow:column nowrap;z-index:2000}:host .main .xml-viewer rs-code-editor{flex:1}:host .footer{flex:0 0 24px;border:1px solid rgb(221,221,221)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.CodeEditorComponent, selector: "rs-code-editor", inputs: ["code", "language", "readonly", "enableMinimap", "consoleMessage"], outputs: ["codeChange", "onContentReady"] }, { kind: "component", type: i3.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }] });
+CamundaBpmnEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CamundaBpmnEditorComponent, selector: "rs-camunda-bpmn-editor", inputs: { xml: "xml", showXmlButton: "showXmlButton", showConfigButton: "showConfigButton" }, outputs: { selectedNodeChanged: "selectedNodeChanged" }, viewQueries: [{ propertyName: "bpmnContainer", first: true, predicate: ["bpmnContainer"], descendants: true }, { propertyName: "bpmnConfig", first: true, predicate: ["bpmnConfig"], descendants: true }], ngImport: i0, template: "<div class=\"main\">\r\n  <div class=\"container\" #bpmnContainer></div>\r\n  <div [hidden]=\"!isShowConfig\" class=\"config\" #bpmnConfig></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             [visible]=\"showXmlButton\" (onClick)=\"showXml()\"></dx-button>\r\n  <dx-button [type]=\"isShowConfig ? 'default' : 'normal'\" icon=\"coast-icon coast-icon-setting\"\r\n             style=\"float: right;\" [visible]=\"showConfigButton\"\r\n             (onClick)=\"isShowConfig = !isShowConfig;\"></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, rgb(221, 221, 221))}:host .main .xml-viewer{position:absolute;width:100%;height:100%;display:flex;flex-flow:column nowrap;z-index:var(--coast-z-index-drawer, 2000)}:host .main .xml-viewer rs-code-editor{flex:1}:host .footer{flex:0 0 24px;border:1px solid var(--coast-border-color, rgb(221, 221, 221))}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.CodeEditorComponent, selector: "rs-code-editor", inputs: ["code", "language", "readonly", "enableMinimap", "consoleMessage"], outputs: ["codeChange", "onContentReady"] }, { kind: "component", type: i3.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CamundaBpmnEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-camunda-bpmn-editor', template: "<div class=\"main\">\r\n  <div class=\"container\" #bpmnContainer></div>\r\n  <div [hidden]=\"!isShowConfig\" class=\"config\" #bpmnConfig></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             [visible]=\"showXmlButton\" (onClick)=\"showXml()\"></dx-button>\r\n  <dx-button [type]=\"isShowConfig ? 'default' : 'normal'\" icon=\"coast-icon coast-icon-setting\"\r\n             style=\"float: right;\" [visible]=\"showConfigButton\"\r\n             (onClick)=\"isShowConfig = !isShowConfig;\"></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 rgb(221,221,221)}:host .main .xml-viewer{position:absolute;width:100%;height:100%;display:flex;flex-flow:column nowrap;z-index:2000}:host .main .xml-viewer rs-code-editor{flex:1}:host .footer{flex:0 0 24px;border:1px solid rgb(221,221,221)}\n"] }]
+            args: [{ selector: 'rs-camunda-bpmn-editor', template: "<div class=\"main\">\r\n  <div class=\"container\" #bpmnContainer></div>\r\n  <div [hidden]=\"!isShowConfig\" class=\"config\" #bpmnConfig></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             [visible]=\"showXmlButton\" (onClick)=\"showXml()\"></dx-button>\r\n  <dx-button [type]=\"isShowConfig ? 'default' : 'normal'\" icon=\"coast-icon coast-icon-setting\"\r\n             style=\"float: right;\" [visible]=\"showConfigButton\"\r\n             (onClick)=\"isShowConfig = !isShowConfig;\"></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, rgb(221, 221, 221))}:host .main .xml-viewer{position:absolute;width:100%;height:100%;display:flex;flex-flow:column nowrap;z-index:var(--coast-z-index-drawer, 2000)}:host .main .xml-viewer rs-code-editor{flex:1}:host .footer{flex:0 0 24px;border:1px solid var(--coast-border-color, rgb(221, 221, 221))}\n"] }]
         }], propDecorators: { xml: [{
                 type: Input
             }], showXmlButton: [{

package/esm2020/code-editor/code-editor.component.mjs

@@ -48,10 +48,10 @@ export class CodeEditorComponent {
     }
 }
 CodeEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CodeEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CodeEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "<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 rgb(221,221,221);background-color:#0000001a}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+CodeEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "<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, rgb(221, 221, 221));background-color:var(--coast-empty-color, rgb(229, 229, 229))}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CodeEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-code-editor', template: "<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 rgb(221,221,221);background-color:#0000001a}\n"] }]
+            args: [{ selector: 'rs-code-editor', template: "<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, rgb(221, 221, 221));background-color:var(--coast-empty-color, rgb(229, 229, 229))}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { code: [{
                 type: Input
             }], codeChange: [{

package/esm2020/data-detail/data-detail.component.mjs

@@ -28,9 +28,9 @@ export class DataDetailComponent {
     }
 }
 DataDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataDetailComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1.DataDetailService }], target: i0.ɵɵFactoryTarget.Component });
-DataDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DataDetailComponent, selector: "coast-data-detail", providers: [DataDetailService], ngImport: i0, template: "<dx-load-panel [container]=\"viewContainerRef.element.nativeElement\" [showPane]=\"false\"\n               [visible]=\"loading\">\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\n</dx-load-panel>\n<div *ngIf=\"!loading && sections.length === 0\" class=\"empty\">\n  <span>\u60A8\u65E0\u6743\u67E5\u770B\u8BE5\u6570\u636E\u5B9E\u4F8B\u4EFB\u4F55\u4FE1\u606F</span>\n</div>\n<ng-container *ngIf=\"sections.length > 0\">\n  <dx-accordion [collapsible]=\"true\" [multiple]=\"true\" [deferRendering]=\"false\" [dataSource]=\"sections\"\n                [selectedItems]=\"sections\" [focusStateEnabled]=\"false\">\n    <div *dxTemplate=\"let section of 'title'\" class=\"section-title\">\n      <div class=\"section-title-name\">{{ section.name }}</div>\n    </div>\n    <div *dxTemplate=\"let section of 'item'\">\n      <rs-form [tenant]=\"tenant\" [className]=\"className\" [oid]=\"oid\" [template]=\"section.formTemplate\" [params]=\"params\"\n               [tabViewContainerRef]=\"tabViewContainerRef\" [readonly]=\"true\"></rs-form>\n    </div>\n  </dx-accordion>\n</ng-container>\n", styles: [":host{flex:1;padding:24px;display:flex;flex-flow:column nowrap}:host div.empty{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div.empty span{text-align:center;-webkit-user-select:none;user-select:none}:host .section-title{border-bottom:1px solid rgb(221,221,221)}: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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.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: i4.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i5.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: i7.FormComponent, selector: "rs-form", inputs: ["tenant", "className", "oid", "copyOid", "template", "extraAttrMap", "params", "tabViewContainerRef", "onlyFrontEnd", "model", "readonly"], outputs: ["onDataLoaded", "submitCallback"] }] });
+DataDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DataDetailComponent, selector: "coast-data-detail", providers: [DataDetailService], ngImport: i0, template: "<dx-load-panel [container]=\"viewContainerRef.element.nativeElement\" [showPane]=\"false\"\n               [visible]=\"loading\">\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\n</dx-load-panel>\n<div *ngIf=\"!loading && sections.length === 0\" class=\"empty\">\n  <span>\u60A8\u65E0\u6743\u67E5\u770B\u8BE5\u6570\u636E\u5B9E\u4F8B\u4EFB\u4F55\u4FE1\u606F</span>\n</div>\n<ng-container *ngIf=\"sections.length > 0\">\n  <dx-accordion [collapsible]=\"true\" [multiple]=\"true\" [deferRendering]=\"false\" [dataSource]=\"sections\"\n                [selectedItems]=\"sections\" [focusStateEnabled]=\"false\">\n    <div *dxTemplate=\"let section of 'title'\" class=\"section-title\">\n      <div class=\"section-title-name\">{{ section.name }}</div>\n    </div>\n    <div *dxTemplate=\"let section of 'item'\">\n      <rs-form [tenant]=\"tenant\" [className]=\"className\" [oid]=\"oid\" [template]=\"section.formTemplate\" [params]=\"params\"\n               [tabViewContainerRef]=\"tabViewContainerRef\" [readonly]=\"true\"></rs-form>\n    </div>\n  </dx-accordion>\n</ng-container>\n", styles: [":host{flex:1;padding:24px;display:flex;flex-flow:column nowrap}:host div.empty{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div.empty span{text-align:center;-webkit-user-select:none;user-select:none}:host .section-title{border-bottom:1px solid var(--coast-border-color, rgb(221, 221, 221))}: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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.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: i4.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i5.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: i7.FormComponent, selector: "rs-form", inputs: ["tenant", "className", "oid", "copyOid", "template", "extraAttrMap", "params", "tabViewContainerRef", "onlyFrontEnd", "model", "readonly"], outputs: ["onDataLoaded", "submitCallback"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'coast-data-detail', providers: [DataDetailService], template: "<dx-load-panel [container]=\"viewContainerRef.element.nativeElement\" [showPane]=\"false\"\n               [visible]=\"loading\">\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\n</dx-load-panel>\n<div *ngIf=\"!loading && sections.length === 0\" class=\"empty\">\n  <span>\u60A8\u65E0\u6743\u67E5\u770B\u8BE5\u6570\u636E\u5B9E\u4F8B\u4EFB\u4F55\u4FE1\u606F</span>\n</div>\n<ng-container *ngIf=\"sections.length > 0\">\n  <dx-accordion [collapsible]=\"true\" [multiple]=\"true\" [deferRendering]=\"false\" [dataSource]=\"sections\"\n                [selectedItems]=\"sections\" [focusStateEnabled]=\"false\">\n    <div *dxTemplate=\"let section of 'title'\" class=\"section-title\">\n      <div class=\"section-title-name\">{{ section.name }}</div>\n    </div>\n    <div *dxTemplate=\"let section of 'item'\">\n      <rs-form [tenant]=\"tenant\" [className]=\"className\" [oid]=\"oid\" [template]=\"section.formTemplate\" [params]=\"params\"\n               [tabViewContainerRef]=\"tabViewContainerRef\" [readonly]=\"true\"></rs-form>\n    </div>\n  </dx-accordion>\n</ng-container>\n", styles: [":host{flex:1;padding:24px;display:flex;flex-flow:column nowrap}:host div.empty{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div.empty span{text-align:center;-webkit-user-select:none;user-select:none}:host .section-title{border-bottom:1px solid rgb(221,221,221)}: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\"\n               [visible]=\"loading\">\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\n</dx-load-panel>\n<div *ngIf=\"!loading && sections.length === 0\" class=\"empty\">\n  <span>\u60A8\u65E0\u6743\u67E5\u770B\u8BE5\u6570\u636E\u5B9E\u4F8B\u4EFB\u4F55\u4FE1\u606F</span>\n</div>\n<ng-container *ngIf=\"sections.length > 0\">\n  <dx-accordion [collapsible]=\"true\" [multiple]=\"true\" [deferRendering]=\"false\" [dataSource]=\"sections\"\n                [selectedItems]=\"sections\" [focusStateEnabled]=\"false\">\n    <div *dxTemplate=\"let section of 'title'\" class=\"section-title\">\n      <div class=\"section-title-name\">{{ section.name }}</div>\n    </div>\n    <div *dxTemplate=\"let section of 'item'\">\n      <rs-form [tenant]=\"tenant\" [className]=\"className\" [oid]=\"oid\" [template]=\"section.formTemplate\" [params]=\"params\"\n               [tabViewContainerRef]=\"tabViewContainerRef\" [readonly]=\"true\"></rs-form>\n    </div>\n  </dx-accordion>\n</ng-container>\n", styles: [":host{flex:1;padding:24px;display:flex;flex-flow:column nowrap}:host div.empty{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div.empty span{text-align:center;-webkit-user-select:none;user-select:none}:host .section-title{border-bottom:1px solid var(--coast-border-color, rgb(221, 221, 221))}: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: i1.DataDetailService }]; } });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0YS1kZXRhaWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXJzLWFudC9zcmMvZGF0YS1kZXRhaWwvZGF0YS1kZXRhaWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXJzLWFudC9zcmMvZGF0YS1kZXRhaWwvZGF0YS1kZXRhaWwuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBbUIsTUFBTSxlQUFlLENBQUM7QUFDMUQsT0FBTyxFQUFDLGlCQUFpQixFQUFDLE1BQU0sdUJBQXVCLENBQUM7Ozs7Ozs7OztBQVF4RCxNQUFNLE9BQU8sbUJBQW1CO0lBUzlCLFlBQXNCLGdCQUFrQyxFQUFVLE9BQTBCO1FBQXRFLHFCQUFnQixHQUFoQixnQkFBZ0IsQ0FBa0I7UUFBVSxZQUFPLEdBQVAsT0FBTyxDQUFtQjtRQUg1RixhQUFRLEdBQVUsRUFBRSxDQUFDO1FBQ3JCLFlBQU8sR0FBRyxLQUFLLENBQUM7SUFHaEIsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQztRQUNwQixJQUFJLENBQUMsT0FBTyxDQUFDLG1CQUFtQixDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLFNBQVMsRUFBRSxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsU0FBUyxDQUFDLFFBQVEsQ0FBQyxFQUFFO1lBQzFGLE1BQWMsQ0FBQyxLQUFLLENBQUMsVUFBVSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUM7Z0JBQzdDLEVBQUUsRUFBRSxTQUFTLEdBQUcsSUFBSSxDQUFDLE1BQU0sR0FBRyxHQUFHLEdBQUcsSUFBSSxDQUFDLFNBQVMsR0FBRyxHQUFHLEdBQUcsSUFBSSxDQUFDLEdBQUc7Z0JBQ25FLEtBQUssRUFBRSxRQUFRLENBQUMsSUFBSSxDQUFDLEtBQUs7YUFDM0IsQ0FBQyxDQUFDO1lBQ0gsSUFBSSxDQUFDLFFBQVEsR0FBRyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQztZQUNuQyxJQUFJLENBQUMsT0FBTyxHQUFHLEtBQUssQ0FBQztRQUN2QixDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7O2lIQXRCVSxtQkFBbUI7cUdBQW5CLG1CQUFtQiw0Q0FGbkIsQ0FBQyxpQkFBaUIsQ0FBQywwQkNQaEMsOGxDQW1CQTs0RkRWYSxtQkFBbUI7a0JBTi9CLFNBQVM7K0JBQ0UsbUJBQW1CLGFBR2xCLENBQUMsaUJBQWlCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgVmlld0NvbnRhaW5lclJlZn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge0RhdGFEZXRhaWxTZXJ2aWNlfSBmcm9tIFwiLi9kYXRhLWRldGFpbC5zZXJ2aWNlXCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NvYXN0LWRhdGEtZGV0YWlsJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2RhdGEtZGV0YWlsLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZGF0YS1kZXRhaWwuY29tcG9uZW50LnNjc3MnXSxcbiAgcHJvdmlkZXJzOiBbRGF0YURldGFpbFNlcnZpY2VdXG59KVxuZXhwb3J0IGNsYXNzIERhdGFEZXRhaWxDb21wb25lbnQge1xuICB0ZW5hbnQ6IGFueTtcbiAgY2xhc3NOYW1lOiBhbnk7XG4gIG9pZDogYW55O1xuICBwYXJhbXM/OiBhbnk7XG4gIHRhYlZpZXdDb250YWluZXJSZWYhOiBWaWV3Q29udGFpbmVyUmVmO1xuICBzZWN0aW9uczogYW55W10gPSBbXTtcbiAgbG9hZGluZyA9IGZhbHNlO1xuXG4gIGNvbnN0cnVjdG9yKHByb3RlY3RlZCB2aWV3Q29udGFpbmVyUmVmOiBWaWV3Q29udGFpbmVyUmVmLCBwcml2YXRlIHNlcnZpY2U6IERhdGFEZXRhaWxTZXJ2aWNlKSB7XG4gIH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLmxvYWRpbmcgPSB0cnVlO1xuICAgIHRoaXMuc2VydmljZS5nZXRJbnN0YW5jZVNlY3Rpb25zKHRoaXMudGVuYW50LCB0aGlzLmNsYXNzTmFtZSwgdGhpcy5vaWQpLnN1YnNjcmliZShyZXNwb25zZSA9PiB7XG4gICAgICAod2luZG93IGFzIGFueSkuY29hc3QudGFiTWFuYWdlci5zZXRUaXRsZS5uZXh0KHtcbiAgICAgICAgaWQ6ICdkZXRhaWw6JyArIHRoaXMudGVuYW50ICsgJ18nICsgdGhpcy5jbGFzc05hbWUgKyAnXycgKyB0aGlzLm9pZCxcbiAgICAgICAgdGl0bGU6IHJlc3BvbnNlLmRhdGEudGl0bGVcbiAgICAgIH0pO1xuICAgICAgdGhpcy5zZWN0aW9ucyA9IHJlc3BvbnNlLmRhdGEubGlzdDtcbiAgICAgIHRoaXMubG9hZGluZyA9IGZhbHNlO1xuICAgIH0pO1xuICB9XG59XG4iLCI8ZHgtbG9hZC1wYW5lbCBbY29udGFpbmVyXT1cInZpZXdDb250YWluZXJSZWYuZWxlbWVudC5uYXRpdmVFbGVtZW50XCIgW3Nob3dQYW5lXT1cImZhbHNlXCJcbiAgICAgICAgICAgICAgIFt2aXNpYmxlXT1cImxvYWRpbmdcIj5cbiAgPGR4by1wb3NpdGlvbiBbb2ZdPVwidmlld0NvbnRhaW5lclJlZi5lbGVtZW50Lm5hdGl2ZUVsZW1lbnRcIj48L2R4by1wb3NpdGlvbj5cbjwvZHgtbG9hZC1wYW5lbD5cbjxkaXYgKm5nSWY9XCIhbG9hZGluZyAmJiBzZWN0aW9ucy5sZW5ndGggPT09IDBcIiBjbGFzcz1cImVtcHR5XCI+XG4gIDxzcGFuPuaCqOaXoOadg+afpeeci+ivpeaVsOaNruWunuS+i+S7u+S9leS/oeaBrzwvc3Bhbj5cbjwvZGl2PlxuPG5nLWNvbnRhaW5lciAqbmdJZj1cInNlY3Rpb25zLmxlbmd0aCA+IDBcIj5cbiAgPGR4LWFjY29yZGlvbiBbY29sbGFwc2libGVdPVwidHJ1ZVwiIFttdWx0aXBsZV09XCJ0cnVlXCIgW2RlZmVyUmVuZGVyaW5nXT1cImZhbHNlXCIgW2RhdGFTb3VyY2VdPVwic2VjdGlvbnNcIlxuICAgICAgICAgICAgICAgIFtzZWxlY3RlZEl0ZW1zXT1cInNlY3Rpb25zXCIgW2ZvY3VzU3RhdGVFbmFibGVkXT1cImZhbHNlXCI+XG4gICAgPGRpdiAqZHhUZW1wbGF0ZT1cImxldCBzZWN0aW9uIG9mICd0aXRsZSdcIiBjbGFzcz1cInNlY3Rpb24tdGl0bGVcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJzZWN0aW9uLXRpdGxlLW5hbWVcIj57eyBzZWN0aW9uLm5hbWUgfX08L2Rpdj5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2ICpkeFRlbXBsYXRlPVwibGV0IHNlY3Rpb24gb2YgJ2l0ZW0nXCI+XG4gICAgICA8cnMtZm9ybSBbdGVuYW50XT1cInRlbmFudFwiIFtjbGFzc05hbWVdPVwiY2xhc3NOYW1lXCIgW29pZF09XCJvaWRcIiBbdGVtcGxhdGVdPVwic2VjdGlvbi5mb3JtVGVtcGxhdGVcIiBbcGFyYW1zXT1cInBhcmFtc1wiXG4gICAgICAgICAgICAgICBbdGFiVmlld0NvbnRhaW5lclJlZl09XCJ0YWJWaWV3Q29udGFpbmVyUmVmXCIgW3JlYWRvbmx5XT1cInRydWVcIj48L3JzLWZvcm0+XG4gICAgPC9kaXY+XG4gIDwvZHgtYWNjb3JkaW9uPlxuPC9uZy1jb250YWluZXI+XG4iXX0=

package/esm2020/drawer/drawer.component.mjs

@@ -31,10 +31,10 @@ export class DrawerComponent {
     }
 }
 DrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DrawerComponent, selector: "rs-drawer", host: { listeners: { "click": "stopPropagation($event)", "window:click": "autoHide($event)" } }, ngImport: i0, template: "<div class=\"drawer\" [class.hide-on-outside-click]=\"config?.hideOnOutsideClick\" [ngStyle]=\"{width: _width}\">\n  <div *ngIf=\"headerTemplate\" class=\"drawer-header\">\n    <ng-template [ngTemplateOutlet]=\"headerTemplate\"\n                 [ngTemplateOutletContext]=\"{$implicit: headerTemplateContext}\"></ng-template>\n  </div>\n  <div class=\"drawer-content\">\n    <ng-template [ngTemplateOutlet]=\"contentTemplate\"\n                 [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\n  </div>\n  <div class=\"drawer-close\">\n    <dx-button height=\"80px\" icon=\"coast-icon coast-icon-arrow-right-filling\" (onClick)=\"hide($event)\"></dx-button>\n  </div>\n</div>\n", styles: [":host .drawer{position:absolute;top:0;right:0;bottom:0;height:100%;z-index:1000;background-color:#fff;border-left:1px solid rgb(221,221,221);box-shadow:-8px 0 4px -4px #252b3a3d;display:flex;flex-flow:column nowrap}:host .drawer.hide-on-outside-click{z-index:2000}:host .drawer .drawer-header{flex:0 0 36px;padding:8px;border-bottom:1px solid rgb(221,221,221);display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-end}:host .drawer .drawer-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .drawer .drawer-close{position:absolute;height:100%;width:20px;top:0;left:-20px;display:flex;flex-flow:row nowrap;align-items:center}:host .drawer .drawer-close dx-button{box-shadow:-8px 0 4px -4px #252b3a3d}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.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.10", type: DrawerComponent, selector: "rs-drawer", host: { listeners: { "click": "stopPropagation($event)", "window:click": "autoHide($event)" } }, ngImport: i0, template: "<div class=\"drawer\" [class.hide-on-outside-click]=\"config?.hideOnOutsideClick\" [ngStyle]=\"{width: _width}\">\n  <div *ngIf=\"headerTemplate\" class=\"drawer-header\">\n    <ng-template [ngTemplateOutlet]=\"headerTemplate\"\n                 [ngTemplateOutletContext]=\"{$implicit: headerTemplateContext}\"></ng-template>\n  </div>\n  <div class=\"drawer-content\">\n    <ng-template [ngTemplateOutlet]=\"contentTemplate\"\n                 [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\n  </div>\n  <div class=\"drawer-close\">\n    <dx-button height=\"80px\" icon=\"coast-icon coast-icon-arrow-right-filling\" (onClick)=\"hide($event)\"></dx-button>\n  </div>\n</div>\n", styles: [":host .drawer{position:absolute;top:0;right:0;bottom:0;height:100%;z-index:var(--coast-z-index-framework, 1000);background-color:var(--coast-base-bg-color, rgb(255, 255, 255));border-left:1px solid var(--coast-border-color, rgb(221, 221, 221));box-shadow:-8px 0 4px -4px #252b3a3d;display:flex;flex-flow:column nowrap}:host .drawer.hide-on-outside-click{z-index:var(--coast-z-index-drawer, 2000)}:host .drawer .drawer-header{flex:0 0 36px;padding:8px;border-bottom:1px solid var(--coast-border-color, rgb(221, 221, 221));display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-end}:host .drawer .drawer-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .drawer .drawer-close{position:absolute;height:100%;width:20px;top:0;left:-20px;display:flex;flex-flow:row nowrap;align-items:center}:host .drawer .drawer-close dx-button{box-shadow:-8px 0 4px -4px #252b3a3d}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.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.10", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-drawer', template: "<div class=\"drawer\" [class.hide-on-outside-click]=\"config?.hideOnOutsideClick\" [ngStyle]=\"{width: _width}\">\n  <div *ngIf=\"headerTemplate\" class=\"drawer-header\">\n    <ng-template [ngTemplateOutlet]=\"headerTemplate\"\n                 [ngTemplateOutletContext]=\"{$implicit: headerTemplateContext}\"></ng-template>\n  </div>\n  <div class=\"drawer-content\">\n    <ng-template [ngTemplateOutlet]=\"contentTemplate\"\n                 [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\n  </div>\n  <div class=\"drawer-close\">\n    <dx-button height=\"80px\" icon=\"coast-icon coast-icon-arrow-right-filling\" (onClick)=\"hide($event)\"></dx-button>\n  </div>\n</div>\n", styles: [":host .drawer{position:absolute;top:0;right:0;bottom:0;height:100%;z-index:1000;background-color:#fff;border-left:1px solid rgb(221,221,221);box-shadow:-8px 0 4px -4px #252b3a3d;display:flex;flex-flow:column nowrap}:host .drawer.hide-on-outside-click{z-index:2000}:host .drawer .drawer-header{flex:0 0 36px;padding:8px;border-bottom:1px solid rgb(221,221,221);display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-end}:host .drawer .drawer-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .drawer .drawer-close{position:absolute;height:100%;width:20px;top:0;left:-20px;display:flex;flex-flow:row nowrap;align-items:center}:host .drawer .drawer-close dx-button{box-shadow:-8px 0 4px -4px #252b3a3d}\n"] }]
+            args: [{ selector: 'rs-drawer', template: "<div class=\"drawer\" [class.hide-on-outside-click]=\"config?.hideOnOutsideClick\" [ngStyle]=\"{width: _width}\">\n  <div *ngIf=\"headerTemplate\" class=\"drawer-header\">\n    <ng-template [ngTemplateOutlet]=\"headerTemplate\"\n                 [ngTemplateOutletContext]=\"{$implicit: headerTemplateContext}\"></ng-template>\n  </div>\n  <div class=\"drawer-content\">\n    <ng-template [ngTemplateOutlet]=\"contentTemplate\"\n                 [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\n  </div>\n  <div class=\"drawer-close\">\n    <dx-button height=\"80px\" icon=\"coast-icon coast-icon-arrow-right-filling\" (onClick)=\"hide($event)\"></dx-button>\n  </div>\n</div>\n", styles: [":host .drawer{position:absolute;top:0;right:0;bottom:0;height:100%;z-index:var(--coast-z-index-framework, 1000);background-color:var(--coast-base-bg-color, rgb(255, 255, 255));border-left:1px solid var(--coast-border-color, rgb(221, 221, 221));box-shadow:-8px 0 4px -4px #252b3a3d;display:flex;flex-flow:column nowrap}:host .drawer.hide-on-outside-click{z-index:var(--coast-z-index-drawer, 2000)}:host .drawer .drawer-header{flex:0 0 36px;padding:8px;border-bottom:1px solid var(--coast-border-color, rgb(221, 221, 221));display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-end}:host .drawer .drawer-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .drawer .drawer-close{position:absolute;height:100%;width:20px;top:0;left:-20px;display:flex;flex-flow:row nowrap;align-items:center}:host .drawer .drawer-close dx-button{box-shadow:-8px 0 4px -4px #252b3a3d}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { stopPropagation: [{
                 type: HostListener,
                 args: ['click', ['$event']]