fix(kit): ProgressCircle should show empty circle if max=0 (#5050)

taiga-family · Aug 8, 2023 · aa2f133 · aa2f133
1 parent d54bb9e
commit aa2f133
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/projects/demo/src/modules/components/progress-circle/progress-circle.component.ts b/projects/demo/src/modules/components/progress-circle/progress-circle.component.ts
@@ -2,11 +2,13 @@ import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiSizeS, TuiSizeXL} from '@taiga-ui/core';
+import {tuiInputNumberOptionsProvider} from '@taiga-ui/kit';
 
 @Component({
     selector: 'example-tui-progress-circle',
     templateUrl: './progress-circle.template.html',
     styleUrls: ['./progress-circle.style.less'],
+    providers: [tuiInputNumberOptionsProvider({min: 0})],
     changeDetection,
 })
 export class ExampleProgressCircleComponent {

diff --git a/projects/kit/components/progress/progress-circle/progress-circle.component.ts b/projects/kit/components/progress/progress-circle/progress-circle.component.ts
@@ -37,9 +37,11 @@ export class TuiProgressCircleComponent {
     @HostBinding('attr.data-size')
     size: TuiSizeS | TuiSizeXL = 'm';
 
-    @HostBinding('style.--progress-percentage')
-    get progressPercentage(): number {
-        return this.value / this.max;
+    @HostBinding('style.--progress-ratio')
+    get progressRatio(): number {
+        const ratio = this.value / this.max;
+
+        return Number.isFinite(ratio) ? ratio : 0;
     }
 
     animationDelay$ = of(true).pipe(delay(0));

diff --git a/projects/kit/components/progress/progress-circle/progress-circle.style.less b/projects/kit/components/progress/progress-circle/progress-circle.style.less
@@ -48,7 +48,7 @@
 
         &_filled {
             transition: stroke-dashoffset var(--tui-duration) linear;
-            stroke-dashoffset: calc(@circumference - var(--progress-percentage) * @circumference);
+            stroke-dashoffset: calc(@circumference - var(--progress-ratio) * @circumference);
         }
     }
 }