From b1f369a3556b6791db39794ada10de44063ba529 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 21 Feb 2022 23:09:13 +0100
Subject: [PATCH] Paper input migrations (#11766)

---
 src/dialogs/generic/dialog-box.ts             | 13 ++--
 .../controls/more-info-media_player.ts        |  1 -
 src/panels/config/scene/ha-scene-editor.ts    | 18 +++---
 .../config/script/blueprint-script-editor.ts  | 11 ++--
 src/panels/profile/ha-change-password-card.ts | 61 ++++++++++---------
 src/panels/profile/ha-pick-theme-row.ts       | 21 ++++---
 6 files changed, 64 insertions(+), 61 deletions(-)

diff --git a/src/dialogs/generic/dialog-box.ts b/src/dialogs/generic/dialog-box.ts
index 4fc1c09cde..2ca11e4ac5 100644
--- a/src/dialogs/generic/dialog-box.ts
+++ b/src/dialogs/generic/dialog-box.ts
@@ -1,12 +1,11 @@
 import "@material/mwc-button/mwc-button";
-import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-dialog";
 import "../../components/ha-switch";
-import { PolymerChangedEvent } from "../../polymer-types";
+import "../../components/ha-textfield";
 import { haStyleDialog } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 import { DialogBoxParams } from "./show-dialog-box";
@@ -71,18 +70,18 @@ class DialogBox extends LitElement {
             : ""}
           ${this._params.prompt
             ? html`
-                <paper-input
+                <ha-textfield
                   dialogInitialFocus
                   .value=${this._value}
                   @keyup=${this._handleKeyUp}
-                  @value-changed=${this._valueChanged}
+                  @change=${this._valueChanged}
                   .label=${this._params.inputLabel
                     ? this._params.inputLabel
                     : ""}
                   .type=${this._params.inputType
                     ? this._params.inputType
                     : "text"}
-                ></paper-input>
+                ></ha-textfield>
               `
             : ""}
         </div>
@@ -107,8 +106,8 @@ class DialogBox extends LitElement {
     `;
   }
 
-  private _valueChanged(ev: PolymerChangedEvent<string>) {
-    this._value = ev.detail.value;
+  private _valueChanged(ev) {
+    this._value = ev.target.value;
   }
 
   private _dismiss(): void {
diff --git a/src/dialogs/more-info/controls/more-info-media_player.ts b/src/dialogs/more-info/controls/more-info-media_player.ts
index a721ae0a40..c415d322e9 100644
--- a/src/dialogs/more-info/controls/more-info-media_player.ts
+++ b/src/dialogs/more-info/controls/more-info-media_player.ts
@@ -10,7 +10,6 @@ import {
   mdiVolumeOff,
   mdiVolumePlus,
 } from "@mdi/js";
-import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
diff --git a/src/panels/config/scene/ha-scene-editor.ts b/src/panels/config/scene/ha-scene-editor.ts
index ee2ab401cd..3ecd3b026a 100644
--- a/src/panels/config/scene/ha-scene-editor.ts
+++ b/src/panels/config/scene/ha-scene-editor.ts
@@ -28,12 +28,13 @@ import { navigate } from "../../../common/navigate";
 import { computeRTL } from "../../../common/util/compute_rtl";
 import "../../../components/device/ha-device-picker";
 import "../../../components/entity/ha-entities-picker";
+import "../../../components/ha-area-picker";
 import "../../../components/ha-card";
 import "../../../components/ha-fab";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-picker";
-import "../../../components/ha-area-picker";
 import "../../../components/ha-svg-icon";
+import "../../../components/ha-textfield";
 import {
   computeDeviceName,
   DeviceRegistryEntry,
@@ -288,14 +289,14 @@ export class HaSceneEditor extends SubscribeMixin(
                   </div>
                   <ha-card>
                     <div class="card-content">
-                      <paper-input
+                      <ha-textfield
                         .value=${this._config.name}
                         .name=${"name"}
-                        @value-changed=${this._valueChanged}
-                        label=${this.hass.localize(
+                        @change=${this._valueChanged}
+                        .label=${this.hass.localize(
                           "ui.panel.config.scene.editor.name"
                         )}
-                      ></paper-input>
+                      ></ha-textfield>
                       <ha-icon-picker
                         .label=${this.hass.localize(
                           "ui.panel.config.scene.editor.icon"
@@ -701,14 +702,14 @@ export class HaSceneEditor extends SubscribeMixin(
     this._dirty = true;
   }
 
-  private _valueChanged(ev: CustomEvent) {
+  private _valueChanged(ev: Event) {
     ev.stopPropagation();
     const target = ev.target as any;
     const name = target.name;
     if (!name) {
       return;
     }
-    let newVal = ev.detail.value;
+    let newVal = (ev as CustomEvent).detail?.value ?? target.value;
     if (target.type === "number") {
       newVal = Number(newVal);
     }
@@ -990,6 +991,9 @@ export class HaSceneEditor extends SubscribeMixin(
           display: block;
           margin-top: 8px;
         }
+        ha-textfield {
+          display: block;
+        }
       `,
     ];
   }
diff --git a/src/panels/config/script/blueprint-script-editor.ts b/src/panels/config/script/blueprint-script-editor.ts
index 8ea1d163fd..738fdb8419 100644
--- a/src/panels/config/script/blueprint-script-editor.ts
+++ b/src/panels/config/script/blueprint-script-editor.ts
@@ -1,4 +1,3 @@
-import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
@@ -6,6 +5,7 @@ import "../../../components/ha-blueprint-picker";
 import "../../../components/ha-card";
 import "../../../components/ha-circular-progress";
 import "../../../components/ha-markdown";
+import "../../../components/ha-textfield";
 import "../../../components/ha-selector/ha-selector";
 import "../../../components/ha-settings-row";
 
@@ -101,15 +101,14 @@ export class HaBlueprintScriptEditor 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>`}
+                              @change=${this._inputChanged}
+                            ></ha-textfield>`}
                       </ha-settings-row>`
                   )
                 : html`<p class="padding">
@@ -145,7 +144,7 @@ export class HaBlueprintScriptEditor 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) ||
diff --git a/src/panels/profile/ha-change-password-card.ts b/src/panels/profile/ha-change-password-card.ts
index 4ba20e8478..e0ad18412a 100644
--- a/src/panels/profile/ha-change-password-card.ts
+++ b/src/panels/profile/ha-change-password-card.ts
@@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "@polymer/paper-input/paper-input";
 import {
   css,
   CSSResultGroup,
@@ -11,8 +10,10 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import "../../components/ha-card";
 import "../../components/ha-circular-progress";
+import "../../components/ha-textfield";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
+import "../../components/ha-alert";
 
 @customElement("ha-change-password-card")
 class HaChangePasswordCard extends LitElement {
@@ -24,11 +25,11 @@ class HaChangePasswordCard extends LitElement {
 
   @state() private _errorMsg?: string;
 
-  @state() private _currentPassword?: string;
+  @state() private _currentPassword = "";
 
-  @state() private _password?: string;
+  @state() private _password = "";
 
-  @state() private _passwordConfirm?: string;
+  @state() private _passwordConfirm = "";
 
   protected render(): TemplateResult {
     return html`
@@ -40,46 +41,48 @@ class HaChangePasswordCard extends LitElement {
         >
           <div class="card-content">
             ${this._errorMsg
-              ? html` <div class="error">${this._errorMsg}</div> `
+              ? html`<ha-alert alert-type="error">${this._errorMsg}</ha-alert>`
               : ""}
             ${this._statusMsg
-              ? html` <div class="status">${this._statusMsg}</div> `
+              ? html`<ha-alert alert-type="success"
+                  >${this._statusMsg}</ha-alert
+                >`
               : ""}
 
-            <paper-input
+            <ha-textfield
               id="currentPassword"
               .label=${this.hass.localize(
                 "ui.panel.profile.change_password.current_password"
               )}
               type="password"
               .value=${this._currentPassword}
-              @value-changed=${this._currentPasswordChanged}
+              @input=${this._currentPasswordChanged}
               required
-            ></paper-input>
+            ></ha-textfield>
 
             ${this._currentPassword
-              ? html` <paper-input
+              ? html`<ha-textfield
                     .label=${this.hass.localize(
                       "ui.panel.profile.change_password.new_password"
                     )}
                     name="password"
                     type="password"
                     .value=${this._password}
-                    @value-changed=${this._newPasswordChanged}
+                    @change=${this._newPasswordChanged}
                     required
                     auto-validate
-                  ></paper-input>
-                  <paper-input
+                  ></ha-textfield>
+                  <ha-textfield
                     .label=${this.hass.localize(
                       "ui.panel.profile.change_password.confirm_new_password"
                     )}
                     name="passwordConfirm"
                     type="password"
                     .value=${this._passwordConfirm}
-                    @value-changed=${this._newPasswordConfirmChanged}
+                    @input=${this._newPasswordConfirmChanged}
                     required
                     auto-validate
-                  ></paper-input>`
+                  ></ha-textfield>`
               : ""}
           </div>
 
@@ -101,16 +104,16 @@ class HaChangePasswordCard extends LitElement {
     `;
   }
 
-  private _currentPasswordChanged(ev: CustomEvent) {
-    this._currentPassword = ev.detail.value;
+  private _currentPasswordChanged(ev) {
+    this._currentPassword = ev.target.value;
   }
 
-  private _newPasswordChanged(ev: CustomEvent) {
-    this._password = ev.detail.value;
+  private _newPasswordChanged(ev) {
+    this._password = ev.target.value;
   }
 
-  private _newPasswordConfirmChanged(ev: CustomEvent) {
-    this._passwordConfirm = ev.detail.value;
+  private _newPasswordConfirmChanged(ev) {
+    this._passwordConfirm = ev.target.value;
   }
 
   protected firstUpdated(changedProps: PropertyValues) {
@@ -162,23 +165,21 @@ class HaChangePasswordCard extends LitElement {
     this._statusMsg = this.hass.localize(
       "ui.panel.profile.change_password.success"
     );
-    this._currentPassword = undefined;
-    this._password = undefined;
-    this._passwordConfirm = undefined;
+    this._currentPassword = "";
+    this._password = "";
+    this._passwordConfirm = "";
   }
 
   static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
-        .error {
-          color: var(--error-color);
-        }
-        .status {
-          color: var(--primary-color);
+        ha-textfield {
+          margin-top: 8px;
+          display: block;
         }
         #currentPassword {
-          margin-top: -8px;
+          margin-top: 0;
         }
       `,
     ];
diff --git a/src/panels/profile/ha-pick-theme-row.ts b/src/panels/profile/ha-pick-theme-row.ts
index 214cc20515..d9fe4f78c2 100644
--- a/src/panels/profile/ha-pick-theme-row.ts
+++ b/src/panels/profile/ha-pick-theme-row.ts
@@ -1,5 +1,6 @@
 import "@material/mwc-button/mwc-button";
-import "@polymer/paper-input/paper-input";
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select/mwc-select";
 import {
   css,
   CSSResultGroup,
@@ -14,14 +15,13 @@ import "../../components/ha-formfield";
 import "../../components/ha-radio";
 import type { HaRadio } from "../../components/ha-radio";
 import "../../components/ha-settings-row";
+import "../../components/ha-textfield";
 import {
-  DEFAULT_PRIMARY_COLOR,
   DEFAULT_ACCENT_COLOR,
+  DEFAULT_PRIMARY_COLOR,
 } from "../../resources/ha-style";
 import { HomeAssistant } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
-import "@material/mwc-select/mwc-select";
-import "@material/mwc-list/mwc-list-item";
 
 @customElement("ha-pick-theme-row")
 export class HaPickThemeRow extends LitElement {
@@ -115,8 +115,8 @@ export class HaPickThemeRow extends LitElement {
               </ha-radio>
             </ha-formfield>
             ${curTheme === "default"
-              ? html` <div class="color-pickers">
-                  <paper-input
+              ? html`<div class="color-pickers">
+                  <ha-textfield
                     .value=${themeSettings?.primaryColor ||
                     DEFAULT_PRIMARY_COLOR}
                     type="color"
@@ -125,8 +125,8 @@ export class HaPickThemeRow extends LitElement {
                     )}
                     .name=${"primaryColor"}
                     @change=${this._handleColorChange}
-                  ></paper-input>
-                  <paper-input
+                  ></ha-textfield>
+                  <ha-textfield
                     .value=${themeSettings?.accentColor || DEFAULT_ACCENT_COLOR}
                     type="color"
                     .label=${this.hass.localize(
@@ -134,7 +134,7 @@ export class HaPickThemeRow extends LitElement {
                     )}
                     .name=${"accentColor"}
                     @change=${this._handleColorChange}
-                  ></paper-input>
+                  ></ha-textfield>
                   ${themeSettings?.primaryColor || themeSettings?.accentColor
                     ? html` <mwc-button @click=${this._resetColors}>
                         ${this.hass.localize("ui.panel.profile.themes.reset")}
@@ -228,7 +228,8 @@ export class HaPickThemeRow extends LitElement {
         align-items: center;
         flex-grow: 1;
       }
-      paper-input {
+      ha-textfield {
+        --text-field-padding: 8px;
         min-width: 75px;
         flex-grow: 1;
         margin: 0 4px;