Feature: add tap action (#32)

* added simple minimalistic tab action

Author: Neisi

README.md

@@ -290,6 +290,28 @@ Here are the available parameters for this Lovelace card.
 | `cheap_times` | boolean | `false` | The card highlights the cheapest times of the day in graph and the phases are displayed in text form. <ul><li>Prices are analyzed <strong>per day</strong>, so each day is evaluated on its own.</li><li>For each day, prices are normalized using a relative scale: <code>relative price = (price - daily minimum) / (daily maximum - daily minimum)</code>.</li><li>The <strong>lowest ~25%</strong> of all intervals for that day are considered <em>cheap</em>.</li><li>Consecutive cheap intervals are grouped into longer time phases.</li><li>Only <strong>future</strong> phases are shown, and only if they last <strong>at least 1 hour</strong>.</li></ul> |
 | `cheap_time_sources` | array of strings | `undefined` | Optional and only available in yaml mode. If `cheap_times: true` is set, you can provide a list of sensors/entity IDs to define the cheap time periods manually instead of letting the card calculate them automatically. This is useful if you already use helpers from the [ha_epex_spot_sensor](https://github.com/mampfes/ha_epex_spot_sensor) add-on – you can pass those sensor IDs here to display their cheap periods directly.|
 
+---
+### Actions
+| Name       | Type    | Default | Description |
+|------------|---------|---------|-------------|
+| `tap_action` | object | `undefined` | Optional action when tapping the card. See [Home Assistant Actions](https://www.home-assistant.io/dashboards/actions/). Supported actions: `more-info`, `toggle`, `call-service`, `navigate`, `url`, `assist`. Requires `tap_target` for entity-based actions. |
+| `tap_target` | string | `undefined` | The entity ID that is the target of the `tap_action`. Required for entity-based actions (`toggle`, `more-info`, `call-service`). Not needed for navigation/url actions. |
+
+**Examples:**
+
+Toggle an input boolean:
+
+```yaml
+tap_action:
+  action: toggle
+tap_target: input_boolean.my_helper
+```
+Open more-info dialog:
+```yaml
+tap_action:
+  action: more-info
+tap_target: sensor.tibber_prices
+```
 ---
 
 ### 📘 Configuration

price-timeline-card.js

@@ -1115,7 +1115,7 @@ class PriceTimelineCard extends LitElement {
     const activeClass = this._dayOffset === 0 ? "active-today" : "active-tomorrow";
 
     return html`
-      <div class="day-toggle">
+      <div class="day-toggle no-tap">
         <div class="toggle-button ${activeClass}" @click=${this._toggleDayView}>
           <div class="toggle-indicator"></div>
           <span class="today">${localize("editor_start_today", lang)}</span>
@@ -1130,7 +1130,7 @@ class PriceTimelineCard extends LitElement {
   //---------------------
   _renderSlider(data, currentIndex) {
     return html` 
-        <div class="slider-container">
+        <div class="slider-container no-tap">
            <input type="range" min="0" max="${data.length - 1}" .value="${currentIndex}" @input="${this._onSliderChange}" />
         </div>
        `
@@ -1365,17 +1365,41 @@ class PriceTimelineCard extends LitElement {
       default:
         cardContent = this._renderTimeline(data, currentIndex, avg, lang);
     }
+
     return html`
-            <ha-card>
+        <ha-card>
                 <div>
-                    ${cardContent}
-                    ${this.config.cheap_times === true ? this._renderCheapTimes(dataIntervalls) : ""}
-                    ${this.config.day_switch && this.config.view !== "graph" ? this._renderToggler(lang) : ""}
-                    ${this.config.slider ? this._renderSlider(data, currentIndex) : ""}
+                  <div @pointerup=${(ev) => this._onTap(ev)}>${cardContent}</div>
+                  ${this.config.cheap_times === true ? this._renderCheapTimes(dataIntervalls) : ""}
+                  ${this.config.day_switch && this.config.view !== "graph" ? this._renderToggler(lang) : ""}
+                  ${this.config.slider ? this._renderSlider(data, currentIndex) : ""}
                 </div>
-            </ha-card>
+           </ha-card>
          `;
   }
+  
+  _onTap(ev) {
+      const ignoreTags = ["BUTTON", "A", "INPUT", "SELECT", "TEXTAREA", "HA-SLIDER"];
+      if (ignoreTags.includes(ev.target.tagName)) return;
+      if (ev.target.closest(".no-tap")) return; 
+      this._handleAction("tap");
+  }
+  
+ _handleAction(actionType) {
+      if (!this.config.tap_action || !this.config.tap_target) return;
+      const event = new CustomEvent("hass-action", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          config: {
+            entity: this.config.tap_target,
+            tap_action: this.config.tap_action,
+          },
+          action: actionType,
+        },
+      });
+      this.dispatchEvent(event);
+    }
 
   static getConfigElement() {
     return document.createElement("price-timeline-card-editor");