refactor(progress-bar): use color mixin (#9473)

Author: rafaelss95

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

@@ -6,10 +6,25 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, ChangeDetectionStrategy, Input, ViewEncapsulation} from '@angular/core';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ElementRef,
+  Input,
+  ViewEncapsulation
+} from '@angular/core';
+import {CanColor, mixinColor} from '@angular/material/core';
 
 // TODO(josephperrott): Benchpress tests.
-// TODO(josephperrott): Add ARIA attributes for progressbar "for".
+// TODO(josephperrott): Add ARIA attributes for progress bar "for".
+
+// Boilerplate for applying mixins to MatProgressBar.
+/** @docs-private */
+export class MatProgressBarBase {
+  constructor(public _elementRef: ElementRef) { }
+}
+
+export const _MatProgressBarMixinBase = mixinColor(MatProgressBarBase, 'primary');
 
 
 /**
@@ -25,34 +40,32 @@ import {Component, ChangeDetectionStrategy, Input, ViewEncapsulation} from '@ang
     'aria-valuemax': '100',
     '[attr.aria-valuenow]': 'value',
     '[attr.mode]': 'mode',
-    '[class.mat-primary]': 'color == "primary"',
-    '[class.mat-accent]': 'color == "accent"',
-    '[class.mat-warn]': 'color == "warn"',
     'class': 'mat-progress-bar',
   },
+  inputs: ['color'],
   templateUrl: 'progress-bar.html',
   styleUrls: ['progress-bar.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
 })
-export class MatProgressBar {
-  /** Color of the progress bar. */
-  @Input() color: 'primary' | 'accent' | 'warn' = 'primary';
+export class MatProgressBar extends _MatProgressBarMixinBase implements CanColor {
 
-  private _value: number = 0;
+  constructor(public _elementRef: ElementRef) {
+    super(_elementRef);
+  }
 
-  /** Value of the progressbar. Defaults to zero. Mirrored to aria-valuenow. */
+  /** Value of the progress bar. Defaults to zero. Mirrored to aria-valuenow. */
   @Input()
   get value(): number { return this._value; }
   set value(v: number) { this._value = clamp(v || 0); }
-
-  private _bufferValue: number = 0;
+  private _value: number = 0;
 
   /** Buffer value of the progress bar. Defaults to zero. */
   @Input()
   get bufferValue(): number { return this._bufferValue; }
   set bufferValue(v: number) { this._bufferValue = clamp(v || 0); }
+  private _bufferValue: number = 0;
 
   /**
    * Mode of the progress bar.
@@ -65,17 +78,17 @@ export class MatProgressBar {
 
   /** Gets the current transform value for the progress bar's primary indicator. */
   _primaryTransform() {
-    let scale = this.value / 100;
+    const scale = this.value / 100;
     return {transform: `scaleX(${scale})`};
   }
 
   /**
-   * Gets the current transform value for the progress bar's buffer indicator.  Only used if the
+   * Gets the current transform value for the progress bar's buffer indicator. Only used if the
    * progress mode is set to buffer, otherwise returns an undefined, causing no transformation.
    */
   _bufferTransform() {
-    if (this.mode == 'buffer') {
-      let scale = this.bufferValue / 100;
+    if (this.mode === 'buffer') {
+      const scale = this.bufferValue / 100;
       return {transform: `scaleX(${scale})`};
     }
   }