Convert hui-weblink-row to TypeScript/LitElement (#1898)

* Convert hui-weblink-row to TypeScript/LitElement

* Addressed review comments

* Made name and icon fields optional. Will create a corresponding PR to the docs to update them as Optional
* Updated entities-card to not check weblink config as that is the job of the element (entities-card should be updated to not check service-call config either as that is the job of the row element as well)

* Addressed review comments

That's cool!

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

@@ -69,11 +69,6 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
           !entity.action_name)
       ) {
         throw new Error("Missing required property when type is call-service");
-      } else if (
-        entity.type === "weblink" &&
-        (!entity.name || !entity.icon || !entity.url)
-      ) {
-        throw new Error("Missing required property when type is weblink");
       }
     }
 

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

@@ -17,7 +17,7 @@ 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-weblink-row.js";
+import "../special-rows/hui-weblink-row";
 
 import createErrorCardConfig from "./create-error-card-config.js";
 

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

@@ -12,8 +12,8 @@ export interface SectionConfig {
   label: string;
 }
 export interface WeblinkConfig {
-  name: string;
-  icon: string;
+  name?: string;
+  icon?: string;
   url: string;
 }
 export type EntityRowConfig =

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

@@ -1,55 +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 HuiWeblinkRow extends PolymerElement {
-  static get template() {
-    return html`
-      ${this.styleTemplate}
-      <a href="[[_config.url]]">
-        <ha-icon icon="[[_config.icon]]"></ha-icon>
-        <div>
-          [[_config.name]]
-        </div>
-      </a>
-    `;
-  }
-
-  static get styleTemplate() {
-    return html`
-      <style>
-        a {
-          display: flex;
-          align-items: center;
-          color: var(--primary-color);
-        }
-        ha-icon {
-          padding: 8px;
-          color: var(--paper-item-icon-color);
-        }
-        div {
-          flex: 1;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          margin-left: 16px;
-        }
-      </style>
-    `;
-  }
-
-  static get properties() {
-    return {
-      _config: Object,
-    };
-  }
-
-  setConfig(config) {
-    if (!config || !config.icon || !config.name || !config.url) {
-      throw new Error("Error in card configuration.");
-    }
-    this._config = config;
-  }
-}
-customElements.define("hui-weblink-row", HuiWeblinkRow);

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

@@ -0,0 +1,75 @@
+import { html, LitElement } from "@polymer/lit-element";
+import { EntityRow, WeblinkConfig } from "../entity-rows/types";
+import { HomeAssistant } from "../../../types";
+
+import "../../../components/ha-icon.js";
+
+import { TemplateResult } from "lit-html";
+
+class HuiWeblinkRow extends LitElement implements EntityRow {
+  public hass?: HomeAssistant;
+  private _config?: WeblinkConfig;
+
+  static get properties() {
+    return {
+      _config: {},
+    };
+  }
+
+  public setConfig(config: WeblinkConfig): void {
+    if (!config || !config.url) {
+      throw new Error("Invalid Configuration: 'url' required");
+    }
+
+    this._config = {
+      icon: "hass:link",
+      name: config.url,
+      ...config,
+    };
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <a href="${this._config.url}">
+        <ha-icon .icon="${this._config.icon}"></ha-icon>
+        <div>${this._config.name}</div>
+      </a>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        a {
+          display: flex;
+          align-items: center;
+          color: var(--primary-color);
+        }
+        ha-icon {
+          padding: 8px;
+          color: var(--paper-item-icon-color);
+        }
+        div {
+          flex: 1;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          margin-left: 16px;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-weblink-row": HuiWeblinkRow;
+  }
+}
+
+customElements.define("hui-weblink-row", HuiWeblinkRow);