Merge branch 'master' into maintainer

.eslintrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+    parser: '@typescript-eslint/parser',  // Specifies the ESLint parser
+    extends: [
+        'plugin:@typescript-eslint/recommended',  // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+        'prettier/@typescript-eslint',  // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
+        'plugin:prettier/recommended',  // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+    ],
+    parserOptions: {
+        ecmaVersion: 2018,  // Allows for the parsing of modern ECMAScript features
+        sourceType: 'module',  // Allows for the use of imports
+        experimentalDecorators: true,
+    },
+};

.eslintrc.yaml

@@ -1,22 +0,0 @@
-extends: airbnb-base
-parser: "@typescript-eslint/parser"
-rules:
-  no-else-return: 0
-  no-underscore-dangle: 0
-  nonblock-statement-body-position: 0
-  curly: 0
-  no-return-assign: 0
-  consistent-return: 0
-  no-mixed-operators: 0
-  class-methods-use-this: 0
-  no-nested-ternary: 0
-  camelcase: 0
-  no-unused-vars: 0
-  quotes: 0
-  comma-dangle: 0
-  import/no-unresolved: 0
-  import/prefer-default-export: 0
-globals:
-  window: true
-  Event: true
-  customElements: true

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+    semi: true,
+    trailingComma: 'all',
+    singleQuote: true,
+    printWidth: 120,
+    tabWidth: 2,
+};

README.md

@@ -12,6 +12,12 @@ A community driven boilerplate of best practices for Home Assistant Lovelace cus
 [![Discord][discord-shield]][discord]
 [![Community Forum][forum-shield]][forum]
 
+## Support
+
+Hey dude! Help me out for a couple of :beers: or a :coffee:!
+
+[![coffee](https://www.buymeacoffee.com/assets/img/custom_images/black_img.png)](https://www.buymeacoffee.com/zJtVxUAgH)
+
 ## Options
 
 | Name              | Type    | Requirement  | Description                                 | Default             |
@@ -35,6 +41,7 @@ A community driven boilerplate of best practices for Home Assistant Lovelace cus
 | service         | string | **Optional** | Service to call (e.g. media_player.media_play_pause) when action defined as call-service                                               | `none`      |
 | service_data    | object | **Optional** | Service data to include (e.g. entity_id: media_player.bedroom) when action defined as call-service                                     | `none`      |
 | haptic          | string | **Optional** | Haptic feedback for the [Beta IOS App](http://home-assistant.io/ios/beta) _success, warning, failure, light, medium, heavy, selection_ | `none`      |
+| repeat          | number | **Optional** | How often to repeat the `hold_action` in milliseconds.                                                                                 | `non`       |
 
 ## Starting a new card from boilerplate-card
 

dist/boilerplate-card.js

@@ -1,4 +1,4 @@
-function t(t,e,n,s){var i,r=arguments.length,o=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,n):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,n,s);else for(var a=t.length-1;a>=0;a--)(i=t[a])&&(o=(r<3?i(o):r>3?i(e,n,o):i(e,n))||o);return r>3&&o&&Object.defineProperty(e,n,o),o}const e=new WeakMap,n=t=>"function"==typeof t&&e.has(t),s=void 0!==window.customElements&&void 0!==window.customElements.polyfillWrapFlushCallback,i=(t,e,n=null)=>{for(;e!==n;){const n=e.nextSibling;t.removeChild(e),e=n}},r={},o={},a=`{{lit-${String(Math.random()).slice(2)}}}`,c=`\x3c!--${a}--\x3e`,l=new RegExp(`${a}|${c}`),d="$lit$";class h{constructor(t,e){this.parts=[],this.element=e;const n=[],s=[],i=document.createTreeWalker(e.content,133,null,!1);let r=0,o=-1,c=0;const{strings:h,values:{length:p}}=t;for(;c<p;){const t=i.nextNode();if(null!==t){if(o++,1===t.nodeType){if(t.hasAttributes()){const e=t.attributes,{length:n}=e;let s=0;for(let t=0;t<n;t++)u(e[t].name,d)&&s++;for(;s-- >0;){const e=h[c],n=f.exec(e)[2],s=n.toLowerCase()+d,i=t.getAttribute(s);t.removeAttribute(s);const r=i.split(l);this.parts.push({type:"attribute",index:o,name:n,strings:r}),c+=r.length-1}}"TEMPLATE"===t.tagName&&(s.push(t),i.currentNode=t.content)}else if(3===t.nodeType){const e=t.data;if(e.indexOf(a)>=0){const s=t.parentNode,i=e.split(l),r=i.length-1;for(let e=0;e<r;e++){let n,r=i[e];if(""===r)n=m();else{const t=f.exec(r);null!==t&&u(t[2],d)&&(r=r.slice(0,t.index)+t[1]+t[2].slice(0,-d.length)+t[3]),n=document.createTextNode(r)}s.insertBefore(n,t),this.parts.push({type:"node",index:++o})}""===i[r]?(s.insertBefore(m(),t),n.push(t)):t.data=i[r],c+=r}}else if(8===t.nodeType)if(t.data===a){const e=t.parentNode;null!==t.previousSibling&&o!==r||(o++,e.insertBefore(m(),t)),r=o,this.parts.push({type:"node",index:o}),null===t.nextSibling?t.data="":(n.push(t),o--),c++}else{let e=-1;for(;-1!==(e=t.data.indexOf(a,e+1));)this.parts.push({type:"node",index:-1}),c++}}else i.currentNode=s.pop()}for(const t of n)t.parentNode.removeChild(t)}}const u=(t,e)=>{const n=t.length-e.length;return n>=0&&t.slice(n)===e},p=t=>-1!==t.index,m=()=>document.createComment(""),f=/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=\/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;class _{constructor(t,e,n){this.__parts=[],this.template=t,this.processor=e,this.options=n}update(t){let e=0;for(const n of this.__parts)void 0!==n&&n.setValue(t[e]),e++;for(const t of this.__parts)void 0!==t&&t.commit()}_clone(){const t=s?this.template.element.content.cloneNode(!0):document.importNode(this.template.element.content,!0),e=[],n=this.template.parts,i=document.createTreeWalker(t,133,null,!1);let r,o=0,a=0,c=i.nextNode();for(;o<n.length;)if(r=n[o],p(r)){for(;a<r.index;)a++,"TEMPLATE"===c.nodeName&&(e.push(c),i.currentNode=c.content),null===(c=i.nextNode())&&(i.currentNode=e.pop(),c=i.nextNode());if("node"===r.type){const t=this.processor.handleTextExpression(this.options);t.insertAfterNode(c.previousSibling),this.__parts.push(t)}else this.__parts.push(...this.processor.handleAttributeExpressions(c,r.name,r.strings,this.options));o++}else this.__parts.push(void 0),o++;return s&&(document.adoptNode(t),customElements.upgrade(t)),t}}const g=` ${a} `;class y{constructor(t,e,n,s){this.strings=t,this.values=e,this.type=n,this.processor=s}getHTML(){const t=this.strings.length-1;let e="",n=!1;for(let s=0;s<t;s++){const t=this.strings[s],i=t.lastIndexOf("\x3c!--");n=(i>-1||n)&&-1===t.indexOf("--\x3e",i+1);const r=f.exec(t);e+=null===r?t+(n?g:c):t.substr(0,r.index)+r[1]+r[2]+d+r[3]+a}return e+=this.strings[t]}getTemplateElement(){const t=document.createElement("template");return t.innerHTML=this.getHTML(),t}}const v=t=>null===t||!("object"==typeof t||"function"==typeof t),S=t=>Array.isArray(t)||!(!t||!t[Symbol.iterator]);class w{constructor(t,e,n){this.dirty=!0,this.element=t,this.name=e,this.strings=n,this.parts=[];for(let t=0;t<n.length-1;t++)this.parts[t]=this._createPart()}_createPart(){return new b(this)}_getValue(){const t=this.strings,e=t.length-1;let n="";for(let s=0;s<e;s++){n+=t[s];const e=this.parts[s];if(void 0!==e){const t=e.value;if(v(t)||!S(t))n+="string"==typeof t?t:String(t);else for(const e of t)n+="string"==typeof e?e:String(e)}}return n+=t[e]}commit(){this.dirty&&(this.dirty=!1,this.element.setAttribute(this.name,this._getValue()))}}class b{constructor(t){this.value=void 0,this.committer=t}setValue(t){t===r||v(t)&&t===this.value||(this.value=t,n(t)||(this.committer.dirty=!0))}commit(){for(;n(this.value);){const t=this.value;this.value=r,t(this)}this.value!==r&&this.committer.commit()}}class x{constructor(t){this.value=void 0,this.__pendingValue=void 0,this.options=t}appendInto(t){this.startNode=t.appendChild(m()),this.endNode=t.appendChild(m())}insertAfterNode(t){this.startNode=t,this.endNode=t.nextSibling}appendIntoPart(t){t.__insert(this.startNode=m()),t.__insert(this.endNode=m())}insertAfterPart(t){t.__iLine truncated
+function t(t,e,n,s){var i,o=arguments.length,r=o<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,n):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,n,s);else for(var a=t.length-1;a>=0;a--)(i=t[a])&&(r=(o<3?i(r):o>3?i(e,n,r):i(e,n))||r);return o>3&&r&&Object.defineProperty(e,n,r),r}const e=new WeakMap,n=t=>"function"==typeof t&&e.has(t),s=void 0!==window.customElements&&void 0!==window.customElements.polyfillWrapFlushCallback,i=(t,e,n=null)=>{for(;e!==n;){const n=e.nextSibling;t.removeChild(e),e=n}},o={},r={},a=`{{lit-${String(Math.random()).slice(2)}}}`,c=`\x3c!--${a}--\x3e`,l=new RegExp(`${a}|${c}`),d="$lit$";class h{constructor(t,e){this.parts=[],this.element=e;const n=[],s=[],i=document.createTreeWalker(e.content,133,null,!1);let o=0,r=-1,c=0;const{strings:h,values:{length:p}}=t;for(;c<p;){const t=i.nextNode();if(null!==t){if(r++,1===t.nodeType){if(t.hasAttributes()){const e=t.attributes,{length:n}=e;let s=0;for(let t=0;t<n;t++)u(e[t].name,d)&&s++;for(;s-- >0;){const e=h[c],n=f.exec(e)[2],s=n.toLowerCase()+d,i=t.getAttribute(s);t.removeAttribute(s);const o=i.split(l);this.parts.push({type:"attribute",index:r,name:n,strings:o}),c+=o.length-1}}"TEMPLATE"===t.tagName&&(s.push(t),i.currentNode=t.content)}else if(3===t.nodeType){const e=t.data;if(e.indexOf(a)>=0){const s=t.parentNode,i=e.split(l),o=i.length-1;for(let e=0;e<o;e++){let n,o=i[e];if(""===o)n=m();else{const t=f.exec(o);null!==t&&u(t[2],d)&&(o=o.slice(0,t.index)+t[1]+t[2].slice(0,-d.length)+t[3]),n=document.createTextNode(o)}s.insertBefore(n,t),this.parts.push({type:"node",index:++r})}""===i[o]?(s.insertBefore(m(),t),n.push(t)):t.data=i[o],c+=o}}else if(8===t.nodeType)if(t.data===a){const e=t.parentNode;null!==t.previousSibling&&r!==o||(r++,e.insertBefore(m(),t)),o=r,this.parts.push({type:"node",index:r}),null===t.nextSibling?t.data="":(n.push(t),r--),c++}else{let e=-1;for(;-1!==(e=t.data.indexOf(a,e+1));)this.parts.push({type:"node",index:-1}),c++}}else i.currentNode=s.pop()}for(const t of n)t.parentNode.removeChild(t)}}const u=(t,e)=>{const n=t.length-e.length;return n>=0&&t.slice(n)===e},p=t=>-1!==t.index,m=()=>document.createComment(""),f=/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=\/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;class g{constructor(t,e,n){this.__parts=[],this.template=t,this.processor=e,this.options=n}update(t){let e=0;for(const n of this.__parts)void 0!==n&&n.setValue(t[e]),e++;for(const t of this.__parts)void 0!==t&&t.commit()}_clone(){const t=s?this.template.element.content.cloneNode(!0):document.importNode(this.template.element.content,!0),e=[],n=this.template.parts,i=document.createTreeWalker(t,133,null,!1);let o,r=0,a=0,c=i.nextNode();for(;r<n.length;)if(o=n[r],p(o)){for(;a<o.index;)a++,"TEMPLATE"===c.nodeName&&(e.push(c),i.currentNode=c.content),null===(c=i.nextNode())&&(i.currentNode=e.pop(),c=i.nextNode());if("node"===o.type){const t=this.processor.handleTextExpression(this.options);t.insertAfterNode(c.previousSibling),this.__parts.push(t)}else this.__parts.push(...this.processor.handleAttributeExpressions(c,o.name,o.strings,this.options));r++}else this.__parts.push(void 0),r++;return s&&(document.adoptNode(t),customElements.upgrade(t)),t}}const _=` ${a} `;class y{constructor(t,e,n,s){this.strings=t,this.values=e,this.type=n,this.processor=s}getHTML(){const t=this.strings.length-1;let e="",n=!1;for(let s=0;s<t;s++){const t=this.strings[s],i=t.lastIndexOf("\x3c!--");n=(i>-1||n)&&-1===t.indexOf("--\x3e",i+1);const o=f.exec(t);e+=null===o?t+(n?_:c):t.substr(0,o.index)+o[1]+o[2]+d+o[3]+a}return e+=this.strings[t]}getTemplateElement(){const t=document.createElement("template");return t.innerHTML=this.getHTML(),t}}const v=t=>null===t||!("object"==typeof t||"function"==typeof t),S=t=>Array.isArray(t)||!(!t||!t[Symbol.iterator]);class w{constructor(t,e,n){this.dirty=!0,this.element=t,this.name=e,this.strings=n,this.parts=[];for(let t=0;t<n.length-1;t++)this.parts[t]=this._createPart()}_createPart(){return new b(this)}_getValue(){const t=this.strings,e=t.length-1;let n="";for(let s=0;s<e;s++){n+=t[s];const e=this.parts[s];if(void 0!==e){const t=e.value;if(v(t)||!S(t))n+="string"==typeof t?t:String(t);else for(const e of t)n+="string"==typeof e?e:String(e)}}return n+=t[e]}commit(){this.dirty&&(this.dirty=!1,this.element.setAttribute(this.name,this._getValue()))}}class b{constructor(t){this.value=void 0,this.committer=t}setValue(t){t===o||v(t)&&t===this.value||(this.value=t,n(t)||(this.committer.dirty=!0))}commit(){for(;n(this.value);){const t=this.value;this.value=o,t(this)}this.value!==o&&this.committer.commit()}}class x{constructor(t){this.value=void 0,this.__pendingValue=void 0,this.options=t}appendInto(t){this.startNode=t.appendChild(m()),this.endNode=t.appendChild(m())}insertAfterNode(t){this.startNode=t,this.endNode=t.nextSibling}appendIntoPart(t){t.__insert(this.startNode=m()),t.__insert(this.endNode=m())}insertAfterPart(t){t.__iLine truncated
         <ha-card>
           <div class="warning">Show Warning</div>
         </ha-card>
@@ -6,13 +6,13 @@ function t(t,e,n,s){var i,r=arguments.length,o=r<3?e:null===s?s=Object.getOwnPro
       <ha-card
         .header=${this._config.name}
         @action=${this._handleAction}
-        .actionHandler=${Dt({hasHold:Tt(this._config.hold_action),hasDoubleTap:Tt(this._config.double_tap_action)})}
+        .actionHandler=${Dt({hasHold:Tt(this._config.hold_action),hasDoubleTap:Tt(this._config.double_tap_action),repeat:this._config.hold_action?this._config.hold_action.repeat:void 0})}
       ></ha-card>
-    `:O``}_handleAction(t){Et(this,this.hass,this._config,t.detail.action)}static get styles(){return ct`
+    `:O``}_handleAction(t){this.hass&&this._config&&t.detail.action&&Et(this,this.hass,this._config,t.detail.action)}static get styles(){return ct`
       .warning {
         display: block;
         color: black;
         background-color: #fce588;
         padding: 8px;
       }
-    `}};t([it()],Vt.prototype,"hass",void 0),t([it()],Vt.prototype,"_config",void 0),Vt=t([(t=>e=>"function"==typeof e?((t,e)=>(window.customElements.define(t,e),e))(t,e):((t,e)=>{const{kind:n,elements:s}=e;return{kind:n,elements:s,finisher(e){window.customElements.define(t,e)}}})(t,e))("boilerplate-card")],Vt);
+    `}};t([it()],Vt.prototype,"hass",void 0),t([it()],Vt.prototype,"_config",void 0),Vt=t([(t=>e=>"function"==typeof e?((t,e)=>(window.customElements.define(t,e),e))(t,e):((t,e)=>{const{kind:n,elements:s}=e;return{kind:n,elements:s,finisher(e){window.customElements.define(t,e)}}})(t,e))("boilerplate-card")],Vt);export{Vt as BoilerplateCard};

package.json

@@ -15,9 +15,10 @@
   "author": "Ian Richardson <iantrich@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "custom-card-helpers": "^1.3.5",
+    "custom-card-helpers": "^1.3.9",
     "home-assistant-js-websocket": "^4.4.0",
-    "lit-element": "^2.2.1"
+    "lit-element": "^2.2.1",
+    "lit-html": "^1.1.2"
   },
   "devDependencies": {
     "@babel/core": "^7.6.4",
@@ -27,7 +28,9 @@
     "@typescript-eslint/parser": "^2.6.0",
     "eslint": "^6.6.0",
     "eslint-config-airbnb-base": "^14.0.0",
+    "eslint-config-prettier": "^6.5.0",
     "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-prettier": "^3.1.1",
     "prettier": "^1.18.2",
     "rollup": "^1.26.0",
     "rollup-plugin-babel": "^4.3.3",

src/action-handler-directive.ts

@@ -1,10 +1,7 @@
-import { directive, PropertyPart } from "lit-html";
+import { directive, PropertyPart } from 'lit-html';
-import { fireEvent, ActionHandlerOptions } from "custom-card-helpers";
+import { fireEvent, ActionHandlerOptions } from 'custom-card-helpers';
 
-const isTouch =
+const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
-  "ontouchstart" in window ||
-  navigator.maxTouchPoints > 0 ||
-  navigator.msMaxTouchPoints > 0;
 
 interface ActionHandler extends HTMLElement {
   holdTime: number;
@@ -16,6 +13,7 @@ interface ActionHandlerElement extends Element {
 
 class ActionHandler extends HTMLElement implements ActionHandler {
   public holdTime: number;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   public ripple: any;
   protected timer: number | undefined;
   protected held: boolean;
@@ -26,34 +24,26 @@ class ActionHandler extends HTMLElement implements ActionHandler {
   constructor() {
     super();
     this.holdTime = 500;
-    this.ripple = document.createElement("mwc-ripple");
+    this.ripple = document.createElement('mwc-ripple');
     this.timer = undefined;
     this.held = false;
     this.cooldownStart = false;
     this.cooldownEnd = false;
   }
 
-  public connectedCallback() {
+  public connectedCallback(): void {
     Object.assign(this.style, {
-      position: "absolute",
+      position: 'absolute',
-      width: isTouch ? "100px" : "50px",
+      width: isTouch ? '100px' : '50px',
-      height: isTouch ? "100px" : "50px",
+      height: isTouch ? '100px' : '50px',
-      transform: "translate(-50%, -50%)",
+      transform: 'translate(-50%, -50%)',
-      pointerEvents: "none",
+      pointerEvents: 'none',
     });
 
     this.appendChild(this.ripple);
     this.ripple.primary = true;
 
-    [
+    ['touchcancel', 'mouseout', 'mouseup', 'touchmove', 'mousewheel', 'wheel', 'scroll'].forEach(ev => {
-      "touchcancel",
-      "mouseout",
-      "mouseup",
-      "touchmove",
-      "mousewheel",
-      "wheel",
-      "scroll",
-    ].forEach((ev) => {
       document.addEventListener(
         ev,
         () => {
@@ -61,18 +51,18 @@ class ActionHandler extends HTMLElement implements ActionHandler {
           this.stopAnimation();
           this.timer = undefined;
         },
-        { passive: true }
+        { passive: true },
       );
     });
   }
 
-  public bind(element: ActionHandlerElement, options) {
+  public bind(element: ActionHandlerElement, options): void {
     if (element.actionHandler) {
       return;
     }
     element.actionHandler = true;
 
-    element.addEventListener("contextmenu", (ev: Event) => {
+    element.addEventListener('contextmenu', (ev: Event) => {
       const e = ev || window.event;
       if (e.preventDefault) {
         e.preventDefault();
@@ -82,10 +72,10 @@ class ActionHandler extends HTMLElement implements ActionHandler {
       }
       e.cancelBubble = true;
       e.returnValue = false;
-      return false;
+      return;
     });
 
-    const clickStart = (ev: Event) => {
+    const clickStart = (ev: Event): void => {
       if (this.cooldownStart) {
         return;
       }
@@ -111,38 +101,34 @@ class ActionHandler extends HTMLElement implements ActionHandler {
       window.setTimeout(() => (this.cooldownStart = false), 100);
     };
 
-    const clickEnd = (ev: Event) => {
+    const clickEnd = (ev: Event): void => {
-      if (
+      if (this.cooldownEnd || (['touchend', 'touchcancel'].includes(ev.type) && this.timer === undefined)) {
-        this.cooldownEnd ||
-        (["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" });
+        fireEvent(element as HTMLElement, 'action', { action: 'hold' });
       } else if (options.hasDoubleTap) {
         if ((ev as MouseEvent).detail === 1) {
           this.dblClickTimeout = window.setTimeout(() => {
-            fireEvent(element as HTMLElement, "action", { action: "tap" });
+            fireEvent(element as HTMLElement, 'action', { action: 'tap' });
           }, 250);
         } else {
           clearTimeout(this.dblClickTimeout);
-          fireEvent(element as HTMLElement, "action", { action: "double_tap" });
+          fireEvent(element as HTMLElement, 'action', { action: 'double_tap' });
         }
       } else {
-        fireEvent(element as HTMLElement, "action", { action: "tap" });
+        fireEvent(element as HTMLElement, 'action', { action: 'tap' });
       }
       this.cooldownEnd = true;
       window.setTimeout(() => (this.cooldownEnd = false), 100);
     };
 
-    element.addEventListener("touchstart", clickStart, { passive: true });
+    element.addEventListener('touchstart', clickStart, { passive: true });
-    element.addEventListener("touchend", clickEnd);
+    element.addEventListener('touchend', clickEnd);
-    element.addEventListener("touchcancel", clickEnd);
+    element.addEventListener('touchcancel', clickEnd);
 
     // 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.
@@ -150,12 +136,12 @@ class ActionHandler extends HTMLElement implements ActionHandler {
     // 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 = window.navigator.userAgent.match(/iPhone OS 13_/);
     if (!isIOS13) {
-      element.addEventListener("mousedown", clickStart, { passive: true });
+      element.addEventListener('mousedown', clickStart, { passive: true });
-      element.addEventListener("click", clickEnd);
+      element.addEventListener('click', clickEnd);
     }
   }
 
-  private startAnimation(x: number, y: number) {
+  private startAnimation(x: number, y: number): void {
     Object.assign(this.style, {
       left: `${x}px`,
       top: `${y}px`,
@@ -166,32 +152,29 @@ class ActionHandler extends HTMLElement implements ActionHandler {
     this.ripple.unbounded = true;
   }
 
-  private stopAnimation() {
+  private stopAnimation(): void {
     this.ripple.active = false;
     this.ripple.disabled = true;
-    this.style.display = "none";
+    this.style.display = 'none';
   }
 }
 
 // TODO You need to replace all instances of "action-handler-boilerplate" with "action-handler-<your card name>"
-customElements.define("action-handler-boilerplate", ActionHandler);
+customElements.define('action-handler-boilerplate', ActionHandler);
 
 const geActionHandler = (): ActionHandler => {
   const body = document.body;
-  if (body.querySelector("action-handler-boilerplate")) {
+  if (body.querySelector('action-handler-boilerplate')) {
-    return body.querySelector("action-handler-boilerplate") as ActionHandler;
+    return body.querySelector('action-handler-boilerplate') as ActionHandler;
   }
 
-  const actionhandler = document.createElement("action-handler-boilerplate");
+  const actionhandler = document.createElement('action-handler-boilerplate');
   body.appendChild(actionhandler);
 
   return actionhandler as ActionHandler;
 };
 
-export const actionHandlerBind = (
+export const actionHandlerBind = (element: ActionHandlerElement, options: ActionHandlerOptions): void => {
-  element: ActionHandlerElement,
-  options: ActionHandlerOptions
-) => {
   const actionhandler: ActionHandler = geActionHandler();
   if (!actionhandler) {
     return;
@@ -199,8 +182,6 @@ export const actionHandlerBind = (
   actionhandler.bind(element, options);
 };
 
-export const actionHandler = directive(
+export const actionHandler = directive((options: ActionHandlerOptions = {}) => (part: PropertyPart): void => {
-  (options: ActionHandlerOptions = {}) => (part: PropertyPart) => {
   actionHandlerBind(part.committer.element, options);
-  }
+});
-);

src/boilerplate-card.ts

@@ -1,27 +1,26 @@
-import {
+import { LitElement, html, customElement, property, CSSResult, TemplateResult, css, PropertyValues } from 'lit-element';
-  LitElement,
-  html,
-  customElement,
-  property,
-  CSSResult,
-  TemplateResult,
-  css,
-  PropertyValues
-} from "lit-element";
 import {
   HomeAssistant,
   hasConfigOrEntityChanged,
   hasAction,
   ActionHandlerEvent,
-  handleAction
+  handleAction,
-} from "custom-card-helpers";
+} from 'custom-card-helpers';
 
-import { BoilerplateConfig } from "./types";
+import { BoilerplateConfig } from './types';
-import { actionHandler } from "./action-handler-directive";
+import { actionHandler } from './action-handler-directive';
+import { CARD_VERSION } from './const';
+
+/* eslint no-console: 0 */
+console.info(
+  `%c  BOILERPLATE-CARD     \n%c  Version ${CARD_VERSION}     `,
+  'color: orange; font-weight: bold; background: black',
+  'color: white; font-weight: bold; background: dimgray',
+);
 
 // TODO Name your custom element
-@customElement("boilerplate-card")
+@customElement('boilerplate-card')
-class BoilerplateCard extends LitElement {
+export class BoilerplateCard extends LitElement {
   // TODO Add any properities that should cause your element to re-render here
   @property() public hass?: HomeAssistant;
   @property() private _config?: BoilerplateConfig;
@@ -29,12 +28,12 @@ class BoilerplateCard extends LitElement {
   public setConfig(config: BoilerplateConfig): void {
     // TODO Check for required fields and that they are of the proper format
     if (!config || config.show_error) {
-      throw new Error("Invalid configuration");
+      throw new Error('Invalid configuration');
     }
 
     this._config = {
-      name: "Boilerplate",
+      name: 'Boilerplate',
-      ...config
+      ...config,
     };
   }
 
@@ -61,15 +60,18 @@ class BoilerplateCard extends LitElement {
         .header=${this._config.name}
         @action=${this._handleAction}
         .actionHandler=${actionHandler({
-          hasHold: hasAction(this._config!.hold_action),
+          hasHold: hasAction(this._config.hold_action),
-          hasDoubleTap: hasAction(this._config!.double_tap_action)
+          hasDoubleTap: hasAction(this._config.double_tap_action),
+          repeat: this._config.hold_action ? this._config.hold_action.repeat : undefined,
         })}
       ></ha-card>
     `;
   }
 
-  private _handleAction(ev: ActionHandlerEvent) {
+  private _handleAction(ev: ActionHandlerEvent): void {
-    handleAction(this, this.hass!, this._config!, ev.detail.action!);
+    if (this.hass && this._config && ev.detail.action) {
+      handleAction(this, this.hass, this._config, ev.detail.action);
+    }
   }
 
   static get styles(): CSSResult {

src/const.ts

@@ -0,0 +1 @@
+export const CARD_VERSION = '1.1.2';

src/types.ts

@@ -1,4 +1,4 @@
-import { ActionConfig, HASSDomEvent } from "custom-card-helpers";
+import { ActionConfig } from 'custom-card-helpers';
 
 // TODO Add your configuration elements here for type-checking
 export interface BoilerplateConfig {

yarn.lock

@@ -485,10 +485,10 @@ cross-spawn@^6.0.5:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
-custom-card-helpers@^1.3.5:
+custom-card-helpers@^1.3.9:
-  version "1.3.5"
+  version "1.3.9"
-  resolved "https://registry.yarnpkg.com/custom-card-helpers/-/custom-card-helpers-1.3.5.tgz#6e55a813ce9e8b83ccdd34011501b8b094d36ab5"
+  resolved "https://registry.yarnpkg.com/custom-card-helpers/-/custom-card-helpers-1.3.9.tgz#ec4794bd9aadebc93a0d87f79e1d19bdb9610e23"
-  integrity sha512-fEcqN6ESAHpfaYWGn+0EkzG9eH7DBqY66CCvp1OqdWwdZQ9jxOYRm16ZQjEnXaSvfUy9QYDfDmowQQ3SjofxDw==
+  integrity sha512-lpgkIHLWf6l6leSd9kA4oW9jW7mrXKwlW3jV/0ON04r8qqdhaOtSqaRqecBW+Jqk87bIb0WC4F9Xq2+HpNRwKw==
   dependencies:
     fecha "^3.0.3"
     home-assistant-js-websocket "^4.4.0"
@@ -589,6 +589,13 @@ eslint-config-airbnb-base@^14.0.0:
     object.assign "^4.1.0"
     object.entries "^1.1.0"
 
+eslint-config-prettier@^6.5.0:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.5.0.tgz#aaf9a495e2a816865e541bfdbb73a65cc162b3eb"
+  integrity sha512-cjXp8SbO9VFGW/Z7mbTydqS9to8Z58E5aYhj3e1+Hx7lS9s6gL5ILKNpCqZAFOVYRcSkWPFYljHrEh8QFEK5EQ==
+  dependencies:
+    get-stdin "^6.0.0"
+
 eslint-import-resolver-node@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.2.tgz#58f15fb839b8d0576ca980413476aab2472db66a"
@@ -622,6 +629,13 @@ eslint-plugin-import@^2.18.2:
     read-pkg-up "^2.0.0"
     resolve "^1.11.0"
 
+eslint-plugin-prettier@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.1.tgz#507b8562410d02a03f0ddc949c616f877852f2ba"
+  integrity sha512-A+TZuHZ0KU0cnn56/9mfR7/KjUJ9QNVXUhwvRFSR7PGPe0zQR6PTkmyqg1AtUUEOzTqeRsUwyKFh0oVZKVCrtA==
+  dependencies:
+    prettier-linter-helpers "^1.0.0"
+
 eslint-scope@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.0.0.tgz#e87c8887c73e8d1ec84f1ca591645c358bfc8fb9"
@@ -749,6 +763,11 @@ fast-deep-equal@^2.0.1:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
   integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
 
+fast-diff@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
+  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
+
 fast-json-stable-stringify@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
@@ -857,6 +876,11 @@ functional-red-black-tree@^1.0.1:
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
+get-stdin@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b"
+  integrity sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==
+
 glob-parent@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.0.0.tgz#1dc99f0f39b006d3e92c2c284068382f0c20e954"
@@ -1157,7 +1181,7 @@ lit-element@^2.1.0, lit-element@^2.2.1:
   dependencies:
     lit-html "^1.0.0"
 
-lit-html@^1.0.0:
+lit-html@^1.0.0, lit-html@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.1.2.tgz#2e3560a7075210243649c888ad738eaf0daa8374"
   integrity sha512-FFlUMKHKi+qG1x1iHNZ1hrtc/zHmfYTyrSvs3/wBTvaNtpZjOZGWzU7efGYVpgp6KvWeKF6ql9/KsCq6Z/mEDA==
@@ -1455,6 +1479,13 @@ prelude-ls@~1.1.2:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
   integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
 
+prettier-linter-helpers@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
+  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
+  dependencies:
+    fast-diff "^1.1.2"
+
 prettier@^1.18.2:
   version "1.18.2"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.18.2.tgz#6823e7c5900017b4bd3acf46fe9ac4b4d7bda9ea"