@syncfusion/ej2-splitbuttons - npm Package Compare versions

Comparing version 16.2.50 to 16.3.17

CHANGELOG.md

@@ -5,2 +5,18 @@ # Changelog
 
+### ProgressButton
+
+The progress button visualizes the progression of an operation to indicates the user that a process is happening in the background. The progress can be shown with graphics accompanied by a textual representation.
+
+- **Types, Sizes, and Styles** - Provided with different types, sizes and predefined styles of progress button.
+
+- **Icons and Spinner** - Supports icon, spinner and its positioning.
+
+- **Animation** - Provided with predefined animation and progress indicator.
+
+- **Events** - Supports event triggering at specified interval.
+
+- **Accessibility** - Provided with built-in accessibility support that helps to access all the ProgressButton component features through the keyboard, screen readers, or other assistive technology devices.
+
+## 16.2.48 (2018-08-14)
+
 ### DropDownButton
@@ -7,0 +23,0 @@

dist/ej2-splitbuttons.umd.min.js

 /*!
 *  filename: ej2-splitbuttons.umd.min.js
-*  version : 16.2.50
+*  version : 16.3.17
 *  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,o,s){"use strict";function n(e,o){for(var s=t.extend({},e),n=0,i=Object.keys(s);n<i.length;n++){var r=i[n];o.indexOf(r)<0&&t.deleteObject(s,r)}return s}var i=function(){var e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var o in t)t.hasOwnProperty(o)&&(e[o]=t[o])};return function(t,o){function s(){this.constructor=t}e(t,o),t.prototype=null===o?Object.create(o):(s.prototype=o.prototype,new s)}}(),r=function(e,t,o,s){var n,i=arguments.length,r=i<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,s);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(r=(i<3?n(r):i>3?n(t,o,r):n(t,o))||r);return i>3&&r&&Object.defineProperty(t,o,r),r},a=function(e){function o(){return null!==e&&e.apply(this,arguments)||this}return i(o,e),r([t.Property("")],o.prototype,"iconCss",void 0),r([t.Property("")],o.prototype,"id",void 0),r([t.Property(!1)],o.prototype,"separator",void 0),r([t.Property("")],o.prototype,"text",void 0),r([t.Property("")],o.prototype,"url",void 0),o}(t.ChildProperty),l=function(){var e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var o in t)t.hasOwnProperty(o)&&(e[o]=t[o])};return function(t,o){function s(){this.constructor=t}e(t,o),t.prototype=null===o?Object.create(o):(s.prototype=o.prototype,new s)}}(),p=function(e,t,o,s){var n,i=arguments.length,r=i<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,s);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(r=(i<3?n(r):i>3?n(t,o,r):n(t,o))||r);return i>3&&r&&Object.defineProperty(t,o,r),r},c="e-disabled",d="e-focused",h="e-menu-icon",u="e-item",y="e-dropdown-popup",m="e-rtl",f="e-separator",v="e-vertical",b=function(e){function i(t,o){return e.call(this,t,o)||this}return l(i,e),i.prototype.preRender=function(){},i.prototype.getPersistData=function(){return this.addOnPersist([])},i.prototype.toggle=function(){this.canOpen()?this.openPopUp():this.closePopup()},i.prototype.render=function(){this.initialize(),this.disabled||this.wireEvents()},i.prototype.createPopup=function(){var e=this.createElement("div",{className:y,id:this.element.id+"-popup"});document.body.appendChild(e),this.dropDown=new s.Popup(e,{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,(o={},o.role="menu",o["aria-haspopup"]=this.items.length||this.target?"true":"false",o["aria-expanded"]="false",o["aria-owns"]=this.getPopUpElement().id,o.type="button",o)),this.cssClass&&t.addClass([e],this.cssClass.split(" "));var o},i.prototype.getTargetElement=function(){return"string"==typeof this.target?t.select(this.target):this.target},i.prototype.createItems=function(e){for(var o,s,n,i,r=this.hasIcon(e,"iconCss"),a=this.createElement("ul",{attrs:{tabindex:"0"}}),l=0;l<e.length;l++)s=e[l],n=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?(o=this.createElement("span",{className:h+" "+s.iconCss}),n.insertBefore(o,n.childNodes[0])):r&&!s.separator&&n.classList.add("e-blank-icon"),s.url&&n.appendChild(this.createAnchor(s)),i={item:s,element:n},this.trigger("beforeItemRender",i),a.appendChild(n);return a},i.prototype.hasIcon=function(e,t){for(var o=0,s=e.length;o<s;o++)if(e[o][t])return!0;return!1},i.prototype.createAnchor=function(e){return this.createElement("a",{className:"e-menu-text e-menu-url",innerHTML:e.text,attrs:{href:e.url}})},i.prototype.initialize=function(){this.button=new o.Button({iconCss:this.iconCss,cssClass:this.cssClass,content:this.content,disabled:this.disabled,enableRtl:this.enableRtl,enablePersistence:this.enablePersistence}),this.button.appendTo(this.element),this.element.id||(this.element.id=t.getUniqueID("e-"+this.getModuleName())),this.setIconPositionTop(),this.appendArrowSpan(),this.createPopup(),this.setActiveElem([this.element])},i.prototype.setIconPositionTop=function(){var e=this.element.querySelector(".e-icon-left");e&&"Top"===this.iconPosition&&(t.addClass([this.element],"e-top-icon-btn"),t.removeClass([e],"e-icon-left"),t.addClass([e],"e-icon-top"))},i.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"}))},i.prototype.setActiveElem=function(e){this.activeElem=e},i.prototype.getModuleName=function(){return"dropdown-btn"},i.prototype.canOpen=function(){return this.getPopUpElement().classList.contains("e-popup-close")},i.prototype.destroy=function(){var o=this;this.element.querySelector("span.e-caret")&&t.detach(this.element.querySelector("span.e-caret")),e.prototype.destroy.call(this),this.button.destroy(),["role","aria-haspopup","aria-expanded","aria-owns","type"].forEach(function(e){o.element.removeAttribute(e)}),t.removeClass([this.element],["e-btn"]),t.removeClass(this.activeElem,["e-active"]),this.dropDown.destroy();var s=document.getElementById(this.getPopUpElement().id);s&&(t.removeClass([s],["e-popup-open","e-popup-close"]),t.detach(s)),this.disabled||this.unWireEvents()},i.prototype.getPopUpElement=function(){return this.dropDown.element},i.prototype.getULElement=function(){return this.getPopUpElement().children[0]},i.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})},i.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)}},i.prototype.upDownKeyHandler=function(e){if(!this.target||38!==e.keyCode&&40!==e.keyCode){e.preventDefault();var o=this.getULElement(),s=40===e.keyCode?0:o.childElementCount-1,n=s,i=null;this.removeCustomSelection();for(var r=0,a=o.children.length;r<a;r++)o.children[r].classList.contains(d)&&(n=r,(i=o.children[r]).classList.remove(d),40===e.keyCode?n++:n--,n===(40===e.keyCode?o.childElementCount:-1)&&(n=s));i=o.children[n],-1!==(n=this.isValidLI(i,n,e.keyCode))&&(t.addClass([o.children[n]],d),o.children[n].focus())}},i.prototype.removeCustomSelection=function(){var e=this.getULElement().querySelector(".e-selected");e&&e.classList.remove("e-selected")},i.prototype.isValidLI=function(e,t,o,s){if(void 0===s&&(s=0),(e.classList.contains(f)||e.classList.contains(c))&&(t===(40===o?this.items.length-1:0)?t=40===o?0:this.items.length-1:40===o?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,o,s)}return t},i.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))},i.prototype.getLI=function(e){return"LI"===e.tagName?e:t.closest(e,"li")},i.prototype.mousedownHandler=function(e){var o=e.target;this.canOpen()||t.closest(o,"#"+this.getPopUpElement().id)||t.closest(o,"#"+this.element.id)||this.closePopup(e)},i.prototype.clickHandler=function(e){var o=e.target,s=this.canOpen();if(t.closest(o,"#"+this.element.id))s?this.openPopUp(e):this.closePopup(e,this.activeElem[0]);else if(t.closest(o,"#"+this.getPopUpElement().id)){var n=void 0,i=void 0,r=void 0,a=this.getLI(o);a&&(i=Array.prototype.indexOf.call(this.getULElement().children,a),(r=this.items[i])&&(n={element:a,item:r},this.trigger("select",n)),this.closePopup(e,this.activeElem[0]))}},i.prototype.openPopUp=function(e){void 0===e&&(e=null),this.target||this.getPopUpElement().appendChild(this.createItems(this.items));var o=this.getULElement(),s={element:o,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"),o.focus();var n={element:o,items:this.items};this.trigger("open",n)}},i.prototype.closePopup=function(e,o){void 0===e&&(e=null);var s=this.getULElement(),n={element:s,items:this.items,event:e,cancel:!1};if(this.trigger("beforeClose",n),!n.cancel){this.removeCustomSelection(),this.dropDown.hide(),t.removeClass(this.activeElem,"e-active"),this.element.setAttribute("aria-expanded","false"),o&&o.focus();var i={element:s,items:this.items};this.trigger("close",i),!this.target&&s&&t.detach(s)}},i.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()},i.prototype.onPropertyChanged=function(e,o){var s=["content","cssClass","iconCss","disabled","enableRtl"];"Left"===e.iconPosition&&s.push("iconPosition"),this.button.setProperties(n(e,s));for(var i=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(v)>-1){var l=this.element.querySelector("span.e-caret");t.classList(l,["e-icon-bottom"],["e-icon-right"])}o.cssClass&&t.removeClass([i],o.cssClass.split(" ")),e.cssClass&&t.addClass([i],e.cssClass.split(" "));break;case"iconPosition":this.setIconPositionTop();break;case"enableRtl":i.classList.toggle(m);break;case"target":this.target=e.target,t.detach(this.getULElement()),i.appendChild(this.getTargetElement()),this.dropDown.content=this.getTargetElement();break;case"items":this.dropDown.refresh(),i.classList.contains("e-popup-open")&&t.classList(i,["e-popup-close"],["e-popup-open"])}}},p([t.Property("")],i.prototype,"content",void 0),p([t.Property("")],i.prototype,"cssClass",void 0),p([t.Property(!1)],i.prototype,"disabled",void 0),p([t.Property("")],i.prototype,"iconCss",void 0),p([t.Property("Left")],i.prototype,"iconPosition",void 0),p([t.Collection([],a)],i.prototype,"items",void 0),p([t.Property("")],i.prototype,"target",void 0),p([t.Event()],i.prototype,"beforeItemRender",void 0),p([t.Event()],i.prototype,"beforeOpen",void 0),p([t.Event()],i.prototype,"beforeClose",void 0),p([t.Event()],i.prototype,"close",void 0),p([t.Event()],i.prototype,"open",void 0),p([t.Event()],i.prototype,"select",void 0),i=p([t.NotifyPropertyChanges],i)}(t.Component),g=function(){var e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var o in t)t.hasOwnProperty(o)&&(e[o]=t[o])};return function(t,o){function s(){this.constructor=t}e(t,o),t.prototype=null===o?Object.create(o):(s.prototype=o.prototype,new s)}}(),C=function(e,t,o,s){var n,i=arguments.length,r=i<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,s);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(r=(i<3?n(r):i>3?n(t,o,r):n(t,o))||r);return i>3&&r&&Object.defineProperty(t,o,r),r},E="EJS-SPLITBUTTON",w=function(e){function s(t,o){return e.call(this,t,o)||this}return g(s,e),s.prototype.preRender=function(){var e=this.element;if(e.tagName===E){for(var o=t.getValue("ej2_instances",e),s=this.createElement("button",{attrs:{type:"button"}}),n=this.createElement(E,{className:"e-"+this.getModuleName()+"-wrapper"}),i=0,r=e.attributes.length;i<r;i++)s.setAttribute(e.attributes[i].nodeName,e.attributes[i].nodeValue);e.parentNode.insertBefore(n,e),t.detach(e),e=s,n.appendChild(e),t.setValue("ej2_instances",o,e),this.wrapper=n,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,content:this.content,disabled:this.disabled};this.primaryBtnObj=new o.Button(e,this.element),this.element.classList.add("e-"+this.getModuleName()),this.element.type="button",this.wrapper.appendChild(this.element),this.setIconPositionTop()},s.prototype.createSecondaryButton=function(){var e=this,o=this.createElement("button",{className:"e-icon-btn",attrs:{tabindex:"-1"},id:this.element.id+"_dropdownbtn"});this.wrapper.appendChild(o);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 b(s,o),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 e=this;this.primaryBtnObj.destroy(),this.secondaryBtnObj.destroy();var o=document.getElementById(this.element.id);o&&o.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],["e-"+this.getModuleName(),"e-rtl"]),["role","aria-label","aria-haspopup","aria-expanded","aria-owns","type"].forEach(function(t){e.element.removeAttribute(t)}),this.wrapper.parentNode.insertBefore(this.element,this.wrapper),t.remove(this.wrapper)),this.unWireEvents())},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,o){var s=["content","iconCss","cssClass","disabled","enableRtl"];"Left"===e.iconPosition&&s.push("iconPosition"),this.primaryBtnObj.setProperties(n(e,s)),s=["items","beforeOpen","beforeItemRender","select","open","close","cssClass","disabled","enableRtl"],this.secondaryBtnObj.setProperties(n(e,s));for(var i=0,r=Object.keys(e);i<r.length;i++){switch(r[i]){case"cssClass":o.cssClass&&t.removeClass([this.wrapper],o.cssClass.split(" ")),t.addClass([this.wrapper],e.cssClass.split(" "));break;case"iconPosition":this.setIconPositionTop();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),s=C([t.NotifyPropertyChanges],s)}(b);e.getModel=n,e.Item=a,e.DropDownButton=b,e.SplitButton=w,e.createButtonGroup=function(e,s){void 0===s&&(s={});var n,i,r,a,l=document.querySelector(e);t.addClass([l],["e-btn-group"]),l.setAttribute("role","group");var p=l.children;s.buttons=s.buttons||[];for(var c=0,d=0;d<p.length;c++,d++)n=p[d],null!==(a=s.buttons[c])&&("BUTTON"===n.tagName?i=n:(i=t.createElement("label"),(r=p[d+1])?l.insertBefore(i,r):l.appendChild(i),n.id&&i.setAttribute("for",n.id),a&&a.disabled&&(n.disabled=!0),d++),s.cssClass&&a&&!a.cssClass&&(a.cssClass=s.cssClass),new o.Button(a||{},i));return l},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=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])};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=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])};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=this.createElement("div",{className:m,id:this.element.id+"-popup"});document.body.appendChild(e),this.dropDown=new s.Popup(e,{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,(n={},n.role="menu",n["aria-haspopup"]=this.items.length||this.target?"true":"false",n["aria-expanded"]="false",n["aria-owns"]=this.getPopUpElement().id,n.type="button",n)),this.cssClass&&t.addClass([e],this.cssClass.split(" "));var n},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;this.element.querySelector("span.e-caret")&&t.detach(this.element.querySelector("span.e-caret")),e.prototype.destroy.call(this),this.button.destroy(),["role","aria-haspopup","aria-expanded","aria-owns","type"].forEach(function(e){n.element.removeAttribute(e)}),t.removeClass([this.element],["e-btn"]),t.removeClass(this.activeElem,["e-active"]),this.dropDown.destroy();var s=document.getElementById(this.getPopUpElement().id);s&&(t.removeClass([s],["e-popup-open","e-popup-close"]),t.detach(s)),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=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])};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},E="EJS-SPLITBUTTON",P=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===E){for(var n=t.getValue("ej2_instances",e),s=this.createElement("button",{attrs:{type:"button"}}),i=this.createElement(E,{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 e=this;this.primaryBtnObj.destroy(),this.secondaryBtnObj.destroy();var n=document.getElementById(this.element.id);n&&n.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],["e-"+this.getModuleName(),"e-rtl"]),["role","aria-label","aria-haspopup","aria-expanded","aria-owns","type"].forEach(function(t){e.element.removeAttribute(t)}),this.wrapper.parentNode.insertBefore(this.element,this.wrapper),t.remove(this.wrapper)),this.unWireEvents())},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=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])};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",B="e-progress",j="e-progress-active",H="e-btn-content",L=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(),this.trigger("created")},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(){e.prototype.destroy.call(this),this.unWireEvents(),this.element.innerHTML="",t.removeClass([this.element],[O,j,"e-round-corner","e-"+e.prototype.getModuleName.call(this)])},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.setSpinPosition=function(e){var t=this.spinSettings.position||"Left";"Left"===t||"Top"===t?this.element.insertBefore(e,this.element.getElementsByClassName(H)[0]):this.element.appendChild(e),this.element.classList.add("e-spin-"+t.toLowerCase())},n.prototype.createProgress=function(){this.element.appendChild(this.createElement("span",{className:B}))},n.prototype.setContent=function(){var e=this.element.innerHTML;this.element.innerHTML="",this.element.appendChild(this.createElement("span",{className:H,innerHTML:e}))},n.prototype.clickHandler=function(){this.element.classList.contains(j)||this.startProgress()},n.prototype.startProgress=function(e,t){var n,i=this,o=this.element.classList,r=o.contains("e-vertical");o.add(j),o.contains(O)||(s.showSpinner(this.element),this.enableProgress||setTimeout(function(){i.hideSpin()},this.duration)),this.enableProgress&&(n=this.element.getElementsByClassName(B)[0],this.startAnimate(Date.now(),t||0,t?Date.now()-1*this.duration/100:Date.now(),n,e||0,0,this.step,0,r)),this.startContAnimate()},n.prototype.startAnimate=function(e,t,n,s,i,o,r,a,p){var l,c=this,h=e-n,d=this.duration*r/100,u=h?h<d?h-d:h%d:0;this.progressTime=t=t+h-u,n=e-u,i+=(h-u)/this.duration*100,l={percent:o=(t-a)%d==0||100===i?i:o,currentDuration:t,step:r},0===i?this.trigger("begin",l):100===i||t===this.duration?this.trigger("end",l):this.trigger("progress",l),i!==l.percent&&l.percent!==o&&(i=l.percent),this.percent=i,this.step=l.step,(t-a)%(this.duration*l.step/100)!=0&&100!==i||(this.timerId=requestAnimationFrame(function(){try{s.style[p?"height":"width"]=i+"%",c.element.setAttribute("aria-valuenow",i.toString())}catch(e){cancelAnimationFrame(c.timerId)}}),o=i,a=t),this.isPaused||(t<this.duration&&i<100?setTimeout(function(){c.startAnimate(Date.now(),t,n,s,i,o,l.step,a,p)},this.duration/100-u):setTimeout(function(){c.progressTime=c.percent=0,s.style[p?"height":"width"]="0%",c.element.setAttribute("aria-valuenow","0"),c.hideSpin()},100))},n.prototype.startContAnimate=function(){var e=this,n=this.element.getElementsByClassName(H)[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(H)[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")},n.prototype.hideSpin=function(){var e=this.element.getElementsByClassName(H)[0];if(this.element.classList.contains(O)||s.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"}},n.prototype.setIconSpan=function(){var e=this.element.getElementsByClassName(H)[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){e.prototype.onPropertyChanged.call(this,n,s);for(var i=0,o=Object.keys(n);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":s.iconCss||this.setIconSpan();break;case"iconPosition":this.setIconSpan();break;case"enableProgress":n.enableProgress?this.createProgress():t.remove(this.element.getElementsByClassName(B)[0])}}},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.Property({template:null,width:16,position:"Left"})],n.prototype,"spinSettings",void 0),k([t.Property({duration:400,effect:"None",easing:"ease"})],n.prototype,"animationSettings",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),n=k([t.NotifyPropertyChanges],n)}(n.Button);e.getModel=i,e.Item=a,e.DropDownButton=g,e.SplitButton=P,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.ProgressButton=L,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=ej2-splitbuttons.umd.min.js.map

dist/es6/ej2-splitbuttons.es2015.js

@@ -1,4 +0,4 @@
-import { ChildProperty, Collection, Component, Event, EventHandler, KeyboardEvents, NotifyPropertyChanges, Property, addClass, attributes, classList, closest, createElement, deleteObject, detach, extend, getInstance, getUniqueID, getValue, remove, removeClass, rippleEffect, select, setValue } from '@syncfusion/ej2-base';
+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 { Button } from '@syncfusion/ej2-buttons';
-import { Popup } from '@syncfusion/ej2-popups';
+import { Popup, createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
 
@@ -189,5 +189,6 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
         this.button = new Button({
-            iconCss: this.iconCss, cssClass: this.cssClass, content: this.content,
+            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);
@@ -197,3 +198,2 @@ if (!this.element.id) {
         }
-        this.setIconPositionTop();
         this.appendArrowSpan();
@@ -203,10 +203,2 @@ this.createPopup();
     }
-    setIconPositionTop() {
-        let iconSpan = this.element.querySelector('.e-icon-left');
-        if (iconSpan && this.iconPosition === 'Top') {
-            addClass([this.element], 'e-top-icon-btn');
-            removeClass([iconSpan], 'e-icon-left');
-            addClass([iconSpan], 'e-icon-top');
-        }
-    }
     appendArrowSpan() {
@@ -453,6 +445,3 @@ this.element.appendChild(this.createElement('span', {
     onPropertyChanged(newProp, oldProp) {
-        let btnModel = ['content', 'cssClass', 'iconCss', 'disabled', 'enableRtl'];
-        if (newProp.iconPosition === 'Left') {
-            btnModel.push('iconPosition');
-        }
+        let btnModel = ['content', 'cssClass', 'iconCss', 'iconPosition', 'disabled', 'enableRtl'];
         this.button.setProperties(getModel(newProp, btnModel));
@@ -490,5 +479,2 @@ let popupElement = this.getPopUpElement();
                     break;
-                case 'iconPosition':
-                    this.setIconPositionTop();
-                    break;
                 case 'enableRtl':
@@ -552,2 +538,5 @@ popupElement.classList.toggle(classNames.RTL);
 ], DropDownButton.prototype, "select", void 0);
+__decorate$1([
+    Event()
+], DropDownButton.prototype, "created", void 0);
 DropDownButton = __decorate$1([
@@ -644,10 +633,12 @@ NotifyPropertyChanges
             iconCss: this.iconCss,
+            iconPosition: this.iconPosition,
             content: this.content,
             disabled: this.disabled
         };
-        this.primaryBtnObj = new Button(btnModel, this.element);
+        this.primaryBtnObj = new Button(btnModel);
+        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);
-        this.setIconPositionTop();
     }
@@ -686,3 +677,5 @@ createSecondaryButton() {
         };
-        this.secondaryBtnObj = new DropDownButton(dropDownBtnModel, btnElem);
+        this.secondaryBtnObj = new DropDownButton(dropDownBtnModel);
+        this.secondaryBtnObj.createElement = this.createElement;
+        this.secondaryBtnObj.appendTo(btnElem);
         this.secondaryBtnObj.dropDown.relateTo = this.wrapper;
@@ -767,6 +760,3 @@ this.dropDown = this.secondaryBtnObj.dropDown;
     onPropertyChanged(newProp, oldProp) {
-        let model = ['content', 'iconCss', 'cssClass', 'disabled', 'enableRtl'];
-        if (newProp.iconPosition === 'Left') {
-            model.push('iconPosition');
-        }
+        let model = ['content', 'iconCss', 'iconPosition', 'cssClass', 'disabled', 'enableRtl'];
         this.primaryBtnObj.setProperties(getModel(newProp, model));
@@ -784,5 +774,2 @@ model = ['items', 'beforeOpen', 'beforeItemRender', 'select', 'open',
                     break;
-                case 'iconPosition':
-                    this.setIconPositionTop();
-                    break;
                 case 'enableRtl':
@@ -842,2 +829,5 @@ if (newProp.enableRtl) {
 ], SplitButton.prototype, "select", void 0);
+__decorate$2([
+    Event()
+], SplitButton.prototype, "created", void 0);
 SplitButton = __decorate$2([
@@ -874,3 +864,3 @@ NotifyPropertyChanges
  */
-function createButtonGroup(selector, options = {}) {
+function createButtonGroup(selector, options = {}, createElement$$1) {
     let child;
@@ -880,2 +870,5 @@ let btnElem;
     let btnModel;
+    if (isNullOrUndefined(createElement$$1)) {
+        createElement$$1 = createElement;
+    }
     let wrapper = document.querySelector(selector);
@@ -894,3 +887,3 @@ addClass([wrapper], ['e-btn-group']);
             else {
-                btnElem = createElement('label');
+                btnElem = createElement$$1('label');
                 nextChild = childs[j + 1];
@@ -924,7 +917,356 @@ if (nextChild) {
 
+var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const HIDESPINNER = 'e-hide-spinner';
+const PROGRESS = 'e-progress';
+const PROGRESSACTIVE = 'e-progress-active';
+const CONTENTCLS = 'e-btn-content';
 /**
+ * The progress button visualizes the progression of an operation to indicates the user that a process is happening in the background.
+ * The progress can be shown with graphics accompanied by a textual representation.
+ * ```html
+ * <button id="element"></button>
+ * ```
+ * ```typescript
+ * <script>
+ * var progressButtonObj = new ProgressButton({ content: 'Progress Button' });
+ * progressButtonObj.appendTo("#element");
+ * </script>
+ * ```
+ */
+let ProgressButton = class ProgressButton extends Button {
+    /**
+     * Constructor for creating the widget
+     * @param  {ProgressButtonModel} options?
+     * @param  {string|HTMLButtonElement} element?
+     */
+    constructor(options, element) {
+        super(options, element);
+        this.step = 1;
+    }
+    preRender() {
+        super.preRender();
+    }
+    /**
+     * Initialize the Component rendering
+     * @returns void
+     * @private
+     */
+    render() {
+        super.render();
+        this.init();
+        this.wireEvents();
+        this.setAria();
+        this.trigger('created');
+    }
+    /**
+     * Starts the button progress at the specified percent.
+     * @param percent
+     */
+    start(percent) {
+        this.isPaused = false;
+        this.startProgress(percent ? percent : this.percent, this.progressTime);
+    }
+    /**
+     * Stops the button progress.
+     */
+    stop() {
+        this.isPaused = true;
+        cancelAnimationFrame(this.timerId);
+    }
+    /**
+     * Get component name.
+     * @returns string
+     * @private
+     */
+    getModuleName() {
+        return 'progress-btn';
+    }
+    /**
+     * Destroys the widget.
+     * @returns void
+     */
+    destroy() {
+        super.destroy();
+        this.unWireEvents();
+        this.element.innerHTML = '';
+        removeClass([this.element], [HIDESPINNER, PROGRESSACTIVE, 'e-round-corner', 'e-' + super.getModuleName()]);
+    }
+    init() {
+        this.element.classList.add('e-' + super.getModuleName());
+        this.setContent();
+        this.createSpinner();
+        if (this.enableProgress) {
+            this.createProgress();
+        }
+    }
+    createSpinner() {
+        let spinner = this.createElement('span', { className: 'e-spinner' });
+        this.setSpinPosition(spinner);
+        createSpinner({
+            target: spinner, width: this.spinSettings.width || 16, template: this.spinSettings.template
+        }, this.createElement);
+    }
+    setSpinPosition(ele) {
+        let position = this.spinSettings.position || 'Left';
+        if (position === 'Left' || position === 'Top') {
+            this.element.insertBefore(ele, this.element.getElementsByClassName(CONTENTCLS)[0]);
+        }
+        else {
+            this.element.appendChild(ele);
+        }
+        this.element.classList.add('e-spin-' + position.toLowerCase());
+    }
+    createProgress() {
+        this.element.appendChild(this.createElement('span', { className: PROGRESS }));
+    }
+    setContent() {
+        let cont = this.element.innerHTML;
+        this.element.innerHTML = '';
+        this.element.appendChild(this.createElement('span', { className: CONTENTCLS, innerHTML: cont }));
+    }
+    clickHandler() {
+        if (this.element.classList.contains(PROGRESSACTIVE)) {
+            return;
+        }
+        this.startProgress();
+    }
+    startProgress(percent, progressTime) {
+        let ele;
+        let clsList = this.element.classList;
+        let isVertical = clsList.contains('e-vertical');
+        clsList.add(PROGRESSACTIVE);
+        if (!(clsList.contains(HIDESPINNER))) {
+            showSpinner(this.element);
+            if (!this.enableProgress) {
+                setTimeout(() => {
+                    this.hideSpin();
+                    // tslint:disable-next-line
+                }, this.duration);
+            }
+        }
+        if (this.enableProgress) {
+            ele = this.element.getElementsByClassName(PROGRESS)[0];
+            this.startAnimate(Date.now(), progressTime ? progressTime : 0, progressTime ? Date.now() - (this.duration * 1 / 100) : Date.now(), ele, percent ? percent : 0, 0, this.step, 0, isVertical);
+        }
+        this.startContAnimate();
+    }
+    startAnimate(timestamp, progressTime, prevTime, ele, percent, prevPercent, step, prevProgressTime, isVertical) {
+        let args;
+        let timeDiff = timestamp - prevTime;
+        let stepTime = this.duration * step / 100;
+        let timeDiffBuffer = timeDiff ? (timeDiff < stepTime ? timeDiff - stepTime : timeDiff % stepTime) : 0;
+        this.progressTime = progressTime = progressTime + timeDiff - timeDiffBuffer;
+        prevTime = timestamp - timeDiffBuffer;
+        percent = percent + (timeDiff - timeDiffBuffer) / this.duration * 100;
+        prevPercent = ((progressTime - prevProgressTime) % stepTime === 0 || percent === 100) ? percent : prevPercent;
+        args = { percent: prevPercent, currentDuration: progressTime, step: step };
+        if (percent === 0) {
+            this.trigger('begin', args);
+        }
+        else if (percent === 100 || progressTime === this.duration) {
+            this.trigger('end', args);
+        }
+        else {
+            this.trigger('progress', args);
+        }
+        if (percent !== args.percent && args.percent !== prevPercent) {
+            percent = args.percent;
+        }
+        this.percent = percent;
+        this.step = args.step;
+        if ((progressTime - prevProgressTime) % (this.duration * args.step / 100) === 0 || percent === 100) {
+            this.timerId = requestAnimationFrame(() => {
+                try {
+                    ele.style[isVertical ? 'height' : 'width'] = percent + '%';
+                    this.element.setAttribute('aria-valuenow', percent.toString());
+                }
+                catch (_a) {
+                    cancelAnimationFrame(this.timerId);
+                }
+            });
+            prevPercent = percent;
+            prevProgressTime = progressTime;
+        }
+        if (!this.isPaused) {
+            if (progressTime < this.duration && percent < 100) {
+                setTimeout(() => {
+                    this.startAnimate(Date.now(), progressTime, prevTime, ele, percent, prevPercent, args.step, prevProgressTime, isVertical);
+                    // tslint:disable-next-line
+                }, (this.duration / 100) - timeDiffBuffer);
+            }
+            else {
+                setTimeout(() => {
+                    this.progressTime = this.percent = 0;
+                    ele.style[isVertical ? 'height' : 'width'] = '0%';
+                    this.element.setAttribute('aria-valuenow', '0');
+                    this.hideSpin();
+                    // tslint:disable-next-line
+                }, 100);
+            }
+        }
+    }
+    startContAnimate() {
+        let ele = this.element.getElementsByClassName(CONTENTCLS)[0];
+        if (this.animationSettings.effect !== 'None') {
+            (new Animation({})).animate(ele, {
+                duration: this.animationSettings.duration,
+                name: 'Progress' + this.animationSettings.effect,
+                timingFunction: this.animationSettings.easing,
+                begin: () => {
+                    if (this.spinSettings.position === 'Center') {
+                        this.setSpinnerSize();
+                    }
+                },
+                end: () => {
+                    ele.classList.add('e-animate-end');
+                }
+            });
+        }
+        else if (this.spinSettings.position === 'Center') {
+            this.setSpinnerSize();
+        }
+    }
+    setSpinnerSize() {
+        let ele = this.element.getElementsByClassName(CONTENTCLS)[0];
+        let spinner = this.element.getElementsByClassName('e-spinner')[0];
+        spinner.style.width = Math.max(spinner.offsetWidth, ele.offsetWidth) + 'px';
+        spinner.style.height = Math.max(spinner.offsetHeight, ele.offsetHeight) + 'px';
+        ele.classList.add('e-cont-animate');
+    }
+    hideSpin() {
+        let cont = this.element.getElementsByClassName(CONTENTCLS)[0];
+        if (!(this.element.classList.contains(HIDESPINNER))) {
+            hideSpinner(this.element);
+        }
+        this.element.classList.remove(PROGRESSACTIVE);
+        if (this.animationSettings.effect !== 'None') {
+            cont.classList.remove('e-animate-end');
+        }
+        if (this.spinSettings.position === 'Center') {
+            let ele = this.element.getElementsByClassName('e-spinner')[0];
+            cont.classList.remove('e-cont-animate');
+            ele.style.width = 'auto';
+            ele.style.height = 'auto';
+        }
+    }
+    setIconSpan() {
+        let cont = this.element.getElementsByClassName(CONTENTCLS)[0];
+        let iconSpan = this.element.getElementsByClassName('e-btn-icon')[0];
+        if (cont.childNodes[0] && (this.iconPosition === 'Left' || this.iconPosition === 'Top')) {
+            cont.insertBefore(iconSpan, cont.childNodes[0]);
+        }
+        else {
+            cont.appendChild(iconSpan);
+        }
+    }
+    setAria() {
+        attributes(this.element, {
+            'aria-label': this.element.textContent + ' progress', 'aria-valuemin': '0', 'aria-valuemax': '100', 'aria-valuenow': '0'
+        });
+    }
+    wireEvents() {
+        EventHandler.add(this.element, 'click', this.clickHandler, this);
+    }
+    unWireEvents() {
+        EventHandler.remove(this.element, 'click', this.clickHandler);
+    }
+    /**
+     * Called internally if any of the property value changed.
+     * @param  {ProgressButton} newProp
+     * @param  {ProgressButton} oldProp
+     * @returns void
+     * @private
+     */
+    onPropertyChanged(newProp, oldProp) {
+        super.onPropertyChanged(newProp, oldProp);
+        for (let prop of Object.keys(newProp)) {
+            switch (prop) {
+                case 'content':
+                    this.setContent();
+                    this.createSpinner();
+                    if (this.enableProgress) {
+                        this.createProgress();
+                    }
+                    this.element.setAttribute('aria-label', this.element.textContent + ' progress');
+                    break;
+                case 'iconCss':
+                    if (!oldProp.iconCss) {
+                        this.setIconSpan();
+                    }
+                    break;
+                case 'iconPosition':
+                    this.setIconSpan();
+                    break;
+                case 'enableProgress':
+                    if (newProp.enableProgress) {
+                        this.createProgress();
+                    }
+                    else {
+                        remove(this.element.getElementsByClassName(PROGRESS)[0]);
+                    }
+                    break;
+            }
+        }
+    }
+};
+__decorate$3([
+    Property(false)
+], ProgressButton.prototype, "enableProgress", void 0);
+__decorate$3([
+    Property(2000)
+], ProgressButton.prototype, "duration", void 0);
+__decorate$3([
+    Property('Left')
+], ProgressButton.prototype, "iconPosition", void 0);
+__decorate$3([
+    Property('')
+], ProgressButton.prototype, "iconCss", void 0);
+__decorate$3([
+    Property(false)
+], ProgressButton.prototype, "disabled", void 0);
+__decorate$3([
+    Property(false)
+], ProgressButton.prototype, "isPrimary", void 0);
+__decorate$3([
+    Property('')
+], ProgressButton.prototype, "cssClass", void 0);
+__decorate$3([
+    Property('')
+], ProgressButton.prototype, "content", void 0);
+__decorate$3([
+    Property(false)
+], ProgressButton.prototype, "isToggle", void 0);
+__decorate$3([
+    Property({ template: null, width: 16, position: 'Left' })
+], ProgressButton.prototype, "spinSettings", void 0);
+__decorate$3([
+    Property({ duration: 400, effect: 'None', easing: 'ease' })
+], ProgressButton.prototype, "animationSettings", void 0);
+__decorate$3([
+    Event()
+], ProgressButton.prototype, "begin", void 0);
+__decorate$3([
+    Event()
+], ProgressButton.prototype, "progress", void 0);
+__decorate$3([
+    Event()
+], ProgressButton.prototype, "end", void 0);
+ProgressButton = __decorate$3([
+    NotifyPropertyChanges
+], ProgressButton);
+
+/**
+ * ProgressButton modules
+ */
+
+/**
  * SplitButton all module
  */
 
-export { getModel, Item, DropDownButton, SplitButton, createButtonGroup };
+export { getModel, Item, DropDownButton, SplitButton, createButtonGroup, ProgressButton };
 //# sourceMappingURL=ej2-splitbuttons.es2015.js.map

dist/es6/ej2-splitbuttons.es5.js

@@ -1,4 +0,4 @@
-import { ChildProperty, Collection, Component, Event, EventHandler, KeyboardEvents, NotifyPropertyChanges, Property, addClass, attributes, classList, closest, createElement, deleteObject, detach, extend, getInstance, getUniqueID, getValue, remove, removeClass, rippleEffect, select, setValue } from '@syncfusion/ej2-base';
+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 { Button } from '@syncfusion/ej2-buttons';
-import { Popup } from '@syncfusion/ej2-popups';
+import { Popup, createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
 
@@ -214,5 +214,6 @@ var __extends = (undefined && undefined.__extends) || (function () {
         this.button = new Button({
-            iconCss: this.iconCss, cssClass: this.cssClass, content: this.content,
+            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);
@@ -222,3 +223,2 @@ if (!this.element.id) {
         }
-        this.setIconPositionTop();
         this.appendArrowSpan();
@@ -228,10 +228,2 @@ this.createPopup();
     };
-    DropDownButton.prototype.setIconPositionTop = function () {
-        var iconSpan = this.element.querySelector('.e-icon-left');
-        if (iconSpan && this.iconPosition === 'Top') {
-            addClass([this.element], 'e-top-icon-btn');
-            removeClass([iconSpan], 'e-icon-left');
-            addClass([iconSpan], 'e-icon-top');
-        }
-    };
     DropDownButton.prototype.appendArrowSpan = function () {
@@ -482,6 +474,3 @@ this.element.appendChild(this.createElement('span', {
     DropDownButton.prototype.onPropertyChanged = function (newProp, oldProp) {
-        var btnModel = ['content', 'cssClass', 'iconCss', 'disabled', 'enableRtl'];
-        if (newProp.iconPosition === 'Left') {
-            btnModel.push('iconPosition');
-        }
+        var btnModel = ['content', 'cssClass', 'iconCss', 'iconPosition', 'disabled', 'enableRtl'];
         this.button.setProperties(getModel(newProp, btnModel));
@@ -520,5 +509,2 @@ var popupElement = this.getPopUpElement();
                     break;
-                case 'iconPosition':
-                    this.setIconPositionTop();
-                    break;
                 case 'enableRtl':
@@ -581,2 +567,5 @@ popupElement.classList.toggle(classNames.RTL);
     ], DropDownButton.prototype, "select", void 0);
+    __decorate$1([
+        Event()
+    ], DropDownButton.prototype, "created", void 0);
     DropDownButton = __decorate$1([
@@ -686,10 +675,12 @@ NotifyPropertyChanges
             iconCss: this.iconCss,
+            iconPosition: this.iconPosition,
             content: this.content,
             disabled: this.disabled
         };
-        this.primaryBtnObj = new Button(btnModel, this.element);
+        this.primaryBtnObj = new Button(btnModel);
+        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);
-        this.setIconPositionTop();
     };
@@ -729,3 +720,5 @@ SplitButton.prototype.createSecondaryButton = function () {
         };
-        this.secondaryBtnObj = new DropDownButton(dropDownBtnModel, btnElem);
+        this.secondaryBtnObj = new DropDownButton(dropDownBtnModel);
+        this.secondaryBtnObj.createElement = this.createElement;
+        this.secondaryBtnObj.appendTo(btnElem);
         this.secondaryBtnObj.dropDown.relateTo = this.wrapper;
@@ -811,6 +804,3 @@ this.dropDown = this.secondaryBtnObj.dropDown;
     SplitButton.prototype.onPropertyChanged = function (newProp, oldProp) {
-        var model = ['content', 'iconCss', 'cssClass', 'disabled', 'enableRtl'];
-        if (newProp.iconPosition === 'Left') {
-            model.push('iconPosition');
-        }
+        var model = ['content', 'iconCss', 'iconPosition', 'cssClass', 'disabled', 'enableRtl'];
         this.primaryBtnObj.setProperties(getModel(newProp, model));
@@ -829,5 +819,2 @@ model = ['items', 'beforeOpen', 'beforeItemRender', 'select', 'open',
                     break;
-                case 'iconPosition':
-                    this.setIconPositionTop();
-                    break;
                 case 'enableRtl':
@@ -886,2 +873,5 @@ if (newProp.enableRtl) {
     ], SplitButton.prototype, "select", void 0);
+    __decorate$2([
+        Event()
+    ], SplitButton.prototype, "created", void 0);
     SplitButton = __decorate$2([
@@ -920,3 +910,3 @@ NotifyPropertyChanges
  */
-function createButtonGroup(selector, options) {
+function createButtonGroup(selector, options, createElement$$1) {
     if (options === void 0) { options = {}; }
@@ -927,2 +917,5 @@ var child;
     var btnModel;
+    if (isNullOrUndefined(createElement$$1)) {
+        createElement$$1 = createElement;
+    }
     var wrapper = document.querySelector(selector);
@@ -941,3 +934,3 @@ addClass([wrapper], ['e-btn-group']);
             else {
-                btnElem = createElement('label');
+                btnElem = createElement$$1('label');
                 nextChild = childs[j + 1];
@@ -971,7 +964,373 @@ if (nextChild) {
 
+var __extends$3 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var HIDESPINNER = 'e-hide-spinner';
+var PROGRESS = 'e-progress';
+var PROGRESSACTIVE = 'e-progress-active';
+var CONTENTCLS = 'e-btn-content';
 /**
+ * The progress button visualizes the progression of an operation to indicates the user that a process is happening in the background.
+ * The progress can be shown with graphics accompanied by a textual representation.
+ * ```html
+ * <button id="element"></button>
+ * ```
+ * ```typescript
+ * <script>
+ * var progressButtonObj = new ProgressButton({ content: 'Progress Button' });
+ * progressButtonObj.appendTo("#element");
+ * </script>
+ * ```
+ */
+var ProgressButton = /** @__PURE__ @class */ (function (_super) {
+    __extends$3(ProgressButton, _super);
+    /**
+     * Constructor for creating the widget
+     * @param  {ProgressButtonModel} options?
+     * @param  {string|HTMLButtonElement} element?
+     */
+    function ProgressButton(options, element) {
+        var _this = _super.call(this, options, element) || this;
+        _this.step = 1;
+        return _this;
+    }
+    ProgressButton.prototype.preRender = function () {
+        _super.prototype.preRender.call(this);
+    };
+    /**
+     * Initialize the Component rendering
+     * @returns void
+     * @private
+     */
+    ProgressButton.prototype.render = function () {
+        _super.prototype.render.call(this);
+        this.init();
+        this.wireEvents();
+        this.setAria();
+        this.trigger('created');
+    };
+    /**
+     * Starts the button progress at the specified percent.
+     * @param percent
+     */
+    ProgressButton.prototype.start = function (percent) {
+        this.isPaused = false;
+        this.startProgress(percent ? percent : this.percent, this.progressTime);
+    };
+    /**
+     * Stops the button progress.
+     */
+    ProgressButton.prototype.stop = function () {
+        this.isPaused = true;
+        cancelAnimationFrame(this.timerId);
+    };
+    /**
+     * Get component name.
+     * @returns string
+     * @private
+     */
+    ProgressButton.prototype.getModuleName = function () {
+        return 'progress-btn';
+    };
+    /**
+     * Destroys the widget.
+     * @returns void
+     */
+    ProgressButton.prototype.destroy = function () {
+        _super.prototype.destroy.call(this);
+        this.unWireEvents();
+        this.element.innerHTML = '';
+        removeClass([this.element], [HIDESPINNER, PROGRESSACTIVE, 'e-round-corner', 'e-' + _super.prototype.getModuleName.call(this)]);
+    };
+    ProgressButton.prototype.init = function () {
+        this.element.classList.add('e-' + _super.prototype.getModuleName.call(this));
+        this.setContent();
+        this.createSpinner();
+        if (this.enableProgress) {
+            this.createProgress();
+        }
+    };
+    ProgressButton.prototype.createSpinner = function () {
+        var spinner = this.createElement('span', { className: 'e-spinner' });
+        this.setSpinPosition(spinner);
+        createSpinner({
+            target: spinner, width: this.spinSettings.width || 16, template: this.spinSettings.template
+        }, this.createElement);
+    };
+    ProgressButton.prototype.setSpinPosition = function (ele) {
+        var position = this.spinSettings.position || 'Left';
+        if (position === 'Left' || position === 'Top') {
+            this.element.insertBefore(ele, this.element.getElementsByClassName(CONTENTCLS)[0]);
+        }
+        else {
+            this.element.appendChild(ele);
+        }
+        this.element.classList.add('e-spin-' + position.toLowerCase());
+    };
+    ProgressButton.prototype.createProgress = function () {
+        this.element.appendChild(this.createElement('span', { className: PROGRESS }));
+    };
+    ProgressButton.prototype.setContent = function () {
+        var cont = this.element.innerHTML;
+        this.element.innerHTML = '';
+        this.element.appendChild(this.createElement('span', { className: CONTENTCLS, innerHTML: cont }));
+    };
+    ProgressButton.prototype.clickHandler = function () {
+        if (this.element.classList.contains(PROGRESSACTIVE)) {
+            return;
+        }
+        this.startProgress();
+    };
+    ProgressButton.prototype.startProgress = function (percent, progressTime) {
+        var _this = this;
+        var ele;
+        var clsList = this.element.classList;
+        var isVertical = clsList.contains('e-vertical');
+        clsList.add(PROGRESSACTIVE);
+        if (!(clsList.contains(HIDESPINNER))) {
+            showSpinner(this.element);
+            if (!this.enableProgress) {
+                setTimeout(function () {
+                    _this.hideSpin();
+                    // tslint:disable-next-line
+                }, this.duration);
+            }
+        }
+        if (this.enableProgress) {
+            ele = this.element.getElementsByClassName(PROGRESS)[0];
+            this.startAnimate(Date.now(), progressTime ? progressTime : 0, progressTime ? Date.now() - (this.duration * 1 / 100) : Date.now(), ele, percent ? percent : 0, 0, this.step, 0, isVertical);
+        }
+        this.startContAnimate();
+    };
+    ProgressButton.prototype.startAnimate = function (timestamp, progressTime, prevTime, ele, percent, prevPercent, step, prevProgressTime, isVertical) {
+        var _this = this;
+        var args;
+        var timeDiff = timestamp - prevTime;
+        var stepTime = this.duration * step / 100;
+        var timeDiffBuffer = timeDiff ? (timeDiff < stepTime ? timeDiff - stepTime : timeDiff % stepTime) : 0;
+        this.progressTime = progressTime = progressTime + timeDiff - timeDiffBuffer;
+        prevTime = timestamp - timeDiffBuffer;
+        percent = percent + (timeDiff - timeDiffBuffer) / this.duration * 100;
+        prevPercent = ((progressTime - prevProgressTime) % stepTime === 0 || percent === 100) ? percent : prevPercent;
+        args = { percent: prevPercent, currentDuration: progressTime, step: step };
+        if (percent === 0) {
+            this.trigger('begin', args);
+        }
+        else if (percent === 100 || progressTime === this.duration) {
+            this.trigger('end', args);
+        }
+        else {
+            this.trigger('progress', args);
+        }
+        if (percent !== args.percent && args.percent !== prevPercent) {
+            percent = args.percent;
+        }
+        this.percent = percent;
+        this.step = args.step;
+        if ((progressTime - prevProgressTime) % (this.duration * args.step / 100) === 0 || percent === 100) {
+            this.timerId = requestAnimationFrame(function () {
+                try {
+                    ele.style[isVertical ? 'height' : 'width'] = percent + '%';
+                    _this.element.setAttribute('aria-valuenow', percent.toString());
+                }
+                catch (_a) {
+                    cancelAnimationFrame(_this.timerId);
+                }
+            });
+            prevPercent = percent;
+            prevProgressTime = progressTime;
+        }
+        if (!this.isPaused) {
+            if (progressTime < this.duration && percent < 100) {
+                setTimeout(function () {
+                    _this.startAnimate(Date.now(), progressTime, prevTime, ele, percent, prevPercent, args.step, prevProgressTime, isVertical);
+                    // tslint:disable-next-line
+                }, (this.duration / 100) - timeDiffBuffer);
+            }
+            else {
+                setTimeout(function () {
+                    _this.progressTime = _this.percent = 0;
+                    ele.style[isVertical ? 'height' : 'width'] = '0%';
+                    _this.element.setAttribute('aria-valuenow', '0');
+                    _this.hideSpin();
+                    // tslint:disable-next-line
+                }, 100);
+            }
+        }
+    };
+    ProgressButton.prototype.startContAnimate = function () {
+        var _this = this;
+        var ele = this.element.getElementsByClassName(CONTENTCLS)[0];
+        if (this.animationSettings.effect !== 'None') {
+            (new Animation({})).animate(ele, {
+                duration: this.animationSettings.duration,
+                name: 'Progress' + this.animationSettings.effect,
+                timingFunction: this.animationSettings.easing,
+                begin: function () {
+                    if (_this.spinSettings.position === 'Center') {
+                        _this.setSpinnerSize();
+                    }
+                },
+                end: function () {
+                    ele.classList.add('e-animate-end');
+                }
+            });
+        }
+        else if (this.spinSettings.position === 'Center') {
+            this.setSpinnerSize();
+        }
+    };
+    ProgressButton.prototype.setSpinnerSize = function () {
+        var ele = this.element.getElementsByClassName(CONTENTCLS)[0];
+        var spinner = this.element.getElementsByClassName('e-spinner')[0];
+        spinner.style.width = Math.max(spinner.offsetWidth, ele.offsetWidth) + 'px';
+        spinner.style.height = Math.max(spinner.offsetHeight, ele.offsetHeight) + 'px';
+        ele.classList.add('e-cont-animate');
+    };
+    ProgressButton.prototype.hideSpin = function () {
+        var cont = this.element.getElementsByClassName(CONTENTCLS)[0];
+        if (!(this.element.classList.contains(HIDESPINNER))) {
+            hideSpinner(this.element);
+        }
+        this.element.classList.remove(PROGRESSACTIVE);
+        if (this.animationSettings.effect !== 'None') {
+            cont.classList.remove('e-animate-end');
+        }
+        if (this.spinSettings.position === 'Center') {
+            var ele = this.element.getElementsByClassName('e-spinner')[0];
+            cont.classList.remove('e-cont-animate');
+            ele.style.width = 'auto';
+            ele.style.height = 'auto';
+        }
+    };
+    ProgressButton.prototype.setIconSpan = function () {
+        var cont = this.element.getElementsByClassName(CONTENTCLS)[0];
+        var iconSpan = this.element.getElementsByClassName('e-btn-icon')[0];
+        if (cont.childNodes[0] && (this.iconPosition === 'Left' || this.iconPosition === 'Top')) {
+            cont.insertBefore(iconSpan, cont.childNodes[0]);
+        }
+        else {
+            cont.appendChild(iconSpan);
+        }
+    };
+    ProgressButton.prototype.setAria = function () {
+        attributes(this.element, {
+            'aria-label': this.element.textContent + ' progress', 'aria-valuemin': '0', 'aria-valuemax': '100', 'aria-valuenow': '0'
+        });
+    };
+    ProgressButton.prototype.wireEvents = function () {
+        EventHandler.add(this.element, 'click', this.clickHandler, this);
+    };
+    ProgressButton.prototype.unWireEvents = function () {
+        EventHandler.remove(this.element, 'click', this.clickHandler);
+    };
+    /**
+     * Called internally if any of the property value changed.
+     * @param  {ProgressButton} newProp
+     * @param  {ProgressButton} oldProp
+     * @returns void
+     * @private
+     */
+    ProgressButton.prototype.onPropertyChanged = function (newProp, oldProp) {
+        _super.prototype.onPropertyChanged.call(this, newProp, oldProp);
+        for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
+            var prop = _a[_i];
+            switch (prop) {
+                case 'content':
+                    this.setContent();
+                    this.createSpinner();
+                    if (this.enableProgress) {
+                        this.createProgress();
+                    }
+                    this.element.setAttribute('aria-label', this.element.textContent + ' progress');
+                    break;
+                case 'iconCss':
+                    if (!oldProp.iconCss) {
+                        this.setIconSpan();
+                    }
+                    break;
+                case 'iconPosition':
+                    this.setIconSpan();
+                    break;
+                case 'enableProgress':
+                    if (newProp.enableProgress) {
+                        this.createProgress();
+                    }
+                    else {
+                        remove(this.element.getElementsByClassName(PROGRESS)[0]);
+                    }
+                    break;
+            }
+        }
+    };
+    __decorate$3([
+        Property(false)
+    ], ProgressButton.prototype, "enableProgress", void 0);
+    __decorate$3([
+        Property(2000)
+    ], ProgressButton.prototype, "duration", void 0);
+    __decorate$3([
+        Property('Left')
+    ], ProgressButton.prototype, "iconPosition", void 0);
+    __decorate$3([
+        Property('')
+    ], ProgressButton.prototype, "iconCss", void 0);
+    __decorate$3([
+        Property(false)
+    ], ProgressButton.prototype, "disabled", void 0);
+    __decorate$3([
+        Property(false)
+    ], ProgressButton.prototype, "isPrimary", void 0);
+    __decorate$3([
+        Property('')
+    ], ProgressButton.prototype, "cssClass", void 0);
+    __decorate$3([
+        Property('')
+    ], ProgressButton.prototype, "content", void 0);
+    __decorate$3([
+        Property(false)
+    ], ProgressButton.prototype, "isToggle", void 0);
+    __decorate$3([
+        Property({ template: null, width: 16, position: 'Left' })
+    ], ProgressButton.prototype, "spinSettings", void 0);
+    __decorate$3([
+        Property({ duration: 400, effect: 'None', easing: 'ease' })
+    ], ProgressButton.prototype, "animationSettings", void 0);
+    __decorate$3([
+        Event()
+    ], ProgressButton.prototype, "begin", void 0);
+    __decorate$3([
+        Event()
+    ], ProgressButton.prototype, "progress", void 0);
+    __decorate$3([
+        Event()
+    ], ProgressButton.prototype, "end", void 0);
+    ProgressButton = __decorate$3([
+        NotifyPropertyChanges
+    ], ProgressButton);
+    return ProgressButton;
+}(Button));
+
+/**
+ * ProgressButton modules
+ */
+
+/**
  * SplitButton all module
  */
 
-export { getModel, Item, DropDownButton, SplitButton, createButtonGroup };
+export { getModel, Item, DropDownButton, SplitButton, createButtonGroup, ProgressButton };
 //# sourceMappingURL=ej2-splitbuttons.es5.js.map

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 16.2.50
+*  version : 16.3.17
 *  Copyright Syncfusion Inc. 2001 - 2018. All rights reserved.
@@ -11,9 +11,5 @@ *  Use of this code is subject to the terms of our license.
 import * as _splitbuttons from '@syncfusion/ej2-splitbuttons';
-import * as _base from '@syncfusion/ej2-base';
-import * as _popups from '@syncfusion/ej2-popups';
 
 export declare namespace ej {
     const splitbuttons: typeof _splitbuttons;
-    const base: typeof _base;
-    const popups: typeof _popups;
 }

package.json

 {
   "name": "@syncfusion/ej2-splitbuttons",
-  "version": "16.2.50",
-  "description": "Essential JS 2 SplitButton Components",
+  "version": "16.3.17",
+  "description": "A package of feature-rich Essential JS 2 components such as DropDownButton, SplitButton, ProgressButton and ButtonGroup.",
   "author": "Syncfusion Inc.",
@@ -11,4 +11,4 @@ "license": "SEE LICENSE IN license",
   "dependencies": {
-    "@syncfusion/ej2-base": "~16.2.50",
-    "@syncfusion/ej2-popups": "~16.2.50"
+    "@syncfusion/ej2-base": "~16.3.17",
+    "@syncfusion/ej2-popups": "~16.3.17"
   },
@@ -28,2 +28,3 @@ "devDependencies": {
     "ej2 buttongroup",
+    "ej2 progress button",
     "JavaScript",
@@ -40,3 +41,9 @@ "TypeScript",
     "buttongroup",
-    "group button"
+    "group button",
+    "progress",
+    "spinner",
+    "progress button",
+    "progress indicator",
+    "spinbutton",
+    "spin button"
   ],
@@ -43,0 +50,0 @@ "repository": {

README.md

 # ej2-splitbuttons
 
-A package of Essential JS 2 DroDownButton, SplitButton and ButtonGroup components.
+A package of Essential JS 2 DroDownButton, SplitButton, ProgressButton and ButtonGroup components.
 
@@ -33,2 +33,7 @@ ![SplitButton](https://ej2.syncfusion.com/products/images/splitbutton/readme.gif)
 
+* ProgressButton - `ProgressButton` visualizes the progression of an operation to indicates the user that a process is happening in the background. The progress can be shown with graphics accompanied by a textual representation.
+    * [Getting Started](https://ej2.syncfusion.com/documentation/progress-button/getting-started.html?lang=typescript&utm_source=npm&utm_campaign=progress-button)
+    * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=grid#/material/button/progress-button.html)
+    * [Product Page](https://www.syncfusion.com/products/javascript/progress-button)
+
 * ButtonGroup - `ButtonGroup` is a graphical user interface that groups series of buttons horizontally or vertically.
@@ -68,2 +73,14 @@ * [Getting Started](https://ej2.syncfusion.com/documentation/button-group/getting-started.html?lang=typescript&utm_source=npm&utm_campaign=button-group)
 
+### ProgressButton
+
+* **Types, Sizes, and Styles** - Provided with different types, sizes and predefined styles of progress button.
+
+* **Icons and Spinner** - Supports icon, spinner and its positioning.
+
+* **Animation** - Provided with predefined animation and progress indicator.
+
+* **Events** - Supports event triggering at specified interval.
+
+* **Accessibility** - Provided with built-in accessibility support that helps to access all the ProgressButton component features through the keyboard, screen readers, or other assistive technology devices.
+
 ### ButtonGroup
@@ -70,0 +87,0 @@

src/button-group/button-group.d.ts

@@ -25,3 +25,3 @@ import { ButtonModel } from '@syncfusion/ej2-buttons';
  */
-export declare function createButtonGroup(selector: string, options?: CreateButtonGroupModel): HTMLElement;
+export declare function createButtonGroup(selector: string, options?: CreateButtonGroupModel, createElement?: Function): HTMLElement;
 export interface CreateButtonGroupModel {
@@ -28,0 +28,0 @@ cssClass?: string;

src/button-group/button-group.js

@@ -1,2 +0,2 @@
-import { addClass, createElement } from '@syncfusion/ej2-base';
+import { addClass, createElement as internalCreateElement, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { Button } from '@syncfusion/ej2-buttons';
@@ -26,3 +26,3 @@ /**
  */
-export function createButtonGroup(selector, options) {
+export function createButtonGroup(selector, options, createElement) {
     if (options === void 0) { options = {}; }
@@ -33,2 +33,5 @@ var child;
     var btnModel;
+    if (isNullOrUndefined(createElement)) {
+        createElement = internalCreateElement;
+    }
     var wrapper = document.querySelector(selector);
@@ -35,0 +38,0 @@ addClass([wrapper], ['e-btn-group']);

src/common/common.d.ts

@@ -39,3 +39,2 @@ import { ChildProperty, BaseEventArgs } from '@syncfusion/ej2-base';
  * Interface for before item render / select event.
- * @private
  */
@@ -48,3 +47,2 @@ export interface MenuEventArgs extends BaseEventArgs {
  * Interface for before open / close event.
- * @private
  */
@@ -51,0 +49,0 @@ export interface BeforeOpenCloseMenuEventArgs extends BaseEventArgs {

src/drop-down-button/drop-down-button-model.d.ts

@@ -91,2 +91,8 @@ import { Collection, Event, NotifyPropertyChanges, detach, Property, EventHandler, EmitType } from '@syncfusion/ej2-base';import { addClass, INotifyPropertyChanged, getUniqueID, rippleEffect } from '@syncfusion/ej2-base';import { attributes, Component, closest, select, KeyboardEventArgs } from '@syncfusion/ej2-base';import { classList, remove, removeClass } from '@syncfusion/ej2-base';import { Button } from '@syncfusion/ej2-buttons';import { Popup } from '@syncfusion/ej2-popups';import { MenuEventArgs, BeforeOpenCloseMenuEventArgs, OpenCloseMenuEventArgs } from './../common/common';import { getModel, SplitButtonIconPosition, Item } from './../common/common';import { ItemModel } from './../common/common-model';
 
+    /**
+     * Triggers once the component rendering is completed.
+     * @event
+     */
+    created?: EmitType<Event>;
+
 }

src/drop-down-button/drop-down-button.d.ts

@@ -99,2 +99,7 @@ import { EmitType } from '@syncfusion/ej2-base';
     /**
+     * Triggers once the component rendering is completed.
+     * @event
+     */
+    created: EmitType<Event>;
+    /**
      * Constructor for creating the widget
@@ -128,3 +133,2 @@ * @param  {DropDownButtonModel} options?
     private initialize();
-    protected setIconPositionTop(): void;
     private appendArrowSpan();
@@ -131,0 +135,0 @@ protected setActiveElem(elem: HTMLElement[]): void;

src/drop-down-button/drop-down-button.js

@@ -166,5 +166,6 @@ var __extends = (this && this.__extends) || (function () {
         this.button = new Button({
-            iconCss: this.iconCss, cssClass: this.cssClass, content: this.content,
+            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);
@@ -174,3 +175,2 @@ if (!this.element.id) {
         }
-        this.setIconPositionTop();
         this.appendArrowSpan();
@@ -180,10 +180,2 @@ this.createPopup();
     };
-    DropDownButton.prototype.setIconPositionTop = function () {
-        var iconSpan = this.element.querySelector('.e-icon-left');
-        if (iconSpan && this.iconPosition === 'Top') {
-            addClass([this.element], 'e-top-icon-btn');
-            removeClass([iconSpan], 'e-icon-left');
-            addClass([iconSpan], 'e-icon-top');
-        }
-    };
     DropDownButton.prototype.appendArrowSpan = function () {
@@ -434,6 +426,3 @@ this.element.appendChild(this.createElement('span', {
     DropDownButton.prototype.onPropertyChanged = function (newProp, oldProp) {
-        var btnModel = ['content', 'cssClass', 'iconCss', 'disabled', 'enableRtl'];
-        if (newProp.iconPosition === 'Left') {
-            btnModel.push('iconPosition');
-        }
+        var btnModel = ['content', 'cssClass', 'iconCss', 'iconPosition', 'disabled', 'enableRtl'];
         this.button.setProperties(getModel(newProp, btnModel));
@@ -472,5 +461,2 @@ var popupElement = this.getPopUpElement();
                     break;
-                case 'iconPosition':
-                    this.setIconPositionTop();
-                    break;
                 case 'enableRtl':
@@ -533,2 +519,5 @@ popupElement.classList.toggle(classNames.RTL);
     ], DropDownButton.prototype, "select", void 0);
+    __decorate([
+        Event()
+    ], DropDownButton.prototype, "created", void 0);
     DropDownButton = __decorate([
@@ -535,0 +524,0 @@ NotifyPropertyChanges

src/global.js

@@ -1,4 +0,1 @@
-import * as splitbuttons from './index';
-import * as base from '@syncfusion/ej2-base';
-import * as popups from '@syncfusion/ej2-popups';
-export { splitbuttons, base, popups };
+export * from './index';

src/index.d.ts

@@ -8,1 +8,2 @@ /**
 export * from './button-group/index';
+export * from './progress-button/index';

src/index.js

@@ -8,1 +8,2 @@ /**
 export * from './button-group/index';
+export * from './progress-button/index';

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

@@ -98,2 +98,8 @@ import { Event, EmitType, remove, addClass, removeClass, detach, getValue, setValue } from '@syncfusion/ej2-base';import { EventHandler, Collection, BaseEventArgs, NotifyPropertyChanges, INotifyPropertyChanged, Property } from '@syncfusion/ej2-base';import { attributes, getUniqueID, getInstance, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { Button, ButtonModel } from '@syncfusion/ej2-buttons';import { MenuEventArgs, BeforeOpenCloseMenuEventArgs, OpenCloseMenuEventArgs } from './../common/common';import { getModel, SplitButtonIconPosition, Item } from './../common/common';import { DropDownButton } from '../drop-down-button/drop-down-button';import { ItemModel } from './../common/common-model';
 
+    /**
+     * Triggers once the component rendering is completed.
+     * @event
+     */
+    created?: EmitType<Event>;
+
 }

src/split-button/split-button.d.ts

@@ -102,2 +102,7 @@ /// <reference path="../drop-down-button/drop-down-button-model.d.ts" />
     /**
+     * Triggers once the component rendering is completed.
+     * @event
+     */
+    created: EmitType<Event>;
+    /**
      * Constructor for creating the widget
@@ -104,0 +109,0 @@ * @param  {SplitButtonModel} options?

src/split-button/split-button.js

@@ -101,10 +101,12 @@ var __extends = (this && this.__extends) || (function () {
             iconCss: this.iconCss,
+            iconPosition: this.iconPosition,
             content: this.content,
             disabled: this.disabled
         };
-        this.primaryBtnObj = new Button(btnModel, this.element);
+        this.primaryBtnObj = new Button(btnModel);
+        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);
-        this.setIconPositionTop();
     };
@@ -144,3 +146,5 @@ SplitButton.prototype.createSecondaryButton = function () {
         };
-        this.secondaryBtnObj = new DropDownButton(dropDownBtnModel, btnElem);
+        this.secondaryBtnObj = new DropDownButton(dropDownBtnModel);
+        this.secondaryBtnObj.createElement = this.createElement;
+        this.secondaryBtnObj.appendTo(btnElem);
         this.secondaryBtnObj.dropDown.relateTo = this.wrapper;
@@ -226,6 +230,3 @@ this.dropDown = this.secondaryBtnObj.dropDown;
     SplitButton.prototype.onPropertyChanged = function (newProp, oldProp) {
-        var model = ['content', 'iconCss', 'cssClass', 'disabled', 'enableRtl'];
-        if (newProp.iconPosition === 'Left') {
-            model.push('iconPosition');
-        }
+        var model = ['content', 'iconCss', 'iconPosition', 'cssClass', 'disabled', 'enableRtl'];
         this.primaryBtnObj.setProperties(getModel(newProp, model));
@@ -244,5 +245,2 @@ model = ['items', 'beforeOpen', 'beforeItemRender', 'select', 'open',
                     break;
-                case 'iconPosition':
-                    this.setIconPositionTop();
-                    break;
                 case 'enableRtl':
@@ -301,2 +299,5 @@ if (newProp.enableRtl) {
     ], SplitButton.prototype, "select", void 0);
+    __decorate([
+        Event()
+    ], SplitButton.prototype, "created", void 0);
     SplitButton = __decorate([
@@ -303,0 +304,0 @@ NotifyPropertyChanges

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Number of package files

125

increased by22.55%

Number of lines in readme file

112

increased by17.89%

Worsened metrics

Total package byte prevSize

1115861

decreased by-83.51%

Lines of code

18244

decreased by-68.99%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

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

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

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

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

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

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

• Updated@syncfusion/ej2-base@~16.3.17

• Updated@syncfusion/ej2-popups@~16.3.17