Migrate all lovelace elements to mwc (#11695)

Co-authored-by: Zack Barett <zackbarett@hey.com>

src/components/ha-date-input.ts

@@ -1,11 +1,11 @@
 import { mdiCalendar } from "@mdi/js";
-import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { formatDateNumeric } from "../common/datetime/format_date";
 import { fireEvent } from "../common/dom/fire_event";
 import { HomeAssistant } from "../types";
 import "./ha-svg-icon";
+import "./ha-textfield";
 
 const loadDatePickerDialog = () => import("./ha-dialog-date-picker");
 
@@ -38,17 +38,17 @@ export class HaDateInput extends LitElement {
   @property() public label?: string;
 
   render() {
-    return html`<paper-input
+    return html`<ha-textfield
       .label=${this.label}
       .disabled=${this.disabled}
-      no-label-float
+      iconTrailing="calendar"
       @click=${this._openDialog}
       .value=${this.value
         ? formatDateNumeric(new Date(this.value), this.locale)
         : ""}
     >
-      <ha-svg-icon slot="suffix" .path=${mdiCalendar}></ha-svg-icon>
+      <ha-svg-icon slot="trailingIcon" .path=${mdiCalendar}></ha-svg-icon>
-    </paper-input>`;
+    </ha-textfield>`;
   }
 
   private _openDialog() {
@@ -73,9 +73,6 @@ export class HaDateInput extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      paper-input {
-        width: 110px;
-      }
       ha-svg-icon {
         color: var(--secondary-text-color);
       }

src/panels/lovelace/cards/hui-alarm-panel-card.ts

@@ -1,5 +1,3 @@
-import "@polymer/paper-input/paper-input";
-import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
   css,
   CSSResultGroup,
@@ -15,6 +13,8 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import { alarmPanelIcon } from "../../../common/entity/alarm_panel_icon";
 import "../../../components/ha-card";
 import "../../../components/ha-chip";
+import type { HaTextField } from "../../../components/ha-textfield";
+import "../../../components/ha-textfield";
 import {
   callAlarmAction,
   FORMAT_NUMBER,
@@ -61,7 +61,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
 
   @state() private _config?: AlarmPanelCardConfig;
 
-  @query("#alarmCode") private _input?: PaperInputElement;
+  @query("#alarmCode") private _input?: HaTextField;
 
   public async getCardSize(): Promise<number> {
     if (!this._config || !this.hass) {
@@ -182,14 +182,14 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
         ${!stateObj.attributes.code_format
           ? html``
           : html`
-              <paper-input
+              <ha-textfield
                 id="alarmCode"
                 .label=${this.hass.localize("ui.card.alarm_control_panel.code")}
                 type="password"
                 .inputmode=${stateObj.attributes.code_format === FORMAT_NUMBER
                   ? "numeric"
                   : "text"}
-              ></paper-input>
+              ></ha-textfield>
             `}
         ${stateObj.attributes.code_format !== FORMAT_NUMBER
           ? html``
@@ -263,6 +263,9 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
         padding-bottom: 16px;
         position: relative;
         height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
         box-sizing: border-box;
         --alarm-color-disarmed: var(--label-badge-green);
         --alarm-color-pending: var(--label-badge-yellow);
@@ -282,6 +285,8 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
         display: flex;
         justify-content: space-between;
         align-items: center;
+        width: 100%;
+        box-sizing: border-box;
       }
 
       .unavailable {
@@ -319,8 +324,9 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
         }
       }
 
-      paper-input {
+      ha-textfield {
-        margin: 0 auto 8px;
+        display: block;
+        margin: 8px;
         max-width: 150px;
         text-align: center;
       }

src/panels/lovelace/cards/hui-shopping-list-card.ts

@@ -1,5 +1,4 @@
 import { mdiDrag, mdiNotificationClearAll, mdiPlus, mdiSort } from "@mdi/js";
-import { PaperInputElement } from "@polymer/paper-input/paper-input";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
@@ -17,6 +16,7 @@ import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_elemen
 import "../../../components/ha-card";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-checkbox";
+import "../../../components/ha-textfield";
 import {
   addItem,
   clearItems,
@@ -29,6 +29,7 @@ import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { SensorCardConfig, ShoppingListCardConfig } from "./types";
+import type { HaTextField } from "../../../components/ha-textfield";
 
 let Sortable;
 
@@ -123,14 +124,13 @@ class HuiShoppingListCard
             @click=${this._addItem}
           >
           </ha-svg-icon>
-          <paper-input
+          <ha-textfield
-            no-label-float
             class="addBox"
-            placeholder=${this.hass!.localize(
+            .placeholder=${this.hass!.localize(
               "ui.panel.lovelace.cards.shopping-list.add_item"
             )}
             @keydown=${this._addKeyPress}
-          ></paper-input>
+          ></ha-textfield>
           <ha-svg-icon
             class="reorderButton"
             .path=${mdiSort}
@@ -184,12 +184,12 @@ class HuiShoppingListCard
                         .itemId=${item.id}
                         @change=${this._completeItem}
                       ></ha-checkbox>
-                      <paper-input
+                      <ha-textfield
-                        no-label-float
+                        class="item"
                         .value=${item.name}
                         .itemId=${item.id}
                         @change=${this._saveEdit}
-                      ></paper-input>
+                      ></ha-textfield>
                     </div>
                   `
               )}
@@ -213,12 +213,12 @@ class HuiShoppingListCard
                 .itemId=${item.id}
                 @change=${this._completeItem}
               ></ha-checkbox>
-              <paper-input
+              <ha-textfield
-                no-label-float
+                class="item"
                 .value=${item.name}
                 .itemId=${item.id}
                 @change=${this._saveEdit}
-              ></paper-input>
+              ></ha-textfield>
               ${this._reordering
                 ? html`
                     <ha-svg-icon
@@ -275,8 +275,8 @@ class HuiShoppingListCard
     }
   }
 
-  private get _newItem(): PaperInputElement {
+  private get _newItem(): HaTextField {
-    return this.shadowRoot!.querySelector(".addBox") as PaperInputElement;
+    return this.shadowRoot!.querySelector(".addBox") as HaTextField;
   }
 
   private _addItem(ev): void {
@@ -366,6 +366,10 @@ class HuiShoppingListCard
         align-items: center;
       }
 
+      .item {
+        margin-top: 8px;
+      }
+
       .addButton {
         padding-right: 16px;
         cursor: pointer;
@@ -380,7 +384,7 @@ class HuiShoppingListCard
         margin-left: -12px;
       }
 
-      paper-input {
+      ha-textfield {
         flex-grow: 1;
       }
 

src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts

@@ -1,4 +1,3 @@
-import "@polymer/paper-input/paper-input";
 import {
   css,
   CSSResultGroup,
@@ -12,6 +11,7 @@ import { computeStateDisplay } from "../../../common/entity/compute_state_displa
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
 import { debounce } from "../../../common/util/debounce";
 import "../../../components/ha-slider";
+import "../../../components/ha-textfield";
 import { UNAVAILABLE_STATES } from "../../../data/entity";
 import { setValue } from "../../../data/input_text";
 import { HomeAssistant } from "../../../types";
@@ -90,11 +90,10 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
                   .step=${Number(stateObj.attributes.step)}
                   .min=${Number(stateObj.attributes.min)}
                   .max=${Number(stateObj.attributes.max)}
-                  .value=${Number(stateObj.state)}
+                  .value=${stateObj.state}
                   pin
                   @change=${this._selectedValueChanged}
                   ignore-bar-touch
-                  id="input"
                 ></ha-slider>
                 <span class="state">
                   ${computeStateDisplay(
@@ -108,23 +107,18 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
             `
           : html`
               <div class="flex state">
-                <paper-input
+                <ha-textfield
-                  no-label-float
-                  auto-validate
                   .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
                   pattern="[0-9]+([\\.][0-9]+)?"
                   .step=${Number(stateObj.attributes.step)}
                   .min=${Number(stateObj.attributes.min)}
                   .max=${Number(stateObj.attributes.max)}
-                  .value=${Number(stateObj.state)}
+                  .value=${stateObj.state}
+                  .suffix=${stateObj.attributes.unit_of_measurement}
                   type="number"
                   @change=${this._selectedValueChanged}
-                  id="input"
                 >
-                  <span slot="suffix">
+                </ha-textfield>
-                    ${stateObj.attributes.unit_of_measurement}
-                  </span>
-                </paper-input>
               </div>
             `}
       </hui-generic-entity-row>
@@ -146,7 +140,7 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
         min-width: 45px;
         text-align: end;
       }
-      paper-input {
+      ha-textfield {
         text-align: end;
       }
       ha-slider {
@@ -185,19 +179,11 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
     }
   }
 
-  private get _inputElement(): { value: string } {
+  private _selectedValueChanged(ev): void {
-    // linter recommended the following syntax
-    return this.shadowRoot!.getElementById("input") as unknown as {
-      value: string;
-    };
-  }
-
-  private _selectedValueChanged(): void {
-    const element = this._inputElement;
     const stateObj = this.hass!.states[this._config!.entity];
 
-    if (element.value !== stateObj.state) {
+    if (ev.target.value !== stateObj.state) {
-      setValue(this.hass!, stateObj.entity_id, element.value!);
+      setValue(this.hass!, stateObj.entity_id, ev.target.value);
     }
   }
 }

src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts

@@ -1,4 +1,3 @@
-import { PaperInputElement } from "@polymer/paper-input/paper-input";
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { UNAVAILABLE, UNAVAILABLE_STATES } from "../../../data/entity";
@@ -8,6 +7,7 @@ import { hasConfigOrEntityChanged } from "../common/has-changed";
 import "../components/hui-generic-entity-row";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import { EntityConfig, LovelaceRow } from "./types";
+import "../../../components/ha-textfield";
 
 @customElement("hui-input-text-entity-row")
 class HuiInputTextEntityRow extends LitElement implements LovelaceRow {
@@ -43,8 +43,7 @@ class HuiInputTextEntityRow extends LitElement implements LovelaceRow {
 
     return html`
       <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
-        <paper-input
+        <ha-textfield
-          no-label-float
           .disabled=${stateObj.state === UNAVAILABLE}
           .value=${stateObj.state}
           .minlength=${stateObj.attributes.min}
@@ -54,27 +53,24 @@ class HuiInputTextEntityRow extends LitElement implements LovelaceRow {
           .type=${stateObj.attributes.mode}
           @change=${this._selectedValueChanged}
           placeholder="(empty value)"
-        ></paper-input>
+        ></ha-textfield>
       </hui-generic-entity-row>
     `;
   }
 
-  private get _inputEl(): PaperInputElement {
-    return this.shadowRoot!.querySelector("paper-input") as PaperInputElement;
-  }
-
   private _selectedValueChanged(ev): void {
-    const element = this._inputEl;
     const stateObj = this.hass!.states[this._config!.entity];
 
+    const newValue = ev.target.value;
+
     // Filter out invalid text states
-    if (element.value && UNAVAILABLE_STATES.includes(element.value)) {
+    if (newValue && UNAVAILABLE_STATES.includes(newValue)) {
-      element.value = stateObj.state;
+      ev.target.value = stateObj.state;
       return;
     }
 
-    if (element.value !== stateObj.state) {
+    if (newValue !== stateObj.state) {
-      setValue(this.hass!, stateObj.entity_id, element.value!);
+      setValue(this.hass!, stateObj.entity_id, newValue);
     }
 
     ev.target.blur();

src/panels/lovelace/entity-rows/hui-number-entity-row.ts

@@ -1,4 +1,3 @@
-import "@polymer/paper-input/paper-input";
 import {
   css,
   CSSResultGroup,
@@ -20,6 +19,7 @@ import { installResizeObserver } from "../common/install-resize-observer";
 import "../components/hui-generic-entity-row";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import { EntityConfig, LovelaceRow } from "./types";
+import "../../../components/ha-textfield";
 
 @customElement("hui-number-entity-row")
 class HuiNumberEntityRow extends LitElement implements LovelaceRow {
@@ -98,7 +98,6 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow {
                   pin
                   @change=${this._selectedValueChanged}
                   ignore-bar-touch
-                  id="input"
                 ></ha-slider>
                 <span class="state">
                   ${computeStateDisplay(
@@ -112,20 +111,18 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow {
             `
           : html`
               <div class="flex state">
-                <paper-input
+                <ha-textfield
-                  no-label-float
+                  autoValidate
-                  auto-validate
                   .disabled=${stateObj.state === UNAVAILABLE}
                   pattern="[0-9]+([\\.][0-9]+)?"
                   .step=${Number(stateObj.attributes.step)}
                   .min=${Number(stateObj.attributes.min)}
                   .max=${Number(stateObj.attributes.max)}
-                  .value=${Number(stateObj.state)}
+                  .value=${stateObj.state}
+                  .suffix=${stateObj.attributes.unit_of_measurement}
                   type="number"
                   @change=${this._selectedValueChanged}
-                  id="input"
+                ></ha-textfield>
-                ></paper-input>
-                ${stateObj.attributes.unit_of_measurement}
               </div>
             `}
       </hui-generic-entity-row>
@@ -148,7 +145,7 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow {
         min-width: 45px;
         text-align: end;
       }
-      paper-input {
+      ha-textfield {
         text-align: end;
       }
       ha-slider {
@@ -187,19 +184,11 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow {
     }
   }
 
-  private get _inputElement(): { value: string } {
+  private _selectedValueChanged(ev): void {
-    // linter recommended the following syntax
-    return this.shadowRoot!.getElementById("input") as unknown as {
-      value: string;
-    };
-  }
-
-  private _selectedValueChanged(): void {
-    const element = this._inputElement;
     const stateObj = this.hass!.states[this._config!.entity];
 
-    if (element.value !== stateObj.state) {
+    if (ev.target.value !== stateObj.state) {
-      setValue(this.hass!, stateObj.entity_id, element.value!);
+      setValue(this.hass!, stateObj.entity_id, ev.target.value!);
     }
   }
 }

src/panels/shopping-list/ha-panel-shopping-list.ts

@@ -88,10 +88,12 @@ class PanelShoppingList extends LitElement {
       haStyle,
       css`
         :host {
-          --mdc-theme-primary: var(--app-header-text-color);
           display: block;
           height: 100%;
         }
+        app-header {
+          --mdc-theme-primary: var(--app-header-text-color);
+        }
         :host([narrow]) app-toolbar mwc-button {
           width: 65px;
         }

src/state-summary/state-card-input_number.js

@@ -1,6 +1,5 @@
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import { IronResizableBehavior } from "@polymer/iron-resizable-behavior/iron-resizable-behavior";
-import "@polymer/paper-input/paper-input";
 import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
@@ -8,6 +7,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { computeStateDisplay } from "../common/entity/compute_state_display";
 import "../components/entity/state-info";
 import "../components/ha-slider";
+import "../components/ha-textfield";
 
 class StateCardInputNumber extends mixinBehaviors(
   [IronResizableBehavior],
@@ -33,7 +33,7 @@ class StateCardInputNumber extends mixinBehaviors(
         ha-slider[hidden] {
           display: none !important;
         }
-        paper-input {
+        ha-textfield {
           text-align: right;
           margin-left: auto;
         }
@@ -54,23 +54,22 @@ class StateCardInputNumber extends mixinBehaviors(
           ignore-bar-touch=""
         >
         </ha-slider>
-        <paper-input
+        <ha-textfield
           no-label-float=""
           auto-validate=""
           pattern="[0-9]+([\\.][0-9]+)?"
           step="[[step]]"
           min="[[min]]"
           max="[[max]]"
-          value="{{value}}"
+          value="[[value]]"
           type="number"
           on-change="selectedValueChanged"
           on-click="stopPropagation"
+          on-input="onInput"
           hidden="[[hiddenbox]]"
+          suffix="[[stateObj.attributes.unit_of_measurement]]"
         >
-          <span slot="suffix">
+        </ha-textfield>
-            [[stateObj.attributes.unit_of_measurement]]
-          </span>
-        </paper-input>
         <div
           id="sliderstate"
           class="state sliderstate"
@@ -177,6 +176,10 @@ class StateCardInputNumber extends mixinBehaviors(
     }
   }
 
+  onInput(ev) {
+    this.value = ev.target.value;
+  }
+
   selectedValueChanged() {
     if (this.value === Number(this.stateObj.state)) {
       return;

src/state-summary/state-card-input_text.js

@@ -1,36 +1,36 @@
 /* eslint-plugin-disable lit */
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../components/entity/state-info";
+import "../components/ha-textfield";
 
 class StateCardInputText extends PolymerElement {
   static get template() {
     return html`
       <style include="iron-flex iron-flex-alignment"></style>
       <style>
-        paper-input {
+        ha-textfield {
           margin-left: 16px;
         }
       </style>
 
       <div class="horizontal justified layout">
         ${this.stateInfoTemplate}
-        <paper-input
+        <ha-textfield
-          no-label-float=""
           minlength="[[stateObj.attributes.min]]"
           maxlength="[[stateObj.attributes.max]]"
-          value="{{value}}"
+          value="[[value]]"
           auto-validate="[[stateObj.attributes.pattern]]"
           pattern="[[stateObj.attributes.pattern]]"
           type="[[stateObj.attributes.mode]]"
+          on-input="onInput"
           on-change="selectedValueChanged"
           on-click="stopPropagation"
           placeholder="(empty value)"
         >
-        </paper-input>
+        </ha-textfield>
       </div>
     `;
   }
@@ -68,6 +68,10 @@ class StateCardInputText extends PolymerElement {
     this.value = newVal.state;
   }
 
+  onInput(ev) {
+    this.value = ev.target.value;
+  }
+
   selectedValueChanged() {
     if (this.value === this.stateObj.state) {
       return;

src/state-summary/state-card-number.js

@@ -1,12 +1,12 @@
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import { IronResizableBehavior } from "@polymer/iron-resizable-behavior/iron-resizable-behavior";
-import "@polymer/paper-input/paper-input";
 import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../components/entity/state-info";
 import "../components/ha-slider";
+import "../components/ha-textfield";
 
 class StateCardNumber extends mixinBehaviors(
   [IronResizableBehavior],
@@ -32,7 +32,7 @@ class StateCardNumber extends mixinBehaviors(
         ha-slider[hidden] {
           display: none !important;
         }
-        paper-input {
+        ha-textfield {
           text-align: right;
           margin-left: auto;
         }
@@ -53,20 +53,20 @@ class StateCardNumber extends mixinBehaviors(
           ignore-bar-touch=""
         >
         </ha-slider>
-        <paper-input
+        <ha-textfield
-          no-label-float=""
           auto-validate=""
           pattern="[0-9]+([\\.][0-9]+)?"
           step="[[step]]"
           min="[[min]]"
           max="[[max]]"
-          value="{{value}}"
+          value="[[value]]"
           type="number"
+          on-input="onInput"
           on-change="selectedValueChanged"
           on-click="stopPropagation"
           hidden="[[hiddenbox]]"
         >
-        </paper-input>
+        </ha-textfield>
         <div class="state" hidden="[[hiddenbox]]">
           [[stateObj.attributes.unit_of_measurement]]
         </div>
@@ -178,6 +178,10 @@ class StateCardNumber extends mixinBehaviors(
     }
   }
 
+  onInput(ev) {
+    this.value = ev.target.value;
+  }
+
   selectedValueChanged() {
     if (this.value === Number(this.stateObj.state)) {
       return;