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 {