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

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

@@ -1,35 +0,0 @@
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import computeDomain from "../../../../common/entity/compute_domain";
-
-import "./hui-configurator-notification-item";
-import "./hui-persistent-notification-item";
-
-export class HuiNotificationItem extends PolymerElement {
-  static get properties() {
-    return {
-      hass: Object,
-      notification: {
-        type: Object,
-        observer: "_stateChanged",
-      },
-    };
-  }
-
-  _stateChanged(notification) {
-    if (this.lastChild) {
-      this.removeChild(this.lastChild);
-    }
-
-    if (!notification) return;
-
-    const domain = notification.entity_id
-      ? computeDomain(notification.entity_id)
-      : "persistent_notification";
-    const tag = `hui-${domain}-notification-item`;
-    const el = document.createElement(tag);
-    el.hass = this.hass;
-    el.notification = notification;
-    this.appendChild(el);
-  }
-}
-customElements.define("hui-notification-item", HuiNotificationItem);

src/panels/lovelace/components/notifications/hui-notification-item.ts

@@ -0,0 +1,55 @@
+import {
+  LitElement,
+  property,
+  customElement,
+  PropertyValues,
+  TemplateResult,
+  html,
+} from "lit-element";
+
+import "./hui-configurator-notification-item";
+import "./hui-persistent-notification-item";
+
+import { HassEntity } from "home-assistant-js-websocket";
+import { HomeAssistant } from "../../../../types";
+
+@customElement("hui-notification-item")
+export class HuiNotificationItem extends LitElement {
+  @property() public hass?: HomeAssistant;
+
+  @property() public notification?: HassEntity;
+
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    if (!this.hass || !this.notification || changedProps.has("notification")) {
+      return true;
+    }
+
+    return false;
+  }
+
+  protected render(): TemplateResult | void {
+    if (!this.hass || !this.notification) {
+      return html``;
+    }
+
+    return this.notification.entity_id
+      ? html`
+          <hui-configurator-notification-item
+            .hass="${this.hass}"
+            .notification="${this.notification}"
+          ></hui-configurator-notification-item>
+        `
+      : html`
+          <hui-persistent-notification-item
+            .hass="${this.hass}"
+            .notification="${this.notification}"
+          ></hui-persistent-notification-item>
+        `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-notification-item": HuiNotificationItem;
+  }
+}

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

@@ -87,6 +87,6 @@ export class HuiPersistentNotificationItem extends LocalizeMixin(
   }
 }
 customElements.define(
-  "hui-persistent_notification-notification-item",
+  "hui-persistent-notification-item",
   HuiPersistentNotificationItem
 );