Convert hui-section-row to TypeScript/LitElement (#1897)

* Convert hui-section-row to TypeScript/LitElement

* Address review comments

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

@@ -16,9 +16,10 @@ import "../entity-rows/hui-toggle-entity-row.js";
 
 import "../special-rows/hui-call-service-row.js";
 import "../special-rows/hui-divider-row";
-import "../special-rows/hui-section-row.js";
+import "../special-rows/hui-section-row";
 import "../special-rows/hui-weblink-row";
 
+
 import createErrorCardConfig from "./create-error-card-config.js";
 
 const CUSTOM_TYPE_PREFIX = "custom:";

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

@@ -1,53 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "../../../components/ha-icon.js";
-
-class HuiSectionRow extends PolymerElement {
-  static get template() {
-    return html`
-      ${this.styleTemplate}
-      <div class=divider></div>
-      <template is="dom-if" if="[[_config.label]]">
-        <div class=label>
-          [[_config.label]]
-        </div>
-      </template>
-    `;
-  }
-
-  static get styleTemplate() {
-    return html`
-      <style>
-        .label {
-          color: var(--primary-color);
-          margin-left: 8px;
-          margin-bottom: 16px;
-          margin-top: 16px;
-        }
-        .divider {
-          height: 1px;
-          background-color: var(--secondary-text-color);
-          opacity: 0.25;
-          margin-left: -16px;
-          margin-right: -16px;
-          margin-top: 8px;
-        }
-      </style>
-    `;
-  }
-
-  static get properties() {
-    return {
-      _config: Object,
-    };
-  }
-
-  setConfig(config) {
-    if (!config) {
-      throw new Error("Error in card configuration.");
-    }
-    this._config = config;
-  }
-}
-customElements.define("hui-section-row", HuiSectionRow);

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

@@ -0,0 +1,70 @@
+import { html, LitElement } from "@polymer/lit-element";
+import { EntityRow, SectionConfig } from "../entity-rows/types";
+import { HomeAssistant } from "../../../types";
+
+import "../../../components/ha-icon.js";
+import { TemplateResult } from "lit-html";
+
+class HuiSectionRow extends LitElement implements EntityRow {
+  public hass?: HomeAssistant;
+  private _config?: SectionConfig;
+
+  static get properties() {
+    return {
+      _config: {},
+    };
+  }
+
+  public setConfig(config: SectionConfig): void {
+    if (!config) {
+      throw new Error("Error in card configuration.");
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <div class=divider></div>
+      ${
+        this._config.label
+          ? html`<div class="label">${this._config.label}</div>`
+          : html``
+      }
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        .label {
+          color: var(--primary-color);
+          margin-left: 8px;
+          margin-bottom: 16px;
+          margin-top: 16px;
+        }
+        .divider {
+          height: 1px;
+          background-color: var(--secondary-text-color);
+          opacity: 0.25;
+          margin-left: -16px;
+          margin-right: -16px;
+          margin-top: 8px;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-section-row": HuiSectionRow;
+  }
+}
+
+customElements.define("hui-section-row", HuiSectionRow);