@syncfusion/ej2-progressbar - npm Package Compare versions

Comparing version 18.1.36-beta to 18.1.42

dist/ej2-progressbar.umd.min.js

 /*!
 *  filename: ej2-progressbar.umd.min.js
-*  version : 18.1.36-beta
+*  version : 18.1.42
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
@@ -10,3 +10,3 @@ *  Use of this code is subject to the terms of our license.
 */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@syncfusion/ej2-base"),require("@syncfusion/ej2-svg-base")):"function"==typeof define&&define.amd?define(["exports","@syncfusion/ej2-base","@syncfusion/ej2-svg-base"],e):e(t.ej={},t.ej2Base,t.ej2SvgBase)}(this,function(t,e,i){"use strict";function r(t,e,i,r){var s=(r-90)*(Math.PI/180);return{x:t+i*Math.cos(s),y:e+i*Math.sin(s)}}function s(t,e,i,s,n,o,a){var h=r(t,e,i,s),l=r(t,e,i,n),c="0",p=o?"0":"1";c=o?(s>=n?s:s+360)-n<=180?"0":"1":(n>=s?n:n+360)-s<=180?"0":"1";return a?"M "+t+" "+e+" L "+h.x+" "+h.y+" A "+i+" "+i+"  0  "+c+" "+p+" "+l.x+" "+l.y:"M"+h.x+" "+h.y+"A"+i+" "+i+" 0 "+c+" "+p+" "+l.x+" "+l.y}function n(t,e){return null!==t&&void 0!==t?-1!==t.indexOf("%")?e/100*parseInt(t,10):parseInt(t,10):null}function o(t,e,i,r,s){var n=e+(s?-i:i);return(s?i:-i)*Math.cos(t/r*(Math.PI/2))+n}function a(t){return document.getElementById(t)}function h(t){if(!t)return null;var i="string"==typeof t?a(t):t;i&&e.remove(i)}function l(t,i,r,s){var n,a=new e.Animation({}),h=t,c=h.getAttribute("width"),p=(i.isIndeterminate?-+h.getAttribute("width"):+h.getAttribute("x")).toString(),u=i.progressRect.x+i.progressRect.width+(i.isIndeterminate?+h.getAttribute("width"):0),d=i.isIndeterminate?0:r;h.style.visibility="hidden",a.animate(h,{duration:i.animation.duration,delay:d,progress:function(t){i.enableRtl?i.isIndeterminate?t.timeStamp>=t.delay&&(h.style.visibility="visible",n=o(t.timeStamp,u-parseInt(c,10),u-parseInt(p,10),t.duration,i.enableRtl),h.setAttribute("x",n.toString())):t.timeStamp>=t.delay&&(h.style.visibility="visible",n=o(t.timeStamp,parseInt(c,10),parseInt(c,10)-parseInt(p,10),t.duration,i.enableRtl),h.setAttribute("x",n.toString())):i.isIndeterminate?t.timeStamp>=t.delay&&(h.style.visibility="visible",n=o(t.timeStamp,parseInt(p,10),u,t.duration,i.enableRtl),h.setAttribute("x",n.toString())):t.timeStamp>=t.delay&&(h.style.visibility="visible",n=o(t.timeStamp,s,parseInt(c,10),t.duration,i.enableRtl),h.setAttribute("width",n.toString()))},end:function(e){i.enableRtl?i.isIndeterminate?(h.setAttribute("x",p),l(t,i,0)):h.setAttribute("x",p):i.isIndeterminate?(h.setAttribute("x",p),l(t,i,0)):h.setAttribute("width",c),i.animation.enable&&i.labelElement.setAttribute("visibility","visible"),i.trigger("animationComplete",{value:i.value,trackColor:i.trackColor,progressColor:i.progressColor})}})}function c(t,i,r,n,o,a,h){new e.Animation({}).animate(t,{duration:2e3,delay:0,progress:function(e){r+=5,n+=5,t.setAttribute("d",s(o,a,h,r%360,n%360,i.enableRtl,!0))},end:function(e){c(t,i,r,n,o,a,h)}})}function p(t,i,r,s){var n,a,h=new e.Animation({}),l=0,c=i.annotations.length>0;c&&i.progressAnnotationModule&&(a=document.getElementById(i.element.id+"Annotation0").children[0])&&a.children[0]&&"SPAN"===a.children[0].tagName&&(n=a.children[0]);var p,u=i.totalAngle,d=i.minimum,g=i.maximum,m=r>s?s+360:s;h.animate(t,{duration:i.animation.duration,delay:i.animation.delay,progress:function(t){c&&n&&((l=o(t.timeStamp,r,i.totalAngle,t.duration,i.enableRtl))<=m?(p=parseInt(((l-r)/u*(g-d)+d).toString(),10),n.innerHTML=p?p.toString()+"%":""):n.innerHTML=i.value+"%")},end:function(t){n.innerHTML=i.value+"%"}})}function u(t,i,r,n,a,h,l,c,p,u){var d,g,m=new e.Animation({}),y=h,f=2*r*.75,v=0,S=l.annotations.length>0;S&&l.progressAnnotationModule&&(g=document.getElementById(l.element.id+"Annotation0").children[0])&&g.children[0]&&"SPAN"===g.children[0].tagName&&(d=g.children[0]);var P,R=l.totalAngle,k=l.minimum,C=l.maximum,T=n>a?a+360:a,A=l.isIndeterminate?0:p;n+="Round"!==l.cornerRadius||l.isIndeterminate?0:!0===l.enableRtl?b*c/2:-b*c/2,m.animate(y,{duration:l.animation.duration,delay:A,progress:function(e){e.timeStamp>=e.delay&&(v=o(e.timeStamp,u|n,l.totalAngle,e.duration,l.enableRtl),S&&d&&(v<=T?(P=parseInt(((v-n)/R*(C-k)+k).toString(),10),d.innerHTML=P?P.toString()+"%":""):d.innerHTML=l.value+"%"),y.setAttribute("d",s(t,i,f,n,v,l.enableRtl,!0)))},end:function(e){y.setAttribute("d",s(t,i,f,0,359.99,!1,!0)),S&&d&&(d.innerHTML=l.value+"%"),l.animation.enable&&l.labelElement.setAttribute("visibility","visible"),l.trigger("animationComplete",{value:l.value,trackColor:l.trackColor,progressColor:l.progressColor})}})}var d=function(){var t=function(e,i){return(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])})(e,i)};return function(e,i){function r(){this.constructor=e}t(e,i),e.prototype=null===i?Object.create(i):(r.prototype=i.prototype,new r)}}(),g=function(){return function(t,e,i,r){this.x=t,this.y=e,this.height=i,this.width=r}}(),m=function(){return function(t,e){this.height=t,this.width=e}}(),y=function(t){function e(e,i,r,s,n,o,a,h,l,c){var p=t.call(this,e,i,r,s,n,c)||this;return p.y=o.y,p.x=o.x,p.height=o.height,p.width=o.width,p.rx=a||0,p.ry=h||0,p.transform=l||"",p.stroke=0!==r&&""!==p.stroke?s:"transparent",p}return d(e,t),e}(i.PathOption),f="annotationRender",v=function(){return function(t,e){this.x=t,this.y=e}}(),b=.9,S="progressCompleted",P=function(){var t=function(e,i){return(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])})(e,i)};return function(e,i){function r(){this.constructor=e}t(e,i),e.prototype=null===i?Object.create(i):(r.prototype=i.prototype,new r)}}(),R=function(t,e,i,r){var s,n=arguments.length,o=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,i,r);else for(var a=t.length-1;a>=0;a--)(s=t[a])&&(o=(n<3?s(o):n>3?s(e,i,o):s(e,i))||o);return n>3&&o&&Object.defineProperty(e,i,o),o},k=function(t){function i(){return null!==t&&t.apply(this,arguments)||this}return P(i,t),R([e.Property(10)],i.prototype,"top",void 0),R([e.Property(10)],i.prototype,"bottom",void 0),R([e.Property(10)],i.prototype,"left",void 0),R([e.Property(10)],i.prototype,"right",void 0),i}(e.ChildProperty),C=function(t){function i(){return null!==t&&t.apply(this,arguments)||this}return P(i,t),R([e.Property("Normal")],i.prototype,"fontStyle",void 0),R([e.Property("16px")],i.prototype,"size",void 0),R([e.Property("Normal")],i.prototype,"fontWeight",void 0),R([e.Property("")],i.prototype,"color",void 0),R([e.Property("Segoe UI")],i.prototype,"fontFamily",void 0),R([e.Property(1)],i.prototype,"opacity",void 0),i}(e.ChildProperty),T=function(t){function i(){return null!==t&&t.apply(this,arguments)||this}return P(i,t),R([e.Property(!1)],i.prototype,"enable",void 0),R([e.Property(2e3)],i.prototype,"duration",void 0),R([e.Property(0)],i.prototype,"delay",void 0),i}(e.ChildProperty),A=function(t){function i(){return null!==t&&t.apply(this,arguments)||this}return P(i,t),R([e.Property(null)],i.prototype,"content",void 0),R([e.Property(0)],i.prototype,"annotationAngle",void 0),R([e.Property("0%")],i.prototype,"annotationRadius",void 0),i}(e.ChildProperty),w=function(){function t(t){this.control=t}return t.prototype.render=function(t,i){this.annotation=t;return e.createElement("div",{id:this.control.element.id+"Annotation"+i,styles:"position:absolute;z-index:1",innerHTML:t.content})},t.prototype.processAnnotation=function(t,e,i){var r,s;s=new v(0,0),(r=this.render(t,e))?this.setElementStyle(s,r,i):this.control.redraw&&h(r.id)},t.prototype.setElementStyle=function(t,e,i){var r={cancel:!1,name:f,content:e,location:t};if(this.control.trigger(f,r),!r.cancel){var s=this.Location(this.annotation.annotationRadius,this.annotation.annotationAngle);r.content.style.left=s.left+"px",r.content.style.top=s.top+"px",r.content.style.transform="translate(-50%, -50%)",r.content.setAttribute("aria-label","Annotation"),i.appendChild(r.content)}},t.prototype.Location=function(t,e){var i,r,s=parseFloat(t);if(0===s&&0===e){var n=this.control.progressRect;r=n.x+n.width/2,i=n.y+n.height/2}else{e-=90,e*=Math.PI/180;var o=Math.round(this.control.progressSize.width/2.25),a=Math.round(this.control.progressSize.height/2.25);r=s*Math.cos(e)+o,i=s*Math.sin(e)+a}return{top:i,left:r}},t}(),x=function(){var t=function(e,i){return(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])})(e,i)};return function(e,i){function r(){this.constructor=e}t(e,i),e.prototype=null===i?Object.create(i):(r.prototype=i.prototype,new r)}}(),E=function(t){function i(e,i){var r=t.call(this,e)||this;return r.progress=e,r.annotations=i,r}return x(i,t),i.prototype.renderAnnotations=function(t){var i=this;this.annotations=this.progress.annotations;var r=document.getElementById(this.progress.element.id+"Annotation_collections");this.parentElement=r||e.createElement("div",{id:this.progress.element.id+"Annotation_collections",styles:"position:absolute"}),this.annotations.map(function(t,e){i.processAnnotation(t,e,i.parentElement)}),r||t.appendChild(this.parentElement)},i.prototype.getModuleName=function(){return"ProgressAnnotation"},i.prototype.destroy=function(t){},i}(w),O=function(){var t=function(e,i){return(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])})(e,i)};return function(e,i){function r(){this.constructor=e}t(e,i),e.prototype=null===i?Object.create(i):(r.prototype=i.prototype,new r)}}(),F=function(t,e,i,r){var s,n=arguments.length,o=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,i,r);else for(var a=t.length-1;a>=0;a--)(s=t[a])&&(o=(n<3?s(o):n>3?s(e,i,o):s(e,i))||o);return n>3&&o&&Object.defineProperty(e,i,o),o},z=function(t){function r(e,i){return t.call(this,e,i)||this}return O(r,t),r.prototype.getModuleName=function(){return"progressbar"},r.prototype.preRender=function(){this.unWireEvents(),this.progressRect=new g(0,0,0,0),this.progressSize=new m(0,0),this.wireEvents()},r.prototype.render=function(){this.trigger("load",{progressBar:this}),this.calculateProgressBarSize(),this.calculateProgressBarBounds(),this.SetThemeValues(),this.renderAnnotations(),this.renderElements(),this.trigger("loaded",{progressBar:this}),this.renderComplete(),this.controlRenderedTimeStamp=(new Date).getTime()},r.prototype.SetThemeValues=function(){switch(this.theme){case"Bootstrap":case"Bootstrap4":this.gapWidth=this.gapWidth?this.gapWidth:4,this.cornerRadius="Auto"===this.cornerRadius?"Round":this.cornerRadius;break;default:this.cornerRadius="Auto"===this.cornerRadius?"Square":this.cornerRadius}},r.prototype.calculateProgressBarBounds=function(){this.progressRect.x=this.margin.left,this.progressRect.y=this.margin.top,this.progressRect.width-=this.margin.left+this.margin.right,this.progressRect.height-=this.margin.top+this.margin.bottom},r.prototype.calculateProgressBarSize=function(){var t=this.element.clientWidth||this.element.offsetWidth,e=this.element.clientHeight,i="Linear"===this.type?200:120,r="Linear"===this.type?30:120,s=Math.max(this.progressThickness,this.trackThickness);r="Linear"===this.type&&s>r-10?s+10:r,this.progressSize.width=n(this.width,t)||t||i,this.progressSize.height=n(this.height,e)||e||r,this.progressRect.width=this.progressSize.width,this.progressRect.height=this.progressSize.height},r.prototype.renderAnnotations=function(){this.createSecElement(),this.renderAnnotation()},r.prototype.renderElements=function(){this.element.style.display="block",this.element.style.position="relative",this.removeSvg(),this.setTheme(),this.createSVG(),this.clipPathElement(),this.createTrack(),this.createLinearProgress(),this.createCircularProgress(),this.createLabel(),this.element.appendChild(this.svgObject),this.setSecondaryElementPosition()},r.prototype.createSecElement=function(){var t=document.getElementById(this.element.id+"Secondary_Element");if(t)return t.innerHTML="",void(this.secElement=t);this.secElement=e.createElement("div",{id:this.element.id+"Secondary_Element",styles:"position: absolute"}),this.element.appendChild(this.secElement)},r.prototype.setSecondaryElementPosition=function(){var t=this.secElement,e=this.element.getBoundingClientRect(),r=i.getElement(this.svgObject.id).getBoundingClientRect();t.style.left=Math.max(r.left-e.left,0)+"px",t.style.top=Math.max(r.top-e.top,0)+"px"},r.prototype.createSVG=function(){this.renderer=new i.SvgRenderer(this.element.id),this.svgObject=this.renderer.createSvg({id:this.element.id+"SVG",width:this.progressSize.width,height:this.progressSize.height,style:"background-color:"+this.themeStyle.backgroundColor})},r.prototype.clipPathElement=function(){this.clipPath=this.renderer.createClipPath({id:this.element.id+"_clippath"}),this.bufferClipPath=this.renderer.createClipPath({id:this.element.id+"_clippathBuffer"})},r.prototype.createTrack=function(){var t,e,r,o,a,h,l,c,p,u,d,g;this.argsData={value:this.value,progressColor:this.progressColor,trackColor:this.trackColor},this.argsData.value===this.maximum?this.trigger(S,this.argsData):this.trigger("valueChanged",this.argsData),"Linear"===this.type?(e=this.progressRect.width,d=new i.PathOption(this.element.id+"_Lineartrack","none",this.trackThickness||this.themeStyle.linearTrackThickness,this.argsData.trackColor||this.themeStyle.linearTrackColor,this.themeStyle.trackOpacity,"0",this.getPathLine(this.progressRect.x,e,this.trackThickness||this.themeStyle.linearTrackThickness)),t=this.renderer.drawPath(d),this.segmentCount>1&&(this.segmentSize=this.calculateSegmentSize(e,this.trackThickness||this.themeStyle.linearTrackThickness),t.setAttribute("stroke-dasharray",this.segmentSize)),"Round"===this.cornerRadius&&t.setAttribute("stroke-linecap","round"),this.svgObject.appendChild(t)):"Circular"===this.type&&(l=this.startAngle,this.totalAngle=(this.endAngle-this.startAngle)%360,this.totalAngle=this.totalAngle<=0?360+this.totalAngle:this.totalAngle,this.totalAngle-=360===this.totalAngle?.01:0,c=(this.startAngle+(this.enableRtl?-this.totalAngle:+this.totalAngle))%360,r=this.progressRect.x+this.progressRect.width/2,o=this.progressRect.y+this.progressRect.height/2,g=Math.max(this.trackThickness,this.progressThickness)||Math.max(this.themeStyle.circularProgressThickness,this.themeStyle.circularTrackThickness),a=Math.min(this.progressRect.height,this.progressRect.width)/2-g/2,u=s(r,o,h=null===(h=n(this.radius,a))?0:h,l,c,this.enableRtl),d=new i.PathOption(this.element.id+"_Circulartrack","none",this.trackThickness||this.themeStyle.circularTrackThickness,this.argsData.trackColor||this.themeStyle.circularTrackColor,this.themeStyle.trackOpacity,"0",u),p=this.renderer.drawPath(d),this.svgObject.appendChild(p),this.trackwidth=p.getTotalLength(),this.segmentCount>1&&(this.segmentSize=this.calculateSegmentSize(this.trackwidth,this.trackThickness||this.themeStyle.linearTrackThickness),p.setAttribute("stroke-dasharray",this.segmentSize)),"Round"===this.cornerRadius&&p.setAttribute("stroke-linecap","round"))},r.prototype.createLinearProgress=function(t,e){void 0===e&&(e=0);var r,s,n,o,a,h,c,p,u;if("Linear"===this.type&&(null===this.secondaryProgress||this.isIndeterminate||(s=this.calculateProgressRange(this.minimum,this.maximum,this.secondaryProgress),n=this.progressRect.width*s,0===this.segmentColor.length||this.isIndeterminate?(o=new i.PathOption(this.element.id+"_Linearbuffer","none",this.progressThickness||this.themeStyle.linearProgressThickness,this.argsData.progressColor||this.themeStyle.linearProgressColor,this.themeStyle.bufferOpacity,"0",this.getPathLine(this.progressRect.x,n,this.progressThickness||this.themeStyle.linearProgressThickness)),r=this.renderer.drawPath(o),this.segmentCount>1&&r.setAttribute("stroke-dasharray",this.segmentSize),"Round"===this.cornerRadius&&r.setAttribute("stroke-linecap","round")):r=this.createLinearSegment("_LinearBuffer",n,this.themeStyle.bufferOpacity,this.progressThickness||this.themeStyle.linearProgressThickness),this.svgObject.appendChild(r),this.animation.enable&&(p=this.createClipPath(this.bufferClipPath,s,null,this.progressRect.x,!1,this.progressThickness||this.themeStyle.linearProgressThickness),r.setAttribute("style","clip-path:url(#"+this.element.id+"_clippathBuffer)"),l(p,this,this.animation.delay,0)),this.svgObject.appendChild(this.bufferClipPath)),null!==this.argsData.value)){if(h=this.calculateProgressRange(this.minimum,this.maximum,this.argsData.value),this.progressPreviousWidth=c=this.progressRect.width*(this.isIndeterminate?1:h),0===this.segmentColor.length||this.isIndeterminate?(t?((a=i.getElement(this.element.id+"_Linearprogress")).setAttribute("d",this.getPathLine(this.progressRect.x,c,this.progressThickness||this.themeStyle.linearProgressThickness)),a.setAttribute("stroke",this.argsData.progressColor||this.themeStyle.circularProgressColor)):(o=new i.PathOption(this.element.id+"_Linearprogress","none",this.progressThickness||this.themeStyle.linearProgressThickness,this.argsData.progressColor||this.themeStyle.linearProgressColor,this.themeStyle.progressOpacity,"0",this.getPathLine(this.progressRect.x,c,this.progressThickness||this.themeStyle.linearProgressThickness)),a=this.renderer.drawPath(o)),this.segmentCount>1&&a.setAttribute("stroke-dasharray",this.segmentSize),"Round"===this.cornerRadius&&a.setAttribute("stroke-linecap","round")):a=this.createLinearSegment("_LinearProgress",c,this.themeStyle.progressOpacity,this.progressThickness||this.themeStyle.linearProgressThickness),this.svgObject.appendChild(a),this.animation.enable||this.isIndeterminate){var d=this.animation.delay+(null!==this.secondaryProgress?n-c:0);u=this.createClipPath(this.clipPath,h,null,t?e:this.progressRect.x,t,this.progressThickness||this.themeStyle.linearProgressThickness),a.setAttribute("style","clip-path:url(#"+this.element.id+"_clippath)"),l(u,this,d,t?e:0)}this.svgObject.appendChild(this.clipPath)}},r.prototype.createCircularProgress=function(t,e,r){var o,a,h,l,p,d,g=this.startAngle;this.progressStartAngle=g;var m,y,f,v,b,S,P,R,k,C,T;if("Circular"===this.type&&(o=this.progressRect.x+this.progressRect.width/2,a=this.progressRect.y+this.progressRect.height/2,R=Math.max(this.trackThickness,this.progressThickness)||Math.max(this.themeStyle.circularProgressThickness,this.themeStyle.circularTrackThickness),h=Math.min(this.progressRect.height,this.progressRect.width)/2-R/2,p=n(this.innerRadius,h),p=null===p?0:p,null===this.secondaryProgress||this.isIndeterminate||(0===this.segmentColor.length||this.isIndeterminate?(m=s(o,a,p,g,l=this.calculateProgressRange(this.minimum,this.maximum,this.secondaryProgress),this.enableRtl),S=new i.PathOption(this.element.id+"_Circularbuffer","none",this.progressThickness||this.themeStyle.circularProgressThickness,this.argsData.progressColor||this.themeStyle.circularProgressColor,this.themeStyle.bufferOpacity,"0",m),b=this.renderer.drawPath(S),this.segmentCount>1&&(0!==(P=parseInt(this.radius,10)-parseInt(this.innerRadius,10))&&(T=this.trackwidth+(P<0?this.trackwidth*Math.abs(P)/parseInt(this.radius,10):-this.trackwidth*Math.abs(P)/parseInt(this.radius,10)),this.segmentSize=this.calculateSegmentSize(T,this.progressThickness||this.themeStyle.circularProgressThickness)),b.setAttribute("stroke-dasharray",this.segmentSize)),"Round"===this.cornerRadius&&b.setAttribute("stroke-linecap","round")):b=this.createCircularSegment("_CircularBuffer",o,a,p,this.secondaryProgress,this.themeStyle.bufferOpacity,this.progressThickness||this.themeStyle.circularProgressThickness),this.svgObject.appendChild(b),this.animation.enable&&(y=this.createClipPath(this.bufferClipPath,null,"",null,!1),b.setAttribute("style","clip-path:url(#"+this.element.id+"_clippathBuffer)"),u(o,a,p,g,0,y,this,this.progressThickness||this.themeStyle.circularProgressThickness,this.animation.delay,null)),this.svgObject.appendChild(this.bufferClipPath)),null!==this.argsData.value)){if(0===this.segmentColor.length||this.isIndeterminate?(f=this.calculateProgressRange(this.minimum,this.maximum,this.argsData.value),this.annotationEnd=f,m=s(o,a,p,g,l=this.isIndeterminate?(this.startAngle+(this.enableRtl?-this.totalAngle:+this.totalAngle))%360:f,this.enableRtl),S=new i.PathOption(this.element.id+"_Circularprogress","none",this.progressThickness||this.themeStyle.circularProgressThickness,this.argsData.progressColor||this.themeStyle.circularProgressColor,this.themeStyle.progressOpacity,"0",m),r?(d=(v=i.getElement(this.element.id+"_Circularprogress")).getAttribute("d"),v.setAttribute("d",m),v.setAttribute("stroke",this.argsData.progressColor||this.themeStyle.circularProgressColor)):v=this.renderer.drawPath(S),this.segmentCount>1&&(0!==(C=parseInt(this.radius,10)-parseInt(this.innerRadius,10))&&(T=this.trackwidth+(C<0?this.trackwidth*Math.abs(C)/parseInt(this.radius,10):-this.trackwidth*Math.abs(C)/parseInt(this.radius,10)),this.segmentSize=this.calculateSegmentSize(T,this.progressThickness||this.themeStyle.circularProgressThickness)),v.setAttribute("stroke-dasharray",this.segmentSize)),"Round"===this.cornerRadius&&v.setAttribute("stroke-linecap","round")):v=this.createCircularSegment("_CircularProgress",o,a,p,this.argsData.value,this.themeStyle.progressOpacity,this.progressThickness||this.themeStyle.circularProgressThickness),this.progressEndAngle=l,r||this.svgObject.appendChild(v),this.animation.enable&&!this.isIndeterminate){var A=null!==this.secondaryProgress?300:this.animation.delay;k=this.createClipPath(this.clipPath,null,r?d:"",null,r),v.setAttribute("style","clip-path:url(#"+this.element.id+"_clippath)"),u(o,a,p,g,f,k,this,this.progressThickness||this.themeStyle.circularProgressThickness,A,r?e:null)}if(this.isIndeterminate){var w=2*p*.75,x=s(o,a,w,g,f,this.enableRtl,!0),E=new i.PathOption(this.element.id+"_clippathcircle","transparent",10,"transparent",1,"0",x),O=this.renderer.drawPath(E);this.clipPath.appendChild(O),v.setAttribute("style","clip-path:url(#"+this.element.id+"_clippath)"),c(O,this,g,f,o,a,w)}this.svgObject.appendChild(this.clipPath)}},r.prototype.createLabel=function(){var t,e=this.animation.enable;if("Linear"===this.type&&this.showProgressValue){var r=void 0,s=void 0,n=void 0,o=this.calculateProgressRange(this.minimum,this.maximum,this.value);this.value===this.maximum&&(s=100,n=this.progressRect.width*o-10),(this.value>this.maximum||this.value<this.minimum||this.value===this.minimum)&&(s=0,n=this.progressRect.width*o+10),this.value>this.minimum&&this.value<this.maximum&&(s=Math.round(100*this.value/(this.maximum-this.minimum)),n=this.progressRect.width*o-10);var a={cancel:!1,text:this.label?this.label:String(s)+"%",color:this.labelStyle.color};if(this.trigger("textRender",a),!a.cancel){t=i.measureText(a.text,this.labelStyle);var h={id:this.element.id+"_linearLabel","font-size":this.labelStyle.size||this.themeStyle.linearFontSize,"font-style":this.labelStyle.fontStyle||this.themeStyle.linearFontStyle,"font-family":this.labelStyle.fontFamily||this.themeStyle.linearFontFamily,"font-weight":this.labelStyle.fontWeight,fill:a.color||this.themeStyle.fontColor,x:n,y:this.progressRect.y+this.progressRect.height/2+t.height/4,"text-anchor":"middle",visibility:e?"hidden":"visible"};r=this.renderer.createText(h,a.text),this.labelElement=r,this.svgObject.appendChild(r)}}else if("Circular"===this.type&&this.showProgressValue){var l=void 0,c=void 0,p=this.progressRect.x+this.progressRect.width/2,u=this.progressRect.y+this.progressRect.height/2;(this.value===this.minimum||this.value>this.maximum)&&(c=0),this.value===this.maximum&&(c=100),this.value>this.minimum&&this.value<this.maximum&&(c=Math.round(100*this.value/(this.maximum-this.minimum)));a={cancel:!1,text:this.label?this.label:String(c)+"%",color:this.labelStyle.color};if(this.trigger("textRender",a),!a.cancel){t=i.measureText(a.text,this.labelStyle);h={id:this.element.id+"_circularLabel",fill:a.color||this.themeStyle.fontColor,"font-size":this.labelStyle.size||this.themeStyle.circularFontSize,"font-style":this.labelStyle.fontStyle||this.themeStyle.circularFontStyle,"font-family":this.labelStyle.fontFamily||this.themeStyle.circularFontFamily,"font-weight":this.labelStyle.fontWeight,height:this.progressRect.height,width:this.progressRect.width,visibility:e?"hidden":"visible",x:p,y:u+t.height/2,"text-anchor":"middle"};l=this.renderer.createText(h,a.text),this.labelElement=l,this.svgObject.appendChild(l)}}},r.prototype.getPathLine=function(t,e,i){var r=this.enableRtl?"Round"===this.cornerRadius?t+this.progressRect.width-b/2*i:t+this.progressRect.width:"Round"===this.cornerRadius?t+b/2*i:t,s=this.enableRtl?"Round"===this.cornerRadius?r-e+b*i:r-e:"Round"===this.cornerRadius?r+e-b*i:r+e;return"M"+r+" "+(this.progressRect.y+this.progressRect.height/2)+"L"+s+" "+(this.progressRect.y+this.progressRect.height/2)},r.prototype.calculateProgressRange=function(t,e,i){var r;return"Linear"===this.type?(r=(i-t)/(e-t),i<t||i>e?0:r):(r=(i-t)/(e-t)*this.totalAngle,r=(this.startAngle+(this.enableRtl?-r:+r))%360,i<t||i>e?this.startAngle:r)},r.prototype.calculateSegmentSize=function(t,e){var i="Circular"===this.type&&359.99===this.totalAngle?this.segmentCount:this.segmentCount-1,r=359.99===this.totalAngle||"Linear"===this.type?this.segmentCount:this.segmentCount-1,s=this.gapWidth||("Linear"===this.type?this.themeStyle.linearGapWidth:this.themeStyle.circularGapWidth),n=t-i*s;return n=(n-("Round"===this.cornerRadius?r*(b*e):0))/this.segmentCount,s+="Round"===this.cornerRadius?b*e:0," "+n+" "+s},r.prototype.createClipPath=function(t,e,r,s,n,o){var a,h,l;return"Linear"===this.type?n?a=i.getElement(this.element.id+"_clippathrect"):(h=new y(this.element.id+"_clippathrect","transparent",1,"transparent",1,new g("Round"===this.cornerRadius?this.progressRect.x-b/2*o:s,0,this.progressSize.height,this.isIndeterminate?this.progressRect.width*e:"Round"===this.cornerRadius?this.progressRect.width*e+b*o:this.progressRect.width*e)),a=this.renderer.drawRectangle(h),t.appendChild(a)):n?(a=i.getElement(this.element.id+"_clippathcircle")).setAttribute("d",r):(l=new i.PathOption(this.element.id+"_clippathcircle","transparent",10,"transparent",1,"0",r),a=this.renderer.drawPath(l),t.appendChild(a)),a},r.prototype.createLinearSegment=function(t,e,r,s){var n=this.enableRtl?"Round"===this.cornerRadius?this.progressRect.x+this.progressRect.width-b/2*s:this.progressRect.x+this.progressRect.width:"Round"===this.cornerRadius?this.progressRect.x+b/2*s:this.progressRect.x,o=this.progressRect.y+this.progressRect.height/2,a=this.gapWidth||this.themeStyle.linearGapWidth,h=this.progressRect.width/this.segmentCount,l=this.progressRect.width-(this.segmentCount-1)*a;l=(l-("Round"===this.cornerRadius?this.segmentCount*(b*s):0))/this.segmentCount;for(var c,p,u,d,g="Round"===this.cornerRadius?a+b*s:a,m=this.renderer.createGroup({id:this.element.id+t+"Group"}),y=Math.ceil(e/h),f=0,v="Round"===this.cornerRadius?e-b*s:e,S=this.progressThickness||this.themeStyle.linearProgressThickness,P=0;P<y;P++)c=v<l?v:l,f<this.segmentColor.length?(p=this.segmentColor[f],f++):(f=0,p=this.segmentColor[f],f++),u=new i.PathOption(this.element.id+t+P,"none",S,p,r,"0",this.getLinearSegmentPath(n,o,c)),d=this.renderer.drawPath(u),"Round"===this.cornerRadius&&d.setAttribute("stroke-linecap","round"),m.appendChild(d),n+=this.enableRtl?-l-g:l+g,v=(v-=l+g)<0?0:v;return m},r.prototype.getLinearSegmentPath=function(t,e,i){return"M "+t+" "+e+" L"+(t+(this.enableRtl?-i:i))+" "+e},r.prototype.createCircularSegment=function(t,e,r,n,o,a,h){var l=this.startAngle,c=this.widthToAngle(this.minimum,this.maximum,o);c-="Round"===this.cornerRadius&&359.99===this.totalAngle?this.widthToAngle(0,this.trackwidth,b/2*h):0;var p=this.trackwidth-(359.99===this.totalAngle?this.segmentCount:this.segmentCount-1)*(this.gapWidth||this.themeStyle.circularGapWidth);p=(p-("Round"===this.cornerRadius?(359.99===this.totalAngle?this.segmentCount:this.segmentCount-1)*b*h:0))/this.segmentCount;var u=this.widthToAngle(0,this.trackwidth,this.trackwidth/this.segmentCount);u-="Round"===this.cornerRadius&&359.99===this.totalAngle?this.widthToAngle(0,this.trackwidth,b/2*h):0;var d=this.widthToAngle(0,this.trackwidth,p),g=this.widthToAngle(0,this.trackwidth,this.gapWidth||this.themeStyle.circularGapWidth);g+="Round"===this.cornerRadius?this.widthToAngle(0,this.trackwidth,b*h):0;for(var m,y,f,v,S,P=this.renderer.createGroup({id:this.element.id+t+"Group"}),R=Math.floor(c/u),k=Math.ceil((c-g*R)/d),C=(l+(this.enableRtl?-d:d))%360,T=0,A=this.progressThickness||this.themeStyle.circularProgressThickness,w=0;w<k;w++)m=s(e,r,n,l,f=this.enableRtl?this.startAngle-c>C?this.startAngle-c:C:this.startAngle+c<C?this.startAngle+c:C,this.enableRtl),T<this.segmentColor.length?(v=this.segmentColor[T],T++):(T=0,v=this.segmentColor[T],T++),S=new i.PathOption(this.element.id+t+w,"none",A,v,a,"0",m),y=this.renderer.drawPath(S),"Round"===this.cornerRadius&&y.setAttribute("stroke-linecap","round"),P.appendChild(y),l=f+(this.enableRtl?-g:g),C+=this.enableRtl?-d-g:d+g;return P},r.prototype.widthToAngle=function(t,e,i){return(i-t)/(e-t)*this.totalAngle},r.prototype.setTheme=function(){this.themeStyle=function(t){var e;switch(t){case"Material":e={linearTrackColor:"#E3165B",linearProgressColor:"#E3165B",circularTrackColor:"#E3165B",circularProgressColor:"#E3165B",backgroundColor:"transparent",fontColor:"#000000",linearFontFamily:"Roboto",linearFontSize:12,linearFontStyle:"Regular",circularFontFamily:"Roboto",circularFontStyle:"Normal",circularFontSize:20,progressOpacity:1,trackOpacity:.26,bufferOpacity:.4,linearGapWidth:4,circularGapWidth:4,linearTrackThickness:4,linearProgressThickness:4,circularTrackThickness:4,circularProgressThickness:4};break;case"Bootstrap":e={linearTrackColor:"#EEEEEE",linearProgressColor:"#317ab9",circularTrackColor:"#EEEEEE",circularProgressColor:"#317ab9",backgroundColor:"transparent",fontColor:"#000000",linearFontFamily:"Helvetica",linearFontStyle:"Regular",linearFontSize:12,circularFontFamily:"Segoe UI",circularFontStyle:"Normal",circularFontSize:20,progressOpacity:1,trackOpacity:1,bufferOpacity:.44,linearGapWidth:4,circularGapWidth:4,linearTrackThickness:20,linearProgressThickness:20,circularTrackThickness:6,circularProgressThickness:6};break;case"Bootstrap4":e={linearTrackColor:"#E9ECEF",linearProgressColor:"#007bff",circularTrackColor:"#E9ECEF",circularProgressColor:"#007bff",backgroundColor:"transparent",fontColor:"#000000",linearFontFamily:"Helvetica",linearFontStyle:"Regular",linearFontSize:12,circularFontFamily:"Helvetica",circularFontStyle:"Normal",circularFontSize:20,progressOpacity:1,trackOpacity:1,bufferOpacity:.44,linearGapWidth:4,circularGapWidth:4,linearTrackThickness:16,linearProgressThickness:16,circularTrackThickness:6,circularProgressThickness:6};break;case"HighContrast":e={linearTrackColor:"#BFBFBF",linearProgressColor:"#FFD939",circularTrackColor:"#BFBFBF",circularProgressColor:"#FFD939",backgroundColor:"transparent",fontColor:"#FFFFFF",linearFontFamily:"Segoe UI",linearFontSize:12,linearFontStyle:"Regular",circularFontFamily:"Segoe UI",circularFontStyle:"Normal",circularFontSize:20,progressOpacity:1,trackOpacity:1,bufferOpacity:.35,linearGapWidth:2,circularGapWidth:4,linearTrackThickness:2,linearProgressThickness:2,circularTrackThickness:4,circularProgressThickness:4};break;default:e={linearTrackColor:"#EAEAEA",linearProgressColor:"#0078D6",circularTrackColor:"#E6E6E6",circularProgressColor:"#0078D6",backgroundColor:"transparent",fontColor:"#333333",linearFontFamily:"Segoe UI",linearFontStyle:"Regular",linearFontSize:12,circularFontFamily:"Segoe UI",circularFontStyle:"Normal",circularFontSize:20,progressOpacity:1,trackOpacity:1,bufferOpacity:.3,linearGapWidth:2,circularGapWidth:4,linearTrackThickness:2,linearProgressThickness:2,circularTrackThickness:4,circularProgressThickness:4}}return e}(this.theme)},r.prototype.renderAnnotation=function(){this.progressAnnotationModule&&this.annotations.length>0&&this.progressAnnotationModule.renderAnnotations(this.secElement)},r.prototype.progressResize=function(t){var e=this;if(!((new Date).getTime()>this.controlRenderedTimeStamp+800))return!1;var i={bar:this,name:"resized",currentSize:new m(0,0),previousSize:new m(this.progressSize.width,this.progressSize.height)};return this.resizeTo&&clearTimeout(this.resizeTo),this.resizeTo=setTimeout(function(){e.isDestroyed?clearTimeout(e.resizeTo):(i.currentSize=e.progressSize,e.trigger("resized",i),e.calculateProgressBarSize(),e.calculateProgressBarBounds(),e.secElement.innerHTML="",e.renderAnnotation(),e.renderElements())},500),!1},r.prototype.unWireEvents=function(){window.removeEventListener(e.Browser.isTouch&&"orientation"in window&&"onorientationchange"in window?"orientationchange":"resize",this.resizeBounds)},r.prototype.wireEvents=function(){this.resizeBounds=this.progressResize.bind(this),window.addEventListener(e.Browser.isTouch&&"orientation"in window&&"onorientationchange"in window?"orientationchange":"resize",this.resizeBounds)},r.prototype.removeSvg=function(){var t=document.getElementById(this.element.id+"SVG");t&&e.remove(t)},r.prototype.onPropertyChanged=function(t,e){for(var i=0,r=Object.keys(t);i<r.length;i++){switch(r[i]){case"annotations":this.secElement.innerHTML="",this.renderAnnotation();p(document.getElementById(this.element.id+"Annotation0").children[0],this,this.startAngle,this.annotationEnd);break;case"value":this.argsData={value:this.value,progressColor:this.progressColor,trackColor:this.trackColor},this.argsData.value===this.maximum?this.trigger(S,this.argsData):this.trigger("valueChanged",this.argsData),"Circular"===this.type?this.createCircularProgress(this.progressStartAngle,this.progressEndAngle,!0):this.createLinearProgress(!0,this.progressPreviousWidth)}}},r.prototype.requiredModules=function(){var t=[];return this.annotations.some(function(t){return null!==t.content})&&t.push({member:"ProgressAnnotation",args:[this]}),t},r.prototype.getPersistData=function(){return" "},r.prototype.destroy=function(){this.unWireEvents(),t.prototype.destroy.call(this),this.removeSvg(),this.svgObject=null,this.element.classList.remove("e-progressbar")},F([e.Property("Linear")],r.prototype,"type",void 0),F([e.Property(null)],r.prototype,"value",void 0),F([e.Property(null)],r.prototype,"secondaryProgress",void 0),F([e.Property(0)],r.prototype,"minimum",void 0),F([e.Property(100)],r.prototype,"maximum",void 0),F([e.Property(0)],r.prototype,"startAngle",void 0),F([e.Property(0)],r.prototype,"endAngle",void 0),F([e.Property("100%")],r.prototype,"radius",void 0),F([e.Property("100%")],r.prototype,"innerRadius",void 0),F([e.Property(1)],r.prototype,"segmentCount",void 0),F([e.Property(null)],r.prototype,"gapWidth",void 0),F([e.Property("")],r.prototype,"segmentColor",void 0),F([e.Property("Auto")],r.prototype,"cornerRadius",void 0),F([e.Property(null)],r.prototype,"height",void 0),F([e.Property(null)],r.prototype,"width",void 0),F([e.Property(!1)],r.prototype,"isIndeterminate",void 0),F([e.Property(!1)],r.prototype,"enableRtl",void 0),F([e.Property(null)],r.prototype,"trackColor",void 0),F([e.Property(null)],r.prototype,"progressColor",void 0),F([e.Property(0)],r.prototype,"trackThickness",void 0),F([e.Property(0)],r.prototype,"progressThickness",void 0),F([e.Property("Fabric")],r.prototype,"theme",void 0),F([e.Property(!1)],r.prototype,"showProgressValue",void 0),F([e.Complex({size:null,color:null,fontStyle:null,fontWeight:"Normal",fontFamily:null},C)],r.prototype,"labelStyle",void 0),F([e.Property("")],r.prototype,"label",void 0),F([e.Complex({},k)],r.prototype,"margin",void 0),F([e.Complex({},T)],r.prototype,"animation",void 0),F([e.Event()],r.prototype,"load",void 0),F([e.Event()],r.prototype,"textRender",void 0),F([e.Event()],r.prototype,"loaded",void 0),F([e.Event()],r.prototype,"valueChanged",void 0),F([e.Event()],r.prototype,"progressCompleted",void 0),F([e.Event()],r.prototype,"animationComplete",void 0),F([e.Collection([{}],A)],r.prototype,"annotations",void 0),r=F([e.NotifyPropertyChanges],r)}(e.Component);t.ProgressBar=z,t.Margin=k,t.Font=C,t.Animation=T,t.ProgressAnnotationSettings=A,t.ProgressAnnotation=E,t.Rect=g,t.Size=m,t.RectOption=y,t.degreeToLocation=r,t.getPathArc=s,t.stringToNumber=n,t.effect=o,t.annotationRender=f,t.getElement=a,t.removeElement=h,t.ProgressLocation=v,t.doLinearAnimation=l,t.doCircularIndeterminate=c,t.doAnnotationAnimation=p,t.doCircularAnimation=u,Object.defineProperty(t,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@syncfusion/ej2-base"),require("@syncfusion/ej2-svg-base")):"function"==typeof define&&define.amd?define(["exports","@syncfusion/ej2-base","@syncfusion/ej2-svg-base"],t):t(e.ej={},e.ej2Base,e.ej2SvgBase)}(this,function(e,t,r){"use strict";function i(e,t,r,i){var n=(i-90)*(Math.PI/180);return{x:e+r*Math.cos(n),y:t+r*Math.sin(n)}}function n(e,t,r,n,o,s,a){var l=i(e,t,r,n),c=i(e,t,r,o),h="0",p=s?"0":"1";h=s?(n>=o?n:n+360)-o<=180?"0":"1":(o>=n?o:o+360)-n<=180?"0":"1";return a?"M "+e+" "+t+" L "+l.x+" "+l.y+" A "+r+" "+r+"  0  "+h+" "+p+" "+c.x+" "+c.y+" Z":"M"+l.x+" "+l.y+"A"+r+" "+r+" 0 "+h+" "+p+" "+c.x+" "+c.y}function o(e,t){return null!==e&&void 0!==e?-1!==e.indexOf("%")?t/100*parseInt(e,10):parseInt(e,10):null}function s(e,t,r,i,n){var o=t+(n?-r:r);return(n?r:-r)*Math.cos(e/i*(Math.PI/2))+o}function a(e){return document.getElementById(e)}function l(e){if(!e)return null;var r="string"==typeof e?a(e):e;r&&t.remove(r)}var c=function(){var e=function(t,r){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])})(t,r)};return function(t,r){function i(){this.constructor=t}e(t,r),t.prototype=null===r?Object.create(r):(i.prototype=r.prototype,new i)}}(),h=function(){return function(e,t,r,i){this.x=e,this.y=t,this.height=r,this.width=i}}(),p=function(){return function(e,t){this.height=e,this.width=t}}(),u=function(e){function t(t,r,i,n,o,s,a,l,c,h){var p=e.call(this,t,r,i,n,o,h)||this;return p.y=s.y,p.x=s.x,p.height=s.height,p.width=s.width,p.rx=a||0,p.ry=l||0,p.transform=c||"",p.stroke=0!==i&&""!==p.stroke?n:"transparent",p}return c(t,e),t}(r.PathOption),d="annotationRender",g=function(){return function(e,t){this.x=e,this.y=t}}(),m=function(){var e=function(t,r){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])})(t,r)};return function(t,r){function i(){this.constructor=t}e(t,r),t.prototype=null===r?Object.create(r):(i.prototype=r.prototype,new i)}}(),y=function(e,t,r,i){var n,o=arguments.length,s=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,r,i);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(s=(o<3?n(s):o>3?n(t,r,s):n(t,r))||s);return o>3&&s&&Object.defineProperty(t,r,s),s},f=function(e){function r(){return null!==e&&e.apply(this,arguments)||this}return m(r,e),y([t.Property(10)],r.prototype,"top",void 0),y([t.Property(10)],r.prototype,"bottom",void 0),y([t.Property(10)],r.prototype,"left",void 0),y([t.Property(10)],r.prototype,"right",void 0),r}(t.ChildProperty),v=function(e){function r(){return null!==e&&e.apply(this,arguments)||this}return m(r,e),y([t.Property("Normal")],r.prototype,"fontStyle",void 0),y([t.Property("16px")],r.prototype,"size",void 0),y([t.Property("Normal")],r.prototype,"fontWeight",void 0),y([t.Property("")],r.prototype,"color",void 0),y([t.Property("Segoe UI")],r.prototype,"fontFamily",void 0),y([t.Property(1)],r.prototype,"opacity",void 0),r}(t.ChildProperty),P=function(e){function r(){return null!==e&&e.apply(this,arguments)||this}return m(r,e),y([t.Property(!1)],r.prototype,"enable",void 0),y([t.Property(2e3)],r.prototype,"duration",void 0),y([t.Property(0)],r.prototype,"delay",void 0),r}(t.ChildProperty),b=function(e){function r(){return null!==e&&e.apply(this,arguments)||this}return m(r,e),y([t.Property(null)],r.prototype,"content",void 0),y([t.Property(0)],r.prototype,"annotationAngle",void 0),y([t.Property("0%")],r.prototype,"annotationRadius",void 0),r}(t.ChildProperty),S=359.99,C="progressCompleted",k=function(){function e(e){this.control=e}return e.prototype.render=function(e,r){this.annotation=e;return t.createElement("div",{id:this.control.element.id+"Annotation"+r,styles:"position:absolute;z-index:1",innerHTML:e.content})},e.prototype.processAnnotation=function(e,t,r){var i,n;n=new g(0,0),(i=this.render(e,t))?this.setElementStyle(n,i,r):this.control.redraw&&l(i.id)},e.prototype.setElementStyle=function(e,t,r){var i={cancel:!1,name:d,content:t,location:e};if(this.control.trigger(d,i),!i.cancel){var n=this.Location(this.annotation.annotationRadius,this.annotation.annotationAngle);i.content.style.left=n.left+"px",i.content.style.top=n.top+"px",i.content.style.transform="translate(-50%, -50%)",i.content.setAttribute("aria-label","Annotation"),r.appendChild(i.content)}},e.prototype.Location=function(e,t){var r,i,n=parseFloat(e);if(0===n&&0===t){var o=this.control.progressRect;i=o.x+o.width/2,r=o.y+o.height/2}else{t-=90,t*=Math.PI/180;var s=Math.round(this.control.progressSize.width/2.25),a=Math.round(this.control.progressSize.height/2.25);i=n*Math.cos(t)+s,r=n*Math.sin(t)+a}return{top:r,left:i}},e}(),R=function(){function e(){}return e.prototype.doLinearAnimation=function(e,r,i,n){var o=new t.Animation({}),a=e,l=a.getAttribute("width"),c=a.getAttribute("x"),h=0,p=parseInt(c,10)-parseInt(l,10);a.style.visibility="hidden",o.animate(a,{duration:r.animation.duration,delay:i,progress:function(e){r.enableRtl?e.timeStamp>=e.delay&&(a.style.visibility="visible",h=s(e.timeStamp,parseInt(c,10),parseInt(l,10),e.duration,r.enableRtl),a.setAttribute("x",h.toString())):e.timeStamp>=e.delay&&(a.style.visibility="visible",h=s(e.timeStamp,n,parseInt(l,10),e.duration,r.enableRtl),a.setAttribute("width",h.toString()))},end:function(e){r.enableRtl?a.setAttribute("x",p.toString()):a.setAttribute("width",l),r.animation.enable&&r.labelElement.setAttribute("visibility","visible"),r.trigger("animationComplete",{value:r.value,trackColor:r.trackColor,progressColor:r.progressColor})}})},e.prototype.doLinearIndeterminate=function(e,r){var i=this,n=new t.Animation({}),o=e,a=o.getAttribute("x"),l=o.getAttribute("width"),c=0,h=-parseInt(l,10),p=r.progressRect.x+r.progressRect.width+parseInt(l,10);n.animate(o,{duration:2e3,delay:0,progress:function(e){r.enableRtl?(c=s(e.timeStamp,parseInt(a,10),p,e.duration,r.enableRtl),o.setAttribute("x",c.toString())):(c=s(e.timeStamp,h,p,e.duration,r.enableRtl),o.setAttribute("x",c.toString()))},end:function(t){r.enableRtl?o.setAttribute("x",a.toString()):o.setAttribute("x",h.toString()),i.doLinearIndeterminate(e,r)}})},e.prototype.doCircularAnimation=function(e,r,i,o,a,l,c,h,p,u){var d=new t.Animation({}),g=l,m=i+h/2,y=0,f=o<Math.abs(a)?Math.abs(a):Math.abs(a)+360;f-=o,o+="Round"===c.cornerRadius&&f!==S?c.enableRtl?.45*h:-.45*h:0,f+="Round"===c.cornerRadius&&f!==S?.45*h:0,a+="Round"===c.cornerRadius&&f!==S?c.enableRtl?-.45*h:.45*h:0,d.animate(g,{duration:c.animation.duration,delay:p,progress:function(t){t.timeStamp>=t.delay&&(y=s(t.timeStamp,u|o,f,t.duration,c.enableRtl),g.setAttribute("d",n(e,r,m,o,y%360,c.enableRtl,!0)))},end:function(t){g.setAttribute("d",n(e,r,m,o,a,c.enableRtl,!0)),c.animation.enable&&c.labelElement.setAttribute("visibility","visible"),c.trigger("animationComplete",{value:c.value,trackColor:c.trackColor,progressColor:c.progressColor})}})},e.prototype.doCircularIndeterminate=function(e,r,i,o,s,a,l,c){var h=this,p=new t.Animation({}),u=l+c/2;p.animate(e,{duration:2e3,delay:0,progress:function(t){i+=r.enableRtl?-5:5,o+=r.enableRtl?-5:5,e.setAttribute("d",n(s,a,u,i%360,o%360,r.enableRtl,!0))},end:function(t){h.doCircularIndeterminate(e,r,i,o,s,a,l,c)}})},e.prototype.doAnnotationAnimation=function(e,r,i,n){var o,a,l=new t.Animation({}),c=0,h=r.annotations.length>0;h&&r.progressAnnotationModule&&(a=document.getElementById(r.element.id+"Annotation0").children[0])&&a.children[0]&&"SPAN"===a.children[0].tagName&&(o=a.children[0]);var p,u=r.totalAngle,d=r.minimum,g=r.maximum,m=i>n?n+360:n,y=m-i;l.animate(e,{duration:r.animation.duration,delay:r.animation.delay,progress:function(e){h&&o&&((c=s(e.timeStamp,i,y,e.duration,r.enableRtl))<=m?(p=parseInt(((c-i)/u*(g-d)+d).toString(),10),o.innerHTML=p?p.toString()+"%":""):o.innerHTML=r.value+"%")},end:function(e){o.innerHTML=r.value+"%"}})},e}(),T=function(){var e=function(t,r){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])})(t,r)};return function(t,r){function i(){this.constructor=t}e(t,r),t.prototype=null===r?Object.create(r):(i.prototype=r.prototype,new i)}}(),w=function(e){function r(t,r){var i=e.call(this,t)||this;return i.animation=new R,i.progress=t,i.annotations=r,i}return T(r,e),r.prototype.renderAnnotations=function(e){var r=this;this.annotations=this.progress.annotations;var i=document.getElementById(this.progress.element.id+"Annotation_collections");if(this.parentElement=i||t.createElement("div",{id:this.progress.element.id+"Annotation_collections",styles:"position:absolute"}),this.annotations.map(function(e,t){r.processAnnotation(e,t,r.parentElement)}),i||e.appendChild(this.parentElement),this.progress.animation.enable&&!this.progress.isIndeterminate){var n=document.getElementById(this.progress.element.id+"Annotation0").children[0];this.animation.doAnnotationAnimation(n,this.progress,this.progress.startAngle,this.progress.annotationEnd)}},r.prototype.getModuleName=function(){return"ProgressAnnotation"},r.prototype.destroy=function(e){},r}(k),A=function(){function e(){}return e.prototype.createLinearSegment=function(e,t,i,n,o){var s=e.enableRtl?"Round"===e.cornerRadius?e.progressRect.x+e.progressRect.width-.45*o:e.progressRect.x+e.progressRect.width:"Round"===e.cornerRadius?e.progressRect.x+.45*o:e.progressRect.x,a=e.progressRect.y+e.progressRect.height/2,l=e.gapWidth||e.themeStyle.linearGapWidth,c=e.progressRect.width/e.segmentCount,h=e.progressRect.width-(e.segmentCount-1)*l;h=(h-("Round"===e.cornerRadius?e.segmentCount*(.9*o):0))/e.segmentCount;for(var p,u,d,g,m="Round"===e.cornerRadius?l+.9*o:l,y=e.renderer.createGroup({id:e.element.id+t}),f=Math.ceil(i/c),v=0,P="Round"===e.cornerRadius?i-.9*o:i,b=e.progressThickness||e.themeStyle.linearProgressThickness,S=0;S<f;S++)p=P<h?P:h,v<e.segmentColor.length?(u=e.segmentColor[v],v++):(v=0,u=e.segmentColor[v],v++),d=new r.PathOption(e.element.id+t+S,"none",b,u,n,"0",this.getLinearSegmentPath(s,a,p,e.enableRtl)),g=e.renderer.drawPath(d),"Round"===e.cornerRadius&&g.setAttribute("stroke-linecap","round"),y.appendChild(g),s+=e.enableRtl?-h-m:h+m,P=(P-=h+m)<0?0:P;return y},e.prototype.getLinearSegmentPath=function(e,t,r,i){return"M "+e+" "+t+" L"+(e+(i?-r:r))+" "+t},e.prototype.createCircularSegment=function(e,t,i,o,s,a,l,c){var h=e.startAngle,p=e.totalAngle,u=this.widthToAngle(e.minimum,e.maximum,a,p);u-="Round"===e.cornerRadius&&e.totalAngle===S?this.widthToAngle(0,e.trackwidth,.45*c,p):0;var d=e.trackwidth-(e.totalAngle===S?e.segmentCount:e.segmentCount-1)*(e.gapWidth||e.themeStyle.circularGapWidth);d=(d-("Round"===e.cornerRadius?.9*(e.totalAngle===S?e.segmentCount:e.segmentCount-1)*c:0))/e.segmentCount;var g=this.widthToAngle(0,e.trackwidth,e.trackwidth/e.segmentCount,p);g-="Round"===e.cornerRadius&&e.totalAngle===S?this.widthToAngle(0,e.trackwidth,.45*c,p):0;var m=this.widthToAngle(0,e.trackwidth,d,p),y=this.widthToAngle(0,e.trackwidth,e.gapWidth||e.themeStyle.circularGapWidth,p);y+="Round"===e.cornerRadius?this.widthToAngle(0,e.trackwidth,.9*c,p):0;for(var f,v,P,b,C,k=e.renderer.createGroup({id:e.element.id+t}),R=Math.floor(u/g),T=Math.ceil((u-y*R)/m),w=(h+(e.enableRtl?-m:m))%360,A=0,E=e.progressThickness||e.themeStyle.circularProgressThickness,x=0;x<T;x++)f=n(i,o,s,h,P=e.enableRtl?e.startAngle-u>w?e.startAngle-u:w:e.startAngle+u<w?e.startAngle+u:w,e.enableRtl),A<e.segmentColor.length?(b=e.segmentColor[A],A++):(A=0,b=e.segmentColor[A],A++),C=new r.PathOption(e.element.id+t+x,"none",E,b,l,"0",f),v=e.renderer.drawPath(C),"Round"===e.cornerRadius&&v.setAttribute("stroke-linecap","round"),k.appendChild(v),h=P+(e.enableRtl?-y:y),w+=e.enableRtl?-m-y:m+y;return k},e.prototype.widthToAngle=function(e,t,r,i){return(r-e)/(t-e)*i},e}(),E=function(){function e(e){this.segment=new A,this.animation=new R,this.progress=e}return e.prototype.renderLinearTrack=function(){var e,t,i,n=this.progress,o=n.renderer.createGroup({id:n.element.id+"_LinearTrackGroup"});t=n.progressRect.width,i=new r.PathOption(n.element.id+"_Lineartrack","none",n.trackThickness||n.themeStyle.linearTrackThickness,n.argsData.trackColor||n.themeStyle.linearTrackColor,n.themeStyle.trackOpacity,"0",n.getPathLine(n.progressRect.x,t,n.trackThickness||n.themeStyle.linearTrackThickness)),e=n.renderer.drawPath(i),n.segmentCount>1&&(n.segmentSize=n.calculateSegmentSize(t,n.trackThickness||n.themeStyle.linearTrackThickness),e.setAttribute("stroke-dasharray",n.segmentSize)),"Round"===n.cornerRadius&&e.setAttribute("stroke-linecap","round"),o.appendChild(e),n.svgObject.appendChild(o)},e.prototype.renderLinearProgress=function(e,t){void 0===t&&(t=0);var i,n,o,s,a,l,c,h,p,u,d=this.progress;null===d.secondaryProgress||d.isIndeterminate||this.renderLinearBuffer(d),null!==d.argsData.value&&(a=d.calculateProgressRange(d.minimum,d.maximum,d.argsData.value),d.progressPreviousWidth=l=d.progressRect.width*(d.isIndeterminate?1:a),p=d.renderer.createGroup({id:d.element.id+"_LinearProgressGroup"}),0===d.segmentColor.length||d.isIndeterminate?(e?((s=r.getElement(d.element.id+"_Linearprogress")).setAttribute("d",d.getPathLine(d.progressRect.x,l,d.progressThickness||d.themeStyle.linearProgressThickness)),s.setAttribute("stroke",d.argsData.progressColor||d.themeStyle.circularProgressColor)):(o=new r.PathOption(d.element.id+"_Linearprogress","none",d.progressThickness||d.themeStyle.linearProgressThickness,d.argsData.progressColor||d.themeStyle.linearProgressColor,d.themeStyle.progressOpacity,"0",d.getPathLine(d.progressRect.x,l,d.progressThickness||d.themeStyle.linearProgressThickness)),s=d.renderer.drawPath(o)),d.segmentCount>1&&s.setAttribute("stroke-dasharray",d.segmentSize),"Round"===d.cornerRadius&&s.setAttribute("stroke-linecap","round")):s=this.segment.createLinearSegment(d,"_LinearProgressSegment",l,d.themeStyle.progressOpacity,d.progressThickness||d.themeStyle.linearProgressThickness),p.appendChild(s),d.animation.enable&&!d.isIndeterminate&&(null!==d.secondaryProgress?(n=d.calculateProgressRange(d.minimum,d.maximum,d.secondaryProgress),i=d.progressRect.width*n,u=d.animation.delay+(i-l)):u=d.animation.delay,c=d.createClipPath(d.clipPath,a,null,e?t:d.progressRect.x,e,d.progressThickness||d.themeStyle.linearProgressThickness),p.appendChild(d.clipPath),s.setAttribute("style","clip-path:url(#"+d.element.id+"_clippath)"),this.animation.doLinearAnimation(c,d,u,e?t:0)),d.isIndeterminate&&(h=d.createClipPath(d.clipPath,a,null,e?t:d.progressRect.x,e,d.progressThickness||d.themeStyle.linearProgressThickness),p.appendChild(d.clipPath),s.setAttribute("style","clip-path:url(#"+d.element.id+"_clippath)"),this.animation.doLinearIndeterminate(h,d)),d.svgObject.appendChild(p))},e.prototype.renderLinearBuffer=function(e){var t,i,n,o,s,a;i=e.calculateProgressRange(e.minimum,e.maximum,e.secondaryProgress),s=e.progressRect.width*i,o=e.renderer.createGroup({id:e.element.id+"_LinearBufferGroup"}),0===e.segmentColor.length||e.isIndeterminate?(a=new r.PathOption(e.element.id+"_Linearbuffer","none",e.progressThickness||e.themeStyle.linearProgressThickness,e.argsData.progressColor||e.themeStyle.linearProgressColor,e.themeStyle.bufferOpacity,"0",e.getPathLine(e.progressRect.x,s,e.progressThickness||e.themeStyle.linearProgressThickness)),t=e.renderer.drawPath(a),e.segmentCount>1&&t.setAttribute("stroke-dasharray",e.segmentSize),"Round"===e.cornerRadius&&t.setAttribute("stroke-linecap","round")):t=this.segment.createLinearSegment(e,"_LinearBufferSegment",s,e.themeStyle.bufferOpacity,e.progressThickness||e.themeStyle.linearProgressThickness),o.appendChild(t),e.animation.enable&&(n=e.createClipPath(e.bufferClipPath,i,null,e.progressRect.x,!1,e.progressThickness||e.themeStyle.linearProgressThickness),o.appendChild(e.bufferClipPath),t.setAttribute("style","clip-path:url(#"+e.element.id+"_clippathBuffer)"),this.animation.doLinearAnimation(n,e,e.animation.delay,0)),e.svgObject.appendChild(o)},e}(),x=function(){function e(e){this.segment=new A,this.animation=new R,this.progress=e}return e.prototype.renderCircularTrack=function(){var e,t,i,s,a,l,c,h,p,u,d,g,m=this.progress,y=m.renderer.createGroup({id:m.element.id+"_CircularTrackGroup"});a=m.startAngle,m.totalAngle=(m.endAngle-m.startAngle)%360,m.totalAngle=m.totalAngle<=0?360+m.totalAngle:m.totalAngle,m.totalAngle-=360===m.totalAngle?.01:0,l=(m.startAngle+(m.enableRtl?-m.totalAngle:+m.totalAngle))%360,e=m.progressRect.x+m.progressRect.width/2,t=m.progressRect.y+m.progressRect.height/2,p=Math.max(m.trackThickness,m.progressThickness)||Math.max(m.themeStyle.circularProgressThickness,m.themeStyle.circularTrackThickness),i=Math.min(m.progressRect.height,m.progressRect.width)/2-p/2,s=null===(s=o(m.radius,i))?0:s,d=m.enablePieProgress?m.argsData.trackColor||m.themeStyle.circularTrackColor:"none",g=m.enablePieProgress?0:m.trackThickness||m.themeStyle.circularTrackThickness,h=n(e,t,s,a,l,m.enableRtl,m.enablePieProgress),u=new r.PathOption(m.element.id+"_Circulartrack",d,g,m.argsData.trackColor||m.themeStyle.circularTrackColor,m.themeStyle.trackOpacity,"0",h),c=m.renderer.drawPath(u),m.trackwidth=c.getTotalLength(),m.segmentCount>1&&!m.enablePieProgress&&(m.segmentSize=m.calculateSegmentSize(m.trackwidth,m.trackThickness||m.themeStyle.linearTrackThickness),c.setAttribute("stroke-dasharray",m.segmentSize)),"Round"!==m.cornerRadius||m.enablePieProgress||c.setAttribute("stroke-linecap","round"),y.appendChild(c),m.svgObject.appendChild(y)},e.prototype.renderCircularProgress=function(e,t,i){var s,a,l,c,h,p,u=this.progress,d=u.startAngle;u.progressStartAngle=d;var g,m,y,f,v,P,b,S,C,k,R;if(s=u.progressRect.x+u.progressRect.width/2,a=u.progressRect.y+u.progressRect.height/2,v=Math.max(u.trackThickness,u.progressThickness)||Math.max(u.themeStyle.circularProgressThickness,u.themeStyle.circularTrackThickness),l=Math.min(u.progressRect.height,u.progressRect.width)/2-v/2,h=o(u.innerRadius,l),h=null===h?0:h,null===u.secondaryProgress||u.isIndeterminate||this.renderCircularBuffer(u,s,a,h,d),null!==u.argsData.value){if(C=u.renderer.createGroup({id:u.element.id+"_CircularProgressGroup"}),m=u.calculateProgressRange(u.minimum,u.maximum,u.argsData.value),0===u.segmentColor.length||u.isIndeterminate||u.enablePieProgress?(u.annotationEnd=m,g=n(s,a,h,d,c=u.isIndeterminate?(u.startAngle+(u.enableRtl?-u.totalAngle:+u.totalAngle))%360:m,u.enableRtl,u.enablePieProgress),k=u.enablePieProgress?u.argsData.progressColor||u.themeStyle.circularProgressColor:"none",R=u.enablePieProgress?0:u.progressThickness||u.themeStyle.circularProgressThickness,f=new r.PathOption(u.element.id+"_Circularprogress",k,R,u.argsData.progressColor||u.themeStyle.circularProgressColor,u.themeStyle.progressOpacity,"0",g),i?(p=(y=r.getElement(u.element.id+"_Circularprogress")).getAttribute("d"),y.setAttribute("d",g),y.setAttribute("stroke",u.argsData.progressColor||u.themeStyle.circularProgressColor)):y=u.renderer.drawPath(f),u.segmentCount>1&&!u.enablePieProgress&&(0!==(b=parseInt(u.radius,10)-parseInt(u.innerRadius,10))&&(S=u.trackwidth+(b<0?u.trackwidth*Math.abs(b)/parseInt(u.radius,10):-u.trackwidth*Math.abs(b)/parseInt(u.radius,10)),u.segmentSize=u.calculateSegmentSize(S,u.progressThickness||u.themeStyle.circularProgressThickness)),y.setAttribute("stroke-dasharray",u.segmentSize)),"Round"===u.cornerRadius&&y.setAttribute("stroke-linecap","round")):y=this.segment.createCircularSegment(u,"_CircularProgressSegment",s,a,h,u.argsData.value,u.themeStyle.progressOpacity,u.progressThickness||u.themeStyle.circularProgressThickness),u.progressEndAngle=c,i||(C.appendChild(y),u.svgObject.appendChild(C)),u.animation.enable&&!u.isIndeterminate){var T=null!==u.secondaryProgress?300:u.animation.delay;P=u.createClipPath(u.clipPath,null,i?p:"",null,i),C.appendChild(u.clipPath),y.setAttribute("style","clip-path:url(#"+u.element.id+"_clippath)"),this.animation.doCircularAnimation(s,a,h,d,m,P,u,u.progressThickness||u.themeStyle.circularProgressThickness,T,i?t:null)}u.isIndeterminate&&(P=u.createClipPath(u.clipPath,null,i?p:"",null,i),C.appendChild(u.clipPath),y.setAttribute("style","clip-path:url(#"+u.element.id+"_clippath)"),this.animation.doCircularIndeterminate(P,u,d,m,s,a,h,u.progressThickness||u.themeStyle.circularProgressThickness)),u.svgObject.appendChild(C)}},e.prototype.renderCircularBuffer=function(e,t,i,o,s){var a,l,c,h,p,u,d,g,m,y;p=e.renderer.createGroup({id:e.element.id+"_ CircularBufferGroup"}),l=e.calculateProgressRange(e.minimum,e.maximum,e.secondaryProgress),0===e.segmentColor.length||e.isIndeterminate||e.enablePieProgress?(u=n(t,i,o,s,l,e.enableRtl,e.enablePieProgress),m=e.enablePieProgress?e.argsData.progressColor||e.themeStyle.circularProgressColor:"none",y=e.enablePieProgress?0:e.progressThickness||e.themeStyle.circularProgressThickness,d=new r.PathOption(e.element.id+"_Circularbuffer",m,y,e.argsData.progressColor||e.themeStyle.circularProgressColor,e.themeStyle.bufferOpacity,"0",u),c=e.renderer.drawPath(d),e.segmentCount>1&&!e.enablePieProgress&&(0!==(h=parseInt(e.radius,10)-parseInt(e.innerRadius,10))&&(g=e.trackwidth+(h<0?e.trackwidth*Math.abs(h)/parseInt(e.radius,10):-e.trackwidth*Math.abs(h)/parseInt(e.radius,10)),e.segmentSize=e.calculateSegmentSize(g,e.progressThickness||e.themeStyle.circularProgressThickness)),c.setAttribute("stroke-dasharray",e.segmentSize)),"Round"===e.cornerRadius&&c.setAttribute("stroke-linecap","round")):c=this.segment.createCircularSegment(e,"_CircularBufferSegment",t,i,o,e.secondaryProgress,e.themeStyle.bufferOpacity,e.progressThickness||e.themeStyle.circularProgressThickness),p.appendChild(c),e.animation.enable&&(a=e.createClipPath(e.bufferClipPath,null,"",null,!1),p.appendChild(e.bufferClipPath),c.setAttribute("style","clip-path:url(#"+e.element.id+"_clippathBuffer)"),this.animation.doCircularAnimation(t,i,o,s,l,a,e,e.progressThickness||e.themeStyle.circularProgressThickness,e.animation.delay,null)),e.svgObject.appendChild(p)},e}(),O=function(){var e=function(t,r){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])})(t,r)};return function(t,r){function i(){this.constructor=t}e(t,r),t.prototype=null===r?Object.create(r):(i.prototype=r.prototype,new i)}}(),F=function(e,t,r,i){var n,o=arguments.length,s=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,r,i);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(s=(o<3?n(s):o>3?n(t,r,s):n(t,r))||s);return o>3&&s&&Object.defineProperty(t,r,s),s},M=function(e){function i(t,r){var i=e.call(this,t,r)||this;return i.linear=new E(i),i.circular=new x(i),i.annotateAnimation=new R,i}return O(i,e),i.prototype.getModuleName=function(){return"progressbar"},i.prototype.preRender=function(){this.unWireEvents(),this.initPrivateVariable(),this.wireEvents()},i.prototype.initPrivateVariable=function(){this.progressRect=new h(0,0,0,0),this.progressSize=new p(0,0)},i.prototype.render=function(){this.trigger("load",{progressBar:this}),this.element.style.display="block",this.element.style.position="relative",this.calculateProgressBarSize(),this.setTheme(),this.createSVG(),this.renderElements(),this.trigger("loaded",{progressBar:this}),this.renderComplete(),this.controlRenderedTimeStamp=(new Date).getTime()},i.prototype.calculateProgressBarSize=function(){var e=this.element.clientWidth||this.element.offsetWidth,t=this.element.clientHeight,r="Linear"===this.type?200:120,i="Linear"===this.type?30:120,n=Math.max(this.progressThickness,this.trackThickness);i="Linear"===this.type&&n>i-10?n+10:i,this.progressSize.width=o(this.width,e)||e||r,this.progressSize.height=o(this.height,t)||t||i,this.progressRect.x=this.margin.left,this.progressRect.y=this.margin.top,this.progressRect.width=this.progressSize.width-(this.margin.left+this.margin.right),this.progressRect.height=this.progressSize.height-(this.margin.top+this.margin.bottom)},i.prototype.renderAnnotations=function(){this.createSecElement(),this.renderAnnotation(),this.setSecondaryElementPosition()},i.prototype.renderElements=function(){this.renderTrack(),this.renderProgress(),this.renderAnnotations(),this.renderLabel()},i.prototype.createSecElement=function(){var e=document.getElementById(this.element.id+"Secondary_Element");if(e)return e.innerHTML="",void(this.secElement=e);this.secElement=t.createElement("div",{id:this.element.id+"Secondary_Element",styles:"position: absolute"}),this.element.appendChild(this.secElement)},i.prototype.setSecondaryElementPosition=function(){var e=this.secElement,t=this.element.getBoundingClientRect(),i=r.getElement(this.svgObject.id).getBoundingClientRect();e.style.left=Math.max(i.left-t.left,0)+"px",e.style.top=Math.max(i.top-t.top,0)+"px"},i.prototype.createSVG=function(){this.removeSvg(),this.renderer=new r.SvgRenderer(this.element.id),this.svgObject=this.renderer.createSvg({id:this.element.id+"SVG",width:this.progressSize.width,height:this.progressSize.height,style:"background-color:"+this.themeStyle.backgroundColor})},i.prototype.clipPathElement=function(){this.clipPath=this.renderer.createClipPath({id:this.element.id+"_clippath"}),this.bufferClipPath=this.renderer.createClipPath({id:this.element.id+"_clippathBuffer"})},i.prototype.renderTrack=function(){this.argsData={value:this.value,progressColor:this.progressColor,trackColor:this.trackColor},this.argsData.value===this.maximum?this.trigger(C,this.argsData):this.trigger("valueChanged",this.argsData),"Linear"===this.type?this.linear.renderLinearTrack():"Circular"===this.type&&this.circular.renderCircularTrack()},i.prototype.renderProgress=function(){this.clipPathElement(),"Linear"===this.type?this.linear.renderLinearProgress():"Circular"===this.type&&this.circular.renderCircularProgress(),this.element.appendChild(this.svgObject)},i.prototype.renderLabel=function(){var e,t=this.animation.enable;if("Linear"===this.type&&this.showProgressValue){var i=void 0,n=void 0,o=void 0,s=this.calculateProgressRange(this.minimum,this.maximum,this.value);this.value===this.maximum&&(n=100,o=this.progressRect.width*s-10),(this.value>this.maximum||this.value<this.minimum||this.value===this.minimum)&&(n=0,o=this.progressRect.width*s+10),this.value>this.minimum&&this.value<this.maximum&&(n=Math.round(100*this.value/(this.maximum-this.minimum)),o=this.progressRect.width*s-10);var a={cancel:!1,text:this.label?this.label:String(n)+"%",color:this.labelStyle.color};if(this.trigger("textRender",a),!a.cancel){e=r.measureText(a.text,this.labelStyle);var l={id:this.element.id+"_linearLabel","font-size":this.labelStyle.size||this.themeStyle.linearFontSize,"font-style":this.labelStyle.fontStyle||this.themeStyle.linearFontStyle,"font-family":this.labelStyle.fontFamily||this.themeStyle.linearFontFamily,"font-weight":this.labelStyle.fontWeight,fill:a.color||this.themeStyle.fontColor,x:o,y:this.progressRect.y+this.progressRect.height/2+e.height/4,"text-anchor":"middle",visibility:t?"hidden":"visible"};i=this.renderer.createText(l,a.text),this.labelElement=i,this.svgObject.appendChild(i)}}else if("Circular"===this.type&&this.showProgressValue){var c=void 0,h=void 0,p=this.progressRect.x+this.progressRect.width/2,u=this.progressRect.y+this.progressRect.height/2;(this.value===this.minimum||this.value>this.maximum)&&(h=0),this.value===this.maximum&&(h=100),this.value>this.minimum&&this.value<this.maximum&&(h=Math.round(100*this.value/(this.maximum-this.minimum)));a={cancel:!1,text:this.label?this.label:String(h)+"%",color:this.labelStyle.color};if(this.trigger("textRender",a),!a.cancel){e=r.measureText(a.text,this.labelStyle);l={id:this.element.id+"_circularLabel",fill:a.color||this.themeStyle.fontColor,"font-size":this.labelStyle.size||this.themeStyle.circularFontSize,"font-style":this.labelStyle.fontStyle||this.themeStyle.circularFontStyle,"font-family":this.labelStyle.fontFamily||this.themeStyle.circularFontFamily,"font-weight":this.labelStyle.fontWeight,height:this.progressRect.height,width:this.progressRect.width,visibility:t?"hidden":"visible",x:p,y:u+e.height/2,"text-anchor":"middle"};c=this.renderer.createText(l,a.text),this.labelElement=c,this.svgObject.appendChild(c)}}},i.prototype.getPathLine=function(e,t,r){var i=this.enableRtl?"Round"===this.cornerRadius?e+this.progressRect.width-.45*r:e+this.progressRect.width:"Round"===this.cornerRadius?e+.45*r:e,n=this.enableRtl?"Round"===this.cornerRadius?i-t+.9*r:i-t:"Round"===this.cornerRadius?i+t-.9*r:i+t;return"M"+i+" "+(this.progressRect.y+this.progressRect.height/2)+"L"+n+" "+(this.progressRect.y+this.progressRect.height/2)},i.prototype.calculateProgressRange=function(e,t,r){var i;return"Linear"===this.type?(i=(r-e)/(t-e),r<e||r>t?0:i):(i=(r-e)/(t-e)*this.totalAngle,i=(this.startAngle+(this.enableRtl?-i:+i))%360,r<e||r>t?this.startAngle:i)},i.prototype.calculateSegmentSize=function(e,t){var r="Circular"===this.type&&this.totalAngle===S?this.segmentCount:this.segmentCount-1,i=this.totalAngle===S||"Linear"===this.type?this.segmentCount:this.segmentCount-1,n=this.gapWidth||("Linear"===this.type?this.themeStyle.linearGapWidth:this.themeStyle.circularGapWidth),o=e-r*n;return o=(o-("Round"===this.cornerRadius?i*(.9*t):0))/this.segmentCount,n+="Round"===this.cornerRadius?.9*t:0," "+o+" "+n},i.prototype.createClipPath=function(e,t,i,n,o,s){var a,l,c,p,d,g;return"Linear"===this.type?o?a=r.getElement(this.element.id+"_clippathrect"):(p=this.enableRtl?n+this.progressRect.width:n,p+="Round"===this.cornerRadius?this.enableRtl?.45*s:-.45*s:0,d=this.progressRect.y+this.progressRect.height/2-s/2,g=this.progressRect.width*t,g+="Round"===this.cornerRadius?.9*s:0,l=new u(this.element.id+"_clippathrect","transparent",1,"transparent",1,new h(p,d,s,g)),a=this.renderer.drawRectangle(l),e.appendChild(a)):o?(a=r.getElement(this.element.id+"_clippathcircle")).setAttribute("d",i):(c=new r.PathOption(this.element.id+"_clippathcircle","transparent",10,"transparent",1,"0",i),a=this.renderer.drawPath(c),e.appendChild(a)),a},i.prototype.setTheme=function(){switch(this.themeStyle=function(e){var t;switch(e){case"Material":t={linearTrackColor:"#E3165B",linearProgressColor:"#E3165B",circularTrackColor:"#E3165B",circularProgressColor:"#E3165B",backgroundColor:"transparent",fontColor:"#000000",linearFontFamily:"Roboto",linearFontSize:12,linearFontStyle:"Regular",circularFontFamily:"Roboto",circularFontStyle:"Normal",circularFontSize:20,progressOpacity:1,trackOpacity:.26,bufferOpacity:.4,linearGapWidth:4,circularGapWidth:4,linearTrackThickness:4,linearProgressThickness:4,circularTrackThickness:4,circularProgressThickness:4};break;case"Bootstrap":t={linearTrackColor:"#EEEEEE",linearProgressColor:"#317ab9",circularTrackColor:"#EEEEEE",circularProgressColor:"#317ab9",backgroundColor:"transparent",fontColor:"#000000",linearFontFamily:"Helvetica",linearFontStyle:"Regular",linearFontSize:12,circularFontFamily:"Segoe UI",circularFontStyle:"Normal",circularFontSize:20,progressOpacity:1,trackOpacity:1,bufferOpacity:.44,linearGapWidth:4,circularGapWidth:4,linearTrackThickness:20,linearProgressThickness:20,circularTrackThickness:6,circularProgressThickness:6};break;case"Bootstrap4":t={linearTrackColor:"#E9ECEF",linearProgressColor:"#007bff",circularTrackColor:"#E9ECEF",circularProgressColor:"#007bff",backgroundColor:"transparent",fontColor:"#000000",linearFontFamily:"Helvetica",linearFontStyle:"Regular",linearFontSize:12,circularFontFamily:"Helvetica",circularFontStyle:"Normal",circularFontSize:20,progressOpacity:1,trackOpacity:1,bufferOpacity:.44,linearGapWidth:4,circularGapWidth:4,linearTrackThickness:16,linearProgressThickness:16,circularTrackThickness:6,circularProgressThickness:6};break;case"HighContrast":t={linearTrackColor:"#BFBFBF",linearProgressColor:"#FFD939",circularTrackColor:"#BFBFBF",circularProgressColor:"#FFD939",backgroundColor:"transparent",fontColor:"#FFFFFF",linearFontFamily:"Segoe UI",linearFontSize:12,linearFontStyle:"Regular",circularFontFamily:"Segoe UI",circularFontStyle:"Normal",circularFontSize:20,progressOpacity:1,trackOpacity:1,bufferOpacity:.35,linearGapWidth:2,circularGapWidth:4,linearTrackThickness:2,linearProgressThickness:2,circularTrackThickness:4,circularProgressThickness:4};break;default:t={linearTrackColor:"#EAEAEA",linearProgressColor:"#0078D6",circularTrackColor:"#E6E6E6",circularProgressColor:"#0078D6",backgroundColor:"transparent",fontColor:"#333333",linearFontFamily:"Segoe UI",linearFontStyle:"Regular",linearFontSize:12,circularFontFamily:"Segoe UI",circularFontStyle:"Normal",circularFontSize:20,progressOpacity:1,trackOpacity:1,bufferOpacity:.3,linearGapWidth:2,circularGapWidth:4,linearTrackThickness:2,linearProgressThickness:2,circularTrackThickness:4,circularProgressThickness:4}}return t}(this.theme),this.theme){case"Bootstrap":case"Bootstrap4":this.cornerRadius="Auto"===this.cornerRadius?"Round":this.cornerRadius;break;default:this.cornerRadius="Auto"===this.cornerRadius?"Square":this.cornerRadius}},i.prototype.renderAnnotation=function(){this.progressAnnotationModule&&this.annotations.length>0&&this.progressAnnotationModule.renderAnnotations(this.secElement)},i.prototype.progressResize=function(e){var t=this;if(!((new Date).getTime()>this.controlRenderedTimeStamp+800))return!1;var r={bar:this,name:"resized",currentSize:new p(0,0),previousSize:new p(this.progressSize.width,this.progressSize.height)};return this.resizeTo&&clearTimeout(this.resizeTo),this.resizeTo=setTimeout(function(){t.isDestroyed?clearTimeout(t.resizeTo):(r.currentSize=t.progressSize,t.trigger("resized",r),t.secElement.innerHTML="",t.calculateProgressBarSize(),t.createSVG(),t.renderElements())},500),!1},i.prototype.progressMouseClick=function(e){this.mouseEvent("mouseClick",e)},i.prototype.progressMouseDown=function(e){this.mouseEvent("mouseDown",e)},i.prototype.progressMouseMove=function(e){this.mouseEvent("mouseMove",e)},i.prototype.progressMouseUp=function(e){this.mouseEvent("mouseUp",e)},i.prototype.progressMouseLeave=function(e){this.mouseEvent("mouseLeave",e)},i.prototype.mouseEvent=function(e,t){var r=t.target;this.trigger(e,{target:r.id})},i.prototype.unWireEvents=function(){var e=t.Browser.touchStartEvent,r=t.Browser.touchMoveEvent,i=t.Browser.touchEndEvent,n=t.Browser.isPointer?"pointerleave":"mouseleave";t.EventHandler.remove(this.element,"click",this.progressMouseClick),t.EventHandler.remove(this.element,e,this.progressMouseDown),t.EventHandler.remove(this.element,r,this.progressMouseMove),t.EventHandler.remove(this.element,i,this.progressMouseUp),t.EventHandler.remove(this.element,n,this.progressMouseLeave),window.removeEventListener(t.Browser.isTouch&&"orientation"in window&&"onorientationchange"in window?"orientationchange":"resize",this.resizeBounds)},i.prototype.wireEvents=function(){var e=t.Browser.touchStartEvent,r=t.Browser.touchMoveEvent,i=t.Browser.touchEndEvent,n=t.Browser.isPointer?"pointerleave":"mouseleave";t.EventHandler.add(this.element,"click",this.progressMouseClick,this),t.EventHandler.add(this.element,e,this.progressMouseDown,this),t.EventHandler.add(this.element,r,this.progressMouseMove,this),t.EventHandler.add(this.element,i,this.progressMouseUp,this),t.EventHandler.add(this.element,n,this.progressMouseLeave,this),this.resizeBounds=this.progressResize.bind(this),window.addEventListener(t.Browser.isTouch&&"orientation"in window&&"onorientationchange"in window?"orientationchange":"resize",this.resizeBounds)},i.prototype.removeSvg=function(){var e=document.getElementById(this.element.id+"SVG");e&&t.remove(e)},i.prototype.onPropertyChanged=function(e,t){for(var r=0,i=Object.keys(e);r<i.length;r++){switch(i[r]){case"annotations":if(this.secElement.innerHTML="",this.renderAnnotation(),this.animation.enable&&!this.isIndeterminate){var n=document.getElementById(this.element.id+"Annotation0").children[0];this.annotateAnimation.doAnnotationAnimation(n,this,this.startAngle,this.annotationEnd)}break;case"value":this.argsData={value:this.value,progressColor:this.progressColor,trackColor:this.trackColor},this.argsData.value===this.maximum?this.trigger(C,this.argsData):this.trigger("valueChanged",this.argsData),"Circular"===this.type?this.circular.renderCircularProgress(this.progressStartAngle,this.progressEndAngle,!0):this.linear.renderLinearProgress(!0,this.progressPreviousWidth)}}},i.prototype.requiredModules=function(){var e=[];return this.annotations.some(function(e){return null!==e.content})&&e.push({member:"ProgressAnnotation",args:[this]}),e},i.prototype.getPersistData=function(){return" "},i.prototype.destroy=function(){this.unWireEvents(),e.prototype.destroy.call(this),this.removeSvg(),this.svgObject=null,this.element.classList.remove("e-progressbar")},F([t.Property("Linear")],i.prototype,"type",void 0),F([t.Property(null)],i.prototype,"value",void 0),F([t.Property(null)],i.prototype,"secondaryProgress",void 0),F([t.Property(0)],i.prototype,"minimum",void 0),F([t.Property(100)],i.prototype,"maximum",void 0),F([t.Property(0)],i.prototype,"startAngle",void 0),F([t.Property(0)],i.prototype,"endAngle",void 0),F([t.Property("100%")],i.prototype,"radius",void 0),F([t.Property("100%")],i.prototype,"innerRadius",void 0),F([t.Property(1)],i.prototype,"segmentCount",void 0),F([t.Property(null)],i.prototype,"gapWidth",void 0),F([t.Property("")],i.prototype,"segmentColor",void 0),F([t.Property("Auto")],i.prototype,"cornerRadius",void 0),F([t.Property(null)],i.prototype,"height",void 0),F([t.Property(null)],i.prototype,"width",void 0),F([t.Property(!1)],i.prototype,"isIndeterminate",void 0),F([t.Property(!1)],i.prototype,"enableRtl",void 0),F([t.Property(null)],i.prototype,"trackColor",void 0),F([t.Property(null)],i.prototype,"progressColor",void 0),F([t.Property(0)],i.prototype,"trackThickness",void 0),F([t.Property(0)],i.prototype,"progressThickness",void 0),F([t.Property(!1)],i.prototype,"enablePieProgress",void 0),F([t.Property("Fabric")],i.prototype,"theme",void 0),F([t.Property(!1)],i.prototype,"showProgressValue",void 0),F([t.Complex({size:null,color:null,fontStyle:null,fontWeight:"Normal",fontFamily:null},v)],i.prototype,"labelStyle",void 0),F([t.Property("")],i.prototype,"label",void 0),F([t.Complex({},f)],i.prototype,"margin",void 0),F([t.Complex({},P)],i.prototype,"animation",void 0),F([t.Event()],i.prototype,"load",void 0),F([t.Event()],i.prototype,"textRender",void 0),F([t.Event()],i.prototype,"loaded",void 0),F([t.Event()],i.prototype,"valueChanged",void 0),F([t.Event()],i.prototype,"progressCompleted",void 0),F([t.Event()],i.prototype,"animationComplete",void 0),F([t.Event()],i.prototype,"mouseClick",void 0),F([t.Event()],i.prototype,"mouseMove",void 0),F([t.Event()],i.prototype,"mouseUp",void 0),F([t.Event()],i.prototype,"mouseDown",void 0),F([t.Event()],i.prototype,"mouseLeave",void 0),F([t.Collection([{}],b)],i.prototype,"annotations",void 0),i=F([t.NotifyPropertyChanges],i)}(t.Component);e.ProgressBar=M,e.Margin=f,e.Font=v,e.Animation=P,e.ProgressAnnotationSettings=b,e.ProgressAnnotation=w,e.Rect=h,e.Size=p,e.RectOption=u,e.degreeToLocation=i,e.getPathArc=n,e.stringToNumber=o,e.effect=s,e.annotationRender=d,e.getElement=a,e.removeElement=l,e.ProgressLocation=g,e.ProgressAnimation=R,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=ej2-progressbar.umd.min.js.map

dist/global/ej2-progressbar.min.js

 /*!
 *  filename: ej2-progressbar.min.js
-*  version : 18.1.36-beta
+*  version : 18.1.42
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
@@ -10,3 +10,3 @@ *  Use of this code is subject to the terms of our license.
 */
-this.ej=this.ej||{},this.ej.progressbar=function(t,e,i){"use strict";function r(t,e,i,r){var s=(r-90)*(Math.PI/180);return{x:t+i*Math.cos(s),y:e+i*Math.sin(s)}}function s(t,e,i,s,n,o,a){var h=r(t,e,i,s),l=r(t,e,i,n),c="0",p=o?"0":"1";c=o?(s>=n?s:s+360)-n<=180?"0":"1":(n>=s?n:n+360)-s<=180?"0":"1";return a?"M "+t+" "+e+" L "+h.x+" "+h.y+" A "+i+" "+i+"  0  "+c+" "+p+" "+l.x+" "+l.y:"M"+h.x+" "+h.y+"A"+i+" "+i+" 0 "+c+" "+p+" "+l.x+" "+l.y}function n(t,e){return null!==t&&void 0!==t?-1!==t.indexOf("%")?e/100*parseInt(t,10):parseInt(t,10):null}function o(t,e,i,r,s){var n=s?i:-i,o=e+(s?-i:i);return n*Math.cos(t/r*(Math.PI/2))+o}function a(t){return document.getElementById(t)}function h(t){if(!t)return null;var i="string"==typeof t?a(t):t;i&&e.remove(i)}function l(t,i,r,s){var n,a=new e.Animation({}),h=t,c=h.getAttribute("width"),p=(i.isIndeterminate?-+h.getAttribute("width"):+h.getAttribute("x")).toString(),u=i.progressRect.x+i.progressRect.width+(i.isIndeterminate?+h.getAttribute("width"):0),d=i.isIndeterminate?0:r;h.style.visibility="hidden",a.animate(h,{duration:i.animation.duration,delay:d,progress:function(t){i.enableRtl?i.isIndeterminate?t.timeStamp>=t.delay&&(h.style.visibility="visible",n=o(t.timeStamp,u-parseInt(c,10),u-parseInt(p,10),t.duration,i.enableRtl),h.setAttribute("x",n.toString())):t.timeStamp>=t.delay&&(h.style.visibility="visible",n=o(t.timeStamp,parseInt(c,10),parseInt(c,10)-parseInt(p,10),t.duration,i.enableRtl),h.setAttribute("x",n.toString())):i.isIndeterminate?t.timeStamp>=t.delay&&(h.style.visibility="visible",n=o(t.timeStamp,parseInt(p,10),u,t.duration,i.enableRtl),h.setAttribute("x",n.toString())):t.timeStamp>=t.delay&&(h.style.visibility="visible",n=o(t.timeStamp,s,parseInt(c,10),t.duration,i.enableRtl),h.setAttribute("width",n.toString()))},end:function(e){i.enableRtl?i.isIndeterminate?(h.setAttribute("x",p),l(t,i,0)):h.setAttribute("x",p):i.isIndeterminate?(h.setAttribute("x",p),l(t,i,0)):h.setAttribute("width",c),i.animation.enable&&i.labelElement.setAttribute("visibility","visible"),i.trigger("animationComplete",{value:i.value,trackColor:i.trackColor,progressColor:i.progressColor})}})}function c(t,i,r,n,o,a,h){new e.Animation({}).animate(t,{duration:2e3,delay:0,progress:function(e){r+=5,n+=5,t.setAttribute("d",s(o,a,h,r%360,n%360,i.enableRtl,!0))},end:function(e){c(t,i,r,n,o,a,h)}})}function p(t,i,r,s){var n,a,h=new e.Animation({}),l=0,c=i.annotations.length>0;c&&i.progressAnnotationModule&&(a=document.getElementById(i.element.id+"Annotation0").children[0])&&a.children[0]&&"SPAN"===a.children[0].tagName&&(n=a.children[0]);var p,u=i.totalAngle,d=i.minimum,g=i.maximum,m=r>s?s+360:s;h.animate(t,{duration:i.animation.duration,delay:i.animation.delay,progress:function(t){c&&n&&((l=o(t.timeStamp,r,i.totalAngle,t.duration,i.enableRtl))<=m?(p=parseInt(((l-r)/u*(g-d)+d).toString(),10),n.innerHTML=p?p.toString()+"%":""):n.innerHTML=i.value+"%")},end:function(t){n.innerHTML=i.value+"%"}})}function u(t,i,r,n,a,h,l,c,p,u){var d,g,m=new e.Animation({}),y=h,f=2*r*.75,v=0,S=l.annotations.length>0;S&&l.progressAnnotationModule&&(g=document.getElementById(l.element.id+"Annotation0").children[0])&&g.children[0]&&"SPAN"===g.children[0].tagName&&(d=g.children[0]);var P,R=l.totalAngle,k=l.minimum,C=l.maximum,T=n>a?a+360:a,A=l.isIndeterminate?0:p;n+="Round"!==l.cornerRadius||l.isIndeterminate?0:!0===l.enableRtl?b*c/2:-b*c/2,m.animate(y,{duration:l.animation.duration,delay:A,progress:function(e){e.timeStamp>=e.delay&&(v=o(e.timeStamp,u|n,l.totalAngle,e.duration,l.enableRtl),S&&d&&(v<=T?(P=parseInt(((v-n)/R*(C-k)+k).toString(),10),d.innerHTML=P?P.toString()+"%":""):d.innerHTML=l.value+"%"),y.setAttribute("d",s(t,i,f,n,v,l.enableRtl,!0)))},end:function(e){y.setAttribute("d",s(t,i,f,0,359.99,!1,!0)),S&&d&&(d.innerHTML=l.value+"%"),l.animation.enable&&l.labelElement.setAttribute("visibility","visible"),l.trigger("animationComplete",{value:l.value,trackColor:l.trackColor,progressColor:l.progressColor})}})}function d(t){var e;switch(t){case"Material":e={linearTrackColor:"#E3165B",linearProgressColor:"#E3165B",circularTrackColor:"#E3165B",circularProgressColor:"#E3165B",backgroundColor:"transparent",fontColor:"#000000",linearFontFamily:"Roboto",linearFontSize:12,linearFontStyle:"Regular",circularFontFamily:"Roboto",circularFontStyle:"Normal",circularFontSize:20,progressOpacity:1,trackOpacity:.26,bufferOpacity:.4,linearGapWidth:4,circularGapWidth:4,linearTrackThickness:4,linearProgressThickness:4,circularTrackThickness:4,circularProgressThickness:4};break;case"Bootstrap":e={linearTrackColor:"#EEEEEE",linearProgressColor:"#317ab9",circularTrackColor:"#EEEEEE",circularProgressColor:"#317ab9",backgroundColor:"transparent",fontColor:"#000000",linearFontFamily:"Helvetica",linearFontStyle:"Regular",linearFontSize:12,circularFontFamily:"Segoe UI",circularFontStyle:"Normal",circularFontSize:20,progressOpacity:1,trackOpacity:1,bufferOpacity:.44,linearGapWidth:4,circularGapWidth:4,linearTrackThickness:20,linearProgressThickness:20,circularTrackThickness:6,circularProgressThickness:6};break;case"Bootstrap4":e={linearTrackColor:"#E9ECEF",linearProgressColor:"#007bff",circularTrackColor:"#E9ECEF",circularProgressColor:"#007bff",backgroundColor:"transparent",fontColor:"#000000",linearFontFamily:"Helvetica",linearFontStyle:"Regular",linearFontSize:12,circularFontFamily:"Helvetica",circularFontStyle:"Normal",circularFontSize:20,progressOpacity:1,trackOpacity:1,bufferOpacity:.44,linearGapWidth:4,circularGapWidth:4,linearTrackThickness:16,linearProgressThickness:16,circularTrackThickness:6,circularProgressThickness:6};break;case"HighContrast":e={linearTrackColor:"#BFBFBF",linearProgressColor:"#FFD939",circularTrackColor:"#BFBFBF",circularProgressColor:"#FFD939",backgroundColor:"transparent",fontColor:"#FFFFFF",linearFontFamily:"Segoe UI",linearFontSize:12,linearFontStyle:"Regular",circularFontFamily:"Segoe UI",circularFontStyle:"Normal",circularFontSize:20,progressOpacity:1,trackOpacity:1,bufferOpacity:.35,linearGapWidth:2,circularGapWidth:4,linearTrackThickness:2,linearProgressThickness:2,circularTrackThickness:4,circularProgressThickness:4};break;default:e={linearTrackColor:"#EAEAEA",linearProgressColor:"#0078D6",circularTrackColor:"#E6E6E6",circularProgressColor:"#0078D6",backgroundColor:"transparent",fontColor:"#333333",linearFontFamily:"Segoe UI",linearFontStyle:"Regular",linearFontSize:12,circularFontFamily:"Segoe UI",circularFontStyle:"Normal",circularFontSize:20,progressOpacity:1,trackOpacity:1,bufferOpacity:.3,linearGapWidth:2,circularGapWidth:4,linearTrackThickness:2,linearProgressThickness:2,circularTrackThickness:4,circularProgressThickness:4}}return e}var g=function(){var t=function(e,i){return(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])})(e,i)};return function(e,i){function r(){this.constructor=e}t(e,i),e.prototype=null===i?Object.create(i):(r.prototype=i.prototype,new r)}}(),m=function(){function t(t,e,i,r){this.x=t,this.y=e,this.height=i,this.width=r}return t}(),y=function(){function t(t,e){this.height=t,this.width=e}return t}(),f=function(t){function e(e,i,r,s,n,o,a,h,l,c){var p=t.call(this,e,i,r,s,n,c)||this;return p.y=o.y,p.x=o.x,p.height=o.height,p.width=o.width,p.rx=a||0,p.ry=h||0,p.transform=l||"",p.stroke=0!==r&&""!==p.stroke?s:"transparent",p}return g(e,t),e}(i.PathOption),v=function(){function t(t,e){this.x=t,this.y=e}return t}(),b=.9,S=function(){var t=function(e,i){return(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])})(e,i)};return function(e,i){function r(){this.constructor=e}t(e,i),e.prototype=null===i?Object.create(i):(r.prototype=i.prototype,new r)}}(),P=function(t,e,i,r){var s,n=arguments.length,o=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,i,r);else for(var a=t.length-1;a>=0;a--)(s=t[a])&&(o=(n<3?s(o):n>3?s(e,i,o):s(e,i))||o);return n>3&&o&&Object.defineProperty(e,i,o),o},R=function(t){function i(){return null!==t&&t.apply(this,arguments)||this}return S(i,t),P([e.Property(10)],i.prototype,"top",void 0),P([e.Property(10)],i.prototype,"bottom",void 0),P([e.Property(10)],i.prototype,"left",void 0),P([e.Property(10)],i.prototype,"right",void 0),i}(e.ChildProperty),k=function(t){function i(){return null!==t&&t.apply(this,arguments)||this}return S(i,t),P([e.Property("Normal")],i.prototype,"fontStyle",void 0),P([e.Property("16px")],i.prototype,"size",void 0),P([e.Property("Normal")],i.prototype,"fontWeight",void 0),P([e.Property("")],i.prototype,"color",void 0),P([e.Property("Segoe UI")],i.prototype,"fontFamily",void 0),P([e.Property(1)],i.prototype,"opacity",void 0),i}(e.ChildProperty),C=function(t){function i(){return null!==t&&t.apply(this,arguments)||this}return S(i,t),P([e.Property(!1)],i.prototype,"enable",void 0),P([e.Property(2e3)],i.prototype,"duration",void 0),P([e.Property(0)],i.prototype,"delay",void 0),i}(e.ChildProperty),T=function(t){function i(){return null!==t&&t.apply(this,arguments)||this}return S(i,t),P([e.Property(null)],i.prototype,"content",void 0),P([e.Property(0)],i.prototype,"annotationAngle",void 0),P([e.Property("0%")],i.prototype,"annotationRadius",void 0),i}(e.ChildProperty),A=function(){function t(t){this.control=t}return t.prototype.render=function(t,i){return this.annotation=t,e.createElement("div",{id:this.control.element.id+"Annotation"+i,styles:"position:absolute;z-index:1",innerHTML:t.content})},t.prototype.processAnnotation=function(t,e,i){var r,s;s=new v(0,0),(r=this.render(t,e))?this.setElementStyle(s,r,i):this.control.redraw&&h(r.id)},t.prototype.setElementStyle=function(t,e,i){var r={cancel:!1,name:"annotationRender",content:e,location:t};if(this.control.trigger("annotationRender",r),!r.cancel){var s=this.Location(this.annotation.annotationRadius,this.annotation.annotationAngle);r.content.style.left=s.left+"px",r.content.style.top=s.top+"px",r.content.style.transform="translate(-50%, -50%)",r.content.setAttribute("aria-label","Annotation"),i.appendChild(r.content)}},t.prototype.Location=function(t,e){var i,r,s=parseFloat(t);if(0===s&&0===e){var n=this.control.progressRect;r=n.x+n.width/2,i=n.y+n.height/2}else{e-=90,e*=Math.PI/180;var o=Math.round(this.control.progressSize.width/2.25),a=Math.round(this.control.progressSize.height/2.25);r=s*Math.cos(e)+o,i=s*Math.sin(e)+a}return{top:i,left:r}},t}(),w=function(){var t=function(e,i){return(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])})(e,i)};return function(e,i){function r(){this.constructor=e}t(e,i),e.prototype=null===i?Object.create(i):(r.prototype=i.prototype,new r)}}(),E=function(t){function i(e,i){var r=t.call(this,e)||this;return r.progress=e,r.annotations=i,r}return w(i,t),i.prototype.renderAnnotations=function(t){var i=this;this.annotations=this.progress.annotations;var r=document.getElementById(this.progress.element.id+"Annotation_collections");this.parentElement=r||e.createElement("div",{id:this.progress.element.id+"Annotation_collections",styles:"position:absolute"}),this.annotations.map(function(t,e){i.processAnnotation(t,e,i.parentElement)}),r||t.appendChild(this.parentElement)},i.prototype.getModuleName=function(){return"ProgressAnnotation"},i.prototype.destroy=function(t){},i}(A),x=function(){var t=function(e,i){return(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])})(e,i)};return function(e,i){function r(){this.constructor=e}t(e,i),e.prototype=null===i?Object.create(i):(r.prototype=i.prototype,new r)}}(),O=function(t,e,i,r){var s,n=arguments.length,o=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,i,r);else for(var a=t.length-1;a>=0;a--)(s=t[a])&&(o=(n<3?s(o):n>3?s(e,i,o):s(e,i))||o);return n>3&&o&&Object.defineProperty(e,i,o),o},F=function(t){function r(e,i){return t.call(this,e,i)||this}return x(r,t),r.prototype.getModuleName=function(){return"progressbar"},r.prototype.preRender=function(){this.unWireEvents(),this.progressRect=new m(0,0,0,0),this.progressSize=new y(0,0),this.wireEvents()},r.prototype.render=function(){this.trigger("load",{progressBar:this}),this.calculateProgressBarSize(),this.calculateProgressBarBounds(),this.SetThemeValues(),this.renderAnnotations(),this.renderElements(),this.trigger("loaded",{progressBar:this}),this.renderComplete(),this.controlRenderedTimeStamp=(new Date).getTime()},r.prototype.SetThemeValues=function(){switch(this.theme){case"Bootstrap":case"Bootstrap4":this.gapWidth=this.gapWidth?this.gapWidth:4,this.cornerRadius="Auto"===this.cornerRadius?"Round":this.cornerRadius;break;default:this.cornerRadius="Auto"===this.cornerRadius?"Square":this.cornerRadius}},r.prototype.calculateProgressBarBounds=function(){this.progressRect.x=this.margin.left,this.progressRect.y=this.margin.top,this.progressRect.width-=this.margin.left+this.margin.right,this.progressRect.height-=this.margin.top+this.margin.bottom},r.prototype.calculateProgressBarSize=function(){var t=this.element.clientWidth||this.element.offsetWidth,e=this.element.clientHeight,i="Linear"===this.type?200:120,r="Linear"===this.type?30:120,s=Math.max(this.progressThickness,this.trackThickness);r="Linear"===this.type&&s>r-10?s+10:r,this.progressSize.width=n(this.width,t)||t||i,this.progressSize.height=n(this.height,e)||e||r,this.progressRect.width=this.progressSize.width,this.progressRect.height=this.progressSize.height},r.prototype.renderAnnotations=function(){this.createSecElement(),this.renderAnnotation()},r.prototype.renderElements=function(){this.element.style.display="block",this.element.style.position="relative",this.removeSvg(),this.setTheme(),this.createSVG(),this.clipPathElement(),this.createTrack(),this.createLinearProgress(),this.createCircularProgress(),this.createLabel(),this.element.appendChild(this.svgObject),this.setSecondaryElementPosition()},r.prototype.createSecElement=function(){var t=document.getElementById(this.element.id+"Secondary_Element");if(t)return t.innerHTML="",void(this.secElement=t);this.secElement=e.createElement("div",{id:this.element.id+"Secondary_Element",styles:"position: absolute"}),this.element.appendChild(this.secElement)},r.prototype.setSecondaryElementPosition=function(){var t=this.secElement,e=this.element.getBoundingClientRect(),r=i.getElement(this.svgObject.id).getBoundingClientRect();t.style.left=Math.max(r.left-e.left,0)+"px",t.style.top=Math.max(r.top-e.top,0)+"px"},r.prototype.createSVG=function(){this.renderer=new i.SvgRenderer(this.element.id),this.svgObject=this.renderer.createSvg({id:this.element.id+"SVG",width:this.progressSize.width,height:this.progressSize.height,style:"background-color:"+this.themeStyle.backgroundColor})},r.prototype.clipPathElement=function(){this.clipPath=this.renderer.createClipPath({id:this.element.id+"_clippath"}),this.bufferClipPath=this.renderer.createClipPath({id:this.element.id+"_clippathBuffer"})},r.prototype.createTrack=function(){var t,e,r,o,a,h,l,c,p,u,d,g;this.argsData={value:this.value,progressColor:this.progressColor,trackColor:this.trackColor},this.argsData.value===this.maximum?this.trigger("progressCompleted",this.argsData):this.trigger("valueChanged",this.argsData),"Linear"===this.type?(e=this.progressRect.width,d=new i.PathOption(this.element.id+"_Lineartrack","none",this.trackThickness||this.themeStyle.linearTrackThickness,this.argsData.trackColor||this.themeStyle.linearTrackColor,this.themeStyle.trackOpacity,"0",this.getPathLine(this.progressRect.x,e,this.trackThickness||this.themeStyle.linearTrackThickness)),t=this.renderer.drawPath(d),this.segmentCount>1&&(this.segmentSize=this.calculateSegmentSize(e,this.trackThickness||this.themeStyle.linearTrackThickness),t.setAttribute("stroke-dasharray",this.segmentSize)),"Round"===this.cornerRadius&&t.setAttribute("stroke-linecap","round"),this.svgObject.appendChild(t)):"Circular"===this.type&&(l=this.startAngle,this.totalAngle=(this.endAngle-this.startAngle)%360,this.totalAngle=this.totalAngle<=0?360+this.totalAngle:this.totalAngle,this.totalAngle-=360===this.totalAngle?.01:0,c=(this.startAngle+(this.enableRtl?-this.totalAngle:+this.totalAngle))%360,r=this.progressRect.x+this.progressRect.width/2,o=this.progressRect.y+this.progressRect.height/2,g=Math.max(this.trackThickness,this.progressThickness)||Math.max(this.themeStyle.circularProgressThickness,this.themeStyle.circularTrackThickness),a=Math.min(this.progressRect.height,this.progressRect.width)/2-g/2,u=s(r,o,h=null===(h=n(this.radius,a))?0:h,l,c,this.enableRtl),d=new i.PathOption(this.element.id+"_Circulartrack","none",this.trackThickness||this.themeStyle.circularTrackThickness,this.argsData.trackColor||this.themeStyle.circularTrackColor,this.themeStyle.trackOpacity,"0",u),p=this.renderer.drawPath(d),this.svgObject.appendChild(p),this.trackwidth=p.getTotalLength(),this.segmentCount>1&&(this.segmentSize=this.calculateSegmentSize(this.trackwidth,this.trackThickness||this.themeStyle.linearTrackThickness),p.setAttribute("stroke-dasharray",this.segmentSize)),"Round"===this.cornerRadius&&p.setAttribute("stroke-linecap","round"))},r.prototype.createLinearProgress=function(t,e){void 0===e&&(e=0);var r,s,n,o,a,h,c,p,u;if("Linear"===this.type&&(null===this.secondaryProgress||this.isIndeterminate||(s=this.calculateProgressRange(this.minimum,this.maximum,this.secondaryProgress),n=this.progressRect.width*s,0===this.segmentColor.length||this.isIndeterminate?(o=new i.PathOption(this.element.id+"_Linearbuffer","none",this.progressThickness||this.themeStyle.linearProgressThickness,this.argsData.progressColor||this.themeStyle.linearProgressColor,this.themeStyle.bufferOpacity,"0",this.getPathLine(this.progressRect.x,n,this.progressThickness||this.themeStyle.linearProgressThickness)),r=this.renderer.drawPath(o),this.segmentCount>1&&r.setAttribute("stroke-dasharray",this.segmentSize),"Round"===this.cornerRadius&&r.setAttribute("stroke-linecap","round")):r=this.createLinearSegment("_LinearBuffer",n,this.themeStyle.bufferOpacity,this.progressThickness||this.themeStyle.linearProgressThickness),this.svgObject.appendChild(r),this.animation.enable&&(p=this.createClipPath(this.bufferClipPath,s,null,this.progressRect.x,!1,this.progressThickness||this.themeStyle.linearProgressThickness),r.setAttribute("style","clip-path:url(#"+this.element.id+"_clippathBuffer)"),l(p,this,this.animation.delay,0)),this.svgObject.appendChild(this.bufferClipPath)),null!==this.argsData.value)){if(h=this.calculateProgressRange(this.minimum,this.maximum,this.argsData.value),this.progressPreviousWidth=c=this.progressRect.width*(this.isIndeterminate?1:h),0===this.segmentColor.length||this.isIndeterminate?(t?((a=i.getElement(this.element.id+"_Linearprogress")).setAttribute("d",this.getPathLine(this.progressRect.x,c,this.progressThickness||this.themeStyle.linearProgressThickness)),a.setAttribute("stroke",this.argsData.progressColor||this.themeStyle.circularProgressColor)):(o=new i.PathOption(this.element.id+"_Linearprogress","none",this.progressThickness||this.themeStyle.linearProgressThickness,this.argsData.progressColor||this.themeStyle.linearProgressColor,this.themeStyle.progressOpacity,"0",this.getPathLine(this.progressRect.x,c,this.progressThickness||this.themeStyle.linearProgressThickness)),a=this.renderer.drawPath(o)),this.segmentCount>1&&a.setAttribute("stroke-dasharray",this.segmentSize),"Round"===this.cornerRadius&&a.setAttribute("stroke-linecap","round")):a=this.createLinearSegment("_LinearProgress",c,this.themeStyle.progressOpacity,this.progressThickness||this.themeStyle.linearProgressThickness),this.svgObject.appendChild(a),this.animation.enable||this.isIndeterminate){var d=this.animation.delay+(null!==this.secondaryProgress?n-c:0);u=this.createClipPath(this.clipPath,h,null,t?e:this.progressRect.x,t,this.progressThickness||this.themeStyle.linearProgressThickness),a.setAttribute("style","clip-path:url(#"+this.element.id+"_clippath)"),l(u,this,d,t?e:0)}this.svgObject.appendChild(this.clipPath)}},r.prototype.createCircularProgress=function(t,e,r){var o,a,h,l,p,d,g=this.startAngle;this.progressStartAngle=g;var m,y,f,v,b,S,P,R,k,C,T;if("Circular"===this.type&&(o=this.progressRect.x+this.progressRect.width/2,a=this.progressRect.y+this.progressRect.height/2,R=Math.max(this.trackThickness,this.progressThickness)||Math.max(this.themeStyle.circularProgressThickness,this.themeStyle.circularTrackThickness),h=Math.min(this.progressRect.height,this.progressRect.width)/2-R/2,p=n(this.innerRadius,h),p=null===p?0:p,null===this.secondaryProgress||this.isIndeterminate||(0===this.segmentColor.length||this.isIndeterminate?(m=s(o,a,p,g,l=this.calculateProgressRange(this.minimum,this.maximum,this.secondaryProgress),this.enableRtl),S=new i.PathOption(this.element.id+"_Circularbuffer","none",this.progressThickness||this.themeStyle.circularProgressThickness,this.argsData.progressColor||this.themeStyle.circularProgressColor,this.themeStyle.bufferOpacity,"0",m),b=this.renderer.drawPath(S),this.segmentCount>1&&(0!==(P=parseInt(this.radius,10)-parseInt(this.innerRadius,10))&&(T=this.trackwidth+(P<0?this.trackwidth*Math.abs(P)/parseInt(this.radius,10):-this.trackwidth*Math.abs(P)/parseInt(this.radius,10)),this.segmentSize=this.calculateSegmentSize(T,this.progressThickness||this.themeStyle.circularProgressThickness)),b.setAttribute("stroke-dasharray",this.segmentSize)),"Round"===this.cornerRadius&&b.setAttribute("stroke-linecap","round")):b=this.createCircularSegment("_CircularBuffer",o,a,p,this.secondaryProgress,this.themeStyle.bufferOpacity,this.progressThickness||this.themeStyle.circularProgressThickness),this.svgObject.appendChild(b),this.animation.enable&&(y=this.createClipPath(this.bufferClipPath,null,"",null,!1),b.setAttribute("style","clip-path:url(#"+this.element.id+"_clippathBuffer)"),u(o,a,p,g,0,y,this,this.progressThickness||this.themeStyle.circularProgressThickness,this.animation.delay,null)),this.svgObject.appendChild(this.bufferClipPath)),null!==this.argsData.value)){if(0===this.segmentColor.length||this.isIndeterminate?(f=this.calculateProgressRange(this.minimum,this.maximum,this.argsData.value),this.annotationEnd=f,m=s(o,a,p,g,l=this.isIndeterminate?(this.startAngle+(this.enableRtl?-this.totalAngle:+this.totalAngle))%360:f,this.enableRtl),S=new i.PathOption(this.element.id+"_Circularprogress","none",this.progressThickness||this.themeStyle.circularProgressThickness,this.argsData.progressColor||this.themeStyle.circularProgressColor,this.themeStyle.progressOpacity,"0",m),r?(d=(v=i.getElement(this.element.id+"_Circularprogress")).getAttribute("d"),v.setAttribute("d",m),v.setAttribute("stroke",this.argsData.progressColor||this.themeStyle.circularProgressColor)):v=this.renderer.drawPath(S),this.segmentCount>1&&(0!==(C=parseInt(this.radius,10)-parseInt(this.innerRadius,10))&&(T=this.trackwidth+(C<0?this.trackwidth*Math.abs(C)/parseInt(this.radius,10):-this.trackwidth*Math.abs(C)/parseInt(this.radius,10)),this.segmentSize=this.calculateSegmentSize(T,this.progressThickness||this.themeStyle.circularProgressThickness)),v.setAttribute("stroke-dasharray",this.segmentSize)),"Round"===this.cornerRadius&&v.setAttribute("stroke-linecap","round")):v=this.createCircularSegment("_CircularProgress",o,a,p,this.argsData.value,this.themeStyle.progressOpacity,this.progressThickness||this.themeStyle.circularProgressThickness),this.progressEndAngle=l,r||this.svgObject.appendChild(v),this.animation.enable&&!this.isIndeterminate){var A=null!==this.secondaryProgress?300:this.animation.delay;k=this.createClipPath(this.clipPath,null,r?d:"",null,r),v.setAttribute("style","clip-path:url(#"+this.element.id+"_clippath)"),u(o,a,p,g,f,k,this,this.progressThickness||this.themeStyle.circularProgressThickness,A,r?e:null)}if(this.isIndeterminate){var w=2*p*.75,E=s(o,a,w,g,f,this.enableRtl,!0),x=new i.PathOption(this.element.id+"_clippathcircle","transparent",10,"transparent",1,"0",E),O=this.renderer.drawPath(x);this.clipPath.appendChild(O),v.setAttribute("style","clip-path:url(#"+this.element.id+"_clippath)"),c(O,this,g,f,o,a,w)}this.svgObject.appendChild(this.clipPath)}},r.prototype.createLabel=function(){var t,e=this.animation.enable;if("Linear"===this.type&&this.showProgressValue){var r=void 0,s=void 0,n=void 0,o=this.calculateProgressRange(this.minimum,this.maximum,this.value);this.value===this.maximum&&(s=100,n=this.progressRect.width*o-10),(this.value>this.maximum||this.value<this.minimum||this.value===this.minimum)&&(s=0,n=this.progressRect.width*o+10),this.value>this.minimum&&this.value<this.maximum&&(s=Math.round(100*this.value/(this.maximum-this.minimum)),n=this.progressRect.width*o-10);p={cancel:!1,text:this.label?this.label:String(s)+"%",color:this.labelStyle.color};if(this.trigger("textRender",p),!p.cancel){t=i.measureText(p.text,this.labelStyle);u={id:this.element.id+"_linearLabel","font-size":this.labelStyle.size||this.themeStyle.linearFontSize,"font-style":this.labelStyle.fontStyle||this.themeStyle.linearFontStyle,"font-family":this.labelStyle.fontFamily||this.themeStyle.linearFontFamily,"font-weight":this.labelStyle.fontWeight,fill:p.color||this.themeStyle.fontColor,x:n,y:this.progressRect.y+this.progressRect.height/2+t.height/4,"text-anchor":"middle",visibility:e?"hidden":"visible"};r=this.renderer.createText(u,p.text),this.labelElement=r,this.svgObject.appendChild(r)}}else if("Circular"===this.type&&this.showProgressValue){var a=void 0,h=void 0,l=this.progressRect.x+this.progressRect.width/2,c=this.progressRect.y+this.progressRect.height/2;(this.value===this.minimum||this.value>this.maximum)&&(h=0),this.value===this.maximum&&(h=100),this.value>this.minimum&&this.value<this.maximum&&(h=Math.round(100*this.value/(this.maximum-this.minimum)));var p={cancel:!1,text:this.label?this.label:String(h)+"%",color:this.labelStyle.color};if(this.trigger("textRender",p),!p.cancel){t=i.measureText(p.text,this.labelStyle);var u={id:this.element.id+"_circularLabel",fill:p.color||this.themeStyle.fontColor,"font-size":this.labelStyle.size||this.themeStyle.circularFontSize,"font-style":this.labelStyle.fontStyle||this.themeStyle.circularFontStyle,"font-family":this.labelStyle.fontFamily||this.themeStyle.circularFontFamily,"font-weight":this.labelStyle.fontWeight,height:this.progressRect.height,width:this.progressRect.width,visibility:e?"hidden":"visible",x:l,y:c+t.height/2,"text-anchor":"middle"};a=this.renderer.createText(u,p.text),this.labelElement=a,this.svgObject.appendChild(a)}}},r.prototype.getPathLine=function(t,e,i){var r=this.enableRtl?"Round"===this.cornerRadius?t+this.progressRect.width-b/2*i:t+this.progressRect.width:"Round"===this.cornerRadius?t+b/2*i:t,s=this.enableRtl?"Round"===this.cornerRadius?r-e+b*i:r-e:"Round"===this.cornerRadius?r+e-b*i:r+e;return"M"+r+" "+(this.progressRect.y+this.progressRect.height/2)+"L"+s+" "+(this.progressRect.y+this.progressRect.height/2)},r.prototype.calculateProgressRange=function(t,e,i){var r;return"Linear"===this.type?(r=(i-t)/(e-t),i<t||i>e?0:r):(r=(i-t)/(e-t)*this.totalAngle,r=(this.startAngle+(this.enableRtl?-r:+r))%360,i<t||i>e?this.startAngle:r)},r.prototype.calculateSegmentSize=function(t,e){var i="Circular"===this.type&&359.99===this.totalAngle?this.segmentCount:this.segmentCount-1,r=359.99===this.totalAngle||"Linear"===this.type?this.segmentCount:this.segmentCount-1,s=this.gapWidth||("Linear"===this.type?this.themeStyle.linearGapWidth:this.themeStyle.circularGapWidth),n=t-i*s;return n=(n-("Round"===this.cornerRadius?r*(b*e):0))/this.segmentCount,s+="Round"===this.cornerRadius?b*e:0," "+n+" "+s},r.prototype.createClipPath=function(t,e,r,s,n,o){var a,h,l;return"Linear"===this.type?n?a=i.getElement(this.element.id+"_clippathrect"):(h=new f(this.element.id+"_clippathrect","transparent",1,"transparent",1,new m("Round"===this.cornerRadius?this.progressRect.x-b/2*o:s,0,this.progressSize.height,this.isIndeterminate?this.progressRect.width*e:"Round"===this.cornerRadius?this.progressRect.width*e+b*o:this.progressRect.width*e)),a=this.renderer.drawRectangle(h),t.appendChild(a)):n?(a=i.getElement(this.element.id+"_clippathcircle")).setAttribute("d",r):(l=new i.PathOption(this.element.id+"_clippathcircle","transparent",10,"transparent",1,"0",r),a=this.renderer.drawPath(l),t.appendChild(a)),a},r.prototype.createLinearSegment=function(t,e,r,s){var n=this.enableRtl?"Round"===this.cornerRadius?this.progressRect.x+this.progressRect.width-b/2*s:this.progressRect.x+this.progressRect.width:"Round"===this.cornerRadius?this.progressRect.x+b/2*s:this.progressRect.x,o=this.progressRect.y+this.progressRect.height/2,a=this.gapWidth||this.themeStyle.linearGapWidth,h=this.progressRect.width/this.segmentCount,l=this.progressRect.width-(this.segmentCount-1)*a;l=(l-("Round"===this.cornerRadius?this.segmentCount*(b*s):0))/this.segmentCount;for(var c,p,u,d,g="Round"===this.cornerRadius?a+b*s:a,m=this.renderer.createGroup({id:this.element.id+t+"Group"}),y=Math.ceil(e/h),f=0,v="Round"===this.cornerRadius?e-b*s:e,S=this.progressThickness||this.themeStyle.linearProgressThickness,P=0;P<y;P++)c=v<l?v:l,f<this.segmentColor.length?(p=this.segmentColor[f],f++):(f=0,p=this.segmentColor[f],f++),u=new i.PathOption(this.element.id+t+P,"none",S,p,r,"0",this.getLinearSegmentPath(n,o,c)),d=this.renderer.drawPath(u),"Round"===this.cornerRadius&&d.setAttribute("stroke-linecap","round"),m.appendChild(d),n+=this.enableRtl?-l-g:l+g,v=(v-=l+g)<0?0:v;return m},r.prototype.getLinearSegmentPath=function(t,e,i){return"M "+t+" "+e+" L"+(t+(this.enableRtl?-i:i))+" "+e},r.prototype.createCircularSegment=function(t,e,r,n,o,a,h){var l=this.startAngle,c=this.widthToAngle(this.minimum,this.maximum,o);c-="Round"===this.cornerRadius&&359.99===this.totalAngle?this.widthToAngle(0,this.trackwidth,b/2*h):0;var p=this.trackwidth-(359.99===this.totalAngle?this.segmentCount:this.segmentCount-1)*(this.gapWidth||this.themeStyle.circularGapWidth);p=(p-("Round"===this.cornerRadius?(359.99===this.totalAngle?this.segmentCount:this.segmentCount-1)*b*h:0))/this.segmentCount;var u=this.widthToAngle(0,this.trackwidth,this.trackwidth/this.segmentCount);u-="Round"===this.cornerRadius&&359.99===this.totalAngle?this.widthToAngle(0,this.trackwidth,b/2*h):0;var d=this.widthToAngle(0,this.trackwidth,p),g=this.widthToAngle(0,this.trackwidth,this.gapWidth||this.themeStyle.circularGapWidth);g+="Round"===this.cornerRadius?this.widthToAngle(0,this.trackwidth,b*h):0;for(var m,y,f,v,S,P=this.renderer.createGroup({id:this.element.id+t+"Group"}),R=Math.floor(c/u),k=Math.ceil((c-g*R)/d),C=(l+(this.enableRtl?-d:d))%360,T=0,A=this.progressThickness||this.themeStyle.circularProgressThickness,w=0;w<k;w++)m=s(e,r,n,l,f=this.enableRtl?this.startAngle-c>C?this.startAngle-c:C:this.startAngle+c<C?this.startAngle+c:C,this.enableRtl),T<this.segmentColor.length?(v=this.segmentColor[T],T++):(T=0,v=this.segmentColor[T],T++),S=new i.PathOption(this.element.id+t+w,"none",A,v,a,"0",m),y=this.renderer.drawPath(S),"Round"===this.cornerRadius&&y.setAttribute("stroke-linecap","round"),P.appendChild(y),l=f+(this.enableRtl?-g:g),C+=this.enableRtl?-d-g:d+g;return P},r.prototype.widthToAngle=function(t,e,i){return(i-t)/(e-t)*this.totalAngle},r.prototype.setTheme=function(){this.themeStyle=d(this.theme)},r.prototype.renderAnnotation=function(){this.progressAnnotationModule&&this.annotations.length>0&&this.progressAnnotationModule.renderAnnotations(this.secElement)},r.prototype.progressResize=function(t){var e=this;if(!((new Date).getTime()>this.controlRenderedTimeStamp+800))return!1;var i={bar:this,name:"resized",currentSize:new y(0,0),previousSize:new y(this.progressSize.width,this.progressSize.height)};return this.resizeTo&&clearTimeout(this.resizeTo),this.resizeTo=setTimeout(function(){if(e.isDestroyed)return void clearTimeout(e.resizeTo);i.currentSize=e.progressSize,e.trigger("resized",i),e.calculateProgressBarSize(),e.calculateProgressBarBounds(),e.secElement.innerHTML="",e.renderAnnotation(),e.renderElements()},500),!1},r.prototype.unWireEvents=function(){window.removeEventListener(e.Browser.isTouch&&"orientation"in window&&"onorientationchange"in window?"orientationchange":"resize",this.resizeBounds)},r.prototype.wireEvents=function(){this.resizeBounds=this.progressResize.bind(this),window.addEventListener(e.Browser.isTouch&&"orientation"in window&&"onorientationchange"in window?"orientationchange":"resize",this.resizeBounds)},r.prototype.removeSvg=function(){var t=document.getElementById(this.element.id+"SVG");t&&e.remove(t)},r.prototype.onPropertyChanged=function(t,e){for(var i=0,r=Object.keys(t);i<r.length;i++)switch(r[i]){case"annotations":this.secElement.innerHTML="",this.renderAnnotation(),p(document.getElementById(this.element.id+"Annotation0").children[0],this,this.startAngle,this.annotationEnd);break;case"value":this.argsData={value:this.value,progressColor:this.progressColor,trackColor:this.trackColor},this.argsData.value===this.maximum?this.trigger("progressCompleted",this.argsData):this.trigger("valueChanged",this.argsData),"Circular"===this.type?this.createCircularProgress(this.progressStartAngle,this.progressEndAngle,!0):this.createLinearProgress(!0,this.progressPreviousWidth)}},r.prototype.requiredModules=function(){var t=[];return this.annotations.some(function(t){return null!==t.content})&&t.push({member:"ProgressAnnotation",args:[this]}),t},r.prototype.getPersistData=function(){return" "},r.prototype.destroy=function(){this.unWireEvents(),t.prototype.destroy.call(this),this.removeSvg(),this.svgObject=null,this.element.classList.remove("e-progressbar")},O([e.Property("Linear")],r.prototype,"type",void 0),O([e.Property(null)],r.prototype,"value",void 0),O([e.Property(null)],r.prototype,"secondaryProgress",void 0),O([e.Property(0)],r.prototype,"minimum",void 0),O([e.Property(100)],r.prototype,"maximum",void 0),O([e.Property(0)],r.prototype,"startAngle",void 0),O([e.Property(0)],r.prototype,"endAngle",void 0),O([e.Property("100%")],r.prototype,"radius",void 0),O([e.Property("100%")],r.prototype,"innerRadius",void 0),O([e.Property(1)],r.prototype,"segmentCount",void 0),O([e.Property(null)],r.prototype,"gapWidth",void 0),O([e.Property("")],r.prototype,"segmentColor",void 0),O([e.Property("Auto")],r.prototype,"cornerRadius",void 0),O([e.Property(null)],r.prototype,"height",void 0),O([e.Property(null)],r.prototype,"width",void 0),O([e.Property(!1)],r.prototype,"isIndeterminate",void 0),O([e.Property(!1)],r.prototype,"enableRtl",void 0),O([e.Property(null)],r.prototype,"trackColor",void 0),O([e.Property(null)],r.prototype,"progressColor",void 0),O([e.Property(0)],r.prototype,"trackThickness",void 0),O([e.Property(0)],r.prototype,"progressThickness",void 0),O([e.Property("Fabric")],r.prototype,"theme",void 0),O([e.Property(!1)],r.prototype,"showProgressValue",void 0),O([e.Complex({size:null,color:null,fontStyle:null,fontWeight:"Normal",fontFamily:null},k)],r.prototype,"labelStyle",void 0),O([e.Property("")],r.prototype,"label",void 0),O([e.Complex({},R)],r.prototype,"margin",void 0),O([e.Complex({},C)],r.prototype,"animation",void 0),O([e.Event()],r.prototype,"load",void 0),O([e.Event()],r.prototype,"textRender",void 0),O([e.Event()],r.prototype,"loaded",void 0),O([e.Event()],r.prototype,"valueChanged",void 0),O([e.Event()],r.prototype,"progressCompleted",void 0),O([e.Event()],r.prototype,"animationComplete",void 0),O([e.Collection([{}],T)],r.prototype,"annotations",void 0),r=O([e.NotifyPropertyChanges],r)}(e.Component);return F.Inject(E),t.ProgressBar=F,t.Margin=R,t.Font=k,t.Animation=C,t.ProgressAnnotationSettings=T,t.ProgressAnnotation=E,t.Rect=m,t.Size=y,t.RectOption=f,t.degreeToLocation=r,t.getPathArc=s,t.stringToNumber=n,t.effect=o,t.annotationRender="annotationRender",t.getElement=a,t.removeElement=h,t.ProgressLocation=v,t.doLinearAnimation=l,t.doCircularIndeterminate=c,t.doAnnotationAnimation=p,t.doCircularAnimation=u,t}({},ej.base,ej.svgbase),this.ejs=ej;
+this.ej=this.ej||{},this.ej.progressbar=function(e,t,r){"use strict";function i(e,t,r,i){var n=(i-90)*(Math.PI/180);return{x:e+r*Math.cos(n),y:t+r*Math.sin(n)}}function n(e,t,r,n,o,s,a){var l=i(e,t,r,n),c=i(e,t,r,o),h="0",p=s?"0":"1";h=s?(n>=o?n:n+360)-o<=180?"0":"1":(o>=n?o:o+360)-n<=180?"0":"1";return a?"M "+e+" "+t+" L "+l.x+" "+l.y+" A "+r+" "+r+"  0  "+h+" "+p+" "+c.x+" "+c.y+" Z":"M"+l.x+" "+l.y+"A"+r+" "+r+" 0 "+h+" "+p+" "+c.x+" "+c.y}function o(e,t){return null!==e&&void 0!==e?-1!==e.indexOf("%")?t/100*parseInt(e,10):parseInt(e,10):null}function s(e,t,r,i,n){var o=n?r:-r,s=t+(n?-r:r);return o*Math.cos(e/i*(Math.PI/2))+s}function a(e){return document.getElementById(e)}function l(e){if(!e)return null;var r="string"==typeof e?a(e):e;r&&t.remove(r)}function c(e){var t;switch(e){case"Material":t={linearTrackColor:"#E3165B",linearProgressColor:"#E3165B",circularTrackColor:"#E3165B",circularProgressColor:"#E3165B",backgroundColor:"transparent",fontColor:"#000000",linearFontFamily:"Roboto",linearFontSize:12,linearFontStyle:"Regular",circularFontFamily:"Roboto",circularFontStyle:"Normal",circularFontSize:20,progressOpacity:1,trackOpacity:.26,bufferOpacity:.4,linearGapWidth:4,circularGapWidth:4,linearTrackThickness:4,linearProgressThickness:4,circularTrackThickness:4,circularProgressThickness:4};break;case"Bootstrap":t={linearTrackColor:"#EEEEEE",linearProgressColor:"#317ab9",circularTrackColor:"#EEEEEE",circularProgressColor:"#317ab9",backgroundColor:"transparent",fontColor:"#000000",linearFontFamily:"Helvetica",linearFontStyle:"Regular",linearFontSize:12,circularFontFamily:"Segoe UI",circularFontStyle:"Normal",circularFontSize:20,progressOpacity:1,trackOpacity:1,bufferOpacity:.44,linearGapWidth:4,circularGapWidth:4,linearTrackThickness:20,linearProgressThickness:20,circularTrackThickness:6,circularProgressThickness:6};break;case"Bootstrap4":t={linearTrackColor:"#E9ECEF",linearProgressColor:"#007bff",circularTrackColor:"#E9ECEF",circularProgressColor:"#007bff",backgroundColor:"transparent",fontColor:"#000000",linearFontFamily:"Helvetica",linearFontStyle:"Regular",linearFontSize:12,circularFontFamily:"Helvetica",circularFontStyle:"Normal",circularFontSize:20,progressOpacity:1,trackOpacity:1,bufferOpacity:.44,linearGapWidth:4,circularGapWidth:4,linearTrackThickness:16,linearProgressThickness:16,circularTrackThickness:6,circularProgressThickness:6};break;case"HighContrast":t={linearTrackColor:"#BFBFBF",linearProgressColor:"#FFD939",circularTrackColor:"#BFBFBF",circularProgressColor:"#FFD939",backgroundColor:"transparent",fontColor:"#FFFFFF",linearFontFamily:"Segoe UI",linearFontSize:12,linearFontStyle:"Regular",circularFontFamily:"Segoe UI",circularFontStyle:"Normal",circularFontSize:20,progressOpacity:1,trackOpacity:1,bufferOpacity:.35,linearGapWidth:2,circularGapWidth:4,linearTrackThickness:2,linearProgressThickness:2,circularTrackThickness:4,circularProgressThickness:4};break;default:t={linearTrackColor:"#EAEAEA",linearProgressColor:"#0078D6",circularTrackColor:"#E6E6E6",circularProgressColor:"#0078D6",backgroundColor:"transparent",fontColor:"#333333",linearFontFamily:"Segoe UI",linearFontStyle:"Regular",linearFontSize:12,circularFontFamily:"Segoe UI",circularFontStyle:"Normal",circularFontSize:20,progressOpacity:1,trackOpacity:1,bufferOpacity:.3,linearGapWidth:2,circularGapWidth:4,linearTrackThickness:2,linearProgressThickness:2,circularTrackThickness:4,circularProgressThickness:4}}return t}var h=function(){var e=function(t,r){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])})(t,r)};return function(t,r){function i(){this.constructor=t}e(t,r),t.prototype=null===r?Object.create(r):(i.prototype=r.prototype,new i)}}(),p=function(){function e(e,t,r,i){this.x=e,this.y=t,this.height=r,this.width=i}return e}(),u=function(){function e(e,t){this.height=e,this.width=t}return e}(),d=function(e){function t(t,r,i,n,o,s,a,l,c,h){var p=e.call(this,t,r,i,n,o,h)||this;return p.y=s.y,p.x=s.x,p.height=s.height,p.width=s.width,p.rx=a||0,p.ry=l||0,p.transform=c||"",p.stroke=0!==i&&""!==p.stroke?n:"transparent",p}return h(t,e),t}(r.PathOption),g=function(){function e(e,t){this.x=e,this.y=t}return e}(),m=function(){var e=function(t,r){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])})(t,r)};return function(t,r){function i(){this.constructor=t}e(t,r),t.prototype=null===r?Object.create(r):(i.prototype=r.prototype,new i)}}(),y=function(e,t,r,i){var n,o=arguments.length,s=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,r,i);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(s=(o<3?n(s):o>3?n(t,r,s):n(t,r))||s);return o>3&&s&&Object.defineProperty(t,r,s),s},f=function(e){function r(){return null!==e&&e.apply(this,arguments)||this}return m(r,e),y([t.Property(10)],r.prototype,"top",void 0),y([t.Property(10)],r.prototype,"bottom",void 0),y([t.Property(10)],r.prototype,"left",void 0),y([t.Property(10)],r.prototype,"right",void 0),r}(t.ChildProperty),v=function(e){function r(){return null!==e&&e.apply(this,arguments)||this}return m(r,e),y([t.Property("Normal")],r.prototype,"fontStyle",void 0),y([t.Property("16px")],r.prototype,"size",void 0),y([t.Property("Normal")],r.prototype,"fontWeight",void 0),y([t.Property("")],r.prototype,"color",void 0),y([t.Property("Segoe UI")],r.prototype,"fontFamily",void 0),y([t.Property(1)],r.prototype,"opacity",void 0),r}(t.ChildProperty),P=function(e){function r(){return null!==e&&e.apply(this,arguments)||this}return m(r,e),y([t.Property(!1)],r.prototype,"enable",void 0),y([t.Property(2e3)],r.prototype,"duration",void 0),y([t.Property(0)],r.prototype,"delay",void 0),r}(t.ChildProperty),b=function(e){function r(){return null!==e&&e.apply(this,arguments)||this}return m(r,e),y([t.Property(null)],r.prototype,"content",void 0),y([t.Property(0)],r.prototype,"annotationAngle",void 0),y([t.Property("0%")],r.prototype,"annotationRadius",void 0),r}(t.ChildProperty),S=function(){function e(e){this.control=e}return e.prototype.render=function(e,r){return this.annotation=e,t.createElement("div",{id:this.control.element.id+"Annotation"+r,styles:"position:absolute;z-index:1",innerHTML:e.content})},e.prototype.processAnnotation=function(e,t,r){var i,n;n=new g(0,0),(i=this.render(e,t))?this.setElementStyle(n,i,r):this.control.redraw&&l(i.id)},e.prototype.setElementStyle=function(e,t,r){var i={cancel:!1,name:"annotationRender",content:t,location:e};if(this.control.trigger("annotationRender",i),!i.cancel){var n=this.Location(this.annotation.annotationRadius,this.annotation.annotationAngle);i.content.style.left=n.left+"px",i.content.style.top=n.top+"px",i.content.style.transform="translate(-50%, -50%)",i.content.setAttribute("aria-label","Annotation"),r.appendChild(i.content)}},e.prototype.Location=function(e,t){var r,i,n=parseFloat(e);if(0===n&&0===t){var o=this.control.progressRect;i=o.x+o.width/2,r=o.y+o.height/2}else{t-=90,t*=Math.PI/180;var s=Math.round(this.control.progressSize.width/2.25),a=Math.round(this.control.progressSize.height/2.25);i=n*Math.cos(t)+s,r=n*Math.sin(t)+a}return{top:r,left:i}},e}(),C=function(){function e(){}return e.prototype.doLinearAnimation=function(e,r,i,n){var o=new t.Animation({}),a=e,l=a.getAttribute("width"),c=a.getAttribute("x"),h=0,p=parseInt(c,10)-parseInt(l,10);a.style.visibility="hidden",o.animate(a,{duration:r.animation.duration,delay:i,progress:function(e){r.enableRtl?e.timeStamp>=e.delay&&(a.style.visibility="visible",h=s(e.timeStamp,parseInt(c,10),parseInt(l,10),e.duration,r.enableRtl),a.setAttribute("x",h.toString())):e.timeStamp>=e.delay&&(a.style.visibility="visible",h=s(e.timeStamp,n,parseInt(l,10),e.duration,r.enableRtl),a.setAttribute("width",h.toString()))},end:function(e){r.enableRtl?a.setAttribute("x",p.toString()):a.setAttribute("width",l),r.animation.enable&&r.labelElement.setAttribute("visibility","visible"),r.trigger("animationComplete",{value:r.value,trackColor:r.trackColor,progressColor:r.progressColor})}})},e.prototype.doLinearIndeterminate=function(e,r){var i=this,n=new t.Animation({}),o=e,a=o.getAttribute("x"),l=o.getAttribute("width"),c=0,h=-parseInt(l,10),p=r.progressRect.x+r.progressRect.width+parseInt(l,10);n.animate(o,{duration:2e3,delay:0,progress:function(e){r.enableRtl?(c=s(e.timeStamp,parseInt(a,10),p,e.duration,r.enableRtl),o.setAttribute("x",c.toString())):(c=s(e.timeStamp,h,p,e.duration,r.enableRtl),o.setAttribute("x",c.toString()))},end:function(t){r.enableRtl?o.setAttribute("x",a.toString()):o.setAttribute("x",h.toString()),i.doLinearIndeterminate(e,r)}})},e.prototype.doCircularAnimation=function(e,r,i,o,a,l,c,h,p,u){var d=new t.Animation({}),g=l,m=i+h/2,y=0,f=o<Math.abs(a)?Math.abs(a):Math.abs(a)+360;f-=o,o+="Round"===c.cornerRadius&&359.99!==f?c.enableRtl?.45*h:-.45*h:0,f+="Round"===c.cornerRadius&&359.99!==f?.45*h:0,a+="Round"===c.cornerRadius&&359.99!==f?c.enableRtl?-.45*h:.45*h:0,d.animate(g,{duration:c.animation.duration,delay:p,progress:function(t){t.timeStamp>=t.delay&&(y=s(t.timeStamp,u|o,f,t.duration,c.enableRtl),g.setAttribute("d",n(e,r,m,o,y%360,c.enableRtl,!0)))},end:function(t){g.setAttribute("d",n(e,r,m,o,a,c.enableRtl,!0)),c.animation.enable&&c.labelElement.setAttribute("visibility","visible"),c.trigger("animationComplete",{value:c.value,trackColor:c.trackColor,progressColor:c.progressColor})}})},e.prototype.doCircularIndeterminate=function(e,r,i,o,s,a,l,c){var h=this,p=new t.Animation({}),u=l+c/2;p.animate(e,{duration:2e3,delay:0,progress:function(t){i+=r.enableRtl?-5:5,o+=r.enableRtl?-5:5,e.setAttribute("d",n(s,a,u,i%360,o%360,r.enableRtl,!0))},end:function(t){h.doCircularIndeterminate(e,r,i,o,s,a,l,c)}})},e.prototype.doAnnotationAnimation=function(e,r,i,n){var o,a,l=new t.Animation({}),c=0,h=r.annotations.length>0;h&&r.progressAnnotationModule&&(a=document.getElementById(r.element.id+"Annotation0").children[0])&&a.children[0]&&"SPAN"===a.children[0].tagName&&(o=a.children[0]);var p,u=r.totalAngle,d=r.minimum,g=r.maximum,m=i>n?n+360:n,y=m-i;l.animate(e,{duration:r.animation.duration,delay:r.animation.delay,progress:function(e){h&&o&&((c=s(e.timeStamp,i,y,e.duration,r.enableRtl))<=m?(p=parseInt(((c-i)/u*(g-d)+d).toString(),10),o.innerHTML=p?p.toString()+"%":""):o.innerHTML=r.value+"%")},end:function(e){o.innerHTML=r.value+"%"}})},e}(),k=function(){var e=function(t,r){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])})(t,r)};return function(t,r){function i(){this.constructor=t}e(t,r),t.prototype=null===r?Object.create(r):(i.prototype=r.prototype,new i)}}(),R=function(e){function r(t,r){var i=e.call(this,t)||this;return i.animation=new C,i.progress=t,i.annotations=r,i}return k(r,e),r.prototype.renderAnnotations=function(e){var r=this;this.annotations=this.progress.annotations;var i=document.getElementById(this.progress.element.id+"Annotation_collections");if(this.parentElement=i||t.createElement("div",{id:this.progress.element.id+"Annotation_collections",styles:"position:absolute"}),this.annotations.map(function(e,t){r.processAnnotation(e,t,r.parentElement)}),i||e.appendChild(this.parentElement),this.progress.animation.enable&&!this.progress.isIndeterminate){var n=document.getElementById(this.progress.element.id+"Annotation0").children[0];this.animation.doAnnotationAnimation(n,this.progress,this.progress.startAngle,this.progress.annotationEnd)}},r.prototype.getModuleName=function(){return"ProgressAnnotation"},r.prototype.destroy=function(e){},r}(S),T=function(){function e(){}return e.prototype.createLinearSegment=function(e,t,i,n,o){var s=e.enableRtl?"Round"===e.cornerRadius?e.progressRect.x+e.progressRect.width-.45*o:e.progressRect.x+e.progressRect.width:"Round"===e.cornerRadius?e.progressRect.x+.45*o:e.progressRect.x,a=e.progressRect.y+e.progressRect.height/2,l=e.gapWidth||e.themeStyle.linearGapWidth,c=e.progressRect.width/e.segmentCount,h=e.progressRect.width-(e.segmentCount-1)*l;h=(h-("Round"===e.cornerRadius?e.segmentCount*(.9*o):0))/e.segmentCount;for(var p,u,d,g,m="Round"===e.cornerRadius?l+.9*o:l,y=e.renderer.createGroup({id:e.element.id+t}),f=Math.ceil(i/c),v=0,P="Round"===e.cornerRadius?i-.9*o:i,b=e.progressThickness||e.themeStyle.linearProgressThickness,S=0;S<f;S++)p=P<h?P:h,v<e.segmentColor.length?(u=e.segmentColor[v],v++):(v=0,u=e.segmentColor[v],v++),d=new r.PathOption(e.element.id+t+S,"none",b,u,n,"0",this.getLinearSegmentPath(s,a,p,e.enableRtl)),g=e.renderer.drawPath(d),"Round"===e.cornerRadius&&g.setAttribute("stroke-linecap","round"),y.appendChild(g),s+=e.enableRtl?-h-m:h+m,P=(P-=h+m)<0?0:P;return y},e.prototype.getLinearSegmentPath=function(e,t,r,i){return"M "+e+" "+t+" L"+(e+(i?-r:r))+" "+t},e.prototype.createCircularSegment=function(e,t,i,o,s,a,l,c){var h=e.startAngle,p=e.totalAngle,u=this.widthToAngle(e.minimum,e.maximum,a,p);u-="Round"===e.cornerRadius&&359.99===e.totalAngle?this.widthToAngle(0,e.trackwidth,.45*c,p):0;var d=e.trackwidth-(359.99===e.totalAngle?e.segmentCount:e.segmentCount-1)*(e.gapWidth||e.themeStyle.circularGapWidth);d=(d-("Round"===e.cornerRadius?.9*(359.99===e.totalAngle?e.segmentCount:e.segmentCount-1)*c:0))/e.segmentCount;var g=this.widthToAngle(0,e.trackwidth,e.trackwidth/e.segmentCount,p);g-="Round"===e.cornerRadius&&359.99===e.totalAngle?this.widthToAngle(0,e.trackwidth,.45*c,p):0;var m=this.widthToAngle(0,e.trackwidth,d,p),y=this.widthToAngle(0,e.trackwidth,e.gapWidth||e.themeStyle.circularGapWidth,p);y+="Round"===e.cornerRadius?this.widthToAngle(0,e.trackwidth,.9*c,p):0;for(var f,v,P,b,S,C=e.renderer.createGroup({id:e.element.id+t}),k=Math.floor(u/g),R=Math.ceil((u-y*k)/m),T=(h+(e.enableRtl?-m:m))%360,w=0,A=e.progressThickness||e.themeStyle.circularProgressThickness,E=0;E<R;E++)f=n(i,o,s,h,P=e.enableRtl?e.startAngle-u>T?e.startAngle-u:T:e.startAngle+u<T?e.startAngle+u:T,e.enableRtl),w<e.segmentColor.length?(b=e.segmentColor[w],w++):(w=0,b=e.segmentColor[w],w++),S=new r.PathOption(e.element.id+t+E,"none",A,b,l,"0",f),v=e.renderer.drawPath(S),"Round"===e.cornerRadius&&v.setAttribute("stroke-linecap","round"),C.appendChild(v),h=P+(e.enableRtl?-y:y),T+=e.enableRtl?-m-y:m+y;return C},e.prototype.widthToAngle=function(e,t,r,i){return(r-e)/(t-e)*i},e}(),w=function(){function e(e){this.segment=new T,this.animation=new C,this.progress=e}return e.prototype.renderLinearTrack=function(){var e,t,i,n=this.progress,o=n.renderer.createGroup({id:n.element.id+"_LinearTrackGroup"});t=n.progressRect.width,i=new r.PathOption(n.element.id+"_Lineartrack","none",n.trackThickness||n.themeStyle.linearTrackThickness,n.argsData.trackColor||n.themeStyle.linearTrackColor,n.themeStyle.trackOpacity,"0",n.getPathLine(n.progressRect.x,t,n.trackThickness||n.themeStyle.linearTrackThickness)),e=n.renderer.drawPath(i),n.segmentCount>1&&(n.segmentSize=n.calculateSegmentSize(t,n.trackThickness||n.themeStyle.linearTrackThickness),e.setAttribute("stroke-dasharray",n.segmentSize)),"Round"===n.cornerRadius&&e.setAttribute("stroke-linecap","round"),o.appendChild(e),n.svgObject.appendChild(o)},e.prototype.renderLinearProgress=function(e,t){void 0===t&&(t=0);var i,n,o,s,a,l,c,h,p,u,d=this.progress;null===d.secondaryProgress||d.isIndeterminate||this.renderLinearBuffer(d),null!==d.argsData.value&&(a=d.calculateProgressRange(d.minimum,d.maximum,d.argsData.value),d.progressPreviousWidth=l=d.progressRect.width*(d.isIndeterminate?1:a),p=d.renderer.createGroup({id:d.element.id+"_LinearProgressGroup"}),0===d.segmentColor.length||d.isIndeterminate?(e?((s=r.getElement(d.element.id+"_Linearprogress")).setAttribute("d",d.getPathLine(d.progressRect.x,l,d.progressThickness||d.themeStyle.linearProgressThickness)),s.setAttribute("stroke",d.argsData.progressColor||d.themeStyle.circularProgressColor)):(o=new r.PathOption(d.element.id+"_Linearprogress","none",d.progressThickness||d.themeStyle.linearProgressThickness,d.argsData.progressColor||d.themeStyle.linearProgressColor,d.themeStyle.progressOpacity,"0",d.getPathLine(d.progressRect.x,l,d.progressThickness||d.themeStyle.linearProgressThickness)),s=d.renderer.drawPath(o)),d.segmentCount>1&&s.setAttribute("stroke-dasharray",d.segmentSize),"Round"===d.cornerRadius&&s.setAttribute("stroke-linecap","round")):s=this.segment.createLinearSegment(d,"_LinearProgressSegment",l,d.themeStyle.progressOpacity,d.progressThickness||d.themeStyle.linearProgressThickness),p.appendChild(s),d.animation.enable&&!d.isIndeterminate&&(null!==d.secondaryProgress?(n=d.calculateProgressRange(d.minimum,d.maximum,d.secondaryProgress),i=d.progressRect.width*n,u=d.animation.delay+(i-l)):u=d.animation.delay,c=d.createClipPath(d.clipPath,a,null,e?t:d.progressRect.x,e,d.progressThickness||d.themeStyle.linearProgressThickness),p.appendChild(d.clipPath),s.setAttribute("style","clip-path:url(#"+d.element.id+"_clippath)"),this.animation.doLinearAnimation(c,d,u,e?t:0)),d.isIndeterminate&&(h=d.createClipPath(d.clipPath,a,null,e?t:d.progressRect.x,e,d.progressThickness||d.themeStyle.linearProgressThickness),p.appendChild(d.clipPath),s.setAttribute("style","clip-path:url(#"+d.element.id+"_clippath)"),this.animation.doLinearIndeterminate(h,d)),d.svgObject.appendChild(p))},e.prototype.renderLinearBuffer=function(e){var t,i,n,o,s,a;i=e.calculateProgressRange(e.minimum,e.maximum,e.secondaryProgress),s=e.progressRect.width*i,o=e.renderer.createGroup({id:e.element.id+"_LinearBufferGroup"}),0===e.segmentColor.length||e.isIndeterminate?(a=new r.PathOption(e.element.id+"_Linearbuffer","none",e.progressThickness||e.themeStyle.linearProgressThickness,e.argsData.progressColor||e.themeStyle.linearProgressColor,e.themeStyle.bufferOpacity,"0",e.getPathLine(e.progressRect.x,s,e.progressThickness||e.themeStyle.linearProgressThickness)),t=e.renderer.drawPath(a),e.segmentCount>1&&t.setAttribute("stroke-dasharray",e.segmentSize),"Round"===e.cornerRadius&&t.setAttribute("stroke-linecap","round")):t=this.segment.createLinearSegment(e,"_LinearBufferSegment",s,e.themeStyle.bufferOpacity,e.progressThickness||e.themeStyle.linearProgressThickness),o.appendChild(t),e.animation.enable&&(n=e.createClipPath(e.bufferClipPath,i,null,e.progressRect.x,!1,e.progressThickness||e.themeStyle.linearProgressThickness),o.appendChild(e.bufferClipPath),t.setAttribute("style","clip-path:url(#"+e.element.id+"_clippathBuffer)"),this.animation.doLinearAnimation(n,e,e.animation.delay,0)),e.svgObject.appendChild(o)},e}(),A=function(){function e(e){this.segment=new T,this.animation=new C,this.progress=e}return e.prototype.renderCircularTrack=function(){var e,t,i,s,a,l,c,h,p,u,d,g,m=this.progress,y=m.renderer.createGroup({id:m.element.id+"_CircularTrackGroup"});a=m.startAngle,m.totalAngle=(m.endAngle-m.startAngle)%360,m.totalAngle=m.totalAngle<=0?360+m.totalAngle:m.totalAngle,m.totalAngle-=360===m.totalAngle?.01:0,l=(m.startAngle+(m.enableRtl?-m.totalAngle:+m.totalAngle))%360,e=m.progressRect.x+m.progressRect.width/2,t=m.progressRect.y+m.progressRect.height/2,p=Math.max(m.trackThickness,m.progressThickness)||Math.max(m.themeStyle.circularProgressThickness,m.themeStyle.circularTrackThickness),i=Math.min(m.progressRect.height,m.progressRect.width)/2-p/2,s=null===(s=o(m.radius,i))?0:s,d=m.enablePieProgress?m.argsData.trackColor||m.themeStyle.circularTrackColor:"none",g=m.enablePieProgress?0:m.trackThickness||m.themeStyle.circularTrackThickness,h=n(e,t,s,a,l,m.enableRtl,m.enablePieProgress),u=new r.PathOption(m.element.id+"_Circulartrack",d,g,m.argsData.trackColor||m.themeStyle.circularTrackColor,m.themeStyle.trackOpacity,"0",h),c=m.renderer.drawPath(u),m.trackwidth=c.getTotalLength(),m.segmentCount>1&&!m.enablePieProgress&&(m.segmentSize=m.calculateSegmentSize(m.trackwidth,m.trackThickness||m.themeStyle.linearTrackThickness),c.setAttribute("stroke-dasharray",m.segmentSize)),"Round"!==m.cornerRadius||m.enablePieProgress||c.setAttribute("stroke-linecap","round"),y.appendChild(c),m.svgObject.appendChild(y)},e.prototype.renderCircularProgress=function(e,t,i){var s,a,l,c,h,p,u=this.progress,d=u.startAngle;u.progressStartAngle=d;var g,m,y,f,v,P,b,S,C,k,R;if(s=u.progressRect.x+u.progressRect.width/2,a=u.progressRect.y+u.progressRect.height/2,v=Math.max(u.trackThickness,u.progressThickness)||Math.max(u.themeStyle.circularProgressThickness,u.themeStyle.circularTrackThickness),l=Math.min(u.progressRect.height,u.progressRect.width)/2-v/2,h=o(u.innerRadius,l),h=null===h?0:h,null===u.secondaryProgress||u.isIndeterminate||this.renderCircularBuffer(u,s,a,h,d),null!==u.argsData.value){if(C=u.renderer.createGroup({id:u.element.id+"_CircularProgressGroup"}),m=u.calculateProgressRange(u.minimum,u.maximum,u.argsData.value),0===u.segmentColor.length||u.isIndeterminate||u.enablePieProgress?(u.annotationEnd=m,g=n(s,a,h,d,c=u.isIndeterminate?(u.startAngle+(u.enableRtl?-u.totalAngle:+u.totalAngle))%360:m,u.enableRtl,u.enablePieProgress),k=u.enablePieProgress?u.argsData.progressColor||u.themeStyle.circularProgressColor:"none",R=u.enablePieProgress?0:u.progressThickness||u.themeStyle.circularProgressThickness,f=new r.PathOption(u.element.id+"_Circularprogress",k,R,u.argsData.progressColor||u.themeStyle.circularProgressColor,u.themeStyle.progressOpacity,"0",g),i?(p=(y=r.getElement(u.element.id+"_Circularprogress")).getAttribute("d"),y.setAttribute("d",g),y.setAttribute("stroke",u.argsData.progressColor||u.themeStyle.circularProgressColor)):y=u.renderer.drawPath(f),u.segmentCount>1&&!u.enablePieProgress&&(0!==(b=parseInt(u.radius,10)-parseInt(u.innerRadius,10))&&(S=u.trackwidth+(b<0?u.trackwidth*Math.abs(b)/parseInt(u.radius,10):-u.trackwidth*Math.abs(b)/parseInt(u.radius,10)),u.segmentSize=u.calculateSegmentSize(S,u.progressThickness||u.themeStyle.circularProgressThickness)),y.setAttribute("stroke-dasharray",u.segmentSize)),"Round"===u.cornerRadius&&y.setAttribute("stroke-linecap","round")):y=this.segment.createCircularSegment(u,"_CircularProgressSegment",s,a,h,u.argsData.value,u.themeStyle.progressOpacity,u.progressThickness||u.themeStyle.circularProgressThickness),u.progressEndAngle=c,i||(C.appendChild(y),u.svgObject.appendChild(C)),u.animation.enable&&!u.isIndeterminate){var T=null!==u.secondaryProgress?300:u.animation.delay;P=u.createClipPath(u.clipPath,null,i?p:"",null,i),C.appendChild(u.clipPath),y.setAttribute("style","clip-path:url(#"+u.element.id+"_clippath)"),this.animation.doCircularAnimation(s,a,h,d,m,P,u,u.progressThickness||u.themeStyle.circularProgressThickness,T,i?t:null)}u.isIndeterminate&&(P=u.createClipPath(u.clipPath,null,i?p:"",null,i),C.appendChild(u.clipPath),y.setAttribute("style","clip-path:url(#"+u.element.id+"_clippath)"),this.animation.doCircularIndeterminate(P,u,d,m,s,a,h,u.progressThickness||u.themeStyle.circularProgressThickness)),u.svgObject.appendChild(C)}},e.prototype.renderCircularBuffer=function(e,t,i,o,s){var a,l,c,h,p,u,d,g,m,y;p=e.renderer.createGroup({id:e.element.id+"_ CircularBufferGroup"}),l=e.calculateProgressRange(e.minimum,e.maximum,e.secondaryProgress),0===e.segmentColor.length||e.isIndeterminate||e.enablePieProgress?(u=n(t,i,o,s,l,e.enableRtl,e.enablePieProgress),m=e.enablePieProgress?e.argsData.progressColor||e.themeStyle.circularProgressColor:"none",y=e.enablePieProgress?0:e.progressThickness||e.themeStyle.circularProgressThickness,d=new r.PathOption(e.element.id+"_Circularbuffer",m,y,e.argsData.progressColor||e.themeStyle.circularProgressColor,e.themeStyle.bufferOpacity,"0",u),c=e.renderer.drawPath(d),e.segmentCount>1&&!e.enablePieProgress&&(0!==(h=parseInt(e.radius,10)-parseInt(e.innerRadius,10))&&(g=e.trackwidth+(h<0?e.trackwidth*Math.abs(h)/parseInt(e.radius,10):-e.trackwidth*Math.abs(h)/parseInt(e.radius,10)),e.segmentSize=e.calculateSegmentSize(g,e.progressThickness||e.themeStyle.circularProgressThickness)),c.setAttribute("stroke-dasharray",e.segmentSize)),"Round"===e.cornerRadius&&c.setAttribute("stroke-linecap","round")):c=this.segment.createCircularSegment(e,"_CircularBufferSegment",t,i,o,e.secondaryProgress,e.themeStyle.bufferOpacity,e.progressThickness||e.themeStyle.circularProgressThickness),p.appendChild(c),e.animation.enable&&(a=e.createClipPath(e.bufferClipPath,null,"",null,!1),p.appendChild(e.bufferClipPath),c.setAttribute("style","clip-path:url(#"+e.element.id+"_clippathBuffer)"),this.animation.doCircularAnimation(t,i,o,s,l,a,e,e.progressThickness||e.themeStyle.circularProgressThickness,e.animation.delay,null)),e.svgObject.appendChild(p)},e}(),E=function(){var e=function(t,r){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])})(t,r)};return function(t,r){function i(){this.constructor=t}e(t,r),t.prototype=null===r?Object.create(r):(i.prototype=r.prototype,new i)}}(),x=function(e,t,r,i){var n,o=arguments.length,s=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,r,i);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(s=(o<3?n(s):o>3?n(t,r,s):n(t,r))||s);return o>3&&s&&Object.defineProperty(t,r,s),s},F=function(e){function i(t,r){var i=e.call(this,t,r)||this;return i.linear=new w(i),i.circular=new A(i),i.annotateAnimation=new C,i}return E(i,e),i.prototype.getModuleName=function(){return"progressbar"},i.prototype.preRender=function(){this.unWireEvents(),this.initPrivateVariable(),this.wireEvents()},i.prototype.initPrivateVariable=function(){this.progressRect=new p(0,0,0,0),this.progressSize=new u(0,0)},i.prototype.render=function(){this.trigger("load",{progressBar:this}),this.element.style.display="block",this.element.style.position="relative",this.calculateProgressBarSize(),this.setTheme(),this.createSVG(),this.renderElements(),this.trigger("loaded",{progressBar:this}),this.renderComplete(),this.controlRenderedTimeStamp=(new Date).getTime()},i.prototype.calculateProgressBarSize=function(){var e=this.element.clientWidth||this.element.offsetWidth,t=this.element.clientHeight,r="Linear"===this.type?200:120,i="Linear"===this.type?30:120,n=Math.max(this.progressThickness,this.trackThickness);i="Linear"===this.type&&n>i-10?n+10:i,this.progressSize.width=o(this.width,e)||e||r,this.progressSize.height=o(this.height,t)||t||i,this.progressRect.x=this.margin.left,this.progressRect.y=this.margin.top,this.progressRect.width=this.progressSize.width-(this.margin.left+this.margin.right),this.progressRect.height=this.progressSize.height-(this.margin.top+this.margin.bottom)},i.prototype.renderAnnotations=function(){this.createSecElement(),this.renderAnnotation(),this.setSecondaryElementPosition()},i.prototype.renderElements=function(){this.renderTrack(),this.renderProgress(),this.renderAnnotations(),this.renderLabel()},i.prototype.createSecElement=function(){var e=document.getElementById(this.element.id+"Secondary_Element");if(e)return e.innerHTML="",void(this.secElement=e);this.secElement=t.createElement("div",{id:this.element.id+"Secondary_Element",styles:"position: absolute"}),this.element.appendChild(this.secElement)},i.prototype.setSecondaryElementPosition=function(){var e=this.secElement,t=this.element.getBoundingClientRect(),i=r.getElement(this.svgObject.id).getBoundingClientRect();e.style.left=Math.max(i.left-t.left,0)+"px",e.style.top=Math.max(i.top-t.top,0)+"px"},i.prototype.createSVG=function(){this.removeSvg(),this.renderer=new r.SvgRenderer(this.element.id),this.svgObject=this.renderer.createSvg({id:this.element.id+"SVG",width:this.progressSize.width,height:this.progressSize.height,style:"background-color:"+this.themeStyle.backgroundColor})},i.prototype.clipPathElement=function(){this.clipPath=this.renderer.createClipPath({id:this.element.id+"_clippath"}),this.bufferClipPath=this.renderer.createClipPath({id:this.element.id+"_clippathBuffer"})},i.prototype.renderTrack=function(){this.argsData={value:this.value,progressColor:this.progressColor,trackColor:this.trackColor},this.argsData.value===this.maximum?this.trigger("progressCompleted",this.argsData):this.trigger("valueChanged",this.argsData),"Linear"===this.type?this.linear.renderLinearTrack():"Circular"===this.type&&this.circular.renderCircularTrack()},i.prototype.renderProgress=function(){this.clipPathElement(),"Linear"===this.type?this.linear.renderLinearProgress():"Circular"===this.type&&this.circular.renderCircularProgress(),this.element.appendChild(this.svgObject)},i.prototype.renderLabel=function(){var e,t=this.animation.enable;if("Linear"===this.type&&this.showProgressValue){var i=void 0,n=void 0,o=void 0,s=this.calculateProgressRange(this.minimum,this.maximum,this.value);this.value===this.maximum&&(n=100,o=this.progressRect.width*s-10),(this.value>this.maximum||this.value<this.minimum||this.value===this.minimum)&&(n=0,o=this.progressRect.width*s+10),this.value>this.minimum&&this.value<this.maximum&&(n=Math.round(100*this.value/(this.maximum-this.minimum)),o=this.progressRect.width*s-10);p={cancel:!1,text:this.label?this.label:String(n)+"%",color:this.labelStyle.color};if(this.trigger("textRender",p),!p.cancel){e=r.measureText(p.text,this.labelStyle);u={id:this.element.id+"_linearLabel","font-size":this.labelStyle.size||this.themeStyle.linearFontSize,"font-style":this.labelStyle.fontStyle||this.themeStyle.linearFontStyle,"font-family":this.labelStyle.fontFamily||this.themeStyle.linearFontFamily,"font-weight":this.labelStyle.fontWeight,fill:p.color||this.themeStyle.fontColor,x:o,y:this.progressRect.y+this.progressRect.height/2+e.height/4,"text-anchor":"middle",visibility:t?"hidden":"visible"};i=this.renderer.createText(u,p.text),this.labelElement=i,this.svgObject.appendChild(i)}}else if("Circular"===this.type&&this.showProgressValue){var a=void 0,l=void 0,c=this.progressRect.x+this.progressRect.width/2,h=this.progressRect.y+this.progressRect.height/2;(this.value===this.minimum||this.value>this.maximum)&&(l=0),this.value===this.maximum&&(l=100),this.value>this.minimum&&this.value<this.maximum&&(l=Math.round(100*this.value/(this.maximum-this.minimum)));var p={cancel:!1,text:this.label?this.label:String(l)+"%",color:this.labelStyle.color};if(this.trigger("textRender",p),!p.cancel){e=r.measureText(p.text,this.labelStyle);var u={id:this.element.id+"_circularLabel",fill:p.color||this.themeStyle.fontColor,"font-size":this.labelStyle.size||this.themeStyle.circularFontSize,"font-style":this.labelStyle.fontStyle||this.themeStyle.circularFontStyle,"font-family":this.labelStyle.fontFamily||this.themeStyle.circularFontFamily,"font-weight":this.labelStyle.fontWeight,height:this.progressRect.height,width:this.progressRect.width,visibility:t?"hidden":"visible",x:c,y:h+e.height/2,"text-anchor":"middle"};a=this.renderer.createText(u,p.text),this.labelElement=a,this.svgObject.appendChild(a)}}},i.prototype.getPathLine=function(e,t,r){var i=this.enableRtl?"Round"===this.cornerRadius?e+this.progressRect.width-.45*r:e+this.progressRect.width:"Round"===this.cornerRadius?e+.45*r:e,n=this.enableRtl?"Round"===this.cornerRadius?i-t+.9*r:i-t:"Round"===this.cornerRadius?i+t-.9*r:i+t;return"M"+i+" "+(this.progressRect.y+this.progressRect.height/2)+"L"+n+" "+(this.progressRect.y+this.progressRect.height/2)},i.prototype.calculateProgressRange=function(e,t,r){var i;return"Linear"===this.type?(i=(r-e)/(t-e),r<e||r>t?0:i):(i=(r-e)/(t-e)*this.totalAngle,i=(this.startAngle+(this.enableRtl?-i:+i))%360,r<e||r>t?this.startAngle:i)},i.prototype.calculateSegmentSize=function(e,t){var r="Circular"===this.type&&359.99===this.totalAngle?this.segmentCount:this.segmentCount-1,i=359.99===this.totalAngle||"Linear"===this.type?this.segmentCount:this.segmentCount-1,n=this.gapWidth||("Linear"===this.type?this.themeStyle.linearGapWidth:this.themeStyle.circularGapWidth),o=e-r*n;return o=(o-("Round"===this.cornerRadius?i*(.9*t):0))/this.segmentCount,n+="Round"===this.cornerRadius?.9*t:0," "+o+" "+n},i.prototype.createClipPath=function(e,t,i,n,o,s){var a,l,c,h,u,g;return"Linear"===this.type?o?a=r.getElement(this.element.id+"_clippathrect"):(h=this.enableRtl?n+this.progressRect.width:n,h+="Round"===this.cornerRadius?this.enableRtl?.45*s:-.45*s:0,u=this.progressRect.y+this.progressRect.height/2-s/2,g=this.progressRect.width*t,g+="Round"===this.cornerRadius?.9*s:0,l=new d(this.element.id+"_clippathrect","transparent",1,"transparent",1,new p(h,u,s,g)),a=this.renderer.drawRectangle(l),e.appendChild(a)):o?(a=r.getElement(this.element.id+"_clippathcircle")).setAttribute("d",i):(c=new r.PathOption(this.element.id+"_clippathcircle","transparent",10,"transparent",1,"0",i),a=this.renderer.drawPath(c),e.appendChild(a)),a},i.prototype.setTheme=function(){switch(this.themeStyle=c(this.theme),this.theme){case"Bootstrap":case"Bootstrap4":this.cornerRadius="Auto"===this.cornerRadius?"Round":this.cornerRadius;break;default:this.cornerRadius="Auto"===this.cornerRadius?"Square":this.cornerRadius}},i.prototype.renderAnnotation=function(){this.progressAnnotationModule&&this.annotations.length>0&&this.progressAnnotationModule.renderAnnotations(this.secElement)},i.prototype.progressResize=function(e){var t=this;if(!((new Date).getTime()>this.controlRenderedTimeStamp+800))return!1;var r={bar:this,name:"resized",currentSize:new u(0,0),previousSize:new u(this.progressSize.width,this.progressSize.height)};return this.resizeTo&&clearTimeout(this.resizeTo),this.resizeTo=setTimeout(function(){if(t.isDestroyed)return void clearTimeout(t.resizeTo);r.currentSize=t.progressSize,t.trigger("resized",r),t.secElement.innerHTML="",t.calculateProgressBarSize(),t.createSVG(),t.renderElements()},500),!1},i.prototype.progressMouseClick=function(e){this.mouseEvent("mouseClick",e)},i.prototype.progressMouseDown=function(e){this.mouseEvent("mouseDown",e)},i.prototype.progressMouseMove=function(e){this.mouseEvent("mouseMove",e)},i.prototype.progressMouseUp=function(e){this.mouseEvent("mouseUp",e)},i.prototype.progressMouseLeave=function(e){this.mouseEvent("mouseLeave",e)},i.prototype.mouseEvent=function(e,t){var r=t.target;this.trigger(e,{target:r.id})},i.prototype.unWireEvents=function(){var e=t.Browser.touchStartEvent,r=t.Browser.touchMoveEvent,i=t.Browser.touchEndEvent,n=t.Browser.isPointer?"pointerleave":"mouseleave";t.EventHandler.remove(this.element,"click",this.progressMouseClick),t.EventHandler.remove(this.element,e,this.progressMouseDown),t.EventHandler.remove(this.element,r,this.progressMouseMove),t.EventHandler.remove(this.element,i,this.progressMouseUp),t.EventHandler.remove(this.element,n,this.progressMouseLeave),window.removeEventListener(t.Browser.isTouch&&"orientation"in window&&"onorientationchange"in window?"orientationchange":"resize",this.resizeBounds)},i.prototype.wireEvents=function(){var e=t.Browser.touchStartEvent,r=t.Browser.touchMoveEvent,i=t.Browser.touchEndEvent,n=t.Browser.isPointer?"pointerleave":"mouseleave";t.EventHandler.add(this.element,"click",this.progressMouseClick,this),t.EventHandler.add(this.element,e,this.progressMouseDown,this),t.EventHandler.add(this.element,r,this.progressMouseMove,this),t.EventHandler.add(this.element,i,this.progressMouseUp,this),t.EventHandler.add(this.element,n,this.progressMouseLeave,this),this.resizeBounds=this.progressResize.bind(this),window.addEventListener(t.Browser.isTouch&&"orientation"in window&&"onorientationchange"in window?"orientationchange":"resize",this.resizeBounds)},i.prototype.removeSvg=function(){var e=document.getElementById(this.element.id+"SVG");e&&t.remove(e)},i.prototype.onPropertyChanged=function(e,t){for(var r=0,i=Object.keys(e);r<i.length;r++)switch(i[r]){case"annotations":if(this.secElement.innerHTML="",this.renderAnnotation(),this.animation.enable&&!this.isIndeterminate){var n=document.getElementById(this.element.id+"Annotation0").children[0];this.annotateAnimation.doAnnotationAnimation(n,this,this.startAngle,this.annotationEnd)}break;case"value":this.argsData={value:this.value,progressColor:this.progressColor,trackColor:this.trackColor},this.argsData.value===this.maximum?this.trigger("progressCompleted",this.argsData):this.trigger("valueChanged",this.argsData),"Circular"===this.type?this.circular.renderCircularProgress(this.progressStartAngle,this.progressEndAngle,!0):this.linear.renderLinearProgress(!0,this.progressPreviousWidth)}},i.prototype.requiredModules=function(){var e=[];return this.annotations.some(function(e){return null!==e.content})&&e.push({member:"ProgressAnnotation",args:[this]}),e},i.prototype.getPersistData=function(){return" "},i.prototype.destroy=function(){this.unWireEvents(),e.prototype.destroy.call(this),this.removeSvg(),this.svgObject=null,this.element.classList.remove("e-progressbar")},x([t.Property("Linear")],i.prototype,"type",void 0),x([t.Property(null)],i.prototype,"value",void 0),x([t.Property(null)],i.prototype,"secondaryProgress",void 0),x([t.Property(0)],i.prototype,"minimum",void 0),x([t.Property(100)],i.prototype,"maximum",void 0),x([t.Property(0)],i.prototype,"startAngle",void 0),x([t.Property(0)],i.prototype,"endAngle",void 0),x([t.Property("100%")],i.prototype,"radius",void 0),x([t.Property("100%")],i.prototype,"innerRadius",void 0),x([t.Property(1)],i.prototype,"segmentCount",void 0),x([t.Property(null)],i.prototype,"gapWidth",void 0),x([t.Property("")],i.prototype,"segmentColor",void 0),x([t.Property("Auto")],i.prototype,"cornerRadius",void 0),x([t.Property(null)],i.prototype,"height",void 0),x([t.Property(null)],i.prototype,"width",void 0),x([t.Property(!1)],i.prototype,"isIndeterminate",void 0),x([t.Property(!1)],i.prototype,"enableRtl",void 0),x([t.Property(null)],i.prototype,"trackColor",void 0),x([t.Property(null)],i.prototype,"progressColor",void 0),x([t.Property(0)],i.prototype,"trackThickness",void 0),x([t.Property(0)],i.prototype,"progressThickness",void 0),x([t.Property(!1)],i.prototype,"enablePieProgress",void 0),x([t.Property("Fabric")],i.prototype,"theme",void 0),x([t.Property(!1)],i.prototype,"showProgressValue",void 0),x([t.Complex({size:null,color:null,fontStyle:null,fontWeight:"Normal",fontFamily:null},v)],i.prototype,"labelStyle",void 0),x([t.Property("")],i.prototype,"label",void 0),x([t.Complex({},f)],i.prototype,"margin",void 0),x([t.Complex({},P)],i.prototype,"animation",void 0),x([t.Event()],i.prototype,"load",void 0),x([t.Event()],i.prototype,"textRender",void 0),x([t.Event()],i.prototype,"loaded",void 0),x([t.Event()],i.prototype,"valueChanged",void 0),x([t.Event()],i.prototype,"progressCompleted",void 0),x([t.Event()],i.prototype,"animationComplete",void 0),x([t.Event()],i.prototype,"mouseClick",void 0),x([t.Event()],i.prototype,"mouseMove",void 0),x([t.Event()],i.prototype,"mouseUp",void 0),x([t.Event()],i.prototype,"mouseDown",void 0),x([t.Event()],i.prototype,"mouseLeave",void 0),x([t.Collection([{}],b)],i.prototype,"annotations",void 0),i=x([t.NotifyPropertyChanges],i)}(t.Component);return F.Inject(R),e.ProgressBar=F,e.Margin=f,e.Font=v,e.Animation=P,e.ProgressAnnotationSettings=b,e.ProgressAnnotation=R,e.Rect=p,e.Size=u,e.RectOption=d,e.degreeToLocation=i,e.getPathArc=n,e.stringToNumber=o,e.effect=s,e.annotationRender="annotationRender",e.getElement=a,e.removeElement=l,e.ProgressLocation=g,e.ProgressAnimation=C,e}({},ej.base,ej.svgbase),this.ejs=ej;
 //# sourceMappingURL=ej2-progressbar.min.js.map

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 18.1.36-beta
+*  version : 18.1.42
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
@@ -5,0 +5,0 @@ *  Use of this code is subject to the terms of our license.

package.json

@@ -5,3 +5,3 @@ {
   "_inBundle": false,
-  "_integrity": "sha512-XhcoDV4ObBjJGNok/+4qM1bbsIXsW1aD4Xgw4t3uqVJv/+XNfmMBLjv2VdPa9I+VwiPR4nfIniCzulTc0tif4Q==",
+  "_integrity": "sha512-MOeXGRaVUx6r3K/TlkiZb4XYdmoxOte0Bnwi6SPaPISxT/0dAXRxENSFTwXk2IQCxQr1OsKpcxcQghkzRbMqMg==",
   "_location": "/@syncfusion/ej2-progressbar",
@@ -22,6 +22,9 @@ "_phantomChildren": {},
     "/",
-    "/@syncfusion/ej2"
+    "/@syncfusion/ej2",
+    "/@syncfusion/ej2-angular-progressbar",
+    "/@syncfusion/ej2-react-progressbar",
+    "/@syncfusion/ej2-vue-progressbar"
   ],
   "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-progressbar/-/ej2-progressbar-18.1.1.tgz",
-  "_shasum": "57b8e9a39a8ed04c70000b49eb70f71202a22792",
+  "_shasum": "c2b87725ac52a5e5c17d39dc3ff4f2c23d384ca2",
   "_spec": "@syncfusion/ej2-progressbar@*",
@@ -34,5 +37,5 @@ "_where": "/jenkins/workspace/automation_release_18.1.0.1-52JLNOGRCDHXRVQM3W564VPLFCPHWUYDYU3I3DVRABSR7F6AIFYQ/packages/included",
   "dependencies": {
-    "@syncfusion/ej2-base": "~18.1.36-beta",
-    "@syncfusion/ej2-data": "~18.1.36-beta",
-    "@syncfusion/ej2-svg-base": "~18.1.36-beta"
+    "@syncfusion/ej2-base": "~18.1.42",
+    "@syncfusion/ej2-data": "~18.1.42",
+    "@syncfusion/ej2-svg-base": "~18.1.42"
   },
@@ -57,4 +60,4 @@ "deprecated": false,
   "typings": "index.d.ts",
-  "version": "18.1.36-beta",
+  "version": "18.1.42",
   "sideEffects": false
 }

src/progressbar/model/annotation.d.ts

@@ -11,3 +11,3 @@ import { ProgressBar } from '../progressbar';
     /**
-     * Constructor for chart and accumulation annotation
+     * Constructor for progress annotation
      * @param control
@@ -14,0 +14,0 @@ */

src/progressbar/model/annotation.js

@@ -8,3 +8,3 @@ import { createElement } from '@syncfusion/ej2-base';
     /**
-     * Constructor for chart and accumulation annotation
+     * Constructor for progress annotation
      * @param control
@@ -11,0 +11,0 @@ */

src/progressbar/model/constant.d.ts

@@ -17,1 +17,21 @@ /**
 export declare const progressCompleted: string;
+/**
+ * mouseClick event
+ */
+export declare const mouseClick: string;
+/**
+ * mouseDown event
+ */
+export declare const mouseDown: string;
+/**
+ * mouseUp event
+ */
+export declare const mouseUp: string;
+/**
+ * mouseMove event
+ */
+export declare const mouseMove: string;
+/**
+ * mouseLeave event
+ */
+export declare const mouseLeave: string;

src/progressbar/model/constant.js

@@ -17,1 +17,21 @@ /**
 export var progressCompleted = 'progressCompleted';
+/**
+ * mouseClick event
+ */
+export var mouseClick = 'mouseClick';
+/**
+ * mouseDown event
+ */
+export var mouseDown = 'mouseDown';
+/**
+ * mouseUp event
+ */
+export var mouseUp = 'mouseUp';
+/**
+ * mouseMove event
+ */
+export var mouseMove = 'mouseMove';
+/**
+ * mouseLeave event
+ */
+export var mouseLeave = 'mouseLeave';

src/progressbar/model/progress-annotation.d.ts

@@ -11,4 +11,5 @@ import { ProgressBar } from '../progressbar';
     private parentElement;
+    private animation;
     /**
-     * Constructor for Progress annotation
+     * Constructor for ProgressBar annotation
      * @private
@@ -18,3 +19,3 @@ */
     /**
-     * Method to render the annotation for chart
+     * Method to render the annotation for ProgressBar
      * @param element
@@ -21,0 +22,0 @@ * @private

src/progressbar/model/progress-annotation.js

@@ -16,2 +16,3 @@ var __extends = (this && this.__extends) || (function () {
 import { AnnotationBase } from './annotation';
+import { ProgressAnimation } from '../utils/progress-animation';
 /**
@@ -23,3 +24,3 @@ * Class for progress annotation
     /**
-     * Constructor for Progress annotation
+     * Constructor for ProgressBar annotation
      * @private
@@ -29,2 +30,3 @@ */
         var _this = _super.call(this, control) || this;
+        _this.animation = new ProgressAnimation();
         _this.progress = control;
@@ -35,3 +37,3 @@ _this.annotations = annotations;
     /**
-     * Method to render the annotation for chart
+     * Method to render the annotation for ProgressBar
      * @param element
@@ -54,2 +56,6 @@ * @private
         }
+        if (this.progress.animation.enable && !this.progress.isIndeterminate) {
+            var annotationElement = document.getElementById(this.progress.element.id + 'Annotation0').children[0];
+            this.animation.doAnnotationAnimation(annotationElement, this.progress, this.progress.startAngle, this.progress.annotationEnd);
+        }
     };
@@ -56,0 +62,0 @@ /**

src/progressbar/model/progress-interface.d.ts

@@ -82,1 +82,4 @@ import { ProgressBar } from '../progressbar';
 }
+export interface IMouseEventArgs {
+    target: string;
+}

src/progressbar/progressbar-model.d.ts

@@ -1,2 +0,2 @@
-import { Component, Property, NotifyPropertyChanges, Browser, Complex, Event, Collection } from '@syncfusion/ej2-base';import { EmitType, INotifyPropertyChanged, createElement, remove, ModuleDeclaration } from '@syncfusion/ej2-base';import { Rect, Size, getPathArc, RectOption, stringToNumber } from './utils/helper';import { doLinearAnimation, doCircularAnimation, doCircularIndeterminate, doAnnotationAnimation } from './utils/progress-animation';import { MarginModel, AnimationModel, FontModel } from './model/progress-base-model';import { Margin, Animation, Font } from './model/progress-base';import { ILoadedEventArgs, IProgressStyle, IProgressValueEventArgs } from './model/progress-interface';import { ITextRenderEventArgs, IProgressResizeEventArgs } from './model/progress-interface';import { SvgRenderer, PathOption, getElement, measureText } from '@syncfusion/ej2-svg-base';import { ProgressType, CornerType, ProgressTheme } from './utils/enum';import { getProgressThemeColor } from './utils/theme';import { lineCapRadius, completeAngle, valueChanged, progressCompleted } from './model/constant';import { ProgressAnnotation } from './model/index';import { ProgressAnnotationSettingsModel } from './model/index';import { ProgressAnnotationSettings } from './model/index';
+import { Component, Property, NotifyPropertyChanges, Browser, Complex, Event, Collection, EventHandler } from '@syncfusion/ej2-base';import { EmitType, INotifyPropertyChanged, createElement, remove, ModuleDeclaration } from '@syncfusion/ej2-base';import { Rect, Size, RectOption, stringToNumber } from './utils/helper';import { MarginModel, AnimationModel, FontModel } from './model/progress-base-model';import { Margin, Animation, Font } from './model/progress-base';import { ILoadedEventArgs, IProgressStyle, IProgressValueEventArgs } from './model/progress-interface';import { ITextRenderEventArgs, IProgressResizeEventArgs, IMouseEventArgs } from './model/progress-interface';import { SvgRenderer, PathOption, getElement, measureText } from '@syncfusion/ej2-svg-base';import { ProgressType, CornerType, ProgressTheme } from './utils/enum';import { getProgressThemeColor } from './utils/theme';import { lineCapRadius, completeAngle, valueChanged, progressCompleted } from './model/constant';import { mouseClick, mouseDown, mouseLeave, mouseMove, mouseUp } from './model/constant';import { ProgressAnnotation } from './model/index';import { ProgressAnnotationSettingsModel } from './model/index';import { ProgressAnnotationSettings } from './model/index';import { Linear } from './types/linear-progress';import { Circular } from './types/circular-progress';import { ProgressAnimation } from './utils/progress-animation';
 import {ComponentModel} from '@syncfusion/ej2-base';
@@ -136,2 +136,8 @@
     /**
+     * pie view
+     * @default false
+     */
+    enablePieProgress?: boolean;
+
+    /**
      * theme style
@@ -207,2 +213,32 @@ * @default Fabric
     /**
+     * Trigger after mouse click
+     * @event
+     */
+    mouseClick?: EmitType<IMouseEventArgs>;
+
+    /**
+     * Trigger after mouse move
+     * @event
+     */
+    mouseMove?: EmitType<IMouseEventArgs>;
+
+    /**
+     * Trigger after mouse up
+     * @event
+     */
+    mouseUp?: EmitType<IMouseEventArgs>;
+
+    /**
+     * Trigger after mouse down
+     * @event
+     */
+    mouseDown?: EmitType<IMouseEventArgs>;
+
+    /**
+     * Trigger after mouse down
+     * @event
+     */
+    mouseLeave?: EmitType<IMouseEventArgs>;
+
+    /**
      * The configuration for annotation in Progressbar.
@@ -209,0 +245,0 @@ */

src/progressbar/progressbar.d.ts

@@ -7,3 +7,3 @@ import { Component } from '@syncfusion/ej2-base';
 import { ILoadedEventArgs, IProgressStyle, IProgressValueEventArgs } from './model/progress-interface';
-import { ITextRenderEventArgs } from './model/progress-interface';
+import { ITextRenderEventArgs, IMouseEventArgs } from './model/progress-interface';
 import { SvgRenderer } from '@syncfusion/ej2-svg-base';
@@ -13,2 +13,5 @@ import { ProgressType, CornerType, ProgressTheme } from './utils/enum';
 import { ProgressAnnotationSettingsModel } from './model/index';
+import { Linear } from './types/linear-progress';
+import { Circular } from './types/circular-progress';
+import { ProgressAnimation } from './utils/progress-animation';
 /**
@@ -125,2 +128,7 @@ *  progress bar control
     /**
+     * pie view
+     * @default false
+     */
+    enablePieProgress: boolean;
+    /**
      * theme style
@@ -183,2 +191,27 @@ * @default Fabric
     /**
+     * Trigger after mouse click
+     * @event
+     */
+    mouseClick: EmitType<IMouseEventArgs>;
+    /**
+     * Trigger after mouse move
+     * @event
+     */
+    mouseMove: EmitType<IMouseEventArgs>;
+    /**
+     * Trigger after mouse up
+     * @event
+     */
+    mouseUp: EmitType<IMouseEventArgs>;
+    /**
+     * Trigger after mouse down
+     * @event
+     */
+    mouseDown: EmitType<IMouseEventArgs>;
+    /**
+     * Trigger after mouse down
+     * @event
+     */
+    mouseLeave: EmitType<IMouseEventArgs>;
+    /**
      * The configuration for annotation in Progressbar.
@@ -214,7 +247,7 @@ */
     /** @private */
-    private progressStartAngle;
+    progressStartAngle: number;
     /** @private */
-    private progressPreviousWidth;
+    progressPreviousWidth: number;
     /** @private */
-    private progressEndAngle;
+    progressEndAngle: number;
     /** @private */
@@ -230,2 +263,8 @@ redraw: boolean;
     labelElement: Element;
+    /** @private */
+    linear: Linear;
+    /** @private */
+    circular: Circular;
+    /** @private */
+    annotateAnimation: ProgressAnimation;
     /** ProgressAnnotation module to use annotations */
@@ -242,12 +281,5 @@ progressAnnotationModule: ProgressAnnotation;
     protected preRender(): void;
+    private initPrivateVariable;
     protected render(): void;
     /**
-     * Set theme values
-     */
-    private SetThemeValues;
-    /**
-     * calculate Initial Bounds
-     */
-    private calculateProgressBarBounds;
-    /**
      * calculate size of the progress bar
@@ -271,14 +303,9 @@ */
     private clipPathElement;
-    private createTrack;
-    private createLinearProgress;
-    private createCircularProgress;
-    private createLabel;
-    private getPathLine;
-    private calculateProgressRange;
-    private calculateSegmentSize;
-    private createClipPath;
-    private createLinearSegment;
-    private getLinearSegmentPath;
-    private createCircularSegment;
-    private widthToAngle;
+    private renderTrack;
+    private renderProgress;
+    private renderLabel;
+    getPathLine(x: number, width: number, thickness: number): string;
+    calculateProgressRange(min: number, max: number, value: number): number;
+    calculateSegmentSize(width: number, thickness: number): string;
+    createClipPath(clipPath?: Element, width?: number, d?: string, x?: number, refresh?: boolean, thickness?: number): Element;
     /**
@@ -298,2 +325,8 @@ * Theming for progress bar
     private progressResize;
+    private progressMouseClick;
+    private progressMouseDown;
+    private progressMouseMove;
+    private progressMouseUp;
+    private progressMouseLeave;
+    private mouseEvent;
     /**
@@ -300,0 +333,0 @@ * Method to un-bind events for progress bar

src/progressbar/progressbar.js

@@ -20,6 +20,5 @@ var __extends = (this && this.__extends) || (function () {
 };
-import { Component, Property, NotifyPropertyChanges, Browser, Complex, Event, Collection } from '@syncfusion/ej2-base';
+import { Component, Property, NotifyPropertyChanges, Browser, Complex, Event, Collection, EventHandler } from '@syncfusion/ej2-base';
 import { createElement, remove } from '@syncfusion/ej2-base';
-import { Rect, Size, getPathArc, RectOption, stringToNumber } from './utils/helper';
-import { doLinearAnimation, doCircularAnimation, doCircularIndeterminate, doAnnotationAnimation } from './utils/progress-animation';
+import { Rect, Size, RectOption, stringToNumber } from './utils/helper';
 import { Margin, Animation, Font } from './model/progress-base';
@@ -29,3 +28,7 @@ import { SvgRenderer, PathOption, getElement, measureText } from '@syncfusion/ej2-svg-base';
 import { lineCapRadius, completeAngle, valueChanged, progressCompleted } from './model/constant';
+import { mouseClick, mouseDown, mouseLeave, mouseMove, mouseUp } from './model/constant';
 import { ProgressAnnotationSettings } from './model/index';
+import { Linear } from './types/linear-progress';
+import { Circular } from './types/circular-progress';
+import { ProgressAnimation } from './utils/progress-animation';
 /**
@@ -37,3 +40,10 @@ *  progress bar control
     function ProgressBar(options, element) {
-        return _super.call(this, options, element) || this;
+        var _this = _super.call(this, options, element) || this;
+        /** @private */
+        _this.linear = new Linear(_this);
+        /** @private */
+        _this.circular = new Circular(_this);
+        /** @private */
+        _this.annotateAnimation = new ProgressAnimation();
+        return _this;
     }
@@ -45,12 +55,16 @@ ProgressBar.prototype.getModuleName = function () {
         this.unWireEvents();
+        this.initPrivateVariable();
+        this.wireEvents();
+    };
+    ProgressBar.prototype.initPrivateVariable = function () {
         this.progressRect = new Rect(0, 0, 0, 0);
         this.progressSize = new Size(0, 0);
-        this.wireEvents();
     };
     ProgressBar.prototype.render = function () {
         this.trigger('load', { progressBar: this });
+        this.element.style.display = 'block';
+        this.element.style.position = 'relative';
         this.calculateProgressBarSize();
-        this.calculateProgressBarBounds();
-        this.SetThemeValues();
-        this.renderAnnotations();
+        this.setTheme();
+        this.createSVG();
         this.renderElements();
@@ -62,25 +76,2 @@ this.trigger('loaded', { progressBar: this });
     /**
-     * Set theme values
-     */
-    ProgressBar.prototype.SetThemeValues = function () {
-        switch (this.theme) {
-            case 'Bootstrap':
-            case 'Bootstrap4':
-                this.gapWidth = (!this.gapWidth) ? 4 : this.gapWidth;
-                this.cornerRadius = this.cornerRadius === 'Auto' ? 'Round' : this.cornerRadius;
-                break;
-            default:
-                this.cornerRadius = this.cornerRadius === 'Auto' ? 'Square' : this.cornerRadius;
-        }
-    };
-    /**
-     * calculate Initial Bounds
-     */
-    ProgressBar.prototype.calculateProgressBarBounds = function () {
-        this.progressRect.x = this.margin.left;
-        this.progressRect.y = this.margin.top;
-        this.progressRect.width -= this.margin.left + this.margin.right;
-        this.progressRect.height -= this.margin.top + this.margin.bottom;
-    };
-    /**
      * calculate size of the progress bar
@@ -98,4 +89,6 @@ */
         this.progressSize.height = stringToNumber(this.height, containerHeight) || containerHeight || height;
-        this.progressRect.width = this.progressSize.width;
-        this.progressRect.height = this.progressSize.height;
+        this.progressRect.x = this.margin.left;
+        this.progressRect.y = this.margin.top;
+        this.progressRect.width = this.progressSize.width - (this.margin.left + this.margin.right);
+        this.progressRect.height = this.progressSize.height - (this.margin.top + this.margin.bottom);
     };
@@ -108,2 +101,3 @@ /**
         this.renderAnnotation();
+        this.setSecondaryElementPosition();
     };
@@ -114,14 +108,6 @@ /**
     ProgressBar.prototype.renderElements = function () {
-        this.element.style.display = 'block';
-        this.element.style.position = 'relative';
-        this.removeSvg();
-        this.setTheme();
-        this.createSVG();
-        this.clipPathElement();
-        this.createTrack();
-        this.createLinearProgress();
-        this.createCircularProgress();
-        this.createLabel();
-        this.element.appendChild(this.svgObject);
-        this.setSecondaryElementPosition();
+        this.renderTrack();
+        this.renderProgress();
+        this.renderAnnotations();
+        this.renderLabel();
     };
@@ -152,2 +138,3 @@ ProgressBar.prototype.createSecElement = function () {
     ProgressBar.prototype.createSVG = function () {
+        this.removeSvg();
         this.renderer = new SvgRenderer(this.element.id);
@@ -165,15 +152,3 @@ this.svgObject = this.renderer.createSvg({
     };
-    ProgressBar.prototype.createTrack = function () {
-        var linearTrack;
-        var linearTrackWidth;
-        var centerX;
-        var centerY;
-        var size;
-        var radius;
-        var startAngle;
-        var endAngle;
-        var circularTrack;
-        var circularPath;
-        var option;
-        var trackThickness;
+    ProgressBar.prototype.renderTrack = function () {
         this.argsData = {
@@ -191,226 +166,19 @@ value: this.value,
         if (this.type === 'Linear') {
-            linearTrackWidth = this.progressRect.width;
-            option = new PathOption(this.element.id + '_Lineartrack', 'none', (this.trackThickness || this.themeStyle.linearTrackThickness), (this.argsData.trackColor || this.themeStyle.linearTrackColor), this.themeStyle.trackOpacity, '0', this.getPathLine(this.progressRect.x, linearTrackWidth, (this.trackThickness || this.themeStyle.linearTrackThickness)));
-            linearTrack = this.renderer.drawPath(option);
-            if (this.segmentCount > 1) {
-                this.segmentSize = this.calculateSegmentSize(linearTrackWidth, (this.trackThickness || this.themeStyle.linearTrackThickness));
-                linearTrack.setAttribute('stroke-dasharray', this.segmentSize);
-            }
-            if (this.cornerRadius === 'Round') {
-                linearTrack.setAttribute('stroke-linecap', 'round');
-            }
-            this.svgObject.appendChild(linearTrack);
+            this.linear.renderLinearTrack();
         }
         else if (this.type === 'Circular') {
-            startAngle = this.startAngle;
-            this.totalAngle = (this.endAngle - this.startAngle) % 360;
-            this.totalAngle = (this.totalAngle <= 0 ? (360 + this.totalAngle) : this.totalAngle);
-            this.totalAngle -= (this.totalAngle === 360) ? 0.01 : 0;
-            endAngle = (this.startAngle + ((this.enableRtl) ? -this.totalAngle : +this.totalAngle)) % 360;
-            centerX = this.progressRect.x + (this.progressRect.width / 2);
-            centerY = this.progressRect.y + (this.progressRect.height / 2);
-            trackThickness = Math.max(this.trackThickness, this.progressThickness) ||
-                Math.max(this.themeStyle.circularProgressThickness, this.themeStyle.circularTrackThickness);
-            size = (Math.min(this.progressRect.height, this.progressRect.width) / 2) - trackThickness / 2;
-            radius = stringToNumber(this.radius, size);
-            radius = (radius === null) ? 0 : radius;
-            circularPath = getPathArc(centerX, centerY, radius, startAngle, endAngle, this.enableRtl);
-            option = new PathOption(this.element.id + '_Circulartrack', 'none', (this.trackThickness || this.themeStyle.circularTrackThickness), (this.argsData.trackColor || this.themeStyle.circularTrackColor), this.themeStyle.trackOpacity, '0', circularPath);
-            circularTrack = this.renderer.drawPath(option);
-            this.svgObject.appendChild(circularTrack);
-            this.trackwidth = circularTrack.getTotalLength();
-            if (this.segmentCount > 1) {
-                this.segmentSize = this.calculateSegmentSize(this.trackwidth, (this.trackThickness || this.themeStyle.linearTrackThickness));
-                circularTrack.setAttribute('stroke-dasharray', this.segmentSize);
-            }
-            if (this.cornerRadius === 'Round') {
-                circularTrack.setAttribute('stroke-linecap', 'round');
-            }
+            this.circular.renderCircularTrack();
         }
     };
-    ProgressBar.prototype.createLinearProgress = function (refresh, prevWidth) {
-        if (prevWidth === void 0) { prevWidth = 0; }
-        var linearBuffer;
-        var secondaryProgressWidth;
-        var linearBufferWidth;
-        var option;
-        var linearProgress;
-        var progressWidth;
-        var linearProgressWidth;
-        var clipPathBuffer;
-        var clipPathLinear;
+    ProgressBar.prototype.renderProgress = function () {
+        this.clipPathElement();
         if (this.type === 'Linear') {
-            if (this.secondaryProgress !== null && !this.isIndeterminate) {
-                secondaryProgressWidth = this.calculateProgressRange(this.minimum, this.maximum, this.secondaryProgress);
-                linearBufferWidth = this.progressRect.width * secondaryProgressWidth;
-                if (this.segmentColor.length !== 0 && !this.isIndeterminate) {
-                    linearBuffer = this.createLinearSegment('_LinearBuffer', linearBufferWidth, this.themeStyle.bufferOpacity, (this.progressThickness || this.themeStyle.linearProgressThickness));
-                }
-                else {
-                    option = new PathOption(this.element.id + '_Linearbuffer', 'none', (this.progressThickness || this.themeStyle.linearProgressThickness), (this.argsData.progressColor || this.themeStyle.linearProgressColor), this.themeStyle.bufferOpacity, '0', this.getPathLine(this.progressRect.x, linearBufferWidth, (this.progressThickness || this.themeStyle.linearProgressThickness)));
-                    linearBuffer = this.renderer.drawPath(option);
-                    if (this.segmentCount > 1) {
-                        linearBuffer.setAttribute('stroke-dasharray', this.segmentSize);
-                    }
-                    if (this.cornerRadius === 'Round') {
-                        linearBuffer.setAttribute('stroke-linecap', 'round');
-                    }
-                }
-                this.svgObject.appendChild(linearBuffer);
-                if (this.animation.enable) {
-                    clipPathBuffer = this.createClipPath(this.bufferClipPath, secondaryProgressWidth, null, this.progressRect.x, false, (this.progressThickness || this.themeStyle.linearProgressThickness));
-                    linearBuffer.setAttribute('style', 'clip-path:url(#' + this.element.id + '_clippathBuffer)');
-                    doLinearAnimation(clipPathBuffer, this, this.animation.delay, 0);
-                }
-                this.svgObject.appendChild(this.bufferClipPath);
-            }
-            if (this.argsData.value !== null) {
-                progressWidth = this.calculateProgressRange(this.minimum, this.maximum, this.argsData.value);
-                this.progressPreviousWidth = linearProgressWidth = this.progressRect.width * ((this.isIndeterminate) ? 1 : progressWidth);
-                if (this.segmentColor.length !== 0 && !this.isIndeterminate) {
-                    linearProgress = this.createLinearSegment('_LinearProgress', linearProgressWidth, this.themeStyle.progressOpacity, (this.progressThickness || this.themeStyle.linearProgressThickness));
-                }
-                else {
-                    if (!refresh) {
-                        option = new PathOption(this.element.id + '_Linearprogress', 'none', (this.progressThickness || this.themeStyle.linearProgressThickness), (this.argsData.progressColor || this.themeStyle.linearProgressColor), this.themeStyle.progressOpacity, '0', this.getPathLine(this.progressRect.x, linearProgressWidth, (this.progressThickness || this.themeStyle.linearProgressThickness)));
-                        linearProgress = this.renderer.drawPath(option);
-                    }
-                    else {
-                        linearProgress = getElement(this.element.id + '_Linearprogress');
-                        linearProgress.setAttribute('d', this.getPathLine(this.progressRect.x, linearProgressWidth, (this.progressThickness || this.themeStyle.linearProgressThickness)));
-                        linearProgress.setAttribute('stroke', this.argsData.progressColor || this.themeStyle.circularProgressColor);
-                    }
-                    if (this.segmentCount > 1) {
-                        linearProgress.setAttribute('stroke-dasharray', this.segmentSize);
-                    }
-                    if (this.cornerRadius === 'Round') {
-                        linearProgress.setAttribute('stroke-linecap', 'round');
-                    }
-                }
-                this.svgObject.appendChild(linearProgress);
-                if (this.animation.enable || this.isIndeterminate) {
-                    var animationdelay = this.animation.delay + ((this.secondaryProgress !== null) ? (linearBufferWidth - linearProgressWidth) : 0);
-                    clipPathLinear = this.createClipPath(this.clipPath, progressWidth, null, refresh ? prevWidth : this.progressRect.x, refresh, (this.progressThickness || this.themeStyle.linearProgressThickness));
-                    linearProgress.setAttribute('style', 'clip-path:url(#' + this.element.id + '_clippath)');
-                    doLinearAnimation(clipPathLinear, this, animationdelay, refresh ? prevWidth : 0);
-                }
-                this.svgObject.appendChild(this.clipPath);
-            }
+            this.linear.renderLinearProgress();
         }
-    };
-    // tslint:disable-next-line:max-func-body-length
-    ProgressBar.prototype.createCircularProgress = function (previousStart, previousEnd, refresh) {
-        var centerX;
-        var centerY;
-        var size;
-        var endAngle;
-        var radius;
-        var startAngle = this.startAngle;
-        var previousPath;
-        this.progressStartAngle = startAngle;
-        var circularPath;
-        var bufferClipPath;
-        var progressEnd;
-        var circularProgress;
-        var circularBuffer;
-        var option;
-        var radiusDiff;
-        var progressThickness;
-        var linearClipPath;
-        var rDiff;
-        var progressSegment;
-        if (this.type === 'Circular') {
-            centerX = this.progressRect.x + (this.progressRect.width / 2);
-            centerY = this.progressRect.y + (this.progressRect.height / 2);
-            progressThickness = Math.max(this.trackThickness, this.progressThickness) ||
-                Math.max(this.themeStyle.circularProgressThickness, this.themeStyle.circularTrackThickness);
-            size = (Math.min(this.progressRect.height, this.progressRect.width) / 2) - progressThickness / 2;
-            radius = stringToNumber(this.innerRadius, size);
-            radius = (radius === null) ? 0 : radius;
-            if (this.secondaryProgress !== null && !this.isIndeterminate) {
-                if (this.segmentColor.length !== 0 && !this.isIndeterminate) {
-                    circularBuffer = this.createCircularSegment('_CircularBuffer', centerX, centerY, radius, this.secondaryProgress, this.themeStyle.bufferOpacity, (this.progressThickness || this.themeStyle.circularProgressThickness));
-                }
-                else {
-                    endAngle = this.calculateProgressRange(this.minimum, this.maximum, this.secondaryProgress);
-                    circularPath = getPathArc(centerX, centerY, radius, startAngle, endAngle, this.enableRtl);
-                    option = new PathOption(this.element.id + '_Circularbuffer', 'none', (this.progressThickness || this.themeStyle.circularProgressThickness), (this.argsData.progressColor || this.themeStyle.circularProgressColor), this.themeStyle.bufferOpacity, '0', circularPath);
-                    circularBuffer = this.renderer.drawPath(option);
-                    if (this.segmentCount > 1) {
-                        radiusDiff = parseInt(this.radius, 10) - parseInt(this.innerRadius, 10);
-                        if (radiusDiff !== 0) {
-                            progressSegment = this.trackwidth + ((radiusDiff < 0) ? (this.trackwidth * Math.abs(radiusDiff)) / parseInt(this.radius, 10) :
-                                -(this.trackwidth * Math.abs(radiusDiff)) / parseInt(this.radius, 10));
-                            this.segmentSize = this.calculateSegmentSize(progressSegment, (this.progressThickness || this.themeStyle.circularProgressThickness));
-                        }
-                        circularBuffer.setAttribute('stroke-dasharray', this.segmentSize);
-                    }
-                    if (this.cornerRadius === 'Round') {
-                        circularBuffer.setAttribute('stroke-linecap', 'round');
-                    }
-                }
-                this.svgObject.appendChild(circularBuffer);
-                if (this.animation.enable) {
-                    bufferClipPath = this.createClipPath(this.bufferClipPath, null, '', null, false);
-                    circularBuffer.setAttribute('style', 'clip-path:url(#' + this.element.id + '_clippathBuffer)');
-                    doCircularAnimation(centerX, centerY, radius, startAngle, 0, bufferClipPath, this, (this.progressThickness || this.themeStyle.circularProgressThickness), this.animation.delay, null);
-                }
-                this.svgObject.appendChild(this.bufferClipPath);
-            }
-            if (this.argsData.value !== null) {
-                if (this.segmentColor.length !== 0 && !this.isIndeterminate) {
-                    circularProgress = this.createCircularSegment('_CircularProgress', centerX, centerY, radius, this.argsData.value, this.themeStyle.progressOpacity, (this.progressThickness || this.themeStyle.circularProgressThickness));
-                }
-                else {
-                    progressEnd = this.calculateProgressRange(this.minimum, this.maximum, this.argsData.value);
-                    this.annotationEnd = progressEnd;
-                    endAngle = ((this.isIndeterminate) ? (this.startAngle + ((this.enableRtl) ? -this.totalAngle : +this.totalAngle)) % 360 : progressEnd);
-                    circularPath = getPathArc(centerX, centerY, radius, startAngle, endAngle, this.enableRtl);
-                    option = new PathOption(this.element.id + '_Circularprogress', 'none', (this.progressThickness || this.themeStyle.circularProgressThickness), (this.argsData.progressColor || this.themeStyle.circularProgressColor), this.themeStyle.progressOpacity, '0', circularPath);
-                    if (!refresh) {
-                        circularProgress = this.renderer.drawPath(option);
-                    }
-                    else {
-                        circularProgress = getElement(this.element.id + '_Circularprogress');
-                        previousPath = circularProgress.getAttribute('d');
-                        circularProgress.setAttribute('d', circularPath);
-                        circularProgress.setAttribute('stroke', this.argsData.progressColor || this.themeStyle.circularProgressColor);
-                    }
-                    if (this.segmentCount > 1) {
-                        rDiff = parseInt(this.radius, 10) - parseInt(this.innerRadius, 10);
-                        if (rDiff !== 0) {
-                            progressSegment = this.trackwidth + ((rDiff < 0) ? (this.trackwidth * Math.abs(rDiff)) / parseInt(this.radius, 10) :
-                                -(this.trackwidth * Math.abs(rDiff)) / parseInt(this.radius, 10));
-                            this.segmentSize = this.calculateSegmentSize(progressSegment, (this.progressThickness || this.themeStyle.circularProgressThickness));
-                        }
-                        circularProgress.setAttribute('stroke-dasharray', this.segmentSize);
-                    }
-                    if (this.cornerRadius === 'Round') {
-                        circularProgress.setAttribute('stroke-linecap', 'round');
-                    }
-                }
-                this.progressEndAngle = endAngle;
-                if (!refresh) {
-                    this.svgObject.appendChild(circularProgress);
-                }
-                if (this.animation.enable && !this.isIndeterminate) {
-                    var circulardelay = (this.secondaryProgress !== null) ? 300 : this.animation.delay;
-                    linearClipPath = this.createClipPath(this.clipPath, null, refresh ? previousPath : '', null, refresh);
-                    circularProgress.setAttribute('style', 'clip-path:url(#' + this.element.id + '_clippath)');
-                    doCircularAnimation(centerX, centerY, radius, startAngle, progressEnd, linearClipPath, this, (this.progressThickness || this.themeStyle.circularProgressThickness), circulardelay, refresh ? previousEnd : null);
-                }
-                if (this.isIndeterminate) {
-                    var circularPathRadius = 2 * radius * 0.75;
-                    var circularPath_1 = getPathArc(centerX, centerY, circularPathRadius, startAngle, progressEnd, this.enableRtl, true);
-                    var option_1 = new PathOption(this.element.id + '_clippathcircle', 'transparent', 10, 'transparent', 1, '0', circularPath_1);
-                    var path = this.renderer.drawPath(option_1);
-                    this.clipPath.appendChild(path);
-                    circularProgress.setAttribute('style', 'clip-path:url(#' + this.element.id + '_clippath)');
-                    doCircularIndeterminate((path), this, startAngle, progressEnd, centerX, centerY, circularPathRadius);
-                }
-                this.svgObject.appendChild(this.clipPath);
-            }
+        else if (this.type === 'Circular') {
+            this.circular.renderCircularProgress();
         }
+        this.element.appendChild(this.svgObject);
     };
-    ProgressBar.prototype.createLabel = function () {
+    ProgressBar.prototype.renderLabel = function () {
         //let fontsize: string; let fontstyle: string; let fillcolor: string;
@@ -537,7 +305,14 @@ var textSize;
         var option;
+        var posx;
+        var posy;
+        var pathWidth;
         if (this.type === 'Linear') {
             if (!refresh) {
-                rect = new RectOption(this.element.id + '_clippathrect', 'transparent', 1, 'transparent', 1, new Rect((this.cornerRadius === 'Round') ? (this.progressRect.x - (lineCapRadius / 2 * thickness)) : x, 0, this.progressSize.height, (this.isIndeterminate) ? this.progressRect.width * width :
-                    (this.cornerRadius === 'Round') ? (this.progressRect.width * width + lineCapRadius * thickness) :
-                        this.progressRect.width * width));
+                posx = (this.enableRtl) ? (x + this.progressRect.width) : x;
+                posx += (this.cornerRadius === 'Round') ?
+                    ((this.enableRtl) ? (lineCapRadius / 2) * thickness : -(lineCapRadius / 2) * thickness) : 0;
+                posy = (this.progressRect.y + (this.progressRect.height / 2)) - (thickness / 2);
+                pathWidth = this.progressRect.width * width;
+                pathWidth += (this.cornerRadius === 'Round') ? (lineCapRadius * thickness) : 0;
+                rect = new RectOption(this.element.id + '_clippathrect', 'transparent', 1, 'transparent', 1, new Rect(posx, posy, thickness, pathWidth));
                 path = this.renderer.drawRectangle(rect);
@@ -563,105 +338,2 @@ clipPath.appendChild(path);
     };
-    ProgressBar.prototype.createLinearSegment = function (id, width, opacity, thickness) {
-        var locX = (this.enableRtl) ? ((this.cornerRadius === 'Round') ?
-            (this.progressRect.x + this.progressRect.width) - ((lineCapRadius / 2) * thickness) :
-            (this.progressRect.x + this.progressRect.width)) :
-            ((this.cornerRadius === 'Round') ? (this.progressRect.x + (lineCapRadius / 2) * thickness) : this.progressRect.x);
-        var locY = (this.progressRect.y + (this.progressRect.height / 2));
-        var gapWidth = (this.gapWidth || this.themeStyle.linearGapWidth);
-        var avlWidth = this.progressRect.width / this.segmentCount;
-        var avlSegWidth = (this.progressRect.width - ((this.segmentCount - 1) * gapWidth));
-        avlSegWidth = (avlSegWidth -
-            ((this.cornerRadius === 'Round') ? this.segmentCount * (lineCapRadius * thickness) : 0)) / this.segmentCount;
-        var gap = (this.cornerRadius === 'Round') ? (gapWidth + (lineCapRadius * thickness)) : gapWidth;
-        var segmentGroup = this.renderer.createGroup({ 'id': this.element.id + id + 'Group' });
-        var count = Math.ceil(width / avlWidth);
-        var segWidth;
-        var color;
-        var j = 0;
-        var option;
-        var segmentPath;
-        var tolWidth = (this.cornerRadius === 'Round') ? (width - (lineCapRadius * thickness)) : width;
-        var linearThickness = this.progressThickness || this.themeStyle.linearProgressThickness;
-        for (var i = 0; i < count; i++) {
-            segWidth = (tolWidth < avlSegWidth) ? tolWidth : avlSegWidth;
-            if (j < this.segmentColor.length) {
-                color = this.segmentColor[j];
-                j++;
-            }
-            else {
-                j = 0;
-                color = this.segmentColor[j];
-                j++;
-            }
-            option = new PathOption(this.element.id + id + i, 'none', linearThickness, color, opacity, '0', this.getLinearSegmentPath(locX, locY, segWidth));
-            segmentPath = this.renderer.drawPath(option);
-            if (this.cornerRadius === 'Round') {
-                segmentPath.setAttribute('stroke-linecap', 'round');
-            }
-            segmentGroup.appendChild(segmentPath);
-            locX += (this.enableRtl) ? -avlSegWidth - gap : avlSegWidth + gap;
-            tolWidth -= avlSegWidth + gap;
-            tolWidth = (tolWidth < 0) ? 0 : tolWidth;
-        }
-        return segmentGroup;
-    };
-    ProgressBar.prototype.getLinearSegmentPath = function (x, y, width) {
-        return 'M' + ' ' + x + ' ' + y + ' ' + 'L' + (x + ((this.enableRtl) ? -width : width)) + ' ' + y;
-    };
-    ProgressBar.prototype.createCircularSegment = function (id, x, y, r, value, opacity, thickness) {
-        var start = this.startAngle;
-        var end = this.widthToAngle(this.minimum, this.maximum, value);
-        end -= (this.cornerRadius === 'Round' && this.totalAngle === completeAngle) ?
-            this.widthToAngle(0, this.trackwidth, ((lineCapRadius / 2) * thickness)) : 0;
-        var size = (this.trackwidth - ((this.totalAngle === completeAngle) ? this.segmentCount :
-            this.segmentCount - 1) * (this.gapWidth || this.themeStyle.circularGapWidth));
-        size = (size -
-            ((this.cornerRadius === 'Round') ?
-                (((this.totalAngle === completeAngle) ?
-                    this.segmentCount : this.segmentCount - 1) * lineCapRadius * thickness) : 0)) / this.segmentCount;
-        var avlTolEnd = this.widthToAngle(0, this.trackwidth, (this.trackwidth / this.segmentCount));
-        avlTolEnd -= (this.cornerRadius === 'Round' && this.totalAngle === completeAngle) ?
-            this.widthToAngle(0, this.trackwidth, ((lineCapRadius / 2) * thickness)) : 0;
-        var avlEnd = this.widthToAngle(0, this.trackwidth, size);
-        var gap = this.widthToAngle(0, this.trackwidth, (this.gapWidth || this.themeStyle.circularGapWidth));
-        gap += (this.cornerRadius === 'Round') ? this.widthToAngle(0, this.trackwidth, (lineCapRadius * thickness)) : 0;
-        var segmentGroup = this.renderer.createGroup({ 'id': this.element.id + id + 'Group' });
-        var gapCount = Math.floor(end / avlTolEnd);
-        var count = Math.ceil((end - gap * gapCount) / avlEnd);
-        var segmentPath;
-        var circularSegment;
-        var segmentEnd;
-        var avlSegEnd = (start + ((this.enableRtl) ? -avlEnd : avlEnd)) % 360;
-        var color;
-        var j = 0;
-        var option;
-        var circularThickness = this.progressThickness || this.themeStyle.circularProgressThickness;
-        for (var i = 0; i < count; i++) {
-            segmentEnd = (this.enableRtl) ? ((this.startAngle - end > avlSegEnd) ? this.startAngle - end : avlSegEnd) :
-                ((this.startAngle + end < avlSegEnd) ? this.startAngle + end : avlSegEnd);
-            segmentPath = getPathArc(x, y, r, start, segmentEnd, this.enableRtl);
-            if (j < this.segmentColor.length) {
-                color = this.segmentColor[j];
-                j++;
-            }
-            else {
-                j = 0;
-                color = this.segmentColor[j];
-                j++;
-            }
-            option = new PathOption(this.element.id + id + i, 'none', circularThickness, color, opacity, '0', segmentPath);
-            circularSegment = this.renderer.drawPath(option);
-            if (this.cornerRadius === 'Round') {
-                circularSegment.setAttribute('stroke-linecap', 'round');
-            }
-            segmentGroup.appendChild(circularSegment);
-            start = segmentEnd + ((this.enableRtl) ? -gap : gap);
-            avlSegEnd += (this.enableRtl) ? -avlEnd - gap : avlEnd + gap;
-        }
-        return segmentGroup;
-    };
-    ProgressBar.prototype.widthToAngle = function (min, max, value) {
-        var angle = ((value - min) / (max - min)) * this.totalAngle;
-        return angle;
-    };
     /**
@@ -672,2 +344,10 @@ * Theming for progress bar
         this.themeStyle = getProgressThemeColor(this.theme);
+        switch (this.theme) {
+            case 'Bootstrap':
+            case 'Bootstrap4':
+                this.cornerRadius = this.cornerRadius === 'Auto' ? 'Round' : this.cornerRadius;
+                break;
+            default:
+                this.cornerRadius = this.cornerRadius === 'Auto' ? 'Square' : this.cornerRadius;
+        }
     };
@@ -709,6 +389,5 @@ /**
             _this.trigger('resized', arg);
+            _this.secElement.innerHTML = '';
             _this.calculateProgressBarSize();
-            _this.calculateProgressBarBounds();
-            _this.secElement.innerHTML = '';
-            _this.renderAnnotation();
+            _this.createSVG();
             _this.renderElements();
@@ -718,2 +397,21 @@ }, 500);
     };
+    ProgressBar.prototype.progressMouseClick = function (e) {
+        this.mouseEvent(mouseClick, e);
+    };
+    ProgressBar.prototype.progressMouseDown = function (e) {
+        this.mouseEvent(mouseDown, e);
+    };
+    ProgressBar.prototype.progressMouseMove = function (e) {
+        this.mouseEvent(mouseMove, e);
+    };
+    ProgressBar.prototype.progressMouseUp = function (e) {
+        this.mouseEvent(mouseUp, e);
+    };
+    ProgressBar.prototype.progressMouseLeave = function (e) {
+        this.mouseEvent(mouseLeave, e);
+    };
+    ProgressBar.prototype.mouseEvent = function (eventName, e) {
+        var element = e.target;
+        this.trigger(eventName, { target: element.id });
+    };
     /**
@@ -723,2 +421,13 @@ * Method to un-bind events for progress bar
     ProgressBar.prototype.unWireEvents = function () {
+        var startEvent = Browser.touchStartEvent;
+        var moveEvent = Browser.touchMoveEvent;
+        var stopEvent = Browser.touchEndEvent;
+        /*! Find the Events type */
+        var cancelEvent = Browser.isPointer ? 'pointerleave' : 'mouseleave';
+        /*! UnBind the Event handler */
+        EventHandler.remove(this.element, 'click', this.progressMouseClick);
+        EventHandler.remove(this.element, startEvent, this.progressMouseDown);
+        EventHandler.remove(this.element, moveEvent, this.progressMouseMove);
+        EventHandler.remove(this.element, stopEvent, this.progressMouseUp);
+        EventHandler.remove(this.element, cancelEvent, this.progressMouseLeave);
         window.removeEventListener((Browser.isTouch && ('orientation' in window && 'onorientationchange' in window)) ? 'orientationchange' : 'resize', this.resizeBounds);
@@ -730,2 +439,13 @@ };
     ProgressBar.prototype.wireEvents = function () {
+        var startEvent = Browser.touchStartEvent;
+        var moveEvent = Browser.touchMoveEvent;
+        var stopEvent = Browser.touchEndEvent;
+        /*! Find the Events type */
+        var cancelEvent = Browser.isPointer ? 'pointerleave' : 'mouseleave';
+        /*! Bind the Event handler */
+        EventHandler.add(this.element, 'click', this.progressMouseClick, this);
+        EventHandler.add(this.element, startEvent, this.progressMouseDown, this);
+        EventHandler.add(this.element, moveEvent, this.progressMouseMove, this);
+        EventHandler.add(this.element, stopEvent, this.progressMouseUp, this);
+        EventHandler.add(this.element, cancelEvent, this.progressMouseLeave, this);
         this.resizeBounds = this.progressResize.bind(this);
@@ -747,4 +467,6 @@ window.addEventListener((Browser.isTouch && ('orientation' in window && 'onorientationchange' in window)) ? 'orientationchange' : 'resize', this.resizeBounds);
                     this.renderAnnotation();
-                    var annotationElement = document.getElementById(this.element.id + 'Annotation0').children[0];
-                    doAnnotationAnimation(annotationElement, this, this.startAngle, this.annotationEnd);
+                    if (this.animation.enable && !this.isIndeterminate) {
+                        var annotationElement = document.getElementById(this.element.id + 'Annotation0').children[0];
+                        this.annotateAnimation.doAnnotationAnimation(annotationElement, this, this.startAngle, this.annotationEnd);
+                    }
                     break;
@@ -764,6 +486,6 @@ case 'value':
                     if (this.type === 'Circular') {
-                        this.createCircularProgress(this.progressStartAngle, this.progressEndAngle, true);
+                        this.circular.renderCircularProgress(this.progressStartAngle, this.progressEndAngle, true);
                     }
                     else {
-                        this.createLinearProgress(true, this.progressPreviousWidth);
+                        this.linear.renderLinearProgress(true, this.progressPreviousWidth);
                     }
@@ -868,2 +590,5 @@ break;
     __decorate([
+        Property(false)
+    ], ProgressBar.prototype, "enablePieProgress", void 0);
+    __decorate([
         Property('Fabric')
@@ -905,2 +630,17 @@ ], ProgressBar.prototype, "theme", void 0);
     __decorate([
+        Event()
+    ], ProgressBar.prototype, "mouseClick", void 0);
+    __decorate([
+        Event()
+    ], ProgressBar.prototype, "mouseMove", void 0);
+    __decorate([
+        Event()
+    ], ProgressBar.prototype, "mouseUp", void 0);
+    __decorate([
+        Event()
+    ], ProgressBar.prototype, "mouseDown", void 0);
+    __decorate([
+        Event()
+    ], ProgressBar.prototype, "mouseLeave", void 0);
+    __decorate([
         Collection([{}], ProgressAnnotationSettings)
@@ -907,0 +647,0 @@ ], ProgressBar.prototype, "annotations", void 0);

src/progressbar/utils/helper.d.ts

@@ -33,3 +33,3 @@ import { PathOption } from '@syncfusion/ej2-svg-base';
 /** calculate the path of the circle */
-export declare function getPathArc(x: number, y: number, radius: number, startAngle: number, endAngle: number, enableRtl: boolean, animation?: boolean): string;
+export declare function getPathArc(x: number, y: number, radius: number, startAngle: number, endAngle: number, enableRtl: boolean, pieView?: boolean): string;
 /** @private */
@@ -36,0 +36,0 @@ export declare function stringToNumber(value: string, containerSize: number): number;

src/progressbar/utils/helper.js

@@ -66,3 +66,3 @@ var __extends = (this && this.__extends) || (function () {
 /** calculate the path of the circle */
-export function getPathArc(x, y, radius, startAngle, endAngle, enableRtl, animation) {
+export function getPathArc(x, y, radius, startAngle, endAngle, enableRtl, pieView) {
     // tslint:disable-next-line
@@ -81,5 +81,5 @@ var start = degreeToLocation(x, y, radius, startAngle);
     var d;
-    if (animation) {
+    if (pieView) {
         d = 'M ' + x + ' ' + y + ' L ' + start.x + ' ' + start.y + ' A ' + radius + ' ' +
-            radius + ' ' + ' 0 ' + ' ' + largeArcFlag + ' ' + sweepFlag + ' ' + end.x + ' ' + end.y;
+            radius + ' ' + ' 0 ' + ' ' + largeArcFlag + ' ' + sweepFlag + ' ' + end.x + ' ' + end.y + ' ' + 'Z';
     }
@@ -86,0 +86,0 @@ else {

src/progressbar/utils/progress-animation.d.ts

 import { ProgressBar } from '../progressbar';
 /**
- * To do the animation for linear progress bar
+ * Animation for progress bar
  */
-export declare function doLinearAnimation(element: Element, progress: ProgressBar, delay: number, start?: number): void;
-/** To do the animation for circular progress bar */
-export declare function doCircularIndeterminate(circularProgress: HTMLElement, progress: ProgressBar, start: number, end: number, x: number, y: number, radius: number): void;
-/** To do the annotation animation for circular progress bar */
-export declare function doAnnotationAnimation(circularPath: Element, progress: ProgressBar, start: number, progressEnd: number): void;
-/** To do the animation for circular progress bar */
-export declare function doCircularAnimation(x: number, y: number, radius: number, start: number, progressWidth: number, element: Element, progress: ProgressBar, thickness: number, delay: number, startValue?: number): void;
+export declare class ProgressAnimation {
+    /** Linear Animation */
+    doLinearAnimation(element: Element, progress: ProgressBar, delay: number, start?: number): void;
+    /** Linear Indeterminate */
+    doLinearIndeterminate(element: Element, progress: ProgressBar): void;
+    /** Circular animation */
+    doCircularAnimation(x: number, y: number, radius: number, start: number, progressEnd: number, element: Element, progress: ProgressBar, thickness: number, delay: number, startValue?: number): void;
+    /** Circular indeterminate */
+    doCircularIndeterminate(circularProgress: HTMLElement, progress: ProgressBar, start: number, end: number, x: number, y: number, radius: number, thickness: number): void;
+    /** To do the annotation animation for circular progress bar */
+    doAnnotationAnimation(circularPath: Element, progress: ProgressBar, start: number, progressEnd: number): void;
+}

src/progressbar/utils/progress-animation.js

 import { Animation } from '@syncfusion/ej2-base';
 import { effect, getPathArc } from '../utils/helper';
-import { lineCapRadius } from '../model/constant';
+import { lineCapRadius, completeAngle } from '../model/constant';
 /**
- * To do the animation for linear progress bar
+ * Animation for progress bar
  */
-export function doLinearAnimation(element, progress, delay, start) {
-    var animation = new Animation({});
-    var linearPath = element;
-    var width = linearPath.getAttribute('width');
-    var x = (progress.isIndeterminate ? -(+linearPath.getAttribute('width')) : +linearPath.getAttribute('x')).toString();
-    var currentTime;
-    var end = progress.progressRect.x + progress.progressRect.width +
-        (progress.isIndeterminate ? (+linearPath.getAttribute('width')) : 0);
-    var animationDelay = (progress.isIndeterminate) ? 0 : delay;
-    linearPath.style.visibility = 'hidden';
-    animation.animate(linearPath, {
-        duration: progress.animation.duration,
-        delay: animationDelay,
-        progress: function (args) {
-            if (progress.enableRtl) {
-                if (progress.isIndeterminate) {
+var ProgressAnimation = /** @class */ (function () {
+    function ProgressAnimation() {
+    }
+    /** Linear Animation */
+    ProgressAnimation.prototype.doLinearAnimation = function (element, progress, delay, start) {
+        var animation = new Animation({});
+        var linearPath = element;
+        var width = linearPath.getAttribute('width');
+        var x = linearPath.getAttribute('x');
+        var value = 0;
+        var rtlX = parseInt(x, 10) - parseInt(width, 10);
+        linearPath.style.visibility = 'hidden';
+        animation.animate(linearPath, {
+            duration: progress.animation.duration,
+            delay: delay,
+            progress: function (args) {
+                if (progress.enableRtl) {
                     if (args.timeStamp >= args.delay) {
                         linearPath.style.visibility = 'visible';
-                        currentTime = effect(args.timeStamp, end - parseInt(width, 10), end - parseInt(x, 10), args.duration, progress.enableRtl);
-                        linearPath.setAttribute('x', currentTime.toString());
+                        value = effect(args.timeStamp, parseInt(x, 10), parseInt(width, 10), args.duration, progress.enableRtl);
+                        linearPath.setAttribute('x', value.toString());
                     }
@@ -32,166 +33,154 @@ }
                         linearPath.style.visibility = 'visible';
-                        currentTime = effect(args.timeStamp, parseInt(width, 10), parseInt(width, 10) - parseInt(x, 10), args.duration, progress.enableRtl);
-                        linearPath.setAttribute('x', currentTime.toString());
+                        value = effect(args.timeStamp, start, parseInt(width, 10), args.duration, progress.enableRtl);
+                        linearPath.setAttribute('width', value.toString());
                     }
                 }
-            }
-            else {
-                if (progress.isIndeterminate) {
-                    if (args.timeStamp >= args.delay) {
-                        linearPath.style.visibility = 'visible';
-                        currentTime = effect(args.timeStamp, parseInt(x, 10), end, args.duration, progress.enableRtl);
-                        linearPath.setAttribute('x', currentTime.toString());
-                    }
+            },
+            end: function (model) {
+                if (progress.enableRtl) {
+                    linearPath.setAttribute('x', rtlX.toString());
                 }
                 else {
-                    if (args.timeStamp >= args.delay) {
-                        linearPath.style.visibility = 'visible';
-                        currentTime = effect(args.timeStamp, start, parseInt(width, 10), args.duration, progress.enableRtl);
-                        linearPath.setAttribute('width', currentTime.toString());
-                    }
+                    linearPath.setAttribute('width', width);
                 }
+                if (progress.animation.enable) {
+                    progress.labelElement.setAttribute('visibility', 'visible');
+                }
+                progress.trigger('animationComplete', {
+                    value: progress.value, trackColor: progress.trackColor,
+                    progressColor: progress.progressColor
+                });
             }
-        },
-        end: function (model) {
-            if (progress.enableRtl) {
-                if (progress.isIndeterminate) {
-                    linearPath.setAttribute('x', x);
-                    doLinearAnimation(element, progress, 0);
+        });
+    };
+    /** Linear Indeterminate */
+    ProgressAnimation.prototype.doLinearIndeterminate = function (element, progress) {
+        var _this = this;
+        var animation = new Animation({});
+        var linearPath = element;
+        var x = linearPath.getAttribute('x');
+        var width = linearPath.getAttribute('width');
+        var value = 0;
+        var start = -(parseInt(width, 10));
+        var end = (progress.progressRect.x + progress.progressRect.width) + parseInt(width, 10);
+        animation.animate(linearPath, {
+            duration: 2000,
+            delay: 0,
+            progress: function (args) {
+                if (progress.enableRtl) {
+                    value = effect(args.timeStamp, parseInt(x, 10), end, args.duration, progress.enableRtl);
+                    linearPath.setAttribute('x', value.toString());
                 }
                 else {
-                    linearPath.setAttribute('x', x);
+                    value = effect(args.timeStamp, start, end, args.duration, progress.enableRtl);
+                    linearPath.setAttribute('x', value.toString());
                 }
-            }
-            else {
-                if (progress.isIndeterminate) {
-                    linearPath.setAttribute('x', x);
-                    doLinearAnimation(element, progress, 0);
+            },
+            end: function (model) {
+                if (progress.enableRtl) {
+                    linearPath.setAttribute('x', x.toString());
                 }
                 else {
-                    linearPath.setAttribute('width', width);
+                    linearPath.setAttribute('x', start.toString());
                 }
+                _this.doLinearIndeterminate(element, progress);
             }
-            if (progress.animation.enable) {
-                progress.labelElement.setAttribute('visibility', 'visible');
+        });
+    };
+    /** Circular animation */
+    ProgressAnimation.prototype.doCircularAnimation = function (x, y, radius, start, progressEnd, element, progress, thickness, delay, startValue) {
+        var animation = new Animation({});
+        var circularPath = element;
+        var pathRadius = radius + (thickness / 2);
+        var value = 0;
+        var totalEnd = (start < Math.abs(progressEnd)) ? Math.abs(progressEnd) : Math.abs(progressEnd) + 360;
+        totalEnd = (totalEnd - start);
+        start += (progress.cornerRadius === 'Round' && totalEnd !== completeAngle) ?
+            ((progress.enableRtl) ? (lineCapRadius / 2) * thickness : -(lineCapRadius / 2) * thickness) : 0;
+        totalEnd += (progress.cornerRadius === 'Round' && totalEnd !== completeAngle) ?
+            (lineCapRadius / 2) * thickness : 0;
+        progressEnd += (progress.cornerRadius === 'Round' && totalEnd !== completeAngle) ?
+            ((progress.enableRtl) ? -(lineCapRadius / 2) * thickness : (lineCapRadius / 2) * thickness) : 0;
+        animation.animate(circularPath, {
+            duration: progress.animation.duration,
+            delay: delay,
+            progress: function (args) {
+                if (args.timeStamp >= args.delay) {
+                    value = effect(args.timeStamp, startValue | start, totalEnd, args.duration, progress.enableRtl);
+                    circularPath.setAttribute('d', getPathArc(x, y, pathRadius, start, value % 360, progress.enableRtl, true));
+                }
+            },
+            end: function (model) {
+                circularPath.setAttribute('d', getPathArc(x, y, pathRadius, start, progressEnd, progress.enableRtl, true));
+                if (progress.animation.enable) {
+                    progress.labelElement.setAttribute('visibility', 'visible');
+                }
+                progress.trigger('animationComplete', {
+                    value: progress.value, trackColor: progress.trackColor,
+                    progressColor: progress.progressColor
+                });
             }
-            progress.trigger('animationComplete', {
-                value: progress.value, trackColor: progress.trackColor,
-                progressColor: progress.progressColor
-            });
-        }
-    });
-}
-/** To do the animation for circular progress bar */
-export function doCircularIndeterminate(circularProgress, progress, start, end, x, y, radius) {
-    var animation = new Animation({});
-    animation.animate(circularProgress, {
-        duration: 2000,
-        delay: 0,
-        progress: function (args) {
-            start += 5;
-            end += 5;
-            circularProgress.setAttribute('d', getPathArc(x, y, radius, start % 360, end % 360, progress.enableRtl, true));
-        },
-        end: function (model) {
-            doCircularIndeterminate(circularProgress, progress, start, end, x, y, radius);
-        }
-    });
-}
-/** To do the annotation animation for circular progress bar */
-export function doAnnotationAnimation(circularPath, progress, start, progressEnd) {
-    var animation = new Animation({});
-    var value = 0;
-    var isAnnotation = progress.annotations.length > 0;
-    var annotatElementChanged;
-    var firstAnnotatElement;
-    if (isAnnotation && progress.progressAnnotationModule) {
-        firstAnnotatElement = document.getElementById(progress.element.id + 'Annotation0').children[0];
-        if (firstAnnotatElement && firstAnnotatElement.children[0]) {
-            if (firstAnnotatElement.children[0].tagName === 'SPAN') {
-                annotatElementChanged = firstAnnotatElement.children[0];
+        });
+    };
+    /** Circular indeterminate */
+    ProgressAnimation.prototype.doCircularIndeterminate = function (circularProgress, progress, start, end, x, y, radius, thickness) {
+        var _this = this;
+        var animation = new Animation({});
+        var pathRadius = radius + (thickness / 2);
+        animation.animate(circularProgress, {
+            duration: 2000,
+            delay: 0,
+            progress: function (args) {
+                start += (progress.enableRtl) ? -5 : 5;
+                end += (progress.enableRtl) ? -5 : 5;
+                circularProgress.setAttribute('d', getPathArc(x, y, pathRadius, start % 360, end % 360, progress.enableRtl, true));
+            },
+            end: function (model) {
+                _this.doCircularIndeterminate(circularProgress, progress, start, end, x, y, radius, thickness);
             }
-        }
-    }
-    var annotateValueChanged;
-    var totalAngle = progress.totalAngle;
-    var min = progress.minimum;
-    var max = progress.maximum;
-    var end = (start > progressEnd) ? progressEnd + 360 : progressEnd;
-    animation.animate(circularPath, {
-        duration: progress.animation.duration,
-        delay: progress.animation.delay,
-        progress: function (args) {
-            if (isAnnotation && annotatElementChanged) {
-                value = effect(args.timeStamp, start, progress.totalAngle, args.duration, progress.enableRtl);
-                if (value <= end) {
-                    annotateValueChanged = parseInt((((value - start) / totalAngle) * (max - min) + min).toString(), 10);
-                    annotatElementChanged.innerHTML = annotateValueChanged ? annotateValueChanged.toString() + '%' : '';
+        });
+    };
+    /** To do the annotation animation for circular progress bar */
+    ProgressAnimation.prototype.doAnnotationAnimation = function (circularPath, progress, start, progressEnd) {
+        var animation = new Animation({});
+        var value = 0;
+        var isAnnotation = progress.annotations.length > 0;
+        var annotatElementChanged;
+        var firstAnnotatElement;
+        if (isAnnotation && progress.progressAnnotationModule) {
+            firstAnnotatElement = document.getElementById(progress.element.id + 'Annotation0').children[0];
+            if (firstAnnotatElement && firstAnnotatElement.children[0]) {
+                if (firstAnnotatElement.children[0].tagName === 'SPAN') {
+                    annotatElementChanged = firstAnnotatElement.children[0];
                 }
-                else {
-                    annotatElementChanged.innerHTML = progress.value + '%';
-                }
             }
-        },
-        end: function (model) {
-            annotatElementChanged.innerHTML = progress.value + '%';
         }
-    });
-}
-/** To do the animation for circular progress bar */
-export function doCircularAnimation(x, y, radius, start, progressWidth, element, progress, thickness, delay, startValue) {
-    var animation = new Animation({});
-    var circularPath = element;
-    var pathRadius = 2 * radius * 0.75;
-    var value = 0;
-    var isAnnotation = progress.annotations.length > 0;
-    var annotatElement;
-    var firstElement;
-    if (isAnnotation && progress.progressAnnotationModule) {
-        firstElement = document.getElementById(progress.element.id + 'Annotation0').children[0];
-        if (firstElement && firstElement.children[0]) {
-            if (firstElement.children[0].tagName === 'SPAN') {
-                annotatElement = firstElement.children[0];
-            }
-        }
-    }
-    var annotateValue;
-    var totalAngle = progress.totalAngle;
-    var min = progress.minimum;
-    var max = progress.maximum;
-    var end = (start > progressWidth) ? progressWidth + 360 : progressWidth;
-    var animationDelay = (progress.isIndeterminate) ? 0 : delay;
-    start += (progress.cornerRadius === 'Round' && !progress.isIndeterminate) ?
-        ((progress.enableRtl === true) ? (lineCapRadius * thickness / 2) : -(lineCapRadius * thickness / 2)) : 0;
-    animation.animate(circularPath, {
-        duration: progress.animation.duration,
-        delay: animationDelay,
-        progress: function (args) {
-            if (args.timeStamp >= args.delay) {
-                value = effect(args.timeStamp, startValue | start, progress.totalAngle, args.duration, progress.enableRtl);
-                if (isAnnotation && annotatElement) {
+        var annotateValueChanged;
+        var totalAngle = progress.totalAngle;
+        var min = progress.minimum;
+        var max = progress.maximum;
+        var end = (start > progressEnd) ? progressEnd + 360 : progressEnd;
+        var totalEnd = (end - start);
+        animation.animate(circularPath, {
+            duration: progress.animation.duration,
+            delay: progress.animation.delay,
+            progress: function (args) {
+                if (isAnnotation && annotatElementChanged) {
+                    value = effect(args.timeStamp, start, totalEnd, args.duration, progress.enableRtl);
                     if (value <= end) {
-                        annotateValue = parseInt((((value - start) / totalAngle) * (max - min) + min).toString(), 10);
-                        annotatElement.innerHTML = annotateValue ? annotateValue.toString() + '%' : '';
+                        annotateValueChanged = parseInt((((value - start) / totalAngle) * (max - min) + min).toString(), 10);
+                        annotatElementChanged.innerHTML = annotateValueChanged ? annotateValueChanged.toString() + '%' : '';
                     }
                     else {
-                        annotatElement.innerHTML = progress.value + '%';
+                        annotatElementChanged.innerHTML = progress.value + '%';
                     }
                 }
-                circularPath.setAttribute('d', getPathArc(x, y, pathRadius, start, value, progress.enableRtl, true));
+            },
+            end: function (model) {
+                annotatElementChanged.innerHTML = progress.value + '%';
             }
-        },
-        end: function (model) {
-            circularPath.setAttribute('d', getPathArc(x, y, pathRadius, 0, 359.99, false, true));
-            if (isAnnotation && annotatElement) {
-                annotatElement.innerHTML = progress.value + '%';
-            }
-            if (progress.animation.enable) {
-                progress.labelElement.setAttribute('visibility', 'visible');
-            }
-            progress.trigger('animationComplete', {
-                value: progress.value, trackColor: progress.trackColor,
-                progressColor: progress.progressColor
-            });
-        }
-    });
-}
+        });
+    };
+    return ProgressAnimation;
+}());
+export { ProgressAnimation };

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

931371

increased by12.41%

Number of package files

56

increased by16.67%

Lines of code

6838

increased by11.99%

Number of low quality alerts

2

decreased by-33.33%

Dependency changes

• Updated@syncfusion/ej2-base@~18.1.42

• Updated@syncfusion/ej2-data@~18.1.42

• Updated@syncfusion/ej2-svg-base@~18.1.42