fix(material/list): allow mat-list-item outside list (#26092)

In the MDC-based list having a `MatListItem` outside of a list throws a DI error, whereas in the legacy version it didn't. These changes make injecting the list optional and try to gracefully handle the absence of a list.

I've also removed the `mat-mdc-list-non-interactive` class since the same can be achieved without it.

Fixes #26013.

(cherry picked from commit 936741c)

Author: crisbeto

src/material/list/list-base.ts

@@ -38,7 +38,6 @@ import {
 
 @Directive({
   host: {
-    '[class.mat-mdc-list-non-interactive]': '_isNonInteractive',
     '[attr.aria-disabled]': 'disabled',
   },
 })
@@ -121,7 +120,10 @@ export abstract class MatListItemBase implements AfterViewInit, OnDestroy, Rippl
   @Input()
   get disableRipple(): boolean {
     return (
-      this.disabled || this._disableRipple || this._listBase.disableRipple || this._noopAnimations
+      this.disabled ||
+      this._disableRipple ||
+      this._noopAnimations ||
+      !!this._listBase?.disableRipple
     );
   }
   set disableRipple(value: boolean) {
@@ -132,7 +134,7 @@ export abstract class MatListItemBase implements AfterViewInit, OnDestroy, Rippl
   /** Whether the list-item is disabled. */
   @Input()
   get disabled(): boolean {
-    return this._disabled || (this._listBase && this._listBase.disabled);
+    return this._disabled || !!this._listBase?.disabled;
   }
   set disabled(value: BooleanInput) {
     this._disabled = coerceBooleanProperty(value);
@@ -162,7 +164,7 @@ export abstract class MatListItemBase implements AfterViewInit, OnDestroy, Rippl
   constructor(
     public _elementRef: ElementRef<HTMLElement>,
     protected _ngZone: NgZone,
-    private _listBase: MatListBase,
+    @Optional() private _listBase: MatListBase | null,
     private _platform: Platform,
     @Optional()
     @Inject(MAT_RIPPLE_GLOBAL_OPTIONS)
@@ -173,7 +175,7 @@ export abstract class MatListItemBase implements AfterViewInit, OnDestroy, Rippl
     this._hostElement = this._elementRef.nativeElement;
     this._noopAnimations = animationMode === 'NoopAnimations';
 
-    if (!this._listBase._isNonInteractive) {
+    if (_listBase && !_listBase._isNonInteractive) {
       this._initInteractiveListItem();
     }
 

src/material/list/list.scss

@@ -33,6 +33,12 @@ a.mdc-list-item--activated {
 .mat-mdc-list-option {
   width: 100%;
   box-sizing: border-box;
+
+  // MDC always sets the cursor to `pointer`. We do not want to show this for non-interactive
+  // lists. See: https://github.com/material-components/material-components-web/issues/6443
+  &:not(.mat-mdc-list-item-interactive) {
+    cursor: default;
+  }
 }
 
 // MDC doesn't have list dividers, so we use mat-divider and style appropriately.
@@ -64,12 +70,6 @@ a.mdc-list-item--activated {
   pointer-events: none;
 }
 
-// MDC always sets the cursor to `pointer`. We do not want to show this for non-interactive
-// lists. See: https://github.com/material-components/material-components-web/issues/6443
-.mat-mdc-list-non-interactive .mdc-list-item {
-  cursor: default;
-}
-
 // The MDC-based list items already use the `::before` pseudo element for the standard
 // focus/selected/hover state. Hence, we need to have a separate list-item spanning
 // element that can be used for strong focus indicators.

src/material/list/list.spec.ts

@@ -23,6 +23,7 @@ describe('MDC-based MatList', () => {
         ActionListWithoutType,
         ActionListWithType,
         ListWithDisabledItems,
+        StandaloneListItem,
       ],
     });
 
@@ -369,6 +370,13 @@ describe('MDC-based MatList', () => {
 
     expect(listItems.every(item => item.classList.contains('mdc-list-item--disabled'))).toBe(true);
   });
+
+  it('should allow a list item outside of a list', () => {
+    expect(() => {
+      const fixture = TestBed.createComponent(StandaloneListItem);
+      fixture.detectChanges();
+    }).not.toThrow();
+  });
 });
 
 class BaseTestList {
@@ -558,3 +566,8 @@ class ListWithDisabledItems {
   firstItemDisabled = false;
   listDisabled = false;
 }
+
+@Component({
+  template: `<mat-list-item></mat-list-item>`,
+})
+class StandaloneListItem {}

src/material/list/list.ts

@@ -84,7 +84,7 @@ export class MatListItem extends MatListItemBase {
   constructor(
     element: ElementRef,
     ngZone: NgZone,
-    listBase: MatListBase,
+    @Optional() listBase: MatListBase | null,
     platform: Platform,
     @Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS) globalRippleOptions?: RippleGlobalOptions,
     @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string,

tools/public_api_guard/material/list.md

@@ -58,7 +58,7 @@ export class MatList extends MatListBase {
 
 // @public (undocumented)
 export class MatListItem extends MatListItemBase {
-    constructor(element: ElementRef, ngZone: NgZone, listBase: MatListBase, platform: Platform, globalRippleOptions?: RippleGlobalOptions, animationMode?: string);
+    constructor(element: ElementRef, ngZone: NgZone, listBase: MatListBase | null, platform: Platform, globalRippleOptions?: RippleGlobalOptions, animationMode?: string);
     get activated(): boolean;
     set activated(activated: boolean);
     // (undocumented)
@@ -77,7 +77,7 @@ export class MatListItem extends MatListItemBase {
     // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<MatListItem, "mat-list-item, a[mat-list-item], button[mat-list-item]", ["matListItem"], { "activated": "activated"; }, {}, ["_lines", "_titles", "_meta"], ["[matListItemAvatar],[matListItemIcon]", "[matListItemTitle]", "[matListItemLine]", "*", "[matListItemMeta]", "mat-divider"], false, never>;
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatListItem, [null, null, null, null, { optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatListItem, [null, null, { optional: true; }, null, { optional: true; }, { optional: true; }]>;
 }
 
 // @public