Convert hui-iframe-card to LitElement/TypeScript (#1801)

* Convert hui-iframe-card to LitElement/TypeScript

* style cleanup

* Address review comments

* Addressed review comments

src/panels/lovelace/cards/hui-iframe-card.js

@@ -1,58 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-class HuiIframeCard extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        ha-card {
-          overflow: hidden;
-        }
-        #root {
-          width: 100%;
-          position: relative;
-        }
-        iframe {
-          border: none;
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-        }
-      </style>
-      <ha-card header="[[_config.title]]">
-        <div id="root">
-          <iframe src="[[_config.url]]"></iframe>
-        </div>
-      </ha-card>
-    `;
-  }
-
-  static get properties() {
-    return {
-      _config: Object,
-    };
-  }
-
-  ready() {
-    super.ready();
-    if (this._config) this._buildConfig();
-  }
-
-  setConfig(config) {
-    this._config = config;
-    if (this.$) this._buildConfig();
-  }
-
-  _buildConfig() {
-    const config = this._config;
-
-    this.$.root.style.paddingTop = config.aspect_ratio || "50%";
-  }
-
-  getCardSize() {
-    return 1 + this.offsetHeight / 50;
-  }
-}
-customElements.define("hui-iframe-card", HuiIframeCard);

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

@@ -0,0 +1,81 @@
+import { html, LitElement } from "@polymer/lit-element";
+
+import "../../../components/ha-card.js";
+
+import { HassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
+import { LovelaceCard, LovelaceConfig } from "../types.js";
+
+interface Config extends LovelaceConfig {
+  aspect_ratio?: string;
+  title?: string;
+  url: string;
+}
+
+export class HuiIframeCard extends HassLocalizeLitMixin(LitElement)
+  implements LovelaceCard {
+  protected config?: Config;
+
+  static get properties() {
+    return {
+      config: {},
+    };
+  }
+
+  public getCardSize() {
+    return 1 + this.offsetHeight / 50;
+  }
+
+  public setConfig(config: Config) {
+    if (!config.url) {
+      throw new Error("URL required");
+    }
+
+    this.config = config;
+  }
+
+  protected render() {
+    if (!this.config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <ha-card .header="${this.config.title}">
+        <div id="root">
+          <iframe src="${this.config.url}"></iframe>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private renderStyle() {
+    return html`
+      <style>
+        ha-card {
+          overflow: hidden;
+        }
+        #root {
+          width: 100%;
+          position: relative;
+          padding-top: ${this.config!.aspect_ratio || "50%"};
+        }
+        iframe {
+          position: absolute;
+          border: none;
+          width: 100%;
+          height: 100%;
+          top: 0;
+          left: 0;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-iframe-card": HuiIframeCard;
+  }
+}
+
+customElements.define("hui-iframe-card", HuiIframeCard);

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

@@ -9,7 +9,7 @@ import "../cards/hui-error-card.js";
 import "../cards/hui-glance-card.ts";
 import "../cards/hui-history-graph-card.js";
 import "../cards/hui-horizontal-stack-card.js";
-import "../cards/hui-iframe-card.js";
+import "../cards/hui-iframe-card.ts";
 import "../cards/hui-map-card.js";
 import "../cards/hui-markdown-card.js";
 import "../cards/hui-media-control-card.js";