Replace remaining paper inputs (#19292)

hassio/src/components/supervisor-backup-content.ts

@@ -1,6 +1,4 @@
 import { mdiFolder, mdiPuzzle } from "@mdi/js";
-import "@polymer/paper-input/paper-input";
-import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
   CSSResultGroup,
   LitElement,
@@ -16,6 +14,7 @@ import { formatDateTime } from "../../../src/common/datetime/format_date_time";
 import { LocalizeFunc } from "../../../src/common/translations/localize";
 import "../../../src/components/ha-checkbox";
 import "../../../src/components/ha-formfield";
+import "../../../src/components/ha-textfield";
 import "../../../src/components/ha-radio";
 import type { HaRadio } from "../../../src/components/ha-radio";
 import {
@@ -25,12 +24,9 @@ import {
 } from "../../../src/data/hassio/backup";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import { mdiHomeAssistant } from "../../../src/resources/home-assistant-logo-svg";
-import {
+import { HomeAssistant, TranslationDict } from "../../../src/types";
-  HomeAssistant,
-  TranslationDict,
-  ValueChangedEvent,
-} from "../../../src/types";
 import "./supervisor-formfield-label";
+import type { HaTextField } from "../../../src/components/ha-textfield";
 
 type BackupOrRestoreKey = keyof TranslationDict["supervisor"]["backup"] &
   keyof TranslationDict["ui"]["panel"]["page-onboarding"]["restore"];
@@ -100,7 +96,7 @@ export class SupervisorBackupContent extends LitElement {
 
   @property() public confirmBackupPassword = "";
 
-  @query("paper-input, ha-radio, ha-checkbox", true) private _focusTarget;
+  @query("ha-textfield, ha-radio, ha-checkbox", true) private _focusTarget;
 
   public willUpdate(changedProps) {
     super.willUpdate(changedProps);
@@ -151,13 +147,13 @@ export class SupervisorBackupContent extends LitElement {
                 )
               : this.backup.date}
           </div>`
-        : html`<paper-input
+        : html`<ha-textfield
             name="backupName"
             .label=${this._localize("name")}
             .value=${this.backupName}
-            @value-changed=${this._handleTextValueChanged}
+            @change=${this._handleTextValueChanged}
           >
-          </paper-input>`}
+          </ha-textfield>`}
       ${!this.backup || this.backup.type === "full"
         ? html`<div class="sub-header">
               ${!this.backup
@@ -265,23 +261,23 @@ export class SupervisorBackupContent extends LitElement {
         : ""}
       ${this.backupHasPassword
         ? html`
-            <paper-input
+            <ha-textfield
               .label=${this._localize("password")}
               type="password"
               name="backupPassword"
               .value=${this.backupPassword}
-              @value-changed=${this._handleTextValueChanged}
+              @change=${this._handleTextValueChanged}
             >
-            </paper-input>
+            </ha-textfield>
             ${!this.backup
-              ? html` <paper-input
+              ? html`<ha-textfield
                   .label=${this._localize("confirm_password")}
                   type="password"
                   name="confirmBackupPassword"
                   .value=${this.confirmBackupPassword}
-                  @value-changed=${this._handleTextValueChanged}
+                  @change=${this._handleTextValueChanged}
                 >
-                </paper-input>`
+                </ha-textfield>`
               : ""}
           `
         : ""}
@@ -429,9 +425,9 @@ export class SupervisorBackupContent extends LitElement {
     this[input.name] = input.value;
   }
 
-  private _handleTextValueChanged(ev: ValueChangedEvent<string>) {
+  private _handleTextValueChanged(ev: InputEvent) {
-    const input = ev.currentTarget as PaperInputElement;
+    const input = ev.currentTarget as HaTextField;
-    this[input.name!] = ev.detail.value;
+    this[input.name!] = input.value;
   }
 
   private _toggleHasPassword(): void {

hassio/src/dialogs/network/dialog-hassio-network.ts

@@ -4,7 +4,6 @@ import "@material/mwc-list/mwc-list-item";
 import "@material/mwc-tab";
 import "@material/mwc-tab-bar";
 import { mdiClose } from "@mdi/js";
-import { PaperInputElement } from "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
@@ -14,6 +13,7 @@ import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-expansion-panel";
 import "../../../../src/components/ha-formfield";
+import "../../../../src/components/ha-textfield";
 import "../../../../src/components/ha-header-bar";
 import "../../../../src/components/ha-icon-button";
 import "../../../../src/components/ha-radio";
@@ -34,6 +34,7 @@ import { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
 import { HassioNetworkDialogParams } from "./show-dialog-network";
+import type { HaTextField } from "../../../../src/components/ha-textfield";
 
 const IP_VERSIONS = ["ipv4", "ipv6"];
 
@@ -245,7 +246,7 @@ export class DialogHassioNetwork
                       ${this._wifiConfiguration.auth === "wpa-psk" ||
                       this._wifiConfiguration.auth === "wep"
                         ? html`
-                            <paper-input
+                            <ha-textfield
                               class="flex-auto"
                               type="password"
                               id="psk"
@@ -253,10 +254,9 @@ export class DialogHassioNetwork
                                 "dialog.network.wifi_password"
                               )}
                               version="wifi"
-                              @value-changed=${this
+                              @change=${this._handleInputValueChangedWifi}
-                                ._handleInputValueChangedWifi}
                             >
-                            </paper-input>
+                            </ha-textfield>
                           `
                         : ""}
                     `
@@ -358,33 +358,33 @@ export class DialogHassioNetwork
         </div>
         ${this._interface![version].method === "static"
           ? html`
-              <paper-input
+              <ha-textfield
                 class="flex-auto"
                 id="address"
                 .label=${this.supervisor.localize("dialog.network.ip_netmask")}
                 .version=${version}
                 .value=${this._toString(this._interface![version].address)}
-                @value-changed=${this._handleInputValueChanged}
+                @change=${this._handleInputValueChanged}
               >
-              </paper-input>
+              </ha-textfield>
-              <paper-input
+              <ha-textfield
                 class="flex-auto"
                 id="gateway"
                 .label=${this.supervisor.localize("dialog.network.gateway")}
                 .version=${version}
                 .value=${this._interface![version].gateway}
-                @value-changed=${this._handleInputValueChanged}
+                @change=${this._handleInputValueChanged}
               >
-              </paper-input>
+              </ha-textfield>
-              <paper-input
+              <ha-textfield
                 class="flex-auto"
                 id="nameservers"
                 .label=${this.supervisor.localize("dialog.network.dns_servers")}
                 .version=${version}
                 .value=${this._toString(this._interface![version].nameservers)}
-                @value-changed=${this._handleInputValueChanged}
+                @change=${this._handleInputValueChanged}
               >
-              </paper-input>
+              </ha-textfield>
             `
           : ""}
       </ha-expansion-panel>
@@ -517,11 +517,11 @@ export class DialogHassioNetwork
     this.requestUpdate("_wifiConfiguration");
   }
 
-  private _handleInputValueChanged(ev: CustomEvent): void {
+  private _handleInputValueChanged(ev: Event): void {
-    const value: string | null | undefined = (ev.target as PaperInputElement)
+    const source = ev.target as HaTextField;
-      .value;
+    const value = source.value;
     const version = (ev.target as any).version as "ipv4" | "ipv6";
-    const id = (ev.target as PaperInputElement).id;
+    const id = source.id;
 
     if (
       !value ||
@@ -535,10 +535,10 @@ export class DialogHassioNetwork
     this._interface[version]![id] = value;
   }
 
-  private _handleInputValueChangedWifi(ev: CustomEvent): void {
+  private _handleInputValueChangedWifi(ev: Event): void {
-    const value: string | null | undefined = (ev.target as PaperInputElement)
+    const source = ev.target as HaTextField;
-      .value;
+    const value = source.value;
-    const id = (ev.target as PaperInputElement).id;
+    const id = source.id;
 
     if (
       !value ||
@@ -630,7 +630,7 @@ export class DialogHassioNetwork
           --expansion-panel-summary-padding: 0 16px;
           margin: 4px 0;
         }
-        paper-input {
+        ha-textfield {
           padding: 0 14px;
         }
         mwc-list-item {

hassio/src/dialogs/repositories/dialog-hassio-repositories.ts

@@ -1,7 +1,5 @@
 import "@material/mwc-button/mwc-button";
 import { mdiDelete, mdiDeleteOff } from "@mdi/js";
-import "@polymer/paper-input/paper-input";
-import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
@@ -27,12 +25,14 @@ import {
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
 import { HassioRepositoryDialogParams } from "./show-dialog-repositories";
+import type { HaTextField } from "../../../../src/components/ha-textfield";
+import "../../../../src/components/ha-textfield";
 
 @customElement("dialog-hassio-repositories")
 class HassioRepositoriesDialog extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @query("#repository_input", true) private _optionInput?: PaperInputElement;
+  @query("#repository_input", true) private _optionInput?: HaTextField;
 
   @state() private _repositories?: HassioAddonRepository[];
 
@@ -145,7 +145,7 @@ class HassioRepositoriesDialog extends LitElement {
               )
             : html`<paper-item> No repositories </paper-item>`}
           <div class="layout horizontal bottom">
-            <paper-input
+            <ha-textfield
               class="flex-auto"
               id="repository_input"
               .value=${this._dialogParams!.url || ""}
@@ -154,7 +154,7 @@ class HassioRepositoriesDialog extends LitElement {
               )}
               @keydown=${this._handleKeyAdd}
               dialogInitialFocus
-            ></paper-input>
+            ></ha-textfield>
             <mwc-button @click=${this._addRepository}>
               ${this._processing
                 ? html`<ha-circular-progress

package.json

@@ -83,7 +83,6 @@
     "@material/web": "=1.1.1",
     "@mdi/js": "7.4.47",
     "@mdi/svg": "7.4.47",
-    "@polymer/paper-input": "3.2.1",
     "@polymer/paper-item": "3.0.1",
     "@polymer/paper-listbox": "3.0.1",
     "@polymer/paper-tabs": "3.1.0",

yarn.lock

@@ -3430,18 +3430,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polymer/iron-autogrow-textarea@npm:^3.0.0-pre.26":
-  version: 3.0.3
-  resolution: "@polymer/iron-autogrow-textarea@npm:3.0.3"
-  dependencies:
-    "@polymer/iron-behaviors": "npm:^3.0.0-pre.26"
-    "@polymer/iron-flex-layout": "npm:^3.0.0-pre.26"
-    "@polymer/iron-validatable-behavior": "npm:^3.0.0-pre.26"
-    "@polymer/polymer": "npm:^3.0.0"
-  checksum: bf11bd05a40623f6609bb9156e299414b15c7bb8c170c4f542f6586cf9273940a19f0f329047c7adf941a90ddc0deefc06be42c8770c6ca3637debad67c9456b
-  languageName: node
-  linkType: hard
-
 "@polymer/iron-behaviors@npm:^3.0.0-pre.26":
   version: 3.0.1
   resolution: "@polymer/iron-behaviors@npm:3.0.1"
@@ -3511,17 +3499,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polymer/iron-input@npm:^3.0.0-pre.26":
-  version: 3.0.1
-  resolution: "@polymer/iron-input@npm:3.0.1"
-  dependencies:
-    "@polymer/iron-a11y-announcer": "npm:^3.0.0-pre.26"
-    "@polymer/iron-validatable-behavior": "npm:^3.0.0-pre.26"
-    "@polymer/polymer": "npm:^3.0.0"
-  checksum: b607da1b2962038cb12d6c220b98e49a9e9552ae89c798167d39d7caffea8671ce8d6b62721f386e623ddd535694248459bf5505b6ef335c2fbb36cf6ca373a9
-  languageName: node
-  linkType: hard
-
 "@polymer/iron-menu-behavior@npm:^3.0.0-pre.26":
   version: 3.0.2
   resolution: "@polymer/iron-menu-behavior@npm:3.0.2"
@@ -3607,21 +3584,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polymer/paper-input@npm:3.2.1":
-  version: 3.2.1
-  resolution: "@polymer/paper-input@npm:3.2.1"
-  dependencies:
-    "@polymer/iron-a11y-keys-behavior": "npm:^3.0.0-pre.26"
-    "@polymer/iron-autogrow-textarea": "npm:^3.0.0-pre.26"
-    "@polymer/iron-behaviors": "npm:^3.0.0-pre.26"
-    "@polymer/iron-form-element-behavior": "npm:^3.0.0-pre.26"
-    "@polymer/iron-input": "npm:^3.0.0-pre.26"
-    "@polymer/paper-styles": "npm:^3.0.0-pre.26"
-    "@polymer/polymer": "npm:^3.0.0"
-  checksum: d337b8c74351080e224aaa53233cd372b5f5121ecee13a4d218e42e6e5be23b21dcdd03e5019978c422436a14762c7b373b5073bb1988b11021d2103c32e3efe
-  languageName: node
-  linkType: hard
-
 "@polymer/paper-item@npm:3.0.1":
   version: 3.0.1
   resolution: "@polymer/paper-item@npm:3.0.1"
@@ -9582,7 +9544,6 @@ __metadata:
     "@octokit/plugin-retry": "npm:6.0.1"
     "@octokit/rest": "npm:20.0.2"
     "@open-wc/dev-server-hmr": "npm:0.1.4"
-    "@polymer/paper-input": "npm:3.2.1"
     "@polymer/paper-item": "npm:3.0.1"
     "@polymer/paper-listbox": "npm:3.0.1"
     "@polymer/paper-tabs": "npm:3.1.0"