@syncfusion/ej2-buttons - npm Package Compare versions

Comparing version 16.2.45 to 16.2.46

button.js

@@ -1,8 +0,4 @@
-define(["require", "exports", "./src/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);
-});
+/**
+ * button
+ */
+export * from './src/button/index';

check-box.js

@@ -1,8 +0,4 @@
-define(["require", "exports", "./src/check-box/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);
-});
+/**
+ * check-box
+ */
+export * from './src/check-box/index';

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';

dist/ej2-buttons.umd.min.js

@@ -1,2 +0,11 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@syncfusion/ej2-base")):"function"==typeof define&&define.amd?define(["exports","@syncfusion/ej2-base"],t):t(e.ej={},e.ej2Base)}(this,function(e,t){"use strict";function s(e,s,i,n,a){if(i.tagName===e){for(var r=t.getValue("ej2_instances",i),o=t.createElement("input",{attrs:{type:s}}),l=["change","cssClass","label","labelPosition"],c=t.createElement(e,{className:n,attrs:{role:a,"aria-checked":"false"}}),d=0,h=i.attributes.length;d<h;d++)-1===l.indexOf(i.attributes[d].nodeName)&&o.setAttribute(i.attributes[d].nodeName,i.attributes[d].nodeValue);i.parentNode.insertBefore(o,i),t.detach(i),(i=o).parentNode.insertBefore(c,i),c.appendChild(i),t.setValue("ej2_instances",r,i)}return i}function i(e){for(var t,s=e.childNodes,i=0;i<s.length;i++)if(3===(t=s[i]).nodeType)return t;return null}function n(e,s,i){"INPUT"===i?(s.parentNode.insertBefore(e.element,s),t.detach(s),e.element.checked=!1,["name","value","disabled"].forEach(function(t){e.element.removeAttribute(t)})):(e.element.id&&s.setAttribute("id",e.element.id),["role","aria-checked","class"].forEach(function(e){s.removeAttribute(e)}),s.innerHTML="")}function a(e,i,n,a,r){a=s(i,"checkbox",a,n,r),e.element=a,"checkbox"!==e.element.getAttribute("type")&&e.element.setAttribute("type","checkbox"),e.element.id||(e.element.id=t.getUniqueID("e-"+r))}function r(e,t){if(t){var s=document.createEvent("MouseEvents");s.initEvent(e.type,!1,!0),t.dispatchEvent(s)}}var o=function(){var e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var s in t)t.hasOwnProperty(s)&&(e[s]=t[s])};return function(t,s){function i(){this.constructor=t}e(t,s),t.prototype=null===s?Object.create(s):(i.prototype=s.prototype,new i)}}(),l=function(e,t,s,i){var n,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,s,i);else for(var o=e.length-1;o>=0;o--)(n=e[o])&&(r=(a<3?n(r):a>3?n(t,s,r):n(t,s))||r);return a>3&&r&&Object.defineProperty(t,s,r),r},c="e-rtl",d="e-btn",h="e-primary",p="e-icon-btn",u=function(e){function s(t,s){return e.call(this,t,s)||this}return o(s,e),s.prototype.preRender=function(){},s.prototype.render=function(){this.initialize()},s.prototype.initialize=function(){this.cssClass&&t.addClass([this.element],this.cssClass.split(" ")),this.isPrimary&&this.element.classList.add(h),this.content&&(this.element.innerHTML=this.content),this.setIconCss(),this.enableRtl&&this.element.classList.add(c),this.disabled?this.controlStatus(this.disabled):this.wireEvents(),this.removeRippleEffect=t.rippleEffect(this.element,{selector:"."+d})},s.prototype.controlStatus=function(e){this.element.disabled=e},s.prototype.setIconCss=function(){if(this.iconCss){var e=t.createElement("span",{className:"e-btn-icon "+this.iconCss});this.element.textContent.trim()?e.classList.add("e-icon-"+this.iconPosition.toLowerCase()):this.element.classList.add(p);var s=this.element.childNodes[0];s&&"Left"===this.iconPosition?this.element.insertBefore(e,s):this.element.appendChild(e)}},s.prototype.wireEvents=function(){this.isToggle&&t.EventHandler.add(this.element,"click",this.btnClickHandler,this)},s.prototype.unWireEvents=function(){this.isToggle&&t.EventHandler.remove(this.element,"click",this.btnClickHandler)},s.prototype.btnClickHandler=function(){this.element.classList.contains("e-active")?this.element.classList.remove("e-active"):this.element.classList.add("e-active")},s.prototype.destroy=function(){var s,i=this.element;e.prototype.destroy.call(this),t.removeClass([this.element],[h,c,p,"e-success","e-info","e-danger","e-warning","e-flat","e-outline","e-small","e-bigger","e-active","e-round"]),["e-ripple","disabled"].forEach(function(e){i.removeAttribute(e)}),this.content&&(i.innerHTML=i.innerHTML.replace(this.content,"")),(s=i.querySelector("span.e-btn-icon"))&&t.detach(s),this.unWireEvents(),this.removeRippleEffect()},s.prototype.getModuleName=function(){return"btn"},s.prototype.getPersistData=function(){return this.addOnPersist([])},s.prototype.onPropertyChanged=function(e,s){for(var n=0,a=Object.keys(e);n<a.length;n++){switch(a[n]){case"isPrimary":e.isPrimary?this.element.classList.add(h):this.element.classList.remove(h);break;case"disabled":this.controlStatus(e.disabled),this.unWireEvents();break;case"iconCss":var r=this.element.querySelector("span.e-btn-icon");r?(r.className="e-btn-icon "+e.iconCss,this.element.textContent.trim()&&("Left"===this.iconPosition?r.classList.add("e-icon-left"):r.classList.add("e-icon-right"))):this.setIconCss();break;case"iconPosition":(r=this.element.querySelector("span.e-btn-icon"))&&t.detach(r),this.setIconCss();break;case"cssClass":s.cssClass&&t.removeClass([this.element],s.cssClass.split(" ")),e.cssClass&&t.addClass([this.element],e.cssClass.split(" "));break;case"enableRtl":e.enableRtl?this.element.classList.add(c):this.element.classList.remove(c);break;case"content":i(this.element)||this.element.classList.remove(p),this.element.innerHTML=e.content,this.setIconCss();break;case"isToggle":e.isToggle?t.EventHandler.add(this.element,"click",this.btnClickHandler,this):(t.EventHandler.remove(this.element,"click",this.btnClickHandler),t.removeClass([this.element],["e-active"]))}}},l([t.Property("Left")],s.prototype,"iconPosition",void 0),l([t.Property("")],s.prototype,"iconCss",void 0),l([t.Property(!1)],s.prototype,"disabled",void 0),l([t.Property(!1)],s.prototype,"isPrimary",void 0),l([t.Property("")],s.prototype,"cssClass",void 0),l([t.Property("")],s.prototype,"content",void 0),l([t.Property(!1)],s.prototype,"isToggle",void 0),s=l([t.NotifyPropertyChanges],s)}(t.Component),m=function(){var e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var s in t)t.hasOwnProperty(s)&&(e[s]=t[s])};return function(t,s){function i(){this.constructor=t}e(t,s),t.prototype=null===s?Object.create(s):(i.prototype=s.prototype,new i)}}(),f=function(e,t,s,i){var n,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,s,i);else for(var o=e.length-1;o>=0;o--)(n=e[o])&&(r=(a<3?n(r):a>3?n(t,s,r):n(t,s))||r);return a>3&&r&&Object.defineProperty(t,s,r),r},v="e-checkbox-disabled",y="e-frame",b="e-ripple-container",g="e-ripple-check",E="e-ripple-stop",k="e-checkbox-wrapper",C=function(e){function i(t,s){var i=e.call(this,t,s)||this;return i.isKeyPressed=!1,i}return m(i,e),i.prototype.changeState=function(e){var s,i,n=this.getWrapper().getElementsByClassName(y)[0];t.isRippleEnabled&&(i=this.getWrapper().getElementsByClassName(b)[0]),"check"===e?(n.classList.remove("e-stop"),n.classList.add("e-check"),i&&(i.classList.remove(E),i.classList.add(g)),s="true",this.element.checked=!0):"uncheck"===e?(t.removeClass([n],["e-check","e-stop"]),i&&t.removeClass([i],[g,E]),s="false",this.element.checked=!1):(n.classList.remove("e-check"),n.classList.add("e-stop"),i&&(i.classList.remove(g),i.classList.add(E)),s="mixed",this.element.indeterminate=!0),this.getWrapper().setAttribute("aria-checked",s)},i.prototype.clickHandler=function(e){this.focusOutHandler(),this.indeterminate?(this.changeState(this.checked?"check":"uncheck"),this.indeterminate=!1,this.element.indeterminate=!1):this.checked?(this.changeState("uncheck"),this.checked=!1):(this.changeState("check"),this.checked=!0);var t={checked:this.element.checked,event:e};this.trigger("change",t)},i.prototype.destroy=function(){var s=this,i=this.getWrapper();e.prototype.destroy.call(this),this.disabled||this.unWireEvents(),"INPUT"===this.tagName?(i.parentNode.insertBefore(this.element,i),t.detach(i),this.element.checked=!1,this.indeterminate&&(this.element.indeterminate=!1),["name","value","disabled"].forEach(function(e){s.element.removeAttribute(e)})):(["role","aria-checked","class"].forEach(function(e){i.removeAttribute(e)}),this.element.id&&i.setAttribute("id",this.element.id),i.innerHTML="")},i.prototype.focusHandler=function(){this.isKeyPressed&&this.getWrapper().classList.add("e-focus")},i.prototype.focusOutHandler=function(){this.getWrapper().classList.remove("e-focus")},i.prototype.getModuleName=function(){return"checkbox"},i.prototype.getPersistData=function(){return this.addOnPersist(["checked","indeterminate"])},i.prototype.getWrapper=function(){return this.element.parentElement.parentElement},i.prototype.initialize=function(){this.name&&this.element.setAttribute("name",this.name),this.value&&this.element.setAttribute("value",this.value),this.checked&&this.changeState("check"),this.indeterminate&&this.changeState(),this.disabled&&this.setDisabled()},i.prototype.initWrapper=function(){var e=this.element.parentElement;e.classList.contains(k)||(e=t.createElement("div",{className:k,attrs:{role:"checkbox","aria-checked":"false"}}),this.element.parentNode.insertBefore(e,this.element));var s=t.createElement("label",{attrs:{for:this.element.id}}),i=t.createElement("span",{className:"e-icons "+y});if(this.enableRtl&&e.classList.add("e-rtl"),this.cssClass&&t.addClass([e],this.cssClass.split(" ")),e.appendChild(s),s.appendChild(this.element),s.appendChild(i),t.isRippleEnabled){var n=t.createElement("span",{className:b});"Before"===this.labelPosition?s.appendChild(n):s.insertBefore(n,i),t.rippleEffect(n,{duration:400,isCenterRipple:!0})}this.label&&this.setText(this.label)},i.prototype.keyDownHandler=function(){this.isKeyPressed=!0},i.prototype.labelMouseHandler=function(e){r(e,this.getWrapper().getElementsByClassName(b)[0])},i.prototype.mouseDownHandler=function(){this.isKeyPressed=!1},i.prototype.onPropertyChanged=function(e,s){for(var i=this.getWrapper(),n=0,a=Object.keys(e);n<a.length;n++){switch(a[n]){case"checked":this.indeterminate=!1,this.element.indeterminate=!1,this.changeState(e.checked?"check":"uncheck");break;case"indeterminate":e.indeterminate?this.changeState():(this.element.indeterminate=!1,this.changeState(this.checked?"check":"uncheck"));break;case"disabled":e.disabled?(this.setDisabled(),this.unWireEvents()):(this.element.disabled=!1,i.classList.remove(v),i.setAttribute("aria-disabled","false"),this.wireEvents());break;case"cssClass":s.cssClass&&i.classList.remove(s.cssClass),i.classList.add(e.cssClass);break;case"enableRtl":e.enableRtl?i.classList.add("e-rtl"):i.classList.remove("e-rtl");break;case"label":this.setText(e.label);break;case"labelPosition":var r=i.getElementsByClassName("e-label")[0],o=i.getElementsByTagName("label")[0];t.detach(r),"After"===e.labelPosition?o.appendChild(r):o.insertBefore(r,i.getElementsByClassName(y)[0]);break;case"name":this.element.setAttribute("name",e.name);break;case"value":this.element.setAttribute("value",e.value)}}},i.prototype.preRender=function(){var e=this.element;this.tagName=this.element.tagName,e=s("EJS-CHECKBOX","checkbox",e,k,"checkbox"),this.element=e,"checkbox"!==this.element.getAttribute("type")&&this.element.setAttribute("type","checkbox"),this.element.id||(this.element.id=t.getUniqueID("e-"+this.getModuleName()))},i.prototype.render=function(){this.initWrapper(),this.initialize(),this.disabled||this.wireEvents()},i.prototype.setDisabled=function(){var e=this.getWrapper();this.element.disabled=!0,e.classList.add(v),e.setAttribute("aria-disabled","true")},i.prototype.setText=function(e){var s=this.getWrapper().getElementsByClassName("e-label")[0];if(s)s.textContent=e;else{s=t.createElement("span",{className:"e-label",innerHTML:e});var i=this.getWrapper().getElementsByTagName("label")[0];"Before"===this.labelPosition?i.insertBefore(s,this.getWrapper().getElementsByClassName(y)[0]):i.appendChild(s)}},i.prototype.unWireEvents=function(){var e=this.getWrapper();t.EventHandler.remove(this.element,"click",this.clickHandler),t.EventHandler.remove(document,"keydown",this.keyDownHandler),t.EventHandler.remove(e,"mousedown",this.mouseDownHandler),t.EventHandler.remove(this.element,"focus",this.focusHandler),t.EventHandler.remove(this.element,"focusout",this.focusOutHandler);var s=e.getElementsByTagName("label")[0];t.EventHandler.remove(s,"mousedown",this.labelMouseHandler),t.EventHandler.remove(s,"mouseup",this.labelMouseHandler)},i.prototype.wireEvents=function(){var e=this.getWrapper();t.EventHandler.add(this.element,"click",this.clickHandler,this),t.EventHandler.add(document,"keydown",this.keyDownHandler,this),t.EventHandler.add(e,"mousedown",this.mouseDownHandler,this),t.EventHandler.add(this.element,"focus",this.focusHandler,this),t.EventHandler.add(this.element,"focusout",this.focusOutHandler,this);var s=e.getElementsByTagName("label")[0];t.EventHandler.add(s,"mousedown",this.labelMouseHandler,this),t.EventHandler.add(s,"mouseup",this.labelMouseHandler,this)},f([t.Event()],i.prototype,"change",void 0),f([t.Property(!1)],i.prototype,"checked",void 0),f([t.Property("")],i.prototype,"cssClass",void 0),f([t.Property(!1)],i.prototype,"disabled",void 0),f([t.Property(!1)],i.prototype,"indeterminate",void 0),f([t.Property("")],i.prototype,"label",void 0),f([t.Property("After")],i.prototype,"labelPosition",void 0),f([t.Property("")],i.prototype,"name",void 0),f([t.Property("")],i.prototype,"value",void 0),i=f([t.NotifyPropertyChanges],i)}(t.Component),H=function(){var e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var s in t)t.hasOwnProperty(s)&&(e[s]=t[s])};return function(t,s){function i(){this.constructor=t}e(t,s),t.prototype=null===s?Object.create(s):(i.prototype=s.prototype,new i)}}(),P=function(e,t,s,i){var n,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,s,i);else for(var o=e.length-1;o>=0;o--)(n=e[o])&&(r=(a<3?n(r):a>3?n(t,s,r):n(t,s))||r);return a>3&&r&&Object.defineProperty(t,s,r),r},w="e-label",L="e-ripple-container",N="e-radio-wrapper",O=function(e){function i(t,s){var i=e.call(this,t,s)||this;return i.isKeyPressed=!1,i}return H(i,e),n=i,i.prototype.changeHandler=function(e){this.checked=!0,this.dataBind();var t={value:this.value,event:e};this.trigger("change",t)},i.prototype.updateChange=function(e){for(var s,i=this.element.getAttribute("name"),a=document.querySelectorAll('input.e-radio[name="'+i+'"]'),r=0;r<a.length;r++)(s=a[r])!==this.element&&(t.getInstance(s,n).checked=!1)},i.prototype.destroy=function(){var s=this,i=this.element.parentElement;e.prototype.destroy.call(this),this.disabled||this.unWireEvents(),"INPUT"===this.tagName?(i.parentNode.insertBefore(this.element,i),t.detach(i),this.element.checked=!1,["name","value","disabled"].forEach(function(e){s.element.removeAttribute(e)})):(["role","aria-checked","class"].forEach(function(e){i.removeAttribute(e)}),this.element.id&&i.setAttribute("id",this.element.id),i.innerHTML="")},i.prototype.focusHandler=function(){this.isKeyPressed&&this.getLabel().classList.add("e-focus")},i.prototype.focusOutHandler=function(){this.getLabel().classList.remove("e-focus")},i.prototype.getModuleName=function(){return"radio"},i.prototype.getPersistData=function(){return this.addOnPersist(["checked"])},i.prototype.getLabel=function(){return this.element.nextElementSibling},i.prototype.initialize=function(){this.initWrapper(),this.name&&this.element.setAttribute("name",this.name),this.value&&this.element.setAttribute("value",this.value),this.checked&&(this.element.checked=!0),this.disabled&&this.setDisabled()},i.prototype.initWrapper=function(){var e,s=this.element.parentElement;s.classList.contains(N)||(s=t.createElement("div",{className:N}),this.element.parentNode.insertBefore(s,this.element));var i=t.createElement("label",{attrs:{for:this.element.id}});s.appendChild(this.element),s.appendChild(i),t.isRippleEnabled&&(e=t.createElement("span",{className:L}),i.appendChild(e),t.rippleEffect(e,{duration:400,isCenterRipple:!0})),this.enableRtl&&i.classList.add("e-rtl"),this.cssClass&&t.addClass([i],this.cssClass.split(" ")),this.label&&this.setText(this.label)},i.prototype.keyDownHandler=function(){this.isKeyPressed=!0},i.prototype.labelRippleHandler=function(e){r(e,this.getLabel().getElementsByClassName(L)[0])},i.prototype.mouseDownHandler=function(){this.isKeyPressed=!1},i.prototype.onPropertyChanged=function(e,s){for(var i=this.getLabel(),n=0,a=Object.keys(e);n<a.length;n++){switch(a[n]){case"checked":e.checked&&this.updateChange(e.checked),this.element.checked=e.checked;break;case"disabled":e.disabled?(this.setDisabled(),this.unWireEvents()):(this.element.disabled=!1,this.wireEvents());break;case"cssClass":s.cssClass&&t.removeClass([i],s.cssClass.split(" ")),t.addClass([i],e.cssClass.split(" "));break;case"enableRtl":e.enableRtl?i.classList.add("e-rtl"):i.classList.remove("e-rtl");break;case"label":this.setText(e.label);break;case"labelPosition":"Before"===e.labelPosition?i.classList.add("e-right"):i.classList.remove("e-right");break;case"name":this.element.setAttribute("name",e.name);break;case"value":this.element.setAttribute("value",e.value)}}},i.prototype.preRender=function(){var e=this.element;this.tagName=this.element.tagName,e=s("EJS-RADIOBUTTON","radio",e,N,"radio"),this.element=e,"radio"!==this.element.getAttribute("type")&&this.element.setAttribute("type","radio"),this.element.id||(this.element.id=t.getUniqueID("e-"+this.getModuleName()))},i.prototype.render=function(){this.initialize(),this.disabled||this.wireEvents()},i.prototype.setDisabled=function(){this.element.disabled=!0},i.prototype.setText=function(e){var s=this.getLabel(),i=s.getElementsByClassName(w)[0];i?i.textContent=e:(i=t.createElement("span",{className:w,innerHTML:e}),s.appendChild(i)),"Before"===this.labelPosition?this.getLabel().classList.add("e-right"):this.getLabel().classList.remove("e-right")},i.prototype.unWireEvents=function(){var e=this.getLabel();t.EventHandler.remove(this.element,"change",this.changeHandler),t.EventHandler.remove(document,"keydown",this.keyDownHandler),t.EventHandler.remove(e,"mousedown",this.mouseDownHandler),t.EventHandler.remove(this.element,"focus",this.focusHandler),t.EventHandler.remove(this.element,"focusout",this.focusOutHandler);var s=e.getElementsByClassName(w)[0];s&&(t.EventHandler.remove(s,"mousedown",this.labelRippleHandler),t.EventHandler.remove(s,"mouseup",this.labelRippleHandler))},i.prototype.wireEvents=function(){var e=this.getLabel();t.EventHandler.add(this.element,"change",this.changeHandler,this),t.EventHandler.add(document,"keydown",this.keyDownHandler,this),t.EventHandler.add(e,"mousedown",this.mouseDownHandler,this),t.EventHandler.add(this.element,"focus",this.focusHandler,this),t.EventHandler.add(this.element,"focusout",this.focusOutHandler,this);var s=e.getElementsByClassName(w)[0];s&&(t.EventHandler.add(s,"mousedown",this.labelRippleHandler,this),t.EventHandler.add(s,"mouseup",this.labelRippleHandler,this))},P([t.Event()],i.prototype,"change",void 0),P([t.Property(!1)],i.prototype,"checked",void 0),P([t.Property("")],i.prototype,"cssClass",void 0),P([t.Property(!1)],i.prototype,"disabled",void 0),P([t.Property("")],i.prototype,"label",void 0),P([t.Property("After")],i.prototype,"labelPosition",void 0),P([t.Property("")],i.prototype,"name",void 0),P([t.Property("")],i.prototype,"value",void 0),i=n=P([t.NotifyPropertyChanges],i);var n}(t.Component),R=function(){var e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var s in t)t.hasOwnProperty(s)&&(e[s]=t[s])};return function(t,s){function i(){this.constructor=t}e(t,s),t.prototype=null===s?Object.create(s):(i.prototype=s.prototype,new i)}}(),W=function(e,t,s,i){var n,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,s,i);else for(var o=e.length-1;o>=0;o--)(n=e[o])&&(r=(a<3?n(r):a>3?n(t,s,r):n(t,s))||r);return a>3&&r&&Object.defineProperty(t,s,r),r},A="e-switch-disabled",B="e-ripple-container",D="e-ripple-check",T="e-switch-wrapper",_="e-switch-active",x=function(e){function s(t,s){var i=e.call(this,t,s)||this;return i.isKeyPressed=!1,i.isDrag=!1,i}return R(s,e),s.prototype.changeState=function(e){var s,i,n=this.getWrapper(),a=n.querySelector(".e-switch-inner"),r=n.querySelector(".e-switch-handle");t.isRippleEnabled&&(i=n.getElementsByClassName(B)[0]),e?(t.addClass([a,r],_),s="true",this.element.checked=!0,this.checked=!0,i&&t.addClass([i],[D])):(t.removeClass([a,r],_),s="false",this.element.checked=!1,this.checked=!1,i&&t.removeClass([i],[D])),n.setAttribute("aria-checked",s)},s.prototype.clickHandler=function(e){this.isDrag=!1,this.focusOutHandler(),this.changeState(!this.checked),this.element.focus();var t={checked:this.element.checked,event:e};this.trigger("change",t)},s.prototype.destroy=function(){e.prototype.destroy.call(this),this.disabled||this.unWireEvents(),n(this,this.getWrapper(),this.tagName)},s.prototype.focusHandler=function(){this.isKeyPressed&&this.getWrapper().classList.add("e-focus")},s.prototype.focusOutHandler=function(){this.getWrapper().classList.remove("e-focus")},s.prototype.getModuleName=function(){return"switch"},s.prototype.getPersistData=function(){return this.addOnPersist(["checked"])},s.prototype.getWrapper=function(){return this.element.parentElement},s.prototype.initialize=function(){this.name&&this.element.setAttribute("name",this.name),this.value&&this.element.setAttribute("value",this.value),this.checked&&this.changeState(!0),this.disabled&&this.setDisabled(),(this.onLabel||this.offLabel)&&this.setLabel(this.onLabel,this.offLabel)},s.prototype.initWrapper=function(){var e=this.element.parentElement;e.classList.contains(T)||(e=t.createElement("div",{className:T,attrs:{role:"switch","aria-checked":"false"}}),this.element.parentNode.insertBefore(e,this.element));var s=t.createElement("span",{className:"e-switch-inner"}),i=t.createElement("span",{className:"e-switch-on"}),n=t.createElement("span",{className:"e-switch-off"}),a=t.createElement("span",{className:"e-switch-handle"});if(e.appendChild(this.element),s.appendChild(i),s.appendChild(n),e.appendChild(s),e.appendChild(a),t.isRippleEnabled){var r=t.createElement("span",{className:B});a.appendChild(r),t.rippleEffect(r,{duration:400,isCenterRipple:!0})}this.enableRtl&&e.classList.add("e-rtl"),this.cssClass&&t.addClass([e],this.cssClass.split(" "))},s.prototype.onPropertyChanged=function(e,t){for(var s=this.getWrapper(),i=0,n=Object.keys(e);i<n.length;i++){switch(n[i]){case"checked":this.changeState(e.checked);break;case"disabled":e.disabled?(this.setDisabled(),this.unWireEvents()):(this.element.disabled=!1,s.classList.remove(A),s.setAttribute("aria-disabled","false"),this.wireEvents());break;case"value":this.element.setAttribute("value",e.value);break;case"name":this.element.setAttribute("name",e.name);break;case"onLabel":case"offLabel":this.setLabel(e.onLabel,e.offLabel);break;case"enableRtl":e.enableRtl?s.classList.add("e-rtl"):s.classList.remove("e-rtl");break;case"cssClass":t.cssClass&&s.classList.remove(t.cssClass),s.classList.add(e.cssClass)}}},s.prototype.preRender=function(){var e=this.element;this.tagName=this.element.tagName,a(this,"EJS-SWITCH",T,e,this.getModuleName())},s.prototype.render=function(){this.initWrapper(),this.initialize(),this.disabled||this.wireEvents()},s.prototype.rippleHandler=function(e){r(e,this.getWrapper().getElementsByClassName(B)[0]),"mousedown"===e.type&&e.currentTarget.classList.contains("e-switch-wrapper")&&1===e.which&&(this.isDrag=!0,this.isKeyPressed=!1)},s.prototype.rippleTouchHandler=function(e){var t=this.getWrapper().getElementsByClassName(B)[0];if(t){var s=document.createEvent("MouseEvents");s.initEvent(e,!1,!0),t.dispatchEvent(s)}},s.prototype.setDisabled=function(){var e=this.getWrapper();this.element.disabled=!0,e.classList.add(A),e.setAttribute("aria-disabled","true")},s.prototype.setLabel=function(e,t){var s=this.getWrapper();e&&(s.querySelector(".e-switch-on").textContent=e),t&&(s.querySelector(".e-switch-off").textContent=t)},s.prototype.switchFocusHandler=function(){this.isKeyPressed=!0},s.prototype.switchMouseUp=function(e){var t=e.target;this.getWrapper().getElementsByClassName(B)[0];"touchmove"===e.type&&e.preventDefault(),"touchstart"===e.type&&(this.isDrag=!0,this.rippleTouchHandler("mousedown")),this.isDrag&&("mouseup"===e.type&&t.className.indexOf("e-switch")<0||"touchend"===e.type)&&(this.clickHandler(e),this.rippleTouchHandler("mouseup"),e.preventDefault())},s.prototype.toggle=function(){this.clickHandler()},s.prototype.wireEvents=function(){var e=this.getWrapper();e.querySelector(".e-switch-handle");t.EventHandler.add(e,"click",this.clickHandler,this),t.EventHandler.add(this.element,"focus",this.focusHandler,this),t.EventHandler.add(this.element,"focusout",this.focusOutHandler,this),t.EventHandler.add(document,"mouseup",this.switchMouseUp,this),t.EventHandler.add(document,"keydown",this.switchFocusHandler,this),t.EventHandler.add(e,"mousedown mouseup",this.rippleHandler,this),t.EventHandler.add(e,"touchstart touchmove touchend",this.switchMouseUp,this)},s.prototype.unWireEvents=function(){var e=this.getWrapper();e.querySelector(".e-switch-handle");t.EventHandler.remove(e,"click",this.clickHandler),t.EventHandler.remove(this.element,"focus",this.focusHandler),t.EventHandler.remove(this.element,"focusout",this.focusOutHandler),t.EventHandler.remove(document,"mouseup",this.switchMouseUp),t.EventHandler.remove(document,"keydown",this.switchFocusHandler),t.EventHandler.remove(e,"mousedown mouseup",this.rippleHandler),t.EventHandler.remove(e,"touchstart touchmove touchend",this.switchMouseUp)},W([t.Event()],s.prototype,"change",void 0),W([t.Property(!1)],s.prototype,"checked",void 0),W([t.Property("")],s.prototype,"cssClass",void 0),W([t.Property(!1)],s.prototype,"disabled",void 0),W([t.Property("")],s.prototype,"name",void 0),W([t.Property("")],s.prototype,"onLabel",void 0),W([t.Property("")],s.prototype,"offLabel",void 0),W([t.Property("")],s.prototype,"value",void 0),s=W([t.NotifyPropertyChanges],s)}(t.Component);e.wrapperInitialize=s,e.getTextNode=i,e.destroy=n,e.preRender=a,e.createCheckBox=function(e,s){void 0===e&&(e=!1),void 0===s&&(s={});var i=t.createElement("div",{className:"e-checkbox-wrapper e-css"});if(s.cssClass&&t.addClass([i],s.cssClass.split(" ")),s.enableRtl&&i.classList.add("e-rtl"),e){var n=t.createElement("span",{className:"e-ripple-container"});t.rippleEffect(n,{isCenterRipple:!0,duration:400}),i.appendChild(n)}var a=t.createElement("span",{className:"e-frame e-icons"});if(s.checked&&a.classList.add("e-check"),i.appendChild(a),s.label){var r=t.createElement("span",{className:"e-label",innerHTML:s.label});i.appendChild(r)}return i},e.rippleMouseHandler=r,e.Button=u,e.CheckBox=C,e.RadioButton=O,e.Switch=x,Object.defineProperty(e,"__esModule",{value:!0})});
+/*!
+*  filename: ej2-buttons.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
+*  [e-mail]. Any infringement will be prosecuted under
+*  applicable laws. 
+*/
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@syncfusion/ej2-base")):"function"==typeof define&&define.amd?define(["exports","@syncfusion/ej2-base"],t):t(e.ej={},e.ej2Base)}(this,function(e,t){"use strict";function s(e,s,i,n,a){if(i.tagName===e){for(var r=t.getValue("ej2_instances",i),o=t.createElement("input",{attrs:{type:s}}),l=["change","cssClass","label","labelPosition"],c=t.createElement(e,{className:n,attrs:{role:a,"aria-checked":"false"}}),h=0,d=i.attributes.length;h<d;h++)-1===l.indexOf(i.attributes[h].nodeName)&&o.setAttribute(i.attributes[h].nodeName,i.attributes[h].nodeValue);i.parentNode.insertBefore(o,i),t.detach(i),(i=o).parentNode.insertBefore(c,i),c.appendChild(i),t.setValue("ej2_instances",r,i)}return i}function i(e){for(var t,s=e.childNodes,i=0;i<s.length;i++)if(3===(t=s[i]).nodeType)return t;return null}function n(e,s,i){"INPUT"===i?(s.parentNode.insertBefore(e.element,s),t.detach(s),e.element.checked=!1,["name","value","disabled"].forEach(function(t){e.element.removeAttribute(t)})):(e.element.id&&s.setAttribute("id",e.element.id),["role","aria-checked","class"].forEach(function(e){s.removeAttribute(e)}),s.innerHTML="")}function a(e,i,n,a,r){a=s(i,"checkbox",a,n,r),e.element=a,"checkbox"!==e.element.getAttribute("type")&&e.element.setAttribute("type","checkbox"),e.element.id||(e.element.id=t.getUniqueID("e-"+r))}function r(e,t){if(t){var s=document.createEvent("MouseEvents");s.initEvent(e.type,!1,!0),t.dispatchEvent(s)}}var o=function(){var e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var s in t)t.hasOwnProperty(s)&&(e[s]=t[s])};return function(t,s){function i(){this.constructor=t}e(t,s),t.prototype=null===s?Object.create(s):(i.prototype=s.prototype,new i)}}(),l=function(e,t,s,i){var n,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,s,i);else for(var o=e.length-1;o>=0;o--)(n=e[o])&&(r=(a<3?n(r):a>3?n(t,s,r):n(t,s))||r);return a>3&&r&&Object.defineProperty(t,s,r),r},c="e-rtl",h="e-btn",d="e-primary",p="e-icon-btn",u=function(e){function s(t,s){return e.call(this,t,s)||this}return o(s,e),s.prototype.preRender=function(){},s.prototype.render=function(){this.initialize()},s.prototype.initialize=function(){this.cssClass&&t.addClass([this.element],this.cssClass.split(" ")),this.isPrimary&&this.element.classList.add(d),this.content&&(this.element.innerHTML=this.content),this.setIconCss(),this.enableRtl&&this.element.classList.add(c),this.disabled?this.controlStatus(this.disabled):this.wireEvents(),this.removeRippleEffect=t.rippleEffect(this.element,{selector:"."+h})},s.prototype.controlStatus=function(e){this.element.disabled=e},s.prototype.setIconCss=function(){if(this.iconCss){var e=this.createElement("span",{className:"e-btn-icon "+this.iconCss});this.element.textContent.trim()?e.classList.add("e-icon-"+this.iconPosition.toLowerCase()):this.element.classList.add(p);var t=this.element.childNodes[0];t&&"Left"===this.iconPosition?this.element.insertBefore(e,t):this.element.appendChild(e)}},s.prototype.wireEvents=function(){this.isToggle&&t.EventHandler.add(this.element,"click",this.btnClickHandler,this)},s.prototype.unWireEvents=function(){this.isToggle&&t.EventHandler.remove(this.element,"click",this.btnClickHandler)},s.prototype.btnClickHandler=function(){this.element.classList.contains("e-active")?this.element.classList.remove("e-active"):this.element.classList.add("e-active")},s.prototype.destroy=function(){var s,i=this.element;e.prototype.destroy.call(this),t.removeClass([this.element],[d,c,p,"e-success","e-info","e-danger","e-warning","e-flat","e-outline","e-small","e-bigger","e-active","e-round"]),["e-ripple","disabled"].forEach(function(e){i.removeAttribute(e)}),this.content&&(i.innerHTML=i.innerHTML.replace(this.content,"")),(s=i.querySelector("span.e-btn-icon"))&&t.detach(s),this.unWireEvents(),this.removeRippleEffect()},s.prototype.getModuleName=function(){return"btn"},s.prototype.getPersistData=function(){return this.addOnPersist([])},s.prototype.onPropertyChanged=function(e,s){for(var n=0,a=Object.keys(e);n<a.length;n++){switch(a[n]){case"isPrimary":e.isPrimary?this.element.classList.add(d):this.element.classList.remove(d);break;case"disabled":this.controlStatus(e.disabled),this.unWireEvents();break;case"iconCss":var r=this.element.querySelector("span.e-btn-icon");r?(r.className="e-btn-icon "+e.iconCss,this.element.textContent.trim()&&("Left"===this.iconPosition?r.classList.add("e-icon-left"):r.classList.add("e-icon-right"))):this.setIconCss();break;case"iconPosition":(r=this.element.querySelector("span.e-btn-icon"))&&t.detach(r),this.setIconCss();break;case"cssClass":s.cssClass&&t.removeClass([this.element],s.cssClass.split(" ")),e.cssClass&&t.addClass([this.element],e.cssClass.split(" "));break;case"enableRtl":e.enableRtl?this.element.classList.add(c):this.element.classList.remove(c);break;case"content":i(this.element)||this.element.classList.remove(p),this.element.innerHTML=e.content,this.setIconCss();break;case"isToggle":e.isToggle?t.EventHandler.add(this.element,"click",this.btnClickHandler,this):(t.EventHandler.remove(this.element,"click",this.btnClickHandler),t.removeClass([this.element],["e-active"]))}}},l([t.Property("Left")],s.prototype,"iconPosition",void 0),l([t.Property("")],s.prototype,"iconCss",void 0),l([t.Property(!1)],s.prototype,"disabled",void 0),l([t.Property(!1)],s.prototype,"isPrimary",void 0),l([t.Property("")],s.prototype,"cssClass",void 0),l([t.Property("")],s.prototype,"content",void 0),l([t.Property(!1)],s.prototype,"isToggle",void 0),s=l([t.NotifyPropertyChanges],s)}(t.Component),m=function(){var e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var s in t)t.hasOwnProperty(s)&&(e[s]=t[s])};return function(t,s){function i(){this.constructor=t}e(t,s),t.prototype=null===s?Object.create(s):(i.prototype=s.prototype,new i)}}(),f=function(e,t,s,i){var n,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,s,i);else for(var o=e.length-1;o>=0;o--)(n=e[o])&&(r=(a<3?n(r):a>3?n(t,s,r):n(t,s))||r);return a>3&&r&&Object.defineProperty(t,s,r),r},v="e-checkbox-disabled",y="e-frame",b="e-ripple-container",g="e-ripple-check",E="e-ripple-stop",k="e-checkbox-wrapper",C=function(e){function i(t,s){var i=e.call(this,t,s)||this;return i.isKeyPressed=!1,i}return m(i,e),i.prototype.changeState=function(e){var s,i,n=this.getWrapper().getElementsByClassName(y)[0];t.isRippleEnabled&&(i=this.getWrapper().getElementsByClassName(b)[0]),"check"===e?(n.classList.remove("e-stop"),n.classList.add("e-check"),i&&(i.classList.remove(E),i.classList.add(g)),s="true",this.element.checked=!0):"uncheck"===e?(t.removeClass([n],["e-check","e-stop"]),i&&t.removeClass([i],[g,E]),s="false",this.element.checked=!1):(n.classList.remove("e-check"),n.classList.add("e-stop"),i&&(i.classList.remove(g),i.classList.add(E)),s="mixed",this.element.indeterminate=!0),this.getWrapper().setAttribute("aria-checked",s)},i.prototype.clickHandler=function(e){this.focusOutHandler(),this.indeterminate?(this.changeState(this.checked?"check":"uncheck"),this.indeterminate=!1,this.element.indeterminate=!1):this.checked?(this.changeState("uncheck"),this.checked=!1):(this.changeState("check"),this.checked=!0);var t={checked:this.element.checked,event:e};this.trigger("change",t)},i.prototype.destroy=function(){var s=this,i=this.getWrapper();e.prototype.destroy.call(this),this.disabled||this.unWireEvents(),"INPUT"===this.tagName?(i.parentNode.insertBefore(this.element,i),t.detach(i),this.element.checked=!1,this.indeterminate&&(this.element.indeterminate=!1),["name","value","disabled"].forEach(function(e){s.element.removeAttribute(e)})):(["role","aria-checked","class"].forEach(function(e){i.removeAttribute(e)}),this.element.id&&i.setAttribute("id",this.element.id),i.innerHTML="")},i.prototype.focusHandler=function(){this.isKeyPressed&&this.getWrapper().classList.add("e-focus")},i.prototype.focusOutHandler=function(){this.getWrapper().classList.remove("e-focus")},i.prototype.getModuleName=function(){return"checkbox"},i.prototype.getPersistData=function(){return this.addOnPersist(["checked","indeterminate"])},i.prototype.getWrapper=function(){return this.element.parentElement.parentElement},i.prototype.initialize=function(){this.name&&this.element.setAttribute("name",this.name),this.value&&this.element.setAttribute("value",this.value),this.checked&&this.changeState("check"),this.indeterminate&&this.changeState(),this.disabled&&this.setDisabled()},i.prototype.initWrapper=function(){var e=this.element.parentElement;e.classList.contains(k)||(e=this.createElement("div",{className:k,attrs:{role:"checkbox","aria-checked":"false"}}),this.element.parentNode.insertBefore(e,this.element));var s=this.createElement("label",{attrs:{for:this.element.id}}),i=this.createElement("span",{className:"e-icons "+y});if(this.enableRtl&&e.classList.add("e-rtl"),this.cssClass&&t.addClass([e],this.cssClass.split(" ")),e.appendChild(s),s.appendChild(this.element),s.appendChild(i),t.isRippleEnabled){var n=this.createElement("span",{className:b});"Before"===this.labelPosition?s.appendChild(n):s.insertBefore(n,i),t.rippleEffect(n,{duration:400,isCenterRipple:!0})}this.label&&this.setText(this.label)},i.prototype.keyDownHandler=function(){this.isKeyPressed=!0},i.prototype.labelMouseHandler=function(e){r(e,this.getWrapper().getElementsByClassName(b)[0])},i.prototype.mouseDownHandler=function(){this.isKeyPressed=!1},i.prototype.onPropertyChanged=function(e,s){for(var i=this.getWrapper(),n=0,a=Object.keys(e);n<a.length;n++){switch(a[n]){case"checked":this.indeterminate=!1,this.element.indeterminate=!1,this.changeState(e.checked?"check":"uncheck");break;case"indeterminate":e.indeterminate?this.changeState():(this.element.indeterminate=!1,this.changeState(this.checked?"check":"uncheck"));break;case"disabled":e.disabled?(this.setDisabled(),this.unWireEvents()):(this.element.disabled=!1,i.classList.remove(v),i.setAttribute("aria-disabled","false"),this.wireEvents());break;case"cssClass":s.cssClass&&i.classList.remove(s.cssClass),i.classList.add(e.cssClass);break;case"enableRtl":e.enableRtl?i.classList.add("e-rtl"):i.classList.remove("e-rtl");break;case"label":this.setText(e.label);break;case"labelPosition":var r=i.getElementsByClassName("e-label")[0],o=i.getElementsByTagName("label")[0];t.detach(r),"After"===e.labelPosition?o.appendChild(r):o.insertBefore(r,i.getElementsByClassName(y)[0]);break;case"name":this.element.setAttribute("name",e.name);break;case"value":this.element.setAttribute("value",e.value)}}},i.prototype.preRender=function(){var e=this.element;this.tagName=this.element.tagName,e=s("EJS-CHECKBOX","checkbox",e,k,"checkbox"),this.element=e,"checkbox"!==this.element.getAttribute("type")&&this.element.setAttribute("type","checkbox"),this.element.id||(this.element.id=t.getUniqueID("e-"+this.getModuleName()))},i.prototype.render=function(){this.initWrapper(),this.initialize(),this.disabled||this.wireEvents()},i.prototype.setDisabled=function(){var e=this.getWrapper();this.element.disabled=!0,e.classList.add(v),e.setAttribute("aria-disabled","true")},i.prototype.setText=function(e){var t=this.getWrapper().getElementsByClassName("e-label")[0];if(t)t.textContent=e;else{t=this.createElement("span",{className:"e-label",innerHTML:e});var s=this.getWrapper().getElementsByTagName("label")[0];"Before"===this.labelPosition?s.insertBefore(t,this.getWrapper().getElementsByClassName(y)[0]):s.appendChild(t)}},i.prototype.unWireEvents=function(){var e=this.getWrapper();t.EventHandler.remove(this.element,"click",this.clickHandler),t.EventHandler.remove(document,"keydown",this.keyDownHandler),t.EventHandler.remove(e,"mousedown",this.mouseDownHandler),t.EventHandler.remove(this.element,"focus",this.focusHandler),t.EventHandler.remove(this.element,"focusout",this.focusOutHandler);var s=e.getElementsByTagName("label")[0];t.EventHandler.remove(s,"mousedown",this.labelMouseHandler),t.EventHandler.remove(s,"mouseup",this.labelMouseHandler)},i.prototype.wireEvents=function(){var e=this.getWrapper();t.EventHandler.add(this.element,"click",this.clickHandler,this),t.EventHandler.add(document,"keydown",this.keyDownHandler,this),t.EventHandler.add(e,"mousedown",this.mouseDownHandler,this),t.EventHandler.add(this.element,"focus",this.focusHandler,this),t.EventHandler.add(this.element,"focusout",this.focusOutHandler,this);var s=e.getElementsByTagName("label")[0];t.EventHandler.add(s,"mousedown",this.labelMouseHandler,this),t.EventHandler.add(s,"mouseup",this.labelMouseHandler,this)},f([t.Event()],i.prototype,"change",void 0),f([t.Property(!1)],i.prototype,"checked",void 0),f([t.Property("")],i.prototype,"cssClass",void 0),f([t.Property(!1)],i.prototype,"disabled",void 0),f([t.Property(!1)],i.prototype,"indeterminate",void 0),f([t.Property("")],i.prototype,"label",void 0),f([t.Property("After")],i.prototype,"labelPosition",void 0),f([t.Property("")],i.prototype,"name",void 0),f([t.Property("")],i.prototype,"value",void 0),i=f([t.NotifyPropertyChanges],i)}(t.Component),H=function(){var e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var s in t)t.hasOwnProperty(s)&&(e[s]=t[s])};return function(t,s){function i(){this.constructor=t}e(t,s),t.prototype=null===s?Object.create(s):(i.prototype=s.prototype,new i)}}(),P=function(e,t,s,i){var n,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,s,i);else for(var o=e.length-1;o>=0;o--)(n=e[o])&&(r=(a<3?n(r):a>3?n(t,s,r):n(t,s))||r);return a>3&&r&&Object.defineProperty(t,s,r),r},w="e-label",L="e-ripple-container",N="e-radio-wrapper",O=function(e){function i(t,s){var i=e.call(this,t,s)||this;return i.isKeyPressed=!1,i}return H(i,e),n=i,i.prototype.changeHandler=function(e){this.checked=!0,this.dataBind();var t={value:this.value,event:e};this.trigger("change",t)},i.prototype.updateChange=function(e){for(var s,i=this.element.getAttribute("name"),a=document.querySelectorAll('input.e-radio[name="'+i+'"]'),r=0;r<a.length;r++)(s=a[r])!==this.element&&(t.getInstance(s,n).checked=!1)},i.prototype.destroy=function(){var s=this,i=this.element.parentElement;e.prototype.destroy.call(this),this.disabled||this.unWireEvents(),"INPUT"===this.tagName?(i.parentNode.insertBefore(this.element,i),t.detach(i),this.element.checked=!1,["name","value","disabled"].forEach(function(e){s.element.removeAttribute(e)})):(["role","aria-checked","class"].forEach(function(e){i.removeAttribute(e)}),this.element.id&&i.setAttribute("id",this.element.id),i.innerHTML="")},i.prototype.focusHandler=function(){this.isKeyPressed&&this.getLabel().classList.add("e-focus")},i.prototype.focusOutHandler=function(){this.getLabel().classList.remove("e-focus")},i.prototype.getModuleName=function(){return"radio"},i.prototype.getPersistData=function(){return this.addOnPersist(["checked"])},i.prototype.getLabel=function(){return this.element.nextElementSibling},i.prototype.initialize=function(){this.initWrapper(),this.name&&this.element.setAttribute("name",this.name),this.value&&this.element.setAttribute("value",this.value),this.checked&&(this.element.checked=!0),this.disabled&&this.setDisabled()},i.prototype.initWrapper=function(){var e,s=this.element.parentElement;s.classList.contains(N)||(s=this.createElement("div",{className:N}),this.element.parentNode.insertBefore(s,this.element));var i=this.createElement("label",{attrs:{for:this.element.id}});s.appendChild(this.element),s.appendChild(i),t.isRippleEnabled&&(e=this.createElement("span",{className:L}),i.appendChild(e),t.rippleEffect(e,{duration:400,isCenterRipple:!0})),this.enableRtl&&i.classList.add("e-rtl"),this.cssClass&&t.addClass([i],this.cssClass.split(" ")),this.label&&this.setText(this.label)},i.prototype.keyDownHandler=function(){this.isKeyPressed=!0},i.prototype.labelRippleHandler=function(e){r(e,this.getLabel().getElementsByClassName(L)[0])},i.prototype.mouseDownHandler=function(){this.isKeyPressed=!1},i.prototype.onPropertyChanged=function(e,s){for(var i=this.getLabel(),n=0,a=Object.keys(e);n<a.length;n++){switch(a[n]){case"checked":e.checked&&this.updateChange(e.checked),this.element.checked=e.checked;break;case"disabled":e.disabled?(this.setDisabled(),this.unWireEvents()):(this.element.disabled=!1,this.wireEvents());break;case"cssClass":s.cssClass&&t.removeClass([i],s.cssClass.split(" ")),t.addClass([i],e.cssClass.split(" "));break;case"enableRtl":e.enableRtl?i.classList.add("e-rtl"):i.classList.remove("e-rtl");break;case"label":this.setText(e.label);break;case"labelPosition":"Before"===e.labelPosition?i.classList.add("e-right"):i.classList.remove("e-right");break;case"name":this.element.setAttribute("name",e.name);break;case"value":this.element.setAttribute("value",e.value)}}},i.prototype.preRender=function(){var e=this.element;this.tagName=this.element.tagName,e=s("EJS-RADIOBUTTON","radio",e,N,"radio"),this.element=e,"radio"!==this.element.getAttribute("type")&&this.element.setAttribute("type","radio"),this.element.id||(this.element.id=t.getUniqueID("e-"+this.getModuleName()))},i.prototype.render=function(){this.initialize(),this.disabled||this.wireEvents()},i.prototype.setDisabled=function(){this.element.disabled=!0},i.prototype.setText=function(e){var t=this.getLabel(),s=t.getElementsByClassName(w)[0];s?s.textContent=e:(s=this.createElement("span",{className:w,innerHTML:e}),t.appendChild(s)),"Before"===this.labelPosition?this.getLabel().classList.add("e-right"):this.getLabel().classList.remove("e-right")},i.prototype.unWireEvents=function(){var e=this.getLabel();t.EventHandler.remove(this.element,"change",this.changeHandler),t.EventHandler.remove(document,"keydown",this.keyDownHandler),t.EventHandler.remove(e,"mousedown",this.mouseDownHandler),t.EventHandler.remove(this.element,"focus",this.focusHandler),t.EventHandler.remove(this.element,"focusout",this.focusOutHandler);var s=e.getElementsByClassName(w)[0];s&&(t.EventHandler.remove(s,"mousedown",this.labelRippleHandler),t.EventHandler.remove(s,"mouseup",this.labelRippleHandler))},i.prototype.wireEvents=function(){var e=this.getLabel();t.EventHandler.add(this.element,"change",this.changeHandler,this),t.EventHandler.add(document,"keydown",this.keyDownHandler,this),t.EventHandler.add(e,"mousedown",this.mouseDownHandler,this),t.EventHandler.add(this.element,"focus",this.focusHandler,this),t.EventHandler.add(this.element,"focusout",this.focusOutHandler,this);var s=e.getElementsByClassName(w)[0];s&&(t.EventHandler.add(s,"mousedown",this.labelRippleHandler,this),t.EventHandler.add(s,"mouseup",this.labelRippleHandler,this))},P([t.Event()],i.prototype,"change",void 0),P([t.Property(!1)],i.prototype,"checked",void 0),P([t.Property("")],i.prototype,"cssClass",void 0),P([t.Property(!1)],i.prototype,"disabled",void 0),P([t.Property("")],i.prototype,"label",void 0),P([t.Property("After")],i.prototype,"labelPosition",void 0),P([t.Property("")],i.prototype,"name",void 0),P([t.Property("")],i.prototype,"value",void 0),i=n=P([t.NotifyPropertyChanges],i);var n}(t.Component),R=function(){var e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var s in t)t.hasOwnProperty(s)&&(e[s]=t[s])};return function(t,s){function i(){this.constructor=t}e(t,s),t.prototype=null===s?Object.create(s):(i.prototype=s.prototype,new i)}}(),W=function(e,t,s,i){var n,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,s,i);else for(var o=e.length-1;o>=0;o--)(n=e[o])&&(r=(a<3?n(r):a>3?n(t,s,r):n(t,s))||r);return a>3&&r&&Object.defineProperty(t,s,r),r},A="e-switch-disabled",B="e-ripple-container",D="e-ripple-check",T="e-switch-wrapper",_="e-switch-active",x=function(e){function s(t,s){var i=e.call(this,t,s)||this;return i.isKeyPressed=!1,i.isDrag=!1,i}return R(s,e),s.prototype.changeState=function(e){var s,i,n=this.getWrapper(),a=n.querySelector(".e-switch-inner"),r=n.querySelector(".e-switch-handle");t.isRippleEnabled&&(i=n.getElementsByClassName(B)[0]),e?(t.addClass([a,r],_),s="true",this.element.checked=!0,this.checked=!0,i&&t.addClass([i],[D])):(t.removeClass([a,r],_),s="false",this.element.checked=!1,this.checked=!1,i&&t.removeClass([i],[D])),n.setAttribute("aria-checked",s)},s.prototype.clickHandler=function(e){this.isDrag=!1,this.focusOutHandler(),this.changeState(!this.checked),this.element.focus();var t={checked:this.element.checked,event:e};this.trigger("change",t)},s.prototype.destroy=function(){e.prototype.destroy.call(this),this.disabled||this.unWireEvents(),n(this,this.getWrapper(),this.tagName)},s.prototype.focusHandler=function(){this.isKeyPressed&&this.getWrapper().classList.add("e-focus")},s.prototype.focusOutHandler=function(){this.getWrapper().classList.remove("e-focus")},s.prototype.getModuleName=function(){return"switch"},s.prototype.getPersistData=function(){return this.addOnPersist(["checked"])},s.prototype.getWrapper=function(){return this.element.parentElement},s.prototype.initialize=function(){this.name&&this.element.setAttribute("name",this.name),this.value&&this.element.setAttribute("value",this.value),this.checked&&this.changeState(!0),this.disabled&&this.setDisabled(),(this.onLabel||this.offLabel)&&this.setLabel(this.onLabel,this.offLabel)},s.prototype.initWrapper=function(){var e=this.element.parentElement;e.classList.contains(T)||(e=this.createElement("div",{className:T,attrs:{role:"switch","aria-checked":"false"}}),this.element.parentNode.insertBefore(e,this.element));var s=this.createElement("span",{className:"e-switch-inner"}),i=this.createElement("span",{className:"e-switch-on"}),n=this.createElement("span",{className:"e-switch-off"}),a=this.createElement("span",{className:"e-switch-handle"});if(e.appendChild(this.element),s.appendChild(i),s.appendChild(n),e.appendChild(s),e.appendChild(a),t.isRippleEnabled){var r=this.createElement("span",{className:B});a.appendChild(r),t.rippleEffect(r,{duration:400,isCenterRipple:!0})}this.enableRtl&&e.classList.add("e-rtl"),this.cssClass&&t.addClass([e],this.cssClass.split(" "))},s.prototype.onPropertyChanged=function(e,t){for(var s=this.getWrapper(),i=0,n=Object.keys(e);i<n.length;i++){switch(n[i]){case"checked":this.changeState(e.checked);break;case"disabled":e.disabled?(this.setDisabled(),this.unWireEvents()):(this.element.disabled=!1,s.classList.remove(A),s.setAttribute("aria-disabled","false"),this.wireEvents());break;case"value":this.element.setAttribute("value",e.value);break;case"name":this.element.setAttribute("name",e.name);break;case"onLabel":case"offLabel":this.setLabel(e.onLabel,e.offLabel);break;case"enableRtl":e.enableRtl?s.classList.add("e-rtl"):s.classList.remove("e-rtl");break;case"cssClass":t.cssClass&&s.classList.remove(t.cssClass),s.classList.add(e.cssClass)}}},s.prototype.preRender=function(){var e=this.element;this.tagName=this.element.tagName,a(this,"EJS-SWITCH",T,e,this.getModuleName())},s.prototype.render=function(){this.initWrapper(),this.initialize(),this.disabled||this.wireEvents()},s.prototype.rippleHandler=function(e){r(e,this.getWrapper().getElementsByClassName(B)[0]),"mousedown"===e.type&&e.currentTarget.classList.contains("e-switch-wrapper")&&1===e.which&&(this.isDrag=!0,this.isKeyPressed=!1)},s.prototype.rippleTouchHandler=function(e){var t=this.getWrapper().getElementsByClassName(B)[0];if(t){var s=document.createEvent("MouseEvents");s.initEvent(e,!1,!0),t.dispatchEvent(s)}},s.prototype.setDisabled=function(){var e=this.getWrapper();this.element.disabled=!0,e.classList.add(A),e.setAttribute("aria-disabled","true")},s.prototype.setLabel=function(e,t){var s=this.getWrapper();e&&(s.querySelector(".e-switch-on").textContent=e),t&&(s.querySelector(".e-switch-off").textContent=t)},s.prototype.switchFocusHandler=function(){this.isKeyPressed=!0},s.prototype.switchMouseUp=function(e){var t=e.target;this.getWrapper().getElementsByClassName(B)[0];"touchmove"===e.type&&e.preventDefault(),"touchstart"===e.type&&(this.isDrag=!0,this.rippleTouchHandler("mousedown")),this.isDrag&&("mouseup"===e.type&&t.className.indexOf("e-switch")<0||"touchend"===e.type)&&(this.clickHandler(e),this.rippleTouchHandler("mouseup"),e.preventDefault())},s.prototype.toggle=function(){this.clickHandler()},s.prototype.wireEvents=function(){var e=this.getWrapper();e.querySelector(".e-switch-handle");t.EventHandler.add(e,"click",this.clickHandler,this),t.EventHandler.add(this.element,"focus",this.focusHandler,this),t.EventHandler.add(this.element,"focusout",this.focusOutHandler,this),t.EventHandler.add(document,"mouseup",this.switchMouseUp,this),t.EventHandler.add(document,"keydown",this.switchFocusHandler,this),t.EventHandler.add(e,"mousedown mouseup",this.rippleHandler,this),t.EventHandler.add(e,"touchstart touchmove touchend",this.switchMouseUp,this)},s.prototype.unWireEvents=function(){var e=this.getWrapper();e.querySelector(".e-switch-handle");t.EventHandler.remove(e,"click",this.clickHandler),t.EventHandler.remove(this.element,"focus",this.focusHandler),t.EventHandler.remove(this.element,"focusout",this.focusOutHandler),t.EventHandler.remove(document,"mouseup",this.switchMouseUp),t.EventHandler.remove(document,"keydown",this.switchFocusHandler),t.EventHandler.remove(e,"mousedown mouseup",this.rippleHandler),t.EventHandler.remove(e,"touchstart touchmove touchend",this.switchMouseUp)},W([t.Event()],s.prototype,"change",void 0),W([t.Property(!1)],s.prototype,"checked",void 0),W([t.Property("")],s.prototype,"cssClass",void 0),W([t.Property(!1)],s.prototype,"disabled",void 0),W([t.Property("")],s.prototype,"name",void 0),W([t.Property("")],s.prototype,"onLabel",void 0),W([t.Property("")],s.prototype,"offLabel",void 0),W([t.Property("")],s.prototype,"value",void 0),s=W([t.NotifyPropertyChanges],s)}(t.Component);e.wrapperInitialize=s,e.getTextNode=i,e.destroy=n,e.preRender=a,e.createCheckBox=function(e,s){void 0===e&&(e=!1),void 0===s&&(s={});var i=t.createElement("div",{className:"e-checkbox-wrapper e-css"});if(s.cssClass&&t.addClass([i],s.cssClass.split(" ")),s.enableRtl&&i.classList.add("e-rtl"),e){var n=t.createElement("span",{className:"e-ripple-container"});t.rippleEffect(n,{isCenterRipple:!0,duration:400}),i.appendChild(n)}var a=t.createElement("span",{className:"e-frame e-icons"});if(s.checked&&a.classList.add("e-check"),i.appendChild(a),s.label){var r=t.createElement("span",{className:"e-label",innerHTML:s.label});i.appendChild(r)}return i},e.rippleMouseHandler=r,e.Button=u,e.CheckBox=C,e.RadioButton=O,e.Switch=x,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=ej2-buttons.umd.min.js.map

dist/es6/ej2-buttons.es2015.js

@@ -184,3 +184,3 @@ import { Component, Event, EventHandler, NotifyPropertyChanges, Property, addClass, createElement, detach, getInstance, getUniqueID, getValue, isRippleEnabled, removeClass, rippleEffect, setValue } from '@syncfusion/ej2-base';
         if (this.iconCss) {
-            let span = createElement('span', { className: 'e-btn-icon ' + this.iconCss });
+            let span = this.createElement('span', { className: 'e-btn-icon ' + this.iconCss });
             if (!this.element.textContent.trim()) {
@@ -536,3 +536,3 @@ this.element.classList.add(cssClassName.ICONBTN);
         if (!wrapper.classList.contains(WRAPPER)) {
-            wrapper = createElement('div', {
+            wrapper = this.createElement('div', {
                 className: WRAPPER, attrs: { 'role': 'checkbox', 'aria-checked': 'false' }
@@ -542,4 +542,4 @@ });
         }
-        let label = createElement('label', { attrs: { for: this.element.id } });
-        let frameSpan = createElement('span', { className: 'e-icons ' + FRAME });
+        let label = this.createElement('label', { attrs: { for: this.element.id } });
+        let frameSpan = this.createElement('span', { className: 'e-icons ' + FRAME });
         if (this.enableRtl) {
@@ -555,3 +555,3 @@ wrapper.classList.add(RTL);
         if (isRippleEnabled) {
-            let rippleSpan = createElement('span', { className: RIPPLE });
+            let rippleSpan = this.createElement('span', { className: RIPPLE });
             if (this.labelPosition === 'Before') {
@@ -689,3 +689,3 @@ label.appendChild(rippleSpan);
         else {
-            label = createElement('span', { className: LABEL, innerHTML: text });
+            label = this.createElement('span', { className: LABEL, innerHTML: text });
             let labelWrap = this.getWrapper().getElementsByTagName('label')[0];
@@ -873,10 +873,10 @@ if (this.labelPosition === 'Before') {
         if (!wrapper.classList.contains(WRAPPER$1)) {
-            wrapper = createElement('div', { className: WRAPPER$1 });
+            wrapper = this.createElement('div', { className: WRAPPER$1 });
             this.element.parentNode.insertBefore(wrapper, this.element);
         }
-        let label = createElement('label', { attrs: { for: this.element.id } });
+        let label = this.createElement('label', { attrs: { for: this.element.id } });
         wrapper.appendChild(this.element);
         wrapper.appendChild(label);
         if (isRippleEnabled) {
-            rippleSpan = createElement('span', { className: (RIPPLE$1) });
+            rippleSpan = this.createElement('span', { className: (RIPPLE$1) });
             label.appendChild(rippleSpan);
@@ -1002,3 +1002,3 @@ rippleEffect(rippleSpan, {
         else {
-            textLabel = createElement('span', { className: LABEL$1, innerHTML: text });
+            textLabel = this.createElement('span', { className: LABEL$1, innerHTML: text });
             label.appendChild(textLabel);
@@ -1198,3 +1198,3 @@ }
         if (!wrapper.classList.contains(WRAPPER$2)) {
-            wrapper = createElement('div', {
+            wrapper = this.createElement('div', {
                 className: WRAPPER$2, attrs: { 'role': 'switch', 'aria-checked': 'false' }
@@ -1204,6 +1204,6 @@ });
         }
-        let switchInner = createElement('span', { className: 'e-switch-inner' });
-        let onLabel = createElement('span', { className: 'e-switch-on' });
-        let offLabel = createElement('span', { className: 'e-switch-off' });
-        let handle = createElement('span', { className: 'e-switch-handle' });
+        let switchInner = this.createElement('span', { className: 'e-switch-inner' });
+        let onLabel = this.createElement('span', { className: 'e-switch-on' });
+        let offLabel = this.createElement('span', { className: 'e-switch-off' });
+        let handle = this.createElement('span', { className: 'e-switch-handle' });
         wrapper.appendChild(this.element);
@@ -1215,3 +1215,3 @@ switchInner.appendChild(onLabel);
         if (isRippleEnabled) {
-            let rippleSpan = createElement('span', { className: RIPPLE$2 });
+            let rippleSpan = this.createElement('span', { className: RIPPLE$2 });
             handle.appendChild(rippleSpan);
@@ -1218,0 +1218,0 @@ rippleEffect(rippleSpan, { duration: 400, isCenterRipple: true });

dist/es6/ej2-buttons.es5.js

@@ -197,3 +197,3 @@ import { Component, Event, EventHandler, NotifyPropertyChanges, Property, addClass, createElement, detach, getInstance, getUniqueID, getValue, isRippleEnabled, removeClass, rippleEffect, setValue } from '@syncfusion/ej2-base';
         if (this.iconCss) {
-            var span = createElement('span', { className: 'e-btn-icon ' + this.iconCss });
+            var span = this.createElement('span', { className: 'e-btn-icon ' + this.iconCss });
             if (!this.element.textContent.trim()) {
@@ -564,3 +564,3 @@ this.element.classList.add(cssClassName.ICONBTN);
         if (!wrapper.classList.contains(WRAPPER)) {
-            wrapper = createElement('div', {
+            wrapper = this.createElement('div', {
                 className: WRAPPER, attrs: { 'role': 'checkbox', 'aria-checked': 'false' }
@@ -570,4 +570,4 @@ });
         }
-        var label = createElement('label', { attrs: { for: this.element.id } });
-        var frameSpan = createElement('span', { className: 'e-icons ' + FRAME });
+        var label = this.createElement('label', { attrs: { for: this.element.id } });
+        var frameSpan = this.createElement('span', { className: 'e-icons ' + FRAME });
         if (this.enableRtl) {
@@ -583,3 +583,3 @@ wrapper.classList.add(RTL);
         if (isRippleEnabled) {
-            var rippleSpan = createElement('span', { className: RIPPLE });
+            var rippleSpan = this.createElement('span', { className: RIPPLE });
             if (this.labelPosition === 'Before') {
@@ -718,3 +718,3 @@ label.appendChild(rippleSpan);
         else {
-            label = createElement('span', { className: LABEL, innerHTML: text });
+            label = this.createElement('span', { className: LABEL, innerHTML: text });
             var labelWrap = this.getWrapper().getElementsByTagName('label')[0];
@@ -917,10 +917,10 @@ if (this.labelPosition === 'Before') {
         if (!wrapper.classList.contains(WRAPPER$1)) {
-            wrapper = createElement('div', { className: WRAPPER$1 });
+            wrapper = this.createElement('div', { className: WRAPPER$1 });
             this.element.parentNode.insertBefore(wrapper, this.element);
         }
-        var label = createElement('label', { attrs: { for: this.element.id } });
+        var label = this.createElement('label', { attrs: { for: this.element.id } });
         wrapper.appendChild(this.element);
         wrapper.appendChild(label);
         if (isRippleEnabled) {
-            rippleSpan = createElement('span', { className: (RIPPLE$1) });
+            rippleSpan = this.createElement('span', { className: (RIPPLE$1) });
             label.appendChild(rippleSpan);
@@ -1047,3 +1047,3 @@ rippleEffect(rippleSpan, {
         else {
-            textLabel = createElement('span', { className: LABEL$1, innerHTML: text });
+            textLabel = this.createElement('span', { className: LABEL$1, innerHTML: text });
             label.appendChild(textLabel);
@@ -1256,3 +1256,3 @@ }
         if (!wrapper.classList.contains(WRAPPER$2)) {
-            wrapper = createElement('div', {
+            wrapper = this.createElement('div', {
                 className: WRAPPER$2, attrs: { 'role': 'switch', 'aria-checked': 'false' }
@@ -1262,6 +1262,6 @@ });
         }
-        var switchInner = createElement('span', { className: 'e-switch-inner' });
-        var onLabel = createElement('span', { className: 'e-switch-on' });
-        var offLabel = createElement('span', { className: 'e-switch-off' });
-        var handle = createElement('span', { className: 'e-switch-handle' });
+        var switchInner = this.createElement('span', { className: 'e-switch-inner' });
+        var onLabel = this.createElement('span', { className: 'e-switch-on' });
+        var offLabel = this.createElement('span', { className: 'e-switch-off' });
+        var handle = this.createElement('span', { className: 'e-switch-handle' });
         wrapper.appendChild(this.element);
@@ -1273,3 +1273,3 @@ switchInner.appendChild(onLabel);
         if (isRippleEnabled) {
-            var rippleSpan = createElement('span', { className: RIPPLE$2 });
+            var rippleSpan = this.createElement('span', { className: RIPPLE$2 });
             handle.appendChild(rippleSpan);
@@ -1276,0 +1276,0 @@ rippleEffect(rippleSpan, { duration: 400, isCenterRipple: true });

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
+*  [e-mail]. Any infringement will be prosecuted under
+*  applicable laws. 
+*/
 import * as _buttons from '@syncfusion/ej2-buttons';
@@ -2,0 +11,0 @@ import * as _base from '@syncfusion/ej2-base';

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';

package.json

 {
   "name": "@syncfusion/ej2-buttons",
-  "version": "16.2.45",
+  "version": "16.2.46",
   "description": "Essential JS 2 Button Components",
@@ -8,6 +8,6 @@ "author": "Syncfusion Inc.",
   "main": "./dist/ej2-buttons.umd.min.js",
-  "module": "./dist/es6/ej2-buttons.es5.js",
+  "module": "./index.js",
   "es2015": "./dist/es6/ej2-buttons.es2015.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~16.2.45"
+    "@syncfusion/ej2-base": "~16.2.46"
   },
@@ -14,0 +14,0 @@ "devDependencies": {

radio-button.js

@@ -1,8 +0,4 @@
-define(["require", "exports", "./src/radio-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);
-});
+/**
+ * radio-button
+ */
+export * from './src/radio-button/index';

ReadMe.md

@@ -1,14 +0,108 @@
-# Overview
+# ej2-buttons
 
-A package of Essential JS 2 Button, CheckBox, RadioButton and Switch 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 Button, CheckBox, RadioButton and Switch components.
 
-## Resources
+![Button](https://ej2.syncfusion.com/products/images/button/readme.gif)
 
-* [Button Demo](http://ej2.syncfusion.com/demos/#/material/button/default.html)
-* [Button Documentation](http://ej2.syncfusion.com/documentation/button)
-* [CheckBox Demo](http://ej2.syncfusion.com/demos/#/material/button/check-box.html)
-* [CheckBox Documentation](http://ej2.syncfusion.com/documentation/check-box)
-* [RadioButton Demo](http://ej2.syncfusion.com/demos/#/material/button/radio-button.html)
-* [RadioButton Documentation](http://ej2.syncfusion.com/documentation/radio-button)
-* [Switch Demo](http://ej2.syncfusion.com/demos/#/material/button/switch.html)
-* [Switch Documentation](http://ej2.syncfusion.com/documentation/switch)
+> 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 `Button` and its dependent packages, use the following command
+
+```sh
+npm install @syncfusion/ej2-buttons
+```
+
+## Components included
+
+Following list of components are available in the package.
+
+* Button - `Button` is a graphical user interface element that triggers an event on its click action.
+    * [Getting Started](https://ej2.syncfusion.com/documentation/button/getting-started.html?lang=typescript&utm_source=npm&utm_campaign=button)
+    * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=grid#/material/button/default.html)
+    * [Product Page](https://www.syncfusion.com/products/javascript/button)
+
+* CheckBox - `CheckBox` is a graphical user interface element that allows to select one or more options from the choices.
+    * [Getting Started](https://ej2.syncfusion.com/documentation/check-box/getting-started.html?lang=typescript&utm_source=npm&utm_campaign=check-box)
+    * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=grid#/material/button/check-box.html)
+    * [Product Page](https://www.syncfusion.com/products/javascript/checkbox)
+
+* RadioButton - `RadioButton` is a graphical user interface element that allows to select one option from the choices.
+    * [Getting Started](https://ej2.syncfusion.com/documentation/radio-button/getting-started.html?lang=typescript&utm_source=npm&utm_campaign=radio-button)
+    * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=grid#/material/button/radio-button.html)
+    * [Product Page](https://www.syncfusion.com/products/javascript/radio-button)
+
+* Switch - `Switch` is a graphical user interface element that allows you to toggle between checked and unchecked states.
+    * [Getting Started](https://ej2.syncfusion.com/documentation/switch/getting-started.html?lang=typescript&utm_source=npm&utm_campaign=switch)
+    * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=grid#/material/button/switch.html)
+    * [Product Page](https://www.syncfusion.com/products/javascript/switch)
+
+## Supported Frameworks
+
+These components are available in following list of frameworks.
+
+1. [Angular](https://github.com/syncfusion/ej2-ng-buttons?utm_source=npm&utm_campaign=button)
+2. [React](https://github.com/syncfusion/ej2-react-buttons?utm_source=npm&utm_campaign=button)
+3. [VueJS](https://github.com/syncfusion/ej2-vue-buttons?utm_source=npm&utm_campaign=button)
+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)
+
+## Showcase samples
+
+* Expense Tracker ([Source](https://github.com/syncfusion/ej2-sample-ts-expensetracker), [Live Demo](https://ej2.syncfusion.com/showcase/typescript/expensetracker/?utm_source=npm&utm_campaign=button#/dashboard))
+* Loan Calculator ([Source](https://github.com/syncfusion/ej2-sample-ts-loancalculator), [Live Demo](https://ej2.syncfusion.com/showcase/typescript/loancalculator/?utm_source=npm&utm_campaign=button))
+
+## Key Features
+
+### Button
+
+* [**Types**](https://ej2.syncfusion.com/documentation/button/types-and-styles.html?lang=typescript#button-types) - Provided with different types of Button.
+
+* [**Predefined Styles**](https://ej2.syncfusion.com/documentation/button/types-and-styles.html?lang=typescript#button-styles) - Provided with predefined styles of Button.
+
+* [**Sizes**](https://ej2.syncfusion.com/documentation/button/types-and-styles.html?lang=typescript#button-size) - Provided with different sizes of Button.
+
+* [**Icons**](https://ej2.syncfusion.com/documentation/button/types-and-styles.html?lang=typescript#icons) - Supports text and icon on the Button.
+
+### CheckBox
+
+* [**States**](https://ej2.syncfusion.com/documentation/check-box/getting-started.html?lang=typescript#change-the-checkbox-state) - Provided with different states of CheckBox.
+
+* [**Label**](https://ej2.syncfusion.com/documentation/check-box/label-and-size.html?lang=typescript#label) - Supports label and its positioning.
+
+* [**Sizes**](https://ej2.syncfusion.com/documentation/check-box/label-and-size.html?lang=typescript#size) - Provided with different sizes of CheckBox.
+
+### RadioButton
+
+* [**States**](https://ej2.syncfusion.com/documentation/radio-button/getting-started.html?lang=typescript#change-the-radiobutton-state) - Provided with different states of RadioButton.
+
+* [**Label**](https://ej2.syncfusion.com/documentation/radio-button/label-and-size.html?lang=typescript#label) - Supports label and its positioning.
+
+* [**Sizes**](https://ej2.syncfusion.com/documentation/radio-button/label-and-size.html?lang=typescript#size) - Provided with different sizes of RadioButton.
+
+### Switch
+
+* [**Text**](https://ej2.syncfusion.com/documentation/switch/getting-started.html?lang=typescript#set-text-on-switch) - Supports text.
+* [**Sizes**](https://ej2.syncfusion.com/documentation/switch/howto.html?lang=typescript#change-size) - Provided with different sizes of Switch.
+
+## 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=button) support system or [Community forum](https://www.syncfusion.com/forums/essential-js2?utm_source=npm&utm_campaign=button).
+* New [GitHub issue](https://github.com/syncfusion/ej2-buttons/issues/new).
+* Ask your query in [Stack Overflow](https://stackoverflow.com/?utm_source=npm&utm_campaign=button) with tag `syncfusion`, `ej2`.
+
+## License
+
+Check the license detail [here](https://github.com/syncfusion/ej2/blob/master/license?utm_source=npm&utm_campaign=button).
+
+## Changelog
+
+Check the changelog [here](https://github.com/syncfusion/ej2-buttons/blob/master/CHANGELOG.md?utm_source=npm&utm_campaign=button)
+
+© Copyright 2018 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.

src/button/button-model.d.ts

@@ -1,2 +0,2 @@
-import { Property, NotifyPropertyChanges, INotifyPropertyChanged, Component } from '@syncfusion/ej2-base';import { addClass, createElement, detach, removeClass, rippleEffect, EventHandler } from '@syncfusion/ej2-base';import { getTextNode } from '../common/common';
+import { Property, NotifyPropertyChanges, INotifyPropertyChanged, Component } from '@syncfusion/ej2-base';import { addClass, detach, removeClass, rippleEffect, EventHandler } from '@syncfusion/ej2-base';import { getTextNode } from '../common/common';
 import {IconPosition} from "./button";
@@ -3,0 +3,0 @@ import {ComponentModel} from '@syncfusion/ej2-base';

src/button/button.js

@@ -17,210 +17,252 @@ var __extends = (this && this.__extends) || (function () {
 };
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../common/common"], function (require, exports, ej2_base_1, ej2_base_2, common_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var cssClassName = {
-        RTL: 'e-rtl',
-        BUTTON: 'e-btn',
-        PRIMARY: 'e-primary',
-        ICONBTN: 'e-icon-btn'
+import { Property, NotifyPropertyChanges, Component } from '@syncfusion/ej2-base';
+import { addClass, detach, removeClass, rippleEffect, EventHandler } from '@syncfusion/ej2-base';
+import { getTextNode } from '../common/common';
+var cssClassName = {
+    RTL: 'e-rtl',
+    BUTTON: 'e-btn',
+    PRIMARY: 'e-primary',
+    ICONBTN: 'e-icon-btn'
+};
+/**
+ * The Button is a graphical user interface element that triggers an event on its click action. It can contain a text, an image, or both.
+ * ```html
+ * <button id="button">Button</button>
+ * ```
+ * ```typescript
+ * <script>
+ * var btnObj = new Button();
+ * btnObj.appendTo("#button");
+ * </script>
+ * ```
+ */
+var Button = /** @class */ (function (_super) {
+    __extends(Button, _super);
+    /**
+     * Constructor for creating the widget
+     * @param  {ButtonModel} options?
+     * @param  {string|HTMLButtonElement} element?
+     */
+    function Button(options, element) {
+        return _super.call(this, options, element) || this;
+    }
+    Button.prototype.preRender = function () {
+        // pre render code snippets
     };
-    var Button = (function (_super) {
-        __extends(Button, _super);
-        function Button(options, element) {
-            return _super.call(this, options, element) || this;
+    /**
+     * Initialize the control rendering
+     * @returns void
+     * @private
+     */
+    Button.prototype.render = function () {
+        this.initialize();
+    };
+    Button.prototype.initialize = function () {
+        if (this.cssClass) {
+            addClass([this.element], this.cssClass.split(' '));
         }
-        Button.prototype.preRender = function () {
-        };
-        Button.prototype.render = function () {
-            this.initialize();
-        };
-        Button.prototype.initialize = function () {
-            if (this.cssClass) {
-                ej2_base_2.addClass([this.element], this.cssClass.split(' '));
+        if (this.isPrimary) {
+            this.element.classList.add(cssClassName.PRIMARY);
+        }
+        if (this.content) {
+            this.element.innerHTML = this.content;
+        }
+        this.setIconCss();
+        if (this.enableRtl) {
+            this.element.classList.add(cssClassName.RTL);
+        }
+        if (this.disabled) {
+            this.controlStatus(this.disabled);
+        }
+        else {
+            this.wireEvents();
+        }
+        this.removeRippleEffect = rippleEffect(this.element, { selector: '.' + cssClassName.BUTTON });
+    };
+    Button.prototype.controlStatus = function (disabled) {
+        this.element.disabled = disabled;
+    };
+    Button.prototype.setIconCss = function () {
+        if (this.iconCss) {
+            var span = this.createElement('span', { className: 'e-btn-icon ' + this.iconCss });
+            if (!this.element.textContent.trim()) {
+                this.element.classList.add(cssClassName.ICONBTN);
             }
-            if (this.isPrimary) {
-                this.element.classList.add(cssClassName.PRIMARY);
-            }
-            if (this.content) {
-                this.element.innerHTML = this.content;
-            }
-            this.setIconCss();
-            if (this.enableRtl) {
-                this.element.classList.add(cssClassName.RTL);
-            }
-            if (this.disabled) {
-                this.controlStatus(this.disabled);
-            }
             else {
-                this.wireEvents();
+                span.classList.add('e-icon-' + this.iconPosition.toLowerCase());
             }
-            this.removeRippleEffect = ej2_base_2.rippleEffect(this.element, { selector: '.' + cssClassName.BUTTON });
-        };
-        Button.prototype.controlStatus = function (disabled) {
-            this.element.disabled = disabled;
-        };
-        Button.prototype.setIconCss = function () {
-            if (this.iconCss) {
-                var span = ej2_base_2.createElement('span', { className: 'e-btn-icon ' + this.iconCss });
-                if (!this.element.textContent.trim()) {
-                    this.element.classList.add(cssClassName.ICONBTN);
-                }
-                else {
-                    span.classList.add('e-icon-' + this.iconPosition.toLowerCase());
-                }
-                var node = this.element.childNodes[0];
-                if (node && (this.iconPosition === 'Left')) {
-                    this.element.insertBefore(span, node);
-                }
-                else {
-                    this.element.appendChild(span);
-                }
+            var node = this.element.childNodes[0];
+            if (node && (this.iconPosition === 'Left')) {
+                this.element.insertBefore(span, node);
             }
-        };
-        Button.prototype.wireEvents = function () {
-            if (this.isToggle) {
-                ej2_base_2.EventHandler.add(this.element, 'click', this.btnClickHandler, this);
-            }
-        };
-        Button.prototype.unWireEvents = function () {
-            if (this.isToggle) {
-                ej2_base_2.EventHandler.remove(this.element, 'click', this.btnClickHandler);
-            }
-        };
-        Button.prototype.btnClickHandler = function () {
-            if (this.element.classList.contains('e-active')) {
-                this.element.classList.remove('e-active');
-            }
             else {
-                this.element.classList.add('e-active');
+                this.element.appendChild(span);
             }
-        };
-        Button.prototype.destroy = function () {
-            var span;
-            var element = this.element;
-            _super.prototype.destroy.call(this);
-            ej2_base_2.removeClass([this.element], [cssClassName.PRIMARY, cssClassName.RTL, cssClassName.ICONBTN, 'e-success',
-                'e-info', 'e-danger', 'e-warning', 'e-flat', 'e-outline', 'e-small', 'e-bigger', 'e-active', 'e-round']);
-            ['e-ripple', 'disabled'].forEach(function (value) {
-                element.removeAttribute(value);
-            });
-            if (this.content) {
-                element.innerHTML = element.innerHTML.replace(this.content, '');
-            }
-            span = element.querySelector('span.e-btn-icon');
-            if (span) {
-                ej2_base_2.detach(span);
-            }
-            this.unWireEvents();
-            this.removeRippleEffect();
-        };
-        Button.prototype.getModuleName = function () {
-            return 'btn';
-        };
-        Button.prototype.getPersistData = function () {
-            return this.addOnPersist([]);
-        };
-        Button.prototype.onPropertyChanged = function (newProp, oldProp) {
-            for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
-                var prop = _a[_i];
-                switch (prop) {
-                    case 'isPrimary':
-                        if (newProp.isPrimary) {
-                            this.element.classList.add(cssClassName.PRIMARY);
-                        }
-                        else {
-                            this.element.classList.remove(cssClassName.PRIMARY);
-                        }
-                        break;
-                    case 'disabled':
-                        this.controlStatus(newProp.disabled);
-                        this.unWireEvents();
-                        break;
-                    case 'iconCss':
-                        var span = this.element.querySelector('span.e-btn-icon');
-                        if (span) {
-                            span.className = 'e-btn-icon ' + newProp.iconCss;
-                            if (this.element.textContent.trim()) {
-                                if (this.iconPosition === 'Left') {
-                                    span.classList.add('e-icon-left');
-                                }
-                                else {
-                                    span.classList.add('e-icon-right');
-                                }
+        }
+    };
+    Button.prototype.wireEvents = function () {
+        if (this.isToggle) {
+            EventHandler.add(this.element, 'click', this.btnClickHandler, this);
+        }
+    };
+    Button.prototype.unWireEvents = function () {
+        if (this.isToggle) {
+            EventHandler.remove(this.element, 'click', this.btnClickHandler);
+        }
+    };
+    Button.prototype.btnClickHandler = function () {
+        if (this.element.classList.contains('e-active')) {
+            this.element.classList.remove('e-active');
+        }
+        else {
+            this.element.classList.add('e-active');
+        }
+    };
+    /**
+     * Destroys the widget.
+     * @returns void
+     */
+    Button.prototype.destroy = function () {
+        var span;
+        var element = this.element;
+        _super.prototype.destroy.call(this);
+        removeClass([this.element], [cssClassName.PRIMARY, cssClassName.RTL, cssClassName.ICONBTN, 'e-success',
+            'e-info', 'e-danger', 'e-warning', 'e-flat', 'e-outline', 'e-small', 'e-bigger', 'e-active', 'e-round']);
+        ['e-ripple', 'disabled'].forEach(function (value) {
+            element.removeAttribute(value);
+        });
+        if (this.content) {
+            element.innerHTML = element.innerHTML.replace(this.content, '');
+        }
+        span = element.querySelector('span.e-btn-icon');
+        if (span) {
+            detach(span);
+        }
+        this.unWireEvents();
+        this.removeRippleEffect();
+    };
+    /**
+     * Get component name.
+     * @returns string
+     * @private
+     */
+    Button.prototype.getModuleName = function () {
+        return 'btn';
+    };
+    /**
+     * Get the properties to be maintained in the persisted state.
+     * @returns string
+     */
+    Button.prototype.getPersistData = function () {
+        return this.addOnPersist([]);
+    };
+    /**
+     * Called internally if any of the property value changed.
+     * @param  {Button} newProp
+     * @param  {Button} oldProp
+     * @returns void
+     * @private
+     */
+    Button.prototype.onPropertyChanged = function (newProp, oldProp) {
+        for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
+            var prop = _a[_i];
+            switch (prop) {
+                case 'isPrimary':
+                    if (newProp.isPrimary) {
+                        this.element.classList.add(cssClassName.PRIMARY);
+                    }
+                    else {
+                        this.element.classList.remove(cssClassName.PRIMARY);
+                    }
+                    break;
+                case 'disabled':
+                    this.controlStatus(newProp.disabled);
+                    this.unWireEvents();
+                    break;
+                case 'iconCss':
+                    var span = this.element.querySelector('span.e-btn-icon');
+                    if (span) {
+                        span.className = 'e-btn-icon ' + newProp.iconCss;
+                        if (this.element.textContent.trim()) {
+                            if (this.iconPosition === 'Left') {
+                                span.classList.add('e-icon-left');
                             }
+                            else {
+                                span.classList.add('e-icon-right');
+                            }
                         }
-                        else {
-                            this.setIconCss();
-                        }
-                        break;
-                    case 'iconPosition':
-                        span = this.element.querySelector('span.e-btn-icon');
-                        if (span) {
-                            ej2_base_2.detach(span);
-                        }
+                    }
+                    else {
                         this.setIconCss();
-                        break;
-                    case 'cssClass':
-                        if (oldProp.cssClass) {
-                            ej2_base_2.removeClass([this.element], oldProp.cssClass.split(' '));
-                        }
-                        if (newProp.cssClass) {
-                            ej2_base_2.addClass([this.element], newProp.cssClass.split(' '));
-                        }
-                        break;
-                    case 'enableRtl':
-                        if (newProp.enableRtl) {
-                            this.element.classList.add(cssClassName.RTL);
-                        }
-                        else {
-                            this.element.classList.remove(cssClassName.RTL);
-                        }
-                        break;
-                    case 'content':
-                        var node = common_1.getTextNode(this.element);
-                        if (!node) {
-                            this.element.classList.remove(cssClassName.ICONBTN);
-                        }
-                        this.element.innerHTML = newProp.content;
-                        this.setIconCss();
-                        break;
-                    case 'isToggle':
-                        if (newProp.isToggle) {
-                            ej2_base_2.EventHandler.add(this.element, 'click', this.btnClickHandler, this);
-                        }
-                        else {
-                            ej2_base_2.EventHandler.remove(this.element, 'click', this.btnClickHandler);
-                            ej2_base_2.removeClass([this.element], ['e-active']);
-                        }
-                        break;
-                }
+                    }
+                    break;
+                case 'iconPosition':
+                    span = this.element.querySelector('span.e-btn-icon');
+                    if (span) {
+                        detach(span);
+                    }
+                    this.setIconCss();
+                    break;
+                case 'cssClass':
+                    if (oldProp.cssClass) {
+                        removeClass([this.element], oldProp.cssClass.split(' '));
+                    }
+                    if (newProp.cssClass) {
+                        addClass([this.element], newProp.cssClass.split(' '));
+                    }
+                    break;
+                case 'enableRtl':
+                    if (newProp.enableRtl) {
+                        this.element.classList.add(cssClassName.RTL);
+                    }
+                    else {
+                        this.element.classList.remove(cssClassName.RTL);
+                    }
+                    break;
+                case 'content':
+                    var node = getTextNode(this.element);
+                    if (!node) {
+                        this.element.classList.remove(cssClassName.ICONBTN);
+                    }
+                    this.element.innerHTML = newProp.content;
+                    this.setIconCss();
+                    break;
+                case 'isToggle':
+                    if (newProp.isToggle) {
+                        EventHandler.add(this.element, 'click', this.btnClickHandler, this);
+                    }
+                    else {
+                        EventHandler.remove(this.element, 'click', this.btnClickHandler);
+                        removeClass([this.element], ['e-active']);
+                    }
+                    break;
             }
-        };
-        __decorate([
-            ej2_base_1.Property('Left')
-        ], Button.prototype, "iconPosition", void 0);
-        __decorate([
-            ej2_base_1.Property('')
-        ], Button.prototype, "iconCss", void 0);
-        __decorate([
-            ej2_base_1.Property(false)
-        ], Button.prototype, "disabled", void 0);
-        __decorate([
-            ej2_base_1.Property(false)
-        ], Button.prototype, "isPrimary", void 0);
-        __decorate([
-            ej2_base_1.Property('')
-        ], Button.prototype, "cssClass", void 0);
-        __decorate([
-            ej2_base_1.Property('')
-        ], Button.prototype, "content", void 0);
-        __decorate([
-            ej2_base_1.Property(false)
-        ], Button.prototype, "isToggle", void 0);
-        Button = __decorate([
-            ej2_base_1.NotifyPropertyChanges
-        ], Button);
-        return Button;
-    }(ej2_base_1.Component));
-    exports.Button = Button;
-});
+        }
+    };
+    __decorate([
+        Property('Left')
+    ], Button.prototype, "iconPosition", void 0);
+    __decorate([
+        Property('')
+    ], Button.prototype, "iconCss", void 0);
+    __decorate([
+        Property(false)
+    ], Button.prototype, "disabled", void 0);
+    __decorate([
+        Property(false)
+    ], Button.prototype, "isPrimary", void 0);
+    __decorate([
+        Property('')
+    ], Button.prototype, "cssClass", void 0);
+    __decorate([
+        Property('')
+    ], Button.prototype, "content", void 0);
+    __decorate([
+        Property(false)
+    ], Button.prototype, "isToggle", void 0);
+    Button = __decorate([
+        NotifyPropertyChanges
+    ], Button);
+    return Button;
+}(Component));
+export { Button };

src/button/index.js

@@ -1,8 +0,4 @@
-define(["require", "exports", "./button"], function (require, exports, 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(button_1);
-});
+/**
+ * Button modules
+ */
+export * from './button';

src/check-box/check-box-model.d.ts

@@ -1,2 +0,2 @@
-import { Component, INotifyPropertyChanged , NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';import { EmitType, Event, EventHandler, KeyboardEvents } from '@syncfusion/ej2-base';import { addClass, createElement, detach, getUniqueID, isRippleEnabled, removeClass, rippleEffect } from '@syncfusion/ej2-base';import { wrapperInitialize, rippleMouseHandler, ChangeEventArgs } from './../common/common';
+import { Component, INotifyPropertyChanged , NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';import { EmitType, Event, EventHandler, KeyboardEvents } from '@syncfusion/ej2-base';import { addClass, detach, getUniqueID, isRippleEnabled, removeClass, rippleEffect } from '@syncfusion/ej2-base';import { wrapperInitialize, rippleMouseHandler, ChangeEventArgs } from './../common/common';
 import {LabelPosition} from "./check-box";
@@ -3,0 +3,0 @@ import {ComponentModel} from '@syncfusion/ej2-base';

src/check-box/check-box.js

@@ -17,346 +17,385 @@ var __extends = (this && this.__extends) || (function () {
 };
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "./../common/common"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, common_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var CHECK = 'e-check';
-    var DISABLED = 'e-checkbox-disabled';
-    var FRAME = 'e-frame';
-    var INDETERMINATE = 'e-stop';
-    var LABEL = 'e-label';
-    var RIPPLE = 'e-ripple-container';
-    var RIPPLECHECK = 'e-ripple-check';
-    var RIPPLEINDETERMINATE = 'e-ripple-stop';
-    var RTL = 'e-rtl';
-    var WRAPPER = 'e-checkbox-wrapper';
-    var CheckBox = (function (_super) {
-        __extends(CheckBox, _super);
-        function CheckBox(options, element) {
-            var _this = _super.call(this, options, element) || this;
-            _this.isKeyPressed = false;
-            return _this;
+import { Component, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';
+import { Event, EventHandler } from '@syncfusion/ej2-base';
+import { addClass, detach, getUniqueID, isRippleEnabled, removeClass, rippleEffect } from '@syncfusion/ej2-base';
+import { wrapperInitialize, rippleMouseHandler } from './../common/common';
+var CHECK = 'e-check';
+var DISABLED = 'e-checkbox-disabled';
+var FRAME = 'e-frame';
+var INDETERMINATE = 'e-stop';
+var LABEL = 'e-label';
+var RIPPLE = 'e-ripple-container';
+var RIPPLECHECK = 'e-ripple-check';
+var RIPPLEINDETERMINATE = 'e-ripple-stop';
+var RTL = 'e-rtl';
+var WRAPPER = 'e-checkbox-wrapper';
+/**
+ * The CheckBox is a graphical user interface element that allows you to select one or more options from the choices.
+ * It contains checked, unchecked, and indeterminate states.
+ * ```html
+ * <input type="checkbox" id="checkbox"/>
+ * <script>
+ * var checkboxObj = new CheckBox({ label: "Default" });
+ * checkboxObj.appendTo("#checkbox");
+ * </script>
+ * ```
+ */
+var CheckBox = /** @class */ (function (_super) {
+    __extends(CheckBox, _super);
+    /**
+     * Constructor for creating the widget
+     * @private
+     */
+    function CheckBox(options, element) {
+        var _this = _super.call(this, options, element) || this;
+        _this.isKeyPressed = false;
+        return _this;
+    }
+    CheckBox.prototype.changeState = function (state) {
+        var ariaState;
+        var rippleSpan;
+        var frameSpan = this.getWrapper().getElementsByClassName(FRAME)[0];
+        if (isRippleEnabled) {
+            rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];
         }
-        CheckBox.prototype.changeState = function (state) {
-            var ariaState;
-            var rippleSpan;
-            var frameSpan = this.getWrapper().getElementsByClassName(FRAME)[0];
-            if (ej2_base_3.isRippleEnabled) {
-                rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];
+        if (state === 'check') {
+            frameSpan.classList.remove(INDETERMINATE);
+            frameSpan.classList.add(CHECK);
+            if (rippleSpan) {
+                rippleSpan.classList.remove(RIPPLEINDETERMINATE);
+                rippleSpan.classList.add(RIPPLECHECK);
             }
-            if (state === 'check') {
-                frameSpan.classList.remove(INDETERMINATE);
-                frameSpan.classList.add(CHECK);
-                if (rippleSpan) {
-                    rippleSpan.classList.remove(RIPPLEINDETERMINATE);
-                    rippleSpan.classList.add(RIPPLECHECK);
-                }
-                ariaState = 'true';
-                this.element.checked = true;
+            ariaState = 'true';
+            this.element.checked = true;
+        }
+        else if (state === 'uncheck') {
+            removeClass([frameSpan], [CHECK, INDETERMINATE]);
+            if (rippleSpan) {
+                removeClass([rippleSpan], [RIPPLECHECK, RIPPLEINDETERMINATE]);
             }
-            else if (state === 'uncheck') {
-                ej2_base_3.removeClass([frameSpan], [CHECK, INDETERMINATE]);
-                if (rippleSpan) {
-                    ej2_base_3.removeClass([rippleSpan], [RIPPLECHECK, RIPPLEINDETERMINATE]);
-                }
-                ariaState = 'false';
-                this.element.checked = false;
+            ariaState = 'false';
+            this.element.checked = false;
+        }
+        else {
+            frameSpan.classList.remove(CHECK);
+            frameSpan.classList.add(INDETERMINATE);
+            if (rippleSpan) {
+                rippleSpan.classList.remove(RIPPLECHECK);
+                rippleSpan.classList.add(RIPPLEINDETERMINATE);
             }
-            else {
-                frameSpan.classList.remove(CHECK);
-                frameSpan.classList.add(INDETERMINATE);
-                if (rippleSpan) {
-                    rippleSpan.classList.remove(RIPPLECHECK);
-                    rippleSpan.classList.add(RIPPLEINDETERMINATE);
-                }
-                ariaState = 'mixed';
-                this.element.indeterminate = true;
-            }
-            this.getWrapper().setAttribute('aria-checked', ariaState);
-        };
-        CheckBox.prototype.clickHandler = function (event) {
-            this.focusOutHandler();
+            ariaState = 'mixed';
+            this.element.indeterminate = true;
+        }
+        this.getWrapper().setAttribute('aria-checked', ariaState);
+    };
+    CheckBox.prototype.clickHandler = function (event) {
+        this.focusOutHandler();
+        if (this.indeterminate) {
+            this.changeState(this.checked ? 'check' : 'uncheck');
+            this.indeterminate = false;
+            this.element.indeterminate = false;
+        }
+        else if (this.checked) {
+            this.changeState('uncheck');
+            this.checked = false;
+        }
+        else {
+            this.changeState('check');
+            this.checked = true;
+        }
+        var changeEventArgs = { checked: this.element.checked, event: event };
+        this.trigger('change', changeEventArgs);
+    };
+    /**
+     * Destroys the widget.
+     * @returns void
+     */
+    CheckBox.prototype.destroy = function () {
+        var _this = this;
+        var wrapper = this.getWrapper();
+        _super.prototype.destroy.call(this);
+        if (!this.disabled) {
+            this.unWireEvents();
+        }
+        if (this.tagName === 'INPUT') {
+            wrapper.parentNode.insertBefore(this.element, wrapper);
+            detach(wrapper);
+            this.element.checked = false;
             if (this.indeterminate) {
-                this.changeState(this.checked ? 'check' : 'uncheck');
-                this.indeterminate = false;
                 this.element.indeterminate = false;
             }
-            else if (this.checked) {
-                this.changeState('uncheck');
-                this.checked = false;
+            ['name', 'value', 'disabled'].forEach(function (key) {
+                _this.element.removeAttribute(key);
+            });
+        }
+        else {
+            ['role', 'aria-checked', 'class'].forEach(function (key) {
+                wrapper.removeAttribute(key);
+            });
+            if (this.element.id) {
+                wrapper.setAttribute('id', this.element.id);
             }
+            wrapper.innerHTML = '';
+        }
+    };
+    CheckBox.prototype.focusHandler = function () {
+        if (this.isKeyPressed) {
+            this.getWrapper().classList.add('e-focus');
+        }
+    };
+    CheckBox.prototype.focusOutHandler = function () {
+        this.getWrapper().classList.remove('e-focus');
+    };
+    /**
+     * Gets the module name.
+     * @private
+     */
+    CheckBox.prototype.getModuleName = function () {
+        return 'checkbox';
+    };
+    /**
+     * Gets the properties to be maintained in the persistence state.
+     * @private
+     */
+    CheckBox.prototype.getPersistData = function () {
+        return this.addOnPersist(['checked', 'indeterminate']);
+    };
+    CheckBox.prototype.getWrapper = function () {
+        return this.element.parentElement.parentElement;
+    };
+    CheckBox.prototype.initialize = function () {
+        if (this.name) {
+            this.element.setAttribute('name', this.name);
+        }
+        if (this.value) {
+            this.element.setAttribute('value', this.value);
+        }
+        if (this.checked) {
+            this.changeState('check');
+        }
+        if (this.indeterminate) {
+            this.changeState();
+        }
+        if (this.disabled) {
+            this.setDisabled();
+        }
+    };
+    CheckBox.prototype.initWrapper = function () {
+        var wrapper = this.element.parentElement;
+        if (!wrapper.classList.contains(WRAPPER)) {
+            wrapper = this.createElement('div', {
+                className: WRAPPER, attrs: { 'role': 'checkbox', 'aria-checked': 'false' }
+            });
+            this.element.parentNode.insertBefore(wrapper, this.element);
+        }
+        var label = this.createElement('label', { attrs: { for: this.element.id } });
+        var frameSpan = this.createElement('span', { className: 'e-icons ' + FRAME });
+        if (this.enableRtl) {
+            wrapper.classList.add(RTL);
+        }
+        if (this.cssClass) {
+            addClass([wrapper], this.cssClass.split(' '));
+        }
+        wrapper.appendChild(label);
+        label.appendChild(this.element);
+        label.appendChild(frameSpan);
+        if (isRippleEnabled) {
+            var rippleSpan = this.createElement('span', { className: RIPPLE });
+            if (this.labelPosition === 'Before') {
+                label.appendChild(rippleSpan);
+            }
             else {
-                this.changeState('check');
-                this.checked = true;
+                label.insertBefore(rippleSpan, frameSpan);
             }
-            var changeEventArgs = { checked: this.element.checked, event: event };
-            this.trigger('change', changeEventArgs);
-        };
-        CheckBox.prototype.destroy = function () {
-            var _this = this;
-            var wrapper = this.getWrapper();
-            _super.prototype.destroy.call(this);
-            if (!this.disabled) {
-                this.unWireEvents();
-            }
-            if (this.tagName === 'INPUT') {
-                wrapper.parentNode.insertBefore(this.element, wrapper);
-                ej2_base_3.detach(wrapper);
-                this.element.checked = false;
-                if (this.indeterminate) {
+            rippleEffect(rippleSpan, { duration: 400, isCenterRipple: true });
+        }
+        if (this.label) {
+            this.setText(this.label);
+        }
+    };
+    CheckBox.prototype.keyDownHandler = function () {
+        this.isKeyPressed = true;
+    };
+    CheckBox.prototype.labelMouseHandler = function (e) {
+        var rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];
+        rippleMouseHandler(e, rippleSpan);
+    };
+    CheckBox.prototype.mouseDownHandler = function () {
+        this.isKeyPressed = false;
+    };
+    /**
+     * Called internally if any of the property value changes.
+     * @private
+     */
+    CheckBox.prototype.onPropertyChanged = function (newProp, oldProp) {
+        var wrapper = this.getWrapper();
+        for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
+            var prop = _a[_i];
+            switch (prop) {
+                case 'checked':
+                    this.indeterminate = false;
                     this.element.indeterminate = false;
-                }
-                ['name', 'value', 'disabled'].forEach(function (key) {
-                    _this.element.removeAttribute(key);
-                });
-            }
-            else {
-                ['role', 'aria-checked', 'class'].forEach(function (key) {
-                    wrapper.removeAttribute(key);
-                });
-                if (this.element.id) {
-                    wrapper.setAttribute('id', this.element.id);
-                }
-                wrapper.innerHTML = '';
-            }
-        };
-        CheckBox.prototype.focusHandler = function () {
-            if (this.isKeyPressed) {
-                this.getWrapper().classList.add('e-focus');
-            }
-        };
-        CheckBox.prototype.focusOutHandler = function () {
-            this.getWrapper().classList.remove('e-focus');
-        };
-        CheckBox.prototype.getModuleName = function () {
-            return 'checkbox';
-        };
-        CheckBox.prototype.getPersistData = function () {
-            return this.addOnPersist(['checked', 'indeterminate']);
-        };
-        CheckBox.prototype.getWrapper = function () {
-            return this.element.parentElement.parentElement;
-        };
-        CheckBox.prototype.initialize = function () {
-            if (this.name) {
-                this.element.setAttribute('name', this.name);
-            }
-            if (this.value) {
-                this.element.setAttribute('value', this.value);
-            }
-            if (this.checked) {
-                this.changeState('check');
-            }
-            if (this.indeterminate) {
-                this.changeState();
-            }
-            if (this.disabled) {
-                this.setDisabled();
-            }
-        };
-        CheckBox.prototype.initWrapper = function () {
-            var wrapper = this.element.parentElement;
-            if (!wrapper.classList.contains(WRAPPER)) {
-                wrapper = ej2_base_3.createElement('div', {
-                    className: WRAPPER, attrs: { 'role': 'checkbox', 'aria-checked': 'false' }
-                });
-                this.element.parentNode.insertBefore(wrapper, this.element);
-            }
-            var label = ej2_base_3.createElement('label', { attrs: { for: this.element.id } });
-            var frameSpan = ej2_base_3.createElement('span', { className: 'e-icons ' + FRAME });
-            if (this.enableRtl) {
-                wrapper.classList.add(RTL);
-            }
-            if (this.cssClass) {
-                ej2_base_3.addClass([wrapper], this.cssClass.split(' '));
-            }
-            wrapper.appendChild(label);
-            label.appendChild(this.element);
-            label.appendChild(frameSpan);
-            if (ej2_base_3.isRippleEnabled) {
-                var rippleSpan = ej2_base_3.createElement('span', { className: RIPPLE });
-                if (this.labelPosition === 'Before') {
-                    label.appendChild(rippleSpan);
-                }
-                else {
-                    label.insertBefore(rippleSpan, frameSpan);
-                }
-                ej2_base_3.rippleEffect(rippleSpan, { duration: 400, isCenterRipple: true });
-            }
-            if (this.label) {
-                this.setText(this.label);
-            }
-        };
-        CheckBox.prototype.keyDownHandler = function () {
-            this.isKeyPressed = true;
-        };
-        CheckBox.prototype.labelMouseHandler = function (e) {
-            var rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];
-            common_1.rippleMouseHandler(e, rippleSpan);
-        };
-        CheckBox.prototype.mouseDownHandler = function () {
-            this.isKeyPressed = false;
-        };
-        CheckBox.prototype.onPropertyChanged = function (newProp, oldProp) {
-            var wrapper = this.getWrapper();
-            for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
-                var prop = _a[_i];
-                switch (prop) {
-                    case 'checked':
-                        this.indeterminate = false;
+                    this.changeState(newProp.checked ? 'check' : 'uncheck');
+                    break;
+                case 'indeterminate':
+                    if (newProp.indeterminate) {
+                        this.changeState();
+                    }
+                    else {
                         this.element.indeterminate = false;
-                        this.changeState(newProp.checked ? 'check' : 'uncheck');
-                        break;
-                    case 'indeterminate':
-                        if (newProp.indeterminate) {
-                            this.changeState();
-                        }
-                        else {
-                            this.element.indeterminate = false;
-                            this.changeState(this.checked ? 'check' : 'uncheck');
-                        }
-                        break;
-                    case 'disabled':
-                        if (newProp.disabled) {
-                            this.setDisabled();
-                            this.unWireEvents();
-                        }
-                        else {
-                            this.element.disabled = false;
-                            wrapper.classList.remove(DISABLED);
-                            wrapper.setAttribute('aria-disabled', 'false');
-                            this.wireEvents();
-                        }
-                        break;
-                    case 'cssClass':
-                        if (oldProp.cssClass) {
-                            wrapper.classList.remove(oldProp.cssClass);
-                        }
-                        wrapper.classList.add(newProp.cssClass);
-                        break;
-                    case 'enableRtl':
-                        if (newProp.enableRtl) {
-                            wrapper.classList.add(RTL);
-                        }
-                        else {
-                            wrapper.classList.remove(RTL);
-                        }
-                        break;
-                    case 'label':
-                        this.setText(newProp.label);
-                        break;
-                    case 'labelPosition':
-                        var label = wrapper.getElementsByClassName(LABEL)[0];
-                        var labelWrap = wrapper.getElementsByTagName('label')[0];
-                        ej2_base_3.detach(label);
-                        if (newProp.labelPosition === 'After') {
-                            labelWrap.appendChild(label);
-                        }
-                        else {
-                            labelWrap.insertBefore(label, wrapper.getElementsByClassName(FRAME)[0]);
-                        }
-                        break;
-                    case 'name':
-                        this.element.setAttribute('name', newProp.name);
-                        break;
-                    case 'value':
-                        this.element.setAttribute('value', newProp.value);
-                        break;
-                }
+                        this.changeState(this.checked ? 'check' : 'uncheck');
+                    }
+                    break;
+                case 'disabled':
+                    if (newProp.disabled) {
+                        this.setDisabled();
+                        this.unWireEvents();
+                    }
+                    else {
+                        this.element.disabled = false;
+                        wrapper.classList.remove(DISABLED);
+                        wrapper.setAttribute('aria-disabled', 'false');
+                        this.wireEvents();
+                    }
+                    break;
+                case 'cssClass':
+                    if (oldProp.cssClass) {
+                        wrapper.classList.remove(oldProp.cssClass);
+                    }
+                    wrapper.classList.add(newProp.cssClass);
+                    break;
+                case 'enableRtl':
+                    if (newProp.enableRtl) {
+                        wrapper.classList.add(RTL);
+                    }
+                    else {
+                        wrapper.classList.remove(RTL);
+                    }
+                    break;
+                case 'label':
+                    this.setText(newProp.label);
+                    break;
+                case 'labelPosition':
+                    var label = wrapper.getElementsByClassName(LABEL)[0];
+                    var labelWrap = wrapper.getElementsByTagName('label')[0];
+                    detach(label);
+                    if (newProp.labelPosition === 'After') {
+                        labelWrap.appendChild(label);
+                    }
+                    else {
+                        labelWrap.insertBefore(label, wrapper.getElementsByClassName(FRAME)[0]);
+                    }
+                    break;
+                case 'name':
+                    this.element.setAttribute('name', newProp.name);
+                    break;
+                case 'value':
+                    this.element.setAttribute('value', newProp.value);
+                    break;
             }
-        };
-        CheckBox.prototype.preRender = function () {
-            var element = this.element;
-            this.tagName = this.element.tagName;
-            element = common_1.wrapperInitialize('EJS-CHECKBOX', 'checkbox', element, WRAPPER, 'checkbox');
-            this.element = element;
-            if (this.element.getAttribute('type') !== 'checkbox') {
-                this.element.setAttribute('type', 'checkbox');
+        }
+    };
+    /**
+     * Initialize Angular, React and Unique ID support.
+     * @private
+     */
+    CheckBox.prototype.preRender = function () {
+        var element = this.element;
+        this.tagName = this.element.tagName;
+        element = wrapperInitialize('EJS-CHECKBOX', 'checkbox', element, WRAPPER, 'checkbox');
+        this.element = element;
+        if (this.element.getAttribute('type') !== 'checkbox') {
+            this.element.setAttribute('type', 'checkbox');
+        }
+        if (!this.element.id) {
+            this.element.id = getUniqueID('e-' + this.getModuleName());
+        }
+    };
+    /**
+     * Initialize the control rendering
+     * @private
+     */
+    CheckBox.prototype.render = function () {
+        this.initWrapper();
+        this.initialize();
+        if (!this.disabled) {
+            this.wireEvents();
+        }
+    };
+    CheckBox.prototype.setDisabled = function () {
+        var wrapper = this.getWrapper();
+        this.element.disabled = true;
+        wrapper.classList.add(DISABLED);
+        wrapper.setAttribute('aria-disabled', 'true');
+    };
+    CheckBox.prototype.setText = function (text) {
+        var label = this.getWrapper().getElementsByClassName(LABEL)[0];
+        if (label) {
+            label.textContent = text;
+        }
+        else {
+            label = this.createElement('span', { className: LABEL, innerHTML: text });
+            var labelWrap = this.getWrapper().getElementsByTagName('label')[0];
+            if (this.labelPosition === 'Before') {
+                labelWrap.insertBefore(label, this.getWrapper().getElementsByClassName(FRAME)[0]);
             }
-            if (!this.element.id) {
-                this.element.id = ej2_base_3.getUniqueID('e-' + this.getModuleName());
-            }
-        };
-        CheckBox.prototype.render = function () {
-            this.initWrapper();
-            this.initialize();
-            if (!this.disabled) {
-                this.wireEvents();
-            }
-        };
-        CheckBox.prototype.setDisabled = function () {
-            var wrapper = this.getWrapper();
-            this.element.disabled = true;
-            wrapper.classList.add(DISABLED);
-            wrapper.setAttribute('aria-disabled', 'true');
-        };
-        CheckBox.prototype.setText = function (text) {
-            var label = this.getWrapper().getElementsByClassName(LABEL)[0];
-            if (label) {
-                label.textContent = text;
-            }
             else {
-                label = ej2_base_3.createElement('span', { className: LABEL, innerHTML: text });
-                var labelWrap = this.getWrapper().getElementsByTagName('label')[0];
-                if (this.labelPosition === 'Before') {
-                    labelWrap.insertBefore(label, this.getWrapper().getElementsByClassName(FRAME)[0]);
-                }
-                else {
-                    labelWrap.appendChild(label);
-                }
+                labelWrap.appendChild(label);
             }
-        };
-        CheckBox.prototype.unWireEvents = function () {
-            var wrapper = this.getWrapper();
-            ej2_base_2.EventHandler.remove(this.element, 'click', this.clickHandler);
-            ej2_base_2.EventHandler.remove(document, 'keydown', this.keyDownHandler);
-            ej2_base_2.EventHandler.remove(wrapper, 'mousedown', this.mouseDownHandler);
-            ej2_base_2.EventHandler.remove(this.element, 'focus', this.focusHandler);
-            ej2_base_2.EventHandler.remove(this.element, 'focusout', this.focusOutHandler);
-            var label = wrapper.getElementsByTagName('label')[0];
-            ej2_base_2.EventHandler.remove(label, 'mousedown', this.labelMouseHandler);
-            ej2_base_2.EventHandler.remove(label, 'mouseup', this.labelMouseHandler);
-        };
-        CheckBox.prototype.wireEvents = function () {
-            var wrapper = this.getWrapper();
-            ej2_base_2.EventHandler.add(this.element, 'click', this.clickHandler, this);
-            ej2_base_2.EventHandler.add(document, 'keydown', this.keyDownHandler, this);
-            ej2_base_2.EventHandler.add(wrapper, 'mousedown', this.mouseDownHandler, this);
-            ej2_base_2.EventHandler.add(this.element, 'focus', this.focusHandler, this);
-            ej2_base_2.EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);
-            var label = wrapper.getElementsByTagName('label')[0];
-            ej2_base_2.EventHandler.add(label, 'mousedown', this.labelMouseHandler, this);
-            ej2_base_2.EventHandler.add(label, 'mouseup', this.labelMouseHandler, this);
-        };
-        __decorate([
-            ej2_base_2.Event()
-        ], CheckBox.prototype, "change", void 0);
-        __decorate([
-            ej2_base_1.Property(false)
-        ], CheckBox.prototype, "checked", void 0);
-        __decorate([
-            ej2_base_1.Property('')
-        ], CheckBox.prototype, "cssClass", void 0);
-        __decorate([
-            ej2_base_1.Property(false)
-        ], CheckBox.prototype, "disabled", void 0);
-        __decorate([
-            ej2_base_1.Property(false)
-        ], CheckBox.prototype, "indeterminate", void 0);
-        __decorate([
-            ej2_base_1.Property('')
-        ], CheckBox.prototype, "label", void 0);
-        __decorate([
-            ej2_base_1.Property('After')
-        ], CheckBox.prototype, "labelPosition", void 0);
-        __decorate([
-            ej2_base_1.Property('')
-        ], CheckBox.prototype, "name", void 0);
-        __decorate([
-            ej2_base_1.Property('')
-        ], CheckBox.prototype, "value", void 0);
-        CheckBox = __decorate([
-            ej2_base_1.NotifyPropertyChanges
-        ], CheckBox);
-        return CheckBox;
-    }(ej2_base_1.Component));
-    exports.CheckBox = CheckBox;
-});
+        }
+    };
+    CheckBox.prototype.unWireEvents = function () {
+        var wrapper = this.getWrapper();
+        EventHandler.remove(this.element, 'click', this.clickHandler);
+        EventHandler.remove(document, 'keydown', this.keyDownHandler);
+        EventHandler.remove(wrapper, 'mousedown', this.mouseDownHandler);
+        EventHandler.remove(this.element, 'focus', this.focusHandler);
+        EventHandler.remove(this.element, 'focusout', this.focusOutHandler);
+        var label = wrapper.getElementsByTagName('label')[0];
+        EventHandler.remove(label, 'mousedown', this.labelMouseHandler);
+        EventHandler.remove(label, 'mouseup', this.labelMouseHandler);
+    };
+    CheckBox.prototype.wireEvents = function () {
+        var wrapper = this.getWrapper();
+        EventHandler.add(this.element, 'click', this.clickHandler, this);
+        EventHandler.add(document, 'keydown', this.keyDownHandler, this);
+        EventHandler.add(wrapper, 'mousedown', this.mouseDownHandler, this);
+        EventHandler.add(this.element, 'focus', this.focusHandler, this);
+        EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);
+        var label = wrapper.getElementsByTagName('label')[0];
+        EventHandler.add(label, 'mousedown', this.labelMouseHandler, this);
+        EventHandler.add(label, 'mouseup', this.labelMouseHandler, this);
+    };
+    __decorate([
+        Event()
+    ], CheckBox.prototype, "change", void 0);
+    __decorate([
+        Property(false)
+    ], CheckBox.prototype, "checked", void 0);
+    __decorate([
+        Property('')
+    ], CheckBox.prototype, "cssClass", void 0);
+    __decorate([
+        Property(false)
+    ], CheckBox.prototype, "disabled", void 0);
+    __decorate([
+        Property(false)
+    ], CheckBox.prototype, "indeterminate", void 0);
+    __decorate([
+        Property('')
+    ], CheckBox.prototype, "label", void 0);
+    __decorate([
+        Property('After')
+    ], CheckBox.prototype, "labelPosition", void 0);
+    __decorate([
+        Property('')
+    ], CheckBox.prototype, "name", void 0);
+    __decorate([
+        Property('')
+    ], CheckBox.prototype, "value", void 0);
+    CheckBox = __decorate([
+        NotifyPropertyChanges
+    ], CheckBox);
+    return CheckBox;
+}(Component));
+export { CheckBox };

src/check-box/index.js

@@ -1,8 +0,4 @@
-define(["require", "exports", "./check-box"], function (require, exports, check_box_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(check_box_1);
-});
+/**
+ * CheckBox modules
+ */
+export * from './check-box';

src/common/common.js

@@ -1,105 +0,109 @@
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1, ej2_base_2) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    function wrapperInitialize(tag, type, element, WRAPPER, role) {
-        if (element.tagName === tag) {
-            var ejInstance = ej2_base_2.getValue('ej2_instances', element);
-            var input = ej2_base_1.createElement('input', { attrs: { 'type': type } });
-            var props = ['change', 'cssClass', 'label', 'labelPosition'];
-            var wrapper = ej2_base_1.createElement(tag, {
-                className: WRAPPER, attrs: { 'role': role, 'aria-checked': 'false' }
-            });
-            for (var index = 0, len = element.attributes.length; index < len; index++) {
-                if (props.indexOf(element.attributes[index].nodeName) === -1) {
-                    input.setAttribute(element.attributes[index].nodeName, element.attributes[index].nodeValue);
-                }
+import { createElement, detach, getUniqueID, rippleEffect, setValue } from '@syncfusion/ej2-base';
+import { getValue, addClass } from '@syncfusion/ej2-base';
+/**
+ * Initialize wrapper element for angular.
+ * @private
+ */
+export function wrapperInitialize(tag, type, element, WRAPPER, role) {
+    if (element.tagName === tag) {
+        var ejInstance = getValue('ej2_instances', element);
+        var input = createElement('input', { attrs: { 'type': type } });
+        var props = ['change', 'cssClass', 'label', 'labelPosition'];
+        var wrapper = createElement(tag, {
+            className: WRAPPER, attrs: { 'role': role, 'aria-checked': 'false' }
+        });
+        for (var index = 0, len = element.attributes.length; index < len; index++) {
+            if (props.indexOf(element.attributes[index].nodeName) === -1) {
+                input.setAttribute(element.attributes[index].nodeName, element.attributes[index].nodeValue);
             }
-            element.parentNode.insertBefore(input, element);
-            ej2_base_1.detach(element);
-            element = input;
-            element.parentNode.insertBefore(wrapper, element);
-            wrapper.appendChild(element);
-            ej2_base_1.setValue('ej2_instances', ejInstance, element);
         }
-        return element;
+        element.parentNode.insertBefore(input, element);
+        detach(element);
+        element = input;
+        element.parentNode.insertBefore(wrapper, element);
+        wrapper.appendChild(element);
+        setValue('ej2_instances', ejInstance, element);
     }
-    exports.wrapperInitialize = wrapperInitialize;
-    function getTextNode(element) {
-        var node;
-        var childnode = element.childNodes;
-        for (var i = 0; i < childnode.length; i++) {
-            node = childnode[i];
-            if (node.nodeType === 3) {
-                return node;
-            }
+    return element;
+}
+export function getTextNode(element) {
+    var node;
+    var childnode = element.childNodes;
+    for (var i = 0; i < childnode.length; i++) {
+        node = childnode[i];
+        if (node.nodeType === 3) {
+            return node;
         }
-        return null;
     }
-    exports.getTextNode = getTextNode;
-    function destroy(ejInst, wrapper, tagName) {
-        if (tagName === 'INPUT') {
-            wrapper.parentNode.insertBefore(ejInst.element, wrapper);
-            ej2_base_1.detach(wrapper);
-            ejInst.element.checked = false;
-            ['name', 'value', 'disabled'].forEach(function (key) {
-                ejInst.element.removeAttribute(key);
-            });
-        }
-        else {
-            if (ejInst.element.id) {
-                wrapper.setAttribute('id', ejInst.element.id);
-            }
-            ['role', 'aria-checked', 'class'].forEach(function (key) {
-                wrapper.removeAttribute(key);
-            });
-            wrapper.innerHTML = '';
-        }
+    return null;
+}
+/**
+ * Destroy the button components.
+ * @private
+ */
+export function destroy(ejInst, wrapper, tagName) {
+    if (tagName === 'INPUT') {
+        wrapper.parentNode.insertBefore(ejInst.element, wrapper);
+        detach(wrapper);
+        ejInst.element.checked = false;
+        ['name', 'value', 'disabled'].forEach(function (key) {
+            ejInst.element.removeAttribute(key);
+        });
     }
-    exports.destroy = destroy;
-    function preRender(proxy, control, wrapper, element, moduleName) {
-        element = wrapperInitialize(control, 'checkbox', element, wrapper, moduleName);
-        proxy.element = element;
-        if (proxy.element.getAttribute('type') !== 'checkbox') {
-            proxy.element.setAttribute('type', 'checkbox');
+    else {
+        if (ejInst.element.id) {
+            wrapper.setAttribute('id', ejInst.element.id);
         }
-        if (!proxy.element.id) {
-            proxy.element.id = ej2_base_1.getUniqueID('e-' + moduleName);
-        }
+        ['role', 'aria-checked', 'class'].forEach(function (key) {
+            wrapper.removeAttribute(key);
+        });
+        wrapper.innerHTML = '';
     }
-    exports.preRender = preRender;
-    function createCheckBox(enableRipple, options) {
-        if (enableRipple === void 0) { enableRipple = false; }
-        if (options === void 0) { options = {}; }
-        var wrapper = ej2_base_1.createElement('div', { className: 'e-checkbox-wrapper e-css' });
-        if (options.cssClass) {
-            ej2_base_2.addClass([wrapper], options.cssClass.split(' '));
-        }
-        if (options.enableRtl) {
-            wrapper.classList.add('e-rtl');
-        }
-        if (enableRipple) {
-            var rippleSpan = ej2_base_1.createElement('span', { className: 'e-ripple-container' });
-            ej2_base_1.rippleEffect(rippleSpan, { isCenterRipple: true, duration: 400 });
-            wrapper.appendChild(rippleSpan);
-        }
-        var frameSpan = ej2_base_1.createElement('span', { className: 'e-frame e-icons' });
-        if (options.checked) {
-            frameSpan.classList.add('e-check');
-        }
-        wrapper.appendChild(frameSpan);
-        if (options.label) {
-            var labelSpan = ej2_base_1.createElement('span', { className: 'e-label', innerHTML: options.label });
-            wrapper.appendChild(labelSpan);
-        }
-        return wrapper;
+}
+export function preRender(proxy, control, wrapper, element, moduleName) {
+    element = wrapperInitialize(control, 'checkbox', element, wrapper, moduleName);
+    proxy.element = element;
+    if (proxy.element.getAttribute('type') !== 'checkbox') {
+        proxy.element.setAttribute('type', 'checkbox');
     }
-    exports.createCheckBox = createCheckBox;
-    function rippleMouseHandler(e, rippleSpan) {
-        if (rippleSpan) {
-            var event_1 = document.createEvent('MouseEvents');
-            event_1.initEvent(e.type, false, true);
-            rippleSpan.dispatchEvent(event_1);
-        }
+    if (!proxy.element.id) {
+        proxy.element.id = getUniqueID('e-' + moduleName);
     }
-    exports.rippleMouseHandler = rippleMouseHandler;
-});
+}
+/**
+ * Creates CheckBox component UI with theming and ripple support.
+ * @private
+ */
+export function createCheckBox(enableRipple, options) {
+    if (enableRipple === void 0) { enableRipple = false; }
+    if (options === void 0) { options = {}; }
+    var wrapper = createElement('div', { className: 'e-checkbox-wrapper e-css' });
+    if (options.cssClass) {
+        addClass([wrapper], options.cssClass.split(' '));
+    }
+    if (options.enableRtl) {
+        wrapper.classList.add('e-rtl');
+    }
+    if (enableRipple) {
+        var rippleSpan = createElement('span', { className: 'e-ripple-container' });
+        rippleEffect(rippleSpan, { isCenterRipple: true, duration: 400 });
+        wrapper.appendChild(rippleSpan);
+    }
+    var frameSpan = createElement('span', { className: 'e-frame e-icons' });
+    if (options.checked) {
+        frameSpan.classList.add('e-check');
+    }
+    wrapper.appendChild(frameSpan);
+    if (options.label) {
+        var labelSpan = createElement('span', { className: 'e-label', innerHTML: options.label });
+        wrapper.appendChild(labelSpan);
+    }
+    return wrapper;
+}
+export function rippleMouseHandler(e, rippleSpan) {
+    if (rippleSpan) {
+        var event_1 = document.createEvent('MouseEvents');
+        event_1.initEvent(e.type, false, true);
+        rippleSpan.dispatchEvent(event_1);
+    }
+}

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';

src/index.js

@@ -1,12 +0,8 @@
-define(["require", "exports", "./common/index", "./button/index", "./check-box/index", "./radio-button/index", "./switch/index"], function (require, exports, index_1, index_2, index_3, index_4, index_5) {
-    "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);
-    __export(index_5);
-});
+/**
+ * Button all modules
+ */
+export * from './common/index';
+export * from './button/index';
+export * from './check-box/index';
+export * from './radio-button/index';
+export * from './switch/index';

src/radio-button/index.js

@@ -1,8 +0,4 @@
-define(["require", "exports", "./radio-button"], function (require, exports, radio_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(radio_button_1);
-});
+/**
+ * RadioButton modules
+ */
+export * from './radio-button';

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

@@ -1,2 +0,2 @@
-import { Component, INotifyPropertyChanged, rippleEffect, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';import { addClass, createElement, getInstance, getUniqueID, isRippleEnabled, removeClass } from '@syncfusion/ej2-base';import { BaseEventArgs, detach, EmitType, Event, EventHandler } from '@syncfusion/ej2-base';import { wrapperInitialize, rippleMouseHandler } from './../common/common';
+import { Component, INotifyPropertyChanged, rippleEffect, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';import { addClass, getInstance, getUniqueID, isRippleEnabled, removeClass } from '@syncfusion/ej2-base';import { BaseEventArgs, detach, EmitType, Event, EventHandler } from '@syncfusion/ej2-base';import { wrapperInitialize, rippleMouseHandler } from './../common/common';
 import {ChangeArgs,RadioLabelPosition} from "./radio-button";
@@ -3,0 +3,0 @@ import {ComponentModel} from '@syncfusion/ej2-base';

src/radio-button/radio-button.js

@@ -17,279 +17,314 @@ var __extends = (this && this.__extends) || (function () {
 };
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "./../common/common"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, common_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var LABEL = 'e-label';
-    var RIPPLE = 'e-ripple-container';
-    var RTL = 'e-rtl';
-    var WRAPPER = 'e-radio-wrapper';
-    var RadioButton = (function (_super) {
-        __extends(RadioButton, _super);
-        function RadioButton(options, element) {
-            var _this = _super.call(this, options, element) || this;
-            _this.isKeyPressed = false;
-            return _this;
+import { Component, rippleEffect, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';
+import { addClass, getInstance, getUniqueID, isRippleEnabled, removeClass } from '@syncfusion/ej2-base';
+import { detach, Event, EventHandler } from '@syncfusion/ej2-base';
+import { wrapperInitialize, rippleMouseHandler } from './../common/common';
+var LABEL = 'e-label';
+var RIPPLE = 'e-ripple-container';
+var RTL = 'e-rtl';
+var WRAPPER = 'e-radio-wrapper';
+/**
+ * The RadioButton is a graphical user interface element that allows you to select one option from the choices.
+ * It contains checked and unchecked states.
+ * ```html
+ * <input type="radio" id="radio"/>
+ * <script>
+ * var radioObj = new RadioButton({ label: "Default" });
+ * radioObj.appendTo("#radio");
+ * </script>
+ * ```
+ */
+var RadioButton = /** @class */ (function (_super) {
+    __extends(RadioButton, _super);
+    /**
+     * Constructor for creating the widget
+     * @private
+     */
+    function RadioButton(options, element) {
+        var _this = _super.call(this, options, element) || this;
+        _this.isKeyPressed = false;
+        return _this;
+    }
+    RadioButton_1 = RadioButton;
+    RadioButton.prototype.changeHandler = function (event) {
+        this.checked = true;
+        this.dataBind();
+        var changeEventArgs = { value: this.value, event: event };
+        this.trigger('change', changeEventArgs);
+    };
+    RadioButton.prototype.updateChange = function (state) {
+        var input;
+        var name = this.element.getAttribute('name');
+        var radioGrp = document.querySelectorAll('input.e-radio[name="' + name + '"]');
+        for (var i = 0; i < radioGrp.length; i++) {
+            input = radioGrp[i];
+            if (input !== this.element) {
+                getInstance(input, RadioButton_1).checked = false;
+            }
         }
-        RadioButton_1 = RadioButton;
-        RadioButton.prototype.changeHandler = function (event) {
-            this.checked = true;
-            this.dataBind();
-            var changeEventArgs = { value: this.value, event: event };
-            this.trigger('change', changeEventArgs);
-        };
-        RadioButton.prototype.updateChange = function (state) {
-            var input;
-            var name = this.element.getAttribute('name');
-            var radioGrp = document.querySelectorAll('input.e-radio[name="' + name + '"]');
-            for (var i = 0; i < radioGrp.length; i++) {
-                input = radioGrp[i];
-                if (input !== this.element) {
-                    ej2_base_2.getInstance(input, RadioButton_1).checked = false;
-                }
+    };
+    /**
+     * Destroys the widget.
+     * @returns void
+     */
+    RadioButton.prototype.destroy = function () {
+        var _this = this;
+        var radioWrap = this.element.parentElement;
+        _super.prototype.destroy.call(this);
+        if (!this.disabled) {
+            this.unWireEvents();
+        }
+        if (this.tagName === 'INPUT') {
+            radioWrap.parentNode.insertBefore(this.element, radioWrap);
+            detach(radioWrap);
+            this.element.checked = false;
+            ['name', 'value', 'disabled'].forEach(function (key) {
+                _this.element.removeAttribute(key);
+            });
+        }
+        else {
+            ['role', 'aria-checked', 'class'].forEach(function (key) {
+                radioWrap.removeAttribute(key);
+            });
+            if (this.element.id) {
+                radioWrap.setAttribute('id', this.element.id);
             }
-        };
-        RadioButton.prototype.destroy = function () {
-            var _this = this;
-            var radioWrap = this.element.parentElement;
-            _super.prototype.destroy.call(this);
-            if (!this.disabled) {
-                this.unWireEvents();
+            radioWrap.innerHTML = '';
+        }
+    };
+    RadioButton.prototype.focusHandler = function () {
+        if (this.isKeyPressed) {
+            this.getLabel().classList.add('e-focus');
+        }
+    };
+    RadioButton.prototype.focusOutHandler = function () {
+        this.getLabel().classList.remove('e-focus');
+    };
+    RadioButton.prototype.getModuleName = function () {
+        return 'radio';
+    };
+    /**
+     * Gets the properties to be maintained in the persistence state.
+     * @private
+     */
+    RadioButton.prototype.getPersistData = function () {
+        return this.addOnPersist(['checked']);
+    };
+    RadioButton.prototype.getLabel = function () {
+        return this.element.nextElementSibling;
+    };
+    RadioButton.prototype.initialize = function () {
+        this.initWrapper();
+        if (this.name) {
+            this.element.setAttribute('name', this.name);
+        }
+        if (this.value) {
+            this.element.setAttribute('value', this.value);
+        }
+        if (this.checked) {
+            this.element.checked = true;
+        }
+        if (this.disabled) {
+            this.setDisabled();
+        }
+    };
+    RadioButton.prototype.initWrapper = function () {
+        var rippleSpan;
+        var wrapper = this.element.parentElement;
+        if (!wrapper.classList.contains(WRAPPER)) {
+            wrapper = this.createElement('div', { className: WRAPPER });
+            this.element.parentNode.insertBefore(wrapper, this.element);
+        }
+        var label = this.createElement('label', { attrs: { for: this.element.id } });
+        wrapper.appendChild(this.element);
+        wrapper.appendChild(label);
+        if (isRippleEnabled) {
+            rippleSpan = this.createElement('span', { className: (RIPPLE) });
+            label.appendChild(rippleSpan);
+            rippleEffect(rippleSpan, {
+                duration: 400,
+                isCenterRipple: true
+            });
+        }
+        if (this.enableRtl) {
+            label.classList.add(RTL);
+        }
+        if (this.cssClass) {
+            addClass([label], this.cssClass.split(' '));
+        }
+        if (this.label) {
+            this.setText(this.label);
+        }
+    };
+    RadioButton.prototype.keyDownHandler = function () {
+        this.isKeyPressed = true;
+    };
+    RadioButton.prototype.labelRippleHandler = function (e) {
+        var ripple = this.getLabel().getElementsByClassName(RIPPLE)[0];
+        rippleMouseHandler(e, ripple);
+    };
+    RadioButton.prototype.mouseDownHandler = function () {
+        this.isKeyPressed = false;
+    };
+    /**
+     * Called internally if any of the property value changes.
+     * @private
+     */
+    RadioButton.prototype.onPropertyChanged = function (newProp, oldProp) {
+        var label = this.getLabel();
+        for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
+            var prop = _a[_i];
+            switch (prop) {
+                case 'checked':
+                    if (newProp.checked) {
+                        this.updateChange(newProp.checked);
+                    }
+                    this.element.checked = newProp.checked;
+                    break;
+                case 'disabled':
+                    if (newProp.disabled) {
+                        this.setDisabled();
+                        this.unWireEvents();
+                    }
+                    else {
+                        this.element.disabled = false;
+                        this.wireEvents();
+                    }
+                    break;
+                case 'cssClass':
+                    if (oldProp.cssClass) {
+                        removeClass([label], oldProp.cssClass.split(' '));
+                    }
+                    addClass([label], newProp.cssClass.split(' '));
+                    break;
+                case 'enableRtl':
+                    if (newProp.enableRtl) {
+                        label.classList.add(RTL);
+                    }
+                    else {
+                        label.classList.remove(RTL);
+                    }
+                    break;
+                case 'label':
+                    this.setText(newProp.label);
+                    break;
+                case 'labelPosition':
+                    if (newProp.labelPosition === 'Before') {
+                        label.classList.add('e-right');
+                    }
+                    else {
+                        label.classList.remove('e-right');
+                    }
+                    break;
+                case 'name':
+                    this.element.setAttribute('name', newProp.name);
+                    break;
+                case 'value':
+                    this.element.setAttribute('value', newProp.value);
+                    break;
             }
-            if (this.tagName === 'INPUT') {
-                radioWrap.parentNode.insertBefore(this.element, radioWrap);
-                ej2_base_3.detach(radioWrap);
-                this.element.checked = false;
-                ['name', 'value', 'disabled'].forEach(function (key) {
-                    _this.element.removeAttribute(key);
-                });
-            }
-            else {
-                ['role', 'aria-checked', 'class'].forEach(function (key) {
-                    radioWrap.removeAttribute(key);
-                });
-                if (this.element.id) {
-                    radioWrap.setAttribute('id', this.element.id);
-                }
-                radioWrap.innerHTML = '';
-            }
-        };
-        RadioButton.prototype.focusHandler = function () {
-            if (this.isKeyPressed) {
-                this.getLabel().classList.add('e-focus');
-            }
-        };
-        RadioButton.prototype.focusOutHandler = function () {
-            this.getLabel().classList.remove('e-focus');
-        };
-        RadioButton.prototype.getModuleName = function () {
-            return 'radio';
-        };
-        RadioButton.prototype.getPersistData = function () {
-            return this.addOnPersist(['checked']);
-        };
-        RadioButton.prototype.getLabel = function () {
-            return this.element.nextElementSibling;
-        };
-        RadioButton.prototype.initialize = function () {
-            this.initWrapper();
-            if (this.name) {
-                this.element.setAttribute('name', this.name);
-            }
-            if (this.value) {
-                this.element.setAttribute('value', this.value);
-            }
-            if (this.checked) {
-                this.element.checked = true;
-            }
-            if (this.disabled) {
-                this.setDisabled();
-            }
-        };
-        RadioButton.prototype.initWrapper = function () {
-            var rippleSpan;
-            var wrapper = this.element.parentElement;
-            if (!wrapper.classList.contains(WRAPPER)) {
-                wrapper = ej2_base_2.createElement('div', { className: WRAPPER });
-                this.element.parentNode.insertBefore(wrapper, this.element);
-            }
-            var label = ej2_base_2.createElement('label', { attrs: { for: this.element.id } });
-            wrapper.appendChild(this.element);
-            wrapper.appendChild(label);
-            if (ej2_base_2.isRippleEnabled) {
-                rippleSpan = ej2_base_2.createElement('span', { className: (RIPPLE) });
-                label.appendChild(rippleSpan);
-                ej2_base_1.rippleEffect(rippleSpan, {
-                    duration: 400,
-                    isCenterRipple: true
-                });
-            }
-            if (this.enableRtl) {
-                label.classList.add(RTL);
-            }
-            if (this.cssClass) {
-                ej2_base_2.addClass([label], this.cssClass.split(' '));
-            }
-            if (this.label) {
-                this.setText(this.label);
-            }
-        };
-        RadioButton.prototype.keyDownHandler = function () {
-            this.isKeyPressed = true;
-        };
-        RadioButton.prototype.labelRippleHandler = function (e) {
-            var ripple = this.getLabel().getElementsByClassName(RIPPLE)[0];
-            common_1.rippleMouseHandler(e, ripple);
-        };
-        RadioButton.prototype.mouseDownHandler = function () {
-            this.isKeyPressed = false;
-        };
-        RadioButton.prototype.onPropertyChanged = function (newProp, oldProp) {
-            var label = this.getLabel();
-            for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
-                var prop = _a[_i];
-                switch (prop) {
-                    case 'checked':
-                        if (newProp.checked) {
-                            this.updateChange(newProp.checked);
-                        }
-                        this.element.checked = newProp.checked;
-                        break;
-                    case 'disabled':
-                        if (newProp.disabled) {
-                            this.setDisabled();
-                            this.unWireEvents();
-                        }
-                        else {
-                            this.element.disabled = false;
-                            this.wireEvents();
-                        }
-                        break;
-                    case 'cssClass':
-                        if (oldProp.cssClass) {
-                            ej2_base_2.removeClass([label], oldProp.cssClass.split(' '));
-                        }
-                        ej2_base_2.addClass([label], newProp.cssClass.split(' '));
-                        break;
-                    case 'enableRtl':
-                        if (newProp.enableRtl) {
-                            label.classList.add(RTL);
-                        }
-                        else {
-                            label.classList.remove(RTL);
-                        }
-                        break;
-                    case 'label':
-                        this.setText(newProp.label);
-                        break;
-                    case 'labelPosition':
-                        if (newProp.labelPosition === 'Before') {
-                            label.classList.add('e-right');
-                        }
-                        else {
-                            label.classList.remove('e-right');
-                        }
-                        break;
-                    case 'name':
-                        this.element.setAttribute('name', newProp.name);
-                        break;
-                    case 'value':
-                        this.element.setAttribute('value', newProp.value);
-                        break;
-                }
-            }
-        };
-        RadioButton.prototype.preRender = function () {
-            var element = this.element;
-            this.tagName = this.element.tagName;
-            element = common_1.wrapperInitialize('EJS-RADIOBUTTON', 'radio', element, WRAPPER, 'radio');
-            this.element = element;
-            if (this.element.getAttribute('type') !== 'radio') {
-                this.element.setAttribute('type', 'radio');
-            }
-            if (!this.element.id) {
-                this.element.id = ej2_base_2.getUniqueID('e-' + this.getModuleName());
-            }
-        };
-        RadioButton.prototype.render = function () {
-            this.initialize();
-            if (!this.disabled) {
-                this.wireEvents();
-            }
-        };
-        RadioButton.prototype.setDisabled = function () {
-            this.element.disabled = true;
-        };
-        RadioButton.prototype.setText = function (text) {
-            var label = this.getLabel();
-            var textLabel = label.getElementsByClassName(LABEL)[0];
-            if (textLabel) {
-                textLabel.textContent = text;
-            }
-            else {
-                textLabel = ej2_base_2.createElement('span', { className: LABEL, innerHTML: text });
-                label.appendChild(textLabel);
-            }
-            if (this.labelPosition === 'Before') {
-                this.getLabel().classList.add('e-right');
-            }
-            else {
-                this.getLabel().classList.remove('e-right');
-            }
-        };
-        RadioButton.prototype.unWireEvents = function () {
-            var label = this.getLabel();
-            ej2_base_3.EventHandler.remove(this.element, 'change', this.changeHandler);
-            ej2_base_3.EventHandler.remove(document, 'keydown', this.keyDownHandler);
-            ej2_base_3.EventHandler.remove(label, 'mousedown', this.mouseDownHandler);
-            ej2_base_3.EventHandler.remove(this.element, 'focus', this.focusHandler);
-            ej2_base_3.EventHandler.remove(this.element, 'focusout', this.focusOutHandler);
-            var rippleLabel = label.getElementsByClassName(LABEL)[0];
-            if (rippleLabel) {
-                ej2_base_3.EventHandler.remove(rippleLabel, 'mousedown', this.labelRippleHandler);
-                ej2_base_3.EventHandler.remove(rippleLabel, 'mouseup', this.labelRippleHandler);
-            }
-        };
-        RadioButton.prototype.wireEvents = function () {
-            var label = this.getLabel();
-            ej2_base_3.EventHandler.add(this.element, 'change', this.changeHandler, this);
-            ej2_base_3.EventHandler.add(document, 'keydown', this.keyDownHandler, this);
-            ej2_base_3.EventHandler.add(label, 'mousedown', this.mouseDownHandler, this);
-            ej2_base_3.EventHandler.add(this.element, 'focus', this.focusHandler, this);
-            ej2_base_3.EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);
-            var rippleLabel = label.getElementsByClassName(LABEL)[0];
-            if (rippleLabel) {
-                ej2_base_3.EventHandler.add(rippleLabel, 'mousedown', this.labelRippleHandler, this);
-                ej2_base_3.EventHandler.add(rippleLabel, 'mouseup', this.labelRippleHandler, this);
-            }
-        };
-        __decorate([
-            ej2_base_3.Event()
-        ], RadioButton.prototype, "change", void 0);
-        __decorate([
-            ej2_base_1.Property(false)
-        ], RadioButton.prototype, "checked", void 0);
-        __decorate([
-            ej2_base_1.Property('')
-        ], RadioButton.prototype, "cssClass", void 0);
-        __decorate([
-            ej2_base_1.Property(false)
-        ], RadioButton.prototype, "disabled", void 0);
-        __decorate([
-            ej2_base_1.Property('')
-        ], RadioButton.prototype, "label", void 0);
-        __decorate([
-            ej2_base_1.Property('After')
-        ], RadioButton.prototype, "labelPosition", void 0);
-        __decorate([
-            ej2_base_1.Property('')
-        ], RadioButton.prototype, "name", void 0);
-        __decorate([
-            ej2_base_1.Property('')
-        ], RadioButton.prototype, "value", void 0);
-        RadioButton = RadioButton_1 = __decorate([
-            ej2_base_1.NotifyPropertyChanges
-        ], RadioButton);
-        return RadioButton;
-        var RadioButton_1;
-    }(ej2_base_1.Component));
-    exports.RadioButton = RadioButton;
-});
+        }
+    };
+    /**
+     * Initialize checked Property, Angular and React and Unique ID support.
+     * @private
+     */
+    RadioButton.prototype.preRender = function () {
+        var element = this.element;
+        this.tagName = this.element.tagName;
+        element = wrapperInitialize('EJS-RADIOBUTTON', 'radio', element, WRAPPER, 'radio');
+        this.element = element;
+        if (this.element.getAttribute('type') !== 'radio') {
+            this.element.setAttribute('type', 'radio');
+        }
+        if (!this.element.id) {
+            this.element.id = getUniqueID('e-' + this.getModuleName());
+        }
+    };
+    /**
+     * Initialize the control rendering
+     * @private
+     */
+    RadioButton.prototype.render = function () {
+        this.initialize();
+        if (!this.disabled) {
+            this.wireEvents();
+        }
+    };
+    RadioButton.prototype.setDisabled = function () {
+        this.element.disabled = true;
+    };
+    RadioButton.prototype.setText = function (text) {
+        var label = this.getLabel();
+        var textLabel = label.getElementsByClassName(LABEL)[0];
+        if (textLabel) {
+            textLabel.textContent = text;
+        }
+        else {
+            textLabel = this.createElement('span', { className: LABEL, innerHTML: text });
+            label.appendChild(textLabel);
+        }
+        if (this.labelPosition === 'Before') {
+            this.getLabel().classList.add('e-right');
+        }
+        else {
+            this.getLabel().classList.remove('e-right');
+        }
+    };
+    RadioButton.prototype.unWireEvents = function () {
+        var label = this.getLabel();
+        EventHandler.remove(this.element, 'change', this.changeHandler);
+        EventHandler.remove(document, 'keydown', this.keyDownHandler);
+        EventHandler.remove(label, 'mousedown', this.mouseDownHandler);
+        EventHandler.remove(this.element, 'focus', this.focusHandler);
+        EventHandler.remove(this.element, 'focusout', this.focusOutHandler);
+        var rippleLabel = label.getElementsByClassName(LABEL)[0];
+        if (rippleLabel) {
+            EventHandler.remove(rippleLabel, 'mousedown', this.labelRippleHandler);
+            EventHandler.remove(rippleLabel, 'mouseup', this.labelRippleHandler);
+        }
+    };
+    RadioButton.prototype.wireEvents = function () {
+        var label = this.getLabel();
+        EventHandler.add(this.element, 'change', this.changeHandler, this);
+        EventHandler.add(document, 'keydown', this.keyDownHandler, this);
+        EventHandler.add(label, 'mousedown', this.mouseDownHandler, this);
+        EventHandler.add(this.element, 'focus', this.focusHandler, this);
+        EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);
+        var rippleLabel = label.getElementsByClassName(LABEL)[0];
+        if (rippleLabel) {
+            EventHandler.add(rippleLabel, 'mousedown', this.labelRippleHandler, this);
+            EventHandler.add(rippleLabel, 'mouseup', this.labelRippleHandler, this);
+        }
+    };
+    __decorate([
+        Event()
+    ], RadioButton.prototype, "change", void 0);
+    __decorate([
+        Property(false)
+    ], RadioButton.prototype, "checked", void 0);
+    __decorate([
+        Property('')
+    ], RadioButton.prototype, "cssClass", void 0);
+    __decorate([
+        Property(false)
+    ], RadioButton.prototype, "disabled", void 0);
+    __decorate([
+        Property('')
+    ], RadioButton.prototype, "label", void 0);
+    __decorate([
+        Property('After')
+    ], RadioButton.prototype, "labelPosition", void 0);
+    __decorate([
+        Property('')
+    ], RadioButton.prototype, "name", void 0);
+    __decorate([
+        Property('')
+    ], RadioButton.prototype, "value", void 0);
+    RadioButton = RadioButton_1 = __decorate([
+        NotifyPropertyChanges
+    ], RadioButton);
+    return RadioButton;
+    var RadioButton_1;
+}(Component));
+export { RadioButton };

src/switch/index.js

@@ -1,8 +0,4 @@
-define(["require", "exports", "./switch"], function (require, exports, switch_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(switch_1);
-});
+/**
+ * Switch modules
+ */
+export * from './switch';

src/switch/switch-model.d.ts

@@ -1,2 +0,2 @@
-import { Component, INotifyPropertyChanged, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';import { EmitType, Event, EventHandler, MouseEventArgs } from '@syncfusion/ej2-base';import { addClass, createElement, isRippleEnabled, removeClass, rippleEffect } from '@syncfusion/ej2-base';import { rippleMouseHandler, destroy, preRender, ChangeEventArgs } from './../common/common';
+import { Component, INotifyPropertyChanged, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';import { EmitType, Event, EventHandler, MouseEventArgs } from '@syncfusion/ej2-base';import { addClass, isRippleEnabled, removeClass, rippleEffect } from '@syncfusion/ej2-base';import { rippleMouseHandler, destroy, preRender, ChangeEventArgs } from './../common/common';
 import {ComponentModel} from '@syncfusion/ej2-base';
@@ -3,0 +3,0 @@

src/switch/switch.js

@@ -17,293 +17,335 @@ var __extends = (this && this.__extends) || (function () {
 };
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "./../common/common"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, common_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var CHECK = 'e-check';
-    var DISABLED = 'e-switch-disabled';
-    var RIPPLE = 'e-ripple-container';
-    var RIPPLE_CHECK = 'e-ripple-check';
-    var RTL = 'e-rtl';
-    var WRAPPER = 'e-switch-wrapper';
-    var ACTIVE = 'e-switch-active';
-    var Switch = (function (_super) {
-        __extends(Switch, _super);
-        function Switch(options, element) {
-            var _this = _super.call(this, options, element) || this;
-            _this.isKeyPressed = false;
-            _this.isDrag = false;
-            return _this;
+import { Component, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';
+import { Event, EventHandler } from '@syncfusion/ej2-base';
+import { addClass, isRippleEnabled, removeClass, rippleEffect } from '@syncfusion/ej2-base';
+import { rippleMouseHandler, destroy, preRender } from './../common/common';
+var CHECK = 'e-check';
+var DISABLED = 'e-switch-disabled';
+var RIPPLE = 'e-ripple-container';
+var RIPPLE_CHECK = 'e-ripple-check';
+var RTL = 'e-rtl';
+var WRAPPER = 'e-switch-wrapper';
+var ACTIVE = 'e-switch-active';
+/**
+ * The Switch is a graphical user interface element that allows you to toggle between checked and unchecked states.
+ * ```html
+ * <input type="checkbox" id="switch"/>
+ * <script>
+ * var switchObj = new Switch({});
+ * switchObj.appendTo("#switch");
+ * </script>
+ * ```
+ */
+var Switch = /** @class */ (function (_super) {
+    __extends(Switch, _super);
+    /**
+     * Constructor for creating the widget.
+     * @private
+     */
+    function Switch(options, element) {
+        var _this = _super.call(this, options, element) || this;
+        _this.isKeyPressed = false;
+        _this.isDrag = false;
+        return _this;
+    }
+    Switch.prototype.changeState = function (state) {
+        var ariaState;
+        var rippleSpan;
+        var wrapper = this.getWrapper();
+        var bar = wrapper.querySelector('.e-switch-inner');
+        var handle = wrapper.querySelector('.e-switch-handle');
+        if (isRippleEnabled) {
+            rippleSpan = wrapper.getElementsByClassName(RIPPLE)[0];
         }
-        Switch.prototype.changeState = function (state) {
-            var ariaState;
-            var rippleSpan;
-            var wrapper = this.getWrapper();
-            var bar = wrapper.querySelector('.e-switch-inner');
-            var handle = wrapper.querySelector('.e-switch-handle');
-            if (ej2_base_3.isRippleEnabled) {
-                rippleSpan = wrapper.getElementsByClassName(RIPPLE)[0];
+        if (state) {
+            addClass([bar, handle], ACTIVE);
+            ariaState = 'true';
+            this.element.checked = true;
+            this.checked = true;
+            if (rippleSpan) {
+                addClass([rippleSpan], [RIPPLE_CHECK]);
             }
-            if (state) {
-                ej2_base_3.addClass([bar, handle], ACTIVE);
-                ariaState = 'true';
-                this.element.checked = true;
-                this.checked = true;
-                if (rippleSpan) {
-                    ej2_base_3.addClass([rippleSpan], [RIPPLE_CHECK]);
-                }
-            }
-            else {
-                ej2_base_3.removeClass([bar, handle], ACTIVE);
-                ariaState = 'false';
-                this.element.checked = false;
-                this.checked = false;
-                if (rippleSpan) {
-                    ej2_base_3.removeClass([rippleSpan], [RIPPLE_CHECK]);
-                }
-            }
-            wrapper.setAttribute('aria-checked', ariaState);
-        };
-        Switch.prototype.clickHandler = function (evt) {
-            this.isDrag = false;
-            this.focusOutHandler();
-            this.changeState(!this.checked);
-            this.element.focus();
-            var changeEventArgs = { checked: this.element.checked, event: evt };
-            this.trigger('change', changeEventArgs);
-        };
-        Switch.prototype.destroy = function () {
-            _super.prototype.destroy.call(this);
-            if (!this.disabled) {
-                this.unWireEvents();
-            }
-            common_1.destroy(this, this.getWrapper(), this.tagName);
-        };
-        Switch.prototype.focusHandler = function () {
-            if (this.isKeyPressed) {
-                this.getWrapper().classList.add('e-focus');
-            }
-        };
-        Switch.prototype.focusOutHandler = function () {
-            this.getWrapper().classList.remove('e-focus');
-        };
-        Switch.prototype.getModuleName = function () {
-            return 'switch';
-        };
-        Switch.prototype.getPersistData = function () {
-            return this.addOnPersist(['checked']);
-        };
-        Switch.prototype.getWrapper = function () {
-            return this.element.parentElement;
-        };
-        Switch.prototype.initialize = function () {
-            if (this.name) {
-                this.element.setAttribute('name', this.name);
-            }
-            if (this.value) {
-                this.element.setAttribute('value', this.value);
-            }
-            if (this.checked) {
-                this.changeState(true);
-            }
-            if (this.disabled) {
-                this.setDisabled();
-            }
-            if (this.onLabel || this.offLabel) {
-                this.setLabel(this.onLabel, this.offLabel);
-            }
-        };
-        Switch.prototype.initWrapper = function () {
-            var wrapper = this.element.parentElement;
-            if (!wrapper.classList.contains(WRAPPER)) {
-                wrapper = ej2_base_3.createElement('div', {
-                    className: WRAPPER, attrs: { 'role': 'switch', 'aria-checked': 'false' }
-                });
-                this.element.parentNode.insertBefore(wrapper, this.element);
-            }
-            var switchInner = ej2_base_3.createElement('span', { className: 'e-switch-inner' });
-            var onLabel = ej2_base_3.createElement('span', { className: 'e-switch-on' });
-            var offLabel = ej2_base_3.createElement('span', { className: 'e-switch-off' });
-            var handle = ej2_base_3.createElement('span', { className: 'e-switch-handle' });
-            wrapper.appendChild(this.element);
-            switchInner.appendChild(onLabel);
-            switchInner.appendChild(offLabel);
-            wrapper.appendChild(switchInner);
-            wrapper.appendChild(handle);
-            if (ej2_base_3.isRippleEnabled) {
-                var rippleSpan = ej2_base_3.createElement('span', { className: RIPPLE });
-                handle.appendChild(rippleSpan);
-                ej2_base_3.rippleEffect(rippleSpan, { duration: 400, isCenterRipple: true });
-            }
-            if (this.enableRtl) {
-                wrapper.classList.add(RTL);
-            }
-            if (this.cssClass) {
-                ej2_base_3.addClass([wrapper], this.cssClass.split(' '));
-            }
-        };
-        Switch.prototype.onPropertyChanged = function (newProp, oldProp) {
-            var wrapper = this.getWrapper();
-            for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
-                var prop = _a[_i];
-                switch (prop) {
-                    case 'checked':
-                        this.changeState(newProp.checked);
-                        break;
-                    case 'disabled':
-                        if (newProp.disabled) {
-                            this.setDisabled();
-                            this.unWireEvents();
-                        }
-                        else {
-                            this.element.disabled = false;
-                            wrapper.classList.remove(DISABLED);
-                            wrapper.setAttribute('aria-disabled', 'false');
-                            this.wireEvents();
-                        }
-                        break;
-                    case 'value':
-                        this.element.setAttribute('value', newProp.value);
-                        break;
-                    case 'name':
-                        this.element.setAttribute('name', newProp.name);
-                        break;
-                    case 'onLabel':
-                    case 'offLabel':
-                        this.setLabel(newProp.onLabel, newProp.offLabel);
-                        break;
-                    case 'enableRtl':
-                        if (newProp.enableRtl) {
-                            wrapper.classList.add(RTL);
-                        }
-                        else {
-                            wrapper.classList.remove(RTL);
-                        }
-                        break;
-                    case 'cssClass':
-                        if (oldProp.cssClass) {
-                            wrapper.classList.remove(oldProp.cssClass);
-                        }
-                        wrapper.classList.add(newProp.cssClass);
-                        break;
-                }
-            }
-        };
-        Switch.prototype.preRender = function () {
-            var element = this.element;
-            this.tagName = this.element.tagName;
-            common_1.preRender(this, 'EJS-SWITCH', WRAPPER, element, this.getModuleName());
-        };
-        Switch.prototype.render = function () {
-            this.initWrapper();
-            this.initialize();
-            if (!this.disabled) {
-                this.wireEvents();
-            }
-        };
-        Switch.prototype.rippleHandler = function (e) {
-            var rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];
-            common_1.rippleMouseHandler(e, rippleSpan);
-            if (e.type === 'mousedown' && e.currentTarget.classList.contains('e-switch-wrapper') && e.which === 1) {
-                this.isDrag = true;
-                this.isKeyPressed = false;
-            }
-        };
-        Switch.prototype.rippleTouchHandler = function (eventType) {
-            var rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];
+        }
+        else {
+            removeClass([bar, handle], ACTIVE);
+            ariaState = 'false';
+            this.element.checked = false;
+            this.checked = false;
             if (rippleSpan) {
-                var event_1 = document.createEvent('MouseEvents');
-                event_1.initEvent(eventType, false, true);
-                rippleSpan.dispatchEvent(event_1);
+                removeClass([rippleSpan], [RIPPLE_CHECK]);
             }
-        };
-        Switch.prototype.setDisabled = function () {
-            var wrapper = this.getWrapper();
-            this.element.disabled = true;
-            wrapper.classList.add(DISABLED);
-            wrapper.setAttribute('aria-disabled', 'true');
-        };
-        Switch.prototype.setLabel = function (onText, offText) {
-            var wrapper = this.getWrapper();
-            if (onText) {
-                wrapper.querySelector('.e-switch-on').textContent = onText;
+        }
+        wrapper.setAttribute('aria-checked', ariaState);
+    };
+    Switch.prototype.clickHandler = function (evt) {
+        this.isDrag = false;
+        this.focusOutHandler();
+        this.changeState(!this.checked);
+        this.element.focus();
+        var changeEventArgs = { checked: this.element.checked, event: evt };
+        this.trigger('change', changeEventArgs);
+    };
+    /**
+     * Destroys the Switch widget.
+     * @returns void
+     */
+    Switch.prototype.destroy = function () {
+        _super.prototype.destroy.call(this);
+        if (!this.disabled) {
+            this.unWireEvents();
+        }
+        destroy(this, this.getWrapper(), this.tagName);
+    };
+    Switch.prototype.focusHandler = function () {
+        if (this.isKeyPressed) {
+            this.getWrapper().classList.add('e-focus');
+        }
+    };
+    Switch.prototype.focusOutHandler = function () {
+        this.getWrapper().classList.remove('e-focus');
+    };
+    /**
+     * Gets the module name.
+     * @private
+     */
+    Switch.prototype.getModuleName = function () {
+        return 'switch';
+    };
+    /**
+     * Gets the properties to be maintained in the persistence state.
+     * @private
+     */
+    Switch.prototype.getPersistData = function () {
+        return this.addOnPersist(['checked']);
+    };
+    Switch.prototype.getWrapper = function () {
+        return this.element.parentElement;
+    };
+    Switch.prototype.initialize = function () {
+        if (this.name) {
+            this.element.setAttribute('name', this.name);
+        }
+        if (this.value) {
+            this.element.setAttribute('value', this.value);
+        }
+        if (this.checked) {
+            this.changeState(true);
+        }
+        if (this.disabled) {
+            this.setDisabled();
+        }
+        if (this.onLabel || this.offLabel) {
+            this.setLabel(this.onLabel, this.offLabel);
+        }
+    };
+    Switch.prototype.initWrapper = function () {
+        var wrapper = this.element.parentElement;
+        if (!wrapper.classList.contains(WRAPPER)) {
+            wrapper = this.createElement('div', {
+                className: WRAPPER, attrs: { 'role': 'switch', 'aria-checked': 'false' }
+            });
+            this.element.parentNode.insertBefore(wrapper, this.element);
+        }
+        var switchInner = this.createElement('span', { className: 'e-switch-inner' });
+        var onLabel = this.createElement('span', { className: 'e-switch-on' });
+        var offLabel = this.createElement('span', { className: 'e-switch-off' });
+        var handle = this.createElement('span', { className: 'e-switch-handle' });
+        wrapper.appendChild(this.element);
+        switchInner.appendChild(onLabel);
+        switchInner.appendChild(offLabel);
+        wrapper.appendChild(switchInner);
+        wrapper.appendChild(handle);
+        if (isRippleEnabled) {
+            var rippleSpan = this.createElement('span', { className: RIPPLE });
+            handle.appendChild(rippleSpan);
+            rippleEffect(rippleSpan, { duration: 400, isCenterRipple: true });
+        }
+        if (this.enableRtl) {
+            wrapper.classList.add(RTL);
+        }
+        if (this.cssClass) {
+            addClass([wrapper], this.cssClass.split(' '));
+        }
+    };
+    /**
+     * Called internally if any of the property value changes.
+     * @private
+     */
+    Switch.prototype.onPropertyChanged = function (newProp, oldProp) {
+        var wrapper = this.getWrapper();
+        for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
+            var prop = _a[_i];
+            switch (prop) {
+                case 'checked':
+                    this.changeState(newProp.checked);
+                    break;
+                case 'disabled':
+                    if (newProp.disabled) {
+                        this.setDisabled();
+                        this.unWireEvents();
+                    }
+                    else {
+                        this.element.disabled = false;
+                        wrapper.classList.remove(DISABLED);
+                        wrapper.setAttribute('aria-disabled', 'false');
+                        this.wireEvents();
+                    }
+                    break;
+                case 'value':
+                    this.element.setAttribute('value', newProp.value);
+                    break;
+                case 'name':
+                    this.element.setAttribute('name', newProp.name);
+                    break;
+                case 'onLabel':
+                case 'offLabel':
+                    this.setLabel(newProp.onLabel, newProp.offLabel);
+                    break;
+                case 'enableRtl':
+                    if (newProp.enableRtl) {
+                        wrapper.classList.add(RTL);
+                    }
+                    else {
+                        wrapper.classList.remove(RTL);
+                    }
+                    break;
+                case 'cssClass':
+                    if (oldProp.cssClass) {
+                        wrapper.classList.remove(oldProp.cssClass);
+                    }
+                    wrapper.classList.add(newProp.cssClass);
+                    break;
             }
-            if (offText) {
-                wrapper.querySelector('.e-switch-off').textContent = offText;
-            }
-        };
-        Switch.prototype.switchFocusHandler = function () {
-            this.isKeyPressed = true;
-        };
-        Switch.prototype.switchMouseUp = function (e) {
-            var target = e.target;
-            var rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];
-            if (e.type === 'touchmove') {
+        }
+    };
+    /**
+     * Initialize Angular, React and Unique ID support.
+     * @private
+     */
+    Switch.prototype.preRender = function () {
+        var element = this.element;
+        this.tagName = this.element.tagName;
+        preRender(this, 'EJS-SWITCH', WRAPPER, element, this.getModuleName());
+    };
+    /**
+     * Initialize control rendering.
+     * @private
+     */
+    Switch.prototype.render = function () {
+        this.initWrapper();
+        this.initialize();
+        if (!this.disabled) {
+            this.wireEvents();
+        }
+    };
+    Switch.prototype.rippleHandler = function (e) {
+        var rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];
+        rippleMouseHandler(e, rippleSpan);
+        if (e.type === 'mousedown' && e.currentTarget.classList.contains('e-switch-wrapper') && e.which === 1) {
+            this.isDrag = true;
+            this.isKeyPressed = false;
+        }
+    };
+    Switch.prototype.rippleTouchHandler = function (eventType) {
+        var rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];
+        if (rippleSpan) {
+            var event_1 = document.createEvent('MouseEvents');
+            event_1.initEvent(eventType, false, true);
+            rippleSpan.dispatchEvent(event_1);
+        }
+    };
+    Switch.prototype.setDisabled = function () {
+        var wrapper = this.getWrapper();
+        this.element.disabled = true;
+        wrapper.classList.add(DISABLED);
+        wrapper.setAttribute('aria-disabled', 'true');
+    };
+    Switch.prototype.setLabel = function (onText, offText) {
+        var wrapper = this.getWrapper();
+        if (onText) {
+            wrapper.querySelector('.e-switch-on').textContent = onText;
+        }
+        if (offText) {
+            wrapper.querySelector('.e-switch-off').textContent = offText;
+        }
+    };
+    Switch.prototype.switchFocusHandler = function () {
+        this.isKeyPressed = true;
+    };
+    Switch.prototype.switchMouseUp = function (e) {
+        var target = e.target;
+        var rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];
+        if (e.type === 'touchmove') {
+            e.preventDefault();
+        }
+        if (e.type === 'touchstart') {
+            this.isDrag = true;
+            this.rippleTouchHandler('mousedown');
+        }
+        if (this.isDrag) {
+            if ((e.type === 'mouseup' && target.className.indexOf('e-switch') < 0) || e.type === 'touchend') {
+                this.clickHandler(e);
+                this.rippleTouchHandler('mouseup');
                 e.preventDefault();
             }
-            if (e.type === 'touchstart') {
-                this.isDrag = true;
-                this.rippleTouchHandler('mousedown');
-            }
-            if (this.isDrag) {
-                if ((e.type === 'mouseup' && target.className.indexOf('e-switch') < 0) || e.type === 'touchend') {
-                    this.clickHandler(e);
-                    this.rippleTouchHandler('mouseup');
-                    e.preventDefault();
-                }
-            }
-        };
-        Switch.prototype.toggle = function () {
-            this.clickHandler();
-        };
-        Switch.prototype.wireEvents = function () {
-            var wrapper = this.getWrapper();
-            var handle = wrapper.querySelector('.e-switch-handle');
-            ej2_base_2.EventHandler.add(wrapper, 'click', this.clickHandler, this);
-            ej2_base_2.EventHandler.add(this.element, 'focus', this.focusHandler, this);
-            ej2_base_2.EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);
-            ej2_base_2.EventHandler.add(document, 'mouseup', this.switchMouseUp, this);
-            ej2_base_2.EventHandler.add(document, 'keydown', this.switchFocusHandler, this);
-            ej2_base_2.EventHandler.add(wrapper, 'mousedown mouseup', this.rippleHandler, this);
-            ej2_base_2.EventHandler.add(wrapper, 'touchstart touchmove touchend', this.switchMouseUp, this);
-        };
-        Switch.prototype.unWireEvents = function () {
-            var wrapper = this.getWrapper();
-            var handle = wrapper.querySelector('.e-switch-handle');
-            ej2_base_2.EventHandler.remove(wrapper, 'click', this.clickHandler);
-            ej2_base_2.EventHandler.remove(this.element, 'focus', this.focusHandler);
-            ej2_base_2.EventHandler.remove(this.element, 'focusout', this.focusOutHandler);
-            ej2_base_2.EventHandler.remove(document, 'mouseup', this.switchMouseUp);
-            ej2_base_2.EventHandler.remove(document, 'keydown', this.switchFocusHandler);
-            ej2_base_2.EventHandler.remove(wrapper, 'mousedown mouseup', this.rippleHandler);
-            ej2_base_2.EventHandler.remove(wrapper, 'touchstart touchmove touchend', this.switchMouseUp);
-        };
-        __decorate([
-            ej2_base_2.Event()
-        ], Switch.prototype, "change", void 0);
-        __decorate([
-            ej2_base_1.Property(false)
-        ], Switch.prototype, "checked", void 0);
-        __decorate([
-            ej2_base_1.Property('')
-        ], Switch.prototype, "cssClass", void 0);
-        __decorate([
-            ej2_base_1.Property(false)
-        ], Switch.prototype, "disabled", void 0);
-        __decorate([
-            ej2_base_1.Property('')
-        ], Switch.prototype, "name", void 0);
-        __decorate([
-            ej2_base_1.Property('')
-        ], Switch.prototype, "onLabel", void 0);
-        __decorate([
-            ej2_base_1.Property('')
-        ], Switch.prototype, "offLabel", void 0);
-        __decorate([
-            ej2_base_1.Property('')
-        ], Switch.prototype, "value", void 0);
-        Switch = __decorate([
-            ej2_base_1.NotifyPropertyChanges
-        ], Switch);
-        return Switch;
-    }(ej2_base_1.Component));
-    exports.Switch = Switch;
-});
+        }
+    };
+    /**
+     * Toggle the Switch component state into checked/unchecked.
+     * @returns void
+     */
+    Switch.prototype.toggle = function () {
+        this.clickHandler();
+    };
+    Switch.prototype.wireEvents = function () {
+        var wrapper = this.getWrapper();
+        var handle = wrapper.querySelector('.e-switch-handle');
+        EventHandler.add(wrapper, 'click', this.clickHandler, this);
+        EventHandler.add(this.element, 'focus', this.focusHandler, this);
+        EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);
+        EventHandler.add(document, 'mouseup', this.switchMouseUp, this);
+        EventHandler.add(document, 'keydown', this.switchFocusHandler, this);
+        EventHandler.add(wrapper, 'mousedown mouseup', this.rippleHandler, this);
+        EventHandler.add(wrapper, 'touchstart touchmove touchend', this.switchMouseUp, this);
+    };
+    Switch.prototype.unWireEvents = function () {
+        var wrapper = this.getWrapper();
+        var handle = wrapper.querySelector('.e-switch-handle');
+        EventHandler.remove(wrapper, 'click', this.clickHandler);
+        EventHandler.remove(this.element, 'focus', this.focusHandler);
+        EventHandler.remove(this.element, 'focusout', this.focusOutHandler);
+        EventHandler.remove(document, 'mouseup', this.switchMouseUp);
+        EventHandler.remove(document, 'keydown', this.switchFocusHandler);
+        EventHandler.remove(wrapper, 'mousedown mouseup', this.rippleHandler);
+        EventHandler.remove(wrapper, 'touchstart touchmove touchend', this.switchMouseUp);
+    };
+    __decorate([
+        Event()
+    ], Switch.prototype, "change", void 0);
+    __decorate([
+        Property(false)
+    ], Switch.prototype, "checked", void 0);
+    __decorate([
+        Property('')
+    ], Switch.prototype, "cssClass", void 0);
+    __decorate([
+        Property(false)
+    ], Switch.prototype, "disabled", void 0);
+    __decorate([
+        Property('')
+    ], Switch.prototype, "name", void 0);
+    __decorate([
+        Property('')
+    ], Switch.prototype, "onLabel", void 0);
+    __decorate([
+        Property('')
+    ], Switch.prototype, "offLabel", void 0);
+    __decorate([
+        Property('')
+    ], Switch.prototype, "value", void 0);
+    Switch = __decorate([
+        NotifyPropertyChanges
+    ], Switch);
+    return Switch;
+}(Component));
+export { Switch };

switch.js

@@ -1,8 +0,4 @@
-define(["require", "exports", "./src/switch/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);
-});
+/**
+ * switch
+ */
+export * from './src/switch/index';

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Number of package files

126

increased by0.8%

Lines of code

58744

increased by0.06%

Number of lines in readme file

108

increased by671.43%

Worsened metrics

Total package byte prevSize

7688340

decreased by-1.69%

Dependency changes

• Updated@syncfusion/ej2-base@~16.2.46