fix(list): allow for list and list items to be disabled

Adds the ability to disable all variants of the list. Currently it's only the selection list that can be disabled.

Fixes #17574.

Author: crisbeto

src/material/list/list.scss

@@ -278,8 +278,8 @@ mat-action-list {
     font: inherit;
     outline: inherit;
     -webkit-tap-highlight-color: transparent;
-
     text-align: left;
+
     [dir='rtl'] & {
       text-align: right;
     }
@@ -300,6 +300,10 @@ mat-action-list {
   outline: none;
 }
 
+.mat-list-item-disabled {
+  pointer-events: none;
+}
+
 @include cdk-high-contrast {
   .mat-selection-list:focus {
     outline-style: dotted;

src/material/list/list.spec.ts

@@ -16,7 +16,7 @@ describe('MatList', () => {
         ListWithOneAnchorItem, ListWithOneItem, ListWithTwoLineItem, ListWithThreeLineItem,
         ListWithAvatar, ListWithItemWithCssClass, ListWithDynamicNumberOfLines,
         ListWithMultipleItems, ListWithManyLines, NavListWithOneAnchorItem, ActionListWithoutType,
-        ActionListWithType, ListWithIndirectDescendantLines
+        ActionListWithType, ListWithIndirectDescendantLines, ListWithDisabledItems,
       ],
     });
 
@@ -275,6 +275,52 @@ describe('MatList', () => {
     expect(listItems[0].nativeElement.className).toContain('mat-2-line');
     expect(listItems[1].nativeElement.className).toContain('mat-2-line');
   });
+
+  it('should be able to disable a single list item', () => {
+    const fixture = TestBed.createComponent(ListWithDisabledItems);
+    const listItems: HTMLElement[] =
+        Array.from(fixture.nativeElement.querySelectorAll('mat-list-item'));
+    fixture.detectChanges();
+
+    expect(listItems.map(item => {
+      return item.classList.contains('mat-list-item-disabled');
+    })).toEqual([false, false, false]);
+
+    fixture.componentInstance.firstItemDisabled = true;
+    fixture.detectChanges();
+
+    expect(listItems.map(item => {
+      return item.classList.contains('mat-list-item-disabled');
+    })).toEqual([true, false, false]);
+  });
+
+  it('should be able to disable the entire list', () => {
+    const fixture = TestBed.createComponent(ListWithDisabledItems);
+    const listItems: HTMLElement[] =
+        Array.from(fixture.nativeElement.querySelectorAll('mat-list-item'));
+    fixture.detectChanges();
+
+    expect(listItems.every(item => item.classList.contains('mat-list-item-disabled'))).toBe(false);
+
+    fixture.componentInstance.listDisabled = true;
+    fixture.detectChanges();
+
+    expect(listItems.every(item => item.classList.contains('mat-list-item-disabled'))).toBe(true);
+  });
+
+  it('should set aria-disabled on a disabled item', () => {
+    const fixture = TestBed.createComponent(ListWithDisabledItems);
+    const item: HTMLElement = fixture.nativeElement.querySelector('mat-list-item');
+    fixture.detectChanges();
+
+    expect(item.getAttribute('aria-disabled')).toBe('false');
+
+    fixture.componentInstance.firstItemDisabled = true;
+    fixture.detectChanges();
+
+    expect(item.getAttribute('aria-disabled')).toBe('true');
+  });
+
 });
 
 
@@ -425,3 +471,15 @@ class ListWithMultipleItems extends BaseTestList { }
 })
 class ListWithIndirectDescendantLines extends BaseTestList {
 }
+
+
+@Component({template: `
+  <mat-list [disabled]="listDisabled">
+    <mat-list-item [disabled]="firstItemDisabled">One</mat-list-item>
+    <mat-list-item>Two</mat-list-item>
+    <mat-list-item>Three</mat-list-item>
+  </mat-list>`})
+class ListWithDisabledItems {
+  firstItemDisabled = false;
+  listDisabled = false;
+}

src/material/list/list.ts

@@ -20,22 +20,27 @@ import {
   OnChanges,
   OnDestroy,
   ChangeDetectorRef,
+  Input,
 } from '@angular/core';
 import {
+  CanDisable,
+  CanDisableCtor,
   CanDisableRipple,
   CanDisableRippleCtor,
   MatLine,
   setLines,
   mixinDisableRipple,
+  mixinDisabled,
 } from '@angular/material/core';
+import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 
 // Boilerplate for applying mixins to MatList.
 /** @docs-private */
 class MatListBase {}
-const _MatListMixinBase: CanDisableRippleCtor & typeof MatListBase =
-    mixinDisableRipple(MatListBase);
+const _MatListMixinBase: CanDisableRippleCtor & CanDisableCtor & typeof MatListBase =
+    mixinDisabled(mixinDisableRipple(MatListBase));
 
 // Boilerplate for applying mixins to MatListItem.
 /** @docs-private */
@@ -53,12 +58,12 @@ const _MatListItemMixinBase: CanDisableRippleCtor & typeof MatListItemBase =
   },
   templateUrl: 'list.html',
   styleUrls: ['list.css'],
-  inputs: ['disableRipple'],
+  inputs: ['disableRipple', 'disabled'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MatNavList extends _MatListMixinBase implements CanDisableRipple, OnChanges,
-  OnDestroy {
+export class MatNavList extends _MatListMixinBase implements CanDisable, CanDisableRipple,
+  OnChanges, OnDestroy {
   /** Emits when the state of the list changes. */
   _stateChanges = new Subject<void>();
 
@@ -82,11 +87,12 @@ export class MatNavList extends _MatListMixinBase implements CanDisableRipple, O
     'class': 'mat-list mat-list-base'
   },
   styleUrls: ['list.css'],
-  inputs: ['disableRipple'],
+  inputs: ['disableRipple', 'disabled'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MatList extends _MatListMixinBase implements CanDisableRipple, OnChanges, OnDestroy {
+export class MatList extends _MatListMixinBase implements CanDisable, CanDisableRipple, OnChanges,
+  OnDestroy {
   /** Emits when the state of the list changes. */
   _stateChanges = new Subject<void>();
 
@@ -121,6 +127,7 @@ export class MatList extends _MatListMixinBase implements CanDisableRipple, OnCh
   }
 
   static ngAcceptInputType_disableRipple: boolean | string;
+  static ngAcceptInputType_disabled: boolean | string;
 }
 
 /**
@@ -160,6 +167,8 @@ export class MatListSubheaderCssMatStyler {}
   exportAs: 'matListItem',
   host: {
     'class': 'mat-list-item',
+    '[class.mat-list-item-disabled]': 'disabled',
+    '[attr.aria-disabled]': 'disabled',
     // @breaking-change 8.0.0 Remove `mat-list-item-avatar` in favor of `mat-list-item-with-avatar`.
     '[class.mat-list-item-avatar]': '_avatar || _icon',
     '[class.mat-list-item-with-avatar]': '_avatar || _icon',
@@ -204,6 +213,14 @@ export class MatListItem extends _MatListItemMixinBase implements AfterContentIn
     }
   }
 
+  /** Whether the option is disabled. */
+  @Input()
+  get disabled() { return this._disabled || !!(this._list && this._list.disabled); }
+  set disabled(value: boolean) {
+    this._disabled = coerceBooleanProperty(value);
+  }
+  private _disabled = false;
+
   ngAfterContentInit() {
     setLines(this._lines, this._element);
   }
@@ -225,4 +242,5 @@ export class MatListItem extends _MatListItemMixinBase implements AfterContentIn
   }
 
   static ngAcceptInputType_disableRipple: boolean | string;
+  static ngAcceptInputType_disabled: boolean | string;
 }

tools/public_api_guard/material/list.d.ts

@@ -1,12 +1,13 @@
 export declare const MAT_SELECTION_LIST_VALUE_ACCESSOR: any;
 
-export declare class MatList extends _MatListMixinBase implements CanDisableRipple, OnChanges, OnDestroy {
+export declare class MatList extends _MatListMixinBase implements CanDisable, CanDisableRipple, OnChanges, OnDestroy {
     _stateChanges: Subject<void>;
     constructor(_elementRef: ElementRef<HTMLElement>);
     _getListType(): 'list' | 'action-list' | null;
     ngOnChanges(): void;
     ngOnDestroy(): void;
     static ngAcceptInputType_disableRipple: boolean | string;
+    static ngAcceptInputType_disabled: boolean | string;
 }
 
 export declare class MatListAvatarCssMatStyler {
@@ -19,12 +20,14 @@ export declare class MatListItem extends _MatListItemMixinBase implements AfterC
     _avatar: MatListAvatarCssMatStyler;
     _icon: MatListIconCssMatStyler;
     _lines: QueryList<MatLine>;
+    disabled: boolean;
     constructor(_element: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, navList?: MatNavList, list?: MatList);
     _getHostElement(): HTMLElement;
     _isRippleDisabled(): boolean;
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
     static ngAcceptInputType_disableRipple: boolean | string;
+    static ngAcceptInputType_disabled: boolean | string;
 }
 
 export declare class MatListModule {
@@ -64,7 +67,7 @@ export declare class MatListOption extends _MatListOptionMixinBase implements Af
 export declare class MatListSubheaderCssMatStyler {
 }
 
-export declare class MatNavList extends _MatListMixinBase implements CanDisableRipple, OnChanges, OnDestroy {
+export declare class MatNavList extends _MatListMixinBase implements CanDisable, CanDisableRipple, OnChanges, OnDestroy {
     _stateChanges: Subject<void>;
     ngOnChanges(): void;
     ngOnDestroy(): void;