/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import { ChangeDetectionStrategy, Component, ElementRef, ViewEncapsulation, Inject, Optional, Input, ChangeDetectorRef, } from '@angular/core';
import { mixinDisabled, mixinDisableRipple, } from '@angular/material/core';
import { FocusMonitor } from '@angular/cdk/a11y';
import { Subject } from 'rxjs';
import { DOCUMENT } from '@angular/common';
import { MAT_MENU_PANEL } from './menu-panel';
import * as i0 from "@angular/core";
import * as i1 from "@angular/cdk/a11y";
import * as i2 from "@angular/common";
import * as i3 from "@angular/material/core";
// Boilerplate for applying mixins to MatMenuItem.
/** @docs-private */
const _MatMenuItemBase = mixinDisableRipple(mixinDisabled(class {
}));
/**
* Single item inside a `mat-menu`. Provides the menu item styling and accessibility treatment.
*/
export class MatMenuItem extends _MatMenuItemBase {
constructor(_elementRef, _document, _focusMonitor, _parentMenu, _changeDetectorRef) {
super();
this._elementRef = _elementRef;
this._document = _document;
this._focusMonitor = _focusMonitor;
this._parentMenu = _parentMenu;
this._changeDetectorRef = _changeDetectorRef;
/** ARIA role for the menu item. */
this.role = 'menuitem';
/** Stream that emits when the menu item is hovered. */
this._hovered = new Subject();
/** Stream that emits when the menu item is focused. */
this._focused = new Subject();
/** Whether the menu item is highlighted. */
this._highlighted = false;
/** Whether the menu item acts as a trigger for a sub-menu. */
this._triggersSubmenu = false;
_parentMenu?.addItem?.(this);
}
/** Focuses the menu item. */
focus(origin, options) {
if (this._focusMonitor && origin) {
this._focusMonitor.focusVia(this._getHostElement(), origin, options);
}
else {
this._getHostElement().focus(options);
}
this._focused.next(this);
}
ngAfterViewInit() {
if (this._focusMonitor) {
// Start monitoring the element, so it gets the appropriate focused classes. We want
// to show the focus style for menu items only when the focus was not caused by a
// mouse or touch interaction.
this._focusMonitor.monitor(this._elementRef, false);
}
}
ngOnDestroy() {
if (this._focusMonitor) {
this._focusMonitor.stopMonitoring(this._elementRef);
}
if (this._parentMenu && this._parentMenu.removeItem) {
this._parentMenu.removeItem(this);
}
this._hovered.complete();
this._focused.complete();
}
/** Used to set the `tabindex`. */
_getTabIndex() {
return this.disabled ? '-1' : '0';
}
/** Returns the host DOM element. */
_getHostElement() {
return this._elementRef.nativeElement;
}
/** Prevents the default element actions if it is disabled. */
_checkDisabled(event) {
if (this.disabled) {
event.preventDefault();
event.stopPropagation();
}
}
/** Emits to the hover stream. */
_handleMouseEnter() {
this._hovered.next(this);
}
/** Gets the label to be used when determining whether the option should be focused. */
getLabel() {
const clone = this._elementRef.nativeElement.cloneNode(true);
const icons = clone.querySelectorAll('mat-icon, .material-icons');
// Strip away icons, so they don't show up in the text.
for (let i = 0; i < icons.length; i++) {
icons[i].remove();
}
return clone.textContent?.trim() || '';
}
_setHighlighted(isHighlighted) {
// We need to mark this for check for the case where the content is coming from a
// `matMenuContent` whose change detection tree is at the declaration position,
// not the insertion position. See #23175.
// @breaking-change 12.0.0 Remove null check for `_changeDetectorRef`.
this._highlighted = isHighlighted;
this._changeDetectorRef?.markForCheck();
}
_setTriggersSubmenu(triggersSubmenu) {
// @breaking-change 12.0.0 Remove null check for `_changeDetectorRef`.
this._triggersSubmenu = triggersSubmenu;
this._changeDetectorRef?.markForCheck();
}
_hasFocus() {
return this._document && this._document.activeElement === this._getHostElement();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatMenuItem, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }, { token: i1.FocusMonitor }, { token: MAT_MENU_PANEL, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: MatMenuItem, selector: "[mat-menu-item]", inputs: { disabled: "disabled", disableRipple: "disableRipple", role: "role" }, host: { listeners: { "click": "_checkDisabled($event)", "mouseenter": "_handleMouseEnter()" }, properties: { "attr.role": "role", "class.mat-mdc-menu-item-highlighted": "_highlighted", "class.mat-mdc-menu-item-submenu-trigger": "_triggersSubmenu", "attr.tabindex": "_getTabIndex()", "attr.aria-disabled": "disabled", "attr.disabled": "disabled || null" }, classAttribute: "mat-mdc-menu-item mat-mdc-focus-indicator" }, exportAs: ["matMenuItem"], usesInheritance: true, ngImport: i0, template: "\n\n\n