🕶 convert hui-configurator-notification-item to TypeScript/LitElement (#3027)

src/panels/lovelace/components/notifications/hui-configurator-notification-item.js

@@ -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`
-      <hui-notification-item-template>
-        <span slot="header">[[localize('domain.configurator')]]</span>
-
-        <div>[[_getMessage(notification)]]</div>
-
-        <mwc-button slot="actions" on-click="_handleClick"
-          >[[_localizeState(notification.state)]]</mwc-button
-        >
-      </hui-notification-item-template>
-    `;
-  }
-
-  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
-);

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`
+      <hui-notification-item-template>
+        <span slot="header">${this.hass.localize("domain.configurator")}</span>
+
+        <div>
+          ${this.hass.localize(
+            "ui.notification_drawer.click_to_configure",
+            "entity",
+            this.notification.attributes.friendly_name
+          )}
+        </div>
+
+        <mwc-button slot="actions" @click="${this._handleClick}"
+          >${this.hass.localize(
+            `state.configurator.${this.notification.state}`
+          )}</mwc-button
+        >
+      </hui-notification-item-template>
+    `;
+  }
+
+  private _handleClick(): void {
+    fireEvent(this, "hass-more-info", {
+      entityId: this.notification!.entity_id,
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-configurator-notification-item": HuiConfiguratorNotificationItem;
+  }
+}