Convert hui-input-text-entity-row to TypeScript/LitElement (#2050)

* Convert hui-input-text-entity-row to TypeScript/LitElement

* Address review comments

* Address review comments

Does anyone know why line 74 seemingly doesn't fire when the value hasn't changed? I think we should blur regardless if the value changed or not on "enter" but only seems to work when setValue is called

* Return promise from call service

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,
+  });

src/panels/lovelace/entity-rows/hui-input-text-entity-row.js

@@ -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`
-      <hui-generic-entity-row hass="[[hass]]" config="[[_config]]">
-        ${this.inputTextControlTemplate}
-      </hui-generic-entity-row>
-    `;
-  }
-
-  static get inputTextControlTemplate() {
-    return html`
-      <paper-input
-        no-label-float
-        minlength="[[_stateObj.attributes.min]]"
-        maxlength="[[_stateObj.attributes.max]]"
-        value="{{_value}}"
-        auto-validate="[[_stateObj.attributes.pattern]]"
-        pattern="[[_stateObj.attributes.pattern]]"
-        type="[[_stateObj.attributes.mode]]"
-        on-change="_selectedValueChanged"
-        placeholder="(empty value)"
-      ></paper-input>
-    `;
-  }
-
-  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);

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`
+        <hui-error-entity-row
+          .entity="${this._config.entity}"
+        ></hui-error-entity-row>
+      `;
+    }
+
+    return html`
+      <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
+        <paper-input
+          no-label-float
+          .value="${stateObj.state}"
+          .minlength="${stateObj.attributes.min}"
+          .maxlength="${stateObj.attributes.max}"
+          .autoValidate="${stateObj.attributes.pattern}"
+          .pattern="${stateObj.attributes.pattern}"
+          .type="${stateObj.attributes.mode}"
+          @change="${this._selectedValueChanged}"
+          placeholder="(empty value)"
+        ></paper-input>
+      </hui-generic-entity-row>
+    `;
+  }
+
+  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);