YAML not generated correctly

[patienttruth]

Checklist:

• [x ] I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:
V3.3.0
Last working release (if known):
NA
Browser and Operating System:

Librewolf, Windows 10

Description of problem:

1. I created a custom slider card to control lights.
2. I set the light entity
3. Under icon I set the action to "Call Service"
4. Set Service to "light.turn_on".
5. Set Target to "light.example_light_entity".
6. Test by clicking light bulb icon
7. Result:
   
8. Code generated:

type: custom:slider-button-card
entity: light.example_light_entity
slider:
  direction: left-right
  background: gradient
  use_state_color: true
  use_percentage_bg_opacity: false
  show_track: false
  toggle_on_click: false
  force_square: false
  show_attribute: false
show_name: true
show_state: true
compact: false
icon:
  show: true
  use_state_color: true
  tap_action:
    action: call-service
    service: light.turn_on
    service_data:
      entity_id: light.example_light_entity
  icon: ''
action_button:
  mode: toggle
  icon: mdi:power
  show: true
  show_spinner: true
  tap_action:
    action: toggle

9. Do a bunch of troubleshooting...
10. Find list of YAML on Github
11. modify "target:" to "service_data:"

type: custom:slider-button-card
entity: light.example_light_entity
slider:
  direction: left-right
  background: gradient
  use_state_color: true
  use_percentage_bg_opacity: false
  show_track: false
  toggle_on_click: false
  force_square: false
  show_attribute: false
show_name: true
show_state: true
compact: false
icon:
  show: true
  use_state_color: true
  tap_action:
    action: call-service
    service: light.turn_on
    service_data:
      entity_id: light.example_light_entity
  icon: ''
action_button:
  mode: toggle
  icon: mdi:power
  show: true
  show_spinner: true
  tap_action:
    action: toggle

12. Icon calls service properly.

So, I'm not sure if it's HA generating the YAML or the card generating it but depending on a different (possibly older) syntax, but it's not smooth and without an explanation in docs (that I found), it took me a bit to figure it out. I don't have the knowledge to dive into the code on this one, but just wanted to make mention in case anyone has the same issue, or is interested in finding a solution outside of manually changing the YAML each time a visual edit is made in that area of the card.

Thanks to everyone maintaining this! You all are awesome and appreciated. I wish I could be more helpful that just bringing this up.

Javascript errors shown in the web inspector (if applicable):

Additional information:

[rohankapoorcom]

I think the visual editor for the card is broken, but haven't had a chance to debug and fix it yet.

[patienttruth]

I think the visual editor for the card is broken, but haven't had a chance to debug and fix it yet.

Right on. Thanks for everything, just wanted to report so it can be on the radar.

[patienttruth]

I think the visual editor for the card is broken, but haven't had a chance to debug and fix it yet.

Right on. Thanks for everything.