2022-07-26 22:39:38 +03:00
|
|
|
/**
|
|
|
|
* @license
|
|
|
|
* Copyright 2022 Google LLC
|
|
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
|
|
*/
|
|
|
|
|
2022-08-24 21:00:50 +03:00
|
|
|
import {customElement} from 'lit/decorators.js';
|
2022-07-26 22:39:38 +03:00
|
|
|
|
2023-07-24 19:44:01 +03:00
|
|
|
import {styles as forcedColors} from './internal/forced-colors-styles.css.js';
|
|
|
|
import {Menu} from './internal/menu.js';
|
|
|
|
import {styles} from './internal/menu-styles.css.js';
|
2022-07-26 22:39:38 +03:00
|
|
|
|
2023-07-24 19:28:36 +03:00
|
|
|
export {ListItem} from '../list/internal/listitem/list-item.js';
|
2023-07-24 19:44:01 +03:00
|
|
|
export {Corner, DefaultFocusState} from './internal/menu.js';
|
2023-08-03 03:23:04 +03:00
|
|
|
export {CloseMenuEvent, MenuItem} from './internal/shared.js';
|
2023-01-26 04:14:09 +03:00
|
|
|
|
2022-07-26 22:39:38 +03:00
|
|
|
declare global {
|
|
|
|
interface HTMLElementTagNameMap {
|
|
|
|
'md-menu': MdMenu;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-01-26 04:14:09 +03:00
|
|
|
/**
|
|
|
|
* @summary Menus display a list of choices on a temporary surface.
|
|
|
|
*
|
|
|
|
* @description
|
|
|
|
* Menus appear when users interact with a button, action, or other control.
|
|
|
|
*
|
|
|
|
* They can be opened from a variety of elements, most commonly icon buttons,
|
|
|
|
* buttons, and text fields.
|
|
|
|
*
|
|
|
|
* md-menu listens for the `close-menu` and `deselect-items` events.
|
|
|
|
*
|
|
|
|
* - `close-menu` closes the menu when dispatched from a child element.
|
|
|
|
* - `deselect-items` deselects all of its immediate menu-item children.
|
|
|
|
*
|
|
|
|
* @example
|
|
|
|
* ```html
|
|
|
|
* <div style="position:relative;">
|
2023-08-31 23:42:43 +03:00
|
|
|
* <!--
|
|
|
|
* The menu ref in this example can be achieved by any method such as the
|
|
|
|
* preferred `@query` decorator in Lit or a ref in React.
|
|
|
|
* -->
|
2023-01-26 04:14:09 +03:00
|
|
|
* <button
|
2023-08-29 11:40:02 +03:00
|
|
|
* id="anchor"
|
2023-01-26 04:14:09 +03:00
|
|
|
* @click=${() => this.menuRef.value.show()}>
|
|
|
|
* Click to open menu
|
|
|
|
* </button>
|
|
|
|
* <!--
|
|
|
|
* `has-overflow` is required when using a submenu which overflows the
|
2023-08-31 23:42:43 +03:00
|
|
|
* menu's contents.
|
|
|
|
*
|
|
|
|
* Additionally, `anchor` ingests an idref which do not pass through shadow
|
|
|
|
* roots. You can also set `.anchorElement` to an element reference if
|
|
|
|
* necessary.
|
2023-01-26 04:14:09 +03:00
|
|
|
* -->
|
2023-08-29 11:40:02 +03:00
|
|
|
* <md-menu anchor="anchor" has-overflow ${ref(menuRef)}>
|
|
|
|
* <md-menu-item header="This is a header"></md-menu-item>
|
2023-01-26 04:14:09 +03:00
|
|
|
* <md-sub-menu-item header="this is a submenu item">
|
|
|
|
* <md-menu slot="submenu">
|
|
|
|
* <md-menu-item
|
|
|
|
* header="This is an item inside a submenu"></md-menu-item>
|
|
|
|
* </md-menu>
|
2023-05-23 16:05:30 +03:00
|
|
|
* </md-sub-menu-item>
|
2023-01-26 04:14:09 +03:00
|
|
|
* </md-menu>
|
|
|
|
* </div>
|
|
|
|
* ```
|
|
|
|
*
|
|
|
|
* @final
|
|
|
|
* @suppress {visibility}
|
|
|
|
*/
|
2022-07-26 22:39:38 +03:00
|
|
|
@customElement('md-menu')
|
|
|
|
export class MdMenu extends Menu {
|
2023-03-30 04:43:27 +03:00
|
|
|
static override styles = [styles, forcedColors];
|
2022-07-26 22:39:38 +03:00
|
|
|
}
|