import { LitElement, html, css } from "lit"; import { property, query, state } from "lit/decorators.js"; import { loadHaForm } from "../helpers"; const configSchema = [ { name: "entity", label: "Entity", selector: { entity: {} }, }, { name: "title", label: "Title", selector: { text: {} }, }, { name: "size", selector: { select: { mode: "dropdown", options: ["normal", "wide", "fullscreen"] }, }, }, { type: "grid", schema: [ { name: "right_button", label: "Right button", selector: { text: {} }, }, { name: "left_button", label: "Left button", selector: { text: {} }, }, ], }, { type: "grid", schema: [ { name: "right_button_action", label: "Right button action", selector: { object: {} }, }, { name: "left_button_action", label: "Left button action", selector: { object: {} }, }, ], }, { type: "grid", schema: [ { name: "dismissable", label: "User dismissable", selector: { boolean: {} }, }, { name: "timeout", label: "Auto close timeout (ms)", selector: { number: { mode: "box" } }, }, ], }, { type: "grid", schema: [ { name: "dismiss_action", label: "Dismiss action", selector: { object: {} }, }, { name: "timeout_action", label: "Timeout action", selector: { object: {} }, }, ], }, ]; class PopupCardEditor extends LitElement { @state() _config; @property() lovelace; @property() hass; @state() _selectedTab = 0; @state() _cardGUIMode = true; @state() _cardGUIModeAvailable = true; @query("hui-card-element-editor") private _cardEditorEl?; setConfig(config) { this._config = config; } connectedCallback() { super.connectedCallback(); loadHaForm(); } _handleSwitchTab(ev: CustomEvent) { this._selectedTab = parseInt(ev.detail.index, 10); } _configChanged(ev: CustomEvent) { ev.stopPropagation(); if (!this._config) return; this._config = { ...ev.detail.value }; this.dispatchEvent( new CustomEvent("config-changed", { detail: { config: this._config } }) ); } _cardConfigChanged(ev: CustomEvent) { ev.stopPropagation(); if (!this._config) return; const card = { ...ev.detail.config }; this._config = { ...this._config, card }; this._cardGUIModeAvailable = ev.detail.guiModeAvailable; this.dispatchEvent( new CustomEvent("config-changed", { detail: { config: this._config } }) ); } _toggleCardMode(ev) { this._cardEditorEl?.toggleMode(); } _deleteCard(ev) { if (!this._config) return; this._config = { ...this._config }; delete this._config.card; this.dispatchEvent( new CustomEvent("config-changed", { detail: { config: this._config } }) ); } _cardGUIModeChanged(ev: CustomEvent) { ev.stopPropagation(); this._cardGUIMode = ev.detail.guiMode; this._cardGUIModeAvailable = ev.detail.guiModeAvailable; } render() { if (!this.hass || !this._config) { return html``; } return html`