diff --git a/src/panels/lovelace/entity-rows/hui-text-entity-row.js b/src/panels/lovelace/entity-rows/hui-text-entity-row.js
deleted file mode 100644
index 139525bd0d..0000000000
--- a/src/panels/lovelace/entity-rows/hui-text-entity-row.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../components/hui-generic-entity-row";
-
-import computeStateDisplay from "../../../common/entity/compute_state_display";
-
-import LocalizeMixin from "../../../mixins/localize-mixin";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class HuiTextEntityRow extends LocalizeMixin(PolymerElement) {
- static get template() {
- return html`
- ${this.styleTemplate}
-
- ${this.textControlTemplate}
-
- `;
- }
-
- static get styleTemplate() {
- return html`
-
- `;
- }
-
- static get textControlTemplate() {
- return html`
-
[[_computeState(_stateObj)]]
- `;
- }
-
- static get properties() {
- return {
- hass: Object,
- _config: Object,
- _stateObj: {
- type: Object,
- computed: "_computeStateObj(hass.states, _config.entity)",
- },
- };
- }
-
- _computeStateObj(states, entityId) {
- return states && entityId in states ? states[entityId] : null;
- }
-
- setConfig(config) {
- if (!config || !config.entity) {
- throw new Error("Entity not configured.");
- }
- this._config = config;
- }
-
- _computeState(stateObj) {
- return stateObj && computeStateDisplay(this.localize, stateObj);
- }
-}
-customElements.define("hui-text-entity-row", HuiTextEntityRow);
diff --git a/src/panels/lovelace/entity-rows/hui-text-entity-row.ts b/src/panels/lovelace/entity-rows/hui-text-entity-row.ts
new file mode 100644
index 0000000000..722ece4cad
--- /dev/null
+++ b/src/panels/lovelace/entity-rows/hui-text-entity-row.ts
@@ -0,0 +1,74 @@
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+
+import "../components/hui-generic-entity-row";
+import "./hui-error-entity-row";
+
+import computeStateDisplay from "../../../common/entity/compute_state_display";
+import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
+import { HomeAssistant } from "../../../types";
+import { EntityRow, EntityConfig } from "./types";
+
+class HuiTextEntityRow extends hassLocalizeLitMixin(LitElement)
+ implements EntityRow {
+ public hass?: HomeAssistant;
+ private _config?: EntityConfig;
+
+ static get properties(): PropertyDeclarations {
+ return {
+ hass: {},
+ _config: {},
+ };
+ }
+
+ public setConfig(config: EntityConfig): void {
+ if (!config) {
+ throw new Error("Configuration error");
+ }
+ this._config = config;
+ }
+
+ protected render(): TemplateResult {
+ if (!this._config || !this.hass) {
+ return html``;
+ }
+
+ const stateObj = this.hass.states[this._config.entity];
+
+ if (!stateObj) {
+ return html`
+
+ `;
+ }
+
+ return html`
+ ${this.renderStyle()}
+
+ >
+
+ ${computeStateDisplay(this.localize, stateObj, this.hass.language)}
+
+
+ `;
+ }
+
+ private renderStyle(): TemplateResult {
+ return html`
+
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hui-text-entity-row": HuiTextEntityRow;
+ }
+}
+
+customElements.define("hui-text-entity-row", HuiTextEntityRow);