Convert notification-button to Lit/TS and add badge (#2732)

* Convert notification-button to Lit/TS and add badge

* review comments

* address review comments

* css is dumb

* Update package.json

* address review comments

* lint

* address review comments

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,80 @@
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  css,
+  CSSResult,
+  property,
+} from "lit-element";
+import "@polymer/paper-icon-button/paper-icon-button";
+import { fireEvent } from "../../../../common/dom/fire_event";
+
+declare global {
+  // tslint:disable-next-line
+  interface HASSDomEvents {
+    "opened-changed": { value: boolean };
+  }
+}
+
+class HuiNotificationsButton extends LitElement {
+  @property() public notifications?: string[];
+  @property() public opened?: boolean;
+
+  protected render(): TemplateResult | void {
+    return html`
+      <paper-icon-button
+        icon="hass:bell"
+        @click="${this._clicked}"
+      ></paper-icon-button>
+      ${this.notifications && this.notifications.length > 0
+        ? html`
+            <span class="indicator">
+              <div>${this.notifications.length}</div>
+            </span>
+          `
+        : ""}
+    `;
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      css`
+        :host {
+          position: relative;
+        }
+
+        .indicator {
+          position: absolute;
+          top: 0px;
+          right: -3px;
+          width: 20px;
+          height: 20px;
+          border-radius: 50%;
+          background: var(--accent-color);
+          pointer-events: none;
+          z-index: 1;
+        }
+
+        .indicator > div {
+          right: 7px;
+          top: 3px;
+          position: absolute;
+          font-size: 0.55em;
+        }
+      `,
+    ];
+  }
+
+  private _clicked() {
+    this.opened = true;
+    fireEvent(this, "opened-changed", { value: this.opened });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-notifications-button": HuiNotificationsButton;
+  }
+}
+
+customElements.define("hui-notifications-button", HuiNotificationsButton);

src/panels/lovelace/hui-root.ts

@@ -186,8 +186,8 @@ class HUIRoot extends LitElement {
                   <div main-title>${this.config.title || "Home Assistant"}</div>
                   <hui-notifications-button
                     .hass="${this.hass}"
-                    .open="${this._notificationsOpen}"
-                    @open-changed="${this._handleNotificationsOpenChanged}"
+                    .opened="${this._notificationsOpen}"
+                    @opened-changed="${this._handleNotificationsOpenChanged}"
                     .notifications="${this._notifications}"
                   ></hui-notifications-button>
                   <ha-start-voice-button