20240930.0 (#22166)

* Use dash for unknown and unavailable state in heading entity

* Update src/state-display/state-display.ts

Co-authored-by: Simon Lamon <32477463+silamon@users.noreply.github.com>

---------

Co-authored-by: Simon Lamon <32477463+silamon@users.noreply.github.com>

README.md

@@ -27,3 +27,5 @@ A complete guide can be found at the following [link](https://www.home-assistant
 Home Assistant is open-source and Apache 2 licensed. Feel free to browse the repository, learn and reuse parts in your own projects.
 
 We use [BrowserStack](https://www.browserstack.com) to test Home Assistant on a large variety of devices.
+
+[![Home Assistant - A project from the Open Home Foundation](https://www.openhomefoundation.org/badges/home-assistant.png)](https://www.openhomefoundation.org/)

pyproject.toml

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

src/components/data-table/ha-data-table.ts

@@ -1011,6 +1011,7 @@ export class HaDataTable extends LitElement {
           /* @noflip */
           padding-inline-end: initial;
           width: 60px;
+          min-width: 60px;
         }
 
         .mdc-data-table__table {

src/panels/lovelace/editor/heading-badge-editor/hui-entity-heading-badge-editor.ts

@@ -37,6 +37,7 @@ export const DEFAULT_CONFIG: Partial<EntityHeadingBadgeConfig> = {
 const entityConfigStruct = object({
   type: optional(string()),
   entity: string(),
+  name: optional(string()),
   icon: optional(string()),
   state_content: optional(union([string(), array(string())])),
   show_state: optional(boolean()),
@@ -86,6 +87,12 @@ export class HuiHeadingEntityEditor
               name: "",
               type: "grid",
               schema: [
+                {
+                  name: "name",
+                  selector: {
+                    text: {},
+                  },
+                },
                 {
                   name: "icon",
                   selector: { icon: {} },
@@ -128,7 +135,7 @@ export class HuiHeadingEntityEditor
             },
             {
               name: "state_content",
-              selector: { ui_state_content: {} },
+              selector: { ui_state_content: { allow_name: true } },
               context: { filter_entity: "entity" },
             },
           ],
@@ -269,6 +276,10 @@ export class HuiHeadingEntityEditor
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.heading.entity_config.${schema.name}_helper`
         );
+      case "name":
+        return this.hass!.localize(
+          `ui.panel.lovelace.editor.card.heading.entity_config.name_helper`
+        );
       default:
         return undefined;
     }

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

@@ -125,12 +125,15 @@ export class HuiEntityHeadingBadge
       "--icon-color": color,
     };
 
+    const name = config.name || stateObj.attributes.friendly_name;
+
     return html`
       <ha-heading-badge
         .type=${hasAction(config.tap_action) ? "button" : "text"}
         @action=${this._handleAction}
         .actionHandler=${actionHandler()}
         style=${styleMap(style)}
+        .title=${name}
       >
         ${config.show_icon
           ? html`
@@ -148,6 +151,8 @@ export class HuiEntityHeadingBadge
                 .hass=${this.hass}
                 .stateObj=${stateObj}
                 .content=${config.state_content}
+                .name=${config.name}
+                dash-unavailable
               ></state-display>
             `
           : nothing}

src/panels/lovelace/heading-badges/types.ts

@@ -16,6 +16,7 @@ export interface ErrorBadgeConfig extends LovelaceHeadingBadgeConfig {
 export interface EntityHeadingBadgeConfig extends LovelaceHeadingBadgeConfig {
   type?: "entity";
   entity: string;
+  name?: string;
   state_content?: string | string[];
   icon?: string;
   show_state?: boolean;

src/state-display/state-display.ts

@@ -57,6 +57,9 @@ class StateDisplay extends LitElement {
 
   @property({ attribute: false }) public name?: string;
 
+  @property({ type: Boolean, attribute: "dash-unavailable" })
+  public dashUnavailable?: boolean;
+
   protected createRenderRoot() {
     return this;
   }
@@ -73,6 +76,9 @@ class StateDisplay extends LitElement {
     const domain = computeStateDomain(stateObj);
 
     if (content === "state") {
+      if (this.dashUnavailable && isUnavailableState(stateObj.state)) {
+        return "—";
+      }
       if (
         (stateObj.attributes.device_class === SENSOR_DEVICE_CLASS_TIMESTAMP ||
           TIMESTAMP_STATE_DOMAINS.includes(domain)) &&

src/translations/en.json

@@ -6026,6 +6026,8 @@
               "entity_config": {
                 "color": "[%key:ui::panel::lovelace::editor::card::tile::color%]",
                 "color_helper": "[%key:ui::panel::lovelace::editor::card::tile::color_helper%]",
+                "name": "[%key:ui::panel::lovelace::editor::card::generic::name%]",
+                "name_helper": "Visible if selected in state content",
                 "visibility": "Visibility",
                 "visibility_explanation": "The entity will be shown when ALL conditions below are fulfilled. If no conditions are set, the entity will always be shown.",
                 "appearance": "Appearance",