hold/double actions for light-card (#5361)

* hold/double actions for light-card

* lint

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

@@ -25,12 +25,15 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import { HomeAssistant, LightEntity } from "../../../types";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
-import { toggleEntity } from "../common/entity/toggle-entity";
 import { LightCardConfig } from "./types";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import { SUPPORT_BRIGHTNESS } from "../../../data/light";
 import { findEntities } from "../common/find-entites";
 import { UNAVAILABLE } from "../../../data/entity";
+import { actionHandler } from "../common/directives/action-handler-directive";
+import { hasAction } from "../common/has-action";
+import { ActionHandlerEvent } from "../../../data/lovelace";
+import { handleAction } from "../common/handle-action";
 
 @customElement("hui-light-card")
 export class HuiLightCard extends LitElement implements LovelaceCard {
@@ -74,7 +77,11 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
       throw new Error("Specify an entity from within the light domain.");
     }
 
-    this._config = { theme: "default", ...config };
+    this._config = {
+      theme: "default",
+      ...config,
+      tap_action: { action: "toggle" },
+    };
   }
 
   protected render(): TemplateResult {
@@ -143,7 +150,11 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
                   filter: this._computeBrightness(stateObj),
                   color: this._computeColor(stateObj),
                 })}
-                @click=${this._handleClick}
+                @action=${this._handleAction}
+                .actionHandler=${actionHandler({
+                  hasHold: hasAction(this._config!.hold_action),
+                  hasDoubleClick: hasAction(this._config!.double_tap_action),
+                })}
                 tabindex="0"
               ></paper-icon-button>
             </div>
@@ -240,8 +251,8 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
     return `hsl(${hue}, 100%, ${100 - sat / 2}%)`;
   }
 
-  private _handleClick() {
+  private _handleAction(ev: ActionHandlerEvent) {
-    toggleEntity(this.hass!, this._config!.entity!);
+    handleAction(this, this.hass!, this._config!, ev.detail.action!);
   }
 
   private _handleMoreInfo() {

src/panels/lovelace/cards/types.ts

@@ -138,6 +138,9 @@ export interface LightCardConfig extends LovelaceCardConfig {
   name?: string;
   theme?: string;
   icon?: string;
+  tap_action?: ActionConfig;
+  hold_action?: ActionConfig;
+  double_tap_action?: ActionConfig;
 }
 
 export interface MapCardConfig extends LovelaceCardConfig {

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

@@ -8,18 +8,23 @@ import {
 import "@polymer/paper-input/paper-input";
 
 import "../../components/hui-theme-select-editor";
-
+import "../../components/hui-action-editor";
 import "../../../../components/ha-icon-input";
 import "../../components/hui-entity-editor";
 
 import { struct } from "../../common/structs/struct";
-import { EntitiesEditorEvent, EditorTarget } from "../types";
+import {
+  EntitiesEditorEvent,
+  EditorTarget,
+  actionConfigStruct,
+} from "../types";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCardEditor } from "../../types";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { configElementStyle } from "./config-elements-style";
 import { LightCardConfig } from "../../cards/types";
 import { stateIcon } from "../../../../common/entity/state_icon";
+import { ActionConfig } from "../../../../data/lovelace";
 
 const cardConfigStruct = struct({
   type: "string",
@@ -27,6 +32,8 @@ const cardConfigStruct = struct({
   entity: "string?",
   theme: "string?",
   icon: "string?",
+  hold_action: struct.optional(actionConfigStruct),
+  double_tap_action: struct.optional(actionConfigStruct),
 });
 
 @customElement("hui-light-card-editor")
@@ -56,11 +63,28 @@ export class HuiLightCardEditor extends LitElement
     return this._config!.icon || "";
   }
 
+  get _hold_action(): ActionConfig {
+    return this._config!.hold_action || { action: "none" };
+  }
+
+  get _double_tap_action(): ActionConfig {
+    return this._config!.double_tap_action || { action: "none" };
+  }
+
   protected render(): TemplateResult {
     if (!this.hass) {
       return html``;
     }
 
+    const actions = [
+      "more-info",
+      "toggle",
+      "navigate",
+      "url",
+      "call-service",
+      "none",
+    ];
+
     return html`
       ${configElementStyle}
       <div class="card-config">
@@ -71,10 +95,10 @@ export class HuiLightCardEditor extends LitElement
             "ui.panel.lovelace.editor.card.config.required"
           )})"
           .hass=${this.hass}
-          .value="${this._entity}"
+          .value=${this._entity}
           .configValue=${"entity"}
           include-domains='["light"]'
-          @change="${this._valueChanged}"
+          @change=${this._valueChanged}
           allow-custom-entity
         ></ha-entity-picker>
         <div class="side-by-side">
@@ -84,9 +108,9 @@ export class HuiLightCardEditor extends LitElement
             )} (${this.hass.localize(
               "ui.panel.lovelace.editor.card.config.optional"
             )})"
-            .value="${this._name}"
+            .value=${this._name}
-            .configValue="${"name"}"
+            .configValue=${"name"}
-            @value-changed="${this._valueChanged}"
+            @value-changed=${this._valueChanged}
           ></paper-input>
           <ha-icon-input
             .label="${this.hass.localize(
@@ -94,20 +118,46 @@ export class HuiLightCardEditor extends LitElement
             )} (${this.hass.localize(
               "ui.panel.lovelace.editor.card.config.optional"
             )})"
-            .value="${this._icon}"
+            .value=${this._icon}
             .placeholder=${this._icon ||
               stateIcon(this.hass.states[this._entity])}
-            .configValue="${"icon"}"
+            .configValue=${"icon"}
-            @value-changed="${this._valueChanged}"
+            @value-changed=${this._valueChanged}
           ></ha-icon-input>
         </div>
 
         <hui-theme-select-editor
           .hass=${this.hass}
-          .value="${this._theme}"
+          .value=${this._theme}
-          .configValue="${"theme"}"
+          .configValue=${"theme"}
-          @value-changed="${this._valueChanged}"
+          @value-changed=${this._valueChanged}
         ></hui-theme-select-editor>
+
+        <hui-action-editor
+          .label="${this.hass.localize(
+            "ui.panel.lovelace.editor.card.generic.hold_action"
+          )} (${this.hass.localize(
+            "ui.panel.lovelace.editor.card.config.optional"
+          )})"
+          .hass=${this.hass}
+          .config=${this._hold_action}
+          .actions=${actions}
+          .configValue=${"hold_action"}
+          @action-changed=${this._valueChanged}
+        ></hui-action-editor>
+
+        <hui-action-editor
+          .label="${this.hass.localize(
+            "ui.panel.lovelace.editor.card.generic.double_tap_action"
+          )} (${this.hass.localize(
+            "ui.panel.lovelace.editor.card.config.optional"
+          )})"
+          .hass=${this.hass}
+          .config=${this._double_tap_action}
+          .actions=${actions}
+          .configValue=${"double_tap_action"}
+          @action-changed=${this._valueChanged}
+        ></hui-action-editor>
       </div>
     `;
   }
@@ -118,7 +168,10 @@ export class HuiLightCardEditor extends LitElement
     }
     const target = ev.target! as EditorTarget;
 
-    if (this[`_${target.configValue}`] === target.value) {
+    if (
+      this[`_${target.configValue}`] === target.value ||
+      this[`_${target.configValue}`] === target.config
+    ) {
       return;
     }
     if (target.configValue) {
@@ -127,7 +180,7 @@ export class HuiLightCardEditor extends LitElement
       } else {
         this._config = {
           ...this._config,
-          [target.configValue!]: target.value,
+          [target.configValue!]: target.value ? target.value : target.config,
         };
       }
     }

src/translations/en.json

@@ -2068,6 +2068,7 @@
               "attribute": "Attribute",
               "camera_image": "Camera Entity",
               "camera_view": "Camera View",
+              "double_tap_action": "Double Tap Action",
               "entities": "Entities",
               "entity": "Entity",
               "hold_action": "Hold Action",