/
ha-button-menu.ts
55 lines (48 loc) · 1 KB
/
ha-button-menu.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import {
customElement,
html,
TemplateResult,
LitElement,
CSSResult,
css,
query,
} from "lit-element";
import "@material/mwc-button";
import "@material/mwc-menu";
import "@material/mwc-list/mwc-list-item";
import type { Menu } from "@material/mwc-menu";
import { haStyle } from "../resources/styles";
import "./ha-icon-button";
@customElement("ha-button-menu")
export class HaButtonMenu extends LitElement {
@query("mwc-menu") private _menu?: Menu;
protected render(): TemplateResult {
return html`
<div @click=${this._handleClick}>
<slot name="trigger"></slot>
</div>
<mwc-menu>
<slot></slot>
</mwc-menu>
`;
}
private _handleClick(): void {
this._menu!.anchor = this;
this._menu!.show();
}
static get styles(): CSSResult[] {
return [
haStyle,
css`
:host {
position: relative;
}
`,
];
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-button-menu": HaButtonMenu;
}
}