Create hui-views-list component (#3631)

And use for move card view

src/panels/lovelace/components/hui-views-list.ts

@@ -0,0 +1,99 @@
+import {
+  customElement,
+  LitElement,
+  property,
+  TemplateResult,
+  html,
+  CSSResult,
+  css,
+} from "lit-element";
+import "@polymer/paper-listbox/paper-listbox";
+import "@polymer/paper-item/paper-icon-item";
+import "../../../../src/components/ha-icon";
+import { toggleAttribute } from "../../../../src/common/dom/toggle_attribute";
+import { fireEvent } from "../../../common/dom/fire_event";
+import { LovelaceConfig } from "../../../data/lovelace";
+
+declare global {
+  interface HASSDomEvents {
+    "view-selected": {
+      view: number;
+    };
+  }
+}
+
+@customElement("hui-views-list")
+class HuiViewsList extends LitElement {
+  @property() private lovelaceConfig?: LovelaceConfig | undefined;
+  @property() private selected?: number | undefined;
+
+  protected render(): TemplateResult | void {
+    if (!this.lovelaceConfig) {
+      return html``;
+    }
+
+    return html`
+      <paper-listbox attr-for-selected="data-index" .selected=${this.selected}>
+        ${this.lovelaceConfig.views.map(
+          (view, index) => html`
+            <paper-icon-item @click=${this._handlePickView} data-index=${index}>
+              ${view.icon
+                ? html`
+                    <ha-icon .icon=${view.icon} slot="item-icon"></ha-icon>
+                  `
+                : ""}
+              ${view.title || view.path}
+            </paper-icon-item>
+          `
+        )}
+      </paper-listbox>
+    `;
+  }
+
+  protected updated(changedProps) {
+    super.updated(changedProps);
+    toggleAttribute(
+      this,
+      "hide-icons",
+      this.lovelaceConfig
+        ? !this.lovelaceConfig.views.some((view) => view.icon)
+        : true
+    );
+  }
+
+  private async _handlePickView(ev: Event) {
+    const view = Number((ev.currentTarget as any).getAttribute("data-index"));
+    fireEvent(this, "view-selected", { view });
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      paper-listbox {
+        padding-top: 0;
+      }
+
+      paper-listbox ha-icon {
+        padding: 12px;
+        color: var(--secondary-text-color);
+      }
+
+      paper-icon-item {
+        cursor: pointer;
+      }
+
+      paper-icon-item[disabled] {
+        cursor: initial;
+      }
+
+      :host([hide-icons]) paper-icon-item {
+        --paper-item-icon-width: 0px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-views-list": HuiViewsList;
+  }
+}

src/panels/lovelace/editor/card-editor/hui-dialog-move-card-view.ts

@@ -12,6 +12,8 @@ import "../../../../components/dialog/ha-paper-dialog";
 // tslint:disable-next-line:no-duplicate-imports
 import { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
 
+import "../../components/hui-views-list";
+
 import { moveCard } from "../config-util";
 import { MoveCardViewDialogParams } from "./show-move-card-view-dialog";
 import { PolymerChangedEvent } from "../../../../polymer-types";
@@ -36,16 +38,11 @@ export class HuiDialogMoveCardView extends LitElement {
         @opened-changed="${this._openedChanged}"
       >
         <h2>Choose view to move card</h2>
-        ${this._params!.lovelace!.config.views.map((view, index) => {
-          return html`
-            <paper-item
-              ?active="${this._params!.path![0] === index}"
-              @click="${this._moveCard}"
-              .index="${index}"
-              >${view.title}</paper-item
-            >
-          `;
-        })}
+        <hui-views-list 
+        .lovelaceConfig=${this._params!.lovelace.config} 
+        .selected=${this._params!.path![0]} 
+        @view-selected=${this._moveCard}>
+        </hui-view-list>
       </ha-paper-dialog>
     `;
   }
@@ -80,15 +77,14 @@ export class HuiDialogMoveCardView extends LitElement {
     return this.shadowRoot!.querySelector("ha-paper-dialog")!;
   }
 
-  private _moveCard(e: Event): void {
-    const newView = (e.currentTarget! as any).index;
+  private _moveCard(e: CustomEvent): void {
+    const newView = e.detail.view;
     const path = this._params!.path!;
     if (newView === path[0]) {
       return;
     }
 
     const lovelace = this._params!.lovelace!;
-
     lovelace.saveConfig(moveCard(lovelace.config, path, [newView!]));
     this._dialog.close();
   }