@blox/material
Version:
Material Components for Angular
103 lines (102 loc) • 4.39 kB
TypeScript
import { AfterContentInit, ElementRef, EventEmitter, OnDestroy, Renderer2, OnInit } from '@angular/core';
import { MdcMenuSurfaceDirective } from '../menu-surface/mdc.menu-surface.directive';
/**
* Data send by the <code>pick</code> event of <code>MdcMenuDirective</code>.
*/
export interface MdcMenuSelection {
/**
* The <code>value</code> of the selected menu item (<code>MdcListItemDirective</code>).
*/
value: any;
/**
* The index of the selected menu item (<code>MdcListItemDirective</code>).
*/
index: number;
}
export declare enum FocusOnOpen {
first = 0,
last = 1,
root = -1
}
/**
* Directive for a spec aligned material design Menu.
* This directive should wrap an `mdcList`. The `mdcList` contains the menu items (and possible separators).
*
* An `mdcMenu` element will also match with the selector of the menu surface directive, documented
* <a href="/components/menu-surface#mdcMenuSurface">here: mdcMenuSurface</a>. The
* <a href="/components/menu-surface#mdcMenuAnchor">mdcMenuAnchor API</a> is documented on the same page.
*
* # Accessibility
*
* * For `role` and `aria-*` attributes on the list, see documentation for `mdcList`.
* * The best way to open the menu by user interaction is to use the `mdcMenuTrigger` directive
* on the interaction element (e.g. button). This takes care of following ARIA recommended practices
* for focusing the correct element, and maintaining proper `aria-*` and `role` attributes on the
* interaction element, menu, and list.
* * When opening the `mdcMenuSurface` programmatic, the program is responsible for all of this.
* (including focusing an element of the menu or the menu itself).
* * The `mdcList` will be made focusable by setting a `"tabindex"="-1"` attribute.
* * The `mdcList` will get an `aria-orientation=vertical` attribute.
* * The `mdcList` will get an `aria-hidden=true` attribute when the menu surface is closed.
*/
export declare class MdcMenuDirective implements AfterContentInit, OnInit, OnDestroy {
_elm: ElementRef;
private rndr;
private surface;
private onDestroy$;
private onListChange$;
private _id;
private cachedId;
private _function;
private _lastList;
/**
* Event emitted when the user selects a value. The passed object contains a value
* (set to the <code>value</code> of the selected list item), and an index
* (set to the index of the selected list item).
*/
readonly pick: EventEmitter<MdcMenuSelection>;
private mdcAdapter;
private foundation;
constructor(_elm: ElementRef, rndr: Renderer2, surface: MdcMenuSurfaceDirective);
ngOnInit(): void;
ngAfterContentInit(): void;
ngOnDestroy(): void;
private initAll;
private initFoundation;
private destroyFoundation;
private subscribeItemActions;
/** @docs-private */
get id(): string | null;
set id(value: string | null);
/** @docs-private */
get open(): boolean;
/** @docs-private */
openAndFocus(focus: FocusOnOpen): void;
}
/**
*
* # Accessibility
*
* * `Enter`, `Space`, and `Down Arrow` keys open the menu and place focus on the first item.
* * `Up Arrow` opens the menu and places focus on the last item
* * Click/Touch events set focus to the mdcList root element
*
* * Attribute `role=button` will be set if the element is not already a button element.
* * Attribute `aria-haspopup=menu` will be set if an `mdcMenu` is attached.
* * Attribute `aria-expanded` will be set while the attached menu is open
* * Attribute `aria-controls` will be set to the id of the attached menu. (And a unique id will be generated,
* if none was set on the menu).
* * `Enter`, `Space`, and `Down-Arrow` will open the menu with the first menu item focused.
* * `Up-Arrow` will open the menu with the last menu item focused.
* * Mouse/Touch events will open the menu with the list root element focused. The list root element
* will handle keyboard navigation once it receives focus.
*/
export declare class MdcMenuTriggerDirective {
private _mdcMenuTrigger;
private down;
constructor(elm: ElementRef);
get mdcMenuTrigger(): MdcMenuDirective | null;
set mdcMenuTrigger(value: MdcMenuDirective | null);
private setDown;
}
export declare const MENU_DIRECTIVES: (typeof MdcMenuDirective | typeof MdcMenuTriggerDirective)[];