diff --git a/src/panels/lovelace/cards/hui-spacing-card.ts b/src/panels/lovelace/cards/hui-spacing-card.ts index c544d0cc96..2a81327d3d 100644 --- a/src/panels/lovelace/cards/hui-spacing-card.ts +++ b/src/panels/lovelace/cards/hui-spacing-card.ts @@ -1,32 +1,64 @@ -import type { PropertyValues } from "lit"; -import { LitElement, html } from "lit"; -import { customElement } from "lit/decorators"; +import { mdiDotsHorizontal } from "@mdi/js"; +import { LitElement, html, css, nothing } from "lit"; +import { customElement, property } from "lit/decorators"; import "../../../components/ha-card"; -import { hasConfigOrEntityChanged } from "../common/has-changed"; -import type { LovelaceCard, LovelaceCardEditor } from "../types"; +import "../../../components/ha-svg-icon"; +import type { + LovelaceCard, + LovelaceCardEditor, + LovelaceLayoutOptions, +} from "../types"; @customElement("hui-spacing-card") export class HuiSpacingCard extends LitElement implements LovelaceCard { + @property({ type: Boolean }) public preview = false; + public static async getConfigElement(): Promise { await import("../editor/config-elements/hui-spacing-card-editor"); return document.createElement("hui-spacing-card-editor"); } - protected shouldUpdate(changedProps: PropertyValues): boolean { - return hasConfigOrEntityChanged(this, changedProps); - } - public getCardSize(): number { return 1; } + public getLayoutOptions(): LovelaceLayoutOptions { + return { + grid_columns: 1, + grid_rows: 1, + }; + } + public setConfig(): void { // No config necessary } protected render() { - return html``; + if (!this.preview) { + return nothing; + } + + return html` + + `; } + + static styles = css` + :host { + display: block; + height: 100%; + } + + ha-card { + background: none; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + --mdc-icon-size: 40px; + --icon-primary-color: var(--divider-color); + } + `; } declare global {