From 52cdc935c7db03faf48be3d302f0d69b36135d90 Mon Sep 17 00:00:00 2001 From: Christina Braun <11138584+chrstnbrn@users.noreply.github.com> Date: Fri, 4 Oct 2019 16:38:46 +0200 Subject: [PATCH 1/2] fix(progressbar): display progressbar correctly for invalid max value closes #3386 --- src/progressbar/progressbar.spec.ts | 42 +++++++++++++++++++++++++++++ src/progressbar/progressbar.ts | 11 ++++++-- 2 files changed, 51 insertions(+), 2 deletions(-) diff --git a/src/progressbar/progressbar.spec.ts b/src/progressbar/progressbar.spec.ts index 80d7317e53..02412fdfb6 100644 --- 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 index 2142074518..9d3aa69a22 100644 --- 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. From 7ccc031177b519eb7b0a2459aa90ea6c6c539e78 Mon Sep 17 00:00:00 2001 From: Christina Braun <11138584+chrstnbrn@users.noreply.github.com> Date: Sat, 5 Oct 2019 15:14:17 +0200 Subject: [PATCH 2/2] docs(progressbar): document that max should be a positive number --- src/progressbar/progressbar.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/progressbar/progressbar.ts b/src/progressbar/progressbar.ts index 9d3aa69a22..4961b00e72 100644 --- a/src/progressbar/progressbar.ts +++ b/src/progressbar/progressbar.ts @@ -23,6 +23,8 @@ export class NgbProgressbar { /** * The maximal value to be displayed in the progress bar. + * + * Should be a positive number. Will default to 100 otherwise. */ @Input() set max(max: number) {