♻️ convert more-info-script to LitElement/TypeScript (#4545)

* ♻️ convert more-info-script to Lit/TypeScript

* ♻️ convert more-info-script to LitElement/TypeScript

* 👌 use relative time

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

@@ -1,31 +0,0 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import LocalizeMixin from "../../../mixins/localize-mixin";
-
-class MoreInfoScript extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style include="iron-flex iron-flex-alignment"></style>
-
-      <div class="layout vertical">
-        <div class="data-entry layout justified horizontal">
-          <div class="key">
-            [[localize('ui.dialogs.more_info_control.script.last_action')]]
-          </div>
-          <div class="value">[[stateObj.attributes.last_action]]</div>
-        </div>
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      stateObj: {
-        type: Object,
-      },
-    };
-  }
-}
-
-customElements.define("more-info-script", MoreInfoScript);

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

@@ -0,0 +1,46 @@
+import {
+  LitElement,
+  html,
+  TemplateResult,
+  property,
+  customElement,
+} from "lit-element";
+import { HassEntity } from "home-assistant-js-websocket";
+
+import { HomeAssistant } from "../../../types";
+
+import "../../../components/ha-relative-time";
+
+@customElement("more-info-script")
+class MoreInfoScript extends LitElement {
+  @property() public hass!: HomeAssistant;
+  @property() public stateObj?: HassEntity;
+
+  protected render(): TemplateResult | void {
+    if (!this.hass || !this.stateObj) {
+      return html``;
+    }
+
+    return html`
+      <div>
+        ${this.hass.localize(
+          "ui.dialogs.more_info_control.script.last_triggered"
+        )}:
+        ${this.stateObj.attributes.last_triggered
+          ? html`
+              <ha-relative-time
+                .hass=${this.hass}
+                .datetime=${this.stateObj.attributes.last_triggered}
+              ></ha-relative-time>
+            `
+          : this.hass.localize("ui.components.relative_time.never")}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "more-info-script": MoreInfoScript;
+  }
+}

src/translations/en.json

@@ -574,7 +574,8 @@
         "settings": "Entity settings",
         "edit": "Edit entity",
         "script": {
-          "last_action": "Last Action"
+          "last_action": "Last Action",
+          "last_triggered": "Last Triggered"
         },
         "sun": {
           "elevation": "Elevation",