Convert more-info-sun to Lit (#4075)

* Convert more-info-sun to Lit

* address comments

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

@@ -1,83 +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 "../../../components/ha-relative-time";
-
-import LocalizeMixin from "../../../mixins/localize-mixin";
-import formatTime from "../../../common/datetime/format_time";
-
-class MoreInfoSun extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style include="iron-flex iron-flex-alignment"></style>
-
-      <template
-        is="dom-repeat"
-        items="[[computeOrder(risingDate, settingDate)]]"
-      >
-        <div class="data-entry layout justified horizontal">
-          <div class="key">
-            <span>[[itemCaption(item)]]</span>
-            <ha-relative-time
-              hass="[[hass]]"
-              datetime-obj="[[itemDate(item)]]"
-            ></ha-relative-time>
-          </div>
-          <div class="value">[[itemValue(item)]]</div>
-        </div>
-      </template>
-      <div class="data-entry layout justified horizontal">
-        <div class="key">
-          [[localize('ui.dialogs.more_info_control.sun.elevation')]]
-        </div>
-        <div class="value">[[stateObj.attributes.elevation]]</div>
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      stateObj: Object,
-      risingDate: {
-        type: Object,
-        computed: "computeRising(stateObj)",
-      },
-
-      settingDate: {
-        type: Object,
-        computed: "computeSetting(stateObj)",
-      },
-    };
-  }
-
-  computeRising(stateObj) {
-    return new Date(stateObj.attributes.next_rising);
-  }
-
-  computeSetting(stateObj) {
-    return new Date(stateObj.attributes.next_setting);
-  }
-
-  computeOrder(risingDate, settingDate) {
-    return risingDate > settingDate ? ["set", "ris"] : ["ris", "set"];
-  }
-
-  itemCaption(type) {
-    if (type === "ris") {
-      return this.localize("ui.dialogs.more_info_control.sun.rising");
-    }
-    return this.localize("ui.dialogs.more_info_control.sun.setting");
-  }
-
-  itemDate(type) {
-    return type === "ris" ? this.risingDate : this.settingDate;
-  }
-
-  itemValue(type) {
-    return formatTime(this.itemDate(type), this.hass.language);
-  }
-}
-
-customElements.define("more-info-sun", MoreInfoSun);

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

@@ -0,0 +1,84 @@
+import {
+  property,
+  LitElement,
+  TemplateResult,
+  html,
+  customElement,
+  CSSResult,
+  css,
+} from "lit-element";
+import { HassEntity } from "home-assistant-js-websocket";
+
+import "../../../components/ha-relative-time";
+
+import formatTime from "../../../common/datetime/format_time";
+import { HomeAssistant } from "../../../types";
+
+@customElement("more-info-sun")
+class MoreInfoSun extends LitElement {
+  @property() public hass!: HomeAssistant;
+  @property() public stateObj?: HassEntity;
+
+  protected render(): TemplateResult | void {
+    if (!this.hass || !this.stateObj) {
+      return html``;
+    }
+
+    const risingDate = new Date(this.stateObj.attributes.next_rising);
+    const settingDate = new Date(this.stateObj.attributes.next_setting);
+    const order = risingDate > settingDate ? ["set", "ris"] : ["ris", "set"];
+
+    return html`
+      ${order.map((item) => {
+        return html`
+          <div class="row">
+            <div class="key">
+              <span
+                >${item === "ris"
+                  ? this.hass.localize(
+                      "ui.dialogs.more_info_control.sun.rising"
+                    )
+                  : this.hass.localize(
+                      "ui.dialogs.more_info_control.sun.setting"
+                    )}</span
+              >
+              <ha-relative-time
+                .hass=${this.hass}
+                .datetimeObj=${item === "ris" ? risingDate : settingDate}
+              ></ha-relative-time>
+            </div>
+            <div class="value">
+              ${formatTime(
+                item === "ris" ? risingDate : settingDate,
+                this.hass.language
+              )}
+            </div>
+          </div>
+        `;
+      })}
+      <div class="row">
+        <div class="key">
+          ${this.hass.localize("ui.dialogs.more_info_control.sun.elevation")}
+        </div>
+        <div class="value">${this.stateObj.attributes.elevation}</div>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      .row {
+        margin: 0 8px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "more-info-sun": MoreInfoSun;
+  }
+}