Convert hui-weblink-row to TypeScript/LitElement

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.js";
 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.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);