Convert Automation Actions to mwc/ha-form + other automation items (#11753)

2025-07-24 01:36:49 +00:00 · 2022-02-21 10:37:11 -06:00 · 2022-02-21 10:37:11 -06:00 · decc0d3e0d
commit decc0d3e0d
parent 2281f5bafa
16 changed files with 165 additions and 131 deletions
--- a/src/panels/config/automation/action/ha-automation-action-row.ts
+++ b/src/panels/config/automation/action/ha-automation-action-row.ts
@ -73,7 +73,7 @@ export const handleChangeEvent = (element: ActionElement, ev: CustomEvent) => {
  if (!name) {
    return;
  }
-  const newVal = ev.detail.value;
+  const newVal = ev.detail?.value || (ev.target as any).value;

  if ((element.action[name] || "") === newVal) {
    return;
@ -376,7 +376,7 @@ export default class HaAutomationActionRow extends LitElement {
          margin: 4px 0;
        }
        mwc-select {
-          margin-bottom: 16px;
+          margin-bottom: 24px;
        }
      `,
    ];
--- a/src/panels/config/automation/action/types/ha-automation-action-device_id.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-device_id.ts
@ -143,9 +143,12 @@ export class HaDeviceAction extends LitElement {
  }

  static styles = css`
+    ha-device-picker {
+      display: block;
+      margin-bottom: 24px;
+    }
    ha-device-action-picker {
      display: block;
-      margin-top: 8px;
    }
  `;
 }
--- a/src/panels/config/automation/action/types/ha-automation-action-event.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-event.ts
@ -1,9 +1,9 @@
-import "@polymer/paper-input/paper-input";
-import { html, LitElement, PropertyValues } from "lit";
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/entity/ha-entity-picker";
 import "../../../../../components/ha-service-picker";
+import "../../../../../components/ha-textfield";
 import "../../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../../components/ha-yaml-editor";
 import type { EventAction } from "../../../../../data/script";
@ -40,14 +40,13 @@ export class HaEventAction extends LitElement implements ActionElement {
    const { event, event_data } = this.action;

    return html`
-      <paper-input
+      <ha-textfield
        .label=${this.hass.localize(
          "ui.panel.config.automation.editor.actions.type.event.event"
        )}
-        name="event"
        .value=${event}
-        @value-changed=${this._eventChanged}
-      ></paper-input>
+        @change=${this._eventChanged}
+      ></ha-textfield>
      <ha-yaml-editor
        .hass=${this.hass}
        .label=${this.hass.localize(
@ -72,9 +71,17 @@ export class HaEventAction extends LitElement implements ActionElement {
  private _eventChanged(ev: CustomEvent): void {
    ev.stopPropagation();
    fireEvent(this, "value-changed", {
-      value: { ...this.action, event: ev.detail.value },
+      value: { ...this.action, event: (ev.target as any).value },
    });
  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-textfield {
+        display: block;
+      }
+    `;
+  }
 }

 declare global {
--- a/src/panels/config/automation/action/types/ha-automation-action-play_media.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-play_media.ts
@ -1,4 +1,3 @@
-import "@polymer/paper-input/paper-input";
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
--- a/src/panels/config/automation/action/types/ha-automation-action-repeat.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-repeat.ts
@ -1,4 +1,3 @@
-import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
@ -10,10 +9,11 @@ import {
  WhileRepeat,
 } from "../../../../../data/script";
 import { haStyle } from "../../../../../resources/styles";
-import { HomeAssistant } from "../../../../../types";
-import { Condition } from "../../../../lovelace/common/validate-condition";
+import type { HomeAssistant } from "../../../../../types";
+import type { Condition } from "../../../../lovelace/common/validate-condition";
 import "../ha-automation-action";
-import { ActionElement } from "../ha-automation-action-row";
+import "../../../../../components/ha-textfield";
+import type { ActionElement } from "../ha-automation-action-row";

 const OPTIONS = ["count", "while", "until"];

@ -53,14 +53,16 @@ export class HaRepeatAction extends LitElement implements ActionElement {
        )}
      </mwc-select>
      ${type === "count"
-        ? html`<paper-input
-            .label=${this.hass.localize(
-              "ui.panel.config.automation.editor.actions.type.repeat.type.count.label"
-            )}
-            name="count"
-            .value=${(action as CountRepeat).count || "0"}
-            @value-changed=${this._countChanged}
-          ></paper-input>`
+        ? html`
+            <ha-textfield
+              .label=${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.type.repeat.type.count.label"
+              )}
+              name="count"
+              .value=${(action as CountRepeat).count || "0"}
+              @change=${this._countChanged}
+            ></ha-textfield>
+          `
        : ""}
      ${type === "while"
        ? html` <h3>
@ -142,7 +144,7 @@ export class HaRepeatAction extends LitElement implements ActionElement {
  }

  private _countChanged(ev: CustomEvent): void {
-    const newVal = ev.detail.value;
+    const newVal = (ev.target as any).value;
    if ((this.action.repeat as CountRepeat).count === newVal) {
      return;
    }
--- a/src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger.ts
@ -1,6 +1,5 @@
-import "@polymer/paper-input/paper-input";
-import "@polymer/paper-input/paper-textarea";
-import { html, LitElement } from "lit";
+import "../../../../../components/ha-textfield";
+import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-formfield";
@ -26,14 +25,14 @@ export class HaWaitForTriggerAction
    const { wait_for_trigger, continue_on_timeout, timeout } = this.action;

    return html`
-      <paper-input
+      <ha-textfield
        .label=${this.hass.localize(
          "ui.panel.config.automation.editor.actions.type.wait_for_trigger.timeout"
        )}
        .name=${"timeout"}
-        .value=${timeout}
-        @value-changed=${this._valueChanged}
-      ></paper-input>
+        .value=${timeout || ""}
+        @change=${this._valueChanged}
+      ></ha-textfield>
      <br />
      <ha-formfield
        .label=${this.hass.localize(
@ -63,6 +62,15 @@ export class HaWaitForTriggerAction
  private _valueChanged(ev: CustomEvent): void {
    handleChangeEvent(this, ev);
  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-textfield {
+        display: block;
+        margin-bottom: 24px;
+      }
+    `;
+  }
 }

 declare global {
--- a/src/panels/config/automation/action/types/ha-automation-action-wait_template.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-wait_template.ts
@ -1,66 +1,60 @@
-import "@polymer/paper-input/paper-input";
-import "@polymer/paper-input/paper-textarea";
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { fireEvent } from "../../../../../common/dom/fire_event";
-import { WaitAction } from "../../../../../data/script";
-import { HomeAssistant } from "../../../../../types";
-import { ActionElement, handleChangeEvent } from "../ha-automation-action-row";
+import type { HaFormSchema } from "../../../../../components/ha-form/types";
+import type { WaitAction } from "../../../../../data/script";
+import type { HomeAssistant } from "../../../../../types";
+import type { ActionElement } from "../ha-automation-action-row";
+import "../../../../../components/ha-form/ha-form";
+
+const SCHEMA: HaFormSchema[] = [
+  {
+    name: "wait_template",
+    selector: {
+      text: {
+        multiline: true,
+      },
+    },
+  },
+  {
+    name: "timeout",
+    required: false,
+    selector: {
+      text: {},
+    },
+  },
+  {
+    name: "continue_on_timeout",
+    selector: { boolean: {} },
+  },
+];

@customElement("ha-automation-action-wait_template")
 export class HaWaitAction extends LitElement implements ActionElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

-  @property() public action!: WaitAction;
+  @property({ attribute: false }) public action!: WaitAction;

  public static get defaultConfig() {
    return { wait_template: "" };
  }

  protected render() {
-    const { wait_template, timeout, continue_on_timeout } = this.action;
-
    return html`
-      <paper-textarea
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.actions.type.wait_template.wait_template"
-        )}
-        name="wait_template"
-        .value=${wait_template}
-        @value-changed=${this._valueChanged}
-        dir="ltr"
-      ></paper-textarea>
-      <paper-input
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.actions.type.wait_template.timeout"
-        )}
-        .name=${"timeout"}
-        .value=${timeout}
-        @value-changed=${this._valueChanged}
-      ></paper-input>
-      <br />
-      <ha-formfield
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.actions.type.wait_template.continue_timeout"
-        )}
-      >
-        <ha-switch
-          .checked=${continue_on_timeout}
-          @change=${this._continueChanged}
-        ></ha-switch>
-      </ha-formfield>
+      <ha-form
+        .hass=${this.hass}
+        .data=${this.action}
+        .schema=${SCHEMA}
+        .computeLabel=${this._computeLabelCallback}
+      ></ha-form>
    `;
  }

-  private _continueChanged(ev) {
-    fireEvent(this, "value-changed", {
-      value: { ...this.action, continue_on_timeout: ev.target.checked },
-    });
-  }
-
-  private _valueChanged(ev: CustomEvent): void {
-    handleChangeEvent(this, ev);
-  }
+  private _computeLabelCallback = (schema: HaFormSchema): string =>
+    this.hass.localize(
+      `ui.panel.config.automation.editor.actions.type.wait_template.${
+        schema.name === "continue_on_timeout" ? "continue_timeout" : schema.name
+      }`
+    );
 }

 declare global {
--- a/src/panels/config/automation/condition/ha-automation-condition-editor.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition-editor.ts
@ -147,7 +147,7 @@ export default class HaAutomationConditionEditor extends LitElement {
    haStyle,
    css`
      mwc-select {
-        margin-bottom: 16px;
+        margin-bottom: 24px;
      }
    `,
  ];
--- a/src/panels/config/automation/condition/types/ha-automation-condition-state.ts
+++ b/src/panels/config/automation/condition/types/ha-automation-condition-state.ts
@ -9,6 +9,7 @@ import type { StateCondition } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
 import { forDictStruct } from "../../structs";
 import type { ConditionElement } from "../ha-automation-condition-row";
+import "../../../../../components/ha-form/ha-form";

 const stateConditionStruct = object({
  condition: literal("state"),
--- a/src/panels/config/automation/condition/types/ha-automation-condition-sun.ts
+++ b/src/panels/config/automation/condition/types/ha-automation-condition-sun.ts
@ -7,6 +7,7 @@ import type { HomeAssistant } from "../../../../../types";
 import type { ConditionElement } from "../ha-automation-condition-row";
 import type { LocalizeFunc } from "../../../../../common/translations/localize";
 import type { HaFormSchema } from "../../../../../components/ha-form/types";
+import "../../../../../components/ha-form/ha-form";

@customElement("ha-automation-condition-sun")
 export class HaSunCondition extends LitElement implements ConditionElement {
--- a/src/panels/config/automation/condition/types/ha-automation-condition-time.ts
+++ b/src/panels/config/automation/condition/types/ha-automation-condition-time.ts
@ -7,6 +7,7 @@ import type { HomeAssistant } from "../../../../../types";
 import type { ConditionElement } from "../ha-automation-condition-row";
 import type { LocalizeFunc } from "../../../../../common/translations/localize";
 import type { HaFormSchema } from "../../../../../components/ha-form/types";
+import "../../../../../components/ha-form/ha-form";

 const DAYS = {
  mon: 1,
--- a/src/panels/config/automation/ha-automation-editor.ts
+++ b/src/panels/config/automation/ha-automation-editor.ts
@ -9,7 +9,6 @@ import {
 } from "@mdi/js";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-input/paper-textarea";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
  css,
@ -201,7 +200,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
        ${this._config
          ? html`
              ${this.narrow
-                ? html` <span slot="header">${this._config?.alias}</span> `
+                ? html`<span slot="header">${this._config?.alias}</span>`
                : ""}
              <div
                class="content ${classMap({
@ -210,27 +209,31 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                @subscribe-automation-config=${this._subscribeAutomationConfig}
              >
                ${this._errors
-                  ? html` <div class="errors">${this._errors}</div> `
+                  ? html`<div class="errors">${this._errors}</div>`
                  : ""}
                ${this._mode === "gui"
                  ? html`
                      ${"use_blueprint" in this._config
-                        ? html`<blueprint-automation-editor
-                            .hass=${this.hass}
-                            .narrow=${this.narrow}
-                            .isWide=${this.isWide}
-                            .stateObj=${stateObj}
-                            .config=${this._config}
-                            @value-changed=${this._valueChanged}
-                          ></blueprint-automation-editor>`
-                        : html`<manual-automation-editor
-                            .hass=${this.hass}
-                            .narrow=${this.narrow}
-                            .isWide=${this.isWide}
-                            .stateObj=${stateObj}
-                            .config=${this._config}
-                            @value-changed=${this._valueChanged}
-                          ></manual-automation-editor>`}
+                        ? html`
+                            <blueprint-automation-editor
+                              .hass=${this.hass}
+                              .narrow=${this.narrow}
+                              .isWide=${this.isWide}
+                              .stateObj=${stateObj}
+                              .config=${this._config}
+                              @value-changed=${this._valueChanged}
+                            ></blueprint-automation-editor>
+                          `
+                        : html`
+                            <manual-automation-editor
+                              .hass=${this.hass}
+                              .narrow=${this.narrow}
+                              .isWide=${this.isWide}
+                              .stateObj=${stateObj}
+                              .config=${this._config}
+                              @value-changed=${this._valueChanged}
+                            ></manual-automation-editor>
+                          `}
                    `
                  : this._mode === "yaml"
                  ? html`
--- a/src/panels/config/automation/ha-automation-picker.ts
+++ b/src/panels/config/automation/ha-automation-picker.ts
@ -7,7 +7,6 @@ import {
  mdiPlayCircleOutline,
  mdiPlus,
 } from "@mdi/js";
-import "@polymer/paper-tooltip/paper-tooltip";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
--- a/src/panels/config/automation/manual-automation-editor.ts
+++ b/src/panels/config/automation/manual-automation-editor.ts
@ -1,11 +1,12 @@
 import "@material/mwc-button/mwc-button";
-import "@polymer/paper-input/paper-textarea";
 import { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/entity/ha-entity-toggle";
 import "../../../components/ha-card";
+import "../../../components/ha-textarea";
+import "../../../components/ha-textfield";
 import {
  Condition,
  ManualAutomationConfig,
@ -14,7 +15,7 @@ import {
 } from "../../../data/automation";
 import { Action, MODES, MODES_MAX } from "../../../data/script";
 import { haStyle } from "../../../resources/styles";
-import { HomeAssistant } from "../../../types";
+import type { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 import "../ha-config-section";
 import "./action/ha-automation-action";
@ -36,7 +37,7 @@ export class HaManualAutomationEditor extends LitElement {
  protected render() {
    return html`<ha-config-section vertical .isWide=${this.isWide}>
        ${!this.narrow
-          ? html` <span slot="header">${this.config.alias}</span> `
+          ? html`<span slot="header">${this.config.alias}</span>`
          : ""}
        <span slot="introduction">
          ${this.hass.localize(
@ -45,16 +46,16 @@ export class HaManualAutomationEditor extends LitElement {
        </span>
        <ha-card>
          <div class="card-content">
-            <paper-input
+            <ha-textfield
              .label=${this.hass.localize(
                "ui.panel.config.automation.editor.alias"
              )}
              name="alias"
-              .value=${this.config.alias}
-              @value-changed=${this._valueChanged}
+              .value=${this.config.alias || ""}
+              @change=${this._valueChanged}
            >
-            </paper-input>
-            <paper-textarea
+            </ha-textfield>
+            <ha-textarea
              .label=${this.hass.localize(
                "ui.panel.config.automation.editor.description.label"
              )}
@ -62,9 +63,9 @@ export class HaManualAutomationEditor extends LitElement {
                "ui.panel.config.automation.editor.description.placeholder"
              )}
              name="description"
-              .value=${this.config.description}
-              @value-changed=${this._valueChanged}
-            ></paper-textarea>
+              .value=${this.config.description || ""}
+              @change=${this._valueChanged}
+            ></ha-textarea>
            <p>
              ${this.hass.localize(
                "ui.panel.config.automation.editor.modes.description",
@ -98,16 +99,18 @@ export class HaManualAutomationEditor extends LitElement {
              )}
            </mwc-select>
            ${this.config.mode && MODES_MAX.includes(this.config.mode)
-              ? html`<paper-input
-                  .label=${this.hass.localize(
-                    `ui.panel.config.automation.editor.max.${this.config.mode}`
-                  )}
-                  type="number"
-                  name="max"
-                  .value=${this.config.max || "10"}
-                  @value-changed=${this._valueChanged}
-                >
-                </paper-input>`
+              ? html`
+                  <ha-textfield
+                    .label=${this.hass.localize(
+                      `ui.panel.config.automation.editor.max.${this.config.mode}`
+                    )}
+                    type="number"
+                    name="max"
+                    .value=${this.config.max || "10"}
+                    @change=${this._valueChanged}
+                  >
+                  </ha-textfield>
+                `
              : html``}
          </div>
          ${this.stateObj
@ -243,7 +246,7 @@ export class HaManualAutomationEditor extends LitElement {
    if (!name) {
      return;
    }
-    let newVal = ev.detail.value;
+    let newVal = target.value;
    if (target.type === "number") {
      newVal = Number(newVal);
    }
--- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
@ -14,6 +14,7 @@ import { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/ha-button-menu";
 import "../../../../components/ha-card";
 import "../../../../components/ha-alert";
+import "../../../../components/ha-textfield";
 import "../../../../components/ha-icon-button";
 import type { Trigger } from "../../../../data/automation";
 import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
@ -200,14 +201,14 @@ export default class HaAutomationTriggerRow extends LitElement {

                ${showId
                  ? html`
-                      <paper-input
+                      <ha-textfield
                        .label=${this.hass.localize(
                          "ui.panel.config.automation.editor.triggers.id"
                        )}
-                        .value=${this.trigger.id}
-                        @value-changed=${this._idChanged}
+                        .value=${this.trigger.id || ""}
+                        @change=${this._idChanged}
                      >
-                      </paper-input>
+                      </ha-textfield>
                    `
                  : ""}
                <div @ui-mode-not-available=${this._handleUiModeNotAvailable}>
@ -287,7 +288,7 @@ export default class HaAutomationTriggerRow extends LitElement {
  }

  private _idChanged(ev: CustomEvent) {
-    const newId = ev.detail.value;
+    const newId = (ev.target as any).value;
    if (newId === (this.trigger.id ?? "")) {
      return;
    }
@ -333,7 +334,11 @@ export default class HaAutomationTriggerRow extends LitElement {
          --mdc-theme-text-primary-on-background: var(--disabled-text-color);
        }
        mwc-select {
-          margin-bottom: 16px;
+          margin-bottom: 24px;
+        }
+        ha-textfield {
+          display: block;
+          margin-bottom: 24px;
        }
      `,
    ];
--- a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts
+++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts
@ -1,7 +1,7 @@
-import "@polymer/paper-input/paper-input";
-import { html, LitElement } from "lit";
+import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
+import "../../../../../components/ha-textfield";
 import "../../../../../components/ha-yaml-editor";
 import "../../../../../components/user/ha-users-picker";
 import { EventTrigger } from "../../../../../data/automation";
@ -24,14 +24,14 @@ export class HaEventTrigger extends LitElement implements TriggerElement {
  protected render() {
    const { event_type, event_data, context } = this.trigger;
    return html`
-      <paper-input
+      <ha-textfield
        .label=${this.hass.localize(
          "ui.panel.config.automation.editor.triggers.type.event.event_type"
        )}
        name="event_type"
        .value=${event_type}
-        @value-changed=${this._valueChanged}
-      ></paper-input>
+        @change=${this._valueChanged}
+      ></ha-textfield>
      <ha-yaml-editor
        .hass=${this.hass}
        .label=${this.hass.localize(
@ -97,6 +97,14 @@ export class HaEventTrigger extends LitElement implements TriggerElement {
      value,
    });
  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-textfield {
+        display: block;
+      }
+    `;
+  }
 }

 declare global {