diff --git a/src/panels/lovelace/components/notifications/hui-configurator-notification-item.js b/src/panels/lovelace/components/notifications/hui-configurator-notification-item.js deleted file mode 100644 index 020a4b2821..0000000000 --- a/src/panels/lovelace/components/notifications/hui-configurator-notification-item.js +++ /dev/null @@ -1,60 +0,0 @@ -import "@material/mwc-button"; -import "@polymer/paper-icon-button/paper-icon-button"; - -import { html } from "@polymer/polymer/lib/utils/html-tag"; -import { PolymerElement } from "@polymer/polymer/polymer-element"; - -import "./hui-notification-item-template"; - -import EventsMixin from "../../../../mixins/events-mixin"; -import LocalizeMixin from "../../../../mixins/localize-mixin"; - -/* - * @appliesMixin EventsMixin - * @appliesMixin LocalizeMixin - */ -export class HuiConfiguratorNotificationItem extends EventsMixin( - LocalizeMixin(PolymerElement) -) { - static get template() { - return html` - - [[localize('domain.configurator')]] - -
[[_getMessage(notification)]]
- - [[_localizeState(notification.state)]] -
- `; - } - - static get properties() { - return { - hass: Object, - notification: Object, - }; - } - - _handleClick() { - this.fire("hass-more-info", { entityId: this.notification.entity_id }); - } - - _localizeState(state) { - return this.localize(`state.configurator.${state}`); - } - - _getMessage(notification) { - const friendlyName = notification.attributes.friendly_name; - return this.localize( - "ui.notification_drawer.click_to_configure", - "entity", - friendlyName - ); - } -} -customElements.define( - "hui-configurator-notification-item", - HuiConfiguratorNotificationItem -); diff --git a/src/panels/lovelace/components/notifications/hui-configurator-notification-item.ts b/src/panels/lovelace/components/notifications/hui-configurator-notification-item.ts new file mode 100644 index 0000000000..59a779f503 --- /dev/null +++ b/src/panels/lovelace/components/notifications/hui-configurator-notification-item.ts @@ -0,0 +1,59 @@ +import { + html, + LitElement, + TemplateResult, + property, + customElement, +} from "lit-element"; +import "@material/mwc-button"; + +import "./hui-notification-item-template"; + +import { HomeAssistant } from "../../../../types"; +import { HassEntity } from "home-assistant-js-websocket"; +import { fireEvent } from "../../../../common/dom/fire_event"; + +@customElement("hui-configurator-notification-item") +export class HuiConfiguratorNotificationItem extends LitElement { + @property() public hass?: HomeAssistant; + + @property() public notification?: HassEntity; + + protected render(): TemplateResult | void { + if (!this.hass || !this.notification) { + return html``; + } + + return html` + + ${this.hass.localize("domain.configurator")} + +
+ ${this.hass.localize( + "ui.notification_drawer.click_to_configure", + "entity", + this.notification.attributes.friendly_name + )} +
+ + ${this.hass.localize( + `state.configurator.${this.notification.state}` + )} +
+ `; + } + + private _handleClick(): void { + fireEvent(this, "hass-more-info", { + entityId: this.notification!.entity_id, + }); + } +} + +declare global { + interface HTMLElementTagNameMap { + "hui-configurator-notification-item": HuiConfiguratorNotificationItem; + } +}