Add hide background option to iframe card (#27792)

* Add hide background option to iframe card

* Fix

* Add helper

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

@@ -1,5 +1,6 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
@@ -97,7 +98,10 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
       : `${sandbox_user_params} ${IFRAME_SANDBOX}`;
 
     return html`
-      <ha-card .header=${this._config.title}>
+      <ha-card
+        class=${classMap({ "hide-background": this._config.hide_background })}
+        .header=${this._config.title}
+      >
         <div
           id="root"
           style=${styleMap({
@@ -133,6 +137,12 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
       flex-direction: column;
     }
 
+    ha-card.hide-background {
+      background: transparent;
+      box-shadow: none;
+      border: none;
+    }
+
     #root {
       width: 100%;
       height: 100%;

src/panels/lovelace/cards/types.ts

@@ -323,6 +323,7 @@ export interface IframeCardConfig extends LovelaceCardConfig {
   title?: string;
   allow?: string;
   url: string;
+  hide_background?: boolean;
 }
 
 export interface LightCardConfig extends LovelaceCardConfig {

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

@@ -16,6 +16,7 @@ const cardConfigStruct = assign(
     url: optional(string()),
     aspect_ratio: optional(string()),
     allow_open_top_navigation: optional(boolean()),
+    hide_background: optional(boolean()),
   })
 );
 
@@ -29,6 +30,7 @@ const SCHEMA = [
       { name: "aspect_ratio", selector: { text: {} } },
     ],
   },
+  { name: "hide_background", selector: { boolean: {} } },
 ] as const;
 
 @customElement("hui-iframe-card-editor")
@@ -56,6 +58,7 @@ export class HuiIframeCardEditor
         .data=${this._config}
         .schema=${SCHEMA}
         .computeLabel=${this._computeLabelCallback}
+        .computeHelper=${this._computeHelperCallback}
         @value-changed=${this._valueChanged}
       ></ha-form>
     `;
@@ -65,8 +68,29 @@ export class HuiIframeCardEditor
     fireEvent(this, "config-changed", { config: ev.detail.value });
   }
 
-  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) =>
-    this.hass!.localize(`ui.panel.lovelace.editor.card.generic.${schema.name}`);
+  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
+    switch (schema.name) {
+      case "hide_background":
+        return this.hass!.localize(
+          "ui.panel.lovelace.editor.card.iframe.hide_background"
+        );
+      default:
+        return this.hass!.localize(
+          `ui.panel.lovelace.editor.card.generic.${schema.name}`
+        );
+    }
+  };
+
+  private _computeHelperCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
+    switch (schema.name) {
+      case "hide_background":
+        return this.hass!.localize(
+          "ui.panel.lovelace.editor.card.iframe.hide_background_helper"
+        );
+      default:
+        return "";
+    }
+  };
 }
 
 declare global {

src/translations/en.json

@@ -7783,7 +7783,9 @@
             },
             "iframe": {
               "name": "Webpage",
-              "description": "The Webpage card allows you to embed your favorite webpage right into Home Assistant."
+              "description": "The Webpage card allows you to embed your favorite webpage right into Home Assistant.",
+              "hide_background": "Hide background",
+              "hide_background_helper": "Useful for pages which allow a transparent background."
             },
             "light": {
               "name": "Light",