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,32 +8,24 @@
 
 import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
 import {SelectionModel} from '@angular/cdk/collections';
-import {Platform} from '@angular/cdk/platform';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   ContentChildren,
   ElementRef,
   EventEmitter,
-  Inject,
   InjectionToken,
   Input,
-  NgZone,
   OnDestroy,
   OnInit,
-  Optional,
   Output,
   QueryList,
   ViewChild,
   ViewEncapsulation,
+  inject,
 } from '@angular/core';
-import {
-  MAT_RIPPLE_GLOBAL_OPTIONS,
-  RippleGlobalOptions,
-  ThemePalette,
-} from '@angular/material-experimental/mdc-core';
-import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
+import {ThemePalette} from '@angular/material-experimental/mdc-core';
 import {MatListBase, MatListItemBase} from './list-base';
 import {LIST_OPTION, ListOption, MatListOptionCheckboxPosition} from './list-option-types';
 import {MatListItemLine, MatListItemTitle} from './list-item-sections';
@@ -56,8 +48,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 +76,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 +92,9 @@ 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>;
+
+  private _selectionList = inject(SELECTION_LIST);
+  private _changeDetectorRef = inject(ChangeDetectorRef);
 
   /**
    * Emits when the selected state of the option has changed.
@@ -158,24 +155,6 @@ export class MatListOption extends MatListItemBase implements ListOption, OnInit
    */
   private _inputsInitialized = false;
 
-  constructor(
-    element: ElementRef,
-    ngZone: NgZone,
-    platform: Platform,
-    @Inject(SELECTION_LIST) public _selectionList: SelectionList,
-    private _changeDetectorRef: ChangeDetectorRef,
-    @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');
-  }
-
   ngOnInit() {
     const list = this._selectionList;
 
@@ -221,6 +200,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 +268,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 + '');
+  }
 }