jqwidgets-ng 22.0.2 → 23.0.0

package/jqwidgets/jqxsplitlayout.js

@@ -5,5 +5,2460 @@ License: https://jqwidgets.com/license/
 */
 /* eslint-disable */
 
-function _typeof(c){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){d=function d(a){return typeof a}}else{d=function d(a){return a&&typeof Symbol==="function"&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a}}return d(c)}function _get(g,h,e){if(typeof Reflect!=="undefined"&&Reflect.get){f=Reflect.get}else{f=function f(b,c,d){var j=_superPropBase(b,c);if(!j){return}var a=Object.getOwnPropertyDescriptor(j,c);if(a.get){return a.get.call(d)}return a.value}}return f(g,h,e||g)}function _superPropBase(d,c){while(!Object.prototype.hasOwnProperty.call(d,c)){d=_getPrototypeOf(d);if(d===null){break}}return d}function _classCallCheck(d,c){if(!(d instanceof c)){throw new TypeError("Cannot call a class as a function")}}function _defineProperties(g,e){for(var f=0;f<e.length;f++){var h=e[f];h.enumerable=h.enumerable||false;h.configurable=true;if("value" in h){h.writable=true}Object.defineProperty(g,h.key,h)}}function _createClass(f,e,d){if(e){_defineProperties(f.prototype,e)}if(d){_defineProperties(f,d)}return f}function _inherits(c,d){if(typeof d!=="function"&&d!==null){throw new TypeError("Super expression must either be null or a function")}c.prototype=Object.create(d&&d.prototype,{constructor:{value:c,writable:true,configurable:true}});if(d){_setPrototypeOf(c,d)}}function _createSuper(d){var f=_isNativeReflectConstruct();return function e(){var b=_getPrototypeOf(d),c;if(f){var a=_getPrototypeOf(this).constructor;c=Reflect.construct(b,arguments,a)}else{c=b.apply(this,arguments)}return _possibleConstructorReturn(this,c)}}function _possibleConstructorReturn(d,c){if(c&&(_typeof(c)==="object"||typeof c==="function")){return c}return _assertThisInitialized(d)}function _assertThisInitialized(b){if(b===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}return b}function _wrapNativeSuper(e){var f=typeof Map==="function"?new Map():undefined;d=function d(b){if(b===null||!_isNativeFunction(b)){return b}if(typeof b!=="function"){throw new TypeError("Super expression must either be null or a function")}if(typeof f!=="undefined"){if(f.has(b)){return f.get(b)}f.set(b,a)}function a(){return _construct(b,arguments,_getPrototypeOf(this).constructor)}a.prototype=Object.create(b.prototype,{constructor:{value:a,enumerable:false,writable:true,configurable:true}});return _setPrototypeOf(a,b)};return d(e)}function _construct(g,h,e){if(_isNativeReflectConstruct()){f=Reflect.construct}else{f=function f(b,c,d){var k=[null];k.push.apply(k,c);var a=Function.bind.apply(b,k);var l=new a();if(d){_setPrototypeOf(l,d.prototype)}return l}}return f.apply(null,arguments)}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct){return false}if(Reflect.construct.sham){return false}if(typeof Proxy==="function"){return true}try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true}catch(b){return false}}function _isNativeFunction(b){return Function.toString.call(b).indexOf("[native code]")!==-1}function _setPrototypeOf(d,e){f=Object.setPrototypeOf||function f(a,b){a.__proto__=b;return a};return f(d,e)}function _getPrototypeOf(c){d=Object.setPrototypeOf?Object.getPrototypeOf:function d(a){return a.__proto__||Object.getPrototypeOf(a)};return d(c)}if(!window.JQX){window.JQX={Utilities:{Core:{isMobile:function isMobile(){var d=/(iphone|ipod|ipad|android|iemobile|blackberry|bada)/.test(window.navigator.userAgent.toLowerCase());var c=function c(){return["iPad Simulator","iPhone Simulator","iPod Simulator","iPad","iPhone","iPod"].includes(navigator.platform)||navigator.userAgent.includes("Mac")&&"ontouchend" in document};if(!d){return c()}return d}}}}}var LayoutItem=function(p){_inherits(k,p);var l=_createSuper(k);function k(){var a;_classCallCheck(this,k);a=l.call(this);a._properties={min:50,label:"Item",modifiers:["resize","drag","close"],size:null};return a}_createClass(k,[{key:"_setProperty",value:function q(d,a){var b=this;if(b._properties[d]===a){return}b._properties[d]=a;b._updating=true;if(d==="disabled"||d==="modifiers"){if(a){b.setAttribute(d,a)}else{b.removeAttribute(d)}}else{if(a===null){b.removeAttribute(d)}else{b.setAttribute(d,a)}}if(!b.isCompleted){return}var c=b.closest("jqx-layout");if(c){if(!c._resizeDetails&&!c._updating&&c.isRendered){c.refresh()}}b._updating=false}},{key:"label",get:function s(){return this._properties.label},set:function m(a){this._setProperty("label",a)}},{key:"modifiers",get:function s(){return this._properties.modifiers},set:function m(a){this._setProperty("modifiers",a)}},{key:"min",get:function s(){return this._properties.min},set:function m(a){this._setProperty("min",a)}},{key:"size",get:function s(){return this._properties.size},set:function m(a){if(a!==null){if(typeof a==="string"){this._setProperty("size",a)}else{this._setProperty("size",Math.max(this.min,a))}}else{this._setProperty("size",a)}}},{key:"attributeChangedCallback",value:function o(b,c,d){var a=this;if(c===d){return}if(!a.isCompleted){return}if(b==="size"){if(!a._updating){if(d===null){this[b]=null;return}a[b]=Math.max(a.min,parseInt(d))}}else{a[b]=d}}},{key:"connectedCallback",value:function n(){if(!this.isCompleted){this.render()}}},{key:"whenRendered",value:function r(a){var b=this;if(b.isRendered){a();return}if(!b.whenRenderedCallbacks){b.whenRenderedCallbacks=[]}b.whenRenderedCallbacks.push(a)}},{key:"render",value:function t(){var d=this;if(!d.hasAttribute("data-id")){d.setAttribute("data-id","id"+Math.random().toString(16).slice(2))}if(!d.hasAttribute("label")){d.setAttribute("label",d.label)}if(!d.hasAttribute("min")){d.setAttribute("min",d.min)}if(!d.hasAttribute("label")){d.setAttribute("label",d.label)}if(!d.hasAttribute("modifiers")){d.setAttribute("modifiers",d.modifiers)}for(var b=0;b<d.attributes.length;b++){var e=d.attributes[b];var c=e.name;var a=e.value;if(!isNaN(a)&&(c==="min"||c==="size")){d._properties[c]=parseInt(a);continue}d._properties[c]=a}d.classList.add("jqx-layout-item");d.isCompleted=true;if(d.whenRenderedCallbacks){for(var b=0;b<d.whenRenderedCallbacks.length;b++){d.whenRenderedCallbacks[b]()}d.whenRenderedCallbacks=[]}}}],[{key:"observedAttributes",get:function s(){return["min","size","label","modifiers"]}}]);return k}(_wrapNativeSuper(HTMLElement));var LayoutGroup=function(j){_inherits(k,j);var l=_createSuper(k);function k(){var a;_classCallCheck(this,k);a=l.call(this);a._properties.label="Group";a._properties.orientation="vertical";return a}_createClass(k,[{key:"orientation",get:function h(){return this._properties.orientation},set:function i(a){this._setProperty("orientation",a)}},{key:"render",value:function g(){var a=this;_get(_getPrototypeOf(k.prototype),"render",this).call(this);a.className="jqx-layout-group";if(!a.hasAttribute("orientation")){a.setAttribute("orientation",a._properties.orientation)}else{a._properties.orientation=a.getAttribute("orientation")}}}],[{key:"observedAttributes",get:function h(){return["min","size","modifiers","orientation","position"]}}]);return k}(LayoutItem);var TabLayoutGroup=function(k){_inherits(g,k);var j=_createSuper(g);function g(){var a;_classCallCheck(this,g);a=j.call(this);a._properties.position="top";a._properties.label="TabGroup";return a}_createClass(g,[{key:"position",get:function h(){return this._properties.position},set:function i(a){this._setProperty("position",a)}},{key:"render",value:function l(){var a=this;_get(_getPrototypeOf(g.prototype),"render",this).call(this);if(!a.hasAttribute("position")&&a.position){a.setAttribute("position","top")}}}],[{key:"observedAttributes",get:function h(){return["min","size","modifiers","orientation","position"]}}]);return g}(LayoutGroup);var TabLayoutItem=function(d){_inherits(e,d);var f=_createSuper(e);function e(){var a;_classCallCheck(this,e);a=f.call(this);a._properties.label="TabItem";return a}return e}(LayoutGroup);(function(j){j.jqx.jqxWidget("jqxSplitLayout","",{});j.extend(j.jqx._jqxSplitLayout.prototype,{defineInstance:function l(){var a={dataSource:null,ready:null,orientation:"vertical"};if(this===j.jqx._jqxSplitLayout.prototype){return a}j.extend(true,this,a);return a},createInstance:function i(){var a=this;this._properties={dataSource:null,ready:null,orientation:"vertical"};var a=this;a.layout=document.createElement("jqx-split-layout");a.layout.style.width="100%";a.layout.style.height="100%";a.element.className+=a.toThemeProperty("jqx-split-layout-component jqx-rc-all jqx-widget");a.layout.dataSource=a.dataSource;a.layout.orientation=a.orientation;a.layout.ready=a.ready;a.element.appendChild(a.layout)},propertyChangedHandler:function h(d,c,e,a){var b=d;if(e!=a||a instanceof Object){if(!b.layout){return}b.layout[c]=a}},render:function m(){var a=this;if(!a.layout){return}a.layout.render()},refresh:function n(){var a=this;if(!a.layout){return}if(!a.layout.isRendered){return}a.layout.refresh()},dataBind:function k(){var a=this;if(!a.layout){return}a.layout.dataBind()}})})(jqxBaseFramework);var SplitLayout=function(V){_inherits(au,V);var aw=_createSuper(au);function au(){var a;_classCallCheck(this,au);a=aw.call(this);a._properties={dataSource:null,orientation:"vertical"};return a}_createClass(au,[{key:"orientation",get:function S(){return this._properties.orientation},set:function aj(a){this._properties.orientation=a}},{key:"dataSource",get:function S(){return this._properties.dataSource},set:function aj(a){this._properties.dataSource=a}},{key:"_dragStart",value:function Q(a){a.stopPropagation();a.preventDefault()}},{key:"_leaveHandler",value:function Z(){var a=this;if(a._resizeDetails){return}a._handleButtonsVisibility(null);a._hideSplitter();requestAnimationFrame(function(){})}},{key:"_enterHandler",value:function ad(){var a=this;if(a._resizeDetails){return}a._handleButtonsVisibility(a._selectedItem);a._updateSplitter();requestAnimationFrame(function(){a.classList.add("outline")})}},{key:"template",value:function at(){return'<div class="jqx-container" id="container" role="presentation"><jqx-layout-group data-id="root" id="itemsContainer"></jqx-layout-group><div root-splitter id="splitter" class="jqx-layout-splitter"></div>'}},{key:"propertyChangedHandler",value:function aa(d,c,a){var b=this;switch(d){case"orientation":if(b.$.itemsContainer){b.$.itemsContainer.orientation=b.orientation}break;case"dataSource":b.dataBind();break;case"selectedIndex":b._handleItemClick(b.getItem(a+""),true);break;default:_get(_getPrototypeOf(au.prototype),"propertyChangedHandler",this).call(this,d,c,a);break}}},{key:"dataBind",value:function am(){var a=this;a.$.itemsContainer.innerHTML="";var c="";var b=function b(m,f){for(var i=0;i<m.length;i++){var o=m[i];var n=o.size;var j=o.min;var p=o.modifiers;var d=o.type;var h=o.position;var k=o.orientation?o.orientation:"vertical";var l=o.id;var q=o.label;var e="";if(l!==undefined){e+='id="'.concat(l,'" ')}if(n!==undefined){e+='size="'.concat(n,'" ')}if(q!==undefined){e+='label="'.concat(q,'" ')}if(j!==undefined){e+='min="'.concat(j,'" ')}if(p!==undefined){e+='modifiers="'.concat(p,'" ')}if(h!==undefined){e+='position="'.concat(h,'" ')}if(o.items){e+="orientation=".concat(k," ");if(d==="tabs"){c+="<jqx-tab-layout-group ".concat(e,">");b(o.items,true);c+="</jqx-tab-layout-group>"}else{c+="<jqx-layout-group ".concat(e,">");b(o.items);c+="</jqx-layout-group>"}}else{var g=o.content||"";if(f){c+="<jqx-tab-layout-item ".concat(e,">")+g+"</jqx-tab-layout-item>"}else{if(d==="tabs"){c+="<jqx-tab-layout-group>";c+="<jqx-tab-layout-item ".concat(e,">")+g+"</jqx-tab-layout-item>";c+="</jqx-tab-layout-group>"}else{c+="<jqx-layout-item ".concat(e,">")+g+"</jqx-layout-item>"}}}}};b(a.dataSource);a.$.itemsContainer.innerHTML=c;a.refresh()}},{key:"render",value:function af(){var a=this;a.setAttribute("role","group");if(a.selectedIndex){a._handleItemClick(a.getItem(a.selectedIndex+""),true)}var b=function b(){if(!a.dataSource){a.dataSource=a._getDataSource(a._getLayout())}else{a.dataBind()}a.$.itemsContainer.orientation=a.orientation;a.refresh();a._updateSplitter();a.isRendered=true;a.classList.add("outline");if(a.ready){a.ready()}};if(document.readyState==="complete"){b()}else{window.addEventListener("load",function(){b()})}}},{key:"connectedCallback",value:function U(){var a=this;var b=function b(){var c=document.createDocumentFragment();while(a.childNodes.length){c.appendChild(a.firstChild)}a.innerHTML=a.template();a.classList.add("jqx-widget");a.$={container:a.querySelector("#container"),itemsContainer:a.querySelector("#itemsContainer"),splitter:a.querySelector("#splitter")};delete a.$.container.id;delete a.$.itemsContainer.id;delete a.$.splitter.id;a.$.itemsContainer.appendChild(c);a.classList.add("jqx-split-layout");document.addEventListener("pointerdown",function(d){a._documentDownHandler(d)});document.addEventListener("pointermove",function(d){a._documentMoveHandler(d)});document.addEventListener("pointerup",function(d){a._documentUpHandler(d)});document.addEventListener("selectstart",function(d){a._documentSelectStartHandler(d)});document.addEventListener("keyup",function(d){a._keyUpHandler(d)});a.addEventListener("mouseleave",function(d){a._leaveHandler(d)});a.addEventListener("mouseenter",function(d){a._enterHandler(d)});a.addEventListener("dragStart",function(d){a._dragStart(d)});a.render()};if(document.readyState==="complete"){b()}else{window.addEventListener("load",function(){b()})}}},{key:"getItem",value:function aA(d){var a=this;if(d===undefined||d===null){return}d=(d+"").split(".");var e=a._getDataSource(a._getLayout()),b;for(var c=0;c<d.length;c++){b=e[d[c]];if(!b){break}e=b.items}return b}},{key:"_documentDownHandler",value:function Y(b){var c=this,a=b.target;if(c.contains(a)&&a.closest){c._target=a;c._updateSplitter()}}},{key:"_documentMoveHandler",value:function ah(w){var F=this,n=w.target,j=F._contextMenu;if(j&&!JQX.Utilities.Core.isMobile){if(j.querySelector(".jqx-layout-context-menu-item[hover]")){var y=j.children;for(var v=0;v<y.length;v++){y[v].removeAttribute("hover")}}if(j.contains(n)&&n.closest&&n.closest(".jqx-layout-context-menu-item")){n.setAttribute("hover","")}}if(F._dragDetails){var s=Math.abs(F._dragDetails.pageX-w.pageX);var t=Math.abs(F._dragDetails.pageY-w.pageY);if(t<=5&&s<=5){return}if(!F._dragDetails.feedback.parentElement){document.body.appendChild(F._dragDetails.feedback);document.body.appendChild(F._dragDetails.overlay);setTimeout(function(){F._dragDetails.feedback.classList.add("dragging")},100)}F._dragDetails.dragging=true;F._dragDetails.feedback.style.left=w.pageX-F._dragDetails.feedback.offsetWidth/2-5+"px";F._dragDetails.feedback.style.top=w.pageY-F._dragDetails.feedback.offsetHeight/2-5+"px";var A=document.elementsFromPoint(w.pageX,w.pageY);var D=null;var a=false;for(var v=0;v<A.length;v++){var h=A[v];if(F._dragDetails.feedback.contains(h)){continue}if(h.classList.contains("jqx-layout-tab-strip")){if(F._dragDetails.element.contains(h)){continue}D=h.parentElement;a=true;break}if((h.parentElement===F._dragDetails.parent||h===F._dragDetails.parent)&&F._dragDetails.layoutGroup.items.length===1){continue}if(F._dragDetails.element.contains(h)){continue}if(h instanceof TabLayoutItem){D=h.parentElement;break}else{if(h instanceof TabLayoutGroup){D=h;break}}}var o=function o(M,J){var aF=F.offset(M);var aD=null;var H=50;var K=J;var I=J;if(!J){I=M.offsetWidth/3;K=M.offsetHeight/3}else{H=0}var L=[{left:aF.left,top:aF.top,right:aF.left+H,bottom:aF.top+H,position:"top"},{left:aF.left+H,top:aF.top,right:aF.left+M.offsetWidth-H,bottom:aF.top+K-H,position:"top"},{left:aF.left+M.offsetWidth-H,top:aF.top,right:aF.left+M.offsetWidth,bottom:aF.top+H,position:"top"},{left:aF.left,top:aF.top+H,right:aF.left+I,bottom:aF.top+M.offsetHeight-H,position:"left"},{left:aF.left+M.offsetWidth-I,top:aF.top+H,right:aF.left+M.offsetWidth,bottom:aF.top+M.offsetHeight-H,position:"right"},{left:aF.left,top:aF.top+M.offsetHeight-H,right:aF.left+H,bottom:aF.top+M.offsetHeight,position:"bottom"},{left:aF.left+H,top:aF.top+M.offsetHeight-K+H,right:aF.left+M.offsetWidth-H,bottom:aF.top+M.offsetHeight,position:"bottom"},{left:aF.left+M.offsetWidth-H,top:aF.top+M.offsetHeight-H,right:aF.left+M.offsetWidth,bottom:aF.top+M.offsetHeight,position:"bottom"}];for(var aE=0;aE<L.length;aE++){var N=L[aE];if(N.left<=w.pageX&&w.pageX<=N.right){if(N.top<=w.pageY&&w.pageY<=N.bottom){aD=N.position;break}}}return aD};var B=F.querySelector("jqx-layout-group");var m=o(B,10);var f=null;if(!m){if(!D){F._handleDropArea(null)}else{if(a){if(D!==F._dragDetails.parent){m="center";f=D}}else{m=o(D)||"center";f=D}}}else{f=B}if(f){F._dragDetails.current=f;F._dragDetails.position=m;F._handleDropArea(f,m)}}if(F._resizeDetails){var s=Math.abs(F._resizeDetails.clientX-w.clientX);var t=Math.abs(F._resizeDetails.clientY-w.clientY);var g=F._resizeDetails.splitter;var q=F._resizeDetails.item;var r=F._resizeDetails.itemRect;var p=F._resizeDetails.previousItemRect;var u=F._resizeDetails.previousItem;var i=F._resizeDetails.nextItemRect;var G=F._resizeDetails.nextItem;var k=parseInt(q.getAttribute("min"));var E=function E(H){if(H.classList.contains("jqx-visibility-hidden")){return}H.style.right="";H.style.top="";H.style.left="";H.style.bottom=""};E(g);E(F.$.splitter);g.classList.remove("error");g.classList.add("active");if(!F._resizeDetails.dragging){if(g.classList.contains("horizontal")&&t<=5){return}else{if(g.classList.contains("vertical")&&s<=5){return}}F._resizeDetails.dragging=true}var x={clientPos:"clientX",pos:"x",size:"width",near:"left",far:"right",offsetSize:"offsetWidth"};if(g.classList.contains("horizontal")){x={clientPos:"clientY",pos:"y",size:"height",near:"top",far:"bottom",offsetSize:"offsetHeight"}}var d=function d(I){var H=F.offset(I);var J=F.offset(F);J.left++;J.top++;F.$.splitter.style.width=I.offsetWidth+"px";F.$.splitter.style.height=I.offsetHeight+"px";F.$.splitter.className=I.className;F.$.splitter.style.left=H.left-J.left+"px";F.$.splitter.style.top=H.top-J.top+"px";I.setAttribute("drag","");F.$.splitter.setAttribute("drag","")};if(g.classList.contains("last")){var e=w[x.clientPos]-F._resizeDetails.splitterRect[x.pos];var b=r[x.size]-k;if(e>b){e=b;g.classList.add("error")}if(p){var k=parseInt(u.getAttribute("min"));var c=p[x.size]-k;if(e<-c){e=-c;g.classList.add("error")}}g.style[x.near]=e+"px";var l=q[x.offsetSize]-e;q.setAttribute("size",l);if(u){var C=q[x.offsetSize]+u[x.offsetSize]-l;u.setAttribute("size",C)}}else{var e=-w[x.clientPos]+F._resizeDetails.splitterRect[x.pos];var c=r[x.size]-k;if(e>c){e=c;g.classList.add("error")}if(i){var k=parseInt(G.getAttribute("min"));var b=-i[x.size]+k;if(e<b){e=b;g.classList.add("error")}}g.style[x.far]=e+"px";var l=q[x.offsetSize]-e;q.setAttribute("size",l);if(G){var z=G[x.offsetSize]+q[x.offsetSize]-l;G.setAttribute("size",z)}}d(g)}}},{key:"_offsetTop",value:function ak(b){var a=this;if(!b){return 0}return b.offsetTop+a._offsetTop(b.offsetParent)}},{key:"_offsetLeft",value:function ac(b){var a=this;if(!b){return 0}return b.offsetLeft+a._offsetLeft(b.offsetParent)}},{key:"offset",value:function W(a){return{left:this._offsetLeft(a),top:this._offsetTop(a)}}},{key:"_keyUpHandler",value:function P(a){var b=this;if(a.key==="Escape"){if(b._dragDetails){b._dragDetails.feedback.remove();b._dragDetails.overlay.remove();b._dragDetails=null;b._handleDropArea(null)}if(b._resizeDetails){var c=b._resizeDetails;c.splitter.classList.contains("last")?c.previousItem.size=c.previousItemSize:c.nextItem.size=c.nextItem.previousItemSize;c.item.size=c.itemSize;b.refresh();b._handleItemClick(c.item);b._resizeDetails=null;return}}else{if(a.key==="Delete"){if(b._selectedItem){b._removeLayoutItem(b._selectedItem)}}}}},{key:"_endDrag",value:function ay(){var c=this;c._handleDropArea(null);if(!c._dragDetails.dragging){c._dragDetails=null;return}var a=c._dragDetails.current;var d=c._dragDetails.element;var h=c._dragDetails.position;c._handleDropArea(null);if(a){c._addTabLayoutItem(a,h,d);c._removeLayoutItem(d);if(a.parentElement&&Array.from(a.parentElement.parentElement.children).filter(function(i){if(i.classList.contains("jqx-layout-group")){return true}return false}).length===1){var e=a.parentElement;var b=e.parentElement;var g=b.parentElement;if(!(b.getAttribute("data-id")==="root"||g.getAttribute("data-id")==="root")&&g!==c){var f=Array.from(g.children).indexOf(e.parentElement);if(f>=0){g.insertBefore(e,g.children[f])}else{g.appendChild(e)}b.remove()}}c.refresh();c._updateSplitter();requestAnimationFrame(function(){c.classList.add("outline");c.querySelectorAll(".jqx-element").forEach(function(i){c.dispatchEvent(new CustomEvent("resize"))})})}c.dispatchEvent(new CustomEvent("stateChange",{type:"insert",item:d}));c._dragDetails.feedback.remove();c._dragDetails.overlay.remove();c._dragDetails=null}},{key:"_documentUpHandler",value:function al(b){var c=this,f=JQX.Utilities.Core.isMobile,a=f?document.elementFromPoint(b.pageX-window.pageXOffset,b.pageY-window.pageYOffset):b.target;if(b.button===2){return}if(c._dragDetails){c._endDrag(b)}if(c._resizeDetails){var d=c._resizeDetails;if(d.item){d.item.style.overflow=""}if(d.previousItem){d.previousItem.style.overflow=""}if(d.nextItem){d.nextItem.style.overflow=""}c.refresh();c._handleItemClick(d.item);c._resizeDetails=null;window.dispatchEvent(new Event("resize"));c.querySelectorAll(".jqx-element").forEach(function(g){g.dispatchEvent(new CustomEvent("resize"))});return}if(!c.contains(a)){return}c.classList.add("outline");if(c._target&&!a.item){if(a instanceof TabLayoutItem){c._handleItemClick(a)}else{c._handleItemClick(a.closest(".jqx-layout-item"))}}if(c._target){if(c._target!==a){delete c._target;return}if(!b.button&&a.closest(".jqx-layout-buttons-container")){var e=b.target;c._handleButtonClick(e.item,e.position)}else{if(a.closest(".jqx-layout-context-menu")&&(!f&&!b.button||f)){c._handleMenuItemClick(a.closest(".jqx-layout-context-menu-item"))}}delete c._target}}},{key:"_documentSelectStartHandler",value:function ai(a){var b=this;if(b._target){a.preventDefault()}}},{key:"_getDataSource",value:function an(f,a,d){var e=this;var h=[];if(!d){d=0}if(!a){a=""}for(var g=0;g<f.length;g++){var i=f[g];var b={label:i.label,id:i.getAttribute("data-id"),orientation:i.orientation,size:i.size,min:i.min,type:i.type,modifiers:i.modifiers,position:i.position};i.removeAttribute("index");if(i instanceof LayoutGroup){h.push(b);b.index=a!==""?a+"."+d:d.toString();i.setAttribute("index",b.index);if(i.items){var c=e._getDataSource(i.items,b.index,0);b.items=c}}else{if(i instanceof LayoutItem){if(i.items){var c=e._getDataSource(i.items,a,d);h=h.concat(c)}else{b.index=a!==""?a+"."+d:d.toString();i.setAttribute("index",b.index);h.push(b)}}}d++}return h}},{key:"_getLayout",value:function R(){var d=this;var a=!arguments.length?d.$.itemsContainer:arguments[0];if(d._buttons){d._buttons.remove()}if(d._dropArea){d._dropArea.remove()}var e=d.querySelectorAll(".jqx-layout-splitter");for(var g=0;g<e.length;g++){var b=e[g];if(b!==d.$.splitter){b.remove()}}a.items=Array.from(a.children);a.items=a.items.filter(function(i){return i!==a.tabs&&i.hasAttribute("data-id")});var h=a.items.map(function(k){if(k.classList.contains("jqx-layout-tab-strip")){return null}var i=k;var j=k instanceof LayoutGroup?k:null;if(j){i.items=d._getLayout(j)}return i});if(a!==d.$.itemsContainer){return h.filter(function(i){return i!==null&&i!==a.tabs})}var c=[];var f=a;f.items=h.filter(function(i){return i!==null&&i!==a.tabs});c.push(f);return c}},{key:"_updateSplitter",value:function aq(){var b=this;if(b._buttons&&b._dragDetails){b._buttons.remove()}b._removeSplitter();var e=b.querySelectorAll("[data-id]");for(var d=0;d<e.length;d++){var c=e[d];if(c.getAttribute("data-id")==="root"){continue}if(c.hasAttribute("role")){var a=c.getAttribute("role");if(a==="gridcell"||a==="row"||a==="columnheader"||a==="rowheader"){continue}}c.setAttribute("hover","");b._handleSplitter(c)}}},{key:"_hideSplitter",value:function av(){var a=this;var d=a.querySelectorAll("[data-id]");for(var c=0;c<d.length;c++){var b=d[c];b.removeAttribute("hover")}}},{key:"_removeSplitter",value:function ae(){var b=this;var c=b.querySelectorAll(".jqx-layout-splitter");for(var d=0;d<c.length;d++){var a=c[d];if(a!==b.$.splitter){a.remove()}}b._hideSplitter()}},{key:"_handleItemClick",value:function T(a){var b=this,d=b.selectedIndex;var c=null;if(!a){b.selectedIndex=null;b.querySelectorAll("[data-id]").forEach(function(e){e.removeAttribute("selected")});b._selectedItem=null;return}else{c=a instanceof HTMLElement?a:b.querySelector("[data-id="+a.id+"]");if(c&&c.readonly){b.selectedIndex=null;return}b.querySelectorAll("[data-id]").forEach(function(e){e.removeAttribute("selected")});if(!c){b.refresh();return}b.selectedIndex=c.getAttribute("index");c.setAttribute("selected","");c.setAttribute("hover","");b._selectedItem=c;if(c.classList.contains("jqx-hidden")){b.refresh()}b._handleButtonsVisibility(c);if(d!==b.selectedIndex){b.dispatchEvent(new CustomEvent("change"))}}b._updateSplitter()}},{key:"_handleButtonClick",value:function ao(a,d){var b=this,c=b._addLayoutItem(a,d);b.dispatchEvent(new CustomEvent("stateChange",{type:"insert",item:c}));b._handleItemClick(c,true)}},{key:"_removeLayoutItem",value:function ar(a){var b=this;if(a.getAttribute("data-id")==="root"){return}if(a instanceof LayoutItem&&a.parentElement.items.length===1){var c=a.parentElement;var d=c;while(c&&c.items&&c.items.length===1){if(c.getAttribute("data-id")==="root"){break}d=c;c=c.parentElement}if(d.getAttribute("data-id")!=="root"){d.remove()}else{if(b.allowLiveSplit){d.appendChild(document.createElement("jqx-layout-item"))}}}else{a.remove()}b.refresh();b.dispatchEvent(new CustomEvent("stateChange",{type:"delete",item:a}))}},{key:"refresh",value:function O(){var b=this;if(b._isUpdating){return}b.dataSource=b._getDataSource(b._getLayout());b.$.splitter.className="jqx-visibility-hidden jqx-layout-splitter";var a=function a(r){var o=b.getItem(r.getAttribute("index"));if(!o){return}r.style.gridTemplateColumns="";r.style.gridTemplateRows="";var q="";var m=0;var g=0;if(r instanceof TabLayoutGroup){if(r.tabs){r.tabs.remove()}var h=document.createElement("div");h.classList.add("jqx-layout-tab-strip");if(b._selectedItem&&r.contains(b._selectedItem)&&b._selectedItem instanceof TabLayoutItem){r.selectedIndex=Math.max(0,r.items.indexOf(b._selectedItem))}if(r.selectedIndex>=r.children.length){r.selectedIndex=0}for(var i=0;i<r.children.length;i++){var l=r.children[i];var f=b.getItem(l.getAttribute("index"));if(!f){continue}var k=document.createElement("div");k.classList.add("jqx-layout-tab");k.innerHTML="<label>"+f.label+'</label><span class="jqx-close-button"></span>';h.appendChild(k);l.setAttribute("tab","");l.classList.add("jqx-hidden");k.content=l;k.item=f;k.group=o;if(l.modifiers){if(l.modifiers.indexOf("close")===-1){k.querySelector(".jqx-close-button").classList.add("jqx-hidden")}}else{k.querySelector(".jqx-close-button").classList.add("jqx-hidden")}if(undefined===r.selectedIndex||i===r.selectedIndex){k.classList.add("selected");l.classList.remove("jqx-hidden");r.selectedIndex=i}k.onpointerup=function(s){if(s.target.classList.contains("jqx-close-button")&&k.close){r.selectedIndex=0;b._removeLayoutItem(b._selectedItem);b._handleItemClick(parent)}};k.onpointerdown=function(s){var t=this.closest(".jqx-layout-group");b._handleItemClick(this.content);k.close=false;if(!s.target.classList.contains("jqx-close-button")){if(f.modifiers&&f.modifiers.indexOf("drag")>=0&&t.modifiers.indexOf("drag")>=0){b._beginDrag(t,this,s)}}else{k.close=true}}}r.tabs=h;if(o.position==="top"||o.position==="left"){r.insertBefore(h,r.firstChild)}else{r.appendChild(h)}}else{for(var i=0;i<r.children.length;i++){var l=r.children[i];if(l.hasAttribute("size")){var n=l.getAttribute("size");var j=parseFloat(n);var e=r.orientation==="vertical"?r.offsetWidth:r.offsetHeight;var p=n.indexOf("%")>=0?parseFloat(n):parseFloat(j/e*100);m+=p;g++;if(g===r.children.length){if(m<100){q+="1fr ";m=100;continue}else{if(m>100){m-=p;p=100-m;m=100}}}else{if(m>100||p===0){g=r.children.length;m=0;break}}q+=p+"% ";continue}q+="1fr "}if(g===r.children.length){if(m<99||m>100){q="";for(var i=0;i<r.children.length;i++){var l=r.children[i];l.removeAttribute("size");q+="1fr "}}}if(r.orientation==="vertical"){r.style.gridTemplateColumns=q}else{r.style.gridTemplateRows=q}}r.items=Array.from(r.children);r.items=r.items.filter(function(s){return s!==r.tabs})};var c=b.querySelectorAll(".jqx-layout-group");for(var d=0;d<c.length;d++){a(c[d])}}},{key:"_beginDrag",value:function ab(a,e,i){var d=this;if(d._dragDetails){d._dragDetails.feedback.remove()}var h=document.createElement("div");var g=document.createElement("div");var c=a.querySelector(".jqx-layout-tab-strip");var b="";if(c){for(var f=0;f<Array.from(c.children).length;f++){if(f===a.selectedIndex){b=c.children[f].innerText}}}h.innerHTML='<jqx-split-layout><jqx-tab-layout-group><jqx-tab-layout-item label="'.concat(b,'"></jqx-tab-layout-item></jqx-tab-layout-group></jqx-split-layout>');d._feedback=h;d._feedback.classList.add("jqx-split-layout-feedback","jqx-split-layout","jqx-widget");g.classList.add("jqx-split-layout-overlay");d._dragDetails={element:e.content,item:e.item,layoutGroup:e.group,parent:a,overlay:g,feedback:h,pageX:i.pageX,pageY:i.pageY}}},{key:"moveChildren",value:function ag(b,d){d.innerHTML="";var c=b;while(c.firstChild){var a=c.firstChild;d.appendChild(a)}}},{key:"createLayoutItem",value:function az(d,g){var c=this;var f=function f(){var h=document.createElement("jqx-layout-item");h.innerHTML="";c.dispatchEvent(new CustomEvent("createItem",{type:"layoutItem",item:h}));return h};var a=function a(){var h=document.createElement("jqx-tab-layout-item");h.innerHTML="";c.dispatchEvent(new CustomEvent("createItem",{type:"tabLayoutItem",item:h}));return h};var b=function b(i){var j=document.createElement("jqx-layout-group");var h=i==="top"||i==="bottom"?"horizontal":"vertical";c.dispatchEvent(new CustomEvent("createGroup",{type:"layoutGroup",item:j}));j.setAttribute("orientation",h);j.orientation=h;return j};var e=function e(i){var j=document.createElement("jqx-tab-layout-group");var h=i==="top"||i==="bottom"?"horizontal":"vertical";j.setAttribute("orientation",h);j.orientation=h;c.dispatchEvent(new CustomEvent("tabLayoutGroup",{type:"layoutGroup",item:j}));return j};if(d==="layoutItem"||!d){return f()}else{if(d==="tabLayoutItem"||!d){return a()}else{if(d==="tabLayoutGroup"){return e(g)}else{return b(g)}}}}},{key:"_addTabLayoutItem",value:function aB(h,g,j){var d=this;var f=d.createLayoutItem("tabLayoutItem");var i=h.closest("jqx-tab-layout-group");var c;if(j){f.label=j.label;f.modifiers=j.modifiers;d.moveChildren(j,f)}var a=function a(n){for(var o=0;o<n.children.length;o++){var m=n.children[o];m.removeAttribute("size")}n.removeAttribute("size")};var k=function k(n){h.removeAttribute("size");if(h.querySelector("jqx-layout-group")){d._addLayoutItem(h.querySelector("jqx-layout-group"),n)}else{c=d.createLayoutItem("layoutGroup",n);var m=d.createLayoutItem();d.moveChildren(h,m);if(n==="top"||n==="left"){c.appendChild(d.createLayoutItem());c.appendChild(m)}else{c.appendChild(m);c.appendChild(d.createLayoutItem())}h.appendChild(c)}};var l=function l(p,q){var o=h.parentElement;var n=h;var m=d.createLayoutItem("layoutGroup",q);o.insertBefore(m,n);if(q==="top"||q==="left"){m.append(p);m.appendChild(n)}else{m.appendChild(n);m.append(p)}if(n.getAttribute("data-id")==="root"){n.setAttribute("data-id",m.getAttribute("data-id"));m.setAttribute("data-id","root");d.$.itemsContainer=m}a(n);a(o)};if(j){switch(g){case"center":if(h instanceof TabLayoutGroup||h instanceof TabLayoutItem){i.appendChild(f)}else{var e=d.createLayoutItem("tabLayoutGroup","top");e.appendChild(f);if(h instanceof LayoutGroup&&!(h instanceof TabLayoutItem)){h.appendChild(e);a(h)}else{if(h instanceof LayoutItem){c=d.createLayoutItem("layoutGroup");h.parentElement.insertBefore(c,h);c.appendChild(h);c.appendChild(e);a(c)}}}break;case"left":case"right":var e=d.createLayoutItem("tabLayoutGroup","top");e.appendChild(f);if(h.getAttribute("data-id")==="root"){e.position=g;l(e,g)}else{l(e,g)}break;case"top":case"bottom":var e=d.createLayoutItem("tabLayoutGroup","top");e.appendChild(f);if(h.getAttribute("data-id")==="root"){e.position=g;l(e,g)}else{l(e,g)}break}return}switch(g){case"center":if(h instanceof TabLayoutGroup||h instanceof TabLayoutItem){i.appendChild(f)}else{k()}break;case"left":case"right":if(h instanceof TabLayoutGroup){var b=h.querySelector("jqx-tab-layout-item");if(b&&g==="left"){h.insertBefore(f,b)}else{h.appendChild(f)}}else{if(h instanceof TabLayoutItem){var e=d.createLayoutItem("tabLayoutGroup","top");var i=h.parentElement;e.appendChild(f);c=d.createLayoutItem("layoutGroup");i.parentElement.insertBefore(c,i);if(g==="right"){c.appendChild(i);c.appendChild(e)}else{if(g==="left"){c.appendChild(e);c.appendChild(i)}}}else{if(j){var e=d.createLayoutItem("tabLayoutGroup","top");e.appendChild(f);if(h instanceof LayoutGroup){h.insertBefore(h.firstChild,e)}else{if(h instanceof LayoutItem){c=d.createLayoutItem("layoutGroup");c.orientation=i.orientation;c.setAttribute("orientation",i.orientation);h.removeAttribute("size");h.parentElement.insertBefore(c,h);c.appendChild(h);c.appendChild(e)}}}else{k(g)}}}break;case"top":case"bottom":if(h instanceof TabLayoutGroup){c=d.createLayoutItem("layoutGroup","top");h.removeAttribute("size");h.parentElement.insertBefore(c,h);if(g==="top"){c.appendChild(d.createLayoutItem());c.appendChild(h)}else{c.appendChild(h);c.appendChild(d.createLayoutItem())}}else{k(g)}break}d.refresh()}},{key:"_addLayoutItem",value:function X(i,h,l){var d=this;if(!i){return}var a=function a(n){for(var o=0;o<n.children.length;o++){var m=n.children[o];m.removeAttribute("size")}n.removeAttribute("size")};var b=i instanceof TabLayoutItem||i instanceof TabLayoutGroup||l&&l instanceof TabLayoutItem;if(b){return d._addTabLayoutItem(i,h,l)}var f=d.createLayoutItem();var k=i.closest(".jqx-layout-group");var c;if(l){d.moveChildren(l,f)}if(h==="center"){if(i instanceof LayoutGroup){c=k;c.appendChild(f);a(c);d.refresh();return f}else{if(i instanceof LayoutItem){c=d.createLayoutItem("layoutGroup");c.orientation=k.orientation;c.setAttribute("orientation",k.orientation);i.removeAttribute("size");i.parentElement.insertBefore(c,i);c.appendChild(i);c.appendChild(f);d.refresh();return c}}}if(k.orientation==="vertical"&&(h==="left"||h==="right")||k.orientation==="horizontal"&&(h==="top"||h==="bottom")){c=k;if(i instanceof LayoutGroup){if(h==="left"||h==="top"){c.insertBefore(f,c.children[0])}else{c.appendChild(f)}a(i)}else{var g=c.items,j=Math.max(0,g.indexOf(i)+(h==="top"||h==="left"?0:1));c.insertBefore(f,g[j]);a(c)}}else{if(i instanceof LayoutGroup){var k=i.parentElement;c=i;var e=d.createLayoutItem("layoutGroup",h);k.insertBefore(e,c);if(h==="top"||h==="left"){e.append(f);e.appendChild(c)}else{e.appendChild(c);e.append(f)}if(c.getAttribute("data-id")==="root"){c.setAttribute("data-id",e.getAttribute("data-id"));e.setAttribute("data-id","root");d.$.itemsContainer=e}a(k)}else{c=d.createLayoutItem("layoutGroup",h);k.insertBefore(c,i);if(h==="top"||h==="left"){c.appendChild(f);c.appendChild(i)}else{c.appendChild(i);c.appendChild(f)}a(c)}}d.refresh();return f}},{key:"_handleButtonsVisibility",value:function aC(a){var b=this;if(!b._buttons){b._buttons=document.createElement("div");b._buttons.classList.add("jqx-layout-buttons-container");b._buttons.innerHTML='<div role="button" position="top"></div>\n                                       <div role="button" position="bottom"></div>\n                                       <div role="button" position="center"></div>\n                                       <div role="button" position="left"></div>\n                                       <div role="button" position="right"></div>'}if(!a){if(b._buttons.parentElement){b._buttons.parentElement.removeChild(b._buttons);return}}if(a){var d=a._buttonPosition||[],c=b._buttons.children;for(var f=0;f<c.length;f++){var e=c[f];e.position=e.getAttribute("position");e.item=a;d.length&&d.indexOf(e.getAttribute("position"))<0?e.classList.add("jqx-hidden"):e.classList.remove("jqx-hidden");e.onmouseenter=function(){e.setAttribute("hover","")};e.onmouseleave=function(){e.removeAttribute("hover")}}if(b.allowLiveSplit&&b._buttons.parentElement!==a){a.appendChild(b._buttons)}}}},{key:"_handleDropArea",value:function ax(a){var d=arguments.length>1&&arguments[1]!==undefined?arguments[1]:"center";var b=this;var c=function c(e){var f=50;switch(e){case"left":b._dropArea.style.top="0px";b._dropArea.style.left="0px";b._dropArea.style.width=f+"%";b._dropArea.style.height="100%";break;case"right":b._dropArea.style.top="0px";b._dropArea.style.left="calc(100% - ".concat(f,"%)");b._dropArea.style.width=f+"%";b._dropArea.style.height="100%";break;case"top":b._dropArea.style.top="0px";b._dropArea.style.left="0px";b._dropArea.style.width="100%";b._dropArea.style.height=f+"%";break;case"bottom":b._dropArea.style.top="calc(100% - ".concat(f,"%)");b._dropArea.style.left="0px";b._dropArea.style.width="100%";b._dropArea.style.height=f+"%";break;case"center":b._dropArea.style.top="0px";b._dropArea.style.left="0px";b._dropArea.style.width="100%";b._dropArea.style.height="100%";break}};if(b._dropArea&&b._dropArea.parentElement===a){c(d);return}if(b._dropArea){b._dropArea.remove()}if(!b._dragDetails||!a){return}b._dropArea=document.createElement("div");b._dropArea.classList.add("jqx-layout-drop-area");a.appendChild(b._dropArea);b._dropArea.style.opacity=1;c(d)}},{key:"_handleSplitter",value:function ap(b){var c=this;if(!b){return}if(b.hasAttribute("tab")){b=b.parentElement}if(b._splitter){b._splitter.remove()}if(!b._splitter){b._splitter=document.createElement("div")}if(c._dragDetails&&c._dragDetails.dragging){b._splitter.remove();return}if(b.modifiers.indexOf("resize")===-1){return}b.appendChild(b._splitter);var d=b.parentElement;if(d){b._splitter.className="jqx-layout-splitter";b._splitter.item=b;b._splitter.removeAttribute("drag");var e=d.orientation;if(b.nextElementSibling&&b.nextElementSibling.hasAttribute("data-id")){b._splitter.classList.add(e)}else{if(b.previousElementSibling&&b.previousElementSibling.hasAttribute("data-id")){b._splitter.classList.add(e);b._splitter.classList.add("last")}}var a=function a(f){f.style.top="";f.style.left="";f.style.bottom="";f.style.right="";f.onpointerdown=function(g){var h=g.target.item;h.style.overflow="hidden";c._resizeDetails={splitter:g.target,splitterRect:g.target.getBoundingClientRect(),itemRect:h.getBoundingClientRect(),item:h,itemSize:h.size,group:h.parentElement,clientX:g.clientX,clientY:g.clientY};if(c._selectedItem!==h){c.querySelectorAll("[data-id]").forEach(function(i){i.removeAttribute("selected")});c.selectedIndex=h.getAttribute("index");h.setAttribute("selected","");c._selectedItem=h;c._handleButtonsVisibility(h)}if(h.previousElementSibling&&h.previousElementSibling.hasAttribute("data-id")){c._resizeDetails.previousItemRect=h.previousElementSibling.getBoundingClientRect();c._resizeDetails.previousItem=h.previousElementSibling;c._resizeDetails.previousItemSize=h.previousElementSibling.size;c._resizeDetails.previousItem.style.overflow="hidden"}else{c._resizeDetails.previousItemRect=null;c._resizeDetails.previousItem=null}if(h.nextElementSibling&&h.nextElementSibling.hasAttribute("data-id")){c._resizeDetails.nextItemRect=h.nextElementSibling.getBoundingClientRect();c._resizeDetails.nextItem=h.nextElementSibling;c._resizeDetails.nextItemSize=h.nextElementSibling.size;c._resizeDetails.nextItem.style.overflow="hidden"}else{c._resizeDetails.nextItemRect=null;c._resizeDetails.nextItem=null}}};a(b._splitter)}}}]);return au}(_wrapNativeSuper(HTMLElement));customElements.define("jqx-layout-group",LayoutGroup);customElements.define("jqx-layout-item",LayoutItem);customElements.define("jqx-tab-layout-group",TabLayoutGroup);customElements.define("jqx-tab-layout-item",TabLayoutItem);customElements.define("jqx-split-layout",SplitLayout);
+/* tslint:disable */
+/* eslint-disable */
+(function(){
+    if (typeof document === 'undefined') { 
+        return;
+    }
+if (!window.JQX) {
+    window.JQX = {
+        Utilities: {
+            Core: {
+                isMobile() {
+                    var isMobile = /(iphone|ipod|ipad|android|iemobile|blackberry|bada)/.test(window.navigator.userAgent.toLowerCase());
+                    var iOS = function () {
+                        return [
+                            'iPad Simulator',
+                            'iPhone Simulator',
+                            'iPod Simulator',
+                            'iPad',
+                            'iPhone',
+                            'iPod'
+                        ].includes(navigator.platform)
+                            // iPad on iOS 13 detection
+                            || (navigator.userAgent.includes('Mac') && 'ontouchend' in document)
+                    }
+
+                    if (!isMobile) {
+                        return iOS();
+                    }
+
+                    return isMobile;
+                }
+            }
+        }
+    }
+}
+
+
+class LayoutItem extends HTMLElement {
+    constructor() {
+        super();
+
+        this._properties = {
+            'min': 50,
+            'label': 'Item',
+            'modifiers': ['resize', 'drag', 'close'],
+            'size': null
+        }
+    }
+
+    _setProperty(property, value) {
+        var that = this;
+
+        if (that._properties[property] === value) {
+            return;
+        }
+
+        that._properties[property] = value;
+        that._updating = true;
+
+        if (property === 'disabled' || property === 'modifiers') {
+            if (value) {
+                that.setAttribute(property, value);
+            }
+            else {
+                that.removeAttribute(property);
+            }
+        }
+        else {
+            if (value === null) {
+                that.removeAttribute(property);
+            }
+            else {
+                that.setAttribute(property, value);
+            }
+        }
+
+        if (!that.isCompleted) {
+            return;
+        }
+
+        var layout = that.closest('jqx-layout');
+
+        if (layout) {
+            if (!layout._resizeDetails && !layout._updating && layout.isRendered) {
+                layout.refresh();
+            }
+        }
+        that._updating = false;
+    }
+
+    get label() {
+        return this._properties['label'];
+    }
+
+    set label(value) {
+        this._setProperty('label', value);
+    }
+
+    get modifiers() {
+        return this._properties['modifiers'];
+    }
+
+    set modifiers(value) {
+        this._setProperty('modifiers', value);
+    }
+
+    get min() {
+        return this._properties['min'];
+    }
+
+    set min(value) {
+        this._setProperty('min', value);
+    }
+
+    get size() {
+        return this._properties['size'];
+    }
+
+    set size(value) {
+        if (value !== null) {
+            if (typeof value === 'string') {
+                this._setProperty('size', value);
+            }
+            else {
+                this._setProperty('size', Math.max(this.min, value));
+            }
+        }
+        else {
+            this._setProperty('size', value);
+        }
+    }
+
+    static get observedAttributes() {
+        return ['min', 'size', 'label', 'modifiers'];
+    }
+
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        var that = this;
+
+        if (oldValue === newValue) {
+            return;
+        }
+
+        if (!that.isCompleted) {
+            return;
+        }
+
+        if (name === 'size') {
+            if (!that._updating) {
+                if (newValue === null) {
+                    this[name] = null;
+                    return;
+                }
+
+                that[name] = Math.max(that.min, parseInt(newValue));
+            }
+        }
+        else {
+            that[name] = newValue;
+        }
+    }
+
+    connectedCallback() {
+        if (!this.isCompleted) {
+            this.render();
+        }
+    }
+
+    whenRendered(callback) {
+        var that = this;
+
+        if (that.isRendered) {
+            callback();
+            return;
+        }
+
+        if (!that.whenRenderedCallbacks) {
+            that.whenRenderedCallbacks = [];
+        }
+
+        that.whenRenderedCallbacks.push(callback);
+    }
+
+    render() {
+        var that = this;
+
+        if (!that.hasAttribute('data-id')) {
+            that.setAttribute('data-id', 'id' + Math.random().toString(16).slice(2));
+        }
+
+        if (!that.hasAttribute('label')) {
+            that.setAttribute('label', that.label);
+        }
+
+        if (!that.hasAttribute('min')) {
+            that.setAttribute('min', that.min);
+        }
+
+        if (!that.hasAttribute('label')) {
+            that.setAttribute('label', that.label);
+        }
+
+        if (!that.hasAttribute('modifiers')) {
+            that.setAttribute('modifiers', that.modifiers);
+        }
+
+        for (var i = 0; i < that.attributes.length; i++) {
+            var attribute = that.attributes[i];
+            var attributeName = attribute.name;
+            var attributeValue = attribute.value;
+
+            if (!isNaN(attributeValue) && (attributeName === 'min' || attributeName === 'size')) {
+                that._properties[attributeName] = parseInt(attributeValue);
+                continue;
+            }
+
+            that._properties[attributeName] = attributeValue;
+        }
+
+        that.classList.add('jqx-layout-item');
+
+        that.isCompleted = true;
+
+        if (that.whenRenderedCallbacks) {
+            for (var i = 0; i < that.whenRenderedCallbacks.length; i++) {
+                that.whenRenderedCallbacks[i]();
+            }
+
+            that.whenRenderedCallbacks = [];
+        }
+    }
+}
+
+class LayoutGroup extends LayoutItem {
+    constructor() {
+        super();
+
+        this._properties['label'] = 'Group';
+        this._properties['orientation'] = 'vertical'
+    }
+
+    get orientation() {
+        return this._properties.orientation;
+    }
+
+    set orientation(value) {
+        this._setProperty('orientation', value);
+    }
+
+    static get observedAttributes() {
+        return ['min', 'size', 'modifiers', 'orientation', 'position'];
+    }
+
+    render() {
+        var that = this;
+
+        super.render();
+
+        that.className = 'jqx-layout-group';
+
+        if (!that.hasAttribute('orientation')) {
+            that.setAttribute('orientation', that._properties['orientation']);
+        }
+        else {
+            that._properties['orientation'] = that.getAttribute('orientation');
+        }
+    }
+}
+
+class TabLayoutGroup extends LayoutGroup {
+    constructor() {
+        super();
+        this._properties['position'] = 'top'
+        this._properties['label'] = 'TabGroup';
+    }
+
+    get position() {
+        return this._properties.position;
+    }
+
+    set position(value) {
+        this._setProperty('position', value);
+    }
+
+    render() {
+        var that = this;
+
+        super.render();
+
+        if (!that.hasAttribute('position') && that.position) {
+            that.setAttribute('position', 'top');
+        }
+    }
+
+    static get observedAttributes() {
+        return ['min', 'size', 'modifiers', 'orientation', 'position'];
+    }
+}
+
+class TabLayoutItem extends LayoutGroup {
+    constructor() {
+        super();
+        this._properties['label'] = 'TabItem';
+    }
+}
+
+
+(function ($) {
+    "use strict";
+    $.jqx.jqxWidget("jqxSplitLayout", "", {});
+
+    $.extend($.jqx._jqxSplitLayout.prototype, {
+        defineInstance: function () {
+            var settings = {
+                'dataSource': null,
+                'ready': null,
+                'orientation': 'vertical'
+            };
+
+            if (this === $.jqx._jqxSplitLayout.prototype) {
+                return settings;
+            }
+
+            $.extend(true, this, settings);
+            return settings;
+        },
+
+        createInstance: function () {
+            var that = this;
+            this._properties = {
+                'dataSource': null,
+                'ready': null,
+                'orientation': 'vertical'
+            }
+
+            var that = this;
+
+            that.layout = document.createElement('jqx-split-layout');
+            that.layout.style.width = '100%';
+            that.layout.style.height = '100%';
+            that.element.className += that.toThemeProperty("jqx-split-layout-component jqx-rc-all jqx-widget");
+            that.layout.dataSource = that.dataSource;
+            that.layout.orientation = that.orientation;
+            that.layout.ready = that.ready;
+            that.element.appendChild(that.layout);
+        },
+
+        propertyChangedHandler: function (object, key, oldValue, value) {
+            var that = object;
+
+            if (oldValue != value || value instanceof Object) {
+                if (!that.layout) {
+                    return;
+                }
+
+                that.layout[key] = value;
+            }
+        },
+
+        render: function () {
+            var that = this;
+
+            if (!that.layout) {
+                return;
+            }
+
+            that.layout.render();
+        },
+
+        refresh() {
+            var that = this;
+
+            if (!that.layout) {
+                return;
+            }
+
+            if (!that.layout.isRendered) {
+                return;
+            }
+
+            that.layout.refresh();
+        },
+
+        dataBind() {
+            var that = this;
+
+            if (!that.layout) {
+                return;
+            }
+
+            that.layout.dataBind();
+        }
+    });
+})(jqxBaseFramework);
+
+class SplitLayout extends HTMLElement {
+    constructor() {
+        super();
+
+        this._properties = {
+            'dataSource': null,
+            'orientation': 'vertical'
+        }
+    }
+
+
+    get orientation() {
+        return this._properties['orientation'];
+    }
+
+    set orientation(value) {
+        this._properties['orientation'] = value;
+    }
+
+    get dataSource() {
+        return this._properties['dataSource'];
+    }
+
+    set dataSource(value) {
+        this._properties['dataSource'] = value;
+    }
+
+
+    _dragStart(event) {
+        event.stopPropagation();
+        event.preventDefault();
+    }
+
+    _leaveHandler() {
+        var that = this;
+
+        if (that._resizeDetails) {
+            return;
+        }
+
+        that._handleButtonsVisibility(null);
+        that._hideSplitter();
+
+        requestAnimationFrame(function () {
+            //       that.classList.remove('outline');
+        })
+    }
+
+    _enterHandler() {
+        var that = this;
+
+        if (that._resizeDetails) {
+            return;
+        }
+
+        that._handleButtonsVisibility(that._selectedItem);
+
+        that._updateSplitter();
+
+        requestAnimationFrame(function () {
+            that.classList.add('outline');
+        })
+    }
+
+    /**
+    * Element's HTML template.
+    */
+    template() {
+        return '<div class="jqx-container" id="container" role="presentation"><jqx-layout-group data-id="root" id="itemsContainer"></jqx-layout-group><div root-splitter id="splitter" class="jqx-layout-splitter"></div>';
+    }
+
+    /**
+    * Updates the element when a property is changed.
+    * @param {string} propertyName The name of the property.
+    * @param {number/string} oldValue The previously entered value. Max, min and value are of type Number. The rest are of type String.
+    * @param {number/string} newValue The new entered value. Max, min and value are of type Number. The rest are of type String.
+    */
+    propertyChangedHandler(propertyName, oldValue, newValue) {
+        var that = this;
+
+        switch (propertyName) {
+            case 'orientation':
+                if (that.$.itemsContainer) {
+                    that.$.itemsContainer.orientation = that.orientation;
+                }
+                break;
+            case 'dataSource':
+                that.dataBind();
+                break;
+            case 'selectedIndex':
+                that._handleItemClick(that.getItem(newValue + ''), true);
+                break;
+            default:
+                super.propertyChangedHandler(propertyName, oldValue, newValue);
+                break;
+        }
+    }
+
+    dataBind() {
+        var that = this;
+
+        that.$.itemsContainer.innerHTML = '';
+
+        var template = '';
+        var processDataSource = function (dataSource, isTabLayoutGroup) {
+            for (var i = 0; i < dataSource.length; i++) {
+                var item = dataSource[i];
+
+                var size = item.size;
+                var min = item.min;
+                var modifiers = item.modifiers;
+                var type = item.type;
+                var position = item.position;
+                var orientation = item.orientation ? item.orientation : 'vertical';
+                var id = item.id;
+                var label = item.label;
+
+                var props = '';
+
+                if (id !== undefined) {
+                    props += `id="${id}" `
+                }
+
+                if (size !== undefined) {
+                    props += `size="${size}" `
+                }
+
+                if (label !== undefined) {
+                    props += `label="${label}" `
+                }
+
+
+                if (min !== undefined) {
+                    props += `min="${min}" `
+                }
+
+                if (modifiers !== undefined) {
+                    props += `modifiers="${modifiers}" `
+                }
+
+                if (position !== undefined) {
+                    props += `position="${position}" `
+                }
+
+                if (item.items) {
+                    props += `orientation=${orientation} `
+
+                    if (type === 'tabs') {
+                        template += `<jqx-tab-layout-group ${props}>`;
+                        processDataSource(item.items, true);
+                        template += '</jqx-tab-layout-group>'
+                    }
+                    else {
+                        template += `<jqx-layout-group ${props}>`;
+                        processDataSource(item.items);
+                        template += '</jqx-layout-group>'
+                    }
+                }
+                else {
+                    var content = item.content || '';
+                    if (isTabLayoutGroup) {
+                        template += `<jqx-tab-layout-item ${props}>` + content + '</jqx-tab-layout-item>';
+                    }
+                    else {
+                        if (type === 'tabs') {
+                            template += `<jqx-tab-layout-group>`;
+                            template += `<jqx-tab-layout-item ${props}>` + content + '</jqx-tab-layout-item>';
+                            template += '</jqx-tab-layout-group>'
+                        }
+                        else {
+                            template += `<jqx-layout-item ${props}>` + content + '</jqx-layout-item>';
+                        }
+                    }
+                }
+            }
+        }
+
+        processDataSource(that.dataSource);
+        that.$.itemsContainer.innerHTML = template;
+        that.refresh();
+    }
+
+
+    /**
+     * Element's render funciton
+     */
+    render() {
+        var that = this;
+
+        that.setAttribute('role', 'group');
+
+        if (that.selectedIndex) {
+            that._handleItemClick(that.getItem(that.selectedIndex + ''), true);
+        }
+
+
+        var render = (function () {
+            if (!that.dataSource) {
+                that.dataSource = that._getDataSource(that._getLayout());
+            }
+            else {
+                that.dataBind();
+            }
+
+            that.$.itemsContainer.orientation = that.orientation;
+
+            that.refresh();
+            that._updateSplitter();
+            that.isRendered = true;
+            that.classList.add('outline');
+
+            if (that.ready) {
+                that.ready();
+            }
+        })
+
+        if (document.readyState === 'complete') {
+            render();
+        }
+        else {
+            window.addEventListener('load', (function () {
+                render();
+            }));
+        }
+    }
+
+    connectedCallback() {
+        var that = this;
+
+        var setup = function () {
+            var fragment = document.createDocumentFragment();
+
+            while (that.childNodes.length) {
+                fragment.appendChild(that.firstChild);
+            }
+
+            that.innerHTML = that.template();
+            that.classList.add('jqx-widget');
+            that.$ = {
+                container: that.querySelector("#container"),
+                itemsContainer: that.querySelector("#itemsContainer"),
+                splitter: that.querySelector("#splitter")
+            };
+
+            delete that.$.container.id;
+            delete that.$.itemsContainer.id;
+            delete that.$.splitter.id;
+
+            that.$.itemsContainer.appendChild(fragment);
+            that.classList.add('jqx-split-layout');
+
+            document.addEventListener('pointerdown', function (event) {
+                that._documentDownHandler(event);
+            });
+
+            document.addEventListener('pointermove', function (event) {
+                that._documentMoveHandler(event);
+            });
+
+            document.addEventListener('pointerup', function (event) {
+                that._documentUpHandler(event);
+            });
+
+            document.addEventListener('selectstart', function (event) {
+                that._documentSelectStartHandler(event);
+            });
+
+            document.addEventListener('keyup', function (event) {
+                that._keyUpHandler(event);
+            });
+
+            that.addEventListener('mouseleave', function (event) {
+                that._leaveHandler(event);
+            });
+
+            that.addEventListener('mouseenter', function (event) {
+                that._enterHandler(event);
+            });
+
+            that.addEventListener('dragStart', function (event) {
+                that._dragStart(event);
+            });
+
+            that.render();
+        }
+
+        if (document.readyState === 'complete') {
+            setup();
+        }
+        else {
+            window.addEventListener('load', function () {
+                setup();
+            });
+        }
+    }
+
+    /**
+    * Returns the Splitter item according to the index
+    * @param {any} index - string, e.g. '0.1'
+    */
+    getItem(index) {
+        var that = this;
+
+        if (index === undefined || index === null) {
+            return;
+        }
+
+        index = (index + '').split('.');
+
+        var items = that._getDataSource(that._getLayout()),
+            item;
+
+        for (var i = 0; i < index.length; i++) {
+            item = items[index[i]];
+
+            if (!item) {
+                break;
+            }
+
+            items = item.items;
+        }
+
+        return item;
+    }
+
+
+    /**
+     * Document down handler
+     * @param {any} event
+     */
+    _documentDownHandler(event) {
+        var that = this,
+            target = event.target;
+
+        if (that.contains(target) && target.closest) {
+            that._target = target;
+            that._updateSplitter();
+        }
+    }
+
+    /**
+     * Document move handler
+     * @param {any} event
+     */
+    _documentMoveHandler(event) {
+        var that = this,
+            target = event.target,
+            menu = that._contextMenu;
+
+        if (menu && !JQX.Utilities.Core.isMobile) {
+            if (menu.querySelector('.jqx-layout-context-menu-item[hover]')) {
+                var items = menu.children;
+
+                for (var i = 0; i < items.length; i++) {
+                    items[i].removeAttribute('hover');
+                }
+            }
+
+            if (menu.contains(target) && target.closest && target.closest('.jqx-layout-context-menu-item')) {
+                target.setAttribute('hover', '');
+            }
+        }
+
+        if (that._dragDetails) {
+            var offsetX = Math.abs(that._dragDetails.pageX - event.pageX);
+            var offsetY = Math.abs(that._dragDetails.pageY - event.pageY);
+
+            if (offsetY <= 5 && offsetX <= 5) {
+                return;
+            }
+
+            if (!that._dragDetails.feedback.parentElement) {
+                document.body.appendChild(that._dragDetails.feedback);
+                document.body.appendChild(that._dragDetails.overlay)
+                setTimeout(function () {
+                    that._dragDetails.feedback.classList.add('dragging');
+                }, 100);
+            }
+
+            that._dragDetails.dragging = true;
+
+            that._dragDetails.feedback.style.left = event.pageX - that._dragDetails.feedback.offsetWidth / 2 - 5 + 'px';
+            that._dragDetails.feedback.style.top = event.pageY - that._dragDetails.feedback.offsetHeight / 2 - 5 + 'px';
+
+            var elements = document.elementsFromPoint(event.pageX, event.pageY);
+            var group = null;
+            var isTabStrip = false;
+
+            for (var i = 0; i < elements.length; i++) {
+                var element = elements[i];
+
+                if (that._dragDetails.feedback.contains(element)) {
+                    continue;
+                }
+
+                if (element.classList.contains('jqx-layout-tab-strip')) {
+                    if (that._dragDetails.element.contains(element)) {
+                        continue;
+                    }
+
+                    group = element.parentElement;
+                    isTabStrip = true;
+                    break;
+                }
+
+                if ((element.parentElement === that._dragDetails.parent || element === that._dragDetails.parent) && that._dragDetails.layoutGroup.items.length === 1) {
+                    continue;
+                }
+
+                if (that._dragDetails.element.contains(element)) {
+                    continue;
+                }
+
+                if (element instanceof TabLayoutItem) {
+                    group = element.parentElement;
+                    break;
+                }
+                else if (element instanceof TabLayoutGroup) {
+                    group = element;
+                    break;
+                }
+            }
+
+            var getPosition = function (group, size) {
+                var offset = that.offset(group);
+                var position = null;
+                var edgeSize = 50;
+
+                var height = size;
+                var width = size;
+
+                if (!size) {
+                    width = group.offsetWidth / 3;
+                    height = group.offsetHeight / 3;
+                }
+                else {
+                    edgeSize = 0;
+                }
+
+                var positionRects = [
+                    {
+                        left: offset.left,
+                        top: offset.top,
+                        right: offset.left + edgeSize,
+                        bottom: offset.top + edgeSize,
+                        position: 'top'
+                    },
+                    {
+                        left: offset.left + edgeSize,
+                        top: offset.top,
+                        right: offset.left + group.offsetWidth - edgeSize,
+                        bottom: offset.top + height - edgeSize,
+                        position: 'top'
+                    },
+                    {
+                        left: offset.left + group.offsetWidth - edgeSize,
+                        top: offset.top,
+                        right: offset.left + group.offsetWidth,
+                        bottom: offset.top + edgeSize,
+                        position: 'top'
+                    },
+                    {
+                        left: offset.left,
+                        top: offset.top + edgeSize,
+                        right: offset.left + width,
+                        bottom: offset.top + group.offsetHeight - edgeSize,
+                        position: 'left'
+                    },
+                    {
+                        left: offset.left + group.offsetWidth - width,
+                        top: offset.top + edgeSize,
+                        right: offset.left + group.offsetWidth,
+                        bottom: offset.top + group.offsetHeight - edgeSize,
+                        position: 'right'
+                    },
+                    {
+                        left: offset.left,
+                        top: offset.top + group.offsetHeight - edgeSize,
+                        right: offset.left + edgeSize,
+                        bottom: offset.top + group.offsetHeight,
+                        position: 'bottom'
+                    },
+                    {
+                        left: offset.left + edgeSize,
+                        top: offset.top + group.offsetHeight - height + edgeSize,
+                        right: offset.left + group.offsetWidth - edgeSize,
+                        bottom: offset.top + group.offsetHeight,
+                        position: 'bottom'
+                    },
+                    {
+                        left: offset.left + group.offsetWidth - edgeSize,
+                        top: offset.top + group.offsetHeight - edgeSize,
+                        right: offset.left + group.offsetWidth,
+                        bottom: offset.top + group.offsetHeight,
+                        position: 'bottom'
+                    },
+                ]
+
+                for (var i = 0; i < positionRects.length; i++) {
+                    var rect = positionRects[i];
+
+                    if (rect.left <= event.pageX && event.pageX <= rect.right) {
+                        if (rect.top <= event.pageY && event.pageY <= rect.bottom) {
+                            position = rect.position;
+                            break;
+                        }
+                    }
+                }
+
+                return position;
+            }
+
+            var rootGroup = that.querySelector('jqx-layout-group');
+
+            var position = getPosition(rootGroup, 10);
+            var currentGroup = null;
+
+            if (!position) {
+                if (!group) {
+                    that._handleDropArea(null);
+                }
+                else {
+                    if (isTabStrip) {
+                        if (group !== that._dragDetails.parent) {
+                            position = 'center';
+                            currentGroup = group;
+                        }
+                    }
+                    else {
+                        position = getPosition(group) || 'center';
+                        currentGroup = group
+                    }
+                }
+            }
+            else {
+                currentGroup = rootGroup;
+            }
+
+            if (currentGroup) {
+                that._dragDetails.current = currentGroup;
+                that._dragDetails.position = position;
+                that._handleDropArea(currentGroup, position);
+            }
+        }
+
+        if (that._resizeDetails) {
+            var offsetX = Math.abs(that._resizeDetails.clientX - event.clientX);
+            var offsetY = Math.abs(that._resizeDetails.clientY - event.clientY);
+
+            var splitter = that._resizeDetails.splitter;
+            var item = that._resizeDetails.item;
+            var itemRect = that._resizeDetails.itemRect;
+            var previousItemRect = that._resizeDetails.previousItemRect;
+            var previousItem = that._resizeDetails.previousItem;
+            var nextItemRect = that._resizeDetails.nextItemRect;
+            var nextItem = that._resizeDetails.nextItem;
+            var minSize = parseInt(item.getAttribute('min'));
+
+            var resetSplitter = function (splitter) {
+                if (splitter.classList.contains('jqx-visibility-hidden')) {
+                    return;
+                }
+
+                splitter.style.right = '';
+                splitter.style.top = '';
+                splitter.style.left = '';
+                splitter.style.bottom = '';
+            }
+
+            resetSplitter(splitter);
+            resetSplitter(that.$.splitter);
+
+            splitter.classList.remove('error');
+            splitter.classList.add('active');
+
+            if (!that._resizeDetails.dragging) {
+                if (splitter.classList.contains('horizontal') && offsetY <= 5) {
+                    return;
+                }
+                else if (splitter.classList.contains('vertical') && offsetX <= 5) {
+                    return;
+                }
+
+                that._resizeDetails.dragging = true;
+            }
+
+            var normalized = {
+                'clientPos': 'clientX',
+                'pos': 'x',
+                'size': 'width',
+                'near': 'left',
+                'far': 'right',
+                'offsetSize': 'offsetWidth'
+            }
+
+            if (splitter.classList.contains('horizontal')) {
+                normalized = {
+                    'clientPos': 'clientY',
+                    'pos': 'y',
+                    'size': 'height',
+                    'near': 'top',
+                    'far': 'bottom',
+                    'offsetSize': 'offsetHeight'
+                }
+            }
+
+            var updateSplitter = function (splitter) {
+                var offset = that.offset(splitter);
+                var elementOffset = that.offset(that);
+
+                elementOffset.left++;
+                elementOffset.top++;
+
+                that.$.splitter.style.width = splitter.offsetWidth + 'px';
+                that.$.splitter.style.height = splitter.offsetHeight + 'px';
+
+                that.$.splitter.className = splitter.className;
+
+                that.$.splitter.style.left = offset.left - elementOffset.left + 'px';
+                that.$.splitter.style.top = offset.top - elementOffset.top + 'px';
+
+                splitter.setAttribute('drag', '');
+                that.$.splitter.setAttribute('drag', '');
+            }
+
+            if (splitter.classList.contains('last')) {
+                var newPosition = event[normalized.clientPos] - that._resizeDetails.splitterRect[normalized.pos];
+                var maxPosition = itemRect[normalized.size] - minSize;
+
+                if (newPosition > maxPosition) {
+                    newPosition = maxPosition;
+                    splitter.classList.add('error');
+                }
+
+                if (previousItemRect) {
+                    var minSize = parseInt(previousItem.getAttribute('min'));
+
+                    var minPosition = previousItemRect[normalized.size] - minSize;
+                    if (newPosition < -minPosition) {
+                        newPosition = -minPosition;
+                        splitter.classList.add('error');
+                    }
+                }
+
+                splitter.style[normalized.near] = newPosition + 'px';
+
+                var newSize = item[normalized.offsetSize] - newPosition;
+
+                item.setAttribute('size', newSize);
+
+                if (previousItem) {
+                    var previousItemSize = item[normalized.offsetSize] + previousItem[normalized.offsetSize] - newSize;
+
+                    previousItem.setAttribute('size', previousItemSize);
+                }
+            }
+            else {
+                var newPosition = -event[normalized.clientPos] + that._resizeDetails.splitterRect[normalized.pos];
+                var minPosition = itemRect[normalized.size] - minSize;
+
+                if (newPosition > minPosition) {
+                    newPosition = minPosition;
+                    splitter.classList.add('error');
+                }
+
+                if (nextItemRect) {
+                    var minSize = parseInt(nextItem.getAttribute('min'));
+
+                    var maxPosition = -nextItemRect[normalized.size] + minSize;
+                    if (newPosition < maxPosition) {
+                        newPosition = maxPosition;
+                        splitter.classList.add('error');
+                    }
+                }
+
+
+                splitter.style[normalized.far] = newPosition + 'px';
+
+                var newSize = item[normalized.offsetSize] - newPosition;
+
+                item.setAttribute('size', newSize);
+
+                if (nextItem) {
+                    var nextItemSize = nextItem[normalized.offsetSize] + item[normalized.offsetSize] - newSize;
+
+                    nextItem.setAttribute('size', nextItemSize);
+                }
+            }
+
+            updateSplitter(splitter);
+        }
+    }
+
+    _offsetTop(element) {
+        var that = this;
+
+        if (!element) {
+            return 0;
+        }
+
+        return element.offsetTop + that._offsetTop(element.offsetParent);
+    }
+
+    _offsetLeft(element) {
+        var that = this;
+
+        if (!element) {
+            return 0;
+        }
+
+        return element.offsetLeft + that._offsetLeft(element.offsetParent);
+    }
+
+    offset(element) {
+        return { left: this._offsetLeft(element), top: this._offsetTop(element) }
+    }
+
+    _keyUpHandler(event) {
+        var that = this;
+        if (event.key === 'Escape') {
+            if (that._dragDetails) {
+                that._dragDetails.feedback.remove();
+                that._dragDetails.overlay.remove();
+                that._dragDetails = null;
+                that._handleDropArea(null);
+            }
+
+            if (that._resizeDetails) {
+                var drag = that._resizeDetails;
+
+                drag.splitter.classList.contains('last') ? drag.previousItem.size = drag.previousItemSize : drag.nextItem.size = drag.nextItem.previousItemSize;
+                drag.item.size = drag.itemSize;
+
+                that.refresh();
+                that._handleItemClick(drag.item);
+                that._resizeDetails = null;
+                return;
+            }
+        }
+        else if (event.key === 'Delete') {
+            if (that._selectedItem) {
+                that._removeLayoutItem(that._selectedItem);
+            }
+        }
+    }
+
+    _endDrag() {
+        var that = this;
+
+        that._handleDropArea(null);
+
+        if (!that._dragDetails.dragging) {
+            that._dragDetails = null;
+            return;
+        }
+
+        var group = that._dragDetails.current;
+        var item = that._dragDetails.element;
+        var position = that._dragDetails.position;
+
+        that._handleDropArea(null);
+
+        if (group) {
+            that._addTabLayoutItem(group, position, item);
+            that._removeLayoutItem(item);
+
+            if (group.parentElement && Array.from(group.parentElement.parentElement.children).filter(function (value) {
+                if (value.classList.contains('jqx-layout-group')) {
+                    return true;
+                }
+
+                return false;
+            }).length === 1) {
+                var parent = group.parentElement;
+                var parentGroup = parent.parentElement;
+                var ownerGroup = parentGroup.parentElement;
+
+                if (!(parentGroup.getAttribute('data-id') === 'root' || ownerGroup.getAttribute('data-id') === 'root') && ownerGroup !== that) {
+                    var index = Array.from(ownerGroup.children).indexOf(parent.parentElement);
+
+                    if (index >= 0) {
+                        ownerGroup.insertBefore(parent, ownerGroup.children[index])
+                    }
+                    else {
+                        ownerGroup.appendChild(parent);
+                    }
+
+                    parentGroup.remove();
+                }
+            }
+
+            that.refresh();
+            that._updateSplitter();
+
+            requestAnimationFrame(function () {
+                that.classList.add('outline');
+                that.querySelectorAll('.jqx-element').forEach(function (control) {
+                    that.dispatchEvent(new CustomEvent('resize'));
+
+                });
+            })
+        }
+
+        that.dispatchEvent(new CustomEvent('stateChange', { type: 'insert', item: item }));
+
+        that._dragDetails.feedback.remove();
+        that._dragDetails.overlay.remove();
+        that._dragDetails = null;
+    }
+    /**
+     * Document up handler
+     * @param {any} event
+     */
+    _documentUpHandler(event) {
+        var that = this,
+            isMobile = JQX.Utilities.Core.isMobile,
+            target = isMobile ? document.elementFromPoint(event.pageX - window.pageXOffset, event.pageY - window.pageYOffset) : event.target;
+
+
+        if (event.button === 2) {
+            return;
+        }
+
+        if (that._dragDetails) {
+            that._endDrag(event);
+        }
+
+        if (that._resizeDetails) {
+            var drag = that._resizeDetails;
+
+            if (drag.item) {
+                drag.item.style.overflow = '';
+            }
+
+            if (drag.previousItem) {
+                drag.previousItem.style.overflow = '';
+            }
+
+            if (drag.nextItem) {
+                drag.nextItem.style.overflow = '';
+            }
+
+            that.refresh();
+            that._handleItemClick(drag.item);
+            that._resizeDetails = null;
+            window.dispatchEvent(new Event('resize'));
+
+            that.querySelectorAll('.jqx-element').forEach(function (control) {
+                control.dispatchEvent(new CustomEvent('resize'));
+            });
+            return;
+        }
+
+        if (!that.contains(target)) {
+            return;
+        }
+
+        that.classList.add('outline');
+
+        if (that._target && !target.item) {
+            if (target instanceof TabLayoutItem) {
+                that._handleItemClick(target);
+            }
+            else {
+                that._handleItemClick(target.closest('.jqx-layout-item'));
+            }
+        }
+
+        if (that._target) {
+            if (that._target !== target) {
+                delete that._target;
+                return;
+            }
+
+            if (!event.button && target.closest('.jqx-layout-buttons-container')) {
+                var button = event.target;
+
+                that._handleButtonClick(button.item, button.position);
+            }
+            else if (target.closest('.jqx-layout-context-menu') && (!isMobile && !event.button || isMobile)) {
+                that._handleMenuItemClick(target.closest('.jqx-layout-context-menu-item'));
+            }
+
+            delete that._target;
+        }
+    }
+
+    /**
+    * Document Select Start event handler
+    */
+    _documentSelectStartHandler(event) {
+        var that = this;
+
+        if (that._target) {
+            event.preventDefault();
+        }
+    }
+
+    /**
+     * Adds labels to the items that do not have set
+     * @param {any} data
+     */
+    _getDataSource(layout, path, index) {
+        var that = this;
+
+        var data = [];
+
+        if (!index) {
+            index = 0;
+        }
+
+        if (!path) {
+            path = '';
+        }
+
+        for (var i = 0; i < layout.length; i++) {
+            var layoutItem = layout[i];
+
+            var item = {
+                label: layoutItem.label,
+                id: layoutItem.getAttribute('data-id'),
+                orientation: layoutItem.orientation,
+                size: layoutItem.size,
+                min: layoutItem.min,
+                type: layoutItem.type,
+                modifiers: layoutItem.modifiers,
+                position: layoutItem.position
+            }
+
+            layoutItem.removeAttribute('index');
+
+            if (layoutItem instanceof LayoutGroup) {
+                data.push(item);
+
+                item.index = path !== '' ? path + '.' + index : index.toString();
+                layoutItem.setAttribute('index', item.index);
+
+                if (layoutItem.items) {
+                    var items = that._getDataSource(layoutItem.items, item.index, 0);
+                    item.items = items;
+                }
+            }
+            else if (layoutItem instanceof LayoutItem) {
+                if (layoutItem.items) {
+                    var items = that._getDataSource(layoutItem.items, path, index);
+
+                    data = data.concat(items);
+                }
+                else {
+                    item.index = path !== '' ? path + '.' + index : index.toString();
+                    layoutItem.setAttribute('index', item.index);
+
+                    data.push(item);
+                }
+            }
+
+            index++;
+        }
+
+        return data;
+    }
+
+    /**
+     * Generates the JSON array of the current structure of the element
+     */
+    _getLayout() {
+        var that = this;
+        var group = !arguments.length ? that.$.itemsContainer : arguments[0];
+
+        if (that._buttons) {
+            that._buttons.remove();
+        }
+
+        if (that._dropArea) {
+            that._dropArea.remove();
+        }
+
+        var splitters = that.querySelectorAll('.jqx-layout-splitter');
+
+        for (var i = 0; i < splitters.length; i++) {
+            var splitter = splitters[i];
+
+            if (splitter !== that.$.splitter) {
+                splitter.remove();
+            }
+        }
+
+        group.items = Array.from(group.children);
+        group.items = group.items.filter(function (value) {
+            return value !== group.tabs && value.hasAttribute('data-id');
+        });
+
+        var items = group.items.map(function (value) {
+            if (value.classList.contains('jqx-layout-tab-strip')) {
+                return null;
+            }
+
+            var item = value;
+            var itemGroup = value instanceof LayoutGroup ? value : null;
+
+            if (itemGroup) {
+                item.items = that._getLayout(itemGroup)
+            }
+
+            return item;
+        });
+
+        if (group !== that.$.itemsContainer) {
+            return items.filter(function (value) {
+                return value !== null && value !== group.tabs
+            });
+        }
+
+        var data = [];
+        var item = group;
+
+        item.items = items.filter(function (value) {
+            return value !== null && value !== group.tabs
+        });
+
+        data.push(item);
+
+        return data;
+    }
+
+
+    _updateSplitter() {
+        var that = this;
+
+        if (that._buttons && that._dragDetails) {
+            that._buttons.remove();
+        }
+
+        that._removeSplitter();
+        var items = that.querySelectorAll('[data-id]');
+
+        for (var i = 0; i < items.length; i++) {
+            var item = items[i];
+
+            if (item.getAttribute('data-id') === 'root') {
+                continue;
+            }
+
+            if (item.hasAttribute('role')) {
+                var role = item.getAttribute('role');
+
+                if (role === 'gridcell' || role === 'row' || role === 'columnheader' || role === 'rowheader') {
+                    continue;
+                }
+            }
+
+            item.setAttribute('hover', '');
+            that._handleSplitter(item);
+        }
+    }
+
+    _hideSplitter() {
+        var that = this;
+
+        var items = that.querySelectorAll('[data-id]');
+
+        for (var i = 0; i < items.length; i++) {
+            var item = items[i];
+
+            item.removeAttribute('hover');
+        }
+    }
+
+    _removeSplitter() {
+        var that = this;
+        var splitters = that.querySelectorAll('.jqx-layout-splitter');
+
+        for (var i = 0; i < splitters.length; i++) {
+            var splitter = splitters[i];
+
+            if (splitter !== that.$.splitter) {
+                splitter.remove();
+            }
+        }
+
+        that._hideSplitter();
+    }
+
+    /**
+     * Handles item selection
+     * @param {any} target - target element that was clicked
+     * @param {any} isOnDemand - selection on demand
+     */
+    _handleItemClick(target) {
+        var that = this,
+            previouslySelectedIndex = that.selectedIndex;
+
+        var item = null;
+
+        if (!target) {
+            that.selectedIndex = null;
+            that.querySelectorAll('[data-id]').forEach(function (i) { i.removeAttribute('selected') });
+            that._selectedItem = null;
+            return;
+        }
+        else {
+            item = target instanceof HTMLElement ? target : that.querySelector('[data-id=' + target.id + ']');
+
+            if (item && item.readonly) {
+                that.selectedIndex = null;
+                return;
+            }
+
+            that.querySelectorAll('[data-id]').forEach(function (i) { i.removeAttribute('selected') });
+
+            if (!item) {
+                that.refresh();
+                return;
+            }
+
+            that.selectedIndex = item.getAttribute('index');
+
+            item.setAttribute('selected', '');
+            item.setAttribute('hover', '');
+            that._selectedItem = item;
+            if (item.classList.contains('jqx-hidden')) {
+                that.refresh();
+            }
+
+            that._handleButtonsVisibility(item);
+
+            if (previouslySelectedIndex !== that.selectedIndex) {
+                that.dispatchEvent(new CustomEvent('change'));
+            }
+        }
+
+        that._updateSplitter();
+    }
+
+    /**
+     * Handles Layout Button click
+     * @param {any} target
+     */
+    _handleButtonClick(target, position) {
+        var that = this,
+            newItem = that._addLayoutItem(target, position);
+
+        //Select the new empty item
+        that.dispatchEvent(new CustomEvent('stateChange', { type: 'insert', item: newItem }));
+
+        that._handleItemClick(newItem, true);
+    }
+
+
+
+    _removeLayoutItem(item) {
+        var that = this;
+
+        if (item.getAttribute('data-id') === 'root') {
+            return;
+        }
+
+        if (item instanceof LayoutItem && item.parentElement.items.length === 1) {
+            var parent = item.parentElement;
+            var currentParent = parent;
+
+            while (parent && parent.items && parent.items.length === 1) {
+                if (parent.getAttribute('data-id') === 'root') {
+                    break;
+                }
+
+                currentParent = parent;
+                parent = parent.parentElement;
+            }
+
+            if (currentParent.getAttribute('data-id') !== 'root') {
+                currentParent.remove();
+            }
+            else if (that.allowLiveSplit) {
+                currentParent.appendChild(document.createElement('jqx-layout-item'));
+            }
+        }
+        else {
+            item.remove();
+        }
+
+        that.refresh();
+
+        that.dispatchEvent(new CustomEvent('stateChange', { type: 'delete', item: item }));
+    }
+
+    /**
+    * Refreshes the UI Component.
+    */
+    refresh() {
+        var that = this;
+
+        if (that._isUpdating) {
+            return;
+        }
+
+        that.dataSource = that._getDataSource(that._getLayout());
+
+        that.$.splitter.className = 'jqx-visibility-hidden jqx-layout-splitter';
+
+        var refreshLayoutGroup = function (group) {
+            var item = that.getItem(group.getAttribute('index'));
+
+            if (!item) {
+                return;
+            }
+            group.style.gridTemplateColumns = '';
+            group.style.gridTemplateRows = '';
+
+            var template = '';
+            var percentages = 0;
+            var withSizeCount = 0;
+
+            if (group instanceof TabLayoutGroup) {
+                if (group.tabs) {
+                    group.tabs.remove();
+                }
+
+                var header = document.createElement('div');
+                header.classList.add('jqx-layout-tab-strip');
+
+                if (that._selectedItem && group.contains(that._selectedItem) && that._selectedItem instanceof TabLayoutItem) {
+                    group.selectedIndex = Math.max(0, group.items.indexOf(that._selectedItem));
+                }
+
+                if (group.selectedIndex >= group.children.length) {
+                    group.selectedIndex = 0;
+                }
+
+                for (var i = 0; i < group.children.length; i++) {
+                    var child = group.children[i];
+                    var childItem = that.getItem(child.getAttribute('index'));
+
+                    if (!childItem) {
+                        continue;
+                    }
+
+                    var tab = document.createElement('div');
+                    tab.classList.add('jqx-layout-tab');
+                    tab.innerHTML = '<label>' + childItem.label + '</label><span class="jqx-close-button"></span>';
+                    header.appendChild(tab);
+                    child.setAttribute('tab', '');
+                    child.classList.add('jqx-hidden');
+                    tab.content = child;
+                    tab.item = childItem;
+                    tab.group = item;
+
+                    if (child.modifiers) {
+                        if (child.modifiers.indexOf('close') === -1) {
+                            tab.querySelector('.jqx-close-button').classList.add('jqx-hidden');
+                        }
+                    }
+                    else {
+                        tab.querySelector('.jqx-close-button').classList.add('jqx-hidden');
+                    }
+
+                    if (undefined === group.selectedIndex || i === group.selectedIndex) {
+                        tab.classList.add('selected');
+                        child.classList.remove('jqx-hidden');
+                        group.selectedIndex = i;
+                    }
+
+
+                    tab.onpointerup = function (event) {
+                        if (event.target.classList.contains('jqx-close-button') && tab.close) {
+                            group.selectedIndex = 0;
+                            that._removeLayoutItem(that._selectedItem);
+                            that._handleItemClick(parent);
+                        }
+                    }
+                    tab.onpointerdown = function (event) {
+                        var parent = this.closest('.jqx-layout-group');
+                        that._handleItemClick(this.content);
+                        tab.close = false;
+                        if (!event.target.classList.contains('jqx-close-button')) {
+                            if (childItem.modifiers && childItem.modifiers.indexOf('drag') >= 0 && parent.modifiers.indexOf('drag') >= 0) {
+                                that._beginDrag(parent, this, event);
+                            }
+                        }
+                        else {
+                            tab.close = true;
+                        }
+                    }
+
+                }
+
+
+                group.tabs = header;
+
+                if (item.position === 'top' || item.position === 'left') {
+                    group.insertBefore(header, group.firstChild);
+                }
+                else {
+                    group.appendChild(header);
+                }
+            }
+            else {
+                for (var i = 0; i < group.children.length; i++) {
+                    var child = group.children[i];
+
+                    if (child.hasAttribute('size')) {
+                        var size = child.getAttribute('size');
+
+                        var pixels = parseFloat(size);
+                        var groupSize = group.orientation === 'vertical' ? group.offsetWidth : group.offsetHeight;
+                        var percentage = size.indexOf('%') >= 0 ? parseFloat(size) : parseFloat((pixels / groupSize) * 100);
+
+                        percentages += percentage;
+                        withSizeCount++;
+
+                        if (withSizeCount === group.children.length) {
+                            if (percentages < 100) {
+                                template += '1fr ';
+                                percentages = 100;
+                                continue;
+                            }
+                            else if (percentages > 100) {
+                                percentages -= percentage;
+                                percentage = 100 - percentages;
+                                percentages = 100;
+                            }
+                        }
+                        else if (percentages > 100 || percentage === 0) {
+                            withSizeCount = group.children.length;
+                            percentages = 0;
+                            break;
+                        }
+
+                        template += percentage + '% ';
+                        continue;
+                    }
+
+                    template += '1fr ';
+                }
+
+                if (withSizeCount === group.children.length) {
+                    if (percentages < 99 || percentages > 100) {
+                        template = '';
+
+                        for (var i = 0; i < group.children.length; i++) {
+                            var child = group.children[i];
+
+                            child.removeAttribute('size');
+                            template += '1fr ';
+                        }
+                    }
+                }
+
+                if (group.orientation === 'vertical') {
+                    group.style.gridTemplateColumns = template;
+                }
+                else {
+                    group.style.gridTemplateRows = template;
+                }
+            }
+
+            group.items = Array.from(group.children);
+            group.items = group.items.filter(function (value) {
+                return value !== group.tabs;
+            });
+        }
+
+        var layoutGroups = that.querySelectorAll('.jqx-layout-group');
+
+        for (var i = 0; i < layoutGroups.length; i++) {
+            refreshLayoutGroup(layoutGroups[i]);
+        }
+    }
+
+    _beginDrag(parent, element, event) {
+        var that = this;
+
+        if (that._dragDetails) {
+            that._dragDetails.feedback.remove();
+        }
+
+        var feedback = document.createElement('div');
+        var overlay = document.createElement('div');
+        var tabs = parent.querySelector('.jqx-layout-tab-strip');
+        var label = '';
+
+        if (tabs) {
+            for (var i = 0; i < Array.from(tabs.children).length; i++) {
+                if (i === parent.selectedIndex) {
+                    label = tabs.children[i].innerText;
+                }
+            }
+        }
+
+        feedback.innerHTML = `<jqx-split-layout><jqx-tab-layout-group><jqx-tab-layout-item label="${label}"></jqx-tab-layout-item></jqx-tab-layout-group></jqx-split-layout>`
+        that._feedback = feedback;
+        that._feedback.classList.add('jqx-split-layout-feedback', 'jqx-split-layout', 'jqx-widget');
+
+        overlay.classList.add('jqx-split-layout-overlay');
+
+        that._dragDetails = {
+            element: element.content,
+            item: element.item,
+            layoutGroup: element.group,
+            parent: parent,
+            overlay: overlay,
+            feedback: feedback,
+            pageX: event.pageX,
+            pageY: event.pageY
+        }
+    }
+
+    moveChildren(oldItem, newItem) {
+        newItem.innerHTML = '';
+        var content = oldItem;
+
+        while (content.firstChild) {
+            var child = content.firstChild;
+            newItem.appendChild(child);
+        }
+    }
+
+    createLayoutItem(type, position) {
+        var that = this;
+
+        var getLayoutItem = function () {
+            var item = document.createElement('jqx-layout-item');
+
+            item.innerHTML = '';
+
+            that.dispatchEvent(new CustomEvent('createItem', { type: 'layoutItem', item: item }));
+
+            return item;
+        }
+
+        var getTabLayoutItem = function () {
+            var item = document.createElement('jqx-tab-layout-item');
+
+            item.innerHTML = '';
+
+            that.dispatchEvent(new CustomEvent('createItem', { type: 'tabLayoutItem', item: item }));
+
+            return item;
+        }
+
+        var getLayoutGroup = function (position) {
+            var item = document.createElement('jqx-layout-group');
+            var orientation = position === 'top' || position === 'bottom' ? 'horizontal' : 'vertical';
+
+            that.dispatchEvent(new CustomEvent('createGroup', { type: 'layoutGroup', item: item }));
+
+            item.setAttribute('orientation', orientation);
+            item.orientation = orientation;
+
+            return item;
+        }
+
+        var getTabLayoutGroup = function (position) {
+            var item = document.createElement('jqx-tab-layout-group');
+            var orientation = position === 'top' || position === 'bottom' ? 'horizontal' : 'vertical';
+
+            item.setAttribute('orientation', orientation);
+            item.orientation = orientation;
+
+            that.dispatchEvent(new CustomEvent('tabLayoutGroup', { type: 'layoutGroup', item: item }));
+
+            return item;
+        }
+
+        if (type === 'layoutItem' || !type) {
+            return getLayoutItem();
+        }
+        else if (type === 'tabLayoutItem' || !type) {
+            return getTabLayoutItem();
+        }
+        else if (type === 'tabLayoutGroup') {
+            return getTabLayoutGroup(position);
+        }
+        else {
+            return getLayoutGroup(position);
+        }
+    }
+
+    _addTabLayoutItem(targetItem, position, myItem) {
+        var that = this;
+        var newItem = that.createLayoutItem('tabLayoutItem');
+
+        var parentLayoutGroup = targetItem.closest('jqx-tab-layout-group');
+        var layoutGroup;
+
+        if (myItem) {
+            newItem.label = myItem.label;
+            newItem.modifiers = myItem.modifiers;
+            that.moveChildren(myItem, newItem);
+        }
+
+        var resetGroup = function (group) {
+            for (var i = 0; i < group.children.length; i++) {
+                var child = group.children[i];
+
+                child.removeAttribute('size');
+            }
+
+            group.removeAttribute('size');
+        }
+
+        var addTabItemChild = function (position) {
+            targetItem.removeAttribute('size');
+
+            if (targetItem.querySelector('jqx-layout-group')) {
+                that._addLayoutItem(targetItem.querySelector('jqx-layout-group'), position);
+            }
+            else {
+                layoutGroup = that.createLayoutItem('layoutGroup', position);
+
+                var newLayoutItem = that.createLayoutItem();
+                that.moveChildren(targetItem, newLayoutItem)
+
+                if (position === 'top' || position === 'left') {
+                    layoutGroup.appendChild(that.createLayoutItem());
+                    layoutGroup.appendChild(newLayoutItem);
+                }
+                else {
+                    layoutGroup.appendChild(newLayoutItem);
+                    layoutGroup.appendChild(that.createLayoutItem());
+                }
+
+                targetItem.appendChild(layoutGroup);
+            }
+        }
+
+        var addRootTab = function (tabLayoutGroup, position) {
+
+            var parentLayoutGroup = targetItem.parentElement;
+            var layoutGroup = targetItem;
+            var newLayoutGroup = that.createLayoutItem('layoutGroup', position);
+
+            parentLayoutGroup.insertBefore(newLayoutGroup, layoutGroup);
+
+            if (position === 'top' || position === 'left') {
+                newLayoutGroup.append(tabLayoutGroup);
+                newLayoutGroup.appendChild(layoutGroup);
+            }
+            else {
+                newLayoutGroup.appendChild(layoutGroup);
+                newLayoutGroup.append(tabLayoutGroup);
+            }
+
+            if (layoutGroup.getAttribute('data-id') === 'root') {
+                layoutGroup.setAttribute('data-id', newLayoutGroup.getAttribute('data-id'));
+                newLayoutGroup.setAttribute('data-id', 'root');
+                that.$.itemsContainer = newLayoutGroup;
+            }
+
+            resetGroup(layoutGroup);
+            resetGroup(parentLayoutGroup);
+        }
+
+        if (myItem) {
+            switch (position) {
+                case 'center': {
+                    if (targetItem instanceof TabLayoutGroup || targetItem instanceof TabLayoutItem) {
+                        parentLayoutGroup.appendChild(newItem);
+                    }
+                    else {
+                        var tabLayoutGroup = that.createLayoutItem('tabLayoutGroup', 'top');
+                        tabLayoutGroup.appendChild(newItem);
+
+                        if (targetItem instanceof LayoutGroup && !(targetItem instanceof TabLayoutItem)) {
+                            targetItem.appendChild(tabLayoutGroup);
+                            resetGroup(targetItem);
+                        }
+                        else if (targetItem instanceof LayoutItem) {
+                            layoutGroup = that.createLayoutItem('layoutGroup');
+
+                            targetItem.parentElement.insertBefore(layoutGroup, targetItem);
+                            layoutGroup.appendChild(targetItem);
+                            layoutGroup.appendChild(tabLayoutGroup);
+                            resetGroup(layoutGroup);
+                        }
+                    }
+                }
+                    break;
+                case 'left':
+                case 'right': {
+                    var tabLayoutGroup = that.createLayoutItem('tabLayoutGroup', 'top');
+                    tabLayoutGroup.appendChild(newItem);
+                    if (targetItem.getAttribute('data-id') === 'root') {
+                        tabLayoutGroup.position = position;
+                        addRootTab(tabLayoutGroup, position);
+                    }
+                    else {
+                        addRootTab(tabLayoutGroup, position);
+                    }
+                }
+                    break;
+                case 'top':
+                case 'bottom': {
+                    var tabLayoutGroup = that.createLayoutItem('tabLayoutGroup', 'top');
+                    tabLayoutGroup.appendChild(newItem);
+
+                    if (targetItem.getAttribute('data-id') === 'root') {
+                        tabLayoutGroup.position = position;
+                        addRootTab(tabLayoutGroup, position);
+                    }
+                    else {
+                        addRootTab(tabLayoutGroup, position);
+                    }
+                    break;
+                }
+            }
+
+            return;
+        }
+
+        switch (position) {
+            case 'center':
+                if (targetItem instanceof TabLayoutGroup || targetItem instanceof TabLayoutItem) {
+                    parentLayoutGroup.appendChild(newItem);
+                }
+                else {
+                    addTabItemChild();
+                }
+                break;
+            case 'left':
+            case 'right':
+                if (targetItem instanceof TabLayoutGroup) {
+                    var firstItem = targetItem.querySelector('jqx-tab-layout-item');
+
+                    if (firstItem && position === 'left') {
+                        targetItem.insertBefore(newItem, firstItem);
+                    }
+                    else {
+                        targetItem.appendChild(newItem);
+                    }
+                }
+                else if (targetItem instanceof TabLayoutItem) {
+                    var tabLayoutGroup = that.createLayoutItem('tabLayoutGroup', 'top');
+                    var parentLayoutGroup = targetItem.parentElement;
+
+                    tabLayoutGroup.appendChild(newItem);
+
+                    layoutGroup = that.createLayoutItem('layoutGroup');
+
+                    parentLayoutGroup.parentElement.insertBefore(layoutGroup, parentLayoutGroup);
+
+                    if (position === 'right') {
+                        layoutGroup.appendChild(parentLayoutGroup);
+                        layoutGroup.appendChild(tabLayoutGroup);
+                    }
+                    else if (position === 'left') {
+                        layoutGroup.appendChild(tabLayoutGroup);
+                        layoutGroup.appendChild(parentLayoutGroup);
+                    }
+                }
+                else if (myItem) {
+                    var tabLayoutGroup = that.createLayoutItem('tabLayoutGroup', 'top');
+                    tabLayoutGroup.appendChild(newItem);
+
+                    if (targetItem instanceof LayoutGroup) {
+                        targetItem.insertBefore(targetItem.firstChild, tabLayoutGroup);
+                    }
+                    else if (targetItem instanceof LayoutItem) {
+                        layoutGroup = that.createLayoutItem('layoutGroup');
+                        layoutGroup.orientation = parentLayoutGroup.orientation;
+                        layoutGroup.setAttribute('orientation', parentLayoutGroup.orientation);
+
+                        targetItem.removeAttribute('size');
+                        targetItem.parentElement.insertBefore(layoutGroup, targetItem);
+                        layoutGroup.appendChild(targetItem);
+                        layoutGroup.appendChild(tabLayoutGroup);
+                    }
+                }
+                else {
+                    addTabItemChild(position);
+                }
+                break;
+            case 'top':
+            case 'bottom':
+                if (targetItem instanceof TabLayoutGroup) {
+                    layoutGroup = that.createLayoutItem('layoutGroup', 'top');
+                    targetItem.removeAttribute('size');
+
+                    targetItem.parentElement.insertBefore(layoutGroup, targetItem);
+
+                    if (position === 'top') {
+                        layoutGroup.appendChild(that.createLayoutItem());
+                        layoutGroup.appendChild(targetItem);
+                    }
+                    else {
+                        layoutGroup.appendChild(targetItem);
+                        layoutGroup.appendChild(that.createLayoutItem());
+                    }
+                }
+                else {
+                    addTabItemChild(position);
+                }
+                break;
+        }
+
+        that.refresh();
+    }
+
+    /**
+     * Creates a new item by splitting the target Splitter
+     */
+    _addLayoutItem(targetItem, position, myItem) {
+        var that = this;
+
+        if (!targetItem) {
+            return;
+        }
+
+        var resetGroup = function (group) {
+            for (var i = 0; i < group.children.length; i++) {
+                var child = group.children[i];
+
+                child.removeAttribute('size');
+            }
+
+            group.removeAttribute('size');
+        }
+
+        var isTabItem = targetItem instanceof TabLayoutItem || targetItem instanceof TabLayoutGroup || (myItem && myItem instanceof TabLayoutItem);
+
+        if (isTabItem) {
+            return that._addTabLayoutItem(targetItem, position, myItem);
+        }
+
+        var newItem = that.createLayoutItem();
+
+        var parentLayoutGroup = targetItem.closest('.jqx-layout-group');
+        var layoutGroup;
+
+        if (myItem) {
+            that.moveChildren(myItem, newItem);
+        }
+
+        if (position === 'center') {
+            if (targetItem instanceof LayoutGroup) {
+                layoutGroup = parentLayoutGroup;
+                layoutGroup.appendChild(newItem);
+
+                resetGroup(layoutGroup);
+                that.refresh();
+
+                return newItem;
+            }
+            else if (targetItem instanceof LayoutItem) {
+                layoutGroup = that.createLayoutItem('layoutGroup');
+                layoutGroup.orientation = parentLayoutGroup.orientation;
+                layoutGroup.setAttribute('orientation', parentLayoutGroup.orientation);
+
+                targetItem.removeAttribute('size');
+                targetItem.parentElement.insertBefore(layoutGroup, targetItem);
+                layoutGroup.appendChild(targetItem);
+                layoutGroup.appendChild(newItem);
+
+                that.refresh();
+
+                return layoutGroup;
+            }
+        }
+
+        if (parentLayoutGroup.orientation === 'vertical' && (position === 'left' || position === 'right') ||
+            parentLayoutGroup.orientation === 'horizontal' && (position === 'top' || position === 'bottom')) {
+            layoutGroup = parentLayoutGroup;
+
+            if (targetItem instanceof LayoutGroup) {
+                if (position === 'left' || position === 'top') {
+                    layoutGroup.insertBefore(newItem, layoutGroup.children[0]);
+                }
+                else {
+                    layoutGroup.appendChild(newItem);
+                }
+
+                resetGroup(targetItem);
+            }
+            else {
+                var layoutGroupItems = layoutGroup.items,
+                    newItemIndex = Math.max(0, layoutGroupItems.indexOf(targetItem) + (position === 'top' || position === 'left' ? 0 : 1));
+
+                layoutGroup.insertBefore(newItem, layoutGroupItems[newItemIndex]);
+                resetGroup(layoutGroup);
+            }
+        }
+        else {
+            if (targetItem instanceof LayoutGroup) {
+                var parentLayoutGroup = targetItem.parentElement;
+                layoutGroup = targetItem;
+                var newLayoutGroup = that.createLayoutItem('layoutGroup', position);
+
+                parentLayoutGroup.insertBefore(newLayoutGroup, layoutGroup);
+
+                if (position === 'top' || position === 'left') {
+                    newLayoutGroup.append(newItem);
+                    newLayoutGroup.appendChild(layoutGroup);
+                }
+                else {
+                    newLayoutGroup.appendChild(layoutGroup);
+                    newLayoutGroup.append(newItem);
+                }
+
+                if (layoutGroup.getAttribute('data-id') === 'root') {
+                    layoutGroup.setAttribute('data-id', newLayoutGroup.getAttribute('data-id'));
+                    newLayoutGroup.setAttribute('data-id', 'root');
+                    that.$.itemsContainer = newLayoutGroup;
+                }
+
+                resetGroup(parentLayoutGroup);
+            }
+            else {
+                layoutGroup = that.createLayoutItem('layoutGroup', position);
+
+                parentLayoutGroup.insertBefore(layoutGroup, targetItem);
+
+                if (position === 'top' || position === 'left') {
+                    layoutGroup.appendChild(newItem);
+                    layoutGroup.appendChild(targetItem);
+                }
+                else {
+                    layoutGroup.appendChild(targetItem);
+                    layoutGroup.appendChild(newItem);
+                }
+
+                resetGroup(layoutGroup);
+            }
+        }
+
+        that.refresh();
+
+        return newItem;
+    }
+
+    /**
+     * Shows/Hides the Add buttons
+     * @param {any} item
+     */
+    _handleButtonsVisibility(item) {
+        var that = this;
+
+        if (!that._buttons) {
+            that._buttons = document.createElement('div');
+            that._buttons.classList.add('jqx-layout-buttons-container');
+            that._buttons.innerHTML = `<div role="button" position="top"></div>
+                                       <div role="button" position="bottom"></div>
+                                       <div role="button" position="center"></div>
+                                       <div role="button" position="left"></div>
+                                       <div role="button" position="right"></div>`;
+
+        }
+
+        if (!item) {
+            if (that._buttons.parentElement) {
+                that._buttons.parentElement.removeChild(that._buttons);
+
+                return;
+            }
+        }
+
+        if (item) {
+            var buttonPosition = item._buttonPosition || [],
+                buttons = that._buttons.children;
+
+
+            for (var b = 0; b < buttons.length; b++) {
+                var button = buttons[b];
+
+                button.position = button.getAttribute('position');
+                button.item = item;
+                buttonPosition.length && buttonPosition.indexOf(button.getAttribute('position')) < 0 ? button.classList.add('jqx-hidden') : button.classList.remove('jqx-hidden');
+
+                button.onmouseenter = function () {
+                    button.setAttribute('hover', '');
+                }
+                button.onmouseleave = function () {
+                    button.removeAttribute('hover')
+                }
+            }
+
+            if (that.allowLiveSplit && that._buttons.parentElement !== item) {
+                item.appendChild(that._buttons);
+            }
+        }
+    }
+
+    _handleDropArea(item, position = 'center') {
+        var that = this;
+
+        var positionDropArea = function (position) {
+            var areaSize = 50;
+
+            switch (position) {
+                case 'left':
+                    that._dropArea.style.top = '0px';
+                    that._dropArea.style.left = '0px';
+                    that._dropArea.style.width = areaSize + '%';
+                    that._dropArea.style.height = '100%';
+                    break;
+                case 'right':
+                    that._dropArea.style.top = '0px';
+                    that._dropArea.style.left = `calc(100% - ${areaSize}%)`;
+                    that._dropArea.style.width = areaSize + '%';
+                    that._dropArea.style.height = '100%';
+                    break;
+                case 'top':
+                    that._dropArea.style.top = '0px';
+                    that._dropArea.style.left = '0px';
+                    that._dropArea.style.width = '100%';
+                    that._dropArea.style.height = areaSize + '%';
+                    break;
+                case 'bottom':
+                    that._dropArea.style.top = `calc(100% - ${areaSize}%)`;
+                    that._dropArea.style.left = '0px';
+                    that._dropArea.style.width = '100%';
+                    that._dropArea.style.height = areaSize + '%';
+                    break;
+                case 'center':
+                    that._dropArea.style.top = '0px';
+                    that._dropArea.style.left = '0px';
+                    that._dropArea.style.width = '100%';
+                    that._dropArea.style.height = '100%';
+                    break;
+            }
+        }
+
+        if (that._dropArea && that._dropArea.parentElement === item) {
+            positionDropArea(position);
+            return;
+        }
+
+        if (that._dropArea) {
+            that._dropArea.remove();
+        }
+
+        if (!that._dragDetails || !item) {
+            return;
+        }
+
+        that._dropArea = document.createElement('div');
+        that._dropArea.classList.add('jqx-layout-drop-area');
+
+        item.appendChild(that._dropArea);
+
+        that._dropArea.style.opacity = 1;
+        positionDropArea(position);
+    }
+
+    _handleSplitter(item) {
+        var that = this;
+
+        if (!item) {
+            return;
+        }
+
+        if (item.hasAttribute('tab')) {
+            item = item.parentElement;
+        }
+
+        if (item._splitter) {
+            item._splitter.remove();
+        }
+
+        if (!item._splitter) {
+            item._splitter = document.createElement('div');
+        }
+
+        if (that._dragDetails && that._dragDetails.dragging) {
+            item._splitter.remove();
+            return;
+        }
+
+        if (item.modifiers.indexOf('resize') === -1) {
+            return;
+        }
+
+        item.appendChild(item._splitter);
+
+        var layoutGroup = item.parentElement;
+
+        if (layoutGroup) {
+            item._splitter.className = 'jqx-layout-splitter';
+
+            item._splitter.item = item;
+
+            item._splitter.removeAttribute('drag');
+
+            var orientation = layoutGroup.orientation;
+
+            if (item.nextElementSibling && item.nextElementSibling.hasAttribute('data-id')) {
+                item._splitter.classList.add(orientation);
+            }
+            else if (item.previousElementSibling && item.previousElementSibling.hasAttribute('data-id')) {
+                item._splitter.classList.add(orientation);
+                item._splitter.classList.add('last');
+            }
+
+            var handleResize = function (splitter) {
+                splitter.style.top = '';
+                splitter.style.left = '';
+                splitter.style.bottom = '';
+                splitter.style.right = '';
+
+                splitter.onpointerdown = function (event) {
+                    var item = event.target.item;
+                    item.style.overflow = 'hidden';
+
+                    that._resizeDetails = {
+                        splitter: event.target,
+                        splitterRect: event.target.getBoundingClientRect(),
+                        itemRect: item.getBoundingClientRect(),
+                        item: item,
+                        itemSize: item.size,
+                        group: item.parentElement,
+                        clientX: event.clientX,
+                        clientY: event.clientY
+                    }
+
+                    if (that._selectedItem !== item) {
+                        that.querySelectorAll('[data-id]').forEach(function (i) { i.removeAttribute('selected') });
+                        that.selectedIndex = item.getAttribute('index');
+                        item.setAttribute('selected', '');
+                        that._selectedItem = item;
+                        that._handleButtonsVisibility(item);
+                    }
+
+                    if (item.previousElementSibling && item.previousElementSibling.hasAttribute('data-id')) {
+                        that._resizeDetails.previousItemRect = item.previousElementSibling.getBoundingClientRect();
+                        that._resizeDetails.previousItem = item.previousElementSibling;
+                        that._resizeDetails.previousItemSize = item.previousElementSibling.size;
+                        that._resizeDetails.previousItem.style.overflow = 'hidden';
+                    }
+                    else {
+                        that._resizeDetails.previousItemRect = null;
+                        that._resizeDetails.previousItem = null;
+                    }
+
+                    if (item.nextElementSibling && item.nextElementSibling.hasAttribute('data-id')) {
+                        that._resizeDetails.nextItemRect = item.nextElementSibling.getBoundingClientRect();
+                        that._resizeDetails.nextItem = item.nextElementSibling;
+                        that._resizeDetails.nextItemSize = item.nextElementSibling.size;
+                        that._resizeDetails.nextItem.style.overflow = 'hidden';
+                    }
+                    else {
+                        that._resizeDetails.nextItemRect = null;
+                        that._resizeDetails.nextItem = null;
+                    }
+                }
+            }
+
+            handleResize(item._splitter);
+        }
+    }
+}
+
+
+customElements.define('jqx-layout-group', LayoutGroup);
+customElements.define('jqx-layout-item', LayoutItem);
+customElements.define('jqx-tab-layout-group', TabLayoutGroup);
+customElements.define('jqx-tab-layout-item', TabLayoutItem);
+customElements.define('jqx-split-layout', SplitLayout);
+
+})();
+
+