diff --git a/src/components/ha-menu-item.ts b/src/components/ha-menu-item.ts index b6b133c68115..2f2914859640 100644 --- a/src/components/ha-menu-item.ts +++ b/src/components/ha-menu-item.ts @@ -1,9 +1,11 @@ import { MdMenuItem } from "@material/web/menu/menu-item"; import { css } from "lit"; -import { customElement } from "lit/decorators"; +import { customElement, property } from "lit/decorators"; @customElement("ha-menu-item") export class HaMenuItem extends MdMenuItem { + @property({ attribute: false }) clickAction?: (item?: HTMLElement) => void; + static override styles = [ ...super.styles, css` diff --git a/src/components/ha-menu.ts b/src/components/ha-menu.ts index 06c2d5f91def..06e1de186329 100644 --- a/src/components/ha-menu.ts +++ b/src/components/ha-menu.ts @@ -1,9 +1,30 @@ import { MdMenu } from "@material/web/menu/menu"; +import type { CloseMenuEvent } from "@material/web/menu/menu"; +import { + CloseReason, + KeydownCloseKey, +} from "@material/web/menu/internal/controllers/shared"; import { css } from "lit"; import { customElement } from "lit/decorators"; +import type { HaMenuItem } from "./ha-menu-item"; @customElement("ha-menu") export class HaMenu extends MdMenu { + connectedCallback(): void { + super.connectedCallback(); + this.addEventListener("close-menu", this._handleCloseMenu); + } + + private _handleCloseMenu(ev: CloseMenuEvent) { + if ( + ev.detail.reason.kind === CloseReason.KEYDOWN && + ev.detail.reason.key === KeydownCloseKey.ESCAPE + ) { + return; + } + (ev.detail.initiator as HaMenuItem).clickAction?.(ev.detail.initiator); + } + static override styles = [ ...super.styles, css` @@ -18,4 +39,8 @@ declare global { interface HTMLElementTagNameMap { "ha-menu": HaMenu; } + + interface HTMLElementEventMap { + "close-menu": CloseMenuEvent; + } } diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts index 0418f9b7010f..b2b64919ac76 100644 --- a/src/panels/config/automation/ha-automation-picker.ts +++ b/src/panels/config/automation/ha-automation-picker.ts @@ -68,6 +68,7 @@ import "../../../components/ha-icon-overflow-menu"; import "../../../components/ha-menu"; import type { HaMenu } from "../../../components/ha-menu"; import "../../../components/ha-menu-item"; +import type { HaMenuItem } from "../../../components/ha-menu-item"; import "../../../components/ha-sub-menu"; import "../../../components/ha-svg-icon"; import { createAreaRegistryEntry } from "../../../data/area_registry"; @@ -822,7 +823,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) { - + - +
${this.hass.localize( @@ -840,7 +841,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) { )}
- +
${this.hass.localize( @@ -848,13 +849,13 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) { )}
- +
${this.hass.localize("ui.panel.config.automation.editor.run")}
- +
${this.hass.localize( @@ -863,13 +864,13 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
- +
${this.hass.localize("ui.panel.config.automation.picker.duplicate")}
- + - +
${this.hass.localize("ui.panel.config.automation.picker.delete")} @@ -1051,28 +1052,32 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) { this._applyFilters(); } - private _showInfo(ev) { - const automation = ev.currentTarget.parentElement.anchorElement.automation; + private _showInfo = (item: HaMenuItem) => { + const automation = ((item.parentElement as HaMenu)!.anchorElement as any)! + .automation; fireEvent(this, "hass-more-info", { entityId: automation.entity_id }); - } + }; - private _showSettings(ev) { - const automation = ev.currentTarget.parentElement.anchorElement.automation; + private _showSettings = (item: HaMenuItem) => { + const automation = ((item.parentElement as HaMenu)!.anchorElement as any)! + .automation; fireEvent(this, "hass-more-info", { entityId: automation.entity_id, view: "settings", }); - } + }; - private _runActions(ev) { - const automation = ev.currentTarget.parentElement.anchorElement.automation; + private _runActions = (item: HaMenuItem) => { + const automation = ((item.parentElement as HaMenu)!.anchorElement as any)! + .automation; triggerAutomationActions(this.hass, automation.entity_id); - } + }; - private _editCategory(ev) { - const automation = ev.currentTarget.parentElement.anchorElement.automation; + private _editCategory = (item: HaMenuItem) => { + const automation = ((item.parentElement as HaMenu)!.anchorElement as any)! + .automation; const entityReg = this._entityReg.find( (reg) => reg.entity_id === automation.entity_id @@ -1092,10 +1097,11 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) { scope: "automation", entityReg, }); - } + }; - private _showTrace(ev) { - const automation = ev.currentTarget.parentElement.anchorElement.automation; + private _showTrace = (item: HaMenuItem) => { + const automation = ((item.parentElement as HaMenu)!.anchorElement as any)! + .automation; if (!automation.attributes.id) { showAlertDialog(this, { @@ -1108,19 +1114,21 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) { navigate( `/config/automation/trace/${encodeURIComponent(automation.attributes.id)}` ); - } + }; - private async _toggle(ev): Promise { - const automation = ev.currentTarget.parentElement.anchorElement.automation; + private _toggle = async (item: HaMenuItem): Promise => { + const automation = ((item.parentElement as HaMenu)!.anchorElement as any)! + .automation; const service = automation.state === "off" ? "turn_on" : "turn_off"; await this.hass.callService("automation", service, { entity_id: automation.entity_id, }); - } + }; - private async _deleteConfirm(ev) { - const automation = ev.currentTarget.parentElement.anchorElement.automation; + private _deleteConfirm = async (item: HaMenuItem) => { + const automation = ((item.parentElement as HaMenu)!.anchorElement as any)! + .automation; showConfirmationDialog(this, { title: this.hass.localize( @@ -1135,7 +1143,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) { confirm: () => this._delete(automation), destructive: true, }); - } + }; private async _delete(automation) { try { @@ -1155,8 +1163,9 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) { } } - private async _duplicate(ev) { - const automation = ev.currentTarget.parentElement.anchorElement.automation; + private _duplicate = async (item: HaMenuItem) => { + const automation = ((item.parentElement as HaMenu)!.anchorElement as any)! + .automation; try { const config = await fetchAutomationFileConfig( @@ -1180,7 +1189,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) { ), }); } - } + }; private _showHelp() { showAlertDialog(this, {