@progress/kendo-angular-progressbar 3.1.0-dev.202207261042 → 3.1.0-dev.202208010920

package/bundles/kendo-angular-progressbar.umd.js

@@ -2,4 +2,4 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@progress/kendo-licensing"),require("@progress/kendo-angular-l10n"),require("@progress/kendo-angular-common"),require("@angular/common"),require("rxjs")):"function"==typeof define&&define.amd?define("KendoAngularProgressbar",["exports","@angular/core","@progress/kendo-licensing","@progress/kendo-angular-l10n","@progress/kendo-angular-common","@angular/common","rxjs"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoAngularProgressbar={},e.ng.core,e.KendoLicensing,e.KendoAngularL10N,e.KendoAngularCommon,e.ng.common,e.rxjs)}(this,function(e,a,n,t,i,r,o){"use strict";function s(r){if(r&&r.__esModule)return r;var s=Object.create(null);return r&&Object.keys(r).forEach(function(e){var t;"default"!==e&&(t=Object.getOwnPropertyDescriptor(r,e),Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:function(){return r[e]}}))}),s.default=r,Object.freeze(s)}var l=s(a),p=s(t),u=s(r),c=function(e,t){return(c=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])})(e,t)};function g(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function r(){this.constructor=e}c(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}Object.create;Object.create;function h(e,t,r,s){var n,i,a,o,l=1===(n=e.toString().split(".")).length?""+n[0]:n[0]+"."+n[1].substr(0,v);if("boolean"!=typeof s){if("string"!=typeof s.format)return"function"==typeof s.format?s.format(e):l;switch(s.format){case"value":return l;case"percent":return Math.floor((i=e,a=t,o=Math.abs((r-a)/100),Math.abs((i-a)/o)))+"%";default:return l}}return l}function m(e,t,r){return Math.max(Math.min(r,t),e)}function d(e,t,r){return Math.max((r-e)/(t-e),1e-4)}function y(e,t,r){return e[t]&&void 0!==e[t].currentValue?e[t].currentValue:r}function f(e,t){e.forEach(function(e){t[e.method](e.el,e.attr,""+e.attrValue)})}var b={name:"@progress/kendo-angular-progressbar",productName:"Kendo UI for Angular",productCodes:["KENDOUIANGULAR","KENDOUICOMPLETE"],publishDate:1658832123,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning"},v=3,C=(Object.defineProperty(k.prototype,"isHorizontal",{get:function(){return"horizontal"===this.orientation},enumerable:!1,configurable:!0}),Object.defineProperty(k.prototype,"isVertical",{get:function(){return"vertical"===this.orientation},enumerable:!1,configurable:!0}),Object.defineProperty(k.prototype,"disabledClass",{get:function(){return this.disabled},enumerable:!1,configurable:!0}),Object.defineProperty(k.prototype,"reverseClass",{get:function(){return this.reverse},enumerable:!1,configurable:!0}),Object.defineProperty(k.prototype,"indeterminateClass",{get:function(){return this.indeterminate},enumerable:!1,configurable:!0}),Object.defineProperty(k.prototype,"dirAttribute",{get:function(){return this.direction},enumerable:!1,configurable:!0}),Object.defineProperty(k.prototype,"ariaMinAttribute",{get:function(){return String(this.min)},enumerable:!1,configurable:!0}),Object.defineProperty(k.prototype,"ariaMaxAttribute",{get:function(){return String(this.max)},enumerable:!1,configurable:!0}),Object.defineProperty(k.prototype,"ariaValueAttribute",{get:function(){return this.indeterminate?void 0:String(this.displayValue)},enumerable:!1,configurable:!0}),Object.defineProperty(k.prototype,"isCompleted",{get:function(){return this.value===this.max},enumerable:!1,configurable:!0}),Object.defineProperty(k.prototype,"statusWidth",{get:function(){return"horizontal"===this.orientation?100*this._progressRatio:100},enumerable:!1,configurable:!0}),Object.defineProperty(k.prototype,"statusHeight",{get:function(){return"vertical"===this.orientation?100*this._progressRatio:100},enumerable:!1,configurable:!0}),Object.defineProperty(k.prototype,"statusWrapperWidth",{get:function(){return"horizontal"===this.orientation?100/this._progressRatio:100},enumerable:!1,configurable:!0}),Object.defineProperty(k.prototype,"statusWrapperHeight",{get:function(){return"vertical"===this.orientation?100/this._progressRatio:100},enumerable:!1,configurable:!0}),Object.defineProperty(k.prototype,"_progressRatio",{get:function(){return d(this.min,this.max,this.displayValue)},enumerable:!1,configurable:!0}),k.prototype.ngOnChanges=function(e){var t=y(e,"min",this.min),r=y(e,"max",this.max),s=y(e,"value",this.value);if(e.min||e.max||e.value){if(e.min||e.max){var n=t,i=r;if(a.isDevMode&&i<n)throw new Error("The max value should be greater than the min.")}e.value&&(null!=s&&!Number.isNaN(s)||(this.value=t),i=this.displayValue,this.displayValue=m(this.min,this.max,s),this.previousValue=i),this.min=t,this.max=r,this.displayValue=m(this.min,this.max,s)}},k.prototype.ngOnDestroy=function(){this.localizationChangeSubscription&&this.localizationChangeSubscription.unsubscribe()},k);function k(e){var t=this;this.localization=e,this.widgetClasses=!0,this.roleAttribute="progressbar",this.max=100,this.min=0,this.value=0,this.orientation="horizontal",this.disabled=!1,this.reverse=!1,this.indeterminate=!1,this.displayValue=0,this.previousValue=0,n.validatePackage(b),this.localizationChangeSubscription=e.changes.subscribe(function(e){e=e.rtl;t.direction=e?"rtl":"ltr"})}C.ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:l,type:C,deps:[{token:p.LocalizationService}],target:l.ɵɵFactoryTarget.Component}),C.ɵcmp=l.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:C,selector:"ng-component",inputs:{max:"max",min:"min",value:"value",orientation:"orientation",disabled:"disabled",reverse:"reverse",indeterminate:"indeterminate"},host:{properties:{"class.k-widget":"this.widgetClasses","class.k-progressbar":"this.widgetClasses","class.k-progressbar-horizontal":"this.isHorizontal","class.k-progressbar-vertical":"this.isVertical","class.k-state-disabled":"this.disabledClass","class.k-progressbar-reverse":"this.reverseClass","class.k-progressbar-indeterminate":"this.indeterminateClass","attr.dir":"this.dirAttribute","attr.role":"this.roleAttribute","attr.aria-valuemin":"this.ariaMinAttribute","attr.aria-valuemax":"this.ariaMaxAttribute","attr.aria-valuenow":"this.ariaValueAttribute"}},usesOnChanges:!0,ngImport:l,template:"",isInline:!0}),l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:l,type:C,decorators:[{type:a.Component,args:[{template:""}]}],ctorParameters:function(){return[{type:p.LocalizationService}]},propDecorators:{widgetClasses:[{type:a.HostBinding,args:["class.k-widget"]},{type:a.HostBinding,args:["class.k-progressbar"]}],isHorizontal:[{type:a.HostBinding,args:["class.k-progressbar-horizontal"]}],isVertical:[{type:a.HostBinding,args:["class.k-progressbar-vertical"]}],disabledClass:[{type:a.HostBinding,args:["class.k-state-disabled"]}],reverseClass:[{type:a.HostBinding,args:["class.k-progressbar-reverse"]}],indeterminateClass:[{type:a.HostBinding,args:["class.k-progressbar-indeterminate"]}],dirAttribute:[{type:a.HostBinding,args:["attr.dir"]}],roleAttribute:[{type:a.HostBinding,args:["attr.role"]}],ariaMinAttribute:[{type:a.HostBinding,args:["attr.aria-valuemin"]}],ariaMaxAttribute:[{type:a.HostBinding,args:["attr.aria-valuemax"]}],ariaValueAttribute:[{type:a.HostBinding,args:["attr.aria-valuenow"]}],max:[{type:a.Input}],min:[{type:a.Input}],value:[{type:a.Input}],orientation:[{type:a.Input}],disabled:[{type:a.Input}],reverse:[{type:a.Input}],indeterminate:[{type:a.Input}]}});g(V,S=C),Object.defineProperty(V.prototype,"showLabel",{get:function(){return"boolean"==typeof this.label?this.label:(this.label&&!this.label.hasOwnProperty("visible")&&(this.label.visible=!0),this.label.visible)},enumerable:!1,configurable:!0}),Object.defineProperty(V.prototype,"labelPosition",{get:function(){return"boolean"==typeof this.label?"end":(this.label&&!this.label.hasOwnProperty("position")&&(this.label.position="end"),this.label.position)},enumerable:!1,configurable:!0}),Object.defineProperty(V.prototype,"isPositionStart",{get:function(){return"start"===this.labelPosition},enumerable:!1,configurable:!0}),Object.defineProperty(V.prototype,"isPositionCenter",{get:function(){return"center"===this.labelPosition},enumerable:!1,configurable:!0}),Object.defineProperty(V.prototype,"isPositionEnd",{get:function(){return"end"===this.labelPosition},enumerable:!1,configurable:!0}),Object.defineProperty(V.prototype,"formattedLabelValue",{get:function(){return h(this.displayValue,this.min,this.max,this.label)},enumerable:!1,configurable:!0}),V.prototype.ngOnChanges=function(e){var t,r,s,n;S.prototype.ngOnChanges.call(this,e),this.isAnimationInProgress&&(r=e,t=Boolean(r.animation),r=t&&r.animation.currentValue,t&&!r)&&(this.cancelCurrentAnimation=!0),t=e,r=this.animation,s=this.previousValue,n=this.displayValue,r&&"undefined"!=typeof requestAnimationFrame&&t.value&&s!==n&&!e.value.firstChange&&this.startAnimation(this.previousValue)},V.prototype.ngOnDestroy=function(){this.animationFrame&&cancelAnimationFrame(this.animationFrame)},V.prototype.startAnimation=function(s){var n=this,i=(this.isAnimationInProgress=!0,this.progressStatusElement.nativeElement),a=this.progressStatusWrapperElement.nativeElement,o=this.getAnimationOptions(s);this.zone.runOutsideAngular(function(){n.animationFrame&&cancelAnimationFrame(n.animationFrame);function r(){var e=(new Date).getTime()-o.startTime,e=Math.min(e/o.duration,1),t=o.startSize+o.deltaSize*e;n.renderValueChange(i,a,o.property,t,100/t*100),e<1?n.cancelCurrentAnimation?n.resetProgress(i,a,o.property):n.animationFrame=requestAnimationFrame(r):n.stopAnimation(s)}r()})},Object.defineProperty(V.prototype,"animationDuration",{get:function(){return"boolean"==typeof this.animation?400:(this.animation&&!this.animation.hasOwnProperty("duration")&&(this.animation.duration=400),this.animation.duration)},enumerable:!1,configurable:!0}),V.prototype.stopAnimation=function(e){var t=this;i.hasObservers(this.animationEnd)&&this.zone.run(function(){t.animationEnd.emit({from:e,to:t.displayValue})}),this.zone.run(function(){t.isAnimationInProgress=!1})},V.prototype.getAnimationOptions=function(e){var t="horizontal"===this.orientation,e=d(this.min,this.max,e),r=t?100*e:100,e=t?100:100*e,s=t?"width":"height",n=(new Date).getTime(),i=t?this.statusWidth-r:this.statusHeight-e;return{property:s,startTime:n,startSize:t?r:e,deltaSize:i,duration:this.animationDuration*Math.abs(i/100)}},V.prototype.renderValueChange=function(e,t,r,s,n){this.renderer.setStyle(e,r,s+"%"),this.renderer.setStyle(t,r,n+"%")},V.prototype.resetProgress=function(e,t,r){var s=this,n=d(this.min,this.max,this.value);this.renderValueChange(e,t,r,100*n,100/n),this.zone.run(function(){s.cancelCurrentAnimation=!1,s.isAnimationInProgress=!1})};var S,P=V;function V(e,t,r){var s=S.call(this,e)||this;return s.localization=e,s.zone=t,s.renderer=r,s.label=!0,s.animation=!1,s.animationEnd=new a.EventEmitter,s}P.ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:l,type:P,deps:[{token:p.LocalizationService},{token:l.NgZone},{token:l.Renderer2}],target:l.ɵɵFactoryTarget.Component}),P.ɵcmp=l.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:P,selector:"kendo-progressbar",inputs:{label:"label",progressCssStyle:"progressCssStyle",progressCssClass:"progressCssClass",emptyCssStyle:"emptyCssStyle",emptyCssClass:"emptyCssClass",animation:"animation"},outputs:{animationEnd:"animationEnd"},providers:[t.LocalizationService,{provide:t.L10N_PREFIX,useValue:"kendo.progressbar"}],viewQueries:[{propertyName:"progressStatusElement",first:!0,predicate:["progressStatus"],descendants:!0},{propertyName:"progressStatusWrapperElement",first:!0,predicate:["progressStatusWrap"],descendants:!0}],exportAs:["kendoProgressBar"],usesInheritance:!0,usesOnChanges:!0,ngImport:l,template:'\n        <span class="k-progress-status-wrap"\n            [class.k-progress-start]="isPositionStart"\n            [class.k-progress-center]="isPositionCenter"\n            [class.k-progress-end]="isPositionEnd"\n            [ngStyle]="emptyCssStyle"\n            [ngClass]="emptyCssClass">\n            <span *ngIf="showLabel" class="k-progress-status">{{formattedLabelValue}}</span>\n        </span>\n        <div\n            #progressStatus\n            class="k-state-selected"\n            [class.k-complete]="isCompleted"\n            [ngStyle]="progressCssStyle"\n            [ngClass]="progressCssClass"\n            [style.width.%]="statusWidth"\n            [style.height.%]="statusHeight"\n            >\n            <span\n                #progressStatusWrap\n                class="k-progress-status-wrap"\n                [style.width.%]="statusWrapperWidth"\n                [style.height.%]="statusWrapperHeight"\n                [class.k-progress-start]="isPositionStart"\n                [class.k-progress-center]="isPositionCenter"\n                [class.k-progress-end]="isPositionEnd"\n                >\n                <span *ngIf="showLabel" class="k-progress-status">{{formattedLabelValue}}</span>\n            </span>\n        </div>\n       ',isInline:!0,directives:[{type:u.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{type:u.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]},{type:u.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]}]}),l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:l,type:P,decorators:[{type:a.Component,args:[{exportAs:"kendoProgressBar",selector:"kendo-progressbar",template:'\n        <span class="k-progress-status-wrap"\n            [class.k-progress-start]="isPositionStart"\n            [class.k-progress-center]="isPositionCenter"\n            [class.k-progress-end]="isPositionEnd"\n            [ngStyle]="emptyCssStyle"\n            [ngClass]="emptyCssClass">\n            <span *ngIf="showLabel" class="k-progress-status">{{formattedLabelValue}}</span>\n        </span>\n        <div\n            #progressStatus\n            class="k-state-selected"\n            [class.k-complete]="isCompleted"\n            [ngStyle]="progressCssStyle"\n            [ngClass]="progressCssClass"\n            [style.width.%]="statusWidth"\n            [style.height.%]="statusHeight"\n            >\n            <span\n                #progressStatusWrap\n                class="k-progress-status-wrap"\n                [style.width.%]="statusWrapperWidth"\n                [style.height.%]="statusWrapperHeight"\n                [class.k-progress-start]="isPositionStart"\n                [class.k-progress-center]="isPositionCenter"\n                [class.k-progress-end]="isPositionEnd"\n                >\n                <span *ngIf="showLabel" class="k-progress-status">{{formattedLabelValue}}</span>\n            </span>\n        </div>\n       ',providers:[t.LocalizationService,{provide:t.L10N_PREFIX,useValue:"kendo.progressbar"}]}]}],ctorParameters:function(){return[{type:p.LocalizationService},{type:l.NgZone},{type:l.Renderer2}]},propDecorators:{label:[{type:a.Input}],progressCssStyle:[{type:a.Input}],progressCssClass:[{type:a.Input}],emptyCssStyle:[{type:a.Input}],emptyCssClass:[{type:a.Input}],animation:[{type:a.Input}],animationEnd:[{type:a.Output}],progressStatusElement:[{type:a.ViewChild,args:["progressStatus",{static:!1}]}],progressStatusWrapperElement:[{type:a.ViewChild,args:["progressStatusWrap",{static:!1}]}]}});g(O,I=C),Object.defineProperty(O.prototype,"chunks",{get:function(){for(var e,t=this.chunkCount,r=Array(t).fill(!1),s=Math.floor(this._progressRatio*t),n=0;n<s;n++)r[n]=!0;return t=this.orientation,e=this.reverse,("vertical"===t&&!e||"horizontal"===t&&e)&&r.reverse(),r},enumerable:!1,configurable:!0}),Object.defineProperty(O.prototype,"chunkSizePercentage",{get:function(){return 100/this.chunkCount},enumerable:!1,configurable:!0}),Object.defineProperty(O.prototype,"orientationStyles",{get:function(){return"horizontal"===this.orientation?(this._orientationStyles.width=this.chunkSizePercentage+"%",this._orientationStyles.height=void 0):(this._orientationStyles.height=this.chunkSizePercentage+"%",this._orientationStyles.width=void 0),this._orientationStyles},enumerable:!1,configurable:!0});var I,C=O;function O(e){var t=I.call(this,e)||this;return t.localization=e,t.chunkCount=5,t._orientationStyles={width:t.chunkSizePercentage+"%"},t}C.ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:l,type:C,deps:[{token:p.LocalizationService}],target:l.ɵɵFactoryTarget.Component}),C.ɵcmp=l.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:C,selector:"kendo-chunkprogressbar",inputs:{chunkCount:"chunkCount",progressCssStyle:"progressCssStyle",progressCssClass:"progressCssClass",emptyCssStyle:"emptyCssStyle",emptyCssClass:"emptyCssClass"},providers:[t.LocalizationService,{provide:t.L10N_PREFIX,useValue:"kendo.chunkprogressbar"}],exportAs:["kendoChunkProgressBar"],usesInheritance:!0,ngImport:l,template:'\n        <ul class="k-reset">\n            <li class="k-item" *ngFor="let chunk of chunks; let i = index;"\n                [class.k-first]="i === 0"\n                [class.k-last]="i === chunkCount - 1"\n                [class.k-state-selected]="chunk"\n                [ngClass]="chunk ? progressCssClass : emptyCssClass"\n                [ngStyle]="chunk ? progressCssStyle : emptyCssStyle"\n                [style.width]="orientationStyles.width"\n                [style.height]="orientationStyles.height"\n                >\n            </li>\n        </ul>\n    ',isInline:!0,directives:[{type:u.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{type:u.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]},{type:u.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]}]}),l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:l,type:C,decorators:[{type:a.Component,args:[{exportAs:"kendoChunkProgressBar",selector:"kendo-chunkprogressbar",template:'\n        <ul class="k-reset">\n            <li class="k-item" *ngFor="let chunk of chunks; let i = index;"\n                [class.k-first]="i === 0"\n                [class.k-last]="i === chunkCount - 1"\n                [class.k-state-selected]="chunk"\n                [ngClass]="chunk ? progressCssClass : emptyCssClass"\n                [ngStyle]="chunk ? progressCssStyle : emptyCssStyle"\n                [style.width]="orientationStyles.width"\n                [style.height]="orientationStyles.height"\n                >\n            </li>\n        </ul>\n    ',providers:[t.LocalizationService,{provide:t.L10N_PREFIX,useValue:"kendo.chunkprogressbar"}]}]}],ctorParameters:function(){return[{type:p.LocalizationService}]},propDecorators:{chunkCount:[{type:a.Input}],progressCssStyle:[{type:a.Input}],progressCssClass:[{type:a.Input}],emptyCssStyle:[{type:a.Input}],emptyCssClass:[{type:a.Input}]}});var w=function(e){this.templateRef=e},E=(w.ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:l,type:w,deps:[{token:l.TemplateRef}],target:l.ɵɵFactoryTarget.Directive}),w.ɵdir=l.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:w,selector:"[kendoCircularProgressbarCenterTemplate]",ngImport:l}),l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:l,type:w,decorators:[{type:a.Directive,args:[{selector:"[kendoCircularProgressbarCenterTemplate]"}]}],ctorParameters:function(){return[{type:l.TemplateRef}]}}),Object.defineProperty(x.prototype,"value",{get:function(){return this._value},set:function(e){e>this.max&&this.handleErrors("value > max"),e<this.min&&this.handleErrors("value < min"),this.previousValue=this.value,this._value=e},enumerable:!1,configurable:!0}),Object.defineProperty(x.prototype,"max",{get:function(){return this._max},set:function(e){e<this.min&&this.handleErrors("max < min"),this._max=e},enumerable:!1,configurable:!0}),Object.defineProperty(x.prototype,"min",{get:function(){return this._min},set:function(e){e>this.max&&this.handleErrors("max < min"),this._min=e},enumerable:!1,configurable:!0}),Object.defineProperty(x.prototype,"indeterminate",{get:function(){return this._indeterminate},set:function(e){this._indeterminate=e},enumerable:!1,configurable:!0}),x.prototype.ngAfterViewInit=function(){this.initProgressArc()},x.prototype.ngOnChanges=function(e){var t=e.value,r=this.progress,s=!e.value.firstChange;t&&r&&s&&(this.animation?this.progressbarAnimation():(t=this.value-this.min,this.internalValue=e.value.currentValue,this.calculateProgress(t))),e.opacity&&this.progress&&f([{method:"setAttribute",el:this.progress.nativeElement,attr:"opacity",attrValue:this.opacity}],this.renderer),e.indeterminate&&!e.indeterminate.firstChange&&this.indeterminateState()},x.prototype.ngOnDestroy=function(){this.subscriptions.unsubscribe()},x.prototype.initProgressArc=function(){var e;this.setStyles(),this.indeterminate?this.indeterminateState():this.animation?this.progressbarAnimation():(e=this.value-this.min,this.calculateProgress(e))},x.prototype.calculateProgress=function(e){this.progressColor&&this.updateProgressColor(e),this.updateCenterTemplate(e+this.min);var t=this.progress.nativeElement,r=this.progress.nativeElement.r.baseVal.value,r=Math.PI*(2*r),e=r-(this.rtl?-1*r:r)*(e/(this.max-this.min));f([{method:"setStyle",el:t,attr:"strokeDasharray",attrValue:r},{method:"setStyle",el:t,attr:"strokeDashoffset",attrValue:e}],this.renderer)},x.prototype.progressbarAnimation=function(){var e=this.internalValue>this.value-this.min,t=this.value>this.previousValue,r=this.internalValue<this.value-this.min,s=this.value<this.previousValue;e&&t||r&&s||(this.calculateProgress(this.internalValue),e=this.internalValue,i.hasObservers(this.animationEnd)&&this.animationEnd.emit({from:e,to:this.internalValue}),t?this.internalValue+=1:--this.internalValue,requestAnimationFrame(this.progressbarAnimation.bind(this)))},x.prototype.setStyles=function(){var e=this.progress.nativeElement,t=this.scale.nativeElement,r=this.element.nativeElement.getBoundingClientRect().width,e=[{method:"setAttribute",el:e,attr:"r",attrValue:r/2-10},{method:"setAttribute",el:e,attr:"cx",attrValue:r/2},{method:"setAttribute",el:e,attr:"cy",attrValue:r/2},{method:"setAttribute",el:e,attr:"opacity",attrValue:this.opacity},{method:"setAttribute",el:t,attr:"r",attrValue:r/2-10},{method:"setAttribute",el:t,attr:"cx",attrValue:r/2},{method:"setAttribute",el:t,attr:"cy",attrValue:r/2}];f(e,this.renderer)},x.prototype.indeterminateState=function(){var e,t,r=this.progress.nativeElement;this.indeterminate?(this.calculateProgress(this.value-this.min),e=this.rtl?{from:360,to:0}:{from:0,to:360},this.renderer.removeClass(r,"k-circular-progressbar-arc"),f([{method:"setStyle",el:r,attr:"transform-origin",attrValue:"center"},{method:"setStyle",el:r,attr:"fill",attrValue:"none"},{method:"setStyle",el:r,attr:"stroke-linecap",attrValue:"round"}],this.renderer),r.innerHTML='<animateTransform attributeName="transform" type="rotate" from="'+e.from+' 0 0" to="'+e.to+' 0 0" dur="1s" repeatCount="indefinite" />'):(this.renderer.addClass(r,"k-circular-progressbar-arc"),t=this.renderer,[{method:"removeStyle",el:r,attr:"transform-origin"},{method:"removeStyle",el:r,attr:"fill"},{method:"removeStyle",el:r,attr:"stroke-linecap"}].forEach(function(e){t[e.method](e.el,e.attr)}),r.innerHTML="",this.animation&&this.progressbarAnimation())},x.prototype.updateCenterTemplate=function(e){this.centerTemplate&&(this.centerTemplateContext.value=e,this.centerTemplateContext.color=this.currentColor,this.cdr.detectChanges(),this.positionLabel())},x.prototype.positionLabel=function(){var e=this.labelElement.nativeElement,t=this.svgWrapper.nativeElement.getBoundingClientRect(),r=t.width,t=t.height,r=r/2-e.offsetWidth/2,t=t/2-e.offsetHeight/2;f([{method:"setStyle",el:e,attr:"left",attrValue:r+"px"},{method:"setStyle",el:e,attr:"top",attrValue:t+"px"}],this.renderer)},Object.defineProperty(x.prototype,"currentColor",{get:function(){return this.progress.nativeElement.style.stroke},enumerable:!1,configurable:!0}),x.prototype.updateProgressColor=function(e){var t=this.progress.nativeElement;if("string"==typeof this.progressColor)this.renderer.setStyle(t,"stroke",this.progressColor);else for(var r=0;r<this.progressColor.length;r++){var s=this.progressColor[r].from,n=this.progressColor[r].to;if(s<=e&&e<n||!s&&e<n){this.renderer.setStyle(t,"stroke",this.progressColor[r].color);break}!n&&s<=e&&this.renderer.setStyle(t,"stroke",this.progressColor[r].color)}},x.prototype.handleErrors=function(e){if(a.isDevMode())switch(e){case"value > max":throw new Error("The value of the Circular Progressbar cannot exceed the max value");case"value < min":throw new Error("The value of the Circular Progressbar cannot be lower than the min value");case"max < min":throw new Error("The min value cannot be higher than the max value")}},x.prototype.setDirection=function(){this.rtl=this.localizationService.rtl,this.element&&this.renderer.setAttribute(this.element.nativeElement,"dir",this.rtl?"rtl":"ltr"),this.labelElement&&this.renderer.setAttribute(this.labelElement.nativeElement,"dir",this.rtl?"rtl":"ltr")},x.prototype.rtlChange=function(){this.element&&this.rtl!==this.localizationService.rtl&&this.setDirection()},x);function x(e,t,r,s){this.renderer=e,this.cdr=t,this.localizationService=r,this.element=s,this.hostClasses=!0,this.WrapperSize="200px",this.animation=!0,this.opacity=1,this.animationEnd=new a.EventEmitter,this.centerTemplateContext={},this._indeterminate=!1,this._max=100,this._min=0,this._value=0,this.internalValue=0,this.subscriptions=new o.Subscription,n.validatePackage(b),this.subscriptions.add(this.localizationService.changes.subscribe(this.rtlChange.bind(this)))}E.ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:l,type:E,deps:[{token:l.Renderer2},{token:l.ChangeDetectorRef},{token:p.LocalizationService},{token:l.ElementRef}],target:l.ɵɵFactoryTarget.Component}),E.ɵcmp=l.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:E,selector:"kendo-circularprogressbar",inputs:{value:"value",max:"max",min:"min",animation:"animation",opacity:"opacity",indeterminate:"indeterminate",progressColor:"progressColor"},outputs:{animationEnd:"animationEnd"},host:{properties:{"class.k-circular-progressbar":"this.hostClasses","style.width":"this.WrapperSize","style.height":"this.WrapperSize"}},providers:[t.LocalizationService,{provide:t.L10N_PREFIX,useValue:"kendo.circularprogressbar"}],queries:[{propertyName:"centerTemplate",first:!0,predicate:w,descendants:!0}],viewQueries:[{propertyName:"progress",first:!0,predicate:["progress"],descendants:!0},{propertyName:"scale",first:!0,predicate:["scale"],descendants:!0},{propertyName:"labelElement",first:!0,predicate:["label"],descendants:!0},{propertyName:"svgWrapper",first:!0,predicate:["svgWrapper"],descendants:!0}],exportAs:["kendoCircularProgressBar"],usesOnChanges:!0,ngImport:l,template:'\n        <div class="k-circular-progressbar-surface">\n            <div #svgWrapper>\n                <svg #svg>\n                    <g>\n                        <circle class="k-circular-progressbar-scale" #scale stroke-width="9.5"></circle>\n                        <circle class="k-circular-progressbar-arc" #progress stroke-width="9.5"></circle>\n                    </g>\n                </svg>\n                <div class="k-circular-progressbar-label" *ngIf="centerTemplate" #label>\n                    <ng-template [ngTemplateOutlet]="centerTemplate.templateRef" [ngTemplateOutletContext]="centerTemplateContext"></ng-template>\n                </div>\n            </div>\n        </div>\n    ',isInline:!0,directives:[{type:u.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{type:u.NgTemplateOutlet,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet"]}]}),l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:l,type:E,decorators:[{type:a.Component,args:[{exportAs:"kendoCircularProgressBar",selector:"kendo-circularprogressbar",template:'\n        <div class="k-circular-progressbar-surface">\n            <div #svgWrapper>\n                <svg #svg>\n                    <g>\n                        <circle class="k-circular-progressbar-scale" #scale stroke-width="9.5"></circle>\n                        <circle class="k-circular-progressbar-arc" #progress stroke-width="9.5"></circle>\n                    </g>\n                </svg>\n                <div class="k-circular-progressbar-label" *ngIf="centerTemplate" #label>\n                    <ng-template [ngTemplateOutlet]="centerTemplate.templateRef" [ngTemplateOutletContext]="centerTemplateContext"></ng-template>\n                </div>\n            </div>\n        </div>\n    ',providers:[t.LocalizationService,{provide:t.L10N_PREFIX,useValue:"kendo.circularprogressbar"}]}]}],ctorParameters:function(){return[{type:l.Renderer2},{type:l.ChangeDetectorRef},{type:p.LocalizationService},{type:l.ElementRef}]},propDecorators:{hostClasses:[{type:a.HostBinding,args:["class.k-circular-progressbar"]}],WrapperSize:[{type:a.HostBinding,args:["style.width"]},{type:a.HostBinding,args:["style.height"]}],value:[{type:a.Input}],max:[{type:a.Input}],min:[{type:a.Input}],animation:[{type:a.Input}],opacity:[{type:a.Input}],indeterminate:[{type:a.Input}],progressColor:[{type:a.Input}],animationEnd:[{type:a.Output}],progress:[{type:a.ViewChild,args:["progress"]}],scale:[{type:a.ViewChild,args:["scale"]}],labelElement:[{type:a.ViewChild,args:["label"]}],svgWrapper:[{type:a.ViewChild,args:["svgWrapper"]}],centerTemplate:[{type:a.ContentChild,args:[w]}]}});var u=[P,C,E,w],t=[r.CommonModule,i.ResizeSensorModule],A=function(){};A.ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:l,type:A,deps:[],target:l.ɵɵFactoryTarget.NgModule}),A.ɵmod=l.ɵɵngDeclareNgModule({minVersion:"12.0.0",version:"12.2.16",ngImport:l,type:A,declarations:[P,C,E,w],imports:[r.CommonModule,i.ResizeSensorModule],exports:[P,C,E,w]}),A.ɵinj=l.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"12.2.16",ngImport:l,type:A,imports:[t]}),l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:l,type:A,decorators:[{type:a.NgModule,args:[{declarations:u,exports:u,imports:t}]}]}),e.ChunkProgressBarComponent=C,e.CircularProgressBar=E,e.CircularProgressbarCenterTemplateDirective=w,e.ProgressBarComponent=P,e.ProgressBarModule=A,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@progress/kendo-licensing"),require("@progress/kendo-angular-l10n"),require("@progress/kendo-angular-common"),require("@angular/common"),require("rxjs")):"function"==typeof define&&define.amd?define("KendoAngularProgressbar",["exports","@angular/core","@progress/kendo-licensing","@progress/kendo-angular-l10n","@progress/kendo-angular-common","@angular/common","rxjs"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoAngularProgressbar={},e.ng.core,e.KendoLicensing,e.KendoAngularL10N,e.KendoAngularCommon,e.ng.common,e.rxjs)}(this,function(e,a,i,t,n,r,o){"use strict";function s(r){if(r&&r.__esModule)return r;var s=Object.create(null);return r&&Object.keys(r).forEach(function(e){var t;"default"!==e&&(t=Object.getOwnPropertyDescriptor(r,e),Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:function(){return r[e]}}))}),s.default=r,Object.freeze(s)}var l=s(a),p=s(t),u=s(n),c=s(r),g=function(e,t){return(g=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])})(e,t)};function h(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function r(){this.constructor=e}g(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}Object.create;Object.create;function m(e,t,r,s){var n,i,a,o,l=1===(n=e.toString().split(".")).length?""+n[0]:n[0]+"."+n[1].substr(0,C);if("boolean"!=typeof s){if("string"!=typeof s.format)return"function"==typeof s.format?s.format(e):l;switch(s.format){case"value":return l;case"percent":return Math.floor((i=e,a=t,o=Math.abs((r-a)/100),Math.abs((i-a)/o)))+"%";default:return l}}return l}function d(e,t,r){return Math.max(Math.min(r,t),e)}function y(e,t,r){return Math.max((r-e)/(t-e),1e-4)}function f(e,t,r){return e[t]&&void 0!==e[t].currentValue?e[t].currentValue:r}function b(e,t){e.forEach(function(e){t[e.method](e.el,e.attr,""+e.attrValue)})}var v={name:"@progress/kendo-angular-progressbar",productName:"Kendo UI for Angular",productCodes:["KENDOUIANGULAR","KENDOUICOMPLETE"],publishDate:1659345594,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning"},C=3,k=(Object.defineProperty(S.prototype,"isHorizontal",{get:function(){return"horizontal"===this.orientation},enumerable:!1,configurable:!0}),Object.defineProperty(S.prototype,"isVertical",{get:function(){return"vertical"===this.orientation},enumerable:!1,configurable:!0}),Object.defineProperty(S.prototype,"disabledClass",{get:function(){return this.disabled},enumerable:!1,configurable:!0}),Object.defineProperty(S.prototype,"reverseClass",{get:function(){return this.reverse},enumerable:!1,configurable:!0}),Object.defineProperty(S.prototype,"indeterminateClass",{get:function(){return this.indeterminate},enumerable:!1,configurable:!0}),Object.defineProperty(S.prototype,"dirAttribute",{get:function(){return this.direction},enumerable:!1,configurable:!0}),Object.defineProperty(S.prototype,"ariaMinAttribute",{get:function(){return String(this.min)},enumerable:!1,configurable:!0}),Object.defineProperty(S.prototype,"ariaMaxAttribute",{get:function(){return String(this.max)},enumerable:!1,configurable:!0}),Object.defineProperty(S.prototype,"ariaValueAttribute",{get:function(){return this.indeterminate?void 0:String(this.displayValue)},enumerable:!1,configurable:!0}),Object.defineProperty(S.prototype,"isCompleted",{get:function(){return this.value===this.max},enumerable:!1,configurable:!0}),Object.defineProperty(S.prototype,"statusWidth",{get:function(){return"horizontal"===this.orientation?100*this._progressRatio:100},enumerable:!1,configurable:!0}),Object.defineProperty(S.prototype,"statusHeight",{get:function(){return"vertical"===this.orientation?100*this._progressRatio:100},enumerable:!1,configurable:!0}),Object.defineProperty(S.prototype,"statusWrapperWidth",{get:function(){return"horizontal"===this.orientation?100/this._progressRatio:100},enumerable:!1,configurable:!0}),Object.defineProperty(S.prototype,"statusWrapperHeight",{get:function(){return"vertical"===this.orientation?100/this._progressRatio:100},enumerable:!1,configurable:!0}),Object.defineProperty(S.prototype,"_progressRatio",{get:function(){return y(this.min,this.max,this.displayValue)},enumerable:!1,configurable:!0}),S.prototype.ngOnChanges=function(e){var t=f(e,"min",this.min),r=f(e,"max",this.max),s=f(e,"value",this.value);if(e.min||e.max||e.value){if(e.min||e.max){var n=t,i=r;if(a.isDevMode&&i<n)throw new Error("The max value should be greater than the min.")}e.value&&(null!=s&&!Number.isNaN(s)||(this.value=t),i=this.displayValue,this.displayValue=d(this.min,this.max,s),this.previousValue=i),this.min=t,this.max=r,this.displayValue=d(this.min,this.max,s)}},S.prototype.ngOnDestroy=function(){this.localizationChangeSubscription&&this.localizationChangeSubscription.unsubscribe()},S);function S(e){var t=this;this.localization=e,this.widgetClasses=!0,this.roleAttribute="progressbar",this.max=100,this.min=0,this.value=0,this.orientation="horizontal",this.disabled=!1,this.reverse=!1,this.indeterminate=!1,this.displayValue=0,this.previousValue=0,i.validatePackage(v),this.localizationChangeSubscription=e.changes.subscribe(function(e){e=e.rtl;t.direction=e?"rtl":"ltr"})}k.ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:l,type:k,deps:[{token:p.LocalizationService}],target:l.ɵɵFactoryTarget.Component}),k.ɵcmp=l.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:k,selector:"ng-component",inputs:{max:"max",min:"min",value:"value",orientation:"orientation",disabled:"disabled",reverse:"reverse",indeterminate:"indeterminate"},host:{properties:{"class.k-widget":"this.widgetClasses","class.k-progressbar":"this.widgetClasses","class.k-progressbar-horizontal":"this.isHorizontal","class.k-progressbar-vertical":"this.isVertical","class.k-disabled":"this.disabledClass","class.k-progressbar-reverse":"this.reverseClass","class.k-progressbar-indeterminate":"this.indeterminateClass","attr.dir":"this.dirAttribute","attr.role":"this.roleAttribute","attr.aria-valuemin":"this.ariaMinAttribute","attr.aria-valuemax":"this.ariaMaxAttribute","attr.aria-valuenow":"this.ariaValueAttribute"}},usesOnChanges:!0,ngImport:l,template:"",isInline:!0}),l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:l,type:k,decorators:[{type:a.Component,args:[{template:""}]}],ctorParameters:function(){return[{type:p.LocalizationService}]},propDecorators:{widgetClasses:[{type:a.HostBinding,args:["class.k-widget"]},{type:a.HostBinding,args:["class.k-progressbar"]}],isHorizontal:[{type:a.HostBinding,args:["class.k-progressbar-horizontal"]}],isVertical:[{type:a.HostBinding,args:["class.k-progressbar-vertical"]}],disabledClass:[{type:a.HostBinding,args:["class.k-disabled"]}],reverseClass:[{type:a.HostBinding,args:["class.k-progressbar-reverse"]}],indeterminateClass:[{type:a.HostBinding,args:["class.k-progressbar-indeterminate"]}],dirAttribute:[{type:a.HostBinding,args:["attr.dir"]}],roleAttribute:[{type:a.HostBinding,args:["attr.role"]}],ariaMinAttribute:[{type:a.HostBinding,args:["attr.aria-valuemin"]}],ariaMaxAttribute:[{type:a.HostBinding,args:["attr.aria-valuemax"]}],ariaValueAttribute:[{type:a.HostBinding,args:["attr.aria-valuenow"]}],max:[{type:a.Input}],min:[{type:a.Input}],value:[{type:a.Input}],orientation:[{type:a.Input}],disabled:[{type:a.Input}],reverse:[{type:a.Input}],indeterminate:[{type:a.Input}]}});h(I,P=k),Object.defineProperty(I.prototype,"showLabel",{get:function(){return"boolean"==typeof this.label?this.label:(this.label&&!this.label.hasOwnProperty("visible")&&(this.label.visible=!0),this.label.visible)},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"labelPosition",{get:function(){return"boolean"==typeof this.label?"end":(this.label&&!this.label.hasOwnProperty("position")&&(this.label.position="end"),this.label.position)},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"isPositionStart",{get:function(){return"start"===this.labelPosition},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"isPositionCenter",{get:function(){return"center"===this.labelPosition},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"isPositionEnd",{get:function(){return"end"===this.labelPosition},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"formattedLabelValue",{get:function(){return m(this.displayValue,this.min,this.max,this.label)},enumerable:!1,configurable:!0}),I.prototype.ngOnChanges=function(e){var t,r,s,n;P.prototype.ngOnChanges.call(this,e),this.isAnimationInProgress&&(r=e,t=Boolean(r.animation),r=t&&r.animation.currentValue,t&&!r)&&(this.cancelCurrentAnimation=!0),t=e,r=this.animation,s=this.previousValue,n=this.displayValue,r&&"undefined"!=typeof requestAnimationFrame&&t.value&&s!==n&&!e.value.firstChange&&this.startAnimation(this.previousValue)},I.prototype.ngOnDestroy=function(){this.animationFrame&&cancelAnimationFrame(this.animationFrame)},I.prototype.startAnimation=function(s){var n=this,i=(this.isAnimationInProgress=!0,this.progressStatusElement.nativeElement),a=this.progressStatusWrapperElement.nativeElement,o=this.getAnimationOptions(s);this.zone.runOutsideAngular(function(){n.animationFrame&&cancelAnimationFrame(n.animationFrame);function r(){var e=(new Date).getTime()-o.startTime,e=Math.min(e/o.duration,1),t=o.startSize+o.deltaSize*e;n.renderValueChange(i,a,o.property,t,100/t*100),e<1?n.cancelCurrentAnimation?n.resetProgress(i,a,o.property):n.animationFrame=requestAnimationFrame(r):n.stopAnimation(s)}r()})},Object.defineProperty(I.prototype,"animationDuration",{get:function(){return"boolean"==typeof this.animation?400:(this.animation&&!this.animation.hasOwnProperty("duration")&&(this.animation.duration=400),this.animation.duration)},enumerable:!1,configurable:!0}),I.prototype.stopAnimation=function(e){var t=this;n.hasObservers(this.animationEnd)&&this.zone.run(function(){t.animationEnd.emit({from:e,to:t.displayValue})}),this.zone.run(function(){t.isAnimationInProgress=!1})},I.prototype.getAnimationOptions=function(e){var t="horizontal"===this.orientation,e=y(this.min,this.max,e),r=t?100*e:100,e=t?100:100*e,s=t?"width":"height",n=(new Date).getTime(),i=t?this.statusWidth-r:this.statusHeight-e;return{property:s,startTime:n,startSize:t?r:e,deltaSize:i,duration:this.animationDuration*Math.abs(i/100)}},I.prototype.renderValueChange=function(e,t,r,s,n){this.renderer.setStyle(e,r,s+"%"),this.renderer.setStyle(t,r,n+"%")},I.prototype.resetProgress=function(e,t,r){var s=this,n=y(this.min,this.max,this.value);this.renderValueChange(e,t,r,100*n,100/n),this.zone.run(function(){s.cancelCurrentAnimation=!1,s.isAnimationInProgress=!1})};var P,V=I;function I(e,t,r){var s=P.call(this,e)||this;return s.localization=e,s.zone=t,s.renderer=r,s.label=!0,s.animation=!1,s.animationEnd=new a.EventEmitter,s}V.ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:l,type:V,deps:[{token:p.LocalizationService},{token:l.NgZone},{token:l.Renderer2}],target:l.ɵɵFactoryTarget.Component}),V.ɵcmp=l.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:V,selector:"kendo-progressbar",inputs:{label:"label",progressCssStyle:"progressCssStyle",progressCssClass:"progressCssClass",emptyCssStyle:"emptyCssStyle",emptyCssClass:"emptyCssClass",animation:"animation"},outputs:{animationEnd:"animationEnd"},providers:[t.LocalizationService,{provide:t.L10N_PREFIX,useValue:"kendo.progressbar"}],viewQueries:[{propertyName:"progressStatusElement",first:!0,predicate:["progressStatus"],descendants:!0},{propertyName:"progressStatusWrapperElement",first:!0,predicate:["progressStatusWrap"],descendants:!0}],exportAs:["kendoProgressBar"],usesInheritance:!0,usesOnChanges:!0,ngImport:l,template:'\n        <span class="k-progress-status-wrap"\n            [class.k-progress-start]="isPositionStart"\n            [class.k-progress-center]="isPositionCenter"\n            [class.k-progress-end]="isPositionEnd"\n            [ngStyle]="emptyCssStyle"\n            [ngClass]="emptyCssClass">\n            <span *ngIf="showLabel" class="k-progress-status">{{formattedLabelValue}}</span>\n        </span>\n        <div\n            #progressStatus\n            class="k-selected"\n            [class.k-complete]="isCompleted"\n            [ngStyle]="progressCssStyle"\n            [ngClass]="progressCssClass"\n            [style.width.%]="statusWidth"\n            [style.height.%]="statusHeight"\n            >\n            <span\n                #progressStatusWrap\n                class="k-progress-status-wrap"\n                [style.width.%]="statusWrapperWidth"\n                [style.height.%]="statusWrapperHeight"\n                [class.k-progress-start]="isPositionStart"\n                [class.k-progress-center]="isPositionCenter"\n                [class.k-progress-end]="isPositionEnd"\n                >\n                <span *ngIf="showLabel" class="k-progress-status">{{formattedLabelValue}}</span>\n            </span>\n        </div>\n       ',isInline:!0,directives:[{type:c.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{type:c.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]},{type:c.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]}]}),l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:l,type:V,decorators:[{type:a.Component,args:[{exportAs:"kendoProgressBar",selector:"kendo-progressbar",template:'\n        <span class="k-progress-status-wrap"\n            [class.k-progress-start]="isPositionStart"\n            [class.k-progress-center]="isPositionCenter"\n            [class.k-progress-end]="isPositionEnd"\n            [ngStyle]="emptyCssStyle"\n            [ngClass]="emptyCssClass">\n            <span *ngIf="showLabel" class="k-progress-status">{{formattedLabelValue}}</span>\n        </span>\n        <div\n            #progressStatus\n            class="k-selected"\n            [class.k-complete]="isCompleted"\n            [ngStyle]="progressCssStyle"\n            [ngClass]="progressCssClass"\n            [style.width.%]="statusWidth"\n            [style.height.%]="statusHeight"\n            >\n            <span\n                #progressStatusWrap\n                class="k-progress-status-wrap"\n                [style.width.%]="statusWrapperWidth"\n                [style.height.%]="statusWrapperHeight"\n                [class.k-progress-start]="isPositionStart"\n                [class.k-progress-center]="isPositionCenter"\n                [class.k-progress-end]="isPositionEnd"\n                >\n                <span *ngIf="showLabel" class="k-progress-status">{{formattedLabelValue}}</span>\n            </span>\n        </div>\n       ',providers:[t.LocalizationService,{provide:t.L10N_PREFIX,useValue:"kendo.progressbar"}]}]}],ctorParameters:function(){return[{type:p.LocalizationService},{type:l.NgZone},{type:l.Renderer2}]},propDecorators:{label:[{type:a.Input}],progressCssStyle:[{type:a.Input}],progressCssClass:[{type:a.Input}],emptyCssStyle:[{type:a.Input}],emptyCssClass:[{type:a.Input}],animation:[{type:a.Input}],animationEnd:[{type:a.Output}],progressStatusElement:[{type:a.ViewChild,args:["progressStatus",{static:!1}]}],progressStatusWrapperElement:[{type:a.ViewChild,args:["progressStatusWrap",{static:!1}]}]}});h(w,O=k),Object.defineProperty(w.prototype,"chunks",{get:function(){for(var e,t=this.chunkCount,r=Array(t).fill(!1),s=Math.floor(this._progressRatio*t),n=0;n<s;n++)r[n]=!0;return t=this.orientation,e=this.reverse,("vertical"===t&&!e||"horizontal"===t&&e)&&r.reverse(),r},enumerable:!1,configurable:!0}),Object.defineProperty(w.prototype,"chunkSizePercentage",{get:function(){return 100/this.chunkCount},enumerable:!1,configurable:!0}),Object.defineProperty(w.prototype,"orientationStyles",{get:function(){return"horizontal"===this.orientation?(this._orientationStyles.width=this.chunkSizePercentage+"%",this._orientationStyles.height=void 0):(this._orientationStyles.height=this.chunkSizePercentage+"%",this._orientationStyles.width=void 0),this._orientationStyles},enumerable:!1,configurable:!0});var O,k=w;function w(e){var t=O.call(this,e)||this;return t.localization=e,t.chunkCount=5,t._orientationStyles={width:t.chunkSizePercentage+"%"},t}k.ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:l,type:k,deps:[{token:p.LocalizationService}],target:l.ɵɵFactoryTarget.Component}),k.ɵcmp=l.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:k,selector:"kendo-chunkprogressbar",inputs:{chunkCount:"chunkCount",progressCssStyle:"progressCssStyle",progressCssClass:"progressCssClass",emptyCssStyle:"emptyCssStyle",emptyCssClass:"emptyCssClass"},providers:[t.LocalizationService,{provide:t.L10N_PREFIX,useValue:"kendo.chunkprogressbar"}],exportAs:["kendoChunkProgressBar"],usesInheritance:!0,ngImport:l,template:'\n        <ul class="k-reset">\n            <li class="k-item" *ngFor="let chunk of chunks; let i = index;"\n                [class.k-first]="i === 0"\n                [class.k-last]="i === chunkCount - 1"\n                [class.k-selected]="chunk"\n                [ngClass]="chunk ? progressCssClass : emptyCssClass"\n                [ngStyle]="chunk ? progressCssStyle : emptyCssStyle"\n                [style.width]="orientationStyles.width"\n                [style.height]="orientationStyles.height"\n                >\n            </li>\n        </ul>\n    ',isInline:!0,directives:[{type:c.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{type:c.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]},{type:c.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]}]}),l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:l,type:k,decorators:[{type:a.Component,args:[{exportAs:"kendoChunkProgressBar",selector:"kendo-chunkprogressbar",template:'\n        <ul class="k-reset">\n            <li class="k-item" *ngFor="let chunk of chunks; let i = index;"\n                [class.k-first]="i === 0"\n                [class.k-last]="i === chunkCount - 1"\n                [class.k-selected]="chunk"\n                [ngClass]="chunk ? progressCssClass : emptyCssClass"\n                [ngStyle]="chunk ? progressCssStyle : emptyCssStyle"\n                [style.width]="orientationStyles.width"\n                [style.height]="orientationStyles.height"\n                >\n            </li>\n        </ul>\n    ',providers:[t.LocalizationService,{provide:t.L10N_PREFIX,useValue:"kendo.chunkprogressbar"}]}]}],ctorParameters:function(){return[{type:p.LocalizationService}]},propDecorators:{chunkCount:[{type:a.Input}],progressCssStyle:[{type:a.Input}],progressCssClass:[{type:a.Input}],emptyCssStyle:[{type:a.Input}],emptyCssClass:[{type:a.Input}]}});var E=function(e){this.templateRef=e},x=(E.ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:l,type:E,deps:[{token:l.TemplateRef}],target:l.ɵɵFactoryTarget.Directive}),E.ɵdir=l.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:E,selector:"[kendoCircularProgressbarCenterTemplate]",ngImport:l}),l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:l,type:E,decorators:[{type:a.Directive,args:[{selector:"[kendoCircularProgressbarCenterTemplate]"}]}],ctorParameters:function(){return[{type:l.TemplateRef}]}}),Object.defineProperty(z.prototype,"value",{get:function(){return this._value},set:function(e){e>this.max&&this.handleErrors("value > max"),e<this.min&&this.handleErrors("value < min"),this.previousValue=this.value,this._value=e},enumerable:!1,configurable:!0}),Object.defineProperty(z.prototype,"max",{get:function(){return this._max},set:function(e){e<this.min&&this.handleErrors("max < min"),this._max=e},enumerable:!1,configurable:!0}),Object.defineProperty(z.prototype,"min",{get:function(){return this._min},set:function(e){e>this.max&&this.handleErrors("max < min"),this._min=e},enumerable:!1,configurable:!0}),Object.defineProperty(z.prototype,"indeterminate",{get:function(){return this._indeterminate},set:function(e){this._indeterminate=e},enumerable:!1,configurable:!0}),z.prototype.ngAfterViewInit=function(){this.initProgressArc()},z.prototype.ngOnChanges=function(e){var t;n.isChanged("value",e,!0)&&this.progress&&(this.animation?this.progressbarAnimation():(t=this.value-this.min,this.internalValue=e.value.currentValue,this.calculateProgress(t))),e.opacity&&this.progress&&b([{method:"setAttribute",el:this.progress.nativeElement,attr:"opacity",attrValue:this.opacity}],this.renderer),e.indeterminate&&!e.indeterminate.firstChange&&this.indeterminateState()},z.prototype.ngOnDestroy=function(){this.subscriptions.unsubscribe()},z.prototype.onResize=function(e){this.setStyles();var t=this.animation?this.internalValue:this.value;this.calculateProgress(t),this.updateCenterTemplate(t)},z.prototype.initProgressArc=function(){var e;this.setStyles(),this.indeterminate?this.indeterminateState():this.animation?this.progressbarAnimation():(e=this.value-this.min,this.calculateProgress(e))},z.prototype.calculateProgress=function(e){var t=this,r=(this.progressColor&&this.updateProgressColor(e),this.zone.onStable.pipe(o.take(1)).subscribe(function(){t.updateCenterTemplate(e+t.min)}),this.progress.nativeElement),s=this.progress.nativeElement.r.baseVal.value,s=Math.PI*(2*s),n=s-(this.rtl?-1*s:s)*(e/(this.max-this.min));b([{method:"setStyle",el:r,attr:"strokeDasharray",attrValue:s},{method:"setStyle",el:r,attr:"strokeDashoffset",attrValue:n}],this.renderer)},z.prototype.progressbarAnimation=function(){var e=this.internalValue>this.value-this.min,t=this.value>=this.previousValue,r=this.internalValue<this.value-this.min,s=this.value<=this.previousValue;e&&t||r&&s||(this.calculateProgress(this.internalValue),e=this.internalValue,n.hasObservers(this.animationEnd)&&this.animationEnd.emit({from:e,to:this.internalValue}),t?this.internalValue+=1:--this.internalValue,requestAnimationFrame(this.progressbarAnimation.bind(this)))},z.prototype.setStyles=function(){var e=this.progress.nativeElement,t=this.scale.nativeElement,r=this.element.nativeElement.getBoundingClientRect().width,e=[{method:"setAttribute",el:e,attr:"r",attrValue:r/2-10},{method:"setAttribute",el:e,attr:"cx",attrValue:r/2},{method:"setAttribute",el:e,attr:"cy",attrValue:r/2},{method:"setAttribute",el:e,attr:"opacity",attrValue:this.opacity},{method:"setAttribute",el:t,attr:"r",attrValue:r/2-10},{method:"setAttribute",el:t,attr:"cx",attrValue:r/2},{method:"setAttribute",el:t,attr:"cy",attrValue:r/2}];b(e,this.renderer)},z.prototype.indeterminateState=function(){var e,t,r,s=this.progress.nativeElement;this.indeterminate?(this.calculateProgress(this.value-this.min),e=this.rtl?{from:360,to:0}:{from:0,to:360},t=void 0,t=[{method:"setStyle",el:s,attr:"transform-origin",attrValue:"center"},{method:"setStyle",el:s,attr:"fill",attrValue:"none"},{method:"setStyle",el:s,attr:"stroke-linecap",attrValue:"round"},{method:"setStyle",el:s,attr:"stroke",attrValue:(t=this.progressColor?t:getComputedStyle(s).stroke)||this.currentColor}],b(t,this.renderer),this.renderer.removeClass(s,"k-circular-progressbar-arc"),s.innerHTML='<animateTransform attributeName="transform" type="rotate" from="'+e.from+' 0 0" to="'+e.to+' 0 0" dur="1s" repeatCount="indefinite" />'):(this.renderer.addClass(s,"k-circular-progressbar-arc"),r=this.renderer,[{method:"removeStyle",el:s,attr:"transform-origin"},{method:"removeStyle",el:s,attr:"fill"},{method:"removeStyle",el:s,attr:"stroke-linecap"}].forEach(function(e){r[e.method](e.el,e.attr)}),s.innerHTML="",this.animation&&this.progressbarAnimation())},z.prototype.updateCenterTemplate=function(e){this.centerTemplate&&(this.centerTemplateContext.value=e,this.centerTemplateContext.color=this.currentColor,this.cdr.detectChanges(),this.positionLabel())},z.prototype.positionLabel=function(){var e=this.labelElement.nativeElement,t=this.element.nativeElement.getBoundingClientRect(),r=t.width,t=t.height,r=r/2-e.offsetWidth/2,t=t/2-e.offsetHeight/2;b([{method:"setStyle",el:e,attr:"left",attrValue:r+"px"},{method:"setStyle",el:e,attr:"top",attrValue:t+"px"}],this.renderer)},Object.defineProperty(z.prototype,"currentColor",{get:function(){return this.progress.nativeElement.style.stroke},enumerable:!1,configurable:!0}),z.prototype.updateProgressColor=function(e){var t=this.progress.nativeElement;if("string"==typeof this.progressColor)this.renderer.setStyle(t,"stroke",this.progressColor);else for(var r=0;r<this.progressColor.length;r++){var s=this.progressColor[r].from,n=this.progressColor[r].to;if(s<=e&&e<=n||!s&&e<=n){this.renderer.setStyle(t,"stroke",this.progressColor[r].color);break}!n&&s<=e&&this.renderer.setStyle(t,"stroke",this.progressColor[r].color)}},z.prototype.handleErrors=function(e){if(a.isDevMode())switch(e){case"value > max":throw new Error("The value of the CircularProgressbar cannot exceed the max value");case"value < min":throw new Error("The value of the CircularProgressbar cannot be lower than the min value");case"max < min":throw new Error("The min value cannot be higher than the max value")}},z.prototype.setDirection=function(){this.rtl=this.localizationService.rtl,this.element&&this.renderer.setAttribute(this.element.nativeElement,"dir",this.rtl?"rtl":"ltr"),this.labelElement&&this.renderer.setAttribute(this.labelElement.nativeElement,"dir",this.rtl?"rtl":"ltr")},z.prototype.rtlChange=function(){this.element&&this.rtl!==this.localizationService.rtl&&this.setDirection()},z);function z(e,t,r,s,n){this.renderer=e,this.cdr=t,this.localizationService=r,this.element=s,this.zone=n,this.hostClasses=!0,this.WrapperSize="200px",this.animation=!1,this.opacity=1,this.animationEnd=new a.EventEmitter,this.centerTemplateContext={},this._indeterminate=!1,this._max=100,this._min=0,this._value=0,this.internalValue=0,this.subscriptions=new o.Subscription,i.validatePackage(v),this.subscriptions.add(this.localizationService.changes.subscribe(this.rtlChange.bind(this)))}x.ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:l,type:x,deps:[{token:l.Renderer2},{token:l.ChangeDetectorRef},{token:p.LocalizationService},{token:l.ElementRef},{token:l.NgZone}],target:l.ɵɵFactoryTarget.Component}),x.ɵcmp=l.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:x,selector:"kendo-circularprogressbar",inputs:{value:"value",max:"max",min:"min",animation:"animation",opacity:"opacity",indeterminate:"indeterminate",progressColor:"progressColor"},outputs:{animationEnd:"animationEnd"},host:{properties:{"class.k-circular-progressbar":"this.hostClasses","style.width":"this.WrapperSize","style.height":"this.WrapperSize"}},providers:[t.LocalizationService,{provide:t.L10N_PREFIX,useValue:"kendo.circularprogressbar"}],queries:[{propertyName:"centerTemplate",first:!0,predicate:E,descendants:!0}],viewQueries:[{propertyName:"progress",first:!0,predicate:["progress"],descendants:!0},{propertyName:"scale",first:!0,predicate:["scale"],descendants:!0},{propertyName:"labelElement",first:!0,predicate:["label"],descendants:!0},{propertyName:"svgWrapper",first:!0,predicate:["svgWrapper"],descendants:!0}],exportAs:["kendoCircularProgressBar"],usesOnChanges:!0,ngImport:l,template:'\n        <div class="k-circular-progressbar-surface">\n            <div #svgWrapper>\n                <svg #svg>\n                    <g>\n                        <circle class="k-circular-progressbar-scale" #scale stroke-width="9.5"></circle>\n                        <circle class="k-circular-progressbar-arc" #progress stroke-width="9.5"></circle>\n                    </g>\n                </svg>\n                <div class="k-circular-progressbar-label" *ngIf="centerTemplate" #label>\n                    <ng-template [ngTemplateOutlet]="centerTemplate.templateRef" [ngTemplateOutletContext]="centerTemplateContext"></ng-template>\n                </div>\n            </div>\n        </div>\n        <kendo-resize-sensor (resize)="onResize($event)"></kendo-resize-sensor>\n    ',isInline:!0,components:[{type:u.ResizeSensorComponent,selector:"kendo-resize-sensor",inputs:["rateLimit"],outputs:["resize"]}],directives:[{type:c.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{type:c.NgTemplateOutlet,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet"]}]}),l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:l,type:x,decorators:[{type:a.Component,args:[{exportAs:"kendoCircularProgressBar",selector:"kendo-circularprogressbar",template:'\n        <div class="k-circular-progressbar-surface">\n            <div #svgWrapper>\n                <svg #svg>\n                    <g>\n                        <circle class="k-circular-progressbar-scale" #scale stroke-width="9.5"></circle>\n                        <circle class="k-circular-progressbar-arc" #progress stroke-width="9.5"></circle>\n                    </g>\n                </svg>\n                <div class="k-circular-progressbar-label" *ngIf="centerTemplate" #label>\n                    <ng-template [ngTemplateOutlet]="centerTemplate.templateRef" [ngTemplateOutletContext]="centerTemplateContext"></ng-template>\n                </div>\n            </div>\n        </div>\n        <kendo-resize-sensor (resize)="onResize($event)"></kendo-resize-sensor>\n    ',providers:[t.LocalizationService,{provide:t.L10N_PREFIX,useValue:"kendo.circularprogressbar"}]}]}],ctorParameters:function(){return[{type:l.Renderer2},{type:l.ChangeDetectorRef},{type:p.LocalizationService},{type:l.ElementRef},{type:l.NgZone}]},propDecorators:{hostClasses:[{type:a.HostBinding,args:["class.k-circular-progressbar"]}],WrapperSize:[{type:a.HostBinding,args:["style.width"]},{type:a.HostBinding,args:["style.height"]}],value:[{type:a.Input}],max:[{type:a.Input}],min:[{type:a.Input}],animation:[{type:a.Input}],opacity:[{type:a.Input}],indeterminate:[{type:a.Input}],progressColor:[{type:a.Input}],animationEnd:[{type:a.Output}],progress:[{type:a.ViewChild,args:["progress"]}],scale:[{type:a.ViewChild,args:["scale"]}],labelElement:[{type:a.ViewChild,args:["label"]}],svgWrapper:[{type:a.ViewChild,args:["svgWrapper"]}],centerTemplate:[{type:a.ContentChild,args:[E]}]}});u=[V,k,x,E],c=[r.CommonModule,n.ResizeSensorModule],t=function(){};t.ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:l,type:t,deps:[],target:l.ɵɵFactoryTarget.NgModule}),t.ɵmod=l.ɵɵngDeclareNgModule({minVersion:"12.0.0",version:"12.2.16",ngImport:l,type:t,declarations:[V,k,x,E],imports:[r.CommonModule,n.ResizeSensorModule],exports:[V,k,x,E]}),t.ɵinj=l.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"12.2.16",ngImport:l,type:t,imports:[c]}),l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:l,type:t,decorators:[{type:a.NgModule,args:[{declarations:u,exports:u,imports:c}]}]}),e.ChunkProgressBarComponent=k,e.CircularProgressBarComponent=x,e.CircularProgressbarCenterTemplateDirective=E,e.ProgressBarComponent=V,e.ProgressBarModule=t,Object.defineProperty(e,"__esModule",{value:!0})});

package/circularprogressbar/circular-progressbar.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnDestroy, Renderer2, SimpleChanges } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, Renderer2, SimpleChanges } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { AnimationEndEvent } from '../types/animation-end-event';
 import { CircularProgressbarCenterTemplateDirective } from './center-template.directive';
@@ -25,11 +25,12 @@ import * as i0 from "@angular/core";
  * }
  * ```
  */
-export declare class CircularProgressBar implements AfterViewInit, OnChanges, OnDestroy {
+export declare class CircularProgressBarComponent implements AfterViewInit, OnChanges, OnDestroy {
     private renderer;
     private cdr;
     private localizationService;
     private element;
+    private zone;
     hostClasses: boolean;
     WrapperSize: string;
     /**
@@ -56,7 +57,7 @@ export declare class CircularProgressBar implements AfterViewInit, OnChanges, On
     /**
      * Indicates whether an animation will be played on value changes.
      *
-     * @default true
+     * @default false
      */
     animation: boolean;
     /**
@@ -92,10 +93,14 @@ export declare class CircularProgressBar implements AfterViewInit, OnChanges, On
     private internalValue;
     private rtl;
     private subscriptions;
-    constructor(renderer: Renderer2, cdr: ChangeDetectorRef, localizationService: LocalizationService, element: ElementRef);
+    constructor(renderer: Renderer2, cdr: ChangeDetectorRef, localizationService: LocalizationService, element: ElementRef, zone: NgZone);
     ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
+    /**
+     * @hidden
+     */
+    onResize(_event?: any): void;
     private initProgressArc;
     private calculateProgress;
     private progressbarAnimation;
@@ -108,6 +113,6 @@ export declare class CircularProgressBar implements AfterViewInit, OnChanges, On
     private handleErrors;
     private setDirection;
     private rtlChange;
-    static ɵfac: i0.ɵɵFactoryDeclaration<CircularProgressBar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CircularProgressBar, "kendo-circularprogressbar", ["kendoCircularProgressBar"], { "value": "value"; "max": "max"; "min": "min"; "animation": "animation"; "opacity": "opacity"; "indeterminate": "indeterminate"; "progressColor": "progressColor"; }, { "animationEnd": "animationEnd"; }, ["centerTemplate"], never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CircularProgressBarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CircularProgressBarComponent, "kendo-circularprogressbar", ["kendoCircularProgressBar"], { "value": "value"; "max": "max"; "min": "min"; "animation": "animation"; "opacity": "opacity"; "indeterminate": "indeterminate"; "progressColor": "progressColor"; }, { "animationEnd": "animationEnd"; }, ["centerTemplate"], never>;
 }

package/esm2015/chunk/chunk-progressbar.component.js

@@ -90,7 +90,7 @@ ChunkProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             <li class="k-item" *ngFor="let chunk of chunks; let i = index;"
                 [class.k-first]="i === 0"
                 [class.k-last]="i === chunkCount - 1"
-                [class.k-state-selected]="chunk"
+                [class.k-selected]="chunk"
                 [ngClass]="chunk ? progressCssClass : emptyCssClass"
                 [ngStyle]="chunk ? progressCssStyle : emptyCssStyle"
                 [style.width]="orientationStyles.width"
@@ -109,7 +109,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             <li class="k-item" *ngFor="let chunk of chunks; let i = index;"
                 [class.k-first]="i === 0"
                 [class.k-last]="i === chunkCount - 1"
-                [class.k-state-selected]="chunk"
+                [class.k-selected]="chunk"
                 [ngClass]="chunk ? progressCssClass : emptyCssClass"
                 [ngStyle]="chunk ? progressCssStyle : emptyCssStyle"
                 [style.width]="orientationStyles.width"

package/esm2015/circularprogressbar/circular-progressbar.component.js

@@ -3,16 +3,17 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component, ContentChild, EventEmitter, HostBinding, Input, isDevMode, Output, ViewChild } from '@angular/core';
-import { hasObservers } from '@progress/kendo-angular-common';
+import { hasObservers, isChanged } from '@progress/kendo-angular-common';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
-import { Subscription } from 'rxjs';
+import { Subscription, take } from 'rxjs';
 import { removeProgressBarStyles, setProgressBarStyles } from '../common/util';
 import { packageMetadata } from '../package-metadata';
 import { CircularProgressbarCenterTemplateDirective } from './center-template.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
-import * as i2 from "@angular/common";
+import * as i2 from "@progress/kendo-angular-common";
+import * as i3 from "@angular/common";
 /**
  * Represents the [Kendo UI Circular ProgressBar component for Angular]({% slug circular_progressbar %}).
  *
@@ -29,20 +30,21 @@ import * as i2 from "@angular/common";
  * }
  * ```
  */
-export class CircularProgressBar {
-    constructor(renderer, cdr, localizationService, element) {
+export class CircularProgressBarComponent {
+    constructor(renderer, cdr, localizationService, element, zone) {
         this.renderer = renderer;
         this.cdr = cdr;
         this.localizationService = localizationService;
         this.element = element;
+        this.zone = zone;
         this.hostClasses = true;
         this.WrapperSize = '200px';
         /**
          * Indicates whether an animation will be played on value changes.
          *
-         * @default true
+         * @default false
          */
-        this.animation = true;
+        this.animation = false;
         /**
          * The opacity of the value arc.
          * @default 1
@@ -122,10 +124,8 @@ export class CircularProgressBar {
         this.initProgressArc();
     }
     ngOnChanges(changes) {
-        const isValueChanged = changes.value;
-        const isProgressArcCreated = this.progress;
-        const isValueSecondChange = !changes.value.firstChange;
-        if (isValueChanged && isProgressArcCreated && isValueSecondChange) {
+        const skipFirstChange = true;
+        if (isChanged('value', changes, skipFirstChange) && this.progress) {
             if (this.animation) {
                 this.progressbarAnimation();
             }
@@ -145,6 +145,15 @@ export class CircularProgressBar {
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
+    /**
+     * @hidden
+     */
+    onResize(_event) {
+        this.setStyles();
+        const value = this.animation ? this.internalValue : this.value;
+        this.calculateProgress(value);
+        this.updateCenterTemplate(value);
+    }
     initProgressArc() {
         this.setStyles();
         if (this.indeterminate) {
@@ -164,7 +173,10 @@ export class CircularProgressBar {
         if (this.progressColor) {
             this.updateProgressColor(value);
         }
-        this.updateCenterTemplate(value + this.min);
+        // needed when we have *ngIf inside the template to render different content depending on some condition
+        this.zone.onStable.pipe(take(1)).subscribe(() => {
+            this.updateCenterTemplate(value + this.min);
+        });
         const progressArc = this.progress.nativeElement;
         const radius = this.progress.nativeElement.r.baseVal.value;
         const circumference = Math.PI * (radius * 2);
@@ -179,11 +191,11 @@ export class CircularProgressBar {
     progressbarAnimation() {
         const forwardProgress = {
             isOngoing: this.internalValue > this.value - this.min,
-            isPositive: this.value > this.previousValue
+            isPositive: this.value >= this.previousValue
         };
         const backwardProgress = {
             isOngoing: this.internalValue < this.value - this.min,
-            isNegative: this.value < this.previousValue
+            isNegative: this.value <= this.previousValue
         };
         if (forwardProgress.isOngoing && forwardProgress.isPositive ||
             backwardProgress.isOngoing && backwardProgress.isNegative) {
@@ -226,13 +238,18 @@ export class CircularProgressBar {
             // containing only the necassery CSS styles and we will switch between them when the state of the progressbar is switched.
             this.calculateProgress(this.value - this.min);
             const rotate = this.rtl ? { from: 360, to: 0 } : { from: 0, to: 360 };
-            this.renderer.removeClass(progressArc, 'k-circular-progressbar-arc');
+            let color;
+            if (!this.progressColor) {
+                color = getComputedStyle(progressArc).stroke;
+            }
             const indeterminateStyles = [
                 { method: 'setStyle', el: progressArc, attr: 'transform-origin', attrValue: 'center' },
                 { method: 'setStyle', el: progressArc, attr: 'fill', attrValue: 'none' },
-                { method: 'setStyle', el: progressArc, attr: 'stroke-linecap', attrValue: 'round' }
+                { method: 'setStyle', el: progressArc, attr: 'stroke-linecap', attrValue: 'round' },
+                { method: 'setStyle', el: progressArc, attr: 'stroke', attrValue: color ? color : this.currentColor }
             ];
             setProgressBarStyles(indeterminateStyles, this.renderer);
+            this.renderer.removeClass(progressArc, 'k-circular-progressbar-arc');
             progressArc.innerHTML = `<animateTransform attributeName="transform" type="rotate" from="${rotate.from} 0 0" to="${rotate.to} 0 0" dur="1s" repeatCount="indefinite" />`;
         }
         else {
@@ -260,11 +277,11 @@ export class CircularProgressBar {
     }
     positionLabel() {
         const labelEl = this.labelElement.nativeElement;
-        const svgWrapper = this.svgWrapper.nativeElement.getBoundingClientRect();
-        const svgWrapperWidth = svgWrapper.width;
-        const svgWrapperHeight = svgWrapper.height;
-        const left = (svgWrapperWidth / 2) - (labelEl.offsetWidth / 2);
-        const top = (svgWrapperHeight / 2) - (labelEl.offsetHeight / 2);
+        const elementRect = this.element.nativeElement.getBoundingClientRect();
+        const elWidth = elementRect.width;
+        const elHeight = elementRect.height;
+        const left = (elWidth / 2) - (labelEl.offsetWidth / 2);
+        const top = (elHeight / 2) - (labelEl.offsetHeight / 2);
         const labelCalculations = [
             { method: 'setStyle', el: labelEl, attr: 'left', attrValue: `${left}px` },
             { method: 'setStyle', el: labelEl, attr: 'top', attrValue: `${top}px` }
@@ -284,7 +301,7 @@ export class CircularProgressBar {
             for (let i = 0; i < this.progressColor.length; i++) {
                 let from = this.progressColor[i].from;
                 let to = this.progressColor[i].to;
-                if (value >= from && value < to || (!from && value < to)) {
+                if (value >= from && value <= to || (!from && value <= to)) {
                     this.renderer.setStyle(progressArc, 'stroke', this.progressColor[i].color);
                     break;
                 }
@@ -298,9 +315,9 @@ export class CircularProgressBar {
         if (isDevMode()) {
             switch (type) {
                 case 'value > max':
-                    throw new Error('The value of the Circular Progressbar cannot exceed the max value');
+                    throw new Error('The value of the CircularProgressbar cannot exceed the max value');
                 case 'value < min':
-                    throw new Error('The value of the Circular Progressbar cannot be lower than the min value');
+                    throw new Error('The value of the CircularProgressbar cannot be lower than the min value');
                 case 'max < min':
                     throw new Error('The min value cannot be higher than the max value');
                 default:
@@ -322,8 +339,8 @@ export class CircularProgressBar {
         }
     }
 }
-CircularProgressBar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularProgressBar, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-CircularProgressBar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CircularProgressBar, selector: "kendo-circularprogressbar", inputs: { value: "value", max: "max", min: "min", animation: "animation", opacity: "opacity", indeterminate: "indeterminate", progressColor: "progressColor" }, outputs: { animationEnd: "animationEnd" }, host: { properties: { "class.k-circular-progressbar": "this.hostClasses", "style.width": "this.WrapperSize", "style.height": "this.WrapperSize" } }, providers: [
+CircularProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularProgressBarComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+CircularProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CircularProgressBarComponent, selector: "kendo-circularprogressbar", inputs: { value: "value", max: "max", min: "min", animation: "animation", opacity: "opacity", indeterminate: "indeterminate", progressColor: "progressColor" }, outputs: { animationEnd: "animationEnd" }, host: { properties: { "class.k-circular-progressbar": "this.hostClasses", "style.width": "this.WrapperSize", "style.height": "this.WrapperSize" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -343,8 +360,9 @@ CircularProgressBar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </div>
             </div>
         </div>
-    `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularProgressBar, decorators: [{
+        <kendo-resize-sensor (resize)="onResize($event)"></kendo-resize-sensor>
+    `, isInline: true, components: [{ type: i2.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularProgressBarComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoCircularProgressBar',
@@ -363,6 +381,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 </div>
             </div>
         </div>
+        <kendo-resize-sensor (resize)="onResize($event)"></kendo-resize-sensor>
     `, providers: [
                         LocalizationService,
                         {
@@ -371,7 +390,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         }
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.ElementRef }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-circular-progressbar']
             }], WrapperSize: [{

package/esm2015/common/progressbar-base.js

@@ -159,7 +159,7 @@ export class ProgressBarBase {
     }
 }
 ProgressBarBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarBase, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ProgressBarBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ProgressBarBase, selector: "ng-component", inputs: { max: "max", min: "min", value: "value", orientation: "orientation", disabled: "disabled", reverse: "reverse", indeterminate: "indeterminate" }, host: { properties: { "class.k-widget": "this.widgetClasses", "class.k-progressbar": "this.widgetClasses", "class.k-progressbar-horizontal": "this.isHorizontal", "class.k-progressbar-vertical": "this.isVertical", "class.k-state-disabled": "this.disabledClass", "class.k-progressbar-reverse": "this.reverseClass", "class.k-progressbar-indeterminate": "this.indeterminateClass", "attr.dir": "this.dirAttribute", "attr.role": "this.roleAttribute", "attr.aria-valuemin": "this.ariaMinAttribute", "attr.aria-valuemax": "this.ariaMaxAttribute", "attr.aria-valuenow": "this.ariaValueAttribute" } }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
+ProgressBarBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ProgressBarBase, selector: "ng-component", inputs: { max: "max", min: "min", value: "value", orientation: "orientation", disabled: "disabled", reverse: "reverse", indeterminate: "indeterminate" }, host: { properties: { "class.k-widget": "this.widgetClasses", "class.k-progressbar": "this.widgetClasses", "class.k-progressbar-horizontal": "this.isHorizontal", "class.k-progressbar-vertical": "this.isVertical", "class.k-disabled": "this.disabledClass", "class.k-progressbar-reverse": "this.reverseClass", "class.k-progressbar-indeterminate": "this.indeterminateClass", "attr.dir": "this.dirAttribute", "attr.role": "this.roleAttribute", "attr.aria-valuemin": "this.ariaMinAttribute", "attr.aria-valuemax": "this.ariaMaxAttribute", "attr.aria-valuenow": "this.ariaValueAttribute" } }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarBase, decorators: [{
             type: Component,
             args: [{
@@ -179,7 +179,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['class.k-progressbar-vertical']
             }], disabledClass: [{
                 type: HostBinding,
-                args: ['class.k-state-disabled']
+                args: ['class.k-disabled']
             }], reverseClass: [{
                 type: HostBinding,
                 args: ['class.k-progressbar-reverse']

package/esm2015/main.js

@@ -4,6 +4,6 @@
 *-------------------------------------------------------------------------------------------*/
 export { ProgressBarComponent } from './progressbar.component';
 export { ChunkProgressBarComponent } from './chunk/chunk-progressbar.component';
-export { CircularProgressBar } from './circularprogressbar/circular-progressbar.component';
+export { CircularProgressBarComponent } from './circularprogressbar/circular-progressbar.component';
 export { ProgressBarModule } from './progressbar.module';
 export { CircularProgressbarCenterTemplateDirective } from './circularprogressbar/center-template.directive';

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-progressbar',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1658832123,
+    publishDate: 1659345594,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/esm2015/progressbar.component.js

@@ -234,7 +234,7 @@ ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         </span>
         <div
             #progressStatus
-            class="k-state-selected"
+            class="k-selected"
             [class.k-complete]="isCompleted"
             [ngStyle]="progressCssStyle"
             [ngClass]="progressCssClass"
@@ -270,7 +270,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </span>
         <div
             #progressStatus
-            class="k-state-selected"
+            class="k-selected"
             [class.k-complete]="isCompleted"
             [ngStyle]="progressCssStyle"
             [ngClass]="progressCssClass"

package/esm2015/progressbar.module.js

@@ -7,10 +7,10 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ProgressBarComponent } from './progressbar.component';
 import { ResizeSensorModule } from '@progress/kendo-angular-common';
-import { CircularProgressBar } from './circularprogressbar/circular-progressbar.component';
+import { CircularProgressBarComponent } from './circularprogressbar/circular-progressbar.component';
 import { CircularProgressbarCenterTemplateDirective } from './circularprogressbar/center-template.directive';
 import * as i0 from "@angular/core";
-const COMPONENT_DIRECTIVES = [ProgressBarComponent, ChunkProgressBarComponent, CircularProgressBar, CircularProgressbarCenterTemplateDirective];
+const COMPONENT_DIRECTIVES = [ProgressBarComponent, ChunkProgressBarComponent, CircularProgressBarComponent, CircularProgressbarCenterTemplateDirective];
 const MODULES = [CommonModule, ResizeSensorModule];
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmodules'] }})
@@ -46,7 +46,7 @@ const MODULES = [CommonModule, ResizeSensorModule];
 export class ProgressBarModule {
 }
 ProgressBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ProgressBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarModule, declarations: [ProgressBarComponent, ChunkProgressBarComponent, CircularProgressBar, CircularProgressbarCenterTemplateDirective], imports: [CommonModule, ResizeSensorModule], exports: [ProgressBarComponent, ChunkProgressBarComponent, CircularProgressBar, CircularProgressbarCenterTemplateDirective] });
+ProgressBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarModule, declarations: [ProgressBarComponent, ChunkProgressBarComponent, CircularProgressBarComponent, CircularProgressbarCenterTemplateDirective], imports: [CommonModule, ResizeSensorModule], exports: [ProgressBarComponent, ChunkProgressBarComponent, CircularProgressBarComponent, CircularProgressbarCenterTemplateDirective] });
 ProgressBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarModule, imports: [MODULES] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarModule, decorators: [{
             type: NgModule,

package/fesm2015/kendo-angular-progressbar.js

@@ -7,10 +7,11 @@ import { isDevMode, Component, HostBinding, Input, EventEmitter, Output, ViewChi
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { hasObservers, ResizeSensorModule } from '@progress/kendo-angular-common';
+import * as i2$1 from '@progress/kendo-angular-common';
+import { hasObservers, isChanged, ResizeSensorModule } from '@progress/kendo-angular-common';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { Subscription } from 'rxjs';
+import { Subscription, take } from 'rxjs';
 
 /**
  * @hidden
@@ -19,7 +20,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-progressbar',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1658832123,
+    publishDate: 1659345594,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -280,7 +281,7 @@ class ProgressBarBase {
     }
 }
 ProgressBarBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarBase, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ProgressBarBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ProgressBarBase, selector: "ng-component", inputs: { max: "max", min: "min", value: "value", orientation: "orientation", disabled: "disabled", reverse: "reverse", indeterminate: "indeterminate" }, host: { properties: { "class.k-widget": "this.widgetClasses", "class.k-progressbar": "this.widgetClasses", "class.k-progressbar-horizontal": "this.isHorizontal", "class.k-progressbar-vertical": "this.isVertical", "class.k-state-disabled": "this.disabledClass", "class.k-progressbar-reverse": "this.reverseClass", "class.k-progressbar-indeterminate": "this.indeterminateClass", "attr.dir": "this.dirAttribute", "attr.role": "this.roleAttribute", "attr.aria-valuemin": "this.ariaMinAttribute", "attr.aria-valuemax": "this.ariaMaxAttribute", "attr.aria-valuenow": "this.ariaValueAttribute" } }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
+ProgressBarBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ProgressBarBase, selector: "ng-component", inputs: { max: "max", min: "min", value: "value", orientation: "orientation", disabled: "disabled", reverse: "reverse", indeterminate: "indeterminate" }, host: { properties: { "class.k-widget": "this.widgetClasses", "class.k-progressbar": "this.widgetClasses", "class.k-progressbar-horizontal": "this.isHorizontal", "class.k-progressbar-vertical": "this.isVertical", "class.k-disabled": "this.disabledClass", "class.k-progressbar-reverse": "this.reverseClass", "class.k-progressbar-indeterminate": "this.indeterminateClass", "attr.dir": "this.dirAttribute", "attr.role": "this.roleAttribute", "attr.aria-valuemin": "this.ariaMinAttribute", "attr.aria-valuemax": "this.ariaMaxAttribute", "attr.aria-valuenow": "this.ariaValueAttribute" } }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarBase, decorators: [{
             type: Component,
             args: [{
@@ -300,7 +301,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['class.k-progressbar-vertical']
             }], disabledClass: [{
                 type: HostBinding,
-                args: ['class.k-state-disabled']
+                args: ['class.k-disabled']
             }], reverseClass: [{
                 type: HostBinding,
                 args: ['class.k-progressbar-reverse']
@@ -562,7 +563,7 @@ ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         </span>
         <div
             #progressStatus
-            class="k-state-selected"
+            class="k-selected"
             [class.k-complete]="isCompleted"
             [ngStyle]="progressCssStyle"
             [ngClass]="progressCssClass"
@@ -598,7 +599,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </span>
         <div
             #progressStatus
-            class="k-state-selected"
+            class="k-selected"
             [class.k-complete]="isCompleted"
             [ngStyle]="progressCssStyle"
             [ngClass]="progressCssClass"
@@ -729,7 +730,7 @@ ChunkProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             <li class="k-item" *ngFor="let chunk of chunks; let i = index;"
                 [class.k-first]="i === 0"
                 [class.k-last]="i === chunkCount - 1"
-                [class.k-state-selected]="chunk"
+                [class.k-selected]="chunk"
                 [ngClass]="chunk ? progressCssClass : emptyCssClass"
                 [ngStyle]="chunk ? progressCssStyle : emptyCssStyle"
                 [style.width]="orientationStyles.width"
@@ -748,7 +749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             <li class="k-item" *ngFor="let chunk of chunks; let i = index;"
                 [class.k-first]="i === 0"
                 [class.k-last]="i === chunkCount - 1"
-                [class.k-state-selected]="chunk"
+                [class.k-selected]="chunk"
                 [ngClass]="chunk ? progressCssClass : emptyCssClass"
                 [ngStyle]="chunk ? progressCssStyle : emptyCssStyle"
                 [style.width]="orientationStyles.width"
@@ -810,20 +811,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * }
  * ```
  */
-class CircularProgressBar {
-    constructor(renderer, cdr, localizationService, element) {
+class CircularProgressBarComponent {
+    constructor(renderer, cdr, localizationService, element, zone) {
         this.renderer = renderer;
         this.cdr = cdr;
         this.localizationService = localizationService;
         this.element = element;
+        this.zone = zone;
         this.hostClasses = true;
         this.WrapperSize = '200px';
         /**
          * Indicates whether an animation will be played on value changes.
          *
-         * @default true
+         * @default false
          */
-        this.animation = true;
+        this.animation = false;
         /**
          * The opacity of the value arc.
          * @default 1
@@ -903,10 +905,8 @@ class CircularProgressBar {
         this.initProgressArc();
     }
     ngOnChanges(changes) {
-        const isValueChanged = changes.value;
-        const isProgressArcCreated = this.progress;
-        const isValueSecondChange = !changes.value.firstChange;
-        if (isValueChanged && isProgressArcCreated && isValueSecondChange) {
+        const skipFirstChange = true;
+        if (isChanged('value', changes, skipFirstChange) && this.progress) {
             if (this.animation) {
                 this.progressbarAnimation();
             }
@@ -926,6 +926,15 @@ class CircularProgressBar {
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
+    /**
+     * @hidden
+     */
+    onResize(_event) {
+        this.setStyles();
+        const value = this.animation ? this.internalValue : this.value;
+        this.calculateProgress(value);
+        this.updateCenterTemplate(value);
+    }
     initProgressArc() {
         this.setStyles();
         if (this.indeterminate) {
@@ -945,7 +954,10 @@ class CircularProgressBar {
         if (this.progressColor) {
             this.updateProgressColor(value);
         }
-        this.updateCenterTemplate(value + this.min);
+        // needed when we have *ngIf inside the template to render different content depending on some condition
+        this.zone.onStable.pipe(take(1)).subscribe(() => {
+            this.updateCenterTemplate(value + this.min);
+        });
         const progressArc = this.progress.nativeElement;
         const radius = this.progress.nativeElement.r.baseVal.value;
         const circumference = Math.PI * (radius * 2);
@@ -960,11 +972,11 @@ class CircularProgressBar {
     progressbarAnimation() {
         const forwardProgress = {
             isOngoing: this.internalValue > this.value - this.min,
-            isPositive: this.value > this.previousValue
+            isPositive: this.value >= this.previousValue
         };
         const backwardProgress = {
             isOngoing: this.internalValue < this.value - this.min,
-            isNegative: this.value < this.previousValue
+            isNegative: this.value <= this.previousValue
         };
         if (forwardProgress.isOngoing && forwardProgress.isPositive ||
             backwardProgress.isOngoing && backwardProgress.isNegative) {
@@ -1007,13 +1019,18 @@ class CircularProgressBar {
             // containing only the necassery CSS styles and we will switch between them when the state of the progressbar is switched.
             this.calculateProgress(this.value - this.min);
             const rotate = this.rtl ? { from: 360, to: 0 } : { from: 0, to: 360 };
-            this.renderer.removeClass(progressArc, 'k-circular-progressbar-arc');
+            let color;
+            if (!this.progressColor) {
+                color = getComputedStyle(progressArc).stroke;
+            }
             const indeterminateStyles = [
                 { method: 'setStyle', el: progressArc, attr: 'transform-origin', attrValue: 'center' },
                 { method: 'setStyle', el: progressArc, attr: 'fill', attrValue: 'none' },
-                { method: 'setStyle', el: progressArc, attr: 'stroke-linecap', attrValue: 'round' }
+                { method: 'setStyle', el: progressArc, attr: 'stroke-linecap', attrValue: 'round' },
+                { method: 'setStyle', el: progressArc, attr: 'stroke', attrValue: color ? color : this.currentColor }
             ];
             setProgressBarStyles(indeterminateStyles, this.renderer);
+            this.renderer.removeClass(progressArc, 'k-circular-progressbar-arc');
             progressArc.innerHTML = `<animateTransform attributeName="transform" type="rotate" from="${rotate.from} 0 0" to="${rotate.to} 0 0" dur="1s" repeatCount="indefinite" />`;
         }
         else {
@@ -1041,11 +1058,11 @@ class CircularProgressBar {
     }
     positionLabel() {
         const labelEl = this.labelElement.nativeElement;
-        const svgWrapper = this.svgWrapper.nativeElement.getBoundingClientRect();
-        const svgWrapperWidth = svgWrapper.width;
-        const svgWrapperHeight = svgWrapper.height;
-        const left = (svgWrapperWidth / 2) - (labelEl.offsetWidth / 2);
-        const top = (svgWrapperHeight / 2) - (labelEl.offsetHeight / 2);
+        const elementRect = this.element.nativeElement.getBoundingClientRect();
+        const elWidth = elementRect.width;
+        const elHeight = elementRect.height;
+        const left = (elWidth / 2) - (labelEl.offsetWidth / 2);
+        const top = (elHeight / 2) - (labelEl.offsetHeight / 2);
         const labelCalculations = [
             { method: 'setStyle', el: labelEl, attr: 'left', attrValue: `${left}px` },
             { method: 'setStyle', el: labelEl, attr: 'top', attrValue: `${top}px` }
@@ -1065,7 +1082,7 @@ class CircularProgressBar {
             for (let i = 0; i < this.progressColor.length; i++) {
                 let from = this.progressColor[i].from;
                 let to = this.progressColor[i].to;
-                if (value >= from && value < to || (!from && value < to)) {
+                if (value >= from && value <= to || (!from && value <= to)) {
                     this.renderer.setStyle(progressArc, 'stroke', this.progressColor[i].color);
                     break;
                 }
@@ -1079,9 +1096,9 @@ class CircularProgressBar {
         if (isDevMode()) {
             switch (type) {
                 case 'value > max':
-                    throw new Error('The value of the Circular Progressbar cannot exceed the max value');
+                    throw new Error('The value of the CircularProgressbar cannot exceed the max value');
                 case 'value < min':
-                    throw new Error('The value of the Circular Progressbar cannot be lower than the min value');
+                    throw new Error('The value of the CircularProgressbar cannot be lower than the min value');
                 case 'max < min':
                     throw new Error('The min value cannot be higher than the max value');
                 default:
@@ -1103,8 +1120,8 @@ class CircularProgressBar {
         }
     }
 }
-CircularProgressBar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularProgressBar, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-CircularProgressBar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CircularProgressBar, selector: "kendo-circularprogressbar", inputs: { value: "value", max: "max", min: "min", animation: "animation", opacity: "opacity", indeterminate: "indeterminate", progressColor: "progressColor" }, outputs: { animationEnd: "animationEnd" }, host: { properties: { "class.k-circular-progressbar": "this.hostClasses", "style.width": "this.WrapperSize", "style.height": "this.WrapperSize" } }, providers: [
+CircularProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularProgressBarComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+CircularProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CircularProgressBarComponent, selector: "kendo-circularprogressbar", inputs: { value: "value", max: "max", min: "min", animation: "animation", opacity: "opacity", indeterminate: "indeterminate", progressColor: "progressColor" }, outputs: { animationEnd: "animationEnd" }, host: { properties: { "class.k-circular-progressbar": "this.hostClasses", "style.width": "this.WrapperSize", "style.height": "this.WrapperSize" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -1124,8 +1141,9 @@ CircularProgressBar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </div>
             </div>
         </div>
-    `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularProgressBar, decorators: [{
+        <kendo-resize-sensor (resize)="onResize($event)"></kendo-resize-sensor>
+    `, isInline: true, components: [{ type: i2$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularProgressBarComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoCircularProgressBar',
@@ -1144,6 +1162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 </div>
             </div>
         </div>
+        <kendo-resize-sensor (resize)="onResize($event)"></kendo-resize-sensor>
     `, providers: [
                         LocalizationService,
                         {
@@ -1152,7 +1171,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         }
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.ElementRef }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-circular-progressbar']
             }], WrapperSize: [{
@@ -1194,7 +1213,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: [CircularProgressbarCenterTemplateDirective]
             }] } });
 
-const COMPONENT_DIRECTIVES = [ProgressBarComponent, ChunkProgressBarComponent, CircularProgressBar, CircularProgressbarCenterTemplateDirective];
+const COMPONENT_DIRECTIVES = [ProgressBarComponent, ChunkProgressBarComponent, CircularProgressBarComponent, CircularProgressbarCenterTemplateDirective];
 const MODULES = [CommonModule, ResizeSensorModule];
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmodules'] }})
@@ -1230,7 +1249,7 @@ const MODULES = [CommonModule, ResizeSensorModule];
 class ProgressBarModule {
 }
 ProgressBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ProgressBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarModule, declarations: [ProgressBarComponent, ChunkProgressBarComponent, CircularProgressBar, CircularProgressbarCenterTemplateDirective], imports: [CommonModule, ResizeSensorModule], exports: [ProgressBarComponent, ChunkProgressBarComponent, CircularProgressBar, CircularProgressbarCenterTemplateDirective] });
+ProgressBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarModule, declarations: [ProgressBarComponent, ChunkProgressBarComponent, CircularProgressBarComponent, CircularProgressbarCenterTemplateDirective], imports: [CommonModule, ResizeSensorModule], exports: [ProgressBarComponent, ChunkProgressBarComponent, CircularProgressBarComponent, CircularProgressbarCenterTemplateDirective] });
 ProgressBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarModule, imports: [MODULES] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarModule, decorators: [{
             type: NgModule,
@@ -1245,5 +1264,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ChunkProgressBarComponent, CircularProgressBar, CircularProgressbarCenterTemplateDirective, ProgressBarComponent, ProgressBarModule };
+export { ChunkProgressBarComponent, CircularProgressBarComponent, CircularProgressbarCenterTemplateDirective, ProgressBarComponent, ProgressBarModule };
 

package/main.d.ts

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 export { ProgressBarComponent } from './progressbar.component';
 export { ChunkProgressBarComponent } from './chunk/chunk-progressbar.component';
-export { CircularProgressBar } from './circularprogressbar/circular-progressbar.component';
+export { CircularProgressBarComponent } from './circularprogressbar/circular-progressbar.component';
 export { ProgressBarOrientation } from './types/progressbar-orientation';
 export { LabelSettings } from './types/label-settings.interface';
 export { LabelPosition } from './types/label-position';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-progressbar",
-  "version": "3.1.0-dev.202207261042",
+  "version": "3.1.0-dev.202208010920",
   "description": "Kendo UI Angular component starter template",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",

package/progressbar.module.d.ts

@@ -42,6 +42,6 @@ import * as i6 from "@progress/kendo-angular-common";
  */
 export declare class ProgressBarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ProgressBarModule, [typeof i1.ProgressBarComponent, typeof i2.ChunkProgressBarComponent, typeof i3.CircularProgressBar, typeof i4.CircularProgressbarCenterTemplateDirective], [typeof i5.CommonModule, typeof i6.ResizeSensorModule], [typeof i1.ProgressBarComponent, typeof i2.ChunkProgressBarComponent, typeof i3.CircularProgressBar, typeof i4.CircularProgressbarCenterTemplateDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ProgressBarModule, [typeof i1.ProgressBarComponent, typeof i2.ChunkProgressBarComponent, typeof i3.CircularProgressBarComponent, typeof i4.CircularProgressbarCenterTemplateDirective], [typeof i5.CommonModule, typeof i6.ResizeSensorModule], [typeof i1.ProgressBarComponent, typeof i2.ChunkProgressBarComponent, typeof i3.CircularProgressBarComponent, typeof i4.CircularProgressbarCenterTemplateDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ProgressBarModule>;
 }