docs: test colors for progress components in demo-app (#2841)

* Refactors the progress-bar and progress-spinner demos to have a dynamic `color` binding in the demo.
  This is useful to test if the colors are properly applied to the progress-bar and `progress-spinner` components.

* Also clamps the values in the `progress-bar` and `progress-spinner` demos to make the demo feel better.

src/demo-app/progress-bar/progress-bar-demo.html

@@ -1,37 +1,45 @@
+<md-button-toggle-group class="demo-progress-bar-controls" [(ngModel)]="color">
+  <md-button-toggle value="primary">Primary Color</md-button-toggle>
+  <md-button-toggle value="accent">Accent Color</md-button-toggle>
+  <md-button-toggle value="warn">Warn Color</md-button-toggle>
+</md-button-toggle-group>
+
 <h1>Determinate</h1>
-<div class="demo-progress-bar-container">
-  <md-progress-bar mode="determinate"
-                   [value]="determinateProgressValue"
-                   color="primary"
-                   class="demo-progress-bar-margins"></md-progress-bar>
+
+<div class="demo-progress-bar-controls">
+  <span>Value: {{determinateProgressValue}}</span>
+  <button md-raised-button (click)="stepDeterminateProgressVal(10)">Increase</button>
+  <button md-raised-button (click)="stepDeterminateProgressVal(-10)">Decrease</button>
 </div>
-<span>Value: {{determinateProgressValue}}</span>
-<button md-raised-button (click)="stepDeterminateProgressVal(10)">Increase</button>
-<button md-raised-button (click)="stepDeterminateProgressVal(-10)">Decrease</button>
+
+<div class="demo-progress-bar-container">
+  <md-progress-bar mode="determinate" [value]="determinateProgressValue" [color]="color">
+  </md-progress-bar>
+</div>
+
 <h1>Buffer</h1>
-<div class="demo-progress-bar-container">
-  <md-progress-bar [value]="bufferProgressValue"
-                   [bufferValue]="bufferBufferValue"
-                   mode="buffer"
-                   color="warn"
-                   class="demo-progress-bar-margins"></md-progress-bar>
+
+<div class="demo-progress-bar-controls">
+  <span>Value: {{bufferProgressValue}}</span>
+  <button md-raised-button (click)="stepBufferProgressVal(10)">Increase</button>
+  <button md-raised-button (click)="stepBufferProgressVal(-10)">Decrease</button>
+  <span class="demo-progress-bar-spacer"></span>
+  <span>Buffer Value: {{bufferBufferValue}}</span>
+  <button md-raised-button (click)="stepBufferBufferVal(10)">Increase</button>
+  <button md-raised-button (click)="stepBufferBufferVal(-10)">Decrease</button>
+</div>
+
+<div class="demo-progress-bar-container">
+  <md-progress-bar [value]="bufferProgressValue" [bufferValue]="bufferBufferValue" mode="buffer"
+                   [color]="color"></md-progress-bar>
 </div>
-<span>Value: {{bufferProgressValue}}</span>
-<button md-raised-button (click)="stepBufferProgressVal(10)">Increase</button>
-<button md-raised-button (click)="stepBufferProgressVal(-10)">Decrease</button>
-<span class="demo-progress-bar-spacer"></span>
-<span>Buffer Value: {{bufferBufferValue}}</span>
-<button md-raised-button (click)="stepBufferBufferVal(10)">Increase</button>
-<button md-raised-button (click)="stepBufferBufferVal(-10)">Decrease</button>
 
 <h1>Indeterminate</h1>
 <div class="demo-progress-bar-container">
-  <md-progress-bar mode="indeterminate"
-                   class="demo-progress-bar-margins"></md-progress-bar>
+  <md-progress-bar mode="indeterminate" [color]="color"></md-progress-bar>
 </div>
 
 <h1>Query</h1>
 <div class="demo-progress-bar-container">
-  <md-progress-bar mode="query"
-                   class="demo-progress-bar-margins"></md-progress-bar>
+  <md-progress-bar mode="query" [color]="color"></md-progress-bar>
 </div>

src/demo-app/progress-bar/progress-bar-demo.scss

@@ -1,12 +1,16 @@
 .demo-progress-bar-container {
   width: 100%;
-}
 
-.demo-progress-bar-margins {
-  margin: 20px 0;
+  md-progress-bar {
+    margin: 20px 0;
+  }
 }
 
 .demo-progress-bar-spacer {
   display: inline-block;
   width: 50px;
+}
+
+.demo-progress-bar-controls {
+  margin: 10px 0;
 }

src/demo-app/progress-bar/progress-bar-demo.ts

@@ -10,19 +10,24 @@ import {Component} from '@angular/core';
   styleUrls: ['progress-bar-demo.css'],
 })
 export class ProgressBarDemo {
+  color: string = 'primary';
   determinateProgressValue: number = 30;
   bufferProgressValue: number = 30;
   bufferBufferValue: number = 40;
 
   stepDeterminateProgressVal(val: number) {
-    this.determinateProgressValue += val;
+    this.determinateProgressValue = this.clampValue(val + this.determinateProgressValue);
   }
 
   stepBufferProgressVal(val: number) {
-    this.bufferProgressValue += val;
+    this.bufferProgressValue = this.clampValue(val + this.bufferProgressValue);
   }
 
   stepBufferBufferVal(val: number) {
-    this.bufferBufferValue += val;
+    this.bufferBufferValue = this.clampValue(val + this.bufferBufferValue);
+  }
+
+  private clampValue(value: number) {
+    return Math.max(0, Math.min(100, value));
   }
 }

src/demo-app/progress-spinner/progress-spinner-demo.html

@@ -1,21 +1,26 @@
 <h1>Determinate</h1>
-<div class="demo-progress-spinner">
-  <md-progress-spinner mode="determinate"
-                      [value]="progressValue"
-                      class="mat-primary"></md-progress-spinner>
-  <md-progress-spinner [value]="progressValue"
-                      color="accent"></md-progress-spinner>
+
+<div class="demo-progress-spinner-controls">
+  <p>Value: {{progressValue}}</p>
+  <button md-raised-button (click)="step(10)">Increase</button>
+  <button md-raised-button (click)="step(-10)">Decrease</button>
 </div>
-<span>Value: {{progressValue}}</span>
-<button md-raised-button (click)="step(10)">Increase</button>
-<button md-raised-button (click)="step(-10)">Decrease</button>
-
 
+<div class="demo-progress-spinner">
+  <md-progress-spinner mode="determinate" [value]="progressValue" color="primary"></md-progress-spinner>
+  <md-progress-spinner [value]="progressValue" color="accent"></md-progress-spinner>
+</div>
 
 <h1>Indeterminate</h1>
+
+<md-button-toggle-group class="demo-progress-spinner-controls" [(ngModel)]="color">
+  <md-button-toggle value="primary">Primary Color</md-button-toggle>
+  <md-button-toggle value="accent">Accent Color</md-button-toggle>
+  <md-button-toggle value="warn">Warn Color</md-button-toggle>
+</md-button-toggle-group>
+
 <div class="demo-progress-spinner">
-  <md-progress-spinner mode="indeterminate"></md-progress-spinner>
-  <md-progress-spinner mode="indeterminate"
-                      color="accent"></md-progress-spinner>
-  <md-spinner></md-spinner>
+  <md-progress-spinner mode="indeterminate" [color]="color"></md-progress-spinner>
+  <md-progress-spinner mode="indeterminate" [color]="color"></md-progress-spinner>
+  <md-spinner [color]="color"></md-spinner>
 </div>

src/demo-app/progress-spinner/progress-spinner-demo.scss

@@ -7,3 +7,7 @@
   }
 
 }
+
+.demo-progress-spinner-controls {
+  margin: 10px 0;
+}

src/demo-app/progress-spinner/progress-spinner-demo.ts

@@ -9,9 +9,10 @@ import {Component} from '@angular/core';
 })
 export class ProgressSpinnerDemo {
   progressValue: number = 40;
+  color: string = 'primary';
 
   step(val: number) {
-    this.progressValue += val;
+    this.progressValue = Math.max(0, Math.min(100, val + this.progressValue));
   }
 
 }