refactor(material/menu): remove mixin class usages

Replaces mixin class usages in the menu with input transforms.

Author: crisbeto

src/material/menu/menu-item.ts

@@ -17,29 +17,19 @@ import {
   Input,
   AfterViewInit,
   ChangeDetectorRef,
+  booleanAttribute,
 } from '@angular/core';
-import {
-  CanDisable,
-  CanDisableRipple,
-  mixinDisabled,
-  mixinDisableRipple,
-} from '@angular/material/core';
 import {FocusableOption, FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
 import {Subject} from 'rxjs';
 import {DOCUMENT} from '@angular/common';
 import {MatMenuPanel, MAT_MENU_PANEL} from './menu-panel';
 
-// Boilerplate for applying mixins to MatMenuItem.
-/** @docs-private */
-const _MatMenuItemBase = mixinDisableRipple(mixinDisabled(class {}));
-
 /**
  * Single item inside a `mat-menu`. Provides the menu item styling and accessibility treatment.
  */
 @Component({
   selector: '[mat-menu-item]',
   exportAs: 'matMenuItem',
-  inputs: ['disabled', 'disableRipple'],
   host: {
     '[attr.role]': 'role',
     'class': 'mat-mdc-menu-item mat-mdc-focus-indicator',
@@ -55,13 +45,16 @@ const _MatMenuItemBase = mixinDisableRipple(mixinDisabled(class {}));
   encapsulation: ViewEncapsulation.None,
   templateUrl: 'menu-item.html',
 })
-export class MatMenuItem
-  extends _MatMenuItemBase
-  implements FocusableOption, CanDisable, CanDisableRipple, AfterViewInit, OnDestroy
-{
+export class MatMenuItem implements FocusableOption, AfterViewInit, OnDestroy {
   /** ARIA role for the menu item. */
   @Input() role: 'menuitem' | 'menuitemradio' | 'menuitemcheckbox' = 'menuitem';
 
+  /** Whether the menu item is disabled. */
+  @Input({transform: booleanAttribute}) disabled: boolean = false;
+
+  /** Whether ripples are disabled on the menu item. */
+  @Input({transform: booleanAttribute}) disableRipple: boolean = false;
+
   /** Stream that emits when the menu item is hovered. */
   readonly _hovered: Subject<MatMenuItem> = new Subject<MatMenuItem>();
 
@@ -101,7 +94,6 @@ export class MatMenuItem
     @Inject(MAT_MENU_PANEL) @Optional() public _parentMenu?: MatMenuPanel<MatMenuItem>,
     private _changeDetectorRef?: ChangeDetectorRef,
   ) {
-    super();
     _parentMenu?.addItem?.(this);
   }
 

src/material/menu/menu.ts

@@ -26,11 +26,11 @@ import {
   ViewEncapsulation,
   OnInit,
   ChangeDetectorRef,
+  booleanAttribute,
 } from '@angular/core';
 import {AnimationEvent} from '@angular/animations';
 import {FocusKeyManager, FocusOrigin} from '@angular/cdk/a11y';
 import {Direction} from '@angular/cdk/bidi';
-import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
 import {
   ESCAPE,
   LEFT_ARROW,
@@ -204,24 +204,11 @@ export class MatMenu implements AfterContentInit, MatMenuPanel<MatMenuItem>, OnI
   @ContentChild(MAT_MENU_CONTENT) lazyContent: MatMenuContent;
 
   /** Whether the menu should overlap its trigger. */
-  @Input()
-  get overlapTrigger(): boolean {
-    return this._overlapTrigger;
-  }
-  set overlapTrigger(value: BooleanInput) {
-    this._overlapTrigger = coerceBooleanProperty(value);
-  }
-  private _overlapTrigger: boolean;
+  @Input({transform: booleanAttribute}) overlapTrigger: boolean;
 
   /** Whether the menu has a backdrop. */
-  @Input()
-  get hasBackdrop(): boolean | undefined {
-    return this._hasBackdrop;
-  }
-  set hasBackdrop(value: BooleanInput) {
-    this._hasBackdrop = coerceBooleanProperty(value);
-  }
-  private _hasBackdrop: boolean | undefined;
+  @Input({transform: (value: any) => (value == null ? null : booleanAttribute(value))})
+  hasBackdrop?: boolean;
 
   /**
    * This method takes classes set on the host mat-menu element and applies them on the
@@ -307,8 +294,8 @@ export class MatMenu implements AfterContentInit, MatMenuPanel<MatMenuItem>, OnI
     this._xPosition = defaultOptions.xPosition;
     this._yPosition = defaultOptions.yPosition;
     this.backdropClass = defaultOptions.backdropClass;
-    this._overlapTrigger = defaultOptions.overlapTrigger;
-    this._hasBackdrop = defaultOptions.hasBackdrop;
+    this.overlapTrigger = defaultOptions.overlapTrigger;
+    this.hasBackdrop = defaultOptions.hasBackdrop;
   }
 
   ngOnInit() {

tools/public_api_guard/material/menu.md

@@ -4,18 +4,13 @@
 
 ```ts
 
-import { _AbstractConstructor } from '@angular/material/core';
 import { AfterContentInit } from '@angular/core';
 import { AfterViewInit } from '@angular/core';
 import { AnimationEvent as AnimationEvent_2 } from '@angular/animations';
 import { AnimationTriggerMetadata } from '@angular/animations';
 import { ApplicationRef } from '@angular/core';
-import { BooleanInput } from '@angular/cdk/coercion';
-import { CanDisable } from '@angular/material/core';
-import { CanDisableRipple } from '@angular/material/core';
 import { ChangeDetectorRef } from '@angular/core';
 import { ComponentFactoryResolver } from '@angular/core';
-import { _Constructor } from '@angular/material/core';
 import { Direction } from '@angular/cdk/bidi';
 import { Directionality } from '@angular/cdk/bidi';
 import { ElementRef } from '@angular/core';
@@ -89,14 +84,17 @@ export class MatMenu implements AfterContentInit, MatMenuPanel<MatMenuItem>, OnI
     direction: Direction;
     focusFirstItem(origin?: FocusOrigin): void;
     _handleKeydown(event: KeyboardEvent): void;
-    get hasBackdrop(): boolean | undefined;
-    set hasBackdrop(value: BooleanInput);
+    hasBackdrop?: boolean;
     _hovered(): Observable<MatMenuItem>;
     _isAnimating: boolean;
     // @deprecated
     items: QueryList<MatMenuItem>;
     lazyContent: MatMenuContent;
     // (undocumented)
+    static ngAcceptInputType_hasBackdrop: any;
+    // (undocumented)
+    static ngAcceptInputType_overlapTrigger: unknown;
+    // (undocumented)
     ngAfterContentInit(): void;
     // (undocumented)
     ngOnDestroy(): void;
@@ -105,8 +103,7 @@ export class MatMenu implements AfterContentInit, MatMenuPanel<MatMenuItem>, OnI
     _onAnimationDone(event: AnimationEvent_2): void;
     // (undocumented)
     _onAnimationStart(event: AnimationEvent_2): void;
-    get overlapTrigger(): boolean;
-    set overlapTrigger(value: BooleanInput);
+    overlapTrigger: boolean;
     overlayPanelClass: string | string[];
     _panelAnimationState: 'void' | 'enter';
     set panelClass(classes: string);
@@ -164,11 +161,13 @@ export interface MatMenuDefaultOptions {
 }
 
 // @public
-export class MatMenuItem extends _MatMenuItemBase implements FocusableOption, CanDisable, CanDisableRipple, AfterViewInit, OnDestroy {
+export class MatMenuItem implements FocusableOption, AfterViewInit, OnDestroy {
     constructor(elementRef: ElementRef<HTMLElement>, document: any, focusMonitor: FocusMonitor, parentMenu: MatMenuPanel<MatMenuItem> | undefined, changeDetectorRef: ChangeDetectorRef);
     // @deprecated
     constructor(elementRef: ElementRef<HTMLElement>, document?: any, focusMonitor?: FocusMonitor, parentMenu?: MatMenuPanel<MatMenuItem>, changeDetectorRef?: ChangeDetectorRef);
     _checkDisabled(event: Event): void;
+    disabled: boolean;
+    disableRipple: boolean;
     focus(origin?: FocusOrigin, options?: FocusOptions): void;
     readonly _focused: Subject<MatMenuItem>;
     _getHostElement(): HTMLElement;
@@ -180,6 +179,10 @@ export class MatMenuItem extends _MatMenuItemBase implements FocusableOption, Ca
     _highlighted: boolean;
     readonly _hovered: Subject<MatMenuItem>;
     // (undocumented)
+    static ngAcceptInputType_disabled: unknown;
+    // (undocumented)
+    static ngAcceptInputType_disableRipple: unknown;
+    // (undocumented)
     ngAfterViewInit(): void;
     // (undocumented)
     ngOnDestroy(): void;
@@ -192,7 +195,7 @@ export class MatMenuItem extends _MatMenuItemBase implements FocusableOption, Ca
     _setTriggersSubmenu(triggersSubmenu: boolean): void;
     _triggersSubmenu: boolean;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatMenuItem, "[mat-menu-item]", ["matMenuItem"], { "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "role": { "alias": "role"; "required": false; }; }, {}, never, ["mat-icon, [matMenuItemIcon]", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatMenuItem, "[mat-menu-item]", ["matMenuItem"], { "role": { "alias": "role"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; }, {}, never, ["mat-icon, [matMenuItemIcon]", "*"], false, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatMenuItem, [null, null, null, { optional: true; }, null]>;
 }