add actions to state-badge element and state-label-badge (default Lovelace badge type)

src/components/entity/ha-state-label-badge.ts

@@ -35,6 +35,8 @@ export class HaStateLabelBadge extends LitElement {
 
   @property() public image?: string;
 
+  @property() public handleClick?: boolean;
+
   @property() private _timerTimeRemaining?: number;
 
   private _connected?: boolean;
@@ -92,12 +94,15 @@ export class HaStateLabelBadge extends LitElement {
 
   protected firstUpdated(changedProperties: PropertyValues): void {
     super.firstUpdated(changedProperties);
-    this.addEventListener("click", (ev) => {
-      ev.stopPropagation();
-      if (this.state) {
-        fireEvent(this, "hass-more-info", { entityId: this.state.entity_id });
-      }
-    });
+
+    if (this.handleClick !== false) {
+      this.addEventListener("click", (ev) => {
+        ev.stopPropagation();
+        if (this.state) {
+          fireEvent(this, "hass-more-info", { entityId: this.state.entity_id });
+        }
+      });
+    }
   }
 
   protected updated(changedProperties: PropertyValues): void {

src/panels/lovelace/elements/hui-state-badge-element.ts

@@ -14,6 +14,9 @@ import { computeStateName } from "../../../common/entity/compute_state_name";
 import { LovelaceElement, StateBadgeElementConfig } from "./types";
 import { HomeAssistant } from "../../../types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
+import { longPress } from "../common/directives/long-press-directive";
+import { hasDoubleClick } from "../common/has-double-click";
+import { handleClick } from "../common/handle-click";
 
 @customElement("hui-state-badge-element")
 export class HuiStateBadgeElement extends LitElement
@@ -61,9 +64,28 @@ export class HuiStateBadgeElement extends LitElement
           : this._config.title === null
           ? ""
           : this._config.title}"
+        @ha-click=${this._handleClick}
+        @ha-hold=${this._handleHold}
+        @ha-dblclick=${this._handleDblClick}
+        .longPress=${longPress({
+          hasDoubleClick: hasDoubleClick(this._config!.double_tap_action),
+        })}
+        .handleClick=${false}
       ></ha-state-label-badge>
     `;
   }
+
+  private _handleClick() {
+    handleClick(this, this.hass!, this._config!, false, false);
+  }
+
+  private _handleHold() {
+    handleClick(this, this.hass!, this._config!, true, false);
+  }
+
+  private _handleDblClick() {
+    handleClick(this, this.hass!, this._config!, false, true);
+  }
 }
 
 declare global {

src/panels/lovelace/elements/hui-state-label-element.ts

@@ -9,7 +9,6 @@ import {
   PropertyValues,
 } from "lit-element";
 
-import "../../../components/entity/ha-state-label-badge";
 import "../components/hui-warning-element";
 
 import { computeStateDisplay } from "../../../common/entity/compute_state_display";

src/panels/lovelace/elements/types.ts

@@ -48,6 +48,9 @@ export interface ServiceButtonElementConfig extends LovelaceElementConfig {
 export interface StateBadgeElementConfig extends LovelaceElementConfig {
   entity: string;
   title?: string;
+  tap_action?: ActionConfig;
+  hold_action?: ActionConfig;
+  double_tap_action?: ActionConfig;
 }
 
 export interface StateIconElementConfig extends LovelaceElementConfig {