Call services from frontend with fire-dom-event

js/plugin/main.ts

@@ -29,7 +29,7 @@ import pjson from "../../package.json";
   - Commands
     x Rename browser_mod commands to browser_mod services
     x Framework
-    - ll-custom handling
+    x ll-custom handling
     - Commands
       x popup
       x close_popup
@@ -40,8 +40,9 @@ import pjson from "../../package.json";
       - screensaver
       x sequence
       x delay
+      - javascript eval
       - toast?
-    - Redesign services to target devices
+    x Redesign services to target devices
   - frontend editor for popup cards
     - also screensavers
   - Tweaks
@@ -73,12 +74,6 @@ export class BrowserMod extends ServicesMixin(
     super();
     this.connect();
 
-    // document.body.addEventListener("ll-custom", (ev) => {
-    //   if ((ev as CustomEvent).detail.browser_mod) {
-    //     this.msg_callback((ev as CustomEvent).detail.browser_mod);
-    //   }
-    // });
-
     console.info(
       `%cBROWSER_MOD ${pjson.version} IS INSTALLED
     %cBrowserID: ${this.browserID}`,

js/plugin/popups.ts

@@ -161,7 +161,7 @@ class BrowserModPopup extends LitElement {
         --mdc-dialog-content-ink-color: var(--primary-text-color);
         --justify-action-buttons: space-between;
 
-        --mdc-dialog-box-shadow: 0px 0px 0px var(--ha-card-border-width, 1px)
+        --mdc-dialog-box-shadow: 0px 0px 0px var(--ha-card-border-width, 2px)
           var(--ha-card-border-color, var(--divider-color, #e0e0e0));
         --ha-dialog-border-radius: 8px;
         --mdc-theme-surface: var(

js/plugin/services.ts

@@ -52,6 +52,12 @@ export const ServicesMixin = (SuperClass) => {
           });
         });
       }
+
+      document.body.addEventListener("ll-custom", (ev: CustomEvent) => {
+        if (ev.detail.browser_mod) {
+          this._service_action(ev.detail.browser_mod);
+        }
+      });
     }
 
     async _service_action({ service, data }) {