@syncfusion/ej2-layouts 20.3.57 → 20.4.38

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.3.57
+*  version : 20.4.38
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-layouts@*",
-  "_id": "@syncfusion/ej2-layouts@20.3.56",
+  "_id": "@syncfusion/ej2-layouts@19.9.10",
   "_inBundle": false,
-  "_integrity": "sha512-LQAefUlELgeY6Uz6G1JVnKm9e0mlCfBFYYqfNuP2xBfVsqOQ+OUiMh8JBiuimolKo9H4qLAfbW/NtsX9TdktSA==",
+  "_integrity": "sha512-jYbKZvwoXqfKIa4IHaLThdZ7R/ueD7KmfqOl993d2OWKf3VnAv+dNfZyxCyThm08XQFdW49eIdWSFq7h1GmSvA==",
   "_location": "/@syncfusion/ej2-layouts",
   "_phantomChildren": {},
   "_requested": {
@@ -27,8 +27,8 @@
     "/@syncfusion/ej2-react-layouts",
     "/@syncfusion/ej2-vue-layouts"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-layouts/-/ej2-layouts-20.3.56.tgz",
-  "_shasum": "009551fa1cb6d4c5b13c659546c20af9dcb112c5",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-layouts/-/ej2-layouts-19.9.10.tgz",
+  "_shasum": "b50cd2037d395d2024faac0076b7123031d59540",
   "_spec": "@syncfusion/ej2-layouts@*",
   "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
   "author": {
@@ -36,7 +36,7 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.3.56"
+    "@syncfusion/ej2-base": "~20.4.38"
   },
   "deprecated": false,
   "description": "A package of Essential JS 2 layout pure CSS components such as card and avatar. The card is used as small container to show content in specific structure, whereas the avatars are icons, initials or figures representing particular person.",
@@ -76,6 +76,6 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/layouts"
   },
   "typings": "index.d.ts",
-  "version": "20.3.57",
+  "version": "20.4.38",
   "sideEffects": false
 }

package/src/dashboard-layout/dashboard-layout.js

@@ -641,7 +641,12 @@ var DashboardLayout = /** @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';
@@ -738,8 +743,8 @@ var DashboardLayout = /** @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)
@@ -1753,7 +1758,7 @@ var DashboardLayout = /** @class */ (function (_super) {
             if (this.collisionChecker[this.panels[i].id] && this.collisionChecker[this.panels[i].id] !== null) {
                 this.overlapElement = [this.collisionChecker[this.panels[i].id].ele];
                 var key = this.panels[i].id;
-                this.updateRowColumn(this.collisionChecker[key].row, this.overlapElement, this.collisionChecker[key].srcEle);
+                this.updateRowColumn(this.collisionChecker["" + key].row, this.overlapElement, this.collisionChecker["" + key].srcEle);
             }
         }
     };
@@ -2143,7 +2148,7 @@ var DashboardLayout = /** @class */ (function (_super) {
             }
             // eslint-disable-next-line guard-for-in
             for (var k in source[i]) {
-                target[i][k] = source[i][k];
+                target[i]["" + k] = source[i]["" + k];
             }
         }
         return target;

package/src/splitter/splitter.js

@@ -161,6 +161,19 @@ var Splitter = /** @class */ (function (_super) {
                 case 'paneSettings': {
                     if (!(newProp.paneSettings instanceof Array && oldProp.paneSettings instanceof Array)) {
                         var paneCounts = Object.keys(newProp.paneSettings);
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        if (this.isReact) {
+                            var cPaneCount = 0;
+                            for (var k = 0; k < this.paneSettings.length; k++) {
+                                if (typeof (this.paneSettings[k].content) === 'function') {
+                                    cPaneCount = cPaneCount + 1;
+                                }
+                            }
+                            var hasAllContent = cPaneCount === this.paneSettings.length;
+                            if (hasAllContent) {
+                                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;
@@ -168,7 +181,7 @@ var Splitter = /** @class */ (function (_super) {
                                 var property = Object.keys(newProp.paneSettings[index])[j];
                                 switch (property) {
                                     case 'content': {
-                                        var newValue = Object(newProp.paneSettings[index])[property];
+                                        var newValue = Object(newProp.paneSettings[index])["" + property];
                                         if (!isNullOrUndefined(newValue)) {
                                             this.allPanes[index].innerHTML = '';
                                             this.setTemplate(newValue, this.allPanes[index]);
@@ -176,7 +189,7 @@ var Splitter = /** @class */ (function (_super) {
                                         break;
                                     }
                                     case 'resizable': {
-                                        var newVal = Object(newProp.paneSettings[index])[property];
+                                        var newVal = Object(newProp.paneSettings[index])["" + property];
                                         this.resizableModel(index, newVal);
                                         break;
                                     }
@@ -188,10 +201,11 @@ var Splitter = /** @class */ (function (_super) {
                                         newProp.paneSettings[index].collapsed ? this.isCollapsed(index) : this.collapsedOnchange(index);
                                         break;
                                     case 'cssClass':
+                                        // eslint-disable-next-line max-len
                                         this.setCssClass(this.allPanes[index], newProp.paneSettings[index].cssClass);
                                         break;
                                     case 'size': {
-                                        var newValSize = Object(newProp.paneSettings[index])[property];
+                                        var newValSize = Object(newProp.paneSettings[index])["" + property];
                                         if (newValSize !== '' && !isNullOrUndefined(newValSize)) {
                                             this.updatePaneSize(newValSize, index);
                                         }
@@ -401,7 +415,6 @@ var Splitter = /** @class */ (function (_super) {
         }
     };
     Splitter.prototype.getMinInPixel = function (minValue) {
-        var min;
         if (isNullOrUndefined(minValue)) {
             return 0;
         }
@@ -409,7 +422,7 @@ var Splitter = /** @class */ (function (_super) {
         if (minValue.indexOf('%') > 0) {
             paneMinRange = this.convertPercentageToPixel(minValue);
         }
-        min = this.convertPixelToNumber((paneMinRange).toString());
+        var min = this.convertPixelToNumber((paneMinRange).toString());
         return min;
     };
     /**
@@ -643,6 +656,7 @@ var Splitter = /** @class */ (function (_super) {
                     _this.updateIsCollapsed(index, _this.targetArrows().collapseArrow, _this.targetArrows().lastBarArrow);
                     for (var i = 0; i < collapsedindex.length; i++) {
                         if (!_this.allPanes[collapsedindex[i]].classList.contains(COLLAPSE_PANE)) {
+                            // eslint-disable-next-line max-len
                             _this.updateIsCollapsed(collapsedindex[i], _this.targetArrows().collapseArrow, _this.targetArrows().lastBarArrow);
                         }
                     }
@@ -887,7 +901,6 @@ var Splitter = /** @class */ (function (_super) {
         var childCount = this.allPanes.length;
         var clonedEle = target.children;
         var separator;
-        var proxy;
         for (var i = 0; i < childCount; i++) {
             if (i < childCount - 1) {
                 separator = this.createSeparator(i);
@@ -1033,6 +1046,7 @@ var Splitter = /** @class */ (function (_super) {
         }
         for (var j = 0, len = this.allBars.length; j < len; j++) {
             totalWidth += this.orientation === 'Horizontal' ? parseInt(getComputedStyle(this.allBars[j]).marginLeft, 10) +
+                // eslint-disable-next-line max-len
                 parseInt(getComputedStyle(this.allBars[j]).marginLeft, 10) : parseInt(getComputedStyle(this.allBars[j]).marginTop, 10) +
                 parseInt(getComputedStyle(this.allBars[j]).marginBottom, 10);
         }
@@ -1048,9 +1062,11 @@ var Splitter = /** @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;
@@ -1573,6 +1589,7 @@ var Splitter = /** @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')));
         }
@@ -1726,7 +1743,10 @@ var Splitter = /** @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) {
@@ -1753,9 +1773,45 @@ var Splitter = /** @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();
         }
     };
@@ -1859,10 +1915,10 @@ var Splitter = /** @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);
         }
     };