@syncfusion/ej2-navigations - npm Package Compare versions

Comparing version 1.0.11 to 1.0.14

common.d.ts

 /**
  * common
  */
-export * from './src/common';
+export * from './src/common/index';

common.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "./src/common"], function (require, exports, common_1) {
+define(["require", "exports", "./src/common/index"], function (require, exports, index_1) {
     "use strict";
@@ -7,3 +7,3 @@ function __export(m) {
     Object.defineProperty(exports, "__esModule", { value: true });
-    __export(common_1);
+    __export(index_1);
 });

dist/ej2-navigations.umd.min.js

 /*!
 *  filename: ej2-navigations.umd.min.js
-*  version : 1.0.10
+*  version : 1.0.14
 *  Copyright Syncfusion Inc. 2001 - 2017. All rights reserved.
@@ -11,2 +11,2 @@ *  Use of this code is subject to the terms of our license.
 
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@syncfusion/ej2-base"),require("@syncfusion/ej2-popups"),require("@syncfusion/ej2-buttons"));else if("function"==typeof define&&define.amd)define(["@syncfusion/ej2-base","@syncfusion/ej2-popups","@syncfusion/ej2-buttons"],t);else{var i="object"==typeof exports?t(require("@syncfusion/ej2-base"),require("@syncfusion/ej2-popups"),require("@syncfusion/ej2-buttons")):t(e["@syncfusion/ej2-base"],e["@syncfusion/ej2-popups"],e["@syncfusion/ej2-buttons"]);for(var o in i)("object"==typeof exports?exports:e)[o]=i[o]}}(this,function(e,t,i){return function(e){function t(o){if(i[o])return i[o].exports;var r=i[o]={exports:{},id:o,loaded:!1};return e[o].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t,i){var o,r;o=[i,t,i(1),i(9)],void 0!==(r=function(e,t,i,o){"use strict";function r(e){for(var i in e)t.hasOwnProperty(i)||(t[i]=e[i])}Object.defineProperty(t,"__esModule",{value:!0}),r(i),r(o)}.apply(t,o))&&(e.exports=r)},function(e,t,i){var o,r;o=[i,t,i(2)],void 0!==(r=function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e){for(var i in e)t.hasOwnProperty(i)||(t[i]=e[i])}(i)}.apply(t,o))&&(e.exports=r)},function(e,t,i){var o,r,n=this&&this.__extends||function(){var e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var i in t)t.hasOwnProperty(i)&&(e[i]=t[i])};return function(t,i){function o(){this.constructor=t}e(t,i),t.prototype=null===i?Object.create(i):(o.prototype=i.prototype,new o)}}(),s=this&&this.__decorate||function(e,t,i,o){var r,n=arguments.length,s=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(s=(n<3?r(s):n>3?r(t,i,s):r(t,i))||s);return n>3&&s&&Object.defineProperty(t,i,s),s};o=[i,t,i(3),i(3),i(4),i(8)],void 0!==(r=function(e,t,i,o,r,l){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var a=function(e){function t(t,i){return e.call(this,t,i)||this}return n(t,e),t.prototype.preRender=function(){this.browser=o.Browser.info.name,this.browserCheck="mozilla"===this.browser;var e=this.element;this.ieCheck="edge"===this.browser||"msie"===this.browser,this.initialize(),""===e.id&&(e.id=l.getUniqueID("hscroll"),this.uniqueId=!0),e.style.display="block",this.enableRtl&&e.classList.add("e-rtl")},t.prototype.render=function(){this.createNavIcon(this.element,"e-nav-right-arrow e-nav-arrow")},t.prototype.initialize=function(){for(var e=r.createElement("div",{className:"e-hscroll-content"}),t=r.createElement("div",{className:"e-hscroll-bar"}),i=this.element,o=[].slice.call(i.children),n=0,s=o;n<s.length;n++){var l=s[n];e.appendChild(l)}t.appendChild(e),i.appendChild(t),t.style.overflowX="hidden",this.scrollEle=t,this.scrollItems=e},t.prototype.getPersistData=function(){var e=["scrollStep"];return this.addOnPersist(e)},t.prototype.getModuleName=function(){return"hScroll"},t.prototype.destroy=function(){var t=this.element;t.style.display="",t.classList.remove("e-hscroll");var o=t.querySelector("#"+t.id+"_nav.e-"+t.id+"_nav");i.EventHandler.remove(o,"click",this.clickEventHandler);for(var n=0,s=[].slice.call(this.scrollItems.children);n<s.length;n++){var l=s[n];t.appendChild(l)}this.uniqueId&&this.element.removeAttribute("id"),r.detach(this.scrollEle),o.parentElement.removeChild(o),i.EventHandler.remove(this.scrollEle,"scroll",this.scrollHandler),this.touchModule.destroy(),this.touchModule=null,e.prototype.destroy.call(this)},t.prototype.createNavIcon=function(e,t){var o=e.id.concat("_nav"),n="e-"+e.id.concat("_nav e-hor-nav"),s=r.createElement("div",{id:o,className:n}),l=r.createElement("div",{className:t+" e-icons"});s.appendChild(l),s.setAttribute("tabindex","0"),e.insertBefore(s,e.firstChild),i.EventHandler.add(this.scrollEle,"scroll",this.scrollHandler,this),new i.Touch(s,{tapHold:this.tabHoldHandler.bind(this)}),this.ieCheck&&s.classList.add("e-ie-align"),s.addEventListener("mouseup",this.repeatScroll.bind(this)),s.addEventListener("touchend",this.repeatScroll.bind(this)),s.addEventListener("contextmenu",function(e){e.preventDefault()}),i.EventHandler.add(s,"click",this.clickEventHandler,this),this.touchModule=new i.Touch(e,{scroll:this.touchHandler.bind(this)})},t.prototype.repeatScroll=function(e){clearInterval(this.timeout)},t.prototype.tabHoldHandler=function(e){var t=this,i=e.originalEvent.target;i=this.contains(i,"e-hor-nav")?i.firstElementChild:i;var o=function(){t.eleScrolling(10,i)};this.timeout=setInterval(function(){o()},50)},t.prototype.contains=function(e,t){return e.classList.contains(t)},t.prototype.eleScrolling=function(e,t){var i=this.scrollEle,o=this.element,r=t.classList;r.contains("e-hor-nav")&&(r=this.element.querySelector(".e-nav-arrow").classList),this.contains(o,"e-rtl")&&this.browserCheck&&(e=-e);var n=i.scrollLeft;!this.contains(o,"e-rtl")||this.browserCheck||this.ieCheck?r.contains("e-nav-right-arrow")?i.scrollLeft=n+e:i.scrollLeft=n-e:r.contains("e-nav-left-arrow")?i.scrollLeft=n+e:i.scrollLeft=n-e},t.prototype.clickEventHandler=function(e){this.eleScrolling(this.scrollStep,e.target)},t.prototype.touchHandler=function(e){var t,i=this.scrollEle;t=e.distanceX,this.ieCheck&&this.contains(this.element,"e-rtl")&&(t=-t),"Left"===e.scrollDirection?i.scrollLeft=i.scrollLeft+t:"Right"===e.scrollDirection&&(i.scrollLeft=i.scrollLeft-t)},t.prototype.scrollHandler=function(e){var t=e.target,i=t.offsetWidth,o=this.element,n=this.element.firstChild.firstChild;if(n){var s=t.scrollLeft;s<=0&&(s=-s),0===s?!this.contains(o,"e-rtl")||this.browserCheck||this.ieCheck?r.classList(n,["e-nav-right-arrow"],["e-nav-left-arrow"]):r.classList(n,["e-nav-left-arrow"],["e-nav-right-arrow"]):Math.ceil(i+s)>=t.scrollWidth&&(!this.contains(o,"e-rtl")||this.browserCheck||this.ieCheck?r.classList(n,["e-nav-left-arrow"],["e-nav-right-arrow"]):r.classList(n,["e-nav-right-arrow"],["e-nav-left-arrow"]))}},t.prototype.onPropertyChanged=function(e,t){for(var i=0,o=Object.keys(e);i<o.length;i++){switch(o[i]){case"scrollStep":break;case"enableRtl":e.enableRtl?this.element.classList.add("e-rtl"):this.element.classList.remove("e-rtl")}}},t}(i.Component);s([o.Property(40)],a.prototype,"scrollStep",void 0),a=s([o.NotifyPropertyChanges],a),t.HScroll=a}.apply(t,o))&&(e.exports=r)},function(t,i){t.exports=e},function(e,t,i){var o,r;o=[i,t,i(5)],void 0!==(r=function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e){for(var i in e)t.hasOwnProperty(i)||(t[i]=e[i])}(i)}.apply(t,o))&&(e.exports=r)},function(e,t,i){var o,r;o=[i,t,i(6),i(7)],void 0!==(r=function(e,t,i,o){"use strict";function r(e,t){var i=document.createElement(e);return void 0===t?i:(i.innerHTML=t.innerHTML?t.innerHTML:"",void 0!==t.className&&(i.className=t.className),void 0!==t.id&&(i.id=t.id),void 0!==t.styles&&i.setAttribute("style",t.styles),void 0!==t.attrs&&f(i,t.attrs),i)}function n(e,t){for(var i=l(t),o=0,r=e;o<r.length;o++)for(var n=r[o],s=0,a=i;s<a.length;s++){var c=a[s];n.classList.contains(c)||n.classList.add(c)}return e}function s(e,t){for(var i=l(t),o=0,r=e;o<r.length;o++){var n=r[o];if(""!==n.className)for(var s=0,a=i;s<a.length;s++){var c=a[s];n.classList.remove(c)}}return e}function l(e){var t=[];return"string"==typeof e?t.push(e):t=e,t}function a(e){var t=e;return""===t.style.visibility&&t.offsetWidth>0}function c(e,t){for(var i=document.createDocumentFragment(),o=0,r=e;o<r.length;o++){var n=r[o];i.appendChild(n)}return t.insertBefore(i,t.firstElementChild),e}function h(e,t){for(var i=document.createDocumentFragment(),o=0,r=e;o<r.length;o++){var n=r[o];i.appendChild(n)}return t.appendChild(i),e}function p(e){return e.parentNode.removeChild(e)}function d(e){var t=e.parentNode;i.EventHandler.clearEvents(e),t.removeChild(e)}function f(e,t){for(var i=Object.keys(t),o=e,r=0,n=i;r<n.length;r++){var s=n[r];o.setAttribute(s,t[s])}return o}function u(e,t){return void 0===t&&(t=document),t.querySelector(e)}function v(e,t){return void 0===t&&(t=document),t.querySelectorAll(e)}function y(e,t){var i=e;if("function"==typeof i.closest)return i.closest(t);for(;i&&1===i.nodeType;){if(E(i,t))return i;i=i.parentNode}return null}function m(e){for(var t=[],i=Array.prototype.slice.call(e.parentNode.childNodes),o=0,r=i;o<r.length;o++){var n=r[o];n.nodeType===Node.ELEMENT_NODE&&e!==n&&t.push(n)}return t}function b(e,t,i){var r=e.getAttribute(t);return o.isNullOrUndefined(r)&&(e.setAttribute(t,i.toString()),r=i),r}function g(e,t){void 0!==t&&Object.keys(t).forEach(function(i){e.style[i]=t[i]})}function w(e,t,i){n([e],t),s([e],i)}function E(e,t){var i=e.matches||e.msMatchesSelector||e.webkitMatchesSelector;return i?i.call(e,t):-1!==[].indexOf.call(document.querySelectorAll(t),e)}Object.defineProperty(t,"__esModule",{value:!0}),t.createElement=r,t.addClass=n,t.removeClass=s,t.isVisible=a,t.prepend=c,t.append=h,t.detach=p,t.remove=d,t.attributes=f,t.select=u,t.selectAll=v,t.closest=y,t.siblings=m,t.getAttributeOrDefault=b,t.setStyleAttribute=g,t.classList=w,t.matches=E}.apply(t,o))&&(e.exports=r)},function(e,t,i){var o,r;o=[i,t,i(7)],void 0!==(r=function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(){}return e.addOrGetEventData=function(e){return"__eventList"in e?e.__eventList.events:(e.__eventList={},e.__eventList.events=[])},e.add=function(t,o,r,n,s){var l,a=e.addOrGetEventData(t);l=s?i.debounce(r,s):r,n&&(l=l.bind(n));for(var c=o.split(" "),h=0;h<c.length;h++)a.push({name:c[h],listener:r,debounce:l}),t.addEventListener(c[h],l)},e.remove=function(t,i,o){for(var r=e.addOrGetEventData(t),n=i.split(" "),s=0;s<n.length;s++)!function(e){var i,s=-1;r&&0!==r.length&&r.some(function(t,r){return t.name===n[e]&&t.listener.toString()===o.toString()&&(s=r,i=t.debounce,!0)}),-1!==s&&r.splice(s,1),t.removeEventListener(n[e],i)}(s)},e.clearEvents=function(t){var o,r;o=e.addOrGetEventData(t),r=i.extend([],r,o);for(var n=0;n<r.length;n++)t.removeEventListener(r[n].name,r[n].debounce),o.shift()},e.trigger=function(t,i,o){for(var r=e.addOrGetEventData(t),n=0,s=r;n<s.length;n++){var l=s[n];l.name===i&&l.debounce.call(this,o)}},e}();t.EventHandler=o}.apply(t,o))&&(e.exports=r)},function(e,t,i){var o,r;o=[i,t],void 0!==(r=function(e,t){"use strict";function i(e,t){var i=t;return i.unshift(void 0),new(Function.prototype.bind.apply(e,i))}function o(e){var t,i=new Uint16Array(5);(window.msCrypto||window.crypto).getRandomValues(i);var o="ej2"+C(i),r=function(i){i.source===window&&"string"==typeof i.data&&i.data.length<=32&&i.data===o&&(e(),t())};return window.addEventListener("message",r,!1),window.postMessage(o,"*"),t=function(){window.removeEventListener("message",r)}}function r(e,t){for(var i=t,o=e.split("."),r=0;r<o.length&&!d(i);r++)i=i[o[r]];return i}function n(e,t,i){var o,r,n=e.split("."),s=i||{},l=s,a=n.length;for(o=0;o<a;o++)r=n[o],o+1===a?l[r]=void 0===t?{}:t:p(l[r])&&(l[r]={}),l=l[r];return s}function s(e,t){delete e[t]}function l(e){var t={};return!p(e)&&e.constructor===t.constructor}function a(e,t){return e[t]}function c(e,t){if(!p(t))for(var i=e,o=t,r=Object.keys(t),n=0,s=r;n<s.length;n++){var l=s[n];i[l]=o[l]}}function h(e,t,i,o){var r=e||{},n=arguments.length;o&&(n-=1);for(var s=arguments,a=1;a<n;a++)!function(e){if(!s[e])return"continue";var t=s[e];Object.keys(t).forEach(function(e){var i,n=r[e],s=t[e];o&&l(s)?(i=l(n)?n:{},r[e]=h({},i,s,!0)):r[e]=s})}(a);return r}function p(e){return void 0===e||null===e}function d(e){return void 0===e}function f(e){return e+"_"+S++}function u(e,t){var i,o=this;return function(){for(var r=[],n=0;n<arguments.length;n++)r[n]=arguments[n];var s=r[0],l=function(){return i=null,e.call(o,s)};clearTimeout(i),i=setTimeout(l,t)}}function v(e){for(var t=[],i=Object.keys(e),o=0,r=i;o<r.length;o++){var n=r[o];t.push(encodeURIComponent(n)+"="+encodeURIComponent(""+e[n]))}return t.join("&")}function y(e){var t=Object.prototype.toString;return"[object Array]"===t.call(e)&&"[object Object]"===t.call(e[0])}function m(e,t){var i=e;return i===t||!(i===document||!i)&&m(i.parentNode,t)}function b(e){try{throw new Error(e)}catch(e){throw e.message+"\n"+e.stack}}function g(e,t){var i=document.createElement("div"),o=[].slice.call(document.getElementsByTagName("head")[0].querySelectorAll("link, style")),r="";p(t)&&(t=window.open("","print","height=452,width=1024,tabbar=no")),i.appendChild(e.cloneNode(!0));for(var n=0,s=o.length;n<s;n++)r+=o[n].outerHTML;t.document.write("<!DOCTYPE html> <html><head>"+r+"</head><body>"+i.innerHTML+"<script> (function() { window.ready = true; })(); <\/script></body></html>"),t.document.close(),t.focus();var l=setInterval(function(){t.ready&&(t.print(),t.close(),clearInterval(l))},500);return t}function w(e){var t=e+"";return"auto"===t||-1!==t.indexOf("%")||-1!==t.indexOf("px")?t:t+"px"}function E(e,t){var i="string"==typeof e?document.querySelector(e):e;if(i[L])for(var o=0,r=i[L];o<r.length;o++){var n=r[o];if(n instanceof t)return n}return null}function O(e,t){var i="string"==typeof e?document.querySelector(e):e;i[L]?i[L].push(t):i[L]=[t]}function C(e){for(var t="",i=0;i<5;i++)t+=(i?",":"")+e[i];return t}Object.defineProperty(t,"__esModule",{value:!0});var L="ej2_instances",S=0;t.createInstance=i,t.setImmediate=o,t.getValue=r,t.setValue=n,t.deleteObject=s,t.isObject=l,t.getEnumValue=a,t.merge=c,t.extend=h,t.isNullOrUndefined=p,t.isUndefined=d,t.getUniqueID=f,t.debounce=u,t.queryParams=v,t.isObjectArray=y,t.compareElementParent=m,t.throwError=b,t.print=g,t.formatUnit=w,t.getInstance=E,t.addInstance=O}.apply(t,o))&&(e.exports=r)},function(e,t,i){var o,r;o=[i,t,i(7)],void 0!==(r=function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e){for(var i in e)t.hasOwnProperty(i)||(t[i]=e[i])}(i)}.apply(t,o))&&(e.exports=r)},function(e,t,i){var o,r;o=[i,t,i(10)],void 0!==(r=function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e){for(var i in e)t.hasOwnProperty(i)||(t[i]=e[i])}(i)}.apply(t,o))&&(e.exports=r)},function(e,t,i){var o,r,n=this&&this.__extends||function(){var e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var i in t)t.hasOwnProperty(i)&&(e[i]=t[i])};return function(t,i){function o(){this.constructor=t}e(t,i),t.prototype=null===i?Object.create(i):(o.prototype=i.prototype,new o)}}(),s=this&&this.__decorate||function(e,t,i,o){var r,n=arguments.length,s=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(s=(n<3?r(s):n>3?r(t,i,s):r(t,i))||s);return n>3&&s&&Object.defineProperty(t,i,s),s};o=[i,t,i(3),i(4),i(4),i(8),i(3),i(3),i(11),i(12),i(13),i(2)],void 0!==(r=function(e,t,i,o,r,l,a,c,h,p,d,f){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var u="e-toolbar-items",v="e-toolbar-item",y="e-toolbar-popup",m=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return n(t,e),t}(a.ChildProperty);s([i.Property("")],m.prototype,"id",void 0),s([i.Property("")],m.prototype,"text",void 0),s([i.Property("auto")],m.prototype,"width",void 0),s([i.Property("")],m.prototype,"cssClass",void 0),s([i.Property("")],m.prototype,"prefixIcon",void 0),s([i.Property("")],m.prototype,"suffixIcon",void 0),s([i.Property("None")],m.prototype,"overflow",void 0),s([i.Property("")],m.prototype,"template",void 0),s([i.Property("Button")],m.prototype,"type",void 0),s([i.Property("Both")],m.prototype,"showTextOn",void 0),s([i.Property(null)],m.prototype,"htmlAttributes",void 0),s([i.Property("")],m.prototype,"tooltipText",void 0),s([i.Property("left")],m.prototype,"align",void 0),t.Item=m;var b=function(e){function t(t,i){var o=e.call(this,t,i)||this;return o.keyConfigs={moveLeft:"leftarrow",moveRight:"rightarrow",moveUp:"uparrow",moveDown:"downarrow",popupOpen:"enter",popupClose:"escape",tab:"tab"},o}return n(t,e),t.prototype.destroy=function(){var t=this.element;e.prototype.destroy.call(this),this.unwireEvents(),t.children.length>0&&t.removeChild(t.children[0]),t.removeAttribute("style")},t.prototype.preRender=function(){this.trigger("beforeCreate"),this.enableRtl&&this.add(this.element,"e-rtl")},t.prototype.wireEvents=function(){i.EventHandler.add(this.element,"click",this.clickHandler,this),window.onresize=this.resize.bind(this),this.keyModule=new c.KeyboardEvents(this.element,{keyAction:this.keyActionHandler.bind(this),keyConfigs:this.keyConfigs}),this.element.setAttribute("tabIndex","0")},t.prototype.unwireEvents=function(){i.EventHandler.remove(this.element,"click",this.clickHandler),this.destroyHScroll(),this.keyModule.destroy(),this.popObj&&(i.EventHandler.remove(document,"scroll",this.docEvent),i.EventHandler.remove(document,"click",this.docEvent))},t.prototype.docEvent=function(e){var t=o.closest(e.target,".e-popup");this.popObj&&o.isVisible(this.popObj.element)&&!t&&this.popObj.hide({name:"SlideUp",duration:100})},t.prototype.destroyHScroll=function(){this.scrollModule&&(this.tbarAlign&&this.add(this.scrollModule.element,"e-tbar-pos"),this.scrollModule.destroy(),this.scrollModule=null)},t.prototype.add=function(e,t){e.classList.add(t)},t.prototype.remove=function(e,t){e.classList.remove(t)},t.prototype.keyActionHandler=function(e){e.preventDefault();var t,i=e.target,n=this.element,s=this.popObj,l={name:"SlideUp",duration:100},a=i.classList.contains("e-hor-nav");if(t=a&&s&&o.isVisible(s.element)?s.element.querySelector("."+v):n===i||a?n.querySelector("."+v):o.closest(i,"."+v))switch(e.action){case"moveRight":n===i||a?t.firstChild.focus():this.eleFocus(t,"next");break;case"moveLeft":if(s&&a)if(this.tbarAlign){t=o.closest(t,"."+u);var c=r.selectAll("."+v,t);t=c[c.length-1]}else t=t.parentElement.lastElementChild;!a||t.classList.contains("e-separator")||t.classList.contains("e-overlay")?this.eleFocus(t,"previous"):t.firstChild.focus();break;case"moveUp":case"moveDown":var h="moveUp"===e.action?"previous":"next";s&&o.closest(i,".e-popup")?"moveUp"===e.action&&s.element.firstElementChild===t?n.querySelector(".e-hor-nav").focus():this.eleFocus(t,h):"moveDown"===e.action&&t.firstChild.focus();break;case"tab":var p=t.firstChild;(n===i||a)&&(this.activeEle?this.activeEle.focus():(this.activeEleRemove(p),p.focus()));break;case"popupClose":s&&s.hide(l);break;case"popupOpen":if(!a)return;s&&!o.isVisible(s.element)?(s.element.style.top=n.offsetHeight+"px",s.show({name:"SlideDown",duration:100})):s.hide(l)}},t.prototype.eleFocus=function(e,t){var i=Object(e)[t+"ElementSibling"],o=function(e){return e.classList.contains("e-separator")||e.classList.contains("e-overlay")};if(i){var r=o(i);if(r)if(Object(i)[t+"Sibling"]){if(i=Object(i)[t+"Sibling"],r=o(i))return void this.eleFocus(i,t)}else if(this.popObj&&"next"===t)return void this.element.querySelector(".e-hor-nav").focus();l.isNullOrUndefined(i.firstChild)||i.firstChild.focus()}else if(this.tbarAlign){var n=Object(e.parentElement)[t+"ElementSibling"];if(!l.isNullOrUndefined(n)&&n.children.length>0)if("next"===t){var s=n.querySelector("."+v);o(s)?this.eleFocus(s,t):s.firstChild.focus()}else{var s=n.lastElementChild;o(s)?this.eleFocus(s,t):s.firstChild.focus()}else this.popObj&&this.element.querySelector(".e-hor-nav").focus()}else this.popObj&&"next"===t&&this.element.querySelector(".e-hor-nav").focus()},t.prototype.clickHandler=function(e){var t=e.target,i=t.classList,r=this.element,n=o.closest(t,".e-hor-nav");n||(n=t),!r.children[0].classList.contains("e-hscroll")&&i.contains("e-hor-nav")&&(i=t.querySelector(".e-icons").classList),(i.contains("e-popup-up-icon")||i.contains("e-popup-down-icon"))&&this.popupClickHandler(r,n,"e-rtl");var s,a=o.closest(e.target,"."+v);if(!l.isNullOrUndefined(a)&&!a.classList.contains("e-overlay")||n.classList.contains("e-hor-nav")){a&&(s=this.items[this.tbarEle.indexOf(a)]);var c={originalEvent:e,item:s};this.trigger("clicked",c)}},t.prototype.popupClickHandler=function(e,t,i){var r=this.popObj;o.isVisible(r.element)?(t.classList.remove("e-nav-active"),r.hide({name:"SlideUp",duration:100})):(e.classList.contains(i)&&(r.enableRtl=!0,r.position={X:"left",Y:"top"}),0!==r.offsetX||e.classList.contains(i)||(r.enableRtl=!1,r.position={X:"right",Y:"top"}),r.dataBind(),r.element.style.top=this.element.offsetHeight+"px",t.classList.add("e-nav-active"),r.show({name:"SlideDown",duration:100}))},t.prototype.render=function(){this.initialize(),this.renderControl(),this.wireEvents()},t.prototype.initialize=function(){var e=l.formatUnit(this.width),t=l.formatUnit(this.height);"msie"===c.Browser.info.name&&"auto"===this.height||r.setStyleAttribute(this.element,{height:t}),r.setStyleAttribute(this.element,{width:e});var i={role:"toolbar","aria-disabled":"false","aria-haspopup":"false","aria-orientation":"horizontal"};o.attributes(this.element,i)},t.prototype.renderControl=function(){this.trgtEle=this.element.children.length>0?this.element.querySelector("div"):null,this.tbarAlgEle={lefts:[],centers:[],rights:[]},this.renderItems(),this.renderOverflowMode(),this.tbarAlign&&this.itemPositioning()},t.prototype.initHScroll=function(e,t){!this.scrollModule&&this.checkOverflow(e,t[0])&&(this.tbarAlign&&this.element.querySelector("."+u+" .e-toolbar-center").removeAttribute("style"),this.scrollModule=new f.HScroll({scrollStep:50,enableRtl:this.enableRtl},t[0]),this.remove(this.scrollModule.element,"e-tbar-pos"),r.setStyleAttribute(this.element,{overflow:"hidden"}))},t.prototype.itemWidthCal=function(e){var t=0;return[].slice.call(e.children).forEach(function(e){t+=e.offsetWidth}),t},t.prototype.checkOverflow=function(e,t){if(l.isNullOrUndefined(e)||l.isNullOrUndefined(t))return!1;var i,o=e.offsetWidth;i=this.tbarAlign?this.itemWidthCal(this.scrollModule?t.querySelector(".e-hscroll-content"):t):t.offsetWidth;var r=e.querySelector(".e-hor-nav");return i>o-(r?r.offsetWidth:0)},t.prototype.renderOverflowMode=function(){var e=this.element,t=e.querySelector("."+u);if(e&&e.children.length>0)switch(this.offsetWid=e.offsetWidth,this.overflowMode){case"Scrollable":this.destroyHScroll(),this.initHScroll(e,e.getElementsByClassName(u));break;case"Popup":this.add(this.element,"e-toolpop"),this.tbarAlign&&this.removePositioning(),this.checkOverflow(e,t)&&(this.createPopupEle(e,[].slice.call(r.selectAll("."+u+" ."+v,e))),this.element.querySelector(".e-hor-nav").setAttribute("tabIndex","0")),this.tbarAlign&&(this.add(t,"e-tbar-pos"),this.itemPositioning())}},t.prototype.createPopupEle=function(e,t){var i=e.querySelector(".e-hor-nav");i||this.createPopupIcon(e),i=e.querySelector(".e-hor-nav");var o=e.offsetWidth-i.offsetWidth;this.element.classList.remove("e-rtl"),this.checkPriority(e,t,o,!0),this.enableRtl&&this.element.classList.add("e-rtl"),this.createPopup()},t.prototype.pushingPoppedEle=function(e,t,i,o){var n=e.element,s=r.selectAll(".e-overflow-show",i),l=0,a=[].slice.call(r.selectAll("."+y,n.querySelector("."+u))),c=0;a.forEach(function(n,a){s=r.selectAll(".e-overflow-show",i),n.classList.contains("e-overflow-show")&&s.length>0?e.tbResize&&s.length>a?(i.insertBefore(n,s[a]),++c):(i.insertBefore(n,i.children[s.length]),++c):n.classList.contains("e-overflow-show")?(i.insertBefore(n,i.firstChild),++c):e.tbResize&&n.classList.contains("e-overflow-hide")&&i.children.length>0&&0===s.length?(i.insertBefore(n,i.firstChild),++c):n.classList.contains("e-overflow-hide")?t.push(n):e.tbResize?(i.insertBefore(n,i.childNodes[l+c]),++l):i.appendChild(n),r.setStyleAttribute(n,{display:"",height:o+"px"})}),t.forEach(function(e){i.appendChild(e)});for(var h=r.selectAll("."+v,n.querySelector("."+u)),p=h.length-1;p>=0;p--){var d=h[p];if(!d.classList.contains("e-separator"))break;r.setStyleAttribute(d,{display:"none"})}},t.prototype.createPopup=function(){var e,t,i=this.element;t=i.querySelector("."+v+":not(.e-separator ):not(."+y+" )"),e="auto"===i.style.height||""===i.style.height?null:t.offsetHeight;var o,n=[];o=i.querySelector("#"+i.id+"_popup.e-toolbar-pop")?i.querySelector("#"+i.id+"_popup.e-toolbar-pop"):r.createElement("div",{id:i.id+"_popup",className:"e-toolbar-pop"}),this.pushingPoppedEle(this,n,o,e),this.popupInit(i,o)},t.prototype.popupInit=function(e,t){if(this.popObj){var o=this.popObj.element;r.setStyleAttribute(o,{maxHeight:"",display:"block"}),r.setStyleAttribute(o,{maxHeight:o.offsetHeight+"px",display:""})}else{e.appendChild(t),r.setStyleAttribute(this.element,{overflow:""});var n=new h.Popup(null,{relateTo:this.element,offsetY:e.offsetHeight,enableRtl:this.enableRtl,open:this.popupOpen.bind(this),close:this.popupClose,position:this.enableRtl?{X:"left",Y:"top"}:{X:"right",Y:"top"}});n.appendTo(t),i.EventHandler.add(document,"scroll",this.docEvent.bind(this)),i.EventHandler.add(document,"click ",this.docEvent.bind(this)),n.element.style.maxHeight=n.element.offsetHeight+"px",n.hide(),this.popObj=n,this.element.setAttribute("aria-haspopup","true")}},t.prototype.popupOpen=function(e){var t=this.popObj,i=this.popObj.element,n=this.popObj.element.parentElement,s=n.querySelector(".e-hor-nav");r.setStyleAttribute(t.element,{height:"auto",maxHeight:""}),t.element.style.maxHeight=t.element.clientHeight+"px";var a=i.offsetTop+i.offsetHeight+p.calculatePosition(n).top;if(!l.isNullOrUndefined(s)){var c=s.firstElementChild;s.classList.add("e-nav-active"),o.classList(c,["e-popup-up-icon"],["e-popup-down-icon"])}if(window.innerHeight+window.scrollY<a){var h=i.offsetHeight-(a-window.innerHeight-window.scrollY+5);t.height=h+"px",r.setStyleAttribute(t.element,{maxHeight:h+"px"})}},t.prototype.popupClose=function(e){var t=this.element.parentElement,i=t.querySelector(".e-hor-nav");if(i){var r=i.firstElementChild;i.classList.remove("e-nav-active"),o.classList(r,["e-popup-down-icon"],["e-popup-up-icon"])}},t.prototype.checkPriority=function(e,t,i,o){for(var n=t.length,s=i,l=0,a=0,c=0,h=n-1;h>=0;h--){var p=parseFloat(window.getComputedStyle(t[h]).marginRight);if(p+=parseFloat(window.getComputedStyle(t[h]).marginLeft),t[h]===this.tbarEle[0]&&(this.tbarEleMrgn=p),t[h].offsetLeft+t[h].offsetWidth+p>i){if(t[h].classList.contains("e-separator")){if(l>0&&a===c){var d=t[h+a+(l-1)];d.classList.contains("e-separator")&&r.setStyleAttribute(d,{display:"none"})}l++,a=0,c=0}else a++;t[h].classList.contains("e-overflow-show")&&o?i-=t[h].offsetWidth+p:t[h].classList.contains("e-separator")?i-=t[h].offsetWidth+p:(t[h].classList.add(y),r.setStyleAttribute(t[h],{display:"none"}),c++)}}if(o){var f=r.selectAll("."+v+":not(."+y+")",this.element);this.checkPriority(e,f,s,!1)}},t.prototype.createPopupIcon=function(e){var t=e.id.concat("_nav"),i="e-"+e.id.concat("_nav e-hor-nav"),o=r.createElement("div",{id:t,className:i});"msie"!==c.Browser.info.name&&"edge"!==c.Browser.info.name||o.classList.add("e-ie-align");var n=r.createElement("div",{className:"e-popup-down-icon e-icons"});o.appendChild(n),o.setAttribute("tabindex","0"),e.insertBefore(o,e.firstChild)},t.prototype.tbarPriRef=function(e,t,i,n,s,a,c){var h=this.popObj.element,p=r.selectAll("."+y+":not(.e-overflow-show)",h).length;if(0===r.selectAll(".e-toolbar-item:not(.e-separator):not(.e-overflow-show)",e).length){var d=e.children[t-(t-i)-1];if(l.isNullOrUndefined(d)||!d.classList.contains("e-separator")||o.isVisible(d))e.insertBefore(n,e.children[t-(t-i)]);else{d.style.display="inherit";var f=d.offsetWidth+2*parseFloat(window.getComputedStyle(d).marginRight),u=d.previousElementSibling;a+f<c||s?(e.insertBefore(n,e.children[t-(t-i)]),l.isNullOrUndefined(u)||(u.style.display="")):u.classList.contains("e-separator")&&(u.style.display="none"),d.style.display=""}}else e.insertBefore(n,e.children[t-p])},t.prototype.popupRefresh=function(e,t){var i=this.element,r=i.querySelector(".e-hor-nav"),n=i.querySelector("."+u);if(!l.isNullOrUndefined(r)){n.removeAttribute("style"),e.style.display="block";var s=i.offsetWidth-(r.offsetWidth+n.offsetWidth);this.popupEleRefresh(s,e,t),e.style.display="",0===e.children.length&&(o.detach(r),this.popObj.destroy(),o.detach(this.popObj.element),this.popObj=null,i.setAttribute("aria-haspopup","false"),i.classList.remove("e-toolpop"))}},t.prototype.popupEleRefresh=function(e,t,i){for(var o,n,s=this.tbarEle,a=this.element.querySelector("."+u),c=this,h=0,p=[].slice.call(t.children);h<p.length;h++){var d=p[h];if("break"===function(t){t.style.position="absolute";var h=t.offsetWidth,p=t.querySelector(".e-tbar-btn-text");if(t.classList.contains("e-tbtn-align")||t.classList.contains("e-popup-text")){var d=t.children[0];!l.isNullOrUndefined(p)&&t.classList.contains("e-popup-text")?p.style.display="none":!l.isNullOrUndefined(p)&&t.classList.contains("e-toolbar-text")&&(p.style.display="block"),d.style.minWidth="0%",h=t.offsetWidth,d.style.minWidth="",l.isNullOrUndefined(p)||(p.style.display="")}if(t===c.tbarEle[0]&&(h+=c.tbarEleMrgn),t.style.position="",!(h<e||i))return"break";if(t.classList.contains("e-overflow-hide")||t.classList.remove(y),n=c.tbarEle.indexOf(t),c.tbarAlign){var f=c.items[n].align;n=c.tbarAlgEle[f+"s"].indexOf(t),s=c.tbarAlgEle[f+"s"],a=c.element.querySelector("."+u+" .e-toolbar-"+f)}var v=0;s.slice(0,n).forEach(function(t){(t.classList.contains("e-overflow-show")||t.classList.contains("e-separator"))&&(t.classList.contains("e-separator")&&(t.style.display="",e-=t.offsetWidth),v++)}),t.classList.contains("e-overflow-show")?(c.tbarPriRef(a,n,v,t,i,h,e),e-=t.offsetWidth):0===n?(a.insertBefore(t,a.firstChild),e-=t.offsetWidth):(o=r.selectAll(".e-overflow-show",c.popObj.element).length,a.insertBefore(t,a.children[n-o]),e-=t.offsetWidth),t.style.height=""}(d))break}},t.prototype.removePositioning=function(){var e=this.element.querySelector("."+u);if(!l.isNullOrUndefined(e)&&e.classList.contains("e-tbar-pos")){this.remove(e,"e-tbar-pos");var t=[].slice.call(e.childNodes);t[1].removeAttribute("style"),t[2].removeAttribute("style")}},t.prototype.refreshPositioning=function(){var e=this.element.querySelector("."+u);this.add(e,"e-tbar-pos"),this.itemPositioning()},t.prototype.itemPositioning=function(){var e=this.element.querySelector("."+u);if(!l.isNullOrUndefined(e)&&e.classList.contains("e-tbar-pos")){var t,i=this.element.querySelector(".e-hor-nav");t=this.scrollModule?[].slice.call(e.querySelector(".e-hscroll-content").children):[].slice.call(e.childNodes);var o=t[0].offsetWidth+t[2].offsetWidth,r=this.element.offsetWidth;if(i&&(r-=i.offsetWidth,t[2].style.right=i.offsetWidth+"px"),!(r<=o)){var n=(r-o-t[1].offsetWidth)/2;t[1].style.marginLeft=t[0].offsetWidth+n+"px"}}},t.prototype.tbarItemAlign=function(e,t,i){var o=this,n=[];if(n.push(r.createElement("div",{className:"e-toolbar-left"})),n.push(r.createElement("div",{className:"e-toolbar-center"})),n.push(r.createElement("div",{className:"e-toolbar-right"})),0===i&&"left"!==e.align)n.forEach(function(e){t.appendChild(e)}),this.tbarAlign=!0,this.add(t,"e-tbar-pos");else if("left"!==e.align){var s=t.childNodes,l=n[0];[].slice.call(s).forEach(function(e){o.tbarAlgEle.lefts.push(e),l.appendChild(e)}),t.appendChild(l),t.appendChild(n[1]),t.appendChild(n[2]),this.tbarAlign=!0,this.add(t,"e-tbar-pos")}},t.prototype.ctrlTemplate=function(){var e=this;this.add(this.trgtEle,u),this.tbarEle=[],[].slice.call(this.trgtEle.children).forEach(function(t){"DIV"===t.tagName&&(e.tbarEle.push(t),e.add(t,v))})},t.prototype.renderItems=function(){var e,t,i,o=this.element,n=this.items;if(o&&o.children.length>0){e=r.selectAll(".e-hor-nav",o).length>0?o.children[1]:o.children[0]}if(null!=this.trgtEle)this.ctrlTemplate();else if(o&&n.length>0){e||(e=r.createElement("div",{className:u}));for(var s=0;s<n.length;s++)t=this.renderSubComponent(n[s]),-1===this.tbarEle.indexOf(t)&&this.tbarEle.push(t),this.tbarAlign||this.tbarItemAlign(n[s],e,s),i=e.querySelector(".e-toolbar-"+n[s].align.toLowerCase()),i?(this.tbarAlgEle[n[s].align+"s"].push(t),i.appendChild(t)):e.appendChild(t);o.appendChild(e)}},t.prototype.setAttr=function(e,t){for(var i,o=Object.keys(e),r=0;r<o.length;r++)i=o[r],"class"===i?this.add(t,e[i]):t.setAttribute(i,e[i])},t.prototype.enableItems=function(e,t){var i=e,r=i.length;if(l.isNullOrUndefined(t)&&(t=!0),r&&r>1)t?o.removeClass(i,"e-overlay"):o.addClass(i,"e-overlay");else{var n=void 0;n=r&&1===r?i[0]:e,t?this.remove(n,"e-overlay"):this.add(n,"e-overlay")}},t.prototype.addItems=function(e,t){var i,n,s=this.element.querySelector("."+u),a="left";l.isNullOrUndefined(t)&&(t=0),e.forEach(function(e){l.isNullOrUndefined(e.align)||"left"===e.align||"left"!==a||(a=e.align)});for(var c=0,h=e;c<h.length;c++){var p=h[c];if(i=r.selectAll("."+v,this.element),p.align=a,n=this.renderSubComponent(p),this.tbarEle.length>t&&i.length>0){if(this.tbarAlign){var d="l"===p.align[0]?0:"c"===p.align[0]?1:2,f=void 0;f=this.scrollModule?o.closest(i[0],"."+u+" .e-hscroll-content").children[d]:o.closest(i[0],"."+u).children[d],f.insertBefore(n,f.children[t]),this.tbarAlgEle[p.align+"s"].splice(t,0,n),this.refreshPositioning()}else i[0].parentNode.insertBefore(n,i[t]);this.items.splice(t,0,p),this.tbarEle.splice(t,0,n),t++,this.offsetWid=s.offsetWidth}}s.style.width="",this.renderOverflowMode()},t.prototype.removeItems=function(e){var t,i=e,o=[].slice.call(r.selectAll("."+v,this.element));if("number"==typeof i)t=parseInt(e.toString(),10),this.removeItemByIndex(t,o);else if(i&&i.length>1)for(var n=0,s=[].slice.call(i);n<s.length;n++){var l=s[n];t=this.tbarEle.indexOf(l),this.removeItemByIndex(t,o),o=r.selectAll("."+v,this.element)}else{var l=i&&i.length&&1===i.length?i[0]:e;t=o.indexOf(l),this.removeItemByIndex(t,o)}this.resize()},t.prototype.removeItemByIndex=function(e,t){if(this.tbarEle[e]&&t[e]){var i=this.tbarEle.indexOf(t[e]);if(this.tbarAlign){var r=this.tbarAlgEle[this.items[i].align+"s"].indexOf(this.tbarEle[i]);this.tbarAlgEle[this.items[i].align+"s"].splice(r,1)}o.detach(t[e]),this.items.splice(i,1),this.tbarEle.splice(i,1)}},t.prototype.templateRender=function(e,t,i){var o=i.type;if("string"==typeof e){t.innerHTML=e;var n=t.childNodes[0];if(!n.tagName){var s=document.querySelector(e);t.innerHTML="",t.appendChild(s)}}else if("Input"===o){var a=e,n=r.createElement("input");i.id?n.id=i.id:n.id=l.getUniqueID("tbr-ipt"),t.appendChild(n),a.appendTo(n)}this.add(t,"e-template"),this.tbarEle.push(t)},t.prototype.buttonRendering=function(e,t){var i,o,n=r.createElement("button",{className:"e-tbar-btn"}),s=e.text;e.id?n.id=e.id:n.id=l.getUniqueID("e-tbr-btn");var a=r.createElement("div",{className:"e-tbar-btn-text"});return s?(a.innerHTML=s,n.appendChild(a),n.classList.add("e-tbtn-txt")):this.add(t,"e-tbtn-align"),(e.prefixIcon||e.suffixIcon)&&(e.prefixIcon&&e.suffixIcon||e.prefixIcon?(i=e.prefixIcon+" e-icons",o="left"):(i=e.suffixIcon+" e-icons",o="right")),new d.Button({iconCss:i,iconPosition:o},n),e.width&&r.setStyleAttribute(n,{width:l.formatUnit(e.width)}),n},t.prototype.renderSubComponent=function(e){var t,i;if(t=r.createElement("div",{className:v}),this.tbarEle||(this.tbarEle=[]),e.htmlAttributes&&this.setAttr(e.htmlAttributes,t),e.tooltipText&&t.setAttribute("title",e.tooltipText),e.cssClass&&(t.className=t.className+" "+e.cssClass),e.template)this.templateRender(e.template,t,e);else switch(e.type){case"Button":i=this.buttonRendering(e,t),i.setAttribute("tabindex","-1"),t.appendChild(i),t.addEventListener("click",this.itemClick.bind(this));break;case"Separator":this.add(t,"e-separator")}if(e.showTextOn){var o=e.showTextOn;"Toolbar"===o?(this.add(t,"e-toolbar-text"),this.add(t,"e-tbtn-align")):"Overflow"===o&&this.add(t,"e-popup-text")}if(e.overflow){var n=e.overflow;"Show"===n?this.add(t,"e-overflow-show"):"Hide"===n&&(t.classList.contains("e-separator")||this.add(t,"e-overflow-hide"))}return t},t.prototype.itemClick=function(e){this.activeEleRemove(e.currentTarget.firstChild),this.activeEle.focus()},t.prototype.activeEleRemove=function(e){l.isNullOrUndefined(this.activeEle)||this.activeEle.setAttribute("tabindex","-1"),this.activeEle=e,e.removeAttribute("tabindex")},t.prototype.getPersistData=function(){return this.addOnPersist([])},t.prototype.getModuleName=function(){return"toolbar"},t.prototype.resize=function(){var e=this.element;this.tbResize=!0,this.tbarAlign&&this.itemPositioning(),this.popObj&&this.popObj.hide();var t=this.checkOverflow(e,e.getElementsByClassName(u)[0]);t&&this.scrollModule&&this.offsetWid===e.offsetWidth||((this.offsetWid>e.offsetWidth||t)&&this.renderOverflowMode(),this.popObj&&(this.tbarAlign&&this.removePositioning(),this.popupRefresh(this.popObj.element,!1),this.tbarAlign&&this.refreshPositioning()),this.offsetWid=e.offsetWidth,this.tbResize=!1)},t.prototype.onPropertyChanged=function(e,t){for(var i=this.element,o=0,n=Object.keys(e);o<n.length;o++){switch(n[o]){case"items":this.destroyHScroll(),this.renderItems(),this.renderOverflowMode();break;case"width":var s=i.offsetWidth;r.setStyleAttribute(i,{width:l.formatUnit(e.width)}),this.renderOverflowMode(),this.popObj&&s<i.offsetWidth&&this.popupRefresh(this.popObj.element,!1);break;case"height":r.setStyleAttribute(this.element,{height:l.formatUnit(e.height)});break;case"overflowMode":this.scrollModule&&(this.remove(this.scrollModule.element,"e-rtl"),this.destroyHScroll()),this.popObj&&this.popupRefresh(this.popObj.element,!0),this.renderOverflowMode(),this.enableRtl&&this.add(i,"e-rtl");break;case"enableRtl":e.enableRtl?this.add(i,"e-rtl"):this.remove(i,"e-rtl"),l.isNullOrUndefined(this.scrollModule)||(e.enableRtl?this.add(this.scrollModule.element,"e-rtl"):this.remove(this.scrollModule.element,"e-rtl")),l.isNullOrUndefined(this.popObj)||(e.enableRtl?this.add(this.popObj.element,"e-rtl"):this.remove(this.popObj.element,"e-rtl"))}}},t}(i.Component);s([c.Collection([],m)],b.prototype,"items",void 0),s([i.Property("auto")],b.prototype,"width",void 0),s([i.Property("auto")],b.prototype,"height",void 0),s([i.Property("Scrollable")],b.prototype,"overflowMode",void 0),s([i.Property(!1)],b.prototype,"enableRtl",void 0),s([i.Event()],b.prototype,"clicked",void 0),s([i.Event()],b.prototype,"created",void 0),s([i.Event()],b.prototype,"destroyed",void 0),s([i.Event()],b.prototype,"beforeCreate",void 0),b=s([a.NotifyPropertyChanges],b),t.Toolbar=b,t.toolbarBuilder=a.CreateBuilder(b)}.apply(t,o))&&(e.exports=r)},function(e,i){e.exports=t},function(e,t,i){var o,r;o=[i,t],void 0!==(r=function(e,t){"use strict";function i(e,t){var i={left:0,top:0};if(!e||!t)return i;for(;t.offsetParent&&e&&t.offsetParent!==e;)i.left+=e.offsetLeft,i.top+=e.offsetTop,e=e.offsetParent;return i}function o(e,t,i){if(!e)return{left:0,top:0};t||(t="left"),i||(i="top"),m=e.ownerDocument,y=e;var o={left:0,top:0};return s(t.toLowerCase(),i.toLowerCase(),o)}function r(e,t){t.left=e}function n(e,t){t.top=e}function s(e,t,i){switch(v=y.getBoundingClientRect(),t+e){case"topcenter":r(u(),i),n(p(),i);break;case"topright":r(f(),i),n(p(),i);break;case"centercenter":r(u(),i),n(h(),i);break;case"centerright":r(f(),i),n(h(),i);break;case"centerleft":r(d(),i),n(h(),i);break;case"bottomcenter":r(u(),i),n(c(),i);break;case"bottomright":r(f(),i),n(c(),i);break;case"bottomleft":r(d(),i),n(c(),i);break;default:case"topleft":r(d(),i),n(p(),i)}return i}function l(){return m.documentElement.scrollTop||m.body.scrollTop}function a(){return m.documentElement.scrollLeft||m.body.scrollLeft}function c(){return v.bottom+l()}function h(){return p()+v.height/2}function p(){return v.top+l()}function d(){return v.left+a()}function f(){return v.right+a()}function u(){return d()+v.width/2}Object.defineProperty(t,"__esModule",{value:!0});var v,y,m;t.calculateRelativeBasedPosition=i,t.calculatePosition=o}.apply(t,o))&&(e.exports=r)},function(e,t){e.exports=i}])});
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@syncfusion/ej2-base"),require("@syncfusion/ej2-popups"),require("@syncfusion/ej2-buttons"));else if("function"==typeof define&&define.amd)define(["@syncfusion/ej2-base","@syncfusion/ej2-popups","@syncfusion/ej2-buttons"],t);else{var i="object"==typeof exports?t(require("@syncfusion/ej2-base"),require("@syncfusion/ej2-popups"),require("@syncfusion/ej2-buttons")):t(e["@syncfusion/ej2-base"],e["@syncfusion/ej2-popups"],e["@syncfusion/ej2-buttons"]);for(var o in i)("object"==typeof exports?exports:e)[o]=i[o]}}(this,function(e,t,i){return function(e){function t(o){if(i[o])return i[o].exports;var s=i[o]={exports:{},id:o,loaded:!1};return e[o].call(s.exports,s,s.exports,t),s.loaded=!0,s.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t,i){var o,s;o=[i,t,i(1),i(4)],void 0!==(s=function(e,t,i,o){"use strict";function s(e){for(var i in e)t.hasOwnProperty(i)||(t[i]=e[i])}Object.defineProperty(t,"__esModule",{value:!0}),s(i),s(o)}.apply(t,o))&&(e.exports=s)},function(e,t,i){var o,s;o=[i,t,i(2)],void 0!==(s=function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e){for(var i in e)t.hasOwnProperty(i)||(t[i]=e[i])}(i)}.apply(t,o))&&(e.exports=s)},function(e,t,i){var o,s,r=this&&this.__extends||function(){var e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var i in t)t.hasOwnProperty(i)&&(e[i]=t[i])};return function(t,i){function o(){this.constructor=t}e(t,i),t.prototype=null===i?Object.create(i):(o.prototype=i.prototype,new o)}}(),l=this&&this.__decorate||function(e,t,i,o){var s,r=arguments.length,l=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,o);else for(var n=e.length-1;n>=0;n--)(s=e[n])&&(l=(r<3?s(l):r>3?s(t,i,l):s(t,i))||l);return r>3&&l&&Object.defineProperty(t,i,l),l};o=[i,t,i(3),i(3)],void 0!==(s=function(e,t,i,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var s=function(e){function t(t,i){return e.call(this,t,i)||this}return r(t,e),t.prototype.preRender=function(){this.browser=o.Browser.info.name,this.browserCheck="mozilla"===this.browser,this.isDevice=o.Browser.isDevice;var e=this.element;this.ieCheck="edge"===this.browser||"msie"===this.browser,this.initialize(),""===e.id&&(e.id=i.getUniqueID("hscroll"),this.uniqueId=!0),e.style.display="block",this.enableRtl&&e.classList.add("e-rtl")},t.prototype.render=function(){this.touchModule=new i.Touch(this.element,{scroll:this.touchHandler.bind(this)}),this.element.addEventListener("contextmenu",function(e){e.preventDefault()}),this.isDevice?this.element.classList.add("e-scroll-device"):(this.createNavIcon(this.element),i.EventHandler.add(this.scrollEle,"scroll",this.scrollHandler,this))},t.prototype.initialize=function(){var e=o.createElement("div",{className:"e-hscroll-content"}),t=o.createElement("div",{className:"e-hscroll-bar"});t.setAttribute("tabindex","-1");for(var i=this.element,s=[].slice.call(i.children),r=0,l=s;r<l.length;r++){var n=l[r];e.appendChild(n)}t.appendChild(e),i.appendChild(t),t.style.overflowX="hidden",this.scrollEle=t,this.scrollItems=e},t.prototype.getPersistData=function(){var e=["scrollStep"];return this.addOnPersist(e)},t.prototype.getModuleName=function(){return"hScroll"},t.prototype.destroy=function(){var t=this.element;t.style.display="",t.classList.remove("e-hscroll");for(var s=i.selectAll("#"+t.id+"_nav.e-"+t.id+"_nav"),r=0,l=[].slice.call(this.scrollItems.children);r<l.length;r++){var n=l[r];t.appendChild(n)}this.uniqueId&&this.element.removeAttribute("id"),o.detach(this.scrollEle),s.length>0&&(o.detach(s[0]),o.detach(s[1])),i.EventHandler.remove(this.scrollEle,"scroll",this.scrollHandler),this.touchModule.destroy(),this.touchModule=null,e.prototype.destroy.call(this)},t.prototype.createNavIcon=function(e){var t=e.id.concat("_nav"),i="e-"+e.id.concat("_nav e-scroll-nav e-scroll-right-nav"),s=o.createElement("div",{id:t,className:i});s.setAttribute("aria-disabled","false");var r=o.createElement("div",{className:"e-nav-right-arrow e-nav-arrow e-icons"}),l="e-"+e.id.concat("_nav e-scroll-nav e-scroll-left-nav"),n=o.createElement("div",{id:t,className:l+" e-overlay"});n.setAttribute("aria-disabled","true");var a=o.createElement("div",{className:"e-nav-left-arrow e-nav-arrow e-icons"});n.appendChild(a),s.appendChild(r),s.setAttribute("tabindex","0"),e.appendChild(s),e.insertBefore(n,e.firstChild),this.ieCheck&&(s.classList.add("e-ie-align"),n.classList.add("e-ie-align")),this.eventBinding([s,n])},t.prototype.onKeyPress=function(e){var t=this;if("Enter"===e.key){var i=function(){t.keyTimeout=!0,t.eleScrolling(10,e.target)};this.keyTimer=window.setTimeout(function(){i()},100)}},t.prototype.onKeyUp=function(e){"Enter"===e.key&&(this.keyTimeout?this.keyTimeout=!1:e.target.click(),clearTimeout(this.keyTimer))},t.prototype.eventBinding=function(e){var t=this;e.forEach(function(e){new i.Touch(e,{tapHold:t.tabHoldHandler.bind(t),tapHoldThreshold:500}),e.addEventListener("keydown",t.onKeyPress.bind(t)),e.addEventListener("keyup",t.onKeyUp.bind(t)),e.addEventListener("mouseup",t.repeatScroll.bind(t)),e.addEventListener("touchend",t.repeatScroll.bind(t)),e.addEventListener("contextmenu",function(e){e.preventDefault()}),i.EventHandler.add(e,"click",t.clickEventHandler,t)})},t.prototype.repeatScroll=function(){clearInterval(this.timeout)},t.prototype.tabHoldHandler=function(e){var t=this,i=e.originalEvent.target;i=this.contains(i,"e-scroll-nav")?i.firstElementChild:i;var o=function(){t.eleScrolling(10,i)};this.timeout=window.setInterval(function(){o()},50)},t.prototype.contains=function(e,t){return e.classList.contains(t)},t.prototype.eleScrolling=function(e,t){var i=this.scrollEle,o=this.element,s=t.classList;s.contains("e-scroll-nav")&&(s=t.querySelector(".e-nav-arrow").classList),this.contains(o,"e-rtl")&&this.browserCheck&&(e=-e);var r=i.scrollLeft;!this.contains(o,"e-rtl")||this.browserCheck||this.ieCheck?s.contains("e-nav-right-arrow")?i.scrollLeft=r+e:i.scrollLeft=r-e:s.contains("e-nav-left-arrow")?i.scrollLeft=r+e:i.scrollLeft=r-e},t.prototype.clickEventHandler=function(e){this.eleScrolling(this.scrollStep,e.target)},t.prototype.touchHandler=function(e){var t,i=this.scrollEle;t=e.distanceX,this.ieCheck&&this.contains(this.element,"e-rtl")&&(t=-t),"Left"===e.scrollDirection?i.scrollLeft=i.scrollLeft+t:"Right"===e.scrollDirection&&(i.scrollLeft=i.scrollLeft-t)},t.prototype.arrowDisabling=function(e,t){e.classList.add("e-overlay"),e.setAttribute("aria-disabled","true"),e.removeAttribute("tabindex"),clearInterval(this.timeout),t.classList.remove("e-overlay"),t.setAttribute("aria-disabled","false"),t.setAttribute("tabindex","0"),this.repeatScroll()},t.prototype.scrollHandler=function(e){var t=e.target,i=t.offsetWidth,o=this.element,s=this.element.querySelector(".e-scroll-left-nav"),r=this.element.querySelector(".e-scroll-right-nav"),l=t.scrollLeft;if(l<=0&&(l=-l),0===l)!this.contains(o,"e-rtl")||this.browserCheck||this.ieCheck?this.arrowDisabling(s,r):this.arrowDisabling(r,s);else if(Math.ceil(i+l+.1)>=t.scrollWidth)!this.contains(o,"e-rtl")||this.browserCheck||this.ieCheck?this.arrowDisabling(r,s):this.arrowDisabling(s,r);else{var n=this.element.querySelector(".e-overlay");n&&(n.classList.remove("e-overlay"),n.setAttribute("aria-disabled","false"),n.setAttribute("tabindex","0"))}},t.prototype.onPropertyChanged=function(e,t){for(var i=0,o=Object.keys(e);i<o.length;i++){switch(o[i]){case"scrollStep":break;case"enableRtl":e.enableRtl?this.element.classList.add("e-rtl"):this.element.classList.remove("e-rtl")}}},t}(i.Component);l([o.Property(40)],s.prototype,"scrollStep",void 0),s=l([o.NotifyPropertyChanges],s),t.HScroll=s}.apply(t,o))&&(e.exports=s)},function(t,i){t.exports=e},function(e,t,i){var o,s;o=[i,t,i(5)],void 0!==(s=function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e){for(var i in e)t.hasOwnProperty(i)||(t[i]=e[i])}(i)}.apply(t,o))&&(e.exports=s)},function(e,t,i){var o,s,r=this&&this.__extends||function(){var e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var i in t)t.hasOwnProperty(i)&&(e[i]=t[i])};return function(t,i){function o(){this.constructor=t}e(t,i),t.prototype=null===i?Object.create(i):(o.prototype=i.prototype,new o)}}(),l=this&&this.__decorate||function(e,t,i,o){var s,r=arguments.length,l=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,o);else for(var n=e.length-1;n>=0;n--)(s=e[n])&&(l=(r<3?s(l):r>3?s(t,i,l):s(t,i))||l);return r>3&&l&&Object.defineProperty(t,i,l),l};o=[i,t,i(3),i(3),i(3),i(3),i(3),i(6),i(6),i(7),i(2)],void 0!==(s=function(e,t,i,o,s,n,a,c,h,p,d){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var f="e-toolbar-items",u="e-toolbar-item",v="e-toolbar-popup",y=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return r(t,e),t}(a.ChildProperty);l([i.Property("")],y.prototype,"id",void 0),l([i.Property("")],y.prototype,"text",void 0),l([i.Property("auto")],y.prototype,"width",void 0),l([i.Property("")],y.prototype,"cssClass",void 0),l([i.Property("")],y.prototype,"prefixIcon",void 0),l([i.Property("")],y.prototype,"suffixIcon",void 0),l([i.Property("None")],y.prototype,"overflow",void 0),l([i.Property("")],y.prototype,"template",void 0),l([i.Property("Button")],y.prototype,"type",void 0),l([i.Property("Both")],y.prototype,"showTextOn",void 0),l([i.Property(null)],y.prototype,"htmlAttributes",void 0),l([i.Property("")],y.prototype,"tooltipText",void 0),l([i.Property("left")],y.prototype,"align",void 0),t.Item=y;var m=function(e){function t(t,i){var o=e.call(this,t,i)||this;return o.keyConfigs={moveLeft:"leftarrow",moveRight:"rightarrow",moveUp:"uparrow",moveDown:"downarrow",popupOpen:"enter",popupClose:"escape",tab:"tab",home:"home",end:"end"},o}return r(t,e),t.prototype.destroy=function(){var t=this.element;e.prototype.destroy.call(this),this.unwireEvents(),t.children.length>0&&t.removeChild(t.children[0]),t.removeAttribute("style")},t.prototype.preRender=function(){this.trigger("beforeCreate"),this.scrollModule=null,this.popObj=null,this.enableRtl&&this.add(this.element,"e-rtl")},t.prototype.wireEvents=function(){i.EventHandler.add(this.element,"click",this.clickHandler,this),window.addEventListener("resize",this.resize.bind(this)),this.keyModule=new o.KeyboardEvents(this.element,{keyAction:this.keyActionHandler.bind(this),keyConfigs:this.keyConfigs}),this.element.setAttribute("tabIndex","0")},t.prototype.unwireEvents=function(){i.EventHandler.remove(this.element,"click",this.clickHandler),this.destroyHScroll(),this.keyModule.destroy(),this.popObj&&(i.EventHandler.remove(document,"scroll",this.docEvent),i.EventHandler.remove(document,"click",this.docEvent))},t.prototype.docEvent=function(e){var t=o.closest(e.target,".e-popup");this.popObj&&o.isVisible(this.popObj.element)&&!t&&this.popObj.hide({name:"SlideUp",duration:100})},t.prototype.destroyHScroll=function(){this.scrollModule&&(this.tbarAlign&&this.add(this.scrollModule.element,"e-tbar-pos"),this.scrollModule.destroy(),this.scrollModule=null)},t.prototype.destroyItems=function(){[].slice.call(this.element.querySelectorAll("."+u)).forEach(function(e){o.detach(e)}),this.tbarEle=[],this.tbarAlgEle={lefts:[],centers:[],rights:[]}},t.prototype.destroyMode=function(){this.scrollModule&&(this.remove(this.scrollModule.element,"e-rtl"),this.destroyHScroll()),this.popObj&&this.popupRefresh(this.popObj.element,!0)},t.prototype.add=function(e,t){e.classList.add(t)},t.prototype.remove=function(e,t){e.classList.remove(t)},t.prototype.elementFocus=function(e){var t=e.firstElementChild;t?(t.focus(),this.activeEleSwitch(e)):e.focus()},t.prototype.clstElement=function(e,t){return e&&this.popObj&&o.isVisible(this.popObj.element)?this.popObj.element.querySelector("."+u):this.element===t||e?this.element.querySelector("."+u):o.closest(t,"."+u)},t.prototype.keyHandling=function(e,t,i,r,l){var n=this.popObj,a=this.element,c={name:"SlideUp",duration:100};switch(t.action){case"moveRight":a===i||r?this.elementFocus(e):this.eleFocus(e,"next");break;case"moveLeft":if(n&&r)if(this.tbarAlign){e=o.closest(e,"."+f);var h=s.selectAll("."+u,e);e=h[h.length-1]}else e=e.parentElement.lastElementChild;!r||e.classList.contains("e-separator")||e.classList.contains("e-overlay")?this.eleFocus(e,"previous"):this.elementFocus(e);break;case"home":case"end":var p=void 0,d=void 0;if(e){var v=o.closest(e,".e-popup");v?o.isVisible(this.popObj.element)&&(d=v.children,p="home"===t.action?d[0]:d[d.length-1]):(d=this.element.querySelectorAll("."+f+" ."+u),p="home"===t.action?d[0]:d[d.length-1]),p&&this.elementFocus(p)}break;case"moveUp":case"moveDown":var y="moveUp"===t.action?"previous":"next";n&&o.closest(i,".e-popup")?"moveUp"===t.action&&n.element.firstElementChild===e?a.querySelector(".e-hor-nav").focus():this.eleFocus(e,y):"moveDown"===t.action&&this.elementFocus(e);break;case"tab":if(!l){var m=e.firstElementChild;(a===i||r)&&(this.activeEle?this.activeEle.focus():(this.activeEleRemove(m),m.focus()),this.element.removeAttribute("tabindex"))}break;case"popupClose":n&&n.hide(c);break;case"popupOpen":if(!r)return;n&&!o.isVisible(n.element)?(n.element.style.top=a.offsetHeight+"px",n.show({name:"SlideDown",duration:100})):n.hide(c)}},t.prototype.keyActionHandler=function(e){e.preventDefault();var t,i=e.target,o=i.classList.contains("e-hor-nav"),s=i.classList.contains("e-scroll-nav");((t=this.clstElement(o,i))||s)&&this.keyHandling(t,e,i,o,s)},t.prototype.eleFocus=function(e,t){var i=Object(e)[t+"ElementSibling"],o=function(e){return e.classList.contains("e-separator")||e.classList.contains("e-overlay")};if(i){var s=o(i);if(s)if(Object(i)[t+"Sibling"]){if(i=Object(i)[t+"Sibling"],s=o(i))return void this.eleFocus(i,t)}else if(this.popObj&&"next"===t)return void this.element.querySelector(".e-hor-nav").focus();this.elementFocus(i)}else if(this.tbarAlign){var r=Object(e.parentElement)[t+"ElementSibling"];if(!n.isNullOrUndefined(r)&&r.children.length>0)if("next"===t){var l=r.querySelector("."+u);o(l)?this.eleFocus(l,t):(l.firstElementChild.focus(),this.activeEleSwitch(l))}else{var l=r.lastElementChild;o(l)?this.eleFocus(l,t):this.elementFocus(l)}else this.popObj&&this.element.querySelector(".e-hor-nav").focus()}else this.popObj&&"next"===t&&this.element.querySelector(".e-hor-nav").focus()},t.prototype.clickHandler=function(e){var t=e.target,i=t.classList,s=this.element,r=o.closest(t,".e-hor-nav");r||(r=t),!s.children[0].classList.contains("e-hscroll")&&i.contains("e-hor-nav")&&(i=t.querySelector(".e-icons").classList),(i.contains("e-popup-up-icon")||i.contains("e-popup-down-icon"))&&this.popupClickHandler(s,r,"e-rtl");var l,a=o.closest(e.target,"."+u);if(!n.isNullOrUndefined(a)&&!a.classList.contains("e-overlay")||r.classList.contains("e-hor-nav")){a&&(l=this.items[this.tbarEle.indexOf(a)]);var c={originalEvent:e,item:l};this.trigger("clicked",c)}},t.prototype.popupClickHandler=function(e,t,i){var s=this.popObj;o.isVisible(s.element)?(t.classList.remove("e-nav-active"),s.hide({name:"SlideUp",duration:100})):(e.classList.contains(i)&&(s.enableRtl=!0,s.position={X:"left",Y:"top"}),0!==s.offsetX||e.classList.contains(i)||(s.enableRtl=!1,s.position={X:"right",Y:"top"}),s.dataBind(),s.element.style.top=this.element.offsetHeight+"px",t.classList.add("e-nav-active"),s.show({name:"SlideDown",duration:100}))},t.prototype.render=function(){this.initialize(),this.renderControl(),this.wireEvents()},t.prototype.initialize=function(){var e=n.formatUnit(this.width),t=n.formatUnit(this.height);"msie"===a.Browser.info.name&&"auto"===this.height||s.setStyleAttribute(this.element,{height:t}),s.setStyleAttribute(this.element,{width:e});var i={role:"toolbar","aria-disabled":"false","aria-haspopup":"false","aria-orientation":"horizontal"};o.attributes(this.element,i)},t.prototype.renderControl=function(){this.trgtEle=this.element.children.length>0?this.element.querySelector("div"):null,this.tbarAlgEle={lefts:[],centers:[],rights:[]},this.renderItems(),this.renderOverflowMode(),this.tbarAlign&&this.itemPositioning()},t.prototype.initHScroll=function(e,t){!this.scrollModule&&this.checkOverflow(e,t[0])&&(this.tbarAlign&&this.element.querySelector("."+f+" .e-toolbar-center").removeAttribute("style"),this.scrollModule=new d.HScroll({scrollStep:50,enableRtl:this.enableRtl},t[0]),this.remove(this.scrollModule.element,"e-tbar-pos"),s.setStyleAttribute(this.element,{overflow:"hidden"}))},t.prototype.itemWidthCal=function(e){var t=0;return[].slice.call(e.children).forEach(function(e){t+=e.offsetWidth}),t},t.prototype.checkOverflow=function(e,t){if(n.isNullOrUndefined(e)||n.isNullOrUndefined(t))return!1;var i,o=e.offsetWidth;i=this.tbarAlign?this.itemWidthCal(this.scrollModule?t.querySelector(".e-hscroll-content"):t):t.offsetWidth;var s=e.querySelector(".e-hor-nav"),r=e.querySelector(".e-scroll-nav");return i>o-(s?s.offsetWidth:r?2*r.offsetWidth:0)},t.prototype.refreshOverflow=function(){this.resize()},t.prototype.renderOverflowMode=function(){var e=this.element,t=e.querySelector("."+f);if(e&&e.children.length>0)switch(this.offsetWid=e.offsetWidth,this.overflowMode){case"Scrollable":this.destroyHScroll(),this.initHScroll(e,e.getElementsByClassName(f));break;case"Popup":this.add(this.element,"e-toolpop"),this.tbarAlign&&this.removePositioning(),this.checkOverflow(e,t)&&(this.createPopupEle(e,[].slice.call(s.selectAll("."+f+" ."+u,e))),this.element.querySelector(".e-hor-nav").setAttribute("tabIndex","0")),this.tbarAlign&&(this.add(t,"e-tbar-pos"),this.itemPositioning())}},t.prototype.createPopupEle=function(e,t){var i=e.querySelector(".e-hor-nav");i||this.createPopupIcon(e),i=e.querySelector(".e-hor-nav");var o=e.offsetWidth-i.offsetWidth;this.element.classList.remove("e-rtl"),this.checkPriority(e,t,o,!0),this.enableRtl&&this.element.classList.add("e-rtl"),this.createPopup()},t.prototype.pushingPoppedEle=function(e,t,i,o){var r=e.element,l=s.selectAll(".e-overflow-show",i),n=0,a=[].slice.call(s.selectAll("."+v,r.querySelector("."+f))),c=0;a.forEach(function(r,a){l=s.selectAll(".e-overflow-show",i),r.classList.contains("e-overflow-show")&&l.length>0?e.tbResize&&l.length>a?(i.insertBefore(r,l[a]),++c):(i.insertBefore(r,i.children[l.length]),++c):r.classList.contains("e-overflow-show")?(i.insertBefore(r,i.firstChild),++c):e.tbResize&&r.classList.contains("e-overflow-hide")&&i.children.length>0&&0===l.length?(i.insertBefore(r,i.firstChild),++c):r.classList.contains("e-overflow-hide")?t.push(r):e.tbResize?(i.insertBefore(r,i.childNodes[n+c]),++n):i.appendChild(r),s.setStyleAttribute(r,{display:"",height:o+"px"})}),t.forEach(function(e){i.appendChild(e)});for(var h=s.selectAll("."+u,r.querySelector("."+f)),p=h.length-1;p>=0;p--){var d=h[p];if(!d.classList.contains("e-separator"))break;s.setStyleAttribute(d,{display:"none"})}},t.prototype.createPopup=function(){var e,t,i=this.element;t=i.querySelector("."+u+":not(.e-separator ):not(."+v+" )"),e="auto"===i.style.height||""===i.style.height?null:t.offsetHeight;var o,r=[];o=i.querySelector("#"+i.id+"_popup.e-toolbar-pop")?i.querySelector("#"+i.id+"_popup.e-toolbar-pop"):s.createElement("div",{id:i.id+"_popup",className:"e-toolbar-pop"}),this.pushingPoppedEle(this,r,o,e),this.popupInit(i,o)},t.prototype.popupInit=function(e,t){if(this.popObj){var o=this.popObj.element;s.setStyleAttribute(o,{maxHeight:"",display:"block"}),s.setStyleAttribute(o,{maxHeight:o.offsetHeight+"px",display:""})}else{e.appendChild(t),s.setStyleAttribute(this.element,{overflow:""});var r=new c.Popup(null,{relateTo:this.element,offsetY:e.offsetHeight,enableRtl:this.enableRtl,open:this.popupOpen.bind(this),close:this.popupClose,position:this.enableRtl?{X:"left",Y:"top"}:{X:"right",Y:"top"}});r.appendTo(t),i.EventHandler.add(document,"scroll",this.docEvent.bind(this)),i.EventHandler.add(document,"click ",this.docEvent.bind(this)),r.element.style.maxHeight=r.element.offsetHeight+"px",r.hide(),this.popObj=r,this.element.setAttribute("aria-haspopup","true")}},t.prototype.popupOpen=function(e){var t=this.popObj,i=this.popObj.element,r=this.popObj.element.parentElement,l=r.querySelector(".e-hor-nav");s.setStyleAttribute(t.element,{height:"auto",maxHeight:""}),t.element.style.maxHeight=t.element.clientHeight+"px";var a=i.offsetTop+i.offsetHeight+h.calculatePosition(r).top;if(!n.isNullOrUndefined(l)){var c=l.firstElementChild;l.classList.add("e-nav-active"),o.classList(c,["e-popup-up-icon"],["e-popup-down-icon"])}if(window.innerHeight+window.scrollY<a){var p=i.offsetHeight-(a-window.innerHeight-window.scrollY+5);t.height=p+"px",s.setStyleAttribute(t.element,{maxHeight:p+"px"})}},t.prototype.popupClose=function(e){var t=this.element.parentElement,i=t.querySelector(".e-hor-nav");if(i){var s=i.firstElementChild;i.classList.remove("e-nav-active"),o.classList(s,["e-popup-down-icon"],["e-popup-up-icon"])}},t.prototype.checkPriority=function(e,t,i,o){for(var r=t.length,l=i,n=0,a=0,c=0,h=r-1;h>=0;h--){var p=parseFloat(window.getComputedStyle(t[h]).marginRight);if(p+=parseFloat(window.getComputedStyle(t[h]).marginLeft),t[h]===this.tbarEle[0]&&(this.tbarEleMrgn=p),t[h].offsetLeft+t[h].offsetWidth+p>i){if(t[h].classList.contains("e-separator")){if(n>0&&a===c){var d=t[h+a+(n-1)];d.classList.contains("e-separator")&&s.setStyleAttribute(d,{display:"none"})}n++,a=0,c=0}else a++;t[h].classList.contains("e-overflow-show")&&o?i-=t[h].offsetWidth+p:t[h].classList.contains("e-separator")?i-=t[h].offsetWidth+p:(t[h].classList.add(v),s.setStyleAttribute(t[h],{display:"none",minWidth:t[h].offsetWidth+"px"}),c++)}}if(o){var f=s.selectAll("."+u+":not(."+v+")",this.element);this.checkPriority(e,f,l,!1)}},t.prototype.createPopupIcon=function(e){var t=e.id.concat("_nav"),i="e-"+e.id.concat("_nav e-hor-nav"),o=s.createElement("div",{id:t,className:i});"msie"!==a.Browser.info.name&&"edge"!==a.Browser.info.name||o.classList.add("e-ie-align");var r=s.createElement("div",{className:"e-popup-down-icon e-icons"});o.appendChild(r),o.setAttribute("tabindex","0"),e.insertBefore(o,e.firstChild)},t.prototype.tbarPriRef=function(e,t,i,r,l,a,c){var h=this.popObj.element,p=s.selectAll("."+v+":not(.e-overflow-show)",h).length;if(0===s.selectAll(".e-toolbar-item:not(.e-separator):not(.e-overflow-show)",e).length){var d=e.children[t-(t-i)-1];if(n.isNullOrUndefined(d)||!d.classList.contains("e-separator")||o.isVisible(d))e.insertBefore(r,e.children[t-(t-i)]);else{d.style.display="inherit";var f=d.offsetWidth+2*parseFloat(window.getComputedStyle(d).marginRight),u=d.previousElementSibling;a+f<c||l?(e.insertBefore(r,e.children[t-(t-i)]),n.isNullOrUndefined(u)||(u.style.display="")):u.classList.contains("e-separator")&&(u.style.display="none"),d.style.display=""}}else e.insertBefore(r,e.children[t-p])},t.prototype.popupRefresh=function(e,t){var i=this.element,s=i.querySelector(".e-hor-nav"),r=i.querySelector("."+f);if(!n.isNullOrUndefined(s)){r.removeAttribute("style"),e.style.display="block";var l=i.offsetWidth-(s.offsetWidth+r.offsetWidth);this.popupEleRefresh(l,e,t),e.style.display="",0===e.children.length&&(o.detach(s),this.popObj.destroy(),o.detach(this.popObj.element),this.popObj=null,i.setAttribute("aria-haspopup","false"),i.classList.remove("e-toolpop"))}},t.prototype.popupEleRefresh=function(e,t,i){for(var o,r,l=this.tbarEle,a=this.element.querySelector("."+f),c=this,h=0,p=[].slice.call(t.children);h<p.length;h++){var d=p[h];if("break"===function(t){t.style.position="absolute";var h=t.offsetWidth,p=t.querySelector(".e-tbar-btn-text");if(t.classList.contains("e-tbtn-align")||t.classList.contains("e-popup-text")){var d=t.children[0];!n.isNullOrUndefined(p)&&t.classList.contains("e-popup-text")?p.style.display="none":!n.isNullOrUndefined(p)&&t.classList.contains("e-toolbar-text")&&(p.style.display="block"),d.style.minWidth="0%",h=t.offsetWidth,d.style.minWidth="",n.isNullOrUndefined(p)||(p.style.display="")}if(t===c.tbarEle[0]&&(h+=c.tbarEleMrgn),t.style.position="",!(h<e||i))return"break";if(t.style.minWidth="",t.classList.contains("e-overflow-hide")||t.classList.remove(v),r=c.tbarEle.indexOf(t),c.tbarAlign){var u=c.items[r].align;r=c.tbarAlgEle[u+"s"].indexOf(t),l=c.tbarAlgEle[u+"s"],a=c.element.querySelector("."+f+" .e-toolbar-"+u)}var y=0;l.slice(0,r).forEach(function(t){(t.classList.contains("e-overflow-show")||t.classList.contains("e-separator"))&&(t.classList.contains("e-separator")&&(t.style.display="",e-=t.offsetWidth),y++)}),t.classList.contains("e-overflow-show")?(c.tbarPriRef(a,r,y,t,i,h,e),e-=t.offsetWidth):0===r?(a.insertBefore(t,a.firstChild),e-=t.offsetWidth):(o=s.selectAll(".e-overflow-show",c.popObj.element).length,a.insertBefore(t,a.children[r-o]),e-=t.offsetWidth),t.style.height=""}(d))break}},t.prototype.removePositioning=function(){var e=this.element.querySelector("."+f);if(!n.isNullOrUndefined(e)&&e.classList.contains("e-tbar-pos")){this.remove(e,"e-tbar-pos");var t=[].slice.call(e.childNodes);t[1].removeAttribute("style"),t[2].removeAttribute("style")}},t.prototype.refreshPositioning=function(){var e=this.element.querySelector("."+f);this.add(e,"e-tbar-pos"),this.itemPositioning()},t.prototype.itemPositioning=function(){var e=this.element.querySelector("."+f);if(!n.isNullOrUndefined(e)&&e.classList.contains("e-tbar-pos")){var t,i=this.element.querySelector(".e-hor-nav");t=this.scrollModule?[].slice.call(e.querySelector(".e-hscroll-content").children):[].slice.call(e.childNodes);var o=t[0].offsetWidth+t[2].offsetWidth,s=this.element.offsetWidth;if(i&&(s-=i.offsetWidth,t[2].style.right=i.offsetWidth+"px"),!(s<=o)){var r=(s-o-t[1].offsetWidth)/2;t[1].removeAttribute("style");var l=t[0].offsetWidth+r+"px";this.enableRtl?t[1].style.marginRight=l:t[1].style.marginLeft=l}}},t.prototype.tbarItemAlign=function(e,t,i){var o=this,r=[];if(r.push(s.createElement("div",{className:"e-toolbar-left"})),r.push(s.createElement("div",{className:"e-toolbar-center"})),r.push(s.createElement("div",{className:"e-toolbar-right"})),0===i&&"left"!==e.align)r.forEach(function(e){t.appendChild(e)}),this.tbarAlign=!0,this.add(t,"e-tbar-pos");else if("left"!==e.align){var l=t.childNodes,n=r[0];[].slice.call(l).forEach(function(e){o.tbarAlgEle.lefts.push(e),n.appendChild(e)}),t.appendChild(n),t.appendChild(r[1]),t.appendChild(r[2]),this.tbarAlign=!0,this.add(t,"e-tbar-pos")}},t.prototype.ctrlTemplate=function(){var e=this;this.add(this.trgtEle,f),this.tbarEle=[],[].slice.call(this.trgtEle.children).forEach(function(t){"DIV"===t.tagName&&(e.tbarEle.push(t),t.setAttribute("aria-disabled","false"),e.add(t,u))})},t.prototype.renderItems=function(){var e,t,i,o=this.element,r=this.items;if(o&&o.children.length>0&&(e=o.querySelector("."+f)),null!=this.trgtEle)this.ctrlTemplate();else if(o&&r.length>0){e||(e=s.createElement("div",{className:f}));for(var l=0;l<r.length;l++)t=this.renderSubComponent(r[l]),-1===this.tbarEle.indexOf(t)&&this.tbarEle.push(t),this.tbarAlign||this.tbarItemAlign(r[l],e,l),i=e.querySelector(".e-toolbar-"+r[l].align.toLowerCase()),i?(this.tbarAlgEle[r[l].align+"s"].push(t),i.appendChild(t)):e.appendChild(t);o.appendChild(e)}},t.prototype.setAttr=function(e,t){for(var i,o=Object.keys(e),s=0;s<o.length;s++)i=o[s],"class"===i?this.add(t,e[i]):t.setAttribute(i,e[i])},t.prototype.enableItems=function(e,t){var i=e,s=i.length;n.isNullOrUndefined(t)&&(t=!0);var r=function(e,t){e?(t.classList.remove("e-overlay"),t.setAttribute("aria-disabled","false")):(t.classList.add("e-overlay"),t.setAttribute("aria-disabled","true"))};if(s&&s>1){for(var l=0,a=[].slice.call(i);l<a.length;l++){var c=a[l];r(t,c)}t?o.removeClass(i,"e-overlay"):o.addClass(i,"e-overlay")}else{var c=void 0;c=s&&1===s?i[0]:e,r(t,c)}},t.prototype.addItems=function(e,t){var i,r,l=this.element.querySelector("."+f),a="left";n.isNullOrUndefined(t)&&(t=0),e.forEach(function(e){n.isNullOrUndefined(e.align)||"left"===e.align||"left"!==a||(a=e.align)});for(var c=0,h=e;c<h.length;c++){var p=h[c];if(n.isNullOrUndefined(p.type)&&(p.type="Button"),i=s.selectAll("."+u,this.element),p.align=a,r=this.renderSubComponent(p),this.tbarEle.length>=t&&i.length>0){if(this.destroyMode(),this.tbarAlign){var d="l"===p.align[0]?0:"c"===p.align[0]?1:2,v=void 0;v=this.scrollModule?o.closest(i[0],"."+f+" .e-hscroll-content").children[d]:o.closest(i[0],"."+f).children[d],v.insertBefore(r,v.children[t]),this.tbarAlgEle[p.align+"s"].splice(t,0,r),this.refreshPositioning()}else i[0].parentNode.insertBefore(r,i[t]);this.items.splice(t,0,p),this.tbarEle.splice(t,0,r),t++,this.offsetWid=l.offsetWidth}}l.style.width="",this.renderOverflowMode()},t.prototype.removeItems=function(e){var t,i=e,o=[].slice.call(s.selectAll("."+u,this.element));if("number"==typeof i)t=parseInt(e.toString(),10),this.removeItemByIndex(t,o);else if(i&&i.length>1)for(var r=0,l=[].slice.call(i);r<l.length;r++){var n=l[r];t=this.tbarEle.indexOf(n),this.removeItemByIndex(t,o),o=s.selectAll("."+u,this.element)}else{var n=i&&i.length&&1===i.length?i[0]:e;t=o.indexOf(n),this.removeItemByIndex(t,o)}this.resize()},t.prototype.removeItemByIndex=function(e,t){if(this.tbarEle[e]&&t[e]){var i=this.tbarEle.indexOf(t[e]);if(this.tbarAlign){var s=this.tbarAlgEle[this.items[i].align+"s"].indexOf(this.tbarEle[i]);this.tbarAlgEle[this.items[i].align+"s"].splice(s,1)}o.detach(t[e]),this.items.splice(i,1),this.tbarEle.splice(i,1)}},t.prototype.templateRender=function(e,t,i){var o=i.type;if("string"==typeof e){t.innerHTML=e;var r=t.childNodes[0];if(!r.tagName&&0===t.childElementCount){var l=document.querySelector(e);t.innerHTML="",t.appendChild(l)}}else if("Input"===o){var a=e,r=s.createElement("input");i.id?r.id=i.id:r.id=n.getUniqueID("tbr-ipt"),t.appendChild(r),a.appendTo(r)}this.add(t,"e-template"),this.tbarEle.push(t)},t.prototype.buttonRendering=function(e,t){var i,o,r=s.createElement("button",{className:"e-tbar-btn"}),l=e.text;e.id?r.id=e.id:r.id=n.getUniqueID("e-tbr-btn");var a=s.createElement("div",{className:"e-tbar-btn-text"});return l?(a.innerHTML=l,r.appendChild(a),r.classList.add("e-tbtn-txt")):this.add(t,"e-tbtn-align"),(e.prefixIcon||e.suffixIcon)&&(e.prefixIcon&&e.suffixIcon||e.prefixIcon?(i=e.prefixIcon+" e-icons",o="left"):(i=e.suffixIcon+" e-icons",o="right")),new p.Button({iconCss:i,iconPosition:o},r),e.width&&s.setStyleAttribute(r,{width:n.formatUnit(e.width)}),r},t.prototype.renderSubComponent=function(e){var t,i;if(t=s.createElement("div",{className:u}),t.setAttribute("aria-disabled","false"),this.tbarEle||(this.tbarEle=[]),e.htmlAttributes&&this.setAttr(e.htmlAttributes,t),e.tooltipText&&t.setAttribute("title",e.tooltipText),e.cssClass&&(t.className=t.className+" "+e.cssClass),e.template)this.templateRender(e.template,t,e);else switch(e.type){case"Button":i=this.buttonRendering(e,t),i.setAttribute("tabindex","-1"),t.appendChild(i),t.addEventListener("click",this.itemClick.bind(this));break;case"Separator":this.add(t,"e-separator")}if(e.showTextOn){var o=e.showTextOn;"Toolbar"===o?(this.add(t,"e-toolbar-text"),this.add(t,"e-tbtn-align")):"Overflow"===o&&this.add(t,"e-popup-text")}if(e.overflow){var r=e.overflow;"Show"===r?this.add(t,"e-overflow-show"):"Hide"===r&&(t.classList.contains("e-separator")||this.add(t,"e-overflow-hide"))}return t},t.prototype.itemClick=function(e){this.activeEleSwitch(e.currentTarget)},t.prototype.activeEleSwitch=function(e){this.activeEleRemove(e.firstElementChild),this.activeEle.focus()},t.prototype.activeEleRemove=function(e){n.isNullOrUndefined(this.activeEle)||this.activeEle.setAttribute("tabindex","-1"),this.activeEle=e,n.isNullOrUndefined(this.trgtEle)&&!e.parentElement.classList.contains("e-template")?e.removeAttribute("tabindex"):this.activeEle.setAttribute("tabindex","0")},t.prototype.getPersistData=function(){return this.addOnPersist([])},t.prototype.getModuleName=function(){return"toolbar"},t.prototype.resize=function(){var e=this.element;this.tbResize=!0,this.tbarAlign&&this.itemPositioning(),this.popObj&&this.popObj.hide();var t=this.checkOverflow(e,e.getElementsByClassName(f)[0]);!t&&this.scrollModule&&this.destroyHScroll(),t&&this.scrollModule&&this.offsetWid===e.offsetWidth||((this.offsetWid>e.offsetWidth||t)&&this.renderOverflowMode(),this.popObj&&(this.tbarAlign&&this.removePositioning(),this.popupRefresh(this.popObj.element,!1),this.tbarAlign&&this.refreshPositioning()),this.offsetWid=e.offsetWidth,this.tbResize=!1)},t.prototype.onPropertyChanged=function(e,t){for(var i=this.element,o=0,r=Object.keys(e);o<r.length;o++){switch(r[o]){case"items":this.destroyMode(),this.destroyItems(),this.renderItems(),this.renderOverflowMode();break;case"width":var l=i.offsetWidth;s.setStyleAttribute(i,{width:n.formatUnit(e.width)}),this.renderOverflowMode(),this.popObj&&l<i.offsetWidth&&this.popupRefresh(this.popObj.element,!1);break;case"height":s.setStyleAttribute(this.element,{height:n.formatUnit(e.height)});break;case"overflowMode":this.destroyMode(),this.renderOverflowMode(),this.enableRtl&&this.add(i,"e-rtl");break;case"enableRtl":e.enableRtl?this.add(i,"e-rtl"):this.remove(i,"e-rtl"),n.isNullOrUndefined(this.scrollModule)||(e.enableRtl?this.add(this.scrollModule.element,"e-rtl"):this.remove(this.scrollModule.element,"e-rtl")),n.isNullOrUndefined(this.popObj)||(e.enableRtl?this.add(this.popObj.element,"e-rtl"):this.remove(this.popObj.element,"e-rtl"))}}},t}(i.Component);l([n.Collection([],y)],m.prototype,"items",void 0),l([i.Property("auto")],m.prototype,"width",void 0),l([i.Property("auto")],m.prototype,"height",void 0),l([i.Property("Scrollable")],m.prototype,"overflowMode",void 0),l([i.Property(!1)],m.prototype,"enableRtl",void 0),l([i.Event()],m.prototype,"clicked",void 0),l([i.Event()],m.prototype,"created",void 0),l([i.Event()],m.prototype,"destroyed",void 0),l([i.Event()],m.prototype,"beforeCreate",void 0),m=l([a.NotifyPropertyChanges],m),t.Toolbar=m,t.toolbarBuilder=a.CreateBuilder(m)}.apply(t,o))&&(e.exports=s)},function(e,i){e.exports=t},function(e,t){e.exports=i}])});

dist/es6/common/h-scroll.js

@@ -17,8 +17,7 @@ var __extends = (this && this.__extends) || (function () {
 };
-import { Touch, Component, EventHandler } from '@syncfusion/ej2-base';
-import { NotifyPropertyChanges, Property, Browser } from '@syncfusion/ej2-base';
-import { createElement as buildTag, detach, classList } from '@syncfusion/ej2-base/dom';
-import { getUniqueID } from '@syncfusion/ej2-base/util';
+import { Touch, Component, EventHandler, selectAll, getUniqueID } from '@syncfusion/ej2-base';
+import { NotifyPropertyChanges, Property, Browser, detach, createElement as buildTag } from '@syncfusion/ej2-base';
 var CLS_ROOT = 'e-hscroll';
 var CLS_RTL = 'e-rtl';
+var CLS_DISABLE = 'e-overlay';
 var CLS_HSCROLLBAR = 'e-hscroll-bar';
@@ -29,3 +28,6 @@ var CLS_HSCROLLCON = 'e-hscroll-content';
 var CLS_NAVLEFTARROW = 'e-nav-left-arrow';
-var CLS_HSCROLLNAV = 'e-hor-nav';
+var CLS_HSCROLLNAV = 'e-scroll-nav';
+var CLS_HSCROLLNAVRIGHT = 'e-scroll-right-nav';
+var CLS_HSCROLLNAVLEFT = 'e-scroll-left-nav';
+var CLS_DEVICE = 'e-scroll-device';
 var HScroll = (function (_super) {
@@ -39,2 +41,3 @@ __extends(HScroll, _super);
         this.browserCheck = this.browser === 'mozilla';
+        this.isDevice = Browser.isDevice;
         var element = this.element;
@@ -53,3 +56,13 @@ this.ieCheck = this.browser === 'edge' || this.browser === 'msie';
     HScroll.prototype.render = function () {
-        this.createNavIcon(this.element, CLS_NAVRIGHTARROW + ' ' + CLS_NAVARROW);
+        this.touchModule = new Touch(this.element, { scroll: this.touchHandler.bind(this) });
+        this.element.addEventListener('contextmenu', function (e) {
+            e.preventDefault();
+        });
+        if (!this.isDevice) {
+            this.createNavIcon(this.element);
+            EventHandler.add(this.scrollEle, 'scroll', this.scrollHandler, this);
+        }
+        else {
+            this.element.classList.add(CLS_DEVICE);
+        }
     };
@@ -59,2 +72,3 @@ HScroll.prototype.initialize = function () {
         var scrollDiv = buildTag('div', { className: CLS_HSCROLLBAR });
+        scrollDiv.setAttribute('tabindex', '-1');
         var ele = this.element;
@@ -83,4 +97,3 @@ var innerEle = [].slice.call(ele.children);
         ele.classList.remove(CLS_ROOT);
-        var nav = ele.querySelector('#' + ele.id + '_nav.e-' + ele.id + '_nav');
-        EventHandler.remove(nav, 'click', this.clickEventHandler);
+        var nav = selectAll('#' + ele.id + '_nav.e-' + ele.id + '_nav');
         for (var _i = 0, _a = [].slice.call(this.scrollItems.children); _i < _a.length; _i++) {
@@ -94,3 +107,6 @@ var elem = _a[_i];
         detach(this.scrollEle);
-        nav.parentElement.removeChild(nav);
+        if (nav.length > 0) {
+            detach(nav[0]);
+            detach(nav[1]);
+        }
         EventHandler.remove(this.scrollEle, 'scroll', this.scrollHandler);
@@ -101,24 +117,62 @@ this.touchModule.destroy();
     };
-    HScroll.prototype.createNavIcon = function (element, classList) {
+    HScroll.prototype.createNavIcon = function (element) {
         var id = element.id.concat('_nav');
-        var className = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV);
-        var nav = buildTag('div', { id: id, className: className });
-        var navItem = buildTag('div', { className: classList + ' e-icons' });
+        var clsRight = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVRIGHT);
+        var nav = buildTag('div', { id: id, className: clsRight });
+        nav.setAttribute('aria-disabled', 'false');
+        var navItem = buildTag('div', { className: CLS_NAVRIGHTARROW + ' ' + CLS_NAVARROW + ' e-icons' });
+        var clsLeft = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVLEFT);
+        var navEle = buildTag('div', { id: id, className: clsLeft + ' ' + CLS_DISABLE });
+        navEle.setAttribute('aria-disabled', 'true');
+        var navLeftItem = buildTag('div', { className: CLS_NAVLEFTARROW + ' ' + CLS_NAVARROW + ' e-icons' });
+        navEle.appendChild(navLeftItem);
         nav.appendChild(navItem);
         nav.setAttribute('tabindex', '0');
-        element.insertBefore(nav, element.firstChild);
-        EventHandler.add(this.scrollEle, 'scroll', this.scrollHandler, this);
-        new Touch(nav, { tapHold: this.tabHoldHandler.bind(this) });
+        element.appendChild(nav);
+        element.insertBefore(navEle, element.firstChild);
         if (this.ieCheck) {
             nav.classList.add('e-ie-align');
+            navEle.classList.add('e-ie-align');
         }
-        nav.addEventListener('mouseup', this.repeatScroll.bind(this));
-        nav.addEventListener('touchend', this.repeatScroll.bind(this));
-        nav.addEventListener('contextmenu', function (e) {
-            e.preventDefault();
+        this.eventBinding([nav, navEle]);
+    };
+    HScroll.prototype.onKeyPress = function (e) {
+        var _this = this;
+        if (e.key === 'Enter') {
+            var timeoutFun_1 = function () {
+                _this.keyTimeout = true;
+                _this.eleScrolling(10, e.target);
+            };
+            this.keyTimer = window.setTimeout(function () {
+                timeoutFun_1();
+            }, 100);
+        }
+    };
+    HScroll.prototype.onKeyUp = function (e) {
+        if (e.key !== 'Enter') {
+            return;
+        }
+        if (this.keyTimeout) {
+            this.keyTimeout = false;
+        }
+        else {
+            e.target.click();
+        }
+        clearTimeout(this.keyTimer);
+    };
+    HScroll.prototype.eventBinding = function (ele) {
+        var _this = this;
+        ele.forEach(function (el) {
+            new Touch(el, { tapHold: _this.tabHoldHandler.bind(_this), tapHoldThreshold: 500 });
+            el.addEventListener('keydown', _this.onKeyPress.bind(_this));
+            el.addEventListener('keyup', _this.onKeyUp.bind(_this));
+            el.addEventListener('mouseup', _this.repeatScroll.bind(_this));
+            el.addEventListener('touchend', _this.repeatScroll.bind(_this));
+            el.addEventListener('contextmenu', function (e) {
+                e.preventDefault();
+            });
+            EventHandler.add(el, 'click', _this.clickEventHandler, _this);
         });
-        EventHandler.add(nav, 'click', this.clickEventHandler, this);
-        this.touchModule = new Touch(element, { scroll: this.touchHandler.bind(this) });
     };
-    HScroll.prototype.repeatScroll = function (e) {
+    HScroll.prototype.repeatScroll = function () {
         clearInterval(this.timeout);
@@ -130,7 +184,7 @@ };
         trgt = this.contains(trgt, CLS_HSCROLLNAV) ? trgt.firstElementChild : trgt;
+        var scrollDis = 10;
         var timeoutFun = function () {
-            var scrollDis = 10;
             _this.eleScrolling(scrollDis, trgt);
         };
-        this.timeout = setInterval(function () {
+        this.timeout = window.setInterval(function () {
             timeoutFun();
@@ -147,3 +201,3 @@ }, 50);
         if (classList.contains(CLS_HSCROLLNAV)) {
-            classList = this.element.querySelector('.' + CLS_NAVARROW).classList;
+            classList = trgt.querySelector('.' + CLS_NAVARROW).classList;
         }
@@ -188,2 +242,12 @@ if (this.contains(rootEle, CLS_RTL) && this.browserCheck) {
     };
+    HScroll.prototype.arrowDisabling = function (addDisable, removeDisable) {
+        addDisable.classList.add(CLS_DISABLE);
+        addDisable.setAttribute('aria-disabled', 'true');
+        addDisable.removeAttribute('tabindex');
+        clearInterval(this.timeout);
+        removeDisable.classList.remove(CLS_DISABLE);
+        removeDisable.setAttribute('aria-disabled', 'false');
+        removeDisable.setAttribute('tabindex', '0');
+        this.repeatScroll();
+    };
     HScroll.prototype.scrollHandler = function (e) {
@@ -193,25 +257,32 @@ var target = e.target;
         var rootEle = this.element;
-        var navEle = this.element.firstChild.firstChild;
-        if (navEle) {
-            var scrollLeft = target.scrollLeft;
-            if (scrollLeft <= 0) {
-                scrollLeft = -scrollLeft;
+        var navLeftEle = this.element.querySelector('.' + CLS_HSCROLLNAVLEFT);
+        var navRightEle = this.element.querySelector('.' + CLS_HSCROLLNAVRIGHT);
+        var scrollLeft = target.scrollLeft;
+        if (scrollLeft <= 0) {
+            scrollLeft = -scrollLeft;
+        }
+        if (scrollLeft === 0) {
+            if ((!this.contains(rootEle, CLS_RTL) || this.browserCheck) || this.ieCheck) {
+                this.arrowDisabling(navLeftEle, navRightEle);
             }
-            if (scrollLeft === 0) {
-                if ((!this.contains(rootEle, CLS_RTL) || this.browserCheck) || this.ieCheck) {
-                    classList(navEle, [CLS_NAVRIGHTARROW], [CLS_NAVLEFTARROW]);
-                }
-                else {
-                    classList(navEle, [CLS_NAVLEFTARROW], [CLS_NAVRIGHTARROW]);
-                }
+            else {
+                this.arrowDisabling(navRightEle, navLeftEle);
             }
-            else if (Math.ceil(width + scrollLeft) >= target.scrollWidth) {
-                if ((!this.contains(rootEle, CLS_RTL) || this.browserCheck) || this.ieCheck) {
-                    classList(navEle, [CLS_NAVLEFTARROW], [CLS_NAVRIGHTARROW]);
-                }
-                else {
-                    classList(navEle, [CLS_NAVRIGHTARROW], [CLS_NAVLEFTARROW]);
-                }
+        }
+        else if (Math.ceil(width + scrollLeft + .1) >= target.scrollWidth) {
+            if ((!this.contains(rootEle, CLS_RTL) || this.browserCheck) || this.ieCheck) {
+                this.arrowDisabling(navRightEle, navLeftEle);
             }
+            else {
+                this.arrowDisabling(navLeftEle, navRightEle);
+            }
         }
+        else {
+            var disEle = this.element.querySelector('.' + CLS_DISABLE);
+            if (disEle) {
+                disEle.classList.remove(CLS_DISABLE);
+                disEle.setAttribute('aria-disabled', 'false');
+                disEle.setAttribute('tabindex', '0');
+            }
+        }
     };
@@ -218,0 +289,0 @@ HScroll.prototype.onPropertyChanged = function (newProp, oldProp) {

dist/es6/toolbar/toolbar.js

@@ -18,9 +18,8 @@ var __extends = (this && this.__extends) || (function () {
 import { Component, EventHandler, Property, Event } from '@syncfusion/ej2-base';
-import { addClass, removeClass, isVisible, closest, attributes, detach, classList } from '@syncfusion/ej2-base/dom';
-import { createElement as buildTag, selectAll, setStyleAttribute as setStyle } from '@syncfusion/ej2-base/dom';
-import { isNullOrUndefined as isNOU, getUniqueID, formatUnit } from '@syncfusion/ej2-base/util';
-import { NotifyPropertyChanges, CreateBuilder, ChildProperty } from '@syncfusion/ej2-base';
-import { KeyboardEvents, Collection, Browser } from '@syncfusion/ej2-base';
+import { addClass, removeClass, isVisible, closest, attributes, detach, classList, KeyboardEvents } from '@syncfusion/ej2-base';
+import { createElement as buildTag, selectAll, setStyleAttribute as setStyle } from '@syncfusion/ej2-base';
+import { isNullOrUndefined as isNOU, getUniqueID, formatUnit, Collection } from '@syncfusion/ej2-base';
+import { NotifyPropertyChanges, CreateBuilder, ChildProperty, Browser } from '@syncfusion/ej2-base';
 import { Popup } from '@syncfusion/ej2-popups';
-import { calculatePosition } from '@syncfusion/ej2-popups/src/common/position';
+import { calculatePosition } from '@syncfusion/ej2-popups';
 import { Button } from '@syncfusion/ej2-buttons';
@@ -42,2 +41,3 @@ import { HScroll } from '../common/h-scroll';
 var CLS_TBARNAV = 'e-hor-nav';
+var CLS_TBARSCRLNAV = 'e-scroll-nav';
 var CLS_TBARRIGHT = 'e-toolbar-right';
@@ -111,3 +111,5 @@ var CLS_TBARLEFT = 'e-toolbar-left';
             popupClose: 'escape',
-            tab: 'tab'
+            tab: 'tab',
+            home: 'home',
+            end: 'end',
         };
@@ -127,2 +129,4 @@ return _this;
         this.trigger('beforeCreate');
+        this.scrollModule = null;
+        this.popObj = null;
         if (this.enableRtl) {
@@ -134,3 +138,3 @@ this.add(this.element, CLS_RTL);
         EventHandler.add(this.element, 'click', this.clickHandler, this);
-        window.onresize = this.resize.bind(this);
+        window.addEventListener('resize', this.resize.bind(this));
         this.keyModule = new KeyboardEvents(this.element, {
@@ -166,2 +170,18 @@ keyAction: this.keyActionHandler.bind(this),
     };
+    Toolbar.prototype.destroyItems = function () {
+        [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM)).forEach(function (el) {
+            detach(el);
+        });
+        this.tbarEle = [];
+        this.tbarAlgEle = { lefts: [], centers: [], rights: [] };
+    };
+    Toolbar.prototype.destroyMode = function () {
+        if (this.scrollModule) {
+            this.remove(this.scrollModule.element, CLS_RTL);
+            this.destroyHScroll();
+        }
+        if (this.popObj) {
+            this.popupRefresh(this.popObj.element, true);
+        }
+    };
     Toolbar.prototype.add = function (ele, val) {
@@ -173,15 +193,19 @@ ele.classList.add(val);
     };
-    Toolbar.prototype.keyActionHandler = function (e) {
-        e.preventDefault();
+    Toolbar.prototype.elementFocus = function (ele) {
+        var fChild = ele.firstElementChild;
+        if (fChild) {
+            fChild.focus();
+            this.activeEleSwitch(ele);
+        }
+        else {
+            ele.focus();
+        }
+    };
+    Toolbar.prototype.clstElement = function (tbrNavChk, trgt) {
         var clst;
-        var trgt = e.target;
-        var rootEle = this.element;
-        var popObj = this.popObj;
-        var popAnimate = { name: 'SlideUp', duration: 100 };
-        var tbrNavChk = trgt.classList.contains(CLS_TBARNAV);
-        if (tbrNavChk && popObj && isVisible(popObj.element)) {
-            clst = popObj.element.querySelector('.' + CLS_ITEM);
+        if (tbrNavChk && this.popObj && isVisible(this.popObj.element)) {
+            clst = this.popObj.element.querySelector('.' + CLS_ITEM);
         }
-        else if (rootEle === trgt || tbrNavChk) {
-            clst = rootEle.querySelector('.' + CLS_ITEM);
+        else if (this.element === trgt || tbrNavChk) {
+            clst = this.element.querySelector('.' + CLS_ITEM);
         }
@@ -191,48 +215,85 @@ else {
         }
-        if (clst) {
-            switch (e.action) {
-                case 'moveRight':
-                    if (rootEle === trgt || tbrNavChk) {
-                        clst.firstChild.focus();
+        return clst;
+    };
+    Toolbar.prototype.keyHandling = function (clst, e, trgt, navChk, scrollChk) {
+        var popObj = this.popObj;
+        var rootEle = this.element;
+        var popAnimate = { name: 'SlideUp', duration: 100 };
+        switch (e.action) {
+            case 'moveRight':
+                if (rootEle === trgt || navChk) {
+                    this.elementFocus(clst);
+                }
+                else {
+                    this.eleFocus(clst, 'next');
+                }
+                break;
+            case 'moveLeft':
+                if (popObj && navChk) {
+                    if (this.tbarAlign) {
+                        clst = closest(clst, '.' + CLS_ITEMS);
+                        var items = selectAll('.' + CLS_ITEM, clst);
+                        clst = items[items.length - 1];
                     }
                     else {
-                        this.eleFocus(clst, 'next');
+                        clst = clst.parentElement.lastElementChild;
                     }
-                    break;
-                case 'moveLeft':
-                    if (popObj && tbrNavChk) {
-                        if (this.tbarAlign) {
-                            clst = closest(clst, '.' + CLS_ITEMS);
-                            var items = selectAll('.' + CLS_ITEM, clst);
-                            clst = items[items.length - 1];
+                }
+                if (navChk && !clst.classList.contains(CLS_SEPARATOR) && !clst.classList.contains(CLS_DISABLE)) {
+                    this.elementFocus(clst);
+                }
+                else {
+                    this.eleFocus(clst, 'previous');
+                }
+                break;
+            case 'home':
+            case 'end':
+                var ele = void 0;
+                var nodes = void 0;
+                if (clst) {
+                    var popupCheck = closest(clst, '.e-popup');
+                    if (popupCheck) {
+                        if (isVisible(this.popObj.element)) {
+                            nodes = popupCheck.children;
+                            if (e.action === 'home') {
+                                ele = nodes[0];
+                            }
+                            else {
+                                ele = nodes[nodes.length - 1];
+                            }
                         }
-                        else {
-                            clst = clst.parentElement.lastElementChild;
-                        }
                     }
-                    if (tbrNavChk && !clst.classList.contains(CLS_SEPARATOR) && !clst.classList.contains(CLS_DISABLE)) {
-                        clst.firstChild.focus();
-                    }
                     else {
-                        this.eleFocus(clst, 'previous');
-                    }
-                    break;
-                case 'moveUp':
-                case 'moveDown':
-                    var value = e.action === 'moveUp' ? 'previous' : 'next';
-                    if (popObj && closest(trgt, '.e-popup')) {
-                        if (e.action === 'moveUp' && popObj.element.firstElementChild === clst) {
-                            rootEle.querySelector('.' + CLS_TBARNAV).focus();
+                        nodes = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM);
+                        if (e.action === 'home') {
+                            ele = nodes[0];
                         }
                         else {
-                            this.eleFocus(clst, value);
+                            ele = nodes[nodes.length - 1];
                         }
                     }
-                    else if (e.action === 'moveDown') {
-                        clst.firstChild.focus();
+                    if (ele) {
+                        this.elementFocus(ele);
                     }
-                    break;
-                case 'tab':
-                    var ele = clst.firstChild;
-                    if (rootEle === trgt || tbrNavChk) {
+                }
+                break;
+            case 'moveUp':
+            case 'moveDown':
+                var value = e.action === 'moveUp' ? 'previous' : 'next';
+                if (popObj && closest(trgt, '.e-popup')) {
+                    if (e.action === 'moveUp' && popObj.element.firstElementChild === clst) {
+                        rootEle.querySelector('.' + CLS_TBARNAV).focus();
+                    }
+                    else {
+                        this.eleFocus(clst, value);
+                    }
+                }
+                else if (e.action === 'moveDown') {
+                    this.elementFocus(clst);
+                }
+                break;
+            case 'tab':
+                if (!scrollChk) {
+                    var ele_1 = clst.firstElementChild;
+                    if (rootEle === trgt || navChk) {
                         if (this.activeEle) {
@@ -242,27 +303,39 @@ this.activeEle.focus();
                         else {
-                            this.activeEleRemove(ele);
-                            ele.focus();
+                            this.activeEleRemove(ele_1);
+                            ele_1.focus();
                         }
+                        this.element.removeAttribute('tabindex');
                     }
-                    break;
-                case 'popupClose':
-                    if (popObj) {
-                        popObj.hide(popAnimate);
-                    }
-                    break;
-                case 'popupOpen':
-                    if (!tbrNavChk) {
-                        return;
-                    }
-                    if (popObj && !isVisible(popObj.element)) {
-                        popObj.element.style.top = rootEle.offsetHeight + 'px';
-                        popObj.show({ name: 'SlideDown', duration: 100 });
-                    }
-                    else {
-                        popObj.hide(popAnimate);
-                    }
-                    break;
-            }
+                }
+                break;
+            case 'popupClose':
+                if (popObj) {
+                    popObj.hide(popAnimate);
+                }
+                break;
+            case 'popupOpen':
+                if (!navChk) {
+                    return;
+                }
+                if (popObj && !isVisible(popObj.element)) {
+                    popObj.element.style.top = rootEle.offsetHeight + 'px';
+                    popObj.show({ name: 'SlideDown', duration: 100 });
+                }
+                else {
+                    popObj.hide(popAnimate);
+                }
+                break;
         }
     };
+    Toolbar.prototype.keyActionHandler = function (e) {
+        e.preventDefault();
+        var clst;
+        var trgt = e.target;
+        var tbrNavChk = trgt.classList.contains(CLS_TBARNAV);
+        var tbarScrollChk = trgt.classList.contains(CLS_TBARSCRLNAV);
+        clst = this.clstElement(tbrNavChk, trgt);
+        if (clst || tbarScrollChk) {
+            this.keyHandling(clst, e, trgt, tbrNavChk, tbarScrollChk);
+        }
+    };
     Toolbar.prototype.eleFocus = function (closest, pos) {
@@ -289,5 +362,3 @@ var sib = Object(closest)[pos + 'ElementSibling'];
             }
-            if (!isNOU(sib.firstChild)) {
-                sib.firstChild.focus();
-            }
+            this.elementFocus(sib);
         }
@@ -303,3 +374,4 @@ else if (this.tbarAlign) {
                     else {
-                        el.firstChild.focus();
+                        el.firstElementChild.focus();
+                        this.activeEleSwitch(el);
                     }
@@ -313,3 +385,3 @@ }
                     else {
-                        el.firstChild.focus();
+                        this.elementFocus(el);
                     }
@@ -429,3 +501,4 @@ }
         var popNav = element.querySelector('.' + CLS_TBARNAV);
-        if (itemWidth > eleWidth - (popNav ? popNav.offsetWidth : 0)) {
+        var scrollNav = element.querySelector('.' + CLS_TBARSCRLNAV);
+        if (itemWidth > eleWidth - (popNav ? popNav.offsetWidth : (scrollNav ? scrollNav.offsetWidth * 2 : 0))) {
             return true;
@@ -437,2 +510,5 @@ }
     };
+    Toolbar.prototype.refreshOverflow = function () {
+        this.resize();
+    };
     Toolbar.prototype.renderOverflowMode = function () {
@@ -634,3 +710,3 @@ var ele = this.element;
                     inEle[i].classList.add(CLS_POPUP);
-                    setStyle(inEle[i], { display: 'none' });
+                    setStyle(inEle[i], { display: 'none', minWidth: inEle[i].offsetWidth + 'px' });
                     itemPopCount++;
@@ -742,2 +818,3 @@ }
             if (elWidth < width || destroy) {
+                el.style.minWidth = '';
                 if (!el.classList.contains(CLS_POPOVERFLOW)) {
@@ -828,3 +905,5 @@ el.classList.remove(CLS_POPUP);
         var value = (((tbarWid - margin)) - innerItem[1].offsetWidth) / 2;
-        innerItem[1].style.marginLeft = (innerItem[0].offsetWidth + value) + 'px';
+        innerItem[1].removeAttribute('style');
+        var mrgn = (innerItem[0].offsetWidth + value) + 'px';
+        this.enableRtl ? innerItem[1].style.marginRight = mrgn : innerItem[1].style.marginLeft = mrgn;
     };
@@ -866,2 +945,3 @@ Toolbar.prototype.tbarItemAlign = function (item, itemEle, pos) {
                 _this.tbarEle.push(ele);
+                ele.setAttribute('aria-disabled', 'false');
                 _this.add(ele, CLS_ITEM);
@@ -878,4 +958,3 @@ }
         if (ele && ele.children.length > 0) {
-            var navEle = selectAll('.' + CLS_TBARNAV, ele);
-            itemEleDom = navEle.length > 0 ? ele.children[1] : ele.children[0];
+            itemEleDom = ele.querySelector('.' + CLS_ITEMS);
         }
@@ -923,3 +1002,17 @@ if (this.trgtEle != null) {
         }
+        var enable = function (isEnable, ele) {
+            if (isEnable) {
+                ele.classList.remove(CLS_DISABLE);
+                ele.setAttribute('aria-disabled', 'false');
+            }
+            else {
+                ele.classList.add(CLS_DISABLE);
+                ele.setAttribute('aria-disabled', 'true');
+            }
+        };
         if (len && len > 1) {
+            for (var _i = 0, _a = [].slice.call(elements); _i < _a.length; _i++) {
+                var ele = _a[_i];
+                enable(isEnable, ele);
+            }
             isEnable ? removeClass(elements, CLS_DISABLE) : addClass(elements, CLS_DISABLE);
@@ -930,3 +1023,3 @@ }
             ele = (len && len === 1) ? elements[0] : items;
-            isEnable ? this.remove(ele, CLS_DISABLE) : this.add(ele, CLS_DISABLE);
+            enable(isEnable, ele);
         }
@@ -949,6 +1042,10 @@ };
             var item = items_1[_i];
+            if (isNOU(item.type)) {
+                item.type = 'Button';
+            }
             innerItems = selectAll('.' + CLS_ITEM, this.element);
             item.align = itemAgn;
             innerEle = this.renderSubComponent(item);
-            if (this.tbarEle.length > index && innerItems.length > 0) {
+            if (this.tbarEle.length >= index && innerItems.length > 0) {
+                this.destroyMode();
                 if (this.tbarAlign) {
@@ -1021,3 +1118,3 @@ var algIndex = item.align[0] === 'l' ? 0 : item.align[0] === 'c' ? 1 : 2;
             var ele = innerEle.childNodes[0];
-            if (!ele.tagName) {
+            if (!ele.tagName && innerEle.childElementCount === 0) {
                 var templateEle = document.querySelector(templateProp);
@@ -1073,2 +1170,3 @@ innerEle.innerHTML = '';
         innerEle = buildTag('div', { className: CLS_ITEM });
+        innerEle.setAttribute('aria-disabled', 'false');
         if (!this.tbarEle) {
@@ -1126,3 +1224,6 @@ this.tbarEle = [];
     Toolbar.prototype.itemClick = function (e) {
-        this.activeEleRemove(e.currentTarget.firstChild);
+        this.activeEleSwitch(e.currentTarget);
+    };
+    Toolbar.prototype.activeEleSwitch = function (ele) {
+        this.activeEleRemove(ele.firstElementChild);
         this.activeEle.focus();
@@ -1135,3 +1236,8 @@ };
         this.activeEle = curEle;
-        curEle.removeAttribute('tabindex');
+        if (isNOU(this.trgtEle) && !curEle.parentElement.classList.contains(CLS_TEMPLATE)) {
+            curEle.removeAttribute('tabindex');
+        }
+        else {
+            this.activeEle.setAttribute('tabindex', '0');
+        }
     };
@@ -1154,2 +1260,5 @@ Toolbar.prototype.getPersistData = function () {
         var checkOverflow = this.checkOverflow(ele, ele.getElementsByClassName(CLS_ITEMS)[0]);
+        if (!checkOverflow && this.scrollModule) {
+            this.destroyHScroll();
+        }
         if (checkOverflow && this.scrollModule && (this.offsetWid === ele.offsetWidth)) {
@@ -1179,3 +1288,4 @@ return;
                 case 'items':
-                    this.destroyHScroll();
+                    this.destroyMode();
+                    this.destroyItems();
                     this.renderItems();
@@ -1196,9 +1306,3 @@ this.renderOverflowMode();
                 case 'overflowMode':
-                    if (this.scrollModule) {
-                        this.remove(this.scrollModule.element, CLS_RTL);
-                        this.destroyHScroll();
-                    }
-                    if (this.popObj) {
-                        this.popupRefresh(this.popObj.element, true);
-                    }
+                    this.destroyMode();
                     this.renderOverflowMode();
@@ -1205,0 +1309,0 @@ if (this.enableRtl) {

package.json

 {
   "name": "@syncfusion/ej2-navigations",
-  "version": "1.0.11",
-  "description": "Syncfusion TypeScript Navigation Components",
+  "version": "1.0.14",
+  "description": "Essential JS 2 Navigation Components",
   "author": "Syncfusion Inc.",
@@ -9,5 +9,5 @@ "license": "SEE LICENSE IN license",
   "dependencies": {
-    "@syncfusion/ej2-base": "^1.0.11",
-    "@syncfusion/ej2-buttons": "^1.0.11",
-    "@syncfusion/ej2-popups": "^1.0.11"
+    "@syncfusion/ej2-base": "^1.0.14",
+    "@syncfusion/ej2-buttons": "^1.0.14",
+    "@syncfusion/ej2-popups": "^1.0.14"
   },
@@ -14,0 +14,0 @@ "devDependencies": {

src/common/h-scroll-model.d.ts

@@ -1,2 +0,2 @@
-import { Touch, ScrollEventArgs, TouchEventArgs, Component, EventHandler } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, Property, Browser } from '@syncfusion/ej2-base';import { createElement as buildTag, detach, classList } from '@syncfusion/ej2-base/dom';import { getUniqueID } from '@syncfusion/ej2-base/util';
+import { Touch, ScrollEventArgs, TouchEventArgs, Component, EventHandler, selectAll, getUniqueID } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, Property, Browser, detach, createElement as buildTag } from '@syncfusion/ej2-base';
 import {ComponentModel} from '@syncfusion/ej2-base';
@@ -10,4 +10,7 @@
     /**
-     * Specifies the left or right scrolling distance of the horizontal scrollbar moving.     * @default '40'     */    scrollStep?: number;
+     * Specifies the left or right scrolling distance of the horizontal scrollbar moving.
+     * @default '40'
+     */
+    scrollStep?: number;
 
 }

src/common/h-scroll.d.ts

@@ -22,5 +22,8 @@ import { Component } from '@syncfusion/ej2-base';
     private timeout;
+    private keyTimeout;
+    private keyTimer;
     private browser;
     private browserCheck;
     private ieCheck;
+    private isDevice;
     /**
@@ -60,4 +63,7 @@ * Specifies the left or right scrolling distance of the horizontal scrollbar moving.
     destroy(): void;
-    private createNavIcon(element, classList);
-    private repeatScroll(e);
+    private createNavIcon(element);
+    private onKeyPress(e);
+    private onKeyUp(e);
+    private eventBinding(ele);
+    private repeatScroll();
     private tabHoldHandler(e);
@@ -68,2 +74,3 @@ private contains(ele, className);
     private touchHandler(e);
+    private arrowDisabling(addDisable, removeDisable);
     private scrollHandler(e);
@@ -70,0 +77,0 @@ /**

src/common/h-scroll.js

@@ -17,3 +17,3 @@ var __extends = (this && this.__extends) || (function () {
 };
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base/dom", "@syncfusion/ej2-base/util"], function (require, exports, ej2_base_1, ej2_base_2, dom_1, util_1) {
+define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1, ej2_base_2) {
     "use strict";
@@ -23,2 +23,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
     var CLS_RTL = 'e-rtl';
+    var CLS_DISABLE = 'e-overlay';
     var CLS_HSCROLLBAR = 'e-hscroll-bar';
@@ -29,3 +30,6 @@ var CLS_HSCROLLCON = 'e-hscroll-content';
     var CLS_NAVLEFTARROW = 'e-nav-left-arrow';
-    var CLS_HSCROLLNAV = 'e-hor-nav';
+    var CLS_HSCROLLNAV = 'e-scroll-nav';
+    var CLS_HSCROLLNAVRIGHT = 'e-scroll-right-nav';
+    var CLS_HSCROLLNAVLEFT = 'e-scroll-left-nav';
+    var CLS_DEVICE = 'e-scroll-device';
     var HScroll = (function (_super) {
@@ -39,2 +43,3 @@ __extends(HScroll, _super);
             this.browserCheck = this.browser === 'mozilla';
+            this.isDevice = ej2_base_2.Browser.isDevice;
             var element = this.element;
@@ -44,3 +49,3 @@ this.ieCheck = this.browser === 'edge' || this.browser === 'msie';
             if (element.id === '') {
-                element.id = util_1.getUniqueID('hscroll');
+                element.id = ej2_base_1.getUniqueID('hscroll');
                 this.uniqueId = true;
@@ -54,7 +59,18 @@ }
         HScroll.prototype.render = function () {
-            this.createNavIcon(this.element, CLS_NAVRIGHTARROW + ' ' + CLS_NAVARROW);
+            this.touchModule = new ej2_base_1.Touch(this.element, { scroll: this.touchHandler.bind(this) });
+            this.element.addEventListener('contextmenu', function (e) {
+                e.preventDefault();
+            });
+            if (!this.isDevice) {
+                this.createNavIcon(this.element);
+                ej2_base_1.EventHandler.add(this.scrollEle, 'scroll', this.scrollHandler, this);
+            }
+            else {
+                this.element.classList.add(CLS_DEVICE);
+            }
         };
         HScroll.prototype.initialize = function () {
-            var scrollEle = dom_1.createElement('div', { className: CLS_HSCROLLCON });
-            var scrollDiv = dom_1.createElement('div', { className: CLS_HSCROLLBAR });
+            var scrollEle = ej2_base_2.createElement('div', { className: CLS_HSCROLLCON });
+            var scrollDiv = ej2_base_2.createElement('div', { className: CLS_HSCROLLBAR });
+            scrollDiv.setAttribute('tabindex', '-1');
             var ele = this.element;
@@ -83,4 +99,3 @@ var innerEle = [].slice.call(ele.children);
             ele.classList.remove(CLS_ROOT);
-            var nav = ele.querySelector('#' + ele.id + '_nav.e-' + ele.id + '_nav');
-            ej2_base_1.EventHandler.remove(nav, 'click', this.clickEventHandler);
+            var nav = ej2_base_1.selectAll('#' + ele.id + '_nav.e-' + ele.id + '_nav');
             for (var _i = 0, _a = [].slice.call(this.scrollItems.children); _i < _a.length; _i++) {
@@ -93,4 +108,7 @@ var elem = _a[_i];
             }
-            dom_1.detach(this.scrollEle);
-            nav.parentElement.removeChild(nav);
+            ej2_base_2.detach(this.scrollEle);
+            if (nav.length > 0) {
+                ej2_base_2.detach(nav[0]);
+                ej2_base_2.detach(nav[1]);
+            }
             ej2_base_1.EventHandler.remove(this.scrollEle, 'scroll', this.scrollHandler);
@@ -101,24 +119,62 @@ this.touchModule.destroy();
         };
-        HScroll.prototype.createNavIcon = function (element, classList) {
+        HScroll.prototype.createNavIcon = function (element) {
             var id = element.id.concat('_nav');
-            var className = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV);
-            var nav = dom_1.createElement('div', { id: id, className: className });
-            var navItem = dom_1.createElement('div', { className: classList + ' e-icons' });
+            var clsRight = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVRIGHT);
+            var nav = ej2_base_2.createElement('div', { id: id, className: clsRight });
+            nav.setAttribute('aria-disabled', 'false');
+            var navItem = ej2_base_2.createElement('div', { className: CLS_NAVRIGHTARROW + ' ' + CLS_NAVARROW + ' e-icons' });
+            var clsLeft = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVLEFT);
+            var navEle = ej2_base_2.createElement('div', { id: id, className: clsLeft + ' ' + CLS_DISABLE });
+            navEle.setAttribute('aria-disabled', 'true');
+            var navLeftItem = ej2_base_2.createElement('div', { className: CLS_NAVLEFTARROW + ' ' + CLS_NAVARROW + ' e-icons' });
+            navEle.appendChild(navLeftItem);
             nav.appendChild(navItem);
             nav.setAttribute('tabindex', '0');
-            element.insertBefore(nav, element.firstChild);
-            ej2_base_1.EventHandler.add(this.scrollEle, 'scroll', this.scrollHandler, this);
-            new ej2_base_1.Touch(nav, { tapHold: this.tabHoldHandler.bind(this) });
+            element.appendChild(nav);
+            element.insertBefore(navEle, element.firstChild);
             if (this.ieCheck) {
                 nav.classList.add('e-ie-align');
+                navEle.classList.add('e-ie-align');
             }
-            nav.addEventListener('mouseup', this.repeatScroll.bind(this));
-            nav.addEventListener('touchend', this.repeatScroll.bind(this));
-            nav.addEventListener('contextmenu', function (e) {
-                e.preventDefault();
+            this.eventBinding([nav, navEle]);
+        };
+        HScroll.prototype.onKeyPress = function (e) {
+            var _this = this;
+            if (e.key === 'Enter') {
+                var timeoutFun_1 = function () {
+                    _this.keyTimeout = true;
+                    _this.eleScrolling(10, e.target);
+                };
+                this.keyTimer = window.setTimeout(function () {
+                    timeoutFun_1();
+                }, 100);
+            }
+        };
+        HScroll.prototype.onKeyUp = function (e) {
+            if (e.key !== 'Enter') {
+                return;
+            }
+            if (this.keyTimeout) {
+                this.keyTimeout = false;
+            }
+            else {
+                e.target.click();
+            }
+            clearTimeout(this.keyTimer);
+        };
+        HScroll.prototype.eventBinding = function (ele) {
+            var _this = this;
+            ele.forEach(function (el) {
+                new ej2_base_1.Touch(el, { tapHold: _this.tabHoldHandler.bind(_this), tapHoldThreshold: 500 });
+                el.addEventListener('keydown', _this.onKeyPress.bind(_this));
+                el.addEventListener('keyup', _this.onKeyUp.bind(_this));
+                el.addEventListener('mouseup', _this.repeatScroll.bind(_this));
+                el.addEventListener('touchend', _this.repeatScroll.bind(_this));
+                el.addEventListener('contextmenu', function (e) {
+                    e.preventDefault();
+                });
+                ej2_base_1.EventHandler.add(el, 'click', _this.clickEventHandler, _this);
             });
-            ej2_base_1.EventHandler.add(nav, 'click', this.clickEventHandler, this);
-            this.touchModule = new ej2_base_1.Touch(element, { scroll: this.touchHandler.bind(this) });
         };
-        HScroll.prototype.repeatScroll = function (e) {
+        HScroll.prototype.repeatScroll = function () {
             clearInterval(this.timeout);
@@ -130,7 +186,7 @@ };
             trgt = this.contains(trgt, CLS_HSCROLLNAV) ? trgt.firstElementChild : trgt;
+            var scrollDis = 10;
             var timeoutFun = function () {
-                var scrollDis = 10;
                 _this.eleScrolling(scrollDis, trgt);
             };
-            this.timeout = setInterval(function () {
+            this.timeout = window.setInterval(function () {
                 timeoutFun();
@@ -147,3 +203,3 @@ }, 50);
             if (classList.contains(CLS_HSCROLLNAV)) {
-                classList = this.element.querySelector('.' + CLS_NAVARROW).classList;
+                classList = trgt.querySelector('.' + CLS_NAVARROW).classList;
             }
@@ -188,2 +244,12 @@ if (this.contains(rootEle, CLS_RTL) && this.browserCheck) {
         };
+        HScroll.prototype.arrowDisabling = function (addDisable, removeDisable) {
+            addDisable.classList.add(CLS_DISABLE);
+            addDisable.setAttribute('aria-disabled', 'true');
+            addDisable.removeAttribute('tabindex');
+            clearInterval(this.timeout);
+            removeDisable.classList.remove(CLS_DISABLE);
+            removeDisable.setAttribute('aria-disabled', 'false');
+            removeDisable.setAttribute('tabindex', '0');
+            this.repeatScroll();
+        };
         HScroll.prototype.scrollHandler = function (e) {
@@ -193,25 +259,32 @@ var target = e.target;
             var rootEle = this.element;
-            var navEle = this.element.firstChild.firstChild;
-            if (navEle) {
-                var scrollLeft = target.scrollLeft;
-                if (scrollLeft <= 0) {
-                    scrollLeft = -scrollLeft;
+            var navLeftEle = this.element.querySelector('.' + CLS_HSCROLLNAVLEFT);
+            var navRightEle = this.element.querySelector('.' + CLS_HSCROLLNAVRIGHT);
+            var scrollLeft = target.scrollLeft;
+            if (scrollLeft <= 0) {
+                scrollLeft = -scrollLeft;
+            }
+            if (scrollLeft === 0) {
+                if ((!this.contains(rootEle, CLS_RTL) || this.browserCheck) || this.ieCheck) {
+                    this.arrowDisabling(navLeftEle, navRightEle);
                 }
-                if (scrollLeft === 0) {
-                    if ((!this.contains(rootEle, CLS_RTL) || this.browserCheck) || this.ieCheck) {
-                        dom_1.classList(navEle, [CLS_NAVRIGHTARROW], [CLS_NAVLEFTARROW]);
-                    }
-                    else {
-                        dom_1.classList(navEle, [CLS_NAVLEFTARROW], [CLS_NAVRIGHTARROW]);
-                    }
+                else {
+                    this.arrowDisabling(navRightEle, navLeftEle);
                 }
-                else if (Math.ceil(width + scrollLeft) >= target.scrollWidth) {
-                    if ((!this.contains(rootEle, CLS_RTL) || this.browserCheck) || this.ieCheck) {
-                        dom_1.classList(navEle, [CLS_NAVLEFTARROW], [CLS_NAVRIGHTARROW]);
-                    }
-                    else {
-                        dom_1.classList(navEle, [CLS_NAVRIGHTARROW], [CLS_NAVLEFTARROW]);
-                    }
+            }
+            else if (Math.ceil(width + scrollLeft + .1) >= target.scrollWidth) {
+                if ((!this.contains(rootEle, CLS_RTL) || this.browserCheck) || this.ieCheck) {
+                    this.arrowDisabling(navRightEle, navLeftEle);
                 }
+                else {
+                    this.arrowDisabling(navLeftEle, navRightEle);
+                }
             }
+            else {
+                var disEle = this.element.querySelector('.' + CLS_DISABLE);
+                if (disEle) {
+                    disEle.classList.remove(CLS_DISABLE);
+                    disEle.setAttribute('aria-disabled', 'false');
+                    disEle.setAttribute('tabindex', '0');
+                }
+            }
         };
@@ -218,0 +291,0 @@ HScroll.prototype.onPropertyChanged = function (newProp, oldProp) {

src/toolbar/toolbar-model.d.ts

@@ -1,2 +0,2 @@
-import { Component, EventHandler, Property, Event, EmitType, BaseEventArgs } from '@syncfusion/ej2-base';import { addClass, removeClass, isVisible, closest, attributes, detach, classList } from '@syncfusion/ej2-base/dom';import { createElement as buildTag, selectAll, setStyleAttribute as setStyle } from '@syncfusion/ej2-base/dom';import { isNullOrUndefined as isNOU, getUniqueID, formatUnit } from '@syncfusion/ej2-base/util';import { INotifyPropertyChanged, NotifyPropertyChanges, CreateBuilder, ChildProperty } from '@syncfusion/ej2-base';import { KeyboardEvents, KeyboardEventArgs, Collection, Browser } from '@syncfusion/ej2-base';import { Popup } from '@syncfusion/ej2-popups';import { calculatePosition } from '@syncfusion/ej2-popups/src/common/position';import { Button, IconPosition } from '@syncfusion/ej2-buttons';import { HScroll } from '../common/h-scroll';import { ToolbarHelper } from './toolbar-builder';
+import { Component, EventHandler, Property, Event, EmitType, BaseEventArgs } from '@syncfusion/ej2-base';import { addClass, removeClass, isVisible, closest, attributes, detach, classList, KeyboardEvents } from '@syncfusion/ej2-base';import { createElement as buildTag, selectAll, setStyleAttribute as setStyle, KeyboardEventArgs } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, getUniqueID, formatUnit, Collection } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, NotifyPropertyChanges, CreateBuilder, ChildProperty, Browser } from '@syncfusion/ej2-base';import { Popup } from '@syncfusion/ej2-popups';import { calculatePosition } from '@syncfusion/ej2-popups';import { Button, IconPosition } from '@syncfusion/ej2-buttons';import { HScroll } from '../common/h-scroll';import { ToolbarHelper } from './toolbar-builder';
 import {OverflowOption,ItemType,DisplayMode,ItemAlign,OverflowMode,ClickEventArgs} from "./toolbar";
@@ -11,39 +11,116 @@ import {ComponentModel} from '@syncfusion/ej2-base';
     /**
-     * Specifies the unique id to be used with button or input element of toolbar items.     * @default ""     */    id?: string;
+     * Specifies the unique id to be used with button or input element of toolbar items.
+     * @default ""
+     */
+    id?: string;
 
     /**
-     * Specifies the text to be displayed on the toolbar button.     * @default ""     */    text?: string;
+     * Specifies the text to be displayed on the toolbar button.
+     * @default ""
+     */
+    text?: string;
 
     /**
-     * Specifies the width of the toolbar button commands.     * @default 'auto'     */    width?: number | string;
+     * Specifies the width of the toolbar button commands.
+     * @default 'auto'
+     */
+    width?: number | string;
 
     /**
-     * Defines single / multiple classes (separated by space ) are to be used for commands customization.     * @default ""     */    cssClass?: string;
+     * Defines single / multiple classes (separated by space ) are to be used for commands customization.
+     * @default ""
+     */
+    cssClass?: string;
 
     /**
-     * Defines single / multiple classes separated by space which can be used to specify an icon for the button.     * The icon will be positioned before the text content if text available, else icon alone button will be rendered.     * @default ""     */    prefixIcon?: string;
+     * Defines single / multiple classes separated by space which can be used to specify an icon for the button.
+     * The icon will be positioned before the text content if text available, else icon alone button will be rendered.
+     * @default ""
+     */
+    prefixIcon?: string;
 
     /**
-     * Defines single / multiple classes separated by space which can be used to specify an icon for the button.     * The icon will be positioned after the text content if text available.     * @default ""     */    suffixIcon?: string;
+     * Defines single / multiple classes separated by space which can be used to specify an icon for the button.
+     * The icon will be positioned after the text content if text available.
+     * @default ""
+     */
+    suffixIcon?: string;
 
     /**
-     * Specifies the toolbar command display area when an element's content is large to fit in an available space.     * Applicable to `popup` mode only. Possible values are:     * - show - Always shows item in *toolbar* with primary priority.     * - hide - Always shows item in *popup* with secondary priority.     * - none - No priority considers to display and as per the normal order control moves to popup when content exceeds.     * @default 'None'     */    overflow?: OverflowOption;
+     * Specifies the toolbar command display area when an element's content is large to fit in an available space.
+     * Applicable to `popup` mode only. Possible values are:
+     * - show - Always shows item in *toolbar* with primary priority.
+     * - hide - Always shows item in *popup* with secondary priority.
+     * - none - No priority considers to display and as per the normal order control moves to popup when content exceeds.
+     * @default 'None'
+     */
+    overflow?: OverflowOption;
 
     /**
-     * Specifies the HTML element / element id as a string which can be added as toolbar command.     * ```     * E.g - items: [{ template: '<input placeholder="Search"/>' },{ template: '#checkbox1' }]     * ```     * @default ""     */    template?: string | Object;
+     * Specifies the HTML element / element id as a string which can be added as toolbar command.
+     * ```
+     * E.g - items: [{ template: '<input placeholder="Search"/>' },{ template: '#checkbox1' }]
+     * ```
+     * @default ""
+     */
+    template?: string | Object;
 
     /**
-     * Specifies the types of command to be rendered in the toolbar.     * Supported types are:     * - Button - Creates the button control with its given properties like text, prefixIcon, etc.     * - Separator - Adds a horizontal line that separates the toolbar commands.     * - Input - Creates an input element and it's applicable to template rendering with Syncfusion controls like drop down list,      * auto complete, etc.     * @default 'Button'     */    type?: ItemType;
+     * Specifies the types of command to be rendered in the toolbar.
+     * Supported types are:
+     * - Button - Creates the button control with its given properties like text, prefixIcon, etc.
+     * - Separator - Adds a horizontal line that separates the toolbar commands.
+     * - Input - Creates an input element and it's applicable to template rendering with Syncfusion controls like drop down list, 
+     * auto complete, etc.
+     * @default 'Button'
+     */
+    type?: ItemType;
 
     /**
-     * Specifies where the button text will be displayed in *popup mode* of the toolbar.     * Possible values are:     * - Toolbar - Text will be displayed in *toolbar* only.     * - Overflow - Text will be displayed when content overflowed to *popup* only.     * - Both - Text will be displayed in *popup* and *toolbar*.     * @default 'Both'     */    showTextOn?: DisplayMode;
+     * Specifies where the button text will be displayed in *popup mode* of the toolbar.
+     * Possible values are:
+     * - Toolbar - Text will be displayed in *toolbar* only.
+     * - Overflow - Text will be displayed when content overflowed to *popup* only.
+     * - Both - Text will be displayed in *popup* and *toolbar*.
+     * @default 'Both'
+     */
+    showTextOn?: DisplayMode;
 
     /**
-     * Defines a htmlAttributes which can be used for adding custom attributes to toolbar command.     * Supports HTML attributes such as style, class, etc.     * @default 'null'     */    htmlAttributes?: { [key: string]: string; };
+     * Defines a htmlAttributes which can be used for adding custom attributes to toolbar command.
+     * Supports HTML attributes such as style, class, etc.
+     * @default 'null'
+     */
+    htmlAttributes?: { [key: string]: string; };
 
     /**
-     * Sets the text that appears as a html tooltip in the toolbar command.     * @default ""     */    tooltipText?: string;
+     * Sets the text that appears as a html tooltip in the toolbar command.
+     * @default ""
+     */
+    tooltipText?: string;
 
     /**
-     * Specifies the location for aligning toolbar items in the toolbar. Each command will be aligned according to the `align` property.     * Possible values are:         * - Left – Places the items to the `left` start of the toolbar.     * - Center - Places the items to the `center` to the toolbar items.     * - Right - Places the items to the `right` end of the toolbar     * @default "left"     */    align?: ItemAlign;
+     * Specifies the location for aligning toolbar items in the toolbar. Each command will be aligned according to the `align` property.
+     * 
+     * Possible values are:
+     * - Left – To align commands to the left side of the Toolbar.
+     * - Center - To align commands to the center of the Toolbar.
+     * - Right - To align commands to the right side of the Toolbar.
+     * ```html
+     * <div id="element"> </div>
+     * ```
+     * ```typescript
+     * let toolbar: Toolbar = new Toolbar({
+     *     items: [
+     *         { text: "Home" },
+     *         { text: "My Home Page" , align: 'center' },
+     *         { text: "Search", align: 'right' }
+     *         { text: "Settings", align: 'right' }
+     *     ]
+     * });
+     * toolbar.appendTo('#element');
+     * ```
+     * @default "left"
+     */
+    align?: ItemAlign;
 
@@ -58,28 +135,59 @@ }
     /**
-     * An array of item that is used to configure toolbar commands.     * @default []     */    items?: ItemModel[];
+     * An array of item that is used to configure toolbar commands.
+     * @default []
+     */
+    items?: ItemModel[];
 
     /**
-     * Specifies the width of the toolbar in pixels/number/percentage. Number value is considered as pixels.     * @default 'auto'     */    width?: string | number;
+     * Specifies the width of the toolbar in pixels/number/percentage. Number value is considered as pixels.
+     * @default 'auto'
+     */
+    width?: string | number;
 
     /**
-     * Specifies the height of the toolbar in pixels/number/percentage. Number value is considered as pixels.     * @default 'auto'     */    height?: string | number;
+     * Specifies the height of the toolbar in pixels/number/percentage. Number value is considered as pixels.
+     * @default 'auto'
+     */
+    height?: string | number;
 
     /**
-     * Specifies the toolbar display mode when toolbar content exceeds the viewing area.     * Possible modes are:     * - Scrollable - All the elements are displayed in a single line with horizontal scrolling enabled.     * - Popup - Prioritized elements are displayed in toolbar and rest of elements are moved to *popup*.     * If the popup content overflows the height of the page, the rest of the elements will be hidden.     * @default 'Scrollable'     */    overflowMode?: OverflowMode;
+     * Specifies the toolbar display mode when toolbar content exceeds the viewing area.
+     * Possible modes are:
+     * - Scrollable - All the elements are displayed in a single line with horizontal scrolling enabled.
+     * - Popup - Prioritized elements are displayed in toolbar and rest of elements are moved to *popup*.
+     * If the popup content overflows the height of the page, the rest of the elements will be hidden.
+     * @default 'Scrollable'
+     */
+    overflowMode?: OverflowMode;
 
     /**
-     * Specifies the direction of the toolbar commands. For the cultures like Arabic, direction can be switched as right to left.     * @default 'false'     */    enableRtl?: boolean;
+     * Specifies the direction of the toolbar commands. For the cultures like Arabic, direction can be switched as right to left.
+     * @default 'false'
+     */
+    enableRtl?: boolean;
 
     /**
-     * The event will be fired while clicking on the toolbar elements.     * @event     */    clicked?: EmitType<ClickEventArgs>;
+     * The event will be fired while clicking on the toolbar elements.
+     * @event
+     */
+    clicked?: EmitType<ClickEventArgs>;
 
     /**
-     * The event will be fired once the control rendering is completed.     * @event     */    created?: EmitType<Event>;
+     * The event will be fired once the control rendering is completed.
+     * @event
+     */
+    created?: EmitType<Event>;
 
     /**
-     * The event will be fired when the control gets destroyed.     * @event     */    destroyed?: EmitType<Event>;
+     * The event will be fired when the control gets destroyed.
+     * @event
+     */
+    destroyed?: EmitType<Event>;
 
     /**
-     * The event will be fired before the control rendered on a page.     * @event     */    beforeCreate?: EmitType<Event>;
+     * The event will be fired before the control rendered on a page.
+     * @event
+     */
+    beforeCreate?: EmitType<Event>;
 
 }

src/toolbar/toolbar.d.ts

@@ -119,6 +119,21 @@ import { Component, EmitType, BaseEventArgs } from '@syncfusion/ej2-base';
      * Specifies the location for aligning toolbar items in the toolbar. Each command will be aligned according to the `align` property.
+     *
      * Possible values are:
-     * - Left – Places the items to the `left` start of the toolbar.
-     * - Center - Places the items to the `center` to the toolbar items.
-     * - Right - Places the items to the `right` end of the toolbar
+     * - Left – To align commands to the left side of the Toolbar.
+     * - Center - To align commands to the center of the Toolbar.
+     * - Right - To align commands to the right side of the Toolbar.
+     * ```html
+     * <div id="element"> </div>
+     * ```
+     * ```typescript
+     * let toolbar: Toolbar = new Toolbar({
+     *     items: [
+     *         { text: "Home" },
+     *         { text: "My Home Page" , align: 'center' },
+     *         { text: "Search", align: 'right' }
+     *         { text: "Settings", align: 'right' }
+     *     ]
+     * });
+     * toolbar.appendTo('#element');
+     * ```
      * @default "left"
@@ -229,4 +244,9 @@ */
     private destroyHScroll();
+    private destroyItems();
+    private destroyMode();
     private add(ele, val);
     private remove(ele, val);
+    private elementFocus(ele);
+    private clstElement(tbrNavChk, trgt);
+    private keyHandling(clst, e, trgt, navChk, scrollChk);
     private keyActionHandler(e);
@@ -246,2 +266,4 @@ private eleFocus(closest, pos);
     private checkOverflow(element, innerItem);
+    /** @hidden */
+    refreshOverflow(): void;
     private renderOverflowMode();
@@ -283,6 +305,7 @@ private createPopupEle(ele, innerEle);
      * Removes the items from the toolbar. Acceptable arguments are index of item / HTMLElement / Node list.
-     * @param  {number|HTMLElement|NodeList} args  - Index or DOM element or an Array of item which is to be removed from the toolbar.
+     * @param  {number|HTMLElement|NodeList|HTMLElement[]}
+     * @args - Index or DOM element or an Array of item which is to be removed from the toolbar.
      * @returns void
      */
-    removeItems(args: number | HTMLElement | NodeList | Element): void;
+    removeItems(args: number | HTMLElement | NodeList | Element | HTMLElement[]): void;
     private removeItemByIndex(index, innerItems);
@@ -293,2 +316,3 @@ private templateRender(templateProp, innerEle, item);
     private itemClick(e);
+    private activeEleSwitch(ele);
     private activeEleRemove(curEle);
@@ -295,0 +319,0 @@ protected getPersistData(): string;

src/toolbar/toolbar.js

@@ -17,3 +17,3 @@ var __extends = (this && this.__extends) || (function () {
 };
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base/dom", "@syncfusion/ej2-base/dom", "@syncfusion/ej2-base/util", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-popups", "@syncfusion/ej2-popups/src/common/position", "@syncfusion/ej2-buttons", "../common/h-scroll"], function (require, exports, ej2_base_1, dom_1, dom_2, util_1, ej2_base_2, ej2_base_3, ej2_popups_1, position_1, ej2_buttons_1, h_scroll_1) {
+define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-popups", "@syncfusion/ej2-popups", "@syncfusion/ej2-buttons", "../common/h-scroll"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, ej2_base_4, ej2_base_5, ej2_popups_1, ej2_popups_2, ej2_buttons_1, h_scroll_1) {
     "use strict";
@@ -35,2 +35,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
     var CLS_TBARNAV = 'e-hor-nav';
+    var CLS_TBARSCRLNAV = 'e-scroll-nav';
     var CLS_TBARRIGHT = 'e-toolbar-right';
@@ -52,3 +53,3 @@ var CLS_TBARLEFT = 'e-toolbar-left';
         return Item;
-    }(ej2_base_2.ChildProperty));
+    }(ej2_base_5.ChildProperty));
     __decorate([
@@ -105,3 +106,5 @@ ej2_base_1.Property('')
                 popupClose: 'escape',
-                tab: 'tab'
+                tab: 'tab',
+                home: 'home',
+                end: 'end',
             };
@@ -121,2 +124,4 @@ return _this;
             this.trigger('beforeCreate');
+            this.scrollModule = null;
+            this.popObj = null;
             if (this.enableRtl) {
@@ -128,4 +133,4 @@ this.add(this.element, CLS_RTL);
             ej2_base_1.EventHandler.add(this.element, 'click', this.clickHandler, this);
-            window.onresize = this.resize.bind(this);
-            this.keyModule = new ej2_base_3.KeyboardEvents(this.element, {
+            window.addEventListener('resize', this.resize.bind(this));
+            this.keyModule = new ej2_base_2.KeyboardEvents(this.element, {
                 keyAction: this.keyActionHandler.bind(this),
@@ -146,4 +151,4 @@ keyConfigs: this.keyConfigs
         Toolbar.prototype.docEvent = function (e) {
-            var popEle = dom_1.closest(e.target, '.e-popup');
-            if (this.popObj && dom_1.isVisible(this.popObj.element) && !popEle) {
+            var popEle = ej2_base_2.closest(e.target, '.e-popup');
+            if (this.popObj && ej2_base_2.isVisible(this.popObj.element) && !popEle) {
                 this.popObj.hide({ name: 'SlideUp', duration: 100 });
@@ -161,2 +166,18 @@ }
         };
+        Toolbar.prototype.destroyItems = function () {
+            [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM)).forEach(function (el) {
+                ej2_base_2.detach(el);
+            });
+            this.tbarEle = [];
+            this.tbarAlgEle = { lefts: [], centers: [], rights: [] };
+        };
+        Toolbar.prototype.destroyMode = function () {
+            if (this.scrollModule) {
+                this.remove(this.scrollModule.element, CLS_RTL);
+                this.destroyHScroll();
+            }
+            if (this.popObj) {
+                this.popupRefresh(this.popObj.element, true);
+            }
+        };
         Toolbar.prototype.add = function (ele, val) {
@@ -168,65 +189,106 @@ ele.classList.add(val);
         };
-        Toolbar.prototype.keyActionHandler = function (e) {
-            e.preventDefault();
+        Toolbar.prototype.elementFocus = function (ele) {
+            var fChild = ele.firstElementChild;
+            if (fChild) {
+                fChild.focus();
+                this.activeEleSwitch(ele);
+            }
+            else {
+                ele.focus();
+            }
+        };
+        Toolbar.prototype.clstElement = function (tbrNavChk, trgt) {
             var clst;
-            var trgt = e.target;
-            var rootEle = this.element;
-            var popObj = this.popObj;
-            var popAnimate = { name: 'SlideUp', duration: 100 };
-            var tbrNavChk = trgt.classList.contains(CLS_TBARNAV);
-            if (tbrNavChk && popObj && dom_1.isVisible(popObj.element)) {
-                clst = popObj.element.querySelector('.' + CLS_ITEM);
+            if (tbrNavChk && this.popObj && ej2_base_2.isVisible(this.popObj.element)) {
+                clst = this.popObj.element.querySelector('.' + CLS_ITEM);
             }
-            else if (rootEle === trgt || tbrNavChk) {
-                clst = rootEle.querySelector('.' + CLS_ITEM);
+            else if (this.element === trgt || tbrNavChk) {
+                clst = this.element.querySelector('.' + CLS_ITEM);
             }
             else {
-                clst = dom_1.closest(trgt, '.' + CLS_ITEM);
+                clst = ej2_base_2.closest(trgt, '.' + CLS_ITEM);
             }
-            if (clst) {
-                switch (e.action) {
-                    case 'moveRight':
-                        if (rootEle === trgt || tbrNavChk) {
-                            clst.firstChild.focus();
+            return clst;
+        };
+        Toolbar.prototype.keyHandling = function (clst, e, trgt, navChk, scrollChk) {
+            var popObj = this.popObj;
+            var rootEle = this.element;
+            var popAnimate = { name: 'SlideUp', duration: 100 };
+            switch (e.action) {
+                case 'moveRight':
+                    if (rootEle === trgt || navChk) {
+                        this.elementFocus(clst);
+                    }
+                    else {
+                        this.eleFocus(clst, 'next');
+                    }
+                    break;
+                case 'moveLeft':
+                    if (popObj && navChk) {
+                        if (this.tbarAlign) {
+                            clst = ej2_base_2.closest(clst, '.' + CLS_ITEMS);
+                            var items = ej2_base_3.selectAll('.' + CLS_ITEM, clst);
+                            clst = items[items.length - 1];
                         }
                         else {
-                            this.eleFocus(clst, 'next');
+                            clst = clst.parentElement.lastElementChild;
                         }
-                        break;
-                    case 'moveLeft':
-                        if (popObj && tbrNavChk) {
-                            if (this.tbarAlign) {
-                                clst = dom_1.closest(clst, '.' + CLS_ITEMS);
-                                var items = dom_2.selectAll('.' + CLS_ITEM, clst);
-                                clst = items[items.length - 1];
+                    }
+                    if (navChk && !clst.classList.contains(CLS_SEPARATOR) && !clst.classList.contains(CLS_DISABLE)) {
+                        this.elementFocus(clst);
+                    }
+                    else {
+                        this.eleFocus(clst, 'previous');
+                    }
+                    break;
+                case 'home':
+                case 'end':
+                    var ele = void 0;
+                    var nodes = void 0;
+                    if (clst) {
+                        var popupCheck = ej2_base_2.closest(clst, '.e-popup');
+                        if (popupCheck) {
+                            if (ej2_base_2.isVisible(this.popObj.element)) {
+                                nodes = popupCheck.children;
+                                if (e.action === 'home') {
+                                    ele = nodes[0];
+                                }
+                                else {
+                                    ele = nodes[nodes.length - 1];
+                                }
                             }
-                            else {
-                                clst = clst.parentElement.lastElementChild;
-                            }
                         }
-                        if (tbrNavChk && !clst.classList.contains(CLS_SEPARATOR) && !clst.classList.contains(CLS_DISABLE)) {
-                            clst.firstChild.focus();
-                        }
                         else {
-                            this.eleFocus(clst, 'previous');
-                        }
-                        break;
-                    case 'moveUp':
-                    case 'moveDown':
-                        var value = e.action === 'moveUp' ? 'previous' : 'next';
-                        if (popObj && dom_1.closest(trgt, '.e-popup')) {
-                            if (e.action === 'moveUp' && popObj.element.firstElementChild === clst) {
-                                rootEle.querySelector('.' + CLS_TBARNAV).focus();
+                            nodes = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM);
+                            if (e.action === 'home') {
+                                ele = nodes[0];
                             }
                             else {
-                                this.eleFocus(clst, value);
+                                ele = nodes[nodes.length - 1];
                             }
                         }
-                        else if (e.action === 'moveDown') {
-                            clst.firstChild.focus();
+                        if (ele) {
+                            this.elementFocus(ele);
                         }
-                        break;
-                    case 'tab':
-                        var ele = clst.firstChild;
-                        if (rootEle === trgt || tbrNavChk) {
+                    }
+                    break;
+                case 'moveUp':
+                case 'moveDown':
+                    var value = e.action === 'moveUp' ? 'previous' : 'next';
+                    if (popObj && ej2_base_2.closest(trgt, '.e-popup')) {
+                        if (e.action === 'moveUp' && popObj.element.firstElementChild === clst) {
+                            rootEle.querySelector('.' + CLS_TBARNAV).focus();
+                        }
+                        else {
+                            this.eleFocus(clst, value);
+                        }
+                    }
+                    else if (e.action === 'moveDown') {
+                        this.elementFocus(clst);
+                    }
+                    break;
+                case 'tab':
+                    if (!scrollChk) {
+                        var ele_1 = clst.firstElementChild;
+                        if (rootEle === trgt || navChk) {
                             if (this.activeEle) {
@@ -236,27 +298,39 @@ this.activeEle.focus();
                             else {
-                                this.activeEleRemove(ele);
-                                ele.focus();
+                                this.activeEleRemove(ele_1);
+                                ele_1.focus();
                             }
+                            this.element.removeAttribute('tabindex');
                         }
-                        break;
-                    case 'popupClose':
-                        if (popObj) {
-                            popObj.hide(popAnimate);
-                        }
-                        break;
-                    case 'popupOpen':
-                        if (!tbrNavChk) {
-                            return;
-                        }
-                        if (popObj && !dom_1.isVisible(popObj.element)) {
-                            popObj.element.style.top = rootEle.offsetHeight + 'px';
-                            popObj.show({ name: 'SlideDown', duration: 100 });
-                        }
-                        else {
-                            popObj.hide(popAnimate);
-                        }
-                        break;
-                }
+                    }
+                    break;
+                case 'popupClose':
+                    if (popObj) {
+                        popObj.hide(popAnimate);
+                    }
+                    break;
+                case 'popupOpen':
+                    if (!navChk) {
+                        return;
+                    }
+                    if (popObj && !ej2_base_2.isVisible(popObj.element)) {
+                        popObj.element.style.top = rootEle.offsetHeight + 'px';
+                        popObj.show({ name: 'SlideDown', duration: 100 });
+                    }
+                    else {
+                        popObj.hide(popAnimate);
+                    }
+                    break;
             }
         };
+        Toolbar.prototype.keyActionHandler = function (e) {
+            e.preventDefault();
+            var clst;
+            var trgt = e.target;
+            var tbrNavChk = trgt.classList.contains(CLS_TBARNAV);
+            var tbarScrollChk = trgt.classList.contains(CLS_TBARSCRLNAV);
+            clst = this.clstElement(tbrNavChk, trgt);
+            if (clst || tbarScrollChk) {
+                this.keyHandling(clst, e, trgt, tbrNavChk, tbarScrollChk);
+            }
+        };
         Toolbar.prototype.eleFocus = function (closest, pos) {
@@ -283,9 +357,7 @@ var sib = Object(closest)[pos + 'ElementSibling'];
                 }
-                if (!util_1.isNullOrUndefined(sib.firstChild)) {
-                    sib.firstChild.focus();
-                }
+                this.elementFocus(sib);
             }
             else if (this.tbarAlign) {
                 var elem = Object(closest.parentElement)[pos + 'ElementSibling'];
-                if (!util_1.isNullOrUndefined(elem) && elem.children.length > 0) {
+                if (!ej2_base_4.isNullOrUndefined(elem) && elem.children.length > 0) {
                     if (pos === 'next') {
@@ -297,3 +369,4 @@ var el = elem.querySelector('.' + CLS_ITEM);
                         else {
-                            el.firstChild.focus();
+                            el.firstElementChild.focus();
+                            this.activeEleSwitch(el);
                         }
@@ -307,3 +380,3 @@ }
                         else {
-                            el.firstChild.focus();
+                            this.elementFocus(el);
                         }
@@ -324,3 +397,3 @@ }
             var ele = this.element;
-            var popupNav = dom_1.closest(trgt, ('.' + CLS_TBARNAV));
+            var popupNav = ej2_base_2.closest(trgt, ('.' + CLS_TBARNAV));
             if (!popupNav) {
@@ -336,4 +409,4 @@ popupNav = trgt;
             var itemObj;
-            var clst = dom_1.closest(e.target, '.' + CLS_ITEM);
-            if ((util_1.isNullOrUndefined(clst) || clst.classList.contains(CLS_DISABLE)) && !popupNav.classList.contains(CLS_TBARNAV)) {
+            var clst = ej2_base_2.closest(e.target, '.' + CLS_ITEM);
+            if ((ej2_base_4.isNullOrUndefined(clst) || clst.classList.contains(CLS_DISABLE)) && !popupNav.classList.contains(CLS_TBARNAV)) {
                 return;
@@ -350,3 +423,3 @@ }
             var popObj = this.popObj;
-            if (dom_1.isVisible(popObj.element)) {
+            if (ej2_base_2.isVisible(popObj.element)) {
                 popupNav.classList.remove(CLS_TBARNAVACT);
@@ -376,12 +449,12 @@ popObj.hide({ name: 'SlideUp', duration: 100 });
         Toolbar.prototype.initialize = function () {
-            var width = util_1.formatUnit(this.width);
-            var height = util_1.formatUnit(this.height);
-            if (ej2_base_3.Browser.info.name !== 'msie' || this.height !== 'auto') {
-                dom_2.setStyleAttribute(this.element, { 'height': height });
+            var width = ej2_base_4.formatUnit(this.width);
+            var height = ej2_base_4.formatUnit(this.height);
+            if (ej2_base_5.Browser.info.name !== 'msie' || this.height !== 'auto') {
+                ej2_base_3.setStyleAttribute(this.element, { 'height': height });
             }
-            dom_2.setStyleAttribute(this.element, { 'width': width });
+            ej2_base_3.setStyleAttribute(this.element, { 'width': width });
             var ariaAttr = {
                 'role': 'toolbar', 'aria-disabled': 'false', 'aria-haspopup': 'false', 'aria-orientation': 'horizontal',
             };
-            dom_1.attributes(this.element, ariaAttr);
+            ej2_base_2.attributes(this.element, ariaAttr);
         };
@@ -404,3 +477,3 @@ Toolbar.prototype.renderControl = function () {
                 this.remove(this.scrollModule.element, CLS_TBARPOS);
-                dom_2.setStyleAttribute(this.element, { overflow: 'hidden' });
+                ej2_base_3.setStyleAttribute(this.element, { overflow: 'hidden' });
             }
@@ -416,3 +489,3 @@ };
         Toolbar.prototype.checkOverflow = function (element, innerItem) {
-            if (util_1.isNullOrUndefined(element) || util_1.isNullOrUndefined(innerItem)) {
+            if (ej2_base_4.isNullOrUndefined(element) || ej2_base_4.isNullOrUndefined(innerItem)) {
                 return false;
@@ -429,3 +502,4 @@ }
             var popNav = element.querySelector('.' + CLS_TBARNAV);
-            if (itemWidth > eleWidth - (popNav ? popNav.offsetWidth : 0)) {
+            var scrollNav = element.querySelector('.' + CLS_TBARSCRLNAV);
+            if (itemWidth > eleWidth - (popNav ? popNav.offsetWidth : (scrollNav ? scrollNav.offsetWidth * 2 : 0))) {
                 return true;
@@ -437,2 +511,5 @@ }
         };
+        Toolbar.prototype.refreshOverflow = function () {
+            this.resize();
+        };
         Toolbar.prototype.renderOverflowMode = function () {
@@ -454,3 +531,3 @@ var ele = this.element;
                         if (this.checkOverflow(ele, innerItems)) {
-                            this.createPopupEle(ele, [].slice.call(dom_2.selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, ele)));
+                            this.createPopupEle(ele, [].slice.call(ej2_base_3.selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, ele)));
                             this.element.querySelector('.' + CLS_TBARNAV).setAttribute('tabIndex', '0');
@@ -482,8 +559,8 @@ }
             var element = tbarObj.element;
-            var nodes = dom_2.selectAll('.' + CLS_TBAROVERFLOW, ele);
+            var nodes = ej2_base_3.selectAll('.' + CLS_TBAROVERFLOW, ele);
             var nodeIndex = 0;
-            var poppedEle = [].slice.call(dom_2.selectAll('.' + CLS_POPUP, element.querySelector('.' + CLS_ITEMS)));
+            var poppedEle = [].slice.call(ej2_base_3.selectAll('.' + CLS_POPUP, element.querySelector('.' + CLS_ITEMS)));
             var nodePri = 0;
             poppedEle.forEach(function (el, index) {
-                nodes = dom_2.selectAll('.' + CLS_TBAROVERFLOW, ele);
+                nodes = ej2_base_3.selectAll('.' + CLS_TBAROVERFLOW, ele);
                 if (el.classList.contains(CLS_TBAROVERFLOW) && nodes.length > 0) {
@@ -517,3 +594,3 @@ if (tbarObj.tbResize && nodes.length > index) {
                 }
-                dom_2.setStyleAttribute(el, { display: '', height: eleHeight + 'px' });
+                ej2_base_3.setStyleAttribute(el, { display: '', height: eleHeight + 'px' });
             });
@@ -523,7 +600,7 @@ popupPri.forEach(function (el) {
             });
-            var tbarEle = dom_2.selectAll('.' + CLS_ITEM, element.querySelector('.' + CLS_ITEMS));
+            var tbarEle = ej2_base_3.selectAll('.' + CLS_ITEM, element.querySelector('.' + CLS_ITEMS));
             for (var i = tbarEle.length - 1; i >= 0; i--) {
                 var tbarElement = tbarEle[i];
                 if (tbarElement.classList.contains(CLS_SEPARATOR)) {
-                    dom_2.setStyleAttribute(tbarElement, { display: 'none' });
+                    ej2_base_3.setStyleAttribute(tbarElement, { display: 'none' });
                 }
@@ -547,3 +624,3 @@ else {
             else {
-                ele = dom_2.createElement('div', { id: element.id + '_popup', className: CLS_POPUPCLASS });
+                ele = ej2_base_3.createElement('div', { id: element.id + '_popup', className: CLS_POPUPCLASS });
             }
@@ -556,3 +633,3 @@ this.pushingPoppedEle(this, popupPri, ele, eleHeight);
                 element.appendChild(ele);
-                dom_2.setStyleAttribute(this.element, { overflow: '' });
+                ej2_base_3.setStyleAttribute(this.element, { overflow: '' });
                 var popup = new ej2_popups_1.Popup(null, {
@@ -576,4 +653,4 @@ relateTo: this.element,
                 var popupEle = this.popObj.element;
-                dom_2.setStyleAttribute(popupEle, { maxHeight: '', display: 'block' });
-                dom_2.setStyleAttribute(popupEle, { maxHeight: popupEle.offsetHeight + 'px', display: '' });
+                ej2_base_3.setStyleAttribute(popupEle, { maxHeight: '', display: 'block' });
+                ej2_base_3.setStyleAttribute(popupEle, { maxHeight: popupEle.offsetHeight + 'px', display: '' });
             }
@@ -586,9 +663,9 @@ };
             var popupNav = toolEle.querySelector('.' + CLS_TBARNAV);
-            dom_2.setStyleAttribute(popObj.element, { height: 'auto', maxHeight: '' });
+            ej2_base_3.setStyleAttribute(popObj.element, { height: 'auto', maxHeight: '' });
             popObj.element.style.maxHeight = popObj.element.clientHeight + 'px';
-            var popupElePos = popupEle.offsetTop + popupEle.offsetHeight + position_1.calculatePosition(toolEle).top;
-            if (!util_1.isNullOrUndefined(popupNav)) {
+            var popupElePos = popupEle.offsetTop + popupEle.offsetHeight + ej2_popups_2.calculatePosition(toolEle).top;
+            if (!ej2_base_4.isNullOrUndefined(popupNav)) {
                 var popIcon = popupNav.firstElementChild;
                 popupNav.classList.add(CLS_TBARNAVACT);
-                dom_1.classList(popIcon, [CLS_POPUPICON], [CLS_POPUPDOWN]);
+                ej2_base_2.classList(popIcon, [CLS_POPUPICON], [CLS_POPUPDOWN]);
             }
@@ -598,3 +675,3 @@ if ((window.innerHeight + window.scrollY) < popupElePos) {
                 popObj.height = overflowHeight + 'px';
-                dom_2.setStyleAttribute(popObj.element, { maxHeight: overflowHeight + 'px' });
+                ej2_base_3.setStyleAttribute(popObj.element, { maxHeight: overflowHeight + 'px' });
             }
@@ -608,3 +685,3 @@ };
                 popupNav.classList.remove(CLS_TBARNAVACT);
-                dom_1.classList(popIcon, [CLS_POPUPDOWN], [CLS_POPUPICON]);
+                ej2_base_2.classList(popIcon, [CLS_POPUPDOWN], [CLS_POPUPICON]);
             }
@@ -629,3 +706,3 @@ };
                             if (sepEle.classList.contains(CLS_SEPARATOR)) {
-                                dom_2.setStyleAttribute(sepEle, { display: 'none' });
+                                ej2_base_3.setStyleAttribute(sepEle, { display: 'none' });
                             }
@@ -645,3 +722,3 @@ }
                         inEle[i].classList.add(CLS_POPUP);
-                        dom_2.setStyleAttribute(inEle[i], { display: 'none' });
+                        ej2_base_3.setStyleAttribute(inEle[i], { display: 'none', minWidth: inEle[i].offsetWidth + 'px' });
                         itemPopCount++;
@@ -655,3 +732,3 @@ }
             if (pre) {
-                var popedEle = dom_2.selectAll('.' + CLS_ITEM + ':not(.' + CLS_POPUP + ')', this.element);
+                var popedEle = ej2_base_3.selectAll('.' + CLS_ITEM + ':not(.' + CLS_POPUP + ')', this.element);
                 this.checkPriority(ele, popedEle, eleWid, false);
@@ -663,7 +740,7 @@ }
             var className = 'e-' + element.id.concat('_nav ' + CLS_POPUPNAV);
-            var nav = dom_2.createElement('div', { id: id, className: className });
-            if (ej2_base_3.Browser.info.name === 'msie' || ej2_base_3.Browser.info.name === 'edge') {
+            var nav = ej2_base_3.createElement('div', { id: id, className: className });
+            if (ej2_base_5.Browser.info.name === 'msie' || ej2_base_5.Browser.info.name === 'edge') {
                 nav.classList.add('e-ie-align');
             }
-            var navItem = dom_2.createElement('div', { className: CLS_POPUPDOWN + ' e-icons' });
+            var navItem = ej2_base_3.createElement('div', { className: CLS_POPUPDOWN + ' e-icons' });
             nav.appendChild(navItem);
@@ -676,6 +753,6 @@ nav.setAttribute('tabindex', '0');
             var query = '.' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + '):not(.' + CLS_TBAROVERFLOW + ')';
-            var priEleCnt = dom_2.selectAll('.' + CLS_POPUP + ':not(.' + CLS_TBAROVERFLOW + ')', popEle).length;
-            if (dom_2.selectAll(query, inEle).length === 0) {
+            var priEleCnt = ej2_base_3.selectAll('.' + CLS_POPUP + ':not(.' + CLS_TBAROVERFLOW + ')', popEle).length;
+            if (ej2_base_3.selectAll(query, inEle).length === 0) {
                 var eleSep = inEle.children[indx - (indx - sepPri) - 1];
-                if (!util_1.isNullOrUndefined(eleSep) && eleSep.classList.contains(CLS_SEPARATOR) && !dom_1.isVisible(eleSep)) {
+                if (!ej2_base_4.isNullOrUndefined(eleSep) && eleSep.classList.contains(CLS_SEPARATOR) && !ej2_base_2.isVisible(eleSep)) {
                     var sepDisplay = 'none';
@@ -687,3 +764,3 @@ eleSep.style.display = 'inherit';
                         inEle.insertBefore(el, inEle.children[indx - (indx - sepPri)]);
-                        if (!util_1.isNullOrUndefined(prevSep)) {
+                        if (!ej2_base_4.isNullOrUndefined(prevSep)) {
                             prevSep.style.display = '';
@@ -711,3 +788,3 @@ }
             var innerEle = ele.querySelector('.' + CLS_ITEMS);
-            if (util_1.isNullOrUndefined(popNav)) {
+            if (ej2_base_4.isNullOrUndefined(popNav)) {
                 return;
@@ -721,5 +798,5 @@ }
             if (popupEle.children.length === 0) {
-                dom_1.detach(popNav);
+                ej2_base_2.detach(popNav);
                 this.popObj.destroy();
-                dom_1.detach(this.popObj.element);
+                ej2_base_2.detach(this.popObj.element);
                 this.popObj = null;
@@ -741,6 +818,6 @@ ele.setAttribute('aria-haspopup', 'false');
                     var btn = el.children[0];
-                    if (!util_1.isNullOrUndefined(btnText) && el.classList.contains(CLS_TBARTEXT)) {
+                    if (!ej2_base_4.isNullOrUndefined(btnText) && el.classList.contains(CLS_TBARTEXT)) {
                         btnText.style.display = 'none';
                     }
-                    else if (!util_1.isNullOrUndefined(btnText) && el.classList.contains(CLS_POPUPTEXT)) {
+                    else if (!ej2_base_4.isNullOrUndefined(btnText) && el.classList.contains(CLS_POPUPTEXT)) {
                         btnText.style.display = 'block';
@@ -751,3 +828,3 @@ }
                     btn.style.minWidth = '';
-                    if (!util_1.isNullOrUndefined(btnText)) {
+                    if (!ej2_base_4.isNullOrUndefined(btnText)) {
                         btnText.style.display = '';
@@ -761,2 +838,3 @@ }
                 if (elWidth < width || destroy) {
+                    el.style.minWidth = '';
                     if (!el.classList.contains(CLS_POPOVERFLOW)) {
@@ -791,3 +869,3 @@ el.classList.remove(CLS_POPUP);
                     else {
-                        priEleCnt = dom_2.selectAll('.' + CLS_TBAROVERFLOW, this_1.popObj.element).length;
+                        priEleCnt = ej2_base_3.selectAll('.' + CLS_TBAROVERFLOW, this_1.popObj.element).length;
                         innerEle.insertBefore(el, innerEle.children[index - priEleCnt]);
@@ -812,3 +890,3 @@ width -= el.offsetWidth;
             var item = this.element.querySelector('.' + CLS_ITEMS);
-            if (util_1.isNullOrUndefined(item) || !item.classList.contains(CLS_TBARPOS)) {
+            if (ej2_base_4.isNullOrUndefined(item) || !item.classList.contains(CLS_TBARPOS)) {
                 return;
@@ -828,3 +906,3 @@ }
             var item = this.element.querySelector('.' + CLS_ITEMS);
-            if (util_1.isNullOrUndefined(item) || !item.classList.contains(CLS_TBARPOS)) {
+            if (ej2_base_4.isNullOrUndefined(item) || !item.classList.contains(CLS_TBARPOS)) {
                 return;
@@ -850,3 +928,5 @@ }
             var value = (((tbarWid - margin)) - innerItem[1].offsetWidth) / 2;
-            innerItem[1].style.marginLeft = (innerItem[0].offsetWidth + value) + 'px';
+            innerItem[1].removeAttribute('style');
+            var mrgn = (innerItem[0].offsetWidth + value) + 'px';
+            this.enableRtl ? innerItem[1].style.marginRight = mrgn : innerItem[1].style.marginLeft = mrgn;
         };
@@ -856,5 +936,5 @@ Toolbar.prototype.tbarItemAlign = function (item, itemEle, pos) {
             var alignDiv = [];
-            alignDiv.push(dom_2.createElement('div', { className: CLS_TBARLEFT }));
-            alignDiv.push(dom_2.createElement('div', { className: CLS_TBARCENTER }));
-            alignDiv.push(dom_2.createElement('div', { className: CLS_TBARRIGHT }));
+            alignDiv.push(ej2_base_3.createElement('div', { className: CLS_TBARLEFT }));
+            alignDiv.push(ej2_base_3.createElement('div', { className: CLS_TBARCENTER }));
+            alignDiv.push(ej2_base_3.createElement('div', { className: CLS_TBARRIGHT }));
             if (pos === 0 && item.align !== 'left') {
@@ -889,2 +969,3 @@ alignDiv.forEach(function (ele) {
                     _this.tbarEle.push(ele);
+                    ele.setAttribute('aria-disabled', 'false');
                     _this.add(ele, CLS_ITEM);
@@ -901,4 +982,3 @@ }
             if (ele && ele.children.length > 0) {
-                var navEle = dom_2.selectAll('.' + CLS_TBARNAV, ele);
-                itemEleDom = navEle.length > 0 ? ele.children[1] : ele.children[0];
+                itemEleDom = ele.querySelector('.' + CLS_ITEMS);
             }
@@ -910,3 +990,3 @@ if (this.trgtEle != null) {
                 if (!itemEleDom) {
-                    itemEleDom = dom_2.createElement('div', { className: CLS_ITEMS });
+                    itemEleDom = ej2_base_3.createElement('div', { className: CLS_ITEMS });
                 }
@@ -944,7 +1024,21 @@ for (var i = 0; i < items.length; i++) {
             var len = elements.length;
-            if (util_1.isNullOrUndefined(isEnable)) {
+            if (ej2_base_4.isNullOrUndefined(isEnable)) {
                 isEnable = true;
             }
+            var enable = function (isEnable, ele) {
+                if (isEnable) {
+                    ele.classList.remove(CLS_DISABLE);
+                    ele.setAttribute('aria-disabled', 'false');
+                }
+                else {
+                    ele.classList.add(CLS_DISABLE);
+                    ele.setAttribute('aria-disabled', 'true');
+                }
+            };
             if (len && len > 1) {
-                isEnable ? dom_1.removeClass(elements, CLS_DISABLE) : dom_1.addClass(elements, CLS_DISABLE);
+                for (var _i = 0, _a = [].slice.call(elements); _i < _a.length; _i++) {
+                    var ele = _a[_i];
+                    enable(isEnable, ele);
+                }
+                isEnable ? ej2_base_2.removeClass(elements, CLS_DISABLE) : ej2_base_2.addClass(elements, CLS_DISABLE);
             }
@@ -954,3 +1048,3 @@ else {
                 ele = (len && len === 1) ? elements[0] : items;
-                isEnable ? this.remove(ele, CLS_DISABLE) : this.add(ele, CLS_DISABLE);
+                enable(isEnable, ele);
             }
@@ -963,7 +1057,7 @@ };
             var itemAgn = 'left';
-            if (util_1.isNullOrUndefined(index)) {
+            if (ej2_base_4.isNullOrUndefined(index)) {
                 index = 0;
             }
             items.forEach(function (e) {
-                if (!util_1.isNullOrUndefined(e.align) && e.align !== 'left' && itemAgn === 'left') {
+                if (!ej2_base_4.isNullOrUndefined(e.align) && e.align !== 'left' && itemAgn === 'left') {
                     itemAgn = e.align;
@@ -974,6 +1068,10 @@ }
                 var item = items_1[_i];
-                innerItems = dom_2.selectAll('.' + CLS_ITEM, this.element);
+                if (ej2_base_4.isNullOrUndefined(item.type)) {
+                    item.type = 'Button';
+                }
+                innerItems = ej2_base_3.selectAll('.' + CLS_ITEM, this.element);
                 item.align = itemAgn;
                 innerEle = this.renderSubComponent(item);
-                if (this.tbarEle.length > index && innerItems.length > 0) {
+                if (this.tbarEle.length >= index && innerItems.length > 0) {
+                    this.destroyMode();
                     if (this.tbarAlign) {
@@ -983,6 +1081,6 @@ var algIndex = item.align[0] === 'l' ? 0 : item.align[0] === 'c' ? 1 : 2;
                         if (this.scrollModule) {
-                            ele = dom_1.closest(innerItems[0], '.' + CLS_ITEMS + ' .' + CLS_TBARSCROLL).children[algIndex];
+                            ele = ej2_base_2.closest(innerItems[0], '.' + CLS_ITEMS + ' .' + CLS_TBARSCROLL).children[algIndex];
                         }
                         else {
-                            ele = dom_1.closest(innerItems[0], '.' + CLS_ITEMS).children[algIndex];
+                            ele = ej2_base_2.closest(innerItems[0], '.' + CLS_ITEMS).children[algIndex];
                         }
@@ -1008,3 +1106,3 @@ ele.insertBefore(innerEle, ele.children[index]);
             var index;
-            var innerItems = [].slice.call(dom_2.selectAll('.' + CLS_ITEM, this.element));
+            var innerItems = [].slice.call(ej2_base_3.selectAll('.' + CLS_ITEM, this.element));
             if (typeof (elements) === 'number') {
@@ -1020,3 +1118,3 @@ index = parseInt(args.toString(), 10);
                         this.removeItemByIndex(index, innerItems);
-                        innerItems = dom_2.selectAll('.' + CLS_ITEM, this.element);
+                        innerItems = ej2_base_3.selectAll('.' + CLS_ITEM, this.element);
                     }
@@ -1039,3 +1137,3 @@ }
                 }
-                dom_1.detach(innerItems[index]);
+                ej2_base_2.detach(innerItems[index]);
                 this.items.splice(eleIdx, 1);
@@ -1050,3 +1148,3 @@ this.tbarEle.splice(eleIdx, 1);
                 var ele = innerEle.childNodes[0];
-                if (!ele.tagName) {
+                if (!ele.tagName && innerEle.childElementCount === 0) {
                     var templateEle = document.querySelector(templateProp);
@@ -1059,4 +1157,4 @@ innerEle.innerHTML = '';
                 var templateProperty = templateProp;
-                var ele = dom_2.createElement('input');
-                item.id ? (ele.id = item.id) : (ele.id = util_1.getUniqueID('tbr-ipt'));
+                var ele = ej2_base_3.createElement('input');
+                item.id ? (ele.id = item.id) : (ele.id = ej2_base_4.getUniqueID('tbr-ipt'));
                 innerEle.appendChild(ele);
@@ -1069,8 +1167,8 @@ templateProperty.appendTo(ele);
         Toolbar.prototype.buttonRendering = function (item, innerEle) {
-            var dom = dom_2.createElement('button', { className: CLS_TBARBTN });
+            var dom = ej2_base_3.createElement('button', { className: CLS_TBARBTN });
             var textStr = item.text;
             var iconCss;
             var iconPos;
-            item.id ? (dom.id = item.id) : dom.id = util_1.getUniqueID('e-tbr-btn');
-            var btnTxt = dom_2.createElement('div', { className: 'e-tbar-btn-text' });
+            item.id ? (dom.id = item.id) : dom.id = ej2_base_4.getUniqueID('e-tbr-btn');
+            var btnTxt = ej2_base_3.createElement('div', { className: 'e-tbar-btn-text' });
             if (textStr) {
@@ -1096,3 +1194,3 @@ btnTxt.innerHTML = textStr;
             if (item.width) {
-                dom_2.setStyleAttribute(dom, { 'width': util_1.formatUnit(item.width) });
+                ej2_base_3.setStyleAttribute(dom, { 'width': ej2_base_4.formatUnit(item.width) });
             }
@@ -1104,3 +1202,4 @@ return dom;
             var dom;
-            innerEle = dom_2.createElement('div', { className: CLS_ITEM });
+            innerEle = ej2_base_3.createElement('div', { className: CLS_ITEM });
+            innerEle.setAttribute('aria-disabled', 'false');
             if (!this.tbarEle) {
@@ -1158,11 +1257,19 @@ this.tbarEle = [];
         Toolbar.prototype.itemClick = function (e) {
-            this.activeEleRemove(e.currentTarget.firstChild);
+            this.activeEleSwitch(e.currentTarget);
+        };
+        Toolbar.prototype.activeEleSwitch = function (ele) {
+            this.activeEleRemove(ele.firstElementChild);
             this.activeEle.focus();
         };
         Toolbar.prototype.activeEleRemove = function (curEle) {
-            if (!util_1.isNullOrUndefined(this.activeEle)) {
+            if (!ej2_base_4.isNullOrUndefined(this.activeEle)) {
                 this.activeEle.setAttribute('tabindex', '-1');
             }
             this.activeEle = curEle;
-            curEle.removeAttribute('tabindex');
+            if (ej2_base_4.isNullOrUndefined(this.trgtEle) && !curEle.parentElement.classList.contains(CLS_TEMPLATE)) {
+                curEle.removeAttribute('tabindex');
+            }
+            else {
+                this.activeEle.setAttribute('tabindex', '0');
+            }
         };
@@ -1185,2 +1292,5 @@ Toolbar.prototype.getPersistData = function () {
             var checkOverflow = this.checkOverflow(ele, ele.getElementsByClassName(CLS_ITEMS)[0]);
+            if (!checkOverflow && this.scrollModule) {
+                this.destroyHScroll();
+            }
             if (checkOverflow && this.scrollModule && (this.offsetWid === ele.offsetWidth)) {
@@ -1210,3 +1320,4 @@ return;
                     case 'items':
-                        this.destroyHScroll();
+                        this.destroyMode();
+                        this.destroyItems();
                         this.renderItems();
@@ -1217,3 +1328,3 @@ this.renderOverflowMode();
                         var wid = tEle.offsetWidth;
-                        dom_2.setStyleAttribute(tEle, { 'width': util_1.formatUnit(newProp.width) });
+                        ej2_base_3.setStyleAttribute(tEle, { 'width': ej2_base_4.formatUnit(newProp.width) });
                         this.renderOverflowMode();
@@ -1225,12 +1336,6 @@ if (this.popObj && wid < tEle.offsetWidth) {
                     case 'height':
-                        dom_2.setStyleAttribute(this.element, { 'height': util_1.formatUnit(newProp.height) });
+                        ej2_base_3.setStyleAttribute(this.element, { 'height': ej2_base_4.formatUnit(newProp.height) });
                         break;
                     case 'overflowMode':
-                        if (this.scrollModule) {
-                            this.remove(this.scrollModule.element, CLS_RTL);
-                            this.destroyHScroll();
-                        }
-                        if (this.popObj) {
-                            this.popupRefresh(this.popObj.element, true);
-                        }
+                        this.destroyMode();
                         this.renderOverflowMode();
@@ -1243,6 +1348,6 @@ if (this.enableRtl) {
                         newProp.enableRtl ? this.add(tEle, CLS_RTL) : this.remove(tEle, CLS_RTL);
-                        if (!util_1.isNullOrUndefined(this.scrollModule)) {
+                        if (!ej2_base_4.isNullOrUndefined(this.scrollModule)) {
                             newProp.enableRtl ? this.add(this.scrollModule.element, CLS_RTL) : this.remove(this.scrollModule.element, CLS_RTL);
                         }
-                        if (!util_1.isNullOrUndefined(this.popObj)) {
+                        if (!ej2_base_4.isNullOrUndefined(this.popObj)) {
                             newProp.enableRtl ? this.add(this.popObj.element, CLS_RTL) : this.remove(this.popObj.element, CLS_RTL);
@@ -1257,3 +1362,3 @@ }
     __decorate([
-        ej2_base_3.Collection([], Item)
+        ej2_base_4.Collection([], Item)
     ], Toolbar.prototype, "items", void 0);
@@ -1285,6 +1390,6 @@ __decorate([
     Toolbar = __decorate([
-        ej2_base_2.NotifyPropertyChanges
+        ej2_base_5.NotifyPropertyChanges
     ], Toolbar);
     exports.Toolbar = Toolbar;
-    exports.toolbarBuilder = ej2_base_2.CreateBuilder(Toolbar);
+    exports.toolbarBuilder = ej2_base_5.CreateBuilder(Toolbar);
 });

toolbar.d.ts

 /**
  * toolbar
  */
-export * from './src/toolbar';
+export * from './src/toolbar/index';

toolbar.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "./src/toolbar"], function (require, exports, toolbar_1) {
+define(["require", "exports", "./src/toolbar/index"], function (require, exports, index_1) {
     "use strict";
@@ -7,3 +7,3 @@ function __export(m) {
     Object.defineProperty(exports, "__esModule", { value: true });
-    __export(toolbar_1);
+    __export(index_1);
 });

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3335120

increased by21.59%

Number of package files

61

increased by12.96%

Lines of code

41564

increased by21.74%

Published versions last year

39

increased by2.63%

Dependency changes

• Updated@syncfusion/ej2-base@^1.0.14

• Updated@syncfusion/ej2-buttons@^1.0.14

• Updated@syncfusion/ej2-popups@^1.0.14