Convert Sun to Ha Form (#11647)

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

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

@@ -1,16 +1,12 @@
-import "@polymer/paper-input/paper-input";
+import { html, LitElement } from "lit";
-import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import "../../../../../components/ha-radio";
-import "../../../../../components/ha-formfield";
-import type { HaRadio } from "../../../../../components/ha-radio";
 import type { SunTrigger } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
-import {
+import type { TriggerElement } from "../ha-automation-trigger-row";
-  handleChangeEvent,
+import type { HaFormSchema } from "../../../../../components/ha-form/types";
-  TriggerElement,
+import type { LocalizeFunc } from "../../../../../common/translations/localize";
-} from "../ha-automation-trigger-row";
 
 @customElement("ha-automation-trigger-sun")
 export class HaSunTrigger extends LitElement implements TriggerElement {
@@ -18,6 +14,29 @@ export class HaSunTrigger extends LitElement implements TriggerElement {
 
   @property({ attribute: false }) public trigger!: SunTrigger;
 
+  private _schema = memoizeOne((localize: LocalizeFunc) => [
+    {
+      name: "event",
+      type: "select",
+      required: true,
+      options: [
+        [
+          "sunrise",
+          localize(
+            "ui.panel.config.automation.editor.triggers.type.sun.sunrise"
+          ),
+        ],
+        [
+          "sunset",
+          localize(
+            "ui.panel.config.automation.editor.triggers.type.sun.sunset"
+          ),
+        ],
+      ],
+    },
+    { name: "offset", selector: { text: {} } },
+  ]);
+
   public static get defaultConfig() {
     return {
       event: "sunrise" as SunTrigger["event"],
@@ -26,69 +45,27 @@ export class HaSunTrigger extends LitElement implements TriggerElement {
   }
 
   protected render() {
-    const { offset, event } = this.trigger;
     return html`
-      <label>
+      <ha-form
-        ${this.hass.localize(
+        .schema=${this._schema(this.hass.localize)}
-          "ui.panel.config.automation.editor.triggers.type.sun.event"
+        .data=${this.trigger}
-        )}
+        .hass=${this.hass}
-        <ha-formfield
+        .computeLabel=${this._computeLabelCallback}
-          .label=${this.hass.localize(
-            "ui.panel.config.automation.editor.triggers.type.sun.sunrise"
-          )}
-        >
-          <ha-radio
-            name="event"
-            value="sunrise"
-            .checked=${event === "sunrise"}
-            @change=${this._radioGroupPicked}
-          ></ha-radio>
-        </ha-formfield>
-        <ha-formfield
-          .label=${this.hass.localize(
-            "ui.panel.config.automation.editor.triggers.type.sun.sunset"
-          )}
-        >
-          <ha-radio
-            name="event"
-            value="sunset"
-            .checked=${event === "sunset"}
-            @change=${this._radioGroupPicked}
-          ></ha-radio>
-        </ha-formfield>
-      </label>
-
-      <paper-input
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.sun.offset"
-        )}
-        name="offset"
-        .value=${offset}
         @value-changed=${this._valueChanged}
-      ></paper-input>
+      ></ha-form>
     `;
   }
 
   private _valueChanged(ev: CustomEvent): void {
-    handleChangeEvent(this, ev);
-  }
-
-  private _radioGroupPicked(ev) {
     ev.stopPropagation();
-    fireEvent(this, "value-changed", {
+    const newTrigger = ev.detail.value;
-      value: {
+    fireEvent(this, "value-changed", { value: newTrigger });
-        ...this.trigger,
-        event: (ev.target as HaRadio).value,
-      },
-    });
   }
 
-  static styles = css`
+  private _computeLabelCallback = (schema: HaFormSchema): string =>
-    label {
+    this.hass.localize(
-      display: flex;
+      `ui.panel.config.automation.editor.triggers.type.sun.${schema.name}`
-      align-items: center;
+    );
-    }
-  `;
 }
 
 declare global {