Convert hui-call-service-row to TypeScript/LitElement (#1894)

* Convert hui-call-service-row to TypeScript/LitElement

* Update on _config change

* Addressed review comments

* Made `service_data` optional and verified that `callService` does use `entity` if it is available in the passed config.
* Removed check in `entities-card` for `service-data` and will remove the full config check once other PRs have been applied to avoid merge conflicts
* Will create a docs PR to update the docs

* Addressed review comments

* Removed entity config check in entities-card
* Made `icon` optional. Default now `remote`
* Made `action_name` optional. Default now 'Run'

* `.icon`

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

@@ -73,18 +73,6 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
 
   public setConfig(config: Config): void {
     const entities = processConfigEntities(config.entities);
-    for (const entity of entities) {
-      if (
-        entity.type === "call-service" &&
-        (!entity.service ||
-          !entity.name ||
-          !entity.icon ||
-          !entity.service_data ||
-          !entity.action_name)
-      ) {
-        throw new Error("Missing required property when type is call-service");
-      }
-    }
 
     this._config = { theme: "default", ...config };
     this._configEntities = entities;

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

@@ -14,7 +14,7 @@ import "../entity-rows/hui-text-entity-row.js";
 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-call-service-row";
 import "../special-rows/hui-divider-row";
 import "../special-rows/hui-section-row";
 import "../special-rows/hui-weblink-row";

src/panels/lovelace/entity-rows/types.ts

@@ -16,11 +16,19 @@ export interface WeblinkConfig {
   icon?: string;
   url: string;
 }
+export interface CallServiceConfig {
+  name: string;
+  icon?: string;
+  action_name?: string;
+  service: string;
+  service_data?: string;
+}
 export type EntityRowConfig =
   | EntityConfig
   | DividerConfig
   | SectionConfig
-  | WeblinkConfig;
+  | WeblinkConfig
+  | CallServiceConfig;
 
 export interface EntityRow {
   hass?: HomeAssistant;

src/panels/lovelace/special-rows/hui-call-service-row.js

@@ -1,80 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import "@polymer/paper-button/paper-button.js";
-
-import "../../../components/ha-icon.js";
-import callService from "../common/call-service.js";
-
-class HuiCallServiceRow extends PolymerElement {
-  static get template() {
-    return html`
-      ${this.styleTemplate}
-      <ha-icon icon="[[_config.icon]]"></ha-icon>
-      <div class="flex">
-        <div>
-          [[_config.name]]
-        </div>
-        <paper-button on-click="_callService">[[_config.action_name]]</paper-button>
-      </div>
-    `;
-  }
-
-  static get styleTemplate() {
-    return html`
-      <style>
-        :host {
-          display: flex;
-          align-items: center;
-        }
-        ha-icon {
-          padding: 8px;
-          color: var(--paper-item-icon-color);
-        }
-        .flex {
-          flex: 1;
-          overflow: hidden;
-          margin-left: 16px;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-        }
-        .flex div {
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-        paper-button {
-          color: var(--primary-color);
-          font-weight: 500;
-          margin-right: -.57em;
-        }
-      </style>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-    };
-  }
-
-  setConfig(config) {
-    if (
-      !config ||
-      !config.icon ||
-      !config.name ||
-      !config.action_name ||
-      !config.service ||
-      !config.service_data
-    ) {
-      throw new Error("Error in card configuration.");
-    }
-    this._config = config;
-  }
-
-  _callService() {
-    callService(this._config, this.hass);
-  }
-}
-customElements.define("hui-call-service-row", HuiCallServiceRow);

src/panels/lovelace/special-rows/hui-call-service-row.ts

@@ -0,0 +1,93 @@
+import { html, LitElement } from "@polymer/lit-element";
+import "@polymer/paper-button/paper-button.js";
+
+import "../../../components/ha-icon.js";
+
+import callService from "../common/call-service.js";
+import { EntityRow, CallServiceConfig } from "../entity-rows/types.js";
+import { HomeAssistant } from "../../../types.js";
+import { TemplateResult } from "lit-html";
+
+class HuiCallServiceRow extends LitElement implements EntityRow {
+  public hass?: HomeAssistant;
+  private _config?: CallServiceConfig;
+
+  static get properties() {
+    return {
+      hass: {},
+      _config: {},
+    };
+  }
+
+  public setConfig(config: CallServiceConfig): void {
+    if (!config || !config.name || !config.service) {
+      throw new Error("Error in card configuration.");
+    }
+
+    this._config = { icon: "hass:remote", action_name: "Run", ...config };
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <ha-icon .icon="${this._config.icon}"></ha-icon>
+      <div class="flex">
+        <div>
+          ${this._config.name}
+        </div>
+        <paper-button
+          @click="${this._callService}"
+        >${this._config.action_name}</paper-button>
+      </div>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        :host {
+          display: flex;
+          align-items: center;
+        }
+        ha-icon {
+          padding: 8px;
+          color: var(--paper-item-icon-color);
+        }
+        .flex {
+          flex: 1;
+          overflow: hidden;
+          margin-left: 16px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .flex div {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        paper-button {
+          color: var(--primary-color);
+          font-weight: 500;
+          margin-right: -.57em;
+        }
+      </style>
+    `;
+  }
+
+  private _callService() {
+    callService(this._config, this.hass);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-call-service-row": HuiCallServiceRow;
+  }
+}
+
+customElements.define("hui-call-service-row", HuiCallServiceRow);