@progress/kendo-angular-progressbar 25.1.0-develop.2 → 25.1.0-develop.3

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

@@ -5,7 +5,7 @@
 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, signal, computed, Input, HostBinding, ChangeDetectionStrategy, Component, Directive, forwardRef, EventEmitter, effect, untracked, ViewChild, Output, afterNextRender, ContentChild, NgModule } from '@angular/core';
+import { isDevMode, signal, Input, HostBinding, ChangeDetectionStrategy, Component, Directive, forwardRef, EventEmitter, ViewChild, Output, effect, untracked, afterNextRender, ContentChild, NgModule } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
 import { hasObservers, isDocumentAvailable, ResizeSensorComponent, ResizeBatchService } from '@progress/kendo-angular-common';
 import { NgStyle, NgClass, NgTemplateOutlet } from '@angular/common';
@@ -19,8 +19,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1786694073,
-    version: '25.1.0-develop.2',
+    publishDate: 1787036772,
+    version: '25.1.0-develop.3',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -280,10 +280,15 @@ class ProgressBarBase {
     }
     direction;
     localizationChangeSubscription;
-    previousValue = 0;
-    /**
-     * @hidden
-     */
+    set previousValue(value) {
+        this._previousValue.set(value);
+    }
+    get previousValue() {
+        return this._previousValue();
+    }
+    set displayValue(value) {
+        this._displayValue.set(value);
+    }
     get displayValue() {
         return this._displayValue();
     }
@@ -299,6 +304,27 @@ class ProgressBarBase {
             this.direction = rtl ? 'rtl' : 'ltr';
         });
     }
+    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);
+        }
+    }
     ngAfterViewInit() {
         const elem = this.elem.nativeElement;
         const label = this.localization.get('progressBarLabel');
@@ -316,9 +342,10 @@ class ProgressBarBase {
     _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" }] : []));
+    _displayValue = signal(0, ...(ngDevMode ? [{ debugName: "_displayValue" }] : []));
+    _previousValue = signal(0, ...(ngDevMode ? [{ debugName: "_previousValue" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", 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.27", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", 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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ProgressBarBase, decorators: [{
             type: Component,
@@ -518,7 +545,7 @@ class ProgressBarComponent extends ProgressBarBase {
      * Defaults to `100`.
      */
     set max(v) {
-        this._previousMax = this.max;
+        this._previousMax.set(this.max);
         super.max = v;
     }
     get max() {
@@ -580,40 +607,46 @@ class ProgressBarComponent extends ProgressBarBase {
     get formattedLabelValue() {
         return formatValue(this.displayValue, this.min, this.max, this.label);
     }
+    /**
+     * @hidden
+     */
+    get statusWidth() {
+        return this.isAnimationInProgress && this.animatedStatusWidth != null ? this.animatedStatusWidth : super.statusWidth;
+    }
+    /**
+     * @hidden
+     */
+    get statusHeight() {
+        return this.isAnimationInProgress && this.animatedStatusHeight != null ? this.animatedStatusHeight : super.statusHeight;
+    }
+    /**
+     * @hidden
+     */
+    get statusWrapperWidth() {
+        return this.isAnimationInProgress && this.animatedStatusWrapperWidth != null ? this.animatedStatusWrapperWidth : super.statusWrapperWidth;
+    }
+    /**
+     * @hidden
+     */
+    get statusWrapperHeight() {
+        return this.isAnimationInProgress && this.animatedStatusWrapperHeight != null ? this.animatedStatusWrapperHeight : super.statusWrapperHeight;
+    }
     progressStatusElement;
     progressStatusWrapperElement;
     animationFrame;
     cancelCurrentAnimation;
     isAnimationInProgress;
-    _previousMax;
-    _valueEffectInitialized = false;
+    animatedStatusWidth = null;
+    animatedStatusHeight = null;
+    animatedStatusWrapperWidth = null;
+    animatedStatusWrapperHeight = null;
+    _previousMax = signal(null, ...(ngDevMode ? [{ debugName: "_previousMax" }] : []));
     _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
      */
@@ -624,6 +657,19 @@ class ProgressBarComponent extends ProgressBarBase {
         this.renderer = renderer;
         this.zone = zone;
     }
+    /**
+     * @hidden
+     */
+    ngOnChanges(changes) {
+        super.ngOnChanges(changes);
+        this._previousMax.set(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
      */
@@ -637,10 +683,12 @@ class ProgressBarComponent extends ProgressBarBase {
      * @hidden
      */
     startAnimation(previousValue) {
-        this.isAnimationInProgress = true;
         const element = this.progressStatusElement.nativeElement;
         const wrapperElement = this.progressStatusWrapperElement.nativeElement;
         const animationOptions = this.getAnimationOptions(previousValue);
+        this.animatedStatusWidth = this.animatedStatusHeight = null;
+        this.animatedStatusWrapperWidth = this.animatedStatusWrapperHeight = null;
+        this.isAnimationInProgress = true;
         this.zone.runOutsideAngular(() => {
             if (this.animationFrame) {
                 cancelAnimationFrame(this.animationFrame);
@@ -694,13 +742,16 @@ 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';
         const startTime = new Date().getTime();
         const startSize = isHorizontal ? previousStatusWidth : previousStatusHeight;
-        const deltaSize = isHorizontal ? this.statusWidth - previousStatusWidth : this.statusHeight - previousStatusHeight;
+        const targetRatio = calculateRatio(this.min, this.max, this.displayValue);
+        const targetStatusWidth = isHorizontal ? targetRatio * 100 : 100;
+        const targetStatusHeight = !isHorizontal ? targetRatio * 100 : 100;
+        const deltaSize = isHorizontal ? targetStatusWidth - previousStatusWidth : targetStatusHeight - previousStatusHeight;
         const duration = this.animationDuration * Math.abs((deltaSize / 100));
         return {
             property,
@@ -711,6 +762,14 @@ class ProgressBarComponent extends ProgressBarBase {
         };
     }
     renderValueChange(element, wrapperElement, property, size, wrapperSize) {
+        if (property === 'width') {
+            this.animatedStatusWidth = size;
+            this.animatedStatusWrapperWidth = wrapperSize;
+        }
+        else {
+            this.animatedStatusHeight = size;
+            this.animatedStatusWrapperHeight = wrapperSize;
+        }
         this.renderer.setStyle(element, property, size + '%');
         this.renderer.setStyle(wrapperElement, property, wrapperSize + '%');
     }
@@ -731,7 +790,7 @@ class ProgressBarComponent extends ProgressBarBase {
                 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, ngImport: i0, template: `
+        ], 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: `
         <ng-container kendoProgressBarLocalizedMessages
           i18n-progressBarLabel="kendo.progressbar.progressBarLabel|The aria-label attribute for the ProgressBar component."
           progressBarLabel="Progressbar"

package/index.d.ts

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { LocalizationService, ComponentMessages } from '@progress/kendo-angular-l10n';
 import * as i0 from '@angular/core';
-import { AfterViewInit, OnDestroy, ElementRef, Renderer2, EventEmitter, NgZone, TemplateRef, Injector } from '@angular/core';
+import { AfterViewInit, OnDestroy, ElementRef, Renderer2, SimpleChanges, OnChanges, EventEmitter, NgZone, TemplateRef, Injector } from '@angular/core';
 import { Subscription } from 'rxjs';
 
 /**
@@ -114,15 +114,15 @@ declare abstract class ProgressBarBase implements AfterViewInit, OnDestroy {
     get indeterminate(): boolean;
     protected direction: string;
     protected localizationChangeSubscription: Subscription;
-    protected previousValue: number;
-    /**
-     * @hidden
-     */
+    protected set previousValue(value: number);
+    protected get previousValue(): number;
+    protected set displayValue(value: number);
     protected get displayValue(): number;
     /**
      * @hidden
      */
     constructor(elem: ElementRef, renderer: Renderer2, localization: LocalizationService);
+    ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     private readonly _max;
@@ -133,6 +133,7 @@ declare abstract class ProgressBarBase implements AfterViewInit, OnDestroy {
     private readonly _reverse;
     private readonly _indeterminate;
     private readonly _displayValue;
+    private _previousValue;
     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>;
 }
@@ -217,7 +218,7 @@ interface ProgressBarAnimation {
  * @remarks
  * Supported children components are: {@link ProgressBarCustomMessagesComponent}
  */
-declare class ProgressBarComponent extends ProgressBarBase {
+declare class ProgressBarComponent extends ProgressBarBase implements OnChanges, OnDestroy {
     localization: LocalizationService;
     elem: ElementRef;
     renderer: Renderer2;
@@ -312,25 +313,46 @@ declare class ProgressBarComponent extends ProgressBarBase {
      * @hidden
      */
     get formattedLabelValue(): string;
+    /**
+     * @hidden
+     */
+    get statusWidth(): number;
+    /**
+     * @hidden
+     */
+    get statusHeight(): number;
+    /**
+     * @hidden
+     */
+    get statusWrapperWidth(): number;
+    /**
+     * @hidden
+     */
+    get statusWrapperHeight(): number;
     private progressStatusElement;
     private progressStatusWrapperElement;
     private animationFrame;
     private cancelCurrentAnimation;
     private isAnimationInProgress;
+    private animatedStatusWidth;
+    private animatedStatusHeight;
+    private animatedStatusWrapperWidth;
+    private animatedStatusWrapperHeight;
     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
      */

package/package-metadata.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-progressbar",
-  "version": "25.1.0-develop.2",
+  "version": "25.1.0-develop.3",
   "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": 1786694073,
+      "publishDate": 1787036772,
       "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.1.0-develop.2",
-    "@progress/kendo-angular-l10n": "25.1.0-develop.2",
+    "@progress/kendo-angular-common": "25.1.0-develop.3",
+    "@progress/kendo-angular-l10n": "25.1.0-develop.3",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "25.1.0-develop.2"
+    "@progress/kendo-angular-schematics": "25.1.0-develop.3"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-progressbar.mjs",