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

and ripples

Author: mmalerba

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

@@ -19,5 +19,10 @@ import {MatListBase} from './list-base';
   styleUrls: ['list.css'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {provide: MatListBase, useExisting: MatActionList},
+  ]
 })
-export class MatActionList extends MatListBase {}
+export class MatActionList extends MatListBase {
+  _hasRipple = true;
+}

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

@@ -6,19 +6,42 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AfterContentInit, ElementRef, NgZone, OnDestroy, QueryList} from '@angular/core';
-import {setLines} from '@angular/material/core';
+import {Platform} from '@angular/cdk/platform';
+import {
+  AfterContentInit,
+  ElementRef,
+  Injectable,
+  NgZone,
+  OnDestroy,
+  QueryList
+} from '@angular/core';
+import {RippleConfig, RippleRenderer, RippleTarget, setLines} from '@angular/material/core';
 import {Subscription} from 'rxjs';
 import {startWith} from 'rxjs/operators';
 
-export class MatListBase {}
+@Injectable()
+export class MatListBase {
+  _hasRipple = false;
+}
 
-export class MatListItemBase implements AfterContentInit, OnDestroy {
+export class MatListItemBase implements AfterContentInit, OnDestroy, RippleTarget {
   lines: QueryList<ElementRef<Element>>;
 
+  rippleConfig: RippleConfig = {};
+
+  rippleDisabled: boolean;
+
   private _subscriptions = new Subscription();
 
-  constructor(protected _element: ElementRef, protected _ngZone: NgZone) {}
+  private _rippleRenderer: RippleRenderer;
+
+  constructor(protected _element: ElementRef, protected _ngZone: NgZone, listBase: MatListBase,
+              platform: Platform) {
+    this.rippleDisabled = !listBase._hasRipple;
+    this._rippleRenderer =
+        new RippleRenderer(this, this._ngZone, this._element.nativeElement, platform);
+    this._rippleRenderer.setupTriggerEvents(this._element.nativeElement);
+  }
 
   ngAfterContentInit() {
     this._monitorLines();
@@ -43,5 +66,6 @@ export class MatListItemBase implements AfterContentInit, OnDestroy {
 
   ngOnDestroy() {
     this._subscriptions.unsubscribe();
+    this._rippleRenderer._removeTriggerEvents();
   }
 }

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

@@ -63,6 +63,20 @@
   }
 }
 
+.mat-mdc-list-avatar {
+  // MDC's styles don't specify this, but they probably should. It gives a nicer experience when the
+  // image is not 1:1 aspect ratio.
+  object-fit: cover;
+}
+
+// MDC expects that the list items are always `<li>`, since we actually use `<button>` in some
+// cases, we need to make sure it expands to fill the available width.
+.mat-mdc-list-item,
+.mat-mdc-list-option {
+  width: 100%;
+  box-sizing: border-box;
+}
+
 // MDC doesn't have list dividers, so we use mat-divider and style appropriately.
 .mat-mdc-list-item,
 .mat-mdc-list-option {

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

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {Platform} from '@angular/cdk/platform';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -61,6 +62,9 @@ export class MatListSubheaderCssMatStyler {}
   styleUrls: ['list.css'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {provide: MatListBase, useExisting: MatList},
+  ]
 })
 export class MatList extends MatListBase {}
 
@@ -78,7 +82,7 @@ export class MatListItem extends MatListItemBase {
   @ContentChildren(MatLine, {read: ElementRef, descendants: true}) lines:
       QueryList<ElementRef<Element>>;
 
-  constructor(element: ElementRef, ngZone: NgZone) {
-    super(element, ngZone);
+  constructor(element: ElementRef, ngZone: NgZone, listBase: MatListBase, platform: Platform) {
+    super(element, ngZone, listBase, platform);
   }
 }

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

@@ -7,7 +7,7 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatLineModule} from '@angular/material/core';
+import {MatLineModule, MatRippleModule} from '@angular/material/core';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatActionList} from './action-list';
 import {
@@ -21,7 +21,10 @@ import {MatNavList} from './nav-list';
 import {MatListOption, MatSelectionList} from './selection-list';
 
 @NgModule({
-  imports: [MatLineModule],
+  imports: [
+    MatLineModule,
+    MatRippleModule,
+  ],
   exports: [
     MatList,
     MatActionList,

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

@@ -25,11 +25,14 @@ import {MatListBase} from './list-base';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
+    {provide: MatListBase, useExisting: MatNavList},
     /**
      * @deprecated Provider for `MatList` will be removed, use `MatNavList` instead.
      * @breaking-change 11.0.0
      */
-    {provide: MatList, useExisting: MatNavList}
+    {provide: MatList, useExisting: MatNavList},
   ]
 })
-export class MatNavList extends MatListBase {}
+export class MatNavList extends MatListBase {
+  _hasRipple = true;
+}

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

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {Platform} from '@angular/cdk/platform';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -44,8 +45,11 @@ export class MatSelectionListChange {
   templateUrl: 'selection-list.html',
   styleUrls: ['list.css'],
   encapsulation: ViewEncapsulation.None,
-  providers: [MAT_SELECTION_LIST_VALUE_ACCESSOR],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  providers: [
+    MAT_SELECTION_LIST_VALUE_ACCESSOR,
+    {provide: MatListBase, useExisting: MatSelectionList}
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatSelectionList extends MatListBase {}
 
@@ -63,7 +67,7 @@ export class MatListOption extends MatListItemBase {
   @ContentChildren(MatLine, {read: ElementRef, descendants: true}) lines:
       QueryList<ElementRef<Element>>;
 
-  constructor(element: ElementRef, ngZone: NgZone) {
-    super(element, ngZone);
+  constructor(element: ElementRef, ngZone: NgZone, listBase: MatListBase, platform: Platform) {
+    super(element, ngZone, listBase, platform);
   }
 }