Convert automation trigger to litelement

src/common/dom/dynamic-content-directive.ts

@@ -0,0 +1,29 @@
+import { directive, Part, NodePart } from "lit-html";
+
+export const dynamicContentDirective = directive(
+  (tag: string, properties: { [key: string]: any }) => (part: Part): void => {
+    if (!(part instanceof NodePart)) {
+      throw new Error(
+        "dynamicContentDirective can only be used in content bindings"
+      );
+    }
+
+    let element = part.value as HTMLElement | undefined;
+
+    if (
+      element !== undefined &&
+      tag.toUpperCase() === (element as HTMLElement).tagName
+    ) {
+      Object.entries(properties).forEach(([key, value]) => {
+        element![key] = value;
+      });
+      return;
+    }
+
+    element = document.createElement(tag);
+    Object.entries(properties).forEach(([key, value]) => {
+      element![key] = value;
+    });
+    part.setValue(element);
+  }
+);

src/components/device/ha-device-automation-picker.ts

@@ -176,6 +176,7 @@ export abstract class HaDeviceAutomationPicker<
     this.value = automation;
     setTimeout(() => {
       fireEvent(this, "change");
+      fireEvent(this, "value-changed", { value: automation });
     }, 0);
   }
 

src/components/ha-yaml-editor.ts

@@ -0,0 +1,81 @@
+import { safeDump, safeLoad } from "js-yaml";
+import "./ha-code-editor";
+import { LitElement, property, customElement, html } from "lit-element";
+import { fireEvent } from "../common/dom/fire_event";
+
+const isEmpty = (obj: object) => {
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      return false;
+    }
+  }
+  return true;
+};
+
+@customElement("ha-yaml-editor")
+export class HaYamlEditor extends LitElement {
+  @property() public value?: any;
+  @property() public isValid = true;
+  @property() public label?: string;
+  @property() private _yaml?: string;
+
+  protected firstUpdated() {
+    try {
+      this._yaml =
+        this.value && !isEmpty(this.value) ? safeDump(this.value) : "";
+    } catch (err) {
+      alert(`There was an error converting to YAML: ${err}`);
+    }
+  }
+
+  protected render() {
+    if (this._yaml === undefined) {
+      return;
+    }
+    return html`
+      ${this.label
+        ? html`
+            <p>${this.label}</p>
+          `
+        : ""}
+      <ha-code-editor
+        .value=${this._yaml}
+        mode="yaml"
+        .error=${this.isValid === false}
+        @value-changed=${this._onChange}
+      ></ha-code-editor>
+    `;
+  }
+
+  private _onChange(ev: CustomEvent) {
+    ev.stopPropagation();
+    const value = ev.detail.value;
+    let parsed;
+    let isValid = true;
+
+    if (value) {
+      try {
+        parsed = safeLoad(value);
+        isValid = true;
+      } catch (err) {
+        // Invalid YAML
+        isValid = false;
+      }
+    } else {
+      parsed = {};
+    }
+
+    this.value = parsed;
+    this.isValid = isValid;
+
+    if (isValid) {
+      fireEvent(this, "value-changed", { value: parsed });
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-yaml-editor": HaYamlEditor;
+  }
+}

src/data/device_automation.ts

@@ -18,7 +18,7 @@ export interface DeviceCondition extends DeviceAutomation {
 }
 
 export interface DeviceTrigger extends DeviceAutomation {
-  platform: string;
+  platform: "device";
 }
 
 export const fetchDeviceActions = (hass: HomeAssistant, deviceId: string) =>