Convert ha-relative-time to TypeScript/LitElement (#7709)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/components/ha-relative-time.js

@@ -1,66 +0,0 @@
-import { dom } from "@polymer/polymer/lib/legacy/polymer.dom";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import relativeTime from "../common/datetime/relative_time";
-import LocalizeMixin from "../mixins/localize-mixin";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class HaRelativeTime extends LocalizeMixin(PolymerElement) {
-  static get properties() {
-    return {
-      hass: Object,
-      datetime: {
-        type: String,
-        observer: "datetimeChanged",
-      },
-
-      datetimeObj: {
-        type: Object,
-        observer: "datetimeObjChanged",
-      },
-
-      parsedDateTime: Object,
-    };
-  }
-
-  constructor() {
-    super();
-    this.updateRelative = this.updateRelative.bind(this);
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    // update every 60 seconds
-    this.updateInterval = setInterval(this.updateRelative, 60000);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    clearInterval(this.updateInterval);
-  }
-
-  datetimeChanged(newVal) {
-    this.parsedDateTime = newVal ? new Date(newVal) : null;
-
-    this.updateRelative();
-  }
-
-  datetimeObjChanged(newVal) {
-    this.parsedDateTime = newVal;
-
-    this.updateRelative();
-  }
-
-  updateRelative() {
-    const root = dom(this);
-    if (!this.parsedDateTime) {
-      root.innerHTML = this.localize("ui.components.relative_time.never");
-    } else {
-      root.innerHTML = relativeTime(this.parsedDateTime, this.localize);
-    }
-  }
-}
-
-customElements.define("ha-relative-time", HaRelativeTime);

src/components/ha-relative-time.ts

@@ -0,0 +1,72 @@
+import {
+  customElement,
+  UpdatingElement,
+  property,
+  PropertyValues,
+} from "lit-element";
+
+import relativeTime from "../common/datetime/relative_time";
+
+import type { HomeAssistant } from "../types";
+
+@customElement("ha-relative-time")
+class HaRelativeTime extends UpdatingElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public datetime?: string;
+
+  private _interval?: number;
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._clearInterval();
+  }
+
+  public connectedCallback(): void {
+    super.connectedCallback();
+    if (this.datetime) {
+      this._startInterval();
+    }
+  }
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+    this._updateRelative();
+  }
+
+  protected update(changedProps: PropertyValues) {
+    super.update(changedProps);
+    this._updateRelative();
+  }
+
+  private _clearInterval(): void {
+    if (this._interval) {
+      window.clearInterval(this._interval);
+      this._interval = undefined;
+    }
+  }
+
+  private _startInterval(): void {
+    this._clearInterval();
+
+    // update every 60 seconds
+    this._interval = window.setInterval(() => this._updateRelative(), 60000);
+  }
+
+  private _updateRelative(): void {
+    if (!this.datetime) {
+      this.innerHTML = this.hass.localize("ui.components.relative_time.never");
+    } else {
+      this.innerHTML = relativeTime(
+        new Date(this.datetime),
+        this.hass.localize
+      );
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-relative-time": HaRelativeTime;
+  }
+}