From e8aa08b717238c13e34ba3365633016f39ca7d38 Mon Sep 17 00:00:00 2001
From: Simon Lamon <32477463+silamon@users.noreply.github.com>
Date: Wed, 2 Aug 2023 10:39:51 +0200
Subject: [PATCH] Replace paper-input elements in supervisor network dialog
 (#17387)

---
 .../config/network/supervisor-network.ts      | 71 +++++++++----------
 1 file changed, 34 insertions(+), 37 deletions(-)

diff --git a/src/panels/config/network/supervisor-network.ts b/src/panels/config/network/supervisor-network.ts
index 114649620d..faaa0a2100 100644
--- a/src/panels/config/network/supervisor-network.ts
+++ b/src/panels/config/network/supervisor-network.ts
@@ -4,7 +4,6 @@ import "@material/mwc-list/mwc-list-item";
 import "@material/mwc-tab";
 import "@material/mwc-tab-bar";
 import { mdiDotsVertical } 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";
@@ -15,7 +14,6 @@ import "../../../components/ha-circular-progress";
 import "../../../components/ha-expansion-panel";
 import "../../../components/ha-formfield";
 import "../../../components/ha-icon-button";
-import "../../../components/ha-radio";
 import { extractApiErrorMessage } from "../../../data/hassio/common";
 import {
   AccessPoints,
@@ -31,6 +29,10 @@ import {
 } from "../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../types";
 import { showIPDetailDialog } from "./show-ip-detail-dialog";
+import "../../../components/ha-textfield";
+import type { HaTextField } from "../../../components/ha-textfield";
+import "../../../components/ha-radio";
+import type { HaRadio } from "../../../components/ha-radio";
 
 const IP_VERSIONS = ["ipv4", "ipv6"];
 
@@ -213,18 +215,16 @@ export class HassioNetwork extends LitElement {
                       ${this._wifiConfiguration.auth === "wpa-psk" ||
                       this._wifiConfiguration.auth === "wep"
                         ? html`
-                            <paper-input
-                              class="flex-auto"
+                            <ha-textfield
                               type="password"
                               id="psk"
                               .label=${this.hass.localize(
                                 "ui.panel.config.network.supervisor.wifi_password"
                               )}
-                              version="wifi"
-                              @value-changed=${this
-                                ._handleInputValueChangedWifi}
+                              .version="wifi"
+                              @change=${this._handleInputValueChangedWifi}
                             >
-                            </paper-input>
+                            </ha-textfield>
                           `
                         : ""}
                     `
@@ -348,39 +348,36 @@ export class HassioNetwork extends LitElement {
         </div>
         ${this._interface![version].method === "static"
           ? html`
-              <paper-input
-                class="flex-auto"
+              <ha-textfield
                 id="address"
                 .label=${this.hass.localize(
                   "ui.panel.config.network.supervisor.ip_netmask"
                 )}
                 .version=${version}
                 .value=${this._toString(this._interface![version].address)}
-                @value-changed=${this._handleInputValueChanged}
+                @change=${this._handleInputValueChanged}
               >
-              </paper-input>
-              <paper-input
-                class="flex-auto"
+              </ha-textfield>
+              <ha-textfield
                 id="gateway"
                 .label=${this.hass.localize(
                   "ui.panel.config.network.supervisor.gateway"
                 )}
                 .version=${version}
                 .value=${this._interface![version].gateway}
-                @value-changed=${this._handleInputValueChanged}
+                @change=${this._handleInputValueChanged}
               >
-              </paper-input>
-              <paper-input
-                class="flex-auto"
+              </ha-textfield>
+              <ha-textfield
                 id="nameservers"
                 .label=${this.hass.localize(
                   "ui.panel.config.network.supervisor.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>
@@ -487,8 +484,9 @@ export class HassioNetwork extends LitElement {
     this._interface = { ...this._interfaces[ev.detail.index] };
   }
 
-  private _handleRadioValueChanged(ev: CustomEvent): void {
-    const value = (ev.target as any).value as "disabled" | "auto" | "static";
+  private _handleRadioValueChanged(ev: Event): void {
+    const source = ev.target as HaRadio;
+    const value = source.value as "disabled" | "auto" | "static";
     const version = (ev.target as any).version as "ipv4" | "ipv6";
 
     if (
@@ -504,21 +502,19 @@ export class HassioNetwork extends LitElement {
     this.requestUpdate("_interface");
   }
 
-  private _handleRadioValueChangedAp(ev: CustomEvent): void {
-    const value = (ev.target as any).value as string as
-      | "open"
-      | "wep"
-      | "wpa-psk";
+  private _handleRadioValueChangedAp(ev: Event): void {
+    const source = ev.target as HaRadio;
+    const value = source.value as string as "open" | "wep" | "wpa-psk";
     this._wifiConfiguration!.auth = value;
     this._dirty = true;
     this.requestUpdate("_wifiConfiguration");
   }
 
-  private _handleInputValueChanged(ev: CustomEvent): void {
-    const value: string | null | undefined = (ev.target as PaperInputElement)
-      .value;
+  private _handleInputValueChanged(ev: Event): void {
+    const source = ev.target as HaTextField;
+    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 ||
@@ -532,10 +528,10 @@ export class HassioNetwork extends LitElement {
     this._interface[version]![id] = value;
   }
 
-  private _handleInputValueChangedWifi(ev: CustomEvent): void {
-    const value: string | null | undefined = (ev.target as PaperInputElement)
-      .value;
-    const id = (ev.target as PaperInputElement).id;
+  private _handleInputValueChangedWifi(ev: Event): void {
+    const source = ev.target as HaTextField;
+    const value = source.value;
+    const id = source.id;
 
     if (
       !value ||
@@ -573,8 +569,9 @@ export class HassioNetwork extends LitElement {
           --expansion-panel-summary-padding: 0 16px;
           margin: 4px 0;
         }
-        paper-input {
-          padding: 0 14px;
+        ha-textfield {
+          display: block;
+          margin-top: 16px;
         }
         mwc-list-item {
           --mdc-list-side-padding: 10px;