Merge branch 'dev'

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20240805.0"
+version      = "20240805.1"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"

src/components/entity/ha-entity-state-content-picker.ts

@@ -81,6 +81,9 @@ class HaEntityStatePicker extends LitElement {
 
   @property({ type: Boolean }) public required = false;
 
+  @property({ type: Boolean, attribute: "allow-name" }) public allowName =
+    false;
+
   @property() public label?: string;
 
   @property() public value?: string[] | string;
@@ -95,43 +98,55 @@ class HaEntityStatePicker extends LitElement {
     return !(!changedProps.has("_opened") && this._opened);
   }
 
-  private options = memoizeOne((entityId?: string, stateObj?: HassEntity) => {
-    const domain = entityId ? computeDomain(entityId) : undefined;
-    return [
-      {
-        label: this.hass.localize("ui.components.state-content-picker.state"),
-        value: "state",
-      },
-      {
-        label: this.hass.localize(
-          "ui.components.state-content-picker.last_changed"
-        ),
-        value: "last_changed",
-      },
-      {
-        label: this.hass.localize(
-          "ui.components.state-content-picker.last_updated"
-        ),
-        value: "last_updated",
-      },
-      ...(domain
-        ? STATE_DISPLAY_SPECIAL_CONTENT.filter((content) =>
-            STATE_DISPLAY_SPECIAL_CONTENT_DOMAINS[domain]?.includes(content)
-          ).map((content) => ({
-            label: this.hass.localize(
-              `ui.components.state-content-picker.${content}`
-            ),
-            value: content,
-          }))
-        : []),
-      ...Object.keys(stateObj?.attributes ?? {})
-        .filter((a) => !HIDDEN_ATTRIBUTES.includes(a))
-        .map((attribute) => ({
-          value: attribute,
-          label: this.hass.formatEntityAttributeName(stateObj!, attribute),
-        })),
-    ];
-  });
+  private options = memoizeOne(
+    (entityId?: string, stateObj?: HassEntity, allowName?: boolean) => {
+      const domain = entityId ? computeDomain(entityId) : undefined;
+      return [
+        {
+          label: this.hass.localize("ui.components.state-content-picker.state"),
+          value: "state",
+        },
+        ...(allowName
+          ? [
+              {
+                label: this.hass.localize(
+                  "ui.components.state-content-picker.name"
+                ),
+                value: "name",
+              },
+            ]
+          : []),
+        {
+          label: this.hass.localize(
+            "ui.components.state-content-picker.last_changed"
+          ),
+          value: "last_changed",
+        },
+        {
+          label: this.hass.localize(
+            "ui.components.state-content-picker.last_updated"
+          ),
+          value: "last_updated",
+        },
+        ...(domain
+          ? STATE_DISPLAY_SPECIAL_CONTENT.filter((content) =>
+              STATE_DISPLAY_SPECIAL_CONTENT_DOMAINS[domain]?.includes(content)
+            ).map((content) => ({
+              label: this.hass.localize(
+                `ui.components.state-content-picker.${content}`
+              ),
+              value: content,
+            }))
+          : []),
+        ...Object.keys(stateObj?.attributes ?? {})
+          .filter((a) => !HIDDEN_ATTRIBUTES.includes(a))
+          .map((attribute) => ({
+            value: attribute,
+            label: this.hass.formatEntityAttributeName(stateObj!, attribute),
+          })),
+      ];
+    }
+  );
 
   private _filter = "";
 
@@ -146,7 +161,7 @@ class HaEntityStatePicker extends LitElement {
       ? this.hass.states[this.entityId]
       : undefined;
 
-    const options = this.options(this.entityId, stateObj);
+    const options = this.options(this.entityId, stateObj, this.allowName);
     const optionItems = options.filter(
       (option) => !this._value.includes(option.value)
     );

src/components/ha-selector/ha-selector-ui-state-content.ts

@@ -36,6 +36,7 @@ export class HaSelectorUiStateContent extends SubscribeMixin(LitElement) {
         .helper=${this.helper}
         .disabled=${this.disabled}
         .required=${this.required}
+        .allowName=${this.selector.ui_state_content?.allow_name}
       ></ha-entity-state-content-picker>
     `;
   }

src/data/lovelace/config/badge.ts

@@ -13,6 +13,7 @@ export const ensureBadgeConfig = (
     return {
       type: "entity",
       entity: config,
+      display_type: "complete",
     };
   }
   if ("type" in config && config.type) {

src/data/selector.ts

@@ -461,6 +461,7 @@ export interface UiStateContentSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types
   ui_state_content: {
     entity_id?: string;
+    allow_name?: boolean;
   } | null;
 }
 

src/panels/lovelace/badges/hui-badge.ts

@@ -58,7 +58,7 @@ export class HuiBadge extends ReactiveElement {
 
   private _updateElement(config: LovelaceBadgeConfig) {
     if (config.type === "state-label") {
-      config = { ...config, type: "entity" };
+      config = { display_type: "complete", ...config, type: "entity" };
     }
     if (!this._element) {
       return;
@@ -70,7 +70,7 @@ export class HuiBadge extends ReactiveElement {
 
   private _loadElement(config: LovelaceBadgeConfig) {
     if (config.type === "state-label") {
-      config = { ...config, type: "entity" };
+      config = { display_type: "complete", ...config, type: "entity" };
     }
     this._element = createBadgeElement(config);
     this._elementConfig = config;

src/panels/lovelace/badges/hui-entity-badge.ts

@@ -144,6 +144,7 @@ export class HuiEntityBadge extends LitElement implements LovelaceBadge {
         .stateObj=${stateObj}
         .hass=${this.hass}
         .content=${this._config.state_content}
+        .name=${this._config.name}
       >
       </state-display>
     `;

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

@@ -23,7 +23,7 @@ import type { HomeAssistant } from "../../../types";
 import { actionHandler } from "../common/directives/action-handler-directive";
 import { findEntities } from "../common/find-entities";
 import { handleAction } from "../common/handle-action";
-import { hasAction } from "../common/has-action";
+import { hasAction, hasAnyAction } from "../common/has-action";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import type { LovelaceCard, LovelaceCardEditor } from "../types";
@@ -128,24 +128,20 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
 
     const name = this._config.name ?? computeStateName(stateObj);
 
-    const hasAnyAction =
-      !this._config.tap_action ||
-      hasAction(this._config.tap_action) ||
-      hasAction(this._config.hold_action) ||
-      hasAction(this._config.double_tap_action);
-
     // Use `stateObj.state` as value to keep formatting (e.g trailing zeros)
     // for consistent value display across gauge, entity, entity-row, etc.
     return html`
       <ha-card
-        class=${classMap({ action: hasAnyAction })}
+        class=${classMap({ action: hasAnyAction(this._config) })}
         @action=${this._handleAction}
         .actionHandler=${actionHandler({
           hasHold: hasAction(this._config.hold_action),
           hasDoubleClick: hasAction(this._config.double_tap_action),
         })}
         tabindex=${ifDefined(
-          hasAction(this._config.tap_action) ? "0" : undefined
+          !this._config.tap_action || hasAction(this._config.tap_action)
+            ? "0"
+            : undefined
         )}
       >
         <ha-gauge

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

@@ -28,7 +28,7 @@ import { HomeAssistant } from "../../../types";
 import { actionHandler } from "../common/directives/action-handler-directive";
 import { findEntities } from "../common/find-entities";
 import { handleAction } from "../common/handle-action";
-import { hasAction } from "../common/has-action";
+import { hasAction, hasAnyAction } from "../common/has-action";
 import { hasConfigOrEntitiesChanged } from "../common/has-changed";
 import { processConfigEntities } from "../common/process-config-entities";
 import "../components/hui-timestamp-display";
@@ -263,15 +263,9 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
 
     const name = entityConf.name ?? computeStateName(stateObj);
 
-    const hasAnyAction =
-      !entityConf.tap_action ||
-      hasAction(entityConf.tap_action) ||
-      hasAction(entityConf.hold_action) ||
-      hasAction(entityConf.double_tap_action);
-
     return html`
       <div
-        class=${classMap({ entity: true, action: hasAnyAction })}
+        class=${classMap({ entity: true, action: hasAnyAction(entityConf) })}
         .config=${entityConf}
         @action=${this._handleAction}
         .actionHandler=${actionHandler({

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

@@ -251,6 +251,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
             .stateObj=${stateObj}
             .hass=${this.hass}
             .content=${this._config.state_content}
+            .name=${this._config.name}
           >
           </state-display>
         `;

src/panels/lovelace/cards/picture-elements/create-styled-hui-element.ts

@@ -12,7 +12,7 @@ export function createStyledHuiElement(
 
   if (elementConfig.style) {
     Object.keys(elementConfig.style).forEach((prop) => {
-      element.style.setProperty(prop, elementConfig.style[prop]);
+      element.style.setProperty(prop, elementConfig.style![prop]);
     });
   }
 

src/panels/lovelace/common/has-action.ts

@@ -1,5 +1,15 @@
 import { ActionConfig } from "../../../data/lovelace/config/action";
+import { ConfigEntity } from "../cards/types";
 
 export function hasAction(config?: ActionConfig): boolean {
   return config !== undefined && config.action !== "none";
 }
+
+export function hasAnyAction(config: ConfigEntity): boolean {
+  return (
+    !config.tap_action ||
+    hasAction(config.tap_action) ||
+    hasAction(config.hold_action) ||
+    hasAction(config.double_tap_action)
+  );
+}

src/panels/lovelace/components/hui-generic-entity-row.ts

@@ -20,7 +20,7 @@ import { HomeAssistant } from "../../../types";
 import { EntitiesCardEntityConfig } from "../cards/types";
 import { actionHandler } from "../common/directives/action-handler-directive";
 import { handleAction } from "../common/handle-action";
-import { hasAction } from "../common/has-action";
+import { hasAction, hasAnyAction } from "../common/has-action";
 import { createEntityNotFoundWarning } from "./hui-warning";
 
 @customElement("hui-generic-entity-row")
@@ -60,9 +60,7 @@ export class HuiGenericEntityRow extends LitElement {
     // By default, we always show a pointer, since if there is no explicit configuration provided,
     // the frontend always assumes "more-info" in the action handler. We only need to hide the pointer
     // if the tap action is explicitly set to "none".
-    const pointer = !(
-      this.config.tap_action && this.config.tap_action.action === "none"
-    );
+    const pointer = hasAnyAction(this.config);
 
     const hasSecondary = this.secondaryText || this.config.secondary_info;
     const name = this.config.name ?? computeStateName(stateObj);
@@ -82,7 +80,11 @@ export class HuiGenericEntityRow extends LitElement {
           hasHold: hasAction(this.config!.hold_action),
           hasDoubleClick: hasAction(this.config!.double_tap_action),
         })}
-        tabindex=${ifDefined(pointer ? "0" : undefined)}
+        tabindex=${ifDefined(
+          !this.config.tap_action || hasAction(this.config.tap_action)
+            ? "0"
+            : undefined
+        )}
       ></state-badge>
       ${!this.hideName
         ? html`<div

src/panels/lovelace/create-element/create-picture-element.ts

@@ -35,7 +35,7 @@ export const createPictureElementElement = (config: LovelaceElementConfig) =>
 
 export const getPictureElementClass = (type: string) =>
   getLovelaceElementClass(
-    type,
+    type === "action-button" ? "service-button" : type,
     "element",
     ALWAYS_LOADED_TYPES,
     LAZY_LOAD_TYPES

src/panels/lovelace/editor/config-elements/elements/hui-conditional-element-editor.ts

@@ -106,12 +106,23 @@ export class HuiConditionalElementEditor
   private _elementsChanged(ev: CustomEvent): void {
     ev.stopPropagation();
 
+    const oldLength = this._config?.elements?.length || 0;
     const config = {
       ...this._config,
       elements: ev.detail.elements as LovelaceElementConfig[],
     } as LovelaceCardConfig;
 
     fireEvent(this, "config-changed", { config });
+
+    const newLength = ev.detail.elements?.length || 0;
+    if (newLength === oldLength + 1) {
+      const index = newLength - 1;
+      this._subElementEditorConfig = {
+        index,
+        type: "element",
+        elementConfig: { ...ev.detail.elements[index] },
+      };
+    }
   }
 
   private _handleSubElementChanged(ev: CustomEvent): void {

src/panels/lovelace/editor/config-elements/hui-entity-badge-editor.ts

@@ -122,7 +122,9 @@ export class HuiEntityBadgeEditor
             {
               name: "state_content",
               selector: {
-                ui_state_content: {},
+                ui_state_content: {
+                  allow_name: true,
+                },
               },
               context: {
                 filter_entity: "entity",

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

@@ -23,7 +23,7 @@ import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { DEFAULT_MIN, DEFAULT_MAX } from "../../cards/hui-gauge-card";
 import { UiAction } from "../../components/hui-action-editor";
 
-const TAP_ACTIONS: UiAction[] = ["navigate", "url", "call-service", "none"];
+const TAP_ACTIONS: UiAction[] = ["navigate", "url", "perform-action", "none"];
 
 const gaugeSegmentStruct = object({
   from: number(),

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

@@ -138,12 +138,23 @@ export class HuiPictureElementsCardEditor
   private _elementsChanged(ev: CustomEvent): void {
     ev.stopPropagation();
 
+    const oldLength = this._config?.elements?.length || 0;
     const config = {
       ...this._config,
       elements: ev.detail.elements as LovelaceElementConfig[],
     } as LovelaceCardConfig;
 
     fireEvent(this, "config-changed", { config });
+
+    const newLength = ev.detail.elements?.length || 0;
+    if (newLength === oldLength + 1) {
+      const index = newLength - 1;
+      this._subElementEditorConfig = {
+        index,
+        type: "element",
+        elementConfig: { ...ev.detail.elements[index] },
+      };
+    }
   }
 
   private _handleSubElementChanged(ev: CustomEvent): void {