@syncfusion/ej2-layouts 20.4.42 → 20.4.53

package/src/splitter/splitter.js

@@ -1133,18 +1133,21 @@ var Splitter = /** @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) {
@@ -1159,6 +1162,12 @@ var Splitter = /** @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;
@@ -1167,46 +1176,41 @@ var Splitter = /** @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)) {
@@ -1217,9 +1221,6 @@ var Splitter = /** @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 = '';
@@ -1238,76 +1239,66 @@ var Splitter = /** @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);
@@ -1333,26 +1324,43 @@ var Splitter = /** @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 = '';
@@ -1396,71 +1404,95 @@ var Splitter = /** @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);
+                }
             }
         }
     };
@@ -1781,7 +1813,7 @@ var Splitter = /** @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;