chore: remove BooleanFieldValue (#1290)

Author: jelbourn

.gitignore

@@ -33,3 +33,4 @@
 /libpeerconnection.log
 npm-debug.log
 testem.log
+/.chrome

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

@@ -15,13 +15,9 @@ import {
     forwardRef,
     AfterViewInit
 } from '@angular/core';
-import {
-    NG_VALUE_ACCESSOR,
-    ControlValueAccessor,
-    FormsModule,
-} from '@angular/forms';
+import {NG_VALUE_ACCESSOR, ControlValueAccessor, FormsModule} from '@angular/forms';
 import {Observable} from 'rxjs/Observable';
-import {BooleanFieldValue, MdUniqueSelectionDispatcher} from '../core';
+import {MdUniqueSelectionDispatcher, coerceBooleanProperty} from '../core';
 
 export type ToggleType = 'checkbox' | 'radio';
 
@@ -102,13 +98,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,7 +10,7 @@ import {
   ModuleWithProviders,
 } from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {BooleanFieldValue, MdRippleModule} from '../core';
+import {MdRippleModule, coerceBooleanProperty} from '../core';
 
 // TODO(jelbourn): Make the `isMouseDown` stuff done with one global listener.
 // TODO(kara): Convert attribute selectors to classes when attr maps become available
@@ -41,7 +41,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/checkbox/checkbox.ts

@@ -12,7 +12,8 @@ import {
     ModuleWithProviders,
 } from '@angular/core';
 import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
-import {BooleanFieldValue} from '../core';
+import {coerceBooleanProperty} from '../core/coersion/boolean-property';
+
 
 /**
  * Monotonically increasing integer used to auto-generate unique ids for checkbox components.
@@ -93,8 +94,12 @@ export class MdCheckbox implements ControlValueAccessor {
     return `input-${this.id}`;
   }
 
+  private _required: boolean;
+
   /** Whether the checkbox is required or not. */
-  @Input() @BooleanFieldValue() required: boolean = false;
+  @Input()
+  get required(): boolean { return this._required; }
+  set required(value) { this._required = coerceBooleanProperty(value); }
 
   /** Whether or not the checkbox should come before or after the label. */
   @Input() align: 'start' | 'end' = 'start';

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

@@ -70,9 +70,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';
 
@@ -84,6 +81,9 @@ export * from './compatibility/style-compatibility';
 // Animation
 export * from './animation/animation';
 
+// Coersion
+export {coerceBooleanProperty} from './coersion/boolean-property';
+
 
 @NgModule({
   imports: [MdLineModule, RtlModule, MdRippleModule, PortalModule, OverlayModule, A11yModule],

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

@@ -18,13 +18,9 @@ import {
   ModuleWithProviders,
   ViewEncapsulation,
 } from '@angular/core';
-import {
-  NG_VALUE_ACCESSOR,
-  ControlValueAccessor,
-  FormsModule,
-} from '@angular/forms';
+import {NG_VALUE_ACCESSOR, ControlValueAccessor, FormsModule} from '@angular/forms';
 import {CommonModule} from '@angular/common';
-import {BooleanFieldValue, MdError} from '../core';
+import {MdError, coerceBooleanProperty} from '../core';
 import {Observable} from 'rxjs/Observable';
 
 
@@ -118,9 +114,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 +150,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 = false;
+  private _autofocus: boolean = false;
+  private _disabled: boolean = false;
+  private _readonly: boolean = false;
+  private _required: boolean = false;
+  private _spellcheck: boolean = false;
+
+  @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>();