fix(multiple): remove unnecessary base classes (#27632)

* fix(material/autocomplete): remove base classes

* fix(material/checkbox): remove base classes

* fix(material/dialog): remove base classes

* fix(material/form-field): remove base classes

* fix(material/menu): remove base classes

* fix(material/paginator): remove base classes

* fix(material/radio): remove base classes

* fix(material/select): remove base classes

* fix(material/slide-toggle): remove base classes

* fix(material/snack-bar): remove base classes

* fix(material/table): remove base classes

* fix(material/tabs): remove base classes

* fix(material/tooltip): remove base classes

* fix(material/core): remove base classes

* fix(material/menu): fix harness test

* fix(multiple): update API goldens

* fix(multiple): update API to match previous accesible members

Author: andrewseguin

src/material/autocomplete/autocomplete-origin.ts

@@ -8,15 +8,6 @@
 
 import {Directive, ElementRef} from '@angular/core';
 
-/** Base class containing all of the functionality for `MatAutocompleteOrigin`. */
-@Directive()
-export abstract class _MatAutocompleteOriginBase {
-  constructor(
-    /** Reference to the element on which the directive is applied. */
-    public elementRef: ElementRef<HTMLElement>,
-  ) {}
-}
-
 /**
  * Directive applied to an element to make it usable
  * as a connection point for an autocomplete panel.
@@ -25,4 +16,9 @@ export abstract class _MatAutocompleteOriginBase {
   selector: '[matAutocompleteOrigin]',
   exportAs: 'matAutocompleteOrigin',
 })
-export class MatAutocompleteOrigin extends _MatAutocompleteOriginBase {}
+export class MatAutocompleteOrigin {
+  constructor(
+    /** Reference to the element on which the directive is applied. */
+    public elementRef: ElementRef<HTMLElement>,
+  ) {}
+}

src/material/autocomplete/autocomplete-trigger.ts

@@ -45,16 +45,16 @@ import {
   MatOptionSelectionChange,
   _countGroupLabelsBeforeOption,
   _getOptionScrollPosition,
-  _MatOptionBase,
+  MatOption,
 } from '@angular/material/core';
 import {MAT_FORM_FIELD, MatFormField} from '@angular/material/form-field';
 import {defer, fromEvent, merge, Observable, of as observableOf, Subject, Subscription} from 'rxjs';
 import {delay, filter, map, switchMap, take, tap, startWith} from 'rxjs/operators';
-import {_MatAutocompleteOriginBase} from './autocomplete-origin';
+import {MatAutocompleteOrigin} from './autocomplete-origin';
 import {
   MatAutocompleteDefaultOptions,
   MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
-  _MatAutocompleteBase,
+  MatAutocomplete,
 } from './autocomplete';
 
 /**
@@ -97,8 +97,29 @@ export const MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER = {
 };
 
 /** Base class with all of the `MatAutocompleteTrigger` functionality. */
-@Directive()
-export abstract class _MatAutocompleteTriggerBase
+@Directive({
+  selector: `input[matAutocomplete], textarea[matAutocomplete]`,
+  host: {
+    'class': 'mat-mdc-autocomplete-trigger',
+    '[attr.autocomplete]': 'autocompleteAttribute',
+    '[attr.role]': 'autocompleteDisabled ? null : "combobox"',
+    '[attr.aria-autocomplete]': 'autocompleteDisabled ? null : "list"',
+    '[attr.aria-activedescendant]': '(panelOpen && activeOption) ? activeOption.id : null',
+    '[attr.aria-expanded]': 'autocompleteDisabled ? null : panelOpen.toString()',
+    '[attr.aria-controls]': '(autocompleteDisabled || !panelOpen) ? null : autocomplete?.id',
+    '[attr.aria-haspopup]': 'autocompleteDisabled ? null : "listbox"',
+    // Note: we use `focusin`, as opposed to `focus`, in order to open the panel
+    // a little earlier. This avoids issues where IE delays the focusing of the input.
+    '(focusin)': '_handleFocus()',
+    '(blur)': '_onTouched()',
+    '(input)': '_handleInput($event)',
+    '(keydown)': '_handleKeydown($event)',
+    '(click)': '_handleClick()',
+  },
+  exportAs: 'matAutocompleteTrigger',
+  providers: [MAT_AUTOCOMPLETE_VALUE_ACCESSOR],
+})
+export class MatAutocompleteTrigger
   implements ControlValueAccessor, AfterViewInit, OnChanges, OnDestroy
 {
   private _overlayRef: OverlayRef | null;
@@ -141,7 +162,7 @@ export abstract class _MatAutocompleteTriggerBase
    * Current option that we have auto-selected as the user is navigating,
    * but which hasn't been propagated to the model value yet.
    */
-  private _pendingAutoselectedOption: _MatOptionBase | null;
+  private _pendingAutoselectedOption: MatOption | null;
 
   /** Stream of keyboard events that can close the panel. */
   private readonly _closeKeyEventStream = new Subject<void>();
@@ -165,7 +186,7 @@ export abstract class _MatAutocompleteTriggerBase
   _onTouched = () => {};
 
   /** The autocomplete panel to be attached to this trigger. */
-  @Input('matAutocomplete') autocomplete: _MatAutocompleteBase;
+  @Input('matAutocomplete') autocomplete: MatAutocomplete;
 
   /**
    * Position of the autocomplete panel relative to the trigger element. A position of `auto`
@@ -180,7 +201,7 @@ export abstract class _MatAutocompleteTriggerBase
    * Reference relative to which to position the autocomplete panel.
    * Defaults to the autocomplete trigger element.
    */
-  @Input('matAutocompleteConnectedTo') connectedTo: _MatAutocompleteOriginBase;
+  @Input('matAutocompleteConnectedTo') connectedTo: MatAutocompleteOrigin;
 
   /**
    * `autocomplete` attribute to be set on the input element.
@@ -219,7 +240,7 @@ export abstract class _MatAutocompleteTriggerBase
   }
 
   /** Class to apply to the panel when it's above the input. */
-  protected abstract _aboveClass: string;
+  private _aboveClass = 'mat-mdc-autocomplete-panel-above';
 
   ngAfterViewInit() {
     const window = this._getWindow();
@@ -353,7 +374,7 @@ export abstract class _MatAutocompleteTriggerBase
   }) as Observable<MatOptionSelectionChange>;
 
   /** The currently active option, coerced to MatOption type. */
-  get activeOption(): _MatOptionBase | null {
+  get activeOption(): MatOption | null {
     if (this.autocomplete && this.autocomplete._keyManager) {
       return this.autocomplete._keyManager.activeItem;
     }
@@ -668,7 +689,7 @@ export abstract class _MatAutocompleteTriggerBase
   /**
    * Clear any previous selected option and emit a selection change event for this option
    */
-  private _clearPreviousSelectedOption(skip: _MatOptionBase | null, emitEvent?: boolean) {
+  private _clearPreviousSelectedOption(skip: MatOption | null, emitEvent?: boolean) {
     // Null checks are necessary here, because the autocomplete
     // or its options may not have been assigned yet.
     this.autocomplete?.options?.forEach(option => {
@@ -984,29 +1005,3 @@ export abstract class _MatAutocompleteTriggerBase
     }
   }
 }
-
-@Directive({
-  selector: `input[matAutocomplete], textarea[matAutocomplete]`,
-  host: {
-    'class': 'mat-mdc-autocomplete-trigger',
-    '[attr.autocomplete]': 'autocompleteAttribute',
-    '[attr.role]': 'autocompleteDisabled ? null : "combobox"',
-    '[attr.aria-autocomplete]': 'autocompleteDisabled ? null : "list"',
-    '[attr.aria-activedescendant]': '(panelOpen && activeOption) ? activeOption.id : null',
-    '[attr.aria-expanded]': 'autocompleteDisabled ? null : panelOpen.toString()',
-    '[attr.aria-controls]': '(autocompleteDisabled || !panelOpen) ? null : autocomplete?.id',
-    '[attr.aria-haspopup]': 'autocompleteDisabled ? null : "listbox"',
-    // Note: we use `focusin`, as opposed to `focus`, in order to open the panel
-    // a little earlier. This avoids issues where IE delays the focusing of the input.
-    '(focusin)': '_handleFocus()',
-    '(blur)': '_onTouched()',
-    '(input)': '_handleInput($event)',
-    '(keydown)': '_handleKeydown($event)',
-    '(click)': '_handleClick()',
-  },
-  exportAs: 'matAutocompleteTrigger',
-  providers: [MAT_AUTOCOMPLETE_VALUE_ACCESSOR],
-})
-export class MatAutocompleteTrigger extends _MatAutocompleteTriggerBase {
-  protected _aboveClass = 'mat-mdc-autocomplete-panel-above';
-}

src/material/autocomplete/autocomplete.ts

@@ -12,7 +12,6 @@ import {
   ChangeDetectorRef,
   Component,
   ContentChildren,
-  Directive,
   ElementRef,
   EventEmitter,
   Inject,
@@ -33,8 +32,6 @@ import {
   MatOption,
   mixinDisableRipple,
   CanDisableRipple,
-  _MatOptionBase,
-  _MatOptgroupBase,
   ThemePalette,
 } from '@angular/material/core';
 import {ActiveDescendantKeyManager} from '@angular/cdk/a11y';
@@ -53,19 +50,19 @@ let _uniqueAutocompleteIdCounter = 0;
 export class MatAutocompleteSelectedEvent {
   constructor(
     /** Reference to the autocomplete panel that emitted the event. */
-    public source: _MatAutocompleteBase,
+    public source: MatAutocomplete,
     /** Option that was selected. */
-    public option: _MatOptionBase,
+    public option: MatOption,
   ) {}
 }
 
 /** Event object that is emitted when an autocomplete option is activated. */
 export interface MatAutocompleteActivatedEvent {
   /** Reference to the autocomplete panel that emitted the event. */
-  source: _MatAutocompleteBase;
+  source: MatAutocomplete;
 
   /** Option that was selected. */
-  option: _MatOptionBase | null;
+  option: MatOption | null;
 }
 
 // Boilerplate for applying mixins to MatAutocomplete.
@@ -112,25 +109,39 @@ export function MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY(): MatAutocompleteDefau
   };
 }
 
-/** Base class with all of the `MatAutocomplete` functionality. */
-@Directive()
-export abstract class _MatAutocompleteBase
+/** Autocomplete component. */
+@Component({
+  selector: 'mat-autocomplete',
+  templateUrl: 'autocomplete.html',
+  styleUrls: ['autocomplete.css'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  exportAs: 'matAutocomplete',
+  inputs: ['disableRipple'],
+  host: {
+    'class': 'mat-mdc-autocomplete',
+    'ngSkipHydration': '',
+  },
+  providers: [{provide: MAT_OPTION_PARENT_COMPONENT, useExisting: MatAutocomplete}],
+  animations: [panelAnimation],
+})
+export class MatAutocomplete
   extends _MatAutocompleteMixinBase
   implements AfterContentInit, CanDisableRipple, OnDestroy
 {
   private _activeOptionChanges = Subscription.EMPTY;
 
   /** Class to apply to the panel when it's visible. */
-  protected abstract _visibleClass: string;
+  private _visibleClass = 'mat-mdc-autocomplete-visible';
 
   /** Class to apply to the panel when it's hidden. */
-  protected abstract _hiddenClass: string;
+  private _hiddenClass = 'mat-mdc-autocomplete-hidden';
 
   /** Emits when the panel animation is done. Null if the panel doesn't animate. */
-  abstract _animationDone: EventEmitter<AnimationEvent> | null;
+  _animationDone = new EventEmitter<AnimationEvent>();
 
   /** Manages active item in option list based on key events. */
-  _keyManager: ActiveDescendantKeyManager<_MatOptionBase>;
+  _keyManager: ActiveDescendantKeyManager<MatOption>;
 
   /** Whether the autocomplete panel should be visible, depending on option length. */
   showPanel: boolean = false;
@@ -160,10 +171,10 @@ export abstract class _MatAutocompleteBase
   @ViewChild('panel') panel: ElementRef;
 
   /** Reference to all options within the autocomplete. */
-  abstract options: QueryList<_MatOptionBase>;
+  @ContentChildren(MatOption, {descendants: true}) options: QueryList<MatOption>;
 
   /** Reference to all option groups within the autocomplete. */
-  abstract optionGroups: QueryList<_MatOptgroupBase>;
+  @ContentChildren(MAT_OPTGROUP, {descendants: true}) optionGroups: QueryList<MatOptgroup>;
 
   /** Aria label of the autocomplete. */
   @Input('aria-label') ariaLabel: string;
@@ -253,6 +264,27 @@ export abstract class _MatAutocompleteBase
   }
   _classList: {[key: string]: boolean} = {};
 
+  /** Whether checkmark indicator for single-selection options is hidden. */
+  @Input()
+  get hideSingleSelectionIndicator(): boolean {
+    return this._hideSingleSelectionIndicator;
+  }
+  set hideSingleSelectionIndicator(value: BooleanInput) {
+    this._hideSingleSelectionIndicator = coerceBooleanProperty(value);
+    this._syncParentProperties();
+  }
+  private _hideSingleSelectionIndicator: boolean =
+    this._defaults.hideSingleSelectionIndicator ?? false;
+
+  /** Syncs the parent state with the individual options. */
+  _syncParentProperties(): void {
+    if (this.options) {
+      for (const option of this.options) {
+        option._changeDetectorRef.markForCheck();
+      }
+    }
+  }
+
   /** Unique ID to be used by autocomplete trigger's "aria-owns" property. */
   id: string = `mat-autocomplete-${_uniqueAutocompleteIdCounter++}`;
 
@@ -281,7 +313,7 @@ export abstract class _MatAutocompleteBase
   }
 
   ngAfterContentInit() {
-    this._keyManager = new ActiveDescendantKeyManager<_MatOptionBase>(this.options)
+    this._keyManager = new ActiveDescendantKeyManager<MatOption>(this.options)
       .withWrap()
       .skipPredicate(this._skipPredicate);
     this._activeOptionChanges = this._keyManager.change.subscribe(index => {
@@ -297,6 +329,7 @@ export abstract class _MatAutocompleteBase
   ngOnDestroy() {
     this._keyManager?.destroy();
     this._activeOptionChanges.unsubscribe();
+    this._animationDone.complete();
   }
 
   /**
@@ -322,7 +355,7 @@ export abstract class _MatAutocompleteBase
   }
 
   /** Emits the `select` event. */
-  _emitSelectEvent(option: _MatOptionBase): void {
+  _emitSelectEvent(option: MatOption): void {
     const event = new MatAutocompleteSelectedEvent(this, option);
     this.optionSelected.emit(event);
   }
@@ -350,61 +383,6 @@ export abstract class _MatAutocompleteBase
     classList['mat-accent'] = this._color === 'accent';
   }
 
-  protected _skipPredicate(option: _MatOptionBase) {
-    return option.disabled;
-  }
-}
-
-@Component({
-  selector: 'mat-autocomplete',
-  templateUrl: 'autocomplete.html',
-  styleUrls: ['autocomplete.css'],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  exportAs: 'matAutocomplete',
-  inputs: ['disableRipple'],
-  host: {
-    'class': 'mat-mdc-autocomplete',
-    'ngSkipHydration': '',
-  },
-  providers: [{provide: MAT_OPTION_PARENT_COMPONENT, useExisting: MatAutocomplete}],
-  animations: [panelAnimation],
-})
-export class MatAutocomplete extends _MatAutocompleteBase implements OnDestroy {
-  /** Reference to all option groups within the autocomplete. */
-  @ContentChildren(MAT_OPTGROUP, {descendants: true}) optionGroups: QueryList<MatOptgroup>;
-  /** Reference to all options within the autocomplete. */
-  @ContentChildren(MatOption, {descendants: true}) options: QueryList<MatOption>;
-  protected _visibleClass = 'mat-mdc-autocomplete-visible';
-  protected _hiddenClass = 'mat-mdc-autocomplete-hidden';
-  override _animationDone = new EventEmitter<AnimationEvent>();
-
-  /** Whether checkmark indicator for single-selection options is hidden. */
-  @Input()
-  get hideSingleSelectionIndicator(): boolean {
-    return this._hideSingleSelectionIndicator;
-  }
-  set hideSingleSelectionIndicator(value: BooleanInput) {
-    this._hideSingleSelectionIndicator = coerceBooleanProperty(value);
-    this._syncParentProperties();
-  }
-  private _hideSingleSelectionIndicator: boolean =
-    this._defaults.hideSingleSelectionIndicator ?? false;
-
-  /** Syncs the parent state with the individual options. */
-  _syncParentProperties(): void {
-    if (this.options) {
-      for (const option of this.options) {
-        option._changeDetectorRef.markForCheck();
-      }
-    }
-  }
-
-  override ngOnDestroy(): void {
-    super.ngOnDestroy();
-    this._animationDone.complete();
-  }
-
   // `skipPredicate` determines if key manager should avoid putting a given option in the tab
   // order. Allow disabled list items to receive focus via keyboard to align with WAI ARIA
   // recommendation.
@@ -419,7 +397,7 @@ export class MatAutocomplete extends _MatAutocompleteBase implements OnDestroy {
   //
   // The user can focus disabled options using the keyboard, but the user cannot click disabled
   // options.
-  protected override _skipPredicate(_option: _MatOptionBase) {
+  protected _skipPredicate() {
     return false;
   }
 }