fix(progressbar): display progressbar correctly for invalid max value

closes ng-bootstrap#3386
chrstnbrn · Oct 27, 2019 · 52cdc93 · 52cdc93
1 parent 5610abe
commit 52cdc93
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 2 deletions.
diff --git a/src/progressbar/progressbar.spec.ts b/src/progressbar/progressbar.spec.ts
@@ -58,6 +58,48 @@ describe('ngb-progressbar', () => {
       expect(progressCmp.getPercentValue()).toBe(20);
     });
 
+    it('should calculate the percentage (custom max size of null)', () => {
+      progressCmp.max = null;
+
+      progressCmp.value = 25;
+      expect(progressCmp.getPercentValue()).toBe(25);
+    });
+
+    it('should calculate the percentage (custom max size of undefined)', () => {
+      progressCmp.max = undefined;
+
+      progressCmp.value = 25;
+      expect(progressCmp.getPercentValue()).toBe(25);
+    });
+
+    it('should calculate the percentage (custom max size of zero)', () => {
+      progressCmp.max = 0;
+
+      progressCmp.value = 25;
+      expect(progressCmp.getPercentValue()).toBe(25);
+    });
+
+    it('should calculate the percentage (custom negative max size)', () => {
+      progressCmp.max = -10;
+
+      progressCmp.value = 25;
+      expect(progressCmp.getPercentValue()).toBe(25);
+    });
+
+    it('should calculate the percentage (custom max size of positive infinity)', () => {
+      progressCmp.max = Number.POSITIVE_INFINITY;
+
+      progressCmp.value = 25;
+      expect(progressCmp.getPercentValue()).toBe(25);
+    });
+
+    it('should calculate the percentage (custom max size of negative infinity)', () => {
+      progressCmp.max = Number.NEGATIVE_INFINITY;
+
+      progressCmp.value = 25;
+      expect(progressCmp.getPercentValue()).toBe(25);
+    });
+
     it('should set the value to 0 for negative numbers', () => {
       progressCmp.value = -20;
       expect(progressCmp.getValue()).toBe(0);

diff --git a/src/progressbar/progressbar.ts b/src/progressbar/progressbar.ts
@@ -1,5 +1,5 @@
 import {Component, Input, ChangeDetectionStrategy} from '@angular/core';
-import {getValueInRange} from '../util/util';
+import {getValueInRange, isNumber} from '../util/util';
 import {NgbProgressbarConfig} from './progressbar-config';
 
 /**
@@ -19,10 +19,17 @@ import {NgbProgressbarConfig} from './progressbar-config';
   `
 })
 export class NgbProgressbar {
+  private _max: number;
+
   /**
    * The maximal value to be displayed in the progress bar.
    */
-  @Input() max: number;
+  @Input()
+  set max(max: number) {
+    this._max = !isNumber(max) || max <= 0 ? 100 : max;
+  }
+
+  get max(): number { return this._max; }
 
   /**
    * If `true`, the stripes on the progress bar are animated.