WIP: use template selector per field

src/components/ha-service-control.ts

@@ -34,6 +34,7 @@ import {
   expandLabelTarget,
   Selector,
   TargetSelector,
+  TemplateSelector,
 } from "../data/selector";
 import { HomeAssistant, ValueChangedEvent } from "../types";
 import { documentationUrl } from "../util/documentation-url";
@@ -45,6 +46,7 @@ import "./ha-settings-row";
 import "./ha-yaml-editor";
 import type { HaYamlEditor } from "./ha-yaml-editor";
 import "./ha-service-section-icon";
+import { hasTemplate } from "../common/string/has-template";
 
 const attributeFilter = (values: any[], attribute: any) => {
   if (typeof attribute === "object") {
@@ -79,6 +81,8 @@ interface ExtHassService extends Omit<HassService, "fields"> {
   hasSelector: string[];
 }
 
+const TEMPLATE_SELECTOR: TemplateSelector = { template: {} };
+
 @customElement("ha-service-control")
 export class HaServiceControl extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -478,7 +482,8 @@ export class HaServiceControl extends LitElement {
             >${this.hass.localize(
               "ui.components.service-control.target_secondary"
             )}</span
-          ><ha-selector
+          >
+          <ha-selector
             .hass=${this.hass}
             .selector=${this._targetSelector(
               serviceData.target as TargetSelector
@@ -639,6 +644,18 @@ export class HaServiceControl extends LitElement {
               `component.${domain}.services.${serviceName}.fields.${dataField.key}.description`
             ) || dataField?.description}</span
           >
+          ${hasTemplate(this._value?.data?.[dataField.key])
+            ? html`
+                <ha-selector
+                  .selector=${TEMPLATE_SELECTOR}
+                  .key=${dataField.key}
+                  .hass=${this.hass}
+                  .value=${this._value?.data?.[dataField.key]}
+                  .disabled=${this.disabled}
+                  @value-changed=${this._serviceDataChanged}
+                ></ha-selector>
+              `
+            : html`
                 <ha-selector
                   .disabled=${this.disabled ||
                   (showOptional &&
@@ -649,13 +666,12 @@ export class HaServiceControl extends LitElement {
                   .selector=${enhancedSelector}
                   .key=${dataField.key}
                   @value-changed=${this._serviceDataChanged}
-            .value=${this._value?.data
+                  .value=${this._value?.data?.[dataField.key]}
-              ? this._value.data[dataField.key]
-              : undefined}
                   .placeholder=${dataField.default}
                   .localizeValue=${this._localizeValueCallback}
                   @item-moved=${this._itemMoved}
                 ></ha-selector>
+              `}
         </ha-settings-row>`
       : "";
   };

src/panels/developer-tools/action/developer-tools-action.ts

@@ -529,7 +529,7 @@ class HaPanelDevAction extends LitElement {
             ) {
               return false;
             }
-            return hasTemplate(val);
+            return false;
           })))
     ) {
       this._yamlMode = true;

src/panels/lovelace/common/handle-action.ts

@@ -3,6 +3,7 @@ import { navigate } from "../../../common/navigate";
 import { forwardHaptic } from "../../../data/haptics";
 import { domainToName } from "../../../data/integration";
 import { ActionConfig } from "../../../data/lovelace/config/action";
+import { callExecuteScript } from "../../../data/service";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import { showVoiceCommandDialog } from "../../../dialogs/voice-command-dialog/show-ha-voice-command-dialog";
 import { HomeAssistant } from "../../../types";
@@ -159,14 +160,11 @@ export const handleAction = async (
         forwardHaptic("failure");
         return;
       }
-      const [domain, service] = (actionConfig.perform_action ||
+      callExecuteScript(hass, {
-        actionConfig.service)!.split(".", 2);
+        action: actionConfig.perform_action || actionConfig.service,
-      hass.callService(
+        target: actionConfig.target,
-        domain,
+        data: actionConfig.data ?? actionConfig.service_data,
-        service,
+      });
-        actionConfig.data ?? actionConfig.service_data,
-        actionConfig.target
-      );
       forwardHaptic("light");
       break;
     }