Another round of paper-dropdown -> mwc-select conversion

hassio/src/addon-view/config/hassio-addon-audio.ts

@@ -1,7 +1,6 @@
 import "@material/mwc-button";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
+import "@material/mwc-select";
+import "@material/mwc-list/mwc-list-item";
 import {
   css,
   CSSResultGroup,
@@ -11,7 +10,7 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "web-animations-js/web-animations-next-lite.min";
+import { stopPropagation } from "../../../../src/common/dom/stop_propagation";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
@@ -58,48 +57,44 @@ class HassioAddonAudio extends LitElement {
             ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
             : ""}
 
-          <paper-dropdown-menu
+          <mwc-select
             .label=${this.supervisor.localize(
               "addon.configuration.audio.input"
             )}
-            @iron-select=${this._setInputDevice}
+            @selected=${this._setInputDevice}
+            @closed=${stopPropagation}
+            fixedMenuPosition
+            naturalMenuWidth
+            .value=${this._selectedInput!}
           >
-            <paper-listbox
-              slot="dropdown-content"
-              attr-for-selected="device"
-              .selected=${this._selectedInput!}
-            >
-              ${this._inputDevices &&
-              this._inputDevices.map(
-                (item) => html`
-                  <paper-item device=${item.device || ""}>
-                    ${item.name}
-                  </paper-item>
-                `
-              )}
-            </paper-listbox>
-          </paper-dropdown-menu>
-          <paper-dropdown-menu
+            ${this._inputDevices &&
+            this._inputDevices.map(
+              (item) => html`
+                <mwc-list-item .value=${item.device || ""}>
+                  ${item.name}
+                </mwc-list-item>
+              `
+            )}
+          </mwc-select>
+          <mwc-select
             .label=${this.supervisor.localize(
               "addon.configuration.audio.output"
             )}
-            @iron-select=${this._setOutputDevice}
+            @selected=${this._setOutputDevice}
+            @closed=${stopPropagation}
+            fixedMenuPosition
+            naturalMenuWidth
+            .value=${this._selectedOutput!}
           >
-            <paper-listbox
-              slot="dropdown-content"
-              attr-for-selected="device"
-              .selected=${this._selectedOutput!}
-            >
-              ${this._outputDevices &&
-              this._outputDevices.map(
-                (item) => html`
-                  <paper-item device=${item.device || ""}
-                    >${item.name}</paper-item
-                  >
-                `
-              )}
-            </paper-listbox>
-          </paper-dropdown-menu>
+            ${this._outputDevices &&
+            this._outputDevices.map(
+              (item) => html`
+                <mwc-list-item .value=${item.device || ""}
+                  >${item.name}</mwc-list-item
+                >
+              `
+            )}
+          </mwc-select>
         </div>
         <div class="card-actions">
           <ha-progress-button @click=${this._saveSettings}>
@@ -138,12 +133,12 @@ class HassioAddonAudio extends LitElement {
   }
 
   private _setInputDevice(ev): void {
-    const device = ev.detail.item.getAttribute("device");
+    const device = ev.target.value;
     this._selectedInput = device;
   }
 
   private _setOutputDevice(ev): void {
-    const device = ev.detail.item.getAttribute("device");
+    const device = ev.target.value;
     this._selectedOutput = device;
   }
 

hassio/src/dashboard/hassio-update.ts

@@ -148,7 +148,6 @@ export class HassioUpdate extends LitElement {
         }
         ha-settings-row {
           padding: 0;
-          --paper-item-body-two-line-min-height: 32px;
         }
       `,
     ];

hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts

@@ -1,6 +1,5 @@
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -90,18 +89,19 @@ class HassioDatadiskDialog extends LitElement {
                     )}
                     <br /><br />
 
-                    <paper-dropdown-menu
+                    <mwc-select
                       .label=${this.dialogParams.supervisor.localize(
                         "dialog.datadisk_move.select_device"
                       )}
-                      @value-changed=${this._select_device}
+                      @selected=${this._select_device}
                     >
-                      <paper-listbox slot="dropdown-content">
-                        ${this.devices.map(
-                          (device) => html`<paper-item>${device}</paper-item>`
-                        )}
-                      </paper-listbox>
-                    </paper-dropdown-menu>
+                      ${this.devices.map(
+                        (device) =>
+                          html`<mwc-list-item .value=${device}
+                            >${device}</mwc-list-item
+                          >`
+                      )}
+                    </mwc-select>
                   `
                 : this.devices === undefined
                 ? this.dialogParams.supervisor.localize(
@@ -130,8 +130,8 @@ class HassioDatadiskDialog extends LitElement {
     `;
   }
 
-  private _select_device(event) {
-    this.selectedDevice = event.detail.value;
+  private _select_device(ev) {
+    this.selectedDevice = ev.target.value;
   }
 
   private async _moveDatadisk() {

hassio/src/system/hassio-supervisor-log.ts

@@ -1,7 +1,4 @@
 import "@material/mwc-button";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../src/components/buttons/ha-progress-button";
@@ -73,24 +70,19 @@ class HassioSupervisorLog extends LitElement {
           : ""}
         ${this.hass.userData?.showAdvanced
           ? html`
-              <paper-dropdown-menu
+              <mwc-select
                 .label=${this.supervisor.localize("system.log.log_provider")}
-                @iron-select=${this._setLogProvider}
+                @selected=${this._setLogProvider}
+                .value=${this._selectedLogProvider}
               >
-                <paper-listbox
-                  slot="dropdown-content"
-                  attr-for-selected="provider"
-                  .selected=${this._selectedLogProvider}
-                >
-                  ${logProviders.map(
-                    (provider) => html`
-                      <paper-item provider=${provider.key}>
-                        ${provider.name}
-                      </paper-item>
-                    `
-                  )}
-                </paper-listbox>
-              </paper-dropdown-menu>
+                ${logProviders.map(
+                  (provider) => html`
+                    <mwc-list-item .value=${provider.key}>
+                      ${provider.name}
+                    </mwc-list-item>
+                  `
+                )}
+              </mwc-select>
             `
           : ""}
 
@@ -110,7 +102,7 @@ class HassioSupervisorLog extends LitElement {
   }
 
   private async _setLogProvider(ev): Promise<void> {
-    const provider = ev.detail.item.getAttribute("provider");
+    const provider = ev.target.value;
     this._selectedLogProvider = provider;
     this._loadData();
   }
@@ -153,7 +145,7 @@ class HassioSupervisorLog extends LitElement {
         pre {
           white-space: pre-wrap;
         }
-        paper-dropdown-menu {
+        mwc-select {
           padding: 0 2%;
           width: 96%;
         }

src/components/entity/ha-statistic-picker.ts

@@ -1,6 +1,4 @@
 import "@polymer/paper-input/paper-input";
-import "@polymer/paper-item/paper-icon-item";
-import "@polymer/paper-item/paper-item-body";
 import { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { ComboBoxLitRenderer } from "lit-vaadin-helpers";

src/components/media-player/ha-media-player-browse.ts

@@ -2,7 +2,6 @@ import "@material/mwc-button/mwc-button";
 import "@material/mwc-list/mwc-list";
 import "@material/mwc-list/mwc-list-item";
 import { mdiPlay, mdiPlus } from "@mdi/js";
-import "@polymer/paper-item/paper-item";
 import "@polymer/paper-tooltip/paper-tooltip";
 import {
   css,

src/dialogs/more-info/controls/more-info-light.ts

@@ -615,10 +615,6 @@ class MoreInfoLight extends LitElement {
         color: var(--secondary-text-color);
       }
 
-      paper-item {
-        cursor: pointer;
-      }
-
       hr {
         border-color: var(--divider-color);
         border-bottom: none;

src/dialogs/more-info/controls/more-info-remote.ts

@@ -1,4 +1,4 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-attributes";
@@ -66,14 +66,6 @@ class MoreInfoRemote extends LitElement {
       activity: newVal,
     });
   }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      paper-item {
-        cursor: pointer;
-      }
-    `;
-  }
 }
 
 declare global {

src/dialogs/more-info/controls/more-info-vacuum.ts

@@ -241,9 +241,6 @@ class MoreInfoVacuum extends LitElement {
       .status-subtitle {
         color: var(--secondary-text-color);
       }
-      paper-item {
-        cursor: pointer;
-      }
       .flex-horizontal {
         display: flex;
         flex-direction: row;

src/panels/config/automation/condition/ha-automation-condition-row.ts

@@ -1,7 +1,6 @@
 import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
-import "@polymer/paper-item/paper-item";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";

src/panels/config/automation/condition/types/ha-automation-condition-trigger.ts

@@ -1,4 +1,5 @@
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -48,41 +49,35 @@ export class HaTriggerCondition extends LitElement {
         "ui.panel.config.automation.editor.conditions.type.trigger.no_triggers"
       );
     }
-    return html`<paper-dropdown-menu-light
+    return html`<mwc-select
       .label=${this.hass.localize(
         "ui.panel.config.automation.editor.conditions.type.trigger.id"
       )}
-      no-animations
+      .value=${id}
+      @selected=${this._triggerPicked}
     >
-      <paper-listbox
-        slot="dropdown-content"
-        .selected=${id}
-        attr-for-selected="data-trigger-id"
-        @selected-item-changed=${this._triggerPicked}
-      >
-        ${ensureArray(this._triggers).map((trigger) =>
-          trigger.id
-            ? html`
-                <paper-item data-trigger-id=${trigger.id}>
-                  ${trigger.id}
-                </paper-item>
-              `
-            : ""
-        )}
-      </paper-listbox>
-    </paper-dropdown-menu-light>`;
+      ${ensureArray(this._triggers).map((trigger) =>
+        trigger.id
+          ? html`
+              <mwc-list-item .value=${trigger.id}>
+                ${trigger.id}
+              </mwc-list-item>
+            `
+          : ""
+      )}
+    </mwc-select>`;
   }
 
   private _automationUpdated(config?: AutomationConfig) {
     this._triggers = config?.trigger;
   }
 
-  private _triggerPicked(ev: CustomEvent) {
+  private _triggerPicked(ev) {
     ev.stopPropagation();
-    if (!ev.detail.value) {
+    if (!ev.target.value) {
       return;
     }
-    const newTrigger = ev.detail.value.dataset.triggerId;
+    const newTrigger = ev.target.value;
     if (this.condition.id === newTrigger) {
       return;
     }