diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts index d5bbd66b3d..ef084217f7 100644 --- a/src/panels/lovelace/cards/hui-entities-card.ts +++ b/src/panels/lovelace/cards/hui-entities-card.ts @@ -6,7 +6,8 @@ import { PropertyValues, TemplateResult, } from "lit"; -import { customElement, state } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; +import { classMap } from "lit/directives/class-map"; import { DOMAINS_TOGGLE } from "../../../common/const"; import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; import { computeDomain } from "../../../common/entity/compute_domain"; @@ -54,6 +55,8 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard { return { type: "entities", entities: foundEntities }; } + @property() public editMode?: boolean | any; + @state() private _config?: EntitiesCardConfig; private _hass?: HomeAssistant; @@ -217,9 +220,15 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard { `} `} -
- ${this._configEntities!.map((entityConf) => - this.renderEntity(entityConf) +
+ ${this._configEntities!.map((entityConf, idx) => + this.renderEntity(entityConf, idx) )}
@@ -272,6 +281,12 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard { #states > div { position: relative; } + #states.highlight > div.selected { + opacity: 1; + } + #states.highlight > div { + opacity: 0.5; + } .icon { padding: 0px 18px 0px 8px; @@ -293,7 +308,10 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard { `; } - private renderEntity(entityConf: LovelaceRowConfig): TemplateResult { + private renderEntity( + entityConf: LovelaceRowConfig, + idx: number + ): TemplateResult { const element = createRowElement( (!("type" in entityConf) || entityConf.type === "conditional") && this._config!.state_color @@ -307,7 +325,13 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard { element.hass = this._hass; } - return html`
${element}
`; + return html`
+ ${element} +
`; } } diff --git a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts index 585de1f5f2..60c78d03f2 100644 --- a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts @@ -408,10 +408,15 @@ export class HuiEntitiesCardEditor private _editDetailElement(ev: HASSDomEvent): void { this._subElementEditorConfig = ev.detail.subElementConfig; + + fireEvent(this, "edit-mode-changed", { + selectedRow: ev.detail.subElementConfig?.index, + }); } private _goBack(): void { this._subElementEditorConfig = undefined; + fireEvent(this, "edit-mode-changed", true); } static get styles(): CSSResultGroup {