refactor(material-experimental/mdc-list): remove usage of MDC adapter

Reworks our list not to use MDC's adapters.

Author: crisbeto

src/material-experimental/mdc-list/BUILD.bazel

@@ -33,7 +33,6 @@ ng_module(
         "//src/material/list",
         "@npm//@angular/core",
         "@npm//@angular/forms",
-        "@npm//@material/list",
     ],
 )
 
@@ -89,7 +88,6 @@ ng_test_library(
         "//src/material-experimental/mdc-core",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
-        "@npm//@material/list",
     ],
 )
 

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

@@ -125,7 +125,7 @@ export abstract class MatListItemBase implements AfterViewInit, OnDestroy, Rippl
     return this.disableRipple || !!this.rippleConfig.disabled;
   }
 
-  protected constructor(
+  constructor(
     public _elementRef: ElementRef<HTMLElement>,
     protected _ngZone: NgZone,
     private _listBase: MatListBase,
@@ -166,15 +166,6 @@ export abstract class MatListItemBase implements AfterViewInit, OnDestroy, Rippl
     }
   }
 
-  /** Gets the label for the list item. This is used for the typeahead. */
-  _getItemLabel(): string {
-    const titleElement = this._titles?.get(0)?._elementRef.nativeElement;
-    // If there is no explicit title element, the unscoped text content
-    // is treated as the list item title.
-    const labelEl = titleElement ?? this._unscopedContent?.nativeElement;
-    return labelEl ? labelEl.textContent ?? '' : '';
-  }
-
   /** Whether the list item has icons or avatars. */
   _hasIconOrAvatar() {
     return !!(this._avatars.length || this._icons.length);

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

@@ -8,8 +8,8 @@
 
 import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
 import {SelectionModel} from '@angular/cdk/collections';
-import {Platform} from '@angular/cdk/platform';
 import {
+  ANIMATION_MODULE_TYPE,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -33,10 +33,10 @@ import {
   RippleGlobalOptions,
   ThemePalette,
 } from '@angular/material-experimental/mdc-core';
-import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {MatListBase, MatListItemBase} from './list-base';
 import {LIST_OPTION, ListOption, MatListOptionCheckboxPosition} from './list-option-types';
 import {MatListItemLine, MatListItemTitle} from './list-item-sections';
+import {Platform} from '@angular/cdk/platform';
 
 /**
  * Injection token that can be used to reference instances of an `SelectionList`. It serves
@@ -56,8 +56,9 @@ export interface SelectionList extends MatListBase {
   selectedOptions: SelectionModel<MatListOption>;
   compareWith: (o1: any, o2: any) => boolean;
   _value: string[] | null;
-  _reportValueChange: () => void;
-  _onTouched: () => void;
+  _reportValueChange(): void;
+  _emitChangeEvent(options: MatListOption[]): void;
+  _onTouched(): void;
 }
 
 @Component({
@@ -83,7 +84,9 @@ export interface SelectionList extends MatListBase {
     '[class.mat-accent]': 'color !== "primary" && color !== "warn"',
     '[class.mat-warn]': 'color === "warn"',
     '[class._mat-animation-noopable]': '_noopAnimations',
+    '[attr.aria-selected]': 'selected',
     '(blur)': '_handleBlur()',
+    '(click)': '_toggleOnInteraction()',
   },
   templateUrl: 'list-option.html',
   encapsulation: ViewEncapsulation.None,
@@ -97,7 +100,6 @@ export class MatListOption extends MatListItemBase implements ListOption, OnInit
   @ContentChildren(MatListItemLine, {descendants: true}) _lines: QueryList<MatListItemLine>;
   @ContentChildren(MatListItemTitle, {descendants: true}) _titles: QueryList<MatListItemTitle>;
   @ViewChild('unscopedContent') _unscopedContent: ElementRef<HTMLSpanElement>;
-  @ViewChild('text') _itemText: ElementRef<HTMLElement>;
 
   /**
    * Emits when the selected state of the option has changed.
@@ -159,21 +161,17 @@ export class MatListOption extends MatListItemBase implements ListOption, OnInit
   private _inputsInitialized = false;
 
   constructor(
-    element: ElementRef,
+    elementRef: ElementRef<HTMLElement>,
     ngZone: NgZone,
+    @Inject(SELECTION_LIST) private _selectionList: SelectionList,
     platform: Platform,
-    @Inject(SELECTION_LIST) public _selectionList: SelectionList,
     private _changeDetectorRef: ChangeDetectorRef,
-    @Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS) globalRippleOptions?: RippleGlobalOptions,
+    @Optional()
+    @Inject(MAT_RIPPLE_GLOBAL_OPTIONS)
+    globalRippleOptions?: RippleGlobalOptions,
     @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string,
   ) {
-    super(element, ngZone, _selectionList, platform, globalRippleOptions, animationMode);
-
-    // By default, we mark all options as unselected. The MDC list foundation will
-    // automatically update the attribute based on selection. Note that we need to
-    // initially set this because MDC does not set the default attributes for list
-    // items but expects items to be set up properly in the static markup.
-    element.nativeElement.setAttribute('aria-selected', 'false');
+    super(elementRef, ngZone, _selectionList, platform, globalRippleOptions, animationMode);
   }
 
   ngOnInit() {
@@ -221,6 +219,15 @@ export class MatListOption extends MatListItemBase implements ListOption, OnInit
     this._hostElement.focus();
   }
 
+  /** Gets the text label of the list option. Used for the typeahead functionality in the list. */
+  getLabel() {
+    const titleElement = this._titles?.get(0)?._elementRef.nativeElement;
+    // If there is no explicit title element, the unscoped text content
+    // is treated as the list item title.
+    const labelEl = titleElement || this._unscopedContent?.nativeElement;
+    return labelEl?.textContent || '';
+  }
+
   /** Whether a checkbox is shown at the given position. */
   _hasCheckboxAt(position: MatListOptionCheckboxPosition): boolean {
     return this._selectionList.multiple && this._getCheckboxPosition() === position;
@@ -280,4 +287,22 @@ export class MatListOption extends MatListItemBase implements ListOption, OnInit
   _markForCheck() {
     this._changeDetectorRef.markForCheck();
   }
+
+  /** Toggles the option's value based on a user interacion. */
+  _toggleOnInteraction() {
+    if (!this.disabled) {
+      if (this._selectionList.multiple) {
+        this.selected = !this.selected;
+        this._selectionList._emitChangeEvent([this]);
+      } else if (!this.selected) {
+        this.selected = true;
+        this._selectionList._emitChangeEvent([this]);
+      }
+    }
+  }
+
+  /** Sets the tabindex of the list option. */
+  _setTabindex(value: number) {
+    this._hostElement.setAttribute('tabindex', value + '');
+  }
 }