@syncfusion/ej2-splitbuttons - npm Package Compare versions

Comparing version 16.1.37 to 16.2.41

CHANGELOG.md

@@ -5,12 +5,26 @@ # Changelog
 
-### DropDownButton
+### ButtonGroup
 
-#### New Features
+ButtonGroup is a graphical user interface that groups series of buttons horizontally or vertically.
 
-- Styles support provided.
+- **Types, Sizes, and Styles** - Provided with different types, sizes and predefined styles of button.
 
-## 16.1.28-preview (2018-03-09)
+- **Selection** - Supports single and multiple selection behaviors.
 
+- **Orientation** - Supports horizontal and vertical orientations.
+
+- **Nesting** - Supports nesting with drop-down and split button components.
+
+- **Accessibility** - Built-in accessibility features to access all the button group using the keyboard, screen readers, or other assistive technology devices.
+
 ### SplitButton
 
+#### Breaking Changes
+
+- UI changes based on design guidelines
+
+## 16.1.28 (2018-03-09)
+
+### SplitButton
+
 #### Bug Fixes
@@ -20,3 +34,3 @@
 
-## 16.1.24-preview (2018-02-22)
+## 16.1.24 (2018-02-22)
 
@@ -23,0 +37,0 @@ ### DropDownButton

dist/ej2-splitbuttons.umd.min.js

@@ -1,11 +0,2 @@
-/*!
-*  filename: ej2-splitbuttons.umd.min.js
-*  version : 16.1.37
-*  Copyright Syncfusion Inc. 2001 - 2018. All rights reserved.
-*  Use of this code is subject to the terms of our license.
-*  A copy of the current license can be obtained at any time by e-mailing
-*  [e-mail]. Any infringement will be prosecuted under
-*  applicable laws. 
-*/
-!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,n){"use strict";function s(e,o){for(var n=t.extend({},e),s=0,i=Object.keys(n);s<i.length;s++){var r=i[s];o.indexOf(r)<0&&t.deleteObject(n,r)}return n}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 n(){this.constructor=t}e(t,o),t.prototype=null===o?Object.create(o):(n.prototype=o.prototype,new n)}}(),r=function(e,t,o,n){var s,i=arguments.length,r=i<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,n);else for(var a=e.length-1;a>=0;a--)(s=e[a])&&(r=(i<3?s(r):i>3?s(t,o,r):s(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),p=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 n(){this.constructor=t}e(t,o),t.prototype=null===o?Object.create(o):(n.prototype=o.prototype,new n)}}(),l=function(e,t,o,n){var s,i=arguments.length,r=i<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,n);else for(var a=e.length-1;a>=0;a--)(s=e[a])&&(r=(i<3?s(r):i>3?s(t,o,r):s(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",f="e-rtl",m="e-separator",v="e-vertical",b=function(e){function i(t,o){return e.call(this,t,o)||this}return p(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=t.createElement("div",{className:y,id:this.element.id+"-popup"});document.body.appendChild(e),this.dropDown=new n.Popup(e,{relateTo:this.element,collision:{X:t.Browser.isDevice?"fit":"flip",Y:"flip"},position:{X:"left",Y:"bottom"},targetType:"relative",content:this.target?this.getTargetElement():"",zIndex:n.getZindexPartial(e)}),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)),this.cssClass&&t.addClass([e],this.cssClass.split(" ")),this.enableRtl&&e.classList.add(f);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,n,s,i,r=this.hasIcon(e,"iconCss"),a=t.createElement("ul",{attrs:{tabindex:"0"}}),p=0;p<e.length;p++)n=e[p],s=t.createElement("li",{innerHTML:n.url?"":n.text,className:n.separator?u+" "+m:u,attrs:{role:"menuItem",tabindex:"-1"},id:n.id?n.id:t.getUniqueID("e-"+this.getModuleName()+"-item")}),n.iconCss?(o=t.createElement("span",{className:h+" "+n.iconCss}),s.insertBefore(o,s.childNodes[0])):r&&!n.separator&&s.classList.add("e-blank-icon"),n.url&&s.appendChild(this.createAnchor(n)),i={item:n,element:s},this.trigger("beforeItemRender",i),a.appendChild(s);return a},i.prototype.hasIcon=function(e,t){for(var o=0,n=e.length;o<n;o++)if(e[o][t])return!0;return!1},i.prototype.createAnchor=function(e){return t.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()},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(t.createElement("span",{className:"e-btn-icon e-icons e-icon-"+(this.cssClass.indexOf(v)>-1?"bottom":"right")+" e-caret"}))},i.prototype.setActiveElem=function(){this.activeElem=this.element},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;t.detach(this.element.querySelector("span.e-caret")),e.prototype.destroy.call(this),this.button.destroy(),["role","aria-haspopup","aria-expanded","aria-owns"].forEach(function(e){o.element.removeAttribute(e)}),t.removeClass([this.element,this.activeElem],["e-ddb-active","e-btn"]),t.detach(this.getPopUpElement()),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();t.EventHandler.add(document,"click",this.clickHandler,this),t.EventHandler.add(this.element,"keydown",this.keyBoardHandler,this),this.target||t.EventHandler.add(e,"keydown",this.keyBoardHandler,this),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(9!==e.keyCode&&e.preventDefault(),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){for(var o=this.getULElement(),n=40===e.keyCode?0:o.childElementCount-1,s=n,i=null,r=0,a=o.children.length;r<a;r++)o.children[r].classList.contains(d)&&(s=r,(i=o.children[r]).classList.remove(d),40===e.keyCode?s++:s--,s===(40===e.keyCode?o.childElementCount:-1)&&(s=n));i=o.children[s],-1!==(s=this.isValidLI(i,s,e.keyCode))&&(t.addClass([o.children[s]],d),o.children[s].focus())},i.prototype.isValidLI=function(e,t,o,n){if(void 0===n&&(n=0),(e.classList.contains(m)||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(m)||e.classList.contains(c)){if(++n===this.items.length)return t=-1;t=this.isValidLI(e,t,o,n)}return t},i.prototype.keyEventHandler=function(e){27===e.keyCode||38===e.keyCode||9===e.keyCode?this.canOpen()||(this.closePopup(e),this.element.focus()):this.clickHandler(e)},i.prototype.getLI=function(e){return"LI"===e.tagName?e:t.closest(e,"li")},i.prototype.clickHandler=function(e){var o=e.target,n=this.canOpen();if(t.closest(o,"#"+this.element.id))n?this.openPopUp(e):(this.closePopup(e),this.activeElem.focus());else if(t.closest(o,"#"+this.getPopUpElement().id)){var s=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])&&(s={element:a,item:r},this.trigger("select",s)),this.closePopup(e),this.activeElem.focus())}else n||this.closePopup(e)},i.prototype.openPopUp=function(e){void 0===e&&(e=null),this.target||this.getPopUpElement().appendChild(this.createItems(this.items));var o=this.getULElement(),n={element:o,items:this.items,event:e,cancel:!1};if(this.trigger("beforeOpen",n),!n.cancel){this.dropDown.show(),t.addClass([this.activeElem],"e-ddb-active"),this.element.setAttribute("aria-expanded","true"),o.focus();var s={element:o,items:this.items};this.trigger("open",s)}},i.prototype.closePopup=function(e){void 0===e&&(e=null);var o=this.getULElement(),n={element:o,items:this.items,event:e,cancel:!1};if(this.trigger("beforeClose",n),!n.cancel){this.dropDown.hide(),t.removeClass([this.activeElem],"e-ddb-active"),this.element.setAttribute("aria-expanded","false");var s={element:o,items:this.items};this.trigger("close",s),this.target||t.detach(o)}},i.prototype.unWireEvents=function(){t.EventHandler.remove(document,"click",this.clickHandler),t.EventHandler.remove(this.element,"keydown",this.keyBoardHandler),t.EventHandler.remove(this.getPopUpElement(),"keydown",this.keyBoardHandler)},i.prototype.onPropertyChanged=function(e,o){var n=["content","cssClass","iconCss","disabled","enableRtl"];"Left"===e.iconPosition&&n.push("iconPosition"),this.button.setProperties(s(e,n));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"cssClass":if(e.cssClass.indexOf(v)>-1){var p=this.element.querySelector("span.e-caret");t.classList(p,["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(f);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"])}}},l([t.Property("")],i.prototype,"content",void 0),l([t.Property("")],i.prototype,"cssClass",void 0),l([t.Property(!1)],i.prototype,"disabled",void 0),l([t.Property("")],i.prototype,"iconCss",void 0),l([t.Property("Left")],i.prototype,"iconPosition",void 0),l([t.Collection([],a)],i.prototype,"items",void 0),l([t.Property("")],i.prototype,"target",void 0),l([t.Event()],i.prototype,"beforeItemRender",void 0),l([t.Event()],i.prototype,"beforeOpen",void 0),l([t.Event()],i.prototype,"beforeClose",void 0),l([t.Event()],i.prototype,"close",void 0),l([t.Event()],i.prototype,"open",void 0),l([t.Event()],i.prototype,"select",void 0),i=l([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 n(){this.constructor=t}e(t,o),t.prototype=null===o?Object.create(o):(n.prototype=o.prototype,new n)}}(),C=function(e,t,o,n){var s,i=arguments.length,r=i<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,n);else for(var a=e.length-1;a>=0;a--)(s=e[a])&&(r=(i<3?s(r):i>3?s(t,o,r):s(t,o))||r);return i>3&&r&&Object.defineProperty(t,o,r),r},E="EJS-SPLITBUTTON",P=function(e){function n(t,o){return e.call(this,t,o)||this}return g(n,e),n.prototype.preRender=function(){var e=this.element;if(e.tagName===E){for(var o=t.getValue("ej2_instances",e),n=t.createElement("button"),s=t.createElement(E,{className:"e-"+this.getModuleName()+"-wrapper"}),i=0,r=e.attributes.length;i<r;i++)n.setAttribute(e.attributes[i].nodeName,e.attributes[i].nodeValue);e.parentNode.insertBefore(s,e),t.detach(e),e=n,s.appendChild(e),t.setValue("ej2_instances",o,e),this.wrapper=s,this.element=e}this.element.id||(this.element.id=t.getUniqueID("e-"+this.getModuleName()))},n.prototype.render=function(){this.initWrapper(),this.createPrimaryButton(),this.createSecondaryButton(),this.setAria(),this.wireEvents()},n.prototype.initWrapper=function(){this.wrapper||(this.wrapper=t.createElement("div",{className:"e-"+this.getModuleName()+"-wrapper"}),this.element.parentNode.insertBefore(this.wrapper,this.element)),this.element.classList.remove("e-"+this.getModuleName()),this.enableRtl&&this.wrapper.classList.add("e-rtl"),this.cssClass&&t.addClass([this.wrapper],this.cssClass.split(" "))},n.prototype.createPrimaryButton=function(){var e={cssClass:this.cssClass,enableRtl:this.enableRtl,iconCss:this.iconCss,content:this.content,disabled:this.disabled};this.primaryBtnObj=new o.Button(e,this.element),this.element.classList.add("e-"+this.getModuleName()),this.wrapper.appendChild(this.element),this.setIconPositionTop(),this.setActiveElem()},n.prototype.createSecondaryButton=function(){var e=this,o=t.createElement("button",{className:"e-icon-btn",attrs:{tabindex:"-1"},id:this.element.id+"_dropdownbtn"});this.wrapper.appendChild(o);var n={cssClass:this.cssClass,disabled:this.disabled,enableRtl:this.enableRtl,items:this.items,target:this.target,beforeItemRender:function(t){e.trigger("beforeItemRender",t)},beforeOpen:function(t){e.trigger("beforeOpen",t)},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(n,o),this.secondaryBtnObj.dropDown.relateTo=this.wrapper,this.dropDown=this.secondaryBtnObj.dropDown,this.secondaryBtnObj.activeElem=this.element,t.EventHandler.remove(this.getPopUpElement(),"keydown",this.secondaryBtnObj.keyBoardHandler),this.secondaryBtnObj.element.querySelector(".e-btn-icon").classList.remove("e-icon-right")},n.prototype.setAria=function(){t.attributes(this.element,{role:"listbox","aria-expanded":"false","aria-haspopup":"true","aria-label":this.element.textContent+" splitbutton","aria-owns":this.secondaryBtnObj.dropDown.element.id})},n.prototype.getModuleName=function(){return"split-btn"},n.prototype.toggle=function(){this.secondaryBtnObj.toggle()},n.prototype.destroy=function(){var e=this;this.primaryBtnObj.destroy(),this.secondaryBtnObj.destroy(),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"].forEach(function(t){e.element.removeAttribute(t)}),this.wrapper.parentNode.insertBefore(this.element,this.wrapper),t.remove(this.wrapper)),this.unWireEvents()},n.prototype.wireEvents=function(){t.EventHandler.add(this.element,"click",this.primaryBtnClickHandler,this),t.EventHandler.add(this.getPopUpElement(),"keydown",this.keyBoardHandler,this),new t.KeyboardEvents(this.element,{keyAction:this.btnKeyBoardHandler.bind(this),keyConfigs:{altdownarrow:"alt+downarrow"}})},n.prototype.unWireEvents=function(){t.EventHandler.remove(this.element,"click",this.primaryBtnClickHandler),t.getInstance(this.element,t.KeyboardEvents).destroy()},n.prototype.primaryBtnClickHandler=function(){this.trigger("click",{element:this.element})},n.prototype.btnKeyBoardHandler=function(e){switch(e.action){case"altdownarrow":this.clickHandler(e)}},n.prototype.onPropertyChanged=function(e,o){var n=["content","iconCss","cssClass","disabled","enableRtl"];"Left"===e.iconPosition&&n.push("iconPosition"),this.primaryBtnObj.setProperties(s(e,n)),n=["items","beforeOpen","beforeItemRender","select","open","close","cssClass","disabled","enableRtl"],this.secondaryBtnObj.setProperties(s(e,n));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("")],n.prototype,"content",void 0),C([t.Property("")],n.prototype,"cssClass",void 0),C([t.Property(!1)],n.prototype,"disabled",void 0),C([t.Property("")],n.prototype,"iconCss",void 0),C([t.Property("Left")],n.prototype,"iconPosition",void 0),C([t.Collection([],a)],n.prototype,"items",void 0),C([t.Property("")],n.prototype,"target",void 0),C([t.Event()],n.prototype,"beforeItemRender",void 0),C([t.Event()],n.prototype,"beforeOpen",void 0),C([t.Event()],n.prototype,"beforeClose",void 0),C([t.Event()],n.prototype,"click",void 0),C([t.Event()],n.prototype,"close",void 0),C([t.Event()],n.prototype,"open",void 0),C([t.Event()],n.prototype,"select",void 0),n=C([t.NotifyPropertyChanges],n)}(b);e.getModel=s,e.Item=a,e.DropDownButton=b,e.SplitButton=P,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,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=t.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():"",zIndex:s.getZindexPartial(e),enableRtl:this.enableRtl}),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=t.createElement("ul",{attrs:{tabindex:"0"}}),l=0;l<e.length;l++)s=e[l],n=t.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=t.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 t.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(t.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]))}else s||this.closePopup(e)},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(),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=t.createElement("button",{attrs:{type:"button"}}),n=t.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=t.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=t.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})});
 //# sourceMappingURL=ej2-splitbuttons.umd.min.js.map

dist/es6/ej2-splitbuttons.es2015.js

@@ -1,2 +0,2 @@
-import { Browser, 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 { 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 { Button } from '@syncfusion/ej2-buttons';
@@ -120,7 +120,8 @@ import { Popup, getZindexPartial } from '@syncfusion/ej2-popups';
             relateTo: this.element,
-            collision: { X: Browser.isDevice ? 'fit' : 'flip', Y: 'flip' },
+            collision: { X: 'fit', Y: 'flip' },
             position: { X: 'left', Y: 'bottom' },
             targetType: 'relative',
             content: this.target ? this.getTargetElement() : '',
-            zIndex: getZindexPartial(div)
+            zIndex: getZindexPartial(div),
+            enableRtl: this.enableRtl
         });
@@ -130,3 +131,3 @@ this.dropDown.hide();
             ['role']: 'menu', ['aria-haspopup']: this.items.length || this.target ? 'true' : 'false', ['aria-expanded']: 'false',
-            ['aria-owns']: this.getPopUpElement().id
+            ['aria-owns']: this.getPopUpElement().id, ['type']: 'button'
         });
@@ -136,5 +137,2 @@ if (this.cssClass) {
         }
-        if (this.enableRtl) {
-            div.classList.add(classNames.RTL);
-        }
     }
@@ -202,3 +200,3 @@ getTargetElement() {
         this.createPopup();
-        this.setActiveElem();
+        this.setActiveElem([this.element]);
     }
@@ -219,4 +217,4 @@ setIconPositionTop() {
     }
-    setActiveElem() {
-        this.activeElem = this.element;
+    setActiveElem(elem) {
+        this.activeElem = elem;
     }
@@ -239,11 +237,21 @@ /**
     destroy() {
-        detach(this.element.querySelector('span.e-caret'));
+        if (this.element.querySelector('span.e-caret')) {
+            detach(this.element.querySelector('span.e-caret'));
+        }
         super.destroy();
         this.button.destroy();
-        ['role', 'aria-haspopup', 'aria-expanded', 'aria-owns'].forEach((key) => {
+        ['role', 'aria-haspopup', 'aria-expanded', 'aria-owns', 'type'].forEach((key) => {
             this.element.removeAttribute(key);
         });
-        removeClass([this.element, this.activeElem], ['e-ddb-active', 'e-btn']);
-        detach(this.getPopUpElement());
-        this.unWireEvents();
+        removeClass([this.element], ['e-btn']);
+        removeClass(this.activeElem, ['e-active']);
+        this.dropDown.destroy();
+        let popupEle = document.getElementById(this.getPopUpElement().id);
+        if (popupEle) {
+            removeClass([popupEle], ['e-popup-open', 'e-popup-close']);
+            detach(popupEle);
+        }
+        if (!this.disabled) {
+            this.unWireEvents();
+        }
     }
@@ -258,8 +266,9 @@ getPopUpElement() {
         let popupElement = this.getPopUpElement();
-        EventHandler.add(document, 'click', this.clickHandler, this);
+        this.delegateMousedownHandler = this.mousedownHandler.bind(this);
+        EventHandler.add(document, 'mousedown touchstart', this.delegateMousedownHandler, this);
+        EventHandler.add(this.element, 'click', this.clickHandler, this);
+        EventHandler.add(popupElement, 'click', this.clickHandler, this);
         EventHandler.add(this.element, 'keydown', this.keyBoardHandler, this);
-        if (!this.target) {
-            EventHandler.add(popupElement, 'keydown', this.keyBoardHandler, this);
-        }
-        rippleEffect(popupElement, { selector: '.' + classNames.ITEM });
+        EventHandler.add(popupElement, 'keydown', this.keyBoardHandler, this);
+        this.rippleFn = rippleEffect(popupElement, { selector: '.' + classNames.ITEM });
     }
@@ -270,7 +279,2 @@ keyBoardHandler(e) {
         }
-        else {
-            if (e.keyCode !== 9) {
-                e.preventDefault();
-            }
-        }
         switch (e.keyCode) {
@@ -295,2 +299,6 @@ case 38:
     upDownKeyHandler(e) {
+        if (this.target && (e.keyCode === 38 || e.keyCode === 40)) {
+            return;
+        }
+        e.preventDefault();
         let ul = this.getULElement();
@@ -300,2 +308,3 @@ let defaultIdx = e.keyCode === 40 ? 0 : ul.childElementCount - 1;
         let li = null;
+        this.removeCustomSelection();
         for (let i = 0, len = ul.children.length; i < len; i++) {
@@ -319,2 +328,8 @@ if (ul.children[i].classList.contains(classNames.FOCUS)) {
     }
+    removeCustomSelection() {
+        let selectedLi = this.getULElement().querySelector('.e-selected');
+        if (selectedLi) {
+            selectedLi.classList.remove('e-selected');
+        }
+    }
     isValidLI(li, index, keyCode, count = 0) {
@@ -340,6 +355,11 @@ if (li.classList.contains(classNames.SEPARATOR) || li.classList.contains(classNames.DISABLED)) {
     keyEventHandler(e) {
+        if (this.target && (e.keyCode === 13 || e.keyCode === 9)) {
+            return;
+        }
+        if (e.keyCode !== 9) {
+            e.preventDefault();
+        }
         if (e.keyCode === 27 || e.keyCode === 38 || e.keyCode === 9) {
             if (!this.canOpen()) {
-                this.closePopup(e);
-                this.element.focus();
+                this.closePopup(e, this.element);
             }
@@ -354,2 +374,8 @@ }
     }
+    mousedownHandler(e) {
+        let trgt = e.target;
+        if (!this.canOpen() && !(closest(trgt, '#' + this.getPopUpElement().id) || closest(trgt, '#' + this.element.id))) {
+            this.closePopup(e);
+        }
+    }
     clickHandler(e) {
@@ -363,4 +389,3 @@ let trgt = e.target;
             else {
-                this.closePopup(e);
-                this.activeElem.focus();
+                this.closePopup(e, this.activeElem[0]);
             }
@@ -381,4 +406,3 @@ }
                     }
-                    this.closePopup(e);
-                    this.activeElem.focus();
+                    this.closePopup(e, this.activeElem[0]);
                 }
@@ -402,3 +426,3 @@ }
             this.dropDown.show();
-            addClass([this.activeElem], 'e-ddb-active');
+            addClass([this.element], 'e-active');
             this.element.setAttribute('aria-expanded', 'true');
@@ -410,3 +434,3 @@ ul.focus();
     }
-    closePopup(e = null) {
+    closePopup(e = null, focusEle) {
         let ul = this.getULElement();
@@ -416,8 +440,12 @@ let beforeCloseArgs = { element: ul, items: this.items, event: e, cancel: false };
         if (!beforeCloseArgs.cancel) {
+            this.removeCustomSelection();
             this.dropDown.hide();
-            removeClass([this.activeElem], 'e-ddb-active');
+            removeClass(this.activeElem, 'e-active');
             this.element.setAttribute('aria-expanded', 'false');
+            if (focusEle) {
+                focusEle.focus();
+            }
             let closeArgs = { element: ul, items: this.items };
             this.trigger('close', closeArgs);
-            if (!this.target) {
+            if (!this.target && ul) {
                 detach(ul);
@@ -428,5 +456,8 @@ }
     unWireEvents() {
-        EventHandler.remove(document, 'click', this.clickHandler);
+        EventHandler.remove(document, 'mousedown touchstart', this.delegateMousedownHandler);
+        EventHandler.remove(this.element, 'click', this.clickHandler);
+        EventHandler.remove(this.getPopUpElement(), 'click', this.clickHandler);
         EventHandler.remove(this.element, 'keydown', this.keyBoardHandler);
         EventHandler.remove(this.getPopUpElement(), 'keydown', this.keyBoardHandler);
+        this.rippleFn();
     }
@@ -454,2 +485,13 @@ /**
                     break;
+                case 'disabled':
+                    if (newProp.disabled) {
+                        this.unWireEvents();
+                        if (!this.canOpen()) {
+                            this.closePopup();
+                        }
+                    }
+                    else {
+                        this.wireEvents();
+                    }
+                    break;
                 case 'cssClass':
@@ -576,3 +618,3 @@ if (newProp.cssClass.indexOf(classNames.VERTICAL) > -1) {
             let ejInstance = getValue('ej2_instances', ele);
-            let btn = createElement('button');
+            let btn = createElement('button', { attrs: { 'type': 'button' } });
             let wrapper = createElement(TAGNAME, { className: 'e-' + this.getModuleName() + '-wrapper' });
@@ -598,2 +640,3 @@ for (let idx = 0, len = ele.attributes.length; idx < len; idx++) {
         this.createSecondaryButton();
+        this.setActiveElem([this.element, this.secondaryBtnObj.element]);
         this.setAria();
@@ -625,5 +668,5 @@ this.wireEvents();
         this.element.classList.add('e-' + this.getModuleName());
+        this.element.type = 'button';
         this.wrapper.appendChild(this.element);
         this.setIconPositionTop();
-        this.setActiveElem();
     }
@@ -649,2 +692,5 @@ createSecondaryButton() {
             },
+            beforeClose: (args) => {
+                this.trigger('beforeClose', args);
+            },
             open: (args) => {
@@ -663,3 +709,3 @@ this.trigger('open', args);
         this.dropDown = this.secondaryBtnObj.dropDown;
-        this.secondaryBtnObj.activeElem = this.element;
+        this.secondaryBtnObj.activeElem = [this.element, this.secondaryBtnObj.element];
         EventHandler.remove(this.getPopUpElement(), 'keydown', this.secondaryBtnObj.keyBoardHandler);
@@ -692,16 +738,19 @@ this.secondaryBtnObj.element.querySelector('.e-btn-icon').classList.remove('e-icon-right');
         this.secondaryBtnObj.destroy();
-        if (this.wrapper.tagName === TAGNAME) {
-            this.wrapper.innerHTML = '';
-            removeClass([this.wrapper], ['e-rtl', 'e-' + this.getModuleName() + '-wrapper']);
-            removeClass([this.wrapper], this.cssClass.split(' '));
+        let element = document.getElementById(this.element.id);
+        if (element && element.parentElement === this.wrapper) {
+            if (this.wrapper.tagName === TAGNAME) {
+                this.wrapper.innerHTML = '';
+                removeClass([this.wrapper], ['e-rtl', 'e-' + this.getModuleName() + '-wrapper']);
+                removeClass([this.wrapper], this.cssClass.split(' '));
+            }
+            else {
+                removeClass([this.element], ['e-' + this.getModuleName(), RTL]);
+                ['role', 'aria-label', 'aria-haspopup', 'aria-expanded', 'aria-owns', 'type'].forEach((key) => {
+                    this.element.removeAttribute(key);
+                });
+                this.wrapper.parentNode.insertBefore(this.element, this.wrapper);
+                remove(this.wrapper);
+            }
+            this.unWireEvents();
         }
-        else {
-            removeClass([this.element], ['e-' + this.getModuleName(), RTL]);
-            ['role', 'aria-label', 'aria-haspopup', 'aria-expanded', 'aria-owns'].forEach((key) => {
-                this.element.removeAttribute(key);
-            });
-            this.wrapper.parentNode.insertBefore(this.element, this.wrapper);
-            remove(this.wrapper);
-        }
-        this.unWireEvents();
     }
@@ -821,6 +870,76 @@ wireEvents() {
 /**
+ * Initialize ButtonGroup CSS component with specified properties.
+ * ```html
+ * <div id='buttongroup'>
+ * <button></button>
+ * <button></button>
+ * <button></button>
+ * </div>
+ * ```
+ * ```typescript
+ * createButtonGroup('#buttongroup', {
+ *   cssClass: 'e-outline',
+ *   buttons: [
+ *       { content: 'Day' },
+ *       { content: 'Week' },
+ *       { content: 'Work Week'}
+ *   ]
+ * });
+ * ```
+ * @param {string} selector
+ * @param {CreateButtonGroupModel} options
+ * @returns HTMLElement
+ */
+function createButtonGroup(selector, options = {}) {
+    let child;
+    let btnElem;
+    let nextChild;
+    let btnModel;
+    let wrapper = document.querySelector(selector);
+    addClass([wrapper], ['e-btn-group']);
+    wrapper.setAttribute('role', 'group');
+    let childs = wrapper.children;
+    options.buttons = options.buttons || [];
+    for (let i = 0, j = 0; j < childs.length; i++, j++) {
+        child = childs[j];
+        btnModel = options.buttons[i];
+        if (btnModel !== null) {
+            if (child.tagName === 'BUTTON') {
+                btnElem = child;
+            }
+            else {
+                btnElem = createElement('label');
+                nextChild = childs[j + 1];
+                if (nextChild) {
+                    wrapper.insertBefore(btnElem, nextChild);
+                }
+                else {
+                    wrapper.appendChild(btnElem);
+                }
+                if (child.id) {
+                    btnElem.setAttribute('for', child.id);
+                }
+                if (btnModel && btnModel.disabled) {
+                    child.disabled = true;
+                }
+                j++;
+            }
+            if (options.cssClass && btnModel && !btnModel.cssClass) {
+                btnModel.cssClass = options.cssClass;
+            }
+            new Button(btnModel || {}, btnElem);
+        }
+    }
+    return wrapper;
+}
+
+/**
+ * ButtonGroup modules
+ */
+
+/**
  * SplitButton all module
  */
 
-export { getModel, Item, DropDownButton, SplitButton };
+export { getModel, Item, DropDownButton, SplitButton, createButtonGroup };
 //# sourceMappingURL=ej2-splitbuttons.es2015.js.map

dist/es6/ej2-splitbuttons.es5.js

@@ -1,2 +0,2 @@
-import { Browser, 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 { 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 { Button } from '@syncfusion/ej2-buttons';
@@ -147,16 +147,14 @@ import { Popup, getZindexPartial } from '@syncfusion/ej2-popups';
             relateTo: this.element,
-            collision: { X: Browser.isDevice ? 'fit' : 'flip', Y: 'flip' },
+            collision: { X: 'fit', Y: 'flip' },
             position: { X: 'left', Y: 'bottom' },
             targetType: 'relative',
             content: this.target ? this.getTargetElement() : '',
-            zIndex: getZindexPartial(div)
+            zIndex: getZindexPartial(div),
+            enableRtl: this.enableRtl
         });
         this.dropDown.hide();
-        attributes(this.element, (_a = {}, _a['role'] = 'menu', _a['aria-haspopup'] = this.items.length || this.target ? 'true' : 'false', _a['aria-expanded'] = 'false', _a['aria-owns'] = this.getPopUpElement().id, _a));
+        attributes(this.element, (_a = {}, _a['role'] = 'menu', _a['aria-haspopup'] = this.items.length || this.target ? 'true' : 'false', _a['aria-expanded'] = 'false', _a['aria-owns'] = this.getPopUpElement().id, _a['type'] = 'button', _a));
         if (this.cssClass) {
             addClass([div], this.cssClass.split(' '));
         }
-        if (this.enableRtl) {
-            div.classList.add(classNames.RTL);
-        }
         var _a;
@@ -225,3 +223,3 @@ };
         this.createPopup();
-        this.setActiveElem();
+        this.setActiveElem([this.element]);
     };
@@ -242,4 +240,4 @@ DropDownButton.prototype.setIconPositionTop = function () {
     };
-    DropDownButton.prototype.setActiveElem = function () {
-        this.activeElem = this.element;
+    DropDownButton.prototype.setActiveElem = function (elem) {
+        this.activeElem = elem;
     };
@@ -263,11 +261,21 @@ /**
         var _this = this;
-        detach(this.element.querySelector('span.e-caret'));
+        if (this.element.querySelector('span.e-caret')) {
+            detach(this.element.querySelector('span.e-caret'));
+        }
         _super.prototype.destroy.call(this);
         this.button.destroy();
-        ['role', 'aria-haspopup', 'aria-expanded', 'aria-owns'].forEach(function (key) {
+        ['role', 'aria-haspopup', 'aria-expanded', 'aria-owns', 'type'].forEach(function (key) {
             _this.element.removeAttribute(key);
         });
-        removeClass([this.element, this.activeElem], ['e-ddb-active', 'e-btn']);
-        detach(this.getPopUpElement());
-        this.unWireEvents();
+        removeClass([this.element], ['e-btn']);
+        removeClass(this.activeElem, ['e-active']);
+        this.dropDown.destroy();
+        var popupEle = document.getElementById(this.getPopUpElement().id);
+        if (popupEle) {
+            removeClass([popupEle], ['e-popup-open', 'e-popup-close']);
+            detach(popupEle);
+        }
+        if (!this.disabled) {
+            this.unWireEvents();
+        }
     };
@@ -282,8 +290,9 @@ DropDownButton.prototype.getPopUpElement = function () {
         var popupElement = this.getPopUpElement();
-        EventHandler.add(document, 'click', this.clickHandler, this);
+        this.delegateMousedownHandler = this.mousedownHandler.bind(this);
+        EventHandler.add(document, 'mousedown touchstart', this.delegateMousedownHandler, this);
+        EventHandler.add(this.element, 'click', this.clickHandler, this);
+        EventHandler.add(popupElement, 'click', this.clickHandler, this);
         EventHandler.add(this.element, 'keydown', this.keyBoardHandler, this);
-        if (!this.target) {
-            EventHandler.add(popupElement, 'keydown', this.keyBoardHandler, this);
-        }
-        rippleEffect(popupElement, { selector: '.' + classNames.ITEM });
+        EventHandler.add(popupElement, 'keydown', this.keyBoardHandler, this);
+        this.rippleFn = rippleEffect(popupElement, { selector: '.' + classNames.ITEM });
     };
@@ -294,7 +303,2 @@ DropDownButton.prototype.keyBoardHandler = function (e) {
         }
-        else {
-            if (e.keyCode !== 9) {
-                e.preventDefault();
-            }
-        }
         switch (e.keyCode) {
@@ -319,2 +323,6 @@ case 38:
     DropDownButton.prototype.upDownKeyHandler = function (e) {
+        if (this.target && (e.keyCode === 38 || e.keyCode === 40)) {
+            return;
+        }
+        e.preventDefault();
         var ul = this.getULElement();
@@ -324,2 +332,3 @@ var defaultIdx = e.keyCode === 40 ? 0 : ul.childElementCount - 1;
         var li = null;
+        this.removeCustomSelection();
         for (var i = 0, len = ul.children.length; i < len; i++) {
@@ -343,2 +352,8 @@ if (ul.children[i].classList.contains(classNames.FOCUS)) {
     };
+    DropDownButton.prototype.removeCustomSelection = function () {
+        var selectedLi = this.getULElement().querySelector('.e-selected');
+        if (selectedLi) {
+            selectedLi.classList.remove('e-selected');
+        }
+    };
     DropDownButton.prototype.isValidLI = function (li, index, keyCode, count) {
@@ -365,6 +380,11 @@ if (count === void 0) { count = 0; }
     DropDownButton.prototype.keyEventHandler = function (e) {
+        if (this.target && (e.keyCode === 13 || e.keyCode === 9)) {
+            return;
+        }
+        if (e.keyCode !== 9) {
+            e.preventDefault();
+        }
         if (e.keyCode === 27 || e.keyCode === 38 || e.keyCode === 9) {
             if (!this.canOpen()) {
-                this.closePopup(e);
-                this.element.focus();
+                this.closePopup(e, this.element);
             }
@@ -379,2 +399,8 @@ }
     };
+    DropDownButton.prototype.mousedownHandler = function (e) {
+        var trgt = e.target;
+        if (!this.canOpen() && !(closest(trgt, '#' + this.getPopUpElement().id) || closest(trgt, '#' + this.element.id))) {
+            this.closePopup(e);
+        }
+    };
     DropDownButton.prototype.clickHandler = function (e) {
@@ -388,4 +414,3 @@ var trgt = e.target;
             else {
-                this.closePopup(e);
-                this.activeElem.focus();
+                this.closePopup(e, this.activeElem[0]);
             }
@@ -406,4 +431,3 @@ }
                     }
-                    this.closePopup(e);
-                    this.activeElem.focus();
+                    this.closePopup(e, this.activeElem[0]);
                 }
@@ -428,3 +452,3 @@ }
             this.dropDown.show();
-            addClass([this.activeElem], 'e-ddb-active');
+            addClass([this.element], 'e-active');
             this.element.setAttribute('aria-expanded', 'true');
@@ -436,3 +460,3 @@ ul.focus();
     };
-    DropDownButton.prototype.closePopup = function (e) {
+    DropDownButton.prototype.closePopup = function (e, focusEle) {
         if (e === void 0) { e = null; }
@@ -443,8 +467,12 @@ var ul = this.getULElement();
         if (!beforeCloseArgs.cancel) {
+            this.removeCustomSelection();
             this.dropDown.hide();
-            removeClass([this.activeElem], 'e-ddb-active');
+            removeClass(this.activeElem, 'e-active');
             this.element.setAttribute('aria-expanded', 'false');
+            if (focusEle) {
+                focusEle.focus();
+            }
             var closeArgs = { element: ul, items: this.items };
             this.trigger('close', closeArgs);
-            if (!this.target) {
+            if (!this.target && ul) {
                 detach(ul);
@@ -455,5 +483,8 @@ }
     DropDownButton.prototype.unWireEvents = function () {
-        EventHandler.remove(document, 'click', this.clickHandler);
+        EventHandler.remove(document, 'mousedown touchstart', this.delegateMousedownHandler);
+        EventHandler.remove(this.element, 'click', this.clickHandler);
+        EventHandler.remove(this.getPopUpElement(), 'click', this.clickHandler);
         EventHandler.remove(this.element, 'keydown', this.keyBoardHandler);
         EventHandler.remove(this.getPopUpElement(), 'keydown', this.keyBoardHandler);
+        this.rippleFn();
     };
@@ -482,2 +513,13 @@ /**
                     break;
+                case 'disabled':
+                    if (newProp.disabled) {
+                        this.unWireEvents();
+                        if (!this.canOpen()) {
+                            this.closePopup();
+                        }
+                    }
+                    else {
+                        this.wireEvents();
+                    }
+                    break;
                 case 'cssClass':
@@ -616,3 +658,3 @@ if (newProp.cssClass.indexOf(classNames.VERTICAL) > -1) {
             var ejInstance = getValue('ej2_instances', ele);
-            var btn = createElement('button');
+            var btn = createElement('button', { attrs: { 'type': 'button' } });
             var wrapper = createElement(TAGNAME, { className: 'e-' + this.getModuleName() + '-wrapper' });
@@ -638,2 +680,3 @@ for (var idx = 0, len = ele.attributes.length; idx < len; idx++) {
         this.createSecondaryButton();
+        this.setActiveElem([this.element, this.secondaryBtnObj.element]);
         this.setAria();
@@ -665,5 +708,5 @@ this.wireEvents();
         this.element.classList.add('e-' + this.getModuleName());
+        this.element.type = 'button';
         this.wrapper.appendChild(this.element);
         this.setIconPositionTop();
-        this.setActiveElem();
     };
@@ -690,2 +733,5 @@ SplitButton.prototype.createSecondaryButton = function () {
             },
+            beforeClose: function (args) {
+                _this.trigger('beforeClose', args);
+            },
             open: function (args) {
@@ -704,3 +750,3 @@ _this.trigger('open', args);
         this.dropDown = this.secondaryBtnObj.dropDown;
-        this.secondaryBtnObj.activeElem = this.element;
+        this.secondaryBtnObj.activeElem = [this.element, this.secondaryBtnObj.element];
         EventHandler.remove(this.getPopUpElement(), 'keydown', this.secondaryBtnObj.keyBoardHandler);
@@ -734,16 +780,19 @@ this.secondaryBtnObj.element.querySelector('.e-btn-icon').classList.remove('e-icon-right');
         this.secondaryBtnObj.destroy();
-        if (this.wrapper.tagName === TAGNAME) {
-            this.wrapper.innerHTML = '';
-            removeClass([this.wrapper], ['e-rtl', 'e-' + this.getModuleName() + '-wrapper']);
-            removeClass([this.wrapper], this.cssClass.split(' '));
+        var element = document.getElementById(this.element.id);
+        if (element && element.parentElement === this.wrapper) {
+            if (this.wrapper.tagName === TAGNAME) {
+                this.wrapper.innerHTML = '';
+                removeClass([this.wrapper], ['e-rtl', 'e-' + this.getModuleName() + '-wrapper']);
+                removeClass([this.wrapper], this.cssClass.split(' '));
+            }
+            else {
+                removeClass([this.element], ['e-' + this.getModuleName(), RTL]);
+                ['role', 'aria-label', 'aria-haspopup', 'aria-expanded', 'aria-owns', 'type'].forEach(function (key) {
+                    _this.element.removeAttribute(key);
+                });
+                this.wrapper.parentNode.insertBefore(this.element, this.wrapper);
+                remove(this.wrapper);
+            }
+            this.unWireEvents();
         }
-        else {
-            removeClass([this.element], ['e-' + this.getModuleName(), RTL]);
-            ['role', 'aria-label', 'aria-haspopup', 'aria-expanded', 'aria-owns'].forEach(function (key) {
-                _this.element.removeAttribute(key);
-            });
-            this.wrapper.parentNode.insertBefore(this.element, this.wrapper);
-            remove(this.wrapper);
-        }
-        this.unWireEvents();
     };
@@ -865,6 +914,77 @@ SplitButton.prototype.wireEvents = function () {
 /**
+ * Initialize ButtonGroup CSS component with specified properties.
+ * ```html
+ * <div id='buttongroup'>
+ * <button></button>
+ * <button></button>
+ * <button></button>
+ * </div>
+ * ```
+ * ```typescript
+ * createButtonGroup('#buttongroup', {
+ *   cssClass: 'e-outline',
+ *   buttons: [
+ *       { content: 'Day' },
+ *       { content: 'Week' },
+ *       { content: 'Work Week'}
+ *   ]
+ * });
+ * ```
+ * @param {string} selector
+ * @param {CreateButtonGroupModel} options
+ * @returns HTMLElement
+ */
+function createButtonGroup(selector, options) {
+    if (options === void 0) { options = {}; }
+    var child;
+    var btnElem;
+    var nextChild;
+    var btnModel;
+    var wrapper = document.querySelector(selector);
+    addClass([wrapper], ['e-btn-group']);
+    wrapper.setAttribute('role', 'group');
+    var childs = wrapper.children;
+    options.buttons = options.buttons || [];
+    for (var i = 0, j = 0; j < childs.length; i++, j++) {
+        child = childs[j];
+        btnModel = options.buttons[i];
+        if (btnModel !== null) {
+            if (child.tagName === 'BUTTON') {
+                btnElem = child;
+            }
+            else {
+                btnElem = createElement('label');
+                nextChild = childs[j + 1];
+                if (nextChild) {
+                    wrapper.insertBefore(btnElem, nextChild);
+                }
+                else {
+                    wrapper.appendChild(btnElem);
+                }
+                if (child.id) {
+                    btnElem.setAttribute('for', child.id);
+                }
+                if (btnModel && btnModel.disabled) {
+                    child.disabled = true;
+                }
+                j++;
+            }
+            if (options.cssClass && btnModel && !btnModel.cssClass) {
+                btnModel.cssClass = options.cssClass;
+            }
+            new Button(btnModel || {}, btnElem);
+        }
+    }
+    return wrapper;
+}
+
+/**
+ * ButtonGroup modules
+ */
+
+/**
  * SplitButton all module
  */
 
-export { getModel, Item, DropDownButton, SplitButton };
+export { getModel, Item, DropDownButton, SplitButton, createButtonGroup };
 //# sourceMappingURL=ej2-splitbuttons.es5.js.map

dist/global/index.d.ts

@@ -1,10 +0,1 @@
-/*!
-*  filename: index.d.ts
-*  version : 16.1.37
-*  Copyright Syncfusion Inc. 2001 - 2018. All rights reserved.
-*  Use of this code is subject to the terms of our license.
-*  A copy of the current license can be obtained at any time by e-mailing
-*  [e-mail]. Any infringement will be prosecuted under
-*  applicable laws. 
-*/
 import * as _splitbuttons from '@syncfusion/ej2-splitbuttons';
@@ -11,0 +2,0 @@ import * as _base from '@syncfusion/ej2-base';

package.json

 {
   "name": "@syncfusion/ej2-splitbuttons",
-  "version": "16.1.37",
+  "version": "16.2.41",
   "description": "Essential JS 2 SplitButton Components",
@@ -11,4 +11,4 @@ "author": "Syncfusion Inc.",
   "dependencies": {
-    "@syncfusion/ej2-base": "~16.1.37",
-    "@syncfusion/ej2-popups": "~16.1.37"
+    "@syncfusion/ej2-base": "~16.2.41",
+    "@syncfusion/ej2-popups": "~16.2.41"
   },
@@ -15,0 +15,0 @@ "devDependencies": {

ReadMe.md

 # Overview
 
-A package of Essential JS 2 DropDownButton and SplitButton components. It comes with documentation and support, which is available under commercial and community licenses. Please visit www.syncfusion.com to get started.
+A package of Essential JS 2 ButtonGroup, DropDownButton and SplitButton components. It comes with documentation and support, which is available under commercial and community licenses. Please visit www.syncfusion.com to get started.
 
@@ -10,2 +10,4 @@ ## Resources
 * [SplitButton Demo](http://ej2.syncfusion.com/demos/#/material/button/split-button.html)
-* [SplitButton Documentation](http://ej2.syncfusion.com/documentation/split-button)
+* [SplitButton Documentation](http://ej2.syncfusion.com/documentation/split-button)
+* [ButtonGroup Demo](http://ej2.syncfusion.com/demos/#/material/button/button-group.html)
+* [ButtonGroup Documentation](http://ej2.syncfusion.com/documentation/button-group)

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

@@ -1,2 +0,2 @@
-import { Collection, Event, NotifyPropertyChanges, detach, Property, EventHandler, addClass, attributes } from '@syncfusion/ej2-base';import { createElement, EmitType, getUniqueID, closest, rippleEffect } from '@syncfusion/ej2-base';import { Component, INotifyPropertyChanged, select, KeyboardEventArgs } from '@syncfusion/ej2-base';import { Browser, classList, removeClass } from '@syncfusion/ej2-base';import { Button } from '@syncfusion/ej2-buttons';import { Popup, getZindexPartial } from '@syncfusion/ej2-popups';import { MenuEventArgs, BeforeOpenCloseMenuEventArgs, OpenCloseMenuEventArgs } from './../common/common';import { getModel, SplitButtonIconPosition, Item } from './../common/common';import { ItemModel } from './../common/common-model';
+import { Collection, Event, NotifyPropertyChanges, detach, Property, EventHandler, EmitType } from '@syncfusion/ej2-base';import { addClass, createElement, 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, getZindexPartial } from '@syncfusion/ej2-popups';import { MenuEventArgs, BeforeOpenCloseMenuEventArgs, OpenCloseMenuEventArgs } from './../common/common';import { getModel, SplitButtonIconPosition, Item } from './../common/common';import { ItemModel } from './../common/common-model';
 import {ComponentModel} from '@syncfusion/ej2-base';
@@ -3,0 +3,0 @@

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

 import { EmitType } from '@syncfusion/ej2-base';
-import { Component, INotifyPropertyChanged, KeyboardEventArgs } from '@syncfusion/ej2-base';
+import { INotifyPropertyChanged } from '@syncfusion/ej2-base';
+import { Component, KeyboardEventArgs } from '@syncfusion/ej2-base';
 import { Button } from '@syncfusion/ej2-buttons';
@@ -25,3 +26,5 @@ import { Popup } from '@syncfusion/ej2-popups';
     protected button: Button;
-    protected activeElem: HTMLElement;
+    protected activeElem: HTMLElement[];
+    private rippleFn;
+    private delegateMousedownHandler;
     /**
@@ -127,3 +130,3 @@ * Defines the content of the DropDownButton element that can either be a text or HTML elements.
     private appendArrowSpan();
-    protected setActiveElem(): void;
+    protected setActiveElem(elem: HTMLElement[]): void;
     /**
@@ -146,8 +149,10 @@ * Get component name.
     protected upDownKeyHandler(e: KeyboardEventArgs): void;
+    private removeCustomSelection();
     private isValidLI(li, index, keyCode, count?);
     private keyEventHandler(e);
     private getLI(elem);
+    private mousedownHandler(e);
     protected clickHandler(e: MouseEvent | KeyboardEventArgs): void;
     private openPopUp(e?);
-    private closePopup(e?);
+    private closePopup(e?, focusEle?);
     protected unWireEvents(): void;
@@ -154,0 +159,0 @@ /**

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

@@ -57,10 +57,11 @@ var __extends = (this && this.__extends) || (function () {
                 relateTo: this.element,
-                collision: { X: ej2_base_4.Browser.isDevice ? 'fit' : 'flip', Y: 'flip' },
+                collision: { X: 'fit', Y: 'flip' },
                 position: { X: 'left', Y: 'bottom' },
                 targetType: 'relative',
                 content: this.target ? this.getTargetElement() : '',
-                zIndex: ej2_popups_1.getZindexPartial(div)
+                zIndex: ej2_popups_1.getZindexPartial(div),
+                enableRtl: this.enableRtl
             });
             this.dropDown.hide();
-            ej2_base_1.attributes(this.element, (_a = {},
+            ej2_base_3.attributes(this.element, (_a = {},
                 _a['role'] = 'menu',
@@ -70,9 +71,7 @@ _a['aria-haspopup'] = this.items.length || this.target ? 'true' : 'false',
                 _a['aria-owns'] = this.getPopUpElement().id,
+                _a['type'] = 'button',
                 _a));
             if (this.cssClass) {
-                ej2_base_1.addClass([div], this.cssClass.split(' '));
+                ej2_base_2.addClass([div], this.cssClass.split(' '));
             }
-            if (this.enableRtl) {
-                div.classList.add(classNames.RTL);
-            }
             var _a;
@@ -141,3 +140,3 @@ };
             this.createPopup();
-            this.setActiveElem();
+            this.setActiveElem([this.element]);
         };
@@ -147,5 +146,5 @@ DropDownButton.prototype.setIconPositionTop = function () {
             if (iconSpan && this.iconPosition === 'Top') {
-                ej2_base_1.addClass([this.element], 'e-top-icon-btn');
+                ej2_base_2.addClass([this.element], 'e-top-icon-btn');
                 ej2_base_4.removeClass([iconSpan], 'e-icon-left');
-                ej2_base_1.addClass([iconSpan], 'e-icon-top');
+                ej2_base_2.addClass([iconSpan], 'e-icon-top');
             }
@@ -159,4 +158,4 @@ };
         };
-        DropDownButton.prototype.setActiveElem = function () {
-            this.activeElem = this.element;
+        DropDownButton.prototype.setActiveElem = function (elem) {
+            this.activeElem = elem;
         };
@@ -171,11 +170,21 @@ DropDownButton.prototype.getModuleName = function () {
             var _this = this;
-            ej2_base_1.detach(this.element.querySelector('span.e-caret'));
+            if (this.element.querySelector('span.e-caret')) {
+                ej2_base_1.detach(this.element.querySelector('span.e-caret'));
+            }
             _super.prototype.destroy.call(this);
             this.button.destroy();
-            ['role', 'aria-haspopup', 'aria-expanded', 'aria-owns'].forEach(function (key) {
+            ['role', 'aria-haspopup', 'aria-expanded', 'aria-owns', 'type'].forEach(function (key) {
                 _this.element.removeAttribute(key);
             });
-            ej2_base_4.removeClass([this.element, this.activeElem], ['e-ddb-active', 'e-btn']);
-            ej2_base_1.detach(this.getPopUpElement());
-            this.unWireEvents();
+            ej2_base_4.removeClass([this.element], ['e-btn']);
+            ej2_base_4.removeClass(this.activeElem, ['e-active']);
+            this.dropDown.destroy();
+            var popupEle = document.getElementById(this.getPopUpElement().id);
+            if (popupEle) {
+                ej2_base_4.removeClass([popupEle], ['e-popup-open', 'e-popup-close']);
+                ej2_base_1.detach(popupEle);
+            }
+            if (!this.disabled) {
+                this.unWireEvents();
+            }
         };
@@ -190,8 +199,9 @@ DropDownButton.prototype.getPopUpElement = function () {
             var popupElement = this.getPopUpElement();
-            ej2_base_1.EventHandler.add(document, 'click', this.clickHandler, this);
+            this.delegateMousedownHandler = this.mousedownHandler.bind(this);
+            ej2_base_1.EventHandler.add(document, 'mousedown touchstart', this.delegateMousedownHandler, this);
+            ej2_base_1.EventHandler.add(this.element, 'click', this.clickHandler, this);
+            ej2_base_1.EventHandler.add(popupElement, 'click', this.clickHandler, this);
             ej2_base_1.EventHandler.add(this.element, 'keydown', this.keyBoardHandler, this);
-            if (!this.target) {
-                ej2_base_1.EventHandler.add(popupElement, 'keydown', this.keyBoardHandler, this);
-            }
-            ej2_base_2.rippleEffect(popupElement, { selector: '.' + classNames.ITEM });
+            ej2_base_1.EventHandler.add(popupElement, 'keydown', this.keyBoardHandler, this);
+            this.rippleFn = ej2_base_2.rippleEffect(popupElement, { selector: '.' + classNames.ITEM });
         };
@@ -202,7 +212,2 @@ DropDownButton.prototype.keyBoardHandler = function (e) {
             }
-            else {
-                if (e.keyCode !== 9) {
-                    e.preventDefault();
-                }
-            }
             switch (e.keyCode) {
@@ -227,2 +232,6 @@ case 38:
         DropDownButton.prototype.upDownKeyHandler = function (e) {
+            if (this.target && (e.keyCode === 38 || e.keyCode === 40)) {
+                return;
+            }
+            e.preventDefault();
             var ul = this.getULElement();
@@ -232,2 +241,3 @@ var defaultIdx = e.keyCode === 40 ? 0 : ul.childElementCount - 1;
             var li = null;
+            this.removeCustomSelection();
             for (var i = 0, len = ul.children.length; i < len; i++) {
@@ -247,6 +257,12 @@ if (ul.children[i].classList.contains(classNames.FOCUS)) {
             if (liIdx !== -1) {
-                ej2_base_1.addClass([ul.children[liIdx]], classNames.FOCUS);
+                ej2_base_2.addClass([ul.children[liIdx]], classNames.FOCUS);
                 ul.children[liIdx].focus();
             }
         };
+        DropDownButton.prototype.removeCustomSelection = function () {
+            var selectedLi = this.getULElement().querySelector('.e-selected');
+            if (selectedLi) {
+                selectedLi.classList.remove('e-selected');
+            }
+        };
         DropDownButton.prototype.isValidLI = function (li, index, keyCode, count) {
@@ -273,6 +289,11 @@ if (count === void 0) { count = 0; }
         DropDownButton.prototype.keyEventHandler = function (e) {
+            if (this.target && (e.keyCode === 13 || e.keyCode === 9)) {
+                return;
+            }
+            if (e.keyCode !== 9) {
+                e.preventDefault();
+            }
             if (e.keyCode === 27 || e.keyCode === 38 || e.keyCode === 9) {
                 if (!this.canOpen()) {
-                    this.closePopup(e);
-                    this.element.focus();
+                    this.closePopup(e, this.element);
                 }
@@ -285,8 +306,14 @@ }
         DropDownButton.prototype.getLI = function (elem) {
-            return elem.tagName === 'LI' ? elem : ej2_base_2.closest(elem, 'li');
+            return elem.tagName === 'LI' ? elem : ej2_base_3.closest(elem, 'li');
         };
+        DropDownButton.prototype.mousedownHandler = function (e) {
+            var trgt = e.target;
+            if (!this.canOpen() && !(ej2_base_3.closest(trgt, '#' + this.getPopUpElement().id) || ej2_base_3.closest(trgt, '#' + this.element.id))) {
+                this.closePopup(e);
+            }
+        };
         DropDownButton.prototype.clickHandler = function (e) {
             var trgt = e.target;
             var canOpen = this.canOpen();
-            if (ej2_base_2.closest(trgt, '#' + this.element.id)) {
+            if (ej2_base_3.closest(trgt, '#' + this.element.id)) {
                 if (canOpen) {
@@ -296,8 +323,7 @@ this.openPopUp(e);
                 else {
-                    this.closePopup(e);
-                    this.activeElem.focus();
+                    this.closePopup(e, this.activeElem[0]);
                 }
             }
             else {
-                if (ej2_base_2.closest(trgt, '#' + this.getPopUpElement().id)) {
+                if (ej2_base_3.closest(trgt, '#' + this.getPopUpElement().id)) {
                     var eventArgs = void 0;
@@ -314,4 +340,3 @@ var liIdx = void 0;
                         }
-                        this.closePopup(e);
-                        this.activeElem.focus();
+                        this.closePopup(e, this.activeElem[0]);
                     }
@@ -336,3 +361,3 @@ }
                 this.dropDown.show();
-                ej2_base_1.addClass([this.activeElem], 'e-ddb-active');
+                ej2_base_2.addClass([this.element], 'e-active');
                 this.element.setAttribute('aria-expanded', 'true');
@@ -344,3 +369,3 @@ ul.focus();
         };
-        DropDownButton.prototype.closePopup = function (e) {
+        DropDownButton.prototype.closePopup = function (e, focusEle) {
             if (e === void 0) { e = null; }
@@ -351,8 +376,12 @@ var ul = this.getULElement();
             if (!beforeCloseArgs.cancel) {
+                this.removeCustomSelection();
                 this.dropDown.hide();
-                ej2_base_4.removeClass([this.activeElem], 'e-ddb-active');
+                ej2_base_4.removeClass(this.activeElem, 'e-active');
                 this.element.setAttribute('aria-expanded', 'false');
+                if (focusEle) {
+                    focusEle.focus();
+                }
                 var closeArgs = { element: ul, items: this.items };
                 this.trigger('close', closeArgs);
-                if (!this.target) {
+                if (!this.target && ul) {
                     ej2_base_1.detach(ul);
@@ -363,5 +392,8 @@ }
         DropDownButton.prototype.unWireEvents = function () {
-            ej2_base_1.EventHandler.remove(document, 'click', this.clickHandler);
+            ej2_base_1.EventHandler.remove(document, 'mousedown touchstart', this.delegateMousedownHandler);
+            ej2_base_1.EventHandler.remove(this.element, 'click', this.clickHandler);
+            ej2_base_1.EventHandler.remove(this.getPopUpElement(), 'click', this.clickHandler);
             ej2_base_1.EventHandler.remove(this.element, 'keydown', this.keyBoardHandler);
             ej2_base_1.EventHandler.remove(this.getPopUpElement(), 'keydown', this.keyBoardHandler);
+            this.rippleFn();
         };
@@ -383,2 +415,13 @@ DropDownButton.prototype.onPropertyChanged = function (newProp, oldProp) {
                         break;
+                    case 'disabled':
+                        if (newProp.disabled) {
+                            this.unWireEvents();
+                            if (!this.canOpen()) {
+                                this.closePopup();
+                            }
+                        }
+                        else {
+                            this.wireEvents();
+                        }
+                        break;
                     case 'cssClass':
@@ -393,3 +436,3 @@ if (newProp.cssClass.indexOf(classNames.VERTICAL) > -1) {
                         if (newProp.cssClass) {
-                            ej2_base_1.addClass([popupElement], newProp.cssClass.split(' '));
+                            ej2_base_2.addClass([popupElement], newProp.cssClass.split(' '));
                         }
@@ -396,0 +439,0 @@ break;

src/index.d.ts

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

src/index.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "./common/index", "./drop-down-button/index", "./split-button/index"], function (require, exports, index_1, index_2, index_3) {
+define(["require", "exports", "./common/index", "./drop-down-button/index", "./split-button/index", "./button-group/index"], function (require, exports, index_1, index_2, index_3, index_4) {
     "use strict";
@@ -10,2 +10,3 @@ function __export(m) {
     __export(index_3);
+    __export(index_4);
 });

src/split-button/split-button.js

@@ -31,3 +31,3 @@ var __extends = (this && this.__extends) || (function () {
                 var ejInstance = ej2_base_1.getValue('ej2_instances', ele);
-                var btn = ej2_base_1.createElement('button');
+                var btn = ej2_base_1.createElement('button', { attrs: { 'type': 'button' } });
                 var wrapper = ej2_base_1.createElement(TAGNAME, { className: 'e-' + this.getModuleName() + '-wrapper' });
@@ -53,2 +53,3 @@ for (var idx = 0, len = ele.attributes.length; idx < len; idx++) {
             this.createSecondaryButton();
+            this.setActiveElem([this.element, this.secondaryBtnObj.element]);
             this.setAria();
@@ -80,5 +81,5 @@ this.wireEvents();
             this.element.classList.add('e-' + this.getModuleName());
+            this.element.type = 'button';
             this.wrapper.appendChild(this.element);
             this.setIconPositionTop();
-            this.setActiveElem();
         };
@@ -105,2 +106,5 @@ SplitButton.prototype.createSecondaryButton = function () {
                 },
+                beforeClose: function (args) {
+                    _this.trigger('beforeClose', args);
+                },
                 open: function (args) {
@@ -119,3 +123,3 @@ _this.trigger('open', args);
             this.dropDown = this.secondaryBtnObj.dropDown;
-            this.secondaryBtnObj.activeElem = this.element;
+            this.secondaryBtnObj.activeElem = [this.element, this.secondaryBtnObj.element];
             ej2_base_2.EventHandler.remove(this.getPopUpElement(), 'keydown', this.secondaryBtnObj.keyBoardHandler);
@@ -140,16 +144,19 @@ this.secondaryBtnObj.element.querySelector('.e-btn-icon').classList.remove('e-icon-right');
             this.secondaryBtnObj.destroy();
-            if (this.wrapper.tagName === TAGNAME) {
-                this.wrapper.innerHTML = '';
-                ej2_base_1.removeClass([this.wrapper], ['e-rtl', 'e-' + this.getModuleName() + '-wrapper']);
-                ej2_base_1.removeClass([this.wrapper], this.cssClass.split(' '));
+            var element = document.getElementById(this.element.id);
+            if (element && element.parentElement === this.wrapper) {
+                if (this.wrapper.tagName === TAGNAME) {
+                    this.wrapper.innerHTML = '';
+                    ej2_base_1.removeClass([this.wrapper], ['e-rtl', 'e-' + this.getModuleName() + '-wrapper']);
+                    ej2_base_1.removeClass([this.wrapper], this.cssClass.split(' '));
+                }
+                else {
+                    ej2_base_1.removeClass([this.element], ['e-' + this.getModuleName(), RTL]);
+                    ['role', 'aria-label', 'aria-haspopup', 'aria-expanded', 'aria-owns', 'type'].forEach(function (key) {
+                        _this.element.removeAttribute(key);
+                    });
+                    this.wrapper.parentNode.insertBefore(this.element, this.wrapper);
+                    ej2_base_1.remove(this.wrapper);
+                }
+                this.unWireEvents();
             }
-            else {
-                ej2_base_1.removeClass([this.element], ['e-' + this.getModuleName(), RTL]);
-                ['role', 'aria-label', 'aria-haspopup', 'aria-expanded', 'aria-owns'].forEach(function (key) {
-                    _this.element.removeAttribute(key);
-                });
-                this.wrapper.parentNode.insertBefore(this.element, this.wrapper);
-                ej2_base_1.remove(this.wrapper);
-            }
-            this.unWireEvents();
         };
@@ -156,0 +163,0 @@ SplitButton.prototype.wireEvents = function () {

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6625788

increased by43.98%

Number of package files

101

increased by29.49%

Lines of code

57839

increased by53.81%

Number of lines in readme file

12

increased by20%

Dependency changes

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

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

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

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

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

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

• Updated@syncfusion/ej2-base@~16.2.41

• Updated@syncfusion/ej2-popups@~16.2.41