@syncfusion/ej2-layouts 20.4.40 → 20.4.48

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.4.40
+*  version : 20.4.48
 *  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.4.38",
+  "_id": "@syncfusion/ej2-layouts@20.4.42",
   "_inBundle": false,
-  "_integrity": "sha512-MgFvFavT0QESxZEp9ggKjUGezpUa47dy5ni0b9beyu4TjeIlU7HwIHxuMaTF+m6+UOY1QqIo4kmLo2d1O/vrpw==",
+  "_integrity": "sha512-FsMlyjEuCRPFozN4SxqHQlPZsNjGwNYJH3BRJrwsHYZqqYd+qaxyHkAOX+1WkVmIbDEhSZwg84jb17e9BmrzhQ==",
   "_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.4.38.tgz",
-  "_shasum": "0b3c2541ff0f2ae4ff7ec0798a2727ee23ea0223",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-layouts/-/ej2-layouts-20.4.42.tgz",
+  "_shasum": "4fe954b5ab6341cea34ef3a63176e28a72950b36",
   "_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.4.40"
+    "@syncfusion/ej2-base": "~20.4.48"
   },
   "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,7 +76,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/layouts"
   },
   "typings": "index.d.ts",
-  "version": "20.4.40",
+  "version": "20.4.48",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/dashboard-layout/dashboard-layout.d.ts

@@ -215,6 +215,7 @@ export declare class DashboardLayout extends Component<HTMLElement> implements I
     private panelsSizeY;
     private resizeHeight;
     private refreshListener;
+    private eventVar;
     /**
      * If allowDragging is set to true, then the DashboardLayout allows you to drag and reorder the panels.
      *

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

@@ -136,6 +136,7 @@ var DashboardLayout = /** @class */ (function (_super) {
         // to maintain sizeY in mobile device
         _this.panelsSizeY = 0;
         _this.resizeHeight = false;
+        _this.eventVar = false;
         setValue('mergePersistData', _this.mergePersistPanelData, _this);
         return _this;
     }
@@ -2013,69 +2014,91 @@ var DashboardLayout = /** @class */ (function (_super) {
     };
     DashboardLayout.prototype.enableDraggingContent = function (collections) {
         var _this = this;
-        for (var i = 0; i < collections.length; i++) {
+        var _loop_6 = function (i) {
             var abortArray = ['.e-resize', '.' + dragRestrict];
             var cellElement = collections[i];
             {
-                this.dragobj = new Draggable(cellElement, {
+                this_4.dragobj = new Draggable(cellElement, {
                     preventDefault: false,
                     clone: false,
-                    dragArea: this.element,
+                    dragArea: this_4.element,
                     isDragScroll: true,
-                    handle: this.draggableHandle ? this.draggableHandle : '.e-panel',
+                    handle: this_4.draggableHandle ? this_4.draggableHandle : '.e-panel',
                     abort: abortArray,
-                    dragStart: this.onDraggingStart.bind(this),
+                    dragStart: this_4.onDraggingStart.bind(this_4),
                     dragStop: function (args) {
-                        var model = _this.getCellInstance(_this.mainElement.id);
-                        if (_this.allowPushing &&
-                            _this.collisions(model.row, model.col, model.sizeX, model.sizeY, _this.mainElement).length > 0) {
-                            _this.setHolderPosition(args);
-                            _this.setPanelPosition(_this.mainElement, model.row, model.col);
-                            _this.updatePanelLayout(_this.mainElement, model);
-                        }
-                        else {
-                            _this.setPanelPosition(_this.mainElement, model.row, model.col);
-                        }
-                        _this.mainElement = null;
-                        var item = _this.getPanelBase(args);
-                        if (_this.shadowEle) {
-                            detach(_this.shadowEle);
+                        _this.trigger('dragStop', args);
+                        if (isNullOrUndefined(args.cancel)) {
+                            args.cancel = false;
                         }
-                        removeClass([_this.element], [preventSelect]);
-                        removeClass([args.element], [dragging]);
-                        _this.shadowEle = null;
-                        args.element.classList.remove('e-dragging');
-                        var row = _this.getRowColumnDragValues(args)[0];
-                        var col = _this.getRowColumnDragValues(args)[1];
-                        var panelModel = _this.getCellInstance(args.element.id);
-                        if (_this.allowPushing &&
-                            _this.collisions(row, col, panelModel.sizeX, panelModel.sizeY, document.getElementById(item.id)).length === 0) {
-                            _this.panelPropertyChange(_this.getCellInstance(args.element.id), { row: row, col: col });
-                            _this.oldRowCol[args.element.id].row = row;
-                            _this.oldRowCol[args.element.id].col = col;
-                            _this.setAttributes({ value: { col: col.toString(), row: row.toString() } }, args.element);
-                            _this.sortedPanel();
+                        if (!(args.cancel)) {
+                            var model = _this.getCellInstance(_this.mainElement.id);
+                            if (_this.allowPushing &&
+                                _this.collisions(model.row, model.col, model.sizeX, model.sizeY, _this.mainElement).length > 0) {
+                                _this.setHolderPosition(args);
+                                _this.setPanelPosition(_this.mainElement, model.row, model.col);
+                                _this.updatePanelLayout(_this.mainElement, model);
+                            }
+                            else {
+                                _this.setPanelPosition(_this.mainElement, model.row, model.col);
+                            }
+                            _this.mainElement = null;
+                            var item = _this.getPanelBase(args);
+                            if (_this.shadowEle) {
+                                detach(_this.shadowEle);
+                            }
+                            removeClass([_this.element], [preventSelect]);
+                            removeClass([args.element], [dragging]);
+                            _this.shadowEle = null;
+                            args.element.classList.remove('e-dragging');
+                            var row = _this.getRowColumnDragValues(args)[0];
+                            var col = _this.getRowColumnDragValues(args)[1];
+                            var panelModel = _this.getCellInstance(args.element.id);
+                            if (_this.allowPushing &&
+                                _this.collisions(row, col, panelModel.sizeX, panelModel.sizeY, document.getElementById(item.id)).length === 0) {
+                                _this.panelPropertyChange(_this.getCellInstance(args.element.id), { row: row, col: col });
+                                _this.oldRowCol[args.element.id].row = row;
+                                _this.oldRowCol[args.element.id].col = col;
+                                _this.setAttributes({ value: { col: col.toString(), row: row.toString() } }, args.element);
+                                _this.sortedPanel();
+                            }
+                            else {
+                                _this.panelPropertyChange(_this.getCellInstance(args.element.id), {
+                                    row: _this.oldRowCol[args.element.id].row,
+                                    col: _this.oldRowCol[args.element.id].col
+                                });
+                                args.element.setAttribute('data-col', _this.getCellInstance(args.element.id).col.toString());
+                                args.element.setAttribute('data-row', _this.getCellInstance(args.element.id).row.toString());
+                                _this.sortedPanel();
+                            }
+                            var panelInstance = _this.getCellInstance(args.element.id);
+                            _this.setPanelPosition(args.element, panelInstance.row, panelInstance.col);
+                            _this.updatePanels();
+                            _this.updateCloneArrayObject();
+                            _this.checkForChanges(true);
+                            _this.dragStopEventArgs = { event: args.event, element: args.element };
+                            _this.trigger('dragStop', args);
+                            _this.resizeEvents();
+                            _this.rows = _this.maxRow(true);
+                            _this.setHeightWidth();
+                            _this.updateDragArea();
                         }
                         else {
-                            _this.panelPropertyChange(_this.getCellInstance(args.element.id), {
-                                row: _this.oldRowCol[args.element.id].row,
-                                col: _this.oldRowCol[args.element.id].col
-                            });
-                            args.element.setAttribute('data-col', _this.getCellInstance(args.element.id).col.toString());
-                            args.element.setAttribute('data-row', _this.getCellInstance(args.element.id).row.toString());
-                            _this.sortedPanel();
+                            var currentPanel = _this.getCellInstance(_this.mainElement.id);
+                            for (i = 0; i < _this.panels.length; i++) {
+                                if (_this.panels[i].id === currentPanel.id) {
+                                    args.element.setAttribute('data-col', _this.panelsInitialModel[i].col.toString());
+                                    args.element.setAttribute('data-row', _this.panelsInitialModel[i].row.toString());
+                                    currentPanel.col = _this.panelsInitialModel[i].col;
+                                    currentPanel.row = _this.panelsInitialModel[i].row;
+                                    _this.setPanelPosition(_this.mainElement, _this.panelsInitialModel[i].row, _this.panelsInitialModel[i].col);
+                                    _this.updatePanelLayout(_this.mainElement, currentPanel);
+                                }
+                            }
+                            if (_this.shadowEle) {
+                                detach(_this.shadowEle);
+                            }
                         }
-                        var panelInstance = _this.getCellInstance(args.element.id);
-                        _this.setPanelPosition(args.element, panelInstance.row, panelInstance.col);
-                        _this.updatePanels();
-                        _this.updateCloneArrayObject();
-                        _this.checkForChanges(true);
-                        _this.dragStopEventArgs = { event: args.event, element: args.element };
-                        _this.trigger('dragStop', args);
-                        _this.resizeEvents();
-                        _this.rows = _this.maxRow(true);
-                        _this.setHeightWidth();
-                        _this.updateDragArea();
                     },
                     drag: function (args) {
                         _this.draggedEventArgs = {
@@ -2087,10 +2110,16 @@ var DashboardLayout = /** @class */ (function (_super) {
                         _this.onDragStart(args);
                     }
                 });
-                if (this.dragCollection.indexOf(this.dragobj) === -1) {
-                    this.dragCollection.push(this.dragobj);
+                if (this_4.dragCollection.indexOf(this_4.dragobj) === -1) {
+                    this_4.dragCollection.push(this_4.dragobj);
                 }
             }
+            out_i_1 = i;
+        };
+        var this_4 = this, out_i_1;
+        for (var i = 0; i < collections.length; i++) {
+            _loop_6(i);
+            i = out_i_1;
         }
     };
     DashboardLayout.prototype.updatePanels = function () {
@@ -2113,28 +2142,38 @@ var DashboardLayout = /** @class */ (function (_super) {
     DashboardLayout.prototype.onDraggingStart = function (args) {
         var dragArgs = args;
         this.trigger('dragStart', dragArgs, function (dragArgs) {
+            if (isNullOrUndefined(args.cancel)) {
+                args.cancel = false;
+            }
         });
-        this.panelsInitialModel = this.cloneModels(this.panels);
-        this.mainElement = args.element;
-        this.cloneObject = JSON.parse(JSON.stringify(this.cloneObject));
-        var eleRowValue = this.startRow = parseInt(args.element.getAttribute('data-row'), 10);
-        this.startCol = parseInt(args.element.getAttribute('data-col'), 10);
-        var eleSizeY = parseInt(args.element.getAttribute('data-sizeY'), 10);
-        this.updateRowsHeight(eleRowValue, eleSizeY, eleSizeY);
-        this.updateDragArea();
-        this.shadowEle = document.createElement('div');
-        this.shadowEle.classList.add('e-holder');
-        this.shadowEle.classList.add('e-holder-transition');
-        setStyle(this.shadowEle, { 'position': 'absolute' });
-        addClass([this.element], [preventSelect]);
-        addClass([args.element], [dragging]);
-        this.element.appendChild(this.shadowEle);
-        this.renderReactTemplates();
-        this.shadowEle = document.querySelector('.e-holder');
-        this.shadowEle.style.height = (this.getCellInstance(args.element.id).sizeY * this.cellSize[1]) + 'px';
-        this.shadowEle.style.width = (this.getCellInstance(args.element.id).sizeX * this.cellSize[0]) + 'px';
-        var panelInstance = this.getCellInstance(args.element.id);
-        this.setPanelPosition(this.shadowEle, panelInstance.row, panelInstance.col);
+        this.eventVar = args.cancel;
+        if (!(args.cancel)) {
+            this.panelsInitialModel = this.cloneModels(this.panels);
+            this.mainElement = args.element;
+            this.cloneObject = JSON.parse(JSON.stringify(this.cloneObject));
+            var eleRowValue = this.startRow = parseInt(args.element.getAttribute('data-row'), 10);
+            this.startCol = parseInt(args.element.getAttribute('data-col'), 10);
+            var eleSizeY = parseInt(args.element.getAttribute('data-sizeY'), 10);
+            this.updateRowsHeight(eleRowValue, eleSizeY, eleSizeY);
+            this.updateDragArea();
+            this.shadowEle = document.createElement('div');
+            this.shadowEle.classList.add('e-holder');
+            this.shadowEle.classList.add('e-holder-transition');
+            setStyle(this.shadowEle, { 'position': 'absolute' });
+            addClass([this.element], [preventSelect]);
+            addClass([args.element], [dragging]);
+            this.element.appendChild(this.shadowEle);
+            this.renderReactTemplates();
+            this.shadowEle = document.querySelector('.e-holder');
+            this.shadowEle.style.height = (this.getCellInstance(args.element.id).sizeY * this.cellSize[1]) + 'px';
+            this.shadowEle.style.width = (this.getCellInstance(args.element.id).sizeX * this.cellSize[0]) + 'px';
+            var panelInstance = this.getCellInstance(args.element.id);
+            this.setPanelPosition(this.shadowEle, panelInstance.row, panelInstance.col);
+        }
+        else {
+            removeClass([this.element], [preventSelect]);
+            removeClass([args.element], [dragging]);
+        }
     };
     // eslint-disable-next-line
     DashboardLayout.prototype.cloneModels = function (source, target) {
@@ -2157,60 +2196,67 @@ var DashboardLayout = /** @class */ (function (_super) {
         var endCol;
         var endRow;
         var dragCol;
-        var col = dragCol = this.getRowColumnDragValues(args)[1];
-        var row = this.getRowColumnDragValues(args)[0];
-        if (col < 0 || row < 0) {
-            return;
-        }
-        this.panelPropertyChange(this.getCellInstance(args.element.id), { row: row, col: col });
-        var panelModel = this.getCellInstance(args.element.id);
-        this.updateRowsHeight(panelModel.row, panelModel.sizeY, 1);
-        this.updateDragArea();
-        if (this.allowPushing) {
-            this.setAttributes({ value: { col: col.toString(), row: row.toString() } }, args.element);
+        if (!this.eventVar) {
+            var col = dragCol = this.getRowColumnDragValues(args)[1];
+            var row = this.getRowColumnDragValues(args)[0];
+            if (col < 0 || row < 0) {
+                return;
+            }
             this.panelPropertyChange(this.getCellInstance(args.element.id), { row: row, col: col });
-            endCol = this.oldRowCol[(args.element.id)].col;
-            endRow = this.oldRowCol[(args.element.id)].row;
-            this.oldRowCol[(args.element.id)] = { row: row, col: col };
-            this.updateOldRowColumn();
-            if (this.startCol !== endCol || this.startRow !== endRow) {
-                this.setHolderPosition(args);
-                if (this.startCol !== endCol) {
-                    this.startRow = endRow;
-                }
-                if (this.startRow !== endRow) {
-                    this.startCol = endCol;
-                }
-                if (this.allowPushing) {
-                    this.mainElement = args.element;
-                    var model = panelModel;
-                    this.checkCollision = this.collisions(model.row, model.col, model.sizeX, model.sizeY, args.element);
-                    if (panelModel.col >= this.checkColumnValue) {
-                        this.checkCollision = [];
+            var panelModel = this.getCellInstance(args.element.id);
+            this.updateRowsHeight(panelModel.row, panelModel.sizeY, 1);
+            this.updateDragArea();
+            if (this.allowPushing) {
+                this.setAttributes({ value: { col: col.toString(), row: row.toString() } }, args.element);
+                this.panelPropertyChange(this.getCellInstance(args.element.id), { row: row, col: col });
+                endCol = this.oldRowCol[(args.element.id)].col;
+                endRow = this.oldRowCol[(args.element.id)].row;
+                this.oldRowCol[(args.element.id)] = { row: row, col: col };
+                this.updateOldRowColumn();
+                if (this.startCol !== endCol || this.startRow !== endRow) {
+                    this.setHolderPosition(args);
+                    if (this.startCol !== endCol) {
+                        this.startRow = endRow;
+                    }
+                    if (this.startRow !== endRow) {
+                        this.startCol = endCol;
+                    }
+                    if (this.allowPushing) {
+                        this.mainElement = args.element;
+                        var model = panelModel;
+                        this.checkCollision = this.collisions(model.row, model.col, model.sizeX, model.sizeY, args.element);
+                        if (panelModel.col >= this.checkColumnValue) {
+                            this.checkCollision = [];
+                        }
+                        this.updatePanelLayout(args.element, panelModel);
+                        this.moveItemsUpwards();
                     }
-                    this.updatePanelLayout(args.element, panelModel);
-                    this.moveItemsUpwards();
                 }
             }
+            if (this.allowPushing !== false) {
+                this.panelPropertyChange(this.getCellInstance(args.element.id), { row: row, col: col });
+            }
+            if (this.oldRowCol[args.element.id].row !== row || this.oldRowCol[args.element.id].col !== col) {
+                this.panelPropertyChange(this.getCellInstance(args.element.id), { row: row, col: col });
+                this.setAttributes({ value: { col: col.toString(), row: row.toString() } }, args.element);
+            }
+            if (this.startCol !== dragCol) {
+                this.startCol = endCol;
+                this.moveItemsUpwards();
+            }
+            if (!this.allowPushing) {
+                this.setHolderPosition(args);
+            }
+            this.removeResizeClasses(this.panelCollection);
+            this.setClasses(this.panelCollection);
+            if (this.allowPushing === false) {
+                return;
+            }
         }
-        if (this.allowPushing !== false) {
-            this.panelPropertyChange(this.getCellInstance(args.element.id), { row: row, col: col });
-        }
-        if (this.oldRowCol[args.element.id].row !== row || this.oldRowCol[args.element.id].col !== col) {
-            this.panelPropertyChange(this.getCellInstance(args.element.id), { row: row, col: col });
-            this.setAttributes({ value: { col: col.toString(), row: row.toString() } }, args.element);
-        }
-        if (this.startCol !== dragCol) {
-            this.startCol = endCol;
-            this.moveItemsUpwards();
-        }
-        if (!this.allowPushing) {
-            this.setHolderPosition(args);
-        }
-        this.removeResizeClasses(this.panelCollection);
-        this.setClasses(this.panelCollection);
-        if (this.allowPushing === false) {
-            return;
+        else {
+            this.dragobj.intDestroy(args.event);
+            removeClass([this.element], [preventSelect]);
+            removeClass([args.element], [dragging]);
         }
     };
     DashboardLayout.prototype.getPanelBase = function (args) {
@@ -2843,16 +2889,16 @@ var DashboardLayout = /** @class */ (function (_super) {
     /* istanbul ignore next */
     DashboardLayout.prototype.mergePanels = function (sortedPanels, panels) {
         var storedColumns = sortedPanels;
-        var _loop_6 = function (i) {
-            this_4.checkForIDValues(panels);
+        var _loop_7 = function (i) {
+            this_5.checkForIDValues(panels);
             var localPanel = panels.filter(function (pan) { return pan.id === storedColumns[i].id; })[0];
             if (!isNullOrUndefined(localPanel)) {
                 storedColumns[i] = extend(localPanel, storedColumns[i], {}, true);
             }
         };
-        var this_4 = this;
+        var this_5 = this;
         for (var i = 0; i < storedColumns.length; i++) {
-            _loop_6(i);
+            _loop_7(i);
         }
     };
     /**

package/src/splitter/splitter.d.ts

@@ -402,8 +402,8 @@ export declare class Splitter extends Component<HTMLElement> {
     private wireClickEvents;
     private clickHandler;
     private expandAction;
+    private getIcon;
     private expandPane;
-    private checkStaticPanes;
     private updateFlexGrow;
     private hideTargetBarIcon;
     private showTargetBarIcon;
@@ -414,7 +414,10 @@ export declare class Splitter extends Component<HTMLElement> {
     private beforeAction;
     private updatePaneSettings;
     private splitterProperty;
-    private showCurrentBarIcon;
+    private showCurrentBarIcons;
+    private hideBarIcons;
+    private getCollapseCount;
+    private checkResizableProp;
     private updateIconsOnExpand;
     private afterAction;
     private currentIndex;