Address comments

Author: devversion

src/lib/button/button.ts

@@ -11,7 +11,7 @@ import {
 } from '@angular/core';
 import {coerceBooleanProperty, FocusOriginMonitor, Platform} from '../core';
 import {mixinDisabled, CanDisable} from '../core/common-behaviors/disabled';
-import {IsColorable, mixinColor} from '../core/common-behaviors/color';
+import {CanColor, mixinColor} from '../core/common-behaviors/color';
 
 
 // TODO(kara): Convert attribute selectors to classes when attr maps become available
@@ -73,7 +73,8 @@ export class MdMiniFabCssMatStyler {}
 
 // Boilerplate for applying mixins to MdButton.
 export class MdButtonBase {
-  constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
+  _renderer: Renderer2;
+  _elementRef: ElementRef;
 }
 export const _MdButtonMixinBase = mixinColor(mixinDisabled(MdButtonBase), true);
 
@@ -96,7 +97,7 @@ export const _MdButtonMixinBase = mixinColor(mixinDisabled(MdButtonBase), true);
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MdButton extends _MdButtonMixinBase implements OnDestroy, CanDisable, IsColorable {
+export class MdButton extends _MdButtonMixinBase implements OnDestroy, CanDisable, CanColor {
   /** Whether the button is round. */
   _isRoundButton: boolean = this._hasAttributeWithPrefix('fab', 'mini-fab');
 
@@ -111,11 +112,11 @@ export class MdButton extends _MdButtonMixinBase implements OnDestroy, CanDisabl
   get disableRipple() { return this._disableRipple; }
   set disableRipple(v) { this._disableRipple = coerceBooleanProperty(v); }
 
-  constructor(private _platform: Platform,
-              private _focusOriginMonitor: FocusOriginMonitor,
-              renderer: Renderer2,
-              elementRef: ElementRef) {
-    super(renderer, elementRef);
+  constructor(public _renderer: Renderer2,
+              public _elementRef: ElementRef,
+              private _platform: Platform,
+              private _focusOriginMonitor: FocusOriginMonitor) {
+    super();
     this._focusOriginMonitor.monitor(this._elementRef.nativeElement, this._renderer, true);
   }
 
@@ -179,7 +180,7 @@ export class MdAnchor extends MdButton {
       focusOriginMonitor: FocusOriginMonitor,
       elementRef: ElementRef,
       renderer: Renderer2) {
-    super(platform, focusOriginMonitor, renderer, elementRef);
+    super(renderer, elementRef, platform, focusOriginMonitor);
   }
 
   /** @docs-private */

src/lib/checkbox/checkbox.ts

@@ -17,7 +17,7 @@ import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {coerceBooleanProperty} from '../core/coercion/boolean-property';
 import {FocusOrigin, FocusOriginMonitor, MdRipple, RippleRef} from '../core';
 import {mixinDisabled, CanDisable} from '../core/common-behaviors/disabled';
-import {IsColorable, mixinColor} from '../core/common-behaviors/color';
+import {CanColor, mixinColor} from '../core/common-behaviors/color';
 
 
 /** Monotonically increasing integer used to auto-generate unique ids for checkbox components. */
@@ -59,7 +59,8 @@ export class MdCheckboxChange {
 
 // Boilerplate for applying mixins to MdCheckbox.
 export class MdCheckboxBase {
-  constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
+  _renderer: Renderer2;
+  _elementRef: ElementRef;
 }
 export const _MdCheckboxMixinBase = mixinColor(mixinDisabled(MdCheckboxBase));
 
@@ -90,7 +91,7 @@ export const _MdCheckboxMixinBase = mixinColor(mixinDisabled(MdCheckboxBase));
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class MdCheckbox extends _MdCheckboxMixinBase
-    implements ControlValueAccessor, AfterViewInit, OnDestroy, IsColorable, CanDisable {
+    implements ControlValueAccessor, AfterViewInit, OnDestroy, CanColor, CanDisable {
   /**
    * Attached to the aria-label attribute of the host element. In most cases, arial-labelledby will
    * take precedence so this may be omitted.
@@ -191,11 +192,11 @@ export class MdCheckbox extends _MdCheckboxMixinBase
   /** Reference to the focused state ripple. */
   private _focusRipple: RippleRef;
 
-  constructor(private _changeDetectorRef: ChangeDetectorRef,
-              private _focusOriginMonitor: FocusOriginMonitor,
-              _renderer: Renderer2,
-              _elementRef: ElementRef) {
-    super(_renderer, _elementRef);
+  constructor(public _renderer: Renderer2,
+              public _elementRef: ElementRef,
+              private _changeDetectorRef: ChangeDetectorRef,
+              private _focusOriginMonitor: FocusOriginMonitor) {
+    super();
 
     // By default the checkbox uses the accent color for styling.
     this.color = 'accent';

src/lib/chips/chip.ts

@@ -11,15 +11,16 @@ import {
 
 import {Focusable} from '../core/a11y/focus-key-manager';
 import {coerceBooleanProperty} from '../core/coercion/boolean-property';
-import {IsColorable, mixinColor} from '../core/common-behaviors/color';
+import {CanColor, mixinColor} from '../core/common-behaviors/color';
 
 export interface MdChipEvent {
   chip: MdChip;
 }
 
 // Boilerplate for applying mixins to MdChip.
 export class MdChipBase {
-  constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
+  _renderer: Renderer2;
+  _elementRef: ElementRef;
 }
 export const _MdChipMixinBase = mixinColor(MdChipBase);
 
@@ -44,7 +45,7 @@ export const _MdChipMixinBase = mixinColor(MdChipBase);
     '(click)': '_handleClick($event)'
   }
 })
-export class MdChip extends _MdChipMixinBase implements Focusable, OnInit, OnDestroy, IsColorable {
+export class MdChip extends _MdChipMixinBase implements Focusable, OnInit, OnDestroy, CanColor {
 
   /** Whether or not the chip is disabled. Disabled chips cannot be focused. */
   protected _disabled: boolean = null;
@@ -64,9 +65,8 @@ export class MdChip extends _MdChipMixinBase implements Focusable, OnInit, OnDes
   /** Emitted when the chip is destroyed. */
   @Output() destroy = new EventEmitter<MdChipEvent>();
 
-  constructor(renderer: Renderer2, elementRef: ElementRef) {
-    super(renderer, elementRef);
-
+  constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {
+    super();
     // By default the chip component uses the primary color palette.
     this.color = 'primary';
   }

src/lib/core/common-behaviors/color.ts

@@ -1,31 +1,31 @@
 import {Constructor} from './constructor';
 import {ElementRef, Renderer2} from '@angular/core';
 
-/** List of possible color values that can be set. */
-const AVAILABLE_COLOR_VALUES = ['primary', 'accent', 'warn'];
-
 /** @docs-private */
-export interface IsColorable {
+export interface CanColor {
   color: string;
 }
 
 /** @docs-private */
-export interface ColorableBase {
+export interface HasRenderer {
   _renderer: Renderer2;
   _elementRef: ElementRef;
 }
 
+/** Possible color palette values.  */
+export type ThemePalette = 'primary' | 'accent' | 'warn' | null;
+
 /** Mixin to augment a directive with a `color` property. */
-export function mixinColor<T extends Constructor<ColorableBase>>(base: T, allowNoColor = false)
-    : Constructor<IsColorable> & T {
+export function mixinColor<T extends Constructor<HasRenderer>>(base: T, allowNoColor = false)
+    : Constructor<CanColor> & T {
   return class extends base {
-    private _color: string = null;
+    private _color: ThemePalette = undefined;
 
     constructor(...args: any[]) { super(...args); }
 
-    get color(): string { return this._color; }
-    set color(value: string) {
-      if (AVAILABLE_COLOR_VALUES.indexOf(value) !== -1 || (allowNoColor && !value)) {
+    get color(): ThemePalette { return this._color; }
+    set color(value: ThemePalette) {
+      if (value || allowNoColor && !value) {
         this._setColorClass(this._color, false);
         this._setColorClass(value, true);
         this._color = value;

src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts

@@ -5,14 +5,15 @@ import {
   ElementRef,
   Renderer2,
 } from '@angular/core';
-import {IsColorable, mixinColor} from '../../common-behaviors/color';
+import {CanColor, mixinColor} from '../../common-behaviors/color';
 
 export type MdPseudoCheckboxState = 'unchecked' | 'checked' | 'indeterminate';
 
 
 // Boilerplate for applying mixins to MdChip.
 export class MdPseudoCheckboxBase {
-  constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
+  _renderer: Renderer2;
+  _elementRef: ElementRef;
 }
 export const _MdPseudoCheckboxBase = mixinColor(MdPseudoCheckboxBase);
 
@@ -42,15 +43,15 @@ export const _MdPseudoCheckboxBase = mixinColor(MdPseudoCheckboxBase);
     '[class.mat-pseudo-checkbox-disabled]': 'disabled',
   },
 })
-export class MdPseudoCheckbox extends _MdPseudoCheckboxBase implements IsColorable {
+export class MdPseudoCheckbox extends _MdPseudoCheckboxBase implements CanColor {
   /** Display state of the checkbox. */
   @Input() state: MdPseudoCheckboxState = 'unchecked';
 
   /** Whether the checkbox is disabled. */
   @Input() disabled: boolean = false;
 
-  constructor(elementRef: ElementRef, renderer: Renderer2) {
-    super(renderer, elementRef);
+  constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {
+    super();
     this.color = 'accent';
   }
 }

src/lib/icon/icon.ts

@@ -11,12 +11,13 @@ import {
   AfterViewChecked,
 } from '@angular/core';
 import {MdIconRegistry} from './icon-registry';
-import {IsColorable, mixinColor} from '../core/common-behaviors/color';
+import {CanColor, mixinColor} from '../core/common-behaviors/color';
 
 
 // Boilerplate for applying mixins to MdIcon.
 export class MdIconBase {
-  constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
+  _renderer: Renderer2;
+  _elementRef: ElementRef;
 }
 export const _MdIconMixinBase = mixinColor(MdIconBase, true);
 
@@ -68,7 +69,7 @@ export const _MdIconMixinBase = mixinColor(MdIconBase, true);
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MdIcon extends _MdIconMixinBase implements OnChanges, OnInit, AfterViewChecked,
-    IsColorable {
+    CanColor {
 
   /** Name of the icon in the SVG icon set. */
   @Input() svgIcon: string;
@@ -90,9 +91,9 @@ export class MdIcon extends _MdIconMixinBase implements OnChanges, OnInit, After
   private _previousAriaLabel: string;
 
   constructor(private _mdIconRegistry: MdIconRegistry,
-              renderer: Renderer2,
-              elementRef: ElementRef) {
-    super(renderer, elementRef);
+              public _renderer: Renderer2,
+              public _elementRef: ElementRef) {
+    super();
   }
 
   /**

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

@@ -10,7 +10,7 @@ import {
   Directive,
   ViewChild,
 } from '@angular/core';
-import {IsColorable, mixinColor} from '../core/common-behaviors/color';
+import {CanColor, mixinColor} from '../core/common-behaviors/color';
 
 
 // TODO(josephperrott): Benchpress tests.
@@ -52,7 +52,8 @@ export class MdProgressSpinnerCssMatStyler {}
 
 // Boilerplate for applying mixins to MdProgressSpinner.
 export class MdProgressSpinnerBase {
-  constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
+  _renderer: Renderer2;
+  _elementRef: ElementRef;
 }
 export const _MdProgressSpinnerMixinBase = mixinColor(MdProgressSpinnerBase);
 
@@ -73,7 +74,7 @@ export const _MdProgressSpinnerMixinBase = mixinColor(MdProgressSpinnerBase);
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MdProgressSpinner extends _MdProgressSpinnerMixinBase
-    implements OnDestroy, IsColorable {
+    implements OnDestroy, CanColor {
 
   /** The id of the last requested animation. */
   private _lastAnimationId: number = 0;
@@ -159,10 +160,10 @@ export class MdProgressSpinner extends _MdProgressSpinnerMixinBase
     }
   }
 
-  constructor(private _ngZone: NgZone,
-              renderer: Renderer2,
-              elementRef: ElementRef) {
-    super(renderer, elementRef);
+  constructor(public _renderer: Renderer2,
+              public _elementRef: ElementRef,
+              private _ngZone: NgZone) {
+    super();
 
     // By default the progress-spinner component uses the primary color palette.
     this.color = 'primary';
@@ -282,7 +283,7 @@ export class MdProgressSpinner extends _MdProgressSpinnerMixinBase
 export class MdSpinner extends MdProgressSpinner implements OnDestroy {
 
   constructor(elementRef: ElementRef, ngZone: NgZone, renderer: Renderer2) {
-    super(ngZone, renderer, elementRef);
+    super(renderer, elementRef, ngZone);
     this.mode = 'indeterminate';
   }
 

src/lib/select/select.ts

@@ -34,7 +34,7 @@ import {getMdSelectDynamicMultipleError, getMdSelectNonArrayValueError} from './
 import 'rxjs/add/observable/merge';
 import 'rxjs/add/operator/startWith';
 import 'rxjs/add/operator/filter';
-import {IsColorable, mixinColor} from '../core/common-behaviors/color';
+import {CanColor, mixinColor} from '../core/common-behaviors/color';
 import {CanDisable} from '../core/common-behaviors/disabled';
 
 
@@ -99,7 +99,8 @@ export type MdSelectFloatPlaceholderType = 'always' | 'never' | 'auto';
 
 // Boilerplate for applying mixins to MdSelect.
 export class MdSelectBase {
-  constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
+  _renderer: Renderer2;
+  _elementRef: ElementRef;
 }
 export const _MdSelectMixinBase = mixinColor(MdSelectBase);
 
@@ -133,7 +134,7 @@ export const _MdSelectMixinBase = mixinColor(MdSelectBase);
   exportAs: 'mdSelect',
 })
 export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, OnDestroy, OnInit,
-    ControlValueAccessor, IsColorable {
+    ControlValueAccessor, CanColor {
   /** Whether or not the overlay panel is open. */
   private _panelOpen = false;
 
@@ -312,12 +313,12 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
 
   constructor(private _viewportRuler: ViewportRuler,
               private _changeDetectorRef: ChangeDetectorRef,
-              renderer: Renderer2,
-              elementRef: ElementRef,
+              public _renderer: Renderer2,
+              public _elementRef: ElementRef,
               @Optional() private _dir: Dir,
               @Self() @Optional() public _control: NgControl,
               @Attribute('tabindex') tabIndex: string) {
-    super(renderer, elementRef);
+    super();
 
     if (this._control) {
       this._control.valueAccessor = this;

src/lib/slide-toggle/slide-toggle.ts

@@ -23,7 +23,7 @@ import {
 } from '../core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {mixinDisabled, CanDisable} from '../core/common-behaviors/disabled';
-import {IsColorable, mixinColor} from '../core/common-behaviors/color';
+import {CanColor, mixinColor} from '../core/common-behaviors/color';
 
 
 export const MD_SLIDE_TOGGLE_VALUE_ACCESSOR: any = {
@@ -45,7 +45,8 @@ let nextId = 0;
 
 // Boilerplate for applying mixins to MdSlideToggle.
 export class MdSlideToggleBase {
-  constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
+  _renderer: Renderer2;
+  _elementRef: ElementRef;
 }
 export const _MdSlideToggleMixinBase = mixinColor(mixinDisabled(MdSlideToggleBase));
 
@@ -67,7 +68,7 @@ export const _MdSlideToggleMixinBase = mixinColor(mixinDisabled(MdSlideToggleBas
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class MdSlideToggle extends _MdSlideToggleMixinBase
-    implements OnDestroy, AfterContentInit, ControlValueAccessor, CanDisable, IsColorable {
+    implements OnDestroy, AfterContentInit, ControlValueAccessor, CanDisable, CanColor {
   private onChange = (_: any) => {};
   private onTouched = () => {};
 
@@ -121,10 +122,10 @@ export class MdSlideToggle extends _MdSlideToggleMixinBase
   /** Reference to the ripple directive on the thumb container. */
   @ViewChild(MdRipple) _ripple: MdRipple;
 
-  constructor(private _focusOriginMonitor: FocusOriginMonitor,
-              renderer: Renderer2,
-              elementRef: ElementRef) {
-    super(renderer, elementRef);
+  constructor(public _renderer: Renderer2,
+              public _elementRef: ElementRef,
+              private _focusOriginMonitor: FocusOriginMonitor) {
+    super();
   }
 
   ngAfterContentInit() {