fix(selection-list): do not coerece option value to boolean (#6983)

Currently the value of a `MdListOption` is coerced to a boolean. This is not the correct behavior because it would mean that there could be only two values (true/false).

Needed for #6896

Author: devversion

src/lib/list/selection-list.spec.ts

@@ -48,6 +48,14 @@ describe('MdSelectionList', () => {
       expect(listItemEl.nativeElement.className).not.toContain('mat-list-item-focus');
     });
 
+    it('should be able to set a value on a list option', () => {
+      const optionValues = ['inbox', 'starred', 'sent-mail', 'drafts'];
+
+      optionValues.forEach((optionValue, index) => {
+        expect(listOption[index].componentInstance.value).toBe(optionValue);
+      });
+    });
+
     it('should be able to dispatch one selected item', () => {
       let testListItem = listOption[2].injector.get<MdListOption>(MdListOption);
       let selectList = selectionList.injector.get<MdSelectionList>(MdSelectionList).selectedOptions;
@@ -379,17 +387,18 @@ describe('MdSelectionList', () => {
 
 
 @Component({template: `
-  <mat-selection-list id = "selection-list-1">
-    <md-list-option checkboxPosition = "before" disabled = "true">
+  <mat-selection-list id="selection-list-1">
+    <md-list-option checkboxPosition="before" disabled="true" value="inbox">
       Inbox (disabled selection-option)
     </md-list-option>
-    <md-list-option id = "testSelect" checkboxPosition = "before" class="test-native-focus">
+    <md-list-option id="testSelect" checkboxPosition="before" class="test-native-focus"
+                    value="starred">
       Starred
     </md-list-option>
-    <md-list-option checkboxPosition = "before">
+    <md-list-option checkboxPosition="before" value="sent-mail">
       Sent Mail
     </md-list-option>
-    <md-list-option checkboxPosition = "before">
+    <md-list-option checkboxPosition="before" value="drafts">
       Drafts
     </md-list-option>
   </mat-selection-list>`})

src/lib/list/selection-list.ts

@@ -82,7 +82,6 @@ export class MdListOption extends _MdListOptionMixinBase
   private _lineSetter: MdLineSetter;
   private _selected: boolean = false;
   private _disabled: boolean = false;
-  private _value: any;
 
   /** Whether the option has focus. */
   _hasFocus: boolean = false;
@@ -92,20 +91,18 @@ export class MdListOption extends _MdListOptionMixinBase
   /** Whether the label should appear before or after the checkbox. Defaults to 'after' */
   @Input() checkboxPosition: 'before' | 'after' = 'after';
 
+  /** Value of the option */
+  @Input() value: any;
+
   /** Whether the option is disabled. */
   @Input()
   get disabled() { return (this.selectionList && this.selectionList.disabled) || this._disabled; }
   set disabled(value: any) { this._disabled = coerceBooleanProperty(value); }
 
-  /** Value of the option */
-  @Input()
-  get value() { return this._value; }
-  set value( val: any) { this._value = coerceBooleanProperty(val); }
-
   /** Whether the option is selected. */
   @Input()
   get selected() { return this._selected; }
-  set selected( val: boolean) { this._selected = coerceBooleanProperty(val); }
+  set selected(value: boolean) { this._selected = coerceBooleanProperty(value); }
 
   /** Emitted when the option is focused. */
   onFocus = new EventEmitter<MdSelectionListOptionEvent>();
@@ -123,7 +120,7 @@ export class MdListOption extends _MdListOptionMixinBase
               private _element: ElementRef,
               private _changeDetector: ChangeDetectorRef,
               @Optional() @Inject(forwardRef(() => MdSelectionList))
-                  public selectionList: MdSelectionList) {
+              public selectionList: MdSelectionList) {
     super();
   }