@syncfusion/ej2-svg-base - npm Package Compare versions

Comparing version 16.2.45 to 16.2.46

dist/ej2-svg-base.umd.min.js

@@ -1,2 +0,11 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@syncfusion/ej2-base")):"function"==typeof define&&define.amd?define(["exports","@syncfusion/ej2-base"],e):e(t.ej={},t.ej2Base)}(this,function(t,e){"use strict";function i(t){var e;switch(t){case"Highcontrast":e={tooltipFill:"#ffffff",tooltipBoldLabel:"#000000",tooltipLightLabel:"#000000",tooltipHeaderLine:"#969696"};break;default:e={tooltipFill:"rgba(0, 8, 22, 0.75)",tooltipBoldLabel:"#ffffff",tooltipLightLabel:"#dbdbdb",tooltipHeaderLine:"#ffffff"}}return e}function o(t,i){var o=document.getElementById("chartmeasuretext");return null===o&&(o=e.createElement("text",{id:"chartmeasuretext"}),document.body.appendChild(o)),o.innerHTML=t,o.style.position="absolute",o.style.fontSize=i.size,o.style.fontWeight=i.fontWeight,o.style.fontStyle=i.fontStyle,o.style.fontFamily=i.fontFamily,o.style.visibility="hidden",o.style.top="-100",o.style.left="0",o.style.whiteSpace="nowrap",o.style.lineHeight="normal",new h(o.clientWidth,o.clientHeight)}function r(t){return document.getElementById(t)}function n(t){var i=r(t);i&&e.remove(i)}function a(t,i,o,r,n,a){var s=new e.SvgRenderer(""),h=function(t,i,o,r,n){var a,s="Path",h=i.width,p=i.height,d=t.x,l=t.y,c=t.x+-h/2,y=t.y+-p/2;switch(o){case"Circle":case"Bubble":s="Ellipse",e.merge(r,{rx:h/2,ry:p/2,cx:d,cy:l});break;case"Cross":a="M "+c+" "+l+" L "+(d+h/2)+" "+l+" M "+d+" "+(l+p/2)+" L "+d+" "+(l+-p/2),e.merge(r,{d:a});break;case"HorizontalLine":a="M "+c+" "+l+" L "+(d+h/2)+" "+l,e.merge(r,{d:a});break;case"VerticalLine":a="M "+d+" "+(l+p/2)+" L "+d+" "+(l+-p/2),e.merge(r,{d:a});break;case"Diamond":a="M "+c+" "+l+" L "+d+" "+(l+-p/2)+" L "+(d+h/2)+" "+l+" L "+d+" "+(l+p/2)+" L "+c+" "+l+" z",e.merge(r,{d:a});break;case"Rectangle":a="M "+c+" "+(l+-p/2)+" L "+(d+h/2)+" "+(l+-p/2)+" L "+(d+h/2)+" "+(l+p/2)+" L "+c+" "+(l+p/2)+" L "+c+" "+(l+-p/2)+" z",e.merge(r,{d:a});break;case"Triangle":a="M "+c+" "+(l+p/2)+" L "+d+" "+(l+-p/2)+" L "+(d+h/2)+" "+(l+p/2)+" L "+c+" "+(l+p/2)+" z",e.merge(r,{d:a});break;case"InvertedTriangle":a="M "+(d+h/2)+" "+(l-p/2)+" L "+d+" "+(l+p/2)+" L "+(d-h/2)+" "+(l-p/2)+" L "+(d+h/2)+" "+(l-p/2)+" z",e.merge(r,{d:a});break;case"Pentagon":for(var u=void 0,f=void 0,m=0;m<=5;m++)u=h/2*Math.cos(Math.PI/180*(72*m)),f=p/2*Math.sin(Math.PI/180*(72*m)),a=0===m?"M "+(d+u)+" "+(l+f)+" ":a.concat("L "+(d+u)+" "+(l+f)+" ");a=a.concat("Z"),e.merge(r,{d:a});break;case"Image":s="Image",e.merge(r,{href:n,height:p,width:h,x:c,y:y})}return{renderOption:r,functionName:s}}(t,o,i,n,r),p=s["draw"+h.functionName](h.renderOption);return p.setAttribute("aria-label",a),p}var s=function(){var t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i])};return function(e,i){function o(){this.constructor=e}t(e,i),e.prototype=null===i?Object.create(i):(o.prototype=i.prototype,new o)}}(),h=function(){return function(t,e){this.width=t,this.height=e}}(),p=function(){return function(t,e,i,o){this.x=t,this.y=e,this.width=i,this.height=o}}(),d=function(){return function(t,e){this.isRight=e,this.isBottom=t}}(),l=function(){return function(t){this.id=t}}(),c=function(t){function e(e,i,o,r,n,a,s){void 0===a&&(a="");var h=t.call(this,e)||this;return h.transform="",h.baseLine="auto",h.x=i,h.y=o,h.anchor=r,h.text=n,h.transform=a,h.baseLine=s,h}return s(e,t),e}(l),y=function(t){function e(e,i,o,r,n,a,s){var h=t.call(this,e)||this;return h.opacity=n,h.fill=i,h.stroke=r,h["stroke-width"]=o,h["stroke-dasharray"]=a,h.d=s,h}return s(e,t),e}(l),u=function(){return function(t,e){this.x=t,this.y=e}}(),f=function(){var t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i])};return function(e,i){function o(){this.constructor=e}t(e,i),e.prototype=null===i?Object.create(i):(o.prototype=i.prototype,new o)}}(),m=function(t,e,i,o){var r,n=arguments.length,a=n<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(a=(n<3?r(a):n>3?r(e,i,a):r(e,i))||a);return n>3&&a&&Object.defineProperty(e,i,a),a},g=function(t){function i(){return null!==t&&t.apply(this,arguments)||this}return f(i,t),m([e.Property(null)],i.prototype,"size",void 0),m([e.Property("")],i.prototype,"color",void 0),m([e.Property("Segoe UI")],i.prototype,"fontFamily",void 0),m([e.Property("Normal")],i.prototype,"fontWeight",void 0),m([e.Property("Normal")],i.prototype,"fontStyle",void 0),m([e.Property(1)],i.prototype,"opacity",void 0),i}(e.ChildProperty),v=function(t){function i(){return null!==t&&t.apply(this,arguments)||this}return f(i,t),m([e.Property("")],i.prototype,"color",void 0),m([e.Property(1)],i.prototype,"width",void 0),i}(e.ChildProperty),x=function(t){function i(){return null!==t&&t.apply(this,arguments)||this}return f(i,t),m([e.Property(0)],i.prototype,"x",void 0),m([e.Property(0)],i.prototype,"y",void 0),m([e.Property(0)],i.prototype,"width",void 0),m([e.Property(0)],i.prototype,"height",void 0),i}(e.ChildProperty),w=function(t){function i(){return null!==t&&t.apply(this,arguments)||this}return f(i,t),m([e.Property(0)],i.prototype,"x",void 0),m([e.Property(0)],i.prototype,"y",void 0),i}(e.ChildProperty),b=function(t){function s(e,i){return t.call(this,e,i)||this}return f(s,t),s.prototype.preRender=function(){this.initPrivateVariable(),this.removeSVG(),this.createElement()},s.prototype.initPrivateVariable=function(){this.renderer=new e.SvgRenderer(this.element.id),this.themeStyle=i(this.theme),this.formattedText=[],this.padding=5,this.isFirst=!0,this.markerPoint=[]},s.prototype.removeSVG=function(){var t=document.getElementById(this.element.id+"_svg"),i=document.getElementById(this.element.id+"parent_template");t&&t.parentNode&&e.remove(t),i&&i.parentNode&&e.remove(i)},s.prototype.render=function(){if(this.fadeOuted=!1,this.template)this.updateTemplateFn(),this.createTemplate(this.areaBounds,this.location);else{this.renderText(this.isFirst);var t={cancel:!1,name:"tooltipRender",tooltip:this};this.trigger("tooltipRender",t);var e=this.renderTooltipElement(this.areaBounds,this.location);this.drawMarker(e.isBottom,e.isRight,this.markerSize)}this.trigger("loaded",{tooltip:this})},s.prototype.createElement=function(){if(this.textElements=[],!this.template||this.shared){var t=this.renderer.createSvg({id:this.element.id+"_svg"});this.element.appendChild(t);var e=this.renderer.createGroup({id:this.element.id+"_group"});t.appendChild(e);var i=this.renderer.drawPath({id:this.element.id+"_path","stroke-width":this.border.width,fill:this.fill||this.themeStyle.tooltipFill,opacity:this.opacity,stroke:this.border.color});e.appendChild(i)}},s.prototype.drawMarker=function(t,e,i){if(this.shapes.length<=0)return null;for(var o,n=0,s=this.renderer.createGroup({id:this.element.id+"_trackball_group"}),p=r(this.element.id+"_group"),d=2*this.marginX+i/2+(e?this.arrowPadding:0),l=0,c=this.shapes;l<c.length;l++){var f=c[l];o=new y(this.element.id+"_Trackball_"+n,this.palette[n],1,"#cccccc",1,null),s.appendChild(a(new u(d,this.markerPoint[n]-this.padding+(t?this.arrowPadding:0)),f,new h(i,i),"",o,null)),n++}p.appendChild(s)},s.prototype.renderTooltipElement=function(t,i){var n,a=r(this.element.id),s=new u(0,0),h=new u(0,0),l=r(this.element.id+"_svg"),c=r(this.element.id+"_group"),y=r(this.element.id+"_path"),f=!1,m=!1,g=!1,v=0,x=0;if(this.tipRadius=1,""!==this.header&&(this.elementSize.height+=this.marginY),this.content.length>1?(n=this.sharedTooltipLocation(t,this.location.x,this.location.y),f=!0):(n=this.tooltipLocation(t,i,s,h),this.inverted?v=(m=n.x<i.x+this.clipBounds.x)?0:this.arrowPadding:(g=!(f=n.y<i.y+this.clipBounds.y),x=f?0:this.arrowPadding)),""!==this.header){var w=o(this.header,this.textStyle).height+2*this.marginY+(g?this.arrowPadding:0),b="M "+(3*this.marginX+(m||f||g?0:this.arrowPadding))+" "+w+"L "+(n.width+(m||f||g?0:this.arrowPadding)-2*this.marginX)+" "+w,P=this.renderer.drawPath({id:this.element.id+"_header_path","stroke-width":1,fill:null,opacity:.8,stroke:this.themeStyle.tooltipHeaderLine,d:b});c.appendChild(P)}var L=this.border.width/2,S=new p(L+v,L+x,n.width-L,n.height-L);if(c.setAttribute("opacity","1"),!this.enableAnimation||this.shared||this.isFirst?this.updateDiv(a,n.x,n.y):this.animateTooltipDiv(a,n),l.setAttribute("height",(n.height+this.border.width+(this.inverted?0:this.arrowPadding)).toString()),l.setAttribute("width",(n.width+this.border.width+(this.inverted?this.arrowPadding:0)).toString()),l.setAttribute("opacity","1"),y.setAttribute("d",function(t,e,i,o,r,n,a,s,h,p,d){var l="",c=i.x,y=i.y,u=i.x+i.width,f=i.y+i.height;return d=d||0,n?(l=(l=l.concat("M "+c+" "+(y+e)+" Q "+c+" "+y+" "+(c+t)+" "+y+"  L "+(u-t)+" "+y+" Q "+u+" "+y+" "+u+" "+(y+e))).concat(" L "+u+" "+(f-e)+" Q "+u+" "+f+" "+(u-t)+" "+f),0!==r&&(l=(l=l.concat(" L "+(o.x+r/2)+" "+f)).concat(" L "+(h+d)+" "+(f+r-d)),l+=" Q "+h+" "+(f+r)+" "+(h-d)+" "+(f+r-d)),l=o.x-r/2>c?l.concat(" L "+(o.x-r/2)+" "+f+" L "+(c+t)+" "+f+" Q "+c+" "+f+" "+c+" "+(f-e)+" z"):0===r?l.concat(" L "+(c+t)+" "+f+" Q "+c+" "+f+" "+c+" "+(f-e)+" z"):l.concat(" L "+c+" "+(f+e)+" z")):a?(l=(l=l.concat("M "+c+" "+(y+e)+" Q "+c+" "+y+" "+(c+t)+" "+y+" L "+(o.x-r/2)+" "+y)).concat(" L "+(h-d)+" "+(o.y+d)),l=(l=(l+=" Q "+h+" "+o.y+" "+(h+d)+" "+(o.y+d)).concat(" L "+(o.x+r/2)+" "+y+" L "+(u-t)+" "+y+" Q "+u+" "+y+" "+u+" "+(y+e))).concat(" L "+u+" "+(f-e)+" Q "+u+" "+f+" "+(u-t)+" "+f+" L "+(c+t)+" "+f+" Q "+c+" "+f+" "+c+" "+(f-e)+" z")):s?(l=(l=(l=l.concat("M "+c+" "+(y+e)+" Q "+c+" "+y+" "+(c+t)+" "+y)).concat(" L "+(u-t)+" "+y+" Q "+u+" "+y+" "+u+" "+(y+e)+" L "+u+" "+(o.y-r/2))).concat(" L "+(u+r-d)+" "+(p-d)),l=(l=(l+=" Q "+(u+r)+" "+p+" "+(u+r-d)+" "+(p+d)).concat(" L "+u+" "+(o.y+r/2)+" L "+u+" "+(f-e)+" Q "+u+" "+f+" "+(u-t)+" "+f)).concat(" L "+(c+t)+" "+f+" Q "+c+" "+f+" "+c+" "+(f-e)+" z")):(l=(l=l.concat("M "+(c+t)+" "+y+" Q "+c+" "+y+" "+c+" "+(y+e)+" L "+c+" "+(o.y-r/2))).concat(" L "+(c-r+d)+" "+(p-d)),l=(l=(l+=" Q "+(c-r)+" "+p+" "+(c-r+d)+" "+(p+d)).concat(" L "+c+" "+(o.y+r/2)+" L "+c+" "+(f-e)+" Q "+c+" "+f+" "+(c+t)+" "+f)).concat(" L "+(u-t)+" "+f+" Q "+u+" "+f+" "+u+" "+(f-e)+" L "+u+" "+(y+e)+" Q "+u+" "+y+" "+(u-t)+" "+y+" z")),l}(this.rx,this.ry,S,s,this.arrowPadding,f,g,m,h.x,h.y,this.tipRadius)),this.enableShadow){y.setAttribute("filter",e.Browser.isIE?"":"url(#chart_shadow_tooltip)");var _='<filter id="chart_shadow_tooltip" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"/>';_+='<feOffset dx="3" dy="3" result="offsetblur"/><feComponentTransfer><feFuncA type="linear" slope="0.5"/>',_+='</feComponentTransfer><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter>';var T=this.renderer.createDefs();T.setAttribute("id","SVG_tooltip_definition"),c.appendChild(T),T.innerHTML=_}return y.setAttribute("stroke",this.border.color),this.changeText(new u(v,x),g,!m&&!f&&!g,n),new d(g,!m&&!f&&!g)},s.prototype.changeText=function(t,e,i,o){var r=document.getElementById(this.element.id+"_text");e&&r.setAttribute("transform","translate(0,"+this.arrowPadding+")"),i&&r.setAttribute("transform","translate("+this.arrowPadding+" 0)")},s.prototype.findFormattedText=function(){this.formattedText=[],""!==this.header.replace(/<b>/g,"").replace(/<\/b>/g,"").trim()&&(this.formattedText=this.formattedText.concat(this.header)),this.formattedText=this.formattedText.concat(this.content)},s.prototype.renderText=function(t){var i,a,s,p,d=0,l=0,y=0,u=e.extend({},this.textStyle,null,!0).properties,f=r(this.element.id+"_group"),m="";this.findFormattedText();var g=this.header.replace(/<b>/g,"").replace(/<\/b>/g,"").trim(),v=""!==g?this.marginY:0,x=!0,w=!0;this.markerPoint=[];var b=this.shapes.length>0?10:0,P=this.shapes.length>0?5:0,L=22/parseFloat("13px")*parseFloat(u.size);t||(n(this.element.id+"_text"),n(this.element.id+"_header_path"),n(this.element.id+"_trackball_group"),n("SVG_tooltip_definition"));for(var S=new c(this.element.id+"_text",2*this.marginX,2*this.marginY+2*this.padding+(2===this.marginY?3:0),"start",""),_=function(t,i,o,r){var n,a,s={},h=new e.SvgRenderer("");return s={id:t.id,x:t.x,y:t.y,fill:o,"font-size":i.size,"font-style":i.fontStyle,"font-family":i.fontFamily,"font-weight":i.fontWeight,"text-anchor":t.anchor,transform:t.transform,opacity:i.opacity,"dominant-baseline":t.baseLine},a="string"==typeof t.text?t.text:t.text[0],n=h.createText(s,a),r.appendChild(n),n}(S,u,null,f),T=0,C=this.formattedText.length;T<C;T++){var z=this.formattedText[T].replace(/<(b|strong)>/g,"<b>").replace(/<\/(b|strong)>/g,"</b>").split(/<br.*?>/g);o(this.formattedText[T],u),0===T&&""!==g||this.markerPoint.push((""!==g?this.marginY:0)+S.y+d);for(var A=0,M=z.length;A<M;A++){y=0,w=!0,d+=L;for(var k=0,B=(i=z[A].replace(/<b>/g,"<br><b>").replace(/<\/b>/g,"</b><br>").split("<br>")).length;k<B;k++)""!==(s=i[k]).replace(/<b>/g,"").replace(/<\/b>/g,"").trim()&&(y+=4,w&&!x?(p={x:2*this.marginX+(b+P),dy:L+(w?v:0),fill:""},v=null):p=x&&w?{x:""===g?2*this.marginX+(b+P):2*this.marginX}:{},w=!1,a=this.renderer.createTSpan(p,""),_.appendChild(a),s.indexOf("<b>")>-1?(m="font-weight:bold",u.fontWeight="bold",a.setAttribute("fill",this.textStyle.color||this.themeStyle.tooltipBoldLabel)):(m="",u.fontWeight="Normal",a.setAttribute("fill",this.textStyle.color||this.themeStyle.tooltipLightLabel)),a.textContent=s=s.replace(/<[a-zA-Z\/](.|\n)*?>/g,""),y+=o(s,u).width,""!==m&&a.setAttribute("style",m),x=!1);y-=4,l=Math.max(l,y)}}this.elementSize=new h(l+(l>0?2*this.marginX:0),d),this.elementSize.width+=b+P;var F=_.childNodes[0];if(""!==g&&F){u.fontWeight="bold";var R=(this.elementSize.width+2*this.padding)/2-o(g,u).width/2;F.setAttribute("x",R.toString())}},s.prototype.createTemplate=function(t,i){var o={cancel:!1,name:"tooltipRender",tooltip:this};this.trigger("tooltipRender",o);var n=document.getElementById(this.element.id),a=n.firstElementChild;if(a&&a.remove(),o.cancel)r(this.element.id+"_tooltip").remove();else{for(var s=this.templateFn(this.data),p=e.createElement("div",{id:this.element.id+"parent_template"});s&&s.length>0;)p.appendChild(s[0]);n.appendChild(p);var d=this.element.getBoundingClientRect();this.padding=0,this.elementSize=new h(d.width,d.height);var l=this.tooltipLocation(t,i,new u(0,0),new u(0,0));!this.enableAnimation||this.shared||this.isFirst?this.updateDiv(this.element,l.x,l.y):this.animateTooltipDiv(this.element,l)}},s.prototype.sharedTooltipLocation=function(t,e,i){var o=this.elementSize.width+2*this.marginX,r=this.elementSize.height+2*this.marginY,n=new p(e+2*this.padding,i-r-this.padding,o,r);return n.y<t.y&&(n.y+=n.height+2*this.padding),n.x+n.width>t.x+t.width&&(n.x-=n.width+4*this.padding),n},s.prototype.tooltipLocation=function(t,e,i,o){var r=new u(e.x,e.y),n=this.elementSize.width+2*this.marginX,a=this.elementSize.height+2*this.marginY,s=this.offset,h=this.clipBounds.x,d=this.clipBounds.y,l=t.x,c=t.y;return this.inverted?(r=new u(r.x+h+s,r.y+d-this.elementSize.height/2-this.padding),i.y=o.y=a/2,(r.x+n+this.arrowPadding>l+t.width||this.isNegative)&&(r.x=(e.x>t.width?t.width:e.x)+h-s-(n+this.arrowPadding)),r.x<l&&(r.x=(e.x<0?0:e.x)+h+s),r.y<=c&&(i.y-=c-r.y,o.y-=c-r.y,r.y=c),r.y+a>=c+t.height&&(i.y+=r.y+a-(c+t.height),o.y+=r.y+a-(c+t.height),r.y-=r.y+a-(c+t.height)),i.y+this.arrowPadding/2>a-this.ry&&(i.y=a-this.ry-this.arrowPadding/2,o.y=a,this.tipRadius=0),i.y-this.arrowPadding/2<this.ry&&(i.y=this.ry+this.arrowPadding/2,o.y=0,this.tipRadius=0)):(r=new u(r.x+h-this.elementSize.width/2-this.padding,r.y+d-this.elementSize.height-2*this.padding-this.arrowPadding-s),i.x=o.x=n/2,(r.y<c||this.isNegative)&&(r.y=(e.y<0?0:e.y)+d+s),r.y+a+this.arrowPadding>c+t.height&&(r.y=(e.y>t.height?t.height:e.y)+d-this.elementSize.height-2*this.padding-this.arrowPadding-s),o.x=n/2,r.x<l&&(i.x-=l-r.x,o.x-=l-r.x,r.x=l),r.x+n>l+t.width&&(i.x+=r.x+n-(l+t.width),o.x+=r.x+n-(l+t.width),r.x-=r.x+n-(l+t.width)),i.x+this.arrowPadding/2>n-this.rx&&(i.x=n-this.rx-this.arrowPadding/2,o.x=n,this.tipRadius=0),i.x-this.arrowPadding/2<this.rx&&(i.x=this.rx+this.arrowPadding/2,o.x=0,this.tipRadius=0)),new p(r.x,r.y,n,a)},s.prototype.animateTooltipDiv=function(t,i){var o,r=this,n=parseFloat(t.style.left),a=parseFloat(t.style.top);new e.Animation({}).animate(t,{duration:300,progress:function(e){o=e.timeStamp/e.duration,t.style.animation=null,t.style.left=n+o*(i.x-n)+"px",t.style.top=a+o*(i.y-a)+"px"},end:function(e){r.updateDiv(t,i.x,i.y),r.trigger("animationComplete",{tooltip:r})}})},s.prototype.updateDiv=function(t,e,i){t.style.left=e+"px",t.style.top=i+"px"},s.prototype.updateTemplateFn=function(){if(this.template)try{document.querySelectorAll(this.template).length&&(this.templateFn=e.compile(document.querySelector(this.template).innerHTML.trim()))}catch(t){this.templateFn=e.compile(this.template)}},s.prototype.fadeOut=function(){var t=this,i=r(this.element.id);if(i){var o=i.firstChild,n=parseFloat(o.getAttribute("opacity"))||1;new e.Animation({}).animate(o,{duration:200,progress:function(e){t.progressAnimation(o,n,e.timeStamp/e.duration)},end:function(e){t.fadeOuted=!0,t.endAnimation(o)}})}},s.prototype.progressAnimation=function(t,e,i){t.style.animation="",t.setAttribute("opacity",(e-i).toString())},s.prototype.endAnimation=function(t){t.setAttribute("opacity","0"),this.template&&!this.shared&&(t.style.display="none"),this.trigger("animationComplete",{tooltip:this})},s.prototype.getPersistData=function(){return this.addOnPersist([])},s.prototype.getModuleName=function(){return"tooltip"},s.prototype.destroy=function(){t.prototype.destroy.call(this),this.element.classList.remove("e-tooltip")},s.prototype.onPropertyChanged=function(t,e){this.isFirst=!1,this.render()},m([e.Property(!1)],s.prototype,"enable",void 0),m([e.Property(!1)],s.prototype,"shared",void 0),m([e.Property(!0)],s.prototype,"enableShadow",void 0),m([e.Property(null)],s.prototype,"fill",void 0),m([e.Property("")],s.prototype,"header",void 0),m([e.Property(.75)],s.prototype,"opacity",void 0),m([e.Complex({size:"13px",fontWeight:"Normal",color:null,fontStyle:"Normal",fontFamily:"Segoe UI"},g)],s.prototype,"textStyle",void 0),m([e.Property(null)],s.prototype,"template",void 0),m([e.Property(!0)],s.prototype,"enableAnimation",void 0),m([e.Property(!1)],s.prototype,"inverted",void 0),m([e.Property(!1)],s.prototype,"isNegative",void 0),m([e.Complex({color:"#cccccc",width:.5},v)],s.prototype,"border",void 0),m([e.Property([])],s.prototype,"content",void 0),m([e.Property(10)],s.prototype,"markerSize",void 0),m([e.Complex({x:0,y:0},w)],s.prototype,"clipBounds",void 0),m([e.Property([])],s.prototype,"palette",void 0),m([e.Property([])],s.prototype,"shapes",void 0),m([e.Complex({x:0,y:0},w)],s.prototype,"location",void 0),m([e.Property(0)],s.prototype,"offset",void 0),m([e.Property(2)],s.prototype,"rx",void 0),m([e.Property(2)],s.prototype,"ry",void 0),m([e.Property(5)],s.prototype,"marginX",void 0),m([e.Property(5)],s.prototype,"marginY",void 0),m([e.Property(12)],s.prototype,"arrowPadding",void 0),m([e.Property(null)],s.prototype,"data",void 0),m([e.Property("Material")],s.prototype,"theme",void 0),m([e.Complex({x:0,y:0,width:0,height:0},x)],s.prototype,"areaBounds",void 0),m([e.Event()],s.prototype,"tooltipRender",void 0),m([e.Event()],s.prototype,"loaded",void 0),m([e.Event()],s.prototype,"animationComplete",void 0),s=m([e.NotifyPropertyChanges],s)}(e.Component);t.TextStyle=g,t.TooltipBorder=v,t.AreaBounds=x,t.ToolLocation=w,t.Tooltip=b,t.getTooltipThemeColor=i,Object.defineProperty(t,"__esModule",{value:!0})});
+/*!
+*  filename: ej2-svg-base.umd.min.js
+*  version : 16.2.46
+*  Copyright Syncfusion Inc. 2001 - 2018. All rights reserved.
+*  Use of this code is subject to the terms of our license.
+*  A copy of the current license can be obtained at any time by e-mailing
+*  [e-mail]. Any infringement will be prosecuted under
+*  applicable laws. 
+*/
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@syncfusion/ej2-base")):"function"==typeof define&&define.amd?define(["exports","@syncfusion/ej2-base"],e):e(t.ej={},t.ej2Base)}(this,function(t,e){"use strict";function i(t){var e;switch(t){case"Highcontrast":e={tooltipFill:"#ffffff",tooltipBoldLabel:"#000000",tooltipLightLabel:"#000000",tooltipHeaderLine:"#969696"};break;default:e={tooltipFill:"rgba(0, 8, 22, 0.75)",tooltipBoldLabel:"#ffffff",tooltipLightLabel:"#dbdbdb",tooltipHeaderLine:"#ffffff"}}return e}function o(t,i){var o=document.getElementById("chartmeasuretext");return null===o&&(o=e.createElement("text",{id:"chartmeasuretext"}),document.body.appendChild(o)),o.innerHTML=t,o.style.position="absolute",o.style.fontSize=i.size,o.style.fontWeight=i.fontWeight,o.style.fontStyle=i.fontStyle,o.style.fontFamily=i.fontFamily,o.style.visibility="hidden",o.style.top="-100",o.style.left="0",o.style.whiteSpace="nowrap",o.style.lineHeight="normal",new h(o.clientWidth,o.clientHeight)}function r(t){return document.getElementById(t)}function n(t){var i=r(t);i&&e.remove(i)}function a(t,i,o,r,n,a){var s=new e.SvgRenderer(""),h=function(t,i,o,r,n){var a,s="Path",h=i.width,p=i.height,d=t.x,l=t.y,c=t.x+-h/2,y=t.y+-p/2;switch(o){case"Circle":case"Bubble":s="Ellipse",e.merge(r,{rx:h/2,ry:p/2,cx:d,cy:l});break;case"Cross":a="M "+c+" "+l+" L "+(d+h/2)+" "+l+" M "+d+" "+(l+p/2)+" L "+d+" "+(l+-p/2),e.merge(r,{d:a});break;case"HorizontalLine":a="M "+c+" "+l+" L "+(d+h/2)+" "+l,e.merge(r,{d:a});break;case"VerticalLine":a="M "+d+" "+(l+p/2)+" L "+d+" "+(l+-p/2),e.merge(r,{d:a});break;case"Diamond":a="M "+c+" "+l+" L "+d+" "+(l+-p/2)+" L "+(d+h/2)+" "+l+" L "+d+" "+(l+p/2)+" L "+c+" "+l+" z",e.merge(r,{d:a});break;case"Rectangle":a="M "+c+" "+(l+-p/2)+" L "+(d+h/2)+" "+(l+-p/2)+" L "+(d+h/2)+" "+(l+p/2)+" L "+c+" "+(l+p/2)+" L "+c+" "+(l+-p/2)+" z",e.merge(r,{d:a});break;case"Triangle":a="M "+c+" "+(l+p/2)+" L "+d+" "+(l+-p/2)+" L "+(d+h/2)+" "+(l+p/2)+" L "+c+" "+(l+p/2)+" z",e.merge(r,{d:a});break;case"InvertedTriangle":a="M "+(d+h/2)+" "+(l-p/2)+" L "+d+" "+(l+p/2)+" L "+(d-h/2)+" "+(l-p/2)+" L "+(d+h/2)+" "+(l-p/2)+" z",e.merge(r,{d:a});break;case"Pentagon":for(var u=void 0,f=void 0,m=0;m<=5;m++)u=h/2*Math.cos(Math.PI/180*(72*m)),f=p/2*Math.sin(Math.PI/180*(72*m)),a=0===m?"M "+(d+u)+" "+(l+f)+" ":a.concat("L "+(d+u)+" "+(l+f)+" ");a=a.concat("Z"),e.merge(r,{d:a});break;case"Image":s="Image",e.merge(r,{href:n,height:p,width:h,x:c,y:y})}return{renderOption:r,functionName:s}}(t,o,i,n,r),p=s["draw"+h.functionName](h.renderOption);return p.setAttribute("aria-label",a),p}var s=function(){var t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i])};return function(e,i){function o(){this.constructor=e}t(e,i),e.prototype=null===i?Object.create(i):(o.prototype=i.prototype,new o)}}(),h=function(){return function(t,e){this.width=t,this.height=e}}(),p=function(){return function(t,e,i,o){this.x=t,this.y=e,this.width=i,this.height=o}}(),d=function(){return function(t,e){this.isRight=e,this.isBottom=t}}(),l=function(){return function(t){this.id=t}}(),c=function(t){function e(e,i,o,r,n,a,s){void 0===a&&(a="");var h=t.call(this,e)||this;return h.transform="",h.baseLine="auto",h.x=i,h.y=o,h.anchor=r,h.text=n,h.transform=a,h.baseLine=s,h}return s(e,t),e}(l),y=function(t){function e(e,i,o,r,n,a,s){var h=t.call(this,e)||this;return h.opacity=n,h.fill=i,h.stroke=r,h["stroke-width"]=o,h["stroke-dasharray"]=a,h.d=s,h}return s(e,t),e}(l),u=function(){return function(t,e){this.x=t,this.y=e}}(),f=function(){var t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i])};return function(e,i){function o(){this.constructor=e}t(e,i),e.prototype=null===i?Object.create(i):(o.prototype=i.prototype,new o)}}(),m=function(t,e,i,o){var r,n=arguments.length,a=n<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(a=(n<3?r(a):n>3?r(e,i,a):r(e,i))||a);return n>3&&a&&Object.defineProperty(e,i,a),a},g=function(t){function i(){return null!==t&&t.apply(this,arguments)||this}return f(i,t),m([e.Property(null)],i.prototype,"size",void 0),m([e.Property("")],i.prototype,"color",void 0),m([e.Property("Segoe UI")],i.prototype,"fontFamily",void 0),m([e.Property("Normal")],i.prototype,"fontWeight",void 0),m([e.Property("Normal")],i.prototype,"fontStyle",void 0),m([e.Property(1)],i.prototype,"opacity",void 0),i}(e.ChildProperty),v=function(t){function i(){return null!==t&&t.apply(this,arguments)||this}return f(i,t),m([e.Property("")],i.prototype,"color",void 0),m([e.Property(1)],i.prototype,"width",void 0),i}(e.ChildProperty),x=function(t){function i(){return null!==t&&t.apply(this,arguments)||this}return f(i,t),m([e.Property(0)],i.prototype,"x",void 0),m([e.Property(0)],i.prototype,"y",void 0),m([e.Property(0)],i.prototype,"width",void 0),m([e.Property(0)],i.prototype,"height",void 0),i}(e.ChildProperty),w=function(t){function i(){return null!==t&&t.apply(this,arguments)||this}return f(i,t),m([e.Property(0)],i.prototype,"x",void 0),m([e.Property(0)],i.prototype,"y",void 0),i}(e.ChildProperty),b=function(t){function s(e,i){return t.call(this,e,i)||this}return f(s,t),s.prototype.preRender=function(){this.initPrivateVariable(),this.removeSVG(),this.createTooltipElement()},s.prototype.initPrivateVariable=function(){this.renderer=new e.SvgRenderer(this.element.id),this.themeStyle=i(this.theme),this.formattedText=[],this.padding=5,this.isFirst=!0,this.markerPoint=[]},s.prototype.removeSVG=function(){var t=document.getElementById(this.element.id+"_svg"),i=document.getElementById(this.element.id+"parent_template");t&&t.parentNode&&e.remove(t),i&&i.parentNode&&e.remove(i)},s.prototype.render=function(){if(this.fadeOuted=!1,this.template)this.updateTemplateFn(),this.createTemplate(this.areaBounds,this.location);else{this.renderText(this.isFirst);var t={cancel:!1,name:"tooltipRender",tooltip:this};this.trigger("tooltipRender",t);var e=this.renderTooltipElement(this.areaBounds,this.location);this.drawMarker(e.isBottom,e.isRight,this.markerSize)}this.trigger("loaded",{tooltip:this})},s.prototype.createTooltipElement=function(){if(this.textElements=[],!this.template||this.shared){var t=this.renderer.createSvg({id:this.element.id+"_svg"});this.element.appendChild(t);var e=this.renderer.createGroup({id:this.element.id+"_group"});t.appendChild(e);var i=this.renderer.drawPath({id:this.element.id+"_path","stroke-width":this.border.width,fill:this.fill||this.themeStyle.tooltipFill,opacity:this.opacity,stroke:this.border.color});e.appendChild(i)}},s.prototype.drawMarker=function(t,e,i){if(this.shapes.length<=0)return null;for(var o,n=0,s=this.renderer.createGroup({id:this.element.id+"_trackball_group"}),p=r(this.element.id+"_group"),d=2*this.marginX+i/2+(e?this.arrowPadding:0),l=0,c=this.shapes;l<c.length;l++){var f=c[l];o=new y(this.element.id+"_Trackball_"+n,this.palette[n],1,"#cccccc",1,null),s.appendChild(a(new u(d,this.markerPoint[n]-this.padding+(t?this.arrowPadding:0)),f,new h(i,i),"",o,null)),n++}p.appendChild(s)},s.prototype.renderTooltipElement=function(t,i){var n,a=r(this.element.id),s=new u(0,0),h=new u(0,0),l=r(this.element.id+"_svg"),c=r(this.element.id+"_group"),y=r(this.element.id+"_path"),f=!1,m=!1,g=!1,v=0,x=0;if(this.tipRadius=1,""!==this.header&&(this.elementSize.height+=this.marginY),this.content.length>1?(n=this.sharedTooltipLocation(t,this.location.x,this.location.y),f=!0):(n=this.tooltipLocation(t,i,s,h),this.inverted?v=(m=n.x<i.x+this.clipBounds.x)?0:this.arrowPadding:(g=!(f=n.y<i.y+this.clipBounds.y),x=f?0:this.arrowPadding)),""!==this.header){var w=o(this.header,this.textStyle).height+2*this.marginY+(g?this.arrowPadding:0),b="M "+(3*this.marginX+(m||f||g?0:this.arrowPadding))+" "+w+"L "+(n.width+(m||f||g?0:this.arrowPadding)-2*this.marginX)+" "+w,P=this.renderer.drawPath({id:this.element.id+"_header_path","stroke-width":1,fill:null,opacity:.8,stroke:this.themeStyle.tooltipHeaderLine,d:b});c.appendChild(P)}var L=this.border.width/2,S=new p(L+v,L+x,n.width-L,n.height-L);if(c.setAttribute("opacity","1"),!this.enableAnimation||this.shared||this.isFirst?this.updateDiv(a,n.x,n.y):this.animateTooltipDiv(a,n),l.setAttribute("height",(n.height+this.border.width+(this.inverted?0:this.arrowPadding)).toString()),l.setAttribute("width",(n.width+this.border.width+(this.inverted?this.arrowPadding:0)).toString()),l.setAttribute("opacity","1"),y.setAttribute("d",function(t,e,i,o,r,n,a,s,h,p,d){var l="",c=i.x,y=i.y,u=i.x+i.width,f=i.y+i.height;return d=d||0,n?(l=(l=l.concat("M "+c+" "+(y+e)+" Q "+c+" "+y+" "+(c+t)+" "+y+"  L "+(u-t)+" "+y+" Q "+u+" "+y+" "+u+" "+(y+e))).concat(" L "+u+" "+(f-e)+" Q "+u+" "+f+" "+(u-t)+" "+f),0!==r&&(l=(l=l.concat(" L "+(o.x+r/2)+" "+f)).concat(" L "+(h+d)+" "+(f+r-d)),l+=" Q "+h+" "+(f+r)+" "+(h-d)+" "+(f+r-d)),l=o.x-r/2>c?l.concat(" L "+(o.x-r/2)+" "+f+" L "+(c+t)+" "+f+" Q "+c+" "+f+" "+c+" "+(f-e)+" z"):0===r?l.concat(" L "+(c+t)+" "+f+" Q "+c+" "+f+" "+c+" "+(f-e)+" z"):l.concat(" L "+c+" "+(f+e)+" z")):a?(l=(l=l.concat("M "+c+" "+(y+e)+" Q "+c+" "+y+" "+(c+t)+" "+y+" L "+(o.x-r/2)+" "+y)).concat(" L "+(h-d)+" "+(o.y+d)),l=(l=(l+=" Q "+h+" "+o.y+" "+(h+d)+" "+(o.y+d)).concat(" L "+(o.x+r/2)+" "+y+" L "+(u-t)+" "+y+" Q "+u+" "+y+" "+u+" "+(y+e))).concat(" L "+u+" "+(f-e)+" Q "+u+" "+f+" "+(u-t)+" "+f+" L "+(c+t)+" "+f+" Q "+c+" "+f+" "+c+" "+(f-e)+" z")):s?(l=(l=(l=l.concat("M "+c+" "+(y+e)+" Q "+c+" "+y+" "+(c+t)+" "+y)).concat(" L "+(u-t)+" "+y+" Q "+u+" "+y+" "+u+" "+(y+e)+" L "+u+" "+(o.y-r/2))).concat(" L "+(u+r-d)+" "+(p-d)),l=(l=(l+=" Q "+(u+r)+" "+p+" "+(u+r-d)+" "+(p+d)).concat(" L "+u+" "+(o.y+r/2)+" L "+u+" "+(f-e)+" Q "+u+" "+f+" "+(u-t)+" "+f)).concat(" L "+(c+t)+" "+f+" Q "+c+" "+f+" "+c+" "+(f-e)+" z")):(l=(l=l.concat("M "+(c+t)+" "+y+" Q "+c+" "+y+" "+c+" "+(y+e)+" L "+c+" "+(o.y-r/2))).concat(" L "+(c-r+d)+" "+(p-d)),l=(l=(l+=" Q "+(c-r)+" "+p+" "+(c-r+d)+" "+(p+d)).concat(" L "+c+" "+(o.y+r/2)+" L "+c+" "+(f-e)+" Q "+c+" "+f+" "+(c+t)+" "+f)).concat(" L "+(u-t)+" "+f+" Q "+u+" "+f+" "+u+" "+(f-e)+" L "+u+" "+(y+e)+" Q "+u+" "+y+" "+(u-t)+" "+y+" z")),l}(this.rx,this.ry,S,s,this.arrowPadding,f,g,m,h.x,h.y,this.tipRadius)),this.enableShadow){y.setAttribute("filter",e.Browser.isIE?"":"url(#chart_shadow_tooltip)");var _='<filter id="chart_shadow_tooltip" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"/>';_+='<feOffset dx="3" dy="3" result="offsetblur"/><feComponentTransfer><feFuncA type="linear" slope="0.5"/>',_+='</feComponentTransfer><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter>';var T=this.renderer.createDefs();T.setAttribute("id","SVG_tooltip_definition"),c.appendChild(T),T.innerHTML=_}return y.setAttribute("stroke",this.border.color),this.changeText(new u(v,x),g,!m&&!f&&!g,n),new d(g,!m&&!f&&!g)},s.prototype.changeText=function(t,e,i,o){var r=document.getElementById(this.element.id+"_text");e&&r.setAttribute("transform","translate(0,"+this.arrowPadding+")"),i&&r.setAttribute("transform","translate("+this.arrowPadding+" 0)")},s.prototype.findFormattedText=function(){this.formattedText=[],""!==this.header.replace(/<b>/g,"").replace(/<\/b>/g,"").trim()&&(this.formattedText=this.formattedText.concat(this.header)),this.formattedText=this.formattedText.concat(this.content)},s.prototype.renderText=function(t){var i,a,s,p,d=0,l=0,y=0,u=e.extend({},this.textStyle,null,!0).properties,f=r(this.element.id+"_group"),m="";this.findFormattedText();var g=this.header.replace(/<b>/g,"").replace(/<\/b>/g,"").trim(),v=""!==g?this.marginY:0,x=!0,w=!0;this.markerPoint=[];var b=this.shapes.length>0?10:0,P=this.shapes.length>0?5:0,L=22/parseFloat("13px")*parseFloat(u.size);t||(n(this.element.id+"_text"),n(this.element.id+"_header_path"),n(this.element.id+"_trackball_group"),n("SVG_tooltip_definition"));for(var S=new c(this.element.id+"_text",2*this.marginX,2*this.marginY+2*this.padding+(2===this.marginY?3:0),"start",""),_=function(t,i,o,r){var n,a,s={},h=new e.SvgRenderer("");return s={id:t.id,x:t.x,y:t.y,fill:o,"font-size":i.size,"font-style":i.fontStyle,"font-family":i.fontFamily,"font-weight":i.fontWeight,"text-anchor":t.anchor,transform:t.transform,opacity:i.opacity,"dominant-baseline":t.baseLine},a="string"==typeof t.text?t.text:t.text[0],n=h.createText(s,a),r.appendChild(n),n}(S,u,null,f),T=0,C=this.formattedText.length;T<C;T++){var z=this.formattedText[T].replace(/<(b|strong)>/g,"<b>").replace(/<\/(b|strong)>/g,"</b>").split(/<br.*?>/g);o(this.formattedText[T],u),0===T&&""!==g||this.markerPoint.push((""!==g?this.marginY:0)+S.y+d);for(var A=0,M=z.length;A<M;A++){y=0,w=!0,d+=L;for(var k=0,B=(i=z[A].replace(/<b>/g,"<br><b>").replace(/<\/b>/g,"</b><br>").split("<br>")).length;k<B;k++)""!==(s=i[k]).replace(/<b>/g,"").replace(/<\/b>/g,"").trim()&&(y+=4,w&&!x?(p={x:2*this.marginX+(b+P),dy:L+(w?v:0),fill:""},v=null):p=x&&w?{x:""===g?2*this.marginX+(b+P):2*this.marginX}:{},w=!1,a=this.renderer.createTSpan(p,""),_.appendChild(a),s.indexOf("<b>")>-1?(m="font-weight:bold",u.fontWeight="bold",a.setAttribute("fill",this.textStyle.color||this.themeStyle.tooltipBoldLabel)):(m="",u.fontWeight="Normal",a.setAttribute("fill",this.textStyle.color||this.themeStyle.tooltipLightLabel)),a.textContent=s=s.replace(/<[a-zA-Z\/](.|\n)*?>/g,""),y+=o(s,u).width,""!==m&&a.setAttribute("style",m),x=!1);y-=4,l=Math.max(l,y)}}this.elementSize=new h(l+(l>0?2*this.marginX:0),d),this.elementSize.width+=b+P;var F=_.childNodes[0];if(""!==g&&F){u.fontWeight="bold";var R=(this.elementSize.width+2*this.padding)/2-o(g,u).width/2;F.setAttribute("x",R.toString())}},s.prototype.createTemplate=function(t,e){var i={cancel:!1,name:"tooltipRender",tooltip:this};this.trigger("tooltipRender",i);var o=document.getElementById(this.element.id),n=o.firstElementChild;if(n&&n.remove(),i.cancel)r(this.element.id+"_tooltip").remove();else{for(var a=this.templateFn(this.data),s=this.createElement("div",{id:this.element.id+"parent_template"});a&&a.length>0;)s.appendChild(a[0]);o.appendChild(s);var p=this.element.getBoundingClientRect();this.padding=0,this.elementSize=new h(p.width,p.height);var d=this.tooltipLocation(t,e,new u(0,0),new u(0,0));!this.enableAnimation||this.shared||this.isFirst?this.updateDiv(this.element,d.x,d.y):this.animateTooltipDiv(this.element,d)}},s.prototype.sharedTooltipLocation=function(t,e,i){var o=this.elementSize.width+2*this.marginX,r=this.elementSize.height+2*this.marginY,n=new p(e+2*this.padding,i-r-this.padding,o,r);return n.y<t.y&&(n.y+=n.height+2*this.padding),n.x+n.width>t.x+t.width&&(n.x-=n.width+4*this.padding),n},s.prototype.tooltipLocation=function(t,e,i,o){var r=new u(e.x,e.y),n=this.elementSize.width+2*this.marginX,a=this.elementSize.height+2*this.marginY,s=this.offset,h=this.clipBounds.x,d=this.clipBounds.y,l=t.x,c=t.y;return this.inverted?(r=new u(r.x+h+s,r.y+d-this.elementSize.height/2-this.padding),i.y=o.y=a/2,(r.x+n+this.arrowPadding>l+t.width||this.isNegative)&&(r.x=(e.x>t.width?t.width:e.x)+h-s-(n+this.arrowPadding)),r.x<l&&(r.x=(e.x<0?0:e.x)+h+s),r.y<=c&&(i.y-=c-r.y,o.y-=c-r.y,r.y=c),r.y+a>=c+t.height&&(i.y+=r.y+a-(c+t.height),o.y+=r.y+a-(c+t.height),r.y-=r.y+a-(c+t.height)),i.y+this.arrowPadding/2>a-this.ry&&(i.y=a-this.ry-this.arrowPadding/2,o.y=a,this.tipRadius=0),i.y-this.arrowPadding/2<this.ry&&(i.y=this.ry+this.arrowPadding/2,o.y=0,this.tipRadius=0)):(r=new u(r.x+h-this.elementSize.width/2-this.padding,r.y+d-this.elementSize.height-2*this.padding-this.arrowPadding-s),i.x=o.x=n/2,(r.y<c||this.isNegative)&&(r.y=(e.y<0?0:e.y)+d+s),r.y+a+this.arrowPadding>c+t.height&&(r.y=(e.y>t.height?t.height:e.y)+d-this.elementSize.height-2*this.padding-this.arrowPadding-s),o.x=n/2,r.x<l&&(i.x-=l-r.x,o.x-=l-r.x,r.x=l),r.x+n>l+t.width&&(i.x+=r.x+n-(l+t.width),o.x+=r.x+n-(l+t.width),r.x-=r.x+n-(l+t.width)),i.x+this.arrowPadding/2>n-this.rx&&(i.x=n-this.rx-this.arrowPadding/2,o.x=n,this.tipRadius=0),i.x-this.arrowPadding/2<this.rx&&(i.x=this.rx+this.arrowPadding/2,o.x=0,this.tipRadius=0)),new p(r.x,r.y,n,a)},s.prototype.animateTooltipDiv=function(t,i){var o,r=this,n=parseFloat(t.style.left),a=parseFloat(t.style.top);new e.Animation({}).animate(t,{duration:300,progress:function(e){o=e.timeStamp/e.duration,t.style.animation=null,t.style.left=n+o*(i.x-n)+"px",t.style.top=a+o*(i.y-a)+"px"},end:function(e){r.updateDiv(t,i.x,i.y),r.trigger("animationComplete",{tooltip:r})}})},s.prototype.updateDiv=function(t,e,i){t.style.left=e+"px",t.style.top=i+"px"},s.prototype.updateTemplateFn=function(){if(this.template)try{document.querySelectorAll(this.template).length&&(this.templateFn=e.compile(document.querySelector(this.template).innerHTML.trim()))}catch(t){this.templateFn=e.compile(this.template)}},s.prototype.fadeOut=function(){var t=this,i=r(this.element.id);if(i){var o=i.firstChild,n=parseFloat(o.getAttribute("opacity"))||1;new e.Animation({}).animate(o,{duration:200,progress:function(e){t.progressAnimation(o,n,e.timeStamp/e.duration)},end:function(e){t.fadeOuted=!0,t.endAnimation(o)}})}},s.prototype.progressAnimation=function(t,e,i){t.style.animation="",t.setAttribute("opacity",(e-i).toString())},s.prototype.endAnimation=function(t){t.setAttribute("opacity","0"),this.template&&!this.shared&&(t.style.display="none"),this.trigger("animationComplete",{tooltip:this})},s.prototype.getPersistData=function(){return this.addOnPersist([])},s.prototype.getModuleName=function(){return"tooltip"},s.prototype.destroy=function(){t.prototype.destroy.call(this),this.element.classList.remove("e-tooltip")},s.prototype.onPropertyChanged=function(t,e){this.isFirst=!1,this.render()},m([e.Property(!1)],s.prototype,"enable",void 0),m([e.Property(!1)],s.prototype,"shared",void 0),m([e.Property(!0)],s.prototype,"enableShadow",void 0),m([e.Property(null)],s.prototype,"fill",void 0),m([e.Property("")],s.prototype,"header",void 0),m([e.Property(.75)],s.prototype,"opacity",void 0),m([e.Complex({size:"13px",fontWeight:"Normal",color:null,fontStyle:"Normal",fontFamily:"Segoe UI"},g)],s.prototype,"textStyle",void 0),m([e.Property(null)],s.prototype,"template",void 0),m([e.Property(!0)],s.prototype,"enableAnimation",void 0),m([e.Property(!1)],s.prototype,"inverted",void 0),m([e.Property(!1)],s.prototype,"isNegative",void 0),m([e.Complex({color:"#cccccc",width:.5},v)],s.prototype,"border",void 0),m([e.Property([])],s.prototype,"content",void 0),m([e.Property(10)],s.prototype,"markerSize",void 0),m([e.Complex({x:0,y:0},w)],s.prototype,"clipBounds",void 0),m([e.Property([])],s.prototype,"palette",void 0),m([e.Property([])],s.prototype,"shapes",void 0),m([e.Complex({x:0,y:0},w)],s.prototype,"location",void 0),m([e.Property(0)],s.prototype,"offset",void 0),m([e.Property(2)],s.prototype,"rx",void 0),m([e.Property(2)],s.prototype,"ry",void 0),m([e.Property(5)],s.prototype,"marginX",void 0),m([e.Property(5)],s.prototype,"marginY",void 0),m([e.Property(12)],s.prototype,"arrowPadding",void 0),m([e.Property(null)],s.prototype,"data",void 0),m([e.Property("Material")],s.prototype,"theme",void 0),m([e.Complex({x:0,y:0,width:0,height:0},x)],s.prototype,"areaBounds",void 0),m([e.Event()],s.prototype,"tooltipRender",void 0),m([e.Event()],s.prototype,"loaded",void 0),m([e.Event()],s.prototype,"animationComplete",void 0),s=m([e.NotifyPropertyChanges],s)}(e.Component);t.TextStyle=g,t.TooltipBorder=v,t.AreaBounds=x,t.ToolLocation=w,t.Tooltip=b,t.getTooltipThemeColor=i,Object.defineProperty(t,"__esModule",{value:!0})});
 //# sourceMappingURL=ej2-svg-base.umd.min.js.map

dist/es6/ej2-svg-base.es2015.js

@@ -417,3 +417,3 @@ import { Animation, Browser, ChildProperty, Complex, Component, Event, NotifyPropertyChanges, Property, SvgRenderer, compile, createElement, extend, merge, remove } from '@syncfusion/ej2-base';
         this.removeSVG();
-        this.createElement();
+        this.createTooltipElement();
     }
@@ -458,3 +458,3 @@ initPrivateVariable() {
     }
-    createElement() {
+    createTooltipElement() {
         this.textElements = [];
@@ -688,3 +688,3 @@ if (!this.template || this.shared) {
             let templateElement = this.templateFn(this.data);
-            let elem = createElement('div', { id: this.element.id + 'parent_template' });
+            let elem = this.createElement('div', { id: this.element.id + 'parent_template' });
             while (templateElement && templateElement.length > 0) {
@@ -691,0 +691,0 @@ elem.appendChild(templateElement[0]);

dist/es6/ej2-svg-base.es5.js

@@ -470,3 +470,3 @@ import { Animation, Browser, ChildProperty, Complex, Component, Event, NotifyPropertyChanges, Property, SvgRenderer, compile, createElement, extend, merge, remove } from '@syncfusion/ej2-base';
         this.removeSVG();
-        this.createElement();
+        this.createTooltipElement();
     };
@@ -511,3 +511,3 @@ Tooltip.prototype.initPrivateVariable = function () {
     };
-    Tooltip.prototype.createElement = function () {
+    Tooltip.prototype.createTooltipElement = function () {
         this.textElements = [];
@@ -742,3 +742,3 @@ if (!this.template || this.shared) {
             var templateElement = this.templateFn(this.data);
-            var elem = createElement('div', { id: this.element.id + 'parent_template' });
+            var elem = this.createElement('div', { id: this.element.id + 'parent_template' });
             while (templateElement && templateElement.length > 0) {
@@ -745,0 +745,0 @@ elem.appendChild(templateElement[0]);

dist/global/index.d.ts

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

index.js

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

package.json

 {
   "name": "@syncfusion/ej2-svg-base",
-  "version": "16.2.45",
+  "version": "16.2.46",
   "description": "Essential JS 2 SVG Base Components",
@@ -8,3 +8,3 @@ "author": "Syncfusion Inc.",
   "dependencies": {
-    "@syncfusion/ej2-base": "~16.2.45"
+    "@syncfusion/ej2-base": "~16.2.46"
   },
@@ -28,4 +28,4 @@ "devDependencies": {
   "main": "./dist/ej2-svg-base.umd.min.js",
-  "module": "./dist/es6/ej2-svg-base.es5.js",
+  "module": "./index.js",
   "es2015": "./dist/es6/ej2-svg-base.es2015.js"
 }

src/index.js

@@ -1,8 +0,4 @@
-define(["require", "exports", "./tooltip/index"], function (require, exports, index_1) {
-    "use strict";
-    function __export(m) {
-        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-    }
-    Object.defineProperty(exports, "__esModule", { value: true });
-    __export(index_1);
-});
+/**
+ * Chart components exported.
+ */
+export * from './tooltip/index';

src/tooltip/enum.js

@@ -1,4 +0,1 @@
-define(["require", "exports"], function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-});
+

src/tooltip/helper.js

@@ -11,305 +11,315 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    function measureText(text, font) {
-        var htmlObject = document.getElementById('chartmeasuretext');
-        if (htmlObject === null) {
-            htmlObject = ej2_base_1.createElement('text', { id: 'chartmeasuretext' });
-            document.body.appendChild(htmlObject);
+import { createElement, remove, SvgRenderer, merge } from '@syncfusion/ej2-base';
+/**
+ * Function to measure the height and width of the text.
+ * @param  {string} text
+ * @param  {FontModel} font
+ * @param  {string} id
+ * @returns no
+ * @private
+ */
+export function measureText(text, font) {
+    var htmlObject = document.getElementById('chartmeasuretext');
+    if (htmlObject === null) {
+        htmlObject = createElement('text', { id: 'chartmeasuretext' });
+        document.body.appendChild(htmlObject);
+    }
+    htmlObject.innerHTML = text;
+    htmlObject.style.position = 'absolute';
+    htmlObject.style.fontSize = font.size;
+    htmlObject.style.fontWeight = font.fontWeight;
+    htmlObject.style.fontStyle = font.fontStyle;
+    htmlObject.style.fontFamily = font.fontFamily;
+    htmlObject.style.visibility = 'hidden';
+    htmlObject.style.top = '-100';
+    htmlObject.style.left = '0';
+    htmlObject.style.whiteSpace = 'nowrap';
+    // For bootstrap line height issue
+    htmlObject.style.lineHeight = 'normal';
+    return new Size(htmlObject.clientWidth, htmlObject.clientHeight);
+}
+/** @private */
+export function findDirection(rX, rY, rect, arrowLocation, arrowPadding, top, bottom, left, tipX, tipY, tipRadius) {
+    var direction = '';
+    var startX = rect.x;
+    var startY = rect.y;
+    var width = rect.x + rect.width;
+    var height = rect.y + rect.height;
+    tipRadius = tipRadius ? tipRadius : 0;
+    if (top) {
+        direction = direction.concat('M' + ' ' + (startX) + ' ' + (startY + rY) + ' Q ' + startX + ' '
+            + startY + ' ' + (startX + rX) + ' ' + startY + ' ' +
+            ' L' + ' ' + (width - rX) + ' ' + (startY) + ' Q ' + width + ' '
+            + startY + ' ' + (width) + ' ' + (startY + rY));
+        direction = direction.concat(' L' + ' ' + (width) + ' ' + (height - rY) + ' Q ' + width + ' '
+            + (height) + ' ' + (width - rX) + ' ' + (height));
+        if (arrowPadding !== 0) {
+            direction = direction.concat(' L' + ' ' + (arrowLocation.x + arrowPadding / 2) + ' ' + (height));
+            direction = direction.concat(' L' + ' ' + (tipX + tipRadius) + ' ' + (height + arrowPadding - tipRadius));
+            direction += ' Q' + ' ' + (tipX) + ' ' + (height + arrowPadding) + ' ' + (tipX - tipRadius) +
+                ' ' + (height + arrowPadding - tipRadius);
         }
-        htmlObject.innerHTML = text;
-        htmlObject.style.position = 'absolute';
-        htmlObject.style.fontSize = font.size;
-        htmlObject.style.fontWeight = font.fontWeight;
-        htmlObject.style.fontStyle = font.fontStyle;
-        htmlObject.style.fontFamily = font.fontFamily;
-        htmlObject.style.visibility = 'hidden';
-        htmlObject.style.top = '-100';
-        htmlObject.style.left = '0';
-        htmlObject.style.whiteSpace = 'nowrap';
-        htmlObject.style.lineHeight = 'normal';
-        return new Size(htmlObject.clientWidth, htmlObject.clientHeight);
-    }
-    exports.measureText = measureText;
-    function findDirection(rX, rY, rect, arrowLocation, arrowPadding, top, bottom, left, tipX, tipY, tipRadius) {
-        var direction = '';
-        var startX = rect.x;
-        var startY = rect.y;
-        var width = rect.x + rect.width;
-        var height = rect.y + rect.height;
-        tipRadius = tipRadius ? tipRadius : 0;
-        if (top) {
-            direction = direction.concat('M' + ' ' + (startX) + ' ' + (startY + rY) + ' Q ' + startX + ' '
-                + startY + ' ' + (startX + rX) + ' ' + startY + ' ' +
-                ' L' + ' ' + (width - rX) + ' ' + (startY) + ' Q ' + width + ' '
-                + startY + ' ' + (width) + ' ' + (startY + rY));
-            direction = direction.concat(' L' + ' ' + (width) + ' ' + (height - rY) + ' Q ' + width + ' '
-                + (height) + ' ' + (width - rX) + ' ' + (height));
-            if (arrowPadding !== 0) {
-                direction = direction.concat(' L' + ' ' + (arrowLocation.x + arrowPadding / 2) + ' ' + (height));
-                direction = direction.concat(' L' + ' ' + (tipX + tipRadius) + ' ' + (height + arrowPadding - tipRadius));
-                direction += ' Q' + ' ' + (tipX) + ' ' + (height + arrowPadding) + ' ' + (tipX - tipRadius) +
-                    ' ' + (height + arrowPadding - tipRadius);
-            }
-            if ((arrowLocation.x - arrowPadding / 2) > startX) {
-                direction = direction.concat(' L' + ' ' + (arrowLocation.x - arrowPadding / 2) + ' ' + height +
-                    ' L' + ' ' + (startX + rX) + ' ' + height + ' Q ' + startX + ' '
+        if ((arrowLocation.x - arrowPadding / 2) > startX) {
+            direction = direction.concat(' L' + ' ' + (arrowLocation.x - arrowPadding / 2) + ' ' + height +
+                ' L' + ' ' + (startX + rX) + ' ' + height + ' Q ' + startX + ' '
+                + height + ' ' + (startX) + ' ' + (height - rY) + ' z');
+        }
+        else {
+            if (arrowPadding === 0) {
+                direction = direction.concat(' L' + ' ' + (startX + rX) + ' ' + height + ' Q ' + startX + ' '
                     + height + ' ' + (startX) + ' ' + (height - rY) + ' z');
             }
             else {
-                if (arrowPadding === 0) {
-                    direction = direction.concat(' L' + ' ' + (startX + rX) + ' ' + height + ' Q ' + startX + ' '
-                        + height + ' ' + (startX) + ' ' + (height - rY) + ' z');
-                }
-                else {
-                    direction = direction.concat(' L' + ' ' + (startX) + ' ' + (height + rY) + ' z');
-                }
+                direction = direction.concat(' L' + ' ' + (startX) + ' ' + (height + rY) + ' z');
             }
         }
-        else if (bottom) {
-            direction = direction.concat('M' + ' ' + (startX) + ' ' + (startY + rY) + ' Q ' + startX + ' '
-                + (startY) + ' ' + (startX + rX) + ' ' + (startY) + ' L' + ' ' + (arrowLocation.x - arrowPadding / 2) + ' ' + (startY));
-            direction = direction.concat(' L' + ' ' + (tipX - tipRadius) + ' ' + (arrowLocation.y + tipRadius));
-            direction += ' Q' + ' ' + (tipX) + ' ' + (arrowLocation.y) + ' ' + (tipX + tipRadius) + ' ' + (arrowLocation.y + tipRadius);
-            direction = direction.concat(' L' + ' ' + (arrowLocation.x + arrowPadding / 2) + ' ' + (startY) + ' L' + ' '
-                + (width - rX) + ' ' + (startY) + ' Q ' + (width) + ' ' + (startY) + ' ' + (width) + ' ' + (startY + rY));
-            direction = direction.concat(' L' + ' ' + (width) + ' ' + (height - rY) + ' Q ' + (width) + ' '
-                + (height) + ' ' + (width - rX) + ' ' + (height) +
-                ' L' + ' ' + (startX + rX) + ' ' + (height) + ' Q ' + (startX) + ' '
-                + (height) + ' ' + (startX) + ' ' + (height - rY) + ' z');
-        }
-        else if (left) {
-            direction = direction.concat('M' + ' ' + (startX) + ' ' + (startY + rY) + ' Q ' + startX + ' '
-                + (startY) + ' ' + (startX + rX) + ' ' + (startY));
-            direction = direction.concat(' L' + ' ' + (width - rX) + ' ' + (startY) + ' Q ' + (width) + ' '
-                + (startY) + ' ' + (width) + ' ' + (startY + rY) + ' L' + ' ' + (width) + ' ' + (arrowLocation.y - arrowPadding / 2));
-            direction = direction.concat(' L' + ' ' + (width + arrowPadding - tipRadius) + ' ' + (tipY - tipRadius));
-            direction += ' Q ' + (width + arrowPadding) + ' ' + (tipY) + ' ' + (width + arrowPadding - tipRadius) + ' ' + (tipY + tipRadius);
-            direction = direction.concat(' L' + ' ' + (width) + ' ' + (arrowLocation.y + arrowPadding / 2) +
-                ' L' + ' ' + (width) + ' ' + (height - rY) + ' Q ' + width + ' ' + (height) + ' ' + (width - rX) + ' ' + (height));
-            direction = direction.concat(' L' + ' ' + (startX + rX) + ' ' + (height) + ' Q ' + startX + ' '
-                + (height) + ' ' + (startX) + ' ' + (height - rY) + ' z');
-        }
-        else {
-            direction = direction.concat('M' + ' ' + (startX + rX) + ' ' + (startY) + ' Q ' + (startX) + ' '
-                + (startY) + ' ' + (startX) + ' ' + (startY + rY) + ' L' + ' ' + (startX) + ' ' + (arrowLocation.y - arrowPadding / 2));
-            direction = direction.concat(' L' + ' ' + (startX - arrowPadding + tipRadius) + ' ' + (tipY - tipRadius));
-            direction += ' Q ' + (startX - arrowPadding) + ' ' + (tipY) + ' ' + (startX - arrowPadding + tipRadius) + ' ' + (tipY + tipRadius);
-            direction = direction.concat(' L' + ' ' + (startX) + ' ' + (arrowLocation.y + arrowPadding / 2) +
-                ' L' + ' ' + (startX) + ' ' + (height - rY) + ' Q ' + startX + ' '
-                + (height) + ' ' + (startX + rX) + ' ' + (height));
-            direction = direction.concat(' L' + ' ' + (width - rX) + ' ' + (height) + ' Q ' + width + ' '
-                + (height) + ' ' + (width) + ' ' + (height - rY) +
-                ' L' + ' ' + (width) + ' ' + (startY + rY) + ' Q ' + width + ' '
-                + (startY) + ' ' + (width - rX) + ' ' + (startY) + ' z');
-        }
-        return direction;
     }
-    exports.findDirection = findDirection;
-    var Size = (function () {
-        function Size(width, height) {
-            this.width = width;
-            this.height = height;
-        }
-        return Size;
-    }());
-    exports.Size = Size;
-    var Rect = (function () {
-        function Rect(x, y, width, height) {
-            this.x = x;
-            this.y = y;
-            this.width = width;
-            this.height = height;
-        }
-        return Rect;
-    }());
-    exports.Rect = Rect;
-    var Side = (function () {
-        function Side(bottom, right) {
-            this.isRight = right;
-            this.isBottom = bottom;
-        }
-        return Side;
-    }());
-    exports.Side = Side;
-    var CustomizeOption = (function () {
-        function CustomizeOption(id) {
-            this.id = id;
-        }
-        return CustomizeOption;
-    }());
-    exports.CustomizeOption = CustomizeOption;
-    var TextOption = (function (_super) {
-        __extends(TextOption, _super);
-        function TextOption(id, x, y, anchor, text, transform, baseLine) {
-            if (transform === void 0) { transform = ''; }
-            var _this = _super.call(this, id) || this;
-            _this.transform = '';
-            _this.baseLine = 'auto';
-            _this.x = x;
-            _this.y = y;
-            _this.anchor = anchor;
-            _this.text = text;
-            _this.transform = transform;
-            _this.baseLine = baseLine;
-            return _this;
-        }
-        return TextOption;
-    }(CustomizeOption));
-    exports.TextOption = TextOption;
-    function getElement(id) {
-        return document.getElementById(id);
+    else if (bottom) {
+        direction = direction.concat('M' + ' ' + (startX) + ' ' + (startY + rY) + ' Q ' + startX + ' '
+            + (startY) + ' ' + (startX + rX) + ' ' + (startY) + ' L' + ' ' + (arrowLocation.x - arrowPadding / 2) + ' ' + (startY));
+        direction = direction.concat(' L' + ' ' + (tipX - tipRadius) + ' ' + (arrowLocation.y + tipRadius));
+        direction += ' Q' + ' ' + (tipX) + ' ' + (arrowLocation.y) + ' ' + (tipX + tipRadius) + ' ' + (arrowLocation.y + tipRadius);
+        direction = direction.concat(' L' + ' ' + (arrowLocation.x + arrowPadding / 2) + ' ' + (startY) + ' L' + ' '
+            + (width - rX) + ' ' + (startY) + ' Q ' + (width) + ' ' + (startY) + ' ' + (width) + ' ' + (startY + rY));
+        direction = direction.concat(' L' + ' ' + (width) + ' ' + (height - rY) + ' Q ' + (width) + ' '
+            + (height) + ' ' + (width - rX) + ' ' + (height) +
+            ' L' + ' ' + (startX + rX) + ' ' + (height) + ' Q ' + (startX) + ' '
+            + (height) + ' ' + (startX) + ' ' + (height - rY) + ' z');
     }
-    exports.getElement = getElement;
-    function removeElement(id) {
-        var element = getElement(id);
-        if (element) {
-            ej2_base_1.remove(element);
-        }
+    else if (left) {
+        direction = direction.concat('M' + ' ' + (startX) + ' ' + (startY + rY) + ' Q ' + startX + ' '
+            + (startY) + ' ' + (startX + rX) + ' ' + (startY));
+        direction = direction.concat(' L' + ' ' + (width - rX) + ' ' + (startY) + ' Q ' + (width) + ' '
+            + (startY) + ' ' + (width) + ' ' + (startY + rY) + ' L' + ' ' + (width) + ' ' + (arrowLocation.y - arrowPadding / 2));
+        direction = direction.concat(' L' + ' ' + (width + arrowPadding - tipRadius) + ' ' + (tipY - tipRadius));
+        direction += ' Q ' + (width + arrowPadding) + ' ' + (tipY) + ' ' + (width + arrowPadding - tipRadius) + ' ' + (tipY + tipRadius);
+        direction = direction.concat(' L' + ' ' + (width) + ' ' + (arrowLocation.y + arrowPadding / 2) +
+            ' L' + ' ' + (width) + ' ' + (height - rY) + ' Q ' + width + ' ' + (height) + ' ' + (width - rX) + ' ' + (height));
+        direction = direction.concat(' L' + ' ' + (startX + rX) + ' ' + (height) + ' Q ' + startX + ' '
+            + (height) + ' ' + (startX) + ' ' + (height - rY) + ' z');
     }
-    exports.removeElement = removeElement;
-    function drawSymbol(location, shape, size, url, options, label) {
-        var functionName = 'Path';
-        var renderer = new ej2_base_1.SvgRenderer('');
-        var temp = calculateShapes(location, size, shape, options, url);
-        var htmlObject = renderer['draw' + temp.functionName](temp.renderOption);
-        htmlObject.setAttribute('aria-label', label);
-        return htmlObject;
+    else {
+        direction = direction.concat('M' + ' ' + (startX + rX) + ' ' + (startY) + ' Q ' + (startX) + ' '
+            + (startY) + ' ' + (startX) + ' ' + (startY + rY) + ' L' + ' ' + (startX) + ' ' + (arrowLocation.y - arrowPadding / 2));
+        direction = direction.concat(' L' + ' ' + (startX - arrowPadding + tipRadius) + ' ' + (tipY - tipRadius));
+        direction += ' Q ' + (startX - arrowPadding) + ' ' + (tipY) + ' ' + (startX - arrowPadding + tipRadius) + ' ' + (tipY + tipRadius);
+        direction = direction.concat(' L' + ' ' + (startX) + ' ' + (arrowLocation.y + arrowPadding / 2) +
+            ' L' + ' ' + (startX) + ' ' + (height - rY) + ' Q ' + startX + ' '
+            + (height) + ' ' + (startX + rX) + ' ' + (height));
+        direction = direction.concat(' L' + ' ' + (width - rX) + ' ' + (height) + ' Q ' + width + ' '
+            + (height) + ' ' + (width) + ' ' + (height - rY) +
+            ' L' + ' ' + (width) + ' ' + (startY + rY) + ' Q ' + width + ' '
+            + (startY) + ' ' + (width - rX) + ' ' + (startY) + ' z');
     }
-    exports.drawSymbol = drawSymbol;
-    function calculateShapes(location, size, shape, options, url) {
-        var path;
-        var functionName = 'Path';
-        var width = size.width;
-        var height = size.height;
-        var locX = location.x;
-        var locY = location.y;
-        var x = location.x + (-width / 2);
-        var y = location.y + (-height / 2);
-        switch (shape) {
-            case 'Circle':
-            case 'Bubble':
-                functionName = 'Ellipse';
-                ej2_base_1.merge(options, { 'rx': width / 2, 'ry': height / 2, 'cx': locX, 'cy': locY });
-                break;
-            case 'Cross':
-                path = 'M' + ' ' + x + ' ' + locY + ' ' + 'L' + ' ' + (locX + (width / 2)) + ' ' + locY + ' ' +
-                    'M' + ' ' + locX + ' ' + (locY + (height / 2)) + ' ' + 'L' + ' ' + locX + ' ' +
-                    (locY + (-height / 2));
-                ej2_base_1.merge(options, { 'd': path });
-                break;
-            case 'HorizontalLine':
-                path = 'M' + ' ' + x + ' ' + locY + ' ' + 'L' + ' ' + (locX + (width / 2)) + ' ' + locY;
-                ej2_base_1.merge(options, { 'd': path });
-                break;
-            case 'VerticalLine':
-                path = 'M' + ' ' + locX + ' ' + (locY + (height / 2)) + ' ' + 'L' + ' ' + locX + ' ' + (locY + (-height / 2));
-                ej2_base_1.merge(options, { 'd': path });
-                break;
-            case 'Diamond':
-                path = 'M' + ' ' + x + ' ' + locY + ' ' +
-                    'L' + ' ' + locX + ' ' + (locY + (-height / 2)) + ' ' +
-                    'L' + ' ' + (locX + (width / 2)) + ' ' + locY + ' ' +
-                    'L' + ' ' + locX + ' ' + (locY + (height / 2)) + ' ' +
-                    'L' + ' ' + x + ' ' + locY + ' z';
-                ej2_base_1.merge(options, { 'd': path });
-                break;
-            case 'Rectangle':
-                path = 'M' + ' ' + x + ' ' + (locY + (-height / 2)) + ' ' +
-                    'L' + ' ' + (locX + (width / 2)) + ' ' + (locY + (-height / 2)) + ' ' +
-                    'L' + ' ' + (locX + (width / 2)) + ' ' + (locY + (height / 2)) + ' ' +
-                    'L' + ' ' + x + ' ' + (locY + (height / 2)) + ' ' +
-                    'L' + ' ' + x + ' ' + (locY + (-height / 2)) + ' z';
-                ej2_base_1.merge(options, { 'd': path });
-                break;
-            case 'Triangle':
-                path = 'M' + ' ' + x + ' ' + (locY + (height / 2)) + ' ' +
-                    'L' + ' ' + locX + ' ' + (locY + (-height / 2)) + ' ' +
-                    'L' + ' ' + (locX + (width / 2)) + ' ' + (locY + (height / 2)) + ' ' +
-                    'L' + ' ' + x + ' ' + (locY + (height / 2)) + ' z';
-                ej2_base_1.merge(options, { 'd': path });
-                break;
-            case 'InvertedTriangle':
-                path = 'M' + ' ' + (locX + (width / 2)) + ' ' + (locY - (height / 2)) + ' ' +
-                    'L' + ' ' + locX + ' ' + (locY + (height / 2)) + ' ' +
-                    'L' + ' ' + (locX - (width / 2)) + ' ' + (locY - (height / 2)) + ' ' +
-                    'L' + ' ' + (locX + (width / 2)) + ' ' + (locY - (height / 2)) + ' z';
-                ej2_base_1.merge(options, { 'd': path });
-                break;
-            case 'Pentagon':
-                var eq = 72;
-                var xValue = void 0;
-                var yValue = void 0;
-                for (var i = 0; i <= 5; i++) {
-                    xValue = (width / 2) * Math.cos((Math.PI / 180) * (i * eq));
-                    yValue = (height / 2) * Math.sin((Math.PI / 180) * (i * eq));
-                    if (i === 0) {
-                        path = 'M' + ' ' + (locX + xValue) + ' ' + (locY + yValue) + ' ';
-                    }
-                    else {
-                        path = path.concat('L' + ' ' + (locX + xValue) + ' ' + (locY + yValue) + ' ');
-                    }
+    return direction;
+}
+/** @private */
+var Size = /** @class */ (function () {
+    function Size(width, height) {
+        this.width = width;
+        this.height = height;
+    }
+    return Size;
+}());
+export { Size };
+/** @private */
+var Rect = /** @class */ (function () {
+    function Rect(x, y, width, height) {
+        this.x = x;
+        this.y = y;
+        this.width = width;
+        this.height = height;
+    }
+    return Rect;
+}());
+export { Rect };
+var Side = /** @class */ (function () {
+    function Side(bottom, right) {
+        this.isRight = right;
+        this.isBottom = bottom;
+    }
+    return Side;
+}());
+export { Side };
+/** @private */
+var CustomizeOption = /** @class */ (function () {
+    function CustomizeOption(id) {
+        this.id = id;
+    }
+    return CustomizeOption;
+}());
+export { CustomizeOption };
+/** @private */
+var TextOption = /** @class */ (function (_super) {
+    __extends(TextOption, _super);
+    function TextOption(id, x, y, anchor, text, transform, baseLine) {
+        if (transform === void 0) { transform = ''; }
+        var _this = _super.call(this, id) || this;
+        _this.transform = '';
+        _this.baseLine = 'auto';
+        _this.x = x;
+        _this.y = y;
+        _this.anchor = anchor;
+        _this.text = text;
+        _this.transform = transform;
+        _this.baseLine = baseLine;
+        return _this;
+    }
+    return TextOption;
+}(CustomizeOption));
+export { TextOption };
+/** @private */
+export function getElement(id) {
+    return document.getElementById(id);
+}
+/** @private */
+export function removeElement(id) {
+    var element = getElement(id);
+    if (element) {
+        remove(element);
+    }
+}
+/** @private */
+export function drawSymbol(location, shape, size, url, options, label) {
+    var functionName = 'Path';
+    var renderer = new SvgRenderer('');
+    var temp = calculateShapes(location, size, shape, options, url);
+    var htmlObject = renderer['draw' + temp.functionName](temp.renderOption);
+    htmlObject.setAttribute('aria-label', label);
+    return htmlObject;
+}
+/** @private */
+export function calculateShapes(location, size, shape, options, url) {
+    var path;
+    var functionName = 'Path';
+    var width = size.width;
+    var height = size.height;
+    var locX = location.x;
+    var locY = location.y;
+    var x = location.x + (-width / 2);
+    var y = location.y + (-height / 2);
+    switch (shape) {
+        case 'Circle':
+        case 'Bubble':
+            functionName = 'Ellipse';
+            merge(options, { 'rx': width / 2, 'ry': height / 2, 'cx': locX, 'cy': locY });
+            break;
+        case 'Cross':
+            path = 'M' + ' ' + x + ' ' + locY + ' ' + 'L' + ' ' + (locX + (width / 2)) + ' ' + locY + ' ' +
+                'M' + ' ' + locX + ' ' + (locY + (height / 2)) + ' ' + 'L' + ' ' + locX + ' ' +
+                (locY + (-height / 2));
+            merge(options, { 'd': path });
+            break;
+        case 'HorizontalLine':
+            path = 'M' + ' ' + x + ' ' + locY + ' ' + 'L' + ' ' + (locX + (width / 2)) + ' ' + locY;
+            merge(options, { 'd': path });
+            break;
+        case 'VerticalLine':
+            path = 'M' + ' ' + locX + ' ' + (locY + (height / 2)) + ' ' + 'L' + ' ' + locX + ' ' + (locY + (-height / 2));
+            merge(options, { 'd': path });
+            break;
+        case 'Diamond':
+            path = 'M' + ' ' + x + ' ' + locY + ' ' +
+                'L' + ' ' + locX + ' ' + (locY + (-height / 2)) + ' ' +
+                'L' + ' ' + (locX + (width / 2)) + ' ' + locY + ' ' +
+                'L' + ' ' + locX + ' ' + (locY + (height / 2)) + ' ' +
+                'L' + ' ' + x + ' ' + locY + ' z';
+            merge(options, { 'd': path });
+            break;
+        case 'Rectangle':
+            path = 'M' + ' ' + x + ' ' + (locY + (-height / 2)) + ' ' +
+                'L' + ' ' + (locX + (width / 2)) + ' ' + (locY + (-height / 2)) + ' ' +
+                'L' + ' ' + (locX + (width / 2)) + ' ' + (locY + (height / 2)) + ' ' +
+                'L' + ' ' + x + ' ' + (locY + (height / 2)) + ' ' +
+                'L' + ' ' + x + ' ' + (locY + (-height / 2)) + ' z';
+            merge(options, { 'd': path });
+            break;
+        case 'Triangle':
+            path = 'M' + ' ' + x + ' ' + (locY + (height / 2)) + ' ' +
+                'L' + ' ' + locX + ' ' + (locY + (-height / 2)) + ' ' +
+                'L' + ' ' + (locX + (width / 2)) + ' ' + (locY + (height / 2)) + ' ' +
+                'L' + ' ' + x + ' ' + (locY + (height / 2)) + ' z';
+            merge(options, { 'd': path });
+            break;
+        case 'InvertedTriangle':
+            path = 'M' + ' ' + (locX + (width / 2)) + ' ' + (locY - (height / 2)) + ' ' +
+                'L' + ' ' + locX + ' ' + (locY + (height / 2)) + ' ' +
+                'L' + ' ' + (locX - (width / 2)) + ' ' + (locY - (height / 2)) + ' ' +
+                'L' + ' ' + (locX + (width / 2)) + ' ' + (locY - (height / 2)) + ' z';
+            merge(options, { 'd': path });
+            break;
+        case 'Pentagon':
+            var eq = 72;
+            var xValue = void 0;
+            var yValue = void 0;
+            for (var i = 0; i <= 5; i++) {
+                xValue = (width / 2) * Math.cos((Math.PI / 180) * (i * eq));
+                yValue = (height / 2) * Math.sin((Math.PI / 180) * (i * eq));
+                if (i === 0) {
+                    path = 'M' + ' ' + (locX + xValue) + ' ' + (locY + yValue) + ' ';
                 }
-                path = path.concat('Z');
-                ej2_base_1.merge(options, { 'd': path });
-                break;
-            case 'Image':
-                functionName = 'Image';
-                ej2_base_1.merge(options, { 'href': url, 'height': height, 'width': width, x: x, y: y });
-                break;
-        }
-        return { renderOption: options, functionName: functionName };
+                else {
+                    path = path.concat('L' + ' ' + (locX + xValue) + ' ' + (locY + yValue) + ' ');
+                }
+            }
+            path = path.concat('Z');
+            merge(options, { 'd': path });
+            break;
+        case 'Image':
+            functionName = 'Image';
+            merge(options, { 'href': url, 'height': height, 'width': width, x: x, y: y });
+            break;
     }
-    exports.calculateShapes = calculateShapes;
-    var PathOption = (function (_super) {
-        __extends(PathOption, _super);
-        function PathOption(id, fill, width, color, opacity, dashArray, d) {
-            var _this = _super.call(this, id) || this;
-            _this.opacity = opacity;
-            _this.fill = fill;
-            _this.stroke = color;
-            _this['stroke-width'] = width;
-            _this['stroke-dasharray'] = dashArray;
-            _this.d = d;
-            return _this;
-        }
-        return PathOption;
-    }(CustomizeOption));
-    exports.PathOption = PathOption;
-    function textElement(options, font, color, parent) {
-        var renderOptions = {};
-        var htmlObject;
-        var tspanElement;
-        var renderer = new ej2_base_1.SvgRenderer('');
-        var text;
-        var height;
-        renderOptions = {
-            'id': options.id,
-            'x': options.x,
-            'y': options.y,
-            'fill': color,
-            'font-size': font.size,
-            'font-style': font.fontStyle,
-            'font-family': font.fontFamily,
-            'font-weight': font.fontWeight,
-            'text-anchor': options.anchor,
-            'transform': options.transform,
-            'opacity': font.opacity,
-            'dominant-baseline': options.baseLine
-        };
-        text = typeof options.text === 'string' ? options.text : options.text[0];
-        htmlObject = renderer.createText(renderOptions, text);
-        parent.appendChild(htmlObject);
-        return htmlObject;
+    return { renderOption: options, functionName: functionName };
+}
+/** @private */
+var PathOption = /** @class */ (function (_super) {
+    __extends(PathOption, _super);
+    function PathOption(id, fill, width, color, opacity, dashArray, d) {
+        var _this = _super.call(this, id) || this;
+        _this.opacity = opacity;
+        _this.fill = fill;
+        _this.stroke = color;
+        _this['stroke-width'] = width;
+        _this['stroke-dasharray'] = dashArray;
+        _this.d = d;
+        return _this;
     }
-    exports.textElement = textElement;
-    var TooltipLocation = (function () {
-        function TooltipLocation(x, y) {
-            this.x = x;
-            this.y = y;
-        }
-        return TooltipLocation;
-    }());
-    exports.TooltipLocation = TooltipLocation;
-});
+    return PathOption;
+}(CustomizeOption));
+export { PathOption };
+/** @private */
+export function textElement(options, font, color, parent) {
+    var renderOptions = {};
+    var htmlObject;
+    var tspanElement;
+    var renderer = new SvgRenderer('');
+    var text;
+    var height;
+    renderOptions = {
+        'id': options.id,
+        'x': options.x,
+        'y': options.y,
+        'fill': color,
+        'font-size': font.size,
+        'font-style': font.fontStyle,
+        'font-family': font.fontFamily,
+        'font-weight': font.fontWeight,
+        'text-anchor': options.anchor,
+        'transform': options.transform,
+        'opacity': font.opacity,
+        'dominant-baseline': options.baseLine
+    };
+    text = typeof options.text === 'string' ? options.text : options.text[0];
+    htmlObject = renderer.createText(renderOptions, text);
+    parent.appendChild(htmlObject);
+    return htmlObject;
+}
+var TooltipLocation = /** @class */ (function () {
+    function TooltipLocation(x, y) {
+        this.x = x;
+        this.y = y;
+    }
+    return TooltipLocation;
+}());
+export { TooltipLocation };

src/tooltip/index.js

@@ -1,9 +0,5 @@
-define(["require", "exports", "./tooltip", "./interface"], function (require, exports, tooltip_1, interface_1) {
-    "use strict";
-    function __export(m) {
-        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-    }
-    Object.defineProperty(exports, "__esModule", { value: true });
-    __export(tooltip_1);
-    __export(interface_1);
-});
+/**
+ * Chart component exported items
+ */
+export * from './tooltip';
+export * from './interface';

src/tooltip/interface.js

@@ -1,27 +0,23 @@
-define(["require", "exports"], function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    function getTooltipThemeColor(theme) {
-        var style;
-        switch (theme) {
-            case 'Highcontrast':
-                style = {
-                    tooltipFill: '#ffffff',
-                    tooltipBoldLabel: '#000000',
-                    tooltipLightLabel: '#000000',
-                    tooltipHeaderLine: '#969696'
-                };
-                break;
-            default:
-                style = {
-                    tooltipFill: 'rgba(0, 8, 22, 0.75)',
-                    tooltipBoldLabel: '#ffffff',
-                    tooltipLightLabel: '#dbdbdb',
-                    tooltipHeaderLine: '#ffffff'
-                };
-                break;
-        }
-        return style;
+/** @private */
+export function getTooltipThemeColor(theme) {
+    var style;
+    switch (theme) {
+        case 'Highcontrast':
+            style = {
+                tooltipFill: '#ffffff',
+                tooltipBoldLabel: '#000000',
+                tooltipLightLabel: '#000000',
+                tooltipHeaderLine: '#969696'
+            };
+            break;
+        default:
+            style = {
+                tooltipFill: 'rgba(0, 8, 22, 0.75)',
+                tooltipBoldLabel: '#ffffff',
+                tooltipLightLabel: '#dbdbdb',
+                tooltipHeaderLine: '#ffffff'
+            };
+            break;
     }
-    exports.getTooltipThemeColor = getTooltipThemeColor;
-});
+    return style;
+}

src/tooltip/tooltip-model.d.ts

@@ -1,2 +0,2 @@
-import {  NotifyPropertyChanges, Property, Event, Complex, INotifyPropertyChanged} from '@syncfusion/ej2-base';import {  SvgRenderer, extend,  compile as templateComplier, Component} from '@syncfusion/ej2-base';import {  ChildProperty, createElement, EmitType, remove, Browser, AnimationOptions, Animation} from '@syncfusion/ej2-base';import { ITooltipThemeStyle, ITooltipRenderingEventArgs, ITooltipAnimationCompleteArgs} from './interface';import { ITooltipLoadedEventArgs, getTooltipThemeColor } from './interface';import { Size, Rect, Side, measureText, getElement, findDirection, drawSymbol, textElement } from './helper';import { removeElement, TextOption, TooltipLocation, PathOption } from './helper';import { TooltipShape, TooltipTheme } from './enum';
+import {  NotifyPropertyChanges, Property, Event, Complex, INotifyPropertyChanged} from '@syncfusion/ej2-base';import {  SvgRenderer, extend,  compile as templateComplier, Component} from '@syncfusion/ej2-base';import {  ChildProperty, EmitType, remove, Browser, AnimationOptions, Animation} from '@syncfusion/ej2-base';import { ITooltipThemeStyle, ITooltipRenderingEventArgs, ITooltipAnimationCompleteArgs} from './interface';import { ITooltipLoadedEventArgs, getTooltipThemeColor } from './interface';import { Size, Rect, Side, measureText, getElement, findDirection, drawSymbol, textElement } from './helper';import { removeElement, TextOption, TooltipLocation, PathOption } from './helper';import { TooltipShape, TooltipTheme } from './enum';
 import {ComponentModel} from '@syncfusion/ej2-base';
@@ -148,3 +148,3 @@
     /**
-     * The fill color of the tooltip that accepts value in hex and rgba as a valid CSS color string. 
+     * The fill color of the tooltip that accepts value in hex and rgba as a valid CSS color string.
      * @private.
@@ -156,3 +156,3 @@ */
     /**
-     * Header for tooltip. 
+     * Header for tooltip.
      * @private.
@@ -164,3 +164,3 @@ */
     /**
-     * The fill color of the tooltip that accepts value in hex and rgba as a valid CSS color string. 
+     * The fill color of the tooltip that accepts value in hex and rgba as a valid CSS color string.
      * @private.
@@ -167,0 +167,0 @@ */

src/tooltip/tooltip.d.ts

@@ -308,3 +308,3 @@ import { INotifyPropertyChanged } from '@syncfusion/ej2-base';
     protected render(): void;
-    private createElement();
+    private createTooltipElement();
     private drawMarker(isBottom, isRight, size);
@@ -311,0 +311,0 @@ private renderTooltipElement(areaBounds, location);

src/tooltip/tooltip.js

@@ -17,635 +17,699 @@ var __extends = (this && this.__extends) || (function () {
 };
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "./interface", "./helper", "./helper"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, interface_1, helper_1, helper_2) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var TextStyle = (function (_super) {
-        __extends(TextStyle, _super);
-        function TextStyle() {
-            return _super !== null && _super.apply(this, arguments) || this;
+import { NotifyPropertyChanges, Property, Event, Complex } from '@syncfusion/ej2-base';
+import { SvgRenderer, extend, compile as templateComplier, Component } from '@syncfusion/ej2-base';
+import { ChildProperty, remove, Browser, Animation } from '@syncfusion/ej2-base';
+import { getTooltipThemeColor } from './interface';
+import { Size, Rect, Side, measureText, getElement, findDirection, drawSymbol, textElement } from './helper';
+import { removeElement, TextOption, TooltipLocation, PathOption } from './helper';
+/**
+ * Configures the fonts in charts.
+ * @private
+ */
+var TextStyle = /** @class */ (function (_super) {
+    __extends(TextStyle, _super);
+    function TextStyle() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property(null)
+    ], TextStyle.prototype, "size", void 0);
+    __decorate([
+        Property('')
+    ], TextStyle.prototype, "color", void 0);
+    __decorate([
+        Property('Segoe UI')
+    ], TextStyle.prototype, "fontFamily", void 0);
+    __decorate([
+        Property('Normal')
+    ], TextStyle.prototype, "fontWeight", void 0);
+    __decorate([
+        Property('Normal')
+    ], TextStyle.prototype, "fontStyle", void 0);
+    __decorate([
+        Property(1)
+    ], TextStyle.prototype, "opacity", void 0);
+    return TextStyle;
+}(ChildProperty));
+export { TextStyle };
+/**
+ * Configures the borders in the chart.
+ * @private
+ */
+var TooltipBorder = /** @class */ (function (_super) {
+    __extends(TooltipBorder, _super);
+    function TooltipBorder() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('')
+    ], TooltipBorder.prototype, "color", void 0);
+    __decorate([
+        Property(1)
+    ], TooltipBorder.prototype, "width", void 0);
+    return TooltipBorder;
+}(ChildProperty));
+export { TooltipBorder };
+/**
+ * Configures the borders in the chart.
+ * @private
+ */
+var AreaBounds = /** @class */ (function (_super) {
+    __extends(AreaBounds, _super);
+    function AreaBounds() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property(0)
+    ], AreaBounds.prototype, "x", void 0);
+    __decorate([
+        Property(0)
+    ], AreaBounds.prototype, "y", void 0);
+    __decorate([
+        Property(0)
+    ], AreaBounds.prototype, "width", void 0);
+    __decorate([
+        Property(0)
+    ], AreaBounds.prototype, "height", void 0);
+    return AreaBounds;
+}(ChildProperty));
+export { AreaBounds };
+/**
+ * Configures the borders in the chart.
+ * @private
+ */
+var ToolLocation = /** @class */ (function (_super) {
+    __extends(ToolLocation, _super);
+    function ToolLocation() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property(0)
+    ], ToolLocation.prototype, "x", void 0);
+    __decorate([
+        Property(0)
+    ], ToolLocation.prototype, "y", void 0);
+    return ToolLocation;
+}(ChildProperty));
+export { ToolLocation };
+/**
+ * Represents the Tooltip control.
+ * ```html
+ * <div id="tooltip"/>
+ * <script>
+ *   var tooltipObj = new Tooltip({ isResponsive : true });
+ *   tooltipObj.appendTo("#tooltip");
+ * </script>
+ * ```
+ * @private
+ */
+var Tooltip = /** @class */ (function (_super) {
+    __extends(Tooltip, _super);
+    /**
+     * Constructor for creating the widget
+     * @hidden
+     */
+    function Tooltip(options, element) {
+        return _super.call(this, options, element) || this;
+    }
+    /**
+     * Initialize the event handler.
+     *  @private.
+     */
+    Tooltip.prototype.preRender = function () {
+        this.initPrivateVariable();
+        this.removeSVG();
+        this.createTooltipElement();
+    };
+    Tooltip.prototype.initPrivateVariable = function () {
+        this.renderer = new SvgRenderer(this.element.id);
+        this.themeStyle = getTooltipThemeColor(this.theme);
+        this.formattedText = [];
+        this.padding = 5;
+        this.isFirst = true;
+        this.markerPoint = [];
+    };
+    Tooltip.prototype.removeSVG = function () {
+        var svgObject = document.getElementById(this.element.id + '_svg');
+        var templateObject = document.getElementById(this.element.id + 'parent_template');
+        if (svgObject && svgObject.parentNode) {
+            remove(svgObject);
         }
-        __decorate([
-            ej2_base_1.Property(null)
-        ], TextStyle.prototype, "size", void 0);
-        __decorate([
-            ej2_base_1.Property('')
-        ], TextStyle.prototype, "color", void 0);
-        __decorate([
-            ej2_base_1.Property('Segoe UI')
-        ], TextStyle.prototype, "fontFamily", void 0);
-        __decorate([
-            ej2_base_1.Property('Normal')
-        ], TextStyle.prototype, "fontWeight", void 0);
-        __decorate([
-            ej2_base_1.Property('Normal')
-        ], TextStyle.prototype, "fontStyle", void 0);
-        __decorate([
-            ej2_base_1.Property(1)
-        ], TextStyle.prototype, "opacity", void 0);
-        return TextStyle;
-    }(ej2_base_3.ChildProperty));
-    exports.TextStyle = TextStyle;
-    var TooltipBorder = (function (_super) {
-        __extends(TooltipBorder, _super);
-        function TooltipBorder() {
-            return _super !== null && _super.apply(this, arguments) || this;
+        if (templateObject && templateObject.parentNode) {
+            remove(templateObject);
         }
-        __decorate([
-            ej2_base_1.Property('')
-        ], TooltipBorder.prototype, "color", void 0);
-        __decorate([
-            ej2_base_1.Property(1)
-        ], TooltipBorder.prototype, "width", void 0);
-        return TooltipBorder;
-    }(ej2_base_3.ChildProperty));
-    exports.TooltipBorder = TooltipBorder;
-    var AreaBounds = (function (_super) {
-        __extends(AreaBounds, _super);
-        function AreaBounds() {
-            return _super !== null && _super.apply(this, arguments) || this;
+    };
+    /**
+     * To Initialize the control rendering.
+     */
+    Tooltip.prototype.render = function () {
+        this.fadeOuted = false;
+        if (!this.template) {
+            this.renderText(this.isFirst);
+            var argsData = {
+                cancel: false, name: 'tooltipRender', tooltip: this
+            };
+            this.trigger('tooltipRender', argsData);
+            var markerSide = this.renderTooltipElement(this.areaBounds, this.location);
+            this.drawMarker(markerSide.isBottom, markerSide.isRight, this.markerSize);
         }
-        __decorate([
-            ej2_base_1.Property(0)
-        ], AreaBounds.prototype, "x", void 0);
-        __decorate([
-            ej2_base_1.Property(0)
-        ], AreaBounds.prototype, "y", void 0);
-        __decorate([
-            ej2_base_1.Property(0)
-        ], AreaBounds.prototype, "width", void 0);
-        __decorate([
-            ej2_base_1.Property(0)
-        ], AreaBounds.prototype, "height", void 0);
-        return AreaBounds;
-    }(ej2_base_3.ChildProperty));
-    exports.AreaBounds = AreaBounds;
-    var ToolLocation = (function (_super) {
-        __extends(ToolLocation, _super);
-        function ToolLocation() {
-            return _super !== null && _super.apply(this, arguments) || this;
+        else {
+            this.updateTemplateFn();
+            this.createTemplate(this.areaBounds, this.location);
         }
-        __decorate([
-            ej2_base_1.Property(0)
-        ], ToolLocation.prototype, "x", void 0);
-        __decorate([
-            ej2_base_1.Property(0)
-        ], ToolLocation.prototype, "y", void 0);
-        return ToolLocation;
-    }(ej2_base_3.ChildProperty));
-    exports.ToolLocation = ToolLocation;
-    var Tooltip = (function (_super) {
-        __extends(Tooltip, _super);
-        function Tooltip(options, element) {
-            return _super.call(this, options, element) || this;
+        this.trigger('loaded', { tooltip: this });
+    };
+    Tooltip.prototype.createTooltipElement = function () {
+        this.textElements = [];
+        if (!this.template || this.shared) {
+            // SVG element for tooltip
+            var svgObject = this.renderer.createSvg({ id: this.element.id + '_svg' });
+            this.element.appendChild(svgObject);
+            // Group to hold text and path.
+            var groupElement = this.renderer.createGroup({ id: this.element.id + '_group' });
+            svgObject.appendChild(groupElement);
+            var pathElement = this.renderer.drawPath({
+                'id': this.element.id + '_path', 'stroke-width': this.border.width,
+                'fill': this.fill || this.themeStyle.tooltipFill, 'opacity': this.opacity,
+                'stroke': this.border.color
+            });
+            groupElement.appendChild(pathElement);
         }
-        Tooltip.prototype.preRender = function () {
-            this.initPrivateVariable();
-            this.removeSVG();
-            this.createElement();
-        };
-        Tooltip.prototype.initPrivateVariable = function () {
-            this.renderer = new ej2_base_2.SvgRenderer(this.element.id);
-            this.themeStyle = interface_1.getTooltipThemeColor(this.theme);
-            this.formattedText = [];
-            this.padding = 5;
-            this.isFirst = true;
-            this.markerPoint = [];
-        };
-        Tooltip.prototype.removeSVG = function () {
-            var svgObject = document.getElementById(this.element.id + '_svg');
-            var templateObject = document.getElementById(this.element.id + 'parent_template');
-            if (svgObject && svgObject.parentNode) {
-                ej2_base_3.remove(svgObject);
+    };
+    Tooltip.prototype.drawMarker = function (isBottom, isRight, size) {
+        if (this.shapes.length <= 0) {
+            return null;
+        }
+        var shapeOption;
+        var count = 0;
+        var markerGroup = this.renderer.createGroup({ id: this.element.id + '_trackball_group' });
+        var groupElement = getElement(this.element.id + '_group');
+        var x = (this.marginX * 2) + (size / 2) + (isRight ? this.arrowPadding : 0);
+        for (var _i = 0, _a = this.shapes; _i < _a.length; _i++) {
+            var shape = _a[_i];
+            shapeOption = new PathOption(this.element.id + '_Trackball_' + count, this.palette[count], 1, '#cccccc', 1, null);
+            markerGroup.appendChild(drawSymbol(new TooltipLocation(x, this.markerPoint[count] - this.padding + (isBottom ? this.arrowPadding : 0)), shape, new Size(size, size), '', shapeOption, null));
+            count++;
+        }
+        groupElement.appendChild(markerGroup);
+    };
+    Tooltip.prototype.renderTooltipElement = function (areaBounds, location) {
+        var tooltipDiv = getElement(this.element.id);
+        var arrowLocation = new TooltipLocation(0, 0);
+        var tipLocation = new TooltipLocation(0, 0);
+        var textHeights;
+        var svgObject = getElement(this.element.id + '_svg');
+        var groupElement = getElement(this.element.id + '_group');
+        var pathElement = getElement(this.element.id + '_path');
+        var rect;
+        var isTop = false;
+        var isLeft = false;
+        var isBottom = false;
+        var x = 0;
+        var y = 0;
+        this.tipRadius = 1;
+        if (this.header !== '') {
+            this.elementSize.height += this.marginY;
+        }
+        if (this.content.length > 1) {
+            rect = this.sharedTooltipLocation(areaBounds, this.location.x, this.location.y);
+            isTop = true;
+        }
+        else {
+            rect = this.tooltipLocation(areaBounds, location, arrowLocation, tipLocation);
+            if (!this.inverted) {
+                isTop = (rect.y < (location.y + this.clipBounds.y));
+                isBottom = !isTop;
+                y = (isTop ? 0 : this.arrowPadding);
             }
-            if (templateObject && templateObject.parentNode) {
-                ej2_base_3.remove(templateObject);
-            }
-        };
-        Tooltip.prototype.render = function () {
-            this.fadeOuted = false;
-            if (!this.template) {
-                this.renderText(this.isFirst);
-                var argsData = {
-                    cancel: false, name: 'tooltipRender', tooltip: this
-                };
-                this.trigger('tooltipRender', argsData);
-                var markerSide = this.renderTooltipElement(this.areaBounds, this.location);
-                this.drawMarker(markerSide.isBottom, markerSide.isRight, this.markerSize);
-            }
             else {
-                this.updateTemplateFn();
-                this.createTemplate(this.areaBounds, this.location);
+                isLeft = (rect.x < (location.x + this.clipBounds.x));
+                x = (isLeft ? 0 : this.arrowPadding);
             }
-            this.trigger('loaded', { tooltip: this });
-        };
-        Tooltip.prototype.createElement = function () {
-            this.textElements = [];
-            if (!this.template || this.shared) {
-                var svgObject = this.renderer.createSvg({ id: this.element.id + '_svg' });
-                this.element.appendChild(svgObject);
-                var groupElement = this.renderer.createGroup({ id: this.element.id + '_group' });
-                svgObject.appendChild(groupElement);
-                var pathElement = this.renderer.drawPath({
-                    'id': this.element.id + '_path', 'stroke-width': this.border.width,
-                    'fill': this.fill || this.themeStyle.tooltipFill, 'opacity': this.opacity,
-                    'stroke': this.border.color
-                });
-                groupElement.appendChild(pathElement);
+        }
+        if (this.header !== '') {
+            var headerSize = measureText(this.header, this.textStyle).height + (this.marginY * 2) +
+                (isBottom ? this.arrowPadding : 0); //header padding;
+            var xLength = (this.marginX * 3) + (!isLeft && !isTop && !isBottom ? this.arrowPadding : 0);
+            var direction = 'M ' + xLength + ' ' + headerSize +
+                'L ' + (rect.width + (!isLeft && !isTop && !isBottom ? this.arrowPadding : 0) - (this.marginX * 2)) +
+                ' ' + headerSize;
+            var pathElement_1 = this.renderer.drawPath({
+                'id': this.element.id + '_header_path', 'stroke-width': 1,
+                'fill': null, 'opacity': 0.8, 'stroke': this.themeStyle.tooltipHeaderLine, 'd': direction
+            });
+            groupElement.appendChild(pathElement_1);
+        }
+        var start = this.border.width / 2;
+        var pointRect = new Rect(start + x, start + y, rect.width - start, rect.height - start);
+        groupElement.setAttribute('opacity', '1');
+        if (this.enableAnimation && !this.shared && !this.isFirst) {
+            this.animateTooltipDiv(tooltipDiv, rect);
+        }
+        else {
+            this.updateDiv(tooltipDiv, rect.x, rect.y);
+        }
+        svgObject.setAttribute('height', (rect.height + this.border.width + (!((!this.inverted)) ? 0 : this.arrowPadding)).toString());
+        svgObject.setAttribute('width', (rect.width + this.border.width + (((!this.inverted)) ? 0 : this.arrowPadding)).toString());
+        svgObject.setAttribute('opacity', '1');
+        pathElement.setAttribute('d', findDirection(this.rx, this.ry, pointRect, arrowLocation, this.arrowPadding, isTop, isBottom, isLeft, tipLocation.x, tipLocation.y, this.tipRadius));
+        if (this.enableShadow) {
+            pathElement.setAttribute('filter', Browser.isIE ? '' : 'url(#chart_shadow_tooltip)');
+            var shadow = '<filter id="chart_shadow_tooltip" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"/>';
+            shadow += '<feOffset dx="3" dy="3" result="offsetblur"/><feComponentTransfer><feFuncA type="linear" slope="0.5"/>';
+            shadow += '</feComponentTransfer><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter>';
+            var defElement = this.renderer.createDefs();
+            defElement.setAttribute('id', 'SVG_tooltip_definition');
+            groupElement.appendChild(defElement);
+            defElement.innerHTML = shadow;
+        }
+        pathElement.setAttribute('stroke', this.border.color);
+        this.changeText(new TooltipLocation(x, y), isBottom, !isLeft && !isTop && !isBottom, rect);
+        return new Side(isBottom, !isLeft && !isTop && !isBottom);
+    };
+    Tooltip.prototype.changeText = function (point, isBottom, isRight, rect) {
+        var element = document.getElementById(this.element.id + '_text');
+        if (isBottom) {
+            element.setAttribute('transform', 'translate(0,' + this.arrowPadding + ')');
+        }
+        if (isRight) {
+            element.setAttribute('transform', 'translate(' + this.arrowPadding + ' 0)');
+        }
+    };
+    Tooltip.prototype.findFormattedText = function () {
+        this.formattedText = [];
+        if (this.header.replace(/<b>/g, '').replace(/<\/b>/g, '').trim() !== '') {
+            this.formattedText = this.formattedText.concat(this.header);
+        }
+        this.formattedText = this.formattedText.concat(this.content);
+    };
+    Tooltip.prototype.renderText = function (isRender) {
+        var height = 0;
+        var width = 0; // Padding for text;
+        var subWidth = 0;
+        var size;
+        var lines;
+        var key = 'properties';
+        var font = extend({}, this.textStyle, null, true)[key];
+        var groupElement = getElement(this.element.id + '_group');
+        var tspanElement;
+        var tspanStyle = '';
+        var line;
+        var tspanOption;
+        this.findFormattedText();
+        var headerContent = this.header.replace(/<b>/g, '').replace(/<\/b>/g, '').trim();
+        var headerSpace = (headerContent !== '') ? this.marginY : 0;
+        var isRow = true;
+        var isColumn = true;
+        this.markerPoint = [];
+        var markerSize = (this.shapes.length > 0) ? 10 : 0;
+        var markerPadding = (this.shapes.length > 0) ? 5 : 0;
+        var spaceWidth = 4;
+        var fontSize = '13px';
+        var dy = (22 / parseFloat(fontSize)) * (parseFloat(font.size));
+        if (!isRender) {
+            removeElement(this.element.id + '_text');
+            removeElement(this.element.id + '_header_path');
+            removeElement(this.element.id + '_trackball_group');
+            removeElement('SVG_tooltip_definition');
+        }
+        var options = new TextOption(this.element.id + '_text', this.marginX * 2, (this.marginY * 2 + this.padding * 2 + (this.marginY === 2 ? 3 : 0)), 'start', '');
+        var parentElement = textElement(options, font, null, groupElement);
+        for (var k = 0, pointsLength = this.formattedText.length; k < pointsLength; k++) {
+            var textCollection = this.formattedText[k].replace(/<(b|strong)>/g, '<b>')
+                .replace(/<\/(b|strong)>/g, '</b>')
+                .split(/<br.*?>/g);
+            size = measureText(this.formattedText[k], font);
+            if ((k !== 0) || (headerContent === '')) {
+                this.markerPoint.push((headerContent !== '' ? (this.marginY) : 0) + options.y + height);
             }
-        };
-        Tooltip.prototype.drawMarker = function (isBottom, isRight, size) {
-            if (this.shapes.length <= 0) {
-                return null;
-            }
-            var shapeOption;
-            var count = 0;
-            var markerGroup = this.renderer.createGroup({ id: this.element.id + '_trackball_group' });
-            var groupElement = helper_1.getElement(this.element.id + '_group');
-            var x = (this.marginX * 2) + (size / 2) + (isRight ? this.arrowPadding : 0);
-            for (var _i = 0, _a = this.shapes; _i < _a.length; _i++) {
-                var shape = _a[_i];
-                shapeOption = new helper_2.PathOption(this.element.id + '_Trackball_' + count, this.palette[count], 1, '#cccccc', 1, null);
-                markerGroup.appendChild(helper_1.drawSymbol(new helper_2.TooltipLocation(x, this.markerPoint[count] - this.padding + (isBottom ? this.arrowPadding : 0)), shape, new helper_1.Size(size, size), '', shapeOption, null));
-                count++;
-            }
-            groupElement.appendChild(markerGroup);
-        };
-        Tooltip.prototype.renderTooltipElement = function (areaBounds, location) {
-            var tooltipDiv = helper_1.getElement(this.element.id);
-            var arrowLocation = new helper_2.TooltipLocation(0, 0);
-            var tipLocation = new helper_2.TooltipLocation(0, 0);
-            var textHeights;
-            var svgObject = helper_1.getElement(this.element.id + '_svg');
-            var groupElement = helper_1.getElement(this.element.id + '_group');
-            var pathElement = helper_1.getElement(this.element.id + '_path');
-            var rect;
-            var isTop = false;
-            var isLeft = false;
-            var isBottom = false;
-            var x = 0;
-            var y = 0;
-            this.tipRadius = 1;
-            if (this.header !== '') {
-                this.elementSize.height += this.marginY;
-            }
-            if (this.content.length > 1) {
-                rect = this.sharedTooltipLocation(areaBounds, this.location.x, this.location.y);
-                isTop = true;
-            }
-            else {
-                rect = this.tooltipLocation(areaBounds, location, arrowLocation, tipLocation);
-                if (!this.inverted) {
-                    isTop = (rect.y < (location.y + this.clipBounds.y));
-                    isBottom = !isTop;
-                    y = (isTop ? 0 : this.arrowPadding);
+            for (var i = 0, len = textCollection.length; i < len; i++) {
+                lines = textCollection[i].replace(/<b>/g, '<br><b>').replace(/<\/b>/g, '</b><br>').split('<br>');
+                subWidth = 0;
+                isColumn = true;
+                height += dy;
+                for (var k_1 = 0, len_1 = lines.length; k_1 < len_1; k_1++) {
+                    line = lines[k_1];
+                    if (line.replace(/<b>/g, '').replace(/<\/b>/g, '').trim() !== '') {
+                        subWidth += spaceWidth;
+                        if (isColumn && !isRow) {
+                            tspanOption = { x: (this.marginX * 2) + (markerSize + markerPadding),
+                                dy: dy + ((isColumn) ? headerSpace : 0), fill: '' };
+                            headerSpace = null;
+                        }
+                        else {
+                            if (isRow && isColumn) {
+                                tspanOption = { x: (headerContent === '') ? ((this.marginX * 2) + (markerSize + markerPadding))
+                                        : (this.marginX * 2) };
+                            }
+                            else {
+                                tspanOption = {};
+                            }
+                        }
+                        isColumn = false;
+                        tspanElement = this.renderer.createTSpan(tspanOption, '');
+                        parentElement.appendChild(tspanElement);
+                        if (line.indexOf('<b>') > -1) {
+                            tspanStyle = 'font-weight:bold';
+                            font.fontWeight = 'bold';
+                            (tspanElement).setAttribute('fill', this.textStyle.color || this.themeStyle.tooltipBoldLabel);
+                        }
+                        else {
+                            tspanStyle = '';
+                            font.fontWeight = 'Normal';
+                            (tspanElement).setAttribute('fill', this.textStyle.color || this.themeStyle.tooltipLightLabel);
+                        }
+                        (tspanElement).textContent = line = line.replace(/<[a-zA-Z\/](.|\n)*?>/g, '');
+                        subWidth += measureText(line, font).width;
+                        if (tspanStyle !== '') {
+                            tspanElement.setAttribute('style', tspanStyle);
+                        }
+                        isRow = false;
+                    }
                 }
-                else {
-                    isLeft = (rect.x < (location.x + this.clipBounds.x));
-                    x = (isLeft ? 0 : this.arrowPadding);
-                }
+                subWidth -= spaceWidth;
+                width = Math.max(width, subWidth);
             }
-            if (this.header !== '') {
-                var headerSize = helper_1.measureText(this.header, this.textStyle).height + (this.marginY * 2) +
-                    (isBottom ? this.arrowPadding : 0);
-                var xLength = (this.marginX * 3) + (!isLeft && !isTop && !isBottom ? this.arrowPadding : 0);
-                var direction = 'M ' + xLength + ' ' + headerSize +
-                    'L ' + (rect.width + (!isLeft && !isTop && !isBottom ? this.arrowPadding : 0) - (this.marginX * 2)) +
-                    ' ' + headerSize;
-                var pathElement_1 = this.renderer.drawPath({
-                    'id': this.element.id + '_header_path', 'stroke-width': 1,
-                    'fill': null, 'opacity': 0.8, 'stroke': this.themeStyle.tooltipHeaderLine, 'd': direction
-                });
-                groupElement.appendChild(pathElement_1);
+        }
+        this.elementSize = new Size(width + (width > 0 ? (2 * this.marginX) : 0), height);
+        this.elementSize.width += (markerSize + markerPadding); // marker size + marker Spacing
+        var element = (parentElement.childNodes[0]);
+        if (headerContent !== '' && element) {
+            font.fontWeight = 'bold';
+            var width_1 = (this.elementSize.width + (2 * this.padding)) / 2 - measureText(headerContent, font).width / 2;
+            element.setAttribute('x', width_1.toString());
+        }
+    };
+    Tooltip.prototype.createTemplate = function (areaBounds, location) {
+        var argsData = { cancel: false, name: 'tooltipRender', tooltip: this };
+        this.trigger('tooltipRender', argsData);
+        var parent = document.getElementById(this.element.id);
+        var firstElement = parent.firstElementChild;
+        if (firstElement) {
+            firstElement.remove();
+        }
+        if (!argsData.cancel) {
+            var templateElement = this.templateFn(this.data);
+            var elem = this.createElement('div', { id: this.element.id + 'parent_template' });
+            while (templateElement && templateElement.length > 0) {
+                elem.appendChild(templateElement[0]);
             }
-            var start = this.border.width / 2;
-            var pointRect = new helper_1.Rect(start + x, start + y, rect.width - start, rect.height - start);
-            groupElement.setAttribute('opacity', '1');
+            parent.appendChild(elem);
+            var rect = this.element.getBoundingClientRect();
+            this.padding = 0;
+            this.elementSize = new Size(rect.width, rect.height);
+            var tooltipRect = this.tooltipLocation(areaBounds, location, new TooltipLocation(0, 0), new TooltipLocation(0, 0));
             if (this.enableAnimation && !this.shared && !this.isFirst) {
-                this.animateTooltipDiv(tooltipDiv, rect);
+                this.animateTooltipDiv(this.element, tooltipRect);
             }
             else {
-                this.updateDiv(tooltipDiv, rect.x, rect.y);
+                this.updateDiv(this.element, tooltipRect.x, tooltipRect.y);
             }
-            svgObject.setAttribute('height', (rect.height + this.border.width + (!((!this.inverted)) ? 0 : this.arrowPadding)).toString());
-            svgObject.setAttribute('width', (rect.width + this.border.width + (((!this.inverted)) ? 0 : this.arrowPadding)).toString());
-            svgObject.setAttribute('opacity', '1');
-            pathElement.setAttribute('d', helper_1.findDirection(this.rx, this.ry, pointRect, arrowLocation, this.arrowPadding, isTop, isBottom, isLeft, tipLocation.x, tipLocation.y, this.tipRadius));
-            if (this.enableShadow) {
-                pathElement.setAttribute('filter', ej2_base_3.Browser.isIE ? '' : 'url(#chart_shadow_tooltip)');
-                var shadow = '<filter id="chart_shadow_tooltip" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"/>';
-                shadow += '<feOffset dx="3" dy="3" result="offsetblur"/><feComponentTransfer><feFuncA type="linear" slope="0.5"/>';
-                shadow += '</feComponentTransfer><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter>';
-                var defElement = this.renderer.createDefs();
-                defElement.setAttribute('id', 'SVG_tooltip_definition');
-                groupElement.appendChild(defElement);
-                defElement.innerHTML = shadow;
+        }
+        else {
+            getElement(this.element.id + '_tooltip').remove();
+        }
+    };
+    Tooltip.prototype.sharedTooltipLocation = function (bounds, x, y) {
+        var width = this.elementSize.width + (2 * this.marginX);
+        var height = this.elementSize.height + (2 * this.marginY);
+        var tooltipRect = new Rect(x + 2 * this.padding, y - height - this.padding, width, height);
+        if (tooltipRect.y < bounds.y) {
+            tooltipRect.y += (tooltipRect.height + 2 * this.padding);
+        }
+        if (tooltipRect.x + tooltipRect.width > bounds.x + bounds.width) {
+            tooltipRect.x -= (tooltipRect.width + 4 * this.padding);
+        }
+        return tooltipRect;
+    };
+    Tooltip.prototype.tooltipLocation = function (bounds, symbolLocation, arrowLocation, tipLocation) {
+        var location = new TooltipLocation(symbolLocation.x, symbolLocation.y);
+        var width = this.elementSize.width + (2 * this.marginX);
+        var height = this.elementSize.height + (2 * this.marginY);
+        var markerHeight = this.offset;
+        var clipX = this.clipBounds.x;
+        var clipY = this.clipBounds.y;
+        var boundsX = bounds.x;
+        var boundsY = bounds.y;
+        if (!this.inverted) {
+            location = new TooltipLocation(location.x + clipX - this.elementSize.width / 2 - this.padding, location.y + clipY - this.elementSize.height - (2 * this.padding) - this.arrowPadding - markerHeight);
+            arrowLocation.x = tipLocation.x = width / 2;
+            if (location.y < boundsY || (this.isNegative)) {
+                location.y = (symbolLocation.y < 0 ? 0 : symbolLocation.y) + clipY + markerHeight;
             }
-            pathElement.setAttribute('stroke', this.border.color);
-            this.changeText(new helper_2.TooltipLocation(x, y), isBottom, !isLeft && !isTop && !isBottom, rect);
-            return new helper_1.Side(isBottom, !isLeft && !isTop && !isBottom);
-        };
-        Tooltip.prototype.changeText = function (point, isBottom, isRight, rect) {
-            var element = document.getElementById(this.element.id + '_text');
-            if (isBottom) {
-                element.setAttribute('transform', 'translate(0,' + this.arrowPadding + ')');
+            if (location.y + height + this.arrowPadding > boundsY + bounds.height) {
+                location.y = (symbolLocation.y > bounds.height ? bounds.height : symbolLocation.y)
+                    + clipY - this.elementSize.height - (2 * this.padding) - this.arrowPadding - markerHeight;
             }
-            if (isRight) {
-                element.setAttribute('transform', 'translate(' + this.arrowPadding + ' 0)');
+            tipLocation.x = width / 2;
+            if (location.x < boundsX) {
+                arrowLocation.x -= (boundsX - location.x);
+                tipLocation.x -= (boundsX - location.x);
+                location.x = boundsX;
             }
-        };
-        Tooltip.prototype.findFormattedText = function () {
-            this.formattedText = [];
-            if (this.header.replace(/<b>/g, '').replace(/<\/b>/g, '').trim() !== '') {
-                this.formattedText = this.formattedText.concat(this.header);
+            if (location.x + width > boundsX + bounds.width) {
+                arrowLocation.x += ((location.x + width) - (boundsX + bounds.width));
+                tipLocation.x += ((location.x + width) - (boundsX + bounds.width));
+                location.x -= ((location.x + width) - (boundsX + bounds.width));
             }
-            this.formattedText = this.formattedText.concat(this.content);
-        };
-        Tooltip.prototype.renderText = function (isRender) {
-            var height = 0;
-            var width = 0;
-            var subWidth = 0;
-            var size;
-            var lines;
-            var key = 'properties';
-            var font = ej2_base_2.extend({}, this.textStyle, null, true)[key];
-            var groupElement = helper_1.getElement(this.element.id + '_group');
-            var tspanElement;
-            var tspanStyle = '';
-            var line;
-            var tspanOption;
-            this.findFormattedText();
-            var headerContent = this.header.replace(/<b>/g, '').replace(/<\/b>/g, '').trim();
-            var headerSpace = (headerContent !== '') ? this.marginY : 0;
-            var isRow = true;
-            var isColumn = true;
-            this.markerPoint = [];
-            var markerSize = (this.shapes.length > 0) ? 10 : 0;
-            var markerPadding = (this.shapes.length > 0) ? 5 : 0;
-            var spaceWidth = 4;
-            var fontSize = '13px';
-            var dy = (22 / parseFloat(fontSize)) * (parseFloat(font.size));
-            if (!isRender) {
-                helper_2.removeElement(this.element.id + '_text');
-                helper_2.removeElement(this.element.id + '_header_path');
-                helper_2.removeElement(this.element.id + '_trackball_group');
-                helper_2.removeElement('SVG_tooltip_definition');
+            if (arrowLocation.x + this.arrowPadding / 2 > width - this.rx) {
+                arrowLocation.x = width - this.rx - this.arrowPadding / 2;
+                tipLocation.x = width;
+                this.tipRadius = 0;
             }
-            var options = new helper_2.TextOption(this.element.id + '_text', this.marginX * 2, (this.marginY * 2 + this.padding * 2 + (this.marginY === 2 ? 3 : 0)), 'start', '');
-            var parentElement = helper_1.textElement(options, font, null, groupElement);
-            for (var k = 0, pointsLength = this.formattedText.length; k < pointsLength; k++) {
-                var textCollection = this.formattedText[k].replace(/<(b|strong)>/g, '<b>')
-                    .replace(/<\/(b|strong)>/g, '</b>')
-                    .split(/<br.*?>/g);
-                size = helper_1.measureText(this.formattedText[k], font);
-                if ((k !== 0) || (headerContent === '')) {
-                    this.markerPoint.push((headerContent !== '' ? (this.marginY) : 0) + options.y + height);
-                }
-                for (var i = 0, len = textCollection.length; i < len; i++) {
-                    lines = textCollection[i].replace(/<b>/g, '<br><b>').replace(/<\/b>/g, '</b><br>').split('<br>');
-                    subWidth = 0;
-                    isColumn = true;
-                    height += dy;
-                    for (var k_1 = 0, len_1 = lines.length; k_1 < len_1; k_1++) {
-                        line = lines[k_1];
-                        if (line.replace(/<b>/g, '').replace(/<\/b>/g, '').trim() !== '') {
-                            subWidth += spaceWidth;
-                            if (isColumn && !isRow) {
-                                tspanOption = { x: (this.marginX * 2) + (markerSize + markerPadding),
-                                    dy: dy + ((isColumn) ? headerSpace : 0), fill: '' };
-                                headerSpace = null;
-                            }
-                            else {
-                                if (isRow && isColumn) {
-                                    tspanOption = { x: (headerContent === '') ? ((this.marginX * 2) + (markerSize + markerPadding))
-                                            : (this.marginX * 2) };
-                                }
-                                else {
-                                    tspanOption = {};
-                                }
-                            }
-                            isColumn = false;
-                            tspanElement = this.renderer.createTSpan(tspanOption, '');
-                            parentElement.appendChild(tspanElement);
-                            if (line.indexOf('<b>') > -1) {
-                                tspanStyle = 'font-weight:bold';
-                                font.fontWeight = 'bold';
-                                (tspanElement).setAttribute('fill', this.textStyle.color || this.themeStyle.tooltipBoldLabel);
-                            }
-                            else {
-                                tspanStyle = '';
-                                font.fontWeight = 'Normal';
-                                (tspanElement).setAttribute('fill', this.textStyle.color || this.themeStyle.tooltipLightLabel);
-                            }
-                            (tspanElement).textContent = line = line.replace(/<[a-zA-Z\/](.|\n)*?>/g, '');
-                            subWidth += helper_1.measureText(line, font).width;
-                            if (tspanStyle !== '') {
-                                tspanElement.setAttribute('style', tspanStyle);
-                            }
-                            isRow = false;
-                        }
-                    }
-                    subWidth -= spaceWidth;
-                    width = Math.max(width, subWidth);
-                }
+            if (arrowLocation.x - this.arrowPadding / 2 < this.rx) {
+                arrowLocation.x = this.rx + this.arrowPadding / 2;
+                tipLocation.x = 0;
+                this.tipRadius = 0;
             }
-            this.elementSize = new helper_1.Size(width + (width > 0 ? (2 * this.marginX) : 0), height);
-            this.elementSize.width += (markerSize + markerPadding);
-            var element = (parentElement.childNodes[0]);
-            if (headerContent !== '' && element) {
-                font.fontWeight = 'bold';
-                var width_1 = (this.elementSize.width + (2 * this.padding)) / 2 - helper_1.measureText(headerContent, font).width / 2;
-                element.setAttribute('x', width_1.toString());
+        }
+        else {
+            location = new TooltipLocation(location.x + clipX + markerHeight, location.y + clipY - this.elementSize.height / 2 - (this.padding));
+            arrowLocation.y = tipLocation.y = height / 2;
+            if ((location.x + width + this.arrowPadding > boundsX + bounds.width) || (this.isNegative)) {
+                location.x = (symbolLocation.x > bounds.width ? bounds.width : symbolLocation.x)
+                    + clipX - markerHeight - (width + this.arrowPadding);
             }
-        };
-        Tooltip.prototype.createTemplate = function (areaBounds, location) {
-            var argsData = { cancel: false, name: 'tooltipRender', tooltip: this };
-            this.trigger('tooltipRender', argsData);
-            var parent = document.getElementById(this.element.id);
-            var firstElement = parent.firstElementChild;
-            if (firstElement) {
-                firstElement.remove();
+            if (location.x < boundsX) {
+                location.x = (symbolLocation.x < 0 ? 0 : symbolLocation.x) + clipX + markerHeight;
             }
-            if (!argsData.cancel) {
-                var templateElement = this.templateFn(this.data);
-                var elem = ej2_base_3.createElement('div', { id: this.element.id + 'parent_template' });
-                while (templateElement && templateElement.length > 0) {
-                    elem.appendChild(templateElement[0]);
-                }
-                parent.appendChild(elem);
-                var rect = this.element.getBoundingClientRect();
-                this.padding = 0;
-                this.elementSize = new helper_1.Size(rect.width, rect.height);
-                var tooltipRect = this.tooltipLocation(areaBounds, location, new helper_2.TooltipLocation(0, 0), new helper_2.TooltipLocation(0, 0));
-                if (this.enableAnimation && !this.shared && !this.isFirst) {
-                    this.animateTooltipDiv(this.element, tooltipRect);
-                }
-                else {
-                    this.updateDiv(this.element, tooltipRect.x, tooltipRect.y);
-                }
+            if (location.y <= boundsY) {
+                arrowLocation.y -= (boundsY - location.y);
+                tipLocation.y -= (boundsY - location.y);
+                location.y = boundsY;
             }
-            else {
-                helper_1.getElement(this.element.id + '_tooltip').remove();
+            if (location.y + height >= boundsY + bounds.height) {
+                arrowLocation.y += ((location.y + height) - (boundsY + bounds.height));
+                tipLocation.y += ((location.y + height) - (boundsY + bounds.height));
+                location.y -= ((location.y + height) - (boundsY + bounds.height));
             }
-        };
-        Tooltip.prototype.sharedTooltipLocation = function (bounds, x, y) {
-            var width = this.elementSize.width + (2 * this.marginX);
-            var height = this.elementSize.height + (2 * this.marginY);
-            var tooltipRect = new helper_1.Rect(x + 2 * this.padding, y - height - this.padding, width, height);
-            if (tooltipRect.y < bounds.y) {
-                tooltipRect.y += (tooltipRect.height + 2 * this.padding);
+            if (arrowLocation.y + this.arrowPadding / 2 > height - this.ry) {
+                arrowLocation.y = height - this.ry - this.arrowPadding / 2;
+                tipLocation.y = height;
+                this.tipRadius = 0;
             }
-            if (tooltipRect.x + tooltipRect.width > bounds.x + bounds.width) {
-                tooltipRect.x -= (tooltipRect.width + 4 * this.padding);
+            if (arrowLocation.y - this.arrowPadding / 2 < this.ry) {
+                arrowLocation.y = this.ry + this.arrowPadding / 2;
+                tipLocation.y = 0;
+                this.tipRadius = 0;
             }
-            return tooltipRect;
-        };
-        Tooltip.prototype.tooltipLocation = function (bounds, symbolLocation, arrowLocation, tipLocation) {
-            var location = new helper_2.TooltipLocation(symbolLocation.x, symbolLocation.y);
-            var width = this.elementSize.width + (2 * this.marginX);
-            var height = this.elementSize.height + (2 * this.marginY);
-            var markerHeight = this.offset;
-            var clipX = this.clipBounds.x;
-            var clipY = this.clipBounds.y;
-            var boundsX = bounds.x;
-            var boundsY = bounds.y;
-            if (!this.inverted) {
-                location = new helper_2.TooltipLocation(location.x + clipX - this.elementSize.width / 2 - this.padding, location.y + clipY - this.elementSize.height - (2 * this.padding) - this.arrowPadding - markerHeight);
-                arrowLocation.x = tipLocation.x = width / 2;
-                if (location.y < boundsY || (this.isNegative)) {
-                    location.y = (symbolLocation.y < 0 ? 0 : symbolLocation.y) + clipY + markerHeight;
-                }
-                if (location.y + height + this.arrowPadding > boundsY + bounds.height) {
-                    location.y = (symbolLocation.y > bounds.height ? bounds.height : symbolLocation.y)
-                        + clipY - this.elementSize.height - (2 * this.padding) - this.arrowPadding - markerHeight;
-                }
-                tipLocation.x = width / 2;
-                if (location.x < boundsX) {
-                    arrowLocation.x -= (boundsX - location.x);
-                    tipLocation.x -= (boundsX - location.x);
-                    location.x = boundsX;
-                }
-                if (location.x + width > boundsX + bounds.width) {
-                    arrowLocation.x += ((location.x + width) - (boundsX + bounds.width));
-                    tipLocation.x += ((location.x + width) - (boundsX + bounds.width));
-                    location.x -= ((location.x + width) - (boundsX + bounds.width));
-                }
-                if (arrowLocation.x + this.arrowPadding / 2 > width - this.rx) {
-                    arrowLocation.x = width - this.rx - this.arrowPadding / 2;
-                    tipLocation.x = width;
-                    this.tipRadius = 0;
-                }
-                if (arrowLocation.x - this.arrowPadding / 2 < this.rx) {
-                    arrowLocation.x = this.rx + this.arrowPadding / 2;
-                    tipLocation.x = 0;
-                    this.tipRadius = 0;
-                }
+        }
+        return new Rect(location.x, location.y, width, height);
+    };
+    Tooltip.prototype.animateTooltipDiv = function (tooltipDiv, rect) {
+        var _this = this;
+        var x = parseFloat(tooltipDiv.style.left);
+        var y = parseFloat(tooltipDiv.style.top);
+        var currenDiff;
+        new Animation({}).animate(tooltipDiv, {
+            duration: 300,
+            progress: function (args) {
+                currenDiff = (args.timeStamp / args.duration);
+                tooltipDiv.style.animation = null;
+                tooltipDiv.style.left = (x + currenDiff * (rect.x - x)) + 'px';
+                tooltipDiv.style.top = (y + currenDiff * (rect.y - y)) + 'px';
+            },
+            end: function (model) {
+                _this.updateDiv(tooltipDiv, rect.x, rect.y);
+                _this.trigger('animationComplete', { tooltip: _this });
             }
-            else {
-                location = new helper_2.TooltipLocation(location.x + clipX + markerHeight, location.y + clipY - this.elementSize.height / 2 - (this.padding));
-                arrowLocation.y = tipLocation.y = height / 2;
-                if ((location.x + width + this.arrowPadding > boundsX + bounds.width) || (this.isNegative)) {
-                    location.x = (symbolLocation.x > bounds.width ? bounds.width : symbolLocation.x)
-                        + clipX - markerHeight - (width + this.arrowPadding);
+        });
+    };
+    Tooltip.prototype.updateDiv = function (tooltipDiv, x, y) {
+        tooltipDiv.style.left = x + 'px';
+        tooltipDiv.style.top = y + 'px';
+    };
+    Tooltip.prototype.updateTemplateFn = function () {
+        if (this.template) {
+            var e = void 0;
+            try {
+                if (document.querySelectorAll(this.template).length) {
+                    this.templateFn = templateComplier(document.querySelector(this.template).innerHTML.trim());
                 }
-                if (location.x < boundsX) {
-                    location.x = (symbolLocation.x < 0 ? 0 : symbolLocation.x) + clipX + markerHeight;
-                }
-                if (location.y <= boundsY) {
-                    arrowLocation.y -= (boundsY - location.y);
-                    tipLocation.y -= (boundsY - location.y);
-                    location.y = boundsY;
-                }
-                if (location.y + height >= boundsY + bounds.height) {
-                    arrowLocation.y += ((location.y + height) - (boundsY + bounds.height));
-                    tipLocation.y += ((location.y + height) - (boundsY + bounds.height));
-                    location.y -= ((location.y + height) - (boundsY + bounds.height));
-                }
-                if (arrowLocation.y + this.arrowPadding / 2 > height - this.ry) {
-                    arrowLocation.y = height - this.ry - this.arrowPadding / 2;
-                    tipLocation.y = height;
-                    this.tipRadius = 0;
-                }
-                if (arrowLocation.y - this.arrowPadding / 2 < this.ry) {
-                    arrowLocation.y = this.ry + this.arrowPadding / 2;
-                    tipLocation.y = 0;
-                    this.tipRadius = 0;
-                }
             }
-            return new helper_1.Rect(location.x, location.y, width, height);
-        };
-        Tooltip.prototype.animateTooltipDiv = function (tooltipDiv, rect) {
-            var _this = this;
-            var x = parseFloat(tooltipDiv.style.left);
-            var y = parseFloat(tooltipDiv.style.top);
-            var currenDiff;
-            new ej2_base_3.Animation({}).animate(tooltipDiv, {
-                duration: 300,
+            catch (e) {
+                this.templateFn = templateComplier(this.template);
+            }
+        }
+    };
+    /** @private */
+    Tooltip.prototype.fadeOut = function () {
+        var _this = this;
+        var tooltipElement = getElement(this.element.id);
+        if (tooltipElement) {
+            var tooltipGroup_1 = tooltipElement.firstChild;
+            var opacity_1 = parseFloat(tooltipGroup_1.getAttribute('opacity')) || 1;
+            new Animation({}).animate(tooltipGroup_1, {
+                duration: 200,
                 progress: function (args) {
-                    currenDiff = (args.timeStamp / args.duration);
-                    tooltipDiv.style.animation = null;
-                    tooltipDiv.style.left = (x + currenDiff * (rect.x - x)) + 'px';
-                    tooltipDiv.style.top = (y + currenDiff * (rect.y - y)) + 'px';
+                    //  tooltipGroup.removeAttribute('e-animate');
+                    _this.progressAnimation(tooltipGroup_1, opacity_1, (args.timeStamp / args.duration));
                 },
                 end: function (model) {
-                    _this.updateDiv(tooltipDiv, rect.x, rect.y);
-                    _this.trigger('animationComplete', { tooltip: _this });
+                    _this.fadeOuted = true;
+                    _this.endAnimation(tooltipGroup_1);
                 }
             });
-        };
-        Tooltip.prototype.updateDiv = function (tooltipDiv, x, y) {
-            tooltipDiv.style.left = x + 'px';
-            tooltipDiv.style.top = y + 'px';
-        };
-        Tooltip.prototype.updateTemplateFn = function () {
-            if (this.template) {
-                var e = void 0;
-                try {
-                    if (document.querySelectorAll(this.template).length) {
-                        this.templateFn = ej2_base_2.compile(document.querySelector(this.template).innerHTML.trim());
-                    }
-                }
-                catch (e) {
-                    this.templateFn = ej2_base_2.compile(this.template);
-                }
-            }
-        };
-        Tooltip.prototype.fadeOut = function () {
-            var _this = this;
-            var tooltipElement = helper_1.getElement(this.element.id);
-            if (tooltipElement) {
-                var tooltipGroup_1 = tooltipElement.firstChild;
-                var opacity_1 = parseFloat(tooltipGroup_1.getAttribute('opacity')) || 1;
-                new ej2_base_3.Animation({}).animate(tooltipGroup_1, {
-                    duration: 200,
-                    progress: function (args) {
-                        _this.progressAnimation(tooltipGroup_1, opacity_1, (args.timeStamp / args.duration));
-                    },
-                    end: function (model) {
-                        _this.fadeOuted = true;
-                        _this.endAnimation(tooltipGroup_1);
-                    }
-                });
-            }
-        };
-        Tooltip.prototype.progressAnimation = function (tooltipGroup, opacity, timeStamp) {
-            tooltipGroup.style.animation = '';
-            tooltipGroup.setAttribute('opacity', (opacity - timeStamp).toString());
-        };
-        Tooltip.prototype.endAnimation = function (tooltipGroup) {
-            tooltipGroup.setAttribute('opacity', '0');
-            if (this.template && !this.shared) {
-                tooltipGroup.style.display = 'none';
-            }
-            this.trigger('animationComplete', { tooltip: this });
-        };
-        Tooltip.prototype.getPersistData = function () {
-            var keyEntity = [];
-            return this.addOnPersist(keyEntity);
-        };
-        Tooltip.prototype.getModuleName = function () {
-            return 'tooltip';
-        };
-        Tooltip.prototype.destroy = function () {
-            _super.prototype.destroy.call(this);
-            this.element.classList.remove('e-tooltip');
-        };
-        Tooltip.prototype.onPropertyChanged = function (newProp, oldProp) {
-            this.isFirst = false;
-            this.render();
-        };
-        __decorate([
-            ej2_base_1.Property(false)
-        ], Tooltip.prototype, "enable", void 0);
-        __decorate([
-            ej2_base_1.Property(false)
-        ], Tooltip.prototype, "shared", void 0);
-        __decorate([
-            ej2_base_1.Property(true)
-        ], Tooltip.prototype, "enableShadow", void 0);
-        __decorate([
-            ej2_base_1.Property(null)
-        ], Tooltip.prototype, "fill", void 0);
-        __decorate([
-            ej2_base_1.Property('')
-        ], Tooltip.prototype, "header", void 0);
-        __decorate([
-            ej2_base_1.Property(0.75)
-        ], Tooltip.prototype, "opacity", void 0);
-        __decorate([
-            ej2_base_1.Complex({ size: '13px', fontWeight: 'Normal', color: null, fontStyle: 'Normal', fontFamily: 'Segoe UI' }, TextStyle)
-        ], Tooltip.prototype, "textStyle", void 0);
-        __decorate([
-            ej2_base_1.Property(null)
-        ], Tooltip.prototype, "template", void 0);
-        __decorate([
-            ej2_base_1.Property(true)
-        ], Tooltip.prototype, "enableAnimation", void 0);
-        __decorate([
-            ej2_base_1.Property(false)
-        ], Tooltip.prototype, "inverted", void 0);
-        __decorate([
-            ej2_base_1.Property(false)
-        ], Tooltip.prototype, "isNegative", void 0);
-        __decorate([
-            ej2_base_1.Complex({ color: '#cccccc', width: 0.5 }, TooltipBorder)
-        ], Tooltip.prototype, "border", void 0);
-        __decorate([
-            ej2_base_1.Property([])
-        ], Tooltip.prototype, "content", void 0);
-        __decorate([
-            ej2_base_1.Property(10)
-        ], Tooltip.prototype, "markerSize", void 0);
-        __decorate([
-            ej2_base_1.Complex({ x: 0, y: 0 }, ToolLocation)
-        ], Tooltip.prototype, "clipBounds", void 0);
-        __decorate([
-            ej2_base_1.Property([])
-        ], Tooltip.prototype, "palette", void 0);
-        __decorate([
-            ej2_base_1.Property([])
-        ], Tooltip.prototype, "shapes", void 0);
-        __decorate([
-            ej2_base_1.Complex({ x: 0, y: 0 }, ToolLocation)
-        ], Tooltip.prototype, "location", void 0);
-        __decorate([
-            ej2_base_1.Property(0)
-        ], Tooltip.prototype, "offset", void 0);
-        __decorate([
-            ej2_base_1.Property(2)
-        ], Tooltip.prototype, "rx", void 0);
-        __decorate([
-            ej2_base_1.Property(2)
-        ], Tooltip.prototype, "ry", void 0);
-        __decorate([
-            ej2_base_1.Property(5)
-        ], Tooltip.prototype, "marginX", void 0);
-        __decorate([
-            ej2_base_1.Property(5)
-        ], Tooltip.prototype, "marginY", void 0);
-        __decorate([
-            ej2_base_1.Property(12)
-        ], Tooltip.prototype, "arrowPadding", void 0);
-        __decorate([
-            ej2_base_1.Property(null)
-        ], Tooltip.prototype, "data", void 0);
-        __decorate([
-            ej2_base_1.Property('Material')
-        ], Tooltip.prototype, "theme", void 0);
-        __decorate([
-            ej2_base_1.Complex({ x: 0, y: 0, width: 0, height: 0 }, AreaBounds)
-        ], Tooltip.prototype, "areaBounds", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Tooltip.prototype, "tooltipRender", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Tooltip.prototype, "loaded", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Tooltip.prototype, "animationComplete", void 0);
-        Tooltip = __decorate([
-            ej2_base_1.NotifyPropertyChanges
-        ], Tooltip);
-        return Tooltip;
-    }(ej2_base_2.Component));
-    exports.Tooltip = Tooltip;
-});
+        }
+    };
+    Tooltip.prototype.progressAnimation = function (tooltipGroup, opacity, timeStamp) {
+        tooltipGroup.style.animation = '';
+        tooltipGroup.setAttribute('opacity', (opacity - timeStamp).toString());
+    };
+    /*
+     * @hidden
+     */
+    Tooltip.prototype.endAnimation = function (tooltipGroup) {
+        tooltipGroup.setAttribute('opacity', '0');
+        if (this.template && !this.shared) {
+            tooltipGroup.style.display = 'none';
+        }
+        this.trigger('animationComplete', { tooltip: this });
+    };
+    /**
+     * Get the properties to be maintained in the persisted state.
+     * @private
+     */
+    Tooltip.prototype.getPersistData = function () {
+        var keyEntity = [];
+        return this.addOnPersist(keyEntity);
+    };
+    /**
+     * Get component name
+     *  @private
+     */
+    Tooltip.prototype.getModuleName = function () {
+        return 'tooltip';
+    };
+    /**
+     * To destroy the accumulationcharts
+     * @private
+     */
+    Tooltip.prototype.destroy = function () {
+        _super.prototype.destroy.call(this);
+        this.element.classList.remove('e-tooltip');
+    };
+    /**
+     * Called internally if any of the property value changed.
+     * @return {void}
+     * @private
+     */
+    Tooltip.prototype.onPropertyChanged = function (newProp, oldProp) {
+        this.isFirst = false;
+        this.render();
+    };
+    __decorate([
+        Property(false)
+    ], Tooltip.prototype, "enable", void 0);
+    __decorate([
+        Property(false)
+    ], Tooltip.prototype, "shared", void 0);
+    __decorate([
+        Property(true)
+    ], Tooltip.prototype, "enableShadow", void 0);
+    __decorate([
+        Property(null)
+    ], Tooltip.prototype, "fill", void 0);
+    __decorate([
+        Property('')
+    ], Tooltip.prototype, "header", void 0);
+    __decorate([
+        Property(0.75)
+    ], Tooltip.prototype, "opacity", void 0);
+    __decorate([
+        Complex({ size: '13px', fontWeight: 'Normal', color: null, fontStyle: 'Normal', fontFamily: 'Segoe UI' }, TextStyle)
+    ], Tooltip.prototype, "textStyle", void 0);
+    __decorate([
+        Property(null)
+    ], Tooltip.prototype, "template", void 0);
+    __decorate([
+        Property(true)
+    ], Tooltip.prototype, "enableAnimation", void 0);
+    __decorate([
+        Property(false)
+    ], Tooltip.prototype, "inverted", void 0);
+    __decorate([
+        Property(false)
+    ], Tooltip.prototype, "isNegative", void 0);
+    __decorate([
+        Complex({ color: '#cccccc', width: 0.5 }, TooltipBorder)
+    ], Tooltip.prototype, "border", void 0);
+    __decorate([
+        Property([])
+    ], Tooltip.prototype, "content", void 0);
+    __decorate([
+        Property(10)
+    ], Tooltip.prototype, "markerSize", void 0);
+    __decorate([
+        Complex({ x: 0, y: 0 }, ToolLocation)
+    ], Tooltip.prototype, "clipBounds", void 0);
+    __decorate([
+        Property([])
+    ], Tooltip.prototype, "palette", void 0);
+    __decorate([
+        Property([])
+    ], Tooltip.prototype, "shapes", void 0);
+    __decorate([
+        Complex({ x: 0, y: 0 }, ToolLocation)
+    ], Tooltip.prototype, "location", void 0);
+    __decorate([
+        Property(0)
+    ], Tooltip.prototype, "offset", void 0);
+    __decorate([
+        Property(2)
+    ], Tooltip.prototype, "rx", void 0);
+    __decorate([
+        Property(2)
+    ], Tooltip.prototype, "ry", void 0);
+    __decorate([
+        Property(5)
+    ], Tooltip.prototype, "marginX", void 0);
+    __decorate([
+        Property(5)
+    ], Tooltip.prototype, "marginY", void 0);
+    __decorate([
+        Property(12)
+    ], Tooltip.prototype, "arrowPadding", void 0);
+    __decorate([
+        Property(null)
+    ], Tooltip.prototype, "data", void 0);
+    __decorate([
+        Property('Material')
+    ], Tooltip.prototype, "theme", void 0);
+    __decorate([
+        Complex({ x: 0, y: 0, width: 0, height: 0 }, AreaBounds)
+    ], Tooltip.prototype, "areaBounds", void 0);
+    __decorate([
+        Event()
+    ], Tooltip.prototype, "tooltipRender", void 0);
+    __decorate([
+        Event()
+    ], Tooltip.prototype, "loaded", void 0);
+    __decorate([
+        Event()
+    ], Tooltip.prototype, "animationComplete", void 0);
+    Tooltip = __decorate([
+        NotifyPropertyChanges
+    ], Tooltip);
+    return Tooltip;
+}(Component));
+export { Tooltip };

tooltip.js

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

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Number of package files

31

increased by3.33%

Worsened metrics

Total package byte prevSize

933247

decreased by-9.07%

Lines of code

4335

decreased by-0.09%

Dependency changes

• Updated@syncfusion/ej2-base@~16.2.46