feat(selection-list): add selectAll and deselectAll functions (#6971)

* Adds the ability to select and deselect all options at once.
* Adds a demo of the selection list to the demo app.
* Fixes an issue that caused the checkbox inside the selection list to collapse.
* Sets the proper cursor on the list items.

Fixes #6969.

src/demo-app/list/list-demo.html

@@ -101,4 +101,22 @@
       </md-list-item>
     </md-nav-list>
   </div>
+
+  <div>
+    <h2>Selection list</h2>
+
+    <md-selection-list #groceries>
+      <h3 md-subheader>Groceries</h3>
+
+      <md-list-option *ngFor="let item of items" [value]="item">
+        {{item}}
+      </md-list-option>
+    </md-selection-list>
+
+    <p>Selected: {{groceries.selectedOptions.selected.length}}</p>
+    <p>
+      <button md-raised-button (click)="groceries.selectAll()">Select all</button>
+      <button md-raised-button (click)="groceries.deselectAll()">Deselect all</button>
+    </p>
+  </div>
 </div>

src/demo-app/list/list-demo.scss

@@ -3,7 +3,7 @@
   display: flex;
   flex-flow: row wrap;
 
-  .mat-list, .mat-nav-list {
+  .mat-list, .mat-nav-list, .mat-selection-list {
     border: 1px solid rgba(0, 0, 0, 0.12);
     width: 350px;
     margin: 20px 20px 0 0;

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

@@ -17,6 +17,7 @@ $_mat-pseudo-checkmark-size: $mat-checkbox-size - (2 * $_mat-pseudo-checkbox-pad
   vertical-align: middle;
   box-sizing: border-box;
   position: relative;
+  flex-shrink: 0;
   transition:
       border-color $mat-checkbox-transition-duration $mat-linear-out-slow-in-timing-function,
       background-color $mat-checkbox-transition-duration $mat-linear-out-slow-in-timing-function;

src/lib/list/list.scss

@@ -216,3 +216,9 @@ $mat-dense-list-icon-size: 20px;
     }
   }
 }
+
+.mat-list-option {
+  &:not([disabled]) {
+    cursor: pointer;
+  }
+}

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

@@ -181,6 +181,29 @@ describe('MdSelectionList', () => {
 
       expect(manager.activeItemIndex).toEqual(3);
     });
+
+    it('should be able to select all options', () => {
+      const list: MdSelectionList = selectionList.componentInstance;
+
+      expect(list.options.toArray().every(option => option.selected)).toBe(false);
+
+      list.selectAll();
+      fixture.detectChanges();
+
+      expect(list.options.toArray().every(option => option.selected)).toBe(true);
+    });
+
+    it('should be able to deselect all options', () => {
+      const list: MdSelectionList = selectionList.componentInstance;
+
+      list.options.forEach(option => option.toggle());
+      expect(list.options.toArray().every(option => option.selected)).toBe(true);
+
+      list.deselectAll();
+      fixture.detectChanges();
+
+      expect(list.options.toArray().every(option => option.selected)).toBe(false);
+    });
   });
 
   describe('with single option', () => {

src/lib/list/selection-list.ts

@@ -244,6 +244,24 @@ export class MdSelectionList extends _MdSelectionListMixinBase
     this._element.nativeElement.focus();
   }
 
+  /** Selects all of the options. */
+  selectAll() {
+    this.options.forEach(option => {
+      if (!option.selected) {
+        option.toggle();
+      }
+    });
+  }
+
+  /** Deselects all of the options. */
+  deselectAll() {
+    this.options.forEach(option => {
+      if (option.selected) {
+        option.toggle();
+      }
+    });
+  }
+
   /** Map all the options' destroy event subscriptions and merge them into one stream. */
   private _onDestroySubscription(): Subscription {
     return RxChain.from(this.options.changes)