all expect sidenav

Author: jelbourn

src/lib/button-toggle/button-toggle.ts

@@ -21,7 +21,8 @@ import {
     FormsModule,
 } from '@angular/forms';
 import {Observable} from 'rxjs/Observable';
-import {BooleanFieldValue, MdUniqueSelectionDispatcher} from '@angular2-material/core';
+import {MdUniqueSelectionDispatcher} from '@angular2-material/core';
+import {coerceBooleanProperty} from '../core/coersion/boolean-property';
 
 export type ToggleType = 'checkbox' | 'radio';
 
@@ -101,13 +102,12 @@ export class MdButtonToggleGroup implements AfterViewInit, ControlValueAccessor
   }
 
   @Input()
-  @BooleanFieldValue()
   get disabled(): boolean {
     return this._disabled;
   }
 
   set disabled(value) {
-    this._disabled = (value != null && value !== false) ? true : null;
+    this._disabled = coerceBooleanProperty(value);
   }
 
   @Input()

src/lib/button/button.ts

@@ -10,8 +10,8 @@ import {
   ModuleWithProviders,
 } from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {BooleanFieldValue} from '@angular2-material/core';
 import {MdRippleModule} from '@angular2-material/core';
+import {coerceBooleanProperty} from '../core/coersion/boolean-property';
 
 // TODO(jelbourn): Make the `isMouseDown` stuff done with one global listener.
 // TODO(kara): Convert attribute selectors to classes when attr maps become available
@@ -42,7 +42,11 @@ export class MdButton {
   _isMouseDown: boolean = false;
 
   /** Whether the ripple effect on click should be disabled. */
-  @Input() @BooleanFieldValue() disableRipple: boolean = false;
+  private _disableRipple: boolean = false;
+
+  @Input()
+  get disableRipple() { return this._disableRipple; }
+  set disableRipple(v) { this._disableRipple = coerceBooleanProperty(v); }
 
   constructor(private _elementRef: ElementRef, private _renderer: Renderer) { }
 

src/lib/core/annotations/field-value.spec.ts

@@ -0,0 +1,48 @@
+import {coerceBooleanProperty} from './boolean-property';
+
+
+describe('coerceBooleanProperty', () => {
+  it('should coerce undefined to false', () => {
+    expect(coerceBooleanProperty(undefined)).toBe(false);
+  });
+
+  it('should coerce null to false', () => {
+    expect(coerceBooleanProperty(null)).toBe(false);
+  });
+
+  it('should coerce the empty string to true', () => {
+    expect(coerceBooleanProperty('')).toBe(true);
+  });
+
+  it('should coerce zero to true', () => {
+    expect(coerceBooleanProperty(0)).toBe(true);
+  });
+
+  it('should coerce the string "false" to false', () => {
+    expect(coerceBooleanProperty('false')).toBe(false);
+  });
+
+  it('should coerce the boolean false to false', () => {
+    expect(coerceBooleanProperty(false)).toBe(false);
+  });
+
+  it('should coerce the boolean true to true', () => {
+    expect(coerceBooleanProperty(true)).toBe(true);
+  });
+
+  it('should coerce the string "true" to true', () => {
+    expect(coerceBooleanProperty('true')).toBe(true);
+  });
+
+  it('should coerce an arbitrary string to true', () => {
+    expect(coerceBooleanProperty('pink')).toBe(true);
+  });
+
+  it('should coerce an object to true', () => {
+    expect(coerceBooleanProperty({})).toBe(true);
+  });
+
+  it('should coerce an array to true', () => {
+    expect(coerceBooleanProperty([])).toBe(true);
+  });
+});

src/lib/core/annotations/field-value.ts

@@ -0,0 +1,4 @@
+/** Coerces a data-bound value (typically a string) to a boolean. */
+export function coerceBooleanProperty(value: any): boolean {
+  return value != null && `${value}` !== 'false';
+}

src/lib/core/coersion/boolean-property.spec.ts

@@ -63,9 +63,6 @@ export {applyCssTransform} from './style/apply-transform';
 // Error
 export {MdError} from './errors/error';
 
-// Annotations.
-export {BooleanFieldValue} from './annotations/field-value';
-
 // Misc
 export {ComponentType} from './overlay/generic-component-type';
 

src/lib/core/coersion/boolean-property.ts

@@ -24,8 +24,9 @@ import {
   FormsModule,
 } from '@angular/forms';
 import {CommonModule} from '@angular/common';
-import {BooleanFieldValue, MdError} from '@angular2-material/core';
+import {MdError} from '@angular2-material/core';
 import {Observable} from 'rxjs/Observable';
+import {coerceBooleanProperty} from '../core/coersion/boolean-property';
 
 
 const noop = () => {};
@@ -118,9 +119,22 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
    */
   @Input('aria-label') ariaLabel: string;
   @Input('aria-labelledby') ariaLabelledBy: string;
-  @Input('aria-disabled') @BooleanFieldValue() ariaDisabled: boolean;
-  @Input('aria-required') @BooleanFieldValue() ariaRequired: boolean;
-  @Input('aria-invalid') @BooleanFieldValue() ariaInvalid: boolean;
+  
+  private _ariaDisabled: boolean;
+  private _ariaRequired: boolean;
+  private _ariaInvalid: boolean;
+  
+  @Input('aria-disabled')
+  get ariaDisabled(): boolean { return this._ariaDisabled; }
+  set ariaDisabled(value) { this._ariaDisabled = coerceBooleanProperty(value); }
+  
+  @Input('aria-required')
+  get ariaRequired(): boolean { return this._ariaRequired; }
+  set ariaRequired(value) { this._ariaRequired = coerceBooleanProperty(value); }
+  
+  @Input('aria-invalid')
+  get ariaInvalid(): boolean { return this._ariaInvalid; }
+  set ariaInvalid(value) { this._ariaInvalid = coerceBooleanProperty(value); }
 
   /**
    * Content directives.
@@ -141,29 +155,55 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
    */
   @Input() align: 'start' | 'end' = 'start';
   @Input() dividerColor: 'primary' | 'accent' | 'warn' = 'primary';
-  @Input() @BooleanFieldValue() floatingPlaceholder: boolean = true;
   @Input() hintLabel: string = '';
 
   @Input() autocomplete: string;
   @Input() autocorrect: string;
   @Input() autocapitalize: string;
-  @Input() @BooleanFieldValue() autofocus: boolean = false;
-  @Input() @BooleanFieldValue() disabled: boolean = false;
   @Input() id: string = `md-input-${nextUniqueId++}`;
   @Input() list: string = null;
   @Input() max: string | number = null;
   @Input() maxlength: number = null;
   @Input() min: string | number = null;
   @Input() minlength: number = null;
   @Input() placeholder: string = null;
-  @Input() @BooleanFieldValue() readonly: boolean = false;
-  @Input() @BooleanFieldValue() required: boolean = false;
-  @Input() @BooleanFieldValue() spellcheck: boolean = false;
   @Input() step: number = null;
   @Input() tabindex: number = null;
   @Input() type: string = 'text';
   @Input() name: string = null;
 
+  private _floatingPlaceholder: boolean;
+  private _autofocus: boolean;
+  private _disabled: boolean;
+  private _readonly: boolean;
+  private _required: boolean;
+  private _spellcheck: boolean;
+
+  @Input()
+  get floatingPlaceholder(): boolean { return this._floatingPlaceholder; }
+  set floatingPlaceholder(value) { this._floatingPlaceholder = coerceBooleanProperty(value); }
+
+  @Input()
+  get autofocus(): boolean { return this._autofocus; }
+  set autofocus(value) { this._autofocus = coerceBooleanProperty(value); }
+
+  @Input()
+  get disabled(): boolean { return this._disabled; }
+  set disabled(value) { this._disabled = coerceBooleanProperty(value); }
+
+  @Input()
+  get readonly(): boolean { return this._readonly; }
+  set readonly(value) { this._readonly = coerceBooleanProperty(value); }
+
+  @Input()
+  get required(): boolean { return this._required; }
+  set required(value) { this._required = coerceBooleanProperty(value); }
+
+  @Input()
+  get spellcheck(): boolean { return this._spellcheck; }
+  set spellcheck(value) { this._spellcheck = coerceBooleanProperty(value); }
+
+
   private _blurEmitter: EventEmitter<FocusEvent> = new EventEmitter<FocusEvent>();
   private _focusEmitter: EventEmitter<FocusEvent> = new EventEmitter<FocusEvent>();
 

src/lib/core/core.ts

@@ -17,9 +17,10 @@ import {
   ControlValueAccessor,
   NG_VALUE_ACCESSOR
 } from '@angular/forms';
-import {BooleanFieldValue, applyCssTransform} from '@angular2-material/core';
+import {applyCssTransform} from '@angular2-material/core';
 import {Observable} from 'rxjs/Observable';
 import {MdGestureConfig} from '@angular2-material/core';
+import {coerceBooleanProperty} from '../core/coersion/boolean-property';
 
 
 export const MD_SLIDE_TOGGLE_VALUE_ACCESSOR: any = {
@@ -65,13 +66,18 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor {
   private _isMousedown: boolean = false;
   private _slideRenderer: SlideToggleRenderer = null;
 
-  @Input() @BooleanFieldValue() disabled: boolean = false;
   @Input() name: string = null;
   @Input() id: string = this._uniqueId;
   @Input() tabIndex: number = 0;
   @Input() ariaLabel: string = null;
   @Input() ariaLabelledby: string = null;
 
+  private _disabled: boolean = false;
+
+  @Input()
+  get disabled(): boolean { return this._disabled; }
+  set disabled(value) { this._disabled = coerceBooleanProperty(value); }
+
   private _change: EventEmitter<MdSlideToggleChange> = new EventEmitter<MdSlideToggleChange>();
   @Output() change: Observable<MdSlideToggleChange> = this._change.asObservable();
 

src/lib/input/input.ts

@@ -15,8 +15,9 @@ import {
   FormsModule,
 } from '@angular/forms';
 import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
-import {BooleanFieldValue, MdGestureConfig, applyCssTransform} from '@angular2-material/core';
+import {MdGestureConfig, applyCssTransform} from '@angular2-material/core';
 import {Input as HammerInput} from 'hammerjs';
+import {coerceBooleanProperty} from '../core/coersion/boolean-property';
 
 /**
  * Visually, a 30px separation between tick marks looks best. This is very subjective but it is
@@ -58,16 +59,20 @@ export class MdSlider implements AfterContentInit, ControlValueAccessor {
   /** The dimensions of the slider. */
   private _sliderDimensions: ClientRect = null;
 
+  private _disabled: boolean = false;
+
   @Input()
-  @BooleanFieldValue()
   @HostBinding('class.md-slider-disabled')
   @HostBinding('attr.aria-disabled')
-  disabled: boolean = false;
+  get disabled(): boolean { return this._disabled; }
+  set disabled(value) { this._disabled = coerceBooleanProperty(value); }
 
   /** Whether or not to show the thumb label. */
+  private _thumbLabel: boolean = false;
+
   @Input('thumb-label')
-  @BooleanFieldValue()
-  thumbLabel: boolean = false;
+  get thumbLabel(): boolean { return this._thumbLabel; }
+  set thumbLabel(value) { this._thumbLabel = coerceBooleanProperty(value); }
 
   /** The miniumum value that the slider can have. */
   private _min: number = 0;

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

@@ -21,6 +21,7 @@ import {MdInkBar} from './ink-bar';
 import {Observable} from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
 import {RIGHT_ARROW, LEFT_ARROW, ENTER} from '@angular2-material/core';
+import {coerceBooleanProperty} from '../core/coersion/boolean-property';
 
 /** Used to generate unique ID's for each tab component */
 let nextId = 0;
@@ -38,11 +39,10 @@ export class MdTab {
   @ContentChild(MdTabLabel) label: MdTabLabel;
   @ContentChild(MdTabContent) content: MdTabContent;
 
-  // TODO: Replace this when BooleanFieldValue is removed.
   private _disabled = false;
   @Input('disabled')
   set disabled(value: boolean) {
-    this._disabled = (value != null && `${value}` !== 'false');
+    this._disabled = coerceBooleanProperty(value);
   }
   get disabled(): boolean {
     return this._disabled;