fix(progress-spinner): coerce string values

Coerces any string values that are passed to `value`, `diameter` and `strokeWidth` to numbers.

Fixes #7790.

Author: crisbeto

src/lib/progress-spinner/progress-spinner.spec.ts

@@ -1,7 +1,7 @@
 import {TestBed, async} from '@angular/core/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
-import {MatProgressSpinnerModule} from './index';
+import {MatProgressSpinnerModule, MatProgressSpinner} from './index';
 
 
 describe('MatProgressSpinner', () => {
@@ -17,6 +17,7 @@ describe('MatProgressSpinner', () => {
         ProgressSpinnerCustomStrokeWidth,
         ProgressSpinnerCustomDiameter,
         SpinnerWithColor,
+        ProgressSpinnerWithStringValues,
       ],
     }).compileComponents();
   }));
@@ -174,6 +175,24 @@ describe('MatProgressSpinner', () => {
     expect(fixture.nativeElement.querySelector('svg').getAttribute('focusable')).toBe('false');
   });
 
+  it('should handle the number inputs being passed in as strings', () => {
+    const fixture = TestBed.createComponent(ProgressSpinnerWithStringValues);
+    const spinner = fixture.debugElement.query(By.directive(MatProgressSpinner));
+    const svgElement = spinner.nativeElement.querySelector('svg');
+
+    fixture.detectChanges();
+
+    expect(spinner.componentInstance.diameter).toBe(37);
+    expect(spinner.componentInstance.strokeWidth).toBe(11);
+    expect(spinner.componentInstance.value).toBe(25);
+
+    expect(spinner.nativeElement.style.width).toBe('38px');
+    expect(spinner.nativeElement.style.height).toBe('38px');
+    expect(svgElement.style.width).toBe('38px');
+    expect(svgElement.style.height).toBe('38px');
+    expect(svgElement.getAttribute('viewBox')).toBe('0 0 38 38');
+  });
+
 });
 
 
@@ -201,3 +220,10 @@ class SpinnerWithColor { color: string = 'primary'; }
 
 @Component({template: `<mat-progress-spinner value="50" [color]="color"></mat-progress-spinner>`})
 class ProgressSpinnerWithColor { color: string = 'primary'; }
+
+@Component({
+  template: `
+    <mat-progress-spinner value="25" diameter="37" strokeWidth="11"></mat-progress-spinner>
+  `
+})
+class ProgressSpinnerWithStringValues { }

src/lib/progress-spinner/progress-spinner.ts

@@ -21,10 +21,23 @@ import {
 import {CanColor, mixinColor} from '@angular/material/core';
 import {Platform} from '@angular/cdk/platform';
 import {DOCUMENT} from '@angular/common';
+import {coerceNumberProperty} from '@angular/cdk/coercion';
 
 /** Possible mode for a progress spinner. */
 export type ProgressSpinnerMode = 'determinate' | 'indeterminate';
 
+/**
+ * Base reference size of the spinner.
+ * @docs-private
+ */
+const BASE_SIZE = 100;
+
+/**
+ * Base reference stroke width of the spinner.
+ * @docs-private
+ */
+const BASE_STROKE_WIDTH = 10;
+
 // Boilerplate for applying mixins to MatProgressSpinner.
 /** @docs-private */
 export class MatProgressSpinnerBase {
@@ -83,16 +96,15 @@ const INDETERMINATE_ANIMATION_TEMPLATE = `
 export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements CanColor,
   OnChanges {
 
-  private _value: number = 0;
-  private readonly _baseSize = 100;
-  private readonly _baseStrokeWidth = 10;
+  private _value = 0;
+  private _strokeWidth = 10;
   private _fallbackAnimation = false;
 
   /** The width and height of the host element. Will grow with stroke width. **/
-  _elementSize = this._baseSize;
+  _elementSize = BASE_SIZE;
 
   /** Tracks diameters of existing instances to de-dupe generated styles (default d = 100) */
-  private static diameters = new Set<number>([100]);
+  private static diameters = new Set<number>([BASE_SIZE]);
 
   /**
    * Used for storing all of the generated keyframe animations.
@@ -105,14 +117,23 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
   get diameter(): number {
     return this._diameter;
   }
-
   set diameter(size: number) {
-    this._setDiameterAndInitStyles(size);
+    this._diameter = coerceNumberProperty(size);
+
+    if (!this._fallbackAnimation && !MatProgressSpinner.diameters.has(this._diameter)) {
+      this._attachStyleNode();
+    }
   }
-  _diameter = this._baseSize;
+  private _diameter = BASE_SIZE;
 
   /** Stroke width of the progress spinner. */
-  @Input() strokeWidth: number = 10;
+  @Input()
+  get strokeWidth(): number {
+    return this._strokeWidth;
+  }
+  set strokeWidth(value: number) {
+    this._strokeWidth = coerceNumberProperty(value);
+  }
 
   /** Mode of the progress circle */
   @Input() mode: ProgressSpinnerMode = 'determinate';
@@ -124,7 +145,7 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
   }
   set value(newValue: number) {
     if (newValue != null && this.mode === 'determinate') {
-      this._value = Math.max(0, Math.min(100, newValue));
+      this._value = Math.max(0, Math.min(100, coerceNumberProperty(newValue)));
     }
   }
 
@@ -144,14 +165,13 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes.strokeWidth || changes.diameter) {
-      this._elementSize =
-          this._diameter + Math.max(this.strokeWidth - this._baseStrokeWidth, 0);
+      this._elementSize = this._diameter + Math.max(this.strokeWidth - BASE_STROKE_WIDTH, 0);
     }
   }
 
   /** The radius of the spinner, adjusted for stroke width. */
   get _circleRadius() {
-    return (this.diameter - this._baseStrokeWidth) / 2;
+    return (this.diameter - BASE_STROKE_WIDTH) / 2;
   }
 
   /** The view box of the spinner's svg element. */
@@ -184,14 +204,6 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
     return this.strokeWidth / this._elementSize * 100;
   }
 
-  /** Sets the diameter and adds diameter-specific styles if necessary. */
-  private _setDiameterAndInitStyles(size: number): void {
-    this._diameter = size;
-    if (!MatProgressSpinner.diameters.has(this.diameter) && !this._fallbackAnimation) {
-      this._attachStyleNode();
-    }
-  }
-
   /** Dynamically generates a style tag containing the correct animation for this diameter. */
   private _attachStyleNode(): void {
     let styleTag = MatProgressSpinner.styleTag;