Replace more polymer paper inputs and remove paper-input style attributes (#18929)

src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "@polymer/paper-input/paper-textarea";
 import {
   css,
   CSSResultGroup,
@@ -20,6 +19,7 @@ import { haStyle } from "../../../../../resources/styles";
 import { HomeAssistant, Route } from "../../../../../types";
 import { zhaTabs } from "./zha-config-dashboard";
 import "./zha-device-pairing-status-card";
+import "../../../../../components/ha-textarea";
 
 @customElement("zha-add-devices-page")
 class ZHAAddDevicesPage extends LitElement {
@@ -146,13 +146,13 @@ class ZHAAddDevicesPage extends LitElement {
               `}
         </div>
         ${this._showLogs
-          ? html`<paper-textarea
+          ? html`<ha-textarea
               readonly
-              max-rows="10"
               class="log"
-              value=${this._formattedEvents}
+              autogrow
+              .value=${this._formattedEvents}
             >
-            </paper-textarea>`
+            </ha-textarea>`
           : ""}
       </hass-tabs-subpage>
     `;
@@ -165,13 +165,6 @@ class ZHAAddDevicesPage extends LitElement {
   private _handleMessage(message: any): void {
     if (message.type === LOG_OUTPUT) {
       this._formattedEvents += message.log_entry.message + "\n";
-      if (this.shadowRoot) {
-        const paperTextArea = this.shadowRoot.querySelector("paper-textarea");
-        if (paperTextArea) {
-          const textArea = (paperTextArea.inputElement as any).textarea;
-          textArea.scrollTop = textArea.scrollHeight;
-        }
-      }
     }
     if (message.type && DEVICE_MESSAGE_TYPES.includes(message.type)) {
       this._discoveredDevices[message.device_info.ieee] = message.device_info;
@@ -266,6 +259,9 @@ class ZHAAddDevicesPage extends LitElement {
           color: grey;
           padding-left: 16px;
         }
+        ha-textarea {
+          width: 100%;
+        }
       `,
     ];
   }

src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts

@@ -1,6 +1,4 @@
 import "@material/mwc-button";
-import "@polymer/paper-input/paper-input";
-import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state, query } from "lit/decorators";
 import type { HASSDomEvent } from "../../../../../common/dom/fire_event";
@@ -14,8 +12,9 @@ import {
   ZHAGroup,
 } from "../../../../../data/zha";
 import "../../../../../layouts/hass-subpage";
-import type { ValueChangedEvent, HomeAssistant } from "../../../../../types";
+import type { HomeAssistant } from "../../../../../types";
 import "../../../ha-config-section";
+import "../../../../../components/ha-textfield";
 import "./zha-device-endpoint-data-table";
 import type { ZHADeviceEndpointDataTable } from "./zha-device-endpoint-data-table";
 
@@ -66,14 +65,14 @@ export class ZHAAddGroupPage extends LitElement {
               "ui.panel.config.zha.groups.create_group_details"
             )}
           </p>
-          <paper-input
+          <ha-textfield
             type="string"
             .value=${this._groupName}
-            @value-changed=${this._handleNameChange}
-            placeholder=${this.hass!.localize(
+            @change=${this._handleNameChange}
+            .placeholder=${this.hass!.localize(
               "ui.panel.config.zha.groups.group_name_placeholder"
             )}
-          ></paper-input>
+          ></ha-textfield>
 
           <div class="header">
             ${this.hass.localize("ui.panel.config.zha.groups.add_members")}
@@ -139,9 +138,8 @@ export class ZHAAddGroupPage extends LitElement {
     navigate(`/config/zha/group/${group.group_id}`, { replace: true });
   }
 
-  private _handleNameChange(ev: ValueChangedEvent<string>) {
-    const target = ev.currentTarget as PaperInputElement;
-    this._groupName = target.value || "";
+  private _handleNameChange(event) {
+    this._groupName = event.target.value || "";
   }
 
   static get styles(): CSSResultGroup {

src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-list/mwc-list-item";
-import "@polymer/paper-input/paper-input";
 import {
   css,
   CSSResultGroup,
@@ -15,6 +14,7 @@ import "../../../../../components/buttons/ha-call-service-button";
 import "../../../../../components/buttons/ha-progress-button";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-select";
+import "../../../../../components/ha-textfield";
 import { forwardHaptic } from "../../../../../data/haptics";
 import {
   Attribute,
@@ -27,11 +27,7 @@ import {
 import { haStyle } from "../../../../../resources/styles";
 import { HomeAssistant } from "../../../../../types";
 import { formatAsPaddedHex } from "./functions";
-import {
-  ChangeEvent,
-  ItemSelectedEvent,
-  SetAttributeServiceData,
-} from "./types";
+import { ItemSelectedEvent, SetAttributeServiceData } from "./types";
 
 @customElement("zha-cluster-attributes")
 export class ZHAClusterAttributes extends LitElement {
@@ -101,24 +97,28 @@ export class ZHAClusterAttributes extends LitElement {
   private _renderAttributeInteractions(): TemplateResult {
     return html`
       <div class="input-text">
-        <paper-input
-          label=${this.hass!.localize("ui.panel.config.zha.common.value")}
+        <ha-textfield
+          .label=${this.hass!.localize("ui.panel.config.zha.common.value")}
           type="string"
           .value=${this._attributeValue}
-          @value-changed=${this._onAttributeValueChanged}
-          placeholder=${this.hass!.localize("ui.panel.config.zha.common.value")}
-        ></paper-input>
+          @change=${this._onAttributeValueChanged}
+          .placeholder=${this.hass!.localize(
+            "ui.panel.config.zha.common.value"
+          )}
+        ></ha-textfield>
       </div>
       <div class="input-text">
-        <paper-input
-          label=${this.hass!.localize(
+        <ha-textfield
+          .label=${this.hass!.localize(
             "ui.panel.config.zha.common.manufacturer_code_override"
           )}
           type="number"
           .value=${this._manufacturerCodeOverride}
-          @value-changed=${this._onManufacturerCodeOverrideChanged}
-          placeholder=${this.hass!.localize("ui.panel.config.zha.common.value")}
-        ></paper-input>
+          @change=${this._onManufacturerCodeOverrideChanged}
+          .placeholder=${this.hass!.localize(
+            "ui.panel.config.zha.common.value"
+          )}
+        ></ha-textfield>
       </div>
       <div class="card-actions">
         <ha-progress-button
@@ -197,13 +197,13 @@ export class ZHAClusterAttributes extends LitElement {
     };
   }
 
-  private _onAttributeValueChanged(value: ChangeEvent): void {
-    this._attributeValue = value.detail!.value;
+  private _onAttributeValueChanged(event): void {
+    this._attributeValue = event.target!.value;
     this._setAttributeServiceData = this._computeSetAttributeServiceData();
   }
 
-  private _onManufacturerCodeOverrideChanged(value: ChangeEvent): void {
-    this._manufacturerCodeOverride = value.detail!.value;
+  private _onManufacturerCodeOverrideChanged(event): void {
+    this._manufacturerCodeOverride = event.target!.value;
     this._setAttributeServiceData = this._computeSetAttributeServiceData();
   }
 
@@ -238,7 +238,8 @@ export class ZHAClusterAttributes extends LitElement {
           margin-top: 16px;
         }
 
-        .menu {
+        .menu,
+        ha-textfield {
           width: 100%;
         }
 

src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-list/mwc-list-item";
-import "@polymer/paper-input/paper-input";
 import {
   css,
   CSSResultGroup,
@@ -14,6 +13,7 @@ import "../../../../../components/buttons/ha-call-service-button";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-form/ha-form";
 import "../../../../../components/ha-select";
+import "../../../../../components/ha-textfield";
 import {
   Cluster,
   Command,
@@ -23,7 +23,7 @@ import {
 import { haStyle } from "../../../../../resources/styles";
 import { HomeAssistant } from "../../../../../types";
 import { formatAsPaddedHex } from "./functions";
-import { ChangeEvent, IssueCommandServiceData } from "./types";
+import { IssueCommandServiceData } from "./types";
 
 export class ZHAClusterCommands extends LitElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
@@ -88,17 +88,17 @@ export class ZHAClusterCommands extends LitElement {
         ${this._selectedCommandId !== undefined
           ? html`
               <div class="input-text">
-                <paper-input
-                  label=${this.hass!.localize(
+                <ha-textfield
+                  .label=${this.hass!.localize(
                     "ui.panel.config.zha.common.manufacturer_code_override"
                   )}
                   type="number"
                   .value=${this._manufacturerCodeOverride}
-                  @value-changed=${this._onManufacturerCodeOverrideChanged}
-                  placeholder=${this.hass!.localize(
+                  @change=${this._onManufacturerCodeOverrideChanged}
+                  .placeholder=${this.hass!.localize(
                     "ui.panel.config.zha.common.value"
                   )}
-                ></paper-input>
+                ></ha-textfield>
               </div>
               <div class="command-form">
                 <ha-form
@@ -180,8 +180,8 @@ export class ZHAClusterCommands extends LitElement {
       this._computeIssueClusterCommandServiceData();
   }
 
-  private _onManufacturerCodeOverrideChanged(value: ChangeEvent): void {
-    this._manufacturerCodeOverride = value.detail!.value;
+  private _onManufacturerCodeOverrideChanged(event): void {
+    this._manufacturerCodeOverride = Number(event.target.value);
     this._issueClusterCommandServiceData =
       this._computeIssueClusterCommandServiceData();
   }
@@ -199,7 +199,8 @@ export class ZHAClusterCommands extends LitElement {
         ha-select {
           margin-top: 16px;
         }
-        .menu {
+        .menu,
+        ha-textfield {
           width: 100%;
         }
 

src/panels/config/integrations/integration-panels/zha/zha-device-card.ts

@@ -1,4 +1,3 @@
-import "@polymer/paper-input/paper-input";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -11,6 +10,7 @@ import "../../../../../components/buttons/ha-call-service-button";
 import "../../../../../components/entity/state-badge";
 import "../../../../../components/ha-area-picker";
 import "../../../../../components/ha-card";
+import "../../../../../components/ha-textfield";
 import { updateDeviceRegistryEntry } from "../../../../../data/device_registry";
 import {
   EntityRegistryEntry,
@@ -98,14 +98,14 @@ class ZHADeviceCard extends SubscribeMixin(LitElement) {
                 : ""
             )}
           </div>
-          <paper-input
+          <ha-textfield
             type="string"
             @change=${this._rename}
             .value=${this.device.user_given_name || this.device.name}
             .label=${this.hass.localize(
               "ui.dialogs.zha_device_info.zha_device_card.device_name_placeholder"
             )}
-          ></paper-input>
+          ></ha-textfield>
           <ha-area-picker
             .hass=${this.hass}
             .device=${this.device.device_reg_id}
@@ -229,6 +229,9 @@ class ZHADeviceCard extends SubscribeMixin(LitElement) {
         ha-card {
           border: none;
         }
+        ha-textfield {
+          width: 100%;
+        }
       `,
     ];
   }

src/panels/developer-tools/state/developer-tools-state.ts

@@ -627,9 +627,6 @@ class HaPanelDevState extends LitElement {
         .entities th {
           padding: 0 8px;
           text-align: left;
-          font-size: var(
-            --paper-input-container-shared-input-style_-_font-size
-          );
         }
 
         .filters th {

src/panels/developer-tools/statistics/developer-tools-statistics.ts

@@ -423,9 +423,6 @@ class HaPanelDevStatistics extends SubscribeMixin(LitElement) {
         th {
           padding: 0 8px;
           text-align: left;
-          font-size: var(
-            --paper-input-container-shared-input-style_-_font-size
-          );
         }
 
         :host([rtl]) th {

src/resources/codemirror.ts

@@ -113,11 +113,10 @@ export const haTheme = EditorView.theme({
     border: "0",
     background: "none",
     fontFamily: "Roboto",
-    borderBottom:
-      "1px solid var(--paper-input-container-color, var(--secondary-text-color))",
+    borderBottom: "1px solid var(--secondary-text-color)",
     margin: "4px 4px 0",
     "& ::placeholder": {
-      color: "var(--paper-input-container-color, var(--secondary-text-color))",
+      color: "var(--secondary-text-color)",
     },
     "&:focus": {
       outline: "none",
@@ -185,13 +184,11 @@ export const haTheme = EditorView.theme({
       "var(--code-editor-gutter-color, var(--secondary-background-color, whitesmoke))",
     color: "var(--paper-dialog-color, var(--secondary-text-color))",
     border: "none",
-    borderRight:
-      "1px solid var(--paper-input-container-color, var(--secondary-text-color))",
+    borderRight: "1px solid var(--secondary-text-color)",
     paddingRight: "1px",
   },
   "&.cm-focused .cm-gutters": {
-    borderRight:
-      "2px solid var(--paper-input-container-focus-color, var(--primary-color))",
+    borderRight: "2px solid var(--primary-color)",
     paddingRight: "0",
   },
   ".cm-gutterElement.lineNumber": { color: "inherit" },