feat(action): `repeat_limit` for `hold_action`

Fix #564, Fix #555

.devcontainer/ui-lovelace.yaml

@@ -1970,6 +1970,7 @@ views:
             hold_action:
               action: call-service
               repeat: 500
+              repeat_limit: 2
               service: input_number.increment
               service_data:
                 entity_id: input_number.test

README.md

@@ -140,6 +140,7 @@ All the fields support templates, see [templates](#javascript-templates).
 | `data` or `service_data` | object | none     | Any service data                                                           | Service data to include (e.g. `entity_id: media_player.bedroom`) when `action` defined as `call-service`. If your `data` requires an `entity_id`, you can use the keywork `entity`, this will actually call the service on the entity defined in the main configuration of this card. Useful for [configuration templates](#configuration-templates) |
 | `haptic`                 | string | none     | `success`, `warning`, `failure`, `light`, `medium`, `heavy`, `selection`   | Haptic feedback for the [Beta IOS App](http://home-assistant.io/ios/beta)                                                                                                                                                                                                                                                                            |
 | `repeat`                 | number | none     | eg: `500`                                                                  | For a hold_action, you can optionally configure the action to repeat while the button is being held down (for example, to repeatedly increase the volume of a media player). Define the number of milliseconds between repeat actions here.                                                                                                          |
+| `repeat_limit`           | number | none     | eg: `5`                                                                    | For Hold action and if `repeat` if defined, it will stop calling the action after the `repeat_limit` has been reached.                                                                                                                                                                                                                               |
 | `confirmation`           | object | none     | See [confirmation](#confirmation)                                          | Display a confirmation popup, overrides the default `confirmation` object                                                                                                                                                                                                                                                                            |
 
 ### Confirmation

src/action-handler.ts

@@ -24,6 +24,7 @@ export interface ActionHandlerOptions {
   hasDoubleClick?: boolean;
   disabled?: boolean;
   repeat?: number;
+  repeatLimit?: number;
 }
 
 interface ActionHandlerElement extends HTMLElement {
@@ -61,6 +62,8 @@ class ActionHandler extends HTMLElement implements ActionHandler {
 
   private isRepeating = false;
 
+  private repeatCount = 0;
+
   constructor() {
     super();
     this.ripple = document.createElement('mwc-ripple');
@@ -152,9 +155,15 @@ class ActionHandler extends HTMLElement implements ActionHandler {
           this.startAnimation(x, y);
           this.held = true;
           if (options.repeat && !this.isRepeating) {
+            this.repeatCount = 0;
             this.isRepeating = true;
             this.repeatTimeout = setInterval(() => {
               fireEvent(element, 'action', { action: 'hold' });
+              this.repeatCount++;
+              if (this.repeatTimeout && options.repeatLimit && this.repeatCount >= options.repeatLimit) {
+                clearInterval(this.repeatTimeout);
+                this.isRepeating = false;
+              }
             }, options.repeat);
           }
         }, this.holdTime);

src/button-card.ts

@@ -825,6 +825,7 @@ class ButtonCard extends LitElement {
             hasDoubleClick: this._config!.double_tap_action!.action !== 'none',
             hasHold: this._config!.hold_action!.action !== 'none',
             repeat: this._config!.hold_action!.repeat,
+            repeatLimit: this._config!.hold_action!.repeat_limit,
           })}
           .config="${this._config}"
         >

src/types/types.ts

@@ -210,6 +210,7 @@ export interface BaseActionConfig {
   action: string;
   confirmation?: ConfirmationRestrictionConfig;
   repeat?: number;
+  repeat_limit?: number;
 }
 
 export interface ConfirmationRestrictionConfig {