Use shopping list card in panel

polymer.json

@@ -13,7 +13,6 @@
     "src/panels/iframe/ha-panel-iframe.js",
     "src/panels/logbook/ha-panel-logbook.js",
     "src/panels/map/ha-panel-map.js",
-    "src/panels/shopping-list/ha-panel-shopping-list.js",
     "src/panels/mailbox/ha-panel-mailbox.js",
     "hassio/src/entrypoint.js"
   ],

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

@@ -0,0 +1,130 @@
+import "@polymer/app-layout/app-header/app-header";
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+import {
+  css,
+  CSSResultArray,
+  customElement,
+  html,
+  internalProperty,
+  LitElement,
+  property,
+  PropertyValues,
+  TemplateResult,
+} from "lit-element";
+import memoizeOne from "memoize-one";
+import { mdiMicrophone } from "@mdi/js";
+
+import { HomeAssistant } from "../../types";
+import { haStyle } from "../../resources/styles";
+import { createCardElement } from "../lovelace/create-element/create-card-element";
+import { LovelaceCard } from "../lovelace/types";
+import { HuiErrorCard } from "../lovelace/cards/hui-error-card";
+import { isComponentLoaded } from "../../common/config/is_component_loaded";
+import { showVoiceCommandDialog } from "../../dialogs/voice-command-dialog/show-ha-voice-command-dialog";
+
+import "../../components/ha-menu-button";
+import "../../layouts/ha-app-layout";
+
+@customElement("ha-panel-shopping-list")
+class PanelShoppingList extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean, reflect: true }) public narrow!: boolean;
+
+  @internalProperty() private _card!: LovelaceCard | HuiErrorCard;
+
+  private _conversation = memoizeOne((_components) =>
+    isComponentLoaded(this.hass, "conversation")
+  );
+
+  protected firstUpdated(changedProperties: PropertyValues): void {
+    super.firstUpdated(changedProperties);
+
+    this._card = createCardElement({ type: "shopping-list" }) as LovelaceCard;
+    this._card.hass = this.hass;
+  }
+
+  protected updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+
+    if (changedProperties.has("hass")) {
+      this._card.hass = this.hass;
+    }
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-app-layout>
+        <app-header fixed slot="header">
+          <app-toolbar>
+            <ha-menu-button
+              .hass=${this.hass}
+              .narrow=${this.narrow}
+            ></ha-menu-button>
+            <div main-title>${this.hass.localize("panel.shopping_list")}</div>
+            ${this._conversation(this.hass.config.components)
+              ? html`
+                  <mwc-icon-button
+                    .label=${this.hass!.localize(
+                      "ui.panel.shopping_list.start_conversation"
+                    )}
+                    @click=${this._showVoiceCommandDialog}
+                  >
+                    <ha-svg-icon .path=${mdiMicrophone}></ha-svg-icon>
+                  </mwc-icon-button>
+                `
+              : ""}
+          </app-toolbar>
+        </app-header>
+        <div id="columns">
+          <div class="column">
+            ${this._card}
+          </div>
+        </div>
+      </ha-app-layout>
+    `;
+  }
+
+  private _showVoiceCommandDialog(): void {
+    showVoiceCommandDialog(this);
+  }
+
+  static get styles(): CSSResultArray {
+    return [
+      haStyle,
+      css`
+        :host {
+          --mdc-theme-primary: var(--app-header-text-color);
+          display: block;
+          height: 100%;
+        }
+        :host([narrow]) app-toolbar mwc-button {
+          width: 65px;
+        }
+        .heading {
+          overflow: hidden;
+          white-space: nowrap;
+          margin-top: 4px;
+        }
+        #columns {
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          margin-left: 4px;
+          margin-right: 4px;
+        }
+        .column {
+          flex: 1 0 0;
+          max-width: 500px;
+          min-width: 0;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-panel-shopping-list": PanelShoppingList;
+  }
+}