/**
* @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 */
import * as ɵngcc0 from '@angular/core';
import * as ɵngcc1 from '@angular/cdk/a11y';
import * as ɵngcc2 from '@angular/material/core';
import * as ɵngcc3 from '@angular/common';
const _c0 = ["mat-menu-item", ""];
function MatMenuItem__svg_svg_2_Template(rf, ctx) { if (rf & 1) {
ɵngcc0.ɵɵnamespaceSVG();
ɵngcc0.ɵɵelementStart(0, "svg", 2);
ɵngcc0.ɵɵelement(1, "polygon", 3);
ɵngcc0.ɵɵelementEnd();
} }
const _c1 = ["*"];
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.ɵfac = function MatMenuItem_Factory(t) { return new (t || MatMenuItem)(ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ElementRef), ɵngcc0.ɵɵdirectiveInject(DOCUMENT), ɵngcc0.ɵɵdirectiveInject(ɵngcc1.FocusMonitor), ɵngcc0.ɵɵdirectiveInject(MAT_MENU_PANEL, 8), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ChangeDetectorRef)); };
MatMenuItem.ɵcmp = /*@__PURE__*/ ɵngcc0.ɵɵdefineComponent({ type: MatMenuItem, selectors: [["", "mat-menu-item", ""]], hostAttrs: [1, "mat-focus-indicator"], hostVars: 10, hostBindings: function MatMenuItem_HostBindings(rf, ctx) { if (rf & 1) {
ɵngcc0.ɵɵlistener("click", function MatMenuItem_click_HostBindingHandler($event) { return ctx._checkDisabled($event); })("mouseenter", function MatMenuItem_mouseenter_HostBindingHandler() { return ctx._handleMouseEnter(); });
} if (rf & 2) {
ɵngcc0.ɵɵattribute("role", ctx.role)("tabindex", ctx._getTabIndex())("aria-disabled", ctx.disabled.toString())("disabled", ctx.disabled || null);
ɵngcc0.ɵɵclassProp("mat-menu-item", true)("mat-menu-item-highlighted", ctx._highlighted)("mat-menu-item-submenu-trigger", ctx._triggersSubmenu);
} }, inputs: { disabled: "disabled", disableRipple: "disableRipple", role: "role" }, exportAs: ["matMenuItem"], features: [ɵngcc0.ɵɵInheritDefinitionFeature], attrs: _c0, ngContentSelectors: _c1, decls: 3, vars: 3, consts: [["matRipple", "", 1, "mat-menu-ripple", 3, "matRippleDisabled", "matRippleTrigger"], ["class", "mat-menu-submenu-icon", "viewBox", "0 0 5 10", "focusable", "false", 4, "ngIf"], ["viewBox", "0 0 5 10", "focusable", "false", 1, "mat-menu-submenu-icon"], ["points", "0,0 5,5 0,10"]], template: function MatMenuItem_Template(rf, ctx) { if (rf & 1) {
ɵngcc0.ɵɵprojectionDef();
ɵngcc0.ɵɵprojection(0);
ɵngcc0.ɵɵelement(1, "div", 0);
ɵngcc0.ɵɵtemplate(2, MatMenuItem__svg_svg_2_Template, 2, 0, "svg", 1);
} if (rf & 2) {
ɵngcc0.ɵɵadvance(1);
ɵngcc0.ɵɵproperty("matRippleDisabled", ctx.disableRipple || ctx.disabled)("matRippleTrigger", ctx._getHostElement());
ɵngcc0.ɵɵadvance(1);
ɵngcc0.ɵɵproperty("ngIf", ctx._triggersSubmenu);
} }, directives: [ɵngcc2.MatRipple, ɵngcc3.NgIf], encapsulation: 2, changeDetection: 0 });
MatMenuItem.ctorParameters = () => [
{ type: ElementRef },
{ type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
{ type: FocusMonitor },
{ type: undefined, decorators: [{ type: Inject, args: [MAT_MENU_PANEL,] }, { type: Optional }] },
{ type: ChangeDetectorRef }
];
MatMenuItem.propDecorators = {
role: [{ type: Input }],
_checkDisabled: [{ type: HostListener, args: ['click', ['$event'],] }],
_handleMouseEnter: [{ type: HostListener, args: ['mouseenter',] }]
};
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatMenuItem, [{
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