Convert notification-button to Lit/TS and add badge

package.json

@@ -37,6 +37,8 @@
     "@polymer/iron-pages": "^3.0.1",
     "@polymer/iron-resizable-behavior": "^3.0.1",
     "@polymer/neon-animation": "^3.0.1",
+    "@polymer/paper-badge": "^3.0.1",
+    "@polymer/paper-button": "^3.0.1",
     "@polymer/paper-card": "^3.0.1",
     "@polymer/paper-checkbox": "^3.0.1",
     "@polymer/paper-dialog": "^3.0.1",

src/panels/lovelace/components/notifications/hui-notifications-button.js

@@ -1,68 +0,0 @@
-import "@material/mwc-button";
-import "@polymer/paper-icon-button/paper-icon-button";
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import EventsMixin from "../../../../mixins/events-mixin";
-
-/*
- * @appliesMixin EventsMixin
- */
-export class HuiNotificationsButton extends EventsMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          position: relative;
-        }
-
-        .indicator {
-          position: absolute;
-          top: 10px;
-          right: 10px;
-          width: 10px;
-          height: 10px;
-          border-radius: 50%;
-          background: var(--accent-color);
-          pointer-events: none;
-        }
-
-        .indicator[hidden] {
-          display: none;
-        }
-      </style>
-      <paper-icon-button
-        icon="hass:bell"
-        on-click="_clicked"
-      ></paper-icon-button>
-      <span
-        class="indicator"
-        hidden$="[[!_hasNotifications(notifications)]]"
-      ></span>
-    `;
-  }
-
-  static get properties() {
-    return {
-      open: {
-        type: Boolean,
-        notify: true,
-      },
-      notifications: {
-        type: Array,
-        value: [],
-      },
-    };
-  }
-
-  _clicked() {
-    this.open = true;
-  }
-
-  _hasNotifications(notifications) {
-    return notifications.length > 0;
-  }
-}
-customElements.define("hui-notifications-button", HuiNotificationsButton);

src/panels/lovelace/components/notifications/hui-notifications-button.ts

@@ -0,0 +1,57 @@
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  css,
+  CSSResult,
+  property,
+} from "lit-element";
+import "@polymer/paper-badge/paper-badge";
+import "@polymer/paper-icon-button/paper-icon-button";
+import { fireEvent } from "../../../../common/dom/fire_event";
+
+class HuiNotificationsButton extends LitElement {
+  @property() public notifications?: string[];
+  @property() public open?: boolean;
+
+  protected render(): TemplateResult | void {
+    return html`
+      <paper-icon-button
+        icon="hass:bell"
+        @click="${this._clicked}"
+      ></paper-icon-button>
+      ${this.notifications
+        ? html`
+            <paper-badge label="${this.notifications.length}"></paper-badge>
+          `
+        : ""}
+    `;
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      css`
+        :host {
+          position: relative;
+        }
+        paper-badge {
+          left: 23px !important;
+          top: 0px !important;
+        }
+      `,
+    ];
+  }
+
+  private _clicked() {
+    this.open = true;
+    fireEvent(this, "open-changed");
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-notifications-button": HuiNotificationsButton;
+  }
+}
+
+customElements.define("hui-notifications-button", HuiNotificationsButton);

src/panels/lovelace/hui-root.ts

@@ -57,6 +57,13 @@ const JS_CACHE = {};
 
 let loadedUnusedEntities = false;
 
+declare global {
+  // tslint:disable-next-line
+  interface HASSDomEvents {
+    "open-changed": {};
+  }
+}
+
 class HUIRoot extends LitElement {
   public narrow?: boolean;
   public showMenu?: boolean;

yarn.lock

@@ -1148,6 +1148,17 @@
     "@polymer/iron-selector" "^3.0.0-pre.26"
     "@polymer/polymer" "^3.0.0"
 
+"@polymer/paper-badge@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@polymer/paper-badge/-/paper-badge-3.0.1.tgz#ea973090342c66f99ea6ef1d32fc534ee40630e8"
+  integrity sha512-9lHB/AFPuDAY/+OPNio1Mi6JUAM8yQqzJEAkk99IwcCl9VB6uCjlrXVfistrYIv7z+Wy4SZHNEtA6xR1+FhCDg==
+  dependencies:
+    "@polymer/iron-flex-layout" "^3.0.0-pre.26"
+    "@polymer/iron-icon" "^3.0.0-pre.26"
+    "@polymer/iron-resizable-behavior" "^3.0.0-pre.26"
+    "@polymer/paper-styles" "^3.0.0-pre.26"
+    "@polymer/polymer" "^3.0.0"
+
 "@polymer/paper-behaviors@^3.0.0-pre.27":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@polymer/paper-behaviors/-/paper-behaviors-3.0.1.tgz#83f1cd06489f484c1b108a2967fb01952df722ad"