Call a service: Split remaining service_data's into data and target (#21440)

* service_data into data and target

* Add other possible targets

src/components/buttons/ha-call-service-button.ts

@@ -1,5 +1,6 @@
 import { LitElement, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators";
+import { HassServiceTarget } from "home-assistant-js-websocket";
 import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
 import "./ha-progress-button";
 import { HomeAssistant } from "../../types";
@@ -17,7 +18,9 @@ class HaCallServiceButton extends LitElement {
 
   @property() public service!: string;
 
-  @property({ type: Object }) public serviceData = {};
+  @property({ type: Object }) public target!: HassServiceTarget;
+
+  @property({ type: Object }) public data = {};
 
   @property() public confirmation?;
 
@@ -39,7 +42,8 @@ class HaCallServiceButton extends LitElement {
     const eventData = {
       domain: this.domain,
       service: this.service,
-      serviceData: this.serviceData,
+      data: this.data,
+      target: this.target,
       success: false,
     };
 
@@ -47,7 +51,12 @@ class HaCallServiceButton extends LitElement {
       this.shadowRoot!.querySelector("ha-progress-button")!;
 
     try {
-      await this.hass.callService(this.domain, this.service, this.serviceData);
+      await this.hass.callService(
+        this.domain,
+        this.service,
+        this.data,
+        this.target
+      );
       this.progress = false;
       progressElement.actionSuccess();
       eventData.success = true;
@@ -85,7 +94,8 @@ declare global {
     "hass-service-called": {
       domain: string;
       service: string;
-      serviceData: object;
+      target: HassServiceTarget;
+      data: object;
       success: boolean;
     };
   }