Convert hui-service-button-element to TypeScript/LitElement (#1888)

* Convert hui-service-button-element to TypeScript/LitElement

Will need to rebase once hui-icon-element PR is merged

* Added return types

* Convert ha-call-service-button attributes to properties

* Re-order imports

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

@@ -1,6 +1,6 @@
 import "../elements/hui-icon-element";
 import "../elements/hui-image-element.js";
-import "../elements/hui-service-button-element.js";
+import "../elements/hui-service-button-element";
 import "../elements/hui-state-badge-element.js";
 import "../elements/hui-state-icon-element.js";
 import "../elements/hui-state-label-element";

src/panels/lovelace/elements/hui-service-button-element.js

@@ -1,46 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "../../../components/buttons/ha-call-service-button.js";
-
-class HuiServiceButtonElement extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        ha-call-service-button {
-          color: var(--primary-color);
-          white-space: nowrap;
-        }
-      </style>
-      <ha-call-service-button
-        hass="[[hass]]"
-        domain="[[_domain]]"
-        service="[[_service]]"
-        service-data="[[_config.service_data]]"
-      >[[_config.title]]</ha-call-service-button>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _domain: String,
-      _service: String,
-    };
-  }
-
-  setConfig(config) {
-    if (!config || !config.service) {
-      throw Error("Error in element configuration");
-    }
-
-    const [domain, service] = config.service.split(".", 2);
-    this.setProperties({
-      _config: config,
-      _domain: domain,
-      _service: service,
-    });
-  }
-}
-customElements.define("hui-service-button-element", HuiServiceButtonElement);

src/panels/lovelace/elements/hui-service-button-element.ts

@@ -0,0 +1,74 @@
+import { html, LitElement } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+
+import "../../../components/buttons/ha-call-service-button.js";
+
+import { LovelaceElement, LovelaceElementConfig } from "./types.js";
+import { HomeAssistant } from "../../../types.js";
+
+export class HuiServiceButtonElement extends LitElement
+  implements LovelaceElement {
+  public hass?: HomeAssistant;
+  private _config?: LovelaceElementConfig;
+  private _domain?: string;
+  private _service?: string;
+
+  static get properties() {
+    return { _config: {} };
+  }
+
+  public setConfig(config: LovelaceElementConfig): void {
+    if (!config || !config.service) {
+      throw Error("Invalid Configuration: 'service' required");
+    }
+
+    [this._domain, this._service] = config.service.split(".", 2);
+
+    if (!this._domain) {
+      throw Error("Invalid Configuration: 'service' does not have a domain");
+    }
+
+    if (!this._service) {
+      throw Error(
+        "Invalid Configuration: 'service' does not have a service name"
+      );
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <ha-call-service-button
+        .hass="${this.hass}"
+        .domain="${this._domain}"
+        .service="${this._service}"
+        .service-data="${this._config.service_data}"
+      >${this._config.title}</ha-call-service-button>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        ha-call-service-button {
+          color: var(--primary-color);
+          white-space: nowrap;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-service-button-element": HuiServiceButtonElement;
+  }
+}
+
+customElements.define("hui-service-button-element", HuiServiceButtonElement);