feat(mdc-list): add list-option template (#19327)

* feat(material-expeirmental/mdc-list): add support for focus/hover states
and ripples

* add state styles

* add demo and stub implementation for mdc-based selection-list

* reduce the number of ng-template's needed in list-item and list-option

* address comments

Author: mmalerba

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

@@ -116,6 +116,68 @@ <h2>Action list</h2>
   <div>
     <h2>Selection list</h2>
 
-    TODO: Implement MDC-based selection list.
+    <mat-selection-list #groceries [ngModel]="selectedOptions"
+                        (ngModelChange)="onSelectedOptionsChange($event)"
+                        (change)="changeEventCount = changeEventCount + 1"
+                        [disabled]="selectionListDisabled"
+                        [disableRipple]="selectionListRippleDisabled"
+                        color="primary">
+      <div mat-subheader>Groceries</div>
+
+      <mat-list-option value="bananas" checkboxPosition="before">Bananas</mat-list-option>
+      <mat-list-option selected value="oranges">Oranges</mat-list-option>
+      <mat-list-option value="apples" color="accent">Apples</mat-list-option>
+      <mat-list-option value="strawberries" color="warn">Strawberries</mat-list-option>
+    </mat-selection-list>
+
+    <mat-selection-list [disableRipple]="selectionListRippleDisabled">
+      <div mat-subheader>Dogs</div>
+
+      <mat-list-option checkboxPosition="before">
+        <img matListAvatar src="https://material.angular.io/assets/img/examples/shiba1.jpg">
+        <span matLine>Shiba Inu</span>
+      </mat-list-option>
+
+      <mat-list-option checkboxPosition="after">
+        <img matListAvatar src="https://material.angular.io/assets/img/examples/shiba2.jpg">
+        <span matLine>Other Shiba Inu</span>
+      </mat-list-option>
+    </mat-selection-list>
+
+    <p>Selected: {{selectedOptions | json}}</p>
+    <p>Change Event Count {{changeEventCount}}</p>
+    <p>Model Change Event Count {{modelChangeEventCount}}</p>
+    <p>
+      <mat-checkbox [(ngModel)]="selectionListDisabled">
+        Disable Selection List
+      </mat-checkbox>
+    </p>
+    <p>
+      <mat-checkbox [(ngModel)]="selectionListRippleDisabled">
+        Disable Selection List ripples
+      </mat-checkbox>
+    </p>
+    <p>
+      <button mat-raised-button (click)="groceries.selectAll()">Select all</button>
+      <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">
+      <div mat-subheader>Favorite Grocery</div>
+
+      <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/material-experimental/mdc-list/BUILD.bazel

@@ -22,6 +22,7 @@ ng_module(
     assets = [":list_scss"] + glob(["**/*.html"]),
     module_name = "@angular/material-experimental/mdc-list",
     deps = [
+        "//src/cdk/collections",
         "//src/material/divider",
         "@npm//@angular/core",
         "@npm//@angular/forms",

src/material-experimental/mdc-list/list-base.ts

@@ -46,6 +46,7 @@ export abstract class MatListItemBase implements AfterContentInit, OnDestroy, Ri
 
   rippleConfig: RippleConfig = {};
 
+  // TODO(mmalerba): Add @Input for disabling ripple.
   rippleDisabled: boolean;
 
   private _subscriptions = new Subscription();

src/material-experimental/mdc-list/list-option.html

@@ -1 +1,25 @@
-TODO: Implement.
+<!-- Save icons and unclassified content to be placed later. -->
+<ng-template #icons>
+  <ng-content select="[mat-list-avatar],[matListAvatar],[mat-list-icon],[matListIcon]"></ng-content>
+</ng-template>
+<ng-template #unsortedContent>
+  <ng-content></ng-content>
+</ng-template>
+
+<!-- Prefix -->
+<span class="mdc-list-item__graphic" *ngIf="checkboxPosition !== 'after' else icons">
+  <mat-pseudo-checkbox></mat-pseudo-checkbox>
+</span>
+<!-- Text -->
+<span class="mdc-list-item__text">
+  <ng-content *ngIf="lines.length else unsortedContent" select="[mat-line],[matLine]"></ng-content>
+</span>
+<!-- Suffix -->
+<span class="mdc-list-item__meta">
+  <span class="mdc-list-item__graphic" *ngIf="checkboxPosition === 'after' else icons">
+    <mat-pseudo-checkbox></mat-pseudo-checkbox>
+  </span>
+  <ng-container *ngIf="lines.length" [ngTemplateOutlet]="unsortedContent"></ng-container>
+</span>
+<!-- Divider -->
+<ng-content select="mat-divider"></ng-content>

src/material-experimental/mdc-list/list.scss

@@ -108,3 +108,11 @@
   right: 0;
   opacity: 0;
 }
+
+// Normally the `.mdc-list-item__meta` class would be applied to the icon or checkbox directly.
+// However, we need to group multiple potential `ng-content` blocks inside the meta section, so we
+// add them as children instead. These styles ensure that they are properly aligned.
+.mat-mdc-list-option .mdc-list-item__meta .mdc-list-item__graphic {
+  margin-right: 0;
+  vertical-align: middle;
+}

src/material-experimental/mdc-list/module.ts

@@ -8,7 +8,7 @@
 
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLineModule, MatRippleModule} from '@angular/material/core';
+import {MatLineModule, MatPseudoCheckboxModule, MatRippleModule} from '@angular/material/core';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatActionList} from './action-list';
 import {
@@ -26,6 +26,7 @@ import {MatListOption, MatSelectionList} from './selection-list';
     CommonModule,
     MatLineModule,
     MatRippleModule,
+    MatPseudoCheckboxModule,
   ],
   exports: [
     MatList,

src/material-experimental/mdc-list/selection-list.html

@@ -6,19 +6,24 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {BooleanInput} from '@angular/cdk/coercion';
+import {SelectionModel} from '@angular/cdk/collections';
 import {Platform} from '@angular/cdk/platform';
 import {
   ChangeDetectionStrategy,
   Component,
   ContentChildren,
   ElementRef,
+  EventEmitter,
   forwardRef,
+  Input,
   NgZone,
+  Output,
   QueryList,
   ViewEncapsulation
 } from '@angular/core';
-import {NG_VALUE_ACCESSOR} from '@angular/forms';
-import {MatLine} from '@angular/material/core';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+import {MatLine, ThemePalette} from '@angular/material/core';
 import {MatListBase, MatListItemBase} from './list-base';
 
 const MAT_SELECTION_LIST_VALUE_ACCESSOR: any = {
@@ -40,9 +45,10 @@ export class MatSelectionListChange {
   selector: 'mat-selection-list',
   exportAs: 'matSelectionList',
   host: {
-    'class': 'mat-mdc-selection-list mat-mdc-list-base'
+    'class': 'mat-mdc-selection-list mat-mdc-list-base mdc-list',
+    'role': 'listbox',
   },
-  templateUrl: 'selection-list.html',
+  template: '<ng-content></ng-content>',
   styleUrls: ['list.css'],
   encapsulation: ViewEncapsulation.None,
   providers: [
@@ -51,23 +57,68 @@ export class MatSelectionListChange {
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MatSelectionList extends MatListBase {}
+export class MatSelectionList extends MatListBase implements ControlValueAccessor {
+  // TODO: Implement these inputs.
+  @Input() disableRipple: boolean;
+  @Input() tabIndex: number;
+  @Input() color: ThemePalette;
+  @Input() compareWith: (o1: any, o2: any) => boolean;
+  @Input() disabled: boolean;
+  @Input() multiple: boolean;
+
+  // TODO: Implement these inputs.
+  @Output() readonly selectionChange = new EventEmitter<MatSelectionListChange>();
+
+  @ContentChildren(forwardRef(() => MatListOption), {descendants: true}) options:
+      QueryList<MatListOption>;
+
+  // TODO: Implement these properties.
+  selectedOptions: SelectionModel<MatListOption>;
+
+  // TODO: Implement these methods.
+  focus(options?: FocusOptions) {}
+  selectAll() {}
+  deselectAll() {}
+  registerOnChange(fn: any) {}
+  registerOnTouched(fn: any) {}
+  writeValue(obj: any) {}
+}
 
 @Component({
   selector: 'mat-list-option',
   exportAs: 'matListOption',
   host: {
-    'class': 'mat-mdc-list-item mat-mdc-list-option',
+    'class': 'mat-mdc-list-item mat-mdc-list-option mdc-list-item',
+    'role': 'option',
+    'tabindex': '-1',
   },
   templateUrl: 'list-option.html',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatListOption extends MatListItemBase {
+  static ngAcceptInputType_disabled: BooleanInput;
+  static ngAcceptInputType_selected: BooleanInput;
+  static ngAcceptInputType_disableRipple: BooleanInput;
+
   @ContentChildren(MatLine, {read: ElementRef, descendants: true}) lines:
       QueryList<ElementRef<Element>>;
 
-  constructor(element: ElementRef, ngZone: NgZone, listBase: MatListBase, platform: Platform) {
+  // TODO: Implement these inputs.
+  @Input() disableRipple: boolean;
+  @Input() checkboxPosition: 'before' | 'after' = 'before';
+  @Input() color: ThemePalette;
+  @Input() value: any;
+  @Input() disabled: boolean;
+  @Input() selected: boolean;
+
+  constructor(element: ElementRef, ngZone: NgZone, listBase: MatListBase, platform: Platform,
+              public selectionList: MatSelectionList) {
     super(element, ngZone, listBase, platform);
   }
+
+  // TODO: Implement these methods.
+  getLabel() { return ''; }
+  focus() {}
+  toggle() {}
 }

src/material-experimental/mdc-list/selection-list.ts

@@ -32,6 +32,7 @@ import {
   forwardRef,
   Inject,
   Input,
+  isDevMode,
   OnChanges,
   OnDestroy,
   OnInit,
@@ -40,7 +41,6 @@ import {
   SimpleChanges,
   ViewChild,
   ViewEncapsulation,
-  isDevMode,
 } from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {
@@ -51,19 +51,14 @@ import {
   setLines,
   ThemePalette,
 } from '@angular/material/core';
-
 import {Subject} from 'rxjs';
 import {startWith, takeUntil} from 'rxjs/operators';
-
 import {MatListAvatarCssMatStyler, MatListIconCssMatStyler} from './list';
 
-
-/** @docs-private */
 class MatSelectionListBase {}
 const _MatSelectionListMixinBase: CanDisableRippleCtor & typeof MatSelectionListBase =
     mixinDisableRipple(MatSelectionListBase);
 
-/** @docs-private */
 class MatListOptionBase {}
 const _MatListOptionMixinBase: CanDisableRippleCtor & typeof MatListOptionBase =
     mixinDisableRipple(MatListOptionBase);