Merge pull request #3197 from home-assistant/dev

20190514.0

build-scripts/webpack.js

@@ -82,6 +82,7 @@ const optimization = (latestBuild) => ({
       parallel: true,
       extractComments: true,
       terserOptions: {
+        safari10: true,
         ecma: latestBuild ? undefined : 5,
       },
     }),

gallery/src/ha-gallery.js

@@ -2,7 +2,6 @@ import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/iron-icon/iron-icon";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-icon-button/paper-icon-button";
@@ -10,6 +9,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../src/managers/notification-manager";
+import "../../src/components/ha-card";
 
 const DEMOS = require.context("./demos", true, /^(.*\.(ts$))[^.]*$/im);
 
@@ -38,13 +38,13 @@ class HaGallery extends PolymerElement {
         align-items: start;
       }
 
-      .pickers paper-card {
+      .pickers ha-card {
         width: 400px;
         display: block;
         margin: 16px 8px;
       }
 
-      .pickers paper-card:last-child {
+      .pickers ha-card:last-child {
         margin-bottom: 16px;
       }
 
@@ -79,7 +79,7 @@ class HaGallery extends PolymerElement {
           <div id='demo'></div>
           <template is='dom-if' if='[[!_demo]]'>
             <div class='pickers'>
-              <paper-card heading="Lovelace card demos">
+              <ha-card header="Lovelace card demos">
                 <div class='card-content intro'>
                   <p>
                     Lovelace has many different cards. Each card allows the user to tell a different story about what is going on in their house. These cards are very customizable, as no household is the same.
@@ -101,9 +101,9 @@ class HaGallery extends PolymerElement {
                     </paper-item>
                   </a>
                 </template>
-              </paper-card>
+              </ha-card>
 
-              <paper-card heading="More Info demos">
+              <ha-card header="More Info demos">
                 <div class='card-content intro'>
                   <p>
                     More info screens show up when an entity is clicked.
@@ -117,9 +117,9 @@ class HaGallery extends PolymerElement {
                     </paper-item>
                   </a>
                 </template>
-              </paper-card>
+              </ha-card>
 
-              <paper-card heading="Util demos">
+              <ha-card header="Util demos">
                 <div class='card-content intro'>
                   <p>
                     Test pages for our utility functions.
@@ -133,7 +133,7 @@ class HaGallery extends PolymerElement {
                     </paper-item>
                   </a>
                 </template>
-              </paper-card>
+              </ha-card>
             </div>
           </template>
         </div>

hassio/src/addon-store/hassio-addon-repository.ts

@@ -7,6 +7,7 @@ import {
   CSSResultArray,
 } from "lit-element";
 import "@polymer/paper-card/paper-card";
+import memoizeOne from "memoize-one";
 
 import "../components/hassio-card-content";
 import { hassioStyle } from "../resources/hassio-style";
@@ -16,14 +17,40 @@ import {
   HassioAddonRepository,
 } from "../../../src/data/hassio";
 import { navigate } from "../../../src/common/navigate";
+import { filterAndSort } from "../components/hassio-filter-addons";
 
 class HassioAddonRepositoryEl extends LitElement {
   @property() public hass!: HomeAssistant;
   @property() public repo!: HassioAddonRepository;
   @property() public addons!: HassioAddonInfo[];
+  @property() public filter!: string;
+
+  private _getAddons = memoizeOne(
+    (addons: HassioAddonInfo[], filter?: string) => {
+      if (filter) {
+        return filterAndSort(addons, filter);
+      }
+      return addons.sort((a, b) =>
+        a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1
+      );
+    }
+  );
 
   protected render(): TemplateResult | void {
     const repo = this.repo;
+    const addons = this._getAddons(this.addons, this.filter);
+
+    if (this.filter && addons.length < 1) {
+      return html`
+        <div class="card-group">
+          <div class="title">
+            <div class="description">
+              No results found in "${repo.name}"
+            </div>
+          </div>
+        </div>
+      `;
+    }
     return html`
       <div class="card-group">
         <div class="title">
@@ -34,31 +61,27 @@ class HassioAddonRepositoryEl extends LitElement {
           </div>
         </div>
 
-        ${this.addons
+        ${addons.map(
-          .sort((a, b) =>
+          (addon) => html`
-            a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1
+            <paper-card
-          )
+              .addon=${addon}
-          .map(
+              class=${addon.available ? "" : "not_available"}
-            (addon) => html`
+              @click=${this.addonTapped}
-              <paper-card
+            >
-                .addon=${addon}
+              <div class="card-content">
-                class=${addon.available ? "" : "not_available"}
+                <hassio-card-content
-                @click=${this.addonTapped}
+                  .hass=${this.hass}
-              >
+                  .title=${addon.name}
-                <div class="card-content">
+                  .description=${addon.description}
-                  <hassio-card-content
+                  .available=${addon.available}
-                    .hass=${this.hass}
+                  .icon=${this.computeIcon(addon)}
-                    .title=${addon.name}
+                  .iconTitle=${this.computeIconTitle(addon)}
-                    .description=${addon.description}
+                  .iconClass=${this.computeIconClass(addon)}
-                    .available=${addon.available}
+                ></hassio-card-content>
-                    .icon=${this.computeIcon(addon)}
+              </div>
-                    .iconTitle=${this.computeIconTitle(addon)}
+            </paper-card>
-                    .iconClass=${this.computeIconClass(addon)}
+          `
-                  ></hassio-card-content>
+        )}
-                </div>
-              </paper-card>
-            `
-          )}
       </div>
     `;
   }

hassio/src/addon-store/hassio-addon-store.ts

@@ -16,6 +16,7 @@ import {
   reloadHassioAddons,
 } from "../../../src/data/hassio";
 import "../../../src/layouts/loading-screen";
+import "../components/hassio-search-input";
 
 const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {
   if (a.slug === "local") {
@@ -37,10 +38,12 @@ class HassioAddonStore extends LitElement {
   @property() public hass!: HomeAssistant;
   @property() private _addons?: HassioAddonInfo[];
   @property() private _repos?: HassioAddonRepository[];
+  @property() private _filter?: string;
 
   public async refreshData() {
     this._repos = undefined;
     this._addons = undefined;
+    this._filter = undefined;
     await reloadHassioAddons(this.hass);
     await this._loadData();
   }
@@ -67,6 +70,7 @@ class HassioAddonStore extends LitElement {
           .hass=${this.hass}
           .repo=${repo}
           .addons=${addons}
+          .filter=${this._filter}
         ></hassio-addon-repository>
       `);
     }
@@ -77,6 +81,11 @@ class HassioAddonStore extends LitElement {
         .repos=${this._repos}
       ></hassio-repositories-editor>
 
+      <hassio-search-input
+        .filter=${this._filter}
+        @value-changed=${this._filterChanged}
+      ></hassio-search-input>
+
       ${repos}
     `;
   }
@@ -104,6 +113,10 @@ class HassioAddonStore extends LitElement {
     }
   }
 
+  private async _filterChanged(e) {
+    this._filter = e.detail.value;
+  }
+
   static get styles(): CSSResult {
     return css`
       hassio-addon-repository {

hassio/src/addon-store/hassio-repositories-editor.ts

@@ -135,6 +135,7 @@ class HassioRepositoriesEditor extends LitElement {
         paper-input {
           width: calc(100% - 49px);
           display: inline-block;
+          margin-top: -4px;
         }
       `,
     ];

hassio/src/components/hassio-filter-addons.ts

@@ -0,0 +1,13 @@
+import { HassioAddonInfo } from "../../../src/data/hassio";
+import * as Fuse from "fuse.js";
+
+export function filterAndSort(addons: HassioAddonInfo[], filter: string) {
+  const options: Fuse.FuseOptions<HassioAddonInfo> = {
+    keys: ["name", "description", "slug"],
+    caseSensitive: false,
+    minMatchCharLength: 2,
+    threshold: 0.2,
+  };
+  const fuse = new Fuse(addons, options);
+  return fuse.search(filter);
+}

hassio/src/components/hassio-search-input.ts

@@ -0,0 +1,82 @@
+import { TemplateResult, html } from "lit-html";
+import {
+  css,
+  CSSResult,
+  customElement,
+  LitElement,
+  property,
+} from "lit-element";
+import { fireEvent } from "../../../src/common/dom/fire_event";
+import "@polymer/iron-icon/iron-icon";
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@material/mwc-button";
+
+@customElement("hassio-search-input")
+class HassioSearchInput extends LitElement {
+  @property() private filter?: string;
+
+  protected render(): TemplateResult | void {
+    return html`
+      <div class="search-container">
+        <paper-input
+          label="Search"
+          .value=${this.filter}
+          @value-changed=${this._filterInputChanged}
+        >
+          <iron-icon
+            icon="hassio:magnify"
+            slot="prefix"
+            class="prefix"
+          ></iron-icon>
+          ${this.filter &&
+            html`
+              <paper-icon-button
+                slot="suffix"
+                class="suffix"
+                @click=${this._clearSearch}
+                icon="hassio:close"
+                alt="Clear"
+                title="Clear"
+              ></paper-icon-button>
+            `}
+        </paper-input>
+      </div>
+    `;
+  }
+
+  private async _filterChanged(value: string) {
+    fireEvent(this, "value-changed", { value: String(value) });
+  }
+
+  private async _filterInputChanged(e) {
+    this._filterChanged(e.target.value);
+  }
+
+  private async _clearSearch() {
+    this._filterChanged("");
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      paper-input {
+        flex: 1 1 auto;
+        margin: 0 16px;
+      }
+      .search-container {
+        display: inline-flex;
+        width: 100%;
+        align-items: center;
+      }
+      .prefix {
+        margin: 8px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hassio-search-input": HassioSearchInput;
+  }
+}

package.json

@@ -74,6 +74,7 @@
     "deep-clone-simple": "^1.1.1",
     "es6-object-assign": "^1.1.0",
     "fecha": "^3.0.2",
+    "fuse.js": "^3.4.4",
     "hls.js": "^0.12.4",
     "home-assistant-js-websocket": "^4.1.2",
     "intl-messageformat": "^2.2.0",

setup.py

@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20190510.0",
+    version="20190514.0",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/home-assistant-polymer",
     author="The Home Assistant Authors",

src/data/automation.ts

@@ -6,6 +6,7 @@ import {
 export interface AutomationEntity extends HassEntityBase {
   attributes: HassEntityAttributeBase & {
     id?: string;
+    last_triggered: string;
   };
 }
 

src/data/script.ts

@@ -1,5 +1,14 @@
+import { HomeAssistant } from "../types";
+import computeObjectId from "../common/entity/compute_object_id";
+
 export interface EventAction {
   event: string;
   event_data?: { [key: string]: any };
   event_data_template?: { [key: string]: any };
 }
+
+export const triggerScript = (
+  hass: HomeAssistant,
+  entityId: string,
+  variables?: {}
+) => hass.callService("script", computeObjectId(entityId), variables);

src/dialogs/config-flow/styles.ts

@@ -21,7 +21,7 @@ export const configFlowContentStyles = css`
   }
 
   ha-markdown {
-    word-break: break-word;
+    overflow-wrap: break-word;
   }
   ha-markdown a {
     color: var(--primary-color);

src/managers/notification-manager.js

@@ -1,54 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import LocalizeMixin from "../mixins/localize-mixin";
-import { computeRTL } from "../common/util/compute_rtl";
-
-class NotificationManager extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style>
-        paper-toast {
-          z-index: 1;
-        }
-      </style>
-
-      <ha-toast
-        id="toast"
-        dir="[[_rtl]]"
-        no-cancel-on-outside-click="[[_cancelOnOutsideClick]]"
-      ></ha-toast>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-
-      _cancelOnOutsideClick: {
-        type: Boolean,
-        value: false,
-      },
-
-      _rtl: {
-        type: String,
-        computed: "_computeRTLDirection(hass)",
-      },
-    };
-  }
-
-  ready() {
-    super.ready();
-    import(/* webpackChunkName: "ha-toast" */ "../components/ha-toast");
-  }
-
-  showDialog({ message }) {
-    this.$.toast.show(message);
-  }
-
-  _computeRTLDirection(hass) {
-    return computeRTL(hass) ? "rtl" : "ltr";
-  }
-}
-
-customElements.define("notification-manager", NotificationManager);

src/managers/notification-manager.ts

@@ -0,0 +1,30 @@
+import { computeRTL } from "../common/util/compute_rtl";
+import "../components/ha-toast";
+import { LitElement, query, property, TemplateResult, html } from "lit-element";
+import { HomeAssistant } from "../types";
+// Typing
+// tslint:disable-next-line: no-duplicate-imports
+import { HaToast } from "../components/ha-toast";
+
+export interface ShowToastParams {
+  message: string;
+}
+
+class NotificationManager extends LitElement {
+  @property() public hass!: HomeAssistant;
+  @query("ha-toast") private _toast!: HaToast;
+
+  public showDialog({ message }: ShowToastParams) {
+    const toast = this._toast;
+    toast.setAttribute("dir", computeRTL(this.hass) ? "rtl" : "ltr");
+    toast.show(message);
+  }
+
+  protected render(): TemplateResult | void {
+    return html`
+      <ha-toast dir="[[_rtl]]" noCancelOnOutsideClick=${false}></ha-toast>
+    `;
+  }
+}
+
+customElements.define("notification-manager", NotificationManager);

src/panels/calendar/ha-panel-calendar.js

@@ -2,7 +2,6 @@ import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/paper-listbox/paper-listbox";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-item/paper-item";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@@ -11,6 +10,7 @@ import moment from "moment";
 import dates from "react-big-calendar/lib/utils/dates";
 
 import "../../components/ha-menu-button";
+import "../../components/ha-card";
 import "../../resources/ha-style";
 import "./ha-big-calendar";
 
@@ -74,7 +74,7 @@ class HaPanelCalendar extends LocalizeMixin(PolymerElement) {
 
         <div class="flex content">
           <div id="calendars" class="layout vertical wrap">
-            <paper-card heading="Calendars">
+            <ha-card header="Calendars">
               <paper-listbox
                 id="calendar_list"
                 multi
@@ -92,7 +92,7 @@ class HaPanelCalendar extends LocalizeMixin(PolymerElement) {
                   </paper-item>
                 </template>
               </paper-listbox>
-            </paper-card>
+            </ha-card>
           </div>
           <div class="flex layout horizontal wrap">
             <ha-big-calendar

src/panels/config/automation/ha-automation-picker.js

@@ -1,184 +0,0 @@
-import "@polymer/app-layout/app-header/app-header";
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-fab/paper-fab";
-import "@polymer/paper-icon-button/paper-icon-button";
-import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-item/paper-item";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../../components/ha-card";
-import "../../../components/ha-paper-icon-button-arrow-prev";
-import "../../../layouts/ha-app-layout";
-
-import "../ha-config-section";
-
-import "../../../components/ha-icon-next";
-
-import NavigateMixin from "../../../mixins/navigate-mixin";
-import LocalizeMixin from "../../../mixins/localize-mixin";
-import computeStateName from "../../../common/entity/compute_state_name";
-import { computeRTL } from "../../../common/util/compute_rtl";
-
-/*
- * @appliesMixin LocalizeMixin
- * @appliesMixin NavigateMixin
- */
-class HaAutomationPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
-  static get template() {
-    return html`
-      <style include="ha-style">
-        :host {
-          display: block;
-        }
-
-        ha-card {
-          overflow: hidden;
-        }
-
-        paper-item {
-          cursor: pointer;
-        }
-
-        paper-fab {
-          position: fixed;
-          bottom: 16px;
-          right: 16px;
-          z-index: 1;
-        }
-
-        paper-fab[is-wide] {
-          bottom: 24px;
-          right: 24px;
-        }
-
-        paper-fab[rtl] {
-          right: auto;
-          left: 16px;
-        }
-
-        paper-fab[rtl][is-wide] {
-          bottom: 24px;
-          right: auto;
-          left: 24px;
-        }
-
-        a {
-          color: var(--primary-color);
-        }
-      </style>
-
-      <ha-app-layout has-scrolling-region="">
-        <app-header slot="header" fixed="">
-          <app-toolbar>
-            <ha-paper-icon-button-arrow-prev on-click="_backTapped">
-            </ha-paper-icon-button-arrow-prev>
-            <div main-title="">
-              [[localize('ui.panel.config.automation.caption')]]
-            </div>
-          </app-toolbar>
-        </app-header>
-
-        <ha-config-section is-wide="[[isWide]]">
-          <div slot="header">
-            [[localize('ui.panel.config.automation.picker.header')]]
-          </div>
-          <div slot="introduction">
-            [[localize('ui.panel.config.automation.picker.introduction')]]
-            <p>
-              <a
-                href="https://home-assistant.io/docs/automation/editor/"
-                target="_blank"
-              >
-                [[localize('ui.panel.config.automation.picker.learn_more')]]
-              </a>
-            </p>
-          </div>
-
-          <ha-card
-            heading="[[localize('ui.panel.config.automation.picker.pick_automation')]]"
-          >
-            <template is="dom-if" if="[[!automations.length]]">
-              <div class="card-content">
-                <p>
-                  [[localize('ui.panel.config.automation.picker.no_automations')]]
-                </p>
-              </div>
-            </template>
-            <template is="dom-repeat" items="[[automations]]" as="automation">
-              <paper-item>
-                <paper-item-body two-line="" on-click="automationTapped">
-                  <div>[[computeName(automation)]]</div>
-                  <div secondary="">[[computeDescription(automation)]]</div>
-                </paper-item-body>
-                <ha-icon-next></ha-icon-next>
-              </paper-item>
-            </template>
-          </ha-card>
-        </ha-config-section>
-
-        <paper-fab
-          slot="fab"
-          is-wide$="[[isWide]]"
-          icon="hass:plus"
-          title="[[localize('ui.panel.config.automation.picker.add_automation')]]"
-          on-click="addAutomation"
-          rtl$="[[rtl]]"
-        ></paper-fab>
-      </ha-app-layout>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-      },
-
-      automations: {
-        type: Array,
-      },
-
-      isWide: {
-        type: Boolean,
-      },
-
-      rtl: {
-        type: Boolean,
-        reflectToAttribute: true,
-        computed: "_computeRTL(hass)",
-      },
-    };
-  }
-
-  automationTapped(ev) {
-    this.navigate(
-      "/config/automation/edit/" +
-        this.automations[ev.model.index].attributes.id
-    );
-  }
-
-  addAutomation() {
-    this.navigate("/config/automation/new");
-  }
-
-  computeName(automation) {
-    return computeStateName(automation);
-  }
-
-  // Still thinking of something to add here.
-  // eslint-disable-next-line
-  computeDescription(automation) {
-    return "";
-  }
-
-  _backTapped() {
-    history.back();
-  }
-
-  _computeRTL(hass) {
-    return computeRTL(hass);
-  }
-}
-
-customElements.define("ha-automation-picker", HaAutomationPicker);

src/panels/config/automation/ha-automation-picker.ts

@@ -0,0 +1,224 @@
+import {
+  LitElement,
+  TemplateResult,
+  html,
+  CSSResultArray,
+  css,
+  property,
+  customElement,
+} from "lit-element";
+import { ifDefined } from "lit-html/directives/if-defined";
+import "@polymer/paper-fab/paper-fab";
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-item/paper-item-body";
+import "@polymer/paper-tooltip/paper-tooltip";
+import "../../../layouts/hass-subpage";
+
+import "../../../components/ha-card";
+import "../../../components/entity/ha-entity-toggle";
+
+import "../ha-config-section";
+
+import computeStateName from "../../../common/entity/compute_state_name";
+import { computeRTL } from "../../../common/util/compute_rtl";
+import { haStyle } from "../../../resources/styles";
+import { HomeAssistant } from "../../../types";
+import { AutomationEntity } from "../../../data/automation";
+import format_date_time from "../../../common/datetime/format_date_time";
+import { fireEvent } from "../../../common/dom/fire_event";
+
+@customElement("ha-automation-picker")
+class HaAutomationPicker extends LitElement {
+  @property() public hass!: HomeAssistant;
+  @property() public isWide!: boolean;
+  @property() public automations!: AutomationEntity[];
+
+  protected render(): TemplateResult | void {
+    return html`
+      <hass-subpage
+        .header=${this.hass.localize("ui.panel.config.automation.caption")}
+      >
+        <ha-config-section .isWide=${this.isWide}>
+          <div slot="header">
+            ${this.hass.localize("ui.panel.config.automation.picker.header")}
+          </div>
+          <div slot="introduction">
+            ${this.hass.localize(
+              "ui.panel.config.automation.picker.introduction"
+            )}
+            <p>
+              <a
+                href="https://home-assistant.io/docs/automation/editor/"
+                target="_blank"
+              >
+                ${this.hass.localize(
+                  "ui.panel.config.automation.picker.learn_more"
+                )}
+              </a>
+            </p>
+          </div>
+
+          <ha-card
+            .heading=${this.hass.localize(
+              "ui.panel.config.automation.picker.pick_automation"
+            )}
+          >
+            ${this.automations.length === 0
+              ? html`
+                  <div class="card-content">
+                    <p>
+                      ${this.hass.localize(
+                        "ui.panel.config.automation.picker.no_automations"
+                      )}
+                    </p>
+                  </div>
+                `
+              : this.automations.map(
+                  (automation) => html`
+
+                      <div class='automation'>
+                        <ha-entity-toggle
+                          .hass=${this.hass}
+                          .stateObj=${automation}
+                        ></ha-entity-toggle>
+
+                        <paper-item-body two-line>
+                          <div>${computeStateName(automation)}</div>
+                          <div secondary>
+                            Last triggered: ${
+                              automation.attributes.last_triggered
+                                ? format_date_time(
+                                    new Date(
+                                      automation.attributes.last_triggered
+                                    ),
+                                    this.hass.language
+                                  )
+                                : "never"
+                            }
+                          </div>
+                        </paper-item-body>
+                        <div class='actions'>
+                          <paper-icon-button
+                            .automation=${automation}
+                            @click=${this._showInfo}
+                            icon="hass:information-outline"
+                          ></paper-icon-button>
+                          <a
+                            href=${ifDefined(
+                              automation.attributes.id
+                                ? `/config/automation/edit/${
+                                    automation.attributes.id
+                                  }`
+                                : undefined
+                            )}
+                          >
+                            <paper-icon-button
+                              icon="hass:pencil"
+                              .disabled=${!automation.attributes.id}
+                            ></paper-icon-button>
+                            ${
+                              !automation.attributes.id
+                                ? html`
+                                    <paper-tooltip position="left">
+                                      Only automations defined in
+                                      automations.yaml are editable.
+                                    </paper-tooltip>
+                                  `
+                                : ""
+                            }
+                          </a>
+                        </div>
+                      </div>
+                    </a>
+                  `
+                )}
+          </ha-card>
+        </ha-config-section>
+
+        <a href="/config/automation/new">
+          <paper-fab
+            slot="fab"
+            ?is-wide=${this.isWide}
+            icon="hass:plus"
+            title=${this.hass.localize(
+              "ui.panel.config.automation.picker.add_automation"
+            )}
+            ?rtl=${computeRTL(this.hass)}
+          ></paper-fab
+        ></a>
+      </hass-subpage>
+    `;
+  }
+
+  private _showInfo(ev) {
+    const entityId = ev.currentTarget.automation.entity_id;
+    fireEvent(this, "hass-more-info", { entityId });
+  }
+
+  static get styles(): CSSResultArray {
+    return [
+      haStyle,
+      css`
+        :host {
+          display: block;
+        }
+
+        ha-card {
+          margin-bottom: 56px;
+        }
+
+        .automation {
+          display: flex;
+          flex-direction: horizontal;
+          align-items: center;
+          padding: 0 8px 0 16px;
+        }
+
+        .automation a[href] {
+          color: var(--primary-text-color);
+        }
+
+        ha-entity-toggle {
+          margin-right: 16px;
+        }
+
+        .actions {
+          display: flex;
+        }
+
+        paper-fab {
+          position: fixed;
+          bottom: 16px;
+          right: 16px;
+          z-index: 1;
+        }
+
+        paper-fab[is-wide] {
+          bottom: 24px;
+          right: 24px;
+        }
+
+        paper-fab[rtl] {
+          right: auto;
+          left: 16px;
+        }
+
+        paper-fab[rtl][is-wide] {
+          bottom: 24px;
+          right: auto;
+          left: 24px;
+        }
+
+        a {
+          color: var(--primary-color);
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-automation-picker": HaAutomationPicker;
+  }
+}

src/panels/config/automation/ha-config-automation.js

@@ -93,10 +93,7 @@ class HaConfigAutomation extends PolymerElement {
     Object.keys(hass.states).forEach(function(key) {
       var entity = hass.states[key];
 
-      if (
+      if (computeStateDomain(entity) === "automation") {
-        computeStateDomain(entity) === "automation" &&
-        "id" in entity.attributes
-      ) {
         automations.push(entity);
       }
     });

src/panels/config/script/ha-script-picker.js

@@ -1,176 +0,0 @@
-import "@polymer/app-layout/app-header/app-header";
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-fab/paper-fab";
-import "@polymer/paper-icon-button/paper-icon-button";
-import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-item/paper-item";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import { computeRTL } from "../../../common/util/compute_rtl";
-
-import "../../../layouts/ha-app-layout";
-import "../../../components/ha-card";
-import "../../../components/ha-icon-next";
-import "../../../components/ha-paper-icon-button-arrow-prev";
-
-import "../ha-config-section";
-
-import computeStateName from "../../../common/entity/compute_state_name";
-import NavigateMixin from "../../../mixins/navigate-mixin";
-import LocalizeMixin from "../../../mixins/localize-mixin";
-
-/*
- * @appliesMixin LocalizeMixin
- * @appliesMixin NavigateMixin
- */
-class HaScriptPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
-  static get template() {
-    return html`
-      <style include="ha-style">
-        :host {
-          display: block;
-        }
-
-        ha-card {
-          overflow: hidden;
-        }
-
-        paper-item {
-          cursor: pointer;
-        }
-
-        paper-fab {
-          position: fixed;
-          bottom: 16px;
-          right: 16px;
-          z-index: 1;
-        }
-
-        paper-fab[is-wide] {
-          bottom: 24px;
-          right: 24px;
-        }
-
-        paper-fab[rtl] {
-          right: auto;
-          left: 16px;
-        }
-
-        paper-fab[rtl][is-wide] {
-          bottom: 24px;
-          right: auto;
-          left: 24px;
-        }
-
-        a {
-          color: var(--primary-color);
-        }
-      </style>
-
-      <ha-app-layout has-scrolling-region="">
-        <app-header slot="header" fixed="">
-          <app-toolbar>
-            <ha-paper-icon-button-arrow-prev
-              on-click="_backTapped"
-            ></ha-paper-icon-button-arrow-prev>
-            <div main-title="">
-              [[localize('ui.panel.config.script.caption')]]
-            </div>
-          </app-toolbar>
-        </app-header>
-
-        <ha-config-section is-wide="[[isWide]]">
-          <div slot="header">Script Editor</div>
-          <div slot="introduction">
-            The script editor allows you to create and edit scripts. Please read
-            <a
-              href="https://home-assistant.io/docs/scripts/editor/"
-              target="_blank"
-              >the instructions</a
-            >
-            to make sure that you have configured Home Assistant correctly.
-          </div>
-
-          <ha-card header="Pick script to edit">
-            <template is="dom-if" if="[[!scripts.length]]">
-              <div class="card-content">
-                <p>We couldn't find any editable scripts.</p>
-              </div>
-            </template>
-            <template is="dom-repeat" items="[[scripts]]" as="script">
-              <paper-item>
-                <paper-item-body two-line="" on-click="scriptTapped">
-                  <div>[[computeName(script)]]</div>
-                  <div secondary="">[[computeDescription(script)]]</div>
-                </paper-item-body>
-                <ha-icon-next></ha-icon-next>
-              </paper-item>
-            </template>
-          </ha-card>
-        </ha-config-section>
-
-        <paper-fab
-          slot="fab"
-          is-wide$="[[isWide]]"
-          icon="hass:plus"
-          title="Add Script"
-          on-click="addScript"
-          rtl$="[[rtl]]"
-        ></paper-fab>
-      </ha-app-layout>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-      },
-
-      scripts: {
-        type: Array,
-      },
-
-      isWide: {
-        type: Boolean,
-      },
-
-      rtl: {
-        type: Boolean,
-        reflectToAttribute: true,
-        computed: "_computeRTL(hass)",
-      },
-    };
-  }
-
-  scriptTapped(ev) {
-    this.navigate(
-      "/config/script/edit/" + this.scripts[ev.model.index].entity_id
-    );
-  }
-
-  addScript() {
-    this.navigate("/config/script/new");
-  }
-
-  computeName(script) {
-    return computeStateName(script);
-  }
-
-  // Still thinking of something to add here.
-  // eslint-disable-next-line
-  computeDescription(script) {
-    return "";
-  }
-
-  _backTapped() {
-    history.back();
-  }
-
-  _computeRTL(hass) {
-    return computeRTL(hass);
-  }
-}
-
-customElements.define("ha-script-picker", HaScriptPicker);

src/panels/config/script/ha-script-picker.ts

@@ -0,0 +1,173 @@
+import {
+  LitElement,
+  html,
+  CSSResultArray,
+  css,
+  TemplateResult,
+  property,
+  customElement,
+} from "lit-element";
+import "@polymer/paper-fab/paper-fab";
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-item/paper-item-body";
+import { HassEntity } from "home-assistant-js-websocket";
+
+import "../../../layouts/hass-subpage";
+
+import { computeRTL } from "../../../common/util/compute_rtl";
+
+import "../../../components/ha-card";
+
+import "../ha-config-section";
+
+import computeStateName from "../../../common/entity/compute_state_name";
+import { haStyle } from "../../../resources/styles";
+import { HomeAssistant } from "../../../types";
+import { triggerScript } from "../../../data/script";
+import { showToast } from "../../../util/toast";
+
+@customElement("ha-script-picker")
+class HaScriptPicker extends LitElement {
+  @property() public hass!: HomeAssistant;
+  @property() public scripts!: HassEntity[];
+  @property() public isWide!: boolean;
+
+  protected render(): TemplateResult | void {
+    return html`
+      <hass-subpage
+        .header=${this.hass.localize("ui.panel.config.script.caption")}
+      >
+        <ha-config-section .isWide=${this.isWide}>
+          <div slot="header">Script Editor</div>
+          <div slot="introduction">
+            The script editor allows you to create and edit scripts. Please read
+            <a
+              href="https://home-assistant.io/docs/scripts/editor/"
+              target="_blank"
+              >the instructions</a
+            >
+            to make sure that you have configured Home Assistant correctly.
+          </div>
+
+          <ha-card header="Pick script to edit">
+            ${this.scripts.length === 0
+              ? html`
+                  <div class="card-content">
+                    <p>We couldn't find any scripts.</p>
+                  </div>
+                `
+              : this.scripts.map(
+                  (script) => html`
+                    <div class="script">
+                      <paper-icon-button
+                        .script=${script}
+                        icon="hass:play"
+                        @click=${this._runScript}
+                      ></paper-icon-button>
+                      <paper-item-body>
+                        <div>${computeStateName(script)}</div>
+                      </paper-item-body>
+                      <div class="actions">
+                        <a href=${`/config/script/edit/${script.entity_id}`}>
+                          <paper-icon-button
+                            icon="hass:pencil"
+                          ></paper-icon-button>
+                        </a>
+                      </div>
+                    </div>
+                  `
+                )}
+          </ha-card>
+        </ha-config-section>
+
+        <a href="/config/script/new">
+          <paper-fab
+            slot="fab"
+            ?is-wide=${this.isWide}
+            icon="hass:plus"
+            title="Add Script"
+            ?rtl=${computeRTL(this.hass)}
+          ></paper-fab>
+        </a>
+      </hass-subpage>
+    `;
+  }
+
+  private async _runScript(ev) {
+    const script = ev.currentTarget.script as HassEntity;
+    await triggerScript(this.hass, script.entity_id);
+    showToast(this, {
+      message: `Triggered ${computeStateName(script)}`,
+    });
+  }
+
+  static get styles(): CSSResultArray {
+    return [
+      haStyle,
+      css`
+        :host {
+          display: block;
+        }
+
+        ha-card {
+          padding-bottom: 8px;
+          margin-bottom: 56px;
+        }
+
+        .script {
+          display: flex;
+          flex-direction: horizontal;
+          align-items: center;
+          padding: 0 8px;
+          margin: 4px 0;
+        }
+
+        .script > *:first-child {
+          margin-right: 8px;
+        }
+
+        .script a[href],
+        paper-icon-button {
+          color: var(--primary-text-color);
+        }
+
+        .actions {
+          display: flex;
+        }
+
+        paper-fab {
+          position: fixed;
+          bottom: 16px;
+          right: 16px;
+          z-index: 1;
+        }
+
+        paper-fab[is-wide] {
+          bottom: 24px;
+          right: 24px;
+        }
+
+        paper-fab[rtl] {
+          right: auto;
+          left: 16px;
+        }
+
+        paper-fab[rtl][is-wide] {
+          bottom: 24px;
+          right: auto;
+          left: 24px;
+        }
+
+        a {
+          color: var(--primary-color);
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-script-picker": HaScriptPicker;
+  }
+}

src/panels/config/zha/zha-binding.ts

@@ -1,8 +1,8 @@
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-service-description";
+import "../../../components/ha-card";
 import "../ha-config-section";
 import "@material/mwc-button/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-listbox/paper-listbox";
@@ -55,7 +55,7 @@ export class ZHABindingControl extends LitElement {
         </div>
         <span slot="introduction">Bind and unbind devices.</span>
 
-        <paper-card class="content">
+        <ha-card class="content">
           <div class="command-picker">
             <paper-dropdown-menu label="Bindable Devices" class="flex">
               <paper-listbox
@@ -102,7 +102,7 @@ export class ZHABindingControl extends LitElement {
                 `
               : ""}
           </div>
-        </paper-card>
+        </ha-card>
       </ha-config-section>
     `;
   }
@@ -155,8 +155,7 @@ export class ZHABindingControl extends LitElement {
           margin-top: 24px;
         }
 
-        paper-card {
+        ha-card {
-          display: block;
           margin: 0 auto;
           max-width: 600px;
         }

src/panels/config/zha/zha-cluster-attributes.ts

@@ -1,8 +1,8 @@
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-service-description";
+import "../../../components/ha-card";
 import "../ha-config-section";
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-input/paper-input";
@@ -95,7 +95,7 @@ export class ZHAClusterAttributes extends LitElement {
         </div>
         <span slot="introduction">View and edit cluster attributes.</span>
 
-        <paper-card class="content">
+        <ha-card class="content">
           <div class="attribute-picker">
             <paper-dropdown-menu
               label="Attributes of the selected cluster"
@@ -129,7 +129,7 @@ export class ZHAClusterAttributes extends LitElement {
           ${this._selectedAttributeIndex !== -1
             ? this._renderAttributeInteractions()
             : ""}
-        </paper-card>
+        </ha-card>
       </ha-config-section>
     `;
   }
@@ -280,8 +280,7 @@ export class ZHAClusterAttributes extends LitElement {
           margin-top: 24px;
         }
 
-        paper-card {
+        ha-card {
-          display: block;
           margin: 0 auto;
           max-width: 600px;
         }

src/panels/config/zha/zha-cluster-commands.ts

@@ -1,7 +1,7 @@
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-service-description";
+import "../../../components/ha-card";
 import "../ha-config-section";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-input/paper-input";
@@ -88,7 +88,7 @@ export class ZHAClusterCommands extends LitElement {
         </div>
         <span slot="introduction">View and issue cluster commands.</span>
 
-        <paper-card class="content">
+        <ha-card class="content">
           <div class="command-picker">
             <paper-dropdown-menu
               label="Commands of the selected cluster"
@@ -149,7 +149,7 @@ export class ZHAClusterCommands extends LitElement {
                 </div>
               `
             : ""}
-        </paper-card>
+        </ha-card>
       </ha-config-section>
     `;
   }
@@ -215,8 +215,7 @@ export class ZHAClusterCommands extends LitElement {
           margin-top: 24px;
         }
 
-        paper-card {
+        ha-card {
-          display: block;
           margin: 0 auto;
           max-width: 600px;
         }

src/panels/config/zha/zha-clusters.ts

@@ -1,7 +1,7 @@
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-service-description";
+import "../../../components/ha-card";
 import "../ha-config-section";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";

src/panels/config/zha/zha-device-card.ts

@@ -1,8 +1,8 @@
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-service-description";
 import "../../../components/entity/state-badge";
+import "../../../components/ha-card";
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-icon-item";
@@ -108,7 +108,7 @@ class ZHADeviceCard extends LitElement {
 
   protected render(): TemplateResult | void {
     return html`
-      <paper-card heading="${this.isJoinPage ? this.device!.name : ""}">
+      <ha-card header="${this.isJoinPage ? this.device!.name : ""}">
         ${
           this.isJoinPage
             ? html`
@@ -256,7 +256,7 @@ class ZHADeviceCard extends LitElement {
             : ""
         }
         </div>
-      </paper-card>
+      </ha-card>
     `;
   }
 
@@ -326,7 +326,7 @@ class ZHADeviceCard extends LitElement {
           padding: 4px;
           justify-content: left;
         }
-        paper-card {
+        ha-card {
           flex: 1 0 100%;
           padding-bottom: 10px;
           min-width: 425px;

src/panels/config/zha/zha-network.ts

@@ -1,8 +1,8 @@
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-service-description";
+import "../../../components/ha-card";
 import "../ha-config-section";
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-icon-button/paper-icon-button";
 
 import {
@@ -50,7 +50,7 @@ export class ZHANetwork extends LitElement {
         </div>
         <span slot="introduction">Commands that affect entire network</span>
 
-        <paper-card class="content">
+        <ha-card class="content">
           <div class="card-actions">
             <mwc-button @click=${this._onAddDevicesClick}>
               Add Devices
@@ -66,7 +66,7 @@ export class ZHANetwork extends LitElement {
                 `
               : ""}
           </div>
-        </paper-card>
+        </ha-card>
       </ha-config-section>
     `;
   }
@@ -87,8 +87,7 @@ export class ZHANetwork extends LitElement {
           margin-top: 24px;
         }
 
-        paper-card {
+        ha-card {
-          display: block;
           margin: 0 auto;
           max-width: 600px;
         }

src/panels/config/zha/zha-node.ts

@@ -1,10 +1,10 @@
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-service-description";
+import "../../../components/ha-card";
 import "../ha-config-section";
 import "./zha-clusters";
 import "./zha-device-card";
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
@@ -70,7 +70,7 @@ export class ZHANode extends LitElement {
           press at ~5 second intervals that keep devices awake while you
           interact with them.
         </span>
-        <paper-card class="content">
+        <ha-card class="content">
           <div class="node-picker">
             <paper-dropdown-menu
               label="Devices"
@@ -116,7 +116,7 @@ export class ZHANode extends LitElement {
               `
             : ""}
           ${this._selectedDevice ? this._renderClusters() : ""}
-        </paper-card>
+        </ha-card>
       </ha-config-section>
     `;
   }
@@ -183,8 +183,7 @@ export class ZHANode extends LitElement {
           padding-bottom: 16px;
         }
 
-        paper-card {
+        ha-card {
-          display: block;
           margin: 0 auto;
           max-width: 600px;
         }

src/panels/config/zwave/ha-config-zwave.js

@@ -1,6 +1,5 @@
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-input/paper-input";
@@ -15,6 +14,7 @@ import "../../../components/ha-service-description";
 import "../../../components/ha-paper-icon-button-arrow-prev";
 import "../../../layouts/ha-app-layout";
 import "../../../resources/ha-style";
+import "../../../components/ha-card";
 
 import "../ha-config-section";
 import "../ha-form-style";
@@ -53,8 +53,7 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
           padding-right: 24px;
         }
 
-        paper-card {
+        ha-card {
-          display: block;
           margin: 0 auto;
           max-width: 600px;
         }
@@ -116,7 +115,7 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
             list of available commands.
           </span>
 
-          <paper-card class="content">
+          <ha-card class="content">
             <div class="device-picker">
               <paper-dropdown-menu dynamic-align="" label="Nodes" class="flex">
                 <paper-listbox
@@ -309,7 +308,7 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
                 </div>
               </template>
             </template>
-          </paper-card>
+          </ha-card>
 
           <template is="dom-if" if="[[computeIsNodeSelected(selectedNode)]]">
             <!-- Value card -->

src/panels/config/zwave/zwave-groups.js

@@ -1,4 +1,3 @@
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
@@ -6,6 +5,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../../components/buttons/ha-call-service-button";
+import "../../../components/ha-card";
 
 import computeStateName from "../../../common/entity/compute_state_name";
 
@@ -17,8 +17,7 @@ class ZwaveGroups extends PolymerElement {
           margin-top: 24px;
         }
 
-        paper-card {
+        ha-card {
-          display: block;
           margin: 0 auto;
           max-width: 600px;
         }
@@ -37,7 +36,7 @@ class ZwaveGroups extends PolymerElement {
           padding-bottom: 12px;
         }
       </style>
-      <paper-card class="content" heading="Node group associations">
+      <ha-card class="content" header="Node group associations">
         <!-- TODO make api for getting groups and members -->
         <div class="device-picker">
           <paper-dropdown-menu label="Group" dynamic-align="" class="flex">
@@ -120,7 +119,7 @@ class ZwaveGroups extends PolymerElement {
             </template>
           </div>
         </template>
-      </paper-card>
+      </ha-card>
     `;
   }
 

src/panels/config/zwave/zwave-log.js

@@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@@ -8,6 +7,7 @@ import { EventsMixin } from "../../../mixins/events-mixin";
 import isPwa from "../../../common/config/is_pwa";
 
 import "../ha-config-section";
+import "../../../components/ha-card";
 
 let registeredDialog = false;
 
@@ -19,8 +19,7 @@ class OzwLog extends EventsMixin(PolymerElement) {
         margin-top: 24px;
       }
 
-      paper-card {
+      ha-card {
-        display: block;
         margin: 0 auto;
         max-width: 600px;
       }
@@ -34,7 +33,7 @@ class OzwLog extends EventsMixin(PolymerElement) {
     </style>
     <ha-config-section is-wide="[[isWide]]">
       <span slot="header">OZW Log</span>
-      <paper-card>
+      <ha-card>
         <div class="device-picker">
           <paper-input label="Number of last log lines." type="number" min="0" max="1000" step="10" value="{{numLogLines}}">
           </paper-input>
@@ -42,7 +41,7 @@ class OzwLog extends EventsMixin(PolymerElement) {
         <div class="card-actions">
           <mwc-button raised="true" on-click="_openLogWindow">Load</mwc-button>
           <mwc-button raised="true" on-click="_tailLog" disabled="{{_completeLog}}">Tail</mwc-button>
-      </paper-card>
+      </ha-card>
     </ha-config-section>
 `;
   }

src/panels/config/zwave/zwave-network.js

@@ -1,4 +1,3 @@
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-icon-button/paper-icon-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -6,6 +5,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../components/buttons/ha-call-api-button";
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-service-description";
+import "../../../components/ha-card";
 import "../ha-config-section";
 
 class ZwaveNetwork extends PolymerElement {
@@ -16,8 +16,7 @@ class ZwaveNetwork extends PolymerElement {
           margin-top: 24px;
         }
 
-        paper-card {
+        ha-card {
-          display: block;
           margin: 0 auto;
           max-width: 600px;
         }
@@ -57,7 +56,7 @@ class ZwaveNetwork extends PolymerElement {
           to figure out.
         </span>
 
-        <paper-card class="content">
+        <ha-card class="content">
           <div class="card-actions">
             <ha-call-service-button
               hass="[[hass]]"
@@ -193,7 +192,7 @@ class ZwaveNetwork extends PolymerElement {
               Save Config
             </ha-call-api-button>
           </div>
-        </paper-card>
+        </ha-card>
       </ha-config-section>
     `;
   }

src/panels/config/zwave/zwave-node-config.js

@@ -1,4 +1,3 @@
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
@@ -7,6 +6,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../../components/buttons/ha-call-service-button";
+import "../../../components/ha-card";
 
 class ZwaveNodeConfig extends PolymerElement {
   static get template() {
@@ -16,8 +16,7 @@ class ZwaveNodeConfig extends PolymerElement {
           margin-top: 24px;
         }
 
-        paper-card {
+        ha-card {
-          display: block;
           margin: 0 auto;
           max-width: 600px;
         }
@@ -36,7 +35,7 @@ class ZwaveNodeConfig extends PolymerElement {
         }
       </style>
       <div class="content">
-        <paper-card heading="Node config options">
+        <ha-card header="Node config options">
           <template is="dom-if" if="[[_wakeupNode]]">
             <div class="card-actions">
               <paper-input
@@ -159,7 +158,7 @@ class ZwaveNodeConfig extends PolymerElement {
               </ha-call-service-button>
             </div>
           </template>
-        </paper-card>
+        </ha-card>
       </div>
     `;
   }

src/panels/config/zwave/zwave-node-protection.js

@@ -1,4 +1,3 @@
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
@@ -7,6 +6,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../../components/buttons/ha-call-api-button";
+import "../../../components/ha-card";
 
 class ZwaveNodeProtection extends PolymerElement {
   static get template() {
@@ -19,8 +19,7 @@ class ZwaveNodeProtection extends PolymerElement {
         margin-top: 24px;
       }
 
-      paper-card {
+      ha-card {
-        display: block;
         margin: 0 auto;
         max-width: 600px;
       }
@@ -33,7 +32,7 @@ class ZwaveNodeProtection extends PolymerElement {
 
     </style>
       <div class="content">
-        <paper-card heading="Node protection">
+        <ha-card header="Node protection">
           <div class="device-picker">
           <paper-dropdown-menu label="Protection" dynamic-align class="flex" placeholder="{{_loadedProtectionValue}}">
             <paper-listbox slot="dropdown-content" selected="{{_selectedProtectionParameter}}">
@@ -51,7 +50,8 @@ class ZwaveNodeProtection extends PolymerElement {
               Set Protection
             </ha-call-service-button>
           </div>
-        </div>
+        </ha-card>
+      </div>
 `;
   }
 

src/panels/config/zwave/zwave-usercodes.js

@@ -1,4 +1,3 @@
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
@@ -7,6 +6,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../../components/buttons/ha-call-service-button";
+import "../../../components/ha-card";
 
 class ZwaveUsercodes extends PolymerElement {
   static get template() {
@@ -16,8 +16,7 @@ class ZwaveUsercodes extends PolymerElement {
           margin-top: 24px;
         }
 
-        paper-card {
+        ha-card {
-          display: block;
           margin: 0 auto;
           max-width: 600px;
         }
@@ -31,7 +30,7 @@ class ZwaveUsercodes extends PolymerElement {
         }
       </style>
       <div class="content">
-        <paper-card heading="Node user codes">
+        <ha-card header="Node user codes">
           <div class="device-picker">
             <paper-dropdown-menu
               label="Code slot"
@@ -83,7 +82,7 @@ class ZwaveUsercodes extends PolymerElement {
               </ha-call-service-button>
             </div>
           </template>
-        </paper-card>
+        </ha-card>
       </div>
     `;
   }

src/panels/config/zwave/zwave-values.js

@@ -1,4 +1,3 @@
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
@@ -6,6 +5,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../../components/buttons/ha-call-service-button";
+import "../../../components/ha-card";
 
 class ZwaveValues extends PolymerElement {
   static get template() {
@@ -15,8 +15,7 @@ class ZwaveValues extends PolymerElement {
           margin-top: 24px;
         }
 
-        paper-card {
+        ha-card {
-          display: block;
           margin: 0 auto;
           max-width: 600px;
         }
@@ -35,7 +34,7 @@ class ZwaveValues extends PolymerElement {
         }
       </style>
       <div class="content">
-        <paper-card heading="Node Values">
+        <ha-card header="Node Values">
           <div class="device-picker">
             <paper-dropdown-menu label="Value" dynamic-align="" class="flex">
               <paper-listbox
@@ -48,7 +47,7 @@ class ZwaveValues extends PolymerElement {
               </paper-listbox>
             </paper-dropdown-menu>
           </div>
-        </paper-card>
+        </ha-card>
       </div>
     `;
   }

src/panels/dev-info/system-health-card.ts

@@ -6,8 +6,8 @@ import {
   PropertyDeclarations,
   TemplateResult,
 } from "lit-element";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-spinner/paper-spinner";
+import "../../components/ha-card";
 
 import { HomeAssistant } from "../../types";
 import {
@@ -85,9 +85,9 @@ class SystemHealthCard extends LitElement {
     }
 
     return html`
-      <paper-card heading="System Health">
+      <ha-card header="System Health">
         <div class="card-content">${sections}</div>
-      </paper-card>
+      </ha-card>
     `;
   }
 
@@ -114,10 +114,6 @@ class SystemHealthCard extends LitElement {
 
   static get styles(): CSSResult {
     return css`
-      paper-card {
-        display: block;
-      }
-
       table {
         width: 100%;
       }

src/panels/dev-info/system-log-card.ts

@@ -6,11 +6,11 @@ import {
   PropertyDeclarations,
   TemplateResult,
 } from "lit-element";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-spinner/paper-spinner";
+import "../../components/ha-card";
 import "../../components/buttons/ha-call-service-button";
 import "../../components/buttons/ha-progress-button";
 import { HomeAssistant } from "../../types";
@@ -43,7 +43,7 @@ class SystemLogCard extends LitElement {
   protected render(): TemplateResult | void {
     return html`
       <div class="system-log-intro">
-        <paper-card>
+        <ha-card>
           ${this._items === undefined
             ? html`
                 <div class="loading-container">
@@ -96,7 +96,7 @@ class SystemLogCard extends LitElement {
                   >
                 </div>
               `}
-        </paper-card>
+        </ha-card>
       </div>
     `;
   }
@@ -131,8 +131,7 @@ class SystemLogCard extends LitElement {
 
   static get styles(): CSSResult {
     return css`
-      paper-card {
+      ha-card {
-        display: block;
         padding-top: 16px;
       }
 

src/panels/dev-mqtt/ha-panel-dev-mqtt.js

@@ -2,12 +2,12 @@ import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-input/paper-textarea";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
+import "../../components/ha-card";
 import "../../components/ha-menu-button";
 import "../../resources/ha-style";
 import "../../util/app-localstorage-document";
@@ -29,10 +29,6 @@ class HaPanelDevMqtt extends PolymerElement {
           direction: ltr;
         }
 
-        paper-card {
-          display: block;
-        }
-
         mwc-button {
           background-color: white;
         }
@@ -55,7 +51,7 @@ class HaPanelDevMqtt extends PolymerElement {
         </app-localstorage-document>
 
         <div class="content">
-          <paper-card heading="Publish a packet">
+          <ha-card header="Publish a packet">
             <div class="card-content">
               <paper-input label="topic" value="{{topic}}"></paper-input>
 
@@ -68,7 +64,7 @@ class HaPanelDevMqtt extends PolymerElement {
             <div class="card-actions">
               <mwc-button on-click="_publish">Publish</mwc-button>
             </div>
-          </paper-card>
+          </ha-card>
         </div>
       </app-header-layout>
     `;

src/panels/lovelace/cards/hui-empty-state-card.ts

@@ -8,7 +8,7 @@ import {
   property,
 } from "lit-element";
 
-import "@polymer/paper-card/paper-card";
+import "../../../components/ha-card";
 
 import { LovelaceCard } from "../types";
 import { HomeAssistant } from "../../../types";
@@ -32,8 +32,8 @@ export class HuiEmptyStateCard extends LitElement implements LovelaceCard {
     }
 
     return html`
-      <paper-card
+      <ha-card
-        .heading="${this.hass.localize(
+        .header="${this.hass.localize(
           "ui.panel.lovelace.cards.empty_state.title"
         )}"
       >
@@ -51,7 +51,7 @@ export class HuiEmptyStateCard extends LitElement implements LovelaceCard {
             </mwc-button>
           </a>
         </div>
-      </paper-card>
+      </header-card>
     `;
   }
 

src/panels/lovelace/cards/hui-entity-button-card.ts

@@ -131,6 +131,9 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
                 style="${styleMap({
                   filter: this._computeBrightness(stateObj),
                   color: this._computeColor(stateObj),
+                  height: this._config.icon_height
+                    ? this._config.icon_height
+                    : "auto",
                 })}"
               ></ha-icon>
             `

src/panels/lovelace/editor/config-elements/config-elements-style.ts

@@ -12,5 +12,8 @@ export const configElementStyle = html`
       flex: 1;
       padding-right: 4px;
     }
+    .suffix {
+      margin: 0 8px;
+    }
   </style>
 `;

src/panels/lovelace/editor/config-elements/hui-entity-button-card-editor.ts

@@ -31,6 +31,7 @@ const cardConfigStruct = struct({
   show_name: "boolean?",
   icon: "string?",
   show_icon: "boolean?",
+  icon_height: "string?",
   tap_action: struct.optional(actionConfigStruct),
   hold_action: struct.optional(actionConfigStruct),
   theme: "string?",
@@ -68,6 +69,12 @@ export class HuiEntityButtonCardEditor extends LitElement
     return this._config!.show_icon || true;
   }
 
+  get _icon_height(): string {
+    return this._config!.icon_height && this._config!.icon_height.includes("px")
+      ? String(parseFloat(this._config!.icon_height))
+      : "";
+  }
+
   get _tap_action(): ActionConfig {
     return this._config!.tap_action || { action: "more-info" };
   }
@@ -125,12 +132,24 @@ export class HuiEntityButtonCardEditor extends LitElement
             >Show Icon?</paper-toggle-button
           >
         </div>
-        <hui-theme-select-editor
+        <div class="side-by-side">
-          .hass="${this.hass}"
+          <paper-input
-          .value="${this._theme}"
+            label="Icon Height (Optional)"
-          .configValue="${"theme"}"
+            .value="${this._icon_height}"
-          @theme-changed="${this._valueChanged}"
+            .configValue="${"icon_height"}"
-        ></hui-theme-select-editor>
+            @value-changed="${this._valueChanged}"
+            type="number"
+          ><div class="suffix" slot="suffix">px</div>
+          </paper-input>
+          <hui-theme-select-editor
+            .hass="${this.hass}"
+            .value="${this._theme}"
+            .configValue="${"theme"}"
+            @theme-changed="${this._valueChanged}"
+          ></hui-theme-select-editor>
+        </paper-input>
+
+        </div>
         <div class="side-by-side">
           <hui-action-editor
             label="Tap Action"
@@ -169,11 +188,20 @@ export class HuiEntityButtonCardEditor extends LitElement
       if (target.value === "") {
         delete this._config[target.configValue!];
       } else {
+        let newValue: string | undefined;
+        if (
+          target.configValue === "icon_height" &&
+          !isNaN(Number(target.value))
+        ) {
+          newValue = `${String(target.value)}px`;
+        }
         this._config = {
           ...this._config,
           [target.configValue!]:
             target.checked !== undefined
               ? target.checked
+              : newValue !== undefined
+              ? newValue
               : target.value
               ? target.value
               : target.config,

src/panels/mailbox/ha-panel-mailbox.js

@@ -2,7 +2,6 @@ import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-input/paper-textarea";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-item/paper-item";
@@ -12,6 +11,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../components/ha-menu-button";
+import "../../components/ha-card";
 import "../../resources/ha-style";
 
 import formatDateTime from "../../common/datetime/format_date_time";
@@ -39,8 +39,8 @@ class HaPanelMailbox extends EventsMixin(LocalizeMixin(PolymerElement)) {
           margin: 0 auto;
         }
 
-        paper-card {
+        ha-card {
-          display: block;
+          overflow: hidden;
         }
 
         paper-item {
@@ -98,7 +98,7 @@ class HaPanelMailbox extends EventsMixin(LocalizeMixin(PolymerElement)) {
           </div>
         </app-header>
         <div class="content">
-          <paper-card>
+          <ha-card>
             <template is="dom-if" if="[[!_messages.length]]">
               <div class="card-content empty">
                 [[localize('ui.panel.mailbox.empty')]]
@@ -120,7 +120,7 @@ class HaPanelMailbox extends EventsMixin(LocalizeMixin(PolymerElement)) {
                 </paper-item-body>
               </paper-item>
             </template>
-          </paper-card>
+          </ha-card>
         </div>
       </app-header-layout>
     `;

src/panels/profile/ha-change-password-card.js

@@ -1,9 +1,9 @@
 import "@material/mwc-button";
 import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-spinner/paper-spinner";
-import "@polymer/paper-card/paper-card";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "../../components/ha-card";
 
 import LocalizeMixin from "../../mixins/localize-mixin";
 
@@ -27,16 +27,13 @@ class HaChangePasswordCard extends LocalizeMixin(PolymerElement) {
           position: absolute;
           top: -4px;
         }
-        paper-card {
-          display: block;
-        }
         .currentPassword {
           margin-top: -4px;
         }
       </style>
       <div>
-        <paper-card
+        <ha-card
-          heading="[[localize('ui.panel.profile.change_password.header')]]"
+          header="[[localize('ui.panel.profile.change_password.header')]]"
         >
           <div class="card-content">
             <template is="dom-if" if="[[_errorMsg]]">
@@ -83,7 +80,7 @@ class HaChangePasswordCard extends LocalizeMixin(PolymerElement) {
               >
             </template>
           </div>
-        </paper-card>
+        </ha-card>
       </div>
     `;
   }

src/panels/profile/ha-long-lived-access-tokens-card.js

@@ -5,6 +5,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { EventsMixin } from "../../mixins/events-mixin";
 import LocalizeMixin from "../../mixins/localize-mixin";
 import formatDateTime from "../../common/datetime/format_date_time";
+import "../../components/ha-card";
 
 import "../../resources/ha-style";
 
@@ -18,9 +19,6 @@ class HaLongLivedTokens extends LocalizeMixin(EventsMixin(PolymerElement)) {
   static get template() {
     return html`
       <style include="ha-style">
-        paper-card {
-          display: block;
-        }
         .card-content {
           margin: -1em 0;
         }
@@ -31,8 +29,8 @@ class HaLongLivedTokens extends LocalizeMixin(EventsMixin(PolymerElement)) {
           color: var(--primary-text-color);
         }
       </style>
-      <paper-card
+      <ha-card
-        heading="[[localize('ui.panel.profile.long_lived_access_tokens.header')]]"
+        header="[[localize('ui.panel.profile.long_lived_access_tokens.header')]]"
       >
         <div class="card-content">
           <p>
@@ -65,7 +63,7 @@ class HaLongLivedTokens extends LocalizeMixin(EventsMixin(PolymerElement)) {
             [[localize('ui.panel.profile.long_lived_access_tokens.create')]]
           </mwc-button>
         </div>
-      </paper-card>
+      </ha-card>
     `;
   }
 

src/panels/profile/ha-mfa-modules-card.js

@@ -1,9 +1,9 @@
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-item/paper-item";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "../../components/ha-card";
 
 import "../../resources/ha-style";
 
@@ -31,16 +31,11 @@ class HaMfaModulesCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
           position: absolute;
           top: -4px;
         }
-        paper-card {
-          display: block;
-          max-width: 600px;
-          margin: 16px auto;
-        }
         mwc-button {
           margin-right: -0.57em;
         }
       </style>
-      <paper-card heading="[[localize('ui.panel.profile.mfa.header')]]">
+      <ha-card header="[[localize('ui.panel.profile.mfa.header')]]">
         <template is="dom-repeat" items="[[mfaModules]]" as="module">
           <paper-item>
             <paper-item-body two-line="">
@@ -59,7 +54,7 @@ class HaMfaModulesCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
             </template>
           </paper-item>
         </template>
-      </paper-card>
+      </ha-card>
     `;
   }
 

src/panels/profile/ha-panel-profile.js

@@ -1,6 +1,5 @@
 import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-item/paper-item";
 import "@material/mwc-button";
@@ -8,6 +7,7 @@ import "@polymer/app-layout/app-toolbar/app-toolbar";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
+import "../../components/ha-card";
 import "../../components/ha-menu-button";
 import "../../resources/ha-style";
 
@@ -58,7 +58,7 @@ class HaPanelProfile extends EventsMixin(LocalizeMixin(PolymerElement)) {
         </app-header>
 
         <div class="content">
-          <paper-card heading="[[hass.user.name]]">
+          <ha-card header="[[hass.user.name]]">
             <div class="card-content">
               [[localize('ui.panel.profile.current_user', 'fullName',
               hass.user.name)]]
@@ -87,7 +87,7 @@ class HaPanelProfile extends EventsMixin(LocalizeMixin(PolymerElement)) {
                 >[[localize('ui.panel.profile.logout')]]</mwc-button
               >
             </div>
-          </paper-card>
+          </ha-card>
 
           <template is="dom-if" if="[[_canChangePassword(hass.user)]]">
             <ha-change-password-card hass="[[hass]]"></ha-change-password-card>

src/panels/profile/ha-pick-language-row.js

@@ -1,4 +1,3 @@
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import { html } from "@polymer/polymer/lib/utils/html-tag";

src/panels/profile/ha-pick-theme-row.js

@@ -1,4 +1,3 @@
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import { html } from "@polymer/polymer/lib/utils/html-tag";

src/panels/profile/ha-push-notifications-row.js

@@ -1,6 +1,5 @@
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import "@polymer/iron-label/iron-label";
-import "@polymer/paper-card/paper-card";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 

src/panels/profile/ha-refresh-tokens-card.js

@@ -1,6 +1,8 @@
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-tooltip/paper-tooltip";
 
+import "../../components/ha-card";
+
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { EventsMixin } from "../../mixins/events-mixin";
@@ -17,9 +19,6 @@ class HaRefreshTokens extends LocalizeMixin(EventsMixin(PolymerElement)) {
   static get template() {
     return html`
       <style>
-        paper-card {
-          display: block;
-        }
         paper-icon-button {
           color: var(--primary-text-color);
         }
@@ -27,9 +26,7 @@ class HaRefreshTokens extends LocalizeMixin(EventsMixin(PolymerElement)) {
           color: var(--disabled-text-color);
         }
       </style>
-      <paper-card
+      <ha-card header="[[localize('ui.panel.profile.refresh_tokens.header')]]">
-        heading="[[localize('ui.panel.profile.refresh_tokens.header')]]"
-      >
         <div class="card-content">
           [[localize('ui.panel.profile.refresh_tokens.description')]]
         </div>
@@ -52,7 +49,7 @@ class HaRefreshTokens extends LocalizeMixin(EventsMixin(PolymerElement)) {
             </div>
           </ha-settings-row>
         </template>
-      </paper-card>
+      </ha-card>
     `;
   }
 

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

@@ -1,7 +1,6 @@
 import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-input/paper-input";
@@ -15,6 +14,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../components/ha-menu-button";
 import "../../components/ha-start-voice-button";
+import "../../components/ha-card";
 import LocalizeMixin from "../../mixins/localize-mixin";
 
 /*
@@ -38,9 +38,6 @@ class HaPanelShoppingList extends LocalizeMixin(PolymerElement) {
           max-width: 600px;
           margin: 0 auto;
         }
-        paper-card {
-          display: block;
-        }
         paper-icon-item {
           border-top: 1px solid var(--divider-color);
         }
@@ -95,7 +92,7 @@ class HaPanelShoppingList extends LocalizeMixin(PolymerElement) {
         </app-header>
 
         <div class="content">
-          <paper-card>
+          <ha-card>
             <paper-icon-item on-focus="_focusRowInput">
               <paper-icon-button
                 slot="item-icon"
@@ -130,7 +127,7 @@ class HaPanelShoppingList extends LocalizeMixin(PolymerElement) {
                 </paper-item-body>
               </paper-icon-item>
             </template>
-          </paper-card>
+          </ha-card>
           <div class="tip" hidden$="[[!canListen]]">
             [[localize('ui.panel.shopping-list.microphone_tip')]]
           </div>

src/state/notification-mixin.ts

@@ -1,6 +1,6 @@
 export default (superClass) =>
   class extends superClass {
-    firstUpdated(changedProps) {
+    protected firstUpdated(changedProps) {
       super.firstUpdated(changedProps);
       this.registerDialog({
         dialogShowEvent: "hass-notification",

src/util/toast.ts

@@ -0,0 +1,6 @@
+import { ShowToastParams } from "../managers/notification-manager";
+
+import { fireEvent } from "../common/dom/fire_event";
+
+export const showToast = (el: HTMLElement, params: ShowToastParams) =>
+  fireEvent(el, "hass-notification", params);

translations/fr.json

@@ -603,6 +603,12 @@
                         "device_unavailable": "appareil indisponible",
                         "entity_unavailable": "entité indisponible",
                         "no_area": "Pas de pièce"
+                    },
+                    "config_flow": {
+                        "external_step": {
+                            "description": "Cette étape nécessite la visite d'un site Web externe pour être complétée.",
+                            "open_site": "Ouvrir le site"
+                        }
                     }
                 },
                 "zha": {
@@ -873,6 +879,14 @@
                         "title": "Bienvenue à la maison",
                         "no_devices": "Cette page vous permet de contrôler vos périphériques. Toutefois, il semble que vous n’ayez pas encore configuré de périphériques. Rendez-vous sur la page des intégrations pour commencer.",
                         "go_to_integrations_page": "Aller à la page des intégrations."
+                    },
+                    "picture-elements": {
+                        "hold": "Maintenir:",
+                        "tap": "Appuyez sur:",
+                        "navigate_to": "Accédez à {location}",
+                        "toggle": "Activer\/désactiver {name}",
+                        "call_service": "Appeler le service {name}",
+                        "more_info": "Afficher plus d'informations: {name}"
                     }
                 },
                 "editor": {
@@ -930,7 +944,8 @@
         },
         "sidebar": {
             "log_out": "Déconnexion",
-            "developer_tools": "Outils de développement"
+            "developer_tools": "Outils de développement",
+            "external_app_configuration": "Configuration de l'application"
         },
         "common": {
             "loading": "Chargement",

translations/hu.json

@@ -603,6 +603,12 @@
                         "device_unavailable": "eszköz nem érhető el",
                         "entity_unavailable": "entitás nem érhető el",
                         "no_area": "Nincs Terület"
+                    },
+                    "config_flow": {
+                        "external_step": {
+                            "description": "Ehhez a lépéshez egy külső weboldal meglátogatása szükséges.",
+                            "open_site": "Weboldal megnyitása"
+                        }
                     }
                 },
                 "zha": {
@@ -855,6 +861,11 @@
                         "required_fields": "Töltsd ki az összes szükséges mezőt",
                         "password_not_match": "A jelszavak nem egyeznek"
                     }
+                },
+                "integration": {
+                    "intro": "Az eszközöket és szolgáltatásokat a Home Assistant integrációként kezeli. Beállíthatod őket most, vagy később a konfigurációs képernyőn.",
+                    "more_integrations": "Több",
+                    "finish": "Befejezés"
                 }
             },
             "lovelace": {
@@ -933,7 +944,8 @@
         },
         "sidebar": {
             "log_out": "Kijelentkezés",
-            "developer_tools": "Fejlesztői eszközök"
+            "developer_tools": "Fejlesztői eszközök",
+            "external_app_configuration": "App Konfiguráció"
         },
         "common": {
             "loading": "Betöltés",

translations/is.json

@@ -268,7 +268,7 @@
             },
             "config": {
                 "header": "Stilla af Home Assistant",
-                "introduction": "Hér er mögulegt að stilla af íhluti og Home Assistang. Því miður er ekki hægt að breyta öllu í gegnum viðmótið ennþá, en við erum að vinna í því.",
+                "introduction": "Hér er mögulegt að stilla af íhluti og Home Assistant. Því miður er ekki hægt að breyta öllu í gegnum viðmótið ennþá, en við erum að vinna í því.",
                 "core": {
                     "caption": "Almennt",
                     "description": "Staðfesta að stillingarskráin þín sé rétt og stjórnun á miðlara",
@@ -573,7 +573,7 @@
                 },
                 "person": {
                     "caption": "Persónur",
-                    "description": "Stjórna persónum sem Home assistand er að rekja.",
+                    "description": "Stjórna persónum sem Home assistant er að rekja.",
                     "detail": {
                         "name": "Nafn",
                         "device_tracker_intro": "Veldu tæki sem tilheyrir þessari persónu.",

translations/ko.json

@@ -603,6 +603,12 @@
                         "device_unavailable": "기기 사용불가",
                         "entity_unavailable": "구성요소 사용불가",
                         "no_area": "영역 없음"
+                    },
+                    "config_flow": {
+                        "external_step": {
+                            "description": "이 단계는 외부 웹사이트 방문이 필요합니다.",
+                            "open_site": "웹사이트 열기"
+                        }
                     }
                 },
                 "zha": {

translations/nb.json

@@ -582,7 +582,7 @@
                     "caption": "Home Assistant Cloud",
                     "description_login": "Logget inn som {email}",
                     "description_not_login": "Ikke pålogget",
-                    "description_features": "Kontroller bortefra hjemmet, integrere med Alexa og Google Assistant."
+                    "description_features": "Kontroller borte fra hjemmet, integrere med Alexa og Google Assistant."
                 },
                 "integrations": {
                     "caption": "Integrasjoner",

translations/pl.json

@@ -603,6 +603,12 @@
                         "device_unavailable": "urządzenie niedostępne",
                         "entity_unavailable": "encja niedostępna",
                         "no_area": "brak"
+                    },
+                    "config_flow": {
+                        "external_step": {
+                            "description": "Ten krok wymaga od Ciebie odwiedzenia zewnętrznej strony.",
+                            "open_site": "Otwórz stronę"
+                        }
                     }
                 },
                 "zha": {
@@ -855,6 +861,11 @@
                         "required_fields": "Wypełnij wszystkie wymagane pola",
                         "password_not_match": "Hasła nie są takie same"
                     }
+                },
+                "integration": {
+                    "intro": "Urządzenia i usługi są reprezentowane w Home Assistant jako integracje. Możesz je teraz skonfigurować lub zrobić to później w konfiguracji.",
+                    "more_integrations": "Więcej",
+                    "finish": "Koniec"
                 }
             },
             "lovelace": {

translations/ru.json

@@ -371,7 +371,7 @@
                     "caption": "Автоматизация",
                     "description": "Создавайте и редактируйте правила автоматизации",
                     "picker": {
-                        "header": "Редактор автоматизации",
+                        "header": "Редактор автоматизаций",
                         "introduction": "Редактор автоматизаций позволяет создавать и редактировать автоматизации.\nПожалуйста, ознакомьтесь с инструкциями по указанной ниже ссылке и убедитесь, что правильно настроили Home Assistant.",
                         "pick_automation": "Выберите автоматизацию для редактирования",
                         "no_automations": "Мы не нашли редактируемые автоматизации",

translations/sv.json

@@ -603,6 +603,12 @@
                         "device_unavailable": "enhet otillgänglig",
                         "entity_unavailable": "entitet otillgänglig",
                         "no_area": "Inget område (\"area\")"
+                    },
+                    "config_flow": {
+                        "external_step": {
+                            "description": "Det här steget kräver att du besöker en extern webbplats för att slutföra.",
+                            "open_site": "Öppna webbplats"
+                        }
                     }
                 },
                 "zha": {
@@ -855,6 +861,11 @@
                         "required_fields": "Fyll i alla fält som krävs",
                         "password_not_match": "Lösenorden överensstämmer inte"
                     }
+                },
+                "integration": {
+                    "intro": "Enheter och tjänster representeras i Home Assistant som integrationer. Du kan ställa in dem nu eller göra det senare från konfigurations-skärmen.",
+                    "more_integrations": "Mer",
+                    "finish": "Avsluta"
                 }
             },
             "lovelace": {
@@ -868,6 +879,14 @@
                         "title": "Välkommen hem",
                         "no_devices": "På den här sidan kan du styra dina enheter, men det ser ut som om du inte har några enheter ännu. Gå till integrationssidan för att komma igång.",
                         "go_to_integrations_page": "Gå till integrationssidan."
+                    },
+                    "picture-elements": {
+                        "hold": "Håll:",
+                        "tap": "Tryck:",
+                        "navigate_to": "Navigera till {location}",
+                        "toggle": "Växla {name}",
+                        "call_service": "Kör tjänst {name}",
+                        "more_info": "Visa mer-info: {name}"
                     }
                 },
                 "editor": {
@@ -925,7 +944,8 @@
         },
         "sidebar": {
             "log_out": "Logga ut",
-            "developer_tools": "Utvecklarverktyg"
+            "developer_tools": "Utvecklarverktyg",
+            "external_app_configuration": "Appkonfiguration"
         },
         "common": {
             "loading": "Läser in",

translations/zh-Hans.json

@@ -581,7 +581,8 @@
                 "cloud": {
                     "caption": "Home Assistant Cloud",
                     "description_login": "登录为 {email}",
-                    "description_not_login": "未登录"
+                    "description_not_login": "未登录",
+                    "description_features": "整合 Alexa 及 Google 助理，远程控制智能家居。"
                 },
                 "integrations": {
                     "caption": "集成",
@@ -602,6 +603,12 @@
                         "device_unavailable": "设备不可用",
                         "entity_unavailable": "实体不可用",
                         "no_area": "没有区域"
+                    },
+                    "config_flow": {
+                        "external_step": {
+                            "description": "此步骤要求您访问要完成的外部网站。",
+                            "open_site": "打开网站"
+                        }
                     }
                 },
                 "zha": {
@@ -613,7 +620,8 @@
                         "remove": "从 ZigBee 网络中删除设备。"
                     },
                     "device_card": {
-                        "device_name_placeholder": "用户指定的名称"
+                        "device_name_placeholder": "用户指定的名称",
+                        "update_name_button": "更新名称"
                     },
                     "add_device_page": {
                         "header": "Zigbee家庭自动化 - 添加设备",
@@ -852,6 +860,10 @@
                         "required_fields": "请填写所有必填字段",
                         "password_not_match": "密码不匹配"
                     }
+                },
+                "integration": {
+                    "more_integrations": "更多",
+                    "finish": "完成"
                 }
             },
             "lovelace": {
@@ -865,6 +877,14 @@
                         "title": "欢迎回家",
                         "no_devices": "此页面是用来控制设备的，不过您好像还没有配置好任何设备。请前往集成页面以开始。",
                         "go_to_integrations_page": "前往集成页面。"
+                    },
+                    "picture-elements": {
+                        "hold": "按住：",
+                        "tap": "点击：",
+                        "navigate_to": "导航到{location}",
+                        "toggle": "切换{name}",
+                        "call_service": "调用服务{name}",
+                        "more_info": "显示更多信息： {name}"
                     }
                 },
                 "editor": {
@@ -922,7 +942,8 @@
         },
         "sidebar": {
             "log_out": "退出",
-            "developer_tools": "开发者工具"
+            "developer_tools": "开发者工具",
+            "external_app_configuration": "应用配置"
         },
         "common": {
             "loading": "加载中",

yarn.lock

@@ -6489,6 +6489,11 @@ functional-red-black-tree@^1.0.1:
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
+fuse.js@^3.4.4:
+  version "3.4.4"
+  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-3.4.4.tgz#f98f55fcb3b595cf6a3e629c5ffaf10982103e95"
+  integrity sha512-pyLQo/1oR5Ywf+a/tY8z4JygnIglmRxVUOiyFAbd11o9keUDpUJSMGRWJngcnkURj30kDHPmhoKY8ChJiz3EpQ==
+
 g-status@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/g-status/-/g-status-2.0.2.tgz#270fd32119e8fc9496f066fe5fe88e0a6bc78b97"