Convert hui-markdown-card to TypeScript/LitElement (#1808)

* Convert hui-markdown-card to TypeScript/LitElement

* Addressed review comments

* Addressed review comments

* Addressed review comments

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

@@ -1,67 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "../../../components/ha-card.js";
-import "../../../components/ha-markdown.js";
-
-class HuiMarkdownCard extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          @apply --paper-font-body1;
-        }
-        ha-markdown {
-          display: block;
-          padding: 0 16px 16px;
-          -ms-user-select: initial;
-          -webkit-user-select: initial;
-          -moz-user-select: initial;
-        }
-        :host([no-title]) ha-markdown {
-          padding-top: 16px;
-        }
-        ha-markdown > *:first-child {
-          margin-top: 0;
-        }
-        ha-markdown > *:last-child {
-          margin-bottom: 0;
-        }
-        ha-markdown a {
-          color: var(--primary-color);
-        }
-        ha-markdown img {
-          max-width: 100%;
-        }
-      </style>
-      <ha-card header="[[_config.title]]">
-        <ha-markdown content='[[_config.content]]'></ha-markdown>
-      </ha-card>
-    `;
-  }
-
-  static get properties() {
-    return {
-      _config: Object,
-      noTitle: {
-        type: Boolean,
-        reflectToAttribute: true,
-        computed: "_computeNoTitle(_config.title)",
-      },
-    };
-  }
-
-  setConfig(config) {
-    this._config = config;
-  }
-
-  getCardSize() {
-    return this._config.content.split("\n").length;
-  }
-
-  _computeNoTitle(title) {
-    return !title;
-  }
-}
-
-customElements.define("hui-markdown-card", HuiMarkdownCard);

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

@@ -0,0 +1,93 @@
+import { html, LitElement } from "@polymer/lit-element";
+import { classMap } from "lit-html/directives/classMap.js";
+
+import "../../../components/ha-card.js";
+import "../../../components/ha-markdown.js";
+
+import { LovelaceCard, LovelaceConfig } from "../types.js";
+
+interface Config extends LovelaceConfig {
+  content: string;
+  title?: string;
+}
+
+export class HuiMarkdownCard extends LitElement
+  implements LovelaceCard {
+  protected config?: Config;
+
+  static get properties() {
+    return {
+      config: {},
+    };
+  }
+
+  public getCardSize() {
+    return this.config!.content.split("\n").length;
+  }
+
+  public setConfig(config: Config) {
+    if (!config.content) {
+      throw new Error("Invalid Configuration: Content Required");
+    }
+
+    this.config = config;
+  }
+
+  protected render() {
+    if (!this.config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <ha-card .header="${this.config.title}">
+        <ha-markdown
+          class="markdown ${classMap({
+            "no-header": !this.config.title,
+          })}"
+          .content="${this.config.content}"
+        ></ha-markdown>
+      </ha-card>
+    `;
+  }
+
+  private renderStyle() {
+    return html`
+      <style>
+        :host {
+          @apply --paper-font-body1;
+        }
+        ha-markdown {
+          display: block;
+          padding: 0 16px 16px;
+          -ms-user-select: initial;
+          -webkit-user-select: initial;
+          -moz-user-select: initial;
+        }
+        .markdown.no-header {
+          padding-top: 16px;
+        }
+        ha-markdown > *:first-child {
+          margin-top: 0;
+        }
+        ha-markdown > *:last-child {
+          margin-bottom: 0;
+        }
+        ha-markdown a {
+          color: var(--primary-color);
+        }
+        ha-markdown img {
+          max-width: 100%;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-markdown-card": HuiMarkdownCard;
+  }
+}
+
+customElements.define("hui-markdown-card", HuiMarkdownCard);

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

@@ -11,7 +11,7 @@ import "../cards/hui-history-graph-card.js";
 import "../cards/hui-horizontal-stack-card.js";
 import "../cards/hui-iframe-card.ts";
 import "../cards/hui-map-card.js";
-import "../cards/hui-markdown-card.js";
+import "../cards/hui-markdown-card.ts";
 import "../cards/hui-media-control-card.js";
 import "../cards/hui-picture-card.js";
 import "../cards/hui-picture-elements-card";