Convert state-card-display to LitElement and use timestamp display (#8150)

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

src/components/entity/state-info.ts

@@ -23,7 +23,7 @@ class StateInfo extends LitElement {
 
   @property({ type: Boolean }) public inDialog = false;
 
-  // property used only in css
+  // property used only in CSS
   @property({ type: Boolean, reflect: true }) public rtl = false;
 
   protected render(): TemplateResult {

src/state-summary/state-card-display.js

@@ -1,102 +0,0 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { attributeClassNames } from "../common/entity/attribute_class_names";
-import { computeStateDisplay } from "../common/entity/compute_state_display";
-import { computeRTL } from "../common/util/compute_rtl";
-import "../components/entity/state-info";
-import LocalizeMixin from "../mixins/localize-mixin";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class StateCardDisplay extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          @apply --layout-horizontal;
-          @apply --layout-justified;
-          @apply --layout-baseline;
-        }
-
-        :host([rtl]) {
-          direction: rtl;
-          text-align: right;
-        }
-
-        state-info {
-          flex: 1 1 auto;
-          min-width: 0;
-        }
-        .state {
-          @apply --paper-font-body1;
-          color: var(--primary-text-color);
-          margin-left: 16px;
-          text-align: right;
-          max-width: 40%;
-          flex: 0 0 auto;
-          overflow-wrap: break-word;
-        }
-        :host([rtl]) .state {
-          margin-right: 16px;
-          margin-left: 0;
-          text-align: left;
-        }
-
-        .state.has-unit_of_measurement {
-          white-space: nowrap;
-        }
-      </style>
-
-      ${this.stateInfoTemplate}
-      <div class$="[[computeClassNames(stateObj)]]">
-        [[computeStateDisplay(localize, stateObj, hass.language)]]
-      </div>
-    `;
-  }
-
-  static get stateInfoTemplate() {
-    return html`
-      <state-info
-        hass="[[hass]]"
-        state-obj="[[stateObj]]"
-        in-dialog="[[inDialog]]"
-      ></state-info>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      stateObj: Object,
-      inDialog: {
-        type: Boolean,
-        value: false,
-      },
-      rtl: {
-        type: Boolean,
-        reflectToAttribute: true,
-        computed: "_computeRTL(hass)",
-      },
-    };
-  }
-
-  computeStateDisplay(localize, stateObj, language) {
-    return computeStateDisplay(localize, stateObj, language);
-  }
-
-  computeClassNames(stateObj) {
-    const classes = [
-      "state",
-      attributeClassNames(stateObj, ["unit_of_measurement"]),
-    ];
-    return classes.join(" ");
-  }
-
-  _computeRTL(hass) {
-    return computeRTL(hass);
-  }
-}
-customElements.define("state-card-display", StateCardDisplay);

src/state-summary/state-card-display.ts

@@ -0,0 +1,110 @@
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import type { HassEntity } from "home-assistant-js-websocket";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import { classMap } from "lit-html/directives/class-map";
+import { computeDomain } from "../common/entity/compute_domain";
+import { computeStateDisplay } from "../common/entity/compute_state_display";
+import { computeRTL } from "../common/util/compute_rtl";
+import "../components/entity/state-info";
+import { UNAVAILABLE_STATES } from "../data/entity";
+import "../panels/lovelace/components/hui-timestamp-display";
+import { haStyle } from "../resources/styles";
+import type { HomeAssistant } from "../types";
+
+@customElement("state-card-display")
+export class StateCardDisplay extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj!: HassEntity;
+
+  @property({ type: Boolean }) public inDialog = false;
+
+  // property used only in CSS
+  @property({ type: Boolean, reflect: true }) public rtl = false;
+
+  protected render(): TemplateResult {
+    return html`
+      <div class="horizontal justified layout">
+        <state-info
+          .hass=${this.hass}
+          .stateObj=${this.stateObj}
+          .inDialog=${this.inDialog}
+        >
+        </state-info>
+        <div
+          class="state ${classMap({
+            "has-unit_of_measurement":
+              "unit_of_measurement" in this.stateObj.attributes,
+          })}"
+        >
+          ${computeDomain(this.stateObj.entity_id) === "sensor" &&
+          this.stateObj.attributes.device_class === "timestamp" &&
+          !UNAVAILABLE_STATES.includes(this.stateObj.state)
+            ? html` <hui-timestamp-display
+                .hass=${this.hass}
+                .ts=${new Date(this.stateObj.state)}
+                format="datetime"
+              ></hui-timestamp-display>`
+            : computeStateDisplay(
+                this.hass!.localize,
+                this.stateObj,
+                this.hass.language
+              )}
+        </div>
+      </div>
+    `;
+  }
+
+  protected updated(changedProps) {
+    super.updated(changedProps);
+    if (!changedProps.has("hass")) {
+      return;
+    }
+
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    if (!oldHass || oldHass.language !== this.hass.language) {
+      this.rtl = computeRTL(this.hass);
+    }
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      css`
+        :host([rtl]) {
+          direction: rtl;
+          text-align: right;
+        }
+
+        state-info {
+          flex: 1 1 auto;
+          min-width: 0;
+        }
+        .state {
+          color: var(--primary-text-color);
+          margin-left: 16px;
+          text-align: right;
+          flex: 0 0 auto;
+          overflow-wrap: break-word;
+        }
+        :host([rtl]) .state {
+          margin-right: 16px;
+          margin-left: 0;
+          text-align: left;
+        }
+
+        .state.has-unit_of_measurement {
+          white-space: nowrap;
+        }
+      `,
+    ];
+  }
+}