♻️ convert more-info-automation to LitElement/TypeScript (#4547)

src/dialogs/more-info/controls/more-info-automation.js

@@ -1,53 +0,0 @@
-import "@material/mwc-button";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../../components/ha-relative-time";
-
-import LocalizeMixin from "../../../mixins/localize-mixin";
-
-class MoreInfoAutomation extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style>
-        .flex {
-          display: flex;
-          justify-content: space-between;
-        }
-        .actions {
-          margin: 36px 0 8px 0;
-          text-align: right;
-        }
-      </style>
-
-      <div class="flex">
-        <div>[[localize('ui.card.automation.last_triggered')]]:</div>
-        <ha-relative-time
-          hass="[[hass]]"
-          datetime="[[stateObj.attributes.last_triggered]]"
-        ></ha-relative-time>
-      </div>
-
-      <div class="actions">
-        <mwc-button on-click="handleTriggerTapped">
-          [[localize('ui.card.automation.trigger')]]
-        </mwc-button>
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      stateObj: Object,
-    };
-  }
-
-  handleTriggerTapped() {
-    this.hass.callService("automation", "trigger", {
-      entity_id: this.stateObj.entity_id,
-    });
-  }
-}
-
-customElements.define("more-info-automation", MoreInfoAutomation);

src/dialogs/more-info/controls/more-info-automation.ts

@@ -0,0 +1,68 @@
+import {
+  LitElement,
+  html,
+  TemplateResult,
+  CSSResult,
+  css,
+  property,
+  customElement,
+} from "lit-element";
+import { HassEntity } from "home-assistant-js-websocket";
+import "@material/mwc-button";
+
+import "../../../components/ha-relative-time";
+
+import { HomeAssistant } from "../../../types";
+
+@customElement("more-info-automation")
+class MoreInfoAutomation extends LitElement {
+  @property() public hass!: HomeAssistant;
+  @property() public stateObj?: HassEntity;
+
+  protected render(): TemplateResult | void {
+    if (!this.hass || !this.stateObj) {
+      return html``;
+    }
+
+    return html`
+      <div class="flex">
+        <div>${this.hass.localize("ui.card.automation.last_triggered")}:</div>
+        <ha-relative-time
+          .hass=${this.hass}
+          .datetime=${this.stateObj.attributes.last_triggered}
+        ></ha-relative-time>
+      </div>
+
+      <div class="actions">
+        <mwc-button @click=${this.handleAction}>
+          ${this.hass.localize("ui.card.automation.trigger")}
+        </mwc-button>
+      </div>
+    `;
+  }
+
+  private handleAction() {
+    this.hass.callService("automation", "trigger", {
+      entity_id: this.stateObj!.entity_id,
+    });
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      .flex {
+        display: flex;
+        justify-content: space-between;
+      }
+      .actions {
+        margin: 36px 0 8px 0;
+        text-align: right;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "more-info-automation": MoreInfoAutomation;
+  }
+}