Convert hui-divider-row to TypeScript/LitElement (#1896)

* Convert hui-divider-row to TypeScript/LitElement

* Add return types

* Fixed style issues

* Address review comments

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

@@ -15,7 +15,7 @@ import "../entity-rows/hui-timer-entity-row.js";
 import "../entity-rows/hui-toggle-entity-row.js";
 
 import "../special-rows/hui-call-service-row.js";
-import "../special-rows/hui-divider-row.js";
+import "../special-rows/hui-divider-row";
 import "../special-rows/hui-section-row.js";
 import "../special-rows/hui-weblink-row.js";
 

src/panels/lovelace/special-rows/hui-divider-row.js

@@ -1,43 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-class HuiDividerRow extends PolymerElement {
-  static get template() {
-    return html``;
-  }
-
-  setConfig(config) {
-    if (!config) {
-      throw new Error("Error in card configuration.");
-    }
-    this._config = config;
-    this._createDivider();
-  }
-
-  ready() {
-    super.ready();
-    this._createDivider();
-  }
-
-  _createDivider() {
-    const root = this.shadowRoot;
-    if (root === null) return;
-
-    while (root.lastChild) {
-      root.removeChild(root.lastChild);
-    }
-
-    const style = this._config.style || {
-      height: "1px",
-      "background-color": "var(--secondary-text-color)",
-    };
-
-    const el = document.createElement("div");
-    Object.keys(style).forEach((prop) => {
-      el.style.setProperty(prop, style[prop]);
-    });
-
-    root.appendChild(el);
-  }
-}
-customElements.define("hui-divider-row", HuiDividerRow);

src/panels/lovelace/special-rows/hui-divider-row.ts

@@ -0,0 +1,53 @@
+import { html, LitElement } from "@polymer/lit-element";
+import { EntityRow, DividerConfig } from "../entity-rows/types";
+import { HomeAssistant } from "../../../types";
+import { TemplateResult } from "lit-html";
+
+class HuiDividerRow extends LitElement implements EntityRow {
+  public hass?: HomeAssistant;
+  private _config?: DividerConfig;
+
+  static get properties() {
+    return {
+      _config: {},
+    };
+  }
+
+  public setConfig(config): void {
+    if (!config) {
+      throw new Error("Error in card configuration.");
+    }
+
+    this._config = {
+      style: {
+        height: "1px",
+        "background-color": "var(--secondary-text-color)",
+      },
+      ...config,
+    };
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    const el = document.createElement("div");
+
+    Object.keys(this._config.style).forEach((prop) => {
+      el.style.setProperty(prop, this._config!.style[prop]);
+    });
+
+    return html`
+      ${el}
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-divider-row": HuiDividerRow;
+  }
+}
+
+customElements.define("hui-divider-row", HuiDividerRow);