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

Angular Material

{"version":3,"file":"menu.mjs","sources":["../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/menu/menu-panel.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/menu/menu-item.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/menu/menu-item.html","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/menu/menu-errors.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/menu/menu-content.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/menu/menu.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/menu/menu.html","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/menu/menu-trigger.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/menu/module.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/menu/menu-animations.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.dev/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\n  /**\n   * @deprecated No longer used and will be removed.\n   * @breaking-change 21.0.0\n   */\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.dev/license\n */\n\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  OnDestroy,\n  ViewEncapsulation,\n  Input,\n  AfterViewInit,\n  ChangeDetectorRef,\n  booleanAttribute,\n  inject,\n} from '@angular/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';\nimport {_StructuralStylesLoader, MatRipple} from '../core';\nimport {_CdkPrivateStyleLoader} from '@angular/cdk/private';\n\n/**\n * Single item inside a `mat-menu`. Provides the menu item styling and accessibility treatment.\n */\n@Component({\n  selector: '[mat-menu-item]',\n  exportAs: 'matMenuItem',\n  host: {\n    '[attr.role]': 'role',\n    'class': 'mat-mdc-menu-item mat-focus-indicator',\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  imports: [MatRipple],\n})\nexport class MatMenuItem implements FocusableOption, AfterViewInit, OnDestroy {\n  private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private _document = inject(DOCUMENT);\n  private _focusMonitor = inject(FocusMonitor);\n  _parentMenu? = inject<MatMenuPanel<MatMenuItem>>(MAT_MENU_PANEL, {optional: true});\n  private _changeDetectorRef = inject(ChangeDetectorRef);\n\n  /** ARIA role for the menu item. */\n  @Input() role: 'menuitem' | 'menuitemradio' | 'menuitemcheckbox' = 'menuitem';\n\n  /** Whether the menu item is disabled. */\n  @Input({transform: booleanAttribute}) disabled: boolean = false;\n\n  /** Whether ripples are disabled on the menu item. */\n  @Input({transform: booleanAttribute}) disableRipple: boolean = false;\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(...args: unknown[]);\n\n  constructor() {\n    inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);\n    this._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    this._highlighted = isHighlighted;\n    this._changeDetectorRef.markForCheck();\n  }\n\n  _setTriggersSubmenu(triggersSubmenu: boolean) {\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, [matMenuItemIcon]\"></ng-content>\n<span class=\"mat-mdc-menu-item-text\"><ng-content></ng-content></span>\n<div class=\"mat-mdc-menu-ripple\" matRipple\n     [matRippleDisabled]=\"disableRipple || disabled\"\n     [matRippleTrigger]=\"_getHostElement()\">\n</div>\n\n@if (_triggersSubmenu) {\n     <svg\n       class=\"mat-mdc-menu-submenu-icon\"\n       viewBox=\"0 0 5 10\"\n       focusable=\"false\"\n       aria-hidden=\"true\"><polygon points=\"0,0 5,5 0,10\"/></svg>\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.dev/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.dev/license\n */\n\nimport {DomPortalOutlet, TemplatePortal} from '@angular/cdk/portal';\nimport {DOCUMENT} from '@angular/common';\nimport {\n  ApplicationRef,\n  ChangeDetectorRef,\n  Directive,\n  InjectionToken,\n  Injector,\n  OnDestroy,\n  TemplateRef,\n  ViewContainerRef,\n  inject,\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/** 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 implements OnDestroy {\n  private _template = inject<TemplateRef<any>>(TemplateRef);\n  private _appRef = inject(ApplicationRef);\n  private _injector = inject(Injector);\n  private _viewContainerRef = inject(ViewContainerRef);\n  private _document = inject(DOCUMENT);\n  private _changeDetectorRef = inject(ChangeDetectorRef);\n\n  private _portal: TemplatePortal<any> | undefined;\n  private _outlet: DomPortalOutlet | undefined;\n\n  /** Emits when the menu content has been attached. */\n  readonly _attached = new Subject<void>();\n\n  constructor(...args: unknown[]);\n\n  constructor() {}\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        null,\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    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    this.detach();\n    this._outlet?.dispose();\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.dev/license\n */\n\nimport {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChild,\n  ContentChildren,\n  ElementRef,\n  EventEmitter,\n  InjectionToken,\n  Input,\n  OnDestroy,\n  Output,\n  TemplateRef,\n  QueryList,\n  ViewChild,\n  ViewEncapsulation,\n  OnInit,\n  ChangeDetectorRef,\n  booleanAttribute,\n  afterNextRender,\n  AfterRenderRef,\n  inject,\n  Injector,\n  ANIMATION_MODULE_TYPE,\n} from '@angular/core';\nimport {_IdGenerator, FocusKeyManager, FocusOrigin} from '@angular/cdk/a11y';\nimport {Direction} from '@angular/cdk/bidi';\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} from 'rxjs';\nimport {startWith, switchMap} 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';\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/**\n * @docs-private\n * @deprecated No longer used, will be removed.\n * @breaking-change 21.0.0\n */\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/** Name of the enter animation `@keyframes`. */\nconst ENTER_ANIMATION = '_mat-menu-enter';\n\n/** Name of the exit animation `@keyframes`. */\nconst EXIT_ANIMATION = '_mat-menu-exit';\n\n@Component({\n  selector: 'mat-menu',\n  templateUrl: 'menu.html',\n  styleUrl: '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  providers: [{provide: MAT_MENU_PANEL, useExisting: MatMenu}],\n})\nexport class MatMenu implements AfterContentInit, MatMenuPanel<MatMenuItem>, OnInit, OnDestroy {\n  private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private _changeDetectorRef = inject(ChangeDetectorRef);\n  private _injector = inject(Injector);\n\n  private _keyManager: FocusKeyManager<MatMenuItem>;\n  private _xPosition: MenuPositionX;\n  private _yPosition: MenuPositionY;\n  private _firstItemFocusRef?: AfterRenderRef;\n  private _exitFallbackTimeout: ReturnType<typeof setTimeout> | undefined;\n\n  /** Whether animations are currently disabled. */\n  protected _animationsDisabled: boolean;\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  /** Classes to be applied to the menu panel. */\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<'void' | 'enter'>();\n\n  /** Whether the menu is animating. */\n  _isAnimating = false;\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[];\n\n  /** Class to be added to the backdrop element. */\n  @Input() backdropClass: string;\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({transform: booleanAttribute}) overlapTrigger: boolean;\n\n  /** Whether the menu has a backdrop. */\n  @Input({transform: (value: any) => (value == null ? null : booleanAttribute(value))})\n  hasBackdrop?: boolean;\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    const newClassList = {...this._classList};\n\n    if (previousPanelClass && previousPanelClass.length) {\n      previousPanelClass.split(' ').forEach((className: string) => {\n        newClassList[className] = false;\n      });\n    }\n\n    this._previousPanelClass = classes;\n\n    if (classes && classes.length) {\n      classes.split(' ').forEach((className: string) => {\n        newClassList[className] = true;\n      });\n\n      this._elementRef.nativeElement.className = '';\n    }\n\n    this._classList = newClassList;\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: string = inject(_IdGenerator).getId('mat-menu-panel-');\n\n  constructor(...args: unknown[]);\n\n  constructor() {\n    const defaultOptions = inject<MatMenuDefaultOptions>(MAT_MENU_DEFAULT_OPTIONS);\n    this.overlayPanelClass = defaultOptions.overlayPanelClass || '';\n    this._xPosition = defaultOptions.xPosition;\n    this._yPosition = defaultOptions.yPosition;\n    this.backdropClass = defaultOptions.backdropClass;\n    this.overlapTrigger = defaultOptions.overlapTrigger;\n    this.hasBackdrop = defaultOptions.hasBackdrop;\n    this._animationsDisabled = inject(ANIMATION_MODULE_TYPE, {optional: true}) === 'NoopAnimations';\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._firstItemFocusRef?.destroy();\n    clearTimeout(this._exitFallbackTimeout);\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\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 `afterNextRender` to ensure iOS VoiceOver screen reader focuses the first item (#24735).\n    this._firstItemFocusRef?.destroy();\n    this._firstItemFocusRef = afterNextRender(\n      () => {\n        const menuPanel = this._resolvePanel();\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      {injector: this._injector},\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   * @deprecated No longer used and will be removed.\n   * @breaking-change 21.0.0\n   */\n  setElevation(_depth: number): void {}\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    this._classList = {\n      ...this._classList,\n      ['mat-menu-before']: posX === 'before',\n      ['mat-menu-after']: posX === 'after',\n      ['mat-menu-above']: posY === 'above',\n      ['mat-menu-below']: posY === 'below',\n    };\n\n    this._changeDetectorRef.markForCheck();\n  }\n\n  /** Callback that is invoked when the panel animation completes. */\n  protected _onAnimationDone(state: string) {\n    const isExit = state === EXIT_ANIMATION;\n\n    if (isExit || state === ENTER_ANIMATION) {\n      if (isExit) {\n        clearTimeout(this._exitFallbackTimeout);\n        this._exitFallbackTimeout = undefined;\n      }\n      this._animationDone.next(isExit ? 'void' : 'enter');\n      this._isAnimating = false;\n    }\n  }\n\n  protected _onAnimationStart(state: string) {\n    if (state === ENTER_ANIMATION || state === EXIT_ANIMATION) {\n      this._isAnimating = true;\n    }\n  }\n\n  _setIsOpen(isOpen: boolean) {\n    this._panelAnimationState = isOpen ? 'enter' : 'void';\n\n    if (isOpen) {\n      if (this._keyManager.activeItemIndex === 0) {\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        const menuPanel = this._resolvePanel();\n\n        if (menuPanel) {\n          menuPanel.scrollTop = 0;\n        }\n      }\n    } else if (!this._animationsDisabled) {\n      // Some apps do `* { animation: none !important; }` in tests which will prevent the\n      // `animationend` event from firing. Since the exit animation is loading-bearing for\n      // removing the content from the DOM, add a fallback timer.\n      this._exitFallbackTimeout = setTimeout(() => this._onAnimationDone(EXIT_ANIMATION), 200);\n    }\n\n    // Animation events won't fire when animations are disabled so we simulate them.\n    if (this._animationsDisabled) {\n      setTimeout(() => {\n        this._onAnimationDone(isOpen ? ENTER_ANIMATION : EXIT_ANIMATION);\n      });\n    }\n\n    this._changeDetectorRef.markForCheck();\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  /** Gets the menu panel DOM node. */\n  private _resolvePanel(): HTMLElement | null {\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    return menuPanel;\n  }\n}\n","<ng-template>\n  <div\n    class=\"mat-mdc-menu-panel\"\n    [id]=\"panelId\"\n    [class]=\"_classList\"\n    [class.mat-menu-panel-animations-disabled]=\"_animationsDisabled\"\n    [class.mat-menu-panel-exit-animation]=\"_panelAnimationState === 'void'\"\n    [class.mat-menu-panel-animating]=\"_isAnimating\"\n    (click)=\"closed.emit('click')\"\n    tabindex=\"-1\"\n    role=\"menu\"\n    (animationstart)=\"_onAnimationStart($event.animationName)\"\n    (animationend)=\"_onAnimationDone($event.animationName)\"\n    (animationcancel)=\"_onAnimationDone($event.animationName)\"\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\">\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.dev/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  ChangeDetectorRef,\n  Directive,\n  ElementRef,\n  EventEmitter,\n  inject,\n  InjectionToken,\n  Input,\n  NgZone,\n  OnDestroy,\n  Output,\n  Renderer2,\n  ViewContainerRef,\n} from '@angular/core';\nimport {_bindEventWithOptions} from '@angular/cdk/platform';\nimport {merge, Observable, of as observableOf, Subscription} from 'rxjs';\nimport {filter, take, takeUntil} from 'rxjs/operators';\nimport {MatMenu, 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    providedIn: 'root',\n    factory: () => {\n      const overlay = inject(Overlay);\n      return () => overlay.scrollStrategies.reposition();\n    },\n  },\n);\n\n/**\n * @docs-private\n * @deprecated No longer used, will be removed.\n * @breaking-change 21.0.0\n */\nexport function MAT_MENU_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy {\n  return () => overlay.scrollStrategies.reposition();\n}\n\n/**\n * @docs-private\n * @deprecated No longer used, will be removed.\n * @breaking-change 21.0.0\n */\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 = {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/** Mapping between menu panels and the last trigger that opened them. */\nconst PANELS_TO_TRIGGERS = new WeakMap<MatMenuPanel, MatMenuTrigger>();\n\n/** Directive applied to an element that should trigger a `mat-menu`. */\n@Directive({\n  selector: `[mat-menu-trigger-for], [matMenuTriggerFor]`,\n  host: {\n    'class': 'mat-mdc-menu-trigger',\n    '[attr.aria-haspopup]': 'menu ? \"menu\" : null',\n    '[attr.aria-expanded]': 'menuOpen',\n    '[attr.aria-controls]': 'menuOpen ? menu.panelId : null',\n    '(click)': '_handleClick($event)',\n    '(mousedown)': '_handleMousedown($event)',\n    '(keydown)': '_handleKeydown($event)',\n  },\n  exportAs: 'matMenuTrigger',\n})\nexport class MatMenuTrigger implements AfterContentInit, OnDestroy {\n  private _overlay = inject(Overlay);\n  private _element = inject<ElementRef<HTMLElement>>(ElementRef);\n  private _viewContainerRef = inject(ViewContainerRef);\n  private _menuItemInstance = inject(MatMenuItem, {optional: true, self: true})!;\n  private _dir = inject(Directionality, {optional: true});\n  private _focusMonitor = inject(FocusMonitor);\n  private _ngZone = inject(NgZone);\n  private _scrollStrategy = inject(MAT_MENU_SCROLL_STRATEGY);\n  private _changeDetectorRef = inject(ChangeDetectorRef);\n  private _cleanupTouchstart: () => void;\n\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 _pendingRemoval: Subscription | undefined;\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: MatMenu | 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  // 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(...args: unknown[]);\n\n  constructor() {\n    const parentMenu = inject<MatMenuPanel>(MAT_MENU_PANEL, {optional: true});\n    const renderer = inject(Renderer2);\n\n    this._parentMaterialMenu = parentMenu instanceof MatMenu ? parentMenu : undefined;\n    this._cleanupTouchstart = _bindEventWithOptions(\n      renderer,\n      this._element.nativeElement,\n      'touchstart',\n      (event: TouchEvent) => {\n        if (!isFakeTouchstartFromScreenReader(event)) {\n          this._openedBy = 'touch';\n        }\n      },\n      passiveEventListenerOptions,\n    );\n  }\n\n  ngAfterContentInit() {\n    this._handleHover();\n  }\n\n  ngOnDestroy() {\n    if (this.menu && this._ownsMenu(this.menu)) {\n      PANELS_TO_TRIGGERS.delete(this.menu);\n    }\n\n    this._cleanupTouchstart();\n    this._pendingRemoval?.unsubscribe();\n    this._menuCloseSubscription.unsubscribe();\n    this._closingActionsSubscription.unsubscribe();\n    this._hoverSubscription.unsubscribe();\n\n    if (this._overlayRef) {\n      this._overlayRef.dispose();\n      this._overlayRef = null;\n    }\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    this._pendingRemoval?.unsubscribe();\n    const previousTrigger = PANELS_TO_TRIGGERS.get(menu);\n    PANELS_TO_TRIGGERS.set(menu, this);\n\n    // If the same menu is currently attached to another trigger,\n    // we need to close it so it doesn't end up in a broken state.\n    if (previousTrigger && previousTrigger !== this) {\n      previousTrigger.closeMenu();\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\n    // We need the `hasAttached` check for the case where the user kicked off a removal animation,\n    // but re-entered the menu. Re-attaching the same portal will trigger an error otherwise.\n    if (!overlayRef.hasAttached()) {\n      overlayRef.attach(this._getPortal(menu));\n      menu.lazyContent?.attach(this.menuData);\n    }\n\n    this._closingActionsSubscription = this._menuClosingActions().subscribe(() => this.closeMenu());\n    menu.parentMenu = this.triggersSubmenu() ? this._parentMaterialMenu : undefined;\n    menu.direction = this.dir;\n    menu.focusFirstItem(this._openedBy || 'program');\n    this._setIsMenuOpen(true);\n\n    if (menu instanceof MatMenu) {\n      menu._setIsOpen(true);\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    const overlayRef = this._overlayRef;\n    const menu = this._menu;\n\n    if (!overlayRef || !this.menuOpen) {\n      return;\n    }\n\n    this._closingActionsSubscription.unsubscribe();\n    this._pendingRemoval?.unsubscribe();\n\n    // Note that we don't wait for the animation to finish if another trigger took\n    // over the menu, because the panel will end up empty which looks glitchy.\n    if (menu instanceof MatMenu && this._ownsMenu(menu)) {\n      this._pendingRemoval = menu._animationDone.pipe(take(1)).subscribe(() => {\n        overlayRef.detach();\n        menu.lazyContent?.detach();\n      });\n      menu._setIsOpen(false);\n    } else {\n      overlayRef.detach();\n      menu?.lazyContent?.detach();\n    }\n\n    if (menu && this._ownsMenu(menu)) {\n      PANELS_TO_TRIGGERS.delete(menu);\n    }\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    this._setIsMenuOpen(false);\n  }\n\n  // set state rather than toggle to support triggers sharing a menu\n  private _setIsMenuOpen(isOpen: boolean): void {\n    if (isOpen !== this._menuOpen) {\n      this._menuOpen = isOpen;\n      this._menuOpen ? this.menuOpened.emit() : this.menuClosed.emit();\n\n      if (this.triggersSubmenu()) {\n        this._menuItemInstance._setHighlighted(isOpen);\n      }\n\n      this._changeDetectorRef.markForCheck();\n    }\n  }\n\n  /**\n   * This method creates the overlay from the provided menu's template and saves its\n   * OverlayRef so that it can be attached to the DOM when openMenu is called.\n   */\n  private _createOverlay(menu: MatMenuPanel): OverlayRef {\n    if (!this._overlayRef) {\n      const config = this._getOverlayConfig(menu);\n      this._subscribeToPositions(\n        menu,\n        config.positionStrategy as FlexibleConnectedPositionStrategy,\n      );\n      this._overlayRef = this._overlay.create(config);\n      this._overlayRef.keydownEvents().subscribe(event => {\n        if (this.menu instanceof MatMenu) {\n          this.menu._handleKeydown(event);\n        }\n      });\n    }\n\n    return this._overlayRef;\n  }\n\n  /**\n   * This method builds the configuration object needed to create the overlay, the OverlayState.\n   * @returns OverlayConfig\n   */\n  private _getOverlayConfig(menu: MatMenuPanel): OverlayConfig {\n    return new OverlayConfig({\n      positionStrategy: this._overlay\n        .position()\n        .flexibleConnectedTo(this._element)\n        .withLockedPosition()\n        .withGrowAfterOpen()\n        .withTransformOriginOn('.mat-menu-panel, .mat-mdc-menu-panel'),\n      backdropClass: menu.backdropClass || 'cdk-overlay-transparent-backdrop',\n      panelClass: menu.overlayPanelClass,\n      scrollStrategy: this._scrollStrategy(),\n      direction: this._dir || 'ltr',\n    });\n  }\n\n  /**\n   * Listens to changes in the position of the overlay and sets the correct classes\n   * on the menu based on the new position. This ensures the animation origin is always\n   * correct, even if a fallback position is used for the overlay.\n   */\n  private _subscribeToPositions(menu: MatMenuPanel, position: FlexibleConnectedPositionStrategy) {\n    if (menu.setPositionClasses) {\n      position.positionChanges.subscribe(change => {\n        this._ngZone.run(() => {\n          const posX: MenuPositionX =\n            change.connectionPair.overlayX === 'start' ? 'after' : 'before';\n          const posY: MenuPositionY = change.connectionPair.overlayY === 'top' ? 'below' : 'above';\n          menu.setPositionClasses!(posX, posY);\n        });\n      });\n    }\n  }\n\n  /**\n   * Sets the appropriate positions on a position strategy\n   * so the overlay connects with the trigger correctly.\n   * @param positionStrategy Strategy whose position to update.\n   */\n  private _setPosition(menu: MatMenuPanel, positionStrategy: FlexibleConnectedPositionStrategy) {\n    let [originX, originFallbackX]: HorizontalConnectionPos[] =\n      menu.xPosition === 'before' ? ['end', 'start'] : ['start', 'end'];\n\n    let [overlayY, overlayFallbackY]: VerticalConnectionPos[] =\n      menu.yPosition === 'above' ? ['bottom', 'top'] : ['top', 'bottom'];\n\n    let [originY, originFallbackY] = [overlayY, overlayFallbackY];\n    let [overlayX, overlayFallbackX] = [originX, originFallbackX];\n    let offsetY = 0;\n\n    if (this.triggersSubmenu()) {\n      // When the menu is a sub-menu, it should always align itself\n      // to the edges of the trigger, instead of overlapping it.\n      overlayFallbackX = originX = menu.xPosition === 'before' ? 'start' : 'end';\n      o