diff --git a/src/data/input_text.ts b/src/data/input_text.ts
new file mode 100644
index 0000000000..a8ed653111
--- /dev/null
+++ b/src/data/input_text.ts
@@ -0,0 +1,7 @@
+import { HomeAssistant } from "../types";
+
+export const setValue = (hass: HomeAssistant, entity: string, value: string) =>
+ hass.callService("input_text", "set_value", {
+ value,
+ entity_id: entity,
+ });
diff --git a/src/panels/lovelace/entity-rows/hui-input-text-entity-row.js b/src/panels/lovelace/entity-rows/hui-input-text-entity-row.js
deleted file mode 100644
index 6b2e362222..0000000000
--- a/src/panels/lovelace/entity-rows/hui-input-text-entity-row.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "@polymer/paper-input/paper-input";
-
-import "../components/hui-generic-entity-row";
-
-class HuiInputTextEntityRow extends PolymerElement {
- static get template() {
- return html`
-
- ${this.inputTextControlTemplate}
-
- `;
- }
-
- static get inputTextControlTemplate() {
- return html`
-
- `;
- }
-
- static get properties() {
- return {
- hass: Object,
- _config: Object,
- _stateObj: {
- type: Object,
- computed: "_computeStateObj(hass.states, _config.entity)",
- observer: "_stateObjChanged",
- },
- _value: String,
- };
- }
-
- _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;
- }
-
- _stateObjChanged(stateObj) {
- this._value = stateObj && stateObj.state;
- }
-
- _selectedValueChanged() {
- if (this._value === this._stateObj.state) {
- return;
- }
- this.hass.callService("input_text", "set_value", {
- value: this._value,
- entity_id: this._stateObj.entity_id,
- });
- }
-}
-customElements.define("hui-input-text-entity-row", HuiInputTextEntityRow);
diff --git a/src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts
new file mode 100644
index 0000000000..e6c4b4b336
--- /dev/null
+++ b/src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts
@@ -0,0 +1,84 @@
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+import { PaperInputElement } from "@polymer/paper-input/paper-input";
+
+import "../components/hui-generic-entity-row";
+import "./hui-error-entity-row";
+
+import { HomeAssistant } from "../../../types";
+import { EntityRow, EntityConfig } from "./types";
+import { setValue } from "../../../data/input_text";
+
+class HuiInputTextEntityRow extends 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`
+
+
+
+ `;
+ }
+
+ private get _inputEl(): PaperInputElement {
+ return this.shadowRoot!.querySelector("paper-input") as PaperInputElement;
+ }
+
+ private _selectedValueChanged(ev): void {
+ const element = this._inputEl;
+ const stateObj = this.hass!.states[this._config!.entity];
+
+ if (element.value !== stateObj.state) {
+ setValue(this.hass!, stateObj.entity_id, element.value!);
+ }
+
+ ev.target.blur();
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hui-input-text-entity-row": HuiInputTextEntityRow;
+ }
+}
+
+customElements.define("hui-input-text-entity-row", HuiInputTextEntityRow);