Convert selectors to MWC (#11543)

gallery/src/pages/components/ha-selector.ts

@@ -48,10 +48,15 @@ const SCHEMAS: {
       boolean: { name: "Boolean", selector: { boolean: {} } },
       time: { name: "Time", selector: { time: {} } },
       action: { name: "Action", selector: { action: {} } },
-      text: { name: "Text", selector: { text: { multiline: false } } },
+      text: {
+        name: "Text",
+        selector: { text: { multiline: false } },
+      },
       text_multiline: {
         name: "Text multiline",
-        selector: { text: { multiline: true } },
+        selector: {
+          text: { multiline: true },
+        },
       },
       object: { name: "Object", selector: { object: {} } },
       select: {

package.json

@@ -67,6 +67,7 @@
     "@material/mwc-switch": "0.25.3",
     "@material/mwc-tab": "0.25.3",
     "@material/mwc-tab-bar": "0.25.3",
+    "@material/mwc-textarea": "^0.25.3",
     "@material/mwc-textfield": "0.25.3",
     "@material/mwc-top-app-bar-fixed": "^0.25.3",
     "@material/top-app-bar": "14.0.0-canary.261f2db59.0",

src/components/ha-form/ha-form-integer.ts

@@ -25,7 +25,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  @query("paper-input ha-slider") private _input?: HTMLElement;
+  @query("mwc-textfield ha-slider") private _input?: HTMLElement;
 
   private _lastValue?: HaFormIntegerData;
 

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

@@ -1,4 +1,3 @@
-import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -6,6 +5,7 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { NumberSelector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
 import "../ha-slider";
+import "@material/mwc-textfield/mwc-textfield";
 
 @customElement("ha-selector-number")
 export class HaNumberSelector extends LitElement {
@@ -36,27 +36,23 @@ export class HaNumberSelector extends LitElement {
           >
           </ha-slider>`
         : ""}
-      <paper-input
+      <mwc-textfield
+        inputMode="numeric"
         pattern="[0-9]+([\\.][0-9]+)?"
         .label=${this.selector.number.mode !== "box" ? undefined : this.label}
         .placeholder=${this.placeholder}
-        .noLabelFloat=${this.selector.number.mode !== "box"}
         class=${classMap({ single: this.selector.number.mode === "box" })}
         .min=${this.selector.number.min}
         .max=${this.selector.number.max}
         .value=${this.value}
         .step=${this.selector.number.step ?? 1}
         .disabled=${this.disabled}
+        .suffix=${this.selector.number.unit_of_measurement}
         type="number"
-        auto-validate
-        @value-changed=${this._handleInputChange}
+        autoValidate
+        @input=${this._handleInputChange}
       >
-        ${this.selector.number.unit_of_measurement
-          ? html`<div slot="suffix">
-              ${this.selector.number.unit_of_measurement}
-            </div>`
-          : ""}
-      </paper-input>`;
+      </mwc-textfield>`;
   }
 
   private get _value() {
@@ -94,6 +90,9 @@ export class HaNumberSelector extends LitElement {
       ha-slider {
         flex: 1;
       }
+      mwc-textfield {
+        width: 70px;
+      }
       .single {
         flex: 1;
       }

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

@@ -1,9 +1,11 @@
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
+import { stopPropagation } from "../../common/dom/stop_propagation";
 import { SelectSelector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
-import "../ha-paper-dropdown-menu";
+import "@material/mwc-select/mwc-select";
+import "@material/mwc-list/mwc-list-item";
 
 @customElement("ha-selector-select")
 export class HaSelectSelector extends LitElement {
@@ -18,46 +20,37 @@ export class HaSelectSelector extends LitElement {
   @property({ type: Boolean }) public disabled = false;
 
   protected render() {
-    return html`<ha-paper-dropdown-menu
-      .disabled=${this.disabled}
+    return html`<mwc-select
+      fixedMenuPosition
+      naturalMenuWidth
       .label=${this.label}
+      .value=${this.value}
+      .disabled=${this.disabled}
+      @closed=${stopPropagation}
+      @selected=${this._valueChanged}
     >
-      <paper-listbox
-        slot="dropdown-content"
-        attr-for-selected="item-value"
-        .selected=${this.value}
-        @selected-item-changed=${this._valueChanged}
-      >
-        ${this.selector.select.options.map(
-          (item: string) => html`
-            <paper-item .itemValue=${item}> ${item} </paper-item>
-          `
-        )}
-      </paper-listbox>
-    </ha-paper-dropdown-menu>`;
+      ${this.selector.select.options.map(
+        (item: string) => html`
+          <mwc-list-item .value=${item}>${item}</mwc-list-item>
+        `
+      )}
+    </mwc-select>`;
   }
 
   private _valueChanged(ev) {
-    if (this.disabled || !ev.detail.value) {
+    ev.stopPropagation();
+    if (this.disabled || !ev.target.value) {
       return;
     }
     fireEvent(this, "value-changed", {
-      value: ev.detail.value.itemValue,
+      value: ev.target.value,
     });
   }
 
   static get styles(): CSSResultGroup {
     return css`
-      ha-paper-dropdown-menu {
+      mwc-select {
         width: 100%;
-        min-width: 200px;
-        display: block;
-      }
-      paper-listbox {
-        min-width: 200px;
-      }
-      paper-item {
-        cursor: pointer;
       }
     `;
   }

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

@@ -1,8 +1,3 @@
-import "@material/mwc-list/mwc-list";
-import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-tab-bar/mwc-tab-bar";
-import "@material/mwc-tab/mwc-tab";
-import "@polymer/paper-input/paper-input";
 import {
   HassEntity,
   HassServiceTarget,

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

@@ -1,10 +1,10 @@
-import "@polymer/paper-input/paper-input";
-import "@polymer/paper-input/paper-textarea";
-import { html, LitElement } from "lit";
+import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { StringSelector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
+import "@material/mwc-textfield/mwc-textfield";
+import "@material/mwc-textarea/mwc-textarea";
 
 @customElement("ha-selector-text")
 export class HaTextSelector extends LitElement {
@@ -22,25 +22,26 @@ export class HaTextSelector extends LitElement {
 
   protected render() {
     if (this.selector.text?.multiline) {
-      return html`<paper-textarea
+      return html`<mwc-textarea
         .label=${this.label}
         .placeholder=${this.placeholder}
-        .value=${this.value}
+        .value=${this.value || ""}
         .disabled=${this.disabled}
-        @value-changed=${this._handleChange}
+        @input=${this._handleChange}
         autocapitalize="none"
         autocomplete="off"
         spellcheck="false"
-      ></paper-textarea>`;
+        required
+      ></mwc-textarea>`;
     }
-    return html`<paper-input
-      required
-      .value=${this.value}
-      .placeholder=${this.placeholder}
+    return html`<mwc-textfield
+      .value=${this.value || ""}
+      .placeholder=${this.placeholder || ""}
       .disabled=${this.disabled}
-      @value-changed=${this._handleChange}
-      .label=${this.label}
-    ></paper-input>`;
+      @input=${this._handleChange}
+      .label=${this.label || ""}
+      required
+    ></mwc-textfield>`;
   }
 
   private _handleChange(ev) {
@@ -50,6 +51,15 @@ export class HaTextSelector extends LitElement {
     }
     fireEvent(this, "value-changed", { value });
   }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      mwc-textfield,
+      mwc-textarea {
+        width: 100%;
+      }
+    `;
+  }
 }
 
 declare global {

yarn.lock

@@ -2665,7 +2665,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@material/mwc-textfield@npm:0.25.3":
+"@material/mwc-textarea@npm:^0.25.3":
+  version: 0.25.3
+  resolution: "@material/mwc-textarea@npm:0.25.3"
+  dependencies:
+    "@material/mwc-base": ^0.25.3
+    "@material/mwc-textfield": ^0.25.3
+    lit: ^2.0.0
+    tslib: ^2.0.1
+  checksum: 918e28b72f7c687c481cd9ee00f652cd6c212d37cd281197cb02c87f04153792c5a60a86276e82f44684e7c7b4947e0e2e5fceaa08fc075a030ea769c1501d8e
+  languageName: node
+  linkType: hard
+
+"@material/mwc-textfield@npm:0.25.3, @material/mwc-textfield@npm:^0.25.3":
   version: 0.25.3
   resolution: "@material/mwc-textfield@npm:0.25.3"
   dependencies:
@@ -9133,6 +9145,7 @@ fsevents@^1.2.7:
     "@material/mwc-switch": 0.25.3
     "@material/mwc-tab": 0.25.3
     "@material/mwc-tab-bar": 0.25.3
+    "@material/mwc-textarea": ^0.25.3
     "@material/mwc-textfield": 0.25.3
     "@material/mwc-top-app-bar-fixed": ^0.25.3
     "@material/top-app-bar": 14.0.0-canary.261f2db59.0