@angular/material/fesm2020/menu.mjs.map

Angular Material

{"version":3,"file":"menu.mjs","sources":["../../../../../../src/material/menu/menu-panel.ts","../../../../../../src/material/menu/menu-item.ts","../../../../../../src/material/menu/menu-item.html","../../../../../../src/material/menu/menu-errors.ts","../../../../../../src/material/menu/menu-content.ts","../../../../../../src/material/menu/menu-animations.ts","../../../../../../src/material/menu/menu.ts","../../../../../../src/material/menu/menu.html","../../../../../../src/material/menu/menu-trigger.ts","../../../../../../src/material/menu/module.ts","../../../../../../src/material/menu/menu-positions.ts","../../../../../../src/material/menu/public-api.ts","../../../../../../src/material/menu/index.ts","../../../../../../src/material/menu/menu_public_index.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {EventEmitter, TemplateRef, InjectionToken} from '@angular/core';\nimport {MenuPositionX, MenuPositionY} from './menu-positions';\nimport {Direction} from '@angular/cdk/bidi';\nimport {FocusOrigin} from '@angular/cdk/a11y';\nimport {MatMenuContent} from './menu-content';\n\n/**\n * Injection token used to provide the parent menu to menu-specific components.\n * @docs-private\n */\nexport const MAT_MENU_PANEL = new InjectionToken<MatMenuPanel>('MAT_MENU_PANEL');\n\n/**\n * Interface for a custom menu panel that can be used with `matMenuTriggerFor`.\n * @docs-private\n */\nexport interface MatMenuPanel<T = any> {\n  xPosition: MenuPositionX;\n  yPosition: MenuPositionY;\n  overlapTrigger: boolean;\n  templateRef: TemplateRef<any>;\n  readonly close: EventEmitter<void | 'click' | 'keydown' | 'tab'>;\n  parentMenu?: MatMenuPanel | undefined;\n  direction?: Direction;\n  focusFirstItem: (origin?: FocusOrigin) => void;\n  resetActiveItem: () => void;\n  setPositionClasses?: (x: MenuPositionX, y: MenuPositionY) => void;\n  setElevation?(depth: number): void;\n  lazyContent?: MatMenuContent;\n  backdropClass?: string;\n  overlayPanelClass?: string | string[];\n  hasBackdrop?: boolean;\n  readonly panelId?: string;\n\n  /**\n   * @deprecated To be removed.\n   * @breaking-change 8.0.0\n   */\n  addItem?: (item: T) => void;\n\n  /**\n   * @deprecated To be removed.\n   * @breaking-change 8.0.0\n   */\n  removeItem?: (item: T) => void;\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  OnDestroy,\n  ViewEncapsulation,\n  Inject,\n  Optional,\n  Input,\n  AfterViewInit,\n  ChangeDetectorRef,\n} from '@angular/core';\nimport {\n  CanDisable,\n  CanDisableRipple,\n  mixinDisabled,\n  mixinDisableRipple,\n} from '@angular/material/core';\nimport {FocusableOption, FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';\nimport {Subject} from 'rxjs';\nimport {DOCUMENT} from '@angular/common';\nimport {MatMenuPanel, MAT_MENU_PANEL} from './menu-panel';\n\n// Boilerplate for applying mixins to MatMenuItem.\n/** @docs-private */\nconst _MatMenuItemBase = mixinDisableRipple(mixinDisabled(class {}));\n\n/**\n * Single item inside of a `mat-menu`. Provides the menu item styling and accessibility treatment.\n */\n@Component({\n  selector: '[mat-menu-item]',\n  exportAs: 'matMenuItem',\n  inputs: ['disabled', 'disableRipple'],\n  host: {\n    '[attr.role]': 'role',\n    'class': 'mat-mdc-menu-item mat-mdc-focus-indicator mdc-list-item',\n    '[class.mat-mdc-menu-item-highlighted]': '_highlighted',\n    '[class.mat-mdc-menu-item-submenu-trigger]': '_triggersSubmenu',\n    '[attr.tabindex]': '_getTabIndex()',\n    '[attr.aria-disabled]': 'disabled',\n    '[attr.disabled]': 'disabled || null',\n    '(click)': '_checkDisabled($event)',\n    '(mouseenter)': '_handleMouseEnter()',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  templateUrl: 'menu-item.html',\n})\nexport class MatMenuItem\n  extends _MatMenuItemBase\n  implements FocusableOption, CanDisable, CanDisableRipple, AfterViewInit, OnDestroy\n{\n  /** ARIA role for the menu item. */\n  @Input() role: 'menuitem' | 'menuitemradio' | 'menuitemcheckbox' = 'menuitem';\n\n  /** Stream that emits when the menu item is hovered. */\n  readonly _hovered: Subject<MatMenuItem> = new Subject<MatMenuItem>();\n\n  /** Stream that emits when the menu item is focused. */\n  readonly _focused = new Subject<MatMenuItem>();\n\n  /** Whether the menu item is highlighted. */\n  _highlighted: boolean = false;\n\n  /** Whether the menu item acts as a trigger for a sub-menu. */\n  _triggersSubmenu: boolean = false;\n\n  constructor(\n    elementRef: ElementRef<HTMLElement>,\n    document: any,\n    focusMonitor: FocusMonitor,\n    parentMenu: MatMenuPanel<MatMenuItem> | undefined,\n    changeDetectorRef: ChangeDetectorRef,\n  );\n\n  /**\n   * @deprecated `document`, `changeDetectorRef` and `focusMonitor` to become required.\n   * @breaking-change 12.0.0\n   */\n  constructor(\n    elementRef: ElementRef<HTMLElement>,\n    document?: any,\n    focusMonitor?: FocusMonitor,\n    parentMenu?: MatMenuPanel<MatMenuItem>,\n    changeDetectorRef?: ChangeDetectorRef,\n  );\n\n  constructor(\n    private _elementRef: ElementRef<HTMLElement>,\n    @Inject(DOCUMENT) private _document?: any,\n    private _focusMonitor?: FocusMonitor,\n    @Inject(MAT_MENU_PANEL) @Optional() public _parentMenu?: MatMenuPanel<MatMenuItem>,\n    private _changeDetectorRef?: ChangeDetectorRef,\n  ) {\n    super();\n    _parentMenu?.addItem?.(this);\n  }\n\n  /** Focuses the menu item. */\n  focus(origin?: FocusOrigin, options?: FocusOptions): void {\n    if (this._focusMonitor && origin) {\n      this._focusMonitor.focusVia(this._getHostElement(), origin, options);\n    } else {\n      this._getHostElement().focus(options);\n    }\n\n    this._focused.next(this);\n  }\n\n  ngAfterViewInit() {\n    if (this._focusMonitor) {\n      // Start monitoring the element so it gets the appropriate focused classes. We want\n      // to show the focus style for menu items only when the focus was not caused by a\n      // mouse or touch interaction.\n      this._focusMonitor.monitor(this._elementRef, false);\n    }\n  }\n\n  ngOnDestroy() {\n    if (this._focusMonitor) {\n      this._focusMonitor.stopMonitoring(this._elementRef);\n    }\n\n    if (this._parentMenu && this._parentMenu.removeItem) {\n      this._parentMenu.removeItem(this);\n    }\n\n    this._hovered.complete();\n    this._focused.complete();\n  }\n\n  /** Used to set the `tabindex`. */\n  _getTabIndex(): string {\n    return this.disabled ? '-1' : '0';\n  }\n\n  /** Returns the host DOM element. */\n  _getHostElement(): HTMLElement {\n    return this._elementRef.nativeElement;\n  }\n\n  /** Prevents the default element actions if it is disabled. */\n  _checkDisabled(event: Event): void {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }\n\n  /** Emits to the hover stream. */\n  _handleMouseEnter() {\n    this._hovered.next(this);\n  }\n\n  /** Gets the label to be used when determining whether the option should be focused. */\n  getLabel(): string {\n    const clone = this._elementRef.nativeElement.cloneNode(true) as HTMLElement;\n    const icons = clone.querySelectorAll('mat-icon, .material-icons');\n\n    // Strip away icons so they don't show up in the text.\n    for (let i = 0; i < icons.length; i++) {\n      icons[i].remove();\n    }\n\n    return clone.textContent?.trim() || '';\n  }\n\n  _setHighlighted(isHighlighted: boolean) {\n    // We need to mark this for check for the case where the content is coming from a\n    // `matMenuContent` whose change detection tree is at the declaration position,\n    // not the insertion position. See #23175.\n    // @breaking-change 12.0.0 Remove null check for `_changeDetectorRef`.\n    this._highlighted = isHighlighted;\n    this._changeDetectorRef?.markForCheck();\n  }\n\n  _setTriggersSubmenu(triggersSubmenu: boolean) {\n    // @breaking-change 12.0.0 Remove null check for `_changeDetectorRef`.\n    this._triggersSubmenu = triggersSubmenu;\n    this._changeDetectorRef?.markForCheck();\n  }\n\n  _hasFocus(): boolean {\n    return this._document && this._document.activeElement === this._getHostElement();\n  }\n}\n","<ng-content select=\"mat-icon\"></ng-content>\n<span class=\"mdc-list-item__primary-text\"><ng-content></ng-content></span>\n<div class=\"mat-mdc-menu-ripple\" matRipple\n     [matRippleDisabled]=\"disableRipple || disabled\"\n     [matRippleTrigger]=\"_getHostElement()\">\n</div>\n<svg\n  *ngIf=\"_triggersSubmenu\"\n  class=\"mat-mdc-menu-submenu-icon\"\n  viewBox=\"0 0 5 10\"\n  focusable=\"false\"><polygon points=\"0,0 5,5 0,10\"/></svg>\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/**\n * Throws an exception for the case when menu's x-position value isn't valid.\n * In other words, it doesn't match 'before' or 'after'.\n * @docs-private\n */\nexport function throwMatMenuInvalidPositionX() {\n  throw Error(`xPosition value must be either 'before' or after'.\n      Example: <mat-menu xPosition=\"before\" #menu=\"matMenu\"></mat-menu>`);\n}\n\n/**\n * Throws an exception for the case when menu's y-position value isn't valid.\n * In other words, it doesn't match 'above' or 'below'.\n * @docs-private\n */\nexport function throwMatMenuInvalidPositionY() {\n  throw Error(`yPosition value must be either 'above' or below'.\n      Example: <mat-menu yPosition=\"above\" #menu=\"matMenu\"></mat-menu>`);\n}\n\n/**\n * Throws an exception for the case when a menu is assigned\n * to a trigger that is placed inside the same menu.\n * @docs-private\n */\nexport function throwMatMenuRecursiveError() {\n  throw Error(\n    `matMenuTriggerFor: menu cannot contain its own trigger. Assign a menu that is ` +\n      `not a parent of the trigger or move the trigger outside of the menu.`,\n  );\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {DomPortalOutlet, TemplatePortal} from '@angular/cdk/portal';\nimport {DOCUMENT} from '@angular/common';\nimport {\n  ApplicationRef,\n  ChangeDetectorRef,\n  ComponentFactoryResolver,\n  Directive,\n  Inject,\n  InjectionToken,\n  Injector,\n  OnDestroy,\n  TemplateRef,\n  ViewContainerRef,\n} from '@angular/core';\nimport {Subject} from 'rxjs';\n\n/**\n * Injection token that can be used to reference instances of `MatMenuContent`. It serves\n * as alternative token to the actual `MatMenuContent` class which could cause unnecessary\n * retention of the class and its directive metadata.\n */\nexport const MAT_MENU_CONTENT = new InjectionToken<MatMenuContent>('MatMenuContent');\n\n@Directive()\nexport abstract class _MatMenuContentBase implements OnDestroy {\n  private _portal: TemplatePortal<any>;\n  private _outlet: DomPortalOutlet;\n\n  /** Emits when the menu content has been attached. */\n  readonly _attached = new Subject<void>();\n\n  constructor(\n    template: TemplateRef<any>,\n    componentFactoryResolver: ComponentFactoryResolver,\n    appRef: ApplicationRef,\n    injector: Injector,\n    viewContainerRef: ViewContainerRef,\n    document: any,\n    changeDetectorRef: ChangeDetectorRef,\n  );\n\n  /**\n   * @deprecated `changeDetectorRef` is now a required parameter.\n   * @breaking-change 9.0.0\n   */\n  constructor(\n    template: TemplateRef<any>,\n    componentFactoryResolver: ComponentFactoryResolver,\n    appRef: ApplicationRef,\n    injector: Injector,\n    viewContainerRef: ViewContainerRef,\n    document: any,\n    changeDetectorRef?: ChangeDetectorRef,\n  );\n\n  constructor(\n    private _template: TemplateRef<any>,\n    private _componentFactoryResolver: ComponentFactoryResolver,\n    private _appRef: ApplicationRef,\n    private _injector: Injector,\n    private _viewContainerRef: ViewContainerRef,\n    @Inject(DOCUMENT) private _document: any,\n    private _changeDetectorRef?: ChangeDetectorRef,\n  ) {}\n\n  /**\n   * Attaches the content with a particular context.\n   * @docs-private\n   */\n  attach(context: any = {}) {\n    if (!this._portal) {\n      this._portal = new TemplatePortal(this._template, this._viewContainerRef);\n    }\n\n    this.detach();\n\n    if (!this._outlet) {\n      this._outlet = new DomPortalOutlet(\n        this._document.createElement('div'),\n        this._componentFactoryResolver,\n        this._appRef,\n        this._injector,\n      );\n    }\n\n    const element: HTMLElement = this._template.elementRef.nativeElement;\n\n    // Because we support opening the same menu from different triggers (which in turn have their\n    // own `OverlayRef` panel), we have to re-insert the host element every time, otherwise we\n    // risk it staying attached to a pane that's no longer in the DOM.\n    element.parentNode!.insertBefore(this._outlet.outletElement, element);\n\n    // When `MatMenuContent` is used in an `OnPush` component, the insertion of the menu\n    // content via `createEmbeddedView` does not cause the content to be seen as \"dirty\"\n    // by Angular. This causes the `@ContentChildren` for menu items within the menu to\n    // not be updated by Angular. By explicitly marking for check here, we tell Angular that\n    // it needs to check for new menu items and update the `@ContentChild` in `MatMenu`.\n    // @breaking-change 9.0.0 Make change detector ref required\n    this._changeDetectorRef?.markForCheck();\n    this._portal.attach(this._outlet, context);\n    this._attached.next();\n  }\n\n  /**\n   * Detaches the content.\n   * @docs-private\n   */\n  detach() {\n    if (this._portal.isAttached) {\n      this._portal.detach();\n    }\n  }\n\n  ngOnDestroy() {\n    if (this._outlet) {\n      this._outlet.dispose();\n    }\n  }\n}\n\n/** Menu content that will be rendered lazily once the menu is opened. */\n@Directive({\n  selector: 'ng-template[matMenuContent]',\n  providers: [{provide: MAT_MENU_CONTENT, useExisting: MatMenuContent}],\n})\nexport class MatMenuContent extends _MatMenuContentBase {}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {\n  trigger,\n  state,\n  style,\n  animate,\n  transition,\n  AnimationTriggerMetadata,\n} from '@angular/animations';\n\n/**\n * Animations used by the mat-menu component.\n * Animation duration and timing values are based on:\n * https://material.io/guidelines/components/menus.html#menus-usage\n * @docs-private\n */\nexport const matMenuAnimations: {\n  readonly transformMenu: AnimationTriggerMetadata;\n  readonly fadeInItems: AnimationTriggerMetadata;\n} = {\n  /**\n   * This animation controls the menu panel's entry and exit from the page.\n   *\n   * When the menu panel is added to the DOM, it scales in and fades in its border.\n   *\n   * When the menu panel is removed from the DOM, it simply fades out after a brief\n   * delay to display the ripple.\n   */\n  transformMenu: trigger('transformMenu', [\n    state(\n      'void',\n      style({\n        opacity: 0,\n        transform: 'scale(0.8)',\n      }),\n    ),\n    transition(\n      'void => enter',\n      animate(\n        '120ms cubic-bezier(0, 0, 0.2, 1)',\n        style({\n          opacity: 1,\n          transform: 'scale(1)',\n        }),\n      ),\n    ),\n    transition('* => void', animate('100ms 25ms linear', style({opacity: 0}))),\n  ]),\n\n  /**\n   * This animation fades in the background color and content of the menu panel\n   * after its containing element is scaled in.\n   */\n  fadeInItems: trigger('fadeInItems', [\n    // TODO(crisbeto): this is inside the `transformMenu`\n    // now. Remove next time we do breaking changes.\n    state('showing', style({opacity: 1})),\n    transition('void => *', [\n      style({opacity: 0}),\n      animate('400ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)'),\n    ]),\n  ]),\n};\n\n/**\n * @deprecated\n * @breaking-change 8.0.0\n * @docs-private\n */\nexport const fadeInItems = matMenuAnimations.fadeInItems;\n\n/**\n * @deprecated\n * @breaking-change 8.0.0\n * @docs-private\n */\nexport const transformMenu = matMenuAnimations.transformMenu;\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChild,\n  ContentChildren,\n  Directive,\n  ElementRef,\n  EventEmitter,\n  Inject,\n  InjectionToken,\n  Input,\n  NgZone,\n  OnDestroy,\n  Output,\n  TemplateRef,\n  QueryList,\n  ViewChild,\n  ViewEncapsulation,\n  OnInit,\n  ChangeDetectorRef,\n} from '@angular/core';\nimport {AnimationEvent} from '@angular/animations';\nimport {FocusKeyManager, FocusOrigin} from '@angular/cdk/a11y';\nimport {Direction} from '@angular/cdk/bidi';\nimport {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';\nimport {\n  ESCAPE,\n  LEFT_ARROW,\n  RIGHT_ARROW,\n  DOWN_ARROW,\n  UP_ARROW,\n  hasModifierKey,\n} from '@angular/cdk/keycodes';\nimport {merge, Observable, Subject, Subscription} from 'rxjs';\nimport {startWith, switchMap, take} from 'rxjs/operators';\nimport {MatMenuItem} from './menu-item';\nimport {MatMenuPanel, MAT_MENU_PANEL} from './menu-panel';\nimport {MenuPositionX, MenuPositionY} from './menu-positions';\nimport {throwMatMenuInvalidPositionX, throwMatMenuInvalidPositionY} from './menu-errors';\nimport {MatMenuContent, MAT_MENU_CONTENT} from './menu-content';\nimport {matMenuAnimations} from './menu-animations';\n\nlet menuPanelUid = 0;\n\n/** Reason why the menu was closed. */\nexport type MenuCloseReason = void | 'click' | 'keydown' | 'tab';\n\n/** Default `mat-menu` options that can be overridden. */\nexport interface MatMenuDefaultOptions {\n  /** The x-axis position of the menu. */\n  xPosition: MenuPositionX;\n\n  /** The y-axis position of the menu. */\n  yPosition: MenuPositionY;\n\n  /** Whether the menu should overlap the menu trigger. */\n  overlapTrigger: boolean;\n\n  /** Class to be applied to the menu's backdrop. */\n  backdropClass: string;\n\n  /** Class or list of classes to be applied to the menu's overlay panel. */\n  overlayPanelClass?: string | string[];\n\n  /** Whether the menu has a backdrop. */\n  hasBackdrop?: boolean;\n}\n\n/** Injection token to be used to override the default options for `mat-menu`. */\nexport const MAT_MENU_DEFAULT_OPTIONS = new InjectionToken<MatMenuDefaultOptions>(\n  'mat-menu-default-options',\n  {\n    providedIn: 'root',\n    factory: MAT_MENU_DEFAULT_OPTIONS_FACTORY,\n  },\n);\n\n/** @docs-private */\nexport function MAT_MENU_DEFAULT_OPTIONS_FACTORY(): MatMenuDefaultOptions {\n  return {\n    overlapTrigger: false,\n    xPosition: 'after',\n    yPosition: 'below',\n    backdropClass: 'cdk-overlay-transparent-backdrop',\n  };\n}\n\n/** Base class with all of the `MatMenu` functionality. */\n@Directive()\nexport class _MatMenuBase\n  implements AfterContentInit, MatMenuPanel<MatMenuItem>, OnInit, OnDestroy\n{\n  private _keyManager: FocusKeyManager<MatMenuItem>;\n  private _xPosition: MenuPositionX = this._defaultOptions.xPosition;\n  private _yPosition: MenuPositionY = this._defaultOptions.yPosition;\n  private _firstItemFocusSubscription?: Subscription;\n  private _previousElevation: string;\n  protected _elevationPrefix: string;\n  protected _baseElevation: number;\n\n  /** All items inside the menu. Includes items nested inside another menu. */\n  @ContentChildren(MatMenuItem, {descendants: true}) _allItems: QueryList<MatMenuItem>;\n\n  /** Only the direct descendant menu items. */\n  _directDescendantItems = new QueryList<MatMenuItem>();\n\n  /** Config object to be passed into the menu's ngClass */\n  _classList: {[key: string]: boolean} = {};\n\n  /** Current state of the panel animation. */\n  _panelAnimationState: 'void' | 'enter' = 'void';\n\n  /** Emits whenever an animation on the menu completes. */\n  readonly _animationDone = new Subject<AnimationEvent>();\n\n  /** Whether the menu is animating. */\n  _isAnimating: boolean;\n\n  /** Parent menu of the current menu panel. */\n  parentMenu: MatMenuPanel | undefined;\n\n  /** Layout direction of the menu. */\n  direction: Direction;\n\n  /** Class or list of classes to be added to the overlay panel. */\n  overlayPanelClass: string | string[] = this._defaultOptions.overlayPanelClass || '';\n\n  /** Class to be added to the backdrop element. */\n  @Input() backdropClass: string = this._defaultOptions.backdropClass;\n\n  /** aria-label for the menu panel. */\n  @Input('aria-label') ariaLabel: string;\n\n  /** aria-labelledby for the menu panel. */\n  @Input('aria-labelledby') ariaLabelledby: string;\n\n  /** aria-describedby for the menu panel. */\n  @Input('aria-describedby') ariaDescribedby: string;\n\n  /** Position of the menu in the X axis. */\n  @Input()\n  get xPosition(): MenuPositionX {\n    return this._xPosition;\n  }\n  set xPosition(value: MenuPositionX) {\n    if (\n      value !== 'before' &&\n      value !== 'after' &&\n      (typeof ngDevMode === 'undefined' || ngDevMode)\n    ) {\n      throwMatMenuInvalidPositionX();\n    }\n    this._xPosition = value;\n    this.setPositionClasses();\n  }\n\n  /** Position of the menu in the Y axis. */\n  @Input()\n  get yPosition(): MenuPositionY {\n    return this._yPosition;\n  }\n  set yPosition(value: MenuPositionY) {\n    if (value !== 'above' && value !== 'below' && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n      throwMatMenuInvalidPositionY();\n    }\n    this._yPosition = value;\n    this.setPositionClasses();\n  }\n\n  /** @docs-private */\n  @ViewChild(TemplateRef) templateRef: TemplateRef<any>;\n\n  /**\n   * List of the items inside of a menu.\n   * @deprecated\n   * @breaking-change 8.0.0\n   */\n  @ContentChildren(MatMenuItem, {descendants: false}) items: QueryList<MatMenuItem>;\n\n  /**\n   * Menu content that will be rendered lazily.\n   * @docs-private\n   */\n  @ContentChild(MAT_MENU_CONTENT) lazyContent: MatMenuContent;\n\n  /** Whether the menu should overlap its trigger. */\n  @Input()\n  get overlapTrigger(): boolean {\n    return this._overlapTrigger;\n  }\n  set overlapTrigger(value: BooleanInput) {\n    this._overlapTrigger = coerceBooleanProperty(value);\n  }\n  private _overlapTrigger: boolean = this._defaultOptions.overlapTrigger;\n\n  /** Whether the menu has a backdrop. */\n  @Input()\n  get hasBackdrop(): boolean | undefined {\n    return this._hasBackdrop;\n  }\n  set hasBackdrop(value: BooleanInput) {\n    this._hasBackdrop = coerceBooleanProperty(value);\n  }\n  private _hasBackdrop: boolean | undefined = this._defaultOptions.hasBackdrop;\n\n  /**\n   * This method takes classes set on the host mat-menu element and applies them on the\n   * menu template that displays in the overlay container.  Otherwise, it's difficult\n   * to style the containing menu from outside the component.\n   * @param classes list of class names\n   */\n  @Input('class')\n  set panelClass(classes: string) {\n    const previousPanelClass = this._previousPanelClass;\n\n    if (previousPanelClass && previousPanelClass.length) {\n      previousPanelClass.split(' ').forEach((className: string) => {\n        this._classList[className] = false;\n      });\n    }\n\n    this._previousPanelClass = classes;\n\n    if (classes && classes.length) {\n      classes.split(' ').forEach((className: string) => {\n        this._classList[className] = true;\n      });\n\n      this._elementRef.nativeElement.className = '';\n    }\n  }\n  private _previousPanelClass: string;\n\n  /**\n   * This method takes classes set on the host mat-menu element and applies them on the\n   * menu template that displays in the overlay container.  Otherwise, it's difficult\n   * to style the containing menu from outside the component.\n   * @deprecated Use `panelClass` instead.\n   * @breaking-change 8.0.0\n   */\n  @Input()\n  get classList(): string {\n    return this.panelClass;\n  }\n  set classList(classes: string) {\n    this.panelClass = classes;\n  }\n\n  /** Event emitted when the menu is closed. */\n  @Output() readonly closed: EventEmitter<MenuCloseReason> = new EventEmitter<MenuCloseReason>();\n\n  /**\n   * Event emitted when the menu is closed.\n   * @deprecated Switch to `closed` instead\n   * @breaking-change 8.0.0\n   */\n  @Output() readonly close: EventEmitter<MenuCloseReason> = this.closed;\n\n  readonly panelId = `mat-menu-panel-${menuPanelUid++}`;\n\n  constructor(\n    elementRef: ElementRef<HTMLElement>,\n    ngZone: NgZone,\n    defaultOptions: MatMenuDefaultOptions,\n    changeDetectorRef: ChangeDetectorRef,\n  );\n\n  /**\n   * @deprecated `_changeDetectorRef` to become a required parameter.\n   * @breaking-change 15.0.0\n   */\n  constructor(\n    elementRef: ElementRef<HTMLElement>,\n    ngZone: NgZone,\n    defaultOptions: MatMenuDefaultOptions,\n    changeDetectorRef?: ChangeDetectorRef,\n  );\n\n  constructor(\n    private _elementRef: ElementRef<HTMLElement>,\n    private _ngZone: NgZone,\n    @Inject(MAT_MENU_DEFAULT_OPTIONS) private _defaultOptions: MatMenuDefaultOptions,\n    // @breaking-change 15.0.0 `_changeDetectorRef` to become a required parameter.\n    private _changeDetectorRef?: ChangeDetectorRef,\n  ) {}\n\n  ngOnInit() {\n    this.setPositionClasses();\n  }\n\n  ngAfterContentInit() {\n    this._updateDirectDescendants();\n    this._keyManager = new FocusKeyManager(this._directDescendantItems)\n      .withWrap()\n      .withTypeAhead()\n      .withHomeAndEnd();\n    this._keyManager.tabOut.subscribe(() => this.closed.emit('tab'));\n\n    // If a user manually (programmatically) focuses a menu item, we need to reflect that focus\n    // change back to the key manager. Note that we don't need to unsubscribe here because _focused\n    // is internal and we know that it gets completed on destroy.\n    this._directDescendantItems.changes\n      .pipe(\n        startWith(this._directDescendantItems),\n        switchMap(items => merge(...items.map((item: MatMenuItem) => item._focused))),\n      )\n      .subscribe(focusedItem => this._keyManager.updateActiveItem(focusedItem as MatMenuItem));\n\n    this._directDescendantItems.changes.subscribe((itemsList: QueryList<MatMenuItem>) => {\n      // Move focus to another item, if the active item is removed from the list.\n      // We need to debounce the callback, because multiple items might be removed\n      // in quick succession.\n      const manager = this._keyManager;\n\n      if (this._panelAnimationState === 'enter' && manager.activeItem?._hasFocus()) {\n        const items = itemsList.toArray();\n        const index = Math.max(0, Math.min(items.length - 1, manager.activeItemIndex || 0));\n\n        if (items[index] && !items[index].disabled) {\n          manager.setActiveItem(index);\n        } else {\n          manager.setNextItemActive();\n        }\n      }\n    });\n  }\n\n  ngOnDestroy() {\n    this._keyManager?.destroy();\n    this._directDescendantItems.destroy();\n    this.closed.complete();\n    this._firstItemFocusSubscription?.unsubscribe();\n  }\n\n  /** Stream that emits whenever the hovered menu item changes. */\n  _hovered(): Observable<MatMenuItem> {\n    // Coerce the `changes` property because Angular types it as `Observable<any>`\n    const itemChanges = this._directDescendantItems.changes as Observable<QueryList<MatMenuItem>>;\n    return itemChanges.pipe(\n      startWith(this._directDescendantItems),\n      switchMap(items => merge(...items.map((item: MatMenuItem) => item._hovered))),\n    ) as Observable<MatMenuItem>;\n  }\n\n  /*\n   * Registers a menu item with the menu.\n   * @docs-private\n   * @deprecated No longer being used. To be removed.\n   * @breaking-change 9.0.0\n   */\n  addItem(_item: MatMenuItem) {}\n\n  /**\n   * Removes an item from the menu.\n   * @docs-private\n   * @deprecated No longer being used. To be removed.\n   * @breaking-change 9.0.0\n   */\n  removeItem(_item: MatMenuItem) {}\n\n  /** Handle a keyboard event from the menu, delegating to the appropriate action. */\n  _handleKeydown(event: KeyboardEvent) {\n    const keyCode = event.keyCode;\n    const manager = this._keyManager;\n\n    switch (keyCode) {\n      case ESCAPE:\n        if (!hasModifierKey(event)) {\n          event.preventDefault();\n          this.closed.emit('keydown');\n        }\n        break;\n      case LEFT_ARROW:\n        if (this.parentMenu && this.direction === 'ltr') {\n          this.closed.emit('keydown');\n        }\n        break;\n      case RIGHT_ARROW:\n        if (this.parentMenu && this.direction === 'rtl') {\n          this.closed.emit('keydown');\n        }\n        break;\n      default:\n        if (keyCode === UP_ARROW || keyCode === DOWN_ARROW) {\n          manager.setFocusOrigin('keyboard');\n        }\n\n        manager.onKeydown(event);\n        return;\n    }\n\n    // Don't allow the event to propagate if we've already handled it, or it may\n    // end up reaching other overlays that were opened earlier (see #22694).\n    event.stopPropagation();\n  }\n\n  /**\n   * Focus the first item in the menu.\n   * @param origin Action from which the focus originated. Used to set the correct styling.\n   */\n  focusFirstItem(origin: FocusOrigin = 'program'): void {\n    // Wait for `onStable` to ensure iOS VoiceOver screen reader focuses the first item (#24735).\n    this._firstItemFocusSubscription?.unsubscribe();\n    this._firstItemFocusSubscription = this._ngZone.onStable.pipe(take(1)).subscribe(() => {\n      let menuPanel: HTMLElement | null = null;\n\n      if (this._directDescendantItems.length) {\n        // Because the `mat-menuPanel` is at the DOM insertion point, not inside the overlay, we don't\n        // have a nice way of getting a hold of the menuPanel panel. We can't use a `ViewChild` either\n        // because the panel is inside an `ng-template`. We work around it by starting from one of\n        // the items and walking up the DOM.\n        menuPanel = this._directDescendantItems.first!._getHostElement().closest('[role=\"menu\"]');\n      }\n\n      // If an item in the menuPanel is already focused, avoid overriding the focus.\n      if (!menuPanel || !menuPanel.contains(document.activeElement)) {\n        const manager = this._keyManager;\n        manager.setFocusOrigin(origin).setFirstItemActive();\n\n        // If there's no active item at this point, it means that all the items are disabled.\n        // Move focus to the menuPanel panel so keyboard events like Escape still work. Also this will\n        // give _some_ feedback to screen readers.\n        if (!manager.activeItem && menuPanel) {\n          menuPanel.focus();\n        }\n      }\n    });\n  }\n\n  /**\n   * Resets the active item in the menu. This is used when the menu is opened, allowing\n   * the user to start from the first option when pressing the down arrow.\n   */\n  resetActiveItem() {\n    this._keyManager.setActiveItem(-1);\n  }\n\n  /**\n   * Sets the menu panel elevation.\n   * @param depth Number of parent menus that come before the menu.\n   */\n  setElevation(depth: number): void {\n    // The elevation starts at the base and increases by one for each level.\n    // Capped at 24 because that's the maximum elevation defined in the Material design spec.\n    const elevation = Math.min(this._baseElevation + depth, 24);\n    const newElevation = `${this._elevationPrefix}${elevation}`;\n    const customElevation = Object.keys(this._classList).find(className => {\n      return className.startsWith(this._elevationPrefix);\n    });\n\n    if (!customElevation || customElevation === this._previousElevation) {\n      if (this._previousElevation) {\n        this._classList[this._previousElevation] = false;\n      }\n\n      this._classList[newElevation] = true;\n      this._previousElevation = newElevation;\n    }\n  }\n\n  /**\n   * Adds classes to the menu panel based on its position. Can be used by\n   * consumers to add specific styling based on the position.\n   * @param posX Position of the menu along the x axis.\n   * @param posY Position of the menu along the y axis.\n   * @docs-private\n   */\n  setPositionClasses(posX: MenuPositionX = this.xPosition, posY: MenuPositionY = this.yPosition) {\n    const classes = this._classList;\n    classes['mat-menu-before'] = posX === 'before';\n    classes['mat-menu-after'] = posX === 'after';\n    classes['mat-menu-above'] = posY === 'above';\n    classes['mat-menu-below'] = posY === 'below';\n\n    // @breaking-change 15.0.0 Remove null check for `_changeDetectorRef`.\n    this._changeDetectorRef?.markForCheck();\n  }\n\n  /** Starts the enter animation. */\n  _startAnimation() {\n    // @breaking-change 8.0.0 Combine with _resetAnimation.\n    this._panelAnimationState = 'enter';\n  }\n\n  /** Resets the panel animation to its initial state. */\n  _resetAnimation() {\n    // @breaking-change 8.0.0 Combine with _startAnimation.\n    this._panelAnimationState = 'void';\n  }\n\n  /** Callback that is invoked when the panel animation completes. */\n  _onAnimationDone(event: AnimationEvent) {\n    this._animationDone.next(event);\n    this._isAnimating = false;\n  }\n\n  _onAnimationStart(event: AnimationEvent) {\n    this._isAnimating = true;\n\n    // Scroll the content element to the top as soon as the animation starts. This is necessary,\n    // because we move focus to the first item while it's still being animated, which can throw\n    // the browser off when it determines the scroll position. Alternatively we can move focus\n    // when the animation is done, however moving focus asynchronously will interrupt screen\n    // readers which are in the process of reading out the menu already. We take the `element`\n    // from the `event` since we can't use a `ViewChild` to access the pane.\n    if (event.toState === 'enter' && this._keyManager.activeItemIndex === 0) {\n      event.element.scrollTop = 0;\n    }\n  }\n\n  /**\n   * Sets up a stream that will keep track of any newly-added menu items and will update the list\n   * of direct descendants. We collect the descendants this way, because `_allItems` can include\n   * items that are part of child menus, and using a custom way of registering items is unreliable\n   * when it comes to maintaining the item order.\n   */\n  private _updateDirectDescendants() {\n    this._allItems.changes\n      .pipe(startWith(this._allItems))\n      .subscribe((items: QueryList<MatMenuItem>) => {\n        this._directDescendantItems.reset(items.filter(item => item._parentMenu === this));\n        this._directDescendantItems.notifyOnChanges();\n      });\n  }\n}\n\n@Component({\n  selector: 'mat-menu',\n  templateUrl: 'menu.html',\n  styleUrls: ['menu.css'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  exportAs: 'matMenu',\n  host: {\n    '[attr.aria-label]': 'null',\n    '[attr.aria-labelledby]': 'null',\n    '[attr.aria-describedby]': 'null',\n  },\n  animations: [matMenuAnimations.transformMenu, matMenuAnimations.fadeInItems],\n  providers: [{provide: MAT_MENU_PANEL, useExisting: MatMenu}],\n})\nexport class MatMenu extends _MatMenuBase {\n  protected override _elevationPrefix = 'mat-elevation-z';\n  protected override _baseElevation = 8;\n\n  /*\n   * @deprecated `changeDetectorRef` parameter will become a required parameter.\n   * @breaking-change 15.0.0\n   */\n  constructor(\n    elementRef: ElementRef<HTMLElement>,\n    ngZone: NgZone,\n    defaultOptions: MatMenuDefaultOptions,\n  );\n\n  constructor(\n    _elementRef: ElementRef<HTMLElement>,\n    _ngZone: NgZone,\n    @Inject(MAT_MENU_DEFAULT_OPTIONS) _defaultOptions: MatMenuDefaultOptions,\n    changeDetectorRef?: ChangeDetectorRef,\n  ) {\n    super(_elementRef, _ngZone, _defaultOptions, changeDetectorRef);\n  }\n}\n","<ng-template>\n  <div\n    class=\"mat-mdc-menu-panel mdc-menu-surface mdc-menu-surface--open mat-mdc-elevation-specific\"\n    [id]=\"panelId\"\n    [ngClass]=\"_classList\"\n    (keydown)=\"_handleKeydown($event)\"\n    (click)=\"closed.emit('click')\"\n    [@transformMenu]=\"_panelAnimationState\"\n    (@transformMenu.start)=\"_onAnimationStart($event)\"\n    (@transformMenu.done)=\"_onAnimationDone($event)\"\n    tabindex=\"-1\"\n    role=\"menu\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby || null\"\n    [attr.aria-describedby]=\"ariaDescribedby || null\">\n    <div class=\"mat-mdc-menu-content mdc-list\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</ng-template>\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {\n  FocusMonitor,\n  FocusOrigin,\n  isFakeMousedownFromScreenReader,\n  isFakeTouchstartFromScreenReader,\n} from '@angular/cdk/a11y';\nimport {Direction, Directionality} from '@angular/cdk/bidi';\nimport {ENTER, LEFT_ARROW, RIGHT_ARROW, SPACE} from '@angular/cdk/keycodes';\nimport {\n  FlexibleConnectedPositionStrategy,\n  HorizontalConnectionPos,\n  Overlay,\n  OverlayConfig,\n  OverlayRef,\n  ScrollStrategy,\n  VerticalConnectionPos,\n} from '@angular/cdk/overlay';\nimport {TemplatePortal} from '@angular/cdk/portal';\nimport {\n  AfterContentInit,\n  Directive,\n  ElementRef,\n  EventEmitter,\n  Inject,\n  InjectionToken,\n  Input,\n  NgZone,\n  OnDestroy,\n  Optional,\n  Output,\n  Self,\n  ViewContainerRef,\n} from '@angular/core';\nimport {normalizePassiveListenerOptions} from '@angular/cdk/platform';\nimport {asapScheduler, merge, Observable, of as observableOf, Subscription} from 'rxjs';\nimport {delay, filter, take, takeUntil} from 'rxjs/operators';\nimport {_MatMenuBase, MenuCloseReason} from './menu';\nimport {throwMatMenuRecursiveError} from './menu-errors';\nimport {MatMenuItem} from './menu-item';\nimport {MAT_MENU_PANEL, MatMenuPanel} from './menu-panel';\nimport {MenuPositionX, MenuPositionY} from './menu-positions';\n\n/** Injection token that determines the scroll handling while the menu is open. */\nexport const MAT_MENU_SCROLL_STRATEGY = new InjectionToken<() => ScrollStrategy>(\n  'mat-menu-scroll-strategy',\n);\n\n/** @docs-private */\nexport function MAT_MENU_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy {\n  return () => overlay.scrollStrategies.reposition();\n}\n\n/** @docs-private */\nexport const MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER = {\n  provide: MAT_MENU_SCROLL_STRATEGY,\n  deps: [Overlay],\n  useFactory: MAT_MENU_SCROLL_STRATEGY_FACTORY,\n};\n\n/** Options for binding a passive event listener. */\nconst passiveEventListenerOptions = normalizePassiveListenerOptions({passive: true});\n\n/**\n * Default top padding of the menu panel.\n * @deprecated No longer being used. Will be removed.\n * @breaking-change 15.0.0\n */\nexport const MENU_PANEL_TOP_PADDING = 8;\n\n@Directive({\n  host: {\n    '[attr.aria-haspopup]': 'menu ? \"menu\" : null',\n    '[attr.aria-expanded]': 'menuOpen || null',\n    '[attr.aria-controls]': 'menuOpen ? menu.panelId : null',\n    '(click)': '_handleClick($event)',\n    '(mousedown)': '_handleMousedown($event)',\n    '(keydown)': '_handleKeydown($event)',\n  },\n})\nexport abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy {\n  private _portal: TemplatePortal;\n  private _overlayRef: OverlayRef | null = null;\n  private _menuOpen: boolean = false;\n  private _closingActionsSubscription = Subscription.EMPTY;\n  private _hoverSubscription = Subscription.EMPTY;\n  private _menuCloseSubscription = Subscription.EMPTY;\n  private _scrollStrategy: () => ScrollStrategy;\n\n  /**\n   * We're specifically looking for a `MatMenu` here since the generic `MatMenuPanel`\n   * interface lacks some functionality around nested menus and animations.\n   */\n  private _parentMaterialMenu: _MatMenuBase | undefined;\n\n  /**\n   * Cached value of the padding of the parent menu panel.\n   * Used to offset sub-menus to compensate for the padding.\n   */\n  private _parentInnerPadding: number | undefined;\n\n  /**\n   * Handles touch start events on the trigger.\n   * Needs to be an arrow function so we can easily use addEventListener and removeEventListener.\n   */\n  private _handleTouchStart = (event: TouchEvent) => {\n    if (!isFakeTouchstartFromScreenReader(event)) {\n      this._openedBy = 'touch';\n    }\n  };\n\n  // Tracking input type is necessary so it's possible to only auto-focus\n  // the first item of the list when the menu is opened via the keyboard\n  _openedBy: Exclude<FocusOrigin, 'program' | null> | undefined = undefined;\n\n  /**\n   * @deprecated\n   * @breaking-change 8.0.0\n   */\n  @Input('mat-menu-trigger-for')\n  get _deprecatedMatMenuTriggerFor(): MatMenuPanel | null {\n    return this.menu;\n  }\n  set _deprecatedMatMenuTriggerFor(v: MatMenuPanel | null) {\n    this.menu = v;\n  }\n\n  /** References the menu instance that the trigger is associated with. */\n  @Input('matMenuTriggerFor')\n  get menu(): MatMenuPanel | null {\n    return this._menu;\n  }\n  set menu(menu: MatMenuPanel | null) {\n    if (menu === this._menu) {\n      return;\n    }\n\n    this._menu = menu;\n    this._menuCloseSubscription.unsubscribe();\n\n    if (menu) {\n      if (menu === this._parentMaterialMenu && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n        throwMatMenuRecursiveError();\n      }\n\n      this._menuCloseSubscription = menu.close.subscribe((reason: MenuCloseReason) => {\n        this._destroyMenu(reason);\n\n        // If a click closed the menu, we should close the entire chain of nested menus.\n        if ((reason === 'click' || reason === 'tab') && this._parentMaterialMenu) {\n          this._parentMaterialMenu.closed.emit(reason);\n        }\n      });\n    }\n\n    this._menuItemInstance?._setTriggersSubmenu(this.triggersSubmenu());\n  }\n  private _menu: MatMenuPanel | null;\n\n  /** Data to be passed along to any lazily-rendered content. */\n  @Input('matMenuTriggerData') menuData: any;\n\n  /**\n   * Whether focus should be restored when the menu is closed.\n   * Note that disabling this option can have accessibility implications\n   * and it's up to you to manage focus, if you decide to turn it off.\n   */\n  @Input('matMenuTriggerRestoreFocus') restoreFocus: boolean = true;\n\n  /** Event emitted when the associated menu is opened. */\n  @Output() readonly menuOpened: EventEmitter<void> = new EventEmitter<void>();\n\n  /**\n   * Event emitted when the associated menu is opened.\n   * @deprecated Switch to `menuOpened` instead\n   * @breaking-change 8.0.0\n   */\n  // tslint:disable-next-line:no-output-on-prefix\n  @Output() readonly onMenuOpen: EventEmitter<void> = this.menuOpened;\n\n  /** Event emitted when the associated menu is closed. */\n  @Output() readonly menuClosed: EventEmitter<void> = new EventEmitter<void>();\n\n  /**\n   * Event emitted when the associated menu is closed.\n   * @deprecated Switch to `menuClosed` instead\n   * @breaking-change 8.0.0\n   */\n  // tslint:disable-next-line:no-output-on-prefix\n  @Output() readonly onMenuClose: EventEmitter<void> = this.menuClosed;\n\n  constructor(\n    overlay: Overlay,\n    element: ElementRef<HTMLElement>,\n    viewContainerRef: ViewContainerRef,\n    scrollStrategy: any,\n    parentMenu: MatMenuPanel,\n    menuItemInstance: MatMenuItem,\n    dir: Directionality,\n    focusMonitor: FocusMonitor,\n    ngZone: NgZone,\n  );\n\n  /**\n   * @deprecated `focusMonitor` will become a required parameter.\n   * @breaking-change 8.0.0\n   */\n  constructor(\n    overlay: Overlay,\n    element: ElementRef<HTMLElement>,\n    viewContainerRef: ViewContainerRef,\n    scrollStrategy: any,\n    parentMenu: MatMenuPanel,\n    menuItemInstance: MatMenuItem,\n    dir: Directionality,\n    focusMonitor?: FocusMonitor | null,\n  );\n\n  /**\n   * @deprecated `ngZone` will become a required parameter.\n   * @breaking-change 15.0.0\n   */\n  constructor(\n    overlay: Overlay,\n    element: ElementRef<HTMLElement>,\n    viewContainerRef: ViewContainerRef,\n    scrollStrategy: any,\n    parentMenu: MatMenuPanel,\n    menuItemInstance: MatMenuItem,\n    dir: Directionality,\n    focusMonitor: FocusMonitor,\n  );\n\n  constructor(\n    private _overlay: Overlay,\n    private _element: ElementRef<HTMLElement>,\n    private _viewContainerRef: ViewContainerRef,\n    @Inject(MAT_MENU_SCROLL_STRATEGY) scrollStrategy: any,\n    @Inject(MAT_MENU_PANEL) @Optional() parentMenu: MatMenuPanel,\n    // `MatMenuTrigger` is commonly used in combination with a `MatMenuItem`.\n    // tslint:disable-next-line: lightweight-tokens\n    @Optional() @Self() private _menuItemInstance: MatMenuItem,\n    @Optional() private _dir: Directionality,\n    private _focusMonitor: FocusMonitor | null,\n    private _ngZone?: NgZone,\n  ) {\n    this._scrollStrategy = scrollStrategy;\n    this._parentMaterialMenu = parentMenu instanceof _MatMenuBase ? parentMenu : undefined;\n\n    _element.nativeElement.addEventListener(\n      'touchstart',\n      this._handleTouchStart,\n      passiveEventListenerOptions,\n    );\n  }\n\n  ngAfterContentInit() {\n    this._handleHover();\n  }\n\n  ngOnDestroy() {\n    if (this._overlayRef) {\n      this._overlayRef.dispose();\n      this._overlayRef = null;\n    }\n\n    this._element.nativeElement.removeEventListener(\n      'touchstart',\n      this._handleTouchStart,\n      passiveEventListenerOptions,\n    );\n\n    this._menuCloseSubscription.unsubscribe();\n    this._closingActionsSubscription.unsubscribe();\n    this._hoverSubscription.unsubscribe();\n  }\n\n  /** Whether the menu is open. */\n  get menuOpen(): boolean {\n    return this._menuOpen;\n  }\n\n  /** The text direction of the containing app. */\n  get dir(): Direction {\n    return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';\n  }\n\n  /** Whether the menu triggers a sub-menu or a top-level one. */\n  triggersSubmenu(): boolean {\n    return !!(this._menuItemInstance && this._parentMaterialMenu && this.menu);\n  }\n\n  /** Toggles the menu between the open and closed states. */\n  toggleMenu(): void {\n    return this._menuOpen ? this.closeMenu() : this.openMenu();\n  }\n\n  /** Opens the menu. */\n  openMenu(): void {\n    const menu = this.menu;\n\n    if (this._menuOpen || !menu) {\n      return;\n    }\n\n    const overlayRef = this._createOverlay(menu);\n    const overlayConfig = overlayRef.getConfig();\n    const positionStrategy = overlayConfig.positionStrategy as FlexibleConnectedPositionStrategy;\n\n    this._setPosition(menu, positionStrategy);\n    overlayConfig.hasBackdrop =\n      menu.hasBackdrop == null ? !this.triggersSubmenu() : menu.hasBackdrop;\n    overlayRef.attach(this._getPortal(menu));\n\n    if (menu.lazyContent) {\n      menu.lazyContent.attach(this.menuData);\n    }\n\n    this._closingActionsSubscription = this._menuClosingActions().subscribe(() => this.closeMenu());\n    this._initMenu(menu);\n\n    if (menu instanceof _MatMenuBase) {\n      menu._startAnimation();\n      menu._directDescendantItems.changes.pipe(takeUntil(menu.close)).subscribe(() => {\n        // Re-adjust the position without locking when the amount of items\n        // changes so that the overlay is allowed to pick a new optimal position.\n        positionStrategy.withLockedPosition(false).reapplyLastPosition();\n        positionStrategy.withLockedPosition(true);\n      });\n    }\n  }\n\n  /** Closes the menu. */\n  closeMenu(): void {\n    this.menu?.close.emit();\n  }\n\n  /**\n   * Focuses the menu trigger.\n   * @param origin Source of the menu trigger's focus.\n   */\n  focus(origin?: FocusOrigin, options?: FocusOptions) {\n    if (this._focusMonitor && origin) {\n      this._focusMonitor.focusVia(this._element, origin, options);\n    } else {\n      this._element.nativeElement.focus(options);\n    }\n  }\n\n  /**\n   * Updates the position of the menu to ensure that it fits all options within the viewport.\n   */\n  updatePosition(): void {\n    this._overlayRef?.updatePosition();\n  }\n\n  /** Closes the menu and does the necessary cleanup. */\n  private _destroyMenu(reason: MenuCloseReason) {\n    if (!this._overlayRef || !this.menuOpen) {\n      return;\n    }\n\n    const menu = this.menu;\n    this._closingActionsSubscription.unsubscribe();\n    this._overlayRef.detach();\n\n    // Always restore focus if the user is navigating using the keyboard or the menu was opened\n    // programmatically. We don't restore for non-root triggers, because it can prevent focus\n    // from making it back to the root trigger when closing a long chain of menus by clicking\n    // on the backdrop.\n    if (this.restoreFocus && (reason === 'keydown' || !this._openedBy || !this.triggersSubmenu())) {\n      this.focus(this._openedBy);\n    }\n\n    this._openedBy = undefined;\n\n    if (menu instanceof _MatMenuBase) {\n      menu._resetAnimation();\n\n      if (menu.lazyContent) {\n        // Wait for the exit animation to finish before detaching the content.\n        menu._animationDone\n          .pipe(\n            filter(event => event.toState === 'void'),\n            take(1),\n            //