State Trigger -> HA Form (#11631)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/components/ha-base-time-input.ts

@@ -26,6 +26,11 @@ export class HaBaseTimeInput extends LitElement {
    */
   @property({ type: Boolean }) autoValidate = false;
 
+  /**
+   * determines if inputs are required
+   */
+  @property({ type: Boolean }) public required?: boolean;
+
   /**
    * 12 or 24 hr format
    */
@@ -115,7 +120,7 @@ export class HaBaseTimeInput extends LitElement {
           @input=${this._valueChanged}
           @focus=${this._onFocus}
           no-spinner
-          required
+          .required=${this.required}
           .autoValidate=${this.autoValidate}
           maxlength="2"
           .max=${this._hourMax}
@@ -135,7 +140,7 @@ export class HaBaseTimeInput extends LitElement {
           @focus=${this._onFocus}
           name="minutes"
           no-spinner
-          required
+          .required=${this.required}
           .autoValidate=${this.autoValidate}
           maxlength="2"
           max="59"
@@ -156,7 +161,7 @@ export class HaBaseTimeInput extends LitElement {
               @focus=${this._onFocus}
               name="seconds"
               no-spinner
-              required
+              .required=${this.required}
               .autoValidate=${this.autoValidate}
               maxlength="2"
               max="59"
@@ -177,7 +182,7 @@ export class HaBaseTimeInput extends LitElement {
               @focus=${this._onFocus}
               name="milliseconds"
               no-spinner
-              required
+              .required=${this.required}
               .autoValidate=${this.autoValidate}
               maxlength="3"
               max="999"
@@ -189,7 +194,7 @@ export class HaBaseTimeInput extends LitElement {
         ${this.format === 24
           ? ""
           : html`<mwc-select
-              required
+              .required=${this.required}
               .value=${this.amPm}
               .disabled=${this.disabled}
               name="amPm"

src/components/ha-form/ha-form.ts

@@ -81,12 +81,12 @@ export class HaForm extends LitElement implements HaFormElement {
               : ""}
             ${"selector" in item
               ? html`<ha-selector
-                  .schema=${item}
                   .hass=${this.hass}
                   .selector=${item.selector}
                   .value=${getValue(this.data, item)}
                   .label=${this._computeLabel(item)}
                   .disabled=${this.disabled}
+                  .required=${item.required}
                 ></ha-selector>`
               : dynamicElement(`ha-form-${item.type}`, {
                   schema: item,

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

@@ -0,0 +1,37 @@
+import "../ha-duration-input";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { DurationSelector } from "../../data/selector";
+import { HomeAssistant } from "../../types";
+
+@customElement("ha-selector-duration")
+export class HaTimeDuration extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: DurationSelector;
+
+  @property() public value?: string;
+
+  @property() public label?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  protected render() {
+    return html`
+      <ha-duration-input
+        .label=${this.label}
+        .data=${this.value}
+        .disabled=${this.disabled}
+        .required=${this.required}
+      ></ha-duration-input>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-duration": HaTimeDuration;
+  }
+}

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

@@ -22,6 +22,8 @@ export class HaTextSelector extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
+  @property({ type: Boolean }) public required = true;
+
   @state() private _unmaskedPassword = false;
 
   protected render() {
@@ -35,7 +37,7 @@ export class HaTextSelector extends LitElement {
         autocapitalize="none"
         autocomplete="off"
         spellcheck="false"
-        required
+        .required=${this.required}
         autogrow
       ></ha-textarea>`;
     }
@@ -50,7 +52,7 @@ export class HaTextSelector extends LitElement {
           ? // reserve some space for the icon.
             html`<div style="width: 24px"></div>`
           : this.selector.text?.suffix}
-        required
+        .required=${this.required}
       ></ha-textfield>
       ${this.selector.text?.type === "password"
         ? html`<ha-icon-button

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

@@ -15,6 +15,7 @@ import "./ha-selector-select";
 import "./ha-selector-target";
 import "./ha-selector-text";
 import "./ha-selector-time";
+import "./ha-selector-duration";
 
 @customElement("ha-selector")
 export class HaSelector extends LitElement {
@@ -30,6 +31,8 @@ export class HaSelector extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
+  @property({ type: Boolean }) public required = true;
+
   public focus() {
     this.shadowRoot?.getElementById("selector")?.focus();
   }
@@ -47,6 +50,7 @@ export class HaSelector extends LitElement {
         label: this.label,
         placeholder: this.placeholder,
         disabled: this.disabled,
+        required: this.required,
         id: "selector",
       })}
     `;

src/data/selector.ts

@@ -31,6 +31,11 @@ export interface DeviceSelector {
   };
 }
 
+export interface DurationSelector {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  duration: {};
+}
+
 export interface AddonSelector {
   addon: {
     name?: string;

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

@@ -1,4 +1,3 @@
-import "@polymer/paper-input/paper-input";
 import { html, LitElement, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators";
 import {
@@ -10,19 +9,15 @@ import {
   string,
   union,
 } from "superstruct";
-import { createDurationData } from "../../../../../common/datetime/create_duration_data";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { hasTemplate } from "../../../../../common/string/has-template";
-import "../../../../../components/entity/ha-entity-attribute-picker";
-import "../../../../../components/entity/ha-entity-picker";
-import "../../../../../components/ha-duration-input";
 import { StateTrigger } from "../../../../../data/automation";
 import { HomeAssistant } from "../../../../../types";
 import { baseTriggerStruct, forDictStruct } from "../../structs";
-import {
-  handleChangeEvent,
-  TriggerElement,
-} from "../ha-automation-trigger-row";
+import { TriggerElement } from "../ha-automation-trigger-row";
+import "../../../../../components/ha-form/ha-form";
+import { createDurationData } from "../../../../../common/datetime/create_duration_data";
+import { HaFormSchema } from "../../../../../components/ha-form/types";
 
 const stateTriggerStruct = assign(
   baseTriggerStruct,
@@ -36,6 +31,13 @@ const stateTriggerStruct = assign(
   })
 );
 
+const SCHEMA = [
+  { name: "entity_id", selector: { entity: {} } },
+  { name: "from", required: false, selector: { text: {} } },
+  { name: "to", required: false, selector: { text: {} } },
+  { name: "for", required: false, selector: { duration: {} } },
+];
+
 @customElement("ha-automation-trigger-state")
 export class HaStateTrigger extends LitElement implements TriggerElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -76,57 +78,40 @@ export class HaStateTrigger extends LitElement implements TriggerElement {
   }
 
   protected render() {
-    const { entity_id, attribute, to, from } = this.trigger;
     const trgFor = createDurationData(this.trigger.for);
 
+    const data = { ...this.trigger, ...{ for: trgFor } };
+
     return html`
-      <ha-entity-picker
-        .value=${entity_id}
-        @value-changed=${this._valueChanged}
-        .name=${"entity_id"}
+      <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"
-        )}
+        .data=${data}
+        .schema=${SCHEMA}
         @value-changed=${this._valueChanged}
-        allow-custom-value
-      ></ha-entity-attribute-picker>
-      <paper-input
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.state.from"
-        )}
-        .name=${"from"}
-        .value=${from}
-        @value-changed=${this._valueChanged}
-      ></paper-input>
-      <paper-input
-        label=${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.state.to"
-        )}
-        .name=${"to"}
-        .value=${to}
-        @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=${trgFor}
-        @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 {
+    return this.hass.localize(
+      schema.name === "entity_id"
+        ? "ui.components.entity.entity-picker.entity"
+        : `ui.panel.config.automation.editor.triggers.type.state.${schema.name}`
+    );
   }
 }