Convert iframe panel to Lit (#10216)

src/panels/iframe/ha-panel-iframe.js

@@ -1,44 +0,0 @@
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "../../components/ha-menu-button";
-import "../../styles/polymer-ha-style";
-
-class HaPanelIframe extends PolymerElement {
-  static get template() {
-    return html`
-      <style include="ha-style">
-        iframe {
-          border: 0;
-          width: 100%;
-          position: absolute;
-          height: calc(100% - var(--header-height));
-          background-color: var(--primary-background-color);
-        }
-      </style>
-      <app-toolbar>
-        <ha-menu-button hass="[[hass]]" narrow="[[narrow]]"></ha-menu-button>
-        <div main-title>[[panel.title]]</div>
-      </app-toolbar>
-
-      <iframe
-        src="[[panel.config.url]]"
-        sandbox="allow-forms allow-popups allow-pointer-lock allow-same-origin allow-scripts allow-modals allow-download"
-        allowfullscreen="true"
-        webkitallowfullscreen="true"
-        mozallowfullscreen="true"
-      ></iframe>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      narrow: Boolean,
-      panel: Object,
-    };
-  }
-}
-
-customElements.define("ha-panel-iframe", HaPanelIframe);

src/panels/iframe/ha-panel-iframe.ts

@@ -0,0 +1,63 @@
+import { html, css, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../layouts/hass-error-screen";
+import "../../layouts/hass-subpage";
+import { HomeAssistant, PanelInfo } from "../../types";
+
+@customElement("ha-panel-iframe")
+class HaPanelIframe extends LitElement {
+  @property() hass!: HomeAssistant;
+
+  @property({ type: Boolean }) narrow!: boolean;
+
+  @property() panel!: PanelInfo<{ url: string }>;
+
+  render() {
+    if (
+      location.protocol === "https:" &&
+      new URL(this.panel.config.url, location.toString()).protocol !== "https:"
+    ) {
+      return html`
+        <hass-error-screen
+          .hass=${this.hass}
+          .narrow=${this.narrow}
+          error="Unable to load iframes that load websites over http:// if Home Assistant is served over https://."
+          rootnav
+        ></hass-error-screen>
+      `;
+    }
+
+    return html`
+      <hass-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        .header=${this.panel.title}
+        main-page
+      >
+        <iframe
+          src=${this.panel.config.url}
+          sandbox="allow-forms allow-popups allow-pointer-lock allow-same-origin allow-scripts allow-modals allow-download"
+          allowfullscreen="true"
+          webkitallowfullscreen="true"
+          mozallowfullscreen="true"
+        ></iframe>
+      </hass-subpage>
+    `;
+  }
+
+  static styles = css`
+    iframe {
+      border: 0;
+      width: 100%;
+      position: absolute;
+      height: 100%;
+      background-color: var(--primary-background-color);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-panel-iframe": HaPanelIframe;
+  }
+}