@progress/kendo-angular-progressbar 3.1.2-dev.202211170812 → 11.0.0-develop.79

package/fesm2015/{kendo-angular-progressbar.js → progress-kendo-angular-progressbar.mjs}

@@ -1,5 +1,5 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
@@ -8,7 +8,7 @@ import { validatePackage } from '@progress/kendo-licensing';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import * as i2 from '@progress/kendo-angular-common';
-import { hasObservers, isChanged, ResizeSensorModule } from '@progress/kendo-angular-common';
+import { hasObservers, isDocumentAvailable, isChanged, ResizeSensorModule } from '@progress/kendo-angular-common';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { Subscription } from 'rxjs';
@@ -21,9 +21,9 @@ const packageMetadata = {
     name: '@progress/kendo-angular-progressbar',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1668672742,
+    publishDate: 1672320708,
     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'
+    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
 /**
@@ -105,13 +105,13 @@ const extractValueFromChanges = (changes, type, value) => changes[type] && chang
 /**
  * @hidden
  */
-const runAnimation = (changes, animation, previousValue, displayValue) => animation && typeof requestAnimationFrame !== 'undefined' && changes.value && previousValue !== displayValue;
+const runAnimation = (changes, animation, previousValue, displayValue) => animation && typeof requestAnimationFrame !== 'undefined' && changes['value'] && previousValue !== displayValue;
 /**
  * @hidden
  */
 const stopCurrentAnimation = (changes) => {
-    const isAnimationChanged = Boolean(changes.animation);
-    const hasAnimation = isAnimationChanged && changes.animation.currentValue;
+    const isAnimationChanged = Boolean(changes['animation']);
+    const hasAnimation = isAnimationChanged && changes['animation'].currentValue;
     return isAnimationChanged && !hasAnimation;
 };
 /**
@@ -134,7 +134,7 @@ const removeProgressBarStyles = (props, renderer) => {
  * @hidden
  */
 const hasElementSize = (element) => {
-    return element.style.width && element.style.height;
+    return !!(element.style.width && element.style.height);
 };
 
 /**
@@ -271,11 +271,11 @@ class ProgressBarBase {
         const min = extractValueFromChanges(changes, 'min', this.min);
         const max = extractValueFromChanges(changes, 'max', this.max);
         const value = extractValueFromChanges(changes, 'value', this.value);
-        if (changes.min || changes.max || changes.value) {
-            if (changes.min || changes.max) {
+        if (changes['min'] || changes['max'] || changes['value']) {
+            if (changes['min'] || changes['max']) {
                 validateRange(min, max);
             }
-            if (changes.value) {
+            if (changes['value']) {
                 if (value == null || Number.isNaN(value)) {
                     this.value = min;
                 }
@@ -294,9 +294,9 @@ class ProgressBarBase {
         }
     }
 }
-ProgressBarBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarBase, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { 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-progressbar": "this.hostClasses", "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: [{
+ProgressBarBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProgressBarBase, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ProgressBarBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ProgressBarBase, selector: "ng-component", inputs: { max: "max", min: "min", value: "value", orientation: "orientation", disabled: "disabled", reverse: "reverse", indeterminate: "indeterminate" }, host: { properties: { "class.k-progressbar": "this.hostClasses", "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: "13.3.11", ngImport: i0, type: ProgressBarBase, decorators: [{
             type: Component,
             args: [{
                     template: ''
@@ -355,14 +355,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class ProgressBarMessages extends ComponentMessages {
 }
-ProgressBarMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-ProgressBarMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ProgressBarMessages, selector: "kendo-progressbar-messages-base", inputs: { progressBarLabel: "progressBarLabel" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarMessages, decorators: [{
+ProgressBarMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProgressBarMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+ProgressBarMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ProgressBarMessages, inputs: { progressBarLabel: "progressBarLabel" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProgressBarMessages, decorators: [{
             type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'kendo-progressbar-messages-base'
-                }]
+            args: [{}]
         }], propDecorators: { progressBarLabel: [{
                 type: Input
             }] } });
@@ -376,14 +373,14 @@ class LocalizedProgressBarMessagesDirective extends ProgressBarMessages {
         this.service = service;
     }
 }
-LocalizedProgressBarMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedProgressBarMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedProgressBarMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: LocalizedProgressBarMessagesDirective, selector: "[kendoProgressBarLocalizedMessages]", providers: [
+LocalizedProgressBarMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedProgressBarMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedProgressBarMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: LocalizedProgressBarMessagesDirective, selector: "[kendoProgressBarLocalizedMessages]", providers: [
         {
             provide: ProgressBarMessages,
             useExisting: forwardRef(() => LocalizedProgressBarMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedProgressBarMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedProgressBarMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -499,7 +496,7 @@ class ProgressBarComponent extends ProgressBarBase {
         if (this.isAnimationInProgress && stopCurrentAnimation(changes)) {
             this.cancelCurrentAnimation = true;
         }
-        if (runAnimation(changes, this.animation, this.previousValue, this.displayValue) && !changes.value.firstChange) {
+        if (runAnimation(changes, this.animation, this.previousValue, this.displayValue) && !changes['value'].firstChange) {
             this.startAnimation(this.previousValue);
         }
     }
@@ -603,8 +600,8 @@ class ProgressBarComponent extends ProgressBarBase {
         });
     }
 }
-ProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ProgressBarComponent, selector: "kendo-progressbar", inputs: { label: "label", progressCssStyle: "progressCssStyle", progressCssClass: "progressCssClass", emptyCssStyle: "emptyCssStyle", emptyCssClass: "emptyCssClass", animation: "animation" }, outputs: { animationEnd: "animationEnd" }, providers: [
+ProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProgressBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ProgressBarComponent, selector: "kendo-progressbar", inputs: { label: "label", progressCssStyle: "progressCssStyle", progressCssClass: "progressCssClass", emptyCssStyle: "emptyCssStyle", emptyCssClass: "emptyCssClass", animation: "animation" }, outputs: { animationEnd: "animationEnd" }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -626,7 +623,7 @@ ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         </span>
         <div
             #progressStatus
-            class="k-selected"
+            class="k-selected k-progressbar-value"
             [class.k-complete]="isCompleted"
             [ngStyle]="progressCssStyle"
             [ngClass]="progressCssClass"
@@ -646,7 +643,7 @@ ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             </span>
         </div>
        `, isInline: true, directives: [{ type: LocalizedProgressBarMessagesDirective, selector: "[kendoProgressBarLocalizedMessages]" }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoProgressBar',
@@ -667,7 +664,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </span>
         <div
             #progressStatus
-            class="k-selected"
+            class="k-selected k-progressbar-value"
             [class.k-complete]="isCompleted"
             [ngStyle]="progressCssStyle"
             [ngClass]="progressCssClass"
@@ -743,13 +740,15 @@ class ChunkProgressBarComponent extends ProgressBarBase {
         this.localization = localization;
         this.elem = elem;
         this.renderer = renderer;
+        this.chunkClass = true;
         /**
          * Sets the number of chunks into which the ChunkProgressBar will be split.
          * Defaults to `5`.
          */
         this.chunkCount = 5;
         this._orientationStyles = {
-            width: `${this.chunkSizePercentage}%`
+            width: `${this.chunkSizePercentage}%`,
+            height: null
         };
     }
     /**
@@ -779,17 +778,17 @@ class ChunkProgressBarComponent extends ProgressBarBase {
     get orientationStyles() {
         if (this.orientation === 'horizontal') {
             this._orientationStyles.width = `${this.chunkSizePercentage}%`;
-            this._orientationStyles.height = undefined;
+            this._orientationStyles.height = null;
         }
         else {
             this._orientationStyles.height = `${this.chunkSizePercentage}%`;
-            this._orientationStyles.width = undefined;
+            this._orientationStyles.width = null;
         }
         return this._orientationStyles;
     }
 }
-ChunkProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChunkProgressBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-ChunkProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChunkProgressBarComponent, selector: "kendo-chunkprogressbar", inputs: { chunkCount: "chunkCount", progressCssStyle: "progressCssStyle", progressCssClass: "progressCssClass", emptyCssStyle: "emptyCssStyle", emptyCssClass: "emptyCssClass" }, providers: [
+ChunkProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChunkProgressBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+ChunkProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ChunkProgressBarComponent, selector: "kendo-chunkprogressbar", inputs: { chunkCount: "chunkCount", progressCssStyle: "progressCssStyle", progressCssClass: "progressCssClass", emptyCssStyle: "emptyCssStyle", emptyCssClass: "emptyCssClass" }, host: { properties: { "class.k-chunk-progressbar": "this.chunkClass" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -801,8 +800,8 @@ ChunkProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             progressBarLabel="Chunk progressbar"
         >
         </ng-container>
-        <ul class="k-reset">
-            <li class="k-item" *ngFor="let chunk of chunks; let i = index;"
+        <ul class="k-reset k-progressbar-chunks">
+            <li class="k-progressbar-chunk" *ngFor="let chunk of chunks; let i = index;"
                 [class.k-first]="i === 0"
                 [class.k-last]="i === chunkCount - 1"
                 [class.k-selected]="chunk"
@@ -814,7 +813,7 @@ ChunkProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             </li>
         </ul>
     `, isInline: true, directives: [{ type: LocalizedProgressBarMessagesDirective, selector: "[kendoProgressBarLocalizedMessages]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChunkProgressBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChunkProgressBarComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoChunkProgressBar',
@@ -825,8 +824,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             progressBarLabel="Chunk progressbar"
         >
         </ng-container>
-        <ul class="k-reset">
-            <li class="k-item" *ngFor="let chunk of chunks; let i = index;"
+        <ul class="k-reset k-progressbar-chunks">
+            <li class="k-progressbar-chunk" *ngFor="let chunk of chunks; let i = index;"
                 [class.k-first]="i === 0"
                 [class.k-last]="i === chunkCount - 1"
                 [class.k-selected]="chunk"
@@ -846,7 +845,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         }
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { chunkCount: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { chunkClass: [{
+                type: HostBinding,
+                args: ['class.k-chunk-progressbar']
+            }], chunkCount: [{
                 type: Input
             }], progressCssStyle: [{
                 type: Input
@@ -867,9 +869,9 @@ class CircularProgressbarCenterTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-CircularProgressbarCenterTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularProgressbarCenterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-CircularProgressbarCenterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: CircularProgressbarCenterTemplateDirective, selector: "[kendoCircularProgressbarCenterTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularProgressbarCenterTemplateDirective, decorators: [{
+CircularProgressbarCenterTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CircularProgressbarCenterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+CircularProgressbarCenterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: CircularProgressbarCenterTemplateDirective, selector: "[kendoCircularProgressbarCenterTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CircularProgressbarCenterTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoCircularProgressbarCenterTemplate]'
@@ -994,6 +996,9 @@ class CircularProgressBarComponent {
         return this._indeterminate;
     }
     ngAfterViewInit() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
         const elem = this.element.nativeElement;
         const ariaLabel = this.localization.get('progressBarLabel');
         this.renderer.setAttribute(elem, 'aria-label', ariaLabel);
@@ -1007,14 +1012,14 @@ class CircularProgressBarComponent {
             }
             else {
                 const value = this.value - this.min;
-                this.internalValue = changes.value.currentValue;
+                this.internalValue = changes['value'].currentValue;
                 this.calculateProgress(value);
             }
         }
-        if (changes.opacity && this.progress) {
-            setProgressBarStyles([{ method: 'setAttribute', el: this.progress.nativeElement, attr: 'opacity', attrValue: this.opacity }], this.renderer);
+        if (changes['opacity'] && this.progress) {
+            setProgressBarStyles([{ method: 'setAttribute', el: this.progress.nativeElement, attr: 'opacity', attrValue: this.opacity.toString() }], this.renderer);
         }
-        if (changes.indeterminate && !changes.indeterminate.firstChange) {
+        if (changes['indeterminate'] && !changes['indeterminate'].firstChange) {
             this.indeterminateState();
         }
     }
@@ -1024,7 +1029,7 @@ class CircularProgressBarComponent {
     /**
      * @hidden
      */
-    onResize(_event) {
+    onResize() {
         this.setStyles();
         const value = this.animation ? this.internalValue : this.value;
         this.calculateProgress(value);
@@ -1059,8 +1064,8 @@ class CircularProgressBarComponent {
         const dir = this.rtl ? circumference * -1 : circumference;
         const strokeDashOffest = circumference - dir * (value / (this.max - this.min));
         const progressCalculations = [
-            { method: 'setStyle', el: progressArc, attr: 'strokeDasharray', attrValue: circumference },
-            { method: 'setStyle', el: progressArc, attr: 'strokeDashoffset', attrValue: strokeDashOffest }
+            { method: 'setStyle', el: progressArc, attr: 'strokeDasharray', attrValue: circumference.toString() },
+            { method: 'setStyle', el: progressArc, attr: 'strokeDashoffset', attrValue: strokeDashOffest.toString() }
         ];
         setProgressBarStyles(progressCalculations, this.renderer);
     }
@@ -1105,23 +1110,23 @@ class CircularProgressBarComponent {
             setProgressBarStyles(surfaceSize, this.renderer);
         }
         const attributesArray = [
-            { method: 'setAttribute', el: progressArc, attr: 'r', attrValue: (elWidth / 2) - 10 },
-            { method: 'setAttribute', el: progressArc, attr: 'cx', attrValue: (elWidth / 2) },
-            { method: 'setAttribute', el: progressArc, attr: 'cy', attrValue: (elWidth / 2) },
-            { method: 'setAttribute', el: progressArc, attr: 'opacity', attrValue: this.opacity },
-            { method: 'setAttribute', el: scale, attr: 'r', attrValue: (elWidth / 2) - 10 },
-            { method: 'setAttribute', el: scale, attr: 'cx', attrValue: (elWidth / 2) },
-            { method: 'setAttribute', el: scale, attr: 'cy', attrValue: (elWidth / 2) }
+            { method: 'setAttribute', el: progressArc, attr: 'r', attrValue: String((elWidth / 2) - 10) },
+            { method: 'setAttribute', el: progressArc, attr: 'cx', attrValue: String((elWidth / 2)) },
+            { method: 'setAttribute', el: progressArc, attr: 'cy', attrValue: String((elWidth / 2)) },
+            { method: 'setAttribute', el: progressArc, attr: 'opacity', attrValue: String(this.opacity) },
+            { method: 'setAttribute', el: scale, attr: 'r', attrValue: String((elWidth / 2) - 10) },
+            { method: 'setAttribute', el: scale, attr: 'cx', attrValue: String(elWidth / 2) },
+            { method: 'setAttribute', el: scale, attr: 'cy', attrValue: String(elWidth / 2) }
         ];
         setProgressBarStyles(attributesArray, this.renderer);
     }
     indeterminateState() {
         const progressArc = this.progress.nativeElement;
         if (this.indeterminate) {
-            // the indeterminate state wont work as the `k-circular-progressbar-arc` has a transform: rotate(-90deg) which is 
+            // the indeterminate state wont work as the `k-circular-progressbar-arc` has a transform: rotate(-90deg) which is
             // interfering with the svg animation as the animateTransform brings its own transform: rotate()
             // This will be like this until the themes release a new version, bringing a new class `k-circular-progressbar-indeterminate-arc`
-            // containing only the necassery CSS styles and we will switch between them when the state of the progressbar is switched. 
+            // 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 };
             let color;
@@ -1196,8 +1201,8 @@ class CircularProgressBarComponent {
         }
         else {
             for (let i = 0; i < this.progressColor.length; i++) {
-                let from = this.progressColor[i].from;
-                let to = this.progressColor[i].to;
+                const from = this.progressColor[i].from;
+                const to = this.progressColor[i].to;
                 if (value >= from && value <= to || (!from && value <= to)) {
                     this.renderer.setStyle(progressArc, 'stroke', this.progressColor[i].color);
                     break;
@@ -1236,8 +1241,8 @@ class CircularProgressBarComponent {
         }
     }
 }
-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", "attr.aria-valuemin": "this.ariaMinAttribute", "attr.aria-valuemax": "this.ariaMaxAttribute", "attr.aria-valuenow": "this.ariaValueAttribute", "attr.role": "this.roleAttribute" } }, providers: [
+CircularProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", 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", "attr.aria-valuemin": "this.ariaMinAttribute", "attr.aria-valuemax": "this.ariaMaxAttribute", "attr.aria-valuenow": "this.ariaValueAttribute", "attr.role": "this.roleAttribute" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -1262,9 +1267,9 @@ CircularProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 </div>
             </div>
         </div>
-        <kendo-resize-sensor (resize)="onResize($event)"></kendo-resize-sensor>
+        <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
     `, isInline: true, components: [{ type: i2.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedProgressBarMessagesDirective, selector: "[kendoProgressBarLocalizedMessages]" }, { 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CircularProgressBarComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoCircularProgressBar',
@@ -1288,7 +1293,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 </div>
             </div>
         </div>
-        <kendo-resize-sensor (resize)="onResize($event)"></kendo-resize-sensor>
+        <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
     `, providers: [
                         LocalizationService,
                         {
@@ -1358,14 +1363,14 @@ class ProgressBarCustomMessagesComponent extends ProgressBarMessages {
         return true;
     }
 }
-ProgressBarCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ProgressBarCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ProgressBarCustomMessagesComponent, selector: "kendo-progressbar-messages", providers: [
+ProgressBarCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProgressBarCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ProgressBarCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ProgressBarCustomMessagesComponent, selector: "kendo-progressbar-messages", providers: [
         {
             provide: ProgressBarMessages,
             useExisting: forwardRef(() => ProgressBarCustomMessagesComponent)
         }
     ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProgressBarCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -1421,8 +1426,8 @@ 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,
+ProgressBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ProgressBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProgressBarModule, declarations: [ProgressBarComponent,
         ChunkProgressBarComponent,
         CircularProgressBarComponent,
         CircularProgressbarCenterTemplateDirective,
@@ -1433,8 +1438,8 @@ ProgressBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         CircularProgressbarCenterTemplateDirective,
         LocalizedProgressBarMessagesDirective,
         ProgressBarCustomMessagesComponent] });
-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: [{
+ProgressBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProgressBarModule, imports: [MODULES] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProgressBarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: COMPONENT_DIRECTIVES,