feat(list): Add single select mode.

Author: kseamon

src/components-examples/material/list/index.ts

@@ -5,17 +5,20 @@ import {MatListModule} from '@angular/material/list';
 import {ListOverviewExample} from './list-overview/list-overview-example';
 import {ListSectionsExample} from './list-sections/list-sections-example';
 import {ListSelectionExample} from './list-selection/list-selection-example';
+import {ListSingleSelectionExample} from './list-single-selection/list-single-selection-example';
 
 export {
   ListOverviewExample,
   ListSectionsExample,
   ListSelectionExample,
+  ListSingleSelectionExample,
 };
 
 const EXAMPLES = [
   ListOverviewExample,
   ListSectionsExample,
   ListSelectionExample,
+  ListSingleSelectionExample,
 ];
 
 @NgModule({

src/components-examples/material/list/list-single-selection/list-single-selection-example.css

@@ -0,0 +1 @@
+/** No styles for this example. */

src/components-examples/material/list/list-single-selection/list-single-selection-example.html

@@ -0,0 +1,9 @@
+<mat-selection-list #shoes [multiple]="false">
+  <mat-list-option *ngFor="let shoe of typesOfShoes">
+    {{shoe}}
+  </mat-list-option>
+</mat-selection-list>
+
+<p>
+  Option selected: {{shoes.selectedOptions.selected}}
+</p>

src/components-examples/material/list/list-single-selection/list-single-selection-example.ts

@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title List with single selection
+ */
+@Component({
+  selector: 'list-single-selection-example',
+  styleUrls: ['list-single-selection-example.css'],
+  templateUrl: 'list-single-selection-example.html',
+})
+export class ListSingleSelectionExample {
+  typesOfShoes: string[] = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];
+}

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

@@ -162,4 +162,22 @@ <h3 mat-subheader>Dogs</h3>
       <button mat-raised-button (click)="groceries.deselectAll()">Deselect all</button>
     </p>
   </div>
+  
+  <div>
+    <h2>Single Selection list</h2>
+
+    <mat-selection-list #favorite 
+                        [(ngModel)]="favoriteOptions"
+                        [multiple]="false"
+                        color="primary">
+      <h3 mat-subheader>Favorite Grocery</h3>
+
+      <mat-list-option value="bananas">Bananas</mat-list-option>
+      <mat-list-option selected value="oranges">Oranges</mat-list-option>
+      <mat-list-option value="apples">Apples</mat-list-option>
+      <mat-list-option value="strawberries" color="warn">Strawberries</mat-list-option>
+    </mat-selection-list>
+
+    <p>Selected: {{favoriteOptions | json}}</p>
+  </div>
 </div>

src/dev-app/list/list-demo.ts

@@ -70,6 +70,8 @@ export class ListDemo {
     this.modelChangeEventCount++;
   }
 
+  favoriteOptions: string[] = [];
+
   alertItem(msg: string) {
     alert(msg);
   }

src/material/list/_list-theme.scss

@@ -33,6 +33,10 @@
       background: mat-color($background, 'hover');
     }
   }
+
+  .mat-selection-list-single-select .mat-list-option.mat-selected {
+    background: mat-color($background, hover, 0.12);
+  }
 }
 
 @mixin mat-list-typography($config) {

src/material/list/list-option.html

@@ -7,6 +7,7 @@
     [matRippleDisabled]="_isRippleDisabled()"></div>
 
   <mat-pseudo-checkbox
+    *ngIf="selectionList.multiple"
     [state]="selected ? 'checked' : 'unchecked'"
     [disabled]="disabled"></mat-pseudo-checkbox>
 

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

@@ -93,11 +93,13 @@ describe('MatSelectionList without forms', () => {
 
       expect(selectList.selected.length).toBe(0);
       expect(listOptions[2].nativeElement.getAttribute('aria-selected')).toBe('false');
+      expect(listOptions[2].nativeElement.classList.contains('mat-selected')).toBe(false);
 
       testListItem.toggle();
       fixture.detectChanges();
 
       expect(listOptions[2].nativeElement.getAttribute('aria-selected')).toBe('true');
+      expect(listOptions[2].nativeElement.classList.contains('mat-selected')).toBe(true);
       expect(listOptions[2].nativeElement.getAttribute('aria-disabled')).toBe('false');
       expect(selectList.selected.length).toBe(1);
     });
@@ -110,7 +112,9 @@ describe('MatSelectionList without forms', () => {
 
       expect(selectList.selected.length).toBe(0);
       expect(listOptions[2].nativeElement.getAttribute('aria-selected')).toBe('false');
+      expect(listOptions[2].nativeElement.classList.contains('mat-selected')).toBe(false);
       expect(listOptions[1].nativeElement.getAttribute('aria-selected')).toBe('false');
+      expect(listOptions[1].nativeElement.classList.contains('mat-selected')).toBe(false);
 
       testListItem.toggle();
       fixture.detectChanges();
@@ -120,7 +124,9 @@ describe('MatSelectionList without forms', () => {
 
       expect(selectList.selected.length).toBe(2);
       expect(listOptions[2].nativeElement.getAttribute('aria-selected')).toBe('true');
+      expect(listOptions[2].nativeElement.classList.contains('mat-selected')).toBe(true);
       expect(listOptions[1].nativeElement.getAttribute('aria-selected')).toBe('true');
+      expect(listOptions[1].nativeElement.classList.contains('mat-selected')).toBe(true);
       expect(listOptions[1].nativeElement.getAttribute('aria-disabled')).toBe('false');
       expect(listOptions[2].nativeElement.getAttribute('aria-disabled')).toBe('false');
     });
@@ -882,6 +888,97 @@ describe('MatSelectionList without forms', () => {
       expect(listOption.classList).toContain('mat-list-item-with-avatar');
     });
   });
+
+  describe('with single selection', () => {
+    let fixture: ComponentFixture<SelectionListWithListOptions>;
+    let listOption: DebugElement[];
+    let selectionList: DebugElement;
+
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        imports: [MatListModule],
+        declarations: [
+          SelectionListWithListOptions,
+        ],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(SelectionListWithListOptions);
+      fixture.componentInstance.multiple = false;
+      listOption = fixture.debugElement.queryAll(By.directive(MatListOption));
+      selectionList = fixture.debugElement.query(By.directive(MatSelectionList))!;
+      fixture.detectChanges();
+    }));
+
+    it('should select one option at a time', () => {
+      const testListItem1 = listOption[1].injector.get<MatListOption>(MatListOption);
+      const testListItem2 = listOption[2].injector.get<MatListOption>(MatListOption);
+      const selectList =
+          selectionList.injector.get<MatSelectionList>(MatSelectionList).selectedOptions;
+
+      expect(selectList.selected.length).toBe(0);
+
+      dispatchFakeEvent(testListItem1._getHostElement(), 'click');
+      fixture.detectChanges();
+
+      expect(selectList.selected).toEqual([testListItem1]);
+
+      dispatchFakeEvent(testListItem2._getHostElement(), 'click');
+      fixture.detectChanges();
+
+      expect(selectList.selected).toEqual([testListItem2]);
+    });
+
+    it('should not show check boxes', () => {
+      expect(fixture.nativeElement.querySelector('mat-pseudo-checkbox')).toBeFalsy();
+    });
+
+    it('should not deselect the target option on click', () => {
+      const testListItem1 = listOption[1].injector.get<MatListOption>(MatListOption);
+      const selectList =
+          selectionList.injector.get<MatSelectionList>(MatSelectionList).selectedOptions;
+
+      expect(selectList.selected.length).toBe(0);
+
+      dispatchFakeEvent(testListItem1._getHostElement(), 'click');
+      fixture.detectChanges();
+
+      expect(selectList.selected).toEqual([testListItem1]);
+
+      dispatchFakeEvent(testListItem1._getHostElement(), 'click');
+      fixture.detectChanges();
+
+      expect(selectList.selected).toEqual([testListItem1]);
+    });
+
+    it('sanely handles toggling single/multiple mode after bootstrap', () => {
+      const testListItem1 = listOption[1].injector.get<MatListOption>(MatListOption);
+      const testListItem2 = listOption[2].injector.get<MatListOption>(MatListOption);
+      const selected = () => selectionList.injector.get<MatSelectionList>(MatSelectionList)
+          .selectedOptions.selected;
+
+      expect(selected().length).toBe(0);
+
+      dispatchFakeEvent(testListItem1._getHostElement(), 'click');
+      fixture.detectChanges();
+
+      expect(selected()).toEqual([testListItem1]);
+
+      fixture.componentInstance.multiple = true;
+      fixture.detectChanges();
+
+      expect(selected()).toEqual([testListItem1]);
+
+      dispatchFakeEvent(testListItem2._getHostElement(), 'click');
+      fixture.detectChanges();
+
+      expect(selected()).toEqual([testListItem1, testListItem2]);
+
+      fixture.componentInstance.multiple = false;
+      fixture.detectChanges();
+
+      expect(selected()).toEqual([testListItem1]);
+    });
+  });
 });
 
 describe('MatSelectionList with forms', () => {
@@ -1255,7 +1352,8 @@ describe('MatSelectionList with forms', () => {
     id="selection-list-1"
     (selectionChange)="onValueChange($event)"
     [disableRipple]="listRippleDisabled"
-    [color]="selectionListColor">
+    [color]="selectionListColor"
+    [multiple]="multiple">
     <mat-list-option checkboxPosition="before" disabled="true" value="inbox"
                      [color]="firstOptionColor">
       Inbox (disabled selection-option)
@@ -1274,6 +1372,7 @@ describe('MatSelectionList with forms', () => {
 class SelectionListWithListOptions {
   showLastOption: boolean = true;
   listRippleDisabled = false;
+  multiple = true;
   selectionListColor: ThemePalette;
   firstOptionColor: ThemePalette;