3.3.0-2

Revert 37bbd82

3.3.0-1

New Features

• Supports defining multiple button template:

  type: custom:button-card
  template:
    - template1
    - template2

  The button templates will be applied in the order they are defined: template2 will be merged with template1 and then the local config will be merged with the result. You can still chain templates together (ie. define template in a button-card template. It will follow the path recursively).

Bug Fixes

• Fixes when a timer entity was defined and the button was in a vertical-stack/horizontal-stack

3.3.0-0

Breaking Change

• triggers_update is a new field that enables you to define which entities should trigger an update of the card itself (this rule doesn't apply for nested cards in custom_fields as they are always updated with the latest state. This is expected and fast!). Before 3.3.0, if you were using javascript [[[ ]]] templates, the card would update itself everytime ANY entity was updated in HA introducing a lot of load on the browser.
  If you don't have javascript [[[ ]]] templates in your config, you don't need to do anything, else read further.
  If unset, the card will parse your code and look for entities that it can match (it only matches states['ENTITY_ID']) so:

   return states['switch.myswitch'].state // will match switch.myswitch
   // but
   const test = switch.myswitch
   return states[test].state // will not match anything

  In this second case, you have 2 options:
  • Set the value of triggers_update to all (This was the behavior of button-card < 3.3.0)

    triggers_update: all

  • Set the value of triggers_update to a list of entities. When any of the entities in this list is updated, the card will be updated. The logic is the same as the internal home-assistant * templates integration (see here for example):

    type: custom:button-card
    entity: sensor.mysensor # No need to repeat this one in the triggers_update, it is added by default
    triggers_update:
      - switch.myswitch
      - light.mylight

BugFixes

• The button might not have been clickable in some cases when the action of a *_action was a template.
• Nested cards should be updated properly now when there is a state change.

Other stuff

• A lot of refactor in the code, I hope I didn't break too much things 😄

3.2.3

Bug Fixes

• Support for >= 0.107

3.2.2

Bugfixes

• Lock disappearing when used with decluttering-card (Might fix #298)
• The default tap_action is now toggle only for entities which support toggle, else it's more-info

3.2.1

Bugfixes

• Fix tap while scrolling (sorry, sorry, sorry 🙏)
• Fix some issues I had with vertical-stack-in-card

3.2.0

New Features

• Support for html`<element hass=${hass}></element>` in templates (Fix #283)
  You can now do things like this in templates:

        return html`
          <ha-relative-time
            id="label"
            class="ellipsis"
            .hass="${hass}"
            .datetime="${entity.last_changed}"
          ></ha-relative-time>`

• Support for camera live streams (Requires the stream: component to be enabled in HA's config (Fix #277)

  type: custom:button-card
  entity: camera.test
  show_live_stream: true

• Support for an alternative state (will override the state field) using the state_display parameter (Fix #266)

  state_display: >
    [[[ return entity.state + ': ' + Math.round(entity.attributes.brightness / 2.55) + '%']]]

• Icons now follow the device_class (Fix #265)

• Support for templates in variables (Fix #294, Fix #281)

• New extra_styles config option which allows you to inject CSS (especially useful to inject CSS animations, but should also work for embedded cards). This field supports templating also (Fix #287):

  

  - type: custom:button-card
    name: Change Background
    aspect_ratio: 2/1
    extra_styles: |
      @keyframes bgswap1 {
        0% {
          background-image: url("/local/background1.jpg");
        }
        25% {
          background-image: url("/local/background1.jpg");
        }
        50% {
          background-image: url("/local/background2.jpg");
        }
        75% {
          background-image: url("/local/background2.jpg");
        }
        100% {
          background-image: url("/local/background1.jpg");
        }
      }
    styles:
      card:
        - animation: bgswap1 10s linear infinite
        - background-size: cover
      name:
        - color: white

Bug Fixes

• tap-action: more-info doesn't work, with an entity defined in the action fields options only (Fix #284)

Others

• Integrated latest core updates on handling *_actions (tap, hold, double tap, etc...). If anything breaks, please tell me.

3.1.1

Bugfix

• Attempt to fix double clicks on iPhones and older iPads 🤷‍♂

3.1.0

New Features

• Support for https://cast.home-assistant.io (Fix #262)
• Support for templates in custom_fields card's config (Fix #239). This let you use button-card templates with variable card configurations.

  entity: light.my_light
  custom_fields:
    slider:
      card:
        type: custom:slider-entity-row
        full_row: true
        hide_state: true
        hide_when_off: true
        entity: '[[[ return entity.entity_id ]]]' # Will be light.my_light

• Support for variables in the templates and config templates (Fix #245)

  button_card_templates:
    variable_test:
      variables:
        var_name: "var_value"
        var_name2: "var_value2"
      name: '[[[ return variables.var_name ]]]'
  
  [...]
  
  - type: custom:button-card
    template: variable_test
    entity: sensor.test
    # name will be "var_value"
  
  - type: custom:button-card
    template: variable_test
    entity: sensor.test
    variables:
      var_name: "My local Value"
  # name will be "My local Value"

Bugfix

• Fix #247: iPad OS was double clicking on every button... Rotten Apple!

3.0.0

Breaking Changes (& New Features)

• Drop support for custom_updater, please upgrade to HACS
• URL actions field has been renamed to url_path from url:
  old:

  xxx_action:
    action: url
    url: https://www.google.com

  new:

  xxx_action:
    action: url
    url_path: https://www.google.com

• dbltap_action has been renamed to double_tap_action to match core (Fix #232)
• confirmation is now an object and supports templates, and you can specify a different confirmation object for each action. You can also specify exempted users. See confirmation doc for more info (Fix #228, Fix #217):

  confirmation: # If defined, this will apply to all the actions
    text: Are you sure?
    exemptions:
      - user: befc8496799848bda1824f2a8111e30a
  tap_action:
    confirmation:
      # Confirmation only for tap_action.
      # If a default confirmation is defined, it will be override it.
      text: '[[[ return `Toggle ${entity.attributes.friendly_name}? ]]]'
      exemptions:
        - user: befc8496799848bda1824f2a8111e30a

• lock is now an object and unlock_users is deprecated.
  lock.enabled supports templating and you can set the duration of the unlocked state.
  You can define the type of clicks which will unlock the button with lock.unlock. Possible values are tap, hold and double_tap. Default is tap
  See lock doc for more info (Fix #192, Fix #220, Fix #230).
  Old:

  lock: true
  unlock_users:
    - test

  New:

  lock:
    enabled: '[[[ return entity.state === 'on'; ]]]'
    unlock: hold
    duration: 10
    exemptions:
      - username: test
      - user: befc8496799848bda1824f2a8111e30a

New Features

• The version of the card is displayed in the javascript console of your browser. Please verify if you're running the latest version before opening a bug report. If not, update and/or clear your cache:
  
• You can now embed any card in the custom fields 🎉 (Fix #209). Note that to remove the box-shadow for specific cards, use card-mod.
  

      - type: custom:button-card
        aspect_ratio: 1/1
        custom_fields:
          graph:
            card:
              type: sensor
              entity: sensor.sensor1
              graph: line
              # style is used by card-mod
              style: |
                ha-card {
                  box-shadow: none;
                }
        styles:
          custom_fields:
            graph:
              - filter: opacity(50%)
              - overflow: unset
          card:
            - overflow: unset
          grid:
            - grid-template-areas: '"i" "n" "graph"'
            - grid-template-columns: 1fr
            - grid-template-rows: 1fr min-content min-content
  
        entity: light.test_light
        hold_action:
          action: more-info

Fixes

• Fix support for Safari 10 (Fix #221)