@progress/kendo-angular-progressbar 25.0.0-develop.2 → 25.0.0-develop.4

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: 1783688456,
-    version: '25.0.0-develop.2',
+    publishDate: 1783940090,
+    version: '25.0.0-develop.4',
     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();
         }
     }
+    _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" } }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
+    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: "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,
@@ -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';
@@ -643,13 +725,13 @@ class ProgressBarComponent extends ProgressBarBase {
         });
     }
     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" }, outputs: { animationEnd: "animationEnd" }, providers: [
+    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: "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: "20.3.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
@@ -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: "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: "20.3.25", ngImpo
                         }
                     ],
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [LocalizedProgressBarMessagesDirective, NgClass, NgStyle]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { chunkClass: [{
@@ -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: "20.3.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 ɵ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: "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: "20.3.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: [{

package/index.d.ts

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { LocalizationService, ComponentMessages } from '@progress/kendo-angular-l10n';
 import * as i0 from '@angular/core';
-import { OnChanges, ElementRef, Renderer2, SimpleChanges, EventEmitter, NgZone, TemplateRef, AfterViewInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { AfterViewInit, OnDestroy, ElementRef, Renderer2, EventEmitter, NgZone, TemplateRef, Injector } from '@angular/core';
 import { Subscription } from 'rxjs';
 
 /**
@@ -29,7 +29,7 @@ type ProgressBarOrientation = 'horizontal' | 'vertical';
 /**
  * @hidden
  */
-declare abstract class ProgressBarBase implements OnChanges {
+declare abstract class ProgressBarBase implements AfterViewInit, OnDestroy {
     protected elem: ElementRef;
     protected renderer: Renderer2;
     protected localization: LocalizationService;
@@ -48,23 +48,21 @@ declare abstract class ProgressBarBase implements OnChanges {
      * The maximum value of the ProgressBar.
      * Defaults to `100`.
      */
-    max: number;
+    set max(value: number);
+    get max(): number;
     /**
      * The minimum value of the ProgressBar.
      * Defaults to `0`.
      */
-    min: number;
-    /**
-     * 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: number);
+    get min(): number;
     /**
      * The value of the ProgressBar.
      * Has to be between `min` and `max`.
      * Defaults to `0`.
      */
-    value: number;
+    set value(v: number);
+    get value(): number;
     /**
      * @hidden
      */
@@ -91,36 +89,50 @@ declare abstract class ProgressBarBase implements OnChanges {
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/progressbars/progressbar/orientation)).
      * Defaults to `horizontal`.
      */
-    orientation: ProgressBarOrientation;
+    set orientation(value: ProgressBarOrientation);
+    get orientation(): ProgressBarOrientation;
     /**
      * 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: boolean;
+    set disabled(value: boolean);
+    get disabled(): boolean;
     /**
      * 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: boolean;
+    set reverse(value: boolean);
+    get reverse(): boolean;
     /**
      * Sets the `indeterminate` state of the ProgressBar.
      * Defaults to `false`.
      */
-    indeterminate: boolean;
+    set indeterminate(value: boolean);
+    get indeterminate(): boolean;
     protected direction: string;
     protected localizationChangeSubscription: Subscription;
-    protected displayValue: number;
     protected previousValue: number;
+    /**
+     * @hidden
+     */
+    protected get displayValue(): number;
     /**
      * @hidden
      */
     constructor(elem: ElementRef, renderer: Renderer2, localization: LocalizationService);
     ngAfterViewInit(): void;
-    ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
+    private readonly _max;
+    private readonly _min;
+    private readonly _value;
+    private readonly _orientation;
+    private readonly _disabled;
+    private readonly _reverse;
+    private readonly _indeterminate;
+    private readonly _displayValue;
     static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarBase, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ProgressBarBase, "ng-component", never, { "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; "value": { "alias": "value"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "reverse": { "alias": "reverse"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, {}, never, never, true, never>;
 }
@@ -214,13 +226,17 @@ declare class ProgressBarComponent extends ProgressBarBase {
      * Determines whether the status label displays.
      * @default true
      */
-    label: boolean | LabelSettings;
+    set label(value: boolean | LabelSettings);
+    get label(): boolean | LabelSettings;
     /**
      * 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: {
+        [key: string]: string;
+    });
+    get progressCssStyle(): {
         [key: string]: string;
     };
     /**
@@ -228,7 +244,10 @@ declare class ProgressBarComponent extends ProgressBarBase {
      * ([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: string | string[] | Set<string> | {
+    set progressCssClass(value: string | string[] | Set<string> | {
+        [key: string]: any;
+    });
+    get progressCssClass(): string | string[] | Set<string> | {
         [key: string]: any;
     };
     /**
@@ -236,7 +255,10 @@ declare class ProgressBarComponent extends ProgressBarBase {
      * ([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: {
+        [key: string]: string;
+    });
+    get emptyCssStyle(): {
         [key: string]: string;
     };
     /**
@@ -244,14 +266,24 @@ declare class ProgressBarComponent extends ProgressBarBase {
      * ([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: string | string[] | Set<string> | {
+    set emptyCssClass(value: string | string[] | Set<string> | {
+        [key: string]: any;
+    });
+    get emptyCssClass(): string | string[] | Set<string> | {
         [key: string]: any;
     };
     /**
      * The animation configuration of the ProgressBar.
      * @default false
      */
-    animation: boolean | ProgressBarAnimation;
+    set animation(value: boolean | ProgressBarAnimation);
+    get animation(): boolean | ProgressBarAnimation;
+    /**
+     * The maximum value of the ProgressBar.
+     * Defaults to `100`.
+     */
+    set max(v: number);
+    get max(): number;
     /**
      * Fires when the animation which indicates the latest value change completes.
      */
@@ -285,15 +317,20 @@ declare class ProgressBarComponent extends ProgressBarBase {
     private animationFrame;
     private cancelCurrentAnimation;
     private isAnimationInProgress;
-    private previousMax;
+    private _previousMax;
+    private _valueEffectInitialized;
+    private readonly _label;
+    private readonly _progressCssStyle;
+    private readonly _progressCssClass;
+    private readonly _emptyCssStyle;
+    private readonly _emptyCssClass;
+    private readonly _animation;
+    private readonly valueChangeEffect;
+    private readonly animationStopEffect;
     /**
      * @hidden
      */
     constructor(localization: LocalizationService, elem: ElementRef, renderer: Renderer2, zone: NgZone);
-    /**
-     * @hidden
-     */
-    ngOnChanges(changes: SimpleChanges): void;
     /**
      * @hidden
      */
@@ -311,7 +348,7 @@ declare class ProgressBarComponent extends ProgressBarBase {
     private renderValueChange;
     private resetProgress;
     static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ProgressBarComponent, "kendo-progressbar", ["kendoProgressBar"], { "label": { "alias": "label"; "required": false; }; "progressCssStyle": { "alias": "progressCssStyle"; "required": false; }; "progressCssClass": { "alias": "progressCssClass"; "required": false; }; "emptyCssStyle": { "alias": "emptyCssStyle"; "required": false; }; "emptyCssClass": { "alias": "emptyCssClass"; "required": false; }; "animation": { "alias": "animation"; "required": false; }; }, { "animationEnd": "animationEnd"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ProgressBarComponent, "kendo-progressbar", ["kendoProgressBar"], { "label": { "alias": "label"; "required": false; }; "progressCssStyle": { "alias": "progressCssStyle"; "required": false; }; "progressCssClass": { "alias": "progressCssClass"; "required": false; }; "emptyCssStyle": { "alias": "emptyCssStyle"; "required": false; }; "emptyCssClass": { "alias": "emptyCssClass"; "required": false; }; "animation": { "alias": "animation"; "required": false; }; "max": { "alias": "max"; "required": false; }; }, { "animationEnd": "animationEnd"; }, never, never, true, never>;
 }
 
 /**
@@ -348,7 +385,8 @@ declare class ChunkProgressBarComponent extends ProgressBarBase {
      *
      * @default 5
      */
-    chunkCount: number;
+    set chunkCount(value: number);
+    get chunkCount(): number;
     /**
      * @hidden
      */
@@ -357,28 +395,40 @@ declare 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: {
+        [key: string]: any;
+    });
+    get progressCssStyle(): {
         [key: string]: any;
     };
     /**
      * 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: string | string[] | Set<string> | {
+    set progressCssClass(value: string | string[] | Set<string> | {
+        [key: string]: string;
+    });
+    get progressCssClass(): string | string[] | Set<string> | {
         [key: string]: string;
     };
     /**
      * 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: {
+        [key: string]: string;
+    });
+    get emptyCssStyle(): {
         [key: string]: string;
     };
     /**
      * 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: string | string[] | Set<string> | {
+    set emptyCssClass(value: string | string[] | Set<string> | {
+        [key: string]: any;
+    });
+    get emptyCssClass(): string | string[] | Set<string> | {
         [key: string]: any;
     };
     /**
@@ -392,6 +442,11 @@ declare class ChunkProgressBarComponent extends ProgressBarBase {
         width: string;
         height: string;
     };
+    private readonly _chunkCount;
+    private readonly _progressCssStyle;
+    private readonly _progressCssClass;
+    private readonly _emptyCssStyle;
+    private readonly _emptyCssClass;
     private _orientationStyles;
     /**
      * @hidden
@@ -478,12 +533,11 @@ interface ProgressColor {
  * @remarks
  * Supported children components are: {@link ProgressBarCustomMessagesComponent}
  */
-declare class CircularProgressBarComponent implements AfterViewInit, OnChanges, OnDestroy {
+declare class CircularProgressBarComponent implements AfterViewInit, OnDestroy {
     private renderer;
-    private cdr;
     private localization;
     private element;
-    private zone;
+    private injector;
     hostClasses: boolean;
     get ariaMinAttribute(): string;
     get ariaMaxAttribute(): string;
@@ -515,13 +569,15 @@ declare class CircularProgressBarComponent implements AfterViewInit, OnChanges,
      *
      * @default false
      */
-    animation: boolean;
+    set animation(value: boolean);
+    get animation(): boolean;
     /**
      * Sets the opacity of the value arc.
      *
      * @default 1
      */
-    opacity: number;
+    set opacity(value: number);
+    get opacity(): number;
     /**
      * Puts the Circular ProgressBar in indeterminate state.
      *
@@ -532,7 +588,8 @@ declare class CircularProgressBarComponent implements AfterViewInit, OnChanges,
     /**
      * Configures the pointer color. You can set it to a single color string or customize it per progress stages.
      */
-    progressColor: string | ProgressColor[];
+    set progressColor(value: string | ProgressColor[]);
+    get progressColor(): string | ProgressColor[];
     /**
      * Fires when the animation that indicates the latest value change completes.
      */
@@ -542,18 +599,29 @@ declare class CircularProgressBarComponent implements AfterViewInit, OnChanges,
     labelElement: ElementRef;
     surface: ElementRef;
     centerTemplate: CircularProgressbarCenterTemplateDirective;
-    centerTemplateContext: CenterTemplateContext;
-    private _indeterminate;
-    private _max;
-    private _min;
-    private _value;
+    /**
+     * @hidden
+     */
+    get centerTemplateContext(): CenterTemplateContext;
     private previousValue;
     private internalValue;
     private rtl;
-    private subscriptions;
-    constructor(renderer: Renderer2, cdr: ChangeDetectorRef, localization: LocalizationService, element: ElementRef, zone: NgZone);
+    private readonly subscriptions;
+    private readonly _value;
+    private readonly _max;
+    private readonly _min;
+    private readonly _animation;
+    private readonly _opacity;
+    private readonly _indeterminate;
+    private readonly _progressColor;
+    private _centerTemplateContext;
+    private _valueEffectInitialized;
+    private readonly valueChangeEffect;
+    private readonly opacityEffect;
+    private _indeterminateEffectInitialized;
+    private readonly indeterminateEffect;
+    constructor(renderer: Renderer2, localization: LocalizationService, element: ElementRef, injector: Injector);
     ngAfterViewInit(): void;
-    ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     /**
      * @hidden

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1783688456,
-  "version": "25.0.0-develop.2",
+  "publishDate": 1783940090,
+  "version": "25.0.0-develop.4",
   "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-progressbar",
-  "version": "25.0.0-develop.2",
+  "version": "25.0.0-develop.4",
   "description": "Kendo UI Angular component starter template",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -19,7 +19,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1783688456,
+      "publishDate": 1783940090,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -29,13 +29,13 @@
     "@angular/core": "20 - 22",
     "@angular/platform-browser": "20 - 22",
     "@progress/kendo-licensing": "^1.11.0",
-    "@progress/kendo-angular-common": "25.0.0-develop.2",
-    "@progress/kendo-angular-l10n": "25.0.0-develop.2",
+    "@progress/kendo-angular-common": "25.0.0-develop.4",
+    "@progress/kendo-angular-l10n": "25.0.0-develop.4",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "25.0.0-develop.2"
+    "@progress/kendo-angular-schematics": "25.0.0-develop.4"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-progressbar.mjs",