set up MDCListFoundation

Author: mmalerba

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

@@ -7,19 +7,22 @@
  */
 
 import {Platform} from '@angular/cdk/platform';
+import {DOCUMENT} from '@angular/common';
 import {
   AfterContentInit,
+  AfterViewInit,
+  ContentChildren,
   Directive,
   ElementRef,
-  forwardRef,
   HostBinding,
+  HostListener,
+  Inject,
   NgZone,
   OnDestroy,
-  QueryList,
-  ViewChildren
+  QueryList
 } from '@angular/core';
 import {RippleConfig, RippleRenderer, RippleTarget, setLines} from '@angular/material/core';
-import {MDCListAdapter} from '@material/list';
+import {MDCListAdapter, MDCListFoundation} from '@material/list';
 import {Subscription} from 'rxjs';
 import {startWith} from 'rxjs/operators';
 
@@ -31,60 +34,12 @@ function toggleClass(el: Element, className: string, on: boolean) {
   }
 }
 
-@Directive()
-/** @docs-private */
-export abstract class MatListBase {
-  // @HostBinding is used in the class as it is expected to be extended. Since @Component decorator
-  // metadata is not inherited by child classes, instead the host binding data is defined in a way
-  // that can be inherited.
-  // 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()
 /** @docs-private */
 export abstract class MatListItemBase implements AfterContentInit, OnDestroy, RippleTarget {
+  @HostBinding('tabindex')
+  _tabIndex = -1;
+
   lines: QueryList<ElementRef<Element>>;
 
   rippleConfig: RippleConfig = {};
@@ -98,8 +53,8 @@ export abstract class MatListItemBase implements AfterContentInit, OnDestroy, Ri
 
   private _rippleRenderer: RippleRenderer;
 
-  constructor(private _elementRef: ElementRef<HTMLElement>, protected _ngZone: NgZone,
-              listBase: MatListBase, platform: Platform) {
+  protected constructor(private _elementRef: ElementRef<HTMLElement>, protected _ngZone: NgZone,
+                        listBase: MatListBase, platform: Platform) {
     this._element = this._elementRef.nativeElement;
     this.rippleDisabled = listBase._isNonInteractive;
     if (!listBase._isNonInteractive) {
@@ -139,3 +94,90 @@ export abstract class MatListItemBase implements AfterContentInit, OnDestroy, Ri
     this._rippleRenderer._removeTriggerEvents();
   }
 }
+
+@Directive()
+/** @docs-private */
+export abstract class MatListBase implements AfterViewInit, OnDestroy {
+  @HostBinding('class.mdc-list--non-interactive')
+  _isNonInteractive: boolean = false;
+
+  @HostListener('keydown', ['$event'])
+  _handleKeydown(event: KeyboardEvent) {
+    const index = this._indexForElement(event.target as HTMLElement);
+    this._foundation.handleKeydown(
+        event, this._itemAtIndex(index)._element === event.target, index);
+  }
+
+  @HostListener('click', ['$event'])
+  _handleClick(event: MouseEvent) {
+    this._foundation.handleClick(this._indexForElement(event.target as HTMLElement), false);
+  }
+
+  @HostListener('focusin', ['$event'])
+  _handleFocusin(event: FocusEvent) {
+    this._foundation.handleFocusIn(event, this._indexForElement(event.target as HTMLElement));
+  }
+
+  @HostListener('focusout', ['$event'])
+  _handleFocusout(event: FocusEvent) {
+    this._foundation.handleFocusOut(event, this._indexForElement(event.target as HTMLElement));
+  }
+
+  @ContentChildren(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._indexForElement(this._document?.activeELement),
+    isFocusInsideList: () => this._element.nativeElement.contains(this._document?.activeElement),
+    isRootFocused: () => this._element.nativeElement === this._document?.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. They should be implemented for the concrete classes
+    // where they are applicable.
+    hasCheckboxAtIndex: () => false,
+    hasRadioAtIndex: () => false,
+    setCheckedCheckboxOrRadioAtIndex: () => {},
+    isCheckboxCheckedAtIndex: () => false,
+    notifyAction: () => {},
+
+    // TODO(mmalerba): Determine if we need to implement this.
+    getPrimaryTextAtIndex: () => '',
+  };
+
+  protected _foundation: MDCListFoundation;
+
+  constructor(protected _element: ElementRef<HTMLElement>,
+              @Inject(DOCUMENT) protected _document: any) {
+    this._foundation = new MDCListFoundation(this._adapter);
+  }
+
+  ngAfterViewInit() {
+    this._foundation.init();
+    this._foundation.layout();
+  }
+
+  ngOnDestroy() {
+    this._foundation.destroy();
+  }
+
+  private _itemAtIndex(index: number): MatListItemBase {
+    return this._items.toArray()[index];
+  }
+
+  private _indexForElement(element: HTMLElement | null) {
+    return element ? this._items.toArray().findIndex(i => i._element.contains(element)) : -1;
+  }
+}