@syncfusion/ej2-layouts 20.4.40 → 20.4.48

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

@@ -1106,17 +1106,20 @@ let Splitter = class Splitter extends Component {
             }
             e.target.classList.add(SPLIT_BAR_HOVER);
         }
+        this.splitterDetails(e);
         const 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();
     }
     expandAction(e) {
-        this.splitterDetails(e);
         const eventArgs = this.beforeAction(e);
         if (this.expandFlag) {
             this.trigger('beforeExpand', eventArgs, (beforeExpandArgs) => {
@@ -1131,6 +1134,10 @@ let Splitter = class Splitter extends Component {
             this.expandPane(e);
         }
     }
+    getIcon(e) {
+        const targetClass = e.target.className.split(' ').filter((className) => className !== NAVIGATE_ARROW && className !== HIDE_ICON);
+        return targetClass[0];
+    }
     expandPane(e) {
         this.removeStaticPanes();
         const collapseCount = this.element.querySelectorAll('.' + COLLAPSE_PANE).length;
@@ -1139,46 +1146,41 @@ let Splitter = class Splitter extends Component {
             !this.nextPane.classList.contains(EXPAND_PANE) && this.nextPane.nextElementSibling.classList.contains(PANE) &&
             !this.nextPane.nextElementSibling.classList.contains(STATIC_PANE) && !(collapseCount === this.allPanes.length - 2));
         const 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);
+        const icon = this.getIcon(e);
+        const isLeftOrUp = icon === ARROW_LEFT || icon === ARROW_UP;
+        const collapsePane = isLeftOrUp ? this.nextPane : this.previousPane;
+        const expandPane = isLeftOrUp ? this.previousPane : this.nextPane;
+        const expandPaneIndex = isLeftOrUp ? this.nextPaneIndex : this.prevPaneIndex;
+        removeClass([collapsePane], collapseClass);
+        collapsePane.setAttribute('aria-hidden', 'false');
+        // cCount is calculated after removing the COLLAPSE_PANE
+        const 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 (let 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 = '';
         }
     }
-    checkStaticPanes() {
-        let staticPane = true;
-        for (let 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;
-    }
-    updateFlexGrow(status) {
+    updateFlexGrow() {
         let collapseCount = 0;
         for (let j = 0; j < this.element.children.length; j++) {
             if (this.element.children[j].classList.contains(COLLAPSE_PANE)) {
@@ -1189,9 +1191,6 @@ let Splitter = class Splitter extends Component {
         const panes = this.allPanes;
         for (let 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 = '';
@@ -1210,75 +1209,65 @@ let Splitter = class Splitter extends Component {
     showTargetBarIcon(targetBar, targetArrow) {
         removeClass([select('.' + targetArrow, targetBar)], HIDE_ICON);
     }
-    updateIconsOnCollapse(e) {
+    updateIconsOnCollapse(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);
+        const removeIcon = this.arrow;
+        const otherBar = this.currentBarIndex === (this.allBars.length - 1) ? this.prevBar : this.nextBar;
+        const 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)) {
+                        const otherPrevPaneIndex = otherBarIndex;
+                        const otherNextPaneIndex = otherBarIndex + 1;
+                        const 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);
             }
         }
     }
     collapseAction(e) {
-        this.splitterDetails(e);
         const eventArgs = this.beforeAction(e);
         if (this.collapseFlag) {
             this.collapsePane(e);
@@ -1304,26 +1293,43 @@ let Splitter = class Splitter extends Component {
             !(collapseCount === this.allPanes.length - 2)) || (this.nextPane.classList.contains(COLLAPSE_PANE) &&
             !this.previousPane.classList.contains(STATIC_PANE) && this.nextPane.classList.contains(STATIC_PANE));
         const 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);
-            }
+        const icon = this.getIcon(e);
+        const isLeftOrUp = icon === ARROW_LEFT || icon === ARROW_UP;
+        const collapsePane = isLeftOrUp ? this.previousPane : this.nextPane;
+        const expandPane = isLeftOrUp ? this.nextPane : this.previousPane;
+        const collapsePaneIndex = isLeftOrUp ? this.prevPaneIndex : this.nextPaneIndex;
+        removeClass([collapsePane], EXPAND_PANE);
+        collapsePane.setAttribute('aria-expanded', 'false');
+        addClass([collapsePane], collapseClass);
+        collapsePane.setAttribute('aria-hidden', 'true');
+        const 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());
+            let isFlexPaneHidden = true;
+            for (let 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 = '';
@@ -1367,71 +1373,95 @@ let Splitter = class Splitter extends Component {
             prevPanePreEle: this.previousPane.previousElementSibling
         };
     }
-    showCurrentBarIcon() {
+    showCurrentBarIcons() {
         removeClass([select('.' + this.arrow, this.currentSeparator)], HIDE_ICON);
     }
-    updateIconsOnExpand(e) {
+    hideBarIcons(bar) {
+        addClass([select('.' + this.arrow, bar)], HIDE_ICON);
+    }
+    getCollapseCount(prevPaneIndex, nextPaneIndex) {
+        let 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;
+    }
+    checkResizableProp(prevPaneIndex, nextPaneIndex) {
+        if (this.paneSettings[prevPaneIndex].resizable && this.paneSettings[nextPaneIndex].resizable) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    updateIconsOnExpand(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);
+        const showIcon = this.arrow;
+        const otherBar = this.currentBarIndex === (this.allBars.length - 1) ? this.prevBar : this.nextBar;
+        const 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)) {
+                        const otherPrevPaneIndex = otherBarIndex;
+                        const otherNextPaneIndex = otherBarIndex + 1;
+                        const 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);
+                }
             }
         }
     }
@@ -1751,7 +1781,7 @@ let Splitter = class Splitter extends Component {
         }
         const 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) {
             const middlePaneIndex = this.allPanes.length % this.allBars.length;
             if (this.prevPaneIndex === middlePaneIndex) {
                 this.nextPane.style.flexBasis = this.nextPaneCurrentWidth;
@@ -2404,6 +2434,7 @@ let DashboardLayout = class DashboardLayout extends Component {
         // to maintain sizeY in mobile device
         this.panelsSizeY = 0;
         this.resizeHeight = false;
+        this.eventVar = false;
         setValue('mergePersistData', this.mergePersistPanelData, this);
     }
     /**
@@ -4269,56 +4300,78 @@ let DashboardLayout = class DashboardLayout extends Component {
                     abort: abortArray,
                     dragStart: this.onDraggingStart.bind(this),
                     dragStop: (args) => {
-                        const 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;
-                        const 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');
-                        const row = this.getRowColumnDragValues(args)[0];
-                        const col = this.getRowColumnDragValues(args)[1];
-                        const 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)) {
+                            const 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;
+                            const 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');
+                            const row = this.getRowColumnDragValues(args)[0];
+                            const col = this.getRowColumnDragValues(args)[1];
+                            const 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();
+                            }
+                            const 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();
+                            let 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);
+                            }
                         }
-                        const 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: (args) => {
                         this.draggedEventArgs = {
@@ -4356,28 +4409,38 @@ let DashboardLayout = class DashboardLayout extends Component {
     onDraggingStart(args) {
         const dragArgs = args;
         this.trigger('dragStart', dragArgs, (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));
-        const eleRowValue = this.startRow = parseInt(args.element.getAttribute('data-row'), 10);
-        this.startCol = parseInt(args.element.getAttribute('data-col'), 10);
-        const 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';
-        const 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));
+            const eleRowValue = this.startRow = parseInt(args.element.getAttribute('data-row'), 10);
+            this.startCol = parseInt(args.element.getAttribute('data-col'), 10);
+            const 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';
+            const 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
     cloneModels(source, target) {
@@ -4400,60 +4463,67 @@ let DashboardLayout = class DashboardLayout extends Component {
         let endCol;
         let endRow;
         let dragCol;
-        const col = dragCol = this.getRowColumnDragValues(args)[1];
-        const row = this.getRowColumnDragValues(args)[0];
-        if (col < 0 || row < 0) {
-            return;
-        }
-        this.panelPropertyChange(this.getCellInstance(args.element.id), { row: row, col: col });
-        const 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) {
+            const col = dragCol = this.getRowColumnDragValues(args)[1];
+            const 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;
-                    const model = panelModel;
-                    this.checkCollision = this.collisions(model.row, model.col, model.sizeX, model.sizeY, args.element);
-                    if (panelModel.col >= this.checkColumnValue) {
-                        this.checkCollision = [];
+            const 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;
+                        const 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]);
         }
     }
     getPanelBase(args) {