Add iframe panel mode and align aspect ratio option with map card (#5289)

* Add iframe panel mode and align aspect ratio option with map card

* lint

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

@@ -13,6 +13,7 @@ import "../../../components/ha-card";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { styleMap } from "lit-html/directives/style-map";
 import { IframeCardConfig } from "./types";
+import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
 
 @customElement("hui-iframe-card")
 export class HuiIframeCard extends LitElement implements LovelaceCard {
@@ -29,7 +30,8 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
       aspect_ratio: "50%",
     };
   }
-
+  @property({ type: Boolean, reflect: true })
+  public isPanel = false;
   @property() protected _config?: IframeCardConfig;
 
   public getCardSize(): number {
@@ -55,14 +57,22 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
       return html``;
     }
 
-    const aspectRatio = this._config.aspect_ratio || "50%";
+    let padding = "";
+    if (!this.isPanel && this._config.aspect_ratio) {
+      const ratio = parseAspectRatio(this._config.aspect_ratio);
+      if (ratio && ratio.w > 0 && ratio.h > 0) {
+        padding = `${((100 * ratio.h) / ratio.w).toFixed(2)}%`;
+      }
+    } else if (!this.isPanel) {
+      padding = "50%";
+    }
 
     return html`
       <ha-card .header="${this._config.title}">
         <div
           id="root"
           style="${styleMap({
-            "padding-top": aspectRatio,
+            "padding-top": padding,
           })}"
         >
           <iframe src="${this._config.url}"></iframe>
@@ -73,6 +83,11 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
 
   static get styles(): CSSResult {
     return css`
+      :host([ispanel]) ha-card {
+        width: 100%;
+        height: 100%;
+      }
+
       ha-card {
         overflow: hidden;
       }
@@ -82,6 +97,10 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
         position: relative;
       }
 
+      :host([ispanel]) #root {
+        height: 100%;
+      }
+
       iframe {
         position: absolute;
         border: none;

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

@@ -456,15 +456,8 @@ class HuiMapCard extends LitElement implements LovelaceCard {
   static get styles(): CSSResult {
     return css`
       :host([ispanel]) ha-card {
-        left: 0;
-        top: 0;
         width: 100%;
-        /**
-       * In panel mode we want a full height map. Since parent #view
-       * only sets min-height, we need absolute positioning here
-       */
         height: 100%;
-        position: absolute;
       }
 
       ha-card {

src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts

@@ -81,11 +81,10 @@ export class HuiIframeCardEditor extends LitElement
             )} (${this.hass.localize(
               "ui.panel.lovelace.editor.card.config.optional"
             )})"
-            .value="${this._aspect_ratio.replace("%", "")}"
+            .value="${this._aspect_ratio}"
             .configValue="${"aspect_ratio"}"
             @value-changed="${this._valueChanged}"
-            ><div slot="suffix">%</div></paper-input
+          ></paper-input>
-          >
         </div>
       </div>
     `;
@@ -96,17 +95,13 @@ export class HuiIframeCardEditor extends LitElement
       return;
     }
     const target = ev.target! as EditorTarget;
-    let value = target.value;
+    const value = target.value;
-
-    if (target.configValue! === "aspect_ratio" && target.value) {
-      value += "%";
-    }
 
     if (this[`_${target.configValue}`] === value) {
       return;
     }
     if (target.configValue) {
-      if (target.value === "") {
+      if (value === "") {
         delete this._config[target.configValue!];
       } else {
         this._config = { ...this._config, [target.configValue!]: value };