fix custom card helper build issues

package.json

@@ -1,6 +1,6 @@
 {
   "name": "boilerplate-card",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "description": "Lovelace boilerplate-card",
   "keywords": [
     "home-assistant",
@@ -15,7 +15,7 @@
   "author": "Ian Richardson <[email protected]>",
   "license": "MIT",
   "dependencies": {
-    "custom-card-helpers": "^1.3.9",
+    "custom-card-helpers": "^1.6.3",
     "home-assistant-js-websocket": "^4.4.0",
     "lit-element": "^2.2.1",
     "lit-html": "^1.1.2"
@@ -32,7 +32,7 @@
     "eslint-config-prettier": "^6.5.0",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-prettier": "^3.1.1",
-    "prettier": "^1.18.2",
+    "prettier": "^1.19.1",
     "rollup": "^1.26.0",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.1.0",

src/action-handler-directive.ts

@@ -1,34 +1,38 @@
 import { directive, PropertyPart } from 'lit-html';
-import { fireEvent, ActionHandlerOptions } from 'custom-card-helpers';
+
+import { ActionHandlerDetail, ActionHandlerOptions } from 'custom-card-helpers/dist/types';
+import { fireEvent } from 'custom-card-helpers';
 
 const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
 
 interface ActionHandler extends HTMLElement {
   holdTime: number;
   bind(element: Element, options): void;
 }
-interface ActionHandlerElement extends Element {
+interface ActionHandlerElement extends HTMLElement {
   actionHandler?: boolean;
 }
 
+declare global {
+  interface HASSDomEvents {
+    action: ActionHandlerDetail;
+  }
+}
+
 class ActionHandler extends HTMLElement implements ActionHandler {
-  public holdTime: number;
-  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  public holdTime = 500;
+
   public ripple: any;
-  protected timer: number | undefined;
-  protected held: boolean;
-  protected cooldownStart: boolean;
-  protected cooldownEnd: boolean;
-  private dblClickTimeout: number | undefined;
+
+  protected timer?: number;
+
+  protected held = false;
+
+  private dblClickTimeout?: number;
 
   constructor() {
     super();
-    this.holdTime = 500;
     this.ripple = document.createElement('mwc-ripple');
-    this.timer = undefined;
-    this.held = false;
-    this.cooldownStart = false;
-    this.cooldownEnd = false;
   }
 
   public connectedCallback(): void {
@@ -38,6 +42,7 @@ class ActionHandler extends HTMLElement implements ActionHandler {
       height: isTouch ? '100px' : '50px',
       transform: 'translate(-50%, -50%)',
       pointerEvents: 'none',
+      zIndex: '999',
     });
 
     this.appendChild(this.ripple);
@@ -72,13 +77,10 @@ class ActionHandler extends HTMLElement implements ActionHandler {
       }
       e.cancelBubble = true;
       e.returnValue = false;
-      return;
+      return false;
     });
 
-    const clickStart = (ev: Event): void => {
-      if (this.cooldownStart) {
-        return;
-      }
+    const start = (ev: Event): void => {
       this.held = false;
       let x;
       let y;
@@ -94,56 +96,50 @@ class ActionHandler extends HTMLElement implements ActionHandler {
         this.startAnimation(x, y);
         this.held = true;
       }, this.holdTime);
-
-      this.cooldownStart = true;
-      window.setTimeout(() => (this.cooldownStart = false), 100);
     };
 
-    const clickEnd = (ev: Event): void => {
-      if (this.cooldownEnd || (['touchend', 'touchcancel'].includes(ev.type) && this.timer === undefined)) {
+    const end = (ev: Event): void => {
+      // Prevent mouse event if touch event
+      ev.preventDefault();
+      if (['touchend', 'touchcancel'].includes(ev.type) && this.timer === undefined) {
         return;
       }
       clearTimeout(this.timer);
       this.stopAnimation();
       this.timer = undefined;
       if (this.held) {
-        fireEvent(element as HTMLElement, 'action', { action: 'hold' });
-      } else if (options.hasDoubleTap) {
-        if ((ev as MouseEvent).detail === 1 || ev.type === 'keyup') {
+        fireEvent(element, 'action', { action: 'hold' });
+      } else if (options.hasDoubleClick) {
+        if ((ev.type === 'click' && (ev as MouseEvent).detail < 2) || !this.dblClickTimeout) {
           this.dblClickTimeout = window.setTimeout(() => {
-            fireEvent(element as HTMLElement, 'action', { action: 'tap' });
+            this.dblClickTimeout = undefined;
+            fireEvent(element, 'action', { action: 'tap' });
           }, 250);
         } else {
           clearTimeout(this.dblClickTimeout);
-          fireEvent(element as HTMLElement, 'action', { action: 'double_tap' });
+          this.dblClickTimeout = undefined;
+          fireEvent(element, 'action', { action: 'double_tap' });
         }
       } else {
-        fireEvent(element as HTMLElement, 'action', { action: 'tap' });
+        fireEvent(element, 'action', { action: 'tap' });
       }
-      this.cooldownEnd = true;
-      window.setTimeout(() => (this.cooldownEnd = false), 100);
     };
 
-    const handleEnter = (ev: Event): void => {
-      if ((ev as KeyboardEvent).keyCode === 13) {
-        return clickEnd(ev);
+    const handleEnter = (ev: KeyboardEvent): void => {
+      if (ev.keyCode !== 13) {
+        return;
       }
+      end(ev);
     };
 
-    element.addEventListener('touchstart', clickStart, { passive: true });
-    element.addEventListener('touchend', clickEnd);
-    element.addEventListener('touchcancel', clickEnd);
-    element.addEventListener('keyup', handleEnter);
+    element.addEventListener('touchstart', start, { passive: true });
+    element.addEventListener('touchend', end);
+    element.addEventListener('touchcancel', end);
 
-    // iOS 13 sends a complete normal touchstart-touchend series of events followed by a mousedown-click series.
-    // That might be a bug, but until it's fixed, this should make action-handler work.
-    // If it's not a bug that is fixed, this might need updating with the next iOS version.
-    // Note that all events (both touch and mouse) must be listened for in order to work on computers with both mouse and touchscreen.
-    const isIOS13 = /iPhone OS 13_/.test(window.navigator.userAgent);
-    if (!isIOS13) {
-      element.addEventListener('mousedown', clickStart, { passive: true });
-      element.addEventListener('click', clickEnd);
-    }
+    element.addEventListener('mousedown', start, { passive: true });
+    element.addEventListener('click', end);
+
+    element.addEventListener('keyup', handleEnter);
   }
 
   private startAnimation(x: number, y: number): void {
@@ -188,5 +184,5 @@ export const actionHandlerBind = (element: ActionHandlerElement, options: Action
 };
 
 export const actionHandler = directive((options: ActionHandlerOptions = {}) => (part: PropertyPart): void => {
-  actionHandlerBind(part.committer.element, options);
+  actionHandlerBind(part.committer.element as ActionHandlerElement, options);
 });

src/boilerplate-card.ts

@@ -79,8 +79,7 @@ export class BoilerplateCard extends LitElement {
         @action=${this._handleAction}
         .actionHandler=${actionHandler({
           hasHold: hasAction(this._config.hold_action),
-          hasDoubleTap: hasAction(this._config.double_tap_action),
-          repeat: this._config.hold_action ? this._config.hold_action.repeat : undefined,
+          hasDoubleClick: hasAction(this._config.double_tap_action),
         })}
         tabindex="0"
         aria-label=${`Boilerplate: ${this._config.entity}`}