Convert hui-unused-entities to TypeScript/LitElement

src/panels/lovelace/hui-root.js

@@ -318,7 +318,7 @@ class HUIRoot extends NavigateMixin(EventsMixin(PolymerElement)) {
 
     if (viewIndex === "unused") {
       view = document.createElement("hui-unused-entities");
-      view.config = this.config;
+      view.setConfig(this.config);
     } else {
       const viewConfig = this.config.views[this._curView];
       if (viewConfig.panel) {

src/panels/lovelace/hui-unused-entities.ts

@@ -0,0 +1,87 @@
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+
+import "./cards/hui-entities-card";
+
+import computeUnusedEntities from "./common/compute-unused-entities";
+import createCardElement from "./common/create-card-element";
+import { HomeAssistant } from "../../types";
+import { TemplateResult } from "lit-html";
+import { LovelaceCard } from "./types";
+
+export class HuiUnusedEntities extends LitElement {
+  private _hass?: HomeAssistant;
+  private _config?: object;
+  private _element?: LovelaceCard;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      _hass: {},
+      _config: {},
+    };
+  }
+
+  set hass(hass: HomeAssistant) {
+    this._hass = hass;
+    if (!this._element) {
+      this._createElement();
+      return;
+    }
+    this._element.hass = this._hass;
+  }
+
+  public setConfig(config: object): void {
+    if (!config) {
+      throw new Error("Card config incorrect");
+    }
+    this._config = config;
+    this._createElement();
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config || !this._hass) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <div id="root">${this._element}</div>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        #root {
+          max-width: 600px;
+          margin: 0 auto;
+          padding: 8px 0;
+        }
+      </style>
+    `;
+  }
+
+  private _createElement(): void {
+    if (this._hass) {
+      const entities = computeUnusedEntities(this._hass, this._config).map(
+        (entity) => ({
+          entity,
+          secondary_info: "entity-id",
+        })
+      );
+      this._element = createCardElement({
+        type: "entities",
+        title: "Unused entities",
+        entities,
+        show_header_toggle: false,
+      });
+      this._element!.hass = this._hass;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-unused-entities": HuiUnusedEntities;
+  }
+}
+customElements.define("hui-unused-entities", HuiUnusedEntities);