@syncfusion/ej2-layouts 21.2.6 → 22.1.34

package/dist/es6/ej2-layouts.es2015.js

@@ -1780,6 +1780,9 @@ let Splitter = class Splitter extends Component {
             if (this.paneSettings[i].size === '') {
                 flexPaneCount = flexPaneCount + 1;
             }
+            else if ((!this.isReact) && this.allPanes[i].style.flexBasis !== '') {
+                this.paneSettings[i].size = this.allPanes[i].style.flexBasis;
+            }
         }
         const allFlexiblePanes = flexPaneCount === this.allPanes.length;
         // Two flexible Pane Case.
@@ -2646,7 +2649,7 @@ let DashboardLayout = class DashboardLayout extends Component {
     templateParser(template) {
         if (template) {
             try {
-                if (document.querySelectorAll(template).length) {
+                if (typeof template !== 'function' && document.querySelectorAll(template).length) {
                     return compile(document.querySelector(template).innerHTML.trim());
                 }
                 else {
@@ -2779,18 +2782,23 @@ let DashboardLayout = class DashboardLayout extends Component {
         this.resizeEvents();
     }
     downResizeHandler(e) {
-        this.downHandler(e);
-        this.lastMouseX = e.pageX;
-        this.lastMouseY = e.pageY;
-        const moveEventName = (Browser.info.name === 'msie') ? 'mousemove pointermove' : 'mousemove';
-        const upEventName = (Browser.info.name === 'msie') ? 'mouseup pointerup' : 'mouseup';
-        if (!this.isMouseMoveBound) {
-            EventHandler.add(document, moveEventName, this.moveResizeHandler, this);
-            this.isMouseMoveBound = true;
-        }
-        if (!this.isMouseUpBound) {
-            EventHandler.add(document, upEventName, this.upResizeHandler, this);
-            this.isMouseUpBound = true;
+        const el = closest((e.currentTarget), '.e-panel');
+        for (let i = 0; this.panels.length > i; i++) {
+            if (this.panels[i].enabled && this.panels[i].id === el.id) {
+                this.downHandler(e);
+                this.lastMouseX = e.pageX;
+                this.lastMouseY = e.pageY;
+                const moveEventName = (Browser.info.name === 'msie') ? 'mousemove pointermove' : 'mousemove';
+                const upEventName = (Browser.info.name === 'msie') ? 'mouseup pointerup' : 'mouseup';
+                if (!this.isMouseMoveBound) {
+                    EventHandler.add(document, moveEventName, this.moveResizeHandler, this);
+                    this.isMouseMoveBound = true;
+                }
+                if (!this.isMouseUpBound) {
+                    EventHandler.add(document, upEventName, this.upResizeHandler, this);
+                    this.isMouseUpBound = true;
+                }
+            }
         }
     }
     downHandler(e) {
@@ -2955,7 +2963,12 @@ let DashboardLayout = class DashboardLayout extends Component {
             this.panelPropertyChange(item, { sizeX: item.sizeX - 1 });
         }
         this.shadowEle.style.top = ((item.row * this.getCellSize()[1] + (item.row * this.cellSpacing[1]))) + 'px';
-        this.shadowEle.style.left = ((item.col * this.getCellSize()[0]) + ((item.col) * this.cellSpacing[0])) + 'px';
+        if (this.handleClass.indexOf('west') >= 0) {
+            this.shadowEle.style.left = ((item.col * this.getCellSize()[0]) + ((item.col - 1) * this.cellSpacing[0])) + 'px';
+        }
+        else {
+            this.shadowEle.style.left = ((item.col * this.getCellSize()[0]) + ((item.col) * this.cellSpacing[0])) + 'px';
+        }
         this.shadowEle.style.height = ((item.sizeY * (this.getCellSize()[1] + (this.cellSpacing[1])))) + 'px';
         this.shadowEle.style.width = ((item.sizeX * (this.getCellSize()[0] + (this.cellSpacing[0])))) + 'px';
         if (oldSizeX !== item.sizeX || oldSizeY !== item.sizeY) {
@@ -2972,6 +2985,7 @@ let DashboardLayout = class DashboardLayout extends Component {
             };
             this.setAttributes(value, el);
             this.mainElement = el;
+            this.checkCollision = [];
             this.updatePanelLayout(el, this.getCellInstance(el.id));
             this.updateOldRowColumn();
             this.sortedPanel();
@@ -3052,12 +3066,11 @@ let DashboardLayout = class DashboardLayout extends Component {
         return item;
     }
     pixelsToColumns(pixels, isCeil) {
-        const curColWidth = this.cellSize[0];
         if (isCeil) {
-            return Math.ceil(pixels / curColWidth);
+            return Math.ceil(pixels / this.cellSize[0]);
         }
         else {
-            return Math.floor(pixels / curColWidth);
+            return Math.floor(pixels / (this.cellSize[0] + this.cellSpacing[0]));
         }
     }
     pixelsToRows(pixels, isCeil) {