refactor(cdk/menu): switch to input transforms

Switches inputs in cdk/menu to use transforms instead of getters/setters.

Author: crisbeto

src/cdk/menu/context-menu-trigger.ts

@@ -6,15 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, inject, Injectable, Input, OnDestroy} from '@angular/core';
+import {booleanAttribute, Directive, inject, Injectable, Input, OnDestroy} from '@angular/core';
 import {Directionality} from '@angular/cdk/bidi';
 import {
   FlexibleConnectedPositionStrategy,
   Overlay,
   OverlayConfig,
   STANDARD_DROPDOWN_BELOW_POSITIONS,
 } from '@angular/cdk/overlay';
-import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
 import {_getEventTarget} from '@angular/cdk/platform';
 import {merge, partition} from 'rxjs';
 import {skip, takeUntil} from 'rxjs/operators';
@@ -85,14 +84,7 @@ export class CdkContextMenuTrigger extends CdkMenuTriggerBase implements OnDestr
   private readonly _contextMenuTracker = inject(ContextMenuTracker);
 
   /** Whether the context menu is disabled. */
-  @Input('cdkContextMenuDisabled')
-  get disabled(): boolean {
-    return this._disabled;
-  }
-  set disabled(value: BooleanInput) {
-    this._disabled = coerceBooleanProperty(value);
-  }
-  private _disabled = false;
+  @Input({alias: 'cdkContextMenuDisabled', transform: booleanAttribute}) disabled: boolean = false;
 
   constructor() {
     super();

src/cdk/menu/menu-item-selectable.ts

@@ -6,8 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
-import {Directive, Input} from '@angular/core';
+import {Directive, Input, booleanAttribute} from '@angular/core';
 import {CdkMenuItem} from './menu-item';
 
 /** Base class providing checked state for selectable MenuItems. */
@@ -19,14 +18,7 @@ import {CdkMenuItem} from './menu-item';
 })
 export abstract class CdkMenuItemSelectable extends CdkMenuItem {
   /** Whether the element is checked */
-  @Input('cdkMenuItemChecked')
-  get checked(): boolean {
-    return this._checked;
-  }
-  set checked(value: BooleanInput) {
-    this._checked = coerceBooleanProperty(value);
-  }
-  private _checked = false;
+  @Input({alias: 'cdkMenuItemChecked', transform: booleanAttribute}) checked: boolean = false;
 
   /** Whether the item should close the menu if triggered by the spacebar. */
   protected override closeOnSpacebarTrigger = false;

src/cdk/menu/menu-item.spec.ts

@@ -44,11 +44,6 @@ describe('MenuItem', () => {
       expect(nativeButton.getAttribute('type')).toBe('button');
     });
 
-    it('should coerce the disabled property', () => {
-      menuItem.disabled = '';
-      expect(menuItem.disabled).toBeTrue();
-    });
-
     it('should toggle the aria disabled attribute', () => {
       expect(nativeButton.hasAttribute('aria-disabled')).toBeFalse();
 

src/cdk/menu/menu-item.ts

@@ -7,6 +7,7 @@
  */
 
 import {
+  booleanAttribute,
   Directive,
   ElementRef,
   EventEmitter,
@@ -16,7 +17,6 @@ import {
   OnDestroy,
   Output,
 } from '@angular/core';
-import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
 import {FocusableOption, InputModalityDetector} from '@angular/cdk/a11y';
 import {ENTER, hasModifierKey, LEFT_ARROW, RIGHT_ARROW, SPACE} from '@angular/cdk/keycodes';
 import {Directionality} from '@angular/cdk/bidi';
@@ -68,14 +68,7 @@ export class CdkMenuItem implements FocusableOption, FocusableElement, Toggler,
   private readonly _menuTrigger = inject(CdkMenuTrigger, {optional: true, self: true});
 
   /**  Whether the CdkMenuItem is disabled - defaults to false */
-  @Input('cdkMenuItemDisabled')
-  get disabled(): boolean {
-    return this._disabled;
-  }
-  set disabled(value: BooleanInput) {
-    this._disabled = coerceBooleanProperty(value);
-  }
-  private _disabled = false;
+  @Input({alias: 'cdkMenuItemDisabled', transform: booleanAttribute}) disabled: boolean = false;
 
   /**
    * The text used to locate this item during menu typeahead. If not specified,

src/material-experimental/menubar/menubar-item.spec.ts

@@ -6,7 +6,6 @@ import {MatMenuBarModule} from './menubar-module';
 
 describe('MatMenuBarItem', () => {
   let fixture: ComponentFixture<SimpleMenuBarItem>;
-  let menubarItem: MatMenuBarItem;
   let nativeMenubarItem: HTMLElement;
 
   beforeEach(waitForAsync(() => {
@@ -20,7 +19,6 @@ describe('MatMenuBarItem', () => {
     fixture = TestBed.createComponent(SimpleMenuBarItem);
     fixture.detectChanges();
 
-    menubarItem = fixture.componentInstance.menubarItem;
     nativeMenubarItem = fixture.componentInstance.nativeMenubarItem.nativeElement;
   });
 
@@ -36,13 +34,6 @@ describe('MatMenuBarItem', () => {
     expect(nativeMenubarItem.hasAttribute('aria.disabled')).toBeFalse();
   });
 
-  it('should coerce and set aria-disabled attribute', () => {
-    (menubarItem.disabled as any) = '';
-    fixture.detectChanges();
-
-    expect(nativeMenubarItem.getAttribute('aria-disabled')).toBe('true');
-  });
-
   it('should have cdk and material classes set', () => {
     expect(nativeMenubarItem.classList.contains('cdk-menu-item')).toBeTrue();
     expect(nativeMenubarItem.classList.contains('mat-menubar-item')).toBeTrue();

tools/public_api_guard/cdk/menu.md

@@ -5,7 +5,6 @@
 ```ts
 
 import { AfterContentInit } from '@angular/core';
-import { BooleanInput } from '@angular/cdk/coercion';
 import { ConnectedPosition } from '@angular/cdk/overlay';
 import { Directionality } from '@angular/cdk/bidi';
 import { ElementRef } from '@angular/core';
@@ -35,8 +34,9 @@ export const CDK_MENU: InjectionToken<Menu>;
 export class CdkContextMenuTrigger extends CdkMenuTriggerBase implements OnDestroy {
     constructor();
     close(): void;
-    get disabled(): boolean;
-    set disabled(value: BooleanInput);
+    disabled: boolean;
+    // (undocumented)
+    static ngAcceptInputType_disabled: unknown;
     open(coordinates: ContextMenuCoordinates): void;
     _openOnContextMenu(event: MouseEvent): void;
     // (undocumented)
@@ -121,8 +121,7 @@ export class CdkMenuItem implements FocusableOption, FocusableElement, Toggler,
     protected readonly destroyed: Subject<void>;
     // (undocumented)
     protected readonly _dir: Directionality | null;
-    get disabled(): boolean;
-    set disabled(value: BooleanInput);
+    disabled: boolean;
     // (undocumented)
     readonly _elementRef: ElementRef<HTMLElement>;
     focus(): void;
@@ -132,6 +131,8 @@ export class CdkMenuItem implements FocusableOption, FocusableElement, Toggler,
     get hasMenu(): boolean;
     isMenuOpen(): boolean;
     // (undocumented)
+    static ngAcceptInputType_disabled: unknown;
+    // (undocumented)
     ngOnDestroy(): void;
     // (undocumented)
     protected _ngZone: NgZone;
@@ -177,10 +178,11 @@ export class CdkMenuItemRadio extends CdkMenuItemSelectable implements OnDestroy
 
 // @public
 export abstract class CdkMenuItemSelectable extends CdkMenuItem {
-    get checked(): boolean;
-    set checked(value: BooleanInput);
+    checked: boolean;
     protected closeOnSpacebarTrigger: boolean;
     // (undocumented)
+    static ngAcceptInputType_checked: unknown;
+    // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<CdkMenuItemSelectable, never, never, { "checked": { "alias": "cdkMenuItemChecked"; "required": false; }; }, {}, never, never, false, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<CdkMenuItemSelectable, never>;