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

* add actions to state-badge element

* address comments

state-label-badge no longer handles clicks
added actions to hui-state-label-badge
moved ha-badges-card to Lit

src/cards/ha-badges-card.js

@@ -1,31 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../components/entity/ha-state-label-badge";
-
-class HaBadgesCard extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        ha-state-label-badge {
-          display: inline-block;
-          margin-bottom: var(--ha-state-label-badge-margin-bottom, 16px);
-        }
-      </style>
-      <template is="dom-repeat" items="[[states]]">
-        <ha-state-label-badge
-          hass="[[hass]]"
-          state="[[item]]"
-        ></ha-state-label-badge>
-      </template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      states: Array,
-    };
-  }
-}
-customElements.define("ha-badges-card", HaBadgesCard);

src/cards/ha-badges-card.ts

@@ -0,0 +1,45 @@
+import { TemplateResult, html } from "lit-html";
+import { customElement, LitElement, property } from "lit-element";
+import { HassEntity } from "home-assistant-js-websocket";
+
+import "../components/entity/ha-state-label-badge";
+
+import { HomeAssistant } from "../types";
+import { fireEvent } from "../common/dom/fire_event";
+
+@customElement("ha-badges-card")
+class HaBadgesCard extends LitElement {
+  @property() public hass?: HomeAssistant;
+  @property() public states?: HassEntity[];
+
+  protected render(): TemplateResult | void {
+    if (!this.hass || !this.states) {
+      return html``;
+    }
+
+    return html`
+      ${this.states.map(
+        (state) => html`
+          <ha-state-label-badge
+            .hass=${this.hass}
+            .state=${state}
+            @click=${this._handleClick}
+          ></ha-state-label-badge>
+        `
+      )}
+    `;
+  }
+
+  private _handleClick(ev: Event) {
+    const entityId = ((ev.target as any).state as HassEntity).entity_id;
+    fireEvent(this, "hass-more-info", {
+      entityId,
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-badges-card": HaBadgesCard;
+  }
+}

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

@@ -11,7 +11,6 @@ import {
 
 import { HassEntity } from "home-assistant-js-websocket";
 import { classMap } from "lit-html/directives/class-map";
-import { fireEvent } from "../../common/dom/fire_event";
 import { HomeAssistant } from "../../types";
 
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
@@ -90,16 +89,6 @@ 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 });
-      }
-    });
-  }
-
   protected updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties);
 

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

@@ -13,6 +13,9 @@ import { LovelaceBadge } from "../types";
 import { HomeAssistant } from "../../../types";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { StateLabelBadgeConfig } from "./types";
+import { longPress } from "../common/directives/long-press-directive";
+import { hasDoubleClick } from "../common/has-double-click";
+import { handleClick } from "../common/handle-click";
 
 @customElement("hui-state-label-badge")
 export class HuiStateLabelBadge extends LitElement implements LovelaceBadge {
@@ -41,9 +44,27 @@ export class HuiStateLabelBadge extends LitElement implements LovelaceBadge {
           : ""}
         .icon=${this._config.icon}
         .image=${this._config.image}
+        @ha-click=${this._handleClick}
+        @ha-hold=${this._handleHold}
+        @ha-dblclick=${this._handleDblClick}
+        .longPress=${longPress({
+          hasDoubleClick: hasDoubleClick(this._config!.double_tap_action),
+        })}
       ></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/badges/types.ts

@@ -1,4 +1,4 @@
-import { LovelaceBadgeConfig } from "../../../data/lovelace";
+import { LovelaceBadgeConfig, ActionConfig } from "../../../data/lovelace";
 import { EntityFilterEntityConfig } from "../entity-rows/types";
 
 export interface EntityFilterBadgeConfig extends LovelaceBadgeConfig {
@@ -16,4 +16,7 @@ export interface StateLabelBadgeConfig extends LovelaceBadgeConfig {
   name?: string;
   icon?: string;
   image?: string;
+  tap_action?: ActionConfig;
+  hold_action?: ActionConfig;
+  double_tap_action?: ActionConfig;
 }

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,27 @@ 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),
+        })}
       ></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 {