3.1.0

README.md

@@ -36,7 +36,6 @@
 | min | number | 0 | Defines minimum value of the bar.
 | name | string | none | Defines custom entity name.
 | positions | object | none | Defines the positions of the card elements. See [Positions Options](#positions-options).
-| service_options | object | none | A list of service call options. Should include `domain`, `service`, `data`
 | severity | object | none | A list of severity values. See [Severity Options](#severity-options).
 | tap_action | string | info | Sets the action when tapping the bar. `info`, `service`
 | target | number | none | Defines and enables target marker value.

package.json

@@ -18,7 +18,8 @@
     "custom-card-helpers": "^1.3.9",
     "home-assistant-js-websocket": "^4.4.0",
     "lit-element": "^2.2.1",
-    "lit-html": "^1.1.2"
+    "lit-html": "^1.1.2",
+    "yaml": "^1.9.0"
   },
   "devDependencies": {
     "@babel/core": "^7.6.4",

src/action-handler-directive.ts

@@ -164,7 +164,6 @@ class ActionHandler extends HTMLElement implements ActionHandler {
   }
 }
 
-// TODO You need to replace all instances of "action-handler-boilerplate" with "action-handler-<your card name>"
 customElements.define('action-handler-bar', ActionHandler);
 
 const getActionHandler = (): ActionHandler => {

src/bar-card.ts

@@ -38,7 +38,7 @@ export class BarCard extends LitElement {
 
   @property() public hass?: HomeAssistant;
   @property() private _config!: BarCardConfig;
-  private _configArray: BarCardConfig[] = [];
+  @property() private _configArray: BarCardConfig[] = [];
   private _stateArray: any[] = [];
   private _animationState: any[] = [];
 
@@ -69,7 +69,6 @@ export class BarCard extends LitElement {
           minmax: 'off',
           value: 'inside',
         },
-        service_options: false,
       },
       config,
     );
@@ -91,7 +90,7 @@ export class BarCard extends LitElement {
             </div>
           `
         : html`
-            <ha-card .header=${this._config.title} tabindex="0" aria-label=${`Bar: ${this._config.entity}`}>
+            <ha-card .header=${this._config.title ? this._config.title : null}>
               <div id="states" class="card-content" style="${this._config.entity_row ? 'padding: 0px;' : ''}">
                 ${this._createBarArray()}
               </div>
@@ -371,7 +370,16 @@ export class BarCard extends LitElement {
 
         // Add current bar to row array.
         currentRowArray.push(html`
-          <bar-card-card style="flex-direction: ${flexDirection}; align-items: ${alignItems};">
+          <bar-card-card
+            style="flex-direction: ${flexDirection}; align-items: ${alignItems};"
+            @action=${this._handleAction}
+            .config=${config}
+            .actionHandler=${actionHandler({
+              hasHold: hasAction(config.hold_action),
+              hasDoubleTap: hasAction(config.double_tap_action),
+              repeat: config.hold_action ? config.hold_action.repeat : undefined,
+            })}
+          >
             ${iconOutside} ${indicatorOutside} ${nameOutside}
             <bar-card-background
               style="height: ${barHeight}${typeof barHeight == 'number'
@@ -489,4 +497,10 @@ export class BarCard extends LitElement {
         return (100 * (numberValue - config.min)) / (config.max - config.min);
     }
   }
+
+  private _handleAction(ev): void {
+    if (this.hass && ev.target.config && ev.detail.action) {
+      handleAction(this, this.hass, ev.target.config, ev.detail.action);
+    }
+  }
 }

src/const.ts

@@ -1 +1 @@
-export const CARD_VERSION = '3.1.0b1';
+export const CARD_VERSION = '3.1.0';