Socket
Socket
Sign inDemoInstall

@syncfusion/ej2-splitbuttons

Package Overview
Dependencies
Maintainers
2
Versions
137
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@syncfusion/ej2-splitbuttons - npm Package Compare versions

Comparing version 16.2.45 to 16.2.46

src/global.js

12

button-group.js

@@ -1,8 +0,4 @@

define(["require", "exports", "./src/button-group/index"], function (require, exports, index_1) {
"use strict";
function __export(m) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
Object.defineProperty(exports, "__esModule", { value: true });
__export(index_1);
});
/**
* button-group
*/
export * from './src/button-group/index';

12

common.js

@@ -1,8 +0,4 @@

define(["require", "exports", "./src/common/index"], function (require, exports, index_1) {
"use strict";
function __export(m) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
Object.defineProperty(exports, "__esModule", { value: true });
__export(index_1);
});
/**
* common
*/
export * from './src/common/index';

11

dist/ej2-splitbuttons.umd.min.js

@@ -1,2 +0,11 @@

!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),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 n(){this.constructor=t}e(t,o),t.prototype=null===o?Object.create(o):(n.prototype=o.prototype,new n)}}(),p=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",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 n.Popup(e,{relateTo:this.element,collision:{X:"fit",Y:"flip"},position:{X:"left",Y:"bottom"},targetType:"relative",content:this.target?this.getTargetElement():"",zIndex:n.getZindexPartial(e),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,n,s,i,r=this.hasIcon(e,"iconCss"),a=t.createElement("ul",{attrs:{tabindex:"0"}}),l=0;l<e.length;l++)n=e[l],s=t.createElement("li",{innerHTML:n.url?"":n.text,className:n.separator?u+" "+f:u,attrs:{role:"menuItem",tabindex:"-1"},id:n.id?n.id:t.getUniqueID("e-"+this.getModuleName()+"-item")}),n.iconCss?(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([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 n=document.getElementById(this.getPopUpElement().id);n&&(t.removeClass([n],["e-popup-open","e-popup-close"]),t.detach(n)),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(),n=40===e.keyCode?0:o.childElementCount-1,s=n,i=null;this.removeCustomSelection();for(var 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.removeCustomSelection=function(){var e=this.getULElement().querySelector(".e-selected");e&&e.classList.remove("e-selected")},i.prototype.isValidLI=function(e,t,o,n){if(void 0===n&&(n=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(++n===this.items.length)return t=-1;t=this.isValidLI(e,t,o,n)}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,n=this.canOpen();if(t.closest(o,"#"+this.element.id))n?this.openPopUp(e):this.closePopup(e,this.activeElem[0]);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[0]))}},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.element],"e-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,o){void 0===e&&(e=null);var n=this.getULElement(),s={element:n,items:this.items,event:e,cancel:!1};if(this.trigger("beforeClose",s),!s.cancel){this.removeCustomSelection(),this.dropDown.hide(),t.removeClass(this.activeElem,"e-active"),this.element.setAttribute("aria-expanded","false"),o&&o.focus();var i={element:n,items:this.items};this.trigger("close",i),!this.target&&n&&t.detach(n)}},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 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"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 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",w=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",{attrs:{type:"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.setActiveElem([this.element,this.secondaryBtnObj.element]),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.element.type="button",this.wrapper.appendChild(this.element),this.setIconPositionTop()},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)},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(n,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")},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();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())},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=w,e.createButtonGroup=function(e,n){void 0===n&&(n={});var s,i,r,a,l=document.querySelector(e);t.addClass([l],["e-btn-group"]),l.setAttribute("role","group");var p=l.children;n.buttons=n.buttons||[];for(var c=0,d=0;d<p.length;c++,d++)s=p[d],null!==(a=n.buttons[c])&&("BUTTON"===s.tagName?i=s:(i=t.createElement("label"),(r=p[d+1])?l.insertBefore(i,r):l.appendChild(i),s.id&&i.setAttribute("for",s.id),a&&a.disabled&&(s.disabled=!0),d++),n.cssClass&&a&&!a.cssClass&&(a.cssClass=n.cssClass),new o.Button(a||{},i));return l},Object.defineProperty(e,"__esModule",{value:!0})});
/*!
* filename: ej2-splitbuttons.umd.min.js
* version : 16.2.46
* 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
* licensing@syncfusion.com. 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,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.dropDown.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})});
//# sourceMappingURL=ej2-splitbuttons.umd.min.js.map

25

dist/es6/ej2-splitbuttons.es2015.js
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';
import { Popup, getZindexPartial } from '@syncfusion/ej2-popups';
import { Popup } from '@syncfusion/ej2-popups';

@@ -113,3 +113,3 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {

createPopup() {
let div = createElement('div', {
let div = this.createElement('div', {
className: classNames.POPUP,

@@ -125,3 +125,2 @@ id: this.element.id + '-popup'

content: this.target ? this.getTargetElement() : '',
zIndex: getZindexPartial(div),
enableRtl: this.enableRtl

@@ -150,3 +149,3 @@ });

let eventArgs;
let ul = createElement('ul', {
let ul = this.createElement('ul', {
attrs: { 'tabindex': '0' }

@@ -156,3 +155,3 @@ });

item = items[i];
li = createElement('li', {
li = this.createElement('li', {
innerHTML: item.url ? '' : item.text,

@@ -164,3 +163,3 @@ className: item.separator ? classNames.ITEM + ' ' + classNames.SEPARATOR : classNames.ITEM,

if (item.iconCss) {
span = createElement('span', { className: classNames.ICON + ' ' + item.iconCss });
span = this.createElement('span', { className: classNames.ICON + ' ' + item.iconCss });
li.insertBefore(span, li.childNodes[0]);

@@ -191,3 +190,3 @@ }

createAnchor(item) {
return createElement('a', { className: 'e-menu-text e-menu-url', innerHTML: item.text, attrs: { 'href': item.url } });
return this.createElement('a', { className: 'e-menu-text e-menu-url', innerHTML: item.text, attrs: { 'href': item.url } });
}

@@ -217,3 +216,3 @@ initialize() {

appendArrowSpan() {
this.element.appendChild(createElement('span', {
this.element.appendChild(this.createElement('span', {
className: 'e-btn-icon e-icons ' + 'e-icon-' + (this.cssClass.indexOf(classNames.VERTICAL) > -1

@@ -415,3 +414,3 @@ ? 'bottom' : 'right') + ' e-caret'

if (!beforeOpenArgs.cancel) {
this.dropDown.show();
this.dropDown.show(null, this.dropDown.element);
addClass([this.element], 'e-active');

@@ -604,4 +603,4 @@ this.element.setAttribute('aria-expanded', 'true');

let ejInstance = getValue('ej2_instances', ele);
let btn = createElement('button', { attrs: { 'type': 'button' } });
let wrapper = createElement(TAGNAME, { className: 'e-' + this.getModuleName() + '-wrapper' });
let btn = this.createElement('button', { attrs: { 'type': 'button' } });
let wrapper = this.createElement(TAGNAME, { className: 'e-' + this.getModuleName() + '-wrapper' });
for (let idx = 0, len = ele.attributes.length; idx < len; idx++) {

@@ -632,3 +631,3 @@ btn.setAttribute(ele.attributes[idx].nodeName, ele.attributes[idx].nodeValue);

if (!this.wrapper) {
this.wrapper = createElement('div', { className: 'e-' + this.getModuleName() + '-wrapper' });
this.wrapper = this.createElement('div', { className: 'e-' + this.getModuleName() + '-wrapper' });
this.element.parentNode.insertBefore(this.wrapper, this.element);

@@ -659,3 +658,3 @@ }

createSecondaryButton() {
let btnElem = createElement('button', {
let btnElem = this.createElement('button', {
className: 'e-icon-btn',

@@ -662,0 +661,0 @@ attrs: { 'tabindex': '-1' },

25

dist/es6/ej2-splitbuttons.es5.js
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';
import { Popup, getZindexPartial } from '@syncfusion/ej2-popups';
import { Popup } from '@syncfusion/ej2-popups';

@@ -140,3 +140,3 @@ var __extends = (undefined && undefined.__extends) || (function () {

DropDownButton.prototype.createPopup = function () {
var div = createElement('div', {
var div = this.createElement('div', {
className: classNames.POPUP,

@@ -152,3 +152,2 @@ id: this.element.id + '-popup'

content: this.target ? this.getTargetElement() : '',
zIndex: getZindexPartial(div),
enableRtl: this.enableRtl

@@ -175,3 +174,3 @@ });

var eventArgs;
var ul = createElement('ul', {
var ul = this.createElement('ul', {
attrs: { 'tabindex': '0' }

@@ -181,3 +180,3 @@ });

item = items[i];
li = createElement('li', {
li = this.createElement('li', {
innerHTML: item.url ? '' : item.text,

@@ -189,3 +188,3 @@ className: item.separator ? classNames.ITEM + ' ' + classNames.SEPARATOR : classNames.ITEM,

if (item.iconCss) {
span = createElement('span', { className: classNames.ICON + ' ' + item.iconCss });
span = this.createElement('span', { className: classNames.ICON + ' ' + item.iconCss });
li.insertBefore(span, li.childNodes[0]);

@@ -216,3 +215,3 @@ }

DropDownButton.prototype.createAnchor = function (item) {
return createElement('a', { className: 'e-menu-text e-menu-url', innerHTML: item.text, attrs: { 'href': item.url } });
return this.createElement('a', { className: 'e-menu-text e-menu-url', innerHTML: item.text, attrs: { 'href': item.url } });
};

@@ -242,3 +241,3 @@ DropDownButton.prototype.initialize = function () {

DropDownButton.prototype.appendArrowSpan = function () {
this.element.appendChild(createElement('span', {
this.element.appendChild(this.createElement('span', {
className: 'e-btn-icon e-icons ' + 'e-icon-' + (this.cssClass.indexOf(classNames.VERTICAL) > -1

@@ -443,3 +442,3 @@ ? 'bottom' : 'right') + ' e-caret'

if (!beforeOpenArgs.cancel) {
this.dropDown.show();
this.dropDown.show(null, this.dropDown.element);
addClass([this.element], 'e-active');

@@ -646,4 +645,4 @@ this.element.setAttribute('aria-expanded', 'true');

var ejInstance = getValue('ej2_instances', ele);
var btn = createElement('button', { attrs: { 'type': 'button' } });
var wrapper = createElement(TAGNAME, { className: 'e-' + this.getModuleName() + '-wrapper' });
var btn = this.createElement('button', { attrs: { 'type': 'button' } });
var wrapper = this.createElement(TAGNAME, { className: 'e-' + this.getModuleName() + '-wrapper' });
for (var idx = 0, len = ele.attributes.length; idx < len; idx++) {

@@ -674,3 +673,3 @@ btn.setAttribute(ele.attributes[idx].nodeName, ele.attributes[idx].nodeValue);

if (!this.wrapper) {
this.wrapper = createElement('div', { className: 'e-' + this.getModuleName() + '-wrapper' });
this.wrapper = this.createElement('div', { className: 'e-' + this.getModuleName() + '-wrapper' });
this.element.parentNode.insertBefore(this.wrapper, this.element);

@@ -702,3 +701,3 @@ }

var _this = this;
var btnElem = createElement('button', {
var btnElem = this.createElement('button', {
className: 'e-icon-btn',

@@ -705,0 +704,0 @@ attrs: { 'tabindex': '-1' },

9

dist/global/index.d.ts

@@ -0,1 +1,10 @@

/*!
* filename: index.d.ts
* version : 16.2.46
* 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
* licensing@syncfusion.com. Any infringement will be prosecuted under
* applicable laws.
*/
import * as _splitbuttons from '@syncfusion/ej2-splitbuttons';

@@ -2,0 +11,0 @@ import * as _base from '@syncfusion/ej2-base';

12

drop-down-button.js

@@ -1,8 +0,4 @@

define(["require", "exports", "./src/drop-down-button/index"], function (require, exports, index_1) {
"use strict";
function __export(m) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
Object.defineProperty(exports, "__esModule", { value: true });
__export(index_1);
});
/**
* drop-down-button
*/
export * from './src/drop-down-button/index';

12

index.js

@@ -1,8 +0,4 @@

define(["require", "exports", "./src/index"], function (require, exports, index_1) {
"use strict";
function __export(m) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
Object.defineProperty(exports, "__esModule", { value: true });
__export(index_1);
});
/**
* index
*/
export * from './src/index';

8

package.json
{
"name": "@syncfusion/ej2-splitbuttons",
"version": "16.2.45",
"version": "16.2.46",
"description": "Essential JS 2 SplitButton Components",

@@ -8,7 +8,7 @@ "author": "Syncfusion Inc.",

"main": "./dist/ej2-splitbuttons.umd.min.js",
"module": "./dist/es6/ej2-splitbuttons.es5.js",
"module": "./index.js",
"es2015": "./dist/es6/ej2-splitbuttons.es2015.js",
"dependencies": {
"@syncfusion/ej2-base": "~16.2.45",
"@syncfusion/ej2-popups": "~16.2.45"
"@syncfusion/ej2-base": "~16.2.46",
"@syncfusion/ej2-popups": "~16.2.46"
},

@@ -15,0 +15,0 @@ "devDependencies": {

101

ReadMe.md

@@ -1,12 +0,95 @@

# Overview
# ej2-splitbuttons
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.
A package of Essential JS 2 DroDownButton, SplitButton and ButtonGroup components.
## Resources
![SplitButton](https://ej2.syncfusion.com/products/images/splitbutton/readme.gif)
* [DropDownButton Demo](http://ej2.syncfusion.com/demos/#/material/button/drop-down-button.html)
* [DropDownButton Documentation](http://ej2.syncfusion.com/documentation/drop-down-button)
* [SplitButton Demo](http://ej2.syncfusion.com/demos/#/material/button/split-button.html)
* [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)
> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA (https://www.syncfusion.com/eula/es/). To acquire a license, you can purchase one at https://www.syncfusion.com/sales/products or start a free 30-day trial here (https://www.syncfusion.com/account/manage-trials/start-trials).
> A free community license (https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
## Setup
To install `SplitButtons` and its dependent packages, use the following command
```sh
npm install @syncfusion/ej2-splitbuttons
```
## Components included
Following list of components are available in the package.
* DropDownButton - `DropDownButton` is used to toggle contextual overlays for displaying list of action items.
* [Getting Started](https://ej2.syncfusion.com/documentation/drop-down-button/getting-started.html?lang=typescript&utm_source=npm&utm_campaign=drop-down-button)
* [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=grid#/material/button/drop-down-button.html)
* [Product Page](https://www.syncfusion.com/products/javascript/dropdown-button)
* SplitButton - `SplitButton` has primary and secondary button. Primary button is used to select default action and secondary button is used to toggle contextual overlays for displaying list of action items.
* [Getting Started](https://ej2.syncfusion.com/documentation/split-button/getting-started.html?lang=typescript&utm_source=npm&utm_campaign=split-button)
* [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=split-button#/material/button/split-button.html)
* [Product Page](https://www.syncfusion.com/products/javascript/split-button)
* ButtonGroup - `ButtonGroup` is a graphical user interface that groups series of buttons horizontally or vertically.
* [Getting Started](https://ej2.syncfusion.com/documentation/button-group/getting-started.html?lang=typescript&utm_source=npm&utm_campaign=button-group)
* [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=grid#/material/button/button-group.html)
* [Product Page](https://www.syncfusion.com/products/javascript/button-group)
## Supported Frameworks
These components are available in following list of frameworks.
1. [Angular](https://github.com/syncfusion/ej2-ng-splitbuttons?utm_source=npm&utm_campaign=splitbutton)
2. [React](https://github.com/syncfusion/ej2-react-splitbuttons?utm_source=npm&utm_campaign=splitbutton)
3. [VueJS](https://github.com/syncfusion/ej2-vue-splitbuttons?utm_source=npm&utm_campaign=splitbutton)
4. [ASP.NET Core](https://www.syncfusion.com/products/aspnetcore)
5. [ASP.NET MVC](https://www.syncfusion.com/products/aspnetmvc)
6. [JavaScript (ES5)](https://www.syncfusion.com/products/javascript)
## Key Features
### DropDownButton
* [**Icons and Navigations**](https://ej2.syncfusion.com/documentation/drop-down-button/popup-items.html?lang=typescript#icons) - Supports text and icon on the DropDownButton and Popup items. URL can be given to Popup items that creates the anchor link to navigate to the URL provided.
* [**Separator**](https://ej2.syncfusion.com/documentation/drop-down-button/popup-items.html#separator) - Supports Popup items grouping by using the Separator.
* [**Accessibility**](https://ej2.syncfusion.com/documentation/drop-down-button/accessibility.html?lang=typescript#accessibility) - Provided with built-in accessibility support that helps to access all the DropDownButton component features through the keyboard, screen readers, or other assistive technology devices.
### SplitButton
* [**Icons and Navigations**](https://ej2.syncfusion.com/documentation/split-button/icons-and-separator.html?lang=typescript#splitbutton-icons) - Supports text and icon on the SplitButton and Popup items. URL can be given to Popup items that creates the anchor link to navigate to the URL provided.
* [**Separator**](https://ej2.syncfusion.com/documentation/split-button/icons-and-separator.html?lang=typescript#separator) - Supports Popup items grouping by using the Separator.
* [**Accessibility**](https://ej2.syncfusion.com/documentation/split-button/accessibility.html?lang=typescript#accessibility) - Provided with built-in accessibility support that helps to access all the SplitButton component features through the keyboard, screen readers, or other assistive technology devices.
### ButtonGroup
* [**Types, Sizes, and Styles**](https://ej2.syncfusion.com/documentation/button-group/types-and-styles.html?lang=typescript#buttongroup-types) - Provided with different types, sizes and predefined styles of button.
* [**Selection**](https://ej2.syncfusion.com/documentation/button-group/selection.html?lang=typescript#selection) - Supports single and multiple selection behaviors.
* [**Orientation**](https://ej2.syncfusion.com/documentation/button-group/getting-started.html?lang=typescript#orientation) - Supports horizontal and vertical orientations.
* [**Nesting**](https://ej2.syncfusion.com/documentation/button-group/selection.html?lang=typescript#nesting) - Supports nesting with drop-down and split button components.
* [**Accessibility**](https://ej2.syncfusion.com/documentation/button-group/accessibility.html?lang=typescript#accessibility) - Built-in accessibility features to access all the button group using the keyboard, screen readers, or other assistive technology devices.
## Support
Product support is available for through following mediums.
* Creating incident in Syncfusion [Direct-trac](https://www.syncfusion.com/support/directtrac/incidents?utm_source=npm&utm_campaign=splitbutton) support system or [Community forum](https://www.syncfusion.com/forums/essential-js2?utm_source=npm&utm_campaign=splitbutton).
* New [GitHub issue](https://github.com/syncfusion/ej2-splitbuttons/issues/new).
* Ask your query in [Stack Overflow](https://stackoverflow.com/?utm_source=npm&utm_campaign=splitbutton) with tag `syncfusion`, `ej2`.
## License
Check the license detail [here](https://github.com/syncfusion/ej2/blob/master/license?utm_source=npm&utm_campaign=splitbutton).
## Changelog
Check the changelog [here](https://github.com/syncfusion/ej2-splitbuttons/blob/master/CHANGELOG.md?utm_source=npm&utm_campaign=splitbutton)
© Copyright 2018 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.

12

split-button.js

@@ -1,8 +0,4 @@

define(["require", "exports", "./src/split-button/index"], function (require, exports, index_1) {
"use strict";
function __export(m) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
Object.defineProperty(exports, "__esModule", { value: true });
__export(index_1);
});
/**
* split-button
*/
export * from './src/split-button/index';

102

src/button-group/button-group.js

@@ -1,48 +0,68 @@

define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-buttons"], function (require, exports, ej2_base_1, ej2_buttons_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
function createButtonGroup(selector, options) {
if (options === void 0) { options = {}; }
var child;
var btnElem;
var nextChild;
var btnModel;
var wrapper = document.querySelector(selector);
ej2_base_1.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;
import { addClass, createElement } from '@syncfusion/ej2-base';
import { Button } from '@syncfusion/ej2-buttons';
/**
* 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
*/
export 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 {
btnElem = ej2_base_1.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++;
wrapper.appendChild(btnElem);
}
if (options.cssClass && btnModel && !btnModel.cssClass) {
btnModel.cssClass = options.cssClass;
if (child.id) {
btnElem.setAttribute('for', child.id);
}
new ej2_buttons_1.Button(btnModel || {}, btnElem);
if (btnModel && btnModel.disabled) {
child.disabled = true;
}
j++;
}
if (options.cssClass && btnModel && !btnModel.cssClass) {
btnModel.cssClass = options.cssClass;
}
new Button(btnModel || {}, btnElem);
}
return wrapper;
}
exports.createButtonGroup = createButtonGroup;
});
return wrapper;
}

12

src/button-group/index.js

@@ -1,8 +0,4 @@

define(["require", "exports", "./button-group"], function (require, exports, button_group_1) {
"use strict";
function __export(m) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
Object.defineProperty(exports, "__esModule", { value: true });
__export(button_group_1);
});
/**
* ButtonGroup modules
*/
export * from './button-group';

72

src/common/common.js

@@ -17,39 +17,39 @@ var __extends = (this && this.__extends) || (function () {

};
define(["require", "exports", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
function getModel(props, model) {
var obj = ej2_base_1.extend({}, props);
for (var _i = 0, _a = Object.keys(obj); _i < _a.length; _i++) {
var prop = _a[_i];
if ((model).indexOf(prop) < 0) {
ej2_base_1.deleteObject(obj, prop);
}
import { ChildProperty, extend, deleteObject, Property } from '@syncfusion/ej2-base';
/**
* @param props
* @param model
*/
export function getModel(props, model) {
var obj = extend({}, props);
for (var _i = 0, _a = Object.keys(obj); _i < _a.length; _i++) {
var prop = _a[_i];
if ((model).indexOf(prop) < 0) {
deleteObject(obj, prop);
}
return obj;
}
exports.getModel = getModel;
var Item = (function (_super) {
__extends(Item, _super);
function Item() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
ej2_base_1.Property('')
], Item.prototype, "iconCss", void 0);
__decorate([
ej2_base_1.Property('')
], Item.prototype, "id", void 0);
__decorate([
ej2_base_1.Property(false)
], Item.prototype, "separator", void 0);
__decorate([
ej2_base_1.Property('')
], Item.prototype, "text", void 0);
__decorate([
ej2_base_1.Property('')
], Item.prototype, "url", void 0);
return Item;
}(ej2_base_1.ChildProperty));
exports.Item = Item;
});
return obj;
}
var Item = /** @class */ (function (_super) {
__extends(Item, _super);
function Item() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('')
], Item.prototype, "iconCss", void 0);
__decorate([
Property('')
], Item.prototype, "id", void 0);
__decorate([
Property(false)
], Item.prototype, "separator", void 0);
__decorate([
Property('')
], Item.prototype, "text", void 0);
__decorate([
Property('')
], Item.prototype, "url", void 0);
return Item;
}(ChildProperty));
export { Item };

12

src/common/index.js

@@ -1,8 +0,4 @@

define(["require", "exports", "./common"], function (require, exports, common_1) {
"use strict";
function __export(m) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
Object.defineProperty(exports, "__esModule", { value: true });
__export(common_1);
});
/**
* Common modules
*/
export * from './common';

2

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

@@ -1,2 +0,2 @@

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 { 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';
import {ComponentModel} from '@syncfusion/ej2-base';

@@ -3,0 +3,0 @@

930

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

@@ -17,468 +17,518 @@ var __extends = (this && this.__extends) || (function () {

};
define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-buttons", "@syncfusion/ej2-popups", "./../common/common"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, ej2_base_4, ej2_buttons_1, ej2_popups_1, common_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var classNames = {
DISABLED: 'e-disabled',
FOCUS: 'e-focused',
ICON: 'e-menu-icon',
ITEM: 'e-item',
POPUP: 'e-dropdown-popup',
RTL: 'e-rtl',
SEPARATOR: 'e-separator',
VERTICAL: 'e-vertical'
import { Collection, Event, NotifyPropertyChanges, detach, Property, EventHandler } from '@syncfusion/ej2-base';
import { addClass, getUniqueID, rippleEffect } from '@syncfusion/ej2-base';
import { attributes, Component, closest, select } from '@syncfusion/ej2-base';
import { classList, removeClass } from '@syncfusion/ej2-base';
import { Button } from '@syncfusion/ej2-buttons';
import { Popup } from '@syncfusion/ej2-popups';
import { getModel, Item } from './../common/common';
var classNames = {
DISABLED: 'e-disabled',
FOCUS: 'e-focused',
ICON: 'e-menu-icon',
ITEM: 'e-item',
POPUP: 'e-dropdown-popup',
RTL: 'e-rtl',
SEPARATOR: 'e-separator',
VERTICAL: 'e-vertical'
};
/**
* DropDownButton component is used to toggle contextual overlays for displaying list of action items.
* It can contain both text and images.
* ``````html
* <button id="element">DropDownButton</button>
* ```
* ```typescript
* <script>
* var dropDownButtonObj = new DropDownButton({items: [{ text: 'Action1' }, { text: 'Action2' },{ text: 'Action3' }]);
* dropDownButtonObj.appendTo("#element");
* </script>
* ```
*/
var DropDownButton = /** @class */ (function (_super) {
__extends(DropDownButton, _super);
/**
* Constructor for creating the widget
* @param {DropDownButtonModel} options?
* @param {string|HTMLButtonElement} element?
*/
function DropDownButton(options, element) {
return _super.call(this, options, element) || this;
}
DropDownButton.prototype.preRender = function () {
/** */
};
var DropDownButton = (function (_super) {
__extends(DropDownButton, _super);
function DropDownButton(options, element) {
return _super.call(this, options, element) || this;
/**
* Get the properties to be maintained in the persisted state.
* @returns string
*/
DropDownButton.prototype.getPersistData = function () {
return this.addOnPersist([]);
};
/**
* To open/close DropDownButton popup based on current state of the DropDownButton.
* @returns void
*/
DropDownButton.prototype.toggle = function () {
this.canOpen() ? this.openPopUp() : this.closePopup();
};
/**
* Initialize the Component rendering
* @returns void
* @private
*/
DropDownButton.prototype.render = function () {
this.initialize();
if (!this.disabled) {
this.wireEvents();
}
DropDownButton.prototype.preRender = function () {
};
DropDownButton.prototype.getPersistData = function () {
return this.addOnPersist([]);
};
DropDownButton.prototype.toggle = function () {
this.canOpen() ? this.openPopUp() : this.closePopup();
};
DropDownButton.prototype.render = function () {
this.initialize();
if (!this.disabled) {
this.wireEvents();
}
};
DropDownButton.prototype.createPopup = function () {
var div = ej2_base_2.createElement('div', {
className: classNames.POPUP,
id: this.element.id + '-popup'
};
DropDownButton.prototype.createPopup = function () {
var div = this.createElement('div', {
className: classNames.POPUP,
id: this.element.id + '-popup'
});
document.body.appendChild(div);
this.dropDown = new Popup(div, {
relateTo: this.element,
collision: { X: 'fit', Y: 'flip' },
position: { X: 'left', Y: 'bottom' },
targetType: 'relative',
content: this.target ? this.getTargetElement() : '',
enableRtl: this.enableRtl
});
if (this.dropDown.element.style.position === 'fixed') {
this.dropDown.refreshPosition(this.element);
}
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['type'] = 'button',
_a));
if (this.cssClass) {
addClass([div], this.cssClass.split(' '));
}
var _a;
};
DropDownButton.prototype.getTargetElement = function () {
return typeof (this.target) === 'string' ? select(this.target) : this.target;
};
DropDownButton.prototype.createItems = function (items) {
var showIcon = this.hasIcon(items, 'iconCss');
var span;
var item;
var li;
var eventArgs;
var ul = this.createElement('ul', {
attrs: { 'tabindex': '0' }
});
for (var i = 0; i < items.length; i++) {
item = items[i];
li = this.createElement('li', {
innerHTML: item.url ? '' : item.text,
className: item.separator ? classNames.ITEM + ' ' + classNames.SEPARATOR : classNames.ITEM,
attrs: { 'role': 'menuItem', 'tabindex': '-1' },
id: item.id ? item.id : getUniqueID('e-' + this.getModuleName() + '-item')
});
document.body.appendChild(div);
this.dropDown = new ej2_popups_1.Popup(div, {
relateTo: this.element,
collision: { X: 'fit', Y: 'flip' },
position: { X: 'left', Y: 'bottom' },
targetType: 'relative',
content: this.target ? this.getTargetElement() : '',
zIndex: ej2_popups_1.getZindexPartial(div),
enableRtl: this.enableRtl
});
if (this.dropDown.element.style.position === 'fixed') {
this.dropDown.refreshPosition(this.element);
if (item.iconCss) {
span = this.createElement('span', { className: classNames.ICON + ' ' + item.iconCss });
li.insertBefore(span, li.childNodes[0]);
}
this.dropDown.hide();
ej2_base_3.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) {
ej2_base_2.addClass([div], this.cssClass.split(' '));
}
var _a;
};
DropDownButton.prototype.getTargetElement = function () {
return typeof (this.target) === 'string' ? ej2_base_3.select(this.target) : this.target;
};
DropDownButton.prototype.createItems = function (items) {
var showIcon = this.hasIcon(items, 'iconCss');
var span;
var item;
var li;
var eventArgs;
var ul = ej2_base_2.createElement('ul', {
attrs: { 'tabindex': '0' }
});
for (var i = 0; i < items.length; i++) {
item = items[i];
li = ej2_base_2.createElement('li', {
innerHTML: item.url ? '' : item.text,
className: item.separator ? classNames.ITEM + ' ' + classNames.SEPARATOR : classNames.ITEM,
attrs: { 'role': 'menuItem', 'tabindex': '-1' },
id: item.id ? item.id : ej2_base_2.getUniqueID('e-' + this.getModuleName() + '-item')
});
if (item.iconCss) {
span = ej2_base_2.createElement('span', { className: classNames.ICON + ' ' + item.iconCss });
li.insertBefore(span, li.childNodes[0]);
else {
if (showIcon && !item.separator) {
li.classList.add('e-blank-icon');
}
else {
if (showIcon && !item.separator) {
li.classList.add('e-blank-icon');
}
}
if (item.url) {
li.appendChild(this.createAnchor(item));
}
eventArgs = { item: item, element: li };
this.trigger('beforeItemRender', eventArgs);
ul.appendChild(li);
}
return ul;
};
DropDownButton.prototype.hasIcon = function (items, field) {
for (var i = 0, len = items.length; i < len; i++) {
if (items[i][field]) {
return true;
}
if (item.url) {
li.appendChild(this.createAnchor(item));
}
return false;
};
DropDownButton.prototype.createAnchor = function (item) {
return ej2_base_2.createElement('a', { className: 'e-menu-text e-menu-url', innerHTML: item.text, attrs: { 'href': item.url } });
};
DropDownButton.prototype.initialize = function () {
this.button = new ej2_buttons_1.Button({
iconCss: this.iconCss, cssClass: this.cssClass, content: this.content,
disabled: this.disabled, enableRtl: this.enableRtl, enablePersistence: this.enablePersistence
});
this.button.appendTo(this.element);
if (!this.element.id) {
this.element.id = ej2_base_2.getUniqueID('e-' + this.getModuleName());
eventArgs = { item: item, element: li };
this.trigger('beforeItemRender', eventArgs);
ul.appendChild(li);
}
return ul;
};
DropDownButton.prototype.hasIcon = function (items, field) {
for (var i = 0, len = items.length; i < len; i++) {
if (items[i][field]) {
return true;
}
this.setIconPositionTop();
this.appendArrowSpan();
this.createPopup();
this.setActiveElem([this.element]);
};
DropDownButton.prototype.setIconPositionTop = function () {
var iconSpan = this.element.querySelector('.e-icon-left');
if (iconSpan && this.iconPosition === 'Top') {
ej2_base_2.addClass([this.element], 'e-top-icon-btn');
ej2_base_4.removeClass([iconSpan], 'e-icon-left');
ej2_base_2.addClass([iconSpan], 'e-icon-top');
}
};
DropDownButton.prototype.appendArrowSpan = function () {
this.element.appendChild(ej2_base_2.createElement('span', {
className: 'e-btn-icon e-icons ' + 'e-icon-' + (this.cssClass.indexOf(classNames.VERTICAL) > -1
? 'bottom' : 'right') + ' e-caret'
}));
};
DropDownButton.prototype.setActiveElem = function (elem) {
this.activeElem = elem;
};
DropDownButton.prototype.getModuleName = function () {
return 'dropdown-btn';
};
DropDownButton.prototype.canOpen = function () {
return this.getPopUpElement().classList.contains('e-popup-close');
};
DropDownButton.prototype.destroy = function () {
var _this = this;
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', 'type'].forEach(function (key) {
_this.element.removeAttribute(key);
});
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();
}
};
DropDownButton.prototype.getPopUpElement = function () {
return this.dropDown.element;
};
DropDownButton.prototype.getULElement = function () {
return this.getPopUpElement().children[0];
};
DropDownButton.prototype.wireEvents = function () {
var popupElement = this.getPopUpElement();
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);
ej2_base_1.EventHandler.add(popupElement, 'keydown', this.keyBoardHandler, this);
this.rippleFn = ej2_base_2.rippleEffect(popupElement, { selector: '.' + classNames.ITEM });
};
DropDownButton.prototype.keyBoardHandler = function (e) {
if (e.target === this.element && (e.keyCode === 9 || (!e.altKey && e.keyCode === 40) || e.keyCode === 38)) {
return;
}
switch (e.keyCode) {
case 38:
case 40:
if (e.altKey && (e.keyCode === 38 || e.keyCode === 40)) {
this.keyEventHandler(e);
}
else {
this.upDownKeyHandler(e);
}
break;
case 9:
case 13:
case 27:
case 32:
}
return false;
};
DropDownButton.prototype.createAnchor = function (item) {
return this.createElement('a', { className: 'e-menu-text e-menu-url', innerHTML: item.text, attrs: { 'href': item.url } });
};
DropDownButton.prototype.initialize = function () {
this.button = new Button({
iconCss: this.iconCss, cssClass: this.cssClass, content: this.content,
disabled: this.disabled, enableRtl: this.enableRtl, enablePersistence: this.enablePersistence
});
this.button.appendTo(this.element);
if (!this.element.id) {
this.element.id = getUniqueID('e-' + this.getModuleName());
}
this.setIconPositionTop();
this.appendArrowSpan();
this.createPopup();
this.setActiveElem([this.element]);
};
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 () {
this.element.appendChild(this.createElement('span', {
className: 'e-btn-icon e-icons ' + 'e-icon-' + (this.cssClass.indexOf(classNames.VERTICAL) > -1
? 'bottom' : 'right') + ' e-caret'
}));
};
DropDownButton.prototype.setActiveElem = function (elem) {
this.activeElem = elem;
};
/**
* Get component name.
* @returns string
* @private
*/
DropDownButton.prototype.getModuleName = function () {
return 'dropdown-btn';
};
DropDownButton.prototype.canOpen = function () {
return this.getPopUpElement().classList.contains('e-popup-close');
};
/**
* Destroys the widget.
* @returns void
*/
DropDownButton.prototype.destroy = function () {
var _this = this;
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', 'type'].forEach(function (key) {
_this.element.removeAttribute(key);
});
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();
}
};
DropDownButton.prototype.getPopUpElement = function () {
return this.dropDown.element;
};
DropDownButton.prototype.getULElement = function () {
return this.getPopUpElement().children[0];
};
DropDownButton.prototype.wireEvents = function () {
var popupElement = this.getPopUpElement();
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);
EventHandler.add(popupElement, 'keydown', this.keyBoardHandler, this);
this.rippleFn = rippleEffect(popupElement, { selector: '.' + classNames.ITEM });
};
DropDownButton.prototype.keyBoardHandler = function (e) {
if (e.target === this.element && (e.keyCode === 9 || (!e.altKey && e.keyCode === 40) || e.keyCode === 38)) {
return;
}
switch (e.keyCode) {
case 38:
case 40:
if (e.altKey && (e.keyCode === 38 || e.keyCode === 40)) {
this.keyEventHandler(e);
break;
}
};
DropDownButton.prototype.upDownKeyHandler = function (e) {
if (this.target && (e.keyCode === 38 || e.keyCode === 40)) {
return;
}
e.preventDefault();
var ul = this.getULElement();
var defaultIdx = e.keyCode === 40 ? 0 : ul.childElementCount - 1;
var liIdx = defaultIdx;
var li = null;
this.removeCustomSelection();
for (var i = 0, len = ul.children.length; i < len; i++) {
if (ul.children[i].classList.contains(classNames.FOCUS)) {
li = ul.children[i];
liIdx = i;
li.classList.remove(classNames.FOCUS);
e.keyCode === 40 ? liIdx++ : liIdx--;
if (liIdx === (e.keyCode === 40 ? ul.childElementCount : -1)) {
liIdx = defaultIdx;
}
}
}
li = ul.children[liIdx];
liIdx = this.isValidLI(li, liIdx, e.keyCode);
if (liIdx !== -1) {
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) {
if (count === void 0) { count = 0; }
if (li.classList.contains(classNames.SEPARATOR) || li.classList.contains(classNames.DISABLED)) {
if (index === (keyCode === 40 ? this.items.length - 1 : 0)) {
index = keyCode === 40 ? 0 : this.items.length - 1;
}
else {
keyCode === 40 ? index++ : index--;
this.upDownKeyHandler(e);
}
}
li = this.getULElement().children[index];
if (li.classList.contains(classNames.SEPARATOR) || li.classList.contains(classNames.DISABLED)) {
count++;
if (count === this.items.length) {
return index = -1;
break;
case 9:
case 13:
case 27:
case 32:
this.keyEventHandler(e);
break;
}
};
DropDownButton.prototype.upDownKeyHandler = function (e) {
if (this.target && (e.keyCode === 38 || e.keyCode === 40)) {
return;
}
e.preventDefault();
var ul = this.getULElement();
var defaultIdx = e.keyCode === 40 ? 0 : ul.childElementCount - 1;
var liIdx = defaultIdx;
var li = null;
this.removeCustomSelection();
for (var i = 0, len = ul.children.length; i < len; i++) {
if (ul.children[i].classList.contains(classNames.FOCUS)) {
li = ul.children[i];
liIdx = i;
li.classList.remove(classNames.FOCUS);
e.keyCode === 40 ? liIdx++ : liIdx--;
if (liIdx === (e.keyCode === 40 ? ul.childElementCount : -1)) {
liIdx = defaultIdx;
}
index = this.isValidLI(li, index, keyCode, count);
}
return index;
};
DropDownButton.prototype.keyEventHandler = function (e) {
if (this.target && (e.keyCode === 13 || e.keyCode === 9)) {
return;
}
li = ul.children[liIdx];
liIdx = this.isValidLI(li, liIdx, e.keyCode);
if (liIdx !== -1) {
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) {
if (count === void 0) { count = 0; }
if (li.classList.contains(classNames.SEPARATOR) || li.classList.contains(classNames.DISABLED)) {
if (index === (keyCode === 40 ? this.items.length - 1 : 0)) {
index = keyCode === 40 ? 0 : this.items.length - 1;
}
if (e.keyCode !== 9) {
e.preventDefault();
else {
keyCode === 40 ? index++ : index--;
}
if (e.keyCode === 27 || e.keyCode === 38 || e.keyCode === 9) {
if (!this.canOpen()) {
this.closePopup(e, this.element);
}
}
li = this.getULElement().children[index];
if (li.classList.contains(classNames.SEPARATOR) || li.classList.contains(classNames.DISABLED)) {
count++;
if (count === this.items.length) {
return index = -1;
}
else {
this.clickHandler(e);
index = this.isValidLI(li, index, keyCode, count);
}
return index;
};
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);
}
};
DropDownButton.prototype.getLI = function (elem) {
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);
}
else {
this.clickHandler(e);
}
};
DropDownButton.prototype.getLI = function (elem) {
return elem.tagName === 'LI' ? elem : closest(elem, 'li');
};
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) {
var trgt = e.target;
var canOpen = this.canOpen();
if (closest(trgt, '#' + this.element.id)) {
if (canOpen) {
this.openPopUp(e);
}
};
DropDownButton.prototype.clickHandler = function (e) {
var trgt = e.target;
var canOpen = this.canOpen();
if (ej2_base_3.closest(trgt, '#' + this.element.id)) {
if (canOpen) {
this.openPopUp(e);
}
else {
this.closePopup(e, this.activeElem[0]);
}
else {
this.closePopup(e, this.activeElem[0]);
}
else {
if (ej2_base_3.closest(trgt, '#' + this.getPopUpElement().id)) {
var eventArgs = void 0;
var liIdx = void 0;
var item = void 0;
var li = this.getLI(trgt);
if (li) {
liIdx = Array.prototype.indexOf.call(this.getULElement().children, li);
item = this.items[liIdx];
if (item) {
eventArgs = { element: li, item: item };
this.trigger('select', eventArgs);
}
this.closePopup(e, this.activeElem[0]);
}
else {
if (closest(trgt, '#' + this.getPopUpElement().id)) {
var eventArgs = void 0;
var liIdx = void 0;
var item = void 0;
var li = this.getLI(trgt);
if (li) {
liIdx = Array.prototype.indexOf.call(this.getULElement().children, li);
item = this.items[liIdx];
if (item) {
eventArgs = { element: li, item: item };
this.trigger('select', eventArgs);
}
this.closePopup(e, this.activeElem[0]);
}
}
};
DropDownButton.prototype.openPopUp = function (e) {
if (e === void 0) { e = null; }
if (!this.target) {
this.getPopUpElement().appendChild(this.createItems(this.items));
}
};
DropDownButton.prototype.openPopUp = function (e) {
if (e === void 0) { e = null; }
if (!this.target) {
this.getPopUpElement().appendChild(this.createItems(this.items));
}
var ul = this.getULElement();
var beforeOpenArgs = { element: ul, items: this.items, event: e, cancel: false };
this.trigger('beforeOpen', beforeOpenArgs);
if (!beforeOpenArgs.cancel) {
this.dropDown.show(null, this.dropDown.element);
addClass([this.element], 'e-active');
this.element.setAttribute('aria-expanded', 'true');
ul.focus();
var openArgs = { element: ul, items: this.items };
this.trigger('open', openArgs);
}
};
DropDownButton.prototype.closePopup = function (e, focusEle) {
if (e === void 0) { e = null; }
var ul = this.getULElement();
var beforeCloseArgs = { element: ul, items: this.items, event: e, cancel: false };
this.trigger('beforeClose', beforeCloseArgs);
if (!beforeCloseArgs.cancel) {
this.removeCustomSelection();
this.dropDown.hide();
removeClass(this.activeElem, 'e-active');
this.element.setAttribute('aria-expanded', 'false');
if (focusEle) {
focusEle.focus();
}
var ul = this.getULElement();
var beforeOpenArgs = { element: ul, items: this.items, event: e, cancel: false };
this.trigger('beforeOpen', beforeOpenArgs);
if (!beforeOpenArgs.cancel) {
this.dropDown.show();
ej2_base_2.addClass([this.element], 'e-active');
this.element.setAttribute('aria-expanded', 'true');
ul.focus();
var openArgs = { element: ul, items: this.items };
this.trigger('open', openArgs);
var closeArgs = { element: ul, items: this.items };
this.trigger('close', closeArgs);
if (!this.target && ul) {
detach(ul);
}
};
DropDownButton.prototype.closePopup = function (e, focusEle) {
if (e === void 0) { e = null; }
var ul = this.getULElement();
var beforeCloseArgs = { element: ul, items: this.items, event: e, cancel: false };
this.trigger('beforeClose', beforeCloseArgs);
if (!beforeCloseArgs.cancel) {
this.removeCustomSelection();
this.dropDown.hide();
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 && ul) {
ej2_base_1.detach(ul);
}
}
};
DropDownButton.prototype.unWireEvents = function () {
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();
};
DropDownButton.prototype.onPropertyChanged = function (newProp, oldProp) {
var btnModel = ['content', 'cssClass', 'iconCss', 'disabled', 'enableRtl'];
if (newProp.iconPosition === 'Left') {
btnModel.push('iconPosition');
}
this.button.setProperties(common_1.getModel(newProp, btnModel));
var popupElement = this.getPopUpElement();
for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
var prop = _a[_i];
switch (prop) {
case 'content':
if (!this.element.querySelector('span.e-caret')) {
this.appendArrowSpan();
}
};
DropDownButton.prototype.unWireEvents = function () {
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();
};
/**
* Called internally if any of the property value changed.
* @param {DropDownButtonModel} newProp
* @param {DropDownButtonModel} oldProp
* @returns void
* @private
*/
DropDownButton.prototype.onPropertyChanged = function (newProp, oldProp) {
var btnModel = ['content', 'cssClass', 'iconCss', 'disabled', 'enableRtl'];
if (newProp.iconPosition === 'Left') {
btnModel.push('iconPosition');
}
this.button.setProperties(getModel(newProp, btnModel));
var popupElement = this.getPopUpElement();
for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
var prop = _a[_i];
switch (prop) {
case 'content':
if (!this.element.querySelector('span.e-caret')) {
this.appendArrowSpan();
}
break;
case 'disabled':
if (newProp.disabled) {
this.unWireEvents();
if (!this.canOpen()) {
this.closePopup();
}
break;
case 'disabled':
if (newProp.disabled) {
this.unWireEvents();
if (!this.canOpen()) {
this.closePopup();
}
}
else {
this.wireEvents();
}
break;
case 'cssClass':
if (newProp.cssClass.indexOf(classNames.VERTICAL) > -1) {
var arrowSpan = this.element.querySelector('span.e-caret');
ej2_base_4.classList(arrowSpan, ['e-icon-bottom'], ['e-icon-right']);
}
if (oldProp.cssClass) {
ej2_base_4.removeClass([popupElement], oldProp.cssClass.split(' '));
}
if (newProp.cssClass) {
ej2_base_2.addClass([popupElement], newProp.cssClass.split(' '));
}
break;
case 'iconPosition':
this.setIconPositionTop();
break;
case 'enableRtl':
popupElement.classList.toggle(classNames.RTL);
break;
case 'target':
this.target = newProp.target;
ej2_base_1.detach(this.getULElement());
popupElement.appendChild(this.getTargetElement());
this.dropDown.content = this.getTargetElement();
break;
case 'items':
this.dropDown.refresh();
if (popupElement.classList.contains('e-popup-open')) {
ej2_base_4.classList(popupElement, ['e-popup-close'], ['e-popup-open']);
}
break;
}
}
else {
this.wireEvents();
}
break;
case 'cssClass':
if (newProp.cssClass.indexOf(classNames.VERTICAL) > -1) {
var arrowSpan = this.element.querySelector('span.e-caret');
classList(arrowSpan, ['e-icon-bottom'], ['e-icon-right']);
}
if (oldProp.cssClass) {
removeClass([popupElement], oldProp.cssClass.split(' '));
}
if (newProp.cssClass) {
addClass([popupElement], newProp.cssClass.split(' '));
}
break;
case 'iconPosition':
this.setIconPositionTop();
break;
case 'enableRtl':
popupElement.classList.toggle(classNames.RTL);
break;
case 'target':
this.target = newProp.target;
detach(this.getULElement());
popupElement.appendChild(this.getTargetElement());
this.dropDown.content = this.getTargetElement();
break;
case 'items':
this.dropDown.refresh();
if (popupElement.classList.contains('e-popup-open')) {
classList(popupElement, ['e-popup-close'], ['e-popup-open']);
}
break;
}
};
__decorate([
ej2_base_1.Property('')
], DropDownButton.prototype, "content", void 0);
__decorate([
ej2_base_1.Property('')
], DropDownButton.prototype, "cssClass", void 0);
__decorate([
ej2_base_1.Property(false)
], DropDownButton.prototype, "disabled", void 0);
__decorate([
ej2_base_1.Property('')
], DropDownButton.prototype, "iconCss", void 0);
__decorate([
ej2_base_1.Property('Left')
], DropDownButton.prototype, "iconPosition", void 0);
__decorate([
ej2_base_1.Collection([], common_1.Item)
], DropDownButton.prototype, "items", void 0);
__decorate([
ej2_base_1.Property('')
], DropDownButton.prototype, "target", void 0);
__decorate([
ej2_base_1.Event()
], DropDownButton.prototype, "beforeItemRender", void 0);
__decorate([
ej2_base_1.Event()
], DropDownButton.prototype, "beforeOpen", void 0);
__decorate([
ej2_base_1.Event()
], DropDownButton.prototype, "beforeClose", void 0);
__decorate([
ej2_base_1.Event()
], DropDownButton.prototype, "close", void 0);
__decorate([
ej2_base_1.Event()
], DropDownButton.prototype, "open", void 0);
__decorate([
ej2_base_1.Event()
], DropDownButton.prototype, "select", void 0);
DropDownButton = __decorate([
ej2_base_1.NotifyPropertyChanges
], DropDownButton);
return DropDownButton;
}(ej2_base_3.Component));
exports.DropDownButton = DropDownButton;
});
}
};
__decorate([
Property('')
], DropDownButton.prototype, "content", void 0);
__decorate([
Property('')
], DropDownButton.prototype, "cssClass", void 0);
__decorate([
Property(false)
], DropDownButton.prototype, "disabled", void 0);
__decorate([
Property('')
], DropDownButton.prototype, "iconCss", void 0);
__decorate([
Property('Left')
], DropDownButton.prototype, "iconPosition", void 0);
__decorate([
Collection([], Item)
], DropDownButton.prototype, "items", void 0);
__decorate([
Property('')
], DropDownButton.prototype, "target", void 0);
__decorate([
Event()
], DropDownButton.prototype, "beforeItemRender", void 0);
__decorate([
Event()
], DropDownButton.prototype, "beforeOpen", void 0);
__decorate([
Event()
], DropDownButton.prototype, "beforeClose", void 0);
__decorate([
Event()
], DropDownButton.prototype, "close", void 0);
__decorate([
Event()
], DropDownButton.prototype, "open", void 0);
__decorate([
Event()
], DropDownButton.prototype, "select", void 0);
DropDownButton = __decorate([
NotifyPropertyChanges
], DropDownButton);
return DropDownButton;
}(Component));
export { DropDownButton };

12

src/drop-down-button/index.js

@@ -1,8 +0,4 @@

define(["require", "exports", "./drop-down-button"], function (require, exports, drop_down_button_1) {
"use strict";
function __export(m) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
Object.defineProperty(exports, "__esModule", { value: true });
__export(drop_down_button_1);
});
/**
* DropDownButton modules
*/
export * from './drop-down-button';

18

src/index.js

@@ -1,11 +0,7 @@

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";
function __export(m) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
Object.defineProperty(exports, "__esModule", { value: true });
__export(index_1);
__export(index_2);
__export(index_3);
__export(index_4);
});
/**
* SplitButton all module
*/
export * from './common/index';
export * from './drop-down-button/index';
export * from './split-button/index';
export * from './button-group/index';

12

src/split-button/index.js

@@ -1,8 +0,4 @@

define(["require", "exports", "./split-button"], function (require, exports, split_button_1) {
"use strict";
function __export(m) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
Object.defineProperty(exports, "__esModule", { value: true });
__export(split_button_1);
});
/**
* Split Button modules
*/
export * from './split-button';

2

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

@@ -1,2 +0,2 @@

import { Event, EmitType, createElement, 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';
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';
import {ClickEventArgs} from "./split-button";

@@ -3,0 +3,0 @@ import {DropDownButtonModel} from "../drop-down-button/drop-down-button-model";

515

src/split-button/split-button.js

@@ -17,246 +17,287 @@ var __extends = (this && this.__extends) || (function () {

};
define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-buttons", "./../common/common", "../drop-down-button/drop-down-button"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, ej2_buttons_1, common_1, drop_down_button_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var RTL = 'e-rtl';
var TAGNAME = 'EJS-SPLITBUTTON';
var SplitButton = (function (_super) {
__extends(SplitButton, _super);
function SplitButton(options, element) {
return _super.call(this, options, element) || this;
/// <reference path='../drop-down-button/drop-down-button-model.d.ts'/>
import { Event, remove, addClass, removeClass, detach, getValue, setValue } from '@syncfusion/ej2-base';
import { EventHandler, Collection, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';
import { attributes, getUniqueID, getInstance, KeyboardEvents } from '@syncfusion/ej2-base';
import { Button } from '@syncfusion/ej2-buttons';
import { getModel, Item } from './../common/common';
import { DropDownButton } from '../drop-down-button/drop-down-button';
var RTL = 'e-rtl';
var TAGNAME = 'EJS-SPLITBUTTON';
/**
* SplitButton component has primary and secondary button. Primary button is used to select
* default action and secondary button is used to toggle contextual overlays for displaying list of
* action items. It can contain both text and images.
* ```html
* <button id="element"></button>
* ```
* ```typescript
* <script>
* var splitBtnObj = new SplitButton({content: 'SplitButton'});
* splitBtnObj.appendTo("#element");
* </script>
* ```
*/
var SplitButton = /** @class */ (function (_super) {
__extends(SplitButton, _super);
/**
* Constructor for creating the widget
* @param {SplitButtonModel} options?
* @param {string|HTMLButtonElement} element?
*/
function SplitButton(options, element) {
return _super.call(this, options, element) || this;
}
/**
* Initialize Angular support.
* @private
*/
SplitButton.prototype.preRender = function () {
var ele = this.element;
if (ele.tagName === TAGNAME) {
var ejInstance = getValue('ej2_instances', ele);
var btn = this.createElement('button', { attrs: { 'type': 'button' } });
var wrapper = this.createElement(TAGNAME, { className: 'e-' + this.getModuleName() + '-wrapper' });
for (var idx = 0, len = ele.attributes.length; idx < len; idx++) {
btn.setAttribute(ele.attributes[idx].nodeName, ele.attributes[idx].nodeValue);
}
ele.parentNode.insertBefore(wrapper, ele);
detach(ele);
ele = btn;
wrapper.appendChild(ele);
setValue('ej2_instances', ejInstance, ele);
this.wrapper = wrapper;
this.element = ele;
}
SplitButton.prototype.preRender = function () {
var ele = this.element;
if (ele.tagName === TAGNAME) {
var ejInstance = ej2_base_1.getValue('ej2_instances', ele);
var btn = ej2_base_1.createElement('button', { attrs: { 'type': 'button' } });
var wrapper = ej2_base_1.createElement(TAGNAME, { className: 'e-' + this.getModuleName() + '-wrapper' });
for (var idx = 0, len = ele.attributes.length; idx < len; idx++) {
btn.setAttribute(ele.attributes[idx].nodeName, ele.attributes[idx].nodeValue);
}
ele.parentNode.insertBefore(wrapper, ele);
ej2_base_1.detach(ele);
ele = btn;
wrapper.appendChild(ele);
ej2_base_1.setValue('ej2_instances', ejInstance, ele);
this.wrapper = wrapper;
this.element = ele;
if (!this.element.id) {
this.element.id = getUniqueID('e-' + this.getModuleName());
}
};
SplitButton.prototype.render = function () {
this.initWrapper();
this.createPrimaryButton();
this.createSecondaryButton();
this.setActiveElem([this.element, this.secondaryBtnObj.element]);
this.setAria();
this.wireEvents();
};
SplitButton.prototype.initWrapper = function () {
if (!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());
if (this.enableRtl) {
this.wrapper.classList.add(RTL);
}
if (this.cssClass) {
addClass([this.wrapper], this.cssClass.split(' '));
}
};
SplitButton.prototype.createPrimaryButton = function () {
var btnModel = {
cssClass: this.cssClass,
enableRtl: this.enableRtl,
iconCss: this.iconCss,
content: this.content,
disabled: this.disabled
};
this.primaryBtnObj = new Button(btnModel, this.element);
this.element.classList.add('e-' + this.getModuleName());
this.element.type = 'button';
this.wrapper.appendChild(this.element);
this.setIconPositionTop();
};
SplitButton.prototype.createSecondaryButton = function () {
var _this = this;
var btnElem = this.createElement('button', {
className: 'e-icon-btn',
attrs: { 'tabindex': '-1' },
id: this.element.id + '_dropdownbtn'
});
this.wrapper.appendChild(btnElem);
var dropDownBtnModel = {
cssClass: this.cssClass,
disabled: this.disabled,
enableRtl: this.enableRtl,
items: this.items,
target: this.target,
beforeItemRender: function (args) {
_this.trigger('beforeItemRender', args);
},
beforeOpen: function (args) {
_this.trigger('beforeOpen', args);
},
beforeClose: function (args) {
_this.trigger('beforeClose', args);
},
open: function (args) {
_this.trigger('open', args);
},
close: function (args) {
_this.trigger('close', args);
},
select: function (args) {
_this.trigger('select', args);
}
if (!this.element.id) {
this.element.id = ej2_base_3.getUniqueID('e-' + this.getModuleName());
}
};
SplitButton.prototype.render = function () {
this.initWrapper();
this.createPrimaryButton();
this.createSecondaryButton();
this.setActiveElem([this.element, this.secondaryBtnObj.element]);
this.setAria();
this.wireEvents();
};
SplitButton.prototype.initWrapper = function () {
if (!this.wrapper) {
this.wrapper = ej2_base_1.createElement('div', { className: 'e-' + this.getModuleName() + '-wrapper' });
this.element.parentNode.insertBefore(this.wrapper, this.element);
this.secondaryBtnObj = new DropDownButton(dropDownBtnModel, btnElem);
this.secondaryBtnObj.dropDown.relateTo = this.wrapper;
this.dropDown = this.secondaryBtnObj.dropDown;
this.secondaryBtnObj.activeElem = [this.element, this.secondaryBtnObj.element];
EventHandler.remove(this.getPopUpElement(), 'keydown', this.secondaryBtnObj.keyBoardHandler);
this.secondaryBtnObj.element.querySelector('.e-btn-icon').classList.remove('e-icon-right');
};
SplitButton.prototype.setAria = function () {
attributes(this.element, {
'role': 'listbox', 'aria-expanded': 'false', 'aria-haspopup': 'true',
'aria-label': this.element.textContent + ' splitbutton', 'aria-owns': this.secondaryBtnObj.dropDown.element.id
});
};
/**
* Get component name.
* @returns string
* @private
*/
SplitButton.prototype.getModuleName = function () {
return 'split-btn';
};
/**
* To open/close SplitButton popup based on current state of the SplitButton.
* @returns void
*/
SplitButton.prototype.toggle = function () {
this.secondaryBtnObj.toggle();
};
SplitButton.prototype.destroy = function () {
var _this = this;
this.primaryBtnObj.destroy();
this.secondaryBtnObj.destroy();
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(' '));
}
this.element.classList.remove('e-' + this.getModuleName());
if (this.enableRtl) {
this.wrapper.classList.add(RTL);
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);
}
if (this.cssClass) {
ej2_base_1.addClass([this.wrapper], this.cssClass.split(' '));
this.unWireEvents();
}
};
SplitButton.prototype.wireEvents = function () {
EventHandler.add(this.element, 'click', this.primaryBtnClickHandler, this);
EventHandler.add(this.getPopUpElement(), 'keydown', this.keyBoardHandler, this);
new KeyboardEvents(this.element, {
keyAction: this.btnKeyBoardHandler.bind(this),
keyConfigs: {
altdownarrow: 'alt+downarrow'
}
};
SplitButton.prototype.createPrimaryButton = function () {
var btnModel = {
cssClass: this.cssClass,
enableRtl: this.enableRtl,
iconCss: this.iconCss,
content: this.content,
disabled: this.disabled
};
this.primaryBtnObj = new ej2_buttons_1.Button(btnModel, this.element);
this.element.classList.add('e-' + this.getModuleName());
this.element.type = 'button';
this.wrapper.appendChild(this.element);
this.setIconPositionTop();
};
SplitButton.prototype.createSecondaryButton = function () {
var _this = this;
var btnElem = ej2_base_1.createElement('button', {
className: 'e-icon-btn',
attrs: { 'tabindex': '-1' },
id: this.element.id + '_dropdownbtn'
});
this.wrapper.appendChild(btnElem);
var dropDownBtnModel = {
cssClass: this.cssClass,
disabled: this.disabled,
enableRtl: this.enableRtl,
items: this.items,
target: this.target,
beforeItemRender: function (args) {
_this.trigger('beforeItemRender', args);
},
beforeOpen: function (args) {
_this.trigger('beforeOpen', args);
},
beforeClose: function (args) {
_this.trigger('beforeClose', args);
},
open: function (args) {
_this.trigger('open', args);
},
close: function (args) {
_this.trigger('close', args);
},
select: function (args) {
_this.trigger('select', args);
}
};
this.secondaryBtnObj = new drop_down_button_1.DropDownButton(dropDownBtnModel, btnElem);
this.secondaryBtnObj.dropDown.relateTo = this.wrapper;
this.dropDown = this.secondaryBtnObj.dropDown;
this.secondaryBtnObj.activeElem = [this.element, this.secondaryBtnObj.element];
ej2_base_2.EventHandler.remove(this.getPopUpElement(), 'keydown', this.secondaryBtnObj.keyBoardHandler);
this.secondaryBtnObj.element.querySelector('.e-btn-icon').classList.remove('e-icon-right');
};
SplitButton.prototype.setAria = function () {
ej2_base_3.attributes(this.element, {
'role': 'listbox', 'aria-expanded': 'false', 'aria-haspopup': 'true',
'aria-label': this.element.textContent + ' splitbutton', 'aria-owns': this.secondaryBtnObj.dropDown.element.id
});
};
SplitButton.prototype.getModuleName = function () {
return 'split-btn';
};
SplitButton.prototype.toggle = function () {
this.secondaryBtnObj.toggle();
};
SplitButton.prototype.destroy = function () {
var _this = this;
this.primaryBtnObj.destroy();
this.secondaryBtnObj.destroy();
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();
}
};
SplitButton.prototype.wireEvents = function () {
ej2_base_2.EventHandler.add(this.element, 'click', this.primaryBtnClickHandler, this);
ej2_base_2.EventHandler.add(this.getPopUpElement(), 'keydown', this.keyBoardHandler, this);
new ej2_base_3.KeyboardEvents(this.element, {
keyAction: this.btnKeyBoardHandler.bind(this),
keyConfigs: {
altdownarrow: 'alt+downarrow'
}
});
};
SplitButton.prototype.unWireEvents = function () {
ej2_base_2.EventHandler.remove(this.element, 'click', this.primaryBtnClickHandler);
ej2_base_3.getInstance(this.element, ej2_base_3.KeyboardEvents).destroy();
};
SplitButton.prototype.primaryBtnClickHandler = function () {
this.trigger('click', { element: this.element });
};
SplitButton.prototype.btnKeyBoardHandler = function (e) {
switch (e.action) {
case 'altdownarrow':
this.clickHandler(e);
});
};
SplitButton.prototype.unWireEvents = function () {
EventHandler.remove(this.element, 'click', this.primaryBtnClickHandler);
getInstance(this.element, KeyboardEvents).destroy();
};
SplitButton.prototype.primaryBtnClickHandler = function () {
this.trigger('click', { element: this.element });
};
SplitButton.prototype.btnKeyBoardHandler = function (e) {
switch (e.action) {
case 'altdownarrow':
this.clickHandler(e);
break;
}
};
/**
* Called internally if any of the property value changed.
* @param {SplitButtonModel} newProp
* @param {SplitButtonModel} oldProp
* @returns void
*/
SplitButton.prototype.onPropertyChanged = function (newProp, oldProp) {
var model = ['content', 'iconCss', 'cssClass', 'disabled', 'enableRtl'];
if (newProp.iconPosition === 'Left') {
model.push('iconPosition');
}
this.primaryBtnObj.setProperties(getModel(newProp, model));
model = ['items', 'beforeOpen', 'beforeItemRender', 'select', 'open',
'close', 'cssClass', 'disabled', 'enableRtl'];
this.secondaryBtnObj.setProperties(getModel(newProp, model));
for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
var prop = _a[_i];
switch (prop) {
case 'cssClass':
if (oldProp.cssClass) {
removeClass([this.wrapper], oldProp.cssClass.split(' '));
}
addClass([this.wrapper], newProp.cssClass.split(' '));
break;
case 'iconPosition':
this.setIconPositionTop();
break;
case 'enableRtl':
if (newProp.enableRtl) {
addClass([this.wrapper], RTL);
}
else {
removeClass([this.wrapper], RTL);
}
break;
}
};
SplitButton.prototype.onPropertyChanged = function (newProp, oldProp) {
var model = ['content', 'iconCss', 'cssClass', 'disabled', 'enableRtl'];
if (newProp.iconPosition === 'Left') {
model.push('iconPosition');
}
this.primaryBtnObj.setProperties(common_1.getModel(newProp, model));
model = ['items', 'beforeOpen', 'beforeItemRender', 'select', 'open',
'close', 'cssClass', 'disabled', 'enableRtl'];
this.secondaryBtnObj.setProperties(common_1.getModel(newProp, model));
for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
var prop = _a[_i];
switch (prop) {
case 'cssClass':
if (oldProp.cssClass) {
ej2_base_1.removeClass([this.wrapper], oldProp.cssClass.split(' '));
}
ej2_base_1.addClass([this.wrapper], newProp.cssClass.split(' '));
break;
case 'iconPosition':
this.setIconPositionTop();
break;
case 'enableRtl':
if (newProp.enableRtl) {
ej2_base_1.addClass([this.wrapper], RTL);
}
else {
ej2_base_1.removeClass([this.wrapper], RTL);
}
break;
}
}
};
__decorate([
ej2_base_2.Property('')
], SplitButton.prototype, "content", void 0);
__decorate([
ej2_base_2.Property('')
], SplitButton.prototype, "cssClass", void 0);
__decorate([
ej2_base_2.Property(false)
], SplitButton.prototype, "disabled", void 0);
__decorate([
ej2_base_2.Property('')
], SplitButton.prototype, "iconCss", void 0);
__decorate([
ej2_base_2.Property('Left')
], SplitButton.prototype, "iconPosition", void 0);
__decorate([
ej2_base_2.Collection([], common_1.Item)
], SplitButton.prototype, "items", void 0);
__decorate([
ej2_base_2.Property('')
], SplitButton.prototype, "target", void 0);
__decorate([
ej2_base_1.Event()
], SplitButton.prototype, "beforeItemRender", void 0);
__decorate([
ej2_base_1.Event()
], SplitButton.prototype, "beforeOpen", void 0);
__decorate([
ej2_base_1.Event()
], SplitButton.prototype, "beforeClose", void 0);
__decorate([
ej2_base_1.Event()
], SplitButton.prototype, "click", void 0);
__decorate([
ej2_base_1.Event()
], SplitButton.prototype, "close", void 0);
__decorate([
ej2_base_1.Event()
], SplitButton.prototype, "open", void 0);
__decorate([
ej2_base_1.Event()
], SplitButton.prototype, "select", void 0);
SplitButton = __decorate([
ej2_base_2.NotifyPropertyChanges
], SplitButton);
return SplitButton;
}(drop_down_button_1.DropDownButton));
exports.SplitButton = SplitButton;
});
}
};
__decorate([
Property('')
], SplitButton.prototype, "content", void 0);
__decorate([
Property('')
], SplitButton.prototype, "cssClass", void 0);
__decorate([
Property(false)
], SplitButton.prototype, "disabled", void 0);
__decorate([
Property('')
], SplitButton.prototype, "iconCss", void 0);
__decorate([
Property('Left')
], SplitButton.prototype, "iconPosition", void 0);
__decorate([
Collection([], Item)
], SplitButton.prototype, "items", void 0);
__decorate([
Property('')
], SplitButton.prototype, "target", void 0);
__decorate([
Event()
], SplitButton.prototype, "beforeItemRender", void 0);
__decorate([
Event()
], SplitButton.prototype, "beforeOpen", void 0);
__decorate([
Event()
], SplitButton.prototype, "beforeClose", void 0);
__decorate([
Event()
], SplitButton.prototype, "click", void 0);
__decorate([
Event()
], SplitButton.prototype, "close", void 0);
__decorate([
Event()
], SplitButton.prototype, "open", void 0);
__decorate([
Event()
], SplitButton.prototype, "select", void 0);
SplitButton = __decorate([
NotifyPropertyChanges
], SplitButton);
return SplitButton;
}(DropDownButton));
export { SplitButton };
dist/ej2-splitbuttons.umd.min.js.map

Sorry, the diff of this file is not supported yet

dist/es6/ej2-splitbuttons.es2015.js.map

Sorry, the diff of this file is not supported yet

dist/es6/ej2-splitbuttons.es5.js.map

Sorry, the diff of this file is not supported yet

dist/global/ej2-splitbuttons.min.js

Sorry, the diff of this file is too big to display

dist/global/ej2-splitbuttons.min.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc