add actions to weather-forecast-card (#7659)

src/panels/lovelace/cards/hui-weather-forecast-card.ts

@@ -9,18 +9,22 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit-element";
+import { ifDefined } from "lit-html/directives/if-defined";
+
+import type { HomeAssistant } from "../../../types";
+import type { LovelaceCard, LovelaceCardEditor } from "../types";
+import type { WeatherForecastCardConfig } from "./types";
+
 import { formatTime } from "../../../common/datetime/format_time";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
-import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { stateIcon } from "../../../common/entity/state_icon";
 import { isValidEntityId } from "../../../common/entity/valid_entity_id";
 import { formatNumber } from "../../../common/string/format_number";
 import { debounce } from "../../../common/util/debounce";
-import "../../../components/ha-card";
-import "../../../components/ha-icon";
 import { UNAVAILABLE } from "../../../data/entity";
+import { ActionHandlerEvent } from "../../../data/lovelace";
 import {
   getSecondaryWeatherAttribute,
   getWeatherStateIcon,
@@ -30,14 +34,16 @@ import {
   WeatherEntity,
   weatherSVGStyles,
 } from "../../../data/weather";
-import type { HomeAssistant } from "../../../types";
 import { actionHandler } from "../common/directives/action-handler-directive";
 import { findEntities } from "../common/find-entites";
+import { handleAction } from "../common/handle-action";
+import { hasAction } from "../common/has-action";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import { installResizeObserver } from "../common/install-resize-observer";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
-import type { LovelaceCard, LovelaceCardEditor } from "../types";
+
-import type { WeatherForecastCardConfig } from "./types";
+import "../../../components/ha-card";
+import "../../../components/ha-icon";
 
 const DAY_IN_MILLISECONDS = 86400000;
 
@@ -189,8 +195,13 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
     return html`
       <ha-card
         @action=${this._handleAction}
-        .actionHandler=${actionHandler()}
+        .actionHandler=${actionHandler({
-        tabindex="0"
+          hasHold: hasAction(this._config!.hold_action),
+          hasDoubleClick: hasAction(this._config!.double_tap_action),
+        })}
+        tabindex=${ifDefined(
+          hasAction(this._config.tap_action) ? "0" : undefined
+        )}
       >
         <div class="content">
           <div class="icon-image">
@@ -339,8 +350,8 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  private _handleAction(): void {
+  private _handleAction(ev: ActionHandlerEvent) {
-    fireEvent(this, "hass-more-info", { entityId: this._config!.entity });
+    handleAction(this, this.hass!, this._config!, ev.detail.action!);
   }
 
   private async _attachObserver(): Promise<void> {

src/panels/lovelace/cards/types.ts

@@ -315,4 +315,7 @@ export interface WeatherForecastCardConfig extends LovelaceCardConfig {
   show_forecast?: boolean;
   secondary_info_attribute?: string;
   theme?: string;
+  tap_action?: ActionConfig;
+  hold_action?: ActionConfig;
+  double_tap_action?: ActionConfig;
 }

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

@@ -18,7 +18,11 @@ import { HomeAssistant } from "../../../../types";
 import { WeatherForecastCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
-import { EditorTarget, EntitiesEditorEvent } from "../types";
+import {
+  actionConfigStruct,
+  EditorTarget,
+  EntitiesEditorEvent,
+} from "../types";
 import { configElementStyle } from "./config-elements-style";
 
 const cardConfigStruct = object({
@@ -28,6 +32,9 @@ const cardConfigStruct = object({
   theme: optional(string()),
   show_forecast: optional(boolean()),
   secondary_info_attribute: optional(string()),
+  tap_action: optional(actionConfigStruct),
+  hold_action: optional(actionConfigStruct),
+  double_tap_action: optional(actionConfigStruct),
 });
 
 const includeDomains = ["weather"];