From 737f7ba6b947d12167e4f3e311b4667590807868 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Fri, 11 Feb 2022 14:40:31 +0100
Subject: [PATCH] Migrate to mwc-item

---
 .../config-flow/step-flow-pick-handler.ts     | 41 ++++++++-----------
 1 file changed, 18 insertions(+), 23 deletions(-)

diff --git a/src/dialogs/config-flow/step-flow-pick-handler.ts b/src/dialogs/config-flow/step-flow-pick-handler.ts
index 668704352d..f6b8e5dfeb 100644
--- a/src/dialogs/config-flow/step-flow-pick-handler.ts
+++ b/src/dialogs/config-flow/step-flow-pick-handler.ts
@@ -1,5 +1,3 @@
-import "@polymer/paper-item/paper-icon-item";
-import "@polymer/paper-item/paper-item-body";
 import Fuse from "fuse.js";
 import {
   css,
@@ -22,6 +20,8 @@ import { HomeAssistant } from "../../types";
 import { brandsUrl } from "../../util/brands-url";
 import { documentationUrl } from "../../util/documentation-url";
 import { configFlowContentStyles } from "./styles";
+import "@material/mwc-list/mwc-list-item";
+import { afterNextRender } from "../../common/util/render-status";
 
 interface HandlerObj {
   name: string;
@@ -97,12 +97,14 @@ class StepFlowPickHandler extends LitElement {
           ? handlers.map(
               (handler: HandlerObj) =>
                 html`
-                  <paper-icon-item
+                  <mwc-list-item
+                    graphic="medium"
+                    hasMeta
                     @click=${this._handlerPicked}
                     .handler=${handler}
                   >
                     <img
-                      slot="item-icon"
+                      slot="graphic"
                       loading="lazy"
                       src=${brandsUrl({
                         domain: handler.slug,
@@ -113,9 +115,9 @@ class StepFlowPickHandler extends LitElement {
                       referrerpolicy="no-referrer"
                     />
 
-                    <paper-item-body> ${handler.name} </paper-item-body>
-                    <ha-icon-next></ha-icon-next>
-                  </paper-icon-item>
+                    ${handler.name}
+                    <ha-icon-next slot="meta"></ha-icon-next>
+                  </mwc-list-item>
                 `
             )
           : html`
@@ -162,18 +164,15 @@ class StepFlowPickHandler extends LitElement {
   protected updated(changedProps) {
     super.updated(changedProps);
     // Store the width and height so that when we search, box doesn't jump
-    const div = this.shadowRoot!.querySelector("div")!;
-    if (!this._width) {
-      const width = div.clientWidth;
-      if (width) {
-        this._width = width;
-      }
-    }
-    if (!this._height) {
-      const height = div.clientHeight;
-      if (height) {
-        this._height = height;
-      }
+    if (!this._width || !this._height) {
+      this.updateComplete.then(() => {
+        afterNextRender(() => {
+          const boundingRect =
+            this.shadowRoot!.querySelector("div")!.getBoundingClientRect();
+          this._width = boundingRect.width;
+          this._height = boundingRect.height;
+        });
+      });
     }
   }
 
@@ -236,10 +235,6 @@ class StepFlowPickHandler extends LitElement {
             max-height: calc(100vh - 134px);
           }
         }
-        paper-icon-item {
-          cursor: pointer;
-          margin-bottom: 4px;
-        }
         p {
           text-align: center;
           padding: 16px;