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

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

@@ -10,14 +10,14 @@ 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";
+import { HassNotification } from "./types";
 
 @customElement("hui-configurator-notification-item")
 export class HuiConfiguratorNotificationItem extends LitElement {
   @property() public hass?: HomeAssistant;
 
-  @property() public notification?: HassEntity;
+  @property() public notification?: HassNotification;
 
   protected render(): TemplateResult | void {
     if (!this.hass || !this.notification) {

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

@@ -10,14 +10,14 @@ import {
 import "./hui-configurator-notification-item";
 import "./hui-persistent-notification-item";
 
-import { HassEntity } from "home-assistant-js-websocket";
 import { HomeAssistant } from "../../../../types";
+import { HassNotification } from "./types";
 
 @customElement("hui-notification-item")
 export class HuiNotificationItem extends LitElement {
   @property() public hass?: HomeAssistant;
 
-  @property() public notification?: HassEntity;
+  @property() public notification?: HassNotification;
 
   protected shouldUpdate(changedProps: PropertyValues): boolean {
     if (!this.hass || !this.notification || changedProps.has("notification")) {

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

@@ -1,92 +0,0 @@
-import "@material/mwc-button";
-import "@polymer/paper-icon-button/paper-icon-button";
-import "@polymer/paper-tooltip/paper-tooltip";
-
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../../../components/ha-relative-time";
-import "../../../../components/ha-markdown";
-import "./hui-notification-item-template";
-
-import LocalizeMixin from "../../../../mixins/localize-mixin";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-export class HuiPersistentNotificationItem extends LocalizeMixin(
-  PolymerElement
-) {
-  static get template() {
-    return html`
-      <style>
-        .time {
-          display: flex;
-          justify-content: flex-end;
-          margin-top: 6px;
-        }
-        ha-relative-time {
-          color: var(--secondary-text-color);
-        }
-        a {
-          color: var(--primary-color);
-        }
-      </style>
-      <hui-notification-item-template>
-        <span slot="header">[[_computeTitle(notification)]]</span>
-
-        <ha-markdown content="[[notification.message]]"></ha-markdown>
-
-        <div class="time">
-          <span>
-            <ha-relative-time
-              hass="[[hass]]"
-              datetime="[[notification.created_at]]"
-            ></ha-relative-time>
-            <paper-tooltip
-              >[[_computeTooltip(hass, notification)]]</paper-tooltip
-            >
-          </span>
-        </div>
-
-        <mwc-button slot="actions" on-click="_handleDismiss"
-          >[[localize('ui.card.persistent_notification.dismiss')]]</mwc-button
-        >
-      </hui-notification-item-template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      notification: Object,
-    };
-  }
-
-  _handleDismiss() {
-    this.hass.callService("persistent_notification", "dismiss", {
-      notification_id: this.notification.notification_id,
-    });
-  }
-
-  _computeTitle(notification) {
-    return notification.title || notification.notification_id;
-  }
-
-  _computeTooltip(hass, notification) {
-    if (!hass || !notification) return null;
-
-    const d = new Date(notification.created_at);
-    return d.toLocaleDateString(hass.language, {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-      minute: "numeric",
-      hour: "numeric",
-    });
-  }
-}
-customElements.define(
-  "hui-persistent-notification-item",
-  HuiPersistentNotificationItem
-);

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

@@ -0,0 +1,110 @@
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  property,
+  customElement,
+  css,
+  CSSResult,
+} from "lit-element";
+import "@material/mwc-button";
+import "@polymer/paper-tooltip/paper-tooltip";
+
+import "../../../../components/ha-relative-time";
+import "../../../../components/ha-markdown";
+import "./hui-notification-item-template";
+
+import { HomeAssistant } from "../../../../types";
+import { HassNotification } from "./types";
+
+@customElement("hui-persistent-notification-item")
+export class HuiPersistentNotificationItem extends LitElement {
+  @property() public hass?: HomeAssistant;
+
+  @property() public notification?: HassNotification;
+
+  protected render(): TemplateResult | void {
+    if (!this.hass || !this.notification) {
+      return html``;
+    }
+
+    return html`
+      <hui-notification-item-template>
+        <span slot="header">${this._computeTitle(this.notification)}</span>
+
+        <ha-markdown content="${this.notification.message}"></ha-markdown>
+
+        <div class="time">
+          <span>
+            <ha-relative-time
+              .hass="${this.hass}"
+              .datetime="${this.notification.created_at}"
+            ></ha-relative-time>
+            <paper-tooltip
+              >${this._computeTooltip(
+                this.hass,
+                this.notification
+              )}</paper-tooltip
+            >
+          </span>
+        </div>
+
+        <mwc-button slot="actions" @click="${this._handleDismiss}"
+          >${this.hass.localize(
+            "ui.card.persistent_notification.dismiss"
+          )}</mwc-button
+        >
+      </hui-notification-item-template>
+    `;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      .time {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 6px;
+      }
+      ha-relative-time {
+        color: var(--secondary-text-color);
+      }
+      a {
+        color: var(--primary-color);
+      }
+    `;
+  }
+
+  private _handleDismiss(): void {
+    this.hass!.callService("persistent_notification", "dismiss", {
+      notification_id: this.notification!.notification_id,
+    });
+  }
+
+  private _computeTitle(notification: HassNotification): string | undefined {
+    return notification.title || notification.notification_id;
+  }
+
+  private _computeTooltip(
+    hass: HomeAssistant,
+    notification: HassNotification
+  ): string | undefined {
+    if (!hass || !notification) {
+      return undefined;
+    }
+
+    const d = new Date(notification.created_at!);
+    return d.toLocaleDateString(hass.language, {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      minute: "numeric",
+      hour: "numeric",
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-persistent-notification-item": HuiPersistentNotificationItem;
+  }
+}

src/panels/lovelace/components/notifications/types.ts

@@ -0,0 +1,8 @@
+import { HassEntity } from "home-assistant-js-websocket";
+
+export declare type HassNotification = HassEntity & {
+  notification_id?: string;
+  created_at?: string;
+  title?: string;
+  message?: string;
+};