refactor(material/list): remove deprecated APIs for v12

Cleans up the deprecated APIs for v12 from the `material/list` package.

BREAKING CHANGES:
* The `mat-list-item-avatar` CSS class has been replaced with `mat-list-item-with-avatar`.
* `MatSelectionListChange.option` has been removed. Use `MatSelectionListChange.options` instead.
* `MatListItemHarnessBase.getHarnessLoaderForContent` has been removed. Use
`MatListItemHarnessBase.getChildLoader(MatListItemSection.CONTENT)` instead.
* The `tabIndex` input has been removed from `MatSelectionList`.
* The `MatSelectionList` constructor has been changed to remove the `tabIndex` parameter and to
turn `_focusMonitor` into a required parameter.

Author: crisbeto

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

@@ -46,12 +46,6 @@ export class MatSelectionListChange {
   constructor(
     /** Reference to the selection list that emitted the event. */
     public source: MatSelectionList,
-    /**
-     * Reference to the option that has been changed.
-     * @deprecated Use `options` instead, because some events may change more than one option.
-     * @breaking-change 12.0.0
-     */
-    public option: MatListOption,
     /** Reference to the options that have been changed. */
     public options: MatListOption[]) {}
 }
@@ -216,7 +210,7 @@ export class MatSelectionList extends MatInteractiveListBase<MatListOption>
 
   /** Emits a change event if the selected state of an option changed. */
   _emitChangeEvent(options: MatListOption[]) {
-    this.selectionChange.emit(new MatSelectionListChange(this, options[0], options));
+    this.selectionChange.emit(new MatSelectionListChange(this, options));
   }
 
   /** Implemented as part of ControlValueAccessor. */

src/material/list/list.ts

@@ -184,8 +184,6 @@ export class MatListSubheaderCssMatStyler {}
   host: {
     'class': 'mat-list-item mat-focus-indicator',
     '[class.mat-list-item-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',
   },
   inputs: ['disableRipple'],

src/material/list/selection-list.ts

@@ -19,7 +19,6 @@ import {
 } from '@angular/cdk/keycodes';
 import {
   AfterContentInit,
-  Attribute,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -72,12 +71,6 @@ export class MatSelectionListChange {
   constructor(
     /** Reference to the selection list that emitted the event. */
     public source: MatSelectionList,
-    /**
-     * Reference to the option that has been changed.
-     * @deprecated Use `options` instead, because some events may change more than one option.
-     * @breaking-change 12.0.0
-     */
-    public option: MatListOption,
     /** Reference to the options that have been changed. */
     public options: MatListOption[]) {}
 }
@@ -358,12 +351,6 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements CanD
   @Output() readonly selectionChange: EventEmitter<MatSelectionListChange> =
       new EventEmitter<MatSelectionListChange>();
 
-  /**
-   * Tabindex of the selection list.
-   * @breaking-change 11.0.0 Remove `tabIndex` input.
-   */
-  @Input() tabIndex: number = 0;
-
   /** Theme color of the selection list. This sets the checkbox color for all list options. */
   @Input() color: ThemePalette = 'accent';
 
@@ -427,11 +414,8 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements CanD
   private _isDestroyed: boolean;
 
   constructor(private _element: ElementRef<HTMLElement>,
-    // @breaking-change 11.0.0 Remove `tabIndex` parameter.
-    @Attribute('tabindex') tabIndex: string,
-    private _changeDetector: ChangeDetectorRef,
-    // @breaking-change 11.0.0 `_focusMonitor` parameter to become required.
-    private _focusMonitor?: FocusMonitor) {
+              private _changeDetector: ChangeDetectorRef,
+              private _focusMonitor: FocusMonitor) {
     super();
   }
 
@@ -476,8 +460,7 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements CanD
       }
     });
 
-    // @breaking-change 11.0.0 Remove null assertion once _focusMonitor is required.
-    this._focusMonitor?.monitor(this._element)
+    this._focusMonitor.monitor(this._element)
       .pipe(takeUntil(this._destroyed))
       .subscribe(origin => {
         if (origin === 'keyboard' || origin === 'program') {
@@ -505,8 +488,7 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements CanD
   }
 
   ngOnDestroy() {
-    // @breaking-change 11.0.0 Remove null assertion once _focusMonitor is required.
-    this._focusMonitor?.stopMonitoring(this._element);
+    this._focusMonitor.stopMonitoring(this._element);
     this._destroyed.next();
     this._destroyed.complete();
     this._isDestroyed = true;
@@ -599,7 +581,7 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements CanD
 
   /** Emits a change event if the selected state of an option changed. */
   _emitChangeEvent(options: MatListOption[]) {
-    this.selectionChange.emit(new MatSelectionListChange(this, options[0], options));
+    this.selectionChange.emit(new MatSelectionListChange(this, options));
   }
 
   /** Implemented as part of ControlValueAccessor. */

src/material/list/testing/list-item-harness-base.ts

@@ -9,7 +9,6 @@
 import {
   ComponentHarness,
   ComponentHarnessConstructor,
-  HarnessLoader,
   HarnessPredicate,
   ContentContainerComponentHarness,
   parallel,
@@ -88,13 +87,4 @@ export abstract class MatListItemHarnessBase
   async hasIcon(): Promise<boolean> {
     return !!await this._icon();
   }
-
-  /**
-   * Gets a `HarnessLoader` used to get harnesses within the list item's content.
-   * @deprecated Use `getChildLoader(MatListItemSection.CONTENT)` or `getHarness` instead.
-   * @breaking-change 12.0.0
-   */
-  async getHarnessLoaderForContent(): Promise<HarnessLoader> {
-    return this.getChildLoader(MatListItemSection.CONTENT);
-  }
 }

src/material/schematics/ng-update/data/constructor-checks.ts

@@ -18,6 +18,10 @@ export const constructorChecks: VersionChanges<ConstructorChecksUpgradeData> = {
     {
       pr: 'https://github.com/angular/components/pull/21897',
       changes: ['MatTooltip']
+    },
+    {
+      pr: 'https://github.com/angular/components/issues/21974',
+      changes: ['MatSelectionList']
     }
   ],
   [TargetVersion.V11]: [

src/material/schematics/ng-update/data/css-selectors.ts

@@ -28,6 +28,14 @@ export interface MaterialCssSelectorData {
 }
 
 export const cssSelectors: VersionChanges<MaterialCssSelectorData> = {
+  [TargetVersion.V12]: [
+    {
+      pr: 'https://github.com/angular/components/issues/21974',
+      changes: [
+        {replace: '.mat-list-item-avatar', replaceWith: '.mat-list-item-with-avatar'}
+      ]
+    }
+  ],
   [TargetVersion.V6]: [
     {
       pr: 'https://github.com/angular/components/pull/10296',

src/material/schematics/ng-update/data/property-names.ts

@@ -9,6 +9,31 @@
 import {PropertyNameUpgradeData, TargetVersion, VersionChanges} from '@angular/cdk/schematics';
 
 export const propertyNames: VersionChanges<PropertyNameUpgradeData> = {
+  [TargetVersion.V12]: [
+    {
+      pr: 'https://github.com/angular/components/issues/21974',
+      changes: [
+        {
+          replace: 'option',
+          replaceWith: 'options',
+          limitedTo: {classes: ['MatSelectionListChange']}
+        },
+        {
+          replace: 'getHarnessLoaderForContent',
+          replaceWith: 'getChildLoader',
+          limitedTo: {
+            classes: [
+              'MatListItemHarnessBase',
+              'MatActionListItemHarness',
+              'MatListItemHarness',
+              'MatNavListItemHarness',
+              'MatListOptionHarness'
+            ]
+          }
+        }
+      ]
+    }
+  ],
   [TargetVersion.V11]: [
     {
       pr: 'https://github.com/angular/components/pull/20449',

tools/public_api_guard/material/list.d.ts

@@ -116,8 +116,7 @@ export declare class MatSelectionList extends _MatSelectionListMixinBase impleme
     options: QueryList<MatListOption>;
     selectedOptions: SelectionModel<MatListOption>;
     readonly selectionChange: EventEmitter<MatSelectionListChange>;
-    tabIndex: number;
-    constructor(_element: ElementRef<HTMLElement>, tabIndex: string, _changeDetector: ChangeDetectorRef, _focusMonitor?: FocusMonitor | undefined);
+    constructor(_element: ElementRef<HTMLElement>, _changeDetector: ChangeDetectorRef, _focusMonitor: FocusMonitor);
     _emitChangeEvent(options: MatListOption[]): void;
     _keydown(event: KeyboardEvent): void;
     _removeOptionFromList(option: MatListOption): MatListOption | null;
@@ -136,16 +135,14 @@ export declare class MatSelectionList extends _MatSelectionListMixinBase impleme
     static ngAcceptInputType_disableRipple: BooleanInput;
     static ngAcceptInputType_disabled: BooleanInput;
     static ngAcceptInputType_multiple: BooleanInput;
-    static ɵcmp: i0.ɵɵComponentDefWithMeta<MatSelectionList, "mat-selection-list", ["matSelectionList"], { "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; "color": "color"; "compareWith": "compareWith"; "disabled": "disabled"; "multiple": "multiple"; }, { "selectionChange": "selectionChange"; }, ["options"], ["*"]>;
-    static ɵfac: i0.ɵɵFactoryDef<MatSelectionList, [null, { attribute: "tabindex"; }, null, null]>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MatSelectionList, "mat-selection-list", ["matSelectionList"], { "disableRipple": "disableRipple"; "color": "color"; "compareWith": "compareWith"; "disabled": "disabled"; "multiple": "multiple"; }, { "selectionChange": "selectionChange"; }, ["options"], ["*"]>;
+    static ɵfac: i0.ɵɵFactoryDef<MatSelectionList, never>;
 }
 
 export declare class MatSelectionListChange {
-    option: MatListOption;
     options: MatListOption[];
     source: MatSelectionList;
     constructor(
     source: MatSelectionList,
-    option: MatListOption,
     options: MatListOption[]);
 }