refactor(material/menu): convert to standalone

Converts `material/menu` to standalone.

Author: crisbeto

src/material/menu/menu-content.ts

@@ -33,6 +33,7 @@ export const MAT_MENU_CONTENT = new InjectionToken<MatMenuContent>('MatMenuConte
 @Directive({
   selector: 'ng-template[matMenuContent]',
   providers: [{provide: MAT_MENU_CONTENT, useExisting: MatMenuContent}],
+  standalone: true,
 })
 export class MatMenuContent implements OnDestroy {
   private _portal: TemplatePortal<any>;

src/material/menu/menu-item.ts

@@ -23,6 +23,7 @@ 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';
+import {MatRipple} from '@angular/material/core';
 
 /**
  * Single item inside a `mat-menu`. Provides the menu item styling and accessibility treatment.
@@ -44,6 +45,8 @@ import {MatMenuPanel, MAT_MENU_PANEL} from './menu-panel';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   templateUrl: 'menu-item.html',
+  standalone: true,
+  imports: [MatRipple],
 })
 export class MatMenuItem implements FocusableOption, AfterViewInit, OnDestroy {
   /** ARIA role for the menu item. */

src/material/menu/menu-trigger.ts

@@ -53,6 +53,13 @@ import {MenuPositionX, MenuPositionY} from './menu-positions';
 /** Injection token that determines the scroll handling while the menu is open. */
 export const MAT_MENU_SCROLL_STRATEGY = new InjectionToken<() => ScrollStrategy>(
   'mat-menu-scroll-strategy',
+  {
+    providedIn: 'root',
+    factory: () => {
+      const overlay = inject(Overlay);
+      return () => overlay.scrollStrategies.reposition();
+    },
+  },
 );
 
 /** @docs-private */
@@ -90,6 +97,7 @@ export const MENU_PANEL_TOP_PADDING = 8;
     '(keydown)': '_handleKeydown($event)',
   },
   exportAs: 'matMenuTrigger',
+  standalone: true,
 })
 export class MatMenuTrigger implements AfterContentInit, OnDestroy {
   private _portal: TemplatePortal;

src/material/menu/menu.spec.ts

@@ -2736,13 +2736,13 @@ describe('MatMenu default overrides', () => {
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
       imports: [MatMenuModule, NoopAnimationsModule],
-      declarations: [SimpleMenu, FakeIcon],
       providers: [
         {
           provide: MAT_MENU_DEFAULT_OPTIONS,
           useValue: {overlapTrigger: true, xPosition: 'before', yPosition: 'above'},
         },
       ],
+      declarations: [SimpleMenu, FakeIcon],
     }).compileComponents();
   }));
 
@@ -2786,7 +2786,9 @@ const SIMPLE_MENU_TEMPLATE = `
   </mat-menu>
 `;
 
-@Component({template: SIMPLE_MENU_TEMPLATE})
+@Component({
+  template: SIMPLE_MENU_TEMPLATE,
+})
 class SimpleMenu {
   @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
   @ViewChild('triggerEl') triggerEl: ElementRef<HTMLElement>;

src/material/menu/menu.ts

@@ -47,6 +47,7 @@ import {MenuPositionX, MenuPositionY} from './menu-positions';
 import {throwMatMenuInvalidPositionX, throwMatMenuInvalidPositionY} from './menu-errors';
 import {MatMenuContent, MAT_MENU_CONTENT} from './menu-content';
 import {matMenuAnimations} from './menu-animations';
+import {NgClass} from '@angular/common';
 
 let menuPanelUid = 0;
 
@@ -108,6 +109,8 @@ export function MAT_MENU_DEFAULT_OPTIONS_FACTORY(): MatMenuDefaultOptions {
   },
   animations: [matMenuAnimations.transformMenu, matMenuAnimations.fadeInItems],
   providers: [{provide: MAT_MENU_PANEL, useExisting: MatMenu}],
+  standalone: true,
+  imports: [NgClass],
 })
 export class MatMenu implements AfterContentInit, MatMenuPanel<MatMenuItem>, OnInit, OnDestroy {
   private _keyManager: FocusKeyManager<MatMenuItem>;

src/material/menu/module.ts

@@ -17,7 +17,16 @@ import {MatMenuContent} from './menu-content';
 import {MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER, MatMenuTrigger} from './menu-trigger';
 
 @NgModule({
-  imports: [CommonModule, MatRippleModule, MatCommonModule, OverlayModule],
+  imports: [
+    CommonModule,
+    MatRippleModule,
+    MatCommonModule,
+    OverlayModule,
+    MatMenu,
+    MatMenuItem,
+    MatMenuContent,
+    MatMenuTrigger,
+  ],
   exports: [
     CdkScrollableModule,
     MatMenu,
@@ -26,7 +35,6 @@ import {MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER, MatMenuTrigger} from './menu-
     MatMenuContent,
     MatMenuTrigger,
   ],
-  declarations: [MatMenu, MatMenuItem, MatMenuContent, MatMenuTrigger],
   providers: [MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER],
 })
 export class MatMenuModule {}

src/material/menu/testing/menu-harness.spec.ts

@@ -13,8 +13,7 @@ describe('MatMenuHarness', () => {
 
     beforeEach(async () => {
       await TestBed.configureTestingModule({
-        imports: [MatMenuModule, NoopAnimationsModule],
-        declarations: [MenuHarnessTest],
+        imports: [MatMenuModule, NoopAnimationsModule, MenuHarnessTest],
       }).compileComponents();
 
       fixture = TestBed.createComponent(MenuHarnessTest);
@@ -94,8 +93,7 @@ describe('MatMenuHarness', () => {
 
     beforeEach(async () => {
       await TestBed.configureTestingModule({
-        imports: [MatMenuModule, NoopAnimationsModule],
-        declarations: [NestedMenuHarnessTest],
+        imports: [MatMenuModule, NoopAnimationsModule, NestedMenuHarnessTest],
       }).compileComponents();
 
       fixture = TestBed.createComponent(NestedMenuHarnessTest);
@@ -165,6 +163,8 @@ describe('MatMenuHarness', () => {
         <menu mat-menu-item>Account</menu>
       </mat-menu>
   `,
+  standalone: true,
+  imports: [MatMenuModule],
 })
 class MenuHarnessTest {}
 
@@ -190,6 +190,8 @@ class MenuHarnessTest {}
         <button mat-menu-item (click)="lastClickedLeaf = 3">Leaf Item 3</button>
       </mat-menu>
   `,
+  standalone: true,
+  imports: [MatMenuModule],
 })
 class NestedMenuHarnessTest {
   lastClickedLeaf = 0;

tools/public_api_guard/material/menu.md

@@ -19,9 +19,9 @@ import { FocusableOption } from '@angular/cdk/a11y';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { FocusOrigin } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import * as i5 from '@angular/common';
-import * as i6 from '@angular/material/core';
-import * as i7 from '@angular/cdk/overlay';
+import * as i1 from '@angular/common';
+import * as i2 from '@angular/material/core';
+import * as i3 from '@angular/cdk/overlay';
 import * as i8 from '@angular/cdk/scrolling';
 import { InjectionToken } from '@angular/core';
 import { Injector } from '@angular/core';
@@ -123,7 +123,7 @@ export class MatMenu implements AfterContentInit, MatMenuPanel<MatMenuItem>, OnI
     get yPosition(): MenuPositionY;
     set yPosition(value: MenuPositionY);
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatMenu, "mat-menu", ["matMenu"], { "backdropClass": { "alias": "backdropClass"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "xPosition": { "alias": "xPosition"; "required": false; }; "yPosition": { "alias": "yPosition"; "required": false; }; "overlapTrigger": { "alias": "overlapTrigger"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "panelClass": { "alias": "class"; "required": false; }; "classList": { "alias": "classList"; "required": false; }; }, { "closed": "closed"; "close": "close"; }, ["lazyContent", "_allItems", "items"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatMenu, "mat-menu", ["matMenu"], { "backdropClass": { "alias": "backdropClass"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "xPosition": { "alias": "xPosition"; "required": false; }; "yPosition": { "alias": "yPosition"; "required": false; }; "overlapTrigger": { "alias": "overlapTrigger"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "panelClass": { "alias": "class"; "required": false; }; "classList": { "alias": "classList"; "required": false; }; }, { "closed": "closed"; "close": "close"; }, ["lazyContent", "_allItems", "items"], ["*"], true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatMenu, never>;
 }
@@ -145,7 +145,7 @@ export class MatMenuContent implements OnDestroy {
     // (undocumented)
     ngOnDestroy(): void;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatMenuContent, "ng-template[matMenuContent]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatMenuContent, "ng-template[matMenuContent]", never, {}, {}, never, never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatMenuContent, never>;
 }
@@ -195,7 +195,7 @@ export class MatMenuItem implements FocusableOption, AfterViewInit, OnDestroy {
     _setTriggersSubmenu(triggersSubmenu: boolean): void;
     _triggersSubmenu: boolean;
     // (undocumented)
-    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>;
+    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]", "*"], true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatMenuItem, [null, null, null, { optional: true; }, null]>;
 }
@@ -207,7 +207,7 @@ export class MatMenuModule {
     // (undocumented)
     static ɵinj: i0.ɵɵInjectorDeclaration<MatMenuModule>;
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatMenuModule, [typeof i1.MatMenu, typeof i2.MatMenuItem, typeof i3.MatMenuContent, typeof i4.MatMenuTrigger], [typeof i5.CommonModule, typeof i6.MatRippleModule, typeof i6.MatCommonModule, typeof i7.OverlayModule], [typeof i8.CdkScrollableModule, typeof i1.MatMenu, typeof i6.MatCommonModule, typeof i2.MatMenuItem, typeof i3.MatMenuContent, typeof i4.MatMenuTrigger]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatMenuModule, never, [typeof i1.CommonModule, typeof i2.MatRippleModule, typeof i2.MatCommonModule, typeof i3.OverlayModule, typeof i4.MatMenu, typeof i5.MatMenuItem, typeof i6.MatMenuContent, typeof i7.MatMenuTrigger], [typeof i8.CdkScrollableModule, typeof i4.MatMenu, typeof i2.MatCommonModule, typeof i5.MatMenuItem, typeof i6.MatMenuContent, typeof i7.MatMenuTrigger]>;
 }
 
 // @public
@@ -288,7 +288,7 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
     triggersSubmenu(): boolean;
     updatePosition(): void;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatMenuTrigger, "[mat-menu-trigger-for], [matMenuTriggerFor]", ["matMenuTrigger"], { "_deprecatedMatMenuTriggerFor": { "alias": "mat-menu-trigger-for"; "required": false; }; "menu": { "alias": "matMenuTriggerFor"; "required": false; }; "menuData": { "alias": "matMenuTriggerData"; "required": false; }; "restoreFocus": { "alias": "matMenuTriggerRestoreFocus"; "required": false; }; }, { "menuOpened": "menuOpened"; "onMenuOpen": "onMenuOpen"; "menuClosed": "menuClosed"; "onMenuClose": "onMenuClose"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatMenuTrigger, "[mat-menu-trigger-for], [matMenuTriggerFor]", ["matMenuTrigger"], { "_deprecatedMatMenuTriggerFor": { "alias": "mat-menu-trigger-for"; "required": false; }; "menu": { "alias": "matMenuTriggerFor"; "required": false; }; "menuData": { "alias": "matMenuTriggerData"; "required": false; }; "restoreFocus": { "alias": "matMenuTriggerRestoreFocus"; "required": false; }; }, { "menuOpened": "menuOpened"; "onMenuOpen": "onMenuOpen"; "menuClosed": "menuClosed"; "onMenuClose": "onMenuClose"; }, never, never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatMenuTrigger, [null, null, null, null, { optional: true; }, { optional: true; self: true; }, { optional: true; }, null, null]>;
 }