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

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;
         }
       `,
     ];

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;
     }
   `;
 }

src/panels/config/automation/action/types/ha-automation-action-event.ts

@@ -1,9 +1,9 @@
-import "@polymer/paper-input/paper-input";
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
-import { 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}
+        @change=${this._eventChanged}
-      ></paper-input>
+      ></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 {

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";

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 type { HomeAssistant } from "../../../../../types";
-import { Condition } from "../../../../lovelace/common/validate-condition";
+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
+        ? 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"}
-            @value-changed=${this._countChanged}
+              @change=${this._countChanged}
-          ></paper-input>`
+            ></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;
     }

src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger.ts

@@ -1,6 +1,5 @@
-import "@polymer/paper-input/paper-input";
+import "../../../../../components/ha-textfield";
-import "@polymer/paper-input/paper-textarea";
+import { css, CSSResultGroup, html, LitElement } from "lit";
-import { 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=${timeout || ""}
-        @value-changed=${this._valueChanged}
+        @change=${this._valueChanged}
-      ></paper-input>
+      ></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 {

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 type { HaFormSchema } from "../../../../../components/ha-form/types";
-import { WaitAction } from "../../../../../data/script";
+import type { WaitAction } from "../../../../../data/script";
-import { HomeAssistant } from "../../../../../types";
+import type { HomeAssistant } from "../../../../../types";
-import { ActionElement, handleChangeEvent } from "../ha-automation-action-row";
+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
+      <ha-form
-        .label=${this.hass.localize(
+        .hass=${this.hass}
-          "ui.panel.config.automation.editor.actions.type.wait_template.wait_template"
+        .data=${this.action}
-        )}
+        .schema=${SCHEMA}
-        name="wait_template"
+        .computeLabel=${this._computeLabelCallback}
-        .value=${wait_template}
+      ></ha-form>
-        @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>
     `;
   }
 
-  private _continueChanged(ev) {
+  private _computeLabelCallback = (schema: HaFormSchema): string =>
-    fireEvent(this, "value-changed", {
+    this.hass.localize(
-      value: { ...this.action, continue_on_timeout: ev.target.checked },
+      `ui.panel.config.automation.editor.actions.type.wait_template.${
-    });
+        schema.name === "continue_on_timeout" ? "continue_timeout" : schema.name
-  }
+      }`
-
+    );
-  private _valueChanged(ev: CustomEvent): void {
-    handleChangeEvent(this, ev);
-  }
 }
 
 declare global {

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;
       }
     `,
   ];

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"),

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 {

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,

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
+                        ? 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>`
+                            ></blueprint-automation-editor>
-                        : html`<manual-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>`}
+                            ></manual-automation-editor>
+                          `}
                     `
                   : this._mode === "yaml"
                   ? html`

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";

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=${this.config.alias || ""}
-              @value-changed=${this._valueChanged}
+              @change=${this._valueChanged}
             >
-            </paper-input>
+            </ha-textfield>
-            <paper-textarea
+            <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=${this.config.description || ""}
-              @value-changed=${this._valueChanged}
+              @change=${this._valueChanged}
-            ></paper-textarea>
+            ></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
+              ? 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"}
-                  @value-changed=${this._valueChanged}
+                    @change=${this._valueChanged}
                   >
-                </paper-input>`
+                  </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);
     }

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=${this.trigger.id || ""}
-                        @value-changed=${this._idChanged}
+                        @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;
         }
       `,
     ];

src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts

@@ -1,7 +1,7 @@
-import "@polymer/paper-input/paper-input";
+import { css, CSSResultGroup, html, LitElement } from "lit";
-import { 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}
+        @change=${this._valueChanged}
-      ></paper-input>
+      ></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 {