/**
* @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 { FocusMonitor } from '@angular/cdk/a11y';
import { ChangeDetectionStrategy, Component, ElementRef, ViewEncapsulation, Inject, Optional, Input, HostListener, ChangeDetectorRef, } from '@angular/core';
import { mixinDisabled, mixinDisableRipple, } from '@angular/material/core';
import { Subject } from 'rxjs';
import { DOCUMENT } from '@angular/common';
import { MAT_MENU_PANEL } from './menu-panel';
// Boilerplate for applying mixins to MatMenuItem.
/** @docs-private */
const _MatMenuItemBase = mixinDisableRipple(mixinDisabled(class {
}));
/**
* Single item inside of a `mat-menu`. Provides the menu item styling and accessibility treatment.
*/
export class MatMenuItem extends _MatMenuItemBase {
constructor(_elementRef,
/**
* @deprecated `_document` parameter is no longer being used and will be removed.
* @breaking-change 12.0.0
*/
_document, _focusMonitor, _parentMenu,
/**
* @deprecated `_changeDetectorRef` to become a required parameter.
* @breaking-change 14.0.0
*/
_changeDetectorRef) {
// @breaking-change 8.0.0 make `_focusMonitor` and `document` required params.
super();
this._elementRef = _elementRef;
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;
if (_parentMenu && _parentMenu.addItem) {
_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. */
// We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
// In Ivy the `host` bindings will be merged when this class is extended, whereas in
// ViewEngine they're overwritten.
// TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
// tslint:disable-next-line:no-host-decorator-in-concrete
_checkDisabled(event) {
if (this.disabled) {
event.preventDefault();
event.stopPropagation();
}
}
/** Emits to the hover stream. */
// We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
// In Ivy the `host` bindings will be merged when this class is extended, whereas in
// ViewEngine they're overwritten.
// TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
// tslint:disable-next-line:no-host-decorator-in-concrete
_handleMouseEnter() {
this._hovered.next(this);
}
/** Gets the label to be used when determining whether the option should be focused. */
getLabel() {
var _a, _b;
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++) {
const icon = icons[i];
(_a = icon.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(icon);
}
return ((_b = clone.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || '';
}
_setHighlighted(isHighlighted) {
var _a;
// 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 14.0.0 Remove null check for `_changeDetectorRef`.
this._highlighted = isHighlighted;
(_a = this._changeDetectorRef) === null || _a === void 0 ? void 0 : _a.markForCheck();
}
}
MatMenuItem.decorators = [
{ type: Component, args: [{
selector: '[mat-menu-item]',
exportAs: 'matMenuItem',
inputs: ['disabled', 'disableRipple'],
host: {
'[attr.role]': 'role',
'[class.mat-menu-item]': 'true',
'[class.mat-menu-item-highlighted]': '_highlighted',
'[class.mat-menu-item-submenu-trigger]': '_triggersSubmenu',
'[attr.tabindex]': '_getTabIndex()',
'[attr.aria-disabled]': 'disabled.toString()',
'[attr.disabled]': 'disabled || null',
'class': 'mat-focus-indicator',
},
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
template: "\n\n\n