ngx-rs-ant 0.5.1 → 0.5.8

package/fesm2020/ngx-rs-ant.mjs

@@ -172,86 +172,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 args: ['style']
             }] } });
 
-class StyleBlankComponent {
-}
-StyleBlankComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: StyleBlankComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StyleBlankComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: StyleBlankComponent, selector: "rs-style-blank", ngImport: i0, template: "<div>\n  <span>\u8BF7\u5728\u5DE6\u4FA7\u753B\u5E03\u9009\u4E2D\u8282\u70B9</span>\n</div>\n", styles: [":host{height:80px;margin:8px;display:flex;justify-content:center}:host div{flex:auto;display:flex;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: StyleBlankComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rs-style-blank', template: "<div>\n  <span>\u8BF7\u5728\u5DE6\u4FA7\u753B\u5E03\u9009\u4E2D\u8282\u70B9</span>\n</div>\n", styles: [":host{height:80px;margin:8px;display:flex;justify-content:center}:host div{flex:auto;display:flex;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}\n"] }]
-        }] });
-
-class StyleComponent {
-    ngOnInit() {
-        this.style.width = this.style.width ? this.style.width : 'auto';
-        this.style.height = this.style.height ? this.style.height : 'auto';
-        if (this.style.width !== 'auto') {
-            this.width = this.style.width.substring(0, this.style.width.length - 2);
-        }
-        if (this.style.height !== 'auto') {
-            this.height = this.style.height.substring(0, this.style.height.length - 2);
-        }
-    }
-    select(name, value) {
-        const that = this;
-        if (value === 'auto') {
-            this.style[name] = 'auto';
-        }
-        else {
-            if (!that[name]) {
-                that[name] = value;
-            }
-            this.style[name] = that[name] + 'px';
-        }
-    }
-    typing(name, value) {
-        if (value) {
-            this.style[name] = value + 'px';
-        }
-        else {
-            this.style[name] = 'auto';
-        }
-    }
-}
-StyleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: StyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StyleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: StyleComponent, selector: "rs-style", ngImport: i0, template: "<div class=\"config-item\">\n  <div class=\"item-title\">\u5BBD\u5EA6\u7C7B\u578B</div>\n  <div class=\"item-setting\">\n    <div class=\"card-style-radio\">\n      <div class=\"radio-value\" [ngClass]=\"!style.width || style.width === 'auto' ? 'active' : ''\"\n           (click)=\"select('width','auto')\">\n        <span>\u81EA\u9002\u5E94</span>\n      </div>\n      <div class=\"radio-value\" [ngClass]=\"style.width && style.width !== 'auto' ? 'active' : ''\"\n           (click)=\"select('width',240)\">\n        <span>\u56FA\u5B9A\u503C</span>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"config-item\">\n  <div class=\"item-title\">\u56FA\u5B9A\u5BBD\u5EA6</div>\n  <div class=\"item-setting\">\n    <d-input-number [allowEmpty]=\"true\" [(ngModel)]=\"width\"\n                    (whileValueChanging)=\"typing('width', $event)\"></d-input-number>\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    <d-input-number [allowEmpty]=\"true\" [(ngModel)]=\"height\"\n                    (whileValueChanging)=\"typing('height', $event)\"></d-input-number>\n  </div>\n</div>\n", styles: [":host .config-item{display:flex;margin:8px;align-items:center}:host .config-item .item-title{flex:0 0 80px}:host .config-item .item-setting{flex:auto;display:flex}:host .config-item .item-setting .card-style-radio{flex:auto;display:flex;justify-content:stretch}:host .config-item .item-setting .card-style-radio .radio-value{flex:auto;border:1px solid var(--devui-dividing-line, #f2f2f3);text-align:center;padding:4px;margin-left:-1px;cursor:pointer}:host .config-item .item-setting .card-style-radio .radio-value span{-webkit-user-select:none;user-select:none}:host .config-item .item-setting .card-style-radio .radio-value.active{color:var(--devui-brand, #5e7ce0);border:1px solid var(--devui-brand, #5e7ce0);z-index:1}:host .config-item .item-setting d-input-number{flex:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.InputNumberComponent, selector: "d-input-number", inputs: ["step", "disabled", "size", "decimalLimit", "autoFocus", "allowEmpty", "placeholder", "maxLength", "reg", "styleType", "min", "max"], outputs: ["afterValueChanged", "whileValueChanging"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: StyleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rs-style', template: "<div class=\"config-item\">\n  <div class=\"item-title\">\u5BBD\u5EA6\u7C7B\u578B</div>\n  <div class=\"item-setting\">\n    <div class=\"card-style-radio\">\n      <div class=\"radio-value\" [ngClass]=\"!style.width || style.width === 'auto' ? 'active' : ''\"\n           (click)=\"select('width','auto')\">\n        <span>\u81EA\u9002\u5E94</span>\n      </div>\n      <div class=\"radio-value\" [ngClass]=\"style.width && style.width !== 'auto' ? 'active' : ''\"\n           (click)=\"select('width',240)\">\n        <span>\u56FA\u5B9A\u503C</span>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"config-item\">\n  <div class=\"item-title\">\u56FA\u5B9A\u5BBD\u5EA6</div>\n  <div class=\"item-setting\">\n    <d-input-number [allowEmpty]=\"true\" [(ngModel)]=\"width\"\n                    (whileValueChanging)=\"typing('width', $event)\"></d-input-number>\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    <d-input-number [allowEmpty]=\"true\" [(ngModel)]=\"height\"\n                    (whileValueChanging)=\"typing('height', $event)\"></d-input-number>\n  </div>\n</div>\n", styles: [":host .config-item{display:flex;margin:8px;align-items:center}:host .config-item .item-title{flex:0 0 80px}:host .config-item .item-setting{flex:auto;display:flex}:host .config-item .item-setting .card-style-radio{flex:auto;display:flex;justify-content:stretch}:host .config-item .item-setting .card-style-radio .radio-value{flex:auto;border:1px solid var(--devui-dividing-line, #f2f2f3);text-align:center;padding:4px;margin-left:-1px;cursor:pointer}:host .config-item .item-setting .card-style-radio .radio-value span{-webkit-user-select:none;user-select:none}:host .config-item .item-setting .card-style-radio .radio-value.active{color:var(--devui-brand, #5e7ce0);border:1px solid var(--devui-brand, #5e7ce0);z-index:1}:host .config-item .item-setting d-input-number{flex:auto}\n"] }]
-        }] });
-
-class ItemStyleComponent {
-    constructor(changeDetectorRef) {
-        this.changeDetectorRef = changeDetectorRef;
-    }
-    ngOnInit() {
-        this.pageStyleContent.createComponent(StyleBlankComponent);
-        PluginManager.activeItem.subscribe(item => {
-            this.pageStyleContent.clear();
-            if (item) {
-                const componentRef = this.pageStyleContent.createComponent(StyleComponent);
-                const instance = componentRef.instance;
-                instance.style = item.style;
-            }
-            else {
-                this.pageStyleContent.createComponent(StyleBlankComponent);
-                this.changeDetectorRef.detectChanges();
-            }
-        });
-    }
-}
-ItemStyleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ItemStyleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ItemStyleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ItemStyleComponent, selector: "rs-item-style", viewQueries: [{ propertyName: "pageStyleContent", first: true, predicate: ["pageStyleContent"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #pageStyleContent></ng-container>\n", styles: [""] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ItemStyleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rs-item-style', template: "<ng-container #pageStyleContent></ng-container>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { pageStyleContent: [{
-                type: ViewChild,
-                args: ['pageStyleContent', { static: true, read: ViewContainerRef }]
-            }] } });
-
 class PluginManager {
-    static createComponent(boxItem, index, style, config, editMode = false, formGroup) {
+    static createComponent(boxItem, index, style, config) {
         const plugin = PluginFactory.get(config.name);
         if (!plugin) {
             console.error('undefined plugin: ' + config.name);
@@ -263,9 +185,10 @@ class PluginManager {
         const instance = componentRef.instance;
         Object.assign(instance, config.pluginConfig);
         if (plugin.category === 'form') {
-            instance.formGroup = formGroup;
+            instance.formGroup = boxItem.boxContainer.formGroup;
         }
-        if (editMode) {
+        instance.tabViewContainerRef = boxItem.boxContainer.tabViewContainerRef;
+        if (boxItem.boxContainer.editMode) {
             instance.onRemove = () => {
                 boxItem.config.list.splice(index, 1, { type: 'blank', style: boxItem.config.list[index].style });
                 boxItem.load();
@@ -330,12 +253,6 @@ class PluginManager {
         });
         return activeComponentRef;
     }
-    static getItemConfigComponent() {
-        return ItemConfigComponent;
-    }
-    static getItemStyleComponent() {
-        return ItemStyleComponent;
-    }
 }
 PluginManager.hoverItems = [];
 PluginManager.activeItem = new Subject();
@@ -356,7 +273,7 @@ class ItemConfigComponent {
             const instance = componentRef.instance;
             instance.config = item.config.pluginConfig;
             instance.configChange.subscribe(() => {
-                const componentRef = PluginManager.createComponent(item.boxItem, item.index, item.style, item.config, true);
+                const componentRef = PluginManager.createComponent(item.boxItem, item.index, item.style, item.config);
                 componentRef.location.nativeElement.click();
             });
         });
@@ -372,6 +289,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 args: ['pageConfigContent', { static: true, read: ViewContainerRef }]
             }] } });
 
+class StyleBlankComponent {
+}
+StyleBlankComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: StyleBlankComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+StyleBlankComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: StyleBlankComponent, selector: "rs-style-blank", ngImport: i0, template: "<div>\n  <span>\u8BF7\u5728\u5DE6\u4FA7\u753B\u5E03\u9009\u4E2D\u8282\u70B9</span>\n</div>\n", styles: [":host{height:80px;margin:8px;display:flex;justify-content:center}:host div{flex:auto;display:flex;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: StyleBlankComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rs-style-blank', template: "<div>\n  <span>\u8BF7\u5728\u5DE6\u4FA7\u753B\u5E03\u9009\u4E2D\u8282\u70B9</span>\n</div>\n", styles: [":host{height:80px;margin:8px;display:flex;justify-content:center}:host div{flex:auto;display:flex;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}\n"] }]
+        }] });
+
+class StyleComponent {
+    ngOnInit() {
+        this.style.width = this.style.width ? this.style.width : 'auto';
+        this.style.height = this.style.height ? this.style.height : 'auto';
+        if (this.style.width !== 'auto') {
+            this.width = this.style.width.substring(0, this.style.width.length - 2);
+        }
+        if (this.style.height !== 'auto') {
+            this.height = this.style.height.substring(0, this.style.height.length - 2);
+        }
+    }
+    select(name, value) {
+        const that = this;
+        if (value === 'auto') {
+            this.style[name] = 'auto';
+        }
+        else {
+            if (!that[name]) {
+                that[name] = value;
+            }
+            this.style[name] = that[name] + 'px';
+        }
+    }
+    typing(name, value) {
+        if (value) {
+            this.style[name] = value + 'px';
+        }
+        else {
+            this.style[name] = 'auto';
+        }
+    }
+}
+StyleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: StyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+StyleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: StyleComponent, selector: "rs-style", ngImport: i0, template: "<div class=\"config-item\">\n  <div class=\"item-title\">\u5BBD\u5EA6\u7C7B\u578B</div>\n  <div class=\"item-setting\">\n    <div class=\"card-style-radio\">\n      <div class=\"radio-value\" [ngClass]=\"!style.width || style.width === 'auto' ? 'active' : ''\"\n           (click)=\"select('width','auto')\">\n        <span>\u81EA\u9002\u5E94</span>\n      </div>\n      <div class=\"radio-value\" [ngClass]=\"style.width && style.width !== 'auto' ? 'active' : ''\"\n           (click)=\"select('width',240)\">\n        <span>\u56FA\u5B9A\u503C</span>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"config-item\">\n  <div class=\"item-title\">\u56FA\u5B9A\u5BBD\u5EA6</div>\n  <div class=\"item-setting\">\n    <d-input-number [allowEmpty]=\"true\" [(ngModel)]=\"width\"\n                    (whileValueChanging)=\"typing('width', $event)\"></d-input-number>\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    <d-input-number [allowEmpty]=\"true\" [(ngModel)]=\"height\"\n                    (whileValueChanging)=\"typing('height', $event)\"></d-input-number>\n  </div>\n</div>\n", styles: [":host .config-item{display:flex;margin:8px;align-items:center}:host .config-item .item-title{flex:0 0 80px}:host .config-item .item-setting{flex:auto;display:flex}:host .config-item .item-setting .card-style-radio{flex:auto;display:flex;justify-content:stretch}:host .config-item .item-setting .card-style-radio .radio-value{flex:auto;border:1px solid var(--devui-dividing-line, #f2f2f3);text-align:center;padding:4px;margin-left:-1px;cursor:pointer}:host .config-item .item-setting .card-style-radio .radio-value span{-webkit-user-select:none;user-select:none}:host .config-item .item-setting .card-style-radio .radio-value.active{color:var(--devui-brand, #5e7ce0);border:1px solid var(--devui-brand, #5e7ce0);z-index:1}:host .config-item .item-setting d-input-number{flex:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.InputNumberComponent, selector: "d-input-number", inputs: ["step", "disabled", "size", "decimalLimit", "autoFocus", "allowEmpty", "placeholder", "maxLength", "reg", "styleType", "min", "max"], outputs: ["afterValueChanged", "whileValueChanging"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: StyleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rs-style', template: "<div class=\"config-item\">\n  <div class=\"item-title\">\u5BBD\u5EA6\u7C7B\u578B</div>\n  <div class=\"item-setting\">\n    <div class=\"card-style-radio\">\n      <div class=\"radio-value\" [ngClass]=\"!style.width || style.width === 'auto' ? 'active' : ''\"\n           (click)=\"select('width','auto')\">\n        <span>\u81EA\u9002\u5E94</span>\n      </div>\n      <div class=\"radio-value\" [ngClass]=\"style.width && style.width !== 'auto' ? 'active' : ''\"\n           (click)=\"select('width',240)\">\n        <span>\u56FA\u5B9A\u503C</span>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"config-item\">\n  <div class=\"item-title\">\u56FA\u5B9A\u5BBD\u5EA6</div>\n  <div class=\"item-setting\">\n    <d-input-number [allowEmpty]=\"true\" [(ngModel)]=\"width\"\n                    (whileValueChanging)=\"typing('width', $event)\"></d-input-number>\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    <d-input-number [allowEmpty]=\"true\" [(ngModel)]=\"height\"\n                    (whileValueChanging)=\"typing('height', $event)\"></d-input-number>\n  </div>\n</div>\n", styles: [":host .config-item{display:flex;margin:8px;align-items:center}:host .config-item .item-title{flex:0 0 80px}:host .config-item .item-setting{flex:auto;display:flex}:host .config-item .item-setting .card-style-radio{flex:auto;display:flex;justify-content:stretch}:host .config-item .item-setting .card-style-radio .radio-value{flex:auto;border:1px solid var(--devui-dividing-line, #f2f2f3);text-align:center;padding:4px;margin-left:-1px;cursor:pointer}:host .config-item .item-setting .card-style-radio .radio-value span{-webkit-user-select:none;user-select:none}:host .config-item .item-setting .card-style-radio .radio-value.active{color:var(--devui-brand, #5e7ce0);border:1px solid var(--devui-brand, #5e7ce0);z-index:1}:host .config-item .item-setting d-input-number{flex:auto}\n"] }]
+        }] });
+
+class ItemStyleComponent {
+    constructor(changeDetectorRef) {
+        this.changeDetectorRef = changeDetectorRef;
+    }
+    ngOnInit() {
+        this.pageStyleContent.createComponent(StyleBlankComponent);
+        PluginManager.activeItem.subscribe(item => {
+            this.pageStyleContent.clear();
+            if (item) {
+                const componentRef = this.pageStyleContent.createComponent(StyleComponent);
+                const instance = componentRef.instance;
+                instance.style = item.style;
+            }
+            else {
+                this.pageStyleContent.createComponent(StyleBlankComponent);
+                this.changeDetectorRef.detectChanges();
+            }
+        });
+    }
+}
+ItemStyleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ItemStyleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ItemStyleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ItemStyleComponent, selector: "rs-item-style", viewQueries: [{ propertyName: "pageStyleContent", first: true, predicate: ["pageStyleContent"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #pageStyleContent></ng-container>\n", styles: [""] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ItemStyleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rs-item-style', template: "<ng-container #pageStyleContent></ng-container>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { pageStyleContent: [{
+                type: ViewChild,
+                args: ['pageStyleContent', { static: true, read: ViewContainerRef }]
+            }] } });
+
 class BoxItemHostDirective {
     constructor(el, viewContainerRef) {
         this.el = el;
@@ -409,7 +404,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
 
 class BoxItemComponent {
     constructor() {
-        this.editMode = false;
         this.style = {};
         this.config = {};
         this.leaveOneItem = new EventEmitter();
@@ -436,17 +430,16 @@ class BoxItemComponent {
                 const item = this.config.list[i];
                 switch (item.type) {
                     case 'plugin':
-                        PluginManager.createComponent(this, i, item.style, item.config, this.editMode, this.formGroup);
+                        PluginManager.createComponent(this, i, item.style, item.config);
                         break;
                     case 'item':
                         const boxItemComponentRef = itemHost.viewContainerRef.createComponent(BoxItemComponent);
                         const instance = boxItemComponentRef.instance;
-                        instance.editMode = this.editMode;
+                        instance.boxContainer = this.boxContainer;
                         instance.style = item.style;
                         instance.config = item.config;
-                        instance.formGroup = this.formGroup;
                         instance.pDirection = this.config.direction;
-                        if (this.editMode) {
+                        if (this.boxContainer.editMode) {
                             instance.leaveOneItem.subscribe((item) => {
                                 if (item.type === 'item' && item.direction === this.config.direction) {
                                     this.config.list.splice(i, 1, ...item.list);
@@ -465,7 +458,7 @@ class BoxItemComponent {
                         break;
                     case 'blank':
                     default:
-                        if (this.editMode) {
+                        if (this.boxContainer.editMode) {
                             this.createBlankComponent(i);
                         }
                         break;
@@ -536,26 +529,26 @@ class BoxItemComponent {
             return {
                 flex: width === 'auto' ? '1' : '0 0 ' + width,
                 height,
-                pointerEvents: this.editMode ? 'none' : 'all'
+                pointerEvents: this.boxContainer.editMode ? 'none' : 'all'
             };
         }
         else if (direction === 'column') {
             return {
                 width,
-                flex: height === 'auto' ? '1' : '0 0 ' + height,
-                pointerEvents: this.editMode ? 'none' : 'all'
+                flex: height === 'auto' ? 'auto' : '0 0 ' + height,
+                pointerEvents: this.boxContainer.editMode ? 'none' : 'all'
             };
         }
         return {
-            pointerEvents: this.editMode ? 'none' : 'all'
+            pointerEvents: this.boxContainer.editMode ? 'none' : 'all'
         };
     }
 }
 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    <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n  </div>\n</ng-container>\n", styles: [":host{flex:auto;display:flex;pointer-events:all}:host div{flex:auto;display:flex}\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: 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    <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n  </div>\n</ng-container>\n", styles: [":host{flex:1;display:flex;pointer-events:all;overflow:hidden}:host div{display:flex;overflow:hidden}\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: 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    <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n  </div>\n</ng-container>\n", styles: [":host{flex:auto;display:flex;pointer-events:all}:host div{flex:auto;display:flex}\n"] }]
+            args: [{ selector: 'rs-box-item', template: "<ng-container *ngFor=\"let item of config.list; index as index\">\n  <div [ngStyle]=\"calcStyle(item)\">\n    <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n  </div>\n</ng-container>\n", styles: [":host{flex:1;display:flex;pointer-events:all;overflow:hidden}:host div{display:flex;overflow:hidden}\n"] }]
         }], propDecorators: { _direction: [{
                 type: HostBinding,
                 args: ['style.flex-direction']
@@ -580,9 +573,8 @@ class BoxContainerComponent {
     ngOnInit() {
         const boxItemComponentRef = this.boxContainerContent.createComponent(BoxItemComponent);
         const instance = boxItemComponentRef.instance;
-        instance.editMode = this.editMode;
+        instance.boxContainer = this;
         instance.config = this.config;
-        instance.formGroup = this.formGroup;
         instance.leaveOneItem?.subscribe((item) => {
             if (item.type === 'item') {
                 Object.assign(instance.config, item);
@@ -595,7 +587,7 @@ class BoxContainerComponent {
     }
 }
 BoxContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BoxContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BoxContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: BoxContainerComponent, selector: "rs-box-container", inputs: { editMode: "editMode", config: "config", formGroup: "formGroup" }, viewQueries: [{ propertyName: "boxContainerContent", first: true, predicate: ["boxContainerContent"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #boxContainerContent></ng-container>\n", styles: [":host{flex:auto;position:relative;display:flex;overflow:auto}\n"] });
+BoxContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: BoxContainerComponent, selector: "rs-box-container", inputs: { editMode: "editMode", config: "config", formGroup: "formGroup", tabViewContainerRef: "tabViewContainerRef" }, viewQueries: [{ propertyName: "boxContainerContent", first: true, predicate: ["boxContainerContent"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #boxContainerContent></ng-container>\n", styles: [":host{flex:auto;position:relative;display:flex;overflow:auto}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BoxContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rs-box-container', template: "<ng-container #boxContainerContent></ng-container>\n", styles: [":host{flex:auto;position:relative;display:flex;overflow:auto}\n"] }]
@@ -605,6 +597,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 type: Input
             }], formGroup: [{
                 type: Input
+            }], tabViewContainerRef: [{
+                type: Input
             }], boxContainerContent: [{
                 type: ViewChild,
                 args: ['boxContainerContent', { static: true, read: ViewContainerRef }]
@@ -945,7 +939,7 @@ class FormComponent {
     }
 }
 FormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormComponent, deps: [{ token: FormService }], target: i0.ɵɵFactoryTarget.Component });
-FormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: FormComponent, selector: "rs-form", inputs: { tenant: "tenant", className: "className", oid: "oid", copyOid: "copyOid", template: "template" }, outputs: { submitCallback: "submitCallback" }, providers: [FormService], viewQueries: [{ propertyName: "formSubmitter", first: true, predicate: ["formSubmitter"], descendants: true }], ngImport: i0, template: "<form dForm [formGroup]=\"formGroup\" [layout]=\"layoutDirection\" (dSubmit)=\"submit($event)\">\n  <ng-container *ngIf=\"config\">\n    <rs-box-container [config]=\"config\" [formGroup]=\"formGroup\"></rs-box-container>\n  </ng-container>\n  <button #formSubmitter dFormSubmit=\"click\"></button>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.FormDirective, selector: "[dForm]", inputs: ["layout", "labelSize", "labelAlign", "dFeedbackType", "dHasFeedback"], outputs: ["dSubmit"], exportAs: ["dForm"] }, { kind: "directive", type: i3$1.DFormSubmitDirective, selector: "[dFormSubmit]", inputs: ["dFormSubmit", "dFormSubmitData"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: BoxContainerComponent, selector: "rs-box-container", inputs: ["editMode", "config", "formGroup"] }] });
+FormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: FormComponent, selector: "rs-form", inputs: { tenant: "tenant", className: "className", oid: "oid", copyOid: "copyOid", template: "template" }, outputs: { submitCallback: "submitCallback" }, providers: [FormService], viewQueries: [{ propertyName: "formSubmitter", first: true, predicate: ["formSubmitter"], descendants: true }], ngImport: i0, template: "<form dForm [formGroup]=\"formGroup\" [layout]=\"layoutDirection\" (dSubmit)=\"submit($event)\">\n  <ng-container *ngIf=\"config\">\n    <rs-box-container [config]=\"config\" [formGroup]=\"formGroup\"></rs-box-container>\n  </ng-container>\n  <button #formSubmitter dFormSubmit=\"click\"></button>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.FormDirective, selector: "[dForm]", inputs: ["layout", "labelSize", "labelAlign", "dFeedbackType", "dHasFeedback"], outputs: ["dSubmit"], exportAs: ["dForm"] }, { kind: "directive", type: i3$1.DFormSubmitDirective, selector: "[dFormSubmit]", inputs: ["dFormSubmit", "dFormSubmitData"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: BoxContainerComponent, selector: "rs-box-container", inputs: ["editMode", "config", "formGroup", "tabViewContainerRef"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rs-form', providers: [FormService], template: "<form dForm [formGroup]=\"formGroup\" [layout]=\"layoutDirection\" (dSubmit)=\"submit($event)\">\n  <ng-container *ngIf=\"config\">\n    <rs-box-container [config]=\"config\" [formGroup]=\"formGroup\"></rs-box-container>\n  </ng-container>\n  <button #formSubmitter dFormSubmit=\"click\"></button>\n</form>\n" }]