ngx-rs-ant 0.10.8 → 0.11.0

package/fesm2020/ngx-rs-ant.mjs

@@ -138,14 +138,14 @@ class PluginActiveComponent {
         this.itemRemove.emit();
     }
     splitItem(direction) {
-        // 在布局型组件中实例化时重写
+        // 上层实例化时重写
     }
 }
 PluginActiveComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PluginActiveComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PluginActiveComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: PluginActiveComponent, selector: "rs-plugin-active", host: { properties: { "style": "this._style" } }, ngImport: i0, template: "<div class=\"active-item\"\r\n     dDraggable\r\n     [disabled]=\"!showClose || showDivider\"\r\n     [dragData]=\"dragData\"\r\n     dragScope=\"plugin-item\"\r\n>\r\n  <div class=\"active-bar\">\r\n    <i *ngIf=\"showClose && !showDivider\" class=\"icon-drag\"></i>\r\n    <span>{{name}}</span>\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(--devui-brand, #5e7ce0);pointer-events:none}:host .active-item{width:100%;height:100%}:host .active-item .active-bar{padding:2px 4px;color:#fff;background-color:var(--devui-brand, #5e7ce0);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.icon-drag{flex:none;margin-right:8px;cursor:move}:host .active-item .active-bar span{flex:1}:host .active-item .active-bar i.icon-close{flex:none;margin-left:8px;cursor:pointer}:host .active-item .active-bar i.icon-close:hover{color:var(--devui-danger, #f66f6a)}.plugin-active>:host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DraggableDirective, selector: "[dDraggable]", inputs: ["dragData", "dragHandle", "dragEffect", "dragScope", "dragHandleClass", "dragOverClass", "disabled", "enableDragFollow", "dragFollowOptions", "originPlaceholder", "dragIdentity", "dragItemParentName", "dragItemChildrenName"], outputs: ["dragStartEvent", "dragEvent", "dragEndEvent", "dropEndEvent"] }, { kind: "component", type: DividerComponent, selector: "rs-divider", inputs: ["direction", "targetElement"], outputs: ["dividerClick"] }] });
+PluginActiveComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: PluginActiveComponent, selector: "rs-plugin-active", host: { properties: { "style": "this._style" } }, ngImport: i0, template: "<div class=\"active-item\"\r\n     dDraggable\r\n     [disabled]=\"!showClose || showDivider\"\r\n     [dragData]=\"dragData\"\r\n     dragScope=\"plugin-item\"\r\n>\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(--devui-brand, #5e7ce0);pointer-events:none}:host .active-item{width:100%;height:100%}:host .active-item .active-bar{padding:2px 4px;color:#fff;background-color:var(--devui-brand, #5e7ce0);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(--devui-danger, #f66f6a)}: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: "directive", type: i2.DraggableDirective, selector: "[dDraggable]", inputs: ["dragData", "dragHandle", "dragEffect", "dragScope", "dragHandleClass", "dragOverClass", "disabled", "enableDragFollow", "dragFollowOptions", "originPlaceholder", "dragIdentity", "dragItemParentName", "dragItemChildrenName"], outputs: ["dragStartEvent", "dragEvent", "dragEndEvent", "dropEndEvent"] }, { kind: "component", type: DividerComponent, selector: "rs-divider", inputs: ["direction", "targetElement"], outputs: ["dividerClick"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PluginActiveComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-plugin-active', template: "<div class=\"active-item\"\r\n     dDraggable\r\n     [disabled]=\"!showClose || showDivider\"\r\n     [dragData]=\"dragData\"\r\n     dragScope=\"plugin-item\"\r\n>\r\n  <div class=\"active-bar\">\r\n    <i *ngIf=\"showClose && !showDivider\" class=\"icon-drag\"></i>\r\n    <span>{{name}}</span>\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(--devui-brand, #5e7ce0);pointer-events:none}:host .active-item{width:100%;height:100%}:host .active-item .active-bar{padding:2px 4px;color:#fff;background-color:var(--devui-brand, #5e7ce0);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.icon-drag{flex:none;margin-right:8px;cursor:move}:host .active-item .active-bar span{flex:1}:host .active-item .active-bar i.icon-close{flex:none;margin-left:8px;cursor:pointer}:host .active-item .active-bar i.icon-close:hover{color:var(--devui-danger, #f66f6a)}.plugin-active>:host{display:block}\n"] }]
+            args: [{ selector: 'rs-plugin-active', template: "<div class=\"active-item\"\r\n     dDraggable\r\n     [disabled]=\"!showClose || showDivider\"\r\n     [dragData]=\"dragData\"\r\n     dragScope=\"plugin-item\"\r\n>\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(--devui-brand, #5e7ce0);pointer-events:none}:host .active-item{width:100%;height:100%}:host .active-item .active-bar{padding:2px 4px;color:#fff;background-color:var(--devui-brand, #5e7ce0);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(--devui-danger, #f66f6a)}:host .active-item .active-bar span{flex:1;margin-right:8px}.plugin-active>:host{display:block}\n"] }]
         }], propDecorators: { _style: [{
                 type: HostBinding,
                 args: ['style']
@@ -210,6 +210,7 @@ class PluginManager {
                 boxItem.config.list.splice(index, 1, { type: 'blank', style: boxItem.config.list[index].style });
                 boxItem.load();
             };
+            componentRef.location.nativeElement.style.margin = '8px';
             componentRef.location.nativeElement.style.pointerEvents = 'all';
             for (let child of componentRef.location.nativeElement.children) {
                 child.style.pointerEvents = 'none';
@@ -267,6 +268,34 @@ class PluginManager {
             this.activeItem.next({ boxItem, index, style, config: config.config, componentRef });
             $event.target.classList.add('plugin-active');
         });
+        activeComponentRef.instance.splitItem = (direction) => {
+            if (boxItem.config.direction === direction) {
+                boxItem.config.list.splice(index + 1, 0, { type: 'blank', style: {} });
+                boxItem.load();
+            }
+            else {
+                if (boxItem.config.list.length === 1) {
+                    boxItem.config.direction = direction;
+                    boxItem.config.list.push({ type: 'blank', style: {} });
+                }
+                else {
+                    if (boxItem.config.list[index].type === 'item' && boxItem.config.list[index].config.direction === direction) {
+                        boxItem.config.list[index].config.list.push({ type: 'blank', style: {} });
+                    }
+                    else {
+                        boxItem.config.list.splice(index, 1, {
+                            type: 'item',
+                            style: boxItem.config.list[index].style,
+                            config: {
+                                direction,
+                                list: [boxItem.config.list[index], { type: 'blank', style: {} }]
+                            }
+                        });
+                    }
+                }
+                boxItem.load();
+            }
+        };
         activeComponentRef.instance.itemRemove.subscribe(() => {
             this.activeItem.next('');
             viewContainerRef.clear();
@@ -434,10 +463,10 @@ class ItemBlankComponent {
     }
 }
 ItemBlankComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ItemBlankComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ItemBlankComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ItemBlankComponent, selector: "rs-item-blank", outputs: { dropItem: "dropItem" }, ngImport: i0, template: "<div dDroppable\n     [dropScope]=\"['plugin-item', 'page', 'form']\"\n     dragOverClass=\"active\"\n     (dropEvent)=\"dropEvent($event)\"\n>\n  <span>\u62D6\u62FD\u7EC4\u4EF6\u5230\u6B64\u5904</span>\n</div>\n", styles: [":host{flex:1;margin:16px;border:1px solid var(--devui-dividing-line, #f2f2f3);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AQMAAAAAMksxAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRF8fHxAAAAMCd7XAAAAAJ0Uk5T/wDltzBKAAABJUlEQVR4nFVSy23EIBCdAiKxBaxCC1tBaGk7YG/OjZYSOQptLKKB8Y0D8ssbjBPl9gQz7wfigQbgQxygEXjIAjwDcJEV+PbYb1KAlNDusgE+Q1Va3EPFptJDjwVVZfcNiqwCV9BiIlhW9DdPkEn5GggKRV4igVL2AYJGpc8TFAMa5lXhzHuc69dwEO6DkBI9OhNVii60ERu3VxrjRUVRet7DsMoUbpgny+LRb5b0K2C/CAWejCxCSYVl9wcQSaMEzuRRArcqebzxcMCnUcKQsBKiiVoJoR1+4DfWSodILCGa5zXTvKWo5L5ars0C/iuh003F7GecbG62YVujunzypDqZTcsK76HF2UYP41HM4WoO7eEWNLUUyaHf/3L9JvXnBwjzS/wAoXR0PDbjCSUAAAAASUVORK5CYII=) repeat var(--devui-unavailable, #f5f5f5);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 div.active{background-color:var(--devui-waiting, #beccfa)}:host.plugin-hover>div{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i2.DroppableDirective, selector: "[dDroppable]", inputs: ["dragOverClass", "dropScope", "placeholderTag", "placeholderStyle", "placeholderText", "allowDropOnItem", "dragOverItemClass", "nestingTargetRect", "switchWhileCrossEdge", "defaultDropPosition", "dropSortCountSelector", "dropSortVirtualScrollOption"], outputs: ["dragEnterEvent", "dragOverEvent", "dragLeaveEvent", "dropEvent"] }] });
+ItemBlankComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ItemBlankComponent, selector: "rs-item-blank", outputs: { dropItem: "dropItem" }, ngImport: i0, template: "<div dDroppable\n     [dropScope]=\"['plugin-item', 'page', 'form']\"\n     dragOverClass=\"active\"\n     (dropEvent)=\"dropEvent($event)\"\n>\n  <span>\u62D6\u62FD\u7EC4\u4EF6\u5230\u6B64\u5904</span>\n</div>\n", styles: [":host{flex:1;margin:8px;border:1px solid var(--devui-dividing-line, #f2f2f3);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AQMAAAAAMksxAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRF8fHxAAAAMCd7XAAAAAJ0Uk5T/wDltzBKAAABJUlEQVR4nFVSy23EIBCdAiKxBaxCC1tBaGk7YG/OjZYSOQptLKKB8Y0D8ssbjBPl9gQz7wfigQbgQxygEXjIAjwDcJEV+PbYb1KAlNDusgE+Q1Va3EPFptJDjwVVZfcNiqwCV9BiIlhW9DdPkEn5GggKRV4igVL2AYJGpc8TFAMa5lXhzHuc69dwEO6DkBI9OhNVii60ERu3VxrjRUVRet7DsMoUbpgny+LRb5b0K2C/CAWejCxCSYVl9wcQSaMEzuRRArcqebzxcMCnUcKQsBKiiVoJoR1+4DfWSodILCGa5zXTvKWo5L5ars0C/iuh003F7GecbG62YVujunzypDqZTcsK76HF2UYP41HM4WoO7eEWNLUUyaHf/3L9JvXnBwjzS/wAoXR0PDbjCSUAAAAASUVORK5CYII=) repeat var(--devui-unavailable, #f5f5f5);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 div.active{background-color:var(--devui-waiting, #beccfa)}:host.plugin-hover>div{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i2.DroppableDirective, selector: "[dDroppable]", inputs: ["dragOverClass", "dropScope", "placeholderTag", "placeholderStyle", "placeholderText", "allowDropOnItem", "dragOverItemClass", "nestingTargetRect", "switchWhileCrossEdge", "defaultDropPosition", "dropSortCountSelector", "dropSortVirtualScrollOption"], outputs: ["dragEnterEvent", "dragOverEvent", "dragLeaveEvent", "dropEvent"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ItemBlankComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-item-blank', template: "<div dDroppable\n     [dropScope]=\"['plugin-item', 'page', 'form']\"\n     dragOverClass=\"active\"\n     (dropEvent)=\"dropEvent($event)\"\n>\n  <span>\u62D6\u62FD\u7EC4\u4EF6\u5230\u6B64\u5904</span>\n</div>\n", styles: [":host{flex:1;margin:16px;border:1px solid var(--devui-dividing-line, #f2f2f3);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AQMAAAAAMksxAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRF8fHxAAAAMCd7XAAAAAJ0Uk5T/wDltzBKAAABJUlEQVR4nFVSy23EIBCdAiKxBaxCC1tBaGk7YG/OjZYSOQptLKKB8Y0D8ssbjBPl9gQz7wfigQbgQxygEXjIAjwDcJEV+PbYb1KAlNDusgE+Q1Va3EPFptJDjwVVZfcNiqwCV9BiIlhW9DdPkEn5GggKRV4igVL2AYJGpc8TFAMa5lXhzHuc69dwEO6DkBI9OhNVii60ERu3VxrjRUVRet7DsMoUbpgny+LRb5b0K2C/CAWejCxCSYVl9wcQSaMEzuRRArcqebzxcMCnUcKQsBKiiVoJoR1+4DfWSodILCGa5zXTvKWo5L5ars0C/iuh003F7GecbG62YVujunzypDqZTcsK76HF2UYP41HM4WoO7eEWNLUUyaHf/3L9JvXnBwjzS/wAoXR0PDbjCSUAAAAASUVORK5CYII=) repeat var(--devui-unavailable, #f5f5f5);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 div.active{background-color:var(--devui-waiting, #beccfa)}:host.plugin-hover>div{pointer-events:none}\n"] }]
+            args: [{ selector: 'rs-item-blank', template: "<div dDroppable\n     [dropScope]=\"['plugin-item', 'page', 'form']\"\n     dragOverClass=\"active\"\n     (dropEvent)=\"dropEvent($event)\"\n>\n  <span>\u62D6\u62FD\u7EC4\u4EF6\u5230\u6B64\u5904</span>\n</div>\n", styles: [":host{flex:1;margin:8px;border:1px solid var(--devui-dividing-line, #f2f2f3);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AQMAAAAAMksxAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRF8fHxAAAAMCd7XAAAAAJ0Uk5T/wDltzBKAAABJUlEQVR4nFVSy23EIBCdAiKxBaxCC1tBaGk7YG/OjZYSOQptLKKB8Y0D8ssbjBPl9gQz7wfigQbgQxygEXjIAjwDcJEV+PbYb1KAlNDusgE+Q1Va3EPFptJDjwVVZfcNiqwCV9BiIlhW9DdPkEn5GggKRV4igVL2AYJGpc8TFAMa5lXhzHuc69dwEO6DkBI9OhNVii60ERu3VxrjRUVRet7DsMoUbpgny+LRb5b0K2C/CAWejCxCSYVl9wcQSaMEzuRRArcqebzxcMCnUcKQsBKiiVoJoR1+4DfWSodILCGa5zXTvKWo5L5ars0C/iuh003F7GecbG62YVujunzypDqZTcsK76HF2UYP41HM4WoO7eEWNLUUyaHf/3L9JvXnBwjzS/wAoXR0PDbjCSUAAAAASUVORK5CYII=) repeat var(--devui-unavailable, #f5f5f5);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 div.active{background-color:var(--devui-waiting, #beccfa)}:host.plugin-hover>div{pointer-events:none}\n"] }]
         }], propDecorators: { dropItem: [{
                 type: Output
             }] } });
@@ -540,7 +569,7 @@ class BoxItemComponent {
         activeComponentRef.instance.showDivider = true;
         activeComponentRef.instance.splitItem = (direction) => {
             if (this.config.direction === direction) {
-                this.config.list.splice(index, 0, { type: 'blank', style: {} });
+                this.config.list.splice(index + 1, 0, { type: 'blank', style: {} });
                 this.load();
             }
             else {
@@ -551,10 +580,10 @@ class BoxItemComponent {
                 else {
                     this.config.list.splice(index, 1, {
                         type: 'item',
-                        style: this.config.list[index].style,
+                        style: {},
                         config: {
                             direction,
-                            list: [{ type: 'blank', style: {} }, { type: 'blank', style: {} }]
+                            list: [this.config.list[index], { type: 'blank', style: {} }]
                         }
                     });
                 }
@@ -601,10 +630,10 @@ class BoxItemComponent {
     }
 }
 BoxItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BoxItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BoxItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: BoxItemComponent, selector: "rs-box-item", outputs: { leaveOneItem: "leaveOneItem" }, host: { properties: { "style.flex-direction": "this._direction", "style": "this._style" } }, viewQueries: [{ propertyName: "itemHosts", predicate: BoxItemHostDirective, descendants: true }], ngImport: i0, template: "<ng-container *ngFor=\"let item of config.list; index as index\">\n  <div [ngStyle]=\"calcStyle(item)\"\n       dDroppable\n       [dropScope]=\"item.type === 'plugin' && boxContainer.editMode ? ['plugin-item', 'page', 'form'] : ''\"\n       dragOverClass=\"active\"\n       (dropEvent)=\"dropEvent($event, index)\"\n  >\n    <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n  </div>\n</ng-container>\n", styles: [":host{flex:1;display:flex;flex-flow:row nowrap;pointer-events:all}:host div{display:flex;flex-flow:row nowrap}:host div.active{background-color:var(--devui-waiting, #beccfa)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DroppableDirective, selector: "[dDroppable]", inputs: ["dragOverClass", "dropScope", "placeholderTag", "placeholderStyle", "placeholderText", "allowDropOnItem", "dragOverItemClass", "nestingTargetRect", "switchWhileCrossEdge", "defaultDropPosition", "dropSortCountSelector", "dropSortVirtualScrollOption"], outputs: ["dragEnterEvent", "dragOverEvent", "dragLeaveEvent", "dropEvent"] }, { kind: "directive", type: BoxItemHostDirective, selector: "[rsBoxItemHost]", inputs: ["hostId"] }] });
+BoxItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: BoxItemComponent, selector: "rs-box-item", outputs: { leaveOneItem: "leaveOneItem" }, host: { properties: { "style.flex-direction": "this._direction", "style": "this._style" } }, viewQueries: [{ propertyName: "itemHosts", predicate: BoxItemHostDirective, descendants: true }], ngImport: i0, template: "<ng-container *ngFor=\"let item of config.list; index as index\">\n  <div [ngStyle]=\"calcStyle(item)\"\n       dDroppable\n       [dropScope]=\"item.type === 'plugin' && boxContainer.editMode ? ['plugin-item', 'page', 'form'] : ''\"\n       dragOverClass=\"active\"\n       (dropEvent)=\"dropEvent($event, index)\"\n  >\n    <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n  </div>\n</ng-container>\n", styles: [":host{flex:1;margin:8px;display:flex;flex-flow:row nowrap;pointer-events:all}:host div{display:flex;flex-flow:row nowrap}:host div.active{background-color:var(--devui-waiting, #beccfa)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DroppableDirective, selector: "[dDroppable]", inputs: ["dragOverClass", "dropScope", "placeholderTag", "placeholderStyle", "placeholderText", "allowDropOnItem", "dragOverItemClass", "nestingTargetRect", "switchWhileCrossEdge", "defaultDropPosition", "dropSortCountSelector", "dropSortVirtualScrollOption"], outputs: ["dragEnterEvent", "dragOverEvent", "dragLeaveEvent", "dropEvent"] }, { kind: "directive", type: BoxItemHostDirective, selector: "[rsBoxItemHost]", inputs: ["hostId"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BoxItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-box-item', template: "<ng-container *ngFor=\"let item of config.list; index as index\">\n  <div [ngStyle]=\"calcStyle(item)\"\n       dDroppable\n       [dropScope]=\"item.type === 'plugin' && boxContainer.editMode ? ['plugin-item', 'page', 'form'] : ''\"\n       dragOverClass=\"active\"\n       (dropEvent)=\"dropEvent($event, index)\"\n  >\n    <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n  </div>\n</ng-container>\n", styles: [":host{flex:1;display:flex;flex-flow:row nowrap;pointer-events:all}:host div{display:flex;flex-flow:row nowrap}:host div.active{background-color:var(--devui-waiting, #beccfa)}\n"] }]
+            args: [{ selector: 'rs-box-item', template: "<ng-container *ngFor=\"let item of config.list; index as index\">\n  <div [ngStyle]=\"calcStyle(item)\"\n       dDroppable\n       [dropScope]=\"item.type === 'plugin' && boxContainer.editMode ? ['plugin-item', 'page', 'form'] : ''\"\n       dragOverClass=\"active\"\n       (dropEvent)=\"dropEvent($event, index)\"\n  >\n    <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n  </div>\n</ng-container>\n", styles: [":host{flex:1;margin:8px;display:flex;flex-flow:row nowrap;pointer-events:all}:host div{display:flex;flex-flow:row nowrap}:host div.active{background-color:var(--devui-waiting, #beccfa)}\n"] }]
         }], propDecorators: { _direction: [{
                 type: HostBinding,
                 args: ['style.flex-direction']