Convert inputs (#11907)

* Convert inputs

* Update dialog-thingtalk.ts

* imports

hassio/src/components/hassio-upload-backup.ts

@@ -1,5 +1,4 @@
 import { mdiFolderUpload } from "@mdi/js";
-import "@polymer/paper-input/paper-input-container";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";
 import { fireEvent } from "../../../src/common/dom/fire_event";

src/components/ha-date-input.ts

@@ -41,7 +41,7 @@ export class HaDateInput extends LitElement {
     return html`<ha-textfield
       .label=${this.label}
       .disabled=${this.disabled}
-      iconTrailing="calendar"
+      iconTrailing
       @click=${this._openDialog}
       .value=${this.value
         ? formatDateNumeric(new Date(this.value), this.locale)

src/components/ha-textfield.ts

@@ -9,6 +9,12 @@ export class HaTextField extends TextFieldBase {
 
   @property({ attribute: "error-message" }) public errorMessage?: string;
 
+  // @ts-ignore
+  @property({ type: Boolean }) public icon?: boolean;
+
+  // @ts-ignore
+  @property({ type: Boolean }) public iconTrailing?: boolean;
+
   override updated(changedProperties: PropertyValues) {
     super.updated(changedProperties);
     if (
@@ -53,6 +59,11 @@ export class HaTextField extends TextFieldBase {
         padding-right: var(--text-field-suffix-padding-right, 0px);
       }
 
+      .mdc-text-field:not(.mdc-text-field--disabled)
+        .mdc-text-field__affix--suffix {
+        color: var(--secondary-text-color);
+      }
+
       .mdc-text-field__icon {
         color: var(--secondary-text-color);
       }

src/components/search-input.ts

@@ -35,7 +35,7 @@ class SearchInput extends LitElement {
         .autofocus=${this.autofocus}
         .label=${this.label || "Search"}
         .value=${this.filter || ""}
-        .icon=${true}
+        icon
         .iconTrailing=${this.filter || this.suffix}
         @input=${this._filterInputChanged}
       >

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -162,7 +162,7 @@ export class QuickBar extends LitElement {
               "ui.dialogs.quick-bar.filter_placeholder"
             )}
             .value=${this._commandMode ? `>${this._search}` : this._search}
-            .icon=${true}
+            icon
             .iconTrailing=${this._search !== undefined || this._narrow}
             @input=${this._handleSearchChange}
             @keydown=${this._handleInputKeyDown}

src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts

@@ -1,7 +1,6 @@
 /* eslint-disable lit/prefer-static-styles */
+import "@material/mwc-button/mwc-button";
 import { mdiMicrophone } from "@mdi/js";
-import "@polymer/paper-input/paper-input";
-import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
   css,
   CSSResultGroup,
@@ -10,12 +9,16 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { customElement, property, state, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../common/dom/fire_event";
 import { SpeechRecognition } from "../../common/dom/speech-recognition";
 import { uid } from "../../common/util/uid";
+import "../../components/ha-dialog";
+import type { HaDialog } from "../../components/ha-dialog";
 import "../../components/ha-icon-button";
+import "../../components/ha-textfield";
+import type { HaTextField } from "../../components/ha-textfield";
 import {
   AgentInfo,
   getAgentInfo,
@@ -24,9 +27,6 @@ import {
 } from "../../data/conversation";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
-import "../../components/ha-dialog";
-import type { HaDialog } from "../../components/ha-dialog";
-import "@material/mwc-button/mwc-button";
 
 interface Message {
   who: string;
@@ -127,18 +127,19 @@ export class HaVoiceCommandDialog extends LitElement {
             : ""}
         </div>
         <div class="input" slot="primaryAction">
-          <paper-input
+          <ha-textfield
             @keyup=${this._handleKeyUp}
             .label=${this.hass.localize(
               `ui.dialogs.voice_command.${
                 SpeechRecognition ? "label_voice" : "label"
               }`
             )}
-            autofocus
+            dialogInitialFocus
+            iconTrailing
           >
             ${SpeechRecognition
               ? html`
-                  <span suffix="" slot="suffix">
+                  <span slot="trailingIcon">
                     ${this.results
                       ? html`
                           <div class="bouncer">
@@ -155,7 +156,7 @@ export class HaVoiceCommandDialog extends LitElement {
                   </span>
                 `
               : ""}
-          </paper-input>
+          </ha-textfield>
           ${this._agentInfo && this._agentInfo.attribution
             ? html`
                 <a
@@ -195,7 +196,7 @@ export class HaVoiceCommandDialog extends LitElement {
   }
 
   private _handleKeyUp(ev: KeyboardEvent) {
-    const input = ev.target as PaperInputElement;
+    const input = ev.target as HaTextField;
     if (ev.keyCode === 13 && input.value) {
       this._processText(input.value);
       input.value = "";
@@ -327,6 +328,7 @@ export class HaVoiceCommandDialog extends LitElement {
       css`
         ha-icon-button {
           color: var(--secondary-text-color);
+          margin-right: -24px;
         }
 
         ha-icon-button[active] {
@@ -338,7 +340,9 @@ export class HaVoiceCommandDialog extends LitElement {
           --secondary-action-button-flex: 0;
           --mdc-dialog-max-width: 450px;
         }
-
+        ha-textfield {
+          display: block;
+        }
         a.button {
           text-decoration: none;
         }
@@ -406,7 +410,6 @@ export class HaVoiceCommandDialog extends LitElement {
           width: 48px;
           height: 48px;
           position: absolute;
-          top: 0;
         }
         .double-bounce1,
         .double-bounce2 {

src/panels/config/automation/blueprint-automation-editor.ts

@@ -1,7 +1,6 @@
 import "@material/mwc-button/mwc-button";
-import "@polymer/paper-input/paper-textarea";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, CSSResultGroup, html, LitElement } from "lit";
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/entity/ha-entity-toggle";
@@ -11,6 +10,7 @@ import "../../../components/ha-circular-progress";
 import "../../../components/ha-markdown";
 import "../../../components/ha-selector/ha-selector";
 import "../../../components/ha-settings-row";
+import "../../../components/ha-textfield";
 import {
   BlueprintAutomationConfig,
   triggerAutomationActions,
@@ -38,6 +38,8 @@ export class HaBlueprintAutomationEditor extends LitElement {
 
   @state() private _blueprints?: Blueprints;
 
+  @state() private _showDescription = false;
+
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     this._getBlueprints();
@@ -50,6 +52,17 @@ export class HaBlueprintAutomationEditor extends LitElement {
     return this._blueprints[this.config.use_blueprint.path];
   }
 
+  protected willUpdate(changedProps: PropertyValues): void {
+    super.willUpdate(changedProps);
+    if (
+      !this._showDescription &&
+      changedProps.has("config") &&
+      this.config.description
+    ) {
+      this._showDescription = true;
+    }
+  }
+
   protected render() {
     const blueprint = this._blueprint;
     return html`
@@ -64,16 +77,18 @@ export class HaBlueprintAutomationEditor extends LitElement {
         </span>
         <ha-card>
           <div class="card-content">
-            <paper-input
+            <ha-textfield
               .label=${this.hass.localize(
                 "ui.panel.config.automation.editor.alias"
               )}
               name="alias"
-              .value=${this.config.alias}
-              @value-changed=${this._valueChanged}
+              .value=${this.config.alias || ""}
+              @change=${this._valueChanged}
             >
-            </paper-input>
-            <paper-textarea
+            </ha-textfield>
+            ${this._showDescription
+              ? html`
+                  <ha-textarea
                     .label=${this.hass.localize(
                       "ui.panel.config.automation.editor.description.label"
                     )}
@@ -81,9 +96,20 @@ export class HaBlueprintAutomationEditor extends LitElement {
                       "ui.panel.config.automation.editor.description.placeholder"
                     )}
                     name="description"
-              .value=${this.config.description}
-              @value-changed=${this._valueChanged}
-            ></paper-textarea>
+                    autogrow
+                    .value=${this.config.description || ""}
+                    @change=${this._valueChanged}
+                  ></ha-textarea>
+                `
+              : html`
+                  <div class="link-button-row">
+                    <button class="link" @click=${this._addDescription}>
+                      ${this.hass.localize(
+                        "ui.panel.config.automation.editor.description.add"
+                      )}
+                    </button>
+                  </div>
+                `}
           </div>
           ${this.stateObj
             ? html`
@@ -173,15 +199,14 @@ export class HaBlueprintAutomationEditor extends LitElement {
                               value?.default}
                               @value-changed=${this._inputChanged}
                             ></ha-selector>`
-                          : html`<paper-input
+                          : html`<ha-textfield
                               .key=${key}
                               required
                               .value=${(this.config.use_blueprint.input &&
                                 this.config.use_blueprint.input[key]) ??
                               value?.default}
-                              @value-changed=${this._inputChanged}
-                              no-label-float
-                            ></paper-input>`}
+                              @input=${this._inputChanged}
+                            ></ha-textfield>`}
                       </ha-settings-row>`
                   )
                 : html`<p class="padding">
@@ -221,7 +246,7 @@ export class HaBlueprintAutomationEditor extends LitElement {
     ev.stopPropagation();
     const target = ev.target as any;
     const key = target.key;
-    const value = ev.detail.value;
+    const value = ev.detail?.value || target.value;
     if (
       (this.config.use_blueprint.input &&
         this.config.use_blueprint.input[key] === value) ||
@@ -262,6 +287,10 @@ export class HaBlueprintAutomationEditor extends LitElement {
     });
   }
 
+  private _addDescription() {
+    this._showDescription = true;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -273,9 +302,16 @@ export class HaBlueprintAutomationEditor extends LitElement {
         .padding {
           padding: 16px;
         }
+        .link-button-row {
+          padding: 14px;
+        }
         .blueprint-picker-container {
           padding: 0 16px 16px;
         }
+        ha-textarea,
+        ha-textfield {
+          display: block;
+        }
         h3 {
           margin: 16px;
         }
@@ -292,9 +328,7 @@ export class HaBlueprintAutomationEditor extends LitElement {
           --paper-time-input-justify-content: flex-end;
           border-top: 1px solid var(--divider-color);
         }
-        :host(:not([narrow])) ha-settings-row paper-input {
-          width: 60%;
-        }
+        :host(:not([narrow])) ha-settings-row ha-textfield,
         :host(:not([narrow])) ha-settings-row ha-selector {
           width: 60%;
         }

src/panels/config/automation/thingtalk/dialog-thingtalk.ts

@@ -1,10 +1,11 @@
 import "@material/mwc-button";
-import "@polymer/paper-input/paper-input";
-import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-circular-progress";
+import "../../../../components/ha-dialog";
+import "../../../../components/ha-textfield";
+import type { HaTextField } from "../../../../components/ha-textfield";
 import type { AutomationConfig } from "../../../../data/automation";
 import { convertThingTalk } from "../../../../data/cloud";
 import { haStyle, haStyleDialog } from "../../../../resources/styles";
@@ -12,7 +13,6 @@ import type { HomeAssistant } from "../../../../types";
 import "./ha-thingtalk-placeholders";
 import type { PlaceholderValues } from "./ha-thingtalk-placeholders";
 import type { ThingtalkDialogParams } from "./show-dialog-thingtalk";
-import "../../../../components/ha-dialog";
 
 export interface Placeholder {
   name: string;
@@ -38,7 +38,7 @@ class DialogThingtalk extends LitElement {
 
   @state() private _placeholders?: PlaceholderContainer;
 
-  @query("#input") private _input?: PaperInputElement;
+  @query("#input") private _input?: HaTextField;
 
   private _value?: string;
 
@@ -58,7 +58,7 @@ class DialogThingtalk extends LitElement {
     this._placeholders = undefined;
     this._params = undefined;
     if (this._input) {
-      this._input.value = null;
+      this._input.value = "";
     }
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
@@ -127,13 +127,13 @@ class DialogThingtalk extends LitElement {
               </button>
             </li>
           </ul>
-          <paper-input
+          <ha-textfield
             id="input"
             label="What should this automation do?"
             .value=${this._value}
             autofocus
             @keyup=${this._handleKeyUp}
-          ></paper-input>
+          ></ha-textfield>
           <a
             href="https://almond.stanford.edu/"
             target="_blank"

src/panels/config/automation/trigger/types/ha-automation-trigger-webhook.ts

@@ -88,7 +88,7 @@ export class HaWebhookTrigger extends LitElement {
         .helper=${this.hass.localize(
           "ui.panel.config.automation.editor.triggers.type.webhook.webhook_id_helper"
         )}
-        .iconTrailing=${true}
+        iconTrailing
         .value=${webhookId || ""}
         @input=${this._valueChanged}
       >

src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts

@@ -1,11 +1,12 @@
 import "@material/mwc-button";
-import "@polymer/paper-input/paper-input";
-import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement } from "lit";
-import { state } from "lit/decorators";
+import { query, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { copyToClipboard } from "../../../../common/util/copy-clipboard";
+import type { HaTextField } from "../../../../components/ha-textfield";
+import "../../../../components/ha-textfield";
 import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
-import { haStyle } from "../../../../resources/styles";
+import { haStyle, haStyleDialog } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
 import { documentationUrl } from "../../../../util/documentation-url";
 import { WebhookDialogParams } from "./show-dialog-manage-cloudhook";
@@ -17,6 +18,8 @@ export class DialogManageCloudhook extends LitElement {
 
   @state() private _params?: WebhookDialogParams;
 
+  @query("ha-textfield") _input!: HaTextField;
+
   public showDialog(params: WebhookDialogParams) {
     this._params = params;
   }
@@ -53,12 +56,12 @@ export class DialogManageCloudhook extends LitElement {
               "ui.panel.config.cloud.dialog_cloudhook.available_at"
             )}
           </p>
-          <paper-input
-            label=${inputLabel}
-            value=${cloudhook.cloudhook_url}
+          <ha-textfield
+            .label=${inputLabel}
+            .value=${cloudhook.cloudhook_url}
             @click=${this._copyClipboard}
             @blur=${this._restoreLabel}
-          ></paper-input>
+          ></ha-textfield>
           <p>
             ${cloudhook.managed
               ? html`
@@ -98,10 +101,6 @@ export class DialogManageCloudhook extends LitElement {
     `;
   }
 
-  private get _paperInput(): PaperInputElement {
-    return this.shadowRoot!.querySelector("paper-input")!;
-  }
-
   private async _disableWebhook() {
     showConfirmationDialog(this, {
       text: this.hass!.localize(
@@ -117,14 +116,10 @@ export class DialogManageCloudhook extends LitElement {
   }
 
   private _copyClipboard(ev: FocusEvent) {
-    // paper-input -> iron-input -> input
-    const paperInput = ev.currentTarget as PaperInputElement;
-    const input = (paperInput.inputElement as any)
-      .inputElement as HTMLInputElement;
-    input.setSelectionRange(0, input.value.length);
+    const textField = ev.currentTarget as HaTextField;
     try {
-      document.execCommand("copy");
-      paperInput.label = this.hass!.localize(
+      copyToClipboard(textField.value);
+      textField.label = this.hass!.localize(
         "ui.panel.config.cloud.dialog_cloudhook.copied_to_clipboard"
       );
     } catch (err: any) {
@@ -133,18 +128,19 @@ export class DialogManageCloudhook extends LitElement {
   }
 
   private _restoreLabel() {
-    this._paperInput.label = inputLabel;
+    this._input.label = inputLabel;
   }
 
   static get styles(): CSSResultGroup {
     return [
       haStyle,
+      haStyleDialog,
       css`
         ha-dialog {
           width: 650px;
         }
-        paper-input {
-          margin-top: -8px;
+        ha-textfield {
+          display: block;
         }
         button.link {
           color: var(--primary-color);

src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts

@@ -19,6 +19,7 @@ import "../../../../components/entity/ha-statistic-picker";
 import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/ha-radio";
 import "../../../../components/ha-formfield";
+import "../../../../components/ha-textfield";
 import type { HaRadio } from "../../../../components/ha-radio";
 
 @customElement("dialog-energy-gas-settings")
@@ -188,20 +189,19 @@ export class DialogEnergyGasSettings
           ></ha-radio>
         </ha-formfield>
         ${this._costs === "number"
-          ? html`<paper-input
+          ? html`<ha-textfield
               .label=${this.hass.localize(
                 `ui.panel.config.energy.gas.dialog.cost_number_input`,
                 { unit }
               )}
-              no-label-float
               class="price-options"
               step=".01"
               type="number"
               .value=${this._source.number_energy_price}
-              @value-changed=${this._numberPriceChanged}
+              @change=${this._numberPriceChanged}
+              .suffix=${`${this.hass.config.currency}/${unit}`}
             >
-              <span slot="suffix">${this.hass.config.currency}/${unit}</span>
-            </paper-input>`
+            </ha-textfield>`
           : ""}
 
         <mwc-button @click=${this.closeDialog} slot="secondaryAction">
@@ -223,10 +223,10 @@ export class DialogEnergyGasSettings
     this._costs = input.value as any;
   }
 
-  private _numberPriceChanged(ev: CustomEvent) {
+  private _numberPriceChanged(ev) {
     this._source = {
       ...this._source!,
-      number_energy_price: Number(ev.detail.value),
+      number_energy_price: Number(ev.target.value),
       entity_energy_price: null,
       stat_cost: null,
     };
@@ -295,13 +295,10 @@ export class DialogEnergyGasSettings
         ha-formfield {
           display: block;
         }
-        ha-statistic-picker {
-          width: 100%;
-        }
         .price-options {
           display: block;
           padding-left: 52px;
-          margin-top: -16px;
+          margin-top: -8px;
         }
       `,
     ];

src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts

@@ -190,24 +190,21 @@ export class DialogEnergyGridFlowSettings
           ></ha-radio>
         </ha-formfield>
         ${this._costs === "number"
-          ? html`<paper-input
+          ? html`<ha-textfield
               .label=${this.hass.localize(
                 `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.cost_number_input`
               )}
-              no-label-float
               class="price-options"
               step=".01"
               type="number"
               .value=${this._source.number_energy_price}
-              @value-changed=${this._numberPriceChanged}
-            >
-              <span slot="suffix"
-                >${this.hass.localize(
+              .suffix=${this.hass.localize(
                 `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.cost_number_suffix`,
                 { currency: this.hass.config.currency }
-                )}</span
+              )}
+              @change=${this._numberPriceChanged}
             >
-            </paper-input>`
+            </ha-textfield>`
           : ""}
 
         <mwc-button @click=${this.closeDialog} slot="secondaryAction">
@@ -302,13 +299,10 @@ export class DialogEnergyGridFlowSettings
         ha-formfield {
           display: block;
         }
-        ha-statistic-picker {
-          width: 100%;
-        }
         .price-options {
           display: block;
           padding-left: 52px;
-          margin-top: -16px;
+          margin-top: -8px;
         }
       `,
     ];

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts

@@ -1,7 +1,5 @@
 import "@material/mwc-button/mwc-button";
 import { mdiAlertCircle, mdiCheckCircle, mdiQrcodeScan } from "@mdi/js";
-import "@polymer/paper-input/paper-input";
-import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -11,28 +9,30 @@ import { HaCheckbox } from "../../../../../components/ha-checkbox";
 import "../../../../../components/ha-circular-progress";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
 import "../../../../../components/ha-formfield";
+import "../../../../../components/ha-qr-scanner";
 import "../../../../../components/ha-radio";
 import "../../../../../components/ha-switch";
+import "../../../../../components/ha-textfield";
+import type { HaTextField } from "../../../../../components/ha-textfield";
 import {
-  zwaveGrantSecurityClasses,
   InclusionStrategy,
   MINIMUM_QR_STRING_LENGTH,
-  zwaveParseQrCode,
+  PlannedProvisioningEntry,
   provisionZwaveSmartStartNode,
   QRProvisioningInformation,
   RequestedGrant,
   SecurityClass,
   stopZwaveInclusion,
   subscribeAddZwaveNode,
+  ZWaveFeature,
+  zwaveGrantSecurityClasses,
+  zwaveParseQrCode,
   zwaveSupportsFeature,
   zwaveValidateDskAndEnterPin,
-  ZWaveFeature,
-  PlannedProvisioningEntry,
 } from "../../../../../data/zwave_js";
 import { haStyle, haStyleDialog } from "../../../../../resources/styles";
 import { HomeAssistant } from "../../../../../types";
 import { ZWaveJSAddNodeDialogParams } from "./show-dialog-zwave_js-add-node";
-import "../../../../../components/ha-qr-scanner";
 
 export interface ZWaveJSAddNodeDevice {
   id: string;
@@ -98,7 +98,7 @@ class DialogZWaveJSAddNode extends LitElement {
     this._startInclusion();
   }
 
-  @query("#pin-input") private _pinInput?: PaperInputElement;
+  @query("#pin-input") private _pinInput?: HaTextField;
 
   protected render(): TemplateResult {
     if (!this._entryId) {
@@ -202,12 +202,11 @@ class DialogZWaveJSAddNode extends LitElement {
                     : ""
                 }
                 <div class="flex-container">
-                <paper-input
+                <ha-textfield
                   label="PIN"
                   id="pin-input"
                   @keyup=${this._handlePinKeyUp}
-                  no-label-float
-                ></paper-input>
+                ></ha-textfield>
                 ${this._dsk}
                 </div>
                 <mwc-button
@@ -814,6 +813,9 @@ class DialogZWaveJSAddNode extends LitElement {
           width: 68px;
           height: 48px;
         }
+        ha-textfield {
+          display: block;
+        }
         .secondary {
           color: var(--secondary-text-color);
         }

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts

@@ -25,6 +25,7 @@ import "../../../../../components/ha-select";
 import "../../../../../components/ha-settings-row";
 import "../../../../../components/ha-svg-icon";
 import "../../../../../components/ha-switch";
+import "../../../../../components/ha-textfield";
 import {
   computeDeviceName,
   DeviceRegistryEntry,
@@ -265,7 +266,7 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
 
     if (item.configuration_value_type === "manual_entry") {
       return html`${labelAndDescription}
-        <paper-input
+        <ha-textfield
           type="number"
           .value=${item.value}
           .min=${item.metadata.min}
@@ -274,12 +275,12 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
           .propertyKey=${item.property_key}
           .key=${id}
           .disabled=${!item.metadata.writeable}
-          @value-changed=${this._numericInputChanged}
+          @input=${this._numericInputChanged}
         >
           ${item.metadata.unit
             ? html`<span slot="suffix">${item.metadata.unit}</span>`
             : ""}
-        </paper-input> `;
+        </ha-textfield>`;
     }
 
     if (item.configuration_value_type === "enumerated") {
@@ -492,7 +493,7 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
           font-size: 1.3em;
         }
 
-        :host(:not([narrow])) ha-settings-row paper-input {
+        :host(:not([narrow])) ha-settings-row ha-textfield {
           width: 30%;
           text-align: right;
         }

src/panels/config/script/blueprint-script-editor.ts

@@ -186,9 +186,7 @@ export class HaBlueprintScriptEditor extends LitElement {
           --paper-time-input-justify-content: flex-end;
           border-top: 1px solid var(--divider-color);
         }
-        :host(:not([narrow])) ha-settings-row paper-input {
-          width: 60%;
-        }
+        :host(:not([narrow])) ha-settings-row ha-textfield,
         :host(:not([narrow])) ha-settings-row ha-selector {
           width: 60%;
         }

src/panels/lovelace/components/hui-input-list-editor.ts

@@ -1,11 +1,11 @@
 import { mdiClose } from "@mdi/js";
-import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-icon-button";
 import { HomeAssistant } from "../../../types";
 import { EditorTarget } from "../editor/types";
+import "../../../components/ha-textfield";
 
 @customElement("hui-input-list-editor")
 export class HuiInputListEditor extends LitElement {
@@ -23,30 +23,31 @@ export class HuiInputListEditor extends LitElement {
     return html`
       ${this.value.map(
         (listEntry, index) => html`
-          <paper-input
-            label=${this.inputLabel}
+          <ha-textfield
+            .label=${this.inputLabel}
             .value=${listEntry}
             .configValue=${"entry"}
             .index=${index}
-            @value-changed=${this._valueChanged}
+            @input=${this._valueChanged}
             @blur=${this._consolidateEntries}
             @keydown=${this._handleKeyDown}
+            iconTrailing
             ><ha-icon-button
-              slot="suffix"
+              slot="trailingIcon"
               class="clear-button"
               .path=${mdiClose}
               no-ripple
               @click=${this._removeEntry}
               .label=${this.hass!.localize("ui.common.clear")}
-              >Clear</ha-icon-button
-            ></paper-input
             >
+            </ha-icon-button>
+          </ha-textfield>
         `
       )}
-      <paper-input
-        label=${this.inputLabel}
+      <ha-textfield
+        .label=${this.inputLabel}
         @change=${this._addEntry}
-      ></paper-input>
+      ></ha-textfield>
     `;
   }
 
@@ -103,10 +104,12 @@ export class HuiInputListEditor extends LitElement {
   static get styles(): CSSResultGroup {
     return css`
       ha-icon-button {
-        --mdc-icon-button-size: 24px;
-        padding: 2px;
+        margin-right: -24px;
         color: var(--secondary-text-color);
       }
+      ha-textfield {
+        display: block;
+      }
     `;
   }
 }

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

@@ -1,5 +1,4 @@
 import "../../../../components/ha-form/ha-form";
-import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import {
@@ -24,7 +23,7 @@ import { EntityConfig } from "../../entity-rows/types";
 import { LovelaceCardEditor } from "../../types";
 import { processEditorEntities } from "../process-editor-entities";
 import { entitiesConfigStruct } from "../structs/entities-struct";
-import { EditorTarget, EntitiesEditorEvent } from "../types";
+import { EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { HaFormSchema } from "../../../../components/ha-form/types";
@@ -127,10 +126,6 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
     if (!this._config || !this.hass) {
       return;
     }
-    const target = ev.target! as EditorTarget;
-    if (!target.configValue) {
-      return;
-    }
 
     const value = ev.detail.value;
 

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

@@ -1,4 +1,3 @@
-import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { assert, object, optional, string, assign } from "superstruct";