@progress/kendo-angular-progressbar 24.2.2 → 25.0.0-develop.12

package/fesm2022/progress-kendo-angular-progressbar.mjs

@@ -5,12 +5,11 @@
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import * as i0 from '@angular/core';
-import { isDevMode, Input, HostBinding, Component, Directive, forwardRef, EventEmitter, ViewChild, Output, ContentChild, NgModule } from '@angular/core';
+import { isDevMode, signal, computed, Input, HostBinding, ChangeDetectionStrategy, Component, Directive, forwardRef, EventEmitter, effect, untracked, ViewChild, Output, afterNextRender, ContentChild, NgModule } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
-import { hasObservers, isDocumentAvailable, isChanged, ResizeSensorComponent, ResizeBatchService } from '@progress/kendo-angular-common';
+import { hasObservers, isDocumentAvailable, ResizeSensorComponent, ResizeBatchService } from '@progress/kendo-angular-common';
 import { NgStyle, NgClass, NgTemplateOutlet } from '@angular/common';
 import { Subscription } from 'rxjs';
-import { take } from 'rxjs/operators';
 
 /**
  * @hidden
@@ -20,8 +19,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1783511312,
-    version: '24.2.2',
+    publishDate: 1785317757,
+    version: '25.0.0-develop.12',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -172,23 +171,36 @@ class ProgressBarBase {
      * The maximum value of the ProgressBar.
      * Defaults to `100`.
      */
-    max = 100;
+    set max(value) {
+        validateRange(this._min(), value);
+        this._max.set(value);
+    }
+    get max() {
+        return this._max();
+    }
     /**
      * The minimum value of the ProgressBar.
      * Defaults to `0`.
      */
-    min = 0;
-    /**
-     * The value of the ProgressBar.
-     * Has to be between `min` and `max`.
-     * By default, the value is equal to the `min` value.
-     */
+    set min(value) {
+        validateRange(value, this._max());
+        this._min.set(value);
+    }
+    get min() {
+        return this._min();
+    }
     /**
      * The value of the ProgressBar.
      * Has to be between `min` and `max`.
      * Defaults to `0`.
      */
-    value = 0;
+    set value(v) {
+        this.previousValue = this.displayValue;
+        this._value.set(v == null || Number.isNaN(v) ? this._min() : v);
+    }
+    get value() {
+        return this._value();
+    }
     /**
      * @hidden
      */
@@ -227,29 +239,54 @@ class ProgressBarBase {
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/progressbars/progressbar/orientation)).
      * Defaults to `horizontal`.
      */
-    orientation = 'horizontal';
+    set orientation(value) {
+        this._orientation.set(value);
+    }
+    get orientation() {
+        return this._orientation();
+    }
     /**
      * If set to `true`, the ProgressBar will be disabled
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/progressbars/progressbar/disabled)).
      * It will still allow you to change its value.
      * Defaults to `false`.
      */
-    disabled = false;
+    set disabled(value) {
+        this._disabled.set(value);
+    }
+    get disabled() {
+        return this._disabled();
+    }
     /**
      * If set to `true`, the ProgressBar will be reversed
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/progressbars/progressbar/direction)).
      * Defaults to `false`.
      */
-    reverse = false;
+    set reverse(value) {
+        this._reverse.set(value);
+    }
+    get reverse() {
+        return this._reverse();
+    }
     /**
      * Sets the `indeterminate` state of the ProgressBar.
      * Defaults to `false`.
      */
-    indeterminate = false;
+    set indeterminate(value) {
+        this._indeterminate.set(value);
+    }
+    get indeterminate() {
+        return this._indeterminate();
+    }
     direction;
     localizationChangeSubscription;
-    displayValue = 0;
     previousValue = 0;
+    /**
+     * @hidden
+     */
+    get displayValue() {
+        return this._displayValue();
+    }
     /**
      * @hidden
      */
@@ -267,39 +304,27 @@ class ProgressBarBase {
         const label = this.localization.get('progressBarLabel');
         this.renderer.setAttribute(elem, 'aria-label', label);
     }
-    ngOnChanges(changes) {
-        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']) {
-                validateRange(min, max);
-            }
-            if (changes['value']) {
-                if (value == null || Number.isNaN(value)) {
-                    this.value = min;
-                }
-                const previousValue = this.displayValue;
-                this.displayValue = adjustValueToRange(this.min, this.max, value);
-                this.previousValue = previousValue;
-            }
-            this.min = min;
-            this.max = max;
-            this.displayValue = adjustValueToRange(this.min, this.max, value);
-        }
-    }
     ngOnDestroy() {
         if (this.localizationChangeSubscription) {
             this.localizationChangeSubscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProgressBarBase, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: ProgressBarBase, isStandalone: true, 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 });
+    _max = signal(100, ...(ngDevMode ? [{ debugName: "_max" }] : []));
+    _min = signal(0, ...(ngDevMode ? [{ debugName: "_min" }] : []));
+    _value = signal(0, ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    _orientation = signal('horizontal', ...(ngDevMode ? [{ debugName: "_orientation" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _reverse = signal(false, ...(ngDevMode ? [{ debugName: "_reverse" }] : []));
+    _indeterminate = signal(false, ...(ngDevMode ? [{ debugName: "_indeterminate" }] : []));
+    _displayValue = computed(() => adjustValueToRange(this._min(), this._max(), this._value()), ...(ngDevMode ? [{ debugName: "_displayValue" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProgressBarBase, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: ProgressBarBase, isStandalone: true, 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" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProgressBarBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProgressBarBase, decorators: [{
             type: Component,
             args: [{
-                    template: ''
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }], propDecorators: { hostClasses: [{
                 type: HostBinding,
@@ -358,10 +383,10 @@ class ProgressBarMessages extends ComponentMessages {
      * The aria-label attribute for the ProgressBar component.
      */
     progressBarLabel;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProgressBarMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: ProgressBarMessages, isStandalone: true, inputs: { progressBarLabel: "progressBarLabel" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProgressBarMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: ProgressBarMessages, isStandalone: true, inputs: { progressBarLabel: "progressBarLabel" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProgressBarMessages, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProgressBarMessages, decorators: [{
             type: Directive,
             args: [{}]
         }], propDecorators: { progressBarLabel: [{
@@ -377,15 +402,15 @@ class LocalizedProgressBarMessagesDirective extends ProgressBarMessages {
         super();
         this.service = service;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: LocalizedProgressBarMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: LocalizedProgressBarMessagesDirective, isStandalone: true, selector: "[kendoProgressBarLocalizedMessages]", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LocalizedProgressBarMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: LocalizedProgressBarMessagesDirective, isStandalone: true, selector: "[kendoProgressBarLocalizedMessages]", providers: [
             {
                 provide: ProgressBarMessages,
                 useExisting: forwardRef(() => LocalizedProgressBarMessagesDirective)
             }
         ], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: LocalizedProgressBarMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LocalizedProgressBarMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -428,36 +453,77 @@ class ProgressBarComponent extends ProgressBarBase {
      * Determines whether the status label displays.
      * @default true
      */
-    label = true;
+    set label(value) {
+        this._label.set(value);
+    }
+    get label() {
+        return this._label();
+    }
     /**
      * Sets the CSS styles that will be rendered on the inner element, which represents the full portion of the progress bar
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/progressbars/progressbar/appearance)).
      * Supports the type of values that [`ngStyle`](link:site.data.urls.angular['ngstyleapi']) supports.
      */
-    progressCssStyle;
+    set progressCssStyle(value) {
+        this._progressCssStyle.set(value);
+    }
+    get progressCssStyle() {
+        return this._progressCssStyle();
+    }
     /**
      * The CSS classes that render on the inner element which represents the full portion of the progress bar
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/progressbars/progressbar/appearance)).
      * Supports the type of values that [`ngClass`](link:site.data.urls.angular['ngclassapi']) supports.
      */
-    progressCssClass;
+    set progressCssClass(value) {
+        this._progressCssClass.set(value);
+    }
+    get progressCssClass() {
+        return this._progressCssClass();
+    }
     /**
      * The CSS styles that render on the inner element which represents the empty portion of the progress bar
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/progressbars/progressbar/appearance)).
      * Supports the type of values that [`ngStyle`](link:site.data.urls.angular['ngstyleapi']) supports.
      */
-    emptyCssStyle;
+    set emptyCssStyle(value) {
+        this._emptyCssStyle.set(value);
+    }
+    get emptyCssStyle() {
+        return this._emptyCssStyle();
+    }
     /**
      * The CSS classes that render on the inner element which represents the empty portion of the progress bar
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/progressbars/progressbar/appearance)).
      * Supports the type of values that [`ngClass`](link:site.data.urls.angular['ngclassapi']) supports.
      */
-    emptyCssClass;
+    set emptyCssClass(value) {
+        this._emptyCssClass.set(value);
+    }
+    get emptyCssClass() {
+        return this._emptyCssClass();
+    }
     /**
      * The animation configuration of the ProgressBar.
      * @default false
      */
-    animation = false;
+    set animation(value) {
+        this._animation.set(value);
+    }
+    get animation() {
+        return this._animation();
+    }
+    /**
+     * The maximum value of the ProgressBar.
+     * Defaults to `100`.
+     */
+    set max(v) {
+        this._previousMax = this.max;
+        super.max = v;
+    }
+    get max() {
+        return super.max;
+    }
     /**
      * Fires when the animation which indicates the latest value change completes.
      */
@@ -519,7 +585,35 @@ class ProgressBarComponent extends ProgressBarBase {
     animationFrame;
     cancelCurrentAnimation;
     isAnimationInProgress;
-    previousMax;
+    _previousMax;
+    _valueEffectInitialized = false;
+    _label = signal(true, ...(ngDevMode ? [{ debugName: "_label" }] : []));
+    _progressCssStyle = signal(undefined, ...(ngDevMode ? [{ debugName: "_progressCssStyle" }] : []));
+    _progressCssClass = signal(undefined, ...(ngDevMode ? [{ debugName: "_progressCssClass" }] : []));
+    _emptyCssStyle = signal(undefined, ...(ngDevMode ? [{ debugName: "_emptyCssStyle" }] : []));
+    _emptyCssClass = signal(undefined, ...(ngDevMode ? [{ debugName: "_emptyCssClass" }] : []));
+    _animation = signal(false, ...(ngDevMode ? [{ debugName: "_animation" }] : []));
+    valueChangeEffect = effect(() => {
+        const _value = this.value; // tracks _value signal changes via public getter
+        if (!this._valueEffectInitialized) {
+            this._valueEffectInitialized = true;
+            return;
+        }
+        const displayValue = untracked(() => this.displayValue);
+        const animation = untracked(() => this.animation);
+        if (animation && typeof requestAnimationFrame !== 'undefined' && this.previousValue !== displayValue) {
+            if (!this.progressStatusElement?.nativeElement || !this.progressStatusWrapperElement?.nativeElement) {
+                return;
+            }
+            this.startAnimation(this.previousValue);
+        }
+    }, ...(ngDevMode ? [{ debugName: "valueChangeEffect" }] : []));
+    animationStopEffect = effect(() => {
+        const animation = this.animation; // tracks _animation signal changes via public getter
+        if (this.isAnimationInProgress && !animation) {
+            this.cancelCurrentAnimation = true;
+        }
+    }, ...(ngDevMode ? [{ debugName: "animationStopEffect" }] : []));
     /**
      * @hidden
      */
@@ -530,23 +624,11 @@ class ProgressBarComponent extends ProgressBarBase {
         this.renderer = renderer;
         this.zone = zone;
     }
-    /**
-     * @hidden
-     */
-    ngOnChanges(changes) {
-        super.ngOnChanges(changes);
-        this.previousMax = changes['max'] ? changes['max'].previousValue : this.max;
-        if (this.isAnimationInProgress && stopCurrentAnimation(changes)) {
-            this.cancelCurrentAnimation = true;
-        }
-        if (runAnimation(changes, this.animation, this.previousValue, this.displayValue) && !changes['value'].firstChange) {
-            this.startAnimation(this.previousValue);
-        }
-    }
     /**
      * @hidden
      */
     ngOnDestroy() {
+        super.ngOnDestroy();
         if (this.animationFrame) {
             cancelAnimationFrame(this.animationFrame);
         }
@@ -612,7 +694,7 @@ class ProgressBarComponent extends ProgressBarBase {
     }
     getAnimationOptions(value) {
         const isHorizontal = this.orientation === 'horizontal';
-        const previousRatio = calculateRatio(this.min, this.previousMax ?? this.max, value);
+        const previousRatio = calculateRatio(this.min, this._previousMax ?? this.max, value);
         const previousStatusWidth = isHorizontal ? previousRatio * 100 : 100;
         const previousStatusHeight = !isHorizontal ? previousRatio * 100 : 100;
         const property = isHorizontal ? 'width' : 'height';
@@ -642,14 +724,14 @@ class ProgressBarComponent extends ProgressBarBase {
             this.isAnimationInProgress = false;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProgressBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: ProgressBarComponent, isStandalone: true, selector: "kendo-progressbar", inputs: { label: "label", progressCssStyle: "progressCssStyle", progressCssClass: "progressCssClass", emptyCssStyle: "emptyCssStyle", emptyCssClass: "emptyCssClass", animation: "animation" }, outputs: { animationEnd: "animationEnd" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProgressBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ProgressBarComponent, isStandalone: true, selector: "kendo-progressbar", inputs: { label: "label", progressCssStyle: "progressCssStyle", progressCssClass: "progressCssClass", emptyCssStyle: "emptyCssStyle", emptyCssClass: "emptyCssClass", animation: "animation", max: "max" }, outputs: { animationEnd: "animationEnd" }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.progressbar'
             }
-        ], viewQueries: [{ propertyName: "progressStatusElement", first: true, predicate: ["progressStatus"], descendants: true }, { propertyName: "progressStatusWrapperElement", first: true, predicate: ["progressStatusWrap"], descendants: true }], exportAs: ["kendoProgressBar"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+        ], viewQueries: [{ propertyName: "progressStatusElement", first: true, predicate: ["progressStatus"], descendants: true }, { propertyName: "progressStatusWrapperElement", first: true, predicate: ["progressStatusWrap"], descendants: true }], exportAs: ["kendoProgressBar"], usesInheritance: true, ngImport: i0, template: `
         <ng-container kendoProgressBarLocalizedMessages
           i18n-progressBarLabel="kendo.progressbar.progressBarLabel|The aria-label attribute for the ProgressBar component."
           progressBarLabel="Progressbar"
@@ -688,13 +770,14 @@ class ProgressBarComponent extends ProgressBarBase {
             }
           </span>
         </div>
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedProgressBarMessagesDirective, selector: "[kendoProgressBarLocalizedMessages]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedProgressBarMessagesDirective, selector: "[kendoProgressBarLocalizedMessages]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProgressBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
             args: [{
-                    exportAs: 'kendoProgressBar',
                     selector: 'kendo-progressbar',
+                    exportAs: 'kendoProgressBar',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
         <ng-container kendoProgressBarLocalizedMessages
           i18n-progressBarLabel="kendo.progressbar.progressBarLabel|The aria-label attribute for the ProgressBar component."
@@ -757,6 +840,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 type: Input
             }], animation: [{
                 type: Input
+            }], max: [{
+                type: Input
             }], animationEnd: [{
                 type: Output
             }], progressStatusElement: [{
@@ -801,7 +886,12 @@ class ChunkProgressBarComponent extends ProgressBarBase {
      *
      * @default 5
      */
-    chunkCount = 5;
+    set chunkCount(value) {
+        this._chunkCount.set(value);
+    }
+    get chunkCount() {
+        return this._chunkCount();
+    }
     /**
      * @hidden
      */
@@ -818,22 +908,42 @@ class ChunkProgressBarComponent extends ProgressBarBase {
      * Sets the CSS styles that will be rendered on the full chunk elements ([see example](https://www.telerik.com/kendo-angular-ui/components/progressbars/circularprogressbar/appearance)).
      * Supports the type of values that [`ngStyle`](link:site.data.urls.angular['ngstyleapi']) supports.
      */
-    progressCssStyle;
+    set progressCssStyle(value) {
+        this._progressCssStyle.set(value);
+    }
+    get progressCssStyle() {
+        return this._progressCssStyle();
+    }
     /**
      * Sets the CSS classes that will be rendered on the full chunk elements ([see example](https://www.telerik.com/kendo-angular-ui/components/progressbars/circularprogressbar/appearance)).
      * Supports the type of values that [`ngClass`](link:site.data.urls.angular['ngclassapi']) supports.
      */
-    progressCssClass;
+    set progressCssClass(value) {
+        this._progressCssClass.set(value);
+    }
+    get progressCssClass() {
+        return this._progressCssClass();
+    }
     /**
      * Sets the CSS styles that will be rendered on the empty chunk elements ([see example](https://www.telerik.com/kendo-angular-ui/components/progressbars/circularprogressbar/appearance)).
      * Supports the type of values that [`ngStyle`](link:site.data.urls.angular['ngstyleapi']) supports.
      */
-    emptyCssStyle;
+    set emptyCssStyle(value) {
+        this._emptyCssStyle.set(value);
+    }
+    get emptyCssStyle() {
+        return this._emptyCssStyle();
+    }
     /**
      * Sets the CSS classes that will be rendered on the empty chunk elements ([see example](https://www.telerik.com/kendo-angular-ui/components/progressbars/circularprogressbar/appearance)).
      * Supports the type of values that [`ngClass`](link:site.data.urls.angular['ngclassapi']) supports.
      */
-    emptyCssClass;
+    set emptyCssClass(value) {
+        this._emptyCssClass.set(value);
+    }
+    get emptyCssClass() {
+        return this._emptyCssClass();
+    }
     /**
      * @hidden
      */
@@ -854,6 +964,11 @@ class ChunkProgressBarComponent extends ProgressBarBase {
         }
         return this._orientationStyles;
     }
+    _chunkCount = signal(5, ...(ngDevMode ? [{ debugName: "_chunkCount" }] : []));
+    _progressCssStyle = signal(undefined, ...(ngDevMode ? [{ debugName: "_progressCssStyle" }] : []));
+    _progressCssClass = signal(undefined, ...(ngDevMode ? [{ debugName: "_progressCssClass" }] : []));
+    _emptyCssStyle = signal(undefined, ...(ngDevMode ? [{ debugName: "_emptyCssStyle" }] : []));
+    _emptyCssClass = signal(undefined, ...(ngDevMode ? [{ debugName: "_emptyCssClass" }] : []));
     _orientationStyles = {
         width: `${this.chunkSizePercentage}%`,
         height: null
@@ -867,8 +982,8 @@ class ChunkProgressBarComponent extends ProgressBarBase {
         this.elem = elem;
         this.renderer = renderer;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ChunkProgressBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: ChunkProgressBarComponent, isStandalone: true, selector: "kendo-chunkprogressbar", inputs: { chunkCount: "chunkCount", progressCssStyle: "progressCssStyle", progressCssClass: "progressCssClass", emptyCssStyle: "emptyCssStyle", emptyCssClass: "emptyCssClass" }, host: { properties: { "class.k-chunk-progressbar": "this.chunkClass" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChunkProgressBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ChunkProgressBarComponent, isStandalone: true, 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,
@@ -894,13 +1009,13 @@ class ChunkProgressBarComponent extends ProgressBarBase {
             </li>
           }
         </ul>
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedProgressBarMessagesDirective, selector: "[kendoProgressBarLocalizedMessages]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedProgressBarMessagesDirective, selector: "[kendoProgressBarLocalizedMessages]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ChunkProgressBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChunkProgressBarComponent, decorators: [{
             type: Component,
             args: [{
-                    exportAs: 'kendoChunkProgressBar',
                     selector: 'kendo-chunkprogressbar',
+                    exportAs: 'kendoChunkProgressBar',
                     template: `
         <ng-container kendoProgressBarLocalizedMessages
           i18n-progressBarLabel="kendo.chunkprogressbar.progressBarLabel|The aria-label attribute for the ChunkProgressBar component."
@@ -930,6 +1045,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         }
                     ],
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [LocalizedProgressBarMessagesDirective, NgClass, NgStyle]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { chunkClass: [{
@@ -965,10 +1081,10 @@ class CircularProgressbarCenterTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CircularProgressbarCenterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: CircularProgressbarCenterTemplateDirective, isStandalone: true, selector: "[kendoCircularProgressbarCenterTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CircularProgressbarCenterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: CircularProgressbarCenterTemplateDirective, isStandalone: true, selector: "[kendoCircularProgressbarCenterTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CircularProgressbarCenterTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CircularProgressbarCenterTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoCircularProgressbarCenterTemplate]',
@@ -1004,10 +1120,9 @@ const DEFAULT_SURFACE_SIZE = 200;
  */
 class CircularProgressBarComponent {
     renderer;
-    cdr;
     localization;
     element;
-    zone;
+    injector;
     hostClasses = true;
     get ariaMinAttribute() {
         return String(this.min);
@@ -1032,10 +1147,10 @@ class CircularProgressBarComponent {
             this.handleErrors('value < min');
         }
         this.previousValue = this.value;
-        this._value = value;
+        this._value.set(value);
     }
     get value() {
-        return this._value;
+        return this._value();
     }
     /**
      * Sets the maximum value which the Circular ProgressBar can accept.
@@ -1046,10 +1161,10 @@ class CircularProgressBarComponent {
         if (max < this.min) {
             this.handleErrors('max < min');
         }
-        this._max = max;
+        this._max.set(max);
     }
     get max() {
-        return this._max;
+        return this._max();
     }
     /**
      * Sets the minimum value which the Circular ProgressBar can accept.
@@ -1060,38 +1175,53 @@ class CircularProgressBarComponent {
         if (min > this.max) {
             this.handleErrors('max < min');
         }
-        this._min = min;
+        this._min.set(min);
     }
     get min() {
-        return this._min;
+        return this._min();
     }
     /**
      * Specifies whether to play an animation when the value changes.
      *
      * @default false
      */
-    animation = false;
+    set animation(value) {
+        this._animation.set(value);
+    }
+    get animation() {
+        return this._animation();
+    }
     /**
      * Sets the opacity of the value arc.
      *
      * @default 1
      */
-    opacity = 1;
+    set opacity(value) {
+        this._opacity.set(value);
+    }
+    get opacity() {
+        return this._opacity();
+    }
     /**
      * Puts the Circular ProgressBar in indeterminate state.
      *
      * @default false
      */
     set indeterminate(indeterminate) {
-        this._indeterminate = indeterminate;
+        this._indeterminate.set(indeterminate);
     }
     get indeterminate() {
-        return this._indeterminate;
+        return this._indeterminate();
     }
     /**
      * Configures the pointer color. You can set it to a single color string or customize it per progress stages.
      */
-    progressColor;
+    set progressColor(value) {
+        this._progressColor.set(value);
+    }
+    get progressColor() {
+        return this._progressColor();
+    }
     /**
      * Fires when the animation that indicates the latest value change completes.
      */
@@ -1101,21 +1231,68 @@ class CircularProgressBarComponent {
     labelElement;
     surface;
     centerTemplate;
-    centerTemplateContext = {};
-    _indeterminate = false;
-    _max = 100;
-    _min = 0;
-    _value = 0;
+    /**
+     * @hidden
+     */
+    get centerTemplateContext() {
+        return this._centerTemplateContext();
+    }
     previousValue = 0;
     internalValue = 0;
     rtl;
     subscriptions = new Subscription();
-    constructor(renderer, cdr, localization, element, zone) {
+    _value = signal(0, ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    _max = signal(100, ...(ngDevMode ? [{ debugName: "_max" }] : []));
+    _min = signal(0, ...(ngDevMode ? [{ debugName: "_min" }] : []));
+    _animation = signal(false, ...(ngDevMode ? [{ debugName: "_animation" }] : []));
+    _opacity = signal(1, ...(ngDevMode ? [{ debugName: "_opacity" }] : []));
+    _indeterminate = signal(false, ...(ngDevMode ? [{ debugName: "_indeterminate" }] : []));
+    _progressColor = signal(undefined, ...(ngDevMode ? [{ debugName: "_progressColor" }] : []));
+    _centerTemplateContext = signal({}, ...(ngDevMode ? [{ debugName: "_centerTemplateContext" }] : []));
+    _valueEffectInitialized = false;
+    valueChangeEffect = effect(() => {
+        const _value = this._value(); // tracks _value signal changes
+        if (!this._valueEffectInitialized) {
+            this._valueEffectInitialized = true;
+            return;
+        }
+        if (!this.progress) {
+            return;
+        }
+        const animation = untracked(() => this._animation());
+        if (animation) {
+            this.progressbarAnimation();
+        }
+        else {
+            const relValue = _value - untracked(() => this._min());
+            this.internalValue = _value;
+            this.calculateProgress(relValue);
+        }
+    }, ...(ngDevMode ? [{ debugName: "valueChangeEffect" }] : []));
+    opacityEffect = effect(() => {
+        const opacity = this._opacity();
+        if (!this.progress) {
+            return;
+        }
+        setProgressBarStyles([{ method: 'setAttribute', el: this.progress.nativeElement, attr: 'opacity', attrValue: opacity.toString() }], this.renderer);
+    }, ...(ngDevMode ? [{ debugName: "opacityEffect" }] : []));
+    _indeterminateEffectInitialized = false;
+    indeterminateEffect = effect(() => {
+        const _indeterminate = this._indeterminate();
+        if (!this._indeterminateEffectInitialized) {
+            this._indeterminateEffectInitialized = true;
+            return;
+        }
+        if (!this.progress) {
+            return;
+        }
+        this.indeterminateState();
+    }, ...(ngDevMode ? [{ debugName: "indeterminateEffect" }] : []));
+    constructor(renderer, localization, element, injector) {
         this.renderer = renderer;
-        this.cdr = cdr;
         this.localization = localization;
         this.element = element;
-        this.zone = zone;
+        this.injector = injector;
         validatePackage(packageMetadata);
         this.subscriptions.add(this.localization.changes.subscribe(this.rtlChange.bind(this)));
     }
@@ -1128,25 +1305,6 @@ class CircularProgressBarComponent {
         this.renderer.setAttribute(elem, 'aria-label', ariaLabel);
         this.initProgressArc();
     }
-    ngOnChanges(changes) {
-        const skipFirstChange = true;
-        if (isChanged('value', changes, skipFirstChange) && this.progress) {
-            if (this.animation) {
-                this.progressbarAnimation();
-            }
-            else {
-                const value = this.value - this.min;
-                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.toString() }], this.renderer);
-        }
-        if (changes['indeterminate'] && !changes['indeterminate'].firstChange) {
-            this.indeterminateState();
-        }
-    }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
@@ -1179,9 +1337,9 @@ class CircularProgressBarComponent {
             this.updateProgressColor(value);
         }
         // needed when we have *ngIf inside the template to render different content depending on some condition
-        this.zone.onStable.pipe(take(1)).subscribe(() => {
+        afterNextRender(() => {
             this.updateCenterTemplate(value + this.min);
-        });
+        }, { injector: this.injector });
         const progressArc = this.progress.nativeElement;
         const radius = this.progress.nativeElement.r.baseVal.value;
         const circumference = Math.PI * (radius * 2);
@@ -1288,10 +1446,10 @@ class CircularProgressBarComponent {
         if (!this.centerTemplate) {
             return;
         }
-        this.centerTemplateContext.value = value;
-        this.centerTemplateContext.color = this.currentColor;
-        this.cdr.detectChanges();
-        this.positionLabel();
+        this._centerTemplateContext.set({ value, color: this.currentColor });
+        afterNextRender(() => {
+            this.positionLabel();
+        }, { injector: this.injector });
     }
     positionLabel() {
         const labelEl = this.labelElement.nativeElement;
@@ -1367,14 +1525,14 @@ class CircularProgressBarComponent {
             this.setDirection();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CircularProgressBarComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CircularProgressBarComponent, isStandalone: true, 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CircularProgressBarComponent, deps: [{ token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: CircularProgressBarComponent, isStandalone: true, 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,
                 useValue: 'kendo.circularprogressbar'
             }
-        ], queries: [{ propertyName: "centerTemplate", first: true, predicate: CircularProgressbarCenterTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "progress", first: true, predicate: ["progress"], descendants: true }, { propertyName: "scale", first: true, predicate: ["scale"], descendants: true }, { propertyName: "labelElement", first: true, predicate: ["label"], descendants: true }, { propertyName: "surface", first: true, predicate: ["surface"], descendants: true }], exportAs: ["kendoCircularProgressBar"], usesOnChanges: true, ngImport: i0, template: `
+        ], queries: [{ propertyName: "centerTemplate", first: true, predicate: CircularProgressbarCenterTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "progress", first: true, predicate: ["progress"], descendants: true }, { propertyName: "scale", first: true, predicate: ["scale"], descendants: true }, { propertyName: "labelElement", first: true, predicate: ["label"], descendants: true }, { propertyName: "surface", first: true, predicate: ["surface"], descendants: true }], exportAs: ["kendoCircularProgressBar"], ngImport: i0, template: `
         <ng-container kendoProgressBarLocalizedMessages
           i18n-progressBarLabel="kendo.circularprogressbar.progressBarLabel|The aria-label attribute for the Circular ProgressBar component."
           progressBarLabel="Circular progressbar"
@@ -1396,13 +1554,13 @@ class CircularProgressBarComponent {
           </div>
         </div>
         <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedProgressBarMessagesDirective, selector: "[kendoProgressBarLocalizedMessages]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedProgressBarMessagesDirective, selector: "[kendoProgressBarLocalizedMessages]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CircularProgressBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CircularProgressBarComponent, decorators: [{
             type: Component,
             args: [{
-                    exportAs: 'kendoCircularProgressBar',
                     selector: 'kendo-circularprogressbar',
+                    exportAs: 'kendoCircularProgressBar',
                     template: `
         <ng-container kendoProgressBarLocalizedMessages
           i18n-progressBarLabel="kendo.circularprogressbar.progressBarLabel|The aria-label attribute for the Circular ProgressBar component."
@@ -1433,9 +1591,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         }
                     ],
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [LocalizedProgressBarMessagesDirective, NgTemplateOutlet, ResizeSensorComponent]
                 }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { hostClasses: [{
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.Injector }], propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-circular-progressbar']
             }], ariaMinAttribute: [{
@@ -1520,15 +1679,15 @@ class ProgressBarCustomMessagesComponent extends ProgressBarMessages {
     get override() {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProgressBarCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: ProgressBarCustomMessagesComponent, isStandalone: true, selector: "kendo-progressbar-messages", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProgressBarCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: ProgressBarCustomMessagesComponent, isStandalone: true, selector: "kendo-progressbar-messages", providers: [
             {
                 provide: ProgressBarMessages,
                 useExisting: forwardRef(() => ProgressBarCustomMessagesComponent)
             }
         ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProgressBarCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProgressBarCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -1640,11 +1799,11 @@ const KENDO_PROGRESSBARS = [
  * ```
  */
 class ProgressBarModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: ProgressBarModule, imports: [ChunkProgressBarComponent, ProgressBarCustomMessagesComponent, CircularProgressbarCenterTemplateDirective, CircularProgressBarComponent, ProgressBarCustomMessagesComponent, ProgressBarComponent, ProgressBarCustomMessagesComponent], exports: [ChunkProgressBarComponent, ProgressBarCustomMessagesComponent, CircularProgressbarCenterTemplateDirective, CircularProgressBarComponent, ProgressBarCustomMessagesComponent, ProgressBarComponent, ProgressBarCustomMessagesComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProgressBarModule, providers: [ResizeBatchService], imports: [CircularProgressBarComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: ProgressBarModule, imports: [ChunkProgressBarComponent, ProgressBarCustomMessagesComponent, CircularProgressbarCenterTemplateDirective, CircularProgressBarComponent, ProgressBarCustomMessagesComponent, ProgressBarComponent, ProgressBarCustomMessagesComponent], exports: [ChunkProgressBarComponent, ProgressBarCustomMessagesComponent, CircularProgressbarCenterTemplateDirective, CircularProgressBarComponent, ProgressBarCustomMessagesComponent, ProgressBarComponent, ProgressBarCustomMessagesComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProgressBarModule, providers: [ResizeBatchService], imports: [CircularProgressBarComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProgressBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProgressBarModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_PROGRESSBARS],