add adapter for MDCList

Author: mmalerba

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

@@ -11,12 +11,15 @@ import {
   AfterContentInit,
   Directive,
   ElementRef,
+  forwardRef,
   HostBinding,
   NgZone,
   OnDestroy,
-  QueryList
+  QueryList,
+  ViewChildren
 } from '@angular/core';
 import {RippleConfig, RippleRenderer, RippleTarget, setLines} from '@angular/material/core';
+import {MDCListAdapter} from '@material/list';
 import {Subscription} from 'rxjs';
 import {startWith} from 'rxjs/operators';
 
@@ -37,6 +40,46 @@ export abstract class MatListBase {
   // tslint:disable-next-line:no-host-decorator-in-concrete
   @HostBinding('class.mdc-list--non-interactive')
   _isNonInteractive: boolean = false;
+
+  @ViewChildren(forwardRef(() => MatListItemBase)) _items: QueryList<MatListItemBase>;
+
+  protected adapter: MDCListAdapter = {
+    getListItemCount: () => this._items.length,
+    listItemAtIndexHasClass:
+        (index, className) => this._itemAtIndex(index)._element.classList.contains(className),
+    addClassForElementIndex:
+        (index, className) => this._itemAtIndex(index)._element.classList.add(className),
+    removeClassForElementIndex:
+        (index, className) => this._itemAtIndex(index)._element.classList.remove(className),
+    getAttributeForElementIndex:
+        (index, attr) => this._itemAtIndex(index)._element.getAttribute(attr),
+    setAttributeForElementIndex:
+        (index, attr, value) => this._itemAtIndex(index)._element.setAttribute(attr, value),
+    setTabIndexForListItemChildren:
+        (index, value) => this._itemAtIndex(index)._element.tabIndex = value as unknown as number,
+    getFocusedElementIndex:
+        () => this._items.map(i => i._element).findIndex(e => e === this.doc?.activeELement),
+    isFocusInsideList: () => this.element.nativeElement.contains(this.doc?.activeElement),
+    isRootFocused: () => this.element.nativeElement === this.doc?.activeElement,
+    focusItemAtIndex: index =>  this._itemAtIndex(index)._element.focus(),
+
+    // The following methods have a dummy implementation in the base class because they are only
+    // applicable to certain types of lists
+    hasCheckboxAtIndex: () => false,
+    hasRadioAtIndex: () => false,
+    setCheckedCheckboxOrRadioAtIndex: () => {},
+    isCheckboxCheckedAtIndex: () => false,
+    notifyAction: () => {},
+
+    // TODO(mmalerba): Determine if we need to implement this.
+    getPrimaryTextAtIndex: () => '',
+  };
+
+  constructor(protected element: ElementRef<HTMLElement>, protected doc: any) {}
+
+  private _itemAtIndex(index: number): MatListItemBase {
+    return this._items.toArray()[index];
+  }
 }
 
 @Directive()
@@ -49,20 +92,22 @@ export abstract class MatListItemBase implements AfterContentInit, OnDestroy, Ri
   // TODO(mmalerba): Add @Input for disabling ripple.
   rippleDisabled: boolean;
 
+  _element: HTMLElement;
+
   private _subscriptions = new Subscription();
 
   private _rippleRenderer: RippleRenderer;
 
-  constructor(protected _element: ElementRef, protected _ngZone: NgZone, listBase: MatListBase,
-              platform: Platform) {
-    const el = this._element.nativeElement;
+  constructor(private _elementRef: ElementRef<HTMLElement>, protected _ngZone: NgZone,
+              listBase: MatListBase, platform: Platform) {
+    this._element = this._elementRef.nativeElement;
     this.rippleDisabled = listBase._isNonInteractive;
     if (!listBase._isNonInteractive) {
-      el.classList.add('mat-mdc-list-item-interactive');
+      this._element.classList.add('mat-mdc-list-item-interactive');
     }
     this._rippleRenderer =
-        new RippleRenderer(this, this._ngZone, el, platform);
-    this._rippleRenderer.setupTriggerEvents(el);
+        new RippleRenderer(this, this._ngZone, this._element, platform);
+    this._rippleRenderer.setupTriggerEvents(this._element);
   }
 
   ngAfterContentInit() {
@@ -77,14 +122,14 @@ export abstract class MatListItemBase implements AfterContentInit, OnDestroy, Ri
     this._ngZone.runOutsideAngular(() => {
       this._subscriptions.add(this.lines.changes.pipe(startWith(this.lines))
           .subscribe((lines: QueryList<ElementRef<Element>>) => {
-            this._element.nativeElement.classList
+            this._element.classList
                 .toggle('mat-mdc-list-item-single-line', lines.length <= 1);
             lines.forEach((line: ElementRef<Element>, index: number) => {
               toggleClass(line.nativeElement,
                   'mdc-list-item__primary-text', index === 0 && lines.length > 1);
               toggleClass(line.nativeElement, 'mdc-list-item__secondary-text', index !== 0);
             });
-            setLines(lines, this._element, 'mat-mdc');
+            setLines(lines, this._elementRef, 'mat-mdc');
           }));
     });
   }

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

@@ -79,6 +79,9 @@ export class MatList extends MatListBase {
   templateUrl: 'list-item.html',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {provide: MatListItemBase, useExisting: MatListItem},
+  ]
 })
 export class MatListItem extends MatListItemBase {
   @ContentChildren(MatLine, {read: ElementRef, descendants: true}) lines:

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

@@ -95,6 +95,9 @@ export class MatSelectionList extends MatListBase implements ControlValueAccesso
   templateUrl: 'list-option.html',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {provide: MatListItemBase, useExisting: MatListOption},
+  ]
 })
 export class MatListOption extends MatListItemBase {
   static ngAcceptInputType_disabled: BooleanInput;