Support action fire-dom-event

[Cheerpipe]

Checklist:

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

Release with the issue: First, i am not sure if this is a bug or just a missing feature. I am trying to show a card_mod popup from a button service call but it does nothing.

This is the minimal code i am trying to show the popup:

            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  size: normal
                  content:

and this is the complete test card:

type: tile
entity: light.wled_salon_fx
features:
  - type: custom:service-call
    entries:
      - type: button
        icon: mdi:palette-swatch
        label: Paletas
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              size: normal
              content: null

This should show a empty popup but instead it does nothing. This tap_action code works well on custom:button-card and other cards with tap_action.

Last working release (if known): n/a

Browser and Operating System: Windows 11 with latest versions of Google Chrome and Edge Chromium. Also tested on an android phone with Chrome

Description of problem: fire-dom-event is not working or is not supported but button service call

Javascript errors shown in the web inspector (if applicable): No console/js errors.

Your Full Remote Config

type: tile
entity: light.wled_salon_fx
features:
  - type: custom:service-call
    entries:
      - type: button
        icon: mdi:palette-swatch
        label: Paletas
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              size: normal
              content: null

Additional information: n/a

Thanks in advance

[Nerwyn]

fire-dom-event is not a valid action as described by both the README and the Home Assistant actions documentation. I'd have to figure out how Home Assistant is handling it and add it in a future release.

[irakhlin]

@Nerwyn I am sure you may have already seen these examples but just wanted to point them out, most seem to be piggybacking off the implementation for this in custom button card here: Support for fire-dom-event (f4fcbfe), closes #429

Here are a few implementations I've come across in various custom cards: mini-climate-card mini-graph-card

It looks like the action is dependent on card mod being installed and that is what is handling the action as opposed to the actions built into home assistant?

[irakhlin]

@Nerwyn I took a quick pass at this, granted typescript is not my forte but it does work https://github.com/irakhlin/service-call-tile-feature/commit/403ff97eda0c42989074f07098eb3850aefd1773

Tested it with this configuration:

type: custom:service-call
entries:
  - type: button
    icon: mdi:ceiling-fan
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          deviceID: THIS
          title: Testie Test
          content: Test

If you want I can submit a PR, or feel free to rewrite it cleaner :)

[Nerwyn]

You can submit a PR since I have a few comments, but make sure the target is the dev branch. It may be a bit until I act on or release it since I was also working on another feature and had to pause that since I've been busy with job interviews.

[Nerwyn]

Implemented by #23. Will close this issue once the minor release is out.

[Nerwyn]

Works for me in the latest alpha!

type: custom:service-call
entries:
  - type: button
    icon: mdi:map
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.more_info
        data:
          large: true
          entity: zone.home
          ignore_popup_card: false
        target:
          entity: THIS

Also this is a good place to show off my popup card card-mod styles so that it is large but doesn't cover the entire screen, making it look seamless and easy to exit out of by clicking on the edges:

card_mod:
  style: |
    ha-dialog {
      --mdc-dialog-min-width: 90vw !important;
      --mdc-dialog-min-height: fit-content !important;
      --mdc-dialog-max-width: var(--mdc-dialog-min-width) !important;
      --mdc-dialog-max-height:  var(--mdc-dialog-min-height) !important;
      --ha-dialog-border-radius: var(--ha-card-border-radius) !important;
      --vertical-align-dialog: center !important;
      --header-height: 5vh !important;
      --footer-height: var(--header-height) !important;
      --padding-y: 8px !important;
    }
    .content {
      height: fit-content !important;
      max-height: 90vh !important
    }

[irakhlin]

@Nerwyn Awesome, Love the examples.

[Cheerpipe]

Thanks for your work. Your card is becoming a must have for my dashboards.

[Nerwyn]

@Cheerpipe @irakhlin if the latest beta works fine for y'all I'm going to release 3.3.0 in the next few days.

[Cheerpipe]

Hi.

I have been using latest beta for a few days without issues. Popups works well on my side.

Thanks again for your great work.

[Nerwyn]

Released 3.3.0