Input conversion in dev tools (#11795)

README.md

@@ -2,7 +2,7 @@
 
 This is the repository for the official [Home Assistant](https://home-assistant.io) frontend.
 
-[![Screenshot of the frontend](https://raw.githubusercontent.com/home-assistant/home-assistant-polymer/master/docs/screenshot.png)](https://demo.home-assistant.io/)
+[![Screenshot of the frontend](https://raw.githubusercontent.com/home-assistant/frontend/master/docs/screenshot.png)](https://demo.home-assistant.io/)
 
 - [View demo of Home Assistant](https://demo.home-assistant.io/)
 - [More information about Home Assistant](https://home-assistant.io)

src/dialogs/generic/dialog-box.ts

@@ -75,7 +75,7 @@ class DialogBox extends LitElement {
             ? html`
                 <ha-textfield
                   dialogInitialFocus
-                  .value=${this._value}
+                  .value=${this._value || ""}
                   @keyup=${this._handleKeyUp}
                   @change=${this._valueChanged}
                   .label=${this._params.inputLabel

src/panels/developer-tools/event/developer-tools-event.js

@@ -1,11 +1,11 @@
 import "@material/mwc-button";
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { load } from "js-yaml";
 import "../../../components/ha-code-editor";
+import "../../../components/ha-textfield";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
@@ -46,6 +46,10 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) {
           margin-top: 8px;
         }
 
+        ha-textfield {
+          display: block;
+        }
+
         .code-editor {
           margin-right: 16px;
         }
@@ -78,14 +82,15 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) {
             </a>
           </p>
           <div class="inputs">
-            <paper-input
+            <ha-textfield
               label="[[localize(
                 'ui.panel.developer-tools.tabs.events.type'
               )]]"
               autofocus
               required
-              value="{{eventType}}"
+              value="[[eventType]]"
-            ></paper-input>
+              on-change="eventTypeChanged"
+            ></ha-textfield>
             <p>[[localize( 'ui.panel.developer-tools.tabs.events.data' )]]</p>
           </div>
           <div class="code-editor">
@@ -150,6 +155,10 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) {
     this.eventType = ev.detail.eventType;
   }
 
+  eventTypeChanged(ev) {
+    this.eventType = ev.target.value;
+  }
+
   _computeParsedEventData(eventData) {
     try {
       return eventData.trim() ? load(eventData) : {};

src/panels/developer-tools/event/event-subscribe-card.ts

@@ -1,11 +1,10 @@
 import "@material/mwc-button";
-import "@polymer/paper-input/paper-input";
 import { HassEvent } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { formatTime } from "../../../common/datetime/format_time";
 import "../../../components/ha-card";
-import { PolymerChangedEvent } from "../../../polymer-types";
+import "../../../components/ha-textfield";
 import { HomeAssistant } from "../../../types";
 
 @customElement("event-subscribe-card")
@@ -39,7 +38,7 @@ class EventSubscribeCard extends LitElement {
         )}
       >
         <form>
-          <paper-input
+          <ha-textfield
             .label=${this._subscribed
               ? this.hass!.localize(
                   "ui.panel.developer-tools.tabs.events.listening_to"
@@ -49,8 +48,8 @@ class EventSubscribeCard extends LitElement {
                 )}
             .disabled=${this._subscribed !== undefined}
             .value=${this._eventType}
-            @value-changed=${this._valueChanged}
+            @input=${this._valueChanged}
-          ></paper-input>
+          ></ha-textfield>
           <mwc-button
             .disabled=${this._eventType === ""}
             @click=${this._handleSubmit}
@@ -84,8 +83,8 @@ class EventSubscribeCard extends LitElement {
     `;
   }
 
-  private _valueChanged(ev: PolymerChangedEvent<string>): void {
+  private _valueChanged(ev): void {
-    this._eventType = ev.detail.value;
+    this._eventType = ev.target.value;
   }
 
   private async _handleSubmit(): Promise<void> {
@@ -116,9 +115,8 @@ class EventSubscribeCard extends LitElement {
         display: block;
         padding: 0 0 16px 16px;
       }
-      paper-input {
+      ha-textfield {
-        display: inline-block;
+        width: 300px;
-        width: 200px;
       }
       mwc-button {
         vertical-align: middle;

src/panels/developer-tools/state/developer-tools-state.js

@@ -5,7 +5,6 @@ import {
   mdiInformationOutline,
   mdiRefresh,
 } from "@mdi/js";
-import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -42,6 +41,14 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
           padding: 16px;
         }
 
+        ha-textfield {
+          display: block;
+        }
+
+        .state-input {
+          margin-top: 16px;
+        }
+
         ha-expansion-panel {
           margin: 0 8px 16px;
         }
@@ -74,6 +81,14 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
           );
         }
 
+        .filters th {
+          padding: 0;
+        }
+
+        .filters ha-textfield {
+          --mdc-text-field-fill-color: transparent;
+        }
+
         th.attributes {
           position: relative;
         }
@@ -164,16 +179,17 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
               on-change="entityIdChanged"
               allow-custom-entity
             ></ha-entity-picker>
-            <paper-input
+            <ha-textfield
               label="[[localize('ui.panel.developer-tools.tabs.states.state')]]"
               required
               autocapitalize="none"
               autocomplete="off"
               autocorrect="off"
               spellcheck="false"
-              value="{{_state}}"
+              value="[[_state]]"
+              on-change="stateChanged"
               class="state-input"
-            ></paper-input>
+            ></ha-textfield>
             <p>
               [[localize('ui.panel.developer-tools.tabs.states.state_attributes')]]
             </p>
@@ -234,27 +250,30 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
               ></ha-checkbox>
             </th>
           </tr>
-          <tr>
+          <tr class="filters">
             <th>
-              <paper-input
+              <ha-textfield
                 label="[[localize('ui.panel.developer-tools.tabs.states.filter_entities')]]"
                 type="search"
-                value="{{_entityFilter}}"
+                value="[[_entityFilter]]"
-              ></paper-input>
+                on-input="_entityFilterChanged"
+              ></ha-textfield>
             </th>
             <th>
-              <paper-input
+              <ha-textfield
                 label="[[localize('ui.panel.developer-tools.tabs.states.filter_states')]]"
                 type="search"
-                value="{{_stateFilter}}"
+                value="[[_stateFilter]]"
-              ></paper-input>
+                on-input="_stateFilterChanged"
+              ></ha-textfield>
             </th>
             <th hidden$="[[!computeShowAttributes(narrow, _showAttributes)]]">
-              <paper-input
+              <ha-textfield
                 label="[[localize('ui.panel.developer-tools.tabs.states.filter_attributes')]]"
                 type="search"
-                value="{{_attributeFilter}}"
+                value="[[_attributeFilter]]"
-              ></paper-input>
+                on-input="_attributeFilterChanged"
+              ></ha-textfield>
             </th>
           </tr>
           <tr hidden$="[[!computeShowEntitiesPlaceholder(_entities)]]">
@@ -416,6 +435,22 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
     this._expanded = true;
   }
 
+  stateChanged(ev) {
+    this._state = ev.target.value;
+  }
+
+  _entityFilterChanged(ev) {
+    this._entityFilter = ev.target.value;
+  }
+
+  _stateFilterChanged(ev) {
+    this._stateFilter = ev.target.value;
+  }
+
+  _attributeFilterChanged(ev) {
+    this._attributeFilter = ev.target.value;
+  }
+
   _getHistoryURL(entityId, inputDate) {
     const date = new Date(inputDate);
     const hourBefore = addHours(date, -1).toISOString();

src/panels/lovelace/editor/card-editor/hui-card-preview.ts

@@ -1,4 +1,3 @@
-import "@polymer/paper-input/paper-textarea";
 import { PropertyValues, ReactiveElement } from "lit";
 import { property } from "lit/decorators";
 import { computeRTL } from "../../../../common/util/compute_rtl";

src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts

@@ -333,7 +333,7 @@ export class HuiConditionalCardEditor
         .condition .state mwc-select {
           margin-right: 16px;
         }
-        .condition .state paper-input {
+        .condition .state ha-textfield {
           flex-grow: 1;
         }
 

src/panels/mailbox/ha-panel-mailbox.js

@@ -1,7 +1,6 @@
 import "@material/mwc-button";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-input/paper-textarea";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-tabs/paper-tab";

src/panels/profile/ha-long-lived-access-token-dialog.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -7,6 +6,7 @@ import { createCloseHeading } from "../../components/ha-dialog";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { LongLivedAccessTokenDialogParams } from "./show-long-lived-access-token-dialog";
+import "../../components/ha-textfield";
 
 const QR_LOGO_URL = "/static/icons/favicon-192x192.png";
 
@@ -41,14 +41,15 @@ export class HaLongLivedAccessTokenDialog extends LitElement {
         @closed=${this.closeDialog}
       >
         <div>
-          <paper-input
+          <ha-textfield
             dialogInitialFocus
             .value=${this._params.token}
             .label=${this.hass.localize(
               "ui.panel.profile.long_lived_access_tokens.prompt_copy_token"
             )}
             type="text"
-          ></paper-input>
+            readOnly
+          ></ha-textfield>
           <div id="qr">
             ${this._qrCode
               ? this._qrCode
@@ -94,6 +95,9 @@ export class HaLongLivedAccessTokenDialog extends LitElement {
         #qr {
           text-align: center;
         }
+        ha-textfield {
+          display: block;
+        }
       `,
     ];
   }