Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@syncfusion/ej2-notifications

Package Overview
Dependencies
Maintainers
2
Versions
100
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@syncfusion/ej2-notifications - npm Package Compare versions

Comparing version 16.2.45 to 16.2.46

src/global.js

2

CHANGELOG.md

@@ -5,2 +5,4 @@ # Changelog

## 16.2.45 (2018-07-17)
### Toast

@@ -7,0 +9,0 @@

11

dist/ej2-notifications.umd.min.js

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

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@syncfusion/ej2-base"),require("@syncfusion/ej2-buttons"),require("@syncfusion/ej2-popups")):"function"==typeof define&&define.amd?define(["exports","@syncfusion/ej2-base","@syncfusion/ej2-buttons","@syncfusion/ej2-popups"],e):e(t.ej={},t.ej2Base,t.ej2Buttons,t.ej2Popups)}(this,function(t,e,i,o){"use strict";var s=function(){var t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i])};return function(e,i){function o(){this.constructor=e}t(e,i),e.prototype=null===i?Object.create(i):(o.prototype=i.prototype,new o)}}(),n=function(t,e,i,o){var s,n=arguments.length,r=n<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,o);else for(var l=t.length-1;l>=0;l--)(s=t[l])&&(r=(n<3?s(r):n>3?s(e,i,r):s(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r},r="e-toast",l="e-toast-container",a="e-toast-full-width",p="e-toast-message",d="e-toast-progress",h="e-toast-close-icon",c=function(t){function i(){return null!==t&&t.apply(this,arguments)||this}return s(i,t),n([e.Property("Left")],i.prototype,"X",void 0),n([e.Property("Top")],i.prototype,"Y",void 0),i}(e.ChildProperty),u=function(t){function i(){return null!==t&&t.apply(this,arguments)||this}return s(i,t),n([e.Property(null)],i.prototype,"model",void 0),n([e.Property(null)],i.prototype,"click",void 0),i}(e.ChildProperty),f=function(t){function i(){return null!==t&&t.apply(this,arguments)||this}return s(i,t),n([e.Property("FadeIn")],i.prototype,"effect",void 0),n([e.Property(600)],i.prototype,"duration",void 0),n([e.Property("ease")],i.prototype,"easing",void 0),i}(e.ChildProperty),y=function(t){function i(){return null!==t&&t.apply(this,arguments)||this}return s(i,t),n([e.Complex({effect:"FadeIn",duration:600,easing:"ease"},f)],i.prototype,"show",void 0),n([e.Complex({effect:"FadeOut",duration:600,easing:"ease"},f)],i.prototype,"hide",void 0),i}(e.ChildProperty),m=function(t){function f(e,i){return t.call(this,e,i)||this}return s(f,t),f.prototype.getModuleName=function(){return"toast"},f.prototype.getPersistData=function(){return this.addOnPersist([])},f.prototype.destroy=function(){this.hide("All"),this.element.classList.remove(l),e.setStyleAttribute(this.element,{position:"","z-index":""}),t.prototype.destroy.call(this)},f.prototype.preRender=function(){this.isDevice=e.Browser.isDevice,this.enableRtl&&this.element.classList.add("e-rtl")},f.prototype.render=function(){this.progressObj=[],this.intervalId=[],this.titleTemplate=null,this.contentTemplate=null,this.toastTemplate=null,this.isDevice&&screen.width<768&&new e.Touch(this.element,{swipe:this.swipeHandler.bind(this)})},f.prototype.show=function(t){if(e.isNullOrUndefined(t)||(this.templateChanges(t),e.extend(this,this,t)),e.isNullOrUndefined(this.toastContainer)){this.toastContainer=this.getContainer();var i="string"==typeof this.target?document.querySelector(this.target):this.target;if(e.isNullOrUndefined(i))return;"BODY"===i.tagName?this.toastContainer.style.position="fixed":(this.toastContainer.style.position="absolute",i.style.position="relative"),this.setPositioning(this.position),i.appendChild(this.toastContainer)}this.toastEle=e.createElement("div",{className:r,id:e.getUniqueID("toast")}),this.setWidthHeight(),this.setCSSClass(this.cssClass),e.isNullOrUndefined(this.template)||0===this.template.length?this.personalizeToast():this.templateRendering(),this.setProgress(),this.setCloseButton(),this.setAria(),this.appendToTarget()},f.prototype.swipeHandler=function(t){var i=e.closest(t.originalEvent.target,".e-toast:not(."+l+")"),o=this.animation.hide.effect;e.isNullOrUndefined(i)||("Right"===t.swipeDirection?(this.animation.hide.effect="SlideRightOut",this.hide(i)):"Left"===t.swipeDirection&&(this.animation.hide.effect="SlideLeftOut",this.hide(i)),this.animation.hide.effect=o)},f.prototype.templateChanges=function(t){e.isUndefined(t.content)||e.isNullOrUndefined(this.contentTemplate)||this.content===t.content||this.clearContentTemplate(),e.isUndefined(t.title)||e.isNullOrUndefined(this.titleTemplate)||this.title===t.title||this.clearTitleTemplate(),e.isUndefined(t.template)||e.isNullOrUndefined(this.toastTemplate)||this.template===t.template||this.clearToastTemplate()},f.prototype.setCSSClass=function(t){if(!e.isNullOrUndefined(t)){var i=-1!==t.indexOf(",")?",":" ";e.classList(this.toastEle,t.split(i),[])}},f.prototype.setWidthHeight=function(){"300px"===this.width?this.toastEle.style.width=e.formatUnit(this.width):"100%"===this.width?this.toastContainer.classList.add(a):(this.toastEle.style.width=e.formatUnit(this.width),this.toastContainer.classList.remove(a)),this.toastEle.style.height=e.formatUnit(this.height)},f.prototype.templateRendering=function(){this.fetchEle(this.toastEle,this.template,"template")},f.prototype.hide=function(t){if(!e.isNullOrUndefined(this.toastContainer)&&0!==this.toastContainer.childElementCount)if("string"!=typeof t||"All"!==t)e.isNullOrUndefined(t)&&(t=this.newestOnTop?this.toastContainer.lastElementChild:this.toastContainer.firstElementChild),this.destroyToast(t);else for(var i=0;i<this.toastContainer.childElementCount;i++)this.destroyToast(this.toastContainer.children[i])},f.prototype.fetchEle=function(t,i,o){var s,n,r;if(n="title"===o?this.titleTemplate:"content"===o?this.contentTemplate:this.toastTemplate,!e.isNullOrUndefined(n))return t.appendChild(n.cloneNode(!0)),t;try{if(document.querySelectorAll(i).length>0){var l=document.querySelector(i);t.appendChild(l),l.style.display="";var a=l.cloneNode(!0);"title"===o?this.titleTemplate=a:"content"===o?this.contentTemplate=a:this.toastTemplate=a}}catch(t){s=e.compile(i)}return e.isNullOrUndefined(s)||(r=s({},this,o)),e.isNullOrUndefined(r)||!(r.length>0)||e.isNullOrUndefined(r[0].tagName)&&1===r.length?0===t.childElementCount&&(t.innerHTML=i):[].slice.call(r).forEach(function(i){e.isNullOrUndefined(i.tagName)||(i.style.display=""),t.appendChild(i)}),t},f.prototype.clearProgress=function(t){e.isNullOrUndefined(this.intervalId[t])||(clearInterval(this.intervalId[t]),delete this.intervalId[t]),e.isNullOrUndefined(this.progressObj[t])||(clearInterval(this.progressObj[t].intervalId),delete this.progressObj[t])},f.prototype.clearContainerPos=function(){var t=this;this.customPosition?(e.setStyleAttribute(this.toastContainer,{left:"",top:""}),this.toastContainer=null,this.customPosition=!1):([r+"-top-left",r+"-top-right",r+"-bottom-left",r+"-bottom-right",r+"-bottom-center",r+"-top-center",r+"-full-width"].forEach(function(i){!e.isNullOrUndefined(t.toastContainer)&&t.toastContainer.classList.contains(i)&&t.toastContainer.classList.remove(i)}),this.toastContainer=null),e.isNullOrUndefined(this.titleTemplate)||this.clearTitleTemplate(),e.isNullOrUndefined(this.contentTemplate)||this.clearContentTemplate(),e.isNullOrUndefined(this.toastTemplate)||this.clearToastTemplate()},f.prototype.clearTitleTemplate=function(){this.titleTemplate.style.display="none",document.body.appendChild(this.titleTemplate),this.titleTemplate=null},f.prototype.clearContentTemplate=function(){this.contentTemplate.style.display="none",document.body.appendChild(this.contentTemplate),this.contentTemplate=null},f.prototype.clearToastTemplate=function(){this.toastTemplate.style.display="none",document.body.appendChild(this.toastTemplate),this.toastTemplate=null},f.prototype.destroyToast=function(t){var i=this,o=this.animation.hide,s={duration:o.duration,name:o.effect,timingFunction:o.easing},n=parseInt(t.id.split("toast_")[1],10),r={toastContainer:this.toastContainer,toastObj:this};e.isNullOrUndefined(this.progressObj[n])||e.isNullOrUndefined(t.querySelector("."+d))||(this.progressObj[n].progressEle.style.width="0%"),s.end=function(){i.clearProgress(n),e.detach(t),i.trigger("close",r),0===i.toastContainer.childElementCount&&i.clearContainerPos()},new e.Animation({}).animate(t,s)},f.prototype.personalizeToast=function(){this.setIcon(),this.setTitle(),this.setContent(),this.actionButtons()},f.prototype.setAria=function(){e.attributes(this.toastEle,{role:"alert"})},f.prototype.setPositioning=function(t){"number"==typeof t.X||"number"==typeof t.Y||-1!==t.X.indexOf("%")||-1!==t.Y.indexOf("%")?(e.setStyleAttribute(this.toastContainer,{left:e.formatUnit(t.X),top:e.formatUnit(t.Y)}),this.customPosition=!0):this.toastContainer.classList.add(r+"-"+t.Y.toString().toLowerCase()+"-"+t.X.toString().toLowerCase())},f.prototype.setCloseButton=function(){if(this.showCloseButton){var t=e.createElement("div",{className:h+" e-icons "});this.toastEle.appendChild(t)}},f.prototype.setProgress=function(){if(this.timeOut>0){var t=parseInt(this.toastEle.id.split("toast_")[1],10);this.intervalId[t]=window.setTimeout(this.destroyToast.bind(this,this.toastEle),this.timeOut),this.progressObj[t]={hideEta:null,intervalId:null,maxHideTime:null,element:null,timeOutId:null,progressEle:null},this.progressObj[t].maxHideTime=parseFloat(this.timeOut+""),this.progressObj[t].hideEta=(new Date).getTime()+this.progressObj[t].maxHideTime,this.progressObj[t].element=this.toastEle,this.extendedTimeout>0&&(e.EventHandler.add(this.toastEle,"mouseover",this.toastHoverAction.bind(this,t)),e.EventHandler.add(this.toastEle,"mouseleave",this.delayedToastProgress.bind(this,t)),this.progressObj[t].timeOutId=this.intervalId[t]),this.showProgressBar&&(this.progressBarEle=e.createElement("div",{className:d}),this.toastEle.insertBefore(this.progressBarEle,this.toastEle.children[0]),this.progressObj[t].intervalId=setInterval(this.updateProgressBar.bind(this,this.progressObj[t]),10),this.progressObj[t].progressEle=this.progressBarEle)}},f.prototype.toastHoverAction=function(t){clearTimeout(this.progressObj[t].timeOutId),clearInterval(this.progressObj[t].intervalId),this.progressObj[t].hideEta=0;var i=this.progressObj[t].element;e.isNullOrUndefined(i.querySelector("."+d))||(this.progressObj[t].progressEle.style.width="0%")},f.prototype.delayedToastProgress=function(t){var i=this.progressObj[t],o=i.element;i.timeOutId=window.setTimeout(this.destroyToast.bind(this,o),this.extendedTimeout),i.maxHideTime=parseFloat(this.extendedTimeout+""),i.hideEta=(new Date).getTime()+i.maxHideTime,e.isNullOrUndefined(o.querySelector("."+d))||(i.intervalId=setInterval(this.updateProgressBar.bind(this,i),10))},f.prototype.updateProgressBar=function(t){var e=(t.hideEta-(new Date).getTime())/t.maxHideTime*100;t.progressEle.style.width=e+"%"},f.prototype.setIcon=function(){if(!e.isNullOrUndefined(this.icon)&&0!==this.icon.length){var t=e.createElement("div",{className:"e-toast-icon e-icons "+this.icon});this.toastEle.appendChild(t)}},f.prototype.setTitle=function(){if(!e.isNullOrUndefined(this.title)&&0!==this.title.length){var t=e.createElement("div",{className:"e-toast-title"});t=this.fetchEle(t,this.title,"title");var i=e.createElement("div",{className:p});i.appendChild(t),this.toastEle.appendChild(i)}},f.prototype.setContent=function(){if(!e.isNullOrUndefined(this.content)&&0!==this.content.length){var t=e.createElement("div",{className:"e-toast-content"});t=this.fetchEle(t,this.content,"content"),this.appendMessageContainer(t)}},f.prototype.appendMessageContainer=function(t){if(this.toastEle.querySelectorAll("."+p).length>0)this.toastEle.querySelector("."+p).appendChild(t);else{var i=e.createElement("div",{className:p});i.appendChild(t),this.toastEle.appendChild(i)}},f.prototype.actionButtons=function(){var t=e.createElement("div",{className:"e-toast-actions"});[].slice.call(this.buttons).forEach(function(o){if(!e.isNullOrUndefined(o.model)){var s=e.createElement("button");s.setAttribute("type","button"),(e.isNullOrUndefined(o.model.cssClass)||0===o.model.cssClass.length)&&(o.model.cssClass="e-primary"),s.classList.add("e-small"),new i.Button(o.model,s),e.isNullOrUndefined(o.click)||"function"!=typeof o.click||e.EventHandler.add(s,"click",o.click),t.appendChild(s)}}),t.childElementCount>0&&this.appendMessageContainer(t)},f.prototype.appendToTarget=function(){var t={toastObj:this,element:this.toastEle,cancel:!1};this.trigger("beforeOpen",t),t.cancel||(this.toastEle.style.display="none",this.newestOnTop&&0!==this.toastContainer.childElementCount?this.toastContainer.insertBefore(this.toastEle,this.toastContainer.children[0]):this.toastContainer.appendChild(this.toastEle),e.EventHandler.add(this.toastEle,"click",this.clickHandler,this),this.toastContainer.style.zIndex=o.getZindexPartial(this.toastContainer)+"",this.displayToast(this.toastEle))},f.prototype.clickHandler=function(t){var i=t.target,o=e.closest(i,"."+r),s={element:o,cancel:!1,clickToClose:!1,originalEvent:t,toastObj:this},n=i.classList.contains(h);this.trigger("click",s),(n&&!s.cancel||s.clickToClose)&&this.destroyToast(o)},f.prototype.displayToast=function(t){var i=this,o=this.animation.show,s={duration:o.duration,name:o.effect,timingFunction:o.easing},n={toastObj:this,element:this.toastEle};s.begin=function(){t.style.display=""},s.end=function(){i.trigger("open",n)},new e.Animation(s).animate(t)},f.prototype.getContainer=function(){return this.element.classList.add(l),this.element},f.prototype.onPropertyChanged=function(t,e){for(var i=this.element,o=0,s=Object.keys(t);o<s.length;o++){switch(s[o]){case"enableRtl":t.enableRtl?i.classList.add("e-rtl"):i.classList.remove("e-rtl")}}},n([e.Property(e.Browser.isDevice&&screen.width<768?"100%":"300px")],f.prototype,"width",void 0),n([e.Property("auto")],f.prototype,"height",void 0),n([e.Property(null)],f.prototype,"title",void 0),n([e.Property(null)],f.prototype,"content",void 0),n([e.Property(null)],f.prototype,"icon",void 0),n([e.Property(null)],f.prototype,"cssClass",void 0),n([e.Property(null)],f.prototype,"template",void 0),n([e.Property(!0)],f.prototype,"newestOnTop",void 0),n([e.Property(!1)],f.prototype,"showCloseButton",void 0),n([e.Property(!1)],f.prototype,"showProgressBar",void 0),n([e.Property(5e3)],f.prototype,"timeOut",void 0),n([e.Property(1e3)],f.prototype,"extendedTimeout",void 0),n([e.Complex({},y)],f.prototype,"animation",void 0),n([e.Complex({},c)],f.prototype,"position",void 0),n([e.Collection([{}],u)],f.prototype,"buttons",void 0),n([e.Property(document.body)],f.prototype,"target",void 0),n([e.Event()],f.prototype,"created",void 0),n([e.Event()],f.prototype,"destroyed",void 0),n([e.Event()],f.prototype,"open",void 0),n([e.Event()],f.prototype,"beforeOpen",void 0),n([e.Event()],f.prototype,"close",void 0),n([e.Event()],f.prototype,"click",void 0),f=n([e.NotifyPropertyChanges],f)}(e.Component);t.ToastPosition=c,t.ButtonModelProps=u,t.ToastAnimations=f,t.ToastAnimationSettings=y,t.Toast=m,Object.defineProperty(t,"__esModule",{value:!0})});
/*!
* filename: ej2-notifications.umd.min.js
* version : 16.2.46
* Copyright Syncfusion Inc. 2001 - 2018. All rights reserved.
* Use of this code is subject to the terms of our license.
* A copy of the current license can be obtained at any time by e-mailing
* licensing@syncfusion.com. Any infringement will be prosecuted under
* applicable laws.
*/
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@syncfusion/ej2-base"),require("@syncfusion/ej2-buttons"),require("@syncfusion/ej2-popups")):"function"==typeof define&&define.amd?define(["exports","@syncfusion/ej2-base","@syncfusion/ej2-buttons","@syncfusion/ej2-popups"],e):e(t.ej={},t.ej2Base,t.ej2Buttons,t.ej2Popups)}(this,function(t,e,i,s){"use strict";var o=function(){var t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i])};return function(e,i){function s(){this.constructor=e}t(e,i),e.prototype=null===i?Object.create(i):(s.prototype=i.prototype,new s)}}(),n=function(t,e,i,s){var o,n=arguments.length,r=n<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,s);else for(var l=t.length-1;l>=0;l--)(o=t[l])&&(r=(n<3?o(r):n>3?o(e,i,r):o(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r},r="e-toast",l="e-toast-container",a="e-toast-full-width",p="e-toast-message",h="e-toast-progress",d="e-toast-close-icon",c=function(t){function i(){return null!==t&&t.apply(this,arguments)||this}return o(i,t),n([e.Property("Left")],i.prototype,"X",void 0),n([e.Property("Top")],i.prototype,"Y",void 0),i}(e.ChildProperty),u=function(t){function i(){return null!==t&&t.apply(this,arguments)||this}return o(i,t),n([e.Property(null)],i.prototype,"model",void 0),n([e.Property(null)],i.prototype,"click",void 0),i}(e.ChildProperty),f=function(t){function i(){return null!==t&&t.apply(this,arguments)||this}return o(i,t),n([e.Property("FadeIn")],i.prototype,"effect",void 0),n([e.Property(600)],i.prototype,"duration",void 0),n([e.Property("ease")],i.prototype,"easing",void 0),i}(e.ChildProperty),y=function(t){function i(){return null!==t&&t.apply(this,arguments)||this}return o(i,t),n([e.Complex({effect:"FadeIn",duration:600,easing:"ease"},f)],i.prototype,"show",void 0),n([e.Complex({effect:"FadeOut",duration:600,easing:"ease"},f)],i.prototype,"hide",void 0),i}(e.ChildProperty),m=function(t){function f(e,i){return t.call(this,e,i)||this}return o(f,t),f.prototype.getModuleName=function(){return"toast"},f.prototype.getPersistData=function(){return this.addOnPersist([])},f.prototype.destroy=function(){this.hide("All"),this.element.classList.remove(l),e.setStyleAttribute(this.element,{position:"","z-index":""}),t.prototype.destroy.call(this)},f.prototype.preRender=function(){this.isDevice=e.Browser.isDevice,this.enableRtl&&this.element.classList.add("e-rtl")},f.prototype.render=function(){this.progressObj=[],this.intervalId=[],this.titleTemplate=null,this.contentTemplate=null,this.toastTemplate=null,this.isDevice&&screen.width<768&&new e.Touch(this.element,{swipe:this.swipeHandler.bind(this)})},f.prototype.show=function(t){if(e.isNullOrUndefined(t)||(this.templateChanges(t),e.extend(this,this,t)),e.isNullOrUndefined(this.toastContainer)){this.toastContainer=this.getContainer();var i="string"==typeof this.target?document.querySelector(this.target):this.target;if(e.isNullOrUndefined(i))return;"BODY"===i.tagName?this.toastContainer.style.position="fixed":(this.toastContainer.style.position="absolute",i.style.position="relative"),this.setPositioning(this.position),i.appendChild(this.toastContainer)}this.toastEle=this.createElement("div",{className:r,id:e.getUniqueID("toast")}),this.setWidthHeight(),this.setCSSClass(this.cssClass),e.isNullOrUndefined(this.template)||0===this.template.length?this.personalizeToast():this.templateRendering(),this.setProgress(),this.setCloseButton(),this.setAria(),this.appendToTarget()},f.prototype.swipeHandler=function(t){var i=e.closest(t.originalEvent.target,".e-toast:not(."+l+")"),s=this.animation.hide.effect;e.isNullOrUndefined(i)||("Right"===t.swipeDirection?(this.animation.hide.effect="SlideRightOut",this.hide(i)):"Left"===t.swipeDirection&&(this.animation.hide.effect="SlideLeftOut",this.hide(i)),this.animation.hide.effect=s)},f.prototype.templateChanges=function(t){e.isUndefined(t.content)||e.isNullOrUndefined(this.contentTemplate)||this.content===t.content||this.clearContentTemplate(),e.isUndefined(t.title)||e.isNullOrUndefined(this.titleTemplate)||this.title===t.title||this.clearTitleTemplate(),e.isUndefined(t.template)||e.isNullOrUndefined(this.toastTemplate)||this.template===t.template||this.clearToastTemplate()},f.prototype.setCSSClass=function(t){if(!e.isNullOrUndefined(t)){var i=-1!==t.indexOf(",")?",":" ";e.classList(this.toastEle,t.split(i),[])}},f.prototype.setWidthHeight=function(){"300px"===this.width?this.toastEle.style.width=e.formatUnit(this.width):"100%"===this.width?this.toastContainer.classList.add(a):(this.toastEle.style.width=e.formatUnit(this.width),this.toastContainer.classList.remove(a)),this.toastEle.style.height=e.formatUnit(this.height)},f.prototype.templateRendering=function(){this.fetchEle(this.toastEle,this.template,"template")},f.prototype.hide=function(t){if(!e.isNullOrUndefined(this.toastContainer)&&0!==this.toastContainer.childElementCount)if("string"!=typeof t||"All"!==t)e.isNullOrUndefined(t)&&(t=this.newestOnTop?this.toastContainer.lastElementChild:this.toastContainer.firstElementChild),this.destroyToast(t);else for(var i=0;i<this.toastContainer.childElementCount;i++)this.destroyToast(this.toastContainer.children[i])},f.prototype.fetchEle=function(t,i,s){var o,n,r;if(n="title"===s?this.titleTemplate:"content"===s?this.contentTemplate:this.toastTemplate,!e.isNullOrUndefined(n))return t.appendChild(n.cloneNode(!0)),t;try{if(document.querySelectorAll(i).length>0){var l=document.querySelector(i);t.appendChild(l),l.style.display="";var a=l.cloneNode(!0);"title"===s?this.titleTemplate=a:"content"===s?this.contentTemplate=a:this.toastTemplate=a}}catch(t){o=e.compile(i)}return e.isNullOrUndefined(o)||(r=o({},this,s)),e.isNullOrUndefined(r)||!(r.length>0)||e.isNullOrUndefined(r[0].tagName)&&1===r.length?0===t.childElementCount&&(t.innerHTML=i):[].slice.call(r).forEach(function(i){e.isNullOrUndefined(i.tagName)||(i.style.display=""),t.appendChild(i)}),t},f.prototype.clearProgress=function(t){e.isNullOrUndefined(this.intervalId[t])||(clearInterval(this.intervalId[t]),delete this.intervalId[t]),e.isNullOrUndefined(this.progressObj[t])||(clearInterval(this.progressObj[t].intervalId),delete this.progressObj[t])},f.prototype.clearContainerPos=function(){var t=this;this.customPosition?(e.setStyleAttribute(this.toastContainer,{left:"",top:""}),this.toastContainer=null,this.customPosition=!1):([r+"-top-left",r+"-top-right",r+"-bottom-left",r+"-bottom-right",r+"-bottom-center",r+"-top-center",r+"-full-width"].forEach(function(i){!e.isNullOrUndefined(t.toastContainer)&&t.toastContainer.classList.contains(i)&&t.toastContainer.classList.remove(i)}),this.toastContainer=null),e.isNullOrUndefined(this.titleTemplate)||this.clearTitleTemplate(),e.isNullOrUndefined(this.contentTemplate)||this.clearContentTemplate(),e.isNullOrUndefined(this.toastTemplate)||this.clearToastTemplate()},f.prototype.clearTitleTemplate=function(){this.titleTemplate.style.display="none",document.body.appendChild(this.titleTemplate),this.titleTemplate=null},f.prototype.clearContentTemplate=function(){this.contentTemplate.style.display="none",document.body.appendChild(this.contentTemplate),this.contentTemplate=null},f.prototype.clearToastTemplate=function(){this.toastTemplate.style.display="none",document.body.appendChild(this.toastTemplate),this.toastTemplate=null},f.prototype.destroyToast=function(t){var i=this,s=this.animation.hide,o={duration:s.duration,name:s.effect,timingFunction:s.easing},n=parseInt(t.id.split("toast_")[1],10),r={toastContainer:this.toastContainer,toastObj:this};e.isNullOrUndefined(this.progressObj[n])||e.isNullOrUndefined(t.querySelector("."+h))||(this.progressObj[n].progressEle.style.width="0%"),o.end=function(){i.clearProgress(n),e.detach(t),i.trigger("close",r),0===i.toastContainer.childElementCount&&i.clearContainerPos()},new e.Animation({}).animate(t,o)},f.prototype.personalizeToast=function(){this.setIcon(),this.setTitle(),this.setContent(),this.actionButtons()},f.prototype.setAria=function(){e.attributes(this.toastEle,{role:"alert"})},f.prototype.setPositioning=function(t){"number"==typeof t.X||"number"==typeof t.Y||-1!==t.X.indexOf("%")||-1!==t.Y.indexOf("%")?(e.setStyleAttribute(this.toastContainer,{left:e.formatUnit(t.X),top:e.formatUnit(t.Y)}),this.customPosition=!0):this.toastContainer.classList.add(r+"-"+t.Y.toString().toLowerCase()+"-"+t.X.toString().toLowerCase())},f.prototype.setCloseButton=function(){if(this.showCloseButton){var t=this.createElement("div",{className:d+" e-icons "});this.toastEle.appendChild(t)}},f.prototype.setProgress=function(){if(this.timeOut>0){var t=parseInt(this.toastEle.id.split("toast_")[1],10);this.intervalId[t]=window.setTimeout(this.destroyToast.bind(this,this.toastEle),this.timeOut),this.progressObj[t]={hideEta:null,intervalId:null,maxHideTime:null,element:null,timeOutId:null,progressEle:null},this.progressObj[t].maxHideTime=parseFloat(this.timeOut+""),this.progressObj[t].hideEta=(new Date).getTime()+this.progressObj[t].maxHideTime,this.progressObj[t].element=this.toastEle,this.extendedTimeout>0&&(e.EventHandler.add(this.toastEle,"mouseover",this.toastHoverAction.bind(this,t)),e.EventHandler.add(this.toastEle,"mouseleave",this.delayedToastProgress.bind(this,t)),this.progressObj[t].timeOutId=this.intervalId[t]),this.showProgressBar&&(this.progressBarEle=this.createElement("div",{className:h}),this.toastEle.insertBefore(this.progressBarEle,this.toastEle.children[0]),this.progressObj[t].intervalId=setInterval(this.updateProgressBar.bind(this,this.progressObj[t]),10),this.progressObj[t].progressEle=this.progressBarEle)}},f.prototype.toastHoverAction=function(t){clearTimeout(this.progressObj[t].timeOutId),clearInterval(this.progressObj[t].intervalId),this.progressObj[t].hideEta=0;var i=this.progressObj[t].element;e.isNullOrUndefined(i.querySelector("."+h))||(this.progressObj[t].progressEle.style.width="0%")},f.prototype.delayedToastProgress=function(t){var i=this.progressObj[t],s=i.element;i.timeOutId=window.setTimeout(this.destroyToast.bind(this,s),this.extendedTimeout),i.maxHideTime=parseFloat(this.extendedTimeout+""),i.hideEta=(new Date).getTime()+i.maxHideTime,e.isNullOrUndefined(s.querySelector("."+h))||(i.intervalId=setInterval(this.updateProgressBar.bind(this,i),10))},f.prototype.updateProgressBar=function(t){var e=(t.hideEta-(new Date).getTime())/t.maxHideTime*100;t.progressEle.style.width=e+"%"},f.prototype.setIcon=function(){if(!e.isNullOrUndefined(this.icon)&&0!==this.icon.length){var t=this.createElement("div",{className:"e-toast-icon e-icons "+this.icon});this.toastEle.appendChild(t)}},f.prototype.setTitle=function(){if(!e.isNullOrUndefined(this.title)&&0!==this.title.length){var t=this.createElement("div",{className:"e-toast-title"});t=this.fetchEle(t,this.title,"title");var i=this.createElement("div",{className:p});i.appendChild(t),this.toastEle.appendChild(i)}},f.prototype.setContent=function(){if(!e.isNullOrUndefined(this.content)&&0!==this.content.length){var t=this.createElement("div",{className:"e-toast-content"});t=this.fetchEle(t,this.content,"content"),this.appendMessageContainer(t)}},f.prototype.appendMessageContainer=function(t){if(this.toastEle.querySelectorAll("."+p).length>0)this.toastEle.querySelector("."+p).appendChild(t);else{var e=this.createElement("div",{className:p});e.appendChild(t),this.toastEle.appendChild(e)}},f.prototype.actionButtons=function(){var t=this,s=this.createElement("div",{className:"e-toast-actions"});[].slice.call(this.buttons).forEach(function(o){if(!e.isNullOrUndefined(o.model)){var n=t.createElement("button");n.setAttribute("type","button"),(e.isNullOrUndefined(o.model.cssClass)||0===o.model.cssClass.length)&&(o.model.cssClass="e-primary"),n.classList.add("e-small"),new i.Button(o.model,n),e.isNullOrUndefined(o.click)||"function"!=typeof o.click||e.EventHandler.add(n,"click",o.click),s.appendChild(n)}}),s.childElementCount>0&&this.appendMessageContainer(s)},f.prototype.appendToTarget=function(){var t={toastObj:this,element:this.toastEle,cancel:!1};this.trigger("beforeOpen",t),t.cancel||(this.toastEle.style.display="none",this.newestOnTop&&0!==this.toastContainer.childElementCount?this.toastContainer.insertBefore(this.toastEle,this.toastContainer.children[0]):this.toastContainer.appendChild(this.toastEle),e.EventHandler.add(this.toastEle,"click",this.clickHandler,this),this.toastContainer.style.zIndex=s.getZindexPartial(this.toastContainer)+"",this.displayToast(this.toastEle))},f.prototype.clickHandler=function(t){var i=t.target,s=e.closest(i,"."+r),o={element:s,cancel:!1,clickToClose:!1,originalEvent:t,toastObj:this},n=i.classList.contains(d);this.trigger("click",o),(n&&!o.cancel||o.clickToClose)&&this.destroyToast(s)},f.prototype.displayToast=function(t){var i=this,s=this.animation.show,o={duration:s.duration,name:s.effect,timingFunction:s.easing},n={toastObj:this,element:this.toastEle};o.begin=function(){t.style.display=""},o.end=function(){i.trigger("open",n)},new e.Animation(o).animate(t)},f.prototype.getContainer=function(){return this.element.classList.add(l),this.element},f.prototype.onPropertyChanged=function(t,e){for(var i=this.element,s=0,o=Object.keys(t);s<o.length;s++){switch(o[s]){case"enableRtl":t.enableRtl?i.classList.add("e-rtl"):i.classList.remove("e-rtl")}}},n([e.Property(e.Browser.isDevice&&screen.width<768?"100%":"300px")],f.prototype,"width",void 0),n([e.Property("auto")],f.prototype,"height",void 0),n([e.Property(null)],f.prototype,"title",void 0),n([e.Property(null)],f.prototype,"content",void 0),n([e.Property(null)],f.prototype,"icon",void 0),n([e.Property(null)],f.prototype,"cssClass",void 0),n([e.Property(null)],f.prototype,"template",void 0),n([e.Property(!0)],f.prototype,"newestOnTop",void 0),n([e.Property(!1)],f.prototype,"showCloseButton",void 0),n([e.Property(!1)],f.prototype,"showProgressBar",void 0),n([e.Property(5e3)],f.prototype,"timeOut",void 0),n([e.Property(1e3)],f.prototype,"extendedTimeout",void 0),n([e.Complex({},y)],f.prototype,"animation",void 0),n([e.Complex({},c)],f.prototype,"position",void 0),n([e.Collection([{}],u)],f.prototype,"buttons",void 0),n([e.Property(document.body)],f.prototype,"target",void 0),n([e.Event()],f.prototype,"created",void 0),n([e.Event()],f.prototype,"destroyed",void 0),n([e.Event()],f.prototype,"open",void 0),n([e.Event()],f.prototype,"beforeOpen",void 0),n([e.Event()],f.prototype,"close",void 0),n([e.Event()],f.prototype,"click",void 0),f=n([e.NotifyPropertyChanges],f)}(e.Component);t.ToastPosition=c,t.ButtonModelProps=u,t.ToastAnimations=f,t.ToastAnimationSettings=y,t.Toast=m,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=ej2-notifications.umd.min.js.map

22

dist/es6/ej2-notifications.es2015.js

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

import { Animation, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, NotifyPropertyChanges, Property, Touch, attributes, classList, closest, compile, createElement, detach, extend, formatUnit, getUniqueID, isNullOrUndefined, isUndefined, setStyleAttribute } from '@syncfusion/ej2-base';
import { Animation, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, NotifyPropertyChanges, Property, Touch, attributes, classList, closest, compile, detach, extend, formatUnit, getUniqueID, isNullOrUndefined, isUndefined, setStyleAttribute } from '@syncfusion/ej2-base';
import { Button } from '@syncfusion/ej2-buttons';

@@ -161,3 +161,3 @@ import { getZindexPartial } from '@syncfusion/ej2-popups';

}
this.toastEle = createElement('div', { className: ROOT, id: getUniqueID('toast') });
this.toastEle = this.createElement('div', { className: ROOT, id: getUniqueID('toast') });
this.setWidthHeight();

@@ -371,3 +371,3 @@ this.setCSSClass(this.cssClass);

}
let closeBtn = createElement('div', { className: CLOSEBTN + ' e-icons ' });
let closeBtn = this.createElement('div', { className: CLOSEBTN + ' e-icons ' });
this.toastEle.appendChild(closeBtn);

@@ -389,3 +389,3 @@ }

if (this.showProgressBar) {
this.progressBarEle = createElement('div', { className: PROGRESS });
this.progressBarEle = this.createElement('div', { className: PROGRESS });
this.toastEle.insertBefore(this.progressBarEle, this.toastEle.children[0]);

@@ -424,3 +424,3 @@ this.progressObj[id].intervalId = setInterval(this.updateProgressBar.bind(this, this.progressObj[id]), 10);

}
let iconEle = createElement('div', { className: ICON + ' e-icons ' + this.icon });
let iconEle = this.createElement('div', { className: ICON + ' e-icons ' + this.icon });
this.toastEle.appendChild(iconEle);

@@ -432,5 +432,5 @@ }

}
let titleEle = createElement('div', { className: TITLE });
let titleEle = this.createElement('div', { className: TITLE });
titleEle = this.fetchEle(titleEle, this.title, 'title');
let msgContainer = createElement('div', { className: MESSAGE });
let msgContainer = this.createElement('div', { className: MESSAGE });
msgContainer.appendChild(titleEle);

@@ -443,3 +443,3 @@ this.toastEle.appendChild(msgContainer);

}
let contentEle = createElement('div', { className: CONTENT });
let contentEle = this.createElement('div', { className: CONTENT });
contentEle = this.fetchEle(contentEle, this.content, 'content');

@@ -453,3 +453,3 @@ this.appendMessageContainer(contentEle);

else {
let msgContainer = createElement('div', { className: MESSAGE });
let msgContainer = this.createElement('div', { className: MESSAGE });
msgContainer.appendChild(element);

@@ -460,3 +460,3 @@ this.toastEle.appendChild(msgContainer);

actionButtons() {
let actionBtnContainer = createElement('div', { className: ACTIOBUTTONS });
let actionBtnContainer = this.createElement('div', { className: ACTIOBUTTONS });
[].slice.call(this.buttons).forEach((actionBtn) => {

@@ -466,3 +466,3 @@ if (isNullOrUndefined(actionBtn.model)) {

}
let btnDom = createElement('button');
let btnDom = this.createElement('button');
btnDom.setAttribute('type', 'button');

@@ -469,0 +469,0 @@ if (isNullOrUndefined(actionBtn.model.cssClass) || actionBtn.model.cssClass.length === 0) {

23

dist/es6/ej2-notifications.es5.js

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

import { Animation, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, NotifyPropertyChanges, Property, Touch, attributes, classList, closest, compile, createElement, detach, extend, formatUnit, getUniqueID, isNullOrUndefined, isUndefined, setStyleAttribute } from '@syncfusion/ej2-base';
import { Animation, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, NotifyPropertyChanges, Property, Touch, attributes, classList, closest, compile, detach, extend, formatUnit, getUniqueID, isNullOrUndefined, isUndefined, setStyleAttribute } from '@syncfusion/ej2-base';
import { Button } from '@syncfusion/ej2-buttons';

@@ -192,3 +192,3 @@ import { getZindexPartial } from '@syncfusion/ej2-popups';

}
this.toastEle = createElement('div', { className: ROOT, id: getUniqueID('toast') });
this.toastEle = this.createElement('div', { className: ROOT, id: getUniqueID('toast') });
this.setWidthHeight();

@@ -404,3 +404,3 @@ this.setCSSClass(this.cssClass);

}
var closeBtn = createElement('div', { className: CLOSEBTN + ' e-icons ' });
var closeBtn = this.createElement('div', { className: CLOSEBTN + ' e-icons ' });
this.toastEle.appendChild(closeBtn);

@@ -422,3 +422,3 @@ };

if (this.showProgressBar) {
this.progressBarEle = createElement('div', { className: PROGRESS });
this.progressBarEle = this.createElement('div', { className: PROGRESS });
this.toastEle.insertBefore(this.progressBarEle, this.toastEle.children[0]);

@@ -457,3 +457,3 @@ this.progressObj[id].intervalId = setInterval(this.updateProgressBar.bind(this, this.progressObj[id]), 10);

}
var iconEle = createElement('div', { className: ICON + ' e-icons ' + this.icon });
var iconEle = this.createElement('div', { className: ICON + ' e-icons ' + this.icon });
this.toastEle.appendChild(iconEle);

@@ -465,5 +465,5 @@ };

}
var titleEle = createElement('div', { className: TITLE });
var titleEle = this.createElement('div', { className: TITLE });
titleEle = this.fetchEle(titleEle, this.title, 'title');
var msgContainer = createElement('div', { className: MESSAGE });
var msgContainer = this.createElement('div', { className: MESSAGE });
msgContainer.appendChild(titleEle);

@@ -476,3 +476,3 @@ this.toastEle.appendChild(msgContainer);

}
var contentEle = createElement('div', { className: CONTENT });
var contentEle = this.createElement('div', { className: CONTENT });
contentEle = this.fetchEle(contentEle, this.content, 'content');

@@ -486,3 +486,3 @@ this.appendMessageContainer(contentEle);

else {
var msgContainer = createElement('div', { className: MESSAGE });
var msgContainer = this.createElement('div', { className: MESSAGE });
msgContainer.appendChild(element);

@@ -493,3 +493,4 @@ this.toastEle.appendChild(msgContainer);

Toast.prototype.actionButtons = function () {
var actionBtnContainer = createElement('div', { className: ACTIOBUTTONS });
var _this = this;
var actionBtnContainer = this.createElement('div', { className: ACTIOBUTTONS });
[].slice.call(this.buttons).forEach(function (actionBtn) {

@@ -499,3 +500,3 @@ if (isNullOrUndefined(actionBtn.model)) {

}
var btnDom = createElement('button');
var btnDom = _this.createElement('button');
btnDom.setAttribute('type', 'button');

@@ -502,0 +503,0 @@ if (isNullOrUndefined(actionBtn.model.cssClass) || actionBtn.model.cssClass.length === 0) {

9

dist/global/index.d.ts

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

/*!
* filename: index.d.ts
* version : 16.2.46
* Copyright Syncfusion Inc. 2001 - 2018. All rights reserved.
* Use of this code is subject to the terms of our license.
* A copy of the current license can be obtained at any time by e-mailing
* licensing@syncfusion.com. Any infringement will be prosecuted under
* applicable laws.
*/
import * as _notifications from '@syncfusion/ej2-notifications';

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

12

index.js

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

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

18

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

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

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

@@ -25,2 +25,5 @@ "devDependencies": {

"syncfusion",
"web-components",
"javascript",
"typescript",
"ej2-notification-components",

@@ -31,6 +34,9 @@ "ej2-badge",

"toast",
"toaster",
"notification",
"notification badge",
"circle badge",
"badge css",
"toast css"
"toast css",
"alart"
],

@@ -37,0 +43,0 @@ "repository": {

81

README.md

@@ -1,11 +0,80 @@

# Overview
# ej2-notifications
Essential JS 2 CSS components contains components that are developed for notifications only from CSS like badges, toasts, etc. It comes with full documentation and support and is available under commercial and community licenses – please visit [www.syncfusion.com](www.syncfusion.com) to get started.
> 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](https://www.syncfusion.com/sales/products) or start a free 30-day trial [here](https://www.syncfusion.com/account/manage-trials/start-trials).
## Badges
> 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.
[Demos](http://ej2.syncfusion.com/demos/#/badges/default.html)
## Setup
## Toasts
To install Notification and its dependent packages, use the following command
[Demos](http://ej2.syncfusion.com/demos/#/toast/default.html)
```sh
npm install @syncfusion/ej2-notifications
```
## Components included
Following list of components are available in the package
### Badges
Badges can be used to alert users about new or unread messages, notifications, and additional information to the content. This can be used in conjunction with lists to represent each list’s timeline such as ‘new’, ‘old’, and ‘preview’.
* [Getting Started](https://ej2.syncfusion.com/documentation/badge/getting-started.html?lang=typescript&utm_source=npm&utm_campaign=badge)
* [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=badge#/material/badge/default.html)
* [Product Page](https://www.syncfusion.com/products/javascript/badge)
### Toasts
The toast is a small container, in which user can show a single or multiple informative lines with actions.
* [Getting Started](https://ej2.syncfusion.com/documentation/toast/getting-started.html?lang=typescript&utm_source=npm&utm_campaign=toast)
* [API References](https://ej2.syncfusion.com/documentation/toast/api-toast.html?utm_source=npm&utm_campaign=toast)
* [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=toast#/material/toast/default.html)
* [Product Page](https://www.syncfusion.com/products/javascript/toast)
## Supported Frameworks
`Notification` component is also offered in following list of frameworks.
1. [Angular](https://www.npmjs.com/package/@syncfusion/ej2-ng-notifications?utm_source=npm&utm_campaign=notification)
2. [React](https://www.npmjs.com/package/@syncfusion/ej2-react-notifications?utm_source=npm&utm_campaign=notification)
3. [VueJS](https://www.npmjs.com/package/@syncfusion/ej2-vue-notifications?utm_source=npm&utm_campaign=notification)
4. [ASP.NET Core](https://www.syncfusion.com/products/aspnetcore/badge)
5. [ASP.NET MVC](https://www.syncfusion.com/products/aspnetmvc/badge)
6. [JavaScript (ES5)](https://www.syncfusion.com/products/javascript/badge)
## Key Features
### Badges
1. **Types** - Provided 8 different types of Badges.
2. **Predefined Colours** - Provided 8 predefined situational colours of Badges.
3. **Position** - Supports 3 different positions, such as `default`, `top` and `bottom`.
### Toasts
1. **Position** - Enables to position the toast anywhere on the screen. It has a predefined set of positions and custom inputs for position based on the target.
2. **Autohide and TimeOut** - Toast can be expired based on the timeOut property; it hides toast automatically when reaches specific time without user interaction.
3. **Multi Toast** - Toasts can support to display multiple toasts with various time delay.
4. **Progress Bar** - Supports to visually indicate time lapse when the toast expires.
5. **Action Buttons** - Supports to add buttons in the toast for archiving any actions within the toast.
5. **Template** - User customized element can be defined for the toast using the template property.
## 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=notification) support system or [Community forum](https://www.syncfusion.com/forums/essential-js2?utm_source=npm&utm_campaign=notification).
* New [GitHub issue](https://github.com/syncfusion/ej2-notifications/issues/new).
* Ask your query in [Stack Overflow](https://stackoverflow.com/?utm_source=npm&utm_campaign=notification) with tag `syncfusion` and `ej2`.
## License
Check the license detail [here](https://github.com/syncfusion/ej2-notifications/blob/master/license?utm_source=npm&utm_campaign=notification).
## Changelog
Check the changelog [here](https://github.com/syncfusion/ej2-notifications/blob/master/CHANGELOG.md?utm_source=npm&utm_campaign=notification)
© Copyright 2018 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.

12

src/index.js

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

define(["require", "exports", "./toast/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);
});
/**
* Notification Components
*/
export * from './toast/index';

12

src/toast/index.js

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

define(["require", "exports", "./toast"], function (require, exports, toast_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(toast_1);
});
/**
* Toast modules
*/
export * from './toast';

2

src/toast/toast-model.d.ts

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

import { Component, Property, ChildProperty, INotifyPropertyChanged, NotifyPropertyChanges, Animation } from '@syncfusion/ej2-base';import { Browser, isNullOrUndefined as isNOU, createElement, getUniqueID, formatUnit, EventHandler } from '@syncfusion/ej2-base';import { EmitType, Collection, Complex, setStyleAttribute, Event, Effect, detach, AnimationModel } from '@syncfusion/ej2-base';import { attributes, extend, closest, compile as templateCompiler, classList, BaseEventArgs, isUndefined} from '@syncfusion/ej2-base';import { SwipeEventArgs, Touch } from '@syncfusion/ej2-base';import { ButtonModel, Button } from '@syncfusion/ej2-buttons';import { getZindexPartial } from '@syncfusion/ej2-popups';
import { Component, Property, ChildProperty, INotifyPropertyChanged, NotifyPropertyChanges, Animation } from '@syncfusion/ej2-base';import { Browser, isNullOrUndefined as isNOU, getUniqueID, formatUnit, EventHandler } from '@syncfusion/ej2-base';import { EmitType, Collection, Complex, setStyleAttribute, Event, Effect, detach, AnimationModel } from '@syncfusion/ej2-base';import { attributes, extend, closest, compile as templateCompiler, classList, BaseEventArgs, isUndefined} from '@syncfusion/ej2-base';import { SwipeEventArgs, Touch } from '@syncfusion/ej2-base';import { ButtonModel, Button } from '@syncfusion/ej2-buttons';import { getZindexPartial } from '@syncfusion/ej2-popups';
import {PositionX,PositionY,ToastOpenArgs,ToastBeforeOpenArgs,ToastCloseArgs,ToastClickEventArgs} from "./toast";

@@ -3,0 +3,0 @@ import {ComponentModel} from '@syncfusion/ej2-base';

1157

src/toast/toast.js

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

};
define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-buttons", "@syncfusion/ej2-popups"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, ej2_base_4, ej2_base_5, ej2_buttons_1, ej2_popups_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ROOT = 'e-toast';
var CONTAINER = 'e-toast-container';
var TITLE = 'e-toast-title';
var WIDTHFULL = 'e-toast-full-width';
var CONTENT = 'e-toast-content';
var MESSAGE = 'e-toast-message';
var ICON = 'e-toast-icon';
var PROGRESS = 'e-toast-progress';
var ACTIOBUTTONS = 'e-toast-actions';
var CLOSEBTN = 'e-toast-close-icon';
var RTL = 'e-rtl';
var ToastPosition = (function (_super) {
__extends(ToastPosition, _super);
function ToastPosition() {
return _super !== null && _super.apply(this, arguments) || this;
import { Component, Property, ChildProperty, NotifyPropertyChanges, Animation } from '@syncfusion/ej2-base';
import { Browser, isNullOrUndefined as isNOU, getUniqueID, formatUnit, EventHandler } from '@syncfusion/ej2-base';
import { Collection, Complex, setStyleAttribute, Event, detach } from '@syncfusion/ej2-base';
import { attributes, extend, closest, compile as templateCompiler, classList, isUndefined } from '@syncfusion/ej2-base';
import { Touch } from '@syncfusion/ej2-base';
import { Button } from '@syncfusion/ej2-buttons';
import { getZindexPartial } from '@syncfusion/ej2-popups';
var ROOT = 'e-toast';
var CONTAINER = 'e-toast-container';
var TITLE = 'e-toast-title';
var WIDTHFULL = 'e-toast-full-width';
var CONTENT = 'e-toast-content';
var MESSAGE = 'e-toast-message';
var ICON = 'e-toast-icon';
var PROGRESS = 'e-toast-progress';
var ACTIOBUTTONS = 'e-toast-actions';
var CLOSEBTN = 'e-toast-close-icon';
var RTL = 'e-rtl';
/**
* An object that is used to configure the Toast X Y positions.
*/
var ToastPosition = /** @class */ (function (_super) {
__extends(ToastPosition, _super);
function ToastPosition() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('Left')
], ToastPosition.prototype, "X", void 0);
__decorate([
Property('Top')
], ToastPosition.prototype, "Y", void 0);
return ToastPosition;
}(ChildProperty));
export { ToastPosition };
/**
* An object that is used to configure the action button model properties and event.
*/
var ButtonModelProps = /** @class */ (function (_super) {
__extends(ButtonModelProps, _super);
function ButtonModelProps() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(null)
], ButtonModelProps.prototype, "model", void 0);
__decorate([
Property(null)
], ButtonModelProps.prototype, "click", void 0);
return ButtonModelProps;
}(ChildProperty));
export { ButtonModelProps };
/**
* An object that is used to configure the animation object of Toast.
*/
var ToastAnimations = /** @class */ (function (_super) {
__extends(ToastAnimations, _super);
function ToastAnimations() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('FadeIn')
], ToastAnimations.prototype, "effect", void 0);
__decorate([
Property(600)
], ToastAnimations.prototype, "duration", void 0);
__decorate([
Property('ease')
], ToastAnimations.prototype, "easing", void 0);
return ToastAnimations;
}(ChildProperty));
export { ToastAnimations };
/**
* An object that is used to configure the show/hide animation settings of Toast.
*/
var ToastAnimationSettings = /** @class */ (function (_super) {
__extends(ToastAnimationSettings, _super);
function ToastAnimationSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Complex({ effect: 'FadeIn', duration: 600, easing: 'ease' }, ToastAnimations)
], ToastAnimationSettings.prototype, "show", void 0);
__decorate([
Complex({ effect: 'FadeOut', duration: 600, easing: 'ease' }, ToastAnimations)
], ToastAnimationSettings.prototype, "hide", void 0);
return ToastAnimationSettings;
}(ChildProperty));
export { ToastAnimationSettings };
/**
* The Toast is a notification pop-up that showing on desired position which can provide an information to the user.
* * ```html
* <div id="toast"/>
* <script>
* var toastObj = new Toast();
* toastObj.appendTo("#toast");
* </script>
* ```
*/
var Toast = /** @class */ (function (_super) {
__extends(Toast, _super);
/**
* Initializes a new instance of the Toast class.
* @param options - Specifies Toast model properties as options.
* @param element - Specifies the element that is rendered as a Toast.
*/
function Toast(options, element) {
return _super.call(this, options, element) || this;
}
/**
* Gets the Component module name.
* @private
*/
Toast.prototype.getModuleName = function () {
return 'toast';
};
/**
* Gets the persisted state properties of the Component.
*/
Toast.prototype.getPersistData = function () {
return this.addOnPersist([]);
};
/**
* Removes the component from the DOM and detaches all its related event handlers, attributes and classes.
*/
Toast.prototype.destroy = function () {
this.hide('All');
this.element.classList.remove(CONTAINER);
setStyleAttribute(this.element, { 'position': '', 'z-index': '' });
_super.prototype.destroy.call(this);
};
/**
* Initialize the event handler
* @private
*/
Toast.prototype.preRender = function () {
//There is no event handler
this.isDevice = Browser.isDevice;
if (this.enableRtl) {
this.element.classList.add(RTL);
}
__decorate([
ej2_base_1.Property('Left')
], ToastPosition.prototype, "X", void 0);
__decorate([
ej2_base_1.Property('Top')
], ToastPosition.prototype, "Y", void 0);
return ToastPosition;
}(ej2_base_1.ChildProperty));
exports.ToastPosition = ToastPosition;
var ButtonModelProps = (function (_super) {
__extends(ButtonModelProps, _super);
function ButtonModelProps() {
return _super !== null && _super.apply(this, arguments) || this;
};
/**
* Initialize the component rendering
* @private
*/
Toast.prototype.render = function () {
this.progressObj = [];
this.intervalId = [];
this.titleTemplate = null;
this.contentTemplate = null;
this.toastTemplate = null;
if (this.isDevice && screen.width < 768) {
new Touch(this.element, { swipe: this.swipeHandler.bind(this) });
}
__decorate([
ej2_base_1.Property(null)
], ButtonModelProps.prototype, "model", void 0);
__decorate([
ej2_base_1.Property(null)
], ButtonModelProps.prototype, "click", void 0);
return ButtonModelProps;
}(ej2_base_1.ChildProperty));
exports.ButtonModelProps = ButtonModelProps;
var ToastAnimations = (function (_super) {
__extends(ToastAnimations, _super);
function ToastAnimations() {
return _super !== null && _super.apply(this, arguments) || this;
};
/**
* To show Toast element on screen.
* @param {ToastModel} toastObj?
* @returns void
*/
Toast.prototype.show = function (toastObj) {
if (!isNOU(toastObj)) {
this.templateChanges(toastObj);
extend(this, this, toastObj);
}
__decorate([
ej2_base_1.Property('FadeIn')
], ToastAnimations.prototype, "effect", void 0);
__decorate([
ej2_base_1.Property(600)
], ToastAnimations.prototype, "duration", void 0);
__decorate([
ej2_base_1.Property('ease')
], ToastAnimations.prototype, "easing", void 0);
return ToastAnimations;
}(ej2_base_1.ChildProperty));
exports.ToastAnimations = ToastAnimations;
var ToastAnimationSettings = (function (_super) {
__extends(ToastAnimationSettings, _super);
function ToastAnimationSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
ej2_base_3.Complex({ effect: 'FadeIn', duration: 600, easing: 'ease' }, ToastAnimations)
], ToastAnimationSettings.prototype, "show", void 0);
__decorate([
ej2_base_3.Complex({ effect: 'FadeOut', duration: 600, easing: 'ease' }, ToastAnimations)
], ToastAnimationSettings.prototype, "hide", void 0);
return ToastAnimationSettings;
}(ej2_base_1.ChildProperty));
exports.ToastAnimationSettings = ToastAnimationSettings;
var Toast = (function (_super) {
__extends(Toast, _super);
function Toast(options, element) {
return _super.call(this, options, element) || this;
}
Toast.prototype.getModuleName = function () {
return 'toast';
};
Toast.prototype.getPersistData = function () {
return this.addOnPersist([]);
};
Toast.prototype.destroy = function () {
this.hide('All');
this.element.classList.remove(CONTAINER);
ej2_base_3.setStyleAttribute(this.element, { 'position': '', 'z-index': '' });
_super.prototype.destroy.call(this);
};
Toast.prototype.preRender = function () {
this.isDevice = ej2_base_2.Browser.isDevice;
if (this.enableRtl) {
this.element.classList.add(RTL);
if (isNOU(this.toastContainer)) {
this.toastContainer = this.getContainer();
var target = typeof (this.target) === 'string' ? document.querySelector(this.target) : this.target;
if (isNOU(target)) {
return;
}
};
Toast.prototype.render = function () {
this.progressObj = [];
this.intervalId = [];
this.titleTemplate = null;
this.contentTemplate = null;
this.toastTemplate = null;
if (this.isDevice && screen.width < 768) {
new ej2_base_5.Touch(this.element, { swipe: this.swipeHandler.bind(this) });
if (target.tagName === 'BODY') {
this.toastContainer.style.position = 'fixed';
}
};
Toast.prototype.show = function (toastObj) {
if (!ej2_base_2.isNullOrUndefined(toastObj)) {
this.templateChanges(toastObj);
ej2_base_4.extend(this, this, toastObj);
}
if (ej2_base_2.isNullOrUndefined(this.toastContainer)) {
this.toastContainer = this.getContainer();
var target = typeof (this.target) === 'string' ? document.querySelector(this.target) : this.target;
if (ej2_base_2.isNullOrUndefined(target)) {
return;
}
if (target.tagName === 'BODY') {
this.toastContainer.style.position = 'fixed';
}
else {
this.toastContainer.style.position = 'absolute';
target.style.position = 'relative';
}
this.setPositioning(this.position);
target.appendChild(this.toastContainer);
}
this.toastEle = ej2_base_2.createElement('div', { className: ROOT, id: ej2_base_2.getUniqueID('toast') });
this.setWidthHeight();
this.setCSSClass(this.cssClass);
ej2_base_2.isNullOrUndefined(this.template) || this.template.length === 0 ? this.personalizeToast() : this.templateRendering();
this.setProgress();
this.setCloseButton();
this.setAria();
this.appendToTarget();
};
Toast.prototype.swipeHandler = function (e) {
var toastEle = ej2_base_4.closest(e.originalEvent.target, '.' + ROOT + ':not(.' + CONTAINER + ')');
var hideAnimation = this.animation.hide.effect;
if (!ej2_base_2.isNullOrUndefined(toastEle)) {
if (e.swipeDirection === 'Right') {
this.animation.hide.effect = 'SlideRightOut';
this.hide(toastEle);
}
else if (e.swipeDirection === 'Left') {
this.animation.hide.effect = 'SlideLeftOut';
this.hide(toastEle);
}
this.animation.hide.effect = hideAnimation;
}
};
Toast.prototype.templateChanges = function (toastObj) {
if (!ej2_base_4.isUndefined(toastObj.content) && !ej2_base_2.isNullOrUndefined(this.contentTemplate) && this.content !== toastObj.content) {
this.clearContentTemplate();
}
if (!ej2_base_4.isUndefined(toastObj.title) && !ej2_base_2.isNullOrUndefined(this.titleTemplate) && this.title !== toastObj.title) {
this.clearTitleTemplate();
}
if (!ej2_base_4.isUndefined(toastObj.template) && !ej2_base_2.isNullOrUndefined(this.toastTemplate) && this.template !== toastObj.template) {
this.clearToastTemplate();
}
};
Toast.prototype.setCSSClass = function (cssClass) {
if (!ej2_base_2.isNullOrUndefined(cssClass)) {
var split = cssClass.indexOf(',') !== -1 ? ',' : ' ';
ej2_base_4.classList(this.toastEle, cssClass.split(split), []);
}
};
Toast.prototype.setWidthHeight = function () {
if (this.width === '300px') {
this.toastEle.style.width = ej2_base_2.formatUnit(this.width);
}
else if (this.width === '100%') {
this.toastContainer.classList.add(WIDTHFULL);
}
else {
this.toastEle.style.width = ej2_base_2.formatUnit(this.width);
this.toastContainer.classList.remove(WIDTHFULL);
this.toastContainer.style.position = 'absolute';
target.style.position = 'relative';
}
this.toastEle.style.height = ej2_base_2.formatUnit(this.height);
};
Toast.prototype.templateRendering = function () {
this.fetchEle(this.toastEle, this.template, 'template');
};
Toast.prototype.hide = function (element) {
if (ej2_base_2.isNullOrUndefined(this.toastContainer) || this.toastContainer.childElementCount === 0) {
return;
this.setPositioning(this.position);
target.appendChild(this.toastContainer);
}
this.toastEle = this.createElement('div', { className: ROOT, id: getUniqueID('toast') });
this.setWidthHeight();
this.setCSSClass(this.cssClass);
isNOU(this.template) || this.template.length === 0 ? this.personalizeToast() : this.templateRendering();
this.setProgress();
this.setCloseButton();
this.setAria();
this.appendToTarget();
};
Toast.prototype.swipeHandler = function (e) {
var toastEle = closest(e.originalEvent.target, '.' + ROOT + ':not(.' + CONTAINER + ')');
var hideAnimation = this.animation.hide.effect;
if (!isNOU(toastEle)) {
if (e.swipeDirection === 'Right') {
this.animation.hide.effect = 'SlideRightOut';
this.hide(toastEle);
}
if (typeof element === 'string' && element === 'All') {
for (var i = 0; i < this.toastContainer.childElementCount; i++) {
this.destroyToast(this.toastContainer.children[i]);
}
return;
else if (e.swipeDirection === 'Left') {
this.animation.hide.effect = 'SlideLeftOut';
this.hide(toastEle);
}
if (ej2_base_2.isNullOrUndefined(element)) {
element = (this.newestOnTop ? this.toastContainer.lastElementChild : this.toastContainer.firstElementChild);
this.animation.hide.effect = hideAnimation;
}
};
Toast.prototype.templateChanges = function (toastObj) {
if (!isUndefined(toastObj.content) && !isNOU(this.contentTemplate) && this.content !== toastObj.content) {
this.clearContentTemplate();
}
if (!isUndefined(toastObj.title) && !isNOU(this.titleTemplate) && this.title !== toastObj.title) {
this.clearTitleTemplate();
}
if (!isUndefined(toastObj.template) && !isNOU(this.toastTemplate) && this.template !== toastObj.template) {
this.clearToastTemplate();
}
};
Toast.prototype.setCSSClass = function (cssClass) {
if (!isNOU(cssClass)) {
var split = cssClass.indexOf(',') !== -1 ? ',' : ' ';
classList(this.toastEle, cssClass.split(split), []);
}
};
Toast.prototype.setWidthHeight = function () {
if (this.width === '300px') {
this.toastEle.style.width = formatUnit(this.width);
}
else if (this.width === '100%') {
this.toastContainer.classList.add(WIDTHFULL);
}
else {
this.toastEle.style.width = formatUnit(this.width);
this.toastContainer.classList.remove(WIDTHFULL);
}
this.toastEle.style.height = formatUnit(this.height);
};
Toast.prototype.templateRendering = function () {
this.fetchEle(this.toastEle, this.template, 'template');
};
Toast.prototype.hide = function (element) {
if (isNOU(this.toastContainer) || this.toastContainer.childElementCount === 0) {
return;
}
if (typeof element === 'string' && element === 'All') {
for (var i = 0; i < this.toastContainer.childElementCount; i++) {
this.destroyToast(this.toastContainer.children[i]);
}
this.destroyToast(element);
};
Toast.prototype.fetchEle = function (ele, value, prob) {
var templateFn;
var tempVar;
var tempArray;
prob === 'title' ? tempVar = this.titleTemplate : prob === 'content' ? tempVar = this.contentTemplate : tempVar = this.toastTemplate;
if (!ej2_base_2.isNullOrUndefined(tempVar)) {
ele.appendChild(tempVar.cloneNode(true));
return ele;
}
try {
if (document.querySelectorAll(value).length > 0) {
var elem = document.querySelector(value);
ele.appendChild(elem);
elem.style.display = '';
var clo = elem.cloneNode(true);
prob === 'title' ? this.titleTemplate = clo : prob === 'content' ? this.contentTemplate = clo : this.toastTemplate = clo;
}
}
catch (e) {
templateFn = ej2_base_4.compile(value);
}
if (!ej2_base_2.isNullOrUndefined(templateFn)) {
tempArray = templateFn({}, this, prob);
}
if (!ej2_base_2.isNullOrUndefined(tempArray) && tempArray.length > 0 && !(ej2_base_2.isNullOrUndefined(tempArray[0].tagName) && tempArray.length === 1)) {
[].slice.call(tempArray).forEach(function (el) {
if (!ej2_base_2.isNullOrUndefined(el.tagName)) {
el.style.display = '';
}
ele.appendChild(el);
});
}
else if (ele.childElementCount === 0) {
ele.innerHTML = value;
}
return;
}
if (isNOU(element)) {
element = (this.newestOnTop ? this.toastContainer.lastElementChild : this.toastContainer.firstElementChild);
}
this.destroyToast(element);
};
Toast.prototype.fetchEle = function (ele, value, prob) {
var templateFn;
var tempVar;
var tempArray;
prob === 'title' ? tempVar = this.titleTemplate : prob === 'content' ? tempVar = this.contentTemplate : tempVar = this.toastTemplate;
if (!isNOU(tempVar)) {
ele.appendChild(tempVar.cloneNode(true));
return ele;
};
Toast.prototype.clearProgress = function (intervalId) {
if (!ej2_base_2.isNullOrUndefined(this.intervalId[intervalId])) {
clearInterval(this.intervalId[intervalId]);
delete this.intervalId[intervalId];
}
try {
if (document.querySelectorAll(value).length > 0) {
var elem = document.querySelector(value);
ele.appendChild(elem);
elem.style.display = '';
var clo = elem.cloneNode(true);
prob === 'title' ? this.titleTemplate = clo : prob === 'content' ? this.contentTemplate = clo : this.toastTemplate = clo;
}
if (!ej2_base_2.isNullOrUndefined(this.progressObj[intervalId])) {
clearInterval(this.progressObj[intervalId].intervalId);
delete this.progressObj[intervalId];
}
};
Toast.prototype.clearContainerPos = function () {
var _this = this;
if (this.customPosition) {
ej2_base_3.setStyleAttribute(this.toastContainer, { 'left': '', 'top': '' });
this.toastContainer = null;
this.customPosition = false;
}
else {
[ROOT + '-top-left',
ROOT + '-top-right',
ROOT + '-bottom-left',
ROOT + '-bottom-right',
ROOT + '-bottom-center',
ROOT + '-top-center',
ROOT + '-full-width'].forEach(function (pos) {
if (!ej2_base_2.isNullOrUndefined(_this.toastContainer) && _this.toastContainer.classList.contains(pos)) {
_this.toastContainer.classList.remove(pos);
}
});
this.toastContainer = null;
}
if (!ej2_base_2.isNullOrUndefined(this.titleTemplate)) {
this.clearTitleTemplate();
}
if (!ej2_base_2.isNullOrUndefined(this.contentTemplate)) {
this.clearContentTemplate();
}
if (!ej2_base_2.isNullOrUndefined(this.toastTemplate)) {
this.clearToastTemplate();
}
};
Toast.prototype.clearTitleTemplate = function () {
this.titleTemplate.style.display = 'none';
document.body.appendChild(this.titleTemplate);
this.titleTemplate = null;
};
Toast.prototype.clearContentTemplate = function () {
this.contentTemplate.style.display = 'none';
document.body.appendChild(this.contentTemplate);
this.contentTemplate = null;
};
Toast.prototype.clearToastTemplate = function () {
this.toastTemplate.style.display = 'none';
document.body.appendChild(this.toastTemplate);
this.toastTemplate = null;
};
Toast.prototype.destroyToast = function (toastEle) {
var _this = this;
var hideAnimate = this.animation.hide;
var animate = {
duration: hideAnimate.duration, name: hideAnimate.effect, timingFunction: hideAnimate.easing
};
var intervalId = parseInt(toastEle.id.split('toast_')[1], 10);
var toastClose = {
toastContainer: this.toastContainer,
toastObj: this,
};
if (!ej2_base_2.isNullOrUndefined(this.progressObj[intervalId]) && !ej2_base_2.isNullOrUndefined(toastEle.querySelector('.' + PROGRESS))) {
this.progressObj[intervalId].progressEle.style.width = '0%';
}
animate.end = function () {
_this.clearProgress(intervalId);
ej2_base_3.detach(toastEle);
_this.trigger('close', toastClose);
if (_this.toastContainer.childElementCount === 0) {
_this.clearContainerPos();
}
catch (e) {
templateFn = templateCompiler(value);
}
if (!isNOU(templateFn)) {
tempArray = templateFn({}, this, prob);
}
if (!isNOU(tempArray) && tempArray.length > 0 && !(isNOU(tempArray[0].tagName) && tempArray.length === 1)) {
[].slice.call(tempArray).forEach(function (el) {
if (!isNOU(el.tagName)) {
el.style.display = '';
}
};
new ej2_base_1.Animation({}).animate(toastEle, animate);
};
Toast.prototype.personalizeToast = function () {
this.setIcon();
this.setTitle();
this.setContent();
this.actionButtons();
};
Toast.prototype.setAria = function () {
ej2_base_4.attributes(this.toastEle, { 'role': 'alert' });
};
Toast.prototype.setPositioning = function (pos) {
if (typeof (pos.X) === 'number' || typeof (pos.Y) === 'number' || pos.X.indexOf('%') !== -1 || pos.Y.indexOf('%') !== -1) {
ej2_base_3.setStyleAttribute(this.toastContainer, { 'left': ej2_base_2.formatUnit(pos.X), 'top': ej2_base_2.formatUnit(pos.Y) });
this.customPosition = true;
}
else {
this.toastContainer.classList.add(ROOT + '-' + pos.Y.toString().toLowerCase() + '-' + pos.X.toString().toLowerCase());
}
};
Toast.prototype.setCloseButton = function () {
if (!this.showCloseButton) {
return;
}
var closeBtn = ej2_base_2.createElement('div', { className: CLOSEBTN + ' e-icons ' });
this.toastEle.appendChild(closeBtn);
};
Toast.prototype.setProgress = function () {
if (this.timeOut > 0) {
var id = parseInt(this.toastEle.id.split('toast_')[1], 10);
this.intervalId[id] = window.setTimeout(this.destroyToast.bind(this, this.toastEle), this.timeOut);
this.progressObj[id] = { hideEta: null, intervalId: null, maxHideTime: null, element: null, timeOutId: null, progressEle: null };
this.progressObj[id].maxHideTime = parseFloat(this.timeOut + '');
this.progressObj[id].hideEta = new Date().getTime() + this.progressObj[id].maxHideTime;
this.progressObj[id].element = this.toastEle;
if (this.extendedTimeout > 0) {
ej2_base_2.EventHandler.add(this.toastEle, 'mouseover', this.toastHoverAction.bind(this, id));
ej2_base_2.EventHandler.add(this.toastEle, 'mouseleave', this.delayedToastProgress.bind(this, id));
this.progressObj[id].timeOutId = this.intervalId[id];
ele.appendChild(el);
});
}
else if (ele.childElementCount === 0) {
ele.innerHTML = value;
}
return ele;
};
Toast.prototype.clearProgress = function (intervalId) {
if (!isNOU(this.intervalId[intervalId])) {
clearInterval(this.intervalId[intervalId]);
delete this.intervalId[intervalId];
}
if (!isNOU(this.progressObj[intervalId])) {
clearInterval(this.progressObj[intervalId].intervalId);
delete this.progressObj[intervalId];
}
};
Toast.prototype.clearContainerPos = function () {
var _this = this;
if (this.customPosition) {
setStyleAttribute(this.toastContainer, { 'left': '', 'top': '' });
this.toastContainer = null;
this.customPosition = false;
}
else {
[ROOT + '-top-left',
ROOT + '-top-right',
ROOT + '-bottom-left',
ROOT + '-bottom-right',
ROOT + '-bottom-center',
ROOT + '-top-center',
ROOT + '-full-width'].forEach(function (pos) {
if (!isNOU(_this.toastContainer) && _this.toastContainer.classList.contains(pos)) {
_this.toastContainer.classList.remove(pos);
}
if (this.showProgressBar) {
this.progressBarEle = ej2_base_2.createElement('div', { className: PROGRESS });
this.toastEle.insertBefore(this.progressBarEle, this.toastEle.children[0]);
this.progressObj[id].intervalId = setInterval(this.updateProgressBar.bind(this, this.progressObj[id]), 10);
this.progressObj[id].progressEle = this.progressBarEle;
}
}
});
this.toastContainer = null;
}
if (!isNOU(this.titleTemplate)) {
this.clearTitleTemplate();
}
if (!isNOU(this.contentTemplate)) {
this.clearContentTemplate();
}
if (!isNOU(this.toastTemplate)) {
this.clearToastTemplate();
}
};
Toast.prototype.clearTitleTemplate = function () {
this.titleTemplate.style.display = 'none';
document.body.appendChild(this.titleTemplate);
this.titleTemplate = null;
};
Toast.prototype.clearContentTemplate = function () {
this.contentTemplate.style.display = 'none';
document.body.appendChild(this.contentTemplate);
this.contentTemplate = null;
};
Toast.prototype.clearToastTemplate = function () {
this.toastTemplate.style.display = 'none';
document.body.appendChild(this.toastTemplate);
this.toastTemplate = null;
};
Toast.prototype.destroyToast = function (toastEle) {
var _this = this;
var hideAnimate = this.animation.hide;
var animate = {
duration: hideAnimate.duration, name: hideAnimate.effect, timingFunction: hideAnimate.easing
};
Toast.prototype.toastHoverAction = function (id) {
clearTimeout(this.progressObj[id].timeOutId);
clearInterval(this.progressObj[id].intervalId);
this.progressObj[id].hideEta = 0;
var toastEle = this.progressObj[id].element;
if (!ej2_base_2.isNullOrUndefined(toastEle.querySelector('.' + PROGRESS))) {
this.progressObj[id].progressEle.style.width = '0%';
}
var intervalId = parseInt(toastEle.id.split('toast_')[1], 10);
var toastClose = {
toastContainer: this.toastContainer,
toastObj: this,
};
Toast.prototype.delayedToastProgress = function (id) {
var progress = this.progressObj[id];
var toastEle = progress.element;
progress.timeOutId = window.setTimeout(this.destroyToast.bind(this, toastEle), this.extendedTimeout);
progress.maxHideTime = parseFloat(this.extendedTimeout + '');
progress.hideEta = new Date().getTime() + progress.maxHideTime;
if (!ej2_base_2.isNullOrUndefined(toastEle.querySelector('.' + PROGRESS))) {
progress.intervalId = setInterval(this.updateProgressBar.bind(this, progress), 10);
if (!isNOU(this.progressObj[intervalId]) && !isNOU(toastEle.querySelector('.' + PROGRESS))) {
this.progressObj[intervalId].progressEle.style.width = '0%';
}
animate.end = function () {
_this.clearProgress(intervalId);
detach(toastEle);
_this.trigger('close', toastClose);
if (_this.toastContainer.childElementCount === 0) {
_this.clearContainerPos();
}
};
Toast.prototype.updateProgressBar = function (progressObj) {
var percentage = ((progressObj.hideEta - (new Date().getTime())) / progressObj.maxHideTime) * 100;
progressObj.progressEle.style.width = percentage + '%';
};
Toast.prototype.setIcon = function () {
if (ej2_base_2.isNullOrUndefined(this.icon) || this.icon.length === 0) {
return;
new Animation({}).animate(toastEle, animate);
};
Toast.prototype.personalizeToast = function () {
this.setIcon();
this.setTitle();
this.setContent();
this.actionButtons();
};
Toast.prototype.setAria = function () {
attributes(this.toastEle, { 'role': 'alert' });
};
Toast.prototype.setPositioning = function (pos) {
if (typeof (pos.X) === 'number' || typeof (pos.Y) === 'number' || pos.X.indexOf('%') !== -1 || pos.Y.indexOf('%') !== -1) {
setStyleAttribute(this.toastContainer, { 'left': formatUnit(pos.X), 'top': formatUnit(pos.Y) });
this.customPosition = true;
}
else {
this.toastContainer.classList.add(ROOT + '-' + pos.Y.toString().toLowerCase() + '-' + pos.X.toString().toLowerCase());
}
};
Toast.prototype.setCloseButton = function () {
if (!this.showCloseButton) {
return;
}
var closeBtn = this.createElement('div', { className: CLOSEBTN + ' e-icons ' });
this.toastEle.appendChild(closeBtn);
};
Toast.prototype.setProgress = function () {
if (this.timeOut > 0) {
var id = parseInt(this.toastEle.id.split('toast_')[1], 10);
this.intervalId[id] = window.setTimeout(this.destroyToast.bind(this, this.toastEle), this.timeOut);
this.progressObj[id] = { hideEta: null, intervalId: null, maxHideTime: null, element: null, timeOutId: null, progressEle: null };
this.progressObj[id].maxHideTime = parseFloat(this.timeOut + '');
this.progressObj[id].hideEta = new Date().getTime() + this.progressObj[id].maxHideTime;
this.progressObj[id].element = this.toastEle;
if (this.extendedTimeout > 0) {
EventHandler.add(this.toastEle, 'mouseover', this.toastHoverAction.bind(this, id));
EventHandler.add(this.toastEle, 'mouseleave', this.delayedToastProgress.bind(this, id));
this.progressObj[id].timeOutId = this.intervalId[id];
}
var iconEle = ej2_base_2.createElement('div', { className: ICON + ' e-icons ' + this.icon });
this.toastEle.appendChild(iconEle);
};
Toast.prototype.setTitle = function () {
if (ej2_base_2.isNullOrUndefined(this.title) || this.title.length === 0) {
return;
if (this.showProgressBar) {
this.progressBarEle = this.createElement('div', { className: PROGRESS });
this.toastEle.insertBefore(this.progressBarEle, this.toastEle.children[0]);
this.progressObj[id].intervalId = setInterval(this.updateProgressBar.bind(this, this.progressObj[id]), 10);
this.progressObj[id].progressEle = this.progressBarEle;
}
var titleEle = ej2_base_2.createElement('div', { className: TITLE });
titleEle = this.fetchEle(titleEle, this.title, 'title');
var msgContainer = ej2_base_2.createElement('div', { className: MESSAGE });
msgContainer.appendChild(titleEle);
}
};
Toast.prototype.toastHoverAction = function (id) {
clearTimeout(this.progressObj[id].timeOutId);
clearInterval(this.progressObj[id].intervalId);
this.progressObj[id].hideEta = 0;
var toastEle = this.progressObj[id].element;
if (!isNOU(toastEle.querySelector('.' + PROGRESS))) {
this.progressObj[id].progressEle.style.width = '0%';
}
};
Toast.prototype.delayedToastProgress = function (id) {
var progress = this.progressObj[id];
var toastEle = progress.element;
progress.timeOutId = window.setTimeout(this.destroyToast.bind(this, toastEle), this.extendedTimeout);
progress.maxHideTime = parseFloat(this.extendedTimeout + '');
progress.hideEta = new Date().getTime() + progress.maxHideTime;
if (!isNOU(toastEle.querySelector('.' + PROGRESS))) {
progress.intervalId = setInterval(this.updateProgressBar.bind(this, progress), 10);
}
};
Toast.prototype.updateProgressBar = function (progressObj) {
var percentage = ((progressObj.hideEta - (new Date().getTime())) / progressObj.maxHideTime) * 100;
progressObj.progressEle.style.width = percentage + '%';
};
Toast.prototype.setIcon = function () {
if (isNOU(this.icon) || this.icon.length === 0) {
return;
}
var iconEle = this.createElement('div', { className: ICON + ' e-icons ' + this.icon });
this.toastEle.appendChild(iconEle);
};
Toast.prototype.setTitle = function () {
if (isNOU(this.title) || this.title.length === 0) {
return;
}
var titleEle = this.createElement('div', { className: TITLE });
titleEle = this.fetchEle(titleEle, this.title, 'title');
var msgContainer = this.createElement('div', { className: MESSAGE });
msgContainer.appendChild(titleEle);
this.toastEle.appendChild(msgContainer);
};
Toast.prototype.setContent = function () {
if (isNOU(this.content) || this.content.length === 0) {
return;
}
var contentEle = this.createElement('div', { className: CONTENT });
contentEle = this.fetchEle(contentEle, this.content, 'content');
this.appendMessageContainer(contentEle);
};
Toast.prototype.appendMessageContainer = function (element) {
if (this.toastEle.querySelectorAll('.' + MESSAGE).length > 0) {
this.toastEle.querySelector('.' + MESSAGE).appendChild(element);
}
else {
var msgContainer = this.createElement('div', { className: MESSAGE });
msgContainer.appendChild(element);
this.toastEle.appendChild(msgContainer);
};
Toast.prototype.setContent = function () {
if (ej2_base_2.isNullOrUndefined(this.content) || this.content.length === 0) {
}
};
Toast.prototype.actionButtons = function () {
var _this = this;
var actionBtnContainer = this.createElement('div', { className: ACTIOBUTTONS });
[].slice.call(this.buttons).forEach(function (actionBtn) {
if (isNOU(actionBtn.model)) {
return;
}
var contentEle = ej2_base_2.createElement('div', { className: CONTENT });
contentEle = this.fetchEle(contentEle, this.content, 'content');
this.appendMessageContainer(contentEle);
};
Toast.prototype.appendMessageContainer = function (element) {
if (this.toastEle.querySelectorAll('.' + MESSAGE).length > 0) {
this.toastEle.querySelector('.' + MESSAGE).appendChild(element);
var btnDom = _this.createElement('button');
btnDom.setAttribute('type', 'button');
if (isNOU(actionBtn.model.cssClass) || actionBtn.model.cssClass.length === 0) {
actionBtn.model.cssClass = 'e-primary';
}
else {
var msgContainer = ej2_base_2.createElement('div', { className: MESSAGE });
msgContainer.appendChild(element);
this.toastEle.appendChild(msgContainer);
btnDom.classList.add('e-small');
new Button(actionBtn.model, btnDom);
if (!isNOU(actionBtn.click) && typeof (actionBtn.click) === 'function') {
EventHandler.add(btnDom, 'click', actionBtn.click);
}
actionBtnContainer.appendChild(btnDom);
});
if (actionBtnContainer.childElementCount > 0) {
this.appendMessageContainer(actionBtnContainer);
}
};
Toast.prototype.appendToTarget = function () {
var toastBeforeOpen = {
toastObj: this,
element: this.toastEle,
cancel: false
};
Toast.prototype.actionButtons = function () {
var actionBtnContainer = ej2_base_2.createElement('div', { className: ACTIOBUTTONS });
[].slice.call(this.buttons).forEach(function (actionBtn) {
if (ej2_base_2.isNullOrUndefined(actionBtn.model)) {
return;
}
var btnDom = ej2_base_2.createElement('button');
btnDom.setAttribute('type', 'button');
if (ej2_base_2.isNullOrUndefined(actionBtn.model.cssClass) || actionBtn.model.cssClass.length === 0) {
actionBtn.model.cssClass = 'e-primary';
}
btnDom.classList.add('e-small');
new ej2_buttons_1.Button(actionBtn.model, btnDom);
if (!ej2_base_2.isNullOrUndefined(actionBtn.click) && typeof (actionBtn.click) === 'function') {
ej2_base_2.EventHandler.add(btnDom, 'click', actionBtn.click);
}
actionBtnContainer.appendChild(btnDom);
});
if (actionBtnContainer.childElementCount > 0) {
this.appendMessageContainer(actionBtnContainer);
}
this.trigger('beforeOpen', toastBeforeOpen);
if (toastBeforeOpen.cancel) {
return;
}
this.toastEle.style.display = 'none';
if (this.newestOnTop && this.toastContainer.childElementCount !== 0) {
this.toastContainer.insertBefore(this.toastEle, this.toastContainer.children[0]);
}
else {
this.toastContainer.appendChild(this.toastEle);
}
EventHandler.add(this.toastEle, 'click', this.clickHandler, this);
this.toastContainer.style.zIndex = getZindexPartial(this.toastContainer) + '';
this.displayToast(this.toastEle);
};
Toast.prototype.clickHandler = function (e) {
var target = e.target;
var toastEle = closest(target, '.' + ROOT);
var clickArgs = {
element: toastEle, cancel: false, clickToClose: false, originalEvent: e, toastObj: this
};
Toast.prototype.appendToTarget = function () {
var toastBeforeOpen = {
toastObj: this,
element: this.toastEle,
cancel: false
};
this.trigger('beforeOpen', toastBeforeOpen);
if (toastBeforeOpen.cancel) {
return;
}
this.toastEle.style.display = 'none';
if (this.newestOnTop && this.toastContainer.childElementCount !== 0) {
this.toastContainer.insertBefore(this.toastEle, this.toastContainer.children[0]);
}
else {
this.toastContainer.appendChild(this.toastEle);
}
ej2_base_2.EventHandler.add(this.toastEle, 'click', this.clickHandler, this);
this.toastContainer.style.zIndex = ej2_popups_1.getZindexPartial(this.toastContainer) + '';
this.displayToast(this.toastEle);
var isCloseIcon = target.classList.contains(CLOSEBTN);
this.trigger('click', clickArgs);
if ((isCloseIcon && !clickArgs.cancel) || clickArgs.clickToClose) {
this.destroyToast(toastEle);
}
};
Toast.prototype.displayToast = function (toastEle) {
var _this = this;
var showAnimate = this.animation.show;
var animate = {
duration: showAnimate.duration, name: showAnimate.effect, timingFunction: showAnimate.easing
};
Toast.prototype.clickHandler = function (e) {
var target = e.target;
var toastEle = ej2_base_4.closest(target, '.' + ROOT);
var clickArgs = {
element: toastEle, cancel: false, clickToClose: false, originalEvent: e, toastObj: this
};
var isCloseIcon = target.classList.contains(CLOSEBTN);
this.trigger('click', clickArgs);
if ((isCloseIcon && !clickArgs.cancel) || clickArgs.clickToClose) {
this.destroyToast(toastEle);
}
var toastOpen = {
toastObj: this,
element: this.toastEle,
};
Toast.prototype.displayToast = function (toastEle) {
var _this = this;
var showAnimate = this.animation.show;
var animate = {
duration: showAnimate.duration, name: showAnimate.effect, timingFunction: showAnimate.easing
};
var toastOpen = {
toastObj: this,
element: this.toastEle,
};
animate.begin = function () {
toastEle.style.display = '';
};
animate.end = function () {
_this.trigger('open', toastOpen);
};
new ej2_base_1.Animation(animate).animate(toastEle);
animate.begin = function () {
toastEle.style.display = '';
};
Toast.prototype.getContainer = function () {
this.element.classList.add(CONTAINER);
return this.element;
animate.end = function () {
_this.trigger('open', toastOpen);
};
Toast.prototype.onPropertyChanged = function (newProp, oldProp) {
var container = this.element;
for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
var prop = _a[_i];
switch (prop) {
case 'enableRtl':
newProp.enableRtl ? container.classList.add(RTL) : container.classList.remove(RTL);
break;
}
new Animation(animate).animate(toastEle);
};
Toast.prototype.getContainer = function () {
this.element.classList.add(CONTAINER);
return this.element;
};
/**
* Called internally if any of the property value changed.
* @private
*/
Toast.prototype.onPropertyChanged = function (newProp, oldProp) {
var container = this.element;
for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
var prop = _a[_i];
switch (prop) {
case 'enableRtl':
newProp.enableRtl ? container.classList.add(RTL) : container.classList.remove(RTL);
break;
}
};
__decorate([
ej2_base_1.Property((ej2_base_2.Browser.isDevice && screen.width < 768) ? '100%' : '300px')
], Toast.prototype, "width", void 0);
__decorate([
ej2_base_1.Property('auto')
], Toast.prototype, "height", void 0);
__decorate([
ej2_base_1.Property(null)
], Toast.prototype, "title", void 0);
__decorate([
ej2_base_1.Property(null)
], Toast.prototype, "content", void 0);
__decorate([
ej2_base_1.Property(null)
], Toast.prototype, "icon", void 0);
__decorate([
ej2_base_1.Property(null)
], Toast.prototype, "cssClass", void 0);
__decorate([
ej2_base_1.Property(null)
], Toast.prototype, "template", void 0);
__decorate([
ej2_base_1.Property(true)
], Toast.prototype, "newestOnTop", void 0);
__decorate([
ej2_base_1.Property(false)
], Toast.prototype, "showCloseButton", void 0);
__decorate([
ej2_base_1.Property(false)
], Toast.prototype, "showProgressBar", void 0);
__decorate([
ej2_base_1.Property(5000)
], Toast.prototype, "timeOut", void 0);
__decorate([
ej2_base_1.Property(1000)
], Toast.prototype, "extendedTimeout", void 0);
__decorate([
ej2_base_3.Complex({}, ToastAnimationSettings)
], Toast.prototype, "animation", void 0);
__decorate([
ej2_base_3.Complex({}, ToastPosition)
], Toast.prototype, "position", void 0);
__decorate([
ej2_base_3.Collection([{}], ButtonModelProps)
], Toast.prototype, "buttons", void 0);
__decorate([
ej2_base_1.Property(document.body)
], Toast.prototype, "target", void 0);
__decorate([
ej2_base_3.Event()
], Toast.prototype, "created", void 0);
__decorate([
ej2_base_3.Event()
], Toast.prototype, "destroyed", void 0);
__decorate([
ej2_base_3.Event()
], Toast.prototype, "open", void 0);
__decorate([
ej2_base_3.Event()
], Toast.prototype, "beforeOpen", void 0);
__decorate([
ej2_base_3.Event()
], Toast.prototype, "close", void 0);
__decorate([
ej2_base_3.Event()
], Toast.prototype, "click", void 0);
Toast = __decorate([
ej2_base_1.NotifyPropertyChanges
], Toast);
return Toast;
}(ej2_base_1.Component));
exports.Toast = Toast;
});
}
};
__decorate([
Property((Browser.isDevice && screen.width < 768) ? '100%' : '300px')
], Toast.prototype, "width", void 0);
__decorate([
Property('auto')
], Toast.prototype, "height", void 0);
__decorate([
Property(null)
], Toast.prototype, "title", void 0);
__decorate([
Property(null)
], Toast.prototype, "content", void 0);
__decorate([
Property(null)
], Toast.prototype, "icon", void 0);
__decorate([
Property(null)
], Toast.prototype, "cssClass", void 0);
__decorate([
Property(null)
], Toast.prototype, "template", void 0);
__decorate([
Property(true)
], Toast.prototype, "newestOnTop", void 0);
__decorate([
Property(false)
], Toast.prototype, "showCloseButton", void 0);
__decorate([
Property(false)
], Toast.prototype, "showProgressBar", void 0);
__decorate([
Property(5000)
], Toast.prototype, "timeOut", void 0);
__decorate([
Property(1000)
], Toast.prototype, "extendedTimeout", void 0);
__decorate([
Complex({}, ToastAnimationSettings)
], Toast.prototype, "animation", void 0);
__decorate([
Complex({}, ToastPosition)
], Toast.prototype, "position", void 0);
__decorate([
Collection([{}], ButtonModelProps)
], Toast.prototype, "buttons", void 0);
__decorate([
Property(document.body)
], Toast.prototype, "target", void 0);
__decorate([
Event()
], Toast.prototype, "created", void 0);
__decorate([
Event()
], Toast.prototype, "destroyed", void 0);
__decorate([
Event()
], Toast.prototype, "open", void 0);
__decorate([
Event()
], Toast.prototype, "beforeOpen", void 0);
__decorate([
Event()
], Toast.prototype, "close", void 0);
__decorate([
Event()
], Toast.prototype, "click", void 0);
Toast = __decorate([
NotifyPropertyChanges
], Toast);
return Toast;
}(Component));
export { Toast };

12

toast.js

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

define(["require", "exports", "./src/toast/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);
});
/**
* toast
*/
export * from './src/toast/index';
dist/ej2-notifications.umd.min.js.map

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

dist/global/ej2-notifications.min.js

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

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

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc