refactor(material/autocomplete): remove mixin class usages

Replaces mixin class usages in the autocomplete with input transforms.

Author: crisbeto

src/material/autocomplete/autocomplete-trigger.ts

@@ -9,6 +9,7 @@
 import {addAriaReferencedId, removeAriaReferencedId} from '@angular/cdk/a11y';
 import {
   AfterViewInit,
+  booleanAttribute,
   ChangeDetectorRef,
   Directive,
   ElementRef,
@@ -26,7 +27,6 @@ import {
 } from '@angular/core';
 import {DOCUMENT} from '@angular/common';
 import {Directionality} from '@angular/cdk/bidi';
-import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
 import {DOWN_ARROW, ENTER, ESCAPE, TAB, UP_ARROW, hasModifierKey} from '@angular/cdk/keycodes';
 import {_getEventTarget} from '@angular/cdk/platform';
 import {TemplatePortal} from '@angular/cdk/portal';
@@ -125,7 +125,6 @@ export class MatAutocompleteTrigger
   private _overlayRef: OverlayRef | null;
   private _portal: TemplatePortal;
   private _componentDestroyed = false;
-  private _autocompleteDisabled = false;
   private _scrollStrategy: () => ScrollStrategy;
   private _keydownSubscription: Subscription | null;
   private _outsideClickSubscription: Subscription | null;
@@ -213,13 +212,8 @@ export class MatAutocompleteTrigger
    * Whether the autocomplete is disabled. When disabled, the element will
    * act as a regular input and the user won't be able to open the panel.
    */
-  @Input('matAutocompleteDisabled')
-  get autocompleteDisabled(): boolean {
-    return this._autocompleteDisabled;
-  }
-  set autocompleteDisabled(value: BooleanInput) {
-    this._autocompleteDisabled = coerceBooleanProperty(value);
-  }
+  @Input({alias: 'matAutocompleteDisabled', transform: booleanAttribute})
+  autocompleteDisabled: boolean;
 
   constructor(
     private _element: ElementRef<HTMLInputElement>,
@@ -897,7 +891,7 @@ export class MatAutocompleteTrigger
   /** Determines whether the panel can be opened. */
   private _canOpen(): boolean {
     const element = this._element.nativeElement;
-    return !element.readOnly && !element.disabled && !this._autocompleteDisabled;
+    return !element.readOnly && !element.disabled && !this.autocompleteDisabled;
   }
 
   /** Use defaultView of injected document if available or fallback to global window reference */

src/material/autocomplete/autocomplete.ts

@@ -23,19 +23,18 @@ import {
   TemplateRef,
   ViewChild,
   ViewEncapsulation,
+  booleanAttribute,
 } from '@angular/core';
 import {AnimationEvent} from '@angular/animations';
 import {
   MAT_OPTGROUP,
   MAT_OPTION_PARENT_COMPONENT,
   MatOptgroup,
   MatOption,
-  mixinDisableRipple,
-  CanDisableRipple,
   ThemePalette,
 } from '@angular/material/core';
 import {ActiveDescendantKeyManager} from '@angular/cdk/a11y';
-import {BooleanInput, coerceBooleanProperty, coerceStringArray} from '@angular/cdk/coercion';
+import {coerceStringArray} from '@angular/cdk/coercion';
 import {Platform} from '@angular/cdk/platform';
 import {panelAnimation} from './animations';
 import {Subscription} from 'rxjs';
@@ -65,10 +64,6 @@ export interface MatAutocompleteActivatedEvent {
   option: MatOption | null;
 }
 
-// Boilerplate for applying mixins to MatAutocomplete.
-/** @docs-private */
-const _MatAutocompleteMixinBase = mixinDisableRipple(class {});
-
 /** Default `mat-autocomplete` options that can be overridden. */
 export interface MatAutocompleteDefaultOptions {
   /** Whether the first option should be highlighted when an autocomplete panel is opened. */
@@ -117,18 +112,14 @@ export function MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY(): MatAutocompleteDefau
   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
-{
+export class MatAutocomplete implements AfterContentInit, OnDestroy {
   private _activeOptionChanges = Subscription.EMPTY;
 
   /** Class to apply to the panel when it's visible. */
@@ -189,46 +180,28 @@ export class MatAutocomplete
    * Whether the first option should be highlighted when the autocomplete panel is opened.
    * Can be configured globally through the `MAT_AUTOCOMPLETE_DEFAULT_OPTIONS` token.
    */
-  @Input()
-  get autoActiveFirstOption(): boolean {
-    return this._autoActiveFirstOption;
-  }
-  set autoActiveFirstOption(value: BooleanInput) {
-    this._autoActiveFirstOption = coerceBooleanProperty(value);
-  }
-  private _autoActiveFirstOption: boolean;
+  @Input({transform: booleanAttribute}) autoActiveFirstOption: boolean;
 
   /** Whether the active option should be selected as the user is navigating. */
-  @Input()
-  get autoSelectActiveOption(): boolean {
-    return this._autoSelectActiveOption;
-  }
-  set autoSelectActiveOption(value: BooleanInput) {
-    this._autoSelectActiveOption = coerceBooleanProperty(value);
-  }
-  private _autoSelectActiveOption: boolean;
+  @Input({transform: booleanAttribute}) autoSelectActiveOption: boolean;
 
   /**
    * Whether the user is required to make a selection when they're interacting with the
    * autocomplete. If the user moves away from the autocomplete without selecting an option from
    * the list, the value will be reset. If the user opens the panel and closes it without
    * interacting or selecting a value, the initial value will be kept.
    */
-  @Input()
-  get requireSelection(): boolean {
-    return this._requireSelection;
-  }
-  set requireSelection(value: BooleanInput) {
-    this._requireSelection = coerceBooleanProperty(value);
-  }
-  private _requireSelection: boolean;
+  @Input({transform: booleanAttribute}) requireSelection: boolean;
 
   /**
    * Specify the width of the autocomplete panel.  Can be any CSS sizing value, otherwise it will
    * match the width of its host.
    */
   @Input() panelWidth: string | number;
 
+  /** Whether ripples are disabled within the autocomplete panel. */
+  @Input({transform: booleanAttribute}) disableRipple: boolean;
+
   /** Event that is emitted whenever an option from the list is selected. */
   @Output() readonly optionSelected: EventEmitter<MatAutocompleteSelectedEvent> =
     new EventEmitter<MatAutocompleteSelectedEvent>();
@@ -268,16 +241,15 @@ export class MatAutocomplete
   _classList: {[key: string]: boolean} = {};
 
   /** Whether checkmark indicator for single-selection options is hidden. */
-  @Input()
+  @Input({transform: booleanAttribute})
   get hideSingleSelectionIndicator(): boolean {
     return this._hideSingleSelectionIndicator;
   }
-  set hideSingleSelectionIndicator(value: BooleanInput) {
-    this._hideSingleSelectionIndicator = coerceBooleanProperty(value);
+  set hideSingleSelectionIndicator(value: boolean) {
+    this._hideSingleSelectionIndicator = value;
     this._syncParentProperties();
   }
-  private _hideSingleSelectionIndicator: boolean =
-    this._defaults.hideSingleSelectionIndicator ?? false;
+  private _hideSingleSelectionIndicator: boolean;
 
   /** Syncs the parent state with the individual options. */
   _syncParentProperties(): void {
@@ -303,16 +275,15 @@ export class MatAutocomplete
     @Inject(MAT_AUTOCOMPLETE_DEFAULT_OPTIONS) protected _defaults: MatAutocompleteDefaultOptions,
     platform?: Platform,
   ) {
-    super();
-
     // TODO(crisbeto): the problem that the `inertGroups` option resolves is only present on
     // Safari using VoiceOver. We should occasionally check back to see whether the bug
     // wasn't resolved in VoiceOver, and if it has, we can remove this and the `inertGroups`
     // option altogether.
     this.inertGroups = platform?.SAFARI || false;
-    this._autoActiveFirstOption = !!_defaults.autoActiveFirstOption;
-    this._autoSelectActiveOption = !!_defaults.autoSelectActiveOption;
-    this._requireSelection = !!_defaults.requireSelection;
+    this.autoActiveFirstOption = !!_defaults.autoActiveFirstOption;
+    this.autoSelectActiveOption = !!_defaults.autoSelectActiveOption;
+    this.requireSelection = !!_defaults.requireSelection;
+    this._hideSingleSelectionIndicator = this._defaults.hideSingleSelectionIndicator ?? false;
   }
 
   ngAfterContentInit() {

tools/public_api_guard/material/autocomplete.md

@@ -4,15 +4,11 @@
 
 ```ts
 
-import { _AbstractConstructor } from '@angular/material/core';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import { AfterContentInit } from '@angular/core';
 import { AfterViewInit } from '@angular/core';
 import { AnimationEvent as AnimationEvent_2 } from '@angular/animations';
-import { BooleanInput } from '@angular/cdk/coercion';
-import { CanDisableRipple } from '@angular/material/core';
 import { ChangeDetectorRef } from '@angular/core';
-import { _Constructor } from '@angular/material/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { Directionality } from '@angular/cdk/bidi';
 import { ElementRef } from '@angular/core';
@@ -67,15 +63,13 @@ export const MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER: {
 export const MAT_AUTOCOMPLETE_VALUE_ACCESSOR: any;
 
 // @public
-export class MatAutocomplete extends _MatAutocompleteMixinBase implements AfterContentInit, CanDisableRipple, OnDestroy {
+export class MatAutocomplete implements AfterContentInit, OnDestroy {
     constructor(_changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>, _defaults: MatAutocompleteDefaultOptions, platform?: Platform);
     _animationDone: EventEmitter<AnimationEvent_2>;
     ariaLabel: string;
     ariaLabelledby: string;
-    get autoActiveFirstOption(): boolean;
-    set autoActiveFirstOption(value: BooleanInput);
-    get autoSelectActiveOption(): boolean;
-    set autoSelectActiveOption(value: BooleanInput);
+    autoActiveFirstOption: boolean;
+    autoSelectActiveOption: boolean;
     set classList(value: string | string[]);
     // (undocumented)
     _classList: {
@@ -84,19 +78,30 @@ export class MatAutocomplete extends _MatAutocompleteMixinBase implements AfterC
     readonly closed: EventEmitter<void>;
     // (undocumented)
     protected _defaults: MatAutocompleteDefaultOptions;
+    disableRipple: boolean;
     displayWith: ((value: any) => string) | null;
     _emitSelectEvent(option: MatOption): void;
     _getPanelAriaLabelledby(labelId: string | null): string | null;
     _getScrollTop(): number;
     get hideSingleSelectionIndicator(): boolean;
-    set hideSingleSelectionIndicator(value: BooleanInput);
+    set hideSingleSelectionIndicator(value: boolean);
     id: string;
     readonly inertGroups: boolean;
     get isOpen(): boolean;
     // (undocumented)
     _isOpen: boolean;
     _keyManager: ActiveDescendantKeyManager<MatOption>;
     // (undocumented)
+    static ngAcceptInputType_autoActiveFirstOption: unknown;
+    // (undocumented)
+    static ngAcceptInputType_autoSelectActiveOption: unknown;
+    // (undocumented)
+    static ngAcceptInputType_disableRipple: unknown;
+    // (undocumented)
+    static ngAcceptInputType_hideSingleSelectionIndicator: unknown;
+    // (undocumented)
+    static ngAcceptInputType_requireSelection: unknown;
+    // (undocumented)
     ngAfterContentInit(): void;
     // (undocumented)
     ngOnDestroy(): void;
@@ -107,8 +112,7 @@ export class MatAutocomplete extends _MatAutocompleteMixinBase implements AfterC
     readonly optionSelected: EventEmitter<MatAutocompleteSelectedEvent>;
     panel: ElementRef;
     panelWidth: string | number;
-    get requireSelection(): boolean;
-    set requireSelection(value: BooleanInput);
+    requireSelection: boolean;
     _setColor(value: ThemePalette): void;
     _setScrollTop(scrollTop: number): void;
     _setVisibility(): void;
@@ -118,7 +122,7 @@ export class MatAutocomplete extends _MatAutocompleteMixinBase implements AfterC
     _syncParentProperties(): void;
     template: TemplateRef<any>;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatAutocomplete, "mat-autocomplete", ["matAutocomplete"], { "disableRipple": { "alias": "disableRipple"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "displayWith": { "alias": "displayWith"; "required": false; }; "autoActiveFirstOption": { "alias": "autoActiveFirstOption"; "required": false; }; "autoSelectActiveOption": { "alias": "autoSelectActiveOption"; "required": false; }; "requireSelection": { "alias": "requireSelection"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "classList": { "alias": "class"; "required": false; }; "hideSingleSelectionIndicator": { "alias": "hideSingleSelectionIndicator"; "required": false; }; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; "optionActivated": "optionActivated"; }, ["options", "optionGroups"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatAutocomplete, "mat-autocomplete", ["matAutocomplete"], { "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "displayWith": { "alias": "displayWith"; "required": false; }; "autoActiveFirstOption": { "alias": "autoActiveFirstOption"; "required": false; }; "autoSelectActiveOption": { "alias": "autoSelectActiveOption"; "required": false; }; "requireSelection": { "alias": "requireSelection"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "classList": { "alias": "class"; "required": false; }; "hideSingleSelectionIndicator": { "alias": "hideSingleSelectionIndicator"; "required": false; }; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; "optionActivated": "optionActivated"; }, ["options", "optionGroups"], ["*"], false, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatAutocomplete, never>;
 }
@@ -174,8 +178,7 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewIn
     get activeOption(): MatOption | null;
     autocomplete: MatAutocomplete;
     autocompleteAttribute: string;
-    get autocompleteDisabled(): boolean;
-    set autocompleteDisabled(value: BooleanInput);
+    autocompleteDisabled: boolean;
     closePanel(): void;
     connectedTo: MatAutocompleteOrigin;
     // (undocumented)
@@ -187,6 +190,8 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewIn
     // (undocumented)
     _handleKeydown(event: KeyboardEvent): void;
     // (undocumented)
+    static ngAcceptInputType_autocompleteDisabled: unknown;
+    // (undocumented)
     ngAfterViewInit(): void;
     // (undocumented)
     ngOnChanges(changes: SimpleChanges): void;