@syncfusion/ej2-layouts 20.4.42 → 20.4.53

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

@@ -1130,18 +1130,21 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
             }
             e.target.classList.add(SPLIT_BAR_HOVER);
         }
+        this.splitterDetails(e);
         var icon = e.target;
-        if (icon.classList.contains(ARROW_LEFT) || icon.classList.contains(ARROW_UP)) {
-            this.collapseAction(e);
-        }
-        if (icon.classList.contains(ARROW_RIGHT) || icon.classList.contains(ARROW_DOWN)) {
-            this.expandAction(e);
+        if (icon.classList.contains(ARROW_LEFT) || icon.classList.contains(ARROW_RIGHT) ||
+            icon.classList.contains(ARROW_DOWN) || icon.classList.contains(ARROW_UP)) {
+            if (!this.nextPane.classList.contains(PANE_HIDDEN) && !this.previousPane.classList.contains(PANE_HIDDEN)) {
+                this.collapseAction(e);
+            }
+            else {
+                this.expandAction(e);
+            }
+            this.updateSplitterSize();
         }
-        this.updateSplitterSize();
     };
     Splitter.prototype.expandAction = function (e) {
         var _this = this;
-        this.splitterDetails(e);
         var eventArgs = this.beforeAction(e);
         if (this.expandFlag) {
             this.trigger('beforeExpand', eventArgs, function (beforeExpandArgs) {
@@ -1156,6 +1159,12 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
             this.expandPane(e);
         }
     };
+    Splitter.prototype.getIcon = function (e) {
+        var targetClass = e.target.className.split(' ').filter(function (className) {
+            return className !== NAVIGATE_ARROW && className !== HIDE_ICON;
+        });
+        return targetClass[0];
+    };
     Splitter.prototype.expandPane = function (e) {
         this.removeStaticPanes();
         var collapseCount = this.element.querySelectorAll('.' + COLLAPSE_PANE).length;
@@ -1164,46 +1173,41 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
             !this.nextPane.classList.contains(EXPAND_PANE) && this.nextPane.nextElementSibling.classList.contains(PANE) &&
             !this.nextPane.nextElementSibling.classList.contains(STATIC_PANE) && !(collapseCount === this.allPanes.length - 2));
         var collapseClass = [COLLAPSE_PANE, PANE_HIDDEN];
-        if (!this.previousPane.classList.contains(COLLAPSE_PANE)) {
-            removeClass([this.nextPane], EXPAND_PANE);
-            removeClass([this.previousPane], collapseClass);
-            addClass([this.previousPane], EXPAND_PANE);
-            addClass([this.nextPane], collapseClass);
-            if (this.expandFlag) {
-                this.updatePaneSettings(this.nextPaneIndex, true);
+        var icon = this.getIcon(e);
+        var isLeftOrUp = icon === ARROW_LEFT || icon === ARROW_UP;
+        var collapsePane = isLeftOrUp ? this.nextPane : this.previousPane;
+        var expandPane = isLeftOrUp ? this.previousPane : this.nextPane;
+        var expandPaneIndex = isLeftOrUp ? this.nextPaneIndex : this.prevPaneIndex;
+        removeClass([collapsePane], collapseClass);
+        collapsePane.setAttribute('aria-hidden', 'false');
+        // cCount is calculated after removing the COLLAPSE_PANE
+        var cCount = this.element.querySelectorAll('.' + COLLAPSE_PANE).length;
+        if (cCount > 0) {
+            if (!expandPane.classList.contains(COLLAPSE_PANE)) {
+                addClass([expandPane], EXPAND_PANE);
+                expandPane.setAttribute('aria-expanded', 'true');
+            }
+        }
+        else if (cCount === 0) {
+            for (var i = 0; i < this.allPanes.length; i++) {
+                if (!this.allPanes[i].classList.contains(COLLAPSE_PANE)) {
+                    removeClass([this.allPanes[i]], EXPAND_PANE);
+                    this.allPanes[i].setAttribute('aria-expanded', 'false');
+                }
             }
         }
-        else {
-            removeClass([this.previousPane], collapseClass);
-            removeClass([this.nextPane], EXPAND_PANE);
-            if (this.expandFlag) {
-                this.updatePaneSettings(this.prevPaneIndex, false);
-            }
+        if (this.expandFlag) {
+            this.updatePaneSettings(expandPaneIndex, false);
         }
-        this.updateIconsOnExpand(e);
-        this.previousPane.setAttribute('aria-expanded', 'true');
-        this.nextPane.setAttribute('aria-expanded', 'false');
-        this.updateFlexGrow(this.checkStaticPanes());
+        this.updateIconsOnExpand(e, icon);
+        this.updateFlexGrow();
         if (flexStatus) {
             this.previousPane.classList.remove(EXPAND_PANE);
+            this.previousPane.setAttribute('aria-expanded', 'false');
             this.previousPane.style.flexGrow = '';
         }
     };
-    Splitter.prototype.checkStaticPanes = function () {
-        var staticPane = true;
-        for (var i = 0; i < this.allPanes.length; i++) {
-            if (!this.allPanes[i].classList.contains(COLLAPSE_PANE) && staticPane) {
-                if (this.allPanes[i].classList.contains(STATIC_PANE)) {
-                    staticPane = true;
-                }
-                else {
-                    staticPane = false;
-                }
-            }
-        }
-        return staticPane;
-    };
-    Splitter.prototype.updateFlexGrow = function (status) {
+    Splitter.prototype.updateFlexGrow = function () {
         var collapseCount = 0;
         for (var j = 0; j < this.element.children.length; j++) {
             if (this.element.children[j].classList.contains(COLLAPSE_PANE)) {
@@ -1214,9 +1218,6 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
         var panes = this.allPanes;
         for (var i = 0; i < panes.length; i++) {
             panes[i].style.flexGrow = '';
-            if (status && !this.nextPane.classList.contains(COLLAPSE_PANE)) {
-                this.nextPane.style.flexGrow = '1';
-            }
             if (visiblePane && this.allPanes[i].classList.contains(COLLAPSE_PANE) && this.paneSettings[i].size &&
                 i !== this.allPanes.length - 1) {
                 panes[i].style.flexGrow = '';
@@ -1235,76 +1236,66 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
     Splitter.prototype.showTargetBarIcon = function (targetBar, targetArrow) {
         removeClass([select('.' + targetArrow, targetBar)], HIDE_ICON);
     };
-    Splitter.prototype.updateIconsOnCollapse = function (e) {
+    Splitter.prototype.updateIconsOnCollapse = function (e, targetIcon) {
         this.splitterProperty();
-        if (this.previousPane.classList.contains(COLLAPSE_PANE) && !this.nextPane.classList.contains(COLLAPSE_PANE)) {
-            addClass([e.target], HIDE_ICON);
-            if (this.paneSettings[this.prevPaneIndex].collapsible) {
-                this.showCurrentBarIcon();
-            }
-            this.resizableModel(this.currentBarIndex, false);
-            if (this.previousPane.classList.contains(COLLAPSE_PANE) && !this.nextPane.classList.contains(COLLAPSE_PANE) &&
-                !this.paneSettings[this.prevPaneIndex].collapsible) {
-                this.hideTargetBarIcon(this.prevBar, this.rightArrow);
-            }
-            if (this.previousPane.previousElementSibling && !this.previousPane.previousElementSibling.classList.contains(COLLAPSE_PANE)) {
-                if (this.previousPane.classList.contains(COLLAPSE_PANE) && this.paneSettings[this.prevPaneIndex].collapsible) {
-                    this.showTargetBarIcon(this.prevBar, this.leftArrow);
+        var removeIcon = this.arrow;
+        var otherBar = this.currentBarIndex === (this.allBars.length - 1) ? this.prevBar : this.nextBar;
+        var otherBarIndex = this.currentBarIndex === (this.allBars.length - 1) ? this.currentBarIndex - 1
+            : this.currentBarIndex + 1;
+        if (!e.target.classList.contains(HIDE_ICON)) {
+            if (this.splitInstance.prevPaneCollapsed || this.splitInstance.nextPaneCollapsed) {
+                if (this.paneSettings[this.prevPaneIndex].collapsible && this.paneSettings[this.nextPaneIndex].collapsible) {
+                    this.resizableModel(this.currentBarIndex, false);
+                    this.hideTargetBarIcon(this.currentSeparator, targetIcon);
+                    if (!isNullOrUndefined(otherBar)) {
+                        var otherPrevPaneIndex = otherBarIndex;
+                        var otherNextPaneIndex = otherBarIndex + 1;
+                        var collapsecount = this.getCollapseCount(otherPrevPaneIndex, otherNextPaneIndex);
+                        if (this.paneSettings[otherPrevPaneIndex].collapsible &&
+                            this.paneSettings[otherNextPaneIndex].collapsible) {
+                            if (collapsecount === 1) {
+                                this.hideTargetBarIcon(otherBar, removeIcon);
+                                this.resizableModel(otherBarIndex, false);
+                            }
+                            else if (collapsecount === 2) {
+                                this.hideBarIcons(otherBar);
+                                this.resizableModel(otherBarIndex, false);
+                            }
+                            if (!this.paneSettings[otherPrevPaneIndex].collapsible ||
+                                !this.paneSettings[otherNextPaneIndex].collapsible) {
+                                this.hideTargetBarIcon(otherBar, targetIcon);
+                            }
+                        }
+                    }
                 }
-                else if (!this.paneSettings[this.prevPaneIndex].collapsible) {
-                    this.hideTargetBarIcon(this.prevBar, this.leftArrow);
+                else {
+                    this.showTargetBarIcon(this.currentSeparator, removeIcon);
+                    this.hideTargetBarIcon(this.currentSeparator, targetIcon);
+                    this.resizableModel(this.currentBarIndex, false);
                 }
             }
-            if (!isNullOrUndefined(this.prevBar)) {
-                this.resizableModel(this.currentBarIndex - 1, false);
-                this.hideTargetBarIcon(this.prevBar, this.arrow);
-            }
-            if (!this.paneSettings[this.prevPaneIndex].collapsible) {
-                this.hideTargetBarIcon(this.currentSeparator, this.rightArrow);
-            }
         }
-        else if (!this.splitInstance.prevPaneCollapsed && !this.splitInstance.nextPaneExpanded) {
-            if (this.paneSettings[this.currentBarIndex].resizable) {
-                this.resizableModel(this.currentBarIndex, true);
-            }
-            if (!this.splitInstance.nextPaneNextEle.classList.contains(COLLAPSE_PANE) &&
-                this.paneSettings[this.currentBarIndex + 1].resizable) {
-                this.resizableModel(this.currentBarIndex + 1, true);
-            }
-            if (!this.paneSettings[this.currentBarIndex].collapsible) {
-                addClass([e.target], HIDE_ICON);
-            }
-            if (this.previousPane && this.prevPaneIndex === 0 && (this.paneSettings[this.prevPaneIndex].collapsible)) {
-                this.showTargetBarIcon(this.currentSeparator, this.leftArrow);
-            }
-            if (this.nextPane && this.nextPaneIndex === this.allPanes.length - 1 && (this.paneSettings[this.nextPaneIndex].collapsible)) {
-                this.showTargetBarIcon(this.getPrevBar(this.nextPaneIndex), this.rightArrow);
-            }
-            if (!(this.previousPane.classList.contains(COLLAPSE_PANE)) && this.paneSettings[this.nextPaneIndex].collapsible) {
-                this.showTargetBarIcon(this.currentSeparator, this.rightArrow);
+        else {
+            this.resizableModel(this.currentBarIndex, false);
+            if (!isNullOrUndefined(otherBar)) {
+                this.resizableModel(otherBarIndex, false);
             }
-            if (!isNullOrUndefined(this.nextBar)) {
-                if (this.nextPane.nextElementSibling && (this.nextPane.nextElementSibling.classList.contains(COLLAPSE_PANE) &&
-                    this.paneSettings[this.nextPaneIndex + 1].collapsible) ||
-                    (!this.nextPane.nextElementSibling.classList.contains(COLLAPSE_PANE) &&
-                        this.paneSettings[this.nextPaneIndex].collapsible)) {
-                    this.showTargetBarIcon(this.nextBar, this.leftArrow);
-                }
-                else if (!this.paneSettings[this.splitInstance.nextPaneIndex + 1].collapsible &&
-                    this.paneSettings[this.currentBarIndex]) {
-                    this.hideTargetBarIcon(this.nextBar, this.arrow);
+            if (!this.paneSettings[this.prevPaneIndex].collapsible || !this.paneSettings[this.nextPaneIndex].collapsible) {
+                if (!isNullOrUndefined(otherBar)) {
+                    this.hideTargetBarIcon(otherBar, targetIcon);
                 }
+                this.hideTargetBarIcon(this.currentSeparator, removeIcon);
             }
-            if (!(this.nextPaneIndex === this.allPanes.length - 1) && this.nextPane.nextElementSibling &&
-                !this.nextPane.classList.contains(COLLAPSE_PANE) && !this.nextPane.nextElementSibling.classList.contains(COLLAPSE_PANE)
-                && !this.paneSettings[this.nextPaneIndex + 1].collapsible) {
-                this.hideTargetBarIcon(this.nextBar, this.rightArrow);
+            else {
+                if (!isNullOrUndefined(otherBar)) {
+                    this.hideTargetBarIcon(otherBar, removeIcon);
+                }
+                this.showTargetBarIcon(this.currentSeparator, removeIcon);
             }
         }
     };
     Splitter.prototype.collapseAction = function (e) {
         var _this = this;
-        this.splitterDetails(e);
         var eventArgs = this.beforeAction(e);
         if (this.collapseFlag) {
             this.collapsePane(e);
@@ -1330,26 +1321,43 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
             !(collapseCount === this.allPanes.length - 2)) || (this.nextPane.classList.contains(COLLAPSE_PANE) &&
             !this.previousPane.classList.contains(STATIC_PANE) && this.nextPane.classList.contains(STATIC_PANE));
         var collapseClass = [COLLAPSE_PANE, PANE_HIDDEN];
-        if (this.nextPane.classList.contains(COLLAPSE_PANE)) {
-            removeClass([this.previousPane], EXPAND_PANE);
-            removeClass([this.nextPane], collapseClass);
-            if (!this.collapseFlag) {
-                this.updatePaneSettings(this.nextPaneIndex, false);
-            }
+        var icon = this.getIcon(e);
+        var isLeftOrUp = icon === ARROW_LEFT || icon === ARROW_UP;
+        var collapsePane = isLeftOrUp ? this.previousPane : this.nextPane;
+        var expandPane = isLeftOrUp ? this.nextPane : this.previousPane;
+        var collapsePaneIndex = isLeftOrUp ? this.prevPaneIndex : this.nextPaneIndex;
+        removeClass([collapsePane], EXPAND_PANE);
+        collapsePane.setAttribute('aria-expanded', 'false');
+        addClass([collapsePane], collapseClass);
+        collapsePane.setAttribute('aria-hidden', 'true');
+        var isFlexPane = collapsePane.style.flexBasis === '';
+        if (isFlexPane) {
+            addClass([expandPane], EXPAND_PANE);
+            expandPane.setAttribute('aria-expanded', 'true');
         }
         else {
-            removeClass([this.previousPane], EXPAND_PANE);
-            removeClass([this.nextPane], collapseClass);
-            addClass([this.nextPane], EXPAND_PANE);
-            addClass([this.previousPane], collapseClass);
-            if (!this.collapseFlag) {
-                this.updatePaneSettings(this.prevPaneIndex, true);
-            }
-        }
-        this.updateIconsOnCollapse(e);
-        this.previousPane.setAttribute('aria-expanded', 'false');
-        this.nextPane.setAttribute('aria-expanded', 'true');
-        this.updateFlexGrow(this.checkStaticPanes());
+            var isFlexPaneHidden = true;
+            for (var i = 0; i < this.allPanes.length; i++) {
+                if (!this.allPanes[i].classList.contains(COLLAPSE_PANE)) {
+                    if (this.allPanes[i].style.flexBasis === '' && !this.allPanes[i].classList.contains(COLLAPSE_PANE)
+                        && !this.allPanes[i].classList.contains(EXPAND_PANE)) {
+                        addClass([this.allPanes[i]], EXPAND_PANE);
+                        this.allPanes[i].setAttribute('aria-expanded', 'true');
+                        isFlexPaneHidden = false;
+                        break;
+                    }
+                }
+            }
+            if (isFlexPaneHidden) {
+                addClass([expandPane], EXPAND_PANE);
+                expandPane.setAttribute('aria-expanded', 'true');
+            }
+        }
+        if (!this.collapseFlag) {
+            this.updatePaneSettings(collapsePaneIndex, true);
+        }
+        this.updateIconsOnCollapse(e, icon);
+        this.updateFlexGrow();
         if (flexStatus) {
             this.nextPane.classList.remove(EXPAND_PANE);
             this.nextPane.style.flexGrow = '';
@@ -1393,71 +1401,95 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
             prevPanePreEle: this.previousPane.previousElementSibling
         };
     };
-    Splitter.prototype.showCurrentBarIcon = function () {
+    Splitter.prototype.showCurrentBarIcons = function () {
         removeClass([select('.' + this.arrow, this.currentSeparator)], HIDE_ICON);
     };
-    Splitter.prototype.updateIconsOnExpand = function (e) {
+    Splitter.prototype.hideBarIcons = function (bar) {
+        addClass([select('.' + this.arrow, bar)], HIDE_ICON);
+    };
+    Splitter.prototype.getCollapseCount = function (prevPaneIndex, nextPaneIndex) {
+        var collapsecount = 0;
+        if (this.allPanes[prevPaneIndex].classList.contains(COLLAPSE_PANE)) {
+            collapsecount = collapsecount + 1;
+        }
+        if (this.allPanes[nextPaneIndex].classList.contains(COLLAPSE_PANE)) {
+            collapsecount = collapsecount + 1;
+        }
+        return collapsecount;
+    };
+    Splitter.prototype.checkResizableProp = function (prevPaneIndex, nextPaneIndex) {
+        if (this.paneSettings[prevPaneIndex].resizable && this.paneSettings[nextPaneIndex].resizable) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    };
+    Splitter.prototype.updateIconsOnExpand = function (e, targetIcon) {
         this.splitterProperty();
-        addClass([e.target], HIDE_ICON);
-        if (!this.splitInstance.prevPaneExpanded && !this.splitInstance.nextPaneCollapsed) {
-            if (this.paneSettings[this.prevPaneIndex].collapsible) {
-                this.showCurrentBarIcon();
-            }
-            if (this.paneSettings[this.nextPaneIndex].collapsible) {
-                removeClass([e.target], HIDE_ICON);
-            }
-            if (this.paneSettings[this.currentBarIndex].resizable) {
-                this.resizableModel(this.currentBarIndex, true);
-            }
-            if (!isNullOrUndefined(this.prevBar) &&
-                !this.splitInstance.prevPanePreEle.classList.contains(COLLAPSE_PANE)) {
-                if (this.paneSettings[this.currentBarIndex - 1].resizable) {
-                    this.resizableModel(this.currentBarIndex - 1, true);
-                }
-                if (this.paneSettings[this.prevPaneIndex].collapsible) {
-                    this.showTargetBarIcon(this.prevBar, this.rightArrow);
-                }
-                if (!this.paneSettings[this.currentBarIndex - 1].collapsible) {
-                    this.hideTargetBarIcon(this.prevBar, this.arrow);
-                    if (this.paneSettings[this.currentBarIndex].collapsible &&
-                        !this.paneSettings[this.currentBarIndex + 1].collapsible) {
-                        this.hideTargetBarIcon(this.currentSeparator, this.rightArrow);
+        var showIcon = this.arrow;
+        var otherBar = this.currentBarIndex === (this.allBars.length - 1) ? this.prevBar : this.nextBar;
+        var otherBarIndex = this.currentBarIndex === (this.allBars.length - 1) ?
+            this.currentBarIndex - 1 : this.currentBarIndex + 1;
+        if (!e.target.classList.contains(HIDE_ICON)) {
+            // prevPane ! collapsed && nextPane ! collapsed
+            if (!this.splitInstance.prevPaneCollapsed && !this.splitInstance.nextPaneCollapsed) {
+                if (this.paneSettings[this.prevPaneIndex].collapsible && this.paneSettings[this.nextPaneIndex].collapsible) {
+                    this.showCurrentBarIcons();
+                    if (this.checkResizableProp(this.prevPaneIndex, this.nextPaneIndex)) {
+                        this.resizableModel(this.currentBarIndex, true);
+                    }
+                    else {
+                        this.resizableModel(this.currentBarIndex, false);
+                    }
+                    if (!isNullOrUndefined(otherBar)) {
+                        var otherPrevPaneIndex = otherBarIndex;
+                        var otherNextPaneIndex = otherBarIndex + 1;
+                        var collapsecount = this.getCollapseCount(otherPrevPaneIndex, otherNextPaneIndex);
+                        if (this.paneSettings[otherPrevPaneIndex].collapsible &&
+                            this.paneSettings[otherNextPaneIndex].collapsible) {
+                            if (collapsecount === 0) {
+                                this.showTargetBarIcon(otherBar, targetIcon);
+                                this.showTargetBarIcon(otherBar, showIcon);
+                                if (this.checkResizableProp(otherPrevPaneIndex, otherNextPaneIndex)) {
+                                    this.resizableModel(otherBarIndex, true);
+                                }
+                            }
+                            else if (collapsecount === 1) {
+                                this.hideBarIcons(otherBar);
+                                // If condition Edge case in flexible cases
+                                if (this.allPanes[otherPrevPaneIndex].classList.contains(EXPAND_PANE) ||
+                                    this.allPanes[otherNextPaneIndex].classList.contains(EXPAND_PANE)) {
+                                    this.showTargetBarIcon(otherBar, showIcon);
+                                }
+                                else {
+                                    // Common case
+                                    this.showTargetBarIcon(otherBar, targetIcon);
+                                }
+                                this.resizableModel(otherBarIndex, false);
+                            }
+                        }
                     }
                 }
-                else if (this.paneSettings[this.currentBarIndex].collapsible &&
-                    !this.paneSettings[this.currentBarIndex + 1].collapsible) {
-                    this.hideTargetBarIcon(this.currentSeparator, this.rightArrow);
-                }
-            }
-            else {
-                if (this.previousPane.previousElementSibling && this.paneSettings[this.prevPaneIndex].collapsible &&
-                    (this.previousPane.previousElementSibling.classList.contains(COLLAPSE_PANE) &&
-                        this.paneSettings[this.prevPaneIndex - 1].collapsible)) {
-                    this.showTargetBarIcon(this.prevBar, this.rightArrow);
-                }
-                if (!this.paneSettings[this.currentBarIndex + 1].collapsible) {
-                    this.hideTargetBarIcon(this.currentSeparator, this.rightArrow);
+                else {
+                    this.hideTargetBarIcon(this.currentSeparator, targetIcon);
+                    this.showTargetBarIcon(this.currentSeparator, showIcon);
+                    if (!this.splitInstance.prevPaneCollapsed && !this.splitInstance.nextPaneCollapsed) {
+                        if (this.checkResizableProp(this.prevPaneIndex, this.nextPaneIndex)) {
+                            this.resizableModel(this.currentBarIndex, true);
+                        }
+                    }
+                    else {
+                        this.resizableModel(this.currentBarIndex, false);
+                    }
                 }
             }
         }
-        else if (this.splitInstance.prevPaneExpanded && this.splitInstance.nextPaneCollapsed) {
-            this.resizableModel(this.currentBarIndex, false);
-            this.resizableModel(this.currentBarIndex + 1, false);
-            if (this.paneSettings[this.nextPaneIndex].collapsible) {
-                this.showCurrentBarIcon();
-            }
-            if (!isNullOrUndefined(this.nextBar)) {
-                this.hideTargetBarIcon(this.nextBar, this.arrow);
-            }
-            if (this.nextPane && this.nextPaneIndex === this.allPanes.length - 1 && (!this.paneSettings[this.nextPaneIndex].collapsible &&
-                this.splitInstance.nextPaneCollapsed)) {
-                this.hideTargetBarIcon(this.currentSeparator, this.arrow);
-            }
-            if (!(this.nextPaneIndex === this.allPanes.length - 1) && this.nextPane.nextElementSibling &&
-                this.nextPane.classList.contains(COLLAPSE_PANE) &&
-                !this.nextPane.nextElementSibling.classList.contains(COLLAPSE_PANE)
-                && this.paneSettings[this.nextPaneIndex].collapsible) {
-                this.showTargetBarIcon(this.nextBar, this.rightArrow);
+        else {
+            if (!this.paneSettings[this.prevPaneIndex].collapsible && !this.paneSettings[this.nextPaneIndex].collapsible) {
+                if (this.checkResizableProp(this.prevPaneIndex, this.nextPaneIndex)) {
+                    this.resizableModel(this.currentBarIndex, true);
+                }
             }
         }
     };
@@ -1778,7 +1810,7 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
         }
         var allFlexiblePanes = flexPaneCount === this.allPanes.length;
         // Two flexible Pane Case.
-        if (this.previousPane.style.flexBasis === '' && this.nextPane.style.flexBasis == '' && !allFlexiblePanes) {
+        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;
@@ -2451,6 +2483,7 @@ var DashboardLayout = /** @__PURE__ @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;
     }
@@ -4328,69 +4361,90 @@ var DashboardLayout = /** @__PURE__ @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.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 = {
@@ -4402,10 +4456,16 @@ var DashboardLayout = /** @__PURE__ @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 () {
@@ -4428,28 +4488,38 @@ var DashboardLayout = /** @__PURE__ @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');
-        setStyleAttribute(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');
+            setStyleAttribute(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) {
@@ -4472,60 +4542,67 @@ var DashboardLayout = /** @__PURE__ @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) {
@@ -5148,6 +5225,7 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
                 var key = keys_1[_i];
                 if ((typeof getValue(key, this) === 'object' && !isNullOrUndefined(getValue(key, this)))) {
                     if (Array.isArray(getValue(key, this)) && key === 'panels') {
+                        // eslint-disable-next-line
                         this.mergePanels(dataObj[key], this[key]);
                     }
                 }
@@ -5158,16 +5236,16 @@ var DashboardLayout = /** @__PURE__ @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);
         }
     };
     /**