[Example] +/- buttons

[MrBearPresident]

type: custom:bubble-card
card_type: button
button_type: state
entity: input_number.help_house_testnumber
styles: |-
  .bubble-sub-button-1, .bubble-sub-button-2{
    cursor: pointer !important;
  }

  ${(() => {
   //Delete all old eventListeners
   if(card.querySelector('.bubble-sub-button-1').classList.contains('ExtraListener')){
      let ogNode = card.querySelector('.bubble-sub-button-1');
      let newNode = ogNode.cloneNode(true);
      parent = ogNode.parentNode;
      parent.replaceChild(newNode,ogNode);
    }
    
    card.querySelector('.bubble-sub-button-1').addEventListener("click", function() {
      let value = Math.round(hass.states[entity].state) + 1;
      hass.callService('input_number', 'set_value', {entity_id: entity,value: value});
    });
    card.querySelector('.bubble-sub-button-1').classList.add('ExtraListener');

   //Delete all old eventListeners
   if(card.querySelector('.bubble-sub-button-2').classList.contains('ExtraListener')){
      let ogNode = card.querySelector('.bubble-sub-button-2');
      let newNode = ogNode.cloneNode(true);
      parent = ogNode.parentNode;
      parent.replaceChild(newNode,ogNode);
    }
    
    card.querySelector('.bubble-sub-button-2').addEventListener("click", function() {
      let value = Math.round(hass.states[entity].state) - 1;
      hass.callService('input_number', 'set_value', {entity_id: entity,value: value});
    });
    card.querySelector('.bubble-sub-button-2').classList.add('ExtraListener');


  })()}
sub_button:
  - entity: input_number.help_house_testnumber
    show_icon: true
    state_background: false
    show_background: true
    icon: mdi:plus
    tap_action:
      action: none
    name: Plus
  - entity: input_number.help_house_testnumber
    name: Minus
    icon: mdi:minus
    state_background: false
    tap_action:
      action: none
grid_options:
  columns: full

[Clooos]

Nice! But this template seems not optimized correctly, what I see is that the event listeners are added/removed after each executions.

[MrBearPresident]

I first did it similar to this. #572 (comment)
This sets the Event Listener at build, and gives it an extra class.

But then you get stuck with old data in the hass entity.
So you would need to access a sort-off global variable. This is not possible, so this looked like the best method to achieve the goal.

Downside is that you don't have the possibility to have long/double press on the sub-button

[Clooos]

The best way is to set a flag variable directly in the card variable, like card.eventsAdded, this way it will be added only once, and if the card is removed the variable will be reset.

[Menelao147]

What is the advantage of using your example instead of this one?

type: custom:bubble-card
card_type: button
button_type: state
entity: input_number.massimo_assorbimento_auto
show_state: true
name: Corrente massima
scrolling_effect: false
icon: mdi:battery-charging-high
force_icon: false
sub_button:
  - entity: input_number.massimo_assorbimento_auto
    tap_action:
      action: call-service
      target:
        entity_id: entity
      service: input_number.decrement
    show_background: true
    icon: mdi:minus
    state_background: false
  - entity: input_number.massimo_assorbimento_auto
    tap_action:
      action: call-service
      target:
        entity_id: entity
      service: input_number.increment
    icon: mdi:plus
    state_background: false
card_layout: normal

[MrBearPresident]

This is a showcase this can be used for more than only input_numbers. For numbers/volume/lights you don't have in-/decrement. So this could be a way around that.

For input_numbers I would even advice yours. It is more clear what should happen.

This would work similar as the scripts from #1103.
The advantage over that is that you don't need a script.
The downside is you only have tap action.