From 7b821aa363f7e06c5fb6529448b842b1285dc3ef Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Thu, 28 Mar 2019 00:05:07 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=95=B6=20convert=20hui-notification-item-?=
 =?UTF-8?q?template=20to=20TypeScript/LitElement=20(#3029)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🕶 convert hui-notification-item-template to TypeScript/LitElement

* address review comments
---
 .../hui-notification-item-template.js         | 43 -------------
 .../hui-notification-item-template.ts         | 61 +++++++++++++++++++
 2 files changed, 61 insertions(+), 43 deletions(-)
 delete mode 100644 src/panels/lovelace/components/notifications/hui-notification-item-template.js
 create mode 100644 src/panels/lovelace/components/notifications/hui-notification-item-template.ts

diff --git a/src/panels/lovelace/components/notifications/hui-notification-item-template.js b/src/panels/lovelace/components/notifications/hui-notification-item-template.js
deleted file mode 100644
index a7b091849a..0000000000
--- a/src/panels/lovelace/components/notifications/hui-notification-item-template.js
+++ /dev/null
@@ -1,43 +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 "../../../../components/ha-card";
-
-export class HuiNotificationItemTemplate extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        .contents {
-          padding: 16px;
-        }
-
-        ha-card .header {
-          @apply --paper-font-headline;
-          color: var(--primary-text-color);
-          padding: 16px 16px 0;
-        }
-
-        .actions {
-          border-top: 1px solid #e8e8e8;
-          padding: 5px 16px;
-        }
-
-        ::slotted(.primary) {
-          color: var(--primary-color);
-        }
-      </style>
-      <ha-card>
-        <div class="header"><slot name="header"></slot></div>
-        <div class="contents"><slot></slot></div>
-        <div class="actions"><slot name="actions"></slot></div>
-      </ha-card>
-    `;
-  }
-}
-customElements.define(
-  "hui-notification-item-template",
-  HuiNotificationItemTemplate
-);
diff --git a/src/panels/lovelace/components/notifications/hui-notification-item-template.ts b/src/panels/lovelace/components/notifications/hui-notification-item-template.ts
new file mode 100644
index 0000000000..5aa26648b7
--- /dev/null
+++ b/src/panels/lovelace/components/notifications/hui-notification-item-template.ts
@@ -0,0 +1,61 @@
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  customElement,
+  css,
+  CSSResult,
+} from "lit-element";
+
+import "../../../../components/ha-card";
+
+@customElement("hui-notification-item-template")
+export class HuiNotificationItemTemplate extends LitElement {
+  protected render(): TemplateResult | void {
+    return html`
+      <ha-card>
+        <div class="header"><slot name="header"></slot></div>
+        <div class="contents"><slot></slot></div>
+        <div class="actions"><slot name="actions"></slot></div>
+      </ha-card>
+    `;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      .contents {
+        padding: 16px;
+      }
+
+      ha-card .header {
+        /* start paper-font-headline style */
+        font-family: "Roboto", "Noto", sans-serif;
+        -webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */
+        text-rendering: optimizeLegibility;
+        font-size: 24px;
+        font-weight: 400;
+        letter-spacing: -0.012em;
+        line-height: 32px;
+        /* end paper-font-headline style */
+
+        color: var(--primary-text-color);
+        padding: 16px 16px 0;
+      }
+
+      .actions {
+        border-top: 1px solid #e8e8e8;
+        padding: 5px 16px;
+      }
+
+      ::slotted(.primary) {
+        color: var(--primary-color);
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-notification-item-template": HuiNotificationItemTemplate;
+  }
+}