@syncfusion/ej2-splitbuttons - npm Package Compare versions

Comparing version 16.3.34 to 16.4.40-beta

CHANGELOG.md

@@ -5,2 +5,13 @@ # Changelog
 
+### ProgressButton
+
+#### Breaking Changes
+
+- Type changes done for the following property.
+
+Property Name | Old Type | New Type
+-----|-----|-----
+`animationSettings` | AnimationSettings | AnimationSettingsModel
+`spinSettings` | SpinSettings | SpinSettingsModel
+
 ## 16.3.22 (2018-09-25)
@@ -7,0 +18,0 @@

dist/ej2-splitbuttons.umd.min.js

 /*!
 *  filename: ej2-splitbuttons.umd.min.js
-*  version : 16.3.34
+*  version : 16.4.40-beta
 *  Copyright Syncfusion Inc. 2001 - 2018. All rights reserved.
@@ -10,3 +10,3 @@ *  Use of this code is subject to the terms of our license.
 */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@syncfusion/ej2-base"),require("@syncfusion/ej2-buttons"),require("@syncfusion/ej2-popups")):"function"==typeof define&&define.amd?define(["exports","@syncfusion/ej2-base","@syncfusion/ej2-buttons","@syncfusion/ej2-popups"],t):t(e.ej={},e.ej2Base,e.ej2Buttons,e.ej2Popups)}(this,function(e,t,s,n){"use strict";function i(e,s){for(var n=t.extend({},e),i=0,o=Object.keys(n);i<o.length;i++){var r=o[i];s.indexOf(r)<0&&t.deleteObject(n,r)}return n}var o=function(){var e=function(t,s){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var s in t)t.hasOwnProperty(s)&&(e[s]=t[s])})(t,s)};return function(t,s){function n(){this.constructor=t}e(t,s),t.prototype=null===s?Object.create(s):(n.prototype=s.prototype,new n)}}(),r=function(e,t,s,n){var i,o=arguments.length,r=o<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,s):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,s,n);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(o<3?i(r):o>3?i(t,s,r):i(t,s))||r);return o>3&&r&&Object.defineProperty(t,s,r),r},a=function(e){function s(){return null!==e&&e.apply(this,arguments)||this}return o(s,e),r([t.Property("")],s.prototype,"iconCss",void 0),r([t.Property("")],s.prototype,"id",void 0),r([t.Property(!1)],s.prototype,"separator",void 0),r([t.Property("")],s.prototype,"text",void 0),r([t.Property("")],s.prototype,"url",void 0),s}(t.ChildProperty),p=function(){var e=function(t,s){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var s in t)t.hasOwnProperty(s)&&(e[s]=t[s])})(t,s)};return function(t,s){function n(){this.constructor=t}e(t,s),t.prototype=null===s?Object.create(s):(n.prototype=s.prototype,new n)}}(),l=function(e,t,s,n){var i,o=arguments.length,r=o<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,s):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,s,n);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(o<3?i(r):o>3?i(t,s,r):i(t,s))||r);return o>3&&r&&Object.defineProperty(t,s,r),r},c="e-disabled",h="e-focused",d="e-menu-icon",u="e-item",m="e-dropdown-popup",y="e-rtl",f="e-separator",v="e-vertical",g=function(e){function o(t,s){return e.call(this,t,s)||this}return p(o,e),o.prototype.preRender=function(){},o.prototype.getPersistData=function(){return this.addOnPersist([])},o.prototype.toggle=function(){this.canOpen()?this.openPopUp():this.closePopup()},o.prototype.render=function(){this.initialize(),this.disabled||this.wireEvents()},o.prototype.createPopup=function(){var e,s=this.createElement("div",{className:m,id:this.element.id+"-popup"});document.body.appendChild(s),this.dropDown=new n.Popup(s,{relateTo:this.element,collision:{X:"fit",Y:"flip"},position:{X:"left",Y:"bottom"},targetType:"relative",content:this.target?this.getTargetElement():"",enableRtl:this.enableRtl}),"fixed"===this.dropDown.element.style.position&&this.dropDown.refreshPosition(this.element),this.dropDown.hide(),t.attributes(this.element,(e={},e.role="menu",e["aria-haspopup"]=this.items.length||this.target?"true":"false",e["aria-expanded"]="false",e["aria-owns"]=this.getPopUpElement().id,e.type="button",e)),this.cssClass&&t.addClass([s],this.cssClass.split(" "))},o.prototype.getTargetElement=function(){return"string"==typeof this.target?t.select(this.target):this.target},o.prototype.createItems=function(e){for(var s,n,i,o,r=this.hasIcon(e,"iconCss"),a=this.createElement("ul",{attrs:{tabindex:"0"}}),p=0;p<e.length;p++)n=e[p],i=this.createElement("li",{innerHTML:n.url?"":n.text,className:n.separator?u+" "+f:u,attrs:{role:"menuItem",tabindex:"-1"},id:n.id?n.id:t.getUniqueID("e-"+this.getModuleName()+"-item")}),n.iconCss?(s=this.createElement("span",{className:d+" "+n.iconCss}),i.insertBefore(s,i.childNodes[0])):r&&!n.separator&&i.classList.add("e-blank-icon"),n.url&&i.appendChild(this.createAnchor(n)),o={item:n,element:i},this.trigger("beforeItemRender",o),a.appendChild(i);return a},o.prototype.hasIcon=function(e,t){for(var s=0,n=e.length;s<n;s++)if(e[s][t])return!0;return!1},o.prototype.createAnchor=function(e){return this.createElement("a",{className:"e-menu-text e-menu-url",innerHTML:e.text,attrs:{href:e.url}})},o.prototype.initialize=function(){this.button=new s.Button({iconCss:this.iconCss,iconPosition:this.iconPosition,cssClass:this.cssClass,content:this.content,disabled:this.disabled,enableRtl:this.enableRtl,enablePersistence:this.enablePersistence}),this.button.createElement=this.createElement,this.button.appendTo(this.element),this.element.id||(this.element.id=t.getUniqueID("e-"+this.getModuleName())),this.appendArrowSpan(),this.createPopup(),this.setActiveElem([this.element])},o.prototype.appendArrowSpan=function(){this.element.appendChild(this.createElement("span",{className:"e-btn-icon e-icons e-icon-"+(this.cssClass.indexOf(v)>-1?"bottom":"right")+" e-caret"}))},o.prototype.setActiveElem=function(e){this.activeElem=e},o.prototype.getModuleName=function(){return"dropdown-btn"},o.prototype.canOpen=function(){return this.getPopUpElement().classList.contains("e-popup-close")},o.prototype.destroy=function(){var s=this;if(e.prototype.destroy.call(this),"dropdown-btn"===this.getModuleName()){var n;this.element.querySelector("span.e-caret")&&t.detach(this.element.querySelector("span.e-caret")),this.cssClass&&(n=this.cssClass.split(" ")),this.button.destroy(),n&&t.removeClass([this.element],n),t.removeClass(this.activeElem,["e-active"]),(this.element.getAttribute("class")?["role","aria-haspopup","aria-expanded","aria-owns","type"]:["role","aria-haspopup","aria-expanded","aria-owns","type","class"]).forEach(function(e){s.element.removeAttribute(e)}),this.dropDown.destroy();var i=document.getElementById(this.getPopUpElement().id);i&&(t.removeClass([i],["e-popup-open","e-popup-close"]),t.detach(i)),this.disabled||this.unWireEvents()}},o.prototype.getPopUpElement=function(){return this.dropDown.element},o.prototype.getULElement=function(){return this.getPopUpElement().children[0]},o.prototype.wireEvents=function(){var e=this.getPopUpElement();this.delegateMousedownHandler=this.mousedownHandler.bind(this),t.EventHandler.add(document,"mousedown touchstart",this.delegateMousedownHandler,this),t.EventHandler.add(this.element,"click",this.clickHandler,this),t.EventHandler.add(e,"click",this.clickHandler,this),t.EventHandler.add(this.element,"keydown",this.keyBoardHandler,this),t.EventHandler.add(e,"keydown",this.keyBoardHandler,this),this.rippleFn=t.rippleEffect(e,{selector:"."+u})},o.prototype.keyBoardHandler=function(e){if(e.target!==this.element||9!==e.keyCode&&(e.altKey||40!==e.keyCode)&&38!==e.keyCode)switch(e.keyCode){case 38:case 40:!e.altKey||38!==e.keyCode&&40!==e.keyCode?this.upDownKeyHandler(e):this.keyEventHandler(e);break;case 9:case 13:case 27:case 32:this.keyEventHandler(e)}},o.prototype.upDownKeyHandler=function(e){if(!this.target||38!==e.keyCode&&40!==e.keyCode){e.preventDefault();var s=this.getULElement(),n=40===e.keyCode?0:s.childElementCount-1,i=n,o=null;this.removeCustomSelection();for(var r=0,a=s.children.length;r<a;r++)s.children[r].classList.contains(h)&&(i=r,(o=s.children[r]).classList.remove(h),40===e.keyCode?i++:i--,i===(40===e.keyCode?s.childElementCount:-1)&&(i=n));o=s.children[i],-1!==(i=this.isValidLI(o,i,e.keyCode))&&(t.addClass([s.children[i]],h),s.children[i].focus())}},o.prototype.removeCustomSelection=function(){var e=this.getULElement().querySelector(".e-selected");e&&e.classList.remove("e-selected")},o.prototype.isValidLI=function(e,t,s,n){if(void 0===n&&(n=0),(e.classList.contains(f)||e.classList.contains(c))&&(t===(40===s?this.items.length-1:0)?t=40===s?0:this.items.length-1:40===s?t++:t--),(e=this.getULElement().children[t]).classList.contains(f)||e.classList.contains(c)){if(++n===this.items.length)return t=-1;t=this.isValidLI(e,t,s,n)}return t},o.prototype.keyEventHandler=function(e){(!this.target||13!==e.keyCode&&9!==e.keyCode)&&(9!==e.keyCode&&e.preventDefault(),27===e.keyCode||38===e.keyCode||9===e.keyCode?this.canOpen()||this.closePopup(e,this.element):this.clickHandler(e))},o.prototype.getLI=function(e){return"LI"===e.tagName?e:t.closest(e,"li")},o.prototype.mousedownHandler=function(e){var s=e.target;this.canOpen()||t.closest(s,"#"+this.getPopUpElement().id)||t.closest(s,"#"+this.element.id)||this.closePopup(e)},o.prototype.clickHandler=function(e){var s=e.target,n=this.canOpen();if(t.closest(s,"#"+this.element.id))n?this.openPopUp(e):this.closePopup(e,this.activeElem[0]);else if(t.closest(s,"#"+this.getPopUpElement().id)){var i=void 0,o=void 0,r=void 0,a=this.getLI(s);a&&(o=Array.prototype.indexOf.call(this.getULElement().children,a),(r=this.items[o])&&(i={element:a,item:r},this.trigger("select",i)),this.closePopup(e,this.activeElem[0]))}},o.prototype.openPopUp=function(e){void 0===e&&(e=null),this.target||this.getPopUpElement().appendChild(this.createItems(this.items));var s=this.getULElement(),n={element:s,items:this.items,event:e,cancel:!1};if(this.trigger("beforeOpen",n),!n.cancel){this.dropDown.show(null,this.element),t.addClass([this.element],"e-active"),this.element.setAttribute("aria-expanded","true"),s.focus();var i={element:s,items:this.items};this.trigger("open",i)}},o.prototype.closePopup=function(e,s){void 0===e&&(e=null);var n=this.getULElement(),i={element:n,items:this.items,event:e,cancel:!1};if(this.trigger("beforeClose",i),!i.cancel){this.removeCustomSelection(),this.dropDown.hide(),t.removeClass(this.activeElem,"e-active"),this.element.setAttribute("aria-expanded","false"),s&&s.focus();var o={element:n,items:this.items};this.trigger("close",o),!this.target&&n&&t.detach(n)}},o.prototype.unWireEvents=function(){t.EventHandler.remove(document,"mousedown touchstart",this.delegateMousedownHandler),t.EventHandler.remove(this.element,"click",this.clickHandler),t.EventHandler.remove(this.getPopUpElement(),"click",this.clickHandler),t.EventHandler.remove(this.element,"keydown",this.keyBoardHandler),t.EventHandler.remove(this.getPopUpElement(),"keydown",this.keyBoardHandler),this.rippleFn()},o.prototype.onPropertyChanged=function(e,s){this.button.setProperties(i(e,["content","cssClass","iconCss","iconPosition","disabled","enableRtl"]));for(var n=this.getPopUpElement(),o=0,r=Object.keys(e);o<r.length;o++){switch(r[o]){case"content":this.element.querySelector("span.e-caret")||this.appendArrowSpan();break;case"disabled":e.disabled?(this.unWireEvents(),this.canOpen()||this.closePopup()):this.wireEvents();break;case"cssClass":if(e.cssClass.indexOf(v)>-1){var a=this.element.querySelector("span.e-caret");t.classList(a,["e-icon-bottom"],["e-icon-right"])}s.cssClass&&t.removeClass([n],s.cssClass.split(" ")),e.cssClass&&t.addClass([n],e.cssClass.split(" "));break;case"enableRtl":n.classList.toggle(y);break;case"target":this.target=e.target,t.detach(this.getULElement()),n.appendChild(this.getTargetElement()),this.dropDown.content=this.getTargetElement();break;case"items":this.dropDown.refresh(),n.classList.contains("e-popup-open")&&t.classList(n,["e-popup-close"],["e-popup-open"])}}},l([t.Property("")],o.prototype,"content",void 0),l([t.Property("")],o.prototype,"cssClass",void 0),l([t.Property(!1)],o.prototype,"disabled",void 0),l([t.Property("")],o.prototype,"iconCss",void 0),l([t.Property("Left")],o.prototype,"iconPosition",void 0),l([t.Collection([],a)],o.prototype,"items",void 0),l([t.Property("")],o.prototype,"target",void 0),l([t.Event()],o.prototype,"beforeItemRender",void 0),l([t.Event()],o.prototype,"beforeOpen",void 0),l([t.Event()],o.prototype,"beforeClose",void 0),l([t.Event()],o.prototype,"close",void 0),l([t.Event()],o.prototype,"open",void 0),l([t.Event()],o.prototype,"select",void 0),l([t.Event()],o.prototype,"created",void 0),o=l([t.NotifyPropertyChanges],o)}(t.Component),b=function(){var e=function(t,s){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var s in t)t.hasOwnProperty(s)&&(e[s]=t[s])})(t,s)};return function(t,s){function n(){this.constructor=t}e(t,s),t.prototype=null===s?Object.create(s):(n.prototype=s.prototype,new n)}}(),C=function(e,t,s,n){var i,o=arguments.length,r=o<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,s):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,s,n);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(o<3?i(r):o>3?i(t,s,r):i(t,s))||r);return o>3&&r&&Object.defineProperty(t,s,r),r},E="EJS-SPLITBUTTON",P=function(e){function n(t,s){return e.call(this,t,s)||this}return b(n,e),n.prototype.preRender=function(){var e=this.element;if(e.tagName===E){for(var s=t.getValue("ej2_instances",e),n=this.createElement("button",{attrs:{type:"button"}}),i=this.createElement(E,{className:"e-"+this.getModuleName()+"-wrapper"}),o=0,r=e.attributes.length;o<r;o++)n.setAttribute(e.attributes[o].nodeName,e.attributes[o].nodeValue);e.parentNode.insertBefore(i,e),t.detach(e),e=n,i.appendChild(e),t.setValue("ej2_instances",s,e),this.wrapper=i,this.element=e}this.element.id||(this.element.id=t.getUniqueID("e-"+this.getModuleName()))},n.prototype.render=function(){this.initWrapper(),this.createPrimaryButton(),this.createSecondaryButton(),this.setActiveElem([this.element,this.secondaryBtnObj.element]),this.setAria(),this.wireEvents()},n.prototype.initWrapper=function(){this.wrapper||(this.wrapper=this.createElement("div",{className:"e-"+this.getModuleName()+"-wrapper"}),this.element.parentNode.insertBefore(this.wrapper,this.element)),this.element.classList.remove("e-"+this.getModuleName()),this.enableRtl&&this.wrapper.classList.add("e-rtl"),this.cssClass&&t.addClass([this.wrapper],this.cssClass.split(" "))},n.prototype.createPrimaryButton=function(){var e={cssClass:this.cssClass,enableRtl:this.enableRtl,iconCss:this.iconCss,iconPosition:this.iconPosition,content:this.content,disabled:this.disabled};this.primaryBtnObj=new s.Button(e),this.primaryBtnObj.createElement=this.createElement,this.primaryBtnObj.appendTo(this.element),this.element.classList.add("e-"+this.getModuleName()),this.element.type="button",this.wrapper.appendChild(this.element)},n.prototype.createSecondaryButton=function(){var e=this,s=this.createElement("button",{className:"e-icon-btn",attrs:{tabindex:"-1"},id:this.element.id+"_dropdownbtn"});this.wrapper.appendChild(s);var n={cssClass:this.cssClass,disabled:this.disabled,enableRtl:this.enableRtl,items:this.items,target:this.target,beforeItemRender:function(t){e.trigger("beforeItemRender",t)},beforeOpen:function(t){e.trigger("beforeOpen",t)},beforeClose:function(t){e.trigger("beforeClose",t)},open:function(t){e.trigger("open",t)},close:function(t){e.trigger("close",t)},select:function(t){e.trigger("select",t)}};this.secondaryBtnObj=new g(n),this.secondaryBtnObj.createElement=this.createElement,this.secondaryBtnObj.appendTo(s),this.secondaryBtnObj.dropDown.relateTo=this.wrapper,this.dropDown=this.secondaryBtnObj.dropDown,this.secondaryBtnObj.activeElem=[this.element,this.secondaryBtnObj.element],t.EventHandler.remove(this.getPopUpElement(),"keydown",this.secondaryBtnObj.keyBoardHandler),this.secondaryBtnObj.element.querySelector(".e-btn-icon").classList.remove("e-icon-right")},n.prototype.setAria=function(){t.attributes(this.element,{role:"listbox","aria-expanded":"false","aria-haspopup":"true","aria-label":this.element.textContent+" splitbutton","aria-owns":this.secondaryBtnObj.dropDown.element.id})},n.prototype.getModuleName=function(){return"split-btn"},n.prototype.toggle=function(){this.secondaryBtnObj.toggle()},n.prototype.destroy=function(){var s=this,n=["e-rtl"],i=document.getElementById(this.element.id);this.cssClass&&(n=n.concat(this.cssClass.split(" "))),i&&i.parentElement===this.wrapper&&(this.wrapper.tagName===E?(this.wrapper.innerHTML="",t.removeClass([this.wrapper],["e-rtl","e-"+this.getModuleName()+"-wrapper"]),t.removeClass([this.wrapper],this.cssClass.split(" "))):(t.removeClass([this.element],n),["role","aria-label","aria-haspopup","aria-expanded","aria-owns","type"].forEach(function(e){s.element.removeAttribute(e)}),this.wrapper.parentNode.insertBefore(this.element,this.wrapper),t.remove(this.wrapper)),this.unWireEvents()),this.primaryBtnObj.destroy(),this.secondaryBtnObj.destroy(),e.prototype.destroy.call(this),this.element.getAttribute("class")||this.element.removeAttribute("class")},n.prototype.wireEvents=function(){t.EventHandler.add(this.element,"click",this.primaryBtnClickHandler,this),t.EventHandler.add(this.getPopUpElement(),"keydown",this.keyBoardHandler,this),new t.KeyboardEvents(this.element,{keyAction:this.btnKeyBoardHandler.bind(this),keyConfigs:{altdownarrow:"alt+downarrow"}})},n.prototype.unWireEvents=function(){t.EventHandler.remove(this.element,"click",this.primaryBtnClickHandler),t.getInstance(this.element,t.KeyboardEvents).destroy()},n.prototype.primaryBtnClickHandler=function(){this.trigger("click",{element:this.element})},n.prototype.btnKeyBoardHandler=function(e){switch(e.action){case"altdownarrow":this.clickHandler(e)}},n.prototype.onPropertyChanged=function(e,s){var n=["content","iconCss","iconPosition","cssClass","disabled","enableRtl"];this.primaryBtnObj.setProperties(i(e,n)),n=["items","beforeOpen","beforeItemRender","select","open","close","cssClass","disabled","enableRtl"],this.secondaryBtnObj.setProperties(i(e,n));for(var o=0,r=Object.keys(e);o<r.length;o++){switch(r[o]){case"cssClass":s.cssClass&&t.removeClass([this.wrapper],s.cssClass.split(" ")),t.addClass([this.wrapper],e.cssClass.split(" "));break;case"enableRtl":e.enableRtl?t.addClass([this.wrapper],"e-rtl"):t.removeClass([this.wrapper],"e-rtl")}}},C([t.Property("")],n.prototype,"content",void 0),C([t.Property("")],n.prototype,"cssClass",void 0),C([t.Property(!1)],n.prototype,"disabled",void 0),C([t.Property("")],n.prototype,"iconCss",void 0),C([t.Property("Left")],n.prototype,"iconPosition",void 0),C([t.Collection([],a)],n.prototype,"items",void 0),C([t.Property("")],n.prototype,"target",void 0),C([t.Event()],n.prototype,"beforeItemRender",void 0),C([t.Event()],n.prototype,"beforeOpen",void 0),C([t.Event()],n.prototype,"beforeClose",void 0),C([t.Event()],n.prototype,"click",void 0),C([t.Event()],n.prototype,"close",void 0),C([t.Event()],n.prototype,"open",void 0),C([t.Event()],n.prototype,"select",void 0),C([t.Event()],n.prototype,"created",void 0),n=C([t.NotifyPropertyChanges],n)}(g),w=function(){var e=function(t,s){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var s in t)t.hasOwnProperty(s)&&(e[s]=t[s])})(t,s)};return function(t,s){function n(){this.constructor=t}e(t,s),t.prototype=null===s?Object.create(s):(n.prototype=s.prototype,new n)}}(),k=function(e,t,s,n){var i,o=arguments.length,r=o<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,s):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,s,n);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(o<3?i(r):o>3?i(t,s,r):i(t,s))||r);return o>3&&r&&Object.defineProperty(t,s,r),r},O="e-hide-spinner",B="e-progress",j="e-progress-active",L="e-btn-content",H=function(e){function s(t,s){var n=e.call(this,t,s)||this;return n.step=1,n}return w(s,e),s.prototype.preRender=function(){e.prototype.preRender.call(this)},s.prototype.render=function(){e.prototype.render.call(this),this.init(),this.wireEvents(),this.setAria()},s.prototype.start=function(e){this.isPaused=!1,this.startProgress(e||this.percent,this.progressTime)},s.prototype.stop=function(){this.isPaused=!0,cancelAnimationFrame(this.timerId)},s.prototype.getModuleName=function(){return"progress-btn"},s.prototype.destroy=function(){var s=this,n=[O,j,"e-round-corner","e-"+e.prototype.getModuleName.call(this),"e-spin-"+this.spinSettings.position.toLowerCase()];e.prototype.destroy.call(this),this.unWireEvents(),this.element.innerHTML="",this.cssClass&&(n=n.concat(this.cssClass.split(" "))),t.removeClass([this.element],n),(this.element.getAttribute("class")?["aria-label","aria-valuemin","aria-valuemax","aria-valuenow"]:["aria-label","aria-valuemin","aria-valuemax","aria-valuenow","class"]).forEach(function(e){s.element.removeAttribute(e)}),this.disabled&&this.element.removeAttribute("disabled")},s.prototype.init=function(){this.element.classList.add("e-"+e.prototype.getModuleName.call(this)),this.setContent(),this.createSpinner(),this.enableProgress&&this.createProgress()},s.prototype.createSpinner=function(){var e=this.createElement("span",{className:"e-spinner"});this.setSpinPosition(e),n.createSpinner({target:e,width:this.spinSettings.width||16,template:this.spinSettings.template},this.createElement)},s.prototype.setSpinPosition=function(e){var t=this.spinSettings.position||"Left";"Left"===t||"Top"===t?this.element.insertBefore(e,this.element.getElementsByClassName(L)[0]):this.element.appendChild(e),this.element.classList.add("e-spin-"+t.toLowerCase())},s.prototype.createProgress=function(){this.element.appendChild(this.createElement("span",{className:B}))},s.prototype.setContent=function(){var e=this.element.innerHTML;this.element.innerHTML="",this.element.appendChild(this.createElement("span",{className:L,innerHTML:e}))},s.prototype.clickHandler=function(){this.element.classList.contains(j)||this.startProgress()},s.prototype.startProgress=function(e,t){var s=this,i=this.element.classList,o=i.contains("e-vertical");i.add(j),i.contains(O)||(n.showSpinner(this.element),this.enableProgress||setTimeout(function(){s.hideSpin()},this.duration)),this.enableProgress&&this.startAnimate(Date.now(),t||0,t?Date.now()-1*this.duration/100:Date.now(),e||0,0,this.step,0,o),this.startContAnimate()},s.prototype.startAnimate=function(e,t,s,n,i,o,r,a){var p=this;try{var l,c=e-s,h=this.duration*o/100,d=c?c<h?c-h:c%h:0;this.progressTime=t=t+c-d,s=e-d,n+=(c-d)/this.duration*100,l={percent:i=(t-r)%h==0||100===n?n:i,currentDuration:t,step:o},0===n?this.trigger("begin",l):100===n||t===this.duration?this.trigger("end",l):this.trigger("progress",l),n!==l.percent&&l.percent!==i&&(n=l.percent),this.percent=n,this.step=l.step,(t-r)%(this.duration*l.step/100)!=0&&100!==n||(this.timerId=requestAnimationFrame(function(){p.element.getElementsByClassName(B)[0].style[a?"height":"width"]=n+"%",p.element.setAttribute("aria-valuenow",n.toString())}),i=n,r=t),this.isPaused||(t<this.duration&&n<100?setTimeout(function(){p.startAnimate(Date.now(),t,s,n,i,l.step,r,a)},this.duration/100-d):setTimeout(function(){p.progressTime=p.percent=0,p.element.getElementsByClassName(B)[0].style[a?"height":"width"]="0%",p.element.setAttribute("aria-valuenow","0"),p.hideSpin()},100))}catch(e){cancelAnimationFrame(this.timerId),this.trigger("fail",e)}},s.prototype.startContAnimate=function(){var e=this,s=this.element.getElementsByClassName(L)[0];"None"!==this.animationSettings.effect?new t.Animation({}).animate(s,{duration:this.animationSettings.duration,name:"Progress"+this.animationSettings.effect,timingFunction:this.animationSettings.easing,begin:function(){"Center"===e.spinSettings.position&&e.setSpinnerSize()},end:function(){s.classList.add("e-animate-end")}}):"Center"===this.spinSettings.position&&this.setSpinnerSize()},s.prototype.setSpinnerSize=function(){var e=this.element.getElementsByClassName(L)[0],t=this.element.getElementsByClassName("e-spinner")[0];t.style.width=Math.max(t.offsetWidth,e.offsetWidth)+"px",t.style.height=Math.max(t.offsetHeight,e.offsetHeight)+"px",e.classList.add("e-cont-animate")},s.prototype.hideSpin=function(){var e=this.element.getElementsByClassName(L)[0];if(this.element.classList.contains(O)||n.hideSpinner(this.element),this.element.classList.remove(j),"None"!==this.animationSettings.effect&&e.classList.remove("e-animate-end"),"Center"===this.spinSettings.position){var t=this.element.getElementsByClassName("e-spinner")[0];e.classList.remove("e-cont-animate"),t.style.width="auto",t.style.height="auto"}},s.prototype.setIconSpan=function(){var e=this.element.getElementsByClassName(L)[0],t=this.element.getElementsByClassName("e-btn-icon")[0];!e.childNodes[0]||"Left"!==this.iconPosition&&"Top"!==this.iconPosition?e.appendChild(t):e.insertBefore(t,e.childNodes[0])},s.prototype.setAria=function(){t.attributes(this.element,{"aria-label":this.element.textContent+" progress","aria-valuemin":"0","aria-valuemax":"100","aria-valuenow":"0"})},s.prototype.wireEvents=function(){t.EventHandler.add(this.element,"click",this.clickHandler,this)},s.prototype.unWireEvents=function(){t.EventHandler.remove(this.element,"click",this.clickHandler)},s.prototype.onPropertyChanged=function(s,n){e.prototype.onPropertyChanged.call(this,s,n);for(var i=0,o=Object.keys(s);i<o.length;i++){switch(o[i]){case"content":this.setContent(),this.createSpinner(),this.enableProgress&&this.createProgress(),this.element.setAttribute("aria-label",this.element.textContent+" progress");break;case"iconCss":n.iconCss||this.setIconSpan();break;case"iconPosition":this.setIconSpan();break;case"enableProgress":s.enableProgress?this.createProgress():t.remove(this.element.getElementsByClassName(B)[0])}}},k([t.Property(!1)],s.prototype,"enableProgress",void 0),k([t.Property(2e3)],s.prototype,"duration",void 0),k([t.Property("Left")],s.prototype,"iconPosition",void 0),k([t.Property("")],s.prototype,"iconCss",void 0),k([t.Property(!1)],s.prototype,"disabled",void 0),k([t.Property(!1)],s.prototype,"isPrimary",void 0),k([t.Property("")],s.prototype,"cssClass",void 0),k([t.Property("")],s.prototype,"content",void 0),k([t.Property(!1)],s.prototype,"isToggle",void 0),k([t.Property({template:null,width:16,position:"Left"})],s.prototype,"spinSettings",void 0),k([t.Property({duration:400,effect:"None",easing:"ease"})],s.prototype,"animationSettings",void 0),k([t.Event()],s.prototype,"created",void 0),k([t.Event()],s.prototype,"begin",void 0),k([t.Event()],s.prototype,"progress",void 0),k([t.Event()],s.prototype,"end",void 0),k([t.Event()],s.prototype,"fail",void 0),s=k([t.NotifyPropertyChanges],s)}(s.Button);e.getModel=i,e.Item=a,e.DropDownButton=g,e.SplitButton=P,e.createButtonGroup=function(e,n,i){void 0===n&&(n={});var o,r,a,p;t.isNullOrUndefined(i)&&(i=t.createElement);var l=document.querySelector(e);t.addClass([l],["e-btn-group"]),l.setAttribute("role","group");var c=l.children;n.buttons=n.buttons||[];for(var h=0,d=0;d<c.length;h++,d++)o=c[d],null!==(p=n.buttons[h])&&("BUTTON"===o.tagName?r=o:(r=i("label"),(a=c[d+1])?l.insertBefore(r,a):l.appendChild(r),o.id&&r.setAttribute("for",o.id),p&&p.disabled&&(o.disabled=!0),d++),n.cssClass&&p&&!p.cssClass&&(p.cssClass=n.cssClass),new s.Button(p||{},r));return l},e.ProgressButton=H,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@syncfusion/ej2-base"),require("@syncfusion/ej2-buttons"),require("@syncfusion/ej2-popups")):"function"==typeof define&&define.amd?define(["exports","@syncfusion/ej2-base","@syncfusion/ej2-buttons","@syncfusion/ej2-popups"],t):t(e.ej={},e.ej2Base,e.ej2Buttons,e.ej2Popups)}(this,function(e,t,n,s){"use strict";function i(e,n){for(var s=t.extend({},e),i=0,o=Object.keys(s);i<o.length;i++){var r=o[i];n.indexOf(r)<0&&t.deleteObject(s,r)}return s}var o=function(){var e=function(t,n){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(t,n)};return function(t,n){function s(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(s.prototype=n.prototype,new s)}}(),r=function(e,t,n,s){var i,o=arguments.length,r=o<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,n):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,s);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(o<3?i(r):o>3?i(t,n,r):i(t,n))||r);return o>3&&r&&Object.defineProperty(t,n,r),r},a=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return o(n,e),r([t.Property("")],n.prototype,"iconCss",void 0),r([t.Property("")],n.prototype,"id",void 0),r([t.Property(!1)],n.prototype,"separator",void 0),r([t.Property("")],n.prototype,"text",void 0),r([t.Property("")],n.prototype,"url",void 0),n}(t.ChildProperty),p=function(){var e=function(t,n){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(t,n)};return function(t,n){function s(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(s.prototype=n.prototype,new s)}}(),l=function(e,t,n,s){var i,o=arguments.length,r=o<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,n):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,s);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(o<3?i(r):o>3?i(t,n,r):i(t,n))||r);return o>3&&r&&Object.defineProperty(t,n,r),r},c="e-disabled",h="e-focused",d="e-menu-icon",u="e-item",m="e-dropdown-popup",y="e-rtl",f="e-separator",v="e-vertical",g=function(e){function o(t,n){return e.call(this,t,n)||this}return p(o,e),o.prototype.preRender=function(){},o.prototype.getPersistData=function(){return this.addOnPersist([])},o.prototype.toggle=function(){this.canOpen()?this.openPopUp():this.closePopup()},o.prototype.render=function(){this.initialize(),this.disabled||this.wireEvents()},o.prototype.createPopup=function(){var e,n=this.createElement("div",{className:m,id:this.element.id+"-popup"});document.body.appendChild(n),this.dropDown=new s.Popup(n,{relateTo:this.element,collision:{X:"fit",Y:"flip"},position:{X:"left",Y:"bottom"},targetType:"relative",content:this.target?this.getTargetElement():"",enableRtl:this.enableRtl}),"fixed"===this.dropDown.element.style.position&&this.dropDown.refreshPosition(this.element),this.dropDown.hide(),t.attributes(this.element,(e={},e.role="menu",e["aria-haspopup"]=this.items.length||this.target?"true":"false",e["aria-expanded"]="false",e["aria-owns"]=this.getPopUpElement().id,e.type="button",e)),this.cssClass&&t.addClass([n],this.cssClass.split(" "))},o.prototype.getTargetElement=function(){return"string"==typeof this.target?t.select(this.target):this.target},o.prototype.createItems=function(e){for(var n,s,i,o,r=this.hasIcon(e,"iconCss"),a=this.createElement("ul",{attrs:{tabindex:"0"}}),p=0;p<e.length;p++)s=e[p],i=this.createElement("li",{innerHTML:s.url?"":s.text,className:s.separator?u+" "+f:u,attrs:{role:"menuItem",tabindex:"-1"},id:s.id?s.id:t.getUniqueID("e-"+this.getModuleName()+"-item")}),s.iconCss?(n=this.createElement("span",{className:d+" "+s.iconCss}),i.insertBefore(n,i.childNodes[0])):r&&!s.separator&&i.classList.add("e-blank-icon"),s.url&&i.appendChild(this.createAnchor(s)),o={item:s,element:i},this.trigger("beforeItemRender",o),a.appendChild(i);return a},o.prototype.hasIcon=function(e,t){for(var n=0,s=e.length;n<s;n++)if(e[n][t])return!0;return!1},o.prototype.createAnchor=function(e){return this.createElement("a",{className:"e-menu-text e-menu-url",innerHTML:e.text,attrs:{href:e.url}})},o.prototype.initialize=function(){this.button=new n.Button({iconCss:this.iconCss,iconPosition:this.iconPosition,cssClass:this.cssClass,content:this.content,disabled:this.disabled,enableRtl:this.enableRtl,enablePersistence:this.enablePersistence}),this.button.createElement=this.createElement,this.button.appendTo(this.element),this.element.id||(this.element.id=t.getUniqueID("e-"+this.getModuleName())),this.appendArrowSpan(),this.createPopup(),this.setActiveElem([this.element])},o.prototype.appendArrowSpan=function(){this.element.appendChild(this.createElement("span",{className:"e-btn-icon e-icons e-icon-"+(this.cssClass.indexOf(v)>-1?"bottom":"right")+" e-caret"}))},o.prototype.setActiveElem=function(e){this.activeElem=e},o.prototype.getModuleName=function(){return"dropdown-btn"},o.prototype.canOpen=function(){return this.getPopUpElement().classList.contains("e-popup-close")},o.prototype.destroy=function(){var n=this;if(e.prototype.destroy.call(this),"dropdown-btn"===this.getModuleName()){var s;this.element.querySelector("span.e-caret")&&t.detach(this.element.querySelector("span.e-caret")),this.cssClass&&(s=this.cssClass.split(" ")),this.button.destroy(),s&&t.removeClass([this.element],s),t.removeClass(this.activeElem,["e-active"]),(this.element.getAttribute("class")?["role","aria-haspopup","aria-expanded","aria-owns","type"]:["role","aria-haspopup","aria-expanded","aria-owns","type","class"]).forEach(function(e){n.element.removeAttribute(e)}),this.dropDown.destroy();var i=document.getElementById(this.getPopUpElement().id);i&&(t.removeClass([i],["e-popup-open","e-popup-close"]),t.detach(i)),this.disabled||this.unWireEvents()}},o.prototype.getPopUpElement=function(){return this.dropDown.element},o.prototype.getULElement=function(){return this.getPopUpElement().children[0]},o.prototype.wireEvents=function(){var e=this.getPopUpElement();this.delegateMousedownHandler=this.mousedownHandler.bind(this),t.EventHandler.add(document,"mousedown touchstart",this.delegateMousedownHandler,this),t.EventHandler.add(this.element,"click",this.clickHandler,this),t.EventHandler.add(e,"click",this.clickHandler,this),t.EventHandler.add(this.element,"keydown",this.keyBoardHandler,this),t.EventHandler.add(e,"keydown",this.keyBoardHandler,this),this.rippleFn=t.rippleEffect(e,{selector:"."+u})},o.prototype.keyBoardHandler=function(e){if(e.target!==this.element||9!==e.keyCode&&(e.altKey||40!==e.keyCode)&&38!==e.keyCode)switch(e.keyCode){case 38:case 40:!e.altKey||38!==e.keyCode&&40!==e.keyCode?this.upDownKeyHandler(e):this.keyEventHandler(e);break;case 9:case 13:case 27:case 32:this.keyEventHandler(e)}},o.prototype.upDownKeyHandler=function(e){if(!this.target||38!==e.keyCode&&40!==e.keyCode){e.preventDefault();var n=this.getULElement(),s=40===e.keyCode?0:n.childElementCount-1,i=s,o=null;this.removeCustomSelection();for(var r=0,a=n.children.length;r<a;r++)n.children[r].classList.contains(h)&&(i=r,(o=n.children[r]).classList.remove(h),40===e.keyCode?i++:i--,i===(40===e.keyCode?n.childElementCount:-1)&&(i=s));o=n.children[i],-1!==(i=this.isValidLI(o,i,e.keyCode))&&(t.addClass([n.children[i]],h),n.children[i].focus())}},o.prototype.removeCustomSelection=function(){var e=this.getULElement().querySelector(".e-selected");e&&e.classList.remove("e-selected")},o.prototype.isValidLI=function(e,t,n,s){if(void 0===s&&(s=0),(e.classList.contains(f)||e.classList.contains(c))&&(t===(40===n?this.items.length-1:0)?t=40===n?0:this.items.length-1:40===n?t++:t--),(e=this.getULElement().children[t]).classList.contains(f)||e.classList.contains(c)){if(++s===this.items.length)return t=-1;t=this.isValidLI(e,t,n,s)}return t},o.prototype.keyEventHandler=function(e){(!this.target||13!==e.keyCode&&9!==e.keyCode)&&(9!==e.keyCode&&e.preventDefault(),27===e.keyCode||38===e.keyCode||9===e.keyCode?this.canOpen()||this.closePopup(e,this.element):this.clickHandler(e))},o.prototype.getLI=function(e){return"LI"===e.tagName?e:t.closest(e,"li")},o.prototype.mousedownHandler=function(e){var n=e.target;this.canOpen()||t.closest(n,"#"+this.getPopUpElement().id)||t.closest(n,"#"+this.element.id)||this.closePopup(e)},o.prototype.clickHandler=function(e){var n=e.target,s=this.canOpen();if(t.closest(n,"#"+this.element.id))s?this.openPopUp(e):this.closePopup(e,this.activeElem[0]);else if(t.closest(n,"#"+this.getPopUpElement().id)){var i=void 0,o=void 0,r=void 0,a=this.getLI(n);a&&(o=Array.prototype.indexOf.call(this.getULElement().children,a),(r=this.items[o])&&(i={element:a,item:r},this.trigger("select",i)),this.closePopup(e,this.activeElem[0]))}},o.prototype.openPopUp=function(e){void 0===e&&(e=null),this.target||this.getPopUpElement().appendChild(this.createItems(this.items));var n=this.getULElement(),s={element:n,items:this.items,event:e,cancel:!1};if(this.trigger("beforeOpen",s),!s.cancel){this.dropDown.show(null,this.element),t.addClass([this.element],"e-active"),this.element.setAttribute("aria-expanded","true"),n.focus();var i={element:n,items:this.items};this.trigger("open",i)}},o.prototype.closePopup=function(e,n){void 0===e&&(e=null);var s=this.getULElement(),i={element:s,items:this.items,event:e,cancel:!1};if(this.trigger("beforeClose",i),!i.cancel){this.removeCustomSelection(),this.dropDown.hide(),t.removeClass(this.activeElem,"e-active"),this.element.setAttribute("aria-expanded","false"),n&&n.focus();var o={element:s,items:this.items};this.trigger("close",o),!this.target&&s&&t.detach(s)}},o.prototype.unWireEvents=function(){t.EventHandler.remove(document,"mousedown touchstart",this.delegateMousedownHandler),t.EventHandler.remove(this.element,"click",this.clickHandler),t.EventHandler.remove(this.getPopUpElement(),"click",this.clickHandler),t.EventHandler.remove(this.element,"keydown",this.keyBoardHandler),t.EventHandler.remove(this.getPopUpElement(),"keydown",this.keyBoardHandler),this.rippleFn()},o.prototype.onPropertyChanged=function(e,n){this.button.setProperties(i(e,["content","cssClass","iconCss","iconPosition","disabled","enableRtl"]));for(var s=this.getPopUpElement(),o=0,r=Object.keys(e);o<r.length;o++){switch(r[o]){case"content":this.element.querySelector("span.e-caret")||this.appendArrowSpan();break;case"disabled":e.disabled?(this.unWireEvents(),this.canOpen()||this.closePopup()):this.wireEvents();break;case"cssClass":if(e.cssClass.indexOf(v)>-1){var a=this.element.querySelector("span.e-caret");t.classList(a,["e-icon-bottom"],["e-icon-right"])}n.cssClass&&t.removeClass([s],n.cssClass.split(" ")),e.cssClass&&t.addClass([s],e.cssClass.split(" "));break;case"enableRtl":s.classList.toggle(y);break;case"target":this.target=e.target,t.detach(this.getULElement()),s.appendChild(this.getTargetElement()),this.dropDown.content=this.getTargetElement();break;case"items":this.dropDown.refresh(),s.classList.contains("e-popup-open")&&t.classList(s,["e-popup-close"],["e-popup-open"])}}},l([t.Property("")],o.prototype,"content",void 0),l([t.Property("")],o.prototype,"cssClass",void 0),l([t.Property(!1)],o.prototype,"disabled",void 0),l([t.Property("")],o.prototype,"iconCss",void 0),l([t.Property("Left")],o.prototype,"iconPosition",void 0),l([t.Collection([],a)],o.prototype,"items",void 0),l([t.Property("")],o.prototype,"target",void 0),l([t.Event()],o.prototype,"beforeItemRender",void 0),l([t.Event()],o.prototype,"beforeOpen",void 0),l([t.Event()],o.prototype,"beforeClose",void 0),l([t.Event()],o.prototype,"close",void 0),l([t.Event()],o.prototype,"open",void 0),l([t.Event()],o.prototype,"select",void 0),l([t.Event()],o.prototype,"created",void 0),o=l([t.NotifyPropertyChanges],o)}(t.Component),b=function(){var e=function(t,n){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(t,n)};return function(t,n){function s(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(s.prototype=n.prototype,new s)}}(),C=function(e,t,n,s){var i,o=arguments.length,r=o<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,n):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,s);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(o<3?i(r):o>3?i(t,n,r):i(t,n))||r);return o>3&&r&&Object.defineProperty(t,n,r),r},P="EJS-SPLITBUTTON",E=function(e){function s(t,n){return e.call(this,t,n)||this}return b(s,e),s.prototype.preRender=function(){var e=this.element;if(e.tagName===P){for(var n=t.getValue("ej2_instances",e),s=this.createElement("button",{attrs:{type:"button"}}),i=this.createElement(P,{className:"e-"+this.getModuleName()+"-wrapper"}),o=0,r=e.attributes.length;o<r;o++)s.setAttribute(e.attributes[o].nodeName,e.attributes[o].nodeValue);e.parentNode.insertBefore(i,e),t.detach(e),e=s,i.appendChild(e),t.setValue("ej2_instances",n,e),this.wrapper=i,this.element=e}this.element.id||(this.element.id=t.getUniqueID("e-"+this.getModuleName()))},s.prototype.render=function(){this.initWrapper(),this.createPrimaryButton(),this.createSecondaryButton(),this.setActiveElem([this.element,this.secondaryBtnObj.element]),this.setAria(),this.wireEvents()},s.prototype.initWrapper=function(){this.wrapper||(this.wrapper=this.createElement("div",{className:"e-"+this.getModuleName()+"-wrapper"}),this.element.parentNode.insertBefore(this.wrapper,this.element)),this.element.classList.remove("e-"+this.getModuleName()),this.enableRtl&&this.wrapper.classList.add("e-rtl"),this.cssClass&&t.addClass([this.wrapper],this.cssClass.split(" "))},s.prototype.createPrimaryButton=function(){var e={cssClass:this.cssClass,enableRtl:this.enableRtl,iconCss:this.iconCss,iconPosition:this.iconPosition,content:this.content,disabled:this.disabled};this.primaryBtnObj=new n.Button(e),this.primaryBtnObj.createElement=this.createElement,this.primaryBtnObj.appendTo(this.element),this.element.classList.add("e-"+this.getModuleName()),this.element.type="button",this.wrapper.appendChild(this.element)},s.prototype.createSecondaryButton=function(){var e=this,n=this.createElement("button",{className:"e-icon-btn",attrs:{tabindex:"-1"},id:this.element.id+"_dropdownbtn"});this.wrapper.appendChild(n);var s={cssClass:this.cssClass,disabled:this.disabled,enableRtl:this.enableRtl,items:this.items,target:this.target,beforeItemRender:function(t){e.trigger("beforeItemRender",t)},beforeOpen:function(t){e.trigger("beforeOpen",t)},beforeClose:function(t){e.trigger("beforeClose",t)},open:function(t){e.trigger("open",t)},close:function(t){e.trigger("close",t)},select:function(t){e.trigger("select",t)}};this.secondaryBtnObj=new g(s),this.secondaryBtnObj.createElement=this.createElement,this.secondaryBtnObj.appendTo(n),this.secondaryBtnObj.dropDown.relateTo=this.wrapper,this.dropDown=this.secondaryBtnObj.dropDown,this.secondaryBtnObj.activeElem=[this.element,this.secondaryBtnObj.element],t.EventHandler.remove(this.getPopUpElement(),"keydown",this.secondaryBtnObj.keyBoardHandler),this.secondaryBtnObj.element.querySelector(".e-btn-icon").classList.remove("e-icon-right")},s.prototype.setAria=function(){t.attributes(this.element,{role:"listbox","aria-expanded":"false","aria-haspopup":"true","aria-label":this.element.textContent+" splitbutton","aria-owns":this.secondaryBtnObj.dropDown.element.id})},s.prototype.getModuleName=function(){return"split-btn"},s.prototype.toggle=function(){this.secondaryBtnObj.toggle()},s.prototype.destroy=function(){var n=this,s=["e-rtl"],i=document.getElementById(this.element.id);this.cssClass&&(s=s.concat(this.cssClass.split(" "))),i&&i.parentElement===this.wrapper&&(this.wrapper.tagName===P?(this.wrapper.innerHTML="",t.removeClass([this.wrapper],["e-rtl","e-"+this.getModuleName()+"-wrapper"]),t.removeClass([this.wrapper],this.cssClass.split(" "))):(t.removeClass([this.element],s),["role","aria-label","aria-haspopup","aria-expanded","aria-owns","type"].forEach(function(e){n.element.removeAttribute(e)}),this.wrapper.parentNode.insertBefore(this.element,this.wrapper),t.remove(this.wrapper)),this.unWireEvents()),this.primaryBtnObj.destroy(),this.secondaryBtnObj.destroy(),e.prototype.destroy.call(this),this.element.getAttribute("class")||this.element.removeAttribute("class")},s.prototype.wireEvents=function(){t.EventHandler.add(this.element,"click",this.primaryBtnClickHandler,this),t.EventHandler.add(this.getPopUpElement(),"keydown",this.keyBoardHandler,this),new t.KeyboardEvents(this.element,{keyAction:this.btnKeyBoardHandler.bind(this),keyConfigs:{altdownarrow:"alt+downarrow"}})},s.prototype.unWireEvents=function(){t.EventHandler.remove(this.element,"click",this.primaryBtnClickHandler),t.getInstance(this.element,t.KeyboardEvents).destroy()},s.prototype.primaryBtnClickHandler=function(){this.trigger("click",{element:this.element})},s.prototype.btnKeyBoardHandler=function(e){switch(e.action){case"altdownarrow":this.clickHandler(e)}},s.prototype.onPropertyChanged=function(e,n){var s=["content","iconCss","iconPosition","cssClass","disabled","enableRtl"];this.primaryBtnObj.setProperties(i(e,s)),s=["items","beforeOpen","beforeItemRender","select","open","close","cssClass","disabled","enableRtl"],this.secondaryBtnObj.setProperties(i(e,s));for(var o=0,r=Object.keys(e);o<r.length;o++){switch(r[o]){case"cssClass":n.cssClass&&t.removeClass([this.wrapper],n.cssClass.split(" ")),t.addClass([this.wrapper],e.cssClass.split(" "));break;case"enableRtl":e.enableRtl?t.addClass([this.wrapper],"e-rtl"):t.removeClass([this.wrapper],"e-rtl")}}},C([t.Property("")],s.prototype,"content",void 0),C([t.Property("")],s.prototype,"cssClass",void 0),C([t.Property(!1)],s.prototype,"disabled",void 0),C([t.Property("")],s.prototype,"iconCss",void 0),C([t.Property("Left")],s.prototype,"iconPosition",void 0),C([t.Collection([],a)],s.prototype,"items",void 0),C([t.Property("")],s.prototype,"target",void 0),C([t.Event()],s.prototype,"beforeItemRender",void 0),C([t.Event()],s.prototype,"beforeOpen",void 0),C([t.Event()],s.prototype,"beforeClose",void 0),C([t.Event()],s.prototype,"click",void 0),C([t.Event()],s.prototype,"close",void 0),C([t.Event()],s.prototype,"open",void 0),C([t.Event()],s.prototype,"select",void 0),C([t.Event()],s.prototype,"created",void 0),s=C([t.NotifyPropertyChanges],s)}(g),w=function(){var e=function(t,n){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(t,n)};return function(t,n){function s(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(s.prototype=n.prototype,new s)}}(),k=function(e,t,n,s){var i,o=arguments.length,r=o<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,n):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,s);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(o<3?i(r):o>3?i(t,n,r):i(t,n))||r);return o>3&&r&&Object.defineProperty(t,n,r),r},O="e-hide-spinner",S="e-progress-active",B="e-btn-content",L=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return w(n,e),k([t.Property(null)],n.prototype,"template",void 0),k([t.Property(16)],n.prototype,"width",void 0),k([t.Property("Left")],n.prototype,"position",void 0),n}(t.ChildProperty),j=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return w(n,e),k([t.Property(400)],n.prototype,"duration",void 0),k([t.Property("None")],n.prototype,"effect",void 0),k([t.Property("ease")],n.prototype,"easing",void 0),n}(t.ChildProperty),H=function(e){function n(t,n){var s=e.call(this,t,n)||this;return s.step=1,s}return w(n,e),n.prototype.preRender=function(){e.prototype.preRender.call(this)},n.prototype.render=function(){e.prototype.render.call(this),this.init(),this.wireEvents(),this.setAria()},n.prototype.start=function(e){this.isPaused=!1,this.startProgress(e||this.percent,this.progressTime)},n.prototype.stop=function(){this.isPaused=!0,cancelAnimationFrame(this.timerId)},n.prototype.getModuleName=function(){return"progress-btn"},n.prototype.destroy=function(){var n=this,s=[O,S,"e-round-corner","e-"+e.prototype.getModuleName.call(this),"e-spin-"+this.spinSettings.position.toLowerCase()];e.prototype.destroy.call(this),this.unWireEvents(),this.element.innerHTML="",this.cssClass&&(s=s.concat(this.cssClass.split(" "))),t.removeClass([this.element],s),(this.element.getAttribute("class")?["aria-label","aria-valuemin","aria-valuemax","aria-valuenow"]:["aria-label","aria-valuemin","aria-valuemax","aria-valuenow","class"]).forEach(function(e){n.element.removeAttribute(e)}),this.disabled&&this.element.removeAttribute("disabled")},n.prototype.init=function(){this.element.classList.add("e-"+e.prototype.getModuleName.call(this)),this.setContent(),this.createSpinner(),this.enableProgress&&this.createProgress()},n.prototype.createSpinner=function(){var e=this.createElement("span",{className:"e-spinner"});this.setSpinPosition(e),s.createSpinner({target:e,width:this.spinSettings.width||16,template:this.spinSettings.template},this.createElement)},n.prototype.getSpinner=function(){return this.element.getElementsByClassName("e-spinner")[0]},n.prototype.getProgress=function(){return this.element.getElementsByClassName("e-progress")[0]},n.prototype.setSpinPosition=function(e){var t=this.spinSettings.position||"Left";"Left"===t||"Top"===t?this.element.insertBefore(e,this.element.getElementsByClassName(B)[0]):this.element.appendChild(e),this.element.classList.add("e-spin-"+t.toLowerCase())},n.prototype.createProgress=function(){this.element.appendChild(this.createElement("span",{className:"e-progress"}))},n.prototype.setContent=function(){var e=this.element.innerHTML;this.element.innerHTML="",this.element.appendChild(this.createElement("span",{className:B,innerHTML:e}))},n.prototype.clickHandler=function(){this.element.classList.contains(S)||this.startProgress()},n.prototype.startProgress=function(e,t){var n=this.element.classList,i=n.contains("e-vertical");n.add(S),n.contains(O)||s.showSpinner(this.element),this.startAnimate(Date.now(),t||0,t?Date.now()-1*this.duration/100:Date.now(),e||0,0,this.step,0,i),this.startContAnimate()},n.prototype.startAnimate=function(e,t,n,s,i,o,r,a){var p=this;try{var l,c=e-n,h=this.duration*o/100,d=c?c<h?c-h:c%h:0;this.progressTime=t=t+c-d,n=e-d,s+=(c-d)/this.duration*100,l={percent:i=(t-r)%h==0||100===s?s:i,currentDuration:t,step:o},0===s?this.trigger("begin",l):100===s||t===this.duration?this.trigger("end",l):this.trigger("progress",l),s!==l.percent&&l.percent!==i&&(s=l.percent),this.percent=s,this.step=l.step,(t-r)%(this.duration*l.step/100)!=0&&100!==s||(this.timerId=requestAnimationFrame(function(){p.enableProgress&&(p.getProgress().style[a?"height":"width"]=s+"%"),p.element.setAttribute("aria-valuenow",s.toString())}),i=s,r=t),this.isPaused||(t<this.duration&&s<100?setTimeout(function(){p.startAnimate(Date.now(),t,n,s,i,l.step,r,a)},this.duration/100-d):setTimeout(function(){p.progressTime=p.percent=0,p.enableProgress&&(p.getProgress().style[a?"height":"width"]="0%"),p.element.setAttribute("aria-valuenow","0"),p.hideSpin()},100))}catch(e){cancelAnimationFrame(this.timerId),this.trigger("fail",e)}},n.prototype.startContAnimate=function(){var e=this,n=this.element.getElementsByClassName(B)[0];"None"!==this.animationSettings.effect?new t.Animation({}).animate(n,{duration:this.animationSettings.duration,name:"Progress"+this.animationSettings.effect,timingFunction:this.animationSettings.easing,begin:function(){"Center"===e.spinSettings.position&&e.setSpinnerSize()},end:function(){n.classList.add("e-animate-end")}}):"Center"===this.spinSettings.position&&this.setSpinnerSize()},n.prototype.setSpinnerSize=function(){var e=this.element.getElementsByClassName(B)[0],t=this.getSpinner();t.style.width=Math.max(t.offsetWidth,e.offsetWidth)+"px",t.style.height=Math.max(t.offsetHeight,e.offsetHeight)+"px",e.classList.add("e-cont-animate")},n.prototype.hideSpin=function(){var e=this.element.getElementsByClassName(B)[0];if(this.element.classList.contains(O)||s.hideSpinner(this.element),this.element.classList.remove(S),"None"!==this.animationSettings.effect&&e.classList.remove("e-animate-end"),"Center"===this.spinSettings.position){var t=this.getSpinner();e.classList.remove("e-cont-animate"),t.style.width="auto",t.style.height="auto"}},n.prototype.setIconSpan=function(){var e=this.element.getElementsByClassName(B)[0],t=this.element.getElementsByClassName("e-btn-icon")[0];!e.childNodes[0]||"Left"!==this.iconPosition&&"Top"!==this.iconPosition?e.appendChild(t):e.insertBefore(t,e.childNodes[0])},n.prototype.setAria=function(){t.attributes(this.element,{"aria-label":this.element.textContent+" progress","aria-valuemin":"0","aria-valuemax":"100","aria-valuenow":"0"})},n.prototype.wireEvents=function(){t.EventHandler.add(this.element,"click",this.clickHandler,this)},n.prototype.unWireEvents=function(){t.EventHandler.remove(this.element,"click",this.clickHandler)},n.prototype.onPropertyChanged=function(n,s){var i=this.element;e.prototype.onPropertyChanged.call(this,n,s);for(var o=0,r=Object.keys(n);o<r.length;o++){switch(r[o]){case"content":this.setContent(),this.createSpinner(),this.enableProgress&&this.createProgress(),i.setAttribute("aria-label",i.textContent+" progress");break;case"iconCss":s.iconCss||this.setIconSpan();break;case"iconPosition":this.setIconSpan();break;case"enableProgress":n.enableProgress?this.createProgress():t.remove(this.getProgress());break;case"spinSettings":n.spinSettings.position&&(i.classList.remove("e-spin-"+s.spinSettings.position.toLowerCase()),this.setSpinPosition(this.getSpinner())),(n.spinSettings.template||n.spinSettings.width)&&(i.removeChild(this.getSpinner()),this.createSpinner())}}},k([t.Property(!1)],n.prototype,"enableProgress",void 0),k([t.Property(2e3)],n.prototype,"duration",void 0),k([t.Property("Left")],n.prototype,"iconPosition",void 0),k([t.Property("")],n.prototype,"iconCss",void 0),k([t.Property(!1)],n.prototype,"disabled",void 0),k([t.Property(!1)],n.prototype,"isPrimary",void 0),k([t.Property("")],n.prototype,"cssClass",void 0),k([t.Property("")],n.prototype,"content",void 0),k([t.Property(!1)],n.prototype,"isToggle",void 0),k([t.Complex({},L)],n.prototype,"spinSettings",void 0),k([t.Complex({},j)],n.prototype,"animationSettings",void 0),k([t.Event()],n.prototype,"created",void 0),k([t.Event()],n.prototype,"begin",void 0),k([t.Event()],n.prototype,"progress",void 0),k([t.Event()],n.prototype,"end",void 0),k([t.Event()],n.prototype,"fail",void 0),n=k([t.NotifyPropertyChanges],n)}(n.Button);e.getModel=i,e.Item=a,e.DropDownButton=g,e.SplitButton=E,e.createButtonGroup=function(e,s,i){void 0===s&&(s={});var o,r,a,p;t.isNullOrUndefined(i)&&(i=t.createElement);var l=document.querySelector(e);t.addClass([l],["e-btn-group"]),l.setAttribute("role","group");var c=l.children;s.buttons=s.buttons||[];for(var h=0,d=0;d<c.length;h++,d++)o=c[d],null!==(p=s.buttons[h])&&("BUTTON"===o.tagName?r=o:(r=i("label"),(a=c[d+1])?l.insertBefore(r,a):l.appendChild(r),o.id&&r.setAttribute("for",o.id),p&&p.disabled&&(o.disabled=!0),d++),s.cssClass&&p&&!p.cssClass&&(p.cssClass=s.cssClass),new n.Button(p||{},r));return l},e.SpinSettings=L,e.AnimationSettings=j,e.ProgressButton=H,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=ej2-splitbuttons.umd.min.js.map

dist/es6/ej2-splitbuttons.es2015.js

@@ -1,2 +0,2 @@
-import { Animation, ChildProperty, Collection, Component, Event, EventHandler, KeyboardEvents, NotifyPropertyChanges, Property, addClass, attributes, classList, closest, createElement, deleteObject, detach, extend, getInstance, getUniqueID, getValue, isNullOrUndefined, remove, removeClass, rippleEffect, select, setValue } from '@syncfusion/ej2-base';
+import { Animation, ChildProperty, Collection, Complex, Component, Event, EventHandler, KeyboardEvents, NotifyPropertyChanges, Property, addClass, attributes, classList, closest, createElement, deleteObject, detach, extend, getInstance, getUniqueID, getValue, isNullOrUndefined, remove, removeClass, rippleEffect, select, setValue } from '@syncfusion/ej2-base';
 import { Button } from '@syncfusion/ej2-buttons';
@@ -933,2 +933,24 @@ import { Popup, createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
 const CONTENTCLS = 'e-btn-content';
+class SpinSettings extends ChildProperty {
+}
+__decorate$3([
+    Property(null)
+], SpinSettings.prototype, "template", void 0);
+__decorate$3([
+    Property(16)
+], SpinSettings.prototype, "width", void 0);
+__decorate$3([
+    Property('Left')
+], SpinSettings.prototype, "position", void 0);
+class AnimationSettings extends ChildProperty {
+}
+__decorate$3([
+    Property(400)
+], AnimationSettings.prototype, "duration", void 0);
+__decorate$3([
+    Property('None')
+], AnimationSettings.prototype, "effect", void 0);
+__decorate$3([
+    Property('ease')
+], AnimationSettings.prototype, "easing", void 0);
 /**
@@ -1035,2 +1057,8 @@ * The ProgressButton visualizes the progression of an operation to indicate the user
     }
+    getSpinner() {
+        return this.element.getElementsByClassName('e-spinner')[0];
+    }
+    getProgress() {
+        return this.element.getElementsByClassName(PROGRESS)[0];
+    }
     setSpinPosition(ele) {
@@ -1066,12 +1094,4 @@ let position = this.spinSettings.position || 'Left';
             showSpinner(this.element);
-            if (!this.enableProgress) {
-                setTimeout(() => {
-                    this.hideSpin();
-                    // tslint:disable-next-line
-                }, this.duration);
-            }
         }
-        if (this.enableProgress) {
-            this.startAnimate(Date.now(), progressTime ? progressTime : 0, progressTime ? Date.now() - (this.duration * 1 / 100) : Date.now(), percent ? percent : 0, 0, this.step, 0, isVertical);
-        }
+        this.startAnimate(Date.now(), progressTime ? progressTime : 0, progressTime ? Date.now() - (this.duration * 1 / 100) : Date.now(), percent ? percent : 0, 0, this.step, 0, isVertical);
         this.startContAnimate();
@@ -1106,4 +1126,5 @@ }
                 this.timerId = requestAnimationFrame(() => {
-                    this.element.getElementsByClassName(PROGRESS)[0]
-                        .style[isVertical ? 'height' : 'width'] = percent + '%';
+                    if (this.enableProgress) {
+                        this.getProgress().style[isVertical ? 'height' : 'width'] = percent + '%';
+                    }
                     this.element.setAttribute('aria-valuenow', percent.toString());
@@ -1124,3 +1145,5 @@ });
                         this.progressTime = this.percent = 0;
-                        this.element.getElementsByClassName(PROGRESS)[0].style[isVertical ? 'height' : 'width'] = '0%';
+                        if (this.enableProgress) {
+                            this.getProgress().style[isVertical ? 'height' : 'width'] = '0%';
+                        }
                         this.element.setAttribute('aria-valuenow', '0');
@@ -1161,3 +1184,3 @@ this.hideSpin();
         let ele = this.element.getElementsByClassName(CONTENTCLS)[0];
-        let spinner = this.element.getElementsByClassName('e-spinner')[0];
+        let spinner = this.getSpinner();
         spinner.style.width = Math.max(spinner.offsetWidth, ele.offsetWidth) + 'px';
@@ -1177,3 +1200,3 @@ spinner.style.height = Math.max(spinner.offsetHeight, ele.offsetHeight) + 'px';
         if (this.spinSettings.position === 'Center') {
-            let ele = this.element.getElementsByClassName('e-spinner')[0];
+            let ele = this.getSpinner();
             cont.classList.remove('e-cont-animate');
@@ -1213,2 +1236,3 @@ ele.style.width = 'auto';
     onPropertyChanged(newProp, oldProp) {
+        let ele = this.element;
         super.onPropertyChanged(newProp, oldProp);
@@ -1223,3 +1247,3 @@ for (let prop of Object.keys(newProp)) {
                     }
-                    this.element.setAttribute('aria-label', this.element.textContent + ' progress');
+                    ele.setAttribute('aria-label', ele.textContent + ' progress');
                     break;
@@ -1239,5 +1263,15 @@ case 'iconCss':
                     else {
-                        remove(this.element.getElementsByClassName(PROGRESS)[0]);
+                        remove(this.getProgress());
                     }
                     break;
+                case 'spinSettings':
+                    if (newProp.spinSettings.position) {
+                        ele.classList.remove('e-spin-' + oldProp.spinSettings.position.toLowerCase());
+                        this.setSpinPosition(this.getSpinner());
+                    }
+                    if (newProp.spinSettings.template || newProp.spinSettings.width) {
+                        ele.removeChild(this.getSpinner());
+                        this.createSpinner();
+                    }
+                    break;
             }
@@ -1275,6 +1309,6 @@ }
 __decorate$3([
-    Property({ template: null, width: 16, position: 'Left' })
+    Complex({}, SpinSettings)
 ], ProgressButton.prototype, "spinSettings", void 0);
 __decorate$3([
-    Property({ duration: 400, effect: 'None', easing: 'ease' })
+    Complex({}, AnimationSettings)
 ], ProgressButton.prototype, "animationSettings", void 0);
@@ -1308,3 +1342,3 @@ __decorate$3([
 
-export { getModel, Item, DropDownButton, SplitButton, createButtonGroup, ProgressButton };
+export { getModel, Item, DropDownButton, SplitButton, createButtonGroup, SpinSettings, AnimationSettings, ProgressButton };
 //# sourceMappingURL=ej2-splitbuttons.es2015.js.map

dist/es6/ej2-splitbuttons.es5.js

@@ -1,2 +0,2 @@
-import { Animation, ChildProperty, Collection, Component, Event, EventHandler, KeyboardEvents, NotifyPropertyChanges, Property, addClass, attributes, classList, closest, createElement, deleteObject, detach, extend, getInstance, getUniqueID, getValue, isNullOrUndefined, remove, removeClass, rippleEffect, select, setValue } from '@syncfusion/ej2-base';
+import { Animation, ChildProperty, Collection, Complex, Component, Event, EventHandler, KeyboardEvents, NotifyPropertyChanges, Property, addClass, attributes, classList, closest, createElement, deleteObject, detach, extend, getInstance, getUniqueID, getValue, isNullOrUndefined, remove, removeClass, rippleEffect, select, setValue } from '@syncfusion/ej2-base';
 import { Button } from '@syncfusion/ej2-buttons';
@@ -1002,2 +1002,34 @@ import { Popup, createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
 var CONTENTCLS = 'e-btn-content';
+var SpinSettings = /** @__PURE__ @class */ (function (_super) {
+    __extends$3(SpinSettings, _super);
+    function SpinSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate$3([
+        Property(null)
+    ], SpinSettings.prototype, "template", void 0);
+    __decorate$3([
+        Property(16)
+    ], SpinSettings.prototype, "width", void 0);
+    __decorate$3([
+        Property('Left')
+    ], SpinSettings.prototype, "position", void 0);
+    return SpinSettings;
+}(ChildProperty));
+var AnimationSettings = /** @__PURE__ @class */ (function (_super) {
+    __extends$3(AnimationSettings, _super);
+    function AnimationSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate$3([
+        Property(400)
+    ], AnimationSettings.prototype, "duration", void 0);
+    __decorate$3([
+        Property('None')
+    ], AnimationSettings.prototype, "effect", void 0);
+    __decorate$3([
+        Property('ease')
+    ], AnimationSettings.prototype, "easing", void 0);
+    return AnimationSettings;
+}(ChildProperty));
 /**
@@ -1107,2 +1139,8 @@ * The ProgressButton visualizes the progression of an operation to indicate the user
     };
+    ProgressButton.prototype.getSpinner = function () {
+        return this.element.getElementsByClassName('e-spinner')[0];
+    };
+    ProgressButton.prototype.getProgress = function () {
+        return this.element.getElementsByClassName(PROGRESS)[0];
+    };
     ProgressButton.prototype.setSpinPosition = function (ele) {
@@ -1133,3 +1171,2 @@ var position = this.spinSettings.position || 'Left';
     ProgressButton.prototype.startProgress = function (percent, progressTime) {
-        var _this = this;
         var clsList = this.element.classList;
@@ -1140,12 +1177,4 @@ var isVertical = clsList.contains('e-vertical');
             showSpinner(this.element);
-            if (!this.enableProgress) {
-                setTimeout(function () {
-                    _this.hideSpin();
-                    // tslint:disable-next-line
-                }, this.duration);
-            }
         }
-        if (this.enableProgress) {
-            this.startAnimate(Date.now(), progressTime ? progressTime : 0, progressTime ? Date.now() - (this.duration * 1 / 100) : Date.now(), percent ? percent : 0, 0, this.step, 0, isVertical);
-        }
+        this.startAnimate(Date.now(), progressTime ? progressTime : 0, progressTime ? Date.now() - (this.duration * 1 / 100) : Date.now(), percent ? percent : 0, 0, this.step, 0, isVertical);
         this.startContAnimate();
@@ -1181,4 +1210,5 @@ };
                 this.timerId = requestAnimationFrame(function () {
-                    _this.element.getElementsByClassName(PROGRESS)[0]
-                        .style[isVertical ? 'height' : 'width'] = percent + '%';
+                    if (_this.enableProgress) {
+                        _this.getProgress().style[isVertical ? 'height' : 'width'] = percent + '%';
+                    }
                     _this.element.setAttribute('aria-valuenow', percent.toString());
@@ -1199,3 +1229,5 @@ });
                         _this.progressTime = _this.percent = 0;
-                        _this.element.getElementsByClassName(PROGRESS)[0].style[isVertical ? 'height' : 'width'] = '0%';
+                        if (_this.enableProgress) {
+                            _this.getProgress().style[isVertical ? 'height' : 'width'] = '0%';
+                        }
                         _this.element.setAttribute('aria-valuenow', '0');
@@ -1237,3 +1269,3 @@ _this.hideSpin();
         var ele = this.element.getElementsByClassName(CONTENTCLS)[0];
-        var spinner = this.element.getElementsByClassName('e-spinner')[0];
+        var spinner = this.getSpinner();
         spinner.style.width = Math.max(spinner.offsetWidth, ele.offsetWidth) + 'px';
@@ -1253,3 +1285,3 @@ spinner.style.height = Math.max(spinner.offsetHeight, ele.offsetHeight) + 'px';
         if (this.spinSettings.position === 'Center') {
-            var ele = this.element.getElementsByClassName('e-spinner')[0];
+            var ele = this.getSpinner();
             cont.classList.remove('e-cont-animate');
@@ -1289,2 +1321,3 @@ ele.style.width = 'auto';
     ProgressButton.prototype.onPropertyChanged = function (newProp, oldProp) {
+        var ele = this.element;
         _super.prototype.onPropertyChanged.call(this, newProp, oldProp);
@@ -1300,3 +1333,3 @@ for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
                     }
-                    this.element.setAttribute('aria-label', this.element.textContent + ' progress');
+                    ele.setAttribute('aria-label', ele.textContent + ' progress');
                     break;
@@ -1316,5 +1349,15 @@ case 'iconCss':
                     else {
-                        remove(this.element.getElementsByClassName(PROGRESS)[0]);
+                        remove(this.getProgress());
                     }
                     break;
+                case 'spinSettings':
+                    if (newProp.spinSettings.position) {
+                        ele.classList.remove('e-spin-' + oldProp.spinSettings.position.toLowerCase());
+                        this.setSpinPosition(this.getSpinner());
+                    }
+                    if (newProp.spinSettings.template || newProp.spinSettings.width) {
+                        ele.removeChild(this.getSpinner());
+                        this.createSpinner();
+                    }
+                    break;
             }
@@ -1351,6 +1394,6 @@ }
     __decorate$3([
-        Property({ template: null, width: 16, position: 'Left' })
+        Complex({}, SpinSettings)
     ], ProgressButton.prototype, "spinSettings", void 0);
     __decorate$3([
-        Property({ duration: 400, effect: 'None', easing: 'ease' })
+        Complex({}, AnimationSettings)
     ], ProgressButton.prototype, "animationSettings", void 0);
@@ -1386,3 +1429,3 @@ __decorate$3([
 
-export { getModel, Item, DropDownButton, SplitButton, createButtonGroup, ProgressButton };
+export { getModel, Item, DropDownButton, SplitButton, createButtonGroup, SpinSettings, AnimationSettings, ProgressButton };
 //# sourceMappingURL=ej2-splitbuttons.es5.js.map

dist/global/ej2-splitbuttons.min.js

 /*!
 *  filename: ej2-splitbuttons.min.js
-*  version : 16.3.34
+*  version : 16.4.40-beta
 *  Copyright Syncfusion Inc. 2001 - 2018. All rights reserved.
@@ -10,3 +10,3 @@ *  Use of this code is subject to the terms of our license.
 */
-this.ej=this.ej||{},this.ej.splitbuttons=function(e,t,s,n){"use strict";function i(e,s){for(var n=t.extend({},e),i=0,o=Object.keys(n);i<o.length;i++){var r=o[i];s.indexOf(r)<0&&t.deleteObject(n,r)}return n}function o(e,n,i){void 0===n&&(n={});var o,r,a,p;t.isNullOrUndefined(i)&&(i=t.createElement);var l=document.querySelector(e);t.addClass([l],["e-btn-group"]),l.setAttribute("role","group");var c=l.children;n.buttons=n.buttons||[];for(var h=0,d=0;d<c.length;h++,d++)o=c[d],null!==(p=n.buttons[h])&&("BUTTON"===o.tagName?r=o:(r=i("label"),(a=c[d+1])?l.insertBefore(r,a):l.appendChild(r),o.id&&r.setAttribute("for",o.id),p&&p.disabled&&(o.disabled=!0),d++),n.cssClass&&p&&!p.cssClass&&(p.cssClass=n.cssClass),new s.Button(p||{},r));return l}var r=function(){var e=function(t,s){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var s in t)t.hasOwnProperty(s)&&(e[s]=t[s])})(t,s)};return function(t,s){function n(){this.constructor=t}e(t,s),t.prototype=null===s?Object.create(s):(n.prototype=s.prototype,new n)}}(),a=function(e,t,s,n){var i,o=arguments.length,r=o<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,s):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,s,n);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(o<3?i(r):o>3?i(t,s,r):i(t,s))||r);return o>3&&r&&Object.defineProperty(t,s,r),r},p=function(e){function s(){return null!==e&&e.apply(this,arguments)||this}return r(s,e),a([t.Property("")],s.prototype,"iconCss",void 0),a([t.Property("")],s.prototype,"id",void 0),a([t.Property(!1)],s.prototype,"separator",void 0),a([t.Property("")],s.prototype,"text",void 0),a([t.Property("")],s.prototype,"url",void 0),s}(t.ChildProperty),l=function(){var e=function(t,s){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var s in t)t.hasOwnProperty(s)&&(e[s]=t[s])})(t,s)};return function(t,s){function n(){this.constructor=t}e(t,s),t.prototype=null===s?Object.create(s):(n.prototype=s.prototype,new n)}}(),c=function(e,t,s,n){var i,o=arguments.length,r=o<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,s):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,s,n);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(o<3?i(r):o>3?i(t,s,r):i(t,s))||r);return o>3&&r&&Object.defineProperty(t,s,r),r},h={DISABLED:"e-disabled",FOCUS:"e-focused",ICON:"e-menu-icon",ITEM:"e-item",POPUP:"e-dropdown-popup",RTL:"e-rtl",SEPARATOR:"e-separator",VERTICAL:"e-vertical"},d=function(e){function o(t,s){return e.call(this,t,s)||this}return l(o,e),o.prototype.preRender=function(){},o.prototype.getPersistData=function(){return this.addOnPersist([])},o.prototype.toggle=function(){this.canOpen()?this.openPopUp():this.closePopup()},o.prototype.render=function(){this.initialize(),this.disabled||this.wireEvents()},o.prototype.createPopup=function(){var e,s=this.createElement("div",{className:h.POPUP,id:this.element.id+"-popup"});document.body.appendChild(s),this.dropDown=new n.Popup(s,{relateTo:this.element,collision:{X:"fit",Y:"flip"},position:{X:"left",Y:"bottom"},targetType:"relative",content:this.target?this.getTargetElement():"",enableRtl:this.enableRtl}),"fixed"===this.dropDown.element.style.position&&this.dropDown.refreshPosition(this.element),this.dropDown.hide(),t.attributes(this.element,(e={},e.role="menu",e["aria-haspopup"]=this.items.length||this.target?"true":"false",e["aria-expanded"]="false",e["aria-owns"]=this.getPopUpElement().id,e.type="button",e)),this.cssClass&&t.addClass([s],this.cssClass.split(" "))},o.prototype.getTargetElement=function(){return"string"==typeof this.target?t.select(this.target):this.target},o.prototype.createItems=function(e){for(var s,n,i,o,r=this.hasIcon(e,"iconCss"),a=this.createElement("ul",{attrs:{tabindex:"0"}}),p=0;p<e.length;p++)n=e[p],i=this.createElement("li",{innerHTML:n.url?"":n.text,className:n.separator?h.ITEM+" "+h.SEPARATOR:h.ITEM,attrs:{role:"menuItem",tabindex:"-1"},id:n.id?n.id:t.getUniqueID("e-"+this.getModuleName()+"-item")}),n.iconCss?(s=this.createElement("span",{className:h.ICON+" "+n.iconCss}),i.insertBefore(s,i.childNodes[0])):r&&!n.separator&&i.classList.add("e-blank-icon"),n.url&&i.appendChild(this.createAnchor(n)),o={item:n,element:i},this.trigger("beforeItemRender",o),a.appendChild(i);return a},o.prototype.hasIcon=function(e,t){for(var s=0,n=e.length;s<n;s++)if(e[s][t])return!0;return!1},o.prototype.createAnchor=function(e){return this.createElement("a",{className:"e-menu-text e-menu-url",innerHTML:e.text,attrs:{href:e.url}})},o.prototype.initialize=function(){this.button=new s.Button({iconCss:this.iconCss,iconPosition:this.iconPosition,cssClass:this.cssClass,content:this.content,disabled:this.disabled,enableRtl:this.enableRtl,enablePersistence:this.enablePersistence}),this.button.createElement=this.createElement,this.button.appendTo(this.element),this.element.id||(this.element.id=t.getUniqueID("e-"+this.getModuleName())),this.appendArrowSpan(),this.createPopup(),this.setActiveElem([this.element])},o.prototype.appendArrowSpan=function(){this.element.appendChild(this.createElement("span",{className:"e-btn-icon e-icons e-icon-"+(this.cssClass.indexOf(h.VERTICAL)>-1?"bottom":"right")+" e-caret"}))},o.prototype.setActiveElem=function(e){this.activeElem=e},o.prototype.getModuleName=function(){return"dropdown-btn"},o.prototype.canOpen=function(){return this.getPopUpElement().classList.contains("e-popup-close")},o.prototype.destroy=function(){var s=this;if(e.prototype.destroy.call(this),"dropdown-btn"===this.getModuleName()){var n;this.element.querySelector("span.e-caret")&&t.detach(this.element.querySelector("span.e-caret")),this.cssClass&&(n=this.cssClass.split(" ")),this.button.destroy(),n&&t.removeClass([this.element],n),t.removeClass(this.activeElem,["e-active"]),(this.element.getAttribute("class")?["role","aria-haspopup","aria-expanded","aria-owns","type"]:["role","aria-haspopup","aria-expanded","aria-owns","type","class"]).forEach(function(e){s.element.removeAttribute(e)}),this.dropDown.destroy();var i=document.getElementById(this.getPopUpElement().id);i&&(t.removeClass([i],["e-popup-open","e-popup-close"]),t.detach(i)),this.disabled||this.unWireEvents()}},o.prototype.getPopUpElement=function(){return this.dropDown.element},o.prototype.getULElement=function(){return this.getPopUpElement().children[0]},o.prototype.wireEvents=function(){var e=this.getPopUpElement();this.delegateMousedownHandler=this.mousedownHandler.bind(this),t.EventHandler.add(document,"mousedown touchstart",this.delegateMousedownHandler,this),t.EventHandler.add(this.element,"click",this.clickHandler,this),t.EventHandler.add(e,"click",this.clickHandler,this),t.EventHandler.add(this.element,"keydown",this.keyBoardHandler,this),t.EventHandler.add(e,"keydown",this.keyBoardHandler,this),this.rippleFn=t.rippleEffect(e,{selector:"."+h.ITEM})},o.prototype.keyBoardHandler=function(e){if(e.target!==this.element||9!==e.keyCode&&(e.altKey||40!==e.keyCode)&&38!==e.keyCode)switch(e.keyCode){case 38:case 40:!e.altKey||38!==e.keyCode&&40!==e.keyCode?this.upDownKeyHandler(e):this.keyEventHandler(e);break;case 9:case 13:case 27:case 32:this.keyEventHandler(e)}},o.prototype.upDownKeyHandler=function(e){if(!this.target||38!==e.keyCode&&40!==e.keyCode){e.preventDefault();var s=this.getULElement(),n=40===e.keyCode?0:s.childElementCount-1,i=n,o=null;this.removeCustomSelection();for(var r=0,a=s.children.length;r<a;r++)s.children[r].classList.contains(h.FOCUS)&&(i=r,(o=s.children[r]).classList.remove(h.FOCUS),40===e.keyCode?i++:i--,i===(40===e.keyCode?s.childElementCount:-1)&&(i=n));o=s.children[i],-1!==(i=this.isValidLI(o,i,e.keyCode))&&(t.addClass([s.children[i]],h.FOCUS),s.children[i].focus())}},o.prototype.removeCustomSelection=function(){var e=this.getULElement().querySelector(".e-selected");e&&e.classList.remove("e-selected")},o.prototype.isValidLI=function(e,t,s,n){if(void 0===n&&(n=0),(e.classList.contains(h.SEPARATOR)||e.classList.contains(h.DISABLED))&&(t===(40===s?this.items.length-1:0)?t=40===s?0:this.items.length-1:40===s?t++:t--),(e=this.getULElement().children[t]).classList.contains(h.SEPARATOR)||e.classList.contains(h.DISABLED)){if(++n===this.items.length)return t=-1;t=this.isValidLI(e,t,s,n)}return t},o.prototype.keyEventHandler=function(e){(!this.target||13!==e.keyCode&&9!==e.keyCode)&&(9!==e.keyCode&&e.preventDefault(),27===e.keyCode||38===e.keyCode||9===e.keyCode?this.canOpen()||this.closePopup(e,this.element):this.clickHandler(e))},o.prototype.getLI=function(e){return"LI"===e.tagName?e:t.closest(e,"li")},o.prototype.mousedownHandler=function(e){var s=e.target;this.canOpen()||t.closest(s,"#"+this.getPopUpElement().id)||t.closest(s,"#"+this.element.id)||this.closePopup(e)},o.prototype.clickHandler=function(e){var s=e.target,n=this.canOpen();if(t.closest(s,"#"+this.element.id))n?this.openPopUp(e):this.closePopup(e,this.activeElem[0]);else if(t.closest(s,"#"+this.getPopUpElement().id)){var i=void 0,o=void 0,r=void 0,a=this.getLI(s);a&&(o=Array.prototype.indexOf.call(this.getULElement().children,a),(r=this.items[o])&&(i={element:a,item:r},this.trigger("select",i)),this.closePopup(e,this.activeElem[0]))}},o.prototype.openPopUp=function(e){void 0===e&&(e=null),this.target||this.getPopUpElement().appendChild(this.createItems(this.items));var s=this.getULElement(),n={element:s,items:this.items,event:e,cancel:!1};if(this.trigger("beforeOpen",n),!n.cancel){this.dropDown.show(null,this.element),t.addClass([this.element],"e-active"),this.element.setAttribute("aria-expanded","true"),s.focus();var i={element:s,items:this.items};this.trigger("open",i)}},o.prototype.closePopup=function(e,s){void 0===e&&(e=null);var n=this.getULElement(),i={element:n,items:this.items,event:e,cancel:!1};if(this.trigger("beforeClose",i),!i.cancel){this.removeCustomSelection(),this.dropDown.hide(),t.removeClass(this.activeElem,"e-active"),this.element.setAttribute("aria-expanded","false"),s&&s.focus();var o={element:n,items:this.items};this.trigger("close",o),!this.target&&n&&t.detach(n)}},o.prototype.unWireEvents=function(){t.EventHandler.remove(document,"mousedown touchstart",this.delegateMousedownHandler),t.EventHandler.remove(this.element,"click",this.clickHandler),t.EventHandler.remove(this.getPopUpElement(),"click",this.clickHandler),t.EventHandler.remove(this.element,"keydown",this.keyBoardHandler),t.EventHandler.remove(this.getPopUpElement(),"keydown",this.keyBoardHandler),this.rippleFn()},o.prototype.onPropertyChanged=function(e,s){var n=["content","cssClass","iconCss","iconPosition","disabled","enableRtl"];this.button.setProperties(i(e,n));for(var o=this.getPopUpElement(),r=0,a=Object.keys(e);r<a.length;r++)switch(a[r]){case"content":this.element.querySelector("span.e-caret")||this.appendArrowSpan();break;case"disabled":e.disabled?(this.unWireEvents(),this.canOpen()||this.closePopup()):this.wireEvents();break;case"cssClass":if(e.cssClass.indexOf(h.VERTICAL)>-1){var p=this.element.querySelector("span.e-caret");t.classList(p,["e-icon-bottom"],["e-icon-right"])}s.cssClass&&t.removeClass([o],s.cssClass.split(" ")),e.cssClass&&t.addClass([o],e.cssClass.split(" "));break;case"enableRtl":o.classList.toggle(h.RTL);break;case"target":this.target=e.target,t.detach(this.getULElement()),o.appendChild(this.getTargetElement()),this.dropDown.content=this.getTargetElement();break;case"items":this.dropDown.refresh(),o.classList.contains("e-popup-open")&&t.classList(o,["e-popup-close"],["e-popup-open"])}},c([t.Property("")],o.prototype,"content",void 0),c([t.Property("")],o.prototype,"cssClass",void 0),c([t.Property(!1)],o.prototype,"disabled",void 0),c([t.Property("")],o.prototype,"iconCss",void 0),c([t.Property("Left")],o.prototype,"iconPosition",void 0),c([t.Collection([],p)],o.prototype,"items",void 0),c([t.Property("")],o.prototype,"target",void 0),c([t.Event()],o.prototype,"beforeItemRender",void 0),c([t.Event()],o.prototype,"beforeOpen",void 0),c([t.Event()],o.prototype,"beforeClose",void 0),c([t.Event()],o.prototype,"close",void 0),c([t.Event()],o.prototype,"open",void 0),c([t.Event()],o.prototype,"select",void 0),c([t.Event()],o.prototype,"created",void 0),o=c([t.NotifyPropertyChanges],o)}(t.Component),u=function(){var e=function(t,s){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var s in t)t.hasOwnProperty(s)&&(e[s]=t[s])})(t,s)};return function(t,s){function n(){this.constructor=t}e(t,s),t.prototype=null===s?Object.create(s):(n.prototype=s.prototype,new n)}}(),m=function(e,t,s,n){var i,o=arguments.length,r=o<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,s):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,s,n);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(o<3?i(r):o>3?i(t,s,r):i(t,s))||r);return o>3&&r&&Object.defineProperty(t,s,r),r},y="e-rtl",f="EJS-SPLITBUTTON",v=function(e){function n(t,s){return e.call(this,t,s)||this}return u(n,e),n.prototype.preRender=function(){var e=this.element;if(e.tagName===f){for(var s=t.getValue("ej2_instances",e),n=this.createElement("button",{attrs:{type:"button"}}),i=this.createElement(f,{className:"e-"+this.getModuleName()+"-wrapper"}),o=0,r=e.attributes.length;o<r;o++)n.setAttribute(e.attributes[o].nodeName,e.attributes[o].nodeValue);e.parentNode.insertBefore(i,e),t.detach(e),e=n,i.appendChild(e),t.setValue("ej2_instances",s,e),this.wrapper=i,this.element=e}this.element.id||(this.element.id=t.getUniqueID("e-"+this.getModuleName()))},n.prototype.render=function(){this.initWrapper(),this.createPrimaryButton(),this.createSecondaryButton(),this.setActiveElem([this.element,this.secondaryBtnObj.element]),this.setAria(),this.wireEvents()},n.prototype.initWrapper=function(){this.wrapper||(this.wrapper=this.createElement("div",{className:"e-"+this.getModuleName()+"-wrapper"}),this.element.parentNode.insertBefore(this.wrapper,this.element)),this.element.classList.remove("e-"+this.getModuleName()),this.enableRtl&&this.wrapper.classList.add(y),this.cssClass&&t.addClass([this.wrapper],this.cssClass.split(" "))},n.prototype.createPrimaryButton=function(){var e={cssClass:this.cssClass,enableRtl:this.enableRtl,iconCss:this.iconCss,iconPosition:this.iconPosition,content:this.content,disabled:this.disabled};this.primaryBtnObj=new s.Button(e),this.primaryBtnObj.createElement=this.createElement,this.primaryBtnObj.appendTo(this.element),this.element.classList.add("e-"+this.getModuleName()),this.element.type="button",this.wrapper.appendChild(this.element)},n.prototype.createSecondaryButton=function(){var e=this,s=this.createElement("button",{className:"e-icon-btn",attrs:{tabindex:"-1"},id:this.element.id+"_dropdownbtn"});this.wrapper.appendChild(s);var n={cssClass:this.cssClass,disabled:this.disabled,enableRtl:this.enableRtl,items:this.items,target:this.target,beforeItemRender:function(t){e.trigger("beforeItemRender",t)},beforeOpen:function(t){e.trigger("beforeOpen",t)},beforeClose:function(t){e.trigger("beforeClose",t)},open:function(t){e.trigger("open",t)},close:function(t){e.trigger("close",t)},select:function(t){e.trigger("select",t)}};this.secondaryBtnObj=new d(n),this.secondaryBtnObj.createElement=this.createElement,this.secondaryBtnObj.appendTo(s),this.secondaryBtnObj.dropDown.relateTo=this.wrapper,this.dropDown=this.secondaryBtnObj.dropDown,this.secondaryBtnObj.activeElem=[this.element,this.secondaryBtnObj.element],t.EventHandler.remove(this.getPopUpElement(),"keydown",this.secondaryBtnObj.keyBoardHandler),this.secondaryBtnObj.element.querySelector(".e-btn-icon").classList.remove("e-icon-right")},n.prototype.setAria=function(){t.attributes(this.element,{role:"listbox","aria-expanded":"false","aria-haspopup":"true","aria-label":this.element.textContent+" splitbutton","aria-owns":this.secondaryBtnObj.dropDown.element.id})},n.prototype.getModuleName=function(){return"split-btn"},n.prototype.toggle=function(){this.secondaryBtnObj.toggle()},n.prototype.destroy=function(){var s=this,n=[y],i=document.getElementById(this.element.id);this.cssClass&&(n=n.concat(this.cssClass.split(" "))),i&&i.parentElement===this.wrapper&&(this.wrapper.tagName===f?(this.wrapper.innerHTML="",t.removeClass([this.wrapper],["e-rtl","e-"+this.getModuleName()+"-wrapper"]),t.removeClass([this.wrapper],this.cssClass.split(" "))):(t.removeClass([this.element],n),["role","aria-label","aria-haspopup","aria-expanded","aria-owns","type"].forEach(function(e){s.element.removeAttribute(e)}),this.wrapper.parentNode.insertBefore(this.element,this.wrapper),t.remove(this.wrapper)),this.unWireEvents()),this.primaryBtnObj.destroy(),this.secondaryBtnObj.destroy(),e.prototype.destroy.call(this),this.element.getAttribute("class")||this.element.removeAttribute("class")},n.prototype.wireEvents=function(){t.EventHandler.add(this.element,"click",this.primaryBtnClickHandler,this),t.EventHandler.add(this.getPopUpElement(),"keydown",this.keyBoardHandler,this),new t.KeyboardEvents(this.element,{keyAction:this.btnKeyBoardHandler.bind(this),keyConfigs:{altdownarrow:"alt+downarrow"}})},n.prototype.unWireEvents=function(){t.EventHandler.remove(this.element,"click",this.primaryBtnClickHandler),t.getInstance(this.element,t.KeyboardEvents).destroy()},n.prototype.primaryBtnClickHandler=function(){this.trigger("click",{element:this.element})},n.prototype.btnKeyBoardHandler=function(e){switch(e.action){case"altdownarrow":this.clickHandler(e)}},n.prototype.onPropertyChanged=function(e,s){var n=["content","iconCss","iconPosition","cssClass","disabled","enableRtl"];this.primaryBtnObj.setProperties(i(e,n)),n=["items","beforeOpen","beforeItemRender","select","open","close","cssClass","disabled","enableRtl"],this.secondaryBtnObj.setProperties(i(e,n));for(var o=0,r=Object.keys(e);o<r.length;o++)switch(r[o]){case"cssClass":s.cssClass&&t.removeClass([this.wrapper],s.cssClass.split(" ")),t.addClass([this.wrapper],e.cssClass.split(" "));break;case"enableRtl":e.enableRtl?t.addClass([this.wrapper],y):t.removeClass([this.wrapper],y)}},m([t.Property("")],n.prototype,"content",void 0),m([t.Property("")],n.prototype,"cssClass",void 0),m([t.Property(!1)],n.prototype,"disabled",void 0),m([t.Property("")],n.prototype,"iconCss",void 0),m([t.Property("Left")],n.prototype,"iconPosition",void 0),m([t.Collection([],p)],n.prototype,"items",void 0),m([t.Property("")],n.prototype,"target",void 0),m([t.Event()],n.prototype,"beforeItemRender",void 0),m([t.Event()],n.prototype,"beforeOpen",void 0),m([t.Event()],n.prototype,"beforeClose",void 0),m([t.Event()],n.prototype,"click",void 0),m([t.Event()],n.prototype,"close",void 0),m([t.Event()],n.prototype,"open",void 0),m([t.Event()],n.prototype,"select",void 0),m([t.Event()],n.prototype,"created",void 0),n=m([t.NotifyPropertyChanges],n)}(d),g=function(){var e=function(t,s){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var s in t)t.hasOwnProperty(s)&&(e[s]=t[s])})(t,s)};return function(t,s){function n(){this.constructor=t}e(t,s),t.prototype=null===s?Object.create(s):(n.prototype=s.prototype,new n)}}(),b=function(e,t,s,n){var i,o=arguments.length,r=o<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,s):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,s,n);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(o<3?i(r):o>3?i(t,s,r):i(t,s))||r);return o>3&&r&&Object.defineProperty(t,s,r),r},C="e-btn-content",E=function(e){function s(t,s){var n=e.call(this,t,s)||this;return n.step=1,n}return g(s,e),s.prototype.preRender=function(){e.prototype.preRender.call(this)},s.prototype.render=function(){e.prototype.render.call(this),this.init(),this.wireEvents(),this.setAria()},s.prototype.start=function(e){this.isPaused=!1,this.startProgress(e||this.percent,this.progressTime)},s.prototype.stop=function(){this.isPaused=!0,cancelAnimationFrame(this.timerId)},s.prototype.getModuleName=function(){return"progress-btn"},s.prototype.destroy=function(){var s=this,n=["e-hide-spinner","e-progress-active","e-round-corner","e-"+e.prototype.getModuleName.call(this),"e-spin-"+this.spinSettings.position.toLowerCase()];e.prototype.destroy.call(this),this.unWireEvents(),this.element.innerHTML="",this.cssClass&&(n=n.concat(this.cssClass.split(" "))),t.removeClass([this.element],n),(this.element.getAttribute("class")?["aria-label","aria-valuemin","aria-valuemax","aria-valuenow"]:["aria-label","aria-valuemin","aria-valuemax","aria-valuenow","class"]).forEach(function(e){s.element.removeAttribute(e)}),this.disabled&&this.element.removeAttribute("disabled")},s.prototype.init=function(){this.element.classList.add("e-"+e.prototype.getModuleName.call(this)),this.setContent(),this.createSpinner(),this.enableProgress&&this.createProgress()},s.prototype.createSpinner=function(){var e=this.createElement("span",{className:"e-spinner"});this.setSpinPosition(e),n.createSpinner({target:e,width:this.spinSettings.width||16,template:this.spinSettings.template},this.createElement)},s.prototype.setSpinPosition=function(e){var t=this.spinSettings.position||"Left";"Left"===t||"Top"===t?this.element.insertBefore(e,this.element.getElementsByClassName(C)[0]):this.element.appendChild(e),this.element.classList.add("e-spin-"+t.toLowerCase())},s.prototype.createProgress=function(){this.element.appendChild(this.createElement("span",{className:"e-progress"}))},s.prototype.setContent=function(){var e=this.element.innerHTML;this.element.innerHTML="",this.element.appendChild(this.createElement("span",{className:C,innerHTML:e}))},s.prototype.clickHandler=function(){this.element.classList.contains("e-progress-active")||this.startProgress()},s.prototype.startProgress=function(e,t){var s=this,i=this.element.classList,o=i.contains("e-vertical");i.add("e-progress-active"),i.contains("e-hide-spinner")||(n.showSpinner(this.element),this.enableProgress||setTimeout(function(){s.hideSpin()},this.duration)),this.enableProgress&&this.startAnimate(Date.now(),t||0,t?Date.now()-1*this.duration/100:Date.now(),e||0,0,this.step,0,o),this.startContAnimate()},s.prototype.startAnimate=function(e,t,s,n,i,o,r,a){var p=this;try{var l,c=e-s,h=this.duration*o/100,d=c?c<h?c-h:c%h:0;this.progressTime=t=t+c-d,s=e-d,n+=(c-d)/this.duration*100,l={percent:i=(t-r)%h==0||100===n?n:i,currentDuration:t,step:o},0===n?this.trigger("begin",l):100===n||t===this.duration?this.trigger("end",l):this.trigger("progress",l),n!==l.percent&&l.percent!==i&&(n=l.percent),this.percent=n,this.step=l.step,(t-r)%(this.duration*l.step/100)!=0&&100!==n||(this.timerId=requestAnimationFrame(function(){p.element.getElementsByClassName("e-progress")[0].style[a?"height":"width"]=n+"%",p.element.setAttribute("aria-valuenow",n.toString())}),i=n,r=t),this.isPaused||(t<this.duration&&n<100?setTimeout(function(){p.startAnimate(Date.now(),t,s,n,i,l.step,r,a)},this.duration/100-d):setTimeout(function(){p.progressTime=p.percent=0,p.element.getElementsByClassName("e-progress")[0].style[a?"height":"width"]="0%",p.element.setAttribute("aria-valuenow","0"),p.hideSpin()},100))}catch(e){cancelAnimationFrame(this.timerId),this.trigger("fail",e)}},s.prototype.startContAnimate=function(){var e=this,s=this.element.getElementsByClassName(C)[0];"None"!==this.animationSettings.effect?new t.Animation({}).animate(s,{duration:this.animationSettings.duration,name:"Progress"+this.animationSettings.effect,timingFunction:this.animationSettings.easing,begin:function(){"Center"===e.spinSettings.position&&e.setSpinnerSize()},end:function(){s.classList.add("e-animate-end")}}):"Center"===this.spinSettings.position&&this.setSpinnerSize()},s.prototype.setSpinnerSize=function(){var e=this.element.getElementsByClassName(C)[0],t=this.element.getElementsByClassName("e-spinner")[0];t.style.width=Math.max(t.offsetWidth,e.offsetWidth)+"px",t.style.height=Math.max(t.offsetHeight,e.offsetHeight)+"px",e.classList.add("e-cont-animate")},s.prototype.hideSpin=function(){var e=this.element.getElementsByClassName(C)[0];if(this.element.classList.contains("e-hide-spinner")||n.hideSpinner(this.element),this.element.classList.remove("e-progress-active"),"None"!==this.animationSettings.effect&&e.classList.remove("e-animate-end"),"Center"===this.spinSettings.position){var t=this.element.getElementsByClassName("e-spinner")[0];e.classList.remove("e-cont-animate"),t.style.width="auto",t.style.height="auto"}},s.prototype.setIconSpan=function(){var e=this.element.getElementsByClassName(C)[0],t=this.element.getElementsByClassName("e-btn-icon")[0];!e.childNodes[0]||"Left"!==this.iconPosition&&"Top"!==this.iconPosition?e.appendChild(t):e.insertBefore(t,e.childNodes[0])},s.prototype.setAria=function(){t.attributes(this.element,{"aria-label":this.element.textContent+" progress","aria-valuemin":"0","aria-valuemax":"100","aria-valuenow":"0"})},s.prototype.wireEvents=function(){t.EventHandler.add(this.element,"click",this.clickHandler,this)},s.prototype.unWireEvents=function(){t.EventHandler.remove(this.element,"click",this.clickHandler)},s.prototype.onPropertyChanged=function(s,n){e.prototype.onPropertyChanged.call(this,s,n);for(var i=0,o=Object.keys(s);i<o.length;i++)switch(o[i]){case"content":this.setContent(),this.createSpinner(),this.enableProgress&&this.createProgress(),this.element.setAttribute("aria-label",this.element.textContent+" progress");break;case"iconCss":n.iconCss||this.setIconSpan();break;case"iconPosition":this.setIconSpan();break;case"enableProgress":s.enableProgress?this.createProgress():t.remove(this.element.getElementsByClassName("e-progress")[0])}},b([t.Property(!1)],s.prototype,"enableProgress",void 0),b([t.Property(2e3)],s.prototype,"duration",void 0),b([t.Property("Left")],s.prototype,"iconPosition",void 0),b([t.Property("")],s.prototype,"iconCss",void 0),b([t.Property(!1)],s.prototype,"disabled",void 0),b([t.Property(!1)],s.prototype,"isPrimary",void 0),b([t.Property("")],s.prototype,"cssClass",void 0),b([t.Property("")],s.prototype,"content",void 0),b([t.Property(!1)],s.prototype,"isToggle",void 0),b([t.Property({template:null,width:16,position:"Left"})],s.prototype,"spinSettings",void 0),b([t.Property({duration:400,effect:"None",easing:"ease"})],s.prototype,"animationSettings",void 0),b([t.Event()],s.prototype,"created",void 0),b([t.Event()],s.prototype,"begin",void 0),b([t.Event()],s.prototype,"progress",void 0),b([t.Event()],s.prototype,"end",void 0),b([t.Event()],s.prototype,"fail",void 0),s=b([t.NotifyPropertyChanges],s)}(s.Button);return e.getModel=i,e.Item=p,e.DropDownButton=d,e.SplitButton=v,e.createButtonGroup=o,e.ProgressButton=E,e}({},ej.base,ej.buttons,ej.popups),this.ejs=ej;
+this.ej=this.ej||{},this.ej.splitbuttons=function(e,t,s,n){"use strict";function i(e,s){for(var n=t.extend({},e),i=0,o=Object.keys(n);i<o.length;i++){var r=o[i];s.indexOf(r)<0&&t.deleteObject(n,r)}return n}function o(e,n,i){void 0===n&&(n={});var o,r,a,p;t.isNullOrUndefined(i)&&(i=t.createElement);var l=document.querySelector(e);t.addClass([l],["e-btn-group"]),l.setAttribute("role","group");var c=l.children;n.buttons=n.buttons||[];for(var h=0,d=0;d<c.length;h++,d++)o=c[d],null!==(p=n.buttons[h])&&("BUTTON"===o.tagName?r=o:(r=i("label"),(a=c[d+1])?l.insertBefore(r,a):l.appendChild(r),o.id&&r.setAttribute("for",o.id),p&&p.disabled&&(o.disabled=!0),d++),n.cssClass&&p&&!p.cssClass&&(p.cssClass=n.cssClass),new s.Button(p||{},r));return l}var r=function(){var e=function(t,s){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var s in t)t.hasOwnProperty(s)&&(e[s]=t[s])})(t,s)};return function(t,s){function n(){this.constructor=t}e(t,s),t.prototype=null===s?Object.create(s):(n.prototype=s.prototype,new n)}}(),a=function(e,t,s,n){var i,o=arguments.length,r=o<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,s):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,s,n);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(o<3?i(r):o>3?i(t,s,r):i(t,s))||r);return o>3&&r&&Object.defineProperty(t,s,r),r},p=function(e){function s(){return null!==e&&e.apply(this,arguments)||this}return r(s,e),a([t.Property("")],s.prototype,"iconCss",void 0),a([t.Property("")],s.prototype,"id",void 0),a([t.Property(!1)],s.prototype,"separator",void 0),a([t.Property("")],s.prototype,"text",void 0),a([t.Property("")],s.prototype,"url",void 0),s}(t.ChildProperty),l=function(){var e=function(t,s){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var s in t)t.hasOwnProperty(s)&&(e[s]=t[s])})(t,s)};return function(t,s){function n(){this.constructor=t}e(t,s),t.prototype=null===s?Object.create(s):(n.prototype=s.prototype,new n)}}(),c=function(e,t,s,n){var i,o=arguments.length,r=o<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,s):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,s,n);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(o<3?i(r):o>3?i(t,s,r):i(t,s))||r);return o>3&&r&&Object.defineProperty(t,s,r),r},h={DISABLED:"e-disabled",FOCUS:"e-focused",ICON:"e-menu-icon",ITEM:"e-item",POPUP:"e-dropdown-popup",RTL:"e-rtl",SEPARATOR:"e-separator",VERTICAL:"e-vertical"},d=function(e){function o(t,s){return e.call(this,t,s)||this}return l(o,e),o.prototype.preRender=function(){},o.prototype.getPersistData=function(){return this.addOnPersist([])},o.prototype.toggle=function(){this.canOpen()?this.openPopUp():this.closePopup()},o.prototype.render=function(){this.initialize(),this.disabled||this.wireEvents()},o.prototype.createPopup=function(){var e,s=this.createElement("div",{className:h.POPUP,id:this.element.id+"-popup"});document.body.appendChild(s),this.dropDown=new n.Popup(s,{relateTo:this.element,collision:{X:"fit",Y:"flip"},position:{X:"left",Y:"bottom"},targetType:"relative",content:this.target?this.getTargetElement():"",enableRtl:this.enableRtl}),"fixed"===this.dropDown.element.style.position&&this.dropDown.refreshPosition(this.element),this.dropDown.hide(),t.attributes(this.element,(e={},e.role="menu",e["aria-haspopup"]=this.items.length||this.target?"true":"false",e["aria-expanded"]="false",e["aria-owns"]=this.getPopUpElement().id,e.type="button",e)),this.cssClass&&t.addClass([s],this.cssClass.split(" "))},o.prototype.getTargetElement=function(){return"string"==typeof this.target?t.select(this.target):this.target},o.prototype.createItems=function(e){for(var s,n,i,o,r=this.hasIcon(e,"iconCss"),a=this.createElement("ul",{attrs:{tabindex:"0"}}),p=0;p<e.length;p++)n=e[p],i=this.createElement("li",{innerHTML:n.url?"":n.text,className:n.separator?h.ITEM+" "+h.SEPARATOR:h.ITEM,attrs:{role:"menuItem",tabindex:"-1"},id:n.id?n.id:t.getUniqueID("e-"+this.getModuleName()+"-item")}),n.iconCss?(s=this.createElement("span",{className:h.ICON+" "+n.iconCss}),i.insertBefore(s,i.childNodes[0])):r&&!n.separator&&i.classList.add("e-blank-icon"),n.url&&i.appendChild(this.createAnchor(n)),o={item:n,element:i},this.trigger("beforeItemRender",o),a.appendChild(i);return a},o.prototype.hasIcon=function(e,t){for(var s=0,n=e.length;s<n;s++)if(e[s][t])return!0;return!1},o.prototype.createAnchor=function(e){return this.createElement("a",{className:"e-menu-text e-menu-url",innerHTML:e.text,attrs:{href:e.url}})},o.prototype.initialize=function(){this.button=new s.Button({iconCss:this.iconCss,iconPosition:this.iconPosition,cssClass:this.cssClass,content:this.content,disabled:this.disabled,enableRtl:this.enableRtl,enablePersistence:this.enablePersistence}),this.button.createElement=this.createElement,this.button.appendTo(this.element),this.element.id||(this.element.id=t.getUniqueID("e-"+this.getModuleName())),this.appendArrowSpan(),this.createPopup(),this.setActiveElem([this.element])},o.prototype.appendArrowSpan=function(){this.element.appendChild(this.createElement("span",{className:"e-btn-icon e-icons e-icon-"+(this.cssClass.indexOf(h.VERTICAL)>-1?"bottom":"right")+" e-caret"}))},o.prototype.setActiveElem=function(e){this.activeElem=e},o.prototype.getModuleName=function(){return"dropdown-btn"},o.prototype.canOpen=function(){return this.getPopUpElement().classList.contains("e-popup-close")},o.prototype.destroy=function(){var s=this;if(e.prototype.destroy.call(this),"dropdown-btn"===this.getModuleName()){var n;this.element.querySelector("span.e-caret")&&t.detach(this.element.querySelector("span.e-caret")),this.cssClass&&(n=this.cssClass.split(" ")),this.button.destroy(),n&&t.removeClass([this.element],n),t.removeClass(this.activeElem,["e-active"]),(this.element.getAttribute("class")?["role","aria-haspopup","aria-expanded","aria-owns","type"]:["role","aria-haspopup","aria-expanded","aria-owns","type","class"]).forEach(function(e){s.element.removeAttribute(e)}),this.dropDown.destroy();var i=document.getElementById(this.getPopUpElement().id);i&&(t.removeClass([i],["e-popup-open","e-popup-close"]),t.detach(i)),this.disabled||this.unWireEvents()}},o.prototype.getPopUpElement=function(){return this.dropDown.element},o.prototype.getULElement=function(){return this.getPopUpElement().children[0]},o.prototype.wireEvents=function(){var e=this.getPopUpElement();this.delegateMousedownHandler=this.mousedownHandler.bind(this),t.EventHandler.add(document,"mousedown touchstart",this.delegateMousedownHandler,this),t.EventHandler.add(this.element,"click",this.clickHandler,this),t.EventHandler.add(e,"click",this.clickHandler,this),t.EventHandler.add(this.element,"keydown",this.keyBoardHandler,this),t.EventHandler.add(e,"keydown",this.keyBoardHandler,this),this.rippleFn=t.rippleEffect(e,{selector:"."+h.ITEM})},o.prototype.keyBoardHandler=function(e){if(e.target!==this.element||9!==e.keyCode&&(e.altKey||40!==e.keyCode)&&38!==e.keyCode)switch(e.keyCode){case 38:case 40:!e.altKey||38!==e.keyCode&&40!==e.keyCode?this.upDownKeyHandler(e):this.keyEventHandler(e);break;case 9:case 13:case 27:case 32:this.keyEventHandler(e)}},o.prototype.upDownKeyHandler=function(e){if(!this.target||38!==e.keyCode&&40!==e.keyCode){e.preventDefault();var s=this.getULElement(),n=40===e.keyCode?0:s.childElementCount-1,i=n,o=null;this.removeCustomSelection();for(var r=0,a=s.children.length;r<a;r++)s.children[r].classList.contains(h.FOCUS)&&(i=r,(o=s.children[r]).classList.remove(h.FOCUS),40===e.keyCode?i++:i--,i===(40===e.keyCode?s.childElementCount:-1)&&(i=n));o=s.children[i],-1!==(i=this.isValidLI(o,i,e.keyCode))&&(t.addClass([s.children[i]],h.FOCUS),s.children[i].focus())}},o.prototype.removeCustomSelection=function(){var e=this.getULElement().querySelector(".e-selected");e&&e.classList.remove("e-selected")},o.prototype.isValidLI=function(e,t,s,n){if(void 0===n&&(n=0),(e.classList.contains(h.SEPARATOR)||e.classList.contains(h.DISABLED))&&(t===(40===s?this.items.length-1:0)?t=40===s?0:this.items.length-1:40===s?t++:t--),(e=this.getULElement().children[t]).classList.contains(h.SEPARATOR)||e.classList.contains(h.DISABLED)){if(++n===this.items.length)return t=-1;t=this.isValidLI(e,t,s,n)}return t},o.prototype.keyEventHandler=function(e){(!this.target||13!==e.keyCode&&9!==e.keyCode)&&(9!==e.keyCode&&e.preventDefault(),27===e.keyCode||38===e.keyCode||9===e.keyCode?this.canOpen()||this.closePopup(e,this.element):this.clickHandler(e))},o.prototype.getLI=function(e){return"LI"===e.tagName?e:t.closest(e,"li")},o.prototype.mousedownHandler=function(e){var s=e.target;this.canOpen()||t.closest(s,"#"+this.getPopUpElement().id)||t.closest(s,"#"+this.element.id)||this.closePopup(e)},o.prototype.clickHandler=function(e){var s=e.target,n=this.canOpen();if(t.closest(s,"#"+this.element.id))n?this.openPopUp(e):this.closePopup(e,this.activeElem[0]);else if(t.closest(s,"#"+this.getPopUpElement().id)){var i=void 0,o=void 0,r=void 0,a=this.getLI(s);a&&(o=Array.prototype.indexOf.call(this.getULElement().children,a),(r=this.items[o])&&(i={element:a,item:r},this.trigger("select",i)),this.closePopup(e,this.activeElem[0]))}},o.prototype.openPopUp=function(e){void 0===e&&(e=null),this.target||this.getPopUpElement().appendChild(this.createItems(this.items));var s=this.getULElement(),n={element:s,items:this.items,event:e,cancel:!1};if(this.trigger("beforeOpen",n),!n.cancel){this.dropDown.show(null,this.element),t.addClass([this.element],"e-active"),this.element.setAttribute("aria-expanded","true"),s.focus();var i={element:s,items:this.items};this.trigger("open",i)}},o.prototype.closePopup=function(e,s){void 0===e&&(e=null);var n=this.getULElement(),i={element:n,items:this.items,event:e,cancel:!1};if(this.trigger("beforeClose",i),!i.cancel){this.removeCustomSelection(),this.dropDown.hide(),t.removeClass(this.activeElem,"e-active"),this.element.setAttribute("aria-expanded","false"),s&&s.focus();var o={element:n,items:this.items};this.trigger("close",o),!this.target&&n&&t.detach(n)}},o.prototype.unWireEvents=function(){t.EventHandler.remove(document,"mousedown touchstart",this.delegateMousedownHandler),t.EventHandler.remove(this.element,"click",this.clickHandler),t.EventHandler.remove(this.getPopUpElement(),"click",this.clickHandler),t.EventHandler.remove(this.element,"keydown",this.keyBoardHandler),t.EventHandler.remove(this.getPopUpElement(),"keydown",this.keyBoardHandler),this.rippleFn()},o.prototype.onPropertyChanged=function(e,s){var n=["content","cssClass","iconCss","iconPosition","disabled","enableRtl"];this.button.setProperties(i(e,n));for(var o=this.getPopUpElement(),r=0,a=Object.keys(e);r<a.length;r++)switch(a[r]){case"content":this.element.querySelector("span.e-caret")||this.appendArrowSpan();break;case"disabled":e.disabled?(this.unWireEvents(),this.canOpen()||this.closePopup()):this.wireEvents();break;case"cssClass":if(e.cssClass.indexOf(h.VERTICAL)>-1){var p=this.element.querySelector("span.e-caret");t.classList(p,["e-icon-bottom"],["e-icon-right"])}s.cssClass&&t.removeClass([o],s.cssClass.split(" ")),e.cssClass&&t.addClass([o],e.cssClass.split(" "));break;case"enableRtl":o.classList.toggle(h.RTL);break;case"target":this.target=e.target,t.detach(this.getULElement()),o.appendChild(this.getTargetElement()),this.dropDown.content=this.getTargetElement();break;case"items":this.dropDown.refresh(),o.classList.contains("e-popup-open")&&t.classList(o,["e-popup-close"],["e-popup-open"])}},c([t.Property("")],o.prototype,"content",void 0),c([t.Property("")],o.prototype,"cssClass",void 0),c([t.Property(!1)],o.prototype,"disabled",void 0),c([t.Property("")],o.prototype,"iconCss",void 0),c([t.Property("Left")],o.prototype,"iconPosition",void 0),c([t.Collection([],p)],o.prototype,"items",void 0),c([t.Property("")],o.prototype,"target",void 0),c([t.Event()],o.prototype,"beforeItemRender",void 0),c([t.Event()],o.prototype,"beforeOpen",void 0),c([t.Event()],o.prototype,"beforeClose",void 0),c([t.Event()],o.prototype,"close",void 0),c([t.Event()],o.prototype,"open",void 0),c([t.Event()],o.prototype,"select",void 0),c([t.Event()],o.prototype,"created",void 0),o=c([t.NotifyPropertyChanges],o)}(t.Component),u=function(){var e=function(t,s){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var s in t)t.hasOwnProperty(s)&&(e[s]=t[s])})(t,s)};return function(t,s){function n(){this.constructor=t}e(t,s),t.prototype=null===s?Object.create(s):(n.prototype=s.prototype,new n)}}(),m=function(e,t,s,n){var i,o=arguments.length,r=o<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,s):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,s,n);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(o<3?i(r):o>3?i(t,s,r):i(t,s))||r);return o>3&&r&&Object.defineProperty(t,s,r),r},y="e-rtl",f="EJS-SPLITBUTTON",v=function(e){function n(t,s){return e.call(this,t,s)||this}return u(n,e),n.prototype.preRender=function(){var e=this.element;if(e.tagName===f){for(var s=t.getValue("ej2_instances",e),n=this.createElement("button",{attrs:{type:"button"}}),i=this.createElement(f,{className:"e-"+this.getModuleName()+"-wrapper"}),o=0,r=e.attributes.length;o<r;o++)n.setAttribute(e.attributes[o].nodeName,e.attributes[o].nodeValue);e.parentNode.insertBefore(i,e),t.detach(e),e=n,i.appendChild(e),t.setValue("ej2_instances",s,e),this.wrapper=i,this.element=e}this.element.id||(this.element.id=t.getUniqueID("e-"+this.getModuleName()))},n.prototype.render=function(){this.initWrapper(),this.createPrimaryButton(),this.createSecondaryButton(),this.setActiveElem([this.element,this.secondaryBtnObj.element]),this.setAria(),this.wireEvents()},n.prototype.initWrapper=function(){this.wrapper||(this.wrapper=this.createElement("div",{className:"e-"+this.getModuleName()+"-wrapper"}),this.element.parentNode.insertBefore(this.wrapper,this.element)),this.element.classList.remove("e-"+this.getModuleName()),this.enableRtl&&this.wrapper.classList.add(y),this.cssClass&&t.addClass([this.wrapper],this.cssClass.split(" "))},n.prototype.createPrimaryButton=function(){var e={cssClass:this.cssClass,enableRtl:this.enableRtl,iconCss:this.iconCss,iconPosition:this.iconPosition,content:this.content,disabled:this.disabled};this.primaryBtnObj=new s.Button(e),this.primaryBtnObj.createElement=this.createElement,this.primaryBtnObj.appendTo(this.element),this.element.classList.add("e-"+this.getModuleName()),this.element.type="button",this.wrapper.appendChild(this.element)},n.prototype.createSecondaryButton=function(){var e=this,s=this.createElement("button",{className:"e-icon-btn",attrs:{tabindex:"-1"},id:this.element.id+"_dropdownbtn"});this.wrapper.appendChild(s);var n={cssClass:this.cssClass,disabled:this.disabled,enableRtl:this.enableRtl,items:this.items,target:this.target,beforeItemRender:function(t){e.trigger("beforeItemRender",t)},beforeOpen:function(t){e.trigger("beforeOpen",t)},beforeClose:function(t){e.trigger("beforeClose",t)},open:function(t){e.trigger("open",t)},close:function(t){e.trigger("close",t)},select:function(t){e.trigger("select",t)}};this.secondaryBtnObj=new d(n),this.secondaryBtnObj.createElement=this.createElement,this.secondaryBtnObj.appendTo(s),this.secondaryBtnObj.dropDown.relateTo=this.wrapper,this.dropDown=this.secondaryBtnObj.dropDown,this.secondaryBtnObj.activeElem=[this.element,this.secondaryBtnObj.element],t.EventHandler.remove(this.getPopUpElement(),"keydown",this.secondaryBtnObj.keyBoardHandler),this.secondaryBtnObj.element.querySelector(".e-btn-icon").classList.remove("e-icon-right")},n.prototype.setAria=function(){t.attributes(this.element,{role:"listbox","aria-expanded":"false","aria-haspopup":"true","aria-label":this.element.textContent+" splitbutton","aria-owns":this.secondaryBtnObj.dropDown.element.id})},n.prototype.getModuleName=function(){return"split-btn"},n.prototype.toggle=function(){this.secondaryBtnObj.toggle()},n.prototype.destroy=function(){var s=this,n=[y],i=document.getElementById(this.element.id);this.cssClass&&(n=n.concat(this.cssClass.split(" "))),i&&i.parentElement===this.wrapper&&(this.wrapper.tagName===f?(this.wrapper.innerHTML="",t.removeClass([this.wrapper],["e-rtl","e-"+this.getModuleName()+"-wrapper"]),t.removeClass([this.wrapper],this.cssClass.split(" "))):(t.removeClass([this.element],n),["role","aria-label","aria-haspopup","aria-expanded","aria-owns","type"].forEach(function(e){s.element.removeAttribute(e)}),this.wrapper.parentNode.insertBefore(this.element,this.wrapper),t.remove(this.wrapper)),this.unWireEvents()),this.primaryBtnObj.destroy(),this.secondaryBtnObj.destroy(),e.prototype.destroy.call(this),this.element.getAttribute("class")||this.element.removeAttribute("class")},n.prototype.wireEvents=function(){t.EventHandler.add(this.element,"click",this.primaryBtnClickHandler,this),t.EventHandler.add(this.getPopUpElement(),"keydown",this.keyBoardHandler,this),new t.KeyboardEvents(this.element,{keyAction:this.btnKeyBoardHandler.bind(this),keyConfigs:{altdownarrow:"alt+downarrow"}})},n.prototype.unWireEvents=function(){t.EventHandler.remove(this.element,"click",this.primaryBtnClickHandler),t.getInstance(this.element,t.KeyboardEvents).destroy()},n.prototype.primaryBtnClickHandler=function(){this.trigger("click",{element:this.element})},n.prototype.btnKeyBoardHandler=function(e){switch(e.action){case"altdownarrow":this.clickHandler(e)}},n.prototype.onPropertyChanged=function(e,s){var n=["content","iconCss","iconPosition","cssClass","disabled","enableRtl"];this.primaryBtnObj.setProperties(i(e,n)),n=["items","beforeOpen","beforeItemRender","select","open","close","cssClass","disabled","enableRtl"],this.secondaryBtnObj.setProperties(i(e,n));for(var o=0,r=Object.keys(e);o<r.length;o++)switch(r[o]){case"cssClass":s.cssClass&&t.removeClass([this.wrapper],s.cssClass.split(" ")),t.addClass([this.wrapper],e.cssClass.split(" "));break;case"enableRtl":e.enableRtl?t.addClass([this.wrapper],y):t.removeClass([this.wrapper],y)}},m([t.Property("")],n.prototype,"content",void 0),m([t.Property("")],n.prototype,"cssClass",void 0),m([t.Property(!1)],n.prototype,"disabled",void 0),m([t.Property("")],n.prototype,"iconCss",void 0),m([t.Property("Left")],n.prototype,"iconPosition",void 0),m([t.Collection([],p)],n.prototype,"items",void 0),m([t.Property("")],n.prototype,"target",void 0),m([t.Event()],n.prototype,"beforeItemRender",void 0),m([t.Event()],n.prototype,"beforeOpen",void 0),m([t.Event()],n.prototype,"beforeClose",void 0),m([t.Event()],n.prototype,"click",void 0),m([t.Event()],n.prototype,"close",void 0),m([t.Event()],n.prototype,"open",void 0),m([t.Event()],n.prototype,"select",void 0),m([t.Event()],n.prototype,"created",void 0),n=m([t.NotifyPropertyChanges],n)}(d),g=function(){var e=function(t,s){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var s in t)t.hasOwnProperty(s)&&(e[s]=t[s])})(t,s)};return function(t,s){function n(){this.constructor=t}e(t,s),t.prototype=null===s?Object.create(s):(n.prototype=s.prototype,new n)}}(),b=function(e,t,s,n){var i,o=arguments.length,r=o<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,s):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,s,n);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(o<3?i(r):o>3?i(t,s,r):i(t,s))||r);return o>3&&r&&Object.defineProperty(t,s,r),r},C="e-btn-content",P=function(e){function s(){return null!==e&&e.apply(this,arguments)||this}return g(s,e),b([t.Property(null)],s.prototype,"template",void 0),b([t.Property(16)],s.prototype,"width",void 0),b([t.Property("Left")],s.prototype,"position",void 0),s}(t.ChildProperty),E=function(e){function s(){return null!==e&&e.apply(this,arguments)||this}return g(s,e),b([t.Property(400)],s.prototype,"duration",void 0),b([t.Property("None")],s.prototype,"effect",void 0),b([t.Property("ease")],s.prototype,"easing",void 0),s}(t.ChildProperty),w=function(e){function s(t,s){var n=e.call(this,t,s)||this;return n.step=1,n}return g(s,e),s.prototype.preRender=function(){e.prototype.preRender.call(this)},s.prototype.render=function(){e.prototype.render.call(this),this.init(),this.wireEvents(),this.setAria()},s.prototype.start=function(e){this.isPaused=!1,this.startProgress(e||this.percent,this.progressTime)},s.prototype.stop=function(){this.isPaused=!0,cancelAnimationFrame(this.timerId)},s.prototype.getModuleName=function(){return"progress-btn"},s.prototype.destroy=function(){var s=this,n=["e-hide-spinner","e-progress-active","e-round-corner","e-"+e.prototype.getModuleName.call(this),"e-spin-"+this.spinSettings.position.toLowerCase()];e.prototype.destroy.call(this),this.unWireEvents(),this.element.innerHTML="",this.cssClass&&(n=n.concat(this.cssClass.split(" "))),t.removeClass([this.element],n),(this.element.getAttribute("class")?["aria-label","aria-valuemin","aria-valuemax","aria-valuenow"]:["aria-label","aria-valuemin","aria-valuemax","aria-valuenow","class"]).forEach(function(e){s.element.removeAttribute(e)}),this.disabled&&this.element.removeAttribute("disabled")},s.prototype.init=function(){this.element.classList.add("e-"+e.prototype.getModuleName.call(this)),this.setContent(),this.createSpinner(),this.enableProgress&&this.createProgress()},s.prototype.createSpinner=function(){var e=this.createElement("span",{className:"e-spinner"});this.setSpinPosition(e),n.createSpinner({target:e,width:this.spinSettings.width||16,template:this.spinSettings.template},this.createElement)},s.prototype.getSpinner=function(){return this.element.getElementsByClassName("e-spinner")[0]},s.prototype.getProgress=function(){return this.element.getElementsByClassName("e-progress")[0]},s.prototype.setSpinPosition=function(e){var t=this.spinSettings.position||"Left";"Left"===t||"Top"===t?this.element.insertBefore(e,this.element.getElementsByClassName(C)[0]):this.element.appendChild(e),this.element.classList.add("e-spin-"+t.toLowerCase())},s.prototype.createProgress=function(){this.element.appendChild(this.createElement("span",{className:"e-progress"}))},s.prototype.setContent=function(){var e=this.element.innerHTML;this.element.innerHTML="",this.element.appendChild(this.createElement("span",{className:C,innerHTML:e}))},s.prototype.clickHandler=function(){this.element.classList.contains("e-progress-active")||this.startProgress()},s.prototype.startProgress=function(e,t){var s=this.element.classList,i=s.contains("e-vertical");s.add("e-progress-active"),s.contains("e-hide-spinner")||n.showSpinner(this.element),this.startAnimate(Date.now(),t||0,t?Date.now()-1*this.duration/100:Date.now(),e||0,0,this.step,0,i),this.startContAnimate()},s.prototype.startAnimate=function(e,t,s,n,i,o,r,a){var p=this;try{var l,c=e-s,h=this.duration*o/100,d=c?c<h?c-h:c%h:0;this.progressTime=t=t+c-d,s=e-d,n+=(c-d)/this.duration*100,l={percent:i=(t-r)%h==0||100===n?n:i,currentDuration:t,step:o},0===n?this.trigger("begin",l):100===n||t===this.duration?this.trigger("end",l):this.trigger("progress",l),n!==l.percent&&l.percent!==i&&(n=l.percent),this.percent=n,this.step=l.step,(t-r)%(this.duration*l.step/100)!=0&&100!==n||(this.timerId=requestAnimationFrame(function(){p.enableProgress&&(p.getProgress().style[a?"height":"width"]=n+"%"),p.element.setAttribute("aria-valuenow",n.toString())}),i=n,r=t),this.isPaused||(t<this.duration&&n<100?setTimeout(function(){p.startAnimate(Date.now(),t,s,n,i,l.step,r,a)},this.duration/100-d):setTimeout(function(){p.progressTime=p.percent=0,p.enableProgress&&(p.getProgress().style[a?"height":"width"]="0%"),p.element.setAttribute("aria-valuenow","0"),p.hideSpin()},100))}catch(e){cancelAnimationFrame(this.timerId),this.trigger("fail",e)}},s.prototype.startContAnimate=function(){var e=this,s=this.element.getElementsByClassName(C)[0];"None"!==this.animationSettings.effect?new t.Animation({}).animate(s,{duration:this.animationSettings.duration,name:"Progress"+this.animationSettings.effect,timingFunction:this.animationSettings.easing,begin:function(){"Center"===e.spinSettings.position&&e.setSpinnerSize()},end:function(){s.classList.add("e-animate-end")}}):"Center"===this.spinSettings.position&&this.setSpinnerSize()},s.prototype.setSpinnerSize=function(){var e=this.element.getElementsByClassName(C)[0],t=this.getSpinner();t.style.width=Math.max(t.offsetWidth,e.offsetWidth)+"px",t.style.height=Math.max(t.offsetHeight,e.offsetHeight)+"px",e.classList.add("e-cont-animate")},s.prototype.hideSpin=function(){var e=this.element.getElementsByClassName(C)[0];if(this.element.classList.contains("e-hide-spinner")||n.hideSpinner(this.element),this.element.classList.remove("e-progress-active"),"None"!==this.animationSettings.effect&&e.classList.remove("e-animate-end"),"Center"===this.spinSettings.position){var t=this.getSpinner();e.classList.remove("e-cont-animate"),t.style.width="auto",t.style.height="auto"}},s.prototype.setIconSpan=function(){var e=this.element.getElementsByClassName(C)[0],t=this.element.getElementsByClassName("e-btn-icon")[0];!e.childNodes[0]||"Left"!==this.iconPosition&&"Top"!==this.iconPosition?e.appendChild(t):e.insertBefore(t,e.childNodes[0])},s.prototype.setAria=function(){t.attributes(this.element,{"aria-label":this.element.textContent+" progress","aria-valuemin":"0","aria-valuemax":"100","aria-valuenow":"0"})},s.prototype.wireEvents=function(){t.EventHandler.add(this.element,"click",this.clickHandler,this)},s.prototype.unWireEvents=function(){t.EventHandler.remove(this.element,"click",this.clickHandler)},s.prototype.onPropertyChanged=function(s,n){var i=this.element;e.prototype.onPropertyChanged.call(this,s,n);for(var o=0,r=Object.keys(s);o<r.length;o++)switch(r[o]){case"content":this.setContent(),this.createSpinner(),this.enableProgress&&this.createProgress(),i.setAttribute("aria-label",i.textContent+" progress");break;case"iconCss":n.iconCss||this.setIconSpan();break;case"iconPosition":this.setIconSpan();break;case"enableProgress":s.enableProgress?this.createProgress():t.remove(this.getProgress());break;case"spinSettings":s.spinSettings.position&&(i.classList.remove("e-spin-"+n.spinSettings.position.toLowerCase()),this.setSpinPosition(this.getSpinner())),(s.spinSettings.template||s.spinSettings.width)&&(i.removeChild(this.getSpinner()),this.createSpinner())}},b([t.Property(!1)],s.prototype,"enableProgress",void 0),b([t.Property(2e3)],s.prototype,"duration",void 0),b([t.Property("Left")],s.prototype,"iconPosition",void 0),b([t.Property("")],s.prototype,"iconCss",void 0),b([t.Property(!1)],s.prototype,"disabled",void 0),b([t.Property(!1)],s.prototype,"isPrimary",void 0),b([t.Property("")],s.prototype,"cssClass",void 0),b([t.Property("")],s.prototype,"content",void 0),b([t.Property(!1)],s.prototype,"isToggle",void 0),b([t.Complex({},P)],s.prototype,"spinSettings",void 0),b([t.Complex({},E)],s.prototype,"animationSettings",void 0),b([t.Event()],s.prototype,"created",void 0),b([t.Event()],s.prototype,"begin",void 0),b([t.Event()],s.prototype,"progress",void 0),b([t.Event()],s.prototype,"end",void 0),b([t.Event()],s.prototype,"fail",void 0),s=b([t.NotifyPropertyChanges],s)}(s.Button);return e.getModel=i,e.Item=p,e.DropDownButton=d,e.SplitButton=v,e.createButtonGroup=o,e.SpinSettings=P,e.AnimationSettings=E,e.ProgressButton=w,e}({},ej.base,ej.buttons,ej.popups),this.ejs=ej;
 //# sourceMappingURL=ej2-splitbuttons.min.js.map

dist/global/index.d.ts

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

package.json

 {
   "name": "@syncfusion/ej2-splitbuttons",
-  "version": "16.3.34",
+  "version": "16.4.40-beta",
   "description": "A package of feature-rich Essential JS 2 components such as DropDownButton, SplitButton, ProgressButton and ButtonGroup.",
@@ -11,4 +11,4 @@ "author": "Syncfusion Inc.",
   "dependencies": {
-    "@syncfusion/ej2-base": "~16.3.34",
-    "@syncfusion/ej2-popups": "~16.3.34"
+    "@syncfusion/ej2-base": "~16.4.40-beta",
+    "@syncfusion/ej2-popups": "~16.4.40-beta"
   },
@@ -15,0 +15,0 @@ "devDependencies": {

src/progress-button/progress-button-model.d.ts

@@ -1,5 +0,64 @@
-import { Button, IconPosition } from '@syncfusion/ej2-buttons';import { EventHandler, Property, INotifyPropertyChanged, NotifyPropertyChanges, Animation, Effect, attributes } from '@syncfusion/ej2-base';import { EmitType, Event, BaseEventArgs, remove, removeClass } from '@syncfusion/ej2-base';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
-import {SpinSettings,AnimationSettings,ProgressEventArgs} from "./progress-button";
+import { Button, IconPosition } from '@syncfusion/ej2-buttons';import { EventHandler, Property, INotifyPropertyChanged, NotifyPropertyChanges, Animation, Effect, attributes } from '@syncfusion/ej2-base';import { EmitType, Event, BaseEventArgs, remove, removeClass, Complex, ChildProperty } from '@syncfusion/ej2-base';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
+import {SpinPosition,AnimationEffect,ProgressEventArgs} from "./progress-button";
 
 /**
+ * Interface for a class SpinSettings
+ */
+export interface SpinSettingsModel {
+
+    /**
+     * Specifies the template content to be displayed in a spinner.
+     * @default null
+     */
+    template?: string;
+
+    /**
+     * Sets the width of a spinner.
+     * @default 16
+     */
+    width?: string | number;
+
+    /**
+     * Specifies the position of a spinner in the progress button. The possible values are:
+     * * Left: The spinner will be positioned to the left of the text content.
+     * * Right: The spinner will be positioned to the right of the text content.
+     * * Top: The spinner will be positioned at the top of the text content.
+     * * Bottom: The spinner will be positioned at the bottom of the text content.
+     * * Center: The spinner will be positioned at the center of the progress button.
+     * @default 'Left'
+     * @aspType Syncfusion.EJ2.SplitButtons.SpinPosition
+     * @isEnumeration true
+     */
+    position?: SpinPosition;
+
+}
+
+/**
+ * Interface for a class AnimationSettings
+ */
+export interface AnimationSettingsModel {
+
+    /**
+     * Specifies the duration taken to animate.
+     * @default 400
+     */
+    duration?: number;
+
+    /**
+     * Specifies the effect of animation.
+     * @default 'None'
+     * @aspType Syncfusion.EJ2.SplitButtons.AnimationEffect
+     * @isEnumeration true
+     */
+    effect?: AnimationEffect;
+
+    /**
+     * Specifies the animation timing function.
+     * @default 'ease'
+     */
+    easing?: string;
+
+}
+
+/**
  * Interface for a class ProgressButton
@@ -72,3 +131,3 @@ */
      */
-    spinSettings?: SpinSettings;
+    spinSettings?: SpinSettingsModel;
 
@@ -78,3 +137,3 @@ /**
      */
-    animationSettings?: AnimationSettings;
+    animationSettings?: AnimationSettingsModel;
 
@@ -81,0 +140,0 @@ /**

src/progress-button/progress-button.d.ts

 import { Button, IconPosition } from '@syncfusion/ej2-buttons';
 import { INotifyPropertyChanged } from '@syncfusion/ej2-base';
-import { EmitType, BaseEventArgs } from '@syncfusion/ej2-base';
-import { ProgressButtonModel } from './progress-button-model';
+import { EmitType, BaseEventArgs, ChildProperty } from '@syncfusion/ej2-base';
+import { ProgressButtonModel, SpinSettingsModel, AnimationSettingsModel } from './progress-button-model';
+export declare class SpinSettings extends ChildProperty<SpinSettings> {
+    /**
+     * Specifies the template content to be displayed in a spinner.
+     * @default null
+     */
+    template: string;
+    /**
+     * Sets the width of a spinner.
+     * @default 16
+     */
+    width: string | number;
+    /**
+     * Specifies the position of a spinner in the progress button. The possible values are:
+     * * Left: The spinner will be positioned to the left of the text content.
+     * * Right: The spinner will be positioned to the right of the text content.
+     * * Top: The spinner will be positioned at the top of the text content.
+     * * Bottom: The spinner will be positioned at the bottom of the text content.
+     * * Center: The spinner will be positioned at the center of the progress button.
+     * @default 'Left'
+     * @aspType Syncfusion.EJ2.SplitButtons.SpinPosition
+     * @isEnumeration true
+     */
+    position: SpinPosition;
+}
+export declare class AnimationSettings extends ChildProperty<AnimationSettings> {
+    /**
+     * Specifies the duration taken to animate.
+     * @default 400
+     */
+    duration: number;
+    /**
+     * Specifies the effect of animation.
+     * @default 'None'
+     * @aspType Syncfusion.EJ2.SplitButtons.AnimationEffect
+     * @isEnumeration true
+     */
+    effect: AnimationEffect;
+    /**
+     * Specifies the animation timing function.
+     * @default 'ease'
+     */
+    easing: string;
+}
 /**
@@ -78,7 +121,7 @@ * The ProgressButton visualizes the progression of an operation to indicate the user
      */
-    spinSettings: SpinSettings;
+    spinSettings: SpinSettingsModel;
     /**
      * Specifies the animation settings.
      */
-    animationSettings: AnimationSettings;
+    animationSettings: AnimationSettingsModel;
     /**
@@ -146,2 +189,4 @@ * Triggers once the component rendering is completed.
     private createSpinner;
+    private getSpinner;
+    private getProgress;
     private setSpinPosition;
@@ -186,40 +231,1 @@ private createProgress;
 }
-export interface SpinSettings {
-    /**
-     * Specifies the template content to be displayed in a spinner.
-     * @default null
-     */
-    template?: string;
-    /**
-     * Sets the width of a spinner.
-     * @default 16
-     */
-    width?: string | number;
-    /**
-     * Specifies the position of a spinner in the progress button. The possible values are:
-     * * Left: The spinner will be positioned to the left of the text content.
-     * * Right: The spinner will be positioned to the right of the text content.
-     * * Top: The spinner will be positioned at the top of the text content.
-     * * Bottom: The spinner will be positioned at the bottom of the text content.
-     * * Center: The spinner will be positioned at the center of the progress button.
-     * @default 'Left'
-     */
-    position?: SpinPosition;
-}
-export interface AnimationSettings {
-    /**
-     * Specifies the duration taken to animate.
-     * @default 400
-     */
-    duration?: number;
-    /**
-     * Specifies the effect of animation.
-     * @default 'None'
-     */
-    effect?: AnimationEffect;
-    /**
-     * Specifies the animation timing function.
-     * @default 'ease'
-     */
-    easing?: string;
-}

src/progress-button/progress-button.js

@@ -22,3 +22,3 @@ var __extends = (this && this.__extends) || (function () {
 import { EventHandler, Property, NotifyPropertyChanges, Animation, attributes } from '@syncfusion/ej2-base';
-import { Event, remove, removeClass } from '@syncfusion/ej2-base';
+import { Event, remove, removeClass, Complex, ChildProperty } from '@syncfusion/ej2-base';
 import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
@@ -29,2 +29,36 @@ var HIDESPINNER = 'e-hide-spinner';
 var CONTENTCLS = 'e-btn-content';
+var SpinSettings = /** @class */ (function (_super) {
+    __extends(SpinSettings, _super);
+    function SpinSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property(null)
+    ], SpinSettings.prototype, "template", void 0);
+    __decorate([
+        Property(16)
+    ], SpinSettings.prototype, "width", void 0);
+    __decorate([
+        Property('Left')
+    ], SpinSettings.prototype, "position", void 0);
+    return SpinSettings;
+}(ChildProperty));
+export { SpinSettings };
+var AnimationSettings = /** @class */ (function (_super) {
+    __extends(AnimationSettings, _super);
+    function AnimationSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property(400)
+    ], AnimationSettings.prototype, "duration", void 0);
+    __decorate([
+        Property('None')
+    ], AnimationSettings.prototype, "effect", void 0);
+    __decorate([
+        Property('ease')
+    ], AnimationSettings.prototype, "easing", void 0);
+    return AnimationSettings;
+}(ChildProperty));
+export { AnimationSettings };
 /**
@@ -134,2 +168,8 @@ * The ProgressButton visualizes the progression of an operation to indicate the user
     };
+    ProgressButton.prototype.getSpinner = function () {
+        return this.element.getElementsByClassName('e-spinner')[0];
+    };
+    ProgressButton.prototype.getProgress = function () {
+        return this.element.getElementsByClassName(PROGRESS)[0];
+    };
     ProgressButton.prototype.setSpinPosition = function (ele) {
@@ -160,3 +200,2 @@ var position = this.spinSettings.position || 'Left';
     ProgressButton.prototype.startProgress = function (percent, progressTime) {
-        var _this = this;
         var clsList = this.element.classList;
@@ -167,12 +206,4 @@ var isVertical = clsList.contains('e-vertical');
             showSpinner(this.element);
-            if (!this.enableProgress) {
-                setTimeout(function () {
-                    _this.hideSpin();
-                    // tslint:disable-next-line
-                }, this.duration);
-            }
         }
-        if (this.enableProgress) {
-            this.startAnimate(Date.now(), progressTime ? progressTime : 0, progressTime ? Date.now() - (this.duration * 1 / 100) : Date.now(), percent ? percent : 0, 0, this.step, 0, isVertical);
-        }
+        this.startAnimate(Date.now(), progressTime ? progressTime : 0, progressTime ? Date.now() - (this.duration * 1 / 100) : Date.now(), percent ? percent : 0, 0, this.step, 0, isVertical);
         this.startContAnimate();
@@ -208,4 +239,5 @@ };
                 this.timerId = requestAnimationFrame(function () {
-                    _this.element.getElementsByClassName(PROGRESS)[0]
-                        .style[isVertical ? 'height' : 'width'] = percent + '%';
+                    if (_this.enableProgress) {
+                        _this.getProgress().style[isVertical ? 'height' : 'width'] = percent + '%';
+                    }
                     _this.element.setAttribute('aria-valuenow', percent.toString());
@@ -226,3 +258,5 @@ });
                         _this.progressTime = _this.percent = 0;
-                        _this.element.getElementsByClassName(PROGRESS)[0].style[isVertical ? 'height' : 'width'] = '0%';
+                        if (_this.enableProgress) {
+                            _this.getProgress().style[isVertical ? 'height' : 'width'] = '0%';
+                        }
                         _this.element.setAttribute('aria-valuenow', '0');
@@ -264,3 +298,3 @@ _this.hideSpin();
         var ele = this.element.getElementsByClassName(CONTENTCLS)[0];
-        var spinner = this.element.getElementsByClassName('e-spinner')[0];
+        var spinner = this.getSpinner();
         spinner.style.width = Math.max(spinner.offsetWidth, ele.offsetWidth) + 'px';
@@ -280,3 +314,3 @@ spinner.style.height = Math.max(spinner.offsetHeight, ele.offsetHeight) + 'px';
         if (this.spinSettings.position === 'Center') {
-            var ele = this.element.getElementsByClassName('e-spinner')[0];
+            var ele = this.getSpinner();
             cont.classList.remove('e-cont-animate');
@@ -316,2 +350,3 @@ ele.style.width = 'auto';
     ProgressButton.prototype.onPropertyChanged = function (newProp, oldProp) {
+        var ele = this.element;
         _super.prototype.onPropertyChanged.call(this, newProp, oldProp);
@@ -327,3 +362,3 @@ for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
                     }
-                    this.element.setAttribute('aria-label', this.element.textContent + ' progress');
+                    ele.setAttribute('aria-label', ele.textContent + ' progress');
                     break;
@@ -343,5 +378,15 @@ case 'iconCss':
                     else {
-                        remove(this.element.getElementsByClassName(PROGRESS)[0]);
+                        remove(this.getProgress());
                     }
                     break;
+                case 'spinSettings':
+                    if (newProp.spinSettings.position) {
+                        ele.classList.remove('e-spin-' + oldProp.spinSettings.position.toLowerCase());
+                        this.setSpinPosition(this.getSpinner());
+                    }
+                    if (newProp.spinSettings.template || newProp.spinSettings.width) {
+                        ele.removeChild(this.getSpinner());
+                        this.createSpinner();
+                    }
+                    break;
             }
@@ -378,6 +423,6 @@ }
     __decorate([
-        Property({ template: null, width: 16, position: 'Left' })
+        Complex({}, SpinSettings)
     ], ProgressButton.prototype, "spinSettings", void 0);
     __decorate([
-        Property({ duration: 400, effect: 'None', easing: 'ease' })
+        Complex({}, AnimationSettings)
     ], ProgressButton.prototype, "animationSettings", void 0);
@@ -384,0 +429,0 @@ __decorate([

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

1495779

increased by29.71%

Number of package files

175

increased by40%

Lines of code

28106

increased by49.83%

Worsened metrics

Number of low quality alerts

3

increased by50%

Dependency changes

• + Added@syncfusion/ej2-base@16.4.52(transitive)

• + Added@syncfusion/ej2-buttons@16.4.55(transitive)

• + Added@syncfusion/ej2-popups@16.4.54(transitive)

• - Removed@syncfusion/ej2-base@16.3.34(transitive)

• - Removed@syncfusion/ej2-buttons@16.3.34(transitive)

• - Removed@syncfusion/ej2-popups@16.3.34(transitive)

• Updated@syncfusion/ej2-base@~16.4.40-beta

• Updated@syncfusion/ej2-popups@~16.4.40-beta