@syncfusion/ej2-layouts 20.3.56 → 20.3.58

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

@@ -158,6 +158,9 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
                 case 'paneSettings': {
                     if (!(newProp.paneSettings instanceof Array && oldProp.paneSettings instanceof Array)) {
                         var paneCounts = Object.keys(newProp.paneSettings);
+                        if (this.isReact) {
+                            this.clearTemplate();
+                        }
                         for (var i = 0; i < paneCounts.length; i++) {
                             var index = parseInt(Object.keys(newProp.paneSettings)[i], 10);
                             var changedPropsCount = Object.keys(newProp.paneSettings[index]).length;
@@ -1044,9 +1047,11 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
         }
         var avgDiffWidth = diff / flexPaneIndexes.length;
         for (var j = 0, len = flexPaneIndexes.length; j < len; j++) {
-            this.allPanes[flexPaneIndexes[j]].style.flexBasis = this.orientation === 'Horizontal' ?
-                (this.allPanes[flexPaneIndexes[j]].offsetWidth + avgDiffWidth) + 'px' :
-                (this.allPanes[flexPaneIndexes[j]].offsetHeight + avgDiffWidth) + 'px';
+            if (this.allPanes[flexPaneIndexes[j]].style.flexBasis !== '') {
+                this.allPanes[flexPaneIndexes[j]].style.flexBasis = this.orientation === 'Horizontal' ?
+                    (this.allPanes[flexPaneIndexes[j]].offsetWidth + avgDiffWidth) + 'px' :
+                    (this.allPanes[flexPaneIndexes[j]].offsetHeight + avgDiffWidth) + 'px';
+            }
         }
         if (this.allPanes.length === 2 && iswindowResize) {
             var paneCount = this.allPanes.length;
@@ -1569,6 +1574,7 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
         return (value / offsetValue) * 100;
     };
     Splitter.prototype.convertPixelToNumber = function (value) {
+        value = value.toString();
         if (value.indexOf('p') > -1) {
             return parseFloat(value.slice(0, value.indexOf('p')));
         }
@@ -1722,7 +1728,10 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
         this.nextPaneHeightWidth =
             (typeof (this.nextPaneHeightWidth) === 'string' && this.nextPaneHeightWidth.indexOf('p') > -1) ?
                 this.convertPixelToNumber(this.nextPaneHeightWidth) : parseInt(this.nextPaneHeightWidth, 10);
-        this.prevPaneCurrentWidth = separatorNewPosition + this.convertPixelToNumber(this.previousPaneHeightWidth);
+        this.previousPaneHeightWidth =
+            (typeof (this.previousPaneHeightWidth) === 'string' && this.previousPaneHeightWidth.indexOf('p') > -1) ?
+                this.convertPixelToNumber(this.previousPaneHeightWidth) : parseInt(this.previousPaneHeightWidth, 10);
+        this.prevPaneCurrentWidth = separatorNewPosition + this.previousPaneHeightWidth;
         this.nextPaneCurrentWidth = this.nextPaneHeightWidth - separatorNewPosition;
         this.validateMinMaxValues();
         if (this.nextPaneCurrentWidth < 0) {
@@ -1749,9 +1758,45 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
         }
         this.calculateCurrentDimensions();
         this.addStaticPaneClass();
-        this.previousPane.style.flexBasis = this.prevPaneCurrentWidth;
-        this.nextPane.style.flexBasis = this.nextPaneCurrentWidth;
-        if (!(this.allPanes.length > 2)) {
+        var flexPaneCount = 0;
+        for (var i = 0; i < this.paneSettings.length; i++) {
+            if (this.paneSettings[i].size === '') {
+                flexPaneCount = flexPaneCount + 1;
+            }
+        }
+        var allFlexiblePanes = flexPaneCount === this.allPanes.length;
+        // Two flexible Pane Case.
+        if (this.previousPane.style.flexBasis == '' && this.nextPane.style.flexBasis == '' && !allFlexiblePanes) {
+            var middlePaneIndex = this.allPanes.length % this.allBars.length;
+            if (this.prevPaneIndex === middlePaneIndex) {
+                this.nextPane.style.flexBasis = this.nextPaneCurrentWidth;
+                addClass([this.nextPane], STATIC_PANE);
+            }
+            else if (this.nextPaneIndex == middlePaneIndex) {
+                this.previousPane.style.flexBasis = this.prevPaneCurrentWidth;
+                addClass([this.previousPane], STATIC_PANE);
+            }
+            else {
+                this.nextPane.style.flexBasis = this.nextPaneCurrentWidth;
+                addClass([this.nextPane], STATIC_PANE);
+            }
+        } // All panes are flexible
+        else if (allFlexiblePanes) {
+            this.previousPane.style.flexBasis = this.prevPaneCurrentWidth;
+            addClass([this.previousPane], STATIC_PANE);
+            this.nextPane.style.flexBasis = this.nextPaneCurrentWidth;
+            addClass([this.nextPane], STATIC_PANE);
+        } // Two Panesa are Static Pane 
+        else {
+            if (this.previousPane.style.flexBasis !== "" && this.previousPane.classList.contains(STATIC_PANE)) {
+                this.previousPane.style.flexBasis = this.prevPaneCurrentWidth;
+            }
+            if (this.nextPane.style.flexBasis !== "" && this.nextPane.classList.contains(STATIC_PANE)) {
+                this.nextPane.style.flexBasis = this.nextPaneCurrentWidth;
+            }
+        }
+        var isStaticPanes = this.previousPane.style.flexBasis !== "" && this.nextPane.style.flexBasis !== "";
+        if (!(this.allPanes.length > 2) && isStaticPanes) {
             this.updateSplitterSize();
         }
     };
@@ -1855,10 +1900,10 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Splitter.prototype.addStaticPaneClass = function () {
-        if (!this.previousPane.classList.contains(STATIC_PANE)) {
+        if (!this.previousPane.classList.contains(STATIC_PANE) && !(this.previousPane.style.flexBasis === '') && !this.previousPane.classList.contains(EXPAND_PANE)) {
             this.previousPane.classList.add(STATIC_PANE);
         }
-        if (!this.nextPane.classList.contains(STATIC_PANE)) {
+        if (!this.nextPane.classList.contains(STATIC_PANE) && !(this.nextPane.style.flexBasis === '') && !this.nextPane.classList.contains(EXPAND_PANE)) {
             this.nextPane.classList.add(STATIC_PANE);
         }
     };
@@ -2607,6 +2652,9 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
                 if (document.querySelectorAll(template).length) {
                     return compile(document.querySelector(template).innerHTML.trim());
                 }
+                else {
+                    return compile(template);
+                }
             }
             catch (error) {
                 var sanitizedValue = SanitizeHtmlHelper.sanitize(template);
@@ -2896,7 +2944,12 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
                 currentX = this.getMaxWidth(panelModel) - this.elementWidth;
                 this.mOffX = dX - currentX;
             }
+            var initialWidth = this.elementWidth;
             this.elementWidth += currentX;
+            var newSizeX = this.pixelsToColumns(this.elementWidth - (panelModel.sizeX) * this.cellSpacing[1], true);
+            if (this.columns < panelModel.col + newSizeX) {
+                this.elementWidth = initialWidth;
+            }
         }
         el.style.top = this.elementY + 'px';
         el.style.left = this.elementX + 'px';
@@ -2993,8 +3046,8 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
                 sizeY = this.pixelsToRows(this.elementHeight - (sizeY) * this.cellSpacing[0], true);
             }
         }
-        if (item.col + item.sizeX > this.columns) {
-            item.sizeX = item.sizeX - 1;
+        if (item.col + sizeX > this.columns) {
+            item.sizeX = sizeX - 1;
         }
         var canOccupy = row > -1 && col > -1 && sizeX + col <= this.maxCol() && sizeY + row <= this.maxRow();
         if (canOccupy && (this.collisions(row, col, sizeX, sizeY, this.getPanelBase(item.id)).length === 0)