From 5e61065b6455e94fe499001982d5da6d4bc046b4 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Thu, 25 Oct 2018 02:28:15 -0500
Subject: [PATCH] Convert hui-error-card to TypeScript/LitElement (#1852)

---
 src/panels/lovelace/cards/hui-error-card.js   | 40 ------------
 src/panels/lovelace/cards/hui-error-card.ts   | 65 +++++++++++++++++++
 .../lovelace/common/create-card-element.js    |  2 +-
 3 files changed, 66 insertions(+), 41 deletions(-)
 delete mode 100644 src/panels/lovelace/cards/hui-error-card.js
 create mode 100644 src/panels/lovelace/cards/hui-error-card.ts

diff --git a/src/panels/lovelace/cards/hui-error-card.js b/src/panels/lovelace/cards/hui-error-card.js
deleted file mode 100644
index 0b846f4b0a..0000000000
--- a/src/panels/lovelace/cards/hui-error-card.js
+++ /dev/null
@@ -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);
diff --git a/src/panels/lovelace/cards/hui-error-card.ts b/src/panels/lovelace/cards/hui-error-card.ts
new file mode 100644
index 0000000000..758fa43459
--- /dev/null
+++ b/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);
diff --git a/src/panels/lovelace/common/create-card-element.js b/src/panels/lovelace/common/create-card-element.js
index c7d1a876ee..cfdb50055b 100644
--- a/src/panels/lovelace/common/create-card-element.js
+++ b/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";