Convert hui-error-card to TypeScript/LitElement (#1852)

src/panels/lovelace/cards/hui-error-card.js

@@ -1,40 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-class HuiErrorCard extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: block;
-          background-color: #ef5350;
-          color: white;
-          padding: 8px;
-          font-weight: 500;
-        }
-      </style>
-      [[_config.error]]
-      <pre>[[_toStr(_config.origConfig)]]</pre>
-    `;
-  }
-
-  static get properties() {
-    return {
-      _config: Object,
-    };
-  }
-
-  setConfig(config) {
-    this._config = config;
-  }
-
-  getCardSize() {
-    return 4;
-  }
-
-  _toStr(obj) {
-    return JSON.stringify(obj, null, 2);
-  }
-}
-
-customElements.define("hui-error-card", HuiErrorCard);

src/panels/lovelace/cards/hui-error-card.ts

@@ -0,0 +1,65 @@
+import { html, LitElement } from "@polymer/lit-element";
+
+import { LovelaceCard, LovelaceConfig } from "../types";
+import { TemplateResult } from "lit-html";
+
+interface Config extends LovelaceConfig {
+  error: string;
+  origConfig: LovelaceConfig;
+}
+
+class HuiErrorCard extends LitElement implements LovelaceCard {
+  protected config?: Config;
+
+  static get properties() {
+    return {
+      config: {},
+    };
+  }
+
+  public getCardSize(): number {
+    return 4;
+  }
+
+  public setConfig(config): void {
+    this.config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this.config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      ${this.config.error}
+      <pre>${this._toStr(this.config.origConfig)}</pre>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        :host {
+          display: block;
+          background-color: #ef5350;
+          color: white;
+          padding: 8px;
+          font-weight: 500;
+        }
+      </style>
+    `;
+  }
+
+  private _toStr(config: LovelaceConfig): string {
+    return JSON.stringify(config, null, 2);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-error-card": HuiErrorCard;
+  }
+}
+
+customElements.define("hui-error-card", HuiErrorCard);

src/panels/lovelace/common/create-card-element.js

@@ -5,7 +5,7 @@ import "../cards/hui-conditional-card.ts";
 import "../cards/hui-entities-card.ts";
 import "../cards/hui-entity-button-card.ts";
 import "../cards/hui-entity-filter-card.js";
-import "../cards/hui-error-card.js";
+import "../cards/hui-error-card.ts";
 import "../cards/hui-glance-card.ts";
 import "../cards/hui-history-graph-card.js";
 import "../cards/hui-horizontal-stack-card.js";