fix(progress-circle, progress-bar): bind color via [color] rather than [attr.color] (#2299)

* fix(progress-circle, progress-bar): bind color via [color] rather than
[attr.color]

* fix typo

Author: mmalerba

src/lib/progress-bar/_progress-bar-theme.scss

@@ -15,7 +15,11 @@
     background-color: md-color($primary, 100);
   }
 
-  md-progress-bar[color='accent'] {
+  .md-progress-bar-fill::after {
+    background-color: md-color($primary, 600);
+  }
+
+  md-progress-bar.md-accent {
     .md-progress-bar-background {
       background: #{_md-progress-bar-buffer($accent, 100)};
     }
@@ -28,7 +32,7 @@
     }
   }
 
-  md-progress-bar[color='warn'] {
+  md-progress-bar.md-warn {
     .md-progress-bar-background {
       background: #{_md-progress-bar-buffer($warn, 100)};
     }
@@ -40,10 +44,6 @@
       background-color: md-color($warn, 600);
     }
   }
-
-  .md-progress-bar-fill::after {
-    background-color: md-color($primary, 600);
-  }
 }
 
 // TODO(josephperrott): Find better way to inline svgs.

src/lib/progress-bar/progress-bar.ts

@@ -23,6 +23,9 @@ import {DefaultStyleCompatibilityModeModule} from '../core/compatibility/default
     'role': 'progressbar',
     'aria-valuemin': '0',
     'aria-valuemax': '100',
+    '[class.md-primary]': 'color == "primary"',
+    '[class.md-accent]': 'color == "accent"',
+    '[class.md-warn]': 'color == "warn"',
   },
   templateUrl: 'progress-bar.html',
   styleUrls: ['progress-bar.css'],
@@ -32,6 +35,8 @@ export class MdProgressBar {
   /** Value of the progressbar. Defaults to zero. Mirrored to aria-valuenow. */
   private _value: number = 0;
 
+  @Input() color: 'primary' | 'accent' | 'warn' = 'primary';
+
   @Input()
   @HostBinding('attr.aria-valuenow')
   get value() {

src/lib/progress-circle/_progress-circle-theme.scss

@@ -12,11 +12,11 @@
       stroke: md-color($primary, 600);
     }
 
-    &[color='accent'] path {
+    &.md-accent path {
       stroke: md-color($accent, 600);
     }
 
-    &[color='warn'] path {
+    &.md-warn path {
       stroke: md-color($warn, 600);
     }
   }

src/lib/progress-circle/progress-circle.ts

@@ -44,6 +44,9 @@ type EasingFn = (currentTime: number, startValue: number,
     'role': 'progressbar',
     '[attr.aria-valuemin]': '_ariaValueMin',
     '[attr.aria-valuemax]': '_ariaValueMax',
+    '[class.md-primary]': 'color == "primary"',
+    '[class.md-accent]': 'color == "accent"',
+    '[class.md-warn]': 'color == "warn"',
   },
   templateUrl: 'progress-circle.html',
   styleUrls: ['progress-circle.css'],
@@ -130,6 +133,8 @@ export class MdProgressCircle implements OnDestroy {
   }
   private _mode: ProgressCircleMode = 'determinate';
 
+  @Input() color: 'primary' | 'accent' | 'warn' = 'primary';
+
   constructor(
     private _changeDetectorRef: ChangeDetectorRef,
     private _ngZone: NgZone,