Migrate single textfields (#11799)

* Migrate single textfields

* Update ha-config-name-form.ts

* Update dialog-area-registry-detail.ts

* Update manual-automation-editor.ts

* Update manual-automation-editor.ts

* required to number selector fix script

* review

src/components/ha-selector/ha-selector-number.ts

@@ -19,6 +19,8 @@ export class HaNumberSelector extends LitElement {
 
   @property() public label?: string;
 
+  @property({ type: Boolean }) public required = true;
+
   @property({ type: Boolean }) public disabled = false;
 
   protected render() {
@@ -29,6 +31,7 @@ export class HaNumberSelector extends LitElement {
               .value=${this._value}
               .step=${this.selector.number.step ?? 1}
               .disabled=${this.disabled}
+              .required=${this.required}
               pin
               ignore-bar-touch
               @change=${this._handleSliderChange}
@@ -43,9 +46,10 @@ export class HaNumberSelector extends LitElement {
         class=${classMap({ single: this.selector.number.mode === "box" })}
         .min=${this.selector.number.min}
         .max=${this.selector.number.max}
-        .value=${this.value}
+        .value=${this.value || ""}
         .step=${this.selector.number.step ?? 1}
         .disabled=${this.disabled}
+        .required=${this.required}
         .suffix=${this.selector.number.unit_of_measurement}
         type="number"
         autoValidate
@@ -56,14 +60,16 @@ export class HaNumberSelector extends LitElement {
   }
 
   private get _value() {
-    return this.value ?? 0;
+    return this.value ?? (this.selector.number.min || 0);
   }
 
   private _handleInputChange(ev) {
     ev.stopPropagation();
     const value =
       ev.target.value === "" || isNaN(ev.target.value)
-        ? undefined
+        ? this.required
+          ? this.selector.number.min || 0
+          : undefined
         : Number(ev.target.value);
     if (this.value === value) {
       return;

src/panels/config/areas/dialog-area-registry-detail.ts

@@ -1,10 +1,10 @@
 import "@material/mwc-button";
-import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-alert";
+import "../../../components/ha-textfield";
 import "../../../components/ha-picture-upload";
 import type { HaPictureUpload } from "../../../components/ha-picture-upload";
 import { AreaRegistryEntryMutableParams } from "../../../data/area_registry";
@@ -69,7 +69,7 @@ class DialogAreaDetail extends LitElement {
       >
         <div>
           ${this._error
-            ? html` <ha-alert alert-type="error">${this._error}</ha-alert> `
+            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
             : ""}
           <div class="form">
             ${entry
@@ -83,17 +83,16 @@ class DialogAreaDetail extends LitElement {
                 `
               : ""}
 
-            <paper-input
+            <ha-textfield
               .value=${this._name}
-              @value-changed=${this._nameChanged}
-              @keyup=${this._handleKeyup}
+              @input=${this._nameChanged}
               .label=${this.hass.localize("ui.panel.config.areas.editor.name")}
               .errorMessage=${this.hass.localize(
                 "ui.panel.config.areas.editor.name_required"
               )}
               .invalid=${nameInvalid}
               dialogInitialFocus
-            ></paper-input>
+            ></ha-textfield>
             <ha-picture-upload
               .hass=${this.hass}
               .value=${this._picture}
@@ -132,15 +131,9 @@ class DialogAreaDetail extends LitElement {
     return this._name.trim() !== "";
   }
 
-  private _handleKeyup(ev: KeyboardEvent) {
-    if (ev.keyCode === 13 && this._isNameValid() && !this._submitting) {
-      this._updateEntry();
-    }
-  }
-
-  private _nameChanged(ev: PolymerChangedEvent<string>) {
+  private _nameChanged(ev) {
     this._error = undefined;
-    this._name = ev.detail.value;
+    this._name = ev.target.value;
   }
 
   private _pictureChanged(ev: PolymerChangedEvent<string | null>) {
@@ -188,6 +181,10 @@ class DialogAreaDetail extends LitElement {
         .form {
           padding-bottom: 24px;
         }
+        ha-textfield {
+          display: block;
+          margin-bottom: 16px;
+        }
       `,
     ];
   }

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

@@ -99,7 +99,7 @@ export class HaManualAutomationEditor extends LitElement {
               .label=${this.hass.localize(
                 "ui.panel.config.automation.editor.modes.label"
               )}
-              .value=${this.config.mode ? MODES.indexOf(this.config.mode) : 0}
+              .value=${this.config.mode}
               @selected=${this._modeChanged}
               fixedMenuPosition
             >
@@ -115,7 +115,7 @@ export class HaManualAutomationEditor extends LitElement {
             </mwc-select>
             ${this.config.mode && MODES_MAX.includes(this.config.mode)
               ? html`
-                  <ha-textfield
+                  <br /><ha-textfield
                     .label=${this.hass.localize(
                       `ui.panel.config.automation.editor.max.${this.config.mode}`
                     )}
@@ -123,6 +123,7 @@ export class HaManualAutomationEditor extends LitElement {
                     name="max"
                     .value=${this.config.max || "10"}
                     @change=${this._valueChanged}
+                    class="max"
                   >
                   </ha-textfield>
                 `
@@ -357,8 +358,10 @@ export class HaManualAutomationEditor extends LitElement {
         ha-entity-toggle {
           margin-right: 8px;
         }
-        mwc-select {
-          margin-top: 8px;
+        mwc-select,
+        .max {
+          margin-top: 16px;
+          width: 200px;
         }
       `,
     ];

src/panels/config/blueprint/dialog-import-blueprint.ts

@@ -1,13 +1,13 @@
 import "@material/mwc-button";
-import "@polymer/paper-input/paper-input";
-import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state, query } from "lit/decorators";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-circular-progress";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-expansion-panel";
 import "../../../components/ha-markdown";
+import "../../../components/ha-textfield";
+import type { HaTextField } from "../../../components/ha-textfield";
 import {
   BlueprintImportResult,
   importBlueprint,
@@ -32,7 +32,7 @@ class DialogImportBlueprint extends LitElement {
 
   @state() private _url?: string;
 
-  @query("#input") private _input?: PaperInputElement;
+  @query("#input") private _input?: HaTextField;
 
   public showDialog(params): void {
     this._params = params;
@@ -90,13 +90,13 @@ class DialogImportBlueprint extends LitElement {
                       </ul>
                     `
                   : html`
-                      <paper-input
+                      <ha-textfield
                         id="input"
-                        .value=${this._result.suggested_filename}
+                        .value=${this._result.suggested_filename || ""}
                         .label=${this.hass.localize(
                           "ui.panel.config.blueprint.add.file_name"
                         )}
-                      ></paper-input>
+                      ></ha-textfield>
                     `}
                 <ha-expansion-panel
                   .header=${this.hass.localize(
@@ -116,14 +116,14 @@ class DialogImportBlueprint extends LitElement {
                       "ui.panel.config.blueprint.add.community_forums"
                     )}</a
                   >`
-                )}<paper-input
+                )}<ha-textfield
                   id="input"
                   .label=${this.hass.localize(
                     "ui.panel.config.blueprint.add.url"
                   )}
-                  .value=${this._url}
+                  .value=${this._url || ""}
                   dialogInitialFocus
-                ></paper-input>`}
+                ></ha-textfield>`}
         </div>
         ${!this._result
           ? html`<mwc-button
@@ -212,9 +212,15 @@ class DialogImportBlueprint extends LitElement {
     }
   }
 
-  static get styles(): CSSResultGroup {
-    return haStyleDialog;
-  }
+  static styles = [
+    haStyleDialog,
+    css`
+      ha-textfield {
+        display: block;
+        margin-top: 8px;
+      }
+    `,
+  ];
 }
 
 declare global {

src/panels/config/core/ha-config-name-form.ts

@@ -1,12 +1,11 @@
 import "@material/mwc-button/mwc-button";
-import "@polymer/paper-input/paper-input";
-import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../components/ha-card";
 import { ConfigUpdateValues, saveCoreConfig } from "../../../data/core";
-import type { PolymerChangedEvent } from "../../../polymer-types";
 import type { HomeAssistant } from "../../../types";
+import "../../../components/ha-textfield";
+import type { HaTextField } from "../../../components/ha-textfield";
 
 @customElement("ha-config-name-form")
 class ConfigNameForm extends LitElement {
@@ -34,16 +33,15 @@ class ConfigNameForm extends LitElement {
                 </p>
               `
             : ""}
-          <paper-input
+          <ha-textfield
             class="flex"
             .label=${this.hass.localize(
               "ui.panel.config.core.section.core.core_config.location_name"
             )}
-            name="name"
             .disabled=${disabled}
             .value=${this._nameValue}
-            @value-changed=${this._handleChange}
-          ></paper-input>
+            @changed=${this._handleChange}
+          ></ha-textfield>
         </div>
         <div class="card-actions">
           <mwc-button @click=${this._save} .disabled=${disabled}>
@@ -62,9 +60,9 @@ class ConfigNameForm extends LitElement {
       : this.hass.config.location_name;
   }
 
-  private _handleChange(ev: PolymerChangedEvent<string>) {
-    const target = ev.currentTarget as PaperInputElement;
-    this[`_${target.name}`] = target.value;
+  private _handleChange(ev) {
+    const target = ev.currentTarget as HaTextField;
+    this._name = target.value;
   }
 
   private async _save() {
@@ -85,6 +83,9 @@ class ConfigNameForm extends LitElement {
       .card-actions {
         text-align: right;
       }
+      ha-textfield {
+        display: block;
+      }
     `;
   }
 }

src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts

@@ -1,13 +1,12 @@
 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 { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-area-picker";
 import "../../../../components/ha-dialog";
 import type { HaSwitch } from "../../../../components/ha-switch";
+import "../../../../components/ha-textfield";
 import { computeDeviceName } from "../../../../data/device_registry";
-import { PolymerChangedEvent } from "../../../../polymer-types";
 import { haStyle, haStyleDialog } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
 import { DeviceRegistryDetailDialogParams } from "./show-dialog-device-registry-detail";
@@ -57,16 +56,18 @@ class DialogDeviceRegistryDetail extends LitElement {
         .heading=${computeDeviceName(device, this.hass)}
       >
         <div>
-          ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
+          ${this._error
+            ? html`<ha-alert alert-type="error">${this._error}</ha-alert> `
+            : ""}
           <div class="form">
-            <paper-input
+            <ha-textfield
               .value=${this._nameByUser}
-              @value-changed=${this._nameChanged}
+              @input=${this._nameChanged}
               .label=${this.hass.localize("ui.panel.config.devices.name")}
               .placeholder=${device.name || ""}
               .disabled=${this._submitting}
               dialogInitialFocus
-            ></paper-input>
+            ></ha-textfield>
             <ha-area-picker
               .hass=${this.hass}
               .value=${this._areaId}
@@ -132,9 +133,9 @@ class DialogDeviceRegistryDetail extends LitElement {
     `;
   }
 
-  private _nameChanged(ev: PolymerChangedEvent<string>): void {
+  private _nameChanged(ev): void {
     this._error = undefined;
-    this._nameByUser = ev.detail.value;
+    this._nameByUser = ev.target.value;
   }
 
   private _areaPicked(event: CustomEvent): void {
@@ -174,8 +175,9 @@ class DialogDeviceRegistryDetail extends LitElement {
         mwc-button.warning {
           margin-right: auto;
         }
-        .error {
-          color: var(--error-color);
+        ha-textfield {
+          display: block;
+          margin-bottom: 16px;
         }
         ha-switch {
           margin-right: 16px;

src/panels/config/person/dialog-person-detail.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -7,6 +6,7 @@ import { computeRTLDirection } from "../../../common/util/compute_rtl";
 import "../../../components/entity/ha-entities-picker";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-formfield";
+import "../../../components/ha-textfield";
 import "../../../components/ha-picture-upload";
 import type { HaPictureUpload } from "../../../components/ha-picture-upload";
 import { adminChangePassword } from "../../../data/auth";
@@ -120,17 +120,17 @@ class DialogPersonDetail extends LitElement {
         <div>
           ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
           <div class="form">
-            <paper-input
+            <ha-textfield
               dialogInitialFocus
               .value=${this._name}
-              @value-changed=${this._nameChanged}
+              @input=${this._nameChanged}
               label=${this.hass!.localize("ui.panel.config.person.detail.name")}
               error-message=${this.hass!.localize(
                 "ui.panel.config.person.detail.name_error_msg"
               )}
               required
               auto-validate
-            ></paper-input>
+            ></ha-textfield>
             <ha-picture-upload
               .hass=${this.hass}
               .value=${this._picture}
@@ -277,9 +277,9 @@ class DialogPersonDetail extends LitElement {
     this._params = undefined;
   }
 
-  private _nameChanged(ev: PolymerChangedEvent<string>) {
+  private _nameChanged(ev) {
     this._error = undefined;
-    this._name = ev.detail.value;
+    this._name = ev.target.value;
   }
 
   private _adminChanged(ev): void {
@@ -460,7 +460,8 @@ class DialogPersonDetail extends LitElement {
         .form {
           padding-bottom: 24px;
         }
-        ha-picture-upload {
+        ha-picture-upload,
+        ha-textfield {
           display: block;
         }
         ha-formfield {

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

@@ -136,10 +136,9 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
       if (currentMode && MODES_MAX.includes(currentMode)) {
         schema.push({
           name: "max",
+          required: true,
           selector: {
-            text: {
-              type: "number",
-            },
+            number: { mode: "box", min: 1, max: Infinity },
           },
         });
       }
@@ -161,11 +160,11 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
 
     const data = {
       mode: MODES[0],
+      icon: undefined,
       max:
         this._config.mode && MODES_MAX.includes(this._config.mode)
           ? 10
           : undefined,
-      icon: undefined,
       ...this._config,
       id: this._entityId,
     };

src/panels/config/tags/dialog-tag-detail.ts

@@ -1,11 +1,12 @@
 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";
+import "../../../components/ha-alert";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-formfield";
 import "../../../components/ha-switch";
+import "../../../components/ha-textfield";
 import { Tag, UpdateTagParams } from "../../../data/tag";
 import { HassDialog } from "../../../dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../resources/styles";
@@ -71,7 +72,9 @@ class DialogTagDetail
         )}
       >
         <div>
-          ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
+          ${this._error
+            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+            : ""}
           <div class="form">
             ${this._params.entry
               ? html`${this.hass!.localize(
@@ -79,30 +82,30 @@ class DialogTagDetail
                 )}:
                 ${this._params.entry.id}`
               : ""}
-            <paper-input
+            <ha-textfield
               dialogInitialFocus
               .value=${this._name}
               .configValue=${"name"}
-              @value-changed=${this._valueChanged}
+              @input=${this._valueChanged}
               .label=${this.hass!.localize("ui.panel.config.tag.detail.name")}
               .errorMessage=${this.hass!.localize(
                 "ui.panel.config.tag.detail.required_error_msg"
               )}
               required
               auto-validate
-            ></paper-input>
+            ></ha-textfield>
             ${!this._params.entry
-              ? html` <paper-input
+              ? html`<ha-textfield
                   .value=${this._id}
                   .configValue=${"id"}
-                  @value-changed=${this._valueChanged}
+                  @input=${this._valueChanged}
                   .label=${this.hass!.localize(
                     "ui.panel.config.tag.detail.tag_id"
                   )}
                   .placeholder=${this.hass!.localize(
                     "ui.panel.config.tag.detail.tag_id_placeholder"
                   )}
-                ></paper-input>`
+                ></ha-textfield>`
               : ""}
           </div>
           ${this._params.entry
@@ -165,11 +168,12 @@ class DialogTagDetail
     `;
   }
 
-  private _valueChanged(ev: CustomEvent) {
-    const configValue = (ev.target as any).configValue;
+  private _valueChanged(ev: Event) {
+    const target = ev.target as any;
+    const configValue = target.configValue;
 
     this._error = undefined;
-    this[`_${configValue}`] = ev.detail.value;
+    this[`_${configValue}`] = target.value;
   }
 
   private async _updateEntry() {

src/panels/config/users/dialog-user-detail.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "@polymer/paper-input/paper-input";
 import "@polymer/paper-tooltip/paper-tooltip";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -11,6 +10,7 @@ import "../../../components/ha-help-tooltip";
 import "../../../components/ha-chip-set";
 import "../../../components/ha-chip";
 import "../../../components/ha-svg-icon";
+import "../../../components/ha-textfield";
 import "../../../components/ha-switch";
 import { adminChangePassword } from "../../../data/auth";
 import {
@@ -92,13 +92,13 @@ class DialogUserDetail extends LitElement {
                 </ha-chip-set>
               `}
           <div class="form">
-            <paper-input
+            <ha-textfield
               dialogInitialFocus
               .value=${this._name}
               .disabled=${user.system_generated}
-              @value-changed=${this._nameChanged}
-              label=${this.hass!.localize("ui.panel.config.users.editor.name")}
-            ></paper-input>
+              @input=${this._nameChanged}
+              .label=${this.hass!.localize("ui.panel.config.users.editor.name")}
+            ></ha-textfield>
             <div class="row">
               <ha-formfield
                 .label=${this.hass.localize(
@@ -322,7 +322,8 @@ class DialogUserDetail extends LitElement {
         .secondary {
           color: var(--secondary-text-color);
         }
-        ha-chip-set {
+        ha-chip-set,
+        ha-textfield {
           display: block;
         }
         .state {