Automation Conditions to conversion to ha-form or mwc

src/components/ha-form/types.ts

@@ -49,7 +49,7 @@ export interface HaFormSelectSchema extends HaFormBaseSchema {
 
 export interface HaFormMultiSelectSchema extends HaFormBaseSchema {
   type: "multi_select";
-  options: Record<string, string> | string[];
+  options: Record<string, string> | string[] | Array<[string, string]>;
 }
 
 export interface HaFormFloatSchema extends HaFormBaseSchema {

src/components/ha-selector/ha-selector-time.ts

@@ -22,6 +22,7 @@ export class HaTimeSelector extends LitElement {
         .value=${this.value}
         .locale=${this.hass.locale}
         .disabled=${this.disabled}
+        .label=${this.label}
         enable-second
       ></ha-time-input>
     `;

src/panels/config/automation/condition/ha-automation-condition-editor.ts

@@ -6,7 +6,7 @@ import memoizeOne from "memoize-one";
 import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stringCompare } from "../../../../common/string/compare";
-import { LocalizeFunc } from "../../../../common/translations/localize";
+import type { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/ha-card";
 import "../../../../components/ha-yaml-editor";
 import type { Condition } from "../../../../data/automation";

src/panels/config/automation/condition/ha-automation-condition-row.ts

@@ -27,7 +27,7 @@ export const handleChangeEvent = (
   if (!name) {
     return;
   }
-  const newVal = ev.detail.value;
+  const newVal = ev.detail?.value || (ev.currentTarget as any)?.value;
 
   if ((element.condition[name] || "") === newVal) {
     return;

src/panels/config/automation/condition/types/ha-automation-condition-device.ts

@@ -1,4 +1,4 @@
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
@@ -11,7 +11,7 @@ import {
   DeviceCondition,
   fetchDeviceConditionCapabilities,
 } from "../../../../../data/device_automation";
-import { HomeAssistant } from "../../../../../types";
+import type { HomeAssistant } from "../../../../../types";
 
 @customElement("ha-automation-condition-device")
 export class HaDeviceCondition extends LitElement {
@@ -147,6 +147,13 @@ export class HaDeviceCondition extends LitElement {
         `ui.panel.config.automation.editor.conditions.type.device.extra_fields.${schema.name}`
       ) || schema.name;
   }
+
+  static styles = css`
+    ha-device-picker {
+      display: block;
+      margin-bottom: 24px;
+    }
+  `;
 }
 
 declare global {

src/panels/config/automation/condition/types/ha-automation-condition-logical.ts

@@ -1,17 +1,20 @@
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import { Condition, LogicalCondition } from "../../../../../data/automation";
-import { HomeAssistant } from "../../../../../types";
+import type {
+  Condition,
+  LogicalCondition,
+} from "../../../../../data/automation";
+import type { HomeAssistant } from "../../../../../types";
 import "../ha-automation-condition";
-import { ConditionElement } from "../ha-automation-condition-row";
+import type { ConditionElement } from "../ha-automation-condition-row";
 import { HaStateCondition } from "./ha-automation-condition-state";
 
 @customElement("ha-automation-condition-logical")
 export class HaLogicalCondition extends LitElement implements ConditionElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public condition!: LogicalCondition;
+  @property({ attribute: false }) public condition!: LogicalCondition;
 
   public static get defaultConfig() {
     return {

src/panels/config/automation/condition/types/ha-automation-condition-numeric_state.ts

@@ -1,78 +1,72 @@
-import "@polymer/paper-input/paper-input";
-import "@polymer/paper-input/paper-textarea";
+import "../../../../../components/ha-form/ha-form";
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../../../../../components/entity/ha-entity-picker";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../../../../../common/dom/fire_event";
+import type { HaFormSchema } from "../../../../../components/ha-form/types";
 import { NumericStateCondition } from "../../../../../data/automation";
-import { HomeAssistant } from "../../../../../types";
-import { handleChangeEvent } from "../ha-automation-condition-row";
+import type { HomeAssistant } from "../../../../../types";
 
 @customElement("ha-automation-condition-numeric_state")
 export default class HaNumericStateCondition extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public condition!: NumericStateCondition;
+  @property({ attribute: false }) public condition!: NumericStateCondition;
 
   public static get defaultConfig() {
     return {
       entity_id: "",
     };
   }
 
+  private _schema = memoizeOne((entityId): HaFormSchema[] => [
+    { name: "entity_id", required: true, selector: { entity: {} } },
+    {
+      name: "attribute",
+      selector: { attribute: { entity_id: entityId } },
+    },
+    { name: "above", selector: { text: {} } },
+    { name: "below", selector: { text: {} } },
+    {
+      name: "value_template",
+      selector: { text: { multiline: true } },
+    },
+  ]);
+
   public render() {
-    const { value_template, entity_id, attribute, below, above } =
-      this.condition;
+    const schema = this._schema(this.condition.entity_id);
 
     return html`
-      <ha-entity-picker
-        .value=${entity_id}
-        .name=${"entity_id"}
-        @value-changed=${this._valueChanged}
+      <ha-form
         .hass=${this.hass}
-        allow-custom-entity
-      ></ha-entity-picker>
-      <ha-entity-attribute-picker
-        .hass=${this.hass}
-        .entityId=${entity_id}
-        .value=${attribute}
-        .name=${"attribute"}
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.state.attribute"
-        )}
-        @value-changed=${this._valueChanged}
-        allow-custom-value
-      ></ha-entity-attribute-picker>
-      <paper-input
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.conditions.type.numeric_state.above"
-        )}
-        name="above"
-        .value=${above}
+        .data=${this.condition}
+        .schema=${schema}
         @value-changed=${this._valueChanged}
-      ></paper-input>
-      <paper-input
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.conditions.type.numeric_state.below"
-        )}
-        name="below"
-        .value=${below}
-        @value-changed=${this._valueChanged}
-      ></paper-input>
-      <paper-textarea
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.conditions.type.numeric_state.value_template"
-        )}
-        name="value_template"
-        .value=${value_template}
-        @value-changed=${this._valueChanged}
-        dir="ltr"
-      ></paper-textarea>
+        .computeLabel=${this._computeLabelCallback}
+      ></ha-form>
     `;
   }
 
   private _valueChanged(ev: CustomEvent): void {
-    handleChangeEvent(this, ev);
+    ev.stopPropagation();
+    const newTrigger = ev.detail.value;
+    fireEvent(this, "value-changed", { value: newTrigger });
   }
+
+  private _computeLabelCallback = (schema: HaFormSchema): string => {
+    switch (schema.name) {
+      case "entity_id":
+        return this.hass.localize("ui.components.entity.entity-picker.entity");
+      case "attribute":
+        return this.hass.localize(
+          "ui.components.entity.entity-attribute-picker.attribute"
+        );
+      default:
+        return this.hass.localize(
+          `ui.panel.config.automation.editor.triggers.type.numeric_state.${schema.name}`
+        );
+    }
+  };
 }
 
 declare global {

src/panels/config/automation/condition/types/ha-automation-condition-state.ts

@@ -1,19 +1,14 @@
-import "@polymer/paper-input/paper-input";
 import { html, LitElement, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { assert, literal, object, optional, string, union } from "superstruct";
 import { createDurationData } from "../../../../../common/datetime/create_duration_data";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import "../../../../../components/entity/ha-entity-attribute-picker";
-import "../../../../../components/entity/ha-entity-picker";
-import "../../../../../components/ha-duration-input";
-import { StateCondition } from "../../../../../data/automation";
-import { HomeAssistant } from "../../../../../types";
+import type { HaFormSchema } from "../../../../../components/ha-form/types";
+import type { StateCondition } from "../../../../../data/automation";
+import type { HomeAssistant } from "../../../../../types";
 import { forDictStruct } from "../../structs";
-import {
-  ConditionElement,
-  handleChangeEvent,
-} from "../ha-automation-condition-row";
+import type { ConditionElement } from "../ha-automation-condition-row";
 
 const stateConditionStruct = object({
   condition: literal("state"),
@@ -27,12 +22,22 @@ const stateConditionStruct = object({
 export class HaStateCondition extends LitElement implements ConditionElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public condition!: StateCondition;
+  @property({ attribute: false }) public condition!: StateCondition;
 
   public static get defaultConfig() {
     return { entity_id: "", state: "" };
   }
 
+  private _schema = memoizeOne((entityId) => [
+    { name: "entity_id", required: true, selector: { entity: {} } },
+    {
+      name: "attribute",
+      selector: { attribute: { entity_id: entityId } },
+    },
+    { name: "state", selector: { text: {} } },
+    { name: "for", selector: { duration: {} } },
+  ]);
+
   public shouldUpdate(changedProperties: PropertyValues) {
     if (changedProperties.has("condition")) {
       try {
@@ -46,50 +51,52 @@ export class HaStateCondition extends LitElement implements ConditionElement {
   }
 
   protected render() {
-    const { entity_id, attribute, state } = this.condition;
-    const forTime = createDurationData(this.condition.for);
+    const trgFor = createDurationData(this.condition.for);
+    const data = { ...this.condition, ...{ for: trgFor } };
+    const schema = this._schema(this.condition.entity_id);
 
     return html`
-      <ha-entity-picker
-        .value=${entity_id}
-        .name=${"entity_id"}
-        @value-changed=${this._valueChanged}
-        .hass=${this.hass}
-        allow-custom-entity
-      ></ha-entity-picker>
-      <ha-entity-attribute-picker
+      <ha-form
         .hass=${this.hass}
-        .entityId=${entity_id}
-        .value=${attribute}
-        .name=${"attribute"}
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.state.attribute"
-        )}
-        @value-changed=${this._valueChanged}
-        allow-custom-value
-      ></ha-entity-attribute-picker>
-      <paper-input
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.conditions.type.state.state"
-        )}
-        .name=${"state"}
-        .value=${state}
-        @value-changed=${this._valueChanged}
-      ></paper-input>
-      <ha-duration-input
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.state.for"
-        )}
-        .name=${"for"}
-        .data=${forTime}
+        .data=${data}
+        .schema=${schema}
         @value-changed=${this._valueChanged}
-      ></ha-duration-input>
+        .computeLabel=${this._computeLabelCallback}
+      ></ha-form>
     `;
   }
 
   private _valueChanged(ev: CustomEvent): void {
-    handleChangeEvent(this, ev);
+    ev.stopPropagation();
+    const newTrigger = ev.detail.value;
+
+    Object.keys(newTrigger).forEach((key) =>
+      newTrigger[key] === undefined || newTrigger[key] === ""
+        ? delete newTrigger[key]
+        : {}
+    );
+
+    fireEvent(this, "value-changed", { value: newTrigger });
   }
+
+  private _computeLabelCallback = (schema: HaFormSchema): string => {
+    switch (schema.name) {
+      case "entity_id":
+        return this.hass.localize("ui.components.entity.entity-picker.entity");
+      case "attribute":
+        return this.hass.localize(
+          "ui.components.entity.entity-attribute-picker.attribute"
+        );
+      case "for":
+        return this.hass.localize(
+          `ui.panel.config.automation.editor.triggers.type.state.for`
+        );
+      default:
+        return this.hass.localize(
+          `ui.panel.config.automation.editor.conditions.type.state.${schema.name}`
+        );
+    }
+  };
 }
 
 declare global {