fix: Embedded light card handle issue (#989)

Fixes #427 
Fixes #901 though Honeycomb menu should use capture event is
their case.

It could be that to prevent any unknown breaking change that a config
option is used, but I could not think of a good name for it!

---------

Co-authored-by: Jérôme Wiedemann <[email protected]>

Author: dcapslock

src/button-card.ts

@@ -918,12 +918,12 @@ class ButtonCard extends LitElement {
           <div
             id=${key}
             @action=${this._stopPropagation}
-            @click=${this._stopPropagation}
-            @touchstart=${this._stopPropagation}
-            @mousedown=${this._stopPropagation}
-            @mouseup=${this._stopPropagation}
-            @touchend=${this._stopPropagation}
-            @touchcancel=${this._stopPropagation}
+            @click=${this._sendToParent}
+            @touchstart=${this._sendToParent}
+            @mousedown=${this._sendToParent}
+            @mouseup=${this._sendToParent}
+            @touchend=${this._sendToParent}
+            @touchcancel=${this._sendToParent}
             style=${styleMap(customStyle)}
           >
             ${thing}
@@ -1526,4 +1526,10 @@ class ButtonCard extends LitElement {
   private _stopPropagation(ev: Event): void {
     ev.stopPropagation();
   }
+
+  private _sendToParent(ev: Event): void {
+    ev.stopPropagation();
+    const event = new CustomEvent(ev.type, ev);
+    this.parentElement?.dispatchEvent(event);
+  }
 }

test/ui-lovelace.yaml

@@ -1471,6 +1471,9 @@ views:
         entity: switch.skylight
         show_icon: false
         name: '[[[ return `Main entity: ${entity.entity_id || "unknown entity"}`; ]]]'
+        label: Tap should toggle
+        tap_action:
+          action: toggle
         styles:
           grid:
             - grid-template-areas: '"n" "nested"'
@@ -1482,7 +1485,13 @@ views:
               type: 'custom:button-card'
               name: '[[[[ return (entity?.entity_id || "4[ ]: main button entity not known"); ]]]]'
               label: '[[[ return `3[ ]: ${(entity?.entity_id || "main button state not known")}`; ]]]'
+              show_state: true
+              state_display: Above should show "not known" <br/> below should show ¨switch.skylight".<br/>Tap should not trigger parent button action
               show_label: true
+              show_icon: false
+              tap_action:
+                action: more-info
+                entity: switch.skylight
 
       - type: custom:button-card
         entity: switch.skylight