@syncfusion/ej2-notifications - npm Package Compare versions

Comparing version 31.1.17 to 31.2.2

aceconfig.js

+//Config file for Accessibility-Checker
+module.exports = {
+    ruleArchive: "18March2024",
+    policies: ["WCAG_2_1","IBM_Accessibility"],
+    failLevels: ["violation", "potentialviolation"],
+    reportLevels: [
+        "violation",
+        "potentialviolation",
+        "recommendation",
+        "potentialrecommendation",
+        "manual",
+        "pass",
+    ],
+    outputFormat: ["html","json"],
+    label: [process.env.TRAVIS_BRANCH],
+    outputFolder:"accessibility-reports",
+  };

dist/ej2-notifications.min.js

 /*!
 *  filename: ej2-notifications.min.js
-*  version : 31.1.17
-*  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
+*  version : 31.2.2
+*  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
 *  Use of this code is subject to the terms of our license.
@@ -10,2 +10,2 @@ *  A copy of the current license can be obtained at any time by e-mailing
 */
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("SyncfusionBase"),require("SyncfusionButtons"),require("SyncfusionPopups")):"function"==typeof define&&define.amd?define(["SyncfusionBase","SyncfusionButtons","SyncfusionPopups"],e):"object"==typeof exports?exports.SyncfusionNotifications=e(require("SyncfusionBase"),require("SyncfusionButtons"),require("SyncfusionPopups")):t.SyncfusionNotifications=e(t.SyncfusionBase,t.SyncfusionButtons,t.SyncfusionPopups)}(self,((t,e,s)=>(()=>{"use strict";var i={766:e=>{e.exports=t},741:t=>{t.exports=e},197:t=>{t.exports=s}},o={};function n(t){var e=o[t];if(void 0!==e)return e.exports;var s=o[t]={exports:{}};return i[t](s,s.exports,n),s.exports}n.d=(t,e)=>{for(var s in e)n.o(e,s)&&!n.o(t,s)&&Object.defineProperty(t,s,{enumerable:!0,get:e[s]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),n.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var r={};return(()=>{n.r(r),n.d(r,{ButtonModelProps:()=>g,Message:()=>_,Severity:()=>T,ShimmerEffect:()=>I,Skeleton:()=>q,SkeletonType:()=>S,Toast:()=>O,ToastAnimationSettings:()=>b,ToastAnimations:()=>E,ToastPosition:()=>C,ToastUtility:()=>e,Variant:()=>P});var t,e,s=n(766),i=n(741),o=n(197),l=(t=function(e,s){return t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var s in e)e.hasOwnProperty(s)&&(t[s]=e[s])},t(e,s)},function(e,s){function i(){this.constructor=e}t(e,s),e.prototype=null===s?Object.create(s):(i.prototype=s.prototype,new i)}),a=function(t,e,s,i){var o,n=arguments.length,r=n<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,s,i);else for(var l=t.length-1;l>=0;l--)(o=t[l])&&(r=(n<3?o(r):n>3?o(e,s,r):o(e,s))||r);return n>3&&r&&Object.defineProperty(e,s,r),r},h="e-toast",c="e-toast-container",p="e-toast-title",d="e-toast-full-width",u="e-toast-content",f="e-toast-message",m="e-toast-progress",y="e-toast-close-icon",v="e-rtl",C=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return l(e,t),a([(0,s.Property)("Left")],e.prototype,"X",void 0),a([(0,s.Property)("Top")],e.prototype,"Y",void 0),e}(s.ChildProperty),g=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return l(e,t),a([(0,s.Property)(null)],e.prototype,"model",void 0),a([(0,s.Property)(null)],e.prototype,"click",void 0),e}(s.ChildProperty),E=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return l(e,t),a([(0,s.Property)("FadeIn")],e.prototype,"effect",void 0),a([(0,s.Property)(600)],e.prototype,"duration",void 0),a([(0,s.Property)("ease")],e.prototype,"easing",void 0),e}(s.ChildProperty),b=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return l(e,t),a([(0,s.Complex)({effect:"FadeIn",duration:600,easing:"ease"},E)],e.prototype,"show",void 0),a([(0,s.Complex)({effect:"FadeOut",duration:600,easing:"ease"},E)],e.prototype,"hide",void 0),e}(s.ChildProperty),O=function(t){function e(e,s){var i=t.call(this,e,s)||this;return i.toastCollection=[],i.needsID=!0,i}return l(e,t),e.prototype.getModuleName=function(){return"toast"},e.prototype.getPersistData=function(){return this.addOnPersist([])},e.prototype.destroy=function(){this.hide("All"),this.element.classList.remove(c),(0,s.setStyleAttribute)(this.element,{position:"","z-index":""}),(0,s.isNullOrUndefined)(this.refElement)||(0,s.isNullOrUndefined)(this.refElement.parentElement)||(this.refElement.parentElement.insertBefore(this.element,this.refElement),(0,s.detach)(this.refElement),this.refElement=void 0),this.isBlazorServer()||t.prototype.destroy.call(this),this.element&&this.element.parentElement&&this.element.parentElement.removeChild(this.element)},e.prototype.preRender=function(){this.isDevice=s.Browser.isDevice,"300px"===this.width&&(this.width=this.isDevice&&screen.width<768?"100%":"300px"),(0,s.isNullOrUndefined)(this.target)&&(this.target=document.body),this.enableRtl&&!this.isBlazorServer()&&this.element.classList.add(v)},e.prototype.render=function(){this.progressObj=[],this.intervalId=[],this.contentTemplate=null,this.toastTemplate=null,this.renderComplete(),this.initRenderClass=this.element.className},e.prototype.show=function(t){var e;if((0,s.isNullOrUndefined)(t)||(this.templateChanges(t),e=JSON.parse(JSON.stringify(t)),(0,s.extend)(this,this,t)),(0,s.isNullOrUndefined)(this.toastContainer)){this.toastContainer=this.getContainer();var i="string"==typeof this.target?document.querySelector(this.target):"object"==typeof this.target?this.target:document.body;if((0,s.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.isBlazorServer()&&this.element.classList.contains("e-control")?this.isToastModel(t):(this.toastEle=this.createElement("div",{className:h,id:(0,s.getUniqueID)("toast")}),this.setWidthHeight(),this.setCSSClass(this.cssClass),(0,s.isNullOrUndefined)(this.template)||""===this.template?this.personalizeToast():this.templateRendering(),this.setProgress(),this.setCloseButton(),this.setAria(),this.appendToTarget(t),this.isDevice&&screen.width<768&&new s.Touch(this.toastEle,{swipe:this.swipeHandler.bind(this)}),(0,s.isNullOrUndefined)(e)||((0,s.extend)(e,{element:[this.toastEle]},!0),this.toastCollection.push(e)),this.isReact&&this.renderReactTemplates())},e.prototype.showToast=function(t,e){this.toastEle=this.element.querySelector("#"+t),this.show(e)},e.prototype.isToastModel=function(t){this.toastContainer=this.element,this.setPositioning(this.position);(0,s.isNullOrUndefined)(this.element.lastElementChild)||this.setProgress(),this.setAria(),this.appendToTarget(t)},e.prototype.swipeHandler=function(t){var e=(0,s.closest)(t.originalEvent.target,"."+h+":not(."+c+")"),i=this.animation.hide.effect;(0,s.isNullOrUndefined)(e)||("Right"===t.swipeDirection?(this.animation.hide.effect="SlideRightOut",this.hideToast("swipe",e)):"Left"===t.swipeDirection&&(this.animation.hide.effect="SlideLeftOut",this.hideToast("swipe",e)),this.animation.hide.effect=i)},e.prototype.templateChanges=function(t){(0,s.isUndefined)(t.content)||(0,s.isNullOrUndefined)(this.contentTemplate)||this.content===t.content||this.clearContentTemplate(),(0,s.isUndefined)(t.template)||(0,s.isNullOrUndefined)(this.toastTemplate)||this.template===t.template||this.clearToastTemplate()},e.prototype.setCSSClass=function(t){if(t){var e=-1!==t.indexOf(",")?",":" ";(0,s.classList)(this.toastEle,t.split(e),[]),this.toastContainer&&(0,s.classList)(this.toastContainer,t.split(e),[])}},e.prototype.setWidthHeight=function(){"300px"===this.width?this.toastEle.style.width=(0,s.formatUnit)(this.width):"100%"===this.width?this.toastContainer.classList.add(d):(this.toastEle.style.width=(0,s.formatUnit)(this.width),this.toastContainer.classList.remove(d)),this.toastEle.style.height=(0,s.formatUnit)(this.height)},e.prototype.templateRendering=function(){this.fetchEle(this.toastEle,this.template,"template")},e.prototype.sanitizeHelper=function(t){if(this.enableHtmlSanitizer){var e=s.SanitizeHtmlHelper.beforeSanitize();(0,s.extend)(e,e,{cancel:!1,helper:null}),this.trigger("beforeSanitizeHtml",e),e.cancel&&!(0,s.isNullOrUndefined)(e.helper)?t=e.helper(t):e.cancel||(t=s.SanitizeHtmlHelper.serializeValue(e,t))}return t},e.prototype.hide=function(t){this.hideToast("",t)},e.prototype.hideToast=function(t,e){if(!(0,s.isNullOrUndefined)(this.toastContainer)&&0!==this.toastContainer.childElementCount)if("string"!=typeof e||"All"!==e)(0,s.isNullOrUndefined)(e)&&(e=this.newestOnTop?this.toastContainer.lastElementChild:this.toastContainer.firstElementChild),this.destroyToast(e,t);else for(var i=0;i<this.toastContainer.childElementCount;i++)this.destroyToast(this.toastContainer.children[i],t)},e.prototype.fetchEle=function(t,e,i){var o,n,r,l;if(e="string"==typeof e?this.sanitizeHelper(e):e,l=t.classList.contains(p)?this.element.id+"title":t.classList.contains(u)?this.element.id+"content":this.element.id+"template",n="content"===i?this.contentTemplate:this.toastTemplate,!(0,s.isNullOrUndefined)(n))return t.appendChild(n.cloneNode(!0)),t;try{if("function"!=typeof e&&document.querySelectorAll(e).length>0){var a=null;"title"!==i&&(a=document.querySelector(e),t.appendChild(a),a.style.display="");var h=(0,s.isNullOrUndefined)(a)?n:a.cloneNode(!0);"content"===i?this.contentTemplate=h:this.toastTemplate=h}else o=(0,s.compile)(e)}catch(t){o="object"==typeof e?(0,s.compile)(e):(0,s.compile)((0,s.initializeCSPTemplate)((function(){return e})))}if(!(0,s.isNullOrUndefined)(o))if(this.isBlazorServer()){r=o({},this,i,l,!0)}else r=o({},this,i,null,!0);return(0,s.isNullOrUndefined)(r)||!(r.length>0)||(0,s.isNullOrUndefined)(r[0].tagName)&&1===r.length?"function"!=typeof e&&0===t.childElementCount&&(t.innerHTML=e):[].slice.call(r).forEach((function(e){(0,s.isNullOrUndefined)(e.tagName)||(e.style.display=""),t.appendChild(e)})),t},e.prototype.clearProgress=function(t){(0,s.isNullOrUndefined)(this.intervalId[t])||(clearInterval(this.intervalId[t]),delete this.intervalId[t]),(0,s.isNullOrUndefined)(this.progressObj[t])||(clearInterval(this.progressObj[t].intervalId),delete this.progressObj[t])},e.prototype.removeToastContainer=function(t){t&&this.toastContainer.classList.contains("e-toast-util")&&(0,s.detach)(this.toastContainer)},e.prototype.clearContainerPos=function(t){var e=this;this.isBlazorServer()?this.toastContainer=null:(this.customPosition?((0,s.setStyleAttribute)(this.toastContainer,{left:"",top:""}),this.removeToastContainer(t),this.toastContainer=null,this.customPosition=!1):([h+"-top-left",h+"-top-right",h+"-bottom-left",h+"-bottom-right",h+"-bottom-center",h+"-top-center",h+"-full-width"].forEach((function(t){!(0,s.isNullOrUndefined)(e.toastContainer)&&e.toastContainer.classList.contains(t)&&e.toastContainer.classList.remove(t)})),this.removeToastContainer(t),this.toastContainer=null),(0,s.isNullOrUndefined)(this.contentTemplate)||this.clearContentTemplate(),(0,s.isNullOrUndefined)(this.toastTemplate)||this.clearToastTemplate())},e.prototype.clearContentTemplate=function(){this.contentTemplate.style.display="none",document.body.appendChild(this.contentTemplate),this.contentTemplate=null},e.prototype.clearToastTemplate=function(){this.toastTemplate.style.display="none",document.body.appendChild(this.toastTemplate),this.toastTemplate=null},e.prototype.isBlazorServer=function(){return(0,s.isBlazor)()&&this.isServerRendered},e.prototype.destroyToast=function(t,e){for(var i,o=this,n=0;n<this.toastCollection.length;n++)this.toastCollection[n].element[0]===t&&(i=this.toastCollection[n],this.toastCollection.splice(n,1));var r={options:this,cancel:!1,type:e,element:t,toastContainer:this.toastContainer},l=this.animation.hide,a={duration:l.duration,name:"None"===l.effect&&"Enable"===s.animationMode?"FadeOut":l.effect,timingFunction:l.easing},h=parseInt(t.id.split("toast_")[1],10),c=this.isBlazorServer()?{options:i,toastContainer:this.toastContainer}:{options:i,toastContainer:this.toastContainer,toastObj:this};this.trigger("beforeClose",r,(function(e){e.cancel||((0,s.isNullOrUndefined)(o.progressObj[h])||(0,s.isNullOrUndefined)(t.querySelector("."+m))||(o.progressObj[h].progressEle.style.width="0%"),a.end=function(){o.clearProgress(h),o.isBlazorServer()&&!(0,s.isNullOrUndefined)(i)||(0,s.detach)(t),o.trigger("close",c),0===o.toastContainer.childElementCount&&o.clearContainerPos(!0),l=null,a=null},new s.Animation(a).animate(t))}))},e.prototype.personalizeToast=function(){this.setIcon(),this.setTitle(),this.setContent(),this.actionButtons()},e.prototype.setAria=function(){(0,s.attributes)(this.toastEle,{role:"alert"})},e.prototype.setPositioning=function(t){this.isBlazorServer()||(isNaN(parseFloat(t.X))&&isNaN(parseFloat(t.Y))?this.toastContainer.classList.add(h+"-"+t.Y.toString().toLowerCase()+"-"+t.X.toString().toLowerCase()):(this.customPosition=!0,(0,s.setStyleAttribute)(this.toastContainer,{left:(0,s.formatUnit)(t.X),top:(0,s.formatUnit)(t.Y)})))},e.prototype.setCloseButton=function(){if(this.showCloseButton){this.l10n=new s.L10n("toast",{close:"Close"},this.locale),this.l10n.setLocale(this.locale);var t=this.l10n.getConstant("close"),e=this.createElement("div",{className:y+" e-icons ",attrs:{tabindex:"0","aria-label":t,role:"button"}});this.toastEle.classList.add("e-toast-header-close-icon"),this.toastEle.appendChild(e)}},e.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&&(s.EventHandler.add(this.toastEle,"mouseover",this.toastHoverAction.bind(this,t)),s.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:m}),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)}},e.prototype.toastHoverAction=function(t){clearTimeout(this.progressObj[t].timeOutId),clearInterval(this.progressObj[t].intervalId),this.progressObj[t].hideEta=0;var e=this.progressObj[t].element;(0,s.isNullOrUndefined)(e.querySelector("."+m))||(this.progressObj[t].progressEle.style.width="0%")},e.prototype.delayedToastProgress=function(t){var e=this.progressObj[t];if(!(0,s.isNullOrUndefined)(e)){var i=e.element;e.timeOutId=window.setTimeout(this.destroyToast.bind(this,i),this.extendedTimeout),e.maxHideTime=parseFloat(this.extendedTimeout+""),e.hideEta=(new Date).getTime()+e.maxHideTime,(0,s.isNullOrUndefined)(i.querySelector("."+m))||(e.intervalId=setInterval(this.updateProgressBar.bind(this,e),10))}},e.prototype.updateProgressBar=function(t){var e=(t.hideEta-(new Date).getTime())/t.maxHideTime*100;e="Ltr"===this.progressDirection?100-e:e,t.progressEle.style.width=e+"%"},e.prototype.setIcon=function(){if(!(0,s.isNullOrUndefined)(this.icon)&&0!==this.icon.length){var t=this.createElement("div",{className:"e-toast-icon e-icons "+this.icon});this.toastEle.classList.add("e-toast-header-icon"),this.toastEle.appendChild(t)}},e.prototype.setTitle=function(){if(!(0,s.isNullOrUndefined)(this.title)){var t=this.createElement("div",{className:p});t=this.fetchEle(t,this.title,"title");var e=this.createElement("div",{className:f});e.appendChild(t),this.toastEle.appendChild(e)}},e.prototype.setContent=function(){var t=this.createElement("div",{className:u}),e=this.element;if((0,s.isNullOrUndefined)(this.content)||""===this.content){var i=""!==this.element.innerHTML.replace(/\s/g,"");if((e.children.length>0||i)&&(!e.firstElementChild||!e.firstElementChild.classList.contains(h))){this.innerEle=document.createDocumentFragment();for(var o=this.createElement("div");0!==e.childNodes.length;)this.innerEle.appendChild(this.element.childNodes[0]);t.appendChild(this.innerEle),[].slice.call(t.children).forEach((function(t){o.appendChild(t.cloneNode(!0))})),this.content=o,this.appendMessageContainer(t)}}else"object"!=typeof this.content||(0,s.isNullOrUndefined)(this.content.tagName)?(t=this.fetchEle(t,this.content,"content"),this.appendMessageContainer(t)):(t.appendChild(this.content),this.content=this.content.cloneNode(!0),this.appendMessageContainer(t))},e.prototype.appendMessageContainer=function(t){if(this.toastEle.querySelectorAll("."+f).length>0)this.toastEle.querySelector("."+f).appendChild(t);else{var e=this.createElement("div",{className:f});e.appendChild(t),this.toastEle.appendChild(e)}},e.prototype.actionButtons=function(){var t=this,e=this.createElement("div",{className:"e-toast-actions"});[].slice.call(this.buttons).forEach((function(o){if(!(0,s.isNullOrUndefined)(o.model)){var n=t.createElement("button");n.setAttribute("type","button"),((0,s.isNullOrUndefined)(o.model.cssClass)||0===o.model.cssClass.length)&&(o.model.cssClass="e-primary "+t.cssClass),n.classList.add("e-small"),new i.Button(o.model,n),(0,s.isNullOrUndefined)(o.click)||"function"!=typeof o.click||s.EventHandler.add(n,"click",o.click),e.appendChild(n)}})),e.childElementCount>0&&this.appendMessageContainer(e)},e.prototype.appendToTarget=function(t){var e=this,i=this.isBlazorServer()?{options:t,element:this.toastEle,cancel:!1}:{options:t,toastObj:this,element:this.toastEle,cancel:!1};this.trigger("beforeOpen",i,(function(i){if(i.cancel){if(e.isBlazorServer()){var n=parseInt(e.toastEle.id.split("toast_")[1],10);e.clearProgress(n),(0,s.detach)(e.toastEle),0===e.toastContainer.childElementCount&&e.clearContainerPos()}}else e.isBlazorServer()||(e.toastEle.style.display="none"),e.newestOnTop&&0!==e.toastContainer.childElementCount?e.toastContainer.insertBefore(e.toastEle,e.toastContainer.children[0]):e.isBlazorServer()||e.toastContainer.appendChild(e.toastEle),(0,s.removeClass)([e.toastEle],"e-blazor-toast-hidden"),s.EventHandler.add(e.toastEle,"click",e.clickHandler,e),s.EventHandler.add(e.toastEle,"keydown",e.keyDownHandler,e),e.toastContainer.style.zIndex=(0,o.getZindexPartial)(e.toastContainer)+"",e.displayToast(e.toastEle,t)}))},e.prototype.clickHandler=function(t){var e=this;this.isBlazorServer()||t.stopPropagation();var i=t.target,o=(0,s.closest)(i,"."+h),n=this.isBlazorServer()?{element:o,cancel:!1,clickToClose:!1,originalEvent:t}:{element:o,cancel:!1,clickToClose:!1,originalEvent:t,toastObj:this},r=i.classList.contains(y);this.trigger("click",n,(function(t){(r&&!t.cancel||t.clickToClose)&&e.destroyToast(o,"click")}))},e.prototype.keyDownHandler=function(t){if(t.target.classList.contains(y)&&(13===t.keyCode||32===t.keyCode)){var e=t.target,i=(0,s.closest)(e,"."+h);this.destroyToast(i,"key")}},e.prototype.displayToast=function(t,e){var i=this,o=this.animation.show,n={duration:o.duration,name:"None"===o.effect&&"Enable"===s.animationMode?"FadeIn":o.effect,timingFunction:o.easing},r=this.isBlazorServer()?{options:e,element:this.toastEle}:{options:e,toastObj:this,element:this.toastEle};n.begin=function(){t.style.display=""},n.end=function(){i.trigger("open",r)},new s.Animation(n).animate(t)},e.prototype.getContainer=function(){return this.element.classList.add(c),this.element},e.prototype.onPropertyChanged=function(t,e){for(var s=this.element,i=0,o=Object.keys(t);i<o.length;i++){if("enableRtl"===o[i])t.enableRtl?s.classList.add(v):s.classList.remove(v)}},a([(0,s.Property)("300px")],e.prototype,"width",void 0),a([(0,s.Property)("auto")],e.prototype,"height",void 0),a([(0,s.Property)(null)],e.prototype,"title",void 0),a([(0,s.Property)(null)],e.prototype,"content",void 0),a([(0,s.Property)(!0)],e.prototype,"enableHtmlSanitizer",void 0),a([(0,s.Property)(null)],e.prototype,"icon",void 0),a([(0,s.Property)(null)],e.prototype,"cssClass",void 0),a([(0,s.Property)(null)],e.prototype,"template",void 0),a([(0,s.Property)(!0)],e.prototype,"newestOnTop",void 0),a([(0,s.Property)(!1)],e.prototype,"showCloseButton",void 0),a([(0,s.Property)(!1)],e.prototype,"showProgressBar",void 0),a([(0,s.Property)(5e3)],e.prototype,"timeOut",void 0),a([(0,s.Property)("Rtl")],e.prototype,"progressDirection",void 0),a([(0,s.Property)(1e3)],e.prototype,"extendedTimeout",void 0),a([(0,s.Complex)({},b)],e.prototype,"animation",void 0),a([(0,s.Complex)({},C)],e.prototype,"position",void 0),a([(0,s.Collection)([{}],g)],e.prototype,"buttons",void 0),a([(0,s.Property)(null)],e.prototype,"target",void 0),a([(0,s.Event)()],e.prototype,"created",void 0),a([(0,s.Event)()],e.prototype,"beforeSanitizeHtml",void 0),a([(0,s.Event)()],e.prototype,"destroyed",void 0),a([(0,s.Event)()],e.prototype,"open",void 0),a([(0,s.Event)()],e.prototype,"beforeOpen",void 0),a([(0,s.Event)()],e.prototype,"beforeClose",void 0),a([(0,s.Event)()],e.prototype,"close",void 0),a([(0,s.Event)()],e.prototype,"click",void 0),e=a([s.NotifyPropertyChanges],e)}(s.Component);!function(t){t.show=function(t,e,i){var o,n;if(document.querySelector("."+c)?o=document.querySelector("."+c):(o=(0,s.createElement)("div",{className:h+" "+c+" e-toast-util"}),document.body.appendChild(o)),"string"==typeof t){var r=void 0,l=void 0;if((0,s.isNullOrUndefined)(e))r="",l="";else switch(e){case"Warning":r="e-toast-warning",l="e-toast-warning-icon";break;case"Success":r="e-toast-success",l="e-toast-success-icon";break;case"Error":r="e-toast-danger",l="e-toast-error-icon";break;case"Information":r="e-toast-info",l="e-toast-info-icon"}n={content:t,cssClass:r,icon:l,timeOut:(0,s.isNullOrUndefined)(i)?5e3:i}}else n=t;var a=new O(n);return a.appendTo(o),a.show(),a}}(e||(e={}));var T,P,N=function(){var t=function(e,s){return t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var s in e)e.hasOwnProperty(s)&&(t[s]=e[s])},t(e,s)};return function(e,s){function i(){this.constructor=e}t(e,s),e.prototype=null===s?Object.create(s):(i.prototype=s.prototype,new i)}}(),w=function(t,e,s,i){var o,n=arguments.length,r=n<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,s,i);else for(var l=t.length-1;l>=0;l--)(o=t[l])&&(r=(n<3?o(r):n>3?o(e,s,r):o(e,s))||r);return n>3&&r&&Object.defineProperty(e,s,r),r};!function(t){t.Normal="Normal",t.Success="Success",t.Info="Info",t.Warning="Warning",t.Error="Error"}(T||(T={})),function(t){t.Text="Text",t.Outlined="Outlined",t.Filled="Filled"}(P||(P={}));var S,I,U="e-msg-icon",k="e-content-center",x="e-rtl",L="e-success",j="e-warning",H="e-info",B="e-error",R="e-outlined",z="e-filled",A="e-hidden",_=function(t){function e(e,s){var i=t.call(this,e,s)||this;return i.initialRender=!0,i}return N(e,t),e.prototype.getModuleName=function(){return"message"},e.prototype.getPersistData=function(){return this.addOnPersist([])},e.prototype.preRender=function(){this.l10n=new s.L10n("message",{close:"Close"},this.locale)},e.prototype.render=function(){this.innerContent=this.element.innerHTML,this.element.innerHTML="",this.msgElement=this.createElement("div",{className:"e-msg-content-wrap"}),this.initialize(),this.wireEvents(),this.renderComplete(),this.renderReactTemplates(),this.initialRender=!1},e.prototype.initialize=function(){this.element.setAttribute("role","alert"),this.setCssClass(),this.setIcon(),this.setContent(),this.setCloseIcon(),this.setSeverity(),this.setVariant(),this.setVisible(),this.enableRtl&&this.element.classList.add(x)},e.prototype.setIcon=function(){this.showIcon&&(this.iconElement=this.createElement("span",{className:U}),this.element.classList.contains(k)?this.msgElement.appendChild(this.iconElement):this.element.appendChild(this.iconElement))},e.prototype.setCloseIcon=function(){this.showCloseIcon&&(this.closeIcon=this.createElement("button",{attrs:{type:"button",class:"e-msg-close-icon"}}),this.element.appendChild(this.closeIcon),this.setTitle())},e.prototype.setTitle=function(){this.l10n.setLocale(this.locale);var t=this.l10n.getConstant("close");this.closeIcon.setAttribute("title",t),this.closeIcon.setAttribute("aria-label",t)},e.prototype.setContent=function(){this.txtElement=this.createElement("div",{className:"e-msg-content"}),this.element.classList.contains(k)?(this.msgElement.appendChild(this.txtElement),this.element.appendChild(this.msgElement)):this.element.appendChild(this.txtElement),this.setTemplate()},e.prototype.setTemplate=function(){var t;if((0,s.isNullOrUndefined)(this.content)||""===this.content)this.txtElement.innerHTML=this.innerContent;else if(!(0,s.isNullOrUndefined)(this.content)&&""!==this.content&&("string"==typeof this.content||"string"!=typeof this.content))if(this.isVue||"string"!=typeof this.content){if(t=(0,s.compile)(this.content),!(0,s.isNullOrUndefined)(t)){var e=t({},this,"content",this.element.id+"content",!0);e&&(e=Array.prototype.slice.call(e),(0,s.append)(e,this.txtElement),this.renderReactTemplates())}}else this.txtElement.innerHTML=this.content},e.prototype.setSeverity=function(){var t=[L,j,H,B];(0,s.removeClass)([this.element],t),"Success"===this.severity?(0,s.addClass)([this.element],L):"Warning"===this.severity?(0,s.addClass)([this.element],j):"Error"===this.severity?(0,s.addClass)([this.element],B):"Info"===this.severity&&(0,s.addClass)([this.element],H)},e.prototype.setVariant=function(){var t=[z,R];(0,s.removeClass)([this.element],t),"Outlined"===this.variant?(0,s.addClass)([this.element],R):"Filled"===this.variant&&(0,s.addClass)([this.element],z)},e.prototype.setCssClass=function(t){t&&(0,s.removeClass)([this.element],t.split(" ")),this.cssClass&&(0,s.addClass)([this.element],this.cssClass.split(" "))},e.prototype.setVisible=function(){this.visible?(0,s.removeClass)([this.element],A):((0,s.addClass)([this.element],A),this.initialRender||this.trigger("closed",{event,isInteracted:!1,element:this.element}))},e.prototype.clickHandler=function(t){this.closeMessage(t)},e.prototype.keyboardHandler=function(t){32!==t.keyCode&&13!==t.keyCode||this.closeMessage(t)},e.prototype.closeMessage=function(t){(0,s.addClass)([this.element],A),this.setProperties({visible:!1},!0);var e={event:t,isInteracted:!0,element:this.element};this.trigger("closed",e)},e.prototype.wireEvents=function(){this.showCloseIcon&&(s.EventHandler.add(this.closeIcon,"click",this.clickHandler,this),s.EventHandler.add(this.closeIcon,"keydown",this.keyboardHandler,this))},e.prototype.unWireEvents=function(){this.showCloseIcon&&(s.EventHandler.remove(this.closeIcon,"click",this.clickHandler),s.EventHandler.remove(this.closeIcon,"keydown",this.keyboardHandler))},e.prototype.onPropertyChanged=function(t,e){for(var i=0,o=Object.keys(t);i<o.length;i++){switch(o[i]){case"cssClass":this.setCssClass(e.cssClass);break;case"content":this.txtElement.innerHTML="",this.setTemplate();break;case"enableRtl":this.enableRtl?this.element.classList.add(x):this.element.classList.remove(x);break;case"locale":this.showCloseIcon&&this.setTitle();break;case"showIcon":!this.showIcon&&this.element.getElementsByClassName(U).length>0&&(0,s.detach)(this.iconElement),this.showIcon&&(this.iconElement=this.createElement("span",{className:U}),this.element.insertBefore(this.iconElement,this.txtElement));break;case"showCloseIcon":this.showCloseIcon||(0,s.isNullOrUndefined)(this.closeIcon)?(this.setCloseIcon(),this.wireEvents()):(this.unWireEvents(),(0,s.detach)(this.closeIcon));break;case"severity":this.setSeverity();break;case"variant":this.setVariant();break;case"visible":this.setVisible()}}},e.prototype.destroy=function(){var e=(0,s.isNullOrUndefined)(this.cssClass)?[""]:this.cssClass.split(" "),i=[L,j,H,B,x,A,R,z],o=1===e.length&&""===e[0]?i:i.concat(e);(0,s.removeClass)([this.element],o),this.element.removeAttribute("role"),this.unWireEvents(),(0,s.isNullOrUndefined)(this.iconElement)||(0,s.detach)(this.iconElement),(0,s.detach)(this.txtElement),(0,s.isNullOrUndefined)(this.closeIcon)||(0,s.detach)(this.closeIcon),t.prototype.destroy.call(this)},w([(0,s.Property)(null)],e.prototype,"content",void 0),w([(0,s.Property)("")],e.prototype,"cssClass",void 0),w([(0,s.Property)(!0)],e.prototype,"showIcon",void 0),w([(0,s.Property)(!1)],e.prototype,"showCloseIcon",void 0),w([(0,s.Property)("Normal")],e.prototype,"severity",void 0),w([(0,s.Property)("Text")],e.prototype,"variant",void 0),w([(0,s.Property)(!0)],e.prototype,"visible",void 0),w([(0,s.Event)()],e.prototype,"created",void 0),w([(0,s.Event)()],e.prototype,"destroyed",void 0),w([(0,s.Event)()],e.prototype,"closed",void 0),e=w([s.NotifyPropertyChanges],e)}(s.Component),D=function(){var t=function(e,s){return t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var s in e)e.hasOwnProperty(s)&&(t[s]=e[s])},t(e,s)};return function(e,s){function i(){this.constructor=e}t(e,s),e.prototype=null===s?Object.create(s):(i.prototype=s.prototype,new i)}}(),M=function(t,e,s,i){var o,n=arguments.length,r=n<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,s,i);else for(var l=t.length-1;l>=0;l--)(o=t[l])&&(r=(n<3?o(r):n>3?o(e,s,r):o(e,s))||r);return n>3&&r&&Object.defineProperty(e,s,r),r},F={TEXTSHAPE:"e-skeleton-text",CIRCLESHAPE:"e-skeleton-circle",SQUARESHAPE:"e-skeleton-square",RECTANGLESHAPE:"e-skeleton-rectangle",WAVEEFFECT:"e-shimmer-wave",PULSEEFFECT:"e-shimmer-pulse",FADEEFFECT:"e-shimmer-fade",VISIBLENONE:"e-visible-none"};!function(t){t.Text="Text",t.Circle="Circle",t.Square="Square",t.Rectangle="Rectangle"}(S||(S={})),function(t){t.Wave="Wave",t.Fade="Fade",t.Pulse="Pulse",t.None="None"}(I||(I={}));var q=function(t){function e(e,s){return t.call(this,e,s)||this}return D(e,t),e.prototype.getModuleName=function(){return"skeleton"},e.prototype.getPersistData=function(){return this.addOnPersist([])},e.prototype.preRender=function(){this.element.id||(this.element.id=(0,s.getUniqueID)("e-"+this.getModuleName())),this.updateCssClass(),(0,s.attributes)(this.element,{role:"alert","aria-busy":"true","aria-live":"polite","aria-label":this.label})},e.prototype.render=function(){this.initialize()},e.prototype.onPropertyChanged=function(t,e){for(var i=0,o=Object.keys(t);i<o.length;i++){switch(o[i]){case"width":case"height":this.updateDimension();break;case"shape":this.updateShape();break;case"shimmerEffect":this.updateEffect();break;case"visible":this.updateVisibility();break;case"label":this.element.setAttribute("aria-label",this.label);break;case"cssClass":e.cssClass&&(0,s.removeClass)([this.element],e.cssClass.split(" ")),this.updateCssClass()}}},e.prototype.destroy=function(){t.prototype.destroy.call(this);var e=["role","aria-live","aria-busy","aria-label"],i=[];this.cssClass&&(i=i.concat(this.cssClass.split(" ")));for(var o=0;o<e.length;o++)this.element.removeAttribute(e[parseInt(o.toString(),10)]);i=(i=i.concat(this.element.classList.value.match(/(e-skeleton-[^\s]+)/g)||[])).concat(this.element.classList.value.match(/(e-shimmer-[^\s]+)/g)||[]),(0,s.removeClass)([this.element],i)},e.prototype.initialize=function(){this.updateShape(),this.updateEffect(),this.updateVisibility()},e.prototype.updateShape=function(){if(!(0,s.isNullOrUndefined)(this.shape)){var t=F[this.shape.toUpperCase()+"SHAPE"],e=this.element.classList.value.match(/(e-skeleton-[^\s]+)/g)||[];this.updateDimension(),e&&(0,s.removeClass)([this.element],e),(0,s.addClass)([this.element],[t])}},e.prototype.updateDimension=function(){var t=!this.width&&["Text","Rectangle"].indexOf(this.shape)>-1?"100%":(0,s.formatUnit)(this.width),e=["Circle","Square"].indexOf(this.shape)>-1?t:(0,s.formatUnit)(this.height);this.element.style.width=t,this.element.style.height=e},e.prototype.updateEffect=function(){var t=this.element.classList.value.match(/(e-shimmer-[^\s]+)/g)||[];t&&(0,s.removeClass)([this.element],t),(0,s.isNullOrUndefined)(this.shimmerEffect)||(0,s.addClass)([this.element],[F[this.shimmerEffect.toUpperCase()+"EFFECT"]])},e.prototype.updateVisibility=function(){this.element.classList[this.visible?"remove":"add"](F.VISIBLENONE)},e.prototype.updateCssClass=function(){this.cssClass&&(0,s.addClass)([this.element],this.cssClass.split(" "))},M([(0,s.Property)("")],e.prototype,"width",void 0),M([(0,s.Property)("")],e.prototype,"height",void 0),M([(0,s.Property)(!0)],e.prototype,"visible",void 0),M([(0,s.Property)("Text")],e.prototype,"shape",void 0),M([(0,s.Property)("Wave")],e.prototype,"shimmerEffect",void 0),M([(0,s.Property)("Loading...")],e.prototype,"label",void 0),M([(0,s.Property)("")],e.prototype,"cssClass",void 0),e=M([s.NotifyPropertyChanges],e)}(s.Component)})(),r})()));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("SyncfusionBase"),require("SyncfusionButtons"),require("SyncfusionPopups")):"function"==typeof define&&define.amd?define(["SyncfusionBase","SyncfusionButtons","SyncfusionPopups"],e):"object"==typeof exports?exports.SyncfusionNotifications=e(require("SyncfusionBase"),require("SyncfusionButtons"),require("SyncfusionPopups")):t.SyncfusionNotifications=e(t.SyncfusionBase,t.SyncfusionButtons,t.SyncfusionPopups)}(self,(t,e,s)=>(()=>{"use strict";var i={766:e=>{e.exports=t},741:t=>{t.exports=e},197:t=>{t.exports=s}},o={};function n(t){var e=o[t];if(void 0!==e)return e.exports;var s=o[t]={exports:{}};return i[t](s,s.exports,n),s.exports}n.d=(t,e)=>{for(var s in e)n.o(e,s)&&!n.o(t,s)&&Object.defineProperty(t,s,{enumerable:!0,get:e[s]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),n.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var r={};return(()=>{n.r(r),n.d(r,{ButtonModelProps:()=>g,Message:()=>_,Severity:()=>T,ShimmerEffect:()=>I,Skeleton:()=>q,SkeletonType:()=>S,Toast:()=>O,ToastAnimationSettings:()=>b,ToastAnimations:()=>E,ToastPosition:()=>C,ToastUtility:()=>e,Variant:()=>P});var t,e,s=n(766),i=n(741),o=n(197),l=(t=function(e,s){return t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var s in e)e.hasOwnProperty(s)&&(t[s]=e[s])},t(e,s)},function(e,s){function i(){this.constructor=e}t(e,s),e.prototype=null===s?Object.create(s):(i.prototype=s.prototype,new i)}),a=function(t,e,s,i){var o,n=arguments.length,r=n<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,s,i);else for(var l=t.length-1;l>=0;l--)(o=t[l])&&(r=(n<3?o(r):n>3?o(e,s,r):o(e,s))||r);return n>3&&r&&Object.defineProperty(e,s,r),r},h="e-toast",c="e-toast-container",p="e-toast-title",d="e-toast-full-width",u="e-toast-content",f="e-toast-message",m="e-toast-progress",y="e-toast-close-icon",v="e-rtl",C=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return l(e,t),a([(0,s.Property)("Left")],e.prototype,"X",void 0),a([(0,s.Property)("Top")],e.prototype,"Y",void 0),e}(s.ChildProperty),g=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return l(e,t),a([(0,s.Property)(null)],e.prototype,"model",void 0),a([(0,s.Property)(null)],e.prototype,"click",void 0),e}(s.ChildProperty),E=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return l(e,t),a([(0,s.Property)("FadeIn")],e.prototype,"effect",void 0),a([(0,s.Property)(600)],e.prototype,"duration",void 0),a([(0,s.Property)("ease")],e.prototype,"easing",void 0),e}(s.ChildProperty),b=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return l(e,t),a([(0,s.Complex)({effect:"FadeIn",duration:600,easing:"ease"},E)],e.prototype,"show",void 0),a([(0,s.Complex)({effect:"FadeOut",duration:600,easing:"ease"},E)],e.prototype,"hide",void 0),e}(s.ChildProperty),O=function(t){function e(e,s){var i=t.call(this,e,s)||this;return i.toastCollection=[],i.needsID=!0,i}return l(e,t),e.prototype.getModuleName=function(){return"toast"},e.prototype.getPersistData=function(){return this.addOnPersist([])},e.prototype.destroy=function(){this.hide("All"),this.element.classList.remove(c),(0,s.setStyleAttribute)(this.element,{position:"","z-index":""}),(0,s.isNullOrUndefined)(this.refElement)||(0,s.isNullOrUndefined)(this.refElement.parentElement)||(this.refElement.parentElement.insertBefore(this.element,this.refElement),(0,s.detach)(this.refElement),this.refElement=void 0),this.isBlazorServer()||t.prototype.destroy.call(this),this.element&&this.element.parentElement&&this.element.parentElement.removeChild(this.element)},e.prototype.preRender=function(){this.isDevice=s.Browser.isDevice,"300px"===this.width&&(this.width=this.isDevice&&screen.width<768?"100%":"300px"),(0,s.isNullOrUndefined)(this.target)&&(this.target=document.body),this.enableRtl&&!this.isBlazorServer()&&this.element.classList.add(v)},e.prototype.render=function(){this.progressObj=[],this.intervalId=[],this.contentTemplate=null,this.toastTemplate=null,this.renderComplete(),this.initRenderClass=this.element.className},e.prototype.show=function(t){var e;if((0,s.isNullOrUndefined)(t)||(this.templateChanges(t),e=JSON.parse(JSON.stringify(t)),(0,s.extend)(this,this,t)),(0,s.isNullOrUndefined)(this.toastContainer)){this.toastContainer=this.getContainer();var i="string"==typeof this.target?document.querySelector(this.target):"object"==typeof this.target?this.target:document.body;if((0,s.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.isBlazorServer()&&this.element.classList.contains("e-control")?this.isToastModel(t):(this.toastEle=this.createElement("div",{className:h,id:(0,s.getUniqueID)("toast")}),this.setWidthHeight(),this.setCSSClass(this.cssClass),(0,s.isNullOrUndefined)(this.template)||""===this.template?this.personalizeToast():this.templateRendering(),this.setProgress(),this.setCloseButton(),this.setAria(),this.appendToTarget(t),this.isDevice&&screen.width<768&&new s.Touch(this.toastEle,{swipe:this.swipeHandler.bind(this)}),(0,s.isNullOrUndefined)(e)||((0,s.extend)(e,{element:[this.toastEle]},!0),this.toastCollection.push(e)),this.isReact&&this.renderReactTemplates())},e.prototype.showToast=function(t,e){this.toastEle=this.element.querySelector("#"+t),this.show(e)},e.prototype.isToastModel=function(t){this.toastContainer=this.element,this.setPositioning(this.position);(0,s.isNullOrUndefined)(this.element.lastElementChild)||this.setProgress(),this.setAria(),this.appendToTarget(t)},e.prototype.swipeHandler=function(t){var e=(0,s.closest)(t.originalEvent.target,"."+h+":not(."+c+")"),i=this.animation.hide.effect;(0,s.isNullOrUndefined)(e)||("Right"===t.swipeDirection?(this.animation.hide.effect="SlideRightOut",this.hideToast("swipe",e)):"Left"===t.swipeDirection&&(this.animation.hide.effect="SlideLeftOut",this.hideToast("swipe",e)),this.animation.hide.effect=i)},e.prototype.templateChanges=function(t){(0,s.isUndefined)(t.content)||(0,s.isNullOrUndefined)(this.contentTemplate)||this.content===t.content||this.clearContentTemplate(),(0,s.isUndefined)(t.template)||(0,s.isNullOrUndefined)(this.toastTemplate)||this.template===t.template||this.clearToastTemplate()},e.prototype.setCSSClass=function(t){if(t){var e=-1!==t.indexOf(",")?",":" ";(0,s.classList)(this.toastEle,t.split(e),[]),this.toastContainer&&(0,s.classList)(this.toastContainer,t.split(e),[])}},e.prototype.setWidthHeight=function(){"300px"===this.width?this.toastEle.style.width=(0,s.formatUnit)(this.width):"100%"===this.width?this.toastContainer.classList.add(d):(this.toastEle.style.width=(0,s.formatUnit)(this.width),this.toastContainer.classList.remove(d)),this.toastEle.style.height=(0,s.formatUnit)(this.height)},e.prototype.templateRendering=function(){this.fetchEle(this.toastEle,this.template,"template")},e.prototype.sanitizeHelper=function(t){if(this.enableHtmlSanitizer){var e=s.SanitizeHtmlHelper.beforeSanitize();(0,s.extend)(e,e,{cancel:!1,helper:null}),this.trigger("beforeSanitizeHtml",e),e.cancel&&!(0,s.isNullOrUndefined)(e.helper)?t=e.helper(t):e.cancel||(t=s.SanitizeHtmlHelper.serializeValue(e,t))}return t},e.prototype.hide=function(t){this.hideToast("",t)},e.prototype.hideToast=function(t,e){if(!(0,s.isNullOrUndefined)(this.toastContainer)&&0!==this.toastContainer.childElementCount)if("string"!=typeof e||"All"!==e)(0,s.isNullOrUndefined)(e)&&(e=this.newestOnTop?this.toastContainer.lastElementChild:this.toastContainer.firstElementChild),this.destroyToast(e,t);else for(var i=0;i<this.toastContainer.childElementCount;i++)this.destroyToast(this.toastContainer.children[i],t)},e.prototype.fetchEle=function(t,e,i){var o,n,r,l;if(e="string"==typeof e?this.sanitizeHelper(e):e,l=t.classList.contains(p)?this.element.id+"title":t.classList.contains(u)?this.element.id+"content":this.element.id+"template",n="content"===i?this.contentTemplate:this.toastTemplate,!(0,s.isNullOrUndefined)(n))return t.appendChild(n.cloneNode(!0)),t;try{if("function"!=typeof e&&document.querySelectorAll(e).length>0){var a=null;"title"!==i&&(a=document.querySelector(e),t.appendChild(a),a.style.display="");var h=(0,s.isNullOrUndefined)(a)?n:a.cloneNode(!0);"content"===i?this.contentTemplate=h:this.toastTemplate=h}else o=(0,s.compile)(e)}catch(t){o="object"==typeof e?(0,s.compile)(e):(0,s.compile)((0,s.initializeCSPTemplate)(function(){return e}))}if(!(0,s.isNullOrUndefined)(o))if(this.isBlazorServer()){r=o({},this,i,l,!0)}else r=o({},this,i,null,!0);return(0,s.isNullOrUndefined)(r)||!(r.length>0)||(0,s.isNullOrUndefined)(r[0].tagName)&&1===r.length?"function"!=typeof e&&0===t.childElementCount&&(t.innerHTML=e):[].slice.call(r).forEach(function(e){(0,s.isNullOrUndefined)(e.tagName)||(e.style.display=""),t.appendChild(e)}),t},e.prototype.clearProgress=function(t){(0,s.isNullOrUndefined)(this.intervalId[t])||(clearInterval(this.intervalId[t]),delete this.intervalId[t]),(0,s.isNullOrUndefined)(this.progressObj[t])||(clearInterval(this.progressObj[t].intervalId),delete this.progressObj[t])},e.prototype.removeToastContainer=function(t){t&&this.toastContainer.classList.contains("e-toast-util")&&(0,s.detach)(this.toastContainer)},e.prototype.clearContainerPos=function(t){var e=this;this.isBlazorServer()?this.toastContainer=null:(this.customPosition?((0,s.setStyleAttribute)(this.toastContainer,{left:"",top:""}),this.removeToastContainer(t),this.toastContainer=null,this.customPosition=!1):([h+"-top-left",h+"-top-right",h+"-bottom-left",h+"-bottom-right",h+"-bottom-center",h+"-top-center",h+"-full-width"].forEach(function(t){!(0,s.isNullOrUndefined)(e.toastContainer)&&e.toastContainer.classList.contains(t)&&e.toastContainer.classList.remove(t)}),this.removeToastContainer(t),this.toastContainer=null),(0,s.isNullOrUndefined)(this.contentTemplate)||this.clearContentTemplate(),(0,s.isNullOrUndefined)(this.toastTemplate)||this.clearToastTemplate())},e.prototype.clearContentTemplate=function(){this.contentTemplate.style.display="none",document.body.appendChild(this.contentTemplate),this.contentTemplate=null},e.prototype.clearToastTemplate=function(){this.toastTemplate.style.display="none",document.body.appendChild(this.toastTemplate),this.toastTemplate=null},e.prototype.isBlazorServer=function(){return(0,s.isBlazor)()&&this.isServerRendered},e.prototype.destroyToast=function(t,e){for(var i,o=this,n=0;n<this.toastCollection.length;n++)this.toastCollection[n].element[0]===t&&(i=this.toastCollection[n],this.toastCollection.splice(n,1));var r={options:this,cancel:!1,type:e,element:t,toastContainer:this.toastContainer},l=this.animation.hide,a={duration:l.duration,name:"None"===l.effect&&"Enable"===s.animationMode?"FadeOut":l.effect,timingFunction:l.easing},h=parseInt(t.id.split("toast_")[1],10),c=this.isBlazorServer()?{options:i,toastContainer:this.toastContainer}:{options:i,toastContainer:this.toastContainer,toastObj:this};this.trigger("beforeClose",r,function(e){e.cancel||((0,s.isNullOrUndefined)(o.progressObj[h])||(0,s.isNullOrUndefined)(t.querySelector("."+m))||(o.progressObj[h].progressEle.style.width="0%"),a.end=function(){o.clearProgress(h),o.isBlazorServer()&&!(0,s.isNullOrUndefined)(i)||(0,s.detach)(t),o.trigger("close",c),0===o.toastContainer.childElementCount&&o.clearContainerPos(!0),l=null,a=null},new s.Animation(a).animate(t))})},e.prototype.personalizeToast=function(){this.setIcon(),this.setTitle(),this.setContent(),this.actionButtons()},e.prototype.setAria=function(){(0,s.attributes)(this.toastEle,{role:"alert"})},e.prototype.setPositioning=function(t){this.isBlazorServer()||(isNaN(parseFloat(t.X))&&isNaN(parseFloat(t.Y))?this.toastContainer.classList.add(h+"-"+t.Y.toString().toLowerCase()+"-"+t.X.toString().toLowerCase()):(this.customPosition=!0,(0,s.setStyleAttribute)(this.toastContainer,{left:(0,s.formatUnit)(t.X),top:(0,s.formatUnit)(t.Y)})))},e.prototype.setCloseButton=function(){if(this.showCloseButton){this.l10n=new s.L10n("toast",{close:"Close"},this.locale),this.l10n.setLocale(this.locale);var t=this.l10n.getConstant("close"),e=this.createElement("div",{className:y+" e-icons ",attrs:{tabindex:"0","aria-label":t,role:"button"}});this.toastEle.classList.add("e-toast-header-close-icon"),this.toastEle.appendChild(e)}},e.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&&(s.EventHandler.add(this.toastEle,"mouseover",this.toastHoverAction.bind(this,t)),s.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:m}),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)}},e.prototype.toastHoverAction=function(t){clearTimeout(this.progressObj[t].timeOutId),clearInterval(this.progressObj[t].intervalId),this.progressObj[t].hideEta=0;var e=this.progressObj[t].element;(0,s.isNullOrUndefined)(e.querySelector("."+m))||(this.progressObj[t].progressEle.style.width="0%")},e.prototype.delayedToastProgress=function(t){var e=this.progressObj[t];if(!(0,s.isNullOrUndefined)(e)){var i=e.element;e.timeOutId=window.setTimeout(this.destroyToast.bind(this,i),this.extendedTimeout),e.maxHideTime=parseFloat(this.extendedTimeout+""),e.hideEta=(new Date).getTime()+e.maxHideTime,(0,s.isNullOrUndefined)(i.querySelector("."+m))||(e.intervalId=setInterval(this.updateProgressBar.bind(this,e),10))}},e.prototype.updateProgressBar=function(t){var e=(t.hideEta-(new Date).getTime())/t.maxHideTime*100;e="Ltr"===this.progressDirection?100-e:e,t.progressEle.style.width=e+"%"},e.prototype.setIcon=function(){if(!(0,s.isNullOrUndefined)(this.icon)&&0!==this.icon.length){var t=this.createElement("div",{className:"e-toast-icon e-icons "+this.icon});this.toastEle.classList.add("e-toast-header-icon"),this.toastEle.appendChild(t)}},e.prototype.setTitle=function(){if(!(0,s.isNullOrUndefined)(this.title)){var t=this.createElement("div",{className:p});t=this.fetchEle(t,this.title,"title");var e=this.createElement("div",{className:f});e.appendChild(t),this.toastEle.appendChild(e)}},e.prototype.setContent=function(){var t=this.createElement("div",{className:u}),e=this.element;if((0,s.isNullOrUndefined)(this.content)||""===this.content){var i=""!==this.element.innerHTML.replace(/\s/g,"");if((e.children.length>0||i)&&(!e.firstElementChild||!e.firstElementChild.classList.contains(h))){this.innerEle=document.createDocumentFragment();for(var o=this.createElement("div");0!==e.childNodes.length;)this.innerEle.appendChild(this.element.childNodes[0]);t.appendChild(this.innerEle),[].slice.call(t.children).forEach(function(t){o.appendChild(t.cloneNode(!0))}),this.content=o,this.appendMessageContainer(t)}}else"object"!=typeof this.content||(0,s.isNullOrUndefined)(this.content.tagName)?(t=this.fetchEle(t,this.content,"content"),this.appendMessageContainer(t)):(t.appendChild(this.content),this.content=this.content.cloneNode(!0),this.appendMessageContainer(t))},e.prototype.appendMessageContainer=function(t){if(this.toastEle.querySelectorAll("."+f).length>0)this.toastEle.querySelector("."+f).appendChild(t);else{var e=this.createElement("div",{className:f});e.appendChild(t),this.toastEle.appendChild(e)}},e.prototype.actionButtons=function(){var t=this,e=this.createElement("div",{className:"e-toast-actions"});[].slice.call(this.buttons).forEach(function(o){if(!(0,s.isNullOrUndefined)(o.model)){var n=t.createElement("button");n.setAttribute("type","button"),((0,s.isNullOrUndefined)(o.model.cssClass)||0===o.model.cssClass.length)&&(o.model.cssClass="e-primary "+t.cssClass),n.classList.add("e-small"),new i.Button(o.model,n),(0,s.isNullOrUndefined)(o.click)||"function"!=typeof o.click||s.EventHandler.add(n,"click",o.click),e.appendChild(n)}}),e.childElementCount>0&&this.appendMessageContainer(e)},e.prototype.appendToTarget=function(t){var e=this,i=this.isBlazorServer()?{options:t,element:this.toastEle,cancel:!1}:{options:t,toastObj:this,element:this.toastEle,cancel:!1};this.trigger("beforeOpen",i,function(i){if(i.cancel){if(e.isBlazorServer()){var n=parseInt(e.toastEle.id.split("toast_")[1],10);e.clearProgress(n),(0,s.detach)(e.toastEle),0===e.toastContainer.childElementCount&&e.clearContainerPos()}}else e.isBlazorServer()||(e.toastEle.style.display="none"),e.newestOnTop&&0!==e.toastContainer.childElementCount?e.toastContainer.insertBefore(e.toastEle,e.toastContainer.children[0]):e.isBlazorServer()||e.toastContainer.appendChild(e.toastEle),(0,s.removeClass)([e.toastEle],"e-blazor-toast-hidden"),s.EventHandler.add(e.toastEle,"click",e.clickHandler,e),s.EventHandler.add(e.toastEle,"keydown",e.keyDownHandler,e),e.toastContainer.style.zIndex=(0,o.getZindexPartial)(e.toastContainer)+"",e.displayToast(e.toastEle,t)})},e.prototype.clickHandler=function(t){var e=this;this.isBlazorServer()||t.stopPropagation();var i=t.target,o=(0,s.closest)(i,"."+h),n=this.isBlazorServer()?{element:o,cancel:!1,clickToClose:!1,originalEvent:t}:{element:o,cancel:!1,clickToClose:!1,originalEvent:t,toastObj:this},r=i.classList.contains(y);this.trigger("click",n,function(t){(r&&!t.cancel||t.clickToClose)&&e.destroyToast(o,"click")})},e.prototype.keyDownHandler=function(t){if(t.target.classList.contains(y)&&(13===t.keyCode||32===t.keyCode)){var e=t.target,i=(0,s.closest)(e,"."+h);this.destroyToast(i,"key")}},e.prototype.displayToast=function(t,e){var i=this,o=this.animation.show,n={duration:o.duration,name:"None"===o.effect&&"Enable"===s.animationMode?"FadeIn":o.effect,timingFunction:o.easing},r=this.isBlazorServer()?{options:e,element:this.toastEle}:{options:e,toastObj:this,element:this.toastEle};n.begin=function(){t.style.display=""},n.end=function(){i.trigger("open",r)},new s.Animation(n).animate(t)},e.prototype.getContainer=function(){return this.element.classList.add(c),this.element},e.prototype.onPropertyChanged=function(t,e){for(var s=this.element,i=0,o=Object.keys(t);i<o.length;i++){if("enableRtl"===o[i])t.enableRtl?s.classList.add(v):s.classList.remove(v)}},a([(0,s.Property)("300px")],e.prototype,"width",void 0),a([(0,s.Property)("auto")],e.prototype,"height",void 0),a([(0,s.Property)(null)],e.prototype,"title",void 0),a([(0,s.Property)(null)],e.prototype,"content",void 0),a([(0,s.Property)(!0)],e.prototype,"enableHtmlSanitizer",void 0),a([(0,s.Property)(null)],e.prototype,"icon",void 0),a([(0,s.Property)(null)],e.prototype,"cssClass",void 0),a([(0,s.Property)(null)],e.prototype,"template",void 0),a([(0,s.Property)(!0)],e.prototype,"newestOnTop",void 0),a([(0,s.Property)(!1)],e.prototype,"showCloseButton",void 0),a([(0,s.Property)(!1)],e.prototype,"showProgressBar",void 0),a([(0,s.Property)(5e3)],e.prototype,"timeOut",void 0),a([(0,s.Property)("Rtl")],e.prototype,"progressDirection",void 0),a([(0,s.Property)(1e3)],e.prototype,"extendedTimeout",void 0),a([(0,s.Complex)({},b)],e.prototype,"animation",void 0),a([(0,s.Complex)({},C)],e.prototype,"position",void 0),a([(0,s.Collection)([{}],g)],e.prototype,"buttons",void 0),a([(0,s.Property)(null)],e.prototype,"target",void 0),a([(0,s.Event)()],e.prototype,"created",void 0),a([(0,s.Event)()],e.prototype,"beforeSanitizeHtml",void 0),a([(0,s.Event)()],e.prototype,"destroyed",void 0),a([(0,s.Event)()],e.prototype,"open",void 0),a([(0,s.Event)()],e.prototype,"beforeOpen",void 0),a([(0,s.Event)()],e.prototype,"beforeClose",void 0),a([(0,s.Event)()],e.prototype,"close",void 0),a([(0,s.Event)()],e.prototype,"click",void 0),e=a([s.NotifyPropertyChanges],e)}(s.Component);!function(t){t.show=function(t,e,i){var o,n;if(document.querySelector("."+c)?o=document.querySelector("."+c):(o=(0,s.createElement)("div",{className:h+" "+c+" e-toast-util"}),document.body.appendChild(o)),"string"==typeof t){var r=void 0,l=void 0;if((0,s.isNullOrUndefined)(e))r="",l="";else switch(e){case"Warning":r="e-toast-warning",l="e-toast-warning-icon";break;case"Success":r="e-toast-success",l="e-toast-success-icon";break;case"Error":r="e-toast-danger",l="e-toast-error-icon";break;case"Information":r="e-toast-info",l="e-toast-info-icon"}n={content:t,cssClass:r,icon:l,timeOut:(0,s.isNullOrUndefined)(i)?5e3:i}}else n=t;var a=new O(n);return a.appendTo(o),a.show(),a}}(e||(e={}));var T,P,N=function(){var t=function(e,s){return t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var s in e)e.hasOwnProperty(s)&&(t[s]=e[s])},t(e,s)};return function(e,s){function i(){this.constructor=e}t(e,s),e.prototype=null===s?Object.create(s):(i.prototype=s.prototype,new i)}}(),w=function(t,e,s,i){var o,n=arguments.length,r=n<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,s,i);else for(var l=t.length-1;l>=0;l--)(o=t[l])&&(r=(n<3?o(r):n>3?o(e,s,r):o(e,s))||r);return n>3&&r&&Object.defineProperty(e,s,r),r};!function(t){t.Normal="Normal",t.Success="Success",t.Info="Info",t.Warning="Warning",t.Error="Error"}(T||(T={})),function(t){t.Text="Text",t.Outlined="Outlined",t.Filled="Filled"}(P||(P={}));var S,I,U="e-msg-icon",k="e-content-center",x="e-rtl",L="e-success",j="e-warning",H="e-info",B="e-error",R="e-outlined",z="e-filled",A="e-hidden",_=function(t){function e(e,s){var i=t.call(this,e,s)||this;return i.initialRender=!0,i}return N(e,t),e.prototype.getModuleName=function(){return"message"},e.prototype.getPersistData=function(){return this.addOnPersist([])},e.prototype.preRender=function(){this.l10n=new s.L10n("message",{close:"Close"},this.locale)},e.prototype.render=function(){this.innerContent=this.element.innerHTML,this.element.innerHTML="",this.msgElement=this.createElement("div",{className:"e-msg-content-wrap"}),this.initialize(),this.wireEvents(),this.renderComplete(),this.renderReactTemplates(),this.initialRender=!1},e.prototype.initialize=function(){this.element.setAttribute("role","alert"),this.setCssClass(),this.setIcon(),this.setContent(),this.setCloseIcon(),this.setSeverity(),this.setVariant(),this.setVisible(),this.enableRtl&&this.element.classList.add(x)},e.prototype.setIcon=function(){this.showIcon&&(this.iconElement=this.createElement("span",{className:U}),this.element.classList.contains(k)?this.msgElement.appendChild(this.iconElement):this.element.appendChild(this.iconElement))},e.prototype.setCloseIcon=function(){this.showCloseIcon&&(this.closeIcon=this.createElement("button",{attrs:{type:"button",class:"e-msg-close-icon"}}),this.element.appendChild(this.closeIcon),this.setTitle())},e.prototype.setTitle=function(){this.l10n.setLocale(this.locale);var t=this.l10n.getConstant("close");this.closeIcon.setAttribute("title",t),this.closeIcon.setAttribute("aria-label",t)},e.prototype.setContent=function(){this.txtElement=this.createElement("div",{className:"e-msg-content"}),this.element.classList.contains(k)?(this.msgElement.appendChild(this.txtElement),this.element.appendChild(this.msgElement)):this.element.appendChild(this.txtElement),this.setTemplate()},e.prototype.setTemplate=function(){var t;if((0,s.isNullOrUndefined)(this.content)||""===this.content)this.txtElement.innerHTML=this.innerContent;else if(!(0,s.isNullOrUndefined)(this.content)&&""!==this.content&&("string"==typeof this.content||"string"!=typeof this.content))if(this.isVue||"string"!=typeof this.content){if(t=(0,s.compile)(this.content),!(0,s.isNullOrUndefined)(t)){var e=t({},this,"content",this.element.id+"content",!0);e&&(e=Array.prototype.slice.call(e),(0,s.append)(e,this.txtElement),this.renderReactTemplates())}}else this.txtElement.innerHTML=this.content},e.prototype.setSeverity=function(){var t=[L,j,H,B];(0,s.removeClass)([this.element],t),"Success"===this.severity?(0,s.addClass)([this.element],L):"Warning"===this.severity?(0,s.addClass)([this.element],j):"Error"===this.severity?(0,s.addClass)([this.element],B):"Info"===this.severity&&(0,s.addClass)([this.element],H)},e.prototype.setVariant=function(){var t=[z,R];(0,s.removeClass)([this.element],t),"Outlined"===this.variant?(0,s.addClass)([this.element],R):"Filled"===this.variant&&(0,s.addClass)([this.element],z)},e.prototype.setCssClass=function(t){t&&(0,s.removeClass)([this.element],t.split(" ")),this.cssClass&&(0,s.addClass)([this.element],this.cssClass.split(" "))},e.prototype.setVisible=function(){this.visible?(0,s.removeClass)([this.element],A):((0,s.addClass)([this.element],A),this.initialRender||this.trigger("closed",{event,isInteracted:!1,element:this.element}))},e.prototype.clickHandler=function(t){this.closeMessage(t)},e.prototype.keyboardHandler=function(t){32!==t.keyCode&&13!==t.keyCode||this.closeMessage(t)},e.prototype.closeMessage=function(t){(0,s.addClass)([this.element],A),this.setProperties({visible:!1},!0);var e={event:t,isInteracted:!0,element:this.element};this.trigger("closed",e)},e.prototype.wireEvents=function(){this.showCloseIcon&&(s.EventHandler.add(this.closeIcon,"click",this.clickHandler,this),s.EventHandler.add(this.closeIcon,"keydown",this.keyboardHandler,this))},e.prototype.unWireEvents=function(){this.showCloseIcon&&(s.EventHandler.remove(this.closeIcon,"click",this.clickHandler),s.EventHandler.remove(this.closeIcon,"keydown",this.keyboardHandler))},e.prototype.onPropertyChanged=function(t,e){for(var i=0,o=Object.keys(t);i<o.length;i++){switch(o[i]){case"cssClass":this.setCssClass(e.cssClass);break;case"content":this.txtElement.innerHTML="",this.setTemplate();break;case"enableRtl":this.enableRtl?this.element.classList.add(x):this.element.classList.remove(x);break;case"locale":this.showCloseIcon&&this.setTitle();break;case"showIcon":!this.showIcon&&this.element.getElementsByClassName(U).length>0&&(0,s.detach)(this.iconElement),this.showIcon&&(this.iconElement=this.createElement("span",{className:U}),this.element.insertBefore(this.iconElement,this.txtElement));break;case"showCloseIcon":this.showCloseIcon||(0,s.isNullOrUndefined)(this.closeIcon)?(this.setCloseIcon(),this.wireEvents()):(this.unWireEvents(),(0,s.detach)(this.closeIcon));break;case"severity":this.setSeverity();break;case"variant":this.setVariant();break;case"visible":this.setVisible()}}},e.prototype.destroy=function(){var e=(0,s.isNullOrUndefined)(this.cssClass)?[""]:this.cssClass.split(" "),i=[L,j,H,B,x,A,R,z],o=1===e.length&&""===e[0]?i:i.concat(e);(0,s.removeClass)([this.element],o),this.element.removeAttribute("role"),this.unWireEvents(),(0,s.isNullOrUndefined)(this.iconElement)||(0,s.detach)(this.iconElement),(0,s.detach)(this.txtElement),(0,s.isNullOrUndefined)(this.closeIcon)||(0,s.detach)(this.closeIcon),t.prototype.destroy.call(this)},w([(0,s.Property)(null)],e.prototype,"content",void 0),w([(0,s.Property)("")],e.prototype,"cssClass",void 0),w([(0,s.Property)(!0)],e.prototype,"showIcon",void 0),w([(0,s.Property)(!1)],e.prototype,"showCloseIcon",void 0),w([(0,s.Property)("Normal")],e.prototype,"severity",void 0),w([(0,s.Property)("Text")],e.prototype,"variant",void 0),w([(0,s.Property)(!0)],e.prototype,"visible",void 0),w([(0,s.Event)()],e.prototype,"created",void 0),w([(0,s.Event)()],e.prototype,"destroyed",void 0),w([(0,s.Event)()],e.prototype,"closed",void 0),e=w([s.NotifyPropertyChanges],e)}(s.Component),D=function(){var t=function(e,s){return t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var s in e)e.hasOwnProperty(s)&&(t[s]=e[s])},t(e,s)};return function(e,s){function i(){this.constructor=e}t(e,s),e.prototype=null===s?Object.create(s):(i.prototype=s.prototype,new i)}}(),M=function(t,e,s,i){var o,n=arguments.length,r=n<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,s,i);else for(var l=t.length-1;l>=0;l--)(o=t[l])&&(r=(n<3?o(r):n>3?o(e,s,r):o(e,s))||r);return n>3&&r&&Object.defineProperty(e,s,r),r},F={TEXTSHAPE:"e-skeleton-text",CIRCLESHAPE:"e-skeleton-circle",SQUARESHAPE:"e-skeleton-square",RECTANGLESHAPE:"e-skeleton-rectangle",WAVEEFFECT:"e-shimmer-wave",PULSEEFFECT:"e-shimmer-pulse",FADEEFFECT:"e-shimmer-fade",VISIBLENONE:"e-visible-none"};!function(t){t.Text="Text",t.Circle="Circle",t.Square="Square",t.Rectangle="Rectangle"}(S||(S={})),function(t){t.Wave="Wave",t.Fade="Fade",t.Pulse="Pulse",t.None="None"}(I||(I={}));var q=function(t){function e(e,s){return t.call(this,e,s)||this}return D(e,t),e.prototype.getModuleName=function(){return"skeleton"},e.prototype.getPersistData=function(){return this.addOnPersist([])},e.prototype.preRender=function(){this.element.id||(this.element.id=(0,s.getUniqueID)("e-"+this.getModuleName())),this.updateCssClass(),(0,s.attributes)(this.element,{role:"alert","aria-busy":"true","aria-live":"polite","aria-label":this.label})},e.prototype.render=function(){this.initialize()},e.prototype.onPropertyChanged=function(t,e){for(var i=0,o=Object.keys(t);i<o.length;i++){switch(o[i]){case"width":case"height":this.updateDimension();break;case"shape":this.updateShape();break;case"shimmerEffect":this.updateEffect();break;case"visible":this.updateVisibility();break;case"label":this.element.setAttribute("aria-label",this.label);break;case"cssClass":e.cssClass&&(0,s.removeClass)([this.element],e.cssClass.split(" ")),this.updateCssClass()}}},e.prototype.destroy=function(){t.prototype.destroy.call(this);var e=["role","aria-live","aria-busy","aria-label"],i=[];this.cssClass&&(i=i.concat(this.cssClass.split(" ")));for(var o=0;o<e.length;o++)this.element.removeAttribute(e[parseInt(o.toString(),10)]);i=(i=i.concat(this.element.classList.value.match(/(e-skeleton-[^\s]+)/g)||[])).concat(this.element.classList.value.match(/(e-shimmer-[^\s]+)/g)||[]),(0,s.removeClass)([this.element],i)},e.prototype.initialize=function(){this.updateShape(),this.updateEffect(),this.updateVisibility()},e.prototype.updateShape=function(){if(!(0,s.isNullOrUndefined)(this.shape)){var t=F[this.shape.toUpperCase()+"SHAPE"],e=this.element.classList.value.match(/(e-skeleton-[^\s]+)/g)||[];this.updateDimension(),e&&(0,s.removeClass)([this.element],e),(0,s.addClass)([this.element],[t])}},e.prototype.updateDimension=function(){var t=!this.width&&["Text","Rectangle"].indexOf(this.shape)>-1?"100%":(0,s.formatUnit)(this.width),e=["Circle","Square"].indexOf(this.shape)>-1?t:(0,s.formatUnit)(this.height);this.element.style.width=t,this.element.style.height=e},e.prototype.updateEffect=function(){var t=this.element.classList.value.match(/(e-shimmer-[^\s]+)/g)||[];t&&(0,s.removeClass)([this.element],t),(0,s.isNullOrUndefined)(this.shimmerEffect)||(0,s.addClass)([this.element],[F[this.shimmerEffect.toUpperCase()+"EFFECT"]])},e.prototype.updateVisibility=function(){this.element.classList[this.visible?"remove":"add"](F.VISIBLENONE)},e.prototype.updateCssClass=function(){this.cssClass&&(0,s.addClass)([this.element],this.cssClass.split(" "))},M([(0,s.Property)("")],e.prototype,"width",void 0),M([(0,s.Property)("")],e.prototype,"height",void 0),M([(0,s.Property)(!0)],e.prototype,"visible",void 0),M([(0,s.Property)("Text")],e.prototype,"shape",void 0),M([(0,s.Property)("Wave")],e.prototype,"shimmerEffect",void 0),M([(0,s.Property)("Loading...")],e.prototype,"label",void 0),M([(0,s.Property)("")],e.prototype,"cssClass",void 0),e=M([s.NotifyPropertyChanges],e)}(s.Component)})(),r})());

dist/ej2-notifications.umd.min.js

 /*!
 *  filename: ej2-notifications.umd.min.js
-*  version : 31.1.17
-*  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
+*  version : 31.2.2
+*  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
 *  Use of this code is subject to the terms of our license.
@@ -6,0 +6,0 @@ *  A copy of the current license can be obtained at any time by e-mailing

dist/global/ej2-notifications.min.js

 /*!
 *  filename: ej2-notifications.min.js
-*  version : 31.1.17
-*  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
+*  version : 31.2.2
+*  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
 *  Use of this code is subject to the terms of our license.
@@ -6,0 +6,0 @@ *  A copy of the current license can be obtained at any time by e-mailing

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 31.1.17
-*  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
+*  version : 31.2.2
+*  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
 *  Use of this code is subject to the terms of our license.
@@ -6,0 +6,0 @@ *  A copy of the current license can be obtained at any time by e-mailing

package.json

 {
-  "_from": "@syncfusion/ej2-notifications@*",
-  "_id": "@syncfusion/ej2-notifications@21.6.0",
-  "_inBundle": false,
-  "_integrity": "sha512-qiGRld/0spKL6IwNlOKwbfCAt3XZkvef5QVrt4sVpQWYLa03twGREM0GtZ/I9ca/igc2MgqTrRSEqLf3/14Wvg==",
-  "_location": "/@syncfusion/ej2-notifications",
-  "_phantomChildren": {},
-  "_requested": {
-    "type": "range",
-    "registry": true,
-    "raw": "@syncfusion/ej2-notifications@*",
-    "name": "@syncfusion/ej2-notifications",
-    "escapedName": "@syncfusion%2fej2-notifications",
-    "scope": "@syncfusion",
-    "rawSpec": "*",
-    "saveSpec": null,
-    "fetchSpec": "*"
-  },
-  "_requiredBy": [
-    "/",
-    "/@syncfusion/ej2",
-    "/@syncfusion/ej2-angular-notifications",
-    "/@syncfusion/ej2-dropdowns",
-    "/@syncfusion/ej2-gantt",
-    "/@syncfusion/ej2-grids",
-    "/@syncfusion/ej2-inplace-editor",
-    "/@syncfusion/ej2-interactive-chat",
-    "/@syncfusion/ej2-kanban",
-    "/@syncfusion/ej2-pdfviewer",
-    "/@syncfusion/ej2-react-notifications",
-    "/@syncfusion/ej2-vue-notifications"
-  ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-development/@syncfusion/ej2-notifications/-/ej2-notifications-21.6.0.tgz",
-  "_shasum": "78f39cac3b93f5961f83a1510d7992548603acda",
-  "_spec": "@syncfusion/ej2-notifications@*",
-  "_where": "D:\\SF3992\\WFH\\Nexus\\release",
-  "author": {
-    "name": "Syncfusion Inc."
-  },
-  "bundleDependencies": false,
+  "name": "@syncfusion/ej2-notifications",
+  "version": "31.2.2",
+  "description": "A package of Essential JS 2 notification components such as Toast and Badge which used to notify important information to end-users.",
+  "author": "Syncfusion Inc.",
+  "license": "SEE LICENSE IN license",
+  "main": "./dist/ej2-notifications.umd.min.js",
+  "module": "./index.js",
+  "es2015": "./dist/es6/ej2-notifications.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~31.1.17",
-    "@syncfusion/ej2-buttons": "~31.1.17",
-    "@syncfusion/ej2-popups": "~31.1.17"
+    "@syncfusion/ej2-base": "~31.2.2",
+    "@syncfusion/ej2-buttons": "~31.2.2",
+    "@syncfusion/ej2-popups": "~31.2.2"
   },
-  "deprecated": false,
-  "description": "A package of Essential JS 2 notification components such as Toast and Badge which used to notify important information to end-users.",
   "devDependencies": {},
-  "es2015": "./dist/es6/ej2-notifications.es5.js",
   "keywords": [
@@ -69,6 +35,2 @@ "ej2",
   ],
-  "license": "SEE LICENSE IN license",
-  "main": "./dist/ej2-notifications.umd.min.js",
-  "module": "./index.js",
-  "name": "@syncfusion/ej2-notifications",
   "repository": {
@@ -79,5 +41,4 @@ "type": "git",
   "typings": "index.d.ts",
-  "version": "31.1.17",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

styles/fluent2-lite.css

@@ -207,14 +207,19 @@
   content: "\e7e7";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-success-icon::before {
   content: "\e701";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-error-icon::before {
   content: "\e700";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-info-icon::before {
   content: "\\e704";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-warning-icon::before {
   content: "\e703";
+  font-family: "e-icons";
 }
@@ -221,0 +226,0 @@

styles/fluent2.css

@@ -253,14 +253,19 @@
   content: "\e7e7";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-success-icon::before {
   content: "\e701";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-error-icon::before {
   content: "\e700";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-info-icon::before {
   content: "\\e704";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-warning-icon::before {
   content: "\e703";
+  font-family: "e-icons";
 }
@@ -267,0 +272,0 @@

styles/material3-dark-lite.css

@@ -206,14 +206,19 @@
   content: "\e7e7";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-success-icon::before {
   content: "\e727";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-error-icon::before {
   content: "\e878";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-info-icon::before {
   content: "\e800";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-warning-icon::before {
   content: "\e88b";
+  font-family: "e-icons";
 }
@@ -220,0 +225,0 @@

styles/material3-dark.css

@@ -252,14 +252,19 @@
   content: "\e7e7";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-success-icon::before {
   content: "\e727";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-error-icon::before {
   content: "\e878";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-info-icon::before {
   content: "\e800";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-warning-icon::before {
   content: "\e88b";
+  font-family: "e-icons";
 }
@@ -266,0 +271,0 @@

styles/material3-lite.css

@@ -208,14 +208,19 @@
   content: "\e7e7";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-success-icon::before {
   content: "\e727";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-error-icon::before {
   content: "\e878";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-info-icon::before {
   content: "\e800";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-warning-icon::before {
   content: "\e88b";
+  font-family: "e-icons";
 }
@@ -222,0 +227,0 @@

styles/material3.css

@@ -254,14 +254,19 @@
   content: "\e7e7";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-success-icon::before {
   content: "\e727";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-error-icon::before {
   content: "\e878";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-info-icon::before {
   content: "\e800";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-warning-icon::before {
   content: "\e88b";
+  font-family: "e-icons";
 }
@@ -268,0 +273,0 @@

styles/toast/fluent2.css

@@ -9,14 +9,19 @@
   content: "\e7e7";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-success-icon::before {
   content: "\e701";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-error-icon::before {
   content: "\e700";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-info-icon::before {
   content: "\\e704";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-warning-icon::before {
   content: "\e703";
+  font-family: "e-icons";
 }
@@ -23,0 +28,0 @@

styles/toast/icons/_fluent2.scss

@@ -5,2 +5,3 @@ @include export-module('toast-material-icons') {
       content: $toast-close-icon;
+      font-family: 'e-icons';
     }
@@ -10,2 +11,3 @@
       content: $toast-success-icon;
+      font-family: 'e-icons';
     }
@@ -15,2 +17,3 @@
       content: $toast-error-icon;
+      font-family: 'e-icons';
     }
@@ -20,2 +23,3 @@
       content: $toast-info-icon;
+      font-family: 'e-icons';
     }
@@ -25,4 +29,5 @@
       content: $toast-warning-icon;
+      font-family: 'e-icons';
     }
   }
 }

styles/toast/icons/_fusionnew.scss

@@ -5,2 +5,3 @@ @include export-module('toast-material-icons') {
       content: $toast-close-icon;
+      font-family: 'e-icons';
     }
@@ -10,2 +11,3 @@
       content: $toast-success-icon;
+      font-family: 'e-icons';
     }
@@ -15,2 +17,3 @@
       content: $toast-error-icon;
+      font-family: 'e-icons';
     }
@@ -20,2 +23,3 @@
       content: $toast-info-icon;
+      font-family: 'e-icons';
     }
@@ -25,4 +29,5 @@
       content: $toast-warning-icon;
+      font-family: 'e-icons';
     }
   }
 }

styles/toast/icons/_material3.scss

@@ -5,2 +5,3 @@ @include export-module('toast-material-icons') {
       content: $toast-close-icon;
+      font-family: 'e-icons';
     }
@@ -10,2 +11,3 @@
       content: $toast-success-icon;
+      font-family: 'e-icons';
     }
@@ -15,2 +17,3 @@
       content: $toast-error-icon;
+      font-family: 'e-icons';
     }
@@ -20,2 +23,3 @@
       content: $toast-info-icon;
+      font-family: 'e-icons';
     }
@@ -25,4 +29,5 @@
       content: $toast-warning-icon;
+      font-family: 'e-icons';
     }
   }
 }

styles/toast/material3-dark.css

@@ -5,14 +5,19 @@
   content: "\e7e7";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-success-icon::before {
   content: "\e727";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-error-icon::before {
   content: "\e878";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-info-icon::before {
   content: "\e800";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-warning-icon::before {
   content: "\e88b";
+  font-family: "e-icons";
 }
@@ -19,0 +24,0 @@

styles/toast/material3.css

@@ -7,14 +7,19 @@
   content: "\e7e7";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-success-icon::before {
   content: "\e727";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-error-icon::before {
   content: "\e878";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-info-icon::before {
   content: "\e800";
+  font-family: "e-icons";
 }
 .e-toast .e-toast-warning-icon::before {
   content: "\e88b";
+  font-family: "e-icons";
 }
@@ -21,0 +26,0 @@

dist/ts/global.d.ts

-/**
- * Notification Components
- */
-export * from './index';

dist/ts/global.ts

-/**
- * Notification Components
- */
-export * from './index';

dist/ts/index.d.ts

-/**
- * Notification Components
- */
-export * from './toast/index';
-export * from './message/index';
-export * from './skeleton/index';

dist/ts/index.ts

-
-/**
- * Notification Components
- */
-export * from './toast/index';
-export * from './message/index';
-export * from './skeleton/index';

dist/ts/message/index.d.ts

-/**
- * Message modules
- */
-export * from './message';
-export * from './message-model';

dist/ts/message/index.ts

-/**
- * Message modules
- */
-export * from './message';
-export * from './message-model';

dist/ts/message/message-model.d.ts

-import { Component, INotifyPropertyChanged, NotifyPropertyChanges, addClass, removeClass, L10n, KeyboardEventArgs } from '@syncfusion/ej2-base';import { EmitType, Event, Property, detach, EventHandler, isNullOrUndefined as isNOU, compile, append } from '@syncfusion/ej2-base';
-import {Severity,Variant,MessageCloseEventArgs} from "./message";
-import {ComponentModel} from '@syncfusion/ej2-base';
-
-/**
- * Interface for a class Message
- */
-export interface MessageModel extends ComponentModel{
-
-    /**
-     * Specifies the content to be displayed in the Message component. It can be a paragraph, a list, or any other HTML element.
-     *
-     * @default null
-     * @angularType string | object
-     * @reactType string | function | JSX.Element
-     * @vueType string | function
-     * @aspType string
-     */
-    content?: string | Function;
-
-    /**
-     * Specifies the CSS class or multiple classes separated by space that can be appended to the root element of the Message component to customize the message.
-     *
-     * @default ''
-     */
-    cssClass?: string;
-
-    /**
-     * Shows or hides the severity icon in the Message component. When set to true, the severity icon is displayed at the left edge of the Message component.
-     * This icon will be distinctive based on the severity property.
-     *
-     * @default true
-     */
-    showIcon?: boolean;
-
-    /**
-     * Shows or hides the close icon in the Message component. An end user can click the close icon to hide the message. The closed event is triggered when the message is closed.
-     *
-     * @default false
-     */
-    showCloseIcon?: boolean;
-
-    /**
-     * Specifies the severity of the message, which is used to define the appearance (icons and colors) of the message. The available severity messages are Normal, Success, Info, Warning, and Error.
-     *
-     * @isenumeration true
-     * @default Severity.Normal
-     * @asptype Severity
-     */
-    severity?: string | Severity;
-
-    /**
-     * Specifies the variant from predefined appearance variants to display the content of the Message component. The available variants are Text, Outlined, and Filled.
-     *
-     * @isenumeration true
-     * @default Variant.Text
-     * @asptype Variant
-     */
-    variant?: string | Variant;
-
-    /**
-     * Shows or hides the visibility of the Message component. When set to false, the Message component will be hidden.
-     *
-     * @default true
-     */
-    visible?: boolean;
-
-    /**
-     * Triggers when the Message component is created successfully.
-     *
-     * @event created
-     */
-    created?: EmitType<Object>;
-
-    /**
-     * Triggers when the Message component is destroyed successfully.
-     *
-     * @event destroyed
-     */
-    destroyed?: EmitType<Event>;
-
-    /**
-     * Triggers when the Message component is closed successfully.
-     *
-     * @event closed
-     */
-    closed?: EmitType<MessageCloseEventArgs>
-
-}

dist/ts/message/message.d.ts

-import { Component, INotifyPropertyChanged } from '@syncfusion/ej2-base';
-import { EmitType } from '@syncfusion/ej2-base';
-import { MessageModel } from './message-model';
-/**
- * Specifies the type of severity to display the message with distinctive icons and colors.
- */
-export declare enum Severity {
-    /**
-     * The message is displayed with icons and colors to denote it as a normal message.
-     */
-    Normal = "Normal",
-    /**
-     * The message is displayed with icons and colors to denote it as a success message.
-     */
-    Success = "Success",
-    /**
-     * The message is displayed with icons and colors to denote it as information.
-     */
-    Info = "Info",
-    /**
-     * The message is displayed with icons and colors to denote it as a warning message.
-     */
-    Warning = "Warning",
-    /**
-     * The message is displayed with icons and colors to denote it as an error message.
-     */
-    Error = "Error"
-}
-/**
- * Specifies the predefined appearance variants for the component to display.
- */
-export declare enum Variant {
-    /**
-     * Denotes the severity is differentiated using text color and light background color.
-     */
-    Text = "Text",
-    /**
-     * Denotes the severity is differentiated using text color and border without background.
-     */
-    Outlined = "Outlined",
-    /**
-     * Denotes the severity is differentiated using text color and dark background color.
-     */
-    Filled = "Filled"
-}
-/**
- * Provides information about the closed event.
- */
-export interface MessageCloseEventArgs {
-    /**
-     * Returns the element.
-     */
-    element: Element;
-    /**
-     * Returns the original event arguments.
-     */
-    event: Event;
-    /**
-     * Determines whether the event is triggered by interaction.
-     */
-    isInteracted: boolean;
-}
-/**
- * The Message component displays messages with severity by differentiating icons and colors to denote the importance and context of the message to the end user.
- * ```html
- * <div id="msg"></div>
- * <script>
- *   var msgObj: Message = new Message({
- *      content: 'Editing is restricted',
- *      showCloseIcon: true
- *   })
- *   msgObj.appendTo('#msg');
- * </script>
- * ```
- *
- */
-export declare class Message extends Component<HTMLElement> implements INotifyPropertyChanged {
-    private iconElement;
-    private closeIcon;
-    private txtElement;
-    private initialRender;
-    private l10n;
-    private innerContent;
-    private msgElement;
-    /**
-     * Specifies the content to be displayed in the Message component. It can be a paragraph, a list, or any other HTML element.
-     *
-     * @default null
-     * @angularType string | object
-     * @reactType string | function | JSX.Element
-     * @vueType string | function
-     * @aspType string
-     */
-    content: string | Function;
-    /**
-     * Specifies the CSS class or multiple classes separated by space that can be appended to the root element of the Message component to customize the message.
-     *
-     * @default ''
-     */
-    cssClass: string;
-    /**
-     * Shows or hides the severity icon in the Message component. When set to true, the severity icon is displayed at the left edge of the Message component.
-     * This icon will be distinctive based on the severity property.
-     *
-     * @default true
-     */
-    showIcon: boolean;
-    /**
-     * Shows or hides the close icon in the Message component. An end user can click the close icon to hide the message. The closed event is triggered when the message is closed.
-     *
-     * @default false
-     */
-    showCloseIcon: boolean;
-    /**
-     * Specifies the severity of the message, which is used to define the appearance (icons and colors) of the message. The available severity messages are Normal, Success, Info, Warning, and Error.
-     *
-     * @isenumeration true
-     * @default Severity.Normal
-     * @asptype Severity
-     */
-    severity: string | Severity;
-    /**
-     * Specifies the variant from predefined appearance variants to display the content of the Message component. The available variants are Text, Outlined, and Filled.
-     *
-     * @isenumeration true
-     * @default Variant.Text
-     * @asptype Variant
-     */
-    variant: string | Variant;
-    /**
-     * Shows or hides the visibility of the Message component. When set to false, the Message component will be hidden.
-     *
-     * @default true
-     */
-    visible: boolean;
-    /**
-     * Triggers when the Message component is created successfully.
-     *
-     * @event created
-     */
-    created: EmitType<Object>;
-    /**
-     * Triggers when the Message component is destroyed successfully.
-     *
-     * @event destroyed
-     */
-    destroyed: EmitType<Event>;
-    /**
-     * Triggers when the Message component is closed successfully.
-     *
-     * @event closed
-     */
-    closed: EmitType<MessageCloseEventArgs>;
-    /**
-     * Constructor for creating the Message component widget.
-     *
-     * @param {MessageModel}options - Specifies the Message component interface.
-     * @param {HTMLElement}element - Specifies the target element.
-     */
-    constructor(options?: MessageModel, element?: HTMLElement);
-    /**
-     * Gets the Message component module name.
-     *
-     * @returns {string} - Returns the string.
-     * @private
-     */
-    getModuleName(): string;
-    /**
-     * Get the persisted state properties of the Message component.
-     *
-     * @returns {string} - Returns the string.
-     */
-    getPersistData(): string;
-    /**
-     * Method to initialize the variables for the Message component.
-     *
-     * @returns {void}
-     * @private
-     */
-    preRender(): void;
-    /**
-     * Method to initialize the Message component rendering.
-     *
-     * @returns {void}
-     * @private
-     */
-    render(): void;
-    private initialize;
-    private setIcon;
-    private setCloseIcon;
-    private setTitle;
-    private setContent;
-    private setTemplate;
-    private setSeverity;
-    private setVariant;
-    private setCssClass;
-    private setVisible;
-    private clickHandler;
-    private keyboardHandler;
-    private closeMessage;
-    private wireEvents;
-    private unWireEvents;
-    /**
-     * Method to handle the dynamic changes of the Message component properties.
-     *
-     * @param {MessageModel} newProp - Specifies the new property.
-     * @param {MessageModel} oldProp - Specifies the old property.
-     * @returns {void}
-     * @private
-     */
-    onPropertyChanged(newProp?: MessageModel, oldProp?: MessageModel): void;
-    /**
-     * Method to destroy the Message component. It removes the component from the DOM and detaches all its bound events. It also removes the attributes and classes of the component.
-     *
-     * @returns {void}
-     */
-    destroy(): void;
-}

dist/ts/message/message.ts

-import { Component, INotifyPropertyChanged, NotifyPropertyChanges, addClass, removeClass, L10n, KeyboardEventArgs } from '@syncfusion/ej2-base';
-import { EmitType, Event, Property, detach, EventHandler, isNullOrUndefined as isNOU, compile, append } from '@syncfusion/ej2-base';
-import { MessageModel } from './message-model';
-
-/**
- * Specifies the type of severity to display the message with distinctive icons and colors.
- */
-export enum Severity {
-    /**
-     * The message is displayed with icons and colors to denote it as a normal message.
-     */
-    Normal = 'Normal',
-    /**
-     * The message is displayed with icons and colors to denote it as a success message.
-     */
-    Success = 'Success',
-    /**
-     * The message is displayed with icons and colors to denote it as information.
-     */
-    Info = 'Info',
-    /**
-     * The message is displayed with icons and colors to denote it as a warning message.
-     */
-    Warning = 'Warning',
-    /**
-     * The message is displayed with icons and colors to denote it as an error message.
-     */
-    Error = 'Error'
-}
-
-/**
- * Specifies the predefined appearance variants for the component to display.
- */
-export enum Variant {
-    /**
-     * Denotes the severity is differentiated using text color and light background color.
-     */
-    Text = 'Text',
-    /**
-     * Denotes the severity is differentiated using text color and border without background.
-     */
-    Outlined = 'Outlined',
-    /**
-     * Denotes the severity is differentiated using text color and dark background color.
-     */
-    Filled = 'Filled'
-}
-
-const MSG_ICON: string = 'e-msg-icon';
-const MSG_CLOSE_ICON: string = 'e-msg-close-icon';
-const MSG_CONTENT: string = 'e-msg-content';
-const MSG_CONTENT_CENTER: string = 'e-content-center';
-const RTL: string = 'e-rtl';
-const SUCCESS: string = 'e-success';
-const WARNING: string = 'e-warning';
-const INFO: string = 'e-info';
-const ERROR: string = 'e-error';
-const OUTLINED: string = 'e-outlined';
-const FILLED: string = 'e-filled';
-const HIDE: string = 'e-hidden';
-
-/**
- * Provides information about the closed event.
- */
-export interface MessageCloseEventArgs {
-    /**
-     * Returns the element.
-     */
-    element: Element
-    /**
-     * Returns the original event arguments.
-     */
-    event: Event
-    /**
-     * Determines whether the event is triggered by interaction.
-     */
-    isInteracted: boolean
-}
-
-/**
- * The Message component displays messages with severity by differentiating icons and colors to denote the importance and context of the message to the end user.
- * ```html
- * <div id="msg"></div>
- * <script>
- *   var msgObj: Message = new Message({
- *      content: 'Editing is restricted',
- *      showCloseIcon: true
- *   })
- *   msgObj.appendTo('#msg');
- * </script>
- * ```
- *
- */
-@NotifyPropertyChanges
-export class Message extends Component<HTMLElement> implements INotifyPropertyChanged {
-
-    private iconElement: HTMLElement;
-    private closeIcon: HTMLElement;
-    private txtElement: HTMLElement;
-    private initialRender: boolean = true;
-    private l10n: L10n;
-    private innerContent: HTMLElement | string;
-    private msgElement: HTMLElement;
-
-    /**
-     * Specifies the content to be displayed in the Message component. It can be a paragraph, a list, or any other HTML element.
-     *
-     * @default null
-     * @angularType string | object
-     * @reactType string | function | JSX.Element
-     * @vueType string | function
-     * @aspType string
-     */
-    @Property(null)
-    public content: string | Function;
-
-    /**
-     * Specifies the CSS class or multiple classes separated by space that can be appended to the root element of the Message component to customize the message.
-     *
-     * @default ''
-     */
-    @Property('')
-    public cssClass: string;
-
-    /**
-     * Shows or hides the severity icon in the Message component. When set to true, the severity icon is displayed at the left edge of the Message component.
-     * This icon will be distinctive based on the severity property.
-     *
-     * @default true
-     */
-    @Property(true)
-    public showIcon: boolean;
-
-    /**
-     * Shows or hides the close icon in the Message component. An end user can click the close icon to hide the message. The closed event is triggered when the message is closed.
-     *
-     * @default false
-     */
-    @Property(false)
-    public showCloseIcon: boolean;
-
-    /**
-     * Specifies the severity of the message, which is used to define the appearance (icons and colors) of the message. The available severity messages are Normal, Success, Info, Warning, and Error.
-     *
-     * @isenumeration true
-     * @default Severity.Normal
-     * @asptype Severity
-     */
-    @Property('Normal')
-    public severity: string | Severity;
-
-    /**
-     * Specifies the variant from predefined appearance variants to display the content of the Message component. The available variants are Text, Outlined, and Filled.
-     *
-     * @isenumeration true
-     * @default Variant.Text
-     * @asptype Variant
-     */
-    @Property('Text')
-    public variant: string | Variant;
-
-    /**
-     * Shows or hides the visibility of the Message component. When set to false, the Message component will be hidden.
-     *
-     * @default true
-     */
-    @Property(true)
-    public visible: boolean;
-
-    /**
-     * Triggers when the Message component is created successfully.
-     *
-     * @event created
-     */
-    @Event()
-    public created: EmitType<Object>;
-
-    /**
-     * Triggers when the Message component is destroyed successfully.
-     *
-     * @event destroyed
-     */
-    @Event()
-    public destroyed: EmitType<Event>;
-
-    /**
-     * Triggers when the Message component is closed successfully.
-     *
-     * @event closed
-     */
-    @Event()
-    public closed: EmitType<MessageCloseEventArgs>
-
-    /**
-     * Constructor for creating the Message component widget.
-     *
-     * @param {MessageModel}options - Specifies the Message component interface.
-     * @param {HTMLElement}element - Specifies the target element.
-     */
-    constructor(options?: MessageModel, element?: HTMLElement) {
-        super(options, element);
-    }
-
-    /**
-     * Gets the Message component module name.
-     *
-     * @returns {string} - Returns the string.
-     * @private
-     */
-    public getModuleName(): string {
-        return 'message';
-    }
-
-    /**
-     * Get the persisted state properties of the Message component.
-     *
-     * @returns {string} - Returns the string.
-     */
-    public getPersistData(): string {
-        return this.addOnPersist([]);
-    }
-
-    /**
-     * Method to initialize the variables for the Message component.
-     *
-     * @returns {void}
-     * @private
-     */
-    public preRender(): void {
-        const localeText: object = { close: 'Close' };
-        this.l10n = new L10n('message', localeText, this.locale);
-    }
-
-    /**
-     * Method to initialize the Message component rendering.
-     *
-     * @returns {void}
-     * @private
-     */
-    public render(): void {
-        this.innerContent = this.element.innerHTML;
-        this.element.innerHTML = '';
-        this.msgElement = this.createElement('div', { className: 'e-msg-content-wrap' });
-        this.initialize();
-        this.wireEvents();
-        this.renderComplete();
-        this.renderReactTemplates();
-        this.initialRender = false;
-    }
-
-    private initialize(): void {
-        this.element.setAttribute('role', 'alert');
-        this.setCssClass();
-        this.setIcon();
-        this.setContent();
-        this.setCloseIcon();
-        this.setSeverity();
-        this.setVariant();
-        this.setVisible();
-        if (this.enableRtl) {
-            this.element.classList.add(RTL);
-        }
-    }
-
-    private setIcon(): void {
-        if (this.showIcon) {
-            this.iconElement = this.createElement('span', { className: MSG_ICON });
-            if (this.element.classList.contains(MSG_CONTENT_CENTER)) {
-                this.msgElement.appendChild(this.iconElement);
-            } else {
-                this.element.appendChild(this.iconElement);
-            }
-        }
-    }
-
-    private setCloseIcon(): void {
-        if (this.showCloseIcon) {
-            this.closeIcon = this.createElement('button', { attrs: { type: 'button', class: MSG_CLOSE_ICON }});
-            this.element.appendChild(this.closeIcon);
-            this.setTitle();
-        }
-    }
-
-    private setTitle(): void {
-        this.l10n.setLocale(this.locale);
-        const closeIconTitle: string = this.l10n.getConstant('close');
-        this.closeIcon.setAttribute('title', closeIconTitle);
-        this.closeIcon.setAttribute('aria-label', closeIconTitle);
-    }
-
-    private setContent(): void {
-        this.txtElement = this.createElement('div', { className: MSG_CONTENT });
-        if (this.element.classList.contains(MSG_CONTENT_CENTER)) {
-            this.msgElement.appendChild(this.txtElement);
-            this.element.appendChild(this.msgElement);
-        } else {
-            this.element.appendChild(this.txtElement);
-        }
-        this.setTemplate();
-    }
-
-    private setTemplate(): void {
-        let templateFn: Function;
-        if (isNOU(this.content) || this.content === '') {
-            this.txtElement.innerHTML = this.innerContent as string;
-        } else if (!isNOU(this.content) && this.content !== '') {
-            if ((typeof this.content === 'string') || (typeof this.content !== 'string')) {
-                // eslint-disable-next-line
-                if ((this as any).isVue || typeof this.content !== 'string') {
-                    templateFn = compile(this.content as string);
-                    if (!isNOU(templateFn)) {
-                        let tempArr: Element[] = templateFn({}, this, 'content', this.element.id + 'content', true);
-                        if (tempArr) {
-                            tempArr = Array.prototype.slice.call(tempArr);
-                            append(tempArr, this.txtElement);
-                            this.renderReactTemplates();
-                        }
-                    }
-                } else {
-                    this.txtElement.innerHTML = this.content as string;
-                }
-            }
-        }
-    }
-
-    private setSeverity(): void {
-        const classList: string[] = [SUCCESS, WARNING, INFO, ERROR];
-        removeClass([this.element], classList);
-        if (this.severity === 'Success') {
-            addClass([this.element], SUCCESS);
-        } else if (this.severity === 'Warning') {
-            addClass([this.element], WARNING);
-        } else if (this.severity === 'Error') {
-            addClass([this.element], ERROR);
-        } else if (this.severity === 'Info') {
-            addClass([this.element], INFO);
-        }
-    }
-
-    private setVariant(): void {
-        const classList: string[] = [FILLED, OUTLINED];
-        removeClass([this.element], classList);
-        if (this.variant === 'Outlined') {
-            addClass([this.element], OUTLINED);
-        } else if (this.variant === 'Filled') {
-            addClass([this.element], FILLED);
-        }
-    }
-
-    private setCssClass(oldCssClass?: string): void {
-        if (oldCssClass) {
-            removeClass([this.element], oldCssClass.split(' '));
-        }
-        if (this.cssClass) {
-            addClass([this.element], this.cssClass.split(' '));
-        }
-    }
-
-    private setVisible(): void {
-        if (!this.visible) {
-            addClass([this.element], HIDE);
-            if (!this.initialRender) {
-                this.trigger('closed', { event: event, isInteracted: false, element: this.element });
-            }
-        } else {
-            removeClass([this.element], HIDE);
-        }
-    }
-
-    private clickHandler(event: Event): void {
-        this.closeMessage(event);
-    }
-
-    private keyboardHandler(event: KeyboardEventArgs): void {
-        if (event.keyCode === 32 || event.keyCode === 13) {
-            this.closeMessage(event);
-        }
-    }
-
-    private closeMessage(event: Event | KeyboardEventArgs): void {
-        addClass([this.element], HIDE);
-        this.setProperties({ visible: false }, true);
-        const eventArgs: MessageCloseEventArgs = { event: event, isInteracted: true, element: this.element };
-        this.trigger('closed', eventArgs);
-    }
-
-    private wireEvents(): void {
-        if (this.showCloseIcon) {
-            EventHandler.add(this.closeIcon, 'click', this.clickHandler, this);
-            EventHandler.add(this.closeIcon, 'keydown', this.keyboardHandler, this);
-        }
-    }
-
-    private unWireEvents(): void {
-        if (this.showCloseIcon) {
-            EventHandler.remove(this.closeIcon, 'click', this.clickHandler);
-            EventHandler.remove(this.closeIcon, 'keydown', this.keyboardHandler);
-        }
-    }
-
-    /**
-     * Method to handle the dynamic changes of the Message component properties.
-     *
-     * @param {MessageModel} newProp - Specifies the new property.
-     * @param {MessageModel} oldProp - Specifies the old property.
-     * @returns {void}
-     * @private
-     */
-    public onPropertyChanged(newProp?: MessageModel, oldProp?: MessageModel): void {
-        for (const prop of Object.keys(newProp)) {
-            switch (prop) {
-            case 'cssClass':
-                this.setCssClass(oldProp.cssClass);
-                break;
-            case 'content':
-                this.txtElement.innerHTML = '';
-                this.setTemplate();
-                break;
-            case 'enableRtl':
-                if (!this.enableRtl) {
-                    this.element.classList.remove(RTL);
-                } else {
-                    this.element.classList.add(RTL);
-                }
-                break;
-            case 'locale':
-                if (this.showCloseIcon) {
-                    this.setTitle();
-                }
-                break;
-            case 'showIcon':
-                if (!this.showIcon && this.element.getElementsByClassName(MSG_ICON).length > 0) {
-                    detach(this.iconElement);
-                }
-                if (this.showIcon) {
-                    this.iconElement = this.createElement('span', { className: MSG_ICON });
-                    this.element.insertBefore(this.iconElement, this.txtElement);
-                }
-                break;
-            case 'showCloseIcon':
-                if (!this.showCloseIcon && !isNOU(this.closeIcon)) {
-                    this.unWireEvents();
-                    detach(this.closeIcon);
-                } else {
-                    this.setCloseIcon();
-                    this.wireEvents();
-                }
-                break;
-            case 'severity':
-                this.setSeverity();
-                break;
-            case 'variant':
-                this.setVariant();
-                break;
-            case 'visible':
-                this.setVisible();
-                break;
-            }
-        }
-    }
-
-    /**
-     * Method to destroy the Message component. It removes the component from the DOM and detaches all its bound events. It also removes the attributes and classes of the component.
-     *
-     * @returns {void}
-     */
-    public destroy(): void {
-        const cssClass: string[] | string = isNOU(this.cssClass) ? [''] : this.cssClass.split(' ');
-        const className: string[] = [SUCCESS, WARNING, INFO, ERROR, RTL, HIDE, OUTLINED, FILLED];
-        const classList: string[] = (cssClass.length === 1 && cssClass[0] === '') ? className : className.concat(cssClass);
-        removeClass([this.element], classList);
-        this.element.removeAttribute('role');
-        this.unWireEvents();
-        if (!isNOU(this.iconElement)) {
-            detach(this.iconElement);
-        }
-        detach(this.txtElement);
-        if (!isNOU(this.closeIcon)) {
-            detach(this.closeIcon);
-        }
-        super.destroy();
-    }
-}

dist/ts/skeleton/index.d.ts

-/**
- * Shimmer modules that need to be exported.
- */
-export * from './skeleton';
-export * from './skeleton-model';

dist/ts/skeleton/index.ts

-/**
- * Shimmer modules that need to be exported.
- */
-export * from './skeleton';
-export * from './skeleton-model';

dist/ts/skeleton/skeleton-model.d.ts

-import { Component, getUniqueID, formatUnit, INotifyPropertyChanged, NotifyPropertyChanges, Property, attributes, removeClass, addClass, isNullOrUndefined } from '@syncfusion/ej2-base';
-import {SkeletonType,ShimmerEffect} from "./skeleton";
-import {ComponentModel} from '@syncfusion/ej2-base';
-
-/**
- * Interface for a class Skeleton
- */
-export interface SkeletonModel extends ComponentModel{
-
-    /**
-     * Defines the width of the Skeleton.
-     * Width will be prioritized and used as dimension when shape is "Circle" and "Square".
-     *
-     * @default ""
-     * @aspType string
-     */
-    width?: string | number;
-
-    /**
-     * Defines the height of the Skeleton.
-     * Height is not required when shape is "Circle" and "Square".
-     *
-     * @default ""
-     * @aspType string
-     */
-    height?: string | number;
-
-    /**
-     * Defines the visibility state of Skeleton.
-     *
-     * @default true
-     */
-    visible?: boolean;
-
-    /**
-     * Defines the shape of the Skeleton.
-     * {% codeBlock src='skeleton/shape/index.md' %}{% endcodeBlock %}
-     *
-     * @isenumeration true
-     * @default SkeletonType.Text
-     * @asptype SkeletonType
-     */
-    shape?: string | SkeletonType;
-
-    /**
-     * Defines the animation effect of the Skeleton.
-     * {% codeBlock src='skeleton/shimmerEffect/index.md' %}{% endcodeBlock %}
-     *
-     * @isenumeration true
-     * @default ShimmerEffect.Wave
-     * @asptype ShimmerEffect
-     */
-    shimmerEffect?: string | ShimmerEffect;
-
-    /**
-     * Defines the 'aria-label' for Skeleton accessibility.
-     *
-     * @default "Loading..."
-     */
-    label?: string;
-
-    /**
-     * Defines single/multiple classes (separated by space) to be used for customization of Skeleton.
-     *
-     * @default ""
-     */
-    cssClass?: string;
-
-}

dist/ts/skeleton/skeleton.d.ts

-import { Component, INotifyPropertyChanged } from '@syncfusion/ej2-base';
-import { SkeletonModel } from './skeleton-model';
-/**
- * Defines the shape of Skeleton.
- */
-export declare enum SkeletonType {
-    /**
-     * Defines the skeleton shape as text.
-     */
-    Text = "Text",
-    /**
-     * Defines the skeleton shape as circle.
-     */
-    Circle = "Circle",
-    /**
-     * Defines the skeleton shape as square.
-     */
-    Square = "Square",
-    /**
-     * Defines the skeleton shape as rectangle.
-     */
-    Rectangle = "Rectangle"
-}
-/**
- * Defines the animation effect of Skeleton.
- */
-export declare enum ShimmerEffect {
-    /**
-     * Defines the animation as shimmer wave effect.
-     */
-    Wave = "Wave",
-    /**
-     * Defines the animation as fade effect.
-     */
-    Fade = "Fade",
-    /**
-     * Defines the animation as pulse effect.
-     */
-    Pulse = "Pulse",
-    /**
-     * Defines the animation as no effect.
-     */
-    None = "None"
-}
-/**
- * The Shimmer is a placeholder that animates a shimmer effect to let users know that the page’s content is loading at the moment.
- * In other terms, it simulates the layout of page content while loading the actual content.
- * ```html
- * <div id="skeletonCircle"></div>
- * ```
- * ```typescript
- * <script>
- * var skeletonObj = new Skeleton({ shape: 'Circle', width: "2rem" });
- * skeletonObj.appendTo("#skeletonCircle");
- * </script>
- * ```
- */
-export declare class Skeleton extends Component<HTMLElement> implements INotifyPropertyChanged {
-    /**
-     * Constructor for creating Skeleton component.
-     *
-     * @param {SkeletonModel} options - Defines the model of Skeleton class.
-     * @param {HTMLElement} element - Defines the target HTML element.
-     */
-    constructor(options?: SkeletonModel, element?: HTMLElement);
-    /**
-     * Defines the width of the Skeleton.
-     * Width will be prioritized and used as dimension when shape is "Circle" and "Square".
-     *
-     * @default ""
-     * @aspType string
-     */
-    width: string | number;
-    /**
-     * Defines the height of the Skeleton.
-     * Height is not required when shape is "Circle" and "Square".
-     *
-     * @default ""
-     * @aspType string
-     */
-    height: string | number;
-    /**
-     * Defines the visibility state of Skeleton.
-     *
-     * @default true
-     */
-    visible: boolean;
-    /**
-     * Defines the shape of the Skeleton.
-     * {% codeBlock src='skeleton/shape/index.md' %}{% endcodeBlock %}
-     *
-     * @isenumeration true
-     * @default SkeletonType.Text
-     * @asptype SkeletonType
-     */
-    shape: string | SkeletonType;
-    /**
-     * Defines the animation effect of the Skeleton.
-     * {% codeBlock src='skeleton/shimmerEffect/index.md' %}{% endcodeBlock %}
-     *
-     * @isenumeration true
-     * @default ShimmerEffect.Wave
-     * @asptype ShimmerEffect
-     */
-    shimmerEffect: string | ShimmerEffect;
-    /**
-     * Defines the 'aria-label' for Skeleton accessibility.
-     *
-     * @default "Loading..."
-     */
-    label: string;
-    /**
-     * Defines single/multiple classes (separated by space) to be used for customization of Skeleton.
-     *
-     * @default ""
-     */
-    cssClass: string;
-    /**
-     * Get component module name.
-     *
-     * @returns {string} - Module name
-     * @private
-     */
-    protected getModuleName(): string;
-    getPersistData(): string;
-    protected preRender(): void;
-    /**
-     * Method for initialize the component rendering.
-     *
-     * @returns {void}
-     * @private
-     */
-    protected render(): void;
-    onPropertyChanged(newProp: SkeletonModel, oldProp: SkeletonModel): void;
-    /**
-     * Method to destroys the Skeleton component.
-     *
-     * @returns {void}
-     */
-    destroy(): void;
-    private initialize;
-    private updateShape;
-    private updateDimension;
-    private updateEffect;
-    private updateVisibility;
-    private updateCssClass;
-}

dist/ts/skeleton/skeleton.ts

-import { Component, getUniqueID, formatUnit, INotifyPropertyChanged, NotifyPropertyChanges, Property, attributes, removeClass, addClass, isNullOrUndefined } from '@syncfusion/ej2-base';
-import { SkeletonModel } from './skeleton-model';
-
-const cssClassName: { [key: string]: string } = {
-    TEXTSHAPE: 'e-skeleton-text',
-    CIRCLESHAPE: 'e-skeleton-circle',
-    SQUARESHAPE: 'e-skeleton-square',
-    RECTANGLESHAPE: 'e-skeleton-rectangle',
-    WAVEEFFECT: 'e-shimmer-wave',
-    PULSEEFFECT: 'e-shimmer-pulse',
-    FADEEFFECT: 'e-shimmer-fade',
-    VISIBLENONE: 'e-visible-none'
-};
-
-/**
- * Defines the shape of Skeleton.
- */
-export enum SkeletonType {
-    /**
-     * Defines the skeleton shape as text.
-     */
-    Text = 'Text',
-    /**
-     * Defines the skeleton shape as circle.
-     */
-    Circle = 'Circle',
-    /**
-     * Defines the skeleton shape as square.
-     */
-    Square = 'Square',
-    /**
-     * Defines the skeleton shape as rectangle.
-     */
-    Rectangle = 'Rectangle'
-}
-/**
- * Defines the animation effect of Skeleton.
- */
-export enum ShimmerEffect {
-    /**
-     * Defines the animation as shimmer wave effect.
-     */
-    Wave = 'Wave',
-    /**
-     * Defines the animation as fade effect.
-     */
-    Fade = 'Fade',
-    /**
-     * Defines the animation as pulse effect.
-     */
-    Pulse = 'Pulse',
-    /**
-     * Defines the animation as no effect.
-     */
-    None = 'None'
-}
-/**
- * The Shimmer is a placeholder that animates a shimmer effect to let users know that the page’s content is loading at the moment.
- * In other terms, it simulates the layout of page content while loading the actual content.
- * ```html
- * <div id="skeletonCircle"></div>
- * ```
- * ```typescript
- * <script>
- * var skeletonObj = new Skeleton({ shape: 'Circle', width: "2rem" });
- * skeletonObj.appendTo("#skeletonCircle");
- * </script>
- * ```
- */
-@NotifyPropertyChanges
-export class Skeleton extends Component<HTMLElement> implements INotifyPropertyChanged {
-
-    /**
-     * Constructor for creating Skeleton component.
-     *
-     * @param {SkeletonModel} options - Defines the model of Skeleton class.
-     * @param {HTMLElement} element - Defines the target HTML element.
-     */
-    constructor(options?: SkeletonModel, element?: HTMLElement) {
-        super(options, element);
-    }
-
-    /**
-     * Defines the width of the Skeleton.
-     * Width will be prioritized and used as dimension when shape is "Circle" and "Square".
-     *
-     * @default ""
-     * @aspType string
-     */
-    @Property('')
-    public width: string | number;
-
-    /**
-     * Defines the height of the Skeleton.
-     * Height is not required when shape is "Circle" and "Square".
-     *
-     * @default ""
-     * @aspType string
-     */
-    @Property('')
-    public height: string | number;
-
-    /**
-     * Defines the visibility state of Skeleton.
-     *
-     * @default true
-     */
-    @Property(true)
-    public visible: boolean;
-
-    /**
-     * Defines the shape of the Skeleton.
-     * {% codeBlock src='skeleton/shape/index.md' %}{% endcodeBlock %}
-     *
-     * @isenumeration true
-     * @default SkeletonType.Text
-     * @asptype SkeletonType
-     */
-    @Property('Text')
-    public shape: string | SkeletonType;
-
-    /**
-     * Defines the animation effect of the Skeleton.
-     * {% codeBlock src='skeleton/shimmerEffect/index.md' %}{% endcodeBlock %}
-     *
-     * @isenumeration true
-     * @default ShimmerEffect.Wave
-     * @asptype ShimmerEffect
-     */
-    @Property('Wave')
-    public shimmerEffect: string | ShimmerEffect;
-
-    /**
-     * Defines the 'aria-label' for Skeleton accessibility.
-     *
-     * @default "Loading..."
-     */
-    @Property('Loading...')
-    public label: string;
-
-    /**
-     * Defines single/multiple classes (separated by space) to be used for customization of Skeleton.
-     *
-     * @default ""
-     */
-    @Property('')
-    public cssClass: string;
-
-    /**
-     * Get component module name.
-     *
-     * @returns {string} - Module name
-     * @private
-     */
-    protected getModuleName(): string {
-        return 'skeleton';
-    }
-
-    public getPersistData(): string {
-        return this.addOnPersist([]);
-    }
-
-    protected preRender(): void {
-        if (!this.element.id) {
-            this.element.id = getUniqueID('e-' + this.getModuleName());
-        }
-
-        this.updateCssClass();
-        attributes(this.element, { role: 'alert', 'aria-busy': 'true', 'aria-live': 'polite', 'aria-label': this.label });
-    }
-
-    /**
-     * Method for initialize the component rendering.
-     *
-     * @returns {void}
-     * @private
-     */
-    protected render(): void {
-        this.initialize();
-    }
-
-    public onPropertyChanged(newProp: SkeletonModel, oldProp: SkeletonModel): void {
-        for (const prop of Object.keys(newProp)) {
-            switch (prop) {
-            case 'width':
-            case 'height':
-                this.updateDimension();
-                break;
-            case 'shape':
-                this.updateShape();
-                break;
-            case 'shimmerEffect':
-                this.updateEffect();
-                break;
-            case 'visible':
-                this.updateVisibility();
-                break;
-            case 'label':
-                this.element.setAttribute('aria-label', this.label);
-                break;
-            case 'cssClass':
-                if (oldProp.cssClass) { removeClass([this.element], oldProp.cssClass.split(' ')); }
-                this.updateCssClass();
-                break;
-            }
-        }
-    }
-
-    /**
-     * Method to destroys the Skeleton component.
-     *
-     * @returns {void}
-     */
-    public destroy(): void {
-        super.destroy();
-        const attrs: string[] = ['role', 'aria-live', 'aria-busy', 'aria-label'];
-        let cssClass: string[] = [];
-
-        if (this.cssClass) { cssClass = cssClass.concat(this.cssClass.split(' ')); }
-
-        for (let i: number = 0; i < attrs.length; i++) {
-            this.element.removeAttribute(attrs[parseInt(i.toString(), 10)]);
-        }
-
-        cssClass = cssClass.concat(this.element.classList.value.match(/(e-skeleton-[^\s]+)/g) || []);
-        cssClass = cssClass.concat(this.element.classList.value.match(/(e-shimmer-[^\s]+)/g) || []);
-
-        removeClass([this.element], cssClass);
-    }
-
-    private initialize(): void {
-        this.updateShape();
-        this.updateEffect();
-        this.updateVisibility();
-    }
-
-    private updateShape(): void {
-        if (!(isNullOrUndefined(this.shape))) {
-            const shapeCss: string = cssClassName[this.shape.toUpperCase() + 'SHAPE'];
-            const removeCss: string[] = (this.element.classList.value.match(/(e-skeleton-[^\s]+)/g) || []);
-            this.updateDimension();
-            if (removeCss) { removeClass([this.element], removeCss); }
-            addClass([this.element], [shapeCss]);
-        }
-    }
-
-    private updateDimension(): void {
-        const width: string = (!this.width && (['Text', 'Rectangle'].indexOf(this.shape) > -1)) ? '100%' : formatUnit(this.width);
-        const height: string = ['Circle', 'Square'].indexOf(this.shape) > -1 ? width : formatUnit(this.height);
-
-        this.element.style.width = width;
-        this.element.style.height = height;
-    }
-
-    private updateEffect(): void {
-        const removeCss: string[] = (this.element.classList.value.match(/(e-shimmer-[^\s]+)/g) || []);
-        if (removeCss) { removeClass([this.element], removeCss); }
-        if (!(isNullOrUndefined(this.shimmerEffect))) {
-            addClass([this.element], [cssClassName[this.shimmerEffect.toUpperCase() + 'EFFECT']]);
-        }
-    }
-
-    private updateVisibility(): void {
-        this.element.classList[this.visible ? 'remove' : 'add'](cssClassName.VISIBLENONE);
-    }
-
-    private updateCssClass(): void {
-        if (this.cssClass) { addClass([this.element], this.cssClass.split(' ')); }
-    }
-
-}

dist/ts/toast/index.d.ts

-/**
- * Toast modules
- */
-export * from './toast';
-export * from './toast-model';

dist/ts/toast/index.ts

-/**
- * Toast modules
- */
-export * from './toast';
-export * from './toast-model';

dist/ts/toast/toast-model.d.ts

-import { Component, Property, ChildProperty, INotifyPropertyChanged, NotifyPropertyChanges, Animation, createElement, animationMode, initializeCSPTemplate } from '@syncfusion/ej2-base';import { Browser, isNullOrUndefined as isNOU, getUniqueID, formatUnit, EventHandler, KeyboardEventArgs } from '@syncfusion/ej2-base';import { EmitType, Collection, Complex, setStyleAttribute, Event, Effect, detach, AnimationModel, L10n } from '@syncfusion/ej2-base';import { attributes, extend, closest, compile as templateCompiler, classList, BaseEventArgs, isUndefined } from '@syncfusion/ej2-base';import { SwipeEventArgs, Touch, isBlazor, SanitizeHtmlHelper, removeClass } from '@syncfusion/ej2-base';import { ButtonModel, Button } from '@syncfusion/ej2-buttons';import { getZindexPartial } from '@syncfusion/ej2-popups';
-import {PositionX,PositionY,ProgressDirectionType,BeforeSanitizeHtmlArgs,ToastOpenArgs,ToastBeforeOpenArgs,ToastBeforeCloseArgs,ToastCloseArgs,ToastClickEventArgs} from "./toast";
-import {ComponentModel} from '@syncfusion/ej2-base';
-
-/**
- * Interface for a class ToastPosition
- */
-export interface ToastPositionModel {
-
-    /**
-     * Specifies the position of the Toast notification with respect to the target container's left edge.
-     *
-     * @default 'Left'
-     * @aspType string
-     * @blazorType string
-     */
-    X?: PositionX | number | string;
-
-    /**
-     * Specifies the position of the Toast notification with respect to the target container's top edge.
-     *
-     * @default 'Top'
-     * @aspType string
-     * @blazorType string
-     */
-    Y?: PositionY | number | string;
-
-}
-
-/**
- * Interface for a class ButtonModelProps
- */
-export interface ButtonModelPropsModel {
-
-    /**
-     * Specifies the Button component model properties to render the Toast action buttons.
-     * ```html
-     * <div id="element"> </div>
-     * ```
-     * ```typescript
-     * let toast: Toast =  new Toast({
-     *      buttons:
-     *      [{
-     *         model: { content:`Button1`, cssClass: `e-success` }
-     *      }]
-     * });
-     * toast.appendTo('#element');
-     * ```
-     *
-     * @default null
-     */
-    model?: ButtonModel;
-
-    /**
-     * Specifies the click event binding of action buttons created within Toast.
-     *
-     * @event 'event'
-     * @blazorProperty 'Clicked'
-     * @blazorType Microsoft.AspNetCore.Components.Web.MouseEventArgs
-     */
-    click?: EmitType<Event>;
-
-}
-
-/**
- * Interface for a class ToastAnimations
- */
-export interface ToastAnimationsModel {
-
-    /**
-     * Specifies the type of animation.
-     *
-     * @default 'FadeIn'
-     * @aspType string
-     */
-    effect?: Effect;
-
-    /**
-     * Specifies the duration to animate.
-     *
-     * @default 600
-     */
-    duration?: number;
-
-    /**
-     * Specifies the animation timing function.
-     *
-     * @default 'ease'
-     */
-    easing?: string;
-
-}
-
-/**
- * Interface for a class ToastAnimationSettings
- */
-export interface ToastAnimationSettingsModel {
-
-    /**
-     * Specifies the animation to appear while showing the Toast.
-     *
-     * @default { effect: 'FadeIn', duration: 600, easing: 'ease' }
-     */
-    show?: ToastAnimationsModel;
-
-    /**
-     * Specifies the animation to appear while hiding the Toast.
-     *
-     * @default { effect: 'FadeOut', duration: 600, easing: 'ease' }
-     */
-    hide?: ToastAnimationsModel;
-
-}
-
-/**
- * Interface for a class Toast
- */
-export interface ToastModel extends ComponentModel{
-
-    /**
-     * Specifies the width of the Toast in pixels/numbers/percentage. Number value is considered as pixels.
-     * In mobile devices, default width is considered as `100%`.
-     *
-     * @default '300'
-     * @blazorType string
-     */
-    width?: string | number;
-
-    /**
-     * Specifies the height of the Toast in pixels/number/percentage. Number value is considered as pixels.
-     *
-     * @default 'auto'
-     * @blazorType string
-     */
-    height?: string | number;
-
-    /**
-     * Specifies the title to be displayed on the Toast.
-     * Accepts selectors, string values and HTML elements.
-     *
-     * @default null
-     * @aspType string
-     */
-    title?: string | Function;
-
-    /**
-     * Specifies the content to be displayed on the Toast.
-     * Accepts selectors, string values and HTML elements.
-     *
-     * @default null
-     * @blazorType string
-     * @aspType string
-     */
-    content?: string | HTMLElement | Function;
-
-    /**
-     * Defines whether to allow the cross-scripting site or not.
-     *
-     * @default true
-     */
-    enableHtmlSanitizer?: boolean;
-
-    /**
-     * Defines CSS classes to specify an icon for the Toast which is to be displayed at top left corner of the Toast.
-     *
-     * @default null
-     */
-    icon?: string;
-
-    /**
-     * Defines single/multiple classes (separated by space) to be used for customization of Toast.
-     *
-     * @default null
-     */
-    cssClass?: string;
-
-    /**
-     * Specifies the HTML element/element ID as a string that can be displayed as a Toast.
-     * The given template is taken as preference to render the Toast, even if the built-in properties such as title and content are defined.
-     *
-     * {% codeBlock src='toast/template/index.md' %}{% endcodeBlock %}
-     *
-     * @default null
-     * @aspType string
-     */
-    template?: string | Function;
-
-    /**
-     * Specifies the newly created Toast message display order while multiple toast's are added to page one after another.
-     * By default, newly added Toast will be added after old Toast's.
-     *
-     * @default true
-     */
-    newestOnTop?: boolean;
-
-    /**
-     * Specifies whether to show the close button in Toast message to close the Toast.
-     *
-     * @default false
-     */
-    showCloseButton?: boolean;
-
-    /**
-     * Specifies whether to show the progress bar to denote the Toast message display timeout.
-     *
-     * @default false
-     */
-    showProgressBar?: boolean;
-
-    /**
-     * Specifies the Toast display time duration on the page in milliseconds.
-     * - Once the time expires, Toast message will be removed.
-     * - Setting 0 as a time out value displays the Toast on the page until the user closes it manually.
-     *
-     * @default 5000
-     */
-    timeOut?: number;
-
-    /**
-     * Specifies whether to show the progress bar with left to right direction to denote the Toast message display timeout.
-     */
-    progressDirection?: ProgressDirectionType;
-
-    /**
-     * Specifies the Toast display time duration after interacting with the Toast.
-     *
-     * @default 1000
-     */
-    extendedTimeout?: number;
-
-    /**
-     * Specifies the animation configuration settings for showing and hiding the Toast.
-     *
-     * {% codeBlock src='toast/animation/index.md' %}{% endcodeBlock %}
-     *
-     * @blazorType ToastAnimationSettings
-     * @default { show: { effect: 'FadeIn', duration: 600, easing: 'linear' },
-     * hide: { effect: 'FadeOut', duration: 600, easing: 'linear' }}
-     */
-    animation?: ToastAnimationSettingsModel;
-
-    /**
-     * Specifies the position of the Toast message to be displayed within target container.
-     * In the case of multiple Toast display, new Toast position will not update on dynamic change of property values
-     * until the old Toast messages removed.
-     * X values are: Left , Right ,Center
-     * Y values are: Top , Bottom
-     *
-     * {% codeBlock src='toast/position/index.md' %}{% endcodeBlock %}
-     *
-     * @default { X: "Left", Y: "Top" }
-     * @blazorType ToastPosition
-     */
-    position?: ToastPositionModel;
-
-    /**
-     * Specifies the collection of Toast action `buttons` to be rendered with the given
-     * Button model properties and its click action handler.
-     *
-     * {% codeBlock src='toast/buttons/index.md' %}{% endcodeBlock %}
-     *
-     * @default [{}]
-     * @deprecated
-     */
-    buttons?: ButtonModelPropsModel[];
-
-    /**
-     * Specifies the target container where the Toast to be displayed.
-     * Based on the target, the positions such as `Left`, `Top` will be applied to the Toast.
-     * The default value is null, which refers the `document.body` element.
-     *
-     * @default null
-     * @aspType string
-     * @blazorType string
-     */
-    target?: HTMLElement | Element | string;
-
-    /**
-     * Triggers the event after the Toast gets created.
-     *
-     * @event 'event'
-     * @blazorProperty 'Created'
-     */
-    created?: EmitType<Event>;
-
-    /**
-     * Event triggers before sanitize the value.
-     *
-     * @event 'event'
-     * @blazorProperty 'OnSanitizeHtml'
-     */
-    beforeSanitizeHtml?: EmitType<BeforeSanitizeHtmlArgs>;
-
-    /**
-     * Triggers the event after the Toast gets destroyed.
-     *
-     * @event 'event'
-     * @blazorProperty 'Destroyed'
-     */
-    destroyed?: EmitType<Event>;
-
-    /**
-     * Triggers the event after the Toast shown on the target container.
-     *
-     * @event 'event'
-     * @blazorProperty 'Opened'
-     */
-    open?: EmitType<ToastOpenArgs>;
-
-    /**
-     * Triggers the event before the toast shown.
-     *
-     * @event 'event'
-     * @blazorProperty 'OnOpen'
-     */
-    beforeOpen?: EmitType<ToastBeforeOpenArgs>;
-
-    /**
-     * Triggers the event before the toast close.
-     *
-     * @event 'event'
-     * @blazorProperty 'OnClose'
-     */
-    beforeClose?: EmitType<ToastBeforeCloseArgs>;
-
-    /**
-     * Trigger the event after the Toast hides.
-     *
-     * @event 'event'
-     * @blazorProperty 'Closed'
-     */
-    close?: EmitType<ToastCloseArgs>;
-
-    /**
-     * The event will be fired while clicking on the Toast.
-     *
-     * @event 'event'
-     * @blazorProperty 'OnClick'
-     */
-    click?: EmitType<ToastClickEventArgs>;
-
-}

dist/ts/toast/toast.d.ts

-import { Component, ChildProperty, INotifyPropertyChanged } from '@syncfusion/ej2-base';
-import { EmitType, Effect } from '@syncfusion/ej2-base';
-import { BaseEventArgs } from '@syncfusion/ej2-base';
-import { ButtonModel } from '@syncfusion/ej2-buttons';
-import { ToastModel, ButtonModelPropsModel, ToastPositionModel } from './toast-model';
-import { ToastAnimationsModel, ToastAnimationSettingsModel } from './toast-model';
-/**
- * Provides information about a SanitizeSelectors.
- */
-export interface SanitizeSelectors {
-    /** Returns the tags. */
-    tags?: string[];
-    /** Returns the attributes. */
-    attributes?: SanitizeRemoveAttrs[];
-}
-/**
- * Provides information about a BeforeSanitizeHtml event.
- */
-export interface BeforeSanitizeHtmlArgs {
-    /** Illustrates whether the current action needs to be prevented or not. */
-    cancel?: boolean;
-    /** It is a callback function and executed it before our inbuilt action. It should return HTML as a string.
-     *
-     * @function
-     * @param {string} value - Returns the value.
-     * @returns {string}
-     */
-    helper?: Function;
-    /** Returns the selectors object which carrying both tags and attributes selectors to block list of cross-site scripting attack.
-     *  Also possible to modify the block list in this event.
-     */
-    selectors?: SanitizeSelectors;
-}
-/**
- * Provides information about a SanitizeRemoveAttributes.
- */
-export interface SanitizeRemoveAttrs {
-    /** Defines the attribute name to sanitize */
-    attribute?: string;
-    /** Defines the selector that sanitize the specified attributes within the selector */
-    selector?: string;
-}
-/**
- * Specifies the options for positioning the Toast in Y axis.
- */
-export declare type PositionY = 'Top' | 'Bottom';
-/**
- * Specifies the direction for the Toast progressBar.
- */
-export declare type ProgressDirectionType = 'Rtl' | 'Ltr';
-/**
- * Specifies the options for positioning the Toast in X axis.
- */
-export declare type PositionX = 'Left' | 'Right' | 'Center';
-/**
- * Specifies the event arguments of Toast click.
- */
-export interface ToastClickEventArgs extends BaseEventArgs {
-    /** Defines the Toast element. */
-    element: HTMLElement;
-    /**
-     * Defines the Toast object.
-     *
-     * @deprecated
-     */
-    toastObj?: Toast;
-    /** Defines the prevent action for Toast click event. */
-    cancel: boolean;
-    /** Defines the close action for click or tab on the Toast. */
-    clickToClose: boolean;
-    /** Defines the current event object. */
-    originalEvent: Event;
-}
-/**
- * Specifies the event arguments of Toast before open.
- */
-export interface ToastBeforeOpenArgs extends BaseEventArgs {
-    /**
-     * Defines the Toast object.
-     *
-     * @deprecated
-     */
-    toastObj?: Toast;
-    /** Defines current Toast model properties as options. */
-    options?: ToastModel;
-    /** Defines the Toast element. */
-    element: HTMLElement;
-    /** Defines the prevent action for before opening toast. */
-    cancel: boolean;
-}
-/**
- * Specifies the event arguments of Toast before close.
- */
-export interface ToastBeforeCloseArgs extends BaseEventArgs {
-    /** Defines current Toast model properties as options. */
-    options?: ToastModel;
-    /** Defines the Toast element. */
-    element: HTMLElement;
-    /** Defines the prevent action for before closing toast. */
-    cancel: boolean;
-    /** Defines the interaction type. */
-    type: string;
-    /** Defines the Toast container element. */
-    toastContainer: HTMLElement;
-}
-/**
- * Toast Collection model
- *
- * @hidden
- */
-export interface CollectionToast extends ToastModel {
-    /**
-     * Element of the current toast
-     */
-    element?: HTMLElement[];
-}
-/**
- * Specifies the event arguments of Toast open.
- */
-export interface ToastOpenArgs extends BaseEventArgs {
-    /**
-     * Defines the Toast object.
-     *
-     * @deprecated
-     */
-    toastObj?: Toast;
-    /** Defines current Toast model properties as options. */
-    options?: ToastModel;
-    /** Defines the Toast element. */
-    element: HTMLElement;
-}
-/**
- * Specifies the event arguments of Toast close.
- */
-export interface ToastCloseArgs extends BaseEventArgs {
-    /** Defines the Toast container element. */
-    toastContainer: HTMLElement;
-    /** Defines current Toast model properties as options. */
-    options?: ToastModel;
-    /**
-     * Defines the Toast object.
-     *
-     * @deprecated
-     */
-    toastObj?: Toast;
-}
-/**
- * An object that is used to configure the Toast X Y positions.
- */
-export declare class ToastPosition extends ChildProperty<ToastPosition> {
-    /**
-     * Specifies the position of the Toast notification with respect to the target container's left edge.
-     *
-     * @default 'Left'
-     * @aspType string
-     * @blazorType string
-     */
-    X: PositionX | number | string;
-    /**
-     * Specifies the position of the Toast notification with respect to the target container's top edge.
-     *
-     * @default 'Top'
-     * @aspType string
-     * @blazorType string
-     */
-    Y: PositionY | number | string;
-}
-/**
- * An object that is used to configure the action button model properties and event.
- */
-export declare class ButtonModelProps extends ChildProperty<ButtonModelProps> {
-    /**
-     * Specifies the Button component model properties to render the Toast action buttons.
-     * ```html
-     * <div id="element"> </div>
-     * ```
-     * ```typescript
-     * let toast: Toast =  new Toast({
-     *      buttons:
-     *      [{
-     *         model: { content:`Button1`, cssClass: `e-success` }
-     *      }]
-     * });
-     * toast.appendTo('#element');
-     * ```
-     *
-     * @default null
-     */
-    model: ButtonModel;
-    /**
-     * Specifies the click event binding of action buttons created within Toast.
-     *
-     * @event 'event'
-     * @blazorProperty 'Clicked'
-     * @blazorType Microsoft.AspNetCore.Components.Web.MouseEventArgs
-     */
-    click: EmitType<Event>;
-}
-/**
- * An object that is used to configure the animation object of Toast.
- */
-export declare class ToastAnimations extends ChildProperty<ToastAnimations> {
-    /**
-     * Specifies the type of animation.
-     *
-     * @default 'FadeIn'
-     * @aspType string
-     */
-    effect: Effect;
-    /**
-     * Specifies the duration to animate.
-     *
-     * @default 600
-     */
-    duration: number;
-    /**
-     * Specifies the animation timing function.
-     *
-     * @default 'ease'
-     */
-    easing: string;
-}
-/**
- * An object that is used to configure the show/hide animation settings of Toast.
- */
-export declare class ToastAnimationSettings extends ChildProperty<ToastAnimationSettings> {
-    /**
-     * Specifies the animation to appear while showing the Toast.
-     *
-     * @default { effect: 'FadeIn', duration: 600, easing: 'ease' }
-     */
-    show: ToastAnimationsModel;
-    /**
-     * Specifies the animation to appear while hiding the Toast.
-     *
-     * @default { effect: 'FadeOut', duration: 600, easing: 'ease' }
-     */
-    hide: ToastAnimationsModel;
-}
-/**
- * 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>
- * ```
- */
-export declare class Toast extends Component<HTMLElement> implements INotifyPropertyChanged {
-    private toastContainer;
-    private toastEle;
-    private progressBarEle;
-    private intervalId;
-    private progressObj;
-    private contentTemplate;
-    private toastTemplate;
-    private customPosition;
-    private isDevice;
-    private innerEle;
-    private toastCollection;
-    private l10n;
-    private refElement;
-    private initRenderClass;
-    needsID: boolean;
-    /**
-     * Initializes a new instance of the Toast class.
-     *
-     * @param {ToastModel} options  - Specifies Toast model properties as options.
-     * @param {HTMLElement} element  - Specifies the element that is rendered as a Toast.
-     */
-    constructor(options?: ToastModel, element?: HTMLElement);
-    /**
-     * Specifies the width of the Toast in pixels/numbers/percentage. Number value is considered as pixels.
-     * In mobile devices, default width is considered as `100%`.
-     *
-     * @default '300'
-     * @blazorType string
-     */
-    width: string | number;
-    /**
-     * Specifies the height of the Toast in pixels/number/percentage. Number value is considered as pixels.
-     *
-     * @default 'auto'
-     * @blazorType string
-     */
-    height: string | number;
-    /**
-     * Specifies the title to be displayed on the Toast.
-     * Accepts selectors, string values and HTML elements.
-     *
-     * @default null
-     * @aspType string
-     */
-    title: string | Function;
-    /**
-     * Specifies the content to be displayed on the Toast.
-     * Accepts selectors, string values and HTML elements.
-     *
-     * @default null
-     * @blazorType string
-     * @aspType string
-     */
-    content: string | HTMLElement | Function;
-    /**
-     * Defines whether to allow the cross-scripting site or not.
-     *
-     * @default true
-     */
-    enableHtmlSanitizer: boolean;
-    /**
-     * Defines CSS classes to specify an icon for the Toast which is to be displayed at top left corner of the Toast.
-     *
-     * @default null
-     */
-    icon: string;
-    /**
-     * Defines single/multiple classes (separated by space) to be used for customization of Toast.
-     *
-     * @default null
-     */
-    cssClass: string;
-    /**
-     * Specifies the HTML element/element ID as a string that can be displayed as a Toast.
-     * The given template is taken as preference to render the Toast, even if the built-in properties such as title and content are defined.
-     *
-     * {% codeBlock src='toast/template/index.md' %}{% endcodeBlock %}
-     *
-     * @default null
-     * @aspType string
-     */
-    template: string | Function;
-    /**
-     * Specifies the newly created Toast message display order while multiple toast's are added to page one after another.
-     * By default, newly added Toast will be added after old Toast's.
-     *
-     * @default true
-     */
-    newestOnTop: boolean;
-    /**
-     * Specifies whether to show the close button in Toast message to close the Toast.
-     *
-     * @default false
-     */
-    showCloseButton: boolean;
-    /**
-     * Specifies whether to show the progress bar to denote the Toast message display timeout.
-     *
-     * @default false
-     */
-    showProgressBar: boolean;
-    /**
-     * Specifies the Toast display time duration on the page in milliseconds.
-     * - Once the time expires, Toast message will be removed.
-     * - Setting 0 as a time out value displays the Toast on the page until the user closes it manually.
-     *
-     * @default 5000
-     */
-    timeOut: number;
-    /**
-     * Specifies whether to show the progress bar with left to right direction to denote the Toast message display timeout.
-     */
-    progressDirection: ProgressDirectionType;
-    /**
-     * Specifies the Toast display time duration after interacting with the Toast.
-     *
-     * @default 1000
-     */
-    extendedTimeout: number;
-    /**
-     * Specifies the animation configuration settings for showing and hiding the Toast.
-     *
-     * {% codeBlock src='toast/animation/index.md' %}{% endcodeBlock %}
-     *
-     * @blazorType ToastAnimationSettings
-     * @default { show: { effect: 'FadeIn', duration: 600, easing: 'linear' },
-     * hide: { effect: 'FadeOut', duration: 600, easing: 'linear' }}
-     */
-    animation: ToastAnimationSettingsModel;
-    /**
-     * Specifies the position of the Toast message to be displayed within target container.
-     * In the case of multiple Toast display, new Toast position will not update on dynamic change of property values
-     * until the old Toast messages removed.
-     * X values are: Left , Right ,Center
-     * Y values are: Top , Bottom
-     *
-     * {% codeBlock src='toast/position/index.md' %}{% endcodeBlock %}
-     *
-     * @default { X: "Left", Y: "Top" }
-     * @blazorType ToastPosition
-     */
-    position: ToastPositionModel;
-    /**
-     * Specifies the collection of Toast action `buttons` to be rendered with the given
-     * Button model properties and its click action handler.
-     *
-     * {% codeBlock src='toast/buttons/index.md' %}{% endcodeBlock %}
-     *
-     * @default [{}]
-     * @deprecated
-     */
-    buttons: ButtonModelPropsModel[];
-    /**
-     * Specifies the target container where the Toast to be displayed.
-     * Based on the target, the positions such as `Left`, `Top` will be applied to the Toast.
-     * The default value is null, which refers the `document.body` element.
-     *
-     * @default null
-     * @aspType string
-     * @blazorType string
-     */
-    target: HTMLElement | Element | string;
-    /**
-     * Triggers the event after the Toast gets created.
-     *
-     * @event 'event'
-     * @blazorProperty 'Created'
-     */
-    created: EmitType<Event>;
-    /**
-     * Event triggers before sanitize the value.
-     *
-     * @event 'event'
-     * @blazorProperty 'OnSanitizeHtml'
-     */
-    beforeSanitizeHtml: EmitType<BeforeSanitizeHtmlArgs>;
-    /**
-     * Triggers the event after the Toast gets destroyed.
-     *
-     * @event 'event'
-     * @blazorProperty 'Destroyed'
-     */
-    destroyed: EmitType<Event>;
-    /**
-     * Triggers the event after the Toast shown on the target container.
-     *
-     * @event 'event'
-     * @blazorProperty 'Opened'
-     */
-    open: EmitType<ToastOpenArgs>;
-    /**
-     * Triggers the event before the toast shown.
-     *
-     * @event 'event'
-     * @blazorProperty 'OnOpen'
-     */
-    beforeOpen: EmitType<ToastBeforeOpenArgs>;
-    /**
-     * Triggers the event before the toast close.
-     *
-     * @event 'event'
-     * @blazorProperty 'OnClose'
-     */
-    beforeClose: EmitType<ToastBeforeCloseArgs>;
-    /**
-     * Trigger the event after the Toast hides.
-     *
-     * @event 'event'
-     * @blazorProperty 'Closed'
-     */
-    close: EmitType<ToastCloseArgs>;
-    /**
-     * The event will be fired while clicking on the Toast.
-     *
-     * @event 'event'
-     * @blazorProperty 'OnClick'
-     */
-    click: EmitType<ToastClickEventArgs>;
-    /**
-     * Gets the Component module name.
-     *
-     * @returns {string} - returns the string
-     * @private
-     */
-    getModuleName(): string;
-    /**
-     * Gets the persisted state properties of the Component.
-     *
-     * @returns {string} - returns the string
-     */
-    protected getPersistData(): string;
-    /**
-     * Removes the component from the DOM and detaches all its related event handlers, attributes and classes.
-     *
-     * @returns {void}
-     */
-    destroy(): void;
-    /**
-     * Initialize the event handler
-     *
-     * @returns {void}
-     * @private
-     */
-    protected preRender(): void;
-    /**
-     * Initialize the component rendering
-     *
-     * @returns {void}
-     * @private
-     */
-    render(): void;
-    /**
-     * To show Toast element on a document with the relative position.
-     *
-     * @param  {ToastModel} toastObj - To show Toast element on screen.
-     * @returns {void}
-     * @deprecated
-     */
-    show(toastObj?: ToastModel): void;
-    /**
-     * @param {string} id - specifies the id
-     * @param {ToastModel} toastObj - specifies the model
-     * @returns {void}
-     * @hidden
-     * @deprecated
-     * This method applicable for blazor alone.
-     */
-    showToast(id: string, toastObj?: ToastModel): void;
-    private isToastModel;
-    private swipeHandler;
-    private templateChanges;
-    private setCSSClass;
-    private setWidthHeight;
-    private templateRendering;
-    /**
-     * @param {string} value - specifies the string value.
-     * @returns {string} - returns the string
-     * @hidden
-     */
-    sanitizeHelper(value: string): string;
-    /**
-     * To Hide Toast element on a document.
-     * To Hide all toast element when passing 'All'.
-     *
-     * @param  {HTMLElement} element - To Hide Toast element on screen.
-     * @returns {void}
-     */
-    hide(element?: HTMLElement | Element | string): void;
-    private hideToast;
-    private fetchEle;
-    private clearProgress;
-    private removeToastContainer;
-    private clearContainerPos;
-    private clearContentTemplate;
-    private clearToastTemplate;
-    private isBlazorServer;
-    private destroyToast;
-    private personalizeToast;
-    private setAria;
-    private setPositioning;
-    private setCloseButton;
-    private setProgress;
-    private toastHoverAction;
-    private delayedToastProgress;
-    private updateProgressBar;
-    private setIcon;
-    private setTitle;
-    private setContent;
-    private appendMessageContainer;
-    private actionButtons;
-    private appendToTarget;
-    private clickHandler;
-    private keyDownHandler;
-    private displayToast;
-    private getContainer;
-    /**
-     * Called internally if any of the property value changed.
-     *
-     * @param {ToastModel} newProp - specifies the new property
-     * @param {ToastModel} oldProp - specifies the old property
-     * @returns {void}
-     * @private
-     */
-    onPropertyChanged(newProp: ToastModel, oldProp: ToastModel): void;
-}
-/**
- * Base for creating Toast through utility method.
- */
-export declare namespace ToastUtility {
-    /**
-     * To display a simple toast using the 'ToastUtility' with 'ToastModal' or
-     * as string with toast content, type, timeOut.
-     * ```
-     * Eg : ToastUtility.show('Toast Content Message', 'Information', 7000);
-     *
-     * ```
-     */
-    /**
-     *
-     * @param { ToastModel | string } content - Specifies the toast modal or the content of the Toast.
-     * @param {string} type - Specifies the type of toast.
-     * @param { number } timeOut - Specifies the timeOut of the toast.
-     * @returns {Toast} - returns the element
-     */
-    function show(content: ToastModel | string, type?: string, timeOut?: number): Toast;
-}

dist/ts/toast/toast.ts

-import { Component, Property, ChildProperty, INotifyPropertyChanged, NotifyPropertyChanges, Animation, createElement, animationMode, initializeCSPTemplate } from '@syncfusion/ej2-base';
-import { Browser, isNullOrUndefined as isNOU, getUniqueID, formatUnit, EventHandler, KeyboardEventArgs } from '@syncfusion/ej2-base';
-import { EmitType, Collection, Complex, setStyleAttribute, Event, Effect, detach, AnimationModel, L10n } from '@syncfusion/ej2-base';
-import { attributes, extend, closest, compile as templateCompiler, classList, BaseEventArgs, isUndefined } from '@syncfusion/ej2-base';
-import { SwipeEventArgs, Touch, isBlazor, SanitizeHtmlHelper, removeClass } from '@syncfusion/ej2-base';
-import { ButtonModel, Button } from '@syncfusion/ej2-buttons';
-import { getZindexPartial } from '@syncfusion/ej2-popups';
-import { ToastModel, ButtonModelPropsModel, ToastPositionModel } from './toast-model';
-import { ToastAnimationsModel, ToastAnimationSettingsModel } from './toast-model';
-
-/**
- * Provides information about a SanitizeSelectors.
- */
-export interface SanitizeSelectors {
-    /** Returns the tags. */
-    tags?: string[]
-    /** Returns the attributes. */
-    attributes?: SanitizeRemoveAttrs[]
-}
-
-/**
- * Provides information about a BeforeSanitizeHtml event.
- */
-export interface BeforeSanitizeHtmlArgs {
-    /** Illustrates whether the current action needs to be prevented or not. */
-    cancel?: boolean
-    /** It is a callback function and executed it before our inbuilt action. It should return HTML as a string.
-     *
-     * @function
-     * @param {string} value - Returns the value.
-     * @returns {string}
-     */
-    helper?: Function
-    /** Returns the selectors object which carrying both tags and attributes selectors to block list of cross-site scripting attack.
-     *  Also possible to modify the block list in this event.
-     */
-    selectors?: SanitizeSelectors
-}
-
-/**
- * Provides information about a SanitizeRemoveAttributes.
- */
-export interface SanitizeRemoveAttrs {
-    /** Defines the attribute name to sanitize */
-    attribute?: string
-    /** Defines the selector that sanitize the specified attributes within the selector */
-    selector?: string
-}
-
-/**
- * Specifies the options for positioning the Toast in Y axis.
- */
-export type PositionY = 'Top' | 'Bottom';
-
-
-/**
- * Specifies the direction for the Toast progressBar.
- */
-export type ProgressDirectionType  = 'Rtl' | 'Ltr';
-
-/**
- * Specifies the options for positioning the Toast in X axis.
- */
-export type PositionX = 'Left' | 'Right' | 'Center';
-
-/**
- * Specifies the event arguments of Toast click.
- */
-export interface ToastClickEventArgs extends BaseEventArgs {
-    /** Defines the Toast element. */
-    element: HTMLElement
-    /**
-     * Defines the Toast object.
-     *
-     * @deprecated
-     */
-    toastObj?: Toast
-    /** Defines the prevent action for Toast click event. */
-    cancel: boolean
-    /** Defines the close action for click or tab on the Toast. */
-    clickToClose: boolean
-    /** Defines the current event object. */
-    originalEvent: Event
-}
-
-/**
- * Specifies the event arguments of Toast before open.
- */
-export interface ToastBeforeOpenArgs extends BaseEventArgs {
-    /**
-     * Defines the Toast object.
-     *
-     * @deprecated
-     */
-    toastObj?: Toast
-    /** Defines current Toast model properties as options. */
-    options?: ToastModel
-    /** Defines the Toast element. */
-    element: HTMLElement
-    /** Defines the prevent action for before opening toast. */
-    cancel: boolean
-}
-
-/**
- * Specifies the event arguments of Toast before close.
- */
-export interface ToastBeforeCloseArgs extends BaseEventArgs {
-    /** Defines current Toast model properties as options. */
-    options?: ToastModel
-    /** Defines the Toast element. */
-    element: HTMLElement
-    /** Defines the prevent action for before closing toast. */
-    cancel: boolean
-    /** Defines the interaction type. */
-    type: string
-    /** Defines the Toast container element. */
-    toastContainer: HTMLElement
-}
-
-
-/**
- * Toast Collection model
- *
- * @hidden
- */
-export interface CollectionToast extends ToastModel {
-    /**
-     * Element of the current toast
-     */
-    element?: HTMLElement[]
-}
-
-/**
- * Specifies the event arguments of Toast open.
- */
-export interface ToastOpenArgs extends BaseEventArgs {
-    /**
-     * Defines the Toast object.
-     *
-     * @deprecated
-     */
-    toastObj?: Toast
-    /** Defines current Toast model properties as options. */
-    options?: ToastModel
-    /** Defines the Toast element. */
-    element: HTMLElement
-}
-
-/**
- * Specifies the event arguments of Toast close.
- */
-export interface ToastCloseArgs extends BaseEventArgs {
-    /** Defines the Toast container element. */
-    toastContainer: HTMLElement
-    /** Defines current Toast model properties as options. */
-    options?: ToastModel
-    /**
-     * Defines the Toast object.
-     *
-     * @deprecated
-     */
-    toastObj?: Toast
-}
-
-
-interface Progressbar {
-    maxHideTime: number
-    intervalId: number
-    timeOutId: number
-    hideEta: number
-    element: HTEle
-    progressEle: HTEle
-}
-
-type HTEle = HTMLElement;
-
-const ROOT: string = 'e-toast';
-const CONTAINER: string = 'e-toast-container';
-const TITLE: string = 'e-toast-title';
-const WIDTHFULL: string = 'e-toast-full-width';
-const CONTENT: string = 'e-toast-content';
-const MESSAGE: string = 'e-toast-message';
-const ICON: string = 'e-toast-icon';
-const PROGRESS: string = 'e-toast-progress';
-const ACTIOBUTTONS: string = 'e-toast-actions';
-const CLOSEBTN: string = 'e-toast-close-icon';
-const RTL: string = 'e-rtl';
-const TOAST_BLAZOR_HIDDEN: string = 'e-blazor-toast-hidden';
-
-/**
- * An object that is used to configure the Toast X Y positions.
- */
-export class ToastPosition extends ChildProperty<ToastPosition> {
-    /**
-     * Specifies the position of the Toast notification with respect to the target container's left edge.
-     *
-     * @default 'Left'
-     * @aspType string
-     * @blazorType string
-     */
-    @Property('Left')
-    public X: PositionX | number | string;
-    /* eslint-enable */
-
-    /**
-     * Specifies the position of the Toast notification with respect to the target container's top edge.
-     *
-     * @default 'Top'
-     * @aspType string
-     * @blazorType string
-     */
-    @Property('Top')
-    public Y: PositionY | number | string;
-    /* eslint-enable */
-}
-
-/**
- * An object that is used to configure the action button model properties and event.
- */
-export class ButtonModelProps extends ChildProperty<ButtonModelProps> {
-    /**
-     * Specifies the Button component model properties to render the Toast action buttons.
-     * ```html
-     * <div id="element"> </div>
-     * ```
-     * ```typescript
-     * let toast: Toast =  new Toast({
-     *      buttons:
-     *      [{
-     *         model: { content:`Button1`, cssClass: `e-success` }
-     *      }]
-     * });
-     * toast.appendTo('#element');
-     * ```
-     *
-     * @default null
-     */
-    @Property(null)
-    public model: ButtonModel;
-
-    /**
-     * Specifies the click event binding of action buttons created within Toast.
-     *
-     * @event 'event'
-     * @blazorProperty 'Clicked'
-     * @blazorType Microsoft.AspNetCore.Components.Web.MouseEventArgs
-     */
-    @Property(null)
-    public click: EmitType<Event>;
-}
-
-/**
- * An object that is used to configure the animation object of Toast.
- */
-export class ToastAnimations extends ChildProperty<ToastAnimations> {
-    /**
-     * Specifies the type of animation.
-     *
-     * @default 'FadeIn'
-     * @aspType string
-     */
-    @Property('FadeIn')
-    public effect: Effect;
-    /**
-     * Specifies the duration to animate.
-     *
-     * @default 600
-     */
-    @Property(600)
-    public duration: number;
-    /**
-     * Specifies the animation timing function.
-     *
-     * @default 'ease'
-     */
-    @Property('ease')
-    public easing: string;
-}
-
-/**
- * An object that is used to configure the show/hide animation settings of Toast.
- */
-export class ToastAnimationSettings extends ChildProperty<ToastAnimationSettings> {
-    /**
-     * Specifies the animation to appear while showing the Toast.
-     *
-     * @default { effect: 'FadeIn', duration: 600, easing: 'ease' }
-     */
-    @Complex<ToastAnimationsModel>({ effect: 'FadeIn', duration: 600, easing: 'ease' }, ToastAnimations)
-    public show: ToastAnimationsModel;
-    /**
-     * Specifies the animation to appear while hiding the Toast.
-     *
-     * @default { effect: 'FadeOut', duration: 600, easing: 'ease' }
-     */
-    @Complex<ToastAnimationsModel>({ effect: 'FadeOut', duration: 600, easing: 'ease' }, ToastAnimations)
-    public hide: ToastAnimationsModel;
-}
-
-/**
- * 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>
- * ```
- */
-@NotifyPropertyChanges
-export class Toast extends Component<HTMLElement> implements INotifyPropertyChanged {
-
-    private toastContainer: HTEle;
-    private toastEle: HTEle;
-    private progressBarEle: HTEle;
-    private intervalId: number[];
-    private progressObj: Progressbar[];
-    private contentTemplate: HTEle;
-    private toastTemplate: HTEle;
-    private customPosition: boolean;
-    private isDevice: Boolean;
-    private innerEle: Node;
-    private toastCollection: CollectionToast[] = [];
-    private l10n: L10n;
-    private refElement: HTMLElement;
-    private initRenderClass: string;
-    public needsID: boolean;
-
-    /**
-     * Initializes a new instance of the Toast class.
-     *
-     * @param {ToastModel} options  - Specifies Toast model properties as options.
-     * @param {HTMLElement} element  - Specifies the element that is rendered as a Toast.
-     */
-    constructor(options?: ToastModel, element?: HTMLElement) {
-        super(options, element);
-        this.needsID = true;
-    }
-
-    /**
-     * Specifies the width of the Toast in pixels/numbers/percentage. Number value is considered as pixels.
-     * In mobile devices, default width is considered as `100%`.
-     *
-     * @default '300'
-     * @blazorType string
-     */
-    @Property('300px')
-    public width: string | number;
-
-    /**
-     * Specifies the height of the Toast in pixels/number/percentage. Number value is considered as pixels.
-     *
-     * @default 'auto'
-     * @blazorType string
-     */
-    @Property('auto')
-    public height: string | number;
-
-    /**
-     * Specifies the title to be displayed on the Toast.
-     * Accepts selectors, string values and HTML elements.
-     *
-     * @default null
-     * @aspType string
-     */
-    @Property(null)
-    public title: string | Function;
-
-    /**
-     * Specifies the content to be displayed on the Toast.
-     * Accepts selectors, string values and HTML elements.
-     *
-     * @default null
-     * @blazorType string
-     * @aspType string
-     */
-    @Property(null)
-    public content: string | HTMLElement | Function;
-
-    /**
-     * Defines whether to allow the cross-scripting site or not.
-     *
-     * @default true
-     */
-    @Property(true)
-    public enableHtmlSanitizer: boolean;
-
-    /**
-     * Defines CSS classes to specify an icon for the Toast which is to be displayed at top left corner of the Toast.
-     *
-     * @default null
-     */
-    @Property(null)
-    public icon: string;
-
-    /**
-     * Defines single/multiple classes (separated by space) to be used for customization of Toast.
-     *
-     * @default null
-     */
-    @Property(null)
-    public cssClass: string;
-
-    /**
-     * Specifies the HTML element/element ID as a string that can be displayed as a Toast.
-     * The given template is taken as preference to render the Toast, even if the built-in properties such as title and content are defined.
-     *
-     * {% codeBlock src='toast/template/index.md' %}{% endcodeBlock %}
-     *
-     * @default null
-     * @aspType string
-     */
-    @Property(null)
-    public template: string | Function;
-
-    /**
-     * Specifies the newly created Toast message display order while multiple toast's are added to page one after another.
-     * By default, newly added Toast will be added after old Toast's.
-     *
-     * @default true
-     */
-    @Property(true)
-    public newestOnTop: boolean;
-
-    /**
-     * Specifies whether to show the close button in Toast message to close the Toast.
-     *
-     * @default false
-     */
-    @Property(false)
-    public showCloseButton: boolean;
-
-    /**
-     * Specifies whether to show the progress bar to denote the Toast message display timeout.
-     *
-     * @default false
-     */
-    @Property(false)
-    public showProgressBar: boolean;
-
-    /**
-     * Specifies the Toast display time duration on the page in milliseconds.
-     * - Once the time expires, Toast message will be removed.
-     * - Setting 0 as a time out value displays the Toast on the page until the user closes it manually.
-     *
-     * @default 5000
-     */
-    @Property(5000)
-    public timeOut: number;
-
-    /**
-     * Specifies whether to show the progress bar with left to right direction to denote the Toast message display timeout.
-     */
-    @Property('Rtl')
-    public progressDirection: ProgressDirectionType;
-
-    /**
-     * Specifies the Toast display time duration after interacting with the Toast.
-     *
-     * @default 1000
-     */
-    @Property(1000)
-    public extendedTimeout: number;
-
-    /**
-     * Specifies the animation configuration settings for showing and hiding the Toast.
-     *
-     * {% codeBlock src='toast/animation/index.md' %}{% endcodeBlock %}
-     *
-     * @blazorType ToastAnimationSettings
-     * @default { show: { effect: 'FadeIn', duration: 600, easing: 'linear' },
-     * hide: { effect: 'FadeOut', duration: 600, easing: 'linear' }}
-     */
-    @Complex<ToastAnimationSettingsModel>({}, ToastAnimationSettings)
-    public animation: ToastAnimationSettingsModel;
-
-    /**
-     * Specifies the position of the Toast message to be displayed within target container.
-     * In the case of multiple Toast display, new Toast position will not update on dynamic change of property values
-     * until the old Toast messages removed.
-     * X values are: Left , Right ,Center
-     * Y values are: Top , Bottom
-     *
-     * {% codeBlock src='toast/position/index.md' %}{% endcodeBlock %}
-     *
-     * @default { X: "Left", Y: "Top" }
-     * @blazorType ToastPosition
-     */
-    @Complex<ToastPositionModel>({}, ToastPosition)
-    public position: ToastPositionModel;
-
-    /**
-     * Specifies the collection of Toast action `buttons` to be rendered with the given
-     * Button model properties and its click action handler.
-     *
-     * {% codeBlock src='toast/buttons/index.md' %}{% endcodeBlock %}
-     *
-     * @default [{}]
-     * @deprecated
-     */
-    @Collection<ButtonModelPropsModel>([{}], ButtonModelProps)
-    public buttons: ButtonModelPropsModel[];
-
-    /**
-     * Specifies the target container where the Toast to be displayed.
-     * Based on the target, the positions such as `Left`, `Top` will be applied to the Toast.
-     * The default value is null, which refers the `document.body` element.
-     *
-     * @default null
-     * @aspType string
-     * @blazorType string
-     */
-    @Property(null)
-    public target: HTMLElement | Element | string;
-
-    /**
-     * Triggers the event after the Toast gets created.
-     *
-     * @event 'event'
-     * @blazorProperty 'Created'
-     */
-    @Event()
-    public created: EmitType<Event>;
-
-    /**
-     * Event triggers before sanitize the value.
-     *
-     * @event 'event'
-     * @blazorProperty 'OnSanitizeHtml'
-     */
-    @Event()
-    public beforeSanitizeHtml: EmitType<BeforeSanitizeHtmlArgs>;
-
-    /**
-     * Triggers the event after the Toast gets destroyed.
-     *
-     * @event 'event'
-     * @blazorProperty 'Destroyed'
-     */
-    @Event()
-    public destroyed: EmitType<Event>;
-
-
-    /**
-     * Triggers the event after the Toast shown on the target container.
-     *
-     * @event 'event'
-     * @blazorProperty 'Opened'
-     */
-    @Event()
-    public open: EmitType<ToastOpenArgs>;
-
-    /**
-     * Triggers the event before the toast shown.
-     *
-     * @event 'event'
-     * @blazorProperty 'OnOpen'
-     */
-    @Event()
-    public beforeOpen: EmitType<ToastBeforeOpenArgs>;
-    /**
-     * Triggers the event before the toast close.
-     *
-     * @event 'event'
-     * @blazorProperty 'OnClose'
-     */
-    @Event()
-    public beforeClose: EmitType<ToastBeforeCloseArgs>;
-    /**
-     * Trigger the event after the Toast hides.
-     *
-     * @event 'event'
-     * @blazorProperty 'Closed'
-     */
-    @Event()
-    public close: EmitType<ToastCloseArgs>;
-    /**
-     * The event will be fired while clicking on the Toast.
-     *
-     * @event 'event'
-     * @blazorProperty 'OnClick'
-     */
-    @Event()
-    public click: EmitType<ToastClickEventArgs>;
-
-    /**
-     * Gets the Component module name.
-     *
-     * @returns {string} - returns the string
-     * @private
-     */
-    public getModuleName(): string {
-        return 'toast';
-    }
-    /**
-     * Gets the persisted state properties of the Component.
-     *
-     * @returns {string} - returns the string
-     */
-    protected getPersistData(): string {
-        return this.addOnPersist([]);
-    }
-    /**
-     * Removes the component from the DOM and detaches all its related event handlers, attributes and classes.
-     *
-     * @returns {void}
-     */
-    public destroy(): void {
-        this.hide('All');
-        this.element.classList.remove(CONTAINER);
-        setStyleAttribute(this.element, { 'position': '', 'z-index': '' });
-        if (!isNOU(this.refElement) && !isNOU(this.refElement.parentElement)) {
-            this.refElement.parentElement.insertBefore(this.element, this.refElement);
-            detach(this.refElement);
-            this.refElement = undefined;
-        }
-        if (!this.isBlazorServer()) { super.destroy(); }
-        if (this.element && this.element.parentElement ){
-            this.element.parentElement.removeChild(this.element);
-        }
-    }
-
-    /**
-     * Initialize the event handler
-     *
-     * @returns {void}
-     * @private
-     */
-    protected preRender(): void {
-    //There is no event handler
-        this.isDevice = Browser.isDevice;
-        if (this.width === '300px') {
-            this.width = (this.isDevice && screen.width < 768) ? '100%' : '300px';
-        }
-        if (isNOU(this.target)) {
-            this.target = document.body;
-        }
-        if (this.enableRtl && !this.isBlazorServer()) {
-            this.element.classList.add(RTL);
-        }
-    }
-
-    /**
-     * Initialize the component rendering
-     *
-     * @returns {void}
-     * @private
-     */
-    public render(): void {
-        this.progressObj = [];
-        this.intervalId = [];
-        this.contentTemplate = null;
-        this.toastTemplate = null;
-        this.renderComplete();
-        this.initRenderClass = this.element.className;
-    }
-    /**
-     * To show Toast element on a document with the relative position.
-     *
-     * @param  {ToastModel} toastObj - To show Toast element on screen.
-     * @returns {void}
-     * @deprecated
-     */
-    public show(toastObj?: ToastModel): void {
-        let collectionObj: CollectionToast;
-        if (!isNOU(toastObj)) {
-            this.templateChanges(toastObj);
-            collectionObj = JSON.parse(JSON.stringify(toastObj));
-            extend(this, this, toastObj);
-        }
-        if (isNOU(this.toastContainer)) {
-            this.toastContainer = this.getContainer();
-            const target: HTEle = typeof (this.target) === 'string' ? <HTEle>document.querySelector(this.target) :
-                (typeof (this.target) === 'object' ? (this.target as HTMLElement) : <HTEle>document.body);
-            if (isNOU(target)) {
-                return;
-            }
-            if (target.tagName === 'BODY') {
-                this.toastContainer.style.position = 'fixed';
-            } else {
-                this.toastContainer.style.position = 'absolute';
-                (target as HTEle).style.position = 'relative';
-            }
-            this.setPositioning(this.position);
-            target.appendChild(this.toastContainer);
-        }
-        if (this.isBlazorServer() && this.element.classList.contains('e-control')) {
-            this.isToastModel(toastObj);
-            return;
-        }
-        this.toastEle = this.createElement('div', { className: ROOT, id: getUniqueID('toast') });
-        this.setWidthHeight();
-        this.setCSSClass(this.cssClass);
-        if (isNOU(this.template) || this.template === '') {
-            this.personalizeToast();
-        } else {
-            this.templateRendering();
-        }
-        this.setProgress();
-        this.setCloseButton();
-        this.setAria();
-        this.appendToTarget(toastObj);
-        if (this.isDevice && screen.width < 768) {
-            new Touch(this.toastEle, { swipe: this.swipeHandler.bind(this) });
-        }
-        if (!isNOU(collectionObj)) {
-            extend(collectionObj, { element: [this.toastEle] }, true);
-            this.toastCollection.push(collectionObj);
-        }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        if ((this as any).isReact) {
-            this.renderReactTemplates();
-        }
-    }
-
-    /**
-     * @param {string} id - specifies the id
-     * @param {ToastModel} toastObj - specifies the model
-     * @returns {void}
-     * @hidden
-     * @deprecated
-     * This method applicable for blazor alone.
-     */
-    public showToast(id: string, toastObj?: ToastModel): void {
-        this.toastEle = this.element.querySelector('#' + id);
-        this.show(toastObj);
-    }
-
-    private isToastModel(toastObj?: ToastModel): void {
-        this.toastContainer = this.element;
-        this.setPositioning(this.position);
-        const proxy: Toast = null || this;
-        if (!isNOU(proxy.element.lastElementChild)) {
-            this.setProgress();
-        }
-        this.setAria();
-        this.appendToTarget(toastObj);
-    }
-
-    private swipeHandler(e: SwipeEventArgs): void {
-        const toastEle: HTMLElement = <HTMLElement>closest(<Element>e.originalEvent.target, '.' + ROOT + ':not(.' + CONTAINER + ')');
-        const hideAnimation: Effect = this.animation.hide.effect;
-        if (!isNOU(toastEle)) {
-            if (e.swipeDirection === 'Right') {
-                this.animation.hide.effect = 'SlideRightOut';
-                this.hideToast('swipe', toastEle);
-            } else if (e.swipeDirection === 'Left') {
-                this.animation.hide.effect = 'SlideLeftOut';
-                this.hideToast('swipe', toastEle);
-            }
-            this.animation.hide.effect = hideAnimation;
-        }
-    }
-
-    private templateChanges(toastObj: ToastModel): void {
-        if (!isUndefined(toastObj.content) && !isNOU(this.contentTemplate) && this.content !== toastObj.content) {
-            this.clearContentTemplate();
-        }
-        if (!isUndefined(toastObj.template) && !isNOU(this.toastTemplate) && this.template !== toastObj.template) {
-            this.clearToastTemplate();
-        }
-    }
-
-    private setCSSClass(cssClass: string): void {
-        if (cssClass) {
-            const split: string = cssClass.indexOf(',') !== -1 ? ',' : ' ';
-            classList(this.toastEle, cssClass.split(split), []);
-            if (this.toastContainer) {
-                classList(this.toastContainer, cssClass.split(split), []);
-            }
-        }
-    }
-
-
-    private setWidthHeight(): void {
-        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);
-    }
-
-    private templateRendering(): void {
-        this.fetchEle(this.toastEle, this.template, 'template');
-    }
-
-    /**
-     * @param {string} value - specifies the string value.
-     * @returns {string} - returns the string
-     * @hidden
-     */
-    public sanitizeHelper(value: string): string {
-        if (this.enableHtmlSanitizer) {
-            const item: BeforeSanitizeHtmlArgs = SanitizeHtmlHelper.beforeSanitize();
-            const beforeEvent: BeforeSanitizeHtmlArgs = {
-                cancel: false,
-                helper: null
-            };
-            extend(item, item, beforeEvent);
-            this.trigger('beforeSanitizeHtml', item);
-            if (item.cancel && !isNOU(item.helper)) {
-                value = item.helper(value);
-            } else if (!item.cancel) {
-                value = SanitizeHtmlHelper.serializeValue(item, value);
-            }
-        }
-        return value;
-    }
-
-    /**
-     * To Hide Toast element on a document.
-     * To Hide all toast element when passing 'All'.
-     *
-     * @param  {HTMLElement} element - To Hide Toast element on screen.
-     * @returns {void}
-     */
-    public hide(element?: HTMLElement | Element | string): void {
-        this.hideToast('', element);
-    }
-
-    private hideToast(interactionType: string, element?: HTMLElement | Element | string): void {
-        if (isNOU(this.toastContainer) || this.toastContainer.childElementCount === 0) {
-            return;
-        }
-        if (typeof element === 'string' && element === 'All') {
-            for (let i: number = 0; i < this.toastContainer.childElementCount; i++) {
-                this.destroyToast(this.toastContainer.children[i as number] as HTEle, interactionType);
-            }
-            return;
-        }
-        if (isNOU(element)) {
-            element = <HTEle>(this.newestOnTop ? this.toastContainer.lastElementChild : this.toastContainer.firstElementChild);
-        }
-        this.destroyToast(element as HTEle, interactionType);
-    }
-
-    private fetchEle(ele: HTEle, value: string | Function, prob: string): HTEle {
-        value = typeof (value) === 'string' ? this.sanitizeHelper(value) : value;
-        let templateFn: Function;
-        let tempVar: HTEle;
-        let tmpArray: HTEle[];
-        let templateProps: string;
-        if (ele.classList.contains(TITLE)) {
-            templateProps = this.element.id + 'title';
-        } else if (ele.classList.contains(CONTENT)) {
-            templateProps = this.element.id + 'content';
-        } else {
-            templateProps = this.element.id + 'template';
-        }
-        if (prob === 'content') {
-            tempVar = this.contentTemplate;
-        } else {
-            tempVar = this.toastTemplate;
-        }
-        if (!isNOU(tempVar)) {
-            ele.appendChild(tempVar.cloneNode(true));
-            return ele;
-        }
-        try {
-            if (typeof value !== 'function' && document.querySelectorAll(value).length > 0) {
-                let elem: HTEle = null;
-                if (prob !== 'title') {
-                    elem = <HTEle>document.querySelector(value);
-                    ele.appendChild(elem);
-                    elem.style.display = '';
-                }
-                const clo: HTEle = isNOU(<HTEle>elem) ? tempVar : <HTEle>elem.cloneNode(true);
-                if (prob === 'content') {
-                    this.contentTemplate = clo;
-                } else {
-                    this.toastTemplate = clo;
-                }
-            }
-            else {
-                templateFn = templateCompiler(value);
-            }
-        } catch (e) {
-            templateFn = typeof value == 'object' ? templateCompiler(value) : templateCompiler(initializeCSPTemplate( function(): string | Function { return value; }));
-        }
-        if (!isNOU(templateFn)) {
-            if (!this.isBlazorServer()) {
-                tmpArray = templateFn({}, this, prob, null, true);
-            } else {
-                const isString: boolean = true;
-                tmpArray = templateFn({}, this, prob, templateProps, isString);
-            }
-        }
-        if (!isNOU(tmpArray) && tmpArray.length > 0 && !(isNOU(tmpArray[0].tagName) && tmpArray.length === 1)) {
-            [].slice.call(tmpArray).forEach((el: HTEle): void => {
-                if (!isNOU(el.tagName)) {
-                    el.style.display = '';
-                }
-                ele.appendChild(el);
-            });
-        } else if (typeof value !== 'function' && ele.childElementCount === 0) {
-            ele.innerHTML = value;
-        }
-        return ele;
-    }
-
-    private clearProgress(intervalId: number): void {
-        if (!isNOU(this.intervalId[intervalId as number])) {
-            clearInterval(this.intervalId[intervalId as number]);
-            delete this.intervalId[intervalId as number];
-        }
-        if (!isNOU(this.progressObj[intervalId as number])) {
-            clearInterval(this.progressObj[intervalId as number].intervalId);
-            delete this.progressObj[intervalId as number];
-        }
-    }
-
-    private removeToastContainer(isClosed: boolean): void {
-        if (isClosed && this.toastContainer.classList.contains('e-toast-util')) {
-            detach(this.toastContainer);
-        }
-    }
-
-    private clearContainerPos(isClosed?: boolean): void {
-        if (this.isBlazorServer()) {
-            this.toastContainer = null;
-            return;
-        }
-        if (this.customPosition) {
-            setStyleAttribute(this.toastContainer, { 'left': '', 'top': '' });
-            this.removeToastContainer(isClosed);
-            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((pos: string) => {
-                if (!isNOU(this.toastContainer) && this.toastContainer.classList.contains(pos)) {
-                    this.toastContainer.classList.remove(pos);
-                }
-            });
-            this.removeToastContainer(isClosed);
-            this.toastContainer = null;
-        }
-        if (!isNOU(this.contentTemplate)) {
-            this.clearContentTemplate();
-        }
-        if (!isNOU(this.toastTemplate)) {
-            this.clearToastTemplate();
-        }
-    }
-
-    private clearContentTemplate(): void {
-        this.contentTemplate.style.display = 'none';
-        document.body.appendChild(this.contentTemplate);
-        this.contentTemplate = null;
-    }
-
-    private clearToastTemplate(): void {
-        this.toastTemplate.style.display = 'none';
-        document.body.appendChild(this.toastTemplate);
-        this.toastTemplate = null;
-    }
-    private isBlazorServer(): boolean {
-        return (isBlazor() && this.isServerRendered);
-    }
-    private destroyToast(toastEle: HTEle, interactionType: string): void {
-        let toastObj: CollectionToast;
-        for (let i: number = 0; i < this.toastCollection.length; i++) {
-            if (this.toastCollection[i as number].element[0] === toastEle) {
-                toastObj = this.toastCollection[i as number];
-                this.toastCollection.splice(i, 1);
-            }
-        }
-        const toastBeforeClose: ToastBeforeCloseArgs = {
-            options: this,
-            cancel: false,
-            type: interactionType,
-            element: toastEle,
-            toastContainer: this.toastContainer
-        };
-        let hideAnimate: ToastAnimationsModel = this.animation.hide;
-        let animate: AnimationModel = {
-            duration: hideAnimate.duration, name: (<Effect>hideAnimate.effect === <Effect>'None' && animationMode === 'Enable') ? 'FadeOut' : hideAnimate.effect, timingFunction: hideAnimate.easing
-        };
-        const intervalId: number = parseInt(toastEle.id.split('toast_')[1], 10);
-        const toastClose: ToastCloseArgs = this.isBlazorServer() ? {
-            options: toastObj,
-            toastContainer: this.toastContainer
-        } : {
-            options: toastObj,
-            toastContainer: this.toastContainer,
-            toastObj: this
-        };
-        this.trigger('beforeClose', toastBeforeClose, (toastBeforeCloseArgs: ToastBeforeCloseArgs) => {
-            if (!toastBeforeCloseArgs.cancel) {
-                if (!isNOU(this.progressObj[intervalId as number]) && !isNOU(toastEle.querySelector('.' + PROGRESS))) {
-                    this.progressObj[intervalId as number].progressEle.style.width = '0%';
-                }
-                animate.end = () => {
-                    this.clearProgress(intervalId);
-                    if (!this.isBlazorServer() || isNOU(toastObj)) {
-                        detach(toastEle);
-                    }
-                    this.trigger('close', toastClose);
-                    if (this.toastContainer.childElementCount === 0) {
-                        this.clearContainerPos(true);
-                    }
-                    hideAnimate = null;
-                    animate = null;
-                };
-                new Animation(animate).animate(toastEle);
-            }
-        });
-    }
-
-    private personalizeToast(): void {
-        this.setIcon();
-        this.setTitle();
-        this.setContent();
-        this.actionButtons();
-    }
-
-    private setAria(): void {
-        attributes(this.toastEle, { 'role': 'alert' });
-    }
-    private setPositioning(pos: ToastPositionModel): void {
-        if (this.isBlazorServer()) {
-            return;
-        }
-        if (!isNaN(parseFloat(pos.X as string)) || !isNaN(parseFloat(pos.Y as string))) {
-            this.customPosition = true;
-            setStyleAttribute(this.toastContainer, { 'left': formatUnit(pos.X), 'top': formatUnit(pos.Y) });
-        } else {
-            this.toastContainer.classList.add(ROOT + '-' + pos.Y.toString().toLowerCase() + '-' + pos.X.toString().toLowerCase());
-        }
-    }
-
-    private setCloseButton(): void {
-        if (!this.showCloseButton) {
-            return;
-        }
-        const localeText: object = { close: 'Close' };
-        this.l10n = new L10n('toast', localeText, this.locale);
-        this.l10n.setLocale(this.locale);
-        const closeIconTitle: string = this.l10n.getConstant('close');
-        const closeBtn: HTEle = this.createElement(
-            'div', { className: CLOSEBTN + ' e-icons ', attrs: { tabindex: '0', 'aria-label': closeIconTitle, 'role': 'button'  } });
-        this.toastEle.classList.add('e-toast-header-close-icon');
-        this.toastEle.appendChild(closeBtn);
-    }
-
-    private setProgress(): void {
-        if (this.timeOut > 0) {
-            const id: number = parseInt(this.toastEle.id.split('toast_')[1], 10);
-            this.intervalId[id as number] = window.setTimeout(this.destroyToast.bind(this, this.toastEle), this.timeOut);
-            this.progressObj[id as number] = { hideEta: null, intervalId: null, maxHideTime: null,
-                element: null, timeOutId: null, progressEle: null };
-            this.progressObj[id as number].maxHideTime = parseFloat(this.timeOut + '');
-            this.progressObj[id as number].hideEta = new Date().getTime() + this.progressObj[id as number].maxHideTime;
-            this.progressObj[id as number].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 as number].timeOutId = this.intervalId[id as number];
-            }
-            if (this.showProgressBar) {
-                this.progressBarEle = this.createElement('div', { className: PROGRESS });
-                this.toastEle.insertBefore(this.progressBarEle, this.toastEle.children[0]);
-                this.progressObj[id as number].intervalId =
-                setInterval(this.updateProgressBar.bind(this, this.progressObj[id as number]), 10);
-                this.progressObj[id as number].progressEle = this.progressBarEle;
-            }
-        }
-    }
-
-    private toastHoverAction(id: number): void {
-        clearTimeout(this.progressObj[id as number].timeOutId);
-        clearInterval(this.progressObj[id as number].intervalId);
-        this.progressObj[id as number].hideEta = 0;
-        const toastEle: HTEle = this.progressObj[id as number].element;
-        if (!isNOU(toastEle.querySelector('.' + PROGRESS))) {
-            this.progressObj[id as number].progressEle.style.width = '0%';
-        }
-    }
-
-    private delayedToastProgress(id: number): void {
-        const progress: Progressbar = this.progressObj[id as number];
-        if (!isNOU(progress)) {
-            const toastEle: HTEle = 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);
-            }
-        }
-    }
-
-    private updateProgressBar(progressObj: Progressbar): void {
-        let percentage: number = ((progressObj.hideEta - (new Date().getTime())) / progressObj.maxHideTime) * 100;
-        percentage = this.progressDirection === 'Ltr' ? 100  - percentage : percentage;
-        progressObj.progressEle.style.width = percentage + '%';
-    }
-
-    private setIcon(): void {
-        if (isNOU(this.icon) || this.icon.length === 0) {
-            return;
-        }
-        const iconEle: HTEle = this.createElement('div', { className: ICON + ' e-icons ' + this.icon });
-        this.toastEle.classList.add('e-toast-header-icon');
-        this.toastEle.appendChild(iconEle);
-    }
-
-    private setTitle(): void {
-        if (isNOU(this.title)) {
-            return;
-        }
-        let titleEle: HTEle = this.createElement('div', { className: TITLE });
-        titleEle = this.fetchEle(titleEle, this.title, 'title');
-        const msgContainer: HTEle = this.createElement('div', { className: MESSAGE });
-        msgContainer.appendChild(titleEle);
-        this.toastEle.appendChild(msgContainer);
-    }
-
-    private setContent(): void {
-        let contentEle: HTEle = this.createElement('div', { className: CONTENT });
-        const ele: HTEle = this.element;
-        if (isNOU(this.content) || this.content === '') {
-            const isContent: boolean = this.element.innerHTML.replace(/\s/g, '') !== '';
-            if ((ele.children.length > 0 || isContent) && !(ele.firstElementChild && ele.firstElementChild.classList.contains(ROOT))) {
-                this.innerEle = document.createDocumentFragment();
-                const tempEle: HTEle = this.createElement('div');
-                while (ele.childNodes.length !== 0) {
-                    this.innerEle.appendChild(this.element.childNodes[0]);
-                }
-                contentEle.appendChild(this.innerEle);
-                [].slice.call(contentEle.children).forEach((ele: HTEle) => {
-                    tempEle.appendChild(ele.cloneNode(true));
-                });
-                this.content = tempEle;
-                this.appendMessageContainer(contentEle);
-            }
-        } else {
-            if (typeof (this.content) === 'object' && !isNOU((this.content as HTEle).tagName)) {
-                contentEle.appendChild(this.content);
-                this.content = <HTEle>this.content.cloneNode(true);
-                this.appendMessageContainer(contentEle);
-            } else {
-                contentEle = this.fetchEle(contentEle, this.content as string, 'content');
-                this.appendMessageContainer(contentEle);
-            }
-        }
-    }
-
-    private appendMessageContainer(element: HTEle): void {
-        if (this.toastEle.querySelectorAll('.' + MESSAGE).length > 0) {
-            this.toastEle.querySelector('.' + MESSAGE).appendChild(element);
-        } else {
-            const msgContainer: HTEle = this.createElement('div', { className: MESSAGE });
-            msgContainer.appendChild(element);
-            this.toastEle.appendChild(msgContainer);
-        }
-    }
-
-    private actionButtons(): void {
-        const actionBtnContainer: HTEle = this.createElement('div', { className: ACTIOBUTTONS });
-        [].slice.call(this.buttons).forEach((actionBtn: ButtonModelPropsModel) => {
-            if (isNOU(actionBtn.model)) {
-                return;
-            }
-            const btnDom: HTMLButtonElement = this.createElement('button') as HTMLButtonElement;
-            btnDom.setAttribute('type', 'button');
-            if (isNOU(actionBtn.model.cssClass) || actionBtn.model.cssClass.length === 0) {
-                actionBtn.model.cssClass = 'e-primary' + ' ' + this.cssClass;
-            }
-            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);
-        }
-    }
-
-    private appendToTarget(toastObj?: ToastModel): void {
-        const toastBeforeOpen: ToastBeforeOpenArgs = this.isBlazorServer() ? {
-            options: toastObj,
-            element: this.toastEle,
-            cancel: false
-        } : {
-            options: toastObj,
-            toastObj: this,
-            element: this.toastEle,
-            cancel: false
-        };
-        this.trigger('beforeOpen', toastBeforeOpen, (toastBeforeOpenArgs: ToastBeforeOpenArgs) => {
-            if (!toastBeforeOpenArgs.cancel) {
-                if (!this.isBlazorServer()) {
-                    this.toastEle.style.display = 'none';
-                }
-                if (this.newestOnTop && this.toastContainer.childElementCount !== 0) {
-                    this.toastContainer.insertBefore(this.toastEle, this.toastContainer.children[0]);
-                } else if (!this.isBlazorServer()) {
-                    this.toastContainer.appendChild(this.toastEle);
-                }
-                removeClass([this.toastEle], TOAST_BLAZOR_HIDDEN);
-                EventHandler.add(this.toastEle, 'click', this.clickHandler, this);
-                EventHandler.add(this.toastEle, 'keydown', this.keyDownHandler, this);
-                this.toastContainer.style.zIndex = getZindexPartial(this.toastContainer) + '';
-                this.displayToast(this.toastEle, toastObj);
-            } else if (this.isBlazorServer()) {
-                const intervalId: number = parseInt(this.toastEle.id.split('toast_')[1], 10);
-                this.clearProgress(intervalId);
-                detach(this.toastEle);
-                if (this.toastContainer.childElementCount === 0) {
-                    this.clearContainerPos();
-                }
-            }
-        });
-    }
-
-    private clickHandler(e: Event): void {
-        if (!this.isBlazorServer()) {
-            e.stopPropagation();
-        }
-        const target: HTEle = e.target as HTEle;
-        const toastEle: HTEle = closest(target, '.' + ROOT) as HTEle;
-        const clickArgs: ToastClickEventArgs = this.isBlazorServer() ? {
-            element: toastEle, cancel: false, clickToClose: false, originalEvent: e
-        } : {
-            element: toastEle, cancel: false, clickToClose: false, originalEvent: e, toastObj: this
-        };
-        const isCloseIcon: boolean = target.classList.contains(CLOSEBTN);
-        this.trigger('click', clickArgs, (toastClickArgs: ToastClickEventArgs) => {
-            if ((isCloseIcon && !toastClickArgs.cancel) || toastClickArgs.clickToClose) {
-                this.destroyToast(toastEle, 'click');
-            }
-        });
-    }
-
-    private keyDownHandler(e: Event): void {
-        if (((e as KeyboardEventArgs).target as HTMLElement).classList.contains(CLOSEBTN) &&
-      ((e as KeyboardEventArgs).keyCode === 13 || (e as KeyboardEventArgs).keyCode === 32)) {
-            const target: HTEle = e.target as HTEle;
-            const toastEle: HTEle = closest(target, '.' + ROOT) as HTEle;
-            this.destroyToast(toastEle, 'key');
-        }
-    }
-
-    private displayToast(toastEle: HTEle, toastObj?: ToastModel): void {
-        const showAnimate: ToastAnimationsModel = this.animation.show;
-        const animate: AnimationModel = {
-            duration: showAnimate.duration, name: (<Effect>showAnimate.effect === <Effect>'None' && animationMode === 'Enable') ? 'FadeIn' : showAnimate.effect, timingFunction: showAnimate.easing
-        };
-        const toastOpen: ToastOpenArgs = this.isBlazorServer() ? {
-            options: toastObj,
-            element: this.toastEle
-        } : {
-            options: toastObj,
-            toastObj: this,
-            element: this.toastEle
-        };
-        animate.begin = () => {
-            toastEle.style.display = '';
-        };
-        animate.end = () => {
-            this.trigger('open', toastOpen);
-        };
-        new Animation(animate).animate(toastEle);
-    }
-
-    private getContainer(): HTEle {
-        this.element.classList.add(CONTAINER);
-        return this.element;
-    }
-
-    /**
-     * Called internally if any of the property value changed.
-     *
-     * @param {ToastModel} newProp - specifies the new property
-     * @param {ToastModel} oldProp - specifies the old property
-     * @returns {void}
-     * @private
-     */
-    // eslint-disable-next-line
-    public onPropertyChanged(newProp: ToastModel, oldProp: ToastModel): void {
-        const container: HTMLElement = this.element;
-        for (const prop of Object.keys(newProp)) {
-            switch (prop) {
-            case 'enableRtl':
-                if (newProp.enableRtl) {
-                    container.classList.add(RTL);
-                } else {
-                    container.classList.remove(RTL);
-                }
-                break;
-            }
-        }
-
-    }
-}
-
-/**
- * Base for creating Toast through utility method.
- */
-// eslint-disable-next-line
-export namespace ToastUtility {
-    /**
-     * To display a simple toast using the 'ToastUtility' with 'ToastModal' or
-     * as string with toast content, type, timeOut.
-     * ```
-     * Eg : ToastUtility.show('Toast Content Message', 'Information', 7000);
-     *
-     * ```
-     */
-    /* istanbul ignore next */
-    /**
-     *
-     * @param { ToastModel | string } content - Specifies the toast modal or the content of the Toast.
-     * @param {string} type - Specifies the type of toast.
-     * @param { number } timeOut - Specifies the timeOut of the toast.
-     * @returns {Toast} - returns the element
-     */
-    export function show(content: ToastModel | string, type?: string, timeOut?: number): Toast {
-        let toastContainerElement: HTMLElement;
-        if (document.querySelector('.' + CONTAINER)) {
-            toastContainerElement = document.querySelector('.' + CONTAINER);
-        } else {
-            toastContainerElement = createElement('div', { 'className': ROOT + ' ' + CONTAINER + ' e-toast-util' });
-            document.body.appendChild(toastContainerElement);
-        }
-        let untilToastsModel: ToastModel;
-        if (typeof(content) === 'string') {
-            let cssClass: string;
-            let icon: string;
-            if (!isNOU(type)) {
-                switch (type) {
-                case 'Warning':
-                    cssClass = 'e-toast-warning';
-                    icon = 'e-toast-warning-icon';
-                    break;
-                case 'Success':
-                    cssClass = 'e-toast-success';
-                    icon = 'e-toast-success-icon';
-                    break;
-                case 'Error':
-                    cssClass = 'e-toast-danger';
-                    icon = 'e-toast-error-icon';
-                    break;
-                case 'Information':
-                    cssClass = 'e-toast-info';
-                    icon = 'e-toast-info-icon';
-                    break;
-                }
-            } else {
-                cssClass = '';
-                icon = '';
-            }
-            untilToastsModel = {
-                content: content,
-                cssClass: cssClass,
-                icon: icon,
-                timeOut: !isNOU(timeOut) ? timeOut : 5000
-            };
-        } else {
-            untilToastsModel = content;
-        }
-        const toastObj : Toast = new Toast(untilToastsModel);
-        toastObj.appendTo(toastContainerElement);
-        toastObj.show();
-        return toastObj;
-    }
-}

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

3606290

-3.12%

Number of package files

446

-3.88%

Lines of code

83962

-3.85%

Number of low supply chain risk alerts

2

100%

Dependency changes

• + Added

  @syncfusion/ej2-base@31.2.18
  (transitive)

• + Added

  @syncfusion/ej2-buttons@31.2.18
  (transitive)

• + Added

  @syncfusion/ej2-icons@31.2.12
  (transitive)

• + Added

  @syncfusion/ej2-popups@31.2.12
  (transitive)

• - Removed

  @syncfusion/ej2-base@31.1.22
  (transitive)

• - Removed

  @syncfusion/ej2-buttons@31.1.21
  (transitive)

• - Removed

  @syncfusion/ej2-icons@31.1.17
  (transitive)

• - Removed

  @syncfusion/ej2-popups@31.1.20
  (transitive)

• Updated

  @syncfusion/ej2-base@~31.2.2

• Updated

  @syncfusion/ej2-buttons@~31.2.2

• Updated

  @syncfusion/ej2-popups@~31.2.2