@syncfusion/ej2-layouts - npm Package Compare versions

Comparing version 16.4.54 to 16.4.55

CHANGELOG.md

@@ -9,2 +9,10 @@ # Changelog
 
+- The issue with dynamic update of `paneSettings` has been fixed.
+
+## 16.4.54 (2019-02-19)
+
+### Splitter
+
+#### Bug Fixes
+
 - Issue with dynamic update of pane content has been fixed
@@ -11,0 +19,0 @@

dist/ej2-layouts.umd.min.js

 /*!
 *  filename: ej2-layouts.umd.min.js
-*  version : 16.4.54
+*  version : 16.4.55
 *  Copyright Syncfusion Inc. 2001 - 2019. All rights reserved.
@@ -10,3 +10,3 @@ *  Use of this code is subject to the terms of our license.
 */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@syncfusion/ej2-base")):"function"==typeof define&&define.amd?define(["exports","@syncfusion/ej2-base"],t):t(e.ej={},e.ej2Base)}(this,function(e,t){"use strict";var i=function(){var e=function(t,i){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var i in t)t.hasOwnProperty(i)&&(e[i]=t[i])})(t,i)};return function(t,i){function n(){this.constructor=t}e(t,i),t.prototype=null===i?Object.create(i):(n.prototype=i.prototype,new n)}}(),n=function(e,t,i,n){var s,r=arguments.length,a=r<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,n);else for(var o=e.length-1;o>=0;o--)(s=e[o])&&(a=(r<3?s(a):r>3?s(t,i,a):s(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a},s="e-splitter",r="e-splitter-horizontal",a="e-splitter-vertical",o="e-pane",h="e-pane-horizontal",l="e-pane-vertical",d="e-split-bar",p="e-split-bar-horizontal",u="e-split-bar-vertical",c="e-static-pane",P="e-scrollable",v="e-resize-handler",g="e-resizable-split-bar",f="e-split-bar-hover",x="e-split-bar-active",m="e-hide-handler",y="e-disabled",C=function(e){function s(){return null!==e&&e.apply(this,arguments)||this}return i(s,e),n([t.Property()],s.prototype,"size",void 0),n([t.Property(!0)],s.prototype,"resizable",void 0),n([t.Property(null)],s.prototype,"min",void 0),n([t.Property(null)],s.prototype,"max",void 0),n([t.Property()],s.prototype,"content",void 0),s}(t.ChildProperty),S=function(e){function S(t,i){var n=e.call(this,t,i)||this;return n.allPanes=[],n.paneOrder=[],n.separatorOrder=[],n.allBars=[],n.previousCoordinates={},n.currentCoordinates={},n.updatePrePaneInPercentage=!1,n.updateNextPaneInPercentage=!1,n.panesDimensions=[],n.border=0,n.validDataAttributes=["data-size","data-min","data-max","data-collapsible","data-resizable","data-content"],n.validElementAttributes=["data-orientation","data-width","data-height"],n}return i(S,e),S.prototype.onPropertyChanged=function(e,i){if(this.element.classList.contains(s))for(var n=0,r=Object.keys(e);n<r.length;n++){switch(r[n]){case"height":this.setSplitterSize(this.element,e.height,"height");break;case"width":this.setSplitterSize(this.element,e.width,"width");break;case"cssClass":this.setCssClass(e.cssClass);break;case"enabled":this.isEnabled(this.enabled);break;case"separatorSize":this.setSeparatorSize(e.separatorSize);break;case"orientation":this.changeOrientation(e.orientation);break;case"paneSettings":for(var a=Object.keys(e.paneSettings),o=0;o<a.length;o++)for(var h=parseInt(Object.keys(e.paneSettings)[o],10),l=Object.keys(e.paneSettings[h]).length,d=0;d<l;d++){var p=Object.keys(e.paneSettings[h])[d],u=Object(e.paneSettings[h])[p];h=this.enableRtl?this.allBars.length-1-h:h,"content"===p&&(this.allPanes[h].innerHTML="",this.setTemplate(u,this.allPanes[h])),"resizable"===p&&(t.EventHandler.remove(this.allBars[h],"mousedown",this.onMouseDown),u?(t.EventHandler.add(this.allBars[h],"mousedown",this.onMouseDown,this),this.currentSeparator=this.allBars[h],this.isResizable()&&(this.showResizer(this.allBars[h]),this.allBars[h].classList.add(g))):(this.hideResizer(this.allBars[h]),this.allBars[h].classList.remove(g))),"size"===p&&(this.allPanes[h].style.flexBasis=u)}break;case"enableRtl":this.setRTL(e.enableRtl)}}},S.prototype.preRender=function(){this.wrapper=this.element.cloneNode(!0),this.wrapperParent=this.element.parentElement,t.removeClass([this.wrapper],["e-control","e-lib",s]);var e="Horizontal"===this.orientation?r:a;t.addClass([this.element],e),t.Browser.isDevice&&t.addClass([this.element],"e-splitter-touch")},S.prototype.getPersistData=function(){return this.addOnPersist([])},S.prototype.getModuleName=function(){return"splitter"},S.prototype.render=function(){this.checkDataAttributes(),this.setCssClass(this.cssClass),this.isEnabled(this.enabled),this.setDimension(this.getHeight(this.element),this.getWidth(this.element)),this.createSplitPane(this.element),this.addSeparator(this.element),this.getPanesDimensions(),this.setRTL(this.enableRtl)},S.prototype.checkDataAttributes=function(){for(var e,i,n=0;n<this.validElementAttributes.length;n++)i=this.element.getAttribute(this.validElementAttributes[n]),t.isNullOrUndefined(i)||(this[e=this.removeDataPrefix(this.validElementAttributes[n])]=i);for(var s=0;s<this.element.children.length;s++)for(var r=0;r<this.validDataAttributes.length;r++)if(i=this.element.children[s].getAttribute(this.validDataAttributes[r]),!t.isNullOrUndefined(i)){i="collapsible"===(e=this.removeDataPrefix(this.validDataAttributes[r]))||"resizable"===e?"true"===i:i,t.isNullOrUndefined(this.paneSettings[s])&&(this.paneSettings[s]={size:"",min:null,max:null,content:"",resizable:!0});var a=this.paneSettings[s][e];"resizable"===e&&this.paneSettings[s].resizable&&(this.paneSettings[s][e]=i),(t.isNullOrUndefined(a)||""===a)&&(this.paneSettings[s][e]=i)}},S.prototype.removeDataPrefix=function(e){return e.slice(e.lastIndexOf("-")+1)},S.prototype.setRTL=function(e){e?t.addClass([this.element],"e-rtl"):t.removeClass([this.element],"e-rtl")},S.prototype.setSplitterSize=function(e,i,n){var s="width"===n?{width:t.formatUnit(i)}:{height:t.formatUnit(i)};t.setStyleAttribute(e,s)},S.prototype.getPanesDimensions=function(){for(var e=0;e<this.allPanes.length;e++)"Horizontal"===this.orientation?this.panesDimensions.push(this.allPanes[e].getBoundingClientRect().width):this.panesDimensions.push(this.allPanes[e].getBoundingClientRect().height)},S.prototype.setCssClass=function(e){""!==e&&t.addClass([this.element],e.split(" "))},S.prototype.hideResizer=function(e){t.addClass([t.select("."+v,e)],m)},S.prototype.showResizer=function(e){t.removeClass([t.select("."+v,e)],m)},S.prototype.isEnabled=function(e){e?t.removeClass([this.element],y):t.addClass([this.element],y)},S.prototype.setSeparatorSize=function(e){for(var i=t.isNullOrUndefined(e)?"auto":e+"px",n="Horizontal"===this.orientation?p:u,s=0;s<this.allBars.length;s++){var r=t.selectAll("."+n,this.element)[s],a=t.selectAll("."+v,r)[0];"Horizontal"===this.orientation?(r.style.width=i,t.isNullOrUndefined(a)||(a.style.width=i)):(r.style.height=i,t.isNullOrUndefined(a)||(a.style.height=i))}},S.prototype.changeOrientation=function(e){var t="Vertical"===e;this.element.classList.remove(t?r:a),this.element.classList.add(t?a:r),this.element.removeAttribute("aria-orientation"),this.element.setAttribute("aria-orientation",e);for(var i=0;i<this.allPanes.length;i++)this.allPanes[i].classList.remove(t?h:l),this.allPanes[i].classList.add(t?l:h);for(i=0;i<this.allBars.length;i++)this.allBars[i].classList.remove(t?p:u),this.allBars[i].classList.add(t?u:p)},S.prototype.getPrevPane=function(e,t){var i=this.enableRtl&&"Horizontal"===this.orientation?(t-1)/2+1:(t-1)/2;return e.parentElement.children[i]},S.prototype.getNextPane=function(e,t){var i=this.enableRtl&&"Horizontal"===this.orientation?(t-1)/2:(t-1)/2+1;return e.parentElement.children[i]},S.prototype.addResizeHandler=function(e){var i=this.createElement("div");t.addClass([i],[v,"e-icons"]);var n=t.isNullOrUndefined(this.separatorSize)?"1px":this.separatorSize+"px";"Horizontal"===this.orientation?i.style.width=n:i.style.height=n,e.appendChild(i)},S.prototype.getHeight=function(e){this.height;return""!==e.style.height&&"100%"===this.height?e.style.height:this.height},S.prototype.getWidth=function(e){this.width;return""!==e.style.width&&"100%"===this.width?e.style.width:this.width},S.prototype.setDimension=function(e,i){t.setStyleAttribute(this.element,{height:e,width:i})},S.prototype.createSeparator=function(e){var i=this.createElement("div");return this.allBars.push(i),"Horizontal"===this.orientation?(t.addClass([i],[d,p]),i.style.width=t.isNullOrUndefined(this.separatorSize)?"auto":this.separatorSize+"px"):(t.addClass([i],[d,u]),i.style.height=t.isNullOrUndefined(this.separatorSize)?"auto":this.separatorSize+"px"),this.addMouseActions(i),this.addResizeHandler(i),i},S.prototype.addSeparator=function(e){for(var i=this.allPanes.length,n=e.children,s=0;s<i;s++)if(s<i-1){var r=this.createSeparator(s);if(t.setStyleAttribute(r,{order:2*s+1}),this.separatorOrder.push(2*s+1),n[s].parentNode.appendChild(r),this.currentSeparator=r,r.setAttribute("role","separator"),this.isResizable()){t.EventHandler.add(r,"mousedown",this.onMouseDown,this);var a="msie"===t.Browser.info.name?"pointerdown":"touchstart";t.EventHandler.add(r,a,this.onMouseDown,this),r.classList.add(g)}else this.hideResizer(r)}},S.prototype.isResizable=function(){var e=!1;return(!t.isNullOrUndefined(this.paneSettings[this.getPreviousPaneIndex()])&&this.paneSettings[this.getPreviousPaneIndex()].resizable&&!t.isNullOrUndefined(this.paneSettings[this.getNextPaneIndex()])&&this.paneSettings[this.getNextPaneIndex()].resizable||t.isNullOrUndefined(this.paneSettings[this.getNextPaneIndex()]))&&(e=!0),e},S.prototype.addMouseActions=function(e){e.addEventListener("mouseover",function(){t.addClass([e],[f])}),e.addEventListener("mouseout",function(){t.removeClass([e],[f])})},S.prototype.getEventType=function(e){return e.indexOf("mouse")>-1?"mouse":"touch"},S.prototype.updateCurrentSeparator=function(e){this.currentSeparator=this.isSeparator(e)?e:e.parentElement},S.prototype.isSeparator=function(e){var t=!0;return(e.classList.contains(v)||e.classList.contains("e-split-line"))&&(t=!1),t},S.prototype.isMouseEvent=function(e){var i=!1;return("mouse"===this.getEventType(e.type)||!t.isNullOrUndefined(e.pointerType)&&"mouse"===this.getEventType(e.pointerType))&&(i=!0),i},S.prototype.updateCursorPosition=function(e,i){if(this.isMouseEvent(e))this.changeCoordinates({x:e.pageX,y:e.pageY},i);else{var n="msie"!==t.Browser.info.name?e.touches[0]:e;this.changeCoordinates({x:n.pageX,y:n.pageY},i)}},S.prototype.changeCoordinates=function(e,t){"previous"===t?this.previousCoordinates=e:this.currentCoordinates=e},S.prototype.wireResizeEvents=function(){t.EventHandler.add(document,"mousemove",this.onMouseMove,this),t.EventHandler.add(document,"mouseup",this.onMouseUp,this);var e="msie"===t.Browser.info.name?"pointermove":"touchmove",i="msie"===t.Browser.info.name?"pointerup":"touchend";t.EventHandler.add(document,e,this.onMouseMove,this),t.EventHandler.add(document,i,this.onMouseUp,this)},S.prototype.unwireResizeEvents=function(){var e="msie"===t.Browser.info.name?"pointermove":"touchmove",i="msie"===t.Browser.info.name?"pointerup":"touchend";t.EventHandler.remove(document,"mousemove",this.onMouseMove),t.EventHandler.remove(document,"mouseup",this.onMouseUp),t.EventHandler.remove(document,e,this.onMouseMove),t.EventHandler.remove(document,i,this.onMouseUp)},S.prototype.onMouseDown=function(e){e.preventDefault();var i=e.target;this.updateCurrentSeparator(i),t.addClass([this.currentSeparator],x),this.updateCursorPosition(e,"previous"),this.getPaneDetails();var n={element:this.element,event:e,pane:[this.previousPane,this.nextPane],index:[this.getPreviousPaneIndex(),this.getNextPaneIndex()],separator:this.currentSeparator,cancel:!1};if(this.trigger("resizeStart",n),!n.cancel)if(this.wireResizeEvents(),this.previousPane.style.flexBasis.indexOf("%")>0||this.nextPane.style.flexBasis.indexOf("%")>0){var s=this.updatePaneFlexBasis(this.previousPane),r=this.updatePaneFlexBasis(this.nextPane);this.totalPercent=s+r,this.totalWidth=this.convertPercentageToPixel(this.totalPercent+"%")}else this.totalWidth="Horizontal"===this.orientation?this.previousPane.offsetWidth+this.nextPane.offsetWidth:this.previousPane.offsetHeight+this.nextPane.offsetHeight},S.prototype.updatePaneFlexBasis=function(e){var t;if(e.style.flexBasis.indexOf("%")>0)t=this.removePercentageUnit(e.style.flexBasis);else if(""!==e.style.flexBasis)t=this.convertPixelToPercentage(this.convertPixelToNumber(e.style.flexBasis));else{var i="Horizontal"===this.orientation?e.offsetWidth+this.currentSeparator.offsetWidth:e.offsetHeight+this.currentSeparator.offsetHeight;t=this.convertPixelToPercentage(i)}return t},S.prototype.removePercentageUnit=function(e){return parseFloat(e.slice(0,e.indexOf("%")))},S.prototype.convertPercentageToPixel=function(e,i){var n,s=e.toString();if(s.indexOf("%")>-1){n=parseFloat(s.slice(0,s.indexOf("%")));var r=void 0;r=t.isNullOrUndefined(i)?"Horizontal"===this.orientation?this.element.offsetWidth:this.element.offsetHeight:this.panesDimensions[this.allPanes.indexOf(i)],n=Math.ceil(r*(n/100))}else n=parseInt(s,10);return n},S.prototype.convertPixelToPercentage=function(e){return e/("Horizontal"===this.orientation?this.element.offsetWidth:this.element.offsetHeight)*100},S.prototype.convertPixelToNumber=function(e){return e.indexOf("p")>-1?parseFloat(e.slice(0,e.indexOf("p"))):parseFloat(e)},S.prototype.calcDragPosition=function(e,t){var i,n;return i="Horizontal"===this.orientation?this.currentCoordinates.x-e:this.currentCoordinates.y-e,n=i/t,(n=n>1?1:n<0?0:n)*t},S.prototype.getSeparatorPosition=function(e){this.updateCursorPosition(e,"current");var t="Horizontal"===this.orientation?this.element.getBoundingClientRect().left:this.element.getBoundingClientRect().top,i="Horizontal"===this.orientation?this.element.offsetWidth:this.element.offsetHeight;return this.calcDragPosition(t,i)},S.prototype.getMinMax=function(e,i,n){var s="min"===n?0:null,r=null;return"min"===n?t.isNullOrUndefined(this.paneSettings[e])||t.isNullOrUndefined(this.paneSettings[e].min)||(r=this.paneSettings[e].min):t.isNullOrUndefined(this.paneSettings[e])||t.isNullOrUndefined(this.paneSettings[e].max)||(r=this.paneSettings[e].max),this.paneSettings.length>0&&!t.isNullOrUndefined(this.paneSettings[e])&&!t.isNullOrUndefined(r)?(r.indexOf("%")>0&&(r=this.convertPercentageToPixel(r).toString()),this.convertPixelToNumber(r)):s},S.prototype.getPreviousPaneIndex=function(){var e=(parseInt(this.currentSeparator.style.order,10)-1)/2;return this.enableRtl?e+1:e},S.prototype.getNextPaneIndex=function(){var e=(parseInt(this.currentSeparator.style.order,10)-1)/2;return this.enableRtl?e:e+1},S.prototype.getPaneDetails=function(){this.order=parseInt(this.currentSeparator.style.order,10),this.previousPane=this.getPrevPane(this.currentSeparator,this.order),this.nextPane=this.getNextPane(this.currentSeparator,this.order),this.prevPaneIndex=this.getPreviousPaneIndex(),this.nextPaneIndex=this.getNextPaneIndex()},S.prototype.getPaneHeight=function(e){return"Horizontal"===this.orientation?e.offsetWidth.toString():e.offsetHeight.toString()},S.prototype.boundingRectValues=function(e){return"Horizontal"===this.orientation?e.getBoundingClientRect().width:e.getBoundingClientRect().height},S.prototype.isValidSize=function(e){var i=!1;return!t.isNullOrUndefined(this.paneSettings[e])&&!t.isNullOrUndefined(this.paneSettings[e].size)&&this.paneSettings[e].size.indexOf("%")>-1&&(i=!0),i},S.prototype.getPaneDimensions=function(){if(this.previousPaneHeightWidth=""===this.previousPane.style.flexBasis?this.getPaneHeight(this.previousPane):this.previousPane.style.flexBasis,this.nextPaneHeightWidth=""===this.nextPane.style.flexBasis?this.getPaneHeight(this.nextPane):this.nextPane.style.flexBasis,this.paneSettings.length<1)return this.prePaneDimenson=this.boundingRectValues(this.previousPane),void(this.nextPaneDimension=this.boundingRectValues(this.nextPane));this.isValidSize(this.prevPaneIndex)&&(this.previousPaneHeightWidth=this.convertPercentageToPixel(this.previousPaneHeightWidth).toString(),this.updatePrePaneInPercentage=!0),this.isValidSize(this.nextPaneIndex)&&(this.nextPaneHeightWidth=this.convertPercentageToPixel(this.nextPaneHeightWidth).toString(),this.updateNextPaneInPercentage=!0),this.prePaneDimenson=this.convertPixelToNumber(this.previousPaneHeightWidth.toString()),this.nextPaneDimension=this.convertPixelToNumber(this.nextPaneHeightWidth.toString())},S.prototype.checkCoordinates=function(e,t){var i=!0;return e!==this.previousCoordinates.x&&t!==this.previousCoordinates.y||(i=!1),i},S.prototype.isCursorMoved=function(e){return"mouse"===this.getEventType(e.type)||!t.isNullOrUndefined(e.pointerType)&&"mouse"===this.getEventType(e.pointerType)?this.checkCoordinates(e.pageX,e.pageY):"msie"!==t.Browser.info.name?this.checkCoordinates(e.touches[0].pageX,e.touches[0].pageY):this.checkCoordinates(e.pageX,e.pageY)},S.prototype.getBorder=function(){this.border=0;var e="Horizontal"===this.orientation?(this.element.offsetWidth-this.element.clientWidth)/2:(this.element.offsetHeight-this.element.clientHeight)/2;this.border="chrome"!==t.Browser.info.name?this.border:e},S.prototype.onMouseMove=function(e){if(this.isCursorMoved(e)){this.getPaneDetails(),this.getPaneDimensions();var t={element:this.element,event:e,pane:[this.previousPane,this.nextPane],index:[this.prevPaneIndex,this.nextPaneIndex],paneSize:[this.prePaneDimenson,this.nextPaneDimension],separator:this.currentSeparator};this.trigger("resizing",t);var i,n=this.validateDraggedPosition(this.getSeparatorPosition(e),this.prePaneDimenson,this.nextPaneDimension);if(this.getBorder(),i="Horizontal"===this.orientation?this.element.getBoundingClientRect().left+n-this.currentSeparator.getBoundingClientRect().left+this.border:this.element.getBoundingClientRect().top+n-this.currentSeparator.getBoundingClientRect().top+this.border,this.nextPaneHeightWidth="string"==typeof this.nextPaneHeightWidth&&this.nextPaneHeightWidth.indexOf("p")>-1?this.convertPixelToNumber(this.nextPaneHeightWidth):parseInt(this.nextPaneHeightWidth,10),this.prevPaneCurrentWidth=i+this.convertPixelToNumber(this.previousPaneHeightWidth),this.nextPaneCurrentWidth=this.nextPaneHeightWidth-i,this.validateMinMaxValues(),this.nextPaneCurrentWidth<0&&(this.nextPaneCurrentWidth=0),this.prevPaneCurrentWidth<0&&(this.prevPaneCurrentWidth=0),this.nextPaneCurrentWidth+this.prevPaneCurrentWidth>this.totalWidth&&(this.nextPaneCurrentWidth<this.prevPaneCurrentWidth?this.prevPaneCurrentWidth=this.prevPaneCurrentWidth-(this.nextPaneCurrentWidth+this.prevPaneCurrentWidth-this.totalWidth):this.nextPaneCurrentWidth=this.nextPaneCurrentWidth-(this.nextPaneCurrentWidth+this.prevPaneCurrentWidth-this.totalWidth)),this.nextPaneCurrentWidth+this.prevPaneCurrentWidth<this.totalWidth){var s=this.totalWidth-(this.nextPaneCurrentWidth+this.prevPaneCurrentWidth);this.nextPaneCurrentWidth=this.nextPaneCurrentWidth+s}this.calculateCurrentDimensions(),this.addStaticPaneClass(),this.previousPane.style.flexBasis=this.prevPaneCurrentWidth,this.nextPane.style.flexBasis=this.nextPaneCurrentWidth}},S.prototype.validateMinRange=function(e,i,n){var s,r,a=null,o=0;return t.isNullOrUndefined(this.paneSettings[e])||t.isNullOrUndefined(this.paneSettings[e].min)||(a=this.paneSettings[e].min.toString()),t.isNullOrUndefined(a)||(a.indexOf("%")>0&&(a=this.convertPercentageToPixel(a).toString()),i<(s=this.convertPixelToNumber(a))&&(o=i-s<=0?0:i-s,this.totalWidth=this.totalWidth-o,this.totalPercent=this.convertPixelToPercentage(this.totalWidth),r=s)),t.isNullOrUndefined(r)?i:r},S.prototype.validateMaxRange=function(e,i,n){var s,r,a=null;return t.isNullOrUndefined(this.paneSettings[e])||t.isNullOrUndefined(this.paneSettings[e].max)||(a=this.paneSettings[e].max.toString()),t.isNullOrUndefined(a)||(a.indexOf("%")>0&&(a=this.convertPercentageToPixel(a).toString()),i>(s=this.convertPixelToNumber(a))&&(this.totalWidth=this.totalWidth-(i-s),this.totalPercent=this.convertPixelToPercentage(this.totalWidth),r=s)),t.isNullOrUndefined(r)?i:r},S.prototype.validateMinMaxValues=function(){this.prevPaneCurrentWidth=this.validateMinRange(this.prevPaneIndex,this.prevPaneCurrentWidth,this.previousPane),this.nextPaneCurrentWidth=this.validateMinRange(this.nextPaneIndex,this.nextPaneCurrentWidth,this.nextPane),this.prevPaneCurrentWidth=this.validateMaxRange(this.prevPaneIndex,this.prevPaneCurrentWidth,this.previousPane),this.nextPaneCurrentWidth=this.validateMaxRange(this.nextPaneIndex,this.nextPaneCurrentWidth,this.nextPane)},S.prototype.equatePaneWidths=function(){var e;this.prevPaneCurrentWidth+this.nextPaneCurrentWidth>this.totalPercent&&(e=this.prevPaneCurrentWidth+this.nextPaneCurrentWidth-this.totalPercent,this.prevPaneCurrentWidth=this.prevPaneCurrentWidth-e/2+"%",this.nextPaneCurrentWidth=this.nextPaneCurrentWidth-e/2+"%"),this.prevPaneCurrentWidth+this.nextPaneCurrentWidth<this.totalPercent&&(e=this.totalPercent-(this.prevPaneCurrentWidth+this.nextPaneCurrentWidth),this.prevPaneCurrentWidth=this.prevPaneCurrentWidth+e/2+"%",this.nextPaneCurrentWidth=this.nextPaneCurrentWidth+e/2+"%")},S.prototype.calculateCurrentDimensions=function(){this.updatePrePaneInPercentage||this.updateNextPaneInPercentage?(this.prevPaneCurrentWidth=Math.round(Number(Math.round(10*this.convertPixelToPercentage(this.prevPaneCurrentWidth))/10)),this.nextPaneCurrentWidth=Math.round(Number(Math.round(10*this.convertPixelToPercentage(this.nextPaneCurrentWidth))/10)),0===this.prevPaneCurrentWidth&&(this.nextPaneCurrentWidth=this.totalPercent),0===this.nextPaneCurrentWidth&&(this.prevPaneCurrentWidth=this.totalPercent),this.prevPaneCurrentWidth+this.nextPaneCurrentWidth!==this.totalPercent?this.equatePaneWidths():(this.prevPaneCurrentWidth=this.prevPaneCurrentWidth+"%",this.nextPaneCurrentWidth=this.nextPaneCurrentWidth+"%"),this.prevPaneCurrentWidth=this.updatePrePaneInPercentage?this.prevPaneCurrentWidth:this.convertPercentageToPixel(this.prevPaneCurrentWidth)+"px",this.nextPaneCurrentWidth=this.updateNextPaneInPercentage?this.nextPaneCurrentWidth:this.convertPercentageToPixel(this.nextPaneCurrentWidth)+"px",this.updatePrePaneInPercentage=!1,this.updateNextPaneInPercentage=!1):(this.prevPaneCurrentWidth=this.prevPaneCurrentWidth+"px",this.nextPaneCurrentWidth=this.nextPaneCurrentWidth+"px")},S.prototype.addStaticPaneClass=function(){this.previousPane.classList.contains(c)||this.previousPane.classList.add(c),this.nextPane.classList.contains(c)||this.nextPane.classList.add(c)},S.prototype.validateDraggedPosition=function(e,i,n){var s="Horizontal"===this.orientation?this.currentSeparator.offsetLeft:this.currentSeparator.offsetTop,r=s-i,a=n+s,o=this.getMinMax(this.prevPaneIndex,this.previousPane,"min"),h=this.getMinMax(this.nextPaneIndex,this.nextPane,"min"),l=this.getMinMax(this.prevPaneIndex,this.previousPane,"max"),d=this.getMinMax(this.nextPaneIndex,this.nextPane,"max"),p=e;return e>a-h?p=a-h:e<r+o&&(p=r+o),t.isNullOrUndefined(l)?t.isNullOrUndefined(d)||e<a-d&&(p=a-d):e>r+l&&(p=r+l),p},S.prototype.onMouseUp=function(e){t.removeClass([this.currentSeparator],x),this.unwireResizeEvents();var i={event:e,element:this.element,pane:[this.previousPane,this.nextPane],index:[this.prevPaneIndex,this.nextPaneIndex],separator:this.currentSeparator,paneSize:[this.prePaneDimenson,this.nextPaneDimension]};this.trigger("resizeStop",i)},S.prototype.panesDimension=function(e,i){var n,s=i.length;parseInt(this.getHeight(this.element),10),t.isNullOrUndefined(this.paneSettings[e])?t.setStyleAttribute(i[e],{order:2*e}):t.isNullOrUndefined(this.paneSettings[e].size)?(this.sizeFlag=!0,t.setStyleAttribute(i[e],{order:2*e})):(n=this.paneSettings[e].size,e<s&&(t.setStyleAttribute(i[e],{"flex-basis":n,order:2*e}),e<s-1?t.addClass([i[e]],c):this.sizeFlag||(i[e].style.flexBasis=null),e===s-1&&this.sizeFlag&&t.addClass([i[e]],c))),this.paneOrder.push(2*e)},S.prototype.setTemplate=function(e,i){for(var n=[],s=0,r=t.compile(e)({});s<r.length;s++){var a=r[s];n.push(a)}t.append([].slice.call(n),i)},S.prototype.createSplitPane=function(e){for(var i=e.children.length,n=0;n<this.paneSettings.length;n++)if(i<this.paneSettings.length){var s=this.createElement("div");this.element.appendChild(s),i+=1}i=e.children.length;var r=[].slice.call(e.children);if(this.element.setAttribute("aria-orientation",this.orientation),this.element.setAttribute("role","splitter"),this.sizeFlag=!1,i>1)for(n=0;n<i;n++)1===r[n].nodeType&&(this.allPanes.push(r[n]),"Horizontal"===this.orientation?(t.addClass([r[n]],[o,h,P]),this.panesDimension(n,r)):(t.addClass([r[n]],[o,l,P]),this.panesDimension(n,r)),t.isNullOrUndefined(this.paneSettings[n])||t.isNullOrUndefined(this.paneSettings[n].content)||this.setTemplate(this.paneSettings[n].content,r[n]))},S.prototype.destroy=function(){t.detach(this.element),this.element=this.wrapper,this.wrapperParent.appendChild(this.wrapper)},S.prototype.addPaneClass=function(e){return"Horizontal"===this.orientation?t.addClass([e],[o,h,P]):t.addClass([e],[o,l,P]),e},S.prototype.removePaneOrders=function(e){for(var t=document.querySelectorAll("."+e),i=0;i<t.length;i++)t[i].style.removeProperty("order")},S.prototype.setPaneOrder=function(){for(var e=0;e<this.allPanes.length;e++)this.panesDimension(e,this.allPanes)},S.prototype.removeSeparator=function(){for(var e=0;e<this.allBars.length;e++)t.detach(this.allBars[e]);this.allBars=[]},S.prototype.updatePanes=function(){this.setPaneOrder(),this.removeSeparator(),this.addSeparator(this.element)},S.prototype.addPane=function(e,i){var n=this.createElement("div");n=this.addPaneClass(n),i=i>this.allPanes.length+1?this.allPanes.length:i;var s={size:t.isNullOrUndefined(e.size)?"":e.size,min:t.isNullOrUndefined(e.min)?null:e.min,max:t.isNullOrUndefined(e.max)?null:e.max,content:t.isNullOrUndefined(e.content)?"":e.content,resizable:!!t.isNullOrUndefined(e.resizable)||e.resizable};this.paneSettings.splice(i,0,s),"Horizontal"===this.orientation?(this.element.insertBefore(n,this.element.querySelectorAll("."+h)[i]),this.removePaneOrders(h)):(this.element.insertBefore(n,this.element.querySelectorAll("."+l)[i]),this.removePaneOrders(l)),this.allPanes.splice(i,0,n),this.updatePanes(),this.setTemplate(this.paneSettings[i].content,n),this.allPanes[this.allPanes.length-1].classList.remove(c)},S.prototype.removePane=function(e){e=e>this.allPanes.length+1?this.allPanes.length:e;var i="Horizontal"===this.orientation?h:l;t.isNullOrUndefined(this.element.querySelectorAll("."+i)[e])||(t.detach(this.element.querySelectorAll("."+i)[e]),this.allPanes.splice(e,1),this.removePaneOrders(i),this.updatePanes(),this.allPanes[this.allPanes.length-1].classList.remove(c))},n([t.Property("100%")],S.prototype,"height",void 0),n([t.Property("100%")],S.prototype,"width",void 0),n([t.Collection([],C)],S.prototype,"paneSettings",void 0),n([t.Property("Horizontal")],S.prototype,"orientation",void 0),n([t.Property("")],S.prototype,"cssClass",void 0),n([t.Property(!0)],S.prototype,"enabled",void 0),n([t.Property(!1)],S.prototype,"enableRtl",void 0),n([t.Property(null)],S.prototype,"separatorSize",void 0),n([t.Event()],S.prototype,"created",void 0),n([t.Event()],S.prototype,"resizeStart",void 0),n([t.Event()],S.prototype,"resizing",void 0),n([t.Event()],S.prototype,"resizeStop",void 0),S=n([t.NotifyPropertyChanges],S)}(t.Component);e.PaneProperties=C,e.Splitter=S,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@syncfusion/ej2-base")):"function"==typeof define&&define.amd?define(["exports","@syncfusion/ej2-base"],t):t(e.ej={},e.ej2Base)}(this,function(e,t){"use strict";var i=function(){var e=function(t,i){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var i in t)t.hasOwnProperty(i)&&(e[i]=t[i])})(t,i)};return function(t,i){function n(){this.constructor=t}e(t,i),t.prototype=null===i?Object.create(i):(n.prototype=i.prototype,new n)}}(),n=function(e,t,i,n){var s,r=arguments.length,a=r<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,n);else for(var o=e.length-1;o>=0;o--)(s=e[o])&&(a=(r<3?s(a):r>3?s(t,i,a):s(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a},s="e-splitter",r="e-splitter-horizontal",a="e-splitter-vertical",o="e-pane",h="e-pane-horizontal",l="e-pane-vertical",d="e-split-bar",p="e-split-bar-horizontal",u="e-split-bar-vertical",c="e-static-pane",P="e-scrollable",v="e-resize-handler",f="e-resizable-split-bar",g="e-split-bar-hover",m="e-split-bar-active",x="e-hide-handler",y="e-disabled",C="e-resizable",S=function(e){function s(){return null!==e&&e.apply(this,arguments)||this}return i(s,e),n([t.Property()],s.prototype,"size",void 0),n([t.Property(!0)],s.prototype,"resizable",void 0),n([t.Property(null)],s.prototype,"min",void 0),n([t.Property(null)],s.prototype,"max",void 0),n([t.Property()],s.prototype,"content",void 0),s}(t.ChildProperty),b=function(e){function b(t,i){var n=e.call(this,t,i)||this;return n.allPanes=[],n.paneOrder=[],n.separatorOrder=[],n.allBars=[],n.previousCoordinates={},n.currentCoordinates={},n.updatePrePaneInPercentage=!1,n.updateNextPaneInPercentage=!1,n.panesDimensions=[],n.border=0,n.validDataAttributes=["data-size","data-min","data-max","data-collapsible","data-resizable","data-content"],n.validElementAttributes=["data-orientation","data-width","data-height"],n}return i(b,e),b.prototype.onPropertyChanged=function(e,i){if(this.element.classList.contains(s))for(var n=0,r=Object.keys(e);n<r.length;n++){switch(r[n]){case"height":this.setSplitterSize(this.element,e.height,"height");break;case"width":this.setSplitterSize(this.element,e.width,"width");break;case"cssClass":this.setCssClass(e.cssClass);break;case"enabled":this.isEnabled(this.enabled);break;case"separatorSize":this.setSeparatorSize(e.separatorSize);break;case"orientation":this.changeOrientation(e.orientation);break;case"paneSettings":if(e.paneSettings instanceof Array&&i.paneSettings instanceof Array)this.destroyPaneSettings(),this.allBars=[],this.allPanes=[],this.createSplitPane(this.element),this.addSeparator(this.element),this.getPanesDimensions(),this.setRTL(this.enableRtl);else for(var a=Object.keys(e.paneSettings),o=0;o<a.length;o++)for(var h=parseInt(Object.keys(e.paneSettings)[o],10),l=Object.keys(e.paneSettings[h]).length,d=0;d<l;d++){var p=Object.keys(e.paneSettings[h])[d];switch(p){case"content":var u=Object(e.paneSettings[h])[p];t.isNullOrUndefined(u)||(this.allPanes[h].innerHTML="",this.setTemplate(u,this.allPanes[h]));break;case"resizable":var P=Object(e.paneSettings[h])[p];this.resizableModel(h,P);break;case"size":var v=Object(e.paneSettings[h])[p];""===v||t.isNullOrUndefined(v)||(this.allPanes[h].style.flexBasis=v,this.allPanes[h].classList.add(c))}}break;case"enableRtl":this.setRTL(e.enableRtl)}}},b.prototype.preRender=function(){this.wrapper=this.element.cloneNode(!0),this.wrapperParent=this.element.parentElement,t.removeClass([this.wrapper],["e-control","e-lib",s]);var e="Horizontal"===this.orientation?r:a;t.addClass([this.element],e),t.Browser.isDevice&&t.addClass([this.element],"e-splitter-touch")},b.prototype.getPersistData=function(){return this.addOnPersist([])},b.prototype.getModuleName=function(){return"splitter"},b.prototype.render=function(){this.checkDataAttributes(),this.setCssClass(this.cssClass),this.isEnabled(this.enabled),this.setDimension(this.getHeight(this.element),this.getWidth(this.element)),this.createSplitPane(this.element),this.addSeparator(this.element),this.getPanesDimensions(),this.setPaneSettings(),this.setRTL(this.enableRtl)},b.prototype.checkDataAttributes=function(){for(var e,i,n=0;n<this.validElementAttributes.length;n++)i=this.element.getAttribute(this.validElementAttributes[n]),t.isNullOrUndefined(i)||(this[e=this.removeDataPrefix(this.validElementAttributes[n])]=i);for(var s=0;s<this.element.children.length;s++)for(var r=0;r<this.validDataAttributes.length;r++)if(i=this.element.children[s].getAttribute(this.validDataAttributes[r]),!t.isNullOrUndefined(i)){i="collapsible"===(e=this.removeDataPrefix(this.validDataAttributes[r]))||"resizable"===e?"true"===i:i,t.isNullOrUndefined(this.paneSettings[s])&&(this.paneSettings[s]={size:"",min:null,max:null,content:"",resizable:!0});var a=this.paneSettings[s][e];"resizable"===e&&this.paneSettings[s].resizable&&(this.paneSettings[s][e]=i),(t.isNullOrUndefined(a)||""===a)&&(this.paneSettings[s][e]=i)}},b.prototype.destroyPaneSettings=function(){[].slice.call(this.element.children).forEach(function(e){t.detach(e)})},b.prototype.setPaneSettings=function(){for(var e=this.allPanes.length,i=[],n={size:"",min:null,max:null,content:"",resizable:!0},s=0;s<e;s++)t.isNullOrUndefined(this.paneSettings[s])?i[s]=n:i[s]=this.paneSettings[s];this.setProperties({paneSettings:i},!0)},b.prototype.resizableModel=function(e,i){var n,s=e;n=e===this.allBars.length?e-1:e,t.EventHandler.remove(this.allBars[n],"mousedown",this.onMouseDown),i?(t.EventHandler.add(this.allBars[n],"mousedown",this.onMouseDown,this),this.isResizable()&&(this.showResizer(this.allBars[n]),t.removeClass([t.select("."+v,this.allBars[n])],x),this.allBars[n].classList.add(f),e===this.allBars.length?this.allPanes[e].classList.add(C):this.allPanes[n].classList.add(C),this.updateResizablePanes(s))):(this.updateResizablePanes(s),this.hideResizer(this.allBars[n]),this.allBars[n].classList.remove(f),e===this.allBars.length?this.allPanes[e].classList.remove(C):this.allPanes[n].classList.remove(C))},b.prototype.updateResizablePanes=function(e){this.getPaneDetails(),this.isResizable()?this.allPanes[e].classList.add(C):this.allPanes[e].classList.remove(C)},b.prototype.removeDataPrefix=function(e){return e.slice(e.lastIndexOf("-")+1)},b.prototype.setRTL=function(e){e?t.addClass([this.element],"e-rtl"):t.removeClass([this.element],"e-rtl")},b.prototype.setSplitterSize=function(e,i,n){var s="width"===n?{width:t.formatUnit(i)}:{height:t.formatUnit(i)};t.setStyleAttribute(e,s)},b.prototype.getPanesDimensions=function(){for(var e=0;e<this.allPanes.length;e++)"Horizontal"===this.orientation?this.panesDimensions.push(this.allPanes[e].getBoundingClientRect().width):this.panesDimensions.push(this.allPanes[e].getBoundingClientRect().height)},b.prototype.setCssClass=function(e){""!==e&&t.addClass([this.element],e.split(" "))},b.prototype.hideResizer=function(e){t.addClass([t.select("."+v,e)],x)},b.prototype.showResizer=function(e){t.removeClass([t.select("."+v,e)],x)},b.prototype.isEnabled=function(e){e?t.removeClass([this.element],y):t.addClass([this.element],y)},b.prototype.setSeparatorSize=function(e){for(var i=t.isNullOrUndefined(e)?"auto":e+"px",n="Horizontal"===this.orientation?p:u,s=0;s<this.allBars.length;s++){var r=t.selectAll("."+n,this.element)[s],a=t.selectAll("."+v,r)[0];"Horizontal"===this.orientation?(r.style.width=i,t.isNullOrUndefined(a)||(a.style.width=i)):(r.style.height=i,t.isNullOrUndefined(a)||(a.style.height=i))}},b.prototype.changeOrientation=function(e){var t="Vertical"===e;this.element.classList.remove(t?r:a),this.element.classList.add(t?a:r),this.element.removeAttribute("aria-orientation"),this.element.setAttribute("aria-orientation",e);for(var i=0;i<this.allPanes.length;i++)this.allPanes[i].classList.remove(t?h:l),this.allPanes[i].classList.add(t?l:h);for(i=0;i<this.allBars.length;i++)this.allBars[i].classList.remove(t?p:u),this.allBars[i].classList.add(t?u:p)},b.prototype.getPrevPane=function(e,t){var i=this.enableRtl&&"Horizontal"===this.orientation?(t-1)/2+1:(t-1)/2;return e.parentElement.children[i]},b.prototype.getNextPane=function(e,t){var i=this.enableRtl&&"Horizontal"===this.orientation?(t-1)/2:(t-1)/2+1;return e.parentElement.children[i]},b.prototype.addResizeHandler=function(e){var i=this.createElement("div");t.addClass([i],[v,"e-icons"]);var n=t.isNullOrUndefined(this.separatorSize)?"1px":this.separatorSize+"px";"Horizontal"===this.orientation?i.style.width=n:i.style.height=n,e.appendChild(i)},b.prototype.getHeight=function(e){this.height;return""!==e.style.height&&"100%"===this.height?e.style.height:this.height},b.prototype.getWidth=function(e){this.width;return""!==e.style.width&&"100%"===this.width?e.style.width:this.width},b.prototype.setDimension=function(e,i){t.setStyleAttribute(this.element,{height:e,width:i})},b.prototype.createSeparator=function(e){var i=this.createElement("div");return this.allBars.push(i),"Horizontal"===this.orientation?(t.addClass([i],[d,p]),i.style.width=t.isNullOrUndefined(this.separatorSize)?"auto":this.separatorSize+"px"):(t.addClass([i],[d,u]),i.style.height=t.isNullOrUndefined(this.separatorSize)?"auto":this.separatorSize+"px"),this.addMouseActions(i),this.addResizeHandler(i),i},b.prototype.addSeparator=function(e){for(var i=this.allPanes.length,n=e.children,s=0;s<i;s++)if(s<i-1){var r=this.createSeparator(s);if(t.setStyleAttribute(r,{order:2*s+1}),this.separatorOrder.push(2*s+1),n[s].parentNode.appendChild(r),this.currentSeparator=r,r.setAttribute("role","separator"),this.isResizable()){t.EventHandler.add(r,"mousedown",this.onMouseDown,this);var a="msie"===t.Browser.info.name?"pointerdown":"touchstart";t.EventHandler.add(r,a,this.onMouseDown,this),r.classList.add(f)}else this.hideResizer(r)}},b.prototype.isResizable=function(){var e=!1;return(!t.isNullOrUndefined(this.paneSettings[this.getPreviousPaneIndex()])&&this.paneSettings[this.getPreviousPaneIndex()].resizable&&!t.isNullOrUndefined(this.paneSettings[this.getNextPaneIndex()])&&this.paneSettings[this.getNextPaneIndex()].resizable||t.isNullOrUndefined(this.paneSettings[this.getNextPaneIndex()]))&&(e=!0),e},b.prototype.addMouseActions=function(e){e.addEventListener("mouseover",function(){t.addClass([e],[g])}),e.addEventListener("mouseout",function(){t.removeClass([e],[g])})},b.prototype.getEventType=function(e){return e.indexOf("mouse")>-1?"mouse":"touch"},b.prototype.updateCurrentSeparator=function(e){this.currentSeparator=this.isSeparator(e)?e:e.parentElement},b.prototype.isSeparator=function(e){var t=!0;return(e.classList.contains(v)||e.classList.contains("e-split-line"))&&(t=!1),t},b.prototype.isMouseEvent=function(e){var i=!1;return("mouse"===this.getEventType(e.type)||!t.isNullOrUndefined(e.pointerType)&&"mouse"===this.getEventType(e.pointerType))&&(i=!0),i},b.prototype.updateCursorPosition=function(e,i){if(this.isMouseEvent(e))this.changeCoordinates({x:e.pageX,y:e.pageY},i);else{var n="msie"!==t.Browser.info.name?e.touches[0]:e;this.changeCoordinates({x:n.pageX,y:n.pageY},i)}},b.prototype.changeCoordinates=function(e,t){"previous"===t?this.previousCoordinates=e:this.currentCoordinates=e},b.prototype.wireResizeEvents=function(){t.EventHandler.add(document,"mousemove",this.onMouseMove,this),t.EventHandler.add(document,"mouseup",this.onMouseUp,this);var e="msie"===t.Browser.info.name?"pointermove":"touchmove",i="msie"===t.Browser.info.name?"pointerup":"touchend";t.EventHandler.add(document,e,this.onMouseMove,this),t.EventHandler.add(document,i,this.onMouseUp,this)},b.prototype.unwireResizeEvents=function(){var e="msie"===t.Browser.info.name?"pointermove":"touchmove",i="msie"===t.Browser.info.name?"pointerup":"touchend";t.EventHandler.remove(document,"mousemove",this.onMouseMove),t.EventHandler.remove(document,"mouseup",this.onMouseUp),t.EventHandler.remove(document,e,this.onMouseMove),t.EventHandler.remove(document,i,this.onMouseUp)},b.prototype.onMouseDown=function(e){e.preventDefault();var i=e.target;this.updateCurrentSeparator(i),t.addClass([this.currentSeparator],m),this.updateCursorPosition(e,"previous"),this.getPaneDetails();var n={element:this.element,event:e,pane:[this.previousPane,this.nextPane],index:[this.getPreviousPaneIndex(),this.getNextPaneIndex()],separator:this.currentSeparator,cancel:!1};if(this.trigger("resizeStart",n),!n.cancel)if(this.wireResizeEvents(),this.previousPane.style.flexBasis.indexOf("%")>0||this.nextPane.style.flexBasis.indexOf("%")>0){var s=this.updatePaneFlexBasis(this.previousPane),r=this.updatePaneFlexBasis(this.nextPane);this.totalPercent=s+r,this.totalWidth=this.convertPercentageToPixel(this.totalPercent+"%")}else this.totalWidth="Horizontal"===this.orientation?this.previousPane.offsetWidth+this.nextPane.offsetWidth:this.previousPane.offsetHeight+this.nextPane.offsetHeight},b.prototype.updatePaneFlexBasis=function(e){var t;if(e.style.flexBasis.indexOf("%")>0)t=this.removePercentageUnit(e.style.flexBasis);else if(""!==e.style.flexBasis)t=this.convertPixelToPercentage(this.convertPixelToNumber(e.style.flexBasis));else{var i="Horizontal"===this.orientation?e.offsetWidth+this.currentSeparator.offsetWidth:e.offsetHeight+this.currentSeparator.offsetHeight;t=this.convertPixelToPercentage(i)}return t},b.prototype.removePercentageUnit=function(e){return parseFloat(e.slice(0,e.indexOf("%")))},b.prototype.convertPercentageToPixel=function(e,i){var n,s=e.toString();if(s.indexOf("%")>-1){n=parseFloat(s.slice(0,s.indexOf("%")));var r=void 0;r=t.isNullOrUndefined(i)?"Horizontal"===this.orientation?this.element.offsetWidth:this.element.offsetHeight:this.panesDimensions[this.allPanes.indexOf(i)],n=Math.ceil(r*(n/100))}else n=parseInt(s,10);return n},b.prototype.convertPixelToPercentage=function(e){return e/("Horizontal"===this.orientation?this.element.offsetWidth:this.element.offsetHeight)*100},b.prototype.convertPixelToNumber=function(e){return e.indexOf("p")>-1?parseFloat(e.slice(0,e.indexOf("p"))):parseFloat(e)},b.prototype.calcDragPosition=function(e,t){var i,n;return i="Horizontal"===this.orientation?this.currentCoordinates.x-e:this.currentCoordinates.y-e,n=i/t,(n=n>1?1:n<0?0:n)*t},b.prototype.getSeparatorPosition=function(e){this.updateCursorPosition(e,"current");var t="Horizontal"===this.orientation?this.element.getBoundingClientRect().left:this.element.getBoundingClientRect().top,i="Horizontal"===this.orientation?this.element.offsetWidth:this.element.offsetHeight;return this.calcDragPosition(t,i)},b.prototype.getMinMax=function(e,i,n){var s="min"===n?0:null,r=null;return"min"===n?t.isNullOrUndefined(this.paneSettings[e])||t.isNullOrUndefined(this.paneSettings[e].min)||(r=this.paneSettings[e].min):t.isNullOrUndefined(this.paneSettings[e])||t.isNullOrUndefined(this.paneSettings[e].max)||(r=this.paneSettings[e].max),this.paneSettings.length>0&&!t.isNullOrUndefined(this.paneSettings[e])&&!t.isNullOrUndefined(r)?(r.indexOf("%")>0&&(r=this.convertPercentageToPixel(r).toString()),this.convertPixelToNumber(r)):s},b.prototype.getPreviousPaneIndex=function(){var e=(parseInt(this.currentSeparator.style.order,10)-1)/2;return this.enableRtl?e+1:e},b.prototype.getNextPaneIndex=function(){var e=(parseInt(this.currentSeparator.style.order,10)-1)/2;return this.enableRtl?e:e+1},b.prototype.getPaneDetails=function(){this.order=parseInt(this.currentSeparator.style.order,10),this.previousPane=this.getPrevPane(this.currentSeparator,this.order),this.nextPane=this.getNextPane(this.currentSeparator,this.order),this.prevPaneIndex=this.getPreviousPaneIndex(),this.nextPaneIndex=this.getNextPaneIndex()},b.prototype.getPaneHeight=function(e){return"Horizontal"===this.orientation?e.offsetWidth.toString():e.offsetHeight.toString()},b.prototype.isValidSize=function(e){var i=!1;return!t.isNullOrUndefined(this.paneSettings[e])&&!t.isNullOrUndefined(this.paneSettings[e].size)&&this.paneSettings[e].size.indexOf("%")>-1&&(i=!0),i},b.prototype.getPaneDimensions=function(){this.previousPaneHeightWidth=""===this.previousPane.style.flexBasis?this.getPaneHeight(this.previousPane):this.previousPane.style.flexBasis,this.nextPaneHeightWidth=""===this.nextPane.style.flexBasis?this.getPaneHeight(this.nextPane):this.nextPane.style.flexBasis,this.isValidSize(this.prevPaneIndex)&&(this.previousPaneHeightWidth=this.convertPercentageToPixel(this.previousPaneHeightWidth).toString(),this.updatePrePaneInPercentage=!0),this.isValidSize(this.nextPaneIndex)&&(this.nextPaneHeightWidth=this.convertPercentageToPixel(this.nextPaneHeightWidth).toString(),this.updateNextPaneInPercentage=!0),this.prePaneDimenson=this.convertPixelToNumber(this.previousPaneHeightWidth.toString()),this.nextPaneDimension=this.convertPixelToNumber(this.nextPaneHeightWidth.toString())},b.prototype.checkCoordinates=function(e,t){var i=!0;return e!==this.previousCoordinates.x&&t!==this.previousCoordinates.y||(i=!1),i},b.prototype.isCursorMoved=function(e){return"mouse"===this.getEventType(e.type)||!t.isNullOrUndefined(e.pointerType)&&"mouse"===this.getEventType(e.pointerType)?this.checkCoordinates(e.pageX,e.pageY):"msie"!==t.Browser.info.name?this.checkCoordinates(e.touches[0].pageX,e.touches[0].pageY):this.checkCoordinates(e.pageX,e.pageY)},b.prototype.getBorder=function(){this.border=0;var e="Horizontal"===this.orientation?(this.element.offsetWidth-this.element.clientWidth)/2:(this.element.offsetHeight-this.element.clientHeight)/2;this.border="chrome"!==t.Browser.info.name?this.border:e},b.prototype.onMouseMove=function(e){if(this.isCursorMoved(e)){this.getPaneDetails(),this.getPaneDimensions();var t={element:this.element,event:e,pane:[this.previousPane,this.nextPane],index:[this.prevPaneIndex,this.nextPaneIndex],paneSize:[this.prePaneDimenson,this.nextPaneDimension],separator:this.currentSeparator};this.trigger("resizing",t);var i,n=this.validateDraggedPosition(this.getSeparatorPosition(e),this.prePaneDimenson,this.nextPaneDimension);if(this.getBorder(),i="Horizontal"===this.orientation?this.element.getBoundingClientRect().left+n-this.currentSeparator.getBoundingClientRect().left+this.border:this.element.getBoundingClientRect().top+n-this.currentSeparator.getBoundingClientRect().top+this.border,this.nextPaneHeightWidth="string"==typeof this.nextPaneHeightWidth&&this.nextPaneHeightWidth.indexOf("p")>-1?this.convertPixelToNumber(this.nextPaneHeightWidth):parseInt(this.nextPaneHeightWidth,10),this.prevPaneCurrentWidth=i+this.convertPixelToNumber(this.previousPaneHeightWidth),this.nextPaneCurrentWidth=this.nextPaneHeightWidth-i,this.validateMinMaxValues(),this.nextPaneCurrentWidth<0&&(this.nextPaneCurrentWidth=0),this.prevPaneCurrentWidth<0&&(this.prevPaneCurrentWidth=0),this.nextPaneCurrentWidth+this.prevPaneCurrentWidth>this.totalWidth&&(this.nextPaneCurrentWidth<this.prevPaneCurrentWidth?this.prevPaneCurrentWidth=this.prevPaneCurrentWidth-(this.nextPaneCurrentWidth+this.prevPaneCurrentWidth-this.totalWidth):this.nextPaneCurrentWidth=this.nextPaneCurrentWidth-(this.nextPaneCurrentWidth+this.prevPaneCurrentWidth-this.totalWidth)),this.nextPaneCurrentWidth+this.prevPaneCurrentWidth<this.totalWidth){var s=this.totalWidth-(this.nextPaneCurrentWidth+this.prevPaneCurrentWidth);this.nextPaneCurrentWidth=this.nextPaneCurrentWidth+s}this.calculateCurrentDimensions(),this.addStaticPaneClass(),this.previousPane.style.flexBasis=this.prevPaneCurrentWidth,this.nextPane.style.flexBasis=this.nextPaneCurrentWidth}},b.prototype.validateMinRange=function(e,i,n){var s,r,a=null,o=0;return t.isNullOrUndefined(this.paneSettings[e])||t.isNullOrUndefined(this.paneSettings[e].min)||(a=this.paneSettings[e].min.toString()),t.isNullOrUndefined(a)||(a.indexOf("%")>0&&(a=this.convertPercentageToPixel(a).toString()),i<(s=this.convertPixelToNumber(a))&&(o=i-s<=0?0:i-s,this.totalWidth=this.totalWidth-o,this.totalPercent=this.convertPixelToPercentage(this.totalWidth),r=s)),t.isNullOrUndefined(r)?i:r},b.prototype.validateMaxRange=function(e,i,n){var s,r,a=null;return t.isNullOrUndefined(this.paneSettings[e])||t.isNullOrUndefined(this.paneSettings[e].max)||(a=this.paneSettings[e].max.toString()),t.isNullOrUndefined(a)||(a.indexOf("%")>0&&(a=this.convertPercentageToPixel(a).toString()),i>(s=this.convertPixelToNumber(a))&&(this.totalWidth=this.totalWidth-(i-s),this.totalPercent=this.convertPixelToPercentage(this.totalWidth),r=s)),t.isNullOrUndefined(r)?i:r},b.prototype.validateMinMaxValues=function(){this.prevPaneCurrentWidth=this.validateMinRange(this.prevPaneIndex,this.prevPaneCurrentWidth,this.previousPane),this.nextPaneCurrentWidth=this.validateMinRange(this.nextPaneIndex,this.nextPaneCurrentWidth,this.nextPane),this.prevPaneCurrentWidth=this.validateMaxRange(this.prevPaneIndex,this.prevPaneCurrentWidth,this.previousPane),this.nextPaneCurrentWidth=this.validateMaxRange(this.nextPaneIndex,this.nextPaneCurrentWidth,this.nextPane)},b.prototype.equatePaneWidths=function(){var e;this.prevPaneCurrentWidth+this.nextPaneCurrentWidth>this.totalPercent&&(e=this.prevPaneCurrentWidth+this.nextPaneCurrentWidth-this.totalPercent,this.prevPaneCurrentWidth=this.prevPaneCurrentWidth-e/2+"%",this.nextPaneCurrentWidth=this.nextPaneCurrentWidth-e/2+"%"),this.prevPaneCurrentWidth+this.nextPaneCurrentWidth<this.totalPercent&&(e=this.totalPercent-(this.prevPaneCurrentWidth+this.nextPaneCurrentWidth),this.prevPaneCurrentWidth=this.prevPaneCurrentWidth+e/2+"%",this.nextPaneCurrentWidth=this.nextPaneCurrentWidth+e/2+"%")},b.prototype.calculateCurrentDimensions=function(){this.updatePrePaneInPercentage||this.updateNextPaneInPercentage?(this.prevPaneCurrentWidth=Math.round(Number(Math.round(10*this.convertPixelToPercentage(this.prevPaneCurrentWidth))/10)),this.nextPaneCurrentWidth=Math.round(Number(Math.round(10*this.convertPixelToPercentage(this.nextPaneCurrentWidth))/10)),0===this.prevPaneCurrentWidth&&(this.nextPaneCurrentWidth=this.totalPercent),0===this.nextPaneCurrentWidth&&(this.prevPaneCurrentWidth=this.totalPercent),this.prevPaneCurrentWidth+this.nextPaneCurrentWidth!==this.totalPercent?this.equatePaneWidths():(this.prevPaneCurrentWidth=this.prevPaneCurrentWidth+"%",this.nextPaneCurrentWidth=this.nextPaneCurrentWidth+"%"),this.prevPaneCurrentWidth=this.updatePrePaneInPercentage?this.prevPaneCurrentWidth:this.convertPercentageToPixel(this.prevPaneCurrentWidth)+"px",this.nextPaneCurrentWidth=this.updateNextPaneInPercentage?this.nextPaneCurrentWidth:this.convertPercentageToPixel(this.nextPaneCurrentWidth)+"px",this.updatePrePaneInPercentage=!1,this.updateNextPaneInPercentage=!1):(this.prevPaneCurrentWidth=this.prevPaneCurrentWidth+"px",this.nextPaneCurrentWidth=this.nextPaneCurrentWidth+"px")},b.prototype.addStaticPaneClass=function(){this.previousPane.classList.contains(c)||this.previousPane.classList.add(c),this.nextPane.classList.contains(c)||this.nextPane.classList.add(c)},b.prototype.validateDraggedPosition=function(e,i,n){var s="Horizontal"===this.orientation?this.currentSeparator.offsetLeft:this.currentSeparator.offsetTop,r=s-i,a=n+s,o=this.getMinMax(this.prevPaneIndex,this.previousPane,"min"),h=this.getMinMax(this.nextPaneIndex,this.nextPane,"min"),l=this.getMinMax(this.prevPaneIndex,this.previousPane,"max"),d=this.getMinMax(this.nextPaneIndex,this.nextPane,"max"),p=e;return e>a-h?p=a-h:e<r+o&&(p=r+o),t.isNullOrUndefined(l)?t.isNullOrUndefined(d)||e<a-d&&(p=a-d):e>r+l&&(p=r+l),p},b.prototype.onMouseUp=function(e){t.removeClass([this.currentSeparator],m),this.unwireResizeEvents();var i={event:e,element:this.element,pane:[this.previousPane,this.nextPane],index:[this.prevPaneIndex,this.nextPaneIndex],separator:this.currentSeparator,paneSize:[this.prePaneDimenson,this.nextPaneDimension]};this.trigger("resizeStop",i)},b.prototype.panesDimension=function(e,i){var n,s=i.length;parseInt(this.getHeight(this.element),10),t.isNullOrUndefined(this.paneSettings[e])?t.setStyleAttribute(i[e],{order:2*e}):t.isNullOrUndefined(this.paneSettings[e].size)?(this.sizeFlag=!0,t.setStyleAttribute(i[e],{order:2*e})):(n=this.paneSettings[e].size,e<s&&(t.setStyleAttribute(i[e],{"flex-basis":n,order:2*e}),e<s-1?t.addClass([i[e]],c):this.sizeFlag||(i[e].style.flexBasis=null),e===s-1&&this.sizeFlag&&t.addClass([i[e]],c))),this.paneOrder.push(2*e)},b.prototype.setTemplate=function(e,i){for(var n=[],s=0,r=t.compile(e)({});s<r.length;s++){var a=r[s];n.push(a)}t.append([].slice.call(n),i)},b.prototype.createSplitPane=function(e){for(var i=e.children.length,n=0;n<this.paneSettings.length;n++)if(i<this.paneSettings.length){var s=this.createElement("div");this.element.appendChild(s),i+=1}i=e.children.length;var r=[].slice.call(e.children);if(this.element.setAttribute("aria-orientation",this.orientation),this.element.setAttribute("role","splitter"),this.sizeFlag=!1,i>1)for(n=0;n<i;n++)1===r[n].nodeType&&(this.allPanes.push(r[n]),"Horizontal"===this.orientation?(t.addClass([r[n]],[o,h,P]),this.panesDimension(n,r)):(t.addClass([r[n]],[o,l,P]),this.panesDimension(n,r)),t.isNullOrUndefined(this.paneSettings[n])||t.isNullOrUndefined(this.paneSettings[n].content)||this.setTemplate(this.paneSettings[n].content,r[n]))},b.prototype.destroy=function(){t.detach(this.element),this.element=this.wrapper,this.wrapperParent.appendChild(this.wrapper)},b.prototype.addPaneClass=function(e){return"Horizontal"===this.orientation?t.addClass([e],[o,h,P]):t.addClass([e],[o,l,P]),e},b.prototype.removePaneOrders=function(e){for(var t=document.querySelectorAll("."+e),i=0;i<t.length;i++)t[i].style.removeProperty("order")},b.prototype.setPaneOrder=function(){for(var e=0;e<this.allPanes.length;e++)this.panesDimension(e,this.allPanes)},b.prototype.removeSeparator=function(){for(var e=0;e<this.allBars.length;e++)t.detach(this.allBars[e]);this.allBars=[]},b.prototype.updatePanes=function(){this.setPaneOrder(),this.removeSeparator(),this.addSeparator(this.element)},b.prototype.addPane=function(e,i){var n=this.createElement("div");n=this.addPaneClass(n),i=i>this.allPanes.length+1?this.allPanes.length:i;var s={size:t.isNullOrUndefined(e.size)?"":e.size,min:t.isNullOrUndefined(e.min)?null:e.min,max:t.isNullOrUndefined(e.max)?null:e.max,content:t.isNullOrUndefined(e.content)?"":e.content,resizable:!!t.isNullOrUndefined(e.resizable)||e.resizable};this.paneSettings.splice(i,0,s),"Horizontal"===this.orientation?(this.element.insertBefore(n,this.element.querySelectorAll("."+h)[i]),this.removePaneOrders(h)):(this.element.insertBefore(n,this.element.querySelectorAll("."+l)[i]),this.removePaneOrders(l)),this.allPanes.splice(i,0,n),this.updatePanes(),this.setTemplate(this.paneSettings[i].content,n),this.allPanes[this.allPanes.length-1].classList.remove(c)},b.prototype.removePane=function(e){e=e>this.allPanes.length+1?this.allPanes.length:e;var i="Horizontal"===this.orientation?h:l;t.isNullOrUndefined(this.element.querySelectorAll("."+i)[e])||(t.detach(this.element.querySelectorAll("."+i)[e]),this.allPanes.splice(e,1),this.removePaneOrders(i),this.updatePanes(),this.allPanes[this.allPanes.length-1].classList.remove(c))},n([t.Property("100%")],b.prototype,"height",void 0),n([t.Property("100%")],b.prototype,"width",void 0),n([t.Collection([],S)],b.prototype,"paneSettings",void 0),n([t.Property("Horizontal")],b.prototype,"orientation",void 0),n([t.Property("")],b.prototype,"cssClass",void 0),n([t.Property(!0)],b.prototype,"enabled",void 0),n([t.Property(!1)],b.prototype,"enableRtl",void 0),n([t.Property(null)],b.prototype,"separatorSize",void 0),n([t.Event()],b.prototype,"created",void 0),n([t.Event()],b.prototype,"resizeStart",void 0),n([t.Event()],b.prototype,"resizing",void 0),n([t.Event()],b.prototype,"resizeStop",void 0),b=n([t.NotifyPropertyChanges],b)}(t.Component);e.PaneProperties=S,e.Splitter=b,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=ej2-layouts.umd.min.js.map

dist/es6/ej2-layouts.es2015.js

@@ -30,2 +30,3 @@ import { Browser, ChildProperty, Collection, Component, Event, EventHandler, NotifyPropertyChanges, Property, addClass, append, compile, detach, formatUnit, isNullOrUndefined, removeClass, select, selectAll, setStyleAttribute } from '@syncfusion/ej2-base';
 const E_ICONS = 'e-icons';
+const RESIZABLE_PANE = 'e-resizable';
 /**
@@ -124,34 +125,41 @@ * Interface to configure pane properties such as its content, size, min, max, and resizable.
                 case 'paneSettings':
-                    let paneCounts = Object.keys(newProp.paneSettings);
-                    for (let i = 0; i < paneCounts.length; i++) {
-                        let index = parseInt(Object.keys(newProp.paneSettings)[i], 10);
-                        let changedPropsCount = Object.keys(newProp.paneSettings[index]).length;
-                        for (let j = 0; j < changedPropsCount; j++) {
-                            let property = Object.keys(newProp.paneSettings[index])[j];
-                            let newVal = Object(newProp.paneSettings[index])[property];
-                            index = (this.enableRtl) ? (this.allBars.length - 1) - index : index;
-                            if (property === 'content') {
-                                this.allPanes[index].innerHTML = '';
-                                this.setTemplate(newVal, this.allPanes[index]);
-                            }
-                            if (property === 'resizable') {
-                                EventHandler.remove(this.allBars[index], 'mousedown', this.onMouseDown);
-                                if (newVal) {
-                                    EventHandler.add(this.allBars[index], 'mousedown', this.onMouseDown, this);
-                                    this.currentSeparator = this.allBars[index];
-                                    if (this.isResizable()) {
-                                        this.showResizer(this.allBars[index]);
-                                        this.allBars[index].classList.add(RESIZABLE_BAR);
-                                    }
+                    if (!(newProp.paneSettings instanceof Array && oldProp.paneSettings instanceof Array)) {
+                        let paneCounts = Object.keys(newProp.paneSettings);
+                        for (let i = 0; i < paneCounts.length; i++) {
+                            let index = parseInt(Object.keys(newProp.paneSettings)[i], 10);
+                            let changedPropsCount = Object.keys(newProp.paneSettings[index]).length;
+                            for (let j = 0; j < changedPropsCount; j++) {
+                                let property = Object.keys(newProp.paneSettings[index])[j];
+                                switch (property) {
+                                    case 'content':
+                                        let newValue = Object(newProp.paneSettings[index])[property];
+                                        if (!isNullOrUndefined(newValue)) {
+                                            this.allPanes[index].innerHTML = '';
+                                            this.setTemplate(newValue, this.allPanes[index]);
+                                        }
+                                        break;
+                                    case 'resizable':
+                                        let newVal = Object(newProp.paneSettings[index])[property];
+                                        this.resizableModel(index, newVal);
+                                        break;
+                                    case 'size':
+                                        let newValSize = Object(newProp.paneSettings[index])[property];
+                                        if (newValSize !== '' && !isNullOrUndefined(newValSize)) {
+                                            this.allPanes[index].style.flexBasis = newValSize;
+                                            this.allPanes[index].classList.add(STATIC_PANE);
+                                        }
+                                        break;
                                 }
-                                else {
-                                    this.hideResizer(this.allBars[index]);
-                                    this.allBars[index].classList.remove(RESIZABLE_BAR);
-                                }
                             }
-                            if (property === 'size') {
-                                this.allPanes[index].style.flexBasis = newVal;
-                            }
                         }
                     }
+                    else {
+                        this.destroyPaneSettings();
+                        this.allBars = [];
+                        this.allPanes = [];
+                        this.createSplitPane(this.element);
+                        this.addSeparator(this.element);
+                        this.getPanesDimensions();
+                        this.setRTL(this.enableRtl);
+                    }
                     break;
@@ -197,2 +205,3 @@ case 'enableRtl':
         this.getPanesDimensions();
+        this.setPaneSettings();
         this.setRTL(this.enableRtl);
@@ -242,2 +251,53 @@ }
     }
+    destroyPaneSettings() {
+        [].slice.call(this.element.children).forEach((el) => { detach(el); });
+    }
+    setPaneSettings() {
+        let childCount = this.allPanes.length;
+        let paneCollection = [];
+        let paneValue = {
+            size: '',
+            min: null,
+            max: null,
+            content: '',
+            resizable: true
+        };
+        for (let i = 0; i < childCount; i++) {
+            if (isNullOrUndefined(this.paneSettings[i])) {
+                paneCollection[i] = paneValue;
+            }
+            else {
+                paneCollection[i] = this.paneSettings[i];
+            }
+        }
+        this.setProperties({ 'paneSettings': paneCollection }, true);
+    }
+    resizableModel(index, newVal) {
+        let paneIndex;
+        let i = index;
+        paneIndex = (index === (this.allBars.length)) ? (index - 1) : index;
+        EventHandler.remove(this.allBars[paneIndex], 'mousedown', this.onMouseDown);
+        if (newVal) {
+            EventHandler.add(this.allBars[paneIndex], 'mousedown', this.onMouseDown, this);
+            if (this.isResizable()) {
+                this.showResizer(this.allBars[paneIndex]);
+                removeClass([select('.' + RESIZE_BAR, this.allBars[paneIndex])], HIDE_HANDLER);
+                this.allBars[paneIndex].classList.add(RESIZABLE_BAR);
+                (index === (this.allBars.length)) ? this.allPanes[index].classList.add(RESIZABLE_PANE) :
+                    this.allPanes[paneIndex].classList.add(RESIZABLE_PANE);
+                this.updateResizablePanes(i);
+            }
+        }
+        else {
+            this.updateResizablePanes(i);
+            this.hideResizer(this.allBars[paneIndex]);
+            this.allBars[paneIndex].classList.remove(RESIZABLE_BAR);
+            (index === (this.allBars.length)) ? this.allPanes[index].classList.remove(RESIZABLE_PANE) :
+                this.allPanes[paneIndex].classList.remove(RESIZABLE_PANE);
+        }
+    }
+    updateResizablePanes(index) {
+        this.getPaneDetails();
+        this.isResizable() ? this.allPanes[index].classList.add(RESIZABLE_PANE) : this.allPanes[index].classList.remove(RESIZABLE_PANE);
+    }
     removeDataPrefix(attribute) {
@@ -600,6 +660,2 @@ return attribute.slice(attribute.lastIndexOf('-') + 1);
     }
-    boundingRectValues(pane) {
-        return (this.orientation === 'Horizontal') ? pane.getBoundingClientRect().width :
-            pane.getBoundingClientRect().height;
-    }
     isValidSize(paneIndex) {
@@ -619,7 +675,2 @@ let isValid = false;
             this.nextPane.style.flexBasis;
-        if (this.paneSettings.length < 1) {
-            this.prePaneDimenson = this.boundingRectValues(this.previousPane);
-            this.nextPaneDimension = this.boundingRectValues(this.nextPane);
-            return;
-        }
         if (this.isValidSize(this.prevPaneIndex)) {
@@ -626,0 +677,0 @@ this.previousPaneHeightWidth = this.convertPercentageToPixel(this.previousPaneHeightWidth).toString();

dist/es6/ej2-layouts.es5.js

@@ -43,2 +43,3 @@ import { Browser, ChildProperty, Collection, Component, Event, EventHandler, NotifyPropertyChanges, Property, addClass, append, compile, detach, formatUnit, isNullOrUndefined, removeClass, select, selectAll, setStyleAttribute } from '@syncfusion/ej2-base';
 var E_ICONS = 'e-icons';
+var RESIZABLE_PANE = 'e-resizable';
 /**
@@ -145,34 +146,41 @@ * Interface to configure pane properties such as its content, size, min, max, and resizable.
                 case 'paneSettings':
-                    var paneCounts = Object.keys(newProp.paneSettings);
-                    for (var i = 0; i < paneCounts.length; i++) {
-                        var index = parseInt(Object.keys(newProp.paneSettings)[i], 10);
-                        var changedPropsCount = Object.keys(newProp.paneSettings[index]).length;
-                        for (var j = 0; j < changedPropsCount; j++) {
-                            var property = Object.keys(newProp.paneSettings[index])[j];
-                            var newVal = Object(newProp.paneSettings[index])[property];
-                            index = (this.enableRtl) ? (this.allBars.length - 1) - index : index;
-                            if (property === 'content') {
-                                this.allPanes[index].innerHTML = '';
-                                this.setTemplate(newVal, this.allPanes[index]);
-                            }
-                            if (property === 'resizable') {
-                                EventHandler.remove(this.allBars[index], 'mousedown', this.onMouseDown);
-                                if (newVal) {
-                                    EventHandler.add(this.allBars[index], 'mousedown', this.onMouseDown, this);
-                                    this.currentSeparator = this.allBars[index];
-                                    if (this.isResizable()) {
-                                        this.showResizer(this.allBars[index]);
-                                        this.allBars[index].classList.add(RESIZABLE_BAR);
-                                    }
+                    if (!(newProp.paneSettings instanceof Array && oldProp.paneSettings instanceof Array)) {
+                        var paneCounts = Object.keys(newProp.paneSettings);
+                        for (var i = 0; i < paneCounts.length; i++) {
+                            var index = parseInt(Object.keys(newProp.paneSettings)[i], 10);
+                            var changedPropsCount = Object.keys(newProp.paneSettings[index]).length;
+                            for (var j = 0; j < changedPropsCount; j++) {
+                                var property = Object.keys(newProp.paneSettings[index])[j];
+                                switch (property) {
+                                    case 'content':
+                                        var newValue = Object(newProp.paneSettings[index])[property];
+                                        if (!isNullOrUndefined(newValue)) {
+                                            this.allPanes[index].innerHTML = '';
+                                            this.setTemplate(newValue, this.allPanes[index]);
+                                        }
+                                        break;
+                                    case 'resizable':
+                                        var newVal = Object(newProp.paneSettings[index])[property];
+                                        this.resizableModel(index, newVal);
+                                        break;
+                                    case 'size':
+                                        var newValSize = Object(newProp.paneSettings[index])[property];
+                                        if (newValSize !== '' && !isNullOrUndefined(newValSize)) {
+                                            this.allPanes[index].style.flexBasis = newValSize;
+                                            this.allPanes[index].classList.add(STATIC_PANE);
+                                        }
+                                        break;
                                 }
-                                else {
-                                    this.hideResizer(this.allBars[index]);
-                                    this.allBars[index].classList.remove(RESIZABLE_BAR);
-                                }
                             }
-                            if (property === 'size') {
-                                this.allPanes[index].style.flexBasis = newVal;
-                            }
                         }
                     }
+                    else {
+                        this.destroyPaneSettings();
+                        this.allBars = [];
+                        this.allPanes = [];
+                        this.createSplitPane(this.element);
+                        this.addSeparator(this.element);
+                        this.getPanesDimensions();
+                        this.setRTL(this.enableRtl);
+                    }
                     break;
@@ -218,2 +226,3 @@ case 'enableRtl':
         this.getPanesDimensions();
+        this.setPaneSettings();
         this.setRTL(this.enableRtl);
@@ -263,2 +272,53 @@ };
     };
+    Splitter.prototype.destroyPaneSettings = function () {
+        [].slice.call(this.element.children).forEach(function (el) { detach(el); });
+    };
+    Splitter.prototype.setPaneSettings = function () {
+        var childCount = this.allPanes.length;
+        var paneCollection = [];
+        var paneValue = {
+            size: '',
+            min: null,
+            max: null,
+            content: '',
+            resizable: true
+        };
+        for (var i = 0; i < childCount; i++) {
+            if (isNullOrUndefined(this.paneSettings[i])) {
+                paneCollection[i] = paneValue;
+            }
+            else {
+                paneCollection[i] = this.paneSettings[i];
+            }
+        }
+        this.setProperties({ 'paneSettings': paneCollection }, true);
+    };
+    Splitter.prototype.resizableModel = function (index, newVal) {
+        var paneIndex;
+        var i = index;
+        paneIndex = (index === (this.allBars.length)) ? (index - 1) : index;
+        EventHandler.remove(this.allBars[paneIndex], 'mousedown', this.onMouseDown);
+        if (newVal) {
+            EventHandler.add(this.allBars[paneIndex], 'mousedown', this.onMouseDown, this);
+            if (this.isResizable()) {
+                this.showResizer(this.allBars[paneIndex]);
+                removeClass([select('.' + RESIZE_BAR, this.allBars[paneIndex])], HIDE_HANDLER);
+                this.allBars[paneIndex].classList.add(RESIZABLE_BAR);
+                (index === (this.allBars.length)) ? this.allPanes[index].classList.add(RESIZABLE_PANE) :
+                    this.allPanes[paneIndex].classList.add(RESIZABLE_PANE);
+                this.updateResizablePanes(i);
+            }
+        }
+        else {
+            this.updateResizablePanes(i);
+            this.hideResizer(this.allBars[paneIndex]);
+            this.allBars[paneIndex].classList.remove(RESIZABLE_BAR);
+            (index === (this.allBars.length)) ? this.allPanes[index].classList.remove(RESIZABLE_PANE) :
+                this.allPanes[paneIndex].classList.remove(RESIZABLE_PANE);
+        }
+    };
+    Splitter.prototype.updateResizablePanes = function (index) {
+        this.getPaneDetails();
+        this.isResizable() ? this.allPanes[index].classList.add(RESIZABLE_PANE) : this.allPanes[index].classList.remove(RESIZABLE_PANE);
+    };
     Splitter.prototype.removeDataPrefix = function (attribute) {
@@ -621,6 +681,2 @@ return attribute.slice(attribute.lastIndexOf('-') + 1);
     };
-    Splitter.prototype.boundingRectValues = function (pane) {
-        return (this.orientation === 'Horizontal') ? pane.getBoundingClientRect().width :
-            pane.getBoundingClientRect().height;
-    };
     Splitter.prototype.isValidSize = function (paneIndex) {
@@ -640,7 +696,2 @@ var isValid = false;
             this.nextPane.style.flexBasis;
-        if (this.paneSettings.length < 1) {
-            this.prePaneDimenson = this.boundingRectValues(this.previousPane);
-            this.nextPaneDimension = this.boundingRectValues(this.nextPane);
-            return;
-        }
         if (this.isValidSize(this.prevPaneIndex)) {
@@ -647,0 +698,0 @@ this.previousPaneHeightWidth = this.convertPercentageToPixel(this.previousPaneHeightWidth).toString();

dist/global/ej2-layouts.min.js

 /*!
 *  filename: ej2-layouts.min.js
-*  version : 16.4.54
+*  version : 16.4.55
 *  Copyright Syncfusion Inc. 2001 - 2019. All rights reserved.
@@ -10,3 +10,3 @@ *  Use of this code is subject to the terms of our license.
 */
-this.ej=this.ej||{},this.ej.layouts=function(e,t){"use strict";var i=function(){var e=function(t,i){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var i in t)t.hasOwnProperty(i)&&(e[i]=t[i])})(t,i)};return function(t,i){function n(){this.constructor=t}e(t,i),t.prototype=null===i?Object.create(i):(n.prototype=i.prototype,new n)}}(),n=function(e,t,i,n){var s,r=arguments.length,a=r<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,n);else for(var o=e.length-1;o>=0;o--)(s=e[o])&&(a=(r<3?s(a):r>3?s(t,i,a):s(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a},s="e-pane",r="e-pane-horizontal",a="e-pane-vertical",o="e-split-bar-horizontal",h="e-split-bar-vertical",l="e-static-pane",d="e-resize-handler",p=function(e){function s(){return null!==e&&e.apply(this,arguments)||this}return i(s,e),n([t.Property()],s.prototype,"size",void 0),n([t.Property(!0)],s.prototype,"resizable",void 0),n([t.Property(null)],s.prototype,"min",void 0),n([t.Property(null)],s.prototype,"max",void 0),n([t.Property()],s.prototype,"content",void 0),s}(t.ChildProperty),u=function(e){function u(t,i){var n=e.call(this,t,i)||this;return n.allPanes=[],n.paneOrder=[],n.separatorOrder=[],n.allBars=[],n.previousCoordinates={},n.currentCoordinates={},n.updatePrePaneInPercentage=!1,n.updateNextPaneInPercentage=!1,n.panesDimensions=[],n.border=0,n.validDataAttributes=["data-size","data-min","data-max","data-collapsible","data-resizable","data-content"],n.validElementAttributes=["data-orientation","data-width","data-height"],n}return i(u,e),u.prototype.onPropertyChanged=function(e,i){if(this.element.classList.contains("e-splitter"))for(var n=0,s=Object.keys(e);n<s.length;n++)switch(s[n]){case"height":this.setSplitterSize(this.element,e.height,"height");break;case"width":this.setSplitterSize(this.element,e.width,"width");break;case"cssClass":this.setCssClass(e.cssClass);break;case"enabled":this.isEnabled(this.enabled);break;case"separatorSize":this.setSeparatorSize(e.separatorSize);break;case"orientation":this.changeOrientation(e.orientation);break;case"paneSettings":for(var r=Object.keys(e.paneSettings),a=0;a<r.length;a++)for(var o=parseInt(Object.keys(e.paneSettings)[a],10),h=Object.keys(e.paneSettings[o]).length,l=0;l<h;l++){var d=Object.keys(e.paneSettings[o])[l],p=Object(e.paneSettings[o])[d];o=this.enableRtl?this.allBars.length-1-o:o,"content"===d&&(this.allPanes[o].innerHTML="",this.setTemplate(p,this.allPanes[o])),"resizable"===d&&(t.EventHandler.remove(this.allBars[o],"mousedown",this.onMouseDown),p?(t.EventHandler.add(this.allBars[o],"mousedown",this.onMouseDown,this),this.currentSeparator=this.allBars[o],this.isResizable()&&(this.showResizer(this.allBars[o]),this.allBars[o].classList.add("e-resizable-split-bar"))):(this.hideResizer(this.allBars[o]),this.allBars[o].classList.remove("e-resizable-split-bar"))),"size"===d&&(this.allPanes[o].style.flexBasis=p)}break;case"enableRtl":this.setRTL(e.enableRtl)}},u.prototype.preRender=function(){this.wrapper=this.element.cloneNode(!0),this.wrapperParent=this.element.parentElement,t.removeClass([this.wrapper],["e-control","e-lib","e-splitter"]);var e="Horizontal"===this.orientation?"e-splitter-horizontal":"e-splitter-vertical";t.addClass([this.element],e),t.Browser.isDevice&&t.addClass([this.element],"e-splitter-touch")},u.prototype.getPersistData=function(){return this.addOnPersist([])},u.prototype.getModuleName=function(){return"splitter"},u.prototype.render=function(){this.checkDataAttributes(),this.setCssClass(this.cssClass),this.isEnabled(this.enabled),this.setDimension(this.getHeight(this.element),this.getWidth(this.element)),this.createSplitPane(this.element),this.addSeparator(this.element),this.getPanesDimensions(),this.setRTL(this.enableRtl)},u.prototype.checkDataAttributes=function(){for(var e,i,n=0;n<this.validElementAttributes.length;n++)i=this.element.getAttribute(this.validElementAttributes[n]),t.isNullOrUndefined(i)||(this[e=this.removeDataPrefix(this.validElementAttributes[n])]=i);for(var s=0;s<this.element.children.length;s++)for(var r=0;r<this.validDataAttributes.length;r++)if(i=this.element.children[s].getAttribute(this.validDataAttributes[r]),!t.isNullOrUndefined(i)){i="collapsible"===(e=this.removeDataPrefix(this.validDataAttributes[r]))||"resizable"===e?"true"===i:i,t.isNullOrUndefined(this.paneSettings[s])&&(this.paneSettings[s]={size:"",min:null,max:null,content:"",resizable:!0});var a=this.paneSettings[s][e];"resizable"===e&&this.paneSettings[s].resizable&&(this.paneSettings[s][e]=i),(t.isNullOrUndefined(a)||""===a)&&(this.paneSettings[s][e]=i)}},u.prototype.removeDataPrefix=function(e){return e.slice(e.lastIndexOf("-")+1)},u.prototype.setRTL=function(e){e?t.addClass([this.element],"e-rtl"):t.removeClass([this.element],"e-rtl")},u.prototype.setSplitterSize=function(e,i,n){var s="width"===n?{width:t.formatUnit(i)}:{height:t.formatUnit(i)};t.setStyleAttribute(e,s)},u.prototype.getPanesDimensions=function(){for(var e=0;e<this.allPanes.length;e++)"Horizontal"===this.orientation?this.panesDimensions.push(this.allPanes[e].getBoundingClientRect().width):this.panesDimensions.push(this.allPanes[e].getBoundingClientRect().height)},u.prototype.setCssClass=function(e){""!==e&&t.addClass([this.element],e.split(" "))},u.prototype.hideResizer=function(e){t.addClass([t.select("."+d,e)],"e-hide-handler")},u.prototype.showResizer=function(e){t.removeClass([t.select("."+d,e)],"e-hide-handler")},u.prototype.isEnabled=function(e){e?t.removeClass([this.element],"e-disabled"):t.addClass([this.element],"e-disabled")},u.prototype.setSeparatorSize=function(e){for(var i=t.isNullOrUndefined(e)?"auto":e+"px",n="Horizontal"===this.orientation?o:h,s=0;s<this.allBars.length;s++){var r=t.selectAll("."+n,this.element)[s],a=t.selectAll("."+d,r)[0];"Horizontal"===this.orientation?(r.style.width=i,t.isNullOrUndefined(a)||(a.style.width=i)):(r.style.height=i,t.isNullOrUndefined(a)||(a.style.height=i))}},u.prototype.changeOrientation=function(e){var t="Vertical"===e;this.element.classList.remove(t?"e-splitter-horizontal":"e-splitter-vertical"),this.element.classList.add(t?"e-splitter-vertical":"e-splitter-horizontal"),this.element.removeAttribute("aria-orientation"),this.element.setAttribute("aria-orientation",e);for(i=0;i<this.allPanes.length;i++)this.allPanes[i].classList.remove(t?r:a),this.allPanes[i].classList.add(t?a:r);for(var i=0;i<this.allBars.length;i++)this.allBars[i].classList.remove(t?o:h),this.allBars[i].classList.add(t?h:o)},u.prototype.getPrevPane=function(e,t){var i=this.enableRtl&&"Horizontal"===this.orientation?(t-1)/2+1:(t-1)/2;return e.parentElement.children[i]},u.prototype.getNextPane=function(e,t){var i=this.enableRtl&&"Horizontal"===this.orientation?(t-1)/2:(t-1)/2+1;return e.parentElement.children[i]},u.prototype.addResizeHandler=function(e){var i=this.createElement("div");t.addClass([i],[d,"e-icons"]);var n=t.isNullOrUndefined(this.separatorSize)?"1px":this.separatorSize+"px";"Horizontal"===this.orientation?i.style.width=n:i.style.height=n,e.appendChild(i)},u.prototype.getHeight=function(e){this.height;return""!==e.style.height&&"100%"===this.height?e.style.height:this.height},u.prototype.getWidth=function(e){this.width;return""!==e.style.width&&"100%"===this.width?e.style.width:this.width},u.prototype.setDimension=function(e,i){t.setStyleAttribute(this.element,{height:e,width:i})},u.prototype.createSeparator=function(e){var i=this.createElement("div");return this.allBars.push(i),"Horizontal"===this.orientation?(t.addClass([i],["e-split-bar",o]),i.style.width=t.isNullOrUndefined(this.separatorSize)?"auto":this.separatorSize+"px"):(t.addClass([i],["e-split-bar",h]),i.style.height=t.isNullOrUndefined(this.separatorSize)?"auto":this.separatorSize+"px"),this.addMouseActions(i),this.addResizeHandler(i),i},u.prototype.addSeparator=function(e){for(var i=this.allPanes.length,n=e.children,s=0;s<i;s++)if(s<i-1){var r=this.createSeparator(s);if(t.setStyleAttribute(r,{order:2*s+1}),this.separatorOrder.push(2*s+1),n[s].parentNode.appendChild(r),this.currentSeparator=r,r.setAttribute("role","separator"),this.isResizable()){t.EventHandler.add(r,"mousedown",this.onMouseDown,this);var a="msie"===t.Browser.info.name?"pointerdown":"touchstart";t.EventHandler.add(r,a,this.onMouseDown,this),r.classList.add("e-resizable-split-bar")}else this.hideResizer(r)}},u.prototype.isResizable=function(){var e=!1;return(!t.isNullOrUndefined(this.paneSettings[this.getPreviousPaneIndex()])&&this.paneSettings[this.getPreviousPaneIndex()].resizable&&!t.isNullOrUndefined(this.paneSettings[this.getNextPaneIndex()])&&this.paneSettings[this.getNextPaneIndex()].resizable||t.isNullOrUndefined(this.paneSettings[this.getNextPaneIndex()]))&&(e=!0),e},u.prototype.addMouseActions=function(e){e.addEventListener("mouseover",function(){t.addClass([e],["e-split-bar-hover"])}),e.addEventListener("mouseout",function(){t.removeClass([e],["e-split-bar-hover"])})},u.prototype.getEventType=function(e){return e.indexOf("mouse")>-1?"mouse":"touch"},u.prototype.updateCurrentSeparator=function(e){this.currentSeparator=this.isSeparator(e)?e:e.parentElement},u.prototype.isSeparator=function(e){var t=!0;return(e.classList.contains(d)||e.classList.contains("e-split-line"))&&(t=!1),t},u.prototype.isMouseEvent=function(e){var i=!1;return("mouse"===this.getEventType(e.type)||!t.isNullOrUndefined(e.pointerType)&&"mouse"===this.getEventType(e.pointerType))&&(i=!0),i},u.prototype.updateCursorPosition=function(e,i){if(this.isMouseEvent(e))this.changeCoordinates({x:e.pageX,y:e.pageY},i);else{var n="msie"!==t.Browser.info.name?e.touches[0]:e;this.changeCoordinates({x:n.pageX,y:n.pageY},i)}},u.prototype.changeCoordinates=function(e,t){"previous"===t?this.previousCoordinates=e:this.currentCoordinates=e},u.prototype.wireResizeEvents=function(){t.EventHandler.add(document,"mousemove",this.onMouseMove,this),t.EventHandler.add(document,"mouseup",this.onMouseUp,this);var e="msie"===t.Browser.info.name?"pointermove":"touchmove",i="msie"===t.Browser.info.name?"pointerup":"touchend";t.EventHandler.add(document,e,this.onMouseMove,this),t.EventHandler.add(document,i,this.onMouseUp,this)},u.prototype.unwireResizeEvents=function(){var e="msie"===t.Browser.info.name?"pointermove":"touchmove",i="msie"===t.Browser.info.name?"pointerup":"touchend";t.EventHandler.remove(document,"mousemove",this.onMouseMove),t.EventHandler.remove(document,"mouseup",this.onMouseUp),t.EventHandler.remove(document,e,this.onMouseMove),t.EventHandler.remove(document,i,this.onMouseUp)},u.prototype.onMouseDown=function(e){e.preventDefault();var i=e.target;this.updateCurrentSeparator(i),t.addClass([this.currentSeparator],"e-split-bar-active"),this.updateCursorPosition(e,"previous"),this.getPaneDetails();var n={element:this.element,event:e,pane:[this.previousPane,this.nextPane],index:[this.getPreviousPaneIndex(),this.getNextPaneIndex()],separator:this.currentSeparator,cancel:!1};if(this.trigger("resizeStart",n),!n.cancel)if(this.wireResizeEvents(),this.previousPane.style.flexBasis.indexOf("%")>0||this.nextPane.style.flexBasis.indexOf("%")>0){var s=this.updatePaneFlexBasis(this.previousPane),r=this.updatePaneFlexBasis(this.nextPane);this.totalPercent=s+r,this.totalWidth=this.convertPercentageToPixel(this.totalPercent+"%")}else this.totalWidth="Horizontal"===this.orientation?this.previousPane.offsetWidth+this.nextPane.offsetWidth:this.previousPane.offsetHeight+this.nextPane.offsetHeight},u.prototype.updatePaneFlexBasis=function(e){var t;if(e.style.flexBasis.indexOf("%")>0)t=this.removePercentageUnit(e.style.flexBasis);else if(""!==e.style.flexBasis)t=this.convertPixelToPercentage(this.convertPixelToNumber(e.style.flexBasis));else{var i="Horizontal"===this.orientation?e.offsetWidth+this.currentSeparator.offsetWidth:e.offsetHeight+this.currentSeparator.offsetHeight;t=this.convertPixelToPercentage(i)}return t},u.prototype.removePercentageUnit=function(e){return parseFloat(e.slice(0,e.indexOf("%")))},u.prototype.convertPercentageToPixel=function(e,i){var n,s=e.toString();if(s.indexOf("%")>-1){n=parseFloat(s.slice(0,s.indexOf("%")));var r=void 0;r=t.isNullOrUndefined(i)?"Horizontal"===this.orientation?this.element.offsetWidth:this.element.offsetHeight:this.panesDimensions[this.allPanes.indexOf(i)],n=Math.ceil(r*(n/100))}else n=parseInt(s,10);return n},u.prototype.convertPixelToPercentage=function(e){return e/("Horizontal"===this.orientation?this.element.offsetWidth:this.element.offsetHeight)*100},u.prototype.convertPixelToNumber=function(e){return e.indexOf("p")>-1?parseFloat(e.slice(0,e.indexOf("p"))):parseFloat(e)},u.prototype.calcDragPosition=function(e,t){var i,n;return i="Horizontal"===this.orientation?this.currentCoordinates.x-e:this.currentCoordinates.y-e,n=i/t,(n=n>1?1:n<0?0:n)*t},u.prototype.getSeparatorPosition=function(e){this.updateCursorPosition(e,"current");var t="Horizontal"===this.orientation?this.element.getBoundingClientRect().left:this.element.getBoundingClientRect().top,i="Horizontal"===this.orientation?this.element.offsetWidth:this.element.offsetHeight;return this.calcDragPosition(t,i)},u.prototype.getMinMax=function(e,i,n){var s="min"===n?0:null,r=null;return"min"===n?t.isNullOrUndefined(this.paneSettings[e])||t.isNullOrUndefined(this.paneSettings[e].min)||(r=this.paneSettings[e].min):t.isNullOrUndefined(this.paneSettings[e])||t.isNullOrUndefined(this.paneSettings[e].max)||(r=this.paneSettings[e].max),this.paneSettings.length>0&&!t.isNullOrUndefined(this.paneSettings[e])&&!t.isNullOrUndefined(r)?(r.indexOf("%")>0&&(r=this.convertPercentageToPixel(r).toString()),this.convertPixelToNumber(r)):s},u.prototype.getPreviousPaneIndex=function(){var e=(parseInt(this.currentSeparator.style.order,10)-1)/2;return this.enableRtl?e+1:e},u.prototype.getNextPaneIndex=function(){var e=(parseInt(this.currentSeparator.style.order,10)-1)/2;return this.enableRtl?e:e+1},u.prototype.getPaneDetails=function(){this.order=parseInt(this.currentSeparator.style.order,10),this.previousPane=this.getPrevPane(this.currentSeparator,this.order),this.nextPane=this.getNextPane(this.currentSeparator,this.order),this.prevPaneIndex=this.getPreviousPaneIndex(),this.nextPaneIndex=this.getNextPaneIndex()},u.prototype.getPaneHeight=function(e){return"Horizontal"===this.orientation?e.offsetWidth.toString():e.offsetHeight.toString()},u.prototype.boundingRectValues=function(e){return"Horizontal"===this.orientation?e.getBoundingClientRect().width:e.getBoundingClientRect().height},u.prototype.isValidSize=function(e){var i=!1;return!t.isNullOrUndefined(this.paneSettings[e])&&!t.isNullOrUndefined(this.paneSettings[e].size)&&this.paneSettings[e].size.indexOf("%")>-1&&(i=!0),i},u.prototype.getPaneDimensions=function(){if(this.previousPaneHeightWidth=""===this.previousPane.style.flexBasis?this.getPaneHeight(this.previousPane):this.previousPane.style.flexBasis,this.nextPaneHeightWidth=""===this.nextPane.style.flexBasis?this.getPaneHeight(this.nextPane):this.nextPane.style.flexBasis,this.paneSettings.length<1)return this.prePaneDimenson=this.boundingRectValues(this.previousPane),void(this.nextPaneDimension=this.boundingRectValues(this.nextPane));this.isValidSize(this.prevPaneIndex)&&(this.previousPaneHeightWidth=this.convertPercentageToPixel(this.previousPaneHeightWidth).toString(),this.updatePrePaneInPercentage=!0),this.isValidSize(this.nextPaneIndex)&&(this.nextPaneHeightWidth=this.convertPercentageToPixel(this.nextPaneHeightWidth).toString(),this.updateNextPaneInPercentage=!0),this.prePaneDimenson=this.convertPixelToNumber(this.previousPaneHeightWidth.toString()),this.nextPaneDimension=this.convertPixelToNumber(this.nextPaneHeightWidth.toString())},u.prototype.checkCoordinates=function(e,t){var i=!0;return e!==this.previousCoordinates.x&&t!==this.previousCoordinates.y||(i=!1),i},u.prototype.isCursorMoved=function(e){return"mouse"===this.getEventType(e.type)||!t.isNullOrUndefined(e.pointerType)&&"mouse"===this.getEventType(e.pointerType)?this.checkCoordinates(e.pageX,e.pageY):"msie"!==t.Browser.info.name?this.checkCoordinates(e.touches[0].pageX,e.touches[0].pageY):this.checkCoordinates(e.pageX,e.pageY)},u.prototype.getBorder=function(){this.border=0;var e="Horizontal"===this.orientation?(this.element.offsetWidth-this.element.clientWidth)/2:(this.element.offsetHeight-this.element.clientHeight)/2;this.border="chrome"!==t.Browser.info.name?this.border:e},u.prototype.onMouseMove=function(e){if(this.isCursorMoved(e)){this.getPaneDetails(),this.getPaneDimensions();var t={element:this.element,event:e,pane:[this.previousPane,this.nextPane],index:[this.prevPaneIndex,this.nextPaneIndex],paneSize:[this.prePaneDimenson,this.nextPaneDimension],separator:this.currentSeparator};this.trigger("resizing",t);var i,n=this.validateDraggedPosition(this.getSeparatorPosition(e),this.prePaneDimenson,this.nextPaneDimension);if(this.getBorder(),i="Horizontal"===this.orientation?this.element.getBoundingClientRect().left+n-this.currentSeparator.getBoundingClientRect().left+this.border:this.element.getBoundingClientRect().top+n-this.currentSeparator.getBoundingClientRect().top+this.border,this.nextPaneHeightWidth="string"==typeof this.nextPaneHeightWidth&&this.nextPaneHeightWidth.indexOf("p")>-1?this.convertPixelToNumber(this.nextPaneHeightWidth):parseInt(this.nextPaneHeightWidth,10),this.prevPaneCurrentWidth=i+this.convertPixelToNumber(this.previousPaneHeightWidth),this.nextPaneCurrentWidth=this.nextPaneHeightWidth-i,this.validateMinMaxValues(),this.nextPaneCurrentWidth<0&&(this.nextPaneCurrentWidth=0),this.prevPaneCurrentWidth<0&&(this.prevPaneCurrentWidth=0),this.nextPaneCurrentWidth+this.prevPaneCurrentWidth>this.totalWidth&&(this.nextPaneCurrentWidth<this.prevPaneCurrentWidth?this.prevPaneCurrentWidth=this.prevPaneCurrentWidth-(this.nextPaneCurrentWidth+this.prevPaneCurrentWidth-this.totalWidth):this.nextPaneCurrentWidth=this.nextPaneCurrentWidth-(this.nextPaneCurrentWidth+this.prevPaneCurrentWidth-this.totalWidth)),this.nextPaneCurrentWidth+this.prevPaneCurrentWidth<this.totalWidth){var s=this.totalWidth-(this.nextPaneCurrentWidth+this.prevPaneCurrentWidth);this.nextPaneCurrentWidth=this.nextPaneCurrentWidth+s}this.calculateCurrentDimensions(),this.addStaticPaneClass(),this.previousPane.style.flexBasis=this.prevPaneCurrentWidth,this.nextPane.style.flexBasis=this.nextPaneCurrentWidth}},u.prototype.validateMinRange=function(e,i,n){var s,r,a=null,o=0;return t.isNullOrUndefined(this.paneSettings[e])||t.isNullOrUndefined(this.paneSettings[e].min)||(a=this.paneSettings[e].min.toString()),t.isNullOrUndefined(a)||(a.indexOf("%")>0&&(a=this.convertPercentageToPixel(a).toString()),i<(s=this.convertPixelToNumber(a))&&(o=i-s<=0?0:i-s,this.totalWidth=this.totalWidth-o,this.totalPercent=this.convertPixelToPercentage(this.totalWidth),r=s)),t.isNullOrUndefined(r)?i:r},u.prototype.validateMaxRange=function(e,i,n){var s,r,a=null;return t.isNullOrUndefined(this.paneSettings[e])||t.isNullOrUndefined(this.paneSettings[e].max)||(a=this.paneSettings[e].max.toString()),t.isNullOrUndefined(a)||(a.indexOf("%")>0&&(a=this.convertPercentageToPixel(a).toString()),i>(s=this.convertPixelToNumber(a))&&(this.totalWidth=this.totalWidth-(i-s),this.totalPercent=this.convertPixelToPercentage(this.totalWidth),r=s)),t.isNullOrUndefined(r)?i:r},u.prototype.validateMinMaxValues=function(){this.prevPaneCurrentWidth=this.validateMinRange(this.prevPaneIndex,this.prevPaneCurrentWidth,this.previousPane),this.nextPaneCurrentWidth=this.validateMinRange(this.nextPaneIndex,this.nextPaneCurrentWidth,this.nextPane),this.prevPaneCurrentWidth=this.validateMaxRange(this.prevPaneIndex,this.prevPaneCurrentWidth,this.previousPane),this.nextPaneCurrentWidth=this.validateMaxRange(this.nextPaneIndex,this.nextPaneCurrentWidth,this.nextPane)},u.prototype.equatePaneWidths=function(){var e;this.prevPaneCurrentWidth+this.nextPaneCurrentWidth>this.totalPercent&&(e=this.prevPaneCurrentWidth+this.nextPaneCurrentWidth-this.totalPercent,this.prevPaneCurrentWidth=this.prevPaneCurrentWidth-e/2+"%",this.nextPaneCurrentWidth=this.nextPaneCurrentWidth-e/2+"%"),this.prevPaneCurrentWidth+this.nextPaneCurrentWidth<this.totalPercent&&(e=this.totalPercent-(this.prevPaneCurrentWidth+this.nextPaneCurrentWidth),this.prevPaneCurrentWidth=this.prevPaneCurrentWidth+e/2+"%",this.nextPaneCurrentWidth=this.nextPaneCurrentWidth+e/2+"%")},u.prototype.calculateCurrentDimensions=function(){this.updatePrePaneInPercentage||this.updateNextPaneInPercentage?(this.prevPaneCurrentWidth=Math.round(Number(Math.round(10*this.convertPixelToPercentage(this.prevPaneCurrentWidth))/10)),this.nextPaneCurrentWidth=Math.round(Number(Math.round(10*this.convertPixelToPercentage(this.nextPaneCurrentWidth))/10)),0===this.prevPaneCurrentWidth&&(this.nextPaneCurrentWidth=this.totalPercent),0===this.nextPaneCurrentWidth&&(this.prevPaneCurrentWidth=this.totalPercent),this.prevPaneCurrentWidth+this.nextPaneCurrentWidth!==this.totalPercent?this.equatePaneWidths():(this.prevPaneCurrentWidth=this.prevPaneCurrentWidth+"%",this.nextPaneCurrentWidth=this.nextPaneCurrentWidth+"%"),this.prevPaneCurrentWidth=this.updatePrePaneInPercentage?this.prevPaneCurrentWidth:this.convertPercentageToPixel(this.prevPaneCurrentWidth)+"px",this.nextPaneCurrentWidth=this.updateNextPaneInPercentage?this.nextPaneCurrentWidth:this.convertPercentageToPixel(this.nextPaneCurrentWidth)+"px",this.updatePrePaneInPercentage=!1,this.updateNextPaneInPercentage=!1):(this.prevPaneCurrentWidth=this.prevPaneCurrentWidth+"px",this.nextPaneCurrentWidth=this.nextPaneCurrentWidth+"px")},u.prototype.addStaticPaneClass=function(){this.previousPane.classList.contains(l)||this.previousPane.classList.add(l),this.nextPane.classList.contains(l)||this.nextPane.classList.add(l)},u.prototype.validateDraggedPosition=function(e,i,n){var s="Horizontal"===this.orientation?this.currentSeparator.offsetLeft:this.currentSeparator.offsetTop,r=s-i,a=n+s,o=this.getMinMax(this.prevPaneIndex,this.previousPane,"min"),h=this.getMinMax(this.nextPaneIndex,this.nextPane,"min"),l=this.getMinMax(this.prevPaneIndex,this.previousPane,"max"),d=this.getMinMax(this.nextPaneIndex,this.nextPane,"max"),p=e;return e>a-h?p=a-h:e<r+o&&(p=r+o),t.isNullOrUndefined(l)?t.isNullOrUndefined(d)||e<a-d&&(p=a-d):e>r+l&&(p=r+l),p},u.prototype.onMouseUp=function(e){t.removeClass([this.currentSeparator],"e-split-bar-active"),this.unwireResizeEvents();var i={event:e,element:this.element,pane:[this.previousPane,this.nextPane],index:[this.prevPaneIndex,this.nextPaneIndex],separator:this.currentSeparator,paneSize:[this.prePaneDimenson,this.nextPaneDimension]};this.trigger("resizeStop",i)},u.prototype.panesDimension=function(e,i){var n,s=i.length;parseInt(this.getHeight(this.element),10),t.isNullOrUndefined(this.paneSettings[e])?t.setStyleAttribute(i[e],{order:2*e}):t.isNullOrUndefined(this.paneSettings[e].size)?(this.sizeFlag=!0,t.setStyleAttribute(i[e],{order:2*e})):(n=this.paneSettings[e].size,e<s&&(t.setStyleAttribute(i[e],{"flex-basis":n,order:2*e}),e<s-1?t.addClass([i[e]],l):this.sizeFlag||(i[e].style.flexBasis=null),e===s-1&&this.sizeFlag&&t.addClass([i[e]],l))),this.paneOrder.push(2*e)},u.prototype.setTemplate=function(e,i){for(var n=[],s=0,r=t.compile(e)({});s<r.length;s++){var a=r[s];n.push(a)}t.append([].slice.call(n),i)},u.prototype.createSplitPane=function(e){for(var i=e.children.length,n=0;n<this.paneSettings.length;n++)if(i<this.paneSettings.length){var o=this.createElement("div");this.element.appendChild(o),i+=1}i=e.children.length;var h=[].slice.call(e.children);if(this.element.setAttribute("aria-orientation",this.orientation),this.element.setAttribute("role","splitter"),this.sizeFlag=!1,i>1)for(n=0;n<i;n++)1===h[n].nodeType&&(this.allPanes.push(h[n]),"Horizontal"===this.orientation?(t.addClass([h[n]],[s,r,"e-scrollable"]),this.panesDimension(n,h)):(t.addClass([h[n]],[s,a,"e-scrollable"]),this.panesDimension(n,h)),t.isNullOrUndefined(this.paneSettings[n])||t.isNullOrUndefined(this.paneSettings[n].content)||this.setTemplate(this.paneSettings[n].content,h[n]))},u.prototype.destroy=function(){t.detach(this.element),this.element=this.wrapper,this.wrapperParent.appendChild(this.wrapper)},u.prototype.addPaneClass=function(e){return"Horizontal"===this.orientation?t.addClass([e],[s,r,"e-scrollable"]):t.addClass([e],[s,a,"e-scrollable"]),e},u.prototype.removePaneOrders=function(e){for(var t=document.querySelectorAll("."+e),i=0;i<t.length;i++)t[i].style.removeProperty("order")},u.prototype.setPaneOrder=function(){for(var e=0;e<this.allPanes.length;e++)this.panesDimension(e,this.allPanes)},u.prototype.removeSeparator=function(){for(var e=0;e<this.allBars.length;e++)t.detach(this.allBars[e]);this.allBars=[]},u.prototype.updatePanes=function(){this.setPaneOrder(),this.removeSeparator(),this.addSeparator(this.element)},u.prototype.addPane=function(e,i){var n=this.createElement("div");n=this.addPaneClass(n),i=i>this.allPanes.length+1?this.allPanes.length:i;var s={size:t.isNullOrUndefined(e.size)?"":e.size,min:t.isNullOrUndefined(e.min)?null:e.min,max:t.isNullOrUndefined(e.max)?null:e.max,content:t.isNullOrUndefined(e.content)?"":e.content,resizable:!!t.isNullOrUndefined(e.resizable)||e.resizable};this.paneSettings.splice(i,0,s),"Horizontal"===this.orientation?(this.element.insertBefore(n,this.element.querySelectorAll("."+r)[i]),this.removePaneOrders(r)):(this.element.insertBefore(n,this.element.querySelectorAll("."+a)[i]),this.removePaneOrders(a)),this.allPanes.splice(i,0,n),this.updatePanes(),this.setTemplate(this.paneSettings[i].content,n),this.allPanes[this.allPanes.length-1].classList.remove(l)},u.prototype.removePane=function(e){e=e>this.allPanes.length+1?this.allPanes.length:e;var i="Horizontal"===this.orientation?r:a;t.isNullOrUndefined(this.element.querySelectorAll("."+i)[e])||(t.detach(this.element.querySelectorAll("."+i)[e]),this.allPanes.splice(e,1),this.removePaneOrders(i),this.updatePanes(),this.allPanes[this.allPanes.length-1].classList.remove(l))},n([t.Property("100%")],u.prototype,"height",void 0),n([t.Property("100%")],u.prototype,"width",void 0),n([t.Collection([],p)],u.prototype,"paneSettings",void 0),n([t.Property("Horizontal")],u.prototype,"orientation",void 0),n([t.Property("")],u.prototype,"cssClass",void 0),n([t.Property(!0)],u.prototype,"enabled",void 0),n([t.Property(!1)],u.prototype,"enableRtl",void 0),n([t.Property(null)],u.prototype,"separatorSize",void 0),n([t.Event()],u.prototype,"created",void 0),n([t.Event()],u.prototype,"resizeStart",void 0),n([t.Event()],u.prototype,"resizing",void 0),n([t.Event()],u.prototype,"resizeStop",void 0),u=n([t.NotifyPropertyChanges],u)}(t.Component);return e.PaneProperties=p,e.Splitter=u,e}({},ej.base),this.ejs=ej;
+this.ej=this.ej||{},this.ej.layouts=function(e,t){"use strict";var i=function(){var e=function(t,i){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var i in t)t.hasOwnProperty(i)&&(e[i]=t[i])})(t,i)};return function(t,i){function n(){this.constructor=t}e(t,i),t.prototype=null===i?Object.create(i):(n.prototype=i.prototype,new n)}}(),n=function(e,t,i,n){var s,r=arguments.length,a=r<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,n);else for(var o=e.length-1;o>=0;o--)(s=e[o])&&(a=(r<3?s(a):r>3?s(t,i,a):s(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a},s="e-pane",r="e-pane-horizontal",a="e-pane-vertical",o="e-split-bar-horizontal",h="e-split-bar-vertical",l="e-static-pane",d="e-resize-handler",p=function(e){function s(){return null!==e&&e.apply(this,arguments)||this}return i(s,e),n([t.Property()],s.prototype,"size",void 0),n([t.Property(!0)],s.prototype,"resizable",void 0),n([t.Property(null)],s.prototype,"min",void 0),n([t.Property(null)],s.prototype,"max",void 0),n([t.Property()],s.prototype,"content",void 0),s}(t.ChildProperty),u=function(e){function u(t,i){var n=e.call(this,t,i)||this;return n.allPanes=[],n.paneOrder=[],n.separatorOrder=[],n.allBars=[],n.previousCoordinates={},n.currentCoordinates={},n.updatePrePaneInPercentage=!1,n.updateNextPaneInPercentage=!1,n.panesDimensions=[],n.border=0,n.validDataAttributes=["data-size","data-min","data-max","data-collapsible","data-resizable","data-content"],n.validElementAttributes=["data-orientation","data-width","data-height"],n}return i(u,e),u.prototype.onPropertyChanged=function(e,i){if(this.element.classList.contains("e-splitter"))for(var n=0,s=Object.keys(e);n<s.length;n++)switch(s[n]){case"height":this.setSplitterSize(this.element,e.height,"height");break;case"width":this.setSplitterSize(this.element,e.width,"width");break;case"cssClass":this.setCssClass(e.cssClass);break;case"enabled":this.isEnabled(this.enabled);break;case"separatorSize":this.setSeparatorSize(e.separatorSize);break;case"orientation":this.changeOrientation(e.orientation);break;case"paneSettings":if(e.paneSettings instanceof Array&&i.paneSettings instanceof Array)this.destroyPaneSettings(),this.allBars=[],this.allPanes=[],this.createSplitPane(this.element),this.addSeparator(this.element),this.getPanesDimensions(),this.setRTL(this.enableRtl);else for(var r=Object.keys(e.paneSettings),a=0;a<r.length;a++)for(var o=parseInt(Object.keys(e.paneSettings)[a],10),h=Object.keys(e.paneSettings[o]).length,d=0;d<h;d++){var p=Object.keys(e.paneSettings[o])[d];switch(p){case"content":var u=Object(e.paneSettings[o])[p];t.isNullOrUndefined(u)||(this.allPanes[o].innerHTML="",this.setTemplate(u,this.allPanes[o]));break;case"resizable":var c=Object(e.paneSettings[o])[p];this.resizableModel(o,c);break;case"size":var P=Object(e.paneSettings[o])[p];""===P||t.isNullOrUndefined(P)||(this.allPanes[o].style.flexBasis=P,this.allPanes[o].classList.add(l))}}break;case"enableRtl":this.setRTL(e.enableRtl)}},u.prototype.preRender=function(){this.wrapper=this.element.cloneNode(!0),this.wrapperParent=this.element.parentElement,t.removeClass([this.wrapper],["e-control","e-lib","e-splitter"]);var e="Horizontal"===this.orientation?"e-splitter-horizontal":"e-splitter-vertical";t.addClass([this.element],e),t.Browser.isDevice&&t.addClass([this.element],"e-splitter-touch")},u.prototype.getPersistData=function(){return this.addOnPersist([])},u.prototype.getModuleName=function(){return"splitter"},u.prototype.render=function(){this.checkDataAttributes(),this.setCssClass(this.cssClass),this.isEnabled(this.enabled),this.setDimension(this.getHeight(this.element),this.getWidth(this.element)),this.createSplitPane(this.element),this.addSeparator(this.element),this.getPanesDimensions(),this.setPaneSettings(),this.setRTL(this.enableRtl)},u.prototype.checkDataAttributes=function(){for(var e,i,n=0;n<this.validElementAttributes.length;n++)i=this.element.getAttribute(this.validElementAttributes[n]),t.isNullOrUndefined(i)||(this[e=this.removeDataPrefix(this.validElementAttributes[n])]=i);for(var s=0;s<this.element.children.length;s++)for(var r=0;r<this.validDataAttributes.length;r++)if(i=this.element.children[s].getAttribute(this.validDataAttributes[r]),!t.isNullOrUndefined(i)){i="collapsible"===(e=this.removeDataPrefix(this.validDataAttributes[r]))||"resizable"===e?"true"===i:i,t.isNullOrUndefined(this.paneSettings[s])&&(this.paneSettings[s]={size:"",min:null,max:null,content:"",resizable:!0});var a=this.paneSettings[s][e];"resizable"===e&&this.paneSettings[s].resizable&&(this.paneSettings[s][e]=i),(t.isNullOrUndefined(a)||""===a)&&(this.paneSettings[s][e]=i)}},u.prototype.destroyPaneSettings=function(){[].slice.call(this.element.children).forEach(function(e){t.detach(e)})},u.prototype.setPaneSettings=function(){for(var e=this.allPanes.length,i=[],n={size:"",min:null,max:null,content:"",resizable:!0},s=0;s<e;s++)t.isNullOrUndefined(this.paneSettings[s])?i[s]=n:i[s]=this.paneSettings[s];this.setProperties({paneSettings:i},!0)},u.prototype.resizableModel=function(e,i){var n,s=e;n=e===this.allBars.length?e-1:e,t.EventHandler.remove(this.allBars[n],"mousedown",this.onMouseDown),i?(t.EventHandler.add(this.allBars[n],"mousedown",this.onMouseDown,this),this.isResizable()&&(this.showResizer(this.allBars[n]),t.removeClass([t.select("."+d,this.allBars[n])],"e-hide-handler"),this.allBars[n].classList.add("e-resizable-split-bar"),e===this.allBars.length?this.allPanes[e].classList.add("e-resizable"):this.allPanes[n].classList.add("e-resizable"),this.updateResizablePanes(s))):(this.updateResizablePanes(s),this.hideResizer(this.allBars[n]),this.allBars[n].classList.remove("e-resizable-split-bar"),e===this.allBars.length?this.allPanes[e].classList.remove("e-resizable"):this.allPanes[n].classList.remove("e-resizable"))},u.prototype.updateResizablePanes=function(e){this.getPaneDetails(),this.isResizable()?this.allPanes[e].classList.add("e-resizable"):this.allPanes[e].classList.remove("e-resizable")},u.prototype.removeDataPrefix=function(e){return e.slice(e.lastIndexOf("-")+1)},u.prototype.setRTL=function(e){e?t.addClass([this.element],"e-rtl"):t.removeClass([this.element],"e-rtl")},u.prototype.setSplitterSize=function(e,i,n){var s="width"===n?{width:t.formatUnit(i)}:{height:t.formatUnit(i)};t.setStyleAttribute(e,s)},u.prototype.getPanesDimensions=function(){for(var e=0;e<this.allPanes.length;e++)"Horizontal"===this.orientation?this.panesDimensions.push(this.allPanes[e].getBoundingClientRect().width):this.panesDimensions.push(this.allPanes[e].getBoundingClientRect().height)},u.prototype.setCssClass=function(e){""!==e&&t.addClass([this.element],e.split(" "))},u.prototype.hideResizer=function(e){t.addClass([t.select("."+d,e)],"e-hide-handler")},u.prototype.showResizer=function(e){t.removeClass([t.select("."+d,e)],"e-hide-handler")},u.prototype.isEnabled=function(e){e?t.removeClass([this.element],"e-disabled"):t.addClass([this.element],"e-disabled")},u.prototype.setSeparatorSize=function(e){for(var i=t.isNullOrUndefined(e)?"auto":e+"px",n="Horizontal"===this.orientation?o:h,s=0;s<this.allBars.length;s++){var r=t.selectAll("."+n,this.element)[s],a=t.selectAll("."+d,r)[0];"Horizontal"===this.orientation?(r.style.width=i,t.isNullOrUndefined(a)||(a.style.width=i)):(r.style.height=i,t.isNullOrUndefined(a)||(a.style.height=i))}},u.prototype.changeOrientation=function(e){var t="Vertical"===e;this.element.classList.remove(t?"e-splitter-horizontal":"e-splitter-vertical"),this.element.classList.add(t?"e-splitter-vertical":"e-splitter-horizontal"),this.element.removeAttribute("aria-orientation"),this.element.setAttribute("aria-orientation",e);for(i=0;i<this.allPanes.length;i++)this.allPanes[i].classList.remove(t?r:a),this.allPanes[i].classList.add(t?a:r);for(var i=0;i<this.allBars.length;i++)this.allBars[i].classList.remove(t?o:h),this.allBars[i].classList.add(t?h:o)},u.prototype.getPrevPane=function(e,t){var i=this.enableRtl&&"Horizontal"===this.orientation?(t-1)/2+1:(t-1)/2;return e.parentElement.children[i]},u.prototype.getNextPane=function(e,t){var i=this.enableRtl&&"Horizontal"===this.orientation?(t-1)/2:(t-1)/2+1;return e.parentElement.children[i]},u.prototype.addResizeHandler=function(e){var i=this.createElement("div");t.addClass([i],[d,"e-icons"]);var n=t.isNullOrUndefined(this.separatorSize)?"1px":this.separatorSize+"px";"Horizontal"===this.orientation?i.style.width=n:i.style.height=n,e.appendChild(i)},u.prototype.getHeight=function(e){this.height;return""!==e.style.height&&"100%"===this.height?e.style.height:this.height},u.prototype.getWidth=function(e){this.width;return""!==e.style.width&&"100%"===this.width?e.style.width:this.width},u.prototype.setDimension=function(e,i){t.setStyleAttribute(this.element,{height:e,width:i})},u.prototype.createSeparator=function(e){var i=this.createElement("div");return this.allBars.push(i),"Horizontal"===this.orientation?(t.addClass([i],["e-split-bar",o]),i.style.width=t.isNullOrUndefined(this.separatorSize)?"auto":this.separatorSize+"px"):(t.addClass([i],["e-split-bar",h]),i.style.height=t.isNullOrUndefined(this.separatorSize)?"auto":this.separatorSize+"px"),this.addMouseActions(i),this.addResizeHandler(i),i},u.prototype.addSeparator=function(e){for(var i=this.allPanes.length,n=e.children,s=0;s<i;s++)if(s<i-1){var r=this.createSeparator(s);if(t.setStyleAttribute(r,{order:2*s+1}),this.separatorOrder.push(2*s+1),n[s].parentNode.appendChild(r),this.currentSeparator=r,r.setAttribute("role","separator"),this.isResizable()){t.EventHandler.add(r,"mousedown",this.onMouseDown,this);var a="msie"===t.Browser.info.name?"pointerdown":"touchstart";t.EventHandler.add(r,a,this.onMouseDown,this),r.classList.add("e-resizable-split-bar")}else this.hideResizer(r)}},u.prototype.isResizable=function(){var e=!1;return(!t.isNullOrUndefined(this.paneSettings[this.getPreviousPaneIndex()])&&this.paneSettings[this.getPreviousPaneIndex()].resizable&&!t.isNullOrUndefined(this.paneSettings[this.getNextPaneIndex()])&&this.paneSettings[this.getNextPaneIndex()].resizable||t.isNullOrUndefined(this.paneSettings[this.getNextPaneIndex()]))&&(e=!0),e},u.prototype.addMouseActions=function(e){e.addEventListener("mouseover",function(){t.addClass([e],["e-split-bar-hover"])}),e.addEventListener("mouseout",function(){t.removeClass([e],["e-split-bar-hover"])})},u.prototype.getEventType=function(e){return e.indexOf("mouse")>-1?"mouse":"touch"},u.prototype.updateCurrentSeparator=function(e){this.currentSeparator=this.isSeparator(e)?e:e.parentElement},u.prototype.isSeparator=function(e){var t=!0;return(e.classList.contains(d)||e.classList.contains("e-split-line"))&&(t=!1),t},u.prototype.isMouseEvent=function(e){var i=!1;return("mouse"===this.getEventType(e.type)||!t.isNullOrUndefined(e.pointerType)&&"mouse"===this.getEventType(e.pointerType))&&(i=!0),i},u.prototype.updateCursorPosition=function(e,i){if(this.isMouseEvent(e))this.changeCoordinates({x:e.pageX,y:e.pageY},i);else{var n="msie"!==t.Browser.info.name?e.touches[0]:e;this.changeCoordinates({x:n.pageX,y:n.pageY},i)}},u.prototype.changeCoordinates=function(e,t){"previous"===t?this.previousCoordinates=e:this.currentCoordinates=e},u.prototype.wireResizeEvents=function(){t.EventHandler.add(document,"mousemove",this.onMouseMove,this),t.EventHandler.add(document,"mouseup",this.onMouseUp,this);var e="msie"===t.Browser.info.name?"pointermove":"touchmove",i="msie"===t.Browser.info.name?"pointerup":"touchend";t.EventHandler.add(document,e,this.onMouseMove,this),t.EventHandler.add(document,i,this.onMouseUp,this)},u.prototype.unwireResizeEvents=function(){var e="msie"===t.Browser.info.name?"pointermove":"touchmove",i="msie"===t.Browser.info.name?"pointerup":"touchend";t.EventHandler.remove(document,"mousemove",this.onMouseMove),t.EventHandler.remove(document,"mouseup",this.onMouseUp),t.EventHandler.remove(document,e,this.onMouseMove),t.EventHandler.remove(document,i,this.onMouseUp)},u.prototype.onMouseDown=function(e){e.preventDefault();var i=e.target;this.updateCurrentSeparator(i),t.addClass([this.currentSeparator],"e-split-bar-active"),this.updateCursorPosition(e,"previous"),this.getPaneDetails();var n={element:this.element,event:e,pane:[this.previousPane,this.nextPane],index:[this.getPreviousPaneIndex(),this.getNextPaneIndex()],separator:this.currentSeparator,cancel:!1};if(this.trigger("resizeStart",n),!n.cancel)if(this.wireResizeEvents(),this.previousPane.style.flexBasis.indexOf("%")>0||this.nextPane.style.flexBasis.indexOf("%")>0){var s=this.updatePaneFlexBasis(this.previousPane),r=this.updatePaneFlexBasis(this.nextPane);this.totalPercent=s+r,this.totalWidth=this.convertPercentageToPixel(this.totalPercent+"%")}else this.totalWidth="Horizontal"===this.orientation?this.previousPane.offsetWidth+this.nextPane.offsetWidth:this.previousPane.offsetHeight+this.nextPane.offsetHeight},u.prototype.updatePaneFlexBasis=function(e){var t;if(e.style.flexBasis.indexOf("%")>0)t=this.removePercentageUnit(e.style.flexBasis);else if(""!==e.style.flexBasis)t=this.convertPixelToPercentage(this.convertPixelToNumber(e.style.flexBasis));else{var i="Horizontal"===this.orientation?e.offsetWidth+this.currentSeparator.offsetWidth:e.offsetHeight+this.currentSeparator.offsetHeight;t=this.convertPixelToPercentage(i)}return t},u.prototype.removePercentageUnit=function(e){return parseFloat(e.slice(0,e.indexOf("%")))},u.prototype.convertPercentageToPixel=function(e,i){var n,s=e.toString();if(s.indexOf("%")>-1){n=parseFloat(s.slice(0,s.indexOf("%")));var r=void 0;r=t.isNullOrUndefined(i)?"Horizontal"===this.orientation?this.element.offsetWidth:this.element.offsetHeight:this.panesDimensions[this.allPanes.indexOf(i)],n=Math.ceil(r*(n/100))}else n=parseInt(s,10);return n},u.prototype.convertPixelToPercentage=function(e){return e/("Horizontal"===this.orientation?this.element.offsetWidth:this.element.offsetHeight)*100},u.prototype.convertPixelToNumber=function(e){return e.indexOf("p")>-1?parseFloat(e.slice(0,e.indexOf("p"))):parseFloat(e)},u.prototype.calcDragPosition=function(e,t){var i,n;return i="Horizontal"===this.orientation?this.currentCoordinates.x-e:this.currentCoordinates.y-e,n=i/t,(n=n>1?1:n<0?0:n)*t},u.prototype.getSeparatorPosition=function(e){this.updateCursorPosition(e,"current");var t="Horizontal"===this.orientation?this.element.getBoundingClientRect().left:this.element.getBoundingClientRect().top,i="Horizontal"===this.orientation?this.element.offsetWidth:this.element.offsetHeight;return this.calcDragPosition(t,i)},u.prototype.getMinMax=function(e,i,n){var s="min"===n?0:null,r=null;return"min"===n?t.isNullOrUndefined(this.paneSettings[e])||t.isNullOrUndefined(this.paneSettings[e].min)||(r=this.paneSettings[e].min):t.isNullOrUndefined(this.paneSettings[e])||t.isNullOrUndefined(this.paneSettings[e].max)||(r=this.paneSettings[e].max),this.paneSettings.length>0&&!t.isNullOrUndefined(this.paneSettings[e])&&!t.isNullOrUndefined(r)?(r.indexOf("%")>0&&(r=this.convertPercentageToPixel(r).toString()),this.convertPixelToNumber(r)):s},u.prototype.getPreviousPaneIndex=function(){var e=(parseInt(this.currentSeparator.style.order,10)-1)/2;return this.enableRtl?e+1:e},u.prototype.getNextPaneIndex=function(){var e=(parseInt(this.currentSeparator.style.order,10)-1)/2;return this.enableRtl?e:e+1},u.prototype.getPaneDetails=function(){this.order=parseInt(this.currentSeparator.style.order,10),this.previousPane=this.getPrevPane(this.currentSeparator,this.order),this.nextPane=this.getNextPane(this.currentSeparator,this.order),this.prevPaneIndex=this.getPreviousPaneIndex(),this.nextPaneIndex=this.getNextPaneIndex()},u.prototype.getPaneHeight=function(e){return"Horizontal"===this.orientation?e.offsetWidth.toString():e.offsetHeight.toString()},u.prototype.isValidSize=function(e){var i=!1;return!t.isNullOrUndefined(this.paneSettings[e])&&!t.isNullOrUndefined(this.paneSettings[e].size)&&this.paneSettings[e].size.indexOf("%")>-1&&(i=!0),i},u.prototype.getPaneDimensions=function(){this.previousPaneHeightWidth=""===this.previousPane.style.flexBasis?this.getPaneHeight(this.previousPane):this.previousPane.style.flexBasis,this.nextPaneHeightWidth=""===this.nextPane.style.flexBasis?this.getPaneHeight(this.nextPane):this.nextPane.style.flexBasis,this.isValidSize(this.prevPaneIndex)&&(this.previousPaneHeightWidth=this.convertPercentageToPixel(this.previousPaneHeightWidth).toString(),this.updatePrePaneInPercentage=!0),this.isValidSize(this.nextPaneIndex)&&(this.nextPaneHeightWidth=this.convertPercentageToPixel(this.nextPaneHeightWidth).toString(),this.updateNextPaneInPercentage=!0),this.prePaneDimenson=this.convertPixelToNumber(this.previousPaneHeightWidth.toString()),this.nextPaneDimension=this.convertPixelToNumber(this.nextPaneHeightWidth.toString())},u.prototype.checkCoordinates=function(e,t){var i=!0;return e!==this.previousCoordinates.x&&t!==this.previousCoordinates.y||(i=!1),i},u.prototype.isCursorMoved=function(e){return"mouse"===this.getEventType(e.type)||!t.isNullOrUndefined(e.pointerType)&&"mouse"===this.getEventType(e.pointerType)?this.checkCoordinates(e.pageX,e.pageY):"msie"!==t.Browser.info.name?this.checkCoordinates(e.touches[0].pageX,e.touches[0].pageY):this.checkCoordinates(e.pageX,e.pageY)},u.prototype.getBorder=function(){this.border=0;var e="Horizontal"===this.orientation?(this.element.offsetWidth-this.element.clientWidth)/2:(this.element.offsetHeight-this.element.clientHeight)/2;this.border="chrome"!==t.Browser.info.name?this.border:e},u.prototype.onMouseMove=function(e){if(this.isCursorMoved(e)){this.getPaneDetails(),this.getPaneDimensions();var t={element:this.element,event:e,pane:[this.previousPane,this.nextPane],index:[this.prevPaneIndex,this.nextPaneIndex],paneSize:[this.prePaneDimenson,this.nextPaneDimension],separator:this.currentSeparator};this.trigger("resizing",t);var i,n=this.validateDraggedPosition(this.getSeparatorPosition(e),this.prePaneDimenson,this.nextPaneDimension);if(this.getBorder(),i="Horizontal"===this.orientation?this.element.getBoundingClientRect().left+n-this.currentSeparator.getBoundingClientRect().left+this.border:this.element.getBoundingClientRect().top+n-this.currentSeparator.getBoundingClientRect().top+this.border,this.nextPaneHeightWidth="string"==typeof this.nextPaneHeightWidth&&this.nextPaneHeightWidth.indexOf("p")>-1?this.convertPixelToNumber(this.nextPaneHeightWidth):parseInt(this.nextPaneHeightWidth,10),this.prevPaneCurrentWidth=i+this.convertPixelToNumber(this.previousPaneHeightWidth),this.nextPaneCurrentWidth=this.nextPaneHeightWidth-i,this.validateMinMaxValues(),this.nextPaneCurrentWidth<0&&(this.nextPaneCurrentWidth=0),this.prevPaneCurrentWidth<0&&(this.prevPaneCurrentWidth=0),this.nextPaneCurrentWidth+this.prevPaneCurrentWidth>this.totalWidth&&(this.nextPaneCurrentWidth<this.prevPaneCurrentWidth?this.prevPaneCurrentWidth=this.prevPaneCurrentWidth-(this.nextPaneCurrentWidth+this.prevPaneCurrentWidth-this.totalWidth):this.nextPaneCurrentWidth=this.nextPaneCurrentWidth-(this.nextPaneCurrentWidth+this.prevPaneCurrentWidth-this.totalWidth)),this.nextPaneCurrentWidth+this.prevPaneCurrentWidth<this.totalWidth){var s=this.totalWidth-(this.nextPaneCurrentWidth+this.prevPaneCurrentWidth);this.nextPaneCurrentWidth=this.nextPaneCurrentWidth+s}this.calculateCurrentDimensions(),this.addStaticPaneClass(),this.previousPane.style.flexBasis=this.prevPaneCurrentWidth,this.nextPane.style.flexBasis=this.nextPaneCurrentWidth}},u.prototype.validateMinRange=function(e,i,n){var s,r,a=null,o=0;return t.isNullOrUndefined(this.paneSettings[e])||t.isNullOrUndefined(this.paneSettings[e].min)||(a=this.paneSettings[e].min.toString()),t.isNullOrUndefined(a)||(a.indexOf("%")>0&&(a=this.convertPercentageToPixel(a).toString()),i<(s=this.convertPixelToNumber(a))&&(o=i-s<=0?0:i-s,this.totalWidth=this.totalWidth-o,this.totalPercent=this.convertPixelToPercentage(this.totalWidth),r=s)),t.isNullOrUndefined(r)?i:r},u.prototype.validateMaxRange=function(e,i,n){var s,r,a=null;return t.isNullOrUndefined(this.paneSettings[e])||t.isNullOrUndefined(this.paneSettings[e].max)||(a=this.paneSettings[e].max.toString()),t.isNullOrUndefined(a)||(a.indexOf("%")>0&&(a=this.convertPercentageToPixel(a).toString()),i>(s=this.convertPixelToNumber(a))&&(this.totalWidth=this.totalWidth-(i-s),this.totalPercent=this.convertPixelToPercentage(this.totalWidth),r=s)),t.isNullOrUndefined(r)?i:r},u.prototype.validateMinMaxValues=function(){this.prevPaneCurrentWidth=this.validateMinRange(this.prevPaneIndex,this.prevPaneCurrentWidth,this.previousPane),this.nextPaneCurrentWidth=this.validateMinRange(this.nextPaneIndex,this.nextPaneCurrentWidth,this.nextPane),this.prevPaneCurrentWidth=this.validateMaxRange(this.prevPaneIndex,this.prevPaneCurrentWidth,this.previousPane),this.nextPaneCurrentWidth=this.validateMaxRange(this.nextPaneIndex,this.nextPaneCurrentWidth,this.nextPane)},u.prototype.equatePaneWidths=function(){var e;this.prevPaneCurrentWidth+this.nextPaneCurrentWidth>this.totalPercent&&(e=this.prevPaneCurrentWidth+this.nextPaneCurrentWidth-this.totalPercent,this.prevPaneCurrentWidth=this.prevPaneCurrentWidth-e/2+"%",this.nextPaneCurrentWidth=this.nextPaneCurrentWidth-e/2+"%"),this.prevPaneCurrentWidth+this.nextPaneCurrentWidth<this.totalPercent&&(e=this.totalPercent-(this.prevPaneCurrentWidth+this.nextPaneCurrentWidth),this.prevPaneCurrentWidth=this.prevPaneCurrentWidth+e/2+"%",this.nextPaneCurrentWidth=this.nextPaneCurrentWidth+e/2+"%")},u.prototype.calculateCurrentDimensions=function(){this.updatePrePaneInPercentage||this.updateNextPaneInPercentage?(this.prevPaneCurrentWidth=Math.round(Number(Math.round(10*this.convertPixelToPercentage(this.prevPaneCurrentWidth))/10)),this.nextPaneCurrentWidth=Math.round(Number(Math.round(10*this.convertPixelToPercentage(this.nextPaneCurrentWidth))/10)),0===this.prevPaneCurrentWidth&&(this.nextPaneCurrentWidth=this.totalPercent),0===this.nextPaneCurrentWidth&&(this.prevPaneCurrentWidth=this.totalPercent),this.prevPaneCurrentWidth+this.nextPaneCurrentWidth!==this.totalPercent?this.equatePaneWidths():(this.prevPaneCurrentWidth=this.prevPaneCurrentWidth+"%",this.nextPaneCurrentWidth=this.nextPaneCurrentWidth+"%"),this.prevPaneCurrentWidth=this.updatePrePaneInPercentage?this.prevPaneCurrentWidth:this.convertPercentageToPixel(this.prevPaneCurrentWidth)+"px",this.nextPaneCurrentWidth=this.updateNextPaneInPercentage?this.nextPaneCurrentWidth:this.convertPercentageToPixel(this.nextPaneCurrentWidth)+"px",this.updatePrePaneInPercentage=!1,this.updateNextPaneInPercentage=!1):(this.prevPaneCurrentWidth=this.prevPaneCurrentWidth+"px",this.nextPaneCurrentWidth=this.nextPaneCurrentWidth+"px")},u.prototype.addStaticPaneClass=function(){this.previousPane.classList.contains(l)||this.previousPane.classList.add(l),this.nextPane.classList.contains(l)||this.nextPane.classList.add(l)},u.prototype.validateDraggedPosition=function(e,i,n){var s="Horizontal"===this.orientation?this.currentSeparator.offsetLeft:this.currentSeparator.offsetTop,r=s-i,a=n+s,o=this.getMinMax(this.prevPaneIndex,this.previousPane,"min"),h=this.getMinMax(this.nextPaneIndex,this.nextPane,"min"),l=this.getMinMax(this.prevPaneIndex,this.previousPane,"max"),d=this.getMinMax(this.nextPaneIndex,this.nextPane,"max"),p=e;return e>a-h?p=a-h:e<r+o&&(p=r+o),t.isNullOrUndefined(l)?t.isNullOrUndefined(d)||e<a-d&&(p=a-d):e>r+l&&(p=r+l),p},u.prototype.onMouseUp=function(e){t.removeClass([this.currentSeparator],"e-split-bar-active"),this.unwireResizeEvents();var i={event:e,element:this.element,pane:[this.previousPane,this.nextPane],index:[this.prevPaneIndex,this.nextPaneIndex],separator:this.currentSeparator,paneSize:[this.prePaneDimenson,this.nextPaneDimension]};this.trigger("resizeStop",i)},u.prototype.panesDimension=function(e,i){var n,s=i.length;parseInt(this.getHeight(this.element),10),t.isNullOrUndefined(this.paneSettings[e])?t.setStyleAttribute(i[e],{order:2*e}):t.isNullOrUndefined(this.paneSettings[e].size)?(this.sizeFlag=!0,t.setStyleAttribute(i[e],{order:2*e})):(n=this.paneSettings[e].size,e<s&&(t.setStyleAttribute(i[e],{"flex-basis":n,order:2*e}),e<s-1?t.addClass([i[e]],l):this.sizeFlag||(i[e].style.flexBasis=null),e===s-1&&this.sizeFlag&&t.addClass([i[e]],l))),this.paneOrder.push(2*e)},u.prototype.setTemplate=function(e,i){for(var n=[],s=0,r=t.compile(e)({});s<r.length;s++){var a=r[s];n.push(a)}t.append([].slice.call(n),i)},u.prototype.createSplitPane=function(e){for(var i=e.children.length,n=0;n<this.paneSettings.length;n++)if(i<this.paneSettings.length){var o=this.createElement("div");this.element.appendChild(o),i+=1}i=e.children.length;var h=[].slice.call(e.children);if(this.element.setAttribute("aria-orientation",this.orientation),this.element.setAttribute("role","splitter"),this.sizeFlag=!1,i>1)for(n=0;n<i;n++)1===h[n].nodeType&&(this.allPanes.push(h[n]),"Horizontal"===this.orientation?(t.addClass([h[n]],[s,r,"e-scrollable"]),this.panesDimension(n,h)):(t.addClass([h[n]],[s,a,"e-scrollable"]),this.panesDimension(n,h)),t.isNullOrUndefined(this.paneSettings[n])||t.isNullOrUndefined(this.paneSettings[n].content)||this.setTemplate(this.paneSettings[n].content,h[n]))},u.prototype.destroy=function(){t.detach(this.element),this.element=this.wrapper,this.wrapperParent.appendChild(this.wrapper)},u.prototype.addPaneClass=function(e){return"Horizontal"===this.orientation?t.addClass([e],[s,r,"e-scrollable"]):t.addClass([e],[s,a,"e-scrollable"]),e},u.prototype.removePaneOrders=function(e){for(var t=document.querySelectorAll("."+e),i=0;i<t.length;i++)t[i].style.removeProperty("order")},u.prototype.setPaneOrder=function(){for(var e=0;e<this.allPanes.length;e++)this.panesDimension(e,this.allPanes)},u.prototype.removeSeparator=function(){for(var e=0;e<this.allBars.length;e++)t.detach(this.allBars[e]);this.allBars=[]},u.prototype.updatePanes=function(){this.setPaneOrder(),this.removeSeparator(),this.addSeparator(this.element)},u.prototype.addPane=function(e,i){var n=this.createElement("div");n=this.addPaneClass(n),i=i>this.allPanes.length+1?this.allPanes.length:i;var s={size:t.isNullOrUndefined(e.size)?"":e.size,min:t.isNullOrUndefined(e.min)?null:e.min,max:t.isNullOrUndefined(e.max)?null:e.max,content:t.isNullOrUndefined(e.content)?"":e.content,resizable:!!t.isNullOrUndefined(e.resizable)||e.resizable};this.paneSettings.splice(i,0,s),"Horizontal"===this.orientation?(this.element.insertBefore(n,this.element.querySelectorAll("."+r)[i]),this.removePaneOrders(r)):(this.element.insertBefore(n,this.element.querySelectorAll("."+a)[i]),this.removePaneOrders(a)),this.allPanes.splice(i,0,n),this.updatePanes(),this.setTemplate(this.paneSettings[i].content,n),this.allPanes[this.allPanes.length-1].classList.remove(l)},u.prototype.removePane=function(e){e=e>this.allPanes.length+1?this.allPanes.length:e;var i="Horizontal"===this.orientation?r:a;t.isNullOrUndefined(this.element.querySelectorAll("."+i)[e])||(t.detach(this.element.querySelectorAll("."+i)[e]),this.allPanes.splice(e,1),this.removePaneOrders(i),this.updatePanes(),this.allPanes[this.allPanes.length-1].classList.remove(l))},n([t.Property("100%")],u.prototype,"height",void 0),n([t.Property("100%")],u.prototype,"width",void 0),n([t.Collection([],p)],u.prototype,"paneSettings",void 0),n([t.Property("Horizontal")],u.prototype,"orientation",void 0),n([t.Property("")],u.prototype,"cssClass",void 0),n([t.Property(!0)],u.prototype,"enabled",void 0),n([t.Property(!1)],u.prototype,"enableRtl",void 0),n([t.Property(null)],u.prototype,"separatorSize",void 0),n([t.Event()],u.prototype,"created",void 0),n([t.Event()],u.prototype,"resizeStart",void 0),n([t.Event()],u.prototype,"resizing",void 0),n([t.Event()],u.prototype,"resizeStop",void 0),u=n([t.NotifyPropertyChanges],u)}(t.Component);return e.PaneProperties=p,e.Splitter=u,e}({},ej.base),this.ejs=ej;
 //# sourceMappingURL=ej2-layouts.min.js.map

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 16.4.54
+*  version : 16.4.55
 *  Copyright Syncfusion Inc. 2001 - 2019. All rights reserved.
@@ -5,0 +5,0 @@ *  Use of this code is subject to the terms of our license.

package.json

 {
   "name": "@syncfusion/ej2-layouts",
-  "version": "16.4.54",
+  "version": "16.4.55",
   "description": "A package of Essential JS 2 layout pure CSS components such as card and avatar. The card is used as small container to show content in specific structure, whereas the avatars are icons, initials or figures representing particular person.",
@@ -5,0 +5,0 @@ "author": "Syncfusion Inc.",

src/splitter/splitter.d.ts

@@ -186,2 +186,6 @@ import { Component, ChildProperty } from '@syncfusion/ej2-base';
     private checkDataAttributes;
+    private destroyPaneSettings;
+    private setPaneSettings;
+    private resizableModel;
+    private updateResizablePanes;
     private removeDataPrefix;
@@ -228,3 +232,2 @@ private setRTL;
     private getPaneHeight;
-    private boundingRectValues;
     private isValidSize;
@@ -231,0 +234,0 @@ private getPaneDimensions;

src/splitter/splitter.js

@@ -44,2 +44,3 @@ var __extends = (this && this.__extends) || (function () {
 var E_ICONS = 'e-icons';
+var RESIZABLE_PANE = 'e-resizable';
 /**
@@ -147,34 +148,41 @@ * Interface to configure pane properties such as its content, size, min, max, and resizable.
                 case 'paneSettings':
-                    var paneCounts = Object.keys(newProp.paneSettings);
-                    for (var i = 0; i < paneCounts.length; i++) {
-                        var index = parseInt(Object.keys(newProp.paneSettings)[i], 10);
-                        var changedPropsCount = Object.keys(newProp.paneSettings[index]).length;
-                        for (var j = 0; j < changedPropsCount; j++) {
-                            var property = Object.keys(newProp.paneSettings[index])[j];
-                            var newVal = Object(newProp.paneSettings[index])[property];
-                            index = (this.enableRtl) ? (this.allBars.length - 1) - index : index;
-                            if (property === 'content') {
-                                this.allPanes[index].innerHTML = '';
-                                this.setTemplate(newVal, this.allPanes[index]);
-                            }
-                            if (property === 'resizable') {
-                                EventHandler.remove(this.allBars[index], 'mousedown', this.onMouseDown);
-                                if (newVal) {
-                                    EventHandler.add(this.allBars[index], 'mousedown', this.onMouseDown, this);
-                                    this.currentSeparator = this.allBars[index];
-                                    if (this.isResizable()) {
-                                        this.showResizer(this.allBars[index]);
-                                        this.allBars[index].classList.add(RESIZABLE_BAR);
-                                    }
+                    if (!(newProp.paneSettings instanceof Array && oldProp.paneSettings instanceof Array)) {
+                        var paneCounts = Object.keys(newProp.paneSettings);
+                        for (var i = 0; i < paneCounts.length; i++) {
+                            var index = parseInt(Object.keys(newProp.paneSettings)[i], 10);
+                            var changedPropsCount = Object.keys(newProp.paneSettings[index]).length;
+                            for (var j = 0; j < changedPropsCount; j++) {
+                                var property = Object.keys(newProp.paneSettings[index])[j];
+                                switch (property) {
+                                    case 'content':
+                                        var newValue = Object(newProp.paneSettings[index])[property];
+                                        if (!isNullOrUndefined(newValue)) {
+                                            this.allPanes[index].innerHTML = '';
+                                            this.setTemplate(newValue, this.allPanes[index]);
+                                        }
+                                        break;
+                                    case 'resizable':
+                                        var newVal = Object(newProp.paneSettings[index])[property];
+                                        this.resizableModel(index, newVal);
+                                        break;
+                                    case 'size':
+                                        var newValSize = Object(newProp.paneSettings[index])[property];
+                                        if (newValSize !== '' && !isNullOrUndefined(newValSize)) {
+                                            this.allPanes[index].style.flexBasis = newValSize;
+                                            this.allPanes[index].classList.add(STATIC_PANE);
+                                        }
+                                        break;
                                 }
-                                else {
-                                    this.hideResizer(this.allBars[index]);
-                                    this.allBars[index].classList.remove(RESIZABLE_BAR);
-                                }
                             }
-                            if (property === 'size') {
-                                this.allPanes[index].style.flexBasis = newVal;
-                            }
                         }
                     }
+                    else {
+                        this.destroyPaneSettings();
+                        this.allBars = [];
+                        this.allPanes = [];
+                        this.createSplitPane(this.element);
+                        this.addSeparator(this.element);
+                        this.getPanesDimensions();
+                        this.setRTL(this.enableRtl);
+                    }
                     break;
@@ -220,2 +228,3 @@ case 'enableRtl':
         this.getPanesDimensions();
+        this.setPaneSettings();
         this.setRTL(this.enableRtl);
@@ -265,2 +274,53 @@ };
     };
+    Splitter.prototype.destroyPaneSettings = function () {
+        [].slice.call(this.element.children).forEach(function (el) { detach(el); });
+    };
+    Splitter.prototype.setPaneSettings = function () {
+        var childCount = this.allPanes.length;
+        var paneCollection = [];
+        var paneValue = {
+            size: '',
+            min: null,
+            max: null,
+            content: '',
+            resizable: true
+        };
+        for (var i = 0; i < childCount; i++) {
+            if (isNullOrUndefined(this.paneSettings[i])) {
+                paneCollection[i] = paneValue;
+            }
+            else {
+                paneCollection[i] = this.paneSettings[i];
+            }
+        }
+        this.setProperties({ 'paneSettings': paneCollection }, true);
+    };
+    Splitter.prototype.resizableModel = function (index, newVal) {
+        var paneIndex;
+        var i = index;
+        paneIndex = (index === (this.allBars.length)) ? (index - 1) : index;
+        EventHandler.remove(this.allBars[paneIndex], 'mousedown', this.onMouseDown);
+        if (newVal) {
+            EventHandler.add(this.allBars[paneIndex], 'mousedown', this.onMouseDown, this);
+            if (this.isResizable()) {
+                this.showResizer(this.allBars[paneIndex]);
+                removeClass([select('.' + RESIZE_BAR, this.allBars[paneIndex])], HIDE_HANDLER);
+                this.allBars[paneIndex].classList.add(RESIZABLE_BAR);
+                (index === (this.allBars.length)) ? this.allPanes[index].classList.add(RESIZABLE_PANE) :
+                    this.allPanes[paneIndex].classList.add(RESIZABLE_PANE);
+                this.updateResizablePanes(i);
+            }
+        }
+        else {
+            this.updateResizablePanes(i);
+            this.hideResizer(this.allBars[paneIndex]);
+            this.allBars[paneIndex].classList.remove(RESIZABLE_BAR);
+            (index === (this.allBars.length)) ? this.allPanes[index].classList.remove(RESIZABLE_PANE) :
+                this.allPanes[paneIndex].classList.remove(RESIZABLE_PANE);
+        }
+    };
+    Splitter.prototype.updateResizablePanes = function (index) {
+        this.getPaneDetails();
+        this.isResizable() ? this.allPanes[index].classList.add(RESIZABLE_PANE) : this.allPanes[index].classList.remove(RESIZABLE_PANE);
+    };
     Splitter.prototype.removeDataPrefix = function (attribute) {
@@ -623,6 +683,2 @@ return attribute.slice(attribute.lastIndexOf('-') + 1);
     };
-    Splitter.prototype.boundingRectValues = function (pane) {
-        return (this.orientation === 'Horizontal') ? pane.getBoundingClientRect().width :
-            pane.getBoundingClientRect().height;
-    };
     Splitter.prototype.isValidSize = function (paneIndex) {
@@ -642,7 +698,2 @@ var isValid = false;
             this.nextPane.style.flexBasis;
-        if (this.paneSettings.length < 1) {
-            this.prePaneDimenson = this.boundingRectValues(this.previousPane);
-            this.nextPaneDimension = this.boundingRectValues(this.nextPane);
-            return;
-        }
         if (this.isValidSize(this.prevPaneIndex)) {
@@ -649,0 +700,0 @@ this.previousPaneHeightWidth = this.convertPercentageToPixel(this.previousPaneHeightWidth).toString();

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1001607

increased by2.61%

Lines of code

15010

increased by1.1%

No dependency changes